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>
2026-10-05 10:20:02 +03:00
parent 9e4c5608eb
commit 78ad84922a
70 changed files with 637 additions and 243 deletions
--- a/src/features/katalog/components/bolum-program-listesi.tsx
+++ b/src/features/katalog/components/bolum-program-listesi.tsx
@@ -167,7 +167,7 @@ export function BolumProgramListesi({
    <>
      <div
        ref={listeRef}
-        className="scroll-mt-24 overflow-hidden rounded-2xl border border-slate-200 bg-white"
+        className="scroll-mt-24 overflow-hidden rounded-2xl border border-slate-200 bg-card"
      >
        {/* Şişko ve sade (DESIGN.md §4.15): üniversite adı kesilmez, sarar;
            satır butonları 44 px. 375 px'te yalnız ad + butonlar sütun
--- a/src/features/katalog/components/il-icerik.tsx
+++ b/src/features/katalog/components/il-icerik.tsx
@@ -149,11 +149,11 @@ export function IlIcerik({ slug }: { slug: string }) {

            {/* Kimlik hapları (DESIGN.md §4.12): il + üniversite sayısı */}
            <p className="mt-5 flex flex-wrap items-center justify-center gap-2 lg:justify-start">
-              <span className="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">
+              <span className="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">
                <MapPin className="size-4 text-primary" aria-hidden />
                {il.ad}
              </span>
-              <span className="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">
+              <span className="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">
                {devlet.length >= vakif.length ? (
                  <Landmark className="size-4 text-primary" aria-hidden />
                ) : (
--- a/src/features/katalog/components/katalog-arama.tsx
+++ b/src/features/katalog/components/katalog-arama.tsx
@@ -85,19 +85,19 @@ function macMiOku(): boolean {

 const KESFET_TONLARI = {
  slate: {
-    pencere: "border-slate-200/80 bg-white",
+    pencere: "border-slate-200/80 bg-card",
    nokta: "bg-slate-300",
    rozet: "border-slate-200 bg-slate-50 text-slate-600",
    cizgi: "bg-slate-200/90",
  },
  sky: {
-    pencere: "border-sky-200/70 bg-white",
+    pencere: "border-sky-200/70 bg-card",
    nokta: "bg-sky-300",
    rozet: "border-sky-200 bg-sky-50 text-sky-600",
    cizgi: "bg-sky-100",
  },
  amber: {
-    pencere: "border-amber-200/70 bg-white",
+    pencere: "border-amber-200/70 bg-card",
    nokta: "bg-amber-300",
    rozet: "border-amber-200 bg-amber-50 text-amber-600",
    cizgi: "bg-amber-100",
@@ -267,7 +267,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
  return (
    <>
      {/* lg altında logo + sağ küme ile çakışır (absolute); o aralıkta gizli */}
-      <nav className="absolute left-1/2 hidden -translate-x-1/2 items-center gap-1 rounded-full border border-slate-200 bg-white p-1.5 text-base font-medium text-slate-600 lg:flex">
+      <nav className="absolute left-1/2 hidden -translate-x-1/2 items-center gap-1 rounded-full border border-slate-200 bg-card p-1.5 text-base font-medium text-slate-600 lg:flex">
        {profil ? (
          <button
            type="button"
@@ -289,7 +289,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
            </span>
            <span
              aria-hidden
-              className="flex max-w-0 items-center gap-1 overflow-hidden rounded-full bg-slate-100 px-0 py-1.5 text-xs font-medium text-slate-500 opacity-0 transition-[max-width,padding,opacity,background-color,color] duration-200 group-hover/profil:max-w-28 group-hover/profil:bg-white group-hover/profil:px-2.5 group-hover/profil:text-slate-900 group-hover/profil:opacity-100 group-focus-visible/profil:max-w-28 group-focus-visible/profil:bg-white group-focus-visible/profil:px-2.5 group-focus-visible/profil:text-slate-900 group-focus-visible/profil:opacity-100"
+              className="flex max-w-0 items-center gap-1 overflow-hidden rounded-full bg-slate-100 px-0 py-1.5 text-xs font-medium text-slate-500 opacity-0 transition-[max-width,padding,opacity,background-color,color] duration-200 group-hover/profil:max-w-28 group-hover/profil:bg-card group-hover/profil:px-2.5 group-hover/profil:text-slate-900 group-hover/profil:opacity-100 group-focus-visible/profil:max-w-28 group-focus-visible/profil:bg-card group-focus-visible/profil:px-2.5 group-focus-visible/profil:text-slate-900 group-focus-visible/profil:opacity-100"
            >
              <SquarePen className="size-3 shrink-0" aria-hidden />
              Değiştir
@@ -318,15 +318,15 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
        <button
          type="button"
          onClick={() => modalDegisti(true)}
-          className="flex cursor-pointer items-center gap-2 rounded-full bg-slate-900 px-5 py-2 text-white transition-[background-color,transform] duration-150 hover:bg-slate-700 active:scale-[0.97]"
+          className="flex cursor-pointer items-center gap-2 rounded-full bg-slate-900 px-5 py-2 text-slate-50 transition-[background-color,transform] duration-150 hover:bg-slate-700 active:scale-[0.97]"
        >
          <Search className="size-4" aria-hidden />
          Ara
          <KbdGroup aria-hidden className="ml-1">
-            <Kbd className="bg-white/15 text-white/85">
+            <Kbd className="bg-slate-50/15 text-slate-50/85">
              {macMi ? "⌘" : "Ctrl"}
            </Kbd>
-            <Kbd className="bg-white/15 text-white/85">K</Kbd>
+            <Kbd className="bg-slate-50/15 text-slate-50/85">K</Kbd>
          </KbdGroup>
        </button>
      </nav>
@@ -340,7 +340,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
            onPointerEnter={preloadTercihProfiliKapisi}
            onFocus={preloadTercihProfiliKapisi}
            aria-label={`Sıralamanı ve tercihlerini değiştir (${profil.sira.toLocaleString("tr-TR")} · ${PUAN_TURU_ETIKET[profil.tur] ?? profil.tur})`}
-            className="flex h-9 min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-full border border-slate-200 bg-white py-1 pl-2.5 pr-1.5 text-xs font-semibold text-slate-900 transition-[background-color,transform] duration-150 hover:bg-slate-100 active:scale-[0.96] sm:h-12 sm:gap-2 sm:pl-3.5 sm:pr-2 sm:text-sm"
+            className="flex h-9 min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-full border border-slate-200 bg-card py-1 pl-2.5 pr-1.5 text-xs font-semibold text-slate-900 transition-[background-color,transform] duration-150 hover:bg-slate-100 active:scale-[0.96] sm:h-12 sm:gap-2 sm:pl-3.5 sm:pr-2 sm:text-sm"
          >
            <Trophy
              className="size-3.5 shrink-0 text-orange-500 sm:size-4"
@@ -367,7 +367,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
            onPointerEnter={preloadTercihProfiliKapisi}
            onFocus={preloadTercihProfiliKapisi}
            aria-label="Başarı sıralamanı gir"
-            className="flex h-9 min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-full border border-slate-200 bg-white py-1 pl-2.5 pr-2.5 text-xs font-semibold text-slate-900 transition-[background-color,transform] duration-150 hover:bg-slate-100 active:scale-[0.96] sm:h-12 sm:gap-2 sm:pl-3.5 sm:pr-3 sm:text-sm"
+            className="flex h-9 min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-full border border-slate-200 bg-card py-1 pl-2.5 pr-2.5 text-xs font-semibold text-slate-900 transition-[background-color,transform] duration-150 hover:bg-slate-100 active:scale-[0.96] sm:h-12 sm:gap-2 sm:pl-3.5 sm:pr-3 sm:text-sm"
          >
            <Trophy
              className="size-3.5 shrink-0 text-orange-500 sm:size-4"
@@ -380,7 +380,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
          type="button"
          onClick={() => modalDegisti(true)}
          aria-label="Bölüm, üniversite veya rehber ara"
-          className="flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 transition-[background-color,transform] duration-150 hover:bg-slate-100 active:scale-[0.96] sm:size-12"
+          className="flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-card text-slate-700 transition-[background-color,transform] duration-150 hover:bg-slate-100 active:scale-[0.96] sm:size-12"
        >
          <Search className="size-4" aria-hidden />
        </button>
@@ -393,7 +393,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
            event.preventDefault();
            inputRef.current?.focus();
          }}
-          className="max-h-[min(720px,calc(100dvh-2rem))] grid-rows-[auto_minmax(0,1fr)_auto] gap-0 overflow-hidden rounded-2xl bg-white p-0 duration-200 sm:max-w-2xl motion-reduce:data-open:zoom-in-100 motion-reduce:data-closed:zoom-out-100"
+          className="max-h-[min(720px,calc(100dvh-2rem))] grid-cols-[minmax(0,1fr)] grid-rows-[auto_minmax(0,1fr)_auto] gap-0 overflow-hidden rounded-2xl bg-card p-0 duration-200 sm:max-w-2xl motion-reduce:data-open:zoom-in-100 motion-reduce:data-closed:zoom-out-100"
        >
          <DialogTitle className="sr-only">
            Bölüm, üniversite ve rehber ara
@@ -416,7 +416,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
              placeholder="Bölüm, üniversite veya rehber ara..."
              aria-label="Bölüm, üniversite veya rehber ara"
              autoComplete="off"
-              className="h-16 min-w-0 flex-1 bg-transparent text-base text-slate-950 outline-none placeholder:text-slate-400 sm:h-18 sm:text-lg"
+              className="h-16 min-w-0 flex-1 bg-transparent text-base text-slate-900 outline-none placeholder:text-slate-400 sm:h-18 sm:text-lg"
            />
            <button
              type="button"
@@ -531,7 +531,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
            >
              <ProgressiveBlur
                position="top"
-                backgroundColor="#ffffff"
+                backgroundColor="var(--card)"
                height="56px"
                blurAmount="4px"
              />
@@ -542,7 +542,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
            >
              <ProgressiveBlur
                position="bottom"
-                backgroundColor="#ffffff"
+                backgroundColor="var(--card)"
                height="56px"
                blurAmount="4px"
              />
@@ -550,7 +550,11 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
          </div>

          <div className="flex items-center justify-between border-t border-slate-200 bg-slate-50/80 px-4 py-3 text-xs text-slate-500 sm:px-5">
-            <span>En az 2 harf yazarak ara</span>
+            <span>
+              {aramaAktif
+                ? "Bölüm, üniversite ve rehberde aranıyor"
+                : "En az 2 harf yazarak ara"}
+            </span>
            <span className="hidden items-center gap-1.5 sm:flex">
              <Kbd>Esc</Kbd> ile kapat
            </span>
@@ -597,7 +601,7 @@ function BaslangicIcerigi({ onSec }: { onSec: () => void }) {
        />
      </div>
      <div className="mt-5 flex gap-3 rounded-2xl bg-slate-50 px-3.5 py-3.5 sm:px-4">
-        <span className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full bg-white text-slate-400 shadow-[0_0_0_1px_rgba(15,23,42,0.06)]">
+        <span className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full bg-card text-slate-400 shadow-[0_0_0_1px_rgba(15,23,42,0.06)]">
          <Search className="size-3.5" aria-hidden />
        </span>
        <div className="min-w-0">
@@ -638,7 +642,7 @@ function KesfetLinki({
    <Link
      href={href}
      onClick={onSec}
-      className="group/kesfet flex cursor-pointer flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white transition-transform duration-150 ease-out active:scale-[0.97]"
+      className="group/kesfet flex cursor-pointer flex-col overflow-hidden rounded-2xl border border-slate-200 bg-card transition-transform duration-150 ease-out active:scale-[0.97]"
    >
      {/* Mini tarayıcı — sekme içinde tek büyük ikon, alta doğru maske ile solar */}
      <div
@@ -652,7 +656,7 @@ function KesfetLinki({
            <span className={`size-1.5 rounded-full ${palet.nokta}`} />
            <span className={`size-1.5 rounded-full ${palet.nokta} opacity-65`} />
            <span className={`size-1.5 rounded-full ${palet.nokta} opacity-35`} />
-            <span className="ml-1.5 h-1.5 max-w-[55%] flex-1 rounded-full bg-white shadow-[0_0_0_1px_rgba(15,23,42,0.06)]" />
+            <span className="ml-1.5 h-1.5 max-w-[55%] flex-1 rounded-full bg-card shadow-[0_0_0_1px_rgba(15,23,42,0.06)]" />
          </div>
          <div className="relative min-h-0 flex-1 overflow-hidden">
            <div className="absolute inset-x-0 top-0 flex flex-col items-center gap-1.5 pt-2 sm:gap-2 sm:pt-2.5">
@@ -666,14 +670,14 @@ function KesfetLinki({
            </div>
            <ProgressiveBlur
              position="bottom"
-              backgroundColor="#ffffff"
+              backgroundColor="var(--card)"
              height="45%"
              blurAmount="2px"
            />
          </div>
        </div>

-        <div className="pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-white to-transparent" />
+        <div className="pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-card to-transparent" />
      </div>

      <span className="min-w-0 px-2.5 pb-3 pt-2 text-center sm:px-3.5 sm:pb-3.5 sm:pt-2.5 sm:text-left">
@@ -761,7 +765,7 @@ function RehberSonucKarti({
    <Link
      href={`/rehber/${yazi.slug}`}
      onClick={onSec}
-      className="group overflow-hidden rounded-xl border border-slate-200 bg-white p-1.5 transition-[border-color,background-color,transform] duration-150 hover:border-slate-300 hover:bg-slate-50 active:scale-[0.99]"
+      className="group overflow-hidden rounded-xl border border-slate-200 bg-card p-1.5 transition-[border-color,background-color,transform] duration-150 hover:border-slate-300 hover:bg-slate-50 active:scale-[0.99]"
    >
      <RehberKapak baslik={yazi.baslik} compact className="rounded-lg" />
      <span className="block px-2 pb-1.5 pt-2.5">
--- a/src/features/katalog/components/program-netleri.tsx
+++ b/src/features/katalog/components/program-netleri.tsx
@@ -99,7 +99,7 @@ export function ProgramNetleriButonu({
          type="button"
          title="Son yerleşenin netleri"
          onClick={(e) => e.stopPropagation()}
-          className={`inline-flex ${SATIR_DUGME_BOYU} cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white text-slate-500 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.92] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${className}`}
+          className={`inline-flex ${SATIR_DUGME_BOYU} cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-card text-slate-500 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.92] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${className}`}
        >
          <ListChecks className="size-4" aria-hidden />
          <span className="sr-only">{isim} — son yerleşenin netleri</span>
@@ -107,7 +107,7 @@ export function ProgramNetleriButonu({
      </DrawerTrigger>
      {/* Çekmece kabı ve çarpı cta-sira-form.tsx'teki çekmeceyle birebir (§4.10, §4.3) */}
      <DrawerContent
-        className="max-h-[92dvh] bg-white sm:mx-auto sm:max-w-2xl sm:border-x sm:border-slate-200 sm:shadow-2xl"
+        className="max-h-[92dvh] bg-card sm:mx-auto sm:max-w-2xl sm:border-x sm:border-slate-200 sm:shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        <DrawerClose className="absolute top-3 right-3 z-10 flex size-9 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-popover text-slate-500 transition-[background-color,transform] duration-150 hover:bg-slate-100 hover:text-slate-800 active:scale-[0.96]">
--- a/src/features/katalog/components/sayfalama.tsx
+++ b/src/features/katalog/components/sayfalama.tsx
@@ -123,7 +123,7 @@ export function Sayfalama({
      {sayfa > 1
        ? gecis(
            sayfa - 1,
-            "inline-flex h-11 items-center gap-1 rounded-full border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.97]",
+            "inline-flex h-11 items-center gap-1 rounded-full border border-slate-200 bg-card px-4 text-sm font-semibold text-slate-700 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.97]",
            <>
              <ChevronLeft className="size-4" aria-hidden />
              Önceki
@@ -145,7 +145,7 @@ export function Sayfalama({
            n,
            n === sayfa
              ? "inline-flex h-11 min-w-11 items-center justify-center rounded-full bg-primary px-2 text-sm font-semibold text-primary-foreground"
-              : "hidden h-11 min-w-11 items-center justify-center rounded-full border border-slate-200 bg-white px-2 text-sm font-semibold text-slate-700 sm:inline-flex transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.97]",
+              : "hidden h-11 min-w-11 items-center justify-center rounded-full border border-slate-200 bg-card px-2 text-sm font-semibold text-slate-700 sm:inline-flex transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.97]",
            n,
            { aktif: n === sayfa },
          )
@@ -154,7 +154,7 @@ export function Sayfalama({
      {sayfa < toplamSayfa
        ? gecis(
            sayfa + 1,
-            "inline-flex h-11 items-center gap-1 rounded-full border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.97]",
+            "inline-flex h-11 items-center gap-1 rounded-full border border-slate-200 bg-card px-4 text-sm font-semibold text-slate-700 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.97]",
            <>
              Sonraki
              <ChevronRight className="size-4" aria-hidden />
--- a/src/features/katalog/components/sehir-cipleri.tsx
+++ b/src/features/katalog/components/sehir-cipleri.tsx
@@ -12,7 +12,7 @@ const sayi = (n: number) => n.toLocaleString("tr-TR");
 const CIP_TEMEL =
  "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]";
 const CIP_PASIF =
-  "border-slate-200 bg-white text-slate-700 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500";
+  "border-slate-200 bg-card text-slate-700 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500";
 const CIP_AKTIF = "border-primary bg-primary text-white";

 /**
--- a/src/features/katalog/components/sehir-yuzeyi.tsx
+++ b/src/features/katalog/components/sehir-yuzeyi.tsx
@@ -17,7 +17,7 @@ export function SehirYuzeyi({
  harita: ReactNode;
 }) {
  return (
-    <section className="relative isolate mt-6 overflow-hidden rounded-3xl border border-slate-200 bg-white">
+    <section className="relative isolate mt-6 overflow-hidden rounded-3xl border border-slate-200 bg-card">
      {/* İki katlı mask: dış kat metnin tarafına doğru eritir (telefonda
          yukarı, lg'de sola), iç kat dik yöndeki iki kenarı eritir — hiçbir
          kenarda yarım kesilmiş kare kalmaz. */}
--- a/src/features/katalog/components/tur-icerik.tsx
+++ b/src/features/katalog/components/tur-icerik.tsx
@@ -139,13 +139,13 @@ export function TurIcerik({ tur }: { tur: TurSlug }) {
            </h1>
            {/* Kimlik hapları (§4.12): tür + öteki türe geçiş */}
            <p className="mt-5 flex flex-wrap items-center justify-center gap-2 lg:justify-start">
-              <span className="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">
+              <span className="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">
                <Ikon className="size-4 text-primary" aria-hidden />
                {tur === "devlet" ? "Devlet" : "Vakıf"}
              </span>
              <Link
                href={`/universiteler/${digerTur.slug}`}
-                className="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 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.97]"
+                className="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 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.97]"
              >
                <DigerIkon className="size-4 text-primary" aria-hidden />
                {digerTur.ad}
@@ -213,7 +213,7 @@ export function TurIcerik({ tur }: { tur: TurSlug }) {
            <li key={s.il}>
              <a
                href={`#sehir-${turkishSlugify(s.il)}`}
-                className="inline-flex h-10 cursor-pointer items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3.5 text-sm font-semibold text-slate-700 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.97]"
+                className="inline-flex h-10 cursor-pointer items-center gap-1.5 rounded-full border border-slate-200 bg-card px-3.5 text-sm font-semibold text-slate-700 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.97]"
              >
                {s.ad}
                <span className="font-normal tabular-nums text-slate-400">
--- a/src/features/katalog/components/turkiye-siralamasi.tsx
+++ b/src/features/katalog/components/turkiye-siralamasi.tsx
@@ -62,7 +62,7 @@ export function TurkiyeSiralamasi() {

      <PagePixelDivider seed={71} className="mt-8" />

-      <ol className="mt-8 divide-y divide-slate-100 overflow-hidden rounded-xl border border-slate-200 bg-white">
+      <ol className="mt-8 divide-y divide-slate-100 overflow-hidden rounded-xl border border-slate-200 bg-card">
        {satirlar.map((u) => {
          const ad = u.ozet?.ad ?? trBaslikDuzeni(u.slug.replace(/-/g, " "));
          const tur = u.ozet?.unitur ? UNITUR_ETIKET[u.ozet.unitur]?.cip : null;
--- a/src/features/katalog/components/uni-satirlari.tsx
+++ b/src/features/katalog/components/uni-satirlari.tsx
@@ -28,7 +28,7 @@ export function UniSatirlari({
  gizliIl?: string | null;
 }) {
  return (
-    <ol className="mt-4 divide-y divide-slate-100 overflow-hidden rounded-xl border border-slate-200 bg-white text-left">
+    <ol className="mt-4 divide-y divide-slate-100 overflow-hidden rounded-xl border border-slate-200 bg-card text-left">
      {uniler.map((u) => {
        const il = u.il && u.il !== gizliIl ? u.il : null;
        return (
--- a/src/features/katalog/components/universite-program-tablosu.tsx
+++ b/src/features/katalog/components/universite-program-tablosu.tsx
@@ -59,7 +59,7 @@ export function UniversiteProgramTablosu({
          <h2 className="mb-4 text-center font-heading text-xl font-bold text-slate-900 sm:text-2xl lg:text-left">
            {fakulte}
          </h2>
-          <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white">
+          <div className="overflow-hidden rounded-2xl border border-slate-200 bg-card">
            <Table>
              <TableHeader>
                <TableRow className="hover:bg-transparent">
--- a/src/features/katalog/components/urap-logo.tsx
+++ b/src/features/katalog/components/urap-logo.tsx
@@ -21,7 +21,7 @@ export function UrapLogo({ className = "h-8" }: { className?: string }) {
        width={819}
        height={261}
        unoptimized
-        className={`w-auto ${className}`}
+        className={`kt-koyu-cevir w-auto ${className}`}
      />
    </a>
  );