/* ═══════════════════════════════════════════════════════════════
   SMP AMBS — Login Page Styles
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENS (mirrors main design system) ────────────────────── */
:root {
  --green:        #0a7c44;
  --green-dark:   #075c32;
  --green-deep:   #053d21;
  --green-light:  #e8f5ee;
  --green-mid:    #c3e4cf;
  --yellow:       #f5c518;
  --yellow-light: #fef9e0;
  --yellow-dark:  #d4a90e;
  --ink:          #111c16;
  --ink-soft:     #2e3d35;
  --muted:        #617068;
  --muted-light:  #8a9990;
  --cream:        #f3f5ed;
  --cream-dark:   #e7ebe0;
  --white:        #ffffff;
  --border:       #dde5da;
  --border-light: #edf1ea;
  --red:          #e05252;
  --red-light:    #fdf0f0;
  --shadow-md:    0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.07);
  --shadow-lg:    0 12px 40px rgba(0,0,0,.13), 0 4px 12px rgba(0,0,0,.08);
  --shadow-xl:    0 24px 64px rgba(0,0,0,.18);
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --radius-full:  9999px;
  --tr:           0.26s cubic-bezier(0.4, 0, 0.2, 1);
  --font-sans:    'Plus Jakarta Sans', sans-serif;
  --font-serif:   'Libre Baskerville', serif;
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--green-deep);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  position: relative;
}
a      { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input  { font-family: inherit; }

/* ── ANIMATED BACKGROUND ────────────────────────────────────── */
.login-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.bg-shape {
  position: absolute;
  border-radius: 50%;
  opacity: .18;
}
.bg-shape-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, var(--green) 0%, transparent 70%);
  top: -200px; left: -160px;
  animation: bgFloat 12s ease-in-out infinite;
}
.bg-shape-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--yellow) 0%, transparent 70%);
  bottom: -120px; right: -100px;
  opacity: .12;
  animation: bgFloat 9s ease-in-out infinite 3s;
}
.bg-shape-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, #ffffff 0%, transparent 70%);
  top: 40%; right: 20%;
  opacity: .05;
  animation: bgFloat 15s ease-in-out infinite 6s;
}
@keyframes bgFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(30px, -40px) scale(1.06); }
}

.bg-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
  background-size: 32px 32px;
}

/* ── FOTO GEDUNG ────────────────────────────────────────────────
   Foto gedung sekolah di lapisan paling bawah, ditimpa gradasi hijau
   supaya tema hijau tetap yang dominan dan kartu putih tetap menonjol.
   Warnanya dipudarkan: langit biru di foto akan berebut perhatian
   dengan aksen hijau kalau dibiarkan penuh.
   Yang dimuat salinan kecilnya — gedung.jpg aslinya 12 MB.
   Selama foto belum termuat, latar body yang hijau tua tetap tampil. */
.login-bg::before,
.login-bg::after {
  content: '';
  position: absolute;
  inset: 0;
}
.login-bg::before {
  background: url('gedung-latar.jpg') center 42% / cover no-repeat;
  filter: saturate(.3);
}
.login-bg::after {
  background:
    linear-gradient(180deg, rgba(5,61,33,.35) 0%, rgba(5,61,33,0) 30%,
                            rgba(5,61,33,.55) 72%, rgba(5,61,33,.96) 100%),
    linear-gradient(115deg, rgba(5,61,33,.94) 0%, rgba(7,92,50,.80) 34%,
                            rgba(10,124,68,.58) 64%, rgba(5,61,33,.78) 100%);
}
/* Cahaya dan titik-titik tetap di atas foto */
.login-bg > * { z-index: 1; }
@media (max-width: 768px) {
  .login-bg::before { background-image: url('gedung-latar-kecil.jpg'); }
}

/* ── BACK LINK ──────────────────────────────────────────────── */
.back-link {
  position: fixed;
  top: 20px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.65);
  font-size: 13px;
  font-weight: 600;
  z-index: 10;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  transition: var(--tr);
}
.back-link svg { width: 15px; }
.back-link:hover {
  color: var(--white);
  background: rgba(255,255,255,.15);
  transform: translateX(-3px);
}

/* ── MAIN LAYOUT ────────────────────────────────────────────── */
.login-main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 80px 20px 40px;
  position: relative;
  z-index: 1;
}

/* ── LOGIN CARD ─────────────────────────────────────────────── */
.login-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 40px 40px 32px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-xl);
  animation: cardIn .5s cubic-bezier(.34, 1.2, .64, 1) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ── HEADER ─────────────────────────────────────────────────── */
.login-header {
  text-align: center;
  margin-bottom: 28px;
}
.login-logo-link {
  display: inline-block;
  margin-bottom: 16px;
}
.login-logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: contain;
  border: 3px solid var(--green-light);
  box-shadow: 0 4px 16px rgba(10,124,68,.2);
  transition: transform var(--tr);
}
.login-logo-link:hover .login-logo { transform: scale(1.06); }

