kolaytercih/docs/ekip-raporlari/2026-10-07/tasarimci-gorsel-dogrulama.md

Tasarımcı raporu — Görsel doğrulama · Paket D2 (çekmece), C (varyant çipi), D1 (sohbet)

Dal v2, HEAD 129c839. Tarayıcı: Claude Browser paneli, http://localhost:3100 (bu checkout'un dev sunucusu; 3000'deki sunucu kolaytercih-v1 klasörünü sunuyordu, kullanılmadı). Sunucuyu ben başlatmadım, kapatmadım — QA sekmesi (tab-1, /giris) aynı panelde açık. Ekran görüntüleri docs/ekip-raporlari/2026-10-07/ekran-tasarimci/ altında (26 dosya, numaralı; aşağıda [NN] ile atıf).

Gerekçe (AGENTS.md tarayıcı istisnası): açılış koreografisi, boy sıçraması, logo kabı kapanırken içerik kayması ve 375'te meta satırının sarması koddan görülemez; bakıldı.

Engel: D1 (sohbet) adımında panel gizlendi (QA sekmesi aktif, "Browser pane is not displayed") — ekran görüntüsü ve tıklama alamadım; ~2 dakika denedim. Sohbette görsel doğrulama yapılamadı; DOM (erişilebilirlik ağacı) ve kod okuması var. Yan etki: tema seçiciyi Koyu'ya aldım (kt-tema localStorage), panel gizli olduğu için geri alamadım — QA koyu temada görüyorsa sebebi bu.

Özet (5 madde)

1. D2 çekmece — geçti, bir sapmayla. 375/768/1280, açık+koyu: açılışta boy sıçraması yok (iskelet min-h-[70dvh] işe yarıyor), "Yıllara göre" yok, akademik göstergeler çekmecesi (kartlı mod) değişmemiş. Sapma: veri önbellekteyken (2. ve sonraki açılış) logo kareleri hiç görünmüyor, gövde ~0,7–1 s boş kalıp sonra içerik bulanıktan geliyor [07][11][20]. İlk açılışta kareler görünüyor [04][05].
2. Logo kabı kapanışı (~60 px kayma): gözle rahatsız edici değil — kareler sönerken içerik bulanık (opacity 0 → 1, blur 10 px), kayma bulanıklığın içinde kayboluyor. Karar: mevcut davranış kalsın, crossfade gerekmiyor. Asıl sorun 1. madde (kareler zaten görünmüyorsa koreografi yarım).
3. C varyant çipi — geçti. "Burslu", "İngilizce", "Burslu · İngilizce", "Burslu · İngilizce (%30)" çipleri üç genişlikte de SATIR_CIP ile tür çipinin ardında; 375'te meta satırı sarıyor, yatay taşma yok [02][13][17][19]. Başkent Tıp satırları artık ayırt ediliyor.
4. D1 sohbet — görsel doğrulanamadı (panel gizli). DOM'dan: senaryo akışında form geldi, iki soru da DOM'da, aktif soru data-active; role="status" shimmer satırı kodda var. Bulgu: ilerleme göstergesi ekran okuyucuya İngilizce "Questionnaire progress" diyor (ilkelden sızıyor). Shimmer, rota ve geçiş hissi için Bilal'in bakması gerekiyor (aşağıda liste).
5. pnpm tasarim:denetim: 0 hata, 12 uyarı (hepsi secimlerim-paneli.tsx:236, meraklisina-demo.tsx — bu paketlerin dışı, önceden vardı).

Geçti / geçmedi

Madde	Sonuç	Genişlik / tema
D2 açılışta boy sıçraması	Geçti	375 açık+koyu, 768, 1280
D2 logo kareleri belirip sönüyor (ilk açılış)	Geçti	375 açık [04][05]
D2 logo kareleri (önbellekli yeniden açılış)	Geçmedi	375 açık ×2, 375 koyu [07][11][20]
D2 içerik bloklarının netleşmesi	Geçti	hepsi [06][12][15]
D2 kap kapanırken kayma rahatsız mı	Hayır — kalsın	375, 768
D2 "Yıllara göre" gitti	Geçti	375 [10], koyu [22]
D2 akademik göstergeler çekmecesi değişmedi	Geçti	375 koyu [23][24][25]
C varyant çipi görünüyor	Geçti	375/768/1280, koyu [02][13][17][19]
C 375'te meta satırı taşıyor mu	Taşmıyor, sarıyor	375 [02][19]
C stil §4.15/§4.17	Geçti (kod: SATIR_CIP)	—
D1 shimmer akıyor mu	Doğrulanamadı (koddan: tw-shimmer keyframe artık tanımlı)	—
D1 avatar "rota"	Doğrulanamadı (koddan: varyant={canli && aracta ? "rota" : "nabiz"}, sohbet-client.tsx:308)	—
D1 soru geçişi sihirbazla aynı	Doğrulanamadı (koddan: tek kaynak adim-gecisi.ts)	—
D1 375 boy sıçraması / odak halkası	Doğrulanamadı (koddan: -m-1 kap + p-1 fieldset, ring-3 = 3 px < 4 px, sığar)	—
Reduced-motion	Doğrulanamadı (araç emüle edemiyor; koddan aşağıda)	—

