/* ============================================================
   30-SECTIONS.CSS — rev.3
   ============================================================ */

.sa-chapter{
  position: relative;
  background: var(--sa-bg);
  color: var(--sa-fg);
  padding-block: var(--sa-y);
  isolation: isolate;
}
.sa-chapter--rapat  { padding-block: var(--sa-y-rapat); }
.sa-chapter--lapang { padding-block: var(--sa-y-lapang); }

/* ---------- PAHATAN 60° ---------- */
.sa-chapter--pahat{
  clip-path: polygon(var(--sa-pahat-x) 0, 100% 0, 100% 100%, 0 100%, 0 var(--sa-pahat));
  margin-top: calc(var(--sa-pahat) * -1);
  padding-top: calc(var(--sa-y) + var(--sa-pahat));
  z-index: 1;
}
.sa-chapter--pahat-ka{
  clip-path: polygon(0 0, calc(100% - var(--sa-pahat-x)) 0, 100% var(--sa-pahat), 100% 100%, 0 100%);
  margin-top: calc(var(--sa-pahat) * -1);
  padding-top: calc(var(--sa-y) + var(--sa-pahat));
  z-index: 1;
}
.sa-chapter--pahat.sa-chapter--rapat,
.sa-chapter--pahat-ka.sa-chapter--rapat  { padding-top: calc(var(--sa-y-rapat)  + var(--sa-pahat)); }
.sa-chapter--pahat.sa-chapter--lapang,
.sa-chapter--pahat-ka.sa-chapter--lapang { padding-top: calc(var(--sa-y-lapang) + var(--sa-pahat)); }

/* ============================================================
   KOMPOSISI EDITORIAL — 12 kolom
   ============================================================ */
.sa-ed{ display: grid; gap: var(--sa-space-7); }
.sa-ed > * { min-width: 0; }

@media (min-width: 900px){
  .sa-ed{ grid-template-columns: repeat(12, 1fr); gap: var(--sa-space-8) var(--sa-space-7); }
  .sa-ed--kiri  > :nth-child(1){ grid-column: 1 / 6;  }
  .sa-ed--kiri  > :nth-child(2){ grid-column: 7 / 13; transform: translateY(var(--sa-modul)); }
  .sa-ed--kanan > :nth-child(1){ grid-column: 6 / 13; }
  .sa-ed--kanan > :nth-child(2){ grid-column: 1 / 5;  transform: translateY(calc(var(--sa-modul) * 2)); }
  .sa-ed--jorok > *{ grid-column: 3 / 12; }
  .sa-ed--tepi  > *{ grid-column: 1 / 9;  }
}

.sa-head{ max-width: 16ch; margin-bottom: var(--sa-space-9); }
.sa-head--wide{ max-width: 26ch; }
.sa-headrow{
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--sa-space-6);
  margin-bottom: var(--sa-space-9);
}
.sa-headrow .sa-head{ margin-bottom: 0; }

/* CAHAYA */
.sa-cahaya{ color: var(--sa-cahaya); }
.sa-cahaya-blok{
  display: inline-block;
  background: var(--sa-kuning);
  color: var(--sa-hitam);
  padding: var(--sa-space-2) var(--sa-space-4);
  clip-path: polygon(calc(var(--sa-modul)*.3) 0, 100% 0, 100% 100%, 0 100%, 0 100%);
}

/* ============================================================
   BAB 1 — AMBANG
   ============================================================ */
.sa-ambang{
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-top: calc(96px + var(--sa-space-8));
  padding-bottom: var(--sa-y-rapat);
  overflow: hidden;
}
.sa-ambang__inner{ display: grid; gap: var(--sa-space-8); width: 100%; }
.sa-ambang h1{ font-size: var(--sa-fs-mega); line-height: var(--sa-lh-mega); margin-bottom: var(--sa-space-6); }
.sa-ambang__copy{ max-width: 15ch; }
.sa-ambang__actions{ display: flex; flex-wrap: wrap; gap: var(--sa-space-4); margin-top: var(--sa-space-7); }

