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/rapor/components/liste-uretici.tsx

@@ -22,6 +22,7 @@
 // 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";
@@ -264,7 +265,8 @@ 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="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
+      <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} />
         <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
@@ -294,7 +296,8 @@ export function ListeUretici({
 
   if (durum.ad === "hata") {
     return (
-      <section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
+      <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} />
         <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}
@@ -344,7 +347,8 @@ function SunucuYokEkrani() {
   }
 
   return (
-    <section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
+    <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} />
       <h1 className="font-heading text-xl font-bold">
         Listen hazır, sunucuya şu an ulaşamıyoruz
       </h1>
@@ -375,7 +379,8 @@ function SunucuYokEkrani() {
  *  "Tekrar dene" yok: tekrar taze requestId üretip ikinci üretimi başlatırdı. */
 function SuruyorEkrani() {
   return (
-    <section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
+    <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} />
       <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

src/features/rapor/components/listem-govde.tsx

@@ -4,6 +4,7 @@
 // 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 {
@@ -337,8 +338,9 @@ export function ListemGovde({
 
             <section
               ref={kilitKartRef}
-              className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm"
+              className="relative isolate 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.

src/features/rapor/components/listem-icerik.tsx

@@ -19,6 +19,7 @@ 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";
 
@@ -65,7 +66,8 @@ export async function ListemIcerik({
 
   if (!raporVar) {
     const bosDurum = (
-      <section className="mx-auto flex max-w-2xl flex-col items-center px-4 py-16 text-center">
+      <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} />
         <Sparkles className="size-10 text-primary" aria-hidden />
         <h1 className="mt-4 font-heading text-2xl font-bold">
           Henüz Yapay Zeka listen yok

src/features/rapor/components/tadimlik-satiri.tsx

@@ -8,6 +8,7 @@
 // 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";
@@ -150,7 +151,8 @@ export function TadimlikSatiri({
         </p>
       </div>
 
-      <div className="mt-6 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:p-6">
+      <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} />
         {/* 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">