:root{--ground:#121210;--paper:#1A1A17;--paper2:#212120;--ink:#EFEFE9;--ink2:#C9C9C1;--ink3:#8C8C84;--rule:rgba(239,239,233,.12);--rule2:rgba(239,239,233,.22);--hot:#FF6A33;--ok:#4FB286;--info:#5B9BD5;--warn:#E0A33A;--bad:#E5484D}
@media (prefers-color-scheme:light){:root{--ground:#E8E8E4;--paper:#F2F2EF;--paper2:#FBFBF9;--ink:#16160F;--ink2:#3A3A33;--ink3:#6F6F66;--rule:rgba(22,22,15,.12);--rule2:rgba(22,22,15,.24);--hot:#FF5A1F;--ok:#1F8A5B;--info:#2F6DB5;--warn:#A86A00;--bad:#C4262E}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--ground);color:var(--ink);font:15.5px/1.65 "IBM Plex Sans",system-ui,-apple-system,sans-serif}
a{color:inherit}.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header{border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--ground);z-index:5}
.bar{display:flex;align-items:center;gap:18px;height:60px}.bar nav{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
.bar nav a{font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.04em;text-decoration:none;color:var(--ink2);padding:9px 12px;border-radius:999px}
.bar nav a:hover{background:rgba(128,128,120,.16);color:var(--ink)}
.bar nav a.cta{background:var(--hot);color:#fff}.logo{display:flex;align-items:center}
@media (max-width:640px){.bar nav a.opsi{display:none}}
main.wrap{padding-top:30px;padding-bottom:60px}.jejak{font:500 11px/1.5 "IBM Plex Mono",monospace;color:var(--ink3);letter-spacing:.04em;margin-bottom:18px}
.jejak a{color:var(--ink3);text-decoration:none}.jejak a:hover{color:var(--hot)}
h1{font:700 clamp(28px,5vw,44px)/1.1 "Chakra Petch",system-ui,sans-serif;margin:0 0 10px;letter-spacing:-.01em}
h2{font:700 20px/1.25 "Chakra Petch",system-ui,sans-serif;margin:34px 0 12px}
.sub{color:var(--ink3);margin:0 0 16px}.lede{color:var(--ink2);font-size:17px;max-width:70ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.chip{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border:1px solid var(--rule2);color:var(--ink2);border-radius:3px}
.chip.hot{color:var(--hot);border-color:var(--hot)}.chip.ok{color:var(--ok);border-color:var(--ok)}.chip.info{color:var(--info);border-color:var(--info)}.chip.warn{color:var(--warn);border-color:var(--warn)}.chip.bad{color:var(--bad);border-color:var(--bad)}
.kotak{background:var(--paper);border:1px solid var(--rule);padding:18px 20px;margin:16px 0}
.kunci{list-style:none;padding:0;margin:0;display:grid;gap:8px}.kunci li{display:flex;gap:10px;align-items:center;color:var(--ink2)}
.kunci li::before{content:"";width:8px;height:8px;background:var(--hot);flex:none}
.ajak{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:var(--paper);border:1px solid var(--hot);padding:18px 20px;margin:26px 0}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:13px 18px;border-radius:999px;background:var(--hot);color:#fff}
.btn.garis{background:transparent;color:var(--ink);border:1px solid var(--rule2)}
.daftar{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.daftar li{background:var(--ground)}.daftar a{display:block;padding:12px 14px;text-decoration:none;height:100%}.daftar a:hover{background:var(--paper)}
.daftar b{display:block;font-weight:600}.daftar small{display:block;color:var(--ink3);font-size:12.5px;line-height:1.45;margin-top:2px}
.materi{display:grid;gap:12px}.materi article{background:var(--paper);border:1px solid var(--rule);padding:16px 18px}
.materi h3{font:700 17px/1.3 "Chakra Petch",system-ui,sans-serif;margin:0 0 6px}.materi p{margin:0 0 10px;color:var(--ink2)}
.meta{font:500 11px/1.4 "IBM Plex Mono",monospace;color:var(--ink3);letter-spacing:.04em}
.bagian{margin:8px 0 0;padding-left:18px;color:var(--ink3);font-size:13.5px}
.catatan{font-size:13px;color:var(--ink3);border-top:1px solid var(--rule);margin-top:34px;padding-top:16px}
footer{border-top:1px solid var(--rule);padding:26px 0 40px;color:var(--ink3);font-size:13px}footer a{color:var(--ink2)}
.kolom{columns:2 260px;column-gap:28px}.kolom section{break-inside:avoid;margin-bottom:22px}.kolom h2{margin-top:0}
.kolom ul{list-style:none;padding:0;margin:0}.kolom li a{display:block;padding:5px 0;text-decoration:none;color:var(--ink2)}.kolom li a:hover{color:var(--hot)}