.sa-iris{ position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.sa-iris__stage{ width: 100%; height: 100%; }
.sa-iris__keping{ transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
[data-iris-run="true"] .sa-iris__keping{
  animation: sa-fan var(--sa-dur-story) var(--sa-ease-cut) forwards;
  animation-delay: calc(var(--i) * 28ms + 200ms);
}
@keyframes sa-fan{
  from{ opacity:0; transform: translate(var(--fx,0),0) rotate(0deg) scale(.7); }
  to  { opacity:1; transform: translate(0,0) rotate(var(--r,0deg)) scale(1); }
}
.sa-iris__blade{
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(calc(90deg - var(--sa-sudut)),
    transparent 47%, var(--sa-kuning) 49.5%, var(--sa-kuning) 50.5%, transparent 53%);
}
[data-iris-run="true"] .sa-iris__blade{ animation: sa-blade 460ms var(--sa-ease-cut) forwards; }
@keyframes sa-blade{
  0%{ opacity:0; transform: translateX(-65%) } 30%{ opacity:1 }
  100%{ opacity:0; transform: translateX(65%) }
}
.sa-scrollcue{ display: flex; align-items: center; gap: var(--sa-space-3); margin-top: var(--sa-space-8); }
.sa-scrollcue span{ width: var(--sa-modul); height: var(--sa-garis); background: var(--sa-fg); }

@media (min-width: 900px){
  .sa-ambang{ align-items: center; }
  .sa-ambang__inner{ grid-template-columns: repeat(12,1fr); align-items: center; }
  .sa-ambang__copy{ grid-column: 1 / 8; }
  .sa-iris{ grid-column: 8 / 13; transform: translateY(var(--sa-modul)); }
}

/* ============================================================
   BAB 2 — BUNYI
   ============================================================ */
.sa-bunyi{ min-height: 78vh; display: grid; align-items: center; overflow: hidden; }
.sa-bunyi__quote{
  font-family: var(--sa-font-display);
  font-variation-settings: 'wdth' 118, 'wght' 800;
  font-size: var(--sa-fs-h2); line-height: var(--sa-lh-h2);
  letter-spacing: -.03em; max-width: 15ch; text-wrap: balance;
}
.sa-bunyi__media{ width: 100%; }
@media (min-width: 900px){
  .sa-bunyi .sa-container{ display: grid; grid-template-columns: repeat(12,1fr); gap: var(--sa-space-8); align-items: center; }
  .sa-bunyi__media{ grid-column: 1 / 7; }
  .sa-bunyi__quote{ grid-column: 8 / 13; transform: translateY(calc(var(--sa-modul) * -1)); }
  .sa-bunyi__aksi { grid-column: 8 / 13; }
}

/* ============================================================
   BAB 3 — ASAL
   ============================================================ */
.sa-asal__geo{
  font-family: var(--sa-font-display);
  font-variation-settings:'wdth' 70,'wght' 700;
  font-variant-numeric: tabular-nums;
  font-size: var(--sa-fs-label); letter-spacing: .2em; text-transform: uppercase;
  display: inline-block; margin-top: var(--sa-space-6);
  padding: var(--sa-space-3) var(--sa-space-5);
  background: var(--sa-fg); color: var(--sa-bg);
}
.sa-asal__trio{ display: grid; gap: var(--sa-space-6); }
@media (min-width: 768px){
  .sa-asal__trio{ grid-template-columns: repeat(3,1fr); align-items: start; }
  .sa-asal__trio > :nth-child(2){ transform: translateY(var(--sa-modul)); }
  .sa-asal__trio > :nth-child(3){ transform: translateY(calc(var(--sa-modul) * 2)); }
}

/* ============================================================
   BAB 4 — TANGAN
   ============================================================ */
.sa-tangan__quote{
  font-family: var(--sa-font-display);
  font-variation-settings:'wdth' 105,'wght' 750;
  font-size: clamp(1.75rem, 4vw, 3.25rem); line-height: 1.06;
  letter-spacing: -.025em; max-width: 20ch; margin: 0;
}
.sa-tangan__orang{
  display: grid; grid-auto-flow: column; grid-auto-columns: 66%;
  gap: var(--sa-space-5); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--sa-space-4);
}
.sa-tangan__orang > *{ scroll-snap-align: start; }
@media (min-width: 900px){
  .sa-tangan__orang{
    grid-auto-flow: row; grid-auto-columns: unset;
    grid-template-columns: repeat(4,1fr); overflow: visible; align-items: start;
  }
  .sa-tangan__orang > :nth-child(even){ transform: translateY(var(--sa-modul)); }
}

/* ============================================================
   BAB 5 — BUMBU
   ============================================================ */
.sa-bumbu__kolom{ display: grid; gap: var(--sa-space-7); margin-top: var(--sa-space-9); }
.sa-bumbu__kolom > div{ padding-top: var(--sa-space-5); border-top: var(--sa-garis-tebal) solid var(--sa-line); }
.sa-bumbu__level{ display: flex; flex-wrap: wrap; gap: var(--sa-space-2); margin-top: var(--sa-space-6); }
@media (min-width: 768px){
  .sa-bumbu__kolom{ grid-template-columns: repeat(3,1fr); }
  .sa-bumbu__kolom > :nth-child(2){ transform: translateY(var(--sa-modul)); }
  .sa-bumbu__kolom > :nth-child(3){ transform: translateY(calc(var(--sa-modul) * 2)); }
}

/* ============================================================
   BAB 6 — RAK
   ============================================================ */
.sa-rak{ padding-bottom: var(--sa-space-9); }
.sa-rak__stage{ position: relative; }
.sa-rak__track{
  display: grid; grid-auto-flow: column; grid-auto-columns: 74%;
  gap: var(--sa-space-6); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--sa-gutter); padding-bottom: var(--sa-space-5);
  overscroll-behavior-x: contain; align-items: start; list-style:none; margin:0;
}
.sa-rak__track > *{ scroll-snap-align: center; }
.sa-rak__meta{ display: flex; align-items: center; gap: var(--sa-space-5); margin-top: var(--sa-space-6); }
.sa-rak__bar{ flex: 1; height: var(--sa-garis); background: var(--sa-surface); position: relative; max-width: 420px; }
.sa-rak__bar i{ position: absolute; inset: 0 auto 0 0; width: 20%; background: var(--sa-merah); display: block; }
.sa-rak__nav{ display: flex; gap: var(--sa-space-2); }

