/* 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}

@media (prefers-reduced-motion:no-preference){
  ::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}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

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}

/* 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 */

/* 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. */

.afis{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding:clamp(3rem,9vh,6rem) clamp(1.4rem,6vw,5.5rem);
  overflow:hidden;
  background:var(--kagit);
}

.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.8rem,7.4vw,6.6rem);line-height:1.02;
}
.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:.55rem 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.1rem;
  padding:.62rem 1.15rem;
  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;
  max-width:min(60ch,62%);
}

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

@media (prefers-reduced-motion:reduce){
  /* Hareket kisitliysa yapistirma da nefes de yok. Afisler duvarda
     duz durur; ust uste binme kaliyor, cunku o hareket degil yerlesim. */
  .kat{translate:0;rotate:0deg;scale:1;filter:none}
  .afis__resim{animation:none}
}

/* ---------------------------------------------------------- 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}
.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. */
.yetenek__k{
  position:relative;padding-left:1.5rem;
  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:.42rem}
.yetenek__k::before{
  content:"";position:absolute;left:0;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);text-align:center;
  padding-block:clamp(5rem,13vw,9rem);
}
.son__ust{margin:0 0 1rem;font-size:clamp(1.05rem,2.4vw,1.5rem);letter-spacing:.02em}

.son__bag{
  display:inline-block;color:var(--kagit-ac);text-decoration:none;
  font-size:clamp(1.5rem,6vw,4rem);font-weight:800;letter-spacing:-.035em;
  border-bottom:6px solid var(--kagit-ac);word-break:break-word;
}
.son__bag:hover,.son__bag:focus-visible{border-bottom-color:var(--kagit-ac)}
/* E-postanin altindaki ikinci yol. Posta hala ana kanal, bunlar
   yanindaki secenekler; o yuzden cok daha kucukler. */
.son__yol{
  margin:clamp(2rem,5vw,3.2rem) 0 0;padding:0;list-style:none;
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:.7rem clamp(1rem,3vw,2.2rem);
}
.son__yolbag{
  display:inline-flex;align-items:baseline;gap:.6rem;
  color:var(--kagit-ac);text-decoration:none;
  border-bottom:2px solid rgba(250,240,220,.42);
  padding-bottom:.25rem;
}
.son__yolbag:hover{border-bottom-color:var(--kagit-ac)}
/* Kanalin adi kucuk etiket, numaranin kendisi okunacak boy. */
.son__yolad{
  font:700 var(--kunye)/1 var(--mono);letter-spacing:.18em;
  color:rgba(250,240,220,.72);
}
.son__yolno{font-size:clamp(1rem,1.6vw,1.18rem);font-weight:700;letter-spacing:-.01em}

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

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

@media (max-width:640px){
  .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}
}