/* ============================================================
   60-DALAM.CSS — halaman dalam: jurnal, artikel, pencarian, 404,
   toko, dan halaman produk.
   Dimuat setelah 50-halaman. Semua kelas baru; tidak ada selector
   lama yang ditimpa.
   ============================================================ */

:root {
  /* Tinggi header saat tidak menyusut: ikon 46px + padding blok 2 × 24px. */
  --sa-header-h: 94px;
  --sa-header-h-kecil: 70px;
}

/* ============================================================
   PERBAIKAN: .sa-chapter--offset
   Kelas ini dipakai sembilan template (toko, produk, arsip, artikel,
   pencarian, halaman, indeks) tapi tidak pernah didefinisikan di CSS
   mana pun. Header ber-position:fixed, jadi baris pertama setiap
   halaman dalam masuk ke bawah header dan judulnya terpotong.
   ============================================================ */

.sa-chapter--offset {
  padding-top: calc(var(--sa-header-h) + var(--sa-y-rapat));
}

@media (min-width: 1024px) {
  .sa-chapter--offset { padding-top: calc(var(--sa-header-h) + var(--sa-y)); }
}

/* ============================================================
   KEPALA HALAMAN DALAM
   ============================================================ */

.sa-dalam__kepala { margin-bottom: var(--sa-space-9); }

.sa-dalam__kepala h1 {
  font-size: var(--sa-fs-h2);
  line-height: .98;
  max-width: 20ch;
}

.sa-dalam__kepala .sa-lead { margin-top: var(--sa-space-5); }

/* Remah roti */
.sa-remah {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sa-space-2);
  list-style: none;
  margin: 0 0 var(--sa-space-5);
  padding: 0;
  font-family: var(--sa-font-display);
  font-variation-settings: 'wdth' 70, 'wght' 600;
  font-size: var(--sa-fs-label);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--sa-fg-muted);
}

.sa-remah a { text-decoration: none; }
.sa-remah a:hover { text-decoration: underline; }
.sa-remah li + li::before { content: '·'; margin-inline-end: var(--sa-space-2); }
.sa-remah [aria-current='page'] { color: var(--sa-fg); }

/* ============================================================
   KISI KARTU — dipakai jurnal, pencarian, arsip
   Menggantikan .sa-paket__grid yang sebelumnya dipakai ulang dengan
   grid-template-columns ditulis inline di atribut style.
   ============================================================ */

.sa-kisi {
  display: grid;
  gap: var(--sa-space-7);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 680px)  { .sa-kisi { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sa-kisi { grid-template-columns: repeat(3, 1fr); } }

/* Ritme editorial: kolom tengah turun satu modul, sama seperti di beranda. */
@media (min-width: 1040px) {
  .sa-kisi > :nth-child(3n + 2) { transform: translateY(var(--sa-modul)); }
}

/* ============================================================
   JURNAL — kartu artikel
   ============================================================ */

.sa-tulis {
  display: flex;
  flex-direction: column;
  gap: var(--sa-space-4);
}

.sa-tulis__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--sa-surface);
}

.sa-tulis__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sa-dur-ui) var(--sa-ease-out);
}

.sa-tulis:hover .sa-tulis__media img { transform: scale(1.03); }

.sa-tulis__judul {
  font-size: var(--sa-fs-h3);
  font-variation-settings: 'wdth' 95, 'wght' 700;
  line-height: 1.12;
}

.sa-tulis__judul a { text-decoration: none; }
.sa-tulis__judul a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

.sa-tulis__ringkas {
  color: var(--sa-fg-muted);
  font-size: var(--sa-fs-body-sm);
  max-width: 42ch;
  margin: 0;
}

/* ============================================================
   ARTIKEL
   ============================================================ */

.sa-artikel__kepala { margin-bottom: var(--sa-space-8); }

.sa-artikel__kepala h1 {
  font-size: var(--sa-fs-h2);
  line-height: .98;
  margin-block: var(--sa-space-4);
}

.sa-artikel__sampul {
  margin: 0 0 var(--sa-space-8);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--sa-surface);
}

.sa-artikel__sampul img { width: 100%; height: 100%; object-fit: cover; }

.sa-artikel__isi { font-size: var(--sa-fs-body); line-height: var(--sa-lh-body); }
.sa-artikel__isi > * + * { margin-top: var(--sa-space-5); }
.sa-artikel__isi p { max-width: var(--sa-measure); }

.sa-artikel__isi h2 {
  font-size: var(--sa-fs-h3);
  margin-top: var(--sa-space-8);
}

.sa-artikel__isi h3 {
  font-size: 1.25rem;
  font-variation-settings: 'wdth' 95, 'wght' 700;
  margin-top: var(--sa-space-7);
}

.sa-artikel__isi ul,
.sa-artikel__isi ol {
  max-width: var(--sa-measure);
  padding-inline-start: var(--sa-space-6);
  list-style: revert;
}

.sa-artikel__isi li + li { margin-top: var(--sa-space-2); }
.sa-artikel__isi img { margin-block: var(--sa-space-6); }

.sa-artikel__isi blockquote {
  margin: var(--sa-space-7) 0;
  padding-inline-start: var(--sa-space-6);
  border-inline-start: var(--sa-garis-tebal) solid var(--sa-cahaya);
  font-size: var(--sa-fs-lead);
  line-height: 1.4;
}

.sa-artikel__kaki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-space-5);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sa-space-9);
  padding-top: var(--sa-space-6);
  border-top: var(--sa-garis) solid var(--sa-line);
}

/* ============================================================
   PENCARIAN & KOSONG
   ============================================================ */

