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-scroll.tsx

@@ -29,10 +29,13 @@ 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
+        // Pill mode toggle: data-pill-hide gizlenir, data-pill-show görünür
         const hidables = document.querySelectorAll<HTMLElement>(
           '[data-pill-hide="true"]',
         );
+        const showables = document.querySelectorAll<HTMLElement>(
+          '[data-pill-show="true"]',
+        );
         if (scrolled) {
           pillWrap.style.padding = "12px 16px 0";
           header.style.maxWidth = "1100px";
@@ -44,6 +47,9 @@ export function HeaderScrollEffect() {
           hidables.forEach((el) => {
             el.style.display = "none";
           });
+          showables.forEach((el) => {
+            el.style.display = "inline-flex";
+          });
         } else {
           pillWrap.style.padding = "";
           header.style.maxWidth = "";
@@ -55,6 +61,9 @@ export function HeaderScrollEffect() {
           hidables.forEach((el) => {
             el.style.display = "";
           });
+          showables.forEach((el) => {
+            el.style.display = "none";
+          });
         }
       }
 

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)]"

components/service-hero.tsx

@@ -0,0 +1,209 @@
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowLeft, ArrowRight, MessageCircle, Phone, Sparkles, CheckCircle2 } from "lucide-react";
+import { Icon } from "@/components/icon";
+import type { ServiceRow, SiteSettingsRow } from "@/lib/types";
+import { siteConfig } from "@/lib/site-config";
+
+const QUICK_TRUST = [
+  "2-3 hafta teslim",
+  "1 yıl ücretsiz destek",
+  "İlk taslak ücretsiz",
+  "Yerel ekip — Kocaeli",
+];
+
+export function ServiceHero({
+  service,
+  settings,
+}: {
+  service: ServiceRow;
+  settings?: SiteSettingsRow | null;
+}) {
+  const phoneRaw = settings?.contact_phone_raw ?? siteConfig.contact.phoneRaw;
+  const phone = settings?.contact_phone ?? siteConfig.contact.phone;
+  const wa = phoneRaw.replace(/[^\d]/g, "");
+  const waMessage = settings?.whatsapp_message ?? `Merhaba, ${service.title} hizmeti hakkında bilgi almak istiyorum.`;
+  const waHref = `https://wa.me/${wa}?text=${encodeURIComponent(waMessage)}`;
+
+  return (
+    <section className="relative overflow-hidden border-b border-[var(--border)] bg-gradient-to-br from-[var(--navy-50)]/60 via-white to-[var(--sky-50)]/40">
+      {/* Subtle grid + glow */}
+      <div className="absolute inset-0 hero-grid opacity-50" aria-hidden />
+      <div
+        className="absolute -right-32 top-1/2 size-[520px] -translate-y-1/2 rounded-full bg-gradient-to-br from-[var(--sky)]/15 to-transparent blur-3xl"
+        aria-hidden
+      />
+
+      <div className="relative mx-auto max-w-7xl px-6 py-16 lg: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>
+
+        <div className="mt-8 grid items-start gap-12 lg:grid-cols-[1.3fr_1fr]">
+          {/* Left — content */}
+          <div>
+            <div className="flex items-center gap-3">
+              <div className="relative">
+                <div
+                  className="absolute inset-0 -z-10 rounded-2xl bg-gradient-to-br from-[var(--sky)] to-purple-500 blur-md opacity-50"
+                  aria-hidden
+                />
+                <div className="flex size-16 items-center justify-center rounded-2xl bg-gradient-to-br from-[var(--sky)] to-purple-500 text-white shadow-lg">
+                  <Icon name={service.icon} className="size-8" />
+                </div>
+              </div>
+              <span className="inline-flex items-center gap-2 rounded-full border border-[var(--sky)]/30 bg-white px-3 py-1 text-xs font-medium text-[var(--sky-600)]">
+                <Sparkles className="size-3.5" />
+                Profesyonel hizmet
+              </span>
+            </div>
+
+            <h1 className="mt-6 text-4xl font-extrabold leading-[1.1] tracking-tight text-[var(--navy)] sm:text-5xl lg:text-6xl">
+              <span className="gradient-text">{service.title}</span>
+            </h1>
+            <p className="mt-5 max-w-xl text-lg leading-relaxed text-[var(--muted)]">
+              {service.description}
+            </p>
+
+            {/* Quick trust strip */}
+            <ul className="mt-8 grid max-w-xl grid-cols-2 gap-2">
+              {QUICK_TRUST.map((it) => (
+                <li
+                  key={it}
+                  className="flex items-center gap-2 text-sm text-[var(--foreground)]"
+                >
+                  <CheckCircle2 className="size-4 shrink-0 text-[var(--sky-600)]" />
+                  {it}
+                </li>
+              ))}
+            </ul>
+
+            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
+              <Link
+                href="/iletisim"
+                className="inline-flex items-center justify-center gap-2 rounded-xl bg-[var(--navy)] px-6 py-3.5 text-sm font-semibold text-white shadow-lg shadow-[var(--navy)]/20 transition hover:-translate-y-0.5 hover:bg-[var(--navy-700)]"
+              >
+                Ücretsiz teklif al
+                <ArrowRight className="size-4" />
+              </Link>
+              <a
+                href={waHref}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center justify-center gap-2 rounded-xl bg-[#25d366] px-6 py-3.5 text-sm font-semibold text-white shadow-lg shadow-[#25d366]/20 transition hover:-translate-y-0.5 hover:bg-[#1ebe5d]"
+              >
+                <MessageCircle className="size-4" />
+                WhatsApp'tan yaz
+              </a>
+              <a
+                href={`tel:${phoneRaw}`}
+                className="inline-flex items-center justify-center gap-2 rounded-xl border border-[var(--border)] bg-white px-6 py-3.5 text-sm font-semibold text-[var(--navy)] transition hover:border-[var(--navy)]"
+              >
+                <Phone className="size-4" />
+                {phone}
+              </a>
+            </div>
+          </div>
+
+          {/* Right — hero card */}
+          <div className="relative">
+            {service.hero_image ? (
+              <div className="relative aspect-[4/5] overflow-hidden rounded-3xl shadow-2xl shadow-[var(--navy)]/10">
+                <Image
+                  src={service.hero_image}
+                  alt={service.title}
+                  fill
+                  sizes="(min-width: 1024px) 480px, 100vw"
+                  className="object-cover"
+                  priority
+                />
+                {/* Floating badge */}
+                <div className="absolute bottom-4 left-4 right-4 rounded-xl bg-white/95 p-4 backdrop-blur shadow-lg">
+                  <p className="text-xs font-semibold uppercase tracking-wider text-[var(--sky-600)]">
+                    Şimdi başla
+                  </p>
+                  <p className="mt-1 text-sm font-bold text-[var(--navy)]">
+                    İlk tasarım taslağı ücretsiz
+                  </p>
+                </div>
+              </div>
+            ) : (
+              <DecorativeServiceCard service={service} />
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function DecorativeServiceCard({ service }: { service: ServiceRow }) {
+  return (
+    <div className="relative">
+      {/* Outer gradient frame */}
+      <div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-[var(--navy)] via-[var(--sky-600)] to-[var(--sky)] p-px shadow-2xl shadow-[var(--navy)]/20">
+        <div className="relative rounded-3xl bg-[#0f172a] p-8">
+          {/* Animated dots */}
+          <div
+            className="absolute inset-0 opacity-20"
+            style={{
+              backgroundImage:
+                "radial-gradient(circle at 1px 1px, white 1px, transparent 0)",
+              backgroundSize: "24px 24px",
+            }}
+            aria-hidden
+          />
+
+          {/* Glow */}
+          <div className="absolute -right-20 -top-20 size-64 rounded-full bg-[var(--sky)]/30 blur-3xl" aria-hidden />
+
+          {/* Card content */}
+          <div className="relative">
+            <div className="flex size-20 items-center justify-center rounded-2xl bg-white/10 backdrop-blur ring-1 ring-white/20">
+              <Icon name={service.icon} className="size-10 text-[var(--sky)]" />
+            </div>
+
+            <div className="mt-8 space-y-2 text-white">
+              <p className="text-[11px] font-mono uppercase tracking-[0.2em] text-[var(--sky)]">
+                kovak.yazilim
+              </p>
+              <p className="text-2xl font-bold leading-tight">
+                {service.title}
+              </p>
+              <p className="text-sm leading-relaxed text-white/60">
+                Sektörünüze özel, profesyonel çözüm.
+              </p>
+            </div>
+
+            {/* Bottom badges */}
+            <div className="mt-8 flex flex-wrap gap-2">
+              <span className="rounded-full bg-white/10 px-3 py-1 text-[10px] font-medium text-white/80 ring-1 ring-white/10">
+                ⚡ Hızlı
+              </span>
+              <span className="rounded-full bg-white/10 px-3 py-1 text-[10px] font-medium text-white/80 ring-1 ring-white/10">
+                🛡️ Garantili
+              </span>
+              <span className="rounded-full bg-white/10 px-3 py-1 text-[10px] font-medium text-white/80 ring-1 ring-white/10">
+                📞 7/24 Destek
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Floating accent */}
+      <div className="absolute -right-4 -top-4 rounded-2xl bg-white p-4 shadow-xl ring-1 ring-[var(--border)]">
+        <p className="text-xs font-medium text-[var(--muted)]">Memnuniyet</p>
+        <p className="text-2xl font-bold text-[var(--navy)]">100%</p>
+      </div>
+
+      <div className="absolute -bottom-4 -left-4 rounded-2xl bg-white p-4 shadow-xl ring-1 ring-[var(--border)]">
+        <p className="text-xs font-medium text-[var(--muted)]">Proje</p>
+        <p className="text-2xl font-bold text-[var(--navy)]">150+</p>
+      </div>
+    </div>
+  );
+}

components/service-sidebar.tsx

@@ -0,0 +1,146 @@
+import Link from "next/link";
+import { ArrowRight, MessageCircle, Phone, ShieldCheck } from "lucide-react";
+import { Icon } from "@/components/icon";
+import {
+  getSiteSettings,
+  listServices,
+} from "@/lib/data";
+import { siteConfig } from "@/lib/site-config";
+import { QuickLeadForm } from "@/components/quick-lead-form";
+
+export async function ServiceSidebar({
+  currentSlug,
+}: {
+  currentSlug: string;
+}) {
+  const [settings, services] = await Promise.all([
+    getSiteSettings(),
+    listServices(),
+  ]);
+
+  const otherServices = services.filter((s) => s.slug !== currentSlug).slice(0, 6);
+
+  const phoneRaw = settings?.contact_phone_raw ?? siteConfig.contact.phoneRaw;
+  const phone = settings?.contact_phone ?? siteConfig.contact.phone;
+  const wa = phoneRaw.replace(/[^\d]/g, "");
+  const waMessage = settings?.whatsapp_message ?? "";
+  const waHref = `https://wa.me/${wa}${
+    waMessage ? `?text=${encodeURIComponent(waMessage)}` : ""
+  }`;
+
+  return (
+    <aside className="space-y-5 lg:sticky lg:top-24 lg:self-start">
+      {/* Quick lead form */}
+      <QuickLeadForm
+        title="Bu hizmet için teklif"
+        description="Adınızı ve telefonunuzu bırakın, 24 saat içinde sizi arayalım."
+        buttonLabel="Beni arayın"
+      />
+
+      {/* CTA card */}
+      <div className="overflow-hidden rounded-2xl border border-[var(--border)] bg-gradient-to-br from-[var(--navy)] to-[var(--sky-600)] p-6 text-white">
+        <h3 className="text-base font-bold">Hızlı iletişim</h3>
+        <p className="mt-1 text-sm text-white/80">
+          Telefon veya WhatsApp ile dakikalar içinde konuşalım.
+        </p>
+        <div className="mt-4 space-y-2">
+          <a
+            href={`tel:${phoneRaw}`}
+            className="flex items-center justify-center gap-2 rounded-xl bg-white px-4 py-2.5 text-sm font-semibold text-[var(--navy)] transition hover:bg-blue-50"
+          >
+            <Phone className="size-3.5" />
+            {phone}
+          </a>
+          <a
+            href={waHref}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center justify-center gap-2 rounded-xl bg-[#25d366] px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-[#1ebe5d]"
+          >
+            <MessageCircle className="size-3.5" />
+            WhatsApp'tan yaz
+          </a>
+        </div>
+      </div>
+
+      {/* Guarantee mini */}
+      <div className="rounded-2xl border border-[var(--sky)]/30 bg-[var(--sky-50)]/50 p-5">
+        <div className="flex items-center gap-2">
+          <ShieldCheck className="size-5 text-[var(--sky-600)]" />
+          <h3 className="text-sm font-bold text-[var(--navy)]">
+            Risk almazsınız
+          </h3>
+        </div>
+        <ul className="mt-3 space-y-1.5 text-xs text-[var(--foreground)]">
+          <li className="flex gap-1.5">
+            <span className="text-[var(--sky-600)]">✓</span>
+            İlk tasarım taslağı ücretsiz
+          </li>
+          <li className="flex gap-1.5">
+            <span className="text-[var(--sky-600)]">✓</span>
+            1 yıl ücretsiz teknik destek
+          </li>
+          <li className="flex gap-1.5">
+            <span className="text-[var(--sky-600)]">✓</span>
+            Kaynak kodlar size ait
+          </li>
+        </ul>
+      </div>
+
+      {/* Diğer hizmetler — full list */}
+      {otherServices.length > 0 && (
+        <div className="rounded-2xl border border-[var(--border)] bg-white p-5">
+          <div className="flex items-center justify-between">
+            <h3 className="text-sm font-bold uppercase tracking-wider text-[var(--navy)]">
+              Diğer hizmetler
+            </h3>
+            <Link
+              href="/hizmetler"
+              className="text-xs text-[var(--sky-600)] hover:text-[var(--navy)]"
+            >
+              Tümü →
+            </Link>
+          </div>
+          <ul className="mt-4 space-y-1">
+            {otherServices.map((s) => (
+              <li key={s.slug}>
+                <Link
+                  href={`/hizmetler/${s.slug}`}
+                  className="group flex items-center gap-3 rounded-lg px-2 py-2 text-sm transition hover:bg-[var(--navy-50)]"
+                >
+                  <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-[var(--navy-50)] text-[var(--navy)] transition group-hover:bg-gradient-to-br group-hover:from-[var(--sky)] group-hover:to-purple-500 group-hover:text-white">
+                    <Icon name={s.icon} className="size-4" />
+                  </div>
+                  <span className="flex-1 font-medium text-[var(--foreground)] group-hover:text-[var(--navy)]">
+                    {s.title}
+                  </span>
+                  <ArrowRight className="size-3 text-[var(--muted)] opacity-0 transition group-hover:opacity-100" />
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Site analizi lead magnet */}
+      <div className="rounded-2xl border border-dashed border-[var(--border)] bg-white p-5">
+        <p className="text-xs font-semibold uppercase tracking-wider text-[var(--sky-600)]">
+          Ücretsiz fırsat
+        </p>
+        <h3 className="mt-1 text-sm font-bold text-[var(--navy)]">
+          Site analizi raporu
+        </h3>
+        <p className="mt-2 text-xs leading-relaxed text-[var(--muted)]">
+          Mevcut sitenizin SEO, hız ve dönüşüm performansını ücretsiz değerlendirelim.
+        </p>
+        <Link
+          href="/site-analizi"
+          className="mt-3 inline-flex items-center gap-1 text-xs font-semibold text-[var(--sky-600)] hover:text-[var(--navy)]"
+        >
+          Hemen başla
+          <ArrowRight className="size-3" />
+        </Link>
+      </div>
+    </aside>
+  );
+}