/* Webboll Showcase — tam ekran sunum (v2.0) */

.wbsc-clickable .wbsc-card-media { cursor: pointer; }

/* Kapsam seçici */
.wbsc-scope-chooser {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
}
.wbsc-scope-box {
    background: #fff; border-radius: 14px; padding: 28px;
    display: flex; flex-direction: column; gap: 12px; min-width: 300px;
    text-align: center;
}
.wbsc-scope-box h3 { margin: 0 0 8px; }
.wbsc-scope-box button {
    padding: 12px 18px; border-radius: 8px; border: none; cursor: pointer;
    font-size: 15px; font-weight: 600;
}
.wbsc-scope-filtered, .wbsc-scope-all { background: #2563eb; color: #fff; }
.wbsc-scope-cancel { background: #f3f4f6; color: #374151; }

/* Overlay */
.wbsc-fs-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: #0b0b0f; overflow: hidden;
}
.wbsc-fs-close {
    position: absolute; top: 18px; right: 22px; z-index: 10;
    background: rgba(255,255,255,0.12); color: #fff; border: none;
    width: 44px; height: 44px; border-radius: 50%; font-size: 26px; cursor: pointer;
    line-height: 1;
}
.wbsc-fs-close:hover { background: rgba(255,255,255,0.25); }

.wbsc-fs-stage { position: absolute; inset: 0; }

.wbsc-fs-counter {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.7); font-size: 14px; z-index: 10;
}

