/* =====================================================================
   SAIYO — Sarana Aspirasi dan Informasi Pemilih
   Tema warna menyamai portal Simpul KPU Kabupaten Pasaman.
   ===================================================================== */
:root{
  --marun:#7a1d2b; --marun-gelap:#5a1420; --marun-muda:#f6e9eb;
  --tinta:#22252a; --abu:#6b7079; --garis:#e3e4e8; --latar:#f4f5f7; --kartu:#fff;
  --hijau:#2f7d4f; --amber:#b86b00; --teal:#276b86; --merah:#c0392b; --wa:#25632f;
  --tile-marun:#f6e9eb; --tile-hijau:#e6f2eb; --tile-teal:#e4eef2; --tile-amber:#fbefd9;
  --ff:'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0; background:var(--latar); color:var(--tinta); font-family:var(--ff); line-height:1.5;}
h1,h2,h3{font-family:var(--ff); margin:0;}
a{color:var(--marun); text-decoration:none;}
img{max-width:100%}
:focus-visible{outline:2px solid var(--marun); outline-offset:2px;}

/* ---------- Notifikasi (flash) ---------- */
.notif{border-radius:10px; padding:11px 14px; font-size:.9rem; font-weight:600; margin-bottom:14px;}
.notif.ok{background:var(--tile-hijau); color:var(--hijau);}
.notif.galat{background:#fdecea; color:var(--merah);}
.notif.info{background:var(--marun-muda); color:var(--marun-gelap);}

/* ===================== HEADER APLIKASI ===================== */
.hd{position:sticky; top:0; z-index:20; background:#fff; border-bottom:3px solid var(--marun);
    display:flex; align-items:center; gap:12px; height:60px;
    padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px));}
.brand{display:flex; align-items:center; gap:10px;}
.brand .mark-img{width:38px; height:38px; object-fit:contain; flex:0 0 auto;}
.brand .nm{display:flex; flex-direction:column; line-height:1.1;}
.brand .nm b{color:var(--marun); font-weight:800; font-size:1.12rem; letter-spacing:.02em;}
.brand .nm small{color:var(--abu); font-size:.66rem;}
.hd-kanan{margin-left:auto; display:flex; align-items:center; gap:8px;}
.pil{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--garis); background:#fff; color:var(--tinta);
     border-radius:99px; padding:7px 13px; font-size:.84rem; font-weight:600; cursor:pointer;}
.pil.akt{border-color:var(--marun); color:var(--marun); background:var(--marun-muda);}
.pil svg{width:15px; height:15px;}
details.menu{position:relative;}
details.menu>summary{list-style:none;}
details.menu>summary::-webkit-details-marker{display:none;}
.ava-kecil{width:22px; height:22px; border-radius:50%; background:var(--marun); color:#fff; font-size:.7rem; font-weight:700;
           display:inline-flex; align-items:center; justify-content:center;}
.menu-isi{position:absolute; right:0; top:calc(100% + 8px); background:#fff; border:1px solid var(--garis);
          border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.1); min-width:180px; padding:6px; z-index:40;}
.menu-isi a{display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:8px; color:var(--tinta); font-size:.88rem;}
.menu-isi a:hover{background:var(--latar);}
.menu-isi a.keluar{color:var(--marun);}
.menu-isi svg{width:16px; height:16px;}

/* ===================== HERO BERANDA ===================== */
.hero{position:relative; overflow:hidden; color:#fff;
      background:linear-gradient(135deg, var(--marun) 0%, var(--marun-gelap) 100%);}
.hero::after{content:"SARANA ASPIRASI DAN INFORMASI PEMILIH"; position:absolute; right:-2%; top:50%;
      transform:translateY(-50%) rotate(-12deg); font-family:var(--ff); font-weight:800;
      font-size:clamp(2.6rem,9vw,5.5rem); color:rgba(255,255,255,.05); white-space:nowrap; pointer-events:none; letter-spacing:.04em;}
.hero-in{position:relative; z-index:1; max-width:1240px; margin:0 auto; padding-block:28px 30px;
      padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px));
      display:flex; gap:24px; align-items:center; flex-wrap:wrap;}
