:root{
  --bg:#0a0a0b; --bg2:#101013; --bg3:#15151a;
  --line:#232329; --line2:#33333c;
  --ink:#e8e8ea; --dim:#8f8f99; --dimmer:#85858f;
  --red:#e0483d; --amber:#d99b26; --green:#3f9e6a; --blue:#5b8fd6;
  --violet:#9b7ad4; --crimson:#e56483; --grey:#85858f;
  --control:#70707c; --focus:#9dc0ea; --red-text:#f05a4e;
  --red2:#f05a4e;   /* keadaan tekan/hover tombol utama */
  --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;
  --teks:var(--ink);   /* teks isi; dibedakan dari --ink agar bisa dibalik per halaman */
  --wrap:1080px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
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}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.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 24px}
.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(--control);color:var(--ink);font-family:var(--mono);font-size:12px;padding:8px 12px 8px 30px;width:180px;border-radius:0}
.searchbox input::placeholder{color:var(--dimmer);opacity:1}
.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(--control);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}
  .mast .bar{gap:10px;padding:14px 20px}
  .mast:not(.tipis) .bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto}
  .mast:not(.tipis) .grow{display:none}
  .navtoggle{display:block;min-height:44px}
  .searchbox{min-width:0;width:100%;max-width:280px;justify-self:end}
  .searchbox input{width:100%;min-width:0;min-height:44px;font-size:16px}
  nav.main{display:none;max-height:calc(100dvh - var(--mast-bar-height,74px) - 1px);overflow-y:auto;overscroll-behavior:contain}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column}
  nav.main a{padding:13px 0;border-bottom:1px solid var(--line);min-height:44px}
  .filters button{min-height:44px}
}
@media(max-width:380px){
  .mast:not(.tipis) .bar{grid-template-columns:1fr auto}
  .mast .searchbox{grid-column:1/-1;grid-row:2;max-width:none}
  .navtoggle{grid-column:2;grid-row:1}
}

/* ── 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);max-width:100%;overflow-wrap:anywhere;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-text);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);max-width:100%;overflow-wrap:anywhere;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(min(100%,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-illustration{margin:28px 0 34px;border:1px solid var(--line);background:var(--bg)}
.article-illustration img{display:block;width:100%;height:auto}
.article-illustration figcaption{padding:12px 16px;border-top:1px solid var(--line);color:var(--dim);font-size:13px;line-height:1.6}
@media print{.article-illustration{break-inside:avoid}}
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:var(--teks);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 minmax(0,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{min-width:0;margin:0;font-size:14.5px;color:#c2c2ca;overflow-wrap:anywhere}
@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(--control);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(--control);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(--control)}
.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 minmax(0,1fr);gap:12px;align-items:start;font-size:14px;overflow-wrap:anywhere}
.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 minmax(0,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:var(--teks)}
@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(min(100%,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:var(--teks);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(--control);min-height:44px;
  font-family:var(--mono);font-size:16px;color-scheme:dark}
.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:var(--teks);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)}
.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:var(--teks);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(--dimmer);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:var(--teks);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}
}

/* alamat kontak pada halaman kebijakan dan kontak */
.alamat{font-family:var(--mono);font-size:16px;margin:0}
.alamat a{color:var(--ink);border-bottom:1px solid var(--red)}
/* ── halaman kelas ─────────────────────────────────────────────
   Satu-satunya halaman komersial di situs. Ia boleh terlihat sebagai
   halaman jual — menyamarkannya sebagai artikel justru pelanggaran —
   tetapi tetap memakai palet, jenis huruf, dan grid yang sama. Tidak ada
   gradien, tidak ada bayangan, tidak ada hitung mundur. */
.kwrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.ksec{padding:58px 0;border-top:1px solid var(--line)}
.ksec h2{font-family:var(--serif);font-size:32px;font-weight:400;margin:0 0 18px;line-height:1.22}
.ksec p{font-family:var(--text);font-size:16.5px;line-height:1.78;color:var(--teks);max-width:68ch;margin:0 0 15px}
.klede{color:var(--ink);font-size:18px}

