feat(tema): açık / koyu / sistem teması

- TemaSaglayici (next-themes) + alt bilgide TemaSecici
- globals.css: .dark bloğunda palet token'ları çevrilir; bileşenlere
  dark: sınıfı yazılmaz
- yüzeyler bg-white → bg-card, koyu haplar text-slate-50, SVG'lerde
  sabit renk yerine değişken
- DESIGN.md §2.3 + tasarim-denetim kuralları (yuzey-beyaz,
  koyu-hap-beyaz-yazi, dark-sinif), AGENTS.md karanlık mod bölümü
- docs: koyu tema denetimi raporu

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

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

@@ -0,0 +1,114 @@
+# 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ı.

docs/tasarim/DESIGN.md

@@ -48,15 +48,16 @@ ve üniversite sayfası. Bu hissi veren şeyler, ekrandan bağımsız:
 
 ### 1.2 Genel kurallar
 
-- Zemin her zaman beyaz; koyu zemin yalnızca CTA bandı ve çekmece başlığı gibi tek bir
-  vurgu yüzeyinde (`PixelMasonry` ile: büyüklü küçüklü, hafif kaymış kareler).
+- Açık temada zemin beyaz (koyu temada karşılığı, §2.3); koyu zemin yalnızca CTA bandı ve
+  çekmece başlığı gibi tek bir vurgu yüzeyinde (`PixelMasonry` ile: büyüklü küçüklü, hafif kaymış kareler).
 - İmza dekoratiftir ama rastgele değildir: deterministik ızgara (hücre 10, nokta 7.4, rx 2),
   imleç yaklaşınca turuncuya ısınan pikseller (`usePixelHeat`), uzaklaşınca yavaş soğuma.
   Piksel **veri taşıyorsa** (ör. `PixelSira`) kalır; iki bölüm arasına **süs olarak** konmuş
   piksel ayraç alt sayfalarda ve kompakt panellerde kullanılmaz.
 - Ton: öğrenciye "sen" diyen, sakin, vaatsiz. Süs yok, gösteriş yok; hareket yalnızca
   bir şey söylüyorsa var.
