@charset "utf-8";
/* Gunung Indonesia — sistem visual "kartografi editorial"
   Ditulis tangan, tanpa framework. Mobile-first. */

/* ============================================================ TOKEN */
:root{
  --paper:#f7f4ed;
  --paper-2:#f1ece1;
  --paper-3:#e6dfd0;
  --paper-sunk:#ebe5d8;
  --ink:#141a17;
  --ink-2:#39433d;
  --ink-3:#5b645d;
  --forest:#1d4034;
  --moss:#386b52;
  --clay:#a9522c;
  --ember:#c9743a;
  --line:rgba(20,26,23,.15);
  --line-2:rgba(20,26,23,.09);
  --shadow:0 1px 0 rgba(20,26,23,.05);
  --sel:rgba(201,116,58,.22);

  --f-display:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --wrap:70rem;
  --measure:42rem;
  --gut:clamp(1.05rem,4vw,2rem);
  --r:3px;

  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#111512;
    --paper-2:#171c19;
    --paper-3:#1f2521;
    --paper-sunk:#0d100e;
    --ink:#e9e4d8;
    --ink-2:#c0c7be;
    --ink-3:#9aa39a;
    --forest:#8fc0a4;
    --moss:#a3cdb2;
    --clay:#e09163;
    --ember:#e8a675;
    --line:rgba(233,228,216,.17);
    --line-2:rgba(233,228,216,.09);
    --shadow:0 1px 0 rgba(0,0,0,.3);
    --sel:rgba(224,145,99,.26);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#111512;--paper-2:#171c19;--paper-3:#1f2521;--paper-sunk:#0d100e;
  --ink:#e9e4d8;--ink-2:#c0c7be;--ink-3:#9aa39a;
  --forest:#8fc0a4;--moss:#a3cdb2;--clay:#e09163;--ember:#e8a675;
  --line:rgba(233,228,216,.17);--line-2:rgba(233,228,216,.09);
  --shadow:0 1px 0 rgba(0,0,0,.3);--sel:rgba(224,145,99,.26);
  color-scheme:dark;
}

/* ============================================================ DASAR */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:1rem;line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--sel)}
img{max-width:100%;height:auto;display:block}
svg{display:block}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{text-decoration-color:var(--clay)}
:focus-visible{outline:2.5px solid var(--clay);outline-offset:2px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.18;
  letter-spacing:-.012em;margin:0;text-wrap:balance}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong{font-weight:640}
hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}
small{font-size:.83em}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--forest);color:var(--paper);padding:.7rem 1.1rem;font-weight:600}
.skip:focus{left:.5rem;top:.5rem}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* mono data */
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:.86em;letter-spacing:-.01em}

/* ============================================================ HEADER */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
@supports not (backdrop-filter:blur(1px)){.top{background:var(--paper)}}
.top-in{display:flex;align-items:center;gap:.9rem;min-height:56px}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;flex:0 0 auto;padding:.35rem 0}
.brand svg{width:24px;height:24px;flex:0 0 auto;color:var(--forest)}
.brand b{font-family:var(--f-display);font-size:1.03rem;font-weight:640;letter-spacing:-.02em;white-space:nowrap}
.brand i{font-style:normal;color:var(--ink-3);font-weight:400}

.nav{display:none}
.nav a{text-decoration:none;color:var(--ink-2);font-size:.895rem;padding:.42rem .6rem;
  border-radius:var(--r);white-space:nowrap;font-weight:500}
.nav a:hover{color:var(--ink);background:var(--paper-3)}
.nav a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--clay)}
.top-act{margin-left:auto;display:flex;align-items:center;gap:.3rem}
.iconbtn{appearance:none;background:none;border:1px solid transparent;color:var(--ink-2);
  width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r);cursor:pointer}
.iconbtn:hover{background:var(--paper-3);color:var(--ink)}
.iconbtn svg{width:18px;height:18px}
#nav-toggle{display:grid}
.drawer{display:none;border-top:1px solid var(--line);background:var(--paper-2);
  padding:.5rem var(--gut) 1.1rem}
