feat(tasarim): form alanları hap, CTA bandı tek kaynak, masonry piksel zemin, çekmeceler §4.10

- Input/Select/Textarea: shadcn'in ince varsayılanı yerine üst çubuk
  haplarıyla aynı kalıp (h-12, rounded-full, slate-200, 16 px; md:text-sm
  yok); kullanım yerleri yalnız yerleşim sınıfı taşır. DESIGN.md §4.6
  tam sınıf dizisi; denetime ince-form-alani (hata) ve ham-input (uyarı)
- CtaBandi (mavi zemin + piksel doku) tek kaynak: /sonuc iki panel, katalog
  altı kart, "Kendi Listem" çekmecesi altı. Ana sayfa kapanışı koyu
  PikselCtaYuzeyi + 24'lük piksel liste kreatifiyle kalır (Bilal: "orası
  bayağı iyiydi"); yazılıp silinen satır kaldırıldı
- PixelMasonry: CTA arka planları büyüklü küçüklü, hafif kaymış kareler;
  eşit ızgaralı PixelField kaldırıldı
- Çekmece başlığındaki 12×2 piksel liste kaldırıldı (çok dolu); sayı +
  ilerleme çubuğu + risk dağılımı geri geldi
- "Saniyede gör" çekmecesi §4.10 düzeninde: ortalı DrawerTitle + bağlam,
  rozet ve çizgili "neler alacaksın" listesi yok; kapı modalındaki iki
  rozet kalktı; denetime modal-rozet (hata)
- Kapı panelinde 3 px odak halkası kırpılmıyor (px-px → p-1)
- Liste satırı: üniversite adı + tür/il/süre adın altında tek akan satır,
  telefonda text-xs (SATIR_ALT_GRUP); katalog listelerinde ad kendi
  satırında (SATIR_GRUP space-y-2). Ölçüm 375 px canlı bölüm sayfası:
  satır yüksekliğini metin değil alt alta iki 44 px düğme belirliyor

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

src/app/page.tsx

