/* ==========================================================
   YAZI TİPİ — Inter (SIL Open Font License). Tek dosyada 300..700
   arası bütün kalınlıklar var. İki parça: "latin" günlük harfler,
   "latin-ext" Türkçenin ğ ş İ gibi harfleri.

   unicode-range şart: aynı aileden iki dosya varsa ve aralık
   yazmazsan sonuncusu ötekini tamamen örter — o zaman latin-ext
   dosyası öne geçer, içinde a b c olmadığı için düz yazı fontsuz
   kalır. Aralık yazınca tarayıcı her harfi doğru dosyadan alır.

   Kart etiketleri HTML'de değil canvas'a çiziliyor; tarayıcı
   canvas'a bakıp "bu harf lazım" diyemez. O yüzden sahne.js açılışta
   iki parçayı da elle yüklüyor (fontlariYukle).
   ========================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: block;
  src: url("yazi/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: block;
  src: url("yazi/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================
   GÖRÜNÜM
   Renk ve font ayarları en üstte. Gerisine dokunma.
   3B alanın kendisi WebGL — onun ayarları motor/sahne.js içinde.
   ========================================================== */

:root {

  /* ---- KÖK BİRİM ----
     Referansın bütün ölçüleri bunun katı (CSS'te 1rem'i buna bağlıyor):
     geniş ekranda 100vw/150 ama 5px'ten küçülmez, dar ekranda 100vw/39.
     Kırılma noktası 650px. Ölçülerek doğrulandı — bkz. AÇILIŞ GÖSTERGESİ. */
  --br: max(calc(100vw / 150), 5px);

  /* ---- FONT ----
     Inter, motor/yazi/ içinde duruyor: internetsiz de, sunucusuz da
     aynı görünür. Değiştirmek istersen yeni .woff2 dosyasını oraya koy,
     aşağıdaki @font-face'in yolunu ve buradaki ilk ismi değiştir. */
  --yazi: "Inter", "Segoe UI", system-ui, sans-serif;

  /* ---- RENKLER ---- */
  --zemin-renk: #000000;
  --metin:      #ffffff;
  --soluk:      rgba(255,255,255,0.45);

  /* ---- ATMOSFER ----
     Sol üstte kızıl bir kor, sağ altta beyaza açılan mavi bir kaynak.
     Bunlar YAZI rengi değil, IŞIK: kartların ve yazının üstüne
     binmiyorlar, sahnenin arkasındaki boşluğu dolduruyorlar.

     Rengi değiştirmek istersen yalnız bu altı satır yeter. */
  --kor:         #c0451c;   /* sol üstteki korun göbeği */
  --kor-dis:     #4a1a09;   /* korun siyaha karıştığı yer */
  --kaynak-ic:   #f2f6f8;   /* sağ alttaki kaynağın beyaz çekirdeği */
  --kaynak-orta: #8dbdd2;   /* açık mavi halesi */
  --kaynak-dis:  #0a4763;   /* koyu mavi eteği */

  /* Işığın gücü. Arka katman boşlukta görünen, ön katman zemine ve
     şeride vuran. Kısmak istersen bu ikisini küçült. */
  --isik-arka: 1;
  /* ÖN IŞIK KAPALI (Arda istedi). Bu katman tuvalin ÜSTÜNDE duruyor ve
     "screen" karışımı kızıl koru kartların üstüne de bindiriyordu: iş
     videoları turuncuya çalıyordu.

     BUNUN BEDELİ ÖLÇÜLDÜ: zeminin ışığı da onunla gidiyor. Sol üst köşe
     0.40'ta rgb(48,23,14), kapalıyken rgb(9,9,9); sağ alt (27,34,38) →
     (3,3,3). Yani ekran artık düz siyah. Sebep: aşağıdaki .arka katmanı
     tuvalin altında ama sahne o bölgeyi zaten donuk çiziyor, oradan
     görünmüyor — atmosferi gerçekte hep bu ön katman veriyordu.

     Ortası lazımsa: 0.15 dolayları hem zemine bir tını bırakıyor hem de
     kartlardaki turunculuğu üçte birine indiriyor. Eskisi 0.40'tı.

     DİKKAT: burayı değiştirmek TEK BAŞINA yetmez. İki atmosfer katmanı
     performans için index.html'de "hidden" ile tamamen kapatıldı (sebebi
     orada yazıyor); önce onları aç. */
  --isik-on:   0;

  /* Mavi kaynağın kendi ayarları — kızıl kordan bağımsız. */
  --mavi-guc:   0.58;  /* mavinin gücü. 1 = kısılmamış hâli */
  --mavi-dip:   0.74;  /* nefes alırken en aza indiği yer (gücün oranı) */
  --mavi-nefes: 9s;    /* bir nefesin süresi. Uzatırsan daha ağır olur */
}

* { margin:0; padding:0; box-sizing:border-box; }

html, body {
  height:100%;
  overflow:hidden;                /* sayfa kaymaz, kamera hareket eder */
  background: var(--zemin-renk);
  color: var(--metin);
  font-family: var(--yazi);
  -webkit-font-smoothing: antialiased;
  /* DOKUNMA VURGUSU KAPALI (2026-09-27). Arda: "kartların üstünde
     beyazlı bir efekt var, kaydırırken daha da belli oluyor". Sahnede
     kartın üstüne açık renk basan bir şey yok (fon düz siyah, kart
     gölgelendiricisinde beyazlatma yok); en güçlü aday Android Chrome'un
     dokunma vurgusu: dokunulan öğenin üstüne yarı saydam açık bir kutu
     basıyor ve tuval sayfayı kaydırmadığı (touch-action: none) için
     parmak ekrandayken kalkmıyor. Telefonda görülmeden DOĞRULANMADI. */
  -webkit-tap-highlight-color: transparent;
}

body { cursor: grab; }
body.elle        { cursor: pointer; }
/* Sürüklerken yazı seçilmesin. Mercek açıkken de sürüklenebiliyor;
   olmasa fare merceğin içindeki yazının üstünden geçerken onu maviye
   boyardı. */
body.suruklerken { cursor: grabbing; user-select: none; -webkit-user-select: none; }


/* ---------- 3B ALAN ---------- */

#tuval {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;             /* telefonda sayfa kaymasın, kamera ilerlesin */
  z-index: 1;                     /* atmosferin arka katmanının üstünde */
}


/* ---------- ATMOSFER ----------
   Aynı iki ışık iki kere çiziliyor:

     .arka  → tuvalin ALTINDA. Üstteki boş siyahı kızıl kor dolduruyor;
              mavi kaynak da zeminin altından sızıyor (zemin %90 opak
              olduğu için orada zaten sadece bir tını olarak görünür).

     .on    → tuvalin ÜSTÜNDE ama bütün arayüzün altında (z-index 2;
              iş sayfası 45, mercek 40, çubuklar 42 — hiçbirine değmez).
              "screen" karışımı yalnız ışık EKLER, hiçbir yeri
              karartmaz; zemin ızgarası ve şeridin kenarları böylece
              o ışığı yakalar. Kartların ortası zaten ışıkların
              arasındaki siyah bantta kaldığı için görseller solmaz.

   Kızıl neredeyse tamamen çerçevenin dışında (y = -4%): görselde de
   kaynağın kendisi görünmüyor, yalnız aşağı vuran yansıması var. */

.atmosfer {
  position: fixed; inset: 0;
  pointer-events: none;
  /* Burada yalnız kızıl kor var — o sabit duruyor. Mavi aşağıda,
     kendi katmanında: kendi gücü ve kendi nefesi olsun diye ayrıldı. */
  background:
    radial-gradient(46% 30% at 17% 0%,
        var(--kor)     0%,
        var(--kor-dis) 46%,
        transparent    76%);
}

/* ---- MAVİ KAYNAK ----
   Yavaşça nefes alıyor: sönüp yanmıyor, sadece hafifçe güçlenip
   zayıflıyor. Fark edilmesi değil, sezilmesi için — bakarken
   "kımıldıyor" demeyeceksin ama ekran ölü de durmayacak. */
.atmosfer::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 40% at 74% 97%,
        var(--kaynak-ic)   0%,
        var(--kaynak-orta) 24%,
        var(--kaynak-dis)  50%,
        transparent        78%);
  opacity: var(--mavi-guc);
  animation: nefes var(--mavi-nefes) ease-in-out infinite;
}

@keyframes nefes {
  0%, 100% { opacity: calc(var(--mavi-guc) * var(--mavi-dip)); }
  50%      { opacity: var(--mavi-guc); }
}

/* Hareketi azaltılmış sistemlerde nefes durur, ışık sabit kalır. */
@media (prefers-reduced-motion: reduce) {
  .atmosfer::before { animation: none; }
}

.atmosfer.arka { z-index: 0; opacity: var(--isik-arka); }
.atmosfer.on   { z-index: 2; opacity: var(--isik-on); mix-blend-mode: screen; }

/* Geniş ve yumuşak geçişler koyu zeminde şeritlenir (banding). Çok ince
   bir tanecik onu kırıyor — görselin kendisinde de bu tanecik var. */
.atmosfer.arka::after {
  content: '';
  position: absolute; inset: 0;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter>\
<rect width='140' height='140' filter='url(%23g)'/></svg>");
}


/* ---------- YANLIŞ AÇILIŞ UYARISI (file://) ---------- */

#yanlisAcilis {
  position: fixed; inset: 0; z-index: 100;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  padding: 34px;
}
#yanlisAcilis[hidden] { display: none; }
#yanlisAcilis > div { max-width: 560px; }
#yanlisAcilis .ya-baslik { font-size: 30px; font-weight: 400; letter-spacing: -.02em; margin-bottom: 22px; }
#yanlisAcilis b  { font-weight: 600; }
#yanlisAcilis p  { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.7); margin-bottom: 14px; }


/* ---------- AÇILIŞ GÖSTERGESİ ----------
   Referansın (dennissnellenberg.com) giriş ekranı birebir söküldü.
   Ortada tek bir selam duruyor, önünde küçük bir nokta; selamlar
   0.15 saniyede bir el değiştiriyor ve sonuncusunda duruyor.

   Takvim referansın kendi GSAP zaman çizelgesinden (saniye):
     0.50  selam yığını görünmeye başlar (0.8 sn, Power4.out)
     0.90  selamlar sırayla yanar, her biri 0.15 sn durur
     +     son selam yerine oturur ve KALIR
     +0.21 sayfa onun üstünden açılır, yazı 0.3 sn'de siliniyor
   Gecikmeleri baslat.js her kelimeye --gec olarak yazıyor; süreler
   liste kaç kelime olursa olsun aynı ritmi tutuyor.

   Ölçüler referansın kendi kuralları:
     punto  calc(0.75 * clamp(3.25em, 5vw, 4.5em))  → 39…54px
     dolgu  0 .4em 0 .6em   (soldaki pay noktanın yeri)
     nokta  calc(0.606061 * clamp(16px, 1.2vw, 19px)), üstten %47 */

#yukleniyor {
  position: fixed; inset: 0;
  z-index: 30;
  pointer-events: none;
  transition: opacity .22s linear;   /* açılış kısaltması 2026-09-11 */
}
#yukleniyor.gizle { opacity: 0; }

