/* =========================================================
   JAZMI — PRODUK GLOBAL (C14)
   produk-global.css
   Token & pola header/nav/breadcrumb/domain-hero/tombol/footer
   disalin PERSIS dari kontrak C01 (3.1, 6.1, 4.2), diaudit dari
   implementasi C13 (Sains Produk/Media) sebagai referensi
   terdekat yang tersedia di workspace. Tidak ada mekanisme
   import lintas file di situs statis ini, sehingga blok token
   disalin ulang di sini sesuai instruksi 3.3.
   Komponen baru lokal khusus C14: kategori-grid, filter-bar,
   produk-grid/produk-card (versi global, dengan tombol detail),
   modal detail produk, relasi-block.
   ========================================================= */
:root {
  /* Warna — "zamrud" (emerald) sebagai jangkar identitas */
  --bg: #F6F1E4;
  --bg-alt: #EEE6D2;
  --surface: #FFFFFF;
  --ink: #1E2A22;
  --ink-soft: #4B5A50;
  --ink-faint: #8A8672;

  --emerald-deep: #0F3D2E;
  --emerald: #1C5C42;
  --emerald-soft: #2F7A57;

  --brass: #A9812F;
  --brass-soft: #D8C08A;
  --brass-line: #D9CBA3;

  --line: #DDD3B8;
  --line-soft: #E9E1CC;

  /* Tipografi */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-arabic: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif;

  /* Skala & ritme */
  --radius: 4px;
  --shadow-soft: 0 1px 2px rgba(15, 61, 46, 0.06), 0 8px 24px -12px rgba(15, 61, 46, 0.18);
  --max-width: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   Reset dasar (disalin dari HOME/C13 agar konsisten)
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-modal-open { overflow: hidden; }

img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; }

h1, h2, h3 { font-family: var(--font-display); margin: 0; color: var(--emerald-deep); }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--emerald-deep);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
}

/* =========================================================
   Layout util (disalin dari HOME/C13)
   ========================================================= */
.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: clamp(2.75rem, 6vw, 5rem) 0;
}
.section-alt {
  background: var(--bg-alt);
}

.section-head {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 640px;
}
.section-eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.5rem;
}
.section-title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 600;
  line-height: 1.25;
}
.section-desc {
  color: var(--ink-soft);
  margin: 0.6rem 0 0;
  font-size: 0.98rem;
}

/* =========================================================
   Header / Navigasi (disalin dari kontrak 6.1 — hanya path &
   is-active yang berbeda)
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246, 241, 228, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.85rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.wordmark-mark {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: var(--emerald-deep);
  color: var(--brass-soft);
  font-family: var(--font-arabic);
  font-size: 1.2rem;
  flex-shrink: 0;
}
.wordmark-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.wordmark-main {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--emerald-deep);
  letter-spacing: 0.02em;
}
.wordmark-sub {
  font-size: 0.68rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.4rem;
}
.nav-toggle-bar {
  display: block;
  height: 2px;
  background: var(--emerald-deep);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.primary-nav {
  position: fixed;
  inset: 4.1rem 0 0 0;
  background: var(--bg);
  padding: 1.5rem var(--gutter) 2rem;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  overflow-y: auto;
}
.primary-nav.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.primary-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.primary-nav a {
  display: block;
  padding: 0.85rem 0.25rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--emerald-deep);
  border-bottom: 1px solid var(--line-soft);
}
.primary-nav a.is-active {
  color: var(--brass);
}

@media (min-width: 860px) {
  .nav-toggle { display: none; }
  .primary-nav {
    position: static;
    inset: auto;
    background: transparent;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: visible;
  }
  .primary-nav ul {
    flex-direction: row;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.75rem);
  }
  .primary-nav a {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0.3rem 0.1rem;
    border-bottom: 2px solid transparent;
  }
  .primary-nav a:hover,
  .primary-nav a.is-active {
    color: var(--emerald-deep);
    border-bottom-color: var(--brass);
  }
}

/* =========================================================
   Breadcrumb (disalin pola dari C13)
   ========================================================= */
.breadcrumb {
  border-bottom: 1px solid var(--line-soft);
}
.breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  font-size: 0.82rem;
  color: var(--ink-faint);
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--ink-soft); font-weight: 600; }
.breadcrumb a:hover { color: var(--emerald-deep); }
.breadcrumb-sep { color: var(--ink-faint); }
.breadcrumb [aria-current="page"] { color: var(--emerald-deep); font-weight: 600; }

/* =========================================================
   Hero Ranah (disalin pola ".domain-hero" dari C13)
   ========================================================= */
.domain-hero {
  padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(1.75rem, 4vw, 2.5rem);
}
.domain-hero-inner {
  max-width: 700px;
}
.domain-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.9rem;
}
.domain-title {
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--emerald-deep);
}
.domain-desc {
  margin: 1rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.6vw, 1.08rem);
  max-width: 62ch;
}

/* ---------------------------------------------------------
   Tombol (disalin pola dari C13 ".btn")
   --------------------------------------------------------- */
.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn-outline {
  color: var(--emerald-deep);
  border: 1.5px solid var(--emerald);
  background: transparent;
}
.btn-outline:hover {
  background: var(--emerald-deep);
  border-color: var(--emerald-deep);
  color: #fff;
}
.btn-text {
  padding: 0.45rem 0;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--emerald);
  border-bottom: 1.5px solid transparent;
}
.btn-text:hover {
  color: var(--emerald-deep);
  border-bottom-color: var(--brass);
}

