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