/* Delapan Puluh Tiga Ribu - sistem visual selaras independen.id
   Judul: Montserrat. Teks: Open Sans. Palet blue-grey + satu aksen merah bata.
   Tema terkunci terang; mode gelap mengikuti preferensi sistem. */

:root {
  --ink:      #263238;
  --ink-2:    #546e7a;
  --ink-3:    #90a4ae;
  --line:     #cfd8dc;
  --line-2:   #eceff1;
  --bg:       #ffffff;
  --bg-2:     #eceff1;
  --bg-3:     #f7f9fa;
  --accent:   #b23a3a;
  --accent-w: #f6e9e9;
  --seq-1:    #263238;
  --seq-2:    #455a64;
  --seq-3:    #78909c;
  --seq-4:    #b0bec5;
  --shadow:   0 1px 2px rgba(38,50,56,.06), 0 8px 24px rgba(38,50,56,.06);

  --r:        4px;            /* satu skala sudut untuk seluruh halaman */
  --col:      min(680px, 100% - 2.5rem);
  --col-wide: min(1080px, 100% - 2.5rem);
  --col-full: min(1360px, 100% - 2rem);

  --step-0: 1.0625rem;
  --step-1: clamp(1.15rem, .4vw + 1.05rem, 1.3rem);
  --step-2: clamp(1.45rem, 1vw + 1.2rem, 1.85rem);
  --step-3: clamp(1.9rem, 2vw + 1.4rem, 2.7rem);
  --step-4: clamp(2.4rem, 5vw + 1.2rem, 4.6rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:      #e4e8ea;
    --ink-2:    #a7b5bb;
    --ink-3:    #7d8f97;
    --line:     #2d383d;
    --line-2:   #222b2f;
    --bg:       #14181a;
    --bg-2:     #1a2124;
    --bg-3:     #171d20;
    --accent:   #e06c6c;
    --accent-w: #2a1c1c;
    --seq-1:    #cfd8dc;
    --seq-2:    #90a4ae;
    --seq-3:    #607d8b;
    --seq-4:    #3d5159;
    --shadow:   0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* clip, bukan hidden: hidden mematikan position:sticky */
}

h1, h2, h3, .display, .num {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 0;
}

p { margin: 0 0 1.35em; }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--accent); }
strong { font-weight: 700; }
img { max-width: 100%; display: block; }

/* ---------- kerangka ---------- */
.col      { width: var(--col);      margin-inline: auto; }
.col-wide { width: var(--col-wide); margin-inline: auto; }
.col-full { width: var(--col-full); margin-inline: auto; }

section { padding-block: clamp(3rem, 7vw, 5.5rem); }
section.tight { padding-block: clamp(1.5rem, 3vw, 2.5rem); }

/* ---------- bilah kemajuan baca ---------- */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  background: transparent; pointer-events: none;
}
.progress > i {
  display: block; height: 100%; width: 0%;
  background: var(--accent); transform-origin: left;
}

/* ---------- pembuka ---------- */
.hero {
  position: relative; min-height: 100dvh;
  display: grid; grid-template-rows: 1fr auto;
  padding: 0 0 clamp(2rem, 5vw, 4rem);
  background: #0b0c0e;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,12,18,.06) 0%, rgba(8,12,18,0) 34%, rgba(8,12,18,.34) 62%, rgba(8,12,18,.80) 88%, rgba(8,12,18,.92) 100%);
}
.hero-inner { align-self: end; width: var(--col-wide); margin-inline: auto; color: #f2f3f4;
  display: grid; }
