feat(ui): Arc kayan vurgulu seçim hapları ve sayı rulosu

- SecimHaplari: tema seçici (kapsül) ve puan türü çipleri (hero + CTA formu);
  seçili vurgu layoutId ile seçenekten seçeneğe kayar.
- SayiRulo: değişen sayılar (listem rozeti, çekmece ve durum satırı sayacı,
  kredi hapları, dilim tablosu sayacı, giriş yeniden gönder sayacı, kaydet
  bandı, üst şerit geri sayımı) rulo gibi döner; @number-flow/react kaldırıldı.
- DESIGN.md §4.21–4.22, components.json @uiarc kaydı.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

src/features/sihirbaz/components/hero-form.tsx

@@ -6,6 +6,7 @@ import { useRouter } from "next/navigation";
 import { ArrowRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { SecimHaplari } from "@/components/ui/secim-haplari";
 import {
   Dialog,
   DialogContent,
@@ -35,10 +36,11 @@ const PUAN_TURLERI_SECENEK = [
   { deger: "dil", etiket: "Dil" },
   { deger: "tyt", etiket: "TYT" },
 ] as const;
+type PuanTuru = (typeof PUAN_TURLERI_SECENEK)[number]["deger"];
 
 export function HeroForm() {
   const [siralama, setSiralama] = useState("");
-  const [tur, setTur] = useState<string>("say");
+  const [tur, setTur] = useState<PuanTuru>("say");
   const [sira, setSira] = useState<number | null>(null);
   const [facetler, setFacetler] = useState<SihirbazFacetleri | null>(null);
   const [yukleniyor, setYukleniyor] = useState(false);
@@ -140,28 +142,14 @@ export function HeroForm() {
     // max-w-xl: yatay dizilimde placeholder'ın tamamı inputa sığsın diye
     // (md'de buton geniş olduğundan inputa ~200px kalıyor, metin kesiliyordu).
     <div className="flex w-full max-w-xl flex-col items-center gap-3">
-      <div
-        role="radiogroup"
-        aria-label="Puan türü"
-        className="flex flex-wrap justify-center gap-1.5"
-      >
-        {PUAN_TURLERI_SECENEK.map((t) => (
-          <button
-            key={t.deger}
-            type="button"
-            role="radio"
-            aria-checked={tur === t.deger}
-            onClick={() => setTur(t.deger)}
-            className={
-              tur === t.deger
-                ? "cursor-pointer rounded-full border border-primary bg-primary px-3 py-1.5 text-xs font-medium text-white transition-colors duration-200"
-                : "cursor-pointer rounded-full border border-slate-200 bg-card px-3 py-1.5 text-xs text-slate-600 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50"
-            }
-          >
-            {t.etiket}
-          </button>
-        ))}
-      </div>
+      {/* Seçili vurgu çipten çipe kayar (Arc kayan vurgu, secim-haplari.tsx). */}
+      <SecimHaplari
+        ariaLabel="Puan türü"
+        secenekler={PUAN_TURLERI_SECENEK}
+        deger={tur}
+        onChange={setTur}
+        className="justify-center"
+      />
 
       <form
         onSubmit={handleSubmit}