fix(tasarim): piksel zemin yalnız CTA yüzeylerinde, kabın ölçüsüne göre, küçük kare yok

Bilal (24 Eyl 2026): ana sayfa CTA'sında doku hiç görünmüyordu, bazı kartlarda çok azdı; sonra "çok fazla piksel, küçük olanlar hiç olmasın" ve "/sonuc'taki kartın arkasına da piksel koymuşsun; pikseller CTA'larda olacak sadece". - Kök neden: PixelMasonry sabit 420×120 çizimi kaplayacak şekilde ölçekleniyordu; yüksek kartlarda görünen kısım boş banda düşüyordu. Artık kabın gerçek ölçüsüne göre üretiliyor (ResizeObserver), yalnız kenar çerçevesinde, orta boş; `haric` verilen öğenin (24'lük piksel tablosu) çevresi her genişlikte boş. Sunucuda boş, ölçülünce belirir. - Küçük (tek hücre) kare yok: 4×4 makro hücrede 2–4 hücrelik kareler, iri olan seyrek ve silik. Ölçüm: kapanış kartı 1280 px'te 58 kare (tabloya binen 0), 375 px'te 27 kare. - Beyaz içerik kartlarından zemin geri alındı (tadımlık, /listem üretim ve kilit kartları, boş durum, sıralama-yok, meraklısına, paket kartları, kaydet bandı, katalog üstü kompakt satır, /sonuc "listen hazır"). Kalanlar: CtaBandi, PikselCtaYuzeyi, arama penceresi kartı. PikselZemin'in açık tonu kaldırıldı. DESIGN.md §10.8 güncellendi. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-09-24 12:38:47 +03:00
parent c90c186b86
commit 613d9e012a
17 changed files with 173 additions and 144 deletions
--- a/docs/tasarim/DESIGN.md
+++ b/docs/tasarim/DESIGN.md
@@ -677,9 +677,11 @@ karar.

 - Zemin `bg-primary` (sitenin mavisi), köşe `rounded-2xl`, yazı beyaz; alt satır da beyaz
  (`text-white`, `slate-300` değil). Piksel dokusu `PixelMasonry` (Bilal, 24 Eyl 2026: "arka
-  planda büyüklü küçüklü, masonry şeklinde"): 1–3 hücrelik kareler 3×3'lük makro hücrelere
-  kaymış düşer, çakışmaz ama hizaya girmez; orta bant (%22–78) boş, kenarlara doğru yoğun; iri
-  kare daha silik; **durağan** — imleç ısı fırçasına katılmaz, üzerine gelince hiçbir şey
+  planda büyüklü küçüklü, masonry şeklinde"): 2–4 hücrelik kareler 4×4'lük makro hücrelere
+  kaymış düşer, çakışmaz ama hizaya girmez. Doku **kabın gerçek ölçüsüne göre** üretilir
+  (ResizeObserver; sabit çizimi ölçeklemek yüksek kartlarda görünen kısmı boş banda düşürüyordu,
+  24 Eyl 2026'da yaşandı): kısa kenarın %30'u kadar kenar çerçevesi kenara doğru yoğunlaşır,
+  orta tamamen boş; küçük kare yok (2–4 hücre), iri kare daha silik; **durağan** — imleç ısı fırçasına katılmaz, üzerine gelince hiçbir şey
  olmaz (Bilal, 24 Eyl 2026); yalnız seyrek turuncu vurgu kareleri kendi kendine yavaşça nefes
  alır. Kap `relative isolate
  overflow-hidden`, doku `-inset-y-6 -z-10`. Eşit ızgaralı eski `PixelField` kaldırıldı.
@@ -691,19 +693,16 @@ karar.
  kart varyantı, "Kendi Listem" çekmecesinin altı (kompakt). Aynı sayfadaki iki band farklı
  `seed` alır.

-**Her CTA benzeri yüzeyin arkasında piksel zemin — `PikselZemin`, `src/components/piksel-zemin.tsx`**
-(Bilal, 24 Eyl 2026: "piksel arka planları her CTA benzeri kısmın arkasında olmalı, masonry gibi
-büyüklü küçüklü"). CTA benzeri yüzey = tek bir aksiyona çağıran kart, bant, boş durum ya da
-sayfa bölümü. Kap `relative isolate overflow-hidden`; zemin ilk çocuk. Açık kartta
-`ton="acik"` (silik mavi, `text-primary/70`), mavi bant ve koyu kartta `ton="koyu"` (beyaz).
-`CtaBandi` ve `PikselCtaYuzeyi` de bunu kullanır. Kapsananlar: `/sonuc` "24 tercihlik listen
-hazır" kartı, `/listem` dört üretim kartı + boş durum + kilit kartı, tadımlık kartı,
-sıralama-yok sayfası, meraklısına kapanış kartı, ana sayfa ve `/paket` ana paket kartı, kaydet
-bandı, katalog üstü kompakt satır, arama penceresi kartı. **Kapsam dışı:** form kartları (giriş,
-ödeme formu), durum kartları (ödeme sonucu), modal düğmeleri, hata/404 sayfası, yan kredi
-kartları — bunlar tek aksiyona çağıran yüzey değil. Yeni bir CTA yüzeyi açan ajan zemini
-ekler ve bu listeye yazar. Band üstündeki ikincil metin `text-white/90`, ince yazı `text-white/70`;
-  `slate-300`/`slate-400` yazılmaz.
+**Piksel zemin yalnız CTA yüzeylerinde — `PikselZemin`, `src/components/piksel-zemin.tsx`**
+(Bilal, 24 Eyl 2026: önce "her CTA benzeri kısmın arkasında olmalı", sonra "/sonuc'taki kartın
+arkasına da piksel koymuşsun; pikseller CTA'larda olacak sadece"). CTA yüzeyi = renkli zeminli
+çağrı yüzeyi: mavi `CtaBandi`, koyu kapanış kartı `PikselCtaYuzeyi`, arama penceresindeki koyu
+kart. Beyaz içerik kartlarına (tadımlık, `/listem` üretim/kilit kartları, paket kartı, kaydet
+bandı, katalog üstü kompakt satır, boş durumlar, sıralama-yok sayfası) **konmaz** — 24 Eyl'de
+denendi ve geri alındı. Kap `relative isolate overflow-hidden`; zemin ilk çocuk; kareler beyaz.
+Doku kabın gerçek ölçüsüne göre üretilir: yalnız kenar çerçevesinde (kısa kenarın %30'u), orta
+tamamen boş; **küçük kare yok**, 2–4 hücrelik (17/27/37 px) kareler, iri olan seyrek ve daha
+silik (Bilal: "çok fazla piksel, küçük olanlar hiç olmasın").

 **Kapanış yüzeyi — `PikselCtaYuzeyi`, `src/components/piksel-cta-yuzeyi.tsx` (yalnız ana
 sayfa kapanışı "Tercih listen, pişmanlık listesi olmasın").** Bilal'in kararı (24 Eyl 2026):
@@ -719,10 +718,9 @@ yok** (Bilal, 24 Eyl 2026: kaldırıldı); `FUNNEL_METINLERI` yalnız arama penc
  nabız atar (`kt-piksel-nabiz`). Hareketi azalt: dolu, durağan. Renk her zaman
  `PikselListeAciklama` metniyle.
 - Piksel tablosunun arkası boş kalır (Bilal, 24 Eyl 2026: "arkasına çok piksel yığılmış"):
-  telefon/tablette liste üstte ortada, dokunun boş bandında; `lg`'de liste sağ sütunda olduğu
-  için doku yalnız sol %16'da ve seyrek (`PikselZemin bosBant={[0.16, 1]} yogunluk={0.7}`).
-  Kural genel: bir kreatif ya da iri sayı piksel zeminin üstüne geliyorsa `bosBant` ile o
-  bölge boşaltılır; doku ile kreatif üst üste binmez.
+  tablo kabı `haric` ile zemine verilir, doku onun çevresini (14 px payla) her genişlikte boş
+  bırakır. Kural genel: bir kreatif ya da iri sayı piksel zeminin üstüne geliyorsa `haric` ile
+  boşaltılır; doku ile kreatif üst üste binmez.
 - Bu yüzey **sayfada bir kez** ve yalnız kapanışta durur; ara paneller ve çekmece mavi banttır.
  Yeni bir kreatif fikri (veriyi piksele çeviren, imlece tepki veren) önce burada denenir.
 - Çekmece başlığında denenen "gerçek liste" pikseli (12×2, her kare tercihin riski) **kaldırıldı**:
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -28,7 +28,6 @@ import {
  SectionEyebrow,
 } from "@/components/pixel-decor";
 import { PikselCtaYuzeyi } from "@/components/piksel-cta-yuzeyi";
-import { PikselZemin } from "@/components/piksel-zemin";
 import { MAX_REVIZYON, URUNLER } from "@/lib/credits";
 import { VERI_YIL_SAYISI } from "@/lib/veri-kapsami";
 import {
@@ -555,9 +554,8 @@ export default function Home() {
            >
              <Reveal
                delay={0.08}
-                className="relative isolate overflow-hidden rounded-2xl border-2 border-orange-500 bg-white p-8 shadow-sm"
+                className="rounded-2xl border-2 border-orange-500 bg-white p-8 shadow-sm"
              >
-                <PikselZemin seed={43} />
                <div className="flex flex-wrap items-baseline justify-between gap-2">
                  <h3 className="font-heading text-xl font-bold">
                    {URUNLER.paket.label}
--- a/src/components/arama-funnel-karti.tsx
+++ b/src/components/arama-funnel-karti.tsx
@@ -73,7 +73,7 @@ export function AramaFunnelKarti({ onSec }: { onSec: () => void }) {
      aria-label="Tercih listeni kur"
      className="relative isolate mt-5 overflow-hidden rounded-2xl border border-blue-400/20 bg-slate-950 px-4 py-5 text-white sm:px-5"
    >
-      <PikselZemin seed={61} ton="koyu" />
+      <PikselZemin seed={61} />
      <div className="grid items-center gap-4 sm:grid-cols-[minmax(0,1fr)_auto] sm:gap-5">
        <div className="min-w-0">
          <TypingAnimation
--- a/src/components/cta-bandi.tsx
+++ b/src/components/cta-bandi.tsx
@@ -44,7 +44,7 @@ export function CtaBandi({
      )}
      {...props}
    >
-      <PikselZemin seed={seed} ton="koyu" className={buyuk ? "-inset-y-10" : undefined} />
+      <PikselZemin seed={seed} className={buyuk ? "-inset-y-10" : undefined} />
      {children}
    </Etiket>
  );
--- a/src/components/piksel-cta-yuzeyi.tsx
+++ b/src/components/piksel-cta-yuzeyi.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useState, type ReactNode } from "react";
+import { useRef, useState, type ReactNode } from "react";
 import { cn } from "@/lib/utils";
 import { PikselZemin } from "@/components/piksel-zemin";
 import { PikselListe, PikselListeAciklama } from "@/components/piksel-liste";
@@ -13,9 +13,6 @@ import { PikselListe, PikselListeAciklama } from "@/components/piksel-liste";
 * düğmeye ya da linke imleç/odak gelince 24 kare birden dolar — "listen
 * böyle hazır olur". Yazılıp silinen satır yok (Bilal, 24 Eyl 2026).
 */
-// Geniş ekranda doku yalnız genişliğin ilk %16'sında (metnin sol boşluğu)
-const SOL_KENAR: [number, number] = [0.16, 1];
-
 export function PikselCtaYuzeyi({
  children,
  className,
@@ -27,6 +24,9 @@ export function PikselCtaYuzeyi({
  seed?: number;
 }) {
  const [tamamla, setTamamla] = useState(false);
+  // Piksel tablosunun çevresi dokuda boş kalır (Bilal, 24 Eyl 2026:
+  // "tablonun arkasına çok piksel yığılmış"); ölçü gerçek yerleşimden.
+  const listeRef = useRef<HTMLDivElement>(null);

  const hedefMi = (t: EventTarget | null) =>
    t instanceof Element && t.closest("a, button") != null;
@@ -42,23 +42,15 @@ export function PikselCtaYuzeyi({
        className,
      )}
    >
-      {/* Telefon/tablet: liste üstte ortada, dokunun boş bandında. Geniş
-          ekranda liste sağ sütunda — orası tamamen boş kalır, doku yalnız
-          sol kenarda ve seyrek (Bilal, 24 Eyl 2026: "tablonun arkasına çok
-          piksel yığılmış"). */}
-      <PikselZemin seed={seed} ton="koyu" className="-inset-y-10 lg:hidden" />
-      <PikselZemin
-        seed={seed}
-        ton="koyu"
-        bosBant={SOL_KENAR}
-        yogunluk={0.7}
-        className="-inset-y-10 hidden lg:block"
-      />
+      <PikselZemin seed={seed} haric={listeRef} className="-inset-y-10" />
      <div className="grid items-center gap-8 px-5 py-10 sm:px-10 sm:py-12 lg:grid-cols-[minmax(0,1fr)_16rem] lg:gap-12">
        <div className="flex min-w-0 flex-col items-center text-center lg:items-start lg:text-left">
          {children}
        </div>
-        <div className="order-first flex flex-col items-center lg:order-none">
+        <div
+          ref={listeRef}
+          className="order-first flex flex-col items-center lg:order-none"
+        >
          <PikselListe
            tamamla={tamamla}
            className="w-full max-w-[9rem] sm:max-w-[11rem] lg:max-w-[14rem]"
--- a/src/components/piksel-zemin.tsx
+++ b/src/components/piksel-zemin.tsx
@@ -1,31 +1,36 @@
 "use client";

+import type { RefObject } from "react";
 import { PixelMasonry } from "@/components/pixel-decor";
 import { cn } from "@/lib/utils";

 /**
 * CTA yüzeylerinin piksel zemini (DESIGN.md §10.8) — tek kaynak. Bilal'in
- * kararı (24 Eyl 2026): "piksel arka planları her CTA benzeri kısmın
- * arkasında olmalı, masonry gibi büyüklü küçüklü." Kap `relative isolate
- * overflow-hidden` olmalı; zemin ilk çocuk olarak konur.
+ * kararı (24 Eyl 2026): pikseller **yalnız CTA yüzeylerinde** (mavi bant,
+ * kapanış kartı, arama penceresi kartı); beyaz içerik kartlarında değil
+ * ("/sonuc'taki kartın arkasına da piksel koymuşsun; pikseller CTA'larda
+ * olacak sadece"). Beyaz kareler; kap `relative isolate overflow-hidden`
+ * olmalı, zemin ilk çocuk olarak konur.
 *
- * - `acik`: beyaz/açık kart — silik mavi kareler.
- * - `koyu`: mavi bant ya da koyu kart — beyaz kareler.
+ * Doku kabın gerçek ölçüsüne göre üretilir; kenar çerçevesi yoğun, orta
+ * seyrek. Üstünde kreatif ya da iri sayı varsa `haric` ile o öğe verilir,
+ * çevresi boş kalır.
 */
 export function PikselZemin({
  seed = 7,
-  ton = "acik",
-  bosBant,
  yogunluk,
+  kenar,
+  haric,
  className,
 }: {
  /** Aynı ekrandaki iki yüzey farklı desen alsın */
  seed?: number;
-  ton?: "acik" | "koyu";
-  /** Boş bırakılacak yatay bant (varsayılan orta %22–78); bkz. PixelMasonry */
-  bosBant?: [number, number];
-  /** Doluluk çarpanı */
+  /** Doluluk çarpanı (1 varsayılan) */
  yogunluk?: number;
+  /** Kenar çerçevesinin genişliği, kısa kenarın oranı (0.3 varsayılan) */
+  kenar?: number;
+  /** Çevresi boş bırakılacak öğe */
+  haric?: RefObject<HTMLElement | null>;
  /** Dikey taşma payı vb. (varsayılan `-inset-y-6`) */
  className?: string;
 }) {
@@ -33,12 +38,16 @@ export function PikselZemin({
    <div
      aria-hidden
      className={cn(
-        "pointer-events-none absolute inset-x-0 -inset-y-6 -z-10",
-        ton === "acik" ? "text-primary/70" : "text-white",
+        "pointer-events-none absolute inset-x-0 -inset-y-6 -z-10 text-white",
        className,
      )}
    >
-      <PixelMasonry seed={seed} bosBant={bosBant} yogunluk={yogunluk} />
+      <PixelMasonry
+        seed={seed}
+        yogunluk={yogunluk}
+        kenar={kenar}
+        haric={haric}
+      />
    </div>
  );
 }
--- a/src/components/pixel-decor.tsx
+++ b/src/components/pixel-decor.tsx
@@ -1,6 +1,14 @@
 "use client";

-import { useMemo, useRef, type CSSProperties, type ReactNode } from "react";
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+  type RefObject,
+} from "react";
 import { cn } from "@/lib/utils";
 import { usePixelHeat } from "@/components/use-pixel-heat";

@@ -74,41 +82,86 @@ function pixelRect(
 /**
 * CTA yüzeylerinin piksel zemini: büyüklü küçüklü kareler, masonry gibi
 * hafif kaymış (Bilal, 24 Eyl 2026: "arka planda büyüklü küçüklü, masonry
- * şeklinde"). İçeriğin oturduğu orta bant boş kalır; kareler kenarlara doğru
- * yoğunlaşır. 3×3 hücrelik makro hücrelere 1–3 hücrelik tek kare düşer ve
- * makro hücre içinde kaydırılır: kareler çakışmaz ama hizaya da girmez
- * (§1.1 "doğal duruş"). Durağan zemin: imleç ısı fırçasına katılmaz
- * (Bilal, 24 Eyl 2026: "üzerine gelindiğinde bir şey olmasın").
+ * şeklinde"). Kabın **gerçek ölçüsüne** göre üretilir (ResizeObserver):
+ * sabit bir çizimi kaplayacak şekilde ölçeklemek yüksek kartlarda görünen
+ * kısmı boş banda düşürüyordu ("hiç doku yok"). Yalnız kenar çerçevesinde,
+ * orta tamamen boş; `haric` verilen öğenin (ör. 24'lük piksel tablosu)
+ * çevresi de boş kalır. Küçük (tek hücrelik) kare **yok** (Bilal, 24 Eyl
+ * 2026: "çok fazla piksel, küçük olanlar hiç olmasın"): 4×4 hücrelik makro
+ * hücrelere 2–4 hücrelik tek kare düşer ve makro hücre içinde kaydırılır:
+ * çakışmaz ama hizaya da girmez (§1.1 "doğal duruş"). Durağan zemin:
+ * imleç ısı fırçasına katılmaz.
+ * Sunucuda boş çizilir, ölçülünce belirir (dekor; aria-hidden).
 */
-// Varsayılan boş bant modül sabiti: her render'da yeni dizi olup useMemo'yu
-// boşa düşürmesin (rendering-hoist-jsx)
-const BOS_BANT_VARSAYILAN: [number, number] = [0.22, 0.78];
-
 export function PixelMasonry({
  seed = 7,
-  bosBant = BOS_BANT_VARSAYILAN,
  yogunluk = 1,
+  kenar = 0.3,
+  haric,
  className,
 }: {
  seed?: number;
-  /** Genişliğin bu oranları arasındaki bant boş kalır (içerik orada) */
-  bosBant?: [number, number];
  /** Doluluk çarpanı; 1 varsayılan, 0.6 seyrek */
  yogunluk?: number;
+  /** Kenar çerçevesinin genişliği: kısa kenarın oranı (0.3 = %30) */
+  kenar?: number;
+  /** Çevresi boş bırakılacak öğe (kreatif, iri sayı) */
+  haric?: RefObject<HTMLElement | null>;
  className?: string;
 }) {
-  const COLS = 42;
-  const ROWS = 12;
-  const MAKRO = 3;
+  const svgRef = useRef<SVGSVGElement>(null);
+  const [olcu, setOlcu] = useState<{
+    w: number;
+    h: number;
+    hx: number;
+    hy: number;
+    hw: number;
+    hh: number;
+  } | null>(null);
+
+  useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg) return;
+    const olc = () => {
+      const r = svg.getBoundingClientRect();
+      const hr = haric?.current?.getBoundingClientRect();
+      const sonraki = {
+        w: Math.round(r.width),
+        h: Math.round(r.height),
+        hx: hr ? Math.round(hr.left - r.left) : 0,
+        hy: hr ? Math.round(hr.top - r.top) : 0,
+        hw: hr ? Math.round(hr.width) : 0,
+        hh: hr ? Math.round(hr.height) : 0,
+      };
+      setOlcu((onceki) =>
+        onceki &&
+        onceki.w === sonraki.w &&
+        onceki.h === sonraki.h &&
+        onceki.hx === sonraki.hx &&
+        onceki.hy === sonraki.hy &&
+        onceki.hw === sonraki.hw &&
+        onceki.hh === sonraki.hh
+          ? onceki
+          : sonraki,
+      );
+    };
+    olc();
+    const ro = new ResizeObserver(olc);
+    ro.observe(svg);
+    const h = haric?.current;
+    if (h) ro.observe(h);
+    return () => ro.disconnect();
+  }, [haric]);
+
+  const MAKRO = 4;
+  const PAY = 14; // hariç öğenin çevresinde bırakılan boşluk (px)

-  // Çıktı seed'e göre deterministik; render başına yeniden üretme
  const pixels = useMemo(() => {
-    const cx = (COLS - 1) / 2;
-    const cy = (ROWS - 1) / 2;
-    const maxD = Math.sqrt(cx * cx + cy * cy);
-    const BAND_MIN = COLS * bosBant[0];
-    const BAND_MAX = COLS * bosBant[1];
-
+    if (!olcu || olcu.w === 0 || olcu.h === 0) return null;
+    const { w, h, hx, hy, hw, hh } = olcu;
+    const cols = Math.ceil(w / CELL);
+    const rows = Math.ceil(h / CELL);
+    const kisa = Math.min(w, h);
    const sonuc: ReactNode[] = [];
    let accentIdx = 0;

@@ -141,55 +194,57 @@ export function PixelMasonry({
        );
      }
      // İri kare daha silik: yazının yanında bağırmasın
-      const op = opacityFor(x, y) * (n === 1 ? 1 : n === 2 ? 0.8 : 0.6);
+      const op = opacityFor(x, y) * (n === 2 ? 0.9 : n === 3 ? 0.7 : 0.55);
      return (
        <rect key={key} {...shared} fill="currentColor" fillOpacity={op} />
      );
    };

-    for (let my = 0; my < ROWS / MAKRO; my++) {
-      for (let mx = 0; mx < COLS / MAKRO; mx++) {
+    const haricte = (px: number, py: number) =>
+      hw > 0 &&
+      px >= hx - PAY &&
+      px <= hx + hw + PAY &&
+      py >= hy - PAY &&
+      py <= hy + hh + PAY;
+
+    for (let my = 0; my < rows / MAKRO; my++) {
+      for (let mx = 0; mx < cols / MAKRO; mx++) {
        const ox = mx * MAKRO;
        const oy = my * MAKRO;
-        const mcx = ox + MAKRO / 2;
-        if (mcx > BAND_MIN && mcx < BAND_MAX) continue;
-        // Kenarlara doğru artan doluluk
-        const d = Math.sqrt((mcx - cx) ** 2 + (oy + MAKRO / 2 - cy) ** 2) / maxD;
-        const density = (0.3 + 0.6 * d * d) * yogunluk;
-        if (hash(mx, my, seed) > density) {
-          // Boş makro hücrede ara sıra tek küçük piksel: doku kopmasın
-          if (hash(mx, my, seed + 3) < 0.25 * yogunluk) {
-            const px = ox + Math.floor(hash(mx, my, seed + 4) * MAKRO);
-            const py = oy + Math.floor(hash(mx, my, seed + 5) * MAKRO);
-            sonuc.push(kare(px, py, 1, `k-${mx}-${my}`, false));
-          }
-          continue;
-        }
+        const cxPx = (ox + MAKRO / 2) * CELL;
+        const cyPx = (oy + MAKRO / 2) * CELL;
+        if (haricte(cxPx, cyPx)) continue;
+        // En yakın kenara uzaklık, kısa kenarın oranı olarak (0 kenar, 0.5 orta)
+        const k = Math.min(cxPx, w - cxPx, cyPx, h - cyPx) / kisa;
+        // Yalnız çerçevede, kenara doğru artan doluluk; orta boş
+        if (k >= kenar) continue;
+        const density = (0.06 + 0.5 * (1 - k / kenar) ** 1.6) * yogunluk;
+        if (hash(mx, my, seed) > density) continue;
        const r = hash(mx, my, seed + 7);
-        const n = r < 0.5 ? 1 : r < 0.85 ? 2 : 3;
+        // 2–4 hücre: orta boy sık, iri seyrek
+        const n = r < 0.5 ? 2 : r < 0.85 ? 3 : 4;
        const serbest = MAKRO - n;
        const kx = ox + Math.floor(hash(mx, my, seed + 11) * (serbest + 1));
        const ky = oy + Math.floor(hash(mx, my, seed + 13) * (serbest + 1));
-        const accent = n < 3 && hash(mx, my, seed + 99) > 0.94;
+        const accent = n === 2 && hash(mx, my, seed + 99) > 0.95;
        sonuc.push(kare(kx, ky, n, `m-${mx}-${my}`, accent));
-        // Büyük karenin yanına küçük bir eş: büyüklü küçüklü ritim
-        if (n < 3 && hash(mx, my, seed + 17) < 0.45) {
-          const ex = kx + n < ox + MAKRO ? kx + n : kx - 1;
-          const ey = ky + n < oy + MAKRO ? ky + n : ky - 1;
-          if (ex >= ox && ey >= oy) sonuc.push(kare(ex, ey, 1, `e-${mx}-${my}`, false));
-        }
      }
    }
    return sonuc;
-  }, [seed, bosBant, yogunluk]);
+  }, [olcu, seed, yogunluk, kenar]);

  return (
    <svg
-      viewBox={`0 0 ${COLS * CELL} ${ROWS * CELL}`}
-      preserveAspectRatio="xMidYMid slice"
+      ref={svgRef}
+      viewBox={olcu ? `0 0 ${olcu.w} ${olcu.h}` : undefined}
+      preserveAspectRatio="xMinYMin slice"
      aria-hidden="true"
      focusable="false"
-      className={cn("h-full w-full", className)}
+      className={cn(
+        "h-full w-full transition-opacity duration-500 motion-reduce:transition-none",
+        pixels ? "opacity-100" : "opacity-0",
+        className,
+      )}
    >
      {pixels}
    </svg>
--- a/src/features/liste/components/kaydet-banner.tsx
+++ b/src/features/liste/components/kaydet-banner.tsx
@@ -6,7 +6,6 @@
 // hariç her yerde görünür; kapatma oturum boyunca kalıcıdır (sessionStorage).
 // Exit-intent/agresif popup YOK (PRD kuralı).

-import { PikselZemin } from "@/components/piksel-zemin";
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -61,9 +60,8 @@ export function KaydetBanner() {
          ref={gorunumRef}
          // Telefonda metin kendi satırında, düğme altında tam genişlik:
          // yan yana dizince başlık kelime kelime kırılıyordu (375 px).
-          className="pointer-events-auto relative isolate mx-auto flex max-w-xl flex-wrap items-center gap-3 overflow-hidden rounded-2xl border border-slate-200 bg-white p-4 pr-14 shadow-xl sm:flex-nowrap sm:gap-4"
+          className="pointer-events-auto relative mx-auto flex max-w-xl flex-wrap items-center gap-3 rounded-2xl border border-slate-200 bg-white p-4 pr-14 shadow-xl sm:flex-nowrap sm:gap-4"
        >
-          <PikselZemin seed={47} />
          {/* Kullanıcının o anki işletim sisteminin logosu: "bu tarayıcıda"
              mesajını somutlaştırır */}
          <div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-slate-200 bg-slate-50 text-slate-700">
--- a/src/features/odeme/components/paket-satinal.tsx
+++ b/src/features/odeme/components/paket-satinal.tsx
@@ -1,4 +1,3 @@
-import { PikselZemin } from "@/components/piksel-zemin";
 import { Suspense } from "react";
 import Image from "next/image";
 import Link from "next/link";
@@ -59,8 +58,7 @@ export function PaketSatinAl() {
      className="mt-10 grid gap-6 sm:grid-cols-[1fr_auto]"
    >
      {/* Ana paket */}
-      <section className="relative isolate overflow-hidden rounded-2xl border-2 border-orange-500 bg-white p-8 shadow-sm">
-        <PikselZemin seed={43} />
+      <section className="rounded-2xl border-2 border-orange-500 bg-white p-8 shadow-sm">
        <div className="flex items-baseline justify-between">
          <h2 className="font-heading text-xl font-bold">
            Tercih Dönemi Paketi
--- a/src/features/pazarlama/components/meraklisina-demo.tsx
+++ b/src/features/pazarlama/components/meraklisina-demo.tsx
@@ -7,7 +7,6 @@
 // context'ten okur. (Sihirbaz hunisi statik bir şemayla anlatılır — bkz.
 // huni-semasi.tsx.)

-import { PikselZemin } from "@/components/piksel-zemin";
 import {
  createContext,
  useContext,
@@ -235,8 +234,7 @@ export function DemoKapanisCta() {
  const profil = useTercihProfili();

  return (
-    <div className="relative isolate overflow-hidden rounded-2xl border border-slate-200 bg-white p-6 text-center">
-      <PikselZemin seed={41} />
+    <div className="rounded-2xl border border-slate-200 bg-white p-6 text-center">
      <p className="font-heading text-base font-bold text-slate-900">
        {profil
          ? "Kuralları öğrendin — sayılar zaten senin sıralamanla hesaplandı."
--- a/src/features/rapor/components/liste-uretici.tsx
+++ b/src/features/rapor/components/liste-uretici.tsx
@@ -22,7 +22,6 @@
 // Kural: action cevabının hemen ardından yönlendiriciye TEK aksiyon gönder
 // (router.replace); ikinci aksiyon (refresh) ancak o gezinme bitince.

-import { PikselZemin } from "@/components/piksel-zemin";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -265,8 +264,7 @@ export function ListeUretici({
    // Paketli kullanıcıya paket satma: onun ürünü top-up. Liste ve sohbet
    // geçmişi kalıcı; kredi yükleyince kaldığı yerden devam eder.
    return (
-      <section className="relative isolate mx-auto w-full max-w-2xl overflow-hidden rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
-        <PikselZemin seed={23} />
+      <section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
        <Lock className="mx-auto size-8 text-slate-400" aria-hidden />
        <h1 className="mt-4 font-heading text-xl font-bold">
          Kredin bu liste için yetmiyor
@@ -296,8 +294,7 @@ export function ListeUretici({

  if (durum.ad === "hata") {
    return (
-      <section className="relative isolate mx-auto w-full max-w-2xl overflow-hidden rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
-        <PikselZemin seed={23} />
+      <section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
        <h1 className="font-heading text-xl font-bold">Liste kurulamadı</h1>
        <p className="mx-auto mt-2 max-w-md text-sm text-slate-600">
          {durum.mesaj}
@@ -347,8 +344,7 @@ function SunucuYokEkrani() {
  }

  return (
-    <section className="relative isolate mx-auto w-full max-w-2xl overflow-hidden rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
-        <PikselZemin seed={23} />
+    <section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
      <h1 className="font-heading text-xl font-bold">
        Listen hazır, sunucuya şu an ulaşamıyoruz
      </h1>
@@ -379,8 +375,7 @@ function SunucuYokEkrani() {
 *  "Tekrar dene" yok: tekrar taze requestId üretip ikinci üretimi başlatırdı. */
 function SuruyorEkrani() {
  return (
-    <section className="relative isolate mx-auto w-full max-w-2xl overflow-hidden rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
-        <PikselZemin seed={23} />
+    <section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
      <h1 className="font-heading text-xl font-bold">Listen zaten hazırlanıyor</h1>
      <p className="mx-auto mt-2 max-w-md text-sm text-slate-600">
        Bunu başka bir sekmede başlatmışsın. İki kez kurmayalım — kredin bu
--- a/src/features/rapor/components/listem-govde.tsx
+++ b/src/features/rapor/components/listem-govde.tsx
@@ -4,7 +4,6 @@
 // ekranda. Harita ⇄ liste köprüsü (pinden satıra, satırdan haritaya) ve
 // paketsiz paywall kartları burada; veri çekimi sunucuda (page.tsx) kalır.

-import { PikselZemin } from "@/components/piksel-zemin";
 import { useMemo, useRef, useState } from "react";
 import Link from "next/link";
 import {
@@ -338,9 +337,8 @@ export function ListemGovde({

            <section
              ref={kilitKartRef}
-              className="relative isolate overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm"
+              className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm"
            >
-              <PikselZemin seed={59} />
              <div className="border-b border-slate-100 p-6">
                <h3 className="font-heading text-xl font-bold tracking-tight">
                  Tablo ücretsiz.
--- a/src/features/rapor/components/listem-icerik.tsx
+++ b/src/features/rapor/components/listem-icerik.tsx
@@ -19,7 +19,6 @@ import { raporMaskele, ACIK_SATIR } from "@/lib/rapor-maske";
 import type { Mesaj } from "./sohbet-client";
 import { ListemGovde } from "./listem-govde";
 import { ListemBosCta } from "./listem-bos-cta";
-import { PikselZemin } from "@/components/piksel-zemin";
 import { ListeUretici } from "./liste-uretici";
 import { UretimBasladiOlayi } from "./uretim-basladi-olayi";

@@ -66,8 +65,7 @@ export async function ListemIcerik({

  if (!raporVar) {
    const bosDurum = (
-      <section className="relative isolate mx-auto flex max-w-2xl flex-col items-center overflow-hidden px-4 py-16 text-center">
-        <PikselZemin seed={29} />
+      <section className="mx-auto flex max-w-2xl flex-col items-center px-4 py-16 text-center">
        <Sparkles className="size-10 text-primary" aria-hidden />
        <h1 className="mt-4 font-heading text-2xl font-bold">
          Henüz Yapay Zeka listen yok
--- a/src/features/rapor/components/tadimlik-satiri.tsx
+++ b/src/features/rapor/components/tadimlik-satiri.tsx
@@ -8,7 +8,6 @@
 // varsa /api/tadimlik'ten kategoriye özel satır çekilip yerinde değiştirilir
 // (seçim sunucuda kalır). Havuzda içerik yoksa hiç render edilmez.

-import { PikselZemin } from "@/components/piksel-zemin";
 import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import { ArrowRight } from "lucide-react";
@@ -151,8 +150,7 @@ export function TadimlikSatiri({
        </p>
      </div>

-      <div className="relative isolate mt-6 overflow-hidden rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:p-6">
-        <PikselZemin seed={31} />
+      <div className="mt-6 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:p-6">
        {/* Rapor listesinin satırıyla aynı düzen (§4.15): ad sarar,
            üniversite adı altında, taban sıra sağda iri. */}
        <div className="flex items-start gap-3">
--- a/src/features/sihirbaz/components/cta-sira-form.tsx
+++ b/src/features/sihirbaz/components/cta-sira-form.tsx
@@ -23,7 +23,6 @@ import { authClient } from "@/lib/auth-client";
 import { olay, siraKovasi } from "@/lib/analitik";
 import { cn } from "@/lib/utils";
 import { CtaBandi } from "@/components/cta-bandi";
-import { PikselZemin } from "@/components/piksel-zemin";
 import { onbellekliJsonGetir } from "@/lib/istek-cache";
 import { useTercihProfili } from "@/features/liste/hooks/use-tercih-profili";
 import type { SihirbazFacetleri } from "@/types/yokatlas";
@@ -374,11 +373,10 @@ export function CtaSiraForm({
      <section
        aria-labelledby={baslikId}
        className={cn(
-          "relative isolate overflow-hidden rounded-2xl border p-4 transition-colors duration-200 sm:p-5",
+          "rounded-2xl border p-4 transition-colors duration-200 sm:p-5",
          profil ? "border-primary/20 bg-primary/5" : "border-slate-200 bg-white",
        )}
      >
-        <PikselZemin seed={53} />
        <div className="grid">
          <div
            ref={profil ? undefined : formRef}
--- a/src/features/sihirbaz/components/sihirbaz-cagri-karti.tsx
+++ b/src/features/sihirbaz/components/sihirbaz-cagri-karti.tsx
@@ -8,7 +8,6 @@ import { animate } from "motion/mini";
 import { useReducedMotion } from "motion/react";
 import { Button } from "@/components/ui/button";
 import { CtaBandi } from "@/components/cta-bandi";
-import { PikselZemin } from "@/components/piksel-zemin";
 import { useGorunumOlayi } from "@/components/use-gorunum-olayi";
 import { olay, olayBirKez, siraKovasi } from "@/lib/analitik";
 import type { SihirbazFacetleri } from "@/types/yokatlas";
@@ -263,8 +262,7 @@ export function SihirbazBolumu({
          edilmez; panel yalnızca funnel CTA'larını gösterir, üretim ve
          listenin kendisi /listem'de yaşar. */}
      {raporVar ? (
-        <section className="relative isolate mt-16 overflow-hidden rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
-          <PikselZemin seed={21} />
+        <section className="mt-16 rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
          <h2 className="font-heading text-2xl font-bold sm:text-3xl">
            24 tercihlik listen hazır
          </h2>
--- a/src/features/sihirbaz/components/sira-gerekli.tsx
+++ b/src/features/sihirbaz/components/sira-gerekli.tsx
@@ -4,7 +4,6 @@
 // sayfayı tazele (URL değişmez); yoksa kapıyı aç. Sıra bilgisi localStorage'daki
 // TercihProfili ile tüm uygulamada ortak, sunucu tablosu çerezden okur.

-import { PikselZemin } from "@/components/piksel-zemin";
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
@@ -43,8 +42,7 @@ export function SiraGerekli() {
  }

  return (
-    <main className="relative isolate mx-auto flex max-w-2xl flex-col items-center overflow-hidden px-4 py-24 text-center">
-      <PikselZemin seed={37} />
+    <main className="mx-auto flex max-w-2xl flex-col items-center px-4 py-24 text-center">
      <h1 className="font-heading text-3xl font-bold text-balance text-slate-900 sm:text-4xl">
        Önce sıralamanı gir
      </h1>