.khero{padding:66px 0 52px}
.keyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);margin-bottom:18px}
.khero h1{font-family:var(--serif);font-size:52px;font-weight:400;line-height:1.1;
  margin:0 0 20px;max-width:19ch}
.kmikro{font-family:var(--mono);font-size:11.5px;color:var(--dimmer);line-height:1.7;margin:16px 0 0;max-width:60ch}

.kctas{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.kbtn{display:inline-block;font-family:var(--mono);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;padding:17px 30px;border:1px solid var(--line2);color:var(--ink);
  text-decoration:none}
.kbtn:hover{border-color:var(--dim)}
.kbtn.utama{background:var(--red);border-color:var(--red);color:var(--bg);font-weight:700}
.kbtn.utama:hover{background:var(--red2);border-color:var(--red2)}

.kkartu3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:26px}
.kkartu{background:var(--bg);padding:24px 20px}
.ksumbu{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.kkartu h3{font-family:var(--serif);font-size:21px;font-weight:400;margin:10px 0 8px}
.kkartu p{font-size:15px;margin:0}

.klangkah{list-style:none;margin:26px 0 0;padding:0;counter-reset:none}
.klangkah li{display:grid;grid-template-columns:44px 1fr;gap:0 14px;
  border-top:1px solid var(--line);padding:16px 0}
.klangkah b{font-family:var(--text);font-size:16.5px;font-weight:600;color:var(--ink)}
.klangkah span:last-child{grid-column:2;font-family:var(--text);font-size:15.5px;
  color:var(--teks);line-height:1.72;margin-top:4px}
.knum{font-family:var(--mono);font-size:11px;color:var(--dimmer);padding-top:5px}

.kmodulwrap{margin-top:24px;border-top:1px solid var(--line)}
.kmodul{border-bottom:1px solid var(--line)}
.kmodul summary{cursor:pointer;padding:16px 0;font-family:var(--text);font-size:17px;
  color:var(--ink);display:flex;gap:14px;align-items:baseline;list-style:none}
.kmodul summary::-webkit-details-marker{display:none}
.kmodul summary:hover{color:var(--red)}
.kmodul p{padding:0 0 18px 58px;margin:0;font-size:15.5px}

.khasil{list-style:none;margin:22px 0 0;padding:0;max-width:70ch}
.khasil li{font-family:var(--text);font-size:16.5px;line-height:1.75;color:var(--teks);
  padding:11px 0 11px 26px;border-top:1px solid var(--line);position:relative}
.khasil li::before{content:"—";position:absolute;left:0;color:var(--red)}

.kmerah{background:var(--bg2)}
.klapisan{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:26px 0 0}
.klapis b{display:block;font-family:var(--text);font-size:16px;color:var(--ink);margin:8px 0 6px}
.klapis p{font-size:14.5px;margin:0}
.ktaut{font-family:var(--mono);font-size:12px;margin-top:26px}
.ktaut a{color:var(--dim);border-bottom:1px solid var(--line2)}
.ktaut a:hover{color:var(--red);border-color:var(--red)}

.kcocok{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:24px}
.kcocok>div{background:var(--bg);padding:24px 20px}
.kcocok h3{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 14px}
.kya h3{color:var(--green)}
.ktidak h3{color:var(--red)}
.kcocok ul{list-style:none;margin:0;padding:0}
.kcocok li{font-family:var(--text);font-size:15.5px;line-height:1.7;color:var(--teks);
  padding:9px 0;border-top:1px solid var(--line)}
.kcocok li:first-child{border-top:0}

.kartefak{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:24px}
.kartefak img{width:100%;height:auto;border:1px solid var(--line)}
.kartefak figcaption{font-family:var(--mono);font-size:11px;color:var(--dimmer);
  margin-top:9px;line-height:1.6}

.kharga{font-family:var(--serif);font-size:38px;color:var(--ink);margin:0 0 18px}
.kfakta{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:0 0 26px;max-width:62ch}
.kfakta dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dimmer);padding-top:4px;white-space:nowrap}
.kfakta dd{margin:0;font-family:var(--text);font-size:16px;color:var(--ink);line-height:1.7}
/* Keadaan "pendaftaran belum dibuka" ditulis apa adanya, bukan tombol mati. */
.kbelum{font-family:var(--mono);font-size:13px;color:var(--amber);
  border-left:2px solid var(--amber);padding:12px 0 12px 16px;max-width:60ch;margin:0}

