/* ==========================================================================
   AuroraSky — kara delik açılışı (intro)

   Fikir Özkan'ın: siteye girildiğinde kara delik büyüyüp içinden site çıkar.
   Teknik kurgu: tam ekran koyu bir katman, ortasında maskeyle açılmış bir
   DELİK. Delik büyüdükçe arkadaki site görünür — yani kara delik örtüyü
   yırtan şey, ekranı kaplayan şey değil.

   Katmanlar:
     .intro            tam ekran kap (yalnız konumlandırma)
     .intro__stars     yıldız dokusu (ayrı katman, sadece söner)
     .intro__veil      ortası ŞEFFAF radyal gradient; scale ile büyür
                       → büyüdükçe şeffaf merkez de büyür = delik açılır
     .intro__disk      akreşyon diski, deliğin kenarında döner
     .intro__glow      olay ufku parlaması
     .intro__mark      ilk saniyede görünen marka adı

   KISITLAR
   - prefers-reduced-motion: animasyon YOK, katman hiç gösterilmez.
   - JS kapalı: index.html içindeki <noscript> katmanı gizler. Sayfa
     JS olmadan da tam okunur; intro yalnızca süslemedir.
   - Katman klavyeyle atlanabilir (Esc / Enter / tıklama) ve 2,25 sn sonra
     kendiliğinden kalkar. Ziyaretçiyi asla içeride bırakmaz.
   - aria-hidden: ekran okuyucu intro'yu hiç duymaz.
   ========================================================================== */

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  /* ZEMİN YOK — bilerek. Karartmayı yalnızca .intro__veil yapar; örtüde
     delik açıldığında arkadan SİTE görünsün diye. Buraya bir background
     koyarsak delik açılır ama arkasında yine siyahlık durur. */
  background: transparent;
  cursor: pointer;
}

/* Yıldız dokusu — AYRI bir tam ekran katman (artık örtünün çocuğu DEĞİL).
   Eskiden `.intro__veil::after` idi, yani maskelenen öğenin içindeydi:
   her karede 4 gradient boyanıp ÜSTÜNE maske uygulanıyordu. Örtü artık
   maskelenmediği (ve ölçeklendiği) için yıldızlar onunla birlikte
   balon gibi büyürdü — bu yüzden ayrıldı.

   Delik açılmaya başlamadan (%38) çoktan sönüyor, dolayısıyla sitenin
   üstünde asılı kalmıyor. Yalnızca `opacity` animasyonlu: compositor. */
.intro__stars {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.40) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 65%, rgba(255,255,255,.50) 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 80%, rgba(255,255,255,.35) 50%, transparent 51%);
  background-size: 420px 420px, 520px 520px, 380px 380px, 600px 600px;
  animation: intro-yildiz 2.25s linear forwards;
  opacity: .9;
  pointer-events: none;
}

/* ==========================================================================
   ⚠⚠ DELİK ARTIK `mask` YARIÇAPIYLA DEĞİL, `transform: scale()` İLE AÇILIYOR

   6 Eki 2026, Özkan: "açılış animasyonumuz şu an mobilde daha kötü bir
   halde." Masaüstünde ölçtüm: 148 karede DÜŞEN KARE YOK, en kötü kare
   7,1 ms. Yani bu makine onun telefonundaki takılmayı ÜRETEMİYOR ve
   ölçümüm akıcılık hakkında hiçbir şey kanıtlamıyor. Ölçemediğim için
   yapısal sebebe gittim:

   Eski kurgu tam ekran bir öğeye `mask: radial-gradient(… var(--r) …)`
   veriyordu ve her karede `--r` değişiyordu. Maske yarıçapını
   animasyonlamak = HER KAREDE TÜM EKRANIN YENİDEN BOYANMASI. Masaüstü
   GPU'su bunu yutuyor, orta sınıf telefon yutmuyor. `--disk`/`width`
   animasyonlarını kaldırıp buradan devam etmek tutarsızlıktı: aynı
   kuralı (yalnız transform/opacity animasyonla) maskeye uygulamamışım.

   YENİ KURGU — boyama tek sefer, hareket tamamen compositor:
   Küçük bir daire (10px) + ÇOK geniş ama BULANIK OLMAYAN bir
   `box-shadow: 0 0 0 9999px <koyu>`. Gölge dairenin dışındaki her yeri
   karartıyor, dairenin kendi zemini ortada şeffaf. Öğe ölçeklendiğinde
   gölge de onunla ölçeklenir — yani delik büyür, karartma hep ekranı
   aşar. Boyama bir kez, sonrası compositor.

   ⚠ `box-shadow`'un BLUR'u 0. Bulanık gölge her karede yeniden boyanır
   (bu dosyada daha önce `.intro__disk`'te aynı hata vardı); yayılma
   (spread) yarıçapı bulanıklık değil, sadece dolu bir alan.

   ⚠ ÖĞE KÜÇÜK, ÖLÇEK BÜYÜK — tersi değil. İlk denemem 300vmax'lık bir
   kareydi: 1400px ekranda 5600×5600px'lik bir yüzey, yani compositor'a
   taşımak için tarayıcıyı 31 megapiksel rasterize etmeye zorluyordum.

   ⚠⚠ İKİNCİ DENEMEM DE YANLIŞTI VE ÖLÇÜM YAKALADI: `4vmax` yazdım,
   "ekranı aşar" diye hesapladım. `vmax` ekranın uzun kenarının %1'i,
   yani 852px telefonda 4vmax = 34px. Örtü ilk dört karede ekranın
   ortasında 34px'lik bir kare olarak duruyordu — ölçülen
   `ortuKapali: false`, yani ekranın %99'u açıkta. Hesabı "4vmax ≈ 4 ekran
   boyu" diye kurmuşum. Ders: bir birimin ne olduğunu HATIRLAMA,
   ölçtüğün öğenin gerçek px boyutunu geri oku.

   ÖLÇÜLERİN TÜRETİLMESİ:
     öğe çapı         = 10px → yarıçap 5px
     şeffaf merkez    = yarıçapın %55 → 2,75px (ölçek 1'de)
     delik(ölçek s)   = 2,75px × s
     s = 180 → 495px > 393×852 ekranın köşegen yarısı (470px) ✓
     gölge yayılması  = 9999px → ölçek 1'de bile her ekranı kapatır ✓

   ÜÇ TASARIM KISITI:
   1. Başlangıç deliği (2,75px) logonun 10px'lik beyaz çekirdeğinin
      ARKASINDA kalmalı, yoksa ilk karede nokta gibi sızar. Çekirdeğin
      yarıçapı 5px > 2,75px ✓
   2. Şeffaf merkez ORANLA (%) tanımlı, sabit px ile DEĞİL. Sabit px
      yazıldığında ölçek 1'de bile görünür bir beyaz delik kalıyordu —
      Özkan'ın bugün gördüğü kusur tam olarak buydu.
   3. Ölçek 1'DEN KÜÇÜK OLMAZ: gölge öğeyle birlikte küçülür ve
      kenarlarda açıklık bırakır.
   ========================================================================== */
