/*
 * Koleksiyon sekmeleri (PEMBE KOLEKSİYONLAR — 23. bölüm)
 * Ölçümler: `data/mobil-anasayfa-koleksiyon-sekmeleri.md`
 * (mobil.pdf s1, bant y 9501.61–10077.47; 360pt artboard, 1pt = 1px).
 *
 *   bölüm zemini   #F9FBFC (ölçülen)
 *   başlık         15.75pt ExtraBold, x 30.83  → 16px, kenardan 32
 *   alt açıklama   9pt Light, iki satır        → 11px (punto tabanı)
 *   pembe ok       düzen kutusu 32 × 15, paralelkenar, sağ üstte
 *   sekmeler       düzen kutusu 60.8 × 17.38, ara 6.4; aktif dolu #EA6CA5,
 *                  diğerleri 0.25 çizgili #3C3C3B; yazı 11pt BoldItalic
 *   gövde          x 24–337.5, y 9629–10057 → 313.5 × 428
 *   buton          düzen kutusu 122 × 23.11, gövdede yatay ORTALI
 *   ürün kartı     tasarımda 72.25 × 125.97 (görsel 99.19 + panel 26.78);
 *                  UYGULANAN 107 × 243 — aşağıdaki nota bakın
 *                  ilk kart gövdeden 15 içeride, alttan 16.8
 *   çubuklar       gövdenin içinde, en altta
 *
 * Eğim 33.87° — sayfadaki bütün pembe paralelkenarlarla aynı.
 *
 * TASARIMDAN BİLİNÇLİ SAPMA — KART ENİ: tasarımda kart 72.25 ve içindeki
 * yazılar 3.67–4.5pt çizilmiş (ad, eski fiyat, %25, SEPETE EKLE). Punto
 * tabanı 11'e çıkınca 72px'lik karta ürün adı sığmıyor. Önce ad düşürülmüş,
 * marka "ürün kartı olmamış" deyince kart **107**'ye çıkarıldı ve 13/16/18.
 * bölümlerdeki onaylı kart anatomisi kullanıldı (görsel + sepet şeridi +
 * ad + rozet/eski fiyat/fiyat). Şeritte artık 4 değil ~2.6 kart görünüyor;
 * gövde de fotoğrafın payı bozulmasın diye 428 yerine 545 yüksekliğinde.
 * MARKAYA-NOTLAR.md'ye işlendi.
 */

.cc_jcmnugos_iXx9ritQaw .ms-ks {
  display: flex;
  flex-direction: column;
  margin-top: var(--ms-ks-must, 0);
  padding: var(--ms-ks-ic-ust, 22px) var(--ms-ks-kenar, 24px) var(--ms-ks-ic-alt, 20px);
}

/*
 * Tasarımda başlık (x 30.83) ve sekme şeridi (x 32.2) gövdeden (x 24)
 * 8px içeride. Marka "içerikler sol başa hizalansın" dediği için pay
 * ALANDAN yönetiliyor ve varsayılanı 0 — dördü de bölümün kenarından
 * (`Kenar Boşluğu`) başlıyor. 8 yazılırsa tasarımdaki hâl geri gelir.
 */
.cc_jcmnugos_iXx9ritQaw .ms-ks-ust, .cc_jcmnugos_iXx9ritQaw .ms-ks-sekmeler {
  padding-left: var(--ms-ks-ic-kenar, 0px);
  padding-right: var(--ms-ks-ic-kenar, 0px);
}

