Update src/App.scss

src/App.scss

@@ -9,19 +9,19 @@
 :root {
     --radius: 0.625rem; /* 10px */
     --radius-md: 0.5rem; /* 8px */
-    --background: oklch(1 0 0); /* سفید در حالت روشن */
-    --foreground: oklch(0.145 0 0); /* تقریبا مشکی در حالت روشن */
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
     --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.145 0 0);
-    --border: oklch(0.922 0 0); /* خاکستری خیلی روشن */
+    --border: oklch(0.922 0 0);
 }
 
 .dark {
-    --background: oklch(0.145 0 0); /* تقریبا مشکی در حالت تیره */
-    --foreground: oklch(0.985 0 0); /* سفید در حالت تیره */
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
     --popover: oklch(0.205 0 0);
     --popover-foreground: oklch(0.985 0 0);
-    --border: oklch(1 0 0 / 10%); /* خاکستری خیلی تیره با شفافیت */
+    --border: oklch(1 0 0 / 10%);
 }
 
 // 3. Apply base styles
@@ -129,7 +129,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: white; /* برای سفید شدن آدمک اگر از currentColor استفاده می‌کند */
+    color: white;
     & > .z-10 > svg {
         width: 100%;
         height: 100%;
@@ -220,23 +220,34 @@
     border-radius: 9999px; display: flex; align-items: center; justify-content: center;
     box-shadow: 0 5px 10px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08); cursor: pointer;
     transform-origin: center; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
-    &:hover { transform: scale(1.12) rotate(-6deg); box-shadow: 0 7px 15px rgba(0,0,0,0.18), 0 3px 6px rgba(0,0,0,0.12); }
-    &:active { transform: scale(1.03) rotate(0deg); }
-    svg { width: 22px; height: 22px; stroke: theme('colors.custom-foreground'); transition: transform 0.3s ease-in-out; }
-    &:hover svg { transform: rotate(360deg); }
+
+    // *** MODIFIED: حذف چرخش در هاور و اکتیو ***
+    &:hover {
+        transform: scale(1.12); /* فقط بزرگ شدن در هاور */
+        box-shadow: 0 7px 15px rgba(0,0,0,0.18), 0 3px 6px rgba(0,0,0,0.12);
+    }
+    &:active {
+        transform: scale(1.03); /* فقط کمی بزرگ شدن در کلیک، بدون چرخش */
+    }
+    svg {
+        width: 22px; height: 22px;
+        stroke: theme('colors.custom-foreground');
+        transition: transform 0.3s ease-in-out;
+    }
+    &:hover svg {
+        // transform: rotate(360deg); // حذف چرخش آیکون داخلی هم اگر نمی‌خواهید
+    }
 }
 
-/* Keyframes for popover - استفاده مستقیم از خصوصیات انیمیشن */
-/* این Keyframe ها باید در tailwind.config.js در بخش theme.extend.keyframes تعریف شده باشند */
-/* و در اینجا فقط نام آنها استفاده می‌شود. */
+/* Keyframes for popover */
 .animate-popover-open-top-center {
-    animation-name: popover-drop-in; /* نام keyframe از tailwind.config.js */
+    animation-name: popover-drop-in;
     animation-duration: 0.4s;
     animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
     animation-fill-mode: forwards;
 }
 .animate-popover-close-top-center {
-    animation-name: popover-lift-out; /* نام keyframe از tailwind.config.js */
+    animation-name: popover-lift-out;
     animation-duration: 0.3s;
     animation-timing-function: ease-in;
     animation-fill-mode: forwards;