/* ==========================================================================
   NOVA BALO & DAVET — Yerleşim katmanı
   Mobil öncelikli. Kırılma noktaları: 480 / 768 / 1024 / 1440
   ========================================================================== */

/* --------------------------------------------------------------------------
   Kapsayıcılar
   -------------------------------------------------------------------------- */

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

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

/* Tam genişlik — kenar boşluğu yok (fotoğraf şeritleri) */
.container--bleed { max-width: none; padding-inline: 0; }

/* --------------------------------------------------------------------------
   Bölümler
   -------------------------------------------------------------------------- */

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--flush-bottom { padding-bottom: 0; }
.section--flush-top { padding-top: 0; }

/* Koyu bölüm — metin renkleri otomatik ters çevrilir */
.section--dark,
.is-dark {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
}

.section--band { background: var(--bg-band); }
.section--surface { background: var(--bg-surface); }

/* Referanstaki ince çizgili kâğıt dokusu — saf CSS, ağ isteği yok */
.section--texture {
  background-color: var(--c-cream);
  background-image: var(--texture-stripe);
}

/* Bölüm başlığı bloğu */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
  max-width: 54rem;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.section-head--left {
  align-items: flex-start;
  text-align: start;
  margin-inline: 0;
}

/* --------------------------------------------------------------------------
   Izgaralar
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: var(--space-5); }

/* Otomatik sığdıran kart ızgarası — kırılma noktası gerektirmez */
.grid--cards {
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .grid--cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--cards { grid-template-columns: repeat(3, 1fr); }
  .grid--cards-2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-7); }
}

/* İki sütunlu bölünmüş yerleşim (görsel + metin) */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 6rem);
  }
  .split--media-right .split__media { order: 2; }
}

/* --------------------------------------------------------------------------
   Fotoğraf şeritleri
   -------------------------------------------------------------------------- */

/* Üç görselli asimetrik şerit (referanstaki 455/942/456 oranı) */
.photo-strip {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .photo-strip { grid-template-columns: 1fr 2fr 1fr; }
}

/* Üç dikey görsel — tam genişlik */
.photo-trio {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 640px) {
  .photo-trio { grid-template-columns: repeat(3, 1fr); }
}

/* --- Telefonda galeriler İSTİFLENMEZ, kaydırmalı ray olur -----------------
   Masaüstündeki ızgara telefonda uçsuz bir sütuna dönüşüyordu. Bunun yerine
   editoryal uygulama dili: yatay kaydırma + mıknatıslı durak (scroll-snap)
   + bir sonraki karenin kenardan görünmesi (peek). Sayfa kısalır, gezinme
   başparmakla yapılır — telefon için verilmiş bir tasarım kararı. */
@media (max-width: 639px) {
  .photo-strip,
  .photo-trio {
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .photo-strip::-webkit-scrollbar,
  .photo-trio::-webkit-scrollbar { display: none; }

  .photo-strip > *,
  .photo-trio > * { scroll-snap-align: center; }

  /* Karışık oranlı şeritte kareler rayda tek oranda akar; galeri sıraları
     zaten kendi içinde tutarlı oranda olduğundan onlara dokunulmaz */
  .photo-strip .ratio { aspect-ratio: 3 / 4; }
}

/* Instagram ızgarası: mobilde 3, masaüstünde 6 sütun */
.social-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

@media (min-width: 900px) {
  .social-grid { grid-template-columns: repeat(6, 1fr); }
}

/* Sabit en-boy oranı kutuları — görsel yüklenmeden yer ayrılır (CLS = 0) */
.ratio {
  position: relative;
  overflow: hidden;
  background: rgba(27, 61, 75, 0.07);
}

.ratio > img,
.ratio > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

@media (max-width: 767px) {
  /* Mobilde çok geniş oranlar okunmaz hâle gelir — daralt */
  .ratio--pano { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   Kaydırma ile sabitlenen (sticky) yan sütun
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .sticky-col {
    position: sticky;
    top: 7.5rem;
    align-self: start;
  }
}

/* --------------------------------------------------------------------------
   Yardımcı sınıflar
   -------------------------------------------------------------------------- */

.stack { display: flex; flex-direction: column; }
.stack--2 { gap: var(--space-2); }
.stack--3 { gap: var(--space-3); }
.stack--4 { gap: var(--space-4); }
.stack--5 { gap: var(--space-5); }
.stack--6 { gap: var(--space-6); }

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

.cluster--center { justify-content: center; }
.cluster--between { justify-content: space-between; }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: var(--measure); }

/* Yalnızca belirli genişliklerde göster/gizle */
@media (max-width: 767px)  { .hide-sm { display: none !important; } }
@media (min-width: 768px)  { .show-sm-only { display: none !important; } }
@media (max-width: 1023px) { .hide-md { display: none !important; } }
@media (min-width: 1024px) { .show-md-only { display: none !important; } }