/* ==========================================================================
   media-fit.css — gorselleri sabit oranli kutulara kirpmadan oturtma
   ==========================================================================

   SORUN
   Slider ve haber gorsel kutulari sabit orandadir (slider 16/9), yuklenen
   gorseller ise her zaman tam o oranda gelmiyor. Ornegin 2560x1440 istenip
   1600x800 (= 2.00) yuklendiginde, main.css'teki `object-fit: cover` kutuyu
   doldurmak icin gorselin saginda ve solunda toplam %11'ini kesiyordu.

   COZUM
   Uc secenek var ve ucu ayni anda saglanamaz:
     cover   -> kutuyu doldurur, tasani KESER
     contain -> kesmez, kutuda BOSLUK birakir
     fill    -> kesmez, bosluk birakmaz, gorseli ESNETIR

   Oran farki kucukken esnetme gozle secilmez (2.00 -> 1.78 yaklasik %11'lik
   bir esneme), bu yuzden bu durumda `fill` kullaniyoruz: gorselin tamami
   gorunur ve kutu tamamen dolar. Fark buyukse (dikey gorsel, panorama)
   esnetme gorseli belirgin bozacagi icin `cover`a duseriz.

   Karari sunucu veriyor; hangi sinifin yazilacagini media_fit_class() secer.
   bkz. app/helpers.php ve App\Support\ImageRatio

   NOT
   Gorsel dogru oranda (slider icin 16/9) yuklendiginde her iki sinif da ayni
   sonucu verir: ne kirpma ne esneme olur. Kalici cozum gorselleri istenen
   oranda yuklemektir; bu dosya yalnizca oran tutmadiginda devreye girer.

   Bu dosya main.css'ten SONRA yuklenmelidir; main.css'teki cover kurallari
   cok uzun secici zincirleri kullandigi icin !important gerekiyor.
   ========================================================================== */

.media-fit > img,
.media-fit > video {
    display: block;
    width: 100% !important;
    height: 100% !important;
    -o-object-position: center center !important;
    object-position: center center !important;
}

/* Oran farki kucuk: gorsel kutuya esnetilerek oturur. Hicbir yeri kesilmez,
   kutuda bosluk kalmaz. */
.media-fit.mf-stretch > img,
.media-fit.mf-stretch > video {
    -o-object-fit: fill !important;
    object-fit: fill !important;
}

/* Oran farki buyuk: esnetmek gorseli bozardi, kutuyu doldurup tasani keseriz. */
.media-fit.mf-cover > img,
.media-fit.mf-cover > video {
    -o-object-fit: cover !important;
    object-fit: cover !important;
}

/* --------------------------------------------------------------------------
   Haber gorsel kutularinin orani sabitleniyor.

   Bu kutularin yuksekligi piksel/yuzde olarak sabitti, genisligi ise izgaraya
   gore degistigi icin ORANLARI ekran genisligine gore 1.76 ile 2.34 arasinda
   kayiyordu. Oran kaydikca esnetme miktari da ongorulemez hale geliyor
   (16/9 bir gorsel 2.34'luk bir kutuda %31 esner, bu artik goze carpar).

   Kutulari 16/9'a sabitleyince hem esnetme miktari her ekranda ayni ve kucuk
   kaliyor, hem de gorsellerin dogru olcu ile yuklenmesi (2560x1440) her
   kirilma noktasinda tam sonuc veriyor.

   Kart olculeri pratikte degismiyor: masaustunde buyuk kart gorseli 360px
   yerine ~364px, kucuk kart gorseli 160px yerine ~163px oluyor.
   -------------------------------------------------------------------------- */
article .section-news .container .section-news-grid-row
    .grid-col-news-slider-wrapper .news-slider.owl-carousel.owl-theme
    .item .img-wrapper.media-fit {
    height: auto !important;
    aspect-ratio: 16 / 9;
}

/* Gorsel alani orana gore kuculdugunde kalan yeri metin kutusu alsin;
   kartin toplam yuksekligi (600px) degismesin. */
article .section-news .container .section-news-grid-row
    .grid-col-news-slider-wrapper .news-slider.owl-carousel.owl-theme
    .item .news-content-box {
    height: auto !important;
    flex: 1 1 auto;
    min-height: 0;
}

article .section-news .container .section-news-grid-row
    .grid-col-other-news-wrapper .news-card-item
    .news-card-image-wrapper.media-fit {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9;
}

/* --------------------------------------------------------------------------
   main.css'teki cover kurallarinin ezilmesi.

   main.css'te @media (max-width: 768px) icinde su kural var:
       .slide .main-slider .item .img-fluid { object-fit: cover !important }
   Seciciligi yukaridaki .media-fit kurallarindan yuksek oldugu icin MOBILDE
   kirpma geri geliyordu (masaustunde boyle bir kural yok, bu yuzden sorun
   yalnizca kucuk ekranlarda gorunuyordu). Asagidaki seciciler daha spesifik
   olacak sekilde yazildi.
   -------------------------------------------------------------------------- */
.slide .main-slider .item.media-fit.mf-stretch > img,
.slide .main-slider .item.media-fit.mf-stretch > video {
    -o-object-fit: fill !important;
    object-fit: fill !important;
}

.slide .main-slider .item.media-fit.mf-cover > img,
.slide .main-slider .item.media-fit.mf-cover > video {
    -o-object-fit: cover !important;
    object-fit: cover !important;
}