.drawer.open{display:block}
.drawer a{display:block;text-decoration:none;color:var(--ink-2);padding:.62rem .2rem;
  border-bottom:1px solid var(--line-2);font-size:.98rem}
.drawer a:last-child{border-bottom:0}
.drawer a:hover{color:var(--clay)}
@media (min-width:62rem){
  .nav{display:flex;gap:.1rem;margin-left:.6rem}
  #nav-toggle{display:none}
  .drawer{display:none!important}
}

/* ====================================================== NOTIS SITUS (bawah)
   Ditempatkan tepat di atas footer, bukan di bawah header: sebagai pita
   permanen di atas ia mendominasi layar pertama tanpa menambah informasi
   yang belum ada di halaman. Peringatan yang benar-benar terikat konteks
   (status gunung api, sumber & tanggal pemeriksaan) tetap di dalam halaman. */
.sitenote{background:var(--paper-sunk);border-top:1px solid var(--line);
  font-size:.815rem;color:var(--ink-3);line-height:1.62}
.sitenote .wrap{padding-block:1.15rem;display:flex;gap:.62rem;align-items:flex-start;
  max-width:58rem}
.sitenote svg{width:15px;height:15px;flex:0 0 auto;margin-top:.26em;color:var(--clay)}
.sitenote a{color:var(--ink-2)}
.sitenote + .foot{margin-top:0;border-top:0}

/* ============================================================ HERO BERANDA */
.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden;
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%)}
.hero-art{position:absolute;inset:0;pointer-events:none;opacity:.5;color:var(--moss)}
.hero-art svg{width:100%;height:100%}
.hero-in{position:relative;padding-block:clamp(2.4rem,7vw,4.4rem) clamp(2rem,5vw,3.2rem)}
.eyebrow{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--clay);margin:0 0 1rem;display:flex;
  align-items:center;gap:.55rem}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--line);max-width:8rem}
.hero h1{font-size:clamp(2.05rem,6.4vw,3.55rem);letter-spacing:-.028em;max-width:17ch}
.hero .lede{font-size:clamp(1.02rem,2.3vw,1.16rem);color:var(--ink-2);
  max-width:46ch;margin-top:1.05rem;line-height:1.6}
.hero-cta{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem}

.btn{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  font-size:.9rem;font-weight:560;padding:.6rem 1.05rem;border-radius:var(--r);
  border:1px solid var(--line);color:var(--ink);background:var(--paper);transition:.16s}
.btn:hover{border-color:var(--ink-3)}
.btn-1{background:var(--forest);border-color:var(--forest);color:#f7f4ed}
:root[data-theme="dark"] .btn-1{color:#0f1310}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn-1{color:#0f1310}
}
.btn-1:hover{background:var(--moss);border-color:var(--moss)}
.btn svg{width:15px;height:15px}

/* ============================================================ PENCARIAN */
.finder{margin-top:1.9rem;max-width:34rem;position:relative}
.finder label{display:block;font-family:var(--f-mono);font-size:.7rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.42rem}
.finder-box{display:flex;align-items:center;gap:.55rem;background:var(--paper);
  border:1px solid var(--ink-3);border-radius:var(--r);padding:.15rem .15rem .15rem .75rem}
.finder-box:focus-within{border-color:var(--clay);box-shadow:0 0 0 3px var(--sel)}
.finder-box svg{width:16px;height:16px;color:var(--ink-3);flex:0 0 auto}
.finder input{flex:1;min-width:0;appearance:none;background:none;border:0;outline:0;
  color:var(--ink);font:inherit;font-size:.98rem;padding:.62rem .2rem}
.finder input::placeholder{color:var(--ink-3)}
#sr-list{list-style:none;margin:.4rem 0 0;padding:0;position:absolute;left:0;right:0;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 10px 34px rgba(20,26,23,.14);max-height:60vh;overflow:auto;z-index:30}
#sr-list:empty{display:none}
#sr-list li{border-bottom:1px solid var(--line-2)}
#sr-list li:last-child{border-bottom:0}
#sr-list a{display:flex;gap:.7rem;align-items:baseline;padding:.6rem .8rem;
  text-decoration:none;color:var(--ink)}
