:root{--krem:#fdfaf4;--tinta:#1e3a5f;--koral:#e8604c;--panel:#f3ece0;--garis:#e2d8c6;--redup:#51627a;--koral-tua:#b8412f;--r:8px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--krem);color:var(--tinta);font-family:"Vollkorn",Georgia,serif;font-size:18px;line-height:1.65}
h1,h2,h3,.merek,.lencana,.nav-atas a,.tombol,.kaki,.jejak,.saring button,.kode-besar,th{font-family:"Cabin","Trebuchet MS",sans-serif}
h1{font-size:clamp(1.65rem,4.6vw,2.5rem);line-height:1.18;margin:.2em 0 .45em;letter-spacing:-.01em}
h2{font-size:clamp(1.3rem,3.4vw,1.7rem);line-height:1.25;margin:1.9em 0 .6em}
h3{font-size:1.14rem;margin:1.4em 0 .4em}
p{margin:0 0 1em}
a{color:var(--koral-tua);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--tinta)}
img{max-width:100%;height:auto;display:block}
.lompat{position:absolute;left:-999px;top:0;background:var(--tinta);color:#fff;padding:10px 14px}
.lompat:focus{left:8px;top:8px;z-index:9}

/* kepala */
.kepala{background:var(--krem);border-bottom:3px double var(--garis)}
.kepala-isi{max-width:1120px;margin:0 auto;padding:12px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;justify-content:space-between}
.merek{display:flex;align-items:center;gap:10px;color:var(--tinta);text-decoration:none;font-weight:700;font-size:1.28rem;min-height:44px}
.merek img{width:38px;height:38px}
.merek small{display:block;font-weight:500;font-size:.72rem;color:var(--redup);letter-spacing:.04em}
.nav-atas ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.nav-atas a{display:inline-block;padding:9px 12px;border-radius:var(--r);text-decoration:none;color:var(--tinta);font-size:.95rem;font-weight:600}
.nav-atas a:hover,.nav-atas a[aria-current]{background:var(--panel);color:var(--koral-tua)}

/* bingkai isi */
.bingkai{max-width:1120px;margin:0 auto;padding:18px 18px 56px}
.sempit{max-width:780px;margin:0 auto}
.jejak{font-size:.88rem;color:var(--redup);margin:4px 0 18px}
.jejak ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0}
.jejak li+li::before{content:"›";margin:0 8px;color:var(--koral)}
.jejak a{color:var(--redup)}
.tgl{font-family:"Cabin",sans-serif;font-size:.9rem;color:var(--redup);margin-bottom:1.2em}

