# 🎨 CayTea — Renk Teması & Marka Kimliği Paleti

## Ana Renk Paleti

| Renk | Hex | RGB | Kullanım Alanı |
|------|-----|-----|----------------|
| **Orman Siyahı** | `#0d0d0a` | 13, 13, 10 | Ana arka plan |
| **Derin Gece** | `#111109` | 17, 17, 9 | İkincil arka plan, kartlar |
| **Orman Yeşili** | `#4a7c59` | 74, 124, 89 | Vurgu rengi, etiketler |
| **Açık Yeşil** | `#6ab07e` | 106, 176, 126 | Hover, aktif durumlar |
| **Altın** | `#c9a84c` | 201, 168, 76 | Birincil aksan, CTA butonlar |
| **Altın Açık** | `#f0d080` | 240, 208, 128 | Başlık vurguları, serif italic |
| **Krem Metin** | `#e8e4d9` | 232, 228, 217 | Ana metin rengi |
| **Soluk Metin** | `rgba(232,228,217,0.55)` | — | Açıklama metinleri |
| **Yüzey** | `rgba(255,255,255,0.04)` | — | Kart arka planları |
| **Kenarlık** | `rgba(255,255,255,0.08)` | — | Kart ve bölüm kenarları |

---

## Marka Renk Grupları

### Birincil Grup — Altın Ton
```
Gradient: linear-gradient(135deg, #c9a84c 0%, #a07828 100%)
Kullanım: CTA butonlar, fiyat etiketleri, logo, ana vurgular
```

### İkincil Grup — Orman Yeşili
```
Kullanım: Onay işaretleri, kategori etiketleri, hover efektleri
Koyu: #4a7c59  |  Açık: #6ab07e
```

### Arka Plan Grubu — Derin Karanlık
```
Birincil: #0d0d0a  (hero, beyond)
İkincil:  #111109  (section-dark)
Üçüncül:  #080807  (footer)
```

---

## Tipografi

| Kullanım | Yazı Tipi | Ağırlık |
|----------|-----------|---------|
| Başlıklar (H1–H4) | Cormorant Garamond | 300–600 |
| Gövde metni | Inter | 300–500 |
| Etiketler / Uppercase | Inter | 600 |
| İtalik vurgular | Cormorant Garamond Italic | 300–400 |

```css
/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');

--font-serif: 'Cormorant Garamond', Georgia, serif;
--font-sans: 'Inter', system-ui, sans-serif;
```

---

## Logo Kullanım Kuralları

### Ana Logo (Koyu Arka Plan)
- Dosya: `logo.png`
- Arka plan: `#0d1a0f` (koyu orman yeşili)
- Logo rengi: `#c9a84c` (altın)
- Minimum boyut: 120px genişlik

### Beyaz/Açık Arka Plan için
- Logo renklerini tersine çevir
- Arka plan: Beyaz/Krem
- Logo rengi: `#0d1a0f` (koyu orman yeşili) + `#c9a84c` aksan

### Safe Zone
- Logo etrafında en az logo yüksekliğinin `0.25x`i kadar boşluk bırak
- Logo üzerine metin, grafik veya görsel yerleştirme

### Yasak Kullanımlar
- ❌ Renk değiştirme
- ❌ Uzatma / deforme etme
- ❌ Düşük çözünürlüklü kullanım (< 72 DPI web, < 300 DPI baskı)
- ❌ Düşük kontrastlı arka planlarda kullanım

---

## Görsel Varlıklar (Assets)

| Dosya | Boyut | Kullanım |
|-------|-------|----------|
| `logo.png` | 1:1 kare | Navbar, favicon, sosyal medya profil |
| `hero_cover.png` | 4:3 | Landing page hero arka planı (V1) |
| `hero_cover_2.png` | 4:3 | Landing page hero arka planı (V2) |
| `product_aslan_yele.png` | 1:1 | Aslan Yelesi ürün kartı görseli |
| `product_reishi.png` | 1:1 | Reishi ürün kartı görseli |
| `mushroom_hero.png` | 3:4 | Mantar kütüphanesi bölümü |
| `og_banner.png` | 2:1 | Open Graph / sosyal medya paylaşım |

---

## UI Bileşen Renkleri

```css
/* Buttons */
--btn-primary:   linear-gradient(135deg, #c9a84c, #a07828);
--btn-ghost:     transparent + border rgba(201,168,76,0.4);

/* Cards */
--card-bg:       rgba(255,255,255,0.04);
--card-border:   rgba(255,255,255,0.08);
--card-hover-border: rgba(201,168,76,0.3);

/* Status */
--success: #4a7c59;
--warning: #c9a84c;
--error:   #e84040;

/* Glassmorphism */
backdrop-filter: blur(20px);
background: rgba(13,13,10,0.85);
```

---

## Instagram / Sosyal Medya Şablon Renkleri

| Renk | Kullanım |
|------|----------|
| `#0d1a0f` | Story/post arka planı |
| `#c9a84c` | Başlık metni, vurgu |
| `#e8e4d9` | Gövde metni |
| %60 opaklık beyaz | Açıklama metni |