/* ===== Pelajari Lebih Lanjut (baca di layar) + gaya cetak PDF ===== */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;padding:5px;background:var(--surface);border:1px solid var(--line);border-radius:14px;width:fit-content;max-width:100%}
.tabs a{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14.5px}
.tabs a:hover{background:var(--soft)}
.tabs a[aria-current=page]{background:var(--c,var(--brand));color:#fff}
.ico{width:1.1em;height:1.1em;flex:none;vertical-align:-.15em}
.readbar{position:fixed;left:0;top:0;height:4px;width:0;background:linear-gradient(90deg,var(--c,#1F7A54),#f59e0b);z-index:50;transition:width .1s}
.mat{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;align-items:start}
@media(max-width:980px){.mat{grid-template-columns:1fr}.mat-toc{position:static!important}}
.mat-toc{position:sticky;top:78px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;max-height:calc(100vh - 100px);overflow:auto}
.mat-toc h4{margin:0 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mat-toc a{display:flex;gap:8px;padding:7px 8px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:13.5px;line-height:1.3}
.mat-toc a:hover,.mat-toc a.on{background:var(--soft)}
.mat-toc a.on{box-shadow:inset 3px 0 0 var(--c,var(--brand))}
.mat-toc .n{color:var(--c,var(--brand));font-weight:700;min-width:2.1em}
.mat-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:2px 0 14px}
.mat-tools .grow{flex:1}
.seg2{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg2 button{border:0;background:var(--surface);color:var(--ink);padding:8px 12px;font:600 14px var(--font);cursor:pointer}
.seg2 button:hover{background:var(--soft)}
.btn.sm{padding:8px 14px;font-size:14px}
.btn.alt{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.page{--fs:18px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(18px,4vw,44px);box-shadow:var(--shadow);font-size:var(--fs);line-height:1.78;max-width:100%}
.page .lede{margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.page .lede .kick{font:700 12px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--c,var(--brand))}
.page .lede h1{margin:.2em 0 .25em;font-size:1.7em;line-height:1.2}
.page .lede .meta{color:var(--muted);font-size:.8em}
.page h2{display:flex;gap:.6em;align-items:baseline;margin:1.9em 0 .6em;font-size:1.38em;line-height:1.25;scroll-margin-top:84px;padding-top:.3em;border-top:2px solid var(--soft)}
.page h2 .num{flex:none;color:#fff;background:var(--c,var(--brand));border-radius:8px;padding:.05em .5em;font-size:.78em;font-weight:700}
.page h3{margin:1.5em 0 .4em;font-size:1.1em;color:var(--c,var(--brand))}
.page p{margin:.75em 0;max-width:72ch;hyphens:auto}
.page code{font:.88em var(--mono);background:var(--soft);padding:.08em .35em;border-radius:5px}
.lst{margin:.7em 0;padding-left:1.3em;max-width:72ch}.lst li{margin:.35em 0}.lst li::marker{color:var(--c,var(--brand))}
.co{margin:1.3em 0;border-radius:14px;border:1px solid var(--cc);background:var(--cb);overflow:hidden;break-inside:avoid;page-break-inside:avoid}
.co-h{display:flex;gap:9px;align-items:center;padding:9px 16px;background:var(--cc);color:#fff;font-size:.82em;letter-spacing:.02em}
.co-b{padding:6px 18px 10px;font-size:.95em;line-height:1.7}.co-b p{margin:.55em 0;max-width:none}
.co.tujuan{--cc:#1F7A54;--cb:#eef8f2}.co.def{--cc:#1D4ED8;--cb:#eef3ff}.co.keliru{--cc:#B45309;--cb:#fff6e6}.co.tip{--cc:#0F766E;--cb:#e9f9f6}
.co.note{--cc:#6D28D9;--cb:#f3eeff}.co.contoh{--cc:#BE185D;--cb:#fdf0f6}.co.coba{--cc:#C2410C;--cb:#fff1ea}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .co{--cb:rgba(255,255,255,.04)}}
.co .soal{font-weight:600}.co .jadi{margin-top:.8em;padding:.6em .9em;border-left:4px solid var(--cc);background:rgba(0,0,0,.04);border-radius:0 8px 8px 0;font-weight:600}
.steps{counter-reset:s;list-style:none;margin:.6em 0;padding:0}.steps li{counter-increment:s;position:relative;padding:.35em 0 .35em 2.5em}
.steps li::before{content:counter(s);position:absolute;left:0;top:.35em;width:1.7em;height:1.7em;border-radius:50%;background:var(--cc);color:#fff;font-size:.8em;display:grid;place-items:center;font-weight:700}
.tugas{margin:.6em 0;padding-left:1.4em}.tugas li{margin:.4em 0}.tugas li::marker{color:var(--cc);font-weight:700}
figure{margin:1.2em 0}figure.kode{border-radius:12px;overflow:hidden;background:#10231a;color:#d7f5e6;break-inside:avoid}
figure.kode figcaption{display:flex;gap:8px;align-items:center;padding:7px 14px;background:#0a1a12;color:#8be0b6;font:700 12px var(--font)}
figure.kode pre{margin:0;padding:12px 16px;overflow:auto;font:14px/1.55 var(--mono);white-space:pre}figure.kode code{background:none;padding:0;font:inherit}
figure.tabel{break-inside:avoid}figure.tabel>figcaption{font-weight:700;font-size:.88em;margin-bottom:.45em;color:var(--c,var(--brand))}
.tw{overflow:auto;border-radius:12px;border:1px solid var(--line)}
.page table{width:100%;border-collapse:collapse;font-size:.88em;line-height:1.5}
.page th{background:var(--c,var(--brand));color:#fff;text-align:left;padding:.55em .8em}
.page td{padding:.5em .8em;border-top:1px solid var(--line);vertical-align:top}.page tr:nth-child(even) td{background:var(--soft)}
.src{color:var(--muted);font-size:.78em;margin-top:.4em}
figure.gbr{text-align:center;break-inside:avoid}figure.gbr img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:#fff;padding:6px}
figure.gbr figcaption{font-size:.82em;color:var(--muted);margin-top:.5em;line-height:1.45}
.glos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin:.8em 0}
.glos div{padding:10px 14px;border:1px solid var(--line);border-left:4px solid var(--c,var(--brand));border-radius:10px;break-inside:avoid}
.glos dt{font-weight:700}.glos dd{margin:.15em 0 0;font-size:.88em;color:var(--muted)}
.pustaka{font-size:.82em;line-height:1.55;padding-left:1.6em}.pustaka li{margin:.45em 0;padding-left:.2em;word-break:break-word}
.next{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:26px}
.nx{display:flex;gap:12px;align-items:center;padding:16px;border-radius:14px;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:var(--shadow)}
.nx:hover{filter:brightness(1.06);transform:translateY(-1px)}.nx b{display:block}.nx small{opacity:.9}.nx .ico{width:1.8em;height:1.8em}
.pdfbox{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 16px;border-radius:14px;background:var(--soft);margin-bottom:16px}
.pdfbox span{color:var(--muted);font-size:14px}

/* ===== halaman cetak (cetak.html → PDF) ===== */
body.cetak{background:#fff;color:#14231c;display:block;min-height:0}
body.cetak .page{border:0;box-shadow:none;padding:0;border-radius:0;font-size:11pt;line-height:1.6;background:#fff}
body.cetak .page h2{break-after:avoid;margin-top:1.4em}body.cetak .page h3{break-after:avoid}
body.cetak .page p{max-width:none;orphans:3;widows:3}
body.cetak .co,body.cetak figure,body.cetak .glos div{break-inside:avoid}
body.cetak figure.kode pre{white-space:pre-wrap;word-break:break-word;font-size:9pt}
body.cetak .tw{overflow:visible}
body.cetak .cover{display:flex;gap:16px;align-items:center;padding:16px 20px;margin-bottom:18px;border-radius:14px;color:#fff;background:linear-gradient(120deg,var(--c,#1F7A54),#0b3d2a)}
body.cetak .cover .lg{display:grid;place-items:center;width:54px;height:54px;border-radius:12px;background:rgba(255,255,255,.18);font:700 20px var(--mono)}
body.cetak .cover .t1{font:700 10pt var(--font);letter-spacing:.12em;text-transform:uppercase;opacity:.9}
body.cetak .cover .t2{font:800 19pt/1.15 var(--font);margin:2px 0}
body.cetak .cover .t3{font-size:10pt;opacity:.92}
body.cetak .lede{display:none}
@page{size:A4;margin:22mm 16mm 20mm}