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>

src/app/layout.tsx

@@ -12,6 +12,7 @@ import { HeaderGate } from "@/components/header-gate";
 import { DevPanelMount } from "@/components/dev/dev-panel-mount";
 import { ConsoleAsr } from "@/components/console-asr";
 import { CerezBilgi } from "@/components/cerez-bilgi";
+import { TemaSaglayici } from "@/components/tema-saglayici";
 import { JsonLd, organizationJsonLd, webSiteJsonLd, SITE_URL } from "@/lib/seo";
 import "./globals.css";
 
@@ -71,7 +72,11 @@ export const metadata: Metadata = {
 };
 
 export const viewport: Viewport = {
-  themeColor: "#f8fafc",
+  // Gövde zemini (bg-slate-50) — açık ve koyu temadaki karşılığı
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "#f8fafc" },
+    { media: "(prefers-color-scheme: dark)", color: "#080e19" },
+  ],
 };
 
 export default function RootLayout({
@@ -82,16 +87,20 @@ export default function RootLayout({
   return (
     <html
       lang="tr"
+      // next-themes ilk boyamadan önce <html>'e `dark` sınıfını ve
+      // color-scheme'i yazar; sunucu HTML'iyle fark beklenen bir farktır.
+      suppressHydrationWarning
       // `h-full` verme: html auto yükseklikte içerikle büyür, viewport tabanı
       // body'deki min-h-dvh'den gelir.
       className={`${calSans.variable} ${clarityCity.variable} ${geistMono.variable} ${bricolage.variable} antialiased`}
     >
       <body className="min-h-dvh flex flex-col bg-slate-50">
+        <TemaSaglayici>
         {/* Klavyeyle gelen için ilk durak: üst bandı ve menüyü atla
             (WCAG 2.4.1). Odaklanınca görünür, sitenin hap ölçüsünde. */}
         <a
           href="#icerik"
-          className="sr-only focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:z-[60] focus:inline-flex focus:h-11 focus:items-center focus:rounded-full focus:border focus:border-slate-200 focus:bg-white focus:px-4 focus:text-sm focus:font-semibold focus:text-slate-900 focus:shadow-lg focus:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+          className="sr-only focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:z-[60] focus:inline-flex focus:h-11 focus:items-center focus:rounded-full focus:border focus:border-slate-200 focus:bg-card focus:px-4 focus:text-sm focus:font-semibold focus:text-slate-900 focus:shadow-lg focus:outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
         >
           İçeriğe geç
         </a>
@@ -125,6 +134,7 @@ export default function RootLayout({
         <ConsoleAsr />
         {/* Dev süperadmin paneli — prod build'de modül grafiğine bile girmez */}
         {process.env.NODE_ENV !== "production" ? <DevPanelMount /> : null}
+        </TemaSaglayici>
         <JsonLd data={organizationJsonLd()} />
         <JsonLd data={webSiteJsonLd()} />
         {/* Rybbit analitik — afterInteractive: hydration sonrası client'ta