fix(tasarim): üniversite haritası dört kartın arkasına sarkar; yakınlaşma sıçramasız yay, mask rampaları uzun

- Özet ızgarası relative isolate; konum haritası absolute katman (-inset-x-4
  -inset-y-8) olarak ızgaranın tamamını kaplar, üçüncü sütun yalnız yer tutar.
  lg'de sağdan sola, telefonda üst satırdan aşağı uzun rampalı mask.
- Yakınlaşma ease-out yerine spring bounce 0 (0,6 s gecikme, 1,6 s): sert
  başlangıç gitti. Şehir yüzeyi mask'ları da uzatıldı.
- DESIGN.md §4.17 güncellendi.

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

src/features/katalog/components/sehir-piksel-haritasi.tsx

@@ -48,11 +48,13 @@ const VIEW_H = SATIR * CELL;
 // Hero'nun ısı fırçası 640 birimlik viewBox'ta 34; burada aynı oran.
 const ISI_YARICAPI = 34 * (VIEW_W / 640);
 // Yakınlaşma: gecikme (s), süre (s), en çok büyütme, ilin çevresinde pay (hücre)
-const ODAK_GECIKME = 0.7;
-const ODAK_SURE = 1.1;
+// Sıçramasız yay (Apple: damping 1): hızlı başlayan ease-out "sert"
+// duruyordu (Bilal, 24 Eyl 2026: "geçişler sert"); yay sıfır hızla başlar,
+// yumuşak ivmelenir ve sessizce oturur.
+const ODAK_GECIKME = 0.6;
+const ODAK_SURE = 1.6;
 const ODAK_ZOOM = 2.4;
 const ODAK_PAY = 2;
-const ODAK_EASE = [0.23, 1, 0.32, 1] as const;
 
 type Kutu = readonly [number, number, number, number];
 const TAM_KUTU: Kutu = [0, 0, VIEW_W, VIEW_H];
@@ -201,9 +203,10 @@ function PikselSvg({
     }
     const bas = TAM_KUTU;
     const kontrol = animate(0, 1, {
+      type: "spring",
+      bounce: 0,
       delay: ODAK_GECIKME,
       duration: ODAK_SURE,
-      ease: [...ODAK_EASE],
       onUpdate: (t) =>
         yaz([
           bas[0] + (odak[0] - bas[0]) * t,