.intro__veil {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  /* Merkezleme transform'dan BAĞIMSIZ (§3): ölçek keyframe'i transform'u
     tamamen eziyor, translate yazılsa animasyon uygulanmayan ortamda
     örtü köşeye kayar ve ekranın yarısı açıkta kalır. */
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  /* Dairenin kendi zemini: ortası TAMAMEN şeffaf, kenarı koyuya dönüyor.
     Deliğin YUMUŞAK kenarı buradan geliyor — maske gerekmiyor.

     ⚠ ŞEFFAF BÖLGE %82'YE KADAR SÜRÜYOR, geçiş son %18'de. İlk denemem
     %55'ti ve ölçek 17'de ölçtüğümde delikten görünen site metni
     bulanık bir beyazlıkla YIKANMIŞ görünüyordu: geçiş bölgesi deliğin
     yarısını kaplıyordu. Yumuşaklık deliğin KENARINDA olmalı, içine
     taşmamalı — oran büyüdükçe o taşma da ölçekleniyor. */
  background: radial-gradient(circle closest-side,
    transparent 0 82%,
    rgba(4, 21, 15, .45) 90%,
    rgba(4, 21, 15, .85) 96%,
    #04150f 100%);
  /* Dairenin DIŞI: düz koyu, bulanıklık YOK. */
  box-shadow: 0 0 0 9999px #03100c;
  animation: intro-delik 2.25s linear forwards,
             intro-ortu-son 2.25s linear forwards;
  will-change: transform;
  pointer-events: none;
}

/* Akreşyon diski: deliğin kenarındaki yeşil ışık sızıntısı. Yayların
   ARKASINDA durur, onların okunurluğunu bozmayacak kadar soluk.

   ⚠ AKICILIK: box-shadow yarıçapı `calc(var(--disk) * …)` ile
   animasyonlanıyordu — box-shadow her karede YENİDEN BOYANIR ve bulanık
   kenarlı bir gölgeyi 60 kez/sn boyamak açılıştaki ikinci pahalı
   kalemdi. Artık gölge SABİT ölçüde, büyüme `scale` ile yapılıyor
   (compositor, boyama yok). */
.intro__disk {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  margin: -0.5px 0 0 -0.5px;   /* merkezleme transform'dan BAĞIMSIZ */
  border-radius: 50%;
  box-shadow:
    0 0 26px 3px rgba(53, 201, 142, .28),
    0 0 56px 1px rgba(31, 157, 107, .20);
  animation: intro-yay-ac 2.25s linear forwards,
             intro-olcek  2.25s linear forwards;
}

/* Olay ufku: merkezdeki BEYAZ daire — logonun tam ortasındaki şekil.
   Logo: beyaz dolu daire + onu saran kesik beyaz yay + iki yeşil dış yay.
   Açılışın ilk saniyesi bilerek logonun birebir kendisi; sonra o şekil
   büyüyüp deliğe dönüşüyor. "Logo büyüyüp site açılıyor" istenen buydu. */
.intro__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 24px 6px rgba(234, 255, 246, .55);
  animation: intro-cekirdek 2.25s ease-in forwards;
}

/* Logonun üç yayı. Her biri ayrı yarıçap, ayrı renk, ayrı hız —
   logodaki gibi hepsi KESİK (tam halka değil). */
