/* === FILE INDUK CSS === */
/* File ini bertindak sebagai manajer yang menggabungkan semua bagian CSS menjadi satu. */
/* Urutan @import ini sangat penting untuk memastikan gaya diterapkan dengan benar. */

/* 1. Fondasi: Variabel, reset, font, dll. (Berlaku untuk semua halaman) */
@import url('base.css');

/* 2. Tata Letak Utama: Header, footer, main, section. (Berlaku untuk semua halaman) */
@import url('layout.css');

/* 3. Komponen yang Dapat Digunakan Kembali */
@import url('components/navigation.css'); /* Untuk semua halaman */
@import url('components/buttons.css');    /* Untuk semua halaman */
@import url('components/cards.css');      /* Untuk semua halaman */

/* 4. Gaya Spesifik per Halaman (Hanya akan aktif jika elemennya ada di halaman tersebut) */
@import url('pages/home.css');      /* Gaya unik untuk seksi #home, #about, #contact di index.html */
@import url('pages/projects.css');  /* Gaya untuk .project-grid di projects.html dan #articles-container di blog.html */
@import url('pages/article.css');   /* Gaya untuk #article-content di article.html */

/* 5. Aturan Responsif (dijalankan terakhir agar bisa menimpa gaya sebelumnya) */
@media (max-width: 768px) {
    /* Umum */
    #home h1 { font-size: 2.5rem; }
    
    /* Navigasi Mobile */
    nav ul { display: none; } /* Sembunyikan navigasi desktop */
    nav ul#nav-links {
        display: none; /* Pastikan menu mobile juga tersembunyi awalnya */
        flex-direction: column;
        position: absolute;
        top: 65px; 
        left: 0;
        width: 100%;
        background-color: var(--primary-color);
        padding: 1rem 0;
        border-bottom: 1px solid #333;
    }
    nav ul#nav-links.nav-active { display: flex; } /* Tampilkan saat aktif */
    nav ul#nav-links li { text-align: center; padding: 1rem 0; }
    #hamburger-btn { display: block; } /* Tampilkan tombol hamburger */
    
    /* Tata Letak Halaman Mobile */
    .about-intro { flex-direction: column; text-align: center; }
    .contact-options { grid-template-columns: 1fr; }
}