kolaytercih/docs/ekip-raporlari/2026-10-04/koyu-tema-denetimi.md

Koyu tema — gözle denetim (tasarımcı, 4 Eki 2026)

Lokal dev sunucusunda (çalışma ağacı, commit yok) koyu tema 375 / 768 / 1280 px'te gezildi. Kod değiştirilmedi. Sunucu iş sonunda kapatıldı.

Neden tarayıcı açıldı: kontrast, açık kalan lekeler, taşma ve koyu temadaki yüzey ayrımı koddan görülemiyor; değişiklik canlıda da yok.

Özet (5 madde)

1. Koyu tema genel olarak sağlam: gezilen ~20 ekranın çoğunda okunmayan yazı, beyaz leke ya da kaybolan kenarlık yok.
2. Temaya bağlı 2 önemli hata var: /sonuc'ta seçili sekmenin sayısı görünmüyor; /paket'te iyzico/Visa/Troy logoları koyu zeminde kayboluyor.
3. Temaya bağlı 1 kozmetik leke: arama penceresindeki "Üniversiteler" karosunun ikon kutusu beyaz kalıyor (sky-* çevrilmemiş).
4. Girişli ekranlara girilmedi; koddan iki risk çıktı (kilit ikonu, sohbetteki kod bloğu) — gözle doğrulanmalı.
5. Temayla ilgisi olmayan ama gezerken görülen 2 mobil taşma var (/paket canlıda da taşıyor; arama penceresinde çarpı ekran dışına çıkıyor).

pnpm tasarim:denetim: 0 hata, 12 uyarı (hepsi eski: secimlerim-paneli.tsx büyük harf etiket / tabular-nums, meraklisina-demo.tsx 12 px altı yazı).

Bulgular (önem sırasıyla)

Önemli

1. /sonuc — seçili dilim sekmesinde sayı okunmuyor (375, 768, 1280)

• Görülen: seçili sekme koyu temada açık hapa dönüyor (doğru), "Dengeli" yazısı koyu (doğru), ama altındaki/yanındaki sayı ("186") beyaz kaldığı için açık hap üstünde görünmüyor. Sekme ikonu da (sarı terazi) açık hap üstünde çok silik.
• Kaynak: src/features/liste/components/program-tablosu.tsx:234 → text-white/70; ikon :75, :82, :89 → renkAktif: text-red-400 / text-amber-400 / text-emerald-400 (koyu hap için seçilmiş açık tonlar).
• Kural: DESIGN.md §2.3 "koyu hap yazısını text-slate-50 ile alır, text-white ile değil".
• Düzeltme: sayı text-slate-50/70. İkon için en basiti: seçili sekmede ikon da hapın yazı rengini alsın (text-slate-50); anlamı zaten etiket taşıyor. Renk korunacaksa renkAktif kaldırılıp renk kullanılır ama sarı açık hapta yine zayıf kalır.

2. /paket — iyzico logo bandı koyu zeminde kayboluyor (375, 1280)

• Görülen: "VISA" ve "troy" neredeyse görünmüyor, iyzico yazısı silik. Footer'daki aynı bant beyaz hap üstünde ve sorunsuz.
• Kaynak: src/features/odeme/components/paket-satinal.tsx:86-92 ve src/features/odeme/components/odeme-sayfasi.tsx:90-96 — kt-acik-logo sınıfı yok (footer'da var: site-footer.tsx:205).
• Düzeltme: iki Image'a kt-acik-logo ekle. (Ödeme sayfası girişli; gözle bakılmadı, aynı kod.)
• Not: iyzico sözleşmesi logoların görünür olmasını istiyor; bu yüzden kozmetik değil.

3. /listem kilit satırı — ikon kaybolur (koddan çıkarım, girişli ekran)

• src/features/rapor/components/listem-govde.tsx:294 → bg-orange-100 text-orange-700. orange-100 .dark bloğunda yok (açık şeftali kalır), orange-700 ise açık tona çevrilmiş → açık zemin üstünde açık ikon.
• Düzeltme: globals.css .dark bloğuna --color-orange-100 koyu karşılığı ekle (ör. oklch(0.32 0.07 50)), ya da sınıfı bg-orange-50 yap.

4. Danışman sohbetinde kod bloğu (koddan çıkarım, girişli ekran)

• src/components/ui/code-block.tsx:36 → shiki teması sabit github-light: koyu yüzeyde koyu yazı.
• Düzeltme: temayı useTheme().resolvedTheme'e göre github-dark / github-light seç (toast'taki desenle aynı, §4.16). Danışman nadiren kod yazdığı için aciliyeti düşük.

