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/app/sonuc/funnel-banner.tsx

@@ -1,140 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import Link from "next/link";
-import {
-  ArrowRight,
-  ChartNoAxesCombined,
-  Database,
-  ListChecks,
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { TypingAnimation } from "@/components/ui/typing-animation";
-
-/** Banner CTA'sının sihirbaz modalını açmak için yayınladığı olay. */
-export const SIHIRBAZ_AC_EVENT = "kolaytercih:sihirbaz-ac";
-
-const FUNNEL_METINLERI = [
-  "Sıralamana en uygun listeyi birlikte kuralım.",
-  "Geleceğin 24 satırlık bir plana sığar.",
-  "Gerçek YÖK Atlas verisiyle güvenle seç.",
-  "Her tercihinin bir nedeni olsun.",
-  "Riskleri biz hesaplayalım, kararı sen ver.",
-  "Sana uygun bölümler bir adım uzağında.",
-  "Dengeli bir liste, rahat bir tercih dönemi.",
-  "Tercihlerini şansa bırakma.",
-  "Doğru strateji, doğru yerleşme.",
-  "Hayalindeki bölüm için doğru plan.",
-  "Verilerle konuşan bir tercih listesi.",
-  "Üç adımda sana özel 24 tercih.",
-  "Tercih dönemini stressiz geçir.",
-  "Geçen yılın verisi, senin avantajın.",
-  "Güvenli ve iddialı tercihleri dengele.",
-  "Sıralaman ne söylüyor? Birlikte bakalım.",
-  "Her satırı senin için hesaplıyoruz.",
-  "Akıllı tercih, içi rahat bir bekleyiş.",
-  "Yerleşme ihtimalini görerek seç.",
-  "Sana özel liste birkaç dakikada hazır.",
-  "İlgi alanların ve şehrin, tek listede.",
-  "Boş kalan tercih, kaçan fırsattır.",
-  "Uzman işi bir liste, senin onayınla.",
-  "Kararını veriye dayandır.",
-  "Doğru tercih, doğru bilgiyle başlar.",
-  "Listeni bugün kur, için rahat olsun.",
-  "Yerleşme riskin renklerle önünde.",
-  "En önemli 24 kararını birlikte verelim.",
-  "Senin sıralaman, sana özel plan.",
-  "İyi bir liste, iyi bir başlangıçtır.",
-];
-
-/** Fisher-Yates ile kopya üzerinde karıştırır; her ziyarette farklı sıra. */
-function karistir<T>(dizi: readonly T[]): T[] {
-  const kopya = [...dizi];
-  for (let i = kopya.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [kopya[i], kopya[j]] = [kopya[j], kopya[i]];
-  }
-  return kopya;
-}
-
-const KANITLAR = [
-  { ikon: ListChecks, etiket: "24 tercih" },
-  { ikon: ChartNoAxesCombined, etiket: "Risk analizi" },
-  { ikon: Database, etiket: "YÖK Atlas verisi" },
-];
-
-/**
- * Puan türü badge'lerinin hemen altında yaşayan satın alım funnel banner'ı.
- * Rastgele sırayla yazılıp silinen samimi ve profesyonel funnel
- * metinleriyle adayı sihirbaza; rapor zaten varsa kilitli listenin
- * durduğu /listem paywall'ına iter.
- * Tasarım: güven veren lacivert yüzey, veri kanıtları ve turuncu CTA.
- */
-export function FunnelBanner({ hedefListem }: { hedefListem: boolean }) {
-  // İlk render'da bir kez karıştırılır; SSR boş metinle başladığı için
-  // hydration uyuşmazlığı yaratmaz.
-  const [metinler] = useState(() => karistir(FUNNEL_METINLERI));
-
-  const ctaSinif =
-    "h-12 w-full shrink-0 cursor-pointer rounded-xl bg-orange-500 px-5 font-semibold text-white shadow-[0_8px_24px_rgba(249,115,22,0.28)] transition-[background-color,transform,box-shadow] duration-200 hover:bg-orange-400 hover:shadow-[0_10px_28px_rgba(249,115,22,0.36)] active:scale-[0.98] focus-visible:ring-white/70 sm:w-auto";
-
-  return (
-    <section
-      aria-label="Tercih listeni kur"
-      className="relative mt-6 overflow-hidden rounded-3xl border border-blue-400/20 bg-[#0b1f3a] px-5 py-6 text-white shadow-[0_20px_50px_-28px_rgba(15,71,150,0.65)] sm:px-7 sm:py-7"
-    >
-      <div
-        aria-hidden
-        className="pointer-events-none absolute -right-16 -top-24 size-64 rounded-full bg-blue-500/25 blur-3xl"
-      />
-      <div
-        aria-hidden
-        className="pointer-events-none absolute -bottom-20 left-1/3 size-48 rounded-full bg-cyan-400/10 blur-3xl"
-      />
-
-      <div className="relative grid items-center gap-6 sm:grid-cols-[minmax(0,1fr)_auto] sm:gap-8">
-        <div className="min-w-0">
-          <TypingAnimation
-            as="h2"
-            words={metinler}
-            loop
-            typeSpeed={38}
-            deleteSpeed={18}
-            pauseDelay={2600}
-            className="min-h-[2.5em] max-w-2xl font-heading text-2xl font-bold leading-tight tracking-[-0.02em] sm:min-h-[1.25em] sm:text-3xl"
-          />
-
-          <div className="mt-4 flex flex-wrap gap-x-4 gap-y-2">
-            {KANITLAR.map(({ ikon: Ikon, etiket }) => (
-              <span
-                key={etiket}
-                className="inline-flex items-center gap-1.5 text-xs font-medium text-slate-200"
-              >
-                <Ikon className="size-3.5 text-cyan-300" aria-hidden />
-                {etiket}
-              </span>
-            ))}
-          </div>
-        </div>
-
-        {hedefListem ? (
-          <Button asChild size="lg" className={ctaSinif}>
-            <Link href="/listem">
-              Listeni aç
-              <ArrowRight className="size-4" aria-hidden />
-            </Link>
-          </Button>
-        ) : (
-          <Button
-            size="lg"
-            onClick={() => window.dispatchEvent(new Event(SIHIRBAZ_AC_EVENT))}
-            className={ctaSinif}
-          >
-            Listemi oluştur
-            <ArrowRight className="size-4" aria-hidden />
-          </Button>
-        )}
-      </div>
-    </section>
-  );
-}

src/app/sonuc/page.tsx

@@ -1,6 +1,4 @@
-import Link from "next/link";
 import type { Metadata } from "next";
-import { ArrowLeft } from "lucide-react";
 import { eq } from "drizzle-orm";
 import {
   PUAN_TURLERI,
@@ -14,13 +12,11 @@ import type { RaporSonuc } from "@/lib/ai/rapor";
 import type { RaporParams } from "@/lib/rapor-havuzu";
 import { raporMaskele } from "@/lib/rapor-maske";
 import { SihirbazBolumu } from "./sihirbaz-cagri-karti";
-import { FunnelBanner } from "./funnel-banner";
 import type { MevcutRapor } from "./liste-paneli";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { ProgramTablosu } from "@/components/program-tablosu";
 import { ManuelHarita } from "@/components/manuel-liste/manuel-harita";
-import { PagePixelDivider } from "@/components/pixel-decor";
+import { SiteFooter } from "@/components/site-footer";
+import { SiraGerekli } from "./sira-gerekli";
 
 export const metadata: Metadata = {
   title: "Tercih Listeni Kur",
@@ -30,14 +26,6 @@ export const metadata: Metadata = {
   robots: { index: false, follow: true },
 };
 
-const TUR_LABELS: Record<PuanTuruKey, string> = {
-  say: "Sayısal",
-  ea: "Eşit Ağırlık",
-  soz: "Sözel",
-  dil: "Dil",
-  tyt: "TYT (Önlisans)",
-};
-
 export default async function SonucPage({
   searchParams,
 }: {
@@ -58,21 +46,10 @@ export default async function SonucPage({
 
   if (!Number.isFinite(sira) || sira < 1 || sira > 4_000_000) {
     return (
-      <main className="mx-auto flex max-w-2xl flex-col items-center px-4 py-24 text-center">
-        <h1 className="font-heading text-2xl font-bold">
-          Geçerli bir sıralama gerekli
-        </h1>
-        <p className="mt-3 text-slate-600">
-          Listeni kurabilmek için ana sayfadan YKS başarı sıralamanı gir.
-        </p>
-        <PagePixelDivider seed={59} className="mx-auto mt-6" />
-        <Button asChild className="mt-6 cursor-pointer">
-          <Link href="/">
-            <ArrowLeft className="size-4" aria-hidden />
-            Ana sayfaya dön
-          </Link>
-        </Button>
-      </main>
+      <>
+        <SiraGerekli />
+        <SiteFooter />
+      </>
     );
   }
 
@@ -108,51 +85,15 @@ export default async function SonucPage({
   return (
     <div className="min-h-screen bg-slate-50 text-slate-900">
       <main className="mx-auto max-w-4xl px-4 py-12">
-        <div className="flex items-center justify-between gap-3">
-          <Badge variant="secondary" className="bg-primary/10 text-primary">
-            {sira.toLocaleString("tr-TR")}. sıra · {TUR_LABELS[turKey]}
-          </Badge>
-          <Button
-            asChild
-            size="sm"
-            variant="outline"
-            className="cursor-pointer rounded-full"
-          >
-            <Link href="/">
-              <ArrowLeft className="size-4" aria-hidden />
-              Yeni arama
-            </Link>
-          </Button>
-        </div>
-        <h1 className="mt-4 font-heading text-3xl font-bold sm:text-4xl">
-          {sira.toLocaleString("tr-TR")}. sıradaki bir aday için tercih planı
-        </h1>
-        <p className="mt-2 max-w-2xl text-slate-600">
-          Birkaç adımda ilgi alanlarını ve şehir tercihini seç; yapay zekâ
-          gerçek YÖK Atlas verisiyle 24 tercihlik dengeli listeni kursun. Her
-          satır yerleşme riskine göre renklenir:{" "}
-          <span className="font-semibold text-emerald-600">yeşil güvenli</span>,{" "}
-          <span className="font-semibold text-amber-600">sarı az riskli</span>,{" "}
-          <span className="font-semibold text-red-600">kırmızı riskli</span>.
-        </p>
-        <PagePixelDivider seed={61} className="mt-7" />
-
         {/* Sayfa hiyerarşisi: önce Türkiye haritası, sonra liste. Manuel
             liste store'una abone olduğundan tablodan "+" ile eklenenler
             buraya canlı yansır. */}
-        <div className="mt-8">
-          <ManuelHarita />
-        </div>
+        <ManuelHarita />
 
         {/* AI'dan bağımsız ham tablo — haritanın hemen altında, sayfanın ana
-            gövdesi; puan türü seçici de listenin başında yaşar */}
+            gövdesi; puan türü navbar'daki sıralama rozetinden değiştirilir */}
         <ProgramTablosu sonuclar={hamSonuclar} adaySira={sira} tur={turKey} />
 
-        {/* Satın alım funnel'ı: değişen cümlelerle adayı sihirbaza (rapor
-            varsa /listem paywall'ına) iten banner — paketli kullanıcıya
-            satacak bir şey kalmadığından gösterilmez */}
-        {!hasPaket ? <FunnelBanner hedefListem={Boolean(mevcutRapor)} /> : null}
-
         {/* Sihirbaz akışı (CTA + modal + AI listesi) — blurlu AI paneli
             sayfanın en altında yaşar */}
         <SihirbazBolumu
@@ -174,6 +115,7 @@ export default async function SonucPage({
           aittir.
         </p>
       </main>
+      <SiteFooter />
     </div>
   );
 }

src/app/sonuc/sihirbaz-cagri-karti.tsx

@@ -3,22 +3,24 @@
 import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { Sparkles, X } from "lucide-react";
+import { ArrowRight, X } from "lucide-react";
 import { animate } from "motion";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { ViewportPortal } from "@/components/viewport-portal";
+import { PixelField } from "@/components/pixel-decor";
 import type { SihirbazFacetleri } from "@/lib/db";
 import {
+  SIHIRBAZ_AC_EVENT,
   SIHIRBAZ_STORAGE_KEY,
   sihirbazDogrula,
+  sonucHref,
   tercihProfiliSil,
   tercihProfiliYaz,
   type SihirbazSecimleri,
 } from "@/lib/sihirbaz";
 import { SihirbazModal } from "./sihirbaz-modal";
-import { SIHIRBAZ_AC_EVENT } from "./funnel-banner";
 import { ListePaneli, type MevcutRapor, type PanelDurum } from "./liste-paneli";
 import { listeOlustur, listeRevize } from "./actions";
 
@@ -86,6 +88,9 @@ export function SihirbazBolumu({
   const [elleKapandi, setElleKapandi] = useState(false);
   const [kartGizle, setKartGizle] = useState(false);
   const [bekleyen, setBekleyen] = useState<BekleyenSecim | null>(null);
+  // ?sihirbaz=1 fallback modalı storage okunmadan açılmasın: hero'dan gelen
+  // kayıtlı seçimler varken modal bir anlığına açılıp kapanıyordu.
+  const [depoOkundu, setDepoOkundu] = useState(false);
 
   const [rapor, setRapor] = useState<MevcutRapor | null>(mevcutRapor);
   const [kredi, setKredi] = useState(baslangicKredi);
@@ -101,6 +106,9 @@ export function SihirbazBolumu({
   const requestIdRef = useRef<string | null>(null);
   const otomatikBasladi = useRef(false);
   const bolumRef = useRef<HTMLDivElement>(null);
+  // Funnel CTA'ları (banner olayı dahil) tıklama anındaki bekleyen seçimi
+  // görsün diye ref'te tutulur; olay dinleyicisi bir kez bağlanır.
+  const bekleyenRef = useRef<BekleyenSecim | null>(null);
 
   // Mount sonrası storage'dan bekleyen seçimleri + kalıcı kart kapatmayı oku
   useEffect(() => {
@@ -124,18 +132,20 @@ export function SihirbazBolumu({
       }
       // eslint-disable-next-line react-hooks/set-state-in-effect
       if (kaliciKapali) setKartGizle(true);
-      if (yeniBekleyen) setBekleyen(yeniBekleyen);
+      if (yeniBekleyen) {
+        setBekleyen(yeniBekleyen);
+        bekleyenRef.current = yeniBekleyen;
+      }
     } catch {}
+    setDepoOkundu(true);
   }, [sira, tur]);
 
-  // Üstteki funnel banner'ının CTA'sı sihirbaz modalını bu olayla açar
+  // Arama modalındaki funnel kartının CTA'sı sihirbazı bu olayla başlatır
   useEffect(() => {
-    const ac = () => {
-      setElleAcik(true);
-      setElleKapandi(false);
-    };
+    const ac = () => sihirbaziBaslat();
     window.addEventListener(SIHIRBAZ_AC_EVENT, ac);
     return () => window.removeEventListener(SIHIRBAZ_AC_EVENT, ac);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   /**
@@ -241,7 +251,7 @@ export function SihirbazBolumu({
 
   function secimleriKaydetVeGirise(secimler: SihirbazSecimleri) {
     tercihProfiliYaz({ sira, tur, secimler });
-    const geri = `/sonuc?sira=${sira}&tur=${tur}&sihirbaz=1`;
+    const geri = sonucHref({ sira, tur }, { sihirbaz: "1" });
     router.push(`/giris?callback=${encodeURIComponent(geri)}`);
   }
 
@@ -255,6 +265,22 @@ export function SihirbazBolumu({
     await uret(secimler);
   }
 
+  /**
+   * Funnel CTA'larının (banner, büyük kart, sabit alt kart) ortak girişi:
+   * adımlar zaten tamamlanıp kaydedildiyse modal açılmaz — girişli
+   * kullanıcıda üretim doğrudan başlar, girişsiz kullanıcı girişe gider.
+   * Kayıtlı seçim yoksa (ya da başka sıra/türe aitse) modal açılır.
+   */
+  function sihirbaziBaslat() {
+    const hazir = bekleyenRef.current;
+    if (hazir?.eslesir) {
+      void ilerle(hazir.secimler);
+      return;
+    }
+    setElleAcik(true);
+    setElleKapandi(false);
+  }
+
   // Giriş dönüşü: storage'daki eşleşen seçimlerle otomatik üretime başla
   // (bir kez, modal açmadan — üretim sayfa gövdesinde oynar).
   const otomatikUret = Boolean(bekleyen?.eslesir && girisliMi && !rapor);
@@ -268,11 +294,15 @@ export function SihirbazBolumu({
   }, [otomatikUret]);
 
   // ?sihirbaz=1: otomatik üretim devreye girmediyse (seçim kaybolduysa/
-  // eşleşmiyorsa) modalı aç ki kullanıcı adımları tamamlayabilsin.
+  // eşleşmiyorsa) modalı aç ki kullanıcı adımları tamamlayabilsin. Karar
+  // storage okunmadan verilmez: kayıtlı seçimlerle gelen kullanıcıya modal
+  // hiç gösterilmez, üretim doğrudan başlar.
   const acik =
     !elleKapandi &&
     (elleAcik ||
-      Boolean(otomatikAc && !otomatikUret && !rapor && durum === "bos"));
+      Boolean(
+        otomatikAc && depoOkundu && !otomatikUret && !rapor && durum === "bos",
+      ));
 
   function acikDegisti(v: boolean) {
     if (v) {
@@ -293,7 +323,7 @@ export function SihirbazBolumu({
   // mount sonrası değişir ve AnimatePresence geçişi donardı.
   const girisBekliyor = Boolean(!girisliMi && secimlerHazir && !rapor);
   const girisUrl = `/giris?callback=${encodeURIComponent(
-    `/sonuc?sira=${sira}&tur=${tur}&sihirbaz=1`,
+    sonucHref({ sira, tur }, { sihirbaz: "1" }),
   )}`;
 
   const panelAnahtari =
@@ -393,11 +423,17 @@ export function SihirbazBolumu({
                 </Button>
               </section>
             ) : girisBekliyor ? (
-              <section className="mt-16 min-w-0 rounded-2xl bg-primary px-5 py-8 text-center text-white sm:p-12">
-                <h2 className="font-heading text-2xl font-bold sm:text-3xl">
+              <section className="relative isolate mt-16 min-w-0 overflow-hidden rounded-2xl bg-primary px-5 py-8 text-center text-white sm:p-12">
+                <div
+                  aria-hidden
+                  className="pointer-events-none absolute inset-x-0 -inset-y-10 -z-10 text-white"
+                >
+                  <PixelField seed={13} />
+                </div>
+                <h2 className="relative font-heading text-2xl font-bold sm:text-3xl">
                   Seçimlerin hazır — AI listen bir adım uzakta
                 </h2>
-                <p className="mx-auto mt-3 max-w-xl text-white/90">
+                <p className="relative mx-auto mt-3 max-w-xl text-white/90">
                   Yukarıdaki tablo her zaman ücretsiz. 5 deneme kredinle 24
                   tercihlik AI listeni de kurabilirsin: ücretsiz giriş yap,
                   seçimlerin kayıtlı — listen otomatik kurulsun (üretim 3
@@ -406,34 +442,41 @@ export function SihirbazBolumu({
                 <Button
                   asChild
                   size="lg"
-                  className="mt-6 h-auto min-h-12 w-full cursor-pointer whitespace-normal bg-orange-500 px-4 py-3 text-white transition-colors duration-200 hover:bg-orange-600 sm:w-auto sm:px-8"
+                  className="relative mt-6 h-auto min-h-12 w-full cursor-pointer whitespace-normal bg-orange-500 px-4 py-3 text-white transition-colors duration-200 hover:bg-orange-600 sm:w-auto sm:px-8"
                 >
                   <Link href={girisUrl}>
-                    <Sparkles className="size-4" aria-hidden />5 deneme kredinle
-                    AI listeni kur — giriş yap
+                    5 deneme kredinle AI listeni kur — giriş yap
+                    <ArrowRight className="size-4" aria-hidden />
                   </Link>
                 </Button>
-                <p className="mt-3 text-xs text-white/70">
+                <p className="relative mt-3 text-xs text-white/70">
                   Kredi kartı gerekmez · Google ya da e-posta ile 30 saniyede
                 </p>
               </section>
             ) : (
-              <section className="mt-16 min-w-0 rounded-2xl bg-primary px-5 py-8 text-center text-white sm:p-12">
-                <h2 className="font-heading text-2xl font-bold sm:text-3xl">
-                  Bu listeyi 24 tercihlik plana çevirelim mi?
+              <section className="relative isolate mt-16 min-w-0 overflow-hidden rounded-2xl bg-primary px-5 py-8 text-center text-white sm:p-12">
+                <div
+                  aria-hidden
+                  className="pointer-events-none absolute inset-x-0 -inset-y-10 -z-10 text-white"
+                >
+                  <PixelField seed={19} />
+                </div>
+                <h2 className="relative font-heading text-2xl font-bold sm:text-3xl">
+                  24 tercihi tek tek elemek yerine, yapay zekâ kursun
                 </h2>
-                <p className="mx-auto mt-3 max-w-xl text-white/90">
-                  Birkaç adımda ilgi alanların ve şehir tercihine göre
-                  gerekçeli, dengeli bir tercih listesi kuralım — her satır için
-                  yerleşme riski analiziyle.
+                <p className="relative mx-auto mt-3 max-w-xl text-white/90">
+                  Tablodan elle eklemek her zaman serbest. Ama üç adımda ilgi
+                  alanlarını ve şehirlerini söylersen, yapay zekâ hayal, dengeli
+                  ve garanti dilimlerine dağıtılmış 24 tercihi — her satırı
+                  yerleşme riski ve gerekçesiyle — senin yerine dizer.
                 </p>
                 <Button
                   size="lg"
-                  onClick={() => acikDegisti(true)}
-                  className="mt-6 h-auto min-h-12 w-full cursor-pointer whitespace-normal bg-orange-500 px-4 py-3 text-white transition-colors duration-200 hover:bg-orange-600 sm:w-auto sm:px-8"
+                  onClick={sihirbaziBaslat}
+                  className="relative mt-6 h-auto min-h-12 w-full cursor-pointer whitespace-normal bg-orange-500 px-4 py-3 text-white transition-colors duration-200 hover:bg-orange-600 sm:w-auto sm:px-8"
                 >
-                  <Sparkles className="size-4" aria-hidden />
-                  Listemi oluştur
+                  AI listemi kur
+                  <ArrowRight className="size-4" aria-hidden />
                 </Button>
               </section>
             )}
@@ -450,12 +493,12 @@ export function SihirbazBolumu({
                 <p className="font-heading text-sm font-bold text-slate-900">
                   {girisBekliyor
                     ? "Seçimlerin kayıtlı — AI listen hazır bekliyor"
-                    : "3 adımda 24 tercihlik listen"}
+                    : "Tek tek ekleme, yapay zekâ kursun"}
                 </p>
                 <p className="text-xs text-slate-500">
                   {girisBekliyor
                     ? "Ücretsiz giriş yap, 5 deneme kredinle listen otomatik kurulsun."
-                    : "Sıralamana uygun bölümleri seç, yapay zekâ listeni kursun."}
+                    : "Üç adımda seçimlerini söyle; risk analizli, gerekçeli 24 tercih hazır."}
                 </p>
               </div>
               {girisBekliyor ? (
@@ -469,7 +512,7 @@ export function SihirbazBolumu({
               ) : (
                 <Button
                   size="sm"
-                  onClick={() => acikDegisti(true)}
+                  onClick={sihirbaziBaslat}
                   className="cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600"
                 >
                   Başla
@@ -506,7 +549,7 @@ export function SihirbazBolumu({
             sonSecimler ?? (bekleyen?.eslesir ? bekleyen.secimler : null)
           }
           sonButonEtiketi={
-            girisliMi ? "Listemi oluştur (3 kredi)" : "Giriş yap ve listeni gör"
+            girisliMi ? "AI listemi kur (3 kredi)" : "Giriş yap ve listeni gör"
           }
           onTamamla={ilerle}
         />

src/app/sonuc/sira-gerekli.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+// /sonuc?sira= yokken: kayıtlı profil varsa oraya taşı; yoksa kapıyı aç.
+// Sıra bilgisi localStorage'daki TercihProfili ile tüm uygulamada ortak.
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { ArrowLeft, Trophy } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { PagePixelDivider } from "@/components/pixel-decor";
+import { sonucHref } from "@/lib/sihirbaz";
+import {
+  sonucaGitIste,
+  useProfilKapisi,
+} from "@/components/manuel-liste/profil-kapisi-store";
+
+export function SiraGerekli() {
+  const router = useRouter();
+  const { profil, profilYuklendi } = useProfilKapisi();
+  const [yonleniyor, setYonleniyor] = useState(false);
+
+  useEffect(() => {
+    if (!profilYuklendi) return;
+    if (profil) {
+      setYonleniyor(true);
+      router.replace(sonucHref(profil));
+    }
+  }, [profil, profilYuklendi, router]);
+
+  if (!profilYuklendi || yonleniyor || profil) {
+    return (
+      <main className="mx-auto flex max-w-2xl flex-col items-center px-4 py-24 text-center">
+        <p className="text-sm text-slate-500">Sıralaman kontrol ediliyor…</p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="mx-auto flex max-w-2xl flex-col items-center px-4 py-24 text-center">
+      <h1 className="font-heading text-2xl font-bold">
+        Geçerli bir sıralama gerekli
+      </h1>
+      <p className="mt-3 text-slate-600">
+        Listeni kurabilmek için YKS başarı sıralamanı gir. Kaydettiğin sıra tüm
+        uygulamada kullanılır.
+      </p>
+      <PagePixelDivider seed={59} className="mx-auto mt-6" />
+      <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
+        <Button
+          type="button"
+          onClick={() => {
+            const { href } = sonucaGitIste();
+            if (href) router.push(href);
+          }}
+          className="cursor-pointer bg-orange-500 text-white hover:bg-orange-600"
+        >
+          <Trophy className="size-4" aria-hidden />
+          Sıralamamı gir
+        </Button>
+        <Button asChild variant="outline" className="cursor-pointer">
+          <Link href="/">
+            <ArrowLeft className="size-4" aria-hidden />
+            Ana sayfaya dön
+          </Link>
+        </Button>
+      </div>
+    </main>
+  );
+}

src/app/sonuc/sohbet-popup.tsx

@@ -8,19 +8,51 @@ import { useEffect, useState } from "react";
 import dynamic from "next/dynamic";
 import { MessageCircleMore, X } from "lucide-react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { Skeleton } from "@/components/ui/skeleton";
 import { ViewportPortal } from "@/components/viewport-portal";
 
+function SohbetSkeleton() {
+  return (
+    <div
+      aria-busy="true"
+      aria-live="polite"
+      className="flex h-full flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-2xl"
+    >
+      <div className="flex items-center justify-between border-b border-slate-100 px-4 py-3">
+        <Skeleton className="h-5 w-36" />
+        <Skeleton className="h-6 w-20 rounded-full" />
+      </div>
+      <div className="flex flex-1 flex-col items-center gap-4 px-4 py-10">
+        <Skeleton className="size-7 rounded-full" />
+        <Skeleton className="h-5 w-56 max-w-full" />
+        <div className="w-full max-w-md space-y-2">
+          <Skeleton className="mx-auto h-3.5 w-full" />
+          <Skeleton className="mx-auto h-3.5 w-4/5" />
+        </div>
+        <div className="flex max-w-lg flex-wrap justify-center gap-2">
+          {[112, 148, 96, 132].map((w, i) => (
+            <Skeleton
+              key={i}
+              className="h-7 rounded-full"
+              style={{ width: w }}
+            />
+          ))}
+        </div>
+      </div>
+      <div className="border-t border-slate-100 p-3">
+        <Skeleton className="h-24 w-full rounded-2xl" />
+      </div>
+    </div>
+  );
+}
+
 // Sohbet istemcisi (markdown zinciriyle birlikte) ağır; popup ilk açıldığında
 // yüklensin — /sonuc ilk yükünü şişirmesin.
 const SohbetClient = dynamic(
   () => import("@/app/listem/sohbet-client").then((m) => m.SohbetClient),
   {
     ssr: false,
-    loading: () => (
-      <div className="flex h-full items-center justify-center rounded-2xl border border-slate-200 bg-white text-sm text-slate-500 shadow-2xl">
-        Sohbet yükleniyor…
-      </div>
-    ),
+    loading: () => <SohbetSkeleton />,
   },
 );