refactor: rehber feature'ı — makale ve liste feature bileşenlerine çıktı (Faz 3)

- rehber-kapak + el-cizimi-sema features/rehber/components/ altına taşındı
  (el-cizimi-sema'nın göreli font yolu yeni konuma göre düzeltildi)
- /rehber'in kart gridi RehberListesi'ne, /rehber/[slug]'ın makale gövdesi
  (JsonLd + içerik + ilgili yazılar + notFound) RehberMakale'ye çıkarıldı;
  metadata/staticParams yardımcıları bileşen dosyasından export ediliyor
- İki sayfa senkron: params.then() + sayfada Suspense, skeleton'lar colocated
- rehber-queries.ts (server-only) lib/rehber'in feature kapısı
- Davranış değişikliği yok; içerik build-time statik

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/features/rehber/components/el-cizimi-sema.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+// Ürün genelindeki "el çizimi" mermaid şemalarının tek kaynağı: /meraklisina
+// hunisi de rehber yazılarındaki şemalar da bu bileşenle çizilir, böylece
+// görünüm (font, renk teması, çizgi titremesi) her yerde birebir aynı kalır.
+// Mermaid ağır bir paket olduğu için useEffect içinde dinamik import edilir;
+// sayfa paketine girmez.
+
+import { useEffect, useId, useState } from "react";
+import localFont from "next/font/local";
+
+// Şemanın "el çizimi" görünümüne uyan el yazısı fontu (Sweet Cucumber
+// Mocktail, Misti's Fonts). Türkçe glifler doğrulandı (ş, ğ, ı, İ… hepsi
+// var). DİKKAT: lisans "kişisel kullanım için ücretsiz" — canlıya çıkmadan
+// mistifonts.com/sweet-cucumber-mocktail adresinden ticari lisans alınmalı.
+const elYazisi = localFont({
+  src: "../../../fonts/SweetCucumberMocktail.woff2",
+  display: "swap",
+});
+
+export function ElCizimiSema({
+  tanim,
+  ariaLabel,
+  figcaption,
+}: {
+  /** Mermaid tanımı (flowchart vb.) */
+  tanim: string;
+  /** Şemanın tamamını anlatan erişilebilirlik metni */
+  ariaLabel: string;
+  figcaption?: React.ReactNode;
+}) {
+  const [svg, setSvg] = useState<string | null>(null);
+  // mermaid.render'ın istediği DOM id'si: useId'nin ":" karakterleri geçersiz
+  const semaId = `sema-${useId().replace(/[^a-zA-Z0-9-]/g, "")}`;
+
+  useEffect(() => {
+    let iptal = false;
+    import("mermaid").then(async ({ default: mermaid }) => {
+      mermaid.initialize({
+        startOnLoad: false,
+        look: "handDrawn",
+        handDrawnSeed: 7, // her render'da aynı çizgi titremesi (deterministik)
+        theme: "base",
+        fontFamily: `${elYazisi.style.fontFamily}, cursive`,
+        themeVariables: {
+          primaryColor: "#ffffff",
+          primaryBorderColor: "#e2e8f0",
+          primaryTextColor: "#0f172a",
+          lineColor: "#94a3b8",
+          edgeLabelBackground: "#ffffff",
+          fontFamily: `${elYazisi.style.fontFamily}, cursive`,
+          fontSize: "17px", // script fontun x-yüksekliği düşük; okunurluk için büyütüldü
+        },
+      });
+      const sonuc = await mermaid.render(semaId, tanim);
+      if (!iptal) setSvg(sonuc.svg);
+    });
+    return () => {
+      iptal = true;
+    };
+  }, [semaId, tanim]);
+
+  return (
+    <figure className="mt-6">
+      {svg ? (
+        <div
+          role="img"
+          aria-label={ariaLabel}
+          className={`${elYazisi.className} overflow-x-auto [&_svg]:mx-auto [&_svg]:h-auto [&_svg]:max-w-full`}
+          dangerouslySetInnerHTML={{ __html: svg }}
+        />
+      ) : (
+        <div
+          aria-hidden
+          className="h-96 animate-pulse rounded-xl bg-slate-100"
+        />
+      )}
+      {figcaption ? (
+        <figcaption className="mt-3 text-xs text-slate-500">
+          {figcaption}
+        </figcaption>
+      ) : null}
+    </figure>
+  );
+}

src/features/rehber/components/rehber-kapak.tsx

@@ -0,0 +1,159 @@
+type RehberKapakProps = {
+  baslik: string;
+  className?: string;
+  compact?: boolean;
+};
+
+const VURGU_DESENLERI = [
+  /^YKS Tercih Listesi/i,
+  /^Ölü Tercih/i,
+  /^Kaç Sıralama/i,
+  /^Ek Yerleştirme/i,
+  /^Taban Puan/i,
+  /^YKS 2026 Tercih Takvimi/i,
+  /^Devlet mi Vakıf mı\?/i,
+  /^Baraj ve Başarı Sıralaması Şartları/i,
+  /^TYT ile Önlisans Tercihi/i,
+  /^Taban Sıralamalar/i,
+];
+
+export function rehberBasliginiBol(baslik: string) {
+  const eslesme = VURGU_DESENLERI.map((desen) => baslik.match(desen)).find(
+    Boolean,
+  );
+  const vurgu = eslesme?.[0] ?? baslik.split(/\s+/).slice(0, 3).join(" ");
+  return { vurgu, kalan: baslik.slice(vurgu.length) };
+}
+
+export function rehberMetniniParcala(metin: string) {
+  return metin.split(/(\d+(?:[.,]\d+)*)/g).filter(Boolean);
+}
+
+function KapakMetni({ metin }: { metin: string }) {
+  return rehberMetniniParcala(metin).map((parca, i) =>
+    /^\d/.test(parca) ? (
+      <span key={i} className="font-bricolage font-black italic">
+        {parca}
+      </span>
+    ) : (
+      parca
+    ),
+  );
+}
+
+const KAPAK_PIKSELLERI = [
+  [960, 50, 0.16], [980, 50, 0.28], [1020, 50, 0.12],
+  [940, 70, 0.24], [980, 70, 0.12], [1000, 70, 0.3], [1060, 70, 0.18],
+  [960, 90, 0.12], [1000, 90, 0.2], [1040, 90, 0.1], [1080, 90, 0.26],
+  [1080, 110, 0.14], [1120, 110, 0.22], [1140, 110, 0.12],
+  [60, 490, 0.12], [100, 490, 0.25], [120, 490, 0.14],
+  [40, 510, 0.24], [80, 510, 0.12], [120, 510, 0.3], [160, 510, 0.16],
+  [60, 530, 0.14], [100, 530, 0.22], [140, 530, 0.1], [180, 530, 0.27],
+] as const;
+
+export function RehberKapak({
+  baslik,
+  className = "",
+  compact = false,
+}: RehberKapakProps) {
+  const { vurgu, kalan } = rehberBasliginiBol(baslik);
+  const baslikBoyutu = compact
+    ? baslik.length > 70
+      ? "text-[clamp(15px,1.8vw,20px)]"
+      : baslik.length > 52
+        ? "text-[clamp(17px,2.1vw,23px)]"
+        : "text-[clamp(19px,2.4vw,27px)]"
+    : baslik.length > 70
+      ? "text-[clamp(28px,4vw,48px)]"
+      : baslik.length > 52
+        ? "text-[clamp(32px,4.5vw,54px)]"
+        : "text-[clamp(36px,5vw,62px)]";
+
+  return (
+    <div
+      className={`relative isolate aspect-1200/630 w-full overflow-hidden rounded-3xl border border-[#2563eb]/15 bg-white font-bricolage text-[#2563eb] ${className}`}
+      role="img"
+      aria-label={`${baslik} yazı kapağı`}
+    >
+      <svg
+        viewBox="0 0 1200 630"
+        preserveAspectRatio="none"
+        className="absolute inset-0 size-full text-[#2563eb]"
+        aria-hidden
+      >
+        {KAPAK_PIKSELLERI.map(([x, y, opacity]) => (
+          <rect
+            key={`${x}-${y}`}
+            x={x}
+            y={y}
+            width="14"
+            height="14"
+            rx="4"
+            fill="currentColor"
+            fillOpacity={opacity}
+          />
+        ))}
+        <rect x="1040" y="50" width="14" height="14" rx="4" fill="#ff5a00" fillOpacity="0.8" />
+        <rect x="80" y="530" width="14" height="14" rx="4" fill="#ff5a00" fillOpacity="0.8" />
+      </svg>
+
+      <div
+        className={`relative flex h-full flex-col justify-between ${
+          compact ? "p-[clamp(14px,2.2vw,24px)]" : "p-[clamp(20px,5vw,60px)]"
+        }`}
+      >
+        <div className="flex items-center">
+          <span
+            className={`font-sans font-bold uppercase tracking-[0.2em] text-[#2563eb] ${
+              compact
+                ? "text-[clamp(8px,1vw,11px)]"
+                : "text-[clamp(10px,1.5vw,18px)]"
+            }`}
+          >
+            Tercih Rehberi
+          </span>
+        </div>
+
+        <h2
+          className={`max-w-[88%] text-balance font-heading font-light leading-[1.02] tracking-tight text-[#2563eb] ${baslikBoyutu}`}
+        >
+          <span className="font-bricolage font-semibold tracking-tighter text-[#ff5a00]">
+            <KapakMetni metin={vurgu} />
+          </span>
+          {kalan ? (
+            <>
+              {/^\s/.test(kalan) ? " " : null}
+              <KapakMetni metin={kalan.trimStart()} />
+            </>
+          ) : null}
+        </h2>
+
+        <div className="flex items-center justify-end gap-0.5">
+          <svg
+            viewBox="0 0 180 180"
+            className={
+              compact
+                ? "size-[clamp(16px,1.8vw,22px)] shrink-0"
+                : "size-[clamp(22px,3vw,38px)] shrink-0"
+            }
+            aria-hidden="true"
+          >
+            <rect x="27" y="56" width="57" height="57" rx="13" fill="#3b82f6" />
+            <rect x="91" y="29" width="56" height="56" rx="13" fill="#fdc7a7" />
+            <rect x="91" y="95" width="56" height="56" rx="13" fill="#ff5a00" />
+          </svg>
+          <span
+            className={`tracking-tighter text-[#2563eb] ${
+              compact
+                ? "text-[clamp(10px,1.2vw,14px)]"
+                : "text-[clamp(13px,2vw,24px)]"
+            }`}
+          >
+            <span className="font-light">Kolay</span>
+            <span className="font-semibold">Tercih</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

src/features/rehber/components/rehber-listesi.tsx

@@ -0,0 +1,53 @@
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+import { getAllRehberler } from "../rehber-queries";
+import { RehberKapak } from "./rehber-kapak";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function RehberListesi() {
+  const yazilar = getAllRehberler();
+
+  return (
+    <ul className="mt-8 columns-1 gap-5 sm:columns-2 lg:columns-3">
+      {yazilar.map((y) => (
+        <li key={y.slug} className="mb-5 break-inside-avoid">
+          <Link
+            href={`/rehber/${y.slug}`}
+            className="block overflow-hidden rounded-3xl border border-slate-200 bg-white p-2 shadow-sm focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
+          >
+            <RehberKapak
+              baslik={y.baslik}
+              compact
+              className="rounded-[1.15rem]"
+            />
+            <div className="px-3 pb-3 pt-4">
+              <p className="text-sm leading-6 text-slate-600">{y.aciklama}</p>
+              <span className="mt-4 inline-flex items-center gap-1.5 font-bricolage text-sm font-semibold text-primary">
+                Yazıyı oku
+                <ArrowRight className="size-4" aria-hidden />
+              </span>
+            </div>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export function RehberListesiSkeleton() {
+  return (
+    <ul className="mt-8 columns-1 gap-5 sm:columns-2 lg:columns-3">
+      {Array.from({ length: 3 }, (_, i) => (
+        <li key={i} className="mb-5 break-inside-avoid">
+          <div className="rounded-3xl border border-slate-200 bg-white p-2 shadow-sm">
+            <Skeleton className="aspect-[1200/630] w-full rounded-[1.15rem]" />
+            <div className="px-3 pb-3 pt-4">
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="mt-2 h-5 w-2/3" />
+            </div>
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}

src/features/rehber/components/rehber-makale.tsx

@@ -0,0 +1,138 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { getAllRehberler, getAllRehberSlugs, getRehber } from "../rehber-queries";
+import { JsonLd, articleJsonLd, breadcrumbJsonLd } from "@/lib/seo";
+import { CtaSiraForm } from "@/components/cta-sira-form";
+import { ElCizimiSema } from "./el-cizimi-sema";
+import { RehberKapak } from "./rehber-kapak";
+import { Skeleton } from "@/components/ui/skeleton";
+
+// Sayfanın generateStaticParams'ı için — sayfalar *-queries import etmez.
+export function rehberStaticSlugs(): string[] {
+  const slugs = getAllRehberSlugs();
+  if (slugs.length === 0) {
+    throw new Error("rehber: content/rehber altında hiç makale yok");
+  }
+  return slugs;
+}
+
+export function rehberYaziMetadata(slug: string): Metadata {
+  const yazi = getRehber(slug);
+  if (!yazi) return {};
+  return {
+    title: yazi.baslik,
+    description: yazi.aciklama,
+    alternates: { canonical: `/rehber/${slug}` },
+    openGraph: {
+      type: "article",
+      title: yazi.baslik,
+      description: yazi.aciklama,
+      publishedTime: yazi.tarih,
+    },
+  };
+}
+
+export function RehberMakale({ slug }: { slug: string }) {
+  const yazi = getRehber(slug);
+  if (!yazi) notFound();
+
+  const digerYazilar = getAllRehberler()
+    .filter((y) => y.slug !== slug)
+    .slice(0, 4);
+
+  return (
+    <>
+      <JsonLd
+        data={articleJsonLd({
+          title: yazi.baslik,
+          description: yazi.aciklama,
+          path: `/rehber/${slug}`,
+          datePublished: yazi.tarih,
+        })}
+      />
+      <JsonLd
+        data={breadcrumbJsonLd([
+          { name: "Ana Sayfa", path: "/" },
+          { name: "Rehber", path: "/rehber" },
+          { name: yazi.baslik, path: `/rehber/${slug}` },
+        ])}
+      />
+
+      <article>
+        <RehberKapak baslik={yazi.baslik} className="mt-6 shadow-sm" />
+        <h1 className="mt-8 font-heading text-3xl font-bold text-slate-900 sm:text-4xl">
+          {yazi.baslik}
+        </h1>
+        <p className="mt-3 text-base leading-7 text-slate-600">
+          {yazi.aciklama}
+        </p>
+        <div
+          className="mt-8 text-[15px] leading-7 text-slate-700
+            [&_h2]:mt-10 [&_h2]:font-heading [&_h2]:text-xl [&_h2]:font-bold [&_h2]:text-slate-900
+            [&_h3]:mt-6 [&_h3]:font-heading [&_h3]:text-base [&_h3]:font-bold [&_h3]:text-slate-900
+            [&_p]:mt-3
+            [&_a]:font-medium [&_a]:text-primary hover:[&_a]:underline
+            [&_strong]:font-semibold [&_strong]:text-slate-900
+            [&_ul]:mt-3 [&_ul]:list-disc [&_ul]:space-y-1.5 [&_ul]:pl-6
+            [&_ol]:mt-3 [&_ol]:list-decimal [&_ol]:space-y-1.5 [&_ol]:pl-6
+            [&_table]:mt-4 [&_table]:w-full [&_table]:border-collapse [&_table]:text-sm
+            [&_th]:border [&_th]:border-slate-200 [&_th]:bg-slate-50 [&_th]:px-3 [&_th]:py-2 [&_th]:text-left [&_th]:font-semibold
+            [&_td]:border [&_td]:border-slate-200 [&_td]:px-3 [&_td]:py-2
+            [&_blockquote]:mt-4 [&_blockquote]:border-l-4 [&_blockquote]:border-primary/30 [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-slate-600"
+        >
+          {yazi.parcalar.map((parca, i) =>
+            parca.tip === "html" ? (
+              <div key={i} dangerouslySetInnerHTML={{ __html: parca.html }} />
+            ) : (
+              <ElCizimiSema
+                key={i}
+                tanim={parca.sema.tanim}
+                ariaLabel={parca.sema.ariaLabel}
+                figcaption={parca.sema.altyazi}
+              />
+            ),
+          )}
+        </div>
+      </article>
+
+      <div className="mt-12">
+        <CtaSiraForm />
+      </div>
+
+      {digerYazilar.length > 0 ? (
+        <section className="mt-12">
+          <h2 className="font-heading text-xl font-bold text-slate-900">
+            Diğer rehber yazıları
+          </h2>
+          <ul className="mt-3 space-y-2">
+            {digerYazilar.map((y) => (
+              <li key={y.slug}>
+                <Link
+                  href={`/rehber/${y.slug}`}
+                  className="text-sm font-medium text-primary hover:underline"
+                >
+                  {y.baslik}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </section>
+      ) : null}
+    </>
+  );
+}
+
+export function RehberMakaleSkeleton() {
+  return (
+    <div>
+      <Skeleton className="mt-6 aspect-[1200/630] w-full rounded-3xl" />
+      <Skeleton className="mt-8 h-10 w-3/4" />
+      <div className="mt-3 space-y-3">
+        {Array.from({ length: 5 }, (_, i) => (
+          <Skeleton key={i} className="h-5 w-full" />
+        ))}
+      </div>
+    </div>
+  );
+}

src/features/rehber/rehber-queries.ts

@@ -0,0 +1,11 @@
+import "server-only";
+
+// Rehber feature'ının sorgu kapısı. İçerik motoru @/lib/rehber'de yaşar
+// (content/rehber'i build sırasında fs'ten okur); feature bileşenleri ve
+// sayfa yardımcıları yalnızca buradan okur.
+export {
+  getAllRehberler,
+  getAllRehberSlugs,
+  getRehber,
+  type RehberOzet,
+} from "@/lib/rehber";