/* ybatu.works
   Cumhuriyet donemi afis dili, Ihap Hulusi Gorey cizgisi.
   Yon sozlesmesi index.html'in basinda; burasi onun malzemesi. */

:root{
  /* Palet masa.webp'ten ORNEKLENDI, goz karariyla secilmedi. Sayfa ile
     resim ayni renkleri konussun diye. Kullanicinin tarifi: pastel ve
     soluk renkler, siyah beyaz kirmizi, daha koyu bir tema.

     Cozum: sayfa KARANLIK ODA, afisler o karanlikta duran AYDINLIK
     KAGIT. Ikisi celismiyor, biri otekinin zemini. */
  --oda:      #14120f;   /* karanlik oda */
  --oda-ac:   #1e1b17;
  --kagit:    #f5ead4;   /* resmin kagidi, olculdu */
  --kagit-ac: #faf0dc;   /* resmin en acik yeri, olculdu */
  --murekkep: #232320;   /* resmin siyahi */
  --gri:      #9a9a84;   /* resmin soluk grisi, okunacak kadar acildi */
  --gri-ac:   #b4b4a0;
  --zeytin:   #585842;   /* resmin soluk zeytini */
  /* UC kirmizi, ucu de OLCULEREK secildi. Resmin kirmizisi #c04a34
     guzel ama tek basina yetmiyor:
       zemin olarak  -> krem yazi 4.33:1'de kaliyor, taban 4.5
       kucuk yazi    -> koyu oda uzerinde 3.80:1
     Ikisi de duzeltildi; ton ayni ailede kaldi. */
  /* Kirmizi artik KOPEK YATAGININ rengi: resimde gercek bir nesne,
     rastgele bir leke degil. Yatagin tonu #6f292a, olculdu. */
  --kir:      #8b3533;   /* iri yazi: kagit uzerinde 6.99:1 */
  --kir-zem:  #6f292a;   /* yatagin kendi tonu, zemin olarak */
  --kir-ac:   #d66a52;   /* koyu uzerinde kucuk yazi: 5.38:1 */
  --sonuk:    #6e6e58;

  --olcu: clamp(1rem, .32vw + .93rem, 1.14rem);
  /* Kucuk puntoda IKI kademe var, bes degil. Once .72 .74 .76 .78 .82
     diye bes ayri boy vardi; aralarindaki fark okunmuyor, sadece
     hiyerarsiyi duzlestiriyordu. Etiket ile kunye ayrilir, gerisi
     ayni kademede durur. */
  --etiket: .82rem;   /* pafta, bant, kucuk buyuk harf etiketler */
  --kunye:  .74rem;   /* kunye satiri, ince yazi */

  /* Iki aile, ikisi de sistem yazi tipi: disaridan dosya inmiyor. */
  --grot: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* DALIS. Delikten sistem sayfasina gecerken sayfa degistirmis gibi
   degil, iceri inmis gibi olsun diye. Delik hedef sayfadaki tam ekran
   karanlikla ayni ada sahip; tarayici birini otekine donusturuyor.
   Destegi olmayan tarayicida hicbir sey olmuyor, dogrudan gidiliyor. */
@view-transition{navigation:auto}

::view-transition-old(root){
  animation:dal-cik .42s cubic-bezier(.4,0,.2,1) both;
}
::view-transition-new(root){
  animation:dal-gir .42s cubic-bezier(.4,0,.2,1) both;
}
/* Duvar YAKINLASIP soluyor: icinden gecip gidiyorsun. */
@keyframes dal-cik{
  to{opacity:0;transform:scale(1.06)}
}
/* Derinlik ASAGIDAN gelip yerine oturuyor. */
@keyframes dal-gir{
  from{opacity:0;transform:scale(.965) translateY(2.5%)}
}

*,*::before,*::after{box-sizing:border-box}

/* SATIR ARALIGI. Iri puntolarda 0.9-1.0 gibi degerler kullanilmisti;
   afis dilinde bu dogru gorunuyordu ama Turkce'de yanlis: sapkali ve
   noktali harfler (Ç, Ş, İ, Ğ, ı) satirin altina ve ustune tasiyor ve
   satirlar birbirine giriyor. Aralik her yerde acildi; en cok da iri
   basliklarda, sikismanin gorundugu yer orasiydi. */
/* Egik afislerin kosesi tasiyor; yatay kaydirma cubugu cikmasin. */
main{overflow-x:clip}
html{scroll-behavior:smooth}

body{
  margin:0;
  /* Zemin DUVAR. Afisler o duvara yapistiriliyor; aralarindan gorunen
     koyu serit hata degil, duvarin kendisi. Once kagit yapilmisti
     cunku bolumler arasindaki koyu bant bir bosluk gibi duruyordu.
     Artik bosluk degil: uzerinde durulan yuzey. */
  background:var(--oda);
  color:var(--murekkep);
  font:var(--olcu)/1.65 var(--grot);
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--kir);color:var(--kagit-ac)}
:focus-visible{outline:3px solid var(--kir);outline-offset:3px}

.atla{position:absolute;left:-9999px;top:0;z-index:20;padding:.8rem 1.2rem;
 background:var(--kir-zem);color:var(--kagit);font:700 var(--etiket)/1 var(--grot);
 letter-spacing:.14em;text-decoration:none}
.atla:focus{left:0}

/* ---------------------------------------------------------- pano */

/* Her bolum bir afis panosu. */
.pano{
  position:relative;
  /* Icerik kisaysa dikeyde ortalanir: bir ekrana zorlanan bolum
     tepeye yapisip altini bos birakmasin. */
  display:flex;flex-direction:column;justify-content:center;
  background:var(--kagit);
  padding:clamp(3.5rem,9vw,7rem) clamp(1.2rem,5vw,4rem);
}
.pano > *{position:relative;z-index:2}

.pano--proje{background:var(--kagit-ac);--zemin:var(--kagit-ac)}

/* Slogan bandi. Ne sattigin bantta yazar, adin yaninda degil. */
.bant{
  position:absolute;left:0;right:0;margin:0;z-index:3;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:var(--kir-zem);color:var(--kagit-ac);
  padding:.55rem clamp(1.2rem,5vw,4rem);
  font:700 var(--etiket)/1.55 var(--grot);letter-spacing:.22em;
}
.bant--ust{top:0}
.bant--alt{bottom:0;align-items:center}

/* Usta muhru: kivrilmis uyuyan kedi, panelin dibinde tek basina.
   Bant yok; imza sessiz durur. */
.muhur{height:34px;width:auto;display:block;margin:clamp(2.5rem,6vw,4rem) auto 0;opacity:.9}

/* Slogan bir CUMLE, etiket degil. Etiket araligi (.22em) cumleyi
   okunmaz yapiyor; kural zaten "genis aralik yalniz kisa buyuk harf
   etiketlerde" diyor. Slogan kendi araliginda ve biraz daha iri. */
.bant .slogan{
  letter-spacing:.02em;font-size:.92rem;text-transform:none;
}

/* ------------------------------------------------------------ bas */

/* ------------------------------------------------------------ afis */

/* =========================================================== PERDE */

/* SINEMATIK GIRIS.

   Perde uzun bir kaydirma yolu, icindeki cam yapisik duruyor. Bir
   perde boyu = videonun tamami. Uzunlugu 380svh: kisa olursa video
   firlar, uzun olursa ziyaretci sikilir.

   Butun hareket tek bir degiskenden besleniyor: --p, 0 ile 1 arasi.
   Betik onu kaydirmadan hesapliyor, hem videonun zamanini hem
   pencerenin boyutunu hem repliklerin gorunurlugunu o suruyor. */
