:root {             
        --color-black: #1A1A1A;
        --color-dark-gray: #424242;            
        --color-gray: #4A4A4A;
        --color-orange: #FF671F;
        --color-red: #C8102E;
        --color-white: #ffffff; 
        --light-gray: #F5F5F5;                    
        --accent-color: #c5a059;  /* Gold/Bronze for Luxury feel */            
    }

    html { scroll-behavior: smooth; }

    a {
        color: white; /*-- Mengubah warna teks tautan --*/
        text-decoration: none; /*-- Menghilangkan garis bawah --*/
    }

    .img_show {
        color: black; /*-- Mengubah warna teks tautan --*/
        text-decoration: none; /*-- Menghilangkan garis bawah --*/
    }

    body {
        font-family: 'Poppins', sans-serif;
        color: var(--color-black);
        background-color: #EFEFEF;
    }

    /*--ASLI--
        footer { background-color: var(--color-black); color: var(--light-gray); padding: 60px 0 0 0; font-size: 0.95rem; }
        footer h5 { color: var(--color-white); font-weight: 700; margin-bottom: 25px; letter-spacing: 1px; }
        footer p { line-height: 1.6; color: #d1d1d1; }            
    --ASLI--*/

    @keyframes blink {
        0% { opacity: 1; }
        50% { opacity: 0; }
        100% { opacity: 1; }
    }

    /*--EDIT--*/

    @media (min-width: 991px) {
        .hero-title {
            font-size: 3.5rem;
            white-space: nowrap;
        }
        .hero-subtitle {
            font-size: 2.2rem;
            white-space: nowrap;
        }    
        .hero-desc {
            font-size: 1.0rem;
            white-space: nowrap;
        }                     
        .badge-category {
            position: absolute;
            top: 3px;
            left: 300px;
            background: #ff4b2b;
            padding: 2px 12px;
            border-radius: 5px;
            font-size: 0.7rem;
            font-weight: 200;
            color: #ffffff;
            z-index: 2;
            /*-- transform: rotate(-45deg); --*/
        }             
        
        /*--MOD-ADD--*/
            .navbar {
                background-color: #4d4d4d !important;
                transition: background-color 0.4s ease;
            }  
            .navbar-collapse .navbar.navbar-scrolled {
                background-color: #4d4d4d !important;
                /*-- background-color: var(--color-black); --*/
                /*--ASLI-GEMINI-- background-color: var(--color-white); --ASLI-GEMINI--*/
                padding: 1rem;
                border-radius: 12px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
                position: absolute;
                top: 100%;
                left: 15px;
                right: 15px;
                z-index: 1000;
            }            
            /* Mengubah warna teks link menu mobile menjadi gelap */
            .navbar-collapse .nav-link {
                color: var(--color-white) !important;
                /*--ASLI-GEMINI color: var(--color-black) !important; --ASLI--*/
                border-bottom: 1px solid #f0f0f0;
                padding: 12px 0;
            }
            .navbar-collapse .nav-link:last-child {
                border-bottom: none;
            }
            .navbar-collapse .btn-login {
                /*-- width: 100%; --*/
                margin-top: 10px;
            }        
        /*--MOD-ADD--*/
    }
    @media (max-width: 991.98px) {
        .hero-title {
            font-size: 1.8rem;
        }
        .hero-subtitle {
            font-size: 2.0rem;
        }   
        .hero-desc {
            font-size: 0.9rem;
        }                      
        .navbar {
            background-color: #4d4d4d !important;
            transition: background-color 0.4s ease;
        }  
        .navbar-collapse .navbar.scrolled {
            background-color: #4d4d4d !important;
            padding: 1rem;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            position: absolute;
            top: 100%;
            left: 15px;
            right: 15px;
            z-index: 1000;
        }            
        /* Mengubah warna teks link menu mobile menjadi gelap */
        .navbar-collapse .nav-link {
            color: var(--color-white) !important;
            border-bottom: 1px solid #f0f0f0;
            padding: 12px 0;
        }
        .navbar-collapse .nav-link:last-child {
            border-bottom: none;
        }
        .navbar-collapse .btn-login {
            margin-top: 10px;
        }
        .badge-category {
            position: absolute;
            top: 3px;
            left: 355px;
            background: #ff4b2b;
            padding: 2px 5px;
            border-radius: 5px;
            font-size: 0.7rem;
            font-weight: 200;
            color: #ffffff;
            z-index: 2;
        }
    }  
    @media (max-width: 990px) {
        .h-custom { height: 24rem; }
        .h-custom-portfolio { height: 600px; }
        .offset-md-app-box-left { margin-left: -3rem; } /* For overlap effect - new position */
        .badge-category {
            position: absolute;
            top: 3px;
            left: 590px;
            background: #ff4b2b;
            padding: 2px 5px;
            border-radius: 5px;
            font-size: 0.7rem;
            font-weight: 200;
            color: #ffffff;
            z-index: 2;
        }             
    }    
    @media (max-width: 950px) {
        .h-custom { height: 24rem; }
        .h-custom-portfolio { height: 600px; }
        .offset-md-app-box-left { margin-left: -3rem; } /* For overlap effect - new position */
        .badge-category {
            position: absolute;
            top: 3px;
            left: 590px;
            background: #ff4b2b;
            padding: 2px 5px;
            border-radius: 5px;
            font-size: 0.7rem;
            font-weight: 200;
            color: #ffffff;
            z-index: 2;
        }             
    }     
    @media (max-width: 900px) {
        .h-custom { height: 24rem; }
        .h-custom-portfolio { height: 600px; }
        .offset-md-app-box-left { margin-left: -3rem; } /* For overlap effect - new position */
        .badge-category {
            position: absolute;
            top: 3px;
            left: 590px;
            background: #ff4b2b;
            padding: 2px 5px;
            border-radius: 5px;
            font-size: 0.7rem;
            font-weight: 200;
            color: #ffffff;
            z-index: 2;
        }             
    }    
    @media (max-width: 800px) {
        .h-custom { height: 24rem; }
        .h-custom-portfolio { height: 600px; }
        .offset-md-app-box-left { margin-left: -3rem; } /* For overlap effect - new position */
        .badge-category {
            position: absolute;
            top: 3px;
            left: 590px;
            background: #ff4b2b;
            padding: 2px 5px;
            border-radius: 5px;
            font-size: 0.7rem;
            font-weight: 200;
            color: #ffffff;
            z-index: 2;
        }             
    }                 
    @media (max-width: 600px) {
        .h-custom { height: 24rem; }
        .h-custom-portfolio { height: 600px; }
        .offset-md-app-box-left { margin-left: -3rem; } /* For overlap effect - new position */
        .badge-category {
            position: absolute;
            top: 3px;
            left: 255px;
            background: #ff4b2b;
            padding: 2px 5px;
            border-radius: 5px;
            font-size: 0.7rem;
            font-weight: 200;
            color: #ffffff;
            z-index: 2;
        }             
    }  
    @media (max-width: 550px) {
        .h-custom { height: 24rem; }
        .h-custom-portfolio { height: 600px; }
        .offset-md-app-box-left { margin-left: -3rem; } /* For overlap effect - new position */
        .badge-category {
            position: absolute;
            top: 3px;
            left: 385px;
            background: #ff4b2b;
            padding: 2px 5px;
            border-radius: 5px;
            font-size: 0.7rem;
            font-weight: 200;
            color: #ffffff;
            z-index: 2;
        }             
    } 
    @media (max-width: 500px) {
        .h-custom { height: 24rem; }
        .h-custom-portfolio { height: 600px; }
        .offset-md-app-box-left { margin-left: -3rem; } /* For overlap effect - new position */
        .badge-category {
            position: absolute;
            top: 3px;
            left: 322px;
            background: #ff4b2b;
            padding: 2px 5px;
            border-radius: 5px;
            font-size: 0.7rem;
            font-weight: 200;
            color: #ffffff;
            z-index: 2;
        }             
    }    
    @media (max-width: 450px) {
        .h-custom { height: 24rem; }
        .h-custom-portfolio { height: 600px; }
        .offset-md-app-box-left { margin-left: -3rem; } /* For overlap effect - new position */
        .badge-category {
            position: absolute;
            top: 3px;
            left: 255px;
            background: #ff4b2b;
            padding: 2px 5px;
            border-radius: 5px;
            font-size: 0.7rem;
            font-weight: 200;
            color: #ffffff;
            z-index: 2;
        }
        
    }             
    /*--EDIT--*/
    .bg-custom-red { background-color: #dc2626 !important; }

    .bg-parallax {
        position: relative;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .btn-login {
        background-color: var(--color-red);
        color: var(--color-white);
        border: none;            
        border-radius: 8px;
        padding: 8px 24px;
        font-weight: 600;
        transition: background 0.3s;
    }
    .btn-login:hover {
        background-color: var(--color-orange);
        color: white;
    }

    .colormenu {
        color: #000000; /*-- Mengubah warna teks tautan --*/
        /*-- text-decoration: none; -- Menghilangkan garis bawah --*/
    }

    .content-relative {
        position: relative;
        z-index: 2;
    }

    .deco-mark {
        position: relative;
        top: -1rem;
        left: 0.5rem;
        width: 50rem;
        height: 15rem;
        border-left: 60px solid #9b9b9b;
        z-index: 0;
    }
    .deco-square {
        position: absolute;
        top: -1rem;
        left: -1rem;
        width: 6rem;
        height: 6rem;
        border-top: 4px solid #dc2626;
        border-left: 4px solid #dc2626;
        z-index: 0;
    }
    .deco-bg {
        position: absolute;
        bottom: -1.5rem;
        right: -1.5rem;
        width: 100%;
        height: 100%;
        background-color: #f3f4f6;
        z-index: 0;
    }

    .fnt_blk { color: rgb(0, 0, 0); }
    .fnt_red { color: rgb(175, 12, 12); }
    .fnt_wht { color: rgb(255, 255, 255); }

    /*--MOD-ADD--*/
    .footer {
        background-color: var(--color-black);
        color: #BDBDBD;
        padding: 50px 0 20px;
        font-size: 0.9rem;
    }        
    .footer h5 {
        color: var(--color-white);
        font-weight: 700;
        margin-bottom: 20px;
    }        
    .footer-bottom {
        border-top: 1px solid rgba(255,255,255,0.1);
        margin-top: 30px;
        padding-top: 20px;
        text-align: center;
    }
    .footer-brand-col {
        text-align: center;
    }
    .footer-brand-col p {
        margin-bottom: 8px;
    }
    .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .footer-links li {
        margin-bottom: 10px;
    }
    .footer-links a {
        color: #BDBDBD;
        text-decoration: none;
        transition: color 0.3s, padding-left 0.3s;
    }
    .footer-links a:hover {
        color: var(--color-orange);
        padding-left: 5px;
    }        
    .footer-slogan {
        color: var(--color-orange);
        font-style: italic;
        font-weight: 600;
        margin-bottom: 20px !important;
        display: block;
    }
    /*--MOD-ADD--*/
    /*--ASLI--
        .footer-bottom { background-color: var(--color-red); color: white; padding: 15px 0; text-align: center; font-size: 0.9rem; font-weight: 600; margin-top: 50px; }
        .footer-links { list-style: none; padding: 0; margin: 0; }
        .footer-links a { color: #d1d1d1; text-decoration: none; transition: 0.3s ease; display: inline-block; font-weight: 500; }
        .footer-links a:hover { color: var(--color-orange); transform: translateX(8px); }            
        .footer-links i { font-size: 12px; color: var(--color-red); margin-right: 8px; }            
        .footer-links li { margin-bottom: 12px; }
    --ASLI--*/
    /* Mengatur tinggi container agar memenuhi layar */
    .full-height {
        min-height: 100vh;
    }
    /* Gallery Overlay */
    .gallery-item {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        cursor: pointer;
    }
    .gallery-item img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    .gallery-item:hover img {
        transform: scale(1.1);
    }
    .gallery-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(14, 42, 71, 0.8);
        color: white;
        padding: 10px;
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }
    .gallery-item:hover .gallery-caption {
        transform: translateY(0);
        font-size: 0.9em;
    }

    .hero-desc {
        font-size: 1.3rem;
        font-weight: 300;
        color: #E0E0E0;
    }         
    .hero-overlay {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(18, 18, 18, 0.75);
        z-index: 1;
    }
    .hero-section {
        height: 100vh;
        background-image: url('../../images/assetsimg/buildings.JPG');
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: var(--color-white);
    }        
    .hero-subtitle {
        font-size: 2.5rem;
        font-weight: 600;
        color: var(--color-white);
        letter-spacing: 2px;
        margin-bottom: 15px;
        text-shadow: 2px 2px 5px rgb(0, 0, 0);       
    }
    .hero-title {
        font-weight: 700;
        margin-bottom: 20px;
        color: var(--color-red);
        text-shadow: 2px 2px 5px rgb(0, 0, 0);            
    } 

    .hover-bg-custom-red:hover { background-color: #b91c1c !important; }
    
    .ident-title { 
        color: var(--color-black); 
        font-weight: 1000; 
        font-size: 2.5rem; 
        margin-bottom: 20px; 
        text-shadow: 2px 2px 5px rgb(117, 117, 117); 
    }
    .ident-title-subtitle { 
        color: var(--color-gray);
        /*-- color: var(--color-black); --*/
        font-weight: 1200; 
        font-size: 1.8rem; 
        margin-bottom: 20px; 
        text-shadow: 2px 2px 5px rgb(117, 117, 117); 
    }      
    .ident-title-sub { 
        color: var(--color-red);
        /*-- color: var(--color-black); --*/
        font-weight: 1000; 
        font-size: 1.5rem; 
        margin-bottom: 20px; 
        text-shadow: 2px 2px 5px rgb(117, 117, 117); 
    }        
    .ident-title span { color: var(--color-red); }
    .ident-text {
        color: var(--color-gray);
        font-size: 1.1rem;
        line-height: 1.6;
        font-weight: 500;
        /*--ASLI-- margin-bottom: 30px; --ASLI--*/            
    }
    .ident-text span {
        color: var(--primary-red);
        font-weight: 700;
    }       
    .ident-text spun {
        color: var(--color-gray);
        font-weight: 700;
    }

    .image-hover-wrapper {
        position: relative;
        overflow: hidden;
        width: 100%;
    }
    .image-hover {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s ease;
    }
    .image-hover-wrapper:hover .image-hover { transform: scale(1.05); }
    .image-hover-wrapper:hover .grayscale-hover {
        filter: grayscale(0%) brightness(0.9);
    }

    .img-brand {
        height: 37px;
        width: auto;
        object-fit: contain;
    }     
    /*--MOD-ADD--*/
    .license-card {
        border: none;
        background: #f8f9fa;
        border-left: 5px solid var(--color-red);
        transition: transform 0.3s;
    }
    .license-card:hover {
        transform: translateY(-5px);
        background: white;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
                color: var(--color-red); 
    }    
    /*--MOD-ADD--*/

    .menuicon {
        color: var(--color-white);
        font-size: 1.8rem;
        transition: color 0.3s;
    }            
    /* Modal Styling */
    .modal-content { border-radius: 20px; border: none; }
    /*--ASLI-- .modal-header { border-bottom: none; padding-bottom: 0; } --ASLI--*/
    .modal-body { 
        border-bottom: none !important;
    }        
    .modal-body img { border-radius: 15px; margin-bottom: 15px; }
    .modal-footer {
        border-top: none !important;
     
    }
    .modal-header {
        border-bottom: none !important;
    }
/*--EDIT--*/
    /* --- Navbar Styling --- */
    .navbar {
        transition: background-color 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
        padding: 10px 0; /* Padding default saat di atas */
    }
    .navbar-brand {
        font-size: 1.5rem;
        padding: 0;
    }               
    .navbar-toggler {
        border: none !important;
        padding: 0;
    }
    .navbar-toggler:focus {
        box-shadow: none !important;
    }        
                            
    .navbar.scrolled {
        background-color: var(--color-white) !important;
        padding-top: 8px;
        padding-bottom: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }
    .navbar.scrolled .navbar-brand img {
        height: 37px;
    }
    .navbar.scrolled .menuicon {
        color: var(--color-black);
    }         
    .navbar.scrolled .nav-link {
        color: var(--color-black) !important;
        font-weight: 400;
    } 
    .nav-link {
        color: var(--color-white) !important;
        font-size: 0.95rem;
        margin: 0 8px;
        font-weight: 400;
        transition: color 0.3s;
        /*--MOD--* padding: 10px 0; *--MOD--*/
    }
    .nav-link:hover, .navbar.scrolled .nav-link:hover {
        color: var(--color-red) !important;
    } 
/*--EDIT--*/
    .registered-badges { 
        display: flex; 
        flex-wrap: wrap; 
        gap: 10px; 
    }
    .registered-badges .badge-item { 
        background-color: white; 
        color: var(--color-black); 
        padding: 5px; 
        border-radius: 6px; 
        font-weight: 700; 
        font-size: 0.85rem; 
        border-bottom: 3px solid var(--color-red); 
        margin-top: 2px; 
    } 

    .ta-card {
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        position: relative;
        height: 100%;
        display: flex;
    }
    .ta-img {
        width: 30%;
        object-fit: cover;
    }
    .ta-info {
        width: 70%;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    /* Hover effect on TA Card */
    .ta-hover-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(56, 56, 56, 0.8);
        /*- background: rgba(17, 17, 17, 0.9); -*/
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 20px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .ta-card:hover .ta-hover-overlay {
        opacity: 1;
    }

    .text-blink { animation: blink 1s linear infinite; } 
    .text-custom-red { color: #dc2626 !important; }        
    .text-justify { text-align: justify !important; }
    .text-p { color: var(--color-white); font-size: 1.5rem; }
    .text-proyek { 
        color: var(--color-gray);
        font-size: 0.9rem;
        line-height: 1.6;
        font-weight: 500;
    } 
    .text-shadow-dark { text-shadow: 2px 2px 5px rgb(0, 0, 0); }  
    .text-shadow-light { text-shadow: 2px 2px 5px rgb(175, 175, 175); }

    .tool-logo {
        height: 160px;
        filter: grayscale(100%);
        opacity: 0.6;
        transition: all 0.3s;
    }
    .tool-logo:hover {
        filter: grayscale(0%);
        opacity: 1;
    }

    .tracking-tighter { letter-spacing: -0.05em; }
    .tracking-wide { letter-spacing: 0.025em; }
    .tracking-widest { letter-spacing: 0.1em; }

    #dirtalk { 
            padding: 120px 0;
            background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), url('../../images/assetsimg/buildings.JPG') center/cover fixed;
    }

    #akta_1 .container-lg, #akta_2 .container-lg, #nib-oss .container-xl, 
    #sbu-jk .container-lg, #ss-oss .container-lg, #npwp-bu .container-lg, 
    #siujk-oss .container-lg, #siup-oss .container-lg, #inkindo .container-lg, 
    #skk-jk .container-lg {
        position: relative;
        z-index: 2;
    }

    #akta_1, #akta_2, #nib-oss, #sbu-jk, #ss-oss, #npwp-bu, #siujk-oss, #siup-oss, #inkindo, #skk-jk {
        position: relative;
        overflow: hidden; 
    }

    #akta_1::before, #akta_2::before, #nib-oss::before, #sbu-jk::before, 
    #ss-oss::before, #npwp-bu::before, #siujk-oss::before, #siup-oss::before, 
    #inkindo::before, #skk-jk::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-5deg); /* Miring diagonal */
        font-size: clamp(8rem, 20vw, 25rem); /* Ukuran dinamis mengikuti layar */
        font-weight: 1000; /* Gaya huruf gemuk (boldest) */
        color: #f1f1f1; /* Warna abu-abu sangat muda */
        z-index: 0; /* Taruh di paling belakang */
        white-space: nowrap;
        pointer-events: none; /* Agar tidak menghalangi klik pada tombol/link */
        opacity: 0.2; /* Transparansi agar tidak terlalu mencolok */
    }

    #legals { 
        padding: 20px 0;
        /*--ASLI-- padding: 120px 0; --ASLI--*/
        background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), url('../../images/default/logo-bekgron_single_2.png') center/cover fixed;
    }

    #pm-zone { 
        padding: 120px 0; 
        background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(236, 236, 236, 0.85)), url('../../images/assetsimg/bekgron_bw1b.png') center/cover fixed; 
    }

    #soptool-zone { 
        width: auto;
        height: 50%;        
        padding: 120px 0; 
        /*-- height: 150vh; --*/
        background-color: var(--light-gray) !important;
        /*--ASLI--* background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(236, 236, 236, 0.85)), url('images/konten/all_tools_1.jpg') center/cover fixed;  *--ASLI--*/
    }        

    .service-img {
        width: 60%;
        height: auto;
        border-radius: 10px;
        opacity: 0.35; /* Membuat gambar transparan */
        mix-blend-mode: multiply; /* Efek menyatu dengan warna background halaman */
    } 

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

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

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

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

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

        /* ==============================================================
           --- POSISI AWAL (Di Tengah Layar) --- 
        ============================================================== */
        /* --- Background Splash Screen (Gradasi Cahaya) --- */
        .splash-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: radial-gradient(circle at 50% 45%, #ffffff 0%, #ffcccc 25%, #e60000 70%, #8a0000 100%); /* Efek cahaya: putih terang di tengah membaur ke merah gelap di tepi */
            z-index: 9998;
            transition: opacity 1s ease-in-out, visibility 1s;
        }
        /* 1. Bendera (Berada di tengah, sedikit ke kiri) */
        .img-kiri {
            top: 45%;
            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%;
            left: 42.5%;
            transform: translate(5%, -50%); 
            width: 260px;
        }
        /* 2. Bendera (Berada di tengah, sedikit ke kanan) */
        .img-kanan {
            top: 45%;
            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: 60px; /* Menempel di bawah */
            left: 50%;
            transform: translate(-50%, 0);
            height: 40px; /* 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) --- 
        ============================================================== */
        /*--A54--*/
        @media (max-width: 768px) {
            /* Penyesuaian ukuran awal (tengah) */
            .img-kiri, .img-kanan { width: 140px; }
            .img-tengah { height: 160px; top: 45%; left: 22.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(100vw - 65px); /* 50px lebar + 15px margin kanan */
                width: 50px;
            }
            body.loaded .img-bawah {
                top: calc(100vh - 55px);
                left: 80px;
                height: 30px; /* Mengecil agar proporsional di HP */
                /*--ASLI-- height: 35px; /* Mengecil agar proporsional di HP */
            }
            body.loaded .splash-text {
                top: calc(102vh - 65px); /* Menempel di bawah */
                left: calc(106vw - 90px);
                font-size: 1.0rem;
                font-weight: 600;
                /*-- height: 40px; /* Tinggi sekitar 40px setara ~2 baris font standar (16px) plus line-height */
            }              
        }
        /*--A22--*/
        @media (max-width: 480px) {
                .img-tengah { height: 160px; top: 45%; left: 12.3%; }
                .img-sub { height: 62px; top: 56%; }
        }

        /*--LAPTOP--*/
        @media (min-width: 1024px) {
                .img-tengah { height: 260px; top: 45%; left: 42.5%; }
                .img-sub { height: 82px; top: 60%; }

                body.loaded .img-kiri { left: calc(98vw - 65px); }
                body.loaded .img-kanan { left: 0.8%; }
                body.loaded .img-bawah { left: 7.5%; }
                body.loaded .splash-text {
                top: calc(102vh - 65px); /* Menempel di bawah */
                left: calc(100vw - 90px);
                font-size: 1.1rem;
                font-weight: 600;
                /*-- height: 40px; /* Tinggi sekitar 40px setara ~2 baris font standar (16px) plus line-height */
                } 
        }

/*--==========SPLASH-SCREEN==========--*/