/* ─────────────────────────────────────────────────────────────────────────────
   Aluflip — Ana Stil Dosyası
   Gerçekçi 3D sayfa çevirme + kağıt dokusu + gölge efektleri
───────────────────────────────────────────────────────────────────────────── */

/* ── Temel Kapsayıcı ──────────────────────────────────────────────────────── */
.aluflip-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.3);
    user-select: none;
    -webkit-user-select: none;
}

.aluflip-container:focus { outline: none; }

/* ── Tam Ekran ────────────────────────────────────────────────────────────── */
.aluflip-fullscreen {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
}
.aluflip-fullscreen .aluflip-stage { height: calc(100vh - 60px) !important; }

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.aluflip-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    height: 52px;
    z-index: 10;
    gap: 6px;
}

.aluflip-toolbar-left,
.aluflip-toolbar-right { display: flex; align-items: center; gap: 4px; }
.aluflip-toolbar-center { display: flex; align-items: center; gap: 8px; font-size: 14px; }

.aluflip-btn {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.2;
    transition: background .2s, transform .15s;
    min-width: 32px;
}
.aluflip-btn:hover  { background: rgba(255,255,255,.25); transform: scale(1.08); }
.aluflip-btn:active { transform: scale(.96); }
.aluflip-btn:disabled { opacity: .35; cursor: default; transform: none; }

.aluflip-page-input {
    width: 44px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(0,0,0,.3);
    color: #fff;
    border-radius: 4px;
    padding: 3px 4px;
    font-size: 13px;
}
.aluflip-page-input::-webkit-outer-spin-button,
.aluflip-page-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Sahne ────────────────────────────────────────────────────────────────── */
.aluflip-stage {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 2500px;
    overflow: hidden;
}

/* ── KİTAP ────────────────────────────────────────────────────────────────── */
.aluflip-book {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 80%;
    height: 88%;
    transform-style: preserve-3d;
    transition: transform .3s ease;
}

/* ── Sayfa (Sol / Sağ) ────────────────────────────────────────────────────── */
.aluflip-page-left,
.aluflip-page-right {
    position: relative;
    flex: 1;
    height: 100%;
    transform-style: preserve-3d;
    overflow: hidden;
}

/* Sol sayfanın sağ kenarı, sağ sayfanın sol kenarı kesmez */
.aluflip-page-left  { border-radius: 4px 0 0 4px; }
.aluflip-page-right { border-radius: 0 4px 4px 0; }

