/* KS Görsel widget'ı (v2.430.0, 9 Eyl 2026) — YALNIZ YAPI. Renk, punto,
 * yükseklik, dolgu, köşe, gölge, ikon boyu hepsi widget Biçim sekmesinden
 * ({{WRAPPER}} seçicileri + --ks-badge-offset / --ks-badge-icon / --ks-media-ratio
 * / --ks-media-zoom değişkenleri). Rozet köşesi cihaz bazlı prefix sınıfı. */
.ks-media { position: relative; display: block; overflow: hidden; line-height: 0; --ks-badge-offset: 8px; }
.ks-media__link { display: block; }
/* v2.466.0: ORAN ÇERÇEVEDE (.ks-media__frame), görselde DEĞİL. <img>'e aspect-ratio
 * (auto bile) yazmak width/height etiket ipucunu siler → tembel görsel WP'nin
 * contain-intrinsic-size yer tutucusuyla 1500px oluyordu. Çerçeve: oran auto iken
 * yüksekliği içerik (görselin kendi oranı); oran seçiliyken kutu, görsel %100 doldurur,
 * sığdırma/odak widget'tan (object-fit/position). Özgüllük 3 sınıf: eski
 * `.ks-loop-card .ks-loop-media img {height:auto}` kuralını yener. */
/* 🚨 2 sınıf özgüllük şart (v2.466.2): Elementor EDİTÖR önizlemesi `.swiper-slide a {display:inline}`
 * basar; çerçeve <a> olunca satır içine düşüyor, satır içi kutuda aspect-ratio İŞLEMEZ → editörde
 * oran değişmiyor görünüyordu (canlıda o kural yok). */
.ks-media .ks-media__frame, .ks-media .ks-media__link { display: block; }
.ks-media__frame { display: block; position: relative; aspect-ratio: var(--ks-media-ratio, auto); overflow: hidden; }
.ks-media .ks-media__frame .ks-media__img { display: block; width: 100%; height: 100%; box-sizing: border-box; object-fit: cover; object-position: center center; }
.ks-media__img { display: block; width: 100%; height: auto; box-sizing: border-box; }
.ks-media-hover-zoom .ks-media__img { transition: transform .35s ease; }
.ks-media-hover-zoom .ks-media:hover .ks-media__img { transform: scale(var(--ks-media-zoom, 1.06)); }
.ks-media--empty { line-height: 1.3; font-size: .8em; color: #999; font-style: italic; }

/* Rozet katmanı: mutlak konum, tıklamayı görsele bırakır. */
.ks-media__badges { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; max-width: calc(100% - 2 * var(--ks-badge-offset)); line-height: 1.25; }
.ks-media__badge { display: inline-flex; align-items: center; max-width: 100%; box-sizing: border-box; white-space: nowrap; --ks-badge-icon: 1.7em; }
.ks-media__badge-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: var(--ks-badge-icon); line-height: 1; }
.ks-media__badge-icon svg { width: var(--ks-badge-icon); height: var(--ks-badge-icon); fill: currentColor; display: block; }
.ks-media__badge-text { overflow: hidden; text-overflow: ellipsis; }

/* Kargo Bedava BANDI (v2.430.1): görselin alt kenarında tam genişlik; `below`
 * modunda akışta görselin hemen altında. Görünüm widget'tan. */
.ks-media__band { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: center; box-sizing: border-box; pointer-events: none; white-space: nowrap; overflow: hidden; line-height: 1.2; --ks-badge-icon: 1.4em; }
.ks-media-band-below .ks-media__band { position: static; }
.ks-media__band-text { overflow: hidden; text-overflow: ellipsis; }

/* Görünürlük anahtarları (Elementor boş değere sınıf basmaz → "evet yoksa gizle"). */
.elementor-widget-ks-media:not(.ks-media-discount-yes) .ks-media__badge--discount { display: none !important; }
.elementor-widget-ks-media:not(.ks-media-fs-yes) .ks-media__badge--fs, .elementor-widget-ks-media:not(.ks-media-fs-yes) .ks-media__band { display: none !important; }
.elementor-widget-ks-media:not(.ks-media-hl-yes) .ks-media__badge--hl { display: none !important; }
.elementor-widget-ks-media:not(.ks-media-icons-yes) .ks-media__badge-icon { display: none !important; }

/* ── Masaüstü ── */
.ks-media-badges-top-left .ks-media__badges { top: var(--ks-badge-offset); left: var(--ks-badge-offset); right: auto; bottom: auto; align-items: flex-start; }
.ks-media-badges-top-right .ks-media__badges { top: var(--ks-badge-offset); right: var(--ks-badge-offset); left: auto; bottom: auto; align-items: flex-end; }
.ks-media-badges-bottom-left .ks-media__badges { bottom: var(--ks-badge-offset); left: var(--ks-badge-offset); right: auto; top: auto; align-items: flex-start; }
.ks-media-badges-bottom-right .ks-media__badges { bottom: var(--ks-badge-offset); right: var(--ks-badge-offset); left: auto; top: auto; align-items: flex-end; }

/* ── laptop (≤1366px) ── */
@media (max-width: 1366px) {
	.ks-media-badges-laptop-top-left .ks-media__badges { top: var(--ks-badge-offset); left: var(--ks-badge-offset); right: auto; bottom: auto; align-items: flex-start; }
	.ks-media-badges-laptop-top-right .ks-media__badges { top: var(--ks-badge-offset); right: var(--ks-badge-offset); left: auto; bottom: auto; align-items: flex-end; }
	.ks-media-badges-laptop-bottom-left .ks-media__badges { bottom: var(--ks-badge-offset); left: var(--ks-badge-offset); right: auto; top: auto; align-items: flex-start; }
	.ks-media-badges-laptop-bottom-right .ks-media__badges { bottom: var(--ks-badge-offset); right: var(--ks-badge-offset); left: auto; top: auto; align-items: flex-end; }
}

/* ── tablet (≤1024px) ── */
@media (max-width: 1024px) {
	.ks-media-badges-tablet-top-left .ks-media__badges { top: var(--ks-badge-offset); left: var(--ks-badge-offset); right: auto; bottom: auto; align-items: flex-start; }
	.ks-media-badges-tablet-top-right .ks-media__badges { top: var(--ks-badge-offset); right: var(--ks-badge-offset); left: auto; bottom: auto; align-items: flex-end; }
	.ks-media-badges-tablet-bottom-left .ks-media__badges { bottom: var(--ks-badge-offset); left: var(--ks-badge-offset); right: auto; top: auto; align-items: flex-start; }
	.ks-media-badges-tablet-bottom-right .ks-media__badges { bottom: var(--ks-badge-offset); right: var(--ks-badge-offset); left: auto; top: auto; align-items: flex-end; }
}

/* ── mobile (≤767px) ── */
@media (max-width: 767px) {
	.ks-media-badges-mobile-top-left .ks-media__badges { top: var(--ks-badge-offset); left: var(--ks-badge-offset); right: auto; bottom: auto; align-items: flex-start; }
	.ks-media-badges-mobile-top-right .ks-media__badges { top: var(--ks-badge-offset); right: var(--ks-badge-offset); left: auto; bottom: auto; align-items: flex-end; }
	.ks-media-badges-mobile-bottom-left .ks-media__badges { bottom: var(--ks-badge-offset); left: var(--ks-badge-offset); right: auto; top: auto; align-items: flex-start; }
	.ks-media-badges-mobile-bottom-right .ks-media__badges { bottom: var(--ks-badge-offset); right: var(--ks-badge-offset); left: auto; top: auto; align-items: flex-end; }
}