:root {
            --color-black: #121212;
            --color-dark-gray: #424242;
            --color-gray: #F5F5F5;            
            --color-orange: #FF7043;
            --color-red: #D32F2F;
            --color-white: #FFFFFF;            
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Poppins', sans-serif;
            color: var(--color-black);
            background-color: #EFEFEF; 
        }
        /*--LAYAR PC--*/
        @media (min-width: 992px) {
            .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;
            }                     
        }
        /*--LAYAR PC--*/        
        @media (max-width: 991px) {
            .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.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;
            }
        }

        /* --- Main Sections Setup --- */
        .about-section {
            padding: 80px 0;
            background-image: url('../images/assetsimg/bekgron_bw1b.png');
        }        
        .about-section spin {
            color: var(--color-red);
            font-weight: 700;
        }  
        /* --- Generic Parallax Background & Overlay System --- */
        .bg-parallax {
            position: relative;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        /* Tombol Kustom */
        .btn-brand {
            background-color: var(--color-orange);
            color: white;
            padding: 12px 28px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .btn-brand:hover {
            background-color: #5a6268;
            color: var(--color-orange);
            transform: translateY(-3px);
        }
        .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: #E64A19;
            color: var(--color-white);
        }

        /* About Section Extras */
        .carousel-item img {
            height: 400px;
            object-fit: cover;
            border-radius: 12px;
        }

        /* News Section Extras */
        .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            transition: transform 0.3s;
            background-color: var(--color-white);
            overflow: hidden; /* Memastikan header radius mengikuti card */
            /*-- background: linear-gradient(rgba(83, 83, 83, 0.85), rgba(26, 26, 26, 0.85)), url('../images/konten/logo_rcm_cloud.jpg') center; --*/
        }
        .card-header-red {
            background-color: var(--color-red);
            height: 12px; /* Hanya sebagai garis warna, teks dihilangkan */
            border-radius: 12px 12px 0 0 !important;
            padding: 0;
            border-bottom: none;
        }
        .card-news_1 {
            position: relative;
            background: linear-gradient(rgba(83, 83, 83, 0.85), rgba(26, 26, 26, 0.85)), url('../images/konten/logo_rcm_cloud.jpg') center;            
            background-size: cover;
            padding: 2px 0;
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
            opacity: 10;
        }
        .card-news_2 {
            position: relative;
            background: linear-gradient(rgba(83, 83, 83, 0.85), rgba(26, 26, 26, 0.85)), url('../images/konten/logo_rcm_cloud.jpg') center;
            background-size: cover;
            padding: 2px 0;
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
            opacity: 10;
        }
        .card-news_3 {
            position: relative;
            background: linear-gradient(rgba(83, 83, 83, 0.85), rgba(26, 26, 26, 0.85)), url('../images/konten/logo_rcm_cloud.jpg') center;
            background-size: cover;
            padding: 2px 0;
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
            opacity: 10;
        }         
        .card-text {
            font-size: 0.9rem;
            color: var(--color-white);
        }
        .card-text-prj {
            font-size: 1.0rem;
            /*--ASLI--*/ color: var(--color-black); /*--ASLI--*/
            /*--MOD-- color: rgb(59, 59, 59); --MOD--*/
        }

        .card:hover {
            transform: translateY(-5px);
        }
        
        .content-relative {
            position: relative;
            z-index: 2; /* Menjaga konten tetap di atas overlay */
        }

        /* Counter Section Extras */
        .counter-box {
            text-align: center;
            padding: 20px;
        }
        .counter-icon {
            font-size: 2.8rem;
            color: var(--color-red);
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(255,255,255,0.8); /* Penyesuaian shadow untuk bg putih */
        }
        .counter-number {
            font-size: 3rem;
            font-weight: 700;
            color: var(--color-black);
        }
        .counter-section {
            padding: 60px 0;
            background-image: url('../images/assetsimg/bekgron_bw1b.png');
        }
        .counter-title {
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
            color: var(--color-dark-gray);
        }

        /* --- Global Title Style (Efek Timbul/Emboss) --- */
        .embossed-title {
            font-weight: 700;
            text-shadow: -1px -1px 1px rgba(255,255,255,0.8), 2px 2px 4px rgba(0,0,0,0.3);
        }

        /* --- Floating WhatsApp Button --- */
        .float-wa {
            position: fixed;
            width: 60px;
            height: 60px;
            bottom: 40px;
            right: 40px;
            background-color: #25d366;
            color: #FFF;
            border-radius: 50px;
            text-align: center;
            font-size: 30px;
            box-shadow: 2px 2px 15px rgba(0,0,0,0.2);
            z-index: 100;
            transition: transform 0.3s ease, background-color 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }
        .float-wa:hover {
            transform: scale(1.1);
            background-color: #1ebe57;
            color: #FFF;
        }

        .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;
        }
        /*----- 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 Header Section --- */
        .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; /* Ukuran diperbesar */
            font-weight: 600;
            color: var(--color-white);
            letter-spacing: 2px;
            margin-bottom: 15px;
            text-shadow: 2px 2px 5px rgb(0, 0, 0);
            /*--ASLI-- text-transform: uppercase; --ASLI--*/            
        }
        .hero-title {
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--color-red);
            text-shadow: 2px 2px 5px rgb(0, 0, 0);            
        }

        .ident-text {
            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(--primary-black);
            font-weight: 700;
        }
        
        .img-brand {
            height: 37px;
            width: auto; /* Perbaikan: Mencegah logo melar di mobile */
            object-fit: contain;
        }   

        .menu-icon {
            color: var(--color-white);
            font-size: 1.8rem;
            transition: color 0.3s;
        }

        /* --- Navbar Styling --- */
        .navbar {
            transition: all 0.4s ease-in-out;
            /*--ASLI-- transition: background-color 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease; --ASLI--*/
            padding: 10px 0; /* Padding default saat di atas */
            /*--AWAL--
                transition: all 0.6s ease-in-out;
                background-color: transparent;
                padding: 10px 0; *--MOD--*
                --AWAL--*
                *--ASLI--* transition: all 0.4s ease-in-out; *--ASLI--*
            *--ASLI--* padding: 15px 0; *--ASLI--*/
        }
        .navbar-brand {
            font-size: 1.5rem;
            padding: 0;
        }               
        .navbar-toggler {
            border: none !important;
            padding: 0;
        }
        .navbar-toggler:focus {
            box-shadow: none !important;
        }        
        .navbar.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);            
            /*--AWAL--
                box-shadow: 0 4px 10px rgba(0,0,0,0.1);
                padding: 10px 0; *--MOD--*
                *--ASLI--* padding: 10px 0; *--ASLI--*
            --AWAL--*/
        }
        /*--        
            .navbar-brand img {
                height: 37px; *--MOD--*
                width: auto;
                object-fit: contain;
                transition: all 0.5s;
                *--ASLI--* height: 45px; *--ASLI--*            
                *--ASLI--* transition: all 0.3s; *--ASLI--*
            }
        --*/
        .navbar.navbar-scrolled .navbar-brand img {
            height: 37px;
        }
        .navbar.navbar-scrolled .menu-icon {
            color: var(--color-black);
        }         
        .navbar.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.navbar-scrolled .nav-link:hover {
            color: var(--color-red) !important;
        } 

        .news-section {
            padding: 80px 0;
            background-image: url('../images/assetsimg/bekgron_bw1b.png');
            /*--ASLI-- background-image: url('https://images.unsplash.com/photo-1531834685032-c34bf0d84c77?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'); --ASLI--*/
        }

        .overlay-white {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(255, 255, 255, 0.85); /* Transparansi overlay putih */
            z-index: 1;
        }

        .service-img {
            width: 100%;
            height: 350px;
            object-fit: cover;
            border-radius: 12px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        }        
        .service-row {
            margin-bottom: 60px;
            align-items: center;
        }
        .services-section {
            padding: 80px 0;
            background-image: url('../images/assetsimg/bekgron_bw1b.png');
            /*--ASLI-- background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'); --ASLI--*/
        }

        .social-icons a {
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #333;
            color: var(--color-white);
            border-radius: 50%;
            margin-right: 10px;
            transition: background-color 0.3s, transform 0.3s;
        }
        .social-icons a:hover {
            background-color: var(--color-red);
            transform: translateY(-3px);
        }

        .text-justify {
            text-align: justify !important;
        }

        /*--=====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: 170px; }
            .img-tengah { height: 160px; top: 45%; left: 23.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-tengah {
                top: 5%;
                left: 50%;
                height: 30px; /* Mengecil agar proporsional di HP */
                /*--ASLI-- height: 35px; /* Mengecil agar proporsional di HP */
            }            
            body.loaded .img-kanan {
                top: 55px;
                left: calc(100vw - 65px); /* 50px lebar + 15px margin kanan */
                width: 50px;
            }
            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 .img-sub {
                top: calc(96vh - 55px);
                left: 50%;
                height: 30px; /* Mengecil agar proporsional di HP */
                /*--ASLI-- height: 35px; /* Mengecil agar proporsional di HP */
            }            
            body.loaded .splash-text {
                top: calc(97vh - 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: 40.6%; }
                .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 */
                } 
        }
        /*--

            @media (max-width: 860px) {
                    .img-tengah { height: 160px; top: 45%; left: 18.3%; }
            }
        
            @media (min-width: 1280px) {
                / Penyesuaian ukuran awal (tengah) /
                .img-tengah { height: 160px; top: 45%; left: 26.3%; }
                /*--
                .img-kiri, .img-kanan { width: 140px; }
                .img-bawah { height: 60px; top: 62%; }
                .splash-text { font-size: 1.3rem; top: 70%; }

                / 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 /
                }
                --/
            }   
        --*/
        /*--=====SPLASH-SCREEN=====--*/

    #galeri .modal-lg {
        position: relative;
        z-index: 2;
    }

    .modal-lg {
        position: relative;
        overflow: hidden; 
    }