/* Kağıt dokusu */
.aluflip-page-inner {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Kağıt arka yüz rengi */
.aluflip-page-inner-back {
    background-color: #f8f4ee;
    transform: rotateY(180deg);
}

/* ── 3D Çevirme Animasyonları ─────────────────────────────────────────────── */
/* v2.5.0: Statik kardeş sayfa kilidi.
   Bir sayfa çevrilirken (.aluflip-flipping eklendiğinde), karşı tarafın
   statik sayfası kesinlikle hareket etmemeli. Aksi halde tarayıcının
   transform/transition'ı flip eden kardeşten miras alabiliyor. */
.aluflip-book .aluflip-page-left.aluflip-flipping ~ .aluflip-page-right:not(.aluflip-flipping),
.aluflip-book .aluflip-page-right.aluflip-flipping ~ .aluflip-page-left:not(.aluflip-flipping),
.aluflip-book:has(.aluflip-flipping) .aluflip-page-left:not(.aluflip-flipping),
.aluflip-book:has(.aluflip-flipping) .aluflip-page-right:not(.aluflip-flipping) {
    transform: none !important;
    transform-origin: initial !important;
    animation: none !important;
    transition: none !important;
}

/* İLERİ çevirme — sağ sayfa soldan kapanır */
.aluflip-page-right.aluflip-flip-forward {
    transform-origin: left center;
    animation: flipForwardAnim .65s cubic-bezier(.645,.045,.355,1) forwards;
}

@keyframes flipForwardAnim {
    0%   { transform: rotateY(0deg);    box-shadow: 0 0 0 transparent; }
    30%  { transform: rotateY(-45deg);  box-shadow: -18px 0 40px rgba(0,0,0,.3); }
    70%  { transform: rotateY(-130deg); box-shadow: -22px 0 45px rgba(0,0,0,.35); }
    100% { transform: rotateY(-180deg); box-shadow: 0 0 0 transparent; }
}

/* GERİ çevirme — sol sayfa sağdan kapanır */
.aluflip-page-left.aluflip-flip-backward {
    transform-origin: right center;
    animation: flipBackwardAnim .65s cubic-bezier(.645,.045,.355,1) forwards;
}

@keyframes flipBackwardAnim {
    0%   { transform: rotateY(0deg);    box-shadow: 0 0 0 transparent; }
    30%  { transform: rotateY(45deg);   box-shadow: 18px 0 40px rgba(0,0,0,.3); }
    70%  { transform: rotateY(130deg);  box-shadow: 22px 0 45px rgba(0,0,0,.35); }
    100% { transform: rotateY(180deg);  box-shadow: 0 0 0 transparent; }
}

/* ── Cilt (Spine) ─────────────────────────────────────────────────────────── */
.aluflip-spine {
    width: 16px;
    background: linear-gradient(90deg, #5a3e2b 0%, #8b6349 30%, #c4956a 50%, #8b6349 70%, #5a3e2b 100%);
    box-shadow: inset 0 0 8px rgba(0,0,0,.6), 0 0 12px rgba(0,0,0,.4);
    flex-shrink: 0;
    border-radius: 1px;
}

/* ── Kağıt Gölgesi ────────────────────────────────────────────────────────── */
.aluflip-page-shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
    z-index: 5;
}

.aluflip-shadow-left  { left: 0;  background: linear-gradient(to right, rgba(0,0,0,.4), transparent); }
.aluflip-shadow-right { right: 0; background: linear-gradient(to left,  rgba(0,0,0,.4), transparent); }
.aluflip-page-shadow.aluflip-shadow-active { opacity: 1; }

/* ── Köşe Kıvrılma Efekti ─────────────────────────────────────────────────── */
.aluflip-corner-right,
.aluflip-corner-left {
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    z-index: 20;
    cursor: pointer;
    transition: all .3s ease;
}

.aluflip-corner-right {
    right: 0;
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent transparent rgba(200,180,160,.6) transparent;
}

.aluflip-corner-left {
    left: 0;
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent transparent rgba(200,180,160,.6) transparent;
}

.aluflip-corner-right.aluflip-corner-hover,
.aluflip-corner-right.aluflip-corner-active {
    border-width: 0 0 55px 55px;
    filter: drop-shadow(-3px -3px 5px rgba(0,0,0,.3));
}

.aluflip-corner-left.aluflip-corner-hover,
.aluflip-corner-left.aluflip-corner-active {
    border-width: 0 55px 55px 0;
    border-color: transparent rgba(200,180,160,.6) transparent transparent;
    filter: drop-shadow(3px -3px 5px rgba(0,0,0,.3));
}

/* ── Küçük Resim Paneli ───────────────────────────────────────────────────── */
.aluflip-thumbnails-panel {
    height: 90px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.3) transparent;
    padding: 8px 12px;
    background: rgba(0,0,0,.25);
    border-top: 1px solid rgba(255,255,255,.1);
}

.aluflip-thumbnails-panel::-webkit-scrollbar { height: 4px; }
.aluflip-thumbnails-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 2px; }

.aluflip-thumbnails-inner {
    display: flex;
    gap: 8px;
    height: 100%;
    align-items: center;
}

.aluflip-thumb {
    flex-shrink: 0;
    width: 54px;
    height: 70px;
    background-size: cover;
    background-position: center;
    border-radius: 3px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .2s, transform .2s, box-shadow .2s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

.aluflip-thumb:hover { transform: scale(1.08); border-color: rgba(255,255,255,.6); }
.aluflip-thumb.active { border-color: #f0a500; box-shadow: 0 0 10px rgba(240,165,0,.6); }

.aluflip-thumb span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: rgba(0,0,0,.5);
    color: #fff;
    font-size: 10px;
    padding: 2px 0;
}

/* ── Loading ──────────────────────────────────────────────────────────────── */
.aluflip-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: inherit;
    z-index: 100;
    transition: opacity .3s;
    color: rgba(255,255,255,.8);
}