.ktanyawrap{margin-top:22px;border-top:1px solid var(--line)}
.ktanya{border-bottom:1px solid var(--line)}
.ktanya summary{cursor:pointer;padding:15px 0;font-family:var(--text);font-size:16.5px;
  color:var(--ink);list-style:none}
.ktanya summary::-webkit-details-marker{display:none}
.ktanya summary:hover{color:var(--red)}
.ktanya p{padding:0 0 16px;margin:0;font-size:15.5px}

.kpenutup{background:var(--bg2)}

/* Bilah lengket hanya untuk layar sempit, dan hanya kalau checkout ada. */

@media(max-width:860px){
  .kkartu3,.klapisan{grid-template-columns:1fr}
  .kcocok,.kartefak{grid-template-columns:1fr}
  .khero h1{font-size:38px}
  .ksec h2{font-size:26px}
}
@media(max-width:640px){
  .khero h1{font-size:32px}
  .kfakta{grid-template-columns:1fr;gap:3px 0}
  .kfakta dd{margin-bottom:12px}
  .kmodul p{padding-left:0}
  .kctas .kbtn{flex:1 1 100%;text-align:center}
}

/* ── halaman konversi: chrome tipis ────────────────────────────
   Header tanpa navigasi dan tanpa pencarian, footer tanpa cabang.
   Identitas penerbit dan disclaimer tetap ada — yang dibuang adalah
   ajakan MENJELAJAH, bukan kemampuan MEMERIKSA. */
.mast.tipis{border-bottom:1px solid var(--line)}
.mast.tipis .bar{padding-top:14px;padding-bottom:14px}
.tandaterbit{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dimmer);border:1px solid var(--line2);padding:5px 9px}
footer.tipis{border-top:1px solid var(--line);padding:34px 0 44px}
footer.tipis .fine{margin:0 0 8px}
footer.tipis a{color:var(--dim);border-bottom:1px solid var(--line2)}
footer.tipis a:hover{color:var(--red);border-color:var(--red)}

/* Satu kolom di semua lebar. Kompleksitas visual menaikkan biaya membaca
   tanpa menaikkan kepadatan informasi; tiga kolom kartu adalah kompleksitas. */
.jual .kkartu3,.jual .klapisan,.jual .kcocok,.jual .kartefak{grid-template-columns:1fr}
.jual .kwrap{max-width:760px}

/* Blok fakta di layar pertama. Kosong selama courseFacts kosong. */
.kfaktahero{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);
  padding:20px 0;margin:26px 0 0}
.kfaktahero .kharga{margin:0 0 14px}
.kfaktahero .kfakta{margin:0}

/* Modul membawa backlink arsipnya sendiri. */
.kmodulisi{padding:0 0 18px 58px}
.kmodulisi p{margin:0 0 10px}
.kbaca{font-family:var(--mono);font-size:12px;color:var(--dimmer);margin:0}
.kbaca a{color:var(--dim);border-bottom:1px solid var(--line2)}
.kbaca a:hover{color:var(--red);border-color:var(--red)}

/* Bagian arsip: satu-satunya tempat tautan keluar diizinkan, karena
   fungsinya verifikasi sebelum membayar. */
.karsip{background:var(--bg2)}
.karsiptaut{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 16px}
.karsiptaut a{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);border:1px solid var(--line2);
  padding:10px 14px;text-decoration:none}
.karsiptaut a:hover{border-color:var(--red);color:var(--red)}

.kpenawaran{background:var(--bg2)}

/* Bilah lengket aktif di SEMUA lebar, bukan hanya ponsel: CTA identik yang
   berulang, tanpa CTA pesaing. Tidak pernah memakai hitung mundur. */
