/* ============================================================
   MotoMap public-site — bölüm sahneleri (fotoğraf)
   ============================================================
   Sayfa hero'dan sonra tek bir sürüşün bölümlerini gösterir: tam
   kanama görüntü, üstünde ölçülü bir kolon metin.

   ── NEDEN ARTIK VİDEO DEĞİL FOTOĞRAF ──
   Bu bölümler bir süre kaydırmaya bağlı sarılan videolardı. Sarma
   çalışıyordu (ölçüldü: medyan 16,7 ms/kare, düşen kare 0) ama karar
   ürün tarafında değişti: sayfada fazla video vardı ve klipler
   fotoğrafın verdiği keskinliği vermiyordu. Beş bölüm, kendi filminin
   EN GÜÇLÜ KARESİNDEN çıkarılmış tek bir fotoğrafa indi.

   Kaybedilen: kaydırmaya bağlı hareket.
   Korunan: kompozisyon, kadraj, renk ve editoryal tipografi — yani
   bölümün anlattığı şey. Fotoğraflar filmin kendisinden geldiği için
   marka dili birebir aynı kaldı.

   Hero filmi ve kapanış imzası VİDEO OLARAK DURUYOR; ikisi sayfanın
   açılış ve kapanış anı ve orada hareket gerçekten bir şey söylüyor.
   Onları hero.js sürüyor, bu dosyanın işi değil.

   v9 (2 Eylül): BÖLÜM 06 KALKTI (kurucu: "bu kısmı kaldır, saçma
   biraz") ve BÖLÜM 03 KÂĞIDA GEÇTİ — dosyanın sonundaki KÂĞIT ARA
   BÖLÜMÜ bloğu. Bant artık üç fotoğraf karesi: 02, 04, 05.

   ── YÜKSEKLİK ──
   Bölüm bir ekran boyu. Eskiden 260vh'lik bir kaydırma yolu vardı,
   çünkü filmin sarılacağı mesafeye ihtiyaç duyuyordu. Durağan bir
   fotoğraf için o yol yalnızca boş kaydırma olurdu.

   YASAKLARA UYUM (main.css başındaki denetim listesi)
   · Renk değişmezi yok — her renk :root değişkeninden gelir.
   · Kart yok, dört kenarı çerçeveli kutu yok, üst etiket yok.
   · Başlık ortalanmaz; kolon sola yaslıdır.
   · background-color yok. Okunabilirliği veren şey renkli bir
     dikdörtgen değil, görüntünün kendi karanlığına oturan gradyan.
   · Rakam SIRA kaydındadır (Geist 200, --d3, orantılı), mono DEĞİL:
     bölüm numarası sayar, ölçmez.
============================================================ */

.film{
  position:relative;
  /* `svh` = KÜÇÜK görünüm alanı: mobil tarayıcının adres çubuğu
     açıkken kalan yükseklik. `vh` orada BÜYÜK alanı ölçüyor ve bölüm
     çubuğun altına taşıyor — ölçüldü: 390×844'te metnin son satırı
     ekranın 13px altında kalıyordu. */
  height:100vh;
  height:100svh;
  overflow:hidden;
}

/* Izgara BOLUMDE degil SARMALAYICIDA. İşaretleme
   `.film > .film__stage > (img, copy)` biçiminde ve ızgarayı bölüme
   yazmak, tek ızgara çocuğu olarak `.film__stage`'i bırakıyordu:
   sarmalayıcının yüksekliği belirsiz kalıyor, içindeki `height:100%`
   olan fotoğraf çöküyor ve kendi en boy oranına düşüyordu. Sonuç,
   fotoğrafın bölümün alt çeyreğinden önce sert bir çizgiyle bitmesiydi. */