.perde{
  position:relative;
  /* 45 saniyelik tek film: giris + hakkinda + yetenek + deneyim.
     2000svh ile bir ekran boyu kaydirma ~2.2 saniye goruntu suruyor.
     Kisa olursa film firlar, uzun olursa ziyaretci yolda sikilir.
     Ayarlanacak tek sayi bu. */
  height:2000svh;
  background:var(--kagit);
}

.cam{
  --kenar:clamp(1.4rem,6vw,5.5rem);  /* sol/sag bosluk, .ust ile ayni */
  --taban:12svh;                     /* yatay cizginin yerden yuksekligi */
  position:sticky;top:0;height:100svh;
  overflow:hidden;
}

/* FILM CERCEVESI. Basta kagida monte edilmis bir afis: her yandan
   esit pay. Ilk kaydirisla acilip tam ekran oluyor ve ACIK KALIYOR;
   kapanis yok, cunku cikis gecisi zaten ustune yapisan afis.
   --ac betikten: 0 cerceveli, 1 tam ekran. */
.cam__cerceve{
  position:absolute;z-index:0;
  /* Film TAM SAYFA: cerceve payi yok, acilistan itibaren uctan uca. */
  inset:0;
  overflow:hidden;
  background:var(--kagit);
}
.cam__video{
  width:100%;height:100%;object-fit:cover;object-position:70% 54%;
  display:block;
}

/* Filmin ustunde ince kagit perdesi. Yazi sol altta oturdugu icin
   agirlik sol alt kosede; film zaten krem, perde yalniz murekkebin
   okunmasini garanti ediyor. Cerceve acildikca guclenir. */
.cam__cerceve::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(0deg,
      rgba(245,234,212,.88) 0%,
      rgba(245,234,212,.42) 20%,
      rgba(245,234,212,0) 46%),
    linear-gradient(100deg,
      rgba(245,234,212,.5) 0%,
      rgba(245,234,212,0) 42%);
  /* Ortu yalniz giris repliklerinde guclenir; bolum sahnelerinin
     kendi yikanmis kagit zemini var (.bolum::before). */
  opacity:calc(.18 + .82 * max(var(--s0,0), var(--s1,0), var(--s2,0)));
}

/* -------------------------------------------------------- acilis */

/* Ilk ekran: replikle AYNI yerde, AYNI tipte tek cumle ve dugme.
   Ayri bir stil dunyasi degil; filmin ilk repligi gibi durur.
   Kaydirmayla cekilir, en uste donulunce geri gelir. */
.giris{
  position:absolute;z-index:4;
  left:var(--kenar);top:50%;translate:0 -50%;
  width:86%;
  display:flex;flex-direction:column;align-items:flex-start;gap:1.7rem;
  opacity:0;visibility:hidden;
  transition:opacity .4s ease, visibility 0s .4s;
}
.giriste .giris{opacity:1;visibility:visible;transition:opacity .4s ease}
.giris__soz{margin:0;font-weight:800;letter-spacing:-.045em;color:var(--murekkep)}
.giris__soz em{
  display:block;font-style:normal;color:var(--kir);
  font-size:clamp(2.6rem,6.4vw,5.6rem);line-height:1.06;
}
.giris__soz span{
  display:block;
  /* Ilk satir buyuk, ikinci satir kucuk: hiyerarsi boyla kurulur. */
  font-size:clamp(1.3rem,3vw,2.6rem);line-height:1.3;letter-spacing:-.025em;
}
.giris__dugme{
  font:700 var(--etiket)/1 var(--mono);letter-spacing:.2em;
  color:var(--kagit-ac);background:var(--murekkep);text-decoration:none;
  padding:.95em 1.6em;
}
.giris__dugme:hover{background:var(--kir-zem)}
.giris__dugme:focus-visible{outline:3px solid var(--kir);outline-offset:3px}

/* Dusen yaprak: asagiyi soyleyen isaret. Film boyunca HEP durur;
   perde bitince kendiliginden gider, cunku perdeyle beraber kayar. */
.kaydir{
  position:absolute;z-index:4;left:50%;bottom:1.6rem;translate:-50% 0;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  pointer-events:none;
}
.kaydir img{
  width:34px;height:auto;
  animation:yaprak-dus 2.8s ease-in-out infinite;
}
@keyframes yaprak-dus{
  0%{transform:translate(6px,-30px) rotate(-14deg);opacity:0}
  22%{opacity:1}
  50%{transform:translate(-7px,4px) rotate(10deg)}
  82%{opacity:1}
  100%{transform:translate(5px,34px) rotate(-10deg);opacity:0}
}
.kaydir span{
  font:700 var(--kunye)/1 var(--mono);letter-spacing:.24em;color:#6a6659;
}

/* ------------------------------------------------------- izgara *//* ------------------------------------------------------- izgara */

/* Matbaa cizgileri filmin USTUNDE durur: sayfa bir baski provasi.
   Cizgi murekkep, dusuk yogunlukta; kesisim yildizlari kirmizi. */


/* Sol ray: uc sahnenin sayaci. --s0..--s2 betikten, 0..1. Aktif
   sahnenin isareti kirmizi ve uzun. */
.cam__ray{
  position:absolute;z-index:1;left:calc(var(--kenar)/2 - 1px);
  top:50%;translate:0 -50%;
  display:flex;flex-direction:column;gap:1.1rem;pointer-events:none;
}
.ray__is{
  width:3px;height:1.1rem;background:rgba(35,35,32,.3);
  transform-origin:top;
  scale:1 calc(1 + var(--n,0) * .9);
}
/* Renk esigi: --n yariyi gecince kirmizi. Iki katmanla: kirmizi ust
   katman --n ile beliriyor. */
.ray__is{position:relative}
.ray__is::after{
  content:"";position:absolute;inset:0;background:var(--kir);
  opacity:var(--n,0);
}



/* ---------------------------------------------------------- replik */

/* Soz eski yerinde: dikeyde ortali, solda. Buyuk cumle filmin
   icinde degil, filmin uzerine BASILMIS. */
.cam__soz{
  position:absolute;z-index:2;
  left:var(--kenar);
  top:50%;translate:0 -50%;
  /* max-width TUZAK: kutu mutlak konumlu, genisligi akistaki ILK
     replige gore buzuluyor ve sonraki replikler ona hapsoluyordu
     (487px'lik satir 430px'te kirpildi, olculdu). Genislik sabitlenir;
     yazi sola yasli, fazla alan zararsiz. */
  width:86%;
}

/* Replikler ust uste duruyor, ayni anda yalniz biri gorunuyor.
   Ilki akista yer tutuyor ki blok yuksekligi sabit kalsin;
   digerleri ALTA hizali biner, cunku blok cizgiden yukari buyur.
   Secici KAPLARINA baglandi: .bolum bloklari da .repl tasiyor ve
   genel `.repl + .repl` onlari left:0'a civiliyordu, olculdu. */
.repl{margin:0;font-size:1rem} /* h1 ile p ayni tabandan olculsun */
.cam__soz .repl + .repl{position:absolute;left:0;top:0;right:0}

/* Satir MASKENIN icinde. Yazi asagidan yukari kayarak giriyor,
   yukari kayarak cikiyor; fade degil, kirpma. Afiste yazi belirmez,
   basilir. */