/* Selamlar üst üste duruyor: tek gözlü ızgara, hepsi aynı hücrede.
   Kutu böylece en uzun selam kadar oluyor ve ekranın tam ortasında
   kalıyor — mutlak konumla yapılsaydı yüksekliği sıfır olurdu. */
#selamlar {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  opacity: 0;
}
#yukleniyor.calis #selamlar {
  /* .8s/.5s idi: yığın daha ekrana yerleşmeden ilk selamlar geçiyordu
     ve perde en geç biteni bekliyordu. Şimdi ilk selamın kapandığı
     an (300+80 = 380 ms) ile birlikte bitiyor. */
  animation: selamGir .30s cubic-bezier(.19,1,.22,1) .10s forwards;
}

#selamlar h2 {
  grid-area: 1 / 1; justify-self: center;
  position: relative;
  margin: 0; padding: 0 .4em 0 .6em;
  white-space: nowrap;
  font-family: var(--yazi);
  font-weight: 450;
  font-size: calc(0.75 * clamp(52px, 5vw, 72px));
  line-height: 1.065;
  color: var(--metin);
  opacity: 0;
}
/* Her selam kendi penceresinde doğar ve söner. Dolgu YOK (fill-mode
   none): penceresinin dışında kendi 0 saydamlığına dönüyor.
   Pencere, adımdan SELAM_BINDIR kadar uzun; böylece komşular çakışıp
   ÇAPRAZ GEÇİYOR — biri sönerken öteki doğuyor, arada boş kare yok.
   Hareket yalnız opacity + translateY: ikisi de bileşik katmanda
   çalışır, telefonda düzen/boyama tetiklemez.
   İlki istisna: en baştan yanık duruyor ve yığınla birlikte içeri
   süzülüyor, sırası gelince sönüyor (süreyi baslat.js veriyor). */
#yukleniyor.calis #selamlar h2 {
  animation: selamYanip var(--sur, .33s) cubic-bezier(.33,0,.2,1) var(--gec);
  will-change: opacity, transform;
}
/* İlki baştan yanık: doğmuyor, yalnız sırası gelince sönüyor. */
#yukleniyor.calis #selamlar h2.ilk {
  animation: selamIlk var(--sur, .5s) cubic-bezier(.33,0,.2,1) var(--gec);
}
/* Sonuncusu istisna: yanıp sönmüyor, açılıyor ve KALIYOR. */
#yukleniyor.calis #selamlar h2.son {
  animation: selamKal .34s cubic-bezier(.19,1,.22,1) var(--gec) forwards;
}

#selamlar i {
  position: absolute; left: 0; top: 47%;
  width:  calc(0.606061 * clamp(16px, 1.2vw, 19px));
  height: calc(0.606061 * clamp(16px, 1.2vw, 19px));
  border-radius: 50%;
  background: var(--metin);
}

@keyframes selamGir { to { opacity: 1; } }

/* Doğ - dur - sön. Yüzdeler SELAM_BINDIR ile uyumlu: ilk ve son
   dilim çakışma payına denk gelir, ortası tam görünür kalır. */
@keyframes selamYanip {
  0%   { opacity: 0; transform: translateY(5px);  }
  26%  { opacity: 1; transform: translateY(0);    }
  74%  { opacity: 1; transform: translateY(0);    }
  100% { opacity: 0; transform: translateY(-5px); }
}
/* İlki: baştan yanık, sonunda söner. */
@keyframes selamIlk {
  0%   { opacity: 1; transform: translateY(0);    }
  72%  { opacity: 1; transform: translateY(0);    }
  100% { opacity: 0; transform: translateY(-5px); }
}
/* Sonuncusu: doğar ve KALIR. */
@keyframes selamKal {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ---------- ÖLÇÜ ÇUBUKLARI ----------
   Görünmezler. Tek işleri açılışta kartların çıkış kutusunu vermek:
   sahne.js bunların ekrandaki yerini ölçüp kartları oradan doğuruyor.
   Ölçüler referansın eski yükleme çubuklarından kalma — 5br × 0.5br,
   ara 0.8br, köşe 2br — yani açılış koreografisi hiç değişmedi. */
#cubuklar {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: calc(var(--br) * 0.8);
  opacity: 0;
}
#cubuklar span {
  width:  calc(var(--br) * 5);
  height: calc(var(--br) * 0.5);
  border-radius: calc(var(--br) * 2);
  background: var(--metin);
}

@media (max-width: 649px) {
  :root { --br: calc(100vw / 39); }
}


/* ---------- ÜST / ALT ÇUBUKLAR ---------- */

.bar {
  position: fixed; left: 0; right: 0;
  /* dizinin (z-index 40) USTUNDE: referansta dizin acikken de ad, PROFIL
     ve SECILMIS/TUMU etiketleri duruyor. Is sayfasi (45) yine ortuyor. */
  z-index: 42;
  display: flex; align-items: center; justify-content: space-between;
  /* Referansın kendi kutusundan okundu: etiketleri tutan kat
     "px-80 py-40" (dar ekranda px-40 py-25) taşıyor. Onların ölçeğinde
     10 birim = 1 kök birim, yani 8br yan / 4br dikey. 1280'de 68.27 ve
     34.13 px çıkıyor — ölçtük, birebir tutuyor. Eskiden 34/26 sabit
     px'ti, etiketler köşelere referanstakinden çok daha yapışıktı. */
  padding: calc(var(--br) * 4) calc(var(--br) * 8);
  pointer-events: none;
}
.bar.ust { top: 0; }
.bar.alt { bottom: 0; }
.bar > * { pointer-events: auto; }

.etiket {
  font-family: var(--yazi);
  font-size: 11px;
  /* 600 — eskiden 500'dü, Arda "bir tık kalın olsun" dedi. Inter'in tek
     dosyasında 300..700 arası bütün kalınlıklar var, yani bu ağırlık
     fontun kendi çizimi; tarayıcı yapay kalınlaştırma yapmıyor. */
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* Etiketler HER ZAMAN TAM BEYAZ: ne üstüne gelince sönüyor, ne
     parlıyor, ne de pasifken soluyor. Renk hiçbir durumda değişmiyor —
     o yüzden aşağıda :hover / .aktif için ayrı renk kuralı da yok. */
  color: var(--metin);
  background: none; border: 0; padding: 0;
  text-decoration: none;
  cursor: pointer;
}
/* SOL ÜST — işaret + ad.
   İşaretin yüksekliği etiketin puntosuna bağlı (em), yani punto değişirse
   logo da onunla büyür. Rengi currentColor: etiket beyazsa logo da beyaz.
   Aradaki boşluk etiketin kendi harf aralığından biraz geniş — bitişik
   durunca ad logonun devamı gibi okunuyordu. */
#siteAdi { display: inline-flex; align-items: center; gap: .85em; }
#siteAdi .logo-isaret {
  display: block; flex: none;
  height: 1.35em; width: auto;
  fill: currentColor;
}

/* SEÇİLMİŞ / TÜMÜ: yazı beyaz kaldığı için hangisinde olduğunu renk
   söyleyemiyor — altına ince bir çizgi çekiliyor. Çizgi ::after olduğu
   için yazıyı yerinden oynatmıyor; soldan sağa açılıyor, eğrisi
   etiketlerin açılış eğrisiyle aynı.

   SAĞDAKİ PAY: harf aralığı (.14em) SON harften sonra da uygulanıyor,
   yani kutunun sağında yazıya ait olmayan bir boşluk kalıyor. Çizgi
   kutu eni kadar olsaydı kelimenin bittiği yerden bir tırnak taşardı;
   sağdan .14em kısaltılınca tam mürekkebin altında bitiyor. */
