: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;
        }

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