:root{--kertas:#ffffff;--tinta:#111827;--biru:#2563eb;--biru-tua:#1e40af;--kuning:#facc15;--kuning-muda:#fef9c3;--garis:#d1d5db;--abu:#4b5563;--latar2:#f3f6fb;--r:4px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kertas);color:var(--tinta);font:17px/1.65 Figtree,system-ui,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--biru-tua)}
a:hover{color:var(--biru)}
p,li{overflow-wrap:anywhere}
td,th{overflow-wrap:break-word;word-break:normal;hyphens:none}
code,kbd,.mono{font-family:"Noto Sans Mono",ui-monospace,monospace}
.lompat{position:absolute;left:-999px;top:0;background:var(--kuning);padding:10px 14px}
.lompat:focus{left:8px;z-index:9}
/* kop manual */
.kop{border-bottom:3px solid var(--tinta);background:var(--kertas)}
.kop-dalam{max-width:1080px;margin:0 auto;padding:10px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.merek{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta);font-weight:800;font-size:21px;min-height:44px}
.merek svg{width:34px;height:34px}
.merek small{font:600 12px "Noto Sans Mono",monospace;color:var(--abu);border:1px solid var(--garis);padding:1px 6px;border-radius:var(--r)}
.bab{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.bab a{display:inline-flex;align-items:center;min-height:40px;padding:6px 10px;border:1px solid var(--garis);border-radius:var(--r);text-decoration:none;color:var(--tinta);font-size:15px;font-weight:600}
.bab a[aria-current]{background:var(--biru);border-color:var(--biru);color:#fff}
.bab a .mono{font-size:12px;color:var(--abu);margin-right:6px}
.bab a[aria-current] .mono{color:#dbeafe}
/* badan */
.kertas{max-width:1080px;margin:0 auto;padding:18px 16px 40px}
.jejak ol{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:4px;font-size:14px;color:var(--abu)}
.jejak li+li::before{content:"\203A";margin:0 6px}
.lembar{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media(min-width:900px){.lembar{grid-template-columns:minmax(0,1fr) 270px}}
.isi{min-width:0;max-width:760px}
h1{font-size:clamp(28px,5vw,42px);line-height:1.15;margin:.2em 0 .4em;letter-spacing:-.01em}
h2{font-size:clamp(22px,3.4vw,28px);line-height:1.25;margin:1.8em 0 .5em;padding-top:.4em;border-top:2px solid var(--tinta)}
h3{font-size:20px;line-height:1.3;margin:1.3em 0 .4em}
.kode-hal{font:600 13px "Noto Sans Mono",monospace;color:var(--biru-tua);letter-spacing:.06em;text-transform:uppercase}
.pembuka{font-size:19px;color:#1f2937}
.stempel{font:13px "Noto Sans Mono",monospace;color:var(--abu)}
/* lembar isi kotak */
.kotak-isi{border:2px dashed var(--tinta);border-radius:var(--r);padding:14px 16px;margin:20px 0;background:var(--latar2)}
.kotak-isi .judul-kotak{font:700 14px "Noto Sans Mono",monospace;text-transform:uppercase;letter-spacing:.08em;margin:0 0 6px}
.kotak-isi ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.kotak-isi li{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:start}
.kotak-isi li b{font:700 13px "Noto Sans Mono",monospace;background:var(--kertas);border:1px solid var(--tinta);border-radius:var(--r);text-align:center;padding:2px 0}
/* langkah */
.langkah{list-style:none;margin:10px 0 0;padding:0;counter-reset:lk}
.langkah>li{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);gap:4px 14px;padding:14px 0 18px;border-bottom:1px solid var(--garis)}
.langkah>li::before{counter-increment:lk;content:counter(lk);grid-row:1/span 2;width:52px;height:52px;border-radius:50%;background:var(--biru);color:#fff;font:800 26px Figtree,sans-serif;display:flex;align-items:center;justify-content:center;border:3px solid var(--tinta)}
.langkah>li>h3{margin:.3em 0 .2em}
.langkah .gbr{grid-column:2;display:flex;gap:14px;align-items:flex-start}
.langkah .gbr svg{flex:0 0 76px;width:76px;height:76px;stroke:var(--tinta);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;background:var(--kertas);border:1px solid var(--garis);border-radius:var(--r);padding:6px}
.langkah .gbr svg .aks{stroke:var(--biru)}
.langkah .gbr svg .kun{fill:var(--kuning);stroke:var(--tinta)}
.langkah .gbr>div>p:first-child{margin-top:0}
@media(max-width:520px){.langkah .gbr{flex-direction:column}.langkah>li{grid-template-columns:52px minmax(0,1fr)}.langkah>li::before{width:44px;height:44px;font-size:22px}}
/* perhatian */
.awas{border:2px solid var(--tinta);border-left:12px solid var(--kuning);background:var(--kuning-muda);border-radius:var(--r);padding:12px 16px;margin:22px 0}
.awas .label{display:inline-block;font:700 13px "Noto Sans Mono",monospace;text-transform:uppercase;letter-spacing:.08em;background:var(--kuning);border:1px solid var(--tinta);padding:1px 8px;border-radius:var(--r)}
.awas p{margin:.5em 0 0}
.risiko{margin-top:0}
/* tabel & kode */
.gulir{overflow-x:auto;margin:16px 0;border:1px solid var(--garis);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:560px}
caption{text-align:left;font:600 13px "Noto Sans Mono",monospace;padding:8px 10px;color:var(--abu)}
th,td{border-top:1px solid var(--garis);padding:8px 10px;text-align:left;vertical-align:top}
thead th{background:var(--tinta);color:#fff;font-weight:700}
td.angka,th.angka{text-align:right;font-family:"Noto Sans Mono",monospace}
.kodebox{margin:18px 0;border:2px solid var(--tinta);border-radius:var(--r)}
.kodebox figcaption{background:var(--kuning);border-bottom:2px solid var(--tinta);padding:6px 10px;font:600 13px "Noto Sans Mono",monospace}
.kodebox pre{margin:0;padding:12px;overflow-x:auto;background:#0f172a;color:#e5e7eb;font:14px/1.55 "Noto Sans Mono",monospace}
kbd{border:1px solid var(--tinta);border-bottom-width:3px;border-radius:var(--r);padding:0 5px;font-size:14px;background:var(--kertas)}
/* gambar */
.foto{margin:18px 0}
.foto img{border:2px solid var(--tinta);border-radius:var(--r);width:100%}
.foto figcaption{font-size:14px;color:var(--abu);margin-top:6px}
/* tanya jawab */
.tj dt{font-weight:700;margin-top:14px}
.tj dd{margin:4px 0 0 0;padding-left:14px;border-left:3px solid var(--biru)}
/* sisi */
.sisi{font-size:15px}
.sisi .papan{border:1px solid var(--garis);border-radius:var(--r);padding:12px 14px;margin-bottom:16px;position:sticky;top:12px}
.sisi .papan-judul{font:700 13px "Noto Sans Mono",monospace;text-transform:uppercase;letter-spacing:.08em;margin:0 0 6px}
.sisi ol{margin:0;padding-left:20px}
.sisi li{margin:4px 0}
.lanjut{display:grid;gap:10px;margin:18px 0;padding:0;list-style:none}
@media(min-width:640px){.lanjut{grid-template-columns:1fr 1fr}}
.lanjut a{display:block;min-height:44px;border:2px solid var(--tinta);border-radius:var(--r);padding:10px 12px;text-decoration:none;color:var(--tinta);background:var(--kertas)}
.lanjut a span{display:block;font:600 12px "Noto Sans Mono",monospace;color:var(--biru-tua)}
.lanjut a:hover{background:var(--latar2)}
.tombol{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;background:var(--biru);color:#fff;border-radius:var(--r);text-decoration:none;font-weight:700;border:2px solid var(--tinta)}
.tombol:hover{background:var(--biru-tua);color:#fff}
/* beranda: sampul manual */
.sampul{margin-bottom:22px;border:3px solid var(--tinta);border-radius:var(--r);display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden}
@media(min-width:860px){.sampul{grid-template-columns:1.1fr .9fr}}
.sampul-teks{padding:22px 20px;background:linear-gradient(180deg,var(--kertas) 0,var(--kertas) 70%,var(--latar2) 100%)}
.sampul-teks .seri{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.sampul-teks .seri span{font:600 12px "Noto Sans Mono",monospace;border:1px solid var(--tinta);padding:2px 8px;border-radius:var(--r)}
.sampul-teks .seri span.k{background:var(--kuning)}
.sampul-gbr{background:var(--tinta);display:flex;align-items:center}
.sampul-gbr .foto{height:100%;width:100%}
.sampul-gbr img{width:100%;height:100%;object-fit:cover;border:0;border-radius:0}
.sampul-kaki{margin:0;grid-column:1/-1;border-top:3px solid var(--tinta);display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;padding:8px 14px;font:13px "Noto Sans Mono",monospace;background:var(--kuning)}
.daftar-komponen{list-style:none;margin:10px 0;padding:0;display:grid;gap:14px}
@media(min-width:700px){.daftar-komponen{grid-template-columns:1fr 1fr}}
.daftar-komponen li{border:2px solid var(--tinta);border-radius:var(--r);padding:12px 14px;display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:start;background:var(--kertas)}
.daftar-komponen svg{width:64px;height:64px;stroke:var(--tinta);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.daftar-komponen svg .aks{stroke:var(--biru)}
.daftar-komponen svg .kun{fill:var(--kuning)}
.daftar-komponen h3{margin:0 0 4px;font-size:19px}
.daftar-komponen p{margin:0 0 6px;font-size:15px}
.daftar-komponen .kd{font:700 12px "Noto Sans Mono",monospace;color:var(--biru-tua)}
.legenda{display:grid;gap:12px;margin:12px 0;grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.legenda{grid-template-columns:repeat(3,minmax(0,1fr))}}
.legenda div{border:1px solid var(--garis);border-radius:var(--r);padding:12px}
.contoh-bulat{display:inline-flex;width:40px;height:40px;border-radius:50%;background:var(--biru);color:#fff;font-weight:800;align-items:center;justify-content:center;border:3px solid var(--tinta)}
.contoh-kuning{display:inline-block;width:40px;height:26px;background:var(--kuning);border:2px solid var(--tinta);border-radius:var(--r)}
.contoh-putus{display:inline-block;width:40px;height:26px;border:2px dashed var(--tinta);border-radius:var(--r);background:var(--latar2)}
.urutan{counter-reset:ur;list-style:none;padding:0;margin:10px 0}
.urutan li{counter-increment:ur;display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;padding:8px 0;border-bottom:1px dashed var(--garis)}
.urutan li::before{content:counter(ur,upper-alpha);font:800 18px "Noto Sans Mono",monospace;border:2px solid var(--tinta);border-radius:var(--r);height:36px;display:flex;align-items:center;justify-content:center}
/* kaki */
.kaki{border-top:3px solid var(--tinta);background:var(--latar2);margin-top:30px}
.kaki-dalam{max-width:1080px;margin:0 auto;padding:18px 16px 28px;display:grid;gap:18px;grid-template-columns:minmax(0,1fr);font-size:15px}
@media(min-width:760px){.kaki-dalam{grid-template-columns:1.3fr 1fr 1fr}}
.kaki h2{font-size:15px;border:0;margin:0 0 6px;padding:0;font-family:"Noto Sans Mono",monospace;text-transform:uppercase;letter-spacing:.08em}
.kaki ul{list-style:none;margin:0;padding:0}
.kaki li{margin:0 0 8px}
.kaki p{margin:0 0 8px}
.hak{grid-column:1/-1;border-top:1px solid var(--garis);padding-top:10px;font:13px "Noto Sans Mono",monospace;color:var(--abu)}