/*
 * Ürün listesi sekmesi + ürün kartı.
 * Tüm değerler canlı miniso.com.tr'den: brief/INDEX-03-dc96f118.md
 *
 *                        w1440                        w360
 * ızgara (s1573/s132)    560px 704px, gap 16          tek sütun, gap 36
 * afiş  (s1579/s138)     560×1009, oran 540/973       328×328, oran 1/1
 *                        radius 4, padding 24, gap 8  aynı
 * ürün alanı (s1584)     grid 224×3, gap 16           yatay kaydırma, spv 2.1
 * slayt (s149)           —                            137.328, alt boşluk 32
 *
 * Kart (s1585→s1607 / s150→s168)
 *                        w1440                        w360
 * görsel (s1586/s151)    224×201.59, oran 1/0.9       137.33×123.59
 *                        üst köşe 10px                aynı
 * buton  (s1603/s158)    38 = 20+8+8+1+1              34 = 16+8+8+1+1
 *                        14px/700, ls .7px            12px/700, ls .6px
 * marka  (s1604/s159)    15px/700, lh 20, üst 5       14px/700, lh 20, üst 5
 * ad     (s1606/s161)    14px, lh 20, 2 satır → 40    13px, lh 19.5 → 39
 *                        alt boşluk 8                 alt boşluk 8
 * fiyat satırı (s1607)   auto üst, üst pad 10, gap 10 aynı
 * rozet  (s1136/s163)    38 kare, 12px/500, kırmızı   aynı
 * eski fiyat (s1139/166) 16px, lh 16, #aaa            13px, lh 13
 * fiyat  (s1140/s167)    18px/600, lh 28              15px/600, lh 15
 */

/* ---------- sekme düzeni ---------- */

.cc_jcmnugos_8wxOcTqWwb .ms-ulsek {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ms-ul-mgap, 20px);
}

/* s1574 — afişin kendi yüksekliği (oran) satır yüksekliğini belirliyor */
.cc_jcmnugos_8wxOcTqWwb .ms-ulsek-afis {
  position: relative;
  min-width: 0;
}

/* s1579 / s138 */
.cc_jcmnugos_8wxOcTqWwb .ms-ulsek-afis-ic {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: var(--ms-bosluk-3);
  box-sizing: border-box;
  padding: var(--ms-bosluk-9);
  border-radius: var(--ms-yaricap-1);
  aspect-ratio: var(--ms-ul-moran, 1 / 1);
  background-size: cover;
  text-align: center;
  overflow: hidden;
}

/* s1580 / s143 — görsel katmanı içeriğin arkasında */
.cc_jcmnugos_8wxOcTqWwb .ms-ulsek-afis-gorsel-kap {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  overflow: hidden;
}

