# 02 · Tasarım Sistemi & 3 Yön

Bu doküman üç varyasyonun **bağlayıcı** tasarım kılavuzudur. Build aşaması bu token'ları birebir uygular. Ortak kurallar tüm yönler için geçerlidir; ardından her yön ayrıntılı tanımlanır.

---

## A. Global İlkeler (tüm yönler)

- **Font:** **Manrope** (Google Fonts). Ağırlıklar: 400, 500, 600, 700, 800. Yedek: `system-ui, -apple-system, Segoe UI, sans-serif`.
  ```html
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  ```
- **Spacing:** 8px grid → 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128.
- **Breakpoint:** sm 640 · md 768 · lg 1024 · xl 1280. İçerik max genişlik 1200–1280px, ortalı, yatay padding mobilde 20px / masaüstü 32–48px.
- **Mobile-first & responsive:** Her bölüm mobilde tek kolon, ≥md çok kolon. Header mobilde hamburger menü.
- **Erişilebilirlik (WCAG 2.1 AA):** Semantik HTML (`header/nav/main/section/footer`), `lang="tr"`, görsellerde `alt`, form `label`, görünür `:focus-visible` halkası, metin/zemin kontrastı AA, `prefers-reduced-motion` desteği, klavye ile gezilebilirlik.
- **Performans:** Görsellerde `loading="lazy"` + `width`/`height` (CLS yok), `font-display: swap`.
- **Çok dillilik:** Header'da **TR / RO / EN** değiştirici (aktif: TR). İçerik TR.
- **KVKK/GDPR:** Sayfa altında kapatılabilir **çerez bildirimi**; footer'da yasal linkler.
- **Kapsam dışı:** Navigasyonda **Sosyal Ağ / Profesyonel Ağ YOK.** Bu modüllere ait kart/menü/CTA eklenmez.
- **Teknik:** Build adımı yok — her varyasyon `index.html` + `style.css` + (opsiyonel) `app.js`. Token'lar `:root` CSS değişkenleri. Mobil menü & dil değiştirici & çerez kapatma vanilya JS.

### Ortak Tipografi Ölçeği (Manrope, rem)
| Rol | Boyut | Ağırlık | Not |
|-----|------|---------|-----|
| Display | clamp(2.5rem, 6vw, 4.5rem) | 800 | Hero başlık |
| H1 | clamp(2rem, 4vw, 3rem) | 700/800 | |
| H2 | clamp(1.6rem, 3vw, 2.25rem) | 700 | Bölüm başlığı |
| H3 | 1.25rem | 700 | Kart başlığı |
| Body-L | 1.125rem | 400/500 | Giriş paragrafı |
| Body | 1rem | 400 | Metin |
| Small | 0.875rem | 500 | Yardımcı |
| Eyebrow | 0.75rem | 700 | UPPERCASE, letter-spacing 0.14em |

### Ortak Bileşen Envanteri (her varyasyon)
Header (logo + nav + dil + Giriş/Üye Ol) · Hero · **Modül vitrini (6 kart)** · İstatistik bandı · Duyurular · Etkinlik kartları · Mağaza ürün kartları · Gezi destinasyon kartları · Hakkımızda/Topluluk · Üyelik CTA bandı · Footer · Çerez bildirimi · Butonlar (primary/secondary/ghost) · Etiket/rozet · Form alanları.

### Görsel Kütüphanesi (Higgsfield ile üretildi — `assets/img/`)
| Dosya | Kullanım |
|-------|----------|
| `hero-kopru.jpg` | **V1** hero (İstanbul–Bükreş köprü kompozisyonu) |
| `hero-diaspora.jpg` | **V2** hero (sıcak topluluk fotoğrafı) |
| `hero-platform.jpg` | **V3** hero (soyut dijital ekosistem) |
| `travel-istanbul.jpg` | Gezi rehberi — İstanbul (tüm varyasyonlar) |
| `travel-kapadokya.jpg` | Gezi rehberi — Kapadokya |
| `travel-bukres.jpg` | Gezi rehberi — Bükreş |
| `travel-transilvanya.jpg` | Gezi rehberi — Transilvanya |
| `event-cultural.jpg` | Etkinlik bölümü görseli |
| `community-about.jpg` | Hakkımızda / topluluk bölümü |
| `shop-1.jpg` `shop-2.jpg` `shop-3.jpg` | Mağaza ürün kartları |