.wbsc-fs-nav {
    position: absolute; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.6); font-size: 22px; cursor: pointer; z-index: 10;
    user-select: none; transition: color 0.2s;
}
.wbsc-fs-nav:hover { color: #fff; }
.wbsc-fs-prev-item { top: 16px; }
.wbsc-fs-next-item { bottom: 44px; }

/* Panel */
.wbsc-fs-panel {
    position: absolute; inset: 0;
    display: grid; grid-template-columns: 1.4fr 1fr;
}
@media (max-width: 900px) {
    .wbsc-fs-panel { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
}

.wbsc-fs-media { position: relative; overflow: hidden; background: #000; }
.wbsc-fs-noimg { width: 100%; height: 100%; background: #1a1a1f; }

.wbsc-fs-img {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
}

.wbsc-fs-info {
    padding: 48px 44px; color: #fff; overflow-y: auto;
    display: flex; flex-direction: column; justify-content: center;
    background: #14141a;
}
.wbsc-fs-title { font-size: 30px; margin: 0 0 10px; color: #fff; }
.wbsc-fs-sku { color: #9ca3af; margin-bottom: 10px; }
.wbsc-fs-price { font-size: 26px; font-weight: 700; color: #60a5fa; margin-bottom: 18px; }
.wbsc-fs-fields { display: flex; flex-direction: column; gap: 8px; }
.wbsc-fs-field { font-size: 15px; line-height: 1.5; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 6px; }
.wbsc-fs-label { color: #9ca3af; }

/* Görsel ok + nokta */
.wbsc-fs-img-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    background: rgba(0,0,0,0.4); color: #fff; border: none;
    width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 18px;
}
.wbsc-fs-img-prev { left: 16px; }
.wbsc-fs-img-next { right: 16px; }
.wbsc-fs-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 5; }
.wbsc-fs-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); }
.wbsc-fs-dot.active { background: #fff; }

/* Overlay metin konumları */
.wbsc-fs-caption { position: absolute; max-width: 70%; z-index: 4; line-height: 1.3; }
.wbsc-pos-top-left { top: 24px; left: 24px; }
.wbsc-pos-top-center { top: 24px; left: 50%; transform: translateX(-50%); text-align: center; }
.wbsc-pos-top-right { top: 24px; right: 24px; text-align: right; }
.wbsc-pos-middle-left { top: 50%; left: 24px; transform: translateY(-50%); }
.wbsc-pos-middle-center { top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }
.wbsc-pos-middle-right { top: 50%; right: 24px; transform: translateY(-50%); text-align: right; }
.wbsc-pos-bottom-left { bottom: 24px; left: 24px; }
.wbsc-pos-bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); text-align: center; }
.wbsc-pos-bottom-right { bottom: 24px; right: 24px; text-align: right; }

/* === Ürün geçiş efektleri (panel giriş) === */
.wbsc-fs-panel { opacity: 0; transition: all 0.6s cubic-bezier(0.22,1,0.36,1); }
.wbsc-fs-panel.wbsc-fs-active { opacity: 1; }

/* slide */
.wbsc-scroll-slide.wbsc-enter-down { transform: translateY(100%); }
.wbsc-scroll-slide.wbsc-enter-up { transform: translateY(-100%); }
.wbsc-scroll-slide.wbsc-fs-active { transform: translateY(0); }
.wbsc-scroll-slide.wbsc-leave-down { transform: translateY(-100%); opacity: 0; }
.wbsc-scroll-slide.wbsc-leave-up { transform: translateY(100%); opacity: 0; }
/* fade */
.wbsc-scroll-fade { transition: opacity 0.6s ease; }
.wbsc-scroll-fade.wbsc-leave-down, .wbsc-scroll-fade.wbsc-leave-up { opacity: 0; }
/* zoom */
.wbsc-scroll-zoom.wbsc-enter-down, .wbsc-scroll-zoom.wbsc-enter-up { transform: scale(0.85); }
.wbsc-scroll-zoom.wbsc-fs-active { transform: scale(1); }
.wbsc-scroll-zoom.wbsc-leave-down, .wbsc-scroll-zoom.wbsc-leave-up { transform: scale(1.15); opacity: 0; }
/* flip */
.wbsc-scroll-flip.wbsc-enter-down, .wbsc-scroll-flip.wbsc-enter-up { transform: rotateX(90deg); }
.wbsc-scroll-flip.wbsc-fs-active { transform: rotateX(0); }
.wbsc-scroll-flip.wbsc-leave-down, .wbsc-scroll-flip.wbsc-leave-up { transform: rotateX(-90deg); opacity: 0; }
/* cover */
.wbsc-scroll-cover.wbsc-enter-down { transform: translateY(100%); }
.wbsc-scroll-cover.wbsc-enter-up { transform: translateY(-100%); }
.wbsc-scroll-cover.wbsc-fs-active { transform: translateY(0); }
/* reveal */
.wbsc-scroll-reveal.wbsc-enter-down, .wbsc-scroll-reveal.wbsc-enter-up { clip-path: inset(100% 0 0 0); }
.wbsc-scroll-reveal.wbsc-fs-active { clip-path: inset(0 0 0 0); }
/* rotate */
.wbsc-scroll-rotate.wbsc-enter-down, .wbsc-scroll-rotate.wbsc-enter-up { transform: rotate(8deg) scale(0.8); }
.wbsc-scroll-rotate.wbsc-fs-active { transform: rotate(0) scale(1); }
.wbsc-scroll-rotate.wbsc-leave-down, .wbsc-scroll-rotate.wbsc-leave-up { transform: rotate(-8deg) scale(0.8); opacity: 0; }
/* parallax */
.wbsc-scroll-parallax.wbsc-enter-down { transform: translateY(60%); }
.wbsc-scroll-parallax.wbsc-enter-up { transform: translateY(-60%); }
.wbsc-scroll-parallax.wbsc-fs-active { transform: translateY(0); }

/* === Görsel geçiş efektleri === */
.wbsc-fs-img { opacity: 0; transition: all 0.5s ease; }
.wbsc-fs-img.wbsc-img-active { opacity: 1; }
.wbsc-img-slide { transform: translateX(40px); }
.wbsc-img-slide.wbsc-img-active { transform: translateX(0); }
.wbsc-img-fade { transition: opacity 0.6s ease; }
.wbsc-img-zoom { transform: scale(1.1); }
.wbsc-img-zoom.wbsc-img-active { transform: scale(1); }
.wbsc-img-flip { transform: rotateY(90deg); }
.wbsc-img-flip.wbsc-img-active { transform: rotateY(0); }
/* kitap sayfası çevirme */
.wbsc-fs-media { perspective: 2000px; }
.wbsc-img-pageflip {
    transform-origin: left center;
    transform: rotateY(-100deg);
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transition: transform 0.7s cubic-bezier(0.3,0.7,0.4,1), box-shadow 0.7s ease;
    backface-visibility: hidden;
    z-index: 2;
}
.wbsc-img-pageflip.wbsc-img-active {
    transform: rotateY(0deg);
    box-shadow: -20px 0 40px rgba(0,0,0,0.35);
}
.wbsc-img-pageflip.wbsc-img-leave {
    transform-origin: left center;
    transform: rotateY(-100deg) !important;
    opacity: 1 !important;
    box-shadow: -20px 0 40px rgba(0,0,0,0.35);
    z-index: 3;
}
.wbsc-img-blur { filter: blur(20px); }
.wbsc-img-blur.wbsc-img-active { filter: blur(0); }
.wbsc-img-kenburns.wbsc-img-active { animation: wbsc-kenburns 8s ease-out forwards; }
@keyframes wbsc-kenburns { from { transform: scale(1); } to { transform: scale(1.15); } }
.wbsc-img-leave { opacity: 0 !important; }

/* === Görsel filtreleri === */
.wbsc-fs-filter-grayscale .wbsc-fs-img { filter: grayscale(1); }
.wbsc-fs-filter-sepia .wbsc-fs-img { filter: sepia(0.7); }
.wbsc-fs-filter-brightness .wbsc-fs-img { filter: brightness(1.15); }
.wbsc-fs-filter-contrast .wbsc-fs-img { filter: contrast(1.2); }
.wbsc-fs-filter-saturate .wbsc-fs-img { filter: saturate(1.4); }