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>
2026-09-24 15:37:10 +03:00
parent c60e3ab409
commit 6690d3b779
5 changed files with 79 additions and 59 deletions
--- a/src/features/katalog/components/sehir-piksel-haritasi.tsx
+++ b/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,
--- a/src/features/katalog/components/sehir-yuzeyi.tsx
+++ b/src/features/katalog/components/sehir-yuzeyi.tsx
@@ -24,9 +24,9 @@ export function SehirYuzeyi({
      {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%)]"
+          className="pointer-events-none absolute inset-0 -z-10 [mask-image:linear-gradient(to_bottom,transparent_4%,rgba(0,0,0,0.06)_28%,rgba(0,0,0,0.3)_50%,black_72%,black_90%,transparent_100%)] lg:[mask-image:linear-gradient(to_right,transparent_22%,rgba(0,0,0,0.06)_40%,rgba(0,0,0,0.3)_56%,black_74%,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%)]">
+          <div className="h-full w-full [mask-image:linear-gradient(to_right,transparent_0%,black_14%,black_86%,transparent_100%)] lg:[mask-image:linear-gradient(to_bottom,transparent_0%,black_18%,black_82%,transparent_100%)]">
            {harita}
          </div>
        </div>
--- a/src/features/katalog/components/universite-icerik.tsx
+++ b/src/features/katalog/components/universite-icerik.tsx
@@ -625,7 +625,10 @@ export function UniversiteIcerik({

            {ustSiraSatiri}

-            <div className="mt-8 grid grid-cols-2 gap-4 lg:grid-cols-[1fr_1fr_1.35fr] lg:grid-rows-2">
+            {/* relative isolate: konum haritası ızgaranın arkasına serbest
+                katman olarak yayılır, dört kartın altına sarkar (Bilal, 24 Eyl
+                2026); üçüncü sütun yalnız yer tutar. */}
+            <div className="relative isolate mt-8 grid grid-cols-2 gap-4 lg:grid-cols-[1fr_1fr_1.35fr] lg:grid-rows-2">
              <UniversiteKonumHaritasi universite={uni.ad} il={uni.il} />
              {/* Şablon tam 4 hücre bırakıyor: masaüstünde harita 3. sütunu
                  iki satır boyunca kaplıyor, 5. kart ızgarayı bozar. Fakülte
--- a/src/features/katalog/components/universite-konum-haritasi.tsx
+++ b/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>
+    </>
  );
 }