/* ==========================================================================
   03 · LAYOUT — kapsayici, bolum, izgara
   Sayfa iskeletini kuran siniflar. Icerik gorunumu 05-components'ta.
   ========================================================================== */

/* --------------------------------------------------------------- Kapsayici */

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

.container--wide { max-width: var(--w-container-lg); }
.container--prose { max-width: var(--w-prose); }

/* ------------------------------------------------------------------ Bolum */

.section {
  padding-block: var(--sp-section);
}

.section--lg { padding-block: var(--sp-section-lg); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Koyu bolum — icindeki tum metin rengi otomatik donusur */
.section--dark {
  background: var(--c-ink);
  color: var(--c-paper);
  color-scheme: dark;
}
/* :not(.btn) SART: aksi halde bu kural (0,1,1) butonlarin kendi
   renk kurallarini (0,1,0) ezer ve ornegin kor zeminli butonun
   yazisi kagit rengine donup okunamaz hale gelir. */
.section--dark a:not(.btn) { color: var(--c-paper); }
.section--dark a:not(.btn):hover { color: var(--c-leaf); }
.section--dark .eyebrow { color: var(--c-muted); }
.section--dark .rule { border-color: var(--c-line-dark); }

/* Acik kagit bolum */
.section--paper {
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

/* -------------------------------------------------------------- Bolum basi */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-5);
  /* Baslik ile icerik arasi: 56px'ten 40px'e. Baslik zaten kendi
     ustunde bolum boslugu tasiyor, ikisi ust uste binince baslik
     havada asili kaliyordu. */
  margin-bottom: clamp(24px, 2.6vw, 40px);
}

.section-head__text { max-width: 56ch; }
.section-head__title { margin-block: var(--sp-2) 0; }
.section-head__lead {
  margin: var(--sp-3) 0 0;
  max-width: 52ch;
  opacity: 0.78;
}

/* ------------------------------------------------------------------ Izgara */

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

/* Iceriğe gore otomatik sutun — kirilma noktasi gerektirmez */
.grid--auto      { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid--auto-sm   { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.grid--auto-lg   { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* Asimetrik ikili duzenler — mobilde tek sutuna duser */
.grid--7-5 { grid-template-columns: 1fr; }
.grid--5-7 { grid-template-columns: 1fr; }
.grid--1-1 { grid-template-columns: 1fr; }

@media (min-width: 900px) {
  .grid--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .grid--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .grid--1-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.grid--start { align-items: start; }
.grid--end   { align-items: end; }

/* ------------------------------------------------------------ Yatay kaydirma
   Kart raylari (konaklama karuseli) icin. Fare ile surukleme JS'te.        */

.rail {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: var(--sp-4);
  cursor: grab;
  overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: 0 0 auto; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }

/* Ray ilerleme cubugu */
.rail-progress {
  position: relative;
  height: 2px;
  background: var(--c-line);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: var(--sp-4);
}
/* Cubuk TAM GENISLIKTE durur; konum ve boy transform ile verilir.
   Onceden `left` ve `width` canlandiriliyordu: ikisi de duzen hesabi
   tetikler ve bu deger her kaydirma olayinda yeniden yaziliyordu,
   yani serit her surukleyiste tarayiciyi bosuna calistiriyordu.
   transform yalnizca bilesim katmaninda calisir. */
.rail-progress__bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0.2);
  background: var(--c-forest);
  border-radius: var(--r-pill);
  transition: transform 140ms linear;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .rail-progress__bar { transition: none; }
}

/* ------------------------------------------------------ Ana icerik boslugu
   Sabit header'in ilk bolumu ortmemesi icin.                              */

.main--offset { padding-top: var(--h-header); }