.aluflip-spinner {
    width: 42px;
    height: 42px;
    border: 4px solid rgba(255,255,255,.2);
    border-top-color: rgba(255,255,255,.8);
    border-radius: 50%;
    animation: aluflipSpin .8s linear infinite;
    margin-bottom: 12px;
}

@keyframes aluflipSpin { to { transform: rotate(360deg); } }

/* ── Temalar ──────────────────────────────────────────────────────────────── */

/* KOYU */
.aluflip-skin-dark .aluflip-toolbar { background: linear-gradient(180deg, #16213e 0%, #0f3460 100%); }
.aluflip-skin-dark .aluflip-stage   { background: radial-gradient(ellipse at center, #1e2d40 0%, #0a0a14 100%); }
.aluflip-skin-dark .aluflip-page-left,
.aluflip-skin-dark .aluflip-page-right { box-shadow: 0 4px 20px rgba(0,0,0,.6); }

/* AÇIK */
.aluflip-skin-light .aluflip-toolbar { background: linear-gradient(180deg, #f0f0f0 0%, #dcdcdc 100%); }
.aluflip-skin-light .aluflip-toolbar .aluflip-btn { color: #333; border-color: rgba(0,0,0,.2); background: rgba(0,0,0,.07); }
.aluflip-skin-light .aluflip-toolbar .aluflip-btn:hover { background: rgba(0,0,0,.15); }
.aluflip-skin-light .aluflip-stage   { background: radial-gradient(ellipse at center, #e8e8e8 0%, #c0c0c0 100%); }
.aluflip-skin-light .aluflip-thumbnails-panel { background: rgba(0,0,0,.08); border-top-color: rgba(0,0,0,.1); }
.aluflip-skin-light .aluflip-page-input { background: rgba(0,0,0,.1); color: #333; }
.aluflip-skin-light .aluflip-toolbar-center { color: #333; }

/* AHŞAP */
.aluflip-skin-wood .aluflip-toolbar {
    background: linear-gradient(180deg, #5c3d2e 0%, #3e2723 100%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%235c3d2e'/%3E%3Crect x='0' y='0' width='2' height='2' fill='%23613f2d' opacity='0.4'/%3E%3C/svg%3E");
}
.aluflip-skin-wood .aluflip-stage {
    background: radial-gradient(ellipse at center, #8d6e63 0%, #4e342e 100%);
}
.aluflip-skin-wood .aluflip-thumbnails-panel { background: rgba(62,39,35,.6); }
.aluflip-skin-wood .aluflip-spine {
    background: linear-gradient(90deg, #3e2723 0%, #6d4c41 30%, #a1887f 50%, #6d4c41 70%, #3e2723 100%);
}

/* ── Kağıt Dokusu Katmanı ─────────────────────────────────────────────────── */
.aluflip-page-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: .06;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .aluflip-book { width: 95%; }
    .aluflip-btn  { padding: 4px 7px; font-size: 14px; min-width: 28px; }
    .aluflip-thumb { width: 44px; height: 58px; }
    .aluflip-thumbnails-panel { height: 76px; }
    .aluflip-spine { width: 10px; }
}

@media (max-width: 480px) {
    .aluflip-book { width: 100%; border-radius: 0; }
    .aluflip-stage { perspective: 1200px; }
    .aluflip-toolbar { height: 44px; padding: 0 6px; }
}

/* ── Hata Mesajı ──────────────────────────────────────────────────────────── */
.aluflip-error {
    padding: 16px 20px;
    background: #ffeeba;
    border: 1px solid #ffc107;
    border-radius: 6px;
    color: #856404;
    font-size: 14px;
    text-align: center;
}

/* ── 1.0.1 erişilebilirlik ve arama iyileştirmeleri ─────────────────────── */
.aluflip-container:focus,
.aluflip-container:focus-visible {
    outline: 2px solid rgba(240,165,0,.9);
    outline-offset: 3px;
}

.aluflip-btn:focus-visible,
.aluflip-thumb:focus-visible,
.aluflip-page-input:focus-visible,
.aluflip-search-input:focus-visible {
    outline: 2px solid rgba(240,165,0,.95);
    outline-offset: 2px;
}

.aluflip-search-input {
    max-width: 160px;
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(0,0,0,.25);
    color: #fff;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
}

.aluflip-search-input::placeholder { color: rgba(255,255,255,.7); }
.aluflip-skin-light .aluflip-search-input { background: rgba(255,255,255,.8); color: #333; border-color: rgba(0,0,0,.2); }
.aluflip-skin-light .aluflip-search-input::placeholder { color: rgba(0,0,0,.55); }

.aluflip-search-status {
    font-size: 12px;
    min-width: 56px;
    color: rgba(255,255,255,.8);
}
.aluflip-skin-light .aluflip-search-status { color: #333; }

.aluflip-thumb {
    border: 2px solid transparent;
    appearance: none;
    padding: 0;
}

.aluflip-page-failed::before {
    content: '⚠';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9a3412;
    font-size: 34px;
    background: #fff7ed;
}

.aluflip-page-left.aluflip-effect-soft,
.aluflip-page-right.aluflip-effect-soft {
    animation-duration: .42s !important;
}

.aluflip-stage { touch-action: pan-y; }

@media (max-width: 768px) {
    .aluflip-toolbar { flex-wrap: wrap; height: auto; min-height: 52px; padding: 6px 8px; }
    .aluflip-toolbar-center { order: 3; width: 100%; justify-content: center; }
    .aluflip-search-input { max-width: 130px; }
}

@media (prefers-reduced-motion: reduce) {
    .aluflip-page-right.aluflip-flip-forward,
    .aluflip-page-left.aluflip-flip-backward {
        animation-duration: .01ms !important;
    }
    .aluflip-book,
    .aluflip-btn,
    .aluflip-thumb,
    .aluflip-corner-left,
    .aluflip-corner-right {
        transition-duration: .01ms !important;
    }
}

/* ── 2.0.0 WebGL katmanı ─────────────────────────────────────────────────── */
.aluflip-webgl-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    transition: opacity .16s ease;
}

.aluflip-webgl-canvas.aluflip-webgl-active {
    opacity: 1;
}

.aluflip-page-left.aluflip-effect-webgl,
.aluflip-page-right.aluflip-effect-webgl {
    animation-duration: .65s !important;
}

/* ── Aluflip 2.0 fizik kıvrımı katmanı ─────────────────────────────────────── */
.aluflip-webgl-canvas.aluflip-physics-active {
    opacity: 1;
    z-index: 35;
    filter: drop-shadow(0 16px 24px rgba(0,0,0,.28));
}

.aluflip-page-left.aluflip-effect-physics,
.aluflip-page-right.aluflip-effect-physics {
    animation-duration: .86s !important;
}

.aluflip-page-left.aluflip-effect-physics .aluflip-page-inner-front,
.aluflip-page-right.aluflip-effect-physics .aluflip-page-inner-front {
    opacity: .82;
}

/* ── Lightbox / kapakla açma modu ─────────────────────────────────────────── */
.aluflip-lightbox-launcher {
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
}

.aluflip-lightbox-open {
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    text-align: center;
}

.aluflip-lightbox-cover {
    width: 180px;
    height: 240px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 16px 36px rgba(0,0,0,.35), 8px 0 0 rgba(0,0,0,.12) inset;
    transform: perspective(900px) rotateY(-8deg);
    transition: transform .2s ease, box-shadow .2s ease;
}

.aluflip-lightbox-open:hover .aluflip-lightbox-cover,
.aluflip-lightbox-open:focus-visible .aluflip-lightbox-cover {
    transform: perspective(900px) rotateY(-3deg) translateY(-2px);
    box-shadow: 0 22px 46px rgba(0,0,0,.42), 8px 0 0 rgba(0,0,0,.12) inset;
}

.aluflip-lightbox-label {
    font-weight: 700;
    font-size: 15px;
}

.aluflip-lightbox[hidden] { display: none; }

.aluflip-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.aluflip-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.78);
    backdrop-filter: blur(3px);
}

.aluflip-lightbox-panel {
    position: relative;
    width: min(96vw, 1180px);
    max-height: 94vh;
    z-index: 1;
}

.aluflip-lightbox-panel .aluflip-container {
    max-width: 100% !important;
}

.aluflip-lightbox-close {
    position: absolute;
    right: -14px;
    top: -14px;
    z-index: 5;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #111827;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

html.aluflip-modal-active { overflow: hidden; }

/* ── 2.1 Edge Preview Curl ───────────────────────────────────────────────── */
.aluflip-page-right.aluflip-edge-preview {
    animation: aluflipEdgePeekR 0.6s ease forwards;
}
.aluflip-page-left.aluflip-edge-preview {
    animation: aluflipEdgePeekL 0.6s ease forwards;
}

@keyframes aluflipEdgePeekR {
    0%   { transform: rotateY(0deg); }
    60%  { transform: rotateY(-8deg); }
    100% { transform: rotateY(-5deg); }
}
@keyframes aluflipEdgePeekL {
    0%   { transform: rotateY(0deg); }
    60%  { transform: rotateY(8deg); }
    100% { transform: rotateY(5deg); }
}

.aluflip-page-right.aluflip-edge-preview { transform-origin: left center; }
.aluflip-page-left.aluflip-edge-preview  { transform-origin: right center; }

/* ── 2.1 Enhanced Spine Glow ─────────────────────────────────────────────── */
.aluflip-spine {
    position: relative;
}
.aluflip-spine::after {
    content: '';
    position: absolute;
    inset: 8% 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.08) 30%,
        rgba(255,255,255,0.14) 50%,
        rgba(255,255,255,0.08) 70%,
        transparent 100%
    );
    pointer-events: none;
}

/* ── 2.1 Page Inner Edge Gradient ────────────────────────────────────────── */
.aluflip-page-left .aluflip-page-inner-front::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to left, rgba(0,0,0,0.08), transparent);
    pointer-events: none;
    z-index: 1;
}
.aluflip-page-right .aluflip-page-inner-front::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);
    pointer-events: none;
    z-index: 1;
}

/* ── 2.1 Better Flip Keyframes ───────────────────────────────────────────── */
@keyframes flipForwardAnim {
    0%   { transform: rotateY(0deg);    box-shadow: 0 0 0 transparent; filter: brightness(1); }
    15%  { transform: rotateY(-22deg);  box-shadow: -10px 0 25px rgba(0,0,0,.18); filter: brightness(0.97); }
    40%  { transform: rotateY(-70deg);  box-shadow: -20px 0 45px rgba(0,0,0,.32); filter: brightness(0.92); }
    65%  { transform: rotateY(-120deg); box-shadow: -22px 0 50px rgba(0,0,0,.36); filter: brightness(0.88); }
    85%  { transform: rotateY(-160deg); box-shadow: -14px 0 30px rgba(0,0,0,.22); filter: brightness(0.94); }
    100% { transform: rotateY(-180deg); box-shadow: 0 0 0 transparent; filter: brightness(1); }
}

@keyframes flipBackwardAnim {
    0%   { transform: rotateY(0deg);    box-shadow: 0 0 0 transparent; filter: brightness(1); }
    15%  { transform: rotateY(22deg);   box-shadow: 10px 0 25px rgba(0,0,0,.18); filter: brightness(0.97); }
    40%  { transform: rotateY(70deg);   box-shadow: 20px 0 45px rgba(0,0,0,.32); filter: brightness(0.92); }
    65%  { transform: rotateY(120deg);  box-shadow: 22px 0 50px rgba(0,0,0,.36); filter: brightness(0.88); }
    85%  { transform: rotateY(160deg);  box-shadow: 14px 0 30px rgba(0,0,0,.22); filter: brightness(0.94); }
    100% { transform: rotateY(180deg);  box-shadow: 0 0 0 transparent; filter: brightness(1); }
}

/* ── 2.1 Drag Cursor ────────────────────────────────────────────────────── */
.aluflip-stage { cursor: grab; }
.aluflip-stage:active { cursor: grabbing; }


/* ── 2.2 Stabilization + UX polish ─────────────────────────────────────── */
.aluflip-stage {
    min-height: 320px;
    padding: 20px 24px 18px;
    box-sizing: border-box;
}

.aluflip-book {
    width: min(92%, calc(100% - 48px));
    max-width: calc(100% - 48px);
    height: calc(100% - 18px);
}

.aluflip-page-left,
.aluflip-page-right {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,245,239,0.98));
    box-shadow: 0 14px 32px rgba(0,0,0,.18);
}

.aluflip-page-left.aluflip-flipping,
.aluflip-page-right.aluflip-flipping {
    z-index: 4;
    overflow: visible;
}

.aluflip-page-inner {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.aluflip-page-inner-back {
    background-image: linear-gradient(135deg, rgba(255,255,255,.98), rgba(246,240,230,.98)), repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 1px, transparent 1px 11px);
    background-size: cover;
    background-position: center;
}

.aluflip-page-left .aluflip-page-inner-front,
.aluflip-page-right .aluflip-page-inner-front,
.aluflip-page-left .aluflip-page-inner-back,
.aluflip-page-right .aluflip-page-inner-back {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}

.aluflip-thumbnails-panel {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .28s ease, padding .28s ease, opacity .18s ease, border-color .28s ease;
    border-top-color: transparent;
}

.aluflip-thumbs-open .aluflip-thumbnails-panel {
    max-height: 130px;
    padding: 8px 12px;
    opacity: 1;
    overflow-x: auto;
    border-top-color: rgba(255,255,255,.1);
}

.aluflip-btn-thumbs.is-active {
    background: rgba(240,165,0,.2);
    border-color: rgba(240,165,0,.55);
    color: #ffd27a;
}

.aluflip-toolbar {
    gap: 10px;
}

.aluflip-toolbar-center {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}

.aluflip-search-input {
    width: min(180px, 26vw);
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    transition: width .2s ease, background .2s ease, border-color .2s ease;
}

.aluflip-search-input:focus {
    width: min(240px, 34vw);
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.35);
    outline: none;
}

.aluflip-page-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
}

.aluflip-container .aluflip-page-input {
    background: transparent;
    border: 0;
    min-width: 38px;
}

.aluflip-search-status {
    font-size: 12px;
    opacity: .85;
}

@media (max-width: 782px) {
    .aluflip-toolbar {
        flex-wrap: wrap;
        height: auto;
        padding: 10px;
    }

    .aluflip-toolbar-left,
    .aluflip-toolbar-right,
    .aluflip-toolbar-center {
        width: 100%;
        justify-content: center;
    }

    .aluflip-search-input,
    .aluflip-search-input:focus {
        width: min(240px, 100%);
    }

    .aluflip-stage {
        padding: 14px 10px 12px;
        min-height: 260px;
    }

    .aluflip-book {
        width: min(98%, calc(100% - 12px));
        max-width: calc(100% - 12px);
    }
}


/* ── 2.2.1 Live Drag Preview ───────────────────────────────────────────── */
.aluflip-stage {
    touch-action: pan-y;
}

.aluflip-drag-previewing .aluflip-webgl-canvas,
.aluflip-webgl-canvas.aluflip-drag-canvas {
    z-index: 12;
    pointer-events: none;
}

.aluflip-dragging-page {
    z-index: 6;
    overflow: visible;
    transition: none !important;
    will-change: transform, filter;
}

.aluflip-dragging-page .aluflip-page-inner-front {
    filter: brightness(.96) contrast(1.02);
}

.aluflip-drag-previewing .aluflip-corner-right,
.aluflip-drag-previewing .aluflip-corner-left {
    opacity: .85;
}

.aluflip-drag-previewing .aluflip-book {
    transition: none !important;
}


/* ── 2.2.2 Drag preview quality controls ───────────────────────────────── */
.aluflip-drag-previewing .aluflip-stage {
    cursor: grabbing;
}

.aluflip-dragging-page.aluflip-effect-css3d {
    transition: transform .08s linear;
    filter: brightness(.98);
}

.aluflip-drag-canvas.aluflip-drag-quality-low {
    image-rendering: auto;
}

.aluflip-drag-canvas.aluflip-drag-quality-high {
    filter: drop-shadow(0 18px 28px rgba(0,0,0,.22));
}

/* ── 2.3 WebGL Engine Adapter ──────────────────────────────────────────── */
.aluflip-stage {
    position: relative;
}

.aluflip-webgl-engine-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 8;
    pointer-events: none;
    opacity: 0;
    transition: opacity .08s linear;
}

.aluflip-webgl-engine-canvas.aluflip-webgl-engine-active {
    opacity: 1;
}

.aluflip-webgl-engine-running .aluflip-page-left.aluflip-flipping,
.aluflip-webgl-engine-running .aluflip-page-right.aluflip-flipping {
    opacity: 0;
}

.aluflip-webgl-engine-running .aluflip-corner-left,
.aluflip-webgl-engine-running .aluflip-corner-right {
    opacity: .25;
}

.aluflip-webgl-engine-running .aluflip-webgl-canvas.aluflip-webgl-active {
    opacity: 0;
}

/* ── 2.3.1 WebGL realtime drag texture curl ───────────────────────────── */
.aluflip-webgl-drag-armed .aluflip-webgl-engine-canvas,
.aluflip-webgl-engine-canvas.aluflip-webgl-engine-drag-active {
    z-index: 42;
    opacity: 1;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.24));
}

