# Kart Stili

Kart görünüm ayarları
Kaynak: https://selwise.com/docs/product-cards/styling

Kart görünümünü ayarlayan seçenekler. Tasarımcıdaki her stil kontrolü, mağazada onu gerçekten çizen bir kurala bağlıdır; panelde bir ayar varsa mağazada karşılığı vardır.

## Panelde nerede

**Product Cards** → kart → **Designer** (Tasarımcı) → tuvalde bir öğe seçin → sağ panelde **Style** (Stil) bölümü. Stil özellikleri gruplara ayrılır: **Layout** (Yerleşim), **Text** (Yazı), **Colour** (Renk), **Spacing** (Boşluk), **Border** (Kenarlık), **Effect** (Efekt), **Position** (Konum), **Image** (Görsel). Bir özelliğin kutusunu boş bırakırsanız o özellik hiç yazılmaz.

## Katman sırası

Bir öğenin son görünümü şu sırayla oluşur; sonraki öncekini ezer:

```
1. Marka teması   → ayarlanmamış özelliğin varsayılanı (yazı tipi, yazı rengi, köşe, kenarlık rengi, gölge)
2. Öğe stili      → Style bölümünde yazdığınız değerler
3. Hover          → Hover durumunda yazdığınız değerler (yalnızca kart üzerindeyken)
4. Genişlik       → Tablet ve Mobile için yazdığınız değerler
5. Özel CSS       → tasarımcının altındaki Custom CSS kutusu; en son gelir ve eşit özgüllükte kazanır
```

Çoğu durumda ilk katman yeterlidir. Marka temasını değiştirdiğinizde bu özellikleri ayarlamadığınız her öğe birlikte değişir. Kart kökü kendi yazı rengini de kurar; böylece koyu bir sayfada beyaz zeminli kart beyaz üstüne beyaz yazıya dönmez.

## Durumlar ve genişlikler

- **Normal** ve **Hover** durumu: Hover'da yalnızca fareyle kartın üzerine gelindiğinde uygulanacak değerleri yazarsınız. Her özellik hover'da değişemez; yalnızca `color`, `background`, `opacity`, `borderWidth`, `borderColor`, `boxShadow` ve `transform` hover alır. Yerleşim özellikleri bilerek hover'dan hariçtir, çünkü fare geçerken tüm şeridi yeniden dizerlerdi.
- **Desktop**, **Tablet** ve **Mobile** (Masaüstü, Tablet, Mobil): Seçtiğiniz genişlikte yalnızca girdiğiniz değerler değişir; gerisi devralınır. Tablet kesimi 1024 piksel ve altı, mobil 640 piksel ve altıdır. Ayrı bir "mobil stil seti" yoktur; mobilde kaç sütun gösterileceği öneri widget'ının duyarlı ayarlarındadır ([Görüntüleme Tipleri](/docs/recommendations/display-types)).

## Tüm stil özellikleri

Toplam 41 özellik vardır. Bir öğe türüne uygulanmayan özellik o öğede sunulmaz.

| Grup | Özellikler |
|---|---|
| **Layout** | `display` (flex, block, inline-flex, none), `flexDirection` (satır, sütun ve ters yönler), `justifyContent`, `alignItems`, `flexWrap`, `gap`, `flexGrow`, `width`, `height`, `minHeight`, `maxWidth`, `overflow` (visible, hidden) |
| **Text** | `fontFamily`, `fontSize`, `fontWeight` (300 ile 900), `fontStyle`, `lineHeight`, `letterSpacing`, `textTransform`, `textAlign`, `textDecoration` (none, underline, line-through), `maxLines` |
| **Colour** | `color`, `background`, `opacity` |
| **Spacing** | `padding`, `margin` (bir ila dört değerli, birimli) |
| **Border** | `borderRadius`, `borderWidth`, `borderStyle` (none, solid, dashed, dotted), `borderColor` |
| **Effect** | `boxShadow`, `transform` (kapalı bir listeden: `none`, `translateY(-4px)`, `translateY(-8px)`, `scale(1.02)`, `scale(1.05)`, `scale(0.98)`) |
| **Position** | `insetTop`, `insetRight`, `insetBottom`, `insetLeft`, `zIndex`: yalnızca **Image area** içindeki bindirme öğeleri için |
| **Image** | `aspectRatio` (varsayılan 1 / 1), `objectFit` (cover, contain, fill, none, scale-down; varsayılan cover), `objectPosition`: yalnızca **Image area** ve **Image** için |

