/* =================================
   GAYA INDUK UNTUK HALAMAN ISU
   (Dipakai oleh isu1.html - kesimpulan.html)
   ================================= */

/* Gaya Asas */
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    margin: 0; 
    padding: 0; 
    line-height: 1.6; 
    color: #333; 
}

/* Navigasi */
.nav-quick-access { 
    background-color: #37474f; 
    padding: 0.5rem 1rem; 

    /* Menggantikan text-align: center dengan Flexbox */
    display: flex;
    justify-content: space-between;
    align-items: center;

    position: sticky; 
    top: 0; 
    z-index: 1000; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
}

/* Pautan di dalam .nav-links */
.nav-links a { 
    color: white; 
    text-decoration: none; 
    font-weight: bold; 
    padding: 1rem 1rem; 
    display: inline-block; 
    transition: background-color 0.3s; 
    font-size: 0.9rem; 
}
.nav-links a:hover { 
    background-color: #546e7a; 
}
.nav-links a.active { 
    background-color: #00796b; 
    color: white; 
}

/* Pautan Home */
.nav-quick-access a.home-link { 
    background-color: #004d40; 
    border-radius: 5px; 
    margin-right: 10px; 
    /* Pastikan ia sentiasa kelihatan */
    flex-shrink: 0; 
}

/* Butang Hamburger (Sembunyi di Desktop) */
.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.hamburger {
    display: block;
    position: relative;
    width: 25px;
    height: 3px;
    background: white;
    border-radius: 3px;
    transition: all 0.3s;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 3px;
    transition: all 0.3s;
}

.hamburger::before {
    transform: translateY(-8px);
}

.hamburger::after {
    transform: translateY(8px);
}
/* Kandungan */
.content-section { 
    padding: 4rem 2rem; 
    max-width: 900px; 
    margin: 0 auto; 
}
.content-section h2 { 
    font-size: 2.8rem; 
    color: var(--color-teks-tajuk); /* Warna diambil dari HTML */
    margin-top: 0; 
    border-bottom: 3px solid var(--color-teks-tajuk); /* Warna diambil dari HTML */
    padding-bottom: 10px; 
}
.content-section h3 { 
    font-size: 1.6rem; 
    color: #111; 
    margin-top: 2.5rem; 
}
.content-section ul { 
    list-style-type: none; 
    padding-left: 0; 
}
.content-section li { 
    font-size: 1.1rem; 
    position: relative; 
    padding-left: 35px; 
    margin-bottom: 10px; 
}
.content-section li::before { 
    content: '👉'; 
    position: absolute; 
    left: 0; 
    top: 0; 
    font-size: 1.2rem; 
}

/* Gaya Khas untuk Kesimpulan */
#kesimpulan.content-section { 
    text-align: center; 
}
.tindakan { 
    font-size: 1.2rem; 
    font-weight: bold; 
    background-color: #00796b; 
    color: white; 
    padding: 1rem; 
    border-radius: 8px; 
    display: inline-block; 
    margin: 0.5rem; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}

/* Footer */
footer { 
    background-color: #212121; 
    color: #aaa; 
    text-align: center; 
    padding: 2rem; 
    font-size: 0.9rem; 
    margin-top: -1px; 
}

/* =================================
   GAYA MESRA MUDAH ALIH (MOBILE)
   ================================= */

/* 'max-width: 800px' bermaksud "jika skrin 800px atau LEBIH KECIL" */
@media (max-width: 800px) {

    /* 1. Sembunyikan pautan asal */
    .nav-links {
        display: none; /* Sembunyi by default */

        /* Tetapkan ia jadi menu menegak */
        position: fixed; /* 'Fixed' supaya ia penuh satu skrin */
        top: 0;
        left: 0;
        right: 0;
        height: 100vh; /* 100% tinggi skrin */

        background-color: #37474f;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        /* Animasi masuk */
        transform: translateX(100%);
        transition: transform 0.3s ease-out;
    }

    /* 2. Besarkan saiz pautan dalam menu */
    .nav-links a {
        font-size: 1.25rem;
        padding: 1.5rem 0;
        width: 80%;
        text-align: center;
    }

    /* 3. Tunjukkan butang hamburger */
    .nav-toggle {
        display: block; /* Munculkan butang */
        z-index: 1001;  /* Pastikan ia di atas menu */
    }


    /* GAYA APABILA MENU AKTIF 
       (JavaScript akan menambah 'nav-active' pada <body>)
    */

    /* 4. Tunjukkan menu apabila aktif */
    .nav-active .nav-links {
        display: flex;
        transform: translateX(0); /* Munculkan menu */
    }

    /* 5. Tukar hamburger jadi 'X' (pangkah) */
    .nav-active .hamburger {
        background: transparent; /* Hilangkan garisan tengah */
        transform: rotate(180deg);
    }
    .nav-active .hamburger::before {
        transform: translateY(0) rotate(45deg);
    }
    .nav-active .hamburger::after {
        transform: translateY(0) rotate(-45deg);
    }
}