/**
 * Header Styles - Enhanced with Green Professional Design
 * Perbaikan: Color hijau profesional, text size lebih besar
 */

/* Header Main Styles - GREEN GRADIENT BACKGROUND */
.landing-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    /* GREEN GRADIENT BACKGROUND - Professional Hospital Theme */
    background: linear-gradient(135deg, #065f46 0%, #047857 50%, #059669 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: all 0.3s ease;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding: 0.95rem 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.landing-header[data-kt-sticky="on"],
.landing-header.scrolled {
    background: linear-gradient(135deg, #047857 0%, #059669 50%, #10b981 100%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding: 0.75rem 0;
}

/* ===== LOGO CONTAINER ===== */
/* Cap max-width desktop agar menu tidak terhimpit */
.landing-header .d-flex.align-items-center.flex-grow-1.flex-lg-grow-0 {
    max-width: 320px;
    /* default: cukup untuk logo + text 14-inch */
    min-width: 0;
    flex-shrink: 1;
}

@media (min-width: 1441px) {
    .landing-header .d-flex.align-items-center.flex-grow-1.flex-lg-grow-0 {
        max-width: 380px;
    }
}

/* ===== LOGO IMAGE ===== */
.logo-default {
    height: 46px;
    width: auto;
    flex-shrink: 0;
    transition: height 0.3s ease;
    filter: brightness(1.1);
}

.landing-header[data-kt-sticky="on"] .logo-default,
.landing-header.scrolled .logo-default {
    height: 40px;
}

/* ===== LOGO TEXT ===== */
/* Tidak pakai background — header sudah hijau solid, text putih cukup kontras */
.logo-text {
    margin-left: 0.75rem;
    flex: 1;
    min-width: 0;
}

.logo-title {
    /* clamp(min, preferred, max) — fluid scaling tanpa breakpoint manual */
    font-size: clamp(0.85rem, 1.4vw, 1.15rem);
    font-weight: 700;
    color: #ffffff !important;
    margin-bottom: 0;
    line-height: 1.25;
    /* Wrap max 2 baris — lebih baik dari terpotong ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.logo-subtitle {
    font-size: clamp(0.68rem, 1vw, 0.8rem);
    color: #d1fae5 !important;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
}

/* Menu Styles - BIGGER TEXT SIZE */
.menu {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.menu-item {
    position: relative;
}

.menu-link {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 1.05rem;
    color: #ffffff !important;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 0.85rem 1.15rem;
    white-space: nowrap;
}

.menu-link:hover,
.menu-link.active {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.menu-link i {
    transition: transform 0.3s ease;
    color: #d1fae5 !important;
}

.menu-item:hover .menu-link i {
    transform: rotate(180deg);
}

/* Dropdown Menu Styles - White Background */
.menu-sub {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 320px;
    background: white !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    /* FIX: pisahkan transition — visibility ditunda 0.25s (tunggu opacity selesai)
       sehingga elemen tetap pointer-events selama animasi tutup berlangsung */
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
    z-index: 1060;
}

/* FIX: Jembatan transparan untuk menutup gap 0.5rem antara trigger dan dropdown.
   Tanpa ini, kursor yang melewati gap menyebabkan mouseleave pada parent. */
.menu-sub::before {
    content: '';
    position: absolute;
    top: -0.6rem;
    left: 0;
    right: 0;
    height: 0.6rem;
}

/* Direct child only — mencegah semua nested sub ikut tampil */
.menu-item:hover>.menu-sub,
.menu-item.show>.menu-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    /* Saat TAMPIL: visibility langsung visible (delay 0s) */
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}

/* =============================================
   NESTED FLYOUT MENU (e.g. Struktur Organisasi)
   ============================================= */

/* Flyout muncul ke KANAN parent item.
   FIX: initial transform pakai translateX (bukan translateY) */
.menu-sub .menu-item>.menu-sub {
    top: -0.5rem;
    left: 100%;
    transform: translateX(-8px);
    min-width: 230px;
    /* Override transition dari parent: flyout tidak butuh vertical slide */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

/* FIX: Jembatan horizontal untuk flyout — tutup gap antara item dan flyout */
.menu-sub .menu-item>.menu-sub::before {
    content: '';
    position: absolute;
    top: 0;
    left: -0.6rem;
    width: 0.6rem;
    height: 100%;
}

/* Show nested flyout */
.menu-sub .menu-item:hover>.menu-sub,
.menu-sub .menu-item.show>.menu-sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

/* Flip ke kiri jika layar sempit (< 1300px) */
@media (max-width: 1299px) {
    .menu-sub .menu-item>.menu-sub {
        left: auto;
        right: 100%;
        transform: translateX(8px);
    }

    /* Override jembatan: pindah ke kanan */
    .menu-sub .menu-item>.menu-sub::before {
        left: auto;
        right: -0.6rem;
    }

    .menu-sub .menu-item:hover>.menu-sub,
    .menu-sub .menu-item.show>.menu-sub {
        transform: translateX(0);
    }
}

.menu-sub .menu-item {
    display: block;
    width: 100%;
}

.menu-sub .menu-link {
    padding: 1rem 1.25rem;
    border-radius: 0;
    display: flex;
    align-items: flex-start;
    transition: all 0.2s ease;
    color: #1f2937 !important;
    font-size: 1rem;
}

.menu-sub .menu-link:hover {
    background: #ecfdf5 !important;
    color: #059669 !important;
}

.menu-icon {
    margin-right: 0.75rem;
    font-size: 1.2rem;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #059669 !important;
}

.menu-title {
    flex: 1;
    font-weight: 600;
    font-size: 1rem;
    color: #1f2937 !important;
}

.menu-desc {
    font-size: 0.85rem;
    color: #6b7280 !important;
    margin-top: 0.25rem;
    font-weight: 400;
}

/* Search Styles - White on Green */
.search-container {
    position: relative;
}

#global-search {
    background: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    color: #1f2937 !important;
    font-weight: 500;
}

#global-search::placeholder {
    color: #6b7280 !important;
    opacity: 1;
}

#global-search:focus {
    border-color: #d97706 !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1) !important;
    outline: none;
}

/* Search Icon - Terlihat di background putih input */
.search-icon i {
    color: #065f46 !important;
    /* Hijau gelap - terlihat di background putih */
    transition: color 0.3s ease;
}

/* Search Icon saat focus - berubah emas */
#global-search:focus~.search-icon i {
    color: #d97706 !important;
    /* Emas/orange saat focus */
}

.search-results-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1060;
    display: none;
}

