# Mobil Test Rehberi

## Hızlı Test Adımları

### 1. Chrome DevTools ile Test

#### iPhone 13 Simülasyonu
1. Chrome'da F12 tuşuna basın
2. Device Toolbar'ı açın (Ctrl+Shift+M veya Cmd+Shift+M)
3. Cihaz seçin: "iPhone 13 Pro" veya "iPhone 12 Pro"
4. Viewport: 390x844

#### Android Simülasyonu
1. Device Toolbar'da "Pixel 5" veya "Galaxy S20" seçin
2. Veya custom viewport: 360x800

### 2. Test Edilecek Sayfalar

#### Ana Sayfa (/)
- [ ] Hero section tam genişlikte
- [ ] Butonlar dokunulabilir (44px+)
- [ ] Text okunabilir
- [ ] Background blur'lar ekran dışına taşmıyor
- [ ] Feature cards 1 kolon
- [ ] Testimonials 1 kolon

#### Seyahat Planlayıcı (/planner?trip_id=...)
- [ ] Header görünür
- [ ] Gün seçici yatay scroll
- [ ] Timeline scroll edilebilir
- [ ] Yer kartları tam genişlikte
- [ ] Harita responsive
- [ ] "Yer Ekle" butonu dokunulabilir
- [ ] Dialog ekrana sığıyor

#### Keşfet (/explore)
- [ ] Kategori badge'leri yatay scroll
- [ ] Yer kartları 1 kolon
- [ ] Arama çubuğu tam genişlikte
- [ ] Bookmark butonları dokunulabilir

#### Günlük (/journal)
- [ ] Fotoğraf grid 2 kolon
- [ ] Entry kartları tam genişlikte
- [ ] Tab navigation dokunulabilir
- [ ] Filter badge'leri yatay scroll

#### Admin Panel (/admin)
- [ ] Mobil menü çalışıyor
- [ ] Stats kartları 2 kolon
- [ ] Tablolar yatay scroll
- [ ] Action butonları dokunulabilir

### 3. Kontrol Edilecek Elementler

#### Yatay Taşma
```javascript
// Console'da çalıştırın:
document.querySelectorAll('*').forEach(el => {
  if (el.scrollWidth > el.clientWidth) {
    console.log('Overflow:', el);
  }
});
```

#### Touch Target Boyutları
- Tüm butonlar minimum 44x44px olmalı
- Input'lar minimum 44px yüksekliğinde olmalı
- Icon butonlar minimum 44x44px olmalı

#### Text Okunabilirlik
- Minimum font-size: 14px (body text)
- Başlıklar: 20-30px
- Input font-size: 16px (iOS zoom önleme)

### 4. Landscape Mode Testi

1. Device Toolbar'da "Rotate" butonuna tıklayın
2. Veya viewport'u 844x390 yapın
3. Kontrol edin:
   - [ ] Header compact
   - [ ] Modal'lar scroll edilebilir
   - [ ] İçerik görünür

### 5. Gerçek Cihazda Test

#### iPhone
1. Safari'de siteyi açın
2. Kontrol edin:
   - [ ] Input'lara tıklayınca zoom olmuyor (font-size 16px+)
   - [ ] Safe area (notch) doğru
   - [ ] Scroll smooth
   - [ ] Touch target'lar yeterli

#### Android
1. Chrome'da siteyi açın
2. Kontrol edin:
   - [ ] Scroll smooth
   - [ ] Touch target'lar yeterli
   - [ ] Text okunabilir

## Yaygın Sorunlar ve Çözümleri

### Sorun: Yatay Taşma
**Çözüm**: `overflow-x: hidden` ve `max-width: 100%` eklendi

### Sorun: Text Çok Büyük
**Çözüm**: Responsive text boyutları (h1: 30px, h2: 24px, h3: 20px)

### Sorun: Butonlar Küçük
**Çözüm**: Minimum 44x44px touch target

### Sorun: Dialog Ekran Dışına Taşıyor
**Çözüm**: `max-width: calc(100vw - 2rem)`

### Sorun: Grid Responsive Değil
**Çözüm**: Mobilde 1 kolon grid

### Sorun: Tablo Taşıyor
**Çözüm**: `overflow-x: auto` ile horizontal scroll

## Hızlı Kontrol Listesi

### Genel
- [ ] Yatay scroll yok (istenmeyen)
- [ ] Tüm text'ler okunabilir
- [ ] Butonlar dokunulabilir (44px+)
- [ ] Input'lar 44px+ yüksekliğinde
- [ ] Dialog'lar ekrana sığıyor

### Sayfalar
- [ ] Home
- [ ] TripPlanner
- [ ] Explore
- [ ] Journal
- [ ] Admin Dashboard

### Componentler
- [ ] Header - Mobile menu
- [ ] Footer - 1 kolon
- [ ] Button - 44px+
- [ ] Input - 44px+, 16px font
- [ ] Dialog - Responsive
- [ ] Table - Horizontal scroll

## Performans Metrikleri

### Hedef
- First Contentful Paint: < 1.8s
- Largest Contentful Paint: < 2.5s
- Cumulative Layout Shift: < 0.1
- First Input Delay: < 100ms

### Test
```bash
# Lighthouse ile test
npm run build
npx serve -s dist
# Chrome DevTools > Lighthouse > Mobile
```

## Notlar

- Tüm düzeltmeler `src/index.css` dosyasında
- Responsive breakpoint: 768px
- Küçük mobil breakpoint: 430px
- Touch device detection: `(hover: none) and (pointer: coarse)`
- Safe area insets: iPhone notch desteği

## Destek

Sorun bulursanız:
1. Chrome DevTools Console'u kontrol edin
2. Element'i inspect edin
3. Computed styles'ı kontrol edin
4. `MOBILE_FIX_SUMMARY.md` dosyasına bakın
