/* =========================================================================
 * Yaprakzade — Auto-Fit Image System (Phase 533)
 *
 * Tüm sergilenen ve gelecekteki admin-eklenen görseller container'a otomatik
 * sığar. Logo/ikonlar etkilenmez — `.yz-no-fit` veya `.no-fit` class'ı ile
 * opt-out edilebilir.
 *
 * Stratejisi:
 *   1. `.yz-fit` utility class — helper output'larından otomatik gelir
 *   2. Bilinen card/banner/hero container'larda `img` defaultu `cover`
 *   3. `<picture>` etiketi block layout + img kapsayıcıya tam dolar
 *   4. aspect-ratio kayma yok — container yüksekliği belli, CLS=0
 * ========================================================================= */

/* ============ UTILITY CLASS ============ */
.yz-fit,
img.yz-fit,
picture.yz-fit img,
.yz-fit > img,
.yz-fit > picture > img {
 width: 100% !important;
 height: 100% !important;
 max-width: 100% !important;
 object-fit: cover;
 object-position: center;
 display: block;
}

/* `.yz-fit-contain` — logo / belge / amblem için */
.yz-fit-contain,
img.yz-fit-contain,
.yz-fit-contain > img,
.yz-fit-contain > picture > img {
 width: 100% !important;
 height: 100% !important;
 max-width: 100%;
 object-fit: contain;
 object-position: center;
 display: block;
}

/* Picture etiketi default block — yoksa picture inline ve içerideki img cover yansımıyor */
picture { display: block; }
picture.yz-fit, picture:has(> img.yz-fit) {
 width: 100%; height: 100%;
}

/* ============ BİLİNEN CONTAINER'LARDA AUTO-COVER ============ */
/* Bu container'lardaki img'ler `class` set etmemiş olsa bile cover olur */
.product-card img,
.product-card picture img,
.blog-card img,
.blog-card picture img,
.card3d-wrap img,
.card3d-wrap picture img,
.yz-cinema__bg img,
.cat-hero img,
.cat-hero picture img,
.hero-slide img,
.hero-slide picture img,
.yz-hero-media img,
.yz-hero-media picture img,
.yz-hero-slide img,
.yz-hero-slide picture img,
.yp-prod-slider__item img,
.yp-prod-slider__item picture img,
.gallery-tile img,
.gallery-tile picture img,
.yz-edi-img img,
.yz-edi-img picture img,
.yz-edi-img > picture {
 width: 100% !important;
 height: 100% !important;
 max-width: 100% !important;
 object-fit: cover;
 object-position: center;
 display: block;
}

/* product-card: aspect-ratio güvenli yüksekliği — variant'lar farklı boyutta olsa
   bile slider/grid kartlar sabit yükseklik tutar. */
.product-card .yz-prod-img,
.product-card > .picture,
.product-card .product-image-wrap,
.product-card picture:first-child {
 aspect-ratio: 4 / 3;
 overflow: hidden;
 background: rgba(0,0,0,.04);
}

/* blog-card kapak — 16:9 standart */
.blog-card .cover,
.blog-card > picture:first-child,
.blog-card .blog-card-img {
 aspect-ratio: 16 / 9;
 overflow: hidden;
 background: rgba(0,0,0,.04);
}

/* Banner / hero — fixed height var (340px / 480px), picture'ın sadece yüksekliği almasını
   sağla; absolute positioning halinde de bozulmasın */
.cat-hero picture,
.hero-slide picture,
.yz-hero-slide picture {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
}

/* ============ OPT-OUT ============ */
.yz-no-fit,
.no-fit,
img.no-fit,
img.yz-no-fit,
.no-fit img,
.yz-no-fit img {
 width: auto !important;
 height: auto !important;
 object-fit: initial !important;
 max-width: 100%;
}

/* Logo + ikon defaults — explicit .yz-fit verilmediyse normal davranır */
.logo img,
.header-logo img,
.footer-logo img,
.brand-logo img,
.yz-logo img,
[class*="-logo"] img,
img[alt*="logo" i] {
 width: auto;
 height: auto;
 max-width: 100%;
 object-fit: contain;
}

/* ============ ADMIN PANEL ============ */
/* Admin tablo preview thumbnail'ları sabit kutuda center-fit */
.admin-thumb,
.admin-image-preview,
.admin-panel img.thumb {
 width: 64px;
 height: 64px;
 object-fit: cover;
 border-radius: 8px;
 background: rgba(0,0,0,.04);
}