From 40a1c8ef8e4895a9523a8324218eeae3a20ac835 Mon Sep 17 00:00:00 2001
From: bilalgursen <bilalgursen777@gmail.com>
Date: Sun, 26 Jul 2026 15:26:40 +0300
Subject: [PATCH] =?UTF-8?q?Dev=20paneli=20Apple=20hareket=20diliyle=20yeni?=
 =?UTF-8?q?lendi;=20animasyon=20ve=20UX=20d=C3=BCzeltmeleri?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Dev paneli: DEV çipinden layoutId morph ile büyüyüp küçülür (kritik sönümlü
  spring), yarı saydam malzeme (backdrop-blur + saturate), basışta anında
  scale geri bildirimi, Escape ile kapanış, reduced-motion/transparency desteği
- TypingAnimation ve TextLoop: prefers-reduced-motion'da sonsuz döngü durur,
  ilk metin sabit gösterilir
- kt-unblur: reduced-motion'da blur çözülmesi yerine kısa yumuşak belirme
- Sihirbaz: reduced-motion'da adım geçişinde height/x anında oturur;
  adım noktalarında transition-all yerine kapsamlı geçiş özellikleri
- Sihirbaz il adımındaki arama kutusu kaldırıldı; tüm iller program sayısına
  göre sıralı çip olarak listelenir
- /giris: spinner yerine kartın iskeletini gösteren route-level Skeleton

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 data/app.db                            | Bin 135168 -> 135168 bytes
 src/app/giris/loading.tsx              |  39 +++
 src/app/globals.css                    |  17 ++
 src/components/core/text-loop.tsx      |   7 +-
 src/components/dev/dev-panel.tsx       | 391 +++++++++++++++----------
 src/components/sihirbaz-adimlar.tsx    |  97 +++---
 src/components/ui/typing-animation.tsx |  11 +-
 7 files changed, 338 insertions(+), 224 deletions(-)
 create mode 100644 src/app/giris/loading.tsx

