/* ============================================================================
   CULINARA — LAPISAN TEMA "SSB" (mengikuti https://sotossbhjhesti.com/)
   Dimuat PALING AKHIR (setelah catalog.css, redesign.css, culinara.css).

   Ciri tampilan rujukan yang diadopsi:
     · marun tua pekat  #691414 / lebih gelap #540E0E
     · aksen kuning emas #FACC15 (tombol pil, label kecil, penekanan judul)
     · latar krem netral & putih berselang-seling
     · SATU jenis huruf sans (Plus Jakarta Sans) untuk judul maupun isi
     · judul tebal & rapat, label kecil HURUF BESAR berjarak lebar
     · tombol bulat penuh (pil), kartu putih bergaris tipis

   Berkas ini HANYA mengubah tampilan; tidak menyentuh data, keranjang,
   promo, maupun panel admin. Hapus tautannya di templat = kembali ke tema
   terracotta sebelumnya (rollback satu langkah).

   Setiap perubahan berkas ini WAJIB menaikkan ?v= di templat
   (cache LiteSpeed 7 hari).
   ========================================================================== */

/* ── 1. Token warna: marun + emas + krem netral ─────────────────────────── */
:root {
  /* identitas 2026 (dipakai redesign.css) */
  --merah-cerah: #691414;        /* marun utama */
  --maroon: #691414;
  --maroon-tua: #4f0f0f;
  --maroon-muda: #8c2424;
  --gold: #facc15;               /* emas terang — untuk latar gelap */
  --gold-tua: #9a6700;           /* emas gelap — untuk teks di latar terang */
  --ivory: #fffdf9;              /* putih hangat */
  --ivory-2: #f6f2ea;            /* krem netral */
  --ivory-3: #ece6da;

  --putih: var(--ivory);
  --bg: var(--ivory);
  --bg-2: var(--ivory-2);
  --bg-3: var(--ivory-3);
  --teks: #1c1917;
  --teks-2: #57534e;
  --teks-3: #78716c;
  --garis: #e7e2d9;
  --garis-2: #efeadf;
  --merah: #8f1d1d;
  --merah-lembut: #fbeaea;
  --kuning: var(--gold-tua);
  --kuning-lembut: #fdf6dc;

  /* nama lama (culinara.css / catalog.css) → diarahkan ke palet SSB */
  --hijau: var(--maroon);
  --hijau-tua: var(--maroon-tua);
  --hijau-gelap: #3f0b0b;
  --hijau-lembut: var(--ivory-2);
  --hijau-garis: var(--garis);
  --ink: var(--teks);
  --panel: var(--ivory-2);
  --photo-bg: #f7f2e9;
  --soft-bg: var(--ivory-2);
  --line: var(--garis);
  --line-btn: var(--garis);
  --line-soft: var(--garis);
  --dark: var(--maroon);
  --dark-hover: var(--maroon-tua);
  --accent: #8f1d1d;
  --accent-2: var(--gold-tua);
  --label: #8a7a68;
  --label-2: #8a7a68;
  --soft: #6b625a;
  --soft-2: #6b625a;
  --soft-3: #78716c;
  --placeholder: #a8a29e;
  --ok: #4f7a58;
  --low: #b45309;
  --dot: #e3dccf;
  --nav-bg: #4f0f0f;
  --nav-idle: #e7e0d2;
  --nav-pill: #fffdf9;
  --shadow-float: 0 24px 60px rgba(105, 20, 20, 0.18);

  /* token --cl-* milik culinara.css */
  --cl-terracotta: #691414;
  --cl-terracotta-tua: #8c2424;
  --cl-terracotta-gelap: #4f0f0f;
  --cl-terracotta-muda: #a63232;
  --cl-terracotta-lembut: #f2e0d6;
  --cl-krem: #fffdf9;
  --cl-krem-2: #f6f2ea;
  --cl-krem-3: #ece6da;
  --cl-putih: #ffffff;
  --cl-zaitun: #9a6700;
  --cl-zaitun-tua: #7c5200;
  --cl-zaitun-muda: #d4a017;
  --cl-zaitun-lembut: #fdf4d4;
  --cl-tinta: #1c1917;
  --cl-tinta-2: #57534e;
  --cl-tinta-3: #78716c;
  --cl-garis: #e7e2d9;
  --cl-oker: #eab308;
}

