/* LUMBUNG SOKOLA — app.css
   Palet: logo Sokola (hijau 465a0c, hitam 342c2a, oranye bintang db8806), batik & sampul MSBR, dan rekomendasi Eva. */
@font-face{font-family:"Averia Libre";src:url(fonts/averia-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Averia Libre";src:url(fonts/averia-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(fonts/nunito-sans.woff2) format("woff2");font-weight:200 1000;font-display:swap}

:root{
  --kertas:#E8E5D4; --permukaan:#F6F4E9; --angkat:#FFFEF8; --tinta:#222222; --tinta-2:#5C522E; --garis:#CFC9AE; --garis-2:#B7AF8C;
  --utama:#465A0C; --utama-tinta:#FFFEF8; --utama-pucat:#DCE7BE; --aksen:#DB8806; --aksen-tinta:#342C2A; --aksen-pucat:#F6E3B9;
  --merah:#BE2139; --merah-pucat:#F4D3D8; --coklat:#785E44; --akar:#48341D; --kuning:#DFB044; --daun:#B3D56E; --daun-tua:#5C522E;
  --rel:#342C2A; --rel-tinta:#E8E5D4; --pulau:#B9C48F; --pulau-garis:#7E8A52; --laut:#DDD9C4; --tetangga:#D3CEB6;
  --bayang:0 10px 34px rgba(52,44,42,.22);
  --judul:"Averia Libre","Nunito Sans",Georgia,serif; --isi:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --c1:#E9A9B2; --c2:#F0C27A; --c3:#EBD58A; --c4:#C6DE96; --c5:#CDC59C; --c6:#C9B39B; --catatan-tinta:#2B2520;
  color-scheme:light;
}
:root[data-tema="malam"]{
  --kertas:#1C1A18; --permukaan:#272421; --angkat:#322D29; --tinta:#E8E5D4; --tinta-2:#B9B08A; --garis:#48413A; --garis-2:#5E5548;
  --utama:#B3D56E; --utama-tinta:#1F2408; --utama-pucat:#34401A; --aksen:#E89D32; --aksen-tinta:#222222; --aksen-pucat:#4A3916;
  --merah:#F08A9A; --merah-pucat:#4B2229; --coklat:#C3A789; --akar:#E8E5D4; --kuning:#DFB044; --daun:#B3D56E; --daun-tua:#998D50;
  --rel:#141211; --rel-tinta:#E8E5D4; --pulau:#4E5A2A; --pulau-garis:#7F8F45; --laut:#211F1C; --tetangga:#2E2A26;
  --bayang:0 10px 34px rgba(0,0,0,.55);
  --c1:#7C2B38; --c2:#8A5A12; --c3:#7D6A1E; --c4:#4A5F1E; --c5:#5F5830; --c6:#5E4A36; --catatan-tinta:#F3F0E2;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--isi);font-size:16px;line-height:1.5;color:var(--tinta);background:var(--kertas);-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:var(--judul);font-weight:700;line-height:1.15;margin:0;letter-spacing:.005em}
h1{font-size:1.7rem} h2{font-size:1.22rem} h3{font-size:1.04rem}
p{margin:.45rem 0} a{color:var(--utama);text-underline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--aksen);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
.ik{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em}
.redup{color:var(--tinta-2);font-size:.9rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Rangka ---------- */
.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100%}
.rel{background:var(--rel);color:var(--rel-tinta);padding:18px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:14px;overflow:auto}
.merek{display:flex;align-items:center;gap:10px;padding:2px 8px 6px;font-family:var(--judul);font-weight:700;font-size:1.28rem;line-height:1.05;color:inherit;text-decoration:none}
.merek small{display:block;font-family:var(--isi);font-weight:400;font-size:.76rem;opacity:.7;margin-top:3px}
.merek svg{width:34px;height:34px;flex:none}
.rel nav{display:flex;flex-direction:column;gap:2px}
.rel nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:inherit;text-decoration:none;opacity:.84}
.rel nav a:hover{background:rgba(232,229,212,.08);opacity:1}
.rel nav a[aria-current="page"]{background:var(--aksen);color:#342C2A;font-weight:700;opacity:1}
.rel .kaki{margin-top:auto;display:flex;flex-direction:column;gap:8px;font-size:.84rem}
.rel .kaki .siapa{padding:0 8px;opacity:.8;word-break:break-word}
.rel .kaki button{background:none;border:1px solid rgba(232,229,212,.25);color:inherit;border-radius:8px;padding:7px 10px;cursor:pointer;display:flex;gap:8px;align-items:center}
.rel .kaki button:hover{background:rgba(232,229,212,.08)}
.atas,.bawah{display:none}
main{padding:26px clamp(16px,3.4vw,40px) 60px;min-width:0}
main.penuh{padding:0;height:100vh;display:flex;flex-direction:column}
.kepala{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.kepala p{color:var(--tinta-2);max-width:64ch;margin:.3rem 0 0}
.kepala .aksi{display:flex;gap:8px;flex-wrap:wrap}
.pratinjau{background:var(--aksen-pucat);border:1px solid var(--aksen);padding:8px 14px;border-radius:8px;margin-bottom:14px;font-size:.92rem}

@media (max-width:899px){
  .app{display:block;padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  .rel{display:none}
  .atas{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;background:var(--rel);color:var(--rel-tinta);padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top,0px))}
  .atas .merek{font-size:1.1rem;padding:0;flex:1}.atas .merek svg{width:28px;height:28px}
  .atas button{background:none;border:0;color:inherit;padding:8px;border-radius:8px;cursor:pointer}
  .bawah{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--permukaan);border-top:1px solid var(--garis);padding-bottom:env(safe-area-inset-bottom,0px)}
  .bawah a,.bawah button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 2px 7px;font-size:.72rem;color:var(--tinta-2);text-decoration:none;background:none;border:0;cursor:pointer;min-height:56px}
  .bawah .ik{width:22px;height:22px}
  .bawah [aria-current="page"]{color:var(--utama);font-weight:800}
  main{padding:16px 14px 28px}
  main.penuh{height:calc(100dvh - 52px - 62px - env(safe-area-inset-bottom,0px) - env(safe-area-inset-top,0px))}
  h1{font-size:1.45rem}
}

/* ---------- Komponen ---------- */
.panel{background:var(--permukaan);border:1px solid var(--garis);border-radius:12px;padding:16px;margin-bottom:14px}
.panel>h2{margin-bottom:8px}
.kisi{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.angka{font-family:var(--judul);font-size:2rem;font-weight:700;line-height:1}
.t{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--angkat);color:var(--tinta);border:1px solid var(--garis-2);border-radius:9px;padding:8px 13px;cursor:pointer;font-weight:700;min-height:40px;text-decoration:none;white-space:nowrap}
.t:hover{border-color:var(--utama)}
.t.utama{background:var(--utama);color:var(--utama-tinta);border-color:var(--utama)}
.t.utama:hover{filter:brightness(1.08)}
.t.aksen{background:var(--aksen);color:var(--aksen-tinta);border-color:var(--aksen)}
.t.bahaya{color:var(--merah);border-color:var(--merah)}
.t.hantu{background:none;border-color:transparent;font-weight:600}
.t.hantu:hover{background:var(--angkat);border-color:var(--garis)}
.t.kecil{padding:4px 9px;min-height:32px;font-size:.88rem;font-weight:600}
.t.ikon{padding:8px;min-width:40px}
.t[disabled]{opacity:.55;cursor:default}
.t[aria-pressed="true"]{background:var(--utama-pucat);border-color:var(--utama);color:var(--tinta)}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;line-height:1.5;padding:1px 9px;border-radius:99px;background:var(--angkat);border:1px solid var(--garis);color:var(--tinta-2);margin:2px 4px 2px 0;white-space:nowrap}
.chip.hijau{background:var(--utama-pucat);border-color:transparent;color:var(--tinta)}
.chip.merah{background:var(--merah-pucat);border-color:transparent;color:var(--tinta)}
.chip.kuning{background:var(--aksen-pucat);border-color:transparent;color:var(--tinta)}
.chip i{width:8px;height:8px;border-radius:50%;display:inline-block}
.segmen{display:inline-flex;background:var(--angkat);border:1px solid var(--garis-2);border-radius:10px;padding:3px;gap:2px;max-width:100%;overflow-x:auto}
.segmen button{background:none;border:0;border-radius:7px;padding:6px 12px;cursor:pointer;display:flex;gap:6px;align-items:center;color:var(--tinta-2);font-weight:600;white-space:nowrap;min-height:34px}
.segmen button[aria-pressed="true"]{background:var(--utama);color:var(--utama-tinta)}
input[type=text],input[type=search],input[type=date],input[type=number],input[type=email],input[type=url],select,textarea{border:1px solid var(--garis-2);border-radius:9px;padding:8px 10px;background:var(--angkat);max-width:100%;min-height:40px}
textarea{width:100%;min-height:88px;resize:vertical}
label.f{display:block;margin-bottom:12px}
label.f>span{display:block;font-weight:700;margin-bottom:3px}
label.f>small{display:block;color:var(--tinta-2);margin-bottom:4px}
label.f input,label.f select{width:100%}
.dua{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.baris{padding:12px 0;border-top:1px solid var(--garis)}
.baris:first-child{border-top:0;padding-top:2px}
.baris .atasb{display:flex;gap:12px;justify-content:space-between;align-items:flex-start}
.baris .aksi{display:flex;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.kosong{padding:26px 16px;text-align:center;color:var(--tinta-2);border:1px dashed var(--garis-2);border-radius:12px}
.ukur{height:8px;background:var(--angkat);border:1px solid var(--garis);border-radius:5px;overflow:hidden;margin-top:8px;max-width:420px}
.ukur>i{display:block;height:100%;background:var(--utama)}
.tumpuk{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--angkat);margin:10px 0}
.tumpuk i{display:block}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--garis);vertical-align:top}
th{font-size:.86rem;color:var(--tinta-2)}
.gulir{overflow-x:auto}
#pesan{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--rel);color:#E8E5D4;padding:10px 16px;border-radius:10px;display:none;z-index:90;max-width:92vw;box-shadow:var(--bayang);align-items:center;gap:12px}
#pesan.galat{background:#8E1A2C}
#pesan button{background:var(--aksen);color:#342C2A;border:0;border-radius:7px;padding:4px 10px;font-weight:700;cursor:pointer}
@media (min-width:900px){#pesan{bottom:24px}}

/* ---------- Dialog & lembar ---------- */
dialog{border:1px solid var(--garis);border-radius:14px;padding:0;background:var(--permukaan);color:var(--tinta);width:min(620px,94vw);max-height:92vh;box-shadow:var(--bayang)}
dialog::backdrop{background:rgba(28,26,24,.55)}
dialog.lebar{width:min(900px,96vw)}
dialog.sisi{margin:0 0 0 auto;height:100vh;max-height:100vh;border-radius:14px 0 0 14px;width:min(460px,96vw)}
dialog .dkepala{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:14px 16px 10px;position:sticky;top:0;background:var(--permukaan);z-index:2;border-bottom:1px solid var(--garis)}
dialog .disi{padding:14px 16px 18px}
dialog .dkaki{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;position:sticky;bottom:0;background:var(--permukaan);border-top:1px solid var(--garis)}
@media (max-width:899px){
  dialog,dialog.lebar,dialog.sisi{margin:auto 0 0 0;width:100vw;max-width:100vw;max-height:94dvh;height:auto;border-radius:16px 16px 0 0;border-width:1px 0 0 0}
  dialog.penuh{height:100dvh;max-height:100dvh;border-radius:0}
  .dua{grid-template-columns:1fr}
}

/* ---------- Masuk ---------- */
.masuk{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--rel)}
.masuk-kotak{background:var(--permukaan);border-radius:16px;padding:26px 24px;width:min(420px,100%);box-shadow:var(--bayang)}
.masuk-kotak h1{display:flex;align-items:center;gap:12px}.masuk-kotak h1 svg{width:44px;height:44px}
.masuk-kotak form{margin-top:16px}