@media (min-width: 1024px){
  .sa-rak[data-pin="true"]{ padding-top: var(--sa-pahat); padding-bottom: 0; }
  .sa-rak[data-pin="true"] .sa-rak__stage{
    position: sticky; top: 0; height: 100svh;
    display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  }
  .sa-rak[data-pin="true"] .sa-rak__track{
    grid-auto-columns: 360px; overflow: visible; scroll-snap-type: none; will-change: transform;
  }
  .sa-rak[data-pin="true"] .sa-rak__track > :nth-child(even){ transform: translateY(var(--sa-modul)); }
}

/* ============================================================
   BAB 7 — BAWA PULANG
   ============================================================ */
.sa-paket__grid{ display: grid; gap: var(--sa-space-6); list-style:none; margin:0; padding:0; }
@media (min-width: 768px){ .sa-paket__grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1100px){
  .sa-paket__grid{ grid-template-columns: repeat(3,1fr); align-items: start; }
  .sa-paket__grid > :nth-child(3n+2){ transform: translateY(var(--sa-modul)); }
}

/* ============================================================
   BAB 8 — JALAN PULANG
   ============================================================ */
.sa-toko{ display: flex; flex-direction: column; gap: var(--sa-space-5); padding: var(--sa-space-7); background: var(--sa-surface); }
.sa-toko__rows{ display: grid; gap: var(--sa-space-4); }
.sa-toko__row{ display: grid; grid-template-columns: 92px 1fr; gap: var(--sa-space-4); align-items: start; margin:0; }
.sa-jalan__sekitar{ display: grid; gap: var(--sa-space-6); list-style:none; margin:0; padding:0; }
@media (min-width: 768px){
  .sa-jalan__sekitar{ grid-template-columns: repeat(3,1fr); align-items: start; }
  .sa-jalan__sekitar > :nth-child(2){ transform: translateY(var(--sa-modul)); }
}