/* ── 2. Tipografi: satu keluarga huruf, judul tebal & rapat ─────────────── */
.hero-bersih-judul,
.section-title,
.hk-nama,
.cl-judul,
.cl-kartu-nama,
.cl-harga,
.cl-promo-judul,
.cl-promo-kode,
.cl-stat b,
.cl-testi-teks,
.detail-name,
.auth-title,
.auth-card-title,
h1, h2, h3 {
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif !important;
  font-variation-settings: normal;
  font-style: normal;
  letter-spacing: -0.025em;
}

.hero-bersih-judul {
  font-weight: 800;
  font-size: clamp(33px, 4.4vw, 58px);
  line-height: 1.05;
  color: #fff8ee;
}
.hero-bersih-judul em {
  font-style: normal;
  color: var(--gold);
}
.cl-judul,
.section-title {
  font-weight: 800;
  letter-spacing: -0.028em;
  color: var(--teks);
}
.cl-judul em { font-style: normal; color: #8f1d1d; }
.hk-nama, .cl-kartu-nama { font-weight: 800; }

body { background: var(--ivory); color: var(--teks); }
::selection { background: var(--gold); color: var(--maroon-tua); }

/* ── 3. Bilah atas marun dua tingkat ───────────────────────────────────── */
.hd {
  background: linear-gradient(180deg, #741717 0%, #691414 100%);
  border-bottom: 1px solid rgba(250, 204, 21, 0.22);
}
.hd-utama { border-bottom: 1px solid rgba(255, 248, 238, 0.13); }
.hd-logo, .hd-logo:hover, .hd-logo-teks { color: #fff8ee; }
.hd-logo-teks b { color: var(--gold); }
.hd-logo-ikon { background: rgba(255, 248, 238, 0.14); border: 1px solid rgba(250, 204, 21, 0.4); }
.hd-menu, .hd-kembali {
  background: transparent;
  border-color: rgba(255, 248, 238, 0.3);
  color: #fff8ee;
}
.hd-menu:hover, .hd-kembali:hover { background: rgba(250, 204, 21, 0.16); color: var(--gold); }
.hd-cari { background: #fffdf9; border-color: transparent; }
.hd-cari-ikon { color: var(--maroon); }
.hd-cari input { color: var(--teks); }
.hd-cari input::placeholder { color: #6f6862; }
.hd-cari-btn {
  background: var(--gold);
  border-color: var(--gold);
  color: #4f0f0f;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11.5px;
}
.hd-cari-btn:hover { background: #fde047; border-color: #fde047; color: #4f0f0f; }
.hd-aksi-btn {
  background: transparent;
  border-color: rgba(255, 248, 238, 0.3);
  color: #fff8ee;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  font-weight: 700;
}
.hd-aksi-btn:hover { background: rgba(250, 204, 21, 0.16); color: var(--gold); border-color: var(--gold); }
/* keranjang = tombol pil emas, seperti tombol "Pesan Catering & DO" */
.hd-keranjang,
.hd-keranjang:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #4f0f0f;
  font-weight: 800;
}
.hd-keranjang:hover { background: #fde047; border-color: #fde047; color: #4f0f0f; }
.hd-count { background: #4f0f0f; color: var(--gold); }
.hd-keranjang:hover .hd-count { background: #4f0f0f; color: #fde047; }

/* baris kategori: tetap marun, tulisan kapital berjarak */
.hd-nav-baris { background: #4f0f0f; border-bottom: 0; }
.hd-nav-link {
  color: rgba(255, 248, 238, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  font-weight: 700;
  padding: 14px 7px;
}
.hd-nav-link:hover { background: rgba(250, 204, 21, 0.14); color: var(--gold); }
.hd-nav-link.aktif { color: var(--gold); font-weight: 800; }
.hd-nav-link.aktif::after { background: var(--gold); height: 3px; }
.hd-nav-promo { color: var(--gold); }

/* Desktop: bila kategori bertambah banyak, menu TURUN ke baris kedua —
   jangan terpotong di tepi kanan (di HP tetap geser mendatar). */
@media (min-width: 981px) {
  .hd-nav {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* ── 4. Hero: bidang marun, label emas, dua tombol pil ─────────────────── */
.hero-bersih.hero-korsel-zone {
  --hero-ivory: #fff8ee;
  --hero-gold: var(--gold);
  background-color: #691414;
  background-image:
    radial-gradient(760px 540px at 88% -8%, rgba(250, 204, 21, 0.16), transparent 62%),
    radial-gradient(620px 460px at 4% 106%, rgba(0, 0, 0, 0.42), transparent 68%),
    linear-gradient(118deg, #751717 0%, #691414 48%, #500f0f 100%);
}
.hero-bersih.hero-korsel-zone::before {
  background-image: radial-gradient(rgba(250, 204, 21, 0.18) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.45;
}
.hero-bersih-eyebrow {
  border: 1px solid rgba(250, 204, 21, 0.5);
  background: rgba(250, 204, 21, 0.1);
  color: var(--gold);
  font-weight: 800;
  letter-spacing: 0.15em;
}
.hero-bersih-eyebrow .titik { background: var(--gold); box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.24); }
.hero-bersih-desk { color: rgba(255, 248, 238, 0.86); }
.hero-bersih.hero-korsel-zone .hero-bersih-cta {
  background: var(--gold);
  border-color: var(--gold);
  color: #4f0f0f;
  font-weight: 800;
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.6);
}
.hero-bersih.hero-korsel-zone .hero-bersih-cta:hover {
  background: #fde047;
  border-color: #fde047;
  color: #4f0f0f;
  transform: translateY(-2px);
}
.hero-bersih.hero-korsel-zone .hero-bersih-cta-sekunder {
  border-color: rgba(255, 248, 238, 0.5);
  color: #fff8ee;
}
.hero-bersih.hero-korsel-zone .hero-bersih-cta-sekunder:hover {
  background: rgba(255, 248, 238, 0.12);
  border-color: var(--gold);
  color: var(--gold);
}
.hero-bersih-info li { color: rgba(255, 248, 238, 0.8); }
.hero-bersih-info li .ikon { color: var(--gold); }

/* kartu korsel di hero */
.hk-kartu {
  background: #fffdf9;
  border-radius: 20px;
  box-shadow: 0 34px 64px -34px rgba(0, 0, 0, 0.7);
}
.hk-kat { color: var(--gold-tua); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.hk-nama { color: var(--teks); }
.hk-harga { color: #8f1d1d; }
.hk-hitung b { color: var(--maroon); }
.hk-detail { border-color: rgba(105, 20, 20, 0.25); color: #8f1d1d; }
.hk-detail:hover { background: var(--gold); border-color: var(--gold); color: #4f0f0f; }
.hk-nav-bar { background: #f6f2ea; }
.hk-nav { color: var(--maroon); }
.hk-titik { background: #ded6c6; }
.hk-titik.is-active { background: var(--gold); }

/* ── 5. Pita janji: marun gelap, ikon emas (gaya SSB) ──────────────────── */
.cl-janji {
  background: #4f0f0f;
  border-bottom: 1px solid rgba(250, 204, 21, 0.2);
}
.cl-janji-ikon { background: rgba(250, 204, 21, 0.14); color: var(--gold); }
.cl-janji-teks strong { color: #fff8ee; }
.cl-janji-teks span { color: rgba(255, 248, 238, 0.66); }

/* ── 6. Kepala seksi: label kapital emas + pil ─────────────────────────── */
.cl-eyebrow { color: var(--gold-tua); letter-spacing: 0.2em; }
.cl-eyebrow::before,
.cl-sec-kepala.tengah .cl-eyebrow::after { background: var(--gold); height: 3px; }
.cl-sec-kepala.tengah .cl-eyebrow {
  padding: 7px 16px;
  border: 1px solid rgba(105, 20, 20, 0.18);
  border-radius: 999px;
  background: #fff;
  gap: 9px;
}
.cl-sub { color: var(--teks-2); }
.cl-cerita { background: var(--ivory-2); border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis); }

/* ── 7. Kartu menu & tombol pil ────────────────────────────────────────── */
.cl-kartu {
  background: #fff;
  border: 1px solid var(--garis);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
}
.cl-kartu:hover { border-color: rgba(105, 20, 20, 0.3); box-shadow: 0 14px 30px rgba(105, 20, 20, 0.12); }
.cl-kartu-kat { color: var(--gold-tua); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 800; }
.cl-kartu-nama { color: var(--teks); }
.cl-harga, .harga-utama { color: #8f1d1d; font-weight: 800; }

.cl-pesan {
  background: var(--gold);
  border-color: var(--gold);
  color: #4f0f0f;
  font-weight: 800;
}
.cl-pesan:hover { background: #fde047; border-color: #fde047; color: #4f0f0f; }
.tombol-beli {
  background: var(--gold);
  border-color: var(--gold);
  color: #4f0f0f;
  font-weight: 800;
}
.tombol-beli:hover { background: #fde047; border-color: #fde047; color: #4f0f0f; }
.tombol-beli-varian { background: #fff; border-color: var(--gold); color: #4f0f0f; }
.tombol-beli-varian:hover { background: #fdf6dc; color: #4f0f0f; }

/* tombol umum: emas untuk aksi utama */
.btn, .btn-primary, .btn-bayar, .btn-cart, .btn-ok, .btn-search,
.faq-wa, .btn-wa, .drawer-cta, .ft-wa {
  background: var(--gold);
  border-color: var(--gold);
  color: #4f0f0f;
  font-weight: 800;
}
.btn:hover, .btn-primary:hover, .btn-bayar:hover, .btn-cart:hover, .btn-ok:hover, .btn-search:hover,
.faq-wa:hover, .btn-wa:hover, .drawer-cta:hover {
  background: #fde047;
  border-color: #fde047;
  color: #4f0f0f;
}
.btn-ghost, .btn-soft, .btn-wa-bukti {
  background: #fff;
  border-color: var(--garis);
  color: #8f1d1d;
  font-weight: 700;
}
.btn-ghost:hover, .btn-soft:hover, .btn-wa-bukti:hover {
  background: var(--ivory-2);
  border-color: var(--gold);
  color: #8f1d1d;
}
.btn-danger { background: #fff; border-color: #f0cfcf; color: #8f1d1d; }

/* chip / saringan kategori */
.chip { background: #fff; border-color: var(--garis); color: var(--teks-2); }
.chip:hover { background: var(--ivory-2); border-color: var(--gold); color: #8f1d1d; }
.chip.active, .chip.is-active { background: var(--maroon); border-color: var(--maroon); color: #fff8ee; }
.chip.active:hover, .chip.is-active:hover { background: var(--maroon-tua); border-color: var(--maroon-tua); }
.cat-icon { background: var(--ivory-2); color: var(--maroon); }
.cat-item.active .cat-icon { background: var(--maroon); color: var(--gold); }
.cat-item.active { border-color: var(--gold); }

/* kartu produk gaya retail (redesign.css) */
.kartu-produk { background: #fff; border-color: var(--garis); border-radius: 16px; }
.kartu-produk:hover { border-color: rgba(105, 20, 20, 0.3); box-shadow: 0 14px 30px rgba(105, 20, 20, 0.12); }
.kartu-kategori { color: var(--gold-tua); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; }
.kartu-lencana { background: var(--gold); border-color: var(--gold); color: #4f0f0f; font-weight: 800; }
.bagian-eyebrow, .eyebrow, .kategori-eyebrow { color: var(--gold-tua); letter-spacing: 0.18em; }
.bagian-tautan { color: #8f1d1d; font-weight: 700; }

/* ── 8. Banner promo: marun dengan kode emas ───────────────────────────── */
.cl-promo-kartu {
  color: #fff8ee;
  background:
    radial-gradient(420px 300px at 92% 8%, rgba(250, 204, 21, 0.18), transparent 62%),
    linear-gradient(120deg, #741717 0%, #691414 52%, #4f0f0f 100%);
  border-radius: 22px;
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.6);
}
.cl-promo-kartu::after { border-color: rgba(250, 204, 21, 0.1); }
.cl-promo-judul { color: #fff8ee; }
.cl-promo-ket, .cl-promo-syarat { color: rgba(255, 248, 238, 0.74); }
.cl-promo-kode {
  background: var(--gold);
  color: #4f0f0f;
  border: 0;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.cl-salin { background: transparent; border-color: rgba(255, 248, 238, 0.4); color: #fff8ee; font-weight: 700; }
.cl-salin:hover { background: rgba(255, 248, 238, 0.14); border-color: var(--gold); color: var(--gold); }
.cl-lencana, .cl-lencana-terracotta { background: var(--gold); color: #4f0f0f; font-weight: 800; }
.cl-tombol-garis { border-color: rgba(255, 248, 238, 0.45); color: #fff8ee; font-weight: 700; }
.cl-tombol-garis:hover { background: rgba(255, 248, 238, 0.12); border-color: var(--gold); color: var(--gold); }

/* ── 9. Cerita, statistik, testimoni, FAQ ──────────────────────────────── */
.cl-stat b { color: #8f1d1d; font-weight: 800; }
.cl-stat span { color: var(--teks-2); }
.cl-testi-kartu { background: #fff; border: 1px solid var(--garis); border-radius: 18px; }
.cl-testi-bintang { color: #eab308; }
.cl-testi-teks { color: var(--teks); font-weight: 600; }
.cl-faq-list { background: #fff; border-color: var(--garis); }
.cl-faq-item[open] .cl-faq-q, .faq-item[open] .faq-q { color: #8f1d1d; }
.cl-faq-kaki { color: var(--teks-2); }

/* ── 10. Footer marun gelap ────────────────────────────────────────────── */
.site-footer { background: #4f0f0f; border-top: 0; }
.ft-brand, .ft-judul { color: #fff8ee; }
.ft-brand::before { background: var(--gold); }
.ft-desc, .ft-jam, .ft-list a, .ft-list span { color: rgba(255, 248, 238, 0.74); }
.ft-list a:hover { color: var(--gold); }
.ft-wa {
  background: transparent;
  border-color: rgba(250, 204, 21, 0.6);
  color: var(--gold);
  font-weight: 700;
}
.ft-wa:hover { background: var(--gold); border-color: var(--gold); color: #4f0f0f; }
.ft-bawah { border-top-color: rgba(255, 248, 238, 0.18); }
.ft-copy, .ft-bawah a { color: rgba(255, 248, 238, 0.6); }
.ft-bawah a:hover { color: var(--gold); }

/* ── 11. Navigasi bawah (HP) ───────────────────────────────────────────── */
.bottom-nav { background: rgba(255, 253, 249, 0.98); border-top: 1px solid var(--garis); }
.nav-btn.active, .nav-btn[aria-current="page"] { color: #8f1d1d; }
.nav-dot { background: var(--gold); }
.nav-count { background: #8f1d1d; color: #fff8ee; }

/* tombol WhatsApp mengapung tetap hijau (seperti tombol chat di situs rujukan) */
.cl-wa { background: #22c55e; }
.cl-wa:hover { background: #16a34a; }

/* ── 12. Formulir & halaman lain: tepi fokus emas ──────────────────────── */
.field input:focus, .field select:focus, .field textarea:focus,
.checkout-block input:focus, .checkout-block textarea:focus, .checkout-block select:focus {
  border-color: #8f1d1d;
  box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.3);
}
.promo-tag { background: var(--gold); color: #4f0f0f; }
.notice-success, .notice-warning, .promo-terpakai { background: #fdf6dc; border-color: var(--gold); color: #6b4a00; }
.antre-big, .antre-num { color: #8f1d1d; }
.remah-kini { color: #8f1d1d; }
.detail-main-photo { border-color: var(--garis); box-shadow: 0 12px 30px rgba(105, 20, 20, 0.08); }

/* ── 13. HP: beri ruang untuk navigasi bawah yang menempel ─────────────── */
/* Tanpa ini, baris copyright footer tertutup navigasi bawah (61 px). */
@media (max-width: 560px) {
  .site-footer { padding-bottom: 84px; }
}

/* Slogan kecil di bawah nama merek pada footer */
.ft-brand { flex-wrap: wrap; }
.ft-slogan {
  flex: 1 0 100%;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 248, 238, 0.55);
  margin-top: 2px;
}