.gorunum .etiket { position: relative; }
.gorunum .etiket::after {
  content: ''; position: absolute;
  left: 0; right: .14em; bottom: -5px; height: 1px;
  background: var(--metin);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.gorunum .etiket.aktif::after { transform: scaleX(1); }

/* ---------- TELEFONDA ETİKETLER (2026-09-12) ----------
   Arda: "mobilden bakanlar için de güzel bir şekilde boyutlarını ayarla."

   ÖLÇÜLDÜ (375x812): etiketler 11px, dokunma hedefleri 14-15px yüksek.
   Parmak ucu ~44px; 15px'lik bir şeride basmak kumar. Yazı da telefonda
   büyük harf + .14em harf aralığıyla iyice küçük duruyordu.

   PC'YE DOKUNULMUYOR: kurallar yalnız 649px altında geçerli, yani
   masaüstündeki referans ölçüleri (11px / br tabanlı çubuk dolgusu)
   olduğu gibi duruyor.

   Harf aralığı .14em -> .10em: 375px'te "KARDEŞLER KAFE — OTOMASYON"
   gibi uzun etiketler 13px'e çıkınca taşıyordu; aralık kısılınca
   sığıyor (yatay taşma ölçümü: 375/375, taşma yok). */
/* 2026-09-26 — Arda: telefonda "ARDA CAN GÜLERYÜZ", "HAKKINDA",
   "DİĞER ÖRNEKLER", "FİYAT AL" büyük duruyor. Yazı 13 -> 11px (masaüstüyle
   aynı), harf aralığı .12em (uzun etiketler yine sığıyor). Dokunma hedefi
   küçülmesin diye dolgu 13 -> 16px: yükseklik ~45px (ölçüldü, 44 altı 0).
   Kutu 3px büyüdüğü için -3px dış boşluk: çubuk yüksekliği ve yazının
   ekrandaki yeri önceki haliyle aynı kalıyor. */
@media (max-width: 649px) {
  .etiket {
    font-size: 11px;
    letter-spacing: .12em;
    /* Dikey dolgu dokunma hedefini büyütür ama YAZI yerini değiştirmez:
       çubuk flex ve ortalı, dolgu iki yana eşit dağılıyor. */
    padding: 16px 0;
    margin-block: -3px;
  }
  /* Alt çizgi dolguyla birlikte aşağı kaymasın — etiketin YAZISININ
     hemen altında kalsın diye dolgu kadar yukarı çekiliyor (16 - 5). */
  .gorunum .etiket::after { bottom: 11px; }
  /* Çubuk dolgusu: etiketlerin kendi dikey dolgusu geldiği için
     çubuğunki kısılıyor, yoksa üst/alt şerit gereksiz kalınlaşıyor. */
  .bar { padding: calc(var(--br) * 1.5) calc(var(--br) * 5); }
}

/* ---------- DÖNEN ETİKET (alt sağ) ----------
   Etiket iki yazı arasında gidip geliyor: BİZE ULAŞIN ve FİYAT AL.
   Üçü de — açıkken çıkan KAPAT dahil — TEK grid gözünde üst üste
   duruyor, o yüzden düğmenin eni EN UZUN yazı kadar sabit kalıyor:
   yazı değişirken köşe oynamıyor.

   KESKİNLİK — iki kural, ikisi de ölçülerek konuldu:
   1) Kutular hücreyi TAMAMEN dolduruyor (stretch), yazı text-align ile
      sağa çekiliyor. Önce justify-self:end vardı: kısa yazıyı KESİRLİ
      piksele oturtuyordu (FİYAT AL düğmenin solundan 24.734px içeride
      başlıyordu) ve yazı hareket ederken ayrı bir katmanda olduğu için
      o kesir yeniden örnekleniyor, harfler bulanıklaşıyordu. Kutu
      sıfırdan başlayınca kaydırma yok; harfleri yazı motoru yerleştiriyor.
   2) DURAN yazının hiç dönüşümü yok (transform: none) ve saydamlığı tam
      1 — yani tarayıcının onu ayrı katmanda tutması için sebep kalmıyor,
      katman geçiş biter bitmez bırakılıyor. Sonsuz bir CSS animasyonu
      kullanılsaydı yazı DURDUĞU ANDA BİLE katmanda kalır, öteki
      etiketlerden daha soluk/bulanık görünürdü. Sırayı sahne.js çeviriyor. */
.etiket-donen, .ed-tur { display: grid; }
.etiket-donen > *, .ed-tur > * {
  grid-area: 1 / 1;
  justify-self: stretch;
  text-align: right;
}

/* Yazılar YUKARI doğru el değiştiriyor: giden yukarı süzülüp çıkıyor,
   gelen alttan giriyor — gönder düğmesindeki ok değişiminin aynısı.
   Kayma TAM SAYI piksel: yüzde verilseydi satır kutusunun %70'i 10.5px
   ederdi, yine kesir çıkardı. */
.ed-yazi {
  opacity: 0;
  transform: translateY(11px);
  transition: opacity .55s cubic-bezier(.16,1,.3,1),
              transform .55s cubic-bezier(.16,1,.3,1);
}
.ed-yazi.ed-gorunur { opacity: 1; transform: none; }
.ed-yazi.ed-cikiyor { opacity: 0; transform: translateY(-11px); }
/* Çıkan yazı yukarıda kalıyor; sırası gelince ALTTAN girsin diye
   sahne.js geçiş bitince onu sessizce (animasyonsuz) aşağı indiriyor. */
.ed-yazi.ed-sessiz { transition: none; }

/* Mercek açılınca dönen yazılar sönüp yerini KAPAT'a bırakıyor. */
.ed-tur, .ed-kapat { transition: opacity .3s ease; }
.ed-kapat { opacity: 0; }
.etiket-donen.aktif .ed-tur   { opacity: 0; }
.etiket-donen.aktif .ed-kapat { opacity: 1; }

/* Hareketi azaltılmış sistemlerde sıra hiç dönmez (sahne.js sayacı
   kurmuyor); duran yazı da kaymadan yerine otursun. */
@media (prefers-reduced-motion: reduce) {
  .ed-yazi { transition: none; }
}

.ayrac { color: var(--metin); margin: 0 10px; font-size: 11px; }

/* Açılış: çubuklar sahneyle birlikte geliyor. Üsttekiler yukarıdan,
   alttakiler aşağıdan süzülüyor; sırayla, hepsi birden değil. Sınıfı
   sahne.js yükleme bitince body'ye takıyor — yani şerit süzülmeye
   başladığı anda, ondan önce değil. */
.bar .etiket, .bar .ayrac {
  opacity: 0;
  /* Referansın etiket eğrisi GSAP "expo.out", süresi .75sn.
     cubic-bezier(.16,1,.3,1) o eğrinin CSS karşılığı. */
  transition: opacity .75s cubic-bezier(.16,1,.3,1),
              transform .75s cubic-bezier(.16,1,.3,1);
}
.bar.ust .etiket { transform: translateY(-11px); }
.bar.alt .etiket, .bar.alt .ayrac { transform: translateY(11px); }

body.acildi .bar .etiket,
body.acildi .bar .ayrac { opacity: 1; transform: none; }

/* Referansın çizelgesi: etiketler açılıştan .75sn SONRA başlıyor
   (kartlar uçarken ekran boş kalmasın diye değil — kartlar yerine
   otururken giriyorlar) ve aralarında .06sn var. (P0.intro) */
body.acildi #siteAdi     { transition-delay: .75s; }
body.acildi #btnProfil   { transition-delay: .81s; }
body.acildi .bar.alt .etiket,
body.acildi .bar.alt .ayrac { transition-delay: .87s; }
body.acildi #btnIletisim { transition-delay: .93s; }


/* ---------- İPUCU ---------- */

#ipucu {
  position: fixed; left: 50%; bottom: 72px;
  /* Font/punto/aralık .etiket sınıfından geliyor; burada tekrarına
     gerek yok. Ama bu bir köşe etiketi DEĞİL: köşe etiketleri 600'e
     çıkarken bu ortadaki yardım satırı ince kalsın — sahnenin önünde
     duruyor, kalın olursa öne çıkıp dikkat çeker. */
  font-weight: 500;
  /* translateX(-50%) ortalamayı yapıyor; açılışta buna aşağıdan bir
     kayma ekleniyor, o yüzden iki eksen tek transform'da. */
  transform: translate(-50%, 12px);
  z-index: 20;
  color: rgba(255,255,255,.3);
  opacity: 0;
  transition: opacity .75s cubic-bezier(.16,1,.3,1) .99s,
              transform .75s cubic-bezier(.16,1,.3,1) .99s;
  pointer-events: none;
}
/* :not(.gizle) şart — onsuz bu kural aşağıdaki gizleme kuralından daha
   ağır basıyor ve ipucu ilk dokunuşta bir daha kaybolmuyor. */
body.acildi #ipucu:not(.gizle) { opacity: 1; transform: translate(-50%, 0); }
#ipucu.gizle { opacity: 0; transition: opacity .6s ease; }
/* TELEFONDA YATAY ŞERİT (2026-09-27): ipucu alt çubuğun dibinde değil,
   şeridin hemen altında. Kart yüksekliği ekran eninin %46'sı (sahne.js
   AYAR.isEnTel — değişirse burası da) ve şerit ortanın %4 altında
   (AYAR.inisTel), yani kartın alt kenarı 54% + 23vw; yazı onun ~50px
   altında. */
body.dar-yatay #ipucu { bottom: auto; top: calc(54% + 23vw + 36px); }


/* ---------- İŞ SAYFASI ----------
   Referanstaki gibi: kenarlardan içeri kaçmış, yuvarlak köşeli beyaz bir
   yaprak. Solda yazı, sağda kapak görseli. */

#sayfa {
  /* TEMA DEĞİŞKENLERİ — varsayılan, yani hiç tema verilmemiş iş:
     eski beyaz yaprak. Her iş kendi renklerini icerik/isler.js
     içindeki "tema" ile veriyor; karta basınca sahne.js bu
     değişkenleri sayfanın üstüne yazıyor, kapanınca siliyor.
     Renkler uydurma değil: her biri o projenin KENDİ CSS'inden
     alındı (ör. ARDARİUM --colZemin/--colVurgu, FarLab --mavi/--krem). */
  --s-zemin:    #fff;
  --s-murekkep: #0a0a0a;
  --s-sonuk:    rgba(0,0,0,.62);
  --s-cizgi:    rgba(0,0,0,.14);
  --s-rozet:    rgba(0,0,0,.6);
  --s-hap:      #0a0a0a;
  --s-hap-yazi: #fff;
  /* Açılışta sayfaya düşen ışık ve zeminin ikinci rengi. Varsayılanı
     nötr: tema vermeyen iş eski düz beyaz yaprağı görür. */
  --s-parlama:  transparent;
  --s-zemin2:   var(--s-zemin);

  position: fixed; inset: 14px; z-index: 45;
  color: var(--s-murekkep);
  /* Düz dolgu değil: sağ üstten inen bir ışık huzmesi + zeminin kendi
     içinde hafif geçişi. Işığın rengi işin kendi vurgusu, o yüzden her
     iş açıldığında başka bir hava veriyor. İkisi de STATİK — telefonda
     bedeli yok, kare hızına dokunmuyor. */
  background-color: var(--s-zemin);
  background-image:
    radial-gradient(88% 62% at 86% -6%, var(--s-parlama), transparent 62%),
    linear-gradient(158deg, var(--s-zemin) 0%, var(--s-zemin2) 100%);
  border-radius: 20px;
  overflow: hidden;
  /* saç teli kenar — yaprağa kart hissi veriyor */
  box-shadow: inset 0 0 0 1px var(--s-cizgi);
  opacity: 1;
  /* YALNIZ opacity geçişli. Zemin ve yazı rengi geçişli OLMAYACAK:
     geçiş koyunca sayfa beyazdan başlayıp temaya kayıyordu, yani
     açılışta yarım saniye beyaz ekran görünüyordu — düzeltmeye
     çalıştığımız şeyin ta kendisi. Renk ilk boyanan karede doğru. */
  transition: opacity .35s ease;
}
#sayfa.gizli { opacity: 0; pointer-events: none; }
/* Yukleme ekraninda bir kez: ilk yerlesim + ilk cizim tiklamadan once
   olsun (sahne.js sayfayiIsit). %0.2 gozle gorunmez; 0 olsa tarayici
   hic cizmez, isinma bos gecer. */
#sayfa.isinma { opacity: .002 !important; transition: none !important; pointer-events: none !important; }

/* TANECİK — düz dijital yüzeyi kırıyor, baskı hissi veriyor. SVG
   gürültüsü tek seferlik, animasyon yok. Çok hafif (%4) çünkü amaç
   görünmek değil, zemini "düz plastik" olmaktan çıkarmak. */
#sayfa::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: .04; border-radius: inherit;
  /* HAZIR RESİM (2026-09-27). Eskiden burada SVG gürültü filtresi
     (feTurbulence) vardı ve sayfanın TAMAMI kadar, aygıt pikseliyle
     hesaplanıyordu. Ölçüldü (392x782, dpr 2.75, iş sayfası açılışı):
     en uzun çizim 174 ms, taneciksiz 69 ms — bilgisayarın ekran kartında
     bile; Arda'nın telefonunda sayfa açılınca 0.5-0.7 sn donma. SVG'yi
     140 px'lik döşemeye çevirmek YETMEDİ (185-211 ms: Chrome filtreyi
     her döşemede yeniden hesaplıyor). tanecik.png aynı filtrenin
     (baseFrequency .85, 3 oktav, stitchTiles) bir kez çekilmiş hali;
     dikişsiz döşeniyor, filtre hiç çalışmıyor. */
  background-image: url("tanecik.png");
  background-size: 140px 140px;
}
/* İçerik ve kapatma düğmesi taneciğin ÜSTÜNDE kalsın */
#sayfaIc { position: relative; z-index: 1; }

#sayfaIc {
  height: 100%;
  display: grid;
  /* fr + minmax(0,…): yüzde verilince boşluk payı üstüne binip yatay taşma
     yapıyordu */
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: 34px;
  padding: 46px;
  overflow-y: auto; overflow-x: hidden;
}

.s-sol { padding-top: 4px; }
/* Başlık büyüdü ve sıkıldı — uçan ad puntoyu CANLI okuduğu için
   (getComputedStyle) uçuş kendiliğinden buna uyuyor, elle ayar yok. */
