/* ==========================================
   OMPACK - MOBİL RESPONSIVE
   ========================================== */

/* GENEL */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* ==========================================
   MOBİL NAVBAR (max 1024px)
   ========================================== */
@media screen and (max-width: 1024px) {
    
    /* Navbar sabit üstte */
    .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        background: #ffffff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }
    
    /* Nav Container - Flexbox */
    .nav-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 16px !important;
        min-height: 60px !important;
        max-width: 100% !important;
    }
    
    /* LOGO - Sol taraf */
    .logo {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }
    
    .logo img,
    .logo-image {
        height: 38px !important;
        width: auto !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* DİL SEÇİMİ - Sağda, hamburger'in solunda */
    .language-switch-mobile {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        margin-left: auto !important;
        margin-right: 12px !important;
    }
    
    .language-switch-mobile .lang-btn {
        padding: 7px 12px !important;
        font-size: 0.85rem !important;
        border: 1px solid #ddd !important;
        background: #fff !important;
        border-radius: 5px !important;
        cursor: pointer !important;
        font-weight: 600 !important;
        color: #333 !important;
    }
    
    .language-switch-mobile .lang-btn.active {
        background: #0046BE !important;
        color: #fff !important;
        border-color: #0046BE !important;
    }
    
    /* HAMBURGER MENÜ BUTONU */
    .nav-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        width: 44px !important;
        height: 44px !important;
        cursor: pointer !important;
        z-index: 10002 !important;
        background: transparent !important;
        border: none !important;
        padding: 10px !important;
        flex-shrink: 0 !important;
    }
    
    .nav-toggle span {
        display: block !important;
        width: 24px !important;
        height: 3px !important;
        background-color: #0046BE !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
    }
    
    /* Hamburger X animasyonu */
    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px) !important;
    }
    
    .nav-toggle.active span:nth-child(2) {
        opacity: 0 !important;
    }
    
    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px) !important;
    }
    
    /* MOBİL MENÜ - Sağdan kayarak açılır */
    .nav-menu {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 20px !important;
        transform: translateX(100%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
        z-index: 10000 !important;
        overflow-y: auto !important;
    }
    
    /* Menü açık durumu */
    .nav-menu.active {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Menü listesi */
    .nav-list {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        gap: 0 !important;
    }
    
    .nav-list > li {
        width: 100% !important;
        border-bottom: 1px solid #eee !important;
    }
    
    .nav-list > li > a {
        display: block !important;
        padding: 16px 12px !important;
        font-size: 1rem !important;
        color: #333 !important;
        text-decoration: none !important;
    }
    
    /* Dropdown menü */
    .nav-list .dropdown-menu {
        position: static !important;
        display: none !important;
        background: #f8f8f8 !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        padding: 0 !important;
    }
    
    .nav-list .dropdown-menu li a {
        padding: 12px 24px !important;
        font-size: 0.9rem !important;
        color: #555 !important;
    }
    
    /* Nav actions */
    .nav-menu .nav-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        margin-top: 20px !important;
        padding-top: 20px !important;
        border-top: 1px solid #eee !important;
    }
    
    /* Menü içindeki dil seçimini gizle */
    .nav-menu .language-switch {
        display: none !important;
    }
    
    .nav-menu .nav-actions .btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ==========================================
   MOBİL İÇERİK (max 768px)
   ========================================== */
@media screen and (max-width: 768px) {
    
    /* Container */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Hero */
    .hero {
        padding-top: 80px !important;
        padding-bottom: 40px !important;
        min-height: auto !important;
    }
    
    .hero-container {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .hero-content {
        text-align: center !important;
    }
    
    .hero-image,
    .floating-card,
    .scroll-indicator {
        display: none !important;
    }
    
    .hero-title {
        font-size: 1.75rem !important;
    }
    
    .hero-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .hero-actions .btn {
        width: 100% !important;
    }
    
    .hero-stats {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 20px !important;
        margin-top: 30px !important;
    }
    
    .hero-stats .stat {
        text-align: center !important;
    }
    
    .stat-number {
        font-size: 1.5rem !important;
    }
    
    /* Sections */
    .section {
        padding: 40px 0 !important;
    }
    
    .section-title {
        font-size: 1.5rem !important;
    }
    
    /* Grid'ler tek kolon */
    .categories-grid-modern,
    .products-grid,
    .why-grid,
    .about-grid,
    .contact-grid,
    .applications-grid,
    .features-grid,
    .values-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    /* Kategori kartları yatay */
    .category-card-modern {
        display: flex !important;
        flex-direction: row !important;
        height: auto !important;
    }
    
    .category-image-modern {
        width: 100px !important;
        height: 100px !important;
        flex-shrink: 0 !important;
    }
    
    .category-content-modern {
        padding: 12px !important;
    }
    
    .category-icon-modern {
        display: none !important;
    }
    
    /* Product actions */
    .product-actions,
    .product-cta {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .product-actions .btn,
    .product-cta .btn {
        width: 100% !important;
    }
    
    /* Stats */
    .about-stats,
    .stats-row,
    .team-stats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
    
    .team-stat .stat-number,
    .about-stats .stat-number {
        font-size: 1.25rem !important;
    }
    
    /* Quality metrics */
    .quality-metrics {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    
    .quality-metrics .metric {
        flex: 0 0 30% !important;
        text-align: center !important;
    }
    
    .metric-value {
        font-size: 1.1rem !important;
    }
    
    .metric-label {
        font-size: 0.65rem !important;
    }
    
    /* Certifications */
    .certifications-grid,
    .cert-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* CTA */
    .cta-content {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .cta-actions {
        flex-direction: column !important;
    }
    
    .cta-image {
        display: none !important;
    }
    
    /* Footer */
    .footer {
        padding-bottom: 80px !important;
    }
    
    .footer-top {
        flex-direction: column !important;
        text-align: center !important;
        gap: 30px !important;
    }
    
    .social-links {
        justify-content: center !important;
    }
    
    /* Footer mobile bar */
    .footer-mobile-actions {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: #fff !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
        z-index: 9998 !important;
        padding: 8px !important;
    }
    
    .footer-mobile-buttons {
        display: flex !important;
        justify-content: space-around !important;
        width: 100% !important;
    }
    
    .footer-mobile-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 0.7rem !important;
        color: #555 !important;
        text-decoration: none !important;
    }
    
    .footer-mobile-btn svg {
        width: 22px !important;
        height: 22px !important;
    }
    
    .footer-mobile-btn.whatsapp {
        color: #25D366 !important;
    }
    
    /* Page header */
    .page-header {
        padding: 80px 16px 40px !important;
    }
    
    .page-header h1 {
        font-size: 1.5rem !important;
    }
    
    /* Form */
    .form-row {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    /* Filter buttons */
    .filter-buttons {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    
    .filter-btn {
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }
}

/* ==========================================
   KÜÇÜK TELEFONLAR (max 480px)
   ========================================== */
@media screen and (max-width: 480px) {
    .hero-title {
        font-size: 1.5rem !important;
    }
    
    .section-title {
        font-size: 1.25rem !important;
    }
    
    .about-stats,
    .stats-row,
    .team-stats {
        grid-template-columns: 1fr !important;
    }
    
    .certifications-grid,
    .cert-grid {
        grid-template-columns: 1fr !important;
    }
    
    .category-image-modern {
        width: 80px !important;
        height: 80px !important;
    }
}

/* ==========================================
   DESKTOP - Mobil öğeleri gizle
   ========================================== */
@media screen and (min-width: 1025px) {
    .language-switch-mobile {
        display: none !important;
    }
    
    .nav-toggle {
        display: none !important;
    }
}

@media screen and (min-width: 769px) {
    .footer-mobile-actions {
        display: none !important;
    }
}

/* Body scroll lock */
body.menu-open {
    overflow: hidden !important;
}