.hero-teks { max-width: 34rem; margin-right: auto; }
@media (max-width: 900px) { .hero-teks { max-width: none; margin-left: 0; } }
.hero h1 {
  font-size: clamp(1.9rem, 2.6vw + .5rem, 2.9rem); font-weight: 700; letter-spacing: -.03em;
  text-transform: uppercase; margin-bottom: .7rem;
  text-shadow: 0 2px 24px rgba(6,10,16,.7);
}
.hero .standfirst {
  font-size: 1.05rem; line-height: 1.55; color: #d6dbde;
  max-width: 42ch; margin: 0 0 1.4rem; text-shadow: 0 1px 16px rgba(6,10,16,.6);
}
.hero .meta {
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  color: #9aa5aa; border-top: 1px solid rgba(255,255,255,.18); padding-top: .9rem;
}

/* ---------- bab ---------- */
.chapter-open { position: relative; background: #0b0c0e; }
.chapter-open figure { margin: 0; position: relative; }
/* height:auto wajib: atribut height pada <img> jadi presentational hint dan
   membuat aspect-ratio diabaikan, sehingga gambar berdiri setinggi aslinya. */
.chapter-open img { width: 100%; height: auto; aspect-ratio: 21/9; object-fit: cover; opacity: .78; }
@media (max-width: 700px) { .chapter-open img { aspect-ratio: 3/2; } }

/* sepasang grafik berdampingan; sebelumnya gaya sebaris yang mudah tercecer */
.chart-duo { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.chapter-open .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.5rem,4vw,3rem) 0 clamp(1.2rem,3vw,2rem);
  background: linear-gradient(180deg, transparent, rgba(11,12,14,.88));
}
.chapter-open .cap > div { width: var(--col-wide); margin-inline: auto; }
.chapter-open .kicker {
  font-family: "Montserrat", sans-serif; font-weight: 500; font-size: .82rem;
  letter-spacing: .22em; color: #b4bec2; margin-bottom: .4rem;
}
.chapter-open h2 { font-size: var(--step-3); color: #fff; letter-spacing: -.03em; }
/* pembuka bab bergerak lambat saat digulirkan. Memakai animation-timeline
   bawaan peramban, bukan pendengar scroll, supaya tidak membebani perenderan.
   Peramban tanpa dukungan tetap dapat gambar diam yang utuh. */
.chapter-open.paralaks figure { overflow: hidden; height: clamp(280px, 42vw, 560px); }
.chapter-open.paralaks img { position: absolute; inset: 0; aspect-ratio: auto;
  width: 100%; height: 114%; object-fit: cover; object-position: center 64%; }
@supports (animation-timeline: view()) {
  .chapter-open.paralaks img { animation: geserPelan linear both; animation-timeline: view(); }
  @keyframes geserPelan { from { transform: translateY(-12%) } to { transform: translateY(0) } }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-open.paralaks img { animation: none; transform: none; height: 100% }
}

.credit {
  /* keterangan dibatasi lebar baca; pada kolom 1080px ia jadi 182 karakter per
     baris, jauh di luar rentang nyaman 45 sampai 95 */
  width: var(--col-wide); max-width: 78ch; margin: .8rem auto 0;
  font-size: .74rem; line-height: 1.55; color: var(--ink-3);
}
.col-full > .credit, .col-wide > .credit { margin-inline: 0; }

h3 {
  font-size: clamp(1.15rem, .7vw + 1rem, 1.42rem); margin: 2.4rem 0 .8rem; letter-spacing: -.015em;
}
h3:first-child { margin-top: 0; }

.lede { font-size: var(--step-1); line-height: 1.6; color: var(--ink); }
.lede p:first-child::first-letter {
  font-family: "Montserrat", sans-serif; font-weight: 700; float: left;
  font-size: 3.1em; line-height: .82; padding: .06em .1em 0 0; color: var(--accent);
}

/* ---------- kutipan surveyor ---------- */
.quotes { background: var(--bg-2); }
.quote-grid { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 780px) { .quote-grid { grid-template-columns: 1fr 1fr; } }
.quote-grid blockquote {
  margin: 0; padding: 1.5rem 1.4rem; background: var(--bg);
  font-size: .98rem; line-height: 1.62;
}
.quote-grid q { font-style: italic; quotes: "\201C" "\201D"; }
.quote-grid cite {
  display: block; margin-top: .7rem; font-style: normal; font-size: .78rem;
  letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase;
}

/* ---------- grafik ---------- */
figure.chart { margin: 2.6rem 0; }
figure.chart figcaption { font-size: .82rem; color: var(--ink-2); line-height: 1.55; margin-top: .7rem; }
.chart-title { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: -.01em; margin-bottom: .15rem; }
.chart-sub { font-size: .82rem; color: var(--ink-2); margin-bottom: 1rem; }
svg.plot { width: 100%; height: auto; display: block; overflow: visible; }
svg.plot text { font-family: "Open Sans", sans-serif; fill: var(--ink-2); }
.legend { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .8rem; color: var(--ink-2); margin-bottom: .8rem; }
.legend b { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; }
.legend i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }

