/* ============================================================
   theme-dark.css — Redesign Konsep A (dark premium) — STAGING
   Layer override, reversible (cabut <link> di headv2.php).
   ============================================================ */
:root{
  --ink:#0a0f1a; --ink2:#070b13; --panel:#111826; --line:rgba(255,255,255,.09);
  --cyan:#22d3ee; --blue:#3b82f6; --amber:#fbbf24; --txt:#e7eef7; --mut:#93a4bd;
}

/* ---------- BASE ---------- */
body{ background:var(--ink) !important; color:var(--txt) !important; }

/* ---------- HEADER / NAV ---------- */
.header1, .bg-tipis, .navbar.bg-tipis, .top-menu{ background:var(--ink2) !important; border-color:var(--line) !important; }
.navbar-light .navbar-nav .nav-link{ color:var(--mut) !important; }
.navbar-light .navbar-nav .nav-link:hover{ color:var(--cyan) !important; }
.search-top, .form-header input, .form-header .form-control{
  background:var(--panel) !important; color:var(--txt) !important; border:1px solid var(--line) !important;
}
.form-header input::placeholder{ color:var(--mut) !important; }
.navbar-toggler{ border-color:var(--line) !important; }

/* ---------- SECTION BACKGROUNDS (override inline light bg) ---------- */
.newproduct{ background:var(--ink) !important; }
.kategori-wrapper{ background:var(--ink) !important; }
.banner-iklans{ background:var(--ink2) !important; }

/* ---------- SECTION HEADINGS ---------- */
.newproduct h2, .kategori-wrapper h2, .banner-iklans h3{ color:var(--txt) !important; }
.newproduct .text-primary, .kategori-wrapper .text-primary{ color:var(--txt) !important; }
.newproduct .text-dark, .kategori-wrapper .text-dark,
.newproduct a, .kategori-wrapper a{ color:var(--cyan) !important; }

/* ---------- PRODUCT CARD (block2) ---------- */
.block2{ background:var(--panel) !important; border:1px solid var(--line) !important; }
.block2-img{
  object-fit:contain !important; height:auto !important; aspect-ratio:1/1 !important;
  max-height:none !important; min-height:0 !important; width:100% !important;
  background:#fff !important; padding:12px !important; border-bottom:1px solid var(--line);
}
.block2:hover{ scale:1 !important; border-color:rgba(34,211,238,.45) !important; }
.block2-name{ color:var(--txt) !important; }
.block2-txt, .block2-txt span, .block2 .fs-12, .block2 small{ color:var(--mut) !important; }
.block2-price{ color:#ffffff !important; font-weight:800 !important; }
.block2-price-coret{ color:var(--mut) !important; }
.block2-label{ background:var(--amber) !important; color:#3a2a00 !important; }
/* tombol keranjang & beli */
.block2 .btn-light{ background:rgba(255,255,255,.06) !important; color:var(--txt) !important; border:1px solid var(--line) !important; }
.block2 .btn-primary{
  background:linear-gradient(135deg,var(--cyan),var(--blue)) !important;
  border:0 !important; color:#04121a !important; font-weight:800 !important;
}

/* ---------- KATEGORI + KENAPA + FOOTER cards (semua pakai .bg-foot) ---------- */
.bg-foot{ background:var(--panel) !important; border:1px solid var(--line) !important; }
.cat-bg{ background:#fff !important; border-radius:10px !important; overflow:hidden; }
.cat-nama{ color:var(--txt) !important; }
.iklan-wrap .font-bold, .banner-iklans .font-bold{ color:var(--txt) !important; }
.iklan-wrap .fs-12, .banner-iklans .fs-12{ color:var(--mut) !important; }

/* ---------- FOOTER ---------- */
.bg-foot-gradient{ background:linear-gradient(180deg,var(--ink2),var(--ink)) !important; color:var(--mut) !important; }
.foot-title{ color:var(--cyan) !important; }
.foot-menu, .foot-menu a, .bg-foot-gradient a, .bg-foot-gradient{ color:var(--mut) !important; }
.foot-menu a:hover{ color:var(--cyan) !important; }

/* ---------- HERO DARK SLIDER (redesign) ---------- */
.carousel.slider{ display:none !important; }
.hero-dark-wrap{ position:relative; max-width:1200px; margin:18px auto 6px; padding:0 12px; }
.hero-dark-wrap .hd-slide{ display:none; }
.hero-dark-wrap .hd-slide.active{ display:block; }
.hero-dark-wrap .hd-slide img{ width:100%; height:auto; border-radius:18px; border:1px solid rgba(255,255,255,.08); display:block; }
.hd-dots{ position:absolute; bottom:16px; left:0; right:0; display:flex; gap:8px; justify-content:center; }
.hd-dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; transition:.2s; }
.hd-dot.on{ background:#22d3ee; width:24px; border-radius:5px; }