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>

docs/tasarim/DESIGN.md

@@ -459,10 +459,10 @@ bulunulan şehir `border-primary bg-primary text-white` + `aria-current="page"`.
 - **Şehir piksel haritası** — `sehir-piksel-haritasi.tsx`: **hero'daki dot-matrix Türkiye'nin
   kendisi** (Bilal, 24 Eyl 2026: ince taramalı ilk sürüm "oyunsu Apple/Duolingo hissine
   uymuyor" diye geri alındı; seçenekler A/B/C arasından "A, pikseller C'deki gibi iri"
-  seçildi). Izgara 72 sütun × 31 satır (`scripts/il-izgara-uret.ts` →
-  `src/lib/il-izgara-verisi.ts`; her il en az 2×2 kare), kare hücrenin %74'ü, altı farklı
-  opaklık, kıyının altına seyrelen serpinti, `text-primary` zemin, imleç yaklaşınca turuncuya
-  ısınma (`usePixelHeat`). Bulunulan ilin kareleri `fill-orange-500`, hücrenin %88'i kadar
+  seçildi). Izgara 56 sütun × 24 satır (`scripts/il-izgara-uret.ts` →
+  `src/lib/il-izgara-verisi.ts`; her il en az 2×2 kare; Bilal: "piksel detaylarını azalt"),
+  kare hücrenin %74'ü, altı farklı opaklık, serpinti yok, `text-primary` zemin, imleç
+  yaklaşınca turuncuya ısınma (`usePixelHeat`, meet/slice ve canlı viewBox ile). Bulunulan ilin kareleri `fill-orange-500`, hücrenin %88'i kadar
   iri, 35 ms arayla belirir (`kt-piksel-belir`) ve grup hâlinde nabız atar (`animate-pulse`
   3.6 s); hareketi azalt açıkken dolu ve durağan. KKTC/yurt dışı: ülke kontürü mavi doku,
   şehir merkezinde 2×2 hücrelik tek iri turuncu kare; şehri bilinmeyen "KIBRIS" için ülkenin
@@ -470,6 +470,19 @@ bulunulan şehir `border-primary bg-primary text-white` + `aria-current="page"`.
   `role="img"` + "İstanbul Türkiye haritasında". Üniversite sayfasının konum kartı
   (`universite-konum-haritasi.tsx`) aynı bileşeni kullanır. Veri taşıyan pikseldir (§1.2),
   süs ayraç yasağına girmez.