-- **Karanlık mod yoktur.** `dark:` sınıfı yazılmaz (`.dark` token'ları shadcn kalıntısıdır).
+- **Karanlık mod token'la çalışır, `dark:` sınıfı yazılmaz** (§2.3). Bileşen tek bir sınıf
+  dizisiyle yazılır; iki temada doğru görünmesi palet token'larının işidir.
 
 ## 2. Renk paleti ve rolleri
 
@@ -123,6 +124,43 @@ turuncu **tek tondur: `orange-500`** — CTA butonunun turuncusuyla birebir ayn
   altında kalır (sitenin turuncu CTA'sı da aynı ikiliyi kullanır). Bu zeminlerde etiket
   `font-bold`, sayı en az `text-3xl`; uzun metin konmaz.
 
+### 2.3 Karanlık mod
+
+Bilal'in kararı (4 Eki 2026): sitede açık / koyu / sistem teması var; varsayılan açık.
+Seçici `src/components/tema-secici.tsx` (footer'da), sağlayıcı `src/components/tema-saglayici.tsx`
+(`next-themes`, `<html class="dark">`). Renklerin tek kaynağı `src/app/globals.css` içindeki
+`.dark` bloğu.
+
+**Nasıl çalışır:** bileşenlere `dark:` yazılmaz; palet token'ları çevrilir.
+
+| Açık temadaki sınıf | Koyu temada ne olur |
+|---|---|
+| `bg-card` (yüzey: kart, hap, form alanı, modal, çekmece) | Koyu yüzey (`#111826`) |
+| `bg-slate-50` (gövde zemini, kart içi ikincil kutu) | En koyu zemin (`#080e19`) |
+| `slate-100…900` (metin, kenarlık, hover zemini) | Ölçek ters döner: `text-slate-900` açık başlık, `border-slate-200` koyu çizgi |
+| `bg-orange-50/60`, `bg-amber-50`, `bg-emerald-50`, `bg-red-50`, `border-*-200` | Aynı rengin koyu tonu |
+| `text-amber-900`, `text-emerald-800`, `text-red-600` gibi koyu renkli metin | Aynı rengin açık tonu |
+| `text-white`, `bg-orange-500`, `bg-primary`, `bg-emerald-500`, `bg-red-500` | **Değişmez** |
+
+**Kurallar:**
+
+- **Yüzey `bg-card`'dır, `bg-white` değil.** `bg-white` koyu temada da beyaz kalır; yalnız
+  gerçekten beyaz kalması gereken yerde yazılır: üniversite logosu karosu (`uni-logo.tsx`),
+  kaydırıcı topuzu, rehber kapak görseli, renkli dolu zemin üstündeki `bg-white/15` ikon kutusu.
+- **Koyu hap** (`bg-slate-900`: "Giriş yap", "Ara", sekme göstergesi, toast düğmesi) yazısını
+  `text-slate-50` ile alır, `text-white` ile değil: koyu temada hap açığa, yazı koyuya döner.
+- **Koyu vurgu yüzeyi** (`bg-slate-950`: `PikselCtaYuzeyi`, `AramaFunnelKarti`) `kt-koyu-yuzey`
+  sınıfını taşır; iki temada koyu kalır, içindeki açık slate metinler çevrilmez. `slate-950`
+  metin rengi olarak kullanılmaz.
+- **SVG ve satır içi stilde** sabit renk yerine değişken: `var(--card)`, `var(--color-slate-200)`,
+  `var(--kt-harita-dolu)`. Risk renkleri (`RISK_RENK`) ve logo renkleri iki temada aynıdır.
+- **Açık kalan adalar:** el çizimi şemalar (`kt-sema-kagit`) ve iyzico logo bandı
+  (`kt-acik-logo`; footer, paket ve ödeme sayfası) koyu temada beyaz kâğıt/hap üstünde durur;
+  tek renk koyu logo (URAP) `kt-koyu-cevir` ile açığa çevrilir; yazdırma çıktısı her zaman açıktır
+  (`.dark` bloğu `@media screen` içinde).
+- Yeni bir renk tonu ilk kez kullanılıyorsa (`bg-sky-50` gibi) `.dark` bloğuna karşılığı eklenir;
+  eklenmezse koyu temada açık renkli bir leke olarak kalır.
+
 ## 3. Tipografi
 
 Dört arayüz yazı tipi (+ yalnız Kur'an metni için bir Arapça yazı tipi), her birinin tek bir işi var:
@@ -199,7 +237,7 @@ bir dosyaya (`src/components/…`) çıkarılıp iki yer de oradan kullanır.
 ```tsx
 <SectionEyebrow>Nasıl çalışır?</SectionEyebrow>
 ```
-Sınıfı: `inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3.5 py-1.5 text-xs font-semibold text-primary` + başta `PixelMark`.
+Sınıfı: `inline-flex items-center gap-2 rounded-full border border-slate-200 bg-card px-3.5 py-1.5 text-xs font-semibold text-primary` + başta `PixelMark`.
 `@/components/ui/badge` **kullanılmaz**; elle pill span yazılmaz. Filtre çipleri, nav butonları
 ve kimlik hapları (§4.12) bu kuralın dışındadır. Rozet **sayfa** bölüm başlıklarının üstündedir;
 çekmece ve modal başlıklarında kullanılmaz (§4.10, Bilal 24 Eyl 2026).
@@ -211,7 +249,7 @@ Alt sayfada (`Drawer`) aynı sınıf seti `DrawerClose` üstünde kullanılır (
 
 ### 4.4 Kart ve kutu
 - Landing/öne çıkan kart: `<Card className="relative h-full overflow-hidden border-slate-200/70 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-orange-500 hover:shadow-lg hover:shadow-orange-500/5">` + sağ üstte `<PixelCorner className="absolute right-4 top-4" />`. (Kodda hâlâ `hover:border-primary/30 hover:shadow-primary/5`; §2.1 geçiş notu.)
-- Sade kutu (form, panel, liste satırı): `rounded-2xl border border-slate-200 bg-white` (+ `p-5`/`p-6`). Küçük iç kutu: `rounded-xl border border-slate-200 bg-slate-50`. Not kutusu: `rounded-lg`.
+- Sade kutu (form, panel, liste satırı): `rounded-2xl border border-slate-200 bg-card` (+ `p-5`/`p-6`). Küçük iç kutu: `rounded-xl border border-slate-200 bg-slate-50`. Not kutusu: `rounded-lg`.
 - İkon kutusu: `flex size-11 items-center justify-center rounded-xl bg-primary/10` içinde `size-5 text-primary` ikon. Kart içinde sayının yanında küçük hâli: `size-8 … sm:size-10` + `size-4 sm:size-5` ikon (§4.8).
 - Gölge: `shadow-sm` varsayılan; hover'da `shadow-lg shadow-orange-500/5`. Başka gölge yok.
 
@@ -223,7 +261,7 @@ Nokta + metin: `<span className="size-2 rounded-full bg-emerald-500" />` yanınd
 Form alanı da bir **hap**tır: üst çubuktaki arama/kullanıcı haplarıyla aynı kalıp (48 px, tam
 yuvarlak, slate-200 kenarlık, 16 px yazı). shadcn'in ince varsayılanı (`h-8 rounded-lg
 border-input md:text-sm`) bu projede yoktur; temel bileşenler 24 Eyl 2026'da bu dile çevrildi.
-- **Metin alanı (`Input`)**: `h-12 w-full rounded-full border border-slate-200 bg-white px-5 text-base text-slate-900 placeholder:text-slate-400`;
+- **Metin alanı (`Input`)**: `h-12 w-full rounded-full border border-slate-200 bg-card px-5 text-base text-slate-900 placeholder:text-slate-400`;
   hover `border-slate-300`; odak `border-primary ring-3 ring-ring/50`; hata (`aria-invalid`)
   `border-red-500 ring-3 ring-red-500/20`; devre dışı `bg-slate-50 opacity-50`. `md:text-sm` yok — gövde
   16 px altına inmez (§3) ve iOS odakta yakınlaştırmaz. Kullanım yerinde yükseklik/köşe/zemin
@@ -233,9 +271,9 @@ border-input md:text-sm`) bu projede yoktur; temel bileşenler 24 Eyl 2026'da bu
   `pointer-events-none absolute left-5 top-1/2 size-4 -translate-y-1/2 text-slate-400`, alan `pl-12`.
 - **Seçim (`SelectTrigger`)**: aynı hap — `h-12 pl-5 pr-4 text-base`, ok `text-slate-400`;
   `size="sm"` → `h-9 px-4 text-sm` (yalnız masaüstü tablo aksiyonu, §8). Açılan liste
-  `rounded-2xl border border-slate-200 bg-white p-1.5 shadow-lg`; satır `rounded-full py-2 pl-4 pr-9 text-base`,
+  `rounded-2xl border border-slate-200 bg-card p-1.5 shadow-lg`; satır `rounded-full py-2 pl-4 pr-9 text-base`,
   klavye/odak `bg-slate-100`, seçili işareti `text-primary`.
-- **Çok satır (`Textarea`)**: hap değil sade kutu (§4.4): `min-h-24 rounded-2xl border border-slate-200 bg-white px-5 py-3 text-base`;
+- **Çok satır (`Textarea`)**: hap değil sade kutu (§4.4): `min-h-24 rounded-2xl border border-slate-200 bg-card px-5 py-3 text-base`;
   hover/odak/hata metin alanıyla aynı. Sohbet kutusu (`prompt-input.tsx`) kenarlıksız ve şeffaf
   üstüne yazar; tek istisna.
 - **Kenarlıksız ham `<input>`** yalnız kendi hap kabının içinde: il arama
@@ -265,7 +303,7 @@ yanındaki 2×2).
 └──────────────────────┘
 ```
 
-- Kap: `flex flex-col rounded-2xl border border-slate-200 bg-white p-4 sm:p-5`.
+- Kap: `flex flex-col rounded-2xl border border-slate-200 bg-card p-4 sm:p-5`.
 - Sayı satırı: `flex items-start justify-between gap-1.5`; sayı §3 "Özet kartı sayısı";
   ikon kutusu `flex size-8 shrink-0 items-center justify-center rounded-xl bg-primary/10 sm:size-10`.
 - `dl` anlamı için `dt` (başlık) DOM'da önce gelir, görsel sıra `order-*` ile kurulur.
@@ -283,7 +321,7 @@ yanındaki 2×2).
 ### 4.9 Ayrıntı satırı — `AkademikAyrinti`, `akademik-ayrinti.tsx`
 Özet kartlarının altında "fazlası burada" satırı (Apple Sağlık'taki "Tüm verileri göster").
 
-- `mt-4 flex w-full items-center gap-4 rounded-2xl border border-slate-200 bg-white p-4 sm:p-5`
+- `mt-4 flex w-full items-center gap-4 rounded-2xl border border-slate-200 bg-card p-4 sm:p-5`
   + hover §2.1 + `active:scale-[0.99]`.
 - Solda ikon kutusu (`size-11`), ortada iki satır: başlık `font-heading text-lg font-bold`,
   altında **önizleme** `truncate text-sm text-slate-500` — içeride ne olduğunu söyler ("Hoca
@@ -293,7 +331,7 @@ yanındaki 2×2).
 ### 4.10 Alt sayfa (Drawer) içeriği
 Ayrıntı her zaman **alttan açılan sayfada** (`Drawer handleOnly`, tutamaçlı); ekranın ortasında
 açılan modal değil. Çekmece kabı ve çarpı `cta-sira-form.tsx`'teki çekmeceyle birebir:
-`DrawerContent className="max-h-[92dvh] bg-white sm:mx-auto sm:max-w-2xl sm:border-x sm:border-slate-200 sm:shadow-2xl"`.
+`DrawerContent className="max-h-[92dvh] bg-card sm:mx-auto sm:max-w-2xl sm:border-x sm:border-slate-200 sm:shadow-2xl"`.
 
 İçerik kuralları (Apple ayrıntı sayfası):
 - **Her ekranda ortalı:** başlık `px-10 text-center font-heading text-2xl font-bold`, altında
@@ -351,7 +389,7 @@ aşağı kaymış, kare boyları farklı — ne tepeler ne bitişler hizalı.**
 
 ### 4.12 Kimlik hapları (tür, il)
 Başlığın altında kurumun kimliği; navbar haplarının ölçüsünde:
-`inline-flex h-10 items-center gap-2 rounded-full border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-800`
+`inline-flex h-10 items-center gap-2 rounded-full border border-slate-200 bg-card px-4 text-sm font-semibold text-slate-800`
 + başta `size-4 text-primary` ikon (`Landmark` devlet, `Building2` vakıf, `MapPin` il). Tür
 renkle değil ikonla ayrılır. Rozet (§4.2) değildir. **Devlet/vakıf hapı tür sayfasına**
 (§4.18), **il hapı şehir sayfasına link**tir (Bilal, 24 Eyl 2026: "şehirlerin geçtiği her yer tıklanabilir") — aynı
@@ -431,18 +469,18 @@ tablosu bu sabitleri kullanır, sınıfı elle yazmaz.
 - Tablo başlığı `h-12 text-sm font-semibold text-slate-500`; hücre dolgusu `py-4 pl-4 sm:pl-5`.
 
 ### 4.16 Bildirim (toast) — `src/components/ui/sonner.tsx` + `globals.css`
-Tema **light'a sabit** (karanlık mod yok, §1.2): sistem koyu temadayken sonner açıklamayı beyaza
-yakın griye çevirip beyaz zeminde okunmaz ediyordu (Bilal, 24 Eyl 2026: "toast açıklaması
-okunmuyor"). Kutu `rounded-2xl border-slate-200`; başlık `font-semibold text-slate-900`; açıklama
-`text-slate-600`; aksiyon düğmesi üst çubuktaki koyu hap (`h-9 rounded-full bg-slate-900` beyaz
-yazı, hover `slate-700`). Metin §10.4: ne oldu + ne yapılacak; kilometre taşı toast'ları
+Tema **sitenin temasını izler** (`useTheme().resolvedTheme`, §2.3), sistemin değil: sistem koyu
+temadayken sonner açıklamayı beyaza yakın griye çevirip beyaz zeminde okunmaz ediyordu (Bilal,
+24 Eyl 2026: "toast açıklaması okunmuyor"). Kutu `rounded-2xl border-slate-200`; başlık `font-semibold text-slate-900`; açıklama
+`text-slate-600`; aksiyon düğmesi üst çubuktaki koyu hap (`h-9 rounded-full bg-slate-900`,
+yazı `slate-50`, hover `slate-700`). Metin §10.4: ne oldu + ne yapılacak; kilometre taşı toast'ları
 (`program-ekle-butonu.tsx`) tek cümle açıklama + tek aksiyon taşır.
 
 ### 4.17 Şehir çipleri — `SehirCipleri`, `src/features/katalog/components/sehir-cipleri.tsx`
 Şehre göre üniversite gezinmesi (`/universiteler` üstü ve `/universiteler/[il]` altı).
 Sihirbazın il çipiyle aynı kalıp; etkileşimli çip olduğu için rozet (§4.2) değildir:
 `inline-flex h-10 cursor-pointer items-center gap-1.5 rounded-full border px-3.5 text-sm font-semibold transition-[background-color,border-color,color,transform] duration-150 active:scale-[0.97]`
-+ pasif `border-slate-200 bg-white text-slate-700 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500`,
++ pasif `border-slate-200 bg-card text-slate-700 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500`,
 bulunulan şehir `border-primary bg-primary text-white` + `aria-current="page"`. Ad yanında
 üniversite sayısı `font-normal tabular-nums text-slate-400` (aktifte `text-white/80`).
 - Çip satırında yalnız **2+ üniversiteli** şehirler (≈28) durur; 90'ı aşkın şehrin tamamı
@@ -450,7 +488,7 @@ bulunulan şehir `border-primary bg-primary text-white` + `aria-current="page"`.
   bakılan önde, ayrıntı bir dokunuş derinde"). Satırın sonunda "Tüm şehirler (N)" çipi.
 - Şehir sayfası (`il-icerik.tsx`) katalog detay düzenindedir (§5.2): yol satırı, **başlık
   yüzeyi** (`SehirYuzeyi`: `relative isolate overflow-hidden rounded-3xl border border-slate-200
-  bg-white p-6 sm:p-8`, `PikselZemin ton="acik"` seed 31, harita kabı `haric`), içinde h1
+  bg-card p-6 sm:p-8`, `PikselZemin ton="acik"` seed 31, harita kabı `haric`), içinde h1
   "İstanbul Üniversiteleri Taban Puanları 2026", kimlik hapları (`MapPin` il + üniversite
   sayısı), özet paragraf; sağda (lg, 24rem sütun) ya da altta (telefon) **şehri temsil eden
   piksel harita** `SehirPikselHaritasi`. Sonra kompakt `CtaSiraForm`, `PagePixelDivider`
@@ -602,7 +640,7 @@ Hareket kuralları (Apple, `motion/react`):
 | CTA: metin + sondaki `ArrowRight` | Başta `Sparkles`/yıldız ikonu, "✨" |
 | Nötr = slate; vurgu = primary mavi; aksiyon ve hover = orange-500 | `indigo/purple` primary, mor→mavi gradyan, `gray/zinc` nötr |
 | Hover'da tek turuncu (`orange-500`); liste satırı adı mavi (§2.1 istisnası) | Liste dışında hover'da mavi; aynı ekranda `orange-600` yazı + `orange-300` kenarlık |
-| Kart: `rounded-2xl border-slate-200 bg-white shadow-sm` | Her şeyde `rounded-3xl`, camsı `backdrop-blur` kartlar, parlama gölgesi |
+| Kart: `rounded-2xl border-slate-200 bg-card shadow-sm` | Her şeyde `rounded-3xl`, camsı `backdrop-blur` kartlar, parlama gölgesi |
 | Sayı kartın en iri öğesi, ikon sağda küçük | İkon üstte büyük, sayı küçük; BÜYÜK HARFLİ `text-xs` etiket |
 | Sayfada ≤4 özet sayı, fazlası ayrıntı satırı → alt sayfa | 6+ kartı sayfaya dizmek ya da hepsini yatay şeride sıkıştırmak |
 | Harita gibi nefes alanını olduğu gibi bırakmak | Nefes alanını küçültüp bilgi şeridine gömmek |
@@ -613,7 +651,7 @@ Hareket kuralları (Apple, `motion/react`):
 | Başlık `font-heading`, vurgu `font-bricolage` | Inter/Roboto/serif, tek kelimelik BÜYÜK HARF etiket, 10–11 px yazı |
 | Risk rengi + metin etiketi; tür ayrımı ikonla | Renk tek başına, "yerleşirsin" gibi vaat cümlesi |
 | Üç kart yalnızca üç gerçek öğe varsa | Hero + üç kart iskeleti refleksi |
-| Beyaz zemin, tek koyu vurgu yüzeyi | İstenmemiş karanlık mod, `dark:` sınıfı |
+| Yüzey `bg-card`, tek koyu vurgu yüzeyi; karanlık mod token'dan (§2.3) | `dark:` sınıfı, yüzeyde `bg-white`, koyu hapta `text-white` |
 | Kapatma çarpısı `DialogContent` varsayılanı | Başka boyut/renkte çarpı |
 | Form alanı hap: `Input`/`SelectTrigger` varsayılanı (`h-12 rounded-full`), yalnız yerleşim sınıfı eklenir | Kullanım yerinde `h-9 rounded-lg bg-background`; kenarlıklı ham `<input>`; `md:text-sm` |