/* ZİRVE İNŞAAT - GLOBAL MOBİL ENTEGRASYON SİSTEMİ 
   Bu dosya ekran 768px'in altına düştüğünde devreye girer.
*/

@media (max-width: 768px) {
    
    /* 1. SAYFA GENELİ */
    body {
        overflow-x: hidden !important; /* Sağa sola kaymayı kökten engeller */
        width: 100%;
    }

    /* 2. MENÜ (NAVIGASYON) */
    nav {
        flex-direction: column !important;
        padding: 15px !important;
        height: auto !important;
        position: relative !important;
    }

    nav ul {
        margin-top: 15px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 0 !important;
    }

    nav ul li a {
        font-size: 14px !important;
    }

    /* 3. BAŞLIKLAR VE GİRİŞ ALANLARI (HERO/HEADER) */
    header, .header-deco, .header-rest {
        height: auto !important;
        min-height: 45vh !important;
        padding: 80px 20px 40px !important;
    }

    h1 {
        font-size: 1.8rem !important; /* Başlıklar telefona tam sığsın */
        line-height: 1.3 !important;
        text-align: center !important;
    }

    /* 4. GRID YAPILARI (KARTLAR VE GALERİLER) */
    /* Ana sayfadaki hizmetler ve sayfa içindeki galeriler */
    .grid, .gallery-grid, .gallery-grid-deco {
        grid-template-columns: 1fr !important; /* HER ŞEYİ ALT ALTA DİZER */
        gap: 20px !important;
        width: 100% !important;
        padding: 0 15px !important;
    }

    /* 5. KARTLAR VE GÖRSELLER */
    .card, .item, .gal-item {
        width: 100% !important;
        height: auto !important;
        min-height: 300px !important; /* Resimlerin çok basık durmasını engeller */
        margin: 0 0 20px 0 !important;
    }

    .item img, .gal-item img {
        height: 250px !important;
        object-fit: cover !important;
    }

    /* 6. BUTONLAR (PARMAK DOSTU) */
    /* Tüm butonları tam genişlik yapar ki basması kolay olsun */
    .btn, .card-btn, .service-btn, .back-home, .btn-back, #alertBtn {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        padding: 15px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
        margin-top: 10px !important;
    }

    /* 7. RESTORASYON SÜRECİ VE ÖZEL ALANLAR */
    .step-card {
        flex-direction: column !important;
        text-align: center !important;
        padding: 20px !important;
    }

    .step-number {
        margin: 0 auto 15px !important;
    }

    /* 8. İLETİŞİM FORMU (Eğer varsa) */
    .contact-container, .container {
        flex-direction: column !important;
        width: 95% !important;
        padding: 10px !important;
    }

    input, textarea {
        font-size: 16px !important; /* Tıklayınca ekranın saçma sapan zoom yapmasını önler */
        padding: 12px !important;
    }

    /* 9. ALT BİLGİ (FOOTER) */
    footer {
        padding: 40px 20px !important;
        font-size: 14px !important;
    }
}

/* EKSTRA KÜÇÜK EKRANLAR (İPHONE 5/SE GİBİ) */
@media (max-width: 400px) {
    h1 {
        font-size: 1.5rem !important;
    }
}