# Düzen ve CSS seçicileri

> Hazır tasarımın, düzenin ve liste ya da ızgara diziliminin seçilmesi, yorum yazma alanının konumlandırılması ve bileşendeki her öğenin kendi CSS kurallarınızla biçimlendirilmesi.

Kaynak: /tr/customize/css-hooks/

## Düzen

Varsayılan bileşenin sekiz hazır tasarımı ve iki düzeni vardır. Kanalın tasarımı ve düzeni panelde **Mağaza görünümü** ekranında seçilir; yeni kanallarda tasarım **Sıcak**, düzen **Kartlı**'dır (bkz. [Mağaza görünümü](/tr/features/setup-screens.md#magaza-gorunumu)). Container'daki ya da script etiketindeki `data-review-theme` ve `data-review-style` attribute'ları bu seçimi geçersiz kılar; tanınmayan bir değer yok sayılır ve kanalın panelde seçilen tasarımı ya da düzeni kullanılır. Yorumların alt alta mı ızgara hâlinde mi dizileceği `data-review-layout` attribute'uyla seçilir:

| Attribute | Sonuç |
|---|---|
| `data-review-theme="warm"` | **Sıcak:** krem özet paneli, sarı yıldızlar, renkli baş harfler |
| `data-review-theme="trust"` | **Güven:** yeşil puan kutusu ve vurgular; doğrulanmış alıcıyı öne çıkarır |
| `data-review-theme="editorial"` | **Editoryal:** siyah beyaz, büyük puan, tırnaklı başlıklar |
| `data-review-theme="minimal"` | **Sade:** beyaz ve açık gri, ince çerçeveli özet |
| `data-review-theme="soft"` | **Pudra:** pudra pembesi tonlar, pembe yıldızlar ve yuvarlak köşeler |
| `data-review-theme="bold"` | **Sportif:** siyah puan kutusu, turuncu yıldızlar, büyük harfli başlıklar ve keskin köşeler |
| `data-review-theme="natural"` | **Doğal:** toprak ve zeytin yeşili tonlar |
| `data-review-theme="night"` | **Gece:** koyu zemin, açık yazı; yorum bölümü kendi koyu zeminiyle gelir |
| `data-review-style="cards"` | **Kartlı:** özet ve puan çubukları üstte, her yorum ayrı bir kartta |
| `data-review-style="sidebar"` | **Yan panelli:** geniş alanda özet ve puan çubukları solda, yorumlar sağda; dar alanda alt alta ve çizgiyle ayrılmış liste |
| `data-review-layout="list"` | Yorumlar alt alta gösterilir (varsayılan) |
| `data-review-layout="grid"` | Yorumlar ızgara hâlinde gösterilir; sütun sayısı genişliğe göre değişir |