/* s1582 / s144 */
.cc_jcmnugos_8wxOcTqWwb .ms-ulsek-afis-gorsel {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc_jcmnugos_8wxOcTqWwb .ms-ulsek-afis-metin {
  position: relative;
  color: var(--ms-beyaz);
}

/*
 * Ürün alanının yan padding'i canlıda `lg:px-6 max-lg:px-4`, yani 24 / 16.
 * Şerit genişliği bundan çıkıyor: 1280 − 48 = 1232 ve slayt
 * (1232 − 20×4.1)/5.1 = 225.5 — canlı ölçümle birebir.
 */
.cc_jcmnugos_8wxOcTqWwb .ms-ulsek-urunler {
  position: relative;
  min-width: 0;
  padding: 0 16px;
}

/* Mobil/tablet: yatay kaydırma. Slayt genişliği ölçülen slidesPerView'den
   türetiliyor — (kapsayıcı + boşluk) / spv - boşluk.
   w360: (328+36)/2.1-36 = 137.33 ✓   w768: (736+36)/2.1-36 = 331.62 ✓ */
.cc_jcmnugos_8wxOcTqWwb .ms-ulsek-liste {
  display: flex;
  gap: var(--ms-ul-mgap, 20px);
  padding-bottom: var(--ms-bosluk-10);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cc_jcmnugos_8wxOcTqWwb .ms-ulsek-liste::-webkit-scrollbar {
  display: none;
}

/* Fare ile sürükle-kaydır (JS ile eklenen sınıflar). Sınıf yalnız drag
   bağlandığında (masaüstü, afişsiz carousel) ekleniyor; imleç orada beliriyor.
   Sürüklerken metin/görsel seçimini engelle. */
.cc_jcmnugos_8wxOcTqWwb .ms-ulsek-liste--surukle {
  cursor: grab;
}

.cc_jcmnugos_8wxOcTqWwb .ms-ulsek-liste--tutuluyor {
  cursor: grabbing;
  user-select: none;
}

.cc_jcmnugos_8wxOcTqWwb .ms-ulsek-liste--tutuluyor img {
  -webkit-user-drag: none;
}

.cc_jcmnugos_8wxOcTqWwb .ms-ulsek-liste .ms-uk {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: calc((100% + var(--ms-ul-mgap, 20px)) / var(--ms-ul-spv, 2.1) - var(--ms-ul-mgap, 20px));
}

/* ---------- ürün kartı ---------- */

/* s1585 / s150 */
.cc_jcmnugos_8wxOcTqWwb .ms-uk {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

/* s1586 / s151 */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-gorsel-alan {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  aspect-ratio: var(--ms-ul-uoran, 1 / 0.9);
  border-top-left-radius: var(--ms-ul-radius, 10px);
  border-top-right-radius: var(--ms-ul-radius, 10px);
  overflow: hidden;
}

/* s1587 / s152 */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-gorsel-baglanti {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* s1594 / s155 */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-gorsel {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Tüm görseller üst üste duruyor, yalnızca aktif olan görünür.
 * Ölçüm: geçiş opacity 0 → 1, 0.3s.
 *
 * Fare görselin üzerinde yatayda gezdikçe aktif görsel değişiyor (dilim
 * hesabı component'te). Hover yokken aktif olan ilk görsel, yani kart
 * açılışta ana görseli gösteriyor.
 */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-gorsel {
  opacity: 0;
  transition: opacity 0.3s var(--ms-gecis);
}

.cc_jcmnugos_8wxOcTqWwb .ms-uk-gorsel--aktif {
  opacity: 1;
}

/* Görsel göstergesi: normalde yok, hover'da 4px'lik şerit.
   Ölçüm: yükseklik 0→4px, çubuk arka planı rgba(0,0,0,.3), sağ boşluk 1px,
   köşe yarıçapı 0. */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-gosterge {
  display: flex;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0;
  overflow: hidden;
  transition: height 0.15s var(--ms-gecis);
}

.cc_jcmnugos_8wxOcTqWwb .ms-uk:hover .ms-uk-gosterge {
  height: 4px;
}

.cc_jcmnugos_8wxOcTqWwb .ms-uk-gosterge-cubuk {
  flex: 1 1 0;
  height: 100%;
  margin-right: 1px;
  background-color: rgba(0, 0, 0, 0.3);
}

.cc_jcmnugos_8wxOcTqWwb .ms-uk-gosterge-cubuk:last-child {
  margin-right: 0;
}

.cc_jcmnugos_8wxOcTqWwb .ms-uk-gosterge-cubuk--aktif {
  background-color: rgba(0, 0, 0, 0.6);
}

/*
 * Görsel altındaki dönen etiket şeridi (sub-components/MinisoUrunEtiketleri)
 * — canlıdan ölçüldü: CATEGORY.json w1440 s211–s232.
 *
 *   şerit   absolute bottom 0, 308×20, z-index 1
 *   slayt   flex ortalı, gap 4, padding 2px 4px, yatay degrade
 *   yazı    12px/12, ağırlık 700, harf aralığı -0.3px, tek satır
 *   ikon    görselli etikette 12×16, stok uyarısında 16×16
 *   dönüş   speed 300ms, autoplay 3000ms (bileşende)
 *
 * z-index 2: canlıda şerit görsel göstergesinin üstünde duruyor. Gösterge
 * hover'da 4px açılıyor ve ikisi de alta yapışık — sıra bozulursa şerit
 * göstergenin ARKASINDA kalıyor.
 */
/*
 * Mobil sabit rozet satırları ProductTab slider'ında GİZLİ — marka maddesi
 * GÖRSEL 24: aynı "Tükeniyor!" hem görsel şeridinde hem fiyat altındaki
 * satırda çıkıp iki kez görünüyordu. Slider'da görsel şeridi (aşağıdaki
 * .ms-uk-etiketler) her breakpoint'te durduğu için fiyat altı satır fazlalık.
 * (Grid'de base'te de `display:none`; orada mobilde ayrıca açılıyor.)
 */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-msatir {
  display: none;
}

.cc_jcmnugos_8wxOcTqWwb .ms-uk-etiketler {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 20px;
  overflow: hidden;
  pointer-events: none;
}

.cc_jcmnugos_8wxOcTqWwb .ms-uk-etiket-serit {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.3s var(--ms-gecis);
}

.cc_jcmnugos_8wxOcTqWwb .ms-uk-etiket {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 20px;
  padding: 2px 4px;
  box-sizing: border-box;
}

.cc_jcmnugos_8wxOcTqWwb .ms-uk-etiket-yazi {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  letter-spacing: -0.3px;
}

/* Görselli ikon 12 geniş, kutunun tamamı kadar (16) yüksek */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-etiket-ikon {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 12px;
  min-width: 12px;
  height: 16px;
}

.cc_jcmnugos_8wxOcTqWwb .ms-uk-etiket-ikon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cc_jcmnugos_8wxOcTqWwb .ms-uk-etiket-svg {
  flex-shrink: 0;
  width: 16px;
  min-width: 16px;
  height: 16px;
}

/* s1601 / s156 */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-govde {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

/* s1602 / s157 */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-buton-alan {
  width: 100%;
  font-size: var(--ms-fs-orta);
  line-height: var(--ms-bosluk-8);
}

/* s1603 / s158 — kenarlık rengi ölçümde currentColor (ayrıca yazılmamış) */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-sepet {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: var(--ms-bosluk-3) var(--ms-bosluk-7);
  border: 1px solid;
  border-radius: 0;
  background-color: transparent;
  color: var(--ms-uk-btn-metin, inherit);
  font-family: inherit;
  font-size: var(--ms-bosluk-5);
  font-weight: 700;
  line-height: var(--ms-bosluk-7);
  letter-spacing: 0.6px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.15s var(--ms-gecis), background-color 0.15s var(--ms-gecis),
    border-color 0.15s var(--ms-gecis);
}

/*
 * Hover YEDEĞİ canlıdan (2026-09-09, marka "hover aktif değil" maddesi):
 * sekme yerleşimlerinde hover renk prop'ları BOŞ ve eski yedek
 * `transparent` olduğu için kural hiçbir görsel değişim yapmıyordu.
 * Canlı kart butonunun değişkenleri okundu: hover zemini #DCDBE6
 * (yazı/kenar siyah kalır). Mağaza prop'ları doldurursa onlar kazanır.
 */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-sepet:hover:not(:disabled) {
  color: var(--ms-uk-btn-metin-h, inherit);
  background-color: var(--ms-uk-btn-bg-h, #dcdbe6);
}

.cc_jcmnugos_8wxOcTqWwb .ms-uk-sepet:disabled {
  opacity: 0.5;
  cursor: default;
}

/*
 * TÜKENDİ DURUMU — MinisoProductGrid ile aynı (kart paylaşımlı, CSS scope'lu
 * olduğu için burada da tekrar tanımlanıyor). Marka maddesi GÖRSEL 17.
 */
.cc_jcmnugos_8wxOcTqWwb .ms-uk--tukendi .ms-uk-gorsel-baglanti {
  opacity: 0.5;
}

.cc_jcmnugos_8wxOcTqWwb .ms-uk-tukendi-rozet {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 4px;
  border-radius: 4px;
  background-color: #000;
  color: #fff;
  font-size: 8px;
  font-weight: 400;
  line-height: 8px;
  letter-spacing: -0.4px;
  white-space: nowrap;
}

.cc_jcmnugos_8wxOcTqWwb .ms-uk-sepet--tukendi:disabled {
  border: 0;
  border-top: 1px solid #000;
  border-radius: 0;
  background-color: #ededed;
  color: #000;
  opacity: 0.8;
}

/* s1604 / s159 */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-marka {
  display: block;
  width: 100%;
  margin-top: 5px;
  color: var(--ms-metin);
  font-size: var(--ms-fs-orta);
  font-weight: 700;
  line-height: var(--ms-bosluk-8);
  text-decoration: none;
}

/* Hover'da alt çizgi — canlı WEB davranışı (marka GÖRSEL 76): kartın marka
   adı üzerine gelince çiziliyor. Ürün detayındaki `.ms-ub-marka` ile aynı. */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-marka:hover {
  text-decoration: underline;
}

/* Marka + "Lisanslı Ürün" rozeti aynı satırda (marka GÖRSEL 51): marka solda,
   rozet sağ üstte. Rozet ölçümü data/mobil-urun-liste.md — lavanta/mor pill. */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-marka-satiri {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  margin-top: 5px;
}

.cc_jcmnugos_8wxOcTqWwb .ms-uk-marka-satiri .ms-uk-marka {
  width: auto;
  min-width: 0;
  margin-top: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cc_jcmnugos_8wxOcTqWwb .ms-uk-lisans {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 999px;
  background-color: rgb(240, 234, 245);
  color: rgb(125, 102, 172);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

/* s1605 / s160 */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-alt {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
  text-decoration: none;
}

/* s1606 / s161 — 2 satır kırpma */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-ad {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 100%;
  /* h2 — başlık varsayılanları (üst boşluk, kalın) geri alınıyor. */
  margin-top: 0;
  font-weight: inherit;
  margin-bottom: var(--ms-bosluk-3);
  color: var(--ms-metin);
  font-size: 13px;
  line-height: 19.5px;
  overflow: hidden;
}

/* Puan satırı — canlıdan ölçüldü (tarayıcıda 1440):
   kap 224×14, gap 4px, alt boşluk 8px
   ortalama/yorum 12px, lh 12px, #22211c, ls -0.3px
   yıldız 14×14, aralarında boşluk yok; dolu #feb701, boş #d2d2d2 */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-puan {
  display: flex;
  align-items: center;
  gap: var(--ms-bosluk-1);
  margin-bottom: var(--ms-bosluk-3);
}

.cc_jcmnugos_8wxOcTqWwb .ms-uk-puan-ort, .cc_jcmnugos_8wxOcTqWwb .ms-uk-yorum {
  color: var(--ms-metin-koyu-2, rgb(34, 33, 28));
  font-size: var(--ms-bosluk-5);
  line-height: var(--ms-bosluk-5);
  letter-spacing: -0.3px;
}

.cc_jcmnugos_8wxOcTqWwb .ms-uk-yildizlar {
  display: flex;
  align-items: center;
}

/* flex: SVG'yi satır kutusundan çıkarıyor. `block` bırakılınca içindeki svg
   satır içi kalıyor, alt boşluk ekleniyor ve kap 14 yerine 18 oluyordu —
   canlıda svg'ler doğrudan flex öğesi. */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-yildiz {
  display: flex;
  color: var(--ms-yildiz, rgb(254, 183, 1));
}

.cc_jcmnugos_8wxOcTqWwb .ms-uk-yildiz--bos {
  color: var(--ms-kenarlik);
}

/* s1607 / s162 — mt-auto: kart yüksekliği ne olursa olsun fiyat en altta */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-fiyat-satiri {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-bosluk-4);
  width: 100%;
  margin-top: auto;
  padding-top: var(--ms-bosluk-4);
}

/* s1136 / s163 — indirim rozeti, köşe yarıçapı yok (kare) */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-rozet {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--ms-bosluk-1);
  width: 38px;
  box-sizing: border-box;
  padding: var(--ms-bosluk-2) var(--ms-bosluk-1);
  aspect-ratio: 1 / 1;
  background-color: var(--ms-kirmizi);
  color: var(--ms-beyaz);
  font-size: var(--ms-bosluk-5);
  font-weight: 500;
  line-height: var(--ms-bosluk-5);
  text-align: center;
}

/* s1138 / s165 */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-fiyatlar {
  display: flex;
  flex-direction: column;
  gap: var(--ms-bosluk-1);
}

/* s1139 / s166 */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-eski {
  color: var(--ms-metin-soluk-2);
  font-size: 13px;
  line-height: 13px;
  letter-spacing: 0.35px;
  text-decoration-line: line-through;
}

/* s1140 / s167 */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-fiyat {
  color: var(--ms-metin);
  font-size: 15px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 0.35px;
}

/* s1141 / s168 — fiyat yanı kampanya alanı, içeriği ürün özelliğinden gelir */
.cc_jcmnugos_8wxOcTqWwb .ms-uk-ozellik {
  width: 100%;
  max-width: none;
  color: var(--ms-metin-2);
  line-height: 28px;
}

.cc_jcmnugos_8wxOcTqWwb .ms-uk-ozellik img {
  max-width: 100%;
}

/* ---------- masaüstü ---------- */

@media (min-width: 1024px) {
  /* s1584 — ızgaraya dönüyor, yatay kaydırma bitiyor */
  .cc_jcmnugos_8wxOcTqWwb .ms-ulsek-liste {
    display: grid;
    grid-template-columns: repeat(var(--ms-ul-sutun, 3), minmax(0, 1fr));
    gap: var(--ms-ul-gap, 16px);
    padding-bottom: 0;
    overflow: visible;
  }

  .cc_jcmnugos_8wxOcTqWwb .ms-ulsek-liste .ms-uk {
    width: auto;
  }

  .cc_jcmnugos_8wxOcTqWwb .ms-uk-sepet {
    font-size: var(--ms-fs-orta);
    line-height: var(--ms-bosluk-8);
    letter-spacing: 0.7px;
  }

  .cc_jcmnugos_8wxOcTqWwb .ms-uk-marka {
    font-size: 15px;
  }

  .cc_jcmnugos_8wxOcTqWwb .ms-uk-ad {
    font-size: var(--ms-fs-orta);
    line-height: var(--ms-bosluk-8);
  }

  .cc_jcmnugos_8wxOcTqWwb .ms-uk-eski {
    font-size: var(--ms-fs-normal);
    line-height: var(--ms-bosluk-7);
  }

  .cc_jcmnugos_8wxOcTqWwb .ms-uk-fiyat {
    font-size: 18px;
    line-height: 28px;
  }

  .cc_jcmnugos_8wxOcTqWwb .ms-uk-ozellik {
    width: auto;
  }
}

/* Afiş ile ürün alanı YAN YANA ancak xl (1280) üstünde geliyor — tarayıcıda
   ölçüldü: 1100 ve 1024'te dış ızgara hâlâ tek sütun, afiş tam genişlik ve
   kare (mobil oran), boşluk mobileGap. Ürün ızgarası ise 1024'te üç sütuna
   geçiyor; yani iki kırılım aynı değil. */
@media (min-width: 1280px) {
  .cc_jcmnugos_8wxOcTqWwb .ms-ulsek {
    grid-template-columns: var(--ms-ul-sol, 560px) minmax(0, 1fr);
    gap: var(--ms-ul-gap, 16px);
  }

  /*
   * Afişsiz sekmede sol kolon HİÇ olmamalı. Ana sayfadaki üç listede afiş
   * olduğu için fark edilmemişti; ürün sayfasının üç listesinde afiş yok ve
   * `leftWidth` kadar (100px) boş kolon kalıp ürün alanını daraltıyordu.
   */
  .cc_jcmnugos_8wxOcTqWwb .ms-ulsek--afissiz {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  /* h-full: satır afişten uzunsa afiş satıra uzuyor, kısaysa oranı belirliyor.
     Canlıda 1440'ta oran satırı sürüyor (560 → 1009.03), 1920'de ürün ızgarası
     daha uzun olduğu için afiş ona uzuyor (1083.19). */
  .cc_jcmnugos_8wxOcTqWwb .ms-ulsek-afis {
    height: 100%;
  }

  /* width:100% ŞART. Yükseklik %100 olunca tarayıcı genişliği orandan
     hesaplıyor: 1920'de satır 1087.19 olduğu için kutu 1087.19×540/973 =
     603.36 çıkıyor ve 560'lık sütundan taşıyordu. Canlıda da aynı elemanda
     `w-full` var. Genişlik sabitlenince oran yalnızca satır katkısını
     belirliyor — 1440'ta hâlâ 560→1009.03 üretiyor. */
  .cc_jcmnugos_8wxOcTqWwb .ms-ulsek-afis-ic {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--ms-ul-oran, 540 / 973);
  }
}

/*
 * Afişsiz liste masaüstünde de CAROUSEL — canlıda ölçüldü
 * (brief/PRODUCT-04-dc96f118.md, davranış kancaları):
 *   slidesPerView 5.1, spaceBetween 20, freeMode, loop yok, ok YOK
 *
 * Slayt genişliği doğrulandı: kapsayıcı 1232, (1232 − 20×4.1) / 5.1 = 225.5
 * ve canlı ölçüm de 225.5 diyor. Yani görünen slayt = sütun + 0.1, yani
 * altıncı kartın bir kısmı görünüyor ve şeridin devam ettiği belli oluyor.
 *
 * Afişli listeler (ana sayfa) ızgara olarak KALIYOR — orası doğrulanmıştı.
 */
@media (min-width: 1024px) {
  .cc_jcmnugos_8wxOcTqWwb .ms-ulsek--afissiz .ms-ulsek-liste {
    display: flex;
    gap: var(--ms-ul-gap, 20px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .cc_jcmnugos_8wxOcTqWwb .ms-ulsek--afissiz .ms-ulsek-liste::-webkit-scrollbar {
    display: none;
  }

  .cc_jcmnugos_8wxOcTqWwb .ms-ulsek--afissiz .ms-ulsek-urunler {
    padding: 0 24px;
  }

  .cc_jcmnugos_8wxOcTqWwb .ms-ulsek--afissiz .ms-ulsek-liste .ms-uk {
    flex: 0 0
      calc(
        (100% - var(--ms-ul-gap, 20px) * (var(--ms-ul-wspv, 5.1) - 1)) /
          var(--ms-ul-wspv, 5.1)
      );
    width: auto;
    /*
     * `height: auto` — kökteki `height: 100%` flex satırının eşit-boy
     * germesini (align-items stretch) bozuyordu: yorumlu kart 489,
     * yorumsuz 467 kalıyor ve "Sepete Ekle" karttan karta 22px zıplıyordu
     * (marka: "buton çok oynuyor"; canlıda 8 buton da aynı hizada,
     * Playwright w1440 ölçümü 2026-09-09). auto + stretch tüm kartları
     * satırın en uzununa eşitler.
     */
    height: auto;
    padding-bottom: 32px;
    scroll-snap-align: start;
  }
}

/*
 * Afişsiz listede kart düzeni FARKLI — canlıda ölçüldü:
 *   ana sayfa (INDEX-03):  buton, marka, ad, fiyat   (buton üstte)
 *   ürün sayfası (PRODUCT-04): marka, ad, fiyat, buton  (buton altta)
 * Aynı component iki düzende kullanılıyor, bu yüzden sıra CSS `order` ile
 * çevriliyor; DOM'a dokunulmuyor ki ana sayfa etkilenmesin.
 *
 * Ölçülen gövde (w1440, s1261): 225.5×195
 *   marka 20 (üst 5) + ad/fiyat bloğu 128 + buton alanı 42 (buton 38)
 *
 * SEÇİCİ `.ms-uk-marka-satiri`, `.ms-uk-marka` DEĞİL — GÖRSEL 62 revizesi
 * (2026-09-09). GÖRSEL 51'de marka, "Lisanslı Ürün" rozetiyle birlikte
 * `.ms-uk-marka-satiri` sarmalına alındı; buradaki eski `.ms-uk-marka
 * { order: 1 }` kuralı o günden sonra SATIRIN İÇİNDE işleyip markayı
 * rozetin SAĞINA atıyordu ("Lisanslı Ürün ... MINISO" ters dizilişi —
 * marka: "birbiri ile karışmış"). Gövde sırasını satır sarmalı belirler.
 */
.cc_jcmnugos_8wxOcTqWwb .ms-ulsek--afissiz .ms-uk-marka-satiri {
  order: 1;
}

.cc_jcmnugos_8wxOcTqWwb .ms-ulsek--afissiz .ms-uk-alt {
  order: 2;
}

.cc_jcmnugos_8wxOcTqWwb .ms-ulsek--afissiz .ms-uk-buton-alan {
  order: 3;
  /* Buton HEP DİPTE — kart satırın en uzununa gerilince içerik farkı
     (puan satırı var/yok) butonun hizasını bozamasın. */
  margin-top: auto;
  padding-top: 4px;
}

/*
 * KAYDIRMA ÇİZGİSİ — canlıdan ölçüldü (PRODUCT-04, w1440, 2026-09-09):
 * ray 1232×4 rgba(0,0,0,.1) radius 10; sürgü 4 yüksek KIRMIZI
 * rgb(235,42,55) radius 10, genişliği görünür orana, konumu kaydırmaya
 * bağlı (JS index.tsx'te). Varsayılan gizli; yalnız afişsiz WEB
 * carousel'inde görünür. Kartın padding-bottom:32'si çizgiye yer açıyor
 * (canlıda çizgi kart altından ~24px aşağıda).
 */
.cc_jcmnugos_8wxOcTqWwb .ms-ulsek-cizgi {
  display: none;
}

@media (min-width: 1024px) {
  .cc_jcmnugos_8wxOcTqWwb .ms-ulsek--afissiz .ms-ulsek-cizgi {
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.1);
  }

  .cc_jcmnugos_8wxOcTqWwb .ms-ulsek--afissiz .ms-ulsek-cizgi-surgu {
    width: 25%;
    height: 4px;
    border-radius: 10px;
    background-color: rgb(235, 42, 55);
    will-change: transform;
  }
}

/*
 * CAROUSEL OKLARI — canlıdan ölçüldü (w1440): buton 16×32, kapsayıcının
 * sol/sağ kenarında, dikeyde top calc(50% - 15px) + translateY(-50%);
 * chevron #383838, sol ok rotate(180); uçlarda disabled + opacity .5.
 * Kapsayıcı .ms-ulsek-urunler zaten position:relative.
 */
.cc_jcmnugos_8wxOcTqWwb .ms-ulsek-ok {
  display: none;
}

@media (min-width: 1024px) {
  .cc_jcmnugos_8wxOcTqWwb .ms-ulsek--afissiz .ms-ulsek-ok {
    display: flex;
    position: absolute;
    top: calc(50% - 15px);
    z-index: 1;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    transform: translateY(-50%);
    cursor: pointer;
  }

  .cc_jcmnugos_8wxOcTqWwb .ms-ulsek--afissiz .ms-ulsek-ok:disabled {
    opacity: 0.5;
    cursor: default;
  }

  .cc_jcmnugos_8wxOcTqWwb .ms-ulsek--afissiz .ms-ulsek-ok--geri {
    left: 0;
  }

  .cc_jcmnugos_8wxOcTqWwb .ms-ulsek--afissiz .ms-ulsek-ok--geri svg {
    transform: rotate(180deg);
  }

  .cc_jcmnugos_8wxOcTqWwb .ms-ulsek--afissiz .ms-ulsek-ok--ileri {
    right: 0;
  }

  .cc_jcmnugos_8wxOcTqWwb .ms-ulsek--afissiz .ms-ulsek-ok svg {
    width: 16px;
    height: 32px;
  }
}