/* ---------- Beranda: peta & graf ---------- */
.jelajah{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
.petawadah{position:relative;background:var(--laut);border:1px solid var(--garis);border-radius:14px;overflow:hidden;touch-action:none;aspect-ratio:2000/769;min-height:230px;cursor:grab;user-select:none}
.petawadah.geser{cursor:grabbing}
.petawadah>svg,.petawadah>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.petawadah .pulau{fill:var(--pulau);stroke:var(--pulau-garis);stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.petawadah .tetangga{fill:var(--tetangga)}
.titik{position:absolute;left:0;top:0;transform:translate(-50%,-50%);background:none;border:0;padding:6px;cursor:pointer;display:flex;align-items:center;gap:2px;color:var(--tinta);z-index:2}
.titik svg{width:26px;height:26px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));transition:transform .12s}
.titik:hover svg{transform:scale(1.2)}
.titik[aria-pressed="true"] svg{transform:scale(1.45)}
.titik[aria-pressed="true"]{z-index:3}
.titik.tanpanama .nama{display:none}
.titik.tanpanama:hover .nama,.titik.tanpanama[aria-pressed="true"] .nama{display:block}
.titik .nama{position:absolute;left:100%;top:50%;transform:translateY(-50%);background:var(--permukaan);border:1px solid var(--garis);border-radius:7px;padding:1px 7px;font-size:.8rem;font-weight:700;white-space:nowrap;pointer-events:none}
.titik.kiri .nama{left:auto;right:100%}
.titik.selesai svg{width:16px;height:16px}
.titik.selesai .nama{display:none}
.titik.selesai:hover .nama,.titik[aria-pressed="true"] .nama{display:block}
.titik.atur{cursor:move;outline:2px dashed var(--aksen);border-radius:50%}
.petaalat{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px;z-index:3}
.petaalat .t{box-shadow:0 2px 8px rgba(0,0,0,.18)}
.petaket{position:absolute;left:10px;bottom:10px;z-index:3;display:flex;gap:6px;flex-wrap:wrap;max-width:70%}
.grafwadah{aspect-ratio:auto;height:min(64vh,620px);cursor:grab}
.grafalat{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.prog h2{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.prog .bulanan{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin:8px 0 2px}
.prog .bulanan button,.prog .bulanan span{aspect-ratio:1;border-radius:5px;border:1px solid var(--garis);background:var(--angkat);font-size:.68rem;display:grid;place-items:center;color:var(--tinta-2);padding:0}
.prog .bulanan button{background:var(--utama);border-color:var(--utama);color:var(--utama-tinta);cursor:pointer;font-weight:800}
.progchip{display:flex;gap:6px;overflow-x:auto;padding:8px 0 2px}
/* Layar sempit: peta, pilihan program, rincian program, baru tabel */
@media (max-width:1100px){.jelajah{display:flex;flex-direction:column;gap:0;align-items:stretch}.jelajah>div{display:contents}.jelajah>*,.jelajah>div>*{min-width:0;max-width:100%}#prog{order:3;margin-top:10px}#bawahan{order:4}.petawadah:not(.grafwadah){aspect-ratio:auto;min-height:0;width:100%;height:clamp(240px,64vw,440px)}}

/* ---------- Pustaka ---------- */
.saring{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;align-items:center}
.saring input[type=search]{flex:1 1 220px;min-width:0}
.saring select{flex:0 1 auto;max-width:48%}
.dok{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:11px 6px;border-top:1px solid var(--garis);cursor:pointer;border-radius:8px}
.dok:first-child{border-top:0}
.dok:hover{background:var(--angkat)}
.dok .tipe{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:var(--angkat);border:1px solid var(--garis);font-size:.62rem;font-weight:800;color:var(--tinta-2)}
.dok b{display:block;overflow-wrap:anywhere}
.dok .jalur{font-size:.82rem;color:var(--tinta-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dok .bintang{color:var(--aksen)}
.dok .bintang .ik{fill:currentColor}
.sel{text-align:center;min-width:40px;padding:5px 2px}
.sel button{border:0;background:var(--utama);color:var(--utama-tinta);border-radius:6px;padding:3px 8px;cursor:pointer;font-weight:800;min-width:30px}
.sel .bolong{color:var(--garis-2)}
.prop{display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px 10px;margin:10px 0}
.prop dt{color:var(--tinta-2);font-size:.88rem}.prop dd{margin:0;overflow-wrap:anywhere}
.jatuh{border:2px dashed var(--garis-2);border-radius:12px;padding:18px;text-align:center;color:var(--tinta-2);cursor:pointer}
.jatuh.atas{border-color:var(--utama);background:var(--utama-pucat)}
.saran{background:var(--utama-pucat);border-radius:10px;padding:10px 12px;margin:10px 0}

/* ---------- Bacaan Markdown ---------- */
.md{max-width:72ch;font-size:1.02rem;line-height:1.62;overflow-wrap:anywhere}
.md h1,.md h2,.md h3,.md h4{margin:1.3em 0 .4em}
.md h1{font-size:1.5rem}.md h2{font-size:1.25rem}.md h3,.md h4{font-size:1.06rem}
.md>*:first-child{margin-top:0}
.md ul,.md ol{padding-left:1.3em}
.md blockquote{border-left:4px solid var(--kuning);margin:1em 0;padding:.1em 1em;color:var(--tinta-2)}
.md code{background:var(--angkat);border:1px solid var(--garis);border-radius:5px;padding:0 4px;font-size:.92em}
.md pre{background:var(--angkat);border:1px solid var(--garis);border-radius:8px;padding:10px;overflow:auto}
.md pre code{border:0;padding:0;background:none}
.md table{font-size:.94rem;margin:1em 0}
.md hr{border:0;border-top:1px solid var(--garis);margin:1.4em 0}

/* ---------- Kanvas ---------- */
.kvbilah{display:flex;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--garis);background:var(--permukaan);flex-wrap:wrap}
.kvbilah input{flex:1 1 160px;min-width:0;font-family:var(--judul);font-weight:700;font-size:1.05rem;background:none;border-color:transparent}
.kvbilah input:hover,.kvbilah input:focus{border-color:var(--garis-2);background:var(--angkat)}
.kv{position:relative;flex:1;overflow:hidden;touch-action:none;background-color:var(--kertas);background-image:radial-gradient(var(--garis) 1.1px,transparent 1.2px);background-size:24px 24px;cursor:default;min-height:0}
.kv.geser{cursor:grabbing}.kv.alat-geser{cursor:grab}.kv.alat-buat{cursor:crosshair}
.kv-lapis{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.kv svg.kv-garis{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.kv-garis path.tali{fill:none;stroke:var(--tinta-2);stroke-width:2}
.kv-garis path.kena{fill:none;stroke:transparent;stroke-width:16;pointer-events:stroke;cursor:pointer}
.kv-garis g.pilih path.tali{stroke:var(--aksen);stroke-width:3}
.kv-garis text{font:600 13px var(--isi);fill:var(--tinta);paint-order:stroke;stroke:var(--kertas);stroke-width:5px;stroke-linejoin:round;text-anchor:middle}
.kn{position:absolute;border-radius:6px;background:var(--angkat);border:1px solid var(--garis-2);color:var(--tinta);overflow:hidden;cursor:grab;display:flex;flex-direction:column}
.kn.w1{background:var(--c1)}.kn.w2{background:var(--c2)}.kn.w3{background:var(--c3)}.kn.w4{background:var(--c4)}.kn.w5{background:var(--c5)}.kn.w6{background:var(--c6)}
.kn[class*=" w"]{border-color:transparent;color:var(--catatan-tinta);box-shadow:0 2px 5px rgba(52,44,42,.2)}
.kn.pilih{outline:3px solid var(--aksen);outline-offset:1px;overflow:visible}
.kn .isi{padding:10px 12px;font-size:14px;line-height:1.38;overflow:hidden;flex:1;overflow-wrap:anywhere;pointer-events:none}
.kn .isi p{margin:0 0 .4em}.kn .isi h1,.kn .isi h2,.kn .isi h3{font-size:1.1em;margin:0 0 .3em}.kn .isi ul,.kn .isi ol{margin:0;padding-left:1.2em}
.kn textarea{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;background:var(--angkat);color:var(--tinta);padding:10px 12px;font-size:14px;line-height:1.38;resize:none;min-height:0}
.kn.grup{background:rgba(120,94,68,.07);border:2px solid var(--garis-2);border-radius:12px;overflow:visible;cursor:grab}
.kn.grup>.label{position:absolute;left:8px;bottom:100%;font-family:var(--judul);font-weight:700;font-size:16px;white-space:nowrap;padding:2px 4px;color:var(--tinta)}
.kn.gambar{background:none;border-color:transparent}
.kn.gambar img{width:100%;height:100%;object-fit:contain;pointer-events:none;display:block}
.kn.tautan .kartu{display:flex;gap:10px;padding:10px;flex:1;min-height:0;pointer-events:none}
.kn.tautan .kartu img{width:64px;height:64px;object-fit:cover;border-radius:6px;flex:none}
.kn.tautan .kartu b{display:block;font-size:14px;line-height:1.25}
.kn.tautan .kartu small{color:var(--tinta-2);display:block;font-size:12px}
.kn.tautan .bilah{display:flex;gap:6px;padding:0 8px 8px}
.kn.tautan iframe{flex:1;border:0;width:100%;background:#fff}
.kn .ubahukur{position:absolute;right:-7px;bottom:-7px;width:18px;height:18px;border-radius:50%;background:var(--aksen);border:2px solid var(--permukaan);cursor:nwse-resize;display:none}
.kn .kait{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--permukaan);border:2px solid var(--aksen);display:none;cursor:crosshair}
.kn .kait[data-sisi=top]{left:50%;top:-18px;margin-left:-7px}.kn .kait[data-sisi=bottom]{left:50%;bottom:-18px;margin-left:-7px}
.kn .kait[data-sisi=left]{top:50%;left:-18px;margin-top:-7px}.kn .kait[data-sisi=right]{top:50%;right:-18px;margin-top:-7px}
.kn.pilih.satu .ubahukur,.kn.pilih.satu .kait{display:block}
.kv.baca .kn{cursor:default}.kv.baca .ubahukur,.kv.baca .kait{display:none!important}
.kv-tandai{position:absolute;border:1.5px dashed var(--aksen);background:rgba(219,136,6,.1);pointer-events:none}
.kv-alat{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;gap:4px;background:var(--permukaan);border:1px solid var(--garis);border-radius:12px;padding:5px;box-shadow:var(--bayang);z-index:5}
.kv-alat .t{border-color:transparent;background:none}.kv-alat .t[aria-pressed="true"]{background:var(--utama);color:var(--utama-tinta)}
.kv-alat hr{border:0;border-top:1px solid var(--garis);margin:2px 4px;width:auto}
.kv-zoom{position:absolute;right:10px;bottom:10px;display:flex;gap:4px;align-items:center;background:var(--permukaan);border:1px solid var(--garis);border-radius:12px;padding:4px;box-shadow:var(--bayang);z-index:5}
.kv-zoom .t{border-color:transparent;background:none;min-height:36px}
.kv-pilihan{position:absolute;left:50%;top:10px;transform:translateX(-50%);display:flex;gap:4px;align-items:center;background:var(--permukaan);border:1px solid var(--garis);border-radius:12px;padding:5px 7px;box-shadow:var(--bayang);z-index:5;max-width:calc(100% - 140px);overflow-x:auto}
.kv-pilihan .warna{width:24px;height:24px;border-radius:50%;border:2px solid var(--garis-2);cursor:pointer;padding:0;flex:none}
.kv-status{font-size:.82rem;color:var(--tinta-2);white-space:nowrap}
@media (max-width:899px){
  .kv-alat{flex-direction:row;left:8px;right:8px;top:auto;bottom:8px;justify-content:space-between;overflow-x:auto}
  .kv-alat hr{display:none}
  .kv-zoom{bottom:64px;right:8px;flex-direction:column}
  .kv-pilihan{max-width:calc(100% - 16px)}
  .kn .ubahukur{width:26px;height:26px;right:-12px;bottom:-12px}
  .kn .kait{width:20px;height:20px}
  .kn .kait[data-sisi=top]{top:-26px;margin-left:-10px}.kn .kait[data-sisi=bottom]{bottom:-26px;margin-left:-10px}
  .kn .kait[data-sisi=left]{left:-26px;margin-top:-10px}.kn .kait[data-sisi=right]{right:-26px;margin-top:-10px}
}
.papan{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.papan a{display:block;text-decoration:none;color:inherit;background:var(--permukaan);border:1px solid var(--garis);border-radius:12px;padding:14px;min-height:108px}
.papan a:hover{border-color:var(--utama)}

.prosa{max-width:70ch}.prosa h2{margin:1.3rem 0 .4rem}.prosa li{margin:.25rem 0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.rel,.atas,.bawah,.t{display:none!important}.app{display:block}}