/* --- Reset & Styling Dasar --- */
        body, html {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow-x: hidden;
            /*--ASLI-- background-color: #f8fafc; --ASLI--*/
        }

        /* --- Konten Utama Website --- */
        .main-content {
            opacity: 0;
            /* Padding disesuaikan agar tidak tertutup gambar di atas dan di bawah */
            padding: 100px 20px 80px 20px; 
            max-width: 800px;
            margin: 0 auto;
            transition: opacity 1s ease-in-out;
            transition-delay: 0.8s;
        }

        body.loaded .main-content {
            opacity: 1;
        }

        /* --- Background Splash Screen (Gradasi Cahaya) --- */
        .splash-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            /* Efek cahaya: putih terang di tengah membaur ke merah gelap di tepi */
            background: radial-gradient(circle at 50% 45%, #ffffff 0%, #ffcccc 25%, #e60000 70%, #8a0000 100%);
            z-index: 9998;
            transition: opacity 1s ease-in-out, visibility 1s;
        }

        body.loaded .splash-bg {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        /* --- Pengaturan Dasar Animasi Image --- */
        .splash-img {
            position: fixed;
            z-index: 9999;
            /* Cubic-bezier membuat animasi lentur dan smooth */
            transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
            object-fit: contain;
        }

        /* ==============================================================
           --- POSISI AWAL (Di Tengah Layar) --- 
        ============================================================== */
        
        /* 1. Bendera (Berada di tengah, sedikit ke kiri) */
        .img-kiri {
            top: 44%;
            left: 48.5%;
            transform: translate(-105%, -50%); 
            width: 320px;
            /*--asli-- width: 220px; --asli--*/
        }
        /* 2. Garuda (Berada di tengah) --UKURAN LAYAR PC--*/
        .img-tengah {
            top: 45%;
            /*--ASLI-- left: 42.5%; --ASLI--*/
            transform: translate(5%, -50%); 
            width: 260px;
            text-align: center;
        }
        /* 2. Bendera (Berada di tengah, sedikit ke kanan) */
        .img-kanan {
            top: 44%;
            left: 51.5%;
            transform: translate(5%, -50%); 
            width: 320px;
            /*--asli-- width: 220px; --asli--*/
        }
        .img-sub {
            top: 60%;
            left: 55.5%;
            transform: translate(5%, -50%); 
            width: 100px;
        }
        /* 3. Dirgahayu (Berada di tengah bawah) */
        .img-bawah {
            top: 65%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 90px; /* Ukuran besar saat splash screen */
            width: auto;
            max-width: 90vw;
        }
        /* --- Posisi Awal: Teks (Di Bawah Logo) --- */
        .splash-text {
            position: fixed;
            top: 73%;
            left: 50%;
            transform: translate(-50%, 0);
            font-size: 2.7rem;
            font-weight: 700;
            color: #1e293b;
            z-index: 9999;
            text-align: center;
            width: 100%;
            transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
        }     

        /* ==============================================================
           --- POSISI AKHIR (Setelah halaman termuat) --- 
        ============================================================== */

        /* Bendera bergeser ke Kiri Atas */
        body.loaded .img-kanan {
            top: 20px;
            left: 20px;
            transform: translate(0, 0);
            width: 70px; /* Mengecil */
        }
        /* Dirgahayu bergeser ke Bawah Tengah */
        body.loaded .img-tengah {
            top: 25px; /* Menempel di bawah */
            left: 50%;
            transform: translate(-50%, 0);
            height: 55px; /* Tinggi sekitar 40px setara ~2 baris font standar (16px) plus line-height */
        }
        /* Garuda bergeser ke Kanan Atas */
        body.loaded .img-kiri {
            top: 20px;
            left: calc(100vw - 90px); /* 90px = 70px lebar + 20px margin kanan */ /* Menggunakan calc agar bisa dianimasikan dengan mulus dari left 50% */
            transform: translate(0, 0);
            width: 70px; /* Mengecil */
        }
        body.loaded .img-sub {
            top: calc(104vh - 65px); /* Menempel di bawah */
            left: 49%;
            transform: translate(5%, -50%); 
            width: 40px;
        }
        /* Dirgahayu bergeser ke Bawah Tengah */
        body.loaded .img-bawah {
            top: calc(100vh - 65px); /* Menempel di bawah */
            left: 120px;
            transform: translate(-50%, 0);
            height: 40px; /* Tinggi sekitar 40px setara ~2 baris font standar (16px) plus line-height */
        }

        /* Dirgahayu bergeser ke Bawah Tengah */
        body.loaded .splash-text {
            top: calc(100vh - 65px); /* Menempel di bawah */
            left: calc(97vw - 90px);
            transform: translate(-50%, 0);
            font-size: 1.7rem;
            font-weight: 600;
            /*-- height: 40px; /* Tinggi sekitar 40px setara ~2 baris font standar (16px) plus line-height */
        }        

        /* ==============================================================
           --- RESPONSIVE (Layar Mobile) --- 
        ============================================================== */
        @media (min-width: 991px) {
            .img-tengah { height: 160px; top: 45%; left: 41%; }
            .img-kiri, .img-kanan { width: 140px; }
            .img-bawah { height: 60px; top: 62%; }
            .splash-text { font-size: 1.3rem; top: 70%; }

            body.loaded .img-kiri {
                top: 55px;
                left: 15px;
                width: 50px;
            }
            body.loaded .img-kanan {
                top: 55px;
                left: calc(100vw - 65px);
                width: 50px;
            }
            body.loaded .img-bawah {
                top: calc(100vh - 55px);
                left: 80px;
                height: 30px;
            }
            body.loaded .splash-text {
                top: calc(103vh - 65px);
                left: calc(106vw - 90px);
                font-size: 0.8rem;
                font-weight: 600;
                height: 40px;
            }
        }
        @media (max-width: 991px) {
            .img-kiri, .img-kanan { width: 140px; }
            .img-kanan { left: 55%; }
            .img-tengah { height: 140px; top: 45%; }
            .img-bawah { height: 60px; top: 60%; }
            .img-sub { height: 75px; top: 56%; }
            .splash-text { font-size: 1.3rem; top: 66%; }

            body.loaded .img-kiri {
                top: 55px;
                left: 15px;
                width: 50px;
            }
            body.loaded .img-kanan {
                top: 55px;
                left: calc(100vw - 65px);
                width: 50px;
            }
            body.loaded .img-bawah {
                top: calc(100vh - 55px);
                left: 80px;
                height: 30px;
            }
            body.loaded .splash-text {
                top: calc(103vh - 65px);
                left: calc(106vw - 90px);
                font-size: 0.8rem;
                font-weight: 600;
                height: 40px;
            }
        }
        /*------------------------------------------------------------------------
        *--A54--*
        @media (max-width: 768px) {
            * Penyesuaian ukuran awal (tengah) *
            .img-kiri, .img-kanan { width: 140px; }
            .img-kanan { left: 18%; }
            .img-tengah { height: 140px; top: 45%; } *-- left: 16.5%; --*
            .img-bawah { height: 60px; top: 60%; }
            .img-sub { height: 75px; top: 56%; }
            .splash-text { font-size: 1.3rem; top: 66%; }

            * Penyesuaian ukuran dan posisi akhir (sudut) *
            body.loaded .img-kiri {
                top: 55px;
                left: 15px;
                width: 50px;
            }
            body.loaded .img-kanan {
                top: 55px;
                left: calc(90vw - 65px); * 50px lebar + 15px margin kanan *
                width: 50px;
            }
            body.loaded .img-bawah {
                top: calc(68vh - 55px);
                left: 80px;
                height: 30px; * Mengecil agar proporsional di HP *
            }
            body.loaded .img-sub { 
				top: calc(68vh - 55px);                 
				height: 55px; 
			}            
            body.loaded .splash-text {
                top: calc(68vh - 15px); * Menempel di bawah *
                left: calc(106vw - 90px);
                font-size: 1.0rem;
                font-weight: 600;
            }              
        }
        *--A22--*
        @media (max-width: 480px) {
                .img-kiri, .img-kanan { width: 140px; }
                .img-tengah { height: 140px; top: 45%; left: 8.3%; }
                .img-sub { height: 62px; top: 56%; }
                
                body.loaded .img-bawah {
					top: calc(95vh - 55px);
					left: 80px;
					height: 30px; * Mengecil agar proporsional di HP *
					*--ASLI-- height: 35px; * Mengecil agar proporsional di HP *
				}				
				body.loaded .splash-text {
					top: calc(98vh - 65px); * Menempel di bawah *
					left: calc(104vw - 90px);
					font-size: 1.1rem;
					font-weight: 600;
					/-- height: 40px; / Tinggi sekitar 40px setara ~2 baris font standar (16px) plus line-height /
				} 
				body.loaded .img-sub { 
					top: calc(97vh - 55px); 				    
					height: 55px; 
				}
        }

        /*--LAPTOP--*/
        @media (min-width: 992px) and (max-width: 1199px) {
            .img-tengah { height: 160px; top: 45%; left: 41%; }
            .img-kiri, .img-kanan { width: 140px; }
            .img-bawah { height: 60px; top: 62%; }
            .splash-text { font-size: 1.3rem; top: 70%; }

            body.loaded .img-kiri {
                top: 55px;
                left: 15px;
                width: 50px;
            }
            body.loaded .img-kanan {
                top: 55px;
                left: calc(100vw - 65px);
                width: 50px;
            }
            body.loaded .img-bawah {
                top: calc(100vh - 55px);
                left: 80px;
                height: 30px;
            }
            body.loaded .splash-text {
                top: calc(103vh - 65px);
                left: calc(106vw - 90px);
                font-size: 0.8rem;
                font-weight: 600;
                height: 40px;
            }
        }       

        /*--Hape--*
        @media (max-width: 1080px) {
            .img-tengah { height: 200px; top: 43%; }    *--  left: 18%; --*
            .img-kiri, .img-kanan { width: 205px; top: 43%; }
            .img-bawah { height: 60px; top: 64%; }
            .img-sub { height: 60px; top: 61%; left: 54%; }
            .splash-text { font-size: 1.5rem; top: 68%; }

            body.loaded .img-kiri {
                top: 55px;
                left: 15px;
                width: 50px;
            }
            body.loaded .img-kanan {
                top: 55px;
                left: calc(100vw - 65px);
                width: 50px;
            }
            body.loaded .img-bawah {
                top: calc(94vh - 55px);
                left: 80px;
                height: 30px;
            }
            body.loaded .splash-text {
                top: calc(97vh - 65px);
                left: calc(106vw - 90px);
                font-size: 1.0rem;
                font-weight: 600;
                height: 40px;
            }
            body.loaded .img-sub { 
				top: calc(96vh - 55px); 				    
				height: 55px; 
			}            
        }    
        
        -------------------------------------------------------------------------------------------*/
        
        /*
            @media (max-width: 360px) {
                    .img-tengah { height: 260px; top: 45%; left: 12%; }
                    .img-sub { height: 82px; top: 60%; }
    
                    body.loaded .splash-text {
                        top: calc(97vh - 65px); 
                        left: calc(100vw - 90px);
                        font-size: 1.1rem;
                        font-weight: 600;
                        /*-- height: 40px;
                    } 
                    body.loaded .img-sub { 
    					top: calc(97vh - 55px); 				    
    					height: 55px; 
    				}
            }
       
            @media (max-width: 860px) {
                    .img-tengah { height: 160px; top: 45%; left: 18.3%; }
            }
        --*/
        /*--=====SPLASH-SCREEN=====--*/