/* Halaman auth: masuk, daftar, lupa & atur ulang kata sandi, lengkapi nomor (desain arah-5, kerangka partials/auth/page).
   Memakai kit home.css + token shell.css (.lp-page); di sini hanya bagian khusus auth.
   Design Read: A · calon peserta & Maxians, sering di tengah alur pendaftaran · isi akun lalu lanjut
   · satu elemen berani: panel navy berfoto asli di samping form · dial 3/2/3.
   Kontras (diukur): ink #141A33 di atas putih 17:1 · ink-2 di atas putih 8,0:1 · ink-3 (hint, placeholder) di atas putih 4,8:1
   · --danger #B42318 di atas putih 6,6:1, di atas --danger-bg 5,9:1 · navy-deep di atas kuning 8,6:1
   · putih .86 di atas navy-deep 12:1 · kuning (aksen judul, nomor langkah) di atas navy-deep 8,6:1. */
.au { --danger: #B42318; --danger-bg: #FDECEA; --ring: rgba(245, 166, 35, .55); --ring-bad: rgba(180, 35, 24, .22); background: var(--bg); }
.lp-auth .lp-foot { display: none; } /* footer penuh terlalu berat untuk layar auth; nav + Moxi tetap */

.au-in { width: min(100% - 32px, 1240px); margin-inline: auto; padding: 24px 0 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; min-height: calc(100svh - var(--nav-h)); }

/* ===== kartu form ===== */
.au-card { display: grid; place-items: center; padding: 56px 32px; border-radius: var(--r-lg); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.au-box { width: 100%; max-width: 420px; }
.lp-home .au-box h1 { font-size: clamp(28px, 3vw, 38px); font-weight: 700; }
.au-sub { margin-top: 10px !important; font-size: 16px; color: var(--ink-2); }
.au-form { display: grid; gap: 18px; margin-top: 28px; }

.au-field { display: grid; gap: 6px; }
.au-lab { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 22px; }
.au-lab label { font-size: 14px; font-weight: 600; color: var(--navy-deep); }
.au-input { width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); font: 400 16px/1.3 var(--text); color: var(--ink); transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease); }
.au-input::placeholder { color: var(--ink-3); opacity: 1; }
@media (hover: hover) { .au-input:hover { border-color: var(--ink-3); } }
.au-input:focus { outline: none; border-color: var(--navy-deep); box-shadow: 0 0 0 3px var(--ring); }
.au-input[aria-invalid="true"] { border-color: var(--danger); }
.au-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--ring-bad); }
.au-pw { position: relative; }
.au-pw .au-input { padding-right: 52px; }
.lp-home .au-eye { position: absolute; top: 3px; right: 3px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--ink-2); font-size: 18px; text-align: center; }
.lp-home .au-eye[aria-pressed="true"] { color: var(--navy-deep); }
@media (hover: hover) { .lp-home .au-eye:hover { background: var(--bg); color: var(--navy-deep); } }
.au-hint { font-size: 14px; color: var(--ink-3); }
.au-err { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--danger); }
.au-err::before { content: "!"; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--danger); color: #fff; font: 700 12px/1 var(--display); }

.au-alert { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: var(--r); background: var(--danger-bg); color: var(--danger); box-shadow: inset 3px 0 0 var(--danger); font-size: 15px; font-weight: 500; }
.au-alert i { font-size: 18px; line-height: 1.4; }
.au-alert:focus { outline: none; }
.lp-home .au-alert a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.au-submit { width: 100%; justify-content: center; min-height: 52px; margin-top: 6px; font-size: 16px; }
.au-submit[disabled] { cursor: progress; opacity: .85; }
.au-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(26, 32, 73, .25); border-top-color: var(--navy-deep); animation: au-spin 700ms linear infinite; }
@keyframes au-spin { to { transform: rotate(360deg); } }

.au-or { display: flex; align-items: center; gap: 12px; margin: 6px 0 -4px !important; font-size: 14px; color: var(--ink-3); }
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lp-home .au-alt { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 20px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15px; font-weight: 600; color: var(--navy-deep); transition: background-color 140ms var(--ease); }
.lp-home .au-alt svg { width: 20px; height: 20px; }
@media (hover: hover) { .lp-home .au-alt:hover { background: var(--bg); } }

.au-swap { margin-top: 2px !important; text-align: center; font-size: 15px; color: var(--ink-2); }
.lp-home .au-swap a, .lp-home .au-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--navy-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lp-home .au-small { min-height: 22px; font-size: 14px; position: relative; }
.lp-home .au-small::after { content: ""; position: absolute; inset: -11px -6px; } /* area sentuh 44px tanpa menggeser label */
@media (hover: hover) { .lp-home .au-swap a:hover, .lp-home .au-link:hover { text-decoration-thickness: 2px; } }

/* ===== panel navy: foto asli + manfaat (atau langkah pemulihan) ===== */
.au-brand { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--navy-deep); color: #fff; }
.au-ph { position: relative; flex: 1 1 auto; min-height: 260px; background: var(--navy); }
.au-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.au-ph figcaption { position: absolute; left: 16px; bottom: 16px; max-width: calc(100% - 32px); padding: 6px 12px; border-radius: 999px; background: rgba(26, 32, 73, .82); font-size: 13px; font-weight: 500; color: #fff; }
.au-copy { display: grid; gap: 22px; padding: 36px 36px 40px; }
.lp-home .au-brand h2 { color: #fff; font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; }
.lp-home .au-brand h2 b { color: var(--yellow); font-weight: 700; }
.au-note { color: rgba(255, 255, 255, .86); }
.au-list, .au-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.au-list li, .au-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.au-tick { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--navy-deep); font-size: 14px; }
.au-num { flex: none; min-width: 28px; padding-top: 2px; font: 500 14px/1.4 var(--mono); color: var(--yellow); }

/* masuk halus sekali; reduced motion di home.css mematikan animasi .lp-home tanpa menyembunyikan isi */
.au-box, .au-copy { animation: up 320ms var(--ease) both; }
.au-copy { animation-delay: 80ms; }

@media (min-width: 901px) { .au-in { min-height: calc((100svh - 92px) / .88); } } /* .lp-home di-zoom .88 di desktop */
@media (max-width: 900px) {
  .au-in { grid-template-columns: 1fr; min-height: 0; padding: 16px 0 24px; gap: 16px; }
  .au-card { padding: 36px 20px; }
  .au-ph { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
  .au-copy { padding: 28px 22px 32px; }
}
@media (max-width: 420px) {
  .au-in { width: min(100% - 24px, 1240px); }
  .au-card { padding: 28px 16px; }
}
@media (prefers-reduced-motion: reduce) { .au-input, .lp-home .au-alt { transition: none; } .au-spin { animation: none; } }