.s-baslik {
  font-size: clamp(30px, 3.4vw, 46px); font-weight: 400;
  letter-spacing: -.035em; line-height: 1.03; margin-bottom: 20px;
  text-wrap: balance;
}
.s-metin  { font-size: 15px; line-height: 1.72; color: var(--s-sonuk); max-width: 36ch; }
.s-satir  { margin-top: 28px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* SIRAYLA GELİŞ — açıklama ve rozetler başlıktan sonra süzülüyor.
   BAŞLIK BİLEREK DIŞARIDA: uçan ad tam onun yerine iniyor, kaydırsam
   uçuşun hedefi şaşardı (hedef kutu uçuş BAŞLARKEN okunuyor). */
.s-metin, .s-satir {
  opacity: 0; transform: translateY(12px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}
#sayfa:not(.gizli) .s-metin { opacity: 1; transform: none; transition-delay: .34s; }
#sayfa:not(.gizli) .s-satir { opacity: 1; transform: none; transition-delay: .44s; }

/* yıl / durum rozetleri */
.s-rozet {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--s-cizgi); color: var(--s-rozet);
}

/* yönlendir düğmesi — sayfanın kendi diliyle: siyah hap */
.s-git {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 18px; border-radius: 999px;
  background: var(--s-hap); color: var(--s-hap-yazi); text-decoration: none;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  transition: transform .25s ease;
}
.s-git i {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--s-hap-yazi); color: var(--s-hap);
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 12px; line-height: 1;
}
.s-git:hover { transform: translateY(-2px); }

/* Kapak yuvası: uçuş sırasında SAYDAM kalır ki altındaki 3B kart görünsün. */
.s-yuva { position: relative; width: 100%; border-radius: 14px; overflow: hidden; }
.s-gorsel {
  width: 100%; display: block; border-radius: 14px;
  opacity: 0; transition: opacity .3s ease;
}
.s-gorsel.geldi { opacity: 1; }

/* Kapak videosu görselin TAM üstüne oturuyor: ölçüyü görsel veriyor
   (o yüzden görsel akışta kalıyor), video ise mutlak konumlu. Uçuş
   sırasında ikisi de saydam; kart yuvaya oturunca birlikte beliriyor. */
.s-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block; border-radius: 14px;
  opacity: 0; transition: opacity .3s ease;
}
.s-video.geldi { opacity: 1; }

/* EK MEDYA — turun kalan bölümleri. Referanstaki gibi alt alta akıyor;
   sağ sütun zaten #sayfaIc içinde kaydırılabilir. */
.s-ekmedya { display: grid; gap: 14px; margin-top: 14px; }
/* Telefonda ek klipler <img> olarak geliyor (bkz. sahne.js "TELEFONDA
   TEK VIDEO, OTEKILER FOTOGRAF"); ikisi de ayni gorunsun. */
.s-ekmedya video,
.s-ekmedya img {
  width: 100%; display: block; border-radius: 14px;
  background: rgba(0,0,0,.12);
}

/* X DÜĞMESİ — referanstan ÖLÇÜLEREK alındı.
   jesperlandberg.com'da bir karta basıp tuvalin sağ üst köşesini kare
   kare okudum (96x96 kutu, koyu piksel oranı). Çıkan zaman çizelgesi:
     0-180ms   köşede bir şey yok (kart uçuyor)
     180-440ms köşe tamamen siyaha gidiyor (perde)
     450-640ms açık yaprak geliyor
     640ms     X BÜYÜMEYE BAŞLIYOR
     ~1250ms   oturuyor
   Koyu piksel oranı 0'dan 0.258'e KADEMELİ çıkıyor; sönümlemeyle
   gelseydi koyu pikseller sonda birden belirirdi. Yani hareket
   ÖLÇEK (scale 0 -> 1), opaklık değil.
   Eğri expo.out'a oturuyor: yarı yol 85ms (kuram 85), %75 175ms
   (kuram 170), %90 270ms (kuram 282) -> süre ~0.85sn.
   cubic-bezier(.16,1,.3,1) expo.out'un standart karşılığı; ama erken
   bölümde expo.out'tan bir tık yavaş, o yüzden süre 0.85 değil 0.78
   verildi. Kendi sitemizde ölçülen sonuç: yarı yol 95ms, %75 173ms,
   %90 274ms (referans: 85 / 175 / 270).
   Gecikme: sayfa oturduktan ~0.2sn sonra başlıyor. */
/* Delik yarıçapı: özel değişkenler ancak KAYITLIYSA geçiş yapabiliyor,
   yoksa 0%'dan 100%'e sıçrar. Bunun için @property şart. */
@property --kapat-delik {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

#sayfaKapat {
  position: absolute; top: 26px; right: 26px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--s-hap-yazi); border: 0; cursor: pointer;
  font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;

  /* Dolgu düz renk DEĞİL, radyal degrade: ortasında yarıçapı
     --kapat-delik olan saydam bir delik var. Delik 0 iken düğme dolu
     görünür, %100 iken yalnız çember kalır. closest-side veriliyor ki
     %100 tam olarak düğmenin yarıçapına denk gelsin. */
  --kapat-delik: 0%;
  background-color: transparent;
  background-image: radial-gradient(circle closest-side at 50% 50%,
                    transparent 0 var(--kapat-delik),
                    var(--s-hap) var(--kapat-delik) 100%);
  box-shadow: inset 0 0 0 1.5px transparent;

  transform: scale(0);
  transform-origin: 50% 50%;
  /* BURADAKİ süre AYRILMA süresidir (imleç çekilince). Ölçüldü: 0.32sn. */
  transition: transform .3s ease,
              --kapat-delik .32s cubic-bezier(.16, 1, .3, 1),
              color .32s ease,
              box-shadow .32s ease;
}
/* Sayfa görünür olunca büyüyerek gelir. Gecikme ve eğri yukarıda. */
#sayfa:not(.gizli) #sayfaKapat {
  transform: scale(1);
  transition: transform .78s cubic-bezier(.16, 1, .3, 1) .2s,
              --kapat-delik .32s cubic-bezier(.16, 1, .3, 1),
              color .32s ease,
              box-shadow .32s ease;
}

/* ÜSTÜNE GELİNCE — MEKANİZMA ÖLÇÜLDÜ, tahmin değil.
   jesperlandberg.com'un kapatma düğmesi, gerçek Chrome, 955 kare
   boyunca tuvalin pikselleri okundu. Koyu pikseller yarıçap
   kuşaklarına ayrıldı ve şu sırayla boşaldılar:
     iç kuşak (9-18px)   756 -> 8    (~100 ms)
     orta   (18-27px)   1280 -> 19   (~310 ms)
     dış    (>27px)      235 -> 171  (kalıyor = ÇEMBER)
   İç kuşakların ÖNCE boşalması şunu söylüyor: dolgu sönmüyor,
   ortadan dışa doğru büyüyen dairesel bir DELİK onu yiyor. Dolgu
   sönseydi bütün kuşaklar aynı anda azalırdı; daire küçülseydi
   dıştan içe boşalırdı. İkisi de olmadı.
   Ayrılınca aynı delik dıştan içe kapanıyor, daha hızlı.
   Süreler (yarıçap cinsinden, expo.out'a oturuyor):
     geliş  ~0.46 sn     ayrılma ~0.32 sn
   İmleç 45 px yanındayken düğme hiç kımıldamıyor: yer değiştirme YOK. */
/* Seçici BİLEREK uzun: bir üstteki '#sayfa:not(.gizli) #sayfaKapat' kuralı
   iki kimlik + bir sınıf taşıyor ve kısa yazılan '#sayfaKapat:hover'ı
   eziyordu — geliş de ayrılma süresine düşüyordu (ölçüldü: ikisi de
   33/66/105 ms çıkıyordu). Bu seçici ondan güçlü. */
#sayfa:not(.gizli) #sayfaKapat:hover,
#sayfa:not(.gizli) #sayfaKapat:focus-visible {
  --kapat-delik: 100%;
  color: var(--s-murekkep);
  /* ÇEMBER KALINLIĞI/KOYULUĞU ÖLÇÜLDÜ. Referansın son karesinde çember
     hücrelerinin ortalama parlaklığı ~120 (zemin 255). Bundan geri
     hesap: çizgi ~2px ve neredeyse tam koyu. Önceki hâli 1.5px +
     --s-cizgi (%24 saydam) idi; krem zeminde efektif parlaklığı ~234
     çıkıyordu, yani çember görünmüyordu — "aynı değil" denen şey buydu.
     2px + tam mürekkep ile hesaplanan ortalama ~140, referansla aynı bant. */
  box-shadow: inset 0 0 0 2px var(--s-murekkep);
  /* BURADAKİ süre GELİŞ süresidir. Ölçüldü: 0.46sn. */
  transition: --kapat-delik .46s cubic-bezier(.16, 1, .3, 1),
              color .30s ease,
              box-shadow .30s ease;
}

@media (max-width: 860px) {
  #sayfaIc { grid-template-columns: 1fr; padding: 26px; gap: 22px; }
  /* Kapatma düğmesi tek sütunda başlığın üstüne biniyordu: başlığın sağına
     düğme kadar pay bırak (40 düğme + boşluk, sayfa dolgusu düşülmüş). */
  .s-baslik { font-size: 26px; padding-right: 40px; }
  #sayfaKapat { top: 16px; right: 16px; }
}


/* ---------- UÇAN AD ----------
   Kart sayfaya uçarken adı da onunla gidiyor: kartın sol altındaki
   etiketin bulunduğu yerden başlayıp sayfanın başlığının yerine oturuyor.
   Beyaz kalıyor çünkü yol boyunca zemin karanlık; sayfa açıldığı anda
   yerini sayfanın kendi siyah başlığına bırakıyor. */
#ucanAd {
  position: fixed; z-index: 46;
  /* Yol boyunca zemin karanlık, o yüzden BEYAZ başlıyor. Sayfanın
     teması açık bir zeminse beyaz ad inerken kaybolurdu; sahne.js
     uçuş başlarken --ucan-renk'i o işin mürekkep rengine çeviriyor,
     geçiş de GECİKMELİ (aşağıya bak) — renk ancak beyaz yaprak
     belirdikten sonra dönüyor. */
  color: var(--ucan-renk, #fff); white-space: nowrap; line-height: 1;
  letter-spacing: -.02em;
  pointer-events: none;
  opacity: 0;
  /* Ucus TRANSFORM ile (2026-09-27): sahne.js adi hedef yerde/puntoda
     kurup translate+scale ile baslangica itiyor; gecis yalniz transform.
     Eskiden left/top/font-size geciyordu = her karede yerlesim. */
  transform-origin: 0 0;
  will-change: transform;
}
#ucanAd.acik   { opacity: 1; }
#ucanAd.ucuyor {
  transition: transform .75s cubic-bezier(.5,0,.1,1),
              /* .45s gecikme: sayfa .35s'te açılıp yerleşiyor, renk ondan
                 SONRA dönsün. Gecikmesiz yapınca ad daha koyu şeridin
                 üstündeyken koyulaşıp bir an yok oluyordu. */
              color .30s ease .45s;
  transform: translate(0, 0) scale(1);
}


/* ---------- PROFİL (mercek) ----------
   Zemin YOK: arkadaki sahne görünmeye devam ediyor, deliği 3B tarafındaki
   mercek açıyor. Buradaki daire sadece ölçü veriyor — merceğin merkezi ve
   yarıçapı her karede bu elemanın gerçek boyutundan okunuyor, böylece yazı
   ile delik hiçbir ekran boyunda birbirinden kaymıyor. */

/* PROFİL ve BÜLTEN aynı deliği paylaşıyor: ortak olan her şey .mercek
   sınıfında, farklı olan tek şey içine oturan içerik. */
