feat(tasarim): her CTA benzeri yüzeyin arkasında masonry piksel zemin (PikselZemin)

Bilal'in isteği (24 Eyl 2026): piksel arka planı her CTA benzeri kısmın
arkasında, büyüklü küçüklü masonry. Tek kaynak PikselZemin (açık kartta
silik mavi, koyu/mavi yüzeyde beyaz); CtaBandi ve PikselCtaYuzeyi de
onu kullanır. Eklenen yüzeyler: /sonuc "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, durum kartı, modal düğmesi, 404) DESIGN.md §10.8'de.

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

src/components/arama-funnel-karti.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { PikselZemin } from "@/components/piksel-zemin";
 import { useState } from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import {
@@ -70,8 +71,9 @@ export function AramaFunnelKarti({ onSec }: { onSec: () => void }) {
   return (
     <section
       aria-label="Tercih listeni kur"
-      className="mt-5 overflow-hidden rounded-2xl border border-blue-400/20 bg-slate-950 px-4 py-5 text-white sm:px-5"
+      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" />
       <div className="grid items-center gap-4 sm:grid-cols-[minmax(0,1fr)_auto] sm:gap-5">
         <div className="min-w-0">
           <TypingAnimation

src/components/cta-bandi.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { ComponentProps, Ref } from "react";
-import { PixelMasonry } from "@/components/pixel-decor";
+import { PikselZemin } from "@/components/piksel-zemin";
 import { cn } from "@/lib/utils";
 
 /**
@@ -44,15 +44,7 @@ export function CtaBandi({
       )}
       {...props}
     >
-      <div
-        aria-hidden
-        className={cn(
-          "pointer-events-none absolute inset-x-0 -z-10 text-white",
-          buyuk ? "-inset-y-10" : "-inset-y-6",
-        )}
-      >
-        <PixelMasonry seed={seed} />
-      </div>
+      <PikselZemin seed={seed} ton="koyu" className={buyuk ? "-inset-y-10" : undefined} />
       {children}
     </Etiket>
   );

src/components/piksel-cta-yuzeyi.tsx

@@ -2,7 +2,7 @@
 
 import { useState, type ReactNode } from "react";
 import { cn } from "@/lib/utils";
-import { PixelMasonry } from "@/components/pixel-decor";
+import { PikselZemin } from "@/components/piksel-zemin";
 import { PikselListe, PikselListeAciklama } from "@/components/piksel-liste";
 
 /**
@@ -39,12 +39,7 @@ export function PikselCtaYuzeyi({
         className,
       )}
     >
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-x-0 -inset-y-10 -z-10 text-white"
-      >
-        <PixelMasonry seed={seed} />
-      </div>
+      <PikselZemin seed={seed} ton="koyu" 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}

src/components/piksel-zemin.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+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.
+ *
+ * - `acik`: beyaz/açık kart — silik mavi kareler.
+ * - `koyu`: mavi bant ya da koyu kart — beyaz kareler.
+ */
+export function PikselZemin({
+  seed = 7,
+  ton = "acik",
+  className,
+}: {
+  /** Aynı ekrandaki iki yüzey farklı desen alsın */
+  seed?: number;
+  ton?: "acik" | "koyu";
+  /** Dikey taşma payı vb. (varsayılan `-inset-y-6`) */
+  className?: string;
+}) {
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        "pointer-events-none absolute inset-x-0 -inset-y-6 -z-10",
+        ton === "acik" ? "text-primary/70" : "text-white",
+        className,
+      )}
+    >
+      <PixelMasonry seed={seed} />
+    </div>
+  );
+}