/* Aturan ini hanya berlaku untuk layar dengan lebar maksimal 992px */
@media (max-width: 992px) {
    
 .page-wrapper {
    min-height: auto; /* Menonaktifkan tinggi minimum di mobile */
}

    /* 1. Sembunyikan elemen desktop */
    .nav-links, .phone-image-desktop {
        display: none;
    }

    /* 2. Atur layout utama menjadi vertikal */
    .hero-container {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch; /* Membuat anak elemen selebar container */
        padding: 0;
    }

    /* 3. Panggil dan posisikan gambar cover mobile */
    .hero-left {
        display: block;
        width: 100%;
        height: 50px; /* Beri tinggi tetap untuk area gambar */
        background-image: url('../images/cover-mobile.png'); /* Panggil gambar dari CSS */
        background-repeat: no-repeat;
        background-size: contain; /* Pastikan seluruh gambar terlihat tanpa terpotong */
        background-position: center left; /* Posisikan gambar mentok ke kiri */
        margin-top: 1rem;
    }

    /* 4. Atur posisi dan perataan teks di bawah gambar */
    .hero-right {
        order: 2; /* Pastikan posisi teks di bawah gambar */
        display: flex;
        top: 300px;
        flex-direction: column;
        align-items: flex-end;   /* MEMBUAT SEMUA KONTEN RATA KANAN */
        padding: 1rem 20px 2rem 20px;
        text-align: right;
        margin-left: 0;
    }
    .hero-right p {
        text-align: right;
    }
    .hero-right h1 {
        text-align: right;
        font-size: 39px;
        margin-top: -190px;
    }
    .app-buttons, .blueprint-container {
        justify-content: flex-end; /* MEMBUAT TOMBOL RATA KANAN */
    }
    
    /* 5. Atur ulang spasi antar komponen di mobile */
    .hero-right h1 {
        margin-bottom: 22px;
        
        
    }
    .hero-right p {
        margin-bottom: 10px;
        margin-top: 10px;
    }
    .app-buttons {
        margin-bottom: 10px;
    }
    .app-buttons img {
        height: 47px;
    }
}


/* Aturan tambahan untuk layar yang sangat kecil (di bawah 480px) */
@media (max-width: 480px) {
    /* Di layar sangat kecil, tengahkan kembali agar rapi */
    .hero-left {
        height: 470px;
        background-position: left; /* Posisikan gambar di tengah */
    }
    .hero-right {
        align-items: right; /* Posisikan teks ke kanan */
        text-align: center;
        top: -85px;
    }
    .hero-right p {
        text-align: right;
    }
    .hero-right h1 {
        text-align: right;
        margin-top: 0;
    }
    
    .blueprint-container {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 22px; /* Ukuran teks "Unduh" */
    font-weight: 500;
    color: #333;
}

.blueprint-button {
    font-size: 22px; /* Ukuran font di dalam tombol */
    padding: 8px 10px; /* Atur padding atas/bawah dan kiri/kanan */
    /* Baris lainnya 
}