From cda0bb49bc97f0fb9f09db873ae1694a838eb436 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Thu, 21 May 2026 10:16:43 +0300
Subject: [PATCH] feat: update header component with new layout and responsive
 design for improved user experience and localization support

---
 resources/views/partials/header.blade.php | 56 +++++++++++++++++++++--
 1 file changed, 52 insertions(+), 4 deletions(-)

diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index 761091d..9e9ef82 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -46,13 +46,13 @@ $isHomepage = $currentRoute === 'homepage' || $currentPath === '/' || request()-
         <!-- Homepage Layout (Center Logo) -->
         <div class="navbar-collapse-wrapper flex flex-row items-center w-full">
           <div id="offcanvas-nav" class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
-            <div class="offcanvas-header lg:mx-auto xl:mx-auto order-0 lg:!order-1 lg:!px-[5rem] xl:!order-1 xl:!px-[5rem] p-[1.5rem] !flex items-center justify-between flex-row">
-              <a class="transition-none hidden lg:!flex xl:!flex" href="/" onclick="trackEvent('logo_click', {location: 'header_center'})">
+            <div class="offcanvas-header homepage-header-brand order-0 lg:!order-1 xl:!order-1 p-[1.5rem] !flex items-center justify-center flex-row gap-2">
+              <a class="transition-none hidden lg:!flex xl:!flex shrink-0" href="/" onclick="trackEvent('logo_click', {location: 'header_center'})">
                 <img class="logo-dark" src="{{ asset('assets/img/truncgil-yatay.svg') }}" alt="Truncgil" fetchpriority="high" decoding="async">
                 <img class="logo-light" src="{{ asset('assets/img/truncgil-yatay-dark.svg') }}" alt="Truncgil" fetchpriority="high" decoding="async">
               </a>
-              <div class="hidden lg:!flex xl:!flex" style="position: relative; left:5px">
-                @include("components.custom.language-selector")
+              <div class="hidden lg:!flex xl:!flex shrink-0 homepage-header-brand__language">
+                <x-custom.language-selector class="!ml-0" />
               </div>
             </div>
             <div class="w-full order-1 lg:!order-none lg:!flex xl:!order-none xl:!flex offcanvas-body">
@@ -197,6 +197,54 @@ $isHomepage = $currentRoute === 'homepage' || $currentPath === '/' || request()-
 .offcanvas .logo-dark { display: none !important; }
 .offcanvas .logo-light { display: block !important; }
 
+/* Anasayfa: logo + dil seçici viewport merkezinde (menü genişliğinden bağımsız) */
+@media (min-width: 992px) {
+    .navbar.center-logo .navbar-collapse-wrapper {
+        position: relative;
+    }
+
+    .navbar.center-logo .offcanvas-nav > .homepage-header-brand {
+        position: absolute;
+        left: 50%;
+        top: 0;
+        bottom: 0;
+        z-index: 5;
+        width: auto !important;
+        max-width: none;
+        margin: 0 !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        transform: translateX(-50%);
+        pointer-events: none;
+        justify-content: center !important;
+        gap: 0.5rem;
+    }
+
+    .navbar.center-logo .offcanvas-nav > .homepage-header-brand > * {
+        pointer-events: auto;
+    }
+
+    .navbar.center-logo .homepage-header-brand__language .navbar-other {
+        margin-left: 0 !important;
+    }
+
+    .navbar.center-logo .offcanvas-nav > .offcanvas-body:not(.order-4) {
+        flex: 1 1 0;
+        min-width: 0;
+        width: auto !important;
+    }
+
+    .navbar.center-logo .offcanvas-nav > .offcanvas-body.order-1 .navbar-nav,
+    .navbar.center-logo .offcanvas-nav > .offcanvas-body.order-1 {
+        justify-content: flex-end;
+    }
+
+    .navbar.center-logo .offcanvas-nav > .offcanvas-body.order-3 .navbar-nav,
+    .navbar.center-logo .offcanvas-nav > .offcanvas-body.order-3 {
+        justify-content: flex-start;
+    }
+}
+
 /* Smoother Offcanvas Menu Transition */
 .offcanvas {
     transition: transform 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0) !important;