#sr-list a:hover,#sr-list a:focus{background:var(--paper-3)}
#sr-list .k{font-size:.93rem;font-weight:560}
#sr-list .t{margin-left:auto;font-family:var(--f-mono);font-size:.7rem;
  color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;flex:0 0 auto}
.sr-empty{padding:.7rem .8rem;color:var(--ink-3);font-size:.9rem}

/* ============================================================ SEKSI */
.sec{padding-block:clamp(2.4rem,6vw,3.9rem);border-bottom:1px solid var(--line-2)}
.sec:last-of-type{border-bottom:0}
.sec-alt{background:var(--paper-2)}
.sec-hd{display:flex;align-items:flex-end;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.sec-hd h2{font-size:clamp(1.35rem,3.4vw,1.85rem);letter-spacing:-.02em}
.sec-hd p{color:var(--ink-3);font-size:.93rem;margin:.3rem 0 0;max-width:52ch}
.sec-hd .more{margin-left:auto;font-size:.86rem;color:var(--clay);
  text-decoration:none;font-weight:560;white-space:nowrap;border-bottom:1px solid transparent}
.sec-hd .more:hover{border-bottom-color:var(--clay)}
.num{font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3);
  letter-spacing:.1em;display:block;margin-bottom:.35rem}

/* Garis pemisah digambar per sel, bukan lewat celah grid, supaya baris yang
   tidak penuh (atau kartu yang disembunyikan filter) tidak meninggalkan blok gelap. */
.mgrid>*,.regions>*,.relgrid>*{box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}

/* ============================================================ KARTU GUNUNG */
.mgrid{display:grid;gap:0;background:var(--paper);border:1px solid var(--line);
  grid-template-columns:1fr;overflow:hidden}
@media (min-width:36rem){.mgrid{grid-template-columns:1fr 1fr}}
@media (min-width:58rem){.mgrid{grid-template-columns:repeat(3,1fr)}}
.mcard{background:var(--paper);padding:0;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:background .16s}
.mcard:hover{background:var(--paper-2)}
.mcard:hover .mcard-nm{color:var(--clay)}
.mcard-art{aspect-ratio:16/7;background:var(--paper-sunk);overflow:hidden;
  border-bottom:1px solid var(--line-2);position:relative}
.mcard-art svg{width:100%;height:100%}
.mcard-bd{padding:.85rem .95rem 1rem;display:flex;flex-direction:column;flex:1}
.mcard-nm{font-family:var(--f-display);font-size:1.09rem;font-weight:620;
  letter-spacing:-.015em;line-height:1.25;transition:color .16s}
.mcard-mt{display:flex;align-items:baseline;gap:.5rem;margin-top:.4rem;flex-wrap:wrap}
.mcard-el{font-family:var(--f-mono);font-size:.92rem;font-weight:600;color:var(--forest)}
.mcard-el span{font-size:.68em;font-weight:400;color:var(--ink-3);margin-left:.12em}
.mcard-lo{font-size:.79rem;color:var(--ink-3)}
.mcard-tx{font-size:.855rem;color:var(--ink-2);margin-top:.5rem;line-height:1.5}
.tagrow{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.7rem}
.tag{font-family:var(--f-mono);font-size:.635rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);border-radius:2px;padding:.16rem .38rem}
.tag-a{color:var(--clay);border-color:color-mix(in srgb,var(--clay) 42%,transparent)}