.search-results-dropdown.show {
    display: block;
}

.search-suggestion-item {
    display: flex;
    align-items: center;
    padding: 0.9rem 1.1rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f3f4f6;
    transition: all 0.2s ease;
    border-radius: 8px;
    margin: 2px 0;
}

.search-suggestion-item:hover,
.search-suggestion-item.active {
    background: rgba(14, 165, 233, 0.08);
    color: #0ea5e9;
    transform: translateX(4px);
}

.search-suggestion-item:last-child {
    border-bottom: none;
}

.search-loading,
.search-error,
.no-results {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.9rem;
}

.search-footer {
    padding: 0.9rem 1.1rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 12px 12px;
}

/* Toolbar Styles - Better Mobile Spacing */
.landing-header .d-flex.align-items-center.gap-3 {
    gap: 0.65rem;
    flex-shrink: 0;
}

/* Button Styles - Optimized Colors on Green Background */
.btn-primary,
.btn-danger {
    padding: 0.7rem 1.15rem;
    font-size: 0.95rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}

/* Icon Button Styles - White on Green */
.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
    flex-shrink: 0;
    border: none !important;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    transform: scale(1.08);
}

#kt_landing_menu_toggle {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

#kt_landing_menu_toggle:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* ── Mobile Drawer ──────────────────────────────────────────────────
   transform-based (bukan left) agar konsisten dengan Metronic.
   z-index: 1200 — di atas header (1050) dan backdrop (1190). */
#kt_drawer_navigation {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    transform: translateX(-100%);
    width: 320px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    background: #ffffff !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 1200 !important;
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.18) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    /* hanya clip horizontal, jangan clip vertical/scroll */
}

#kt_drawer_navigation.drawer-on {
    transform: translateX(0) !important;
}

/* ── Backdrop (dibuat dinamis oleh openMobileMenu) ──────────────────
   z-index: 1190 — di atas header (1050), di bawah drawer (1200). */
