/* ============================================================
   skorika.com — css/auth.css
   Halaman masuk, daftar, pemulihan akun, gabung sesi.

   Bahasa visual disamakan dengan homepage: latar krem hangat dengan
   dua sapuan warna lembut, kartu putih bergaris tebal dan bayangan
   keras, judul Fredoka, tombol utama peach, penanda aktif kuning.

   Nama variabel dan seluruh nama class DIPERTAHANKAN persis seperti
   versi sebelumnya, karena halaman lain (terutama /d/<slug> lewat
   drive.html) ikut memakai berkas ini. Yang berubah hanya nilainya.

   Dimuat SETELAH css/style.css dan MENGGANTIKAN css/neu.css.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&family=Nunito:wght@400;600;700;800&display=swap');

:root{
  /* Nama --violet* dipertahankan supaya aturan lama tetap berlaku;
     isinya sekarang ungu anggur homepage, bukan violet Hostinger. */
  --violet:#7A5AF8; --violet-700:#6141EA; --violet-100:#E6DEFF; --violet-50:#FFF3E4;
  --indigo:#22201C;
  --ink:#22201C; --ink-2:#6C665C; --ink-3:#9A9287;
  --line:#E8DDCB; --line-2:#F3E9D9;
  --page:#FFF7EC;
  --surface:#FFFFFF;
  --danger:#D2452B; --danger-bg:#FFE9E2;
  --ok:#0E9F76; --ok-bg:#E3F7F0;
  /* warna aksen homepage */
  --mint:#3EC9A7; --peach:#FF8A5B; --sun:#FFD166;
}
*{box-sizing:border-box}
html,body{min-height:100%}
/* Sapuan warna ditaruh pada background body, bukan pseudo-element,
   supaya tidak pernah menutupi isi halaman mana pun yang memuat
   berkas ini. */
body{margin:0;color:var(--ink);
     background:var(--page);
     background-image:
       radial-gradient(30% 34% at 8% 88%,rgba(62,201,167,.20),transparent 70%),
       radial-gradient(34% 36% at 94% 6%,rgba(122,90,248,.16),transparent 70%);
     background-attachment:fixed;
     font-family:'Nunito','Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
     line-height:1.55;-webkit-font-smoothing:antialiased;
     display:flex;flex-direction:column;min-height:100vh}
@supports(min-height:100dvh){body{min-height:100dvh}}
svg{display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:10px}

/* ---------- kerangka ---------- */
.auth-top{flex:0 0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
          padding:26px clamp(20px,4vw,44px) 6px}
.auth-top .lang{margin-left:auto}
.auth-logo{display:inline-flex;align-items:center;gap:9px;
           font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:22px;font-weight:900;
           letter-spacing:-.015em;color:#FF319F}
.auth-logo .mark{width:.914em;height:.914em;flex-shrink:0}
/* Jaring pengaman: kalau berkas ini gagal dimuat, atribut width/height
   pada SVG-nya sudah menahan ukuran. Aturan di bawah menahan sisi
   sebaliknya — SVG apa pun di halaman auth tidak boleh melebihi kartu. */
.auth-top svg,.auth-card svg{max-width:100%;height:auto}
.auth-logo svg{width:.914em;height:.914em}
.auth-main{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
           padding:clamp(16px,4vh,48px) 20px clamp(30px,6vh,64px)}
/* Kartu kertas: garis tebal + bayangan keras, sama seperti kartu kode
   di homepage. Tidak dimiringkan — isian formulir harus terasa diam. */
.auth-card{width:100%;max-width:470px;background:var(--surface);border:3px solid var(--ink);
           border-radius:32px;padding:clamp(26px,4vw,42px);
           box-shadow:0 10px 0 var(--ink)}
/* Judul kadang jatuh dua baris (kalimat Indonesia lebih panjang), jadi
   jarak ke kalimat di bawahnya dibuat lega dan lebar teksnya dibatasi
   supaya pemenggalan barisnya rapi, bukan menyisakan satu kata sendirian. */
.auth-card h1{margin:0 0 10px;font-family:'Fredoka',sans-serif;
              font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:-.02em;
              line-height:1.16;text-align:center;color:var(--indigo);text-wrap:balance}
.auth-card .sub{margin:0 auto 28px;max-width:34ch;font-size:15px;color:var(--ink-2);
                text-align:center;line-height:1.6;text-wrap:pretty}

/* ---------- kolom isian ---------- */
.fld{margin-bottom:18px}
.fld label,.form-label{display:block;font-size:13.5px;font-weight:700;color:var(--ink-2);margin-bottom:8px}
/* Kotak isian mengikuti bahasa homepage: garis tebal 2,5px, sudut 16px,
   latar krem. Lebar garis TIDAK berubah saat difokus — hanya warnanya —
   supaya isian tidak pernah bergeser satu piksel pun.
   appearance:none mematikan gaya bawaan peramban (terutama iOS).
   background dipaksa !important karena css/style.css dan autofill
   peramban sama-sama mencoba mengisinya. */
.form-input,.fld input,.fld select{
  width:100%;height:52px;padding:0 16px;
  font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);
  background:#FFFCF7 !important;background-image:none;
  border:2.5px solid var(--ink);border-radius:16px;
  box-shadow:none;transform:none;-webkit-appearance:none;appearance:none;
  transition:background .13s,box-shadow .13s,transform .13s;outline:none}