/* ⚠ MERKEZLEME `transform` İLE YAPILMAZ — negatif margin ile yapılır.
   3 Eki 2026: merkezleme `translate(-50%,-50%)` ile yapılıyordu ve o
   kayıt YALNIZCA dönme keyframe'lerinin içindeydi. Mobil tarayıcı dönme
   animasyonunu uygulamayınca yaylar sol-üst köşelerinden çakıldı ve
   merkezden sağa-aşağı kaymış göründüler (Özkan telefondan gördü).
   Artık merkezleme transform'dan BAĞIMSIZ: animasyon hiç çalışmasa bile
   yaylar merkezde durur, transform yalnızca döndürür. */

/* ⚠ AKICILIK (3 Eki 2026, Özkan: "açılış animasyonu daha akıcı olsun"):
   yayların ÖLÇÜSÜ `width/height/border-width/margin: calc(var(--disk)…)`
   ile animasyonlanıyordu. Her karede dört öğenin genişliği değişiyor →
   tarayıcı her karede LAYOUT + PAINT yapıyordu. 60 fps'de bu bütçeyi
   aşar, animasyon kekeler.

   Artık ölçü SABİT (--yay-taban, logo durma anındaki boyut) ve büyüme
   ayrı `scale` özelliğiyle yapılıyor — yalnızca compositor işi.
   Dönme `rotate`, büyüme `scale`: ikisi AYRI CSS özelliği olduğu için
   birbirini ezmiyor (eski `transform` ile mümkün değildi).
   Desteklemeyen eski tarayıcıda yaylar taban boyutunda merkezde
   görünür durur — kural bozulmuyor. */
.intro {
  --yay-taban: clamp(26px, 8.5vmin, 40px);
}

.intro__yay {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border-style: solid;
  border-color: transparent;
  animation: intro-yay-ac 2.25s linear forwards,
             intro-olcek  2.25s linear forwards;
}

/* İç yay — beyaz, kalın, logodaki merkez daireyi saran yay. */
.intro__yay--ic {
  width: calc(var(--yay-taban) * 2.3);
  height: calc(var(--yay-taban) * 2.3);
  margin-top: calc(var(--yay-taban) * -2.3 / 2);
  margin-left: calc(var(--yay-taban) * -2.3 / 2);
  border-width: clamp(2px, calc(var(--yay-taban) * .085), 4px);
  border-top-color: #ffffff;
  border-left-color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, .85);
  animation: intro-yay-ac 2.25s linear forwards,
             intro-olcek  2.25s linear forwards,
             intro-don-ic 2.2s linear infinite;
}

/* Orta yay — parlak yeşil (#35C98E), logonun ikinci halkası. */
.intro__yay--orta {
  width: calc(var(--yay-taban) * 3.4);
  height: calc(var(--yay-taban) * 3.4);
  margin-top: calc(var(--yay-taban) * -3.4 / 2);
  margin-left: calc(var(--yay-taban) * -3.4 / 2);
  border-width: clamp(2px, calc(var(--yay-taban) * .062), 3px);
  border-top-color: #35c98e;
  border-right-color: rgba(53, 201, 142, .75);
  animation: intro-yay-ac   2.25s linear forwards,
             intro-olcek    2.25s linear forwards,
             intro-don-ters 3.1s linear infinite;
}

/* Dış yay — koyu yeşil (#1F9D6B), logonun en dıştaki ince yayı. */
.intro__yay--dis {
  width: calc(var(--yay-taban) * 4.5);
  height: calc(var(--yay-taban) * 4.5);
  margin-top: calc(var(--yay-taban) * -4.5 / 2);
  margin-left: calc(var(--yay-taban) * -4.5 / 2);
  border-width: clamp(1px, calc(var(--yay-taban) * .044), 2px);
  border-bottom-color: #1f9d6b;
  border-right-color: rgba(31, 157, 107, .6);
  animation: intro-yay-ac 2.25s linear forwards,
             intro-olcek  2.25s linear forwards,
             intro-don-ic 4.4s linear infinite;
}

/* ==========================================================================
   LOGONUN ETRAFI — "bir tık daha etkileyici, profesyonel olsun"
   (Özkan, 6 Eki 2026)

   Üç katman eklendi. Hepsinin ortak kısıtı: SADECE `opacity`, `rotate`
   ve `scale` animasyonluyor — hiçbiri layout ya da paint tetiklemiyor
   (nöbetçi: hareket.site.test.ts, 16 pahalı özelliği tarıyor). Biri
   `filter: blur()` ile yapılırsa telefonda açılış yine kekeler.

   ⚠ Hepsi logonun ARKASINDA (z-index yok, DOM sırası: yaylardan önce
   gelmiyorlar ama opacity düşük). Logonun kendisiyle yarışmıyorlar;
   dördüncü bir halka eklemek şekli kalabalıklaştırırdı.
   ========================================================================== */

/* 1. Hâle — logonun arkasındaki yumuşak yeşil ışık. Gradient'in kendi
      kenarı sönümlü olduğu için blur'a GEREK YOK. */
