diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index 05f469f..450f222 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -31,6 +31,9 @@ const tabsListVariants = cva(
       variant: {
         default: "bg-muted",
         line: "gap-1 bg-transparent",
+        // Nav'daki "Giriş yap" pili ile aynı dil: beyaz kapsül içinde koyu
+        // aktif hap (bkz. user-nav.tsx). Kayan gösterge tüketicide çizilir.
+        pill: "gap-1 rounded-full border border-slate-200 bg-white p-1 group-data-horizontal/tabs:h-auto",
       },
     },
     defaultVariants: {
@@ -66,6 +69,9 @@ function TabsTrigger({
         "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        // Pill varyantı: arka planı tüketicideki kayan gösterge verir, trigger
+        // şeffaf kalır; aktif metin koyu hap üstünde beyaza döner.
+        "group-data-[variant=pill]/tabs-list:h-auto group-data-[variant=pill]/tabs-list:rounded-full group-data-[variant=pill]/tabs-list:data-active:bg-transparent group-data-[variant=pill]/tabs-list:data-active:text-white",
         "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className
       )}
diff --git a/src/features/liste/components/program-tablosu.tsx b/src/features/liste/components/program-tablosu.tsx
index 52afdc0..5f35ec2 100644
--- a/src/features/liste/components/program-tablosu.tsx
+++ b/src/features/liste/components/program-tablosu.tsx
@@ -7,6 +7,7 @@
 
 import { useMemo, useState } from "react";
 import Link from "next/link";
+import { motion, useReducedMotion } from "motion/react";
 import {
   ChevronDown,
   Rocket,
@@ -43,30 +44,31 @@ import { UniLogo } from "@/components/uni-logo";
 const DILIMLER: {
   key: DilimKey;
   etiket: string;
-  aciklama: string;
   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: "Hayal",
-    aciklama: "Tabanı sıralamanın üstünde — şansını denediğin satırlar.",
     icon: Rocket,
     renk: "text-red-500",
+    renkAktif: "text-red-400",
   },
   {
     key: "dengeli",
     etiket: "Dengeli",
-    aciklama: "Tabanı sıralamana denk — listenin bel kemiği.",
     icon: Scale,
     renk: "text-amber-500",
+    renkAktif: "text-amber-400",
   },
   {
     key: "garanti",
     etiket: "Garanti",
-    aciklama: "Tabanı belirgin şekilde altında — güvenli bölge.",
     icon: ShieldCheck,
     renk: "text-emerald-600",
+    renkAktif: "text-emerald-400",
   },
 ];
 
@@ -106,6 +108,7 @@ export function ProgramTablosu({
   const [aktifDilim, setAktifDilim] = useState<DilimKey>(() =>
     varsayilanDilim(sonuclar),
   );
+  const hareketAzalt = useReducedMotion();
   // Sihirbaz seçimlerinden profil çerezine yazılıp SSR'da prop olarak gelen
   // filtreler — sayfalama isteklerinde ve veri anahtarında kullanılır.
   const iller = useMemo(() => filtreIller ?? [], [filtreIller]);
@@ -180,17 +183,43 @@ export function ProgramTablosu({
         onValueChange={(v) => setAktifDilim(v as DilimKey)}
       >
         {/* Dilim sekmeleri tablonun hemen üstünde; puan türü burada değil,
-            navbar'daki sıralama rozetinden değiştirilir. */}
-        <TabsList>
-          {DILIMLER.map((d) => (
-            <TabsTrigger key={d.key} value={d.key} className="cursor-pointer">
-              <d.icon className={`size-3.5 ${d.renk}`} aria-hidden />
-              {d.etiket}
-              <span className="text-xs tabular-nums text-slate-400">
-                {sonuclar.toplam[d.key].toLocaleString("tr-TR")}
-              </span>
-            </TabsTrigger>
-          ))}
+            navbar'daki sıralama rozetinden değiştirilir. Aktif hap, nav'daki
+            "Giriş yap" butonuyla aynı dilde (koyu, rounded-full) ve layoutId
+            ile sekmeler arasında kayarak taşınır. */}
+        <TabsList variant="pill" className="self-center">
+          {DILIMLER.map((d) => {
+            const aktif = aktifDilim === d.key;
+            return (
+              <TabsTrigger
+                key={d.key}
+                value={d.key}
+                className="relative cursor-pointer px-3 py-1.5 transition-colors duration-200 hover:bg-slate-100 sm:px-4 sm:py-2"
+              >
+                {aktif ? (
+                  <motion.span
+                    layoutId="dilim-aktif-hap"
+                    className="absolute inset-0 rounded-full bg-slate-900"
+                    transition={
+                      hareketAzalt
+                        ? { duration: 0 }
+                        : { type: "spring", duration: 0.4, bounce: 0.15 }
+                    }
+                    aria-hidden
+                  />
+                ) : null}
+                <span className="relative z-10 inline-flex items-center gap-1.5">
+                  <d.icon
+                    className={`size-3.5 ${aktif ? d.renkAktif : d.renk}`}
+                    aria-hidden
+                  />
+                  {d.etiket}
+                  <span className="text-xs tabular-nums text-slate-400">
+                    {sonuclar.toplam[d.key].toLocaleString("tr-TR")}
+                  </span>
+                </span>
+              </TabsTrigger>
+            );
+          })}
         </TabsList>
 
         {DILIMLER.map((d) => {
@@ -198,7 +227,6 @@ export function ProgramTablosu({
           const toplam = sonuclar.toplam[d.key];
           return (
             <TabsContent key={d.key} value={d.key}>
-              <p className="mt-2 text-xs text-slate-500">{d.aciklama}</p>
               <div className="mt-3 overflow-hidden rounded-2xl border border-slate-200 bg-white">
                 {satirlar.length === 0 ? (
                   <p className="px-5 py-8 text-center text-sm text-slate-500">