# Stil Özelleştirme

Renk, köşe, gölge ve tipografi
Kaynak: https://selwise.com/docs/widgets/styling

Kampanyanın görünümü üç katmanda belirlenir: **marka teması** tüm yüzeylerin ortak görünümünü verir, **Style** bölmesindeki ayarlar bu kampanyaya özel farkları tanımlar, **Custom CSS** son sözü söyler.

## Panelde nerede

Kampanya kurucusu → **Design** (Tasarım) adımı → **Style** (Stil) bölmesi. Sağdaki önizleme her değişiklikte yenilenir. **Tab Talk** tipinde bu bölme yoktur: sekme şeridini tarayıcı çizer ve bir sayfa onun yazı tipine ya da rengine karışamaz.

## Katman sırası

```
1. Marka teması        → tüm yüzeyler için ortak renk, köşe, yazı tipi
2. Style ayarları      → bu kampanyaya özel geçersiz kılma
3. Custom CSS          → son söz
```

Çoğu durumda 1. katman yeterlidir. Her kampanyayı ayrı ayrı renklendirmek, marka renginizi değiştirdiğinizde hepsini tek tek güncellemek anlamına gelir. Marka temasını **Tasarım → Marka** (Design → Brand) ekranında kurarsınız — [Marka Teması](/docs/brand/theme).

## Markayı izlemek ve ayrılmak

Renk alanları marka temasının bir rengine bağlı olarak gelir ve yanlarında **from brand** (markadan) rozeti durur: alan markayı **izliyor** demektir ve markayı değiştirdiğinizde kampanya da değişir. Alana kendi rengini seçtiğinizde bağ kopar, rozet kaybolur ve kampanya markadan bağımsız kalır. Geri bağlamak için **back to brand** (markaya dön) bağlantısına ya da renk seçicinin içindeki **Brand palette** (Marka paleti) satırına tıklayın; paletten seçilen renk de markayı izlemeye devam eder. Marka teması hiç yayınlanmamışsa palet boş görünür ve alan kendi yedek rengini kullanır.

Pratik kural: rengi yalnızca **bilerek farklı** olmasını istediğinizde seçin.

## Stil bölümleri

Hangi bölümlerin çıktığı tipe bağlıdır; bir bölüm yoksa o tip için anlamlı değildir (duyuru çubuğunda **Overlay** yoktur).

| Tip | Bölümler |
|---|---|
| Announcement Bar | Colors, Typography, Layout (Padding, Border Bottom), Image (ikon boyutu, köşe, aralık), Close Button |
| Inline Banner | Colors, Layout, Effects (Shadow, Border), Image, Content Layout |
| Floating Button | Colors, Size & Shape, Effects (Shadow, **Pulse Animation**), Tooltip |
| Modal | Colors, **Overlay** (renk, opaklık, bulanıklık), Layout (genişlik, yükseklik, hizalama), Image (bleed dahil), Typography, Effects (**Animation**), Close Button |
| Slide In | Colors, Layout (Width), Image, Effects, **Position** (kenar boşlukları) |
| Embedded Card | Colors, Layout, Effects, Image, Content Layout |
| Sticky Footer | Colors, Layout, Effects (Border Top), Close Button |
| Countdown Timer | Colors, Timer Style, Layout (Separator Style) |
| Newsletter | Colors (giriş kutusu renkleri dahil), Typography, Layout, Effects (Close Button dahil) |
| Goal Bar | Colors (bar renkleri dahil), Typography, Progress Bar, Layout, Effects, Close Button |
| Product View Count, Cart Count | Renkler, Düzen, Animasyon (sayaç animasyonu, ayıraç); Cart Count'ta ayrıca **Aciliyet Rozeti** |
| Custom Widget | Container (iç boşluk, arka plan) — görünümü asıl HTML ve CSS'iniz belirler |

Bölüm başlıkları panelde Türkçe dilinde Colors (Renkler), Layout (Yerleşim), Typography (Tipografi), Effects (Efektler), Close Button (Kapatma Butonu), Overlay (Katman), Image (Görsel), Position (Konum), Size & Shape (Boyut ve Şekil), Tooltip (İpucu Metni) olarak görünür; iki sayaç tipinin bölümleri yalnızca Türkçe yazılmıştır.

Bir stil ayarı seçeneklerden biri olmak zorundadır (köşe yuvarlama `0px` ile `16px` gibi hazır değerler, gölge `none` ile `xl` arası). API'ye elle yazarken tipin tanımadığı bir stil anahtarı `400` ile reddedilir; tipin tanıdığı anahtarlar yukarıdaki bölümlerdeki alanlardır.

## Close Button

**Show Close Button** (Kapatma Butonunu Göster) anahtarı Duyuru Çubuğu, Sabit Alt Çubuk, Modal, Bülten ve Hedef Çubuğu'nda bulunur; varsayılan açıktır. Kayarak Gelen Panel ve Geri Sayım Sayacı'nda kapatma butonu her zaman vardır. Ziyaretçinin kampanyayı kapatması yalnızca o sayfa gösterimi içindir: sonraki sayfada, sıklık sınırı izin veriyorsa kampanya yeniden görünür. İstisna Hedef Çubuğu'dur: kapatılınca oturum boyunca yeniden açılmaz. Kampanyanın butonuna tıklamak ise Duyuru Çubuğu, Modal ve Kayarak Gelen Panel'i o tarayıcıdan kalıcı olarak kaldırır — [Tetikleyiciler](/docs/widgets/triggers#modal-ne-zaman-bir-daha-açılmaz).

## Custom CSS

Her kampanyanın **Code** bölmesinde **Custom CSS** alanı vardır; kurallar, temizlenen parçalar ve kapsam için [Özel Kod](/docs/campaigns/custom-code). Marka değişkenlerini orada da okuyabilirsiniz:

```css
.selwise-bar-text {
  font-family: var(--selwise-font-heading, var(--selwise-font, inherit));
  color: var(--selwise-text, #111);
}
```

Değişkenlerin tam listesi: [Marka Teması](/docs/brand/theme).

## Mobil

Ayrı bir mobil stil seti yoktur; aynı ayarlar her ekranda geçerlidir. Yüzeyler dar ekranda kendi kurallarıyla uyum sağlar (çubuklar satıra sarar, kapatma butonuna yer ayrılır). Mobilde farklı bir görünüm gerekiyorsa Custom CSS içinde medya sorgusu kullanın:

```css
@media (max-width: 640px) {
  .selwise-widget { padding: 12px; font-size: 14px; }
}
```

## Önizleme

Önizleme kampanyayı gerçek çizim koduyla çizer. Sitenizin kendi CSS'i önizlemede yoktur; sitenizde farklı görünüyorsa sebebi genellikle sitenizin stillerinin kampanyaya sızmasıdır. Önizlemenin altındaki kaydırıcılar (hedef çubuğunda sepet tutarı, koşullu içerikte önizlenen durum) yalnızca önizlemeyi etkiler, kaydedilmez.