/* =========================================================
   JAZMI — SAINS / PRODUK + MEDIA (C13)
   produk-media.css
   Dipakai bersama oleh produk.html dan media.html (dua halaman
   C13 dalam satu paket). Token & pola header/nav/breadcrumb/
   domain-hero/footer/tombol disalin PERSIS dari kontrak C01
   (3.1, 6.1, 4.2), diaudit dari implementasi C11 (Sains Core)
   dan C12 (Astronomi) sebagai referensi terdekat. 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 C13: ragam-grid, produk-grid/
   produk-card, media-grid/media-card, 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 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;
}

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)
   ========================================================= */
.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 HOME — hanya path & is-active
   yang berbeda, sesuai kontrak 4.2 / 6.1)
   ========================================================= */
.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 C11/C12)
   ========================================================= */
.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 C11/C12)
   ========================================================= */
.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 C09/C11/C12 ".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;
}

.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 C13 — RAGAM (kategori/ringkasan statis,
   dipakai di produk.html untuk "Ragam Produk" dan di media.html
   untuk "Ragam Media"). Kartu bersifat informatif, bukan link,
   supaya tidak membuat href="#" tanpa tujuan nyata.
   ========================================================= */
.ragam-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: clamp(1.5rem, 4vw, 2rem);
}
@media (min-width: 640px) {
  .ragam-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .ragam-grid { grid-template-columns: repeat(4, 1fr); }
}

.ragam-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);
}
.ragam-card-title {
  font-size: 1.02rem;
  font-weight: 600;
}
.ragam-card-desc {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0;
  flex-grow: 1;
}

/* =========================================================
   Komponen lokal baru C13 — PRODUK SAINS (produk-grid/produk-card)
   Dipakai di produk.html, diisi via fetch data demo lokal C13.
   Kartu bersifat informatif (tanpa tombol beli/checkout — 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;
}
.produk-card-catatan {
  margin-top: 0.3rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
  font-size: 0.83rem;
  color: var(--ink-faint);
  font-style: italic;
}

/* =========================================================
   Komponen lokal baru C13 — MEDIA SAINS (media-grid/media-card)
   Dipakai di media.html, diisi via fetch data demo lokal C13.
   ========================================================= */
.media-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .media-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .media-grid { grid-template-columns: repeat(3, 1fr); }
}

.media-card {
  padding: 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.media-card-tipe {
  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;
}
.media-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
}
.media-card-desc {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 0;
}
.media-card-status {
  margin-top: 0.3rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brass);
}

/* =========================================================
   Komponen lokal baru C13 — RELASI (hubungan ke halaman lain
   dalam C13 dan ke sistem global, mis. Artikel). Dipakai di
   penutup produk.html dan media.html.
   ========================================================= */
.relasi-block {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* =========================================================
   Footer (disalin dari HOME — 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, 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; }
}