/* -----------------------------------------------------------
   responsive.css - MOBİL UYUMLULUK VE DÜZELTMELER
----------------------------------------------------------- */

/* TABLET (1024px ve Altı) */
@media (max-width: 1024px) {
    .container, .header-wrapper, .main-content, .footer-wrapper { 
        padding-left: 20px; padding-right: 20px; 
    }
    .product-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 20px; }
}

/* MOBİL (768px ve Altı) */
@media (max-width: 768px) {
    header { height: auto !important; position: relative !important; }
    .header-wrapper {
        display: grid !important;
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: 10px 15px !important;
        height: auto;
    }
    

    .promo-container { display:block;
        
    }
    .promo-box{    height: 300px;margin-bottom: 10px;}
    
    .logo { grid-column: 1 / 2; font-size: 1.5rem; text-align: left; }
    .hamburger-menu {
        grid-column: 2 / 3; display: block !important;
        font-size: 1.8rem; cursor: pointer; color: #333; padding: 5px; text-align: right;
    }
    .main-nav {
        grid-column: 1 / 3; display: none;
        flex-direction: column !important; margin-top: 15px;
        border-top: 1px solid #eee; background: #fff; width: 100%;
    }
    .main-nav.responsive { display: flex !important; }
    .nav-item { width: 100%; border-bottom: 1px solid #f9f9f9; display: block; }
    .nav-link { display: block; padding: 15px; text-align: left; width: 100%; }
    .dropdown-menu {
        position: static; display: none; width: 100%;
        box-shadow: none; border: none; background: #fdfdfd;
        border-left: 3px solid var(--primary);
    }
    .dropdown-menu.show { display: block; }
    .dropdown-menu a { padding-left: 30px; }

    .hero-section { height: 480px !important; background-size: cover !important; background-position: center center !important; }
    .hero-overlay { padding: 20px; width: 95%; }
    .hero-overlay h1 { font-size: 1.8rem; }

    .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 15px; }
    .trust-grid { flex-direction: column; gap: 30px; }

    /* Newsletter */
    .newsletter-container { flex-direction: column; text-align: center; }
    .news-form { width: 100%; flex-direction: column; }
    .news-btn { width: 100%; margin-top: 10px; padding: 12px; }

    /* Footer */
    .footer-wrapper { flex-direction: column; text-align: center; gap: 40px; }
    .f-col h4::after { left: 50%; transform: translateX(-50%); }
    .contact-list li { justify-content: center; text-align: center; }
    .social-icons { justify-content: center; }
    .bottom-container { flex-direction: column; text-align: center; }

    /* Kategoriler 3'lü */
    .cat-container { gap: 10px; }
    .cat-box { width: 31% !important; min-width: auto !important; margin-bottom: 15px; }
    .cat-circle { width: 70px !important; height: 70px !important; font-size: 1.5rem !important; }
    .cat-title { font-size: 0.8rem !important; }

    /* İletişim */
    .contact-wrapper { display: flex !important; flex-direction: column !important; gap: 30px !important; }
    .contact-info, .contact-form { width: 100% !important; padding: 25px 20px !important; }
    .form-control { height: 50px !important; font-size: 1rem !important; }
    textarea.form-control { height: auto !important; }
    .btn-submit { width: 100% !important; padding: 15px !important; font-size: 1.1rem !important; }

    /* Instagram section */
    .ig-wrap { padding: 40px 24px; }
    .ig-inner { flex-direction: column; text-align: center; }
    .ig-left { flex-direction: column; align-items: center; }
    .ig-dots { justify-content: center; }
    .ig-handle { font-size: 22px; }
}

/* KÜÇÜK TELEFON (480px Altı) */
@media (max-width: 480px) {
    .product-grid { grid-template-columns: 1fr !important; }
    .cat-circle { width: 70px; height: 70px; font-size: 1.5rem; }
    .cat-box { width: 90px; }
}