body { 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Font lebih modern */
            margin: 0; 
            padding: 0; 
            background-color: #f4f4f4; 
            overflow-x: hidden; /* Mencegah scroll horizontal */
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* Pastikan body penuh tinggi untuk footer di bawah */
        }
        
        /* Animasi untuk intro dengan background yang memudar di akhir */
        #intro {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-image: url("background.jpg"); /* Path ke file background.jpg */
            background-size: cover; /* Membuat background menutupi seluruh area */
            background-position: center; /* Posisi tengah */
            background-repeat: no-repeat; /* Tidak diulang */
            display: flex;
            flex-direction: column; /* Logo di atas, teks di bawah */
            justify-content: center;
            align-items: center;
            z-index: 5;
            animation: fadeOut 1s ease-in-out 10s forwards; /* Fade out mulai detik 10 */
        }
        #logo {
            width: 150px; /* Ukuran logo, sesuaikan jika perlu */
            height: auto;
            opacity: 0;
            animation: fadeIn 2s ease-in-out 9.2s forwards; /* Logo muncul dalam 1 detik */
            margin-bottom: 20px; /* Jarak dengan teks */
        }
        /* Container untuk teks-teks agar muncul di satu posisi */
        #text-container {
            position: relative; /* Agar teks bisa overlap di tempat yang sama */
            display: flex;
            flex-direction: column; /* Teks vertikal, tapi muncul di posisi sama */
            justify-content: center;
            align-items: center;
            width: 100%; /* Lebar penuh untuk centering */
        }
        #benevolent, #class, #tagline1, #tagline2, #tagline3, #akhir {
            position: absolute; /* Absolute untuk overlap di tempat yang sama */
            top: 0;
            left: 50%;
            transform: translateX(-50%); /* Tengah horizontal */
            font-size: 4em; /* Font diperbesar */
            font-weight: bold;
            color: #fff; /* Warna teks putih agar kontras dengan background */
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Bayangan untuk readability */
            opacity: 0;
            white-space: nowrap; /* Pastikan kata tidak pecah */
            text-align: center; /* Rata tengah untuk setiap teks */
        }
        #benevolent {
            animation: slideUp 2s ease-in-out 1s forwards; /* Muncul setelah logo (1 detik) */
        }
        #class {
            animation: slideUp 2s ease-in-out 3s forwards; /* Muncul setelah benevolent (3 detik) */
        }
        #tagline1 {
            animation: slideUp 2s ease-in-out 5s forwards; /* Muncul setelah class (5 detik) */
        }
        #tagline2 {
            animation: slideUp 2s ease-in-out 6s forwards; /* Muncul setelah tagline1 (6 detik) */
        }
        #tagline3 {
            animation: slideUp 2s ease-in-out 7s forwards; /* Muncul setelah tagline2 (7 detik) */
        }
        #akhir {
            animation: fadeIn 2s ease-in-out 9s forwards, glow 0.5s ease-in-out 11s forwards; /* Fade in lalu glow mulai 11 detik */
            font-size: 3em; /* Sedikit lebih kecil dari yang lain */
        }
        #text_walikelas {
            /*teks untuk wali kelas, bold, berwarna hijau*/
            font-weight: bold;
            color: #28a745;
        }
        #text_pengurus {
            /*teks untuk wali kelas, bold, berwarna hijau*/
            font-weight: bold;
            margin-top: 10px;
            color: #cf0808;
        }
        
        /* Keyframes untuk animasi */
        @keyframes slideUp {
            0% { transform: translateX(-50%) translateY(0); opacity: 1; }
            100% { transform: translateX(-50%) translateY(-100px); opacity: 0; }
        }
        @keyframes fadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
        @keyframes fadeOut {
            0% { opacity: 1; }
            100% { opacity: 0; }
        }
        @keyframes glow {
            0% { filter: brightness(1) drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
            50% { filter: brightness(1.5) drop-shadow(0 0 20px rgba(255, 255, 255, 0.8)); }
            100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
        }
        
        /* Konten utama dengan transisi mulus */
        main {
            opacity: 0; /* Mulai transparan */
            transition: opacity 1s ease-in-out; /* Transisi fade in selama 1 detik */
            margin-top: 80px; /* Ruang untuk nav */
            padding: 20px;
            flex: 1; /* Agar main mengisi ruang, footer di bawah */
        }
        /* Tampilkan konten setelah animasi selesai (12 detik), dengan fade in */
        body.loaded main {
            opacity: 1; /* Fade in ke opacity penuh */
        }
        body.loaded #intro {
            display: none;
        }
        main h2 {
            border-bottom: 2px solid #007bff; /* Garis kecil di bawah tulisan halaman */
            padding-bottom: 10px; /* Jarak dari garis */
            display: inline-block; /* Agar garis hanya di bawah teks */
            animation: fadeIn 0.7s ease-in-out 1ms both;
        }
        footer {
            font-size: 14px;
            color: #666;
            text-align: center;
            padding: 10px;
            background-color: #f8f9fa;
            border-top: 1px solid #ddd;
            margin-top: auto; /* Footer di bawah */
        }