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>
This commit is contained in:
bilalgursen
2026-09-24 14:03:28 +03:00
parent b11c2c9d45
commit 4b28b353ee
3 changed files with 37 additions and 18 deletions

View File

@@ -700,17 +700,24 @@ karar.
yan yana, buton sağda.
- Büyük (sayfa kapanışı) hâlinde aynı band ortalı ve iri: `px-5 py-8 text-center sm:p-12`,
`-inset-y-10`, h2 `font-heading text-2xl font-bold sm:text-3xl`, paragraf `text-white/90`.
- Kullanıldığı yerler: `/sonuc`'taki iki sihirbaz paneli, katalog altındaki `CtaSiraForm`
kart varyantı, "Kendi Listem" çekmecesinin altı (kompakt). Aynı sayfadaki iki band farklı
`seed` alır.
- Kullanıldığı yerler: `/sonuc`'taki üç panel (sihirbaz, giriş bekleyen, "24 tercihlik listen
hazır"), katalog altındaki `CtaSiraForm`
kart varyantı, "Kendi Listem" çekmecesinin altı (kompakt), katalog üstü kompakt satırın
**kayıtlı sıralamalı** hâli ("Sıralaman … tabanlarının neresinde? · Sıralaman kayıtlı: …";
Bilal, 24 Eyl 2026: "bu kısma piksel dokusu ekle"). O satır CLS için tek `section` içinde
iki hâl taşıdığından `CtaBandi`'yi sarmaz; kompakt bandın sınıf setini birebir alır
(`relative isolate overflow-hidden rounded-2xl bg-primary px-5 py-4 text-left text-white
sm:py-5` + ilk çocuk `PikselZemin`), kenarlık saydam kalır ki iki hâlin kutusu aynı olsun.
Aynı sayfadaki iki band farklı `seed` alır.
**Piksel zemin yalnız CTA yüzeylerinde — `PikselZemin`, `src/components/piksel-zemin.tsx`**
(Bilal, 24 Eyl 2026: önce "her CTA benzeri kısmın arkasında olmalı", sonra "/sonuc'taki kartın
arkasına da piksel koymuşsun; pikseller CTA'larda olacak sadece"). CTA yüzeyi = renkli zeminli
çağrı yüzeyi: mavi `CtaBandi`, koyu kapanış kartı `PikselCtaYuzeyi`, arama penceresindeki koyu
kart. Beyaz içerik kartlarına (tadımlık, `/listem` üretim/kilit kartları, paket kartı, kaydet
bandı, katalog üstü kompakt satır, boş durumlar, sıralama-yok sayfası) **konmaz** — 24 Eyl'de
denendi ve geri alındı. Kap `relative isolate overflow-hidden`; zemin ilk çocuk; kareler beyaz.
bandı, katalog üstü kompakt satırın **form** hâli, boş durumlar, sıralama-yok sayfası)
**konmaz** — 24 Eyl'de denendi ve geri alındı. Aynı kompakt satırın kayıtlı sıralamalı hâli
ise formsuz tek butonlu bir çağrı olduğundan mavi banttır ve dokuyu alır (yukarıda). Kap `relative isolate overflow-hidden`; zemin ilk çocuk; kareler beyaz.
Doku kabın gerçek ölçüsüne göre üretilir: yalnız kenar çerçevesinde (kısa kenarın %30'u), orta
tamamen boş; **küçük kare yok**, 2–4 hücrelik (17/27/37 px) kareler, iri olan seyrek ve daha
silik (Bilal: "çok fazla piksel, küçük olanlar hiç olmasın").