/* ══════════════════════════════════════════════════════════════════════
   VARDIYA DEFTERI — /operasyon/ katmani
   Yon: scroll-narrative. Brief: design-brief.md (21 Agu 2026)

   Bu dosya ortak.css'i DEGISTIRMEZ, UZERINE BINER. Token katmani
   ortak.css'ten devralinir; burada yalniz sahne makinesi ve
   "az ve oz" yerlesimi tanimlanir.

   TEMEL KURAL — animasyon hicbir iceriği GIZLEMEZ:
   taban stiller statik ve tam okunur. Pin/scrub yalnizca
   @supports (animation-timeline: view()) VE
   @media (prefers-reduced-motion: no-preference) altinda devreye girer.
   Boylece eski tarayicida ve hareket-azaltilmis modda sayfa
   siradan bir belge gibi alt alta akar, hicbir sey kaybolmaz.
   ══════════════════════════════════════════════════════════════════ */

/* ═══ 3a. TOKEN KATMANI ════════════════════════════════════════════════
   Palet ortak.css'ten gelir (--zemin --sahne --metin --ikinci --aksan
   --cizgi). Burada YALNIZ bu yonun ihtiyaci olan basamaklar eklenir.  */
:root{
  /* Olcek ustu basamaklar -- scroll-narrative bunlari GERCEKTEN kullanir.
     Ara deger uydurulmaz; asagidaki uc basamak disina cikilmaz. */
  --p56 : clamp(2.1rem, 5.4vw, 3.5rem);
  --p88 : clamp(2.9rem, 8.2vw, 5.5rem);
  --p128: clamp(4rem, 14vw, 8rem);

  /* Sahne makinesi olculeri */
  --nav-h    : 3.75rem;   /* sabit serit yuksekligi -- pin offset'i bu kadar */
  --sahne-yuk: 260svh;    /* her pinlenmis sahneye ayrilan scroll mesafesi.
                             Brief §5: >=1.5-2 ekran. 2.6 ekran secildi --
                             onceki olcumde 2.2x'te "kayiyor" hissi ancak
                             olusmustu (efeekinci.com vakasi). */

  /* Hareket -- tek easing, tek sure ailesi */
  --ease-sahne: cubic-bezier(0.23, 1, 0.32, 1);
  --sure-mikro: 140ms;
}

/* ═══ Sabit serit ══════════════════════════════════════════════════════
   ANTI-SLOP D2: yari saydam + backdrop-filter YASAK. Serit OPAK.
   Altindan kayan metin gorunmez; sayfa kirlenmez.                     */
.serit{
  position: sticky; top: 0; z-index: 20;
  background: var(--zemin);            /* opak -- blur yok, alpha yok */
  border-bottom: 1px solid var(--cizgi);
}

/* ═══ Giris ════════════════════════════════════════════════════════════ */
.giris{ padding-block: clamp(3.5rem, 10vh, 7rem) clamp(2.5rem, 6vh, 4rem); }
.giris h1{ font-size: var(--p88); line-height: 1.06; max-width: 17ch; }
.giris .ozet{
  margin-top: 1.5rem; max-width: 46ch;
  font-size: var(--p18); color: var(--ikinci); line-height: 1.5;
}

/* Birincil eylem -- AKSANIN IZINLI 3 KULLANIMINDAN BIRI */
.eylem{
  display: inline-flex; align-items: center; gap: .75rem;
  margin-top: 2rem; padding: .9rem 1.4rem;
  background: var(--aksan); color: var(--aksan-ustu);
  font-family: var(--teknik); font-size: var(--p13);
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; border: 0;
  min-height: 44px;                     /* dokunma hedefi -- 390px olcumu */
  transition: filter var(--sure-mikro) var(--ease-sahne);
}
.eylem:hover{ filter: brightness(1.08); }

/* ═══ RAY — yonelim gostergesi ═════════════════════════════════════════
   Brief §5 madde 3: bu atlanirsa kullanici kaybolur ve deneyim
   "takiliyor" diye okunur. Sayfayi "araba sitesi" hissettiren sey
   animasyonun kendisi degil, NEREDE OLDUGUNU BILMEK.                  */