.ava{width:112px; height:112px; border-radius:50%; flex:0 0 auto; background:#fff;
     display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 5px rgba(255,255,255,.22);}
.ava span{font-weight:800; font-size:2.2rem; color:var(--marun);}
.hero-teks{flex:1 1 320px; min-width:0;}
.hero-teks h1{font-size:clamp(1.6rem,4.4vw,2.2rem); font-weight:800; text-wrap:balance;}
.hero-teks p{margin:7px 0 0; color:rgba(255,255,255,.88); font-size:.98rem; max-width:52ch;}
.chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:16px;}
.chip{display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
      border-radius:99px; padding:7px 13px; font-size:.82rem; font-weight:600;}
.chip svg{width:14px; height:14px; opacity:.9;}
.chip.hi{background:rgba(255,255,255,.95); color:var(--marun); border-color:transparent;}
.btn-profil{margin-top:16px; display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--marun);
      border:0; border-radius:10px; padding:11px 18px; font-weight:700; font-size:.9rem; cursor:pointer; font-family:var(--ff);}
.btn-profil:hover{background:var(--marun-muda);}
.btn-profil svg{width:16px; height:16px;}

/* ===================== ISI BERANDA ===================== */
.wrap{max-width:1240px; margin:0 auto; padding-block:30px 48px;
      padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px));}
.sec-judul{display:flex; align-items:center; gap:9px; margin:0 0 16px; font-size:1.18rem; font-weight:800;}
.sec-judul svg{width:20px; height:20px; color:var(--marun);}
.sec-judul .ket{font-weight:500; font-size:.84rem; color:var(--abu); margin-left:auto;}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(248px,1fr)); gap:16px;}
.kartu{background:var(--kartu); border:1px solid var(--garis); border-radius:16px; padding:20px; color:var(--tinta);
       display:flex; flex-direction:column; gap:13px; transition:border-color .15s, box-shadow .15s, transform .15s;}
