/* ========================================
   MODERN DESKTOP HEADER OPTIMIZATION
   Khusus tampilan desktop yang lebih modern & compact
   ======================================== */

/* Desktop only - min-width 768px */
@media (min-width: 768px) {

    /* HEADER CONTAINER - Premium Glassmorphism */
    .simple-header {
        background: rgba(10, 25, 47, 0.94) !important;
        /* Premium Deep Navy Blue */
        backdrop-filter: blur(20px) saturate(180%) !important;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
        position: sticky;
        top: 0;
        z-index: 1000;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .header-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 24px !important;
        max-width: 1440px;
        margin: 0 auto;
        gap: 16px;
    }

    /* LOGO - Elegant Hover */
    .header-left .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #ffffff !important;
        /* White text */
        font-size: 16px !important;
        font-weight: 700;
        text-decoration: none;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .header-left .logo:hover {
        transform: scale(1.05);
        filter: drop-shadow(0 0 8px rgba(231, 76, 60, 0.2));
    }

    .header-left .logo .logo-icon {
        width: 26px !important;
        height: 26px !important;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    }

    /* NAVIGATION - Premium Spacing */
    .main-nav {
        display: flex;
        gap: 8px !important;
        align-items: center;
    }

    /* NAV LINKS - Liquid Underline & Pill Effect */
    .nav-link {
        display: flex;
        align-items: center;
        gap: 6px !important;
        padding: 6px 14px !important;
        color: #ffffff !important;
        /* White text */
        text-decoration: none;
        border-radius: 20px;
        /* Pill shape */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 13px !important;
        font-weight: 500;
        white-space: nowrap;
        position: relative;
        background: transparent;
        overflow: hidden;
    }

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: #3498db;
        /* Bright Blue Accents */
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }

    .nav-link:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
        transform: translateY(-2px);
    }

    .nav-link:hover::after {
        width: 60%;
    }

    .nav-link i {
        font-size: 14px !important;
        transition: transform 0.3s ease;
        color: #ffffff !important;
    }

    .nav-link:hover i {
        transform: translateY(-1px) scale(1.1);
        color: #3498db !important;
    }

    /* USER INFO SECTION - Premium Card Stylings */
    .header-right {
        background: rgba(0, 0, 0, 0.02);
        padding: 4px 16px;
        border-radius: 14px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.01);
    }

    .user-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        color: #ffffff !important;
        font-size: 11px !important;
        line-height: 1.2;
    }

    .user-info span:first-child {
        font-weight: 600;
        letter-spacing: 0.3px;
        color: #ffffff !important;
    }

    .user-info .church {
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 9px !important;
        opacity: 0.9;
    }

    /* DROPDOWN BUTTON - Compact with margin */
    .dropdown-btn {
        display: flex;
        align-items: center;
        gap: 5px !important;
        padding: 5px 10px !important;
        margin-left: 8px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #ffffff !important;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 12px !important;
        font-weight: 500;
    }

    .dropdown-btn i {
        font-size: 13px !important;
        color: #ffffff !important;
    }

    .dropdown-btn:hover {
        background: rgba(52, 152, 219, 0.15);
        border-color: rgba(52, 152, 219, 0.3);
        transform: translateY(-1px);
        color: #ffffff !important;
    }

    /* Badge - Premium Glow */
    .nav-link .badge {
        background: linear-gradient(135deg, #3498db, #2980b9);
        color: white;
        padding: 2px 6px !important;
        border-radius: 10px;
        font-size: 10px !important;
        font-weight: 800;
        margin-left: 4px;
        box-shadow: 0 0 10px rgba(52, 152, 219, 0.4);
        animation: pulse-badge 2s infinite;
    }

    @keyframes pulse-badge {
        0% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.6);
        }

        70% {
            transform: scale(1.05);
            box-shadow: 0 0 0 10px rgba(52, 152, 219, 0);
        }

        100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
        }
    }

    /* DROPDOWN CONTENT - Deep Blue Theme */
    .dropdown-content {
        top: calc(100% + 10px);
        background: rgba(10, 25, 47, 0.98);
        /* Deep Navy for dropdown */
        backdrop-filter: blur(25px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        padding: 8px;
        min-width: 230px;
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
        transform-origin: top right;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px) scale(0.95);
    }

    .dropdown-content.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .dropdown-content a {
        padding: 10px 16px !important;
        font-size: 13px !important;
        gap: 12px;
        color: #ffffff !important;
        border-radius: 8px;
        transition: all 0.2s ease;
    }

    .dropdown-content a:hover {
        background: rgba(52, 152, 219, 0.15) !important;
        color: #ffffff !important;
        padding-left: 20px !important;
        /* Slight slide on hover */
    }

    .dropdown-content a i {
        font-size: 14px !important;
        width: 18px;
        text-align: center;
        color: #3498db;
        /* Blue Icons */
    }

    /* Hide hamburger on desktop */
    .hamburger {
        display: none !important;
    }

    /* Subtle animation on load */
    @keyframes slideDown {
        from {
            transform: translateY(-10px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .simple-header {
        animation: slideDown 0.3s ease-out;
    }

    /* Modern scrollbar for nav if needed */
    .header-center::-webkit-scrollbar {
        height: 4px;
    }

    .header-center::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 2px;
    }

    .header-center::-webkit-scrollbar-thumb {
        background: rgba(26, 84, 144, 0.3);
        border-radius: 2px;
    }

    .header-center::-webkit-scrollbar-thumb:hover {
        background: rgba(26, 84, 144, 0.5);
    }
}

/* Extra optimization for larger screens */
@media (min-width: 1200px) {
    .main-nav {
        gap: 6px !important;
    }

    .nav-link {
        padding: 6px 11px !important;
        font-size: 13px !important;
    }
}