.form-input::placeholder,.fld input::placeholder{color:var(--ink-3);font-weight:500}
.form-input:hover,.fld input:hover{background:#FFF7EC !important}
.form-input:focus,.fld input:focus,.fld select:focus{
  background:#fff !important;box-shadow:0 4px 0 var(--ink);transform:translateY(-2px)}
.form-input:disabled{background:var(--line-2) !important;color:var(--ink-3);box-shadow:none;transform:none}
.hint{font-size:13px;color:var(--ink-2);line-height:1.6;margin-top:8px}
.hint b{color:var(--ink);font-weight:800}

/* kotak sandi + tombol mata */
.pw-wrap{position:relative}
.pw-wrap .form-input{padding-right:52px}
.pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;
        border:none;background:transparent;cursor:pointer;border-radius:12px;color:var(--ink-3);
        display:flex;align-items:center;justify-content:center;padding:0}
.pw-eye:hover{background:var(--sun);color:var(--ink)}

/* ---------- tombol ---------- */
.btn,.btn-primary,.btn-pink{font-family:inherit}
/* Tombol utama: peach dengan garis tebal dan bayangan keras yang
   memendek saat ditekan — perilaku tombol yang sama dengan homepage. */
.btn-auth{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:54px;
          border:2.5px solid var(--ink);border-radius:999px;background:var(--peach);color:#fff;
          font-family:'Fredoka',sans-serif;font-size:17px;font-weight:600;cursor:pointer;
          box-shadow:0 4px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .14s}
.btn-auth:hover{background:#FF7A45;transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.btn-auth:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.btn-auth:disabled{background:var(--line-2);color:var(--ink-3);cursor:wait;
                   transform:none;box-shadow:0 4px 0 var(--ink)}

/* ---------- tautan ---------- */
.link{color:var(--violet);font-weight:800}
.link:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.link-row{text-align:center;font-size:14.5px;color:var(--ink-2);margin:22px 0 0;line-height:1.7}
.link-row .link{white-space:nowrap}
.link-strong{display:block;text-align:center;font-family:'Fredoka',sans-serif;font-size:16px;
             font-weight:500;color:var(--violet);margin-top:22px}
.link-strong:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.forgot{display:inline-block;margin-top:10px;font-size:14px;font-weight:800;color:var(--violet)}
.forgot:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.foot-note{font-size:12.5px;color:var(--ink-3);line-height:1.65;margin-top:16px;text-align:center}
.foot-note a{text-decoration:underline;text-underline-offset:2px;color:var(--ink-2)}
.divider{margin:26px 0 0;padding-top:20px;border-top:2px dashed var(--line);text-align:center;
         font-size:14px;color:var(--ink-2);line-height:1.7}
.divider p{margin:0 0 5px}
.divider p:last-child{margin-bottom:0}

/* ---------- pesan ---------- */
.alert{display:none;border:2px solid var(--ink);border-radius:16px;padding:12px 16px;font-size:14px;
       font-weight:700;margin-bottom:18px;line-height:1.55}
.alert.show{display:block}
.alert-error{background:var(--danger-bg);color:var(--danger)}
.alert-success{background:var(--ok-bg);color:#0A6E52}

/* ---------- kelompok pilihan (pemulihan akun) ---------- */
.opt-box{border:2.5px solid var(--ink);border-radius:22px;background:var(--violet-50);
         padding:7px;margin-bottom:24px}
.opt{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:16px;cursor:pointer;
     transition:background .12s}
.opt:hover{background:#fff}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt .mark-r{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--ink);flex-shrink:0;
             margin-top:1px;display:flex;align-items:center;justify-content:center;
             background:#fff;transition:background .12s}
.opt input:checked ~ .mark-r{background:var(--sun)}
.opt input:checked ~ .mark-r::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--ink)}
.opt input:focus-visible ~ .mark-r{outline:3px solid var(--violet);outline-offset:2px}
.opt .t{font-size:15px;font-weight:800;color:var(--ink)}
.opt .d{font-size:13px;color:var(--ink-2);margin-top:3px;line-height:1.55}
.opt input:checked ~ .txt .t{color:var(--violet)}

/* panel penjelasan yang muncul sesuai pilihan */
.panel{display:none}
.panel.on{display:block}
.callout{border:2.5px solid var(--ink);border-left:8px solid var(--mint);border-radius:18px;
         background:#FFFCF7;padding:15px 18px;font-size:14px;color:var(--ink-2);line-height:1.65}
.callout b{color:var(--ink)}
.callout p{margin:0}
.callout ol{margin:9px 0 0;padding-left:19px}
.callout li{margin-bottom:6px}
.callout li:last-child{margin-bottom:0}

@media(max-width:520px){
  .auth-top{padding:18px 16px 4px}
  .auth-main{padding:10px 14px 32px}
  .auth-card{padding:24px 20px;border-radius:26px}
}

.pw-eye svg{width:20px;height:20px}
.pw-eye .eye-off{display:none}
.pw-eye.is-visible .eye-on{display:none}
.pw-eye.is-visible .eye-off{display:block}

/* ============================================================
   PERBAIKAN — kotak isian & pemilih bahasa
   ============================================================ */

/* Isian biru muda pada tangkapan layar itu bukan warna kita — itu latar
   bawaan autofill peramban. Chrome mengabaikan background-color biasa,
   jadi satu-satunya cara menimpanya adalah bayangan dalam berwarna
   putih, plus transition sangat panjang agar warnanya tak pernah balik. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #FFFCF7 inset !important;
  box-shadow:0 0 0 1000px #FFFCF7 inset !important;
  -webkit-text-fill-color:var(--ink) !important;
  caret-color:var(--ink);
  transition:background-color 100000s ease-in-out 0s !important;
}
input:autofill{background:#FFFCF7 !important}

/* Pemilih bahasa: dua pilihan yang keduanya terlihat, bukan satu tombol
   yang artinya harus ditebak. Yang aktif ditandai, bukan disembunyikan. */
.lang{display:inline-flex;border:2px solid var(--ink);border-radius:999px;
      background:#fff;padding:2px;flex-shrink:0;box-shadow:0 3px 0 var(--ink)}
.lang button{border:none;background:transparent;border-radius:999px;padding:6px 12px;
             font-family:'Fredoka',sans-serif;font-size:12.5px;font-weight:500;color:var(--ink-2);
             cursor:pointer;line-height:1;transition:background .13s,color .13s}
.lang button:hover{color:var(--ink)}
.lang button.on{background:var(--sun);color:var(--ink)}