/* ==========================================================================
   Layout — konteyner, bölüm, ızgara
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow { max-width: var(--container-narrow); }

.section {
  padding-block: var(--section-pad-y);
}
.section--tight { padding-block: var(--space-7); }
.section--flush { padding-block: 0; }
.section--subtle { background-color: var(--color-bg-subtle); }
.section--muted  { background-color: var(--color-bg-muted); }

.section__header {
  max-width: 640px;
  margin: 0 auto var(--space-7);
  text-align: center;
}
.section__header p { color: var(--color-text-muted); font-size: var(--text-lg); }

/* Otomatik ızgara / Auto grid --------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-5);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Yığın / Stack ----------------------------------------------------------- */
.stack > * + * { margin-top: var(--space-4); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.cluster--center { justify-content: center; }

/* İki sütunlu içerik bloğu / Split ---------------------------------------- */
.split {
  display: grid;
  gap: var(--space-7);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}

/* Sayfa gövdesi / Page shell ---------------------------------------------- */
.page-main { min-height: 60vh; }