.mercek {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  --mercek-r: calc(min(42vw, 62vh) / 2);     /* .mercek-daire'nin yaricapi */
}
/* VINYET (2026-09-27) — Arda: "mercekler acilinca biraz vinyet gelsin
   merceğin cevresine". Merkez mercegin yaricapinin biraz disina kadar
   acik, kenarlara dogru hafif koyulasiyor. Yalniz SAYDAMLIK canlaniyor
   (kompozitorde, cizim yok); egim bir kez boyanir. Kose etiketleri
   (.bar, z-index 42) bunun ustunde, parlak kalir. */
.mercek::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    rgba(0,0,0,0)   calc(var(--mercek-r) * 1.12),
    rgba(0,0,0,.34) calc(var(--mercek-r) * 1.12 + 24vmax),
    rgba(0,0,0,.66) calc(var(--mercek-r) * 1.12 + 60vmax));
  opacity: 0;
  transition: opacity .4s ease;
  will-change: opacity;
}
.mercek:not(.gizli)::before {
  opacity: 1;
  transition: opacity .7s cubic-bezier(.22,.7,.3,1) .05s;
}

/* En ve boy AYRI AYRI veriliyor: sadece aspect-ratio ile bırakınca yazı
   uzayınca kutu büyüyüp elips oluyordu — mercek ise yalnızca genişlikten
   beslendiği için yazı deliğin dışına taşıyordu. */
.mercek-daire {
  position: relative;              /* yörüngeler buna göre konumlanıyor */
  width:  min(42vw, 62vh);
  height: min(42vw, 62vh);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 9%;
}

/* ---------- MERCEĞİN KOREOGRAFİSİ ----------
   Yazı, deliği TAKİP ediyor. Eskiden düğmeye basar basmaz tam
   görünürlükte içeri düşüyordu: delik daha açılmamışken yazı ortada
   duruyordu, o yüzden "animasyon yok" gibi görünüyordu.

   Artık .yazi sınıfını sahne.js takıyor ve deliğin gerçek ilerlemesine
   bakıyor — açılışta delik yarılandıktan sonra, kapanışta ilk kıpırtıda
   çıkıyor. Yani yazı hep deliğin içinde kalıyor, dışarıda asılı
   kalmıyor. Satırlar da sırayla geliyor. */

.mercek-ic { text-align: center; position: relative; z-index: 1; width: 100%; }
.mercek.yazi .mercek-ic { pointer-events: auto; }

.mercek-ic > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s cubic-bezier(.5,0,.1,1),
              transform .5s cubic-bezier(.5,0,.1,1);
}
.mercek.yazi .mercek-ic > * { opacity: 1; transform: none; }
.mercek.yazi .pr-metin       { transition-delay: 0s;    }
.mercek.yazi .pr-alt         { transition-delay: .10s;  }
.mercek.yazi .pr-baglantilar { transition-delay: .20s;  }

/* Kapanışta sıra beklenmiyor: hepsi birden ve daha çabuk çekiliyor,
   delik üstlerine kapanmadan yoldan çekilmiş oluyorlar. */
.mercek:not(.yazi) .mercek-ic > * {
  transition-duration: .24s;
  transition-delay: 0s;
}

/* ---------- MERCEĞİN İÇİNDEKİ KAPATMA ----------
   Köşedeki etiket de kapatıyor ama küçük ve uzak kalıyordu. Bu düğme
   deliğin alt yayının hemen içinde duruyor: parmak nereye bakıyorsa
   orada. Ölçüsü dairenin kendisinden geliyor, ekranla birlikte
   büyüyüp küçülüyor.

   Renk dili gönder düğmesinin tersi: dinlenirken içi boş + ince halka,
   üstüne gelince beyaz doluyor — sitede "basılacak şey" böyle söyleniyor. */
.mercek-kapat {
  position: absolute; bottom: 7%;
  left: 0; right: 0; margin-inline: auto;    /* transform boşta kalsın diye */
  width:  clamp(32px, calc(min(42vw, 62vh) * 0.068), 46px);
  height: clamp(32px, calc(min(42vw, 62vh) * 0.068), 46px);
  border: 0; padding: 0; border-radius: 50%;
  background: transparent; color: #fff;
  cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);

  opacity: 0; transform: translateY(16px);
  transition: opacity .5s cubic-bezier(.5,0,.1,1),
              transform .5s cubic-bezier(.5,0,.1,1),
              background-color .5s cubic-bezier(.16,1,.3,1),
              color            .5s cubic-bezier(.16,1,.3,1),
              box-shadow       .5s cubic-bezier(.16,1,.3,1);
}
.mercek-kapat svg {
  width: 40%; height: 40%;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round;
}
.mercek-kapat:hover, .mercek-kapat:focus-visible {
  background: #fff; color: #000;
  box-shadow: inset 0 0 0 2px #fff;
  transition-duration: .7s;
}
/* Yazıyla birlikte geliyor, en son o giriyor; kapanışta hepsiyle beraber
   ve çabuk çekiliyor — delik üstüne inmeden yoldan çekilmiş oluyor. */
.mercek.yazi .mercek-kapat {
  opacity: 1; transform: none;
  pointer-events: auto;
  /* Gecikme YALNIZ girişe: sıra yukarıdaki özellik sırası. Tek sayı
     yazınca hover da 0.3s bekliyor, düğme geç uyanmış gibi oluyordu. */
  transition-delay: .30s, .30s, 0s, 0s, 0s;
}
.mercek:not(.yazi) .mercek-kapat {
  transition-duration: .24s;
  transition-delay: 0s;
}

/* Yazı dairenin kendisiyle ölçekleniyor; küçük ekranda da delikten taşmıyor */
.pr-metin, .bl-metin {
            font-size: clamp(11px, calc(min(42vw, 62vh) * 0.040), 18px);
            line-height: 1.55; color: rgba(255,255,255,.92); }
.pr-alt   { margin-top: 6%; font-size: clamp(8px, calc(min(42vw, 62vh) * 0.023), 11px);
            letter-spacing: .16em; text-transform: uppercase; color: var(--soluk); }
.pr-baglantilar { margin-top: 7%; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.pr-baglantilar a {
  font-size: clamp(8px, calc(min(42vw, 62vh) * 0.023), 11px);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--metin); text-decoration: none;
}

/* ---------- MERCEĞE KAPILMIŞ SİMGELER ----------
   Referansta merceğin içinde küçük lamalar dönüyor — stüdyonun adı
   Alpacka olduğu için, kendi şakaları. Buradaki karşılığı deliğin
   kendi mantığından geliyor: burası bir yerçekimi merceği, içine
   kapılmış şeyler yörüngede dönüyor.

   Simgeyi icerik/isler.js'teki mercekSimge satırından değiştir; emoji
   de olur, harf de. Boş bırakırsan hiç görünmezler.

   Yörünge kutusu dönüyor, simge ters yönde dönerek dik kalıyor —
   yoksa takla atarak dolanırdı. Yazının ARKASINDA (z-index 0) ve
   soluk: okumayla yarışmıyorlar. */