/* Backdrop: dinamis (dibuat/dihapus oleh JS) — visibility via opacity */
.drawer-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(6, 95, 70, 0.55) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    z-index: 1190 !important;
    /* opacity:1 saat elemen ADA di DOM (dicreate oleh JS) = visible by default */
    opacity: 1 !important;
    pointer-events: all !important;
    animation: drawerFadeIn 0.25s ease forwards !important;
}

@keyframes drawerFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── FIX "double menu": header turun di bawah backdrop saat drawer buka */
body.drawer-overlay .landing-header {
    z-index: 800 !important;
}

/* Drawer Header - Green Gradient */
#kt_drawer_navigation .p-5.border-bottom {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#kt_drawer_navigation .p-5.border-bottom .logo-title {
    color: #ffffff !important;
}

#kt_drawer_navigation .p-5.border-bottom .logo-subtitle {
    color: #d1fae5 !important;
}

#kt_drawer_navigation .p-5.border-bottom .btn-icon {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Mobile Menu Links */
#kt_drawer_menu .menu-link {
    padding: 1rem 1.25rem;
    font-size: 1rem;
    border-bottom: 1px solid #f3f4f6;
    color: #1f2937 !important;
    border-radius: 0.5rem;
    margin-bottom: 0.25rem;
    transition: all 0.2s ease;
}

#kt_drawer_menu .menu-link:hover {
    background: #f0fdf4 !important;
    color: #047857 !important;
    transform: translateX(3px);
}

#kt_drawer_menu .menu-icon {
    color: #059669 !important;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#kt_drawer_menu .menu-link:hover .menu-icon {
    color: #047857 !important;
    transform: scale(1.1);
}

/* Mobile Menu Title & Description */
#kt_drawer_menu .menu-title {
    flex: 1;
    min-width: 0;
}

#kt_drawer_menu .menu-title .fw-bold {
    display: block;
    font-size: 1rem;
    line-height: 1.4;
    color: #1f2937;
}

#kt_drawer_menu .menu-desc {
    font-size: 0.8rem;
    color: #6b7280 !important;
    line-height: 1.3;
    margin-top: 0.2rem;
}

/* Mobile Menu Sections */
#kt_drawer_menu .menu-section {
    padding: 0.75rem 0 0.5rem 0;
    margin-top: 0.5rem;
    border-top: 2px solid #e5e7eb;
}

#kt_drawer_menu .menu-section:first-of-type {
    border-top: none;
    margin-top: 0;
}

#kt_drawer_menu .menu-section .menu-text {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #6b7280 !important;
    padding: 0.25rem 1.25rem;
}

/* Mobile Menu Badge */
#kt_drawer_menu .menu-badge {
    margin-left: auto;
    flex-shrink: 0;
}

#kt_drawer_menu .badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    font-weight: 600;
}

/* Emergency Menu Item - Special Styling */
#kt_drawer_menu .bg-light-danger {
    background: #fef2f2 !important;
    border: 1px solid #fee2e2 !important;
}

#kt_drawer_menu .bg-light-danger:hover {
    background: #fecaca !important;
    border-color: #fca5a5 !important;
}

/* External Link Icon */
#kt_drawer_menu .fa-external-link-alt {
    margin-left: auto;
    opacity: 0.5;
}

/* Mobile Menu Icon Colors per Section */
#kt_drawer_menu .menu-item:has([href*="profile"]) .menu-icon i,
#kt_drawer_menu .menu-item:has([href*="about"]) .menu-icon i,
#kt_drawer_menu .menu-item:has([href*="vision"]) .menu-icon i,
#kt_drawer_menu .menu-item:has([href*="organization"]) .menu-icon i {
    color: #10b981 !important;
}

#kt_drawer_menu .menu-item:has([href*="doctor"]) .menu-icon i,
#kt_drawer_menu .menu-item:has([href*="department"]) .menu-icon i,
#kt_drawer_menu .menu-item:has([href*="facilit"]) .menu-icon i {
    color: #0ea5e9 !important;
}

#kt_drawer_menu .menu-item:has([href*="news"]) .menu-icon i,
#kt_drawer_menu .menu-item:has([href*="event"]) .menu-icon i,
#kt_drawer_menu .menu-item:has([href*="galler"]) .menu-icon i,
#kt_drawer_menu .menu-item:has([href*="inovasi"]) .menu-icon i {
    color: #f59e0b !important;
}

