:root {
  --hutan: #073D30; --hutan2: #0A5A45; --daun: #0B6E54; --pucuk: #86E3BE; --emas: #E3A13A; --emas-tua: #9A6512;
  --krem: #F6F2E8; --kertas: #FFFFFF; --tinta: #14231E; --abu: #5A6B64; --garis: #DDE3DF;
  --skala: 1; --r: 16px;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html[data-huruf="2"] { --skala: 1.15 }
html[data-huruf="3"] { --skala: 1.3 }
html.kontras { --tinta: #000; --abu: #222; --garis: #888; --krem: #FFFDF5 }
* { box-sizing: border-box }
html { scroll-behavior: smooth; font-size: calc(17px * var(--skala)); -webkit-text-size-adjust: 100% }
body { margin: 0; font-family: var(--sans); color: var(--tinta); background: var(--kertas); line-height: 1.6 }
img { max-width: 100%; height: auto; display: block }
a { color: inherit }
h1, h2, h3 { font-family: var(--serif); line-height: 1.2; margin: 0 }
h1 { font-size: clamp(2rem, 5vw, 3.4rem) }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem) }
h3 { font-size: 1.2rem }
h1 em, h2 em { font-style: normal; color: var(--daun) }
.gelap h1 em, .gelap h2 em, .sampul h1 em { color: var(--pucuk) }
p { margin: 0 }

/* bilah atas */
.progress { position: fixed; inset: 0 0 auto; height: 4px; z-index: 60; background: transparent }
.progress i { display: block; height: 100%; width: 0; background: var(--emas); transition: width .2s }
.bar { position: fixed; top: 4px; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px;
  background: color-mix(in srgb, var(--kertas) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--garis) }