.intro__hale {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--yay-taban) * 9);
  height: calc(var(--yay-taban) * 9);
  margin-top: calc(var(--yay-taban) * -4.5);
  margin-left: calc(var(--yay-taban) * -4.5);
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(53, 201, 142, .20) 0%,
    rgba(31, 157, 107, .09) 42%,
    transparent 72%);
  animation: intro-hale 2.25s ease-out forwards;
  pointer-events: none;
}

/* 2. İnce dış çember — logoyu çerçeveleyen tek bir hat. Kesik yaylar
      "dağınık" görünmesin diye onları toplayan bir sınır. */
.intro__cember {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--yay-taban) * 6.2);
  height: calc(var(--yay-taban) * 6.2);
  margin-top: calc(var(--yay-taban) * -3.1);
  margin-left: calc(var(--yay-taban) * -3.1);
  border-radius: 50%;
  border: 1px solid rgba(53, 201, 142, .22);
  animation: intro-cember 2.25s linear forwards;
  pointer-events: none;
}

/* 3. Yörünge noktaları — çemberin üzerinde dönen iki küçük ışık.
      Tek bir öğe dönüyor, noktalar onun çocuğu: iki ayrı animasyon
      yerine bir dönüş. */
.intro__yorunge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--yay-taban) * 6.2);
  height: calc(var(--yay-taban) * 6.2);
  margin-top: calc(var(--yay-taban) * -3.1);
  margin-left: calc(var(--yay-taban) * -3.1);
  animation: intro-cember 2.25s linear forwards,
             intro-don-ters 7s linear infinite;
  pointer-events: none;
}

.intro__yorunge::before,
.intro__yorunge::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: #7fe3bb;
  box-shadow: 0 0 6px 1px rgba(53, 201, 142, .7);
}

.intro__yorunge::before { top: 0;    left: 50%; }
.intro__yorunge::after  { top: 100%; left: 50%; }

/* Hâle logodan HEMEN sonra belirir ve DELİK AÇILMADAN ÖNCE söner.

   ⚠ %38'DE BİTMEK ZORUNDA. İlk yazımda %58'e kadar sürüyordu ve
   ölçtüğümde (ölçek 14 anı) delikten görünen site metni beyaz bir
   sisle yıkanmış çıktı: sis örtüden değil BU HÂLEDEN geliyordu —
   delik açılmıştı ama hâle hâlâ onun üstünde duruyordu.

   Kural: deliğin ÖNÜNDE duran hiçbir ışık katmanı, delik açılmaya
   başladığı andan (%38) sonra görünür kalmamalı. Kendi başına doğru
   duran bir efekt, yanlış anda hâlâ oradaysa kusura dönüşüyor. */
@keyframes intro-hale {
  0%   { opacity: 0; transform: scale(.4); }
  14%  { opacity: .9; transform: scale(1); }
  30%  { opacity: .9; transform: scale(1.06); }
  38%  { opacity: 0; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1.25); }
}

/* Çember ve yörünge: logo dururken tam görünür, delik açılırken savrulur.

   ⚠ BU BLOK DA FORMÜLDEN. `cubic-bezier` ile çağrılıyordu ve yalnız 5
   ara noktası vardı — aynı "her segmentte ivme sıfırlanıyor" kusuru.
   Faz 1 ease-out (değerle), faz 2 sabit oranlı üstel; easing linear.

   `rotate` ile `scale` AYRI özellikler olduğu için yörünge hem dönüp
   hem büyüyebiliyor — `transform`a ikisini yazmak biri diğerini ezerdi. */
@keyframes intro-cember {
  0%   { opacity: 0; scale: 0.55; }
  2%   { opacity: 0.125; scale: 0.609; }
  4%   { opacity: 0.25; scale: 0.663; }
  6%   { opacity: 0.375; scale: 0.712; }
  8%   { opacity: 0.5; scale: 0.757; }
  10%  { opacity: 0.625; scale: 0.797; }
  12%  { opacity: 0.75; scale: 0.832; }
  14%  { opacity: 0.875; scale: 0.864; }
  16%  { opacity: 1; scale: 0.891; }
  18%  { opacity: 1; scale: 0.915; }
  20%  { opacity: 1; scale: 0.936; }
  22%  { opacity: 1; scale: 0.953; }
  24%  { opacity: 1; scale: 0.966; }
  26%  { opacity: 1; scale: 0.978; }
  28%  { opacity: 1; scale: 0.986; }
  30%  { opacity: 1; scale: 0.992; }
  32%  { opacity: 1; scale: 0.996; }
  34%  { opacity: 1; scale: 0.999; }
  36%  { opacity: 1; scale: 1; }
  38%  { opacity: 1; scale: 1; }
  40%  { opacity: 0.99; scale: 1.11; }
  42%  { opacity: 0.97; scale: 1.23; }
  44%  { opacity: 0.94; scale: 1.36; }
  46%  { opacity: 0.9; scale: 1.51; }
  48%  { opacity: 0.87; scale: 1.67; }
  50%  { opacity: 0.82; scale: 1.85; }
  52%  { opacity: 0.78; scale: 2.05; }
  54%  { opacity: 0.73; scale: 2.27; }
  56%  { opacity: 0.67; scale: 2.51; }
  58%  { opacity: 0.62; scale: 2.78; }
  60%  { opacity: 0.56; scale: 3.09; }
  62%  { opacity: 0.5; scale: 3.42; }
  64%  { opacity: 0.43; scale: 3.79; }
  66%  { opacity: 0.37; scale: 4.19; }
  68%  { opacity: 0.3; scale: 4.65; }
  70%  { opacity: 0.23; scale: 5.15; }
  72%  { opacity: 0.15; scale: 5.7; }
  74%  { opacity: 0.08; scale: 6.32; }
  76%  { opacity: 0; scale: 7; }
  100% { opacity: 0; scale: 7; }
}

