/* ==========================================================
   THEME - tombol bulan/matahari + semua warna mode gelap
   Perilaku: public/assets/js/modules/theme.js
   Dimuat paling akhir supaya menang dari file CSS lain.
   ========================================================== */
:root{--surface:#fff}

/* tombol toggle */
.theme-toggle{position:relative;flex:none;display:grid;place-items:center;width:42px;height:42px;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);transition:background .15s,border-color .15s,transform .15s}
.theme-ic{grid-area:1/1;display:grid;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.theme-moon{color:#2f5fcf}
.theme-sun{color:#f59e0b;opacity:0;transform:rotate(-90deg) scale(.4)}
@media (hover:hover){
  .theme-toggle:hover{background:var(--brand-l);border-color:#c9d6f2;transform:translateY(-1px)}
}
.theme-toggle:active{transform:scale(.94)}

/* ---------- MODE GELAP ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#e6ecfb;
  --mut:#93a1c0;
  --line:#22305a;
  --bg:#0a1126;
  --brand:#4f7be0;
  --brand-d:#8fb0ee;
  --brand-l:#17284f;
  --surface:#101a38;
}
:root[data-theme="dark"] .theme-moon{opacity:0;transform:rotate(90deg) scale(.4)}
:root[data-theme="dark"] .theme-sun{opacity:1;transform:none}

/* permukaan putih jadi biru gelap */
:root[data-theme="dark"] :is(.burger,.pill:not(.on),.catalog-head,.card,.fav,.modal-sheet,.in,.qty button,.btn.ghost){background:var(--surface)}
:root[data-theme="dark"] .head{background:rgba(10,17,38,.86)}
:root[data-theme="dark"] .nav{background:#0f1936}
:root[data-theme="dark"] .nav a{color:#b5c2de}
:root[data-theme="dark"] .nav a .ic{color:#9fb0d3}
:root[data-theme="dark"] .nav a:hover{color:#fff}
:root[data-theme="dark"] .nav a:hover .ic{color:#fff}
:root[data-theme="dark"] .acct-menu{background:#0f1936;border-color:rgba(160,190,240,.18);box-shadow:0 14px 34px rgba(0,0,0,.45)}
:root[data-theme="dark"] .acct-menu a{color:#b5c2de}
:root[data-theme="dark"] .acct-menu a .ic{color:#9fb0d3}
:root[data-theme="dark"] .acct-menu a:hover{color:#fff}
:root[data-theme="dark"] .acct-menu a:hover .ic{color:#fff}
:root[data-theme="dark"] .acct-menu .acct-out,:root[data-theme="dark"] .acct-m .acct-out{color:#fda29b}
:root[data-theme="dark"] .acct-menu .acct-out .ic,:root[data-theme="dark"] .acct-m .acct-out .ic{color:#fda29b}
:root[data-theme="dark"] .acct-menu .acct-out:hover,:root[data-theme="dark"] .acct-m .acct-out:hover{background:rgba(240,68,56,.14)}
:root[data-theme="dark"] .btn.dark{background:#24335f}
:root[data-theme="dark"] .card:hover{border-color:#2c4a8f;box-shadow:0 14px 30px rgba(0,0,0,.35)}
:root[data-theme="dark"] .pill:not(.on):hover{background:var(--brand-l);border-color:#2c4a8f}
:root[data-theme="dark"] .fav:hover{background:#2a1626;border-color:#5b2a3d}
:root[data-theme="dark"] .in::placeholder{color:#6b7a9c}
:root[data-theme="dark"] .toggle{background:#33426e}
:root[data-theme="dark"] .toggle:checked{background:var(--brand)}

/* logo navy dicerahkan di header mode gelap supaya tetap kelihatan */
:root[data-theme="dark"] .head .logo img{filter:brightness(2.4) saturate(1.1)}

/* footer: tadinya pakai --ink sebagai background, sekarang dikunci gelap */
:root[data-theme="dark"] .foot{background:radial-gradient(700px 300px at 20% 120%,rgba(70,120,222,.20),transparent 70%),radial-gradient(520px 260px at 100% -20%,rgba(110,150,225,.10),transparent 70%),#060c20}