diff --git a/src/features/sihirbaz/components/sihirbaz-adimlar.tsx b/src/features/sihirbaz/components/sihirbaz-adimlar.tsx
index 71ca9fd..0880084 100644
--- a/src/features/sihirbaz/components/sihirbaz-adimlar.tsx
+++ b/src/features/sihirbaz/components/sihirbaz-adimlar.tsx
@@ -28,13 +28,18 @@ export function Cip({
   onClick,
   children,
   kucuk = false,
+  className = "",
 }: {
   secili: boolean;
   onClick: () => void;
   children: React.ReactNode;
   kucuk?: boolean;
+  className?: string;
 }) {
-  const boyut = kucuk ? "px-2.5 py-1 text-xs" : "px-3.5 py-2 text-sm";
+  // Şişko ve sade (DESIGN.md §1.1): çip 44 px dokunma hedefi; il
+  // çipleri (kucuk) çok sayıda olduğu için 40 px. Hover §2.1 tek turuncu.
+  const boyut = kucuk ? "h-10 px-3.5 text-sm" : "h-11 px-4 text-sm";
+  const temel = `inline-flex cursor-pointer items-center rounded-full border font-semibold transition-[background-color,border-color,color,transform] duration-150 active:scale-[0.97] ${boyut} ${className}`;
   return (
     <button
       type="button"
@@ -42,8 +47,8 @@ export function Cip({
       aria-pressed={secili}
       className={
         secili
-          ? `cursor-pointer rounded-full border border-primary bg-primary font-medium text-white transition-colors duration-200 ${boyut}`
-          : `cursor-pointer rounded-full border border-slate-200 bg-white text-slate-700 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50 ${boyut}`
+          ? `${temel} border-primary bg-primary text-white`
+          : `${temel} border-slate-200 bg-white text-slate-700 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500`
       }
     >
       {children}
@@ -245,7 +250,7 @@ export function SihirbazAdimlar({
             }
           />
         ))}
-        <span className="ml-2 text-xs font-medium text-slate-400">
+        <span className="ml-2 text-sm font-medium text-slate-500">
           Adım {adim + 1}/3
         </span>
       </div>
@@ -293,7 +298,7 @@ export function SihirbazAdimlar({
         }
       >
         <div ref={panelRef} className="px-px pb-2">
-          <h3 className="font-heading text-lg font-bold">
+          <h3 className="font-heading text-xl font-bold text-slate-900">
             Hangi alanlara ilgi duyuyorsun?
           </h3>
           <p className="mt-1 text-sm text-slate-500">
@@ -307,20 +312,20 @@ export function SihirbazAdimlar({
                 onClick={() => listeDegistir(kategoriler, setKategoriler, k.ad)}
               >
                 {k.ad}
-                <span className="ml-1.5 text-xs opacity-70">{k.adet}</span>
+                <span className="ml-1.5 text-xs font-medium opacity-70">{k.adet}</span>
               </Cip>
             ))}
           </div>
         </div>
         <div ref={panelRef}>
-          <h3 className="font-heading text-lg font-bold">
+          <h3 className="font-heading text-xl font-bold text-slate-900">
             Nerede okumak istersin?
           </h3>
           <p className="mt-1 text-sm text-slate-500">
             En fazla 5 il seçebilirsin. İstersen boş bırak, fark etmez.
           </p>
 
-          <div className="mt-4 flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3.5 py-2 transition-colors focus-within:border-slate-300">
+          <div className="mt-4 flex h-11 items-center gap-2 rounded-full border border-slate-200 bg-white px-4 transition-colors focus-within:border-slate-300">
             <Search className="size-4 shrink-0 text-slate-400" aria-hidden />
             <input
               type="text"
@@ -329,14 +334,14 @@ export function SihirbazAdimlar({
               placeholder="İl ara..."
               aria-label="İl ara"
               autoComplete="off"
-              className="min-w-0 flex-1 bg-transparent text-sm text-slate-950 outline-none placeholder:text-slate-400"
+              className="min-w-0 flex-1 bg-transparent text-base text-slate-950 outline-none placeholder:text-slate-400"
             />
             {ilArama ? (
               <button
                 type="button"
                 onClick={() => setIlArama("")}
                 aria-label="Aramayı temizle"
-                className="flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700"
+                className="-mr-2 flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700"
               >
                 <X className="size-3.5" aria-hidden />
               </button>
@@ -350,7 +355,7 @@ export function SihirbazAdimlar({
               yalnızca görünümü daraltır, seçimleri etkilemez ve kırpmayı
               devre dışı bırakır. */}
           <div
-            className={`mt-3 flex max-h-56 flex-wrap gap-1.5 overflow-y-auto sm:max-h-none sm:overflow-visible ${
+            className={`mt-3 flex max-h-64 flex-wrap gap-2 overflow-y-auto sm:max-h-none sm:overflow-visible ${
               facetYukleniyor ? "animate-pulse opacity-60" : ""
             }`}
           >
@@ -362,14 +367,14 @@ export function SihirbazAdimlar({
                   onClick={() => listeDegistir(iller, setIller, i.il, 5)}
                 >
                   {trBaslikDuzeni(i.il)}
-                  <span className="ml-1 text-[10px] opacity-70">{i.adet}</span>
+                  <span className="ml-1.5 text-xs font-medium opacity-70">{i.adet}</span>
                 </Cip>
               ))}
             {ilListesiKirpik ? (
               <button
                 type="button"
                 onClick={() => setTumIllerAcik(true)}
-                className="cursor-pointer rounded-full border border-dashed border-slate-300 bg-white px-2.5 py-1 text-xs font-medium text-slate-500 transition-colors duration-200 hover:border-slate-400 hover:bg-slate-50 hover:text-slate-700"
+                className="inline-flex h-10 cursor-pointer items-center rounded-full border border-dashed border-slate-300 bg-white px-3.5 text-sm font-semibold text-slate-500 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.97]"
               >
                 +{gorunenTurkiyeIlleri.length - IL_ON_IZLEME} il daha
               </button>
@@ -381,7 +386,7 @@ export function SihirbazAdimlar({
               <button
                 type="button"
                 onClick={() => setTumIllerAcik(false)}
-                className="cursor-pointer rounded-full border border-dashed border-slate-300 bg-white px-2.5 py-1 text-xs font-medium text-slate-500 transition-colors duration-200 hover:border-slate-400 hover:bg-slate-50 hover:text-slate-700"
+                className="inline-flex h-10 cursor-pointer items-center rounded-full border border-dashed border-slate-300 bg-white px-3.5 text-sm font-semibold text-slate-500 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.97]"
               >
                 Daha az göster
               </button>
@@ -398,11 +403,11 @@ export function SihirbazAdimlar({
 
           {gorunenDisIller.length > 0 ? (
             <div className="mt-4">
-              <p className="mb-2 text-xs font-semibold tracking-wide text-slate-400 uppercase">
+              <p className="mb-2 text-sm font-semibold text-slate-700">
                 KKTC & Yurt Dışı
               </p>
               <div
-                className={`flex flex-wrap gap-1.5 ${
+                className={`flex flex-wrap gap-2 ${
                   facetYukleniyor ? "animate-pulse opacity-60" : ""
                 }`}
               >
@@ -414,7 +419,7 @@ export function SihirbazAdimlar({
                     onClick={() => listeDegistir(iller, setIller, i.il, 5)}
                   >
                     {trBaslikDuzeni(i.il)}
-                    <span className="ml-1 text-[10px] opacity-70">{i.adet}</span>
+                    <span className="ml-1.5 text-xs font-medium opacity-70">{i.adet}</span>
                   </Cip>
                 ))}
               </div>
@@ -423,7 +428,7 @@ export function SihirbazAdimlar({
 
           {iller.length > 0 ? (
             <div className="mt-3 flex flex-wrap items-center gap-2">
-              <span className="text-xs font-semibold text-slate-400">
+              <span className="text-sm font-semibold text-slate-700">
                 Seçtiklerin:
               </span>
               {iller.map((il) => (
@@ -431,10 +436,10 @@ export function SihirbazAdimlar({
                   key={il}
                   type="button"
                   onClick={() => listeDegistir(iller, setIller, il)}
-                  className="inline-flex cursor-pointer items-center gap-1 rounded-full bg-orange-500 px-3 py-1.5 text-xs font-medium text-white transition-colors duration-200 hover:bg-orange-600"
+                  className="inline-flex h-10 cursor-pointer items-center gap-1.5 rounded-full bg-primary px-3.5 text-sm font-semibold text-white transition-[background-color,transform] duration-150 hover:bg-primary/90 active:scale-[0.97]"
                 >
                   {trBaslikDuzeni(il)}
-                  <X className="size-3" aria-hidden />
+                  <X className="size-4" aria-hidden />
                 </button>
               ))}
             </div>
@@ -449,9 +454,9 @@ export function SihirbazAdimlar({
             />
           </div>
         </div>
-        <div ref={panelRef} className="space-y-5">
+        <div ref={panelRef} className="space-y-4">
           <div>
-            <h3 className="font-heading text-lg font-bold">
+            <h3 className="font-heading text-xl font-bold text-slate-900">
               Üniversite tipi & öncelikler
             </h3>
             <p className="mt-1 text-sm text-slate-500">
@@ -459,7 +464,7 @@ export function SihirbazAdimlar({
             </p>
           </div>
           <div>
-            <p className="mb-2 text-xs font-semibold tracking-wide text-slate-400 uppercase">
+            <p className="mb-2 text-sm font-semibold text-slate-700">
               Üniversite tipi
             </p>
             <div
@@ -478,7 +483,7 @@ export function SihirbazAdimlar({
                   }
                 >
                   {UNIVERSITE_TIPI_ETIKET[u.grup]}
-                  <span className="ml-1.5 text-xs opacity-70">{u.adet}</span>
+                  <span className="ml-1.5 text-xs font-medium opacity-70">{u.adet}</span>
                 </Cip>
               ))}
               <Cip
@@ -490,13 +495,16 @@ export function SihirbazAdimlar({
             </div>
           </div>
           <div>
-            <p className="mb-2 text-xs font-semibold tracking-wide text-slate-400 uppercase">
+            <p className="mb-2 text-sm font-semibold text-slate-700">
               Senin için önemli olan
             </p>
-            <div className="flex flex-wrap gap-2">
+            {/* Telefonda iki sütun, uzun ad iki satıra sarar: tek sütunda
+                yedi çip 44 px'le pencereyi 812 px'in dışına itiyordu. */}
+            <div className="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
               {ONCELIKLER.map((o) => (
                 <Cip
                   key={o}
+                  className="h-auto min-h-11 justify-center px-3 py-1.5 text-center leading-tight sm:h-11 sm:px-4 sm:py-0"
                   secili={oncelikler.includes(o)}
                   onClick={() => listeDegistir(oncelikler, setOncelikler, o)}
                 >
@@ -504,7 +512,7 @@ export function SihirbazAdimlar({
                 </Cip>
               ))}
             </div>
-            <p className="mt-2 text-xs text-slate-500">
+            <p className="mt-2 text-sm text-slate-500">
               Öncelikler yapay zekânın gerekçelerine ve program seçimine yön
               verir; listeyi daraltmaz.
             </p>
@@ -512,13 +520,13 @@ export function SihirbazAdimlar({
         </div>
       </TransitionPanel>
 
-      <div className="flex items-center justify-between border-t border-slate-100 pt-4">
+      <div className="flex items-center justify-between gap-2 border-t border-slate-100 pt-4">
         <Button
           type="button"
           variant="ghost"
           onClick={() => adimaGit(adim - 1)}
           disabled={adim === 0}
-          className={adim === 0 ? "invisible" : "cursor-pointer"}
+          className={adim === 0 ? "invisible" : "h-11 cursor-pointer px-3"}
         >
           <ArrowLeft className="size-4" aria-hidden />
           Geri
@@ -528,7 +536,7 @@ export function SihirbazAdimlar({
             type="button"
             onClick={() => adimaGit(adim + 1)}
             disabled={!adimGecerli}
-            className="cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600"
+            className="h-11 cursor-pointer bg-orange-500 px-5 text-white transition-[background-color,transform] duration-200 hover:bg-orange-600 active:scale-[0.97]"
           >
             Devam
             <ArrowRight className="size-4" aria-hidden />
@@ -546,7 +554,7 @@ export function SihirbazAdimlar({
               onTamamla({ kategoriler, iller, universiteTipi, oncelikler });
             }}
             disabled={kategoriler.length === 0}
-            className="cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600"
+            className="h-11 cursor-pointer bg-orange-500 px-5 text-white transition-[background-color,transform] duration-200 hover:bg-orange-600 active:scale-[0.97]"
           >
             {sonButonEtiketi}
             <ArrowRight className="size-4" aria-hidden />