/* Marka adı: deliğin ALTINDA durur, önünde değil. Merkeze koyarsak
   açılan deliği kendi gövdesiyle kapatır — ilk denemede olan buydu. */
.intro__mark {
  position: absolute;
  left: 50%;
  /* Yazı merkeze DEĞİL, ekranın altına göre konumlanır.
     Merkezden sabit bir mesafe vermek işe yaramıyor: yaylar --disk ile
     büyüyor, yazı sabit kalıyor ve bir noktada halkalar yazının üstüne
     biniyor (3 Eki 2026, mobilde AURORASKY halkaların içinde kaldı —
     ölçülen çakışma 55px). Alt kenara sabitlenince yay ne kadar
     büyürse büyüsün yazı hep onun dışında kalır. */
  bottom: 20vh;
  transform: translate(-50%, 0);
  margin: 0;
  z-index: 2;
  white-space: nowrap;
  font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(1.1rem, 3.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #eafff6;
  text-shadow: 0 0 18px rgba(53, 201, 142, .6);
  animation: intro-yazi 2.25s ease forwards;
}

/* ---------------------------------------------------------- "Atla" düğmesi

   Özkan (6 Eki 2026): "atla yazan yeri de güzelleştir."

   Eski hâli: düz bir çizgi çerçeve, soluk gri yazı. İki sorun vardı —
   (a) hiçbir şey olup bittiğini söylemiyordu, ziyaretçi 2,25 sn'nin ne
   kadarının geçtiğini bilmiyordu; (b) 8px dikey dolgu ile dokunma
   hedefi ~28px, yani parmakla ıskalanır (WCAG 2.5.8 asgari 24px, pratik
   eşik 44px).

   Yeni hâli: cam yüzey + içinde dolan ilerleme çizgisi. Çizgi animasyonu
   `transform: scaleX` — layout yok, bir compositor işi.

   ⚠ İlerleme çizgisi SÜSTEN FAZLASI: kalan süreyi gösteriyor, yani
   "ne kadar bekleyeceğim" sorusunu cevaplıyor. Bu yüzden süresi
   intro'nun süresiyle AYNI sabitten gelmek zorunda (2,25s) — nöbetçi
   test tüm intro animasyon sürelerinin tek bir değer olduğunu
   doğruluyor, bu da onlardan biri. */
.intro__skip {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Dokunma hedefi: 14px dikey dolgu + 12px satır ≈ 40px. */
  padding: 14px 24px;
  border: 1px solid rgba(234, 255, 246, .22);
  border-radius: 999px;
  background: rgba(234, 255, 246, .06);
  backdrop-filter: blur(6px);
  color: rgba(234, 255, 246, .82);
  font: 600 .72rem/1 Figtree, system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  animation: intro-atla 2.25s ease forwards;
}

/* İlerleme çizgisi — düğmenin dibinde soldan sağa dolar.
   `backdrop-filter` düğmede var ama ANİMASYONLU DEĞİL: statik bir
   bulanıklık bir kez hesaplanır, animasyonlu olan her karede boyanır.
   Fark budur (nöbetçi yalnız sonsuz+blur birleşimini reddediyor). */
.intro__skip::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #1f9d6b, #35c98e);
  transform-origin: 0 50%;
  transform: scaleX(0);
  animation: intro-atla-ilerle 2.25s linear forwards;
}

/* Küçük üçgen — "ileri sar" işareti. SVG yerine kenarlıkla: ek istek yok. */
.intro__skip::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  flex: 0 0 auto;
}

.intro__skip:hover,
.intro__skip:focus-visible {
  color: #eafff6;
  border-color: rgba(53, 201, 142, .75);
  background: rgba(53, 201, 142, .14);
  outline: none;
}

