/* ========================================
   Mobile Header Only - Optimized & Compact
   Load at: max-width 992px
======================================== */

/* Body padding untuk fixed header - hanya untuk non-homepage */
body {
    padding-top: 80px !important;
}

/* Hapus padding untuk homepage karena hero slider menyatu dengan header */
body.home {
    padding-top: 0 !important;
}

/* Site Header - Glass Effect (Default/Homepage) */
.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
    transition: all 0.3s ease !important;
}

/* Homepage: Transparent Header (no glass) */
body.home .site-header:not(.scrolled) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Homepage: Transparent Main Nav (no glass) */
body.home .site-header:not(.scrolled) .main-nav {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Homepage: White Logo & Light Elements */
body.home .site-header:not(.scrolled) .logo-dark {
    opacity: 0 !important;
    visibility: hidden !important;
}

body.home .site-header:not(.scrolled) .logo-white {
    opacity: 1 !important;
    visibility: visible !important;
}

body.home .site-header:not(.scrolled) .site-logo-text {
    color: var(--white) !important;
}

body.home .site-header:not(.scrolled) .mobile-menu-toggle,
body:not(.home) .site-header:not(.scrolled) .mobile-menu-toggle {
    background: transparent !important;
    border: none !important;
}

body.home .site-header:not(.scrolled) .mobile-menu-toggle span,
body:not(.home) .site-header:not(.scrolled) .mobile-menu-toggle span {
    background-color: var(--white) !important;
}

/* Non-Homepage: White Logo when Transparent */
body:not(.home) .site-header:not(.scrolled) .logo-dark {
    opacity: 0 !important;
    visibility: hidden !important;
}

body:not(.home) .site-header:not(.scrolled) .logo-white {
    opacity: 1 !important;
    visibility: visible !important;
}

body:not(.home) .site-header:not(.scrolled) .site-logo-text {
    color: var(--white) !important;
}

/* Scrolled State - White Background for All Pages */
.site-header.scrolled {
    background: var(--white) !important;
    backdrop-filter: blur(18px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Hide Top Bar */
.top-bar {
    display: none !important;
}

/* Main Nav Container - Konsisten untuk semua halaman */
.main-nav {
    padding: 8px 0 !important;
    margin: 10px 16px !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 58px !important;
    max-height: 58px !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}



/* Scrolled Main Nav */
.site-header.scrolled .main-nav {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 0 !important;
    margin: 8px 12px !important;
    border-radius: 0 !important;
    min-height: 58px !important;
    max-height: 58px !important;
}

/* Non-Homepage Main Nav */
body:not(.home) .site-header:not(.scrolled) .main-nav {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Nav Inner - Clean Layout */
.main-nav-inner {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 6px !important;
    gap: 12px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
}

/* Logo Container */
.site-logo {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    max-width: 132px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex-shrink: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Logo Image */
.site-logo img,
.header-logo-img,
.custom-logo {
    width: auto !important;
    max-width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    object-fit: contain !important;
}

/* Logo Visibility - Default Dark */
.logo-dark {
    opacity: 1 !important;
    visibility: visible !important;
}

.logo-white {
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Scrolled State Logo - Always Dark */
.site-header.scrolled .logo-dark {
    opacity: 1 !important;
    visibility: visible !important;
}

.site-header.scrolled .logo-white {
    opacity: 0 !important;
    visibility: hidden !important;
}

.site-logo-text {
    color: var(--primary-maroon) !important;
    transition: color 0.3s ease !important;
}

.site-header.scrolled .site-logo-text {
    color: var(--primary-maroon) !important;
}

/* Mobile Header Actions (Lang Switcher + Menu Toggle) */
.mobile-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
}

/* ========================================
   Compact Mobile Language Switcher
======================================== */
.mobile-lang-dropdown {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

.mobile-lang-current {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 44px !important;
    padding: 0 6px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: all 0.25s ease !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Transparent State (Default/Homepage) */
body.home .site-header:not(.scrolled) .mobile-lang-current,
body:not(.home) .site-header:not(.scrolled) .mobile-lang-current {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Scrolled State */
.site-header.scrolled .mobile-lang-current {
    background: transparent !important;
    border: none !important;
    color: var(--charcoal, #1e293b) !important;
    box-shadow: none !important;
}

.mobile-lang-flag {
    display: flex !important;
    align-items: center !important;
}

.mobile-lang-flag img {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
    display: block !important;
}

.mobile-lang-code {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
}

.mobile-lang-chevron {
    font-size: 0.65rem !important;
    opacity: 0.75 !important;
    transition: transform 0.25s ease !important;
}

.mobile-lang-dropdown.open .mobile-lang-chevron {
    transform: rotate(180deg) !important;
}

/* Mobile Language Menu Dropdown */
.mobile-lang-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    min-width: 120px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 5px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(6px) scale(0.97) !important;
    transform-origin: top right !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mobile-lang-dropdown.open .mobile-lang-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

.mobile-lang-option {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-align: left !important;
}

.mobile-lang-opt-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
}

.mobile-lang-opt-left img {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.mobile-lang-option .check-icon {
    display: none !important;
    font-size: 0.72rem !important;
    color: var(--primary-maroon, #bd0808) !important;
}

.mobile-lang-option.active {
    background: rgba(189, 8, 8, 0.08) !important;
}

.mobile-lang-option.active .mobile-lang-opt-left {
    color: var(--primary-maroon, #bd0808) !important;
}

.mobile-lang-option.active .check-icon {
    display: inline-block !important;
}

.mobile-lang-option:hover {
    background: #f1f5f9 !important;
}

/* ========================================
   Hide GTranslate Floating Widget on Mobile
   (We use our own custom language switcher)
======================================== */
.gtranslate_wrapper,
.gt_float_switcher,
.gt_float_wrapper,
div[id^="gt-float"],
div[id^="gt_float"],
div[class*="gt_float"],
div[class*="gt-float"],
.gt-current-wrapper,
#gt-nvframe,
.goog-te-gadget,
.goog-te-gadget-simple,
.goog-te-gadget-icon,
.goog-te-combo,
.goog-logo-link,
a.goog-logo-link,
#google_translate_element,
#google_translate_element2,
.skiptranslate:not(body),
div.skiptranslate,
iframe.skiptranslate,
[id*="goog-gt"],
#goog-gt-tt,
.VIpgJd-ZVi9od-aZ2wEe-OiiCO,
.VIpgJd-ZVi9od-aZ2wEe-OiiCO-ti6hGc,
div[class*="VIpgJd-ZVi9od"],
div[class*="VIpgJd-ZVi9od-aZ2wEe"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    max-height: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    z-index: -1 !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    gap: 5px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* Scrolled State Toggle */
.site-header.scrolled .mobile-menu-toggle {
    background: transparent !important;
    border: none !important;
}

.site-header.scrolled .mobile-menu-toggle span {
    background-color: var(--charcoal) !important;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:active {
    background: transparent !important;
}

.mobile-menu-toggle span {
    width: 22px !important;
    height: 2.5px !important;
    border-radius: 2px !important;
    background-color: var(--charcoal) !important;
    transition: all 0.3s ease !important;
    transform-origin: center !important;
}

/* Hamburger to X Animation */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg) !important;
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg) !important;
}

/* Hide Desktop Elements */
.nav-menu,
.nav-cta {
    display: none !important;
}

/* ========================================
   Mobile Menu Overlay - Modern Clean Drawer
======================================== */
.mobile-menu-overlay {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 9998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.mobile-menu-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Mobile Menu Container */
.mobile-menu-container {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 88vw !important;
    max-width: 360px !important;
    height: 100% !important;
    background: #ffffff !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.12), -1px 0 0 rgba(0, 0, 0, 0.05) !important;
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
}

body.mobile-menu-open .site-header {
    z-index: 12000 !important;
}

body.mobile-menu-open .mobile-menu-container {
    height: 100dvh !important;
    max-height: 100dvh !important;
}

.mobile-menu-overlay.active .mobile-menu-container {
    right: 0 !important;
}

/* Mobile Menu Header */
.mobile-menu-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
}

.mobile-menu-logo {
    display: flex !important;
    align-items: center !important;
    max-height: 40px !important;
    max-width: 140px !important;
}

.mobile-menu-logo img {
    height: 34px !important;
    width: auto !important;
    max-width: 140px !important;
    object-fit: contain !important;
}

.mobile-menu-logo .mobile-logo-text {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--charcoal) !important;
}

.mobile-menu-logo .mobile-logo-text span {
    color: var(--primary-maroon) !important;
}

.mobile-menu-close {
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 0.95rem !important;
    color: #64748b !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mobile-menu-close:hover {
    background: #fee2e2 !important;
    border-color: #fecaca !important;
    color: var(--primary-maroon) !important;
    transform: rotate(90deg) !important;
}

/* Mobile Menu Navigation */
.mobile-menu-nav {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 14px 12px !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;
    overscroll-behavior: contain !important;
}

/* Custom Sleek Scrollbar */
.mobile-menu-nav::-webkit-scrollbar {
    width: 4px !important;
}

.mobile-menu-nav::-webkit-scrollbar-track {
    background: transparent !important;
}

.mobile-menu-nav::-webkit-scrollbar-thumb {
    background: #e2e8f0 !important;
    border-radius: 4px !important;
}

.mobile-nav-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.mobile-nav-menu li {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

.mobile-nav-menu > li > .mobile-menu-item-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

.mobile-nav-menu a {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    padding: 11px 14px !important;
    color: #334155 !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
    letter-spacing: -0.01em !important;
}

.mobile-nav-menu > li > .mobile-menu-item-wrapper:hover,
.mobile-nav-menu a:hover {
    background: #f8fafc !important;
    color: var(--primary-maroon) !important;
}

/* Active / Current Page State */
.mobile-nav-menu .current-menu-item > .mobile-menu-item-wrapper,
.mobile-nav-menu .current_page_item > .mobile-menu-item-wrapper {
    background: rgba(189, 8, 8, 0.07) !important;
}

.mobile-nav-menu .current-menu-item > .mobile-menu-item-wrapper > a,
.mobile-nav-menu .current_page_item > .mobile-menu-item-wrapper > a,
.mobile-nav-menu .current-menu-item > a,
.mobile-nav-menu .current_page_item > a {
    color: var(--primary-maroon) !important;
    font-weight: 600 !important;
}

.mobile-nav-menu .current-menu-item > .mobile-menu-item-wrapper::before,
.mobile-nav-menu .current_page_item > .mobile-menu-item-wrapper::before {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3.5px !important;
    height: 20px !important;
    background: var(--primary-maroon) !important;
    border-radius: 4px !important;
}

/* Mobile Submenu Toggle */
.mobile-submenu-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    margin-right: 6px !important;
    cursor: pointer !important;
    color: #94a3b8 !important;
    font-size: 0.8rem !important;
    transition: all 0.2s ease !important;
}

.mobile-submenu-toggle:hover {
    background: #f1f5f9 !important;
    color: #334155 !important;
}

.mobile-submenu-toggle i {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mobile-nav-menu li.submenu-open > .mobile-menu-item-wrapper .mobile-submenu-toggle {
    color: var(--primary-maroon) !important;
    background: #f1f5f9 !important;
}

.mobile-nav-menu li.submenu-open > .mobile-menu-item-wrapper .mobile-submenu-toggle i {
    transform: rotate(180deg) !important;
}

/* Mobile Submenu */
.mobile-nav-menu .sub-menu {
    background: transparent !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease !important;
    list-style: none !important;
    margin: 0 0 0 16px !important;
    padding: 0 0 0 10px !important;
    border-left: 2px solid #e2e8f0 !important;
}

.mobile-nav-menu li.submenu-open > .sub-menu {
    max-height: 500px !important;
    opacity: 1 !important;
    margin: 4px 0 6px 16px !important;
}

.mobile-nav-menu .sub-menu li {
    border: none !important;
    margin: 2px 0 !important;
}

.mobile-nav-menu .sub-menu a {
    padding: 9px 12px !important;
    font-size: 0.88rem !important;
    font-weight: 450 !important;
    color: #64748b !important;
    border-radius: 8px !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.mobile-nav-menu .sub-menu a::before {
    display: none !important;
}

.mobile-nav-menu .sub-menu a:hover,
.mobile-nav-menu .sub-menu .current-menu-item > a {
    color: var(--primary-maroon) !important;
    background: rgba(189, 8, 8, 0.05) !important;
    font-weight: 500 !important;
    transform: translateX(3px) !important;
}

/* ========================================
   GTranslate Language Switcher (Mobile Drawer)
======================================== */
.mobile-nav-menu li.menu-item-gtranslate {
    margin-top: 14px !important;
    padding: 12px 14px !important;
    background: #f8fafc !important;
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    display: block !important;
}

.mobile-nav-menu li.menu-item-gtranslate::before {
    content: 'PILIH BAHASA / LANGUAGE' !important;
    display: block !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
}

/* Hide redundant top toggle inside mobile drawer */
.mobile-nav-menu li.menu-item-gtranslate > a.gt-current-wrapper {
    display: none !important;
}

/* Mobile Language Buttons Container */
.mobile-nav-menu li.menu-item-gtranslate .dropdown-menu,
.mobile-nav-menu li.menu-item-gtranslate .sub-menu {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-left: none !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    list-style: none !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
}

.mobile-nav-menu li.menu-item-gtranslate .menu-item-gtranslate-child {
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.mobile-nav-menu li.menu-item-gtranslate .menu-item-gtranslate-child a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 9px 12px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    cursor: pointer !important;
    transform: none !important;
}

.mobile-nav-menu li.menu-item-gtranslate .menu-item-gtranslate-child a:hover {
    border-color: #cbd5e1 !important;
    background: #f1f5f9 !important;
    color: var(--charcoal) !important;
    transform: none !important;
}

.mobile-nav-menu li.menu-item-gtranslate .menu-item-gtranslate-child a.gt-current-lang {
    background: var(--primary-maroon, #bd0808) !important;
    border-color: var(--primary-maroon, #bd0808) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(189, 8, 8, 0.25) !important;
}

.mobile-nav-menu li.menu-item-gtranslate img {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* Mobile Menu Footer */

.mobile-menu-footer {
    padding: 14px 16px !important;
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

/* Mobile Menu CTA */
.mobile-menu-cta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.mobile-cta-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 12px !important;
    border-radius: 12px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.mobile-cta-call {
    background: linear-gradient(135deg, var(--primary-maroon, #bd0808) 0%, #9e0707 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(189, 8, 8, 0.2) !important;
}

.mobile-cta-call:hover,
.mobile-cta-call:active {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 14px rgba(189, 8, 8, 0.3) !important;
    color: #ffffff !important;
}

.mobile-cta-wa {
    background: #25D366 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(37, 211, 102, 0.2) !important;
}

.mobile-cta-wa:hover,
.mobile-cta-wa:active {
    background: #20bd5a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 14px rgba(37, 211, 102, 0.3) !important;
    color: #ffffff !important;
}

/* Fallback button compatibility */
.mobile-menu-cta .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 11px 14px !important;
    font-size: 0.88rem !important;
    border-radius: 12px !important;
}

/* Mobile Menu Info */
.mobile-menu-info {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    color: #64748b !important;
}

.mobile-info-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    font-size: 0.78rem !important;
    color: #64748b !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.mobile-info-item i {
    width: 16px !important;
    font-size: 0.85rem !important;
    text-align: center !important;
    color: var(--primary-maroon) !important;
    flex-shrink: 0 !important;
}

.mobile-info-item:hover {
    color: var(--primary-maroon) !important;
}

/* Admin Bar Compatibility */
.admin-bar .site-header {
    top: 32px !important;
}

.admin-bar body {
    padding-top: 112px !important;
}

.admin-bar .mobile-menu-overlay,
.admin-bar .mobile-menu-container {
    top: 0 !important;
    height: 100% !important;
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    body {
        padding-top: 72px !important;
    }
    
    /* Homepage: No padding karena hero menyatu */
    body.home {
        padding-top: 0 !important;
    }
    
    .admin-bar body {
        padding-top: 118px !important;
    }
    
    .admin-bar body.home {
        padding-top: 46px !important;
    }
    
    .admin-bar .site-header {
        top: 46px !important;
    }
    
    .main-nav {
        margin: 8px 12px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        border-radius: 12px !important;
    }
    
    .main-nav-inner {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding: 0 4px !important;
    }
    
    .site-logo {
        max-width: 108px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }
    
    .site-logo img,
    .header-logo-img,
    .custom-logo {
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
    }
    
    .mobile-menu-toggle {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 10px !important;
    }
    
    .mobile-menu-toggle span {
        width: 20px !important;
    }
    
    .mobile-menu-container {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 0 !important;
    }
}