Refactor UI components for consistency and clarity across the application

- Updated AGENTS.md with new guidelines for UI consistency, including badge and modal styles.
- Refactored layout.tsx to improve the placement of the progressive blur effect.
- Enhanced NotFound component text for better user guidance.
- Replaced HeroFocusButton with HeroBaslik and KapanisCta in the Home component for improved clarity.
- Added SiteFooter to multiple pages for consistent footer display.
- Removed ListemSekmeleri component and adjusted ListemPage to streamline functionality.
- Updated various components to ensure consistent styling and user experience.

src/components/program-tablosu.tsx

@@ -7,7 +7,6 @@
 
 import { useState } from "react";
 import Link from "next/link";
-import { useLinkStatus } from "next/link";
 import {
   ChevronDown,
   Rocket,
@@ -16,7 +15,7 @@ import {
 } from "lucide-react";
 import type { DilimKey, Program, PuanTuruKey, RankResults } from "@/lib/db";
 import { riskHesapla, type RiskSeviyesi } from "@/lib/risk";
-import { turkishSlugify } from "@/lib/slug";
+import { bolumBazAdi, turkishSlugify } from "@/lib/slug";
 import {
   ProgramSiraGecmisi,
   ProgramTabanTrendi,
@@ -70,61 +69,6 @@ const RISK_NOKTA: Record<RiskSeviyesi, string> = {
   riskli: "bg-red-500",
 };
 
-// Seçicideki kısa etiketler — sayfa başlığındaki uzun hallerinden bağımsız
-const TUR_ETIKETLERI: Record<PuanTuruKey, string> = {
-  say: "Sayısal",
-  ea: "Eşit Ağırlık",
-  soz: "Sözel",
-  dil: "Dil",
-  tyt: "TYT",
-};
-
-// useLinkStatus Link'in altındaki bir bileşende çağrılmalı; sunucu
-// gidiş-dönüşü sürerken tıklanan pill hafifçe nabız atar (layout shift yok).
-function SeciciEtiket({ children }: { children: React.ReactNode }) {
-  const { pending } = useLinkStatus();
-  return (
-    <span
-      className={`transition-opacity duration-150 ${
-        pending ? "animate-pulse opacity-60" : ""
-      }`}
-    >
-      {children}
-    </span>
-  );
-}
-
-function PuanTuruSecici({
-  sira,
-  aktif,
-}: {
-  sira: number;
-  aktif: PuanTuruKey;
-}) {
-  return (
-    <nav
-      aria-label="Puan türü"
-      className="flex w-fit max-w-full flex-wrap gap-1 rounded-full border border-slate-200 bg-slate-100 p-1"
-    >
-      {(Object.keys(TUR_ETIKETLERI) as PuanTuruKey[]).map((key) => (
-        <Link
-          key={key}
-          href={`/sonuc?sira=${sira}&tur=${key}`}
-          scroll={false}
-          aria-current={key === aktif ? "page" : undefined}
-          className={`cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium transition-[background-color,color,transform] duration-150 active:scale-[0.97] ${
-            key === aktif
-              ? "bg-white text-slate-900 shadow-sm"
-              : "text-slate-500 hover:text-slate-900"
-          }`}
-        >
-          <SeciciEtiket>{TUR_ETIKETLERI[key]}</SeciciEtiket>
-        </Link>
-      ))}
-    </nav>
-  );
-}
-
 const BOS_EKSTRA: Record<DilimKey, Program[]> = {
   hayal: [],
   dengeli: [],
@@ -197,47 +141,23 @@ export function ProgramTablosu({
 
   return (
     <section className="mt-16" aria-label="Sıralamanla açılan programlar">
-      <div>
-        <h2 className="font-heading text-2xl font-bold">
-          Sıralamanla açılan programlar
-        </h2>
-        <p className="mt-1 max-w-2xl text-sm text-slate-500">
-          Yapay zekâsız, ham YÖK Atlas verisi: geçen yılın taban
-          sıralamalarına göre ulaşabildiğin bölümler.{" "}
-          <span className="font-medium text-slate-700">
-            ＋ ile beğendiklerini Seçtiklerim&apos;e at.
-          </span>
-        </p>
-      </div>
-
       <Tabs
         value={aktifDilim}
         onValueChange={(v) => setAktifDilim(v as DilimKey)}
-        className="mt-5"
       >
-        {/* Kontrol çubuğu: tabloyu süzen her şey tablonun hemen üstünde —
-            solda dilim sekmeleri (birincil), sağda puan türü (ikincil filtre).
-            Dar ekranda alt alta sarar. */}
-        <div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-3">
-          <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>
-            ))}
-          </TabsList>
-          <div className="flex items-center gap-2">
-            <span className="text-[11px] font-medium uppercase tracking-wide text-slate-400">
-              Puan türü
-            </span>
-            {/* scroll={false}: tür değişince sayfa konumu korunur */}
-            <PuanTuruSecici sira={adaySira} aktif={tur} />
-          </div>
-        </div>
+        {/* 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>
+          ))}
+        </TabsList>
 
         {DILIMLER.map((d) => {
           const satirlar = [...sonuclar[d.key], ...ekstra[d.key]];
@@ -314,6 +234,14 @@ function uniSayfaSlug(ad: string): string {
   return turkishSlugify(ad.replace(/\s*\([^)]*\)\s*$/, "").trim());
 }
 
+// /bolum/[slug] sayfa slug'ı: katalog.ts'teki bolumSlugFromIsim ile aynı kural
+// (bolumBazAdi + turkishSlugify). Bölüm haritası DB'deki tüm isim
+// değerlerinden kurulduğu için bu slug da her zaman var olan bir sayfaya çıkar
+// (bkz. liste-cekmecesi'ndeki bolumHref).
+function bolumSayfaSlug(isim: string): string {
+  return turkishSlugify(bolumBazAdi(isim));
+}
+
 function ProgramSatiri({
   program: p,
   adaySira,
@@ -341,9 +269,14 @@ function ProgramSatiri({
         <span className="flex min-w-0 items-center gap-2.5">
           <UniLogo ad={p.universite} boy="sm" />
           <span className="min-w-0 flex-1">
-            <span className="block truncate text-sm font-semibold">
+            <Link
+              href={`/bolum/${bolumSayfaSlug(p.isim)}`}
+              className="block truncate text-sm font-semibold hover:text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              title={`${p.isim} bölüm sayfası`}
+              onClick={(e) => e.stopPropagation()}
+            >
               {p.isim}
-            </span>
+            </Link>
             <span className="mt-0.5 flex items-center gap-1.5 text-xs text-slate-500">
               <span
                 className={`shrink-0 rounded px-1 py-px text-[10px] font-medium leading-4 ${