feat(tasarim): bölüm sayfası "şişko ve sade" dile göre

- Başlık bloğu lg altında ortalı, kimlik hapları (düzey + puan türü),
  dört özet kartı (Program, Devlet, Vakıf, En iyi sıralama), piksel ayraç
- OzetKart src/components/ozet-kart.tsx'e çıkarıldı; üniversite ve bölüm
  sayfası oradan kullanıyor. 6-7 haneli sayı birimle kısalıyor (ölçüldü)
- Program listesi §4.15: ad sarar, varyant ayrı satırda, 44 px butonlar,
  telefonda taban sıra adın altında, butonlar alt alta
- Sayfalama 44 px, telefonda tek satır; hover'lar tek turuncu
- Denetim: kanonik liste satırı adının mavi hover'ı artık uyarı vermiyor

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/ozet-kart.tsx

@@ -0,0 +1,58 @@
+import type { ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
+
+/**
+ * Özet kartı (DESIGN.md §4.8 — Apple Fitness özet kartlarının düzeni,
+ * sitenin ölçüleriyle): kartın en baskın öğesi iri sayı; ikonu sağında,
+ * küçük ikon kutusunda (§4.4 ikon kutusunun küçük hali). Altında başlık ve
+ * tek satır açıklama. Telefonda kart iç genişliği ~131 px: en uzun sayı
+ * ("13.889", text-4xl ≈ 90 px) + size-8 ikon kutusu sığar; sm'den itibaren
+ * text-5xl. Üniversite ve bölüm sayfalarının tek kaynağı. `ek` verilirse
+ * açıklamanın altında durur (ör. Türkiye sırasındaki piksel şeridi). dl
+ * anlamı için dt DOM'da önce gelir, görsel sıra `order` ile kurulur; çağıran
+ * kartları bir `<dl>` içine koyar.
+ */
+export function OzetKart({
+  ikon: Ikon,
+  etiket,
+  deger,
+  birim,
+  alt,
+  ek,
+  className,
+}: {
+  ikon: LucideIcon;
+  etiket: string;
+  deger: ReactNode;
+  birim?: string;
+  alt: ReactNode;
+  ek?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`flex flex-col rounded-2xl border border-slate-200 bg-white p-4 sm:p-5 ${className ?? ""}`}
+    >
+      <dt className="order-2 mt-2 text-base font-semibold text-slate-900">
+        {etiket}
+      </dt>
+      <dd className="order-1 flex items-start justify-between gap-1.5">
+        <span className="flex min-w-0 flex-wrap items-baseline gap-x-1">
+          <span className="font-heading text-4xl font-bold leading-none tracking-tight text-slate-900 sm:text-5xl">
+            {deger}
+          </span>
+          {birim ? (
+            <span className="text-base font-semibold text-slate-400">
+              {birim}
+            </span>
+          ) : null}
+        </span>
+        <span className="flex size-8 shrink-0 items-center justify-center rounded-xl bg-primary/10 sm:size-10">
+          <Ikon className="size-4 text-primary sm:size-5" aria-hidden />
+        </span>
+      </dd>
+      <dd className="order-3 mt-0.5 text-sm text-slate-500">{alt}</dd>
+      {ek ? <dd className="order-4 mt-3">{ek}</dd> : null}
+    </div>
+  );
+}