# SanalAjans — Marka Kılavuzu

**Sürüm 1.0**

> Bu belge markanın yazılı kaynağıdır. Renk ve ölçü değerlerinin makine tarafından
> okunabilir hali `brand/tokens.css` dosyasındadır; ikisi çeliştiğinde `tokens.css` geçerlidir.

---

## 1. Marka özü

**Ne yapıyoruz:** Yapay zekayla güçlendirilmiş tam hizmet ajansıyız. Her sektörden şirkete
strateji, içerik, tasarım, reklam, dijital varlık ve ölçüm hizmeti veriyoruz.

**Neyi yapmıyoruz:** Ajanslara yazılım satmıyoruz — biz ajansın kendisiyiz. Ve müşterinin
yerine karar vermiyoruz: para harcayan, yayına çıkan ve marka sesini değiştiren her adım
müşteri onayına takılır.

**Tek cümlelik konum:** *Markanızın her işi tek elden — yapay zekayla çalışan bir ajanstan.*

**Hedef kitle:** Her ölçekten, her sektörden şirket. Ajanslar müşterimiz değil, rakibimiz.

**Üç ilke**

1. **İnsan son sözü söyler.** Onay eşiklerini müşteri belirler.
2. **Her karar izlenebilir.** Hangi ajan neye bakarak ne yapmış, geriye dönük görülebilir.
3. **Kapatılabilir olmalı.** Tek anahtarla her otomasyon durur.

---

## 2. İşaret

İşaret bir altıgendir, ama **tek parça çizilmez**: altı ayrı kenardan oluşur.
Her kenar bir disiplini temsil eder: strateji, içerik, tasarım, reklam, dijital varlıklar,
ölçüm. Kenarlar birbirine değmez; onları bir arada tutan merkezdeki **çekirdek** — yani
hepsini tek ekipte birleştiren sistemimizdir.

Boşluklar bir stil tercihi değil, markanın fikridir: *bağımsız çalışan parçalar,
ortak bir çekirdek sayesinde tek bir bütün olur.*

### Geometri

| Öğe | Değer |
|---|---|
| Çizim alanı | 64 × 64 birim |
| Dış altıgen | sivri tepeli, çevrel yarıçap 26 |
| Kenar boşluğu | her uçtan kenar uzunluğunun %14'ü |
| Çizgi kalınlığı | 5 birim, yuvarlak uçlu |
| Çekirdek | düz tepeli altıgen, yarıçap 9 |

### Varyantlar

| Dosya | Ne zaman |
|---|---|
| `logo-primary.svg` | Varsayılan. Açık zeminde yatay kilit. |
| `logo-inverse.svg` | Koyu zeminde. |
| `logo-stacked.svg` | Dar ve kare alanlarda. |
| `logo-mark.svg` | İşaret tek başına: avatar, damga, uygulama simgesi. |
| `logo-mark-mono.svg` | Tek renk baskı ve gravür. `currentColor` kullanır. |
| `logo-wordmark.svg` | İşaret zaten yakında görünüyorsa. |
| `favicon.svg` | 24 px altı. Boşluklar kapatılmış sadeleştirilmiş biçim. |

### Sosyal medya profil fotoğrafı

Profil fotoğrafları **daireye kırpılır** ve Gmail gibi arayüzlerde 24–32 px'e kadar küçülür.
Bu ölçekte boşluklu işaret bulanıklaşır, bu yüzden profil fotoğraflarında **sadeleştirilmiş
biçim** (boşluksuz altıgen) kullanılır — favicon ile aynı mantık.

- Zemin daima dolu renk olmalı: **Sinyal 600** (birincil) veya **Mürekkep 950** (alternatif).
- **Beyaz zemin kullanılmaz.** Google ve LinkedIn arayüzleri beyaz olduğu için profil
  fotoğrafı arka planla birleşir ve görünmez olur.
- İşaret, karenin **%58'ini** kaplar; dairesel kırpmada güvenli alanda kalır.
- Dosya 1024×1024 kare yüklenir; platform kendi ölçeklerine indirir.

### Google Workspace / e-posta başlığı logosu

Google Workspace yatay logo ister: **320×132 px**, PNG. Gmail başlığında görünür.

- Kutunun tamamı doldurulmaz: kilit **270 px** genişliktedir, iki yanda boşluk kalır.
- İşaret yüksekliği kelime markası puntosunun **1,75 katıdır**. Bu oran bozulursa işaret
  kelimeyi ezer ya da kelime okunmaz hale gelir.
- Açık tema varsayılandır: `workspace-logo.png` (şeffaf zemin, koyu kelime markası).
- Koyu tema kullanılıyorsa `workspace-logo-koyu.png` yüklenir. Workspace tek dosya kabul
  ettiği için ikisi aynı anda kullanılamaz.