@@ -681,9 +681,10 @@ export default function Home() {
         <section className="px-4 pb-24 pt-6 sm:px-6">
           <Parallax strength={12} className="mx-auto max-w-6xl">
             <Reveal>
-              {/* Funnel CTA yüzeyi (DESIGN.md §10.8): köşede kümelenen
-                  piksel zemini yerine 24'lük listenin interaktif kreatifi */}
-              <PikselCtaYuzeyi metinOfseti={7}>
+              {/* Kapanış yüzeyi (DESIGN.md §10.8): koyu kart + 24'lük
+                  listenin interaktif kreatifi. Bilal'in kararı (24 Eyl 2026):
+                  bu yüzey yalnız burada; diğer CTA'lar mavi CtaBandi. */}
+              <PikselCtaYuzeyi seed={7}>
                 <h2 className="font-heading text-3xl font-bold text-balance sm:text-4xl">
                   Tercih listen, pişmanlık listesi olmasın
                 </h2>

src/components/cta-bandi.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import type { ComponentProps, Ref } from "react";
+import { PixelMasonry } from "@/components/pixel-decor";
+import { cn } from "@/lib/utils";
+
+/**
+ * CTA bandı — DESIGN.md §10.8 kanonik yüzey: sitenin mavisi (`bg-primary`),
+ * arka planda büyüklü küçüklü, masonry gibi kaymış ve imleç yaklaşınca
+ * turuncuya ısınan piksel dokusu (`PixelMasonry`), beyaz yazı, tek turuncu buton.
+ *
+ * - `buyuk` (varsayılan): sayfa kapanışı / panel — ortalı, iri boşluk.
+ * - `kompakt`: çekmece altı gibi dar yerler — sola yaslı, alçak.
+ *
+ * İçerik (başlık, paragraf, buton) çağıranındır; yalnız kabuk burada durur.
+ * Bilal'in kararı (24 Eyl 2026): koyu slate-950 yüzey yerine bu band.
+ */
+export function CtaBandi({
+  children,
+  className,
+  seed = 8,
+  boyut = "buyuk",
+  etiket = "section",
+  ref,
+  ...props
+}: Omit<ComponentProps<"div">, "ref"> & {
+  /** Piksel dokusunun deseni; aynı sayfadaki iki band farklı olsun */
+  seed?: number;
+  boyut?: "buyuk" | "kompakt";
+  /** Çekmece altı gibi başlıksız yerlerde `div` */
+  etiket?: "section" | "div";
+  ref?: Ref<HTMLElement>;
+}) {
+  const buyuk = boyut === "buyuk";
+  // İki etiket de HTMLElement'tir; JSX tipi için div'e daraltılır.
+  const Etiket = etiket as "div";
+  return (
+    <Etiket
+      ref={ref as Ref<HTMLDivElement>}
+      className={cn(
+        "relative isolate overflow-hidden rounded-2xl bg-primary text-white",
+        buyuk ? "px-5 py-8 text-center sm:p-12" : "px-5 py-4 text-left sm:py-5",
+        className,
+      )}
+      {...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>
+      {children}
+    </Etiket>
+  );
+}

src/components/liste-satiri.ts

@@ -13,23 +13,32 @@ export const SATIR_AD =
 export const SATIR_AD_DUZ =
   "block text-base font-semibold leading-snug text-slate-900";
 
-/** Adın altındaki ikinci satır (varyant ya da üniversite adı). */
-export const SATIR_ALT_AD = "mt-0.5 block text-sm leading-snug text-slate-600";
+/** Adın altındaki ikinci satır (varyant ya da üniversite adı). Telefonda
+ *  bir kademe küçük (Bilal, 24 Eyl 2026: "mobilde çok şişko, üni adını daha
+ *  küçük yazabiliriz"); tür/il/süre ile aynı akan satırda (SATIR_GRUP). */
+export const SATIR_ALT_AD =
+  "block text-xs leading-snug text-slate-600 sm:text-sm";
+
+/** Üniversite adı (SATIR_ALT_AD) + tür/il/süre (SATIR_META) — adın altında
+ *  her genişlikte tek akan satır, sığmazsa sarar. /sonuc, rapor ve tadımlık
+ *  satırı kullanır. Bilal (24 Eyl 2026): telefonda katmanlar "iç içe". */
+export const SATIR_ALT_GRUP =
+  "mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 sm:mt-0.5 sm:gap-x-3 sm:gap-y-1";
 
 /** Satırdaki ikincil link (ör. üniversite adı) — §2.1 tek turuncu. */
 export const SATIR_IKINCIL_LINK =
   "transition-colors hover:text-orange-500 hover:underline";
 
-/** Tür/il/süre satırı. Geniş ekranda (sm+) üstündeki adla aynı satıra
- *  çıkar (SATIR_GRUP), telefonda altına iner. */
+/** Tür/il/süre satırı. Kenar boşluğu sarmaldan gelir (SATIR_GRUP /
+ *  SATIR_ALT_GRUP); telefonda üniversite adı gibi bir kademe küçük. */
 export const SATIR_META =
-  "mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-slate-500 sm:mt-0";
+  "flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-slate-500 sm:text-sm";
 
-/** Ad (ya da üniversite adı) + tür/il/süre satırını geniş ekranda yan yana
- *  dizen sarmal. Bilal'in isteği (25 Eyl 2026): geniş ekranda satırlar üç
- *  katlı ve "çok kalın" duruyordu. Telefonda alt alta kalır. */
+/** Ana ad + tür/il/süre sarmalı (katalog listeleri: ad zaten üniversite ya da
+ *  bölüm). Telefonda ad kendi satırında kalır, çipler altına iner (8 px);
+ *  geniş ekranda (Bilal, 25 Eyl 2026: satırlar "çok kalın") aynı satıra çıkar. */
 export const SATIR_GRUP =
-  "sm:flex sm:flex-wrap sm:items-center sm:gap-x-3 sm:gap-y-1";
+  "space-y-2 sm:flex sm:flex-wrap sm:items-center sm:gap-x-3 sm:gap-y-1 sm:space-y-0";
 
 /** Tür çipi (Devlet, Vakıf, SAY…). */
 export const SATIR_CIP =

src/components/piksel-cta-yuzeyi.tsx

@@ -2,38 +2,28 @@
 
 import { useState, type ReactNode } from "react";
 import { cn } from "@/lib/utils";
-import { TypingAnimation } from "@/components/ui/typing-animation";
-import { FUNNEL_METINLERI } from "@/lib/funnel-metinleri";
+import { PixelMasonry } from "@/components/pixel-decor";
 import { PikselListe, PikselListeAciklama } from "@/components/piksel-liste";
 
-/** Listeyi `ofset` kadar döndürür: aynı sayfadaki yüzeyler farklı satırla
- *  başlar. Rastgele değil, deterministik — sunucu ve istemci aynı çizer. */
-function dondur<T>(dizi: readonly T[], ofset: number): T[] {
-  const n = ofset % dizi.length;
-  return [...dizi.slice(n), ...dizi.slice(0, n)];
-}
-
 /**
- * Funnel CTA yüzeyi (DESIGN.md §10.8) — arama penceresindeki kartın dili:
- * koyu slate-950 zemin, ince mavi kenar, yazılıp silinen kısa satırlar,
- * turuncu CTA. Pikseller bir köşede kümelenmez; yüzeyin kreatifi 24'lük
- * listenin kendisidir (PikselListe). Kartın içindeki bir düğmeye ya da
- * linke imleç/odak gelince 24 kare birden dolar — "listen böyle hazır olur".
+ * Kapanış yüzeyi (DESIGN.md §10.8) — arama penceresindeki kartın dili:
+ * koyu slate-950 zemin, ince mavi kenar, turuncu CTA. Arka planda büyüklü
+ * küçüklü, masonry gibi kaymış piksel dokusu (PixelMasonry); yüzeyin
+ * kreatifi 24'lük listenin kendisidir (PikselListe). Kartın içindeki bir
+ * düğmeye ya da linke imleç/odak gelince 24 kare birden dolar — "listen
+ * böyle hazır olur". Yazılıp silinen satır yok (Bilal, 24 Eyl 2026).
  */
 export function PikselCtaYuzeyi({
   children,
   className,
-  metinOfseti = 0,
-  kayanMetin = true,
+  seed = 7,
 }: {
   children: ReactNode;
   className?: string;
-  /** Aynı sayfadaki iki yüzey aynı satırla başlamasın */
-  metinOfseti?: number;
-  kayanMetin?: boolean;
+  /** Piksel dokusunun deseni; aynı sayfadaki iki yüzey farklı olsun */
+  seed?: number;
 }) {
   const [tamamla, setTamamla] = useState(false);
-  const [metinler] = useState(() => dondur(FUNNEL_METINLERI, metinOfseti));
 
   const hedefMi = (t: EventTarget | null) =>
     t instanceof Element && t.closest("a, button") != null;
@@ -49,20 +39,15 @@ 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>
       <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}
-          {kayanMetin ? (
-            <TypingAnimation
-              as="p"
-              words={metinler}
-              loop
-              typeSpeed={38}
-              deleteSpeed={18}
-              pauseDelay={2600}
-              className="mt-5 min-h-[2.75em] font-heading text-base font-bold leading-snug tracking-[-0.02em] text-slate-300 sm:min-h-[1.4em]"
-            />
-          ) : null}
         </div>
         <div className="order-first flex flex-col items-center lg:order-none">
           <PikselListe

src/components/pixel-decor.tsx

@@ -72,11 +72,14 @@ function pixelRect(
 }
 
 /**
- * Geniş alanlar için seyrek piksel zemini (ör. koyu CTA bandı).
- * İçeriğin oturduğu orta bölge tamamen boş bırakılır; pikseller
- * kenarlara doğru yoğunlaşır.
+ * CTA yüzeylerinin piksel zemini: büyüklü küçüklü kareler, masonry gibi
+ * hafif kaymış (Bilal, 24 Eyl 2026: "arka planda büyüklü küçüklü, masonry
+ * şeklinde"). İçeriğin oturduğu orta bant boş kalır; kareler kenarlara doğru
+ * yoğunlaşır. 3×3 hücrelik makro hücrelere 1–3 hücrelik tek kare düşer ve
+ * makro hücre içinde kaydırılır: kareler çakışmaz ama hizaya da girmez
+ * (§1.1 "doğal duruş"). Her kare imleç ısı fırçasına katılır.
  */
-export function PixelField({
+export function PixelMasonry({
   seed = 7,
   className,
 }: {
@@ -84,42 +87,99 @@ export function PixelField({
   className?: string;
 }) {
   const svgRef = useRef<SVGSVGElement>(null);
-  usePixelHeat(svgRef);
+  usePixelHeat(svgRef, { radius: 44 });
 
   const COLS = 42;
   const ROWS = 12;
+  const MAKRO = 3;
 
-  // Çıktı seed'e göre deterministik; 504 iterasyon + ~150 element üretimini
-  // her render'da (ör. çekmece reorder'ında) tekrarlama (rendering-hoist-jsx)
+  // Çıktı seed'e göre deterministik; render başına yeniden üretme
   const pixels = useMemo(() => {
     const cx = (COLS - 1) / 2;
     const cy = (ROWS - 1) / 2;
     const maxD = Math.sqrt(cx * cx + cy * cy);
+    const BAND_MIN = COLS * 0.22;
+    const BAND_MAX = COLS * 0.78;
 
     const sonuc: ReactNode[] = [];
     let accentIdx = 0;
 
-    // Hero serpintisiyle aynı kural: içeriğin oturduğu orta kolon
-    // (genişliğin %22–78 bandı) tüm yükseklik boyunca tamamen boş kalır
-    const BAND_MIN = COLS * 0.22;
-    const BAND_MAX = COLS * 0.78;
-
-    for (let y = 0; y < ROWS; y++) {
-      for (let x = 0; x < COLS; x++) {
-        if (x > BAND_MIN && x < BAND_MAX) continue;
-        // Kenarlara doğru artan doluluk
-        const d = Math.sqrt((x - cx) ** 2 + (y - cy) ** 2) / maxD;
-        const density = 0.1 + 0.42 * d * d;
-        if (hash(x, y, seed) > density) continue;
-        const accent = hash(x, y, seed + 99) > 0.96;
-        sonuc.push(
-          pixelRect(x, y, {
-            key: `${x}-${y}`,
-            accent,
-            accentDelay: accent ? (accentIdx++ % 8) * 0.45 : 0,
-          }),
+    const kare = (
+      x: number,
+      y: number,
+      n: number,
+      key: string,
+      accent: boolean,
+    ) => {
+      const boy = n * CELL - 2 * INSET;
+      const shared = {
+        x: x * CELL + INSET,
+        y: y * CELL + INSET,
+        width: boy,
+        height: boy,
+        rx: 2 * n,
+      };
+      if (accent) {
+        return (
+          <rect
+            key={key}
+            {...shared}
+            className="animate-pulse fill-orange-500/70 motion-reduce:animate-none"
+            style={{
+              animationDuration: "3.6s",
+              animationDelay: `${(accentIdx++ % 8) * 0.45}s`,
+            }}
+          />
         );
       }
+      // İri kare daha silik: yazının yanında bağırmasın
+      const op = opacityFor(x, y) * (n === 1 ? 1 : n === 2 ? 0.8 : 0.6);
+      return (
+        <rect
+          key={key}
+          {...shared}
+          data-px=""
+          data-cx={x * CELL + (n * CELL) / 2}
+          data-cy={y * CELL + (n * CELL) / 2}
+          data-op={op}
+          fill="currentColor"
+          fillOpacity={op}
+        />
+      );
+    };
+
+    for (let my = 0; my < ROWS / MAKRO; my++) {
+      for (let mx = 0; mx < COLS / MAKRO; mx++) {
+        const ox = mx * MAKRO;
+        const oy = my * MAKRO;
+        const mcx = ox + MAKRO / 2;
+        if (mcx > BAND_MIN && mcx < BAND_MAX) continue;
+        // Kenarlara doğru artan doluluk
+        const d = Math.sqrt((mcx - cx) ** 2 + (oy + MAKRO / 2 - cy) ** 2) / maxD;
+        const density = 0.3 + 0.6 * d * d;
+        if (hash(mx, my, seed) > density) {
+          // Boş makro hücrede ara sıra tek küçük piksel: doku kopmasın
+          if (hash(mx, my, seed + 3) < 0.25) {
+            const px = ox + Math.floor(hash(mx, my, seed + 4) * MAKRO);
+            const py = oy + Math.floor(hash(mx, my, seed + 5) * MAKRO);
+            sonuc.push(kare(px, py, 1, `k-${mx}-${my}`, false));
+          }
+          continue;
+        }
+        const r = hash(mx, my, seed + 7);
+        const n = r < 0.5 ? 1 : r < 0.85 ? 2 : 3;
+        const serbest = MAKRO - n;
+        const kx = ox + Math.floor(hash(mx, my, seed + 11) * (serbest + 1));
+        const ky = oy + Math.floor(hash(mx, my, seed + 13) * (serbest + 1));
+        const accent = n < 3 && hash(mx, my, seed + 99) > 0.94;
+        sonuc.push(kare(kx, ky, n, `m-${mx}-${my}`, accent));
+        // Büyük karenin yanına küçük bir eş: büyüklü küçüklü ritim
+        if (n < 3 && hash(mx, my, seed + 17) < 0.45) {
+          const ex = kx + n < ox + MAKRO ? kx + n : kx - 1;
+          const ey = ky + n < oy + MAKRO ? ky + n : ky - 1;
+          if (ex >= ox && ey >= oy) sonuc.push(kare(ex, ey, 1, `e-${mx}-${my}`, false));
+        }
+      }
     }
     return sonuc;
   }, [seed]);
@@ -156,7 +216,7 @@ export function PixelDivider({
   const COLS = 12;
   const ROWS = 2;
 
-  // Deterministik çıktı — render başına yeniden üretme (PixelField ile aynı)
+  // Deterministik çıktı — render başına yeniden üretme (PixelMasonry ile aynı)
   const pixels = useMemo(() => {
     const cx = (COLS - 1) / 2;
     const sonuc: ReactNode[] = [];

src/components/ui/input.tsx

@@ -2,13 +2,18 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
+/**
+ * Metin alanı — DESIGN.md §4.6. Üst çubuktaki arama/kullanıcı haplarıyla aynı
+ * kalıp: 48 px, tam yuvarlak, slate-200 kenarlık, 16 px yazı (telefonda da).
+ * Başta ikon gerekiyorsa kapsayıcı `relative`, ikon `left-5`, alan `pl-12`.
+ */
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
     <input
       type={type}
       data-slot="input"
       className={cn(
-        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "h-12 w-full min-w-0 rounded-full border border-slate-200 bg-white px-5 text-base text-slate-900 transition-colors duration-150 outline-none placeholder:text-slate-400 hover:border-slate-300 focus-visible:border-primary focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-50 aria-invalid:border-red-500 aria-invalid:ring-3 aria-invalid:ring-red-500/20",
         className
       )}
       {...props}

src/components/ui/select.tsx

@@ -44,14 +44,14 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit cursor-pointer items-center justify-between gap-2 rounded-full border border-slate-200 bg-white py-2 pr-4 pl-5 text-base text-slate-900 whitespace-nowrap transition-colors duration-150 outline-none select-none hover:border-slate-300 focus-visible:border-primary focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-red-500 aria-invalid:ring-3 aria-invalid:ring-red-500/20 data-placeholder:text-slate-400 data-[size=default]:h-12 data-[size=sm]:h-9 data-[size=sm]:pr-3 data-[size=sm]:pl-4 data-[size=sm]:text-sm *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+        <ChevronDownIcon className="pointer-events-none size-4 text-slate-400" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   )
@@ -69,7 +69,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         data-align-trigger={position === "item-aligned"}
-        className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
+        className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl border border-slate-200 bg-white text-slate-900 shadow-lg duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
         position={position}
         align={align}
         {...props}
@@ -78,7 +78,7 @@ function SelectContent({
         <SelectPrimitive.Viewport
           data-position={position}
           className={cn(
-            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
+            "p-1.5 data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
             position === "popper" && ""
           )}
         >
@@ -97,7 +97,7 @@ function SelectLabel({
   return (
     <SelectPrimitive.Label
       data-slot="select-label"
-      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      className={cn("px-4 py-1.5 text-sm font-semibold text-slate-500", className)}
       {...props}
     />
   )
@@ -112,12 +112,12 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-pointer items-center gap-2 rounded-full py-2 pr-9 pl-4 text-base text-slate-900 outline-hidden select-none focus:bg-slate-100 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}
     >
-      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+      <span className="pointer-events-none absolute right-3 flex size-4 items-center justify-center text-primary">
         <SelectPrimitive.ItemIndicator>
           <CheckIcon className="pointer-events-none" />
         </SelectPrimitive.ItemIndicator>
@@ -134,7 +134,7 @@ function SelectSeparator({
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
-      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      className={cn("pointer-events-none -mx-1.5 my-1 h-px bg-slate-200", className)}
       {...props}
     />
   )
@@ -148,7 +148,7 @@ function SelectScrollUpButton({
     <SelectPrimitive.ScrollUpButton
       data-slot="select-scroll-up-button"
       className={cn(
-        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        "z-10 flex cursor-default items-center justify-center bg-white py-1 text-slate-400 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -167,7 +167,7 @@ function SelectScrollDownButton({
     <SelectPrimitive.ScrollDownButton
       data-slot="select-scroll-down-button"
       className={cn(
-        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        "z-10 flex cursor-default items-center justify-center bg-white py-1 text-slate-400 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}

src/components/ui/textarea.tsx

@@ -2,12 +2,17 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
+/**
+ * Çok satırlı alan — DESIGN.md §4.6. Hap değil sade kutu (§4.4): rounded-2xl,
+ * slate-200 kenarlık, 16 px yazı. Hover/odak/hata hâli `Input` ile aynı.
+ * Sohbet kutusu (`prompt-input.tsx`) kenarlıksız/şeffaf üstüne yazar.
+ */
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-24 w-full rounded-2xl border border-slate-200 bg-white px-5 py-3 text-base text-slate-900 transition-colors duration-150 outline-none placeholder:text-slate-400 hover:border-slate-300 focus-visible:border-primary focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-50 aria-invalid:border-red-500 aria-invalid:ring-3 aria-invalid:ring-red-500/20",
         className
       )}
       {...props}

src/features/katalog/components/bolum-program-listesi.tsx

@@ -257,7 +257,7 @@ export function BolumProgramListesi({
                           </span>
                         </span>
                         {varyant ? (
-                          <span className={SATIR_ALT_AD}>
+                          <span className={`mt-0.5 ${SATIR_ALT_AD}`}>
                             {varyant}
                           </span>
                         ) : null}

src/features/liste/components/liste-cekmecesi.tsx

@@ -15,7 +15,7 @@ import { useState } from "react";
 import { toast } from "sonner";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { PikselListe } from "@/components/piksel-liste";
+import { CtaBandi } from "@/components/cta-bandi";
 import { UniLogo } from "@/components/uni-logo";
 import { RiskEtiketi } from "@/components/risk-etiketi";
 import { Button } from "@/components/ui/button";
@@ -122,6 +122,7 @@ export function ListeCekmecesi() {
   // drawer içinde erken ölçüm satırları kaydırıyordu
   const [oturdu, setOturdu] = useState(false);
 
+  const doluluk = Math.round((liste.length / MANUEL_LISTE_MAX) * 100);
   // Risk dağılımı: riskliden güvenliye, sıfır olanlar yazılmaz
   const riskSayilari = (["riskli", "az-riskli", "guvenli"] as const)
     .map((r) => [r, liste.filter((t) => t.risk === r).length] as const)
@@ -184,60 +185,50 @@ export function ListeCekmecesi() {
           <DrawerTitle className="px-10 text-center font-heading text-2xl font-bold text-slate-900">
             Kendi Listem
           </DrawerTitle>
-          {/* Durum satırı: solda listenin piksel hâli (ilerleme çubuğunun
-              yerine), sağda sayı ve risk dağılımı — dikine uzamasın diye
-              yan yana (DESIGN.md §5.3). Durum ekran okuyucuya duyurulur. */}
-          <div className="mt-3 flex items-center justify-center gap-3">
-            <div
-              className="w-40 shrink-0 rounded-xl bg-slate-950 px-2.5 py-2"
-              role="progressbar"
-              aria-valuenow={liste.length}
-              aria-valuemin={0}
-              aria-valuemax={MANUEL_LISTE_MAX}
-              aria-label="Liste doluluğu"
-            >
-              <PikselListe
-                gercek={liste.map((t) =>
-                  t.risk === "riskli"
-                    ? "hayal"
-                    : t.risk === "az-riskli"
-                      ? "dengeli"
-                      : t.risk === "guvenli"
-                        ? "guvenli"
-                        : "belirsiz",
-                )}
-                sutun={12}
-              />
-            </div>
-            <div className="min-w-0 text-left">
-              <p role="status" className="text-sm text-slate-500">
-                {liste.length === MANUEL_LISTE_MAX ? (
-                  // Nadir, hak edilmiş an: küçük giriş (Emil: scale 0.95 + opaklık,
-                  // güçlü ease-out, <300 ms). Hareketi azalt'ta yalnız opaklık.
-                  <span className="inline-flex items-center gap-1.5 font-semibold text-primary transition-[opacity,transform] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] starting:scale-95 starting:opacity-0 motion-reduce:starting:scale-100">
-                    <Check className="size-4" aria-hidden />
-                    Listen tamam · {liste.length} / {MANUEL_LISTE_MAX}
-                  </span>
-                ) : (
-                  <>
-                    {liste.length} / {MANUEL_LISTE_MAX} tercih
-                  </>
-                )}
-              </p>
-              {riskSayilari.length > 0 ? (
-                <p className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1">
-                  {riskSayilari.map(([seviye, adet]) => (
-                    <span key={seviye} className="inline-flex items-center gap-1.5">
-                      <RiskEtiketi risk={seviye} />
-                      <span className="text-sm font-semibold text-slate-900">
-                        {adet}
-                      </span>
-                    </span>
-                  ))}
-                </p>
-              ) : null}
-            </div>
+          {/* Durum ekran okuyucuya da duyurulur (WCAG 4.1.3). Bilal'in
+              kararı (24 Eyl 2026): buradaki piksel liste başlığı çok dolu
+              gösteriyordu; ilerleme çubuğuna geri dönüldü. */}
+          <p role="status" className="mt-1 px-10 text-center text-sm text-slate-500">
+            {liste.length === MANUEL_LISTE_MAX ? (
+              // Nadir, hak edilmiş an: küçük giriş (Emil: scale 0.95 + opaklık,
+              // güçlü ease-out, <300 ms). Hareketi azalt'ta yalnız opaklık.
+              <span className="inline-flex items-center gap-1.5 font-semibold text-primary transition-[opacity,transform] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] starting:scale-95 starting:opacity-0 motion-reduce:starting:scale-100">
+                <Check className="size-4" aria-hidden />
+                Listen tamam · {liste.length} / {MANUEL_LISTE_MAX}
+              </span>
+            ) : (
+              <>
+                {liste.length} / {MANUEL_LISTE_MAX} tercih
+              </>
+            )}
+          </p>
+          <div
+            className="mx-auto mt-3 h-2 w-full max-w-xs overflow-hidden rounded-full bg-slate-100"
+            role="progressbar"
+            aria-valuenow={liste.length}
+            aria-valuemin={0}
+            aria-valuemax={MANUEL_LISTE_MAX}
+            aria-label="Liste doluluğu"
+          >
+            <motion.div
+              className="h-full rounded-full bg-primary"
+              animate={{ width: `${doluluk}%` }}
+              transition={{ type: "spring", duration: 0.5, bounce: 0 }}
+            />
           </div>
+          {/* Listenin dengesi metinle (renk tek başına değil, §2.2) */}
+          {riskSayilari.length > 0 ? (
+            <p className="mt-2.5 flex flex-wrap items-center justify-center gap-x-3 gap-y-1">
+              {riskSayilari.map(([seviye, adet]) => (
+                <span key={seviye} className="inline-flex items-center gap-1.5">
+                  <RiskEtiketi risk={seviye} />
+                  <span className="text-sm font-semibold text-slate-900">
+                    {adet}
+                  </span>
+                </span>
+              ))}
+            </p>
+          ) : null}
           {/* Denge ipucu: 24'lük iskeletin mantığı (alt sıralarda güvenli
               programlar). Yalnız riskleri bilinen ve en az 6 tercihli
               listede; vaat değil, gerekçe. */}
@@ -331,18 +322,23 @@ export function ListeCekmecesi() {
             </div>
           ) : null}
           {/* Ana sayfadaki final CTA panelinin kompakt hâli: koyu primary
-              zemin + kenarlara doğru yoğunlaşan piksel dokusu (PixelField) */}
+              zemin + büyüklü küçüklü piksel dokusu (PixelMasonry, CtaBandi) */}
           {/* Telefonda alt alta (başlık tek satır, buton tam genişlik):
               yan yana dizince başlık üç satıra kırılıp listenin yerini
               yiyordu (24 Eyl 2026, 375 px ölçümü). */}
-          {/* Funnel yüzeyi (DESIGN.md §10.8): arama penceresindeki kartın
-              koyu zemini; listenin piksel hâli başlıkta. */}
-          <div className="flex flex-col gap-3 rounded-2xl border border-blue-400/20 bg-slate-950 px-5 py-4 text-left text-white sm:flex-row sm:items-center sm:justify-between sm:gap-4 sm:py-5">
-            <div className="min-w-0 sm:order-1 sm:flex-1">
+          {/* CTA bandı (DESIGN.md §10.8, tek kaynak CtaBandi). Bilal'in
+              kararı (24 Eyl 2026): koyu slate-950 yüzeyden bu hâle dönüldü. */}
+          <CtaBandi
+            etiket="div"
+            boyut="kompakt"
+            seed={8}
+            className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4"
+          >
+            <div className="min-w-0">
               <p className="font-heading text-xl font-bold sm:text-2xl">
                 {riskEksik ? "Risk analizi sıralamanı bekliyor" : "Risk analizini biz yaptık"}
               </p>
-              <p className="mt-1 hidden truncate text-sm leading-relaxed text-slate-300 sm:block">
+              <p className="mt-1 hidden truncate text-sm leading-relaxed text-white sm:block">
                 {riskEksik
                   ? "Riskleri gösterelim; istersen 24'lük listeni de kur (3 kredi)."
                   : "Her seçimin yerleşme riski hazır — son kararı sen ver."}
@@ -351,7 +347,7 @@ export function ListeCekmecesi() {
             {riskEksik ? (
               <Button
                 size="lg"
-                className="h-12 w-full shrink-0 cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600 active:scale-[0.97] sm:order-3 sm:w-auto"
+                className="h-12 w-full shrink-0 cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600 active:scale-[0.97] sm:w-auto"
                 onClick={() => {
                   cekmeceKapat();
                   // Hedef "sihirbaz": kapı kapanınca akış /sonuc'ta devam
@@ -367,7 +363,7 @@ export function ListeCekmecesi() {
               <Button
                 asChild
                 size="lg"
-                className="h-12 w-full shrink-0 cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600 active:scale-[0.97] sm:order-3 sm:w-auto"
+                className="h-12 w-full shrink-0 cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600 active:scale-[0.97] sm:w-auto"
               >
                 <Link href="/listem" onClick={cekmeceKapat}>
                   Listemde aç
@@ -375,7 +371,7 @@ export function ListeCekmecesi() {
                 </Link>
               </Button>
             )}
-          </div>
+          </CtaBandi>
         </DrawerFooter>
       </DrawerContent>
     </Drawer>
@@ -466,7 +462,7 @@ function CekmeceSatiri({
           >
             {tercih.isim}
           </Link>
-          <span className="mt-1 flex items-center gap-2 text-sm leading-snug text-slate-600">
+          <span className="mt-1 flex items-center gap-2 text-xs leading-snug text-slate-600 sm:text-sm">
             <UniLogo ad={tercih.universite} boy="xs" />
             <Link
               href={uniHref(tercih.universite)}

src/features/liste/components/program-tablosu.tsx

@@ -52,7 +52,7 @@ import {
   SATIR_BUTON_HUCRE,
   SATIR_BUTON_KABI,
   SATIR_CIP,
-  SATIR_GRUP,
+  SATIR_ALT_GRUP,
   SATIR_IKINCIL_LINK,
   SATIR_META,
   SATIR_MOBIL_SAYI,
@@ -360,7 +360,7 @@ function ProgramSatiri({
             >
               {p.isim}
             </Link>
-            <span className={SATIR_GRUP}>
+            <span className={SATIR_ALT_GRUP}>
               <span className={SATIR_ALT_AD}>
                 <Link
                   href={`/universite/${uniSayfaSlug(p.universite)}`}

src/features/liste/components/tercih-profili-kapisi.tsx

@@ -7,7 +7,6 @@ import { useReducedMotion } from "motion/react";
 import useMeasure from "react-use-measure";
 import { toast } from "sonner";
 import { TransitionPanel } from "@/components/core/transition-panel";
-import { SectionEyebrow } from "@/components/pixel-decor";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -293,11 +292,10 @@ function KapıIcerik({
             }
       }
     >
-      <div ref={panelRef} className="flex flex-col gap-5 px-px">
+      {/* p-1: geçiş paneli taşmayı kırpar; alanların 3 px odak halkası
+          (Input/Select/Button ring-3) sığsın (Bilal, 24 Eyl 2026). */}
+      <div ref={panelRef} className="flex flex-col gap-5 p-1">
         <div>
-          {duzenle ? (
-            <SectionEyebrow>Tercihlerini güncelle</SectionEyebrow>
-          ) : null}
           <h2 className="mt-3 font-heading text-2xl font-bold text-slate-900 first:mt-0">
             {duzenle
               ? "Seçimlerini değiştir"
@@ -343,12 +341,9 @@ function KapıIcerik({
       <form
         ref={panelRef}
         onSubmit={siraGonder}
-        className="flex flex-col gap-5 px-px"
+        className="flex flex-col gap-5 p-1"
       >
         <div>
-          {duzenle ? (
-            <SectionEyebrow>Sıralama ve tercihler</SectionEyebrow>
-          ) : null}
           <h2 className="mt-3 font-heading text-xl font-bold text-slate-900 first:mt-0">
             {duzenle
               ? "Yeni sıralaman nedir?"
@@ -370,7 +365,7 @@ function KapıIcerik({
           <div className="flex flex-col gap-2 sm:flex-row">
             <div className="relative sm:flex-1">
               <Trophy
-                className="pointer-events-none absolute left-4 top-1/2 size-4 -translate-y-1/2 text-slate-400"
+                className="pointer-events-none absolute left-5 top-1/2 size-4 -translate-y-1/2 text-slate-400"
                 aria-hidden
               />
               <Input
@@ -383,13 +378,13 @@ function KapıIcerik({
                 onFocus={preloadSihirbazAdimlar}
                 aria-invalid={hata ? true : undefined}
                 aria-describedby={hata ? "kapisi-siralama-hata" : undefined}
-                className="h-12 bg-background pl-11 text-base"
+                className="pl-12"
               />
             </div>
             <Select value={tur} onValueChange={setTur}>
               <SelectTrigger
                 aria-label="Puan türü"
-                className="w-full bg-background data-[size=default]:h-12 sm:w-44"
+                className="w-full sm:w-44"
               >
                 <SelectValue placeholder="Puan türü" />
               </SelectTrigger>
@@ -436,7 +431,7 @@ function KapıIcerik({
         </div>
       </form>
 
-      <div ref={panelRef} className="px-px">
+      <div ref={panelRef} className="p-1">
         {facetler && sira != null ? (
           <div className="flex flex-col gap-4">
             {hata ? (

src/features/rapor/components/rapor-listesi.tsx

@@ -39,7 +39,7 @@ import {
   SATIR_BUTON_HUCRE,
   SATIR_CIP,
   SATIR_DUGME_BOYU,
-  SATIR_GRUP,
+  SATIR_ALT_GRUP,
   SATIR_IKINCIL_LINK,
   SATIR_META,
   SATIR_MOBIL_SAYI,
@@ -248,7 +248,7 @@ export function RaporListesi({
                 ) : (
                   <span className={SATIR_AD_DUZ}>{t.programId}</span>
                 )}
-                <span className={SATIR_GRUP}>
+                <span className={SATIR_ALT_GRUP}>
                   {p?.universite ? (
                     <span className={SATIR_ALT_AD}>
                       <Link

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

@@ -29,7 +29,7 @@ import {
   SATIR_ALT_AD,
   SATIR_AD_DUZ,
   SATIR_CIP,
-  SATIR_GRUP,
+  SATIR_ALT_GRUP,
   SATIR_META,
 } from "@/components/liste-satiri";
 import { listemUretHref, PROFIL_DEGISTI_EVENT } from "@/features/sihirbaz/sihirbaz-sabitler";
@@ -157,7 +157,7 @@ export function TadimlikSatiri({
           <UniLogo ad={p.universite} boy="sm" />
           <span className="min-w-0 flex-1">
             <span className={SATIR_AD_DUZ}>{p.isim}</span>
-            <span className={SATIR_GRUP}>
+            <span className={SATIR_ALT_GRUP}>
               <span className={SATIR_ALT_AD}>
                 {trBaslikDuzeni(p.universite)}
               </span>

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

@@ -3,14 +3,7 @@
 import { useId, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import {
-  ArrowRight,
-  ChartNoAxesCombined,
-  Database,
-  ListChecks,
-  Trophy,
-  X,
-} from "lucide-react";
+import { ArrowRight, Trophy, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -20,7 +13,7 @@ import {
   DrawerDescription,
   DrawerTitle,
 } from "@/components/ui/drawer";
-import { PagePixelDivider, SectionEyebrow } from "@/components/pixel-decor";
+import { PagePixelDivider } from "@/components/pixel-decor";
 import { useGorunumOlayi } from "@/components/use-gorunum-olayi";
 import {
   SihirbazAdimlarLazy,
@@ -29,7 +22,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 { CtaBandi } from "@/components/cta-bandi";
 import { onbellekliJsonGetir } from "@/lib/istek-cache";
 import { useTercihProfili } from "@/features/liste/hooks/use-tercih-profili";
 import type { SihirbazFacetleri } from "@/types/yokatlas";
@@ -45,13 +38,6 @@ const PUAN_TURLERI_SECENEK = [
   { deger: "tyt", etiket: "TYT" },
 ] as const;
 
-// Kanıt üçlüsü arama funnel kartıyla aynı dili konuşur (bkz. arama-funnel-karti)
-const KANITLAR = [
-  { ikon: ListChecks, etiket: "24 tercihlik plan" },
-  { ikon: ChartNoAxesCombined, etiket: "Risk analizi" },
-  { ikon: Database, etiket: "YÖK Atlas verisi" },
-] 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.
 const PROFILLI_CTA_SINIF =
@@ -65,22 +51,22 @@ function turEtiketi(tur: string) {
 function KayitliSira({
   sira,
   tur,
-  koyu = false,
+  beyaz = false,
 }: {
   sira: number;
   tur: string;
-  /** Koyu funnel yüzeyinde (PikselCtaYuzeyi) */
-  koyu?: boolean;
+  /** Mavi CTA bandının üstünde (CtaBandi): beyaz yazı */
+  beyaz?: boolean;
 }) {
   return (
     <span
       className={cn(
         "inline-flex items-center gap-1.5 text-sm",
-        koyu ? "text-slate-300" : "text-slate-600",
+        beyaz ? "text-white/90" : "text-slate-600",
       )}
     >
       <Trophy
-        className={cn("size-4 shrink-0", koyu ? "text-orange-500" : "text-primary")}
+        className={cn("size-4 shrink-0", beyaz ? "text-white" : "text-primary")}
         aria-hidden
       />
       <span>
@@ -88,7 +74,7 @@ function KayitliSira({
         <strong
           className={cn(
             "font-semibold tabular-nums",
-            koyu ? "text-white" : "text-slate-900",
+            beyaz ? "text-white" : "text-slate-900",
           )}
         >
           {sira.toLocaleString("tr-TR")}.
@@ -278,7 +264,7 @@ export function CtaSiraForm({
       >
         <div className="relative sm:flex-1">
           <Trophy
-            className="pointer-events-none absolute left-4 top-1/2 size-4 -translate-y-1/2 text-slate-400"
+            className="pointer-events-none absolute left-5 top-1/2 size-4 -translate-y-1/2 text-slate-400"
             aria-hidden
           />
           <Input
@@ -291,7 +277,7 @@ export function CtaSiraForm({
             onFocus={preloadSihirbazAdimlar}
             aria-invalid={hata ? true : undefined}
             aria-describedby={hata ? hataId : undefined}
-            className="h-12 bg-background pl-11 text-base"
+            className="pl-12"
           />
         </div>
         <Button
@@ -319,20 +305,16 @@ export function CtaSiraForm({
   );
 
   // Çekmece iki varyantta da aynıdır; kompakt satırda sıra adımı sayfada
-  // olduğundan çekmece yalnız sihirbazı taşır.
+  // olduğundan çekmece yalnız sihirbazı taşır. Sıra adımında başlık kanonik
+  // alt sayfa düzeninde (DESIGN.md §4.10: ortalı başlık + tek cümle bağlam,
+  // rozet yok); sihirbaz adımlarında başlıklar adımların kendisinde, çekmece
+  // başlığı yalnız ekran okuyucuya.
+  const siraAdimi = !kompakt && adim === "sira";
   const cekmece = (
     <Drawer open={acik} onOpenChange={acikDegisti} handleOnly>
       <DrawerContent
         className="max-h-[92dvh] bg-white sm:mx-auto sm:max-w-2xl sm:border-x sm:border-slate-200 sm:shadow-2xl"
       >
-        {/* Görünür başlıklar adıma göre değişir; erişilebilir ad sabit kalır. */}
-        <DrawerTitle className="sr-only">
-          Sıralamana yakın programlar hangileri?
-        </DrawerTitle>
-        <DrawerDescription className="sr-only">
-          YKS başarı sıralamanı gir; sıralamana uygun programları bu sayfadan
-          ayrılmadan gör.
-        </DrawerDescription>
         <DrawerClose className="absolute top-3 right-3 z-10 flex size-9 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-popover text-slate-500 transition-[background-color,transform] duration-150 hover:bg-slate-100 hover:text-slate-800 active:scale-[0.96]">
           <X className="size-4" aria-hidden />
           <span className="sr-only">Kapat</span>
@@ -341,37 +323,28 @@ export function CtaSiraForm({
         <div
           className="min-h-0 flex-1 overflow-y-auto px-4 pt-5 pb-[max(1.25rem,env(safe-area-inset-bottom))] sm:px-6"
         >
-          {!kompakt && adim === "sira" ? (
-            <div className="flex flex-col gap-5">
-              <div>
-                <SectionEyebrow>Saniyede gör</SectionEyebrow>
-                <h2 className="mt-3 font-heading text-2xl font-bold text-slate-900">
-                  Sıralamana yakın programlar hangileri?
-                </h2>
-                <p className="mt-2 max-w-xl text-sm leading-6 text-slate-600">
-                  Puan türünü seç, başarı sıralamanı yaz; hayal, dengeli ve
-                  güvenli dilimlerindeki programları bu sayfadan ayrılmadan
-                  gör. Ücretsiz, üyelik gerekmez.
-                </p>
-              </div>
-
-              {siraFormu}
-
-              <ul
-                aria-label="Neler alacaksın"
-                className="flex flex-wrap gap-x-4 gap-y-2 border-t border-slate-100 pt-4"
-              >
-                {KANITLAR.map(({ ikon: Ikon, etiket }) => (
-                  <li
-                    key={etiket}
-                    className="inline-flex items-center gap-1.5 text-xs font-medium text-slate-600"
-                  >
-                    <Ikon className="size-3.5 text-primary" aria-hidden />
-                    {etiket}
-                  </li>
-                ))}
-              </ul>
-            </div>
+          <DrawerTitle
+            className={
+              siraAdimi
+                ? "px-10 text-center font-heading text-2xl font-bold text-slate-900"
+                : "sr-only"
+            }
+          >
+            Sıralamana yakın programlar hangileri?
+          </DrawerTitle>
+          <DrawerDescription
+            className={
+              siraAdimi
+                ? "mx-auto mt-1 max-w-md px-4 text-center text-sm text-slate-500"
+                : "sr-only"
+            }
+          >
+            Puan türünü seç, sıralamanı yaz; hayal, dengeli ve güvenli
+            dilimlerindeki programları gerçek YÖK Atlas verisiyle bu sayfadan
+            ayrılmadan gör. Ücretsiz, üyelik gerekmez.
+          </DrawerDescription>
+          {siraAdimi ? (
+            <div className="mt-5">{siraFormu}</div>
           ) : facetler && sira != null ? (
             <SihirbazAdimlarLazy
               key={`${sira}-${tur}`}
@@ -447,18 +420,17 @@ 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).
+  // Kart varyantı sayfa sonundaki CTA bandıdır (DESIGN.md §10.8, CtaBandi).
   if (profil) {
     return (
-      <PikselCtaYuzeyi metinOfseti={5}>
+      <CtaBandi seed={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} koyu />
+          <KayitliSira sira={profil.sira} tur={profil.tur} beyaz />
         </div>
-        <p className="mt-2 max-w-xl text-base leading-relaxed text-slate-300">
+        <p className="mx-auto mt-2 max-w-xl text-base leading-relaxed text-white/90">
           Gerçek YÖK Atlas verisiyle hayal, dengeli ve güvenli dilimlerindeki
           programların hazır.
         </p>
@@ -472,17 +444,17 @@ export function CtaSiraForm({
             <ArrowRight className="size-4" aria-hidden />
           </Link>
         </Button>
-      </PikselCtaYuzeyi>
+      </CtaBandi>
     );
   }
 
   return (
     <div ref={formRef}>
-      <PikselCtaYuzeyi metinOfseti={9}>
+      <CtaBandi seed={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">
+        <p className="mx-auto mt-3 max-w-xl text-base leading-relaxed text-white/90">
           {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>
@@ -497,7 +469,7 @@ export function CtaSiraForm({
           Sıralamanı gir, programları gör
           <ArrowRight className="size-4" aria-hidden />
         </Button>
-      </PikselCtaYuzeyi>
+      </CtaBandi>
       {cekmece}
     </div>
   );

src/features/sihirbaz/components/hero-form.tsx

@@ -181,9 +181,9 @@ export function HeroForm() {
           aria-invalid={hata ? true : undefined}
           aria-describedby={hata ? "siralama-hata" : undefined}
           // flex-1 yalnızca yatay dizilimde (sm+): mobilde form flex-col olduğu
-          // için flex-1 inputun yüksekliğini eziyordu. Mobilde geniş padding
-          // + büyük yazı; sm ve üzeri eski görünüm.
-          className="h-14 bg-background px-6 py-3 text-lg sm:h-12 sm:flex-1 sm:px-2.5 sm:py-1 sm:text-base"
+          // için flex-1 inputun yüksekliğini eziyordu. Telefonda hero alanı
+          // bir kademe iri (DESIGN.md §4.6); sm ve üzeri temel Input.
+          className="h-14 text-lg sm:h-12 sm:flex-1 sm:text-base"
         />
         <Button
           type="submit"

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

@@ -7,7 +7,7 @@ import { ArrowRight } from "lucide-react";
 import { animate } from "motion/mini";
 import { useReducedMotion } from "motion/react";
 import { Button } from "@/components/ui/button";
-import { PikselCtaYuzeyi } from "@/components/piksel-cta-yuzeyi";
+import { CtaBandi } from "@/components/cta-bandi";
 import { useGorunumOlayi } from "@/components/use-gorunum-olayi";
 import { olay, olayBirKez, siraKovasi } from "@/lib/analitik";
 import type { SihirbazFacetleri } from "@/types/yokatlas";
@@ -279,43 +279,41 @@ export function SihirbazBolumu({
           </Button>
         </section>
       ) : girisBekliyor ? (
-        <div ref={hazirPanelRef} className="mt-16 min-w-0">
-          <PikselCtaYuzeyi metinOfseti={3}>
-            <h2 className="font-heading text-2xl font-bold text-balance sm:text-3xl">
-              Seçimlerin hazır — Yapay Zeka listen bir adım uzakta
-            </h2>
-            <p className="mt-3 max-w-xl text-base leading-relaxed text-slate-300">
-              Yukarıdaki tablo her zaman ücretsiz. 5 deneme kredinle 24
-              tercihlik Yapay Zeka listeni de kurabilirsin: ücretsiz giriş yap,
-              seçimlerin kayıtlı — listen otomatik kurulsun (üretim 3 kredi,
-              kalan 2 kredinle danışmana soru sorarsın).
-            </p>
-            <Button
-              asChild
-              size="lg"
-              className="mt-6 h-auto min-h-12 w-full cursor-pointer whitespace-normal bg-orange-500 px-4 py-3 text-white transition-[background-color,transform] duration-200 hover:bg-orange-600 active:scale-[0.97] sm:w-auto sm:px-8"
+        <CtaBandi ref={hazirPanelRef} seed={13} className="mt-16 min-w-0">
+          <h2 className="font-heading text-2xl font-bold text-balance sm:text-3xl">
+            Seçimlerin hazır — Yapay Zeka listen bir adım uzakta
+          </h2>
+          <p className="mx-auto mt-3 max-w-xl text-base leading-relaxed text-white/90">
+            Yukarıdaki tablo her zaman ücretsiz. 5 deneme kredinle 24
+            tercihlik Yapay Zeka listeni de kurabilirsin: ücretsiz giriş yap,
+            seçimlerin kayıtlı — listen otomatik kurulsun (üretim 3 kredi,
+            kalan 2 kredinle danışmana soru sorarsın).
+          </p>
+          <Button
+            asChild
+            size="lg"
+            className="mt-6 h-auto min-h-12 w-full cursor-pointer whitespace-normal bg-orange-500 px-4 py-3 text-white transition-[background-color,transform] duration-200 hover:bg-orange-600 active:scale-[0.97] sm:w-auto sm:px-8"
+          >
+            <Link
+              href={girisUrl}
+              onClick={() =>
+                olay("giris_cta_tiklandi", { kaynak: "hazir_panel" })
+              }
             >
-              <Link
-                href={girisUrl}
-                onClick={() =>
-                  olay("giris_cta_tiklandi", { kaynak: "hazir_panel" })
-                }
-              >
-                5 deneme kredinle Yapay Zeka listeni kur — giriş yap
-                <ArrowRight className="size-4" aria-hidden />
-              </Link>
-            </Button>
-            <p className="mt-3 text-sm text-slate-400">
-              Kredi kartı gerekmez · Google ya da e-posta ile 30 saniyede
-            </p>
-          </PikselCtaYuzeyi>
-        </div>
+              5 deneme kredinle Yapay Zeka listeni kur — giriş yap
+              <ArrowRight className="size-4" aria-hidden />
+            </Link>
+          </Button>
+          <p className="mt-3 text-sm text-white/70">
+            Kredi kartı gerekmez · Google ya da e-posta ile 30 saniyede
+          </p>
+        </CtaBandi>
       ) : (
-        <PikselCtaYuzeyi className="mt-16 min-w-0" metinOfseti={11}>
+        <CtaBandi seed={19} className="mt-16 min-w-0">
           <h2 className="font-heading text-2xl font-bold text-balance sm:text-3xl">
             24 tercihi tek tek elemek yerine, yapay zekâ kursun
           </h2>
-          <p className="mt-3 max-w-xl text-base leading-relaxed text-slate-300">
+          <p className="mx-auto mt-3 max-w-xl text-base leading-relaxed text-white/90">
             Tablodan elle eklemek her zaman serbest. Ama üç adımda ilgi
             alanlarını ve şehirlerini söylersen, yapay zekâ hayal, dengeli ve
             güvenli dilimlerine dağıtılmış 24 tercihi — her satırı yerleşme
@@ -329,7 +327,7 @@ export function SihirbazBolumu({
             Yapay Zeka listemi kur
             <ArrowRight className="size-4" aria-hidden />
           </Button>
-        </PikselCtaYuzeyi>
+        </CtaBandi>
       )}
 
       {monteEdildi ? (