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>
  );
--- a/src/features/kullanici/components/dogrula-karti.tsx
+++ b/src/features/kullanici/components/dogrula-karti.tsx
@@ -41,7 +41,7 @@ export function DogrulaKarti({

  return (
    <div className="relative">
-      <div className="relative rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
+      <div className="relative rounded-2xl border border-slate-200 bg-card p-8 shadow-sm">
        <h1 className="font-heading text-xl font-bold">Girişini onayla</h1>
        <p className="mt-2 text-sm text-slate-600">
          Bu bağlantı senin için üretildi ve{" "}
@@ -93,7 +93,7 @@ export function DogrulaKarti({

 export function DogrulaKartiSkeleton() {
  return (
-    <div className="rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
+    <div className="rounded-2xl border border-slate-200 bg-card p-8 shadow-sm">
      <Skeleton className="h-7 w-40" />
      <Skeleton className="mt-3 h-4 w-full" />
      <Skeleton className="mt-1.5 h-4 w-2/3" />
--- a/src/features/kullanici/components/giris-form.tsx
+++ b/src/features/kullanici/components/giris-form.tsx
@@ -1,7 +1,7 @@
 "use client";

 import { useEffect, useRef, useState } from "react";
-import { Mail, MailCheck } from "lucide-react";
+import { ArrowRight, MailCheck } from "lucide-react";
 import { toast } from "sonner";
 import { authClient } from "@/lib/auth-client";
 import { olay } from "@/lib/analitik";
@@ -181,8 +181,8 @@ export function GirisForm({ callbackURL }: { callbackURL: string }) {
          className="h-11 w-full cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600"
          disabled={busy !== null}
        >
-          <Mail className="size-4" aria-hidden />
          {busy === "email" ? "Gönderiliyor…" : "Giriş bağlantısı gönder"}
+          <ArrowRight className="size-4" aria-hidden />
        </Button>
      </form>
    </div>
--- a/src/features/kullanici/components/giris-karti.tsx
+++ b/src/features/kullanici/components/giris-karti.tsx
@@ -33,7 +33,7 @@ export async function GirisKarti({
  return (
    <>
      <div className="relative">
-        <div className="relative rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
+        <div className="relative rounded-2xl border border-slate-200 bg-card p-8 shadow-sm">
          {baglantiHatasi && (
            <div
              role="alert"
@@ -98,7 +98,7 @@ export async function GirisKarti({
 export function GirisKartiSkeleton() {
  return (
    <>
-      <div className="rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
+      <div className="rounded-2xl border border-slate-200 bg-card p-8 shadow-sm">
        {/* Başlık + alt metin */}
        <Skeleton className="h-8 w-40" />
        <Skeleton className="mt-3 h-4 w-full" />
--- a/src/features/kullanici/components/giris-linki.tsx
+++ b/src/features/kullanici/components/giris-linki.tsx
@@ -44,7 +44,7 @@ export function GirisLinki() {
  return (
    <Button
      asChild
-      className="h-9 cursor-pointer rounded-full bg-slate-900 px-3.5 text-sm font-medium text-white transition-colors duration-200 hover:bg-slate-700 sm:h-12 sm:px-7 sm:text-base"
+      className="h-9 cursor-pointer rounded-full bg-slate-900 px-3.5 text-sm font-medium text-slate-50 transition-colors duration-200 hover:bg-slate-700 sm:h-12 sm:px-7 sm:text-base"
    >
      <Link href={href}>Giriş yap</Link>
    </Button>
--- a/src/features/kullanici/components/sign-out-button.tsx
+++ b/src/features/kullanici/components/sign-out-button.tsx
@@ -11,7 +11,7 @@ export function SignOutButton() {
    <Button
      size="sm"
      variant="ghost"
-      className="size-9 cursor-pointer rounded-full border border-slate-200 bg-white text-slate-600 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 sm:size-12"
+      className="size-9 cursor-pointer rounded-full border border-slate-200 bg-card text-slate-600 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 sm:size-12"
      aria-label="Çıkış yap"
      onClick={async () => {
        await authClient.signOut();
--- a/src/features/kullanici/components/user-nav.tsx
+++ b/src/features/kullanici/components/user-nav.tsx
@@ -51,7 +51,7 @@ export async function UserNav() {
        href="/listem"
        aria-label="Yapay Zeka Listem"
        title="Yapay Zeka'nın kurduğu 24 tercihlik listen"
-        className="inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-full border border-slate-200 bg-white px-3 text-xs font-semibold text-slate-700 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50 sm:h-12 sm:gap-2 sm:px-5 sm:text-sm"
+        className="inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-full border border-slate-200 bg-card px-3 text-xs font-semibold text-slate-700 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50 sm:h-12 sm:gap-2 sm:px-5 sm:text-sm"
      >
        <ClipboardList className="size-3.5 text-primary sm:size-4" aria-hidden />
        {/* Etiket her genişlikte gizli; anlamı yukarıdaki aria-label + title
@@ -65,7 +65,7 @@ export async function UserNav() {
      </Link>
      <Link
        href="/paket?kaynak=nav"
-        className="inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-full border border-slate-200 bg-white px-3 text-xs font-semibold text-slate-700 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50 sm:h-12 sm:gap-2 sm:px-5 sm:text-sm"
+        className="inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-full border border-slate-200 bg-card px-3 text-xs font-semibold text-slate-700 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50 sm:h-12 sm:gap-2 sm:px-5 sm:text-sm"
        title="Kredilerin — yüklemek için tıkla"
      >
        <Coins className="size-3.5 text-amber-500 sm:size-4" aria-hidden />
--- a/src/features/liste/components/kaydet-banner.tsx
+++ b/src/features/liste/components/kaydet-banner.tsx
@@ -60,7 +60,7 @@ export function KaydetBanner() {
          ref={gorunumRef}
          // Telefonda metin kendi satırında, düğme altında tam genişlik:
          // yan yana dizince başlık kelime kelime kırılıyordu (375 px).
-          className="pointer-events-auto relative mx-auto flex max-w-xl flex-wrap items-center gap-3 rounded-2xl border border-slate-200 bg-white p-4 pr-14 shadow-xl sm:flex-nowrap sm:gap-4"
+          className="pointer-events-auto relative mx-auto flex max-w-xl flex-wrap items-center gap-3 rounded-2xl border border-slate-200 bg-card p-4 pr-14 shadow-xl sm:flex-nowrap sm:gap-4"
        >
          {/* Kullanıcının o anki işletim sisteminin logosu: "bu tarayıcıda"
              mesajını somutlaştırır */}
--- a/src/features/liste/components/liste-cekmecesi.tsx
+++ b/src/features/liste/components/liste-cekmecesi.tsx
@@ -156,7 +156,7 @@ export function ListeCekmecesi() {
      onAnimationEnd={(open) => setOturdu(open)}
    >
      <DrawerContent
-        className="min-h-0 max-h-[92dvh] bg-white sm:mx-auto sm:max-w-2xl sm:border-x sm:border-slate-200 sm:shadow-2xl"
+        className="min-h-0 max-h-[92dvh] bg-card sm:mx-auto sm:max-w-2xl sm:border-x sm:border-slate-200 sm:shadow-2xl"
      >
        {/* Alt sayfa başlığı (DESIGN.md §4.10): ortalı başlık + bağlam;
            çarpı §4.3 kanonik sınıf setinde, temizle düğmesi aynı ölçüde
@@ -437,7 +437,7 @@ function CekmeceSatiri({
        dragElastic={{ left: 0, right: 0.7 }}
        dragSnapToOrigin
        onDragEnd={kaydirinca}
-        className="relative flex items-center gap-3 bg-white py-3"
+        className="relative flex items-center gap-3 bg-card py-3"
      >
        <button
          type="button"
--- a/src/features/liste/components/liste-durumu-satiri.tsx
+++ b/src/features/liste/components/liste-durumu-satiri.tsx
@@ -24,7 +24,7 @@ export function ListeDurumuSatiri() {
  if (liste.length === 0) {
    return (
      <p className="mx-auto mt-5 max-w-sm text-sm leading-relaxed text-slate-500 lg:mx-0 lg:max-w-none">
-        <span className="mr-1.5 inline-flex size-6 items-center justify-center rounded-full border border-slate-200 bg-white align-middle text-slate-500">
+        <span className="mr-1.5 inline-flex size-6 items-center justify-center rounded-full border border-slate-200 bg-card align-middle text-slate-500">
          <Plus className="size-3.5" aria-hidden />
          <span className="sr-only">Artı düğmesi</span>
        </span>
@@ -39,7 +39,7 @@ export function ListeDurumuSatiri() {
      <button
        type="button"
        onClick={cekmeceAc}
-        className="group inline-flex h-11 cursor-pointer 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="group inline-flex h-11 cursor-pointer 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]"
      >
        Listende {liste.length}/{MANUEL_LISTE_MAX} program
        <span className="font-medium text-slate-500 group-hover:text-orange-500">
--- a/src/features/liste/components/listem-butonu.tsx
+++ b/src/features/liste/components/listem-butonu.tsx
@@ -32,7 +32,7 @@ export function ListemButonu() {
      aria-expanded={acik}
      aria-label={`Kendi listem — ${liste.length}/${MANUEL_LISTE_MAX} program`}
      title="Tablodan seçtiğin programlar"
-      className="relative inline-flex h-9 cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-full border border-slate-200 bg-white px-3 text-xs font-semibold text-slate-700 transition-[color,background-color,border-color,transform] duration-200 hover:border-slate-300 hover:bg-slate-50 active:scale-[0.97] sm:h-12 sm:gap-2 sm:px-5 sm:text-sm"
+      className="relative inline-flex h-9 cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-full border border-slate-200 bg-card px-3 text-xs font-semibold text-slate-700 transition-[color,background-color,border-color,transform] duration-200 hover:border-slate-300 hover:bg-slate-50 active:scale-[0.97] sm:h-12 sm:gap-2 sm:px-5 sm:text-sm"
    >
      <ListChecks className="size-3.5 text-primary sm:size-4" aria-hidden />
      {/* Etiket her genişlikte gizli: konteyner 1152 px'te sabit olduğu için
--- a/src/features/liste/components/program-ekle-butonu.tsx
+++ b/src/features/liste/components/program-ekle-butonu.tsx
@@ -134,7 +134,7 @@ export function ProgramEkleButonu({
      className={`inline-flex ${SATIR_DUGME_BOYU} cursor-pointer items-center justify-center rounded-full border transition-[background-color,border-color,color,transform] duration-150 active:scale-[0.92] disabled:cursor-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
        listede
          ? "border-emerald-200 bg-emerald-50 text-emerald-600"
-          : "border-slate-200 bg-white text-slate-500 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 disabled:opacity-40"
+          : "border-slate-200 bg-card text-slate-500 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 disabled:opacity-40"
      } ${className}`}
    >
      {listede ? (
--- a/src/features/liste/components/program-tablosu.tsx
+++ b/src/features/liste/components/program-tablosu.tsx
@@ -65,28 +65,24 @@ const DILIMLER: {
  icon: typeof Rocket;
  renk: string;
  // Aktif hap koyu (slate-900) — ikon tonu okunurluk için bir kademe açılır
-  renkAktif: string;
 }[] = [
  {
    key: "hayal",
    etiket: DILIM_ETIKET.hayal,
    icon: Rocket,
    renk: "text-red-500",
-    renkAktif: "text-red-400",
  },
  {
    key: "dengeli",
    etiket: DILIM_ETIKET.dengeli,
    icon: Scale,
    renk: "text-amber-500",
-    renkAktif: "text-amber-400",
  },
  {
    key: "garanti",
    etiket: DILIM_ETIKET.garanti,
    icon: ShieldCheck,
    renk: "text-emerald-600",
-    renkAktif: "text-emerald-400",
  },
 ];

@@ -208,7 +204,7 @@ export function ProgramTablosu({
              <TabsTrigger
                key={d.key}
                value={d.key}
-                className="relative min-h-11 cursor-pointer px-2 py-1.5 text-sm font-semibold transition-colors duration-200 hover:text-orange-500 data-active:hover:text-white group-data-[variant=pill]/tabs-list:h-auto sm:px-4"
+                className="relative min-h-11 cursor-pointer px-2 py-1.5 text-sm font-semibold transition-colors duration-200 hover:text-orange-500 data-active:hover:text-slate-50 group-data-[variant=pill]/tabs-list:h-auto sm:px-4"
              >
                {aktif ? (
                  <motion.span
@@ -225,13 +221,13 @@ export function ProgramTablosu({
                <span className="relative z-10 inline-flex flex-col items-center gap-0.5 sm:flex-row sm:gap-1.5">
                  <span className="inline-flex items-center gap-1.5">
                    <d.icon
-                      className={`size-4 ${aktif ? d.renkAktif : d.renk}`}
+                      className={`size-4 ${aktif ? "text-slate-50" : d.renk}`}
                      aria-hidden
                    />
                    {d.etiket}
                  </span>
                  <span
-                    className={`text-sm font-medium tabular-nums ${aktif ? "text-white/70" : "text-slate-400"}`}
+                    className={`text-sm font-medium tabular-nums ${aktif ? "text-slate-50/70" : "text-slate-400"}`}
                  >
                    {sonuclar.toplam[d.key].toLocaleString("tr-TR")}
                  </span>
@@ -246,7 +242,7 @@ export function ProgramTablosu({
          const toplam = sonuclar.toplam[d.key];
          return (
            <TabsContent key={d.key} value={d.key}>
-              <div className="mt-4 overflow-hidden rounded-2xl border border-slate-200 bg-white">
+              <div className="mt-4 overflow-hidden rounded-2xl border border-slate-200 bg-card">
                {satirlar.length === 0 ? (
                  <p className="px-5 py-8 text-center text-sm text-slate-500">
                    Bu dilimde filtrene uyan program bulunamadı.
--- a/src/features/liste/components/secimlerim-paneli.tsx
+++ b/src/features/liste/components/secimlerim-paneli.tsx
@@ -62,7 +62,7 @@ export function SecimlerimPaneli() {

  if (liste.length === 0) {
    return (
-      <section className="rounded-2xl border border-slate-200 bg-white p-8 text-center">
+      <section className="rounded-2xl border border-slate-200 bg-card p-8 text-center">
        <ListChecks className="mx-auto size-10 text-slate-300" aria-hidden />
        <h2 className="mt-4 font-heading text-xl font-bold">
          Henüz program seçmedin
@@ -99,7 +99,7 @@ export function SecimlerimPaneli() {

  return (
    <section className="flex flex-col gap-6">
-      <div className="rounded-2xl border border-slate-200 bg-white p-5">
+      <div className="rounded-2xl border border-slate-200 bg-card p-5">
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div>
            <h2 className="flex items-center gap-2 font-heading text-xl font-bold">
@@ -228,7 +228,7 @@ const SecimSatiri = memo(function SecimSatiri({

  return (
    <li
-      className={`rounded-2xl border border-l-4 border-slate-200 bg-white p-4 ${
+      className={`rounded-2xl border border-l-4 border-slate-200 bg-card p-4 ${
        stil?.kenar ?? "border-l-slate-300"
      }`}
    >
--- a/src/features/liste/components/tercih-haritasi.tsx
+++ b/src/features/liste/components/tercih-haritasi.tsx
@@ -320,12 +320,12 @@ export function TercihHaritasi({
                }
                fill={
                  secili
-                    ? "oklch(0.97 0.014 254.6)" // blue-50: seçili zemin
+                    ? "var(--kt-harita-secili)" // seçili zemin
                    : iceriyor
-                      ? "oklch(0.882 0.059 254.1)" // blue-200
-                      : "oklch(0.929 0.013 255.5)" // slate-200
+                      ? "var(--kt-harita-dolu)"
+                      : "var(--color-slate-200)"
                }
-                stroke="white"
+                stroke="var(--card)"
                strokeWidth={secili ? 1.6 * sf : 1 * sf}
                onClick={() => {
                  if (secili) onSeciliIlDegisti(null);
@@ -356,7 +356,7 @@ export function TercihHaritasi({
                    cy={cy}
                    r={11}
                    fill={renk}
-                    stroke="white"
+                    stroke="var(--card)"
                    strokeWidth={2}
                  />
                  <text
@@ -405,7 +405,7 @@ export function TercihHaritasi({
                          cx={p.x}
                          cy={p.y}
                          r={r}
-                          fill="white"
+                          fill="var(--card)"
                          stroke={RISK_RENK[p.risk]}
                          strokeWidth={2.5 * sf}
                        />
@@ -423,7 +423,7 @@ export function TercihHaritasi({
                          cy={p.y - r * 0.78}
                          r={7.5 * sf}
                          fill={RISK_RENK[p.risk]}
-                          stroke="white"
+                          stroke="var(--card)"
                          strokeWidth={1.5 * sf}
                        />
                        <text
@@ -445,8 +445,8 @@ export function TercihHaritasi({
                          cx={p.x}
                          cy={p.y}
                          r={r}
-                          fill={p.kilitli ? "oklch(0.704 0.04 256.8)" : RISK_RENK[p.risk]}
-                          stroke="white"
+                          fill={p.kilitli ? "var(--color-slate-400)" : RISK_RENK[p.risk]}
+                          stroke="var(--card)"
                          strokeWidth={2 * sf}
                          strokeDasharray={p.kilitli ? `${4 * sf} ${3 * sf}` : undefined}
                        />
@@ -471,8 +471,8 @@ export function TercihHaritasi({
                        textAnchor="middle"
                        fontSize={16 * sf}
                        fontWeight={600}
-                        fill="oklch(0.279 0.041 260.0)" // slate-800
-                        stroke="white"
+                        fill="var(--color-slate-800)"
+                        stroke="var(--card)"
                        strokeWidth={4 * sf}
                        paintOrder="stroke"
                        className="pointer-events-none select-none"
@@ -491,7 +491,7 @@ export function TercihHaritasi({
            size="sm"
            variant="outline"
            onClick={() => onSeciliIlDegisti(null)}
-            className="absolute left-3 top-3 cursor-pointer rounded-full bg-white/90 backdrop-blur"
+            className="absolute left-3 top-3 cursor-pointer rounded-full bg-card/90 backdrop-blur"
          >
            <ArrowLeft className="size-4" aria-hidden />
            Türkiye
@@ -513,7 +513,7 @@ export function TercihHaritasi({
                  <button
                    type="button"
                    onClick={onTercihSec ? () => onTercihSec(sira) : undefined}
-                    className="flex min-h-11 cursor-pointer items-center gap-2 rounded-full border border-slate-200 bg-white py-1.5 pl-1.5 pr-3.5 text-sm transition-[background-color,border-color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 active:scale-[0.97]"
+                    className="flex min-h-11 cursor-pointer items-center gap-2 rounded-full border border-slate-200 bg-card py-1.5 pl-1.5 pr-3.5 text-sm transition-[background-color,border-color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 active:scale-[0.97]"
                  >
                    <span
                      className="flex size-7 shrink-0 items-center justify-center rounded-full font-heading text-xs font-bold text-white"
--- a/src/features/liste/components/yurtdisi-haritalar.tsx
+++ b/src/features/liste/components/yurtdisi-haritalar.tsx
@@ -68,8 +68,8 @@ export function YurtdisiHaritalar({
                <path
                  key={`b${i}`}
                  d={d}
-                  fill="oklch(0.929 0.013 255.5)" // slate-200
-                  stroke="white"
+                  fill="var(--color-slate-200)"
+                  stroke="var(--card)"
                  strokeWidth={2}
                />
              ))}
@@ -77,8 +77,8 @@ export function YurtdisiHaritalar({
                <path
                  key={`u${i}`}
                  d={d}
-                  fill="oklch(0.882 0.059 254.1)" // blue-200: tercih içeren zemin
-                  stroke="white"
+                  fill="var(--kt-harita-dolu)" // tercih içeren zemin
+                  stroke="var(--card)"
                  strokeWidth={2}
                >
                  <title>{harita.ad}</title>
@@ -103,7 +103,7 @@ export function YurtdisiHaritalar({
                      cy={p.y}
                      r={26}
                      fill={RISK_PIN_RENK[baskinRisk(p.riskler)]}
-                      stroke="white"
+                      stroke="var(--card)"
                      strokeWidth={5}
                    />
                    <text
--- a/src/features/odeme/components/odeme-sayfasi.tsx
+++ b/src/features/odeme/components/odeme-sayfasi.tsx
@@ -52,7 +52,7 @@ export async function OdemeSayfasi({ siparisId }: { siparisId?: string }) {
      {/* iyzico gömülü kart formu */}
      <section
        aria-label="Kart bilgileri"
-        className="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"
+        className="mt-6 rounded-2xl border border-slate-200 bg-card p-5 shadow-sm"
      >
        <IyzicoFormu icerik={order.iyzicoFormContent} />
      </section>
@@ -92,7 +92,7 @@ export async function OdemeSayfasi({ siparisId }: { siparisId?: string }) {
        alt="iyzico ile Öde — Mastercard, Visa, American Express ve Troy ile güvenli ödeme"
        width={429}
        height={32}
-        className="mx-auto mt-5 h-6 w-auto"
+        className="kt-acik-logo mx-auto mt-5 h-6 w-auto"
      />
    </div>
  );
--- a/src/features/odeme/components/odeme-sonuc-karti.tsx
+++ b/src/features/odeme/components/odeme-sonuc-karti.tsx
@@ -37,7 +37,7 @@ export async function OdemeSonucKarti({ siparis }: { siparis?: string }) {
      : false;
  if (iade) {
    return (
-      <div className="rounded-2xl border border-amber-200 bg-white p-8 shadow-sm">
+      <div className="rounded-2xl border border-amber-200 bg-card p-8 shadow-sm">
        <RotateCcw className="mx-auto size-12 text-amber-500" aria-hidden />
        <h1 className="mt-4 font-heading text-2xl font-bold">
          Bu ödeme iade edilecek
@@ -77,7 +77,7 @@ export async function OdemeSonucKarti({ siparis }: { siparis?: string }) {
  const listeHref = rapor ? "/listem?acildi=1" : null;

  return basarili ? (
-    <div className="rounded-2xl border border-emerald-200 bg-white p-8 shadow-sm">
+    <div className="rounded-2xl border border-emerald-200 bg-card p-8 shadow-sm">
      <CheckCircle2
        className="mx-auto size-12 text-emerald-500"
        aria-hidden
@@ -117,7 +117,7 @@ export async function OdemeSonucKarti({ siparis }: { siparis?: string }) {
      </div>
    </div>
  ) : (
-    <div className="rounded-2xl border border-red-200 bg-white p-8 shadow-sm">
+    <div className="rounded-2xl border border-red-200 bg-card p-8 shadow-sm">
      <XCircle className="mx-auto size-12 text-red-500" aria-hidden />
      <h1 className="mt-4 font-heading text-2xl font-bold">
        Ödeme tamamlanamadı
@@ -149,7 +149,7 @@ export function OdemeSonucKartiSkeleton() {
  return (
    <div
      aria-live="polite"
-      className="rounded-2xl border border-slate-200 bg-white p-8 shadow-sm"
+      className="rounded-2xl border border-slate-200 bg-card p-8 shadow-sm"
    >
      <Skeleton className="mx-auto size-12 rounded-full" />
      <Skeleton className="mx-auto mt-5 h-7 w-2/3" />
--- a/src/features/odeme/components/paket-satinal.tsx
+++ b/src/features/odeme/components/paket-satinal.tsx
@@ -55,10 +55,10 @@ export function PaketSatinAl() {
  return (
    <Parallax
      strength={6}
-      className="mt-10 grid gap-6 sm:grid-cols-[1fr_auto]"
+      className="mt-10 grid grid-cols-[minmax(0,1fr)] gap-6 sm:grid-cols-[minmax(0,1fr)_auto]"
    >
      {/* Ana paket */}
-      <section className="rounded-2xl border-2 border-orange-500 bg-white p-8 shadow-sm">
+      <section className="rounded-2xl border-2 border-orange-500 bg-card p-8 shadow-sm">
        <div className="flex items-baseline justify-between">
          <h2 className="font-heading text-xl font-bold">
            Tercih Dönemi Paketi
@@ -88,7 +88,7 @@ export function PaketSatinAl() {
          alt="iyzico ile Öde — Mastercard, Visa, American Express ve Troy ile güvenli ödeme"
          width={429}
          height={32}
-          className="mx-auto mt-5 h-5 w-auto"
+          className="kt-acik-logo mx-auto mt-5 h-5 w-auto"
        />
        <p className="mt-3 text-center text-xs text-slate-500">
          iyzico güvenli ödeme · Kart bilgilerin bize hiç ulaşmaz ·{" "}
@@ -102,7 +102,7 @@ export function PaketSatinAl() {
      </section>

      {/* Top-up */}
-      <section className="flex h-fit flex-col rounded-2xl border border-slate-200 bg-white p-6 shadow-sm sm:w-56">
+      <section className="flex h-fit flex-col rounded-2xl border border-slate-200 bg-card p-6 shadow-sm sm:w-56">
        <div className="flex items-center gap-2">
          <Coins className="size-4 text-amber-500" aria-hidden />
          <h2 className="font-heading font-bold">Kredi bitti mi?</h2>
@@ -130,7 +130,7 @@ async function PaketCta() {
      <div className="space-y-2">
        <Button
          asChild
-          className="h-12 w-full cursor-pointer bg-orange-500 px-8 text-white transition-colors duration-200 hover:bg-orange-600"
+          className="h-auto min-h-12 w-full cursor-pointer bg-orange-500 px-6 py-2 text-center whitespace-normal text-white transition-colors duration-200 hover:bg-orange-600 sm:px-8"
        >
          <Link href={`/giris?callback=${encodeURIComponent("/paket")}`}>
            Giriş yap — ilk {ACIK_SATIR} tercihini ücretsiz gör
--- a/src/features/rapor/components/liste-uretici.tsx
+++ b/src/features/rapor/components/liste-uretici.tsx
@@ -264,7 +264,7 @@ export function ListeUretici({
    // Paketli kullanıcıya paket satma: onun ürünü top-up. Liste ve sohbet
    // geçmişi kalıcı; kredi yükleyince kaldığı yerden devam eder.
    return (
-      <section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
+      <section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-card p-8 text-center sm:p-12">
        <Lock className="mx-auto size-8 text-slate-400" aria-hidden />
        <h1 className="mt-4 font-heading text-xl font-bold">
          Kredin bu liste için yetmiyor
@@ -294,7 +294,7 @@ export function ListeUretici({

  if (durum.ad === "hata") {
    return (
-      <section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
+      <section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-card p-8 text-center sm:p-12">
        <h1 className="font-heading text-xl font-bold">Liste kurulamadı</h1>
        <p className="mx-auto mt-2 max-w-md text-sm text-slate-600">
          {durum.mesaj}
@@ -344,7 +344,7 @@ function SunucuYokEkrani() {
  }

  return (
-    <section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
+    <section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-card p-8 text-center sm:p-12">
      <h1 className="font-heading text-xl font-bold">
        Listen hazır, sunucuya şu an ulaşamıyoruz
      </h1>
@@ -375,7 +375,7 @@ function SunucuYokEkrani() {
 *  "Tekrar dene" yok: tekrar taze requestId üretip ikinci üretimi başlatırdı. */
 function SuruyorEkrani() {
  return (
-    <section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
+    <section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-card p-8 text-center sm:p-12">
      <h1 className="font-heading text-xl font-bold">Listen zaten hazırlanıyor</h1>
      <p className="mx-auto mt-2 max-w-md text-sm text-slate-600">
        Bunu başka bir sekmede başlatmışsın. İki kez kurmayalım — kredin bu
@@ -436,7 +436,7 @@ function UretimGovdesi({ uzunSurdu }: { uzunSurdu: boolean }) {
          danışman sağda — üretim biter bitmez ekran aynı yerlere oturur. */}
      <div className="mt-8 grid grid-cols-[minmax(0,1fr)] items-start gap-6 lg:grid-cols-[minmax(0,1fr)_380px] xl:grid-cols-[minmax(0,1fr)_440px]">
        {/* Gelmekte olan tercih listesinin iskeleti */}
-        <div className="flex min-w-0 flex-col gap-2 rounded-2xl border border-slate-200 bg-white p-6 sm:p-8">
+        <div className="flex min-w-0 flex-col gap-2 rounded-2xl border border-slate-200 bg-card p-6 sm:p-8">
          <div className="flex items-center justify-between pb-2">
            <Skeleton className="h-6 w-44" />
            <Skeleton className="h-6 w-24 rounded-full" />
@@ -453,7 +453,7 @@ function UretimGovdesi({ uzunSurdu }: { uzunSurdu: boolean }) {
            gördüğü ilk şey danışmanın çalıştığı olsun. */}
        <aside
          aria-label="Danışman paneli — listen hazırlanıyor"
-          className="flex flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white max-lg:order-first lg:sticky lg:top-28"
+          className="flex flex-col overflow-hidden rounded-2xl border border-slate-200 bg-card max-lg:order-first lg:sticky lg:top-28"
        >
          {/* SohbetClient başlığıyla aynı ibare/stil: üretim bitince panel
              yerini sohbete bırakırken başlık değişmez. */}
--- a/src/features/rapor/components/listem-govde.tsx
+++ b/src/features/rapor/components/listem-govde.tsx
@@ -349,7 +349,7 @@ export function ListemGovde({

            <section
              ref={kilitKartRef}
-              className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm"
+              className="overflow-hidden rounded-2xl border border-slate-200 bg-card shadow-sm"
            >
              <div className="border-b border-slate-100 p-6">
                <h3 className="font-heading text-xl font-bold tracking-tight">
--- a/src/features/rapor/components/rapor-listesi.tsx
+++ b/src/features/rapor/components/rapor-listesi.tsx
@@ -104,13 +104,13 @@ export function RaporSatirDetayi({
        ) : null}
      </div>
      <dl className="grid gap-3 text-base leading-relaxed sm:grid-cols-2">
-        <div className="rounded-xl border border-slate-200 bg-white p-4">
+        <div className="rounded-xl border border-slate-200 bg-card p-4">
          <dt className="text-sm font-semibold text-slate-900">
            Neden listede?
          </dt>
          <dd className="mt-1 text-slate-600">{gerekce}</dd>
        </div>
-        <div className="rounded-xl border border-slate-200 bg-white p-4">
+        <div className="rounded-xl border border-slate-200 bg-card p-4">
          <dt className="text-sm font-semibold text-slate-900">
            Risk ve Yapay Zeka yorumu
          </dt>
@@ -310,7 +310,7 @@ export function RaporListesi({
                e.stopPropagation();
                tiklandi(t.sira);
              }}
-              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={`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`}
            >
              <ChevronDown
                className={`size-4 transition-transform duration-200 ${acikMi ? "rotate-180" : ""}`}
@@ -337,7 +337,7 @@ export function RaporListesi({
                      Kişisel analiz pakette
                    </span>
                  </div>
-                  <div className="rounded-xl border border-dashed border-slate-300 bg-white p-4">
+                  <div className="rounded-xl border border-dashed border-slate-300 bg-card p-4">
                    <p className="flex items-center gap-1.5 text-sm font-semibold text-slate-900">
                      <Lock className="size-4" aria-hidden />
                      Yapay Zeka karar desteği
@@ -400,7 +400,7 @@ export function RaporListesi({
        </p>
      ) : null}

-      <div className="mt-4 overflow-hidden rounded-2xl border border-slate-200 bg-white">
+      <div className="mt-4 overflow-hidden rounded-2xl border border-slate-200 bg-card">
        <Table>
          <TableHeader>
            <TableRow className="hover:bg-transparent">
--- a/src/features/rapor/components/rapor-yazdir.tsx
+++ b/src/features/rapor/components/rapor-yazdir.tsx
@@ -54,7 +54,7 @@ export async function RaporYazdir() {
  });

  return (
-    <div className="mx-auto max-w-3xl bg-white p-8 text-slate-900 print:p-[10mm]">
+    <div className="mx-auto max-w-3xl bg-card p-8 text-slate-900 print:p-[10mm]">
      <YazdirButonu />

      <header className="border-b-2 border-slate-900 pb-4">
@@ -159,7 +159,7 @@ export async function RaporYazdir() {
 // Rapor sorgusu beklenirken belge düzeninde iskelet.
 export function RaporYazdirSkeleton() {
  return (
-    <div aria-live="polite" className="mx-auto w-full max-w-3xl bg-white p-8">
+    <div aria-live="polite" className="mx-auto w-full max-w-3xl bg-card p-8">
      <div className="border-b-2 border-slate-200 pb-4">
        <Skeleton className="h-8 w-64" />
        <Skeleton className="mt-2 h-4 w-40" />
--- a/src/features/rapor/components/revizyon-kutusu.tsx
+++ b/src/features/rapor/components/revizyon-kutusu.tsx
@@ -25,7 +25,7 @@ export function RevizyonKutusu({ kalanHak }: { kalanHak: number }) {
    return (
      <section
        id="revizyon"
-        className="scroll-mt-24 rounded-2xl border border-slate-200 bg-white p-5"
+        className="scroll-mt-24 rounded-2xl border border-slate-200 bg-card p-5"
      >
        <p className="text-sm text-slate-500">
          Revizyon hakların doldu. Danışman sohbetinden listen hakkında soru
@@ -62,7 +62,7 @@ export function RevizyonKutusu({ kalanHak }: { kalanHak: number }) {
  return (
    <section
      id="revizyon"
-      className="scroll-mt-24 rounded-2xl border border-slate-200 bg-white p-5"
+      className="scroll-mt-24 rounded-2xl border border-slate-200 bg-card p-5"
    >
      <h2 className="font-heading text-base font-bold">
        Listede değişiklik mi istiyorsun?
@@ -78,7 +78,7 @@ export function RevizyonKutusu({ kalanHak }: { kalanHak: number }) {
        maxLength={1000}
        placeholder="ör. İlk 5 tercihte daha fazla İstanbul olsun, güvenli dilimi genişlet…"
        disabled={pending}
-        className="w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+        className="w-full rounded-lg border border-slate-200 bg-card px-3 py-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
      />
      <div className="mt-3 flex items-center gap-3">
        <Button
--- a/src/features/rapor/components/tadimlik-satiri.tsx
+++ b/src/features/rapor/components/tadimlik-satiri.tsx
@@ -151,7 +151,7 @@ export function TadimlikSatiri({
        </p>
      </div>

-      <div className="mt-6 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:p-6">
+      <div className="mt-6 rounded-2xl border border-slate-200 bg-card p-4 shadow-sm sm:p-6">
        {/* Rapor listesinin satırıyla aynı düzen (§4.15): ad sarar,
            üniversite adı altında, taban sıra sağda iri. */}
        <div className="flex items-start gap-3">
--- a/src/features/rehber/components/el-cizimi-sema.tsx
+++ b/src/features/rehber/components/el-cizimi-sema.tsx
@@ -97,7 +97,7 @@ export function ElCizimiSema({
        <div
          role="img"
          aria-label={ariaLabel}
-          className={`${elYazisi.className} overflow-x-auto [&_svg]:mx-auto [&_svg]:h-auto [&_svg]:max-w-full`}
+          className={`${elYazisi.className} kt-sema-kagit overflow-x-auto [&_svg]:mx-auto [&_svg]:h-auto [&_svg]:max-w-full`}
          dangerouslySetInnerHTML={{ __html: svg }}
        />
      ) : hata ? null : (
--- a/src/features/rehber/components/rehber-listesi.tsx
+++ b/src/features/rehber/components/rehber-listesi.tsx
@@ -13,7 +13,7 @@ export function RehberListesi() {
        <li key={y.slug} className="mb-5 break-inside-avoid">
          <Link
            href={`/rehber/${y.slug}`}
-            className="block overflow-hidden rounded-3xl border border-slate-200 bg-white p-2 shadow-sm focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
+            className="block overflow-hidden rounded-3xl border border-slate-200 bg-card p-2 shadow-sm focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
          >
            <RehberKapak
              baslik={y.baslik}
@@ -39,7 +39,7 @@ export function RehberListesiSkeleton() {
    <ul className="mt-8 columns-1 gap-5 sm:columns-2 lg:columns-3">
      {Array.from({ length: 3 }, (_, i) => (
        <li key={i} className="mb-5 break-inside-avoid">
-          <div className="rounded-3xl border border-slate-200 bg-white p-2 shadow-sm">
+          <div className="rounded-3xl border border-slate-200 bg-card p-2 shadow-sm">
            <Skeleton className="aspect-[1200/630] w-full rounded-[1.15rem]" />
            <div className="px-3 pb-3 pt-4">
              <Skeleton className="h-5 w-full" />
--- a/src/features/sihirbaz/components/cta-sira-form.tsx
+++ b/src/features/sihirbaz/components/cta-sira-form.tsx
@@ -251,7 +251,7 @@ export function CtaSiraForm({
            className={
              tur === t.deger
                ? "cursor-pointer rounded-full border border-primary bg-primary px-3 py-1.5 text-xs font-medium text-white transition-colors duration-200"
-                : "cursor-pointer rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs text-slate-600 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50"
+                : "cursor-pointer rounded-full border border-slate-200 bg-card px-3 py-1.5 text-xs text-slate-600 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50"
            }
          >
            {t.etiket}
@@ -319,7 +319,7 @@ export function CtaSiraForm({
  const cekmece = (
    <Drawer open={acik} onOpenChange={acikDegisti} handleOnly>
      <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"
      >
        <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]">
          <X className="size-4" aria-hidden />
@@ -386,7 +386,7 @@ export function CtaSiraForm({
        aria-labelledby={baslikId}
        className={cn(
          "relative isolate overflow-hidden rounded-2xl border px-5 py-4 text-left transition-colors duration-200 sm:py-5",
-          profil ? "border-transparent bg-primary text-white" : "border-slate-200 bg-white",
+          profil ? "border-transparent bg-primary text-white" : "border-slate-200 bg-card",
        )}
      >
        {profil ? <PikselZemin seed={11} /> : null}
--- a/src/features/sihirbaz/components/hero-form.tsx
+++ b/src/features/sihirbaz/components/hero-form.tsx
@@ -155,7 +155,7 @@ export function HeroForm() {
            className={
              tur === t.deger
                ? "cursor-pointer rounded-full border border-primary bg-primary px-3 py-1.5 text-xs font-medium text-white transition-colors duration-200"
-                : "cursor-pointer rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs text-slate-600 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50"
+                : "cursor-pointer rounded-full border border-slate-200 bg-card px-3 py-1.5 text-xs text-slate-600 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50"
            }
          >
            {t.etiket}
--- a/src/features/sihirbaz/components/il-secim-haritasi.tsx
+++ b/src/features/sihirbaz/components/il-secim-haritasi.tsx
@@ -73,9 +73,9 @@ export function IlSecimHaritasi({
                    ? "oklch(0.705 0.213 47.6)" // orange-500
                    : adet
                      ? `oklch(0.623 0.188 259.8 / ${0.25 + 0.65 * yogunluk})`
-                      : "oklch(0.929 0.013 255.5)" // slate-200
+                      : "var(--color-slate-200)"
                }
-                stroke={seciliMi ? "oklch(0.553 0.195 38.4)" : "white"}
+                stroke={seciliMi ? "oklch(0.553 0.195 38.4)" : "var(--card)"}
                strokeWidth={seciliMi ? 2 : 1}
                onClick={adet ? () => onToggle(key) : undefined}
                role={adet ? "button" : undefined}
--- a/src/features/sihirbaz/components/sihirbaz-adimlar.tsx
+++ b/src/features/sihirbaz/components/sihirbaz-adimlar.tsx
@@ -48,7 +48,7 @@ export function Cip({
      className={
        secili
          ? `${temel} border-primary bg-primary text-white`
-          : `${temel} border-slate-200 bg-white text-slate-700 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500`
+          : `${temel} border-slate-200 bg-card text-slate-700 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500`
      }
    >
      {children}
@@ -345,7 +345,7 @@ export function SihirbazAdimlar({
            En fazla 5 il seçebilirsin. İstersen boş bırak, fark etmez.
          </p>

-          <div className="mt-4 flex h-11 items-center gap-2 rounded-full border border-slate-200 bg-white px-4 transition-colors focus-within:border-slate-300">
+          <div className="mt-4 flex h-11 items-center gap-2 rounded-full border border-slate-200 bg-card px-4 transition-colors focus-within:border-slate-300">
            <Search className="size-4 shrink-0 text-slate-400" aria-hidden />
            <input
              type="text"
@@ -354,7 +354,7 @@ export function SihirbazAdimlar({
              placeholder="İl ara..."
              aria-label="İl ara"
              autoComplete="off"
-              className="min-w-0 flex-1 bg-transparent text-base text-slate-950 outline-none placeholder:text-slate-400"
+              className="min-w-0 flex-1 bg-transparent text-base text-slate-900 outline-none placeholder:text-slate-400"
            />
            {ilArama ? (
              <button
@@ -394,7 +394,7 @@ export function SihirbazAdimlar({
              <button
                type="button"
                onClick={() => setTumIllerAcik(true)}
-                className="inline-flex h-10 cursor-pointer items-center rounded-full border border-dashed border-slate-300 bg-white px-3.5 text-sm font-semibold 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.97]"
+                className="inline-flex h-10 cursor-pointer items-center rounded-full border border-dashed border-slate-300 bg-card px-3.5 text-sm font-semibold 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.97]"
              >
                +{gorunenTurkiyeIlleri.length - IL_ON_IZLEME} il daha
              </button>
@@ -406,7 +406,7 @@ export function SihirbazAdimlar({
              <button
                type="button"
                onClick={() => setTumIllerAcik(false)}
-                className="inline-flex h-10 cursor-pointer items-center rounded-full border border-dashed border-slate-300 bg-white px-3.5 text-sm font-semibold 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.97]"
+                className="inline-flex h-10 cursor-pointer items-center rounded-full border border-dashed border-slate-300 bg-card px-3.5 text-sm font-semibold 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.97]"
              >
                Daha az göster
              </button>