.kbilah{position:fixed;left:0;right:0;bottom:0;z-index:40;
  align-items:center;justify-content:space-between;gap:14px;
  background:var(--bg2);border-top:1px solid var(--line2);padding:12px 18px}
.kbilah[hidden]{display:none}
.kbilah:not([hidden]){display:flex}
.kbilahteks{font-family:var(--serif);font-size:20px;color:var(--ink)}
.kbilah .kbtn{padding:11px 18px;white-space:nowrap}
body:has(.kbilah:not([hidden])){padding-bottom:72px}

@media(max-width:640px){
  .jual .kmodulisi{padding-left:0}
  .kbilahteks{font-size:15px}
  .kbilah{padding:10px 14px}
}

/* Strip fakta di layar pertama: angka yang bisa diperiksa, bukan janji. */
.kringkas{display:flex;flex-wrap:wrap;gap:0 22px;margin:22px 0 0;
  font-family:var(--mono);font-size:12px;color:var(--dim)}
.kringkas span{position:relative;padding-left:16px}
.kringkas span::before{content:"+";position:absolute;left:0;color:var(--red);font-weight:700}
@media(max-width:640px){.kringkas{gap:6px 0;flex-direction:column}}

/* Lencana penanda halaman berbayar tidak muat di ponsel dan hanya menambah
   derau di layar pertama. Penandaan tetap ada di footer dan di judul. */
@media(max-width:640px){.tandaterbit{display:none}}

/* ── palet halaman kelas ────────────────────────────────────────
   Keputusan pemilik: halaman ini tidak wajib hitam.

   Tanahnya diganti putih-dingin, bukan krem hangat — dunia yang dirujuk
   halaman ini adalah dokumen: laporan akun, tabel swap, lembar perjanjian.
   Krem-hangat dengan serif akan terbaca sebagai blog gaya hidup dan justru
   menjauh dari isinya.

   Merah mereknya diperdalam dari #e0483d ke #c62d20 karena merah terang
   gagal kontras di atas tanah terang. Aksen tetap merah yang sama secara
   identitas, hanya cukup gelap untuk terbaca.

   Seluruh perubahan diikat ke body.jual, jadi 54 halaman lain tidak
   tersentuh sama sekali. */
body.jual{
  --bg:#f7f8f9; --bg2:#eceef1; --bg3:#e3e6ea;
  --line:#dcdfe4; --line2:#b9bfc7;
  --ink:#16181c; --teks:#2c3037; --dim:#565c66; --dimmer:#606771;
  --red:#c62d20; --red2:#a92418;
  --red-text:#c62d20; --control:#777f8b; --focus:#c62d20;
  --amber:#8a5d0a; --green:#1e7a4a;
}

/* Keadaan pendaftaran dinyatakan di hero, bukan enam layar di bawah.
   Bukan kotak peringatan: ini keterangan, bukan kesalahan. */
.kstatus{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--dim);
  border-left:2px solid var(--line2);padding:10px 0 10px 16px;margin:22px 0 0;max-width:60ch}

/* Daftar "tidak cocok": keberatan disebut, lalu dijawab. */
.ktidak li b{display:block;font-family:var(--text);font-weight:600;color:var(--ink)}
.ktidak li span{display:block;font-family:var(--text);font-size:14.5px;color:var(--dim);
  line-height:1.65;margin-top:4px}

/* ── formulir antrean ──────────────────────────────────────────
   Bagian dari halaman, bukan kotak asing yang ditempel. Satu field,
   karena tiap field tambahan menggugurkan sebagian pendaftar. */
.kform{border:1px solid var(--line2);background:var(--bg);padding:26px 24px;margin:26px 0 0}
.kform h3{font-family:var(--serif);font-size:24px;font-weight:400;margin:0 0 8px;color:var(--ink)}
.kform>p{font-size:15.5px;margin:0 0 20px;color:var(--teks);max-width:56ch}
.kformisi label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dimmer);margin-bottom:8px}
.kformbaris{display:flex;gap:10px;flex-wrap:wrap}
.kformbaris input{flex:1 1 240px;min-width:0;font-family:var(--mono);font-size:16px;
  padding:16px 14px;background:var(--bg2);color:var(--ink);
  border:1px solid var(--control);border-radius:0}
