/* ==========================================================================
   RESPONSIVE DESIGN - MEPA THEME
   Genel responsive kurallar (mobil menü hariç)
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .mepa-container {
        padding: 0 20px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .mepa-container {
        padding: 0 15px;
    }

    .mepa-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .mepa-sidebar {
        position: static;
    }

    .mepa-footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    h1 {
        font-size: 2.4rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.8rem;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    html {
        font-size: 56.25%;
    }

    .mepa-article {
        padding: 1.5rem;
    }

    .mepa-sidebar {
        padding: 1.5rem;
    }
}


/* ==========================================================================
   OVERFLOW FIX - AOS Animasyonları için
   ========================================================================== */

html, body {
    overflow-x: hidden;
}

.mepa-site {
    overflow-x: hidden;
}

/* Mobilde AOS animasyonlarını devre dışı bırak veya hafiflet */
@media (max-width: 1200px) {
    /* AOS animasyonlarını tamamen iptal et */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        pointer-events: auto !important;
    }
    
    [data-aos].aos-animate {
        opacity: 1 !important;
        transform: none !important;
    }
    
    [data-aos][data-aos][data-aos-duration] {
        transition-duration: 0s !important;
    }
    
    [data-aos][data-aos][data-aos-delay] {
        transition-delay: 0s !important;
    }
    
    /* AOS overflow sorununu çöz */
    .aos-init {
        overflow: visible !important;
    }
}

/* ==========================================================================
   HEADER RESPONSIVE - 1200px ve altı
   ========================================================================== */

@media (max-width: 1200px) {
    /* Desktop Menü - Gizle */
    .mepa-desktop-nav {
        display: none !important;
    }
    
    /* Header Inner */
    .mepa-header .mepa-header-inner {
        height: 80px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    /* Logo - Solda Büyük */
    .mepa-site-logo {
        flex: 0 0 auto !important;
    }
    
    .mepa-header .mepa-site-logo img {
        max-height: 60px;
        width: auto;
    }
    
    /* Mobile Toggle - Göster */
    .mepa-mobile-toggle {
        display: flex !important;
        flex-shrink: 0 !important;
    }
}

/* ==========================================================================
   HEADER RESPONSIVE - 768px ve altı
   ========================================================================== */

@media (max-width: 768px) {
    /* Top Header - Gizle (768px altında) */
    .mepa-topheader {
        display: none !important;
    }
    
    .mepa-header .mepa-header-inner {
        height: 70px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .mepa-header .mepa-site-logo img {
        max-height: 50px;
    }
    
    /* Mobil Panel Footer - İletişim ve Sosyal Medya Göster */
    .mpm-contact {
        display: flex;
    }
    
    .mpm-social {
        display: flex;
    }
}

/* ==========================================================================
   HEADER RESPONSIVE - 480px ve altı
   ========================================================================== */

@media (max-width: 480px) {
    .mepa-header .mepa-header-inner {
        height: 60px !important;
        padding: 0 10px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .mepa-header .mepa-site-logo img {
        max-height: 42px;
    }
    
    .mepa-mobile-toggle {
        width: 40px;
        height: 40px;
    }
}

/* ==========================================================================
   DESKTOP - 1201px ve üstü (Mobil elemanları gizle)
   ========================================================================== */

@media (min-width: 1201px) {
    .mepa-mobile-toggle,
    .mepa-mobile-overlay,
    .mepa-mobile-panel {
        display: none !important;
    }
}