feat(tasarim): katalog üstü kayıtlı-sıra satırı ve "listen hazır" paneli piksel dokulu CTA bandı

- CtaSiraForm kompakt: kayıtlı sıralamalı hâl CtaBandi kompakt kabuğuyla
  birebir (bg-primary, beyaz yazı, PikselZemin); form hâli beyaz kalır.
  İç boşluk ve saydam kenarlıkla iki hâlin kutusu aynı (CLS yok); telefondaki
  süs piksel ayracı kaldırıldı.
- /sonuc "24 tercihlik listen hazır": beyaz kart yerine CtaBandi (seed 23),
  buton sonda ArrowRight, telefonda tam genişlik.
- DESIGN.md §10.8: CtaBandi kullanım yerleri ve "piksel konmaz" listesi güncellendi.

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

src/features/sihirbaz/components/cta-sira-form.tsx

@@ -13,7 +13,7 @@ import {
   DrawerDescription,
   DrawerTitle,
 } from "@/components/ui/drawer";
-import { PagePixelDivider } from "@/components/pixel-decor";
+import { PikselZemin } from "@/components/piksel-zemin";
 import { useGorunumOlayi } from "@/components/use-gorunum-olayi";
 import {
   SihirbazAdimlarLazy,
@@ -39,7 +39,7 @@ const PUAN_TURLERI_SECENEK = [
 ] as const;
 
 // Kayıtlı profilli CTA'lar /listem boş durumunun dilini taşır (bkz.
-// listem-bos-cta.tsx): büyük turuncu buton, piksel ayraç. Sınıf seti tek yerde.
+// listem-bos-cta.tsx): büyük turuncu buton. Sınıf seti tek yerde.
 const PROFILLI_CTA_SINIF =
   "h-12 cursor-pointer bg-orange-500 px-6 text-white transition-colors duration-200 hover:bg-orange-600";
 
@@ -369,14 +369,21 @@ export function CtaSiraForm({
     // bindirilir; hücrenin yüksekliğini her iki durumda da başlık + form belirler.
     // Profilli içerik bu yüksekliği aşmayacak kadar kısa tutulmalı.
     const kompaktBaslik = baslik ?? "Sıralaman bu tabanların neresinde?";
+    // Profilli hâl bir CTA yüzeyidir (tek iş: turuncu buton): CtaBandi'nin
+    // kompakt bandıyla birebir aynı kabuk — mavi zemin, beyaz yazı, arkada
+    // PikselZemin (DESIGN.md §10.8; piksel yalnız CTA yüzeylerinde). Profilsiz
+    // form satırı beyaz içerik kartıdır, piksel almaz. İç boşluk ve 1 px
+    // kenarlık (profilli hâlde saydam) iki hâlde aynıdır ki hydration sonrası
+    // geçişte satır yüksekliği oynamasın.
     return (
       <section
         aria-labelledby={baslikId}
         className={cn(
-          "rounded-2xl border p-4 transition-colors duration-200 sm:p-5",
-          profil ? "border-primary/20 bg-primary/5" : "border-slate-200 bg-white",
+          "relative isolate overflow-hidden rounded-2xl border px-5 py-4 text-left transition-colors duration-200 sm:py-5",
+          profil ? "border-transparent bg-primary text-white" : "border-slate-200 bg-white",
         )}
       >
+        {profil ? <PikselZemin seed={11} /> : null}
         <div className="grid">
           <div
             ref={profil ? undefined : formRef}
@@ -399,13 +406,12 @@ export function CtaSiraForm({
               <div className="flex min-w-0 flex-col items-center gap-1 sm:items-start">
                 <p
                   id={baslikId}
-                  className="font-heading text-base font-bold leading-6 text-slate-900"
+                  className="font-heading text-base font-bold leading-6 text-white"
                 >
                   {kompaktBaslik}
                 </p>
-                <KayitliSira sira={profil.sira} tur={profil.tur} />
+                <KayitliSira sira={profil.sira} tur={profil.tur} beyaz />
               </div>
-              <PagePixelDivider seed={67} className="w-24 sm:hidden" />
               <Button asChild size="lg" className={cn(PROFILLI_CTA_SINIF, "w-full sm:w-auto")}>
                 <Link href={sonucHref()}>
                   Sıralamana uygun programları gör

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

@@ -262,22 +262,28 @@ 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">
-          <h2 className="font-heading text-2xl font-bold sm:text-3xl">
+        // Kardeş panellerle aynı yüzey (DESIGN.md §10.8 CtaBandi): mavi zemin,
+        // piksel doku, tek turuncu buton (Bilal, 24 Eyl 2026: "buraya piksel
+        // doku ekle"). Seed diğer iki panelden (13, 19) farklı.
+        <CtaBandi seed={23} className="mt-16 min-w-0">
+          <h2 className="font-heading text-2xl font-bold text-balance sm:text-3xl">
             24 tercihlik listen hazır
           </h2>
-          <p className="mx-auto mt-3 max-w-xl text-slate-600">
+          <p className="mx-auto mt-3 max-w-xl text-base leading-relaxed text-white/90">
             Yapay zekânın kurduğu risk analizli listen Listem sayfasında
             seni bekliyor.
           </p>
           <Button
             asChild
             size="lg"
-            className="mt-6 cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600"
+            className="mt-6 h-12 w-full cursor-pointer bg-orange-500 px-6 text-white transition-[background-color,transform] duration-200 hover:bg-orange-600 active:scale-[0.97] sm:w-auto"
           >
-            <Link href="/listem">Listeni gör</Link>
+            <Link href="/listem">
+              Listeni gör
+              <ArrowRight className="size-4" aria-hidden />
+            </Link>
           </Button>
-        </section>
+        </CtaBandi>
       ) : girisBekliyor ? (
         <CtaBandi ref={hazirPanelRef} seed={13} className="mt-16 min-w-0">
           <h2 className="font-heading text-2xl font-bold text-balance sm:text-3xl">