/* ======================================================= GARSINDO — Global Styles (Bootstrap 5 companion) Author: you ✨ | Notes: gunakan variabel warna di :root ======================================================= */ :root { --ink: #111827; --steel: #374151; --bg-soft: #f8fafc; /* ============================== */ /* WARNA BARU ANDA */ /* ============================== */ /* Kuning Garsindo (Aksen Utama) */ --brand-yellow: #d6bd27; /* Biru Garsindo (Aksen Sekunder) */ --brand-blue: #28a5de; /* Turunan dari kuning Anda untuk background ikon */ --brand-yellow-soft: #f9f6e4; /* Biru tua profesional untuk Latar Belakang Gelap */ /* (Saya ambil dari warna badge Anda yg sudah ada) */ --brand-dark-blue: #0b1d38; } /* =================================== */ /* OVERRIDE BOOTSTRAP DENGAN WARNA */ /* =================================== */ /* Mengganti warna .text-warning default */ .text-warning { color: var(--brand-yellow) !important; } /* Mengganti warna .btn-warning default (Tombol CTA) */ .btn-warning { background-color: var(--brand-yellow); border-color: var(--brand-yellow); color: #000; /* Teks hitam di atas kuning */ } .btn-warning:hover { filter: brightness(0.95); background-color: var(--brand-yellow); border-color: var(--brand-yellow); color: #000; } /* Mengganti warna .btn-primary default (jika Anda pakai) */ .btn-primary { background-color: var(--brand-blue); border-color: var(--brand-blue); } .btn-primary:hover { background-color: var(--brand-blue); border-color: var(--brand-blue); filter: brightness(0.95); } /* Reset kecil & utilitas */ .object-fit-cover{ object-fit: cover; } img{ height: auto; } /* =============================== NAVBAR — Style B (white corporate) (REVISI & KONSOLIDASI) =============================== */ .pro-navbar{ /* TAMBAHKAN BARIS INI */ z-index: 9990; backdrop-filter: saturate(140%) blur(2px); /* Tambahkan 'background' ke transisi */ transition: background .25s ease, padding .2s ease, box-shadow .2s ease; border-bottom: 1px solid rgba(17,24,39,.06); } .pro-navbar .nav-link{ color: var(--ink); /* Default: teks gelap */ padding: .75rem .9rem; font-weight: 500; transition: color .2s ease, transform .2s ease; } .pro-navbar .nav-link:hover{ color: var(--brand-yellow); /* Default: hover kuning */ transform: translateY(-1px); } .pro-navbar .nav-link.active{ color: var(--brand-blue); } .pro-logo{ height: 48px; width: auto; object-fit: contain; /* Tambahkan 'filter' ke transisi */ transition: height .2s ease, filter .2s ease; filter: none; /* Default: logo berwarna */ } @media (max-width: 991.98px){ .pro-logo{ height: 44px; } } /* === 1. STATE: TRANSPARENT (DI ATAS HERO) === */ /* Style ini aktif saat .nav-hero ada & BELUM di-scroll */ html:not(.scrolled) .pro-navbar.nav-hero { background: transparent; box-shadow: none; border-bottom-color: rgba(255, 255, 255, 0.15); /* Garis bawah tipis putih */ } html:not(.scrolled) .pro-navbar.nav-hero .nav-link { color: rgba(255, 255, 255, 0.9); /* Teks putih transparan */ } /* * INI SOLUSINYA: * Style hover khusus saat navbar di atas hero (belum scroll) */ html:not(.scrolled) .pro-navbar.nav-hero .nav-link:hover, html:not(.scrolled) .pro-navbar.nav-hero .nav-link:focus { color: #ffffff; /* Teks putih solid saat di-hover */ transform: translateY(-1px); } html:not(.scrolled) .pro-navbar.nav-hero .pro-logo { filter: brightness(0) invert(1); /* Logo jadi putih */ } /* === 2. STATE: SCROLLED (NAVBAR PUTIH) === */ /* Style ini aktif saat mendapat kelas .scrolled */ html.scrolled .pro-navbar{ background: #ffffff; /* Ganti background jadi putih */ box-shadow: 0 6px 18px rgba(17,24,39,.06); border-bottom-color: rgba(17,24,39,.06); } html.scrolled .pro-logo{ height: 40px; /* Logo mengecil */ } /* Memastikan link kembali ke warna default (gelap) saat di-scroll */ html.scrolled .pro-navbar .nav-link { color: var(--ink); } /* Memastikan hover kembali ke warna default (kuning) saat di-scroll */ html.scrolled .pro-navbar .nav-link:hover { color: var(--brand-yellow); } /* Memastikan logo kembali normal (tidak putih) */ html.scrolled .pro-navbar .pro-logo { filter: none; } /* Tombol CTA di navbar */ .pro-cta{ border-radius: .6rem; padding: .55rem 1rem; } .pro-cta:hover{ filter: brightness(.95); } /* =================================================== 3. STATE: DROPDOWN OPEN (Perbaikan via JS) =================================================== */ /* Style ini akan aktif saat dropdown "Produk" dibuka */ .pro-navbar.menu-is-open { background: #ffffff !important; box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06); border-bottom-color: rgba(17, 24, 39, 0.06); } /* Paksa link jadi gelap saat menu terbuka */ .pro-navbar.menu-is-open .nav-link { color: var(--ink) !important; } /* Paksa hover link jadi kuning saat menu terbuka */ .pro-navbar.menu-is-open .nav-link:hover { color: var(--brand-yellow) !important; } /* Paksa logo jadi normal (berwarna) saat menu terbuka */ .pro-navbar.menu-is-open .pro-logo { filter: none !important; } /* ================================= HERO — Versi Carousel (Hero Slider) ================================= */ .hero-slide{ min-height: 72vh; background-size: cover; background-position: center; position: relative; } .hero-mask{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.35)); } .hero-content{ position: relative; z-index: 2; padding-top: 18vh; } @media (max-width: 991.98px){ .hero-slide{ min-height: 62vh; } .hero-content{ padding-top: 12vh; } } /* ========================= HERO — Versi Single Image (pakai jika butuh section .hero-landing) ========================= */ .hero-landing{ position: relative; min-height: 78vh; background: url('../images/macam22.png') center/cover no-repeat; overflow: hidden; } .hero-landing .container{ z-index: 2; } .hero-overlay{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.55) 100%), rgba(0,0,0,.1); z-index: 1; } @media (max-width: 991.98px){ .hero-landing{ min-height: 64vh; } .hero-landing h1{ font-size: 2rem; } .hero-landing .lead{ font-size: 1rem; } } /* Tombol umum */ .btn{ border-radius: .6rem; transition: transform .15s ease, filter .15s ease; } a.btn:hover{ transform: translateY(-1px); filter: brightness(.98); } .btn-outline-light:hover{ color: var(--ink) !important; } /* ========================= KATEGORI PRODUK (overlay) ========================= */ .cat-card{ position: relative; display: block; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px rgba(17,24,39,.06); } .cat-card img{ width: 100%; height: 240px; object-fit: cover; transition: transform .3s ease; } .cat-card:hover img{ transform: scale(1.05); } .cat-overlay{ position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.55)); display: flex; align-items: flex-end; padding: 14px; } .cat-title{ color: #fff; font-weight: 700; font-size: 1.15rem; } /* ========================= WHY-US / FEATURES ========================= */ .feature-card{ background: #fff; border: 1px solid rgba(17,24,39,.06); border-radius: 14px; padding: 22px 16px; transition: transform .15s ease, box-shadow .15s ease; } .feature-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(17,24,39,.08); } .icon-wrap { /* ...properti lain... */ background: var(--brand-yellow-soft); /* <-- WARNA BARU */ color: #b45309; /* ...properti lain... */ } /* ========================= CTA (gradient band) ========================= */ .bg-gradient-cta { background: var(--brand-dark-blue); /* ...properti lain... */ } /* ========================= BRANDS / PRINCIPALS ========================= */ .brand-card{ background: #fff; border: 1px solid rgba(17,24,39,.15); border-radius: 14px; padding: 28px 16px; display: grid; place-items: center; min-height: 120px; transition: transform .15s ease, box-shadow .15s ease; } .brand-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(17,24,39,.08); } .brand-logo{ max-height: 85px; width: auto; object-fit: contain; /* hapus grayscale agar tidak tampak pudar */ filter: none; transition: transform .15s ease, filter .15s ease; } .brand-card:hover .brand-logo{ transform: scale(1.05); } /* Badge “Authorized Dealer” */ .dealer-badge{ display: inline-flex; align-items: center; gap: .6rem; background: #0b1d38; color: #ffd54a; padding: .5rem .8rem; border-radius: .6rem; box-shadow: 0 6px 18px rgba(11,29,56,.18); border: 1px solid rgba(255,255,255,.08); } .dealer-badge .dealer-logo{ height: 30px; width: auto; object-fit: contain; } .dealer-badge .dealer-text{ font-weight: 700; letter-spacing: .3px; font-size: .95rem; } /* ========================= GALERI / THUMBNAILS ========================= */ .thumb-img{ width: 100px; height: 70px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 1px solid rgba(17,24,39,.1); transition: transform .15s ease, box-shadow .15s ease; } .thumb-img:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.08); } /* ========================= MEGA MENU (dropdown) ========================= */ .mega{ min-width: 620px; border-radius: 16px; } .mega-item{ display: block; padding: .75rem 1rem; border-radius: 10px; color: var(--ink); text-decoration: none; } .mega-item:hover{ background: var(--bg-soft); color: var(--brand-blue); } /* ========================= FLOATING WHATSAPP ========================= */ .floating-wa{ position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: grid; place-items: center; color: #fff; font-size: 24px; z-index: 1050; transition: transform .15s ease, filter .15s ease; } .floating-wa:hover{ transform: translateY(-2px); filter: brightness(.95); } /* Lini Produk (tanpa image) */ .product-line-card{ background:#fff; border:1px solid rgba(17,24,39,.08); border-radius:14px; padding:20px; transition:.15s ease; } .product-line-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(17,24,39,.08); } .pl-icon { /* ...properti lain... */ background: var(--brand-yellow-soft); /* <-- WARNA BARU */ color: #b45309; /* ...properti lain... */ } /* Solusi Industri (textual) */ .solution-card{ background:#fff; border:1px solid rgba(17,24,39,.08); border-radius:14px; padding:18px; transition:.15s ease; } .solution-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(17,24,39,.08); } .sc-badge{ display:inline-flex; align-items:center; gap:.3rem; font-weight:700; color:#111827; margin-bottom:6px; } /* === HERO VIDEO BACKGROUND === */ .hero-video-wrap { position: relative; min-height: 78vh; overflow: hidden; } .category-hero-wrap { position: relative; min-height: 90vh; /* ★ UBAH UKURAN TINGGI DI SINI (misal: 30vh, 45vh, atau 350px) */ overflow: hidden; } .hero-video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); z-index: 1; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35)); z-index: 2; } .hero-content { position: relative; z-index: 3; padding-top: 18vh; } @media (max-width: 991.98px){ .hero-video-wrap { min-height: 64vh; } .hero-content { padding-top: 12vh; } } /* === FLOATING ACTION BAR === */ .floating-action-bar { position: fixed; right: 20px; bottom: 100px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; } .fab-item { background: #ffcc00; color: #000; font-weight: 600; padding: 10px 14px; border-radius: 10px; text-align: center; font-size: 14px; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: 0.2s ease; } .fab-item:hover { transform: translateY(-3px); background: #ffd633; } .fab-item.backtotop { background: #004aad; /* warna biru elegan */ color: #fff; } .fab-item.backtotop:hover { background: #005eff; } /* Sidebar kategori */ .product-cat-list .list-group-item { border: 1px solid rgba(17,24,39,.08); color: #111827; font-weight: 600; } .product-cat-list .list-group-item + .list-group-item { margin-top: 6px; } .product-cat-list .list-group-item.active { background: var(--brand-dark-blue); color: #fff; border-color: var(--brand-dark-blue); } /* Tile sub-kategori ala XCMG */ .prod-tile{ display:block; border-radius:14px; overflow:hidden; position:relative; box-shadow:0 8px 24px rgba(17,24,39,.06); } .prod-tile img{ width:100%; height:200px; object-fit:cover; transition: transform .3s ease; } .prod-tile:hover img{ transform: scale(1.05); } .prod-caption{ position:absolute; left:0; right:0; bottom:0; padding:14px; background:linear-gradient(180deg, transparent, rgba(0,0,0,.65)); color:#fff; } .prod-caption .title{ font-weight:700; } .prod-caption .more{ font-size:.85rem; opacity:.9; } /* Hover-based mega menu */ .mega-parent:hover .dropdown-menu { display: block !important; } .mega-menu { display: none; /* hide by default, show only on hover */ animation-duration: .4s; } /* ========================= MEGA MENU (XCMG Style) ========================= */ /* Ganti padding default dropdown agar pas */ .pro-mega-menu .dropdown-menu { padding-top: 2rem !important; padding-bottom: 2.5rem !important; } /* Style untuk list navigasi di kiri */ .mega-nav-pills .nav-link { font-weight: 600; color: var(--ink); /* Warna teks default (gelap) */ border-radius: .5rem; padding: .6rem 1rem; margin-bottom: .25rem; border: 1px solid transparent; transition: background-color .2s ease, border-color .2s ease; } /* Style untuk item yang di-hover */ .mega-nav-pills .nav-link:hover { background-color: var(--bg-soft); /* Latar abu-abu lembut */ color: var(--steel); } /* Style untuk item yang AKTIF (seperti 'EXCAVATORS' di gambar) */ .mega-nav-pills .nav-link.active { background-color: var(--bg-soft); color: var(--brand-blue); /* Warna biru (sesuai :root) */ border-color: #e5e7eb; /* Garis border abu-abu */ } /* Style untuk item sub-kategori di kanan */ .mega-sub-item { transition: transform .2s ease, color .2s ease; } .mega-sub-item img { border: 1px solid #eee; } .mega-sub-item h6 { transition: color .2s ease; color: var(--ink); } .mega-sub-item:hover { transform: translateY(-2px); } .mega-sub-item:hover h6 { color: var(--brand-blue); } /* ========================= HERO BANNER - HALAMAN INTERNAL ========================= */ .page-hero-banner { position: relative; min-height: 40vh; /* Buat tingginya 40% dari layar */ background-size: cover; background-position: center; display: grid; place-items: center; text-align: center; color: #fff; } /* * Ini adalah 'overlay' gelap yang sama * dengan yang ada di hero video Anda */ .page-hero-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35)); z-index: 1; } /* * Ini adalah 'konten' (judul) yang * sama dengan hero video Anda */ .page-hero-banner .hero-content { position: relative; z-index: 2; padding-top: 5vh; /* Beri sedikit padding */ } /* Style judul agar sama persis */ .page-hero-banner .hero-content h1 { font-weight: 700; text-shadow: 0 3px 8px rgba(0,0,0,0.4); } /* =================================== */ /* XCMG CATEGORY PAGE STYLES */ /* =================================== */ /* 1. Banner Atas */ .xcmg-banner-wrap { padding-top: 10rem; padding-bottom: 10rem; background-size: cover; background-position: center; color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,0.3); } /* 2. Breadcrumb (Home > Products) */ .breadcrumb-xcmg .breadcrumb { margin-bottom: 0.5rem; } .breadcrumb-xcmg .breadcrumb-item { font-size: 0.9rem; } .breadcrumb-xcmg .breadcrumb-item a { color: #fff; text-decoration: none; opacity: 0.8; transition: opacity .2s ease; } .breadcrumb-xcmg .breadcrumb-item a:hover { opacity: 1; } .breadcrumb-xcmg .breadcrumb-item.active { color: #fff; opacity: 1; font-weight: 600; } .breadcrumb-xcmg .breadcrumb-item + .breadcrumb-item::before { color: #fff; /* Warna panah '>' */ opacity: 0.8; } /* 3. Tab Sub-Kategori (Crawler, Wheel, dll) */ .subcat-tabs-wrap { background-color: #f8f9fa; /* Latar abu-abu */ border-bottom: 1px solid #dee2e6; } .subcat-tabs { border-bottom: none; } .subcat-tabs .nav-item { margin-right: 1.5rem; } .subcat-tabs .nav-link { display: flex; flex-direction: column; align-items: center; padding: 1rem 0.5rem; border: none; border-bottom: 3px solid transparent; color: #495057; /* Warna teks tab */ font-weight: 600; font-size: 0.9rem; transition: border-color .2s ease, color .2s ease; } .subcat-tabs .nav-link .tab-icon { height: 30px; /* Atur tinggi ikon */ margin-bottom: 0.5rem; object-fit: contain; } .subcat-tabs .nav-link:hover { border-bottom-color: #007bff; /* Warna biru saat hover */ } .subcat-tabs .nav-link.active { color: #007bff; /* Warna biru untuk tab aktif */ border-bottom-color: #007bff; /* Garis bawah biru */ background: none; } /* =================================== */ /* XCMG FILTER & TAB FIXES */ /* =================================== */ /* 1. Mengatur Ikon Tab (Pengganti ) */ .subcat-tabs .nav-link .tab-icon { font-size: 2rem; /* Ukuran ikon */ margin-bottom: 0.5rem; line-height: 1; } /* 2. Style Sidebar Filter Baru */ .filter-search-form { position: relative; } .filter-search-form .form-control { border-radius: 0; border: none; background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; padding-right: 40px; font-size: 0.9rem; } .filter-search-form .btn { position: absolute; top: 0; right: 0; bottom: 0; color: #6c757d; } /* 3. Style Filter Group */ .filter-group-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; font-weight: 600; color: var(--ink); text-decoration: none; padding: 0.75rem 0; border-bottom: 1px solid #eee; } .filter-group-toggle .fa-chevron-down { transition: transform 0.2s ease; font-size: 0.8rem; } .filter-group-toggle[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); } .filter-group-body { padding: 0.5rem 0; } .filter-check-item { display: block; padding: 0.5rem 0.25rem; text-decoration: none; color: var(--steel); font-size: 0.95rem; border-radius: .25rem; transition: background-color 0.2s ease; } .filter-check-item:hover { background-color: #f8f9fa; } .filter-check-item.active { font-weight: 600; color: var(--brand-blue); background-color: #e7f1ff; } /* =================================== */ /* XCMG PRODUCT CARD STYLES */ /* =================================== */ .product-card-xcmg { background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; height: 100%; /* Penting untuk grid */ display: flex; flex-direction: column; transition: box-shadow 0.2s ease, transform 0.2s ease; } .product-card-xcmg:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.1); transform: translateY(-2px); } .product-card-xcmg .prod-img-link { display: block; padding: 1rem; background-color: #f8f8f8; /* Latar belakang abu-abu muda untuk gambar */ min-height: 180px; /* Tinggi minimum gambar */ display: flex; align-items: center; justify-content: center; } .product-card-xcmg .prod-img-link img { max-width: 100%; max-height: 160px; /* Batasi tinggi gambar */ object-fit: contain; } .product-card-xcmg .prod-body { padding: 1rem; flex-grow: 1; /* Agar body memenuhi sisa tinggi */ display: flex; flex-direction: column; } .product-card-xcmg .prod-title { font-size: 1.25rem; font-weight: 700; color: var(--ink); /* Mengambil warna dari variabel Anda */ margin-bottom: 0.75rem; text-align: center; } .product-card-xcmg .prod-specs { font-size: 0.85rem; color: #6c757d; margin-bottom: 1rem; flex-grow: 1; /* Agar specs mengisi ruang */ } .product-card-xcmg .prod-specs p { margin-bottom: 0.25rem; line-height: 1.4; } .product-card-xcmg .prod-specs p span { font-weight: 600; color: #343a40; } .product-card-xcmg .prod-actions { display: flex; align-items: center; padding-top: 1rem; border-top: 1px solid #eee; margin-top: auto; /* Dorong ke bawah */ } .product-card-xcmg .compare-checkbox .form-check-input { border-radius: 0; /* Kotak */ margin-right: 0.5rem; border-color: #ced4da; vertical-align: middle; } .product-card-xcmg .compare-checkbox .form-check-input:checked { background-color: var(--brand-blue); border-color: var(--brand-blue); } .product-card-xcmg .compare-checkbox { font-size: 0.9rem; color: #495057; padding-left: 0; /* Hapus padding default */ } .product-card-xcmg .prod-actions .btn { font-size: 0.9rem; padding: 0.4rem 1rem; border-radius: 4px; border-color: var(--brand-blue); color: var(--brand-blue); } .product-card-xcmg .prod-actions .btn:hover { background-color: var(--brand-blue); color: #fff; } /* =================================== */ /* PRODUCT DETAIL PAGE STYLES */ /* =================================== */ /* 1. Hero Section */ .product-hero-wrap .breadcrumb-xcmg { padding-top: 1rem; } .product-hero-wrap .breadcrumb-xcmg .breadcrumb-item a, .product-hero-wrap .breadcrumb-xcmg .breadcrumb-item + .breadcrumb-item::before { color: #6c757d; } .product-hero-wrap .breadcrumb-xcmg .breadcrumb-item.active { color: #212529; } .product-hero-image { max-height: 450px; object-fit: contain; } .prod-hero-specs { display: flex; gap: 1.5rem; border-top: 1px solid #eee; padding-top: 1rem; margin-top: 1rem; } .prod-hero-specs > div { display: flex; flex-direction: column; } .prod-hero-specs small { font-size: 0.85rem; color: #6c757d; } .prod-hero-specs strong { font-size: 1.25rem; font-weight: 700; color: var(--ink); } /* 2. Sticky Nav (Feature, Parameter, etc) */ .product-sticky-nav { background-color: #fff; border-bottom: 1px solid #dee2e6; z-index: 1020; /* Di bawah navbar utama */ } .product-sticky-nav .nav-link { font-weight: 600; color: #495057; padding: 1rem 1.25rem; border-bottom: 3px solid transparent; } .product-sticky-nav .nav-link:hover { color: var(--brand-blue); } .product-sticky-nav .nav-link.active { color: var(--brand-blue); border-bottom-color: var(--brand-blue); } /* 3. Content Sections */ .page-section { padding-top: 3.5rem; /* Beri jarak untuk sticky nav */ } .section-title { font-weight: 800; font-size: 1.8rem; margin-bottom: 1.5rem; border-bottom: 3px solid var(--brand-yellow); padding-bottom: 0.5rem; display: inline-block; } .spec-table { font-size: 0.95rem; } .spec-table td:first-child { font-weight: 600; background-color: #f8f9fa; width: 40%; } @media (min-width: 992px) { .col-lg-2-4 { flex: 0 0 auto; width: 20%; /* 100% / 5 = 20% */ } } .brand-card { border: 1px solid #eee; border-radius: 8px; padding: 15px; /* Tambah padding agar logo tidak mepet */ height: 120px; /* Tinggi tetap untuk kartu */ display: flex; align-items: center; /* Logo di tengah vertikal */ justify-content: center; /* Logo di tengah horizontal */ background-color: #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.05); transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .brand-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); } .brand-logo { max-width: 100%; /* Pastikan logo tidak lebih lebar dari kartu */ max-height: 90px; /* Batasi tinggi logo agar pas di dalam kartu */ width: auto; height: auto; object-fit: contain; /* Jaga rasio aspek logo */ } /* =================================== */ /* Google Maps Menjorok ke Kanan */ /* =================================== */ .map-container-right { position: relative; /* Penting untuk positioning anak elemen */ margin-right: calc(-100vw + 100%); /* Dorong ke kanan melewati container */ overflow: hidden; /* Sembunyikan jika ada bagian peta yang menjorok keluar */ } /* Pastikan iframe tetap rounded dan shadow, tapi width-nya 100% dari map-container-right */ .map-container-right iframe { width: 80%; height: 50px; /* Atau sesuaikan sesuai kebutuhan */ display: block; /* Hapus spasi default di bawah iframe */ } .tab-img-icon { width: 40px; /* Atur lebar gambar ikon */ height: 40px; /* Atur tinggi gambar ikon */ object-fit: contain; /* Pastikan gambar tidak terpotong */ margin-bottom: 5px; /* Sedikit jarak dengan teks */ transition: filter 0.2s ease-in-out; /* Efek transisi untuk warna */ } /* Mengubah warna gambar ikon saat tab TIDAK aktif (default: abu-abu) */ .nav-link:not(.active) .tab-img-icon { filter: grayscale(100%) brightness(0) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg); /* Membuat gambar jadi abu-abu gelap */ } /* Mengubah warna gambar ikon saat tab AKTIF (menjadi biru) */ .nav-link.active .tab-img-icon { filter: invert(14%) sepia(76%) saturate(2314%) hue-rotate(187deg) brightness(97%) contrast(88%); /* Membuat gambar jadi biru (#28a5de) */ }