diff --git a/src/components/liste-satiri.ts b/src/components/liste-satiri.ts
new file mode 100644
index 0000000..3452bb8
--- /dev/null
+++ b/src/components/liste-satiri.ts
@@ -0,0 +1,58 @@
+/**
+ * Liste satırının (DESIGN.md §4.15) sınıf dizileri — tek kaynak. Üniversite,
+ * bölüm ve /sonuc program tabloları (ileride rapor listesi) aynı satırı
+ * çizer; sınıflar her dosyada ayrı yazılınca ölçüler kayıyordu. "use client"
+ * yok: sunucu bileşenleri de değer olarak okuyabilsin (§9.3).
+ */
+
+/** Satırın adı (bölüm/üniversite sayfasına link): sarar, hover mavi (§2.1 istisnası). */
+export const SATIR_AD =
+ "block text-base font-semibold leading-snug text-slate-900 transition-colors hover:text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+
+/** Link olmayan ad (slug yoksa). */
+export const SATIR_AD_DUZ =
+ "block text-base font-semibold leading-snug text-slate-900";
+
+/** Adın altındaki ikinci satır (varyant ya da üniversite adı). */
+export const SATIR_ALT_AD = "mt-0.5 block text-sm leading-snug text-slate-600";
+
+/** Satırdaki ikincil link (ör. üniversite adı) — §2.1 tek turuncu. */
+export const SATIR_IKINCIL_LINK =
+ "transition-colors hover:text-orange-500 hover:underline";
+
+/** Tür/il/süre satırı. Geniş ekranda (sm+) üstündeki adla aynı satıra
+ * çıkar (SATIR_GRUP), telefonda altına iner. */
+export const SATIR_META =
+ "mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-slate-500 sm:mt-0";
+
+/** Ad (ya da üniversite adı) + tür/il/süre satırını geniş ekranda yan yana
+ * dizen sarmal. Bilal'in isteği (25 Eyl 2026): geniş ekranda satırlar üç
+ * katlı ve "çok kalın" duruyordu. Telefonda alt alta kalır. */
+export const SATIR_GRUP =
+ "sm:flex sm:flex-wrap sm:items-center sm:gap-x-3 sm:gap-y-1";
+
+/** Tür çipi (Devlet, Vakıf, SAY…). */
+export const SATIR_CIP =
+ "shrink-0 rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold text-slate-700";
+
+/** Telefonda sayısal sütunun adın altına indiği satır. */
+export const SATIR_MOBIL_SAYI =
+ "mt-1.5 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm text-slate-500 sm:hidden";
+
+/** Tablo başlık hücresi. */
+export const SATIR_BASLIK = "h-12 text-sm font-semibold text-slate-500";
+
+/** Adın bulunduğu hücre. */
+export const SATIR_AD_HUCRE = "w-full whitespace-normal py-4 pl-4 sm:pl-5 lg:py-3";
+
+/** Butonların hücresi ve kabı: telefonda alt alta, sm'den yan yana.
+ * Masaüstünde (lg) satır ince kalsın diye dolgu bir kademe az ve satır
+ * düğmeleri 36 px (DESIGN.md §8 masaüstü tablo istisnası). */
+export const SATIR_BUTON_HUCRE = "py-4 pr-4 text-right sm:pr-5 lg:py-3";
+export const SATIR_BUTON_KABI =
+ "inline-flex flex-col items-center gap-2 sm:flex-row";
+export const SATIR_BUTON_BASLIK = "h-12 w-14 text-right sm:w-28";
+
+/** Satır düğmesinin boyu: dokunmada 44 px, masaüstü tabloda 36 px (§8). */
+export const SATIR_DUGME_BOYU =
+ "size-11 min-h-11 min-w-11 lg:size-9 lg:min-h-9 lg:min-w-9";
diff --git a/src/components/ozet-kart.tsx b/src/components/ozet-kart.tsx
new file mode 100644
index 0000000..4a3ec4d
--- /dev/null
+++ b/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 `
- ` 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 (
+
- + {etiket} + +
-
+
+
+ {deger}
+
+ {birim ? (
+
+ {birim}
+
+ ) : null}
+
+
+
+ +
+ - {alt} + {ek ?
- {ek} : null} +
-
{b.ad}
diff --git a/src/features/katalog/components/bolum-program-listesi.tsx b/src/features/katalog/components/bolum-program-listesi.tsx
index 76a0d0c..0321d80 100644
--- a/src/features/katalog/components/bolum-program-listesi.tsx
+++ b/src/features/katalog/components/bolum-program-listesi.tsx
@@ -12,6 +12,20 @@ import {
ProgramSiraGecmisi,
ProgramTabanTrendi,
} from "@/components/program-liste-verileri";
+import {
+ SATIR_AD,
+ SATIR_AD_DUZ,
+ SATIR_AD_HUCRE,
+ SATIR_ALT_AD,
+ SATIR_BASLIK,
+ SATIR_BUTON_BASLIK,
+ SATIR_BUTON_HUCRE,
+ SATIR_BUTON_KABI,
+ SATIR_CIP,
+ SATIR_GRUP,
+ SATIR_META,
+ SATIR_MOBIL_SAYI,
+} from "@/components/liste-satiri";
import { ProgramEkleButonu } from "@/features/liste/components/program-ekle-butonu";
import { ProgramNetleriButonu } from "./program-netleri";
import { UniLogo } from "@/components/uni-logo";
@@ -58,7 +72,7 @@ function SiralamaDugmesi({
aktif && yon === "artan" ? "azalan" : "artan"
} sırala`}
aria-pressed={aktif}
- className="inline-flex min-h-11 cursor-pointer items-center gap-1 rounded-full px-1.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+ className="inline-flex min-h-11 cursor-pointer items-center gap-1 rounded-full px-1.5 text-sm font-semibold text-slate-500 transition-colors hover:text-orange-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
>
{etiket}
@@ -66,7 +80,7 @@ function SiralamaDugmesi({
className={`size-3 ${
aktif && yon === "artan"
? "text-primary"
- : "text-muted-foreground/40"
+ : "text-slate-300"
}`}
strokeWidth={aktif && yon === "artan" ? 3 : 2}
/>
@@ -74,7 +88,7 @@ function SiralamaDugmesi({
className={`size-3 ${
aktif && yon === "azalan"
? "text-primary"
- : "text-muted-foreground/40"
+ : "text-slate-300"
}`}
strokeWidth={aktif && yon === "azalan" ? 3 : 2}
/>
@@ -154,14 +168,21 @@ export function BolumProgramListesi({
ref={listeRef}
className="scroll-mt-24 overflow-hidden rounded-2xl border border-slate-200 bg-white"
>
+ {/* Şişko ve sade (DESIGN.md §4.15): üniversite adı kesilmez, sarar;
+ satır butonları 44 px. 375 px'te yalnız ad + butonlar sütun
+ olarak kalır; taban sıra adın altındaki satıra iner. Sıralama
+ düğmeleri sütun başlıklarıyla birlikte sm'den itibaren görünür —
+ telefonda liste zaten taban sırasına göre dizili. */}
- - Üniversite -+ + @@ -194,84 +215,87 @@ export function BolumProgramListesi({ {gosterilenProgramlar.map((p) => { const uniAd = trBaslikDuzeni(p.universite); const varyant = p.isim.trim() !== bazAd ? p.isim.trim() : null; - const devlet = p.unitur === "DEVLET"; + const tabanMetni = + p.siraSon != null ? `~${sayi(p.siraSon)}.` : "—"; return (+ Üniversite + +Son {VERI_YIL_SAYISI} yıl -+ + + + Netler ve listeye ekle - diff --git a/src/features/katalog/components/katalog-arama.tsx b/src/features/katalog/components/katalog-arama.tsx index e2a7ab1..09cf914 100644 --- a/src/features/katalog/components/katalog-arama.tsx +++ b/src/features/katalog/components/katalog-arama.tsx @@ -355,8 +355,8 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) { · {PUAN_TURU_ETIKET[profil.tur] ?? profil.tur} - -- + + {p.universiteSlug ? ( -) : null} - {p.universiteSlug ? ( - - {uniAd} - - ) : ( - - {uniAd} - - )} - - {p.unitur ? ( - + {p.universiteSlug ? ( + - {UNITUR_ETIKET[p.unitur]?.cip ?? - trBaslikDuzeni(p.unitur)} + {uniAd} + + ) : ( + + {uniAd} - ) : null} - - {p.il ? trBaslikDuzeni(p.il) : null} - {varyant ? `${p.il ? " · " : ""}${varyant}` : ""} + )} + + {p.unitur ? ( + + {UNITUR_ETIKET[p.unitur]?.cip ?? + trBaslikDuzeni(p.unitur)} + + ) : null} + {p.il ? ( + + {trBaslikDuzeni(p.il)} + + ) : null} + {p.sure ? ( + {p.sure} yıl + ) : null} - {p.sure ? ( - - · {p.sure} yıl - - ) : null} + + {varyant ? ( + + {varyant} + + ) : null} + + Taban sıra + + {tabanMetni} + + + + {p.puanSon != null ? p.puanSon.toFixed(2).replace(".", ",") : "—"} -+ {p.kontenjanSon != null ? `${sayi(p.kontenjanSon)} kişi` : "—"} -- + + -- {p.siraSon != null ? `~${sayi(p.siraSon)}.` : "—"} + {tabanMetni} - + + - + + + Değiştir @@ -564,7 +564,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) { function BaslangicIcerigi({ onSec }: { onSec: () => void }) { return ( -+
Keşfet
@@ -677,11 +677,11 @@ function KesfetLinki({- + {kisaBaslik} {baslik} - + {aciklama} @@ -700,7 +700,7 @@ function SonucGrubu({ }) { return (- +
{ikon} {baslik}
diff --git a/src/features/katalog/components/program-netleri.tsx b/src/features/katalog/components/program-netleri.tsx index 02570ad..e013841 100644 --- a/src/features/katalog/components/program-netleri.tsx +++ b/src/features/katalog/components/program-netleri.tsx @@ -6,6 +6,7 @@ // yok: YÖK Atlas 2026 SPA'sına geçerken cinsiyet panelini yayından kaldırdı // (bkz. scripts/detay.ts). +import { SATIR_DUGME_BOYU } from "@/components/liste-satiri"; import { useState } from "react"; import { ListChecks } from "lucide-react"; import type { ProgramNetSatiri } from "@/types/yokatlas"; @@ -96,7 +97,7 @@ export function ProgramNetleriButonu({ type="button" title="Son yerleşenin netleri" onClick={(e) => e.stopPropagation()} - className={`inline-flex size-11 min-h-11 min-w-11 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white text-slate-500 transition-[background-color,border-color,color,transform] duration-150 hover:border-primary hover:bg-primary/5 hover:text-primary active:scale-[0.92] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${className}`} + className={`inline-flex ${SATIR_DUGME_BOYU} cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white text-slate-500 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.92] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${className}`} >{isim} — son yerleşenin netleri diff --git a/src/features/katalog/components/sayfalama.tsx b/src/features/katalog/components/sayfalama.tsx index bf2c546..8b2a033 100644 --- a/src/features/katalog/components/sayfalama.tsx +++ b/src/features/katalog/components/sayfalama.tsx @@ -95,7 +95,9 @@ export function Sayfalama({ ); - // 7'den çok sayfada pencere: 1 … (c-1) c (c+1) … son + // 7'den çok sayfada pencere: 1 … (c-1) c (c+1) … son. Telefonda + // (sm altı) tek satır kalsın diye yalnız Önceki · aktif · Sonraki görünür; + // diğer numaralar HTML'de durur (tarayıcı botları tüm sayfaları görür). const numaralar: (number | "...")[] = []; if (toplamSayfa <= 7) { for (let n = 1; n <= toplamSayfa; n++) numaralar.push(n); @@ -116,12 +118,12 @@ export function Sayfalama({ return (
+
+ );
+}
diff --git a/src/components/piksel-cta-yuzeyi.tsx b/src/components/piksel-cta-yuzeyi.tsx
new file mode 100644
index 0000000..c9d75ad
--- /dev/null
+++ b/src/components/piksel-cta-yuzeyi.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+import { TypingAnimation } from "@/components/ui/typing-animation";
+import { FUNNEL_METINLERI } from "@/lib/funnel-metinleri";
+import { PikselListe, PikselListeAciklama } from "@/components/piksel-liste";
+
+/** Listeyi `ofset` kadar döndürür: aynı sayfadaki yüzeyler farklı satırla
+ * başlar. Rastgele değil, deterministik — sunucu ve istemci aynı çizer. */
+function dondur
+
+
+ {children}
+ {kayanMetin ? (
+
+
+
+ + {oge("bg-red-500", sayilar.hayal, DILIM_ETIKET.hayal)} + {oge("bg-amber-400", sayilar.dengeli, DILIM_ETIKET.dengeli)} + {oge("bg-emerald-500", sayilar.guvenli, DILIM_ETIKET.garanti)} +
+ ); +} diff --git a/src/components/risk-etiketi.tsx b/src/components/risk-etiketi.tsx new file mode 100644 index 0000000..0398422 --- /dev/null +++ b/src/components/risk-etiketi.tsx @@ -0,0 +1,32 @@ +import { RISK_ETIKET, type RiskSeviyesi } from "@/lib/risk"; + +/** + * Risk etiketi (DESIGN.md §4.5) — tek kaynak: renkli nokta + aynı renkte + * metin. Renk hiçbir yerde tek başına durmaz; metin RISK_ETIKET'ten gelir. + * /sonuc tablosu, liste çekmecesi ve rapor listesi buradan kullanır. + */ +export const RISK_NOKTA: Record
- {/* Başlık üst çubuğun altına girince üst çubukta bölüm adı belirir */}
-
+ {/* Başlık üst çubuğun altına girince üst çubukta bölüm adı belirir
+ (logosu yok — DESIGN.md §4.14). Geniş ekran (lg) altında başlık
+ bloğu ortalı (§5.2). */}
+
- {/* Tek sayfada çıkan ziyaretçi alttaki karta inmiyor: kompakt sıra girişi
- başlık bloğunun hemen altında, listenin üstünde. Alttaki kart kalır. */}
-
-
+ className="mt-6 text-center font-heading text-3xl font-bold leading-tight text-slate-900 sm:text-5xl lg:text-left" + > {bolum.ad} {ilkSayfa ? "" : ` — Sayfa ${sayfa}`} {!ilkSayfa && aralik ? ( <> {" "} - + {aralik.charAt(0).toLocaleUpperCase("tr-TR") + aralik.slice(1)} ) : null}
+ + {duzeyler.length > 0 || puanTurleri.length > 0 ? ( +
+ {duzeyler.map((d) => (
+
+
- {sayi(tumProgramlar.length)} üniversite programının {SON_YIL} taban - puanlarını, başarı sıralamalarını ve kontenjanlarını incele. +
+ {bolum.ad} bölümünü açan {sayi(tumProgramlar.length)} üniversite + programının {SON_YIL} taban puanlarını, başarı sıralamalarını ve + kontenjanlarını incele.{" "} + + {TERCIH_YILI} tabanları, yerleştirme sonuçları açıklandığında + netleşir. +
) : ( -+
{bolum.ad} taban puanları tablosunun {sayfa}. sayfası ( {sayi(tumProgramlar.length)} programın{" "} {sayi((sayfa - 1) * SAYFA_BOYU + 1)}– @@ -257,54 +343,99 @@ export function BolumIcerik({ slug, sayfa }: { slug: string; sayfa: number }) { {aralik ? `: ${aralik}` : ""}. Listenin başı{" "} ilk sayfada .
)} -
-
-
-
- ({
- ...program,
- universiteSlug: uniSlugFromAd(program.universite),
- }))}
- bazAd={bolum.ad}
- tabanYol={`/bolum/${slug}`}
- sayfa={sayfa}
- />
-
+
+
+ {/* Üniversite sayfasıyla aynı konum ve aynı kart: liste + sayfalama altı */}
+
-
- Üniversite programları -
- - {sayi(tumProgramlar.length)} program - + {/* Tek sayfada çıkan ziyaretçi alttaki karta inmiyor: kompakt sıra + girişi özet paragrafın hemen altında, listenin üstünde. Alttaki + kart kalır. */} +
+
- -
+
-
+
+
+
+ + Üniversite programları +
++ {sayi(tumProgramlar.length)} program, taban sırasına göre +
+
+ ({
+ ...program,
+ universiteSlug: uniSlugFromAd(program.universite),
+ }))}
+ bazAd={bolum.ad}
+ tabanYol={`/bolum/${slug}`}
+ sayfa={sayfa}
+ />
+
+
+
-
+
+ {Array.from({ length: 4 }, (_, i) => (
+
-
+