# Marka Teması

Renkler, yazı tipleri, logo ve marka sesi — yüzeyler ve yapay zekâ için
Kaynak: https://selwise.com/docs/brand/theme

Marka ekranı iki şeyi tek yerden belirler. Birincisi **görünüm**: Selwise'in sitenizde gösterdiği her yüzeyin — kampanya, öneri kartı, arama sonucu, ürün zenginleştirme bloğu — renkleri, köşeleri ve yazı tipleri. On soru cevaplarsınız, Selwise bunlardan yirmi iki CSS değişkeni türetir. Soru sayısı sabittir: türetilen değişkenlerin bir kısmı, siz hiçbir şey yazmadan, verdiğiniz cevapların okunabilir karşılığıdır — indirim renginin üzerindeki yazı rengi ya da ikincil rengin hover hâli gibi.

İkincisi **kimlik ve ses**: marka adı, logo ve markanızın nasıl konuştuğu. Bunlar mağaza yüzeylerine gitmez; yapay zekâ üretimleri ve e-posta başlığı kullanır.

## Panelde nerede

Sol menüde **Tasarım → Marka** (Design → Brand) (`/dashboard/theme`). Marka **seçili kanala aittir**: kanal seçili değilse ekran "Select a site first." (Önce bir site seçin.) der. Ekranı görmek için kanal görüntüleme, kaydetmek ve yayınlamak için kanal güncelleme yetkisi (`admin`) gerekir.

Ekran üç sekmeden oluşur ve sağdaki önizleme hangi sekmede olursanız olun görünür kalır:

- **Colours** (Renkler) — hazır başlangıç paletleri ve renk soruları, rol rol gruplanmış: ana renk, ikincil ve indirim, zemin ve metin. Her grubun altında rengin kendi örneği ve kontrast değeri durur.
- **Shape & type** (Biçim ve yazı tipi) — köşe stili ve iki yazı tipi.
- **Identity & voice** (Kimlik ve ses) — marka adı, logo ve marka sesi.

Önizleme küçük bir mağaza sayfasıdır: duyuru çubuğu, logo, arama kutusu, bir kampanya açılır penceresi, öneri şeridindeki ürün kartları, arama sonuçları ve buton durumları. **Editing / Live** (Düzenlenen / Yayındaki) seçimiyle yaptığınız değişikliği mağazanızın şu anki görünümüyle karşılaştırabilir, **Dark storefront** (Koyu mağaza) ile koyu zeminli bir mağazada nasıl göründüğüne bakabilirsiniz.

## On alan

| Alan | Ne yapar | Boş bırakılırsa |
|---|---|---|
| **Brand colour** (Marka rengi) | Ana marka rengi: butonlar, bağlantılar, vurgular | Tema uygulanmaz |
| **Text on brand** (Marka üzerindeki yazı) | Marka renginin **üzerindeki** yazı rengi | Kontrasta göre otomatik türetilir |
| **Brand hover** (Marka hover rengi) | Marka renginin üzerine gelince | Marka renginden otomatik türetilir |
| **Secondary colour** (İkincil renk) | İkincil buton rengi | **Türetilmez** — boş kalır |
| **Discount colour** (İndirim rengi) | İndirim rozeti ve etiketleri | Markaya yakın bir kırmızıya düşer |
| **Text colour** (Metin rengi) | Gövde metni rengi | Varsayılan |
| **Card background** (Kart zemini) | Kart, açılır pencere ve panel arka planı | Varsayılan |
| **Corners** (Köşeler) | Köşe yuvarlaklığı: **Sharp** / **Soft** / **Round** (Keskin / Yumuşak / Yuvarlak) | Varsayılan |
| **Body font** (Gövde yazı tipi) | Gövde yazı tipi | **Sitenizin yazı tipi kullanılır** |
| **Heading font** (Başlık yazı tipi) | Başlık yazı tipi | Gövde yazı tipine düşer |

Boş bıraktığınız bir renk alanının yanında **automatic** (otomatik) yazar ve kutuda türetilen değer görünür; boş bırakmak görünür bir seçimdir.