.ray{
  position: sticky; top: var(--nav-h); z-index: 15;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 0;
  background: var(--zemin);
  border-bottom: 1px solid var(--cizgi);
  font-family: var(--teknik); font-size: var(--p13);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ikinci);
}
.ray .sayac{ font-variant-numeric: tabular-nums; white-space: nowrap; }
.ray .oluk{ flex: 1; height: 1px; background: var(--cizgi); position: relative; }
.ray .dolu{
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--aksan);             /* AKSAN kullanimi 2/3 */
  transform-origin: left;
}

/* ═══ SAHNE ════════════════════════════════════════════════════════════
   TABAN HAL = statik. Pin yok, scrub yok, opacity:0 yok.
   Eski tarayici ve reduced-motion bu hali gorur ve TAM OKUR.          */
.sahne{ border-top: 1px solid var(--cizgi); padding-block: clamp(3rem,8vh,5rem); }
.sahne .kuyu{ display: grid; gap: clamp(1.5rem, 4vw, 3rem); }

.sahne .no{
  font-family: var(--teknik); font-size: var(--p128);
  line-height: .85; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--cizgi);                  /* dev ama sessiz -- aksan DEGIL */
}
.sahne h2{
  font-size: var(--p56); line-height: 1.08;
  max-width: 14ch; text-wrap: balance;
}
/* Iddia cumlesi -- brief §7: 1 cumle, <=14 kelime.
   Brief §6 panzehiri: her sahnenin iddiasi sahnede YAZILI olmak zorunda. */
.sahne .iddia{
  font-size: var(--p26); line-height: 1.3; max-width: 30ch;
  color: var(--metin); text-wrap: balance;
}
.sahne .damga{
  font-family: var(--teknik); font-size: var(--p13);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ikinci); font-variant-numeric: tabular-nums;
}

/* ═══ KAYIT — sahneler boyunca ilerleyen TEK nesne ════════════════════
   scroll-narrative "tek nesne, farkli acilardan" kurali: her sahnede
   ayni kayit blogu, farkli durumda.                                   */
.kayit{
  border: 1px solid var(--cizgi);
  background: var(--sahne);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  display: grid; gap: .6rem;
  font-family: var(--teknik); font-size: var(--p13);
  letter-spacing: .04em;
}
.kayit .satir{
  display: grid; grid-template-columns: 8.5rem 1fr; gap: .75rem;
  align-items: start;
}
.kayit .ad{ color: var(--ikinci); text-transform: uppercase; letter-spacing: .1em; }
.kayit .deg{ color: var(--metin); letter-spacing: .02em; }
.kayit .durum{
  display: inline-block; padding: .15rem .5rem;
  border: 1px solid currentColor; font-size: var(--p13);
  text-transform: uppercase; letter-spacing: .1em;
}
/* Durum renkleri -- brief §4: chroma <= .06, doygun DEGIL */
.durum.bekliyor{ color: var(--d-bekliyor); }
.durum.yapildi { color: var(--d-yapildi); }
.durum.onayda  { color: var(--d-onayda); }

/* ═══ 768px ve ustu — sahne kompozisyonu asimetrik olur ═══════════════ */
@media (min-width: 48rem){
  .sahne .kuyu{
    grid-template-columns: minmax(6rem, 14%) minmax(0, 1fr) minmax(0, 22rem);
    align-items: start;
  }
  .sahne .no  { grid-column: 1; }
  .sahne .anlati{ grid-column: 2; display: grid; gap: 1.25rem; }
  .sahne .kayit { grid-column: 3; }
}