.satir{display:block;overflow:hidden}
.satir i{
  display:block;font-style:normal;
  /* Maske dikeyde kirparken alt cikintilari (y, g, virgul) ve sagda
     son harfin kenarini da yiyordu. Kirpma payi acilir, ritim negatif
     kenar boslugu ile geri alinir. */
  padding:0 .08em .1em 0;margin-bottom:-.1em;
  /* --gor 0 -> 1 girerken, 1 -> 0 cikarken. Satir basina gecikme
     --i ile: ust satir once gelir. */
  --g2:clamp(0, calc((var(--gor,0) - var(--i) * .12) / .88), 1);
  translate:0 calc((1 - var(--g2)) * 106%);
  opacity:var(--g2);
}

.repl h1,.repl{font-weight:800;letter-spacing:-.045em;color:var(--murekkep)}
.repl em{
  font-style:normal;color:var(--kir);
  font-size:clamp(2.6rem,6.4vw,5.6rem);line-height:1.06;
}
.repl .satir:last-child i{
  /* Ilk satir buyuk, ikinci satir kucuk: girisle ayni hiyerarsi. */
  font-size:clamp(1.3rem,3vw,2.6rem);line-height:1.3;
  letter-spacing:-.025em;white-space:nowrap;
}

/* Ara satirlar: kamera yoldayken dusen kucuk notlar. Buyuk
   repliklerin puntosuyla yarismaz, murekkebin sessiz tonunda. */
.repl--ara .satir i,
.repl--ara .satir:last-child i{
  font-size:clamp(1.05rem,1.7vw,1.45rem);line-height:1.5;
  font-weight:600;letter-spacing:0;color:#4a4639;
}

/* Soz SAG ALTTA durur: soyleyeniyle beraber, sessizce. */
.cam__alt{
  position:absolute;z-index:2;right:var(--kenar);bottom:1.4rem;
  display:flex;justify-content:flex-end;
  max-width:min(46ch,60%);
  text-align:right;
}
.alinti{
  margin:0;display:flex;flex-direction:column;gap:.35rem;align-items:flex-end;
  transition:opacity .45s ease;
}
.alinti__soz{
  font:italic 400 var(--olcu)/1.5 var(--grot);color:#4a4639;
}
.alinti__kim{
  font:700 var(--kunye)/1 var(--mono);letter-spacing:.16em;color:#6a6659;
}
.alinti--soluk{opacity:0}

/* ------------------------------------------------------- bolumler */

/* Bolum blogu filmin ustune basilan sayfa: kendi zaman penceresinde
   yukselerek acilir, film yola cikarken cekilir. Gorunmezken
   visibility de kapali; yoksa gorunmeyen baglantilar tiklanabilir
   kalirdi. 'acik' sinifini betik veriyor. */
.bolum{
  position:absolute;z-index:2;
  left:var(--kenar);top:50%;
  width:min(46ch,44%);
  translate:0 calc(-50% + (1 - var(--gor,0)) * 2.6rem);
  opacity:var(--gor,0);
  visibility:hidden;
}
.bolum.acik{visibility:visible}
.bolum--sag{left:auto;right:var(--kenar);width:min(54ch,46%)}
.bolum--ust{top:clamp(4.5rem,12vh,8rem);translate:0 calc((1 - var(--gor,0)) * 2.6rem)}

/* Efekt YOK: bolum yazilari duz murekkep. Film o taraflarda zaten
   bos krem birakiyor; isik, hale, kutu istenmedi. */

.bolum > .pafta{
  margin-bottom:1.5rem;padding-bottom:.6rem;
  border-bottom-width:1px;border-bottom-color:rgba(35,35,32,.28);
}
/* Onemli olan KIRMIZI yazilir: bolum basliklari ve yetenek listesi. */
.bolum .pafta__ad{color:var(--kir)}
.yetenek__k{color:var(--kir)}

/* Bilgi kartlari: sagdan kayarak gelir, ust uste iki kart.
   Kagit uzerine kagit: acik zemin, ince murekkep kenar. */
.bilgi{
  position:absolute;z-index:2;right:var(--kenar);top:50%;
  translate:0 -50%;
  display:flex;flex-direction:column;gap:1.2rem;
  width:min(30rem,46%);
  opacity:var(--gor,0);visibility:hidden;
}
.bilgi.acik{visibility:visible}
.bilgi__kart{
  background:var(--kagit-ac);
  border:1px solid rgba(35,35,32,.18);
  box-shadow:0 12px 30px rgba(20,18,15,.12);
  padding:1.3rem 1.5rem;
  display:flex;flex-direction:column;gap:.7rem;
  transform:translateX(calc((1 - var(--gor,0)) * (4rem + var(--k) * 3rem)));
}
.bilgi__kart b{
  font:700 var(--etiket)/1 var(--mono);letter-spacing:.2em;color:var(--kir);
  padding-bottom:.5rem;border-bottom:1px solid rgba(35,35,32,.16);
}
.bilgi__kart p{
  margin:0;
  font:600 clamp(.98rem,1.4vw,1.15rem)/1.55 var(--grot);color:var(--murekkep);
}


/* Dar VE DOKUNMATIK ekranda scrub yok. Sebep teknik: mobil veriyi
   22 MB'lik dosyaya yakmamak. Ayni hikaye orada sahne sahne anlatilir:
   film afis karesi olarak durur, replikler akista siralanir.

   Olcut yalniz genislik DEGIL: Windows'ta %150-175 olcekleme ya da
   tarayici zoom'u, koca laptobu 820px altina dusurup site "hicbir sey
   hareket etmiyor" haline getiriyordu; olculdu, yasandi. pointer:coarse
   sarti bunu keser: birincil isaretci parmaksa mobil, faresiyse film. */
/* Dar ekran filmi KAPATMAZ. Mobil sinemanin ILK surumu: film tam
   sayfa, dikey kadraj konunun oldugu taraftan kirpilir (kullanici
   tablo duzenini degil bunu secti, 28 Agu). */
@media (max-width:820px){
  /* Dikeyde 2000svh cok uzun parmak yolu; pencereler oransal oldugu
     icin kisaltmak zamanlamayi bozmaz. */
  .perde{height:1400svh}
  /* Dikey kadraj: kadraji konunun oldugu tarafa cek. */
  .cam__video{object-position:63% 52%}
  .cam__ray{display:none}
  /* Ucusan yapraklar dar ekranda fazlalik: kucuk kadraji kalabalik
     ediyor. KAYDIRIN yapragi kaliyor, o isaret. */
  .yagmur{display:none}
  .giris{width:calc(100% - 2 * var(--kenar))}
  .cam__soz{top:16%;translate:0 0;width:calc(100% - 2 * var(--kenar))}
  .cam__alt{max-width:80%;bottom:5rem}
  .bilgi{left:var(--kenar);right:var(--kenar);width:auto}
  .bolum,.bolum--sag{left:var(--kenar);right:var(--kenar);width:auto}
  .bolum{top:14%;translate:0 calc((1 - var(--gor,0)) * 2.6rem)}
  .bolum--ust{top:clamp(3.2rem,9vh,6rem)}
}

/* DUVAR. Sayfa bir duvar, bolumler o duvara yapistirilmis afisler.
   Asagi kaydirdikca yeni afis SOL ALTTAN gelip oncekinin ustune
   yapisiyor: duz alttan degil, capraz. Sokakta afis boyle yapistirilir,
   biri otekini tam ortmez, altta kalanin kenari gorunur.

   Once kagidi burusturmayi denedik. Yanlisti: kagit DOM parcasina
   bolununce ya mozaik oluyor ya dama tahtasi. Afis dilinde gecis
   kagidi deforme etmez, kagidi DEGISTIRIR. */

