:root{
  --bg:#fafaf9;--ink:#1c1917;--ink-soft:#44403c;--line:#d6d3d1;
  --lime:#4d7c0f;--lime-deep:#3f6212;--lime-wash:#ecf3dc;
  --sky:#0369a1;--sky-wash:#e3f0f8;--paper:#fffef5;--warn:#9a3412;
  --r:4px;--mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --head:"Sofia Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Crimson Text",Georgia,"Times New Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.18rem;line-height:1.62;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--sky);text-underline-offset:3px}
a:hover{color:var(--lime-deep)}
h1,h2,h3,h4{font-family:var(--head);line-height:1.2;color:var(--ink);letter-spacing:-.01em}
h1{font-size:clamp(1.85rem,5vw,2.7rem);margin:.3em 0 .45em;font-weight:800}
h2{font-size:clamp(1.4rem,3.4vw,1.8rem);margin:1.8em 0 .55em;font-weight:750}
h3{font-size:1.2rem;margin:1.4em 0 .4em;font-weight:700}
p,ul,ol{margin:0 0 1em}
li{margin:.25em 0}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 14px}
.skip:focus{left:8px;z-index:10}

/* ---------- kepala ---------- */
.kop{background:var(--ink);color:#f5f5f4;border-bottom:4px solid var(--lime)}
.kop-in{max-width:1120px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.merek{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--head);font-weight:800;font-size:1.3rem;min-height:44px}
.merek img{width:36px;height:36px}
.merek span b{color:#a3e635;font-weight:800}
.lajur{font-family:var(--head);font-size:.98rem;width:100%}
.lajur ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 4px}
.lajur a{display:flex;align-items:center;min-height:40px;padding:0 10px;color:#e7e5e4;text-decoration:none;border-radius:var(--r)}
.lajur a:hover,.lajur a[aria-current]{background:#292524;color:#bef264}
@media (min-width:900px){.lajur{width:auto}}

/* ---------- tata letak ---------- */
.bingkai{max-width:1120px;margin:0 auto;padding:0 16px}
.susun{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding:22px 0 56px}
@media (min-width:980px){.susun{grid-template-columns:minmax(0,1fr) 290px}}
.jejak{font-family:var(--head);font-size:.92rem;color:var(--ink-soft);margin:0 0 4px}
.jejak ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px}
.jejak li+li::before{content:"›";margin-right:4px;color:#a8a29e}
.catatan-tgl{font-family:var(--mono);font-size:.82rem;color:var(--ink-soft);border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);padding:6px 0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:6px 18px}
.naskah{max-width:760px}
.naskah .pembuka{font-size:1.28rem;color:var(--ink-soft)}
.foto{margin:0 0 22px}
.foto img{border-radius:var(--r);width:100%}
.foto figcaption{font-size:.95rem;color:var(--ink-soft);margin-top:6px;font-style:italic}

/* ---------- struk ---------- */
.struk{--gigi:14px;background:var(--paper);color:var(--ink);padding:26px 20px 30px;margin:1.4em 0;font-family:var(--mono);font-size:.9rem;line-height:1.55;
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--gigi) 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--gigi) 51% repeat-x;
  mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--gigi) 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--gigi) 51% repeat-x}