#kt_drawer_menu .menu-item:has([href*="ppid"]) .menu-icon i,
#kt_drawer_menu .menu-item:has([href*="diklat"]) .menu-icon i,
#kt_drawer_menu .menu-item:has([href*="yanblik"]) .menu-icon i,
#kt_drawer_menu .menu-item:has([href*="data"]) .menu-icon i {
    color: #3b82f6 !important;
}

#kt_drawer_menu .menu-item:has([href*="contact"]) .menu-icon i {
    color: #6b7280 !important;
}

#kt_drawer_menu .menu-item:has([href*="emergency"]) .menu-icon i {
    color: #ef4444 !important;
}

/* Mobile Search */
#mobile-search {
    width: 100%;
    padding: 0.85rem 1.1rem;
    font-size: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Badge Styles */
.badge {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    border-radius: 12px;
    font-weight: 600;
}

.badge-danger {
    background: #fef2f2;
    color: #dc2626;
}

.badge-circle {
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    background: #d97706 !important;
    color: #ffffff !important;
}

/* ============================================
   RESPONSIVE STYLES - ENHANCED MOBILE SUPPORT
   ============================================ */

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* 14-inch laptop (1200–1440px) — clamp() sudah handle font, hanya atur menu & btn */
@media (min-width: 1200px) and (max-width: 1440px) {
    .menu-link {
        font-size: 1rem;
        padding: 0.8rem 1rem;
    }

    .btn-primary,
    .btn-danger {
        padding: 0.65rem 1rem;
        font-size: 0.9rem;
    }
}

/* Large Desktop (>1440px) */
@media (min-width: 1441px) {
    .menu-link {
        font-size: 1.1rem;
        padding: 0.9rem 1.25rem;
    }

    .btn-primary,
    .btn-danger {
        padding: 0.75rem 1.4rem;
        font-size: 1rem;
    }
}

/* Tablet & Below */
@media (max-width: 991.98px) {
    .landing-header {
        padding: 0.75rem 0;
    }

    .landing-header .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Logo container full-width on mobile */
    .landing-header .d-flex.align-items-center.flex-grow-1.flex-lg-grow-0 {
        max-width: none;
    }

    .logo-default {
        height: 42px;
    }

    .menu-link {
        font-size: 1rem;
        padding: 0.8rem 1rem;
    }

    .menu-sub {
        min-width: 280px;
    }
}

/* Mobile Portrait & Landscape */
@media (max-width: 767.98px) {
    .landing-header {
        padding: 0.7rem 0;
    }

    .landing-header[data-kt-sticky="on"],
    .landing-header.scrolled {
        padding: 0.6rem 0;
    }

    .landing-header .container-fluid {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }

    .logo-default {
        height: 40px;
    }

    .landing-header[data-kt-sticky="on"] .logo-default,
    .landing-header.scrolled .logo-default {
        height: 36px;
    }

    .logo-text {
        margin-left: 0.6rem;
    }

    /* Sembunyikan subtitle mobile — beri ruang logo title */
    .logo-subtitle {
        display: none;
    }

    /* Button Adjustments */
    .landing-header .d-flex.align-items-center.gap-3 {
        gap: 0.5rem;
    }

    .btn-primary,
    .btn-danger {
        padding: 0.6rem 0.9rem;
        font-size: 0.88rem;
    }

    .btn-icon {
        width: 40px;
        height: 40px;
    }

    .btn-primary .d-none.d-sm-inline,
    .btn-danger .d-none.d-sm-inline {
        display: none !important;
    }

    #kt_drawer_menu .menu-link {
        padding: 0.95rem 1.15rem;
    }

    #kt_drawer_menu .menu-title .fw-bold {
        font-size: 0.95rem;
    }

    #kt_drawer_menu .menu-desc {
        font-size: 0.75rem;
    }

    #kt_drawer_menu .menu-section {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
    }

    #kt_drawer_menu .menu-section .menu-text {
        font-size: 0.7rem;
        padding: 0.25rem 1.15rem;
    }

    #kt_drawer_navigation {
        width: 310px;
        max-width: 88vw;
    }

    #kt_drawer_menu #mobile-search {
        font-size: 0.95rem;
        padding: 0.75rem 0.95rem 0.75rem 2.75rem;
    }
}

