/* ================================================================
   TEMA HITAM EMAS V3 — CACHE-SAFE OVERRIDE
   File ini sengaja memakai nama baru agar browser/CDN tidak memuat
   stylesheet hijau dari cache lama.
   ================================================================ */

:root {
  --black-0: #000000;
  --black-1: #050505;
  --black-2: #0a0a0a;
  --black-3: #111111;
  --gold-1: #fff3b0;
  --gold-2: #ffd700;
  --gold-3: #d4af37;
  --gold-4: #9a7218;
  --text-main: #f8edc6;
  --text-muted: #c8bb8c;
  --gold-line: rgba(212, 175, 55, 0.38);
  --gold-glow: rgba(255, 215, 0, 0.18);
}

html {
  color-scheme: dark !important;
  background: var(--black-0) !important;
}

body {
  color: var(--text-main) !important;
  background-color: var(--black-0) !important;
  background-image:
    radial-gradient(circle at 12% 4%, rgba(255, 215, 0, 0.12), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(212, 175, 55, 0.09), transparent 22%),
    linear-gradient(135deg, rgba(212, 175, 55, 0.025) 25%, transparent 25%),
    linear-gradient(315deg, rgba(212, 175, 55, 0.018) 25%, transparent 25%) !important;
  background-size: auto, auto, 42px 42px, 42px 42px !important;
}

main,
.section,
.section-sm {
  color: var(--text-main) !important;
  background: transparent !important;
}

.topbar {
  color: #ffe991 !important;
  background: linear-gradient(90deg, #000000, #211804 50%, #000000) !important;
  border-bottom: 1px solid var(--gold-line) !important;
}

.site-header {
  background: rgba(0, 0, 0, 0.97) !important;
  border-bottom: 1px solid var(--gold-line) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.82) !important;
}

.brand,
.brand-text,
.brand small,
.nav a {
  color: var(--text-main) !important;
}