+- **Harita arka plandır, kesilmez** (Bilal, 24 Eyl 2026: "canvas net bir şekilde kesiliyor,
+  çok kötü"; "harita bulunduğu yerin tamamını kaplasın"). Şehir sayfasında `SehirYuzeyi`
+  kartını `doldur` (slice) ile kaplar, metin üstünde; kenarlar `mask-image` ile erir —
+  telefonda yukarıdan (metnin altında belirir), lg'de soldan (sağ yarıda belirir). Metin
+  sütunu lg'de %58, kart en az 26rem; telefonda altta 12–14rem harita payı. Üniversite konum
+  kartında radyal mask. Sert kenarlı, kırpılmış bir SVG asla görünmez.
+- **Yakınlaşma** (Bilal, 24 Eyl 2026: "ilin bulunduğu yere doğru harita büyüsün, sayfa
+  yüklendikten sonra delay ile motion ile"): SSR tüm ülke; yüklenince 0,7 s sonra viewBox 1,1 s
+  boyunca güçlü ease-out (`0.23, 1, 0.32, 1`) ile ilin çevresindeki kutuya kayar — en çok 2,4
+  kat (ülke haritasında şehir işaretine 1,8 kat). Kutu kabın o anki oranında kurulur ve il
+  `odakHiza` ile kabın istenen noktasına gelir (şehir sayfası: lg'de x 0,74 / y 0,5, telefonda
+  x 0,5 / y 0,78; konum kartı: orta). Kareler büyür, il kadraja gelir; ısı fırçası viewBox'ı
+  canlı okur. Hareketi azalt açıkken kutuya doğrudan atlanır. Sayfa başına tek yakınlaşma.
 
 ## 5. Yerleşim
 

scripts/il-izgara-uret.ts

@@ -1,6 +1,6 @@
 // Şehir haritası (DESIGN.md §4.17) için il ve ülke kontürlerini hero'nun
 // dot-matrix ızgarasına rasterize eder. Hero'daki TurkeyPixelMap 64 sütun;
-// burada 72 sütun ki her il en az birkaç kare alsın (Yalova, Kilis gibi
+// burada 56 sütun (Bilal, 24 Eyl 2026: "piksel detaylarını azalt"); her il en az birkaç kare alsın (Yalova, Kilis gibi
 // küçük iller için 2×2 blok garantisi vardır). Çıktı
 // src/lib/il-izgara-verisi.ts dosyasına yazılır ve commit'lenir.
 //
@@ -17,7 +17,7 @@ import { cities } from "turkey-map-react/lib/data";
 import { normalizeIlAdi, HARITA_UST_KIRPMA, HARITA_GENISLIK, HARITA_YUKSEKLIK } from "../src/lib/harita";
 import { ULKE_HARITALARI } from "../src/lib/harita-ulkeler-verisi";
 
-const SUTUN = 72;
+const SUTUN = 56;
 const HUCRE = HARITA_GENISLIK / SUTUN;
 const YUKSEKLIK = HARITA_YUKSEKLIK - HARITA_UST_KIRPMA; // 447
 const SATIR = Math.ceil(YUKSEKLIK / HUCRE);

src/components/use-pixel-heat.ts

@@ -36,8 +36,9 @@ type HeatTarget = {
 
 type HeatInstance = {
   svg: SVGSVGElement;
-  viewW: number;
   radius: number;
+  /** preserveAspectRatio "slice" mi (kabı doldurur) */
+  slice: boolean;
   baseColor: string;
   pixels: HeatTarget[];
   hot: Set<SVGRectElement>;
@@ -65,7 +66,18 @@ function tara() {
   for (const inst of instances) {
     const rect = inst.svg.getBoundingClientRect();
     if (rect.width === 0) continue;
-    const scale = rect.width / inst.viewW;
+    // viewBox her taramada okunur: şehir haritası (sehir-piksel-haritasi.tsx)
+    // 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 || !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
@@ -78,8 +90,8 @@ function tara() {
     ) {
       continue;
     }
-    const x = (e.clientX - rect.left) / scale;
-    const 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;
@@ -140,8 +152,7 @@ export function usePixelHeat(
     // Dokunmatik cihazlarda hover yanlış tetiklenir; efekti imleçli cihazlara sakla
     if (!window.matchMedia(FINE_POINTER_QUERY).matches) return;
 
-    const viewW = svg.viewBox.baseVal.width;
-    if (!viewW) return;
+    if (!svg.viewBox.baseVal.width) return;
 
     const pixels: HeatTarget[] = Array.from(
       svg.querySelectorAll<SVGRectElement>("[data-px]"),
@@ -155,8 +166,8 @@ export function usePixelHeat(
 
     const inst: HeatInstance = {
       svg,
-      viewW,
       radius,
+      slice: (svg.getAttribute("preserveAspectRatio") ?? "").includes("slice"),
       baseColor: getComputedStyle(svg).color,
       pixels,
       hot: new Set(),

src/features/katalog/components/il-icerik.tsx

@@ -125,11 +125,17 @@ export function IlIcerik({ slug }: { slug: string }) {
       </nav>
 
       <NavBaslik baslikId="il-baslik" ad={`${il.ad} üniversiteleri`} />
-      {/* Başlık yüzeyi: beyaz kart + slate piksel doku, şehrin dot-matrix
+      {/* Başlık yüzeyi: beyaz kart, arka planı kaplayan dot-matrix şehir
           haritası (DESIGN.md §4.17). lg altında metin ortalı, harita altta. */}
       <SehirYuzeyi
-        seed={31}
-        harita={<SehirPikselHaritasi il={il.il} ad={il.ad} />}
+        harita={
+          <SehirPikselHaritasi
+            il={il.il}
+            ad={il.ad}
+            doldur
+            odakHiza={{ lg: { x: 0.74, y: 0.5 }, dar: { x: 0.5, y: 0.78 } }}
+          />
+        }
         metin={
           <div className="text-center lg:text-left">
             <h1

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

@@ -5,16 +5,28 @@
  * Türkiye'nin (turkey-pixel-map.tsx) şehir sayfası ve üniversite konum kartı
  * için genellenmiş hâli. Aynı dil: iri kareler, altı farklı opaklık, kıyının
  * altına seyrelen serpinti, imleç yaklaşınca turuncuya ısınan pikseller
- * (usePixelHeat). Fark: ızgara 72 sütun (her il en az 2×2 kare) ve
- * bulunulan ilin kareleri turuncu, hücrenin %88'i kadar iri (Bilal, 24 Eyl
- * 2026: "C'deki gibi piksel olabilir"), sırayla belirir ve nabız atar.
+ * (usePixelHeat). Fark: ızgara 56 sütun (her il en az 2×2 kare; Bilal, 24
+ * Eyl 2026: "piksel detaylarını azalt"), serpinti yok, bulunulan ilin
+ * kareleri turuncu, hücrenin %88'i kadar iri ("C'deki gibi"), sırayla
+ * belirir ve nabız atar.
  *
  * Markup hero'daki gibi deterministik string olarak üretilir ve
  * dangerouslySetInnerHTML ile basılır: ~1300 rect React elemanı olarak
  * hydrate edilmez; server ve client aynı çıktıyı verir.
+ *
+ * Yakınlaşma (Bilal, 24 Eyl 2026: "ilin bulunduğu yere doğru harita büyüsün,
+ * sayfa yüklendikten sonra delay ile"): SSR tüm ülkeyi basar; yüklenince
+ * ODAK_GECIKME sonra viewBox, ilin çevresindeki kutuya doğru (en çok
+ * ODAK_ZOOM kat) güçlü ease-out ile kayar — kareler büyür, il kadraja
+ * gelir. Kutu kabın o anki oranında kurulur ve il `odakHiza` ile kabın
+ * istenen noktasına (ör. sağ orta, metnin boş bıraktığı yere) getirilir.
+ * Harita bir arka plan gibi kabı doldurur (`doldur`: slice); kesik kenar
+ * kalmasın diye çağıran kenarları mask ile eritir (Bilal: "canvas net bir
+ * şekilde kesiliyor, çok kötü"). Hareketi azalt açıkken kutuya doğrudan atlanır.
  */
 
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
+import { animate } from "motion";
 import { usePixelHeat } from "@/components/use-pixel-heat";
 import { ilUlkeHaritasi, type UlkeKodu } from "@/lib/harita-ulkeler";
 import {
@@ -31,12 +43,59 @@ const INSET = (CELL - DOT) / 2;
 // Vurgu kareleri iri ve dolu (C seçeneğinin hissi)
 const DOT_VURGU = CELL * 0.88;
 const INSET_VURGU = (CELL - DOT_VURGU) / 2;
-// Güney kıyının altına seyrelerek dağılan serpinti derinliği (hücre)
-const SERPINTI = 5;
 const VIEW_W = SUTUN * CELL;
-const VIEW_H = (SATIR + SERPINTI) * CELL;
+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;
+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];
+/** Vurgunun viewBox'taki sınır kutusu [x0, y0, x1, y1] */
+type Sinir = readonly [number, number, number, number];
+
+/** Odak konumu: ilin kabın neresine geleceği (0–1, sol/üst = 0). */
+export type OdakHiza = { readonly x: number; readonly y: number };
+const ORTA: OdakHiza = { x: 0.5, y: 0.5 };
+
+function sinirKutusu(hucreler: readonly IzgaraHucre[]): Sinir | null {
+  if (hucreler.length === 0) return null;
+  let q0 = Infinity, q1 = -Infinity, r0 = Infinity, r1 = -Infinity;
+  for (const [q, r] of hucreler) {
+    if (q < q0) q0 = q;
+    if (q > q1) q1 = q;
+    if (r < r0) r0 = r;
+    if (r > r1) r1 = r;
+  }
+  return [
+    (q0 - ODAK_PAY) * CELL,
+    (r0 - ODAK_PAY) * CELL,
+    (q1 + 1 + ODAK_PAY) * CELL,
+    (r1 + 1 + ODAK_PAY) * CELL,
+  ];
+}
+
+/**
+ * Odak kutusu: kabın oranında (kesme olmasın), en çok `zoom` kat büyüten,
+ * ilin merkezini kabın (hiza.x, hiza.y) noktasına getiren viewBox. Harita
+ * dışına taşabilir; kenarlar çağıranın mask'ıyla eridiği için sorun olmaz.
+ */
+function odakKutusu(sinir: Sinir, oran: number, zoom: number, hiza: OdakHiza): Kutu {
+  const [x0, y0, x1, y1] = sinir;
+  let w = Math.max(x1 - x0, VIEW_W / zoom);
+  let h = w / oran;
+  if (h < y1 - y0) {
+    h = y1 - y0;
+    w = h * oran;
+  }
+  const cx = (x0 + x1) / 2, cy = (y0 + y1) / 2;
+  return [cx - w * hiza.x, cy - h * hiza.y, w, h];
+}
 
 const OPACITIES = [0.3, 0.16, 0.24, 0.12, 0.27, 0.19];
 const opacityFor = (x: number, y: number) =>
@@ -45,12 +104,6 @@ const VURGU_OPACITIES = [1, 0.9, 0.82, 0.95];
 const vurguOpacityFor = (x: number, y: number) =>
   VURGU_OPACITIES[(x * 3 + y * 5) % VURGU_OPACITIES.length];
 
-// Deterministik sözde-rastgele (hero ile aynı): server ve client aynı deseni üretir
-const hash = (x: number, y: number, seed = 0) => {
-  const n = Math.sin(x * 127.1 + y * 311.7 + seed * 74.7) * 43758.5453;
-  return n - Math.floor(n);
-};
-
 const f = (n: number) => n.toFixed(2);
 
 function zeminKare(q: number, r: number, op: number) {
@@ -69,28 +122,12 @@ function markupUret(
   zemin: readonly IzgaraHucre[],
   vurgu: readonly IzgaraHucre[],
   isaret: IzgaraHucre | null,
-): string {
+): Harita {
   const parts: string[] = [];
   const vurguSet = new Set(vurgu.map(([q, r]) => `${q},${r}`));
-  const enAlt: number[] = Array(SUTUN).fill(-1);
   for (const [q, r] of zemin) {
     if (vurguSet.has(`${q},${r}`)) continue;
     parts.push(zeminKare(q, r, opacityFor(q, r)));
-    if (r > enAlt[q]) enAlt[q] = r;
-  }
-  for (const [q, r] of vurgu) if (r > enAlt[q]) enAlt[q] = r;
-  // Kıyının altına serpinti (hero ile aynı kural): kıyıdan uzaklaştıkça
-  // seyrelen, derinlikle sönen kareler; ısı fırçasına katılırlar.
-  for (let q = 0; q < SUTUN; q++) {
-    if (enAlt[q] < 0) continue;
-    for (let d = 1; d <= SERPINTI; d++) {
-      const r = enAlt[q] + d;
-      if (r >= SATIR + SERPINTI) break;
-      const density = 0.05 + 0.4 * (1 - (d - 1) / SERPINTI) ** 2;
-      if (hash(q, r) > density) continue;
-      const op = Math.round(opacityFor(q, r) * (1 - d / (SERPINTI + 1)) * 100) / 100;
-      parts.push(zeminKare(q, r, op));
-    }
   }
   // Vurgu: sırayla belirir (kt-piksel-belir), grup hâlinde nabız atar
   parts.push(
@@ -105,11 +142,17 @@ function markupUret(
     );
   }
   parts.push("</g>");
-  return parts.join("");
+  // Odak: il kareleri; ülke haritasında şehir işareti (2×2) ya da ülkenin kendisi
+  const odak = isaret
+    ? { sinir: sinirKutusu([isaret, [isaret[0] + 1, isaret[1] + 1]]), zoom: 1.8 }
+    : { sinir: sinirKutusu(vurgu), zoom: ODAK_ZOOM };
+  return { html: parts.join(""), ...odak };
 }
 
-const onbellek = new Map<string, string>();
-function markup(anahtar: string, uret: () => string): string {
+type Harita = { html: string; sinir: Sinir | null; zoom: number };
+
+const onbellek = new Map<string, Harita>();
+function markup(anahtar: string, uret: () => Harita): Harita {
   let m = onbellek.get(anahtar);
   if (!m) {
     m = uret();
@@ -118,26 +161,73 @@ function markup(anahtar: string, uret: () => string): string {
   return m;
 }
 
-function PikselSvg({
-  html,
-  etiket,
-  className,
-}: {
-  html: string;
+const kutuMetni = (k: Kutu) => k.map((n) => n.toFixed(1)).join(" ");
+
+type HaritaProps = {
   etiket: string;
   className?: string;
-}) {
+  /** Kabı doldur (preserveAspectRatio slice) — arka plan kullanımı */
+  doldur?: boolean;
+  /** İlin kabın neresine geleceği; `lg` geniş ekranda, `dar` altında */
+  odakHiza?: { lg: OdakHiza; dar: OdakHiza };
+};
+
+function PikselSvg({
+  harita,
+  etiket,
+  className,
+  doldur = false,
+  odakHiza,
+}: HaritaProps & { harita: Harita }) {
   const svgRef = useRef<SVGSVGElement>(null);
   usePixelHeat(svgRef, { radius: ISI_YARICAPI });
+
+  // Yüklenince gecikmeyle odağa yakınlaş. viewBox her karede yazılır; ısı
+  // fırçası viewBox'ı canlı okuduğu için imleç hep doğru kareyi ısıtır.
+  const { sinir, zoom } = harita;
+  const hizaLg = odakHiza?.lg ?? ORTA;
+  const hizaDar = odakHiza?.dar ?? ORTA;
+  useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg || !sinir) return;
+    const rect = svg.getBoundingClientRect();
+    const oran = rect.width && rect.height ? rect.width / rect.height : VIEW_W / VIEW_H;
+    const genis = window.matchMedia("(min-width: 1024px)").matches;
+    const odak = odakKutusu(sinir, oran, zoom, genis ? hizaLg : hizaDar);
+    const yaz = (k: Kutu) => svg.setAttribute("viewBox", kutuMetni(k));
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      yaz(odak);
+      return () => yaz(TAM_KUTU);
+    }
+    const bas = TAM_KUTU;
+    const kontrol = animate(0, 1, {
+      delay: ODAK_GECIKME,
+      duration: ODAK_SURE,
+      ease: [...ODAK_EASE],
+      onUpdate: (t) =>
+        yaz([
+          bas[0] + (odak[0] - bas[0]) * t,
+          bas[1] + (odak[1] - bas[1]) * t,
+          bas[2] + (odak[2] - bas[2]) * t,
+          bas[3] + (odak[3] - bas[3]) * t,
+        ]),
+    });
+    return () => {
+      kontrol.stop();
+      yaz(TAM_KUTU);
+    };
+  }, [sinir, zoom, hizaLg, hizaDar]);
+
   return (
     <svg
       ref={svgRef}
       viewBox={`0 0 ${VIEW_W} ${VIEW_H}`}
-      className={cn("h-auto w-full text-primary", className)}
+      preserveAspectRatio={doldur ? "xMidYMid slice" : "xMidYMid meet"}
+      className={cn(doldur ? "h-full w-full" : "h-auto w-full", "text-primary", className)}
       role="img"
       aria-label={etiket}
       // Statik, deterministik markup — her render'da yeniden kurulmaz
-      dangerouslySetInnerHTML={{ __html: html }}
+      dangerouslySetInnerHTML={{ __html: harita.html }}
     />
   );
 }
@@ -147,17 +237,12 @@ const TUM_IL_HUCRELERI = Object.values(IL_HUCRELERI).flat();
 /** Türkiye; `il` (DB biçimi, ör. "İZMİR") turuncu karelerle yanar. */
 export function TurkiyePikselHaritasi({
   il,
-  etiket,
-  className,
-}: {
-  il: string;
-  etiket: string;
-  className?: string;
-}) {
-  const html = markup(`tr:${il}`, () =>
+  ...props
+}: HaritaProps & { il: string }) {
+  const harita = markup(`tr:${il}`, () =>
     markupUret(TUM_IL_HUCRELERI, IL_HUCRELERI[il] ?? [], null),
   );
-  return <PikselSvg html={html} etiket={etiket} className={className} />;
+  return <PikselSvg harita={harita} {...props} />;
 }
 
 /**
@@ -167,16 +252,13 @@ export function TurkiyePikselHaritasi({
 export function UlkePikselHaritasi({
   ulke,
   sehir,
-  etiket,
-  className,
-}: {
+  ...props
+}: HaritaProps & {
   ulke: UlkeKodu;
   /** viewBox koordinatı (harita-ulkeler'deki proje ile) */
   sehir: { x: number; y: number } | null;
-  etiket: string;
-  className?: string;
 }) {
-  const html = markup(
+  const harita = markup(
     `ulke:${ulke}:${sehir ? `${Math.round(sehir.x)},${Math.round(sehir.y)}` : "-"}`,
     () => {
       const h = ULKE_HUCRELERI[ulke];
@@ -188,27 +270,26 @@ export function UlkePikselHaritasi({
       return markupUret(h.baglam, h.ulke, null);
     },
   );
-  return <PikselSvg html={html} etiket={etiket} className={className} />;
+  return <PikselSvg harita={harita} {...props} />;
 }
 
 /** Şehir sayfası: il değerinden Türkiye ya da ülke haritasını seçer. */
 export function SehirPikselHaritasi({
   il,
   ad,
-  className,
-}: {
+  ...props
+}: Omit<HaritaProps, "etiket"> & {
   /** DB biçiminde il ("İSTANBUL", "LEFKOŞA", "KIBRIS") */
   il: string;
   /** Görünen ad (etiket için) */
   ad: string;
-  className?: string;
 }) {
   if (IL_HUCRELERI[il]) {
     return (
       <TurkiyePikselHaritasi
         il={il}
         etiket={`${ad} Türkiye haritasında`}
-        className={className}
+        {...props}
       />
     );
   }
@@ -219,7 +300,7 @@ export function SehirPikselHaritasi({
       ulke={ulke.ulke}
       sehir={ulke.sehir ? { x: ulke.sehir.x, y: ulke.sehir.y } : null}
       etiket={`${ad} ${ulke.ulkeAd} haritasında`}
-      className={className}
+      {...props}
     />
   );
 }

src/features/katalog/components/sehir-yuzeyi.tsx

@@ -1,34 +1,38 @@
-"use client";
-
-import { useRef, type ReactNode } from "react";
-import { PikselZemin } from "@/components/piksel-zemin";
+import type { ReactNode } from "react";
 
 /**
- * Şehir sayfasının başlık yüzeyi (DESIGN.md §4.17): beyaz kart, slate
- * piksel doku, sağda (lg) ya da altta (telefon) şehrin dot-matrix haritası.
- * Doku ile harita üst üste binmez: harita kabı `haric` ile zemine verilir
- * (§10.8 kuralı). Yalnız ref için client; metin ve harita sunucudan gelir.
+ * Şehir sayfasının başlık yüzeyi (DESIGN.md §4.17): beyaz kart, arka
+ * planında kartı dolduran dot-matrix şehir haritası (hero'daki gibi metnin
+ * arkasında). Harita `doldur` ile kabı kaplar; kenarları mask ile erir ki
+ * kesik bir kanvas görünmesin (Bilal, 24 Eyl 2026: "canvas net bir şekilde
+ * kesiliyor, çok kötü"). Geniş ekranda (lg) metin solda, harita sağ yarıda
+ * belirginleşir; telefonda metin üstte, harita altta.
+ * Ayrı piksel doku (PikselZemin) yok: harita zaten piksel.
  */
 export function SehirYuzeyi({
   metin,
   harita,
-  seed = 31,
 }: {
   metin: ReactNode;
   harita: ReactNode;
-  seed?: number;
 }) {
-  const haritaRef = useRef<HTMLDivElement>(null);
   return (
-    <section className="relative isolate mt-6 overflow-hidden rounded-3xl border border-slate-200 bg-white p-6 sm:p-8">
-      <PikselZemin ton="acik" seed={seed} haric={haritaRef} />
-      <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,24rem)] lg:items-center lg:gap-10">
-        <div>{metin}</div>
-        {harita ? (
-          <div ref={haritaRef} className="mx-auto w-full max-w-md lg:max-w-none">
+    <section className="relative isolate mt-6 overflow-hidden rounded-3xl border border-slate-200 bg-white">
+      {/* İki katlı mask: dış kat metnin tarafına doğru eritir (telefonda
+          yukarı, lg'de sola), iç kat dik yöndeki iki kenarı eritir — hiçbir
+          kenarda yarım kesilmiş kare kalmaz. */}
+      {harita ? (
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-0 -z-10 [mask-image:linear-gradient(to_bottom,transparent_0%,rgba(0,0,0,0.18)_40%,black_74%,black_90%,transparent_100%)] lg:[mask-image:linear-gradient(to_right,transparent_28%,rgba(0,0,0,0.22)_50%,black_72%,black_92%,transparent_100%)]"
+        >
+          <div className="h-full w-full [mask-image:linear-gradient(to_right,transparent_0%,black_10%,black_90%,transparent_100%)] lg:[mask-image:linear-gradient(to_bottom,transparent_0%,black_14%,black_86%,transparent_100%)]">
             {harita}
           </div>
-        ) : null}
+        </div>
+      ) : null}
+      <div className="p-6 pb-48 sm:p-8 sm:pb-56 lg:min-h-[26rem] lg:max-w-[58%] lg:pb-8">
+        {metin}
       </div>
     </section>
   );

src/features/katalog/components/universite-konum-haritasi.tsx

@@ -8,6 +8,9 @@ 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%)]";
 
 /**
  * Üniversite sayfasındaki konum kartı: şehir sayfasıyla aynı dot-matrix
@@ -31,7 +34,8 @@ export function UniversiteKonumHaritasi({
           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})` : ""}`}
-          className="absolute inset-0 h-full w-full"
+          doldur
+          className={KART_HARITA_SINIFI}
         />
         <p className="pointer-events-none absolute bottom-0 left-0 text-xs font-medium text-slate-500">
           {yurtdisi.ulkeAd}
@@ -48,7 +52,8 @@ export function UniversiteKonumHaritasi({
       <TurkiyePikselHaritasi
         il={il}
         etiket={`${universite} konumunun Türkiye haritasındaki görünümü`}
-        className="absolute inset-0 h-full w-full"
+        doldur
+        className={KART_HARITA_SINIFI}
       />
     </KonumBolumu>
   );