/* ============================================================ DAFTAR RINGKAS */
.list-plain{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.list-plain li{border-bottom:1px solid var(--line-2)}
.list-plain a{display:flex;align-items:baseline;gap:.75rem;padding:.72rem .1rem;
  text-decoration:none;color:inherit}
.list-plain a:hover .lp-n{color:var(--clay)}
.lp-n{font-weight:540;font-size:.97rem}
.lp-d{color:var(--ink-3);font-size:.83rem;margin-left:auto;text-align:right;flex:0 0 auto}
.lp-e{font-family:var(--f-mono);font-size:.84rem;color:var(--forest);
  margin-left:auto;flex:0 0 auto;font-variant-numeric:tabular-nums}

/* ============================================================ PANEL WILAYAH */
.regions{display:grid;gap:0;background:var(--paper);border:1px solid var(--line);
  grid-template-columns:1fr;overflow:hidden}
@media (min-width:40rem){.regions{grid-template-columns:1fr 1fr}}
@media (min-width:64rem){.regions{grid-template-columns:repeat(3,1fr)}}
.region{background:var(--paper);padding:1.05rem 1.05rem 1.15rem;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:.42rem;transition:background .16s}
.region:hover{background:var(--paper-2)}
.region:hover h3{color:var(--clay)}
.region h3{font-size:1.03rem;letter-spacing:-.012em;transition:color .16s}
.region .cnt{font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3);letter-spacing:.07em}
.region p{font-size:.85rem;color:var(--ink-2);margin:0;line-height:1.52}
.region .bar{height:3px;background:var(--paper-3);position:relative;margin-top:auto;border-radius:2px}
.region .bar i{position:absolute;inset:0 auto 0 0;background:var(--moss);border-radius:2px}

/* ============================================================ ARTIKEL */
.page{padding-block:1.4rem clamp(2.4rem,6vw,4rem)}
.crumb{font-size:.79rem;color:var(--ink-3);margin-bottom:1.15rem;line-height:1.5}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.34rem;margin:0;padding:0}
.crumb li::after{content:"›";margin-left:.34rem;color:var(--line)}
.crumb li:last-child::after{content:""}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--clay);text-decoration:underline}
.crumb [aria-current]{color:var(--ink-2)}

.head h1{font-size:clamp(1.85rem,5.2vw,2.85rem);letter-spacing:-.026em;max-width:20ch}
.head .sub{font-size:clamp(1rem,2.2vw,1.1rem);color:var(--ink-2);
  max-width:var(--measure);margin-top:.85rem;line-height:1.58}
.kicker{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--clay);margin-bottom:.7rem}

.meta{display:flex;flex-wrap:wrap;gap:.45rem .9rem;margin-top:1.15rem;
  padding-top:.9rem;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:.715rem;color:var(--ink-3);letter-spacing:.02em}
.meta b{font-weight:500;color:var(--ink-2)}
.checked{display:inline-flex;align-items:center;gap:.38rem}
.checked::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--moss);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--moss) 22%,transparent)}

/* jawaban ringkas */
.answer{margin:1.9rem 0;padding:1.05rem 1.2rem;background:var(--paper-2);
  border-left:3px solid var(--clay);max-width:var(--measure)}
.answer .lbl{font-family:var(--f-mono);font-size:.665rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--clay);margin-bottom:.45rem}
.answer p{font-size:1.02rem;line-height:1.6;margin:0;color:var(--ink)}

/* isi */
.prose{max-width:var(--measure)}
.prose h2{font-size:clamp(1.28rem,3.2vw,1.6rem);margin:2.5rem 0 .85rem;letter-spacing:-.018em;
  scroll-margin-top:5rem;position:relative}
.prose h2:first-child{margin-top:1.4rem}
.prose h3{font-size:1.09rem;margin:1.85rem 0 .6rem;letter-spacing:-.012em;scroll-margin-top:5rem}
.prose p,.prose li{font-size:1.005rem;line-height:1.68}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.25rem}
.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--ink-3)}
.prose ol li::marker{font-family:var(--f-mono);font-size:.86em}
.prose a{color:var(--ink);text-decoration-color:var(--clay)}
.prose a:hover{color:var(--clay)}
.prose>*+h2::before{content:"";display:block;width:2.2rem;height:1px;
  background:var(--clay);margin-bottom:.95rem}

/* kotak */
.note,.warn{margin:1.6rem 0;padding:.95rem 1.1rem;border:1px solid var(--line);
  border-radius:var(--r);font-size:.945rem;line-height:1.6;max-width:var(--measure);
  background:var(--paper-2)}
.note{border-left:3px solid var(--moss)}
.warn{border-left:3px solid var(--clay);background:color-mix(in srgb,var(--clay) 6%,var(--paper-2))}
.note .lbl,.warn .lbl{font-family:var(--f-mono);font-size:.655rem;letter-spacing:.13em;
  text-transform:uppercase;display:block;margin-bottom:.35rem}
