feat: pill telefon → Ara butonu + hizmet detay zengin sidebar + unique hero

1) Header pill mode:
   - Pill aktifken telefon link gizlenir
   - Yerine kompakt 'Ara' butonu görünür (data-pill-show='true')
   - header-scroll.tsx hem hide hem show class'larını yönetiyor

2) Hizmet detay sayfası — yeni unique hero (ServiceHero component):
   - Gradient gradient icon (sky → purple, glow ile)
   - Profesyonel hizmet badge'i
   - Gradient text başlık
   - 4 'quick trust' satırı (teslim, destek, ücretsiz taslak, yerel)
   - 3 CTA: Teklif al (navy) / WhatsApp (yeşil) / Telefon ara
   - Sağda: hero_image varsa görsel + 'Şimdi başla' floating badge
   - Yoksa: dekoratif dark card + animasyonlu nokta deseni + glow +
     floating '100% Memnuniyet' ve '150+ Proje' kartları

3) Hizmet detay sayfası — sidebar (ServiceSidebar component):
   - QuickLeadForm (ad + telefon)
   - Gradient CTA card (telefon + WhatsApp butonları)
   - 'Risk almazsınız' garanti mini card
   - Diğer hizmetler tam listesi (icon + isim, hover'da gradient)
   - Site analizi lead magnet kartı

   Önceki versiyonda sadece 1 boş CTA + 1 boş diğer hizmetler vardı —
   artık doluyu doluya sidebar.

4) Layout: lg:grid-cols-[2fr_1fr] → lg:grid-cols-[1.5fr_1fr]
   - Sidebar daha geniş, içerik orantılı dağıldı

components/header.tsx

@@ -139,7 +139,7 @@ export async function Header() {
 
               {/* Col 3 — CTA */}
               <div className="flex items-center justify-end gap-2">
-                {/* Phone — pill modunda gizlenir (header-scroll.tsx) */}
+                {/* Phone — full mode (XL) */}
                 <a
                   href={`tel:${phoneRaw}`}
                   data-pill-hide="true"
@@ -149,6 +149,17 @@ export async function Header() {
                   <Phone className="size-3.5" />
                   <span>{phone}</span>
                 </a>
+                {/* "Ara" — pill mode'da görünür, kompakt */}
+                <a
+                  href={`tel:${phoneRaw}`}
+                  data-pill-show="true"
+                  className="hidden h-9 items-center gap-1.5 rounded-lg border border-gray-200 px-3 text-sm font-medium text-gray-700 transition-colors hover:border-[var(--navy)] hover:text-[var(--navy)]"
+                  aria-label={`${phone} - Ara`}
+                  style={{ display: "none" }}
+                >
+                  <Phone className="size-3.5" />
+                  <span>Ara</span>
+                </a>
                 <Link
                   href="/iletisim"
                   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)]"