.kartu:hover{border-color:var(--marun); box-shadow:0 8px 22px rgba(122,29,43,.08); transform:translateY(-2px);}
.tile{width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center;}
.tile svg{width:30px; height:30px;}
.t-marun{background:var(--tile-marun); color:var(--marun);}
.t-hijau{background:var(--tile-hijau); color:var(--hijau);}
.t-teal{background:var(--tile-teal); color:var(--teal);}
.t-amber{background:var(--tile-amber); color:var(--amber);}
.kartu .nama{display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.kartu .nama b{font-size:1.12rem; font-weight:800; letter-spacing:.02em;}
.kartu .nama small{color:var(--abu); font-weight:600; font-size:.74rem;}
.kartu .desk{color:var(--abu); font-size:.88rem; margin:0; flex:1 1 auto;}
.tag{display:inline-flex; align-items:center; gap:5px; font-size:.68rem; font-weight:700; border-radius:99px; padding:2px 9px; align-self:flex-start;}
.tag-buka{background:var(--tile-hijau); color:var(--hijau);}
.tag-akun{background:var(--latar); color:var(--abu); border:1px solid var(--garis);}
.tag-nanti{background:#fbefd9; color:var(--amber);}
.buka{display:inline-flex; align-items:center; gap:6px; color:var(--marun); font-weight:700; font-size:.88rem;}
.buka svg{width:15px; height:15px; transition:transform .15s;}
.kartu:hover .buka svg{transform:translateX(3px);}
.sub{margin-top:36px;}
.lain{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:12px;}
.lain a{display:flex; align-items:center; gap:13px; background:var(--kartu); border:1px solid var(--garis);
        border-radius:12px; padding:14px 16px; color:var(--tinta);}
.lain a:hover{border-color:var(--marun);}
.lain .li{width:40px; height:40px; border-radius:10px; background:var(--marun-muda); color:var(--marun);
          display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.lain .li svg{width:21px; height:21px;}
.lain .lt{display:flex; flex-direction:column; min-width:0;}
.lain .lt b{font-size:.92rem; font-weight:700;}
.lain .lt small{color:var(--abu); font-size:.76rem;}

/* ===================== FOOTER ===================== */
.ft{border-top:1px solid var(--garis); background:#fff; color:var(--abu); font-size:.82rem;}
.ft-in{max-width:1240px; margin:0 auto; padding:22px max(16px, env(safe-area-inset-left,0px)) 30px; display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.ft-in b{color:var(--marun);}
.ft-in .kanan{margin-left:auto;}

/* ===================== PANEL ADMIN ===================== */
.adm-bar{background:#fff; border-bottom:1px solid var(--garis);}
.adm-bar-in{max-width:1240px; margin:0 auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
     padding:0 max(16px, env(safe-area-inset-left,0px)); min-height:48px;}
.adm-tag{font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#fff;
     background:var(--marun); border-radius:99px; padding:3px 10px; margin-right:6px;}
.adm-bar-in a{color:var(--abu); font-weight:600; font-size:.9rem; padding:12px 10px; border-bottom:2px solid transparent;}
.adm-bar-in a:hover{color:var(--marun);}
.adm-bar-in a.aktif{color:var(--marun); border-bottom-color:var(--marun);}
.adm-stat{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:14px; margin-bottom:24px;}
.adm-kartu{background:#fff; border:1px solid var(--garis); border-radius:14px; padding:16px 18px; border-top:3px solid var(--marun);}
.adm-kartu.hijau{border-top-color:var(--hijau);} .adm-kartu.amber{border-top-color:#f0a020;} .adm-kartu.abu{border-top-color:#c8ccd2;}
.adm-kartu .lbl{font-size:.82rem; color:var(--abu);}
.adm-kartu .num{font-size:1.9rem; font-weight:800; color:var(--marun); line-height:1.2; font-variant-numeric:tabular-nums;}
.adm-kartu.hijau .num{color:var(--hijau);} .adm-kartu.amber .num{color:#b86b00;}
.adm-panel{background:#fff; border:1px solid var(--garis); border-radius:14px; padding:18px; margin-bottom:20px;}
.adm-panel h2{font-size:1.05rem; font-weight:800; margin:0 0 14px;}
.tabel-bungkus{overflow-x:auto;}
table.adm{width:100%; border-collapse:collapse; font-size:.9rem; min-width:620px;}
table.adm th, table.adm td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--garis); vertical-align:middle;}
table.adm th{font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; color:var(--abu); font-weight:700;}
table.adm tr:hover td{background:var(--latar);}
.lencana{display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; border-radius:99px; padding:2px 9px;}
.lencana.admin{background:var(--marun-muda); color:var(--marun);}
.lencana.warga{background:var(--latar); color:var(--abu); border:1px solid var(--garis);}
.lencana.aktif{background:var(--tile-hijau); color:var(--hijau);}
.lencana.nonaktif{background:#fdecea; color:var(--merah);}
.adm-aksi{display:flex; gap:6px; flex-wrap:wrap;}
.adm-btn{border:1px solid var(--garis); background:#fff; color:var(--tinta); border-radius:8px; padding:6px 10px;
     font:inherit; font-size:.78rem; font-weight:600; cursor:pointer;}
.adm-btn:hover{border-color:var(--marun); color:var(--marun);}
.adm-btn.bahaya:hover{border-color:var(--merah); color:var(--merah);}
.adm-cari{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
.adm-cari input{flex:1 1 220px; min-width:0; font:inherit; font-size:.92rem; border:1px solid var(--garis); border-radius:10px; padding:10px 13px;}
.adm-cari input:focus{outline:none; border-color:var(--marun); box-shadow:0 0 0 3px var(--marun-muda);}
.adm-cari button{background:var(--marun); color:#fff; border:0; border-radius:10px; padding:10px 18px; font:inherit; font-weight:700; cursor:pointer;}

/* ===================== CERDIK (publik) ===================== */
.cerdik-head{display:flex; gap:16px; align-items:flex-start; margin-bottom:22px; flex-wrap:wrap;}
.cerdik-head .tile{width:60px; height:60px; flex:0 0 auto;}
.cerdik-head h1{font-size:1.5rem; font-weight:800;}
.cerdik-head p{color:var(--abu); margin:5px 0 0; max-width:60ch;}
.materi-list{display:flex; flex-direction:column; gap:10px;}
.materi-item{display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--garis);
     border-radius:12px; padding:14px 16px; color:var(--tinta);}
.materi-item:hover{border-color:var(--marun);}
.materi-item .no{width:30px; height:30px; border-radius:50%; background:var(--marun-muda); color:var(--marun);
     font-weight:800; font-size:.86rem; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.materi-item .jd{flex:1; min-width:0; font-weight:600;}
.materi-item svg{width:18px; height:18px; color:var(--abu); flex:0 0 auto;}
.cerdik-isi{font-size:1rem; line-height:1.75; color:var(--tinta);}
.cerdik-isi h3{font-size:1.2rem; font-weight:800; margin:22px 0 8px;}
.cerdik-isi h4{font-size:1.05rem; font-weight:700; margin:18px 0 6px;}
.cerdik-isi p{margin:0 0 14px;}
.cerdik-isi ul, .cerdik-isi ol{margin:0 0 14px; padding-left:22px;}
.cerdik-isi li{margin:4px 0;}
.cerdik-isi a{color:var(--marun); text-decoration:underline;}
.cerdik-isi img{max-width:100%; height:auto; border-radius:10px; margin:10px 0;}
.cerdik-isi iframe{max-width:100%; width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:10px; margin:10px 0;}
.cerdik-isi blockquote{border-left:3px solid var(--marun); margin:0 0 14px; padding:4px 0 4px 14px; color:var(--abu);}
.cerdik-nav{display:flex; justify-content:space-between; gap:10px; margin-top:26px; flex-wrap:wrap;}
.cerdik-nav a{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--garis); background:#fff;
     border-radius:10px; padding:11px 16px; font-weight:600; font-size:.9rem; color:var(--tinta);}
.cerdik-nav a:hover{border-color:var(--marun); color:var(--marun);}
.cerdik-nav a.utama{background:var(--marun); color:#fff; border-color:var(--marun);}
.cerdik-nav a svg{width:16px; height:16px;}
.nav-lanjut{display:inline-flex; align-items:center; gap:7px; background:var(--marun); color:#fff; border:0;
     border-radius:10px; padding:11px 18px; font:inherit; font-weight:700; font-size:.9rem; cursor:pointer;}
.nav-lanjut:hover:not(:disabled){background:var(--marun-gelap);}
.nav-lanjut:disabled{background:#c9b3b7; cursor:not-allowed;}
.nav-lanjut svg{width:16px; height:16px;}

/* progres titik materi */
.cerdik-prog{display:flex; gap:5px;}
.cerdik-prog span{height:5px; flex:1; border-radius:99px; background:var(--garis);}
.cerdik-prog span.sel{background:var(--hijau);}
.cerdik-prog span.kini{background:var(--marun);}

/* status gating */
.gate-info{margin-top:20px; background:var(--marun-muda); color:var(--marun-gelap); border-radius:10px;
     padding:11px 14px; font-size:.86rem; font-weight:600;}
.gate-info.ok{background:var(--tile-hijau); color:var(--hijau);}
.fb-vid{display:flex; align-items:center; gap:9px; margin-top:16px; font-size:.86rem; color:var(--abu);}
.fb-vid input{width:17px; height:17px; accent-color:var(--marun);}

/* pemutar youtube terkontrol */
.yt-holder{position:relative; width:100%; aspect-ratio:16/9; margin:10px 0; border-radius:10px; overflow:hidden; background:#000;}
.yt-holder iframe, .yt-holder > div{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* pertanyaan sisip (cek pemahaman) */
.cek-wrap{margin-top:10px;}
.cek{background:#fff; border:1px solid var(--garis); border-radius:12px; padding:16px 18px; margin-bottom:12px;}
.cek-q{font-weight:700; margin:0 0 12px;}
.cek-opsi{display:flex; flex-direction:column; gap:8px;}
.cek-pil{text-align:left; background:#fff; border:1px solid var(--garis); border-radius:10px; padding:11px 14px;
     font:inherit; font-size:.92rem; cursor:pointer;}
.cek-pil:hover:not(:disabled){border-color:var(--marun);}
.cek-pil:disabled{cursor:default;}
.cek-pil.benar{border-color:var(--hijau); background:var(--tile-hijau); color:var(--hijau); font-weight:700;}
.cek-pil.salah{border-color:var(--merah); background:#fdecea; color:var(--merah);}
.cek-umpan{margin-top:10px; font-size:.85rem; font-weight:600;}
.cek-umpan.ok{color:var(--hijau);} .cek-umpan.no{color:var(--merah);}

/* status materi di daftar */
.materi-item.is-sel .no{background:var(--tile-hijau); color:var(--hijau);}
.materi-item.is-kunci{opacity:.7;}
.materi-item.is-kunci .no{background:var(--latar); color:var(--abu);}

/* ---------- kotak ilustrasi & callout dalam materi ---------- */
.cerdik-isi .kotak-info, .cerdik-isi .kotak-tip, .cerdik-isi .kotak-penting{
     border-radius:12px; padding:14px 16px; margin:14px 0; font-size:.96rem;}
.cerdik-isi .kotak-info{background:#e4eef2; border-left:4px solid var(--teal);}
.cerdik-isi .kotak-tip{background:var(--tile-hijau); border-left:4px solid var(--hijau);}
.cerdik-isi .kotak-penting{background:#fbefd9; border-left:4px solid #b86b00;}
.cerdik-isi .kotak-info p:last-child, .cerdik-isi .kotak-tip p:last-child, .cerdik-isi .kotak-penting p:last-child{margin-bottom:0;}
.cerdik-isi .ilustrasi{text-align:center; margin:16px 0; color:var(--abu); font-size:.88rem;}
.cerdik-isi .emoji-besar{font-size:2.6rem; line-height:1; display:block; margin-bottom:6px;}
.cerdik-isi .dua-kolom{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:520px){ .cerdik-isi .dua-kolom{grid-template-columns:1fr;} }

/* ===================== HALAMAN AUTH (2 kolom) ===================== */
.shell{min-height:100vh; display:grid; grid-template-columns:1fr 1.05fr;}
.sisi{position:relative; overflow:hidden; color:#fff; background:linear-gradient(150deg, var(--marun) 0%, var(--marun-gelap) 100%);
      padding:40px max(22px, env(safe-area-inset-left,0px)); display:flex; flex-direction:column; gap:24px; justify-content:center;}
.sisi::after{content:"SAIYO"; position:absolute; right:-4%; bottom:-6%; font-family:var(--ff); font-weight:800;
      font-size:clamp(6rem,20vw,13rem); color:rgba(255,255,255,.05); pointer-events:none; letter-spacing:.03em;}
.sisi-brand{display:flex; align-items:center; gap:12px; position:relative; z-index:1;}
.sisi-brand .mark-img{width:46px; height:46px; object-fit:contain; background:#fff; border-radius:10px; padding:4px;}
.sisi-brand b{font-weight:800; font-size:1.5rem; letter-spacing:.03em; display:block;}
.sisi-brand small{color:rgba(255,255,255,.8); font-size:.74rem;}
.sisi-judul{position:relative; z-index:1;}
.sisi-judul h1{font-size:clamp(1.5rem,3.5vw,2.1rem); font-weight:800; line-height:1.2; text-wrap:balance;}
.sisi-judul p{margin:10px 0 0; color:rgba(255,255,255,.85); max-width:42ch; font-size:.96rem;}
.manfaat{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; position:relative; z-index:1;}
.manfaat li{display:flex; gap:12px; align-items:flex-start;}
.manfaat .ikon{width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.14); flex:0 0 auto; display:flex; align-items:center; justify-content:center;}
.manfaat .ikon svg{width:19px; height:19px;}
.manfaat b{font-size:.94rem; font-weight:700;}
.manfaat span.d{color:rgba(255,255,255,.78); font-size:.83rem;}

.kanan{display:flex; align-items:center; justify-content:center; padding:40px max(16px, env(safe-area-inset-right,0px)) 48px;}
.form-kotak{width:100%; max-width:440px;}
.form-kotak>.h{margin-bottom:22px;}
.form-kotak h2{font-size:1.5rem; font-weight:800;}
.form-kotak .subt{color:var(--abu); font-size:.92rem; margin-top:5px;}

form.sa{display:flex; flex-direction:column; gap:15px;}
.baris{display:flex; flex-direction:column; gap:6px;}
.baris.dua{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
label{font-size:.84rem; font-weight:600;}
label .opsi{color:var(--abu); font-weight:500; font-size:.78rem;}
.wajib{color:var(--marun);}
.inp{position:relative; display:flex; align-items:center;}
.inp>svg.kiri{position:absolute; left:12px; width:17px; height:17px; color:var(--abu); pointer-events:none;}
.inp input, .baris select{width:100%; font:inherit; font-size:.94rem; color:var(--tinta); background:#fff;
      border:1px solid var(--garis); border-radius:10px; padding:11px 13px 11px 38px;}
.baris select{padding-left:13px; appearance:none;}
.inp input:focus, .baris select:focus{outline:none; border-color:var(--marun); box-shadow:0 0 0 3px var(--marun-muda);}
.prefix{position:absolute; left:38px; color:var(--abu); font-size:.94rem; pointer-events:none;}
.inp input.ada-prefix{padding-left:70px;}
.lihat{position:absolute; right:10px; background:none; border:0; color:var(--abu); cursor:pointer; padding:4px; display:flex;}
.lihat svg{width:18px; height:18px;}
.bantu{font-size:.76rem; color:var(--abu);}
.kuat{display:flex; gap:5px; margin-top:7px;}
.kuat i{height:4px; flex:1; border-radius:99px; background:var(--garis); transition:background .2s;}
.kuat-ket{font-size:.76rem; margin-top:5px; color:var(--abu);}
.setuju{display:flex; gap:10px; align-items:flex-start; font-size:.84rem; color:var(--abu); line-height:1.45;}
.setuju input{width:18px; height:18px; flex:0 0 auto; margin-top:1px; accent-color:var(--marun);}
.baris-bantu{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.84rem;}
.ingat{display:flex; align-items:center; gap:7px; color:var(--abu);}
.ingat input{width:17px; height:17px; accent-color:var(--marun);}

.btn-utama{background:var(--marun); color:#fff; border:0; border-radius:10px; padding:13px; font:inherit;
      font-weight:700; font-size:.98rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;}
.btn-utama:hover{background:var(--marun-gelap);}
.btn-utama svg{width:18px; height:18px;}
.pisah{display:flex; align-items:center; gap:12px; color:var(--abu); font-size:.8rem; margin:2px 0;}
.pisah::before,.pisah::after{content:""; height:1px; background:var(--garis); flex:1;}
.btn-google{display:flex; align-items:center; justify-content:center; gap:10px; background:#fff; color:var(--tinta);
      border:1px solid var(--garis); border-radius:10px; padding:12px; font:inherit; font-weight:600; font-size:.92rem; cursor:pointer;}
.btn-google:hover{background:var(--latar);}
.btn-google svg{width:18px; height:18px;}
.tautan-tengah{text-align:center; font-size:.9rem; color:var(--abu);}
.catatan-aman{display:flex; gap:9px; align-items:flex-start; background:var(--marun-muda); border-radius:10px;
      padding:11px 13px; font-size:.78rem; color:var(--marun-gelap);}
.catatan-aman svg{width:16px; height:16px; flex:0 0 auto; margin-top:1px; color:var(--marun);}

/* Tombol & hasil deteksi lokasi */
.btn-lokasi{display:inline-flex; align-items:center; gap:9px; background:#fff; color:var(--marun);
      border:1px solid var(--marun); border-radius:10px; padding:11px 15px; font:inherit; font-weight:600;
      font-size:.9rem; cursor:pointer; align-self:flex-start;}
.btn-lokasi:hover{background:var(--marun-muda);}
.btn-lokasi:disabled{opacity:.6; cursor:default;}
.btn-lokasi svg{width:17px; height:17px;}
.lokasi-hasil{display:flex; gap:9px; align-items:flex-start; background:var(--tile-hijau); color:var(--hijau);
      border-radius:10px; padding:10px 13px; font-size:.82rem; font-weight:500; line-height:1.4;}
.lokasi-hasil.galat{background:#fdecea; color:var(--merah);}
.lokasi-hasil b{font-weight:700;}
.tautan-mini{background:none; border:0; color:var(--marun); font:inherit; font-size:.8rem; font-weight:600;
      cursor:pointer; padding:0; align-self:flex-start; text-decoration:underline;}

/* ===================== LAYAR OTP ===================== */
.otp-bungkus{min-height:100vh; display:flex; align-items:center; justify-content:center;
     padding:32px max(16px, env(safe-area-inset-left,0px));}
.otp-kartu{width:100%; max-width:430px; background:var(--kartu); border:1px solid var(--garis);
       border-radius:18px; padding:32px 28px; box-shadow:0 10px 30px rgba(0,0,0,.05);}
.otp-brand{display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:22px;}
.otp-brand .mark-img{width:40px; height:40px; object-fit:contain;}
.otp-brand b{font-weight:800; font-size:1.3rem; color:var(--marun); letter-spacing:.03em;}
.lingk{width:62px; height:62px; border-radius:50%; background:var(--marun-muda); color:var(--marun);
       display:flex; align-items:center; justify-content:center; margin:0 auto 16px;}
.lingk svg{width:30px; height:30px;}
.otp-kartu h2{font-size:1.4rem; font-weight:800; text-align:center;}
.otp-ket{color:var(--abu); font-size:.92rem; text-align:center; margin:8px 0 0;}
.otp-ket b{color:var(--tinta);}
.kode{display:flex; gap:10px; justify-content:center; margin:24px 0 6px;}
.kode input{width:46px; height:56px; text-align:center; font-size:1.5rem; font-weight:700;
      border:1px solid var(--garis); border-radius:12px; color:var(--tinta); background:#fff;}
.kode input:focus{outline:none; border-color:var(--marun); box-shadow:0 0 0 3px var(--marun-muda);}
.ulang{text-align:center; font-size:.85rem; color:var(--abu); margin:14px 0 20px;}
.ulang button{background:none; border:0; color:var(--marun); font:inherit; font-weight:700; cursor:pointer; padding:0;}
.ulang button:disabled{color:var(--abu); cursor:default; font-weight:600;}
.via-judul{font-size:.78rem; color:var(--abu); text-align:center; text-transform:uppercase; letter-spacing:.06em; margin-bottom:11px;}
.via{display:flex; flex-direction:column; gap:10px;}
.via button, .via a{display:flex; align-items:center; gap:12px; width:100%; background:#fff; border:1px solid var(--garis);
      border-radius:12px; padding:13px 15px; font:inherit; cursor:pointer; text-align:left; color:var(--tinta);}
.via button:hover, .via a:hover{border-color:var(--marun);}
.via .ic{width:38px; height:38px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;}
.via .ic-wa{background:var(--tile-hijau); color:var(--wa);} .via .ic-em{background:var(--marun-muda); color:var(--marun);}
.via .ic svg{width:20px; height:20px;}
.via .tx{display:flex; flex-direction:column; min-width:0; flex:1;}
.via .tx b{font-size:.92rem; font-weight:700;}
.via .tx small{color:var(--abu); font-size:.76rem;}
.via .gratis{font-size:.66rem; font-weight:700; color:var(--hijau); background:var(--tile-hijau); border-radius:99px; padding:2px 8px; flex:0 0 auto;}
.kembali{text-align:center; margin-top:20px; font-size:.86rem;}
.kembali a{color:var(--abu);} .kembali a:hover{color:var(--marun);}

/* ---------- Responsif ---------- */
@media (max-width:860px){ .shell{grid-template-columns:1fr;} .sisi{padding-block:32px;} }
@media (max-width:560px){ .hero-in{flex-direction:column; align-items:flex-start;} .ava{width:92px; height:92px;} .ava span{font-size:1.9rem;} }
@media (max-width:420px){ .baris.dua{grid-template-columns:1fr;} .kode input{width:40px; height:50px; font-size:1.3rem;} .kode{gap:7px;} }
@media (prefers-reduced-motion:reduce){ *{transition:none !important;} }