feat(v2): 9–10 Ekim çalışma ağacı — deneyim dili 1. dalga, PWA manifest, revizyon niyet modeli, listem/tadımlık bileşen denetimi

9–10 Ekim oturumlarının commit'lenmemiş işi tek parça alındı
(raporlar: docs/ekip-raporlari/2026-10-09, 2026-10-10):
- Landing deneyim dili 1. dalga: sayfa geçişi (ViewTransition), piksel morf/şerit,
  sorun sahneleri, adım akışı, sayan sayı, mobil menü, adım göstergesi, logoya tepki;
  DESIGN.md §11 ve AGENTS.md kuralları, tasarım denetimine yeni kurallar
- Tema: tema ikonu, D kısayolu, tema geçişi
- PWA: manifest.ts ve ikonlar
- Danışman: revizyon niyet modeli (OPENROUTER_NIYET_MODEL), sohbet geçmişi, soru API'si
- /listem ve /sonuc tadımlığı bileşen denetimi düzeltmeleri
- eslint: .venv-tts/ yok sayılır

tsc, eslint ve tasarım denetimi sıfır hata.

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

docs/tasarim/DESIGN.md

@@ -218,21 +218,29 @@ bir dosyaya (`src/components/…`) çıkarılıp iki yer de oradan kullanır.
 
 ### 4.1 Buton — `src/components/ui/button.tsx`
 - Her buton `rounded-full`; `h-9` varsayılan, `h-11`/`h-12` funnel CTA'ları (44 px dokunma hedefi), `size-9` ikon butonu.
-- Odak: `focus-visible:ring-3 focus-visible:ring-ring/50`; basınca `active:translate-y-px`.
-- **Turuncu CTA (kanonik):**
+- Odak: `focus-visible:ring-3 focus-visible:ring-ring/50`; basınca `active:translate-y-px`
+  (`cta` ve `ikincil` varyantlarında bunun yerine `active:scale-[0.97]`).
+- **Turuncu CTA (kanonik) — `variant="cta"`** (9 Eki 2026'dan itibaren varyanttır; sınıf dizisi
+  elle yazılmaz, denetim `elle-cta` ile uyarır):
   ```tsx
-  <Button size="lg" className="cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600">
+  <Button size="lg" variant="cta">
     Listemi oluştur
     <ArrowRight className="size-4" aria-hidden />
   </Button>
   ```
-  Metin önce, ok sonda. Başta ikon yok. `Sparkles` yok. İstenirse `active:scale-[0.97]`.
-- **İkincil gezinme butonu** ("Tüm sıralamayı gör →"):
+  Varyantın ürettiği: `cursor-pointer bg-orange-500 text-white hover:bg-orange-600
+  transition-[background-color,transform] duration-200 active:scale-[0.97]`. Metin önce, ok
+  sonda. Başta ikon yok. `Sparkles` yok. Kullanım yerinde yalnız yerleşim sınıfı eklenir
+  (`w-full sm:w-auto`, `mt-6`); yükseklik, renk, geçiş yazılmaz.
+- **İkincil gezinme butonu — `variant="ikincil"`** ("Tüm sıralamayı gör →"):
   ```tsx
-  <Button asChild size="lg" variant="outline" className="cursor-pointer px-6 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.97]">
+  <Button asChild size="lg" variant="ikincil">
     <Link href="…">Tüm sıralamayı gör<ArrowRight className="size-4" aria-hidden /></Link>
   </Button>
   ```
+  Ürettiği: outline tabanı + `cursor-pointer hover:border-orange-500 hover:bg-orange-50/60
+  hover:text-orange-500 transition-[background-color,border-color,color,transform] duration-150
+  active:scale-[0.97]`.
 - Sessiz: `variant="ghost"`; link görünümü: `variant="link"`.
 
 ### 4.2 Rozet (bölüm başlığı üstündeki kapsül) — `SectionEyebrow`, `src/components/pixel-decor.tsx`
@@ -658,7 +666,7 @@ sihirbaz modalı içindir; yeni bir ayrıntı için `Dialog` açılmaz.
   açılır ki veri gelince sayfa yalnız büyüsün, konum sıçramasın. "Yıllara göre" yıl tablosu
   kaldırıldı (API `gecmis` alanı duruyor; backlog). Açılış koreografisi `AcilisSahnesi`
   kartsız modu (`src/components/ui/acilis-sahnesi.tsx`, `hazir={durum === "hazir"}`): veri
-  gelince başlığın altında üç logo karesi (`data-logo` kabı, `relative mx-auto h-16 w-16`)
+  gelince başlığın altında üç logo karesi (`data-logo` kabı, `relative mx-auto size-44`; akademik göstergelerdeki logoyla aynı ölçek)
   belirir, kısa durur, sönerek kaybolur (scale 0.6 + opacity 0; kap sıfır boya iner), içerik
   blokları (`data-sonra`: künye, kontenjan türleri, netler, koşullar, istihdam, üniversite,
   kaynak) 0,05 s arayla bulanıktan netleşir; toplam ≈ 1,2 s (kareler 0,1–0,2 s'de belirir,
@@ -669,6 +677,14 @@ sihirbaz modalı içindir; yeni bir ayrıntı için `Dialog` açılmaz.
   göstergeler çekmecesi (§4.9) aynı bileşenin kartlı modunu kullanır (her açılışta oynar).
   Gövde kaydırılınca içerik tutamaç ve çarpının altına maskesiz girmesin diye `AltSayfaGovde`
   üst kenarında 20 px saydam → dolu `mask-image` var (§4.10; tüm çekmeceler).
+- **10 Eki 2026 — büyük logo, logo → başlık (morph):** Bilal: "logo küçücük kalmış; logolar
+  küçülürken başlıktaki yazıya morph olsun." Logo kabı `size-44` (akademik göstergelerdeki
+  logoyla aynı ölçek). Kareler sönmek yerine küçülerek (scale 0.2) başlık yazısının üç eşit
+  dilimine uçar ve uçuşun son yarısında solar; başlık (`data-logo-hedef`, `AcilisSahnesi` sözleşmesi) o sırada
+  bulanıktan netleşir. Başlık veri gelene dek `opacity-0`'dır (yer tutar, sıçrama olmaz);
+  önbellekli açılışta, hata durumunda ve "hareketi azalt"ta doğrudan görünür. Aynı gün denenen
+  "üç özet karesi" (taban sırası / puan / kontenjan kartları) beğenilmedi, geri alındı: bu
+  çekmecede kart yok kuralı duruyor.
 
 ### 4.20 Danışman sohbeti — `sohbet-client.tsx`, `arac-pilleri.tsx`
 - **Soru formu hazırlanırken** (7 Eki 2026): `soru_sor` aracı tamamlanana dek cevap iskeleti değil
