/* ==========================================================================
   Rev: Performans P1 | 29.09.2026
   <head> içinde, stylesheet.css'ten hemen sonra yüklenir: kurallar sayfa ilk çizilmeden geçerli olur.
   ========================================================================== */

/* 1) Anasayfa banner slider'ı (tek slaytlık Owl) - Owl JS ile kurulmadan önce de ilk slayt görünsün.
      Owl'un temel CSS'i .owl-carousel'i kurulana kadar display:none tutuyor; bu yüzden LCP görseli
      tüm JS indirilip $(document).ready çalışana kadar görünmüyordu. Yalnızca kurulum öncesi
      (:not(.owl-loaded)) ve yalnızca .anasayfa_tek_slider için geçerlidir; kurulumdan sonra Owl'un
      kendi kuralları devreye girer. Görsel ölçüleri banner.twig'deki kurulum sonrası kurallarla aynıdır. */
.anasayfa_tek_slider.owl-carousel:not(.owl-loaded) {
    display: block;
    /* Owl kurulunca yükseklik en uzun slayta göre ayarlanıyor; kurulumdan önce de aynı alan ayrılır
       (değer banner_content.twig'de slaytların boyutlarından hesaplanıyor). Değişken yoksa etkisiz. */
    aspect-ratio: var(--mls-pre-ratio, auto);
}

.anasayfa_tek_slider.owl-carousel:not(.owl-loaded) > .banner-slide:not(:first-child) {
    display: none;
}

.anasayfa_tek_slider.owl-carousel:not(.owl-loaded) img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 1025px) {
    .desktop-only .anasayfa_tek_slider.owl-carousel:not(.owl-loaded) img {
        height: 344px;
        object-fit: cover;
    }
}

/* 3) Rev: Performans P2 | 29.09.2026 - Anasayfa ürün slider'ları (Yeni Gelenler / Çok Satanlar).
      Sunucuda Owl'un "kurulmuş" hali masaüstü değerleriyle (ör. width:200px; margin-right:20px) yazılıyor;
      mobilde Owl kurulunca öğeler ekran genişliğine büyüyor, kartlar uzuyor ve altındaki her şey itiliyordu (CLS).
      Owl kurulana kadar (.mls-prerender, kurulumdan hemen sonra JS ile kaldırılır) öğe genişliği Owl'un
      hesaplayacağı değere eşitlenir. Yalnızca iki modülün ayarlarının kesin aynı olduğu aralıklarda:
      <480px -> 1 öğe, >=1024px -> 4 öğe (ikisinde de margin:0). Aradaki genişliklerde davranış değişmez. */
.ulUrunSlider.mls-prerender .owl-stage-outer {
    container-type: inline-size;
}

/* Hazır markup'taki sabit .owl-stage genişliği (7200px) daha geniş öğelerle çok ürünlü slider'ı iki satıra
   kırıyordu; kurulum öncesi şerit genişliği içeriğe göre olur (tek satır). Kurulumda Owl kendi genişliğini yazar. */
.ulUrunSlider.mls-prerender .owl-stage {
    width: max-content !important;
}

@media (max-width: 479px) {
    .ulUrunSlider.mls-prerender .owl-item {
        width: 100cqw !important;
        margin-right: 0 !important;
    }
}

@media (min-width: 1024px) {
    .ulUrunSlider.mls-prerender .owl-item {
        width: 25cqw !important;
        margin-right: 0 !important;
    }
}

/* 2) Anasayfa - yeni banner modülü varken eski mobil tek görsel bloğu (#resimblok_3) baştan gizli olsun.
      Eskiden banner modülünün sonundaki <style> / $(document).ready ile SONRADAN gizleniyordu:
      blok önce görünüp sonra kaybolduğu için büyük sayfa kayması (CLS) oluşuyordu.
      :has() desteklemeyen eski tarayıcılarda banner.twig'deki mevcut kural aynen çalışmaya devam eder. */
@media (max-width: 767px) {
    body:has(.mls-managed-banner) #resimblok_3.mobile-only {
        display: none !important;
    }
}

/* 4) Rev: Performans P2 | 29.09.2026 - Masaüstü menü (.navigation) font yüklenene kadar display:none kalıyordu;
   500ms sonra açılınca header 48px büyüyüp tüm sayfayı itiyordu (CLS). menu.twig'deki inline script aynı koşulla
   (clientWidth > 1041) .mls-nav-reserve ekler: menü yine görünmez ama yeri baştan ayrılır. */
.navigation.mls-nav-reserve:not(.loadedFont) {
    display: block;
    visibility: hidden;
}