/*
 * Koleksiyon vitrini — ölçümler `data/mobil-anasayfa-koleksiyon-vitrini.md`
 * (mobil.pdf s1, y 3163–3483; 360pt artboard, 1pt = 1px).
 *
 *   bölüm      tam genişlik, arka planda görsel
 *   başlık     18pt Gilroy-ExtraBold #fff, ORTALI
 *   alt başlık 14pt Gilroy-Medium #fff, ORTALI
 *   kart       112.31 × 158.83; görsel 142.83, altında 16'lık beyaz şerit
 *   kartlar    ilk kart x 21.59, ara 20.05, üçüncüsü sızıyor
 *   çubuklar   3 adet, 11.91 × 0.85, ara ~5; aktif #6F6E6E, diğer #DADADA
 *
 * "SEPETE EKLE" tasarımda 6pt ve şerit 16 yüksek — ikisi de kuralın altında
 * (punto tabanı 11, dokunma hedefi 44). Punto 11'e, şerit 32'ye çıkarıldı;
 * dokunma alanı görünmez katmanla 44.
 */

.cc_jcmnugos_AQC51Zquz8 .ms-kv {
  padding: var(--ms-kv-ic-ust, 18px) 0 var(--ms-kv-ic-alt, 0px);
  margin-top: var(--ms-kv-must, 0);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

  /*
   * `display` AÇIKÇA yazılı: tema başlıklara çok geniş bir reset uyguluyor
   * (`button, h1..h6, input… { … display: unset … }`) ve `display` miras
   * alınmadığı için `unset` = başlangıç değeri = **inline**. Satır içi h2'nin
   * kutusu içeriğe daralıyor, `text-align: center` de hiçbir şey yapmıyor —
   * canlıda başlık 126px'lik kutuda sola yapışık çıktı.
   */
.cc_jcmnugos_AQC51Zquz8 .ms-kv-baslik {
  display: block;
  width: 100%;
  margin: 0;
  color: var(--ms-kv-baslik-renk, #fff);
  font-size: 18px;
  font-weight: 800;
  line-height: 24px;
  text-align: center;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-altbaslik {
  /* Tasarımda başlık ile alt başlığın mürekkepleri neredeyse bitişik
     (3209.89 → 3210.47 = 0.58). Araya margin konmuyor; boşluğu yalnız
     satır yükseklikleri veriyor. */
  margin: 0;
  color: var(--ms-kv-baslik-renk, #fff);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-serit {
  display: flex;
  gap: var(--ms-kv-ara, 20px);
  /*
   * Şeridin üst boşluğu YERLEŞİME göre değişiyor, o yüzden prop:
   *   ortalı düzen (10/13. bölüm)  alt başlıktan kartlara 51.06
   *   sekmeli düzen (18. bölüm)    sekme çizgisinden kartlara 15.1
   * Sabit 51 yazılıydı ve sekmeli bölümde araya 67 giriyordu.
   */
  margin-top: var(--ms-kv-serit-ust, 51px);
  padding: 0 var(--ms-kv-kenar, 22px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--ms-kv-kenar, 22px);
  scrollbar-width: none;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-serit::-webkit-scrollbar {
  display: none;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-kart {
  flex: 0 0 var(--ms-kv-kart, 112px);
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

/*
 * ÜST KUTU — görsel + "SEPETE EKLE" şeridi. Çerçeve ve köşe burada:
 * tasarımda (hem 13 hem 16) çerçeve yalnız bu bloğu sarıyor, ad/fiyat
 * bloğu çerçevenin dışında kalıyor.
 */
.cc_jcmnugos_AQC51Zquz8 .ms-kv-ust {
  display: flex;
  flex-direction: column;
  /*
   * Köşe 4 — vektör yolundan çözüldü: üst kenarın düz parçası 25.714'te
   * başlıyor, kart kenarı 21.594 → yarıçap 4.12. (Önce 8 yazılmıştı.)
   * Kart zemini #F8F8F8, şerit ise saf beyaz — tasarımda ikisi ayrı.
   */
  border-radius: var(--ms-kv-yaricap, 4px);
  /*
   * KENARLIK — tasarımda ayrı bir çizgi YOK; kartın kendi zemini (#F7F7F7)
   * görselin etrafında ~1px görünüyor (piksel ölçümü: kart kenarında 247,
   * hemen içinde fotoğraf). Bu rim gerçek bir kenarlık olarak veriliyor ki
   * editörden rengi ve kalınlığı ayarlanabilsin — iki vitrin bölümünde de.
   *
   * `box-sizing: border-box` şart: kenarlık kartı 112'nin dışına taşırmasın.
   */
  box-sizing: border-box;
  border: var(--ms-kv-kenarlik, 1px) solid var(--ms-kv-kenarlik-renk, #f8f8f8);
  background-color: #f8f8f8;
  overflow: hidden;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-gorsel-alan {
  display: block;
  aspect-ratio: var(--ms-kv-oran, 112 / 143);
  overflow: hidden;
}

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

.cc_jcmnugos_AQC51Zquz8 .ms-kv-sepet {
  position: relative;
  /*
   * ORTALAMA flex ile: tema `button`lara da `text-align: unset` uyguluyor
   * (miras alınan özellik → inherit → karttan gelen sola hizalı değer) ve
   * `text-align: center` yazsak bile reset onu ezebiliyor. `justify-content`
   * bu reset'ten etkilenmiyor. Tasarımda metin şeritte hem yatayda hem
   * dikeyde ortalı (metin merkezi 77.89 = kart merkezi 77.89).
   */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--ms-kv-buton-yuk, 16px);
  padding: 0 6px;
  /*
   * "SEPETE EKLE" şeridi ÇERÇEVELİ (MobilGuncel.PDF, GÖRSEL 11 — marka
   * bildirdi; ilk ölçüm paketinde şerit çerçevesiz çözülmüştü).
   * `box-sizing: border-box` şart: çerçeve şeridi 16'nın dışına
   * taşırmıyor, içini daraltıyor — yoksa kart yükselir ve şeridin altına
   * hizalanan ad/fiyat bloğu kayardı (kart kenarlığında da aynı kural).
   */
  box-sizing: border-box;
  /* Çerçeve YUMUŞAK (marka GÖRSEL 55): ölçülen tasarımda şeritte çerçeve yok
     (şerit #FFF, kart #F8F8F8 — ayrım zemin farkı). Siyah çerçeve sonradan
     eklenmişti; varsayılan artık açık gri. Editör prop'u ezerse o geçerli. */
  border: var(--ms-kv-buton-kenarlik, 1px) solid
    var(--ms-kv-buton-kenarlik-renk, #e5e5e5);
  background-color: #fff;
  color: #000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
}

/* dokunma hedefi: görünen şerit 32, dokunulan alan 44 */
.cc_jcmnugos_AQC51Zquz8 .ms-kv-sepet::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-sepet[disabled] {
  color: #767679;
  cursor: default;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-noktalar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /*
   * Çubuğun GÖRÜNEN yeri kartların 26.97 altında (ölçülen). Kutu 44 yüksek
   * (dokunma hedefi) ve çubuk ortasında duruyor, yani kutunun üstü
   *   27 − 44/2 = 5  →  6 (ızgara)
   * Önceki değer −21'di; lisanslar bölümünden kopyalanmış ve orada doğru
   * olan sayı burada çubuğu kartların DİBİNE yapıştırıyordu (yayında
   * kart altı → çubuk 0 ölçüldü).
   */
  height: 44px;
  margin-top: 6px;
  touch-action: none;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-nokta {
  position: relative;
  width: 12px;
  height: 2px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: #dadada;
  cursor: pointer;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-nokta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-nokta--aktif {
  background-color: #6f6e6e;
}

@media (min-width: 1024px) {
  .cc_jcmnugos_AQC51Zquz8 .ms-kv {
    margin-top: var(--ms-kv-ust, 0);
  }
}

/* ==========================================================================
   13. BÖLÜM — EN YENİ LİSANSLI ÜRÜNLER (aynı bileşenin zengin kartı)
   ==========================================================================
   Ölçümler: `data/mobil-anasayfa-lisansli-urunler.md` (mobil.pdf s1,
   y 4440–4795).

     başlık        20.53pt ExtraBold #fff · alt başlık 13pt Medium #fff
     KEŞFET        paralelkenar 63 × 15.12, #EA6CA4, 10.51pt BoldItalic
     kart görseli  112.31 × 141.47 · şerit 16 · alt alan 65.26
     ad            7pt · puan görseli 50.49 × 9.23 · fiyat 7pt
     özel alan     62.53 × 21.56 kutu (ürün özelliğinden HTML)
     çubuklar      kart altından 19.92
*/

.cc_jcmnugos_AQC51Zquz8 .ms-kv-etiket {
  /* pembe koleksiyonlardaki etiketle AYNI eğim (33.87°) */
  align-self: center;
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin-top: 10px;
  padding: 0 14px;
  border-radius: 2px;
  background-color: var(--ms-kv-etiket, #ea6ca4);
  color: var(--ms-kv-etiket-yazi, #fff);
  text-decoration: none;
  white-space: nowrap;
  transform: skewX(-33.87deg);
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-etiket::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-etiket-ic {
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.02em;
  transform: skewX(33.87deg);
}

/* bölüm dikey akış: başlık, alt başlık ve etiket ortada */
.cc_jcmnugos_AQC51Zquz8 .ms-kv {
  display: flex;
  flex-direction: column;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-alt {
  /*
   * Tasarımda alt alan 65.26: ad 7pt, puan görseli 9.23, fiyat 7pt, özel
   * alan kutusu 21.56 ve aralar ~5. Bizde puntolar ölçeğin tabanına çıktığı
   * için (7 → 11) blok kaçınılmaz olarak uzuyor; aralar ve iç paylar
   * tasarımın oranına göre sıkıştırıldı: 8+... yerine 6/2/6.
   */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 6px 8px;
  background-color: var(--ms-kv-alt-zemin, #fff);
  text-align: center;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-ad {
  /* h2 — başlık boşluğu sıfır. */
  margin: 0;
  /* iki satır sabit yer: kartların alt hizası kaymasın
     (bkz. data/mobil-standart.md → kart satır hizası) */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  height: 28px;
  overflow: hidden;
  color: #000;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  text-decoration: none;
}

/*
 * Ürün adı h2 oldu (SEO). Başlığın İÇİNDEKİ bağlantı, adın eskiden <a>
 * olduğu zamanki görünümü aynen sürdürsün diye tipografiyi devralıyor:
 * `font: inherit` olmazsa global `[class*="cc_..."] *` kuralı satır
 * yüksekliğini 24px'e çekiyor ve iki satırlık kırpma yüksekliği taşıyor.
 */
.cc_jcmnugos_AQC51Zquz8 .ms-kv-ad-bag {
  color: inherit;
  font: inherit;
  text-decoration: none;
}


.cc_jcmnugos_AQC51Zquz8 .ms-kv-puan {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 12px;
  color: #767679;
  font-size: 10px;
  line-height: 12px;
}

/* içeriği olmayan puan satırı: yer duruyor, çizim yok */
.cc_jcmnugos_AQC51Zquz8 .ms-kv-puan--bos {
  visibility: hidden;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-yildizlar {
  position: relative;
  display: inline-block;
  color: #dcdcdc;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.5px;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-yildiz-dolu {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: #f5a623;
  white-space: nowrap;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-fiyat {
  color: #000;
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
}

/*
 * Özel alan: içerik mağazadan HTML olarak geliyor ve o HTML başka bir yer
 * için yazılmış olabiliyor (bkz. index.tsx → OzelAlan). Kutu içeriği ölçüp
 * kartın genişliğine göre küçültüyor; yükseklik de oranla düşüyor.
 */
.cc_jcmnugos_AQC51Zquz8 .ms-kv-ozel {
  width: 100%;
  overflow: hidden;
  /* yükseklik JS'ten geliyor: küçültülmüş içeriğin gerçek yüksekliği */
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-ozel-ic {
  transform: scale(var(--ms-kv-ozel-olcek, 1));
  transform-origin: top center;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-ozel img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   16. BÖLÜM — GÜNÜN FIRSATLARI TİP 2
   ==========================================================================
   Ölçümler: `data/mobil-anasayfa-gunun-firsatlari.md` (mobil.pdf s1,
   y 6002.59–6445.10).

     bölüm zemini  #F8FAFB · başlık 15.60pt ExtraBold #1D1D1B, SOLDA (x 26.81)
     TÜMÜNÜ GÖR    çerçeveli kutu 65.66 × 15.54, dolgusuz, 7.45pt + ok
     kart          177.38 geniş · üst kutu 248.53 (şerit 27.46 dahil)
     bilgi bloğu   133.31 — marka 10.31 Bold, ad 11.06, puan, rozet 26.43×23.97
                   (#E20613), eski fiyat 9.89 üstü çizili #9D9D9C, fiyat 11.06
     kartlar arası 16.54 · ilk kart 24.58
*/

.cc_jcmnugos_AQC51Zquz8 .ms-kv--sol .ms-kv-baslik, .cc_jcmnugos_AQC51Zquz8 .ms-kv--sol .ms-kv-altbaslik {
  text-align: left;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--ms-kv-kenar, 22px);
}

/*
 * Daralması gereken YALNIZ BAŞLIK. Esnek öğenin tabanı `auto` olduğu için
 * başlık min-content'inin altına inmiyordu ve sayfa 363'e taşıyordu.
 *
 * `min-width: 0` bir tur SATIRIN TÜM çocuklarına verildi — o zaman etiket de
 * daraldı ve `nowrap` içeriği kutusundan 20px taştı ("Tümünü Gör" kutusu 66,
 * içerik 86; sayfa 368). Etiket daralmamalı: `flex: 0 0 auto`.
 */
.cc_jcmnugos_AQC51Zquz8 .ms-kv-satir .ms-kv-baslik {
  min-width: 0;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-satir .ms-kv-etiket {
  flex: 0 0 auto;
}

/* Yalın yönlendirme: kutu ve eğim yok, yazı + ok (tasarım "Buna Alanlar"). */
.cc_jcmnugos_AQC51Zquz8 .ms-kv-etiket--yalin {
  align-self: auto;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--ms-kv-etiket, #e60012);
  transform: none;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-etiket--yalin .ms-kv-etiket-ic {
  /* Tasarımdan: mürekkep 34.18 → punto 6.13, ölçekte ×2 = 12; kalın. */
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  transform: none;
}

/* Çerçeveli etiket: dolgusuz, ince çerçeve + ok (tasarım 16. bölüm) */
.cc_jcmnugos_AQC51Zquz8 .ms-kv-etiket--cerceve {
  align-self: auto;
  margin-top: 0;
  padding: 0 10px;
  border: 1px solid currentColor;
  border-radius: 2px;
  background-color: transparent;
  color: var(--ms-kv-baslik-renk, #1d1d1b);
  transform: none;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-etiket--cerceve .ms-kv-etiket-ic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-style: normal;
  font-weight: 500;
  transform: none;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-etiket-ok {
  width: 14px;
  height: 10px;
  flex: none;
}

/*
 * Bilgi bloğu SOLA yaslı — marka maddesi GÖRSEL 12, 1. madde:
 * "Marka adı, ürün adı, fiyat ve yıldızlar sol başlara yaslanmalı".
 *
 * Tasarım da öyle (mobil.pdf s1, 16. bölüm): kart x 24.58'de başlıyor,
 * bloğun BÜTÜN satırları x ~33'ten başlıyor — marka 33.25, ad 32.93,
 * rozet 34.38. Yani iç pay 8.67 ve hiçbir satır ortalanmıyor.
 *
 * Ortalama 10 ve 13. bölümlerde KALIYOR: 13. bölümde ölçüm tersini
 * söylüyor (ad 36.22–119.57 ile fiyat 61.69–94.09 aynı merkezde, 77.9).
 * Bu yüzden kural bölüme özel: `--sol` yalnız 16. bölümde açık.
 *
 *   ölçülen ↔ uygulanan
 *   iç pay 8.67  →  8 (4'lük ızgara, data/mobil-standart.md)
 */
.cc_jcmnugos_AQC51Zquz8 .ms-kv--sol .ms-kv-alt {
  align-items: flex-start;
  padding: 6px 8px 8px;
  text-align: left;
}

/* Özel alan kutusu da sola: içerik `scale` ile küçülüyor, küçülme
   MERKEZDEN olursa kutu sola yaslı olsa bile içerik ortada kalıyor. */
.cc_jcmnugos_AQC51Zquz8 .ms-kv--sol .ms-kv-ozel-ic {
  transform-origin: top left;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-marka {
  color: #000;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-fiyat-satiri {
  display: flex;
  align-items: center;
  gap: 8px;
}

/*
 * İndirim rozeti (marka maddesi GÖRSEL 12, 2. madde: "indirim oranı tasarımı
 * da aynı değil").
 *
 * Tasarımda rozet SABİT bir kutu: 26.43 × 23.97, içindeki "%25" 9pt
 * Gilroy-MEDIUM ve kutunun ortasında duruyor — yani kutu yazıya göre
 * daralıp genişlemiyor, yazı kutunun içinde yüzüyor.
 *
 * Bizdeki hâli yazıya sarılıyordu: `min-width: 26` + iki yandan 4 iç pay,
 * 600 ağırlık. Yayında ölçüldü: "%69" rozeti 27.56 geniş — tasarımın
 * 26.4'ünden geniş ve yazı kutuyu dolduruyordu.
 *
 *   ölçülen ↔ uygulanan ↔ neden
 *   kutu 26.43 × 23.97   →  26 × 24        birebir
 *   yazı 9pt Medium      →  11px / 500     punto mikro token'ı 11
 *                                          (data/mobil-standart.md); AĞIRLIK
 *                                          tasarımdan alındı (Medium = 500),
 *                                          rozeti tasarımdaki gibi inceltiyor
 *   iç pay 0             →  0 2px          "%100" gibi dört haneli değer
 *                                          taşmasın diye emniyet payı; iki
 *                                          haneli değerlerde kutu yine 26
 */
.cc_jcmnugos_AQC51Zquz8 .ms-kv-rozet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 2px;
  border-radius: 2px;
  background-color: var(--ms-kv-rozet, #e20613);
  color: var(--ms-kv-rozet-yazi, #fff);
  font-size: 11px;
  font-weight: 500;
  line-height: 24px;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-fiyatlar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-eski-fiyat {
  color: #9d9d9c;
  font-size: 10px;
  line-height: 13px;
  text-decoration: line-through;
}

/* ==========================================================================
   18. BÖLÜM — LİSANSLI ÜRÜNLERİ KEŞFET (lisans sekmeleri)
   ==========================================================================
   Ölçümler: `data/mobil-anasayfa-lisansli-kesfet.md` (mobil.pdf s1,
   y 6902.44–7311.13).

     bölüm zemini  #F6F6F6
     sekme adı     aktif 11pt #575756 · diğer 10pt #C6C6C6
     alt çizgi     x 32.18–322.69 (290.52 × 1.33) #C5C5C5
     aktif parça   58.51 × 1.10 #565655 — aktif sekmenin altında
     kart          107.53 geniş · şerit 9.98 · bilgi bloğu 71.29
*/

.cc_jcmnugos_AQC51Zquz8 .ms-kv-sekmeler {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin: 0 var(--ms-kv-kenar, 22px) 16px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ms-kv-sekme-cizgi, #c5c5c5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-sekmeler::-webkit-scrollbar {
  display: none;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-sekme {
  position: relative;
  flex: 0 0 auto;
  padding: 0 0 6px;
  margin-bottom: -7px;
  border: 0;
  background: none;
  color: var(--ms-kv-sekme, #c6c6c6);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  cursor: pointer;
}

/* dokunma hedefi: görünen yazı büyümüyor, altına 44'lük katman */
.cc_jcmnugos_AQC51Zquz8 .ms-kv-sekme::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: 44px;
  transform: translate(-50%, -50%);
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-sekme--aktif {
  color: var(--ms-kv-sekme-aktif, #575756);
}

/* aktif sekmenin altındaki koyu parça — tasarımda çizginin üstüne biniyor */
.cc_jcmnugos_AQC51Zquz8 .ms-kv-sekme--aktif::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: var(--ms-kv-sekme-aktif, #565655);
}

/* Şeridin başındaki afiş (18. bölüm): 156 × 352, ürün kartlarından uzun */
.cc_jcmnugos_AQC51Zquz8 .ms-kv-afis {
  flex: 0 0 var(--ms-kv-afis, 156px);
  display: block;
  align-self: flex-start;
  aspect-ratio: var(--ms-kv-afis-oran, 156 / 286);
  border-radius: var(--ms-kv-yaricap, 4px);
  overflow: hidden;
  scroll-snap-align: start;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-afis-gorsel {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   YALIN KART — tasarımın "Buna Alanlar Bunları da Aldı" şeridi
   Ölçümler: `data/mobil-urun-detay.md` (mobil.pdf s26, I bloğu).

   Tasarımın kartı vitrinin varsayılan kartından yapı olarak FARKLI:
   görselin sağ üstünde kalp, tam genişlik "SEPETE EKLE" şeridi YERİNE
   fiyatın sağında küçük kırmızı sepet ikonu, altında ★ + puan.

   Sıra: ad → fiyat → puan. Varsayılan kartta puan fiyattan ÖNCE geliyor;
   burada `order` ile çevriliyor, DOM'a dokunulmuyor.

   Boşluklar `data/mobil-standart.md` 4'lük ızgarasında.
   ========================================================================== */

.cc_jcmnugos_AQC51Zquz8 .ms-kv-kart--yalin .ms-kv-ust {
  position: relative;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-kart--yalin .ms-kv-favori {
  display: flex;
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: #202532;
  cursor: pointer;
}

/* Vuruş alanı 44 — ikon büyütülmeden (data/mobil-standart.md). */
.cc_jcmnugos_AQC51Zquz8 .ms-kv-kart--yalin .ms-kv-favori::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-kart--yalin .ms-kv-favori svg {
  width: 16px;
  height: 16px;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-kart--yalin .ms-kv-favori--dolu svg {
  fill: currentColor;
}

/*
 * Alt blok bir ızgara: solda ad/fiyat/puan, sağda sepet ikonu. İkon iki
 * satırın (fiyat + puan) hizasında, tasarımdaki gibi.
 */
/*
 * KART GENİŞLİĞİ AKIŞKAN. Sabit 107 + 4 aralık + 12 kenar ile 360'ta TAM
 * ÜÇ kart sığıyor, dördüncüden 7px görünüyordu — sızıntı yok sayılır ve
 * her kaydırma ekranı komple değiştiriyordu ("ürünler toplu kayıyor").
 *
 * 3.25 kart: dördüncünün çeyreği (≈25px) hep görünüyor, yani şeridin
 * devamı olduğu belli oluyor ve kaydırma kart kart ilerliyor. Yüzde
 * flex-basis kabın İÇ genişliğine göre çözülüyor, o yüzden her ekranda
 * aynı oran çıkıyor — 320'de de 430'da da 3.25 kart.
 */
.cc_jcmnugos_AQC51Zquz8 .ms-kv-kart--yalin {
  flex: 0 0 calc((100% - 3 * var(--ms-kv-ara, 4px)) / 3.25);
}

/*
 * 320'de 3.25 kart 87.4 ediyor ve fiyat satırı ("3.499,99 TL" + sepet
 * ikonu = 93) sarıyor. Orada 2.75 karta düşülüyor: kart 104.7, fiyat tek
 * satır, çeyrek yerine dörtte üç kart sızıyor.
 */
@media (max-width: 359.98px) {
  .cc_jcmnugos_AQC51Zquz8 .ms-kv-kart--yalin {
    flex: 0 0 calc((100% - 2 * var(--ms-kv-ara, 4px)) / 2.75);
  }
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-kart--yalin .ms-kv-alt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 4px;
  align-items: end;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-kart--yalin .ms-kv-ad {
  grid-column: 1 / -1;
  order: 1;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-kart--yalin .ms-kv-fiyat-satiri {
  grid-column: 1;
  order: 2;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-kart--yalin .ms-kv-puan {
  grid-column: 1;
  order: 3;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-kart--yalin .ms-kv-sepet-ikon {
  display: flex;
  position: relative;
  grid-row: 2 / 4;
  grid-column: 2;
  align-items: center;
  justify-content: center;
  order: 4;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: #e60012;
  cursor: pointer;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-kart--yalin .ms-kv-sepet-ikon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-kart--yalin .ms-kv-sepet-ikon svg {
  width: 20px;
  height: 20px;
}

.cc_jcmnugos_AQC51Zquz8 .ms-kv-kart--yalin .ms-kv-sepet-ikon:disabled {
  color: var(--ms-kenarlik, #ddd);
  cursor: default;
}

/* Tasarımda puan yalnız ★ + ortalama; yorum sayısı yok. */
.cc_jcmnugos_AQC51Zquz8 .ms-kv-kart--yalin .ms-kv-yorum {
  display: none;
}