/* ===== Xomage Process Steps — üretim aşamaları mint şeridi =====
 * Tasarım (Web ana sayfa 1:101): Rectangle 51 → y 4405-4744, h 340, #e0faf9,
 * tam genişlik. İkonlar Top 4485 (125x140), etiketler 20/42 #262626.
 */

.cc_mfkw8zzp_BT1BuOkTL1 .xomage-process-steps {
  /* Şeridin arka planı section kökünde durur — tasarımda full-bleed. */
  display: block;
  width: 100%;
}

.cc_mfkw8zzp_BT1BuOkTL1 .xomage-process-steps__container {
  /* Tasarım: 4485 - 4405 = 80px üst, 4744 - 4667 = 77px alt → tek değere yuvarlandı. */
  padding-block: 2.5rem;
}

.cc_mfkw8zzp_BT1BuOkTL1 .xomage-process-steps__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem 3rem;
}

/*
 * IkasComponentRenderer çocukları `display: contents` sarmalayıcılara koyuyor,
 * bu yüzden düzen öğesi torun; zincir değişirse diye ölçü iki seviyeye de yazılır
 * (emsal: XomageAcademyTrainings).
 */
.cc_mfkw8zzp_BT1BuOkTL1 .xomage-process-steps__list > * > *, .cc_mfkw8zzp_BT1BuOkTL1 .xomage-process-steps__list > * > * > * {
  flex: 0 0 auto;
}

@media (min-width: 640px) {
  .cc_mfkw8zzp_BT1BuOkTL1 .xomage-process-steps__container {
    padding-block: 3.75rem;
  }

  /*
   * `nowrap` YOK — ölçüldü (08.09.2026, statik koşum): tasarımdaki üç aşama her
   * genişlikte tek satıra sığıyor, ama mağazacı editörden dördüncü/beşinci aşamayı
   * eklediğinde sabit gap ile satır viewport'u aşıyordu (768'de 895px, 1280'de
   * 1289px yatay taşma). `wrap` üç aşamada görünümü hiç değiştirmez, fazlasında
   * taşma yerine alt satıra sarar.
   */
  .cc_mfkw8zzp_BT1BuOkTL1 .xomage-process-steps__list {
    gap: 2.5rem 6rem;
  }
}

@media (min-width: 1024px) {
  .cc_mfkw8zzp_BT1BuOkTL1 .xomage-process-steps__container {
    padding-block: 5rem; /* 80px */
  }

  /*
   * Tasarımda üç aşamanın merkezleri 648 / 960 / 1229 — yani aralıklar 312 ve 269px
   * ile EŞİT DEĞİL ve grup 22px sola kaçık. Elle yerleştirmeden gelen bir sapma;
   * ortalama aralık (290px, ikon genişliği 125 çıkınca 165px) tek gap'e yuvarlandı
   * ve grup gerçekten ortalandı. Gerekçe: docs/anasayfa-sayfasi.md.
   */
  .cc_mfkw8zzp_BT1BuOkTL1 .xomage-process-steps__list {
    /* Satır arası ayrı: sarma durumunda 165px'lik dikey boşluk aşırı olurdu. */
    gap: 2.5rem 10.3125rem; /* 165px */
  }
}