:root{
 --navy:#102c5c;--navy2:#174b86;--blue:#287fc2;--sky:#dff3ff;--cream:#fff9eb;--paper:#fffdf6;
 --ink:#17345e;--gold:#f5b942;--gold2:#ffe29a;--coral:#f28c73;--teal:#56c4c5;--lav:#c9b8f2;
 --line:#ead6ad;--shadow:0 12px 28px #0b2b5540;--kpk:#dff3ff;--fpb:#fff0d5
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;padding:12px 12px 92px;color:var(--ink);font:17px/1.62 "Trebuchet MS",system-ui,sans-serif;background:linear-gradient(#0b2451aa,#0b2451aa),url('../assets/space-background.png') center top/cover fixed;background-color:var(--navy);overflow-x:hidden}
button,select,input{font:inherit}button{cursor:pointer;border:2px solid #b9d8ef;border-radius:14px;padding:8px 15px;background:#f9fcff;color:var(--navy);font-weight:700;box-shadow:0 3px 0 #c4d8e8;transition:transform .16s,background .16s,box-shadow .16s}
button:hover:not(:disabled){background:var(--gold2);border-color:var(--gold);transform:translateY(-1px);box-shadow:0 4px 0 #d7a33e}button:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 0 #c4d8e8}button:disabled{opacity:.45;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.atas{display:flex;gap:9px;flex-wrap:wrap;align-items:center;max-width:980px;margin:0 auto 14px;padding:10px 12px;background:#102c5ce8;border:1px solid #6eadd8;border-radius:18px;box-shadow:0 5px 18px #061a3a70;color:white}
.atas button{background:#f7fbff;border-color:#b5d5ef}.atas button:hover{background:var(--gold2)}#bagian{margin-left:auto;font-weight:800;color:#fff5d5}
.buku{position:relative;perspective:2200px;max-width:980px;margin:0 auto 18px;padding:0 8px}
.halaman{display:none;position:relative;isolation:isolate;min-height:540px;overflow:hidden;background:linear-gradient(135deg,#fffdf7 0%,#fff8e8 100%);border:3px solid #f2d89e;border-radius:22px 30px 30px 22px;padding:clamp(20px,4vw,42px);box-shadow:var(--shadow),inset 9px 0 0 #e8c77e}
.halaman:before{content:"";position:absolute;z-index:-1;right:-60px;top:-65px;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 3%,#d9efff 4% 17%,#82c3e6 18% 19%,#2b73ad 20% 55%,#174578 56%);opacity:.18}
.halaman:after{content:"✦  ·  ✧";position:absolute;z-index:-1;right:24px;bottom:12px;color:#e7bd66;font-size:22px;letter-spacing:10px;opacity:.55}
.halaman.aktif{display:block;animation:pageIn .28s ease-out}
@keyframes pageIn{from{opacity:.65;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
h1,h2,h3{font-family:"Trebuchet MS",system-ui,sans-serif;color:var(--navy);line-height:1.2;margin:.15em 0 .55em}h2{font-size:clamp(1.55rem,3.3vw,2.15rem);padding-bottom:10px;border-bottom:3px solid #f1d18a}h2:before{content:"✦ ";color:#e9a52d}p{margin:.65em 0}
.cover{text-align:center;display:none;min-height:590px;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 50% 25%,#fff 0,#fff8e8 55%,#e5f4ff 100%)}.cover.aktif{display:flex}.cover img{width:min(420px,85%);max-height:340px;object-fit:contain;filter:drop-shadow(0 9px 7px #19365b2b)}.cover h1{font-size:clamp(2.6rem,7vw,4rem);margin:4px 0 0;color:#e99b18;text-shadow:2px 3px 0 #ffe6a0}.cover p{margin:0;font-weight:700;color:#315b83}.besar{font-size:1.15rem;margin-top:22px;background:linear-gradient(135deg,#287fc2,#174b86);color:white;border:2px solid #9ed4f3;padding:12px 28px;box-shadow:0 5px 0 #103762}
.catatan{background:#fff0c8;border:1px solid #efce83;border-left:6px solid var(--gold);border-radius:12px;padding:12px 16px;box-shadow:0 3px 0 #eed9a8}.langkah li,.tujuan li{margin:10px 0;padding-left:4px}.peta{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.peta button{text-align:left;min-height:54px;background:linear-gradient(135deg,#f5fbff,#e6f4ff);border-color:#b9d8ef}
.baris{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 18px}.baris span{min-width:44px;text-align:center;padding:5px 9px;border-radius:11px;background:#e5f4ff;border:2px solid #acd4ef;cursor:pointer;user-select:none;font-weight:700;color:#174b86;box-shadow:0 2px 0 #c1ddeb}.baris span.pilih{background:#fff0b9;border-color:#eab64c}.baris span.sama{background:#287fc2;border-color:#175c9a;color:#fff;font-weight:800}.baris[data-f] span.sama{background:#e9a53b;border-color:#c78319;color:#18345d}
.kartu{border-radius:16px;padding:15px 18px;margin:12px 0;border:2px solid #d6e6ef;background:#f8fcff;box-shadow:0 4px 0 #d8e4e9}.kpk{background:var(--kpk);border-color:#8cc9e8}.fpb{background:var(--fpb);border-color:#e8bd70}.dua{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;align-items:start}.bagi{border-collapse:collapse;margin:8px auto;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 3px 0 #d9e5ec}.bagi caption{font-weight:800;color:var(--navy);padding:6px}.bagi td{padding:4px 18px;text-align:center;border-bottom:1px solid #e5edf2}.bagi td:first-child{border-right:2px solid var(--navy);color:#d98b22;font-weight:800}
.soal{border-bottom:2px dashed #e6d3a8;padding:14px 0}.soal input[type=number]{font:inherit;width:6em;padding:5px 9px;border-radius:9px;border:2px solid #b9d8ef;background:white}.soal label{display:block;margin:6px 0}.umpan{margin-top:8px;font-weight:800}.ok{color:#16834d}.no{color:#b45309}.bar{height:22px;background:#dceaf3;border-radius:12px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#55c5b8,#2b8ec1)}.angka{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:12px 0}.angka div{background:#e8f5ff;border:1px solid #b8d9ec;border-radius:14px;padding:10px;text-align:center}.angka b{display:block;font-size:1.6rem;color:#174b86}
.bawah{position:fixed;z-index:8;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;gap:16px;padding:11px 14px;background:#102c5cf2;border-top:2px solid #78b7df;box-shadow:0 -5px 20px #061a3a55;color:white}.bawah button{background:#fff3d1;border-color:#e8bd70;color:#17345e}.bawah button:disabled{background:#d7e8f2;color:#54708a;border-color:#a9c7d9}#nomor{font-weight:800;color:#fff}
.wm{position:fixed;right:14px;bottom:76px;height:34px;opacity:.65;pointer-events:none;filter:drop-shadow(0 2px 3px #071c3b)}
#toc{position:fixed;inset:0;background:#071a39bb;display:flex;align-items:center;justify-content:center;z-index:12;padding:16px}#toc[hidden]{display:none}.tocbox{background:var(--cream);border:3px solid #e9c77e;border-radius:20px;padding:22px 28px;max-height:85vh;max-width:560px;width:100%;overflow:auto;box-shadow:var(--shadow)}.tocbox li{margin:6px 0}.tocbox a{color:#176aa8;cursor:pointer;text-decoration:underline;font-weight:700}
.ctl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}.ctl select{font:inherit;padding:5px 9px;border-radius:9px;border:2px solid #b9d8ef;background:white;color:var(--ink)}#papan{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;max-width:540px;margin:14px auto}.kt{position:relative;aspect-ratio:1;border-radius:10px;background:#e5f4ff;border:2px solid #a9d3ec;font-size:.78rem;padding:3px;overflow:hidden;line-height:1.15;color:#17345e}.kt small{display:block;font-weight:800}.kt.tg{background:#e1f5e9;border-color:#65b98a}.kt.ul{background:#fff0d9;border-color:#e7a64e}.pion{position:absolute;left:2px;right:2px;bottom:2px;display:flex;gap:2px;flex-wrap:wrap}.pion i{width:15px;height:15px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #0005}#gInfo{display:flex;gap:12px;flex-wrap:wrap;font-size:.95rem}#gInfo .giliran{font-weight:800;text-decoration:underline}#tanya{background:#fff;border:3px solid var(--blue)}#tanya .opsi{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.kertas{position:absolute;z-index:6;transform-style:preserve-3d;pointer-events:none;will-change:transform}.kertas.maju{transform-origin:left center;animation:maju .95s cubic-bezier(.5,0,.3,1) forwards}.kertas.mundur{transform-origin:right center;animation:mundur .95s cubic-bezier(.5,0,.3,1) forwards}.kertas.buka{animation-duration:1.4s}.depan,.belakang{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:-10px 8px 26px #0004}.depan .halaman{display:block;height:100%;margin:0;overflow:hidden}.depan:after{content:"";position:absolute;inset:0;border-radius:8px 24px 24px 8px;background:linear-gradient(90deg,#0000 35%,#0005);opacity:0;animation:gelap .95s ease-in forwards}.belakang{transform:rotateY(180deg);background:repeating-linear-gradient(#fff8e8 0 27px,#f0dfb8 27px 28px);border:3px solid #e6d3a8;border-radius:24px 8px 8px 24px}
@keyframes maju{0%{transform:rotateY(0)}40%{transform:rotateY(-55deg) skewY(-1.5deg)}100%{transform:rotateY(-172deg)}}@keyframes mundur{0%{transform:rotateY(0)}40%{transform:rotateY(55deg) skewY(1.5deg)}100%{transform:rotateY(172deg)}}@keyframes gelap{to{opacity:.8}}
@media(max-width:600px){body{font-size:16px;padding:7px 6px 84px;background-attachment:scroll}.atas{border-radius:13px;padding:8px}.atas button{padding:6px 10px;font-size:.9rem}#bagian{width:100%;margin:0}.buku{padding:0 2px}.halaman{min-height:490px;padding:20px 17px;border-radius:17px;box-shadow:inset 6px 0 0 #e8c77e,0 8px 18px #061a3a55}.cover{min-height:500px}.cover img{max-height:280px}.peta{grid-template-columns:1fr}.bawah{gap:8px;padding:9px 6px}.bawah button{padding:7px 10px;font-size:.9rem}#nomor{font-size:.85rem}.wm{display:none}.kt{font-size:.62rem}.pion i{width:11px;height:11px}#tanya .opsi{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Laboratorium eksplorasi KPK-FPB */
.eksplorasi{background:#f5fbff;border:2px solid #b9d8ef;border-radius:18px;padding:clamp(12px,2.5vw,22px);margin:14px 0;box-shadow:0 4px 0 #dcebf3}
.eksplorasi input[type=number]{width:5.3em;max-width:100%;padding:7px 9px;border:2px solid #acd4ef;border-radius:10px;background:white;color:var(--navy);font:inherit;font-weight:800}
.eksplorasi label{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;font-weight:700}
.pilihan-mode button.mode-aktif{background:var(--navy2);color:white;border-color:var(--navy)}
.angka-papan{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;margin:14px 0}
.angka-papan button{min-width:0;padding:8px 2px;aspect-ratio:1;border-radius:11px;background:#fff;border:2px solid #c9ddeb;color:var(--navy);box-shadow:0 2px 0 #d2e3ed;font-weight:800}
.angka-papan button.pilih-a{background:#287fc2;color:#fff;border-color:#175c9a}
.angka-papan button.pilih-b{background:#f5c34f;color:#17345e;border-color:#d49a21}
.angka-papan button.pilih-ab{background:linear-gradient(135deg,#287fc2 0 49%,#f5c34f 50% 100%);color:#fff;border:3px solid #267c65;text-shadow:0 1px 2px #17345e}
.angka-papan button.benar{outline:3px solid #3b9c70;outline-offset:1px}
.legenda{display:flex;gap:12px;flex-wrap:wrap;font-size:.9rem;font-weight:700}.legenda span{display:inline-flex;align-items:center;gap:6px}.legenda i{width:17px;height:17px;border-radius:5px;border:1px solid #789;display:inline-block}.leg-a{background:#287fc2}.leg-b{background:#f5c34f}.leg-ab{background:linear-gradient(135deg,#287fc2 0 49%,#f5c34f 50%)}
.sekunder{background:#fff;border-color:#c8d8e3}.faktor-kolom{grid-template-columns:repeat(2,minmax(0,1fr))}.faktor-kolom h3{margin:0}.hasil-faktor{min-height:52px;padding:10px;border-radius:10px;background:#fff9eb;border:1px dashed #e4c477;font-weight:800}.hasil-faktor.salah{background:#fff0ef;border-color:#e8a09a;color:#b42318}.hasil-faktor.benar{background:#e9f8ef;border-color:#7ac49a;color:#176b42}.daftar-faktor{margin-top:10px;min-height:42px;font-size:.92rem}.chip-faktor{display:inline-block;padding:4px 9px;margin:3px;border-radius:9px;background:#dff3ff;border:1px solid #9ccde8;font-weight:800}.chip-faktor.bersama{background:#e2f5e8;border-color:#72bd91;color:#176b42}
@media(max-width:600px){.angka-papan{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.angka-papan button{font-size:1rem}.faktor-kolom{grid-template-columns:1fr}.eksplorasi{padding:12px}.eksplorasi .ctl{align-items:flex-start}}