.login-header h1,
.login-header h2 {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -.03em;
}
.login-header p {
  font-size: 13.5px;
  color: var(--muted);
}

/* Slogan sekolah, tepat di bawah nama.
   Dibedakan dari baris "Masuk ke sistem informasi sekolah" di bawahnya:
   yang ini semboyan, yang itu petunjuk. Miring dan berwarna hijau supaya
   terbaca sebagai kutipan, bukan sebagai keterangan tambahan.
   text-wrap:balance membuat pembungkusannya rata di layar sempit —
   kalimatnya panjang dan pasti menjadi dua baris di ponsel. */
.login-header .login-slogan {
  font-size: 12.5px;
  font-style: normal;          /* kutipnya tegak; hanya isinya yang miring */
  color: var(--green-dark, #075c32);
  line-height: 1.5;
  margin-bottom: 8px;
  text-wrap: balance;
}
.login-header .login-slogan em { font-style: italic; }

/* ── ROLE TABS ──────────────────────────────────────────────── */
.role-section { margin-bottom: 18px; }

.role-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted-light);
  margin-bottom: 10px;
}

.role-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 5px;
}

.role-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px;
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  transition: var(--tr);
  cursor: pointer;
  border: 2px solid transparent;
  background: transparent;
}
.role-tab svg { width: 18px; height: 18px; }
.role-tab:hover { color: var(--green); background: var(--green-light); }
.role-tab.active {
  background: var(--white);
  color: var(--green);
  border-color: var(--green-mid);
  box-shadow: var(--shadow-md);
}

/* ── ROLE INFO BADGE ────────────────────────────────────────── */
.role-info {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--green-light);
  border: 1px solid var(--green-mid);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  margin-bottom: 22px;
  font-size: 12.5px;
  color: var(--green-dark);
  line-height: 1.5;
}
.role-info-icon { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--green); }

/* ── FORM ───────────────────────────────────────────────────── */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field-group label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.field-group label svg { width: 14px; color: var(--muted); }

.input-wrap {
  position: relative;
}

.input-wrap input {
  width: 100%;
  padding: 12px 44px 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  transition: border-color var(--tr), box-shadow var(--tr);
  outline: none;
}
.input-wrap input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(10,124,68,.12);
}
.input-wrap input.invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(224,82,82,.1);
}
.input-wrap input::placeholder { color: var(--muted-light); }

.input-icon {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-light);
  pointer-events: none;
  display: grid;
  place-items: center;
}
.input-icon svg { width: 16px; }

.toggle-pw {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-light);
  padding: 4px;
  border-radius: 4px;
  transition: color var(--tr);
  background: none;
  border: none;
  cursor: pointer;
}
.toggle-pw:hover { color: var(--green); }
.toggle-pw svg { width: 16px; display: block; }

.field-err {
  font-size: 12px;
  color: var(--red);
  display: none;
}
.field-err.show { display: block; }

/* ── FORM EXTRAS ────────────────────────────────────────────── */
.form-extras {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.remember-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.remember-check input[type="checkbox"] { display: none; }
.check-box {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: var(--tr);
}
.remember-check input:checked + .check-box {
  background: var(--green);
  border-color: var(--green);
}
.remember-check input:checked + .check-box::after {
  content: '';
  display: block;
  width: 9px;
  height: 5px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translateY(-1px);
}

.forgot-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--green);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--tr);
}
.forgot-link:hover { color: var(--green-dark); }

/* ── ALERT BOX ──────────────────────────────────────────────── */
.login-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--red-light);
  border: 1px solid #f5c5c5;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--red);
  line-height: 1.5;
  animation: slideDown .25s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.login-alert svg { width: 16px; flex-shrink: 0; margin-top: 1px; }
/* display:flex di atas mengalahkan atribut hidden, sehingga kotak kosong
   selalu tampil di bawah verifikasi dan pesan "instruksi reset telah dikirim"
   muncul sebelum apa pun dikirim. login.js menyembunyikan keduanya lewat
   .hidden, jadi atribut itu yang harus menang. */
.login-alert[hidden],
.forgot-alert[hidden] { display: none; }