/* ---------- scrollytelling: grafik lengket + langkah teks ---------- */
.scrolly { position: relative; }
.scrolly-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .scrolly-grid { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: start; } }
.scrolly-fig { position: sticky; top: 12vh; }
@media (max-width: 899px) { .scrolly-fig { top: 6vh; margin-bottom: 1.5rem; } }
.step { min-height: 52vh; display: flex; align-items: center; padding-block: 1rem; }
.step > div {
  border-left: 2px solid var(--line); padding-left: 1.25rem;
  transition: border-color .35s, opacity .35s; opacity: .38;
}
.step.on > div { border-color: var(--accent); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .step > div { opacity: 1; transition: none; } }

/* ---------- angka besar ---------- */
.figures { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 700px) { .figures { grid-template-columns: repeat(3, 1fr); } }
.figures > div { background: var(--bg); padding: 1.6rem 1.3rem; }
.figures .num { font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--accent); font-variant-numeric: tabular-nums; }
.figures p { font-size: .88rem; color: var(--ink-2); margin: .45rem 0 0; line-height: 1.5; }

/* ---------- blok lima nama ---------- */
.names { background: #0b0c0e; color: #e8eaeb; }
.names .col { text-align: left; }
.names h3, .names ol { text-align: center; }
.names p { max-width: 62ch; margin-inline: auto; }
.names figure { margin: 2.4rem 0 0; }
.names figure img { width: 100%; height: auto; border-radius: var(--r); }
.names figure figcaption { font-size: .78rem; color: #8b949a; margin-top: .7rem; line-height: 1.5; text-align: left; }
.names ol { list-style: none; margin: 2rem 0 0; padding: 0; }
.names li {
  font-family: "Montserrat", sans-serif; font-weight: 500;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem); letter-spacing: -.01em;
  padding: .85rem 0; color: #fff;
}
.names p { color: #9aa5aa; }

/* ---------- panel data terbuka ---------- */
.panel {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-3); padding: 1.4rem 1.4rem 1.1rem; margin: 2.4rem 0;
}
.panel h4 {
  font-family: "Montserrat", sans-serif; font-size: 1rem; font-weight: 600;
  margin: 0 0 .5rem; letter-spacing: -.01em;
}
.panel p { font-size: .92rem; color: var(--ink-2); margin-bottom: .9rem; }
.btn {
  display: inline-block; font-family: "Montserrat", sans-serif; font-weight: 600;
  font-size: .86rem; letter-spacing: .01em; padding: .62rem 1.15rem;
  border-radius: var(--r); background: var(--accent); color: #fff;
  text-decoration: none; border: 1px solid var(--accent); transition: transform .12s, background .18s;
}
.btn:hover { background: #96302f; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink-2); background: var(--bg-2); color: var(--ink); }

/* ---------- peta tertanam ---------- */
.embed { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg-2); }
.embed iframe { width: 100%; height: min(74vh, 620px); border: 0; display: block; }
.embed-ph {
  height: min(74vh, 620px); display: grid; place-content: center; gap: .8rem;
  text-align: center; padding: 2rem; color: var(--ink-2);
}

/* ---------- sisipan foto ---------- */
figure.inset { margin: 2.4rem 0; }
figure.inset img { width: 100%; height: auto; border-radius: var(--r); }
figure.inset figcaption { font-size: .8rem; color: var(--ink-3); margin-top: .6rem; line-height: 1.5; }

/* ---------- penutup ---------- */
.outro { background: var(--bg-2); }
.outro .display { font-size: var(--step-2); max-width: 24ch; }

/* keterangan data berlatar hitam supaya terpisah tegas dari badan laporan */
section.metode { background: #0b0c0e; color: #dbe1e4; }
section.metode h3 { color: #fff; }
section.metode p { color: #a9b3b8; }
details.method summary {
  cursor: pointer; font-family: "Montserrat", sans-serif; font-weight: 600;
  font-size: 1rem; list-style: none;
}
details.method summary::-webkit-details-marker { display: none; }
details.method summary::after { content: " +"; color: var(--accent); }
details.method[open] summary::after { content: " –"; }
details.method .body { font-size: .92rem; color: #a9b3b8; padding-top: 1rem; }

footer.site { padding: 2.5rem 0 4rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-3); }

/* ---------- pengungkapan saat gulir ---------- */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.rise.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } }

/* ---------- tabel data (fallback aksesibilitas grafik) ---------- */
.datatable { width: 100%; border-collapse: collapse; font-size: .84rem; margin-top: .8rem; }
.datatable th, .datatable td { text-align: left; padding: .4rem .6rem .4rem 0; border-bottom: 1px solid var(--line-2); }
.datatable th { font-weight: 600; color: var(--ink); }
.datatable td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
details.tbl summary { cursor: pointer; font-size: .8rem; color: var(--ink-2); margin-top: .6rem; }

.tip {
  position: fixed; z-index: 70; pointer-events: none; opacity: 0;
  background: var(--ink); color: var(--bg); font-size: .8rem; line-height: 1.4;
  padding: .5rem .7rem; border-radius: var(--r); max-width: 240px;
  transition: opacity .12s; box-shadow: var(--shadow);
}
.tip.on { opacity: 1; }

/* ---------- kutipan langsung narasumber ---------- */
blockquote.pq {
  margin: 2rem 0; padding: 0 0 0 1.5rem; border-left: 3px solid var(--accent);
  font-family: "Montserrat", sans-serif; font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.45; letter-spacing: -.015em;
  color: var(--ink);
}
blockquote.pq cite {
  display: block; margin-top: .8rem; font-family: "Open Sans", sans-serif;
  font-style: normal; font-size: .84rem; line-height: 1.5; color: var(--ink-2);
}
blockquote.pq.small { font-size: clamp(1.02rem, 1.2vw, 1.18rem); }

/* kutipan catatan surveyor di dalam alir teks */
blockquote.field {
  margin: 1.6rem 0; padding: 1rem 1.2rem; background: var(--bg-2);
  border-radius: var(--r); font-style: italic; font-size: 1rem; line-height: 1.6;
  color: var(--ink);
}
blockquote.field cite {
  display: block; margin-top: .55rem; font-style: normal; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}

/* ---------- video sisipan ---------- */
figure.vid { margin: 0; }
figure.vid video { width: 100%; height: auto; border-radius: var(--r); background: #0b0c0e; display: block; }
figure.vid figcaption { font-size: .8rem; color: var(--ink-3); margin-top: .6rem; line-height: 1.5; }

/* media tegak dibatasi lebarnya supaya tidak menguasai kolom baca */
figure.vid video { max-width: 232px; margin-inline: auto; }
@media (max-width: 899px) { figure.vid video { max-width: 260px; } }

/* sisipan berdampingan: grid stabil, tanpa float dan tanpa margin negatif */
.duo { display: grid; gap: 1.2rem 2.2rem; align-items: start; margin: 2rem 0; }
@media (min-width: 900px) {
  /* kotak dipersempit ke lebar kolom baca supaya teksnya memanjang dan
     tingginya mendekati video potret, bukan menyisakan lubang di bawah */
  .duo { grid-template-columns: minmax(0,1fr) 232px; gap: 1.2rem 2.2rem;
         width: var(--col); margin-inline: auto; }
}
.duo > figure { margin: 0; }
.duo > .teks { max-width: 62ch; }
.duo > .teks > p:first-child { margin-top: 0; }
.duo > .teks > p:last-child { margin-bottom: 0; }

/* ---------- peta lebar penuh ---------- */
.peta-penuh { border-block: 1px solid var(--line); background: var(--bg-2); }
.peta-penuh .embed { border: 0; border-radius: 0; }
.peta-penuh .embed iframe, .peta-penuh .embed-ph { height: min(86vh, 760px); }

/* ---------- daftar nama tanpa penomoran ---------- */
.names ol { counter-reset: none; }

/* ---------- perbandingan dua tanggal penarikan ---------- */
.tiga-minggu { background: var(--bg-2); }
.delta { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); margin: 2rem 0; }
.delta-row {
  background: var(--bg); display: grid; align-items: center; gap: .3rem 1rem;
  grid-template-columns: 1fr; padding: 1rem 1.2rem;
}
@media (min-width: 700px) {
  .delta-row { grid-template-columns: minmax(0,1.1fr) minmax(0,1.4fr) 88px; padding: 1.1rem 1.3rem; }
}
.delta-row .dl { font-size: .92rem; color: var(--ink-2); }
.delta-row .dv {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  font-family: "Montserrat", sans-serif; font-variant-numeric: tabular-nums;
}
.delta-row .dlama { font-size: 1rem; color: var(--ink-3); }
.delta-row .dar { color: var(--ink-3); font-size: .95rem; }
.delta-row .dbaru { font-size: 1.25rem; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.delta-row .dp {
  font-family: "Montserrat", sans-serif; font-size: .92rem; font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
@media (min-width: 700px) { .delta-row .dp { text-align: right; } }
.delta-row.hot .dbaru { color: var(--accent); }
.delta-row.hot .dp { color: var(--accent); font-weight: 600; }

/* ---------- penyempurnaan tata letak ---------- */
.hero h1 { text-wrap: balance; }
.hero .standfirst, .lede, .col > p { text-wrap: pretty; }
h3 { text-wrap: balance; }

/* jarak antarbagian lebih berirama */
section + section { padding-top: clamp(2.2rem, 5vw, 4rem); }
.chapter-open + .credit + section { padding-top: clamp(2.4rem, 5vw, 4rem); }

/* angka besar: ruang tetap supaya tidak melompat saat dihitung naik */
.figures .num { min-height: 1em; font-variant-numeric: tabular-nums; }

/* kartu angka jadi tiga kolom yang seimbang di layar sedang */
@media (min-width: 560px) and (max-width: 699px) { .figures { grid-template-columns: 1fr 1fr; } }

/* ---------- kanvas efek karakter di header ---------- */
.hero-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-media img { transition: opacity .4s; }
.hero-media.fx-siap img { opacity: 0; }
.hero-inner { position: relative; z-index: 2; }

/* judul header: sedikit lebih rapat karena kini lebih panjang */
.hero h1 { font-size: clamp(1.9rem, 2.6vw + .5rem, 2.9rem); letter-spacing: -.03em; max-width: none; }

/* ---------- ukuran judul bagian disamakan ---------- */
.lede h3, #prolog h3 { font-size: var(--step-2); }

/* ---------- seksi catatan surveyor: latar gelap sebagai pembeda ---------- */
section.gelap { background: #14181a; color: #e8e6e3; padding-block: clamp(2rem, 5vw, 3.4rem); }
section.gelap h3 { color: #fff; }
/* kutipan surveyor: latarnya ikut digelapkan, kalau tidak teksnya terang di atas latar terang */
section.gelap blockquote.field { background: #1b2023; color: #dce4e7; border-left: 3px solid var(--accent); }
section.gelap blockquote.field cite { color: #93a1a6; }
section.gelap .btn { background: var(--accent); color: #fff; border-color: var(--accent); }
section.gelap h4 { color: #fff; }
section.gelap .panel { background: #1b2023; border-color: #2a3236; color: #cfd8dc; }
section.gelap .panel b, section.gelap .panel strong { color: #fff; }
section.gelap a { color: #ffb3b3; }
section.gelap .credit, section.gelap figcaption { color: #93a1a6; }
section.gelap .quote-grid blockquote { background: #1b2023; border-color: #2a3236; color: #e8e6e3; }

/* ---------- seksi listrik: saklar tarik yang menyalakan lampu ---------- */
section.lampu { position: relative; transition: background .45s ease, color .45s ease; }
section.lampu.nyala { background: #f7d354; color: #14110a; }
section.lampu.nyala h3 { color: #14110a; }
section.lampu.nyala .chart text { fill: #14110a; }
section.lampu.nyala .credit, section.lampu.nyala figcaption { color: #4a4636; }
.saklar { position: absolute; top: 0; left: calc(50% + var(--col-wide) / 2 - 120px);
  width: 56px; height: 300px; border: 0; background: transparent; cursor: pointer; padding: 0; z-index: 3; }
.saklar .tali { position: absolute; left: 24px; top: 0; width: 8px; height: 196px; opacity: .75;
  /* pilinan tambang: dua arah serong bersilang, ditambah bayangan tepi supaya bulat */
  background:
    repeating-linear-gradient(115deg, transparent 0 2px, rgba(0,0,0,.30) 2px 4px),
    repeating-linear-gradient(65deg,  transparent 0 2px, rgba(255,255,255,.16) 2px 4px),
    linear-gradient(90deg, rgba(0,0,0,.35), currentColor 38%, currentColor 62%, rgba(0,0,0,.35));
  border-radius: 4px; }
.saklar .gagang { position: absolute; left: 14px; top: 188px; width: 28px; height: 44px; border-radius: 14px;
  background: radial-gradient(120% 80% at 30% 25%, rgba(255,255,255,.35), transparent 55%), currentColor;
  opacity: .85; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .18s ease; }
.saklar:hover .gagang { transform: translateY(10px); }
.saklar.tarik .gagang { transform: translateY(26px); }
.saklar span { position: absolute; top: 240px; left: 50%; transform: translateX(-50%);
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: .7; }
@media (max-width: 1100px) { .saklar { left: auto; right: 14px; } }
@media (max-width: 760px) { .saklar { display: none; } }
@media (prefers-reduced-motion: reduce) { .saklar .gagang, section.lampu { transition: none; } }

/* seksi berlatar khusus sudah punya padding sendiri; seksi sesudahnya tak perlu
   menambah jarak penuh lagi, kalau tidak celahnya jadi dua kali lipat */
section.lampu + section, section.gelap + section { padding-top: clamp(1.6rem, 3vw, 2.6rem); }


/* ---------- pembuka bab tanpa gambar ---------- */
.bab-teks { padding: clamp(3rem, 7vw, 5.5rem) 0 0; }
.bab-teks h2 { font-size: var(--step-3); letter-spacing: -.03em; }

/* ---------- lima peserta: halaman dipatok, kartunya bergerak ke samping ----------
   Panggung menempel selama pembaca menggulir; jarak gulir diubah jadi geseran
   mendatar oleh site.js, dan tiap kartu muncul ketika masuk bingkai. */
.korban { margin: 2.6rem 0 0; }
.korban-nota { width: var(--col); max-width: 68ch; margin: 0 auto 1.6rem; font-size: .8rem;
  line-height: 1.6; color: #8b949a; }
.korban-pin { position: relative; }
.korban-panggung { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; }
.korban-rel { display: flex; gap: 1.6rem; will-change: transform;
  /* jarak awal disengaja: kartu pertama baru melewati garis balik setelah
     pembaca menggulir, jadi wajah sipilnya sempat terbaca lebih dulu */
  padding-left: 32vw; }
/* Kartu balik: sebelum profilnya terbaca, yang tampak adalah potret
   berpakaian sipil. Begitu teksnya muncul, kartunya berputar dan potretnya
   berganti seragam loreng. Di layar sempit potretnya jadi bulatan kecil
   supaya tinggi kartu tetap muat satu layar. */
.kartu-korban {
  flex: 0 0 min(86vw, 560px); background: #14181b; border-radius: var(--r); overflow: hidden;
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: .2rem 1rem;
  align-content: start; padding: 1.2rem; max-height: 78vh;
}
.kartu-korban .balik { grid-row: 1 / 3; position: relative; width: 84px; height: 84px;
  perspective: 900px; }
.kartu-korban .muka { position: absolute; inset: 0; backface-visibility: hidden;
  transition: transform .7s cubic-bezier(.4,.1,.2,1); border-radius: 50%; overflow: hidden; }
.kartu-korban .sipil { transform: rotateY(0deg); }
.kartu-korban .loreng { transform: rotateY(180deg); }
.kartu-korban.tampil .sipil { transform: rotateY(-180deg); }
.kartu-korban.tampil .loreng { transform: rotateY(0deg); }
.kartu-korban .muka img { width: 100%; height: 100%; object-fit: cover;
  object-position: center 22%; display: block; }
.kartu-korban h4 { font-size: 1rem; letter-spacing: -.015em; color: #fff; margin: .3rem 0 0;
  align-self: center; }
.kartu-korban .isi { grid-column: 1 / -1; }
.korban-siap .kartu-korban .isi { opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease .18s, transform .5s ease .18s; }
.korban-siap .kartu-korban.tampil .isi { opacity: 1; transform: none; }
.kartu-korban p { font-size: .84rem; line-height: 1.66; color: #b3bcc1; margin: .9rem 0 0;
  max-width: none; }
.kartu-korban .sumber { font-size: .73rem; color: #79838a; margin-top: .8rem; }
@media (min-width: 700px) {
  .kartu-korban { grid-template-columns: 200px minmax(0, 1fr); gap: 0 1.4rem; padding: 0 1.4rem 0 0; }
  .kartu-korban .balik { grid-row: 1 / 4; width: 200px; height: auto; }
  .kartu-korban .muka { border-radius: 0; }
  .kartu-korban .muka img { object-position: center 20%; }
  .kartu-korban h4 { margin: 1.4rem 0 0; align-self: start; }
  .kartu-korban .isi { grid-column: 2; }
  .kartu-korban .sumber { margin-bottom: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kartu-korban .muka, .kartu-korban .isi { transition: none; }
}

.korban-jejak { width: min(88vw, var(--col)); margin: 0 auto; height: 2px; background: #262c30; }
.korban-jejak span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .12s linear; }

/* ---------- profil penulis di penutup ---------- */
.penulis { padding: clamp(1.6rem, 4vw, 2.6rem) 0 clamp(3rem, 7vw, 5rem); }
.penulis h3 { margin-bottom: 1.6rem; }
/* bertumpuk ke bawah, dipisah garis, bukan berdampingan */
.kartu-penulis { display: block; border-top: 1px solid var(--line); }
.kartu-penulis article { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1.1rem 1.4rem;
  align-items: start; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.kartu-penulis img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  object-position: center 28%; }
.kartu-penulis h4 { font-size: 1rem; letter-spacing: -.01em; margin-bottom: .45rem; }
.kartu-penulis p { font-size: .84rem; line-height: 1.65; color: var(--ink-2); max-width: none; }

/* penanda cerita tamat, sesudah Duwet dan sebelum profil penulis */
section.outro::after {
  content: ""; display: block; width: 72px; height: 3px; background: var(--accent);
  margin: clamp(2.2rem, 5vw, 3.4rem) auto 0;
}