Notlar:

- `flexDirection`, `justifyContent` ve `alignItems` yalnızca **Group** ve **Image area** öğelerinde sunulur. `gap` Group, Image area, **Colours**, **Price** ve **Rating** öğelerinde sunulur.
- `maxLines` metni N satıra sınırlar. Başlığı bir üründe bir, ötekinde dört satıra uzayan bir şeridin düzensiz görünmesini bununla önlersiniz.
- Ürün adları farklı uzunluktaysa kartlar farklı yükseklikte olur. `maxLines` ya da sabit yükseklik bunu çözer; ikincisi uzun adları kırpar.

## Değer yazım kuralları

Girdiğiniz her değer doğrulanır. Geçersiz değer **sessizce atılır**: özellik yazılmamış gibi davranır. Alanın altındaki ipucu yazımı söyler:

| Tür | Kural |
|---|---|
| Uzunluk | Birim ister: `32px`, `2rem`, `50%`, `auto` |
| Sayı | Birimsiz: `1.4`, `2` |
| Renk | `#111`, `rgb(…)`, `hsl(…)`, `transparent`, renk adı ya da marka değişkeni |
| Gölge | Kaydırmalar, bulanıklık ve renk: `0 2px 8px rgba(0,0,0,.1)` |
| Yazı tipi | Yazı tipi listesi: `Inter, sans-serif` |
| Oran | Genişlik bölü yükseklik: `4 / 5` |
| Kutu | Bir ila dört uzunluk: `8px` ya da `8px 12px` |

Renk, uzunluk, yazı tipi ve gölge alanlarına marka değişkeni yazabilirsiniz: `var(--selwise-brand, #c93a63)`. Parantezin içinde yalnızca tanımlı marka değişken adları kabul edilir ve ikinci değer yedektir. Marka renk seçici zaten bu biçimi yazar. Değişken adları: [Marka Teması](/docs/brand/theme).

## Özel CSS

Tasarımcının altındaki **Custom CSS** (Özel CSS) kutusu (kendi kodunuzda **CSS** alt sekmesi; ikisi aynı alandır) kartın içindeki öğelere uygulanır ve tuvalde yazdığınız anda görünür. Kural yalnızca bu karta sınırlandırılır, sayfanın kalanına ulaşamaz. Varyant seçicinin sınıfları `selwise-variant-chip`, `selwise-variant-chip-selected` ve `selwise-variant-dropdown`'dır. Kartın kendi sınıfları: kök `sc-root`; öğeler türlerine göre `sc-text`, `sc-price`, `sc-badge`, `sc-button`, `sc-media`, `sc-stack`, `sc-rating`, `sc-swatches` ve görsel `sc-img`; düğme ve renk örnekleri için `sc-btn` ve `sc-swatch`. Kesin sınıfı tarayıcının inceleme aracıyla doğrulayın. Mobilde farklı görünüm için medya sorgusu kullanabilirsiniz:

```css
@media (max-width: 640px) {
  .sc-text { font-size: 13px; }
}
```

Özel CSS'i yalnızca kod düzenleme yetkisi olan roller (Admin) yazar; yetkisi olmayan rolde **Custom CSS** kutusu görünmez. HTML ve JavaScript yazmak için: [Özel Kart Oluşturma](/docs/product-cards/creating).

## Stil değişikliği mağazaya yansımıyorsa

| Belirti | Sebep |
|---|---|
| Panelde değişiyor, mağazada değişmiyor | **My own code** modunda ve HTML dolu; markup tasarımı bastırır. **Drawn by** alanını **The designer** yapın |
| Değer hiç uygulanmıyor | Değer geçersiz (birimsiz uzunluk gibi); alanın altındaki ipucuna bakın |
| Hover etkisi yok | Özellik hover almıyor (örneğin `padding`) ya da öğe Hover durumunda değil |
| Mobilde değişmiyor | Değeri **Mobile** genişliğinde girmediniz; yalnızca o genişlikte yazılan değerler geçerlidir |
| Özel CSS etkisiz | Seçici kartın içindeki öğeyle eşleşmiyor ya da CSS geçersiz |