Bulgular

B1 — Çekmece yeniden açılınca logo sahnesi görünmüyor, gövde ~1 s boş

• Nerede: src/features/katalog/components/program-ayrinti.tsx:199-204 + src/components/ui/acilis-sahnesi.tsx:95-140 (useLayoutEffect, hazir bağımlılığı).
• Gördüğüm: 375 açık, Başkent Tıp satırı. İlk açılış: 0,5 s'de mavi kare, 0,8 s'de iki kare, 1,5 s'de içerik üstte net altta bulanık [03]–[06]. Aynı satırı kapatıp yeniden açınca (veri durum === "hazir", fetch yok): 0,3 / 0,6 / 0,9 s karelerinde gövde bembeyaz — ne iskelet ne logo karesi [07][11]; ~1 s'de künye bulanık geliyor [12], sonra içerik. Koyu temada da aynı [20]. 7 kare × 0,3 s'lik üç ayrı denemede kareler hiç yakalanmadı; ilk açılışta 2 karede yakalandı.
• Olası sebep (koddan çıkarım): yeniden açılışta AcilisSahnesi hazir=true ile monte oluyor; useLayoutEffect içerik portal'a girdiği anda koşuyor, yani çekmece daha ekrana kaymadan (AltSayfa'nın yukarı kayma süresi) logo fazı (0,1–0,86 s) ekran dışında oynuyor; kullanıcıya kalan kısım "kap kapanıyor + içerik bulanık geliyor". D2 raporu bunu "tekrar açılışta sahne yeniden oynar" diye yazmış ama gözle böyle görünmüyor.
• Kullanıcıya etkisi: her yeniden açılışta 1 s boş beyaz sayfa; "yüklenmiyor mu?" hissi. Çekmece listede çok sık açılıp kapanan bir şey (sıra sıra programlara bakmak).
• Öneri (yazılımcı): önbellekli açılışta sahneyi hiç oynatma — hazir prop'u yalnız false → true geçişinde sahneyi tetiklesin (ilk render'da true geliyorsa azHareket dalındaki 0,25 s solma yeterli). Alternatif: sahneyi AltSayfa'nın "açıldı" olayına bağlamak. DESIGN.md §4.19 "7 Eki" maddesine "sahne yalnız veri ilk geldiğinde oynar; önbellekli açılış 0,25 s solma" cümlesi.
• Büyüklük: küçük (tek bileşende koşul).

B2 — Logo kabı kapanırken içerik kayması: kabul

• Nerede: acilis-sahnesi.tsx kartsız dal (kapat = animate(logo, { height: [.., 0] })).
• Gördüğüm: 768'de 0,4 → 0,9 s karelerinde çekmece başlığı 16 px yukarı çıktı, künye o sırada blur 10 px'ten geliyordu [14][15]; 375'te benzer. Kayma bulanık içeriğin altında kalıyor, göz "yerleşme" olarak okuyor, zıplama değil.
• Karar: mevcut davranış kalsın; crossfade (kap absolute) için gerekçe yok. B1 çözülünce bu faz zaten yalnız ilk açılışta oynayacak.

B3 — Sahne toplam süresi ≈ 2 s, belge "≈ 1 s" diyor

