Update UI components and database schema

- Updated the `page.tsx` component to enhance user experience with new UI elements and improved layout.
- Modified the `funnel-banner.tsx` to include dynamic text and improved styling for better engagement.
- Adjusted the `liste-paneli.tsx` to provide clearer information on user credits and package details.
- Enhanced the `rapor-listesi.tsx` to display additional data points for better insights.
- Updated the database schema in `app.db` to reflect recent changes in the application logic.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/components/program-tablosu.tsx

@@ -2,12 +2,21 @@
 
 // Sonuç sayfasının AI'sız ham listesi: yalnızca başarı sıralamasıyla
 // yokatlas'tan gelen programlar, dilim sekmeleri halinde. Her satırın "+"
-// butonu programı manuel 24'lük listeye ekler; pill navbar'daki (ya da açık
-// çekmecedeki) Listem hedefine uçar (bkz. manuel-liste/liste-cekmecesi).
+// butonu programı manuel 24'lük listeye ekler (bkz. manuel-liste/store).
 
 import { useState } from "react";
-import { Check, Plus, Rocket, Scale, ShieldCheck } from "lucide-react";
-import type { Program, RankResults } from "@/lib/db";
+import Link from "next/link";
+import { useLinkStatus } from "next/link";
+import {
+  Check,
+  Plus,
+  Rocket,
+  Scale,
+  ShieldCheck,
+  TrendingDown,
+  TrendingUp,
+} from "lucide-react";
+import type { Program, PuanTuruKey, RankResults } from "@/lib/db";
 import { riskHesapla, type RiskSeviyesi } from "@/lib/risk";
 import {
   Table,
@@ -21,7 +30,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   MANUEL_LISTE_MAX,
   ekle,
-  ucusBaslat,
   useManuelListe,
   type ManuelTercih,
 } from "@/components/manuel-liste/store";
@@ -65,6 +73,61 @@ 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>
+  );
+}
+
 function efektifSira(p: Program): number | null {
   return p.sira2025 ?? p.sira2024;
 }
