/* =================================
   GAYA INDUK UNTUK HALAMAN ISU
   (Tema Sekolah)
   ================================= */

/* 1. Import Fon Sekolah */
@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Patrick+Hand&display=swap');

/* Gaya Asas */
body { 
    font-family: 'Patrick Hand', sans-serif;
    background-color: #fdfaf4;
    margin: 0; 
    padding: 0; 
    line-height: 1.6; 
    color: #333; 
    font-size: 1.3rem; /* SAIZ ASAS DIBESARKAN */
}

/* Navigasi */
.nav-quick-access { 
    background-color: #37474f; 
    padding: 0.5rem 1rem; 
    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); 
}
.nav-quick-access a { 
    font-family: 'Patrick Hand', sans-serif;
    font-size: 1.2rem; /* SAIZ DIBESARKAN */
    color: white; 
    text-decoration: none; 
    font-weight: 400;
    padding: 1rem 1rem; 
    display: inline-block; 
    transition: background-color 0.3s; 
}
.nav-quick-access a:hover { 
    background-color: #546e7a; 
}
.nav-quick-access a.active { 
    background-color: #00796b; 
    color: white; 
}
.nav-quick-access a.home-link { 
    background-color: #004d40; 
    border-radius: 5px; 
    margin-right: 10px; 
    flex-shrink: 0; 
}

/* Butang Hamburger */
.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-family: 'Gochi Hand', sans-serif;
    font-size: 3.2rem; /* SAIZ DIBESARKAN */
    color: var(--color-teks-tajuk);
    margin-top: 0; 
    border-bottom: 3px solid var(--color-teks-tajuk); 
    padding-bottom: 10px; 
}

/* Ikon pensel pada tajuk H3 */
.content-section h3 { 
    font-family: 'Gochi Hand', sans-serif;
    font-size: 2rem; /* SAIZ DIBESARKAN */
    color: #111; 
    margin-top: 2.5rem;
    position: relative;
    padding-left: 45px;
}
.content-section h3::before {
    content: '✏️';
    position: absolute;
    left: 0;
    top: 5px;
    font-size: 1.5rem;
    transform: rotate(-15deg);
}

/* Senarai asal (default '👉') */
.content-section ul { list-style-type: none; padding-left: 0; }
.content-section li { font-size: 1.3rem; position: relative; padding-left: 35px; margin-bottom: 10px; }
.content-section li::before { content: '👉'; position: absolute; left: 0; top: 0; font-size: 1.2rem; }

/* Footer "Meja Kayu" */
footer { 
    font-family: 'Patrick Hand', sans-serif;
    margin-top: -1px;
    padding: 2rem;
    font-size: 1.1rem; /* SAIZ DIBESARKAN */
    background-color: #8B4513;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05)),
                      linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05));
    background-size: 30px 30px;
    color: #f0eada;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    border-top: 5px solid #5D4037;
    text-align: center;
}

/* =================================
   5. CSS "Sticky Note"
   ================================= */

.info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 2.5rem 0;
}

/* Nota Lekat (Sticky Note) */
.info-box {
    background-color: #fff9c4;
    border-radius: 4px;
    padding: 1.5rem;
    border-left: none;
    box-shadow: 3px 3px 7px rgba(0,0,0,0.15);
    transition: transform 0.3s, box-shadow 0.3s;
    transform: rotate(-2deg);
    position: relative; /* Wajibkan untuk selotip */
}
/* Selotip (tape) */
.info-box::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg); 
    width: 100px;
    height: 30px;
    background-color: rgba(255, 255, 0, 0.3);
    border-left: 2px dashed rgba(0,0,0,0.1);
    border-right: 2px dashed rgba(0,0,0,0.1);
    opacity: 0.5;
}

.info-box:hover {
    transform: rotate(1deg) scale(1.05);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
    z-index: 10;
}
.info-box h4 {
    font-family: 'Gochi Hand', sans-serif;
    margin-top: 0;
    font-size: 1.7rem; /* SAIZ DIBESARKAN */
    color: var(--color-teks-tajuk);
}

