/**
 * Düzen ilkelleri — onaylı tasarımdan.
 *
 * Kural: kardeş öğeler arası boşluk `gap` ile verilir, tek tek `margin`
 * ile değil. Margin çakışması hata kaynağıdır ve mobilde sessizce bozulur.
 */

/* Sayfa kapsayıcısı — onaylı `.wrap` (1240px), dar ekranda duyarlı. */
.u-wrap {
  width: var(--w-page);
  margin-inline: auto;
}

/* Bölüm — onaylı artboard'da her bölüm `margin-top: 36px`. */
.u-section { margin-top: var(--sp-section); }

/**
 * Bölüm başlığı: solda başlık + alt açıklama, sağda "tümünü gör".
 * Onaylı ölçüler: h2 22px, alt metin 14px mute, bağlantı 14px/700,
 * blok altı boşluk 14px.
 */
.u-sec-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.u-sec-head__t { display: flex; flex-direction: column; min-width: 0; }
.u-sec-head h2 { font-size: var(--fs-2xl); }
.u-sec-head__sub { color: var(--mute); font-size: var(--fs-md); }
.u-sec-head__more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 24px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  white-space: nowrap;
}

/* Dikey yığın. */
.u-stack { display: flex; flex-direction: column; }
.u-stack[data-gap='1'] { gap: var(--sp-1); }
.u-stack[data-gap='2'] { gap: var(--sp-3); }
.u-stack[data-gap='3'] { gap: var(--sp-5); }
.u-stack[data-gap='4'] { gap: var(--sp-7); }
.u-stack[data-gap='6'] { gap: var(--sp-10); }
.u-stack[data-gap='8'] { gap: var(--sp-12); }

/* Yığın içindeki rozet/düğme kendi genişliğinde kalır (stretch olmaz). */
.u-stack > .c-badge,
.u-stack > .c-btn { align-self: flex-start; }

/* Yatay sıra. */
.u-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
}
.u-row--between { justify-content: space-between; }

/**
 * Otomatik ızgara. `min()` dar ekranda taşmayı imkânsız kılar; medya
 * sorgusu gerekmez.
 */
.u-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 240px), 100%), 1fr));
}
.u-grid[data-min='180'] { --grid-min: 180px; }
.u-grid[data-min='200'] { --grid-min: 200px; }
.u-grid[data-min='260'] { --grid-min: 260px; }
.u-grid[data-min='280'] { --grid-min: 280px; }

/* Sabit sütun sayısı — onaylı tasarımda 3'lü ve 4'lü ızgaralar var. */
.u-cols { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .u-cols[data-cols='2'], .u-cols[data-cols='4'] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .u-cols[data-cols='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .u-cols[data-cols='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* İki sütun: dar ekranda tek, geniş ekranda ana + yan. */
.u-split { display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) {
  .u-split { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); align-items: start; }
  .u-split--wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* Yatayda kayan şerit — sayfa gövdesi kaymaz. */
.u-scroller {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.u-scroller::-webkit-scrollbar { display: none; }
.u-scroller > * { flex: 0 0 auto; }

/* Yazı yardımcıları. */
.u-mute { color: var(--mute); }
.u-small { font-size: var(--fs-sm); color: var(--mute); }
.u-num { font-variant-numeric: tabular-nums; }
.u-head { font-family: var(--font-head); }

/* Uzun içerik sayfayı yatayda kaydırmaz. */
.u-overflow { overflow-x: auto; -webkit-overflow-scrolling: touch; }