.kformbaris input:focus{outline:2px solid var(--red);outline-offset:-2px;border-color:var(--red)}
.kformbaris input::placeholder{color:var(--dimmer)}
.kformbaris button{flex:0 0 auto;cursor:pointer;border-style:solid;border-width:1px}
.kformbaris button[disabled]{opacity:.55;cursor:progress}
/* Perangkap lebah: tidak boleh terlihat, tapi juga tidak boleh display:none
   karena sebagian bot melewati field yang benar-benar disembunyikan. */
.kjebakan{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.kformpesan{font-family:var(--mono);font-size:13px;margin:14px 0 0;min-height:1px}
.kformpesan.sukses{color:var(--green)}
.kformpesan.gagal{color:var(--red)}
.kformprivasi{font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--dimmer);
  margin:16px 0 0;max-width:60ch}
.kformprivasi a{color:var(--dim);border-bottom:1px solid var(--line2)}
.kformprivasi a:hover{color:var(--red);border-color:var(--red)}
.kformbingkai{width:100%;border:1px solid var(--line);background:var(--bg2);display:block}
@media(max-width:640px){
  .kform{padding:22px 18px}
  .kformbaris button{flex:1 1 100%}
}

/* ── lencana di atas judul ────────────────────────────────────
   Meniru struktur halaman konversi tinggi: lencana mengklasifikasi,
   judul memancing. Isinya fakta, termasuk ketika faktanya adalah
   bahwa harganya belum ditetapkan. */
.klencana{display:inline-flex;flex-wrap:wrap;gap:0 14px;align-items:center;
  margin:0 0 20px;padding:9px 16px;border:1px solid var(--line2);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim)}
.klencana span{position:relative;padding-left:16px;white-space:nowrap}
.klencana span:first-child{padding-left:0}
.klencana span:first-child::before{display:none}
.klencana span::before{content:"";position:absolute;left:6px;top:50%;
  width:3px;height:3px;border-radius:50%;background:var(--red);transform:translateY(-50%)}

.ksublabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);margin:0 0 12px}

/* ── blok "ini bukan" ── */
.kbukan{background:var(--bg2)}
.kbukanlist{list-style:none;margin:24px 0 0;padding:0;max-width:70ch}
.kbukanlist li{position:relative;padding:16px 0 16px 38px;border-top:1px solid var(--line)}
/* Penanda DIGAMBAR, bukan glyph. Versi sebelumnya memakai escape CSS untuk
   tanda kali dan escape itu rusak jadi byte NUL saat ditulis lewat shell,
   sehingga tiap butir menampilkan karakter sampah. Batang yang digambar
   tidak bisa gagal, dan tidak bergantung pada glyph yang mungkin tidak ada
   di JetBrains Mono. */
.kbukanlist li::before{content:"";position:absolute;left:6px;top:24px;
  width:18px;height:3px;background:var(--red)}
.kbukanlist b{display:block;font-family:var(--text);font-size:17.5px;font-weight:600;
  color:var(--ink);line-height:1.4}
.kbukanlist span{display:block;font-family:var(--text);font-size:15.5px;color:var(--teks);
  line-height:1.7;margin-top:5px}
.kini{border-left:2px solid var(--red);padding:4px 0 4px 18px;margin:28px 0 0;max-width:68ch}
.kini h3{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);margin:0 0 10px}
.kini p{font-family:var(--text);font-size:17px;line-height:1.75;color:var(--ink);margin:0}

/* ── tabel hitungan ──
   Inti halaman: angka yang mulanya menarik, dihitung sampai minus.
   Angkanya sengaja rata kanan dan bernomor tabular supaya bisa
   dijumlahkan ulang pembaca dengan mata. */
.khitung{background:var(--bg2)}
.khittabel{width:100%;border-collapse:collapse;margin:26px 0 0;
  font-variant-numeric:tabular-nums}
.khittabel th{text-align:left;font-weight:400;padding:16px 14px 16px 0;
  border-top:1px solid var(--line);vertical-align:top}