- Beyaz zeminli sürüm (`workspace-logo-beyaz.png`) yalnızca şeffaflığın sorun çıkardığı
  yerler için yedektir.

### Koruma alanı ve en küçük boyut

- İşaretin çevresinde **çekirdek altıgenin genişliği kadar** boş alan bırakılır.
- İşaret **en az 24 px** yüksekliğinde kullanılır. Daha küçük yerlerde `favicon.svg` biçimine geçilir.
- Yatay kilit **en az 120 px** genişliğinde kullanılır.

### Yapılmaz

- Kenarlardaki boşluklar kapatılmaz, altıgen tek parça hale getirilmez.
- Oranlar bozulmaz; yatay veya dikey esnetilmez.
- İşaretin içine marka geçişi uygulanmaz; düz renk kullanılır.
- Gölge, dış çizgi, kabartma eklenmez.
- Kelime markası yeniden dizilmez, büyük harfle yazılmaz.
- Renkli kullanımlarda çekirdek ile kenarlar aynı renge boyanmaz; ikisinin farkı markanın
  kendisidir. Tek istisna, tek renk baskı için hazırlanan `logo-mark-mono.svg` biçimidir.

> **Not:** SVG dosyalarındaki kelime markası sistem yazı tipiyle çizilir. Baskı ve
> üçüncü taraf kullanımları için harfleri outline'a çevirin.

---

## 3. Renk

Dört rampa, dört ayrı iş yapar.

| Rampa | Rol | Ana ton |
|---|---|---|
| **Mürekkep** | Taşıyıcı: metin, yüzey, çerçeve | `#1A1A24` (800) |
| **Sinyal** | Birincil: eylem, bağlantı, vurgu | `#4535E6` (600) |
| **Akış** | İkincil: veri, hareket, canlılık | `#00BFAE` (500) |
| **Nabız** | Üçüncül: dikkat, bekleyen onay | `#FFB020` (500) |

### Anlamsal roller

Arayüzde ham rampa değil, rol kullanılır:

```
--sa-brand         #4535E6   düğme, bağlantı, aktif durum
--sa-accent        #00BFAE   grafik, canlı gösterge, çekirdek
--sa-text          #1A1A24   gövde ve başlıklar
--sa-text-muted    #6A6A80   ikincil metin
--sa-text-subtle   #74748A   en açık metin tonu
--sa-text-faint    #9494A8   METİN DEĞİL: ayraç, ikon, süs
--sa-bg-sunken     #F7F7FA   bölüm ayrımı, kart zemini
--sa-bg-inverse    #08080C   sinema bölümleri, 3B sahne
```

### Kontrast kuralları

WCAG 2.1'e göre normal metinde eşik **4.5:1**. Hesaplanmış değerler:

| Ön plan | Zemin | Oran | Sonuç |
|---|---|---|---|
| Mürekkep 800 | Beyaz | 17.3:1 | ✅ |
| Mürekkep 500 | Beyaz | 5.3:1 | ✅ |
| Metin (en açık) `#74748A` | Beyaz | 4.6:1 | ✅ |
| Mürekkep 400 | Beyaz | 3.0:1 | ❌ metin için kullanılmaz |
| Sinyal 600 | Beyaz | 7.2:1 | ✅ |
| Beyaz | Sinyal 600 | 7.2:1 | ✅ |
| Sinyal 600 | Mürekkep 950 | 2.8:1 | ❌ koyu zeminde metin olmaz |
| Sinyal 300 | Mürekkep 950 | 8.5:1 | ✅ koyu zeminde bağlantı |
| Akış 500 | Beyaz | 2.3:1 | ❌ metin için kullanılmaz |
| Akış 500 | Mürekkep 950 | 8.6:1 | ✅ |

**Sonuç:** Akış 500 açık zeminde, Sinyal 600 koyu zeminde **yalnızca grafik öğesidir**.
Bu bir eksiklik değil, kasıtlı bir sınırdır.

### Marka geçişi

```css
linear-gradient(104deg, #4535E6 0%, #7D71FF 38%, #00BFAE 100%)
```

Yalnızca büyük yüzeylerde ve dekoratif başlıklarda. Küçük öğelere, ikonlara ve
işaretin içine uygulanmaz.

---

## 4. Tipografi

Tek aile: **sistem yazı tipi**. Apple cihazlarda SF Pro'ya, diğerlerinde Inter ve
Helvetica Neue'ye düşer. Böylece hiçbir yazı tipi indirilmez — sayfa daha hızlı açılır.

```css
-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
"Inter", "Helvetica Neue", system-ui, sans-serif
```

