fix: update badge styles and animations for consistency

Refined the styling of badge and eyebrow elements to ensure uniformity across the site, aligning them with the main section headers. Updated the `PixelMark` component to enhance its animation behavior, introducing new keyframes for smoother transitions. Adjusted CSS properties for better visual consistency and removed unnecessary uppercase text styling. Improved the `SectionEyebrow` component to reflect these changes.

src/components/pixel-decor.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useRef, type ReactNode } from "react";
+import { useMemo, useRef, type CSSProperties, type ReactNode } from "react";
 import { cn } from "@/lib/utils";
 import { usePixelHeat } from "@/components/use-pixel-heat";
 
@@ -229,23 +229,51 @@ function fixedPixel(x: number, y: number, opacity: number) {
   );
 }
 
-/** Eyebrow rozetlerinde kullanılan 2×2'lik minik piksel imzası. */
-export function PixelMark({ className }: { className?: string }) {
-  const svgRef = useRef<SVGSVGElement>(null);
-  usePixelHeat(svgRef, { radius: 24 });
+/** PixelMark pikseli: kendi kendine, sırası geldiğinde ısınıp sönen rect. */
+function markPixel(x: number, y: number, opacity: number, delay: number) {
+  return (
+    <rect
+      x={x + INSET}
+      y={y + INSET}
+      width={DOT}
+      height={DOT}
+      rx={2}
+      className="animate-pixel-isi motion-reduce:animate-none"
+      fill="currentColor"
+      fillOpacity={opacity}
+      style={
+        { "--px-op": opacity, animationDelay: `${delay}s` } as CSSProperties
+      }
+    />
+  );
+}
 
+/**
+ * Eyebrow rozetlerinde kullanılan 2×2'lik minik piksel imzası.
+ * Pikseller imleç fırçasına katılmak yerine saat yönünde sırayla
+ * ısınıp söner; ikisi aynı fill/fillOpacity'yi sürdüğü için çakışır.
+ */
+export function PixelMark({ className }: { className?: string }) {
   return (
     <svg
-      ref={svgRef}
       viewBox="0 0 20 20"
       aria-hidden="true"
       focusable="false"
       className={cn("size-3.5 shrink-0", className)}
     >
-      {fixedPixel(0, 0, 0.35)}
-      <rect x={11.3} y={1.3} width={7.4} height={7.4} rx={2} className="fill-orange-500" fillOpacity={0.85} />
-      {fixedPixel(0, 10, 0.6)}
-      {fixedPixel(10, 10, 0.18)}
+      {markPixel(0, 0, 0.35, 0)}
+      <rect
+        x={11.3}
+        y={1.3}
+        width={7.4}
+        height={7.4}
+        rx={2}
+        className="animate-pixel-isi-accent fill-orange-500 motion-reduce:animate-none"
+        fillOpacity={0.85}
+        style={{ animationDelay: "0.6s" }}
+      />
+      {markPixel(10, 10, 0.18, 1.2)}
+      {markPixel(0, 10, 0.6, 1.8)}
     </svg>
   );
 }
@@ -281,7 +309,7 @@ export function SectionEyebrow({
   return (
     <span
       className={cn(
-        "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3.5 py-1.5 text-xs font-semibold uppercase tracking-[0.12em] text-primary",
+        "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3.5 py-1.5 text-xs font-semibold text-primary",
         className,
       )}
     >