/* Small Mobile Devices */
@media (max-width: 575.98px) {
    .landing-header .container-fluid {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    /* Compact Logo */
    .logo-default {
        height: 38px;
    }

    .landing-header[data-kt-sticky="on"] .logo-default,
    .landing-header.scrolled .logo-default {
        height: 34px;
    }

    .logo-text {
        margin-left: 0.5rem;
    }

    /* clamp() sudah handle font - hanya hapus max-width constraint lama */

    /* Compact Buttons */
    .landing-header .d-flex.align-items-center.gap-3 {
        gap: 0.5rem;
    }

    .btn-primary,
    .btn-danger {
        padding: 0.55rem 0.85rem;
        font-size: 0.85rem;
        min-width: auto;
    }

    .btn-icon {
        width: 38px;
        height: 38px;
    }

    /* Drawer width optimization */
    #kt_drawer_navigation {
        width: 300px;
        max-width: 90vw;
    }

    /* Mobile menu text */
    #kt_drawer_menu .menu-link {
        padding: 0.85rem 1rem;
        font-size: 0.95rem;
    }

    #kt_drawer_menu .menu-title .fw-bold {
        font-size: 0.9rem;
    }

    #kt_drawer_menu .menu-desc {
        font-size: 0.72rem;
    }

    #kt_drawer_menu .menu-section .menu-text {
        font-size: 0.68rem;
        padding: 0.2rem 1rem;
    }

    #kt_drawer_menu .menu-icon {
        width: 28px;
    }

    #kt_drawer_menu .menu-icon i {
        font-size: 1.1rem;
    }

    /* Mobile Search */
    #kt_drawer_menu #mobile-search {
        font-size: 0.9rem;
        padding: 0.7rem 0.85rem 0.7rem 2.5rem;
    }

    /* Footer Buttons */
    #kt_drawer_navigation .p-4.border-top .btn {
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
    }

    #kt_drawer_navigation .p-4.border-top .fs-7 {
        font-size: 0.72rem !important;
    }
}

/* Extra Small Mobile (iPhone SE, etc) */
@media (max-width: 374.98px) {
    .landing-header .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .logo-default {
        height: 34px;
    }

    .logo-title {
        font-size: 0.85rem;
        max-width: 150px;
    }

    .btn-primary,
    .btn-danger {
        padding: 0.5rem 0.7rem;
        font-size: 0.8rem;
    }

    .btn-icon {
        width: 36px;
        height: 36px;
    }

    #kt_drawer_navigation {
        width: 280px;
    }

    /* Extra compact menu */
    #kt_drawer_menu .menu-link {
        padding: 0.75rem 0.875rem;
    }

    #kt_drawer_menu .menu-title .fw-bold {
        font-size: 0.85rem;
    }

    #kt_drawer_menu .menu-desc {
        font-size: 0.7rem;
    }

    #kt_drawer_menu .menu-icon {
        width: 26px;
    }

    #kt_drawer_menu .menu-icon i {
        font-size: 1rem;
    }

    #kt_drawer_menu .menu-section .menu-text {
        font-size: 0.65rem;
    }

    /* Footer adjustments */
    #kt_drawer_navigation .p-4.border-top {
        padding: 0.875rem !important;
    }

    #kt_drawer_navigation .p-4.border-top .btn {
        padding: 0.65rem 0.875rem;
        font-size: 0.85rem;
    }

    #kt_drawer_navigation .p-4.border-top .row {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
    }
}

/* Landscape Mobile Optimization */
@media (max-width: 991.98px) and (orientation: landscape) {
    .landing-header {
        padding: 0.5rem 0;
    }

    .logo-default {
        height: 36px;
    }

    .logo-title {
        font-size: 0.95rem;
    }

    .logo-subtitle {
        display: none;
    }
}

/* Focus States - Accessibility */
.menu-link:focus,
.btn:focus,
.search-suggestion-item:focus {
    outline: 2px solid #d1fae5;
    outline-offset: 2px;
}

/* Print Styles */
@media print {

    .landing-header,
    #kt_drawer_navigation,
    .drawer-backdrop {
        display: none !important;
    }
}

/* Reduced Motion - Accessibility */
@media (prefers-reduced-motion: reduce) {

    .landing-header,
    .menu-link,
    .menu-sub,
    .btn,
    .search-suggestion-item,
    #kt_drawer_navigation,
    .drawer-backdrop {
        transition: none !important;
        animation: none !important;
    }

    .menu-item:hover .menu-link i {
        transform: none !important;
    }

    .search-suggestion-item:hover {
        transform: none !important;
    }
}