/* =====================================================================
 * layout.css — SAYFA İSKELETİ: GRID, CONTAINER, SECTION RİTMİ
 * ---------------------------------------------------------------------
 * İçerik:
 *   1. Container ve içerik genişlikleri (içerik tipine göre seçilir,
 *      her şey max-w-7xl değil)
 *   2. Bölüm ritmi (py-* mekanik değil; içeriğe göre değişir)
 *   3. Çok sütunlu grid sistemleri (5/7, 4/8, 12 sütun)
 *   4. Asimetrik kompozisyon yardımcıları
 *   5. Tam genişlik / kenar boşluğu yardımcıları
 *   6. Sticky / yapışkan yardımcılar
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. CONTAINER
 * İçerik tipine göre sınıf: prose, form, app, wide, full.
 * Yan kenar boşluğu 24px (mobil) / 40px (masaüstü).
 * --------------------------------------------------------------------- */
.be-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@media (min-width: 48em) {
  .be-container { padding-inline: var(--space-8); }
}

.be-container--prose { max-width: var(--w-prose); }
.be-container--form  { max-width: var(--w-form);  }
.be-container--app   { max-width: var(--w-app);   }
.be-container--wide  { max-width: var(--w-wide);  }
.be-container--full  { max-width: var(--w-full);  }

/* Esnek konteyner: içerideki en uzun alt öğeye göre genişler */
.be-container--fluid { max-width: none; }

/* ---------------------------------------------------------------------
 * 2. BÖLÜM RİTMİ
 * py-24 şablonunu kırmak için farklı ritimler.
 * --------------------------------------------------------------------- */
.be-section {
  position: relative;
  padding-block: var(--space-10);
}

.be-section--tight  { padding-block: var(--space-8); }
.be-section--normal { padding-block: var(--space-10); }
.be-section--open   { padding-block: var(--space-12); }
.be-section--vast   { padding-block: var(--space-13); }
.be-section--narrative { padding-block: var(--space-14); }

.be-section--alt {
  background: var(--canvas-alt);
}

.be-section--deep {
  background: var(--canvas-deep);
}

.be-section--dark {
  background: var(--dark-0);
  color: var(--ink-inverse);
}

@media (min-width: 64em) {
  .be-section--tight  { padding-block: var(--space-10); }
  .be-section--normal { padding-block: var(--space-12); }
  .be-section--open   { padding-block: var(--space-13); }
  .be-section--vast   { padding-block: var(--space-14); }
}

/* ---------------------------------------------------------------------
 * 3. GRID SİSTEMLERİ
 * 12 sütun temel; asimetrik 5/7 ve 4/8 sık kullanılır.
 * --------------------------------------------------------------------- */
.be-grid {
  display: grid;
  gap: var(--space-7);
}

.be-grid--12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

@media (min-width: 48em) {
  .be-grid--5-7    { grid-template-columns: 5fr 7fr; }
  .be-grid--7-5    { grid-template-columns: 7fr 5fr; }
  .be-grid--4-8    { grid-template-columns: 4fr 8fr; }
  .be-grid--8-4    { grid-template-columns: 8fr 4fr; }
  .be-grid--3-9    { grid-template-columns: 3fr 9fr; }
  .be-grid--2-10   { grid-template-columns: 2fr 10fr; }
}

/* 12 sütun içinde col span yardımcıları */
@media (min-width: 48em) {
  .be-col-5  { grid-column: span 5; }
  .be-col-6  { grid-column: span 6; }
  .be-col-7  { grid-column: span 7; }
  .be-col-8  { grid-column: span 8; }
  .be-col-9  { grid-column: span 9; }
  .be-col-10 { grid-column: span 10; }
  .be-col-12 { grid-column: span 12; }

  .be-start-1 { grid-column-start: 1; }
  .be-start-2 { grid-column-start: 2; }
  .be-start-3 { grid-column-start: 3; }
  .be-start-4 { grid-column-start: 4; }
  .be-start-5 { grid-column-start: 5; }
  .be-start-6 { grid-column-start: 6; }
  .be-start-7 { grid-column-start: 7; }
}

/* Satır içi iki sütun (yan yana bilgi blokları) */
.be-grid--pair {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 48em) {
  .be-grid--pair { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------
 * 4. OTOMATİK YIĞMA / SATIR İÇİ
 * --------------------------------------------------------------------- */
.be-stack > * + * { margin-top: var(--space-4); }
.be-stack--lg > * + * { margin-top: var(--space-7); }
.be-stack--sm > * + * { margin-top: var(--space-2); }

.be-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.be-row--between { justify-content: space-between; }
.be-row--end     { justify-content: flex-end; }

/* ---------------------------------------------------------------------
 * 5. STICKY / YAPIŞKAN
 * --------------------------------------------------------------------- */
.be-sticky-top {
  position: sticky;
  top: var(--space-9);
  align-self: start;
}

/* Sayfa kenarı çizgisi (örn. uzun bölümlerde dikey cetvel hissi) */
.be-rule-left {
  position: relative;
  padding-left: var(--space-6);
}
.be-rule-left::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  bottom: 0.4em;
  width: 1px;
  background: var(--line);
}

.be-rule-top {
  position: relative;
  padding-top: var(--space-6);
}
.be-rule-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}

/* ---------------------------------------------------------------------
 * 6. TAM GENİŞLİK
 * Konteyner dışına taşan bölümler (örn. tam ekran hero) için.
 * --------------------------------------------------------------------- */
.be-full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ---------------------------------------------------------------------
 * 7. ANA SAYFA BÖLÜMLERİ ARASI GEÇİŞ
 * Her bölümün altında hafif nefes payı.
 * --------------------------------------------------------------------- */
.be-section + .be-section { border-top: 1px solid var(--line-soft); }