.brand-mark {
  color: #050400 !important;
  background: linear-gradient(145deg, var(--gold-1), var(--gold-2) 35%, var(--gold-3) 68%, var(--gold-4)) !important;
  border: 1px solid #ffe98a !important;
  box-shadow:
    0 12px 30px rgba(212, 175, 55, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.nav a:hover,
.nav a.active {
  color: var(--gold-2) !important;
  background: rgba(212, 175, 55, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.42) !important;
}

.nav-toggle {
  color: var(--gold-2) !important;
  background: var(--black-2) !important;
  border-color: var(--gold-line) !important;
}

.cart-chip,
.btn-primary,
.btn-accent,
.live-chat-launcher {
  color: #050400 !important;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2) 35%, var(--gold-3) 68%, var(--gold-4)) !important;
  border: 1px solid #ffe98a !important;
  box-shadow:
    0 14px 34px rgba(212, 175, 55, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.cart-chip:hover,
.btn-primary:hover,
.btn-accent:hover,
.live-chat-launcher:hover {
  filter: brightness(1.08) !important;
  box-shadow:
    0 18px 42px rgba(212, 175, 55, 0.34),
    0 0 28px rgba(255, 215, 0, 0.16) !important;
}

.cart-count {
  color: var(--gold-2) !important;
  background: var(--black-0) !important;
  border: 1px solid rgba(255, 215, 0, 0.6) !important;
}

.hero,
.page-hero {
  color: var(--text-main) !important;
  background:
    radial-gradient(circle at 82% 15%, rgba(255, 215, 0, 0.18), transparent 30%),
    radial-gradient(circle at 15% 90%, rgba(212, 175, 55, 0.09), transparent 28%),
    linear-gradient(180deg, #0d0d0d 0%, #000000 100%) !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.28) !important;
}

.hero h1,
.page-hero h1,
.section-head h2,
.content h1,
.content h2,
.content h3,
.product-body h3,
.category-card h3,
.info-card h3,
.step h3,
.faq summary,
.summary-card h2,
.summary-card h3 {
  color: #fff2bd !important;
}

.hero h1 span,
.price,
.breadcrumbs a {
  color: var(--gold-2) !important;
}

.hero p,
.page-hero p,
.section-head p,
.content p,
.content li,
.product-meta,
.category-card p,
.step p,
.faq p,
.muted,
.mini-offer span {
  color: var(--text-muted) !important;
}

.eyebrow {
  color: var(--gold-2) !important;
  background: rgba(212, 175, 55, 0.1) !important;
  border-color: rgba(212, 175, 55, 0.46) !important;
}

.btn-secondary {
  color: #f6df8e !important;
  background: var(--black-2) !important;
  border-color: rgba(212, 175, 55, 0.45) !important;
}

.btn-secondary:hover {
  color: var(--gold-2) !important;
  border-color: var(--gold-3) !important;
  background: #161205 !important;
}

.hero-card,
.category-card,
.info-card,
.product-card,
.panel,
.content,
.summary-card,
.faq details,
.cart-item,
.contact-item,
.notice,
.empty-state {
  color: var(--text-main) !important;
  background: linear-gradient(145deg, rgba(18, 18, 18, 0.99), rgba(4, 4, 4, 0.99)) !important;
  border: 1px solid var(--gold-line) !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.66),
    inset 0 1px 0 rgba(255, 215, 0, 0.045) !important;
}

.category-card:hover,
.info-card:hover,
.product-card:hover {
  border-color: rgba(255, 215, 0, 0.72) !important;
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.76),
    0 0 28px rgba(212, 175, 55, 0.14) !important;
}

.basket,
.product-visual,
.cart-icon,
.category-icon {
  background:
    radial-gradient(circle at 72% 18%, rgba(255, 215, 0, 0.16), transparent 32%),
    linear-gradient(145deg, #191407 0%, #080808 58%, #000000 100%) !important;
  border-color: rgba(212, 175, 55, 0.42) !important;
}

.product-visual {
  border-bottom-color: rgba(212, 175, 55, 0.32) !important;
}

.product-image-fallback,
.cart-image-fallback,
.category-icon {
  color: var(--gold-2) !important;
}

.badge,
.step::before {
  color: #050400 !important;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2) 38%, var(--gold-3) 72%, var(--gold-4)) !important;
  border: 1px solid #ffe98a !important;
}

.old-price {
  color: #817964 !important;
}

.promo-band {
  color: #fff1b8 !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 215, 0, 0.2), transparent 28%),
    linear-gradient(135deg, #1d1603 0%, #0b0b0b 52%, #000000 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.54) !important;
}

.promo-band p {
  color: #d5c796 !important;
}

.field,
select.field,
textarea.field,
input,
select,
textarea {
  color: var(--text-main) !important;
  background-color: #070707 !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
}

.field:focus,
select.field:focus,
textarea.field:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold-2) !important;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.14) !important;
}

.field::placeholder,
input::placeholder,
textarea::placeholder {
  color: #827a62 !important;
}

.content th,
.content td,
.summary-total,
.footer-bottom {
  border-color: rgba(212, 175, 55, 0.25) !important;
}

.qty button {
  color: var(--gold-2) !important;
  background: #050505 !important;
  border-color: rgba(212, 175, 55, 0.42) !important;
}

.qty button:hover {
  color: #050400 !important;
  background: var(--gold-2) !important;
}

.progress {
  background: #1b170c !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
}

.progress > span {
  background: linear-gradient(90deg, var(--gold-4), var(--gold-2), var(--gold-3)) !important;
}

.footer {
  color: #cabc8c !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 215, 0, 0.09), transparent 28%),
    linear-gradient(180deg, #080808 0%, #000000 100%) !important;
  border-top: 1px solid rgba(212, 175, 55, 0.38) !important;
}

.footer h3,
.footer h4 {
  color: #ffe799 !important;
}

.footer a {
  color: #bfb184 !important;
}

.footer a:hover {
  color: var(--gold-2) !important;
}

.footer-bottom {
  color: #91886e !important;
}

.toast {
  color: #f7e6aa !important;
  background: #080808 !important;
  border: 1px solid rgba(212, 175, 55, 0.5) !important;
}

.remove {
  color: #ff827a !important;
}

::selection {
  color: #000000 !important;
  background: var(--gold-2) !important;
}

@media (max-width: 980px) {
  .nav {
    background: rgba(0, 0, 0, 0.99) !important;
    border: 1px solid rgba(212, 175, 55, 0.44) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8) !important;
  }
}

/* Sembunyikan tombol Live Chat mengambang di semua halaman */
.live-chat-launcher {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}