/* assets/css/mobile.css - FINAL CLEAN VERSION (Şeffaf Arka Plan) */

/* Sadece Mobil ve Tabletler İçin (768px altı) */
@media screen and (max-width: 768px) {

    /* --- 1. TEMEL SAYFA DÜZENİ (Taşmaları Engelle) --- */
    html, body {
        overflow-x: hidden !important; /* Yatay kaydırmayı kapat */
        width: 100% !important;
        margin: 0;
        padding: 0;
    }

    .container {
        width: 100% !important;
        padding: 0 20px !important; /* Kenarlardan 20px boşluk bırak */
        box-sizing: border-box !important;
    }

    /* --- 2. HEADER (MENÜ) --- */
    .navbar {
        padding: 10px 0 !important;
        background: #fff;
        border-bottom: 1px solid #eee;
    }

    .nav-container {
        display: flex !important;
        flex-direction: column !important; /* Alt alta diz */
        align-items: center !important;
        gap: 15px !important;
    }

    .logo {
        font-size: 1.5rem !important; /* Logoyu biraz büyüt */
    }

    .nav-links {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px !important;
        font-size: 0.95rem !important;
    }
    
    .btn-nav {
        display: none !important; /* Mobilde üstteki "Order" butonunu gizle (zaten aşağıda büyük var) */
    }

    /* --- 3. HERO (ÜRÜN GÖRSELİ VE BAŞLIK) --- */
    .hero {
        padding: 20px 0 40px 0 !important;
        text-align: center;
    }

    .hero-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }

    /* Ürün Görsel Alanı - ŞEFFAF ARKA PLAN */
    .hero-image {
        width: 100% !important;
        background: transparent !important; /* Arka planı şeffaf yap */
        box-shadow: none !important; /* Gölgeyi kaldır */
        border: none !important; /* Çerçeveyi kaldır */
        padding: 0 !important; /* İç boşluğu sıfırla */
        margin-bottom: 15px !important;
    }

    .main-img-container img, 
    #mainImage {
        width: 100% !important;
        max-width: 350px !important; /* Telefonda ideal genişlik */
        height: auto !important;
        display: block;
        margin: 0 auto; /* Ortala */
        border-radius: 12px !important;
        filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1)); /* Ürüne hafif gölge ver */
    }

    /* Küçük Resimler (Thumbnails) */
    .thumbnails {
        justify-content: center !important;
        gap: 10px !important;
        margin-top: 15px !important;
        flex-wrap: wrap !important;
    }

    .thumb {
        width: 55px !important;
        height: 55px !important;
        border: 2px solid #e2e8f0;
        border-radius: 10px !important;
        background: #fff; /* Thumb arkası beyaz kalsın */
    }

    /* Başlık ve Metinler */
    .hero-text {
        padding: 0 5px;
    }

    .hero-text h1 {
        font-size: 1.75rem !important; /* Başlığı telefona uygun küçült */
        line-height: 1.3 !important;
        color: #1e293b;
        margin-bottom: 10px !important;
    }

    .hero-sub {
        font-size: 1rem !important;
        color: #64748b;
        line-height: 1.5;
    }

    /* Rozetler */
    .badges-wrapper {
        justify-content: center !important;
        gap: 8px !important;
        margin-bottom: 15px !important;
    }
    
    .badge {
        font-size: 0.8rem !important;
        padding: 5px 10px !important;
    }

    /* Fiyat ve Buton */
    .price-box {
        justify-content: center !important;
        margin: 20px 0 !important;
    }

    .new-price {
        font-size: 2.2rem !important;
    }

    .btn-primary {
        width: 100% !important; /* Tam genişlik */
        padding: 18px !important; /* Parmağa uygun yükseklik */
        font-size: 1.2rem !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4) !important;
    }

    /* Güvenlik İkonları */
    .trust-features {
        flex-direction: column !important; /* Alt alta */
        gap: 12px !important;
        margin-top: 25px !important;
        font-size: 0.9rem !important;
        color: #475569;
    }

    /* --- 4. SİPARİŞ MODALI (Popup) DÜZELTMESİ --- */
    .modal-content {
        width: 92% !important; /* Ekranın %92'sini kapla */
        margin: 20px auto !important;
        max-height: 85vh; /* Çok uzun olursa taşmasın */
        overflow-y: auto; /* İçinde kaydırma aç */
        border-radius: 16px !important;
    }

    .modal-grid {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Modal - Üst Kısım (Özet) */
    .modal-left {
        padding: 20px !important;
        background: #f1f5f9;
        text-align: center;
        border-bottom: 1px solid #e2e8f0;
    }

    .modal-left img {
        height: 100px !important;
        width: auto !important;
        margin: 0 auto 10px;
    }

    .modal-left ul { display: none !important; } /* Listeyi gizle, yer aç */

    /* Modal - Form Kısmı */
    .modal-right {
        padding: 20px !important;
    }

    .checkout-form .form-group input, 
    .checkout-form .form-group select {
        height: 50px !important; /* Inputları yükselt (kolay tıklama) */
        font-size: 16px !important; /* iOS zoom engelleme */
        border-radius: 8px !important;
    }

    /* Yan yana olan inputları (Ad/Email) alt alta al */
    .checkout-form div[style*="display:flex"]:not(.payment-wrapper div) {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .payment-wrapper {
        margin-top: 15px;
    }
    
    /* Kart Tarihi ve CVC yan yana kalsın */
    .payment-wrapper div[style*="display:flex"] {
        flex-direction: row !important;
        gap: 10px !important;
    }

    /* --- 5. DİĞER DÜZELTMELER --- */
    /* WhatsApp Butonu */
    .whatsapp-support {
        bottom: 20px !important;
        right: 20px !important;
        width: 55px !important;
        height: 55px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }
    
    .whatsapp-text {
        display: none !important; /* Mobilde yazıyı gizle, sadece ikon kalsın */
    }
    
    /* Blog Sayfası */
    .layout-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    .sidebar-sticky {
        position: static !important;
    }
}