# 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.