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/meraklisina/page.tsx

@@ -1,35 +1,37 @@
 import type { Metadata } from "next";
-import Link from "next/link";
-import { ArrowRight } from "lucide-react";
 import { Parallax } from "@/components/parallax";
-import { PagePixelDivider } from "@/components/pixel-decor";
+import { PagePixelDivider, SectionEyebrow } from "@/components/pixel-decor";
+import { SiteFooter } from "@/components/site-footer";
 import { dilimAra, rankWindowFacets, type DilimKey } from "@/lib/db";
 import {
+  DemoKapanisCta,
   DemoKumanda,
   DilimSeridiCanli,
-  HuniCanli,
   SiralamaDemo,
   type DemoVeri,
 } from "./demo";
+import { HuniSemasi } from "./huni-semasi";
 
 export const metadata: Metadata = {
   title: "Meraklısına: KolayTercih nasıl çalışır?",
   alternates: { canonical: "/meraklisina" },
   description:
-    "Sıralamanı girdiğinde arka planda ne oluyor? Dilimler, risk renkleri ve sihirbazın adım adım daralan filtreleri — öğrenci diliyle, kendi sıralamanla deneyebileceğin canlı görsellerle.",
+    "Sıralamanı girdiğinde arka planda ne oluyor? Dilimler, risk renkleri ve sihirbazın adım adım daralan filtreleri — öğrenci diliyle, sıralamana göre hesaplanan canlı görsellerle.",
 };
 
 /**
  * Algoritmanın öğrenci diline çevrilmiş anlatımı. Teknik detay (SQL, çarpan
  * mutfağı) bilerek verilmez; amaç güven: veri gerçek, kurallar şeffaf.
- * Görseller canlıdır: kullanıcı sıralamasını girer, dilim şeridi ve filtre
- * hunisi o sıralamanın gerçek sayılarıyla güncellenir (bkz. demo.tsx).
+ * Dilim şeridi canlıdır: kullanıcının kayıtlı tercih profilindeki sıralama
+ * okunur, şerit o sıralamanın gerçek sayılarıyla güncellenir (bkz. demo.tsx);
+ * profil yoksa örnek sıralama gösterilir. Sihirbaz hunisi ise statik
+ * bir mermaid şemasıyla anlatılır (bkz. huni-semasi.tsx).
  * Diyagramlar ürünün risk renk dilini kullanır (yeşil/sarı/kırmızı) ve her
  * bölge metinle de etiketlenir — renk tek başına anlam taşımaz.
  */
 
-// Demo ilk açılışta bu sıralamayla dolu gelir; SSR'da gerçek veriyle render
-// edilir ki kullanıcı girmeden de sayfa anlamlı olsun.
+// Profili olmayan ziyaretçi bu örnek sıralamayı görür; SSR'da gerçek veriyle
+// render edilir ki profil olmadan da sayfa anlamlı olsun.
 const VARSAYILAN_SIRA = 100_000;
 
 export default function MeraklisinaPage() {
@@ -45,19 +47,18 @@ export default function MeraklisinaPage() {
   };
 
   return (
+    <>
     <main className="mx-auto w-full max-w-2xl px-4 py-16">
       <Parallax fromStart strength={10}>
-        <p className="text-sm font-semibold tracking-wide text-primary">
-          Meraklısına
-        </p>
-        <h1 className="mt-1 font-heading text-3xl font-bold">
+        <SectionEyebrow>Meraklısına</SectionEyebrow>
+        <h1 className="mt-3 font-heading text-3xl font-bold">
           Sıralamanı girince arka planda ne oluyor?
         </h1>
         <p className="mt-3 text-slate-600">
           Sihir yok, kara kutu yok: KolayTercih&apos;in önerdiği her satır resmî
           YÖK Atlas verisinden gelir ve hangi kurala göre önüne geldiği bellidir.
           Bu sayfa o kuralları öğrenci diliyle anlatır — üstelik görseller
-          canlı: kendi sıralamanı gir, sayılar sana göre değişsin.
+          canlı: sıralamanı girdiysen sayılar sana göre hesaplanır.
         </p>
       </Parallax>
 
@@ -139,7 +140,7 @@ export default function MeraklisinaPage() {
               4. Sihirbaz süzer, yapay zekâ kurar
             </h2>
             <p className="mt-2">
-              &ldquo;Listemi oluştur&rdquo; sihirbazındaki üç adım birbirinden
+              &ldquo;AI listemi kur&rdquo; sihirbazındaki üç adım birbirinden
               bağımsız değildir. İlk adımda yalnızca{" "}
               <strong>sıralamanla ulaşabildiğin</strong>{" "}
               alanlar listelenir; ikinci adımdaki iller, seçtiğin alanlardaki
@@ -148,11 +149,10 @@ export default function MeraklisinaPage() {
               Adımlar bitince elde kalan gerçek programlar bir{" "}
               <strong>aday havuzu</strong>{" "}
               olur ve yapay zekâya öyle gider: ona boş bir sayfa değil, bu havuz
-              verilir. Aşağıda kendin dene — her seçimin havuzu nasıl
-              daralttığını ve havuzun 24&apos;lük listeye nasıl dönüştüğünü huni
-              canlı gösterir.
+              verilir. Aşağıdaki şema akışın tamamını gösterir — havuz
+              24&apos;ün altına düşerse filtrelerin nasıl gevşetildiği de dahil.
             </p>
-            <HuniCanli />
+            <HuniSemasi />
           </section>
 
           <section>
@@ -170,20 +170,11 @@ export default function MeraklisinaPage() {
             </p>
           </section>
 
-          <div className="rounded-2xl border border-slate-200 bg-white p-6 text-center">
-            <p className="font-heading text-base font-bold text-slate-900">
-              Kuralları öğrendin — şimdi kendi sıralamanla dene.
-            </p>
-            <Link
-              href="/"
-              className="mt-3 inline-flex items-center gap-1.5 rounded-full bg-orange-500 px-5 py-2.5 text-sm font-medium text-white transition-colors duration-200 hover:bg-orange-600"
-            >
-              Sıralamanı gir
-              <ArrowRight className="size-4" aria-hidden />
-            </Link>
-          </div>
+          <DemoKapanisCta />
         </Parallax>
       </SiralamaDemo>
     </main>
+    <SiteFooter />
+    </>
   );
 }