/* ═══════════════════════════════════════════════════════════════
   MARINA BET — HEADER PREMIUM v2.0
   Glassmorphism · Emerald-Cyberpunk · Micro-animations
═══════════════════════════════════════════════════════════════ */

/* ── Temel Header Çerçevesi ── */
.header {
    background: rgba(3, 8, 10, 0.97) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    border-bottom: 1px solid rgba(16, 158, 202, 0.18) !important;
    box-shadow: 0 1px 0 rgba(16, 158, 202,0.06), 0 4px 32px rgba(0,0,0,0.6) !important;
}



/* ── Top Bar ── */
.header-top {
    display: flex !important;
    align-items: center !important;
    padding: 0 24px !important;
    gap: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    height: 68px !important;
}

/* ── Menu Toggle ── */
.menu-toggle {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 42px !important;
    height: 42px !important;
    transition: opacity 0.2s ease !important;
}
.menu-toggle:hover {
    opacity: 0.7 !important;
}
.menu-toggle:active {
    opacity: 0.5 !important;
}
.menu-toggle svg line {
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
    transform-box: fill-box !important;
    transform-origin: center !important;
}
.menu-toggle:hover svg line:nth-child(1) {
    transform: translateX(4px) !important;
}
.menu-toggle:hover svg line:nth-child(3) {
    transform: translateX(-4px) !important;
}


/* ── Logo ── */
.logo {
    text-decoration: none !important;
    margin-right: 20px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
}
.logo img {
    display: block !important;
    height: 52px !important;
    max-width: 200px !important;
    object-fit: contain !important;
}
.logo img[src=""],
.logo img:not([src]) {
    display: none !important;
}

/* ── Header Links Wrapper ── */
.header-links {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    margin-left: auto !important;
}

/* ── Toplink Butonları ── */
.header-toplink {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: rgba(255,255,255,0.45) !important;
    text-decoration: none !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 7px 13px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    border: 1px solid transparent !important;
    letter-spacing: 0.2px !important;
}
.header-toplink:hover {
    color: #1C87B7 !important;
    background: rgba(16, 158, 202,0.08) !important;
    border-color: rgba(16, 158, 202,0.2) !important;
}

/* Canlı nokta */
.live-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #1C87B7 !important;
    box-shadow: 0 0 6px #1C87B7 !important;
    animation: pulse-em 1.4s ease-in-out infinite !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}
@keyframes pulse-em {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.45; transform: scale(0.65); }
}

.toplink-dot, .toplink-icon {
    display: flex !important;
    align-items: center !important;
}
.tv-icon { color: rgba(16, 158, 202,0.7) !important; }

/* Divider */
.header-links-divider {
    width: 1px !important;
    height: 22px !important;
    background: rgba(255,255,255,0.08) !important;
    margin: 0 6px !important;
    flex-shrink: 0 !important;
}

/* ── Auth Butonları ── */
.header-auth-btns {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: 4px !important;
}

.btn-login {
    background: transparent !important;
    border: 1px solid rgba(16, 158, 202,0.3) !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    height: 40px !important;
    min-width: 84px !important;
    padding: 0 18px !important;
    border-radius: 9px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    letter-spacing: 0.2px !important;
}
.btn-login:hover {
    background: rgba(16, 158, 202,0.1) !important;
    border-color: rgba(16, 158, 202,0.55) !important;
    color: #1C87B7 !important;
    box-shadow: 0 0 12px rgba(16, 158, 202,0.15) !important;
}

.btn-register {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #1C87B7 0%, #2970A3 100%) !important;
    color: #020e14 !important;
    border: none !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    height: 40px !important;
    min-width: 96px !important;
    padding: 0 20px !important;
    border-radius: 9px !important;
    transition: all 0.22s ease !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 12px rgba(16, 158, 202,0.4) !important;
    letter-spacing: 0.3px !important;
}
.btn-register::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    transition: left 0.45s ease;
}
.btn-register:hover::before { left: 160%; }
.btn-register:hover {
    background: linear-gradient(135deg, #109ECA 0%, #1C87B7 100%) !important;
    box-shadow: 0 4px 20px rgba(16, 158, 202,0.55) !important;
    transform: translateY(-1px) !important;
}

/* ── Settings Butonu ── */
.settings-btn {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: rgba(255,255,255,0.35) !important;
    cursor: pointer !important;
    padding: 8px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.22s ease !important;
    margin-left: 4px !important;
}
.settings-btn:hover {
    color: #1C87B7 !important;
    background: rgba(16, 158, 202,0.08) !important;
    border-color: rgba(16, 158, 202,0.2) !important;
}
.settings-btn:hover svg {
    transform: rotate(45deg) !important;
}
.settings-btn svg {
    transition: transform 0.3s ease !important;
}

/* ══════════════════════════════════════════════════════════════
   MAIN NAV — Premium Colorful Glow
══════════════════════════════════════════════════════════════ */
.main-nav {
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    gap: 1px !important;
    background: linear-gradient(180deg, rgba(4, 10, 12, 0.98) 0%, rgba(3, 7, 9, 0.99) 100%) !important;
    border-bottom: 1px solid rgba(16, 158, 202,0.1) !important;
    height: 50px !important;
    position: relative !important;
    scrollbar-width: none !important;
}
.main-nav::before, .main-nav::after { display: none !important; }
.main-nav::-webkit-scrollbar { display: none !important; }
.main-nav .nav-item, .main-nav .nav-icon {
    -webkit-user-drag: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Nav Item */
.nav-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 7px !important;
    color: rgba(255,255,255,0.38) !important;
    text-decoration: none !important;
    padding: 0 11px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    height: 50px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    transition: color 0.2s ease !important;
}

/* Alt renkli çizgi */
.nav-item::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 2px !important;
    border-radius: 2px 2px 0 0 !important;
    background: var(--nav-item-color, #1C87B7) !important;
    box-shadow: 0 0 8px var(--nav-item-color, #1C87B7) !important;
    transition: width 0.28s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.nav-item::after { display: none !important; }

.nav-item:hover { color: rgba(255,255,255,0.82) !important; }
.nav-item:hover::before { width: 55% !important; }
.nav-item.active { color: #fff !important; }
.nav-item.active::before { width: 75% !important; }

/* Nav Icon */
.nav-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    transition: all 0.22s ease !important;
    opacity: 0.65 !important;
    border: none !important;
}
.nav-icon svg {
    width: 13px !important;
    height: 13px !important;
    color: #fff !important;
    fill: #fff !important;
    transition: all 0.22s ease !important;
}

/* Hover glow */
.nav-item:hover .nav-icon {
    opacity: 1 !important;
    transform: scale(1.12) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
    filter: brightness(1.2) saturate(1.3) !important;
}

/* Aktif halo */
.nav-item.active .nav-icon {
    opacity: 1 !important;
    transform: scale(1.06) !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 2px 14px rgba(0,0,0,0.6) !important;
    filter: brightness(1.25) saturate(1.4) !important;
}
.nav-item.active .nav-icon svg {
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.5)) !important;
}

/* Arka plan glow halo */
.nav-icon::after {
    content: '' !important;
    position: absolute !important;
    inset: -5px !important;
    border-radius: 12px !important;
    opacity: 0 !important;
    background: inherit !important;
    filter: blur(8px) !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
    z-index: -1 !important;
}
.nav-item.active .nav-icon::after { opacity: 0.3 !important; }
.nav-item:hover  .nav-icon::after { opacity: 0.18 !important; }

.dropdown-arrow { display: none !important; }