UX/CRO denetimi uygulandı: değer-önce funnel, güven sayfaları, dev paneli

Kritik (K1-K6) sonrası kalan tüm maddeler:
- Değer önce: girişsiz kullanıcı sihirbaz bitince /giris yerine /sonuc'taki
  ücretsiz tabloya gider (?hazir=1); AI CTA'sı "5 deneme kredinle listeni
  kur — giriş yap" paneli + sabit alt karttan verilir, girişte otomatik üretim
- Ö1-Ö10: paywall kopyası, aranabilir il seçimi, "Seçtiklerim" adlandırması,
  gizlilik/koşullar/iletişim sayfaları, danışman özeti + uyarılar, revizyon
  kutusu, dilim özeti + tek şehir uyarısı, eksik veri rozetleri, magic link
  yeniden gönder, mobil sohbet kısayolu
- G1-G5: binlik ayraçlı input + inline hata, adım göstergesi, route-level
  loading/error/not-found, dürüst konumlandırma kartı, dürüst buton etiketleri
- Seçtiklerim butonu liste boşken gizli; ilk eklemede belirir
- Dev süperadmin paneli (yalnızca development): hızlı giriş, kredi/paket/rapor
  senaryoları, sahte ödeme dönüşü

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

src/components/core/transition-panel.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { Children, type ReactNode } from "react";
+import {
+  AnimatePresence,
+  motion,
+  type Transition,
+  type Variants,
+} from "motion/react";
+
+type TransitionPanelProps = {
+  activeIndex: number;
+  children: ReactNode;
+  variants: Variants;
+  transition?: Transition;
+  custom?: number;
+};
+
+export function TransitionPanel({
+  activeIndex,
+  children,
+  variants,
+  transition,
+  custom,
+}: TransitionPanelProps) {
+  const paneller = Children.toArray(children);
+
+  return (
+    <div className="relative overflow-hidden">
+      <AnimatePresence initial={false} custom={custom}>
+        <motion.div
+          key={activeIndex}
+          custom={custom}
+          variants={variants}
+          initial="enter"
+          animate="center"
+          exit="exit"
+          transition={transition}
+        >
+          {paneller[activeIndex]}
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+}

src/components/dev/dev-panel.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+// Dev süperadmin paneli: yalnızca geliştirme ortamında render edilir
+// (layout.tsx NODE_ENV kontrolüyle monte eder; aksiyonlar da sunucuda
+// ayrıca korunur). Amaç: satın alma / giriş / kredi durumlarını tek
+// tıkla taklit edip uygulamanın tüm sayfalarını gerçek akışta gezmek.
+
+import { useCallback, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Loader2, Wrench, X } from "lucide-react";
+import { toast } from "sonner";
+import { authClient } from "@/lib/auth-client";
+import {
+  devAnindaGiris,
+  devAyarla,
+  devDurum,
+  devRaporSil,
+  devSahteOdeme,
+  type DevDurum,
+} from "@/lib/dev/actions";
+
+const SAYFALAR: { ad: string; href: string }[] = [
+  { ad: "Ana sayfa", href: "/" },
+  { ad: "Sonuç (85k · SAY)", href: "/sonuc?sira=85000&tur=say&sihirbaz=1" },
+  { ad: "Sonuç (girişsiz hazır)", href: "/sonuc?sira=85000&tur=say&hazir=1" },
+  { ad: "Listem", href: "/listem" },
+  { ad: "Listem (kilit açılışı)", href: "/listem?acildi=1" },
+  { ad: "Paket", href: "/paket" },
+  { ad: "Paket (ödeme hatası)", href: "/paket?hata=token" },
+  { ad: "PDF / yazdır", href: "/rapor/yazdir" },
+  { ad: "Giriş", href: "/giris" },
+  { ad: "Gizlilik", href: "/gizlilik" },
+  { ad: "Koşullar", href: "/kosullar" },
+  { ad: "İletişim", href: "/iletisim" },
+  { ad: "404", href: "/boyle-bir-sayfa-yok" },
+];
+
+export function DevPanel() {
+  const [acik, setAcik] = useState(false);
+  const [durum, setDurum] = useState<DevDurum | null>(null);
+  const [email, setEmail] = useState("test@kolaytercih.dev");
+  const [mesgul, setMesgul] = useState(false);
+  const router = useRouter();
+
+  const yenile = useCallback(async () => {
+    try {
+      setDurum(await devDurum());
+    } catch {
+      setDurum(null);
+    }
+  }, []);
+
+  function paneliAc() {
+    setAcik(true);
+    void yenile();
+  }
+
+  // Her aksiyonu tek kalıptan geçir: meşgul kilidi + durum tazeleme +
+  // server component'lerin (header'daki kredi rozeti dahil) yenilenmesi
+  async function calistir(fn: () => Promise<unknown>) {
+    setMesgul(true);
+    try {
+      await fn();
+      await yenile();
+      router.refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Dev aksiyonu başarısız.");
+    } finally {
+      setMesgul(false);
+    }
+  }
+
+  async function anindaGiris() {
+    setMesgul(true);
+    try {
+      const sonuc = await devAnindaGiris(email);
+      if (!sonuc.ok) {
+        toast.error(sonuc.error);
+        return;
+      }
+      // Verify URL'i oturumu kurup callback'e yönlendirir
+      window.location.assign(sonuc.url);
+    } finally {
+      setMesgul(false);
+    }
+  }
+
+  async function odemeEkrani() {
+    setMesgul(true);
+    try {
+      const sonuc = await devSahteOdeme();
+      if (!sonuc.ok) {
+        toast.error(sonuc.error);
+        return;
+      }
+      router.push(`/odeme/sonuc?siparis=${sonuc.siparis}`);
+    } finally {
+      setMesgul(false);
+    }
+  }
+
+  if (!acik) {
+    return (
+      <button
+        type="button"
+        onClick={paneliAc}
+        title="Dev süperadmin paneli"
+        className="fixed bottom-20 left-4 z-50 inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-full border border-violet-300 bg-violet-600 px-3 text-xs font-bold text-white shadow-lg transition-transform duration-150 hover:bg-violet-700 active:scale-95 print:hidden"
+      >
+        <Wrench className="size-3.5" aria-hidden />
+        DEV
+      </button>
+    );
+  }
+
+  const g = durum?.girisli ? durum : null;
+
+  return (
+    <div className="fixed bottom-20 left-4 z-50 flex max-h-[72vh] w-80 flex-col overflow-hidden rounded-2xl border border-violet-200 bg-white shadow-2xl print:hidden">
+      <div className="flex items-center justify-between border-b border-slate-100 bg-violet-600 px-4 py-2.5 text-white">
+        <p className="flex items-center gap-1.5 text-sm font-bold">
+          <Wrench className="size-4" aria-hidden />
+          Dev süperadmin
+          {mesgul ? (
+            <Loader2 className="size-3.5 animate-spin" aria-hidden />
+          ) : null}
+        </p>
+        <button
+          type="button"
+          onClick={() => setAcik(false)}
+          className="cursor-pointer rounded-full p-1 hover:bg-white/20"
+          aria-label="Kapat"
+        >
+          <X className="size-4" aria-hidden />
+        </button>
+      </div>
+
+      <div className="flex flex-col gap-4 overflow-y-auto p-4 text-sm">
+        {/* Oturum */}
+        <section>
+          <p className="text-xs font-semibold uppercase tracking-wide text-slate-400">
+            Oturum
+          </p>
+          {g ? (
+            <div className="mt-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-xs">
+              <p className="font-semibold text-slate-800">{g.email}</p>
+              <p className="mt-0.5 text-slate-500">
+                {g.kredi} kredi · {g.hasPaket ? "paketli" : "paketsiz"} ·{" "}
+                {g.raporVar
+                  ? `rapor var (${g.sira?.toLocaleString("tr-TR")} · ${g.tur})`
+                  : "rapor yok"}
+              </p>
+              <button
+                type="button"
+                disabled={mesgul}
+                onClick={() =>
+                  calistir(async () => {
+                    await authClient.signOut();
+                  })
+                }
+                className="mt-2 cursor-pointer text-violet-700 underline-offset-2 hover:underline"
+              >
+                Çıkış yap
+              </button>
+            </div>
+          ) : (
+            <p className="mt-2 text-xs text-slate-500">Girişsiz geziyorsun.</p>
+          )}
+          <div className="mt-2 flex gap-1.5">
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="deneme@ornek.dev"
+              className="h-9 min-w-0 flex-1 rounded-lg border border-slate-200 px-2.5 text-xs outline-none focus-visible:border-violet-400"
+            />
+            <button
+              type="button"
+              disabled={mesgul}
+              onClick={anindaGiris}
+              className="h-9 shrink-0 cursor-pointer rounded-lg bg-violet-600 px-3 text-xs font-semibold text-white hover:bg-violet-700 disabled:opacity-50"
+            >
+              Anında gir
+            </button>
+          </div>
+          <p className="mt-1 text-[10px] text-slate-400">
+            Yeni e-posta = 5 kredili yeni kullanıcı (magic link atlanır).
+          </p>
+        </section>
+
+        {/* Senaryolar */}
+        <section>
+          <p className="text-xs font-semibold uppercase tracking-wide text-slate-400">
+            Senaryo
+          </p>
+          <div className="mt-2 grid grid-cols-2 gap-1.5">
+            {(
+              [
+                {
+                  ad: "Yeni kullanıcı",
+                  aciklama: "5 kredi · paketsiz · raporsuz",
+                  fn: async () => {
+                    await devAyarla({ kredi: 5, hasPaket: false });
+                    await devRaporSil();
+                  },
+                },
+                {
+                  ad: "Paketli",
+                  aciklama: "60 kredi · paket aktif",
+                  fn: () => devAyarla({ kredi: 60, hasPaket: true }),
+                },
+                {
+                  ad: "Kredisi bitmiş",
+                  aciklama: "0 kredi",
+                  fn: () => devAyarla({ kredi: 0 }),
+                },
+                {
+                  ad: "Raporu sil",
+                  aciklama: "boş durumlar",
+                  fn: () => devRaporSil(),
+                },
+              ] as const
+            ).map((s) => (
+              <button
+                key={s.ad}
+                type="button"
+                disabled={mesgul || !g}
+                onClick={() => calistir(s.fn)}
+                className="cursor-pointer rounded-lg border border-slate-200 px-2.5 py-2 text-left text-xs hover:border-violet-300 hover:bg-violet-50 disabled:cursor-default disabled:opacity-40"
+              >
+                <span className="block font-semibold text-slate-800">
+                  {s.ad}
+                </span>
+                <span className="text-[10px] text-slate-500">
+                  {s.aciklama}
+                </span>
+              </button>
+            ))}
+          </div>
+          <button
+            type="button"
+            disabled={mesgul || !g}
+            onClick={odemeEkrani}
+            className="mt-1.5 w-full cursor-pointer rounded-lg border border-emerald-200 bg-emerald-50 px-2.5 py-2 text-left text-xs font-semibold text-emerald-800 hover:bg-emerald-100 disabled:cursor-default disabled:opacity-40"
+          >
+            Ödeme başarı ekranı 🎉
+            <span className="block text-[10px] font-normal text-emerald-700">
+              sahte &quot;paid&quot; sipariş oluşturup /odeme/sonuc&apos;a gider
+            </span>
+          </button>
+        </section>
+
+        {/* Sayfalar */}
+        <section>
+          <p className="text-xs font-semibold uppercase tracking-wide text-slate-400">
+            Sayfalar
+          </p>
+          <div className="mt-2 flex flex-wrap gap-1.5">
+            {SAYFALAR.map((s) => (
+              <a
+                key={s.href}
+                href={s.href}
+                className="cursor-pointer rounded-full border border-slate-200 px-2.5 py-1 text-[11px] text-slate-700 hover:border-violet-300 hover:bg-violet-50"
+              >
+                {s.ad}
+              </a>
+            ))}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}

src/components/hero-form.tsx

@@ -3,7 +3,6 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { ArrowRight, Loader2 } from "lucide-react";
-import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -13,62 +12,110 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { SihirbazAdimlar } from "@/components/sihirbaz-adimlar";
+import { authClient } from "@/lib/auth-client";
 import type { SihirbazFacetleri } from "@/lib/db";
 import { SIHIRBAZ_STORAGE_KEY, type SihirbazSecimleri } from "@/lib/sihirbaz";
 
-const TUR: string = "say";
+// lib/db sunucu tarafı; etiketler client bundle'a sızmasın diye burada.
+const PUAN_TURLERI_SECENEK = [
+  { deger: "say", etiket: "Sayısal" },
+  { deger: "ea", etiket: "Eşit Ağırlık" },
+  { deger: "soz", etiket: "Sözel" },
+  { deger: "dil", etiket: "Dil" },
+  { deger: "tyt", etiket: "TYT" },
+] as const;
 
 export function HeroForm() {
   const [siralama, setSiralama] = useState("");
+  const [tur, setTur] = useState<string>("say");
   const [sira, setSira] = useState<number | null>(null);
   const [facetler, setFacetler] = useState<SihirbazFacetleri | null>(null);
   const [yukleniyor, setYukleniyor] = useState(false);
   const [modalAcik, setModalAcik] = useState(false);
+  const [hata, setHata] = useState<string | null>(null);
   const router = useRouter();
+  const { data: oturum } = authClient.useSession();
+  const girisli = Boolean(oturum?.user);
+
+  // Yazarken binlik ayracıyla biçimle (85000 → 85.000)
+  function siralamaDegisti(ham: string) {
+    setHata(null);
+    const rakamlar = ham.replace(/\D/g, "").slice(0, 7);
+    setSiralama(
+      rakamlar ? Number(rakamlar).toLocaleString("tr-TR") : "",
+    );
+  }
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     const value = Number(siralama.replace(/\./g, ""));
     if (!value || value < 1 || value > 4_000_000) {
-      toast.error("Geçerli bir başarı sıralaması gir (ör. 85.000).");
+      setHata("Geçerli bir başarı sıralaması gir (ör. 85.000).");
       return;
     }
     setYukleniyor(true);
     try {
-      const res = await fetch(`/api/facetler?sira=${value}&tur=${TUR}`);
+      const res = await fetch(`/api/facetler?sira=${value}&tur=${tur}`);
       if (!res.ok) throw new Error();
       const veri = (await res.json()) as { facetler: SihirbazFacetleri };
       setSira(value);
       setFacetler(veri.facetler);
       setModalAcik(true);
     } catch {
-      toast.error("Bir şeyler ters gitti, tekrar dener misin?");
+      setHata("Bir şeyler ters gitti, tekrar dener misin?");
     } finally {
       setYukleniyor(false);
     }
   }
 
-  // Seçimler tamam: sakla ve giriş kapısına yönlendir. Girişli kullanıcıyı
-  // /giris zaten callback'e (sonuç + otomatik üretim) sektirir; girişsiz
-  // kullanıcı listeyi görmeden önce funnel'lı giriş ekranıyla karşılaşır.
+  // Seçimler tamam: sakla ve herkes doğrudan /sonuc'a gitsin. Girişli
+  // kullanıcıda orada otomatik üretim başlar; girişsiz kullanıcı önce
+  // ücretsiz tabloyu görür, giriş CTA'sı ödülün kaydedilmesi olarak
+  // oradan gelir (değer önce — giriş duvarı sihirbazın hemen arkasında değil).
   function secimleriTamamla(secimler: SihirbazSecimleri) {
     if (!sira) return;
     try {
       localStorage.setItem(
         SIHIRBAZ_STORAGE_KEY,
-        JSON.stringify({ sira, tur: TUR, secimler }),
+        JSON.stringify({ sira, tur, secimler }),
       );
     } catch {}
     setModalAcik(false);
-    const geri = `/sonuc?sira=${sira}&tur=${TUR}&sihirbaz=1`;
-    router.push(`/giris?callback=${encodeURIComponent(geri)}`);
+    router.push(
+      girisli
+        ? `/sonuc?sira=${sira}&tur=${tur}&sihirbaz=1`
+        : `/sonuc?sira=${sira}&tur=${tur}&hazir=1`,
+    );
   }
 
   return (
-    <>
+    <div className="flex w-full max-w-md flex-col items-center gap-3">
+      <div
+        role="radiogroup"
+        aria-label="Puan türü"
+        className="flex flex-wrap justify-center gap-1.5"
+      >
+        {PUAN_TURLERI_SECENEK.map((t) => (
+          <button
+            key={t.deger}
+            type="button"
+            role="radio"
+            aria-checked={tur === t.deger}
+            onClick={() => setTur(t.deger)}
+            className={
+              tur === t.deger
+                ? "cursor-pointer rounded-full border border-primary bg-primary px-3 py-1.5 text-xs font-medium text-white transition-colors duration-200"
+                : "cursor-pointer rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs text-slate-600 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50"
+            }
+          >
+            {t.etiket}
+          </button>
+        ))}
+      </div>
+
       <form
         onSubmit={handleSubmit}
-        className="flex w-full max-w-md flex-col gap-3 sm:flex-row"
+        className="flex w-full flex-col gap-3 sm:flex-row"
       >
         <label htmlFor="siralama" className="sr-only">
           YKS başarı sıralaması
@@ -78,7 +125,9 @@ export function HeroForm() {
           inputMode="numeric"
           placeholder="YKS başarı sıralaman (ör. 85.000)"
           value={siralama}
-          onChange={(e) => setSiralama(e.target.value)}
+          onChange={(e) => siralamaDegisti(e.target.value)}
+          aria-invalid={hata ? true : undefined}
+          aria-describedby={hata ? "siralama-hata" : undefined}
           className="h-12 flex-1 bg-white text-base"
         />
         <Button
@@ -95,6 +144,16 @@ export function HeroForm() {
         </Button>
       </form>
 
+      {hata ? (
+        <p
+          id="siralama-hata"
+          role="alert"
+          className="self-start text-sm font-medium text-red-600"
+        >
+          {hata}
+        </p>
+      ) : null}
+
       <Dialog open={modalAcik} onOpenChange={setModalAcik}>
         <DialogContent className="max-h-[92dvh] gap-0 overflow-y-auto p-6 text-left sm:max-w-3xl">
           <DialogTitle className="sr-only">Tercih listesi sihirbazı</DialogTitle>
@@ -103,14 +162,16 @@ export function HeroForm() {
           </DialogDescription>
           {facetler ? (
             <SihirbazAdimlar
-              key={sira}
+              key={`${sira}-${tur}`}
               facetler={facetler}
-              sonButonEtiketi="Tercih planıma geç"
+              sonButonEtiketi={
+                girisli ? "Listemi oluştur (3 kredi)" : "Ücretsiz tablonu gör"
+              }
               onTamamla={secimleriTamamla}
             />
           ) : null}
         </DialogContent>
       </Dialog>
-    </>
+    </div>
   );
 }

src/components/il-secim-haritasi.tsx

@@ -67,6 +67,9 @@ export function IlSecimHaritasi({
                 onClick={adet ? () => onToggle(key) : undefined}
                 role={adet ? "button" : undefined}
                 aria-pressed={adet ? seciliMi : undefined}
+                aria-label={
+                  adet ? `${city.name} — ${adet} program` : undefined
+                }
               >
                 <title>
                   {adet

src/components/manuel-liste/liste-cekmecesi.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 // Manuel 24'lük listenin alt çekmecesi (bottom sheet). Layout'ta bir kez
-// monte edilir; navbar'daki Listem butonu açar/kapatır.
+// monte edilir; navbar'daki Seçtiklerim butonu açar/kapatır.
 //
 // Motion dili (apple-design / emil-design-eng):
 // - Sheet alttan spring ile yükselir; çıkış girişten hızlı, iOS drawer eğrisi.
@@ -136,7 +136,7 @@ function CekmeceSheet() {
           <div className="flex items-center justify-between gap-3">
             <h2 className="flex items-center gap-2 font-heading text-lg font-bold">
               <ListChecks className="size-5 text-primary" aria-hidden />
-              Listem
+              Seçtiklerim
               <span className="font-heading text-sm font-bold tabular-nums text-slate-400">
                 {liste.length}/{MANUEL_LISTE_MAX}
               </span>
@@ -191,11 +191,11 @@ function CekmeceSheet() {
           >
             <ListChecks className="size-8 text-slate-300" aria-hidden />
             <p className="font-heading text-sm font-bold text-slate-700">
-              Listen henüz boş
+              Henüz program seçmedin
             </p>
             <p className="text-xs leading-relaxed text-slate-500">
               Sonuç sayfasındaki tablodan <span aria-hidden>＋</span> ile
-              program ekle; 24 tercihlik listen burada birikir.
+              program ekle; beğendiklerin burada birikir.
             </p>
           </motion.div>
         ) : (

src/components/manuel-liste/listem-butonu.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-// Navbar'daki "Listem" butonu: manuel listenin sayacını taşır, tıklanınca
-// çekmeceyi açar/kapatır. Sayaç değişince rozet spring ile "pulse" yapar.
+// Navbar'daki "Seçtiklerim" butonu: elle kurulan aday listesinin sayacını
+// taşır, tıklanınca çekmeceyi açar/kapatır. ("Listem" adı AI raporunun
+// yaşadığı /listem sayfasına aittir — isim çakışmasın.)
 
 import { ListChecks } from "lucide-react";
 import { motion, useReducedMotion } from "motion/react";
@@ -17,17 +18,21 @@ export function ListemButonu() {
   const acik = useCekmeceAcik();
   const azMotion = useReducedMotion();
 
+  // Liste boşken buton gürültü: tabloya (＋) ulaşmamış ziyaretçiye "0/24"
+  // bir şey ifade etmez. İlk program eklenince belirir, liste boşalınca gider.
+  if (liste.length === 0) return null;
+
   return (
     <button
       type="button"
       onClick={cekmeceDegistir}
       aria-expanded={acik}
-      aria-label={`Listem — ${liste.length}/${MANUEL_LISTE_MAX} tercih`}
-      title="24'lük tercih listen"
+      aria-label={`Seçtiklerim — ${liste.length}/${MANUEL_LISTE_MAX} program`}
+      title="Tablodan seçtiğin programlar"
       className="relative inline-flex h-12 cursor-pointer items-center gap-2 whitespace-nowrap rounded-full border border-slate-200 bg-white px-5 text-sm font-semibold text-slate-700 transition-[color,background-color,border-color,transform] duration-200 hover:border-slate-300 hover:bg-slate-50 active:scale-[0.97]"
     >
       <ListChecks className="size-4 text-primary" aria-hidden />
-      <span className="hidden sm:inline">Listem</span>
+      <span className="hidden sm:inline">Seçtiklerim</span>
       {liste.length > 0 ? (
         // key=length: her eklemede rozet yeniden doğar ve spring ile oturur
         <motion.span

src/components/program-tablosu.tsx

@@ -172,7 +172,7 @@ export function ProgramTablosu({
           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.
+            ＋ ile beğendiklerini Seçtiklerim&apos;e at.
           </span>
         </p>
       </div>
@@ -424,10 +424,10 @@ function ProgramSatiri({
           onClick={() => onEkle(p)}
           title={
             listede
-              ? "Zaten listende"
+              ? "Zaten seçtiklerinde"
               : doldu
-                ? `Liste dolu (${MANUEL_LISTE_MAX}/${MANUEL_LISTE_MAX})`
-                : "Listeme ekle"
+                ? `Seçtiklerin dolu (${MANUEL_LISTE_MAX}/${MANUEL_LISTE_MAX})`
+                : "Seçtiklerime ekle"
           }
           className={`inline-flex size-8 cursor-pointer items-center justify-center rounded-full border transition-[background-color,border-color,color,transform] duration-150 active:scale-[0.92] disabled:cursor-default ${
             listede
@@ -441,7 +441,9 @@ function ProgramSatiri({
             <Plus className="size-4" aria-hidden />
           )}
           <span className="sr-only">
-            {listede ? `${p.isim} listende` : `${p.isim} listeye ekle`}
+            {listede
+              ? `${p.isim} seçtiklerinde`
+              : `${p.isim} seçtiklerine ekle`}
           </span>
         </button>
       </TableCell>

src/components/rapor-listesi.tsx

@@ -173,6 +173,22 @@ export function RaporListesi({
 
   const kilitIdx = kilitliBaslangic ?? rapor.tercihler.length;
 
+  // Dilim dağılımı: liste hayal diliminden başladığı için ilk ekran hep
+  // kırmızı görünür; özet, dengenin sağlıklı olduğunu tek bakışta gösterir.
+  const dilimSayilari = rapor.tercihler.reduce(
+    (t, x) => {
+      t[x.dilim] = (t[x.dilim] ?? 0) + 1;
+      return t;
+    },
+    {} as Record<string, number>,
+  );
+  const iller = new Set(
+    rapor.tercihler
+      .map((t) => rapor.programlar[t.programId]?.il)
+      .filter((il): il is string => Boolean(il)),
+  );
+  const tekIl = iller.size === 1 ? [...iller][0] : null;
+
   const satir = (
     t: RaporSonuc["tercihler"][number],
     index: number,
@@ -184,10 +200,16 @@ export function RaporListesi({
       dilimdenRisk(t.dilim);
     const stil = RISK_STIL[risk];
     const trend = trendYonu(p?.siraGecmisi);
-    const trendG = trend ? TREND_GORUNUM[trend] : null;
     const acikMi = acik.has(t.sira);
     const sira2024 = p?.siraGecmisi?.[3] ?? null;
     const sira2025 = p?.siraGecmisi?.[4] ?? null;
+    // Son iki yıldan biri eksikse satır başındaki trend rozeti çelişkili
+    // okunur ("2025: —" ama "stabil") — rozet ancak iki yıl da doluysa çıkar;
+    // uzun vadeli trend detaydaki 2021–2025 çizgisinde durur.
+    const trendG =
+      trend && sira2024 != null && sira2025 != null
+        ? TREND_GORUNUM[trend]
+        : null;
 
     return (
       <li
@@ -242,7 +264,7 @@ export function RaporListesi({
                 </span>
               </>
             ) : (
-              <span className="text-slate-400">Veri yok</span>
+              <span className="text-slate-400">Veri eksik</span>
             )}
           </span>
           <span className="hidden items-center gap-1.5 text-xs font-medium xl:flex">
@@ -357,6 +379,35 @@ export function RaporListesi({
         ) : null}
       </div>
 
+      <div className="mt-3 flex flex-wrap items-center gap-2 text-xs font-medium">
+        {(
+          [
+            ["hayal", "bg-red-500"],
+            ["dengeli", "bg-amber-500"],
+            ["garanti", "bg-emerald-500"],
+          ] as const
+        ).map(([dilim, nokta]) => (
+          <span
+            key={dilim}
+            className="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-2.5 py-1 text-slate-700"
+          >
+            <span className={`size-2 rounded-full ${nokta}`} aria-hidden />
+            {dilimSayilari[dilim] ?? 0} {DILIM_ETIKET[dilim].toLocaleLowerCase("tr-TR")}
+          </span>
+        ))}
+        <span className="text-slate-400">
+          Liste hayal diliminden başlar; kırmızı satırlar plana dahildir.
+        </span>
+      </div>
+
+      {tekIl ? (
+        <p className="mt-3 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900">
+          Listenin 24 tercihi de tek şehirde (
+          {tekIl.toLocaleLowerCase("tr-TR")}). Boşta kalma riskini azaltmak
+          için birkaç farklı şehir eklemeyi düşünebilirsin.
+        </p>
+      ) : null}
+
       <div className="mt-4 hidden grid-cols-[auto_minmax(220px,1fr)_92px_92px_112px_82px_auto] gap-x-3 px-4 text-[11px] font-semibold uppercase tracking-wide text-slate-500 xl:grid">
         <span className="w-7">#</span>
         <span>Program</span>

src/components/sihirbaz-adimlar.tsx

@@ -6,8 +6,11 @@
 
 import { useState } from "react";
 import { ArrowLeft, ArrowRight, Sparkles, X } from "lucide-react";
+import { useReducedMotion } from "motion/react";
+import useMeasure from "react-use-measure";
 import { toast } from "sonner";
 import { cities } from "turkey-map-react/lib/data";
+import { TransitionPanel } from "@/components/core/transition-panel";
 import { Button } from "@/components/ui/button";
 import { IlSecimHaritasi } from "@/components/il-secim-haritasi";
 import { normalizeIlAdi } from "@/lib/harita";
@@ -59,10 +62,14 @@ export function SihirbazAdimlar({
   onTamamla: (secimler: SihirbazSecimleri) => void;
 }) {
   const [adim, setAdim] = useState(0);
+  const [yon, setYon] = useState(1);
+  const [panelRef, panelOlculeri] = useMeasure();
+  const hareketiAzalt = useReducedMotion();
   const [kategoriler, setKategoriler] = useState<string[]>(
     baslangicSecimler?.kategoriler ?? [],
   );
   const [iller, setIller] = useState<string[]>(baslangicSecimler?.iller ?? []);
+  const [ilArama, setIlArama] = useState("");
   const [universiteTipi, setUniversiteTipi] = useState<UniversiteTipi>(
     baslangicSecimler?.universiteTipi ?? "farketmez",
   );
@@ -89,6 +96,11 @@ export function SihirbazAdimlar({
 
   const adimGecerli = adim === 0 ? kategoriler.length > 0 : true;
 
+  function adimaGit(yeniAdim: number) {
+    setYon(yeniAdim > adim ? 1 : -1);
+    setAdim(yeniAdim);
+  }
+
   return (
     <div className="flex flex-col gap-5">
       <div className="flex items-center gap-1.5">
@@ -98,7 +110,9 @@ export function SihirbazAdimlar({
             className={
               i === adim
                 ? "h-1.5 w-6 rounded-full bg-primary transition-all"
-                : "h-1.5 w-1.5 rounded-full bg-slate-200 transition-all"
+                : i < adim
+                  ? "h-1.5 w-3 rounded-full bg-primary/50 transition-all"
+                  : "h-1.5 w-1.5 rounded-full bg-slate-200 transition-all"
             }
           />
         ))}
@@ -107,8 +121,45 @@ export function SihirbazAdimlar({
         </span>
       </div>
 
-      {adim === 0 ? (
-        <div>
+      <TransitionPanel
+        activeIndex={adim}
+        custom={yon}
+        variants={{
+          enter: (gecisYonu: number) => ({
+            x: hareketiAzalt ? 0 : gecisYonu > 0 ? "100%" : "-100%",
+            opacity: 0,
+            height:
+              panelOlculeri.height > 0 ? panelOlculeri.height : "auto",
+            position: "relative",
+          }),
+          center: {
+            zIndex: 1,
+            x: 0,
+            opacity: 1,
+            height:
+              panelOlculeri.height > 0 ? panelOlculeri.height : "auto",
+          },
+          exit: (gecisYonu: number) => ({
+            zIndex: 0,
+            x: hareketiAzalt ? 0 : gecisYonu < 0 ? "100%" : "-100%",
+            opacity: 0,
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+          }),
+        }}
+        transition={
+          hareketiAzalt
+            ? { opacity: { duration: 0.12 } }
+            : {
+                x: { type: "spring", stiffness: 300, damping: 30 },
+                height: { type: "spring", stiffness: 300, damping: 30 },
+                opacity: { duration: 0.2 },
+              }
+        }
+      >
+        <div ref={panelRef}>
           <h3 className="font-heading text-lg font-bold">
             Hangi alanlara ilgi duyuyorsun?
           </h3>
@@ -128,22 +179,65 @@ export function SihirbazAdimlar({
             ))}
           </div>
         </div>
-      ) : adim === 1 ? (
-        <div>
+        <div ref={panelRef}>
           <h3 className="font-heading text-lg font-bold">
             Nerede okumak istersin?
           </h3>
           <p className="mt-1 text-sm text-slate-500">
-            Haritadan dokunarak seç (en fazla 5 il). İstersen boş bırak, fark
-            etmez.
+            En fazla 5 il seçebilirsin. İstersen boş bırak, fark etmez.
           </p>
-          <div className="mt-4">
-            <IlSecimHaritasi
-              iller={facetler.iller.filter((i) => HARITA_ILLERI.has(i.il))}
-              secili={iller}
-              onToggle={(il) => listeDegistir(iller, setIller, il, 5)}
-            />
-          </div>
+
+          {/* Birincil seçim yolu: arama + çipler (haritadaki küçük iller
+              mobilde güvenilir dokunma hedefi değil) */}
+          <input
+            type="search"
+            value={ilArama}
+            onChange={(e) => setIlArama(e.target.value)}
+            placeholder="İl ara (ör. İzmir)"
+            aria-label="İl ara"
+            className="mt-4 h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+          />
+          {(() => {
+            const q = ilArama.trim().toLocaleLowerCase("tr-TR");
+            const sirali = [...facetler.iller].sort((a, b) => b.adet - a.adet);
+            const eslesen = q
+              ? sirali.filter((i) =>
+                  i.il.toLocaleLowerCase("tr-TR").includes(q),
+                )
+              : sirali.slice(0, 12);
+            const kalan = q ? 0 : facetler.iller.length - eslesen.length;
+            return (
+              <div className="mt-3">
+                <div className="flex flex-wrap gap-2">
+                  {eslesen.map((i) => (
+                    <Cip
+                      key={i.il}
+                      secili={iller.includes(i.il)}
+                      onClick={() => listeDegistir(iller, setIller, i.il, 5)}
+                    >
+                      {i.il.toLocaleLowerCase("tr-TR")}
+                      <span className="ml-1.5 text-xs opacity-70">
+                        {i.adet}
+                      </span>
+                    </Cip>
+                  ))}
+                  {eslesen.length === 0 ? (
+                    <p className="text-sm text-slate-500">
+                      Bu sıralamada &quot;{ilArama.trim()}&quot; için program
+                      bulunamadı.
+                    </p>
+                  ) : null}
+                </div>
+                {kalan > 0 ? (
+                  <p className="mt-2 text-xs text-slate-400">
+                    En çok programı olan 12 il gösteriliyor — diğer {kalan} il
+                    için arama yaz.
+                  </p>
+                ) : null}
+              </div>
+            );
+          })()}
+
           {iller.length > 0 ? (
             <div className="mt-3 flex flex-wrap items-center gap-2">
               <span className="text-xs font-semibold text-slate-400">
@@ -162,32 +256,17 @@ export function SihirbazAdimlar({
               ))}
             </div>
           ) : null}
-          {facetler.iller.some((i) => !HARITA_ILLERI.has(i.il)) ? (
-            <div className="mt-3">
-              <p className="mb-2 text-xs font-semibold tracking-wide text-slate-400 uppercase">
-                Harita dışı (KKTC vb.)
-              </p>
-              <div className="flex flex-wrap gap-2">
-                {facetler.iller
-                  .filter((i) => !HARITA_ILLERI.has(i.il))
-                  .map((i) => (
-                    <Cip
-                      key={i.il}
-                      secili={iller.includes(i.il)}
-                      onClick={() => listeDegistir(iller, setIller, i.il, 5)}
-                    >
-                      {i.il.toLocaleLowerCase("tr-TR")}
-                      <span className="ml-1.5 text-xs opacity-70">
-                        {i.adet}
-                      </span>
-                    </Cip>
-                  ))}
-              </div>
-            </div>
-          ) : null}
+
+          {/* Harita geniş ekranda görsel destek olarak kalır */}
+          <div className="mt-4 hidden sm:block">
+            <IlSecimHaritasi
+              iller={facetler.iller.filter((i) => HARITA_ILLERI.has(i.il))}
+              secili={iller}
+              onToggle={(il) => listeDegistir(iller, setIller, il, 5)}
+            />
+          </div>
         </div>
-      ) : (
-        <div className="space-y-5">
+        <div ref={panelRef} className="space-y-5">
           <div>
             <h3 className="font-heading text-lg font-bold">
               Üniversite tipi & öncelikler
@@ -240,15 +319,15 @@ export function SihirbazAdimlar({
             </div>
           </div>
         </div>
-      )}
+      </TransitionPanel>
 
       <div className="flex items-center justify-between border-t border-slate-100 pt-4">
         <Button
           type="button"
           variant="ghost"
-          onClick={() => setAdim((a) => a - 1)}
+          onClick={() => adimaGit(adim - 1)}
           disabled={adim === 0}
-          className="cursor-pointer"
+          className={adim === 0 ? "invisible" : "cursor-pointer"}
         >
           <ArrowLeft className="size-4" aria-hidden />
           Geri
@@ -256,7 +335,7 @@ export function SihirbazAdimlar({
         {adim < 2 ? (
           <Button
             type="button"
-            onClick={() => setAdim((a) => a + 1)}
+            onClick={() => adimaGit(adim + 1)}
             disabled={!adimGecerli}
             className="cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600"
           >

src/components/ui/typing-animation.tsx

@@ -105,7 +105,9 @@ export function TypingAnimation({
     [words, children]
   )
 
+  // Kaynak metin değişince animasyon baştan başlar — bilinçli reset
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setDisplayedText("")
     setCurrentWordIndex(0)
     setCurrentCharIndex(0)