# CSS değişkenleri

> Renklerin, yazı tipinin, köşe yuvarlaklığının ve boşlukların CSS değişkenleriyle markanıza uyarlanması.

Kaynak: /tr/customize/theme/

Varsayılan bileşen renk, yazı tipi ve köşe değerlerini sabit olarak tanımlamaz; hepsini CSS değişkenlerinden okur. Değişkenleri kendi CSS dosyanızda tanımladığınızda bileşen bu değerleri kullanır. Tanımlanmayan değişkenler için kanalın hazır tasarımının değerleri geçerlidir.

## Değişkenler

Tablodaki varsayılan değerler **Sıcak** tasarımındır; diğer tasarımların farklı değerleri için: [Hazır tasarımlar](#hazir-tasarimlar).

| Değişken | Varsayılan | Kullanıldığı yer |
|---|---|---|
| `--review-font` | `inherit` | Tüm metinler. Varsayılan olarak sayfanızın yazı tipi kullanılır. |
| `--review-text` | `#1F1B16` | Ana metin rengi |
| `--review-text-muted` | `#6B6258` | İkincil metinler: yazar adının altındaki rozet ve tarih satırı, "Faydalı mı?" etiketi ve oy düğmeleri, bilgi notları |
| `--review-surface` | `#FFFFFF` | Kartların, düğmelerin, form alanlarının ve yorum yazma alanının arka planı |
| `--review-surface-sunken` | `#FAF6EF` | Filtre düğmelerinin ve görsel yer tutucularının arka planı, düğmelerin üzerine gelindiğindeki arka plan, yorum formundaki bilgilendirme metninin arka planı |
| `--review-border` | `#ECE5DA` | Çizgiler ve kenarlıklar |
| `--review-border-width` | `1px` | Çizgi kalınlığı |
| `--review-accent` | `#1F1B16` | Birincil düğmeler (örneğin "Ara" ve "Gönder"), seçili filtre düğmeleri ve odak çerçevesi |
| `--review-accent-text` | `#FFFFFF` | Birincil düğmelerin ve seçili filtre düğmelerinin metin rengi |
| `--review-star` | `#F2A516` | Yıldızların ve puan çubuklarının dolu kısmı, yorumdaki ölçek işaretçisi |
| `--review-track` | `#EFE4D2` | Yıldızların boş kısmı, puan çubuklarının ve basamaklı ölçeklerin zemini |
| `--review-verified` | `#1F7A4D` | Doğrulama rozeti ve doğrulanmış yorum sayısı |
| `--review-summary` | `#FBF5EB` | Özet panelinin, satıcı yanıtının ve çözüm kaydının arka planı; seçili "Evet" ya da "Hayır" düğmesinin arka planı |
| `--review-summary-text` | `#5B3A0E` | Özet panelindeki, satıcı yanıtındaki ve çözüm kaydındaki metin; özetteki ölçek işaretçisi; seçili oy düğmesinin metni |
| `--review-avatar`, `--review-avatar-text` | Ada göre değişir | Baş harf dairesinin arka planı ve harf rengi. Tanımlanmadığında renk, yazarın adına göre altı renkten biri olur; tanımlandığında tüm yorumlarda aynı renk kullanılır. |
| `--review-radius` | `14px` | Kartların, özet panelinin ve yorum yazma alanının köşe yuvarlaklığı |
| `--review-radius-sm` | `10px` | Düğmelerin, form alanlarının ve görsellerin köşe yuvarlaklığı |
| `--review-space-unit` | `4px` | Boşluk birimi. Tüm aralıklar bu değerin katlarıdır; değer büyütüldüğünde tüm aralıklar orantılı olarak artar. |
| `--review-label-transform` | `none` | "Doğrulanmış alıcı" gibi etiketlerin harf biçimi; örneğin `uppercase` |
| `--review-label-tracking` | `normal` | Aynı etiketlerin harf aralığı; örneğin `0.08em` |

## Hazır tasarımlar

Varsayılan bileşenin sekiz hazır tasarımı vardır: **Sıcak**, **Güven**, **Editoryal**, **Sade**, **Pudra**, **Sportif**, **Doğal** ve **Gece**. Kanalın tasarımı panelde **Mağaza görünümü** ekranında seçilir ([Mağaza görünümü](/tr/features/setup-screens.md#magaza-gorunumu)); container'daki `data-review-theme` attribute'u bu seçimi geçersiz kılar ([Düzen ve CSS seçicileri](/tr/customize/css-hooks.md#duzen)).

Tasarım, değişkenlerin başlangıç değerlerini belirler. Kendi tanımladığınız `--review-*` değerleri her tasarımda önceliklidir; örneğin `--review-accent` tanımladıysanız bütün tasarımlarda sizin renginiz kullanılır. Diğer tasarımlarda **Sıcak**'tan farklı olan değerler aşağıdaki iki tablodadır; "—" yazan değer **Sıcak** ile aynıdır.

| Değişken | Güven | Editoryal | Sade | Pudra |
|---|---|---|---|---|
| `--review-text` | `#17201D` | `#111111` | `#1A1A1A` | `#3A2A33` |
| `--review-text-muted` | `#56625E` | `#666666` | `#6B6B6B` | `#7E6874` |
| `--review-surface-sunken` | `#F2F7F5` | `#F4F4F4` | `#F6F6F6` | `#FFF4F7` |
| `--review-border` | `#DCE7E2` | `#E4E4E4` | `#E6E6E6` | `#F4DCE4` |
| `--review-accent` | `#0F6E56` | `#111111` | `#1A1A1A` | `#B83E68` |
| `--review-star` | `#EF9F27` | `#111111` | `#F5A623` | `#E56F96` |
| `--review-track` | `#E3ECE8` | `#DADADA` | `#EBEBEB` | `#F7E2EA` |
| `--review-verified` | `#0F6E56` | `#3D3D3D` | `#2E7D4F` | `#A0365C` |
| `--review-summary` | `#FFFFFF` | `transparent` | `#FFFFFF` | `#FFF0F4` |
| `--review-summary-text` | `#17201D` | `#111111` | `#1A1A1A` | `#7A2848` |
| `--review-radius` | `12px` | `2px` | `8px` | `22px` |
| `--review-radius-sm` | `8px` | `2px` | `6px` | `14px` |

| Değişken | Sportif | Doğal | Gece |
|---|---|---|---|
| `--review-text` | `#0E0E10` | `#2E3326` | `#F3F3F1` |
| `--review-text-muted` | `#55555C` | `#686D5C` | `#A9A9A4` |
| `--review-surface` | — | — | `#17181A` |
| `--review-surface-sunken` | `#F2F2F4` | `#F4F1E8` | `#222326` |
| `--review-border` | `#DADADF` | `#E3DDCB` | `#323438` |
| `--review-accent` | `#0E0E10` | `#4F6136` | `#F3F3F1` |
| `--review-accent-text` | — | — | `#111214` |
| `--review-star` | `#FF6A00` | `#C98F2E` | `#F5C451` |
| `--review-track` | `#E4E4E9` | `#EAE4D3` | `#3A3C41` |
| `--review-verified` | `#0E0E10` | `#4F6136` | `#7FD1A8` |
| `--review-summary` | `#FFFFFF` | `#F1EDDF` | `#222326` |
| `--review-summary-text` | `#0E0E10` | `#3B4529` | `#F3F3F1` |
| `--review-radius` | `4px` | `12px` | `12px` |
| `--review-radius-sm` | `2px` | `8px` | `8px` |
| `--review-label-transform` | `uppercase` | — | — |
| `--review-label-tracking` | `.08em` | — | — |

Tasarımlar bazı öğelerin biçimini de değiştirir:

- **Güven** ve **Sportif** tasarımlarında ortalama puan `--review-accent` renginde bir kutuda gösterilir ve "Faydalı mı?" oy düğmeleri çerçevelidir.
- **Güven** ve **Sade** tasarımlarında özet paneli ince bir çerçeveyle çevrilir.
- **Güven** ve **Doğal** tasarımlarında puan çubuklarının dolu kısmı ve ölçek işaretçisi `--review-accent` rengindedir; satıcı yanıtı ve çözüm kaydının sol kenarında bu renkte bir çizgi bulunur. **Güven** tasarımında kartlı düzende kartların sol kenarındaki çizgi de bu renktedir.
- **Editoryal** tasarımında baş harf dairesi gösterilmez, yorum başlıkları tırnak içinde yazılır ve özet bir panel yerine alt çizgiyle ayrılır.
- **Sportif** tasarımında özet `--review-text` renginde kalın bir çerçeveyle çevrilir, ortalama puan kalın ve italik yazılır, yorum başlıkları ve "Doğrulanmış alıcı" gibi etiketler büyük harfle gösterilir; filtre düğmeleri, oy düğmeleri ve "Daha fazla yorum" düğmesi yuvarlak uçlu değil köşelidir.
- **Sade** tasarımında kartların üzerine gelindiğinde gölge çıkmaz.
- **Gece** tasarımı koyu renkli siteler içindir: yorum bölümü kendi koyu zeminiyle (`--review-surface`), iç boşluğuyla ve yuvarlatılmış köşeleriyle gelir; sayfanızın zemini koyu olmasa da bölüm koyu görünür.

Bu farklar da özgüllük eklemeyen kurallarla yazılmıştır; kendi CSS kurallarınız bunları geçersiz kılabilir. **Gece** tasarımının kök öğeye verdiği zemin, iç boşluk ve köşe yuvarlaklığı bunun tek istisnasıdır: ayrıntı için [Düzen ve CSS seçicileri › CSS seçicileri](/tr/customize/css-hooks.md#css-secicileri).

## Tanımlama yeri

Değişkenleri **`:root`** seçicisinde tanımlayın. Yorum formu, sipariş doğrulaması ve fotoğraf görüntüleyici, sayfanın üzerinde açılan ve `body` öğesine eklenen bir dialog içinde gösterilir. Dialog açılırken değişkenlerin o anki değerleri dialog'u açan öğeden (yorum yazma alanından ya da yorum listesinden) okunur ve dialog'a aktarılır. Yorum yazma alanını `data-review-gate` ile container'ın dışında gösteriyorsanız ve değişkenleri yalnızca container'da tanımlarsanız, bu alan ve oradan açılan dialog değerleri almaz.

```css
:root {
  --review-font: "Inter", system-ui, sans-serif;
  --review-text: #111418;
  --review-text-muted: #5b626b;
  --review-accent: #0b4f9c;
  --review-accent-text: #ffffff;
  --review-star: #e0a100;
  --review-radius: 0;
  --review-radius-sm: 0;
  --review-space-unit: 5px;
  --review-label-transform: uppercase;
  --review-label-tracking: 0.06em;
}
```

Farklı sayfalarda farklı bir görünüm istiyorsanız aynı değişkenleri daha dar kapsamlı bir seçicide yeniden tanımlayabilirsiniz; yorum bölümü en yakın tanımı kullanır, dialog da açıldığı yerdeki değerleri alır.

Bileşen `--review-*` değişkenlerini kendisi tanımlamaz; varsayılan ve tasarım değerleri yalnızca kendi kurallarında kullanılır. Kendi CSS kurallarınızda `var(--review-accent)` gibi bir değişken kullanacaksanız değişkeni tanımlayın ya da yedek değer verin: `var(--review-accent, #1f1b16)`.

### Koyu tema

Siteniz yalnızca koyu renkliyse değişkenleri tanımlamak yerine kanal için **Gece** tasarımını seçebilirsiniz ([Hazır tasarımlar](#hazir-tasarimlar)). Siteniz açık ve koyu tema arasında geçiş yapıyorsa değişkenleri koyu tema kuralınızın içinde yeniden tanımlayın. Özet paneli ve satıcı yanıtı `--review-summary` ile `--review-summary-text` değerlerini kullandığı için bu ikisini de tanımlayın:

```css
@media (prefers-color-scheme: dark) {
  :root {
    --review-text: #eceef0;
    --review-text-muted: #a3aab3;
    --review-surface: #15181c;
    --review-surface-sunken: #1d2126;
    --review-border: #2e343b;
    --review-accent: #7fb2ff;
    --review-accent-text: #0b1320;
    --review-track: #2e343b;
    --review-verified: #5cc08a;
    --review-summary: #1d2126;
    --review-summary-text: #eceef0;
  }
}
```

## Erişilebilirlik

- `--review-text` ile `--review-surface` arasında, `--review-verified` ile `--review-surface` arasında, `--review-summary-text` ile `--review-summary` arasında ve `--review-accent-text` ile `--review-accent` arasında en az 4,5:1 kontrast oranı bulunmalıdır.
- Odak çerçevesi `--review-accent` renginde gösterilir ve kaldırılmamalıdır; klavyeyle gezinen ziyaretçiler hangi öğede olduklarını bu çerçeveyle görür.
- Yıldızlar, ekran okuyucular için ayrıca metin olarak da sunulur (örneğin "5 üzerinden 4"); yalnızca rengi değiştirmeniz yeterlidir.

## Stillerin kapsamı

Bileşenin stil kuralları yalnızca kendi öğelerine uygulanır ve sayfanızdaki diğer öğeleri etkilemez. Bileşen, kök öğesinde miras alınan stilleri sıfırlar (`all: initial`); bu nedenle sayfanızdaki `button`, `p` ya da `li` gibi etiket seçicili genel kurallar bileşenin görünümünü değiştirmez. Sınıf ya da ID içeren daha özgül kurallarınız ise bileşenin içindeki öğelere de uygulanabilir.

Değişkenlerle yapılamayan değişiklikler için: [Düzen ve CSS seçicileri](/tr/customize/css-hooks.md).