/**
 * GRPCMedia Responsive CSS
 * 
 * 🇹🇷 TR: Gelişmiş responsive tasarım - tüm cihazlarda tam uyumluluk
 * 🇬🇧 EN: Advanced responsive design - full compatibility on all devices
 * 🎯 PURPOSE: Enterprise-level responsive architecture
 * 
 * @package GRPCMedia
 * @version 1.0.0
 */

/* =====================================================
   BREAKPOINT VARIABLES (CSS Custom Properties)
   ===================================================== */
:root {
    --mobile-max: 767px;
    --tablet-min: 768px;
    --tablet-max: 1024px;
    --desktop-min: 1025px;
    --wide-desktop-min: 1440px;
}

/* =====================================================
   MOBILE FIRST - BASE STYLES (< 768px)
   ===================================================== */

/* Container - STANDARD MAX-WIDTH (World Standard!) */
/* 🇹🇷 TR: Dünya standartlarına uygun container genişliği - 1280px limit
   🇬🇧 EN: World standard container width - 1280px limit (Tailwind, Material Design)
   🎯 PURPOSE: Optimal readability on all screens (Mobile to 4K/5K) */

/* GLOBAL AUTO-CENTERING FOR ALL PAGES (User Request: "her sayfa için kendini otomatik düzeltsin ortalasın") */
/* 🇹🇷 TR: Tüm sayfalar otomatik ortalanır ve max-width uygulanır
   🇬🇧 EN: All pages auto-center and apply max-width
   🎯 PURPOSE: Consistent layout across entire site */