> İçerik fotoğrafları tüm varyasyonlarda ortaktır; her yön kendi **işlemesini** uygular (overlay, maske, kenarlık, renk grading). Hero görselleri yöne özeldir.

---

## B. Yön 1 — "KÖPRÜ" · Kurumsal & Güven (Editorial)

**Konumlandırma:** Resmi, güvenilir, ciddi. Vatandaşlık/hukuki süreçler ve dernek kurumsallığı öne çıkar. gov.uk + premium vakıf sitesi hissi. Editöryel, dergi düzeni.

**Renk paleti**
```css
--ink:#1A1714; --paper:#FFFFFF; --sand:#F6F3EC; --line:#E4DED2;
--primary:#C0231C;   /* kurumsal kırmızı (TR) */
--secondary:#16335E; /* lacivert (RO) */
--accent:#C99A3B;    /* mat altın (RO) */
--muted:#6B6358;
```
**Tipografi:** Manrope. Display 800, tracking -0.02em, büyük editöryel başlıklar. Body 400/500 `--ink` üzerine, line-height 1.65. Eyebrow UPPERCASE + altın renk. Sayı/etiketler ciddi.
**Şekil dili:** Küçük radius (4–8px). **1px hairline kenarlıklar**, gölge yok/çok hafif. İnce ayraç çizgiler (rules). Düz, sakin, "belge" estetiği.
**Layout:** Güçlü 12-kolon, asimetrik editöryel düzen, bol beyaz alan. **Modüller 01–06 numaralı index** olarak. Bölümler ince çizgilerle ayrılır.
**Hero:** Sol blokta eyebrow + display başlık + paragraf + iki buton; sağda `hero-kopru.jpg` keskin kenarlı blok. Üstte ince üst-çubuk (duyuru bandı opsiyonel).
**Bileşenler:** Kenarlıklı kartlar, numaralı liste, solid kırmızı primary buton + outline secondary, köşeli etiket pill, alıntı/teşvik blokları sade.
**Motion:** Minimal — scroll'da hafif fade/slide; hover'da renk/altı-çizgi.
**Ne zaman kazanır:** Güven, resmiyet, vatandaşlık desteği ve kurumsal ciddiyet vurgulanmak istendiğinde.

---

## C. Yön 2 — "DIASPORA" · Topluluk & Sıcaklık (Human)

**Konumlandırma:** Sıcak, insan ve fotoğraf merkezli, aidiyet duygusu. "Burada bir aileyiz." Topluluk, kültür, dayanışma öne çıkar. Airbnb sıcaklığı + kültürel vakıf.

**Renk paleti**
```css
--ink:#2B2420; --paper:#FBF6EF; --surface:#FFFFFF; --tint:#F3E9DC; --line:#EADFCE;
--primary:#C75B39;   /* terracotta */
--secondary:#1E4F4A; /* derin teal */
--accent:#E0A431;    /* hardal/altın */
--soft-red:#D14A3A;  /* TR nüansı */
--muted:#7A6E63;
```
**Tipografi:** Manrope. Display 700/800 sıcak; başlıklarda rahat satır aralığı; body line-height 1.7, `--ink`/`--muted`. Davetkâr, samimi ton.
**Şekil dili:** **Büyük radius (16–28px)**, **pill butonlar** (tam yuvarlak), **yumuşak sıcak gölgeler** (`0 12px 32px rgba(120,70,40,.12)`), yuvarlatılmış görsel maskeleri. Organik, ferah.
**Layout:** Fotoğraf öncelikli. Büyük görseller, üst üste binen (overlapping) kartlar, **istatistik/topluluk vurgusu**, üye/anlatı (testimonial) blokları, avatar kümeleri. Bölümler cream ↔ terracotta-tint dönüşümlü.
**Hero:** `hero-diaspora.jpg` full-bleed, üstte yumuşak koyulaşan overlay; sol-alt/orta hizalı sıcak display başlık + alt metin + pill CTA + küçük güven göstergeleri (üye sayısı, şehir).
**Bileşenler:** Foto'lu yuvarlak kartlar, pill etiketler, avatar kümeleri, alıntı blokları, yumuşak chip'ler, sıcak ikon rozetleri.
**Motion:** Nazik — hover'da hafif scale (1.02), yumuşak gölge artışı, fade-in.
**Ne zaman kazanır:** Topluluk büyütme, üye katılımı, etkinlik/kültür ve duygusal bağ ön plandayken.

