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.

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

@@ -6,6 +6,7 @@ import { ArrowLeft, Calendar } from "lucide-react";
 import { renderContent } from "@/lib/content-render";
 import { getPostBySlug } from "@/lib/data";
 import { buildMetadata } from "@/lib/seo";
+import { ContentSidebar } from "@/components/content-sidebar";
 
 export async function generateMetadata({
   params,
@@ -21,7 +22,10 @@ export async function generateMetadata({
     openGraph: {
       title: post.seo_title || post.title,
       description: post.seo_description || post.excerpt || undefined,
-      images: post.seo_image || post.cover_image ? [{ url: (post.seo_image || post.cover_image) as string }] : undefined,
+      images:
+        post.seo_image || post.cover_image
+          ? [{ url: (post.seo_image || post.cover_image) as string }]
+          : undefined,
       type: "article",
     },
   });
@@ -39,7 +43,7 @@ export default async function BlogPostPage({
   const html = renderContent(post.content);
 
   return (
-    <article className="mx-auto max-w-3xl px-6 py-20">
+    <div className="mx-auto max-w-7xl px-6 py-16">
       <Link
         href="/blog"
         className="inline-flex items-center gap-1 text-sm text-[var(--muted)] hover:text-[var(--navy)]"
@@ -47,56 +51,62 @@ export default async function BlogPostPage({
         <ArrowLeft className="size-3.5" /> Tüm yazılar
       </Link>
 
-      <header className="mt-6 border-b border-[var(--border)] pb-8">
-        {post.tags && post.tags.length > 0 && (
-          <div className="flex flex-wrap gap-2">
-            {post.tags.map((t) => (
-              <span
-                key={t}
-                className="rounded-full bg-[var(--sky-50)] px-2.5 py-1 text-xs text-[var(--sky-600)]"
-              >
-                {t}
-              </span>
-            ))}
-          </div>
-        )}
-        <h1 className="mt-4 text-3xl font-bold leading-tight tracking-tight text-[var(--navy)] sm:text-4xl">
-          {post.title}
-        </h1>
-        {post.excerpt && (
-          <p className="mt-4 text-lg leading-relaxed text-[var(--muted)]">
-            {post.excerpt}
-          </p>
-        )}
-        <div className="mt-6 flex items-center gap-3 text-xs text-[var(--muted)]">
-          {post.author && <span>{post.author}</span>}
-          {post.author && post.published_at && <span>•</span>}
-          {post.published_at && (
-            <span className="inline-flex items-center gap-1">
-              <Calendar className="size-3" />
-              {new Date(post.published_at).toLocaleDateString("tr-TR")}
-            </span>
+      <div className="mt-6 grid gap-12 lg:grid-cols-[1fr_320px]">
+        <article>
+          <header className="border-b border-[var(--border)] pb-8">
+            {post.tags && post.tags.length > 0 && (
+              <div className="flex flex-wrap gap-2">
+                {post.tags.map((t) => (
+                  <span
+                    key={t}
+                    className="rounded-full bg-[var(--sky-50)] px-2.5 py-1 text-xs text-[var(--sky-600)]"
+                  >
+                    {t}
+                  </span>
+                ))}
+              </div>
+            )}
+            <h1 className="mt-4 text-3xl font-bold leading-tight tracking-tight text-[var(--navy)] sm:text-4xl">
+              {post.title}
+            </h1>
+            {post.excerpt && (
+              <p className="mt-4 text-lg leading-relaxed text-[var(--muted)]">
+                {post.excerpt}
+              </p>
+            )}
+            <div className="mt-6 flex items-center gap-3 text-xs text-[var(--muted)]">
+              {post.author && <span>{post.author}</span>}
+              {post.author && post.published_at && <span>•</span>}
+              {post.published_at && (
+                <span className="inline-flex items-center gap-1">
+                  <Calendar className="size-3" />
+                  {new Date(post.published_at).toLocaleDateString("tr-TR")}
+                </span>
+              )}
+            </div>
+          </header>
+
+          {post.cover_image && (
+            <div className="relative mt-8 aspect-video overflow-hidden rounded-2xl">
+              <Image
+                src={post.cover_image}
+                alt={post.title}
+                fill
+                sizes="(min-width: 1024px) 768px, 100vw"
+                className="object-cover"
+                priority
+              />
+            </div>
           )}
-        </div>
-      </header>
 
-      {post.cover_image && (
-        <div className="relative mt-8 aspect-video overflow-hidden rounded-2xl">
-          <Image
-            src={post.cover_image}
-            alt={post.title}
-            fill
-            sizes="(min-width: 1024px) 768px, 100vw"
-            className="object-cover"
-            priority
+          <div
+            className="prose prose-lg mt-10 max-w-none text-[var(--foreground)]"
+            dangerouslySetInnerHTML={{ __html: html }}
           />
-        </div>
-      )}
+        </article>
 
-      <div
-        className="prose prose-lg mt-10 max-w-none text-[var(--foreground)]"
-        dangerouslySetInnerHTML={{ __html: html }}
-      />
-    </article>
+        <ContentSidebar currentSlug={slug} />
+      </div>
+    </div>
   );
 }