/* Main content wrappers - NON-Elementor pages (Blog, Archive, Single Post, Custom Pages) */
.archive-content-wrapper,
.single-content-wrapper,
.page-content-wrapper,
.site-content > main,
.content-area > main,
body:not(.elementor-page) main.site-main {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* ONLY for BOXED sections - DO NOT force on FULL WIDTH sections! */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1280px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Full Width sections - NO max-width limit! User can control width freely */
.elementor-section.elementor-section-full_width > .elementor-container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Custom width sections - Respect Elementor's settings */
.elementor-section.elementor-section-stretched > .elementor-container {
    max-width: none !important;
}

/* Typography - Mobile */
body {
    font-size: 14px;
    line-height: 1.6;
}

h1 { font-size: 28px !important; }
h2 { font-size: 24px !important; }
h3 { font-size: 20px !important; }
h4 { font-size: 18px !important; }
h5 { font-size: 16px !important; }

/* =====================================================
   HEADER - MOBILE
   ===================================================== */
@media (max-width: 767px) {
    header.elementor-location-header {
        position: sticky;
        top: 0;
        z-index: 9999;
    }
    
    .elementor-nav-menu--dropdown {
        width: 100% !important;
        left: 0 !important;
    }
    
    .elementor-nav-menu .elementor-item {
        font-size: 14px !important;
        padding: 12px 15px !important;
    }
    
    .elementor-widget-nav-menu .elementor-nav-menu--toggle {
        display: block !important;
    }
    
    .elementor-widget-nav-menu .elementor-nav-menu {
        display: none;
    }
    
    .elementor-widget-nav-menu .elementor-nav-menu--toggle-active + .elementor-nav-menu {
        display: block !important;
    }
}

/* =====================================================
   FOOTER - MOBILE
   ===================================================== */
@media (max-width: 767px) {
    footer.elementor-location-footer .elementor-column {
        width: 100% !important;
        margin-bottom: 30px;
    }
    
    footer.elementor-location-footer .elementor-widget-heading h2 {
        font-size: 18px !important;
        margin-bottom: 15px;
    }
    
    footer.elementor-location-footer .elementor-icon-list-item {
        margin-bottom: 8px;
    }
}

/* =====================================================
   CONTENT - MOBILE
   ===================================================== */
@media (max-width: 767px) {
    /* Global Content Wrappers - Mobile Padding */
    /* NOTE: .archive-content-wrapper EXCLUDED - managed in blog.css! */
    .single-content-wrapper,
    .page-content-wrapper,
    .site-content > main,
    .content-area > main,
    body:not(.elementor-page) main.site-main {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Services Grid */
    .grpcmedia-services-grid .service-card {
        width: 100% !important;
        margin-bottom: 20px;
    }
    
    /* Blog Cards */
    .grpcmedia-blog-cards .blog-card {
        width: 100% !important;
        margin-bottom: 20px;
    }
    
    /* Icon Box */
    .elementor-icon-box-wrapper {
        text-align: center !important;
    }
    
    /* Partners Carousel */
    .grpcmedia-partners-carousel .swiper-slide {
        width: 50% !important;
    }
    
    /* Features Bar */
    .grpcmedia-features-bar .feature-item {
        width: 100% !important;
        margin-bottom: 15px;
    }
    
    /* Floating Contact Button */
    .grpc-floating-contact {
        bottom: 20px !important;
        right: 15px !important;
    }
    
    .grpc-floating-contact__button {
        padding: 10px 18px !important;
        font-size: 14px !important;
    }
}

/* =====================================================
   TABLET - (768px - 1024px)
   ===================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Container */
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 720px;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Global Content Wrappers - Tablet Padding */
    .archive-content-wrapper,
    .single-content-wrapper,
    .page-content-wrapper,
    .site-content > main,
    .content-area > main,
    body:not(.elementor-page) main.site-main {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Typography - Tablet */
    body {
        font-size: 15px;
    }
    
    h1 { font-size: 36px !important; }
    h2 { font-size: 30px !important; }
    h3 { font-size: 24px !important; }
    h4 { font-size: 20px !important; }
    h5 { font-size: 18px !important; }
    
    /* Header - Tablet */
    .elementor-nav-menu .elementor-item {
        font-size: 15px !important;
        padding: 15px 18px !important;
    }
    
    /* Footer - Tablet */
    footer.elementor-location-footer .elementor-column {
        width: 50% !important;
    }
    
    /* Services Grid - Tablet (2 columns) */
    .grpcmedia-services-grid .service-card {
        width: 48% !important;
    }
    
    /* Blog Cards - Tablet (2 columns) */
    .grpcmedia-blog-cards .blog-card {
        width: 48% !important;
    }
    
    /* Partners Carousel - Tablet */
    .grpcmedia-partners-carousel .swiper-slide {
        width: 33.333% !important;
    }
}

/* =====================================================
   DESKTOP - (> 1024px)
   ===================================================== */
@media (min-width: 1025px) {
    /* Container - WORLD STANDARD (1280px like Tailwind/Material Design) */
    .elementor-section .elementor-container,
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 1280px !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    
    /* Global Content Wrappers - Desktop Padding */
    .archive-content-wrapper,
    .single-content-wrapper,
    .page-content-wrapper,
    .site-content > main,
    .content-area > main,
    body:not(.elementor-page) main.site-main {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    
    /* Typography - Desktop */
    body {
        font-size: 16px;
    }
    
    h1 { font-size: 48px !important; }
    h2 { font-size: 36px !important; }
    h3 { font-size: 28px !important; }
    h4 { font-size: 22px !important; }
    h5 { font-size: 18px !important; }
    
    /* Header - Desktop */
    .elementor-nav-menu .elementor-item {
        font-size: 16px !important;
        padding: 15px 20px !important;
    }
    
    /* Footer - Desktop */
    footer.elementor-location-footer .elementor-column {
        width: 25% !important;
    }
    
    /* Services Grid - Desktop (3 columns) */
    .grpcmedia-services-grid .service-card {
        width: 32% !important;
    }
    
    /* Blog Cards - Desktop */
    .grpcmedia-blog-cards .blog-card {
        width: 32% !important;
    }
    
    /* Partners Carousel - Desktop */
    .grpcmedia-partners-carousel .swiper-slide {
        width: 16.666% !important;
    }
}

/* =====================================================
   WIDE DESKTOP - (> 1440px)
   ===================================================== */
@media (min-width: 1440px) {
    /* Container - WORLD STANDARD (1280px max) */
    .elementor-section .elementor-container,
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 1280px !important;
        padding-left: 50px !important;
        padding-right: 50px !important;
    }
    
    /* Services Grid - Wide Desktop */
    .grpcmedia-services-grid .service-card {
        width: 30% !important;
    }
}

/* =====================================================
   ULTRA WIDE - (> 1920px)
   ===================================================== */
@media (min-width: 1920px) {
    /* Container - WORLD STANDARD (1280px max, even on 4K/5K screens) */
    .elementor-section .elementor-container,
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 1280px !important;
        padding-left: 80px !important;
        padding-right: 80px !important;
    }
}

/* =====================================================
   LANDSCAPE ORIENTATION FIXES
   ===================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    /* Fix header on landscape mobile */
    header.elementor-location-header {
        position: relative !important;
    }
    
    /* Reduce hero section height */
    .elementor-element.elementor-section {
        min-height: auto !important;
    }
}

/* =====================================================
   PRINT STYLES
   ===================================================== */
@media print {
    header.elementor-location-header,
    footer.elementor-location-footer,
    .grpc-floating-contact,
    .elementor-widget-nav-menu {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        color: #000 !important;
        background: #fff !important;
    }
}

/* =====================================================
   ACCESSIBILITY - FOCUS STATES
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    body {
        background: #fff;
        color: #000;
    }
    
    .elementor-button {
        border: 2px solid currentColor !important;
    }
}

/* =====================================================
   SPECIFIC DEVICE FIXES
   ===================================================== */

/* iPhone SE / Small Phones (320px) */
@media (max-width: 375px) {
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    
    .grpc-floating-contact__button {
        padding: 8px 15px !important;
        font-size: 13px !important;
    }
}

/* iPad / Tablet Portrait */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .elementor-section .elementor-container,
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 1280px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* iPad Pro / Large Tablets */
@media (min-width: 1024px) and (max-width: 1366px) {
    .elementor-section .elementor-container,
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 1280px !important;
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
}