fix(tasarim): şehir haritası kartı arka plan gibi kaplar, kenarlar erir; pikseller azaldı

- Izgara 72 → 56 sütun, serpinti kaldırıldı (Bilal: "piksel detaylarını azalt").
- Harita `doldur` (slice) ile SehirYuzeyi kartını kaplar, metin üstünde; iki
  katlı mask ile hiçbir kenarda kesik kare kalmaz (Bilal: "canvas net bir
  şekilde kesiliyor"). Telefonda altta, lg'de sağ yarıda belirir.
- Yakınlaşma kutusu kabın oranında kurulur, il `odakHiza` ile kabın istenen
  noktasına gelir (şehir sayfası: lg sağ orta, telefon alt orta; konum kartı orta).
- usePixelHeat meet/slice + ortalama ofsetini hesaba katar.
- Üniversite konum kartı: kartı doldurur, radyal erime.

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

src/components/use-pixel-heat.ts

@@ -37,6 +37,8 @@ type HeatTarget = {
 type HeatInstance = {
   svg: SVGSVGElement;
   radius: number;
+  /** preserveAspectRatio "slice" mi (kabı doldurur) */
+  slice: boolean;
   baseColor: string;
   pixels: HeatTarget[];
   hot: Set<SVGRectElement>;
@@ -68,8 +70,14 @@ function tara() {
     // yüklendikten sonra ile doğru yakınlaşır; kutunun oranı SVG'ninkiyle
     // aynı tutulduğu için ölçek = genişlik oranı, orijin = viewBox.x/y.
     const vb = inst.svg.viewBox.baseVal;
-    if (!vb.width) continue;
-    const scale = rect.width / vb.width;
+    if (!vb.width || !vb.height) continue;
+    // xMidYMid meet (varsayılan) ya da slice: ölçek en küçük/en büyük oran,
+    // artan kenar ortalanır.
+    const sx = rect.width / vb.width;
+    const sy = rect.height / vb.height;
+    const scale = inst.slice ? Math.max(sx, sy) : Math.min(sx, sy);
+    const ox = (rect.width - vb.width * scale) / 2;
+    const oy = (rect.height - vb.height * scale) / 2;
     const pad = inst.radius * scale;
     // İmleç fırça menzilinin tamamen dışındaysa ve sıcak piksel yoksa
     // bu örnek için hiç hesap yapma
@@ -82,8 +90,8 @@ function tara() {
     ) {
       continue;
     }
-    const x = vb.x + (e.clientX - rect.left) / scale;
-    const y = vb.y + (e.clientY - rect.top) / scale;
+    const x = vb.x + (e.clientX - rect.left - ox) / scale;
+    const y = vb.y + (e.clientY - rect.top - oy) / scale;
     for (const p of inst.pixels) {
       const d2 = (p.cx - x) ** 2 + (p.cy - y) ** 2;
       const isHot = d2 <= inst.radius * inst.radius;
@@ -159,6 +167,7 @@ export function usePixelHeat(
     const inst: HeatInstance = {
       svg,
       radius,
+      slice: (svg.getAttribute("preserveAspectRatio") ?? "").includes("slice"),
       baseColor: getComputedStyle(svg).color,
       pixels,
       hot: new Set(),