/* ══════════════════════════════════════════════════════════════════════
   HAREKET KATMANI
   Iki kapi birden acilmadan hicbir sey pinlenmez:
   1) tarayici scroll-driven animation biliyor
   2) kullanici hareket istiyor
   ══════════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){

  /* Ray dolgusu -- tum sayfanin ilerlemesine bagli */
  .ray .dolu{
    width: 100%;
    animation: ray-dol linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes ray-dol{ from{ transform: scaleX(0) } to{ transform: scaleX(1) } }

  /* --- PIN ---------------------------------------------------------- */
  .sahne{
    /* Sahneye scroll mesafesi AYRILIR. Ayrilmazsa animasyon birkac
       pikselde biter ve "segirme" gibi hissettirir (brief §5). */
    height: var(--sahne-yuk);
    padding-block: 0;
    view-timeline-name: --s;
    view-timeline-axis: block;
  }
  .sahne .kuyu{
    position: sticky;
    /* Sabit navbar tuzagi: pin basina serit + ray yuksekligi kadar
       offset verilmezse baslik seridin ALTINDA kalir. */
    top: calc(var(--nav-h) + 2.6rem);
    min-height: calc(100svh - var(--nav-h) - 2.6rem);
    align-content: center;
  }

  /* --- SCRUB + KATMAN HIZI ------------------------------------------
     Brief §5 madde 2: 1x / .85x / .6x. Fark BELIRGIN olsun;
     hepsi .95x ise kimse fark etmez, bosuna is.
     Surulen ozellik yalniz transform + opacity.
     animation-range "contain" = sticky'nin tutuldugu donem.          */
  .sahne .no,
  .sahne .anlati,
  .sahne .kayit{
    animation: linear both;
    animation-timeline: --s;
    animation-range: contain 0% contain 100%;
    will-change: transform;              /* yalniz sahne ogeleri -- sayfa geneline verilmez */
  }
  .sahne .no    { animation-name: kat-yavas;  }  /* .6x  */
  .sahne .kayit { animation-name: kat-orta;   }  /* .85x */
  .sahne .anlati{ animation-name: kat-hizli;  }  /* 1x   */

  @keyframes kat-yavas{ from{ transform: translateY(3.2rem)  } to{ transform: translateY(-3.2rem)  } }
  @keyframes kat-orta { from{ transform: translateY(5.5rem)  } to{ transform: translateY(-5.5rem)  } }
  @keyframes kat-hizli{ from{ transform: translateY(7rem)    } to{ transform: translateY(-7rem)    } }

  /* --- SAHNE GIRISI -------------------------------------------------
     Brief §5 madde 4: sahne basina EN FAZLA BIR giris hareketi.
     Her ogeye degil -- kuyunun tamamina tek fade.
     DIKKAT: baslangic opacity .001 DEGIL, .35. Animasyon calismazsa
     bile icerik okunur kalir; ayrica bu deger yalniz supports+motion
     dalinda gecerli.                                                  */
  .sahne .kuyu{
    animation: sahne-gir linear both;
    animation-timeline: --s;
    animation-range: cover 0% contain 12%;
  }
  @keyframes sahne-gir{ from{ opacity: .35 } to{ opacity: 1 } }
}
}

/* ═══ Hareket istenmiyorsa: acik ve kesin ═════════════════════════════
   Brief §5: sureyi 0.01ms yapmak YETMEZ -- pinli sahnede icerigi
   ust uste bindirir. Pin tamamen kalkar.                             */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .sahne{ height: auto; }
  .sahne .kuyu{ position: static; }
  .ray .dolu{ width: 0; }
}

/* ═══ CSP notu ═════════════════════════════════════════════════════════
   /operasyon/ CSP'si: style-src 'self' https://fonts.googleapis.com
   'unsafe-inline' YOK -> satir ici style="" ATTRIBUTE'U DA BLOKLANIR.
   (style-src hem <style> hem style="" ozniteligini kapsar.)
   Bu yuzden tek bir satir ici stil bile kullanilmaz; hepsi sinif.    */
.alt-not   { margin-top: 1rem; }
.ornek-not { padding-block: 1.25rem; }
.ray-ic    { display: flex; align-items: center; gap: 1rem; width: 100%; }

/* ══════════════════════════════════════════════════════════════════════
   TUR 1 DENETIM DUZELTMELERI (21 Agu 2026, olcumle)
   Bulgu: sahne kuyusu %30 dolu, %70 bos. scroll-narrative'in kendi
   "nasil slop'a doner" listesindeki madde: "hareketi gostermek icin
   icerigi inceltmek -- 4 dolu ekran yerine 4 bos ekran".
   ══════════════════════════════════════════════════════════════════ */

