/* =====================================================================
   layout-stability.css  —  CLS (Cumulative Layout Shift) alan rezervasyonu
   ---------------------------------------------------------------------
   Amac: sayfa ilk boyandiginda her elemanin kaplayacagi ALAN belli olsun.

   Google Search Console 2026-08: /urun grubunda mobil CLS 0.40 (68.519 URL),
   esik 0.25. Yerinde olcum (412px, mobil UA, /urun/bmw-mavi-antifiriz...):
   CLS 0.427 — bunun 0.373'u OwlCarousel'in init aninda acilmasi.

   Bu dosya RENDER-BLOCKING yuklenir (_LayoutRoot.cshtml); yalnizca boyut
   rezervasyonu yapar, gorsel tasarim tanimlamaz.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) img-ratio / data-ratio  —  JS ile atanan yukseklik yerine CSS
   ---------------------------------------------------------------------
   site.js setRatio()/setImgRatio() her [data-ratio] icin
   height = width / ratio hesaplayip JS ile atiyor. jQuery + site.bundle.js
   `defer` oldugu icin bu ilk boyamadan sonra calisiyor; o ana kadar
   kapsayici 0px yukseklikte kaliyor, sonra birden aciliyor.

   Oran semantigi: height = width / ratio  =>  ratio = width / height
   =>  CSS `aspect-ratio: <ratio>` (birimsiz = w/h) birebir ayni deger.   */

.img-ratio {
    aspect-ratio: var(--img-ratio, auto);
}

.img-ratio[data-ratio="1"] { aspect-ratio: 1; }
.img-ratio[data-ratio="0.9"] { aspect-ratio: 0.9; }
.img-ratio[data-ratio="0.8571"] { aspect-ratio: 0.8571; }
.img-ratio[data-ratio="1.5"] { aspect-ratio: 1.5; }
.img-ratio[data-ratio="1.7"] { aspect-ratio: 1.7; }
.img-ratio[data-ratio="1.74468085"] { aspect-ratio: 1.74468085; }
.img-ratio[data-ratio="3.02"] { aspect-ratio: 3.02; }

/* image-fit tag helper'in urettigi <img data-ratio="...">.
   Helper artik inline `aspect-ratio` de basiyor; bu kurallar cache'lenmis
   eski ciktilar icin yedek. */
img[data-ratio] { height: auto; }
img[data-ratio="1"] { aspect-ratio: 1; }
img[data-ratio="0.9"] { aspect-ratio: 0.9; }
img[data-ratio="0.8571"] { aspect-ratio: 0.8571; }
img[data-ratio="1.5"] { aspect-ratio: 1.5; }
img[data-ratio="1.7"] { aspect-ratio: 1.7; }
img[data-ratio="1.74468085"] { aspect-ratio: 1.74468085; }
img[data-ratio="3.02"] { aspect-ratio: 3.02; }

/* ---------------------------------------------------------------------
   2) OwlCarousel  —  init oncesi alan rezervasyonu   (EN BUYUK KAZANIM)
   ---------------------------------------------------------------------
   owl.carousel.css `.owl-carousel{display:none}` + `.owl-loaded{display:block}`
   tanimlar. Owl JS `defer` ile yuklendiginden carousel alani ilk boyamada
   0px; init olunca birden aciliyor ve altindaki her sey asagi kayiyor
   (olculdu: /urun mobil, h1 y=161 -> y=589, shift 0.3732).

   Cozum: init oncesi flex satiri olarak goster; item genisligini Owl'un
   kendi hesabiyla ayni tut. site.js initOwlCarousels() responsive config:
     <600px  : items 2  (product-images/home-slider 1, home-bycar 1.5), margin 10
     >=600px : items 2  (product-images 1), margin 20
     >=1000px: items = data-items, margin 30
   Owl item genisligi = konteyner/items - margin, saginda margin kadar bosluk. */

.owl-carousel:not(.owl-loaded) {
    display: flex !important;
    flex-wrap: nowrap;
    overflow: hidden;
}

.owl-carousel:not(.owl-loaded) > * {
    flex: 0 0 calc(100% / 2 - 10px);
    margin-right: 10px;
    min-width: 0;
}

#product-images:not(.owl-loaded) > *,
#home-slider:not(.owl-loaded) > * {
    flex: 0 0 calc(100% - 10px);
}

