# Logo Boyutu Ayarlama

## Sorun

TYPO3 site package kullanırken, header bölümündeki logo görseli çok küçük görünüyor. Özellikle `height: 2.5rem` gibi değerler kullanıldığında logo yetersiz büyüklükte kalıyor.

![Logo Boyut Sorunu](../assets/logo-size-problem.png)

## Çözüm

Logo boyutunu artırmak için CSS dosyasında ilgili selector'un `height` değerini değiştirmeniz gerekir.

## Dosya Konumu

```
packages/[your-package]/Resources/Public/Css/layout.css
```

## CSS Değişikliği

### Eski Kod
```css
.site-logo img {
    height: 2.5rem;
    width: auto;
}
```

### Yeni Kod
```css
.site-logo img {
    height: 3.5rem;  /* veya istediğiniz boyut */
    width: auto;
}
```

## Alternatif Yöntemler

### 1. Inline Style (Fluid Template)

Eğer CSS dosyasına erişiminiz yoksa, Fluid template içinde inline style kullanabilirsiniz:

```html
<f:image src="fileadmin/user_upload/logo.svg" 
         alt="Logo" 
         style="height: 3.5rem; width: auto;" />
```

### 2. CSS Class Ekleme

Logo elementine özel bir class ekleyerek kontrol edebilirsiniz:

```html
<a href="/" class="site-logo">
    <img src="fileadmin/user_upload/logo.svg" 
         alt="Logo" 
         class="logo-large" />
</a>
```

```css
.logo-large {
    height: 4rem;
    width: auto;
}
```

### 3. Responsive Logo Boyutu

Farklı ekran boyutları için farklı logo boyutları tanımlayabilirsiniz:

```css
.site-logo img {
    height: 2.5rem;
    width: auto;
}

@media (min-width: 768px) {
    .site-logo img {
        height: 3.5rem;
    }
}

@media (min-width: 1024px) {
    .site-logo img {
        height: 4rem;
    }
}
```

## Önerilen Boyutlar

| Ekran Boyutu | Önerilen Height | Açıklama |
|-------------|----------------|----------|
| Mobile (<768px) | 2.5rem - 3rem | Küçük ekranlar için kompakt |
| Tablet (768-1024px) | 3rem - 3.5rem | Orta boyut |
| Desktop (>1024px) | 3.5rem - 4.5rem | Büyük ekranlar için belirgin |

## Cache Temizleme

Değişiklikleri görmek için TYPO3 cache'ini temizlemeniz gerekir:

### Terminal Üzerinden
```bash
# DDEV kullanıyorsanız
ddev typo3 cache:flush

# Veya vendor/bin/typo3 ile
vendor/bin/typo3 cache:flush
```

### Admin Panel Üzerinden
1. Admin Panel'e giriş yapın
2. **Tools** > **Maintenance** sekmesine gidin
3. **Clear all caches** butonuna tıklayın

### Tarayıcı Cache'i
Tarayıcınızda **Ctrl+Shift+R** (Windows/Linux) veya **Cmd+Shift+R** (Mac) tuşlarına basarak hard refresh yapın.

## İlgili Dokümanlar

- [Header & Footer Entegrasyonu](./09-header-footer-entegrasyonu.md)
- [CSS/JS Dosya Dahil Etme](./26-css-js-dosya-dahil-etme.md)
- [Site Package Temel Kurulum](./05-site-package-temel-kurulum.md)

## Sık Karşılaşılan Sorunlar

### 1. Değişiklik Görünmüyor

**Sorun:** CSS değişikliği yapmanıza rağmen logo boyutu değişmiyor.

**Çözüm:** 
- TYPO3 cache'ini temizleyin
- Tarayıcı cache'ini temizleyin (Ctrl+Shift+R)
- CSS dosyasının doğru yüklendiğinden emin olun (Browser DevTools > Network tab)

### 2. Logo Distorsiyonu

**Sorun:** Logo genişlik/yükseklik oranı bozuk görünüyor.

**Çözüm:**
```css
.site-logo img {
    height: 3.5rem;
    width: auto;  /* Bu değer oranı korur */
    object-fit: contain;  /* Gerekirse ekle */
}
```

### 3. Mobil Cihazlarda Çok Büyük

**Sorun:** Desktop'ta iyi görünen logo mobilde çok büyük.

**Çözüm:** Responsive media queries kullanın (Yukarıdaki örneklere bakın).

## En İyi Uygulamalar

1. **SVG Kullanın:** Logo görselleri için SVG formatı tercih edin. Ölçeklenebilir ve net kalır.

2. **Max-Width Kullanın:** Çok büyük ekranlarda logo'nun kontrolsüz büyümesini önlemek için:
   ```css
   .site-logo img {
       height: 3.5rem;
       max-height: 80px;  /* Maksimum sınır */
       width: auto;
   }
   ```

3. **Retina Display Desteği:** Yüksek DPI ekranlar için 2x veya 3x boyutlu görseller hazırlayın.

4. **CSS Variable Kullanın:** Logo boyutunu merkezi olarak yönetmek için:
   ```css
   :root {
       --logo-height: 3.5rem;
   }
   
   .site-logo img {
       height: var(--logo-height);
   }
   ```

## Git Commit Örneği

Değişikliği versiyon kontrolüne eklerken:

```bash
git add packages/testproject/Resources/Public/Css/layout.css
git commit -m "fix: Increase logo size from 2.5rem to 3.5rem

- Improve logo visibility in header
- Better user experience on desktop"
```

---

**Not:** Bu doküman TYPO3 v13 ve site package yapısı için hazırlanmıştır.
