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ı

app/(site)/hizmetler/[slug]/page.tsx

@@ -1,15 +1,14 @@
-import Image from "next/image";
-import Link from "next/link";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
-import { ArrowLeft, ArrowRight, CheckCircle2 } from "lucide-react";
+import { CheckCircle2 } from "lucide-react";
 import { renderContent } from "@/lib/content-render";
-import { getServiceBySlug, listProjects } from "@/lib/data";
+import { getServiceBySlug, getSiteSettings, listProjects } from "@/lib/data";
 import { buildMetadata } from "@/lib/seo";
-import { Icon } from "@/components/icon";
 import { ProjectsGrid } from "@/components/projects-grid";
 import { SectionTitle } from "@/components/section-title";
 import { FaqList } from "@/components/faq-list";
+import { ServiceHero } from "@/components/service-hero";
+import { ServiceSidebar } from "@/components/service-sidebar";
 import type { FaqItem } from "@/lib/types";
 
 export async function generateMetadata({
@@ -50,8 +49,9 @@ export default async function ServiceDetailPage({
   const service = await getServiceBySlug(slug);
   if (!service) notFound();
 
-  const [relatedProjects] = await Promise.all([
+  const [relatedProjects, settings] = await Promise.all([
     listProjects({ serviceSlug: slug, limit: 6 }),
+    getSiteSettings(),
   ]);
 
   const faqItems = parseFaq(service.faq);
@@ -59,53 +59,9 @@ export default async function ServiceDetailPage({
 
   return (
     <>
-      <section className="relative overflow-hidden border-b border-[var(--border)]">
-        <div className="absolute inset-0 hero-grid opacity-50" aria-hidden />
-        <div className="relative mx-auto max-w-7xl px-6 py-20">
-          <Link
-            href="/hizmetler"
-            className="inline-flex items-center gap-1 text-sm text-[var(--muted)] hover:text-[var(--navy)]"
-          >
-            <ArrowLeft className="size-3.5" /> Tüm hizmetler
-          </Link>
+      <ServiceHero service={service} settings={settings} />
 
-          <div className="mt-6 grid items-start gap-10 md:grid-cols-[1fr_auto]">
-            <div>
-              <div className="flex size-14 items-center justify-center rounded-2xl bg-[var(--navy-50)] text-[var(--navy)]">
-                <Icon name={service.icon} className="size-7" />
-              </div>
-              <h1 className="mt-5 text-4xl font-bold tracking-tight text-[var(--navy)] sm:text-5xl">
-                {service.title}
-              </h1>
-              <p className="mt-4 max-w-2xl text-lg leading-relaxed text-[var(--muted)]">
-                {service.description}
-              </p>
-              <Link
-                href="/iletisim"
-                className="mt-8 inline-flex items-center gap-2 rounded-full bg-[var(--navy)] px-6 py-3 text-sm font-medium text-white transition hover:bg-[var(--navy-700)]"
-              >
-                Bu hizmet için teklif al
-                <ArrowRight className="size-4" />
-              </Link>
-            </div>
-
-            {service.hero_image && (
-              <div className="relative hidden aspect-square w-64 overflow-hidden rounded-2xl md:block lg:w-80">
-                <Image
-                  src={service.hero_image}
-                  alt={service.title}
-                  fill
-                  sizes="320px"
-                  className="object-cover"
-                  priority
-                />
-              </div>
-            )}
-          </div>
-        </div>
-      </section>
-
-      <div className="mx-auto grid max-w-7xl gap-12 px-6 py-16 lg:grid-cols-[2fr_1fr]">
+      <div className="mx-auto grid max-w-7xl gap-12 px-6 py-16 lg:grid-cols-[1.5fr_1fr]">
         <div>
           {service.features && service.features.length > 0 && (
             <section className="mb-12">
@@ -145,34 +101,7 @@ export default async function ServiceDetailPage({
           )}
         </div>
 
-        <aside className="space-y-4 lg:sticky lg:top-24 lg:self-start">
-          <div className="rounded-2xl border border-[var(--border)] bg-[var(--navy)] p-6 text-white">
-            <h3 className="text-base font-semibold">Bir proje mi var?</h3>
-            <p className="mt-2 text-sm text-white/70">
-              İhtiyacınızı anlatın, size en uygun çözümü hep birlikte planlayalım.
-            </p>
-            <Link
-              href="/iletisim"
-              className="mt-4 inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-medium text-[var(--navy)] transition hover:bg-[var(--sky-50)]"
-            >
-              Bize ulaşın
-              <ArrowRight className="size-3.5" />
-            </Link>
-          </div>
-
-          <div className="rounded-2xl border border-[var(--border)] bg-white p-6">
-            <h3 className="text-sm font-semibold uppercase tracking-wider text-[var(--muted)]">
-              Diğer hizmetler
-            </h3>
-            <Link
-              href="/hizmetler"
-              className="mt-3 inline-flex items-center gap-1 text-sm text-[var(--sky-600)] hover:text-[var(--navy)]"
-            >
-              Tümünü gör
-              <ArrowRight className="size-3.5" />
-            </Link>
-          </div>
-        </aside>
+        <ServiceSidebar currentSlug={slug} />
       </div>
 
       {relatedProjects.length > 0 && (