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>

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]"