Kozmetik

5. Arama penceresi (boş durum) — "Üniversiteler" karosu beyaz ikon kutusu (1280; 375'te de aynı kod)

• Görülen: üç keşif karosundan ortadakinin ikon kutusu parlak beyaz/açık mavi; diğer ikisi koyu.
• Kaynak: src/features/katalog/components/katalog-arama.tsx:95-97 → bg-sky-300, bg-sky-50, bg-sky-100 (ve :101 bg-amber-300). .dark bloğunda yalnız sky-200 ve sky-600 var.
• Düzeltme: .dark bloğuna --color-sky-50, --color-sky-100 koyu ton ekle (§2.3 son madde: "yeni ton eklenince karşılığı yazılır").

6. Mobil tarayıcı çubuğu rengi sistemi izliyor, siteyi değil

• src/app/layout.tsx:75-78 themeColor prefers-color-scheme ile seçiliyor. Sistem açık + sitede "Koyu" seçiliyse adres çubuğu açık renk kalır. Düşük öncelik; istenirse tema değişince <meta name="theme-color"> güncellenir.

7. /meraklisina 375 px — beyaz şema kâğıdı üst çubuğun altından geçerken logo çevresi grileşiyor

• Logo yazısı okunuyor ama bulanık katman kâğıdın beyazını taşıyor. Rehber kapaklarında aynı durum gözlenmedi (üst çubuk koyu kaldı). Bilal baksın; düzeltme şart değil.

Temayla ilgisi yok, gezerken görüldü

8. /paket 375 px — sayfa yatay taşıyor (önemli; canlıda da var, kolaytercih.com/paket'te doğrulandı)

• Görülen: "299 TL" → "299 T", madde metinleri ve turuncu buton sağdan kesik.
• Muhtemel kaynak: paket-satinal.tsx:58 grid gap-6 sm:grid-cols-[1fr_auto] — telefonda tek sütun auto; :133 buton metni ("Giriş yap — ilk 3 tercihini ücretsiz gör") tek satırda sığmadığı için sütunu genişletiyor.
• Düzeltme: kaba grid-cols-[minmax(0,1fr)] (telefon) ve butona whitespace-normal h-auto min-h-12 ya da metni kısalt.

9. Arama penceresi 375 px — sonuç gelince içerik sağa taşıyor, kapatma çarpısı ekran dışında (önemli; canlıda doğrulanamadı)

• Görülen: "bilgisayar" yazınca uzun bölüm adı ve rehber kartı pencerenin sağ kenarından kesiliyor; giriş satırındaki çarpı görünmüyor. Sonuç yokken (boş/"bulunamadı") düzen doğru, çarpı yerinde.
• Muhtemel kaynak: katalog-arama.tsx:396 — DialogContent grid ama sütun tanımı yok; truncate satırlar sütunu genişletiyor.
• Düzeltme: aynı satıra grid-cols-[minmax(0,1fr)].

10. Sihirbaz — kapatma çarpısı üçüncü adım çubuğunun ucuna biniyor (375, 1280; kozmetik)

• sihirbaz-adimlar.tsx adım çubuğu satırına sağdan çarpı kadar boşluk (pr-12).

11. /giris — "Giriş bağlantısı gönder" butonunda başta zarf ikonu (kozmetik)

• AGENTS.md CTA kuralı: başta ikon yok, sonda ArrowRight. Kaynak src/features/kullanici/components/giris-form.tsx:181 civarı.

12. Arama penceresi alt satırı — sonuçlar listelenirken de "En az 2 harf yazarak ara" yazıyor (metin; kozmetik).

Sorunsuz bulunan ekranlar (koyu tema)

• Ana sayfa 375 / 768 / 1280: hero + piksel harita, sorun kartları, üç adım, sayılar + dürüstlük notu, karşılaştırma tablosu, fiyat kartları, SSS, CTA bandı, footer, tema seçici, iyzico hapı.
• Üst çubuk: logo, orta nav, "Ara" (açık hap + koyu yazı) ve Kbd'ler, "Giriş yap", sıralama hapı, Listem sayacı, üst mavi bant, üst/alt blur.
• Arama penceresi 1280: giriş satırı, üniversite sonuçları + logo karoları, çarpı, koyu funnel kartı.
• /universiteler, /universiteler/istanbul (şehir yüzeyi + piksel harita), /universite/ankara-universitesi (özet kartlar, harita, program tabloları, eğilim çizgisi), akademik göstergeler çekmecesi, /bolumler, /bolum/bilgisayar-muhendisligi (375 + 1280), netler çekmecesi.
• Sihirbaz: sıralama penceresi, puan türü açılır listesi, alan çipleri, şehir çipleri + il seçim haritası, öncelik adımı.
• /sonuc: başlık, Türkiye haritası, tablo satırları, risk etiketleri (sekme hariç — bulgu 1).
• Liste çekmecesi, kaydet banner'ı, "Listene eklendi" bildirimi (açık düğme + koyu yazı).
• /rehber (kapaklar bilinçli beyaz), mermaid şemalı yazı, /meraklisina (dilim şeridi, huni şeması beyaz kâğıtta), /giris, /iletisim, /gizlilik, 404.
• Odak halkası: hero giriş alanı ve "Giriş yap" üstünde mavi halka görünür.
• Açık tema, ana sayfa 1280: hero, üç adım, tablo, fiyat, CTA bandı, footer — gerileme görülmedi.

Bakılamayanlar

• Girişli ekranlar: /listem raporu, danışman sohbeti, /odeme, kredi/tercih değişti modalları.
• KKTC/yurt dışı haritaları (yurtdisi-haritalar.tsx) — test seçiminde çıkmadı.
• Tema değişirken titreme/flash: araç anlık kare yakalayamıyor; görünür bir bozulma fark edilmedi ama doğrulanmış sayılmaz.
• Hover hâlleri tek tek denenmedi (yalnız netler düğmesinde turuncu hover görüldü, sorunsuz).
• Ekran görüntüleri 1280'de %62 ölçekli geldi; ince kontrast farkları (silik gri metinler) gözle kesinleştirilemedi.

Bilal'in gözle bakması gerekenler

1. /sonuc → seçili sekme (Hayal/Dengeli/Güvenli), koyu tema.
2. /paket → iyzico logo satırı, koyu tema; aynı sayfa telefonda sağdan kesik mi.
3. Telefonda arama → "bilgisayar" yaz → çarpı görünüyor mu.
4. Girişliyken /listem kilit satırı ve bir danışman yanıtı (kod bloğu varsa).
5. /rehber listesi koyu temada: beyaz kapaklar art arda — bilinçli karar, göze nasıl geldiğine bak.

Bilal'den istenen

1. Bulgu 1 ve 2'nin commit öncesi düzeltilmesine onay (iki küçük sınıf değişikliği) — 1 dk.
2. Bulgu 8 ve 9 (mobil taşma, canlıda da var) için ayrı iş açılsın mı kararı — 2 dk.
3. Girişli ekranlara koyu temada bir kez göz atmak (liste yukarıda, madde 4) — 5 dk.

Not

Önizleme tarayıcısında test verisi kaldı (sıralama 85.000, listede 3 program) ve tema "Koyu"da kalmış olabilir; yalnız önizleme panelinin yerel depolamasında, koda ya da veritabanına yazılmadı. Form gönderimi, giriş, ödeme yapılmadı.