:root {
            --color-black: #121212;
            --color-dark-gray: #424242;
            --color-gray: #F5F5F5;            
            --color-orange: #FF7043;
            --color-red: #D32F2F;
            --color-white: #FFFFFF;            
        }
        body { 
            min-height: 100vh;
            font-family: 'Trebuchet MS', 'Lucida Sans', Arial, sans-serif;
            color: var(--color-black); 
            background-color: #EFEFEF; 
        }
        body.modal-open {
            overflow: hidden !important;
            padding-right: 0px !important;
        }        
        html { scroll-behavior: smooth; scrollbar-gutter: stable; }
        textarea { border: none; outline: none; resize: none; }
        .active-section { display: flex !important; }
        .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); }        
        .card-img-overlay-hover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.65); color: #ffffff; display: flex; align-items: center; justify-content: center; text-align: center; padding: 15px; opacity: 0; transition: opacity 0.35s ease; }
        .card-img-wrapper { position: relative; height: 160px; overflow: hidden; background-color: #e9ecef; }
        .card-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
        .carousel-item img { height: 350px; object-fit: cover; }        
        .client-logos { gap: 20px; }
        .client-logos img { max-width: auto; max-height: 48px; object-fit: contain; margin: 5px; opacity: 0.7; transition: all 0.3s ease; filter: grayscale(100%); }
        .client-logos img:hover { opacity: 1; filter: grayscale(0%); transform: scale(1.05); }        
        .clr-red-cp { color: #F41558; } 
        .clr-drk-cp { color: #253238; } 
        .clr-lt-gry { color: #D3D3D3; }
        .clr-md-gry { color:#807e7e; }  
        .custom-card:hover .card-img-wrapper img { transform: scale(1.15); }
        .custom-card:hover .card-img-overlay-hover { opacity: 1; }
        .custom-card { border: none; border-radius: 12px; overflow: hidden; background: #ffffff; box-shadow: 0 10px 20px rgba(0,0,0,0.08); transition: transform 0.35s ease, box-shadow 0.35s ease; position: relative; }
        .custom-card:hover { transform: translateY(-8px) rotateX(2deg); box-shadow: 0 18px 28px rgba(0,0,0,0.18); }
        .dtl-pry { background-color: #F41558; color: #F41558; }
        .fnt-data{ font-size: 0.9rem; }
        .header-filter-container { transition: all 0.4s ease-in-out; }
        .icn-clk{ font-size: 0.5rem; }
        .jdl-exp-scn { font-family: "Orbitron", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; font-size: 1.0em; }
        .jdl-exp-main { font-family: "Caveat Brush", cursive; font-weight: 400; font-style: normal; font-size: 1.8em; }
        .jdl-exp-sub { font-family: "Exo", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; }   /*--  font-size: 1.1em; --*/             
        .konten-center { justify-content: center; }
        .main-content { flex: 1; display: flex; flex-direction: column; }
        .main-jdl-exp { font-family: "mv Boli"; font-weight: 400; font-style: normal; font-size: 1.1em; }
        .pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; }
        .pagination .page-link { color: #6c757d; border-radius: 5px; }
        .pagination .page-item.active .page-link { background-color: #212529; border-color: #212529; color: white; }
        .pagination .page-link:hover { color: #212529; background-color: #e2e3e5; border-color: #d6d8db; }
        .pagination .page-item.disabled .page-link { color: #6c757d; }
        .placeholder-box { background-color: #e9ecef; color: #6c757d; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; min-height: 250px; width: 100%; }        
        .pointer { cursor: pointer; }
        .profile-img-lg { width: 110px; height: 110px; object-fit: cover; border-radius: 50%; }
        .sub-filter-btn { border-radius: 20px; padding: 6px 18px; margin: 4px; font-weight: 500; transition: all 0.2s ease; }
        .text-instruction{ font-family: 'Trebuchet MS', Arial, sans-serif; font-style: oblique; font-size: 1.1em; font-weight: 800; color: #b5b9bb; }
        .text-justify-custom { text-align: justify; }
        .teks-persen::after { content: "%"; }
        @media all and (min-width: 992px) {
            .navbar .nav-item.dropdown:hover .dropdown-menu {
                display: block;
                margin-top: 0;
            }
        }
        @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;
            }                     
        }
        @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;
                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;
            }
            .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;
            }   
        }
        .menu-icon {
            color: var(--color-white);
            font-size: 1.8rem;
            transition: color 0.3s;
        }        
        .navbar {
            transition: all 0.4s ease-in-out;
            padding: 10px 0; 
            opacity: 100%;
        }
        .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); 
        }
        .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;
        }
        .nav-link:hover, .navbar.navbar-scrolled .nav-link:hover {
            color: var(--color-red) !important;
        } 
        .hover-bg-custom-red:hover { background-color: #b91c1c !important; }        
        .img-brand {
            height: 37px;
            width: auto;
            object-fit: contain;
        } 

        .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);
        }        

        .bekgron-konten {
            background: #ffffffec;
            opacity: 0.90;
        }        

        .hover-target {
            transition: opacity 0.3s ease;
        }

        .hero-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(18, 18, 18, 0.25);
            z-index: 1;
        }
        .hero-section {
            min-height: 94vh;
            background-image: url('../img/default/HKOSWL_20250630.jpg');
            display: flex;
            color: var(--color-white);
        }
        .bg-parallax {
            position: relative;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .ats {
            height: 100%;
            padding-top: 3% !important;
            padding-bottom: 3% !important;
        }

        .content-relative {
            position: relative;
            z-index: 2;
        }        
        .kozonk {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
        }