@@ -84,40 +147,34 @@ function tercihYap(p: Program, adaySira: number): ManuelTercih {
 export function ProgramTablosu({
   sonuclar,
   adaySira,
+  tur,
 }: {
   sonuclar: RankResults;
   adaySira: number;
+  tur: PuanTuruKey;
 }) {
   const liste = useManuelListe();
   const [aktifDilim, setAktifDilim] = useState<DilimKey>("dengeli");
   const listedekiler = new Set(liste.map((t) => t.id));
   const doldu = liste.length >= MANUEL_LISTE_MAX;
 
-  function eklemeyiDene(p: Program, buton: HTMLElement) {
-    const tercih = tercihYap(p, adaySira);
-    if (!ekle(tercih)) return;
-    const r = buton.getBoundingClientRect();
-    ucusBaslat({
-      tercih,
-      kaynak: { x: r.left + r.width / 2, y: r.top + r.height / 2 },
-    });
+  function eklemeyiDene(p: Program) {
+    ekle(tercihYap(p, adaySira));
   }
 
   return (
     <section className="mt-16" aria-label="Sıralamanla açılan programlar">
-      <div className="flex flex-wrap items-end justify-between gap-3">
-        <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 kendi 24&apos;lük listene at.
-            </span>
-          </p>
-        </div>
+      <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 kendi 24&apos;lük listene at.
+          </span>
+        </p>
       </div>
 
       {/* Listendeki üniversitelerin konumu — ekledikçe canlı dolar */}
@@ -130,17 +187,29 @@ export function ProgramTablosu({
         onValueChange={(v) => setAktifDilim(v as DilimKey)}
         className="mt-5"
       >
-        <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[d.key].length}
-              </span>
-            </TabsTrigger>
-          ))}
-        </TabsList>
+        {/* 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[d.key].length}
+                </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>
 
         {DILIMLER.map((d) => (
           <TabsContent key={d.key} value={d.key}>
@@ -156,6 +225,12 @@ export function ProgramTablosu({
                     <TableRow>
                       <TableHead className="w-8" />
                       <TableHead>Program</TableHead>
+                      <TableHead className="hidden text-right md:table-cell">
+                        Son 5 yıl
+                      </TableHead>
+                      <TableHead className="hidden text-right sm:table-cell">
+                        Kontenjan
+                      </TableHead>
                       <TableHead className="text-right">Taban sıra</TableHead>
                       <TableHead className="w-16 text-right">
                         <span className="sr-only">Listeye ekle</span>
@@ -184,6 +259,86 @@ export function ProgramTablosu({
   );
 }
 
+// Tabanın 2021–2025 seyri: küçük sıra = daha rekabetçi olduğundan y ekseni
+// ters çevrilir; çizgi yukarı gidiyorsa bölüm yıllar içinde zorlaşıyor demektir.
+function SiraGecmisi({ p }: { p: Program }) {
+  const yillar = [
+    [2021, p.sira2021],
+    [2022, p.sira2022],
+    [2023, p.sira2023],
+    [2024, p.sira2024],
+    [2025, p.sira2025],
+  ].filter((y): y is [number, number] => y[1] != null);
+  if (yillar.length < 2) return <span className="text-slate-400">—</span>;
+
+  const siralar = yillar.map(([, s]) => s);
+  const min = Math.min(...siralar);
+  const max = Math.max(...siralar);
+  const W = 56;
+  const H = 18;
+  const PAD = 2;
+  const noktalar = yillar.map(([yil, s], i) => {
+    const x = PAD + (i / (yillar.length - 1)) * (W - PAD * 2);
+    // min sıra (en rekabetçi) üstte dursun
+    const y =
+      max === min
+        ? H / 2
+        : PAD + ((s - min) / (max - min)) * (H - PAD * 2);
+    return { x, y, yil, s };
+  });
+  const son = noktalar[noktalar.length - 1];
+  const ozet = yillar
+    .map(([yil, s]) => `${yil}: ~${s.toLocaleString("tr-TR")}.`)
+    .join("\n");
+
+  return (
+    <svg
+      viewBox={`0 0 ${W} ${H}`}
+      className="inline-block h-[18px] w-14 text-slate-300"
+      role="img"
+      aria-label={`Taban sıra geçmişi. ${ozet.replaceAll("\n", " ")}`}
+    >
+      <title>{ozet}</title>
+      <polyline
+        points={noktalar.map((n) => `${n.x},${n.y}`).join(" ")}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <circle cx={son.x} cy={son.y} r="2" className="fill-slate-500" />
+    </svg>
+  );
+}
+
+// Taban sıra iki yıl üst üste %10'dan fazla oynadıysa yönünü gösterir;
+// küçük sıra = daha rekabetçi taban demektir.
+function TabanTrendi({ p }: { p: Program }) {
+  if (p.sira2025 == null || p.sira2024 == null) return null;
+  const oran = (p.sira2024 - p.sira2025) / p.sira2024;
+  if (Math.abs(oran) < 0.1) return null;
+  const yukseliyor = oran > 0;
+  const gecis = `${p.sira2024.toLocaleString("tr-TR")} → ${p.sira2025.toLocaleString("tr-TR")}`;
+  return yukseliyor ? (
+    <TrendingUp
+      className="size-3 shrink-0 text-amber-500"
+      aria-label={`Taban yükseliyor: ${gecis}`}
+      role="img"
+    >
+      <title>{`Taban yükseliyor: ${gecis}`}</title>
+    </TrendingUp>
+  ) : (
+    <TrendingDown
+      className="size-3 shrink-0 text-emerald-600"
+      aria-label={`Taban geriliyor: ${gecis}`}
+      role="img"
+    >
+      <title>{`Taban geriliyor: ${gecis}`}</title>
+    </TrendingDown>
+  );
+}
+
 function ProgramSatiri({
   program: p,
   adaySira,
@@ -195,10 +350,11 @@ function ProgramSatiri({
   adaySira: number;
   listede: boolean;
   doldu: boolean;
-  onEkle: (p: Program, buton: HTMLElement) => void;
+  onEkle: (p: Program) => void;
 }) {
   const taban = efektifSira(p);
   const risk = riskHesapla(taban, adaySira);
+  const devlet = p.unitur === "DEVLET";
 
   return (
     <TableRow>
@@ -212,19 +368,60 @@ function ProgramSatiri({
       </TableCell>
       <TableCell className="max-w-0 w-full">
         <span className="block truncate text-sm font-semibold">{p.isim}</span>
-        <span className="block truncate text-xs text-slate-500">
-          {p.universite}
-          {p.il ? ` · ${p.il.toLocaleLowerCase("tr-TR")}` : ""}
+        <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 ${
+              devlet
+                ? "bg-slate-100 text-slate-600"
+                : "bg-violet-50 text-violet-600"
+            }`}
+          >
+            {devlet ? "Devlet" : "Vakıf"}
+          </span>
+          <span className="truncate">
+            {p.universite}
+            {p.il ? ` · ${p.il.toLocaleLowerCase("tr-TR")}` : ""}
+          </span>
+          {p.sure ? (
+            <span className="shrink-0 text-slate-400">· {p.sure} yıl</span>
+          ) : null}
         </span>
       </TableCell>
+      <TableCell className="hidden text-right text-xs md:table-cell">
+        <SiraGecmisi p={p} />
+      </TableCell>
+      <TableCell
+        className="hidden text-right text-xs tabular-nums text-slate-500 sm:table-cell"
+        title={
+          p.kontenjan2025 != null && p.yerlesen2025 != null
+            ? `${p.kontenjan2025} kontenjan, ${p.yerlesen2025} yerleşen`
+            : undefined
+        }
+      >
+        {p.kontenjan2025 != null ? (
+          <span className="inline-flex items-center gap-1.5">
+            {p.yerlesen2025 != null && p.yerlesen2025 < p.kontenjan2025 ? (
+              <span className="rounded bg-amber-50 px-1 py-px text-[10px] font-medium leading-4 text-amber-600">
+                boş kaldı
+              </span>
+            ) : null}
+            {p.kontenjan2025.toLocaleString("tr-TR")} kişi
+          </span>
+        ) : (
+          "—"
+        )}
+      </TableCell>
       <TableCell className="text-right text-xs tabular-nums text-slate-500">
-        {taban != null ? `~${taban.toLocaleString("tr-TR")}.` : "—"}
+        <span className="inline-flex items-center gap-1">
+          <TabanTrendi p={p} />
+          {taban != null ? `~${taban.toLocaleString("tr-TR")}.` : "—"}
+        </span>
       </TableCell>
       <TableCell className="pr-4 text-right">
         <button
           type="button"
           disabled={listede || doldu}
-          onClick={(e) => onEkle(p, e.currentTarget)}
+          onClick={() => onEkle(p)}
           title={
             listede
               ? "Zaten listende"