.demo-badge {
  display: inline-block;
  margin: 0 0 1.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--emerald-deep);
  background: var(--surface);
  border: 1px solid var(--brass-line);
  border-radius: var(--radius);
  padding: 0.35rem 0.75rem;
}

.data-empty-note {
  color: var(--ink-faint);
  font-size: 0.92rem;
  font-style: italic;
}

/* =========================================================
   Komponen lokal baru C14 — KATEGORI (statis, informatif,
   dipakai di "Ragam Kategori")
   ========================================================= */
.kategori-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: clamp(1.5rem, 4vw, 2rem);
}
@media (min-width: 640px) {
  .kategori-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .kategori-grid { grid-template-columns: repeat(4, 1fr); }
}

.kategori-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--emerald);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.kategori-card-title {
  font-size: 1.02rem;
  font-weight: 600;
}
.kategori-card-desc {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0;
  flex-grow: 1;
}

/* =========================================================
   Komponen lokal baru C14 — FILTER KATEGORI (dipakai di
   "Semua Produk", filter sisi klien tanpa reload halaman)
   ========================================================= */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.5rem;
}
.filter-btn {
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.filter-btn:hover {
  border-color: var(--emerald);
  color: var(--emerald-deep);
}
.filter-btn[aria-pressed="true"] {
  background: var(--emerald-deep);
  border-color: var(--emerald-deep);
  color: #fff;
}

/* =========================================================
   Komponen lokal baru C14 — PRODUK GLOBAL (produk-grid/
   produk-card). Dipakai di "Produk Pilihan" dan "Semua Produk",
   diisi via fetch data demo lokal C14. Kartu bersifat informatif
   dengan tombol "Lihat Detail" (membuka modal ringan) — tanpa
   tombol beli/checkout, karena sistem transaksi belum menjadi
   bagian MVP (lihat OPEN #6 kontrak C01).
   ========================================================= */
.produk-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .produk-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .produk-grid { grid-template-columns: repeat(3, 1fr); }
}

.produk-card {
  padding: 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.produk-card-kategori {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emerald-deep);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
}
.produk-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
}
.produk-card-desc {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 0;
  flex-grow: 1;
}
.produk-card-pilihan {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
}
.produk-card-aksi {
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
}

/* =========================================================
   Komponen lokal baru C14 — MODAL DETAIL PRODUK
   ========================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 61, 46, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  z-index: 500;
}
.modal-overlay[hidden] { display: none; }

.modal-panel {
  background: var(--surface);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 1.75rem var(--gutter) 2.25rem;
  box-shadow: var(--shadow-soft);
  position: relative;
}
@media (min-width: 640px) {
  .modal-overlay { align-items: center; padding: 1.5rem; }
  .modal-panel { border-radius: var(--radius); padding: 2rem 2.25rem 2.25rem; }
}

.modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: 1.1rem;
}
.modal-close:hover { background: var(--bg-alt); color: var(--emerald-deep); }

.modal-kategori {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emerald-deep);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  margin: 0 0 0.75rem;
}
.modal-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  padding-right: 2rem;
}
.modal-desc {
  color: var(--ink-soft);
  font-size: 0.97rem;
  margin: 0 0 1rem;
}
.modal-info {
  font-size: 0.86rem;
  color: var(--ink-faint);
  font-style: italic;
  padding: 0.75rem 0;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  margin: 0 0 1rem;
}
.modal-cta {
  font-size: 0.88rem;
  color: var(--ink-soft);
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin: 0;
}
.modal-cta strong { color: var(--emerald-deep); }

/* =========================================================
   Komponen lokal baru C14 — RELASI (hubungan ke halaman produk
   domain yang sudah ada, mis. Kesehatan & Sains)
   ========================================================= */
.relasi-block {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* =========================================================
   Footer (disalin dari HOME/C13 — hanya path yang berbeda)
   ========================================================= */
.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  padding: clamp(2rem, 5vw, 3rem) 0;
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.footer-identity {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.footer-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--emerald-deep);
}
.footer-sub {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.88rem;
  font-weight: 600;
}
.footer-nav a { color: var(--ink-soft); }
.footer-nav a:hover { color: var(--emerald-deep); }
.footer-copy {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

@media (min-width: 640px) {
  .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .footer-copy { width: 100%; order: 3; }
}

/* =========================================================
   Reveal-on-scroll (disalin dari HOME/C13, dihormati
   prefers-reduced-motion)
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}


/* C19 — Selected Option C mobile navigation, propagated to main menu pages */
@media (max-width: 860px) {
  .primary-nav {
    min-height: calc(100vh - 4.1rem);
    padding: 1.5rem var(--gutter) 3rem;
    background: var(--surface);
    border-top: 2px solid var(--brass-line);
    box-shadow: var(--shadow-soft);
  }

  .primary-nav ul {
    gap: 0.35rem;
  }

  .primary-nav a {
    min-height: 64px;
    display: flex;
    align-items: center;
    padding: 1rem 0.9rem;
    font-size: 1.38rem;
  }

  .primary-nav a.is-active {
    background: var(--bg-alt);
    border-left: 3px solid var(--brass);
    padding-left: calc(0.9rem - 3px);
  }
}