.sa-kosong {
  display: grid;
  gap: var(--sa-space-6);
  max-width: 52ch;
}

.sa-kosong__cari { max-width: 460px; }

/* 404 — dibiarkan sunyi. Satu angka besar, satu kalimat, dua jalan keluar. */
.sa-hilang {
  min-height: 72svh;
  display: flex;
  align-items: center;
}

.sa-hilang__angka {
  font-family: var(--sa-font-display);
  font-variation-settings: 'wdth' 62, 'wght' 800;
  font-size: var(--sa-fs-mega);
  line-height: .82;
  letter-spacing: -.04em;
  color: var(--sa-cahaya);
  margin: 0 0 var(--sa-space-6);
}

.sa-hilang__isi { display: grid; gap: var(--sa-space-6); max-width: 46ch; }

/* ============================================================
   TOKO — kepala arsip & penyaring
   ============================================================ */

.sa-toko__kepala { margin-bottom: var(--sa-space-8); }

.sa-toko__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sa-space-5);
  padding-block: var(--sa-space-5);
  border-block: var(--sa-garis) solid var(--sa-line);
  margin-bottom: var(--sa-space-8);
}

.sa-toko__kat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ============================================================
   PRODUK — kotak beli
   ============================================================ */

.sa-beli__percaya {
  display: grid;
  gap: var(--sa-space-4);
  margin-top: var(--sa-space-6);
  padding-top: var(--sa-space-5);
  border-top: var(--sa-garis) solid var(--sa-line);
}

.sa-beli__cert {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sa-beli__cert li { display: grid; gap: 2px; }

/* ---------- Cerita produk ---------- */

.sa-prod-cerita__judul {
  font-size: var(--sa-fs-h2);
  line-height: .98;
  max-width: 18ch;
}

.sa-prod-cerita__isi { max-width: var(--sa-measure); }
.sa-prod-cerita__isi p { color: var(--sa-fg-muted); }

/* ---------- Bahan ---------- */

.sa-prod-bahan { margin-bottom: var(--sa-space-8); }

.sa-prod-bahan__daftar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- Spesifikasi ---------- */

.sa-prod-spek {
  display: grid;
  gap: 0;
  margin: 0;
}

.sa-prod-spek__baris {
  display: grid;
  gap: var(--sa-space-2);
  padding-block: var(--sa-space-5);
  border-top: var(--sa-garis) solid var(--sa-line);
}

.sa-prod-spek__baris:last-child { border-bottom: var(--sa-garis) solid var(--sa-line); }

@media (min-width: 768px) {
  .sa-prod-spek__baris {
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    gap: var(--sa-space-6);
    align-items: baseline;
  }
}

.sa-prod-spek__label {
  font-family: var(--sa-font-display);
  font-variation-settings: 'wdth' 70, 'wght' 600;
  font-size: var(--sa-fs-label);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--sa-fg-muted);
  margin: 0;
}

.sa-prod-spek__nilai {
  margin: 0;
  max-width: 52ch;
}

/* ============================================================
   BILAH BELI MENEMPEL
   Tanpa JavaScript bilah ini tetap terlihat, jadi tombol beli tidak
   pernah hilang hanya karena skrip gagal dimuat.
   ============================================================ */

.sa-belibar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--sa-z-sticky);
  background: var(--sa-hitam);
  color: var(--sa-putih-teks);
  padding-block: var(--sa-space-3);
  padding-bottom: calc(var(--sa-space-3) + env(safe-area-inset-bottom));
  border-top: var(--sa-garis) solid var(--sa-kuning);
}

.sa-js .sa-belibar {
  transform: translateY(110%);
  transition: transform var(--sa-dur-ui) var(--sa-ease-out);
}

.sa-js .sa-belibar[data-visible='true'] { transform: none; }

.sa-belibar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sa-space-5);
}

.sa-belibar__ket { display: grid; gap: 2px; min-width: 0; }

.sa-belibar__nama {
  margin: 0;
  font-family: var(--sa-font-display);
  font-variation-settings: 'wdth' 88, 'wght' 700;
  font-size: var(--sa-fs-body-sm);
  line-height: 1.2;
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sa-belibar__harga {
  margin: 0;
  font-size: var(--sa-fs-body-sm);
  color: var(--sa-abu-gelap);
}

@media (max-width: 520px) {
  .sa-belibar__harga { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sa-js .sa-belibar { transition: none; }
}

/* Bilah menutupi kaki halaman; beri ruang agar tidak menimpa isi. */
.single-product .sa-kaki { padding-bottom: calc(var(--sa-y) + 76px); }

/* ---------- Tulisan utama ---------- */

@media (min-width: 1040px) {
  .sa-tulis--utama {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sa-space-8);
    align-items: center;
    transform: none;
    padding-bottom: var(--sa-space-8);
    border-bottom: var(--sa-garis-tebal) solid var(--sa-line);
  }

  .sa-tulis--utama .sa-tulis__media { aspect-ratio: 3 / 2; }
  .sa-tulis--utama .sa-tulis__judul { font-size: var(--sa-fs-h2); line-height: 1; max-width: 16ch; }
  .sa-tulis--utama .sa-tulis__ringkas { font-size: var(--sa-fs-body); max-width: 46ch; }
}

.sa-tulis__isi { display: grid; gap: var(--sa-space-4); align-content: center; }

/* Dua utilitas kecil yang menggantikan atribut style= sisa dari v1.0. */
.sa-toko--alamat { font-style: normal; }
.sa-mb-6 { margin-bottom: var(--sa-space-6); }