---

## D. Yön 3 — "PLATFORM" · Modern Dijital Ekosistem (Product)

**Konumlandırma:** Modern ürün/SaaS, "yenilikçi dijital ekosistem", teknoloji-öncelikli. Koyu tema. Linear/Vercel/Stripe estetiği. Genç diasporaya hitap.

**Renk paleti (koyu öncelikli)**
```css
--bg:#0B1020; --surface:#131A30; --surface-2:#161E38; --line:rgba(255,255,255,.08);
--text:#EAEEF9; --muted:#97A1BC;
--grad-from:#FF3B47;  /* TR kırmızı */
--grad-mid:#7B5CFF;   /* violet köprü */
--grad-to:#2D6BFF;    /* RO mavi */
--accent:#5EE6C2;     /* mint vurgu */
```
**Tipografi:** Manrope. Display 800, sıkı tracking; başlıklarda opsiyonel **gradient metin** (`--grad-from → --grad-to`). İstatistik sayıları iri/teknik. Body `--muted`/`--text`, line-height 1.6.
**Şekil dili:** Orta radius (12–20px), **glassmorphism** (`backdrop-filter: blur`, yarı saydam yüzeyler), **gradient kenarlık & glow/bloom** vurgular, ince ışıltı. Modern, derinlikli.
**Layout:** **Bento grid** modül vitrini, **dashboard/uygulama önizleme** mock'ları, ikon'lu özellik kartları, sayaç istatistikler. Koyu hero'da `hero-platform.jpg` gradient mesh arka plan. (Opsiyonel açık/koyu tema toggle.)
**Hero:** Koyu zemin + `hero-platform.jpg` arka plan/yan görsel, gradient display başlık + alt metin + gradient primary buton + ghost buton; altında küçük "rakamlarla" şeridi ve mini dashboard önizleme kartı.
**Bileşenler:** Glass kartlar, gradient butonlar, glowing rozetler, bento modül grid, dashboard mock kart, toggle, ikon çipleri.
**Motion:** Akıcı — hover'da glow, gradient kayması, parallax-vari hafif hareket, sayaç animasyonu.
**Ne zaman kazanır:** Yenilikçilik, "dijital ekosistem" vizyonu, ürün/teknoloji algısı ve genç kitle hedeflenince.

---

## E. Üç Yönün Karşılaştırması

| Boyut | Köprü (V1) | Diaspora (V2) | Platform (V3) |
|-------|-----------|---------------|----------------|
| Ton | Resmi, güven | Sıcak, insani | Modern, teknolojik |
| Tema | Açık/editöryel | Açık/sıcak | Koyu/ürün |
| Şekil | Köşeli, çizgili | Yuvarlak, yumuşak | Glass, gradient |
| Layout | 12-kol editöryel | Foto-öncelikli | Bento/dashboard |
| Ana his | Kurum & vatandaşlık | Topluluk & aidiyet | Yenilikçi ekosistem |
| Güçlü modül | Vatandaşlık, Üyelik | Etkinlik, Aile, Topluluk | Panel, tüm modül vitrini |