/* Membaca seperti buku */
.ctl{width:48px;height:48px;display:grid;place-items:center;padding:0;background:transparent;border:1px solid #6B4F38;border-radius:50%;color:var(--paper);cursor:pointer;transition:background .2s,border-color .2s,color .2s,opacity .2s}
.ctl:hover:not(:disabled){background:var(--brass);border-color:var(--brass);color:#1B110B}
.ctl:disabled{opacity:.35;cursor:default}
.ch-title{margin-top:8px;font-family:var(--cg);font-weight:500;font-style:italic;font-size:clamp(36px,5vw,50px);line-height:1.08;text-wrap:balance}
.bkr{--rs:20px;position:relative;padding:22px 0 6px;overflow:hidden}
.bkr.one{padding:10px 0 4px}
.bkr-stage{width:max-content;max-width:100%;margin:0 auto;padding:12px 16px;perspective:2400px;perspective-origin:50% 40%;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:grab}
.bkr-stage:active{cursor:grabbing}
.bkr.one .bkr-stage{padding:0 4px;width:100%;perspective:1500px}
.bkr-book{position:relative;width:calc(var(--pw)*2);height:var(--ph);margin:0 auto;transform-style:preserve-3d}
.bkr.one .bkr-book{width:var(--pw)}
.bkr-board{position:absolute;inset:-9px -11px;background:#4A2C18;border-radius:6px;box-shadow:inset 0 0 0 1px #6A4528,0 26px 48px -18px #000}
.bkr.one .bkr-board{inset:-5px -3px -5px -3px;border-radius:4px}
.bkr-side{position:absolute;top:0;bottom:0;width:var(--pw)}
.bkr-l{left:0}
.bkr-r{right:0}
.bkr:not(.one) .bkr-l::before{content:"";position:absolute;top:2px;bottom:2px;left:-4px;width:4px;background:repeating-linear-gradient(90deg,#B9A582 0 1px,#E4D5B8 1px 2px)}
.bkr-r::after{content:"";position:absolute;top:2px;bottom:2px;right:-4px;width:4px;background:repeating-linear-gradient(90deg,#E4D5B8 0 1px,#B9A582 1px 2px)}

/* Satu halaman kertas */
.pg{position:absolute;inset:0;background:var(--paper);color:var(--ink);overflow:hidden}
.pg.off{visibility:hidden}
.pg::after{content:"";position:absolute;top:0;bottom:0;width:13%;pointer-events:none}
.pg.right::after{left:0;background:linear-gradient(90deg,rgba(58,35,20,.3),rgba(58,35,20,0))}
.pg.left::after{right:0;background:linear-gradient(270deg,rgba(58,35,20,.3),rgba(58,35,20,0))}
.bkr.one .pg.right::after{width:6%;background:linear-gradient(90deg,rgba(58,35,20,.2),rgba(58,35,20,0))}
/* Bila isi ternyata sedikit lebih tinggi dari perkiraan, halaman bisa digulir, bukan terpotong. */
.pg-in{position:absolute;left:var(--px);right:var(--px);top:var(--pt);bottom:var(--pb);overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#B9A582 transparent}
.lf .pg-in{overflow:hidden}
.pg-in.bkr-scroll{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#B9A582 transparent;
  background:linear-gradient(var(--paper) 30%,rgba(239,226,200,0)) center top/100% 26px no-repeat local,
    linear-gradient(rgba(239,226,200,0),var(--paper) 70%) center bottom/100% 26px no-repeat local,
    radial-gradient(farthest-side at 50% 0,rgba(58,35,20,.24),rgba(58,35,20,0)) center top/100% 9px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%,rgba(58,35,20,.24),rgba(58,35,20,0)) center bottom/100% 9px no-repeat scroll}
.pg-in.bkr-scroll:focus-visible{outline-offset:6px}
.pg-no{position:absolute;left:0;right:0;bottom:calc(var(--pb)*.36);text-align:center;font-size:15px;line-height:1;color:#6B4F38;letter-spacing:.06em}
.bkr-flow{display:flow-root;font-size:var(--rs);line-height:1.62}
.bkr-flow>*{margin:0 0 .8em}
.bkr-flow>:last-child{margin-bottom:0}
.bkr-flow>h2{margin:.75em 0 .45em}
.bkr-flow>h2:first-child,.bkr-flow>.fig:first-child{margin-top:0}
.bkr-flow>.fig{margin:.45em 0 .9em}
.bkr-flow>hr{margin:1.1em auto}
.bkr-flow p{text-wrap:pretty;hyphens:auto;overflow-wrap:break-word}
.bkr-flow p.dc::first-letter{font-family:var(--cg);font-size:3.6em;line-height:.8;float:left;padding:.08em .1em 0 0;color:#6E3F1E}
.bkr-flow h2{font-family:var(--cg);font-weight:500;font-size:1.45em;line-height:1.15}
.bkr-flow hr{border:0;width:64px;height:1px;background:#8A6E50}
.bkr-flow mark{background:#E5C78F;color:var(--ink);padding:0 .12em;border-radius:2px}
.bkr-measure{position:absolute;left:-300vw;top:0;width:var(--pw);height:var(--ph);visibility:hidden;pointer-events:none;contain:strict}
/* Pengukuran harus langsung: aturan reduced-motion (transition-duration untuk semua properti) membuat font-size beralih pelan dan ukurannya keliru. */
.bkr-measure,.bkr-measure *{transition:none!important}

/* Halaman pembuka bab */
.bkr-opener{display:flex;align-items:center;justify-content:center}
.bkr-op{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 var(--px) 14%;text-align:center}
.bkr-op .ch-title{margin:0;font-size:clamp(28px,calc(var(--pw)*.085),46px)}
.bkr-op .paper-date{margin:0;font-size:16px}
.bkr-orn{display:block;color:#8A6E50;margin:6px 0 2px}
.bkr-op-meta{margin-top:10px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#8A6E50}

/* Kertas yang dibalik: dibangun sekali, digerakkan hanya dengan transform dan opacity */
.bkr-cast{position:absolute;inset:0;opacity:0;pointer-events:none;background:linear-gradient(90deg,rgba(25,12,5,0) 8%,rgba(25,12,5,.5) 50%,rgba(25,12,5,0) 92%);transform:translateZ(.5px)}
/* Kertas yang sudah disiapkan menunggu tak terlihat: sudah ditata letak, tetapi tanpa lapisan 3D
   dan tidak ikut diurutkan dengan kertas yang sedang dibalik. */
.lf{position:absolute;top:0;bottom:0;left:50%;width:var(--pw);pointer-events:none;visibility:hidden}
.lf.on{transform-style:preserve-3d;transform:translateZ(1px);visibility:visible}
.bkr.one .lf{left:0}
.lf-st{position:absolute;top:0;bottom:0;transform-origin:left center}
.lf-f,.lf-k{position:absolute;inset:0;overflow:hidden;background:var(--paper)}
/* Sifat 3D hanya saat kertas dipakai, supaya kertas yang menunggu tidak menjadi lapisan komposit. */
.lf.on .lf-st{transform-style:preserve-3d;will-change:transform}
.lf.on .lf-f,.lf.on .lf-k{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lf.on .lf-k{transform:rotateY(180deg)}
.lf-p{position:absolute;top:0;bottom:0;width:var(--pw)}
/* Bayangan di dalam tiap sisi, sebidang dengan kertas (tidak menambah bidang 3D yang harus diurutkan).
   a: gelap di sisi engsel, b: gelap di tepi bebas. Sisi belakang dicerminkan, jadi arahnya dibalik. */
.lf-a,.lf-b{position:absolute;inset:0;pointer-events:none;opacity:0}
.lf.on .lf-a,.lf.on .lf-b{will-change:opacity}
.lf-f>.lf-a{background:linear-gradient(90deg,rgba(42,21,9,.34),rgba(42,21,9,0))}
.lf-f>.lf-b{background:linear-gradient(90deg,rgba(42,21,9,0),rgba(42,21,9,.34))}
.lf-k>.lf-a{background:linear-gradient(270deg,rgba(42,21,9,.34),rgba(42,21,9,0))}
.lf-k>.lf-b{background:linear-gradient(270deg,rgba(42,21,9,0),rgba(42,21,9,.34))}

.bkr-bar{display:flex;align-items:center;justify-content:center;gap:18px;padding:12px 16px}
.bkr.one+.bkr-bar{padding:8px 16px}
.bkr-count{min-width:190px;text-align:center;font-size:17px;color:var(--soft)}
.bkr-after{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:4px 16px 36px}
.bkr-after[hidden]{display:none}

/* Mode gulir: penanda halaman */
.rd-pg{display:flow-root}
.rd-mark{display:flex;align-items:center;gap:16px;margin:2.2em 0 1.7em;scroll-margin-top:136px;font-family:var(--eb);font-size:12.5px;line-height:1;letter-spacing:.24em;text-transform:uppercase;color:#8A6E50}
.rd-mark::before,.rd-mark::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(185,165,130,0),#B9A582)}
.rd-mark::after{background:linear-gradient(270deg,rgba(185,165,130,0),#B9A582)}
.rd-where{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));z-index:25;transform:translateX(-50%);min-height:44px;padding:0 20px;display:inline-flex;align-items:center;gap:6px;background:rgba(31,18,10,.92);color:var(--soft);border:1px solid #5A402D;border-radius:999px;font-family:var(--eb);font-size:16px;cursor:pointer;box-shadow:0 10px 26px -12px #000;transition:background .2s,color .2s}
.rd-where b{font-weight:500;color:var(--brass)}
.rd-where:hover{background:#3A2416;color:var(--cream)}

/* Daftar isi */
.icon.rd-toc-btn{width:auto;padding:0 14px 0 12px;gap:8px;display:inline-flex;align-items:center;border-radius:22px;white-space:nowrap}
.rd-toc-tx{font-size:16px}
.rd-toc{padding:0;border:1px solid var(--line);background:var(--alt);color:var(--paper);width:min(430px,100vw);max-width:100vw;height:100%;max-height:100%;margin:0 0 0 auto;border-width:0 0 0 1px;border-radius:0;overscroll-behavior:contain}
.rd-toc::backdrop{background:rgba(15,8,4,.66)}
.rd-toc[open]{animation:rd-side .28s cubic-bezier(.2,.8,.2,1)}
@keyframes rd-side{from{transform:translateX(40px);opacity:0}}
@keyframes rd-sheet{from{transform:translateY(60px);opacity:0}}
.rd-toc-in{min-height:100%;display:flex;flex-direction:column;gap:6px;padding:8px 22px 28px}
.rd-toc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 0 10px;border-bottom:1px solid var(--line)}
.rd-toc-head h2{margin-top:6px;font-family:var(--cg);font-weight:500;font-size:28px;line-height:1.1;color:var(--cream);text-wrap:balance}
.rd-toc-sec{padding:18px 0 6px}
.rd-toc-sec h3{font-family:var(--eb);font-weight:400;font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.rd-toc-now{margin-top:8px;color:var(--soft);font-size:17px}
.rd-jump{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.rd-jump input[type=range]{width:100%;height:44px;margin:0;accent-color:var(--brass);cursor:pointer}
.rd-jump-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--soft)}
.rd-jump-row input{width:84px;min-height:44px;padding:0 10px;background:var(--ground);color:var(--cream);border:1px solid #6B4F38;border-radius:2px;font:inherit;font-size:18px}
.rd-jump-row .btn{min-height:44px;padding:0 20px;margin-left:auto}
.rd-chs{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column}
.rd-ch{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:baseline;gap:10px;min-height:48px;padding:12px 8px;border-bottom:1px solid var(--line);color:var(--paper);text-decoration:none;border-radius:2px;transition:background .2s}
.rd-ch:hover{background:#40291A}
.rd-ch[aria-current=page]{background:#3E2817;box-shadow:inset 3px 0 0 var(--brass)}
.rd-ch-n{color:var(--brass);font-size:16px}
.rd-ch-t{font-family:var(--cg);font-size:21px;line-height:1.2;color:var(--cream)}
.rd-ch-now{display:block;margin-top:2px;font-family:var(--eb);font-size:14px;color:var(--muted)}
@media (max-width:719px){
  .rd-toc-tx{display:none}
  .icon.rd-toc-btn{width:44px;padding:0;justify-content:center}
  .rd-toc{width:100vw;height:auto;max-height:84vh;margin:auto 0 0;border-width:1px 0 0;border-radius:14px 14px 0 0}
  .rd-toc[open]{animation-name:rd-sheet}
  .rd-toc-in{padding:4px 18px max(22px,env(safe-area-inset-bottom))}
  .rd-toc-head::before{content:"";position:absolute;left:50%;top:8px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:#5A402D}
}

/* Like dan komentar di akhir bab */
.rd-react{max-width:760px;margin:0 auto;padding:12px 16px 56px}
.rd-react[hidden]{display:none}
.rd-react-scroll{padding:44px 16px 0}