/* =====================================================================
   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;
}

/* ---------------------------------------------------------------------
   5) Anasayfa urun karuselleri (05.10.2026)
   ---------------------------------------------------------------------
   "One Cikan / Haftanin Firsatlari / Indirime Gore" /common/GetCarouselProducts
   ile AJAX geliyor; gelene kadar yer tutucu yalniz spinner kadar (~134 px).
   1920x1080'de ilk karusel ekranin alt kenarinda -> dolunca alttaki bolumu
   itiyordu (olculen 0,034). Rezerv, karuselin olculen DOLU yuksekliginin
   biraz alti (fazlasi bosluk birakir, eksigi kucuk bir itme):
     >=1400: 618-635 · 1200-1399: 585-602 · 992-1199: 560-577 · <992: 546-563
   Yukleme bitince .loading kalkar, kutu dogal yuksekligine doner.         */
.data-load.loading.oyp-home-carousel { min-height: 546px; }
@media (min-width: 992px)  { .data-load.loading.oyp-home-carousel { min-height: 560px; } }
@media (min-width: 1200px) { .data-load.loading.oyp-home-carousel { min-height: 585px; } }
@media (min-width: 1400px) { .data-load.loading.oyp-home-carousel { min-height: 618px; } }

/* ---------------------------------------------------------------------
   6) Statik gorsellerde width/height nitelikleri (05.10.2026)
   ---------------------------------------------------------------------
   Views'taki ~150 yerel ikon/logo <img>'e GERCEK boyutlari nitelik olarak
   eklendi: tarayici gorsel inmeden yerini ayirir (once 0 px'ti; baslik logosu
   ve garaj ikonu inince baslik 8 px uzayip sayfayi itiyordu, altbilgi/hesap
   menusu ikonlari da ayni sekilde).
   Bu kural niteligi yalniz ORAN olarak kullandirir: CSS bir gorsele yalniz
   genislik veriyorsa (ör. mobil logo) height niteligi gorseli basiklastirmasin.
   :where() -> ozgulluk 0: yuksekligi acikca veren her CSS kurali kazanir.   */
/* Yuzdelik nitelik (width="100%" height="100%", ör. image-fit yer tutucusu) HARIC: orada yukseklik
   kasitli olarak kabin yuzdesi (canary'de /kategoriler mobil: dislanmayinca 0,02 kayma uretti). */
:where(img[src^="/img/"][width][height]:not([height*="%"]):not([width*="%"])) { height: auto; }

/* ---------------------------------------------------------------------
   7) Cloudflare Turnstile kutusu (giris / uye ol / sifremi unuttum / SMS)
   ---------------------------------------------------------------------
   data-size="flexible" kutu 65 px yuksekliginde ama betik (async) gelip
   iframe'i cizene kadar kap 0 px -> altindaki "Giris Yap" ve diger dugmeler
   ~1,9 sn'de 79 px itiliyordu (canary mobil /giris-yap 0,017). Site anahtari
   bos basildiginda (Turnstile kapali) kutu cizilmez -> rezerv de yok.      */
.cf-turnstile[data-sitekey]:not([data-sitekey=""]) { min-height: 65px; }