feat(tasarim): /meraklisina kapanış kartı piksel dokulu CTA bandı; DESIGN.md §4.17 şehir çipleri

- DemoKapanisCta beyaz kutudan CtaBandi'ye (seed 29), buton kanonik turuncu CTA.
- DESIGN.md: §4.17 SehirCipleri + şehir sayfası düzeni; CtaBandi kullanım
  yerlerine meraklısına kapanışı eklendi.

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

docs/tasarim/DESIGN.md

@@ -431,6 +431,22 @@ okunmuyor"). Kutu `rounded-2xl border-slate-200`; başlık `font-semibold text-s
 yazı, hover `slate-700`). Metin §10.4: ne oldu + ne yapılacak; kilometre taşı toast'ları
 (`program-ekle-butonu.tsx`) tek cümle açıklama + tek aksiyon taşır.
 
+### 4.17 Şehir çipleri — `SehirCipleri`, `src/features/katalog/components/sehir-cipleri.tsx`
+Şehre göre üniversite gezinmesi (`/universiteler` üstü ve `/universiteler/[il]` altı).
+Sihirbazın il çipiyle aynı kalıp; etkileşimli çip olduğu için rozet (§4.2) değildir:
+`inline-flex h-10 cursor-pointer items-center gap-1.5 rounded-full border px-3.5 text-sm font-semibold transition-[background-color,border-color,color,transform] duration-150 active:scale-[0.97]`
++ pasif `border-slate-200 bg-white text-slate-700 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500`,
+bulunulan şehir `border-primary bg-primary text-white` + `aria-current="page"`. Ad yanında
+üniversite sayısı `font-normal tabular-nums text-slate-400` (aktifte `text-white/80`).
+- Çip satırında yalnız **2+ üniversiteli** şehirler (≈28) durur; 90'ı aşkın şehrin tamamı
+  `/universiteler#tum-sehirler` altındaki A–Z üç sütunlu metin listesindedir (§1.1 "sık
+  bakılan önde, ayrıntı bir dokunuş derinde"). Satırın sonunda "Tüm şehirler (N)" çipi.
+- Şehir sayfası (`il-icerik.tsx`) katalog detay düzenindedir (§5.2): yol satırı, h1
+  "İstanbul Üniversiteleri Taban Puanları 2026", kimlik hapları (`MapPin` il + üniversite
+  sayısı), özet paragraf, kompakt `CtaSiraForm`, `PagePixelDivider` (seed 71), devlet /
+  vakıf / KKTC-yurt dışı öbekleri (`UniLinkleri`), altta "Diğer şehirler" çipleri ve CTA
+  bandı. Şehir adı `trBaslikDuzeni` + tire sonrası baş harf (Bakü-Azerbaycan).
+
 ## 5. Yerleşim
 
 ### 5.1 Genel
@@ -701,7 +717,7 @@ karar.
 - Büyük (sayfa kapanışı) hâlinde aynı band ortalı ve iri: `px-5 py-8 text-center sm:p-12`,
   `-inset-y-10`, h2 `font-heading text-2xl font-bold sm:text-3xl`, paragraf `text-white/90`.
 - Kullanıldığı yerler: `/sonuc`'taki üç panel (sihirbaz, giriş bekleyen, "24 tercihlik listen
-  hazır"), katalog altındaki `CtaSiraForm`
+  hazır"), `/meraklisina` kapanış kartı (`DemoKapanisCta`), katalog altındaki `CtaSiraForm`
   kart varyantı, "Kendi Listem" çekmecesinin altı (kompakt), katalog üstü kompakt satırın
   **kayıtlı sıralamalı** hâli ("Sıralaman … tabanlarının neresinde? · Sıralaman kayıtlı: …";
   Bilal, 24 Eyl 2026: "bu kısma piksel dokusu ekle"). O satır CLS için tek `section` içinde

src/features/pazarlama/components/meraklisina-demo.tsx

@@ -16,6 +16,8 @@ import {
 } from "react";
 import Link from "next/link";
 import { ArrowRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { CtaBandi } from "@/components/cta-bandi";
 import { useTercihProfili } from "@/features/liste/hooks/use-tercih-profili";
 import { PUAN_TURU_ETIKET, sonucHref } from "@/features/sihirbaz/sihirbaz-sabitler";
 import type { DilimKey, SihirbazFacetleri } from "@/types/yokatlas";
@@ -233,20 +235,26 @@ export function DilimSeridiCanli() {
 export function DemoKapanisCta() {
   const profil = useTercihProfili();
 
+  // Sayfa kapanışı bir CTA yüzeyidir: mavi bant + piksel doku (DESIGN.md
+  // §10.8; Bilal, 24 Eyl 2026: "burda piksel dokuları yok"). Tek başlık, tek
+  // turuncu buton; sayfadaki diğer bantlardan farklı seed.
   return (
-    <div className="rounded-2xl border border-slate-200 bg-white p-6 text-center">
+    <CtaBandi etiket="div" seed={29}>
-      <p className="font-heading text-base font-bold text-slate-900">
+      <p className="font-heading text-2xl font-bold text-balance sm:text-3xl">
         {profil
           ? "Kuralları öğrendin — sayılar zaten senin sıralamanla hesaplandı."
           : "Kuralları öğrendin — şimdi kendi sıralamanla dene."}
       </p>
-      <Link
+      <Button
-        href={profil ? sonucHref() : "/"}
+        asChild
-        className="mt-3 inline-flex items-center gap-1.5 rounded-full bg-orange-500 px-5 py-2.5 text-sm font-medium text-white transition-colors duration-200 hover:bg-orange-600"
+        size="lg"
+        className="mt-6 h-12 w-full cursor-pointer bg-orange-500 px-6 text-white transition-[background-color,transform] duration-200 hover:bg-orange-600 active:scale-[0.97] sm:w-auto"
       >
-        {profil ? "Sıralamana uygun programları gör" : "Sıralamanı gir"}
+        <Link href={profil ? sonucHref() : "/"}>
-        <ArrowRight className="size-4" aria-hidden />
+          {profil ? "Sıralamana uygun programları gör" : "Sıralamanı gir"}
-      </Link>
+          <ArrowRight className="size-4" aria-hidden />
-    </div>
+        </Link>
+      </Button>
+    </CtaBandi>
   );
 }