/* ===== Xomage Akademi — Diğer Eğitimleri Keşfet ===== */

/*
 * "Web xomage akademi" (50:84), 1920 tasarım genişliği:
 *   bölüm başlığı @x=48, y=1413, 40px SemiBold
 *   "Tümünü gör" @x=1725, 24px Medium, altı çizili, #006673
 *   4 kart, her biri 434x520 @ x=44 / 510 / 976 / 1442 → kolon arası 32
 *   kartların altı 2031, footer zemini 2237 → 206px alt boşluk
 *
 * Tasarımın kart satırı 44'ten 1876'ya, yani 1832 geniş; `xomage-container`
 * ise 1920'de 1632 içerik verir. Konvansiyon (CLAUDE.md 7) section'ın container
 * kullanmasını şart koştuğu ve kenara dayanan düzen 1280'de ekran kenarına
 * taştığı için satır container'a çekildi — kart genişliği 434 yerine 384 olur.
 *
 * Mobil ("Mobil Xomage akademi" 82:1041, 900 geniş): kartlar yan yana dizili ve
 * ikinci kart frame kenarından taşıyor — yani yatay kaydırma çizilmiş. 1024
 * altında satır kaydırılabilir, 1024 ve üstünde 4 kolonluk ızgaraya döner.
 * Kaydırma sağda ekran kenarına kadar uzasın diye konteyner iç boşluğu negatif
 * marjla telafi edilir.
 */

.cc_mfkw8zzp_rB1gcSHyCK .xomage-academy-trainings {
  width: 100%;
}

.cc_mfkw8zzp_rB1gcSHyCK .xomage-academy-trainings__container {
  padding-block: 2.5rem 4rem;
}

.cc_mfkw8zzp_rB1gcSHyCK .xomage-academy-trainings__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.cc_mfkw8zzp_rB1gcSHyCK .xomage-academy-trainings__title {
  margin: 0;
}

.cc_mfkw8zzp_rB1gcSHyCK .xomage-academy-trainings__all {
  color: var(--xomage-link);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  white-space: nowrap;
}

.cc_mfkw8zzp_rB1gcSHyCK .xomage-academy-trainings__list {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  /* Kart gölgesi (0 0 20px) kırpılmasın */
  padding-block: 1.25rem;
  margin-right: -1rem;
  padding-right: 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

/*
 * IkasComponentRenderer çocukları sarmalayıcılar içine koyar (bkz. Features);
 * sarmalayıcılar `display: contents` olduğu için düzen öğesi kartın kendisidir,
 * ama zincir değişirse diye ölçü hem sarmalayıcıya hem karta yazılır.
 */
.cc_mfkw8zzp_rB1gcSHyCK .xomage-academy-trainings__list > * > *, .cc_mfkw8zzp_rB1gcSHyCK .xomage-academy-trainings__list > * > * > * {
  flex: 0 0 auto;
  width: min(72vw, 20rem);
  scroll-snap-align: start;
}

.cc_mfkw8zzp_rB1gcSHyCK .xomage-academy-trainings__empty {
  margin: 0;
  color: var(--kombos-gray-400);
}

@media (min-width: 640px) {
  .cc_mfkw8zzp_rB1gcSHyCK .xomage-academy-trainings__container {
    padding-block: 3.5rem 5rem;
  }

  .cc_mfkw8zzp_rB1gcSHyCK .xomage-academy-trainings__head {
    margin-bottom: 1.25rem;
  }

  .cc_mfkw8zzp_rB1gcSHyCK .xomage-academy-trainings__list {
    gap: 1.5rem;
    margin-right: -1.5rem;
    padding-right: 1.5rem;
  }

  .cc_mfkw8zzp_rB1gcSHyCK .xomage-academy-trainings__list > * > *, .cc_mfkw8zzp_rB1gcSHyCK .xomage-academy-trainings__list > * > * > * {
    width: min(45vw, 22rem);
  }
}

@media (min-width: 768px) {
  .cc_mfkw8zzp_rB1gcSHyCK .xomage-academy-trainings__list {
    margin-right: -2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .cc_mfkw8zzp_rB1gcSHyCK .xomage-academy-trainings__container {
    /* Tasarım: kartların altı ile footer arası 206px */
    padding-block: 6.75rem 12.5rem;
  }

  .cc_mfkw8zzp_rB1gcSHyCK .xomage-academy-trainings__head {
    margin-bottom: 1.5rem;
  }

  .cc_mfkw8zzp_rB1gcSHyCK .xomage-academy-trainings__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    overflow-x: visible;
    margin-right: 0;
    padding-right: 0;
  }

  .cc_mfkw8zzp_rB1gcSHyCK .xomage-academy-trainings__list > * > *, .cc_mfkw8zzp_rB1gcSHyCK .xomage-academy-trainings__list > * > * > * {
    width: auto;
  }
}