.note .lbl{color:var(--moss)}
.warn .lbl{color:var(--clay)}
.note p:last-child,.warn p:last-child{margin:0}

/* tabel */
.tw{margin:1.7rem 0;max-width:100%;overflow-x:auto;border:1px solid var(--line);
  border-radius:var(--r);-webkit-overflow-scrolling:touch}
.tw>table{border-collapse:collapse;width:100%;min-width:32rem;font-size:.9rem}
.tw caption{caption-side:top;text-align:left;padding:.7rem .85rem;font-size:.79rem;
  color:var(--ink-3);border-bottom:1px solid var(--line);background:var(--paper-2);
  font-family:var(--f-mono);letter-spacing:.03em}
.tw th,.tw td{padding:.6rem .85rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-2);line-height:1.5}
.tw thead th{background:var(--paper-2);font-family:var(--f-mono);font-size:.7rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:500;
  position:sticky;top:0;white-space:nowrap}
.tw tbody tr:last-child td{border-bottom:0}
.tw tbody tr:hover{background:var(--paper-2)}
.tw td.n{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tw a{color:var(--ink);text-decoration-color:var(--clay)}

/* tabel peringkat dengan batang elevasi */
.rank td.el{position:relative;font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  white-space:nowrap;font-weight:600;color:var(--forest)}
.rank td.el i{position:absolute;left:.85rem;right:.85rem;bottom:.42rem;height:2px;
  background:var(--paper-3);display:block;border-radius:2px}
.rank td.el i b{position:absolute;inset:0 auto 0 0;background:var(--moss);
  border-radius:2px;display:block}
.rank td.rk{font-family:var(--f-mono);color:var(--ink-3);width:2.6rem;font-size:.82rem}

/* ============================================================ LAYOUT GUNUNG */
.gx{display:grid;gap:2.2rem;grid-template-columns:1fr}
@media (min-width:64rem){
  .gx{grid-template-columns:minmax(0,1fr) 19.5rem;gap:3rem;align-items:start}
  .gx-side{position:sticky;top:4.6rem}
}
.gx-main{min-width:0}

/* panel data */
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);
  overflow:hidden}
.panel-hd{padding:.62rem .9rem;border-bottom:1px solid var(--line);background:var(--paper-3);
  font-family:var(--f-mono);font-size:.665rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2)}
.panel-bd{padding:.35rem .9rem .8rem}
.fact{display:flex;align-items:baseline;gap:.4rem;padding:.5rem 0;
  border-bottom:1px dotted var(--line);font-size:.875rem}
.fact:last-child{border-bottom:0}
.fact dt{color:var(--ink-3);flex:0 0 auto;font-size:.815rem}
.fact dd{margin:0 0 0 auto;text-align:right;font-weight:520;min-width:0;
  overflow-wrap:break-word}
.fact dd.n{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
dl.facts{margin:0}

/* strip elevasi besar */
.elevstrip{padding:1rem .9rem .85rem;border-bottom:1px solid var(--line);background:var(--paper)}
.elevstrip .v{font-family:var(--f-mono);font-size:2.05rem;font-weight:600;line-height:1;
  letter-spacing:-.035em;color:var(--forest);font-variant-numeric:tabular-nums}
.elevstrip .v span{font-size:.42em;font-weight:400;color:var(--ink-3);margin-left:.25em;
  letter-spacing:.06em}
.elevstrip .k{font-family:var(--f-mono);font-size:.655rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.4rem}
.ticks{display:flex;gap:2px;margin-top:.7rem;height:14px;align-items:flex-end}
.ticks i{flex:1;background:var(--line);border-radius:1px}
.ticks i.on{background:var(--moss)}

/* daftar isi */
.toc{margin-top:1.1rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2)}
.toc>summary{padding:.62rem .9rem;font-family:var(--f-mono);font-size:.665rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:.5rem}
.toc>summary::-webkit-details-marker{display:none}
.toc>summary::after{content:"+";margin-left:auto;font-family:var(--f-mono);color:var(--ink-3)}
.toc[open]>summary::after{content:"–"}
.toc[open]>summary{border-bottom:1px solid var(--line)}
.toc ol{list-style:none;margin:0;padding:.55rem .9rem .8rem;counter-reset:t}
.toc li{counter-increment:t;margin-bottom:.06rem}
.toc a{display:flex;gap:.55rem;text-decoration:none;color:var(--ink-2);
  font-size:.845rem;padding:.24rem 0;line-height:1.45}
