/*
 * Etiketli görsel — ölçümler `data/mobil-anasayfa-oyuncak-cesitleri.md`
 * (17. bölüm) ve `data/mobil-anasayfa-yeni-koleksiyonlar.md` (21. bölüm).
 * Kutunun oranı, köşesi, yazı rengi ve etiket biçimi bölümden geliyor.
 */

/*
 * ÇERÇEVE — marka isteği ("görsellere siyah çerçeve"). Kalınlık ve renk
 * bölümden geliyor (`Görsel Çerçeve Kalınlığı` / `… Rengi`); 0 iken çizgi
 * görünmüyor.
 *
 * `box-sizing: border-box` ŞART: kutu `aspect-ratio` ile ölçülüyor ve
 * ızgara gözünün genişliğini alıyor. İçerik kutusu (varsayılan) kalsaydı
 * çerçeve kutunun DIŞINA eklenip kartı 2px büyütür, ızgara payını
 * bozardı — ölçülen 153×153 kayardı.
 */
.cc_jcmnugos_BmwP1PCIoz .ms-eg {
  position: relative;
  display: block;
  box-sizing: border-box;
  aspect-ratio: var(--ms-eg-oran, 1 / 1);
  border: var(--ms-eg-cerceve, 0) solid var(--ms-eg-cerceve-renk, #000);
  border-radius: var(--ms-eg-yaricap, 12px);
  overflow: hidden;
  text-decoration: none;
}

.cc_jcmnugos_BmwP1PCIoz .ms-eg-gorsel {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Yazının altındaki karartma: 17. bölümdeki fotoğraflar koyu olduğu için
 * beyaz yazı okunuyor, ama açık bir görsel yüklendiğinde kaybolurdu.
 * Sadece alt bantta, yumuşak geçişle.
 *
 * 21. bölümde tasarım karartma KULLANMIYOR — okunabilirliği yazının kendi
 * gölgesi sağlıyor. O yüzden bant `opacity` ile kapatılabiliyor; bölüm
 * "Etiket Biçimi: İtalik" seçildiğinde 0 yolluyor.
 */
.cc_jcmnugos_BmwP1PCIoz .ms-eg::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40%;
  opacity: var(--ms-eg-karartma, 1);
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}

.cc_jcmnugos_BmwP1PCIoz .ms-eg-etiket {
  position: absolute;
  bottom: var(--ms-eg-etiket-alt, 12px);
  left: var(--ms-eg-etiket-sol, 9px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding-right: var(--ms-eg-etiket-sol, 9px);
  color: var(--ms-eg-yazi, #fff);
  font-style: var(--ms-eg-egim, normal);
  text-shadow: var(--ms-eg-golge, none);
}

.cc_jcmnugos_BmwP1PCIoz .ms-eg-etiket-ust {
  font-size: var(--ms-eg-punto, 11px);
  font-weight: var(--ms-eg-kalinlik, 500);
  line-height: var(--ms-eg-satir, 15px);
}

.cc_jcmnugos_BmwP1PCIoz .ms-eg-etiket-alt {
  font-size: var(--ms-eg-alt-punto, 11px);
  font-weight: var(--ms-eg-alt-kalinlik, 500);
  line-height: var(--ms-eg-alt-satir, 14px);
}