Tasarımların renkleri ve köşe değerleri CSS değişkenleriyle değiştirilebilir: [CSS değişkenleri › Hazır tasarımlar](/tr/customize/theme.md#hazir-tasarimlar).

Yerleşim sayfanın değil bileşenin kendi genişliğine göre değişir (CSS container query; container adı `sayproof-reviews`). Böylece bileşen sayfanızdaki dar bir sütunda da doğru görünür:

- Yan panelli düzende özetin solda durması için bileşenin en az 880 px genişliğinde olması gerekir; daha dar alanda özet listenin üstünde gösterilir.
- Özet 640 px'ten itibaren iki sütuna ayrılır: solda ortalama puan, sağda puan çubukları. Yan panelli düzenin sol sütununda özet tek sütunda kalır.
- 480 px'in altında boşluklar ve görsel önizlemeleri küçülür.

Yorum yazma alanı varsayılan olarak container'ın içinde, özetin altında gösterilir; yan panelli düzende geniş alanda özetle birlikte sol sütunda yer alır. Alanı sayfanın başka bir yerinde (örneğin ürün başlığının altında) göstermek istiyorsanız o konuma boş bir öğe ekleyin ve seçicisini `data-review-gate` attribute'unda belirtin:

```html
<div id="yorum-yaz"></div>

<div data-review-mount
     data-review-product="URUN-KODU"
     data-review-gate="#yorum-yaz"></div>
```

Seçiciyle eşleşen bir öğe bulunamazsa alan varsayılan konumunda gösterilir.

## CSS seçicileri

Bileşendeki her öğe bir `data-review-*` attribute'u taşır. Bu attribute'lar bir **sözleşmedir**: aynı sürüm içinde değişmez ve kaldırılmaz. Bileşen sınıf adı kullanmaz; CSS kurallarınızı yalnızca bu attribute'lara göre yazın.

Bileşenin stil etiketi `<head>` öğesinin başına eklenir ve kuralları özgüllük (specificity) eklemeyen `:where(...)` kapsamında tanımlanır; tasarıma ve düzene bağlı kurallar (kartların kenarlığı, yan panelli yerleşim, ızgara sütunları, hazır tasarımların farkları) da bu kapsamdadır. Bu nedenle bileşenin bir öğeye yazdığı seçiciyle aynı özgüllükteki kuralınız, ek bir önek ya da `!important` gerektirmeden bileşenin kuralını geçersiz kılar; örneğin `[data-review-item]` kuralınız kartın görünümünü her tasarımda ve düzende değiştirir. Kuralınızın yalnızca bir tasarımda ya da düzende geçerli olmasını istiyorsanız kök öğenin attribute'unu seçicinin başına ekleyin: `[data-review-root][data-review-theme="editorial"]`, `[data-review-root][data-review-style="sidebar"]`.

Bunun tek istisnası **Gece** tasarımının kök öğeye verdiği zemin, iç boşluk ve köşe yuvarlaklığıdır: bu kural kök öğenin `[data-review-root]` seçicisiyle aynı özgüllüktedir. Kök öğeye yazdığınız `[data-review-root]` kuralı bileşenin stil etiketinden sonra geldiği için yine geçerli olur.

Server-side rendering kullanıyorsanız, sunucudan gelen HTML'de kök öğenin başındaki `<link data-review-stylesheet>` sayfanızdaki CSS'ten sonra geldiği için eşit özgüllükteki kurallarınız script bileşeni devralana kadar uygulanmaz. Bir kuralın bu ilk görüntülemede de geçerli olmasını istiyorsanız seçicinin başına `[data-review-root]` ekleyin. Kural kök öğenin kendisine yazılıyorsa (örneğin **Gece** tasarımının zeminini değiştirmek için) seçiciyi `[data-review-root][data-review-theme="night"]` olarak yazın.

### Örnekler

Kartları çizgilerle ayrılmış bir listeye dönüştürmek:

```css
[data-review-item] {
  border: none;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0;
  padding: 24px 0;
  background: transparent;
}
```

Ortalama puanı büyütmek ve puan dağılımını özetin en üstüne almak:

```css
[data-review-average] {
  font-size: 3rem;
  font-weight: 700;
}

[data-review-distribution] {
  order: -1;
}
```

Puan çubuklarını inceltmek ve dolu kısmın rengini değiştirmek:

```css
[data-review-bar] {
  height: 4px;
}

[data-review-bar]::before {
  background: #0b4f9c;
}
```

Izgara hâlinde gösterimde sütun sayısını sabitlemek:

```css
[data-review-root][data-review-layout="grid"] [data-review-list] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 768px) {
  [data-review-root][data-review-layout="grid"] [data-review-list] {
    grid-template-columns: minmax(0, 1fr);
  }
}
```

Fotoğraf ve video önizlemelerini büyütmek:

```css
[data-review-media-open] {
  width: 128px;
  height: 128px;
}
```

Yalnızca Editoryal tasarımda yorum başlıklarını büyütmek:

```css
[data-review-root][data-review-theme="editorial"] [data-review-title] {
  font-size: 1.5em;
}
```

Gece tasarımında yorum bölümünün kendi koyu zeminini kaldırıp sayfanızın zeminini kullanmak:

```css
[data-review-root][data-review-theme="night"] {
  padding: 0;
  background: transparent;
}
```

Yorumlar yüklenemediğinde container'ı gizlemek:

```css
[data-review-mount][data-review-failed] {
  display: none;
}
```

### Durumların biçimlendirilmesi

| Attribute | Öğe | Anlamı |
|---|---|---|
| `data-review-busy` | Kök öğe | Bir istek sürüyor (filtre ya da sıralama değişikliği, arama, "Daha fazla yorum") |
| `data-review-ready` | Container | Bileşen hazır |
| `data-review-failed` | Container | Yorumlar yüklenemedi |
| `data-review-gate-state` | Yorum yazma alanı; headless kullanımda container | `pending`, `closed`, `open`, `refused` ya da `submitted` |
| `data-review-viewer-state` | Yorum yazma alanı | Oturum açmış müşteri için `can_write` ya da `written` |
| `data-review-open` | Uzun yorum metni (`data-review-body`) | Ziyaretçi metni "Devamını oku" ile açmış |
| `data-review-fill` | Yıldızlar (`data-review-stars`), puan çubuğu, ölçek işaretçisi | Doluluk ya da konum: 0 ile 100 arasında, 5'in katları. Yıldızlarda dolu kısım yıldız renginde, kalanı `--review-track` renginde gösterilir. |
| `data-review-avatar-tone` | Baş harf dairesi (`data-review-avatar`) | `0` ile `5` arasında; yazarın adından belirlenen renk |
| `data-review-line-state` | Sipariş detayındaki ürün satırı (`data-review-order-line`) | `can_write`, `pending`, `published`, `rejected`, `removed`, `waiting` ya da `closed` |
| `aria-pressed="true"` | Yıldız satırı (`data-review-star-filter`), filtre düğmeleri (`data-review-filter`), "Evet" ve "Hayır" düğmeleri | Filtre uygulanmış ya da ziyaretçi o yönde oy vermiş |

Tüm attribute'lar ve anlamları için: [DOM attribute'ları](/tr/reference/dom-attributes.md).