.toc a::before{content:counter(t,decimal-leading-zero);font-family:var(--f-mono);
  font-size:.66rem;color:var(--ink-3);flex:0 0 auto;padding-top:.2em}
.toc a:hover{color:var(--clay)}
@media (min-width:64rem){.toc{margin-top:1.1rem}.toc>summary{pointer-events:none}}

/* jalur */
.trails{list-style:none;margin:1.5rem 0;padding:0;border-top:1px solid var(--line)}
.trails li{border-bottom:1px solid var(--line-2);padding:.95rem 0;display:grid;gap:.28rem}
.trails .tn{font-family:var(--f-display);font-size:1.04rem;font-weight:620;letter-spacing:-.01em}
.trails .tb{font-family:var(--f-mono);font-size:.735rem;color:var(--ink-3);letter-spacing:.02em}
.trails .tc{font-size:.9rem;color:var(--ink-2);line-height:1.55}

/* bahaya */
.hazards{list-style:none;margin:1.3rem 0;padding:0}
.hazards li{position:relative;padding:.55rem 0 .55rem 1.55rem;font-size:.955rem;
  line-height:1.6;border-bottom:1px solid var(--line-2)}
.hazards li:last-child{border-bottom:0}
.hazards li::before{content:"";position:absolute;left:.15rem;top:1.02em;width:7px;height:7px;
  background:var(--clay);transform:rotate(45deg)}

/* faq */
.faq{margin:1.6rem 0;border-top:1px solid var(--line);max-width:var(--measure)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{padding:.85rem 1.8rem .85rem 0;cursor:pointer;list-style:none;position:relative;
  font-family:var(--f-display);font-size:1.02rem;font-weight:600;letter-spacing:-.01em;
  line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.35rem;top:1.28em;width:8px;height:8px;
  border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq summary:hover{color:var(--clay)}
.faq .a{padding:0 0 1rem;font-size:.96rem;line-height:1.65;color:var(--ink-2)}
.faq .a p:last-child{margin:0}

/* sumber */
.sources{margin:2.4rem 0 0;padding:1.15rem 1.2rem;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r);max-width:var(--measure)}
.sources h2{font-size:1.02rem;margin:0 0 .3rem}
.sources .hint{font-size:.83rem;color:var(--ink-3);margin:0 0 .8rem;line-height:1.55}
.sources ul{list-style:none;margin:0;padding:0}
.sources li{padding:.4rem 0;border-bottom:1px dotted var(--line);font-size:.9rem}
.sources li:last-child{border-bottom:0}
.sources a{color:var(--ink);text-decoration-color:var(--clay);overflow-wrap:anywhere}
.sources a::after{content:" ↗";color:var(--ink-3);font-size:.85em}

/* tautan terkait */
.rel{margin-top:2.6rem;padding-top:1.7rem;border-top:1px solid var(--line)}
.rel h2{font-size:1.08rem;margin-bottom:.9rem}
.relgrid{display:grid;gap:0;background:var(--paper);border:1px solid var(--line);
  grid-template-columns:1fr;overflow:hidden}
@media (min-width:34rem){.relgrid{grid-template-columns:1fr 1fr}}
@media (min-width:60rem){.relgrid{grid-template-columns:repeat(3,1fr)}}
.relgrid a{background:var(--paper);padding:.85rem .9rem;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:.2rem;transition:background .16s}
.relgrid a:hover{background:var(--paper-2)}
.relgrid a:hover .rn{color:var(--clay)}
.relgrid .rk{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3)}
.relgrid .rn{font-family:var(--f-display);font-size:.99rem;font-weight:600;
  letter-spacing:-.012em;line-height:1.3;transition:color .16s}