.aluflip-webgl-drag-texture .aluflip-dragging-page .aluflip-page-inner-front {
    opacity: .08;
    filter: brightness(.94) contrast(1.04);
}

.aluflip-webgl-drag-texture .aluflip-dragging-page {
    box-shadow: none !important;
}

.aluflip-webgl-drag-texture .aluflip-webgl-canvas.aluflip-drag-canvas {
    opacity: 0;
}

.aluflip-webgl-drag-texture .aluflip-spine {
    z-index: 3;
}


/* ── 2.3.3 Three3D Core Reset ─────────────────────────────────────────── */
.aluflip-three-canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 3;
    pointer-events: auto;
}

.aluflip-three-active .aluflip-book {
    opacity: 0;
    pointer-events: none;
}

.aluflip-three-active .aluflip-webgl-canvas,
.aluflip-three-active .aluflip-webgl-engine-canvas {
    display: none !important;
}

.aluflip-three-flipping .aluflip-stage {
    cursor: grabbing;
}


.aluflip-three-active .aluflip-stage {
    background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.09), rgba(0,0,0,.08) 58%, rgba(0,0,0,.16));
    overflow: hidden;
}

.aluflip-three-active .aluflip-page-left,
.aluflip-three-active .aluflip-page-right,
.aluflip-three-active .aluflip-spine {
    visibility: hidden;
}