## Gizlenemeyen öğeler

Sıralama menüsünü, kartları, boşlukları, puan dağılımını ve fotoğrafları dilediğiniz gibi biçimlendirebilirsiniz. Ancak bazı öğeler mevzuat ya da yöntem beyanı gereği görünür kalmalıdır. Bu öğeleri CSS ile gizlemek (`display: none`, arka planla aynı renk, ekran dışına taşıma vb.) kullanım koşullarına aykırıdır:

- doğrulama rozeti (`data-review-verified`),
- yöntem beyanı bağlantısı (`data-review-method-statement`),
- sıralama menüsü ve seçenekleri (`data-review-sort`, `data-review-sort-option`),
- başka bir kaynaktan aktarılan yorumların kaynak etiketi (`data-review-origin`),
- iptal ya da iade sonrasında yazılan yorumların süreç deneyimi etiketi (`data-review-experience`),
- satıcı yanıtı ve çözüm kaydı (`data-review-seller-response`, `data-review-resolution`).

Öğelerin listesi ve yasal dayanakları için: [Zorunlu öğeler](/tr/customize/required-elements.md).

## Sürümler

Kök öğe `data-review-version` attribute'unu taşır; güncel sürüm **3**'tür. Yeni bir attribute eklenmesi küçük sürüm değişikliğidir ve mevcut CSS kurallarınızı etkilemez. Bir attribute'un kaldırılması ya da anlamının değiştirilmesi ana sürüm değişikliğidir; önceki sürüm en az bir yıl desteklenir ve değişiklik [sürüm notlarında](/tr/reference/versions.md) duyurulur.