/**
 * Mobile Improvements CSS
 * 
 * Bu dosya, frontend-mobil-iyilestirmeler spec'inde tanımlanan
 * mobil uyumluluk düzeltmelerini içerir.
 * 
 * Kapsam:
 * - Ürün kartı buton hizalama düzeltmeleri
 * - Emoji ve hazır mesajlar buton aralığı
 * - Kayıt/Giriş link düzeni
 * - Ürün görseli ve başlık boyutları
 * 
 * Progressive Enhancement Yaklaşımı:
 * - Modern CSS özellikleri için fallback değerler sağlanmıştır
 * - Eski browser'larda temel işlevsellik korunur
 * - Vendor prefix'ler ile geniş browser desteği
 * - @supports ile feature detection kullanılır
 * 
 * Browser Desteği:
 * - Chrome 60+ (full support)
 * - Firefox 55+ (full support)
 * - Safari 11+ (full support)
 * - Edge 79+ (full support)
 * - IE 11 (partial support with fallbacks)
 * - iOS Safari 11+ (full support)
 * - Chrome Mobile 60+ (full support)
 * 
 * Requirements: 3.1, 3.3, 3.5, 4.1, 4.4
 */

/* ============================================
   1. ÜRÜN KARTI BUTON HİZALAMA DÜZELTMESİ
   Requirements: 3.1, 3.3
   ============================================ */

@media (max-width: 768px) {
  /* Product card - normal akış */
  .product-card {
    display: flex;
    flex-direction: column;
  }
  
  /* Product image wrapper - kare oran koru ama sabit yükseklik */
  .product-card .product__image__wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* 1:1 aspect ratio */
    overflow: hidden;
  }
  
  /* Product image - absolute positioning ile kare içine sığdır */
  .product-card .product__image__wrapper .product__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  /* Görsel - kare içinde ortalanmış */
  .product-card .product__image__wrapper .product__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  /* Product card flex container */
  .product__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: auto;
    margin-top: 12px;
  }
  
  /* Product bottom section - fiyat ve gönder butonu yan yana */
  .product__bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 12px;
  }
  
  /* Gönder butonu her zaman görünür */
  .product__send-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 44px;
    min-width: 44px;
  }
}

/* ============================================
   2. BUTON GÖRÜNÜRLÜĞÜ DÜZENLEMESİ
   Requirements: 3.1, 3.3, 3.5
   ============================================ */

@media (max-width: 768px) {
  /* Mobilde yeşil emoji butonunu göster */
  .emoji-btn {
    display: inline-flex !important;
    background: #FF9800 !important;
  }
  
  /* Hazır mesajlar butonunu göster */
  .hazir-mesajlar-btn {
    display: inline-flex !important;
    flex: 1;
    padding: 12px 16px;
    min-height: 44px;
  }
  
  /* Buton container */
  .kart-mesaji-buttons {
    display: flex !important;
    gap: 12px;
    width: 100%;
  }
}

/* Masaüstü için de aynı */
@media (min-width: 769px) {
  .emoji-btn {
    display: inline-flex !important;
    background: #FF9800 !important;
  }
  
  .hazir-mesajlar-btn {
    display: inline-flex !important;
  }
}

/* ============================================
   3. KAYIT/GİRİŞ LİNK DÜZENİ
   Requirements: 3.1, 3.3
   ============================================ */

@media (max-width: 768px) {
  .account__desc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* Fallback for older browsers without gap support */
    margin: 0 -5px;
    gap: 10px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  
  .account__meta {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    /* Fallback margin for browsers without gap support */
    margin: 0 5px;
  }
  
  .account__desc > a {
    /* Fallback margin for browsers without gap support */
    margin: 0 5px;
  }
  
  /* Remove margin when gap is supported */
  @supports (gap: 10px) {
    .account__desc {
      margin: 0;
    }
    
    .account__meta,
    .account__desc > a {
      margin: 0;
    }
  }
}

/* ============================================
   4. ÜRÜN GÖRSELİ VE BAŞLIK BOYUTLARI
   Requirements: 3.1, 3.3
   ============================================ */

@media (max-width: 768px) {
  /* Ürün görseli boyutu artırma */
  .product__image img {
    min-height: 200px;
    /* Fallback for browsers without object-fit support (IE11) */
    width: 100%;
    height: 200px;
    -o-object-fit: cover;
    object-fit: cover;
  }
  
  /* Ürün başlığı boyutu artırma */
  .product__title h5 {
    font-size: 15px;
    line-height: 1.4;
  }
  
  .product__title h5 a {
    display: -webkit-box;
    /* Fallback for browsers without line-clamp support */
    max-height: 2.8em; /* 2 lines * 1.4 line-height */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ============================================
   5. TOUCH TARGET BOYUTLARI (WCAG 2.1 AA)
   Requirements: 3.5
   ============================================ */

@media (max-width: 768px) {
  /* Tüm butonlar minimum 44x44px olmalı */
  .product__send-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Link'ler için de touch target */
  .account__desc a {
    min-height: 44px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

/* ============================================
   6. MASAÜSTÜ İÇİN GÖNDER BUTONU
   ============================================ */

@media (min-width: 769px) {
  /* Masaüstünde de gönder butonu görünür */
  .product__send-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}