/* --- GAYA KAD KESIMPULAN --- */
.tindakan-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 2.5rem 0;
    text-align: left;
}

/* Nota Lekat Hijau (Kesimpulan) */
.tindakan {
    display: block; 
    background-color: #c8e6c9;
    border-radius: 4px;
    padding: 2rem 1.5rem;
    font-size: 1.4rem; /* SAIZ DIBESARKAN */
    font-weight: 400;
    color: #333;
    border-left: none; 
    box-shadow: 3px 3px 7px rgba(0,0,0,0.15);
    transition: transform 0.3s, box-shadow 0.3s;
    transform: rotate(1deg);
    position: relative; /* Wajibkan untuk selotip */
}
/* Selotip (tape) */
.tindakan::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%) rotate(1deg);
    width: 100px;
    height: 30px;
    background-color: rgba(255, 255, 0, 0.3);
    border-left: 2px dashed rgba(0,0,0,0.1);
    border-right: 2px dashed rgba(0,0,0,0.1);
    opacity: 0.5;
}

.tindakan:hover {
    transform: rotate(-1deg) scale(1.05);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
    z-index: 10;
}

/* Kotak Punchline di kesimpulan */
.punchline {
    margin-top: 2.5rem; 
    font-size: 1.5rem; /* SAIZ DIBESARKAN */
    font-weight: 400; 
    color: #004d40;
    background-color: #e8f5e9;
    padding: 1.5rem;
    border-radius: 10px;
    border-left: 5px solid #004d40;
    text-align: center;
}
   
/* Susunan grid di desktop */
@media (min-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (min-width: 900px) {
    .tindakan-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}


/* --- KOD IKON (Klip Kertas 📎) --- */

[class*="list-"] { 
    list-style-type: none; 
    padding-left: 0; 
}

/* Ikon ❓ */
.list-soal li { position: relative; padding-left: 35px; margin-bottom: 10px; font-size: 1.5rem; }
.list-soal li::before { content: '❓'; position: absolute; left: 0; top: 0; font-size: 1.1rem; }

/* Ikon 📎 (Klip Kertas) */
.list-chevron { text-align: left; padding-left: 10px; }
.list-chevron li { position: relative; padding-left: 25px; font-size: 1.4rem; margin-bottom: 0.5rem; }
.list-chevron li::before { 
    content: '📎'; /* Ikon Klip Kertas */
    position: absolute;
    left: 0; top: 2px;
    font-size: 1.2rem;
    color: #555; /* Warna kelabu */
    transform: rotate(45deg);
}

/* Ikon 👀 */
.list-contoh li { position: relative; padding-left: 35px; margin-bottom: 10px; font-size: 1.5rem; }
.list-contoh li::before { content: '👀'; position: absolute; left: 0; top: 0; font-size: 1.1rem; }

/* Ikon ✅ */
.list-misi li { position: relative; padding-left: 35px; margin-bottom: 10px; font-size: 1.5rem; }
.list-misi li::before { content: '✅'; position: absolute; left: 0; top: 0; font-size: 1rem; }


/* =================================
   GAYA MESRA MUDAH ALIH (MOBILE)
   ================================= */
@media (max-width: 800px) {
    .nav-links {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 100vh;
        background-color: #37474f;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transform: translateX(100%);
        transition: transform 0.3s ease-out;
    }
    .nav-links a {
        font-size: 1.7rem; /* SAIZ DIBESARKAN */
        padding: 1.5rem 0;
        width: 80%;
        text-align: center;
    }
    .nav-toggle { display: block; z-index: 1001; }
    .nav-active .nav-links { display: flex; transform: translateX(0); }
    .nav-active .hamburger { background: transparent; transform: rotate(180deg); }
    .nav-active .hamburger::before { transform: translateY(0) rotate(45deg); }
    .nav-active .hamburger::after { transform: translateY(0) rotate(-45deg); }
}