/* ============================================================
   SLIDER — GÖRSELE GÖRE OTOMATİK UYUM
   ------------------------------------------------------------
   includes/page_slider.php her slider için:
     • çerçeve oranını  --sl-ratio  (genişlik / yükseklik) olarak yazar
       (yüklenen görsellerin baskın oranından; güvenli aralığa sıkıştırılmış)
     • her slayta data-fit="cover" | "contain" verir:
         cover   → görsel oranı çerçeveye yakın (±%12): alanı doldurur
         contain → oran belirgin farklı: görselin TAMAMI görünür (kırpma yok)
                   ve boşluklar aynı görselin bulanık haliyle (.slide-bg) dolar
   Kullanıldığı yerler: index.php, slots.php, live-casino.php
   (masaüstü .modern-slider ve mobil .mobile-slider). Sticky "kompakt"
   mod (slots/live-casino'da aşağı kaydırınca) includes/sticky_promo.php'de
   yüksekliği sabitler; bu dosya o durumda da bozulmadan çalışır.

   theme.css / theme.purple.css / theme.red.css'ten SONRA yüklenir; tüm
   tasarımlarda (Gold / Purple / Red) ortak çalışır.
   ============================================================ */

/* ── Çerçeve: oran görselden gelir ── */
html body .modern-slider {
    aspect-ratio: var(--sl-ratio, 3.3103) !important;
    max-height: 78vh;
    background: #0a0a0a;
}
html body .mobile-slider {
    aspect-ratio: var(--sl-ratio, 1.7778) !important;
    max-height: 70vh;
}

/* ── Slayt ── */
html body .slide-item {
    background-color: #0b0d12;
    background-image: none !important;
    overflow: hidden;
}
/* Yüklenirken (henüz görsel inmemişken) Gold Shimmer + ortada dönen altın halka */
html body .slide-item.is-loading {
    background-color: #0b0d12 !important;
    background-image: linear-gradient(
        110deg,
        rgba(13, 15, 20, 0.96) 22%,
        rgba(201, 169, 125, 0.16) 48%,
        rgba(13, 15, 20, 0.96) 74%
    ) !important;
    background-size: 220% 100% !important;
    animation: slShimmerSweep 1.35s linear infinite !important;
}
html body .slide-item.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    margin-top: -19px;
    margin-left: -19px;
    border-radius: 50%;
    border: 2.5px solid rgba(201, 169, 125, 0.20);
    border-top-color: #d9bc8e;
    box-shadow: 0 0 18px rgba(201, 169, 125, 0.25);
    animation: slSpinRing 0.75s linear infinite;
    z-index: 3;
    pointer-events: none;
}
@keyframes slShimmerSweep {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes slSpinRing {
    to { transform: rotate(360deg); }
}

/* Banner üzerindeki koyu degrade görseli kirletiyordu (içinde zaten yazı/CTA var) */
html body .slide-item::before {
    display: none !important;
    content: none !important;
}

html body .slide-item .slide-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-position: center center;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;   /* tıklama / sürükleme .slide-item üzerinde kalır */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale3d(1.045, 1.045, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0s;
}
html body .slide-item.is-loaded .slide-media {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale3d(1, 1, 1);
}
html body .slide-item[data-fit="cover"]   .slide-media { object-fit: cover; }
html body .slide-item[data-fit="contain"] .slide-media { object-fit: contain; z-index: 1; }

/* Bulanık dolgu — yalnızca contain slaytlarda */
html body .slide-item .slide-bg {
    position: absolute;
    inset: -40px;
    background-size: cover;
    background-position: center center;
    filter: blur(26px) saturate(1.2) brightness(.62);
    -webkit-filter: blur(26px) saturate(1.2) brightness(.62);
    transform: translateZ(0);
    pointer-events: none;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1);
}
html body .slide-item.is-loaded .slide-bg {
    opacity: 1 !important;
    visibility: visible !important;
}
html body .slide-item.is-cached .slide-media,
html body .slide-item.is-cached .slide-bg {
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale3d(1, 1, 1) !important;
}

/* ── Noktalar: degrade kalktığı için her görselde okunur hap zemini ── */
html body .modern-slider-wrapper .slider-dots,
html body .mobile-slider-wrapper .slider-dots {
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .38);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
html body .modern-slider-wrapper .slider-dots .dot,
html body .mobile-slider-wrapper .slider-dots .dot {
    padding: 0;
}
@media (max-width: 600px) {
    html body .modern-slider-wrapper .slider-dots { padding: 5px 8px; }
}
@media (max-width: 768px) {
    html body .mobile-slider-wrapper .slider-dots { bottom: 8px; padding: 4px 8px; }
}

/* ── Slots / Canlı casino: aşağı kaydırınca kompakt şerit (sticky_promo.php) ── */
html body .jp-pinned-wrap.jp-stuck .modern-slider,
html body .jp-pinned-wrap.jp-stuck .mobile-slider {
    max-height: none;
}
html body .jp-pinned-wrap.jp-stuck .slide-item .slide-bg {
    filter: blur(14px) saturate(1.2) brightness(.62);
    -webkit-filter: blur(14px) saturate(1.2) brightness(.62);
}
html body .jp-pinned-wrap.jp-stuck .slider-dots {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}