@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('download-fonts/PlusJakartaSans-400.ttf') format('truetype'); }
@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('download-fonts/PlusJakartaSans-500.ttf') format('truetype'); }
@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('download-fonts/PlusJakartaSans-600.ttf') format('truetype'); }
@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('download-fonts/PlusJakartaSans-700.ttf') format('truetype'); }
:root {
    --primary:#111827; --primary-hover:#000; --accent:#2563eb;
    --text:#111827; --muted:#6b7280; --border:#e5e7eb; --border-strong:#d1d5db;
    --bg:#f9fafb; --danger:#b91c1c;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:400 14px/1.55 'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; -webkit-font-smoothing:antialiased; }

.login-page { min-height:100vh; min-height:100svh; display:grid; place-items:center; padding:24px 16px; }
.login-panel { width:100%; max-width:400px; }
.login-content { background:#fff; border:1px solid var(--border); border-radius:12px; padding:40px 36px 32px; box-shadow:0 1px 2px rgba(0,0,0,.04); }

.identity { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; margin-bottom:28px; }
.emblem { width:56px; height:56px; flex:none; object-fit:contain; }
.identity strong { display:block; font-size:15px; font-weight:700; letter-spacing:.2px; }
.identity span { display:block; color:var(--muted); font-size:12px; }

h1 { margin:0 0 4px; font-size:20px; line-height:1.3; font-weight:600; letter-spacing:-.3px; text-align:center; }
.intro { margin:0 0 28px; color:var(--muted); font-size:13px; text-align:center; }

#form-login > label { display:block; margin:0 0 6px; font-size:13px; font-weight:500; }
#form-login > label[for=password] { margin-top:16px; }
.field { position:relative; }
.field input { width:100%; height:42px; padding:0 12px; border:1px solid var(--border-strong); border-radius:8px; background:#fff; color:var(--text); font:400 14px inherit; font-family:inherit; transition:border-color .15s, box-shadow .15s; }
.field input#password { padding-right:44px; }
.field-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:#9ca3af; pointer-events:none; transition:color .15s; }
.has-icon input { padding-left:38px; }
.has-icon:focus-within .field-icon { color:var(--text); }
.field input:-webkit-autofill { -webkit-box-shadow:0 0 0 40px #fff inset; -webkit-text-fill-color:var(--text); }
.field input:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 40px #fff inset, 0 0 0 3px rgba(37,99,235,.12); }
.field input::placeholder { color:#9ca3af; opacity:1; }
.field input:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.12); }

button { font-family:inherit; cursor:pointer; }
#show-password { position:absolute; top:50%; right:4px; transform:translateY(-50%); width:34px; height:34px; display:grid; place-items:center; padding:0; border:0; border-radius:6px; background:transparent; color:#9ca3af; }
#show-password svg { width:17px; height:17px; }
#show-password:hover, #show-password[aria-pressed=true] { color:var(--text); }

button[type=submit] { width:100%; height:42px; margin-top:24px; border:0; border-radius:8px; background:var(--primary); color:#fff; font-size:14px; font-weight:600; transition:background .15s; }
button[type=submit]:hover { background:var(--primary-hover); }
button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button:disabled { opacity:.6; cursor:wait; }

#message:empty { display:none; }
#message:not(:empty) { margin-top:12px; color:var(--danger); font-size:13px; text-align:center; }

.login-help { margin-top:20px; font-size:12px; color:var(--muted); text-align:center; }
#help-toggle { display:inline; padding:0; border:0; background:none; color:var(--text); font-size:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
#help-message { margin:10px 0 0; color:var(--muted); }

footer { margin-top:20px; color:#9ca3af; font-size:12px; text-align:center; }

@media(max-width:480px) {
    body { background:#fff; }
    .login-page { place-items:start center; padding:40px 20px; }
    .login-content { border:0; box-shadow:none; padding:0; }
}

/* ===== Tema biru (selaras dengan dashboard tes) ===== */
:root{--primary:#1d4ed8;--primary-hover:#1e40af;--accent:#1d4ed8;--text:#0f172a;--muted:#64748b;--border:#e2e8f0;--border-strong:#cbd5e1;--bg:#f1f5f9}
body{background:linear-gradient(180deg,#1d4ed8 0,#2563eb 300px,var(--bg) 300px) no-repeat,var(--bg);background-color:var(--bg)}
.login-page{place-items:start center;padding:56px 16px 32px}
.identity{flex-direction:column;align-items:center;text-align:center;gap:12px;margin-bottom:24px;color:#fff}
.identity .emblem{width:64px;height:64px;padding:8px;background:#fff;border-radius:16px;box-shadow:0 6px 16px rgba(15,23,42,.18)}
.identity strong{font-size:18px;color:#fff;letter-spacing:.3px}
.identity span{color:rgba(255,255,255,.8);font-size:13px}
.login-content{border:0;border-radius:16px;padding:32px 28px 24px;box-shadow:0 1px 3px rgba(15,23,42,.06),0 12px 32px rgba(15,23,42,.10)}
h1{font-size:20px;font-weight:700}
.field input{height:44px;border-radius:10px}
.field input:focus{box-shadow:0 0 0 3px rgba(29,78,216,.15)}
.has-icon:focus-within .field-icon{color:var(--primary)}
button[type=submit]{height:44px;border-radius:10px;box-shadow:0 2px 8px rgba(29,78,216,.3)}
#help-toggle{color:var(--primary);text-decoration:none}
#help-toggle:hover{text-decoration:underline}
footer{color:#94a3b8}
@media(max-width:480px){
  body{background:linear-gradient(180deg,#1d4ed8 0,#2563eb 260px,var(--bg) 260px) no-repeat,var(--bg);background-color:var(--bg)}
  .login-page{place-items:start center;padding:40px 16px 24px}
  .login-content{border:0;padding:24px 20px 20px;box-shadow:0 1px 3px rgba(15,23,42,.06),0 12px 32px rgba(15,23,42,.10)}
}

/* ===== Warna biru profesional (navy) ===== */
:root{--primary:#1e40af;--primary-hover:#1e3a8a;--accent:#1e40af}
body{background:linear-gradient(180deg,#1e3a8a 0,#1e40af 300px,var(--bg) 300px) no-repeat,var(--bg);background-color:var(--bg)}
.field input:focus{box-shadow:0 0 0 3px rgba(30,64,175,.15)}
button[type=submit]{box-shadow:0 2px 8px rgba(30,64,175,.3)}
@media(max-width:480px){body{background:linear-gradient(180deg,#1e3a8a 0,#1e40af 260px,var(--bg) 260px) no-repeat,var(--bg);background-color:var(--bg)}}

/* Ikon pada tombol Masuk */
button[type=submit]{display:flex;align-items:center;justify-content:center;gap:8px}
button[type=submit] .btn-icon{width:18px;height:18px;flex:none}

/* ===== Penyempurnaan profesional ===== */
.login-panel{max-width:420px}
.identity{margin-bottom:28px}
.identity .emblem{width:68px;height:68px;padding:9px;border-radius:18px;box-shadow:0 8px 24px rgba(2,6,23,.25),0 0 0 1px rgba(255,255,255,.4)}
.identity strong{font-size:18px;font-weight:700;letter-spacing:.4px}
.identity span{font-size:13px;color:rgba(255,255,255,.78)}
.login-content{padding:32px 28px 24px;border-radius:20px;border:1px solid rgba(15,23,42,.04);box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 40px -8px rgba(15,23,42,.18)}
h1{font-size:21px;line-height:1.3;font-weight:700;letter-spacing:-.4px;margin-bottom:6px}
.intro{font-size:14px;line-height:1.5;color:#64748b;margin-bottom:24px}
#form-login > label{font-size:13px;font-weight:600;color:#1e293b;margin-bottom:8px}
#form-login > label[for=password]{margin-top:18px}
.field input{height:46px;border-color:#dbe2ea;border-radius:10px;font-size:15px;color:#0f172a;background:#fff}
.field input:hover{border-color:#b6c2d1}
.field input:focus{border-color:#1e40af;box-shadow:0 0 0 4px rgba(30,64,175,.12)}
.field-icon{color:#94a3b8}
#show-password{color:#94a3b8;border-radius:8px}
#show-password:hover{background:#f1f5f9;color:#334155}
button[type=submit]{height:48px;margin-top:24px;border-radius:10px;font-size:15px;font-weight:600;letter-spacing:.1px;background:#1e40af;box-shadow:0 1px 2px rgba(15,23,42,.1),0 6px 16px -4px rgba(30,64,175,.45);transition:background .15s,box-shadow .15s,transform .1s}
button[type=submit]:hover{background:#1e3a8a;box-shadow:0 1px 2px rgba(15,23,42,.1),0 8px 20px -4px rgba(30,64,175,.5)}
button[type=submit]:active{transform:translateY(1px)}
button[type=submit] .btn-icon{transition:transform .15s}
button[type=submit]:hover .btn-icon{transform:translateX(2px)}
button[type=submit][aria-busy=true]{opacity:1;cursor:progress;background:#1e3a8a}
button[type=submit][aria-busy=true] .btn-icon{border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;width:16px;height:16px;stroke:none;animation:spin .7s linear infinite}
button[type=submit][aria-busy=true] .btn-icon *{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* Pesan error sebagai alert di atas form */
#message:not(:empty){display:flex;align-items:flex-start;gap:10px;margin:0 0 18px;padding:11px 14px;border:1px solid #fecaca;border-radius:10px;background:#fef2f2;color:#b91c1c;font-size:13px;line-height:1.45;text-align:left;animation:alertIn .2s ease-out}
#message:not(:empty):before{content:"";flex:none;width:16px;height:16px;margin-top:1px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes alertIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.is-error .field input{border-color:#fca5a5}
.is-error .field input:focus{border-color:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.12)}
.is-error .field-icon{color:#ef4444}

/* Bantuan & footer */
.login-help{margin-top:22px;padding-top:18px;border-top:1px solid #eef2f6;font-size:13px;line-height:1.6;color:#64748b}
#help-toggle{font-weight:600;color:#1e40af}
#help-message{margin-top:10px;padding:10px 12px;border-radius:10px;background:#f8fafc;border:1px solid #eef2f6;color:#475569;text-align:left}
footer{margin-top:18px;font-size:12px;color:#94a3b8}

@media(max-width:480px){
  .login-page{padding-top:36px}
  .login-content{padding:26px 20px 20px;border-radius:18px}
  h1{font-size:20px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== Warna: hijau teal (selaras logo sekolah) ===== */
:root{--primary:#0f766e;--primary-hover:#115e59;--accent:#0f766e}
body{background:linear-gradient(180deg,#134e4a 0,#0f766e 300px,var(--bg) 300px) no-repeat,var(--bg);background-color:var(--bg)}
.field input:focus{border-color:#0f766e;box-shadow:0 0 0 4px rgba(15,118,110,.14)}
.has-icon:focus-within .field-icon{color:#0f766e}
button[type=submit]{background:#0f766e;box-shadow:0 1px 2px rgba(15,23,42,.1),0 6px 16px -4px rgba(15,118,110,.45)}
button[type=submit]:hover,button[type=submit][aria-busy=true]{background:#115e59;box-shadow:0 1px 2px rgba(15,23,42,.1),0 8px 20px -4px rgba(15,118,110,.5)}
#help-toggle{color:#0f766e}
@media(max-width:480px){body{background:linear-gradient(180deg,#134e4a 0,#0f766e 260px,var(--bg) 260px) no-repeat,var(--bg);background-color:var(--bg)}}

/* ===== Login administrator: dua kolom (ilustrasi kiri, form kanan) ===== */
.login-split{background:#fff!important}
.login-split .login-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh;min-height:100svh;padding:0;place-items:stretch}
.login-split .login-visual{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;background:#f0fdfa;border-right:1px solid #e2e8f0;text-align:center}
.login-split .login-visual img{width:100%;max-width:440px;height:auto;max-height:60vh;object-fit:contain;margin-bottom:28px}
.login-split .login-visual-title{margin:0 0 6px;font-size:20px;font-weight:700;color:#134e4a;letter-spacing:-.3px}
.login-split .login-visual-text{margin:0;max-width:340px;font-size:14px;line-height:1.6;color:#64748b}
.login-split .login-panel{display:flex;flex-direction:column;justify-content:center;align-items:center;max-width:none;width:100%;padding:48px 24px}
.login-split .identity{flex-direction:row;justify-content:flex-start;text-align:left;gap:12px;width:100%;max-width:380px;margin:0 0 32px;color:#0f172a}
.login-split .identity .emblem{width:48px;height:48px;padding:6px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #e2e8f0}
.login-split .identity strong{color:#0f172a;font-size:16px}
.login-split .identity span{color:#64748b;font-size:13px}
.login-split .login-content{width:100%;max-width:380px;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent}
.login-split h1,.login-split .intro{text-align:left}
.login-split h1{font-size:24px}
.login-split .login-help,.login-split footer{text-align:left}
@media(max-width:900px){
  .login-split .login-page{grid-template-columns:1fr}
  .login-split .login-visual{display:none}
  .login-split .login-panel{padding:40px 20px}
}

/* Keselarasan tema: sudut 8px */
.login-content{border-radius:8px}
.field input,button[type=submit],#show-password,#message:not(:empty),#help-message{border-radius:8px}
@media(max-width:480px){.login-content{border-radius:8px}}