.bayang{filter:drop-shadow(0 1px 0 #d6d3d1) drop-shadow(0 4px 8px rgba(28,25,23,.12))}
.struk .judul-struk{font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:.08em;text-align:center;font-size:.95rem;margin:0 0 4px}
.struk .sub-struk{text-align:center;font-size:.8rem;color:var(--ink-soft);margin:0 0 10px}
.struk dl{margin:0}
.struk .baris{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border-bottom:1px dotted #cfccc6}
.struk .baris dt{flex:1 1 auto}
.struk .baris dd{margin:0;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.struk .jumlah{border-bottom:none;border-top:2px dashed var(--ink);margin-top:6px;padding-top:7px;font-weight:700}
.struk .kaki-struk{font-size:.8rem;color:var(--ink-soft);margin:10px 0 0;text-align:center}
.struk p{font-size:.88rem}

/* ---------- tabel ---------- */
.gulir{overflow-x:auto;margin:1.2em 0 1.5em;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table{border-collapse:collapse;width:100%;font-size:1rem;min-width:420px}
caption{text-align:left;font-family:var(--head);font-weight:700;padding:10px 12px;font-size:.98rem;background:var(--lime-wash)}
th,td{padding:8px 12px;border-bottom:1px solid #e7e5e4;text-align:left;vertical-align:top}
th{font-family:var(--head);font-size:.95rem;background:#f5f5f4}
td.n{font-family:var(--mono);font-size:.9rem;text-align:right;white-space:nowrap}

/* ---------- kotak ---------- */
.papan{border-left:5px solid var(--sky);background:var(--sky-wash);padding:14px 16px;border-radius:0 var(--r) var(--r) 0;margin:1.4em 0}
.papan.risiko{border-color:var(--warn);background:#fbeee6}
.papan strong{font-family:var(--head)}
.daftar-cek{list-style:none;padding:0}
.daftar-cek li{padding-left:30px;position:relative}
.daftar-cek li::before{content:"";position:absolute;left:4px;top:.45em;width:14px;height:14px;border:2px solid var(--lime);border-radius:2px}
.langkah{counter-reset:lk;list-style:none;padding:0}
.langkah>li{counter-increment:lk;position:relative;padding:0 0 0 48px;margin:0 0 14px}
.langkah>li::before{content:counter(lk,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--mono);font-weight:700;background:var(--lime);color:#fff;border-radius:var(--r);padding:1px 6px;font-size:.9rem}

/* ---------- tanya jawab ---------- */
.tanya details{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin:0 0 10px}
.tanya summary{cursor:pointer;padding:12px 14px;min-height:44px;font-family:var(--head);font-weight:700;list-style:none}
.tanya summary::-webkit-details-marker{display:none}
.tanya summary h3{display:inline;font-size:1.05rem;margin:0}
.tanya summary::after{content:"+";float:right;font-family:var(--mono);color:var(--lime)}
.tanya details[open] summary::after{content:"−"}
.tanya .jawab{padding:0 14px 12px}

/* ---------- baca juga ---------- */
.sambung{margin-top:2.4em;border-top:2px dashed var(--line);padding-top:10px}
.sambung ul{list-style:none;padding:0;display:grid;gap:10px}
@media(min-width:640px){.sambung ul{grid-template-columns:1fr 1fr}}
.sambung a{display:block;min-height:44px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);font-family:var(--head);font-weight:600}
.sambung a small{display:block;font-family:var(--body);font-weight:400;color:var(--ink-soft);font-size:.95rem}
.sambung a:hover{border-color:var(--lime)}

/* ---------- samping ---------- */
.rel{align-self:start;position:sticky;top:16px}
.rel .kepala-rel{font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:.07em;font-size:.85rem;color:var(--lime-deep);margin:0 0 6px}
.rel ol{list-style:none;margin:0 0 18px;padding:0;border-left:2px solid var(--line)}
.rel li{margin:0}
.rel a{display:block;padding:9px 12px;min-height:40px;color:var(--ink);text-decoration:none;font-family:var(--head);font-size:.98rem;margin-left:-2px;border-left:2px solid transparent}
.rel a:hover,.rel a[aria-current]{border-left-color:var(--lime);color:var(--lime-deep);background:var(--lime-wash)}
.rel .tahap{font-family:var(--mono);font-size:.78rem;color:#78716c;margin:10px 0 2px 12px}
@media(max-width:979px){.rel{position:static}}

/* ---------- simulator ---------- */
.mesin{border:2px solid var(--ink);border-radius:var(--r);padding:16px;background:#fff;margin:1.4em 0}
.mesin .isian{display:grid;gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:520px){.mesin .isian{grid-template-columns:minmax(0,1fr)}}
.mesin label{font-family:var(--head);font-size:.95rem;font-weight:600;display:block}
.mesin input{display:block;width:100%;min-width:0;min-height:44px;margin-top:4px;padding:8px 10px;border:1px solid #a8a29e;border-radius:var(--r);font-family:var(--mono);font-size:1rem;background:var(--paper)}
.mesin input:focus{outline:2px solid var(--lime);outline-offset:1px}
.mesin .ket{font-size:.95rem;color:var(--ink-soft);margin:10px 0 0}

/* ---------- tombol ---------- */
.tombol{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:var(--lime);color:#fff;border-radius:var(--r);text-decoration:none;font-family:var(--head);font-weight:700}
.tombol:hover{background:var(--lime-deep);color:#fff}
.tombol.garis{background:transparent;color:var(--lime-deep);border:2px solid var(--lime)}

/* ---------- beranda ---------- */
.gerbang{background:linear-gradient(180deg,#f3f7ea 0,var(--bg) 100%);border-bottom:1px solid var(--line)}
.gerbang-in{display:grid;gap:28px;padding-top:34px;padding-bottom:40px;align-items:center}
@media(min-width:900px){.gerbang-in{grid-template-columns:1.15fr .85fr}}
.gerbang .cap{font-family:var(--mono);font-size:.85rem;color:var(--lime-deep);letter-spacing:.05em;margin:0}
.gerbang h1{font-size:clamp(2rem,6vw,3.2rem)}
.gerbang .aksi{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.rantai{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));counter-reset:rt}
.rantai li{counter-increment:rt;background:#fff;border:1px solid var(--line);border-top:4px solid var(--lime);border-radius:var(--r);padding:12px 12px 10px;position:relative;margin:0}
.rantai .kode{font-family:var(--mono);font-size:.82rem;color:var(--sky);display:block;font-style:normal}
.rantai b{font-family:var(--head);display:block;font-size:1.05rem}
.rantai span{font-size:.98rem;color:var(--ink-soft)}
.rantai a{font-family:var(--head);font-size:.95rem;display:inline-block;padding:6px 0;min-height:24px}
.bagian{padding:34px 0}
.bagian.garis-atas{border-top:1px dashed var(--line)}
.tri-struk{display:grid;gap:26px}
@media(min-width:760px){.tri-struk{grid-template-columns:repeat(3,1fr)}}
.tri-struk .struk{margin:0}
.tri-struk .tautan-struk{display:inline-flex;margin-top:10px;min-height:44px;align-items:center;font-family:var(--head);font-weight:700;color:var(--lime-deep)}
.rak{display:grid;gap:18px}
@media(min-width:760px){.rak{grid-template-columns:1fr 1fr}}
.rak section{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.rak h3{margin:0 0 8px;display:flex;gap:10px;align-items:baseline}
.rak h3 i{font-style:normal;font-family:var(--mono);font-size:.8rem;color:var(--sky)}
.rak ul{list-style:none;padding:0;margin:0}
.rak li{border-top:1px dotted var(--line);margin:0}
.rak li a{display:block;padding:10px 0;min-height:44px;text-decoration:none;color:var(--ink);font-family:var(--head);font-weight:600}
.rak li a small{display:block;font-family:var(--body);font-weight:400;color:var(--ink-soft);font-size:.98rem}
.pembaca{display:grid;gap:24px;align-items:center}
@media(min-width:860px){.pembaca{grid-template-columns:.9fr 1.1fr}}
.pembaca img{border-radius:var(--r)}
.pisah{display:grid;gap:16px}
@media(min-width:700px){.pisah{grid-template-columns:1fr 1fr}}
.pisah>div{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:#fff}
.pisah>div.tidak{border-color:#e7c3ad;background:#fdf6f1}
.pisah h3{margin-top:0}

/* ---------- kaki ---------- */
.kaki{background:#1c1917;color:#d6d3d1;font-family:var(--head);font-size:.98rem;margin-top:10px}
.kaki-in{max-width:1120px;margin:0 auto;padding:28px 16px 20px;display:grid;gap:22px}
@media(min-width:760px){.kaki-in{grid-template-columns:1.4fr 1fr 1fr}}
.kaki p{margin:0 0 8px}
.kaki .kaki-judul{color:#bef264;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem}
.kaki ul{list-style:none;margin:0;padding:0}
.kaki a{color:#f5f5f4;display:inline-block;padding:6px 0;min-height:32px}
.kaki .garis-bawah{grid-column:1/-1;border-top:1px solid #44403c;padding-top:12px;font-family:var(--mono);font-size:.8rem;color:#a8a29e}
.kosong{text-align:center;padding:60px 16px}
.struk-rumus code{display:block;font-family:var(--mono);font-size:.9rem;background:var(--paper);border:1px dashed #a8a29e;border-radius:var(--r);padding:10px 12px;white-space:normal;word-break:break-word}