/* ==========================================================================
   Delta Motor — Hakkimizda
   ========================================================================== */

/* --- Anlati bloklari ---------------------------------------------------- */

.story {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 960px) {
  .story { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

.story__media {
  min-width: 0;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  overflow: hidden;
}

.story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story__text {
  display: grid;
  align-content: start;
  gap: var(--s-5);
  min-width: 0;
}

.story__p {
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--c-ink-mute);
  max-width: 46ch;
  text-wrap: pretty;
}

/* Ilk paragrafi one cikar */
.story__p--lead {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--c-ink);
}

/* Gorseli saga alir. Ust uste gelen anlati bloklari hep ayni yonde
   dizilirse sayfa tek bir kolona duser gibi okunur; zikzak ritmi bunu
   kirar. Yalnizca iki sutunlu olcuden itibaren: tek sutunda gorsel
   METNIN USTUNDE kalmali, `order` orada blogun basligini asagi iterdi. */
@media (min-width: 960px) {
  .story--flip .story__media { order: 2; }
}

/* Baslik satirlarini markup'a sabitler. Vizyon/misyon basliklari virgulle
   ikiye ayrilmis iki ifadedir; dogal sarmaya birakilirsa kirilma virgulun
   ortasindan gecer. `text-wrap: balance` satirlari esitler ama NEREDEN
   kirilacagini secmez — DESIGN.md'deki hero basligi kuralinin aynisi. */
.story__title-line {
  display: block;
}

/* Baslik iki sutunun USTUNDE, tam genislikte durur.
   Olculdu: en uzun baslik satiri 44px'te 910px yer kapliyor, metin sutunu
   ise 562px. Sutuna sigdirmak icin punto 27px'e inmeliydi — o zaman baslik
   atolye basliginin (44px) asti gibi okunurdu, oysa bu bloklar onun
   kardesi. Tam genislikte punto korunur ve yazilan iki satir gercekten
   iki satir kalir. */
.story__head {
  grid-column: 1 / -1;
}

/* --- Kaydirilabilir anlati ----------------------------------------------
   Marka hikayesi gorselden cok daha uzun (5 paragraf, 1565 karakter);
   metin sutunu gorselin altina tasip blogu dengesiz birakiyordu. Metin
   kendi icinde kayar, solundaki dikey ray ne kadar okundugunu gosterir.
   Ray projenin imza olcu rayiyla ayni dil: hairline zemin, mavi dolgu.

   YALNIZCA >=960px. Tek sutuna dusen olcude ic kaydirma dusmanca olur —
   parmak kaydirirken sayfanin mi kutunun mu kayacagi belirsizlesir ve
   kucuk ekranda okunacak alan iyice daralir. Orada metin dogal akar.
   ----------------------------------------------------------------------- */

/* Tek sutunlu olcude ray hic cizilmez: ic kaydirma orada kapali oldugu
   icin gosterecegi bir sey yok. */
.story__rail { display: none; }

@media (min-width: 960px) {
  .story__reader {
    display: grid;
    grid-template-columns: 2px minmax(0, 1fr);
    gap: var(--s-5);
    min-height: 0;
  }

  .story__rail {
    display: block;
    position: relative;
    border-radius: 1px;
    background: var(--c-line);
  }

  /* Dolgu yuksekligi JS'in yazdigi --read (0..1) degerinden gelir.
     `linear` gecis bilerek: kaydirma zaten surekli bir hareket, uzerine
     ivmeli bir egri binerse ray parmagin gerisinde kalir. */
  .story__rail::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: calc(var(--read, 0) * 100%);
    border-radius: 1px;
    background: var(--c-blue);
    transition: height var(--d-fast) linear;
  }

  .story__body {
    display: grid;
    align-content: start;
    gap: var(--s-5);
    min-height: 0;
    max-height: var(--reader-h, 26rem);
    overflow-y: auto;
    /* Kaydirma zinciri BILEREK acik (`contain` DEGIL): metnin sonuna
       gelindiginde tekerlek sayfayi kaydirmaya devam eder, okur kutunun
       icinde kilitli kalmaz. `contain` zinciri keser ve ziyaretci
       asagi inmek icin imleci kutunun disina tasimak zorunda kalir. */
    overscroll-behavior: auto;
    padding-right: var(--s-4);
    /* Alt kenar soluyor: asagida devam eden metin oldugunu soyler.
       Yalnizca kaydirilabilir haldeyken — kisa metinde solma, metin
       eksikmis gibi gorunurdu. */
    /* Cubuk gizlenmiyor: macOS'ta zaten uzerine binen (overlay) turden,
       yer kaplamiyor; Windows'ta ise gizlemek fareyle surukleyerek
       kaydirmayi elden alirdi. Soluk birakiliyor ki mavi ray one ciksin. */
    scrollbar-width: thin;
    scrollbar-color: var(--c-line-strong) transparent;
  }

  .story__reader.is-scrollable .story__body {
    mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
  }

  /* Kaydirilabilir bolge klavyeyle gezilebilir olmali; yoksa fare
     kullanmayan ziyaretci metnin altini hic goremez. */
  .story__body:focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: 4px;
  }

  /* Ray yalnizca gercekten kaydirilabilir blokta gorunur. */
  .story__reader:not(.is-scrollable) .story__rail { visibility: hidden; }
}

