feat(tema): sayfa geçişi kısa ve hafif (600 ms), logo dönüşümü geçiş bitince oynar; DESIGN §4.22 logo morph

- Sıra: önce sayfa geçişi biter, kısa nefes (80 ms), sonra logo güneşe/aya
  dönüşür; üst üste binmez. Geçiş iptal olsa da logo doğru biçime dönüşür.
- View Transitions olmayan tarayıcıda da logo dönüşür.
- DESIGN.md §4.22: logo biçim dönüşümü tasarım diline eklendi (biçim tablosu,
  koreografi, kurallar); §6 hareket ve §7 Yap/Yapma satırları.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/tasarim/DESIGN.md

@@ -135,12 +135,12 @@ Seçici `src/components/tema-secici.tsx` (footer'da), sağlayıcı `src/componen
 
 **Geçiş ve kısayol (7 Eki 2026; son hâli 9 Eki):** tema değişimi anlık değildir; yeni
 tema header'daki logodan **yumuşak bir halka** gibi açılır: kenarı keskin değil, geniş ve
-tüylü (ışık yayılır gibi), 1100 ms, yumuşak kalkıp yumuşak durur. Aynı anda logonun kareleri
+tüylü (ışık yayılır gibi), kısa ve hafif: 600 ms. **Geçiş bitince** logonun kareleri
 yeni temanın biçimine dönüşür: koyuya geçişte şeftali kare hilale, mavi kare hilalin iki ucunun
 ortasındaki yıldıza (turuncu söner); açığa geçişte turuncu kare güneşe, şeftali kare halesine. Kısa bir an durur, yeniden
 logoya toplanır (`animasyonlu-mark.tsx` `temaSekli`, 1,7 sn; yalnız header'daki logo; hover döngüsünden
 önceliklidir, biçim bitince imleç üzerindeyse döngü kaldığı yerden değil yerinden sürer). Tema
-seçicinin ikonları aynı biçimlerin durağan hâlidir (`tema-ikonu.tsx`: güneş, ay, Sistem için
+seçicinin ikonları aynı biçimlerin durağan hâlidir (ayrıntı ve kurallar §4.22) (`tema-ikonu.tsx`: güneş, ay, Sistem için
 logonun üç karesi); burada lucide ikonu kullanılmaz. View Transitions + radyal degrade
 maskesi: `src/lib/tema-gecisi.ts`, `globals.css` `.kt-tema-gecis`; hareket azaltılmışsa düz
 değişir. Denenip bırakılanlar: logo biçimli maske ("logo içinde logo"), düz crossfade, piksel
@@ -714,6 +714,41 @@ genişletilebilir olmalı; UI için prompt-kit kullan."
   zaman yazılıdır (§2.2). Sohbet ilerlese de kalır. Yeni bir liste uyarısı gerekince
   `listeUyarilari`'na eklenir, sayfaya yeni kutu açılmaz.
 
+### 4.22 Logo biçim dönüşümü (morph) — `AnimasyonluMark` `temaSekli`, `tema-ikonu.tsx`
+
+Bilal'in kararı (9 Eki 2026): logonun üç karesi yalnız süs değildir; **bir durumu anlatmak
+için kısa bir an başka bir biçime dönüşüp geri toplanabilir.** İlk ve şimdilik tek kullanım
+tema değişimidir (§2.3). Bu, markanın yumuşak ve oyunsu tarafının imza hareketidir; piksel
+imzası (§1) durağan dokuysa bu onun canlı karşılığıdır.
+
+**Biçimler** (180'lik logo kutusunda; renkler logonun kendi renkleri, iki temada aynı):
+
+| Durum | Mavi kare | Şeftali kare | Turuncu kare |
+|---|---|---|---|
+| Açık tema: **güneş** | merkezde söner | hale: büyük, yarı saydam daire | güneş: küçük dolu daire |
+| Koyu tema: **ay** | yıldız: hilalin iki sivri ucunun tam ortasında | hilal: sırtı solda | yıldızın yerinde söner |
+| Sistem (yalnız ikon) | logo karesi | logo karesi | logo karesi |
+
+Simetri kasıtlıdır: güneşte mavi, ayda turuncu sahneden çekilir. Hilal, kareyi kesen ikinci
+bir şekille değil karenin kendi iç gölgesiyle çizilir (zemin rengine bağlı kalmaz).
+
+**Koreografi:** toplam 1,7 sn — %30'da biçim tamam, %70'e kadar durur, sonra logoya döner.
+Kareler yuvarlanırken yer değiştirir ve boy değiştirir; sekme yok (§6). Sayfa geçişiyle
+**üst üste binmez**: önce sayfa geçişi biter (600 ms), kısa bir nefes, sonra logo dönüşür.
+Hover döngüsünden önceliklidir; biçim bitince imleç hâlâ üzerindeyse hover yerinden sürer.
+"Hareketi azalt" açıksa dönüşüm oynamaz.
+
+**Durağan hâli:** tema seçicinin ikonları aynı biçimlerdir (`tema-ikonu.tsx`). Logo ile ikon
+aynı geometriyi kullanır; biri değişirse öbürü de aynı commit'te değişir.
+
+**Kurallar:**
+- Dönüşüm yalnız header'daki logoda oynar; aynı ekranda iki logo birden dönüşmez.
+- Bir **durum değişimini** anlatır (tema gibi), dekor olarak döngüye alınmaz, sayfa
+  açılışında oynatılmaz.
+- Yeni bir biçim eklenecekse üç kareden ve logonun üç renginden çıkar; dördüncü şekil,
+  yeni renk, çizgi ikon eklenmez. Her biçimin durağan ikon karşılığı da yazılır.
+- Biçim logonun kendi alanına sığar (x 27–151): sağındaki "KolayTercih" yazısına değmez.
+
 ## 5. Yerleşim
 
 ### 5.1 Genel
@@ -783,6 +818,8 @@ Hareket kuralları (Apple, `motion/react`):
 - Kaydırmaya bağlı tetik `IntersectionObserver` ile (kaydırma dinleyicisi değil).
 - "Hareketi azalt": kayma/yay yok, yalnız opaklık (`useReducedMotion`,
   `motion-reduce:transition-opacity`).
+- Logo kareleri bir durumu anlatmak için kısa bir an başka biçime dönüşebilir (§4.22); sayfa
+  geçişiyle üst üste binmez, sırayla oynar.
 
 ## 7. Yap / Yapma
 
@@ -800,6 +837,7 @@ Hareket kuralları (Apple, `motion/react`):
 | Gösterge kareleri masonry (kaymış sütun, farklı boy) | Hizalı eşit ızgara; 8 px'lik "neredeyse hizalı" kaymalar |
 | Liste satırında ad sarar, sayı alt satıra iner | `truncate` ile yarım ad; 32 px satır butonu |
 | Hareket: `Reveal`, piksel ısısı, `kt-unblur`, sekmesiz yay; `animate-ping` yalnızca "şu anda canlı" noktasında | Her elemanda `fade-up`, `whileHover scale 1.05`, `animate-bounce` |
+| Tema ikonu ve logo dönüşümü: logonun üç karesinden güneş / ay (§4.22) | Tema seçicide lucide `Sun`/`Moon`; logoyu döngüde sürekli dönüştürmek |
 | Başlık `font-heading`, vurgu `font-bricolage` | Inter/Roboto/serif, tek kelimelik BÜYÜK HARF etiket, 10–11 px yazı |
 | Risk rengi + metin etiketi; tür ayrımı ikonla | Renk tek başına, "yerleşirsin" gibi vaat cümlesi |
 | Üç kart yalnızca üç gerçek öğe varsa | Hero + üç kart iskeleti refleksi |