---
name: kolaytercih-tasarim
description: KolayTercih'in kendi görsel dili — piksel imzası (SectionEyebrow, PixelDivider, PixelCorner), Cal Sans/Clarity City/Bricolage tipografisi, mavi bilgi + turuncu aksiyon rengi, slate nötrler, sondaki ArrowRight'lı CTA. Yeni ekran, bileşen, kart, modal, buton, form ya da sayfa tasarlarken; mevcut arayüzü değiştirirken; "AI gibi duruyor", "sitenin diline uymuyor", "piksel detayı kaybolmuş" denince kullanılır. docs/tasarim/DESIGN.md'nin giriş kapısıdır.
---

# KolayTercih tasarım dili

Bu proje için genel tasarım kütüphanesi (stil katalogları, palet listeleri) **kullanılmaz**;
yön zaten belli. Kaynak tek: `docs/tasarim/DESIGN.md`. Bu dosya onu nasıl uygulayacağını söyler.

## 1. Başlamadan önce (zorunlu)

1. `docs/tasarim/DESIGN.md` dosyasını **tamamını** oku (uzun bir belge; atlama). Özellikle §1.1 temel his, §4 tek kaynaklar, §6 hareket, §7 yap/yapma, §9.2 ölç-tahmin-etme ve **§11 deneyim ilkeleri**. Canlı referans ekran: `/universite/ankara-universitesi`.
2. Beş satırlık brief'i doldur (DESIGN.md §9.1): amaç · referans ekran · tek kaynak parçalar · durumlar · his. Yanına bir satır ekle: **§11.1'deki hangi vaka bu işe en yakın ve hangi *nedeni* taşıyacağım?**
3. Referans ekranı bul ve aç; kopyalayacağın sınıf dizilerini oradan al:

```bash
grep -rn "SectionEyebrow" src --include='*.tsx' -l          # rozetli başlık bloğu örnekleri
grep -rn "bg-orange-500" src --include='*.tsx' -l           # turuncu CTA örnekleri
grep -rn "PixelCorner\|PagePixelDivider" src -l --include='*.tsx'   # piksel imzası taşıyan ekranlar
```

Ana sayfa bölüm iskeleti: `src/app/page.tsx` ("Sorun" bölümü; `grep -n "SectionEyebrow" src/app/page.tsx`). Alt sayfa başlığı: `src/app/meraklisina/page.tsx`.

## 2. Yazarken

- Kanonik parçaları içe aktar, yeniden çizme: `SectionEyebrow`, `PagePixelDivider`, `PixelCorner`
  (`@/components/pixel-decor`); `Button` (`@/components/ui/button`; turuncu CTA `variant="cta"`,
  ikincil `variant="ikincil"`); `Card` (`@/components/ui/card`); `AdimGostergesi`
  (`@/components/ui/adim-gostergesi`); `AltSayfa` (`@/components/ui/alt-sayfa`); `SayiRulo`
  (`@/components/ui/sayi-rulo`); `DialogContent` varsayılan çarpısı (`@/components/ui/dialog`);
  `ArrowRight`, `XIcon` (`lucide-react`).