#home-bycar:not(.owl-loaded) > * {
    flex: 0 0 calc(100% / 1.5 - 10px);
}

@media (min-width: 600px) {
    .owl-carousel:not(.owl-loaded) > * {
        flex: 0 0 calc(100% / 2 - 20px);
        margin-right: 20px;
    }

    #product-images:not(.owl-loaded) > * {
        flex: 0 0 calc(100% - 20px);
    }

    #home-slider:not(.owl-loaded) > *,
    #home-bycar:not(.owl-loaded) > * {
        flex: 0 0 calc(100% / 2 - 20px);
    }
}

@media (min-width: 1000px) {
    .owl-carousel:not(.owl-loaded) > * {
        margin-right: 30px;
    }

    .owl-carousel:not(.owl-loaded)[data-items="1"] > *,
    #product-images:not(.owl-loaded) > * {
        flex: 0 0 calc(100% - 30px);
    }

    .owl-carousel:not(.owl-loaded)[data-items="2"] > *,
    #home-slider:not(.owl-loaded)[data-items="2"] > *,
    #home-bycar:not(.owl-loaded)[data-items="2"] > * {
        flex: 0 0 calc(100% / 2 - 30px);
    }

    .owl-carousel:not(.owl-loaded)[data-items="3"] > *,
    #home-slider:not(.owl-loaded)[data-items="3"] > *,
    #home-bycar:not(.owl-loaded)[data-items="3"] > * {
        flex: 0 0 calc(100% / 3 - 30px);
    }

    .owl-carousel:not(.owl-loaded)[data-items="4"] > *,
    #home-slider:not(.owl-loaded)[data-items="4"] > *,
    #home-bycar:not(.owl-loaded)[data-items="4"] > * {
        flex: 0 0 calc(100% / 4 - 30px);
    }

    .owl-carousel:not(.owl-loaded)[data-items="5"] > *,
    #home-slider:not(.owl-loaded)[data-items="5"] > *,
    #home-bycar:not(.owl-loaded)[data-items="5"] > * {
        flex: 0 0 calc(100% / 5 - 30px);
    }

    .owl-carousel:not(.owl-loaded)[data-items="6"] > *,
    #home-slider:not(.owl-loaded)[data-items="6"] > *,
    #home-bycar:not(.owl-loaded)[data-items="6"] > * {
        flex: 0 0 calc(100% / 6 - 30px);
    }
}

/* ---------------------------------------------------------------------
   3) Ikon fontlari  —  CSS'leri bilincli olarak async (FCP icin)
   ---------------------------------------------------------------------
   FontAwesome (80KB, gec yukleniyor) ve Bootstrap Icons (jsDelivr, 3.taraf)
   render-blocking yapilmadi. Bunun yerine ikonun kaplayacagi genislik
   onceden rezerve edilir, boylece CSS gelince yanindaki metin kaymaz.    */

.fa, .fas, .far, .fab,
.fa-solid, .fa-regular, .fa-brands {
    display: inline-block;
    min-width: 1em;
    line-height: 1;
}

[class^="bi-"], [class*=" bi-"] {
    display: inline-block;
    min-width: 1em;
}

/* ---------------------------------------------------------------------
   4) AJAX ile gelen breadcrumb  (urun detay)
   ---------------------------------------------------------------------
   #navBreadCrumb icerigi window.load + 100ms sonra /product/getBreadCrumb
   ile dolduruluyor (sorgu agir oldugu icin kasitli olarak kritik yolun
   disinda). Gelene kadar 0px yer kapliyor, gelince altindaki her sey
   (urun gorseli dahil) 37px asagi kayiyor — olculen shift 0.0345.

   Olculen gercek degerler: <ol class="breadcrumb"> yuksekligi 21px,
   margin-bottom 16px. Bu 16px nav'in disina tasar (margin collapse) ve
   hemen ardindaki .product-images-container .my-3 (16px) ile yeniden
   collapse olur -> nav'dan sonraki bosluk her iki durumda da AYNI kalir.
   Bu yuzden rezerve edilmesi gereken YALNIZ ol'un kendi yuksekligi: 21px.
   (Ilk denemede 37px rezerve edildi -> 16px fazla, gorsel yukari kaydi;
   canary olcumu bunu yakaladi.)                                          */

#navBreadCrumb:empty {
    min-height: 21px;
}