.khittabel th{font-family:var(--text);font-size:16.5px;color:var(--ink)}
.khittabel th span{display:block;font-family:var(--mono);font-size:11.5px;
  color:var(--dimmer);line-height:1.65;margin-top:6px;max-width:52ch}
.khittabel td{text-align:right;white-space:nowrap;padding:16px 0;
  border-top:1px solid var(--line);vertical-align:top;
  font-family:var(--mono);font-size:16px}
.khittabel td.tambah{color:var(--green)}
.khittabel td.kurang{color:var(--teks)}
.khittotal th{border-top:2px solid var(--line2);font-weight:600}
.khittotal td{border-top:2px solid var(--line2);font-size:22px;font-weight:700}
.khittotal td.kurang{color:var(--red)}
.khitpenutup{font-family:var(--text);font-size:17px;line-height:1.75;
  color:var(--ink);margin:24px 0 0;max-width:68ch}

@media(max-width:640px){
  .klencana{gap:4px 0;flex-direction:column;align-items:flex-start}
  .klencana span{padding-left:0}
  .klencana span::before{display:none}
  .khittabel th{font-size:15px;padding-right:10px}
  .khittabel td{font-size:14.5px}
  .khittotal td{font-size:19px}
}

/* ══ LAPISAN "CONTROLLED UGLY" ═══════════════════════════════════
   Tesisnya bukan jelek acak, melainkan DOKUMEN YANG DICORET-CORET:
   dunia halaman ini memang laporan akun dan pasal kontrak.

   Judul memakai mesin ketik (JetBrains Mono 700, sudah dimuat, nol
   permintaan font baru), isi tetap serif supaya terbaca. Kontras keras
   antara kepala yang dicetak mesin dan tubuh yang ditulis manusia
   adalah seluruh maksudnya.

   Semuanya dikurung body.jual: 54 halaman arsip tidak berubah. */

.jual h1,.jual .ksec h2,.jual .kform h3,.jual .kini h3{
  font-family:var(--mono);font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.05}
.jual h1{font-size:44px;margin:0 0 22px}
.jual .ksec h2{font-size:25px;letter-spacing:-.01em;margin:0 0 18px}
.jual .kform h3{font-size:19px}
.jual .kini h3{font-size:12px;letter-spacing:.14em}

/* Sorotan stabilo. Bukan gradien, bukan bayangan halus: satu blok warna
   rata, seperti spidol yang benar-benar dipakai di atas kertas. */