.cc_jcmnugos_iXx9ritQaw .ms-ks-ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.cc_jcmnugos_iXx9ritQaw .ms-ks-baslik {
  display: block;
  margin: 0;
  color: var(--ms-ks-baslik-renk, #000);
  font-size: 16px;
  font-weight: 800;
  line-height: 22px;
}

.cc_jcmnugos_iXx9ritQaw .ms-ks-altyazi {
  margin: 2px 0 0;
  max-width: 22em;
  color: var(--ms-ks-baslik-renk, #000);
  font-size: 11px;
  font-weight: 300;
  line-height: 15px;
}

/* Sağ üstteki pembe ok — paralelkenar kutu, içinde ok */
.cc_jcmnugos_iXx9ritQaw .ms-ks-ok {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 16px;
  border-radius: 1px;
  background-color: var(--ms-ks-pembe, #ea6ca5);
  color: #fff;
  transform: skewX(-33.87deg);
}

/* Görsel kutu küçük kalır, vuruş alanı 44×44'e büyür (mobil standart) */
.cc_jcmnugos_iXx9ritQaw .ms-ks-ok::before, .cc_jcmnugos_iXx9ritQaw .ms-ks-sekme::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

.cc_jcmnugos_iXx9ritQaw .ms-ks-ok-ikon {
  width: 13px;
  height: 9px;
  transform: skewX(33.87deg);
}

.cc_jcmnugos_iXx9ritQaw .ms-ks-sekmeler {
  display: flex;
  gap: var(--ms-ks-sekme-ara, 6px);
  margin-top: 22px;
  padding-bottom: 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.cc_jcmnugos_iXx9ritQaw .ms-ks-sekmeler::-webkit-scrollbar {
  display: none;
}

/* Sekme = paralelkenar kutu. Aktif dolu pembe, diğerleri çerçeveli. */
.cc_jcmnugos_iXx9ritQaw .ms-ks-sekme {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 14px;
  border: 1px solid var(--ms-ks-sekme-renk, #3c3c3b);
  border-radius: 1px;
  background: none;
  color: var(--ms-ks-sekme-renk, #3c3c3b);
  cursor: pointer;
  transform: skewX(-33.87deg);
}

.cc_jcmnugos_iXx9ritQaw .ms-ks-sekme--aktif {
  border-color: var(--ms-ks-pembe, #ea6ca5);
  background-color: var(--ms-ks-pembe, #ea6ca5);
  color: #fff;
}

.cc_jcmnugos_iXx9ritQaw .ms-ks-sekme-ic {
  display: block;
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  line-height: 16px;
  white-space: nowrap;
  transform: skewX(33.87deg);
}

/*
 * Gövde — görsel, buton, ürün şeridi ve çubuklar hepsi burada. Şerit
 * gövdenin sağından taşar ve kırpılır; tasarımda 4. kart yarım görünür.
 */
.cc_jcmnugos_iXx9ritQaw .ms-ks-govde {
  position: relative;
  margin-top: 18px;
  aspect-ratio: var(--ms-ks-oran, 313 / 545);
  border-radius: var(--ms-ks-yaricap, 8px);
  overflow: hidden;
}

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

/* "Koleksiyona Git" — gövdenin içinde, yatayda ortalı, şeridin üstünde */
.cc_jcmnugos_iXx9ritQaw .ms-ks-buton {
  position: absolute;
  bottom: var(--ms-ks-buton-alt, 175px);
  left: 50%;
  display: inline-flex;
  align-items: center;
  height: 23px;
  /* Tasarımda düzen kutusu 122.23; yazı 12px + ok 13 + 8'lik iki yan pay */
  padding: 0 8px;
  border-radius: 1px;
  background-color: var(--ms-ks-pembe, #ea6ca5);
  color: #fff;
  text-decoration: none;
  transform: translateX(-50%) skewX(-33.87deg);
}

/*
 * VURUŞ ALANI — görsel kutu 23, hedef 44.
 *
 * Düğme tasarımda eğik ve ince bir paralelkenar (23 yüksek); kutuyu
 * büyütmek biçimi bozar. Standart gereği görünmez `::before` katmanı
 * (data/mobil-standart.md).
 *
 * Burada 44 SORUNSUZ veriliyor: ölçüldü, düğmenin 80px yarıçapında başka
 * hiçbir dokunma hedefi yok (koleksiyon görselinin üstünde tek başına
 * duruyor). Footer'daki gibi bir sıkışıklık ya da sekme çubuğundaki gibi
 * komşu çakışması riski yok.
 *
 * Katman ebeveynin `skewX`ini devralıyor — vuruş alanı da eğik bir
 * paralelkenar oluyor, yani görsel düğmeyi tam örtüyor.
 */
.cc_jcmnugos_iXx9ritQaw .ms-ks-buton::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

.cc_jcmnugos_iXx9ritQaw .ms-ks-buton-ic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 21px;
  white-space: nowrap;
  transform: skewX(33.87deg);
}

.cc_jcmnugos_iXx9ritQaw .ms-ks-serit {
  position: absolute;
  right: 0;
  bottom: var(--ms-ks-kart-alt, 17px);
  left: calc(var(--ms-ks-kart-kenar, 39px) - var(--ms-ks-kenar, 24px));
  display: flex;
  gap: var(--ms-ks-kart-ara, 6px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.cc_jcmnugos_iXx9ritQaw .ms-ks-serit::-webkit-scrollbar {
  display: none;
}

.cc_jcmnugos_iXx9ritQaw .ms-ks-kart {
  flex: 0 0 var(--ms-ks-kart, 107px);
  display: flex;
  flex-direction: column;
  color: #000;
  text-decoration: none;
  scroll-snap-align: start;
}

/*
 * ÜST KUTU — görsel + sepet şeridi. Kenarlık ve köşe YALNIZ burada;
 * ad/fiyat bloğu çerçevenin dışında kalıyor (13/16/18. bölümlerle aynı).
 * `box-sizing` şart: kenarlık kartı belirlenen enin dışına taşırmasın.
 */
.cc_jcmnugos_iXx9ritQaw .ms-ks-kart-ust {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: var(--ms-ks-kenarlik, 1px) solid var(--ms-ks-kenarlik-renk, #f8f8f8);
  border-radius: 4px;
  background-color: #f8f8f8;
  overflow: hidden;
}

.cc_jcmnugos_iXx9ritQaw .ms-ks-kart-gorsel-alan {
  display: block;
  aspect-ratio: var(--ms-ks-kart-oran, 107 / 147);
  overflow: hidden;
}

.cc_jcmnugos_iXx9ritQaw .ms-ks-kart-gorsel {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sepet şeridi — tasarımda görselin altında beyaz bir bant */
.cc_jcmnugos_iXx9ritQaw .ms-ks-kart-sepet {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--ms-ks-sepet-yuk, 16px);
  padding: 0 6px;
  background-color: #fff;
  color: #000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
}

.cc_jcmnugos_iXx9ritQaw .ms-ks-kart-alt {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: var(--ms-ks-kart-panel, 80px);
  padding: 6px 4px 8px;
  background-color: var(--ms-ks-alt-zemin, #fff);
  text-align: center;
}

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

.cc_jcmnugos_iXx9ritQaw .ms-ks-kart-fiyat-satiri {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cc_jcmnugos_iXx9ritQaw .ms-ks-kart-rozet {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 4px;
  border-radius: 2px;
  background-color: var(--ms-ks-rozet, #e20613);
  color: var(--ms-ks-rozet-yazi, #fff);
  font-size: 11px;
  font-weight: 600;
  line-height: 22px;
}

.cc_jcmnugos_iXx9ritQaw .ms-ks-kart-fiyatlar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cc_jcmnugos_iXx9ritQaw .ms-ks-kart-eski-fiyat {
  color: #9d9d9c;
  font-size: 11px;
  line-height: 13px;
  text-decoration: line-through;
}

.cc_jcmnugos_iXx9ritQaw .ms-ks-kart-fiyat {
  color: #000;
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  white-space: nowrap;
}

/*
 * Sayfa çubukları gövdenin en altında. Vuruş alanı YATAYDA 44'e açılır,
 * dikeyde açılmaz — açılsaydı üstündeki ürün kartlarının dokunuşunu yerdi.
 */
.cc_jcmnugos_iXx9ritQaw .ms-ks-noktalar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: var(--ms-ks-kart-alt, 17px);
}

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

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

.cc_jcmnugos_iXx9ritQaw .ms-ks-nokta--aktif {
  background-color: #6f6e6e;
}

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