.mercek-simgeler { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

.yorunge {
  position: absolute;
  animation: yorungeDon var(--sure) linear infinite;
  /* eksi gecikme = animasyon ortasından başlat: hepsi aynı noktadan
     çıkmasın diye her biri yörüngenin başka bir yerinde doğuyor */
  animation-delay: calc(var(--sure) * var(--faz) * -1);
}

.yorunge .simge {
  position: absolute; left: 50%; top: 0;
  color: var(--metin);
  font-size: clamp(9px, calc(min(42vw, 62vh) * 0.055), 30px);
  line-height: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(var(--olcek));
  transition: opacity .8s ease .15s;
  animation: yorungeTers var(--sure) linear infinite;
  animation-delay: calc(var(--sure) * var(--faz) * -1);
}
.mercek.yazi .yorunge .simge { opacity: var(--saydam); }

/* ---------- BÜLTEN ----------
   Mercek PROFİL'inkiyle aynı; buradaki yalnız içine oturan form.

   Ölçüler referanstan alındı (1440px'te ölçüldü, hepsi kök birimin katı):
     çubuk ve düğme  4.5br yüksek   (referans: h-45 / size-45)
     çubuk yan payı  2br            (px-20)
     aralık          0.8br          (gap-x-8)
     yazı            1.4br, -0.02em (text-14)
     form genişliği  en çok 32br    (max-w-[32rem]) — telefonda 26br
     çevre çizgisi   2px            (u_ringW = 2 / yükseklik)

   TEK AYRILDIĞIMIZ YER: referansta çubuğun çevresi odaklanınca dönen bir
   renk çarkına dönüşüyor (shader'da rim = mix(beyaz, çark, u_chroma)).
   Burada çark yok — çizgi hep BEYAZ. Odak yine de belli olsun diye
   sönük beyazdan tam beyaza geçiyor, referansın kendi geçiş süresiyle
   (.35s power2.out). */

.bl-form {
  margin-top: calc(var(--br) * 3);       /* referans: mt-30 */
  width: 100%;
  max-width: calc(var(--br) * 32);
  margin-left: auto; margin-right: auto;
  display: flex; align-items: center;
  gap: calc(var(--br) * 0.8);
}

.bl-cubuk {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  /* min-height: mesaj alani cok satirli (textarea), uzun hazir mesajda
     cubuk asagi dogru buyur. Yaricap sabit yarim yukseklik: tek satirda
     yine hap, iki satirda yuvarlak koseli kutu (999px harfleri kirpardi). */
  min-height: calc(var(--br) * 4.5);
  display: flex; align-items: center;
  padding: 0 calc(var(--br) * 2);
  border-radius: calc(var(--br) * 2.3);
  background: #000;
  /* çevre çizgisi: kenarı içeriden çiziyoruz, kutu ölçüsü büyümesin */
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
  transition: box-shadow .35s cubic-bezier(.25,.46,.45,.94);
  cursor: text;
}
.bl-form:focus-within .bl-cubuk { box-shadow: inset 0 0 0 2px #fff; }

.bl-eposta {
  display: block;
  width: 100%; height: auto;
  padding: calc(var(--br) * 1.15) 0;
  resize: none; overflow: hidden;
  line-height: 1.35;
  border: 0; background: none; outline: none;
  font-family: var(--yazi);
  font-size: calc(var(--br) * 1.4);
  letter-spacing: -.02em;
  color: var(--metin);
  caret-color: #fff;
}
.bl-eposta::placeholder { color: rgba(255,255,255,.4); }
/* Tarayıcının otomatik doldurma sarısı siyah hapı bozuyordu */
.bl-eposta:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 60px #000 inset;
}
.bl-form.hatali .bl-cubuk { box-shadow: inset 0 0 0 2px #fff; animation: blSarsinti .4s ease; }
@keyframes blSarsinti {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* robot tuzağı — ekranda yeri yok, klavyeyle de gezilmiyor */
.bl-tuzak {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- GÖNDER DÜĞMESİ ----
   Üstüne gelince dolgu KAYBOLUYOR, geriye çizgi kalıyor; ok da aynı anda
   el değiştiriyor: duran ok sağdan çıkıyor, yenisi soldan giriyor.
   Referansın süreleri: dolgu .7s expo (çıkarken .5s), ok çıkış .75s,
   giriş 1s — ikisi de expo. */
.bl-gonder {
  position: relative; flex: none;
  width: calc(var(--br) * 4.5); height: calc(var(--br) * 4.5);
  border: 0; padding: 0; border-radius: 50%;
  background: #fff; color: #000;
  cursor: pointer; overflow: hidden;
  box-shadow: inset 0 0 0 0 rgba(255,255,255,0);
  transition: background-color .5s cubic-bezier(.16,1,.3,1),
              color            .5s cubic-bezier(.16,1,.3,1),
              box-shadow       .5s cubic-bezier(.16,1,.3,1);
}
.bl-gonder:hover, .bl-gonder:focus-visible {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 2px #fff;
  transition-duration: .7s;
}
.bl-gonder:disabled { cursor: default; opacity: .4; }

.bl-ok {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.bl-ok svg {
  width: 42%; height: 42%;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* duran ok: yerinde. Giren ok: soldan, ekranın dışında bekliyor. */
.bl-ok-once  { transform: none;
               transition: transform .75s cubic-bezier(.16,1,.3,1); }
.bl-ok-sonra { transform: translateX(-160%);
               transition: transform 1s cubic-bezier(.16,1,.3,1); }
.bl-gonder:hover .bl-ok-once,
.bl-gonder:focus-visible .bl-ok-once  { transform: translateX(160%); }
.bl-gonder:hover .bl-ok-sonra,
.bl-gonder:focus-visible .bl-ok-sonra { transform: none; }

/* durum satırı: yer kaplamaya devam etsin ki form altındaki boşluk
   mesaj gelince zıplamasın */
.bl-durum {
  margin-top: calc(var(--br) * 1.6);
  min-height: 1.4em;
  font-size: clamp(9px, calc(min(42vw, 62vh) * 0.026), 13px);
  letter-spacing: .04em;
  color: var(--soluk);
  transition: color .3s ease;
}
.bl-durum.iyi  { color: var(--metin); }
.bl-durum.kotu { color: #e0784f; }

/* Yazı ve form deliği takip ederken sırayla giriyor — referansın
   overlay sıralaması: yazı .35sn, haplar .5sn (aralarında .075). */
.mercek.yazi .bl-metin { transition-delay: .35s; }
.mercek.yazi .bl-form  { transition-delay: .50s; }
.mercek.yazi .bl-durum { transition-delay: .575s; }

@keyframes yorungeDon {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes yorungeTers {
  from { transform: translate(-50%, -50%) scale(var(--olcek)) rotate(0deg); }
  to   { transform: translate(-50%, -50%) scale(var(--olcek)) rotate(-360deg); }
}

@media (max-width: 649px) {
  .mercek-daire { width: min(86vw, 62vh); height: min(86vw, 62vh); padding: 11%; }
  .mercek { --mercek-r: calc(min(86vw, 62vh) / 2); }
  .pr-metin, .bl-metin { font-size: clamp(11px, calc(min(86vw, 62vh) * 0.040), 16px); }
  /* referansta telefonda form 26br, masaüstünde 32br */
  .bl-form { max-width: calc(var(--br) * 26); margin-top: calc(var(--br) * 2.5); }
  /* 4br -> 4.6br (2026-09-12). ÖLÇÜLDÜ: 375px'te 4br = 38px çıkıyordu,
     yani e-posta kutusu ve gönder düğmesi 38x38. Parmak ucu ~44px.
     Referanstan bilerek ayrılıyoruz: bu ölçü masaüstü sadakati için
     seçilmişti, Arda'nın isteği telefonda rahat basılması. Masaüstü
     değeri (dışarıdaki kural) aynen duruyor. */
  .bl-cubuk { min-height: calc(var(--br) * 4.6); }
  .bl-gonder { height: calc(var(--br) * 4.6); }
  .bl-gonder { width: calc(var(--br) * 4.6); }
  /* Delik telefonda daha büyük; düğme de onunla büyüsün ki parmak
     ucuna göre kalsın (dokunma hedefi en az 40px). */
  .mercek-kapat {
    width:  clamp(40px, calc(min(86vw, 62vh) * 0.11), 54px);
    height: clamp(40px, calc(min(86vw, 62vh) * 0.11), 54px);
    bottom: 5%;
  }
}


/* ---------- PANEL (iş detayı / tümü / profil) ---------- */

#panel {
  position: fixed; inset: 0;
  z-index: 40;
  /* referansta dizin tamamen siyah bir sayfa; arkadaki şerit görünmüyor */
  background: #000;
  display: flex; align-items: center; justify-content: center;
  padding: 90px 34px;
  opacity: 1;
  transition: opacity .4s ease;
}
#panel.gizli { opacity: 0; pointer-events: none; }

#panelIc {
  max-width: 780px; width: 100%;
  max-height: 100%; overflow-y: auto;
  /* Tarayicinin kalin gri kaydirma cubugu panelin ortasinda duruyordu. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}
/* Galeri gorunumu (Diger ornekler) daha genis: is sayfasi 780 px'lik okuma
   genisliginde kaliyor, galeride ise 1180 px iki-uc kolonu gercek boyunda
   tasiyor (980'de kartlar kucuk kaliyordu, 2026-09-23'te degisti).
   Ust/alt maskesi: icerik panelin kenarinda bicak gibi kesilmiyor,
   soluyor - listenin devam ettigi de boylece belli oluyor. */
#panelIc.genis { max-width: 1180px; }
/* YALNIZ ALT solma: ust tarafa da koyunca panelin basligi ("Diger ornekler")
   surekli soluk goruniyordu - kaydirma yukarideyken orada kirpilacak bir sey yok.
   VE yalniz KAYDIRMA VARSA (.maskeli, JS oluyor): maske kaba bagli oldugu icin,
   icerik kisa oldugunda da son satiri soluyordu - tek kart suzulunce aciklamanin
   ikinci satiri hep yariya silik duruyordu (2026-09-23'te goruldu ve olculdu). */
/* MASKE DEĞİL ÖRTÜ (2026-09-28). mask-image kaydırma kabının tamamını ekran
   dışı bir yüzeye aldırıyordu: içindeki mini video her yeni karesinde (60/sn)
   bütün paneli o yüzeye yeniden çizdirip maskeyle harmanlatıyordu - telefonda
   dpr 2.75'te ekran boyu iki doldurma. Panelin zemini düz #000 olduğu için
   saydamdan siyaha giden 28 px'lik yapışkan örtü aynı pikseli veriyor
   (içerik*(1-t) + siyah*t, maske: içerik*(1-t) + zemin #000*t) ve yalnız
   o 28 px'lik şerit ayrı katman oluyor. Eksi kenar boşluğu kaydırma boyunu
   değiştirmesin diye. */
#panelIc.genis.maskeli::after {
  content: ''; display: block;
  position: sticky; bottom: 0;
  height: 28px; margin-top: -28px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), #000);
  pointer-events: none;
}
#panelIc::-webkit-scrollbar { width: 6px; }
#panelIc::-webkit-scrollbar-track { background: transparent; }
#panelIc::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
#panelIc::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }

.p-baslik   { font-size: 56px; font-weight: 400; letter-spacing: -.02em; margin-bottom: 6px; }
.p-yil      { font-size: 11px; letter-spacing: .14em; color: var(--soluk); margin-bottom: 30px; }
.p-metin    { font-size: 19px; line-height: 1.65; color: rgba(255,255,255,.8); max-width: 620px; }
.p-gorsel   { width: 100%; max-height: 46vh; object-fit: cover; object-position: top;
              border-radius: 12px; margin: 34px 0 0; display: block; }
/* yönlendir düğmesi — panelde, gidilecek bir yer varsa çıkar */
.p-git      { display: inline-flex; align-items: center; gap: 14px; margin-top: 36px;
              padding: 13px 15px 13px 24px; border-radius: 999px;
              background: #fff; color: #000; text-decoration: none;
              font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
              transition: transform .25s ease, background .25s ease; }
.p-git i    { width: 25px; height: 25px; border-radius: 50%; background: #000; color: #fff;
              flex: none; display: flex; align-items: center; justify-content: center;
              font-style: normal; font-size: 13px; line-height: 1; }
.p-git:hover { transform: translateY(-2px); }

/* ======================================================
   DİĞER ÖRNEKLER — GALERİ (2026-09-23, 3. tur)

   Arda: "diğer örnekler yeri için hem telefon hem pc tasarımı yap,
   güzel dursun."

   Önceki tur her türü kendi kutusuna koymuştu. Ölçüm: panelde 4 iş ama
   3 tür var — kutuların ikisi TEK satırlık kalıyordu, 980 px'lik alanın
   sağı boşa gidiyordu ve bölüm galeri değil "liste" gibi okunuyordu.

   Bu tur:
     - tek galeri: her iş büyük önizlemeli bir kart
     - tür ayrımı üstteki çiplerde (tek tür varsa çubuk hiç çizilmiyor)
     - kolon sayısı iş sayısından gelir: 4 iş 2x2, 5-6 iş 3 kolon —
       "3 + 1 yetim" görüntüsü çıkmıyor
     - panel 980 -> 1180 px: masaüstünde kartlar gerçek boyunda duruyor
     - telefonda tek kolon, ok rozeti sürekli görünür (dokunmatikte hover yok)
   ====================================================== */

/* Panel başlığı */
.p-dbaslik      { margin-bottom: 26px; }
.p-dbaslik-ad   { font-size: 40px; font-weight: 400; letter-spacing: -.02em;
                  line-height: 1.05; }
.p-dbaslik-alt  { margin-top: 8px; font-size: 11px; letter-spacing: .16em;
                  text-transform: uppercase; color: var(--soluk); }

/* ---------- TÜR ÇİPLERİ ---------- */
.p-suzgec       { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px;
                  opacity: 0; transform: translateY(8px);
                  transition: opacity .5s ease,
                              transform .5s cubic-bezier(.22,.7,.3,1); }
.p-suzgec.geldi { opacity: 1; transform: none; }

.p-cip          { display: inline-flex; align-items: center; gap: 9px;
                  padding: 9px 15px; border-radius: 999px;
                  border: 1px solid rgba(255,255,255,.14);
                  background: transparent; color: rgba(255,255,255,.7);
                  font: inherit; font-size: 11px; letter-spacing: .14em;
                  text-transform: uppercase; cursor: pointer;
                  transition: background .25s ease, color .25s ease,
                              border-color .25s ease; }
.p-cip:hover    { border-color: rgba(255,255,255,.32); color: #fff; }
.p-cip.aktif    { background: #fff; color: #000; border-color: #fff; }
.p-cip-say      { font-size: 10px; letter-spacing: 0; opacity: .55; }

/* ---------- IZGARA ---------- */
.p-izgara       { display: grid; gap: 26px 22px;
                  grid-template-columns: repeat(var(--kolon, 2), minmax(0, 1fr)); }
/* Süzgeç tek işe indiğinde: kart iki kolonluk ızgarada sola yapışıp sağ yarıyı
   boş bırakıyordu. Tek kart ortada ve okunur boyda duruyor. */
.p-izgara.tek   { max-width: 620px; margin-inline: auto; }

.p-kart         { display: flex; flex-direction: column; gap: 14px;
                  color: var(--metin); text-decoration: none; min-width: 0;
                  opacity: 0; transform: translateY(18px);
                  transition: opacity .55s ease,
                              transform .55s cubic-bezier(.22,.7,.3,1); }
.p-izgara.geldi .p-kart { opacity: 1; transform: none; }
.p-kart.yok     { display: none; }

/* ÖNİZLEME KAPAĞI — her işte AYNI ölçü, aynı çerçeve. Video contain ile
   yerleşiyor: kırpılmıyor (kural 2026-09-17'de ölçülüp konmuştu). */
.p-kart-medya   { position: relative; width: 100%; aspect-ratio: 16 / 10;
                  border-radius: 16px; overflow: hidden;
                  background: rgba(255,255,255,.04);
                  border: 1px solid rgba(255,255,255,.1);
                  box-shadow: 0 18px 40px -28px #000;
                  padding: 8px; box-sizing: border-box;
                  display: flex; align-items: center; justify-content: center;
                  transition: transform .5s cubic-bezier(.22,.7,.3,1),
                              border-color .3s ease, box-shadow .5s ease; }
.p-kart:hover .p-kart-medya { transform: translateY(-4px);
                              border-color: rgba(255,255,255,.26);
                              box-shadow: 0 26px 52px -30px #000; }
.p-kart-medya video { width: 100%; height: 100%; object-fit: contain;
                      display: block; border-radius: 8px;
                      background: rgba(0,0,0,.35); }

.p-kart-ok      { position: absolute; right: 12px; top: 12px;
                  width: 34px; height: 34px; border-radius: 50%;
                  display: flex; align-items: center; justify-content: center;
                  font-size: 13px; line-height: 1; color: #fff;
                  background: rgba(0,0,0,.5);
                  border: 1px solid rgba(255,255,255,.22);
                  opacity: 0; transform: translateY(-4px) scale(.92);
                  transition: opacity .3s ease, background .3s ease,
                              color .3s ease, border-color .3s ease,
                              transform .35s cubic-bezier(.22,.7,.3,1); }
.p-kart:hover .p-kart-ok { opacity: 1; transform: none;
                           background: #fff; color: #000; border-color: #fff; }
/* DOKUNMATİKTE hover yok: rozet hiç çıkmıyordu, yani kartın "açılır" olduğu
   belli olmuyordu. Ölçüldü (2026-09-23): 768 px tablette opacity 0'da kalıyordu
   — ekran genişliğine değil, CİHAZIN hover yeteneğine bakmak gerekiyormuş. */
@media (hover: none) {
  .p-kart-ok { opacity: 1; transform: none; }
}

/* ---------- KART YAZISI ---------- */
.p-kart-govde   { display: flex; flex-direction: column; gap: 7px;
                  min-width: 0; padding: 0 2px; }
.p-kart-meta    { font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
                  color: rgba(255,255,255,.42); }
/* Ad İKİ satıra kadar sarar: önceki satır düzeninde tek satıra zorlanıyordu
   ve telefonda "Arda İklimlendirme — Klima ..." diye kesiliyordu. */
.p-kart-ad      { font-size: 19px; font-weight: 600; line-height: 1.28;
                  letter-spacing: -.01em; text-align: left;
                  display: -webkit-box; -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical; overflow: hidden; }
.p-kart-aciklama{ font-size: 13px; line-height: 1.55; text-align: left;
                  color: rgba(255,255,255,.55);
                  display: -webkit-box; -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical; overflow: hidden;
                  white-space: normal; }

/* Dar masaüstü / tablet: üç kolon sıkışıyor, ikiye in. */
@media (max-width: 1080px) {
  .p-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* üstüne gelince çıkan küçük önizleme */
#onizleme {
  position: fixed; z-index: 41;
  width: 210px; aspect-ratio: 16 / 10;
  border-radius: 12px; overflow: hidden;
  pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(.9);
  transition: opacity .28s ease, transform .38s cubic-bezier(.22,.7,.3,1);
}
#onizleme.acik { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#onizleme img  { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ---------- TELEFON ---------- */

@media (max-width: 649px) {
  /* referansta telefonda px-40 py-25 = 4br yan, 2.5br dikey.
     2026-09-27 Arda: "Arda Can Güleryüz, Hakkında ve diğer yazılar ortada
     gibi duruyor" -> köşelere yaklaştı: yan 4br (392px'te 40px, ekranın
     %10'u) -> 2br (20px, masaüstündeki %5 oranı); dikey 2.5br -> 1.2br
     (yazı kenardan ~38px -> ~25px). Dokunma hedefi (etiket dolgusu) aynı.
     NOT: yukarıdaki 649px bloğundaki .bar kuralını BU kural eziyor. */
  .bar       { padding: calc(var(--br) * 1.2) calc(var(--br) * 2); }
  .p-baslik  { font-size: 34px; }
  .p-metin   { font-size: 16px; }
  /* GALERİ TELEFONDA: tek kolon, kapak tam genişlik. Dokunmatikte hover
     yok — ok rozeti sürekli görünür duruyor, yoksa kartın "açılır" olduğu
     telefonda hiç belli olmuyordu. */
  .p-izgara       { grid-template-columns: 1fr; gap: 22px; }
  .p-kart         { gap: 12px; }
  .p-kart-medya   { border-radius: 14px; padding: 6px; }
  .p-kart-ok      { opacity: 1; transform: none; width: 30px; height: 30px;
                    font-size: 12px; right: 10px; top: 10px; }
  .p-kart-ad      { font-size: 17px; }
  .p-kart-aciklama{ font-size: 12.5px; -webkit-line-clamp: 3; }
  .p-suzgec       { gap: 7px; margin-bottom: 22px;
                    /* Çipler telefonda tek satırda yan yana kaydırılıyor:
                       alt alta sarınca başlıkla galeri arası şişiyordu. */
                    flex-wrap: nowrap; overflow-x: auto;
                    scrollbar-width: none;
                    -ms-overflow-style: none;
                    margin-inline: -4px; padding-inline: 4px; }
  .p-suzgec::-webkit-scrollbar { display: none; }
  .p-cip          { flex: none; padding: 8px 13px; }
  .p-dbaslik-ad   { font-size: 28px; }
  .p-dbaslik      { margin-bottom: 20px; }
}


/* ==========================================================
   FİYAT AL — PAKET AFİŞİ
   Alt sağdaki etikete basınca açılan tam ekran afiş.
   Rengi, eğrisi, etiketleri sitenin geri kalanıyla aynı;
   yeni bir renk ya da yeni bir font GİRMİYOR.
   ========================================================== */

#paketler {
  position: fixed; inset: 0;
  z-index: 46;                 /* iş sayfası 45; afiş onun da üstünde */
  background: var(--zemin-renk);
  transition: opacity .45s cubic-bezier(.16,1,.3,1);
}
#paketler.gizli { opacity: 0; pointer-events: none; }

/* Afiş uzun; kaydırma İÇERİDE olsun, arkadaki şerit kıpırdamasın. */
#paketlerKaydir {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ---------- KAPAK ----------
   Afişin tepesinde duran, durmadan akan kart şeridi. Kartlar YUKARI
   süzülüyor: sayfayı aşağı kaydırdığında içerik yukarı gider, burada
   da öyle. Şeridin altı zemine karışıyor ki afişle arasında sert bir
   kenar olmasın. */
#paketlerKapak {
  position: relative;
  height: clamp(240px, 42vh, 430px);
  overflow: hidden;
}

#paketlerSerit {
  position: absolute; inset: 0;
  display: flex;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 20px);
  padding: 0 clamp(14px, 3vw, 40px);
}

/* Bir sütun. İçindeki kartları sahne.js tek tek yerleştiriyor —
   akış JS'te, çünkü sonsuz döngü için her kart şeridin sonuna
   SARMALANIYOR; CSS animasyonu bunu yapamaz. */
.pk-sutun {
  position: relative;
  flex: 1 1 0;
  max-width: 360px;
  height: 100%;
}

.pk-kart {
  position: absolute;
  left: 0; width: 100%;
  top: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #0b0b0b;
  border: 1px solid rgba(255,255,255,.09);
  will-change: transform;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
/* Telefonda gölge YOK (2026-09-27): afiş açılışının en uzun çizimi bu
   gölgelerdi (ölçüldü: 56 ms -> 22 ms, gölgesiz kolda uzun kare de
   kalktı). Zemin siyah, siyah gölge zaten seçilmiyor. */
@media (max-width: 649px) { .pk-kart { box-shadow: none; } }
.pk-kart img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  /* Bu görsellerin İKİSİ ZATEN KOYU (FarLab ve oyun siyah zeminli).
     Önce .72 verilmişti; üstüne perdenin siyahı binince kartlar bomboş
     kapkara kutulara dönüyordu. Neredeyse tam opak bırakıldı — sönükleştirme
     işini aşağıdaki perde zaten yapıyor. */
  opacity: .94;
}

/* Şeridin üstü ve altı zemine karışıyor. */
#paketlerKapakPerde {
  position: absolute; inset: 0;
  pointer-events: none;
  /* Yalnız İKİ UÇ karartılıyor: şerit yukarıdan ve aşağıdan zemine
     karışsın diye. Ortası açık kalmalı — önceki hâlinde orta bant da
     %25 siyahla örtülüydü ve koyu ekran görüntüleri hiç okunmuyordu. */
  background:
    linear-gradient(to bottom,
      var(--zemin-renk) 0%,
      rgba(0,0,0,.55) 9%,
      rgba(0,0,0,0)   26%,
      rgba(0,0,0,0)   58%,
      rgba(0,0,0,.72) 88%,
      var(--zemin-renk) 100%);
}

/* ---------- AFİŞİN GÖVDESİ ---------- */
#paketlerIc {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 44px) clamp(60px, 8vw, 90px);
  margin-top: clamp(-46px, -4vw, -20px);
  position: relative; z-index: 1;
}

.pk-tepe { margin-bottom: clamp(30px, 5vw, 52px); }
.pk-tepe h2 {
  font-size: clamp(32px, 5.4vw, 66px);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.04;
  margin: 0 0 20px;
  text-wrap: balance;
  max-width: 15ch;
}
.pk-tepe h2 em { font-style: normal; color: #e4713f; }
.pk-tepe p {
  margin: 0; max-width: 54ch;
  color: rgba(255,255,255,.62);
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.6;
}

/* ---------- DÖRT PAKET ----------
   Kutu yok — sitenin her yerinde olduğu gibi ince çizgiler ayırıyor. */
.pk-liste {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,.13);
  margin-bottom: clamp(32px, 5vw, 54px);
}
.pk-paket {
  display: flex; flex-direction: column;
  padding: 26px clamp(14px, 1.6vw, 22px) 24px;
  border-left: 1px solid rgba(255,255,255,.13);
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.pk-paket:last-child { border-right: 1px solid rgba(255,255,255,.13); }

/* Öne çıkan paket: kordan beslenen ince bir zemin ve üstünde kor çizgi. */
.pk-paket.pk-one-cikan {
  background: linear-gradient(180deg,
    rgba(192,69,28,.14) 0%, rgba(192,69,28,.05) 34%, rgba(192,69,28,0) 100%);
  border-top: 1px solid #c0451c;
  margin-top: -1px;
}

.pk-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 22px; margin-bottom: 14px;
}
.pk-no {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}
.pk-one-cikan .pk-no { color: #e4713f; }
.pk-rozet {
  font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #e4713f;
  border: 1px solid rgba(192,69,28,.55);
  border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}

.pk-paket h3 {
  font-size: clamp(21px, 2.1vw, 28px);
  font-weight: 300; letter-spacing: -.02em; line-height: 1.12;
  margin: 0 0 8px;
}
.pk-kime {
  margin: 0 0 20px;
  color: rgba(255,255,255,.6);
  font-size: 13px; line-height: 1.5;
}

.pk-fiyat {
  display: flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px; flex-wrap: wrap;
}
.pk-onek {
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  width: 100%; margin-bottom: 2px;
}
.pk-sayi {
  font-size: clamp(28px, 3.1vw, 40px);
  font-weight: 200; letter-spacing: -.03em; line-height: 1;
}
.pk-para { font-size: 22px; font-weight: 300; color: rgba(255,255,255,.62); }
.pk-one-cikan .pk-sayi { color: #e4713f; }

.pk-paket ul {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-direction: column; gap: 10px; flex: 1;
}
.pk-paket li {
  position: relative; padding-left: 16px;
  font-size: 12.5px; line-height: 1.5;
  color: rgba(255,255,255,.84);
}
.pk-paket li::before {
  content: ""; position: absolute; left: 0; top: .66em;
  width: 7px; height: 1px; background: rgba(255,255,255,.32);
}
.pk-paket li b { font-weight: 600; color: var(--metin); }

.pk-hediye {
  border-top: 1px solid rgba(192,69,28,.3);
  padding-top: 12px;
  font-size: 12px; line-height: 1.45; color: #e4713f;
  margin: 0;
}
.pk-hediye b { font-weight: 600; color: var(--metin); }

/* ---------- ORTAK ---------- */
.pk-ortak-baslik {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  margin: 0 0 16px;
}
.pk-ortak {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; margin-bottom: clamp(30px, 5vw, 50px);
}
.pk-ortak h4 { font-size: 14px; font-weight: 500; margin: 0 0 5px; letter-spacing: -.01em; }
.pk-ortak p  { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.6); margin: 0; }

/* ---------- ALT ---------- */
.pk-cizgi { height: 1px; background: rgba(255,255,255,.13); }
.pk-alt {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 26px; flex-wrap: wrap; padding-top: 26px;
}
.pk-alt h4 {
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 300; letter-spacing: -.02em; margin: 0 0 14px;
}
/* Afişin içinden iletişim merceğini açan düğme — sitenin gönder
   düğmesiyle aynı dil: dolu beyaz hap. */
.pk-ulas {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 14px 12px 22px; border: 0; border-radius: 999px;
  background: #fff; color: #000; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.pk-ulas:hover { transform: translateY(-2px); }
.pk-ulas i {
  width: 24px; height: 24px; border-radius: 50%;
  background: #000; color: #fff; font-style: normal;
  display: grid; place-items: center; font-size: 12px;
}
.pk-kucuk {
  margin: 24px 0 0; font-size: 11px; line-height: 1.65;
  color: rgba(255,255,255,.5); max-width: 64ch;
}

/* ---------- KAPATMA ----------
   Merceğinkiyle aynı düğme; sağ üstte duruyor. */
#paketlerKapat {
  position: fixed; top: 18px; right: 20px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--metin); cursor: pointer;
  display: grid; place-items: center;
  transition: background .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
#paketlerKapat:hover { background: #fff; color: #000; }
#paketlerKapat svg { width: 17px; height: 17px; fill: none;
                     stroke: currentColor; stroke-width: 1.6; }

/* ---------- DAR EKRAN ---------- */
@media (max-width: 1000px) {
  .pk-liste  { grid-template-columns: repeat(2, 1fr); }
  .pk-paket:nth-child(2n) { border-right: 1px solid rgba(255,255,255,.13); }
  .pk-ortak  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .pk-liste  { grid-template-columns: 1fr; }
  .pk-paket  { border-right: 1px solid rgba(255,255,255,.13); }
  .pk-paket.pk-one-cikan { margin-top: 0; }
  .pk-ortak  { grid-template-columns: 1fr; gap: 20px; }
  /* 38 -> 44: parmak ucu ölçüsü. Ölçüldü, 38x38'di. */
  #paketlerKapat { top: 12px; right: 12px; width: 44px; height: 44px; }

  /* Paket panelindeki küçük yazılar (2026-09-12).
     ÖLÇÜLDÜ 375x812: pk-rozet 9.5px, pk-onek 10px, pk-no/pk-kucuk/
     pk-ortak-baslik 11px. Telefonda bu ölçüler okunmuyor; hepsi
     12px'in üstüne çıkarıldı. Masaüstünde tek piksel değişmiyor —
     kural 620px altında. */
  .pk-rozet        { font-size: 12px; }
  .pk-onek         { font-size: 12.5px; }
  .pk-no,
  .pk-ortak-baslik { font-size: 12.5px; }
  .pk-kucuk        { font-size: 12.5px; line-height: 1.5; }
}

/* Hareketi azaltılmış sistemlerde şerit durur (sahne.js sayaç kurmuyor),
   afiş de süzülmeden açılır. */
@media (prefers-reduced-motion: reduce) {
  #paketler { transition: none; }
}


/* ---------- AFİŞİN KAPAK GÖRSELİ ----------
   Yalnız ?afis=kapak adresinde geçerli. Afişi, şeritteki kartın
   üstüne basılacak fotoğrafı çekilecek hâle getiriyor: akan şerit,
   kapatma düğmesi ve kaydırma yok; her şey tek karede duruyor.

   Kart 3B sahnede duracağı için zemin kapkara BIRAKILMIYOR — sitenin
   kendi koru arkaya konuyor, yoksa kart siyah boşlukta kaybolurdu. */
html.afis-kapak, html.afis-kapak body { overflow: hidden; }

html.afis-kapak #paketler {
  opacity: 1 !important;
  background:
    radial-gradient(58% 42% at 12% -6%,
      var(--kor) 0%, var(--kor-dis) 42%, transparent 74%),
    radial-gradient(52% 38% at 94% 104%,
      var(--kaynak-orta) 0%, var(--kaynak-dis) 40%, transparent 76%),
    var(--zemin-renk);
}
html.afis-kapak #paketlerKapak,
html.afis-kapak #paketlerKapat { display: none; }
html.afis-kapak #paketlerKaydir { overflow: hidden; }

/* Kapak 1600×1000; dört paketin fiyatı da kareye sığsın diye üstteki
   paylar kısaldı, gövde yazısı biraz büyüdü. */
html.afis-kapak #paketlerIc {
  margin-top: 0;
  /* Üst pay, kalan boşluk altta toplanmasın diye ölçülerek verildi:
     paketler 1600×1000 karenin ortasına otursun. */
  padding: 80px 60px 0;
  max-width: none;
}
html.afis-kapak .pk-tepe { margin-bottom: 40px; }
html.afis-kapak .pk-tepe h2 { font-size: 62px; max-width: 17ch; }
html.afis-kapak .pk-tepe p  { font-size: 17px; max-width: 58ch; }
html.afis-kapak .pk-kime    { margin-bottom: 18px; }
/* Alt bölümler kareye girmiyor; kart bir ÖNİZLEME, tamamı değil. */
html.afis-kapak .pk-cizgi,
html.afis-kapak .pk-ortak-baslik,
html.afis-kapak .pk-ortak,
html.afis-kapak .pk-alt,
html.afis-kapak .pk-kucuk { display: none; }


/* ---------- AFİŞİN SELAM PERDESİ ----------
   Açılırken "Hoş geldiniz", kapanırken "Hoşça kalın". Sitenin giriş
   perdesinin küçük kardeşi: aynı nokta, aynı eğri, aynı punto ölçeği.
   Punto BURADA duruyor, kelimenin üstünde değil — noktanın çapı ve
   soldaki payı em ile veriliyor, ikisi de yazıyla birlikte büyüsün. */
#paketlerSelam {
  position: absolute; inset: 0; z-index: 4;
  background: var(--zemin-renk);
  display: grid; place-items: center;
  font-size: clamp(30px, 5vw, 54px);
  opacity: 0; pointer-events: none;
  transition: opacity .32s linear;
}
#paketlerSelam.gorun { opacity: 1; }
#paketlerSelam b {
  position: relative;
  padding-left: .62em;
  font-weight: 300;
  font-size: 1em;
  letter-spacing: -.02em;
  line-height: 1.065;
  white-space: nowrap;
}
#paketlerSelam i {
  position: absolute; left: 50%; top: 50%;
  width: .17em; height: .17em;
  margin-left: -3.1em; margin-top: -.085em;
  border-radius: 50%;
  background: var(--metin);
  opacity: 0;
}
#paketlerSelam.gorun i { opacity: 1; }