/* 1) Sahne numarasi sinematik olcege cikar ve sola tasar.
      En yavas katman (.6x) oldugu icin buyudukce derinlik artiyor. */
.sahne .no{
  font-size: clamp(5.5rem, 17vw, 14rem);
  line-height: .78;
  color: var(--hayalet);        /* --cizgi'den bir adim koyu: dev ama sessiz */
  letter-spacing: -.04em;
}

/* 2) Sahne tabani: aktif durum seridi.
      AKSANIN IZINLI 3 KULLANIMINDAN BIRI -- "aktif sahne gostergesi".
      Bos alani susle degil YONELIM BILGISIYLE dolduruyor:
      talebin hangi asamada oldugunu tek bakista soyler.            */
.asama{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--cizgi);
  border-block: 1px solid var(--cizgi);
  font-family: var(--teknik); font-size: var(--p13);
  letter-spacing: .1em; text-transform: uppercase;
}
.asama span{
  background: var(--zemin); color: var(--ikinci);
  padding: .8rem .5rem; text-align: center;
  border-top: 2px solid transparent;
}
.asama .aktif{
  color: var(--metin);
  border-top-color: var(--aksan);       /* AKSAN kullanimi 3/3 */
}

/* 3) Kuyu artik uc satirli: ust damga / orta anlati / alt asama seridi.
      align-content:center yerine space-between -> bosluk dagilir,
      icerik kuyuyu gercekten doldurur.                             */
@media (min-width: 48rem){
  .sahne .kuyu{ grid-template-rows: auto 1fr auto; }
  .sahne .asama{ grid-column: 1 / -1; align-self: end; }
  .sahne .no   { align-self: center; margin-left: -.06em; }
  .sahne .anlati{ align-self: center; }
  .sahne .kayit { align-self: center; }
}
.sahne .asama{ margin-top: 1.5rem; }

/* 4) Dokunma hedefi ihlalleri -- olcumde yakalandi:
      serit baglantisi 130x20, footer e-posta 173x15. Ikisi de <44px. */
.serit a, footer a{
  display: inline-flex; align-items: center;
  min-height: 44px;
}

/* ══════════════════════════════════════════════════════════════════════
   TUR 2 DUZELTMELERI — ikisi de olcumle yakalandi, tahminle degil.
   ══════════════════════════════════════════════════════════════════ */

/* BULGU 1 — SABIT NAVBAR TUZAGI (brief §5'te yazili, yine de dustum).
   Dokunma hedefi duzeltmesi (.serit a{min-height:44px}) seridi
   44px + 2x1.25rem padding = ~84px yapti. --nav-h ise 60px'ti.
   Sonuc: ray seridin ALTINDA kaldi (z-index 20 > 15) ve sahne
   basligi seridin altinda kesildi.
   COZUM: sihirli sayiyi duzeltmek yerine yuksekligi SABITLE.
   Serit = 44px hedef + 2x8px padding = tam 60px = --nav-h.        */
.serit .sar{ padding-block: .5rem; }

/* Ray yuksekligini de sabitle: 2x.7rem padding + ~1rem satir = 2.6rem.
   .kuyu offset'i (--nav-h + 2.6rem) artik gercekten dogru.          */
.ray{ min-height: 2.6rem; box-sizing: border-box; }

/* BULGU 2 — BOS IZGARA SATIRI.
   grid-template-rows: auto 1fr auto idi; .no/.anlati/.kayit otomatik
   olarak SATIR 1'e yerlesti, 1fr satiri BOS kaldi, asama en alta
   itildi -> ekranin ortasinda dev bosluk.
   COZUM: satirlari acikca ata. Icerik 1fr satirinda DIKEY ORTALANIR,
   asama serisi kendi auto satirinda tabanda durur.                  */