.aluflip-three-active .aluflip-three-canvas {
    opacity: 1;
    transition: opacity .18s ease;
}


/* ── 2.3.4 Three3D Natural Book Scene ─────────────────────────────────── */
.aluflip-three-active.aluflip-container {
    box-shadow: 0 18px 55px rgba(15, 23, 42, .18), 0 6px 18px rgba(15, 23, 42, .10);
    border: 1px solid rgba(148, 163, 184, .22);
}

.aluflip-three-active .aluflip-stage {
    min-height: 520px;
    background:
        radial-gradient(ellipse at 50% 58%, rgba(15, 23, 42, .16) 0%, rgba(15, 23, 42, .05) 27%, rgba(15, 23, 42, 0) 54%),
        linear-gradient(180deg, #f9fafb 0%, #eef3f8 100%);
    overflow: hidden;
    isolation: isolate;
}

.aluflip-three-active.aluflip-skin-dark .aluflip-stage {
    background:
        radial-gradient(ellipse at 50% 58%, rgba(0,0,0,.34) 0%, rgba(0,0,0,.13) 28%, rgba(0,0,0,0) 56%),
        linear-gradient(180deg, #111827 0%, #020617 100%);
}

.aluflip-three-active .aluflip-three-canvas {
    z-index: 4;
    filter: saturate(1.03) contrast(1.015);
}

.aluflip-three-active .aluflip-toolbar {
    min-height: 46px;
    height: 46px;
    padding: 0 10px;
    background: rgba(15, 23, 42, .74);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.aluflip-three-active.aluflip-skin-light .aluflip-toolbar {
    background: rgba(255,255,255,.82);
    border-bottom: 1px solid rgba(15,23,42,.08);
}

.aluflip-three-active .aluflip-btn {
    border-radius: 999px;
    min-width: 30px;
    padding: 5px 9px;
}

.aluflip-three-active .aluflip-page-indicator {
    border-radius: 999px;
}

.aluflip-three-active .aluflip-search-input {
    border-radius: 999px;
}

.aluflip-three-active .aluflip-thumbnails-panel {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.aluflip-fullscreen.aluflip-three-active .aluflip-stage {
    height: calc(100vh - 46px) !important;
}

@media (max-width: 782px) {
    .aluflip-three-active .aluflip-stage {
        min-height: 360px;
    }

    .aluflip-three-active .aluflip-toolbar {
        height: auto;
        min-height: 46px;
    }
}

/* -- 2.3.6 Three3D real curl + corner drag -------------------------------- */
.aluflip-three-dragging .aluflip-stage,
.aluflip-three-flipping .aluflip-stage {
    cursor: grabbing;
}

.aluflip-three-dragging .aluflip-three-canvas {
    filter: saturate(1.05) contrast(1.025) drop-shadow(0 18px 32px rgba(15, 23, 42, .16));
}

.aluflip-three-active .aluflip-corner {
    z-index: 7;
}

.aluflip-three-active .aluflip-corner::after {
    opacity: .22;
}


/* v2.3.8 outer-half interaction polish */
.aluflip-edge-preview-strong .aluflip-page-inner-front,
.aluflip-edge-preview-strong .aluflip-page-inner-back {
    filter: brightness(1.025);
}
.aluflip-hover-forward .aluflip-corner-right,
.aluflip-hover-backward .aluflip-corner-left {
    opacity: 1;
    transform: scale(1.08);
}
.aluflip-three-active .aluflip-stage {
    cursor: default;
}


/* v2.3.9 gesture direction lock polish */
.aluflip-drag-previewing .aluflip-edge-preview {
    transition: none !important;
}


/* v2.4.1 lower-corner hover curl polish */
.aluflip-edge-preview-lower .aluflip-page-inner-front,
.aluflip-edge-preview-lower .aluflip-page-inner-back {
    filter: brightness(1.035) contrast(1.015);
}

.aluflip-hover-forward .aluflip-corner-right,
.aluflip-hover-backward .aluflip-corner-left {
    transform-origin: bottom center;
}

.aluflip-hover-forward .aluflip-corner-right::after,
.aluflip-hover-backward .aluflip-corner-left::after {
    opacity: .42;
}

/* ── 2.6.1 Direct PDF polish: cleaner frame and light PDF scene ─────────── */
.aluflip-pdf-mode.aluflip-container {
    background: #f3f4f6 !important;
}

.aluflip-pdf-mode.aluflip-three-active .aluflip-stage,
.aluflip-pdf-mode.aluflip-three-active.aluflip-skin-dark .aluflip-stage,
.aluflip-pdf-mode.aluflip-three-active.aluflip-skin-light .aluflip-stage {
    background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%) !important;
    min-height: 420px;
}

.aluflip-pdf-mode.aluflip-three-active .aluflip-three-canvas {
    filter: saturate(1.01) contrast(1.005);
}

.aluflip-pdf-mode .aluflip-page-inner {
    background-color: #ffffff;
}

.aluflip-pdf-mode .aluflip-loading {
    background: rgba(248,250,252,.94);
    color: #334155;
}

.aluflip-pdf-mode .aluflip-spinner {
    border-color: rgba(51,65,85,.18);
    border-top-color: rgba(51,65,85,.72);
}