:root{--krem:#fdf6e3;--krem2:#f6ead0;--tinta:#231f20;--tinta2:#4a4244;--merah:#c1121f;--merah-tua:#8f0d17;--biru:#1d4e89;--emas:#d9b77e;--putih:#fffdf7}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--krem);color:var(--tinta);font:400 18px/1.62 "Alegreya Sans",system-ui,sans-serif;overflow-wrap:break-word}
h1,h2,h3{font-family:"Alegreya",Georgia,serif;line-height:1.22;color:var(--tinta);margin:1.6em 0 .5em}
h1{font-size:clamp(1.8rem,5.4vw,2.7rem);margin-top:.3em}
h2{font-size:clamp(1.4rem,3.8vw,1.85rem)}
h3{font-size:1.2rem}
a{color:var(--biru);text-underline-offset:3px}
a:hover{color:var(--merah)}
img{max-width:100%;height:auto;display:block}
p{margin:0 0 1em}
/* pita ubin */
.cini-band{height:22px;border-block:2px solid var(--emas);background:
 radial-gradient(circle at 50% 50%,var(--merah) 0 3px,transparent 3.5px) 11px 11px/22px 22px,
 conic-gradient(from 45deg,var(--biru) 0 25%,var(--krem) 0 50%,var(--biru) 0 75%,var(--krem) 0) 0 0/22px 22px}
.gapura{background:var(--putih);border-bottom:3px double var(--emas)}
.gapura-isi{max-width:1120px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative}
.merek{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.merek-logo{width:40px;height:40px;border-radius:4px}
.merek-nama{font:700 1.55rem/1 "Alegreya",serif;color:var(--tinta)}
.merek-nama b{color:var(--merah)}
.lorong summary{list-style:none;cursor:pointer;min-height:44px;padding:10px 16px;border:3px double var(--merah);border-radius:4px;font-weight:700;color:var(--merah)}
.lorong summary::-webkit-details-marker{display:none}
.lorong ul{position:absolute;right:16px;top:64px;z-index:5;background:var(--putih);border:3px double var(--emas);border-radius:4px;list-style:none;margin:0;padding:6px;min-width:220px}
.lorong a,.lorong-lebar a{display:block;padding:10px 12px;min-height:44px;text-decoration:none;color:var(--tinta);font-weight:500}
.lorong a[aria-current],.lorong-lebar a[aria-current]{color:var(--merah);box-shadow:inset 0 -3px 0 var(--merah)}
.lorong-lebar{display:none}
@media(min-width:900px){.lorong{display:none}.lorong-lebar{display:block}.lorong-lebar ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}}
main{display:block;max-width:1120px;margin:0 auto;padding:8px 16px 40px}
.jejak ol{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px;font-size:.92rem;color:var(--tinta2)}
.jejak li{display:flex;align-items:center}
.jejak li+li::before{content:"◆";color:var(--emas);font-size:.7rem;margin:0 8px}
.jejak a{display:inline-block;padding:10px 2px;min-height:44px}
/* artikel */
.naskah{max-width:760px;margin:0 auto}
.naskah>header{border-bottom:2px solid var(--emas);padding-bottom:12px;margin-bottom:18px}
.kicker{font-size:.95rem;text-transform:uppercase;letter-spacing:.08em;color:var(--merah);font-weight:700;margin:14px 0 0}
.meta{color:var(--tinta2);font-size:.95rem;margin:0}
.lead{font-size:1.15rem;color:var(--tinta2)}
.lukis{margin:18px 0 24px;border:3px double var(--emas);border-radius:4px;padding:5px;background:var(--putih)}
.lukis img{border-radius:2px;width:100%}
.lukis figcaption{font-size:.9rem;color:var(--tinta2);padding:6px 4px 0}
.naskah ul,.naskah ol{padding-left:1.3em}
.naskah li{margin:.3em 0}
.gulung{overflow-x:auto;margin:14px 0 22px;border:3px double var(--emas);border-radius:4px;background:var(--putih)}
table{border-collapse:collapse;width:100%;font-size:1rem}
caption{text-align:left;padding:10px 12px;font-weight:700;font-family:"Alegreya",serif;border-bottom:1px solid var(--emas)}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid #ecdcb8;vertical-align:top}
thead th{background:var(--biru);color:#fff;font-weight:700}
tbody tr:nth-child(even){background:#fbf1dc}
tbody th{font-weight:700;white-space:nowrap}
td.ang,th.ang{text-align:right;font-variant-numeric:tabular-nums}
.sorot{border-left:6px solid var(--merah);background:var(--putih);padding:14px 16px;border-radius:4px;margin:18px 0;box-shadow:0 0 0 1px var(--emas)}
.sorot p:last-child{margin:0}
.rumus{font-family:"Alegreya",serif;font-size:1.1rem;background:var(--krem2);border:1px dashed var(--biru);padding:10px 14px;border-radius:4px}
.ruj{font-size:.75em;line-height:0}
.ruj a{text-decoration:none;font-weight:700;color:var(--merah);padding:0 2px}
.catatan{margin-top:34px;border-top:3px double var(--emas);padding-top:6px;font-size:1rem}
.catatan ol{padding-left:1.4em}
.catatan li{margin:.45em 0;color:var(--tinta2)}
.balik{text-decoration:none}
.tanya .soal{border:3px double var(--emas);border-radius:4px;padding:4px 14px 2px;margin:10px 0;background:var(--putih)}
.tanya h3{margin:.6em 0 .3em;font-size:1.08rem}
.lanjut ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
@media(min-width:640px){.lanjut ul{grid-template-columns:1fr 1fr}}
.lanjut a{display:flex;gap:12px;align-items:center;min-height:56px;padding:10px 12px;background:var(--putih);border:3px double var(--emas);border-radius:4px;text-decoration:none;color:var(--tinta);font-weight:500}
.halka{flex:0 0 38px;height:38px;border:2px solid var(--merah);border-radius:50%;display:grid;place-items:center;color:var(--merah)}
.papan{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:16px 0}
.papan div{background:var(--putih);border:3px double var(--emas);border-radius:4px;padding:10px 12px}
.papan span.lbl{display:block;font-size:.9rem;color:var(--tinta2)}
.papan strong{font:700 1.35rem/1.2 "Alegreya",serif;color:var(--biru)}
/* konverter */
.tezgah{background:var(--putih);border:4px double var(--merah);border-radius:4px;padding:14px 16px;margin:18px 0;max-width:520px}
.tezgah-judul{font:700 1.2rem "Alegreya",serif;margin:0 0 10px;color:var(--merah)}
.tezgah-arah{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tezgah-arah button{flex:1 1 140px;min-height:44px;font:700 1rem "Alegreya Sans",sans-serif;border:2px solid var(--merah);background:transparent;color:var(--merah);border-radius:4px;cursor:pointer}
.tezgah-arah button.arah-on{background:var(--merah);color:#fff}
.tezgah-label{display:block;font-weight:700;margin-bottom:4px}
.tezgah-in{width:100%;min-height:48px;font:500 1.3rem "Alegreya Sans",sans-serif;padding:8px 12px;border:2px solid var(--biru);border-radius:4px;background:var(--krem)}
.tezgah-hasil{font-size:1.1rem;margin:12px 0 6px}
.tezgah-hasil strong{font:700 1.8rem "Alegreya",serif;color:var(--biru);margin-left:4px}
.tezgah-ket{font-size:.9rem;color:var(--tinta2);margin:0}
/* beranda */
.pintu{display:grid;gap:20px;align-items:start;padding:10px 0 6px;position:relative}
@media(min-width:900px){.pintu{grid-template-columns:1.15fr .85fr}}
.pintu-teks{border:3px double var(--emas);border-radius:4px;padding:18px 18px 8px;background:
 linear-gradient(var(--putih),var(--putih)) padding-box}
.pintu .tezgah{margin:0;max-width:none}
.ubin-sep{height:14px;margin:30px 0 8px;background:
 linear-gradient(45deg,transparent 40%,var(--emas) 40% 60%,transparent 60%) 0 0/14px 14px,
 linear-gradient(-45deg,transparent 40%,var(--emas) 40% 60%,transparent 60%) 0 0/14px 14px}
.kios{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.kios{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.kios{grid-template-columns:repeat(4,1fr);grid-auto-flow:dense}}
.kios-kart{background:var(--putih);border:3px double var(--emas);border-radius:4px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;position:relative}
.kios-kart h3{margin:.2em 0}
.kios-kart h3 a{color:var(--tinta);text-decoration:none;display:inline-block;padding:6px 0;min-height:44px}
.kios-kart h3 a::after{content:"";position:absolute;inset:0}
.kios-kart p{margin:0;color:var(--tinta2);font-size:1rem}
.kios-kart .tag{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--merah)}
.kios-kart .lukis{margin:0 0 6px;padding:3px}
@media(min-width:960px){.k-besar{grid-column:span 2;grid-row:span 2}.k-lebar{grid-column:span 2}.k-tinggi{grid-row:span 2}}
.k-biru{background:var(--biru);border-color:var(--emas)}
.k-biru h3 a,.k-biru p,.k-biru .tag{color:#fff}
.k-merah{border-color:var(--merah)}
.rute{list-style:none;margin:10px 0;padding:0;counter-reset:rute;display:grid;gap:12px}
@media(min-width:760px){.rute{grid-template-columns:repeat(4,1fr)}}
.rute li{counter-increment:rute;background:var(--krem2);border-radius:4px;padding:14px;border-top:5px solid var(--biru)}
.rute li::before{content:counter(rute);display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--merah);border-radius:50%;color:var(--merah);font:700 1.1rem "Alegreya",serif;margin-bottom:6px}
.rute a{display:inline-block;padding:8px 0;min-height:44px;font-weight:700}
.hitung-kepala{display:grid;gap:14px}
@media(min-width:760px){.hitung-kepala{grid-template-columns:1fr 1fr}}
.tombol{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;background:var(--merah);color:#fff;border-radius:4px;text-decoration:none;font-weight:700;border:2px solid var(--merah);box-shadow:0 0 0 3px var(--putih),0 0 0 5px var(--emas)}
.tombol:hover{background:var(--merah-tua);color:#fff}
.legal{max-width:760px;margin:0 auto}
.dua-kolom{display:grid;gap:12px}
@media(min-width:640px){.dua-kolom{grid-template-columns:1fr 1fr}}
.dua-kolom>div{background:var(--putih);border:3px double var(--emas);border-radius:4px;padding:12px 14px}
.dua-kolom h2{margin-top:.2em;font-size:1.25rem}
/* kaki */
.kaki{background:var(--tinta);color:#f3e9d2;margin-top:30px}
.kaki .cini-band{border-color:var(--emas)}
.kaki-isi{max-width:1120px;margin:0 auto;padding:22px 16px 8px;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.kaki-judul{font:700 1.1rem "Alegreya",serif;color:var(--emas);margin:0 0 4px}
.kaki ul{list-style:none;margin:0;padding:0}
.kaki a{color:#fff;display:inline-block;padding:9px 0;min-height:44px}
.kaki-bawah{max-width:1120px;margin:0 auto;padding:10px 16px 26px;font-size:.95rem;border-top:1px solid #5a4e45}
.kaki-bawah a{display:inline;padding:0;min-height:0;color:var(--emas)}
.hilang{text-align:center;padding:40px 0}