/* Pastikan HTML dan Body mengambil ketinggian penuh viewport */
html { /* <--- TAMBAH INI */
    height: 100%;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    /* display: flex; */ /* <--- BUANG INI DARI BODY */
    /* justify-content: center; */ /* <--- BUANG INI DARI BODY */
    background-color: #f0f0f0; /* A light background for the whole page */
    min-height: 100vh; /* <--- TAMBAH INI UNTUK MEMASTIKAN BODY SENTIASA 100% KETINGGIAN VIEWPORT */
    display: flex; /* <--- TAMBAH SEMULA UNTUK MENJADIKAN BODY FLEX CONTAINER */
    flex-direction: column; /* <--- SUSUN ANAK-ANAK BODY SECARA MENDEGAK */
    align-items: center; /* <--- PUSATKAN KANDUNGAN BODY SECARA MENDATAR (INI AKAN MEMUSATKAN #page-container) */
}

#page-container {
    width: 1080px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #ffffff; /* White background for the main content area */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures the footer is at the bottom even with little content */
    /* width: 100%; /* <--- Mungkin perlu 100% di sini jika body tidak mengendalikan lebar */
    /* max-width: 1080px; */ /* <--- Gunakan max-width jika anda mahu ia responsif pada skrin kecil */
}


/* Header Styling */
#header {
    height: 80px;
    background: linear-gradient(to right, #0056b3, #007bff, #6c757d);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    color: white;
    width: 100%;
    box-sizing: border-box;

    /* --- TAMBAH INI UNTUK FIXED HEADER --- */
    position: fixed; /* Jadikan header lekat */
    top: 0;          /* Lekat di bahagian paling atas skrin */
    left: 0;         /* Lekat dari kiri skrin */
    z-index: 1000;   /* Pastikan ia sentiasa di atas elemen lain */
    /* ------------------------------------- */
}

/* Navigation Bar Styling */
#navbar {
    display: flex;
    justify-content: space-around;
    background-color: #e9ecef;
    padding: 8px 0;
    border-bottom: 1px solid #dee2e6;
    flex-wrap: wrap;

    /* --- TAMBAH INI UNTUK FIXED NAV BAR --- */
    position: fixed; /* Jadikan nav bar lekat */
    top: 80px;       /* Lekat di bawah header (ketinggian header 80px) */
    left: 0;         /* Lekat dari kiri skrin */
    width: 100%;     /* Ambil lebar penuh skrin */
    z-index: 999;    /* Pastikan ia di atas kandungan lain tetapi di bawah header */
    /* ------------------------------------- */
}

/* Main Content Styling */
#main-content {
    flex-grow: 1;
    padding: 20px;
    background-color: #f8f9fa;
    min-height: 300px;
    width: 100%;
    box-sizing: border-box;

    /* --- TAMBAH INI UNTUK MENGELAKKAN KANDUNGAN TERSEMBUNYI DI BAWAH FIXED ELEMEN --- */
    /* Padding-top = ketinggian header + ketinggian navbar */
    /* Ketinggian header = 80px */
    /* Ketinggian navbar (anggaran) = padding 8px atas + 8px bawah + ketinggian butang (anggaran 30-40px) = sekitar 46px - 56px */
    /* Jadi, jumlah anggaran = 80px + 50px = 130px */
    padding-top: 130px; /* Adjust nilai ini jika kandungan masih tersembunyi */
    /* ----------------------------------------------------------------------------- */
}





















.header-left {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.2;
}

.header-left .text1 {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
}

.header-left .text2 {
    font-size: 16px;
    margin: 0;
}

.header-left .text3 {
    font-size: 14px;
    margin: 0;
}

.header-right {
    display: flex;
    align-items: center;
}

#logo {
    height: 100px; /* Adjust as needed for your logo */
    width: auto;
    margin-left: 10px;
}


.nav-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.nav-button:hover {
    background-color: #0056b3;
}

.nav-button.active {
    background-color: #28a745; /* Active button color */
}


.page-section {
    display: none; /* Hide all sections by default */
}

.page-section.active {
    display: block; /* Show only the active section */
}

/* Footer Styling */
#footer {
    height: 20px; /* Jika ini terlalu pendek, ia mungkin menyebabkan teks footer tidak muat */
    background: linear-gradient(to right, #6c757d, #343a40, #212529); /* Three-color gradient */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    padding: 5px 0;
    width: 100%; /* <--- PASTIKAN IA MENGAMBIL LEBAR PENUH #page-container */
    box-sizing: border-box; /* <--- PENTING: Untuk padding tidak menolak lebar */
}


/* Styles for general status messages */
.info-message {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 16px;
    text-align: center;
    opacity: 1; /* Default opacity */
}

.info-message.success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.info-message.error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

/* Header Styling */
#header {
    height: 80px;
    /* Latar belakang tetap di sini untuk membentang penuh skrin */
    background: linear-gradient(to right, #0056b3, #007bff, #6c757d); 

    /* --- GAYA FIXED UNTUK HEADER --- */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Membentang penuh lebar viewport */
    z-index: 1000;
    /* Pastikan tiada padding atau flexbox properties di sini lagi */
}

/* NEW: Gaya untuk kontena dalaman header */
.header-inner {
    max-width: 1080px; /* Hadkan lebar kandungan dalaman */
    margin: 0 auto;    /* Pusatkan kandungan dalaman */
    width: 100%;       /* Pastikan ia mengambil lebar penuh dalam max-width */
    height: 100%;      /* Ambil ketinggian penuh dari #header */
    display: flex;     /* Terapkan sifat flexbox di sini */
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;   /* Terapkan padding di sini */
    box-sizing: border-box; /* Penting untuk padding tidak menolak lebar */
    color: white;      /* Warna teks untuk header */
}

