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/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[] = [];