@media (min-width: 48rem){
  .sahne .kuyu{ grid-template-rows: 1fr auto; }
  .sahne .no, .sahne .anlati, .sahne .kayit{ grid-row: 1; align-self: center; }
  .sahne .asama{ grid-row: 2; grid-column: 1 / -1; align-self: end; }
}

/* ══════════════════════════════════════════════════════════════════════
   TUR 3 — YAPISAL DUZELTME: serit + ray TEK yapiskan blok.
   Bulgu (mobil 390px): serit iki satira sariyor, gercek yuksekligi
   ~190px oluyor; ray ise top:--nav-h (60px) ile YAPISIYOR, yani
   seridin altinda kaliyor ve yonelim gostergesi tamamen kayboluyor.
   Ayni tuzagin masaustunde de bir varyanti vardi (Tur 2).
   Sihirli sayiyi buyutmek kok cozum DEGIL -- metin her genislikte
   farkli sariyor. Ikisi tek blok olunca ray hicbir yukseklikte
   saklanamaz; --nav-h artik ray icin gerekmiyor.                    */
.ust{ position: sticky; top: 0; z-index: 20; background: var(--zemin); }
.ust .serit{ position: static; }        /* ic ice yapiskan gereksiz */
.ust .ray  { position: static; top: auto; }

/* Mobilde serit tek satirda kalsin: iki satira sarip ekranin %22'sini
   yemesin. Dis baglanti gizleniyor -- ICERIK SILINMIYOR, ayni baglanti
   footer'da duruyor (Faz 0c: silme ayri karardir). */
@media (max-width: 40rem){
  .serit .sar{ flex-wrap: nowrap; }
  .serit a  { display: none; }
  .asama    { font-size: .6875rem; }
  .asama span{ padding: .7rem .25rem; }
}

/* .kuyu offset'i artik olculen tek blok yuksekligine baglaniyor. */
:root{ --ust-h: 6.5rem; }
@media (max-width: 40rem){ :root{ --ust-h: 6.4rem; } }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .sahne .kuyu{
      top: var(--ust-h);
      min-height: calc(100svh - var(--ust-h));
    }
  }
}

/* ═══ IKI KANAL (21 Agu 2026) ═════════════════════════════════════════
   Efe: "wp'mi de koy, tek kanal olmayacak". E-posta BIRINCIL kalir,
   WhatsApp ikincil olarak yanina gelir. Ikisi de YAZILI kanal --
   model yazili kapsam/onay/kabul uzerine kurulu oldugu icin telefon
   ve toplanti hala yok.

   Gorsel hiyerarsi kasitli: birincil dolu aksan, ikincil yalniz
   kenarlikli. Iki dolu buton olsa hangisinin beklenen eylem oldugu
   kaybolur ve aksanin "yalniz 3 yerde" kurali da bozulurdu.        */
.eylemler{
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: 2rem; align-items: stretch;
}
.eylemler .eylem{ margin-top: 0 }

.eylem.ikincil{
  background: transparent;
  color: var(--metin);
  /* WCAG 1.4.11: etkilesimli oge KENARLIGI zeminden >=3:1 olmali.
     --cizgi (1.52:1) YETMEZ -- bu yuzden --ikinci kullaniliyor. */
  border: 1px solid var(--ikinci);
}
.eylem.ikincil:hover{
  border-color: var(--metin);
  filter: none;
}

@media (max-width: 30rem){
  .eylemler{ flex-direction: column; align-items: stretch }
  .eylemler .eylem{ justify-content: center }
}

/* ══════════════════════════════════════════════════════════════════════
   CIZIMLER (21 Agu 2026) — Efe: "cizimler ve fotograflar da ekle"

   Stok gorsel ve AI ile uretilmis foto KULLANILMADI (brief yasagi):
   ikisi de "site siradan" sikayetini geri getirir. Yerine BILGI TASIYAN
   ozgun SVG: kaldirirsan sayfa bilgi kaybeder, yani sus degil.

   Neden SVG: her cozunurlukte keskin, dosya boyutu ~2KB, temaya uyar,
   metni ekran okuyucu okur, CSP'ye takilmaz (harici istek yok).

   CSP NOTU: /operasyon/ CSP'si style-src 'self' -- 'unsafe-inline' YOK.
   Bu yuzden SVG'de satir ici style="" KULLANILMAZ; hepsi sinif.
   Renkler de presentation attribute degil, buradan geliyor.

   AKSAN KULLANILMIYOR: aksan yalniz ray / aktif sahne / birincil eylem
   icin ayrildi (brief §4). Cizimler mevcut DURUM token'larini kullanir.
   ══════════════════════════════════════════════════════════════════ */
