/* =========================================================================
   PM AUTH — Onboarding (gambar FULL layar) + pilihan Masuk/Daftar + form.
   Full-bleed, TANPA card. Brand oranye. Input pill (ala contoh 1).
   Tidak mengubah id/class OTP (otc-1..6) yang dipakai Flutter auto-fill.
   ========================================================================= */
:root{
  --pm:#e7592b;            /* brand oranye */
  --pm-d:#c8431b;          /* oranye gelap (hover) */
  --pm-l:#ff7a4d;          /* oranye terang */
  --pm-ink:#120f0d;        /* near-black hangat */
  --pm-line:rgba(255,255,255,.22);
  --pm-soft:rgba(255,255,255,.12);
  --pm-soft2:rgba(255,255,255,.07);
  --pm-text:#f6f1ee;
  --pm-muted:#cfc6bf;
  --pm-cw:480px;           /* lebar maksimum konten (di-center pada desktop) */
}

*{box-sizing:border-box}
html,body{height:100%; margin:0}
body.pm-auth{
  font-family:'Overpass',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--pm-text);
  background:var(--pm-ink);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}

/* Panggung = SELURUH layar, tanpa card/shadow/rounded */
.pm-stage{
  position:fixed; inset:0;
  width:100%; height:100vh; height:100dvh;   /* dvh TERAKHIR -> menang di browser modern (pas area terlihat, tak ketutup nav) */
  overflow:hidden;
  background:var(--pm-ink);
}

/* Tiap screen menutupi layar penuh */
.pm-screen{position:absolute; inset:0; opacity:1; transition:opacity .3s ease}
.pm-screen[hidden]{display:none}

/* Lapisan gambar hero FULL-BLEED + gradient agar teks terbaca */
.pm-hero{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
}
.pm-hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(18,15,13,.15) 0%,
    rgba(18,15,13,.40) 40%,
    rgba(18,15,13,.86) 76%,
    rgba(18,15,13,.97) 100%);
}
.pm-hero.pm-hero-brand::after{
  background:linear-gradient(180deg,
    rgba(200,67,27,.18) 0%,
    rgba(18,15,13,.42) 42%,
    rgba(18,15,13,.88) 78%,
    rgba(18,15,13,.97) 100%);
}

/* Pembungkus konten: di-center & dibatasi lebar pada desktop */
.pm-wrap{width:100%; max-width:var(--pm-cw); margin:0 auto}

/* =========================================================
   ONBOARDING — gambar penuh layar, konten overlay di bawah
   ========================================================= */
.pm-onb-top{position:absolute; top:0; right:0; z-index:4; padding:14px 18px}
.pm-skip{background:rgba(0,0,0,.28); border:0; color:#fff; font-size:.82rem; font-weight:600;
  cursor:pointer; padding:7px 14px; border-radius:99px; backdrop-filter:blur(4px)}

.pm-viewport{position:absolute; inset:0; overflow:hidden; z-index:1}
.pm-track{display:flex; height:100%; transition:transform .45s cubic-bezier(.4,0,.2,1)}
.pm-slide{flex:0 0 100%; position:relative; height:100%}