@@ -884,10 +900,17 @@ kurallarıyla aynı olmalı (`/meraklisina` şemasıyla çelişmez).
   `font-sans text-base font-semibold text-slate-400`, etiket `text-sm font-semibold
   text-slate-500`. Çerçeve, zemin, ayırıcı çizgi ve sayının yanında piksel süs **yok**.
   lg altında tek sütun, her şey ortalı: animasyon → sayılar (sm'de üçü yan yana) → dürüstlük notu.
-- **İşaret site başlığındaki logonun animasyonunu oynar** (`AnimasyonluMark`, varsayılan "rota":
-  kareler sırayla birbirinin yerine süzülür). Başlıkta üzerine gelince, burada ekrandayken
-  sürekli (`oynat`); ekrandan çıkınca kareler yerine oturur. Nabız + tüm karoyu döndüren eski
-  hâl (`kt-akis-donus`) yanlıştı ve kaldırıldı (Bilal, 7 Eki 2026). Hareketi azalt'ta durağan.
+- **Ortadaki işaret danışmandır: nabız atar, sonra çıktıya dönüşür** (Bilal, 11 Eki 2026:
+  "logo morph ile ikonlara dönüşsün; belirli süre DanışmanlaKonuş'un animasyonu oynayıp morph
+  olsun, şu ankini kaldır"). İşaret ≈3 sn DanışmanlaKonuş başlığındaki gibi yerinde nabız atar
+  (`varyant="nabiz"`: danışman düşünüyor), sonra üç kare girdilerden çıkan şeye dönüşür, ≈1,3 sn
+  durur ve logoya toplanır (toplam 2,5 sn); nabız yerinden sürer, sıra bir sonraki biçime
+  geçer. Sıra paketin verdiğidir: **liste** (deste) → **trend** (yükselen üç çubuk) → **sohbet**
+  (iki balon). Biçimler §4.34'tekilerle aynı dilde, üç kareden ve logonun üç renginden
+  (`AnimasyonluMark` `bicimler`). Yalnız ekrandayken oynar; ekrandan çıkınca kareler yerine
+  oturur. Hareketi azalt'ta durağan logo. Eski "rota" (kareler birbirinin yerine süzülür) bu
+  karodan kaldırıldı; ondan önceki nabız + tüm karoyu döndüren hâl (`kt-akis-donus`) de yanlıştı
+  (Bilal, 7 Eki 2026).
 
 ### 4.29 Program duvarı — `ProgramDuvari`, `src/features/pazarlama/components/program-duvari.tsx`
 **Şu an sayfada kullanılmıyor:** ana sayfa "Sorun" bölümünden 7 Eki 2026'da çıkarıldı (Bilal:
@@ -907,7 +930,9 @@ Ana sayfa "Katalog ücretsiz" bölümü: en çok aranan bölüm ve şehir sayfal
 (§4.12 kimlik hapı, `GraduationCap` / `MapPin`, hover §2.1; her üçüncü hap bir kademe iri).
 Bölüm ekrana girince haplar yukarıdan hafif eğik düşüp oturur (tek, hafif sekme — düşen nesne,
 §6); imleç gezdikçe her hap kendi derinliğinde en çok 18 px süzülür, arkadaki piksel kareler
-ters yöne kayar. Haplar akışla dizilir (375 px'te üst üste binmez) ve SSR'da görünür linktir;
+ters yöne kayar. Kareler odak dışıdır (`blur-xs`, 4 px — Bilal, 11 Eki 2026): net olan yalnız
+haplardır; bulanıklık karenin kendisine yazılır, kaba değil (kayarken yeniden çizilmesin).
+Haplar akışla dizilir (375 px'te üst üste binmez) ve SSR'da görünür linktir;
 yalnız katalogda sayfası olan adlar çizilir. Dokunmatikte süzülme yok; hareketi azalt'ta yalnız
 belirir. Esin React Bits "Parallax Pills"; kod bizim.
 
@@ -931,6 +956,15 @@ pikseli, `-` silik piksel, `o` turuncu vurgu.
   katalog kartlarına sahne konmaz (§4.8: özet kartının içinde piksel seri "çok boğdu").
 - `ton="dolgun"` aynı dokunun koyu hâlidir (opaklık 0,64–1); okunması gereken şekiller (rakam)
   için. Sahne `aria-hidden`'dır; anlamı başlık taşır.
+- **Ana sayfadaki üç sahne canlıdır** (10 Eki 2026, `sorun-sahneleri.tsx`, ilkel §4.38): resim
+  aynı ızgaradır, kartın cümlesini hareketle söyler. "24 tercih" → hepsi soğur, sonra **tam 24**
+  kare tek tek ısınır; her turda başka 24 (hangi 24? — her seferinde başka ihtimal). "Geçen yılın
+  puanı" → çubuklar bir yuva sola kayar, sağdan başka boyda yeni yıl girer, turuncu tepe hep en
+  yeni yıldadır. "Danışman lüks" → merdiven basamak basamak kurulur, turuncu tepe tırmanır.
+  Sunucu HTML'i ve hareketi azalt eski durağan resmi gösterir. **Sahneler sırayla konuşur**
+  (§11.2-3): modül seviyesindeki tek orkestra aynı anda yalnız birini oynatır (iki başlangıç
+  arası ≥ 2,4 sn, aynı sahne ≥ 6,6 sn dinlenir). Karta imleç gelince ya da dokununca o sahne
+  hemen oynar (`data-sahne-karti`).
 
 ### 4.32 Adım rakamları — `PixelRakam`, `src/components/pixel-decor.tsx`
 Ana sayfa "Nasıl çalışır"ın üç adımı **kartsızdır** (Bilal, 7 Eki 2026, §4.31'deki istek): adım
@@ -941,6 +975,20 @@ birbirine bağlanır (`h-0.5 rounded-full bg-slate-200`, rakamın ortasında; ve
 çizgiyle aynı dil). Telefonda adımlar alt alta, çizgisiz. Yapı `ol > li`; rakam `aria-hidden`,
 başlığın başında `sr-only` "1. adım:". Turuncu numara rozeti, ikon ve kart çerçevesi kaldırıldı.
 Yeni bir rakam gerekirse ızgarası `RAKAMLAR`'a eklenir (bugün 1–3).
+- **Rakam, adımının biçimine dönüşüp geri toplanır** (10 Eki 2026, `adim-akisi.tsx`, ilkel
+  §4.38; logonun yaptığının aynısı, §4.34): `1` → sıra şeridi (dokuz kare tek sırada, turuncu
+  olan sensin — `PixelSira` dili), `2` → yıl başına bir çubuk (`VERI_YIL_SAYISI` kadar, en çok
+  6; en yenisinin tepesi turuncu), `3` → 6×4 = 24 kare (kapanıştaki piksel listenin dizilimi).
+  Rakamın pikselleri en yakın biçim hücresine süzülür, artanlar yerinde belirir/söner. Biçim
+  yeni şekil ya da renk icat etmez: aynı pikseller, aynı mavi doku, tek turuncu vurgu.
+- **Sıra:** bölüm ekrana girince `1` biçimine döner (≈1,3 sn), geri toplanırken 1→2 çizgisi
+  maviyle dolar (§4.35'teki dolum), sonra `2`, çizgi, `3`. Bir adım yalnız kendisi ekrandaysa
+  ve öncekiler bittiyse oynar: geniş ekranda peş peşe, telefonda her biri görününce. Bir kez
+  oynar; sonra imleç adımın üstündeyken biçim açık kalır, telefonda dokununca bir kez oynar.
+  Biçimdeyken ısı fırçası kapalıdır (turuncu kare anlam taşır). Hareketi azalt'ta rakamlar
+  durağan, çizgiler dolu.
+- Sahne 11×7 hücredir (rakam ortada, biçim iki yanına taşar); bu yüzden çizgi
+  `left-[calc(50%+5.25rem)] w-[calc(100%-8.5rem)]` ile rakamdan biraz açıkta başlar.
 
 ### 4.33 Soru formu — `questionnaire.tsx` (shadcn Questionnaire) + `SohbetAnketi`, `sohbet-anketi.tsx`
 shadcn'in `questionnaire` kayıt öğesi (ilkel `@shadcn/react/questionnaire`) sitenin diline çevrildi:
@@ -958,11 +1006,193 @@ Sorular arası geçiş **sihirbaz adım geçişiyle birebir aynı** (7 Eki 2026)
 kaynak `src/lib/adim-gecisi.ts` (`adimGecisiVaryantlari`, `adimGecisi`); yön index'ten türer. Pasif
 sorular DOM'da kalır (mutlak/saydam/`inert`) ki FormData toplanmaya devam etsin.
 
+### 4.34 Logo biçim dönüşümü (morph) — `AnimasyonluMark`, `tema-ikonu.tsx`, `src/lib/logo-tepkisi.ts`
+
+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.** 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.
+İlk kullanım tema değişimiydi; aynı gün Bilal "logo durumlara tepki versin" dedi ve dönüşüm
+kullanıcının kendi yaptığı üç ana da açıldı.
+
+**Biçimler** (180'lik logo kutusunda; renkler logonun kendi renkleri, iki temada aynı):
+
+| Durum | Tetik | Mavi kare | Şeftali kare | Turuncu kare |
+|---|---|---|---|---|
+| Açık tema: **güneş** | tema değişti | merkezde söner | hale: büyük, yarı saydam daire | güneş: küçük dolu daire |
+| Koyu tema: **ay** | tema değişti | yıldız: hilalin iki ucunun ortasında | hilal: sırtı solda | yıldızın yerinde söner |
+| **Kürsü** | sıralama girildi (`"sira"`) | orta, en yüksek basamak | sol, kısa basamak | sağ, en kısa basamak |
+| **Deste** | listeye program eklendi (`"ekle"`) | altta satır | ortada satır | üstte satır (yeni gelen) |
+| **Tamam** | liste 24'e doldu (`"tamam"`) | solda | ortada | sağda — üç eşit kare tek sıraya dizilir |
+| **Trend** | veri akışı sahnesi (§4.28) | ortada, orta boy çubuk | solda, kısa çubuk | sağda, en yüksek çubuk (en yeni yıl) |
+| **Sohbet** | veri akışı sahnesi (§4.28) | sol üstte balon (danışman) | turuncunun yerinde söner | sağ altta balon (sen) |
+
+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:** tema biçimi toplam 1,7 sn — %30'da biçim tamam, %70'e kadar durur, sonra logoya
+döner. Kullanıcı eylemi biçimleri daha kısadır (toplam ≈1,1 sn; aynı duraklar), çünkü eylem
+tekrarlanır. Kareler yuvarlanırken yer ve boy değiştirir; sekme yok (§6). Sayfa geçişiyle
+**üst üste binmez**: önce tema geçişi biter (600 ms), kısa bir nefes (80 ms), sonra logo
+dönüşür. Hover döngüsünden önceliklidir; biçim bitince imleç hâlâ üzerindeyse hover yerinden
+sürer. Süren bir biçimin üstüne yenisi gelirse eskisi o anki konumdan devralınır (sıçrama yok).
+"Hareketi azalt" açıksa dönüşüm oynamaz.
+
+**Tetikleme tek kapıdan:** `logoTepkisi("sira" | "ekle" | "tamam")` (`src/lib/logo-tepkisi.ts`)
+pencereye olay atar; logo dinler. Bileşenler logoya ref ile uzanmaz. Dokunmatikte logoya
+basınca hover döngüsü bir tur oynar (mobil kullanıcı da logonun canlı olduğunu görsün).
+
+**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 header'daki logoda oynar; aynı ekranda iki logo birden dönüşmez.
+- Bir **durum değişimini** anlatır; dekor olarak döngüye alınmaz, sayfa açılışında oynatılmaz,
+  kaydırmayla tetiklenmez.
+- **Tek istisna: ana sayfa veri akışının ortası** (§4.28; Bilal'in kararı, 11 Eki 2026). Orada
+  işaret bir sahnedir ve döngüyle oynar: nabız → biçim → logo. Dekor değildir; girdilerin neye
+  dönüştüğünü çizer (liste, trend, sohbet). Biçim daha uzun durur (2,5 sn; eylem biçimi 1,1 sn),
+  çünkü kimse bir şeye basmadı, bakan kişi okuyacak. Başka bir yere kopyalanmaz.
+- Yalnız **kullanıcının kendi eylemine** ya da onun seçtiği bir ayara bağlanır. Sunucudan gelen
+  sonuç (liste üretildi, ödeme geçti) logoyu dönüştürmez; onların kendi sahnesi var (§4.19).
+- Yeni bir biçim eklenecekse üç kareden ve logonun üç renginden çıkar; dördüncü şekil,
+  yeni renk, çizgi ikon eklenmez.
+- Biçim logonun kendi alanına sığar (x 27–151): sağındaki "KolayTercih" yazısına değmez.
+
+### 4.35 Adım göstergesi — `AdimGostergesi`, `src/components/ui/adim-gostergesi.tsx`
+
+Çok adımlı her akışın (sihirbaz, tercih profili kapısı, soru formu) tek göstergesi. Esin React
+Bits "Stepper" (Bilal, 9 Eki 2026: "bu stepper mevcut stepperla değişsin"); kod bizim, `motion`
+ile, renkler bizim.
+
+- **Görünüş:** numaralı daireler (`size-9`, telefonda da 36 px) ince bir çizgiyle bağlı; altında
+  adım adı (`text-xs font-semibold`, sm'den `text-sm`). Bekleyen adım `border-slate-200 bg-card
+  text-slate-500`; **aktif** adım `bg-primary text-white` ve içinde numara; **tamamlanan** adım
+  `bg-primary` + kendini çizen beyaz tik. Çizgi `h-0.5 bg-slate-200`, tamamlanan aralıkta
+  `bg-primary` soldan dolar. Turuncu yok: gösterge bilgidir, aksiyon değil (§2).
+- **Hareket:** daire rengi `SURE.standart`; tik `pathLength 0 → 1` (`YAY.donusum`); çizgi dolumu
+  `scaleX` (`YAY.akici`, `origin-left`). Geri gidince aynı yoldan boşalır (§6).
+- **API:** `adimlar: string[]`, `aktif: number` (0 tabanlı), `onAdimSec?: (i) => void`. Yalnız
+  `onAdimSec` verilirse ve yalnız **tamamlanmış** adımlar tıklanabilir (ileri atlama yok).
+  Kontrollüdür; içerik geçişi göstergenin işi değildir — o `TransitionPanel` +
+  `src/lib/adim-gecisi.ts`'te kalır.
+- **Erişilebilirlik:** `ol > li`, aktif adımda `aria-current="step"`, `role="status"` sr-only
+  "Adım 2 / 3: Şehir" (§10.2). Tıklanabilir adım `button`'dur, 44 px dokunma alanı.
+- **Dürüstlük (§10.2):** yüzde, sahte ilerleme yok; adım sayısı gerçek adım sayısıdır.
+- İskelet (`sihirbaz-adimlar-lazy.tsx`) göstergenin kutusunu birebir çizer; yüklenince yerleşim
+  sıçramaz.
+- Ana sayfa "Nasıl çalışır" rakamları (§4.32) ayrı kalır ama aynı dili konuşur: aradaki çizgi
+  bölüm ekrana girdikçe aynı mavi dolumla dolar.
+
+### 4.36 Baloncuk menü (telefon) — `MobilMenu`, `src/components/mobil-menu.tsx`
+
+Bilal (9 Eki 2026): "telefonda menü sistemimizi bubble-menu gibi yapıp hem alanı küçültüp hem
+istediğimizi rahatça kullanıcıya verebiliriz." Esin React Bits "Bubble Menu"; kod bizim (GSAP
+yerine `motion`, kabuk Radix `Dialog` ilkeli: odak tuzağı, Esc, odak dönüşü).
+
+- **Telefonda üst çubuk tek satırdır** (`lg` altı): logo · sıralama hapı (`flex-1`) · menü
+  baloncuğu. Sıralama hapı dışarıda kalır çünkü sitenin ana eylemi odur; geri kalan her şey
+  baloncuğun içindedir. İkinci satır yok.
+- **Baloncuk:** `size-9 sm:size-12 rounded-full border border-slate-200 bg-card`, içinde iki
+  çizgi; açılınca çizgiler çarpıya döner (aynı düğme kapatır, §4.3 çarpı ölçüsü).
+  Listede program varsa baloncuğun köşesinde turuncu sayı rozeti durur (§4.37).
+- **Açık hâl:** tam ekran perde (`bg-slate-50/90` + `backdrop-blur`), içinde iri haplar alt
+  alta: `min-h-14 rounded-full border border-slate-200 bg-card px-6 font-heading text-xl`.
+  Haplar sırayla "pop" eder (`scale 0 → 1`, `YAY.birakma` — sitede sekmenin serbest olduğu
+  ikinci yer, çünkü baloncuk fırlar; 35 ms arayla). Kapanış hızlı ve sekmesiz (`SURE.cikis`).
+  Hap sırası: Ara · Kendi Listem (N/24) · Yapay Zeka Listem · gezinme linkleri · tema seçici ·
+  Giriş yap / Çıkış. **Menüde turuncu buton yok:** menü gezinmedir, aksiyon değil; "Giriş yap"
+  üst çubuktaki gibi koyu haptır (`bg-slate-900 text-slate-50`), turuncu yalnız rozet sayısında.
+- Renkli hover/rotasyon (özgün bileşendeki eğik, gökkuşağı haplar) alınmaz; hap düz durur,
+  basınca `active:scale-[0.97]`.
+- Hareketi azalt: haplar yalnız belirir (opaklık), sıra gecikmesi yok.
+- Masaüstünde (`lg+`) menü yoktur; orta ada ve sağ küme olduğu gibi kalır (§1.1).
+
+### 4.37 Uçuş ve rozet tepkisi — `UcusKatmani`, `src/features/liste/components/ucus-katmani.tsx`
+
+Listeye program eklemek sitenin en sık tekrarlanan eylemidir ve **sessiz kalmaz** (§11.2
+"her eylemin cevabı var"):
+
+- `+` düğmesine basınca düğmenin yerinden bir **piksel kare** (10 px, `rounded-[2px]`,
+  `bg-orange-500`) Listem rozetine (telefonda menü baloncuğuna) uçar: `YAY.akici`, hafif yay
+  çizen yol, varışta söner. Aynı anda yalnız bir kare uçar; hızlı art arda eklemede öncekiler
+  tamamlanır, yenisi sıraya girmez (en son eklenen uçar).
+- Varışta rozet bir kez nabız atar (`kt-piksel-nabiz`, 0,42 s) ve sayı rulosu döner.
+- Düğmede `+` yerine tik **kendini çizer** (`pathLength`, §4.17 çip tiğiyle aynı).
+- Dokunmatikte `navigator.vibrate?.(8)`.
+- Logo "deste" biçimine döner (§4.34); 24. programda "tamam".
+- **Doluluk halkası:** Listem rozetinin çevresinde 24'lük ince halka (`stroke-primary`,
+  zemin `stroke-slate-200`); liste boşken de (0/24, soluk) görünür ki hedef okunsun. Halka
+  yay ile dolar (`YAY.akici`). Sayı her zaman yanında yazılıdır; halka tek başına anlam taşımaz.
+- §10.3 sürer: bildirim yalnız 1/24 ve 24/24'te çıkar; uçuş bildirim değildir, eylemin
+  kendi geri bildirimidir. Konfeti, ses yok.
+- Hareketi azalt: uçuş yok; rozet sayısı düz değişir, düğme tik olur.
+
+### 4.38 Piksel morf ve piksel şeridi — `PikselMorf`, `PikselSerit`
+
+Bilal (10 Eki 2026): "Landing'i deneyim hâline getir; motion graphic'ler daha fazla olmalı;
+basit, sade, tutarlı morph'lar olabilir." Ana sayfanın hareketi tek bir fikirden çıkar:
+**hero'nun pikselleri canlıdır** — yer değiştirir, ısınır, aşağı iner. Yeni bir hareket bu
+ikisinden biriyle kurulur; üçüncü bir dil eklenmez.
+
+**Piksel morf** (`src/components/piksel-morf.tsx`). Piksel sahnenin (§4.31) canlı hâli: sahne
+sabit bir piksel kümesidir, her pikselin kimliği (`id`) vardır ve kareden kareye yeni hücresine
+süzülür. Dört ton: `doku` (hero mavisi), `silik` (yarı opaklık), `vurgu` (turuncu, nabız atar),
+`gizli` (küçülüp söner, yerinde bekler). İlkel aptaldır: hangi piksel nerede, hangi tonda —
+çağıran söyler; zamanlamayı ve görünürlüğü de çağıran yönetir.
+- Hareket yalnız CSS geçişidir (`.kt-morf-px`, globals.css): kayma 0,55 sn `--egri-standart`
+  (sahne `--morf-sure` ile kısaltabilir), belirme/sönme 0,3 sn; **sekme yok** (§6). Turuncu
+  çabuk ısınır (0,25 sn), yavaş soğur (1,2 sn) — ısı fırçasının asimetrisi.
+- Doku pikselleri imleç fırçasına katılır (`usePixelHeat` `canli`: konum her taramada okunur).
+  Turuncunun **anlam taşıdığı** karede fırça kapatılır (`firca={false}`).
+- Piksel sırası kareler arasında sabit kalır (DOM yer değiştirirse geçiş kopar); sahneden
+  çıkan piksel silinmez, `gizli` olur.
+- Sahne **kartın/adımın söylediğini çizer** (§4.31 kuralı sürer): süs olarak döngüye alınmış
+  morph yok. Aynı ekranda iki sahne aynı anda oynamaz; sırayı çağıran kurar.
+- İlk kare sunucu HTML'idir ve tek başına doğru resimdir; hareketi azalt'ta sahne orada kalır.
+- Kullanıldığı yerler: ana sayfa "Sorun" sahneleri (§4.31), "Nasıl çalışır" rakamları (§4.32).
+
+**Piksel şeridi** (`src/components/piksel-serit.tsx`, ana sayfada `bolum-gecisi.tsx`). Bilal
+(11 Eki 2026): "En üstteki haritadan aşağıya inen piksel şeridi olsun; scroll'a bağlı, turuncu
+olabilir." Aynı gün: "separator'ları kaldır." **Ana sayfada bölümler arasında piksel ayraç
+yoktur; yerinde şerit durur.** Hero haritasının serpintisi tek sıraya iner ve her bölüm
+arasında yeniden görünür: bölümleri birbirine bağlayan iplik.
+- **Kaydırmaya bağlıdır, animasyon değildir:** ekranın okuma çizgisini (yüksekliğin %65'i)
+  geçen piksel turuncuya ısınır (`data-yandi`), geri kaydırınca yavaş soğur; şeridin ucu
+  (`data-uc`) tam turuncudur. Şeridi kullanıcının parmağı çizer (`useScroll`, Parallax gibi
+  1:1). Zemin pikseli hero mavisidir; turuncu yalnız geçilen kısımdır.
+- **Yalnız bölümler arasındaki boşlukta durur**; bölümün içinde, yazının arkasında çizilmez
+  (§4.31 "zemin değildir"). Tek sütun, hücre 14rem / 12 ≈ 18,7 px (sayfadaki en iri piksel).
+  Geçiş akışta 2 hücre yer tutar (eski ayracın boyu; bölüm boşluğu §5.1'de), şerit
+  bunun üstüne ve altına 4'er hücre taşar (telefonda 3'er): geniş ekranda 10, telefonda 8
+  hücre. Hero'dan çıkan ilk şerit 6 hücre yukarı uzar ve serpintinin bittiği yerde başlar;
+  kısa telefonda (yükseklik < 760 px) 3 hücreye iner ki forma değmesin.
+- `Parallax strength={26}` katmanındadır (eski ayraçla aynı derinlik, §6).
+- Denenip bırakılanlar (11 Eki 2026): ayracın "dağınık düşüp toplanma" girişi ("şu anki
+  separator animasyonunu kaldır") ve şeridin ayraç kümesinin içinden geçtiği hâl (artı
+  işareti gibi duruyordu). Şerit tek başına durur.
+- Alt sayfalarda şerit yoktur; orada başlığı içerikten `PagePixelDivider` ayırır. Şerit yalnız
+  ana sayfanın omurgasıdır.
+- Hareketi azalt'ta renk geçişi anlıktır; şerit yine kaydırmayı izler (bilgi değil, iz).
+
+**Hero serpintisi damlar** (`turkey-pixel-map.tsx`, `.kt-serpinti`): kıyının altındaki
+piksellerin üçte biri yerinden kopup 1–3 hücre düşerken söner, sonra yerinde yeniden belirir
+(süre 4,5–8,5 sn, faz pikselden piksele farklı). §11.1 V2'nin nedeni ("harita bitmez,
+dağılır") harekete çevrilmiş hâlidir; telefonda imleç olmadığı için haritanın canlılığı budur.
+Hareketi azalt'ta kapalı.
+
 ## 5. Yerleşim
 
 ### 5.1 Genel
 - Sayfa kabı: `mx-auto max-w-6xl px-4`. Metin sütunu: `max-w-xl` (paragraf) / `max-w-2xl`–`max-w-3xl` (uzun içerik).
-- Landing bölümü: `<section className="py-20 sm:py-24">`; alt sayfalar `py-12`–`py-16`.
+- Landing bölümü: `pt-24 pb-28 sm:pt-32 sm:pb-40 lg:pt-36 lg:pb-44` (tek kaynak `app/page.tsx`
+  `BOLUM_BOSLUGU`); alt sayfalar `py-12`–`py-16`. Bilal (11 Eki 2026): "section'lar arası es
+  yok, her şey çok sıkışık." Eski `py-20 sm:py-24`'te bölümler arasındaki piksel şeridi (§4.38)
+  içeriğe iki yandan ≈20 px kalıyordu. Kural: **şeridin çevresinde nefes kalır** ve alt boşluk
+  üsttekinden bir kademe büyüktür — şerit bitirdiği bölümden uzak, indiği bölümün rozetine
+  yakındır. Şeritle içerik arasında kalan boşluk (üst bölüme / alt bölüme): telefonda 56 / 40,
+  `sm`'de 85 / 53, `lg`'de 101 / 69 px. Kapanış yüzeyinden önce şerit yoktur; SSS'nin alt boşluğu
+  o esi tek başına verir. Bölüm boşluğu değişirse şeridin boyu (`BolumGecisi` `ust`/`alt`) ile
+  birlikte ölçülür.
 - Bölüm başlık bloğu (kanonik):
   ```tsx
   <div className="flex flex-col items-center gap-4 text-center">
@@ -971,10 +1201,12 @@ sorular DOM'da kalır (mutlak/saydam/`inert`) ki FormData toplanmaya devam etsin
     <p className="max-w-xl text-lg leading-relaxed text-slate-600">…</p>
   </div>
   ```
-  Ardından içerik `mt-12`; kart ızgarası `grid gap-6 md:grid-cols-3` (yalnızca gerçekten üç eşdeğer öğe varsa; üçe tamamlamak için içerik uydurulmaz).
+  Ardından içerik `mt-12` (ana sayfada `mt-12 sm:mt-16`); bir bölümün içindeki ikinci hareket
+  (ör. "Nasıl çalışır"da adımların altındaki veri akışı) `mt-24 sm:mt-32` ile ayrılır; kart ızgarası `grid gap-6 md:grid-cols-3` (yalnızca gerçekten üç eşdeğer öğe varsa; üçe tamamlamak için içerik uydurulmaz).
 - Alt sayfa başlığının altında `PagePixelDivider` (`mt-6`/`mt-8`), her sayfada **farklı seed**.
-- Landing bölümleri arasında çizgi yok; `PixelDivider` (`mx-auto w-56`, farklı seed).
-- Boşluk ölçeği: 4 → 6 → 8 → 12 → 16/20 → 24. Ara değer (`mt-7`, `gap-5`) yeni yerde açılmaz.
+- Landing bölümleri arasında çizgi ve ayraç yok; piksel şeridi (`BolumGecisi`, §4.38, farklı `tohum`).
+- Boşluk ölçeği: 4 → 6 → 8 → 12 → 16/20 → 24; yalnız ana sayfa bölüm ritminde 28 → 32 → 36 →
+  40 → 44. Ara değer (`mt-7`, `gap-5`) yeni yerde açılmaz.
 - Mobil önce (trafiğin ~%90'ı 375 px): uzun adlar sarar (§4.15); tablo yatay kaydırmaz,
   dar ekranda sütunlar satır altına iner; sabit alt çubuk klavyeyle çakışmaz; `vh` yerine `dvh`.
 
@@ -1007,6 +1239,9 @@ Dört sütunlu tablo yalnız `lg`'de. Altında her özellik kendi satırında (b
 `text-base font-semibold`), üç cevap altında üç sütun; KolayTercih sütunu `bg-primary/5`
 kutuda. Sütun adları üstte yapışık: `sticky top-24 sm:top-32` (site başlığı telefonda 96 px,
 sm'den itibaren 128 px — ölçüldü). Bilal, 25 Eyl 2026: "kaydırması gerekiyor, olmamalı".
+"Var" tiki tablo ekrana girince **kendini çizer** (§11.2-6): önce halka, sonra işaret; satırlar
+70 ms arayla (`--tik-g`). `ComparisonCell` lucide `circle-check` geometrisini `pathLength="1"`
+ile çizer (`.kt-tik-ciz`, globals.css); hareketi azalt'ta ve JS'siz istemcide tik hazır gelir.
 
 ### 5.3 Verimli ve havadar
 - İlişkili öğeler yan yana dizilir (iki sütun) — tek sütunda alt alta uzayan panel yapılmaz.
@@ -1016,7 +1251,7 @@ sm'den itibaren 128 px — ölçüldü). Bilal, 25 Eyl 2026: "kaydırması gerek
 
 ## 6. Derinlik, katman ve hareket
 
-Derinlik gölgeyle değil **piksel katmanı ve hareket farkıyla** verilir: başlık bloğu gövdeden hafif hızlı akar (`Parallax strength={16}` başlık, `7` içerik, `26` ayraç). Sahne kartları (§4.31) hover'da 4 px yükselir. Modal arka planı `bg-black/10` + hafif blur. Yığın: içerik < sabit bar < çekmece/modal (`z-50`).
+Derinlik gölgeyle değil **piksel katmanı ve hareket farkıyla** verilir: başlık bloğu gövdeden hafif hızlı akar (`Parallax strength={16}` başlık, `7` içerik, `26` bölümler arası piksel şeridi — §4.38). Sahne kartları (§4.31) hover'da 4 px yükselir. Modal arka planı `bg-black/10` + hafif blur. Yığın: içerik < sabit bar < çekmece/modal (`z-50`).
 
 Hareket kuralları (Apple, `motion/react`):
 - Varsayılan yay: `{ type: "spring", bounce: 0, duration: 0.35 }` — sekmesiz, sakin. Sekme
@@ -1025,6 +1260,16 @@ Hareket kuralları (Apple, `motion/react`):
   `src/lib/hareket.ts` (`YAY.akici` panel/yığın, `YAY.donusum` biçim, `YAY.birakma` parmak
   bıraktıktan sonraki tek hafif sekme). Yeni bir Arc bileşeni yay uydurmaz, buradan alır;
   sınıflar Arc'ın CSS modülünden değil bu belgeden gelir.
+- **Yay ve eğri kullanım yerinde uydurulmaz** (denetim: `elle-yay`). `hareket.ts`'teki adlar:
+  `YAY.varsayilan / akici / donusum / birakma / adim`, `EGRI.giris / standart / gucluCikis /
+  yerlesme`, `SURE.anlik / hizli / cikis / standart`. Yeni bir değer gerekiyorsa önce oraya
+  adıyla ve tek cümle gerekçesiyle eklenir. CSS tarafında aynı eğriler `globals.css`'te
+  `--egri-*` değişkenleridir.
+- **Sayfa başına tek orkestre giriş** (§11.2): sıralı, sahnelenmiş belirme yalnız sayfanın ilk
+  ekranında bir kez; alttaki bölümler sade `Reveal` ile gelir. Çekmece ve menü kendi sahnesini
+  taşır (§4.19, §4.36).
+- **Sayfa geçişi:** rotalar arası kısa çapraz solma (≈0,2 s, `EGRI.standart`); üst çubuk
+  geçişe katılmaz, yerinde kalır. Hareketi azalt'ta kapalı.
 - Giriş ve çıkış **aynı yoldan** (aşağıdan geldiyse aşağı gider).
 - Basınca anında tepki: `active:scale-[0.97]` (buton), `[0.99]` (geniş satır), `[0.96]` (çarpı).
 - Hover'da ok `translate-x-0.5` kayar; kart yükselmesi yalnız landing kartında.
@@ -1140,8 +1385,9 @@ Araştırma ve kaynaklar: `docs/tasarim/2026-09-25-samimi-arayuz-arastirmasi.md`
 
 ### 10.2 İlerleme
 - Sayıyla ve dürüst: "7/24", "Adım 2/3: Şehir". Yüzde, sahte hız, yapay ilerleme yok.
-- Sihirbaz adım göstergesi adlı (Alan · Şehir · Öncelik); dolum `scale-x` ile soldan,
-  `duration-300 ease-[cubic-bezier(0.23,1,0.32,1)]`, hareketi azalt'ta geçişsiz.
+- Adım göstergesi tek bileşendir: `AdimGostergesi` (§4.35) — numaralı, adlı (Alan · Şehir ·
+  Öncelik), tamamlanan adımda tik. Sihirbaz, tercih profili kapısı ve soru formu aynısını
+  kullanır; satır içi çubuk yazılmaz.
 - Liste çekmecesinde risk dağılımı metinle (`RiskEtiketi` + sayı). Riskleri bilinen 6+
   tercihli listede güvenli yoksa tek cümle ipucu — vaat değil, gerekçe.
 
@@ -1305,3 +1551,140 @@ satır:** başlık (`text-lg`) üstte, altında kupa+sayı ile ok **yan yana** (
 gap-5`; kupa kutusu ve ok telefonda 48 px, sm'den 56 px); lg'de tek satır (sayı · başlık · ok).
 Blok formun yüksekliğini **aşamaz** — aşarsa `overflow-hidden` kap üstten kırpar (24 Eyl 2026'da
 üç satırlı ilk sürümde başlık kesildi; ölç, §9.2).
+
+## 11. Deneyim ilkeleri ve referans vakalar
+
+Bilal (9 Eki 2026): "Landing'de amacım yeni gelen kişiye bir **deneyim** vermek. Sitede benim
+müdahalemle çok iyi bir deneyime dönüşmüş yerler var; bunlar gibi çalış. Web sitesi değil **web
+uygulaması** olduğumuzu aktarabilmemiz lazım. Her seferinde 'UI şöyle mantıkta olsun' demeyeyim."
+
+Bu bölüm o zevkin yazılı hâlidir. §1–§10 **neyin nasıl göründüğünü** söyler; bu bölüm **neyin
+iyi hissettirdiğini ve neden** söyler. Yeni bir ekran, bileşen ya da hareket tasarlayan herkes
+(rol fark etmez) işe başlamadan §11.1'deki vakalardan en yakın olanı açıp bakar ve işi bitince
+§11.5 listesinden geçirir.
+
+### 11.1 Referans vakalar (Bilal'in "harika" dedikleri)
+
+Her vaka üç şey söyler: ne oluyor, **neden iyi**, nereden bakılır. Yeni iş bunları kopyalamaz;
+aynı *nedeni* kendi yerinde üretir.
+
+**V1 — Tema değişince logo, sayfadan sonra dönüşür** (§4.34; `src/lib/tema-gecisi.ts`,
+`animasyonlu-mark.tsx`). Yeni tema logodan dışarı doğru açılır (600 ms), kısa bir nefes
+(80 ms), sonra logonun üç karesi güneşe ya da aya dönüşüp geri toplanır (1,7 sn).
+*Neden iyi:* iki hareket **sırayla** konuşur, üst üste binmez; ikincisi birincinin cevabıdır.
+Ayarı değiştiren kişi "site beni duydu" hissini alır. Marka (logo) işin içindedir ama araya
+girmez — bir an oynar ve çekilir.
+
+**V2 — Hero'daki Türkiye piksel haritası ve aşağı sarkan pikseller**
+(`src/features/pazarlama/components/turkey-pixel-map.tsx`, `use-pixel-heat.ts`). Harita
+ekranın %82'sine kadar yayılır (`w-[min(1665px,82vw)]`); kıyı hattından aşağı 9 hücre boyunca
+seyrelen bir serpinti dökülür (kıyıda %45, dipte ≈%5 doluluk, derinlikle söner).
+*Neden iyi:* **boş alan süsle değil, şeklin kendi uzantısıyla dolar** — harita bitmez, dağılır.
+Boyutu cesurdur (küçük bir ikon değil, sahnenin kendisi) ama içerik onun önünde rahat okunur
+(ortada okunurluk perdesi). İmleç yaklaşınca ısınır: bakana cevap verir.
+
+**V3 — Çekmecede önce logo, sonra içerik** (§4.19; `src/components/ui/acilis-sahnesi.tsx`).
+"Akademik göstergeler" ve "Mezun istihdamı" açılınca logonun üç karesi ortada belirir, sonra
+her biri kendi gösterge karesinin yerine ve boyuna büyür; içerik onların içinde netleşir.
+*Neden iyi:* **yükleme anı marka anına döner** — kullanıcı boş bir kutu ya da gri iskelet
+değil, tanıdığı bir şeyin açılışını izler. İçerik "bir yerden" gelir: logodan. Veri hazırsa
+sahne oynamaz (önbellekli açılışta atlanır); bekletmek için değil, beklemeyi doldurmak için var.
+
+**V4 — Üst çubuktaki üçlü: Sıralamanı gir · Ara · Listem** (`katalog-arama.tsx`,
+`listem-butonu.tsx`, `user-nav.tsx`). Üç ayrı işlev tek bir adada, aynı hap diliyle durur;
+sıralama girilince hap sayıyı gösterir, liste dolunca rozet sayar.
+*Neden iyi:* **çubuk bir menü değil, kullanıcının durumudur.** "Sıram 85.000, listemde 7
+program var" bilgisi her sayfada, her an görünür. Site kullanıcıyı tanıyor gibi davranır;
+bu, "web sitesi" ile "web uygulaması" arasındaki farkın kendisidir.
+
+**V5 — Kayan vurgu ve dönen sayı** (`secim-haplari.tsx`, `sayi-rulo.tsx`). Seçim değişince
+vurgu bir haptan öbürüne kayar; sayı değişince rakamlar döner.
+*Neden iyi:* **değişim gösterilir, sonuç değil.** Eski değerle yeni değer arasında bir yol
+vardır; göz neyin değiştiğini aramaz.
+
+### 11.2 İlkeler
+
+1. **Uygulama gibi davran.** Kullanıcının durumu (sıra, liste doluluğu, tema, giriş) her
+   sayfada yansır ve bir yerde değişince her yerde değişir. Sayfa "belge" gibi değil "ekran"
+   gibi kurulur: sabit üst çubuk, parmağı izleyen alt sayfa, sayfalar arası kesintisiz geçiş.
+2. **Her eylemin cevabı var.** Basılan şey basıldığını gösterir (`active:scale`), sonucu olan
+   eylem sonucunu gösterir (rozet atar, sayı döner, kare uçar). Sessiz eylem yoktur. Cevap
+   eylemin büyüklüğüyle orantılıdır: hap seçmek bir kayma, liste doldurmak bir an.
+3. **Önce imza, sonra içerik.** Bir yüzey açılırken (çekmece, menü, ilk ekran) önce markanın
+   bir parçası belirir, içerik onun ardından ve onun içinden gelir (V3). Hareketler **sırayla**
+   konuşur; aynı anda iki şey dikkat istemez (V1).
+4. **Boşluğu şeklin kendisi doldurur.** Boş alana dekor yerleştirilmez; var olan bir şekil
+   uzar, dağılır, seyrelir (V2). Piksel dokusu her zaman bir şeyin devamıdır.
+5. **Cesur ölçü, sakin hareket.** İmza öğeler iridir (harita sahnenin kendisi, sayı kartın
+   kahramanı, hap 48 px); hareket ise sekmesiz ve kısadır (§6). Büyük + sakin = güven.
+   Küçük + hareketli = oyuncak.
+6. **Değişimi göster.** Değer değişirken eski ile yeni arasında yol çizilir (V5): kayan vurgu,
+   dönen rakam, dolan çizgi, kendini çizen tik. Anında yer değiştiren içerik son çaredir.
+7. **Oyunlaştırma dürüsttür.** İlerleme gerçek sayıdır (7/24), kutlama öğrencinin kendi
+   adımınadır (§10.2, §10.3). Seri, puan, kayıp korkusu, sahte aciliyet yok (§10.7). Sempatik
+   = tepki veren ve tanıyan; şirin ya da gürültülü değil.
+8. **Sayfa başına tek orkestre giriş.** Sahnelenmiş, sıralı belirme yalnız ilk ekranda; her
+   bölümde tekrarlanırsa gösteri olur, deneyim olmaz (§6).
+9. **Telefon önce ve eksiksiz.** Trafiğin ~%90'ı telefonda. Bir deneyim telefonda gizleniyorsa
+   (harita, logo tepkisi, hover'a bağlı cevap) o deneyim yoktur; telefonda sade ama **var**
+   bir karşılığı tasarlanır.
+10. **Hareketi azalt'ta da tam.** Her sahnenin sade karşılığı yazılır (§8); bilgi hiçbir
+    zaman yalnız harekette durmaz.
+
+### 11.3 Dışarıdan parça alma
+
+Bilal'in beğendiği kaynaklar: **Arc** (`uiarc.dev` — hareket ve buton dili), **React Bits**
+(`reactbits.dev` — Stepper, Bubble Menu ve genel UI algısı), **Skiper UI** (`skiper-ui.com` —
+deneyim bileşenleri), **Motion Primitives** (`motion-primitives.com`). Bunlara bakmak serbest
+ve teşvik edilir; ama Bilal'in sözü kuraldır: "Bunlardan bir şey kullansak dahi, harika dediğim
+kısımlar gibi **bize özgü renk ve tasarım şekline dönüştürüp** kullanırız."
+
+Bir dış bileşen siteye şu çeviriden geçerek girer (hepsi zorunlu):
+
+1. **Kod bizim olur.** Dosya `src/components/…` altına Türkçe adla yazılır; başına kaynak ve
+   lisans yorumu konur ("Esin: React Bits 'Stepper' (MIT + Commons Clause)"). Registry'den
+   olduğu gibi kurulup bırakılmaz.
+2. **Yeni bağımlılık yok.** Sitede hareket için yalnız `motion` var. `gsap`, `framer-motion`,
+   `three`, `ogl`, `lenis`, `matter-js` isteyen bileşen `motion` ile yeniden yazılır ya da
+   alınmaz (denetim: `yabanci-hareket-paketi`). WebGL arka planlar alınmaz.
+3. **Renk token'a iner.** Sabit hex, mor/yeşil/gökkuşağı vurgular gider; slate nötr, mavi
+   bilgi, turuncu aksiyon, yüzey `bg-card` (§2, §2.3). `dark:` yazılmaz.
+4. **Hareket `hareket.ts`'e bağlanır.** Bileşenin kendi süre/easing/yay değerleri atılır,
+   en yakın `YAY` / `EGRI` / `SURE` adı kullanılır. Sekme yalnız bir şey fırlıyorsa.
+5. **Biçim bize döner.** Köşe `rounded-full` / `rounded-2xl`, yazı `font-heading` /
+   `font-sans`, dokunma alanı ≥ 44 px, gölge yok. Uygun yerde piksel imzası eklenir (§1.2).
+6. **Sade karşılığı ve erişilebilirliği yazılır.** `useReducedMotion` dalı, klavye, odak,
+   `aria-*`. Dış bileşenlerin çoğunda bunlar yoktur; biz ekleriz.
+7. **Lisans:** React Bits MIT + Commons Clause (kullanmak serbest, bileşeni satmak/yeniden
+   dağıtmak yasak). Skiper ücretsiz sürüm atıf ister (dosya başı yorumu). Arc ücretsiz
+   katman MIT. Motion Primitives MIT. Ücretli (Pro) katmandan hiçbir şey alınmaz.
+
+Arc'tan alınan **hareket ilkeleri**dir (durum bildiren her şey sekmesiz yay, yalnız
+`transform`/`opacity`, çıkış girişten hızlı, etkileşim başına tek hareket) — bunlar zaten
+`hareket.ts`'te. Arc'ın görsel dili (Geist/Inter, 34 px köşe, "eyebrow yok") **alınmaz**;
+bizim dilimizle çelişir.
+
+Kaynak kodunu okumak için shadcn MCP ya da registry JSON'u yeterlidir (`components.json`'da
+`@uiarc`, `@react-bits`, `@skiper-ui` kayıtlı); `shadcn add` ile kurmak yerine okuyup yazılır.
+
+### 11.4 "Web uygulaması" kabuğu
+
+- Ana ekrana eklenebilir: `src/app/manifest.ts` (`display: "standalone"`), ikonlar, tema rengi.
+- Rotalar arası çapraz solma, üst çubuk yerinde (§6).
+- Telefonda tek satır üst çubuk + baloncuk menü (§4.36).
+- Durum çubukta yaşar: sıra hapı, liste halkası (§4.37).
+- Ayrıntı her zaman alt sayfada; telefonda arama ve sıralama kapısı da alt sayfadır,
+  masaüstünde ortalı pencere (§4.10).
+
+### 11.5 Bitirmeden: deneyim kontrolü
+
+Yeni ya da yeniden düzenlenmiş her UI parçası için, ekrana bakarak (AGENTS.md):
+
+- [ ] En yakın referans vakayı (§11.1) açtım; işim onunla aynı *nedeni* taşıyor.
+- [ ] Bu ekrandaki her eylemin görünür bir cevabı var (basma, sonuç, hata).
+- [ ] Kullanıcının durumu (sıra / liste / giriş) bu ekranda yansıyor ya da gerekmiyor.
+- [ ] Aynı anda iki hareket dikkat istemiyor; sahne varsa bir tane.
+- [ ] Telefonda (375 px) deneyim gizlenmedi; sade karşılığı var.
+- [ ] Hareketi azalt'ta bilgi eksilmiyor.
+- [ ] Yay/eğri/süre `hareket.ts`'ten; turuncu CTA `variant="cta"`; yeni bağımlılık yok.
+- [ ] Dış kaynaktan aldıysam §11.3'ün yedi adımı tamam, kaynak yorumu dosyada.