:root{
  --bg:#0a0a0b; --bg2:#101013; --bg3:#15151a;
  --line:#232329; --line2:#33333c;
  --ink:#e8e8ea; --dim:#8f8f99; --dimmer:#63636d;
  --red:#e0483d; --amber:#d99b26; --green:#3f9e6a; --blue:#5b8fd6;
  --violet:#9b7ad4; --crimson:#c8365c; --grey:#6f6f79;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  /* Teks isi memakai serif. Ini keputusan identitas, bukan sekadar selera:
     serif untuk teks isi membaca sebagai publikasi, bukan sebagai halaman produk. */
  --text:'Source Serif 4',Georgia,'Times New Roman',serif;
  --wrap:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--bg);padding:8px 12px;z-index:99}

/* ── masthead ── */
.mast{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;background:var(--bg)}
.mast .bar{display:flex;align-items:center;gap:18px;padding:14px 0}
.brand{font-family:var(--serif);font-size:25px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;line-height:1}
.brand span{color:var(--red)}
.desc{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dimmer);border-left:1px solid var(--line2);padding-left:18px;line-height:1.4}
.mast .grow{flex:1}
.searchbox{position:relative}
.searchbox input{background:var(--bg2);border:1px solid var(--line2);color:var(--ink);font-family:var(--mono);font-size:12px;padding:8px 12px 8px 30px;width:180px;border-radius:0;outline:none}
.searchbox input:focus{border-color:var(--blue)}
.searchbox::before{content:"⌕";position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--dimmer);font-size:14px}
.navtoggle{display:none;background:none;border:1px solid var(--line2);color:var(--ink);font-family:var(--mono);font-size:11px;padding:8px 12px;cursor:pointer}
nav.main{border-top:1px solid var(--line)}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0}
nav.main a{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);text-decoration:none;padding:12px 16px 12px 0;margin-right:8px}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--red)}
@media(max-width:860px){
  .desc{display:none}
  .navtoggle{display:block}
  .searchbox input{width:120px}
  nav.main{display:none}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column}
  nav.main a{padding:11px 0;border-bottom:1px solid var(--line)}
}