**Start from a preset** (Hazır bir başlangıçtan devam edin) altındaki paletler — **Monochrome** (Monokrom), **Warm** (Sıcak), **Fresh** (Ferah), **Bold** (Çarpıcı) — yalnızca renkleri ve köşe stilini değiştirir; yazdığınız yazı tipleri ve kimlik bilgileri korunur. Bir paleti uyguladıktan hemen sonra **Undo** (Geri al) ile önceki renklerinize dönebilirsiniz.

> **İkincil renk neden türetilmiyor**
>
> Tahmin edilen bir ikincil renk, hiç renk olmamasından kötüdür: markanıza ait olmayan bir renk tüm ikincil butonlarda görünür. Bu yüzden yalnızca siz belirtirseniz uygulanır. Kısmen doldurulmuş bir tema, bilinçli olarak kısmen uygulanan bir temadır.

## Renk alanları

**Colours** sekmesi renkleri üç grupta toplar: **Primary colour** (marka rengi, üzerindeki yazı, hover), **Secondary & sale** (ikincil ve indirim) ve **Surface & text** (kart zemini ve metin; kenarlık, gölge ve soluk metin bunlardan türetilir).

- Renkler **hex** olarak yazılır: `#e45a80` ya da kısa `#e5a`. Geçersiz bir değer yazarsanız "Enter a valid hex colour" der ve kaydetmeyi durdurur; yapıştırılan geçersiz bir değer atılır ve önceki değer korunur.
- Her alanın yanında renk seçici, ekrandan renk alan damlalık (**Pick a colour from the screen**) ve alanı temizleyen simge (**Clear this field**) vardır.
- Her renk çifti (zemin ve üzerindeki yazı) için **Contrast** değeri gösterilir (`Contrast 4.8:1 — readable`). WCAG AA için 4,5:1 gerekir; 3:1 ile 4,5:1 arası "readable at large sizes only", altı "this will be hard to read" der. Bu bir uyarıdır, kaydetmeyi engellemez.
- Kaydetmeyi yalnızca iki şey engeller: geçersiz bir yazı tipi adı ve geçersiz bir logo adresi. Bu durumda düğmelerin altında **Fix this before saving** (Kaydetmeden önce düzeltin) satırı ve ilgili sekmeye **Go to the field** bağlantısı çıkar.
- Sayfanın altındaki **Derived values** (Türetilen değerler) kutusu, yukarıdaki cevapların hangi 22 değişkene çözüldüğünü (marka, marka hover, marka üstü yazı, ikincil, metin, soluk metin, zemin, kenarlık, fiyat, indirim, köşe yarıçapı, gölge, yazı tipleri, boşluk, katman…) gösterir. Listede olmayan her değişken **boş bırakılır**; onu okuyacak yüzey kendi yerleşik görünümünü korur.

### Marka diğer ekranlarda

Markayı yayınladıktan sonra kampanya, widget, öneri ve ürün kartı ekranlarındaki renk alanları markayı **izler**: alanın yanında **from brand** (markadan) yazar. **Brand palette** (Marka paleti) simgesinden bir renk seçerseniz alan markaya bağlı kalır — markayı değiştirdiğinizde o alan da değişir. Alanı elle değiştirirseniz bağ kopar; **back to brand** (markaya dön) bağı geri kurar. Marka yayınlanmadıysa palet boştur ("Publish a brand theme to use the palette").

## Yazı tipini boş bırakmak bir özelliktir

**Body font** alanını boş bırakırsanız (örnek metin: "Same as my storefront") Selwise hiçbir yazı tipi dayatmaz ve widgetlar sitenizin kendi yazı tipini miras alır. Kendi marka yazı tipini kullanan mağazalar için doğru seçim budur.