/* Afisin yerine oturma ilerlemesi --g ile geliyor (0 -> 1), betikten.
   Betik gelmezse --g yok sayilir ve 1 kabul edilir: afisler duvarda
   duz durur, site calisir. */
/* Dedektor notu. `cramped-padding` bu bolumlerin hepsinde takiliyor:
   afisin kendi gorseli ve slogan bandi kagidin kenarina kadar
   basiliyor, ic bosluk birakmiyor. Kural genel olarak dogru ama
   burada karar kazaniyor: afiste gorsel tam tasar, bant kenardan
   kenara gider. Ic bosluk METINDE var (.pano ve .afis dolgusu),
   kagidin kendisinde yok. */
.kat{
  position:relative;
  /* Her afis en az bir ekran. Kisa bir bolum ekrani doldurmayinca
     altindaki afis hem ustunden hem altindan goruluyor ve "uzerine
     yapisti" degil "ortasina bant gecti" gibi duruyor. */
  min-height:100svh;
  /* Donme ekseni UST kenarda. Alt koseye koyunca uzun bir bolum
     4.5 derecede yuzlerce piksel savruluyordu; ustte ise sapma
     bolumun boyundan bagimsiz, hep ayni. Saat yonu, cunku o zaman
     sol kenar yukari kalkiyor ve once o goruluyor. */
  transform-origin:50% 0;
  z-index:var(--z,1);
  /* Yol EKRAN biriminde, yuzde degil. Yuzde elemanin kendi boyuna
     gore olculuyor: uzun bir bolum yuzlerce piksel asagi itiliyor ve
     arada bombos duvar kaliyordu. */
  /* Yatay yol kisaltildi. Uzun oldugunda afisin METNI de onunla
     beraber kayiyor ve baslik ekranin solundan tasip kesiliyordu.
     Artik yol, bolumun kendi ic boslugundan kucuk: yazi kadrajin
     disina cikmiyor. Capraz hissi zaten donmeden ve dikey yoldan
     geliyor. */
  translate:calc((1 - var(--g,1)) * -3.5vw) calc((1 - var(--g,1)) * 13svh);
  rotate:calc((1 - var(--g,1)) * 4.5deg);
  /* Buyume KALDIRILDI. Kenardaki bosluqu kapatmak icin afisi
     buyutuyordum; kapatiyordu ama afisin butun icerigini de
     buyutuyordu, baslik tasip kesiliyordu. Bosluk artik asagidaki
     yanal uzantiyla kapaniyor, o yalniz ZEMINI genisletiyor,
     icerige dokunmuyor. */
  /* Yapisana kadar duvardan HAVADA duruyor, o yuzden golge dusuruyor.
     Yapisinca golge sifirlaniyor: yapisik kagit golge dusurmez.
     Sus degil, mesafenin kendisi; dedektorun golge kurali burada
     karsiligini buluyor cunku ortada gercek bir mesafe var.

     drop-shadow degil box-shadow: afis dikdortgen, golgesi de
     dikdortgen. drop-shadow bunun icin bir filtre katmani aciyor,
     4000 piksellik bir bolumde bedava degil. Ayni sonuc daha ucuza. */
  /* Iki is birden yapiyor.
     Birinci ve ikinci golge: afisin zemininin SAGA ve SOLA uzatilmis
     birer kopyasi. Bulaniklik ve yayilma sifir, yani duz bir zemin
     paneli. Afis kayarken ya da egilirken kenarda acilan seridi
     bunlar dolduruyor; ust kenar ayni egik cizgide devam ettigi icin
     altta kalan afisin gorundugu yer bozulmuyor.
     Ucuncu golge: afis daha duvara yapismamisken havada durdugu icin
     dusen golge, yapisinca sifirlaniyor. */
  box-shadow:
    30vw 0 0 var(--zemin, var(--kagit)),
    -30vw 0 0 var(--zemin, var(--kagit)),
    calc((1 - var(--g,1)) * -1.4rem)
    calc((1 - var(--g,1)) * 1rem)
    calc((1 - var(--g,1)) * 1.6rem)
    rgba(10,8,5,calc((1 - var(--g,1)) * .5));
  /* will-change YOK. Bu bolumler 4000 piksele kadar cikiyor ve alti
     tane var; hepsini ayri GPU katmanina cikarmak bellekte pahali.
     Hareket zaten her karede hesaplaniyor. Kaydirma takilirsa
     donulecek ilk yer burasi. */
}

/* UST USTE BINME. Bu isin butun meselesi. Onceki afis duvarda
   CIVILI kaliyor, sayfayla beraber yukari kacmiyor; yeni afis onun
   uzerinden geciyor ve ustunu ortuyor.

   Once bu yoktu: iki afis beraber kayiyordu, yani binme degil sira
   vardi. Uzerine gelmek icin alttakinin durmasi sart.

   `top` degerini betik koyuyor, CSS degil: bir bolum ekrandan
   uzunsa 0'a civilenirse alt kismi hic gorunmez, o yuzden top
   negatif olmali (ekran yuksekligi eksi bolum yuksekligi). Yuzdeyle
   yazilamiyor, cunku sticky top yuzdesi elemanin degil KAPSAYICININ
   boyuna gore cozuluyor. Betik gelmezse yapistirma hic kurulmuyor
   ve bolumler duz akiyor: site yine calisir. */
.kat[data-yapisik]{position:sticky}

/* Dinlenme acisi YOK. Elle yapistirilan afis birazcik egik dursun
   diye her bolume bir derecenin altinda aci verilmisti. Bedeli agirdi:
   egik bir afisin kenari iceri kaciyor ve iki yanda ince koyu serit
   birakiyor. Egiklik yolda zaten var, yerine oturunca duz duruyor. */

/* Her afisin kendi kagit tonu var ve BIRBIRINDEN FARKLI; hepsi ayri
   ayri uretildi. Sayfanin kagidi #f5ead4 iken deneyim afisinin kendi
   kagidi #fcfdf5, neredeyse beyaz. Gorselin ortmedigi her yerde bu iki
   ton yan yana geliyordu ve kaydirirken kenarda bant olarak
   goruluyordu.

   Cozum tonu zorla esitlemek degil: her afis zeminini KENDI gorselinin
   kose pikselinden aliyor. Degerler olculdu, goz karariyla secilmedi.
   --zemin yanal uzantiyi da besliyor, o yuzden gecis sirasinda da
   ayni ton. */
.afis{
  position:relative;
  background:var(--zemin);
  min-height:100svh;
  display:flex;align-items:center;
  padding:clamp(3rem,9vh,6rem) clamp(1.4rem,6vw,5.5rem);
  overflow:hidden;
}