.relgrid .re{font-family:var(--f-mono);font-size:.76rem;color:var(--forest)}

/* ============================================================ FILTER INDEKS */
.filters{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.4rem 0 1.6rem;
  padding-bottom:1.3rem;border-bottom:1px solid var(--line)}
.filters button{appearance:none;cursor:pointer;font:inherit;font-size:.815rem;
  padding:.36rem .72rem;border:1px solid var(--line);background:var(--paper);
  color:var(--ink-2);border-radius:var(--r);transition:.14s}
.filters button:hover{border-color:var(--ink-3);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);
  color:var(--paper)}
:root[data-theme="dark"] .filters button[aria-pressed="true"]{color:#0f1310}
.fcount{font-family:var(--f-mono);font-size:.735rem;color:var(--ink-3);
  margin:0 0 1rem;letter-spacing:.03em}
.mcard[hidden]{display:none}

/* ============================================================ FOOTER */
.foot{border-top:1px solid var(--line);background:var(--paper-2);margin-top:2rem}
.foot-in{padding-block:2.4rem 1.4rem;display:grid;gap:1.9rem;grid-template-columns:1fr}
@media (min-width:44rem){.foot-in{grid-template-columns:1.5fr 1fr 1fr}}
@media (min-width:64rem){.foot-in{grid-template-columns:1.7fr 1fr 1fr 1fr}}
.foot h2{font-family:var(--f-mono);font-size:.665rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:.8rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.42rem}
.foot a{color:var(--ink-2);text-decoration:none;font-size:.885rem}
.foot a:hover{color:var(--clay);text-decoration:underline}
.foot-about p{font-size:.87rem;color:var(--ink-2);line-height:1.6;max-width:34ch}
.foot-brand{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem}
.foot-brand svg{width:22px;height:22px;color:var(--forest)}
.foot-brand b{font-family:var(--f-display);font-size:1rem;letter-spacing:-.02em}
.foot-emg{margin-top:.9rem;font-size:.815rem;color:var(--ink-3);line-height:1.55;
  padding-top:.8rem;border-top:1px solid var(--line)}
.foot-emg b{color:var(--clay);font-family:var(--f-mono)}
.foot-btm{border-top:1px solid var(--line);padding-block:1rem 1.6rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center;
  font-size:.795rem;color:var(--ink-3)}
.foot-btm nav{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-left:auto}
.foot-btm a{color:var(--ink-3);text-decoration:none}
.foot-btm a:hover{color:var(--clay);text-decoration:underline}
.foot-cr{font-family:var(--f-mono);font-size:.735rem;letter-spacing:.045em;
  text-transform:uppercase;color:var(--ink-3)}
.foot-cr i{font-style:normal;color:var(--line);margin-inline:.28rem}
.foot-cr em{font-style:normal;text-transform:none;letter-spacing:.01em;color:var(--ink-2)}

/* ============================================================ 404 */
.e404{text-align:center;padding-block:clamp(3rem,12vw,7rem)}
.e404 .code{font-family:var(--f-mono);font-size:clamp(3.4rem,15vw,6rem);
  color:var(--paper-3);line-height:1;letter-spacing:-.04em;font-weight:600}
.e404 h1{margin-top:.6rem;font-size:clamp(1.5rem,5vw,2.2rem)}
.e404 p{color:var(--ink-2);max-width:38ch;margin:1rem auto 0}
.e404 .hero-cta{justify-content:center}

/* ============================================================ CETAK */
@media print{
  .top,.drawer,.sitenote,.foot,.finder,.filters,.hero-art,.rel,.toc{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .wrap{max-width:none;padding:0}
  .prose,.answer,.sources,.faq{max-width:none}
  .faq details{display:block}
  .faq .a{display:block!important}
  a{text-decoration:none;color:#000}
  .prose a::after,.sources a::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
  .tw{overflow:visible;border:1px solid #999}
  .tw>table{min-width:0}
  .panel,.note,.warn{border:1px solid #999;background:#fff}
  h2,h3{page-break-after:avoid}
  .tw,.answer,.note,.warn{page-break-inside:avoid}
}