.ktandai{background:var(--red);color:var(--bg);padding:0 .18em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.jual h1 .ktandai{padding:0 .1em}

/* Garis dipertebal. Rambut satu piksel adalah bahasa terbitan; halaman
   ini bahasa formulir. */
.jual .ksec{border-top:3px solid var(--ink)}
.jual .kform{border:3px solid var(--ink);background:var(--bg)}
.jual .khittabel th,.jual .khittabel td{border-top:2px solid var(--line2)}
.jual .khittotal th,.jual .khittotal td{border-top:3px solid var(--ink)}
.jual .klencana{border:2px solid var(--ink)}
.jual .kkartu3,.jual .kcocok{border:3px solid var(--ink);background:var(--ink)}
.jual .kbukanlist li{border-top:2px solid var(--line2)}
.jual .kstatus{border-left:4px solid var(--ink)}
.jual .kbelum{border-left:4px solid var(--red)}
.jual .kini{border-left:5px solid var(--red)}

/* Tombol: blok penuh dengan bayangan keras tanpa blur. Tidak ada sudut
   membulat, tidak ada gradien, tidak ada transisi lembut. */
.jual .kbtn{font-weight:700;border-width:2px;letter-spacing:.06em}
.jual .kbtn.utama{box-shadow:5px 5px 0 var(--ink);border-color:var(--ink)}
.jual .kbtn.utama:active{box-shadow:0 0 0 var(--ink);transform:translate(5px,5px)}
.jual .kctas{margin-top:30px}
.jual .kbtn.utama{font-size:15px;padding:20px 30px}

/* Angka tabular di mana pun angka berbaris. */
.jual .khittabel,.jual .kfakta dd,.jual .kharga{font-variant-numeric:tabular-nums}

/* Kepadatan dinaikkan: jarak antarbagian dipendekkan, teks dirapatkan. */
.jual .ksec{padding:44px 0}
.jual .ksec p{line-height:1.68}

@media(max-width:640px){
  .jual h1{font-size:29px;letter-spacing:-.01em}
  .jual .ksec h2{font-size:20px}
  .jual .kbtn.utama{box-shadow:4px 4px 0 var(--ink);font-size:13.5px;padding:18px 20px}
}

/* Tombol sekunder ikut tegas, tapi tanpa bayangan supaya hierarkinya
   tetap satu arah: yang bercetak merah dan berbayang adalah tujuannya. */
.jual .kbtn:not(.utama){border-color:var(--ink);color:var(--ink)}
.jual .kbtn:not(.utama):hover{background:var(--ink);color:var(--bg)}

/* ── perbaikan tabrakan spesifisitas ──
   .ksec p (satu kelas + satu tipe) mengalahkan kelas utilitas seperti
   .kmikro dan .ksublabel yang hanya satu kelas, sehingga penafian dan
   label bagian diam-diam jatuh ke serif ukuran isi. Ditegakkan ulang di
   sini dengan spesifisitas yang sama tingginya. */
.ksec p.ksublabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);margin:0 0 12px;max-width:none}
.ksec p.kmikro{font-family:var(--mono);font-size:11.5px;line-height:1.7;
  color:var(--dimmer);max-width:60ch}
.ksec p.ktaut,.ksec p.karsiptaut{font-family:var(--mono);font-size:12px;max-width:none}
.ksec p.kbaca{font-family:var(--mono);font-size:12px;color:var(--dimmer);margin:0}
.ksec p.kbelum{font-family:var(--mono);font-size:13px;color:var(--amber);max-width:60ch}
.ksec p.kformprivasi{font-family:var(--mono);font-size:11.5px;color:var(--dimmer);max-width:60ch}

/* ── status batch di hero ──
   Statusnya harus dipahami tanpa bergantung pada warna maupun coretan:
   kata "selesai" dan "akan diumumkan" adalah indikator utamanya. Coretan
   dan keredupan hanya penguat. */
.batch-status{list-style:none;margin:24px 0 0;padding:0;display:flex;
  flex-wrap:wrap;gap:0 26px;font-family:var(--mono);font-size:12.5px}
.batch-status li{display:flex;align-items:baseline;gap:8px;padding:6px 0}
.batch-status li[data-status="selesai"]{color:var(--dimmer)}
.batch-status li[data-status="selesai"] s{text-decoration-color:var(--red);
  text-decoration-thickness:2px}
.batch-status li[data-status="diumumkan"]{color:var(--ink);font-weight:700}
.batch-status li[data-status="diumumkan"] span:first-child{
  border-bottom:3px solid var(--red);padding-bottom:2px}

/* Coretan pada headline: satu garis tegas warna aksen, bukan coretan panik. */
.jual h1 s{text-decoration-line:line-through;text-decoration-color:var(--red);
  text-decoration-thickness:6px;text-underline-offset:0}

@media(max-width:640px){
  .batch-status{flex-direction:column;gap:0}
  .jual h1 s{text-decoration-thickness:4px}
}

/* ── salinan final: elemen baru ───────────────────────────────── */

/* Pengunci ekspektasi di hero. Ditulis tegas karena tugasnya menutup tiga
   harapan yang salah sebelum pembaca melangkah lebih jauh. */
.khero .kkunci{font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--ink);
  border-left:4px solid var(--ink);padding:12px 0 12px 16px;margin:22px 0 0;max-width:62ch}

/* Dua pertanyaan yang diadu: yang salah dicoret redup, yang benar disorot.
   Ini inti pergeseran keyakinan halaman, jadi ia diberi ruang sendiri. */
