:root{--bg:#fff7ed;--paper:#fff;--ink:#1c1917;--ink2:#44403c;--promo:#facc15;--pen:#dc2626;--note:#1d4ed8;--line:#e7d9c6;--r:6px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.7 "Work Sans",system-ui,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--note);text-underline-offset:3px}
a:hover{color:var(--pen)}
h1,h2,h3,.disp{font-family:Anton,Impact,"Arial Narrow",sans-serif;font-weight:400;letter-spacing:.01em;line-height:1.15}
h1{font-size:clamp(30px,6vw,52px);margin:.2em 0 .35em;text-transform:uppercase}
h2{font-size:clamp(23px,3.6vw,31px);margin:2.1em 0 .6em;display:flex;gap:.5em;align-items:flex-start}
h3{font-size:21px;margin:1.6em 0 .4em;color:var(--ink2)}
p{margin:0 0 1.05em}
.skip{position:absolute;left:-999px;top:0;background:var(--promo);color:var(--ink);padding:10px 14px;z-index:9}
.skip:focus{left:8px}

/* kepala halaman */
.masthead{background:var(--ink);color:#fff}
.mh-in{max-width:1120px;margin:0 auto;padding:10px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.brandmark{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;min-height:44px}
.brandmark svg{width:38px;height:38px;flex:none}
.brandmark b{font:400 25px/1 Anton,Impact,sans-serif;letter-spacing:.04em;color:var(--promo)}
.brandmark i{display:block;font:italic 400 12px/1.2 "Work Sans",sans-serif;color:#e7e5e4;margin-top:3px}
.topnav{margin-left:auto}
.topnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.topnav a{display:inline-block;min-height:40px;padding:9px 13px;border:1px dashed #78716c;border-radius:var(--r);color:#fff;text-decoration:none;font-size:15px;line-height:20px}
.topnav a:hover,.topnav a[aria-current]{background:var(--promo);color:var(--ink);border-color:var(--promo)}

.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.crumbs{font-size:14px;margin:18px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;padding:0}
.crumbs li+li:before{content:"/";margin-right:8px;color:#a8a29e}
.crumbs a{color:var(--ink2)}

/* kolom artikel */
.sheet{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:40px}
@media(min-width:960px){.sheet{grid-template-columns:minmax(0,1fr) 290px}}
.prose{background:var(--paper);border-radius:var(--r);padding:22px 18px 30px;box-shadow:0 1px 0 var(--line),0 12px 30px -24px #7c2d12}
@media(min-width:700px){.prose{padding:34px 42px 40px}}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.25em 0}
.lede{font-size:19px;color:var(--ink2)}
.stamp{display:inline-block;font-size:13px;color:var(--ink2);border:1px solid var(--line);border-radius:var(--r);padding:3px 9px;margin-bottom:10px}
.nt-num{flex:none;display:inline-grid;place-items:center;width:1.45em;height:1.45em;margin-top:.02em;border:3px solid var(--pen);border-radius:50%;color:var(--pen);font-size:.8em;transform:rotate(-8deg)}
.srcnote{color:var(--note);font-size:15px;font-style:italic}
.pic{margin:22px 0}
.pic figcaption{font-size:14px;color:var(--ink2);margin-top:6px;border-left:3px solid var(--promo);padding-left:8px}
.pic img{border-radius:var(--r);width:100%}

/* tabel */
.tb-wrap{overflow-x:auto;margin:16px 0 22px;border-radius:var(--r);border:1px solid var(--line)}
.tb{border-collapse:collapse;width:100%;font-size:15px;min-width:420px}
.tb caption{caption-side:top;text-align:left;font-weight:600;padding:10px 12px;background:#fffbeb}
.tb th{background:var(--ink);color:#fff;text-align:left;font-weight:500;padding:8px 10px}
.tb td{padding:8px 10px;border-top:1px solid var(--line);vertical-align:top}
.tb tr:nth-child(even) td{background:#fffaf2}

/* kotak catatan */
.pad{border-radius:var(--r);padding:14px 16px 4px;margin:20px 0}
.pad-blue{background:#eff6ff;border-left:5px solid var(--note)}
.pad-red{background:#fef2f2;border-left:5px solid var(--pen)}
.pad-yel{background:#fefce8;border-left:5px solid var(--promo)}
.pad-label{font:400 16px/1.2 Anton,Impact,sans-serif;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px}
.pad-blue .pad-label{color:var(--note)}.pad-red .pad-label{color:var(--pen)}
.calc-line{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;background:#fafaf9;border:1px dashed #d6d3d1;border-radius:var(--r);padding:10px 12px;overflow-x:auto;white-space:pre-wrap}

/* peringatan risiko */
.risk{border:2px solid var(--pen);border-radius:var(--r);background:#fff;padding:14px 16px;margin:0 0 22px;position:relative}
.risk p{margin:0;font-size:15px;line-height:1.6}
.risk .risk-h{font:400 17px/1.2 Anton,Impact,sans-serif;letter-spacing:.06em;color:var(--pen);text-transform:uppercase;margin-bottom:6px}

/* brosur fiktif */
.flyer{margin:22px 0 30px;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.flyer{grid-template-columns:minmax(0,1fr) 250px}}
.fl-sheet{position:relative;background:var(--promo);border-radius:var(--r);padding:44px 20px 18px;overflow:hidden;color:var(--ink);box-shadow:6px 6px 0 var(--ink)}
.fl-sheet:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,255,255,.18) 22px 24px);pointer-events:none}
.fl-tag{position:absolute;top:10px;left:10px;background:var(--ink);color:#fff;font-size:12px;font-weight:600;letter-spacing:.14em;padding:4px 9px;border-radius:4px;z-index:2}
.fl-brand{font-size:13px;text-transform:uppercase;letter-spacing:.12em;margin:0 0 4px;font-weight:600;padding-right:92px;position:relative;z-index:2}
@media(min-width:600px){.fl-brand{padding-right:150px}}
.fl-head{font:400 clamp(30px,7.5vw,54px)/1.02 Anton,Impact,sans-serif;text-transform:uppercase;margin:0 0 12px;max-width:15ch}
.fl-sub{font-weight:600;margin:0 0 10px;font-size:17px}
.fl-list{list-style:none;padding:0;margin:0 0 12px}
.fl-list li{margin:6px 0;font-weight:500;padding-left:22px;position:relative}
.fl-list li:before{content:"\2605";position:absolute;left:0;color:var(--ink)}
.fl-x{background:linear-gradient(-4deg,transparent 45%,var(--pen) 45% 55%,transparent 55%)}
.fl-pin{display:inline-grid;place-items:center;width:26px;height:26px;text-decoration:none;border-radius:50%;background:var(--pen);color:#fff;font-size:12px;font-weight:700;margin-left:6px;vertical-align:2px;position:relative;z-index:2}
.fl-ring{position:relative;display:inline-block;padding:0 .12em}
.fl-ring svg{position:absolute;left:-12%;top:-18%;width:124%;height:136%;overflow:visible;pointer-events:none}
.fl-fine{font-size:12px;line-height:1.45;margin:10px 0 0;opacity:.88;position:relative;z-index:2}
.fl-star{position:absolute;right:-6px;top:-4px;width:96px;height:96px;transform:rotate(12deg);z-index:1}
@media(min-width:600px){.fl-star{right:14px;top:14px;width:132px;height:132px}}
.fl-notes{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start}
.fl-notes li{background:#fff;border-radius:var(--r);border:1px solid #fecaca;padding:9px 12px 9px 12px;color:var(--pen);font-style:italic;font-size:15px;line-height:1.45;transform:rotate(-.6deg)}
.fl-notes li:nth-child(even){transform:rotate(.7deg)}
.fl-notes a{color:var(--pen);text-decoration:none;display:block;min-height:24px}
.fl-notes b{font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;border:2px solid var(--pen);border-radius:50%;font-size:12px;margin-right:6px}
.flyer figcaption{grid-column:1/-1;font-size:14px;color:var(--ink2)}

/* sisi kanan */
.side{display:grid;gap:18px;align-content:start}
.side-card{background:var(--paper);border-radius:var(--r);padding:16px;border-top:5px solid var(--ink)}
.side-card .side-t{font:400 18px/1.2 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px}
.side-card ul{list-style:none;margin:0;padding:0}
.side-card li{border-top:1px dashed var(--line)}
.side-card a{display:block;padding:8px 0;min-height:24px;text-decoration:none;color:var(--ink);font-size:15px;line-height:1.4}
.side-card a:hover{color:var(--pen)}

/* FAQ */
.faq details{border-bottom:1px dashed var(--line);padding:6px 0}
.faq summary{cursor:pointer;font-weight:600;padding:8px 0;min-height:24px;list-style-position:outside}
.faq details p{margin:.4em 0 .8em}

.nextread{margin-top:28px;background:#fffbeb;border-radius:var(--r);padding:14px 16px}
.nextread p{margin:0 0 6px;font-weight:600}
.nextread ul{margin:0;padding-left:1.1em}
.nextread a{display:inline-block;padding:4px 0;min-height:24px}

/* beranda */
.front-top{display:grid;gap:22px;padding:26px 0 8px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.front-top{grid-template-columns:1.1fr .9fr;align-items:center}}
.front-top h1{font-size:clamp(34px,7vw,64px);margin:0 0 12px}
.front-top h1 em{font-style:normal;background:linear-gradient(transparent 60%,var(--promo) 60%)}
.front-top .pic{margin:0}
.desk{background:var(--paper);border-radius:var(--r);padding:20px 16px;margin:26px 0}
@media(min-width:700px){.desk{padding:30px 34px}}
.desk h2{margin-top:0}
.folders{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);margin:30px 0}
@media(min-width:780px){.folders{grid-template-columns:repeat(3,minmax(0,1fr))}}
.folder{position:relative;background:#fde68a;border-radius:0 var(--r) var(--r) var(--r);padding:20px 18px 16px;margin-top:18px}
.folder:before{content:attr(data-tab);position:absolute;top:-26px;left:0;background:#fde68a;border-radius:var(--r) var(--r) 0 0;padding:4px 14px;font-size:13px;font-weight:600;letter-spacing:.08em}
.folder h3{margin:0 0 8px;color:var(--ink);font-size:22px}
.folder h3 a{color:var(--ink);text-decoration:none}
.folder p{font-size:15px}
.folder .go{display:inline-block;min-height:40px;padding:9px 12px;border:2px solid var(--ink);border-radius:var(--r);text-decoration:none;color:var(--ink);font-weight:600;font-size:15px}
.ledger{list-style:none;counter-reset:lg;margin:0;padding:0}
.ledger li{counter-increment:lg;display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.ledger li:before{content:counter(lg,decimal-leading-zero);font:400 24px/1 Anton,Impact,sans-serif;color:var(--pen)}
.ledger a{font-weight:600;font-size:17px}
.ledger span{display:block;font-size:15px;color:var(--ink2)}
.glossary{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin:0}
@media(min-width:700px){.glossary{grid-template-columns:repeat(2,minmax(0,1fr))}}
.glossary div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.glossary dt{font:400 19px/1.2 Anton,Impact,sans-serif;letter-spacing:.03em}
.glossary dd{margin:4px 0 0;font-size:15px}
.closing{display:grid;gap:20px;grid-template-columns:minmax(0,1fr);align-items:center;margin:30px 0 40px}
@media(min-width:800px){.closing{grid-template-columns:.9fr 1.1fr}}

/* kalkulator */
.calc{background:#fff;border:2px dashed var(--ink);border-radius:var(--r);padding:16px;margin:20px 0}
.calc label{display:block;font-size:15px;font-weight:600;margin:8px 0 4px}
.calc input{width:100%;font:inherit;padding:10px;border:1px solid #a8a29e;border-radius:var(--r);min-height:44px}
.calc .row{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media(min-width:600px){.calc .row{grid-template-columns:repeat(3,minmax(0,1fr))}}
.calc output{display:block;margin-top:12px;background:#fefce8;border-radius:var(--r);padding:10px 12px;font-size:16px}

/* kaki */
.foot{background:var(--ink);color:#e7e5e4;margin-top:20px}
.foot-in{max-width:1120px;margin:0 auto;padding:30px 16px 20px;display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media(min-width:800px){.foot-in{grid-template-columns:1.2fr 1fr 1fr}}
.foot h2{font-size:18px;color:var(--promo);margin:0 0 8px;display:block;letter-spacing:.05em;text-transform:uppercase}
.foot ul{list-style:none;margin:0;padding:0}
.foot a{color:#fff;display:inline-block;padding:5px 0;min-height:24px;font-size:15px;line-height:1.4}
.foot p{font-size:14px}
.foot-base{border-top:1px solid #44403c;max-width:1120px;margin:0 auto;padding:12px 16px 24px;font-size:13px;color:#d6d3d1}
.lost{text-align:center;padding:60px 16px}