From d5344443e970e1b638d5b34aeb3e28933c4cebc1 Mon Sep 17 00:00:00 2001
From: Ege Can Komur <egecankomur@gmail.com>
Date: Wed, 20 May 2026 18:56:21 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20pill=20modunda=20telefon=20link'i=20gizl?=
 =?UTF-8?q?e=20(s=C4=B1k=C4=B1=C5=9Fma=20sorunu)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Header pill modunda max-width 1100px'e iniyor. Nav + telefon + CTA
3 element sığmıyordu, telefon ile 'Ücretsiz Teklif' butonu üst üste
biniyordu.

Çözüm:
- Telefon link'ine data-pill-hide='true' attribute eklendi
- header-scroll.tsx scroll'da bu elementleri display:none yapıyor
- Pill kapanınca tekrar görünür hale geliyor
- whitespace-nowrap CTA butonuna eklendi (taşma engeli)
---
 components/header-scroll.tsx | 10 ++++++++++
 components/header.tsx        |  9 ++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/components/header-scroll.tsx b/components/header-scroll.tsx
index 32a903d..5082f7d 100644
--- a/components/header-scroll.tsx
+++ b/components/header-scroll.tsx
@@ -29,6 +29,10 @@ export function HeaderScrollEffect() {
       if (!mobile && pillWrap && header && navBar && wrap) {
         wrap.style.transform = "";
         wrap.style.opacity = "";
+        // Pill modu için data-pill-hide elementlerini gizle/göster
+        const hidables = document.querySelectorAll<HTMLElement>(
+          '[data-pill-hide="true"]',
+        );
         if (scrolled) {
           pillWrap.style.padding = "12px 16px 0";
           header.style.maxWidth = "1100px";
@@ -37,6 +41,9 @@ export function HeaderScrollEffect() {
           header.style.boxShadow = "0 8px 24px rgba(0,0,0,0.08)";
           navBar.style.height = "52px";
           navBar.style.padding = "0 1.25rem";
+          hidables.forEach((el) => {
+            el.style.display = "none";
+          });
         } else {
           pillWrap.style.padding = "";
           header.style.maxWidth = "";
@@ -45,6 +52,9 @@ export function HeaderScrollEffect() {
           header.style.boxShadow = "";
           navBar.style.height = "";
           navBar.style.padding = "";
+          hidables.forEach((el) => {
+            el.style.display = "";
+          });
         }
       }
 
diff --git a/components/header.tsx b/components/header.tsx
index 5b17c78..8b5f0e1 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -139,16 +139,19 @@ export async function Header() {
 
               {/* Col 3 — CTA */}
               <div className="flex items-center justify-end gap-2">
+                {/* Phone — pill modunda gizlenir (header-scroll.tsx) */}
                 <a
                   href={`tel:${phoneRaw}`}
-                  className="hidden lg:inline-flex h-9 items-center gap-1.5 rounded-lg px-3 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+                  data-pill-hide="true"
+                  className="hidden h-9 items-center gap-1.5 rounded-lg px-3 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 xl:inline-flex"
+                  aria-label={phone}
                 >
                   <Phone className="size-3.5" />
-                  <span className="hidden xl:inline">{phone}</span>
+                  <span>{phone}</span>
                 </a>
                 <Link
                   href="/iletisim"
-                  className="inline-flex h-9 items-center justify-center rounded-lg bg-[var(--navy)] px-4 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-[var(--navy-700)]"
+                  className="inline-flex h-9 items-center justify-center whitespace-nowrap rounded-lg bg-[var(--navy)] px-4 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-[var(--navy-700)]"
                 >
                   Ücretsiz Teklif
                 </Link>