.pm-slide-body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  max-width:var(--pm-cw); margin:0 auto;
  padding:0 26px 140px;
}
.pm-eyebrow{display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--pm-l); margin-bottom:10px}
.pm-title{font-size:1.9rem; line-height:1.18; font-weight:800; margin:0 0 9px; color:#fff}
.pm-sub{font-size:.92rem; line-height:1.5; color:var(--pm-muted); margin:0; max-width:34ch}

.pm-onb-foot{position:absolute; left:0; right:0; bottom:0; z-index:3;
  max-width:var(--pm-cw); margin:0 auto; padding:0 26px calc(26px + env(safe-area-inset-bottom))}
.pm-dots{display:flex; gap:7px; margin-bottom:16px}
.pm-dot{width:7px; height:7px; border-radius:99px; background:var(--pm-soft); transition:.3s}
.pm-dot.active{width:24px; background:var(--pm)}

/* =========================================================
   PILIHAN & FORM
   ========================================================= */
.pm-pane{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column;
  width:100%; max-width:var(--pm-cw); margin:0 auto;
  padding:24px 26px calc(20px + env(safe-area-inset-bottom));   /* bawah: 20px + safe-area (hindari nav) */
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.pm-pane > .pm-head{flex:0 0 auto; margin-top:14vh; text-align:center}  /* judul di tengah, diturunkan (ala contoh1) */
.pm-pane > .pm-head .pm-sub{margin-left:auto; margin-right:auto}        /* sub block ikut center */
.pm-pane > .pm-body{margin-top:auto; width:100%}  /* form -> rata BAWAH */
.pm-brandlogo{height:30px; width:auto; margin-bottom:14px; display:block}
.pm-pane .pm-title{font-size:1.9rem; margin-bottom:7px}
.pm-pane .pm-sub{margin-bottom:18px}

/* Back arrow — FIXED ke viewport agar tak hilang saat scroll */
.pm-back{position:fixed; top:16px; left:16px; z-index:50;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.3); border:1px solid var(--pm-line);
  color:#fff; cursor:pointer; font-size:1rem; text-decoration:none; backdrop-filter:blur(4px)}
.pm-back:hover{background:rgba(0,0,0,.5); color:#fff}

/* ---- Buttons (lebih ramping) ---- */
.pm-btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:12px 18px; margin-top:10px;
  border-radius:99px; border:1px solid transparent;
  font-size:.94rem; font-weight:700; cursor:pointer; text-decoration:none;
  line-height:1.2; transition:transform .12s ease, background .2s, border-color .2s;
}
.pm-btn:active{transform:scale(.985)}
.pm-btn-primary{background:var(--pm); color:#fff}
.pm-btn-primary:hover{background:var(--pm-d); color:#fff}
.pm-btn-outline{background:rgba(255,255,255,.06); border-color:var(--pm-line); color:#fff}
.pm-btn-outline:hover{background:var(--pm-soft); color:#fff}
.pm-btn-google{background:#fff; color:#1f2430; border:1px solid #dadce0; box-shadow:0 1px 3px rgba(0,0,0,.18)}
.pm-btn-google:hover{background:#f4f5f7; color:#1f2430}
.pm-btn-google svg{width:17px; height:17px; flex:0 0 17px}
.pm-btn-block{margin-top:0}

.pm-or{display:flex; align-items:center; gap:12px; color:var(--pm-muted); font-size:.78rem; margin:16px 0 4px}
.pm-or::before,.pm-or::after{content:''; flex:1; height:1px; background:var(--pm-line)}

/* ---- Form fields: INLINE / garis bawah (ala contoh 1) ---- */
.pm-field{
  display:flex; align-items:center; gap:11px;
  padding:0; margin-bottom:8px;
  background:transparent; border:0; border-bottom:1.5px solid var(--pm-line); border-radius:0;
  transition:border-color .2s;
}
.pm-field:focus-within{border-bottom-color:var(--pm); background:transparent}
.pm-field .fe,.pm-field .pm-ic{color:var(--pm-muted); font-size:.98rem; flex:0 0 auto}
.pm-field input,.pm-field select{
  flex:1; width:100%; min-width:0; background:transparent; border:0; outline:0;
  color:#fff; font-size:.95rem; padding:12px 0; font-family:inherit;
}
.pm-field input::placeholder{color:#a89e96}
/* Matikan latar putih autofill Chrome -> jadikan gelap brand + teks putih */
.pm-field input:-webkit-autofill,
.pm-field input:-webkit-autofill:hover,
.pm-field input:-webkit-autofill:focus,
.pm-field input:-webkit-autofill:active{
  -webkit-text-fill-color:#fff !important;
  -webkit-box-shadow:0 0 0 1000px var(--pm-ink) inset !important;
  box-shadow:0 0 0 1000px var(--pm-ink) inset !important;
  caret-color:#fff;
  transition:background-color 9999s ease-in-out 0s;
}
.pm-eye{background:none; border:0; color:var(--pm-muted); cursor:pointer; padding:4px; font-size:.98rem}

.pm-row-end{display:flex; justify-content:flex-end; margin:-2px 4px 14px}
.pm-link{color:var(--pm-l); font-weight:600; font-size:.86rem; text-decoration:none}
.pm-link:hover{color:var(--pm); text-decoration:underline}
.pm-foot-note{text-align:center; color:var(--pm-muted); font-size:.86rem; margin-top:14px}
.pm-foot-note a{color:var(--pm-l); font-weight:700; text-decoration:none}
.pm-copyright{text-align:center; color:#897e76; font-size:.72rem; margin-top:12px}

/* ---- OTP (warna saja; struktur/id otc-1..6 TIDAK diubah) ---- */
.pm-otp-head{text-align:center}
.pm-otp-head .pm-title{font-size:1.3rem}
.pm-pane .otc{display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:nowrap; width:auto; margin:14px auto 0}
.pm-pane fieldset{border:0; padding:0; margin:0}
/* OTP gaya UNDERLINE: transparan, teks putih, hanya garis bawah (bukan kotak) */
.pm-pane fieldset input[type="number"]{
  width:38px !important; margin:0 !important; padding:6px 0 8px !important;
  background:transparent !important; color:#fff !important; caret-color:#fff;
  border:0 !important; border-bottom:2px solid var(--pm-line) !important; border-radius:0 !important;
  font-size:1.5rem; text-align:center; box-shadow:none !important;
}
.pm-pane fieldset input[type="number"]:focus{border-bottom-color:var(--pm) !important; outline:0}
.pm-pane fieldset input[type="number"]:-webkit-autofill{
  -webkit-text-fill-color:#fff !important;
  -webkit-box-shadow:0 0 0 1000px var(--pm-ink) inset !important;
  box-shadow:0 0 0 1000px var(--pm-ink) inset !important;
  caret-color:#fff;
}
.pm-pane .otc div::before{display:none !important}
.pm-pane .countdown{color:var(--pm-muted); font-weight:700}


/* Catatan email Google terverifikasi */
.pm-gnote{display:flex; align-items:flex-start; gap:8px;
  background:rgba(52,168,83,.16); border:1px solid rgba(52,168,83,.45);
  color:#c6ecce; border-radius:14px; padding:10px 12px; font-size:.82rem; line-height:1.4; margin-bottom:16px}
.pm-gnote .fe{color:#46c466; margin-top:1px}

/* Checkbox setuju S&K */
.pm-check{display:flex; align-items:center; gap:9px; margin:6px 4px 2px; cursor:pointer; color:var(--pm-muted); font-size:.88rem}
/* paksa tampil walau ada class bootstrap .custom-control-input (yg menyembunyikan) */
.pm-check input{
  width:18px !important; height:18px !important; flex:0 0 auto; margin:0 !important;
  position:static !important; opacity:1 !important; z-index:auto !important; pointer-events:auto !important;
  -webkit-appearance:checkbox; appearance:auto; accent-color:var(--pm); cursor:pointer;
}
.pm-check a{color:var(--pm-l)}

/* Tombol prev/next/regprocess — ditumpuk, full width, aksi utama di atas */
.pm-reg-actions{display:flex; flex-direction:column; gap:10px; margin-top:18px}
.pm-reg-actions .pm-btn{margin-top:0; width:100%}
#nextBtn,#regprocess{order:1}
#prevBtn{order:2}

/* Step register (di sini—bukan inline—agar tetap berlaku setelah swap) */
.step-content{display:none}
.step-content.active{display:block}

/* ---- Tema SweetAlert2 (brand gelap/oranye) — dipakai login/register/forgot ---- */
.swal2-popup{
  background:#1d1814 !important; color:var(--pm-text) !important;
  border:1px solid var(--pm-line); border-radius:18px !important;
  font-family:'Overpass',system-ui,sans-serif !important;
}
.swal2-title{color:#fff !important}
.swal2-html-container,.swal2-content{color:var(--pm-muted) !important}
.swal2-actions .swal2-confirm{
  background:var(--pm) !important; color:#fff !important;
  border-radius:99px !important; box-shadow:none !important; font-weight:700 !important;
  padding:10px 26px !important;
}
.swal2-actions .swal2-confirm:hover{background:var(--pm-d) !important}
.swal2-actions .swal2-confirm:focus{box-shadow:0 0 0 3px rgba(231,89,43,.4) !important}
.swal2-actions .swal2-cancel{
  background:rgba(255,255,255,.1) !important; color:#fff !important;
  border-radius:99px !important; box-shadow:none !important; padding:10px 26px !important;
}
.swal2-timer-progress-bar{background:var(--pm) !important}

/* Versi TERANG (body.pm-light) -> popup putih, teks gelap. Tombol confirm tetap oranye. */
body.pm-light .swal2-popup{background:#fff !important; color:#1d1a17 !important; border-color:rgba(0,0,0,.08)}
body.pm-light .swal2-title{color:#161310 !important}
body.pm-light .swal2-html-container,body.pm-light .swal2-content{color:#5c5550 !important}
body.pm-light .swal2-actions .swal2-cancel{background:#ececec !important; color:#333 !important}

/* =========================================================================
   TEMA WARNA FONT — toggle lewat class di <body>:
     (default)            -> font TERANG  (untuk background gelap)
     body.pm-light        -> font GELAP   (untuk background terang/putih, mis. main_bg.png)
   Tambah/hapus `pm-light` di <body class="pm-auth ...">. Tombol primary (oranye)
   & Google (putih) sengaja tetap sama di kedua tema.
   ========================================================================= */
body.pm-light{background:#fff; color:#111}
/* bg terang -> TANPA gradien, tampilkan gambar apa adanya */
.pm-light .pm-hero::after{background:none !important}
.pm-light .pm-title{color:#000}
.pm-light .pm-sub{color:#333}
.pm-light .pm-eyebrow{color:#cf3f18}
.pm-light .pm-field{border-bottom-color:rgba(0,0,0,.18)}
.pm-light .pm-field:focus-within{border-bottom-color:var(--pm)}
.pm-light .pm-field .fe,.pm-light .pm-field .pm-ic{color:#8a817b}
.pm-light .pm-field input,.pm-light .pm-field select{color:#161310}
.pm-light .pm-field input::placeholder{color:#9a918b}
.pm-light .pm-field input:-webkit-autofill{
  -webkit-text-fill-color:#161310 !important;
  -webkit-box-shadow:0 0 0 1000px #fff inset !important; box-shadow:0 0 0 1000px #fff inset !important;
}
.pm-light .pm-eye{color:#8a817b}
.pm-light .pm-btn-outline{background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.22); color:#161310}
.pm-light .pm-btn-outline:hover{background:rgba(0,0,0,.06); color:#161310}
.pm-light .pm-or{color:#8a817b}
.pm-light .pm-or::before,.pm-light .pm-or::after{background:rgba(0,0,0,.14)}
.pm-light .pm-link{color:#cf3f18}
.pm-light .pm-foot-note{color:#5c5550}
.pm-light .pm-foot-note a{color:#cf3f18}
.pm-light .pm-back{background:rgba(255,255,255,.75); border-color:rgba(0,0,0,.14); color:#161310}
.pm-light .pm-back:hover{background:#fff; color:#161310}
.pm-light .pm-skip{background:rgba(255,255,255,.75); color:#161310}
.pm-light .pm-dot{background:rgba(0,0,0,.18)}
.pm-light .pm-dot.active{background:var(--pm)}
.pm-light .pm-check{color:#5c5550}
.pm-light .pm-check a{color:#cf3f18}
.pm-light .pm-btn-google{border-color:rgba(0,0,0,.2); box-shadow:0 1px 4px rgba(0,0,0,.12)}
/* ONBOARDING tetap bergaya gelap (gradient + teks terang) walau body pm-light,
   karena gambar tiap slide (onboarding1..3.png) bisa terang/gelap -> teks selalu terbaca. */
.pm-light #pm-onboard .pm-hero::after{
  background:linear-gradient(180deg, rgba(18,15,13,.10) 0%, rgba(18,15,13,.40) 45%, rgba(18,15,13,.88) 80%, rgba(18,15,13,.97) 100%) !important;
}
.pm-light #pm-onboard .pm-title{color:#fff}
.pm-light #pm-onboard .pm-sub{color:var(--pm-muted)}
.pm-light #pm-onboard .pm-skip{background:rgba(0,0,0,.3); color:#fff}
.pm-light #pm-onboard .pm-dot{background:rgba(255,255,255,.28)}
.pm-light #pm-onboard .pm-dot.active{background:var(--pm)}
.pm-light .pm-gnote{color:#1f6b33}
/* OTP underline versi gelap */
.pm-light .pm-pane fieldset input[type="number"]{color:#161310 !important; border-bottom-color:rgba(0,0,0,.25) !important}
.pm-light .pm-pane fieldset input[type="number"]:focus{border-bottom-color:var(--pm) !important}
.pm-light .pm-pane fieldset input[type="number"]:-webkit-autofill{
  -webkit-text-fill-color:#161310 !important;
  -webkit-box-shadow:0 0 0 1000px #fff inset !important; box-shadow:0 0 0 1000px #fff inset !important;
}
.pm-light .pm-pane .countdown{color:#5c5550}

/* Logo di layar pilihan (Mulai Sekarang) — di area oranye atas, CENTER horizontal */
#pm-choice .pm-choice-logo{position:absolute; top:5vh; left:50%; transform:translateX(-50%); height:54px; width:auto; z-index:3}

/* Util */
.pm-center{display:flex; align-items:center; justify-content:center}