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/universite-konum-haritasi.tsx

@@ -8,15 +8,26 @@ import {
 
 // Harita il adları modül yükünde bir kez DB biçimine çevrilir.
 const HARITA_ILLERI = new Set(cities.map((c) => normalizeIlAdi(c.name)));
-// Kartı doldurur, kenarları radyal mask ile erir (kesik kanvas yok).
-const KART_HARITA_SINIFI =
-  "absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,black_55%,transparent_100%)]";
+/**
+ * Harita katmanı ızgaranın tamamını kaplar ve biraz dışına sarkar; kartlar
+ * (beyaz, opak) üstünde kalır, harita aralıklardan ve üçüncü sütunun boş
+ * alanından görünür. Mask'lar (dış: kartların tarafına doğru, iç: dik
+ * yönde iki kenar) hiçbir kenarda kesik kare bırakmaz — geniş ekranda sağdan
+ * sola, telefonda üst satırdan (harita yeri) aşağı doğru erir.
+ */
+const KATMAN_SINIFI =
+  "pointer-events-none absolute -inset-x-4 -inset-y-8 -z-10 [mask-image:linear-gradient(to_bottom,transparent_0%,black_14%,black_34%,rgba(0,0,0,0.12)_58%,transparent_82%)] lg:[mask-image:linear-gradient(to_right,transparent_2%,rgba(0,0,0,0.08)_30%,rgba(0,0,0,0.35)_54%,black_74%,black_92%,transparent_100%)]";
+const IC_MASK_SINIFI =
+  "h-full w-full [mask-image:linear-gradient(to_right,transparent_0%,black_12%,black_88%,transparent_100%)] lg:[mask-image:linear-gradient(to_bottom,transparent_0%,black_16%,black_84%,transparent_100%)]";
+// İl geniş ekranda üçüncü sütunun ortasına (x≈0,82), telefonda üst satıra gelir.
+const ODAK_HIZA = { lg: { x: 0.82, y: 0.5 }, dar: { x: 0.5, y: 0.17 } } as const;
 
 /**
- * Üniversite sayfasındaki konum kartı: şehir sayfasıyla aynı dot-matrix
+ * Üniversite sayfasındaki konum haritası: şehir sayfasıyla aynı dot-matrix
  * harita (DESIGN.md §4.17; Bilal, 24 Eyl 2026: "bu kart kısmına piksel
- * dokuları ekle"). Türkiye'de il turuncu noktalarla yanar; KKTC/yurt dışında
- * ülke kontürü + kampüs şehrinde iri turuncu piksel.
+ * dokuları ekle", sonra "4 kartın arkasına sarkabilir"). Türkiye'de il
+ * turuncu karelerle yanar; KKTC/yurt dışında ülke kontürü + kampüs şehrinde
+ * iri turuncu kare. Ebeveyn ızgara `relative isolate` olmalı.
  */
 export function UniversiteKonumHaritasi({
   universite,
@@ -26,55 +37,52 @@ export function UniversiteKonumHaritasi({
   il: string | null;
 }) {
   const yurtdisi = uniUlkeKonum(universite, il);
+  let harita: React.ReactNode = null;
+  let altYazi: React.ReactNode = null;
   if (yurtdisi) {
     const konum = yurtdisiUniKonum(universite, il);
-    return (
-      <KonumBolumu universite={universite}>
-        <UlkePikselHaritasi
-          ulke={yurtdisi.ulke}
-          sehir={konum ? { x: konum.x, y: konum.y } : null}
-          etiket={`${universite} konumunun ${yurtdisi.ulkeAd} haritasındaki görünümü${yurtdisi.sehir ? ` (${yurtdisi.sehir})` : ""}`}
-          doldur
-          className={KART_HARITA_SINIFI}
-        />
-        <p className="pointer-events-none absolute bottom-0 left-0 text-xs font-medium text-slate-500">
-          {yurtdisi.ulkeAd}
-          {yurtdisi.sehir ? ` · ${yurtdisi.sehir}` : ""}
-        </p>
-      </KonumBolumu>
+    harita = (
+      <UlkePikselHaritasi
+        ulke={yurtdisi.ulke}
+        sehir={konum ? { x: konum.x, y: konum.y } : null}
+        etiket={`${universite} konumunun ${yurtdisi.ulkeAd} haritasındaki görünümü${yurtdisi.sehir ? ` (${yurtdisi.sehir})` : ""}`}
+        doldur
+        odakHiza={ODAK_HIZA}
+      />
     );
-  }
-
-  if (!il || !HARITA_ILLERI.has(il)) return null;
-
-  return (
-    <KonumBolumu universite={universite}>
+    altYazi = (
+      <p className="pointer-events-none absolute bottom-0 left-0 text-xs font-medium text-slate-500">
+        {yurtdisi.ulkeAd}
+        {yurtdisi.sehir ? ` · ${yurtdisi.sehir}` : ""}
+      </p>
+    );
+  } else if (il && HARITA_ILLERI.has(il)) {
+    harita = (
       <TurkiyePikselHaritasi
         il={il}
         etiket={`${universite} konumunun Türkiye haritasındaki görünümü`}
         doldur
-        className={KART_HARITA_SINIFI}
+        odakHiza={ODAK_HIZA}
       />
-    </KonumBolumu>
-  );
-}
+    );
+  }
+  if (!harita) return null;
 
-function KonumBolumu({
-  universite,
-  children,
-}: {
-  universite: string;
-  children: React.ReactNode;
-}) {
   return (
-    <section
-      aria-labelledby="universite-konumu"
-      className="relative col-span-2 min-h-44 lg:col-span-1 lg:col-start-3 lg:row-start-1 lg:row-span-2 lg:min-h-0"
-    >
-      <h2 id="universite-konumu" className="sr-only">
-        {universite} kampüs konumu
-      </h2>
-      <div className="relative h-full min-h-44 w-full">{children}</div>
-    </section>
+    <>
+      {/* Yer tutucu: telefonda tam genişlikte bir satır, lg'de üçüncü sütun */}
+      <section
+        aria-labelledby="universite-konumu"
+        className="relative col-span-2 min-h-44 lg:col-span-1 lg:col-start-3 lg:row-start-1 lg:row-span-2 lg:min-h-0"
+      >
+        <h2 id="universite-konumu" className="sr-only">
+          {universite} kampüs konumu
+        </h2>
+        {altYazi}
+      </section>
+      <div className={KATMAN_SINIFI}>
+        <div className={IC_MASK_SINIFI}>{harita}</div>
+      </div>
+    </>
   );
 }