/* GUVENCE — olcume dayali, silme.
   `.reveal` opacity:0 ile baslar ve tetikleyicisi SAYFA kaydirmasidir.
   Kaydirma kutusunun icinde alta gizli kalan bir oge goruntu alanina hic
   girmez, dolayisiyla hic acilmaz: olculdu, bes paragrafin ikisi kutu
   sonuna kadar kaydirilsa bile opacity 0'da kaldi — metin okunamiyordu.
   Kutu icindeki paragraflardan sinif kaldirildi; bu kural ileride biri
   yeniden eklerse metnin kaybolmasini onler. Kutunun DISINDAKI
   `.reveal` ogeleri (gorsel, baslik) normal calismaya devam eder. */
.story__body .reveal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* --- Gorselsiz anlati blogu (`.story--full`) ------------------------------
   Atolye blogundan gorsel kaldirildi (kullanici karari, 2026-09-01): metin
   tam genislikte tek kolon akar. Iki sonuc birbirine bagli:
   * Ic kaydirma kutusu (`.story__reader`) markup'tan CIKARILDI. Kutunun
     varlik sebebi metnin gorselden uzun olup sutunu dengesiz birakmasiydi;
     gorsel gidince olculecek bir kardes kalmaz. `initReader` yuksekligi
     gorselin alt kenarindan turetir (`--reader-h`), kutu birakilsaydi
     CSS'teki 26rem yedegine duser ve metin sebepsiz bir pencerede
     kaydirilirdi.
   * Paragraf olcu siniri KALDIRILDI. Blogun geri kalaninda `max-width: 46ch`
     dar sutun icindir; burada kullanici tam genisligi secti, uyari verildi
     (1200px'de satir ~140 karakter).
   SIRA: bu kural `.story`nin 960px medya sorgusundan SONRA gelmeli —
   ozgullukleri esit, once yazilirsa iki kolon geri doner. */
.story--full { grid-template-columns: minmax(0, 1fr); }

.story--full .story__p { max-width: none; }

/* Iki anlati blogu arasindaki ayrac. Bolum boslugu tek basina yeterli
   degil: ikisi de ayni yapida oldugu icin blogun nerede bittigi
   belirsiz kaliyor. */
.story + .story {
  /* Iki anlati blogu ARASI, iki bolum arasiyla ayni okunmali: ikisi de
     `--sec-y` + `--sec-y`. Serbest bir clamp yazilirsa sayfada ikinci bir
     ritim olusur ve tam da kullanicinin "hepsi ayni olsun" dedigi sey bozulur. */
  margin-top: var(--sec-y);
  padding-top: var(--sec-y);
  border-top: 1px solid var(--c-line);
}

/* --- Calisma ilkeleri ---------------------------------------------------
   Numaralandirilmaz: bunlar bir sira degil, ayni anda gecerli kurallar.
   ----------------------------------------------------------------------- */

.rules {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border-block: 1px solid var(--c-line);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
  .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .rules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rule {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
  background: var(--c-bg);
  transition: background var(--d-base) var(--e-out);
}

.rule:hover { background: var(--c-surface); }

.rule__mark {
  width: 1.5rem;
  height: 1px;
  background: var(--c-red);
}

.rule__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-variation-settings: 'wdth' var(--wdth-tight);
  font-size: var(--t-lg);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  line-height: 1.1;
}

.rule__note {
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--c-ink-mute);
}

/* --- Ekip: kisiler degil, roller ---------------------------------------- */

.roles {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
  .roles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.role {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-blue);
  border-radius: var(--r-md);
}

.role:nth-child(2) { border-top-color: var(--c-red); }
.role:nth-child(3) { border-top-color: var(--c-ink); }

.role__id {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

.role__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-variation-settings: 'wdth' var(--wdth-tight);
  font-size: var(--t-lg);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  line-height: 1.1;
}

.role__note {
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--c-ink-mute);
}

.role__lift {
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

/* --- Kunye ve rakamlar -------------------------------------------------- */

.facts {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

/* DOM sirasi: baslik -> gorsel -> metin. Tek sutunda sayfanin geri
   kalaniyla ayni ritim okunur (vizyon/misyon bloklari da boyle diziliyor);
   gorsel en alta dusmez. Sira CSS `order` ile degil MARKUP'ta kuruldu:
   ekran okuyucu ve klavye de ayni sirayi izlesin. */

@media (min-width: 900px) {
  /* Iki sutunda eski gorunum korunur: solda baslik ustte metin altta,
     sagda gorsel iki satira yayilir. Alanlar isimlendirildigi icin
     markup sirasi degistigi halde yerlesim ayni kaldi. */
  .facts {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'head  media'
      'text  media';
    align-content: start;
  }

  .facts__head          { grid-area: head; }
  .facts .story__media  { grid-area: media; }
  .facts .story__text   { grid-area: text; }

  /* Gorsel, metin sutununun yuksekligini alir (kare DEGIL).
     Olculdu: kare kaldiginda gorsel sutun genisligiyle birlikte kuculuyor
     (1440px'de 576, 1100px'de 484, 940px'de 414) ama sol sutun icerigi
     ~580px'de sabit kaliyor; tasma 1px'ten 172px'e cikiyordu. Punto
     ayariyla cozulemez — dar ekranda yaziyi daha da kucultmek okunurlugu
     bozar. Bu blok icin gorsel referans degil, metin referans.
     Kirpma `object-fit: cover` ile yonetiliyor. */
  .facts { align-items: stretch; }

  .facts .story__media {
    height: 100%;
    aspect-ratio: auto;
  }

  /* NOT: rakam satirlarinin sikistirilmasi (padding --s-2, deger --t-lg,
     line-height 1.1) burada override'di; ayni olcu anasayfadaki `.shop`
     kunyesinde de gerektigi icin `.spec` bileseninin kendisine tasindi
     (components.css). Duzen degismedi: etiket solda, deger sagda. */
}