diff --git a/data/app.db b/data/app.db
index a72736c2fed11668c51ee574dd28d7feedda885c..997a8f54c3b8b317689167e59dd0b2dd0104591f 100644
GIT binary patch
delta 405
zcmZozz|pXPV}dl}_K7mijN2O%wk9xc=4Z6nEGY1gW4e$eqgr5-5C@kpi*Iyexi1S#
zRYYF0Q(Asms$XSjnt4@tMunGwZ=O$3QF%(CsZ&uwR=x>uYD#fdV78%AXh3p~muF~h
zNu_CJnOmZ_nSqgWSV(2bbVqqcrRfKx7^|kMN--+2{p`(3{n@+SSBmi{D-+*8pw+MV
zG*y^=83|d&0a7$QN{UfoySqN)ZhlolHbXSjfi>7O_E>urn)~IN`8heKxi}U%J4KcH
z`ehV*`<3`cre>D7nngO7SNet}1-d2{yXU2OdVBfjB!?CU6?m37heefmWqB4>E2ZWp
zX67haDNS$mV-(?2s?AFMwFBs#9uVGcU(I-hg;5#kBYu7rkYfqix81#;ac2Vnjhu#O

delta 374
zcmZozz|pXPV}dl}=7}=SjGG%1wk9xc=4TYzEGY1gW4e$eqndV+Wll+PN=jC~Y`AZF
zn3G?HiLs$ypi#a>aJpr%NmP`nOGKt$X0T~MMZ|PRc}At_2c#Hd`EwFWQ&RN}^^8mm
z42|?Gr)SDBDl?i-7nNc(VtaHwEA`R!?Y>fsM_HNpJ%Dz-;$u-^_GO$dFUcs$1GSI?
zED|NfsIc8#pK&+8Dk0k;8tT9r>=}Eky?m<NO*|Y^(gRXb9X*pmLjs%wEz`>kT?&JO
z^TX490)o7~Q+$&PbCNQ%l5+zxvx_{U+>#1&Q_9P{^76fW)2o$Ia}zUjl&qAdH~KM(
t@F~@1r9S=wbo&Vq-fmybc!g!VumR(1zR3y#swyD&60&l;dq3mO1^`B*cV7Si

diff --git a/src/app/giris/loading.tsx b/src/app/giris/loading.tsx
new file mode 100644
index 0000000..b1a2221
--- /dev/null
+++ b/src/app/giris/loading.tsx
@@ -0,0 +1,39 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+// /giris açılırken spinner yerine sayfanın kendi iskeleti: kart, başlık,
+// Google butonu, ayraç, e-posta alanı ve gönder butonu aynı yerde belirir —
+// içerik gelince zıplama olmaz.
+export default function GirisLoading() {
+  return (
+    <div className="flex min-h-screen flex-col bg-slate-50">
+      <main className="mx-auto flex w-full max-w-md flex-1 flex-col items-stretch justify-center px-4 py-16">
+        <div className="rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
+          {/* Başlık + alt metin */}
+          <Skeleton className="h-8 w-40" />
+          <Skeleton className="mt-3 h-4 w-full" />
+          <Skeleton className="mt-1.5 h-4 w-2/3" />
+
+          {/* Google ile devam et */}
+          <Skeleton className="mt-6 h-11 w-full rounded-lg" />
+
+          {/* "veya" ayracı */}
+          <div className="mt-4 flex items-center gap-3">
+            <Skeleton className="h-px flex-1" />
+            <Skeleton className="h-3 w-8" />
+            <Skeleton className="h-px flex-1" />
+          </div>
+
+          {/* E-posta alanı + gönder butonu */}
+          <Skeleton className="mt-4 h-11 w-full rounded-lg" />
+          <Skeleton className="mt-3 h-11 w-full rounded-lg" />
+        </div>
+
+        {/* Kart altındaki yasal metin */}
+        <div className="mt-6 flex flex-col items-center gap-1.5">
+          <Skeleton className="h-3 w-3/4" />
+          <Skeleton className="h-3 w-1/2" />
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index e1393af..d569ac0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -144,6 +144,23 @@
   animation: kt-unblur 0.9s ease-out both;
 }
 
+/* Hareket azaltılmışsa blur çözülmesi yerine kısa, yumuşak bir belirme:
+   kavramayı sağlayan geri bildirim kalır, gösterişli efekt düşer. */
+@media (prefers-reduced-motion: reduce) {
+  .kt-unblur {
+    animation: kt-unblur-sade 0.25s ease-out both;
+  }
+}
+
+@keyframes kt-unblur-sade {
+  from {
+    opacity: 0.6;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
diff --git a/src/components/core/text-loop.tsx b/src/components/core/text-loop.tsx
index 346d3ec..876d82a 100644
--- a/src/components/core/text-loop.tsx
+++ b/src/components/core/text-loop.tsx
@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils";
 import {
   AnimatePresence,
   motion,
+  useReducedMotion,
   type Transition,
   type Variants,
 } from "motion/react";
@@ -36,8 +37,12 @@ export function TextLoop({
 }: TextLoopProps) {
   const [currentIndex, setCurrentIndex] = useState(0);
   const items = Children.toArray(children);
+  // Sürekli dönen dekoratif metin: hareket azaltılsın diyen kullanıcıda
+  // döngü hiç başlamaz, ilk metin sabit kalır.
+  const azMotion = useReducedMotion();
 
   useEffect(() => {
+    if (azMotion) return;
     const intervalMs = interval * 1000;
     const timer = setInterval(() => {
       setCurrentIndex((current) => {
@@ -47,7 +52,7 @@ export function TextLoop({
       });
     }, intervalMs);
     return () => clearInterval(timer);
-  }, [items.length, interval, onIndexChange]);
+  }, [azMotion, items.length, interval, onIndexChange]);
 
   return (
     <div className={cn("relative inline-block whitespace-nowrap", className)}>
diff --git a/src/components/dev/dev-panel.tsx b/src/components/dev/dev-panel.tsx
index d01c2dd..0908530 100644
--- a/src/components/dev/dev-panel.tsx
+++ b/src/components/dev/dev-panel.tsx
@@ -4,10 +4,16 @@
 // (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.
+//
+// Hareket dili (Apple "Designing Fluid Interfaces"): panel DEV çipinden
+// büyür ve yine ona küçülür (paylaşılan layoutId ile mekânsal bağ), yay
+// kritik sönümlüdür (bounce 0) — açılış ortasında kapatılırsa mevcut
+// değerden geri döner. Yüzey opak kutu değil, yarı saydam malzemedir.
 
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { Loader2, Wrench, X } from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { toast } from "sonner";
 import { authClient } from "@/lib/auth-client";
 import {
@@ -35,12 +41,26 @@ const SAYFALAR: { ad: string; href: string }[] = [
   { ad: "404", href: "/boyle-bir-sayfa-yok" },
 ];
 
+// Apple değerleri: damping 1.0 (bounce 0), response ~0.35 sn.
+// Yay süreli değildir; hedef değişirse mevcut değer + hızdan devam eder.
+const YAY = { type: "spring", bounce: 0, duration: 0.35 } as const;
+
+// Basış anında tepki (pointer-down feedback) — bırakınca değil.
+const BASIS =
+  "active:scale-[0.97] transition-[transform,background-color,border-color,opacity] duration-150 ease-out";
+
+// Yarı saydam malzeme; şeffaflık azaltılsın diyen kullanıcıya opak yüzey.
+const MALZEME =
+  "border border-white/60 bg-white/80 shadow-2xl shadow-slate-900/20 backdrop-blur-2xl backdrop-saturate-150 " +
+  "[@media(prefers-reduced-transparency:reduce)]:bg-white [@media(prefers-reduced-transparency:reduce)]:backdrop-blur-none";
+
 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 azMotion = useReducedMotion();
 
   const yenile = useCallback(async () => {
     try {
@@ -55,6 +75,16 @@ export function DevPanel() {
     void yenile();
   }
 
+  // Yol bulma: panelden çıkış her an mümkün — Escape da kapatır.
+  useEffect(() => {
+    if (!acik) return;
+    const f = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setAcik(false);
+    };
+    window.addEventListener("keydown", f);
+    return () => window.removeEventListener("keydown", f);
+  }, [acik]);
+
   // 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>) {
@@ -99,175 +129,216 @@ export function DevPanel() {
     }
   }
 
-  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>
+  // Azaltılmış hareket: morph yerine kısa çapraz solma (yaysız, kaymasız).
+  const paylasilan = azMotion ? {} : { layoutId: "dev-panel" };
+  const gecis = azMotion ? { duration: 0.15 } : YAY;
 
-      <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"}
+  return (
+    <AnimatePresence initial={false}>
+      {!acik ? (
+        <motion.button
+          key="cip"
+          {...paylasilan}
+          type="button"
+          onClick={paneliAc}
+          title="Dev süperadmin paneli"
+          style={{ borderRadius: 18 }}
+          transition={gecis}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0, transition: { duration: 0.15, ease: "easeOut" } }}
+          className={`fixed bottom-20 left-4 z-50 inline-flex h-9 cursor-pointer items-center gap-1.5 px-3 text-xs font-bold tracking-wide text-white ${MALZEME} !bg-slate-900/85 print:hidden ${BASIS} hover:!bg-slate-800/85`}
+        >
+          <Wrench className="size-3.5 text-violet-300" aria-hidden />
+          DEV
+        </motion.button>
+      ) : (
+        <motion.div
+          key="panel"
+          {...paylasilan}
+          role="dialog"
+          aria-label="Dev süperadmin paneli"
+          style={{ borderRadius: 24, transformOrigin: "bottom left" }}
+          transition={gecis}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0, transition: { duration: 0.15, ease: "easeOut" } }}
+          className={`fixed bottom-20 left-4 z-50 flex max-h-[72vh] w-80 flex-col overflow-hidden ${MALZEME} print:hidden`}
+        >
+          {/* İçerik morph sırasında bozulmasın: yüzey oturduktan hemen
+              sonra belirir (malzeme önce, içerik sonra). */}
+          <motion.div
+            initial={azMotion ? false : { opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.2, delay: azMotion ? 0 : 0.12 }}
+            className="flex min-h-0 flex-col"
+          >
+            {/* Başlık: opak şerit değil, aynı malzemenin üstünde ince
+                bir kenar çizgisiyle ayrışan katman. */}
+            <div className="flex items-center justify-between border-b border-slate-900/5 px-4 py-3">
+              <p className="flex items-center gap-2 font-heading text-sm font-bold tracking-[-0.01em] text-slate-900">
+                <span className="flex size-6 items-center justify-center rounded-lg bg-violet-600 text-white shadow-sm">
+                  <Wrench className="size-3.5" aria-hidden />
+                </span>
+                Dev süperadmin
+                {mesgul ? (
+                  <Loader2
+                    className="size-3.5 animate-spin text-slate-400"
+                    aria-hidden
+                  />
+                ) : null}
               </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"
+                onClick={() => setAcik(false)}
+                className={`cursor-pointer rounded-full p-1.5 text-slate-500 hover:bg-slate-900/5 hover:text-slate-700 ${BASIS}`}
+                aria-label="Kapat"
               >
-                Çıkış yap
+                <X className="size-4" aria-hidden />
               </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>
+            <div className="flex flex-col gap-4 overflow-y-auto p-4 text-sm">
+              {/* Oturum */}
+              <section>
+                <p className="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+                  Oturum
+                </p>
+                {g ? (
+                  <div className="mt-2 rounded-xl border border-slate-900/5 bg-white/60 px-3 py-2 text-xs">
+                    <p className="font-semibold text-slate-800">{g.email}</p>
+                    <p className="mt-0.5 tabular-nums 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 font-medium 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-900/10 bg-white/70 px-2.5 text-xs outline-none transition-colors duration-150 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 ${BASIS}`}
+                  >
+                    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>
 
-        {/* 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>
+              {/* Senaryolar */}
+              <section>
+                <p className="text-[11px] 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-xl border border-slate-900/10 bg-white/60 px-2.5 py-2 text-left text-xs hover:border-violet-300 hover:bg-violet-50/80 disabled:cursor-default disabled:opacity-40 ${BASIS}`}
+                    >
+                      <span className="block font-semibold text-slate-800">
+                        {s.ad}
+                      </span>
+                      <span className="text-[10px] tabular-nums 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-xl border border-emerald-600/15 bg-emerald-50/80 px-2.5 py-2 text-left text-xs font-semibold text-emerald-800 hover:bg-emerald-100/80 disabled:cursor-default disabled:opacity-40 ${BASIS}`}
+                >
+                  Ö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-[11px] 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-900/10 bg-white/60 px-2.5 py-1 text-[11px] text-slate-700 hover:border-violet-300 hover:bg-violet-50/80 ${BASIS}`}
+                    >
+                      {s.ad}
+                    </a>
+                  ))}
+                </div>
+              </section>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
   );
 }
diff --git a/src/components/sihirbaz-adimlar.tsx b/src/components/sihirbaz-adimlar.tsx
index 0574bcc..bcec019 100644
--- a/src/components/sihirbaz-adimlar.tsx
+++ b/src/components/sihirbaz-adimlar.tsx
@@ -63,13 +63,13 @@ export function SihirbazAdimlar({
 }) {
   const [adim, setAdim] = useState(0);
   const [yon, setYon] = useState(1);
+  const [gecisBasladi, setGecisBasladi] = useState(false);
   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",
   );
@@ -98,9 +98,15 @@ export function SihirbazAdimlar({
 
   function adimaGit(yeniAdim: number) {
     setYon(yeniAdim > adim ? 1 : -1);
+    setGecisBasladi(true);
     setAdim(yeniAdim);
   }
 
+  const panelYuksekligi =
+    gecisBasladi && panelOlculeri.height > 0
+      ? panelOlculeri.height
+      : "auto";
+
   return (
     <div className="flex flex-col gap-5">
       <div className="flex items-center gap-1.5">
@@ -109,10 +115,10 @@ export function SihirbazAdimlar({
             key={i}
             className={
               i === adim
-                ? "h-1.5 w-6 rounded-full bg-primary transition-all"
+                ? "h-1.5 w-6 rounded-full bg-primary transition-[width,background-color] duration-200 ease-out"
                 : 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"
+                  ? "h-1.5 w-3 rounded-full bg-primary/50 transition-[width,background-color] duration-200 ease-out"
+                  : "h-1.5 w-1.5 rounded-full bg-slate-200 transition-[width,background-color] duration-200 ease-out"
             }
           />
         ))}
@@ -128,16 +134,14 @@ export function SihirbazAdimlar({
           enter: (gecisYonu: number) => ({
             x: hareketiAzalt ? 0 : gecisYonu > 0 ? "100%" : "-100%",
             opacity: 0,
-            height:
-              panelOlculeri.height > 0 ? panelOlculeri.height : "auto",
+            height: panelYuksekligi,
             position: "relative",
           }),
           center: {
             zIndex: 1,
             x: 0,
             opacity: 1,
-            height:
-              panelOlculeri.height > 0 ? panelOlculeri.height : "auto",
+            height: panelYuksekligi,
           },
           exit: (gecisYonu: number) => ({
             zIndex: 0,
@@ -151,7 +155,13 @@ export function SihirbazAdimlar({
         }}
         transition={
           hareketiAzalt
-            ? { opacity: { duration: 0.12 } }
+            ? // Azaltılmış harekette yalnızca kısa çapraz solma; height/x
+              // varsayılan spring'e düşüp oynamasın diye açıkça sıfırlanır.
+              {
+                opacity: { duration: 0.12 },
+                x: { duration: 0 },
+                height: { duration: 0 },
+              }
             : {
                 x: { type: "spring", stiffness: 300, damping: 30 },
                 height: { type: "spring", stiffness: 300, damping: 30 },
@@ -159,7 +169,7 @@ export function SihirbazAdimlar({
               }
         }
       >
-        <div ref={panelRef}>
+        <div ref={panelRef} className="px-px pb-2">
           <h3 className="font-heading text-lg font-bold">
             Hangi alanlara ilgi duyuyorsun?
           </h3>
@@ -187,56 +197,23 @@ export function SihirbazAdimlar({
             En fazla 5 il seçebilirsin. İstersen boş bırak, fark etmez.
           </p>
 
-          {/* 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>
-            );
-          })()}
+          {/* Çipler birincil seçim yolu (haritadaki küçük iller mobilde
+              güvenilir dokunma hedefi değil); tüm iller program sayısına
+              göre sıralı listelenir. */}
+          <div className="mt-4 flex flex-wrap gap-2">
+            {[...facetler.iller]
+              .sort((a, b) => b.adet - a.adet)
+              .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>
 
           {iller.length > 0 ? (
             <div className="mt-3 flex flex-wrap items-center gap-2">
diff --git a/src/components/ui/typing-animation.tsx b/src/components/ui/typing-animation.tsx
index 7819f71..8641732 100644
--- a/src/components/ui/typing-animation.tsx
+++ b/src/components/ui/typing-animation.tsx
@@ -12,6 +12,7 @@ import {
 import {
   motion,
   useInView,
+  useReducedMotion,
   type DOMMotionComponents,
   type HTMLMotionProps,
   type MotionProps,
@@ -84,6 +85,9 @@ export function TypingAnimation({
   const [currentWordIndex, setCurrentWordIndex] = useState(0)
   const [currentCharIndex, setCurrentCharIndex] = useState(0)
   const [phase, setPhase] = useState<"typing" | "pause" | "deleting">("typing")
+  // Sürekli yazıp silen döngü, hareket azaltılsın diyen kullanıcı için
+  // rahatsız edici: ilk metin tam ve sabit gösterilir, imleç yanmaz.
+  const azMotion = useReducedMotion()
   const elementRef = useRef<HTMLElement | null>(null)
   const isInView = useInView(elementRef as RefObject<Element>, {
     amount: 0.3,
@@ -117,7 +121,7 @@ export function TypingAnimation({
   useEffect(() => {
     let timeout: ReturnType<typeof setTimeout> | null = null
 
-    if (shouldStart && wordsToAnimate.length > 0) {
+    if (!azMotion && shouldStart && wordsToAnimate.length > 0) {
       const timeoutDelay =
         delay > 0 && displayedText === ""
           ? delay
@@ -175,6 +179,7 @@ export function TypingAnimation({
       }
     }
   }, [
+    azMotion,
     shouldStart,
     phase,
     currentCharIndex,
@@ -225,8 +230,8 @@ export function TypingAnimation({
       )}
       {...props}
     >
-      {displayedText}
-      {shouldShowCursor && (
+      {azMotion ? (wordsToAnimate[0] ?? "") : displayedText}
+      {shouldShowCursor && !azMotion && (
         <span
           className={cn("inline-block", blinkCursor && "animate-blink-cursor")}
         >