.film__stage{
  height:100%;
  display:grid;
  grid-template-areas:"scene";
  /* Satır yüksekliği İÇERİKTEN DEĞİL kaptan gelmeli.
     Ölçülmüş hata: satır `auto` iken görüntü kendi en boy oranını
     dayatıyordu. Fotoğraf 1920×1080 ve `width:100%`; satır yüksekliği
     belirsiz olduğu için `height:100%` çöküyor ve 844px genişlikte
     474,75px yükseklik talep ediyordu. Bölüm 390px olduğu hâlde satır
     474,75px oluyor, `align-items:end` metni SATIRIN altına hizalıyor
     ve `overflow:hidden` kesiyordu. Kusur yalnız dar ekranda değil,
     viewport 16:9'dan DAHA YATIK olduğu her yerde çıkıyordu. */
  grid-template-rows:minmax(0, 1fr);
  align-items:end;
  justify-items:stretch;
}

.film__stage > *{grid-area:scene;min-height:0;}

/* ── GÖRÜNTÜ ── */
.film__still{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}

/* ── PERDE ──
   Metnin arkasına kutu koymak yerine görüntünün kendisini karartıyoruz.
   İKİ katman, hero'daki `.hero__scrim` ile aynı mantık:

   · DİKEY perde alt kenarı indirir.
   · YATAY perde SOL kenarı indirir — ve asıl iş yapan budur. Metin
     solda duruyor, fotoğrafın içeriği ise her bölümde başka: ölçüldü,
     Bölüm 03'te parlak mavi rota şeridi tam gövde metninin üstünden
     geçiyor ve tek başına dikey perde onu tutamıyordu. Sabit bir kutu
     koymadan metni korumanın yolu, metnin durduğu KENARI karartmak.

   Sağ taraf açık kalıyor: fotoğrafın en çok anlattığı yer orası ve
   karartılacak bir metin yok. */
.film__stage::after{
  content:"";
  grid-area:scene;
  /* `align-self:stretch` ŞART. Sahnede `align-items:end` var (metin
     alta yaslansın diye) ve o hizalama perdeye de uygulanıyordu;
     `::after`'ın kendi içeriği olmadığı için kutu SIFIR YÜKSEKLİĞE
     çöküyor ve gradyan hiç çizilmiyordu. Ölçüldü: perdenin duraklarını
     değiştirmek metnin arkasındaki zemin parlaklığını hiç
     kımıldatmıyordu (üç bölümde p95 0,891 / 0,131 / 0,573 sabit). */
  align-self:stretch;
  background:
    linear-gradient(to top,
      rgba(var(--ink-rgb),.96) 0%,
      rgba(var(--ink-rgb),.82) 22%,
      rgba(var(--ink-rgb),.40) 46%,
      rgba(var(--ink-rgb),0) 72%),
    linear-gradient(to right,
      rgba(var(--ink-rgb),.88) 0%,
      rgba(var(--ink-rgb),.46) 38%,
      rgba(var(--ink-rgb),0) 70%);
  pointer-events:none;
}

/* DİKİŞ KATMANI KALDIRILDI. Bölümler yapışkan sahneyken ayrı bir
   `::before` alt kenarı zemine eritiyordu. Bölüm tam bir ekran
   boyu olunca o katman perdeyle ÜST ÜSTE biniyor ve fotoğrafın alt
   çeyreğini sert bir çizgiyle kesiyordu — ölçülmedi, görüldü.
   Alt kenarı zemine indirme işini artık yalnızca perdenin dikey
   katmanı yapıyor. */

/* ── METİN ──
   Kolon sayfanın geri kalanıyla AYNI ızgaraya oturur: genişlik ve yan
   boşluk `.wrap` ile birebir aynı değerlerden gelir (main.css). Bölüm
   ayrı bir tasarım değil, aynı sayfanın medya tarafı — başlığın sol
   kenarı yukarıdaki ve aşağıdaki bölüm başlıklarıyla hizalı. */
.film__copy{
  position:relative;      /* perdenin üstünde */
  z-index:1;
  width:100%;
  max-width:min(92vw, 84rem);
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 4.5vw, 4rem);
  padding-block-end:clamp(3rem, 9vh, 6.5rem);
  display:grid;
  gap:.85rem;
  justify-items:start;
}