.merek { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: .95rem }
.merek .mk { width: 34px; height: 34px; border-radius: 10px; background: var(--hutan2); color: var(--pucuk); display: grid; place-items: center; flex: none }
.merek svg { width: 22px; height: 22px }
.alat { display: flex; align-items: center; gap: 10px }
.alat .lbl { font-size: .8rem; color: var(--abu) }
.seg { display: inline-flex; border: 1px solid var(--garis); border-radius: 999px; overflow: hidden }
.seg button, .kontras { font: 600 .85rem var(--sans); border: 0; background: transparent; color: var(--tinta); padding: 8px 12px; min-height: 40px; cursor: pointer }
.seg button[aria-pressed="true"] { background: var(--hutan2); color: #fff }
.kontras { border: 1px solid var(--garis); border-radius: 999px }
.kontras[aria-pressed="true"] { background: var(--tinta); color: #fff }
@media (max-width: 640px) { .alat .lbl, .merek b { display: none } .bar { padding: 8px 12px } }

/* titik navigasi */
.titik { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 40; display: grid; gap: 10px }
.titik a { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--garis); border: 2px solid var(--kertas); box-shadow: 0 0 0 1px var(--garis); position: relative }
.titik a.aktif { background: var(--emas); transform: scale(1.25) }
.titik a span { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: .8rem; background: var(--tinta); color: #fff; padding: 4px 10px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .15s }
.titik a:hover span, .titik a:focus span { opacity: 1 }
@media (max-width: 900px) { .titik { display: none } }

/* bab */
.bab { min-height: 100vh; display: flex; align-items: center; padding: 110px 24px 90px; position: relative }
.isi { width: min(1120px, 100%); margin: 0 auto; display: grid; gap: 22px }
.isi.sempit { width: min(820px, 100%) }
.isi.dua { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 48px }
.isi.dua-rata { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start }
.isi.dua > div, .isi.dua-rata > div { display: grid; gap: 18px; align-content: start }
@media (max-width: 900px) { .isi.dua, .isi.dua-rata { grid-template-columns: minmax(0, 1fr) } .bab { padding: 96px 18px 80px; min-height: auto } }
.tengah { text-align: center; justify-items: center }
.kicker { font: 700 .78rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--emas-tua) }
.gelap .kicker, .sampul .kicker { color: var(--emas) }
.lead { font-size: 1.15rem; max-width: 62ch }
.tegas { font-weight: 700; font-size: 1.15rem; color: var(--hutan2) }
.gelap .tegas { color: var(--pucuk) }
.catatan { font-size: .85rem; color: var(--abu) }
.catatan.terang { color: rgba(255, 255, 255, .6) }
.gelap { background: radial-gradient(120% 120% at 0% 100%, #11634C 0%, var(--hutan2) 40%, var(--hutan) 100%); color: #F2FAF6 }
.gelap p, .gelap li { color: rgba(242, 250, 246, .9) }
.krem { background: var(--krem) }

/* tombol */
.aksi { display: flex; flex-wrap: wrap; gap: 12px }
.aksi.tengah { justify-content: center }
.tbl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; font: 700 1rem var(--sans); text-decoration: none; cursor: pointer;
  border: 2px solid currentColor; background: transparent; color: inherit; transition: transform .12s, background .12s }
.tbl:hover { transform: translateY(-1px) }
.tbl.utama { background: var(--emas); border-color: var(--emas); color: #2A1B05 }
.tbl:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--emas); outline-offset: 3px }

/* sampul */
.sampul { background: linear-gradient(160deg, rgba(7, 61, 48, .94), rgba(10, 90, 69, .88)), url('/img/peta.webp') center/cover; color: #fff }
.sampul .lead, .sampul .oleh { color: rgba(255, 255, 255, .88) }
.sampul .tbl:not(.utama) { color: #fff }
.oleh { font-size: .9rem; color: var(--abu) }
.gelap .oleh { color: rgba(255, 255, 255, .7) }

/* kail */
.tebak { display: grid; gap: 14px; justify-items: start; padding: 24px; border: 1px solid var(--garis); border-radius: var(--r); background: var(--krem) }
.tebak output { font: 700 3rem var(--serif); color: var(--hutan2); line-height: 1 }
.tebak .satuan { color: var(--abu); margin-top: -10px }
input[type=range] { width: 100%; accent-color: var(--daun); height: 36px }
.ungkap { display: grid; gap: 14px; padding: 24px; border-left: 5px solid var(--emas); background: #FFF9EC; border-radius: 0 var(--r) var(--r) 0 }
.angka-besar { display: grid }
.angka-besar b { font: 700 clamp(3rem, 9vw, 5.5rem) var(--serif); color: var(--hutan2); line-height: 1 }
.angka-besar span { color: var(--abu) }

/* cerita */
.kartu-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px }
@media (max-width: 900px) { .kartu-3 { grid-template-columns: minmax(0, 1fr) } }
.cerita { display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: var(--r); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .15) }
.cerita .ikon { font: 700 .9rem var(--sans); color: var(--emas) }
.cerita h3 { color: #fff }
.pernah { justify-self: start; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .5); background: transparent; color: #fff; font: 600 .95rem var(--sans); cursor: pointer }
.pernah[aria-pressed="true"] { background: var(--emas); border-color: var(--emas); color: #2A1B05 }

/* kontras */
.saklar { display: inline-flex; justify-self: start; padding: 4px; border-radius: 999px; background: var(--krem); border: 1px solid var(--garis) }
.saklar button { min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; font: 700 .95rem var(--sans); color: var(--abu); cursor: pointer }
.saklar button[aria-selected="true"] { background: var(--hutan2); color: #fff }
.banding { display: grid; border: 1px solid var(--garis); border-radius: var(--r); overflow: hidden }
.banding .baris { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 18px 22px; border-top: 1px solid var(--garis); align-items: baseline }
.banding .baris:first-child { border-top: 0 }
.banding .nanti { display: none; color: var(--hutan2); font-weight: 600 }
.banding .kini { color: #8A3B2E }
.banding[data-mode="nanti"] .kini { display: none }
.banding[data-mode="nanti"] .nanti { display: block }
.banding[data-mode="nanti"] { background: #F1FAF5; border-color: #BFE3D2 }
@media (max-width: 640px) { .banding .baris { grid-template-columns: minmax(0, 1fr); gap: 4px } }

/* lini masa */
.lini { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); position: relative }
.lini::before { content: ''; position: absolute; left: 4%; right: 4%; top: 22px; height: 3px; background: var(--garis) }
.lini li { position: relative; display: grid; justify-items: center; gap: 8px }
.lini button { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--krem); background: var(--garis); cursor: pointer; position: relative; z-index: 1; font: 700 .7rem var(--sans); color: var(--abu) }
.lini button[aria-pressed="true"] { background: var(--emas); color: #2A1B05; transform: scale(1.12) }
.lini .th { font: 700 .9rem var(--sans) }
.lini-detail { padding: 24px; border-radius: var(--r); background: var(--kertas); border: 1px solid var(--garis); display: grid; gap: 6px; min-height: 150px }
.lini-detail b { color: var(--emas-tua); font-size: .95rem }
@media (max-width: 760px) { .lini { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px } .lini::before { display: none } }

/* solusi */
.tab-solusi { display: flex; flex-wrap: wrap; gap: 10px }
.tab-solusi button { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 10px; border-radius: 999px; border: 1px solid var(--garis); background: var(--kertas); font: 700 1rem var(--sans); color: var(--tinta); cursor: pointer }
.tab-solusi button span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--krem); color: var(--hutan2) }
.tab-solusi button[aria-selected="true"] { background: var(--hutan2); color: #fff; border-color: var(--hutan2) }
.tab-solusi button[aria-selected="true"] span { background: var(--emas); color: #2A1B05 }
.panel-solusi { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; align-items: start }
.panel-solusi .teks { display: grid; gap: 12px }
.panel-solusi ul, .centang { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px }
.panel-solusi li, .centang li { padding-left: 30px; position: relative }
.panel-solusi li::before, .centang li::before { content: ''; position: absolute; left: 0; top: .45em; width: 18px; height: 10px; border-left: 3px solid var(--daun); border-bottom: 3px solid var(--daun); transform: rotate(-45deg) }
.layar { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--garis); box-shadow: 0 24px 60px rgba(7, 61, 48, .18) }
@media (max-width: 900px) { .panel-solusi { grid-template-columns: minmax(0, 1fr) } }

/* peran */
.pilih-peran { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.pilih-peran button { text-align: left; display: grid; gap: 2px; padding: 16px 18px; min-height: 72px; border-radius: 14px; border: 1px solid var(--garis); background: var(--kertas); cursor: pointer; font: inherit; color: var(--tinta) }
.pilih-peran button b { font-size: 1rem }
.pilih-peran button small { color: var(--abu); font-size: .82rem }
.pilih-peran button[aria-selected="true"] { border-color: var(--hutan2); box-shadow: inset 0 0 0 2px var(--hutan2); background: #F1FAF5 }
@media (max-width: 760px) { .pilih-peran { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } }
.hasil-peran { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 28px; border-radius: var(--r); background: var(--kertas); border: 1px solid var(--garis) }
.hasil-peran .kutip { font: 600 1.25rem var(--serif); color: var(--hutan2) }
.hasil-peran ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px }
.hasil-peran li { padding-left: 30px; position: relative }
.hasil-peran li::before { content: ''; position: absolute; left: 0; top: .45em; width: 18px; height: 10px; border-left: 3px solid var(--daun); border-bottom: 3px solid var(--daun); transform: rotate(-45deg) }
.hasil-peran figure { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--garis); max-height: 460px }
.hasil-peran figure.hp { max-width: 260px; justify-self: center; border-radius: 28px; border: 8px solid #10201A }
@media (max-width: 900px) { .hasil-peran { grid-template-columns: minmax(0, 1fr); padding: 20px } }

/* liga */
.liga { display: grid; gap: 10px; padding: 22px; border-radius: var(--r); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .15); min-height: 420px; align-content: start }
.liga .r { display: grid; grid-template-columns: 30px minmax(0, 1fr) 48px; gap: 12px; align-items: center; transition: transform .5s }
.liga .r .no { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); font: 700 .85rem var(--sans) }
.liga .r:nth-child(1) .no { background: var(--emas); color: #2A1B05 }
.liga .r .nm { font-weight: 600 }
.liga .r .bt { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-top: 6px }
.liga .r .bt i { display: block; height: 100%; width: 0; background: var(--pucuk); border-radius: 99px; transition: width .9s ease }
.liga .r .sk { font: 700 1.3rem var(--serif); text-align: right; color: var(--pucuk) }

/* kalkulator */
.kalk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 28px; border-radius: var(--r); background: var(--krem); border: 1px solid var(--garis) }
.kalk .masukan { display: grid; gap: 18px }
.kalk label { display: grid; gap: 4px; font-weight: 600 }
.kalk label output { font: 700 1.3rem var(--serif); color: var(--hutan2) }
.kalk .keluaran { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
.kalk .keluaran div { display: grid; align-content: center; gap: 4px; padding: 18px; border-radius: 14px; background: var(--kertas); border: 1px solid var(--garis) }
.kalk .keluaran b { font: 700 clamp(1.4rem, 3vw, 2rem) var(--serif); color: var(--hutan2); line-height: 1.1; overflow-wrap: anywhere }
.kalk .keluaran span { font-size: .85rem; color: var(--abu) }
@media (max-width: 900px) { .kalk { grid-template-columns: minmax(0, 1fr); padding: 20px } }

/* bukti */
.hp-deret { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start }
.hp-deret figure { margin: 0; display: grid; gap: 8px; text-align: center }
.hp-deret img { border-radius: 22px; border: 6px solid #10201A; box-shadow: 0 18px 40px rgba(7, 61, 48, .2) }
.hp-deret figure:nth-child(2) { margin-top: 36px }
.hp-deret figcaption { font-size: .85rem; color: var(--abu); font-weight: 600 }

/* jaminan */
.jaminan { display: grid; gap: 12px }
.jaminan div { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--garis); background: var(--kertas); display: grid; gap: 4px }
.jaminan b { color: var(--hutan2) }
.jaminan p { color: var(--abu); font-size: .95rem }

/* tahapan */
.tahap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: t }
.tahap li { padding: 22px; border-radius: var(--r); background: var(--kertas); border: 1px solid var(--garis); display: grid; gap: 8px; align-content: start; position: relative }
.tahap li:first-child { border: 2px solid var(--emas); box-shadow: 0 14px 36px rgba(154, 101, 18, .15) }
.tahap span { font: 700 .78rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--emas-tua) }
.tahap b { font: 700 1.1rem var(--serif) }
.tahap p { color: var(--abu); font-size: .95rem }
@media (max-width: 900px) { .tahap { grid-template-columns: minmax(0, 1fr) } }

/* tanya */
.tanya { display: grid; gap: 10px }
.tanya details { border: 1px solid var(--garis); border-radius: 14px; padding: 0 20px; background: var(--kertas) }
.tanya summary { cursor: pointer; padding: 18px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; min-height: 56px; align-items: center }
.tanya summary::-webkit-details-marker { display: none }
.tanya summary::after { content: '+'; font: 700 1.4rem var(--sans); color: var(--daun) }
.tanya details[open] summary::after { content: '−' }
.tanya details p { padding: 0 0 18px; color: var(--abu) }

/* akhir */
.akhir .salam { font: 700 1.6rem var(--serif); color: var(--emas) }

/* tombol lanjut */
.lanjut { position: fixed; right: 20px; bottom: 20px; z-index: 45; min-height: 52px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--hutan2); color: #fff; font: 700 1rem var(--sans); box-shadow: 0 12px 30px rgba(7, 61, 48, .35); cursor: pointer }
.lanjut[hidden] { display: none }

/* animasi masuk */
.muncul { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease }
.muncul.tampak { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } .muncul { opacity: 1; transform: none; transition: none } .liga .r .bt i { transition: none } }
.isi > div > .tbl, .isi > .tbl { justify-self: start }
.sampul { background: linear-gradient(160deg, rgba(7, 61, 48, .96), rgba(10, 90, 69, .93)), url('/img/peta.webp') center/cover }
[hidden] { display: none !important }