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/features/sihirbaz/components/cta-sira-form.tsx

@@ -23,6 +23,7 @@ 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";
@@ -373,10 +374,11 @@ export function CtaSiraForm({
       <section
         aria-labelledby={baslikId}
         className={cn(
-          "rounded-2xl border p-4 transition-colors duration-200 sm:p-5",
+          "relative isolate overflow-hidden 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}

src/features/sihirbaz/components/sihirbaz-cagri-karti.tsx

@@ -8,6 +8,7 @@ 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";
@@ -262,7 +263,8 @@ export function SihirbazBolumu({
           edilmez; panel yalnızca funnel CTA'larını gösterir, üretim ve
           listenin kendisi /listem'de yaşar. */}
       {raporVar ? (
-        <section className="mt-16 rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
+        <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} />
           <h2 className="font-heading text-2xl font-bold sm:text-3xl">
             24 tercihlik listen hazır
           </h2>

src/features/sihirbaz/components/sira-gerekli.tsx

@@ -4,6 +4,7 @@
 // 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";
@@ -42,7 +43,8 @@ export function SiraGerekli() {
   }
 
   return (
-    <main className="mx-auto flex max-w-2xl flex-col items-center px-4 py-24 text-center">
+    <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} />
       <h1 className="font-heading text-3xl font-bold text-balance text-slate-900 sm:text-4xl">
         Önce sıralamanı gir
       </h1>