/* --- RESPONSIVE MEDIA QUERIES --- */

/* Urutan pertama: 1024px (Paling besar) */
@media (max-width: 1024px) {
    
    /* === 1. PENGATURAN ARTIKEL === */
    .artikel-grid {
        grid-template-columns: 1fr !important;
        row-gap: 2rem !important; 
        column-gap: 0 !important;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .artikel-card {
        width: 100% !important;
        box-sizing: border-box;
        margin-bottom: 1rem; 
    }

    .artikel-info h3 {
        font-size: 1.15rem !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Bungkus nav agar dia mengambil sisa ruang yang ada dan mendorong konten ke tengah */
    header nav {
        flex-grow: 1;
        display: flex;
        justify-content: flex-end; /* Mendorong menu ke kanan secara rapi */
        overflow: visible;
    }

    /* Atur ulang ul tempat menu berada */
    nav ul {
        display: flex !important;
        justify-content: space-evenly !important; /* Bagi rata jarak antar menu */
        gap: 0.35rem !important; /* Jarak aman antar menu */
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Amankan teks link menu navigasi */
    nav a {
        font-size: 0.72rem !important; /* Susutkan sedikit lagi biar huruf 'R' gak kepentok */
        padding: 0.3rem 0.35rem !important; /* Kasih padding seimbang biar enak dilihat */
        white-space: nowrap !important; /* Cegah teks patah baris */
        display: inline-block;
    }

    .footer-socials {
        gap: 1.5rem !important;        /* Jarak antar ikon dikecilkan agar muat di layar HP */
        margin-top: 3rem !important;   /* Jarak dari tombol WhatsApp dikurangi supaya tidak terlalu renggang */
        margin-bottom: 1rem !important;
    }

    .footer-socials a {
        font-size: 1.5rem !important;  /* Ukuran ikon sedikit diperkecil agar proporsional */
    }
    
    img {
        max-width: 100%; /* Biar gambar gak jebol keluar layar HP */
        height: auto;
    }
}

/* Urutan kedua: 968px */
@media (max-width: 968px) {
    .process-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Urutan ketiga: 768px */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
    section { padding: 4rem 0; }
    
    .solutions-grid, 
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    nav ul { gap: 1.25rem; }
}

/* Urutan keempat: 576px (Paling kecil) */
@media (max-width: 576px) {
    /* === 2. FIX HEADER UNTUK MOBILE === */
    
    /* Naikin tinggi dikit jadi 4rem biar ada ruang napas, kasih padding seimbang kiri-kanan */
    .nav-container {
        display: flex;
        flex-direction: column;    /* Menunya numpuk ke bawah */
        justify-content: center;   /* Rata tengah */
        align-items: center;       /* Rata tengah horizontal */
        width: 100%;
        height: auto;              /* Biarkan melar alami membungkus teks */
        padding: 1rem 1.5rem;      /* Atas-bawah longgar, kanan-kiri aman */
        gap: 0.8rem;               /* Jarak antara logo dan menu */
        box-sizing: border-box;
    }

    .nav-container-subpages {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        max-width: var(--max-width);
        margin: 0 auto;
        align-items: center;       /* Rata tengah horizontal */
        width: 100%;
        height: auto;              /* Biarkan melar alami membungkus teks */
        padding: 1rem 1.5rem;      /* Atas-bawah longgar, kanan-kiri aman */
        gap: 0.8rem;               /* Jarak antara logo dan menu */
        box-sizing: border-box;
    }

    /* Menargetkan teks link khusus yang ada di dalam .nav-container */
    .nav-container nav a {
	font-size: 0.85rem !important; /* Ubah angka ini sesuai besar yang kamu mau (bawaan: 0.95rem) */
    }
    
    /* Duplikat didepak, properti digabung jadi satu blok utuh */
    .btn-back {
        color: var(--text-muted);
        text-decoration: none;
        font-family: var(--font-sans);
        font-weight: 500;
        font-size: 0.85rem;
        transition: var(--transition);
    }
    
    .btn-back:hover {
        color: var(--accent-blue);
    }

    /* Bonus Perbaikan Typo Logo agar tegak lurus di tengah */
    .logo {
        align-items: center;    /* Perbaikan dari align-item menjadi align-items */
    }
    
    nav ul { gap: 1.5rem; }
    
    .process-list {
        grid-template-columns: 1fr;
    }
    
    .hero { padding: 4.5rem 0 4rem 0; }
    footer { padding: 4rem 0; }
}