/**
 * 🚀 MOBİL UYUMLULUK FİX - ULTRA 2025
 * Tüm detay sayfaları için mobil-first responsive düzeltmeleri
 * Sidebar sorunları, grid layout, touch-friendly tasarım
 */

/* ============================================
   GENEL MOBİL FİX - TÜM SAYFALAR İÇİN
   ============================================ */

/* Container ve Wrapper Düzeltmeleri */
@media (max-width: 1024px) {
    /* Grid layout'u tek sütuna çevir */
    .news-detail-content-grid,
    .content-wrapper,
    .content-wrapper-2025 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 15px !important;
        max-width: 100% !important;
    }
    
    /* Sidebar'ı SONRA taşı - Ana içerik önce olmalı */
    .news-detail-sidebar,
    .sidebar,
    .sidebar-2025 {
        position: relative !important;
        top: 0 !important;
        order: 2 !important; /* Ana içerikten SONRA */
        max-height: none !important;
        overflow: visible !important;
        width: 100% !important;
        margin-bottom: 20px !important;
        padding: 0 !important;
    }
    
    /* Ana içerik ÖNCE - UX ve SEO için kritik */
    .news-detail-article,
    .article-main {
        order: 1 !important; /* ÖNCE */
    }
    
    /* Ana içerik alanını genişlet */
    .news-detail-article,
    .article-main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 15px !important;
        margin: 0 !important;
    }
}

/* Tablet ve Küçük Ekranlar */
@media (max-width: 768px) {
    /* Container padding azalt */
    .news-detail-main,
    .container,
    .page-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 15px !important;
        padding-bottom: 20px !important;
    }
    
    /* Grid layout'u tek sütuna çevir */
    .news-detail-content-grid,
    .content-wrapper,
    .content-wrapper-2025 {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 0 10px !important;
    }
    
    /* Ana içerik ÖNCE - UX ve SEO için kritik */
    .news-detail-article,
    .article-main {
        order: 1 !important; /* ÖNCE */
        width: 100% !important;
        padding: 15px 10px !important;
        margin: 0 !important;
    }
    
    /* Sidebar SONRA - Etkileşimler ve widget'lar */
    .news-detail-sidebar,
    .sidebar,
    .sidebar-2025 {
        order: 2 !important; /* Ana içerikten SONRA */
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
        padding: 15px !important;
    }
    
    /* İlgili haberler EN SONDA */
    .news-detail-related {
        order: 3 !important;
        margin-top: 20px !important;
    }
    
    /* Hero figure mobil optimizasyonu */
    .hero-figure {
        margin: 0 0 20px !important;
        border-radius: 12px !important;
    }
    
    .hero-figure img {
        min-height: 250px !important;
        max-height: 400px !important;
    }
    
    /* Başlık font boyutu */
    .article-title-editorial,
    .article-title,
    h1 {
        font-size: clamp(20px, 5vw, 28px) !important;
        line-height: 1.3 !important;
    }
}

/* Mobil Cihazlar (480px ve altı) */
@media (max-width: 480px) {
    /* Container padding minimum */
    .news-detail-main,
    .container,
    .page-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 10px !important;
    }
    
    /* Grid layout */
    .news-detail-content-grid,
    .content-wrapper,
    .content-wrapper-2025 {
        gap: 10px !important;
        padding: 0 5px !important;
    }
    
    /* Sidebar */
    .news-detail-sidebar,
    .sidebar,
    .sidebar-2025 {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }
    
    /* Ana içerik */
    .news-detail-article,
    .article-main {
        padding: 12px 8px !important;
    }
    
    /* Hero figure */
    .hero-figure img {
        min-height: 200px !important;
        max-height: 300px !important;
    }
    
    /* Başlık */
    .article-title-editorial,
    .article-title,
    h1 {
        font-size: clamp(18px, 6vw, 24px) !important;
    }
}

/* ============================================
   HABER DETAY ÖZEL FİX
   ============================================ */

@media (max-width: 1024px) {
    .news-detail-content-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    /* Ana içerik ÖNCE */
    .news-detail-article {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Sidebar SONRA */
    .news-detail-sidebar {
        order: 2 !important;
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* İlgili haberler EN SONDA */
    .news-detail-related {
        order: 3 !important;
    }
}

/* ============================================
   RUYA DETAY ÖZEL FİX
   ============================================ */

@media (max-width: 1024px) {
    .content-wrapper {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .sidebar {
        order: -1 !important;
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
    }
}

/* ============================================
   TARİF DETAY ÖZEL FİX
   ============================================ */

@media (max-width: 1024px) {
    .recipe-detail-wrapper,
    .content-wrapper {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .recipe-sidebar,
    .sidebar {
        order: -1 !important;
        position: relative !important;
        width: 100% !important;
    }
}

/* ============================================
   TOUCH-FRIENDLY İYİLEŞTİRMELER
   ============================================ */

@media (max-width: 768px) {
    /* Butonlar daha büyük */
    button,
    .btn,
    a.btn {
        min-height: 44px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
    }
    
    /* Input alanları daha büyük */
    input,
    textarea,
    select {
        min-height: 44px !important;
        font-size: 16px !important;
        padding: 12px !important;
    }
    
    /* Linkler daha kolay tıklanabilir */
    a {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

/* ============================================
   PERFORMANS İYİLEŞTİRMELERİ
   ============================================ */

@media (max-width: 768px) {
    /* Gereksiz animasyonları kapat */
    * {
        animation-duration: 0.01ms !important;
        animation-delay: -1ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: -1ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Görseller lazy load */
    img {
        loading: lazy !important;
        decoding: async !important;
    }
}