/* Navigation Bar Styling */
#navbar {
    /* Latar belakang dan border tetap di sini untuk membentang penuh skrin */
    background-color: #e9ecef;
    border-bottom: 1px solid #dee2e6;

    /* --- GAYA FIXED UNTUK NAV BAR --- */
    position: fixed;
    top: 80px; /* Lekat di bawah header (ketinggian header 80px) */
    left: 0;
    width: 100%; /* Membentang penuh lebar viewport */
    z-index: 999;
    /* Pastikan tiada padding atau flexbox properties di sini lagi */
}

/* NEW: Gaya untuk kontena dalaman nav bar */
.nav-inner {
    max-width: 1080px; /* Hadkan lebar kandungan dalaman */
    margin: 0 auto;    /* Pusatkan kandungan dalaman */
    width: 100%;       /* Pastikan ia mengambil lebar penuh dalam max-width */
    display: flex;     /* Terapkan sifat flexbox di sini */
    justify-content: space-around;
    padding: 8px 0;    /* Terapkan padding di sini */
    box-sizing: border-box; /* Penting untuk padding tidak menolak lebar */
    flex-wrap: wrap;   /* Benarkan butang untuk wrap */
}

/* Main Content Styling (kekal sama seperti sebelumnya) */
#main-content {
    flex-grow: 1;
    padding: 20px;
    background-color: #f8f9fa;
    min-height: 300px;
    width: 100%;
    box-sizing: border-box;

    /* Padding-top untuk mengelakkan kandungan tersembunyi di bawah fixed elemen */
    /* Ketinggian header (80px) + Ketinggian navbar (anggaran ~50px) = ~130px */
    padding-top: 130px; /* TERUSKAN NILAI INI ATAU SESUAIKAN JIKA PERLU */
}

/* Kekal gaya-gaya lain seperti .nav-button, .header-left, .header-right, #logo, dll. */


/* style.css */

/* Gaya untuk gambar di dalam slaid tayangan */
.slides .slide img {
    max-width: 100%; /* Pastikan lebar gambar tidak melebihi lebar kontena induknya (.slide) */
    height: auto;    /* Kekalkan nisbah aspek gambar untuk mengelakkan herotan */
    display: block;  /* Membuang sebarang ruang kosong di bawah gambar */

    /* Anda juga mungkin mahu gambar memenuhi ruang sepenuhnya jika ketinggian ditetapkan,
       dan jika gambar tidak sepadan, ia akan dipotong (cropped).
       Jika anda mahu ini, dan jika anda telah menetapkan ketinggian tetap untuk .slides,
       anda boleh tambah:
       width: 100%;
       object-fit: cover;
    */
}

/* Pastikan juga kontena slaid tayangan itu sendiri mempunyai overflow yang sesuai */
.slideshow-container {
    /* ... (gaya sedia ada anda) ... */
    overflow: hidden; /* Penting: menyembunyikan bahagian gambar yang melebihi batas kontena */
    /* Anda mungkin juga ingin menetapkan ketinggian maksimum untuk slideshow-container
       jika anda mahu semua slaid mempunyai ketinggian yang seragam, contoh: */
    /* max-height: 400px; */ /* Contoh nilai */
}

/* style.css */

/* Gaya untuk kontena keseluruhan slaid tayangan */
.slideshow-container {
    max-width: 1080px; /* Kekalkan lebar ini untuk selaras dengan kandungan utama */
    position: relative; /* Penting untuk meletakkan slaid secara mutlak di dalamnya */
    margin: 20px auto; /* Margin atas/bawah dan pusatkan */
    overflow: hidden; /* Menyembunyikan bahagian gambar yang melebihi */
    border: 1px solid #ddd; /* (Opsional) Border untuk estetika */
    border-radius: 8px; /* (Opsional) Sudut membulat */

    /* Tetapkan ketinggian tetap untuk kawasan slaid tayangan */
    /* Ini memastikan layout tidak 'melompat' apabila gambar bertukar */
    height: 450px; /* Anda boleh laraskan ketinggian ini mengikut kesukaan */
}

/* Kontena untuk slaid individu (supaya mereka boleh bertindih) */
.slides {
    width: 100%;
    height: 100%;
    position: relative; /* Penting untuk .slide yang diletakkan secara mutlak */
}

/* Gaya untuk setiap slaid (gambar individu) */
.slides .slide {
    position: absolute; /* Letakkan slaid di atas satu sama lain */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Sembunyi secara lalai */
    transition: opacity 1s ease-in-out; /* Animasi fade selama 1 saat */
    background-color: #f0f0f0; /* (Opsional) Warna latar belakang sementara gambar belum load */
    display: flex; /* Untuk pusatkan gambar yang mungkin lebih kecil */
    justify-content: center;
    align-items: center;
}

/* Gaya untuk slaid yang sedang aktif/dipaparkan */
.slides .slide.active {
    opacity: 1; /* Nampak sepenuhnya apabila aktif */
}

/* Gaya untuk gambar di dalam slaid */
.slides .slide img {
    width: 100%; /* Pastikan gambar memenuhi lebar slaid */
    height: 100%; /* Pastikan gambar memenuhi ketinggian slaid */
    object-fit: cover; /* Penting: Potong gambar jika perlu untuk memenuhi kontena tanpa herotan */
    display: block; /* Buang ruang putih bawah gambar */
}

/* Gaya untuk butang navigasi (Prev/Next) */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px; /* Pusatkan butang secara menegak */
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0,0,0,0.5); /* Latar belakang separa telus */
    z-index: 2; /* Pastikan butang berada di atas gambar */
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

/* Gaya untuk dot indikator */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    z-index: 2; /* Pastikan dot berada di atas gambar */
}

.dot.active, .dot:hover {
    background-color: #717171;
}