| Kademe | Boyut | Ağırlık | Harf aralığı |
|---|---|---|---|
| Display | clamp(46–112px) | 700 | −0.042em |
| Başlık 1 | clamp(38–68px) | 700 | −0.03em |
| Başlık 2 | clamp(30–52px) | 700 | −0.026em |
| Başlık 3 | clamp(23–32px) | 600 | −0.02em |
| Giriş | clamp(19–25px) | 400 | −0.015em |
| Gövde | 17px / 1.53 | 400 | −0.01em |
| Küçük | 14px | 400 | −0.01em |
| Mikro | 12px | 400 | +0.06em (büyük harfte) |

**Kural:** Punto büyüdükçe harf aralığı daralır. Büyük başlıklar sıkı, küçük metinler nefes alır.

---

## 5. Hareket

Markanın hareket ilkesi tek cümledir: **hareket süreye değil, kaydırma konumuna bağlıdır.**

1. **Geri sarabilir.** Her sahne kaydırma konumundan hesaplanır. Aynı konum her zaman
   aynı kareyi verir; yukarı kaydırınca animasyon geri sarar.
2. **Kesintiye uğrayabilir.** Kullanıcı hiçbir animasyonun bitmesini beklemez.
   Kaydırma asla ele geçirilmez (scroll hijacking yok).
3. **Kapatılabilir.** `prefers-reduced-motion` açıkken tüm sahneler durur ve içerik
   düz bir sayfa olarak okunur.

Anlık geri bildirimler (imleç, odak, düğme) için:

```css
transition: … 300ms cubic-bezier(.28,.11,.32,1);
```

---

## 6. Ses tonu

Sakin, kesin, abartısız. Yapay zekayı sihir gibi anlatmayız.

| İlke | ✅ | ❌ |
|---|---|---|
| **Somut konuş** | Altı disiplin tek ekipte çalışır, tek fatura kesilir. | Devrim niteliğinde bir hızlanma yaşarsınız! |
| **Sınırı da söyle** | Para harcayan her adım onayınıza gelir. | Her şeyi sizin yerinize halleder, hiç düşünmeyin. |
| **Sade Türkçe** | İş akışını duraklatın. | Workflow'u pause edin. |
| **İnsanı merkezde tut** | Üretimi biz yaparız, son sözü siz söylersiniz. | Yapay zeka pazarlama ekibinizin yerini alır. |

**Yazım kuralları**

- Marka adı her yerde tek kelime ve büyük harfle başlar: **SanalAjans**.
  Logoda ve alan adında küçük harf kullanılır: `sanalajans`.
- Ajanlardan "o" diye söz edilir, "kişi" gibi anlatılmaz.
- Rakam verilirken neyin rakamı olduğu belirtilir.
- Ünlem işareti kullanılmaz.

---

## 7. Varlık listesi

**Vektör** — `logo-primary.svg`, `logo-inverse.svg`, `logo-stacked.svg`,
`logo-mark.svg`, `logo-mark-mono.svg`, `logo-wordmark.svg`, `favicon.svg`

**Raster** — `logo-primary-1600.png`, `logo-inverse-1600.png`, `logo-mark-1024.png`,
`logo-mark-512.png`, `og-image.png` (1200×630), `apple-touch-icon.png` (180),
`icon-192.png`, `icon-512.png`, `icon-maskable-512.png`

**Sosyal profil fotoğrafı** — `avatar-google.png` (birincil), `avatar-koyu.png` (alternatif).

**Google Workspace** — `workspace-logo.png` (birincil, 320×132), `workspace-logo-koyu.png`,
`workspace-logo-beyaz.png`.
Her ikisi de 1024×1024 kare; Google, LinkedIn ve X profillerinde kullanılır.

**Kod** — `tokens.css` (tüm değerlerin makine okunabilir hali), `site.webmanifest`

---

## 8. Yayına almadan önce

Alan adı `sanalajans.com` olarak yazıldı; canonical, Open Graph, JSON-LD, `sitemap.xml` ve
`robots.txt` bu adrese işaret ediyor. Kalan işler:

1. İletişim formunu gerçek bir uç noktaya bağlayın (`iletisim.html` → `data-endpoint`).
2. Paket fiyatlarını doğrulayın.
3. KVKK aydınlatma metni, gizlilik ve çerez politikası sayfalarını ekleyin.
4. Kelime markasının harflerini outline'a çevirip SVG'leri yeniden dışa aktarın.

Sitedeki sayısal ifadeler yalnızca doğrulanabilir olanlarla sınırlandırıldı: altı disiplin,
elli iki hizmet kalemi. Müşteri sayısı, ekip büyüklüğü ve teslim süresi gibi iddialar,
gerçek verileriniz elinizde olduğunda eklenmelidir — reklam mevzuatı bu iddiaların
ispatlanabilir olmasını gerektirir.