/* ============================================================
   BAB 9 — KABAR BAIK
   ============================================================ */
.sa-kabar__grid{ display: grid; gap: var(--sa-space-6); list-style:none; margin:0; padding:0; }
.sa-kabar__ugc{ display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sa-space-3); list-style:none; margin:0; padding:0; }
.sa-cert__row{ display: grid; gap: var(--sa-space-4); margin-top: var(--sa-space-9); list-style:none; margin-block:var(--sa-space-9) 0; padding:0; }
@media (min-width: 768px){
  .sa-kabar__grid{ grid-template-columns: repeat(3,1fr); align-items: start; }
  .sa-kabar__grid > :nth-child(2){ transform: translateY(var(--sa-modul)); }
  .sa-kabar__ugc{ grid-template-columns: repeat(4,1fr); }
  .sa-cert__row{ grid-template-columns: repeat(3,1fr); }
}

/* ============================================================
   BAB 10 — BELANJA
   ============================================================ */
.sa-belanja__grid{ display: grid; gap: var(--sa-space-6); list-style:none; margin:0; padding:0; }
.sa-jalur{ display: flex; flex-direction: column; gap: var(--sa-space-5); padding: var(--sa-space-7); background: var(--sa-surface); }
.sa-jalur ul{ display: grid; gap: var(--sa-space-2); font-size: var(--sa-fs-body-sm); list-style:none; margin:0; padding:0; }
.sa-jalur .sa-btn{ margin-top: auto; }
@media (min-width: 768px){
  .sa-belanja__grid{ grid-template-columns: repeat(3,1fr); align-items: start; }
  .sa-belanja__grid > :nth-child(2){ transform: translateY(var(--sa-modul)); }
}

/* ============================================================
   BAB 11 — KAKI / FOOTER
   ============================================================ */
.sa-kaki{ padding-bottom: calc(var(--sa-space-9) + 56px); }
.sa-kaki__lockup{
  font-family: var(--sa-font-display);
  font-variation-settings:'wdth' 118,'wght' 800;
  font-size: var(--sa-fs-hero); line-height: var(--sa-lh-hero);
  letter-spacing: -.035em; margin: 0 0 var(--sa-space-10); max-width: 14ch; text-wrap: balance;
}
.sa-kaki__grid{ display: grid; gap: var(--sa-space-8); }
.sa-kaki__col h3{ font-size: 1rem; margin-bottom: var(--sa-space-5); }
.sa-kaki__col ul{ list-style:none; margin:0; padding:0; }
.sa-kaki__col li{ margin-bottom: var(--sa-space-3); }
.sa-kaki__col a{ font-size: var(--sa-fs-body-sm); text-decoration: none; color: var(--sa-fg-muted); }
.sa-kaki__col a:hover{ color: var(--sa-fg); }
.sa-kaki__legal{
  display: flex; flex-wrap: wrap; gap: var(--sa-space-5); justify-content: space-between;
  margin-top: var(--sa-space-10); padding-top: var(--sa-space-6);
  border-top: var(--sa-garis) solid var(--sa-line);
  font-size: .875rem; color: var(--sa-fg-muted);
}
@media (min-width: 768px) { .sa-kaki__grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px){ .sa-kaki__grid{ grid-template-columns: repeat(4,1fr); } .sa-kaki{ padding-bottom: var(--sa-y); } }