feat(tasarim): katalog sayfası alt CTA kartı funnel yüzeyinde (piksel liste)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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

@@ -29,6 +29,7 @@ import {
 import { authClient } from "@/lib/auth-client";
 import { olay, siraKovasi } from "@/lib/analitik";
 import { cn } from "@/lib/utils";
+import { PikselCtaYuzeyi } from "@/components/piksel-cta-yuzeyi";
 import { onbellekliJsonGetir } from "@/lib/istek-cache";
 import { useTercihProfili } from "@/features/liste/hooks/use-tercih-profili";
 import type { SihirbazFacetleri } from "@/types/yokatlas";
@@ -61,13 +62,35 @@ function turEtiketi(tur: string) {
 }
 
 /** "Sayısal · 100.000. sıra" — kayıtlı profilin kısa özeti. */
-function KayitliSira({ sira, tur }: { sira: number; tur: string }) {
+function KayitliSira({
+  sira,
+  tur,
+  koyu = false,
+}: {
+  sira: number;
+  tur: string;
+  /** Koyu funnel yüzeyinde (PikselCtaYuzeyi) */
+  koyu?: boolean;
+}) {
   return (
-    <span className="inline-flex items-center gap-1.5 text-sm text-slate-600">
-      <Trophy className="size-4 shrink-0 text-primary" aria-hidden />
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 text-sm",
+        koyu ? "text-slate-300" : "text-slate-600",
+      )}
+    >
+      <Trophy
+        className={cn("size-4 shrink-0", koyu ? "text-orange-500" : "text-primary")}
+        aria-hidden
+      />
       <span>
         Sıralaman kayıtlı:{" "}
-        <strong className="font-semibold tabular-nums text-slate-900">
+        <strong
+          className={cn(
+            "font-semibold tabular-nums",
+            koyu ? "text-white" : "text-slate-900",
+          )}
+        >
           {sira.toLocaleString("tr-TR")}.
         </strong>{" "}
         sıra · {turEtiketi(tur)}
@@ -424,54 +447,58 @@ export function CtaSiraForm({
     );
   }
 
+  // Kart varyantı sayfa sonundaki funnel CTA'sıdır: arama kartının koyu
+  // yüzeyi + 24'lük piksel liste (DESIGN.md §10.8).
   if (profil) {
     return (
-      <section className="flex flex-col items-center rounded-2xl border border-primary/20 bg-primary/5 px-6 py-8 text-center sm:px-10 sm:py-10">
-        <h2 className="font-heading text-xl font-bold text-balance text-slate-900 sm:text-2xl">
+      <PikselCtaYuzeyi metinOfseti={5}>
+        <h2 className="font-heading text-2xl font-bold text-balance sm:text-3xl">
           {baslik ?? "Sıralamana yakın programlar hangileri? Saniyede gör."}
         </h2>
         <div className="mt-3">
-          <KayitliSira sira={profil.sira} tur={profil.tur} />
+          <KayitliSira sira={profil.sira} tur={profil.tur} koyu />
         </div>
-        <p className="mt-2 max-w-xl text-sm leading-6 text-slate-600">
+        <p className="mt-2 max-w-xl text-base leading-relaxed text-slate-300">
           Gerçek YÖK Atlas verisiyle hayal, dengeli ve güvenli dilimlerindeki
           programların hazır.
         </p>
-        <PagePixelDivider seed={67} className="mt-6" />
-        <Button asChild size="lg" className={cn(PROFILLI_CTA_SINIF, "mt-6")}>
+        <Button
+          asChild
+          size="lg"
+          className={cn(PROFILLI_CTA_SINIF, "mt-6 w-full active:scale-[0.97] sm:w-auto")}
+        >
           <Link href={sonucHref()}>
             Sıralamana uygun programları gör
             <ArrowRight className="size-4" aria-hidden />
           </Link>
         </Button>
-      </section>
+      </PikselCtaYuzeyi>
     );
   }
 
   return (
-    <section
-      ref={formRef}
-      className="rounded-2xl border border-primary/20 bg-primary/5 p-6 sm:p-8"
-    >
-      <h2 className="font-heading text-xl font-bold text-slate-900">
-        {baslik ?? "Sıralamana yakın programlar hangileri? Saniyede gör."}
-      </h2>
-      <p className="mt-2 text-sm leading-6 text-slate-600">
-        {aciklama ??
-          "YKS başarı sıralamanı gir; gerçek YÖK Atlas verisiyle sıralamana uygun hayal, dengeli ve güvenli dilimlerindeki programları anında listele. Ücretsiz, üyelik gerekmez."}
-      </p>
-      <Button
-        type="button"
-        onClick={() => setAcik(true)}
-        onPointerEnter={preloadSihirbazAdimlar}
-        onFocus={preloadSihirbazAdimlar}
-        className="mt-4 h-11 cursor-pointer bg-orange-500 px-6 text-sm font-semibold text-white transition-colors duration-200 hover:bg-orange-600"
-      >
-        Sıralamanı gir, programları gör
-        <ArrowRight className="size-4" aria-hidden />
-      </Button>
-
+    <div ref={formRef}>
+      <PikselCtaYuzeyi metinOfseti={9}>
+        <h2 className="font-heading text-2xl font-bold text-balance sm:text-3xl">
+          {baslik ?? "Sıralamana yakın programlar hangileri? Saniyede gör."}
+        </h2>
+        <p className="mt-3 max-w-xl text-base leading-relaxed text-slate-300">
+          {aciklama ??
+            "YKS başarı sıralamanı gir; gerçek YÖK Atlas verisiyle sıralamana uygun hayal, dengeli ve güvenli dilimlerindeki programları anında listele. Ücretsiz, üyelik gerekmez."}
+        </p>
+        <Button
+          type="button"
+          size="lg"
+          onClick={() => setAcik(true)}
+          onPointerEnter={preloadSihirbazAdimlar}
+          onFocus={preloadSihirbazAdimlar}
+          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"
+        >
+          Sıralamanı gir, programları gör
+          <ArrowRight className="size-4" aria-hidden />
+        </Button>
+      </PikselCtaYuzeyi>
       {cekmece}
-    </section>
+    </div>
   );
 }