/* ---------- İÇERİĞİN SÜZÜLMESİ ----------
   Perde kalkınca afişin parçaları sırayla aşağıdan yukarı süzülüyor,
   kapanırken TERS sırayla yukarı çıkıyorlar. Gecikmeyi sahne.js
   parça parça yazıyor — açılışta yukarıdan aşağı, kapanışta aşağıdan
   yukarı, tıpkı sitenin köşe etiketleri gibi. Eğri sitenin her
   yerindeki expo.out. */
.pk-gel {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1),
              transform .7s cubic-bezier(.16,1,.3,1);
}
#paketler.acildi .pk-gel  { opacity: 1; transform: none; }
#paketler.kapaniyor .pk-gel { opacity: 0; transform: translateY(-16px); }

/* Kapak şeridi de aynı koreografiye giriyor ama kaymadan, sadece
   soluyor — kartlar zaten kendi başlarına akıyor, bir de kayarsa
   iki hareket üst üste biner. */
#paketlerKapak {
  opacity: 0;
  transition: opacity .8s cubic-bezier(.16,1,.3,1);
}
#paketler.acildi #paketlerKapak    { opacity: 1; }
#paketler.kapaniyor #paketlerKapak { opacity: 0; }

/* Yönlendirme ve mercek düğmeleri yan yana. */
.pk-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Gidilecek yer düğmesi — sitedeki "Projeyi aç" düğmesinin dili. */
.pk-git {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 14px 12px 22px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  color: var(--metin); text-decoration: none;
  font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  transition: background .25s ease, color .25s ease,
              transform .25s cubic-bezier(.16,1,.3,1);
}
.pk-git:hover { background: #fff; color: #000; transform: translateY(-2px); }
.pk-git i {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: currentColor;
  font-style: normal; display: grid; place-items: center; font-size: 12px;
}
.pk-git:hover i { background: #000; color: #fff; }

/* Hareketi azaltılmış sistemlerde perde de süzülme de yok:
   afiş açıldığı anda tamamen görünür. */
@media (prefers-reduced-motion: reduce) {
  .pk-gel { transition: none; opacity: 1; transform: none; }
  #paketlerKapak { transition: none; opacity: 1; }
  #paketlerSelam { display: none; }
}

/* Kapak görseli çekilirken perde ve süzülme olmayacak:
   tek karede her şey yerinde durmalı. */
html.afis-kapak #paketlerSelam { display: none; }
html.afis-kapak .pk-gel { opacity: 1; transform: none; }
html.afis-kapak #paketlerKapak { opacity: 1; }