/*
 * Başlık + alt başlıklar + etiketli görsel ızgarası. İki bölüm kullanıyor.
 *
 * 17. OYUNCAK ÇEŞİTLERİ — `data/mobil-anasayfa-oyuncak-cesitleri.md`
 * (mobil.pdf s1, y 6462.82–6889.10; 360pt artboard, 1pt = 1px).
 *
 *   bölüm zemini  #FBFBFB, tam genişlik
 *   başlık        20.53pt ExtraBold #1D1D1B, ORTALI (merkez 180.0)
 *   alt başlıklar 11pt Medium #1D1D1B, ortalı, aralarında ayraç
 *   kart          153 × 153 (kare), köşe ~12
 *   kenar / ara   18.14 / 11.66
 *   etiket        görselin SOL ALTINDA, 11pt beyaz, soldan 9.09
 *
 * 21. YENİ KOLEKSİYONLAR TİP 2 — `data/mobil-anasayfa-yeni-koleksiyonlar.md`
 * (mobil.pdf s1, y 8224.15–8990.88).
 *
 *   bölüm zemini  #F9FBFC
 *   başlık        20.53pt ExtraBold #1D1D1B, SOLA (x 11.32)
 *   alt başlıklar 11pt Medium #1D1D1B, sola, aralarında ayraç
 *   kart          177.63 × 217.75, köşesiz, kenara dayalı
 *   kenar / ara   1.4 / 1.5
 *   etiket        iki satır, HeavyItalic 12.28 + 9, gölgeli, soldan ~12
 *
 * Hiza `.ms-oc2--sol` ile, etiket biçimi bölümün yolladığı `--ms-eg-*`
 * değişkenleriyle ayrılıyor.
 */

.cc_jcmnugos_MT2VPSG9W9 .ms-oc2 {
  margin-top: var(--ms-oc2-must, 0);
  padding: var(--ms-oc2-ic-ust, 18px) var(--ms-oc2-kenar, 18px) var(--ms-oc2-ic-alt, 22px);
}

.cc_jcmnugos_MT2VPSG9W9 .ms-oc2-baslik {
  display: block;
  width: 100%;
  margin: 0 0 var(--ms-oc2-baslik-ara, 8px);
  color: var(--ms-oc2-baslik-renk, #1d1d1b);
  font-size: 20px;
  font-weight: 800;
  line-height: 26px;
  text-align: center;
}

/* 21. bölümde başlık ve alt başlıklar SOLA dayalı */
.cc_jcmnugos_MT2VPSG9W9 .ms-oc2--sol .ms-oc2-baslik {
  text-align: left;
}

.cc_jcmnugos_MT2VPSG9W9 .ms-oc2--sol .ms-oc2-altbasliklar {
  justify-content: flex-start;
}

/*
 * Alt başlıklar tek satırda ve aralarında ayraç. Ayraç ELEMAN DEĞİL,
 * `::before` — böylece boş alan bırakılınca ortada asılı bir çizgi kalmıyor
 * ve tek başlıkta hiç ayraç çizilmiyor.
 */
.cc_jcmnugos_MT2VPSG9W9 .ms-oc2-altbasliklar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 12px;
  margin-bottom: var(--ms-oc2-altbaslik-ara, 22px);
}

.cc_jcmnugos_MT2VPSG9W9 .ms-oc2-altbaslik {
  position: relative;
  color: var(--ms-oc2-altbaslik-renk, #1d1d1b);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
}

.cc_jcmnugos_MT2VPSG9W9 .ms-oc2-altbaslik + .ms-oc2-altbaslik::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -6px;
  width: 1px;
  height: 12px;
  background-color: currentColor;
  opacity: 0.35;
  transform: translateY(-50%);
}

.cc_jcmnugos_MT2VPSG9W9 .ms-oc2-izgara {
  display: grid;
  margin: 0 var(--ms-oc2-izgara-kaydir, 0);
  grid-template-columns: repeat(var(--ms-oc2-sutun, 2), minmax(0, 1fr));
  gap: var(--ms-oc2-ara, 12px);
}

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