/* ==========================================================================
   İkramedya Carpet CMS - Flipbook & Digital Catalog Styles
   AŞAMA 14 Canonical Frontend Asset
   ========================================================================== */

.flipbook-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-8) var(--container-padding);
}

.catalog-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.catalog-header-bar h1 {
    font-size: 1.75rem;
    color: var(--color-text-primary);
    margin: 0;
}

.catalog-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.flipbook-viewer-stage {
    position: relative;
    background: radial-gradient(ellipse at center, #5b5048 0%, #332c27 48%, #211d1a 100%);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    min-height: 580px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.flipbook-single-notice {
    position: absolute;
    top: 14px;
    left: 50%;
    z-index: 50;
    transform: translateX(-50%);
    padding: 8px 13px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    background: rgba(15,12,10,.72);
    color: rgba(255,255,255,.82);
    font-size: 12px;
    backdrop-filter: blur(8px);
}

.flipbook-viewer-stage:fullscreen,
.flipbook-viewer-stage:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    min-height: 100vh;
}

.flipbook-viewport {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6, 24px) var(--space-8, 32px);
    user-select: none;
    perspective: 2400px;
    overflow: hidden;
}

/* Book Spread / 2-Page Container */
.flipbook-book {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 72vh;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    background: transparent;
    border-radius: 4px;
    transform-style: preserve-3d;
    transform: scale(var(--book-zoom, 1));
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Center Spine Shadow - Natural subtle page depth */
.flipbook-book::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 10px;
    transform: translateX(-50%);
    background: linear-gradient(to right, 
        rgba(0, 0, 0, 0.05) 0%, 
        rgba(0, 0, 0, 0.12) 35%, 
        rgba(255, 255, 255, 0.18) 50%, 
        rgba(0, 0, 0, 0.12) 65%, 
        rgba(0, 0, 0, 0.05) 100%
    );
    pointer-events: none;
    z-index: 20;
}

.flipbook-book.single-page::after {
    display: none;
}

/* Page Leafs */
.flipbook-leaf {
    position: relative;
    height: 70vh;
    max-height: 640px;
    aspect-ratio: 1 / 1.414; /* Standard DIN/Catalog Ratio */
    background: #FFFFFF;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    transition: filter .25s ease;
    transform-style: preserve-3d;
}

.flipbook-leaf:first-child { border-radius: 5px 0 0 5px; }
.flipbook-leaf:nth-child(2) { border-radius: 0 5px 5px 0; }
.flipbook-book.is-turning .flipbook-leaf { filter: brightness(.88); }

.flipbook-leaf img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #FFFFFF;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Turning Page Simulation with Real Paper Corner Curl Peel */
.flipbook-turning-leaf {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    transform-origin: left center;
    transform-style: preserve-3d;
    z-index: 30;
    pointer-events: none;
    transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.65s ease;
    overflow: hidden;
    background: #fff;
    backface-visibility: visible;
}

.flipbook-turning-leaf img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    backface-visibility: hidden;
}

.flipbook-page-face { position:absolute; inset:0; overflow:hidden; background:#fff; backface-visibility:hidden; }
.flipbook-page-face.back { transform:rotateY(180deg); }
.flipbook-page-face img { width:100%; height:100%; object-fit:contain; }
.flipbook-book.is-peeking-next .flipbook-leaf:nth-child(2) { transform:perspective(1800px) rotateY(-3deg); transform-origin:left center; box-shadow:-10px 8px 28px rgba(0,0,0,.34); }
.flipbook-book.is-peeking-prev .flipbook-leaf:first-child { transform:perspective(1800px) rotateY(3deg); transform-origin:right center; box-shadow:10px 8px 28px rgba(0,0,0,.34); }
.flipbook-book.is-manual-turn.is-peeking-next .flipbook-leaf:nth-child(2){transform:perspective(1800px) rotateY(calc(var(--manual-turn,0) * -38deg));filter:brightness(calc(1 - var(--manual-turn,0) * .18))}.flipbook-book.is-manual-turn.is-peeking-prev .flipbook-leaf:first-child{transform:perspective(1800px) rotateY(calc(var(--manual-turn,0) * 38deg));filter:brightness(calc(1 - var(--manual-turn,0) * .18))}.flipbook-book.is-manual-turn .flipbook-leaf{transition:none}

.flipbook-turning-leaf::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(60,43,31,.34), rgba(255,255,255,.48));
    opacity: 0;
    animation: paperShade .65s ease-in-out;
    pointer-events: none;
}

@keyframes paperShade { 45% { opacity: 1; } }

