fix: pill modunda telefon link'i gizle (sıkışma sorunu)

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

@@ -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 = "";
+          });
         }
       }
 

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>