Dev paneli Apple hareket diliyle yenilendi; animasyon ve UX düzeltmeleri

- 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>

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>
   );
 }