/* =============================================================================
   LAYOUT — Konteyner, bölüm ritmi, ızgara yardımcıları
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Konteyner
   Bootstrap'in .container'ı yerine site geneli tek bir ölçü kullanılır.
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
}

/* Daha dar okuma genişliği — uzun metin blokları için */
.shell--narrow { max-width: 940px; }

/* Kenardan taşan geniş kompozisyonlar */
.shell--wide { max-width: 1560px; }

/* -----------------------------------------------------------------------------
   2. Bölüm ritmi
   Her bölüm nefes alsın; dikey boşluk akışkan ölçekle verilir.
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-sm); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Zemin varyantları */
.section--ivory { background: var(--ivory); }
.section--deep  { background: var(--ivory-deep); }
.section--wash  { background: var(--rose-wash); }
.section--dark  { background: var(--ink); color: rgba(255, 255, 255, 0.72); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }

/* -----------------------------------------------------------------------------
   3. Bölüm başlığı
   Sol hizalı (varsayılan) ve ortalanmış varyantlar.
   -------------------------------------------------------------------------- */
.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 4vw, 4.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--wide { max-width: 900px; }
.section-head h2 { margin-bottom: var(--sp-4); }
.section-head .lead { margin-bottom: 0; }

/* Başlık + yan aksiyon (örn. "Tümünü gör") aynı satırda */
.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: clamp(2.5rem, 4vw, 4.5rem);
}
.section-head-row .section-head { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
   4. Izgara yardımcıları
   Bootstrap ızgarası kullanılabilir; bunlar eşit yükseklikli kart dizilimleri
   için daha temiz bir alternatif sağlar.
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: clamp(1.25rem, 2.2vw, 2.25rem);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Otomatik sığdırma — kart genişliği tabanlı */
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* İki sütunlu içerik/görsel bloğu */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(2rem, 5vw, 5.5rem);
}
.split--media-right > .split__media { order: 2; }
.split--wide-text { grid-template-columns: 1.15fr 1fr; }
.split--wide-media { grid-template-columns: 1fr 1.15fr; }

/* -----------------------------------------------------------------------------
   5. Görsel çerçeveleri
   -------------------------------------------------------------------------- */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--sand);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }

.frame--portrait { aspect-ratio: 3 / 4; }
.frame--square   { aspect-ratio: 1 / 1; }
.frame--landscape{ aspect-ratio: 4 / 3; }
.frame--wide     { aspect-ratio: 16 / 9; }
.frame--tall     { aspect-ratio: 2 / 3; }

/* Görselin arkasına kayan ince çerçeve — kompozisyona derinlik katar */
.frame-offset { position: relative; }
.frame-offset::after {
  content: '';
  position: absolute;
  inset: auto -18px -18px auto;
  width: 62%;
  height: 62%;
  border: 1px solid var(--line-rose);
  border-radius: var(--r-md);
  z-index: -1;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   6. Ayırıcılar
   -------------------------------------------------------------------------- */
.rule { height: 1px; background: var(--line); border: 0; }
.rule--soft { background: var(--line-soft); }
.rule--invert { background: var(--line-invert); }

/* Ortada küçük gül tonlu işaret taşıyan ayırıcı */
.rule-marked {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--rose);
}
.rule-marked::before,
.rule-marked::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* -----------------------------------------------------------------------------
   7. Küçük yardımcılar
   -------------------------------------------------------------------------- */
.stack-sm > * + * { margin-top: var(--sp-3); }
.stack    > * + * { margin-top: var(--sp-5); }
.stack-lg > * + * { margin-top: var(--sp-8); }

.flow-tight p { margin-bottom: var(--sp-3); }

.relative { position: relative; }
.overflow-clip { overflow: hidden; }

/* -----------------------------------------------------------------------------
   8. Yardımcı sınıflar
   Şablonlarda satır içi stil kullanmamak için tanımlanan küçük araç seti.
   Bootstrap ile çakışmaması adına "u-" öneki kullanılır.
   -------------------------------------------------------------------------- */

/* Boşluk */
.u-m0    { margin: 0; }
.u-mb-5  { margin-bottom: var(--sp-5); }
.u-mb-6  { margin-bottom: var(--sp-6); }
.u-mb-8  { margin-bottom: var(--sp-8); }
.u-pt-header { padding-top: calc(var(--header-h) + var(--section-y)); }

/* Izgara sütun sayısı geçersiz kılma */
.u-cols-1 { grid-template-columns: 1fr; }
.u-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Hizalama */
.u-items-start { align-items: start; }

/* Tipografi ölçekleri */
.u-text-xs { font-size: var(--fs-xs); }
.u-text-sm { font-size: var(--fs-sm); }
.u-text-h3 { font-size: var(--fs-h3); }
.u-text-h4 { font-size: var(--fs-h4); }

/* Küçük büyük harfli etiket — tarih, not, üst bilgi satırları */
.u-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Metin renkleri */
.u-text-body    { color: var(--ink-600); }
.u-text-soft    { color: var(--ink-400); }
.u-text-white   { color: var(--white); }
.u-text-on-dark { color: rgba(255, 255, 255, 0.66); }
.u-text-on-dark-soft { color: rgba(255, 255, 255, 0.6); }

/* Okuma genişliği */
.u-measure { max-width: 52ch; }

/* address etiketinin varsayılan italiğini kaldırır */
.u-not-italic { font-style: normal; }

/* Koyu zeminde üst çizgili blok */
.u-rule-top-invert {
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-invert);
}

/* Koyu zeminde ikon rozeti */
.feature__icon--invert {
  background: rgba(201, 152, 152, 0.16);
  color: var(--rose-soft);
}