/* ==========================================================
   BASE - variabel warna, reset, tombol. Dimuat paling awal.
   Mau ganti warna utama toko? Ubah --brand (+ --brand-d, --brand-l) di sini.
   ========================================================== */
:root{
  --ink:#0b1736;       /* teks gelap / background gelap */
  --mut:#64748b;       /* teks abu-abu */
  --line:#e3e9f4;      /* garis & border */
  --bg:#f5f8fd;       /* background halaman */
  --brand:#2f5fcf;     /* warna utama (biru) */
  --brand-d:#254aa8;   /* warna utama (lebih gelap) */
  --brand-l:#eaf0fc;   /* warna utama (lebih muda) */
  --on-brand:#fff;     /* warna teks di atas tombol biru */
  --star:#f59e0b;      /* warna bintang rating */
  --r:14px;
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;font:400 14px/1.6 var(--font);color:var(--ink);background:var(--bg);overflow-wrap:anywhere}
body.lock{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--brand-d);outline-offset:2px}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}
.ic{flex:none}

/* tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 18px;border:0;border-radius:12px;background:linear-gradient(135deg,#4678de,#2a52b8);color:var(--on-brand);font-weight:700;text-shadow:0 1px 1px rgba(11,23,54,.35);box-shadow:0 6px 16px rgba(47,95,207,.24);transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 10px 22px rgba(47,95,207,.30)}
.btn:active{transform:none}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink);text-shadow:none;box-shadow:none}
.btn.ghost:hover{background:var(--bg);filter:none;transform:none;box-shadow:none}
.btn.dark{background:var(--ink);border:0;color:#fff;text-shadow:none;box-shadow:none}
.btn.dark:hover{background:#1e293b;filter:none;transform:none;box-shadow:none}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}