- Sınıf dizilerini DESIGN.md'den **birebir** kopyala; "yaklaşık aynı" yazma.
- Her piksel süsüne o sayfaya özgü tek `seed` ver (mevcut seed'ler: `grep -rho "seed={[0-9]*}" src | sort -u`).
- Risk rengi kullanıyorsan metin etiketini `RISK_ETIKET` / `DILIM_ETIKET`'ten (`src/lib/risk.ts`) al.
- Türkçe tanımlayıcı, çevredeki kodla aynı yorum yoğunluğu (AGENTS.md).

## 2.1 Hareket ve deneyim (DESIGN.md §6, §11)

Site "web sitesi değil web uygulaması" gibi hissettirir. Yazdığın her parça için:

- **Her eylemin cevabı var.** Basınca `active:scale-[0.97]`; sonucu olan eylem sonucunu gösterir
  (sayı `SayiRulo` ile döner, seçim vurgusu `layoutId` ile kayar, tik `pathLength` ile çizilir).
  Koşullu render ile anında yer değiştiren içerik son çaredir.
- **Durumu yansıt.** Sıra (`useTercihProfili`), liste doluluğu (`liste-store`), giriş: ekranın
  bunlardan haberi olmalı mı? Olmalıysa göster.
- **Yay/eğri/süre uydurma.** Yalnız `src/lib/hareket.ts`: `YAY.varsayilan | akici | donusum |
  birakma | adim`, `EGRI.giris | standart | gucluCikis | yerlesme`, `SURE.*`. Sekme yalnız bir
  şey fırlıyorsa (`YAY.birakma`).
- **Sahne tek.** Sıralı, sahnelenmiş belirme sayfanın ilk ekranında bir kez; alt bölümler `Reveal`.
  Yüzey açılıyorsa önce imza sonra içerik (`AcilisSahnesi`).
- **Sade karşılığı yaz.** `useReducedMotion` (değişken adı `azalt`) ya da `motion-reduce:`;
  hareketi azalt'ta yalnız opaklık.
- **Telefonda gizleme.** Hover'a bağlı her cevabın dokunmatik karşılığı olsun.
- **Dış kaynaktan (Arc, React Bits, Skiper, Motion Primitives) alıyorsan** §11.3'ün yedi adımı:
  kod bizim dosyamızda + kaynak/lisans yorumu · yeni bağımlılık yok (`motion` ile yeniden yaz) ·
  renk token'a · hareket `hareket.ts`'e · biçim bize (hap, `font-heading`, ≥44 px, gölge yok) ·
  sade karşılık + klavye/aria · lisans notu.

## 3. Bitirmeden önce

```bash
pnpm tasarim:denetim        # sıfır hata olmadan iş bitmiş sayılmaz
```

Uyarıları raporda listele; hataları düzelt. **Yeni bir parça tasarladıysan ya da bir bölümü
yeniden düzenlediysen ekrana bak** (AGENTS.md "Tarayıcı açma": 375 px + masaüstü ekran görüntüsü;
önce Bilal'in açık sunucusunu ara). Küçük düzeltmede (metin, renk, tek sınıf) 375 px notu yeter:
taşma, üst üste binme, dokunma hedefi < 44 px, uzun üniversite adı — koddan çıkarım yazıyorsan
"koddan çıkarım" de. Sonra DESIGN.md §11.5 deneyim kontrol listesinden geç.

## 4. Örnekler

**İstek:** "Bölüm sayfasına 'Bu bölümü okuyanlar ne diyor' başlığı ekle."
**Çıktı:**
```tsx
<div className="flex flex-col items-center gap-4 text-center">
  <SectionEyebrow>Öğrenci görüşleri</SectionEyebrow>
  <h2 className="font-heading text-3xl font-bold sm:text-4xl">Bu bölümü okuyanlar ne diyor?</h2>
  <p className="max-w-xl text-lg leading-relaxed text-slate-600">…</p>
</div>
```

**İstek:** "Paket sayfasına satın alma butonu koy."
**Çıktı:**
```tsx
<Button size="lg" variant="cta" className="w-full">
  Paketi al
  <ArrowRight className="size-4" aria-hidden />
</Button>
```
(Yanlış: elle `bg-orange-500 hover:bg-orange-600`, başta `<Sparkles />`, `bg-gradient-to-r`, `rounded-xl`, "Hemen Al ✨".)

**İstek:** "React Bits'teki şu sayaç bileşenini fiyat bölümüne koy."
**Çıktı:** Registry'den kurma. Önce sitede karşılığı var mı bak (`SayiRulo`); varsa onu kullan.
Yoksa kaynağı oku (`curl -s https://reactbits.dev/r/<Ad>-TS-TW.json`), `src/components/ui/<türkçe-ad>.tsx`
olarak yeniden yaz: başta `// Esin: React Bits "<Ad>" (MIT + Commons Clause); kod KolayTercih diline çevrildi.`,
GSAP/renk/easing atılır, `YAY.*` + token + `useReducedMotion` dalı girer.

**İstek:** "Üniversite sayfasına URAP kartı ekle."
**Çıktı:**
```tsx
<div className="relative overflow-hidden rounded-2xl border border-slate-200 bg-card p-5">
  <PixelCorner className="absolute right-4 top-4" />
  <p className="text-xs font-semibold text-slate-500">URAP Türkiye</p>
  <p className="mt-1 font-heading text-2xl font-bold text-slate-900">18 <span className="text-base font-medium text-slate-400">/ 198</span></p>
</div>
```

**İstek:** "Modal ekle, çarpı sağ üstte olsun."
**Çıktı:** `DialogContent` varsayılanını kullan; hiçbir sınıf verme. Özel yerleşim şartsa `showCloseButton={false}` + DESIGN.md §4.3'teki sınıf dizisi aynen.

## 5. Kısa yasak listesi

`Badge` import'u · elle pill span · CTA'da `Sparkles`/emoji · `indigo/purple/gray/zinc` · gradyan metin ·
parlama gölgesi · `whileHover scale` · her elemanda fade-up · `dark:` · yüzeyde `bg-white` (yerine `bg-card`, §2.3) · Inter/Roboto/serif · `text-[#hex]` · renk tek başına anlam ·
`gsap`/`framer-motion` importu · kullanım yerinde `stiffness:`/`cubic-bezier(` · `Button` üstünde elle `bg-orange-500` · satır içi adım çubuğu · sessiz eylem · telefonda gizlenen deneyim.

## 6. Rapor

İş sonunda: kullanılan kanonik parçalar (liste) · en yakın §11.1 vakası ve taşıdığın neden · `pnpm tasarim:denetim` çıktısı (hata/uyarı sayısı) · baktıysan hangi genişlikte ne gördüğün, bakmadıysan 375 px notu · §11.5 listesinde işaretleyemediğin madde · DESIGN.md ile çelişen bir şey bulduysan dosya:satır ile yaz, kendi başına kuralı değiştirme.

## 7. Skill'i ölçme

Skill'in işe yarayıp yaramadığı `evals.md` içindeki dört istekle ölçülür (skill kapalı/açık karşılaştırması). Skill metnini ya da DESIGN.md'yi değiştirdikten sonra tekrar koşulur.