/* ==========================================================================
   Tampilan halaman autentikasi (login, lupa password, reset, lengkapi email)
   Semua aturan di-scope ke .login-page agar tidak mengganggu halaman lain.
   ========================================================================== */
.login-page{
  --blue:#1d4ed8; --blue-dark:#0a2a6b; --blue-soft:#eaf0ff;
  --ink:#0f1b3d; --muted:#64708a; --line:#d9e1f0; --danger:#b42318; --ok:#067647;
  position:relative; min-height:100vh; min-height:100dvh; width:100%;
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px; overflow:hidden; isolation:isolate;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  color:var(--ink); background:var(--blue-dark);
}
.login-page *,.login-page *::before,.login-page *::after{box-sizing:border-box}

/* latar: foto sekolah + overlay biru */
.login-bg{
  position:absolute; inset:0; z-index:-3;
  background:var(--school-bg) center/cover no-repeat;
  transform:scale(1.04); filter:saturate(1.05);
}
.login-overlay{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(160deg,rgba(6,24,66,.92) 0%,rgba(10,42,107,.84) 45%,rgba(29,78,216,.66) 100%);
}
.login-orb{position:absolute; z-index:-1; border-radius:50%; filter:blur(60px); opacity:.55; pointer-events:none}
.login-orb-one{width:340px;height:340px;top:-90px;left:-80px;background:#3b82f6}
.login-orb-two{width:300px;height:300px;bottom:-90px;right:-60px;background:#60a5fa}

.login-center{width:100%; display:flex; justify-content:center}

/* kartu */
.login-box{
  width:100%; max-width:440px; padding:32px 32px 28px;
  background:rgba(255,255,255,.97); border:1px solid rgba(255,255,255,.6);
  border-radius:24px;
  box-shadow:0 30px 70px rgba(4,15,45,.45),0 2px 0 rgba(255,255,255,.7) inset;
  animation:loginIn .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes loginIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.login-box{animation:none}}

.login-back,.back-link{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
  font-size:13px; font-weight:600; color:var(--muted); text-decoration:none;
  transition:color .15s,transform .15s;
}
.login-back:hover,.back-link:hover{color:var(--blue); transform:translateX(-2px)}

/* judul */
.login-heading{margin-bottom:22px}
.login-heading-centered{text-align:center}
.login-school-logo{
  width:84px; height:84px; margin:0 auto 14px; padding:10px;
  display:grid; place-items:center; background:#fff; border-radius:50%;
  border:1px solid var(--line); box-shadow:0 10px 26px rgba(10,42,107,.16);
}
.login-school-logo img{max-width:100%; max-height:100%; object-fit:contain; display:block}
.login-kicker{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; margin-bottom:10px;
  font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  color:var(--blue); background:var(--blue-soft); border-radius:999px;
}
.login-heading h3{margin:0 0 6px; font-size:24px; line-height:1.25; font-weight:700; color:var(--blue-dark)}
.login-heading .sub{margin:0 auto; max-width:340px; font-size:13.5px; line-height:1.6; color:var(--muted)}

/* form */
.login-page .form-group{margin-bottom:16px}
.login-page .form-group label{display:block; margin-bottom:7px; font-size:13px; font-weight:600; color:var(--ink)}
.input-wrap{position:relative; display:flex; align-items:center}
.input-leading{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  font-size:14px; color:#8a96b0; pointer-events:none; transition:color .15s;
}
.input-wrap input{
  width:100%; height:48px; padding:0 46px 0 44px;
  font:inherit; font-size:14.5px; color:var(--ink);
  background:#f7f9fd; border:1.5px solid var(--line); border-radius:12px; outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.input-wrap input::placeholder{color:#9aa5bd}
.input-wrap input:hover{border-color:#b9c6e2}
.input-wrap input:focus{background:#fff; border-color:var(--blue); box-shadow:0 0 0 4px rgba(29,78,216,.14)}
.input-wrap:focus-within .input-leading{color:var(--blue)}
.toggle-password{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; display:grid; place-items:center;
  color:#8a96b0; background:transparent; border:0; border-radius:10px; cursor:pointer;
  transition:color .15s,background .15s;
}
.toggle-password:hover{color:var(--blue); background:var(--blue-soft)}
.toggle-password:focus-visible{outline:2px solid var(--blue); outline-offset:1px}

/* tombol */
.login-page .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:inherit; font-weight:700; cursor:pointer; border:0; text-decoration:none;
}
.login-page .btn-block{width:100%}
.login-submit,.login-page .btn-primary{
  height:50px; padding:0 20px; font-size:15px; color:#fff; border-radius:12px;
  background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 55%,#1e40af 100%);
  box-shadow:0 12px 24px rgba(29,78,216,.32);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.login-submit:hover,.login-page .btn-primary:hover{transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 16px 30px rgba(29,78,216,.38)}
.login-submit:active,.login-page .btn-primary:active{transform:none}
.login-submit:focus-visible,.login-page .btn-primary:focus-visible{outline:3px solid rgba(29,78,216,.35); outline-offset:2px}
.login-submit[disabled]{opacity:.7; cursor:wait}

/* pesan */
.login-error,.login-helper{
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
  font-size:13px; line-height:1.5; border-radius:12px;
}
.login-error{margin-bottom:16px; color:var(--danger); background:#fef3f2; border:1px solid #fecdca}
.login-helper{margin-top:18px; color:#35508a; background:var(--blue-soft); border:1px solid #d5e1ff}
.login-error i,.login-helper i{margin-top:2px; flex:none}
.login-helper i.fa-circle-check{color:var(--ok)}

/* tautan di dalam form */
.login-page form a{color:var(--blue)}
.login-page form a:hover{text-decoration:underline!important}

/* responsif */
@media (max-width:480px){
  .login-page{padding:16px 12px; align-items:flex-start}
  .login-box{padding:24px 20px 22px; border-radius:20px; margin:auto 0}
  .login-school-logo{width:72px;height:72px}
  .login-heading h3{font-size:21px}
  .input-wrap input{font-size:16px} /* cegah zoom otomatis di iOS */
}
@media (max-height:640px) and (min-width:481px){
  .login-page{align-items:flex-start}
}