feat(tasarim): her CTA benzeri yüzeyin arkasında masonry piksel zemin (PikselZemin)

Bilal'in isteği (24 Eyl 2026): piksel arka planı her CTA benzeri kısmın
arkasında, büyüklü küçüklü masonry. Tek kaynak PikselZemin (açık kartta
silik mavi, koyu/mavi yüzeyde beyaz); CtaBandi ve PikselCtaYuzeyi de
onu kullanır. Eklenen yüzeyler: /sonuc "listen hazır" kartı, /listem
dört üretim kartı + boş durum + kilit kartı, tadımlık kartı, sıralama-yok
sayfası, meraklısına kapanış kartı, ana sayfa ve /paket ana paket kartı,
kaydet bandı, katalog üstü kompakt satır, arama penceresi kartı.
Kapsam dışı (form, durum kartı, modal düğmesi, 404) DESIGN.md §10.8'de.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
2026-09-24 12:16:54 +03:00
parent cf992deac8
commit 09c6868089
16 changed files with 98 additions and 33 deletions

View File

@@ -689,7 +689,20 @@ karar.
`-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. Band üstündeki ikincil metin `text-white/90`, ince yazı `text-white/70`;
`seed` alır.
**Her CTA benzeri yüzeyin arkasında piksel zemin — `PikselZemin`, `src/components/piksel-zemin.tsx`**
(Bilal, 24 Eyl 2026: "piksel arka planları her CTA benzeri kısmın arkasında olmalı, masonry gibi
büyüklü küçüklü"). CTA benzeri yüzey = tek bir aksiyona çağıran kart, bant, boş durum ya da
sayfa bölümü. Kap `relative isolate overflow-hidden`; zemin ilk çocuk. Açık kartta
`ton="acik"` (silik mavi, `text-primary/70`), mavi bant ve koyu kartta `ton="koyu"` (beyaz).
`CtaBandi` ve `PikselCtaYuzeyi` de bunu kullanır. Kapsananlar: `/sonuc` "24 tercihlik listen
hazır" kartı, `/listem` dört üretim kartı + boş durum + kilit kartı, tadımlık kartı,
sıralama-yok sayfası, meraklısına kapanış kartı, ana sayfa ve `/paket` ana paket kartı, kaydet
bandı, katalog üstü kompakt satır, arama penceresi kartı. **Kapsam dışı:** form kartları (giriş,
ödeme formu), durum kartları (ödeme sonucu), modal düğmeleri, hata/404 sayfası, yan kredi
kartları — bunlar tek aksiyona çağıran yüzey değil. Yeni bir CTA yüzeyi açan ajan zemini
ekler ve bu listeye yazar. Band üstündeki ikincil metin `text-white/90`, ince yazı `text-white/70`;
`slate-300`/`slate-400` yazılmaz.
**Kapanış yüzeyi — `PikselCtaYuzeyi`, `src/components/piksel-cta-yuzeyi.tsx` (yalnız ana