/* SMARING V32.14 — Login layout mengikuti komposisi referensi SAGARA,
   dengan identitas sekolah dan palet kuning-merah dari logo sekolah. */
:root{
  --red:#dc2626;
  --red-dark:#b91c1c;
  --red-soft:#fff1f1;
  --yellow:#facc15;
  --yellow-strong:#f4b400;
  --yellow-soft:#fff9db;
  --ink:#161b26;
  --muted:#7a8493;
  --line:#e8ebf0;
  --field:#f6f7f9;
  --card:#ffffff;
  --shadow:0 24px 58px rgba(28,35,49,.16),0 7px 20px rgba(28,35,49,.08);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}
body{min-height:100vh;background:#fff;overflow:hidden}
.auth-shell{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 93% 8%,rgba(250,204,21,.18),transparent 24%),
    radial-gradient(circle at 4% 92%,rgba(220,38,38,.08),transparent 27%),
    linear-gradient(180deg,#ffffff 0%,#fffefa 100%);
}
.auth-shell::before{
  content:"";position:absolute;left:-120px;top:-125px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(250,204,21,.07),rgba(250,204,21,0) 70%);pointer-events:none;
}
.auth-shell::after{
  content:"";position:absolute;right:-150px;bottom:-160px;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(220,38,38,.055),rgba(220,38,38,0) 72%);pointer-events:none;
}
.auth-main{min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;padding:28px 18px;position:relative;z-index:1}
.login-stage{width:100%;max-width:358px;display:flex;flex-direction:column;align-items:center}

