kolaytercih/CTA-CEKMECE-TASARIMI.md

CTA çekmecesi tasarım algısı — "Sıralamanla nereye yerleşirsin? Saniyede gör."

Bu doküman, programatik SEO sayfalarındaki funnel CTA'sının (src/components/cta-sira-form.tsx) alttan açılan çekmece (drawer) tasarımının arkasındaki algıyı ve kuralları belgeler. Yeni bir funnel giriş noktası eklerken ya da bu bileşeni değiştirirken buradaki ilkelere uy.

1. Temel algı: vaadi verdiğin yerde tahsil et

Eski davranış adayı ana sayfaya (/) gönderiyordu: "Saniyede gör" vaadi verip saniyeler süren bir sayfa geçişi ve bağlam kaybı yaşatıyordu. Yeni algı şu:

• Kart vaat eder — SEO sayfasının içinde duran kart (bg-primary/5, border-primary/20) merak uyandırır: "Sıralamanla nereye yerleşirsin?"
• Çekmece tahsil eder — CTA butonu sayfadan koparmadan alttan bir çekmece açar; sıralama girişi, sihirbaz adımları ve tamamlama hepsi aynı bağlamda akar.
• Ödül /sonuc'ta — seçimler tamamlanınca profil yazılır, çekmece kapanır ve aday doğrudan sonuç sayfasına gider. Sayfa geçişi yalnızca ödül anında olur.

Akış: kart (vaat) → çekmece (sıralama) → sihirbaz (kişiselleştirme) → /sonuc (ödül).

Profilli adayda çekmece hiç devreye girmez: kayıtlı sıralamayla doğrudan /sonuc linki gösterilir — sıralamasını girmiş adaya bir daha girmesini söylemeyiz.

2. Neden çekmece, modal değil?

• Çekmece sayfanın üstüne değil, altına eklenir algısı verir: aday hâlâ okuduğu üniversite/bölüm sayfasının üzerindedir, içerik kaybolmaz (overlay hafif: bg-black/10 + blur).
• Alttan gelen yüzey mobilde başparmak menzilinde; hedef kitle (YKS adayı) ağırlıkla mobilde.
• Swipe-to-dismiss (tutamaktan) ve overlay/Escape ile kaçış ucuz: "bir bakayım" maliyeti düşük tutulur. handleOnly kullanılır ki form/sihirbaz içindeki kaydırmalar çekmeceyi yanlışlıkla kapatmasın.
• Desktop'ta çekmece tam genişliğe yayılmaz: sm:max-w-2xl ile ortalanır, sm:border-x + sm:shadow-2xl ile sayfadan yükselen bir panel gibi durur (liste çekmecesiyle aynı reçete).

3. Görsel dil: yeni hiçbir şey icat etme

Çekmecedeki her parça sitede zaten var olan kanonik kaynaktan gelir:

Parça	Kaynak / kural
Eyebrow rozeti ("Saniyede gör")	SectionEyebrow (pixel-decor.tsx) — elle pill yazılmaz
Kapatma çarpısı	dialog.tsx'teki kanonik set: size-9, rounded-full, border-slate-200, size-4 X, hover bg-slate-100, active:scale-[0.96]
CTA butonları	Metin önce, sonda ArrowRight (size-4); yıldız/Sparkles yok; bg-orange-500 → hover:bg-orange-600
Puan türü çipleri	Hero formundaki radiogroup çipleriyle birebir aynı class seti
Sıralama girişi	Profil kapısındaki desen: sola Trophy ikonu, h-12, pl-11
Kanıt üçlüsü	Arama funnel kartıyla aynı üçlü: 24 tercihlik plan / Risk analizi / YÖK Atlas verisi (ListChecks, ChartNoAxesCombined, Database)
Başlık/kopya tipografisi	font-heading bold başlık, text-slate-600 gövde, text-slate-900 vurgu

Algı hedefi: çekmece açıldığında aday "yeni bir yere geldim" değil, "aynı ürünün bir katmanı kalktı" hissetmeli. Bu yüzden çekmeceye özgü hiçbir yeni renk, rozet, buton varyantı tasarlanmaz.

4. İçerik tonu

• Öğrenci diliyle, ikinci tekil: "Sıralamanı yaz", "bu sayfadan ayrılmadan gör".
• Sürtünme kaldıran güvence her zaman görünür: "Ücretsiz, üyelik gerekmez."
• Kanıt üçlüsü süs değil, ürün vaadinin özetidir; metin etiketleri ikonsuz da anlamlı olmalı (renk/ikon tek başına anlam taşımaz — ürünün risk renk dili kuralıyla aynı ilke).
• Buton etiketleri eylemin sonucunu söyler: "Programları gör" (girdi adımı), "Ücretsiz tablonu gör" / "Yapay Zeka listemi kur (3 kredi)" (sihirbaz sonu, girişe göre).

5. Davranış ve teknik algı

• Statik kalır: Kart RSC sayfalarında prerender edilir; oturum bilgisi mount'ta değil, facet isteğiyle paralel çözülür (hero formundaki desen) — landing başına gereksiz auth turu atılmaz.
• Preload: CTA butonuna pointerenter/focus ve sıralama inputuna focus geldiğinde preloadSihirbazAdimlar() çalışır; sihirbaz açıldığında chunk çoktan inmiştir. "Saniyede gör" vaadi teknik olarak da tutulur.
• İki adım, tek yüzey: çekmece içinde sira → sihirbaz adımları vardır; erişilebilir ad sabittir (sr-only DrawerTitle/DrawerDescription), görünür başlıklar adıma göre değişir.
• Kapanış = sıfırlama, ama nazikçe: çekmece kapanınca adım ve facet'ler sıfırlanır; adayın yazdığı sıralama ve puan türü korunur (tekrar açarsa baştan yazmasın).
• Tamamlanınca: tercihProfiliYaz → çekmece kapanır → sonucHref ile /sonuc (girişliye sihirbaz: "1", girişsize hazir: "1"). Giriş duvarı sihirbazın hemen arkasında değildir; değer önce gösterilir.
• Lenis: çekmece içeriği ve kaydırma kabı data-lenis-prevent taşır; sayfadaki smooth-scroll çekmece içi kaydırmayı ezmez.

6. Erişilebilirlik

• Sıralama alanı: inputMode="numeric", binlik ayraçlı biçimleme (85000 → 85.000), hata durumunda aria-invalid + aria-describedby + role="alert".
• Puan türü seçimi role="radiogroup" / role="radio" + aria-checked.
• Kapatma yolları: çarpı butonu, overlay, Escape, tutamaktan swipe.
• prefers-reduced-motion vaul/motion tarafında zaten sadeleşir; çekmeceye özel ek animasyon eklenmedi.

7. Bu deseni ne zaman kullan / kullanma

Kullan: İçerik sayfasında duran ve adaydan tek kritik girdi (sıralama) isteyen her funnel girişi. Adayın okuduğu bağlam değerliyse (bölüm, üniversite, rehber) çekmece doğru araçtır.

Kullanma: Zaten modal/dialog içinde olan akışlar (arama modalındaki funnel kartı gibi — modal üstüne çekmece açılmaz, oradaki kart mevcut kapı/dialog akışını kullanır) ve profilli kısayollar (doğrudan link yeterli).