/* ── LOGIN BUTTON ───────────────────────────────────────────── */
.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  background: var(--green);
  color: var(--white);
  font-size: 14.5px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: background var(--tr), transform var(--tr), box-shadow var(--tr);
  margin-top: 4px;
}
.login-btn svg { width: 17px; }
.login-btn:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(10,124,68,.3);
}
.login-btn:active { transform: none; }
.login-btn:disabled { opacity: .7; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-text, .btn-loading { display: flex; align-items: center; gap: 8px; }
.btn-loading svg { width: 17px; }

/* ── DEMO BOX ───────────────────────────────────────────────── */
.demo-box {
  margin-top: 24px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.demo-box-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  background: var(--cream);
  cursor: pointer;
}
.demo-box-header svg:first-child { width: 15px; color: var(--yellow-dark); }
.demo-box-header strong { font-size: 12.5px; color: var(--ink-soft); flex: 1; }

.demo-toggle {
  padding: 3px;
  border-radius: 4px;
  color: var(--muted);
  transition: transform var(--tr), color var(--tr);
  border: none;
  cursor: pointer;
  background: none;
}
.demo-toggle svg { width: 16px; }
.demo-toggle.open { transform: rotate(180deg); color: var(--green); }

.demo-list {
  display: none;
  flex-direction: column;
  padding: 8px;
  gap: 4px;
}
.demo-list.open { display: flex; }

.demo-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  transition: background var(--tr);
  cursor: pointer;
}
.demo-item:hover { background: var(--cream); }

.demo-role-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.demo-role-icon svg { width: 16px; }
.demo-role-icon.admin    { background: rgba(10,124,68,.12); color: var(--green); }
.demo-role-icon.guru     { background: rgba(245,197,24,.2);  color: var(--yellow-dark); }
.demo-role-icon.operator { background: rgba(79,108,220,.12); color: #4f6cdc; }
.demo-role-icon.kepsek   { background: rgba(186,80,80,.12);  color: #c05252; }
.demo-role-icon.tendik   { background: rgba(8,145,178,.12);  color: #0e7490; }

.demo-item > div { flex: 1; }
.demo-item strong { display: block; font-size: 12.5px; color: var(--ink); }
.demo-item span   { font-size: 11.5px; color: var(--muted); font-family: monospace; }

.demo-use-btn {
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  background: var(--green-light);
  border: 1px solid var(--green-mid);
  padding: 5px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: var(--tr);
  cursor: pointer;
}
.demo-use-btn:hover { background: var(--green); color: var(--white); border-color: var(--green); }

/* ── FOOTER NOTE ────────────────────────────────────────────── */
.login-footer-note {
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 20px;
  line-height: 1.6;
}
.login-footer-note a {
  color: var(--green);
  font-weight: 600;
}
.login-footer-note a:hover { text-decoration: underline; }
.inline-btn {
  color: var(--green);
  font-weight: 700;
  font-size: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color var(--tr);
}
.inline-btn:hover { color: var(--green-dark); }

/* ── SUCCESS STATE ──────────────────────────────────────────── */
.login-success {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  box-shadow: var(--shadow-xl);
  animation: cardIn .5s cubic-bezier(.34,1.2,.64,1) both;
  position: relative;
}

.success-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  border: 2px dashed var(--green-mid);
  border-radius: 50%;
  animation: spinRing 12s linear infinite;
  pointer-events: none;
}
@keyframes spinRing { from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(360deg)} }

.success-icon-wrap {
  width: 80px;
  height: 80px;
  background: var(--green-light);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  position: relative;
  z-index: 1;
  animation: popIn .5s cubic-bezier(.34,1.5,.64,1) .15s both;
}
@keyframes popIn { from{transform:scale(0)} to{transform:scale(1)} }
.success-icon-wrap svg { width: 38px; color: var(--green); }

.login-success h2 {
  font-family: var(--font-serif);
  font-size: 28px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.login-success p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.login-success p strong { color: var(--ink); }

.success-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.success-redirect {
  font-size: 13px;
  color: var(--muted-light) !important;
  margin-bottom: 24px !important;
}

.dots span {
  animation: blink 1.4s infinite both;
  font-size: 18px;
  line-height: 0;
}
.dots span:nth-child(2) { animation-delay: .2s; }
.dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100%{opacity:0} 40%{opacity:1} }

.back-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: var(--white);
  font-size: 13.5px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  transition: var(--tr);
  position: relative;
  z-index: 1;
}
.back-home-btn svg { width: 16px; }
.back-home-btn:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(10,124,68,.3);
}

/* ── FORGOT PASSWORD PANEL ──────────────────────────────────── */
.forgot-panel {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 40px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-xl);
  animation: cardIn .35s ease both;
}

.panel-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 24px;
  transition: color var(--tr), gap var(--tr);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.panel-back svg { width: 15px; }
.panel-back:hover { color: var(--green); gap: 10px; }

.forgot-icon-wrap {
  width: 60px;
  height: 60px;
  background: var(--yellow-light);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
}
.forgot-icon-wrap svg { width: 26px; color: var(--yellow-dark); }

.forgot-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--green-light);
  border: 1px solid var(--green-mid);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--green-dark);
  animation: slideDown .25s ease;
}
.forgot-alert svg { width: 16px; flex-shrink: 0; margin-top: 1px; }

