/* Tema "hutan" seperti Buku GIS; nilai dari docs/spesifikasi-gaya-buku.md (bagian A). Font sistem, tanpa muatan luar. */
:root{
  --bg:#ffffff; --fg:#1b241c; --muted:#5f6c60; --line:#dfe6d8; --panel:#f3f6ef;
  --navy:#1c3c28; --blue:#356b3c; --amber:#86641a; --link:#2f6a38;
  --btn-bg:#1c3c28; --btn-fg:#ffffff; --warn-bg:#fbf3e0; --warn-line:#e3cf9a; --radius:10px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1a13; --fg:#e6ece4; --muted:#9fb09f; --line:#2a3a2f; --panel:#17271d;
    --navy:#c3d8ac; --blue:#9dbb87; --amber:#e6c789; --link:#b4d39a;
    --btn-bg:#c3d8ac; --btn-fg:#0f1a13; --warn-bg:#2a2412; --warn-line:#5a4a1c;
  }
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--fg);
  font:17px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
a{ color:var(--link); text-underline-offset:3px; }
a:focus-visible,button:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; border-radius:4px; }
.bar{ background:var(--panel); border-bottom:1px solid var(--line); }
.bar .dalam{ max-width:860px; margin:0 auto; padding:12px 16px; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; font-size:.92rem; }
.bar a{ color:var(--navy); font-weight:600; text-decoration:none; }
.bar a:hover{ text-decoration:underline; }
main{ max-width:860px; margin:0 auto; padding:28px 16px 48px; }
.baca{ max-width:720px; margin:0 auto; }
h1,h2,h3{ line-height:1.25; color:var(--navy); font-family:Georgia,"Times New Roman",serif; }
h1{ font-size:clamp(1.8rem,5vw,2.5rem); margin:.2em 0 .3em; }
h2{ font-size:clamp(1.3rem,3.4vw,1.65rem); margin:2em 0 .5em; padding-bottom:.25em; border-bottom:2px solid var(--line); }
h3{ font-size:1.15rem; margin:1.6em 0 .4em; }
p{ margin:.9em 0; }
.kicker{ text-transform:uppercase; letter-spacing:.09em; font-size:.8rem; font-weight:700; color:var(--amber); margin:0; }
.lead{ font-size:1.12rem; color:var(--muted); }
.meta{ color:var(--muted); font-size:.95rem; }
.sampul{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:28px 22px; text-align:center; margin:8px 0 28px; }
.sampul h1{ margin:.15em 0; }
.sampul .sub{ color:var(--blue); font-size:1.15rem; font-weight:600; margin:.2em 0 .8em; }
.tombol{ display:inline-block; background:var(--btn-bg); color:var(--btn-fg)!important; text-decoration:none; font-weight:700;
  padding:12px 22px; border-radius:999px; margin:8px 6px 0; }
.tombol:hover{ filter:brightness(1.08); }
.tombol.pinggir{ background:transparent; color:var(--navy)!important; border:2px solid var(--navy); }
.daftar-isi{ list-style:none; padding:0; margin:12px 0; }
.daftar-isi li{ border:1px solid var(--line); border-radius:var(--radius); margin:10px 0; background:var(--bg); }
.daftar-isi a{ display:block; padding:14px 16px; text-decoration:none; color:var(--fg); }
.daftar-isi a:hover{ background:var(--panel); }
.daftar-isi .no{ display:inline-block; min-width:4.2em; font-weight:700; color:var(--amber); font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; }
.daftar-isi .jdl{ font-weight:700; color:var(--navy); }
.daftar-isi .ket{ display:block; color:var(--muted); font-size:.92rem; margin-left:4.2em; }
.bab-kepala{ background:var(--panel); border-left:6px solid var(--blue); border-radius:var(--radius); padding:18px 20px; margin:6px 0 24px; }
.bab-kepala h1{ margin:.1em 0 .2em; }
.bab-kepala .sub{ color:var(--muted); margin:0; }
figure{ margin:1.4em 0; text-align:center; }
figure img{ max-width:100%; height:auto; border:1px solid var(--line); border-radius:8px; background:#fff; }
figcaption{ color:var(--muted); font-size:.92rem; font-style:italic; margin-top:.5em; text-align:left; }
figure.lebar{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
figure.lebar .geser{ display:none; color:var(--muted); font-size:.82rem; text-align:left; margin:0 0 .4em; }
@media (max-width:760px){
  figure.lebar img{ width:760px; max-width:none; }
  figure.lebar .geser{ display:block; position:sticky; left:0; }
}
.tabel-bungkus{ overflow-x:auto; margin:1.2em 0; -webkit-overflow-scrolling:touch; }
table{ border-collapse:collapse; width:100%; min-width:520px; font-size:.95rem; }
th,td{ border:1px solid var(--line); padding:9px 11px; text-align:left; vertical-align:top; }
th{ background:var(--navy); color:var(--bg); }
tbody tr:nth-child(even) td, tr:nth-child(even) td{ background:var(--panel); }
.nav-bab{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; margin:40px 0 8px; padding-top:18px; border-top:1px solid var(--line); }
.nav-bab a{ flex:1 1 230px; border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; text-decoration:none; color:var(--fg); }
.nav-bab a:hover{ background:var(--panel); }
.nav-bab small{ display:block; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
.nav-bab .sel{ text-align:right; }
footer{ border-top:1px solid var(--line); background:var(--panel); }
footer .dalam{ max-width:860px; margin:0 auto; padding:20px 16px 28px; font-size:.92rem; color:var(--muted); }
footer p{ margin:.3em 0; }
.peringatan{ background:var(--warn-bg); border:1px solid var(--warn-line); border-left:6px solid var(--amber); border-radius:var(--radius); padding:12px 16px; margin:1.4em 0; }
.peringatan .jdl{ margin:0 0 .2em; font-weight:700; color:var(--amber); text-transform:uppercase; letter-spacing:.07em; font-size:.82rem; }
.peringatan p{ margin:.3em 0; }
.chip-baris{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px; justify-content:center; }
.chip{ background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:5px 14px; font-size:.9rem; color:var(--navy); font-weight:600; }
.langkah{ list-style:none; margin:1em 0; padding:0; }
.langkah li{ display:grid; grid-template-columns:3rem 1fr; gap:4px 14px; padding:12px 0; border-bottom:1px solid var(--line); }
.langkah .no{ grid-row:1 / span 2; font-size:1.6rem; font-weight:800; color:var(--amber); font-family:Georgia,serif; line-height:1.1; }
.langkah .jdl{ font-weight:700; color:var(--navy); }
.langkah .isi{ grid-column:2; margin:0; }
.kartu-baris{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin:1.2em 0; }
.kartu{ border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; background:var(--bg); }
.kartu.sorot{ border-color:var(--blue); background:var(--panel); }
.kartu h3{ margin:0 0 .2em; font-size:1rem; }
.kartu .besar{ font-size:1.5rem; font-weight:800; color:var(--amber); margin:0 0 .4em; font-family:Georgia,serif; }
.kartu ul{ margin:.3em 0 0; padding-left:1.1em; }
.penutup{ text-align:center; color:var(--muted); font-style:italic; margin-top:2.4em; }
@media (max-width:560px){ body{ font-size:16px; } .sampul{ padding:20px 14px; } }
@media print{ .bar,.nav-bab,.tombol{ display:none; } body{ background:#fff; color:#000; } }