/* ============================================================
   skorika.com — css/page/forgot-password.css
   Gaya khas /forgot-password.html.
   Dulu ditulis di dalam <style> halaman; dipindah 13 Agu 2026
   ke posisi yang sama persis, jadi urutan cascade tidak bergeser.
   66 aturan.
   ============================================================ */

/* ============================================================
   skorika.com — css/page/forgot-password.css
   Gaya khas /forgot-password.html.
   Dulu ditulis di dalam <style> halaman; dipindah 13 Agu 2026
   ke posisi yang sama persis, jadi urutan cascade tidak bergeser.
   66 aturan.
   ============================================================ */
/* ============================================================
   Bahasa desain diambil dari public_html/index.html — token,
   tombol, kartu, header, dan footer memakai nilai yang sama.
   Halaman ini berdiri sendiri seperti index.html: tidak memuat
   css/base.css maupun css/auth.css.
     --header #25143B  --plum #27173D  --cream #F3EFDA
     --peach  #FFD9A6  --pink #9C50FF  --r 4px   huruf Outfit
   ============================================================ */
*{box-sizing:border-box}
body{margin:0;background:var(--plum);color:var(--cream);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.55;
  -webkit-font-smoothing:antialiased}
/* ---------- header, disalin dari index.html ---------- */
.brand{display:flex;align-items:center;gap:9px;font-size:22px;font-weight:900;
  letter-spacing:-.015em}
/* ---------- dua kolom, meniru hero index.html ---------- */
.auth-main{max-width:1120px;margin:0 auto;
  padding:clamp(34px,6vh,74px) clamp(16px,3vw,44px) clamp(50px,8vh,90px);
  display:grid;grid-template-columns:1fr 460px;gap:clamp(30px,5vw,72px);align-items:start}
.lede{margin-top:18px;max-width:44ch;font-size:20px;font-weight:400;color:var(--cream-dim)}
.chips{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.chip{border:1px solid var(--line);border-radius:var(--r);padding:12px 18px;
  font-size:14px;font-weight:700;color:var(--cream-dim)}
/* ---------- kartu, disalin dari kartu kode gabung index.html ---------- */
.auth-card{background:var(--cream);color:var(--header);border-radius:var(--r);
  padding:clamp(24px,2.4vw,32px);box-shadow:none}
/* Judul kartu BUKAN hero: bobotnya 400, sama seperti .lede dan tombol
   di homepage. Hierarki dibawa oleh ukuran (30px lawan 16px), bukan
   oleh ketebalan. Judul hero yang sebenarnya ada di kolom kiri
   (.auth-say h1) dan itu tetap 600 seperti homepage. */
/* Bobot 400 dinaikkan ke 700. Sebelumnya judul kartu adalah teks PALING
   RINGAN di kartunya sendiri: subjudul di bawahnya 600 dan label ruas 800,
   sehingga mata jatuh ke "Full Name" lebih dulu daripada ke judulnya. */
.auth-card h1{font-size:32px;font-weight:700;letter-spacing:-.015em;line-height:1.14}
/* 600 -> 400: subjudul tidak boleh lebih berat daripada judul yang didukungnya. */
.auth-card .sub{font-size:16px;font-weight:400;color:var(--ink-soft);margin:6px 0 22px}
.tab{display:inline-flex;align-items:center;gap:8px;background:var(--peach);color:var(--header);
  border-radius:var(--r);padding:5px 12px;font-size:13px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:12px}
/* Kolom isian memakai bentuk sel kode gabung: latar #FFFDF6, garis tipis,
   sudut 4px, fokus berganti merah muda. */
.fld{margin-bottom:16px}
/* 800 -> 500: label ruas adalah penanda, bukan judul. Pada 800 label ini
   dua kali lebih berat daripada judul kartu dan merebut urutan baca. */
.fld label{display:block;font-size:14px;font-weight:500;color:var(--header);margin-bottom:7px}
.form-input{width:100%;height:52px;padding:0 14px;border:1px solid var(--ink-line);
  border-radius:var(--r);background:#FFFDF6;font-family:inherit;font-size:17px;font-weight:600;
  color:var(--header);box-shadow:none}
.hint{margin-top:7px;font-size:13.5px;font-weight:600;color:var(--ink-soft)}
/* Tombol mata sandi: js/pw-toggle.js menyuntik dua SVG dan menukar
   kelas .is-visible, jadi aturan eye-on/eye-off wajib ada di sini. */
.pw-wrap .form-input{padding-right:50px}
.pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:none;background:none;border-radius:var(--r);cursor:pointer;color:var(--ink-soft)}
.link{color:#631BC1;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.divider{margin-top:20px;border-top:1px solid rgba(37,20,59,.15);padding-top:16px;
  display:flex;flex-direction:column;gap:9px;text-align:center;
  font-size:15px;font-weight:600;color:var(--ink-soft)}