> **Yazı tipini Selwise indirmez**
>
> Bu alana bir yazı tipi adı yazdığınızda (en fazla 120 karakter; `; { } < > ( )` karakterleri ve ters bölü kabul edilmez, açılan her tırnak kapanmalıdır) Selwise yalnızca adı kullanır; yazı tipi dosyasını indirmez. Alanın altındaki örnek satır, yazdığınız yazı tipiyle çizilir — adı yanlış yazarsanız örnek hemen tarayıcının varsayılan yazı tipine düşer. Dolayısıyla yazdığınız yazı tipini sitenizin hâlihazırda sunuyor olması gerekir. Sunmuyorsa tarayıcı kendi varsayılanına düşer ve tüm Selwise yüzeyleri beklediğinizden farklı görünür.

## Köşe stili neden piksel değil

Üç seçenek vardır ve bilinçli olarak kabadır:

| Seçenek | Büyük yarıçap | Küçük yarıçap |
|---|---|---|
| **Sharp** (`square`) | 0px | 0px |
| **Soft** (`soft`) | 8px | 4px |
| **Round** (`round`) | 16px | 9999px (tam yuvarlak) |

Marka bir *his* seçer, piksel değil. Tek tek yarıçap ayarlamak, yüzeyler arasında tutarsızlık üretmenin en kolay yoludur.

## Kimlik ve ses

| Alan | Ne yapar |
|---|---|
| **Brand name** (Marka adı) | Müşterinin bildiği ad (en fazla 80 karakter). Yapay zekâ markayı anarken tam olarak bunu yazar. |
| **Logo** | E-postaların başında varsayılan logo olur. Yapay zekâ bir açılır pencere ya da hero tasarlarken kullanabilir. Logonun hem zemin (**On the surface**) hem marka rengi (**On the brand colour**) üzerinde nasıl durduğu ekranda gösterilir. Adres `http://` ya da `https://` ile başlamalı, boşluk ve `" ' < >` içermemeli, en fazla 500 karakter olmalıdır; açılamayan bir görsel için "The image at that address could not be loaded" uyarısı çıkar. |
| **Tone** (Ton) | **Friendly**, **Premium**, **Playful**, **Professional**, **Bold** ya da **Minimal** (Samimi, Premium, Eğlenceli, Profesyonel, Cesur, Sade). |
| **Form of address** (Hitap) | **Informal** (sen) ya da **Formal** (siz). Bir kampanyanın içinde ikisinin karışması çeviri hatası gibi okunur. |
| **Describe the brand** (Markayı kısaca anlatın) | Kim olduğunuzu ve nasıl konuştuğunuzu bir iki cümleyle (en fazla 400 karakter). |
| **Words to avoid** (Kaçınılacak ifadeler) | Markanızın asla kullanmadığı kelimeler, iddialar ya da üslup (en fazla 200 karakter). |
| **Emoji** | **No preference** (Tercih yok), **Sparingly** (Ölçülü kullan) ya da **Never** (Hiç kullanma). |

Bu bilgiler mağaza yüzeylerine CSS değişkeni olarak gitmez; widget'larınızın görünümünü değiştirmez.

## Yapay zekâ markanızı nasıl kullanır

Panelin bütün yapay zekâ kapıları — Yapay Zeka Stüdyosu, kampanya formu, ürün kartı ve içerik bloğu kod düzenleyicisi, mesaj editörü ve senaryo üretimi — isteği seçili kanalın **yayındaki** markasıyla birlikte gönderir:

- **Tasarımlarda** renkler, köşeler ve yazı tipleri temel alınır; ana çağrı butonu marka rengiyle çizilir. Üretilen CSS renkleri marka değişkenleriyle ve yanlarında markanızın değeriyle yazar, örneğin `var(--selwise-brand, #c93a63)`. Böylece markanızı sonradan değiştirdiğinizde üretilmiş tasarım da onu izler.
- **Metinlerde** seçtiğiniz ton ve hitap kullanılır, marka adınız yazdığınız gibi geçer; kaçınılacak ifadeler kullanılmaz.
- **E-postada** renkler sabit değer olarak yazılır (e-posta istemcileri CSS değişkeni okuyamaz) ve logo başlığa otomatik eklenir. SMS ve bildirimlerde yalnızca marka sesi kullanılır.
- Marka **bağlayıcı ama kilitli değildir**: sezona ya da kampanyaya uygun tonlar, nötrler ve vurgular eklenebilir; sonuç ise markanızın tasarımı gibi görünmelidir. İsteğinizde başka renk, yazı tipi ya da stil yazarsanız isteğiniz kazanır.
- Var olan bir tasarımı **düzenletirken** mevcut renkler ve yazı tipleri korunur; yeni eklenen parçalar önce mevcut koda, sonra markaya uyar.