/* ── hero ── */
.hero{border-bottom:1px solid var(--line);padding:54px 0 46px}
.hero .tag{border-left:3px solid var(--red);padding-left:12px;display:inline-block}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,6.6vw,72px);line-height:1.02;margin:16px 0 0;letter-spacing:-.012em;max-width:19ch}
.hero p.lede{font-size:18.5px;color:var(--dim);max-width:64ch;margin:24px 0 0}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.btn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:14px 22px;border:1px solid var(--line2);color:var(--ink);display:inline-block}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:700}
.btn.primary:hover{background:#fff}

/* ── disclaimer ── */
.warn{border:1px solid var(--line2);border-left:3px solid var(--amber);background:var(--bg2);padding:18px 20px;font-size:14px;color:var(--dim);margin:34px 0 0}
.warn b{color:var(--amber);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:7px}

/* ── layer banner ── */
.layerbanner{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2);padding:34px 0}
.layerbanner h2{font-family:var(--serif);font-weight:400;font-size:30px;margin:0 0 6px;letter-spacing:-.01em}
.layerbanner p{color:var(--dim);margin:0;max-width:62ch;font-size:15px}
.layerbanner .in{display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* ── sections ── */
section{padding:58px 0 6px}
.h2{font-family:var(--serif);font-weight:400;font-size:32px;margin:8px 0 8px;letter-spacing:-.01em}
.lede{color:var(--dim);max-width:68ch;margin:0 0 28px}

/* ── status + grade badges ── */
.badge{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--line2);white-space:nowrap;display:inline-block;line-height:1.4}
.s-green{color:var(--green);border-color:rgba(63,158,106,.5)}
.s-blue{color:var(--blue);border-color:rgba(91,143,214,.5)}
.s-red{color:var(--red);border-color:rgba(224,72,61,.5)}
.s-amber{color:var(--amber);border-color:rgba(217,155,38,.5)}
.s-violet{color:var(--violet);border-color:rgba(155,122,212,.5)}
.s-crimson{color:var(--crimson);border-color:rgba(200,54,92,.5)}
.s-grey{color:var(--grey);border-color:rgba(111,111,121,.5)}
.gr{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;padding:4px 7px;border:1px solid var(--line2);color:var(--dim);white-space:nowrap;display:inline-block;line-height:1.4}
.gr-A{color:#8fd3ac;border-color:rgba(63,158,106,.45)}
.gr-B{color:#9dc0ea;border-color:rgba(91,143,214,.45)}
.gr-C{color:#e2c078;border-color:rgba(217,155,38,.45)}
.gr-D{color:#b9757d;border-color:rgba(200,54,92,.45)}
.unverif{border:1px solid rgba(200,54,92,.5);background:rgba(200,54,92,.07);color:#e6a3ae;font-family:var(--mono);font-size:10px;letter-spacing:.11em;padding:9px 12px;margin:14px 0;text-transform:uppercase;line-height:1.5}

/* ── filters ── */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.filters button{background:none;border:1px solid var(--line2);color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;padding:8px 12px;cursor:pointer}
.filters button:hover{color:var(--ink);border-color:var(--dim)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.filters button b{font-weight:400;color:var(--dimmer);margin-left:3px}
.filters button[aria-pressed="true"] b{color:var(--bg);opacity:.65}
.filters button:disabled{opacity:.35;cursor:not-allowed;border-style:dashed}
.filters button:disabled:hover{color:var(--dim);border-color:var(--line2)}
.count{font-family:var(--mono);font-size:11px;color:var(--dimmer);margin:0 0 18px}

/* ── cards ── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.card{border:1px solid var(--line);background:var(--bg2);padding:20px;display:flex;flex-direction:column;text-decoration:none;min-height:100%}
.card:hover{border-color:var(--line2);background:var(--bg3)}
.card .top{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.card .mech{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dimmer);margin-bottom:6px}
.card h3{font-size:17.5px;font-weight:600;margin:0 0 9px;letter-spacing:-.01em;line-height:1.32}
.card p{color:var(--dim);font-size:14px;margin:0 0 16px;flex:1}
.card .foot{border-top:1px solid var(--line);padding-top:12px;font-family:var(--mono);font-size:10.5px;color:var(--dimmer);line-height:1.6}
.card .foot b{color:var(--dim);font-weight:400}
.empty{border:1px dashed var(--line2);padding:34px;text-align:center;color:var(--dimmer);font-family:var(--mono);font-size:12px}

/* ── article ── */
.artwrap{max-width:820px;margin:0 auto;padding:0 24px}
.crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);padding:26px 0 0}
.crumb a{color:var(--dim);text-decoration:none}
.crumb a:hover{color:var(--ink)}
article h1{font-size:clamp(30px,5vw,50px);max-width:24ch;margin:14px 0 0}
.metaline{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:22px 0 0}
.dek{font-size:18px;color:var(--dim);margin:20px 0 0;max-width:60ch}
.answer{border:1px solid var(--line2);border-left:3px solid var(--blue);background:var(--bg2);padding:20px 22px;margin:30px 0 0}
.answer .ah{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:0 0 10px;font-weight:500}
.answer p{margin:0;font-size:15.5px;color:#cfcfd6}
article h2{font-family:var(--serif);font-weight:400;font-size:27px;margin:46px 0 4px;letter-spacing:-.01em;scroll-margin-top:80px}
article h2 .n{font-family:var(--mono);font-size:11px;color:var(--dimmer);letter-spacing:.1em;display:block;margin-bottom:8px}
article p{font-size:17.5px;color:#c9c9d0;max-width:68ch;line-height:1.74}
article .note{font-size:14px;color:var(--dim);border-left:2px solid var(--line2);padding-left:14px;margin:18px 0}

/* ── risk grid ── */
.riskgrid{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line);margin-top:14px}
.riskrow{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}
.riskrow dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dimmer);padding-top:3px}
.riskrow dd{margin:0;font-size:14.5px;color:#c2c2ca}
@media(max-width:640px){.riskrow{grid-template-columns:1fr;gap:5px}}
.norisk{font-family:var(--mono);font-size:11px;color:var(--amber);border:1px solid rgba(217,155,38,.35);padding:12px 14px;margin-top:16px;letter-spacing:.05em}

/* ── diagram aliran nilai ── */
.flow{margin:26px 0 0;padding:0;border:1px solid var(--line);background:#0c0d10}
.flow svg{display:block;width:100%;height:auto}
.flow .flow-tall{display:none;max-width:380px;margin:0 auto}
.flow .flow-side{font-family:var(--mono);font-size:10px;letter-spacing:.04em}
@media(max-width:700px){.flow .flow-wide{display:none}.flow .flow-tall{display:block}}
.flow figcaption{border-top:1px solid var(--line);padding:11px 16px;font-size:13px;color:var(--dimmer);line-height:1.55}
.flow .flow-title{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;fill:var(--dimmer)}
.flow .flow-node rect{fill:var(--bg2);stroke:var(--line2);stroke-width:1}
.flow .flow-node text{font-family:var(--text);font-size:13.5px;fill:var(--dim)}
.flow .flow-hot rect{stroke:rgba(224,72,61,.55);fill:rgba(224,72,61,.06)}
.flow .flow-hot text{fill:var(--ink)}
.flow .flow-edge line,.flow .flow-edge path{stroke:var(--line2);stroke-width:1.25}
.flow .flow-edge text{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;fill:var(--dimmer)}
.flow .ahead{fill:var(--line2)}
.flow .flow-edge-hot line,.flow .flow-edge-hot path{stroke:var(--red);stroke-width:1.75}
.flow .flow-edge-hot text{fill:var(--red)}
.flow .ahead-hot{fill:var(--red)}
.flow .flow-note{font-family:var(--mono);font-size:11px;fill:var(--dim)}
@media(max-width:640px){.flow figcaption{padding:10px 12px;font-size:12.5px}}

/* ── garis waktu perkara ── */
.tl{max-width:820px;margin-left:auto;margin-right:auto}
.tl .tl-axis{stroke:var(--line2);stroke-width:1}
.tl .tl-ev circle{fill:var(--bg2);stroke:var(--dim);stroke-width:1.5}
.tl .tl-band{fill:rgba(143,143,153,.28)}
.tl .tl-date{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;fill:var(--dim)}
.tl .tl-label{font-family:var(--text);font-size:12.5px;fill:var(--dimmer)}
.tl .tl-gap{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;fill:var(--dimmer)}
.tl .tl-hot circle{fill:rgba(224,72,61,.18);stroke:var(--red);stroke-width:2}
.tl .tl-hot .tl-date{fill:var(--red)}
.tl .tl-hot .tl-label{fill:var(--ink)}
.tl .tl-hot .tl-band{fill:rgba(224,72,61,.24)}
@media(max-width:700px){.tl .tl-label{font-size:12px}}

/* ── diagram tiga lapisan ── */
.lay{max-width:880px;margin-left:auto;margin-right:auto}
.lay .lay-ring rect{fill:none;stroke-width:1}
.lay .lay-r0 rect{stroke:var(--line2)}
.lay .lay-r1 rect{stroke:rgba(91,143,214,.5)}
.lay .lay-r2 rect{stroke:rgba(217,155,38,.5)}
.lay .lay-label{font-family:var(--text);font-size:13px;font-weight:600;fill:var(--dim)}
.lay .lay-r1 .lay-label{fill:#9dc0ea}
.lay .lay-r2 .lay-label{fill:#e2c078}
.lay .lay-note{font-family:var(--mono);font-size:10px;letter-spacing:.05em;fill:var(--dimmer)}
.lay .lay-fail{font-family:var(--mono);font-size:10px;letter-spacing:.05em;fill:var(--dimmer)}
.lay .lay-core{fill:rgba(63,158,106,.09);stroke:rgba(63,158,106,.55);stroke-width:1.25}
.lay .lay-coretext{font-family:var(--text);font-size:13.5px;font-weight:600;fill:#8fd3ac}
@media(max-width:700px){.lay .lay-label{font-size:12.5px}.lay .lay-note,.lay .lay-fail{font-size:9.5px}}

/* ── source drawer ── */
.drawer{border:1px solid var(--line);background:var(--bg2);margin-top:20px}
.drawer > summary{list-style:none;cursor:pointer;padding:15px 18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);display:flex;justify-content:space-between;gap:12px}
.drawer > summary::-webkit-details-marker{display:none}
.drawer > summary:hover{color:var(--ink)}
.drawer[open] > summary{border-bottom:1px solid var(--line)}
.drawer .inner{padding:8px 18px 18px}
.srclist{list-style:none;margin:0;padding:0}
.srclist li{padding:13px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:14px}
.srclist li:last-child{border-bottom:0}
.srclist a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(91,143,214,.3)}
.srclist a:hover{border-bottom-color:var(--blue)}
.srclist .nolink{color:var(--dim)}

/* ── case file ── */
.case{border:1px solid var(--line);background:var(--bg2);margin-bottom:14px}
.case > summary{list-style:none;cursor:pointer;padding:18px 20px;display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:start}
.case > summary::-webkit-details-marker{display:none}
.case > summary:hover{background:var(--bg3)}
.cid{font-family:var(--mono);font-size:11.5px;color:var(--dimmer);padding-top:3px}
.ctitle{font-size:17px;font-weight:600;letter-spacing:-.01em;display:block;line-height:1.35}
.cwho{display:block;font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:7px;line-height:1.55}
.cbadges{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.case .body{padding:6px 20px 24px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.row:last-of-type{border-bottom:0}
.row dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dimmer);padding-top:3px}
.row dd{margin:0;font-size:14.5px;color:#c9c9d0}
@media(max-width:640px){.row{grid-template-columns:1fr;gap:5px}}

/* ── tables & panels ── */
.panel{border:1px solid var(--line);background:var(--bg2);padding:22px}
.panel h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px;color:var(--red)}
.panel.ok h3{color:var(--green)}
.panel ul{margin:0;padding-left:18px;color:var(--dim);font-size:14.5px}
.panel li{margin-bottom:9px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}
.deflist{border-top:1px solid var(--line)}
.defrow{display:grid;grid-template-columns:210px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.defrow dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.defrow dd{margin:0;color:var(--dim);font-size:14.5px}
@media(max-width:640px){.defrow{grid-template-columns:1fr;gap:6px}}

/* ── tabel kondisi vs penghadang ── */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:16px}
table.cb{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
table.cb th,table.cb td{text-align:left;padding:14px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.cb th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dimmer);border-bottom-color:var(--line2)}
table.cb td:first-child{width:34%;color:var(--ink)}
table.cb td:last-child{color:var(--dim)}
table.cb td b{color:var(--ink)}
table.cb tr:last-child td{border-bottom:0}
.cbnum{font-family:var(--mono);font-size:10.5px;color:var(--dimmer);display:block;margin-bottom:5px}

/* ── redline list ── */
.redgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.redcard{border:1px solid var(--line);border-left:2px solid var(--red);background:var(--bg2);padding:16px 18px}
.redcard b{display:block;font-size:15px;margin-bottom:5px}
.redcard span{color:var(--dim);font-size:13.5px}

/* ── newsletter ── */
.news{border:1px solid var(--line2);border-left:3px solid var(--line2);background:var(--bg2);padding:34px;margin-top:22px}
.news h3{font-family:var(--serif);font-weight:400;font-size:29px;margin:0 0 4px}
.news .tl{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.news p{color:var(--dim);max-width:56ch;font-size:14.5px;margin:0 0 20px}
.news small{display:block;margin-top:14px;color:var(--dimmer);font-family:var(--mono);font-size:10.5px}

/* ── related ── */
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:14px}
.rel a{border:1px solid var(--line);background:var(--bg2);padding:15px 17px;text-decoration:none;display:block}
.rel a:hover{border-color:var(--line2);background:var(--bg3)}
.rel .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dimmer);display:block;margin-bottom:6px}
.rel .t{font-size:14.5px;font-weight:500;line-height:1.4}

/* ── legend (mobile) ── */
.legend{border:1px solid var(--line);background:var(--bg2);margin-top:22px}
.legend > summary{list-style:none;cursor:pointer;padding:14px 18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.legend > summary::-webkit-details-marker{display:none}
.legend .inner{padding:4px 18px 18px;border-top:1px solid var(--line)}
.legend .lrow{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--dim)}
.legend .lrow:last-child{border-bottom:0}
@media(max-width:640px){.legend .lrow{grid-template-columns:1fr;gap:6px}}

/* ── footer ── */
footer{border-top:1px solid var(--line);margin-top:76px;padding:38px 0 56px;color:var(--dimmer);font-size:13.5px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
@media(max-width:760px){footer .cols{grid-template-columns:1fr}}
footer .fh{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 12px;font-weight:500}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:8px}
footer a{color:var(--dimmer);text-decoration:none}
footer a:hover{color:var(--ink)}
footer .fine{max-width:66ch;line-height:1.65}

/* ── 404 ── */
.four{padding:90px 0;text-align:center}
.four h1{margin:0 auto;max-width:20ch}
.four p{color:var(--dim);max-width:52ch;margin:18px auto 30px}

/* ── print ── */
@media print{
  :root{--bg:#fff;--bg2:#fff;--bg3:#fff;--ink:#111;--dim:#333;--dimmer:#555;--line:#ccc;--line2:#999}
  body{background:#fff;color:#111;font-size:11pt}
  .mast,.filters,.searchbox,.navtoggle,nav.main,.news,.ctas,footer .cols,.legend,.rel{display:none !important}
  .drawer,.case{border:1px solid #ccc}
  .drawer > summary{display:none}
  .drawer .inner{padding:0}
  details:not([open]) > *:not(summary){display:block !important}
  .case > summary{padding:10px 0}
  .case .body{padding:0}
  a{color:#111;text-decoration:none}
  .srclist a::after{content:" (" attr(href) ")";font-size:8pt;color:#555;word-break:break-all}
  article h2{margin-top:22px;page-break-after:avoid}
  .answer,.riskrow,.card{page-break-inside:avoid}
  .hero{padding:20px 0}
}


/* ── Blok revisi ─────────────────────────────────────────────
   Koreksi ditampilkan, tidak disembunyikan. */
.revisi{margin-top:36px}
.revisilist{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0;
  border-left:3px solid var(--amber);padding:14px 0 14px 18px}
.revisilist dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber);white-space:nowrap;padding-top:3px}
.revisilist dd{margin:0;font-size:15.5px;color:#c9c9d0;line-height:1.7}
@media(max-width:600px){.revisilist{grid-template-columns:1fr;gap:4px 0}
  .revisilist dd{margin-bottom:10px}}

/* ── Pelat ukiran di hero ────────────────────────────────────
   Digambar sebagai SVG dari data. Susunannya mengikuti marka situs: dua massa
   padat dan celah berwarna di antaranya, dibuat menjulang lebih tinggi daripada
   keduanya. Tiga tinta, dijaga check.js bagian 19.

   Tidak ada lapisan grain. Sempat ada, dan itu keliru: rect ber-blend screen
   mengangkat seluruh bidang perseginya, jadi pelat terlihat duduk di dalam
   kotak yang lebih terang alih-alih mengambang di halaman. */
.herogrid{display:grid;grid-template-columns:1fr;gap:30px;align-items:center}
.plate{margin:0}
.plate svg{display:block;width:100%;height:auto}
.plate figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dimmer);margin-top:12px;line-height:1.7}
.pl-bar{fill:url(#plhatch);stroke:#e8e8ea;stroke-width:.9}
.pl-axis{fill:none;stroke:#e8e8ea;stroke-width:1}
.pl-tick{fill:none;stroke:#e8e8ea;stroke-width:1}
.pl-brace{fill:none;stroke:#8f8f99;stroke-width:1}
.pl-gly{fill:none;stroke:#8f8f99;stroke-width:1.05}
.pl-lead{fill:none;stroke:#8f8f99;stroke-width:.9;stroke-dasharray:1.6 3.2;opacity:.66}
/* celah: satu-satunya unsur berwarna, dan yang paling tegas garisnya */
.pl-gap{fill:none;stroke:var(--red);stroke-width:1.6}
.pl-measure{fill:none;stroke:var(--red);stroke-width:1.1;opacity:.8}
@media(min-width:900px){
  .herogrid{grid-template-columns:minmax(0,1fr) 340px;gap:52px}
}
@media(max-width:899px){
  /* Pelat ini hiasan bermakna, bukan isi. Pada layar sempit ia akan mendorong
     tombol dan disclaimer jauh ke bawah lipatan, jadi ia dilepas. */
  .plate{display:none}
}
@media print{.plate{display:none}}

/* ── Alat ────────────────────────────────────────────────────────
   Formulir dan tabel. Sudut tetap tajam, tanpa gradien, mengikuti aturan
   anti-slop yang dijaga check.js bagian 18. */
.swapform{display:grid;gap:20px;margin:28px 0 24px}
.swapform fieldset{border:1px solid var(--line);padding:16px 18px 18px;margin:0;background:var(--bg2)}
.swapform legend{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dimmer);padding:0 8px}
.swapform label{display:block;margin-top:12px;font-size:13.5px;color:var(--dim)}
.swapform label:first-of-type{margin-top:4px}
.swapform input,.swapform select{display:block;width:100%;margin-top:5px;padding:9px 10px;
  background:var(--bg);color:var(--ink);border:1px solid var(--line2);
  font-family:var(--mono);font-size:14px}
.swapform input:focus,.swapform select:focus{outline:2px solid var(--red);outline-offset:1px}
.swapform small{display:block;margin-top:5px;font-size:11.5px;color:var(--dimmer);line-height:1.6}
@media(min-width:820px){
  .swapform{grid-template-columns:1fr 1fr;gap:20px}
  .swapshared{grid-column:1 / -1}
  .swapshared>label{display:inline-block;width:calc(33.333% - 14px);margin-right:14px;vertical-align:top}
}
.swapout{margin:6px 0 30px}
.swaptable{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13px}
.swaptable caption{text-align:left;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dimmer);padding-bottom:10px}
.swaptable th,.swaptable td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:right}
.swaptable thead th{color:var(--dim);font-weight:400;border-bottom:1px solid var(--line2)}
.swaptable tbody th{text-align:left;color:var(--dim);font-weight:400}
.swaptable .plus{color:var(--green)}
.swaptable .minus{color:var(--red)}
.swapnote{font-size:13px;color:var(--dimmer);line-height:1.7;margin-top:12px}
.rumus{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:16px 0 0}
.rumus dt{font-size:14px;color:var(--dim)}
.rumus dd{margin:0}
.rumus code{font-family:var(--mono);font-size:12.5px;color:var(--ink);
  background:var(--bg2);border:1px solid var(--line);padding:3px 7px;display:inline-block}
@media(max-width:600px){.rumus{grid-template-columns:1fr;gap:3px 0}.rumus dd{margin-bottom:12px}
  .swaptable{font-size:11.5px}.swaptable th,.swaptable td{padding:7px 5px}}
.catatan{margin:14px 0 0;padding-left:20px}
.catatan li{font-size:15px;color:#c9c9d0;line-height:1.72;margin-bottom:10px}
.toollinks{list-style:none;margin:14px 0 0;padding:0}
.toollinks li{border-left:2px solid var(--line2);padding:2px 0 2px 14px;margin-bottom:9px}
.toollinks a{font-size:14.5px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line2)}
.toollinks a:hover{border-bottom-color:var(--red)}

/* checklist */
.ckprogress{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dimmer);margin:26px 0 12px}
.cklist{list-style:none;margin:0;padding:0}
.ckitem{border:1px solid var(--line);border-left:3px solid var(--line2);
  background:var(--bg2);padding:16px 18px;margin-bottom:12px}
.ckitem.done{border-left-color:var(--green);opacity:.62}
.ckhead{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.ckbox{margin:4px 0 0;width:16px;height:16px;flex:none;accent-color:#3f9e6a}
.cknum{font-family:var(--mono);font-size:11px;color:var(--dimmer);padding-top:3px;flex:none}
.cktitle{font-size:16.5px;color:var(--ink);line-height:1.5}
.ckbody{padding-left:28px;margin-top:10px}
.ckbody p{font-size:14.5px;color:#c9c9d0;line-height:1.72;margin:0 0 9px;max-width:68ch}
.ckbody b{color:var(--dim);font-weight:600}
.rates{border:1px solid var(--line);border-left:3px solid var(--blue);
  background:var(--bg2);padding:16px 18px 14px;margin:0 0 30px}
.rates h2{margin-top:0}
.ratetable{border-collapse:collapse;font-family:var(--mono);font-size:13px;margin:4px 0 12px}
.ratetable th{text-align:left;color:var(--dim);font-weight:400;padding:5px 22px 5px 0}
.ratetable td{text-align:right;color:var(--ink);padding:5px 0}
.ratenote{font-size:13px;color:var(--dimmer);line-height:1.7;margin:0 0 8px;max-width:68ch}
.ratenote:last-child{margin-bottom:0}
.ratenote a{color:var(--dim)}

/* ── Blok alat di dalam artikel ──────────────────────────────
   Tiap tautan membawa alasan kemunculannya. Tanpa alasan, ia terbaca
   sebagai promosi internal. */
.toolbox{margin-top:36px}
.toolboxlist{list-style:none;margin:0;padding:0}
.toolboxlist li{border-left:3px solid var(--blue);background:var(--bg2);
  padding:13px 16px;margin-bottom:10px}
.toolboxlist a{display:block;font-size:16px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line2);padding-bottom:3px;margin-bottom:6px}
.toolboxlist a:hover{border-bottom-color:var(--red)}
.toolboxlist span{display:block;font-size:14px;color:var(--dim);line-height:1.7}

/* ── Glosarium ───────────────────────────────────────────────
   Tiap istilah adalah bagian yang dapat ditautkan langsung. Empat bidang
   ditampilkan sebagai daftar definisi supaya strukturnya terbaca mesin
   maupun manusia, dan salah paham diberi penanda merah karena itu yang
   paling mahal bila terlewat. */
.termjump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 40px;padding:0}
.termjump a{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);text-decoration:none;
  border:1px solid var(--line2);padding:8px 11px;background:var(--bg2)}
.termjump a:hover{border-color:var(--red);color:var(--ink)}
.termjump span{color:var(--dimmer);margin-left:5px}
.termgroup{margin-bottom:46px;scroll-margin-top:20px}
.term{border-top:1px solid var(--line);padding:22px 0 4px;scroll-margin-top:20px}
.term h3{font-family:var(--serif);font-size:24px;font-weight:400;margin:0 0 14px;
  line-height:1.3;color:var(--ink)}
.term .asli{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dimmer);margin-top:5px}
.term .anchor{color:var(--line2);text-decoration:none;margin-right:9px;font-family:var(--mono);font-size:16px}
.term .anchor:hover{color:var(--red)}
.termdl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:0 0 14px}
.termdl dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dimmer);padding-top:4px;white-space:nowrap}
.termdl dt.sp{color:var(--red)}
.termdl dd{margin:0;font-size:15.5px;color:#c9c9d0;line-height:1.72;max-width:68ch}
.termdl dd.sp{color:var(--ink)}
@media(max-width:640px){
  .termdl{grid-template-columns:1fr;gap:3px 0}
  .termdl dd{margin-bottom:13px}
  .term h3{font-size:21px}
}