.flipbook-turning-leaf.turning-forward {
    animation: pageCurlForward 0.65s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.flipbook-turning-leaf.turning-backward {
    left: 0;
    right: auto;
    transform-origin: right center;
    animation: pageCurlBackward 0.65s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes pageCurlForward {
    0% {
        transform: rotateY(0deg) skewY(0deg);
        box-shadow: inset -20px 0 30px rgba(0,0,0,0.3), 10px 0 30px rgba(0,0,0,0.4);
    }
    40% {
        transform: rotateY(-70deg) skewY(-3deg) scaleY(0.98);
        box-shadow: inset -40px 0 50px rgba(0,0,0,0.4), 25px 0 45px rgba(0,0,0,0.5);
    }
    100% {
        transform: rotateY(-180deg) skewY(0deg);
        box-shadow: inset 20px 0 30px rgba(0,0,0,0.3), -10px 0 30px rgba(0,0,0,0.4);
    }
}

@keyframes pageCurlBackward {
    0% {
        transform: rotateY(0deg) skewY(0deg);
        box-shadow: inset 20px 0 30px rgba(0,0,0,0.3), -10px 0 30px rgba(0,0,0,0.4);
    }
    40% {
        transform: rotateY(70deg) skewY(3deg) scaleY(0.98);
        box-shadow: inset 40px 0 50px rgba(0,0,0,0.4), -25px 0 45px rgba(0,0,0,0.5);
    }
    100% {
        transform: rotateY(180deg) skewY(0deg);
        box-shadow: inset -20px 0 30px rgba(0,0,0,0.3), 10px 0 30px rgba(0,0,0,0.4);
    }
}

/* Corner Curl Hover Peel Hotspots */
.corner-peel-zone {
    position: absolute;
    width: 64px;
    height: 64px;
    z-index: 40;
    cursor: pointer;
}

.corner-peel-zone::after {
    content: '';
    position: absolute;
    width: 56px;
    height: 56px;
    opacity: 0;
    border-radius: 0 0 0 100%;
    background: linear-gradient(135deg, rgba(255,255,255,.96) 0 43%, rgba(224,215,207,.95) 45% 54%, rgba(54,42,34,.3) 56% 100%);
    box-shadow: -8px 8px 18px rgba(0,0,0,.32);
    transform: scale(.35);
    transform-origin: top right;
    transition: opacity .22s ease, transform .28s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
}

.corner-peel-tr::after { top:0; right:0; }
.corner-peel-br::after { right:0; bottom:0; transform-origin:bottom right; transform:scale(.35) rotate(90deg); }
.corner-peel-tl::after { top:0; left:0; transform-origin:top left; transform:scale(.35) rotate(-90deg); }
.corner-peel-bl::after { bottom:0; left:0; transform-origin:bottom left; transform:scale(.35) rotate(180deg); }
.corner-peel-zone:hover::after { opacity:1; transform:scale(1); }
.corner-peel-br:hover::after { transform:scale(1) rotate(90deg); }
.corner-peel-tl:hover::after { transform:scale(1) rotate(-90deg); }
.corner-peel-bl:hover::after { transform:scale(1) rotate(180deg); }

.corner-peel-tr { top: 0; right: 0; }
.corner-peel-br { bottom: 0; right: 0; }
.corner-peel-tl { top: 0; left: 0; }
.corner-peel-bl { bottom: 0; left: 0; }

.corner-peel-hint {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: none;
    pointer-events: none;
}

.corner-peel-tr .corner-peel-hint {
    top: 0; right: 0;
    border-width: 0 44px 44px 0;
    border-color: transparent #FFFFFF transparent transparent;
    filter: drop-shadow(-4px 4px 6px rgba(0,0,0,0.35));
}
.corner-peel-tr:hover .corner-peel-hint {
    opacity: 1;
    border-width: 0 60px 60px 0;
}

.corner-peel-br .corner-peel-hint {
    bottom: 0; right: 0;
    border-width: 0 0 44px 44px;
    border-color: transparent transparent #FFFFFF transparent;
    filter: drop-shadow(-4px -4px 6px rgba(0,0,0,0.35));
}
.corner-peel-br:hover .corner-peel-hint {
    opacity: 1;
    border-width: 0 0 60px 60px;
}

.corner-peel-tl .corner-peel-hint {
    top: 0; left: 0;
    border-width: 44px 44px 0 0;
    border-color: #FFFFFF transparent transparent transparent;
    filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.35));
}
.corner-peel-tl:hover .corner-peel-hint {
    opacity: 1;
    border-width: 60px 60px 0 0;
}

.corner-peel-bl .corner-peel-hint {
    bottom: 0; left: 0;
    border-width: 44px 0 0 44px;
    border-color: transparent transparent transparent #FFFFFF;
    filter: drop-shadow(4px -4px 6px rgba(0,0,0,0.35));
}
.corner-peel-bl:hover .corner-peel-hint {
    opacity: 1;
    border-width: 60px 0 0 60px;
}

.flipbook-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 10;
}
.pageflip-engine{height:min(72vh,820px)!important;max-height:820px;margin:auto;transition:transform .2s ease}.pageflip-engine canvas{filter:drop-shadow(0 18px 28px rgba(0,0,0,.32))}.pageflip-engine .stf__item{background:#fff}.pageflip-engine img{object-fit:contain;background:#fff}@media(max-width:859px){.pageflip-engine{height:min(68vh,720px)!important;width:100%!important}}

.flipbook-nav-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%) scale(1.08);
}

.flipbook-nav-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.flipbook-nav-btn.btn-prev {
    left: var(--space-4);
}