Her yapay zekâ penceresinde markanın uygulanıp uygulanmayacağını gösteren bir satır vardır. Buradaki anahtarla markayı kapatabilirsiniz — örneğin başka bir markanın renkleriyle yapılacak ortak bir kampanya için. Seçiminiz bütün yapay zekâ pencerelerinde geçerlidir.

> **Taslak yapay zekâya gitmez**
>
> Yapay zekâ, e-postalar gibi yalnızca **yayınlanmış** markayı okur. Taslaktaki bir renk ya da marka sesi, siz yayınlayana kadar hiçbir üretime yansımaz.

## Taslak ve yayınlama

Tema, panelde **taslağı olan tek varlıktır**. Sebebi: bir tema değişikliği aynı anda her yüzeyi etkiler, dolayısıyla kaydetmekle yayınlamak ayrılmıştır. Kimlik ve ses de aynı taslağın parçasıdır.

1. Değişiklik yaparsınız — başlıkta **Unsaved changes** (Kaydedilmemiş değişiklik) yazar.
2. **Save as draft** (Taslak olarak kaydet) ile saklarsınız; başlıkta **Draft — not live** (Taslak — yayında değil) yazar, mağazanız değişmez.
3. **Publish** (Yayınla) ile canlıya alırsınız; başlıkta **Live** (Yayında) yazar. Yeni görünüm mağazanıza birkaç dakika içinde ulaşır.

Henüz hiç tema yoksa başlık **No brand yet** (Henüz marka yok) der; yayınlanacak bir değişiklik yokken **Publish** gri durur ("Nothing to publish").

Başlıktaki **More actions** (Diğer işlemler) menüsünde **Discard draft** (Taslağı at), **Revert changes** (Değişiklikleri geri al) ve **Remove theme** (Temayı kaldır) bulunur. **Remove theme** renkleri, köşeleri ve yazı tiplerini siler; marka adı, logo ve marka sesi korunur. Kaydedilmemiş değişiklikle sayfadan ayrılmaya çalışırsanız tarayıcı sizi uyarır.

Önizleme, canlıda çalışan hesaplamanın **aynısını** kullanır; önizlemede gördüğünüz ile yayınlanan sonuç ayrışamaz.

## Tema uygulanmazsa ne olur

Her yüzey, tema değerini bir yedekle birlikte okur. Tema tanımlı değilse, bozuksa ya da desteklenmeyen bir değer içeriyorsa yüzey **temalar var olmadan önceki görünümüne** düşer. Yani tema uygulamak geri alınabilir bir işlemdir; hiçbir zaman bozuk bir görünüme yol açmaz.

## Tema nerede geçerli değil

Üç tür alan bilinçli olarak temaya bağlanmamıştır:

- **Tablo ile çözülen değerler** — gölge yoğunluğu, yazı kalınlığı, hazır yarıçap seçenekleri. Bunlar bir listeden seçilir, CSS değişkeni bir liste anahtarı olamaz.
- **Program tarafından işlenen renkler** — örneğin arama kutusunun odak halkası, marka renginin şeffaflaştırılmış halidir; değişken üzerinden hesaplanamaz.
- **Anlam taşıyan renkler** — arama teriminin vurgusu, "trend" etiketinin amber rengi. Bunlar marka rengi değil, durum rengidir; markaya bağlanırsa anlamlarını kaybederler.

## Sırada ne var

- [Widget Stil Özelleştirme](/docs/widgets/styling) — widget bazlı geçersiz kılma.
- [Ürün Kartı Stili](/docs/product-cards/styling)