feat: WP'den header + kart stilleri + blog sidebar widget

Header (components/header.tsx + header-scroll.tsx):
- WP'deki 'floating pill' efekti — scroll'da küçülen + yuvarlanan + gölgeli
- 3 sütun grid: Logo | Nav | CTA
- Hizmetler mega menu dropdown — 2 sütunlu (Web&Yazılım + Dijital Pazarlama)
  - Hover'da açılır, services tablosundan dinamik
  - Alt linkle 'Tüm hizmetleri gör'
- Mobil için scroll-down'da gizlenir
- Sağda 'Ücretsiz Teklif' CTA butonu + telefon link

Kart stilleri (WP'ye eşlendi):
- ServicesGrid:
  - Gradient icon (sky → purple) ile WP'deki '🎨 🚀 📱' emoji yerine ikon
  - Hover: -translate-y-2 + colored shadow + scale icon
  - ArrowUpRight ikonu absolute, hover'da görünür
- ProjectsGrid:
  - Kategori bazlı renkli badge (Kurumsal navy, Klinik cyan, Portfolio violet, …)
  - Hover: image scale-105 + gradient overlay
  - 5/3 aspect ratio (daha WP-like)

Public sidebar (components/content-sidebar.tsx):
- CTA card (gradient navy→sky): Telefon + WhatsApp
- Son yazılar (4 adet, kapak + başlık + tarih)
- Etiketler (en sık kullanılan 10)
- Hizmetler menü (6 adet)
- Site analizi lead magnet

Blog detay sayfası (/blog/[slug]):
- Tek sütun → 2 sütun grid (content + sidebar)
- sticky sidebar, max-w-7xl
- Aynı pattern hizmet/proje detay sayfalarına da uygulanabilir

37 route, build temiz.

components/header.tsx

@@ -1,53 +1,162 @@
 import Image from "next/image";
 import Link from "next/link";
-import { Phone } from "lucide-react";
-import { getSiteSettings } from "@/lib/data";
+import { ChevronDown, Phone } from "lucide-react";
+import { getSiteSettings, listServices } from "@/lib/data";
 import { siteConfig } from "@/lib/site-config";
-
-const nav = [
-  { href: "/", label: "Anasayfa" },
-  { href: "/hizmetler", label: "Hizmetler" },
-  { href: "/projeler", label: "Projeler" },
-  { href: "/blog", label: "Blog" },
-  { href: "/hakkimizda", label: "Hakkımızda" },
-  { href: "/iletisim", label: "İletişim" },
-];
+import { HeaderScrollEffect } from "@/components/header-scroll";
 
 export async function Header() {
-  const settings = await getSiteSettings();
+  const [settings, services] = await Promise.all([
+    getSiteSettings(),
+    listServices(),
+  ]);
   const phone = settings?.contact_phone ?? siteConfig.contact.phone;
   const phoneRaw = settings?.contact_phone_raw ?? siteConfig.contact.phoneRaw;
 
+  // Mega menu groups
+  const webServices = services.filter((s) =>
+    ["web-tasarim", "e-ticaret", "mobil-uygulama", "yazilim-gelistirme", "crm-sistemleri"].includes(s.slug),
+  );
+  const marketingServices = services.filter((s) =>
+    ["seo-dijital-pazarlama", "sosyal-medya-yonetimi", "dijital-reklam"].includes(s.slug),
+  );
+
   return (
-    <header className="sticky top-0 z-40 border-b border-[var(--border)] bg-white/90 backdrop-blur">
-      <div className="mx-auto flex max-w-7xl items-center justify-between gap-6 px-6 py-3">
-        <Link href="/" className="flex items-center gap-3">
-          <Image src="/logo.png" alt={siteConfig.name} width={44} height={44} priority />
-          <span className="hidden text-base font-semibold tracking-tight text-[var(--navy)] sm:block">
-            {siteConfig.name}
-          </span>
-        </Link>
-
-        <nav className="hidden items-center gap-8 md:flex">
-          {nav.map((item) => (
-            <Link
-              key={item.href}
-              href={item.href}
-              className="text-sm font-medium text-[var(--muted)] transition hover:text-[var(--navy)]"
+    <>
+      <HeaderScrollEffect />
+      <div className="sticky top-0 z-50 w-full" id="floating-header-wrap">
+        <div id="header-pill-wrap" className="transition-all duration-300 ease-out">
+          <header
+            id="site-header"
+            className="mx-auto w-full border-b border-gray-100 bg-white/95 backdrop-blur-lg transition-all duration-300 ease-out"
+          >
+            <nav
+              id="header-nav-bar"
+              className="flex h-14 items-center justify-between px-6 transition-all duration-300 ease-out lg:grid lg:h-16 lg:grid-cols-[1fr_auto_1fr] lg:px-8"
             >
-              {item.label}
-            </Link>
-          ))}
-        </nav>
+              {/* Col 1 — Logo */}
+              <Link href="/" className="flex items-center gap-2.5">
+                <Image
+                  src="/logo.png"
+                  alt={siteConfig.name}
+                  width={40}
+                  height={40}
+                  priority
+                  className="h-9 w-9 object-contain"
+                />
+                <span className="hidden text-sm font-semibold tracking-tight text-[var(--navy)] sm:block">
+                  {siteConfig.name}
+                </span>
+              </Link>
 
-        <a
-          href={`tel:${phoneRaw}`}
-          className="hidden items-center gap-2 rounded-full bg-[var(--navy)] px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-[var(--navy-700)] sm:inline-flex"
-        >
-          <Phone className="size-4" />
-          {phone}
-        </a>
+              {/* Col 2 — Desktop nav */}
+              <div className="hidden items-center gap-0.5 lg:flex">
+                <Link
+                  href="/"
+                  className="inline-flex h-9 items-center justify-center whitespace-nowrap rounded-lg px-3.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+                >
+                  Anasayfa
+                </Link>
+
+                {/* Hizmetler mega menu */}
+                <div className="group relative">
+                  <button
+                    type="button"
+                    className="inline-flex h-9 items-center justify-center gap-1 whitespace-nowrap rounded-lg px-3.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+                  >
+                    Hizmetler
+                    <ChevronDown className="size-3 transition-transform duration-200 group-hover:rotate-180" />
+                  </button>
+                  <div className="pointer-events-none invisible absolute left-1/2 top-full z-50 w-[480px] -translate-x-1/2 pt-2 opacity-0 transition-all duration-150 ease-out group-hover:pointer-events-auto group-hover:visible group-hover:opacity-100">
+                    <div className="translate-y-1 rounded-2xl border border-gray-100 bg-white p-4 shadow-xl transition-transform duration-150 group-hover:translate-y-0">
+                      <div className="grid grid-cols-2 gap-x-3">
+                        <div>
+                          <p className="px-3 pb-1.5 text-[10px] font-semibold uppercase tracking-wider text-gray-400">
+                            Web & Yazılım
+                          </p>
+                          {webServices.map((s) => (
+                            <Link
+                              key={s.slug}
+                              href={`/hizmetler/${s.slug}`}
+                              className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-gray-700 transition-colors hover:bg-blue-50 hover:text-[var(--navy)]"
+                            >
+                              {s.title}
+                            </Link>
+                          ))}
+                        </div>
+                        <div>
+                          <p className="px-3 pb-1.5 text-[10px] font-semibold uppercase tracking-wider text-gray-400">
+                            Dijital Pazarlama
+                          </p>
+                          {marketingServices.map((s) => (
+                            <Link
+                              key={s.slug}
+                              href={`/hizmetler/${s.slug}`}
+                              className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-gray-700 transition-colors hover:bg-blue-50 hover:text-[var(--navy)]"
+                            >
+                              {s.title}
+                            </Link>
+                          ))}
+                        </div>
+                      </div>
+                      <div className="mt-3 border-t border-gray-100 pt-3">
+                        <Link
+                          href="/hizmetler"
+                          className="block rounded-xl px-3 py-2 text-center text-xs font-semibold text-[var(--navy)] hover:bg-blue-50"
+                        >
+                          Tüm hizmetleri gör →
+                        </Link>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <Link
+                  href="/projeler"
+                  className="inline-flex h-9 items-center justify-center whitespace-nowrap rounded-lg px-3.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+                >
+                  Projeler
+                </Link>
+                <Link
+                  href="/blog"
+                  className="inline-flex h-9 items-center justify-center whitespace-nowrap rounded-lg px-3.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+                >
+                  Blog
+                </Link>
+                <Link
+                  href="/hakkimizda"
+                  className="inline-flex h-9 items-center justify-center whitespace-nowrap rounded-lg px-3.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+                >
+                  Hakkımızda
+                </Link>
+                <Link
+                  href="/iletisim"
+                  className="inline-flex h-9 items-center justify-center whitespace-nowrap rounded-lg px-3.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+                >
+                  İletişim
+                </Link>
+              </div>
+
+              {/* Col 3 — CTA */}
+              <div className="flex items-center justify-end gap-2">
+                <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"
+                >
+                  <Phone className="size-3.5" />
+                  <span className="hidden xl:inline">{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)]"
+                >
+                  Ücretsiz Teklif
+                </Link>
+              </div>
+            </nav>
+          </header>
+        </div>
       </div>
-    </header>
+    </>
   );
 }