@keyframes intro-atla-ilerle {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ------------------------------------------------------------- animasyonlar */

/* Delik. İLK %40 BOYUNCA KAPALI KALIR — o süre logonun süresi. Delik
   erken açılırsa arkadaki beyaz site yayları yutar ve logo hiç
   görünmez (ilk denemede olan buydu). Önce logo, sonra delik.

   Ara noktalar GEOMETRİK artıyor (8 → 20 → 52 → 14vmax → 46vmax →
   150vmax). Eskiden 52px'ten doğrudan 46vmax'a atlıyordu: o segmentte
   hız birden ~20 katına çıkıyor, göz bunu "zıplama" olarak okuyor.
   Eğri linear olduğu için yumuşama BU DEĞERLERDEN gelir — birini
   değiştirirken komşusunu da kontrol et. */
/* Delik. İLK %38 BOYUNCA KAPALI KALIR — o süre logonun süresi. Delik
   erken açılırsa arkadaki beyaz site yayları yutar ve logo hiç
   görünmez. Önce logo, sonra delik.

   ⚠ ARTIK `--r` (maske yarıçapı) DEĞİL, `scale` ANİMASYONLANIYOR.
   Sebep yukarıda `.intro__veil` başlığında: maske yarıçapını
   animasyonlamak her karede tüm ekranı yeniden boyuyordu.

   ══════════════════════════════════════════════════════════════════
   ⚠⚠ BU BLOK ELLE YAZILMAZ — FORMÜLDEN ÜRETİLİR
   ══════════════════════════════════════════════════════════════════
   Özkan (6 Eki 2026): "açılış animasyonunda 2-3 kademede tık tık
   ediyor; lacivert bölüme geçerken renk nasıl AKIYORSA öyle olsun."

   Ölçtüm — eski hâlde 7 ara nokta vardı ve segment başına büyüme oranı
   %7,2 ile %18,8 arasında DALGALANIYORDU, üstelik sonda frenliyordu:

     %38→44: oran/%1 = 1.157      %60→68: 1.126
     %44→49:            1.180     %68→77: 1.100
     %49→54:            1.188     %77→87: 1.072   ← sonda fren
     %54→60:            1.168

   Göz büyümeyi ORANSAL algılar: oran her segmentte değişince hız
   sıçrıyor ve beyin bunu "tık" olarak okuyor. Elle konmuş 7 değer = 7
   farklı hız = 6 tık. Özkan'ın saydığı "2-3 kademe" bunların en
   belirgin olanları.

   ÇÖZÜM: her %1'de SABİT ORAN (1.1301 — yani kare başına %13 büyüme).
   Üstel büyüme, göz için düzgün hızlı bir akış demektir.

     scale(%y) = 1.1301 ^ (y - 38)       %38 → 1,   %87 → 400

   Üreten kod (yeniden hesaplamak gerekirse):
     n = 87 - 38; r = (400/1) ** (1/n)
     her y icin: round(r ** (y-38), 2)

   ⚠ BU YÜZDEN 50 AYRI DURAK VAR, 7 DEĞİL. Ara nokta sayısı çok
   olduğunda `linear` easing her segmentte doğru oranı koruyor; az
   olduğunda korumuyor. Durak SİLMEK = tık geri gelir.

   ⚠ SEGMENTE cubic-bezier VERİLMEZ. CSS easing'i HER SEGMENTE ayrı
   uygular, yani her ara noktada ivme sıfırlanır — bu, düzeltmeye
   çalıştığımız kusurun ta kendisi. Easing `linear`, yumuşama
   DEĞERLERDE.

   ⚠ TABAN 1'DEN KÜÇÜK OLMAZ: gölge öğeyle birlikte küçülür ve ekranın
   kenarları açıkta kalır.

   Ölçek → delik yarıçapı: 4,1px × ölçek (öğe yarıçapı 5px, şeffaf
   merkez onun %82'si). Tavan 400 → 1640px; 2560×1440'ın köşegen
   yarısı 1469px, aşıyor ✓ (tavan en BÜYÜK ekrana göre seçilir).

   Nöbetçi: src/site/hareketSozlugu.site.test.ts — her segmentin
   büyüme oranının eşit olduğunu doğruluyor. */
@keyframes intro-delik {
  0%   { transform: scale(1); }
  38%  { transform: scale(1); }
  39%  { transform: scale(1.13); }
  40%  { transform: scale(1.28); }
  41%  { transform: scale(1.44); }
  42%  { transform: scale(1.63); }
  43%  { transform: scale(1.84); }
  44%  { transform: scale(2.08); }
  45%  { transform: scale(2.35); }
  46%  { transform: scale(2.66); }
  47%  { transform: scale(3.01); }
  48%  { transform: scale(3.4); }
  49%  { transform: scale(3.84); }
  50%  { transform: scale(4.34); }
  51%  { transform: scale(4.9); }
  52%  { transform: scale(5.54); }
  53%  { transform: scale(6.26); }
  54%  { transform: scale(7.07); }
  55%  { transform: scale(7.99); }
  56%  { transform: scale(9.03); }
  57%  { transform: scale(10.21); }
  58%  { transform: scale(11.54); }
  59%  { transform: scale(13.04); }
  60%  { transform: scale(14.73); }
  61%  { transform: scale(16.65); }
  62%  { transform: scale(18.81); }
  63%  { transform: scale(21.26); }
  64%  { transform: scale(24.03); }
  65%  { transform: scale(27.15); }
  66%  { transform: scale(30.68); }
  67%  { transform: scale(34.67); }
  68%  { transform: scale(39.18); }
  69%  { transform: scale(44.28); }
  70%  { transform: scale(50.04); }
  71%  { transform: scale(56.55); }
  72%  { transform: scale(63.9); }
  73%  { transform: scale(72.21); }
  74%  { transform: scale(81.61); }
  75%  { transform: scale(92.22); }
  76%  { transform: scale(104.21); }
  77%  { transform: scale(117.77); }
  78%  { transform: scale(133.09); }
  79%  { transform: scale(150.4); }
  80%  { transform: scale(169.96); }
  81%  { transform: scale(192.06); }
  82%  { transform: scale(217.04); }
  83%  { transform: scale(245.27); }
  84%  { transform: scale(277.17); }
  85%  { transform: scale(313.22); }
  86%  { transform: scale(353.96); }
  87%  { transform: scale(400); }
  100% { transform: scale(400); }
}

/* Örtünün sönmesi: delik ekranı aştıktan SONRA.

   ⚠ Sönme süresi %93→%100 iken 2,25 sn'nin yalnız %7'si ≈ 160 ms
   kalıyordu: örtü birden kapanıyor gibi "çat" bitiyordu. Şimdi %84'te
   başlıyor (≈360 ms) ve değer eğrisi öne ağırlıklı — ekranın
   aydınlanması hissedilir bir devamlılıkla oluyor. */
@keyframes intro-ortu-son {
  0%   { opacity: 1; }
  84%  { opacity: 1; }
  92%  { opacity: .55; }
  100% { opacity: 0; }
}

/* `@keyframes intro-disk` ve `@property --disk` KALDIRILDI: yayların
   büyümesi artık `intro-olcek` (transform: scale) ile yapılıyor.
   Ölü bir custom-property animasyonu bırakmak, bir sonraki oturumun
   "yaylar neden büyümüyor" diye yanlış yere bakmasına yol açar. */

/* Yayların kendi dönüşü — SADECE döndürür. Merkezleme negatif margin ile
   yapıldığı için buraya translate yazılmaz; yazılırsa animasyonu
   uygulamayan tarayıcıda merkezleme çöker (3 Eki 2026, mobilde oldu).

   ⚠ `transform` DEĞİL, bağımsız `rotate` özelliği kullanılıyor: büyüme
   `transform: scale()` ile yapıldığı için ikisi aynı özelliğe yazarsa
   biri diğerini tamamen ezer. İş bölümü bilinçli — `rotate`
   desteklenmeyen eski tarayıcıda yalnızca DÖNME kaybolur (kozmetik),
   ölçek çalışmaya devam eder (yapısal). Tersi olsaydı delik yayları
   geçer ve logo ortasından delinmiş görünürdü. */
@keyframes intro-don-ic {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

@keyframes intro-don-ters {
  from { rotate: 360deg; }
  to   { rotate: 0deg; }
}

/* Yayların ve diskin büyümesi — logonun oluşması + patlama.

   ⚠⚠ BU BLOK DA FORMÜLDEN ÜRETİLİR, ELLE YAZILMAZ. Önceki hâlinde 4
   ara nokta vardı ve kural `cubic-bezier(.16,1,.3,1)` ile çağrılıyordu.
   İKİ AYRI SEBEPLE "tık tık" ediyordu:

   1. CSS easing'i HER SEGMENTE AYRI uygular. Yani yaylar %22'de yavaşlıyor,
      %38'de duruyor, %50'de yeniden yavaşlıyor... Her ara noktada ivme
      sıfırlanıyor ve göz bunu durup kalkma olarak okuyor. Easing
      `linear` olmak ZORUNDA; yumuşama DEĞERLERDEN gelir.
   2. 4 ara nokta, oranın sabit kalması için çok az.

   İki fazlı eğri, ikisi de ayrı formülden:

   FAZ 1 — logo oluşuyor (%0–38), ease-out:
     scale(t) = 1 - (1 - 0.10) × (1 - t)^2.6        t = y/38
     Hızlı başlar, %38'e yaklaşırken yavaşlayıp 1'de DURUR. Durma anı
     logonun tanınma anı; buraya kadar yumuşak yavaşlama isteniyor ve
     o yavaşlama değer eğrisinden geliyor, easing'den değil.

   FAZ 2 — patlama (%38–86), sabit oranlı üstel:
     scale(y) = 1.0734 ^ (y - 38)                   %86 → 30
     Delikle AYNI SINIFTAN bir eğri (o 1.1301), sadece daha yavaş —
     böylece yaylar delikten DAİMA önde kalıyor.

   ⚠ YAYLAR DELİKTEN ÖNDE OLMALI, yoksa logo ortasından delinmiş
   görünür. Her %2'de ölçüldü (393px telefon, yayTaban 33px):
     %38 delik 4px / yay 74px    %60 delik 60px / yay 353px
     %50 delik 18px / yay 174px  %84 delik 1136px / yay 1933px
   Hiçbir noktada delik yayı geçmiyor ✓ (yaylar %84'te sönüyor).
   Bu iki eğrinin oranını değiştiren biri o tabloyu YENİDEN hesaplamalı.

   Nöbetçi: src/site/hareketSozlugu.site.test.ts — hem oran eşitliğini
   hem de yay > delik ilişkisini doğruluyor. */
@keyframes intro-olcek {
  0%   { transform: scale(0.1); }
  2%   { transform: scale(0.218); }
  4%   { transform: scale(0.326); }
  6%   { transform: scale(0.424); }
  8%   { transform: scale(0.513); }
  10%  { transform: scale(0.593); }
  12%  { transform: scale(0.664); }
  14%  { transform: scale(0.728); }
  16%  { transform: scale(0.783); }
  18%  { transform: scale(0.83); }
  20%  { transform: scale(0.871); }
  22%  { transform: scale(0.905); }
  24%  { transform: scale(0.933); }
  26%  { transform: scale(0.955); }
  28%  { transform: scale(0.972); }
  30%  { transform: scale(0.984); }
  32%  { transform: scale(0.993); }
  34%  { transform: scale(0.997); }
  36%  { transform: scale(1); }
  38%  { transform: scale(1); }    /* logo durur — tanınma anı */
  40%  { transform: scale(1.15); }
  42%  { transform: scale(1.33); }
  44%  { transform: scale(1.53); }
  46%  { transform: scale(1.76); }
  48%  { transform: scale(2.03); }
  50%  { transform: scale(2.34); }
  52%  { transform: scale(2.7); }
  54%  { transform: scale(3.11); }
  56%  { transform: scale(3.58); }
  58%  { transform: scale(4.13); }
  60%  { transform: scale(4.75); }
  62%  { transform: scale(5.48); }
  64%  { transform: scale(6.31); }
  66%  { transform: scale(7.27); }
  68%  { transform: scale(8.38); }
  70%  { transform: scale(9.65); }
  72%  { transform: scale(11.12); }
  74%  { transform: scale(12.82); }
  76%  { transform: scale(14.77); }
  78%  { transform: scale(17.02); }
  80%  { transform: scale(19.61); }
  82%  { transform: scale(22.6); }
  84%  { transform: scale(26.04); }
  86%  { transform: scale(30); }
  100% { transform: scale(30); }
}

/* Yaylar delikle birlikte açılır ve delik ekranı aşarken söner. */
@keyframes intro-yay-ac {
  0%   { opacity: 0; }
  11%  { opacity: 1; }
  58%  { opacity: .85; }
  84%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Çekirdek: logonun ortasındaki beyaz daire. Büyümez — yaylar açılırken
   o küçük kalır, sonra söner. Büyütürsek yayları yutuyor (ilk denemede
   olan buydu: ekranda logo değil düz beyaz bir top görünüyordu).

   ⚠ DELİK AÇILMAYA BAŞLADIĞI AN (%38) SÖNMÜŞ OLMALI. Eskiden %58'de
   hâlâ opacity .5 idi: delik o sırada açık olduğu için arkadaki BEYAZ
   site görünüyor, çekirdek de beyaz — iki beyaz üst üste biniyordu ve
   merkez "yıkanmış" görünüyordu (6 Eki 2026, mobilde). Artık çekirdek
   logonun ömrüyle sınırlı: %32'de sönmeye başlar, %40'ta biter. */
@keyframes intro-cekirdek {
  0%   { opacity: 0; transform: scale(.2); }
  10%  { opacity: 1; transform: scale(1); }
  28%  { opacity: 1; transform: scale(1.35); }
  36%  { opacity: .35; transform: scale(1.7); }
  40%  { opacity: 0; transform: scale(2); }
  100% { opacity: 0; transform: scale(2); }
}

/* Marka yazısı. transform'da -50% KORUNMALI: .intro__mark absolute ve
   left:50% ile konumlanıyor, keyframe transform'u ezdiği için -50%
   düşerse yazı sağa kayar. */
@keyframes intro-yazi {
  0%   { opacity: 0; transform: translate(-50%, 10px); }
  15%  { opacity: 1; transform: translate(-50%, 0); }
  38%  { opacity: 1; transform: translate(-50%, 0); }
  56%  { opacity: 0; transform: translate(-50%, -8px); }
  100% { opacity: 0; transform: translate(-50%, -8px); }
}

/* "Atla" düğmesi de left:50% + translateX(-50%) ile ortalanıyor. */
@keyframes intro-atla {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  38%  { opacity: 1; }
  56%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Yıldızlar: artık yalnızca OPACITY değişiyor. Önce `transform: scale()`
   de vardı; maskelenmiş bir katmanın içinde ölçeklenen 7 gradient, her
   karede büyük bir yüzeyin yeniden boyanması demekti. */
@keyframes intro-yildiz {
  0%   { opacity: 0; }
  20%  { opacity: .9; }
  70%  { opacity: .5; }
  100% { opacity: 0; }
}

/* `@property --r` KALDIRILDI: delik artık maske yarıçapıyla değil
   `transform: scale()` ile açılıyor (bkz. `.intro__veil`), yani
   animasyonlanan bir custom property kalmadı. Ölü bir `@property`
   bırakmak, bir sonraki oturumun "delik neden büyümüyor" diye yanlış
   yere bakmasına yol açar — aynı sebeple `--disk` de kaldırılmıştı. */

/* Bitti: katman yoldan çekilir. display:none yerine visibility —
   animasyon ortasında kesilirse ekranda iz bırakmasın. */
.intro--bitti {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
}

/* Intro ekrandayken sayfa kaydırılmasın; kalkınca serbest. */
html.intro-acik,
html.intro-acik body {
  overflow: hidden;
}

/* Hareket azaltma talebi: intro hiç oynatılmaz. Katman, JS'in onu
   kaldırmasını beklemeden görünmez olur. */
@media (prefers-reduced-motion: reduce) {
  .intro {
    display: none !important;
  }
  html.intro-acik,
  html.intro-acik body {
    overflow: auto;
  }
}