/* ============================================================
   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)); }

/* Dynamic padding reduction when white sections follow white sections */
.sa-env--putih + .sa-env--putih {
  padding-top: var(--sa-space-7);
}
.sa-env--putih + .sa-env--putih.sa-chapter--pahat,
.sa-env--putih + .sa-env--putih.sa-chapter--pahat-ka {
  padding-top: calc(var(--sa-space-7) + (var(--sa-pahat) * 0.5));
}

/* ============================================================
   KOMPOSISI EDITORIAL — 12 kolom
   ============================================================ */
.sa-ed{ display: grid; gap: var(--sa-space-6); }
.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(clamp(0px, 1.2vw, 16px)); }
  .sa-ed--kanan > :nth-child(1){ grid-column: 6 / 13; }
  .sa-ed--kanan > :nth-child(2){ grid-column: 1 / 5;  transform: translateY(clamp(0px, 1.5vw, 20px)); }
  .sa-ed--jorok > *{ grid-column: 3 / 12; }
  .sa-ed--tepi  > *{ grid-column: 1 / 9;  }
}

.sa-head{ max-width: 24ch; margin-bottom: var(--sa-space-7); }
.sa-head--wide{ max-width: 34ch; }
.sa-headrow{
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: clamp(12px, 2.4vw, 24px);
  margin-bottom: var(--sa-space-7);
  width: 100%;
  overflow: visible;
}
.sa-headrow .sa-head{ max-width: 100%; margin-bottom: 0; overflow: visible; }
.sa-headrow h2{ max-width: 100%; overflow-wrap: break-word; }
.sa-headrow .sa-btn{ flex-shrink: 0; max-width: 100%; }

/* 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-hero); line-height: var(--sa-lh-hero); margin-bottom: var(--sa-space-5); }
.sa-ambang__copy{ max-width: 30ch; opacity: 0; transform: translateY(18px); animation: sa-ambang-copy-in 700ms var(--sa-ease-out) forwards; animation-delay: 120ms; }
.sa-ambang__actions{ display: flex; flex-wrap: wrap; gap: var(--sa-space-4); margin-top: var(--sa-space-7); }
.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); }

.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); }

@keyframes sa-ambang-copy-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@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; }
}

@media (min-width: 768px){
  .sa-bumbu__kolom{ grid-template-columns: repeat(3,1fr); }
  .sa-bumbu__kolom > :nth-child(2){ transform: translateY(clamp(0px, 1.2vw, 16px)); }
  .sa-bumbu__kolom > :nth-child(3){ transform: translateY(clamp(0px, 2.0vw, 24px)); }
}

/* ============================================================
   BAB 2 — BUNYI
   ============================================================ */
.sa-bunyi{ min-height: auto; padding-block: var(--sa-y); 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) * -0.5)); }
  .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(clamp(0px, 1.2vw, 16px)); }
  .sa-asal__trio > :nth-child(3){ transform: translateY(clamp(0px, 2.0vw, 24px)); }
}

/* ============================================================
   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
   ============================================================ */
/* ============================================================
   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); overflow-x: hidden; }
.sa-rak__bar{ flex: 1; height: var(--sa-garis); background: var(--sa-surface); position: relative; max-width: clamp(200px, 60vw, 420px); min-width: 0; }
.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(clamp(50px, 10vw, 76px) + 56px);
  border-top:var(--sa-garis-tebal) solid var(--sa-line);
}
.sa-kaki__lockup{
  font-family:var(--sa-font-display);
  font-variation-settings:'wdth' 118,'wght' 800;
  font-size:clamp(1.75rem, 5.6vw, 2.25rem); 
  line-height:1.1;
  letter-spacing:-.035em; 
  margin:0 0 clamp(24px, 4.8vw, 48px); 
  max-width:18ch; 
  text-wrap:balance;
}
.sa-kaki__grid{ 
  display:grid; 
  gap:clamp(24px, 5vw, 48px); 
  margin-bottom:clamp(24px, 4.8vw, 48px);
}
.sa-kaki__col{ 
  display:flex; 
  flex-direction:column; 
  gap:clamp(12px, 2.4vw, 20px);
}
.sa-kaki__col h3{ 
  font-family:var(--sa-font-display);
  font-variation-settings:'wdth' 100,'wght' 750;
  font-size:clamp(0.9375rem, 1.8vw, 1.125rem); 
  margin:0; 
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--sa-fg);
}
.sa-kaki__col ul{ 
  list-style:none; 
  margin:0; 
  padding:0; 
  display:flex;
  flex-direction:column;
  gap:clamp(8px, 1.6vw, 16px);
}
.sa-kaki__col li{ 
  margin:0; 
}
.sa-kaki__col a{ 
  font-size:clamp(0.8125rem, 1.4vw, 0.9375rem); 
  text-decoration:none; 
  color:var(--sa-fg-muted); 
  transition:color var(--sa-dur-micro) var(--sa-ease-out);
}
.sa-kaki__col a:hover, 
.sa-kaki__col a:focus{ 
  color:var(--sa-fg); 
  outline:none;
}
.sa-kaki__col p {
  margin:0 0 clamp(8px, 1.6vw, 12px);
  font-size:clamp(0.8125rem, 1.4vw, 0.9375rem);
  line-height:1.6;
}
.sa-kaki__legal{
  display:flex; 
  flex-wrap:wrap; 
  gap:clamp(12px, 2.4vw, 24px); 
  justify-content:space-between;
  align-items:center;
  padding-top:clamp(16px, 3.2vw, 24px);
  border-top:var(--sa-garis) solid var(--sa-line);
  font-size:clamp(0.75rem, 1.2vw, 0.875rem); 
  color:var(--sa-fg-muted);
}

@media (min-width:320px) {
  .sa-kaki__grid{ grid-template-columns:1fr; }
}
@media (min-width:640px) {
  .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); }
}