/* Kampung Kecil — natural, two-sided book page turning */
.flip-shell{background:radial-gradient(ellipse at 50% 28%,#8a603b 0%,#50301c 56%,#25160e 100%);padding:clamp(15px,4vw,42px) 10px;border-radius:20px;overflow:hidden}
.flip-stage{perspective:2400px;min-height:0;padding:18px 12px 30px;overflow:visible}
#natural-book{--turn-duration:1050ms;display:flex;position:relative;width:min(800px,94%);margin:auto;aspect-ratio:1808 / 1277;box-shadow:0 22px 30px #10070088,0 3px 3px #0004;transform-style:preserve-3d;background:#f9f2e5;border:5px solid #382318;border-radius:3px 9px 9px 3px;isolation:isolate;touch-action:pan-y}
#natural-book::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:24px;transform:translateX(-50%);background:linear-gradient(90deg,#0005,transparent 35%,#0004 55%,transparent);z-index:5;pointer-events:none}
#natural-book::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 15px #4b281b40;pointer-events:none;z-index:12}
#natural-book .natural-page{position:relative;display:block;width:50%;height:100%;aspect-ratio:auto;overflow:hidden;background:#fdfaf4;backface-visibility:hidden}
#natural-book .natural-page img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;pointer-events:none}
#natural-book .natural-left{box-shadow:inset -9px 0 12px #0002}
#natural-book .natural-right{box-shadow:inset 9px 0 12px #0002}
#natural-book .turn-sheet{position:absolute;top:0;bottom:0;width:50%;z-index:9;transform-style:preserve-3d;pointer-events:none;will-change:transform}
#natural-book .turn-sheet.next{left:50%;transform-origin:left center;animation:page-turn-next var(--turn-duration) cubic-bezier(.42,.05,.22,.98) forwards}
#natural-book .turn-sheet.prev{left:0;transform-origin:right center;animation:page-turn-prev var(--turn-duration) cubic-bezier(.42,.05,.22,.98) forwards}
#natural-book .turn-face{position:absolute;inset:0;background:#fffdf7;backface-visibility:hidden;overflow:hidden;box-shadow:0 2px 15px #0003}
#natural-book .turn-face img{width:100%;height:100%;object-fit:contain;display:block}
#natural-book .turn-face.back{transform:rotateY(180deg)}
#natural-book .turn-face.front::after,#natural-book .turn-face.back::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0004,transparent 40%,#0001);opacity:.45;pointer-events:none}
@keyframes page-turn-next{0%{transform:rotateY(0deg)}45%{transform:rotateY(-80deg)}55%{transform:rotateY(-100deg)}100%{transform:rotateY(-180deg)}}
@keyframes page-turn-prev{0%{transform:rotateY(0deg)}45%{transform:rotateY(80deg)}55%{transform:rotateY(100deg)}100%{transform:rotateY(180deg)}}
#natural-book.zoomed{width:min(1050px,98%)}
.flip-tools button:disabled{opacity:.4;cursor:not-allowed}
.flip-shell:fullscreen{display:flex;flex-direction:column;justify-content:center;border-radius:0;overflow:auto}
.flip-shell:fullscreen #natural-book{width:min(1000px,85vw,calc(70vh * 1808 / 1277))}
@media(max-width:750px){.flip-stage{padding:14px 2px 20px}#natural-book{width:min(440px,95%);aspect-ratio:904/1277;border-width:4px}#natural-book .natural-left{width:100%}#natural-book .natural-right{display:none}#natural-book::before{left:auto;right:0;transform:none;width:10px;background:linear-gradient(90deg,transparent,#0003)}#natural-book .turn-sheet.next,#natural-book .turn-sheet.prev{width:100%;left:0;transform-origin:left center}#natural-book .turn-sheet.prev{transform-origin:right center}#natural-book.zoomed{width:min(550px,100%)}.flip-shell:fullscreen #natural-book{width:min(90vw,calc(75vh * 904 / 1277))}}
@media(prefers-reduced-motion:reduce){#natural-book{--turn-duration:100ms}}