fix(tema): geçiş maskesinde logo görünmüyordu — SVG katmanları CSS'e gömüldü; alttan uçuş + boşluk kapanışı koreografisi

Chrome, view-transition pseudo elemanında dosyadan url() ile yüklenen ikinci
maske katmanını (boyu 0'dan büyükken) tümden şeffaf çiziyor; iki SVG de
data URI olarak globals.css'e gömüldü. Koreografi (önceki oturum): işaret
ekranın altından ortaya süzülür, merkezden büyür, kareler arası boşluklar
dolu çizimle merkezden dışa kapanır; motion sürer. Geçici console tanıları
kaldırıldı, iptal edilen geçişin ready reddi yakalanıyor.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

src/app/globals.css

@@ -478,21 +478,39 @@
 }
 
 /* Tema geçişi (DESIGN.md §2.3, lib/tema-gecisi.ts): tema değişirken yeni
-   görüntü, header'daki KolayTercih işaretinin biçiminde logodan büyüyerek
-   açılır. Eski görüntü yerinde durur; yeni görüntünün maskesi iki katman:
-   (1) işaretin SVG'si, merkezi --kt-tema-x/y'de, kenarı 0 → --kt-tema-son;
-   (2) aynı merkezden biraz geç kalkan bir daire — işaretin kareleri arasındaki
-   boşlukları kapatır ki geçiş sonunda eski temadan iz kalmasın. Hareket
-   azaltılmışsa JS geçişi hiç başlatmaz, tema düz değişir. */
+   görüntü, KolayTercih işaretinin biçiminde önce ekranın ALTINDAN ortaya
+   süzülür, sonra merkezden büyüyerek ekranı kaplar. Eski görüntü yerinde
+   durur; yeni görüntünün maskesi üç katman (hepsi `add` ile toplanır,
+   mask-composite varsayılanı add — bu yüzden sıralama yalnızca okunurluk
+   içindir):
+   (1) işaretin NORMAL çizimi (kolay-tercih-mark.svg'nin gömülü kopyası — kareler arası boşluk
+   görünür, logo logonun kendisi gibi durur), merkezi --kt-tema-x/y'de,
+   boyu --kt-tema-kenar: uçuş ve büyüme boyunca bu görünür;
+   (2) aynı geometride BOŞLUKLARI DOLU çizim (kolay-tercih-mark-dolu.svg),
+   boyu --kt-tema-kenar × --kt-tema-kapanis (0 → 1): logo en büyük haline
+   ulaşmaya yakın dolu çizim merkezden dışa doğru büyür, kareler arası
+   boşlukları yumuşak biçimde kapatır;
+   (3) tam ekran dolgu: --kt-tema-dolgu (0 → 1) ile işaret ekranı tam
+   kapsadıktan sonra dış çentiklerde kalan eski zeminin son anda dolması.
+   Yuvarlak büyüme yok — logo ekranı kaplayınca geçiş tamamlanır.
+   Konum, boy ve dolgular motion ile sürülür (lib/tema-gecisi.ts); buradaki
+   kt-tema-omur yalnızca geçişin pseudo elemanı motion bitene kadar yaşasın
+   diye durur (süre --kt-tema-sure, JS'den gelir). Hareket azaltılmışsa JS
+   geçişi hiç başlatmaz, tema düz değişir. */
 @property --kt-tema-kenar {
   syntax: "<length>";
   inherits: true;
   initial-value: 0px;
 }
-@property --kt-tema-yaricap {
-  syntax: "<length>";
+@property --kt-tema-kapanis {
+  syntax: "<number>";
   inherits: true;
-  initial-value: 0px;
+  initial-value: 0;
+}
+@property --kt-tema-dolgu {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
 }
 
 .kt-tema-gecis {
@@ -508,40 +526,42 @@
 }
 .kt-tema-gecis::view-transition-new(root) {
   z-index: 2;
+  /* İki SVG de data URI olarak gömülü, dosyadan url() ile DEĞİL: Chrome'da
+     view-transition pseudo elemanı dosyadan yüklenen ikinci bir maske
+     katmanını (boyu 0'dan büyük olduğu an) tümden şeffaf çiziyor — logo
+     hiç görünmüyordu (8 Eki 2026 tanısı). Gömülü hâlde iki katman da
+     doğru birleşiyor. Çizimler public/kolay-tercih-mark.svg ve
+     public/kolay-tercih-mark-dolu.svg ile aynı geometridir; oradaki dosya
+     değişirse burası da güncellenir. */
   mask-image:
-    url("/kolay-tercih-mark.svg"),
-    radial-gradient(
-      circle at var(--kt-tema-x) var(--kt-tema-y),
-      #000 calc(var(--kt-tema-yaricap) - 1px),
-      transparent var(--kt-tema-yaricap)
+    url("data:image/svg+xml,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20180%20180%22><rect%20x=%2227%22%20y=%2256%22%20width=%2277%22%20height=%2257%22%20rx=%2213%22/><rect%20x=%2291%22%20y=%2229%22%20width=%2256%22%20height=%22122%22%20rx=%2213%22/></svg>"),
+    url("data:image/svg+xml,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20180%20180%22><rect%20x=%2227%22%20y=%2256%22%20width=%2257%22%20height=%2257%22%20rx=%2213%22/><rect%20x=%2291%22%20y=%2229%22%20width=%2256%22%20height=%2256%22%20rx=%2213%22/><rect%20x=%2291%22%20y=%2295%22%20width=%2256%22%20height=%2256%22%20rx=%2213%22/></svg>"),
+    linear-gradient(
+      rgb(0 0 0 / var(--kt-tema-dolgu)),
+      rgb(0 0 0 / var(--kt-tema-dolgu))
     );
   mask-repeat: no-repeat;
   mask-size:
+    calc(var(--kt-tema-kenar) * var(--kt-tema-kapanis))
+      calc(var(--kt-tema-kenar) * var(--kt-tema-kapanis)),
     var(--kt-tema-kenar) var(--kt-tema-kenar),
     100% 100%;
   mask-position:
+    calc(var(--kt-tema-x) - var(--kt-tema-kenar) * var(--kt-tema-kapanis) / 2)
+      calc(var(--kt-tema-y) - var(--kt-tema-kenar) * var(--kt-tema-kapanis) / 2),
     calc(var(--kt-tema-x) - var(--kt-tema-kenar) / 2)
       calc(var(--kt-tema-y) - var(--kt-tema-kenar) / 2),
     0 0;
-  animation:
-    kt-tema-isaret 0.9s cubic-bezier(0.65, 0, 0.35, 1) both,
-    kt-tema-daire 0.9s cubic-bezier(0.65, 0, 0.35, 1) both;
+  /* Değeri değişmeyen ama gerçek bir animasyon: view transition, üzerindeki
+     tüm animasyonlar bitene kadar kalkmaz; maskeyi JS (motion) sürerken
+     ömrü bu tutar. */
+  animation: kt-tema-omur var(--kt-tema-sure, 1.05s) linear both;
 }
-@keyframes kt-tema-isaret {
+@keyframes kt-tema-omur {
   from {
-    --kt-tema-kenar: 0px;
+    opacity: 1;
   }
   to {
-    --kt-tema-kenar: var(--kt-tema-son);
-  }
-}
-/* Daire işaretin ardından gelir: ilk %35'te sıfırda bekler. */
-@keyframes kt-tema-daire {
-  0%,
-  35% {
-    --kt-tema-yaricap: 0px;
-  }
-  100% {
-    --kt-tema-yaricap: var(--kt-tema-son);
+    opacity: 1;
   }
 }