From 169080df9dc6f23b73a8ff81bd945d0b58e49433 Mon Sep 17 00:00:00 2001
From: bilalgursen <bilalgursen777@gmail.com>
Date: Thu, 24 Sep 2026 01:27:11 +0300
Subject: [PATCH] =?UTF-8?q?feat(ux):=20sihirbaz=20ad=C4=B1mlar=C4=B1=20adl?=
 =?UTF-8?q?and=C4=B1;=20Emil=20Kowalski=20ilkeleriyle=20hareket=20inceltme?=
 =?UTF-8?q?si?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Adım göstergesi: Alan · Şehir · Öncelik; dolum transform ile soldan,
  güçlü ease-out 300 ms; adım değişimi ekran okuyucuya duyurulur
- Çekmecede "Listen tamam" satırı @starting-style ile küçük giriş
  (scale 0.95 + opaklık); hareketi azalt'ta yalnız opaklık
- Dilim sekmesindeki kayan hapta sekme kaldırıldı (bounce 0, 0.35 sn)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../liste/components/liste-cekmecesi.tsx      |  4 +-
 .../liste/components/program-tablosu.tsx      |  2 +-
 .../sihirbaz/components/sihirbaz-adimlar.tsx  | 52 +++++++++++++------
 3 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/src/features/liste/components/liste-cekmecesi.tsx b/src/features/liste/components/liste-cekmecesi.tsx
index df77faf..4332389 100644
--- a/src/features/liste/components/liste-cekmecesi.tsx
+++ b/src/features/liste/components/liste-cekmecesi.tsx
@@ -150,7 +150,9 @@ export function ListeCekmecesi() {
           {/* Durum ekran okuyucuya da duyurulur (WCAG 4.1.3) */}
           <p role="status" className="mt-1 px-10 text-center text-sm text-slate-500">
             {liste.length === MANUEL_LISTE_MAX ? (
-              <span className="inline-flex items-center gap-1.5 font-semibold text-primary">
+              // Nadir, hak edilmiş an: küçük giriş (Emil: scale 0.95 + opaklık,
+              // güçlü ease-out, <300 ms). Hareketi azalt'ta yalnız opaklık.
+              <span className="inline-flex items-center gap-1.5 font-semibold text-primary transition-[opacity,transform] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] starting:scale-95 starting:opacity-0 motion-reduce:starting:scale-100">
                 <Check className="size-4" aria-hidden />
                 Listen tamam · {liste.length} / {MANUEL_LISTE_MAX}
               </span>
diff --git a/src/features/liste/components/program-tablosu.tsx b/src/features/liste/components/program-tablosu.tsx
index 3dc2fd0..d384bc2 100644
--- a/src/features/liste/components/program-tablosu.tsx
+++ b/src/features/liste/components/program-tablosu.tsx
@@ -215,7 +215,7 @@ export function ProgramTablosu({
                     transition={
                       hareketAzalt
                         ? { duration: 0 }
-                        : { type: "spring", duration: 0.4, bounce: 0.15 }
+                        : { type: "spring", duration: 0.35, bounce: 0 }
                     }
                     aria-hidden
                   />
diff --git a/src/features/sihirbaz/components/sihirbaz-adimlar.tsx b/src/features/sihirbaz/components/sihirbaz-adimlar.tsx
index 0880084..d1220cd 100644
--- a/src/features/sihirbaz/components/sihirbaz-adimlar.tsx
+++ b/src/features/sihirbaz/components/sihirbaz-adimlar.tsx
@@ -56,6 +56,8 @@ export function Cip({
   );
 }
 
+const ADIM_ADLARI = ["Alan", "Şehir", "Öncelik"] as const;
+
 // Haritada karşılığı olan iller (KKTC/yurtdışı kampüsler çip olarak kalır)
 const HARITA_ILLERI = new Set(cities.map((c) => normalizeIlAdi(c.name)));
 
@@ -237,22 +239,40 @@ export function SihirbazAdimlar({
 
   return (
     <div className="flex flex-col gap-5">
-      <div className="flex items-center gap-1.5">
-        {[0, 1, 2].map((i) => (
-          <span
-            key={i}
-            className={
-              i === adim
-                ? "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-[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"
-            }
-          />
-        ))}
-        <span className="ml-2 text-sm font-medium text-slate-500">
-          Adım {adim + 1}/3
-        </span>
+      {/* Adım göstergesi (DESIGN.md §10): üç parçalı çubuk + adların
+          kendisi; öğrenci nerede olduğunu ve ne kaldığını görür. Değişim
+          ekran okuyucuya duyurulur (WCAG 4.1.3). */}
+      <div>
+        <ol className="grid grid-cols-3 gap-2" aria-label="Sihirbaz adımları">
+          {ADIM_ADLARI.map((ad, i) => (
+            <li key={ad} className="flex flex-col gap-1.5">
+              {/* Dolum transform ile (yalnız transform/opaklık canlandırılır);
+                  soldan dolar, güçlü ease-out 300 ms. */}
+              <span className="h-1.5 overflow-hidden rounded-full bg-slate-200" aria-hidden>
+                <span
+                  className={`block h-full origin-left rounded-full bg-primary transition-transform duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none ${
+                    i <= adim ? "scale-x-100" : "scale-x-0"
+                  }`}
+                />
+              </span>
+              <span
+                className={`text-sm ${
+                  i === adim
+                    ? "font-semibold text-slate-900"
+                    : i < adim
+                      ? "font-medium text-slate-600"
+                      : "text-slate-400"
+                }`}
+                aria-current={i === adim ? "step" : undefined}
+              >
+                {ad}
+              </span>
+            </li>
+          ))}
+        </ol>
+        <p role="status" className="sr-only">
+          Adım {adim + 1} / 3: {ADIM_ADLARI[adim]}
+        </p>
       </div>
 
       <TransitionPanel