/* ===== 3D Pop-up Kasap Kataloğu ===== */
.book-section{background:radial-gradient(ellipse at 50% 0%,#3a2a1e 0%,#1b1511 60%,#120e0b 100%);color:var(--white);padding:96px 0 84px;overflow:hidden}
.book-section .section-title{color:var(--white)}
.book-section .section-sub{color:var(--text-soft);margin-bottom:44px}
.book-stage{container-type:inline-size;max-width:980px;margin:0 auto}
.book-wrap{transform:perspective(1800px) rotateX(10deg);transform-origin:50% 100%}
.book{position:relative;width:100%;aspect-ratio:3/2;perspective:2400px;
  box-shadow:0 2px 0 #e9dfc8,0 4px 0 #d8ccb0,0 6px 0 #eadfc6,0 8px 0 #cdbf9f,0 46px 70px rgba(0,0,0,.6);border-radius:3px}
.page,.face{position:absolute;top:0;width:50%;height:100%;overflow:hidden;
  background:#fbf7ee;color:#3a2f26}
.base-left{left:0;background:linear-gradient(90deg,#e9e0cc 0%,#fbf7ee 9%,#fbf7ee 88%,#e3d9c2 100%)}
.base-right{left:50%;background:linear-gradient(90deg,#e3d9c2 0%,#fbf7ee 10%,#fbf7ee 92%,#e9e0cc 100%)}
.base-left::after,.face.back::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(270deg,rgba(60,40,20,.22),rgba(60,40,20,0) 9%)}
.base-right::after,.face.front::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(60,40,20,.22),rgba(60,40,20,0) 9%)}
.leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:0 50%;transform-style:flat;
  transition:transform 1s cubic-bezier(.55,.1,.25,1)}
.leaf.flipped{transform:rotateY(-180deg)}
.leaf .face{left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.front{background:linear-gradient(90deg,#e3d9c2 0%,#fbf7ee 10%,#fbf7ee 92%,#e9e0cc 100%)}
.face.back{transform:rotateY(180deg);background:linear-gradient(90deg,#e9e0cc 0%,#fbf7ee 9%,#fbf7ee 88%,#e3d9c2 100%)}
.no-anim .leaf,.no-anim .popup{transition:none!important}

/* left (text) page */
.tp{position:absolute;inset:0;padding:6cqw 5cqw 4cqw 4.5cqw;display:flex;flex-direction:column}
.tp .kicker{font-size:1.25cqw;letter-spacing:.28em;color:#a07f2e;font-weight:600;text-transform:uppercase}
.tp .num{font-family:'Playfair Display',serif;font-size:9cqw;line-height:1;color:rgba(201,162,74,.35);font-weight:700;margin:1cqw 0 .5cqw}
.tp h3{font-size:3.6cqw;line-height:1.15;color:var(--charcoal);margin-bottom:1.6cqw}
.tp .rule{width:5cqw;height:2px;background:var(--gold);margin-bottom:1.8cqw}
.tp .desc{font-size:1.5cqw;line-height:1.7;color:#5f5142;max-width:30cqw}
.tp .acts{margin-top:auto;display:flex;gap:1cqw;flex-wrap:wrap}
.tp .acts a{font-size:1.15cqw;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:1cqw 1.8cqw;border:1px solid var(--charcoal);color:var(--charcoal);border-radius:2px;transition:.2s}
.tp .acts a.pri{background:var(--charcoal);color:var(--gold-light)}
.tp .acts a:hover{background:var(--gold);border-color:var(--gold);color:var(--charcoal)}
.tp .pn{position:absolute;bottom:2cqw;left:4.5cqw;font-size:1.1cqw;color:#a89a84;letter-spacing:.2em}

/* right (pop-up) page */
.pp{position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,transparent 0 2.4cqw,rgba(120,90,40,.05) 2.4cqw calc(2.4cqw + 1px))}
.pp .pn{position:absolute;bottom:2cqw;right:4.5cqw;font-size:1.1cqw;color:#a89a84;letter-spacing:.2em}
.pp .blueprint{position:absolute;right:4cqw;top:4cqw;font-family:'Playfair Display',serif;font-size:1.3cqw;letter-spacing:.3em;color:#bda96f;writing-mode:vertical-rl}
.popup{position:absolute;left:50%;bottom:11cqw;width:30cqw;transform-origin:50% 100%;
  transform:translateX(-50%) perspective(900px) rotateX(82deg) scale(.55);opacity:0;
  transition:transform .35s ease,opacity .25s ease}
.leaf.active .popup{transform:translateX(-50%) perspective(900px) rotateX(0deg) scale(1);opacity:1;
  transition:transform 1.1s cubic-bezier(.2,1.35,.4,1) .55s,opacity .4s ease .55s}
.popup .paper{background:#fff;padding:1.4cqw 1.4cqw 0;border-radius:.7cqw .7cqw 0 0;box-shadow:0 1.2cqw 2.4cqw rgba(30,18,6,.35)}
.popup .ph-img{width:100%;aspect-ratio:4/3;border-radius:.4cqw}
.popup .cap{font-family:'Playfair Display',serif;font-size:1.7cqw;text-align:center;padding:1.1cqw 0 1.2cqw;color:var(--charcoal)}
.popup.cutout .paper{background:none;box-shadow:none;padding:0}
.popup.cutout img{filter:drop-shadow(0 1.4cqw 1.4cqw rgba(0,0,0,.4))}
.popup .fold{position:absolute;left:-1cqw;right:-1cqw;bottom:-.1cqw;height:1.2cqw;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,0));transform-origin:top;transform:scaleY(1)}
.pshadow{position:absolute;left:50%;bottom:9.6cqw;width:30cqw;height:3.4cqw;transform:translateX(-50%) scale(.4);opacity:0;
  background:radial-gradient(ellipse at center,rgba(40,25,10,.45),rgba(40,25,10,0) 70%);transition:.3s}
.leaf.active .pshadow{transform:translateX(-50%) scale(1);opacity:1;transition:transform 1.1s ease .55s,opacity .5s ease .55s}
.leaf.active .popup{animation:floaty 5s ease-in-out 1.9s infinite}
@keyframes floaty{0%,100%{margin-bottom:0}50%{margin-bottom:.9cqw}}

/* end page */
.ep{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:5cqw;gap:1.6cqw}
.ep .mark{width:8cqw;height:8cqw;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:700;font-size:2.8cqw;color:#a07f2e}
.ep h3{font-size:3cqw;color:var(--charcoal)}
.ep p{font-size:1.5cqw;color:#5f5142;max-width:26cqw}
.ep a{font-size:1.2cqw;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:1.1cqw 2cqw;background:var(--charcoal);color:var(--gold-light);border-radius:2px}
.ep a:hover{background:var(--gold);color:var(--charcoal)}

/* controls */
.book-ctrl{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:46px}
.book-ctrl button.nav{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--gold);background:transparent;color:var(--gold-light);font-size:20px;cursor:pointer;transition:.2s}
.book-ctrl button.nav:hover:not(:disabled){background:var(--gold);color:var(--charcoal)}
.book-ctrl button.nav:disabled{opacity:.3;cursor:default}
.book-dots{display:flex;gap:10px}
.book-dots button{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--gold);background:transparent;cursor:pointer;padding:0;transition:.25s}
.book-dots button.on{background:var(--gold);transform:scale(1.25)}
.book-caption{display:none;text-align:center;margin-top:30px}
.book-caption h4{font-size:24px;color:var(--white);margin-bottom:6px}
.book-caption p{color:var(--text-soft);font-size:14px;margin-bottom:16px}
.book-caption a{display:inline-block;border:1px solid var(--gold);color:var(--gold-light);padding:10px 22px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600}
.book-hint{text-align:center;color:#8f8272;font-size:12px;letter-spacing:.15em;margin-top:18px;text-transform:uppercase}

@container (max-width:620px){
  .tp .desc,.tp .acts,.tp .kicker{display:none}
  .tp{padding:7cqw 4cqw}
  .tp .num{font-size:12cqw}
  .tp h3{font-size:5.4cqw}
  .popup{width:38cqw;bottom:12cqw}
  .popup .cap{font-size:2.8cqw}
  .pshadow{width:38cqw}
  .ep h3{font-size:4.6cqw}.ep p,.ep a{display:none}
  .pp .blueprint{display:none}
}
@media (max-width:700px){.book-caption{display:block}}
@media (prefers-reduced-motion:reduce){.leaf{transition-duration:.01s}.leaf.active .popup{animation:none}}

/* cutout (arka planı silinmiş PNG) */
.popup.cutout{width:34cqw;bottom:9.5cqw}
.popup.cutout .ph-img{aspect-ratio:auto;background:none;overflow:visible;height:auto}
.popup.cutout .ph-img img{height:auto;object-fit:contain;filter:drop-shadow(0 1.2cqw 1.2cqw rgba(30,15,5,.45))}
.popup.cutout .cap{display:none}
.popup.cutout .fold{display:none}
@container (max-width:620px){.popup.cutout{width:40cqw}}

.book-count{font-family:'Playfair Display',serif;color:var(--gold-light);font-size:20px;min-width:110px;text-align:center;letter-spacing:.1em}
.book-count small{color:#8f8272;font-size:13px}
.book-cats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:26px}
.book-cats button{padding:8px 18px;border-radius:30px;border:1px solid rgba(201,162,74,.5);background:transparent;color:var(--text-soft);font-family:inherit;font-size:12.5px;letter-spacing:.08em;cursor:pointer;transition:.2s;text-transform:uppercase}
.book-cats button:hover{border-color:var(--gold);color:var(--gold-light)}
.book-cats button.on{background:var(--gold);border-color:var(--gold);color:var(--charcoal);font-weight:600}