/*
 * Hizmet ikon şeridi — canlı miniso.com.tr'den ölçüldü.
 * Kaynaklar: brief/INDEX-11-05ae7c43.md (şema + w1440),
 *            brief/INDEX-16-3741fb5e.md (w1024),
 *            brief/INDEX-14-dc96f118.md (w360/w768)
 *
 *                  w360        w768        w1024       w1440
 * kök              360×316.5   768×222.5   1024×295    1440×236
 * dikey padding    32          32          32          32
 * üst boşluk       40          40          40          40
 * içerik           328         736         864         1280
 * yatay boşluk     16          16          80          80
 * öğe              104         240         133.2       202.5
 * görünen öğe      3           3           6           6
 * öğe arası        8           8           13          13
 *
 * Öğe genişliği formülle çıkıyor ve dört genişlikte de ölçülen değeri veriyor:
 *   (328 − 2·8)/3 = 104        (864 − 5·13)/6 = 133.2
 *   (736 − 2·8)/3 = 240        (1280 − 5·13)/6 = 202.5
 *
 * 13px tek sayı ama uydurma değil — iki masaüstü genişliğinde de doğrulandı.
 *
 * Sütun sayısı editörden değişebildiği için sabit yazılmadı; formül
 * `--ms-hz-sutun` / `--ms-hz-msutun` üzerinden çalışıyor.
 */

.cc_jcmnugos_noF5eiAsXL .ms-hz {
  width: 100%;
  margin-top: var(--ms-hz-must, 0px);
  /* {sp13} — üst ve alt 32 */
  padding: var(--ms-bosluk-10) 0;
  /* wrapperBg; canlıda #FFF8F8 */
  background: var(--ms-hz-bg, transparent);
}

/* .wrapper — max 1480, ortalı, standart yatay boşluk */
.cc_jcmnugos_noF5eiAsXL .ms-hz-govde {
  box-sizing: border-box;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--ms-bosluk-kenar);
}

/*
 * Şerit başlığı canlıda BOŞ — bu yüzden stili ÖLÇÜLEMEDİ.
 * Dolu kullanımlar için ortalı ve altı boşluklu bırakıldı.
 */
.cc_jcmnugos_noF5eiAsXL .ms-hz-serit-baslik {
  margin-bottom: var(--ms-bosluk-9);
  text-align: center;
}

/*
 * Öğeler yatay kaydırma şeridinde. Swiper taşınmadı; slider ve blog
 * karuselindeki gibi CSS scroll-snap kullanılıyor.
 *
 * DİKKAT: `> *` KULLANMA. ikas her COMPONENT_LIST child'ını `display: contents`
 * olan iki sarmala sarıyor, doğrudan çocuk seçici gerçek öğeye ulaşmıyor
 * (data/README.md, 4 numaralı tuzak). Descendant seçici şart.
 */
.cc_jcmnugos_noF5eiAsXL .ms-hz-serit {
  display: flex;
  /*
   * ÜSTTEN hizalı — varsayılan `stretch` DEĞİL. Ölçümde slaytlar birbirinden
   * farklı yükseklikte (w1440'ta 172 / 154.5 / 137), yani esnetilmiyorlar.
   * Esnetilirse öğe ızgarası kapsayıcı boyuna uzuyor, içindeki
   * `align-items: center` metni dikeyde ortalıyor ve başlıklar farklı
   * yüksekliklere kayıyor. Üstten hizalayınca ikon satırları eşit olduğu için
   * başlıklar aynı satırda başlıyor.
   */
  align-items: flex-start;
  gap: var(--ms-bosluk-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cc_jcmnugos_noF5eiAsXL .ms-hz-serit::-webkit-scrollbar {
  display: none;
}

.cc_jcmnugos_noF5eiAsXL .ms-hz-serit .ms-hz-oge {
  flex-shrink: 0;
  width: calc(
    (100% - (var(--ms-hz-msutun) - 1) * var(--ms-bosluk-3)) / var(--ms-hz-msutun)
  );
  scroll-snap-align: start;
}

/*
 * `oneline` ÖLÇÜLEMEDİ — canlıdaki tek yerleşimde false. Buradaki karşılık
 * ÇIKARIM: öğe ikon üstte/metin altta yerine yan yana diziliyor. Ölçüm
 * gelirse düzeltilmeli.
 */
.cc_jcmnugos_noF5eiAsXL .ms-hz--tek-satir .ms-hz-serit .ms-hz-oge {
  grid-auto-flow: column;
  grid-template-columns: auto 1fr;
  text-align: left;
}

.cc_jcmnugos_noF5eiAsXL .ms-hz--tek-satir .ms-hz-baslik, .cc_jcmnugos_noF5eiAsXL .ms-hz--tek-satir .ms-hz-aciklama {
  margin-left: 0;
}

/*
 * "Küçük Açıklama" — canlı SEPET sayfasındaki şerit varyantı (2026-09-09
 * dökümü): açıklamalar 12px/18, gri rgb(107,114,128). Anasayfa şeridi
 * 14px/17.5 ölçülmüştü (s1733/s541) ve öyle KALIYOR; sepetteki yerleşim
 * bu anahtarı açıyor. Çift sınıf, item'ın kendi (0,1,0) kuralını yener.
 */
.cc_jcmnugos_noF5eiAsXL .ms-hz--kucuk-aciklama .ms-hz-aciklama {
  color: rgb(107, 114, 128);
  font-size: 12px;
  line-height: 18px;
}

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

  .cc_jcmnugos_noF5eiAsXL .ms-hz-govde {
    padding: 0 var(--ms-bosluk-kenar-genis);
  }

  /* {fs2} — masaüstünde öğe arası 13 */
  .cc_jcmnugos_noF5eiAsXL .ms-hz-serit {
    gap: 13px;
  }

  .cc_jcmnugos_noF5eiAsXL .ms-hz-serit .ms-hz-oge {
    width: calc((100% - (var(--ms-hz-sutun) - 1) * 13px) / var(--ms-hz-sutun));
  }
}