/* kartu nama besar (halaman emiten) */
.tumpuk{position:relative;margin:10px 6px 34px}
.tumpuk::before,.tumpuk::after{content:"";position:absolute;inset:0;border-radius:var(--r);border:1px solid var(--garis)}
.tumpuk::before{background:var(--koral);transform:rotate(-1.6deg) translate(6px,8px);opacity:.9}
.tumpuk::after{background:var(--panel);transform:rotate(1.1deg) translate(-4px,5px)}
.kartu-besar{position:relative;z-index:1;background:#fff;border-radius:var(--r);border:1px solid var(--garis);padding:22px 22px 18px;box-shadow:0 10px 24px rgba(30,58,95,.08)}
.kartu-besar .atas{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 18px}
.kode-besar{background:var(--tinta);color:var(--krem);font-weight:700;font-size:1.45rem;letter-spacing:.08em;border-radius:6px;padding:8px 14px;line-height:1}
.kartu-besar h1{flex:1 1 300px;margin:0}
.kartu-besar dl{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:6px 16px;margin:18px 0 0;padding-top:14px;border-top:1px dashed var(--garis);font-size:1rem}
.kartu-besar dt{font-family:"Cabin",sans-serif;font-weight:600;color:var(--redup);font-size:.92rem}
.kartu-besar dd{margin:0}
.kartu-besar .garis-koral{height:4px;width:74px;background:var(--koral);border-radius:2px;margin-top:16px}

/* bagian bernomor */
.bagian{counter-reset:bag}
.bagian>section{position:relative;padding-left:0}
.bagian h2{display:flex;gap:12px;align-items:baseline}
.bagian h2 .no{font-size:.95rem;color:#fff;background:var(--koral);border-radius:6px;padding:3px 8px;flex:0 0 auto;letter-spacing:.05em}
.foto{margin:6px 0 26px}
.foto img{border-radius:var(--r);border:1px solid var(--garis);width:100%}
.foto figcaption{font-size:.88rem;color:var(--redup);margin-top:6px;font-style:italic}
.catatan{background:var(--panel);border-left:5px solid var(--koral);border-radius:var(--r);padding:14px 18px;margin:1.2em 0}
.catatan p:last-child{margin:0}
.peringatan{background:#fff;border:2px solid var(--koral);border-radius:var(--r);padding:14px 18px;margin:1.6em 0}
.peringatan strong{font-family:"Cabin",sans-serif;color:var(--koral-tua)}
.langkah{counter-reset:lk;list-style:none;padding:0;margin:0 0 1.2em}
.langkah li{counter-increment:lk;position:relative;padding:4px 0 10px 46px}
.langkah li::before{content:counter(lk);position:absolute;left:0;top:2px;width:32px;height:32px;border-radius:50%;background:var(--tinta);color:var(--krem);font-family:"Cabin",sans-serif;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.95rem}
ul.titik{padding-left:1.2em}
ul.titik li{margin-bottom:.45em}
ul.titik li::marker{color:var(--koral)}

/* tabel */
.gulir{overflow-x:auto;margin:0 0 1.4em;border:1px solid var(--garis);border-radius:var(--r);background:#fff}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--garis);vertical-align:top}
th{background:var(--panel);font-weight:600;font-size:.9rem}
tr:last-child td{border-bottom:0}
.gulir.lini td:first-child{font-family:"Cabin",sans-serif;font-weight:700;white-space:nowrap;color:var(--koral-tua)}

/* tanya jawab */
.tanya{border-top:1px solid var(--garis);margin-top:2em}
.tanya h3{margin-top:1.1em;font-size:1.05rem}

/* tautan antarkartu */
.rak{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:1em 0}
.rak a{display:block;background:#fff;border:1px solid var(--garis);border-radius:var(--r);padding:14px 16px;text-decoration:none;color:var(--tinta);box-shadow:4px 4px 0 var(--panel);min-height:48px}
.rak a:hover{box-shadow:4px 4px 0 var(--koral)}
.rak b{font-family:"Cabin",sans-serif;display:block;font-size:1rem}
.rak span{font-size:.92rem;color:var(--redup)}

/* beranda */
.pembuka{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;margin:10px 0 24px}
.pembuka .lead{font-size:1.12rem}
.lencana{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--koral-tua);margin-bottom:6px}
.meja{position:relative;min-height:260px}
.meja .kn{position:absolute;width:78%;background:#fff;border:1px solid var(--garis);border-radius:var(--r);padding:16px 18px;box-shadow:0 8px 18px rgba(30,58,95,.1);font-family:"Cabin",sans-serif}
.meja .kn:nth-child(1){left:0;top:0;transform:rotate(-5deg);background:var(--panel)}
.meja .kn:nth-child(2){left:11%;top:72px;transform:rotate(2.5deg)}
.meja .kn:nth-child(3){left:20%;top:146px;background:var(--tinta);color:var(--krem);transform:rotate(-1deg)}
.meja .kn b{font-size:1.25rem;letter-spacing:.06em;display:block}
.meja .kn span{font-size:.88rem;opacity:.85}
.saring{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.saring button{font-size:.92rem;font-weight:600;border:1.5px solid var(--tinta);background:transparent;color:var(--tinta);border-radius:var(--r);padding:8px 14px;cursor:pointer;min-height:40px}
.saring button[aria-pressed="true"]{background:var(--koral);border-color:var(--koral);color:#fff}
.dek{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px 18px;list-style:none;margin:0;padding:0}
.dek>li{position:relative}
.dek>li::before{content:"";position:absolute;inset:0;border-radius:var(--r);background:var(--panel);border:1px solid var(--garis);transform:translate(6px,6px)}
.dek>li[hidden]{display:none}
.kn-bank{position:relative;background:#fff;border:1px solid var(--garis);border-radius:var(--r);padding:16px 16px 14px;height:100%;display:flex;flex-direction:column}
.kn-bank .baris{display:flex;justify-content:space-between;align-items:center;gap:8px}
.kn-bank .kd{font-family:"Cabin",sans-serif;font-weight:700;letter-spacing:.08em;background:var(--tinta);color:var(--krem);border-radius:5px;padding:3px 9px;font-size:.95rem}
.kn-bank .grp{font-family:"Cabin",sans-serif;font-size:.8rem;color:var(--redup);text-align:right}
.kn-bank h3{margin:.7em 0 .3em;font-size:1.08rem}
.kn-bank p{font-size:.95rem;margin:0 0 .8em;flex:1}
.kn-bank a{font-family:"Cabin",sans-serif;font-weight:700;font-size:.92rem;display:inline-block;background:var(--koral);color:#fff;text-decoration:none;border-radius:var(--r);padding:8px 14px;align-self:flex-start}
.kn-bank a:hover{background:var(--tinta);color:#fff}
.dua-kolom{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.pita{background:var(--tinta);color:var(--krem);border-radius:var(--r);padding:22px 24px;margin:30px 0}
.pita h2{margin-top:0;color:var(--krem)}
.pita a{color:#ffd2c9}
.pita ol{margin:0;padding-left:1.3em}
.pita li{margin-bottom:.5em}
.kolom-catatan{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.kolom-catatan li{background:#fff;border:1px solid var(--garis);border-top:5px solid var(--koral);border-radius:var(--r);padding:14px 16px}
.kolom-catatan h3{margin:.1em 0 .4em;font-size:1.02rem}
.kolom-catatan p{font-size:.95rem;margin:0}

.saring[hidden]{display:none}
.jumlah{font-family:"Cabin",sans-serif;font-size:.9rem;color:var(--redup);margin:0 0 14px}
.anatomi-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px}
.anatomi-dl dt{font-family:"Cabin",sans-serif;font-weight:700;color:var(--koral-tua)}
.anatomi-dl dd{margin:0}
.dua-tabel{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 1.2em}
.dua-tabel .catatan{margin:0}
.dua-tabel ul{margin:0}

/* kaki */
.kaki{background:var(--tinta);color:#dfe6ef;font-size:.92rem}
.kaki-isi{max-width:1120px;margin:0 auto;padding:30px 18px 20px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:22px}
.kaki p{margin:0 0 .6em}
.kaki .judul-kaki{font-weight:700;color:#fff;letter-spacing:.04em;margin-bottom:.5em}
.kaki ul{list-style:none;margin:0;padding:0}
.kaki li a{display:inline-block;padding:5px 0;color:#dfe6ef;text-decoration:none;min-height:28px}
.kaki li a:hover{color:#ffd2c9;text-decoration:underline}
.kaki a{color:#ffd2c9}
.kaki-bawah{border-top:1px solid rgba(255,255,255,.15);max-width:1120px;margin:0 auto;padding:14px 18px 22px;font-size:.85rem;color:#b9c6d6}

@media (max-width:860px){
  .pembuka,.dua-kolom{grid-template-columns:1fr}
  .kaki-isi{grid-template-columns:1fr 1fr}
  .meja{min-height:290px;max-width:420px}
  .meja .kn:nth-child(2){top:88px}
  .meja .kn:nth-child(3){top:176px}
}
@media (max-width:520px){
  body{font-size:17px}
  .kaki-isi{grid-template-columns:1fr}
  .kartu-besar{padding:18px 16px 14px}
  .kartu-besar dl{grid-template-columns:1fr;gap:2px}
  .kartu-besar dd{margin-bottom:8px}
  .tumpuk{margin:8px 4px 30px}
  th,td{padding:8px 9px}
  .meja .kn{width:78%}
  .meja .kn:nth-child(2){left:8%}
  .meja .kn:nth-child(3){left:15%}
  .dua-tabel,.anatomi-dl{grid-template-columns:1fr}
}