/* ========================================= */
    /* TRAKINDO-STYLE DUAL TIER NAVBAR CSS       */
    /* ========================================= */
    
    .transition-all { transition: all 0.3s ease-in-out; }
    .text-tracking-1 { letter-spacing: 0.5px; font-size: 0.9rem; }

    /* Nav Transparan di Hero */
    .nav-hero { background-color: transparent !important; }
    .nav-hero .top-link, .nav-hero .nav-link { color: rgba(255, 255, 255, 0.9) !important; }
    .nav-hero .top-link:hover, .nav-hero .nav-link:hover { color: #ffc107 !important; }
    .nav-hero .bottom-yellow-line { height: 0px; }

    /* Nav Putih Solid saat Scroll */
    html.scrolled .pro-navbar, .scrolled-solid { background-color: #ffffff !important; box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; }
    html.scrolled .top-bar, .scrolled-solid .top-bar { background-color: #f8f9fa; border-bottom: 1px solid #eeeeee !important; }
    html.scrolled .top-link, html.scrolled .nav-link, .scrolled-solid .top-link, .scrolled-solid .nav-link { color: #1a1a1a !important; }
    html.scrolled .top-link:hover, html.scrolled .nav-link:hover, .scrolled-solid .top-link:hover, .scrolled-solid .nav-link:hover { color: #ffc107 !important; }
    
    /* Garis Bawah Kuning */
    html.scrolled .bottom-yellow-line, .scrolled-solid .bottom-yellow-line { height: 4px; background-color: #28A5DF; }

    /* Efek Header Mengecil saat Scroll */
    html.scrolled .pro-logo { height: 38px !important; }
    html.scrolled .main-bar { padding-top: 5px !important; padding-bottom: 5px !important; }
    
    .nav-hero .quality-img{
        filter: brightness(0) invert(1);
        transition: filter 0.3s ease-in-out;
    }
    
    html.scrolled .quality-img,
    .scrolled-solid .quality-img {
        opacity: 0 !important;
        pointer-events: none;
        filter: none !important;
    }
    

    /* Tombol Trakindo Style */
    .btn-trakindo-style { border-radius: 2px !important; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.9rem; }
    .btn-trakindo-style:hover { background-color: #1a1a1a !important; color: #ffc107 !important; transform: translateY(-2px); }

    /* Mega Menu Animasi */
    .pro-navbar .dropdown-menu.show {
        animation: slideDownMegaMenu 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important;
        transform-origin: top center;
    }
    @keyframes slideDownMegaMenu {
        0% { opacity: 0; transform: translateY(-15px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    /* ========================================= */
    /* RESPONSIVE MOBILE FIXES                   */
    /* ========================================= */
    
    /* Hide logo Garsindo di mobile, tetap muncul di desktop */
    @media (max-width: 991px) {
    .navbar-menu-open .navbar-brand {
        display: none !important;
        }
    }

    @media (max-width: 991.98px) {
        .navbar-collapse {
            background-color: #ffffff;
            padding: 15px;
            border-radius: 0 0 10px 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            max-height: calc(100vh - 90px);
            overflow-y: auto;
        }
        .navbar-nav .nav-item { border-bottom: 1px solid #f0f0f0; padding-bottom: 5px; margin-bottom: 10px; }
        .navbar-nav .nav-item:last-child { border-bottom: none; margin-bottom: 0; }
        .navbar-collapse .nav-link { color: #333 !important; font-weight: 600; }
        .pro-logo { height: 35px !important; }

        /* =========================================
           PRODUK MEGA MENU — MOBILE: LIST TEKS ONLY
           Semua produk tampil sebagai list nama,
           tanpa gambar, tanpa horizontal tab pills.
           ========================================= */

        /* Dropdown menyatu dalam collapse navbar */
        .pro-mega-menu .dropdown-menu {
            position: static !important;
            width: 100% !important;
            left: 0 !important;
            right: 0 !important;
            top: auto !important;
            transform: none !important;
            box-shadow: none !important;
            border: none !important;
            border-radius: 0 !important;
            margin-top: 0 !important;
            padding: 0 !important;
            background: #fff;
        }

        /* Scrollbar tipis warna Garsindo */
        .pro-mega-menu .dropdown-menu::-webkit-scrollbar { width: 3px; }
        .pro-mega-menu .dropdown-menu::-webkit-scrollbar-thumb { background: #ffc107; }

        /* Reset padding container & row */
        .pro-mega-menu .dropdown-menu > .container {
            max-width: 100% !important;
            padding: 0 !important;
        }
        .pro-mega-menu .dropdown-menu .row {
            margin: 0 !important;
        }

        /* Sembunyikan kolom kiri (pills: Excavators / Wheel Loaders / dll) */
        .pro-mega-menu .col-lg-3 {
            display: none !important;
        }

        /* Kolom kanan ambil full width */
        .pro-mega-menu .col-lg-9 {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            width: 100% !important;
            padding: 0 !important;
        }

        /* Tampilkan SEMUA tab pane sekaligus (Bootstrap default: hanya active yg tampil) */
        .pro-mega-menu .tab-pane {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        /* Nama group (h5) jadi separator header bergaris kuning */
        .pro-mega-menu .tab-pane > h5 {
            padding: 9px 16px 8px !important;
            margin: 0 !important;
            font-size: 0.65rem !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 1.2px !important;
            color: #6b4f00 !important;
            background-color: #fff8e1 !important;
            border-left: 3px solid #ffc107 !important;
        }

        /* Grid produk → list vertikal */
        .pro-mega-menu .tab-pane .row {
            display: block !important;
        }
        .pro-mega-menu .tab-pane .row > .col {
            width: 100% !important;
            padding: 0 !important;
        }

        /* Reset gutter Bootstrap g-4 */
        .pro-mega-menu .g-4 {
            --bs-gutter-x: 0 !important;
            --bs-gutter-y: 0 !important;
        }

        /* SEMBUNYIKAN semua gambar produk */
        .prod-grid-item .img-wrap {
            display: none !important;
        }

        /* Setiap item tampil sebagai baris list */
        .prod-grid-item {
            display: flex !important;
            align-items: center !important;
            text-align: left !important;
            padding: 12px 16px 12px 20px !important;
            border-bottom: 1px solid #f0f0f0 !important;
            transition: background 0.15s ease !important;
            text-decoration: none !important;
        }
        .prod-grid-item:active {
            background: #fffbea !important;
        }

        /* Arrow › di ujung kanan item */
        .prod-grid-item::after {
            content: '›' !important;
            margin-left: auto !important;
            color: #ccc !important;
            font-size: 1.2rem !important;
            line-height: 1 !important;
            flex-shrink: 0 !important;
        }

        /* Nama produk (tag <p> di dalam .prod-grid-item) */
        .prod-grid-item > p {
            margin: 0 !important;
            font-size: 0.88rem !important;
            font-weight: 600 !important;
            color: #2d2d2d !important;
            text-transform: capitalize !important;
            line-height: 1.3 !important;
        }
        .prod-grid-item:active > p {
            color: #b88a00 !important;
        }
    }

    /* ========================================= */
    /* FLOATING WA & CSS LAINNYA                 */
    /* ========================================= */
    .float-wa {
        position: fixed; width: 60px; height: 60px; bottom: 30px; right: 30px;
        background-color: #25d366; color: #FFF; border-radius: 50px; text-align: center;
        font-size: 30px; box-shadow: 2px 2px 3px #999; z-index: 9999; transition: all 0.3s ease;
        animation: pulse-wa 2s infinite;
    }
    .my-float { margin-top: 15px; }
    .float-wa:hover { background-color: #128C7E; color: #fff; transform: scale(1.1); }
    @keyframes pulse-wa {
        0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
        70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
        100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
    }
    @media (max-width: 768px) {
        .float-wa { width: 50px; height: 50px; bottom: 20px; right: 20px; font-size: 25px; }
        .my-float { margin-top: 13px; }
    }

    /* Modal Modifikasi */
    .bg-gradient-warning { background: linear-gradient(135deg, #ffc107 0%, #ffca2c 100%); }
    .btn-whatsapp { background-color: #25d366; color: white; transition: all 0.3s ease; }
    .btn-whatsapp:hover { background-color: #1ebd56; color: white; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4) !important; }
    .btn-white { background-color: #fff; transition: all 0.3s ease; }
    .btn-white:hover { background-color: #f8f9fa; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important; border-color: #aaa !important; }
    .rounded-4 { border-radius: 20px !important; }
    .letter-spacing-1 { letter-spacing: 1px; }

    /* Custom Scrollbar */
    ::-webkit-scrollbar { width: 12px; }
    ::-webkit-scrollbar-track { background: #f8f9fa; }
    ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 6px; border: 3px solid #f8f9fa; }
    ::-webkit-scrollbar-thumb:hover { background: #ffc107; }

    /* Lenis Fix */
    html.lenis, html.lenis body { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
    .lenis.lenis-stopped { overflow: hidden; }

    /* Global Font & Chat */
    body { font-family: 'Inter', sans-serif; color: #333; line-height: 1.6; }
    h1, h2, h3, h4, h5, h6, .fw-bold { font-family: 'Montserrat', sans-serif; letter-spacing: -0.02em; }
    p.lead { font-weight: 400; line-height: 1.8; color: #555 !important; }
    p.text-secondary { font-size: 0.95rem; line-height: 1.7; letter-spacing: 0.01em; }
    
    .ai-chat-container { position: fixed; bottom: 105px; right: 30px; z-index: 9998; }
    .ai-chat-window { width: 320px; height: 450px; background: white; border-radius: 15px; position: absolute; bottom: 80px; right: 0; display: flex; flex-direction: column; overflow: hidden; animation: fadeInSlide 0.4s ease forwards; }
    @keyframes fadeInSlide { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    .ai-chat-header { background: #2c3e50; color: white; padding: 15px; display: flex; align-items: center; }
    .ai-chat-body { flex: 1; padding: 15px; overflow-y: auto; background: #f8f9fa; display: flex; flex-direction: column; gap: 10px; }
    .ai-chat-footer { padding: 10px; border-top: 1px solid #eee; background: white; }
    .ai-message { padding: 8px 12px; border-radius: 12px; font-size: 0.9rem; max-width: 85%; }
    .ai-message.bot { background: #e9ecef; align-self: flex-start; border-bottom-left-radius: 2px; }
    .ai-message.user { background: #ffc107; color: #000; align-self: flex-end; border-bottom-right-radius: 2px; }

    /* Google Translate Hidden Elements */
    #google_translate_element { position: absolute; top: -9999px; left: -9999px; z-index: -99; }
    .goog-te-banner-frame { display: none !important; }
    .skiptranslate { display: none !important; }
    body { top: 0px !important; position: static !important; }

    /* HP sangat kecil (<380px): teks dan padding lebih kecil */
    @media (max-width: 380px) {
        .prod-grid-item {
            padding: 10px 12px 10px 14px !important;
        }
        .prod-grid-item > p {
            font-size: 0.82rem !important;
        }
    }
    
    /* Pastikan video full cover di semua ukuran layar */
    #home video {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        object-fit: cover;
    }

    /* iOS Safari fix: pastikan section tingginya benar */
    @supports (-webkit-touch-callout: none) {
        #home {
            height: -webkit-fill-available !important;
            min-height: 100vh;
        }
    }
    
    .hero-video-wrap.vh-100 {
        height: 100vh !important;
        width: 100% !important;
    }

    /* SURAT PERINTAH PAKSA UNTUK VIDEO BIAR FULL SCREEN */
    .hero-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    /* 1. KARTU POP UP (Paksa Membesar & Naik) */
    .card-pop-up {
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
        transform: scale(1) translateZ(0); /* Reset transform */
        z-index: 1;
    }

    .card-pop-up:hover {
        /* !important Wajib ada agar tidak ditimpa template */
        transform: scale(1.05) translateY(-10px) !important; 
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35) !important;
        z-index: 999 !important; /* Pastikan dia melayang di atas segalanya */
        border-color: #ffc107 !important; /* Opsional: Border jadi kuning */
        position: relative;
    }

    /* 2. TOMBOL NAIK DARI BAWAH */
    .btn-detail-anim {
        transform: translateY(40px);
        opacity: 0;
        transition: all 0.4s ease !important;
    }
    .card-pop-up:hover .btn-detail-anim {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }

    /* 3. GAMBAR ZOOM */
    .img-wrapper-anim img {
        transition: transform 0.5s ease !important;
    }
    .card-pop-up:hover .img-wrapper-anim img {
        transform: scale(1.15) !important;
    }

    /* 4. OVERLAY MUNCUL */
    .overlay-anim {
        opacity: 0;
        transition: opacity 0.3s ease !important;
    }
    .card-pop-up:hover .overlay-anim {
        opacity: 1 !important;
    }
    
    /* Perbaikan agar pop-up tidak terpotong */
    #products { overflow: visible !important; }
    
    /* CSS PREMIUM ACCORDION GARSINDO */
.premium-accordion .accordion-button {
    background-color: #ffffff;
    color: #212529;
    box-shadow: none !important;
    transition: all 0.3s ease;
}
.premium-accordion .accordion-button:not(.collapsed) {
    background-color: #212529;
    color: #ffc107;
}
.premium-accordion .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(350deg);
}
.premium-accordion .accordion-button:hover {
    background-color: #f8f9fa;
}
.premium-accordion .accordion-button:not(.collapsed):hover {
    background-color: #1a1e21;
}  

.hover-zoom-slight { transition: transform 0.5s ease; }
    .hover-zoom-slight:hover { transform: scale(1.02); }
    
    /* ========================================= */
    /* CSS KHUSUS PETA INTERAKTIF GARSINDO       */
    /* ========================================= */
    .map-container {
        max-width: 1000px; /* Batas maksimal lebar peta */
        margin: 0 auto;
    }

    /* Posisi Titik Map */
    .map-pin {
        position: absolute;
        transform: translate(-50%, -100%); /* Biar ujung bawah ikon pas di koordinat */
        text-decoration: none;
        z-index: 10;
        cursor: pointer;
    }

    /* Ikon Mapnya Sendiri */
    .pin-icon {
        position: relative;
        z-index: 2;
        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
        transition: transform 0.3s ease;
    }
    .map-pin:hover .pin-icon {
        transform: scale(1.3) translateY(-5px); /* Membesar dan loncat saat disentuh */
    }

    /* Efek Radar Berdenyut (Pulse) */
    .pin-pulse {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 15px;
        height: 15px;
        background-color: rgba(220, 53, 69, 0.6); /* Warna merah Bootstrap */
        border-radius: 50%;
        z-index: 1;
        animation: pulse-ring 2s infinite;
    }

    @keyframes pulse-ring {
        0% { transform: translateX(-50%) scale(0.5); opacity: 1; }
        100% { transform: translateX(-50%) scale(3); opacity: 0; }
    }

    /* Label Nama Kota (Muncul saat di-hover) */
    .pin-label {
        position: absolute;
        bottom: 110%; /* Muncul di atas ikon */
        left: 50%;
        transform: translateX(-50%);
        background-color: #343a40; /* Hitam gelap */
        color: #ffc107; /* Teks kuning Garsindo */
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: bold;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    }
    
    /* Panah kecil di bawah label */
    .pin-label::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #343a40 transparent transparent transparent;
    }

    .map-pin:hover .pin-label {
        opacity: 1;
        visibility: visible;
        bottom: 130%;
    }
    
     /* ========================================= */
    /* 1. ANIMASI SLIDER BERJALAN & KOTAK LOGO   */
    /* ========================================= */
    .brand-slider {
        height: 100px;
        margin: auto;
        overflow: hidden;
        position: relative;
        width: 100%;
    }
    
    /* Efek Kabut di Kiri & Kanan */
    .brand-slider::before,
    .brand-slider::after {
        background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
        content: "";
        height: 100px;
        position: absolute;
        width: 150px;
        z-index: 2;
    }
    .brand-slider::before { left: 0; top: 0; }
    .brand-slider::after { right: 0; top: 0; transform: rotate(180deg); }


    /* ========================================= */
    /* 2. STYLE DASAR LOGO (KUNCI MATI ZOOM)     */
    /* ========================================= */
    .brand-img {
        width: auto !important;          /* Paksa lebar menyesuaikan tinggi otomatis */
        max-height: none !important;     /* HANCURKAN BATAS 60px! Bebas membesar! */
        object-fit: contain;
        filter: grayscale(100%); 
        opacity: 0.6;
        transition: all 0.3s ease;
        cursor: pointer;
        transform: scale(1) !important;  /* Cegah Zoom */
    }

    /* Efek saat mouse diarahkan (CUMA BERUBAH WARNA, TIDAK ZOOM) */
    .brand-img:hover {
        filter: grayscale(0%);
        opacity: 1;
        transform: scale(1) !important; /* <--- KUNCI BORGOL MATI ZOOM */
    }

    /* ========================================= */
    /* 3. TUNING UKURAN PER LOGO (PAKAI TINGGI)  */
    /* ========================================= */
    
    /* A. Kelompok Logo Teks Memanjang (Lebih Pendek) */
    .brand-sinomach     { height: 100px !important; }
    .brand-sunward      { height: 40px !important; }
    
    /* B. Kelompok Logo Kotak/Proporsional (Lebih Tinggi) */
    .brand-logoxcmg     { height: 100px !important; }
    .brand-laigong      { height: 120px !important; }
    .brand-shantui      { height: 150px !important; }
    .brand-ghb          { height: 350px !important; } 
    
    /* INDUSTRY CARD STYLING */
    .industry-card {
        border: 1px solid #eee;
        transition: all 0.4s ease;
    }

    /* Efek saat mouse masuk: Kartu naik, bayangan menebal */
    .industry-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
        border-color: #ffc107; /* Garis kuning Garsindo */
    }

    /* Wrapper Gambar */
    .industry-img-wrap {
        height: 180px;
        overflow: hidden;
        position: relative;
    }

    /* Gambar di dalam wrapper */
    .industry-img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    /* Efek Zoom Gambar saat Hover */
    .industry-card:hover .industry-img {
        transform: scale(1.1);
    }

    /* Overlay Hitam Transparan di atas Gambar */
    .industry-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%);
    }

    /* Tombol Lihat Solusi */
    .industry-card .btn {
        transition: all 0.3s;
    }
    
    .industry-card:hover .btn {
        background-color: #ffc107;
        border-color: #ffc107;
        color: #000;
    }
    
    /* 1. Container Slider */
    .brand-slider {
        height: 100px;
        margin: auto;
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    /* 2. Efek Kabut di Kiri & Kanan (Biar halusnya gradasi) */
    .brand-slider::before,
    .brand-slider::after {
        background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
        content: "";
        height: 100px;
        position: absolute;
        width: 150px; /* Lebar gradasi */
        z-index: 2;
    }
    .brand-slider::before { left: 0; top: 0; }
    .brand-slider::after { right: 0; top: 0; transform: rotate(180deg); }

    /* 3. Rel Kereta (Track) */
    .brand-slide-track {
        display: flex;
        width: calc(400px * 18); /* 250px x Jumlah Total Logo (Asli + Duplikat) */
        animation: scroll 40s linear infinite; /* Kecepatan jalan (40s) */
    }
    
    /* Kalau di-hover, logonya berhenti jalan (Opsional) */
    /* .brand-slide-track:hover {
        animation-play-state: paused;
    } */

    /* 4. Item Logo */
    .brand-slide {
        height: 100px;
        width: 250px; /* Lebar per item */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 30px; /* Jarak antar logo */
    }

    /* 5. Styling Gambar (Grayscale ke Warna) */
    .brand-img {
        max-height: 60px; /* Tinggi logo dibatasi */
        filter: grayscale(0%); /* Hitam putih */
        opacity: 1;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .brand-img:hover {
        filter: grayscale(0%); /* Jadi berwarna */
        opacity: 1;
        transform: scale(1.1); /* Membesar dikit */
    }

    /* 6. Animasi Jalan (Keyframes) */
    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-400px * 6)); } /* -250px * Jumlah Logo Asli (6) */
    }
    
    .hover-card-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .hover-card-lift:hover { transform: translateY(-10px); box-shadow: 0 1rem 3rem rgba(0,0,0,.15)!important; }
    .text-shadow-lg { text-shadow: 0 4px 12px rgba(0,0,0,0.5); }
    .grayscale-hover-color img { filter: grayscale(100%); transition: filter 0.3s; opacity: 0.6; }
    .grayscale-hover-color img:hover { filter: grayscale(0%); opacity: 1; }
    
    /* Utility gradients for icons */
    .bg-blue-50 { background-color: #eff6ff; }
    .bg-green-50 { background-color: #f0fdf4; }
    .bg-orange-50 { background-color: #fff7ed; }
    .bg-purple-50 { background-color: #faf5ff; }
    
    /* =========================================
       MOBILE OPTIMIZATION (MAX-WIDTH: 768PX)
       (Kode ini hanya berjalan di layar HP)
       ========================================= */
    @media (max-width: 768px) {
        /* 1. MENGECILKAN FONT RAKSASA */
        .display-3 { font-size: 2.2rem !important; line-height: 1.2 !important; }
        .display-6 { font-size: 1.6rem !important; }
        .lead { font-size: 1rem !important; }

        /* 2. MENGURANGI RUANG KOSONG (PADDING) */
        .py-6, section { 
            padding-top: 3rem !important; 
            padding-bottom: 3rem !important; 
        }

        /* 3. FIX GAMBAR "ABOUT US" (Jangan sampai ketinggian 550px di HP) */
        #about .position-relative.w-100.d-flex { 
            height: 300px !important; 
        }

        /* 4. FIX MASKOT GARSINDO CALL (BIANG KEROK UTAMA) */
        /* Kita kecilkan maskot dan mundurkan ke belakang teks */
        img[alt="CS Garsindo"] {
            width: 200px !important; 
            left: -20px !important; 
            bottom: 0 !important;
            opacity: 0.15; /* Buat transparan agar teks info tetap terbaca jelas */
            filter: grayscale(100%); /* Pemanis opsional */
        }
        
        /* Kembalikan lebar kotak teks kontak jadi 100% (Sebelumnya 60%) */
        .ms-auto[style*="width: 60%"] {
            width: 100% !important;
            padding-left: 0 !important;
            z-index: 5 !important;
        }

        /* 5. FIX TAMPILAN IKLAN POP-UP (PROMO) */
        #promoModal .p-4 {
            padding: 1.5rem !important;
        }
        #promoModal h3 {
            font-size: 1.5rem !important;
        }

        /* 6. FIX LABEL PETA (Agar tidak tumpang tindih) */
        .pin-label { 
            font-size: 0.65rem !important; 
            padding: 2px 6px !important; 
        }
    }