/* Wordmark di atas kartu, mengikuti proporsi referensi. */
.product-brand{text-align:center;margin-bottom:15px;user-select:none}
.product-name{
  font-size:31px;line-height:1;font-weight:950;letter-spacing:-.045em;text-transform:uppercase;
  background:linear-gradient(96deg,var(--red-dark) 0%,var(--red) 44%,#ef7d16 64%,var(--yellow-strong) 84%,var(--yellow) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 10px rgba(220,38,38,.07));
}
.product-subtitle{margin-top:5px;color:#7b8491;font-size:9.5px;font-weight:650;letter-spacing:.015em}

.login-card{
  width:100%;position:relative;background:rgba(255,255,255,.98);border:1px solid #e4e8ee;border-radius:22px;
  padding:22px 23px 17px;box-shadow:var(--shadow);overflow:hidden;
}
.card-accent{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--yellow) 0%,var(--yellow-strong) 36%,#ef7d16 58%,var(--red) 82%,var(--red-dark) 100%)}
.login-card::before{content:"";position:absolute;width:145px;height:145px;border-radius:50%;right:-86px;top:-93px;background:radial-gradient(circle,rgba(250,204,21,.15),transparent 70%);pointer-events:none}
.login-card::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;left:-78px;bottom:-83px;background:radial-gradient(circle,rgba(220,38,38,.07),transparent 70%);pointer-events:none}

/* Logo sekolah sengaja ditempatkan tepat di atas form username/password. */
.school-identity{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;margin:1px 0 8px}
.logo-wrap{
  width:76px;height:76px;border-radius:22px;display:grid;place-items:center;padding:7px;background:#fff;
  border:1px solid rgba(220,38,38,.10);box-shadow:0 10px 24px rgba(28,35,49,.10),0 0 0 6px rgba(250,204,21,.07);
}
.school-logo{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 3px 4px rgba(15,23,42,.08))}
.school-name{
  max-width:290px;margin-top:10px;padding:5px 10px;border-radius:999px;
  background:linear-gradient(90deg,rgba(250,204,21,.16),rgba(220,38,38,.08));border:1px solid rgba(238,153,10,.18);
  color:#7a3f09;font-size:8.5px;font-weight:900;letter-spacing:.045em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.login-heading{position:relative;z-index:1;text-align:center;margin:12px 0 16px}
.login-heading h1{font-size:15.5px;line-height:1.25;margin:0 0 5px;font-weight:900;letter-spacing:-.018em}
.login-heading p{margin:0 auto;max-width:250px;color:var(--muted);font-size:10px;line-height:1.48}

.alert{position:relative;z-index:2;display:flex;gap:9px;padding:10px 11px;border:1px solid rgba(220,38,38,.20);border-radius:10px;margin:0 0 13px;font-size:10px;background:#fff5f5;color:#991b1b}
.alert-icon{width:18px;height:18px;border-radius:999px;background:#fee2e2;display:grid;place-items:center;font-weight:900;flex:none}.alert b{display:block;font-size:10px;margin-bottom:2px}.alert p{margin:0;line-height:1.4}

.login-form{position:relative;z-index:2;display:grid;gap:12px}
.form-field{display:grid;gap:5px}
.form-field label{font-size:8px;font-weight:900;color:#687384;letter-spacing:.075em;text-transform:uppercase}
.input-shell,.password-wrap{position:relative}
.field-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:#9aa5b4;pointer-events:none;z-index:2}
.field-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.form-field input{
  width:100%;height:41px;border:1px solid #dce2ea;border-radius:8px;background:var(--field);color:var(--ink);
  font:inherit;font-size:12px;font-weight:650;padding:0 40px 0 36px;outline:none;transition:.16s ease;
}
.form-field input::placeholder{color:#a6afbb;font-weight:500}
.form-field input:focus{background:#fff;border-color:var(--yellow-strong);box-shadow:0 0 0 3px rgba(250,204,21,.15),0 0 0 1px rgba(220,38,38,.05)}
.form-field input:disabled{opacity:.56;cursor:not-allowed}
.password-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:transparent;color:#9ba5b2;border-radius:8px;display:grid;place-items:center;cursor:pointer}
.password-toggle:hover{background:var(--yellow-soft);color:#9a5b00}
.password-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.password-toggle .eye-off{display:none}.password-toggle.showing .eye-open{display:none}.password-toggle.showing .eye-off{display:block}
.form-options{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin-top:-1px}
.remember{display:inline-flex;align-items:center;gap:6px;font-size:9px;color:#687384;white-space:nowrap}
.remember input{width:14px;height:14px;accent-color:var(--red)}
.help-text{font-size:8.7px;line-height:1.35;color:#8c95a2;text-align:right}
.login-button{
  height:42px;border:0;border-radius:8px;background:linear-gradient(100deg,var(--yellow-strong) 0%,#f59e0b 26%,#ea580c 57%,var(--red) 100%);
  color:#fff;font:inherit;font-size:11.5px;font-weight:850;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 9px 18px rgba(220,38,38,.18),0 5px 12px rgba(245,158,11,.13);transition:transform .08s ease,filter .15s ease,box-shadow .15s ease;
}
.login-button:hover{filter:saturate(1.05) brightness(1.025);box-shadow:0 11px 22px rgba(220,38,38,.20),0 6px 14px rgba(245,158,11,.15)}
.login-button:active{transform:translateY(1px)}.login-button:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.login-button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.login-note{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;padding-top:12px;border-top:1px solid #edf0f3;color:#8b94a1;font-size:8.7px;font-weight:650;text-align:center}
.note-dot{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--yellow-strong),var(--red));box-shadow:0 0 0 3px rgba(250,204,21,.10)}
.card-footer{position:relative;z-index:2;margin-top:12px;text-align:center;color:#a0a7b2;font-size:8px;font-weight:650;letter-spacing:.01em}
.db-note{position:relative;z-index:2;margin-top:11px;padding:9px;border-radius:8px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-size:9px;line-height:1.45}

@media(max-width:520px){
  body{overflow:auto}.auth-main{min-height:100svh;align-items:flex-start;padding:22px 16px 28px}.login-stage{max-width:348px}
  .product-name{font-size:28px}.product-subtitle{font-size:9px}.login-card{padding:21px 19px 16px;border-radius:20px}
  .logo-wrap{width:72px;height:72px}.school-name{max-width:260px}.form-field input{font-size:16px}.help-text{max-width:140px}
}
@media(max-height:720px) and (min-width:521px){
  .auth-main{padding-top:14px;padding-bottom:16px}.product-brand{margin-bottom:9px}.product-name{font-size:27px}.product-subtitle{margin-top:3px}
  .login-card{padding-top:18px;padding-bottom:13px}.logo-wrap{width:62px;height:62px;border-radius:18px}.school-name{margin-top:7px}
  .login-heading{margin:8px 0 12px}.login-form{gap:9px}.login-note{margin-top:10px;padding-top:9px}.card-footer{margin-top:9px}
}

/* =========================================================
   SMARING V32.30 — LOGIN MOBILE CENTER
   Card login berada simetris di tengah horizontal dan vertikal pada HP.
   ========================================================= */
html,body{width:100%;min-height:100%;overflow-x:hidden}
.auth-shell{width:100%;min-height:100dvh}
.auth-main{width:100%;min-height:100dvh;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.login-stage{width:min(100%,358px);margin:auto;align-self:center;justify-self:center}

@media(max-width:520px){
  html,body{min-height:100dvh}
  body{overflow-y:auto}
  .auth-shell{min-height:100dvh;display:grid;place-items:center}
  .auth-main{
    min-height:100dvh;
    height:auto;
    display:grid;
    place-items:center;
    align-items:center!important;
    justify-content:center!important;
    padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))!important;
  }
  .login-stage{width:min(100%,350px);max-width:350px;margin:auto!important;align-self:center!important;justify-self:center!important}
  .product-brand{margin:0 0 12px}
  .login-card{width:100%;margin:0 auto;padding:20px 19px 16px}
  .school-identity,.login-heading,.login-form{width:100%}
  .form-field,.input-shell,.password-wrap,.form-field input,.login-button{width:100%}
  .form-field input{height:44px;font-size:16px;text-align:left}
  .login-button{height:44px}
}

/* Tinggi layar pendek tetap center, tetapi komponen dipadatkan agar tidak terpotong. */
@media(max-width:520px) and (max-height:680px){
  .auth-main{padding-top:10px!important;padding-bottom:10px!important}
  .product-brand{margin-bottom:7px}
  .product-name{font-size:25px}
  .product-subtitle{margin-top:2px}
  .login-card{padding-top:16px;padding-bottom:12px}
  .logo-wrap{width:60px;height:60px;border-radius:17px}
  .school-name{margin-top:6px}
  .login-heading{margin:7px 0 10px}
  .login-form{gap:9px}
  .card-footer{margin-top:8px}
}

/* SMARING V32.38 — glass/light login card */
.login-card{
  background:rgba(255,255,255,.82)!important;
  border-color:rgba(220,38,38,.11)!important;
  box-shadow:0 20px 54px rgba(15,23,42,.105),0 7px 22px rgba(245,158,11,.07),inset 0 1px 0 rgba(255,255,255,.92)!important;
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
}
@media(max-width:520px){.login-card{-webkit-backdrop-filter:blur(9px) saturate(112%);backdrop-filter:blur(9px) saturate(112%)}}

/* SMARING V32.39 — login card lebih tegas/futuristik */
.login-card{
  border-color:rgba(220,38,38,.20)!important;
  outline:1px solid rgba(245,158,11,.12);
  outline-offset:-3px;
  background-image:linear-gradient(135deg,rgba(245,158,11,.09),transparent 28%,transparent 72%,rgba(220,38,38,.055))!important;
  box-shadow:0 26px 64px rgba(15,23,42,.16),0 11px 30px rgba(245,158,11,.12),0 0 0 1px rgba(220,38,38,.055),inset 0 1px 0 rgba(255,255,255,.96)!important;
  -webkit-backdrop-filter:blur(16px) saturate(128%);
  backdrop-filter:blur(16px) saturate(128%);
}
@media(max-width:520px){
  .login-card{
    box-shadow:0 19px 46px rgba(15,23,42,.14),0 8px 22px rgba(245,158,11,.11),0 0 0 1px rgba(220,38,38,.05),inset 0 1px 0 rgba(255,255,255,.94)!important;
    -webkit-backdrop-filter:blur(11px) saturate(120%);
    backdrop-filter:blur(11px) saturate(120%);
  }
}