:root{--blue:#0d47a1;--blue2:#1565c0;--green:#00a86b;--soft:#eef6ff;--ink:#102033;--muted:#6b7a90;--card:#ffffff;--line:#dce7f5;--danger:#dc3545;--shadow:0 18px 45px rgba(13,71,161,.14)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:linear-gradient(135deg,#f4f9ff,#edfdf5 55%,#fff);color:var(--ink);min-height:100vh}a{text-decoration:none;color:inherit}.container{width:min(1180px,92%);margin:auto}.topbar{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.82);backdrop-filter:blur(16px);border-bottom:1px solid rgba(13,71,161,.08)}.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}.brand{display:flex;gap:12px;align-items:center;font-weight:900;letter-spacing:-.3px}.brand-mark{width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,var(--blue),var(--green));display:grid;place-items:center;color:#fff;box-shadow:0 10px 25px rgba(0,168,107,.25)}.brand small{display:block;color:var(--muted);font-size:12px;font-weight:600}.btn{border:0;border-radius:14px;padding:11px 16px;font-weight:800;cursor:pointer;display:inline-flex;gap:8px;align-items:center;justify-content:center;transition:.2s}.btn-primary{background:linear-gradient(135deg,var(--blue),var(--green));color:#fff;box-shadow:0 12px 24px rgba(13,71,161,.22)}.btn-soft{background:#eff7ff;color:var(--blue)}.btn-danger{background:var(--danger);color:#fff}.hero{padding:54px 0 26px;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;right:-80px;top:10px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(0,168,107,.18),transparent 65%)}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}.eyebrow{display:inline-flex;background:#e8f6ff;color:var(--blue);font-weight:900;border:1px solid #d2e8ff;padding:8px 13px;border-radius:999px}.hero h1{font-size:clamp(34px,5vw,62px);line-height:1.03;margin:18px 0 14px;letter-spacing:-1.6px}.hero p{font-size:18px;color:var(--muted);max-width:650px;line-height:1.65}.hero-card{background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow);border-radius:28px;padding:22px}.shelf-preview{height:320px;border-radius:24px;background:linear-gradient(180deg,#f9fcff,#e8f3ff);padding:24px;position:relative;overflow:hidden}.shelf-line{height:20px;border-radius:999px;background:linear-gradient(90deg,#7a4b2d,#c0864f);box-shadow:0 12px 20px rgba(83,48,22,.22);position:absolute;left:20px;right:20px}.s1{bottom:82px}.s2{bottom:180px}.book-mini{position:absolute;bottom:101px;width:44px;border-radius:7px 7px 4px 4px;box-shadow:0 10px 18px rgba(0,0,0,.18)}.book-mini:nth-child(1){height:110px;left:46px;background:linear-gradient(#0d47a1,#2196f3)}.book-mini:nth-child(2){height:92px;left:98px;background:linear-gradient(#00a86b,#64dd9a)}.book-mini:nth-child(3){height:126px;left:150px;background:linear-gradient(#ff9800,#ffd166)}.book-mini:nth-child(4){height:104px;left:202px;background:linear-gradient(#7b1fa2,#ba68c8)}.book-mini.top{bottom:199px}.filters{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:16px;display:grid;grid-template-columns:1.5fr .6fr .6fr auto;gap:12px;margin:12px 0 28px}.field{width:100%;border:1px solid var(--line);background:#f8fbff;border-radius:14px;padding:13px 14px;font-size:14px;outline:none}.field:focus{border-color:var(--blue2);box-shadow:0 0 0 4px rgba(21,101,192,.08)}.section-title{display:flex;align-items:end;justify-content:space-between;margin:22px 0 16px}.section-title h2{margin:0;font-size:28px;letter-spacing:-.6px}.muted{color:var(--muted)}.book-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding-bottom:48px}.book-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:14px;box-shadow:0 10px 28px rgba(13,71,161,.08);transition:.25s;overflow:hidden}.book-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(13,71,161,.14)}.cover-wrap{aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#dfeeff,#f4fff9);display:grid;place-items:center;position:relative}.cover-wrap img{width:100%;height:100%;object-fit:cover}.pdf-icon{font-size:46px}.badge{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.7);padding:6px 9px;border-radius:999px;font-size:11px;font-weight:900;color:var(--blue)}.book-card h3{font-size:16px;margin:14px 0 7px;line-height:1.25}.meta{font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}.book-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.viewer{height:calc(100vh - 74px);width:100%;border:0;background:#fff}.preview-head{padding:12px 0;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:9}.preview-flex{display:flex;align-items:center;justify-content:space-between;gap:10px}.admin-wrap{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:linear-gradient(180deg,var(--blue),#08316f);color:#fff;padding:22px;position:sticky;top:0;height:100vh}.sidebar a{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:14px;margin:6px 0;color:#eaf4ff}.sidebar a:hover,.sidebar a.active{background:rgba(255,255,255,.13)}.admin-main{padding:26px;background:#f6faff}.panel{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:20px;margin-bottom:18px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.stat{background:linear-gradient(135deg,#fff,#f1f8ff);border:1px solid var(--line);border-radius:20px;padding:18px}.stat b{font-size:30px}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}.table th{font-size:12px;color:var(--muted);text-transform:uppercase}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.login-page{min-height:100vh;display:grid;place-items:center;padding:20px}.login-box{width:min(420px,94%);background:#fff;border:1px solid var(--line);border-radius:28px;padding:28px;box-shadow:var(--shadow)}.login-box h1{margin:0 0 6px}.empty{background:#fff;border:1px dashed var(--line);padding:40px;text-align:center;border-radius:24px;color:var(--muted)}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}.book-grid{grid-template-columns:repeat(3,1fr)}.filters{grid-template-columns:1fr 1fr}.admin-wrap{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.stats{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}}
@media(max-width:680px){.nav{gap:10px}.brand small{display:none}.hero{padding-top:32px}.hero-card{display:none}.filters{grid-template-columns:1fr}.book-grid{grid-template-columns:repeat(2,1fr);gap:14px}.book-actions{grid-template-columns:1fr}.section-title{display:block}.table{font-size:13px}.admin-main{padding:14px}.sidebar{padding:14px}}
@media(max-width:420px){.book-grid{grid-template-columns:1fr}.hero h1{font-size:32px}}

/* ===== Upgrade rak buku 3D, slideshow cover, dan flipbook ===== */
.hero-showcase{position:relative;overflow:hidden;min-height:360px;background:linear-gradient(135deg,#ffffff,#eef8ff 55%,#e8fff5);}
.showcase-title{font-weight:900;color:#0b3b82;margin-bottom:14px;letter-spacing:.2px}
.cover-slider{display:flex;gap:24px;align-items:flex-end;overflow:hidden;scroll-behavior:smooth;padding:14px 10px 32px;min-height:260px;perspective:1200px}
.slide-cover{min-width:175px;text-decoration:none;color:#10233f;display:flex;flex-direction:column;align-items:center;gap:10px;transform-style:preserve-3d;transition:.35s}
.slide-cover:hover{transform:translateY(-8px) rotateY(-8deg)}
.slide-cover span{font-weight:800;font-size:13px;line-height:1.25;text-align:center;max-width:160px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.book-3d{position:relative;width:148px;height:212px;border-radius:8px 14px 14px 8px;overflow:hidden;background:linear-gradient(135deg,#dff4ff,#f3fff9);box-shadow:18px 22px 35px rgba(14,45,80,.20), inset -10px 0 20px rgba(0,0,0,.07);transform:rotateY(-14deg);border:1px solid rgba(13,71,161,.13)}
.book-3d img,.book-3d canvas{width:100%;height:100%;object-fit:cover;display:block;background:#fff}
.book-spine{position:absolute;left:0;top:0;bottom:0;width:18px;background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(255,255,255,.08));z-index:2}
.showcase-shelf{height:18px;border-radius:999px;background:linear-gradient(90deg,#8b572f,#d49a54,#8b572f);box-shadow:0 16px 28px rgba(97,56,22,.28);position:absolute;left:8%;right:8%;bottom:44px}
.empty-mini{padding:28px;color:#6b7b90;font-weight:700}
.shelf-row{position:relative;align-items:start}
.book-grid.shelf-row:after{content:"";height:18px;border-radius:999px;background:linear-gradient(90deg,#8b572f,#d49a54,#8b572f);box-shadow:0 16px 32px rgba(97,56,22,.18);grid-column:1/-1;margin-top:-12px}
.shelf-book{transform-style:preserve-3d;transition:.25s;box-shadow:0 20px 42px rgba(18,46,82,.08)}
.shelf-book:hover{transform:translateY(-7px)}
.cover-3d{position:relative;display:block;transform:perspective(900px) rotateY(-7deg);box-shadow:16px 20px 28px rgba(22,47,76,.16), inset -16px 0 26px rgba(0,0,0,.08);border-left:9px solid rgba(5,62,120,.28);transition:.28s;background:linear-gradient(145deg,#eff8ff,#f6fffb)}
.cover-3d:hover{transform:perspective(900px) rotateY(-13deg) translateY(-4px)}
.cover-3d:before{content:"";position:absolute;left:0;top:0;bottom:0;width:18px;background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(255,255,255,.04));z-index:2;pointer-events:none}
.cover-3d canvas{width:100%;height:100%;object-fit:cover;display:block;background:#fff}
.pdf-icon.fallback{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:44px;z-index:1}

.flip-page{background:radial-gradient(circle at top left,#e9fff6,#edf8ff 50%,#ffffff);min-height:100vh}
.preview-actions{display:flex;gap:8px;flex-wrap:wrap}.flip-wrap{max-width:1180px;margin:0 auto;padding:22px 18px 38px}.flip-toolbar{display:flex;justify-content:center;align-items:center;gap:18px;margin:14px 0 22px;flex-wrap:wrap}.page-info{text-align:center;color:#0f2745}.page-info small{display:block;color:#6b7b90;font-weight:500;margin-top:3px}.flipbook{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:0;perspective:1800px;min-height:620px}.page-sheet{background:#fff;border-radius:10px;box-shadow:0 24px 55px rgba(20,45,80,.22);padding:10px;min-height:580px;display:flex;align-items:center;justify-content:center;transition:.45s transform}.page-sheet.left{transform-origin:right center;border-right:1px solid #e5edf6;border-radius:14px 4px 4px 14px}.page-sheet.right{transform-origin:left center;border-radius:4px 14px 14px 4px}.page-sheet canvas{max-width:100%;height:auto;display:block;background:white}.book-shadow{position:absolute;left:12%;right:12%;bottom:-22px;height:34px;border-radius:50%;background:rgba(16,39,69,.18);filter:blur(18px);z-index:-1}.flipbook.turning .right{animation:pageTurn .55s ease}.flipbook.turning .left{animation:pageSettle .55s ease}@keyframes pageTurn{0%{transform:rotateY(0)}45%{transform:rotateY(-13deg) translateX(-8px)}100%{transform:rotateY(0)}}@keyframes pageSettle{0%{transform:rotateY(0)}45%{transform:rotateY(5deg)}100%{transform:rotateY(0)}}.mobile-note{text-align:center;color:#6b7b90;margin-top:18px;font-size:14px}
@media(max-width:760px){.hero-showcase{min-height:300px}.cover-slider{overflow-x:auto;min-height:220px}.slide-cover{min-width:135px}.book-3d{width:112px;height:162px}.showcase-shelf{bottom:38px}.book-grid.shelf-row:after{display:none}.flipbook{min-height:auto}.page-sheet.right{display:none}.page-sheet.left{border-radius:14px;min-height:0;padding:7px}.flip-toolbar{gap:8px}.flip-toolbar .btn{padding:12px 14px}.preview-flex{gap:10px}.mobile-note{display:block}}
@media(max-width:680px){.hero-card.hero-showcase{display:block}.hero-grid{gap:18px}.hero-showcase{padding:16px}.showcase-title{font-size:14px}.cover-slider{padding-bottom:26px}.showcase-shelf{left:6%;right:6%;height:14px}.cover-3d{transform:none}.cover-3d:hover{transform:translateY(-3px)}}

/* ===== Preview gaya FlipHTML5 / bookcase ===== */
.reader-page{margin:0;background:#4a4a4a;color:#fff;min-height:100vh;overflow:hidden;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif}.reader-topbar{height:54px;background:#fff;color:#222;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid rgba(0,0,0,.08);position:fixed;top:0;left:0;right:0;z-index:20}.reader-title{display:flex;flex-direction:column;line-height:1.25}.reader-title b{font-size:15px}.reader-title span{font-size:12px;color:#64748b}.reader-actions{display:flex;gap:10px}.reader-btn{border:0;border-radius:9px;padding:10px 14px;font-weight:900;font-size:13px;text-decoration:none}.reader-btn.light{background:#eef6ff;color:#0d47a1}.reader-btn.green{background:linear-gradient(135deg,#0d47a1,#00a86b);color:#fff}.reader-app{position:fixed;top:54px;bottom:58px;left:0;right:0;background:#4b4b4b;display:flex;align-items:center;justify-content:center;overflow:hidden}.book-stage{width:calc(100vw - 150px);height:100%;display:flex;align-items:center;justify-content:center;position:relative}.book-loader{position:absolute;color:#fff;background:rgba(0,0,0,.25);padding:16px 22px;border-radius:12px;font-weight:800}.book-open{display:flex;align-items:center;justify-content:center;position:relative;filter:drop-shadow(0 26px 35px rgba(0,0,0,.45));perspective:1800px}.paper{background:#fff;display:flex;align-items:center;justify-content:center;min-width:280px;max-height:calc(100vh - 150px);overflow:hidden}.paper canvas{display:block;background:#fff;max-height:calc(100vh - 150px);width:auto;height:auto}.paper-left{transform-origin:right center;border-radius:5px 0 0 5px}.paper-right{transform-origin:left center;border-radius:0 5px 5px 0}.paper-left canvas{box-shadow:inset -16px 0 25px rgba(0,0,0,.16)}.paper-right canvas{box-shadow:inset 16px 0 25px rgba(0,0,0,.16)}.book-gutter{position:absolute;top:0;bottom:0;left:50%;width:48px;transform:translateX(-50%);pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(255,255,255,.35),rgba(0,0,0,.22));mix-blend-mode:multiply}.reader-arrow{position:fixed;top:50%;transform:translateY(-50%);width:54px;height:90px;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:56px;line-height:1;border-radius:14px;cursor:pointer;z-index:12;transition:.2s}.reader-arrow:hover{background:rgba(255,255,255,.30)}.reader-arrow:disabled{opacity:.18;cursor:not-allowed}.reader-arrow.left{left:14px}.reader-arrow.right{right:14px}.reader-toolbar{height:58px;position:fixed;bottom:0;left:0;right:0;background:#4b4b4b;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;gap:18px;z-index:20;color:#fff}.tool-btn{background:transparent;color:#fff;border:0;font-size:28px;cursor:pointer;width:36px;height:36px;border-radius:8px}.tool-btn:hover{background:rgba(255,255,255,.12)}.page-counter{min-width:90px;text-align:center;font-weight:700}.reader-toolbar input[type=range]{width:min(45vw,560px);accent-color:#fff}.book-open.turning .paper-right{animation:flipRight .52s ease-in-out}.book-open.turning .paper-left{animation:flipLeft .52s ease-in-out}@keyframes flipRight{0%{transform:rotateY(0)}45%{transform:rotateY(-18deg) translateX(-8px);filter:brightness(.92)}100%{transform:rotateY(0)}}@keyframes flipLeft{0%{transform:rotateY(0)}45%{transform:rotateY(7deg)}100%{transform:rotateY(0)}}
@media(max-width:760px){.reader-page{overflow:auto}.reader-topbar{height:auto;min-height:58px;gap:10px;padding:10px 12px}.reader-title span{display:none}.reader-btn{padding:9px 11px}.reader-app{top:58px;bottom:58px;align-items:flex-start;overflow:auto;padding:18px 0}.book-stage{width:calc(100vw - 22px);height:auto;min-height:100%;align-items:flex-start}.book-open{width:100%}.paper{min-width:0;width:100%;border-radius:8px}.paper canvas{width:100%!important;height:auto!important;max-height:none}.book-gutter{display:none}.reader-arrow{width:42px;height:62px;font-size:42px;background:rgba(0,0,0,.28)}.reader-arrow.left{left:5px}.reader-arrow.right{right:5px}.reader-toolbar{gap:9px}.reader-toolbar input[type=range]{width:34vw}.page-counter{font-size:13px;min-width:78px}.tool-btn{font-size:24px}}

/* ===== FlipHTML5-like animated page curl, zoom 50%-200% ===== */
.book-open{transform-style:preserve-3d;transition:transform .25s ease}.paper{position:relative;backface-visibility:hidden}.paper:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.24;background:linear-gradient(90deg,rgba(255,255,255,.0),rgba(255,255,255,.38) 48%,rgba(0,0,0,.16));mix-blend-mode:multiply}.book-open.is-flipping-next .paper-right,.book-open.is-flipping-prev .paper-left{opacity:.15;transition:opacity .18s ease}.flip-page-anim{position:absolute;z-index:30;background:#fff;overflow:hidden;box-shadow:0 20px 45px rgba(0,0,0,.46);transform-style:preserve-3d;backface-visibility:hidden;pointer-events:none}.flip-page-anim img{width:100%;height:100%;object-fit:fill;display:block}.flip-page-anim:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.05),rgba(255,255,255,.65) 42%,rgba(0,0,0,.22) 76%,rgba(0,0,0,.38));opacity:.85;mix-blend-mode:multiply;animation:curlShade .72s ease-in-out both}.flip-page-anim:after{content:"";position:absolute;top:-12%;bottom:-12%;width:38%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95),rgba(255,255,255,0));filter:blur(5px);opacity:.85}.flip-page-anim.flip-next{transform-origin:left center;border-radius:0 8px 8px 0;animation:flipNextCurl .72s cubic-bezier(.17,.67,.23,1) both}.flip-page-anim.flip-next:after{left:-30%;animation:shineNext .72s ease both}.flip-page-anim.flip-prev{transform-origin:right center;border-radius:8px 0 0 8px;animation:flipPrevCurl .72s cubic-bezier(.17,.67,.23,1) both}.flip-page-anim.flip-prev:after{right:-30%;animation:shinePrev .72s ease both}.flip-page-anim.fade-out{opacity:0;transition:opacity .18s ease}.page-shine{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 45%,rgba(255,255,255,.55),transparent 38%);opacity:.65;mix-blend-mode:screen;animation:shinePulse .72s ease both}@keyframes flipNextCurl{0%{transform:rotateY(0deg) translateX(0) scaleX(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}22%{transform:rotateY(-34deg) translateX(-8%) scaleX(.98);clip-path:polygon(0 0,96% 4%,100% 96%,0 100%)}55%{transform:rotateY(-112deg) translateX(-48%) scaleX(.86);clip-path:polygon(0 0,89% 9%,96% 92%,0 100%);box-shadow:-18px 22px 55px rgba(0,0,0,.52)}100%{transform:rotateY(-178deg) translateX(-100%) scaleX(.72);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);box-shadow:-24px 18px 42px rgba(0,0,0,.32)}}@keyframes flipPrevCurl{0%{transform:rotateY(0deg) translateX(0) scaleX(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}22%{transform:rotateY(34deg) translateX(8%) scaleX(.98);clip-path:polygon(4% 4%,100% 0,100% 100%,0 96%)}55%{transform:rotateY(112deg) translateX(48%) scaleX(.86);clip-path:polygon(11% 9%,100% 0,100% 100%,4% 92%);box-shadow:18px 22px 55px rgba(0,0,0,.52)}100%{transform:rotateY(178deg) translateX(100%) scaleX(.72);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);box-shadow:24px 18px 42px rgba(0,0,0,.32)}}@keyframes curlShade{0%{opacity:.15;background-position:0 0}45%{opacity:.95}100%{opacity:.35;background-position:100% 0}}@keyframes shineNext{0%{left:-40%;opacity:0}35%{opacity:1}100%{left:86%;opacity:0}}@keyframes shinePrev{0%{right:-40%;opacity:0}35%{opacity:1}100%{right:86%;opacity:0}}@keyframes shinePulse{0%,100%{opacity:.2}45%{opacity:.82}}.reader-toolbar{background:linear-gradient(180deg,#515151,#424242)}.tool-btn{font-weight:900;transition:.18s}.tool-btn:hover{transform:translateY(-1px) scale(1.06);background:rgba(255,255,255,.16)}.reader-arrow{backdrop-filter:blur(8px);box-shadow:0 10px 25px rgba(0,0,0,.22)}.reader-arrow:hover{transform:translateY(-50%) scale(1.06)}
@media(max-width:760px){.flip-page-anim{display:none}.book-open.is-flipping-next .paper-left{animation:mobileFlip .38s ease}.book-open.is-flipping-prev .paper-left{animation:mobileFlipPrev .38s ease}@keyframes mobileFlip{0%{transform:translateX(0) rotateY(0);opacity:1}50%{transform:translateX(-12px) rotateY(-9deg);opacity:.55}100%{transform:translateX(0) rotateY(0);opacity:1}}@keyframes mobileFlipPrev{0%{transform:translateX(0) rotateY(0);opacity:1}50%{transform:translateX(12px) rotateY(9deg);opacity:.55}100%{transform:translateX(0) rotateY(0);opacity:1}}}

/* ===== FlipHTML5-like page opening animation v4 ===== */
.book-open.cover-mode{filter:drop-shadow(0 30px 38px rgba(0,0,0,.55));cursor:pointer;}
.book-open.cover-mode .paper-left{border-radius:5px;box-shadow:14px 0 0 rgba(0,0,0,.12),22px 8px 0 rgba(255,255,255,.08);}
.book-open.cover-mode .paper-left:before{content:"Click to view in fullscreen";position:absolute;left:50%;bottom:44px;transform:translateX(-50%);z-index:3;background:rgba(255,255,255,.68);color:#334155;padding:9px 18px;border-radius:999px;font-weight:700;font-size:12px;backdrop-filter:blur(7px)}
.book-open.cover-mode .paper-left:after{opacity:.1;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(0,0,0,.18));}
.book-open.is-animating-flip .paper{transition:opacity .18s ease,transform .18s ease}.book-open.is-animating-flip .paper{opacity:.64}.book-open.is-animating-flip.cover-mode .paper-left{opacity:.18}
.flip-page-anim{transform-style:preserve-3d;will-change:transform,clip-path,filter;overflow:visible!important;background:transparent!important;box-shadow:none!important;}
.flip-page-anim img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;background:#fff;box-shadow:0 24px 56px rgba(0,0,0,.48);backface-visibility:hidden;border-radius:inherit;}
.flip-page-anim .page-back{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#fff,#f1f5f9 52%,#dbeafe);transform:rotateY(180deg);backface-visibility:hidden;box-shadow:0 24px 56px rgba(0,0,0,.48)}
.flip-page-anim .curl-edge{position:absolute;top:-1%;bottom:-1%;width:34%;z-index:5;pointer-events:none;border-radius:50%;filter:blur(.2px);opacity:.95;background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.95) 38%,rgba(111,111,111,.28) 66%,rgba(0,0,0,.28));}
.flip-page-anim .page-shine{z-index:6;background:linear-gradient(102deg,transparent 0%,rgba(255,255,255,.85) 38%,rgba(255,255,255,.2) 48%,rgba(0,0,0,.20) 76%,transparent 100%);opacity:.8;mix-blend-mode:screen;}
.flip-page-anim.flip-cover-open{transform-origin:right center;border-radius:5px 10px 10px 5px;animation:coverOpenTurn .98s cubic-bezier(.12,.64,.12,1) both;}
.flip-page-anim.flip-cover-open .curl-edge{right:-5%;animation:curlEdgeOpen .98s ease both}.flip-page-anim.flip-cover-open .page-shine{animation:coverShineOpen .98s ease both}
.flip-page-anim.flip-cover-close{transform-origin:left center;border-radius:10px 5px 5px 10px;animation:coverCloseTurn .98s cubic-bezier(.12,.64,.12,1) both;}
.flip-page-anim.flip-cover-close .curl-edge{left:-5%;transform:scaleX(-1);animation:curlEdgeClose .98s ease both}.flip-page-anim.flip-cover-close .page-shine{animation:coverShineClose .98s ease both}
.flip-page-anim.flip-next{transform-origin:left center;border-radius:0 9px 9px 0;animation:sheetNextTurn .86s cubic-bezier(.1,.72,.16,1) both;}
.flip-page-anim.flip-next .curl-edge{right:-5%;animation:curlEdgeOpen .86s ease both}.flip-page-anim.flip-next .page-shine{animation:coverShineOpen .86s ease both}
.flip-page-anim.flip-prev{transform-origin:right center;border-radius:9px 0 0 9px;animation:sheetPrevTurn .86s cubic-bezier(.1,.72,.16,1) both;}
.flip-page-anim.flip-prev .curl-edge{left:-5%;transform:scaleX(-1);animation:curlEdgeClose .86s ease both}.flip-page-anim.flip-prev .page-shine{animation:coverShineClose .86s ease both}
@keyframes coverOpenTurn{0%{transform:perspective(1900px) rotateY(0) translateX(0) scaleX(1);filter:brightness(1)}18%{transform:perspective(1900px) rotateY(-24deg) translateX(-18px) scaleX(.98);filter:brightness(1.03)}42%{transform:perspective(1900px) rotateY(-72deg) translateX(-110px) scaleX(.92);filter:brightness(.95)}68%{transform:perspective(1900px) rotateY(-132deg) translateX(-270px) scaleX(.84);filter:brightness(.86)}100%{transform:perspective(1900px) rotateY(-179deg) translateX(-520px) scaleX(.72);filter:brightness(.78)}}
@keyframes coverCloseTurn{0%{transform:perspective(1900px) rotateY(0) translateX(0) scaleX(1);filter:brightness(1)}42%{transform:perspective(1900px) rotateY(72deg) translateX(110px) scaleX(.92);filter:brightness(.95)}68%{transform:perspective(1900px) rotateY(132deg) translateX(270px) scaleX(.84);filter:brightness(.86)}100%{transform:perspective(1900px) rotateY(179deg) translateX(520px) scaleX(.72);filter:brightness(.78)}}
@keyframes sheetNextTurn{0%{transform:perspective(1800px) rotateY(0) translateX(0) scaleX(1)}20%{transform:perspective(1800px) rotateY(-32deg) translateX(-20px) scaleX(.98)}55%{transform:perspective(1800px) rotateY(-112deg) translateX(-205px) scaleX(.88)}100%{transform:perspective(1800px) rotateY(-179deg) translateX(-420px) scaleX(.74)}}
@keyframes sheetPrevTurn{0%{transform:perspective(1800px) rotateY(0) translateX(0) scaleX(1)}20%{transform:perspective(1800px) rotateY(32deg) translateX(20px) scaleX(.98)}55%{transform:perspective(1800px) rotateY(112deg) translateX(205px) scaleX(.88)}100%{transform:perspective(1800px) rotateY(179deg) translateX(420px) scaleX(.74)}}
@keyframes curlEdgeOpen{0%{width:12%;opacity:.1;right:-1%;box-shadow:none}25%{width:24%;opacity:1;right:-4%;box-shadow:-24px 0 30px rgba(0,0,0,.22)}65%{width:38%;right:10%;opacity:1;box-shadow:-36px 0 44px rgba(0,0,0,.34)}100%{width:8%;right:86%;opacity:.25;box-shadow:none}}
@keyframes curlEdgeClose{0%{width:12%;opacity:.1;left:-1%;box-shadow:none}25%{width:24%;opacity:1;left:-4%;box-shadow:24px 0 30px rgba(0,0,0,.22)}65%{width:38%;left:10%;opacity:1;box-shadow:36px 0 44px rgba(0,0,0,.34)}100%{width:8%;left:86%;opacity:.25;box-shadow:none}}
@keyframes coverShineOpen{0%{opacity:0;transform:translateX(60%)}38%{opacity:.95;transform:translateX(0)}100%{opacity:.1;transform:translateX(-70%)}}
@keyframes coverShineClose{0%{opacity:0;transform:translateX(-60%)}38%{opacity:.95;transform:translateX(0)}100%{opacity:.1;transform:translateX(70%)}}
.reader-toolbar input[type=range]{max-width:700px}.reader-toolbar input[type=range]::-webkit-slider-thumb{cursor:pointer}.reader-toolbar input[type=range]{cursor:pointer}.reader-topbar{box-shadow:0 3px 10px rgba(0,0,0,.08)}
@media(max-width:760px){.book-open.cover-mode .paper-left:before{display:none}.flip-page-anim{display:none!important}.book-open.is-animating-flip .paper-left{animation:mobilePagePush .42s ease}.book-open.is-animating-flip .paper{opacity:1}@keyframes mobilePagePush{0%{transform:translateX(0) rotateY(0);opacity:1}50%{transform:translateX(-16px) rotateY(-10deg);opacity:.58}100%{transform:translateX(0) rotateY(0);opacity:1}}}

/* ===== FlipHTML5-like enhancements: clickable zones, identity, toolbar ===== */
.reader-app{background:radial-gradient(circle at center,#666 0,#474747 52%,#3c3c3c 100%)}
.flip-brand{position:fixed;top:72px;left:18px;z-index:15;color:#fff;display:flex;align-items:center;gap:10px;opacity:.92;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.flip-brand .brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#0d47a1,#00a86b);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.flip-brand b{display:block;font-size:15px}.flip-brand small{display:block;font-size:11px;color:rgba(255,255,255,.78)}
.hit-zone{position:absolute;top:0;bottom:0;width:28%;z-index:42;border:0;background:transparent;cursor:pointer;opacity:0}.hit-left{left:0}.hit-right{right:0}
.corner-hint{position:absolute;bottom:0;width:82px;height:82px;opacity:0;pointer-events:none;transition:.22s ease;z-index:7;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(216,225,235,.35) 50%,rgba(0,0,0,.18));filter:drop-shadow(0 12px 18px rgba(0,0,0,.28))}
.corner-right{right:0;clip-path:polygon(100% 0,100% 100%,0 100%);transform-origin:100% 100%}.corner-left{left:0;clip-path:polygon(0 0,100% 100%,0 100%);transform-origin:0 100%}
.book-open.hover-right .corner-right{opacity:1;transform:translate(-2px,-2px) rotate(-4deg)}.book-open.hover-left .corner-left{opacity:1;transform:translate(2px,-2px) rotate(4deg)}
.flip-page-anim{overflow:visible!important}.flip-page-anim img{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.diagonal-fold{position:absolute;right:-2px;bottom:-2px;width:44%;height:46%;background:linear-gradient(135deg,rgba(255,255,255,.97) 0%,rgba(238,243,249,.96) 48%,rgba(163,171,182,.78) 100%);clip-path:polygon(100% 0,100% 100%,0 100%);filter:drop-shadow(-12px -10px 18px rgba(0,0,0,.25));opacity:.0;animation:diagonalCurl .96s cubic-bezier(.2,.78,.2,1) both;z-index:4}.flip-prev .diagonal-fold{left:-2px;right:auto;clip-path:polygon(0 0,100% 100%,0 100%);filter:drop-shadow(12px -10px 18px rgba(0,0,0,.25))}
.flip-cover-open{transform-origin:left center;border-radius:0 8px 8px 0;animation:flipCoverOpenReal 1.05s cubic-bezier(.16,.78,.22,1) both}.flip-cover-close{transform-origin:right center;border-radius:8px 0 0 8px;animation:flipCoverCloseReal 1.05s cubic-bezier(.16,.78,.22,1) both}.flip-cover-open .diagonal-fold,.flip-next .diagonal-fold{opacity:1}.flip-cover-close .diagonal-fold,.flip-prev .diagonal-fold{opacity:1}
@keyframes diagonalCurl{0%{opacity:0;transform:translate(18px,18px) scale(.35) rotate(18deg)}22%{opacity:1;transform:translate(0,0) scale(.75) rotate(6deg)}58%{opacity:.95;transform:translate(-70px,-20px) scale(1.15) rotate(-8deg)}100%{opacity:0;transform:translate(-160px,-22px) scale(.9) rotate(-18deg)}}
@keyframes flipCoverOpenReal{0%{transform:rotateY(0) translateX(0) scaleX(1)}15%{transform:rotateY(-18deg) translateX(-4%) skewY(-1deg)}42%{transform:rotateY(-76deg) translateX(-30%) scaleX(.92) skewY(-4deg);filter:brightness(.95)}72%{transform:rotateY(-142deg) translateX(-76%) scaleX(.78) skewY(-6deg);filter:brightness(.82)}100%{transform:rotateY(-179deg) translateX(-105%) scaleX(.7);filter:brightness(.7)}}
@keyframes flipCoverCloseReal{0%{transform:rotateY(0) translateX(0) scaleX(1)}15%{transform:rotateY(18deg) translateX(4%) skewY(1deg)}42%{transform:rotateY(76deg) translateX(30%) scaleX(.92) skewY(4deg);filter:brightness(.95)}72%{transform:rotateY(142deg) translateX(76%) scaleX(.78) skewY(6deg);filter:brightness(.82)}100%{transform:rotateY(179deg) translateX(105%) scaleX(.7);filter:brightness(.7)}}
.fliphtml-toolbar{justify-content:space-between;padding:0 18px;box-sizing:border-box}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:14px;min-width:220px}.toolbar-right{justify-content:flex-end}.toolbar-center{display:flex;align-items:center;gap:18px;flex:1;justify-content:center}.toolbar-center input[type=range]{width:min(58vw,950px)}.tool-btn,.link-tool{display:grid;place-items:center;text-decoration:none;color:#fff}.tool-btn.muted{font-size:22px;opacity:.86}.tool-btn.active{background:rgba(0,168,107,.42)}.zoom-hidden{position:absolute;opacity:0;pointer-events:none;width:0}.page-counter{font-size:16px;font-weight:900;min-width:90px}.reader-toolbar input[type=range]{accent-color:#fff}
@media(max-width:760px){.flip-brand{display:none}.toolbar-left,.toolbar-right{min-width:auto;gap:6px}.tool-btn.muted:nth-child(n+3),.toolbar-right .muted{display:none}.toolbar-center{gap:8px}.toolbar-center input[type=range]{width:38vw}.hit-zone{width:42%}}

/* ==== FIX FLIPBOOK v5: tombol aktif, curl hover, identitas tidak mengganggu ==== */
.book-open.cover-mode .paper-left:before{display:none!important}
.flip-brand.compact{
  position:fixed!important;left:18px;top:72px;z-index:8!important;
  background:rgba(0,0,0,.18);backdrop-filter:blur(8px);
  padding:8px 12px;border-radius:16px;max-width:245px;
}
.flip-brand.compact .brand-mark{width:28px;height:28px}
.flip-brand.compact b{font-size:13px}.flip-brand.compact small{font-size:10px}
.book-stage{z-index:10}
.book-open{--mouse-y:50%; isolation:isolate}
.hit-zone{opacity:0!important;z-index:65!important}
.paper{transition:transform .22s ease, filter .22s ease}
.book-open.curl-preview-right .paper-right:before,
.book-open.curl-preview-right.cover-mode .paper-left:before{
  content:"";display:block!important;position:absolute;right:0;top:var(--mouse-y);width:92px;height:92px;z-index:18;pointer-events:none;
  transform:translateY(-50%);
  background:linear-gradient(135deg,rgba(255,255,255,.96) 0%,rgba(235,241,247,.96) 48%,rgba(80,80,80,.25) 68%,rgba(0,0,0,.05) 100%);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  filter:drop-shadow(-10px 12px 16px rgba(0,0,0,.32));
  animation:curlWiggleRight .65s ease-in-out infinite alternate;
}
.book-open.curl-preview-left .paper-left:before{
  content:"";display:block!important;position:absolute;left:0;top:var(--mouse-y);width:92px;height:92px;z-index:18;pointer-events:none;
  transform:translateY(-50%);
  background:linear-gradient(225deg,rgba(255,255,255,.96) 0%,rgba(235,241,247,.96) 48%,rgba(80,80,80,.25) 68%,rgba(0,0,0,.05) 100%);
  clip-path:polygon(0 0,100% 100%,0 100%);
  filter:drop-shadow(10px 12px 16px rgba(0,0,0,.32));
  animation:curlWiggleLeft .65s ease-in-out infinite alternate;
}
.book-open.curl-preview-right .paper-right,
.book-open.curl-preview-right.cover-mode .paper-left{transform:perspective(1200px) rotateY(-1.8deg)}
.book-open.curl-preview-left .paper-left{transform:perspective(1200px) rotateY(1.8deg)}
@keyframes curlWiggleRight{from{width:62px;height:62px;opacity:.78}to{width:100px;height:100px;opacity:1}}
@keyframes curlWiggleLeft{from{width:62px;height:62px;opacity:.78}to{width:100px;height:100px;opacity:1}}
.flip-page-anim.flip-next,.flip-page-anim.flip-cover-open{
  transform-origin:left center!important;
  animation:pageTurnNextV5 .78s cubic-bezier(.08,.68,.12,1) both!important;
}
.flip-page-anim.flip-prev{
  transform-origin:right center!important;
  animation:pageTurnPrevV5 .78s cubic-bezier(.08,.68,.12,1) both!important;
}
.flip-page-anim .curl-edge{display:block!important;position:absolute;top:-2%;bottom:-2%;width:42%;z-index:9;opacity:.96;background:linear-gradient(90deg,transparent,rgba(255,255,255,.98) 35%,rgba(120,120,120,.30) 70%,rgba(0,0,0,.36));filter:blur(.3px)}
.flip-page-anim.flip-next .curl-edge,.flip-page-anim.flip-cover-open .curl-edge{right:-6%;animation:curlEdgeMoveR .78s ease both}
.flip-page-anim.flip-prev .curl-edge{left:-6%;transform:scaleX(-1);animation:curlEdgeMoveL .78s ease both}
.flip-page-anim .page-shine{position:absolute;inset:0;z-index:10;background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),rgba(255,255,255,.15),rgba(0,0,0,.24),transparent);mix-blend-mode:screen;animation:shineSweepV5 .78s ease both}
.flip-page-anim .page-back{position:absolute;inset:0;background:linear-gradient(90deg,#fff,#eef4fb);transform:rotateY(180deg);backface-visibility:hidden;border-radius:inherit}
@keyframes pageTurnNextV5{
  0%{transform:perspective(1900px) rotateY(0deg) translateX(0) scaleX(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
  18%{transform:perspective(1900px) rotateY(-24deg) translateX(-2%) scaleX(.99);clip-path:polygon(0 0,97% 2%,100% 98%,0 100%)}
  45%{transform:perspective(1900px) rotateY(-82deg) translateX(-28%) scaleX(.90);clip-path:polygon(0 0,88% 8%,97% 93%,0 100%)}
  76%{transform:perspective(1900px) rotateY(-150deg) translateX(-76%) scaleX(.78);clip-path:polygon(0 0,94% 3%,100% 97%,0 100%)}
  100%{transform:perspective(1900px) rotateY(-180deg) translateX(-100%) scaleX(.72);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
}
@keyframes pageTurnPrevV5{
  0%{transform:perspective(1900px) rotateY(0deg) translateX(0) scaleX(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
  18%{transform:perspective(1900px) rotateY(24deg) translateX(2%) scaleX(.99);clip-path:polygon(3% 2%,100% 0,100% 100%,0 98%)}
  45%{transform:perspective(1900px) rotateY(82deg) translateX(28%) scaleX(.90);clip-path:polygon(12% 8%,100% 0,100% 100%,3% 93%)}
  76%{transform:perspective(1900px) rotateY(150deg) translateX(76%) scaleX(.78);clip-path:polygon(6% 3%,100% 0,100% 100%,0 97%)}
  100%{transform:perspective(1900px) rotateY(180deg) translateX(100%) scaleX(.72);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
}
@keyframes curlEdgeMoveR{0%{right:-4%;width:20%;opacity:.3}45%{right:22%;width:46%;opacity:1}100%{right:76%;width:18%;opacity:.15}}
@keyframes curlEdgeMoveL{0%{left:-4%;width:20%;opacity:.3}45%{left:22%;width:46%;opacity:1}100%{left:76%;width:18%;opacity:.15}}
@keyframes shineSweepV5{0%{opacity:.05;transform:translateX(-36%)}45%{opacity:.85}100%{opacity:.1;transform:translateX(36%)}}
.fliphtml-toolbar{height:66px!important;gap:12px!important;z-index:80!important}
.toolbar-left,.toolbar-right{min-width:300px!important}
.toolbar-left{gap:10px!important}
.toolbar-center{gap:12px!important}
.zoom-range{width:150px!important;max-width:150px!important;opacity:1!important;pointer-events:auto!important;accent-color:#fff}
#pageRange{pointer-events:auto!important}
.tool-btn,.link-tool{pointer-events:auto!important;cursor:pointer!important}
@media(max-width:760px){
  .flip-brand.compact{display:none!important}
  .toolbar-left,.toolbar-right{min-width:auto!important}
  .zoom-range{width:80px!important}
  .book-open.curl-preview-right .paper-left:before,.book-open.curl-preview-left .paper-left:before{display:none!important}
}
/* ===== PageFlip Pro Preview (closer to FlipHTML5) ===== */
.pageflip-reader{background:#4b4b4b;color:#fff;overflow:hidden;height:100vh;display:flex;flex-direction:column}.pf-topbar{height:64px;background:#fff;color:#1b2533;display:flex;align-items:center;justify-content:space-between;padding:0 24px;box-shadow:0 1px 0 rgba(0,0,0,.08);z-index:20}.pf-doc-title{display:flex;flex-direction:column;gap:3px}.pf-doc-title b{font-size:18px}.pf-doc-title span{color:#66758a}.pf-actions{display:flex;gap:12px}.pf-reader{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center, #626262 0%, #4b4b4b 58%, #414141 100%);overflow:hidden}.pf-stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:24px 120px 80px}.pf-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:800;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:18px 24px;border-radius:18px}.pf-book{filter:drop-shadow(0 28px 35px rgba(0,0,0,.42));transition:transform .25s ease}.pf-book .pf-page{background:#fff;border-radius:4px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}.pf-page-inner{position:relative;width:100%;height:100%;background:#fff;display:flex;align-items:center;justify-content:center}.pf-page canvas{width:100%;height:100%;object-fit:contain;display:block;background:#fff}.pf-page:not(.loaded) .pf-page-inner:before{content:'Memuat...';position:absolute;color:#8792a2;font-weight:700}.pf-page-num{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:10px;background:rgba(255,255,255,.85);color:#627083;border:1px solid #d8e1ea;border-radius:6px;padding:2px 6px}.pf-book .stf__parent{perspective:2200px!important}.pf-book .stf__item{transition:filter .15s ease}.pf-book .stf__block{border-radius:4px}.pf-book .stf__item.--hard{box-shadow:inset -14px 0 34px rgba(0,0,0,.08)}.pf-book.is-flipping{filter:drop-shadow(0 35px 45px rgba(0,0,0,.55))}.pf-nav{position:absolute;top:50%;transform:translateY(-50%);width:68px;height:96px;border:0;border-radius:17px;background:rgba(255,255,255,.28);color:#fff;font-size:78px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:9;box-shadow:0 14px 25px rgba(0,0,0,.18);transition:.2s}.pf-nav:hover{background:rgba(255,255,255,.42);transform:translateY(-50%) scale(1.04)}.pf-nav:disabled{opacity:.18;cursor:not-allowed}.pf-prev{left:22px}.pf-next{right:22px}.pf-identity{position:absolute;left:20px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:12px;max-width:330px;z-index:3;text-shadow:0 2px 6px rgba(0,0,0,.35)}.pf-identity .brand-mark{width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,#0863b3,#00a873);display:flex;align-items:center;justify-content:center;box-shadow:0 16px 30px rgba(0,0,0,.24)}.pf-identity b{display:block;font-size:20px}.pf-identity span{display:block;font-size:15px;line-height:1.45}.pf-toolbar{height:68px;background:linear-gradient(180deg,rgba(90,90,90,.92),rgba(70,70,70,.98));display:grid;grid-template-columns:260px 1fr 300px;gap:14px;align-items:center;padding:0 18px;color:#fff;z-index:30}.pf-tools-left,.pf-tools-right{display:flex;align-items:center;gap:12px}.pf-tools-right{justify-content:flex-end}.pf-tools-mid{display:flex;align-items:center;gap:16px}.pf-tool{min-width:38px;height:38px;border:0;background:transparent;color:#fff;font-size:25px;font-weight:900;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}.pf-tool:hover,.pf-tool.active{background:rgba(255,255,255,.18)}.pf-tools-mid strong{font-size:18px;min-width:118px;text-align:center}#pfPageSlider{width:100%;accent-color:#fff}.pf-thumbs{position:fixed;left:0;bottom:68px;width:300px;max-width:88vw;height:calc(100vh - 132px);background:rgba(28,30,34,.96);z-index:50;transform:translateX(-105%);transition:.25s ease;box-shadow:20px 0 35px rgba(0,0,0,.25);display:flex;flex-direction:column}.pf-thumbs.open{transform:translateX(0)}.pf-thumbs-head{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.12)}.pf-thumbs-head button{background:transparent;color:#fff;border:0;font-size:28px;cursor:pointer}.pf-thumb-list{overflow:auto;padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.pf-thumb{background:#fff;border:0;border-radius:10px;padding:6px;cursor:pointer;position:relative;box-shadow:0 10px 22px rgba(0,0,0,.28)}.pf-thumb canvas{width:100%;height:128px;object-fit:cover;background:#fff}.pf-thumb span{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.66);color:#fff;border-radius:999px;padding:2px 7px;font-size:11px}@media(max-width:900px){.pf-toolbar{grid-template-columns:120px 1fr 120px;height:72px;padding:0 8px}.pf-tools-left,.pf-tools-right{gap:4px}.pf-tool{min-width:32px}.pf-tools-mid strong{font-size:15px;min-width:76px}.pf-identity{display:none}.pf-stage{padding:12px 56px 72px}.pf-nav{width:46px;height:72px;font-size:56px}.pf-prev{left:7px}.pf-next{right:7px}.pf-topbar{padding:0 12px;height:62px}.pf-doc-title b{font-size:15px}.pf-doc-title span{font-size:13px}.pf-actions .reader-btn{padding:10px 12px;font-size:13px}}@media(max-width:560px){.pf-stage{padding:8px 46px 76px}.pf-toolbar{grid-template-columns:86px 1fr 86px}.pf-tool{font-size:20px;min-width:28px}.pf-tools-left .pf-tool:nth-child(2),.pf-tools-right .pf-tool:nth-child(3){display:none}.pf-tools-mid{gap:6px}.pf-tools-mid strong{min-width:52px;font-size:13px}.pf-nav{width:38px;height:62px;font-size:48px;border-radius:12px}.pf-doc-title{max-width:45vw}.pf-actions{gap:6px}}

/* Zoom fix: keep PageFlip alive and scale visually without rebuilding the canvases */
.pf-stage{overflow:hidden;}
.pf-stage.is-zoomed{cursor:zoom-out;}
.pf-stage.is-zoomed-out{cursor:zoom-in;}
.pf-book{will-change:transform;}

/* preview cleanup: identitas kiri dihilangkan agar tidak mengganggu buku */
.pf-identity{display:none!important}
.pf-stage{touch-action:pan-x pan-y;overflow:visible!important}
.pf-book{will-change:transform}
@media(max-width:900px){
  .pf-stage{padding:10px 46px 76px!important;overflow:visible!important}
  .pf-reader{align-items:center!important;justify-content:center!important}
  .pf-book,.pf-book .stf__parent{max-width:100%!important}
}
@media(max-width:560px){
  .pageflip-reader{height:100dvh!important;min-height:100dvh!important}
  .pf-reader{min-height:0!important}
  .pf-stage{height:calc(100dvh - 134px)!important;padding:8px 42px 76px!important}
  .pf-book{filter:drop-shadow(0 18px 22px rgba(0,0,0,.42))}
  .pf-topbar{height:62px!important}
  .pf-toolbar{height:72px!important}
}
/* final mobile + pan fix */
.pf-identity{display:none!important}
.pf-stage{touch-action:none;overflow:visible!important;cursor:default}
.pf-stage.is-zoomed{cursor:grab}
.pf-stage.is-panning{cursor:grabbing!important}
.pf-book{will-change:transform;transform-origin:center center!important}
@media(max-width:760px){
  .pageflip-reader{height:100dvh!important;overflow:hidden!important}
  .pf-topbar{height:68px!important;min-height:68px!important;padding:0 10px!important}
  .pf-toolbar{height:76px!important;min-height:76px!important;grid-template-columns:82px 1fr 82px!important;padding:0 8px!important}
  .pf-reader{height:calc(100dvh - 144px)!important;min-height:360px!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
  .pf-stage{height:100%!important;width:100%!important;padding:8px 50px 80px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}
  .pf-book{display:block!important;opacity:1!important;visibility:visible!important;filter:drop-shadow(0 16px 20px rgba(0,0,0,.4))!important}
  .pf-book .stf__parent{max-width:100%!important;max-height:100%!important}
  .pf-nav{z-index:18!important;width:38px!important;height:62px!important;font-size:48px!important}
  .pf-prev{left:8px!important}.pf-next{right:8px!important}
  .pf-doc-title{max-width:48vw!important}.pf-doc-title b{font-size:14px!important}.pf-doc-title span{font-size:12px!important}
}
@media(max-width:420px){
  .pf-stage{padding-left:44px!important;padding-right:44px!important}
  .pf-actions .reader-btn{font-size:12px!important;padding:9px 10px!important}
}

/* Mobile reliable preview: single-page canvas fallback */
@media(max-width:760px){
  .pf-book.mobile-single{display:flex!important;align-items:center!important;justify-content:center!important;margin:auto!important;opacity:1!important;visibility:visible!important;background:transparent!important;}
  .pf-book.mobile-single .pf-mobile-page{display:block!important;position:relative!important;background:#fff!important;border-radius:4px!important;box-shadow:0 18px 32px rgba(0,0,0,.42)!important;overflow:hidden!important;}
  .pf-book.mobile-single .pf-page-inner{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:#fff!important;}
  .pf-book.mobile-single canvas{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;background:#fff!important;}
  .pf-book.mobile-single .pf-page:not(.loaded) .pf-page-inner:before{content:'Memuat halaman...'!important;position:absolute!important;color:#667085!important;font-weight:700!important;z-index:2!important;}
}

/* FINAL: mobile blank fix - render as reliable single canvas */
@media(max-width:760px){
  .pageflip-reader{height:100dvh!important;overflow:hidden!important;}
  .pf-reader{height:calc(100dvh - 134px)!important;min-height:360px!important;overflow:hidden!important;}
  .pf-stage{position:relative!important;height:100%!important;width:100vw!important;padding:8px 44px 78px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important;}
  .pf-book.mobile-single{position:relative!important;z-index:5!important;display:flex!important;align-items:center!important;justify-content:center!important;opacity:1!important;visibility:visible!important;background:transparent!important;}
  .pf-mobile-page{position:relative!important;display:block!important;background:#fff!important;border-radius:4px!important;overflow:hidden!important;box-shadow:0 18px 32px rgba(0,0,0,.42)!important;}
  .pf-mobile-page canvas{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;background:#fff!important;}
  .pf-mobile-page:not(.loaded)::before{content:'Memuat halaman...'!important;position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#667085!important;font-weight:700!important;background:#fff!important;z-index:2!important;}
  .pf-mobile-page.loaded::before{display:none!important;}
}

/* HARD FIX MOBILE PREVIEW: pakai canvas langsung, bukan wrapper PageFlip */
.pf-mobile-viewer{display:none;position:relative;z-index:12;background:#fff;border-radius:4px;box-shadow:0 18px 34px rgba(0,0,0,.45);overflow:hidden;will-change:transform;}
.pf-mobile-viewer canvas{display:block;background:#fff;max-width:none!important;max-height:none!important;}
.pf-mobile-viewer.loading::before{content:'Memuat halaman...';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff;color:#667085;font-weight:700;z-index:3;}
.pf-mobile-viewer.loaded::before{display:none;}
@media(max-width:760px){
  #pfBook{display:none!important;}
  .pf-mobile-viewer{display:block!important;}
  .pf-reader{height:calc(100dvh - 144px)!important;min-height:360px!important;}
  .pf-stage{overflow:visible!important;display:flex!important;align-items:center!important;justify-content:center!important;}
}

/* Final mobile PageFlip fix: keep real flip animation on phone/tablet */
@media (max-width:760px){
  .pageflip-reader{height:100dvh!important;overflow:hidden!important;}
  .pf-topbar{height:68px!important;min-height:68px!important;padding:0 10px!important;}
  .pf-reader{height:calc(100dvh - 144px)!important;min-height:360px!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important;}
  .pf-stage{height:100%!important;width:100%!important;padding:8px 46px 78px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important;}
  .pf-book{display:block!important;opacity:1!important;visibility:visible!important;position:relative!important;z-index:5!important;filter:drop-shadow(0 18px 25px rgba(0,0,0,.45))!important;}
  .pf-book .stf__parent{max-width:100%!important;max-height:100%!important;}
  .pf-book .stf__block,.pf-book .stf__item{overflow:hidden!important;}
  .pf-book .pf-page{background:#fff!important;}
  .pf-book canvas{display:block!important;background:#fff!important;}
  .pf-nav{z-index:18!important;width:38px!important;height:62px!important;font-size:48px!important;border-radius:12px!important;}
  .pf-prev{left:8px!important}.pf-next{right:8px!important}
  .pf-toolbar{height:76px!important;min-height:76px!important;grid-template-columns:82px 1fr 82px!important;padding:0 8px!important;}
  .pf-doc-title{max-width:48vw!important}.pf-doc-title b{font-size:14px!important}.pf-doc-title span{font-size:12px!important}
  .pf-actions .reader-btn{font-size:12px!important;padding:9px 10px!important;}
}

/* === FINAL FIX MOBILE: stabil + efek flip, tidak blank === */
.pf-stage{touch-action:none;overflow:visible!important;}
.pf-stage.is-zoomed{cursor:grab}.pf-stage.is-panning{cursor:grabbing!important}.pf-book{will-change:transform;transform-origin:center center!important;}
.pf-mobile-book{background:transparent!important;perspective:1400px!important;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45))!important;}
.pf-mobile-page,.pf-mobile-flip{position:absolute;inset:0;background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.36);backface-visibility:hidden;transform-style:preserve-3d;}
.pf-mobile-page canvas,.pf-mobile-flip canvas{width:100%!important;height:100%!important;display:block!important;object-fit:contain!important;background:#fff!important;}
.pf-mobile-flip{display:none;z-index:8;transform-origin:left center;}
.pf-mobile-flip.turn-next{display:block;transform-origin:left center;animation:mobileFlipNext .72s cubic-bezier(.17,.67,.17,1) both;}
.pf-mobile-flip.turn-prev{display:block;transform-origin:right center;animation:mobileFlipPrev .72s cubic-bezier(.17,.67,.17,1) both;}
.pf-mobile-flip:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(255,255,255,.12),rgba(0,0,0,.32));opacity:.8;pointer-events:none;}
@keyframes mobileFlipNext{0%{transform:rotateY(-76deg) translateX(38%);filter:brightness(.86)}55%{transform:rotateY(-18deg) translateX(8%);filter:brightness(.96)}100%{transform:rotateY(0) translateX(0);filter:brightness(1)}}
@keyframes mobileFlipPrev{0%{transform:rotateY(76deg) translateX(-38%);filter:brightness(.86)}55%{transform:rotateY(18deg) translateX(-8%);filter:brightness(.96)}100%{transform:rotateY(0) translateX(0);filter:brightness(1)}}
@media(max-width:760px){
  .pageflip-reader{height:100dvh!important;overflow:hidden!important;}
  .pf-reader{min-height:0!important;overflow:hidden!important;}
  .pf-stage{height:100%!important;width:100%!important;padding:8px 48px 76px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;}
  .pf-nav{z-index:12!important}.pf-toolbar{z-index:30!important}.pf-topbar{z-index:31!important}
}
@media(max-width:380px){.pf-stage{padding-left:42px!important;padding-right:42px!important}.pf-nav{width:36px!important}}

/* === REAL MOBILE FIX 20260428: clean final overrides === */
@media (max-width: 760px){
  html,body.reader-page.pageflip-reader{height:100dvh!important;min-height:100dvh!important;overflow:hidden!important;}
  body.reader-page.pageflip-reader{display:flex!important;flex-direction:column!important;background:#4b4b4b!important;}
  .pf-topbar{height:64px!important;min-height:64px!important;flex:0 0 64px!important;padding:7px 9px!important;box-sizing:border-box!important;z-index:50!important;}
  .pf-doc-title{max-width:54vw!important;overflow:hidden!important;}
  .pf-doc-title b{font-size:12px!important;line-height:1.2!important;display:block!important;}
  .pf-doc-title span{font-size:11px!important;white-space:nowrap!important;}
  .pf-actions{gap:5px!important;}
  .pf-actions .reader-btn{font-size:11px!important;padding:9px 10px!important;border-radius:9px!important;}
  .pf-reader{flex:1 1 auto!important;min-height:0!important;height:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;position:relative!important;background:radial-gradient(circle at center,#616161 0%,#4a4a4a 60%,#3f3f3f 100%)!important;}
  .pf-stage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;padding:4px 43px 70px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important;touch-action:none!important;}
  .pf-book.pf-mobile-book{display:block!important;position:relative!important;opacity:1!important;visibility:visible!important;background:transparent!important;perspective:1500px!important;transform-style:preserve-3d!important;filter:drop-shadow(0 18px 26px rgba(0,0,0,.45))!important;}
  .pf-book.pf-mobile-book .pf-mobile-page,
  .pf-book.pf-mobile-book .pf-mobile-flip{position:absolute!important;inset:0!important;display:block;background:#fff!important;border-radius:4px!important;overflow:hidden!important;box-shadow:0 14px 28px rgba(0,0,0,.35)!important;backface-visibility:hidden!important;transform-style:preserve-3d!important;}
  .pf-book.pf-mobile-book .pf-mobile-page canvas,
  .pf-book.pf-mobile-book .pf-mobile-flip canvas{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;background:#fff!important;}
  .pf-book.pf-mobile-book .pf-mobile-flip{display:none!important;z-index:8!important;}
  .pf-book.pf-mobile-book .pf-mobile-flip.turn-next,
  .pf-book.pf-mobile-book .pf-mobile-flip.turn-prev{display:block!important;}
  .pf-mobile-flip.turn-next{transform-origin:left center!important;animation:realMobileFlipNext .72s cubic-bezier(.16,.68,.16,1) both!important;}
  .pf-mobile-flip.turn-prev{transform-origin:right center!important;animation:realMobileFlipPrev .72s cubic-bezier(.16,.68,.16,1) both!important;}
  .pf-mobile-flip.turn-next::after,.pf-mobile-flip.turn-prev::after{content:''!important;position:absolute!important;inset:0!important;background:linear-gradient(90deg,rgba(0,0,0,.30),rgba(255,255,255,.10),rgba(0,0,0,.22))!important;opacity:.75!important;pointer-events:none!important;}
  @keyframes realMobileFlipNext{0%{transform:rotateY(0deg) translateX(0);opacity:1}45%{transform:rotateY(-64deg) translateX(-10px) skewY(-1deg);opacity:.82}100%{transform:rotateY(-178deg) translateX(-18px);opacity:0}}
  @keyframes realMobileFlipPrev{0%{transform:rotateY(0deg) translateX(0);opacity:1}45%{transform:rotateY(64deg) translateX(10px) skewY(1deg);opacity:.82}100%{transform:rotateY(178deg) translateX(18px);opacity:0}}
  .pf-toolbar{height:58px!important;min-height:58px!important;flex:0 0 58px!important;grid-template-columns:72px 1fr 72px!important;padding:0 8px!important;gap:6px!important;z-index:60!important;}
  .pf-tool{min-width:26px!important;width:26px!important;height:34px!important;font-size:18px!important;}
  .pf-tools-left,.pf-tools-right{gap:3px!important;}
  .pf-tools-left .pf-tool:nth-child(2),.pf-tools-right .pf-tool:nth-child(3){display:none!important;}
  .pf-tools-mid{gap:6px!important;}
  .pf-tools-mid strong{min-width:48px!important;font-size:13px!important;}
  #pfPageSlider{min-width:0!important;width:100%!important;}
  .pf-nav{z-index:55!important;width:36px!important;height:58px!important;font-size:46px!important;border-radius:11px!important;background:rgba(255,255,255,.26)!important;}
  .pf-prev{left:7px!important}.pf-next{right:7px!important}
}

/* === ANTI BLANK MOBILE FIX 2026-04-28 === */
@media(max-width:820px){
  html,body{width:100%!important;min-height:100%!important;overflow:hidden!important;}
  .reader-page{display:flex!important;flex-direction:column!important;height:100vh!important;background:#3f3f3f!important;}
  .pf-topbar{flex:0 0 auto!important;height:64px!important;min-height:64px!important;padding:8px 10px!important;z-index:50!important;background:#fff!important;}
  .pf-reader{position:relative!important;flex:1 1 auto!important;min-height:0!important;height:auto!important;display:block!important;background:radial-gradient(circle at center,#5a5a5a,#3c3c3c 72%)!important;overflow:visible!important;}
  .pf-stage{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important;padding:8px 44px 76px!important;box-sizing:border-box!important;}
  #pfBook.pf-mobile-ab{display:block!important;position:relative!important;opacity:1!important;visibility:visible!important;background:transparent!important;z-index:10!important;}
  #pfBook.pf-mobile-ab canvas{display:block!important;background:#fff!important;}
  .pf-toolbar{flex:0 0 54px!important;height:54px!important;min-height:54px!important;z-index:60!important;padding:0 8px!important;background:rgba(55,55,55,.94)!important;grid-template-columns:75px 1fr 75px!important;}
  .pf-tools-mid strong{min-width:50px!important;font-size:13px!important;}
  .pf-tool{min-width:26px!important;font-size:20px!important;}
  .pf-nav{z-index:80!important;width:38px!important;height:58px!important;border-radius:12px!important;font-size:42px!important;background:rgba(255,255,255,.28)!important;color:#fff!important;}
  .pf-prev{left:8px!important}.pf-next{right:8px!important}
  .pf-doc-title{max-width:48vw!important}.pf-doc-title b{font-size:12px!important;line-height:1.15!important}.pf-doc-title span{font-size:11px!important}.reader-btn{font-size:11px!important;padding:9px 10px!important}
}

/* === FIX REAL MOBILE PREVIEW 2026-04-28-2 === */
#mobileBook.mobile-book-real{display:none;position:relative;background:transparent;transform-origin:center center;filter:drop-shadow(0 20px 28px rgba(0,0,0,.48));will-change:transform;perspective:1600px;transform-style:preserve-3d;z-index:20;}
.mobile-sheet-real,.mobile-flip-real{position:absolute;inset:0;background:#fff;border-radius:5px;overflow:hidden;box-shadow:0 16px 34px rgba(0,0,0,.36);backface-visibility:hidden;transform-style:preserve-3d;}
.mobile-sheet-real canvas,.mobile-flip-real canvas{width:100%!important;height:100%!important;display:block!important;object-fit:contain!important;background:#fff!important;}
.mobile-num-real{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);background:#eef7ff;color:#0b4c94;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:800;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.mobile-flip-real{display:none;z-index:10;}
.mobile-flip-real:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.08),rgba(0,0,0,.32));opacity:.75;pointer-events:none;}
.mobile-flip-real.flip-next-real{display:block!important;transform-origin:left center;animation:mobileRealNext .62s cubic-bezier(.2,.75,.2,1) both;}
.mobile-flip-real.flip-prev-real{display:block!important;transform-origin:right center;animation:mobileRealPrev .62s cubic-bezier(.2,.75,.2,1) both;}
@keyframes mobileRealNext{0%{transform:rotateY(0deg) translateX(0);opacity:1;filter:brightness(1)}45%{transform:rotateY(-72deg) translateX(-8px);opacity:.82;filter:brightness(.86)}100%{transform:rotateY(-178deg) translateX(-18px);opacity:0;filter:brightness(.72)}}
@keyframes mobileRealPrev{0%{transform:rotateY(0deg) translateX(0);opacity:1;filter:brightness(1)}45%{transform:rotateY(72deg) translateX(8px);opacity:.82;filter:brightness(.86)}100%{transform:rotateY(178deg) translateX(18px);opacity:0;filter:brightness(.72)}}
@media(max-width:820px){
  html,body{width:100%;height:100%;overflow:hidden!important;background:#3f3f3f!important;}
  body.reader-page.pageflip-reader{height:100vh!important;min-height:100vh!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;background:#3f3f3f!important;}
  .pf-topbar{height:64px!important;min-height:64px!important;flex:0 0 64px!important;padding:8px 10px!important;background:#fff!important;z-index:60!important;}
  .pf-doc-title{max-width:49vw!important}.pf-doc-title b{font-size:12px!important;line-height:1.15!important}.pf-doc-title span{font-size:11px!important}.reader-btn{font-size:11px!important;padding:9px 10px!important;border-radius:8px!important;}
  .pf-reader{position:relative!important;flex:1 1 auto!important;height:auto!important;min-height:0!important;display:block!important;overflow:hidden!important;background:radial-gradient(circle at center,#5b5b5b 0%,#404040 72%)!important;}
  .pf-stage{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important;padding:8px 44px 64px!important;box-sizing:border-box!important;touch-action:none!important;}
  #pfBook{display:none!important;}
  #mobileBook.mobile-book-real{display:block!important;opacity:1!important;visibility:visible!important;}
  .pf-toolbar{height:54px!important;min-height:54px!important;flex:0 0 54px!important;grid-template-columns:76px 1fr 76px!important;padding:0 8px!important;gap:6px!important;background:rgba(55,55,55,.96)!important;z-index:70!important;}
  .pf-tool{min-width:26px!important;width:26px!important;height:34px!important;font-size:18px!important;}
  .pf-tools-left,.pf-tools-right{gap:3px!important;}.pf-tools-left .pf-tool:nth-child(2),.pf-tools-right .pf-tool:nth-child(3){display:none!important;}
  .pf-tools-mid{gap:6px!important;}.pf-tools-mid strong{min-width:48px!important;font-size:13px!important;}#pfPageSlider{width:100%!important;min-width:0!important;}
  .pf-nav{z-index:80!important;width:38px!important;height:58px!important;border-radius:12px!important;font-size:42px!important;background:rgba(255,255,255,.28)!important;color:#fff!important;}
  .pf-prev{left:8px!important}.pf-next{right:8px!important}
}

/* ================================
   FIX KOLEKSI UNGGULAN (PREMIUM CLEAN)
   Garis coklat rak dihapus, tampilan tetap modern
   ================================ */
.showcase-shelf,
.shelf-line,
.book-grid.shelf-row:after {
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.hero-card {
    background: rgba(255,255,255,0.86) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 28px !important;
    box-shadow: 0 22px 55px rgba(13,71,161,0.13) !important;
    border: 1px solid rgba(255,255,255,0.72) !important;
}
.hero-showcase {
    background: linear-gradient(135deg, #ffffff, #f3f9ff 58%, #effff7) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
}
.cover-slider {
    padding: 22px 12px 12px !important;
    gap: 22px !important;
    align-items: flex-end !important;
}
.slide-cover {transition: transform .28s ease, filter .28s ease !important;}
.slide-cover:hover {
    transform: translateY(-8px) scale(1.025) rotateY(-6deg) !important;
    filter: drop-shadow(0 18px 24px rgba(13,71,161,.16));
}
.book-3d {
    transform: rotateY(-9deg) !important;
    transition: transform .32s ease, box-shadow .32s ease !important;
    box-shadow: 0 20px 38px rgba(12,37,68,.18), inset -10px 0 20px rgba(0,0,0,.06) !important;
}
.book-3d:hover {
    transform: rotateY(-12deg) translateY(-8px) scale(1.035) !important;
    box-shadow: 0 28px 48px rgba(12,37,68,.24), inset -12px 0 22px rgba(0,0,0,.07) !important;
}
.book-spine {background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(255,255,255,.08)) !important;}
.slide-cover span {
    font-size: 13px !important;
    color: #0f2745 !important;
    opacity: .92 !important;
    font-weight: 900 !important;
}
.showcase-title {color: #0d47a1 !important;font-weight: 900 !important;}
@media(max-width:760px){
    .showcase-shelf,
    .shelf-line,
    .book-grid.shelf-row:after {
        display: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .hero-card.hero-showcase {
        display: block !important;
        padding: 16px !important;
        border-radius: 22px !important;
    }
    .cover-slider {padding: 14px 6px 8px !important;gap: 16px !important;}
    .book-3d,.book-3d:hover {transform: none !important;}
    .slide-cover:hover {transform: translateY(-4px) !important;}
}

/* ===== ADMIN DASHBOARD & SETTINGS UPGRADE ===== */
.dashboard-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(135deg,#ffffff,#eef7ff 55%,#edfff7)!important;overflow:hidden;position:relative}
.dashboard-hero:after{content:"";position:absolute;right:-80px;top:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(0,168,107,.20),transparent 65%)}
.dashboard-hero h2{font-size:32px;margin:10px 0 6px;letter-spacing:-.8px}.dashboard-hero > *{position:relative;z-index:1}
.dashboard-cards{grid-template-columns:repeat(5,1fr)!important;margin-bottom:18px}.stat-card{position:relative;overflow:hidden;min-height:120px}.stat-card span{color:#627083;font-weight:800}.stat-card b{display:block;margin-top:8px;font-size:36px;letter-spacing:-1px}.stat-card:after{content:"";position:absolute;right:-34px;bottom:-34px;width:92px;height:92px;border-radius:50%;background:linear-gradient(135deg,rgba(13,71,161,.12),rgba(0,168,107,.16))}.admin-grid-2{display:grid;grid-template-columns:1.25fr .95fr;gap:18px}.mini-pill{display:inline-flex;align-items:center;justify-content:center;min-width:42px;padding:7px 10px;border-radius:999px;background:#eef7ff;color:#0d47a1;font-weight:900}.alert-ok{background:#eafff4!important;border-color:#c6f6dc!important;color:#075b3b;font-weight:800}.panel label{font-weight:700;display:block;margin:10px 0 6px}.sidebar a[href="settings.php"]{border:1px solid rgba(255,255,255,.10)}
@media(max-width:1100px){.dashboard-cards{grid-template-columns:repeat(2,1fr)!important}.admin-grid-2{grid-template-columns:1fr}}
@media(max-width:680px){.dashboard-hero{display:block}.dashboard-cards{grid-template-columns:1fr!important}.stat-card{min-height:auto}.table{display:block;overflow-x:auto;white-space:nowrap}}

/* ===== ADMIN UPGRADE PATCH: dashboard premium + drag sort ===== */
.premium-admin-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#ffffff,#f4f9ff 55%,#effff7)!important;min-height:170px;display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(13,71,161,.10)!important}
.premium-admin-hero:after{content:"";position:absolute;right:-80px;top:-90px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(0,168,107,.18),transparent 68%)}
.premium-admin-hero h2{font-size:30px;margin:18px 0 8px;letter-spacing:-.6px}.premium-admin-hero .muted{font-size:16px}
.dashboard-cards-pro{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0 18px}.metric-card{background:linear-gradient(145deg,#fff,#f5fbff);border:1px solid #dce9f7;border-radius:24px;padding:20px;display:flex;align-items:center;gap:16px;box-shadow:0 14px 34px rgba(13,71,161,.08);position:relative;overflow:hidden;min-height:118px}.metric-card:before{content:"";position:absolute;right:-40px;top:-45px;width:110px;height:110px;border-radius:50%;background:rgba(13,71,161,.06)}.metric-card.accent{background:linear-gradient(135deg,#0d47a1,#00a86b);color:#fff}.metric-card.accent small,.metric-card.accent span{color:rgba(255,255,255,.82)}.metric-icon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:#eef7ff;font-size:25px;box-shadow:inset 0 0 0 1px rgba(13,71,161,.08)}.metric-card.accent .metric-icon{background:rgba(255,255,255,.18)}.metric-card span{display:block;color:#66758a;font-weight:800}.metric-card b{display:block;font-size:34px;line-height:1;margin:6px 0;color:inherit}.metric-card small{color:#8492a6;font-weight:700}.dashboard-lists{align-items:start}.admin-card-soft{background:rgba(255,255,255,.92)!important;border:1px solid #dce9f7!important;box-shadow:0 18px 42px rgba(13,71,161,.08)!important}.table-head-premium{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}.table-head-premium h2{margin:8px 0 4px;font-size:25px}.mini-pill{display:inline-flex;align-items:center;justify-content:center;padding:7px 11px;border-radius:999px;background:#eef7ff;color:#0d47a1;font-weight:900}.mini-pill.strong{font-size:16px;min-width:42px}.books-sort-table tbody tr{transition:.18s ease;background:#fff}.books-sort-table tbody tr.dragging{opacity:.45;transform:scale(.99)}.books-sort-table tbody tr.drag-over{box-shadow:inset 0 2px 0 #00a86b}.drag-handle{cursor:grab;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:12px;background:#eef7ff;color:#0d47a1;font-weight:900;user-select:none}.drag-handle:active{cursor:grabbing}.sort-status{margin:10px 0;padding:12px 14px;border-radius:14px;font-weight:800}.sort-status.ok{background:#eafaf3;color:#087047}.sort-status.err{background:#fff0f0;color:#c8243a}.admin-main{background:linear-gradient(135deg,#f6faff,#eef6ff 55%,#f2fff8)!important}.table tr:hover td{background:#f8fbff}.btn{box-shadow:none}.btn-primary{box-shadow:0 10px 22px rgba(13,71,161,.18)!important}
/* preview more polished */
.pf-topbar{background:rgba(255,255,255,.96)!important;backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.08)!important}.pf-doc-title b{letter-spacing:-.2px}.pf-reader{background:radial-gradient(circle at center,#696969 0%,#4a4a4a 52%,#363636 100%)!important}.pf-toolbar{background:linear-gradient(180deg,rgba(78,78,78,.94),rgba(55,55,55,.98))!important;box-shadow:0 -10px 25px rgba(0,0,0,.16)}.pf-tool:hover{background:rgba(255,255,255,.18)!important;transform:translateY(-1px)}
@media(max-width:1100px){.dashboard-cards-pro{grid-template-columns:repeat(2,1fr)}.admin-grid-2{grid-template-columns:1fr!important}}
@media(max-width:680px){.dashboard-cards-pro{grid-template-columns:1fr}.metric-card{min-height:104px}.table-head-premium{display:block}.premium-admin-hero h2{font-size:24px}}

/* =====================================================
   PATCH: Featured hanya yang dicentang + tampilan premium
   ===================================================== */
.info-ticker{position:relative;z-index:8;background:linear-gradient(90deg,#0d47a1,#087d83,#00a86b);color:#fff;border-bottom:1px solid rgba(255,255,255,.22);box-shadow:0 12px 28px rgba(13,71,161,.14)}
.ticker-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;min-height:48px;overflow:hidden}.ticker-label{font-weight:950;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 12px;white-space:nowrap}.ticker-track{overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}.ticker-track span{display:inline-block;padding-left:100%;animation:tickerMove 28s linear infinite;font-weight:700;letter-spacing:.1px}.digital-clock{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);padding:6px 10px;border-radius:16px;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}.digital-clock span{font-size:12px;opacity:.9;font-weight:700}.digital-clock b{font-size:18px;letter-spacing:.8px;font-variant-numeric:tabular-nums}@keyframes tickerMove{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
.hero-showcase{position:relative;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(241,249,255,.88) 58%,rgba(235,255,247,.9))!important;box-shadow:0 24px 60px rgba(13,71,161,.14)!important;border:1px solid rgba(255,255,255,.82)!important;backdrop-filter:blur(14px)}.hero-showcase:before{content:"";position:absolute;inset:16px;border-radius:22px;background:radial-gradient(circle at 20% 20%,rgba(13,71,161,.08),transparent 34%),radial-gradient(circle at 80% 10%,rgba(0,168,107,.10),transparent 36%);pointer-events:none}.hero-showcase .showcase-title{position:relative;z-index:2}.cover-slider{position:relative;z-index:2}.empty-mini{position:relative;z-index:2;width:100%;min-height:180px;display:flex;align-items:center;justify-content:center;text-align:center;background:rgba(255,255,255,.55);border:1px dashed #bfd5ef;border-radius:20px;color:#607088;font-weight:900}.showcase-shelf,.shelf-line,.book-grid.shelf-row:after{display:none!important}.slide-cover{min-width:150px}.book-3d{border-radius:10px 16px 16px 10px!important;box-shadow:18px 24px 38px rgba(20,55,95,.18),inset -12px 0 22px rgba(0,0,0,.08)!important}.book-3d:hover{transform:translateY(-8px) rotateY(-12deg) scale(1.04)!important}.slide-cover span{font-size:13px!important;color:#0b2a4d!important;font-weight:950!important;line-height:1.25!important;text-shadow:none!important}
.data-buku-premium{background:linear-gradient(135deg,#fff,#f8fbff)!important}.table-responsive-premium{width:100%;overflow:auto}.books-sort-table tbody tr{transition:.18s ease}.books-sort-table tbody tr:hover{background:#f6fbff;transform:scale(1.002)}.featured-switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none}.featured-switch input{position:absolute;opacity:0;pointer-events:none}.featured-switch span{position:relative;width:46px;height:26px;border-radius:999px;background:#dce7f5;box-shadow:inset 0 0 0 1px rgba(13,71,161,.08);transition:.2s}.featured-switch span:before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 4px 9px rgba(0,0,0,.18);transition:.2s}.featured-switch input:checked + span{background:linear-gradient(135deg,#0d47a1,#00a86b)}.featured-switch input:checked + span:before{transform:translateX(20px)}.featured-switch em{font-style:normal;font-size:12px;font-weight:900;color:#64748b}.featured-switch input:checked ~ em{color:#00885e}.featured-switch.saved span{box-shadow:0 0 0 4px rgba(0,168,107,.13)}.mini-pill{display:inline-flex;align-items:center;background:#eef7ff;color:#0d47a1;border-radius:999px;padding:8px 12px;font-weight:950;font-size:13px}.drag-handle{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#eef7ff;color:#0d47a1;font-weight:950;cursor:grab}.drag-handle:active{cursor:grabbing}.sort-status{margin:12px 0;padding:10px 14px;border-radius:14px;background:#e8fff5;color:#007a55;font-weight:900;border:1px solid #bdebdc}
@media(max-width:760px){.ticker-inner{grid-template-columns:1fr;gap:6px;padding:8px 0}.ticker-label{width:max-content}.digital-clock{width:max-content}.ticker-track span{animation-duration:20s}.slide-cover{min-width:125px}.book-3d{width:112px!important;height:162px!important}.books-sort-table{min-width:820px}}

/* =====================================================
   FINAL RUNNING TEXT + DIGITAL CLOCK + LIGHT/DARK MODE
   ===================================================== */

/* Running text benar-benar bergerak, tidak turun ke baris baru */
.info-ticker{
  height:54px !important;
  display:flex !important;
  align-items:center !important;
  overflow:hidden !important;
  background:linear-gradient(90deg,#0d47a1 0%,#087d83 48%,#00a86b 100%) !important;
  color:#fff !important;
  box-shadow:0 14px 30px rgba(13,71,161,.18) !important;
}
.ticker-inner{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  min-height:54px !important;
  overflow:hidden !important;
}
.ticker-label{
  flex:0 0 auto !important;
  font-weight:950 !important;
  background:rgba(255,255,255,.18) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  border-radius:999px !important;
  padding:7px 12px !important;
  white-space:nowrap !important;
}
.ticker-track{
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  position:relative !important;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent) !important;
}
.ticker-track span{
  display:inline-block !important;
  white-space:nowrap !important;
  will-change:transform !important;
  padding-left:100% !important;
  animation:tickerMoveFinal 34s linear infinite !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;
}
.ticker-track:hover span{animation-play-state:paused !important}
@keyframes tickerMoveFinal{
  0%{transform:translateX(0)}
  100%{transform:translateX(-100%)}
}
.digital-clock{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  border-radius:18px !important;
  padding:7px 12px !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06) !important;
  white-space:nowrap !important;
}
.digital-clock span{font-size:12px !important;font-weight:800 !important;opacity:.92 !important}
.digital-clock b{font-size:19px !important;letter-spacing:1px !important;font-variant-numeric:tabular-nums !important}

/* Mode terang */
body.theme-light{
  background:linear-gradient(135deg,#f4f9ff,#edfdf5 55%,#fff) !important;
  color:#102033 !important;
}
body.theme-light .topbar{
  background:rgba(255,255,255,.86) !important;
}
body.theme-light .hero,
body.theme-light .admin-main{
  background:transparent !important;
}

/* Mode gelap */
body.theme-dark{
  background:linear-gradient(135deg,#071426,#0b1e36 55%,#072016) !important;
  color:#eaf4ff !important;
}
body.theme-dark .topbar,
body.theme-dark .preview-head{
  background:rgba(7,20,38,.88) !important;
  border-color:rgba(255,255,255,.10) !important;
}
body.theme-dark .brand,
body.theme-dark .hero h1,
body.theme-dark .hero h2,
body.theme-dark .section-title h2,
body.theme-dark .book-card h3{
  color:#eef7ff !important;
}
body.theme-dark .brand small,
body.theme-dark .muted,
body.theme-dark .hero p,
body.theme-dark .section-title .muted{
  color:#a9bad1 !important;
}
body.theme-dark .hero-card,
body.theme-dark .filters,
body.theme-dark .book-card,
body.theme-dark .panel,
body.theme-dark .admin-card-soft{
  background:rgba(11,30,54,.86) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 22px 50px rgba(0,0,0,.30) !important;
}
body.theme-dark .field,
body.theme-dark select,
body.theme-dark textarea{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.14) !important;
  color:#eaf4ff !important;
}
body.theme-dark .field::placeholder{color:#91a4bd !important}
body.theme-dark .btn-soft,
body.theme-dark .mini-pill{
  background:rgba(255,255,255,.10) !important;
  color:#dbeafe !important;
}
body.theme-dark .cover-wrap,
body.theme-dark .book-3d{
  background:linear-gradient(135deg,#112d4c,#0b3b33) !important;
}
body.theme-dark .table th{color:#a9bad1 !important}
body.theme-dark .table td{color:#eaf4ff !important;border-color:rgba(255,255,255,.10) !important}
body.theme-dark .table tr:hover td{background:rgba(255,255,255,.05) !important}

/* Pengaturan page lebih rapi */
.settings-hint{
  display:block;
  margin:6px 0 14px;
  color:#6b7a90;
  font-size:13px;
}
.theme-preview-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0 18px;
}
.theme-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  background:#eef7ff;
  color:#0d47a1;
  font-weight:900;
  font-size:13px;
}

/* Mobile ticker tetap rapi */
@media(max-width:760px){
  .info-ticker{height:76px !important}
  .ticker-inner{
    display:grid !important;
    grid-template-columns:auto 1fr !important;
    grid-template-areas:
      "label clock"
      "track track" !important;
    gap:6px 10px !important;
    min-height:76px !important;
    padding:7px 0 !important;
  }
  .ticker-label{grid-area:label !important;font-size:12px !important;padding:6px 10px !important}
  .digital-clock{grid-area:clock !important;justify-content:flex-end !important;padding:6px 8px !important}
  .digital-clock span{display:none !important}
  .digital-clock b{font-size:16px !important}
  .ticker-track{grid-area:track !important;width:100% !important}
  .ticker-track span{animation-duration:24s !important}
}


/* ===== FINISHING HEADER PUBLIK: LOGO ADMIN + MODE GELAP/TERANG ===== */
.public-actions{display:flex!important;align-items:center!important;gap:10px!important}
.admin-icon-btn{width:46px!important;height:46px!important;border-radius:16px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;color:#fff!important;background:linear-gradient(135deg,#0d47a1,#00a86b)!important;box-shadow:0 14px 28px rgba(13,71,161,.22),0 0 0 1px rgba(255,255,255,.45) inset!important;transition:transform .22s ease,box-shadow .22s ease,filter .22s ease!important}
.admin-icon-btn:hover{transform:translateY(-2px) scale(1.03)!important;filter:saturate(1.1)!important;box-shadow:0 18px 36px rgba(13,71,161,.28),0 0 0 1px rgba(255,255,255,.55) inset!important}
.admin-icon-btn svg{width:23px!important;height:23px!important;display:block!important}
.theme-picker{height:46px!important;display:flex!important;align-items:center!important;gap:7px!important;padding:0 10px 0 12px!important;border-radius:16px!important;background:rgba(239,247,255,.96)!important;border:1px solid rgba(13,71,161,.10)!important;box-shadow:0 10px 24px rgba(13,71,161,.08)!important}
.theme-picker-icon{font-size:18px!important;line-height:1!important}
.theme-picker select{appearance:none!important;-webkit-appearance:none!important;border:0!important;outline:0!important;background:transparent!important;color:#0d47a1!important;font-weight:900!important;font-size:14px!important;cursor:pointer!important;padding:0 18px 0 0!important;background-image:linear-gradient(45deg,transparent 50%,#0d47a1 50%),linear-gradient(135deg,#0d47a1 50%,transparent 50%)!important;background-position:calc(100% - 8px) 55%,calc(100% - 3px) 55%!important;background-size:5px 5px,5px 5px!important;background-repeat:no-repeat!important}
body.theme-dark .theme-picker{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.14)!important;box-shadow:0 16px 30px rgba(0,0,0,.24)!important}
body.theme-dark .theme-picker select{color:#eaf4ff!important;background-image:linear-gradient(45deg,transparent 50%,#eaf4ff 50%),linear-gradient(135deg,#eaf4ff 50%,transparent 50%)!important}
body.theme-dark .theme-picker option{color:#102033!important;background:#fff!important}
body.theme-dark .admin-icon-btn{box-shadow:0 18px 36px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.14) inset!important}
@media(max-width:680px){.public-actions{gap:7px!important}.theme-picker{height:42px!important;padding:0 8px!important}.theme-picker select{font-size:0!important;width:26px!important;padding-right:14px!important}.theme-picker-icon{font-size:17px!important}.admin-icon-btn{width:42px!important;height:42px!important;border-radius:14px!important}.admin-icon-btn svg{width:21px!important;height:21px!important}}


/* PATCH: icon-only theme toggle + preview mouse wheel zoom/drag cursor */
.theme-cycle-btn{
  width:46px!important;height:46px!important;border:0!important;border-radius:16px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  font-size:20px!important;cursor:pointer!important;background:rgba(239,247,255,.96)!important;
  box-shadow:0 10px 24px rgba(13,71,161,.10)!important;border:1px solid rgba(13,71,161,.10)!important;
  transition:transform .2s ease, box-shadow .2s ease!important;
}
.theme-cycle-btn:hover{transform:translateY(-2px) scale(1.03)!important;box-shadow:0 16px 32px rgba(13,71,161,.18)!important}
body.theme-dark .theme-cycle-btn{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.16)!important;box-shadow:0 16px 30px rgba(0,0,0,.25)!important}
.pf-stage.is-zoomed{cursor:grab!important}.pf-stage.is-panning{cursor:grabbing!important}.pf-book{transform-origin:center center!important;will-change:transform!important}
@media(max-width:680px){.theme-cycle-btn{width:42px!important;height:42px!important;border-radius:14px!important;font-size:18px!important}}

/* FINAL: tombol fullscreen preview dihilangkan agar PageFlip tidak blank */
#pfFullscreen{display:none!important;}
.pf-tools-right{gap:12px;}

/* ===== External link smart preview ===== */
.external-reader-page{min-height:100vh;background:linear-gradient(135deg,#f5f9ff,#eefdf5);color:#102033}
.external-head{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.92);backdrop-filter:blur(14px)}
.external-embed-wrap{height:calc(100vh - 72px);padding:18px;background:#f3f7fb}
.external-embed{width:100%;height:100%;border:0;border-radius:22px;background:#fff;box-shadow:0 20px 50px rgba(13,71,161,.16)}
.external-link-wrap{min-height:calc(100vh - 72px);display:grid;place-items:center;padding:32px 18px;background:radial-gradient(circle at 20% 15%,rgba(0,168,107,.14),transparent 28%),radial-gradient(circle at 80% 5%,rgba(13,71,161,.16),transparent 30%),linear-gradient(135deg,#f5f9ff,#effff6)}
.external-link-card{width:min(680px,94vw);background:rgba(255,255,255,.90);border:1px solid rgba(210,229,246,.95);border-radius:30px;padding:34px;text-align:center;box-shadow:0 28px 70px rgba(13,71,161,.18);position:relative;overflow:hidden}
.external-link-card:before{content:"";position:absolute;inset:-80px auto auto -80px;width:190px;height:190px;border-radius:50%;background:rgba(0,168,107,.12)}
.external-icon{width:76px;height:76px;margin:0 auto 14px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(135deg,#0d47a1,#00a86b);font-size:36px;box-shadow:0 18px 35px rgba(0,168,107,.25)}
.external-badge{display:inline-flex;padding:8px 13px;border-radius:999px;background:#eaf6ff;color:#0d47a1;font-weight:900;font-size:13px;border:1px solid #d4eaff}
.external-link-card h1{font-size:clamp(24px,4vw,36px);line-height:1.15;margin:18px 0 12px;color:#0f2745}
.external-link-card p{color:#617089;line-height:1.65;font-size:16px;margin:0 auto 18px;max-width:560px}
.external-url{display:inline-flex;max-width:100%;padding:10px 14px;border-radius:14px;background:#f5f9ff;border:1px solid #dce7f5;color:#0d47a1;font-weight:800;word-break:break-all;margin-bottom:20px}
.external-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
body.theme-dark .external-reader-page,body.theme-dark .external-link-wrap{background:#061426!important;color:#eaf2ff!important}
body.theme-dark .external-link-card{background:rgba(15,23,42,.92)!important;border-color:rgba(255,255,255,.12)!important;box-shadow:0 28px 70px rgba(0,0,0,.38)!important}
body.theme-dark .external-link-card h1{color:#f8fbff!important}body.theme-dark .external-link-card p{color:#d8e6f6!important}body.theme-dark .external-url{background:rgba(255,255,255,.08)!important;color:#eaf4ff!important;border-color:rgba(255,255,255,.14)!important}
@media(max-width:680px){.external-link-card{padding:24px 18px;border-radius:24px}.external-embed-wrap{padding:8px;height:calc(100vh - 74px)}.external-embed{border-radius:14px}}

/* ===== PATCH FINAL: MOBILE SCROLL PUBLIC + PREVIEW HP STABIL ===== */
@media(max-width:760px){
  html, body:not(.pageflip-reader){
    width:100% !important;
    min-height:100% !important;
    height:auto !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  body:not(.pageflip-reader) .container{
    width:100% !important;
    max-width:100% !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }
  body:not(.pageflip-reader) .topbar{
    position:sticky !important;
    top:0 !important;
  }
  body:not(.pageflip-reader) .hero{
    padding:30px 0 18px !important;
    overflow:visible !important;
  }
  body:not(.pageflip-reader) .hero-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
  body:not(.pageflip-reader) .hero h2,
  body:not(.pageflip-reader) .hero h1{
    font-size:26px !important;
    line-height:1.25 !important;
    letter-spacing:-.5px !important;
  }
  body:not(.pageflip-reader) .hero p{
    font-size:16px !important;
    line-height:1.6 !important;
  }
  body:not(.pageflip-reader) .hero-card.hero-showcase{
    display:block !important;
    width:100% !important;
    min-height:auto !important;
    padding:18px !important;
  }
  body:not(.pageflip-reader) .cover-slider{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding-bottom:14px !important;
    -webkit-overflow-scrolling:touch !important;
  }
  body:not(.pageflip-reader) .filters{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin:20px 0 !important;
  }
  body:not(.pageflip-reader) .book-grid{
    grid-template-columns:1fr !important;
    padding-bottom:70px !important;
  }
  body:not(.pageflip-reader) .book-card{
    min-width:0 !important;
  }
}

/* Preview mobile: canvas fallback yang tidak blank, tetap ada animasi flip sederhana */
@media(max-width:760px){
  body.pageflip-reader{
    height:100dvh !important;
    overflow:hidden !important;
    position:fixed !important;
    inset:0 !important;
  }
  .pf-topbar{
    height:64px !important;
    min-height:64px !important;
    padding:8px 10px !important;
  }
  .pf-doc-title{max-width:50vw !important;overflow:hidden !important;}
  .pf-doc-title b{font-size:13px !important;line-height:1.2 !important;display:block !important;white-space:normal !important;}
  .pf-doc-title span{font-size:11px !important;white-space:nowrap !important;}
  .pf-actions{gap:6px !important;}
  .pf-actions .reader-btn{font-size:11px !important;padding:9px 10px !important;border-radius:9px !important;}
  .pf-reader{
    height:calc(100dvh - 136px) !important;
    min-height:0 !important;
    flex:1 1 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    position:relative !important;
  }
  .pf-stage{
    width:100vw !important;
    height:100% !important;
    padding:8px 44px 76px !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
    touch-action:none !important;
  }
  .pf-book.mobile-canvas-book{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    z-index:6 !important;
    opacity:1 !important;
    visibility:visible !important;
    background:transparent !important;
    filter:drop-shadow(0 20px 28px rgba(0,0,0,.46)) !important;
    will-change:transform !important;
  }
  .pf-mobile-page{
    position:relative !important;
    display:block !important;
    background:#fff !important;
    border-radius:7px !important;
    overflow:hidden !important;
    box-shadow:0 0 0 1px rgba(255,255,255,.4), inset -10px 0 22px rgba(0,0,0,.08) !important;
    transform-origin:center center !important;
  }
  .pf-mobile-page canvas{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    background:#fff !important;
  }
  .pf-mobile-page:not(.loaded)::before{
    content:'Memuat halaman...' !important;
    position:absolute !important;
    inset:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#fff !important;
    color:#667085 !important;
    font-weight:800 !important;
    z-index:3 !important;
  }
  .pf-mobile-page.mobile-flip-next{animation:mobileFlipNext .42s ease both !important;}
  .pf-mobile-page.mobile-flip-prev{animation:mobileFlipPrev .42s ease both !important;}
  @keyframes mobileFlipNext{
    0%{transform:perspective(900px) rotateY(0) translateX(0);filter:brightness(1)}
    48%{transform:perspective(900px) rotateY(-16deg) translateX(-14px);filter:brightness(.82)}
    100%{transform:perspective(900px) rotateY(0) translateX(0);filter:brightness(1)}
  }
  @keyframes mobileFlipPrev{
    0%{transform:perspective(900px) rotateY(0) translateX(0);filter:brightness(1)}
    48%{transform:perspective(900px) rotateY(16deg) translateX(14px);filter:brightness(.82)}
    100%{transform:perspective(900px) rotateY(0) translateX(0);filter:brightness(1)}
  }
  .pf-nav{
    z-index:20 !important;
    width:38px !important;
    height:62px !important;
    font-size:46px !important;
    border-radius:13px !important;
    background:rgba(255,255,255,.25) !important;
  }
  .pf-prev{left:7px !important;}
  .pf-next{right:7px !important;}
  .pf-toolbar{
    height:72px !important;
    min-height:72px !important;
    grid-template-columns:86px 1fr 86px !important;
    padding:0 8px !important;
  }
  .pf-tool{font-size:20px !important;min-width:28px !important;height:34px !important;}
  .pf-tools-left,.pf-tools-right{gap:5px !important;}
  .pf-tools-mid{gap:6px !important;}
  .pf-tools-mid strong{font-size:12px !important;min-width:54px !important;}
  #pfPageSlider{min-width:0 !important;width:100% !important;}
}

/* ===== FINAL MOBILE SCROLL + PREVIEW ANTI BLANK 20260429 ===== */
@media (max-width:760px){
  html, body, body.theme-light, body.theme-dark{
    height:auto !important;
    min-height:100% !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    position:static !important;
    touch-action:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  body.pageflip-reader{
    height:100dvh !important;
    min-height:100dvh !important;
    overflow:hidden !important;
    position:fixed !important;
    inset:0 !important;
    touch-action:none !important;
  }
  body:not(.pageflip-reader) main.container,
  body:not(.pageflip-reader) .container,
  body:not(.pageflip-reader) .hero,
  body:not(.pageflip-reader) .hero-grid,
  body:not(.pageflip-reader) .book-grid,
  body:not(.pageflip-reader) .filters{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
  body:not(.pageflip-reader) main.container{
    display:block !important;
    padding-bottom:90px !important;
  }
  body:not(.pageflip-reader) .hero-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
  body:not(.pageflip-reader) .hero-card.hero-showcase{
    display:block !important;
    width:100% !important;
    min-height:0 !important;
  }
  body:not(.pageflip-reader) .cover-slider{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }
  body:not(.pageflip-reader) .filters{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
  body:not(.pageflip-reader) .book-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .pf-reader{height:calc(100dvh - 136px) !important;overflow:hidden !important;display:flex !important;align-items:center !important;justify-content:center !important;}
  .pf-stage{height:100% !important;width:100vw !important;padding:8px 44px 76px !important;box-sizing:border-box !important;display:flex !important;align-items:center !important;justify-content:center !important;overflow:visible !important;touch-action:none !important;}
  .pf-book-mobile{display:flex !important;align-items:center !important;justify-content:center !important;visibility:visible !important;opacity:1 !important;position:relative !important;z-index:6 !important;filter:drop-shadow(0 20px 28px rgba(0,0,0,.46)) !important;}
  .pf-book-mobile .pf-mobile-page{display:block !important;position:relative !important;background:#fff !important;border-radius:7px !important;overflow:hidden !important;box-shadow:0 0 0 1px rgba(255,255,255,.35), inset -10px 0 22px rgba(0,0,0,.08) !important;}
  .pf-book-mobile .pf-mobile-page canvas{display:block !important;width:100% !important;height:100% !important;object-fit:contain !important;background:#fff !important;}
  .pf-mobile-page.loading:before{content:'Memuat halaman...' !important;position:absolute !important;inset:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;background:#fff !important;color:#64748b !important;font-weight:800 !important;z-index:3 !important;}
  .pf-mobile-page.flip-next{animation:mobileFlipNextFinal .48s ease both !important;}
  .pf-mobile-page.flip-prev{animation:mobileFlipPrevFinal .48s ease both !important;}
  @keyframes mobileFlipNextFinal{0%{transform:perspective(900px) rotateY(0) translateX(0);filter:brightness(1)}50%{transform:perspective(900px) rotateY(-18deg) translateX(-14px);filter:brightness(.82)}100%{transform:perspective(900px) rotateY(0) translateX(0);filter:brightness(1)}}
  @keyframes mobileFlipPrevFinal{0%{transform:perspective(900px) rotateY(0) translateX(0);filter:brightness(1)}50%{transform:perspective(900px) rotateY(18deg) translateX(14px);filter:brightness(.82)}100%{transform:perspective(900px) rotateY(0) translateX(0);filter:brightness(1)}}
}

/* ===== FINAL MOBILE COLLECTION COMPACT + PAGINATION + PREVIEW FIX ===== */
@media (max-width:760px){
  /* halaman utama tetap bisa scroll dan kartu buku jadi hemat tempat */
  body:not(.pageflip-reader){
    overflow-y:auto!important;
    overflow-x:hidden!important;
    position:static!important;
  }
  body:not(.pageflip-reader) .container{width:min(100%,94%)!important;}
  body:not(.pageflip-reader) .section-title h2{font-size:24px!important;}
  body:not(.pageflip-reader) .section-title .muted{font-size:13px!important;line-height:1.4!important;}
  body:not(.pageflip-reader) .book-grid,
  body:not(.pageflip-reader) .book-grid.compact-books{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    padding-bottom:28px!important;
  }
  body:not(.pageflip-reader) .book-card{
    border-radius:18px!important;
    padding:9px!important;
    box-shadow:0 8px 22px rgba(13,71,161,.10)!important;
    min-width:0!important;
  }
  body:not(.pageflip-reader) .cover-wrap{
    aspect-ratio:4/5.2!important;
    border-radius:14px!important;
  }
  body:not(.pageflip-reader) .cover-3d{
    transform:none!important;
    border-left:6px solid rgba(5,62,120,.20)!important;
    box-shadow:10px 14px 22px rgba(22,47,76,.12), inset -10px 0 18px rgba(0,0,0,.07)!important;
  }
  body:not(.pageflip-reader) .cover-3d:before{width:12px!important;}
  body:not(.pageflip-reader) .badge{
    top:8px!important;left:8px!important;
    padding:5px 7px!important;
    font-size:9px!important;
    max-width:82%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  body:not(.pageflip-reader) .pdf-icon.fallback{font-size:32px!important;}
  body:not(.pageflip-reader) .book-card h3{
    font-size:13px!important;
    line-height:1.25!important;
    margin:9px 0 5px!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  body:not(.pageflip-reader) .meta{
    font-size:10px!important;
    gap:4px!important;
    line-height:1.2!important;
  }
  body:not(.pageflip-reader) .book-actions{
    gap:6px!important;
    margin-top:9px!important;
  }
  body:not(.pageflip-reader) .book-actions .btn{
    padding:8px 8px!important;
    border-radius:11px!important;
    font-size:12px!important;
  }

  /* pagination modern dan rapih di HP */
  .pagination-wrap{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    flex-wrap:wrap!important;
    padding:16px 0 46px!important;
    margin:0 auto!important;
  }
  .page-btn{
    min-width:36px!important;
    height:36px!important;
    padding:0 12px!important;
    border-radius:999px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:rgba(255,255,255,.82)!important;
    border:1px solid rgba(13,71,161,.16)!important;
    color:#0d47a1!important;
    font-weight:900!important;
    font-size:12px!important;
    box-shadow:0 8px 20px rgba(13,71,161,.08)!important;
  }
  .page-btn.active{
    color:#fff!important;
    background:linear-gradient(135deg,#0d47a1,#00a86b)!important;
    border-color:transparent!important;
  }
  .page-btn:first-child,.page-btn:last-child{min-width:auto!important;}

  /* preview mobile: paksa canvas tampil, override rule lama yang menyembunyikan #pfBook */
  body.pageflip-reader #pfBook.pf-book-mobile,
  body.pageflip-reader #pfBook.pf-book.pf-book-mobile{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    opacity:1!important;
    visibility:visible!important;
    position:relative!important;
    z-index:30!important;
    background:transparent!important;
    margin:auto!important;
  }
  body.pageflip-reader #pfBook.pf-book-mobile .pf-mobile-page{
    display:block!important;
    position:relative!important;
    background:#fff!important;
    border-radius:8px!important;
    overflow:hidden!important;
    box-shadow:0 18px 34px rgba(0,0,0,.48)!important;
  }
  body.pageflip-reader #pfBook.pf-book-mobile .pf-mobile-page canvas{
    display:block!important;
    width:100%!important;
    height:100%!important;
    background:#fff!important;
    object-fit:contain!important;
  }
  body.pageflip-reader .pf-loader{z-index:4!important;}
}
@media (max-width:380px){
  body:not(.pageflip-reader) .book-grid,
  body:not(.pageflip-reader) .book-grid.compact-books{gap:10px!important;}
  body:not(.pageflip-reader) .book-card{padding:8px!important;border-radius:16px!important;}
  body:not(.pageflip-reader) .book-actions .btn{font-size:11px!important;padding:7px 6px!important;}
}


/* REAL MOBILE COMPACT COLLECTION + PREVIEW OVERRIDE 20260429 */
@media (max-width:760px){
html,body:not(.pageflip-reader){height:auto!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important;position:static!important;touch-action:auto!important;-webkit-overflow-scrolling:touch!important;}
body:not(.pageflip-reader) .container{width:100%!important;max-width:100%!important;padding-left:14px!important;padding-right:14px!important;margin:0 auto!important;}
body:not(.pageflip-reader) .hero{padding:28px 0 14px!important;}
body:not(.pageflip-reader) .hero-grid{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;}
body:not(.pageflip-reader) .hero h2{font-size:22px!important;line-height:1.22!important;margin:12px 0!important;}
body:not(.pageflip-reader) .hero p{font-size:14px!important;line-height:1.55!important;}
body:not(.pageflip-reader) .hero-card.hero-showcase{display:block!important;padding:14px!important;border-radius:20px!important;min-height:0!important;}
body:not(.pageflip-reader) .cover-slider{display:flex!important;gap:12px!important;min-height:0!important;height:auto!important;padding:10px 2px 8px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity!important;}
body:not(.pageflip-reader) .slide-cover{min-width:96px!important;width:96px!important;gap:6px!important;scroll-snap-align:start!important;}
body:not(.pageflip-reader) .book-3d{width:84px!important;height:122px!important;border-radius:8px!important;transform:none!important;}
body:not(.pageflip-reader) .slide-cover span{font-size:10px!important;line-height:1.15!important;-webkit-line-clamp:2!important;}
body:not(.pageflip-reader) .filters{grid-template-columns:1fr!important;gap:8px!important;padding:10px!important;border-radius:18px!important;margin:12px 0 20px!important;}
body:not(.pageflip-reader) .field{padding:10px 12px!important;border-radius:12px!important;font-size:13px!important;}
body:not(.pageflip-reader) #koleksi.section-title{display:block!important;margin:14px 0 10px!important;}
body:not(.pageflip-reader) .section-title h2{font-size:23px!important;line-height:1.12!important;}
body:not(.pageflip-reader) .section-title .muted{font-size:12px!important;line-height:1.35!important;}
body:not(.pageflip-reader) .book-grid,body:not(.pageflip-reader) .book-grid.shelf-row,body:not(.pageflip-reader) .book-grid.compact-books{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;padding-bottom:18px!important;overflow:visible!important;}
body:not(.pageflip-reader) .book-grid.shelf-row:after{display:none!important;}
body:not(.pageflip-reader) .book-card{padding:8px!important;border-radius:16px!important;min-width:0!important;box-shadow:0 8px 20px rgba(13,71,161,.10)!important;}
body:not(.pageflip-reader) .cover-wrap{aspect-ratio:auto!important;height:132px!important;min-height:132px!important;border-radius:13px!important;}
body:not(.pageflip-reader) .cover-wrap img,body:not(.pageflip-reader) .cover-wrap canvas{width:100%!important;height:100%!important;object-fit:cover!important;}
body:not(.pageflip-reader) .cover-3d{transform:none!important;border-left:5px solid rgba(5,62,120,.22)!important;box-shadow:8px 12px 18px rgba(22,47,76,.12), inset -8px 0 14px rgba(0,0,0,.07)!important;}
body:not(.pageflip-reader) .cover-3d:before{width:10px!important;}
body:not(.pageflip-reader) .badge{top:7px!important;left:7px!important;padding:4px 6px!important;font-size:8.5px!important;max-width:86%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
body:not(.pageflip-reader) .pdf-icon.fallback{font-size:28px!important;}
body:not(.pageflip-reader) .book-card h3{font-size:12px!important;line-height:1.2!important;margin:7px 0 4px!important;min-height:29px!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
body:not(.pageflip-reader) .meta{font-size:9.5px!important;line-height:1.2!important;gap:3px!important;}
body:not(.pageflip-reader) .book-actions{grid-template-columns:1fr!important;gap:5px!important;margin-top:7px!important;}
body:not(.pageflip-reader) .book-actions .btn{padding:7px 6px!important;border-radius:10px!important;font-size:11px!important;min-height:32px!important;}
body:not(.pageflip-reader) .book-actions .btn-soft{display:none!important;}
.pagination-wrap{display:flex!important;justify-content:center!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important;margin:4px auto 44px!important;padding:10px 0 16px!important;}
.page-btn{height:34px!important;min-width:34px!important;padding:0 11px!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;background:rgba(255,255,255,.92)!important;border:1px solid rgba(13,71,161,.16)!important;color:#0d47a1!important;font-weight:900!important;font-size:12px!important;box-shadow:0 8px 18px rgba(13,71,161,.10)!important;}
.page-btn.active{background:linear-gradient(135deg,#0d47a1,#00a86b)!important;color:#fff!important;border-color:transparent!important;}
.page-btn:first-child,.page-btn:last-child{font-size:0!important;min-width:38px!important;}
.page-btn:first-child::before{content:'‹'!important;font-size:18px!important;}
.page-btn:last-child::before{content:'›'!important;font-size:18px!important;}
body.pageflip-reader{height:100dvh!important;min-height:100dvh!important;overflow:hidden!important;position:fixed!important;inset:0!important;background:#3f3f3f!important;}
body.pageflip-reader .pf-reader{height:calc(100dvh - 136px)!important;min-height:0!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important;}
body.pageflip-reader .pf-stage{height:100%!important;width:100vw!important;padding:8px 44px 74px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important;touch-action:none!important;}
body.pageflip-reader #pfBook.pf-book-mobile{display:flex!important;align-items:center!important;justify-content:center!important;opacity:1!important;visibility:visible!important;position:relative!important;z-index:40!important;background:transparent!important;margin:auto!important;filter:drop-shadow(0 18px 28px rgba(0,0,0,.46))!important;}
body.pageflip-reader #pfBook.pf-book-mobile .pf-mobile-page{display:block!important;position:relative!important;background:#fff!important;border-radius:8px!important;overflow:hidden!important;box-shadow:0 18px 34px rgba(0,0,0,.48)!important;}
body.pageflip-reader #pfBook.pf-book-mobile .pf-mobile-page canvas{display:block!important;width:100%!important;height:100%!important;background:#fff!important;object-fit:contain!important;}
}
@media (max-width:380px){body:not(.pageflip-reader) .cover-wrap{height:118px!important;min-height:118px!important;}body:not(.pageflip-reader) .book-card h3{font-size:11px!important;}body:not(.pageflip-reader) .book-actions .btn{font-size:10.5px!important;}}

/* ===== REAL APPLY FIX: MOBILE NATIVE PREVIEW + COMPACT BOOK GRID ===== */
.mobile-native-reader{display:none}
@media (max-width:760px){
  html,body{height:auto!important;min-height:100%!important;overflow-y:auto!important;overflow-x:hidden!important;}
  body.native-mobile-preview{height:100vh!important;overflow:hidden!important;background:#303030!important;}
  body.native-mobile-preview .pf-topbar{height:64px!important;min-height:64px!important;padding:8px 10px!important;background:#fff!important;position:relative!important;z-index:5!important;}
  body.native-mobile-preview .pf-doc-title b{font-size:12px!important;line-height:1.2!important;color:#0f172a!important;}
  body.native-mobile-preview .pf-doc-title span{font-size:10px!important;color:#64748b!important;}
  body.native-mobile-preview .reader-btn{padding:8px 10px!important;border-radius:10px!important;font-size:11px!important;}
  .desktop-pageflip-reader{display:none!important;}
  .mobile-native-reader{display:block!important;position:fixed!important;left:0!important;right:0!important;top:64px!important;bottom:0!important;background:#3a3a3a!important;z-index:1!important;}
  .mobile-pdf-frame{display:block!important;width:100%!important;height:100%!important;border:0!important;background:#fff!important;}
  .mobile-pdf-fallback{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(15,23,42,.84);color:#fff;font-size:12px;box-shadow:0 12px 34px rgba(0,0,0,.28)}
  .book-grid,.book-grid.shelf-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;padding:0 12px 18px!important;}
  .book-card,.book-card.shelf-book{border-radius:16px!important;padding:9px!important;min-width:0!important;box-shadow:0 10px 24px rgba(13,71,161,.10)!important;}
  .book-cover,.cover-wrap,.shelf-cover{height:150px!important;min-height:150px!important;border-radius:13px!important;overflow:hidden!important;}
  .book-cover img,.cover-wrap img,.shelf-cover img{width:100%!important;height:100%!important;object-fit:cover!important;}
  .book-card h3,.book-title{font-size:12px!important;line-height:1.25!important;margin:8px 0 4px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .book-meta,.book-card .muted{font-size:10px!important;line-height:1.25!important;}
  .book-actions{gap:6px!important;margin-top:8px!important;}
  .book-actions .btn,.book-card .btn{padding:8px 6px!important;border-radius:10px!important;font-size:11px!important;}
  .pagination,.pager,.pagination-wrap{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:6px!important;margin:18px auto 28px!important;padding:0 12px!important;}
  .pagination a,.pagination span,.pager a,.pager span,.page-link{min-width:34px!important;height:34px!important;padding:0 10px!important;border-radius:12px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;background:#eef6ff!important;color:#0d47a1!important;font-weight:800!important;text-decoration:none!important;box-shadow:0 8px 18px rgba(13,71,161,.08)!important;}
  .pagination .active,.pager .active,.page-link.active{background:linear-gradient(135deg,#0d47a1,#00a86b)!important;color:#fff!important;}
}
@media (max-width:380px){.book-cover,.cover-wrap,.shelf-cover{height:135px!important}.book-grid,.book-grid.shelf-row{gap:10px!important;padding-left:10px!important;padding-right:10px!important}.book-card,.book-card.shelf-book{padding:8px!important}}

/* =====================================================
   MOBILE SIMPLE FLIP READER - STABLE HP
   Desktop tetap PageFlip, mobile pakai canvas PDF.js + animasi flip sederhana
   ===================================================== */
.mobile-simple-flip{display:none}
@media (max-width:760px){
  html,body{height:100%;overflow:auto!important}
  body.mobile-simple-flip-mode{height:100vh;overflow:hidden!important;background:#2f2f2f!important}
  body.mobile-simple-flip-mode .pf-topbar{height:64px;min-height:64px;padding:8px 10px;background:#fff!important;color:#0f172a!important;box-shadow:0 1px 0 rgba(15,23,42,.08);position:relative;z-index:30}
  body.mobile-simple-flip-mode .pf-doc-title b{font-size:11px!important;line-height:1.2;color:#0f172a!important;display:block;max-width:210px;white-space:normal}
  body.mobile-simple-flip-mode .pf-doc-title span{font-size:10px!important;color:#64748b!important;display:block;margin-top:2px}
  body.mobile-simple-flip-mode .pf-actions{gap:6px}
  body.mobile-simple-flip-mode .reader-btn{font-size:10px!important;padding:8px 10px!important;border-radius:9px!important}
  .desktop-pageflip-reader{display:none!important}
  .mobile-simple-flip{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;grid-template-rows:minmax(0,1fr) 44px;gap:0;position:fixed;top:64px;left:0;right:0;bottom:0;background:radial-gradient(circle at center,#555 0,#353535 58%,#292929 100%);overflow:hidden;touch-action:none;z-index:5}
  .msf-book-wrap{grid-column:1/4;grid-row:1/2;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;padding:18px 44px 14px;touch-action:none}
  .msf-book{transform-origin:center center;transition:transform .12s ease;will-change:transform;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}
  .msf-book-wrap.is-zoomed{cursor:grab}.msf-book-wrap.is-zoomed:active{cursor:grabbing}
  .msf-page{position:relative;width:min(72vw,330px);max-height:calc(100vh - 145px);background:#fff;border-radius:5px;box-shadow:0 22px 45px rgba(0,0,0,.55), 8px 0 0 rgba(255,255,255,.28);overflow:hidden;transform-origin:left center;will-change:transform,opacity;transition:transform .28s ease,opacity .22s ease}
  .msf-page canvas{display:block;width:100%;height:100%;background:#fff}
  .msf-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;background:#fff;color:#334155;font-weight:800;font-size:11px;padding:16px;z-index:2}
  .msf-page.turn-next{transform:perspective(900px) rotateY(-32deg) translateX(12px);opacity:.72;box-shadow:-20px 22px 45px rgba(0,0,0,.44)}
  .msf-page.turn-prev{transform:perspective(900px) rotateY(32deg) translateX(-12px);opacity:.72;box-shadow:20px 22px 45px rgba(0,0,0,.44)}
  .msf-page.turn-in{animation:msfPageIn .24s ease both}
  @keyframes msfPageIn{from{transform:perspective(900px) rotateY(12deg);opacity:.65}to{transform:perspective(900px) rotateY(0);opacity:1}}
  .msf-nav{position:absolute;top:45%;transform:translateY(-50%);width:38px;height:58px;border:0;border-radius:13px;background:rgba(255,255,255,.22);color:#fff;font-size:40px;font-weight:800;display:flex;align-items:center;justify-content:center;z-index:20;box-shadow:0 12px 28px rgba(0,0,0,.2)}
  .msf-prev{left:8px}.msf-next{right:8px}.msf-nav:disabled{opacity:.25}
  .msf-toolbar{grid-column:1/4;grid-row:2/3;display:grid;grid-template-columns:34px 64px minmax(80px,1fr) 34px 46px;align-items:center;gap:6px;padding:6px 10px;background:rgba(35,35,35,.68);backdrop-filter:blur(10px);color:#fff;z-index:25}
  .msf-toolbar button,.msf-toolbar a{height:30px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#fff;font-weight:900;text-decoration:none;display:flex;align-items:center;justify-content:center;font-size:13px}
  .msf-toolbar strong{font-size:12px;text-align:center;white-space:nowrap;color:#fff!important}.msf-toolbar input{width:100%;accent-color:#fff}
}
@media (max-width:380px){
  .msf-page{width:min(70vw,285px)}
  .mobile-simple-flip{top:62px}.msf-book-wrap{padding-left:38px;padding-right:38px}.msf-nav{width:32px;height:52px;font-size:34px}
}

/* ================================
   FINAL PAGINATION 15 / MODERN DESKTOP + MOBILE
   ================================ */
.pagination-modern,
.pagination-wrap{
  width:100%;
  max-width:1180px;
  margin:10px auto 52px!important;
  padding:16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(13,71,161,.10)!important;
  border-radius:24px!important;
  box-shadow:0 18px 45px rgba(13,71,161,.10)!important;
  backdrop-filter:blur(12px)!important;
}
.page-btn{
  min-width:42px!important;
  height:42px!important;
  padding:0 15px!important;
  border-radius:14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(180deg,#ffffff,#f2f8ff)!important;
  border:1px solid rgba(13,71,161,.14)!important;
  color:#0d47a1!important;
  font-size:14px!important;
  font-weight:950!important;
  line-height:1!important;
  box-shadow:0 8px 20px rgba(13,71,161,.10)!important;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease!important;
}
.page-btn:hover{transform:translateY(-2px)!important;box-shadow:0 14px 26px rgba(13,71,161,.16)!important;}
.page-btn.active{
  background:linear-gradient(135deg,#0d47a1,#0077c8 48%,#00a86b)!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:0 14px 30px rgba(0,168,107,.25)!important;
}
.page-nav{padding:0!important;}
.page-btn.disabled{opacity:.42!important;pointer-events:none!important;filter:grayscale(.3)!important;}
.page-dots{height:42px;min-width:28px;display:inline-flex;align-items:center;justify-content:center;color:#6b7d94;font-weight:950;}
.page-info{
  margin-left:10px;
  padding:11px 14px;
  border-radius:999px;
  background:rgba(232,246,255,.95);
  color:#0d47a1;
  font-size:13px;
  font-weight:900;
  border:1px solid rgba(13,71,161,.10);
}
body[data-active-theme="dark"] .pagination-modern,
body[data-active-theme="dark"] .pagination-wrap,
body.theme-dark .pagination-modern,
body.theme-dark .pagination-wrap{
  background:rgba(15,32,52,.78)!important;
  border-color:rgba(255,255,255,.12)!important;
}
body[data-active-theme="dark"] .page-btn,
body.theme-dark .page-btn{
  background:linear-gradient(180deg,#1b3350,#10243a)!important;
  border-color:rgba(255,255,255,.12)!important;
  color:#d9eeff!important;
}
body[data-active-theme="dark"] .page-info,
body.theme-dark .page-info{background:rgba(32,53,79,.95);color:#d9eeff;border-color:rgba(255,255,255,.12)}

@media(max-width:760px){
  .pagination-modern,.pagination-wrap{
    margin:12px auto 34px!important;
    padding:11px 8px!important;
    border-radius:18px!important;
    gap:6px!important;
    box-shadow:0 10px 28px rgba(13,71,161,.08)!important;
  }
  .page-btn{min-width:34px!important;height:34px!important;border-radius:11px!important;padding:0 10px!important;font-size:12px!important;}
  .page-nav{min-width:36px!important;}
  .page-info{flex-basis:100%;margin:4px 0 0!important;text-align:center;font-size:11px;padding:8px 10px;}
  .page-dots{height:34px;min-width:18px;font-size:12px;}
}

/* =========================================================
   PREMIUM FULL DASHBOARD + DESKTOP 5x3 GRID FINAL
   ========================================================= */
.premium-topbar{box-shadow:0 14px 40px rgba(13,71,161,.08)}
.public-dashboard{padding-bottom:42px}.premium-hero{padding:58px 0 26px}.premium-hero-grid{grid-template-columns:1.18fr .82fr;align-items:center;gap:42px}.hero-copy h2{font-size:clamp(30px,3.2vw,48px);line-height:1.08;letter-spacing:-1.25px;margin:22px 0 18px}.hero-copy p{font-size:17px;line-height:1.8;max-width:680px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.premium-stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:24px;max-width:720px}.premium-stat{padding:14px 16px;border:1px solid rgba(13,71,161,.12);border-radius:20px;background:rgba(255,255,255,.74);box-shadow:0 12px 28px rgba(13,71,161,.07);backdrop-filter:blur(12px)}.premium-stat b{display:block;font-size:26px;color:#0d47a1;line-height:1}.premium-stat span{display:block;font-size:12px;font-weight:900;color:#617389;margin-top:6px}.premium-showcase{min-height:310px;padding:22px!important;border-radius:30px!important;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,250,255,.88) 55%,rgba(232,255,245,.88))!important;box-shadow:0 24px 60px rgba(13,71,161,.13)!important;overflow:hidden}.premium-showcase:before{content:"";position:absolute;right:-90px;top:-90px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(0,168,107,.22),transparent 70%)}.premium-mini-dashboard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:10px 0 18px}.mini-card{display:flex;align-items:center;gap:14px;padding:17px 18px;border-radius:22px;background:rgba(255,255,255,.9);border:1px solid #dce9f7;box-shadow:0 16px 36px rgba(13,71,161,.08)}.mini-card span{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#eaf6ff,#f2fff9);font-size:22px}.mini-card b{display:block;font-size:27px;letter-spacing:-.8px;color:#0b1f38}.mini-card small{display:block;color:#66758b;font-weight:800}.premium-filters{margin-top:22px!important;border-radius:24px!important;background:rgba(255,255,255,.88)!important;box-shadow:0 18px 44px rgba(13,71,161,.1)!important}.popular-strip{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:center;margin:18px 0 12px;padding:20px;border:1px solid #dce9f7;border-radius:26px;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(247,252,255,.92));box-shadow:0 16px 36px rgba(13,71,161,.08)}.popular-strip h3{margin:0 0 4px;font-size:22px}.popular-strip p{margin:0;color:#708196}.popular-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.popular-list a{padding:12px;border-radius:16px;background:#eef7ff;border:1px solid #d8eafa;min-height:64px;display:flex;flex-direction:column;justify-content:space-between;transition:.2s}.popular-list a:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(13,71,161,.12)}.popular-list b{font-size:12px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.popular-list span{font-size:12px;color:#0d47a1;font-weight:950}.premium-section-title{margin-top:26px}.premium-book-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:18px!important;align-items:start}.premium-book-card{border-radius:22px!important;padding:12px!important;box-shadow:0 16px 40px rgba(13,71,161,.10)!important;border:1px solid #dce9f7!important;background:rgba(255,255,255,.94)!important;transition:.25s ease!important}.premium-book-card:hover{transform:translateY(-7px)!important;box-shadow:0 24px 54px rgba(13,71,161,.16)!important}.premium-book-card .cover-wrap{height:250px!important;border-radius:18px!important;overflow:hidden!important}.premium-book-card .cover-wrap img,.premium-book-card .pdf-cover-canvas{height:100%!important;width:100%!important;object-fit:cover!important}.premium-book-card h3{font-size:14px!important;line-height:1.25!important;min-height:36px!important;margin:12px 0 7px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.premium-book-card .meta{font-size:12px!important;min-height:19px!important}.premium-book-card .book-actions{gap:8px!important;margin-top:11px!important}.premium-book-card .book-actions .btn{padding:10px 10px!important;border-radius:13px!important;font-size:13px!important}.premium-pagination{margin:34px 0 10px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;flex-wrap:wrap!important}.premium-pagination .page-btn{border:1px solid #d8e7f7!important;background:rgba(255,255,255,.92)!important;color:#0d47a1!important;min-width:42px!important;height:42px!important;border-radius:15px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-weight:950!important;padding:0 14px!important;box-shadow:0 10px 22px rgba(13,71,161,.08)!important;transition:.2s!important}.premium-pagination .page-btn:hover{transform:translateY(-2px)!important;background:linear-gradient(135deg,#0d47a1,#00a86b)!important;color:#fff!important}.premium-pagination .page-btn.active{background:linear-gradient(135deg,#0d47a1,#00a86b)!important;color:#fff!important;box-shadow:0 14px 30px rgba(13,71,161,.2)!important}.premium-pagination .page-btn.disabled{opacity:.45!important;pointer-events:none!important}.premium-pagination .page-info{padding:11px 14px;border-radius:15px;background:#eef7ff;color:#60738c;font-weight:900;font-size:13px}.premium-pagination .page-dots{font-weight:950;color:#8fa0b4;padding:0 2px}
body.theme-dark .premium-stat,body.theme-dark .mini-card,body.theme-dark .popular-strip,body.theme-dark .premium-book-card,body[data-active-theme="dark"] .premium-stat,body[data-active-theme="dark"] .mini-card,body[data-active-theme="dark"] .popular-strip,body[data-active-theme="dark"] .premium-book-card{background:rgba(15,31,52,.86)!important;border-color:rgba(255,255,255,.12)!important;color:#f4f8ff!important}body.theme-dark .premium-book-card h3,body.theme-dark .popular-strip h3,body.theme-dark .mini-card b,body[data-active-theme="dark"] .premium-book-card h3,body[data-active-theme="dark"] .popular-strip h3,body[data-active-theme="dark"] .mini-card b{color:#f8fbff!important}body.theme-dark .hero-copy p,body.theme-dark .popular-strip p,body.theme-dark .mini-card small,body[data-active-theme="dark"] .hero-copy p,body[data-active-theme="dark"] .popular-strip p,body[data-active-theme="dark"] .mini-card small{color:#c7d7eb!important}
@media(max-width:1300px){.premium-book-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.popular-list{grid-template-columns:repeat(3,minmax(0,1fr))}.premium-book-card .cover-wrap{height:235px!important}}
@media(max-width:1020px){.premium-hero-grid{grid-template-columns:1fr}.premium-mini-dashboard{grid-template-columns:repeat(2,minmax(0,1fr))}.premium-book-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.popular-strip{grid-template-columns:1fr}.premium-stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.premium-hero{padding:28px 0 16px}.premium-mini-dashboard{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mini-card{padding:12px}.mini-card span{width:36px;height:36px;font-size:18px}.mini-card b{font-size:22px}.popular-list{grid-template-columns:1fr 1fr}.premium-book-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.premium-book-card{padding:9px!important;border-radius:18px!important}.premium-book-card .cover-wrap{height:180px!important}.premium-book-card h3{font-size:12px!important;min-height:32px!important}.premium-book-card .book-actions .btn{font-size:12px!important;padding:9px 8px!important}.premium-pagination .page-nav{font-size:0!important}.premium-pagination .page-nav::first-letter{font-size:16px!important}.premium-pagination .page-info{width:100%;text-align:center}.hero-copy h2{font-size:26px}.hero-copy p{font-size:15px}.premium-showcase{min-height:230px}.premium-stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1301px){.premium-book-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}.premium-book-card .cover-wrap{height:245px!important}}