:root{--latar:#f8fafc;--tinta:#1e293b;--redup:#475569;--garis:#dbe2ea;--kartu:#ffffff;--aksen:#1e293b;--r:12px;
--f-judul:"Spline Sans",system-ui,sans-serif;--f-isi:"Gelasio",Georgia,serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--latar);color:var(--tinta);font:17px/1.7 var(--f-isi)}
img{max-width:100%;height:auto;display:block}
a{color:var(--aksen);text-underline-offset:3px}
h1,h2,h3,.merek,.sabuk,.tombol,.pita,th,summary,.kaki{font-family:var(--f-judul)}
h1{font-size:clamp(1.7rem,4.6vw,2.55rem);line-height:1.18;margin:.3em 0 .45em;letter-spacing:-.01em}
h2{font-size:clamp(1.3rem,3.2vw,1.65rem);line-height:1.3;margin:1.9em 0 .6em}
h3{font-size:1.14rem;line-height:1.35;margin:1.4em 0 .4em}
p,ul,ol{margin:0 0 1.05em}
.lompat{position:absolute;left:-999px;top:0;background:#fff;padding:10px}
.lompat:focus{left:8px;z-index:9}
.atap{background:#fff;border-bottom:1px solid var(--garis)}
.atap-dalam{max-width:1120px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.merek{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:1.25rem;color:var(--tinta);text-decoration:none;min-height:44px}
.merek small{font-weight:400;font-size:.8rem;color:var(--redup);display:block;line-height:1.1}
.sabuk{flex:1 1 100%;display:flex;gap:8px;overflow-x:auto;padding:4px 0 6px;scrollbar-width:thin}
.sabuk a{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border-radius:999px;
 border:1.5px solid var(--c,#94a3b8);color:var(--tinta);text-decoration:none;font-size:.9rem;background:#fff;white-space:nowrap}
.sabuk a svg{width:18px;height:18px;color:var(--c)}
.sabuk a[aria-current]{background:var(--c);color:#fff}
.sabuk a[aria-current] svg{color:#fff}
@media(min-width:900px){.sabuk{flex:1 1 auto;justify-content:flex-end;flex-wrap:wrap}}
main{display:block}
.lebar{max-width:1120px;margin:0 auto;padding:0 16px}
.baca{max-width:760px;margin:0 auto;padding:0 16px}
.jejak{font-family:var(--f-judul);font-size:.86rem;color:var(--redup);margin:18px 0 0}
.jejak ol{list-style:none;padding:0;margin:0}
.jejak li{display:inline}
.jejak li+li:before{content:"›";margin:0 6px;color:#94a3b8}
.jejak a{color:var(--redup)}
.pita{background:var(--aksen);color:#fff;border-radius:0 0 var(--r) var(--r)}
.pita-dalam{max-width:760px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:10px;font-size:.92rem;letter-spacing:.02em}
.pita svg{width:26px;height:26px;flex:0 0 auto}
.pita.pelangi{background:linear-gradient(90deg,#374151,#b45309,#059669,#0284c7,#7c3aed,#dc2626,#2563eb)}
.info-tulisan{font-family:var(--f-judul);font-size:.88rem;color:var(--redup);margin:-.2em 0 1.2em}
.lead{font-size:1.12rem;color:#334155}
figure{margin:1.4em 0}
.foto img{border-radius:var(--r);width:100%}
figcaption{font-size:.85rem;color:var(--redup);margin-top:6px;font-family:var(--f-judul)}
.gulir{overflow-x:auto;margin:1.2em 0 1.5em;border:1px solid var(--garis);border-radius:var(--r);background:#fff}
table{border-collapse:collapse;width:100%;font-size:.95rem;line-height:1.5}
caption{text-align:left;padding:12px 14px 4px;font-family:var(--f-judul);font-weight:600;font-size:.95rem}
th,td{padding:10px 14px;border-bottom:1px solid var(--garis);text-align:left;vertical-align:top}
th{font-size:.86rem;background:#f1f5f9;font-weight:600}
tr:last-child td{border-bottom:0}
.dua-sisi{display:grid;gap:0;border:2px solid var(--aksen);border-radius:var(--r);overflow:hidden;margin:1.6em 0;background:#fff}
.dua-sisi>div{padding:14px 18px}
.dua-sisi>div+div{border-top:1px dashed var(--garis)}
.dua-sisi h2{margin:0;padding:12px 18px;background:var(--aksen);color:#fff;font-size:1.05rem}
.dua-sisi h3{margin:.2em 0 .4em;font-size:1rem;display:flex;align-items:center;gap:8px}
.dua-sisi h3:before{content:"";width:12px;height:12px;border-radius:3px;background:var(--aksen)}
.dua-sisi .risiko h3:before{background:transparent;border:2px solid var(--aksen)}
.dua-sisi ul{margin:0;padding-left:1.1em}
@media(min-width:680px){.dua-sisi{grid-template-columns:1fr 1fr}.dua-sisi h2{grid-column:1/-1}.dua-sisi>div+div{border-top:0;border-left:1px dashed var(--garis)}}
.catat{border-left:5px solid var(--aksen);background:#fff;padding:12px 16px;border-radius:0 var(--r) var(--r) 0;margin:1.4em 0;font-size:.97rem}
.catat strong{font-family:var(--f-judul)}
.hitung{background:#0f172a;color:#e2e8f0;border-radius:var(--r);padding:14px 18px;margin:1.3em 0;font-size:.95rem}
.hitung b{color:#fff}
.tanya{margin:1.2em 0}
.tanya details{border:1px solid var(--garis);border-radius:var(--r);background:#fff;margin-bottom:10px}
.tanya summary{cursor:pointer;padding:12px 16px;list-style:none;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.tanya summary::-webkit-details-marker{display:none}
.tanya summary:after{content:"+";font-size:1.3rem;color:var(--aksen)}
.tanya details[open] summary:after{content:"–"}
.tanya summary h3{margin:0;font-size:1rem}
.tanya .jawab{padding:0 16px 12px}
.tetangga{display:grid;gap:10px;margin:1em 0 2.4em;padding:0;list-style:none}
@media(min-width:620px){.tetangga{grid-template-columns:1fr 1fr}}
.tetangga a{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 14px;border-radius:var(--r);background:#fff;
 border:1px solid var(--garis);border-left:6px solid var(--c);text-decoration:none;color:var(--tinta);font-family:var(--f-judul);font-size:.95rem}
.tetangga svg{width:22px;height:22px;color:var(--c);flex:0 0 auto}
.tombol{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:var(--r);background:var(--c,var(--aksen));
 color:#fff;text-decoration:none;font-weight:600;font-size:.93rem;border:0;cursor:pointer}
/* beranda */
.pembuka{display:grid;gap:22px;padding:26px 0 8px;align-items:center}
@media(min-width:900px){.pembuka{grid-template-columns:1.05fr .95fr}}
.pembuka .foto{margin:0}
.legenda{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--f-judul);font-size:.85rem;color:var(--redup);padding:0;list-style:none;margin:0}
.legenda li{display:flex;align-items:center;gap:6px}
.legenda i{width:12px;height:12px;border-radius:3px;background:var(--c);display:inline-block}
.ubin-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin:18px 0 8px}
.ubin{position:relative;background:#fff;border-radius:var(--r);border:1px solid var(--garis);padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.ubin:before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--c)}
.ubin .ik{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c)}
.ubin .ik svg{width:28px;height:28px}
.ubin h3{margin:.3em 0 0;font-size:1.12rem}
.ubin p{margin:0;font-size:.95rem;color:#334155}
.ubin .tombol{align-self:flex-start;margin-top:auto}
.ubin .dorong-utama{font-size:.88rem;color:var(--redup);margin-bottom:6px}
.ubin .dorong-utama b{font-family:var(--f-judul);color:var(--tinta)}
tbody th{background:#fff;font-size:.93rem}
.ubin[data-dampak]:after{position:absolute;top:14px;right:14px;font-family:var(--f-judul);font-size:.78rem;padding:3px 9px;border-radius:999px;border:1.5px solid var(--c)}
.ubin[data-dampak="tekan"]:after{content:"cenderung tertekan";background:#fff1f2;border-color:#be123c;color:#9f1239}
.ubin[data-dampak="bantu"]:after{content:"bisa terbantu";background:#ecfdf5;border-color:#047857;color:#065f46}
.ubin[data-dampak="campur"]:after{content:"campuran";background:#f8fafc;border-color:#64748b;color:#334155}
.kompas{background:#0f172a;color:#e2e8f0;border-radius:var(--r);padding:20px 18px;margin:30px 0}
.kompas h2{color:#fff;margin-top:0}
.kompas-pilih{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.kompas-pilih button{font-family:var(--f-judul);font-size:.92rem;min-height:44px;padding:8px 14px;border-radius:var(--r);border:1.5px solid #475569;background:transparent;color:#e2e8f0;cursor:pointer}
.kompas-pilih button[aria-pressed="true"]{background:#f8fafc;color:#0f172a;border-color:#f8fafc}
.kompas-hasil{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));padding:0;margin:0;list-style:none}
.kompas-hasil li{background:#1e293b;border-radius:10px;padding:10px 12px;border-left:5px solid var(--c);font-size:.93rem;line-height:1.5}
.kompas-hasil b{font-family:var(--f-judul);display:block;color:#fff}
.kompas-hasil em{font-style:normal;font-family:var(--f-judul);font-size:.8rem;color:#cbd5e1}
.kompas p{margin:.4em 0}
.kompas .kecil{font-size:.88rem;color:#cbd5e1}
.panduan-deret{display:grid;gap:14px;margin:14px 0 30px;padding:0;list-style:none;counter-reset:pd}
.panduan-deret li{counter-increment:pd;background:#fff;border:1px solid var(--garis);border-radius:var(--r);padding:14px 16px 14px 62px;position:relative}
.panduan-deret li:before{content:counter(pd,decimal-leading-zero);position:absolute;left:16px;top:14px;font-family:var(--f-judul);font-weight:700;font-size:1.3rem;color:#94a3b8}
.panduan-deret h3{margin:0 0 .2em;font-size:1.05rem}
.panduan-deret p{margin:0;font-size:.95rem}
.dua-kolom{display:grid;gap:22px;align-items:start}
@media(min-width:900px){.dua-kolom{grid-template-columns:1.2fr .8fr}}
.redaksi-catat{background:#fff;border:1px dashed #94a3b8;border-radius:var(--r);padding:16px 18px;margin:10px 0 36px;font-size:.96rem}
/* redaksi */
.lakukan{display:grid;gap:12px;margin:1em 0 1.6em}
@media(min-width:620px){.lakukan{grid-template-columns:1fr 1fr}}
.lakukan>div{background:#fff;border:1px solid var(--garis);border-radius:var(--r);padding:12px 16px}
.lakukan h3{margin:.2em 0 .5em}
.lakukan ul{margin:0;padding-left:1.1em}
.kaki{background:#0f172a;color:#cbd5e1;margin-top:40px;font-size:.93rem}
.kaki-dalam{max-width:1120px;margin:0 auto;padding:28px 16px 18px;display:grid;gap:18px}
@media(min-width:760px){.kaki-dalam{grid-template-columns:1.2fr 1fr 1fr 1fr}}
.kaki h2{font-size:.95rem;color:#fff;margin:0 0 8px;letter-spacing:.03em}
.kaki ul{list-style:none;margin:0;padding:0}
.kaki li a{display:flex;align-items:center;min-height:36px;color:#cbd5e1;text-decoration:none}
.kaki li a:hover{color:#fff;text-decoration:underline}
.kaki p{margin:0 0 8px;line-height:1.55}
.kaki .bawah{grid-column:1/-1;border-top:1px solid #334155;padding-top:12px;font-size:.84rem;color:#94a3b8}
.kaki a.surel{color:#fff}