feat(tasarim): şehir sayfasına hero dilinde piksel harita; üniversite konum kartı da aynı harita

- scripts/il-izgara-uret.ts → src/lib/il-izgara-verisi.ts: 81 il ve 7 ülke
  kontürü hero'nun dot-matrix ızgarasına (72×31) rasterize; küçük iller 2×2 garanti.
- SehirPikselHaritasi: iri kareler, altı opaklık, kıyı serpintisi, usePixelHeat
  ısı fırçası; bulunulan il iri turuncu karelerle sırayla belirir (kt-piksel-belir)
  ve nabız atar; KKTC/yurt dışında şehir merkezinde 2×2 iri kare.
- Şehir sayfası başlığı beyaz piksel dokulu yüzeyde (SehirYuzeyi), harita sağda/altta.
- UniversiteKonumHaritasi düz SVG yerine aynı piksel haritayı kullanır.
- DESIGN.md §4.12/§4.17/§10.8 güncellendi.

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

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

@@ -0,0 +1,35 @@
+"use client";
+
+import { useRef, type ReactNode } from "react";
+import { PikselZemin } from "@/components/piksel-zemin";
+
+/**
+ * Ş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.
+ */
+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">
+            {harita}
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}