.ktanyaadu{border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  padding:24px 0;margin:28px 0}
.ksec p.klabelkecil{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dimmer);margin:0 0 6px;max-width:none}
.ksec p.ksalah{font-family:var(--serif);font-size:26px;line-height:1.25;color:var(--dimmer);
  text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:3px;
  margin:0 0 22px;max-width:none}
.ksec p.kbenar{font-family:var(--serif);font-size:26px;line-height:1.25;color:var(--ink);
  margin:0;max-width:none}
.ksec p.kobjection{font-family:var(--mono);font-size:12.5px;line-height:1.75;color:var(--dim);
  border-left:2px solid var(--line2);padding-left:16px;max-width:64ch}

/* Tiga sumber selisih, masing-masing membawa keraguannya sendiri. */
.ksumber{border-top:3px solid var(--ink);padding:26px 0 4px}
.ksumber h3{font-family:var(--serif);font-size:23px;font-weight:400;line-height:1.3;
  margin:8px 0 12px;color:var(--ink)}
.ksumber .ksumbu{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);margin:0}

/* Keberatan dipasang tepat di titik keraguan muncul. Pertanyaan dimiringkan,
   jawaban diberi tanah berbeda supaya pasangannya terbaca sebagai satu unit. */
.kragu{background:var(--bg2);border-left:4px solid var(--red);padding:18px 20px;margin:20px 0 0}
.ksec p.kraguq{font-family:var(--text);font-size:16px;font-style:italic;color:var(--ink);
  margin:0 0 10px;max-width:60ch}
.ksec p.kraguj{font-family:var(--text);font-size:15.5px;line-height:1.7;color:var(--teks);
  margin:0;max-width:66ch}

/* Kalimat penutup bagian: lebih tenang dari isi, lebih tegas dari catatan. */
.ksec p.kpenutupkecil{font-family:var(--text);font-size:17px;line-height:1.6;color:var(--ink);
  border-top:1px solid var(--line2);padding-top:18px;margin-top:26px;max-width:68ch}

/* Urutan kerja kelas, ditulis sebagai satu baris mesin ketik. */
.ksec p.kurutan{font-family:var(--mono);font-size:14px;line-height:1.8;color:var(--ink);
  background:var(--bg2);border:2px solid var(--ink);padding:16px 18px;margin:6px 0 0;max-width:none}

/* Daftar larangan garis merah. */
.klarangan{list-style:none;margin:18px 0 0;padding:0;max-width:64ch}
.klarangan li{font-family:var(--text);font-size:15.5px;line-height:1.7;color:var(--teks);
  padding:8px 0 8px 26px;position:relative;border-top:1px solid var(--line)}
.klarangan li::before{content:"";position:absolute;left:2px;top:17px;
  width:12px;height:3px;background:var(--red)}

/* Empat pertanyaan penutup: dibaca sebagai daftar periksa, bukan prosa. */
.kpertanyaan{list-style:none;margin:22px 0 0;padding:0;max-width:64ch}
.kpertanyaan li{font-family:var(--mono);font-weight:700;font-size:16px;line-height:1.5;
  color:var(--ink);padding:12px 0;border-top:1px solid var(--line2)}
.ksec p.kakhir{font-family:var(--serif);font-size:24px;color:var(--ink);margin:24px 0 0;max-width:none}

@media(max-width:640px){
  .ksec p.ksalah,.ksec p.kbenar{font-size:20px}
  .ksec p.kakhir{font-size:20px}
  .kragu{padding:16px 14px}
  .ksec p.kurutan{font-size:12.5px}
}

/* Anchor targets stay below the masthead at every viewport width. */
main[id],main [id]{scroll-margin-top:calc(var(--mast-height,148px) + 18px)}
@media(max-width:860px){
  main[id],main [id]{scroll-margin-top:calc(var(--mast-height,74px) + 18px)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{
  .answer p,.riskrow dd{color:#222}
  .badge,.gr,.flow .flow-edge-hot text{color:#333;fill:#333}
  .flow{background:#fff}
  .flow .flow-hot rect{fill:#fff;stroke:#555}
  .flow .flow-hot text{fill:#111}
  main[id],main [id]{scroll-margin-top:0}
}