• Nerede: acilis-sahnesi.tsx (ICERIK_BASI 0,95 + 8 blok × 0,08 + 0,5 s netleşme = son blok 2,0 s'de biter); docs/tasarim/DESIGN.md §4.19 "toplam ≈ 1 s".
• Gördüğüm: 375 ilk açılışta 1,5 s'de "Son yerleşenin netleri" başlığı hâlâ bulanık [06].
• Etki: üstteki içerik okunurken alt kısım bulanık; küçük ama belgeyle çelişiyor.
• Öneri: ya belgeye gerçek sayı ("≈ 2 s; ilk blok 1 s'de net") ya da blok arası 0,08 → 0,05 ve netleşme 0,5 → 0,35. Büyüklük: küçük.

B4 — Çekmece gövdesi tutamaç ve çarpının altından maskesiz geçiyor

• Nerede: src/components/ui/alt-sayfa.tsx:624-631 (AltSayfaGovde overflow-y-auto), çarpı program-ayrinti.tsx:181 (absolute top-3 right-3 z-10).
• Gördüğüm: 375 açık ve koyu, gövde kaydırılınca "AYT Matematik / 40 · 35 · 31,75 · 36" satırı tutamacın ve çarpının altından geçiyor, üçüncü sütunun son rakamı çarpının arkasında [09][22].
• Etki: üst satır okunmaz, çarpıya basınca tablo hücresine basılmış hissi. D2'ye özgü değil (liste çekmecesi de aynı), ama içerik uzadığı için burada ilk kez belirgin.
• Öneri: AltSayfaGovde üstüne 48 px bg-card → saydam mask-image ya da tutamaç şeridine bg-card zemin; çarpı kutusu zaten bg-popover. Tek kaynak alt-sayfa.tsx; tüm çekmeceler kazanır. Büyüklük: küçük-orta.

B5 — "Mezun istihdamı" paragrafı küçük harfle başlıyor

• Nerede: program-ayrinti.tsx:471 — `mezunların %${…}'i kayıtlı çalışıyor`.
• Gördüğüm: 375 açık ve koyu: "mezunların %95,5'i kayıtlı çalışıyor, ilk iş ortalama…" [09][22].
• Etki: metin kuralı (§10.4, cümle başı büyük); özensiz görünüyor.
• Öneri: parçalar birleştikten sonra ilk harfi toLocaleUpperCase("tr") ile büyüt (ya da "Mezunların" yaz). Büyüklük: trivial.

B6 — Soru formu ilerleme göstergesi ekran okuyucuya İngilizce

• Nerede: src/features/rapor/components/sohbet-anketi.tsx:124-130 — QuestionnaireProgress render={(props, state) => <div {...props}>…}; props içinde ilkelin aria-label="Questionnaire progress"i geliyor (node_modules/@shadcn/react/dist/questionnaire/index.js). DOM'da doğrulandı: progressbar "Questionnaire progress".
• Etki: VoiceOver/TalkBack Türkçe akışta İngilizce etiket okuyor (arayüz metni kuralı; WCAG 3.1.2).
• Öneri: <div {...props} aria-label="Soru ilerlemesi"> (spread'den sonra). Büyüklük: trivial.

B7 — Soru formunun başlığı başlık elemanı değil

• Nerede: sohbet-anketi.tsx:121 — "Listeni nasıl değiştirelim?" p içinde; form aria-labelledby ile ona bağlı (iyi), ama soru metinleri (QuestionnaireTitle → legend) DOM'da generic görünüyor.
• Etki: küçük; form adı doğru okunuyor. Not olarak; düzeltme istemiyorum.

B8 — Reduced-motion (koddan çıkarım, araç emüle edemiyor)

• Çekmece: acilis-sahnesi.tsx useReducedMotion → logo display:none, 0,25 s solma. Uygun (§6).
• Soru geçişi: adim-gecisi.ts hareketiAzalt → x/height 0 s, opaklık 0,12 s. Uygun.
• Shimmer: shadcn @utility shimmer içinde @media (prefers-reduced-motion: reduce) bloğu var (node_modules/shadcn/dist/tailwind.css:623) → animasyon yok, düz metin. Uygun.
• Avatar rota: animasyonlu-mark.tsx:195,240 matchMedia ile durur. Uygun.
• Araç hapları: §4.20'ye göre yalnız opaklık; bu turda bakılmadı.

Gözlem (bulgu değil)

• [01] 375 açık, üniversite sayfası scroll_to sonrası: üst çubukta "Başkent Üniversitesi" başlık geçişi (NavBaslik) logo ile üst üste yarı saydam yakalandı — geçiş ortası kare; sonraki karelerde düzgün. Bilal kaydırırken gözüyle baksın.
• Tema seçici hapları (secim-haplari.tsx:68) erişilebilirlik ağacında adsız radio görünüyor; metin span içinde (satır 98) olduğu için muhtemelen araç sınırı. Doğrulanmalı (VoiceOver'da "Açık / Koyu / Sistem" okunuyor mu).

Bilal'in gözle kontrol etmesi gerekenler (panel gizli kaldığı için)

1. /dev/sohbet → "Soru formu + revizyon" → kutuya herhangi bir şey yaz, Enter. 375'te: (a) "Soruları hazırlıyorum…" satırında parıltı soldan sağa akıyor mu; (b) o sırada avatar header logosu gibi "rota" oynuyor mu; (c) form gelince "İlk 5" seç → İleri: soru sağdan kayarak geliyor mu, kutu boyu yayla uzuyor mu, kırpılma yok mu; Geri → soldan; (d) Tab ile seçeneklere gel: odak halkası dört kenarda tam mı. Ardından aynısı koyu temada. ~4 dk.
2. /bolum/tip → Başkent satırı → bilgi düğmesi, kapat, tekrar aç: ikinci açılışta logo kareleri görünüyor mu, gövde boş kalıyor mu (B1). ~1 dk.
3. Sistem ayarından "Hareketi azalt" açıkken 2. adım: logo yok, 0,25 s solma; sohbet formu geçişi kaymasız. ~2 dk.

Bilal'den istenen

1. B1 için karar: önbellekli açılışta sahne atlansın mı (önerim: evet, 0,25 s solma) — 1 dk.
2. B2 kararı: logo kabı kapanışı kalsın (crossfade yok) — onay, 30 sn.
3. Tema seçici tarayıcıda Koyu'da kaldı; QA tamamlanınca Açık'a alınsın (footer) — 10 sn.