diff --git a/src/components/TopNavigation.jsx b/src/components/TopNavigation.jsx
index ab53125..8dde389 100644
--- a/src/components/TopNavigation.jsx
+++ b/src/components/TopNavigation.jsx
@@ -2,6 +2,31 @@ import React, { useRef, useState, useEffect, useCallback, useTransition } from '
 import { useApp } from '../context/AppContext';
 import { Newspaper, Trophy, CalendarDays, FileCheck2, Calculator, TrendingUp, LayoutGrid, Kanban, Radar, FolderKanban, BarChart3, Webhook, Smartphone, Cpu, ShieldAlert, Globe2, Gavel, CreditCard, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
 
+// Her sekmenin kendi rengi — pasifken ikon tonu, aktifken dolgu. Tailwind JIT
+// için sınıf adları tam yazılıdır.
+const RENK = {
+  list:               { ikon: 'text-sky-600',     aktif: 'border-sky-300 bg-sky-100 text-sky-900',           hover: 'hover:bg-sky-50' },
+  bulten:             { ikon: 'text-amber-600',   aktif: 'border-amber-300 bg-amber-100 text-amber-900',     hover: 'hover:bg-amber-50' },
+  sonuc:              { ikon: 'text-lime-600',    aktif: 'border-lime-300 bg-lime-100 text-lime-900',        hover: 'hover:bg-lime-50' },
+  takvim:             { ikon: 'text-rose-600',    aktif: 'border-rose-300 bg-rose-100 text-rose-900',        hover: 'hover:bg-rose-50' },
+  sozlesme:           { ikon: 'text-emerald-600', aktif: 'border-emerald-300 bg-emerald-100 text-emerald-900', hover: 'hover:bg-emerald-50' },
+  kdv:                { ikon: 'text-teal-600',    aktif: 'border-teal-300 bg-teal-100 text-teal-900',        hover: 'hover:bg-teal-50' },
+  sinir:              { ikon: 'text-orange-600',  aktif: 'border-orange-300 bg-orange-100 text-orange-900',  hover: 'hover:bg-orange-50' },
+  fiyat:              { ikon: 'text-green-600',   aktif: 'border-green-300 bg-green-100 text-green-900',     hover: 'hover:bg-green-50' },
+  kanban:             { ikon: 'text-violet-600',  aktif: 'border-violet-300 bg-violet-100 text-violet-900',  hover: 'hover:bg-violet-50' },
+  rakip_radar:        { ikon: 'text-red-600',     aktif: 'border-red-300 bg-red-100 text-red-900',           hover: 'hover:bg-red-50' },
+  dokuman_deposu:     { ikon: 'text-indigo-600',  aktif: 'border-indigo-300 bg-indigo-100 text-indigo-900',  hover: 'hover:bg-indigo-50' },
+  analitik_dashboard: { ikon: 'text-cyan-600',    aktif: 'border-cyan-300 bg-cyan-100 text-cyan-900',        hover: 'hover:bg-cyan-50' },
+  kirmizi_bayrak:     { ikon: 'text-rose-700',    aktif: 'border-rose-400 bg-rose-100 text-rose-900',        hover: 'hover:bg-rose-50' },
+  kik_kararlari:      { ikon: 'text-stone-600',   aktif: 'border-stone-400 bg-stone-200 text-stone-900',     hover: 'hover:bg-stone-100' },
+  ted_eu:             { ikon: 'text-blue-600',    aktif: 'border-blue-300 bg-blue-100 text-blue-900',        hover: 'hover:bg-blue-50' },
+  planlar:            { ikon: 'text-pink-600',    aktif: 'border-pink-300 bg-pink-100 text-pink-900',        hover: 'hover:bg-pink-50' },
+  api_webhooks:       { ikon: 'text-slate-600',   aktif: 'border-slate-400 bg-slate-200 text-slate-900',     hover: 'hover:bg-slate-100' },
+  ai_ayarlari:        { ikon: 'text-purple-600',  aktif: 'border-purple-300 bg-purple-100 text-purple-900',  hover: 'hover:bg-purple-50' },
+  pwa_settings:       { ikon: 'text-fuchsia-600', aktif: 'border-fuchsia-300 bg-fuchsia-100 text-fuchsia-900', hover: 'hover:bg-fuchsia-50' },
+};
+const RENK_VARSAYILAN = { ikon: 'text-slate-500', aktif: 'border-blue-200 bg-blue-50 text-blue-700', hover: 'hover:bg-slate-50' };
+
 export const TopNavigation = () => {
   const { activeTab, setActiveTab, isAdmin } = useApp();
 
@@ -104,6 +129,7 @@ export const TopNavigation = () => {
       <div ref={seritRef} className="flex items-center gap-1 overflow-x-auto py-1 scrollbar-none scroll-smooth">
         {navItems.map(item => {
           const Icon = item.icon;
+          const renk = RENK[item.id] || RENK_VARSAYILAN;
           const isActive = bekleyen ? bekleyen === item.id : activeTab === item.id;
           const yukleniyor = bekleyen === item.id;
           return (
@@ -112,15 +138,15 @@ export const TopNavigation = () => {
               data-tab={item.id}
               aria-busy={yukleniyor || undefined}
               onClick={() => sekmeSec(item.id)}
-              className={`flex items-center gap-2 px-3.5 py-2 rounded-lg text-xs font-semibold whitespace-nowrap transition-all select-none ${
+              className={`flex items-center gap-2 px-3.5 py-2 rounded-lg border text-xs font-semibold whitespace-nowrap transition-all select-none ${
                 isActive
-                  ? 'bg-blue-50 text-blue-700 border border-blue-200 shadow-2xs'
-                  : 'text-slate-600 hover:text-slate-900 hover:bg-slate-50'
+                  ? `${renk.aktif} shadow-2xs`
+                  : `border-transparent text-slate-700 hover:text-slate-900 ${renk.hover}`
               }`}
             >
               {yukleniyor
-                ? <Loader2 className="w-4 h-4 text-blue-600 animate-spin" />
-                : <Icon className={`w-4 h-4 ${isActive ? 'text-blue-600' : 'text-slate-400'}`} />}
+                ? <Loader2 className={`w-4 h-4 animate-spin ${renk.ikon}`} />
+                : <Icon className={`w-4 h-4 ${renk.ikon}`} />}
               <span>{item.label}</span>
               {item.badge && (
                 <span className="bg-amber-100 text-amber-800 font-bold text-[10px] px-1.5 py-0.5 rounded-full border border-amber-200">