.divider a{color:#631BC1;font-weight:800;text-decoration:underline;text-underline-offset:3px}
/* Pesan galat & berhasil: kelas .show tetap dipakai skrip halaman. */
.alert{display:none;border:none;border-radius:var(--r);padding:11px 14px;margin-bottom:16px;
  font-size:14px;font-weight:700}
.alert-error{background:#E8D9FB;color:#460F8E}
/* ---------- footer, disalin dari index.html ---------- */
@media(max-width:960px){
  .auth-main{grid-template-columns:1fr;padding-top:28px}
  .lede{font-size:17px}
}
/* Pilihan pemulihan akun: kartu yang bisa diklik seluruh badannya.
   Radio aslinya disembunyikan tapi TETAP ADA — onchange="setMode()"
   dan name="mode" masih dipakai skrip halaman. */
/* Titik terpilih memakai pemilih saudara — didukung semua peramban,
   karena <input> dan <span class="mark-r"> memang bersebelahan. */
/* Penanda seluruh kartu butuh :has(). Peramban lama yang belum
   mendukungnya hanya kehilangan warna latarnya — titik radionya tetap
   menyala, jadi halaman tetap terpakai. */
/* Panel: kelas .on tetap dipakai setMode(). */

/* ============================================================
   KARTU PEMULIHAN AKUN DI LAYAR LAPTOP — 19 Agu 2026

   Sejalan dengan halaman masuk & daftar: di layar pendek kartunya
   terpotong tepi bawah. Kartu ini yang paling tinggi (tiga pilihan
   pemulihan + panel isian), diukur 805px pada layar 1390x693.

   Perapatan HANYA berlaku bila tinggi jendela <= 900px.
   ============================================================ */
/* Dipindah dari style="" di forgot-password.php agar bisa dirapatkan. */
.auth-card .btn-auth{margin-top:20px}
@media (max-height:900px){
  .auth-main{padding-top:18px;padding-bottom:34px}
  .auth-card{padding:18px 26px}
  .auth-card h1{font-size:26px}
  .auth-card .sub{font-size:15px;margin:4px 0 13px}
  .tab{margin-bottom:7px;padding:4px 10px;font-size:12.5px}
  .opt-box{gap:7px;margin-bottom:14px}
  .opt{padding:10px 12px}
  .opt .t{font-size:14.5px}
  .opt .d{font-size:13px}
  .fld{margin-bottom:10px}
  .fld label{margin-bottom:4px;font-size:13.5px}
  .form-input{height:46px;font-size:16px}
  .hint{margin-top:5px;font-size:13px}
  .btn-auth{height:50px}
  .auth-card .btn-auth{margin-top:13px}
  .link-row{margin-top:11px;font-size:15px}
  .divider{margin-top:12px;padding-top:10px;font-size:14px;gap:6px}
  .lede{font-size:18px;margin-top:14px}
  .chips{margin-top:22px}
}
@media (max-height:700px){
  .auth-main{padding-top:8px;padding-bottom:24px}
  .auth-card{padding:13px 24px}
  .auth-card h1{font-size:23px}
  .auth-card .sub{font-size:14.5px;margin:3px 0 10px}
  .opt-box{gap:6px;margin-bottom:11px}
  .opt{padding:8px 11px}
  .opt .d{font-size:12.5px}
  .fld{margin-bottom:8px}
  .form-input{height:42px;font-size:15.5px}
  .hint{margin-top:4px;font-size:12.5px}
  .btn-auth{height:46px}
  .auth-card .btn-auth{margin-top:11px}
  .divider{margin-top:10px;padding-top:8px;font-size:13.5px;gap:5px}
}