/* ── SPINNER ────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; }

/* ── VERIFIKASI KEAMANAN ─────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
   VERIFIKASI GESER (menggantikan soal hitungan)
   ══════════════════════════════════════════════════════════════ */
.captcha-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.captcha-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.captcha-label svg { width: 14px; color: var(--muted); }

/* Lintasan */
.geser {
  position: relative;
  height: 48px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--cream);
  overflow: hidden;
  user-select: none;
  /* Tanpa ini, menggeser di layar sentuh ikut menggulirkan halaman dan
     gagangnya lepas di tengah jalan. */
  touch-action: none;
}

/* Bagian yang sudah terlewati */
.geser-isi {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green) 100%);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.geser-teks {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  pointer-events: none;
  padding-left: 44px;   /* supaya tidak tertimpa gagang saat di kiri */
}

/* Gagang — tombol sungguhan, jadi bisa difokus & ditekan papan tik */
.geser-gagang {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 52px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--green-dark);
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
  cursor: grab;
  touch-action: none;
}
.geser-gagang svg { width: 20px; height: 20px; }
.geser-gagang:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.geser-aktif .geser-gagang { cursor: grabbing; }

/* Selesai */
.geser-selesai { border-color: var(--green); }
.geser-selesai .geser-teks { color: var(--white); font-weight: 700; }
.geser-selesai .geser-gagang { color: var(--green); cursor: default; }

/* Salah / belum digeser — ditandai GARIS TEPI, bukan warna teks saja,
   supaya tetap terlihat oleh yang sukar membedakan warna. */
.geser-salah {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(224,82,82,.1);
}

/* Sentuhan halus hanya bila pengguna tidak meminta gerak dikurangi */
@media (prefers-reduced-motion: no-preference) {
  .geser-isi,
  .geser-gagang { transition: none; }
  .geser-selesai .geser-isi { transition: width .18s ease; }
}
/* ── PAGE FOOTER ────────────────────────────────────────────── */
.login-page-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  font-size: 11.5px;
  color: rgba(255,255,255,.3);
  border-top: 1px solid rgba(255,255,255,.06);
  flex-wrap: wrap;
  gap: 8px;
}
.login-page-footer b { color: var(--yellow); margin: 0 3px; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 540px) {
  .back-link { top: 14px; left: 14px; font-size: 12px; padding: 7px 11px; }
  .login-main { padding: 72px 16px 32px; }
  .login-card,
  .forgot-panel,
  .login-success { padding: 28px 22px 24px; border-radius: var(--radius-lg); }
  .role-tabs { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .login-page-footer { padding: 14px 20px; justify-content: center; text-align: center; }
}

@media (max-width: 380px) {
  .login-header h1 { font-size: 22px; }
  .role-tabs { grid-template-columns: 1fr 1fr; }
}

/* ── GENERAL TOUCH & ACCESSIBILITY IMPROVEMENTS ─────────────── */

/* Touch targets: all interactive elements min 44px */
.role-tab   { min-height: 44px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.login-btn  { min-height: 52px; touch-action: manipulation; }
.panel-back { min-height: 44px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.toggle-pw  { min-width: 44px; min-height: 44px; padding: 8px; touch-action: manipulation; }
.geser-gagang { min-width: 52px; min-height: 40px; touch-action: none; }
.demo-use-btn { min-height: 36px; padding: 7px 12px; touch-action: manipulation; }
.demo-box-header { min-height: 44px; touch-action: manipulation; }
.demo-toggle { min-width: 44px; min-height: 44px; padding: 8px; }

/* Inputs: comfortable on mobile */
.login-form input,
.login-form select {
  font-size: 16px; /* Prevents iOS auto-zoom on focus */
  -webkit-appearance: none;
}

/* Prevent text size adjust on rotation */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Smooth scrolling for iOS */
body { -webkit-overflow-scrolling: touch; }

/* Role tabs: last tab centered if 5 tabs in 2-col */
@media (max-width: 540px) {
  .role-tabs > .role-tab:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 50%;
    justify-self: center;
  }
}

/* Verifikasi geser: lebih rapat di layar sangat kecil, tetapi gagangnya
   TIDAK dikecilkan — sasaran sentuh di bawah 44px sukar dikenai jari. */
@media (max-width: 380px) {
  .geser-teks { font-size: 12px; padding-left: 40px; }
}

/* Card: prevent overflow on 320px phones */
@media (max-width: 320px) {
  .login-card, .login-success, .forgot-panel {
    padding: 20px 14px 18px !important;
    border-radius: var(--radius-lg) !important;
  }
  .login-header h1 { font-size: 20px; }
  .role-tab span { font-size: 9.5px; }
}