/* ============================================================
   layout.css — Düzen Sistemi (Layout)
   Container, grid, bölüm boşlukları ve responsive
   breakpoint'ler burada tanımlanır. Mobile-first yaklaşım.
   ============================================================ */

/* --- Container (İçerik Sarmalayıcı) --- */

/* Varsayılan container — içeriği ortalayıp max genişlik verir */
.container {
  width: 100%;
  max-width: var(--container-max);
  /* Yatay ortalama */
  margin-left: auto;
  margin-right: auto;
  /* Yan boşluklar — mobilde içerik ekrana yapışmasın */
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Dar container — uzun metinler, hakkımızda gibi sayfalar */
.container-narrow {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Geniş container — hero, tam genişlik bölümleri */
.container-wide {
  max-width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Tam genişlik container — kenardan kenara */
.container-full {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* --- Bölüm Boşlukları (Section Spacing) --- */

/* Standart bölüm — dikey boşluk */
.section {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

/* Büyük boşluklu bölüm — önemli bölümler arasında */
.section-lg {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
}

/* Küçük boşluklu bölüm — sıkışık alanlar */
.section-sm {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

/* Açık gri arka planlı bölüm — görsel ayrım için */
.section-gray {
  background-color: var(--color-gray-100);
}

/* Koyu arka planlı bölüm — kontrast yaratmak için */
.section-dark {
  background-color: var(--color-dark);
  color: var(--color-white);
}

/* Koyu bölümdeki paragrafları açık yapar */
.section-dark p {
  color: var(--color-gray-300);
}

/* --- Grid Sistemi --- */

/* Ana grid container — CSS Grid kullanır */
.grid {
  display: grid;
  /* Varsayılan boşluk */
  gap: var(--space-lg);
}

/* Grid öğelerinin varsayılan min-width:auto degeri, icerik (uzun kelime/ikon)
   viewport'tan genis oldugunda tum sayfanin yatay tasmasina yol acabiliyordu
   (klasik CSS Grid davranisi) - mobilde bu taşmayı önler. */
.grid > * {
  min-width: 0;
}

/* 2 sütunlu grid — mobilde tek sütun */
.grid-2 {
  grid-template-columns: 1fr;
}

/* 3 sütunlu grid — mobilde tek sütun */
.grid-3 {
  grid-template-columns: 1fr;
}

/* 4 sütunlu grid — mobilde tek sütun */
.grid-4 {
  grid-template-columns: 1fr;
}

/* Flexbox satırı — esnek hizalama için */
.flex {
  display: flex;
}

/* Dikey ortalama */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Yatay dağılım — iki uca yasla */
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Sütun yönünde flex */
.flex-col {
  display: flex;
  flex-direction: column;
}

/* Flex boşlukları */
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }

/* --- Responsive Breakpoints (Mobile-First) --- */

/* Tablet ve üzeri — 768px */
@media (min-width: 768px) {

  /* Container yan boşluğunu artır */
  .container,
  .container-narrow,
  .container-wide {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  /* Bölüm boşluklarını artır */
  .section {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
  }

  .section-lg {
    padding-top: var(--space-5xl);
    padding-bottom: var(--space-5xl);
  }

  /* 2 sütunlu grid — tablette 2 sütun */
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 3 sütunlu grid — tablette 2 sütun */
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 4 sütunlu grid — tablette 2 sütun */
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Masaüstü — 1024px ve üzeri */
@media (min-width: 1024px) {

  /* 3 sütunlu grid — masaüstünde 3 sütun */
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 4 sütunlu grid — masaüstünde 4 sütun */
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Büyük masaüstü — 1200px */
@media (min-width: 1200px) {

  /* Container yan boşluğunu artır */
  .container,
  .container-narrow,
  .container-wide {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}