:root{--latar:#f1f5f9;--tinta:#0f172a;--navy:#1e3a8a;--navy2:#172c69;--emas:#ca8a04;--emas2:#fde68a;--kartu:#fff;--abu:#475569;--garis:#cbd5e1;--r:16px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--latar);color:var(--tinta);font:400 17px/1.65 "Barlow",system-ui,sans-serif;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#9a6700}
h1,h2,h3,h4{font-family:"Teko","Barlow Condensed",sans-serif;font-weight:600;line-height:1.05;letter-spacing:.01em;color:var(--navy2)}
h1{font-size:clamp(2.3rem,6vw,3.4rem);margin:.2em 0 .3em}
h2{font-size:clamp(1.8rem,4.4vw,2.35rem);margin:1.6em 0 .35em}
h3{font-size:1.55rem;margin:1.3em 0 .3em}
p,ul,ol{margin:0 0 1em}
.pembungkus{max-width:1120px;margin:0 auto;padding:0 18px}
.lompat{position:absolute;left:-999px}.lompat:focus{left:12px;top:12px;background:#fff;padding:10px;z-index:9}
/* kepala */
.papan-atas{background:var(--navy2);color:#fff;border-bottom:3px solid var(--emas)}
.papan-atas .pembungkus{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.merek{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:600 1.9rem/1 "Teko",sans-serif;letter-spacing:.03em;min-height:44px}
.merek b{color:var(--emas2);font-weight:600}
.merek svg{flex:none}
.rak{display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin;margin-left:auto;max-width:100%}
.rak a{color:#e2e8f0;text-decoration:none;white-space:nowrap;padding:10px 12px;border-radius:10px;font-weight:600;font-size:.95rem;min-height:44px;display:flex;align-items:center}
.rak a:hover,.rak a[aria-current]{background:rgba(202,138,4,.22);color:#fff}
/* remah */
.remah{font-size:.9rem;color:var(--abu);margin:18px 0 0}
.remah ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px}
.remah li+li::before{content:"›";margin:0 6px;color:var(--emas)}
.remah a{display:inline-block;padding:6px 0}
/* tata letak artikel */
.lembar{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin:10px 0 48px}
@media(min-width:960px){.lembar.dua{grid-template-columns:330px minmax(0,1fr)}.lembar.dua .kp{position:sticky;top:16px;align-self:start}}
.isi{background:var(--kartu);border-radius:var(--r);padding:22px 20px 28px;box-shadow:0 1px 0 var(--garis)}
@media(min-width:700px){.isi{padding:34px 42px 40px}}
.isi>h2:first-child{margin-top:.2em}
.tanggal{color:var(--abu);font-size:.92rem;margin:-.2em 0 1.2em}
.pengantar{font-size:1.1rem;color:#1e293b}
figure{margin:1.4em 0}
figure img{border-radius:12px;border:1px solid var(--garis);width:100%}
figcaption{font-size:.9rem;color:var(--abu);margin-top:6px}
/* kartu profil */
.kp{background:linear-gradient(160deg,#fff 0%,#fff 62%,#fef9e7 100%);border:2px solid var(--emas);border-radius:var(--r);box-shadow:0 0 0 5px #fff,0 0 0 6px var(--emas),0 14px 30px -18px rgba(15,23,42,.55);overflow:hidden;margin:6px}
.kp-kepala{background:var(--navy);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:8px 14px;font:600 1.05rem/1 "Teko",sans-serif;letter-spacing:.08em}
.kp-kepala .nomor{background:var(--emas);color:var(--tinta);border-radius:8px;padding:4px 8px 2px}
.kp-wajah{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:14px;border-bottom:1px dashed var(--garis)}
.kp-lambang{width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3b5bdb,var(--navy2));color:var(--emas2);display:grid;place-items:center;font:600 1.5rem/1 "Teko",sans-serif;border:3px solid var(--emas);text-align:center}
.kp-nama{font:600 2.3rem/.9 "Teko",sans-serif;color:var(--navy2);margin:0}
.kp-julukan{font-size:.92rem;color:var(--abu);margin:2px 0 0}
.kp-kelas{display:inline-block;margin-top:6px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#7c5800;background:#fef3c7;border:1px solid #f5d77a;border-radius:20px;padding:1px 10px}
.kp-statistik{margin:0;padding:6px 14px 4px}
.kp-statistik div{display:grid;grid-template-columns:44% 56%;gap:8px;padding:7px 0;border-bottom:1px solid #eef2f7;font-size:.93rem;line-height:1.35}
.kp-statistik div:last-child{border-bottom:0}
.kp-statistik dt{color:var(--abu);font-weight:600}
.kp-statistik dd{margin:0;font-weight:600}
.kp-kurs{background:var(--navy2);color:#fff;padding:10px 14px 12px}
.kp-kurs span[data-psg]{font:600 2.1rem/1 "Teko",sans-serif;color:var(--emas2);letter-spacing:.02em}
.kp-kurs small{display:block;font-size:.8rem;color:#cbd5e1;margin-top:4px}
.kp-tautan{display:flex;justify-content:center;align-items:center;min-height:46px;background:var(--navy);color:#fff;text-decoration:none;font-weight:700;border-top:2px solid var(--emas)}
.kp-tautan:hover{background:var(--navy2);color:var(--emas2)}
/* beranda: album */
.sampul{display:grid;gap:22px;align-items:center;margin:26px 0 10px}
@media(min-width:880px){.sampul{grid-template-columns:1.1fr .9fr}}
.sampul .label{font-weight:700;color:#7c5800;text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;margin:0}
.sampul img{border-radius:var(--r);border:2px solid var(--emas)}
.halaman-album{background:repeating-linear-gradient(0deg,#e2e8f0 0 1px,transparent 1px 28px),#f8fafc;border:1px solid var(--garis);border-radius:22px;padding:18px 12px;margin:10px 0 30px}
.saku{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.saku{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.saku{grid-template-columns:repeat(3,minmax(0,1fr))}}
.saku-judul{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;padding:0 6px}
.saku-judul h2{margin:.2em 0}
.bangku{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.bangku{grid-template-columns:repeat(2,minmax(0,1fr))}}
.legenda{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);counter-reset:lg}
@media(min-width:760px){.legenda{grid-template-columns:repeat(3,minmax(0,1fr))}}
.legenda div{background:#fff;border-radius:14px;border-left:5px solid var(--emas);padding:14px 16px}
.legenda div::before{counter-increment:lg;content:"Statistik " counter(lg);display:block;font:600 1.1rem/1 "Teko",sans-serif;color:var(--emas);letter-spacing:.06em}
.rak-buku{list-style:none;padding:0;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.rak-buku{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rak-buku li{background:#fff;border-radius:14px;padding:14px 16px;border:1px solid var(--garis)}
.rak-buku a{font-weight:700;font-size:1.05rem}
.rak-buku p{margin:.3em 0 0;font-size:.95rem;color:var(--abu)}
.pita{background:var(--navy2);color:#e2e8f0;border-radius:var(--r);padding:20px 22px;margin:30px 0}
.pita h2{color:var(--emas2);margin-top:0}
.pita a{color:#fde68a}
/* tabel */
.gulir{overflow-x:auto;margin:1em 0 1.3em;border-radius:12px;border:1px solid var(--garis)}
table{border-collapse:collapse;width:100%;font-size:.96rem;background:#fff}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid #e2e8f0;vertical-align:top}
thead th{background:var(--navy);color:#fff;font-weight:600}
tbody tr:nth-child(even){background:#f8fafc}
td.ang,th.ang{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
caption{caption-side:bottom;text-align:left;font-size:.88rem;color:var(--abu);padding:8px 12px}
/* kotak */
.ilustrasi{background:#fffbeb;border:1px dashed var(--emas);border-radius:12px;padding:14px 16px;margin:1.2em 0}
.ilustrasi>strong:first-child{display:inline-block;background:var(--emas);color:var(--tinta);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;border-radius:6px;padding:1px 8px;margin-bottom:6px}
.awas{background:#fff1f2;border:2px solid #be123c;border-radius:var(--r);padding:14px 18px;margin:0 0 22px;color:#3f0d18}
.awas p{margin:.3em 0}
.awas strong{color:#9f1239}
.catat{border-left:4px solid var(--navy);background:#eef2ff;padding:12px 16px;border-radius:0 12px 12px 0;margin:1.2em 0}
.daftar-cek{list-style:none;padding:0}
.daftar-cek li{padding:6px 0 6px 32px;position:relative}
.daftar-cek li::before{content:"";position:absolute;left:4px;top:11px;width:16px;height:16px;border:2px solid var(--emas);border-radius:4px}
.langkah{counter-reset:lk;list-style:none;padding:0}
.langkah li{counter-increment:lk;position:relative;padding:4px 0 10px 50px}
.langkah li::before{content:counter(lk);position:absolute;left:0;top:2px;width:36px;height:36px;border-radius:10px;background:var(--navy);color:var(--emas2);font:600 1.35rem/38px "Teko",sans-serif;text-align:center}
.tanya{border:1px solid var(--garis);border-radius:12px;margin:10px 0;background:#fff}
.tanya summary{cursor:pointer;padding:12px 16px;font-weight:700;min-height:44px;list-style-position:inside}
.tanya div{padding:0 16px 12px}
.tombol{display:inline-flex;align-items:center;min-height:44px;background:var(--navy);color:#fff;text-decoration:none;padding:8px 18px;border-radius:12px;font-weight:700;border:1px solid var(--emas)}
.tombol:hover{background:var(--navy2);color:var(--emas2)}
.lanjut{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin-top:1.4em}
@media(min-width:640px){.lanjut{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lanjut a{display:block;background:#f8fafc;border:1px solid var(--garis);border-radius:12px;padding:12px 14px;text-decoration:none;font-weight:600}
.lanjut a span{display:block;font-weight:400;color:var(--abu);font-size:.92rem}
.kolom-dua{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.kolom-dua{grid-template-columns:1fr 1fr}}
.kolom-dua>div{background:#f8fafc;border:1px solid var(--garis);border-radius:12px;padding:12px 16px}
/* kaki */
.kaki{background:#0b1535;color:#cbd5e1;margin-top:40px;padding:34px 0 22px;border-top:4px solid var(--emas);font-size:.95rem}
.kaki a{color:#e2e8f0;display:inline-block;padding:5px 0}
.kaki-grid{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.kaki-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.kaki-judul{font:600 1.35rem/1 "Teko",sans-serif;color:var(--emas2);letter-spacing:.05em;margin:0 0 8px}
.kaki ul{list-style:none;padding:0;margin:0}
.kaki-bawah{border-top:1px solid #1e2a55;margin-top:24px;padding-top:14px;font-size:.88rem}

.isi .kp{max-width:390px;margin:18px auto}
.isi .kp-nama{font-size:2rem}

.kp{display:flex;flex-direction:column}
.kp-statistik{flex:1 0 auto}