/* Tema hitam-emas untuk halaman pengunjung selain landing: toko, checkout,
   kebijakan, 404. Dimuat SETELAH gaya bawaan halaman (store.css / <style>)
   dan hanya menimpa warna, huruf, & sudut — tata letaknya tetap. Halaman
   admin TIDAK memuat berkas ini (admin tetap terang supaya status pesanan
   berwarna mudah dibaca). Palet sama dengan css/rr.css. */
:root {
  --charcoal: #F3EBDD;              /* dulu teks gelap → sekarang teks krem */
  --ivory: #1B1713;
  --soft-white: #13100D;
  --blush: #4a3b2e;
  --accent: #C9A061;
  --muted: #A1968A;
  --line: rgba(235, 207, 152, .16);
  --serif: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --bg: #0B0907;
  --gold-l: #EBCF98;
  --grad-gold: linear-gradient(180deg, #F6E2B6 0%, #D7B072 48%, #A07B43 100%);
  color-scheme: dark;
}
body { background: var(--bg); color: var(--charcoal); -webkit-font-smoothing: antialiased; }
::selection { background: #C9A061; color: #0B0907; }
h1 {
  font-family: var(--serif); font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Navbar toko & checkout */
nav { background: rgba(11, 9, 7, .86) !important; border-bottom-color: rgba(243, 235, 221, .09) !important; }
.nav-logo, .logo span { font-family: var(--serif); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .95rem; }
.nav-logo img, .logo img { filter: invert(78%) sepia(30%) saturate(560%) hue-rotate(358deg) brightness(92%); }
.nav-logo span, .logo em { color: var(--accent); }
.nav-right a { color: rgba(243, 235, 221, .75); font-family: var(--serif); font-weight: 600; }
.nav-right a:hover { color: var(--gold-l); }
.cart-btn { color: var(--gold-l); }
.cart-count { background: var(--grad-gold); color: #1A140C; }

/* Toko */
.trust-badge { background: rgba(255, 244, 225, .04); color: var(--charcoal); border-radius: 2px; }
.trust-badge i { color: var(--accent); }
.cat-tab { background: transparent; color: var(--muted); border-radius: 2px; font-family: var(--serif); text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; }
.cat-tab:hover { border-color: var(--accent); color: var(--gold-l); }
.cat-tab.active { background: var(--grad-gold); color: #1A140C; border-color: transparent; }
.card { background: linear-gradient(180deg, rgba(255, 244, 225, .05), rgba(255, 244, 225, .015)); border-color: rgba(243, 235, 221, .09); border-radius: 4px; }
.card:hover { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(201, 160, 97, .22); }
.card .thumb { background: #1B1713; }
.card h3 { font-family: var(--serif); font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1.3; }
.card .price { color: var(--gold-l); font-family: var(--serif); font-weight: 700; }
.card .stok.habis { color: #e8857a; }

/* Tombol */
.btn { border-radius: 2px; font-family: var(--serif); text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 700; }
.btn-primary, .btn-gold { background: var(--grad-gold); color: #1A140C; box-shadow: 0 10px 34px -14px rgba(201, 160, 97, .6); }
.btn-primary:hover, .btn-gold:hover { background: var(--charcoal); color: #1A140C; filter: none; }
.btn-outline { color: var(--gold-l); border-color: var(--accent); }
.btn-outline:hover { background: var(--accent); color: #0B0907; }

/* Keranjang */
.overlay { background: rgba(0, 0, 0, .62); }
.drawer { background: #13100D; border-left: 1px solid var(--line); }
.drawer header h2 { font-family: var(--serif); font-weight: 700; text-transform: uppercase; font-size: 1rem; letter-spacing: .12em; }
.qty button { color: var(--charcoal); }
.row-total.grand span:last-child { color: var(--gold-l); }

/* Checkout & formulir */
.panel { background: linear-gradient(180deg, rgba(255, 244, 225, .04), rgba(255, 244, 225, .01)); border-radius: 4px; }
h2.title { font-family: var(--serif); font-weight: 800; text-transform: uppercase; font-size: 1.25rem; color: var(--gold-l); }
label { color: var(--muted); text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; font-family: var(--serif); }
input, textarea, select { background: #0B0907; color: var(--charcoal); border-radius: 2px; }
input::placeholder, textarea::placeholder { color: rgba(243, 235, 221, .3); }
.ship-opt { border-radius: 2px !important; }
.ship-opt.sel { background: rgba(201, 160, 97, .08) !important; }
/* QRIS tetap berlatar terang supaya mudah dipindai */
.qris-box { background: #F3EBDD !important; color: #17140F; border-radius: 4px !important; }
.qris-box * { color: #17140F; }
.toast { background: #1B1713; border: 1px solid var(--line); color: var(--charcoal); border-radius: 2px; }

/* Kebijakan & 404 */
.bungkus p, .bungkus li, .bungkus dd { color: #CFC5B8 !important; }
.bungkus h2 { font-family: var(--serif); font-weight: 700; text-transform: uppercase; font-size: 1.02rem; letter-spacing: .06em; color: var(--gold-l); }
.bungkus h3 { color: var(--charcoal); }
.bungkus a { color: var(--gold-l); }
.catatan { background: rgba(255, 244, 225, .04); border-radius: 4px; }
.balik, .btn-utama { background: var(--grad-gold) !important; color: #1A140C !important; border-radius: 2px; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; }
.balik:hover, .btn-utama:hover { background: var(--charcoal) !important; }
.btn-garis { border-radius: 2px; color: var(--gold-l); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; }
.kode { font-family: var(--serif); color: var(--accent); font-weight: 600; }
.lain a { color: var(--charcoal); }