Refactor KatalogArama, SiteHeader, and UserNav components for improved layout and responsiveness. Adjusted flex properties and aria-labels for better accessibility and visual clarity across screen sizes. Enhanced styling to ensure consistent presentation of elements in mobile and desktop views.

src/components/site-header.tsx

@@ -8,11 +8,12 @@ import { getAllRehberler } from "@/lib/rehber";
 export function SiteHeader() {
   return (
     <header className="sticky top-4 z-50 mt-4 sm:top-6 sm:mt-6 print:hidden">
-      <div className="relative mx-auto flex h-12 max-w-6xl items-center justify-between gap-2 px-3 sm:h-16 sm:gap-3 sm:px-4">
+      {/* lg altında 2 satır: logo+UserNav / sıralama+ara. lg+: tek satır, ortada nav. */}
+      <div className="relative mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-x-2 gap-y-2 px-3 sm:gap-x-3 sm:px-4 lg:h-16 lg:flex-nowrap">
         <Link
           href="/"
           aria-label="KolayTercih"
-          className="group flex min-w-0 shrink items-center font-bricolage"
+          className="group order-1 flex min-w-0 shrink items-center font-bricolage"
         >
           <Image
             src="/kolay-tercih-mark.svg"
@@ -22,10 +23,11 @@ export function SiteHeader() {
             aria-hidden="true"
             className="size-8 shrink-0 sm:size-11"
           />
-          {/* Yazı yalnızca sm+: mobilde logo yeter, header sıkışmasın */}
-          <span className="hidden truncate sm:inline">
-            <span className="text-3xl font-light tracking-tighter">Kolay</span>
-            <span className="text-3xl font-semibold tracking-tighter">
+          <span className="truncate">
+            <span className="text-lg font-light tracking-tighter sm:text-3xl">
+              Kolay
+            </span>
+            <span className="text-lg font-semibold tracking-tighter sm:text-3xl">
               Tercih
             </span>
           </span>