.flipbook-nav-btn.btn-next {
    right: var(--space-4);
}

.flipbook-toolbar {
    background: rgba(15, 15, 15, 0.9);
    padding: var(--space-3) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.flipbook-toolbar-controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.flipbook-zoom-controls { display:flex; align-items:center; gap:4px; }
.flipbook-zoom-controls .flipbook-tool-btn { min-width:36px; justify-content:center; padding-inline:9px; }
.flipbook-zoom-controls .flipbook-zoom-value { min-width:58px; font-variant-numeric:tabular-nums; }

.flipbook-tool-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: background var(--transition-fast);
}

.flipbook-tool-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.flipbook-page-indicator {
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.9);
}

.flipbook-thumbnails {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding: var(--space-4);
    background: #111111;
    scrollbar-width: thin;
}

.flipbook-thumb {
    width: 60px;
    height: 80px;
    flex-shrink: 0;
    border-radius: var(--radius-xs);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all var(--transition-fast);
}

.flipbook-thumb.active,
.flipbook-thumb:hover {
    opacity: 1;
    border-color: var(--color-primary);
}

.flipbook-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* PDF Embed Fallback View */
.pdf-viewer-container {
    width: 100%;
    height: 80vh;
    border: none;
    border-radius: var(--radius-lg);
    background: #f0f0f0;
}

@media (max-width: 768px) {
    .flipbook-viewer-stage {
        min-height: 400px;
    }

    .flipbook-nav-btn {
        width: 38px;
        height: 38px;
    }

    .flipbook-nav-btn.btn-prev {
        left: var(--space-2);
    }

    .flipbook-nav-btn.btn-next {
        right: var(--space-2);
    }

    .flipbook-page-image {
        max-height: 55vh;
    }
    .flipbook-container { padding-inline: 12px; }
    .catalog-header-bar { align-items:flex-start; }
    .catalog-actions { width:100%; }
    .catalog-actions .btn { width:100%; justify-content:center; }
    .flipbook-toolbar { padding:10px 12px; }
    .flipbook-toolbar-controls { width:100%; justify-content:space-between; }
    .flipbook-tool-btn span { display:none; }
}

@media (max-width: 859px) {
    .flipbook-viewport { padding: 18px 54px; }
    .flipbook-leaf { width: min(72vw, 430px); height: auto; max-height: 66vh; }
    .flipbook-turning-leaf { width: 100%; }
}

@media (max-width: 430px) {
    .flipbook-container{padding:0 8px 24px}
    .catalog-header-bar{padding:12px 4px;margin-bottom:8px}
    .catalog-header-bar h1{font-size:1.15rem}
    .flipbook-viewer-stage{min-height:0;border-radius:10px;background:#181512}
    .flipbook-viewport{padding:8px 36px;min-height:0;flex:none;height:min(62svh,540px)}
    .pageflip-engine{height:100%!important;min-height:0!important;max-height:none!important;box-shadow:0 10px 30px rgba(0,0,0,.45)}
    .flipbook-book::after{display:none}
    .flipbook-leaf { width:min(76vw,390px); }
    .flipbook-nav-btn.btn-prev { left:4px; }.flipbook-nav-btn.btn-next { right:4px; }
    .flipbook-toolbar{gap:8px;padding:9px 10px}
    .flipbook-toolbar-controls{width:auto;margin-left:auto;gap:5px}
    .flipbook-zoom-controls{display:none}
    .flipbook-page-indicator{font-size:.8rem}
    .flipbook-tool-btn{width:38px;height:36px;padding:0;justify-content:center}
    .flipbook-thumbnails{padding:8px;gap:6px}
    .flipbook-thumb{width:48px;height:66px}
}

@media (prefers-reduced-motion: reduce) {
    .flipbook-turning-leaf { animation: none !important; }
}

@media (max-width: 768px) {
    .flipbook-viewer-stage:fullscreen,.flipbook-viewer-stage:-webkit-full-screen{display:grid;width:100vw;height:100svh;min-height:100svh;grid-template-rows:minmax(0,1fr) auto auto;overflow:hidden;border-radius:0}
    .flipbook-viewer-stage:fullscreen .flipbook-viewport,.flipbook-viewer-stage:-webkit-full-screen .flipbook-viewport{width:100%;height:auto;min-height:0;padding:8px 42px;overflow:hidden}
    .flipbook-viewer-stage:fullscreen .pageflip-engine,.flipbook-viewer-stage:-webkit-full-screen .pageflip-engine{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;min-height:0!important;transform:none!important}
    .flipbook-viewer-stage:fullscreen .flipbook-toolbar,.flipbook-viewer-stage:-webkit-full-screen .flipbook-toolbar{flex-wrap:nowrap;padding:8px 10px}
    .flipbook-viewer-stage:fullscreen .flipbook-thumbnails,.flipbook-viewer-stage:-webkit-full-screen .flipbook-thumbnails{max-height:76px;padding:6px}
    .flipbook-viewer-stage:fullscreen .flipbook-thumb,.flipbook-viewer-stage:-webkit-full-screen .flipbook-thumb{width:42px;height:58px}
}