/* Kose pikselinden olculen zeminler. */
.afis:nth-of-type(1){--zemin:#fbebce}   /* giris */
.afis--hakkinda    {--zemin:#f9f9f9}
.afis--yetenek     {--zemin:#f9ebd0}
.afis--deneyim     {--zemin:#fcfdf5}

.afis__resim{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:70% 54%;
  animation:nefes 26s ease-in-out infinite alternate;
}

@keyframes nefes{
  from{transform:translate3d(0,0,0) rotate(0deg) scale(1.008)}
  to  {transform:translate3d(-.5%,.35%,0) rotate(.18deg) scale(1.016)}
}

/* Sol yaridaki hafif orgu: iri yazinin altindaki lekeleri
   sakinlestiriyor, perde degil. */
.afis::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(250,240,220,.46) 0%,
    rgba(250,240,220,.26) 28%,
    rgba(250,240,220,.04) 44%,
    rgba(250,240,220,0) 56%);
}

.ust{
  position:absolute;z-index:3;margin:0;
  left:clamp(1.4rem,6vw,5.5rem);top:clamp(1.6rem,4vh,2.6rem);
  font:700 var(--etiket)/1 var(--mono);letter-spacing:.2em;color:#4a4639;
}

.afis__soz{position:relative;z-index:2;max-width:min(46ch,52%)}

.soz{
  /* Iki kademe: ust satir iri ve kirmizi, alt satir kucuk ve TEK
     SIRADA. Kirmizi kopegin yatagindan orneklendi. */
  margin:0;font-weight:800;letter-spacing:-.045em;color:var(--murekkep);
  display:flex;flex-direction:column;gap:.3rem;
}
.soz em{
  font-style:normal;color:var(--kir);
  font-size:clamp(2.6rem,6.6vw,5.8rem);line-height:1.04;
}
.soz span{
  font-size:clamp(1.1rem,2.6vw,2.2rem);line-height:1.25;
  letter-spacing:-.02em;white-space:nowrap;
}

/* Is bandi. Buyuk harf, genis aralik: kural "genis aralik yalniz kisa
   buyuk harf etiketlerde" diyor, burasi tam o. Renk .ust ile ayni,
   ikisi de sayfanin sessiz sesi. */
.is{
  margin:1.1rem 0 0;
  font:700 var(--etiket)/1.62 var(--mono);
  letter-spacing:.16em;color:#4a4639;
}

/* --------------------------------------------------- deneyim afisi */

/* Gorsel TAM TEPEDEN, tavandan bakar gibi. Berjer capraz duruyor ve
   bir kosesi kadrajin sag altina giriyor; sol yarisi bos krem uretildi,
   yazi oraya basiliyor.

   object-position sag ALTA sabit: kirpma olursa bos taraftan olsun,
   berjerin kosesi kadrajin icinde kalsin. */
.afis--deneyim{align-items:center}
.afis--deneyim .afis__resim{object-position:100% 100%;animation:none}
.afis--deneyim::after{content:none}

.deneyim{position:relative;z-index:2}

.deneyim__bir{
  margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.18;
  font-size:clamp(1.5rem,3.1vw,2.6rem);
  color:var(--murekkep);
}
/* Sus cumle bu degil, PUNTO burada dusuyor ama renk yukseliyor:
   sakanin agirligi ikinci satirda. */
.deneyim__iki{
  margin:.9rem 0 0;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.05rem,1.9vw,1.5rem);
  color:var(--kir);
}

.dugme{
  display:inline-block;margin-top:1.7rem;
  padding:.68rem 1.2rem;
  background:var(--murekkep);color:var(--kagit-ac);
  font:700 var(--etiket)/1 var(--grot);letter-spacing:.14em;
  text-decoration:none;
}
.dugme:hover{background:var(--kir-zem)}

/* --------------------------------------------------- hakkinda afisi */

/* Girisin aynasi: solda kedi, sagda yazi. */
.afis--hakkinda{align-items:center}
.afis--hakkinda .afis__resim{object-position:22% 50%;animation:none}
.afis--hakkinda::after{
  background:linear-gradient(270deg,
    rgba(250,240,220,.5) 0%,
    rgba(250,240,220,.3) 26%,
    rgba(250,240,220,.05) 44%,
    rgba(250,240,220,0) 58%);
  opacity:1;
}

/* Metnin icindeki baglanti. Alti cizili kaliyor: bir cumlenin
   ortasinda renk tek basina tiklanabilirligi soylemez. */
.hakkinda__bag{
  color:var(--kir);
  text-decoration-thickness:2px;text-underline-offset:3px;
}
.hakkinda__bag:hover{color:var(--kir-zem)}

.afis__yazi{
  position:relative;z-index:2;
  /* Yazi sag kenara yapisik degil, kediye dogru cekildi. Afiste
     figur ile metin birbirine bakar; aralarindaki bosluk kadar
     ilgileri var. */
  margin-left:auto;margin-right:clamp(1rem,5vw,5rem);
  max-width:min(54ch,56%);
}
/* Afislerde pafta artik sag ust koseden alinip METNIN USTUNE kondu.
   Kosedeki hali bolumun adini icerikten kopariyordu: numara bir
   yerde, anlattigi sey baska bir yerde duruyordu. Ustte durunca
   basligin kendisi oluyor. */
/* Sol tarafa yaslanan metin blogu. .afis__yazi varsayilan olarak saga
   yasliyor, bu onu geri aliyor. Sol bloklar biraz daha genis: sagdaki
   metin duz paragraf, soldakiler ise kisa satirlar. */
.afis__yazi--sol{
  margin-left:0;margin-right:auto;
  /* Sutun biraz daraldi. Satir kisaldikca metin ferahlar; genisletmek
     tersini yapar, goz satir sonunu bulmakta zorlanir. */
  max-width:min(46ch,50%);
}

.afis__yazi > .pafta{
  margin:0 0 1.6rem;padding-bottom:.6rem;
  border-bottom-width:1px;border-bottom-color:rgba(35,35,32,.28);
}

/* ---------------------------------------------------------- pafta */

/* Bolum kunyesi. Numara kaldirildi: alti bolumluk bir sayfada
   numaralamak bir dizin vaadi veriyor, ama kimse "03'e git"
   demiyor. Geriye bolumun adi kaldi. */
.pafta{
  display:flex;align-items:baseline;gap:.9rem;margin:0 0 clamp(2rem,5vw,3.4rem);
  padding-bottom:.6rem;border-bottom:2px solid rgba(35,35,32,.35);
  font:700 var(--etiket)/1 var(--grot);letter-spacing:.22em;
}

/* -------------------------------------------------------- hakkinda */


/* Punto metin uzayinca dusuruldu: dort paragraf onceki olcude afise
   sigmiyordu, alt kenardan tasiyordu. Afis bir ekran, metin de o
   ekrana sigar. */
.hakkinda__c{
  margin:0 0 .95rem;font-size:clamp(1.04rem,1.5vw,1.32rem);line-height:1.62;
  font-weight:600;letter-spacing:-.005em;color:var(--murekkep);
}
/* Selamlama: renkli ve biraz iri, gerisinden ayrilsin. */
.hakkinda__c:first-child{
  color:var(--kir);font-size:clamp(1.12rem,1.7vw,1.48rem);margin-bottom:1rem;
}
.hakkinda__c:last-child{margin-bottom:0}

/* Eksik alan. Gizlenmiyor: gizlemek, unutmak demek. */
.eksik{
  margin:1.6rem 0 0;padding:.85rem 1rem;
  border:1px dashed var(--kir);color:var(--kir);
  font-size:.95rem;line-height:1.6;
}
.eksik__et{
  display:inline-block;margin-right:.6rem;padding:.1rem .45rem;
  background:var(--kir);color:var(--kagit-ac);
  /* .66rem = 10.6px, okunabilirlik tabaninin altindaydi. */
  font:700 var(--kunye)/1.6 var(--mono);letter-spacing:.14em;vertical-align:1px;
}

/* --------------------------------------------------------- yetenek */

/* Gorselin UST seridi bos uretildi, liste oraya basiliyor. Figur
   asagida. Bu, duvardaki ucuncu yerlesim: hakkinda solda-sagda,
   deneyim sagda-solda, burasi ustte-altta. Ust uste iki afis ayni
   duzende olmasin diye. */
.afis--yetenek{align-items:flex-start}
/* Gorsel bir ara saga cekilmisti (inset ile). Geri alindi: gorseli
   saga itmek, solunda kagit acmak demek ve o acilan yer duz bir renk.
   Boyanmis kagidin kendi dokusu ve vinyeti var, duz renk onu
   tutturamiyor; kenarda gorunur bir dikis kaliyordu. Kaydirirken
   fark edilen "bosluk" tam olarak buydu.

   Metne yer acmanin dogru yolu gorseli itmek degil: ya sutun ve
   aralik ferahlatilir (burada oyle yapildi), ya da gorsel figurler
   daha sagda olacak sekilde yeniden uretilir. */
.afis--yetenek .afis__resim{object-position:50% 100%;animation:none}
.afis--yetenek::after{content:none}

.yetenek{position:relative;z-index:2;margin:0;padding:0;list-style:none}

/* Liste bir cumle gibi degil, AFISTE SAYILAN seyler gibi diziliyor:
   her madde kendi satirinda, onunde kisa bir cizgi. */
/* Cizgi metnin AKISINDA degil, sola sarkiyor. Boylece maddelerin bas
   harfleri ustteki paftanin bas harfiyle tam ayni dikeyde duruyor.
   Once cizgi iceride bir dolguyla duruyordu ve butun liste paftadan
   1.5rem sagda kaliyordu.

   Negatif kenar bosluguyla da denendi, 6 piksel sasti; sarkitmada
   hesap yok, metin dogrudan kabin kenarindan basliyor. */
.yetenek__k{
  position:relative;padding-left:0;
  font-weight:800;letter-spacing:-.03em;line-height:1.32;
  font-size:clamp(1.25rem,2.55vw,2.05rem);
  color:var(--murekkep);
}
.yetenek__k + .yetenek__k{margin-top:.85rem}
.yetenek__k::before{
  content:"";position:absolute;left:-1.5rem;top:.56em;
  width:.85rem;height:3px;background:var(--kir);
}

/* --------------------------------------------------------- deneyim */

.deneyim{margin:0;padding:0;list-style:none}
.kayit{
  padding:clamp(1.2rem,3vw,2rem) 0;border-top:1px solid rgba(35,35,32,.22);
}
.kayit:last-child{border-bottom:1px solid rgba(35,35,32,.22)}
.kayit__ust{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:baseline}
.kayit__yer{font-size:clamp(1.5rem,4vw,2.6rem);font-weight:800;letter-spacing:-.03em;color:var(--kir)}
.kayit__yil{font:700 var(--etiket)/1 var(--mono);letter-spacing:.18em;color:#6a6659}
.kayit__unvan{margin:.35rem 0 0;font-weight:700;letter-spacing:.02em}
.kayit__ne{margin:.5rem 0 0;max-width:56ch;color:#57544a}

/* ---------------------------------------------------------- proje */

.projeler{margin:0;padding:0;list-style:none;display:grid;gap:clamp(3.5rem,9vw,7rem)}
.proje__bas{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.proje__no{font:700 .8rem/1 var(--mono);letter-spacing:.2em;color:var(--kir)}
.proje__ad{margin:0;font-size:clamp(2rem,6.5vw,4.4rem);line-height:1.08;
 font-weight:800;letter-spacing:-.04em;color:var(--kir)}
.proje__dal{margin-left:auto;font:700 var(--etiket)/1 var(--grot);letter-spacing:.2em;color:#6a6659}
.proje__tur{margin:.5rem 0 1.4rem;font-size:1.12rem;font-weight:600}

/* Kalin siyah kenar: Hulusi afislerinin cercevesi. */
.proje__cerceve{margin:0;background:var(--kagit-ac);padding:clamp(9px,1.1vw,15px);
 box-shadow:0 0 0 1px rgba(35,35,32,.18),0 18px 34px rgba(35,35,32,.14)}
.proje__gorsel{display:block;width:100%;height:auto;aspect-ratio:16/10;
 object-fit:cover;object-position:top center;filter:saturate(.8) contrast(1.05)}
.proje__kunye{
  display:flex;justify-content:space-between;gap:.6rem 1.4rem;flex-wrap:wrap;
  padding:.65rem .2rem 0;color:#57544a;
  font:700 var(--kunye)/1.65 var(--mono);letter-spacing:.12em;
}
.proje__kunye a{color:var(--kir)}

.proje__parca{margin:1.1rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.proje__parca li{
  padding:.18rem .6rem;border:1px solid rgba(35,35,32,.3);
  font:700 var(--kunye)/1.75 var(--mono);letter-spacing:.08em;
}

/* ---------------------------------------------------------- delik */

/* Duvardaki tek koyu yuzey. Site ile sistem arasindaki fark bir
   baslik farki degil, DERINLIK farki: siteler duvarin uzerinde durur,
   sistemler duvarin arkasinda. O yuzden burasi bir kart degil, bir
   acikliK; kagit bitiyor ve altindaki karanlik goruluyor.

   view-transition-name bu yuzeyi hedef sayfadaki tam ekran karanlikla
   eslestiriyor: basinca delik buyuyup ekrani yutuyor. */
.delik{
  position:relative;
  margin:0 0 clamp(2.6rem,6vw,4rem);
  padding:clamp(1.6rem,4vw,2.6rem) clamp(1.4rem,4vw,2.4rem);
  background:var(--oda);color:var(--kagit);
  view-transition-name:delik;
}

.delik__ad{
  margin:0;color:#d66a52;
  font:700 var(--etiket)/1 var(--mono);letter-spacing:.2em;
}
.delik__bir{
  margin:.9rem 0 0;max-width:52ch;color:#a9a08c;
  font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.6;
}

.delik__liste{margin:clamp(1.6rem,4vw,2.4rem) 0 0;padding:0;list-style:none}
.dal + .dal{margin-top:1px}

/* Satirlar KANIT, baglanti degil. Cizgi bir sinir degil, kuyunun
   basamagi. */
.dal{
  padding:clamp(1.1rem,3vw,1.6rem) 0;
  border-top:1px solid #322c24;
}
.dal:last-child{border-bottom:1px solid #322c24}

.dal__ad{
  display:block;font-size:clamp(1.7rem,4.6vw,3rem);line-height:1.06;
  font-weight:800;letter-spacing:-.035em;
}
.dal__tur{
  display:block;margin-top:.3rem;color:#a9a08c;
  font-size:clamp(.95rem,1.4vw,1.08rem);
}
/* Durum rozeti. Canlida calisan sistemle gelistirilmekte olan sistem
   arasindaki fark, kunyenin dibine gomulecek bir ayrinti degil. */
.dal__durum{
  display:inline-block;margin-top:.75rem;
  padding:.24rem .55rem;border:1px solid #4a4238;color:#a9a08c;
  font:700 var(--kunye)/1.4 var(--mono);letter-spacing:.12em;
}
.dal__durum--canli{
  border-color:#8fae7e;color:#8fae7e;
}
.dal__durum--canli::before{
  content:"";display:inline-block;width:.45rem;height:.45rem;
  border-radius:50%;background:#8fae7e;margin-right:.45rem;
  vertical-align:.05em;
}

.dal__bir{
  display:block;margin-top:.85rem;max-width:56ch;
  font-size:clamp(.98rem,1.4vw,1.1rem);line-height:1.6;
}

.dal__olcu{
  margin:1rem 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:.42rem .5rem;
}
.dal__olcu li{
  border:1px solid #4a4238;padding:.28rem .6rem;color:#a9a08c;
  font:700 var(--kunye)/1.4 var(--mono);letter-spacing:.1em;
}

/* Delikten inen TEK baglanti. Her sistem icin ayri sayfa yok:
   amac sistemleri belgelemek degil, is yapilabildigini gostermek. */
.delik__in{
  display:inline-block;margin-top:clamp(1.6rem,4vw,2.4rem);
  color:#d66a52;text-decoration:none;
  font:700 var(--etiket)/1 var(--grot);letter-spacing:.16em;
  border-bottom:2px solid #d66a52;padding-bottom:.3rem;
}
.delik__in:hover,.delik__in:focus-visible{color:var(--kagit);border-bottom-color:var(--kagit)}
.delik__in::after{content:" ↓"}

/* -------------------------------------------------------- is turu */

/* Siteler basligi. Delikten sonra geliyor ve bir kademe kucuk:
   sistemler derin is, siteler dis yuz. */
.tur{
  margin:0 0 clamp(1.1rem,2.6vw,1.6rem);
  padding-bottom:.5rem;border-bottom:1px solid rgba(35,35,32,.22);
  font-size:clamp(1.15rem,2.2vw,1.6rem);font-weight:800;letter-spacing:-.03em;
}

/* ------------------------------------------------------------- son */


.pano--son{
  background:var(--kir-zem);--zemin:var(--kir-zem);color:var(--kagit-ac);
  padding-block:clamp(5rem,13vw,9rem);
}
/* Solda kopek, sagda bilgi. Kopek koyu kirmizinin ustunde, filmin
   kopek yatagi diliyle ayni zeminde. */
.son__izgara{
  display:grid;grid-template-columns:1fr;justify-items:center;
  width:100%;max-width:1180px;margin:0 auto;
}
.son__bilgi{text-align:center}
.son__ust{margin:0 0 clamp(1.6rem,4vw,2.6rem);
  font-size:clamp(1.3rem,2.8vw,2rem);font-weight:800;letter-spacing:-.02em}

/* Efendi satirlar: etiket sutunu sabit, degerler ayni dikeyde. */
.son__satir{margin:0 0 1.15rem;display:flex;align-items:baseline;gap:1.1rem}
.son__bag{
  color:var(--kagit-ac);text-decoration:none;
  font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700;letter-spacing:-.015em;
  border-bottom:2px solid rgba(250,240,220,.42);padding-bottom:.2rem;
  word-break:break-word;
}
.son__bag:hover,.son__bag:focus-visible{border-bottom-color:var(--kagit-ac)}
.son__yol{
  margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:1.15rem;
}
.son__yolbag{
  display:inline-flex;align-items:baseline;gap:1.1rem;
  color:var(--kagit-ac);text-decoration:none;
}
.son__yolbag:hover .son__yolno{border-bottom-color:var(--kagit-ac)}
.son__yolad{
  font:700 var(--kunye)/1 var(--mono);letter-spacing:.18em;
  color:rgba(250,240,220,.72);
  width:6.2rem;flex:none;
}
.son__yolno{
  font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700;letter-spacing:-.015em;
  border-bottom:2px solid rgba(250,240,220,.42);padding-bottom:.2rem;
}

.pano--son .bant{background:#8f3222}

@media (max-width:820px){
  .son__izgara{grid-template-columns:1fr;gap:2rem}
  }

/* -------------------------------------------------------- dar ekran */

@media (max-width:640px){
  /* Dar ekranda bolum dolgusu 1.4rem'e iniyor, sarkan cizgiye yer
     kalmiyor; iceri aliniyor. */
  .yetenek__k{padding-left:1.4rem}
  .yetenek__k::before{left:0}

  .bant{letter-spacing:.14em;font-size:var(--kunye)}
  .bant .slogan{font-size:.84rem}
  /* Dar ekranda figur sagda kalirsa yazinin altina giriyor; resim
     kaydiriliyor ve orgu dikeye donuyor. */
  .afis{align-items:flex-end;padding-bottom:clamp(5rem,16vh,8rem)}
  .afis__resim{object-position:70% 44%}
  .afis::after{background:linear-gradient(180deg,
    rgba(240,240,224,0) 0%,
    rgba(240,240,224,.42) 34%,
    rgba(240,240,224,.9) 58%,
    rgba(240,240,224,.96) 100%)}
  .afis__soz{max-width:none}

  .ad{text-align:center}
  .proje__dal{margin-left:0}
  .pafta{letter-spacing:.16em}
}

/* ------------------------------------------------------------ kapi */

/* Tas duvar sahnesi: bolumun kendisi. Kare yok, resim uctan uca.
   Alt kenara demirli (object-position) ki otlar ve cicekler her
   oranda gorunur kalsin. */
.pano--proje{padding:0;min-height:0}
.duvar{
  position:relative;height:100svh;overflow:hidden;
  transform-origin:50% 62%;
  transition:transform .9s cubic-bezier(.5,0,.2,1), filter .9s ease;
}
.duvar__resim{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 100%;
}
.duvar__resim--acik{opacity:0;transition:opacity .35s ease}
.duvar--aciliyor{transform:scale(2.35);filter:brightness(1.12)}
.duvar--aciliyor .duvar__resim--acik{opacity:1}

/* Kapinin tiklama alani: resmin ortasindaki kapiyla ayni yerde,
   gorunmez. Resim alta demirli ve kapi yatayda ortada; kirpilma
   hangi yonde olursa olsun kapi yerinden oynamiyor. */
.duvar__kapi{
  position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:min(24%,360px);height:82%;
  background:none;border:0;cursor:pointer;padding:0;
}
.duvar__kapi:focus-visible{outline:3px solid var(--kir);outline-offset:-3px}

/* Kirmizi tas: duvardaki gizli dugme. Basinca Ihap Hulusi aniti
   acilir. Gorunmez dugme, tasin kendisi resimde boyali. */
.duvar__tas{
  position:absolute;left:78%;top:43%;width:11%;height:14%;
  background:none;border:0;padding:0;cursor:pointer;
}
.gorunmez{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* Anit penceresi: kagit kart, murekkep cerceve. Efekt yok. */
.anit{position:fixed;inset:0;z-index:90}
.anit[hidden]{display:none}
.anit__karart{position:absolute;inset:0;background:rgba(20,18,15,.45)}
.anit__kart{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(38rem,88vw);
  background:var(--kagit);color:var(--murekkep);
  border:3px solid var(--murekkep);
  padding:2.2rem 2.4rem 2.4rem;
  box-shadow:0 22px 48px rgba(20,18,15,.35);
  display:flex;gap:1.6rem;align-items:flex-start;flex-wrap:wrap;
}
.anit__foto{
  width:9.5rem;height:auto;flex:none;
  border:2px solid var(--murekkep);
  filter:saturate(.85);
}
.anit__metin{flex:1;min-width:14rem}
.anit__x{
  position:absolute;top:.55rem;right:.8rem;
  background:none;border:0;padding:.2rem;cursor:pointer;
  font:400 1.6rem/1 var(--grot);color:var(--murekkep);
}
.anit__ust{
  margin:0;font:700 var(--etiket)/1.5 var(--mono);
  letter-spacing:.18em;color:var(--kir);
}
.anit__yil{margin:.4rem 0 1rem;font:700 var(--kunye)/1 var(--mono);letter-spacing:.16em;color:#6a6659}
.anit__soz{margin:0;max-width:44ch;font-size:1.02rem;line-height:1.7}

.kapi__not{
  position:absolute;left:50%;bottom:1.4rem;translate:-50% 0;
  margin:0;font:700 var(--etiket)/1 var(--mono);letter-spacing:.22em;
  color:var(--kir);
}
.gorunmez{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* Bolum etiketi kapinin TAM USTUNDE, kirmizi, efektsiz, IRI. */
.pafta--sahne{
  position:absolute;z-index:3;top:clamp(1.2rem,4svh,3rem);
  left:50%;translate:-50% 0;margin:0;padding:0;border:0;
  justify-content:center;
}
.pafta--sahne .pafta__ad{
  color:var(--kir);
  font-size:calc(var(--etiket) * 3);letter-spacing:.18em;
}

/* ------------------------------------------------------------- oda */

/* Kapinin arkasindaki bembeyaz bosluk. Kagit degil, BOS SAYFA:
   filmden farkli bir dunya oldugu bir bakista anlasilsin. */
.oda{
  position:fixed;inset:0;z-index:80;background:#fff;
  opacity:0;visibility:hidden;transition:opacity .45s ease, visibility 0s .45s;
  overflow:hidden;touch-action:none;
}
.oda--gorunur{opacity:1;visibility:visible;transition:opacity .45s ease}
.oda-acik{overflow:hidden}

.oda__kapat{
  position:absolute;z-index:5;top:1.2rem;right:1.4rem;
  border:1px solid rgba(35,35,32,.35);background:#fff;cursor:pointer;
  width:2.6rem;height:2.6rem;font:400 1.5rem/1 var(--grot);color:var(--murekkep);
}
.oda__kapat:hover{background:var(--murekkep);color:#fff}

.oda__saha{position:absolute;inset:0;z-index:1}

/* Ucusan parcalar: konum tamamen betikten (translate3d). */
.oda__yaprak,.oda__kart{position:absolute;left:0;top:0;will-change:transform}
.oda__yaprak{height:auto;pointer-events:none}
.oda__kart{
  width:clamp(150px,19vw,260px);background:#fff;text-decoration:none;
  padding:9px 9px 12px;box-shadow:0 14px 36px rgba(20,18,15,.16);
  border:1px solid rgba(35,35,32,.08);
}
.oda__kart img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.oda__kunye{display:flex;flex-direction:column;gap:.15rem;margin-top:.55rem}
.oda__kunye b{font:800 .95rem/1.2 var(--grot);letter-spacing:-.01em;color:var(--murekkep)}
.oda__kunye i{font:600 .74rem/1.3 var(--grot);font-style:normal;color:#6a6659}
/* Ekran goruntusu olmayan is: tipografik koyu pano. Gizlilik gorsel
   uydurulmasindan iyidir; rakamlar konusur. */
.oda__pano{
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;
  aspect-ratio:16/10;background:var(--oda);padding:1rem 1.1rem;
}
.oda__pano b{
  font:700 var(--kunye)/1.5 var(--mono);letter-spacing:.12em;
  color:var(--kagit-ac);
}
.oda__pano b:last-child{color:var(--kir-ac)}

/* Kedi: SABIT oturur, sallanmaz; yeri betikten left ile gelir
   (ziplayinca degisir). Kap; pozlar icinde SEFFAF katmanlar. */
.oda__kedi{
  position:absolute;z-index:3;left:50%;bottom:-2vh;translate:-50% 0;
  width:clamp(200px,26vw,340px);aspect-ratio:1;
  pointer-events:none;user-select:none;
  transform-origin:50% 92%;
}
/* Pozlar ust uste, aktif olan gorunur. Gecis eriyerek: kafa cevirme
   pat diye degil. Nefes: yavas, dipten olceklenen salinim; govdeyi
   oynatmaz, sadece hafifce kabarir. */
.oda__kedi-kat{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:50% 100%;
  opacity:0;transition:opacity .22s ease;
  transform-origin:50% 100%;
  animation:kedi-nefes 3.4s ease-in-out infinite alternate;
}
.oda__kedi-kat.acik{opacity:1}
/* Havadayken poz aninda degisir; erime yalniz otururken. */
.oda__kedi--ucus .oda__kedi-kat{transition:none}
@keyframes kedi-nefes{from{transform:scaleY(1)}to{transform:scaleY(1.011)}}
/* Pusu: kic geride, atlamaya hazirlanirken kic iki yana sallanir.
   Ters surumu sag yon icin aynali. Animasyon transform'u surdugunden
   ucus transformu ile cakismaz: pusu ve ucus ayni anda olmaz. */
.oda__kedi--pusu{animation:kedi-sallan .3s ease-in-out infinite alternate}
@keyframes kedi-sallan{
  from{transform:rotate(-2.3deg) translateX(-5px)}
  to{transform:rotate(2.3deg) translateX(5px)}
}
.oda__kedi--pusu-ters{animation:kedi-sallan-ters .3s ease-in-out infinite alternate}
@keyframes kedi-sallan-ters{
  from{transform:scaleX(-1) rotate(-2.3deg) translateX(-5px)}
  to{transform:scaleX(-1) rotate(2.3deg) translateX(5px)}
}
/* Inis: kisa bir ezilme; kedi yere oturur, toz kalkar gibi. */
.oda__kedi--inis{animation:kedi-inis .26s ease-out}
@keyframes kedi-inis{
  from{transform:scaleY(.88) scaleX(1.06)}
  to{transform:scaleY(1) scaleX(1)}
}

@media (max-width:820px){
  .oda__kart{width:clamp(130px,38vw,180px)}
  .oda__kedi{width:clamp(160px,44vw,240px)}
}


/* ---------------------------------------------------------- yagmur */

/* Sayfanin her yerinde arada bir suzulen yapraklar. Sabit katman,
   tiklanmaz; her yaprak kendi temposunda tepeden dibe iner. */
.yagmur{position:fixed;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.yagmur img{
  position:absolute;top:-8%;
  left:calc(6% + var(--i) * 15.5%);
  width:calc(26px + var(--i) * 5px);height:auto;
  opacity:0;
  animation:yagmur-dus calc(17s + var(--i) * 4.2s) linear infinite;
  animation-delay:calc(var(--i) * -6.5s);
}
@keyframes yagmur-dus{
  0%{transform:translate(0,0) rotate(0deg);opacity:0}
  6%{opacity:.85}
  30%{transform:translate(-26px,30vh) rotate(-40deg)}
  60%{transform:translate(22px,62vh) rotate(30deg)}
  92%{opacity:.85}
  100%{transform:translate(-14px,112vh) rotate(-25deg);opacity:0}
}

/* ---------------------------------------------------------- acilis */

/* Acilis perdesi. Sayfa filmin uzerine kurulu; film inene kadar
   kaydirma bos donerdi. Perde iner, kaydirma o zaman acilir.
   Cizgi susleme degil: filmin gercek indirme orani. */
.yukleniyor{overflow:hidden}
.acilis{
  position:fixed;inset:0;z-index:120;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.2rem;background:var(--kagit);
  transition:opacity .7s ease;
}
.acilis--gitti{opacity:0;pointer-events:none}
.acilis__muhur{height:74px;width:auto}
.acilis__ad{margin:0;font:700 var(--etiket)/1 var(--mono);letter-spacing:.2em;color:#4a4639}
.acilis__cizgi{width:min(220px,52vw);height:2px;background:rgba(35,35,32,.14);overflow:hidden}
.acilis__cizgi i{
  display:block;height:100%;background:var(--kir);
  transform:scaleX(var(--dolu,0));transform-origin:left center;
  transition:transform .3s linear;
}