.cizim-bolum{
  border-top: 1px solid var(--cizgi);
  padding-block: clamp(3rem, 8vh, 5rem);
}
.cizim-bolum h2{ margin-top: .75rem; font-size: var(--p40); max-width: 18ch }
.cizim-ozet{
  margin-top: 1rem; max-width: 46ch;
  color: var(--ikinci); font-size: var(--p18); line-height: 1.5;
}
.cizim{ margin: clamp(1.5rem, 4vw, 2.5rem) 0 0 }
.cizim svg{ width: 100%; height: auto; display: block }

/* ─── ortak SVG tipografisi ─────────────────────────────────────────── */
.cizim .et{ font-family: var(--teknik); fill: var(--ikinci) }
.cizim .et-bas { font-size: 13px; letter-spacing: .1em; fill: var(--metin) }
.cizim .et-alt { font-size: 11px; letter-spacing: .04em }
.cizim .et-oge { font-size: 13px; letter-spacing: .02em; fill: var(--metin) }
.cizim .et-gun { font-size: 12px; letter-spacing: .12em; fill: var(--metin) }
.cizim .et-sinir{ font-size: 10px; letter-spacing: .16em }
.cizim .et-dip { font-size: 11px; letter-spacing: .04em }

/* ─── cizim 1: yetki siniri ─────────────────────────────────────────── */
/* Bolgeler DOLU degil, 1px kenarlikli: dolu blok koyu zeminde agir
   durur ve sayfanin geri kalanindaki cizgi diliyle catisir.        */
.bolge{ fill: none; stroke-width: 1 }
.bolge-icinde{ stroke: var(--d-yapildi) }
.bolge-onay  { stroke: var(--d-onayda) }
/* HATA (yakalandi): once `.bolge-icinde ~ .et-bas` yazilmisti; `~` genel
   kardes secicisi SONRAKI tum .et-bas ogelerini yakaliyor, yani sagdaki
   "DURUR" basligi da yesil cikiyordu -- iki bolge ayirt edilemez oluyordu.
   Cozum: her basliga kendi sinifi.                                     */
.cizim .bas-icinde{ fill: var(--d-yapildi) }
.cizim .bas-onay  { fill: var(--d-onayda) }

/* Sinir kesikli: gecirgen degil ama MUZAKERE EDILEBILIR oldugunu
   soyluyor -- yeri pilot oncesi birlikte yaziliyor.                */
.sinir{ stroke: var(--metin); stroke-width: 1; stroke-dasharray: 3 5 }
.sinir-ok{ fill: var(--metin) }

/* ─── cizim 2: pilot zaman cizelgesi ────────────────────────────────── */
.eksen{ stroke: var(--cizgi); stroke-width: 1 }
.nokta{ fill: var(--zemin); stroke: var(--ikinci); stroke-width: 1.5 }
.nokta-bas{ stroke: var(--metin) }
.nokta-son{ fill: var(--d-yapildi); stroke: var(--d-yapildi) }

/* ─── 640px alti: cizimler dar ekranda okunmaz hale gelir ───────────── */
/* SVG viewBox 720 genis; 390px'te 13px metin ~7px'e duser.
   Cozum: yatay kaydirma + asgari genislik. Metin kucultmek DEGIL.  */
@media (max-width: 40rem){
  .cizim{ overflow-x: auto; -webkit-overflow-scrolling: touch }
  .cizim svg{ min-width: 34rem }
}

@media (prefers-reduced-motion: reduce){
  .cizim{ scroll-behavior: auto }
}