/* v10: RAKAM kaydına katıldı (sections.css'teki tek kayıt notuna
   bakın). Optik sol eksen hizası aileye özgüydü; aile değişince eski
   -.04em telafisi geçersiz, kaldırıldı. */
.film__num{
  font-family:var(--numeral);
  font-weight:400;
  font-size:var(--d3);
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--text-3);
}

.film__title{
  /* Ölçek `.d2` ile BİREBİR aynı olmalı: bu da bir bölüm başlığı ve
     sayfadaki diğerlerinden farklı basmasının bir gerekçesi yok.
     Ölçüldü ve iki kusur çıktı:
     · `font-weight` HİÇ bildirilmiyordu, yani altı film başlığı
       tarayıcının h2 varsayılanına (700) düşüyordu; diğer bütün bölüm
       başlıkları 470'te. Aradaki 160 birim, "başlıklar dandik duruyor"
       geri bildiriminin en büyük tek kaynağıydı.
     · Harf aralığı -.028em'de kalmıştı; yeni ölçek -.018em ve bu dosya
       sıralamada sonra geldiği için eski değer kazanıyordu. */
  font-size:var(--d2);
  line-height:1.02;
  letter-spacing:-.018em;
  font-weight:470;
  color:var(--text);
  text-wrap:balance;
}

.film__line{
  max-width:34rem;
  color:var(--text-2);
  text-wrap:pretty;
}

/* ── DAR EKRAN ──
   Kompozisyon ve hiyerarşi aynı; yalnızca alt boşluk kısalır. */
@media (max-width:760px){
  .film__copy{padding-block-end:clamp(2.5rem,7vh,4rem);}
}

/* ============================================================
   KÂĞIT ARA BÖLÜMÜ — 03 (v9)
   ============================================================
   Kurucu: "bu kısımdaki fontları daha güzel yap ve bejimsi beyazımsı
   modern clean olsun." Bölüm film bandından çıkıp kâğıda geçti.
   · BAŞLIK SERİF. Nimbus Roman (fonts.css), 400, büyük punto. Sayfada
     serif tek bir sesin kaydıydı: ölçüm damgası (v8f). Kâğıt ara bölümü
     o sesi büyük puntoda taşıyor — Geist'in bölüm başlıklarından
     bilerek ayrı: bu bir bölüm başlığı değil, filmin ortasında bir
     duraklama, dergi sayfası gibi okunmalı.
   · RAKAM SIRA kaydında (.film__num: Geist 200, --d3). Sayar, ölçmez.
   · KARE PANELDE. Filmin 03 karesi koyu; kâğıt üzerinde doğrudan
     duramaz (main.css PANEL KURALI): --r-lg yarıçap, --sh-2 gölge,
     içinde tek görsel, metin yok.
   · Kolonlar .wrap ızgarasından: metin 1–6, kare 7–12; 900 altında
     istiflenir, kare metnin altına iner.
============================================================ */
.film-paper > .wrap{align-items:center;row-gap:clamp(var(--s7), 6vh, var(--s9));}
.film-paper__copy{grid-column:1 / 7;display:grid;justify-items:start;gap:var(--s5);}
.film-paper__media{grid-column:7 / 13;margin:0;}
.film-paper__media img{
  width:100%;height:auto;
  aspect-ratio:16 / 10;object-fit:cover;object-position:center;
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
}
.film-paper__title{
  margin:0;
  font-family:var(--font);font-weight:500;
  font-size:clamp(2.75rem, 5.8vw, 5.5rem);
  line-height:1.02;letter-spacing:-.012em;
  color:var(--text);
  max-width:14ch;text-wrap:balance;
}
.film-paper__line{
  margin:0;
  font-size:20px;line-height:1.55;
  color:var(--text-2);
  max-width:30rem;text-wrap:pretty;
}
@media(max-width:900px){
  .film-paper__copy,.film-paper__media{grid-column:1 / -1;}
}