/* ==========================================================================
   NovaPrime Global Theme & Navbar Styles (Dark & Light Mode + EN/TR Support)
   ========================================================================== */

/* Dark Mode Variables (Default) */
:root,
html[data-theme="dark"],
html.dark {
    --bg-page: #0a0a0e;
    --bg-muted: #111117;
    --bg-card: #14141e;
    --bg-card-hover: #1c1c28;
    --bg-elevated: #1e1e2d;
    --bg-input: #0f0f16;
    --border-color: #242434;
    --border-subtle: rgba(255, 255, 255, 0.07);
    --border-hover: rgba(129, 130, 248, 0.45);
    --primary: #8182f8;
    --primary-hover: #9697fb;
    --primary-rgb: 129, 130, 248;
    --text-main: #f3f3f8;
    --text-muted: #8e8ea2;
    --text-dim: #606075;
    --nav-bg: rgba(10, 10, 14, 0.85);
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    --header-border: rgba(255, 255, 255, 0.08);
}

/* Light Mode Variables (Beyaz Mod) */
html[data-theme="light"],
html.light {
    --bg-page: #f8fafc;
    --bg-muted: #f1f5f9;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --bg-elevated: #f1f5f9;
    --bg-input: #f8fafc;
    --border-color: #e2e8f0;
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-hover: rgba(99, 102, 241, 0.5);
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --primary-rgb: 99, 102, 241;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --text-dim: #94a3b8;
    --nav-bg: rgba(255, 255, 255, 0.88);
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    --header-border: rgba(0, 0, 0, 0.08);
}

/* Global Transitions */
body, header.site-header, .site-header, .modal-card, .market-card, .sub-banner-card {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ==========================================================================
   Full Standardized Navbar Layout (All Pages)
   ========================================================================== */
header.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: var(--nav-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--header-border);
}

.site-header .nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.site-header .brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-main);
    flex-shrink: 0;
}

.site-header .brand-logo img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 6px;
}

.site-header .brand-logo-text {
    font-family: 'Outfit', 'Inter', -apple-system, sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.5px;
}

.site-header .brand-logo-text span {
    color: var(--primary);
}

.site-header .nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header .nav-links li {
    list-style: none;
}

.site-header .nav-links a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    transition: color 0.2s ease;
    white-space: nowrap;
}

.site-header .nav-links a:hover,
.site-header .nav-links a.active {
    color: var(--text-main);
}

/* Mobile Hamburger Button */
.site-header .mobile-menu-btn {
    display: none;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 20px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
}

/* Mobile Drawer */
.site-header .mobile-nav-drawer {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    padding: 20px 24px;
    display: none;
    flex-direction: column;
    gap: 14px;
    z-index: 999;
    box-shadow: 0 16px 36px rgba(0,0,0,0.5);
}

.site-header .mobile-nav-drawer.open {
    display: flex;
}

.site-header .mobile-nav-drawer a {
    color: var(--text-main);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.site-header .mobile-nav-drawer a:last-child {
    border-bottom: none;
}

@media (max-width: 960px) {
    .site-header .nav-links {
        display: none !important;
    }
    .site-header .mobile-menu-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* Navbar Right Actions */
.global-nav-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* Pill Buttons (EN / Theme / Notif) */
.btn-nav-control,
.nav-pill-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    height: 36px;
    min-width: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    position: relative;
    text-decoration: none;
}

html[data-theme="light"] .btn-nav-control,
html[data-theme="light"] .nav-pill-btn {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn-nav-control:hover,
.nav-pill-btn:hover {
    color: var(--text-main);
    border-color: var(--primary);
    transform: translateY(-1px);
}

/* ==========================================================================
   GLOBAL NOTIFICATION DROPDOWN SYSTEM (Left of EN)
   ========================================================================== */
.global-notif-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.global-notif-btn {
    padding: 0 10px !important;
    position: relative;
}

.global-notif-btn i {
    font-size: 15px;
    color: var(--text-muted);
    transition: color 0.2s ease, transform 0.2s ease;
}

.global-notif-btn:hover i {
    color: var(--text-main);
    transform: rotate(12deg);
}

.global-notif-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef4444, #f43f5e);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    font-family: 'Inter', -apple-system, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
    border: 2px solid var(--bg-page);
    pointer-events: none;
    line-height: 1;
}

.global-notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 32px);
    background: #111119;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
    z-index: 10001;
    display: none;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: notifFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.global-notif-dropdown.show {
    display: flex;
}

@keyframes notifFadeIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.notif-dropdown-header {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.02);
}

.notif-header-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.notif-header-title i {
    color: var(--primary);
    font-size: 14px;
}

.notif-unread-count-pill {
    background: rgba(129, 130, 248, 0.15);
    color: var(--primary);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 700;
}

.btn-mark-all-read {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.btn-mark-all-read:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.notif-dropdown-body {
    max-height: 350px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.notif-dropdown-body::-webkit-scrollbar {
    width: 6px;
}
.notif-dropdown-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}

.notif-item {
    padding: 14px 18px;
    display: flex;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s ease;
    position: relative;
    text-align: left;
}

.notif-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.notif-item.is-unread {
    background: rgba(129, 130, 248, 0.06);
}

.notif-item.is-unread::after {
    content: '';
    position: absolute;
    top: 18px;
    right: 16px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
}

.notif-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(129, 130, 248, 0.12);
    border: 1px solid rgba(129, 130, 248, 0.25);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.notif-item-content {
    flex: 1;
    min-width: 0;
    padding-right: 14px;
}

.notif-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 3px;
    line-height: 1.35;
}

.notif-message {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
    word-break: break-word;
}

.notif-time {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 5px;
}

.notif-delete-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    padding: 4px;
}

.notif-item:hover .notif-delete-btn {
    opacity: 1;
}

.notif-delete-btn:hover {
    color: #ef4444;
}

.notif-empty-state {
    padding: 38px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.notif-empty-state i {
    font-size: 32px;
    color: var(--text-dim);
    margin-bottom: 12px;
    opacity: 0.6;
}

.notif-empty-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}

.notif-empty-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 250px;
}

.notif-dropdown-footer {
    padding: 10px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: center;
    background: rgba(255, 255, 255, 0.02);
}

.btn-clear-notifs {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease;
}

.btn-clear-notifs:hover {
    color: #ef4444;
}

/* Light Mode Overrides for Notifications */
html[data-theme="light"] .global-notif-dropdown {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .notif-dropdown-header,
html[data-theme="light"] .notif-dropdown-footer {
    background: #f8fafc;
    border-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .notif-item {
    border-color: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .notif-item:hover {
    background: #f8fafc;
}

html[data-theme="light"] .notif-item.is-unread {
    background: rgba(99, 102, 241, 0.06);
}

/* Smooth Scroll Target Offset for Anchors (#faq, #cs2-hile, etc.) */
html {
    scroll-behavior: smooth;
}

section[id], [id] {
    scroll-margin-top: 86px;
}

/* Logged Out Buttons (Foto 3) */
.nav-auth-logged-out {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.btn-nav-login-link {
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    padding: 8px 14px;
    border-radius: 8px;
    transition: color 0.2s ease;
}

.btn-nav-login-link:hover {
    color: var(--primary);
}

.btn-nav-register-btn {
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff !important;
    background: #8182f8;
    padding: 8px 20px;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 14px rgba(129, 130, 248, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-nav-register-btn:hover {
    background: #9697fb;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(129, 130, 248, 0.5);
}

/* Logged In Avatar (Foto 2) */
.nav-auth-logged-in {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-user-avatar-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-main);
    overflow: hidden;
    padding: 0;
    transition: all 0.2s ease;
}

.nav-user-avatar-btn:hover {
    border-color: var(--primary);
    box-shadow: 0 0 14px rgba(129, 130, 248, 0.35);
}

.nav-user-avatar-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-user-avatar-btn i {
    font-size: 16px;
    color: #94a3b8;
}

/* Sleek Dropdown (Hesabım) */
.global-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 210px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    display: none;
    flex-direction: column;
    z-index: 1000;
}

.global-user-dropdown.show {
    display: flex;
    animation: ddFadeIn 0.15s ease forwards;
}

@keyframes ddFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.global-dropdown-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main);
    padding: 8px 12px 10px 12px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 4px;
}

.global-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: 8px;
    background: transparent;
    border: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}

.global-dropdown-item i {
    width: 16px;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
}

.global-dropdown-item:hover {
    background: rgba(129, 130, 248, 0.12);
    color: var(--primary);
}

.global-dropdown-item:hover i {
    color: var(--primary);
}

.global-dropdown-item.danger-logout {
    color: #ef4444 !important;
    border-top: 1px solid var(--border-subtle);
    margin-top: 4px;
    padding-top: 10px;
}

.global-dropdown-item.danger-logout i {
    color: #ef4444 !important;
}

.global-dropdown-item.danger-logout:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ff6b6b !important;
}

/* Floating Chat Bubble Matching Reference Screenshot */
.floating-chat-bubble {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #8182f8;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    box-shadow: 0 8px 24px rgba(129, 130, 248, 0.45);
    cursor: pointer;
    z-index: 999;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-chat-bubble:hover {
    background: #9697fb;
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 12px 30px rgba(129, 130, 248, 0.6);
    color: #ffffff !important;
}

/* ==========================================================================
   CUSTOM NOVA PRIME MODALS & NOTIFICATIONS (NO BROWSER POPUPS / ZERO DEBUG)
   ========================================================================== */
.nova-custom-modal-backdrop {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(4, 5, 10, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
}

.nova-custom-modal-backdrop.show {
    opacity: 1;
    visibility: visible;
}

.nova-custom-modal-card {
    background: linear-gradient(145deg, #12131e, #0c0d16);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 20px;
    max-width: 440px;
    width: 100%;
    padding: 28px 24px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(139, 92, 246, 0.2);
    transform: scale(0.92) translateY(12px);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s;
    font-family: var(--font-main, 'Inter', -apple-system, sans-serif);
    text-align: center;
}

.nova-custom-modal-backdrop.show .nova-custom-modal-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.nova-modal-icon-wrapper {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    margin: 0 auto 18px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.nova-modal-icon-wrapper.danger {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #ef4444;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}

.nova-modal-icon-wrapper.warning {
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #f59e0b;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

.nova-modal-icon-wrapper.info {
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: #a78bfa;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}

.nova-modal-icon-wrapper.success {
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #10b981;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.nova-modal-title {
    font-family: var(--font-display, 'Outfit', 'Inter', sans-serif);
    font-size: 19px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px 0;
    letter-spacing: -0.3px;
}

.nova-modal-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.55;
    margin: 0 0 24px 0;
}

.nova-modal-btn-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nova-modal-btn {
    flex: 1;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.nova-modal-btn.cancel {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}

.nova-modal-btn.cancel:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    transform: translateY(-1px);
}

.nova-modal-btn.confirm-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

.nova-modal-btn.confirm-danger:hover {
    background: linear-gradient(135deg, #f87171, #ef4444);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.6);
}

.nova-modal-btn.confirm-primary {
    background: #8b5cf6;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.45);
}

.nova-modal-btn.confirm-primary:hover {
    background: #7c3aed;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.65);
}

/* CUSTOM FLOATING TOAST NOTIFICATION CONTAINER */
.nova-toast-host {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 10000000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 380px;
    width: calc(100% - 48px);
}

.nova-toast-item {
    pointer-events: auto;
    background: rgba(18, 19, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
    color: #ffffff;
    transform: translateX(110%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.nova-toast-item.show {
    transform: translateX(0);
    opacity: 1;
}

.nova-toast-item.toast-success {
    border-color: rgba(16, 185, 129, 0.4);
}

.nova-toast-item.toast-error {
    border-color: rgba(239, 68, 68, 0.4);
}

.nova-toast-item.toast-warning {
    border-color: rgba(245, 158, 11, 0.4);
}

.nova-toast-item.toast-info {
    border-color: rgba(139, 92, 246, 0.4);
}

.nova-toast-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.toast-success .nova-toast-icon { color: #10b981; }
.toast-error .nova-toast-icon { color: #ef4444; }
.toast-warning .nova-toast-icon { color: #f59e0b; }
.toast-info .nova-toast-icon { color: #a78bfa; }

.nova-toast-body {
    flex: 1;
    min-width: 0;
}

.nova-toast-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 3px;
}

.nova-toast-msg {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.45;
    word-break: break-word;
}

.nova-toast-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s;
}

.nova-toast-close:hover {
    color: #ffffff;
}

/* ==========================================================================
   NOVAPRIME PREMIUM POLISH LAYER
   Additive refinements shared by every page: scrollbar, focus rings,
   navbar motion and the floating support bubble. No layout changes.
   ========================================================================== */

/* --- Brand tinted text selection ---------------------------------------- */
::selection {
    background: rgba(var(--primary-rgb), 0.4);
    color: #ffffff;
}

html[data-theme="light"] ::selection,
html.light ::selection {
    color: #0f172a;
}

/* --- Brand tinted scrollbar --------------------------------------------- */
::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.75), rgba(var(--primary-rgb), 0.35));
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(var(--primary-rgb), 1), rgba(var(--primary-rgb), 0.6));
    background-clip: content-box;
}

/* Firefox and other engines without the ::-webkit-scrollbar pseudo: use the
   standard properties, otherwise Chromium would ignore the gradient above. */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--primary-rgb), 0.6) transparent;
    }
}

/* --- Keyboard accessibility: consistent focus ring ---------------------- */
:focus-visible {
    outline: 2px solid rgba(var(--primary-rgb), 0.85);
    outline-offset: 2px;
}

/* --- Navbar: animated link underline ------------------------------------ */
.site-header .nav-links a {
    position: relative;
}

.site-header .nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -7px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary), rgba(var(--primary-rgb), 0.15));
    transition: right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.site-header .nav-links a:hover::after {
    right: 0;
}

/* --- Navbar: logo + control button depth --------------------------------- */
.site-header .brand-logo img {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.site-header .brand-logo:hover img {
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.45);
}

.btn-nav-control i,
.nav-pill-btn i {
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.btn-nav-control:hover i,
.nav-pill-btn:hover i {
    color: var(--primary);
}

.btn-nav-control:hover,
.nav-pill-btn:hover {
    background: rgba(var(--primary-rgb), 0.12);
    box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.22);
}

html[data-theme="light"] .btn-nav-control:hover,
html[data-theme="light"] .nav-pill-btn:hover,
html.light .btn-nav-control:hover,
html.light .nav-pill-btn:hover {
    background: rgba(var(--primary-rgb), 0.1);
}

/* --- Reusable icon chip (available on every page) ------------------------ */
.nova-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 20px;
    color: var(--primary);
    background: linear-gradient(145deg, rgba(var(--primary-rgb), 0.22), rgba(var(--primary-rgb), 0.04));
    border: 1px solid rgba(var(--primary-rgb), 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(var(--primary-rgb), 0.16);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.nova-icon-chip:hover,
.nova-icon-chip.is-active {
    transform: translateY(-2px) scale(1.05);
    border-color: rgba(var(--primary-rgb), 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 32px rgba(var(--primary-rgb), 0.36);
}

/* --- Floating support bubble: glow ring pulse --------------------------- */
/* `a.` prefix so legacy copies in style.css (loaded after this file on some
   pages) cannot override the gradient background. */
a.floating-chat-bubble {
    background: linear-gradient(140deg, var(--primary), #6d6ef0);
    overflow: visible;
}

.floating-chat-bubble::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    animation: novaBubblePulse 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes novaBubblePulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.55); }
    70% { box-shadow: 0 0 0 16px rgba(var(--primary-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0); }
}

/* --- Motion safety ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .floating-chat-bubble::after,
    .btn-nav-control,
    .nav-pill-btn,
    .nova-icon-chip {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   NAVBAR DETAIL PASS — typography, brand lockup, auth buttons, control pills
   Selectors use `header.site-header` on purpose: pages also carry an inlined
   copy of the navbar CSS, and this makes the refinements win everywhere.
   ========================================================================== */

/* --- Header surface ----------------------------------------------------- */
header.site-header {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
}

header.site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 4%, rgba(129, 130, 248, 0.55) 50%, transparent 96%);
    pointer-events: none;
}

html[data-theme="light"] header.site-header,
html.light header.site-header {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}

/* --- Brand lockup ------------------------------------------------------- */
header.site-header .brand-logo {
    gap: 11px;
}

header.site-header .brand-logo-text {
    font-family: 'Outfit', 'Inter', -apple-system, sans-serif;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.7px;
    line-height: 1;
    color: #ffffff;
}

header.site-header .brand-logo-text span {
    color: #a5b4fc;
    text-shadow: 0 0 20px rgba(129, 130, 248, 0.55);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    header.site-header .brand-logo-text span {
        background: linear-gradient(102deg, #c7d2fe 0%, #8182f8 48%, #7c3aed 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: none;
        filter: drop-shadow(0 2px 14px rgba(129, 130, 248, 0.45));
    }
}

html[data-theme="light"] header.site-header .brand-logo-text,
html.light header.site-header .brand-logo-text {
    color: #0f172a;
}

/* --- Nav links ---------------------------------------------------------- */
header.site-header .nav-links a {
    font-family: 'Outfit', 'Inter', -apple-system, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.1px;
    color: var(--text-muted);
    padding: 6px 0;
    transition: color 0.2s ease;
}

header.site-header .nav-links a:hover,
header.site-header .nav-links a.active {
    color: #ffffff;
}

html[data-theme="light"] header.site-header .nav-links a:hover,
html[data-theme="light"] header.site-header .nav-links a.active,
html.light header.site-header .nav-links a:hover,
html.light header.site-header .nav-links a.active {
    color: #0f172a;
}

/* --- Auth buttons ------------------------------------------------------- */
header.site-header .btn-nav-login-link {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #c7c7d8;
    padding: 9px 14px;
    border-radius: 9px;
    transition: color 0.2s ease, background 0.2s ease;
}

header.site-header .btn-nav-login-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

header.site-header .btn-nav-register-btn {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.1px;
    padding: 10px 20px;
    border-radius: 10px;
    color: #ffffff !important;
    background: linear-gradient(135deg, #8f90ff 0%, #7475f5 55%, #6366f1 100%);
    box-shadow: 0 8px 22px rgba(129, 130, 248, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, filter 0.22s ease;
}

header.site-header .btn-nav-register-btn:hover {
    filter: brightness(1.07);
    transform: translateY(-1.5px);
    box-shadow: 0 12px 30px rgba(129, 130, 248, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

/* --- Control pills (bell / EN / theme) ---------------------------------- */
header.site-header .btn-nav-control,
header.site-header .nav-pill-btn {
    height: 38px;
    min-width: 38px;
    padding: 0 12px;
    border-radius: 10px;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #b9b9cd;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
}

header.site-header .btn-nav-control:hover,
header.site-header .nav-pill-btn:hover {
    color: #ffffff;
    border-color: rgba(129, 130, 248, 0.55);
    background: rgba(129, 130, 248, 0.14);
}

html[data-theme="light"] header.site-header .btn-nav-control,
html[data-theme="light"] header.site-header .nav-pill-btn,
html.light header.site-header .btn-nav-control,
html.light header.site-header .nav-pill-btn {
    color: #475569;
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
}

/* --- Avatar button ------------------------------------------------------ */
header.site-header #globalNavAvatarWrap {
    width: 38px;
    height: 38px;
    box-shadow: 0 0 0 1px rgba(129, 130, 248, 0.35), 0 6px 18px rgba(129, 130, 248, 0.25);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

header.site-header .nav-user-avatar-btn:hover #globalNavAvatarWrap {
    transform: scale(1.05);
    box-shadow: 0 0 0 2px rgba(129, 130, 248, 0.6), 0 8px 22px rgba(129, 130, 248, 0.4);
}

/* ==========================================================================
   NAVBAR REDESIGN V2 — premium glass bar, brand tile, pill navigation
   Every selector keeps the `header.site-header` prefix so these rules stay
   ahead of the per-page inlined navbar copies (index.html ships its own
   <style> block) without resorting to !important.
   ========================================================================== */

/* --- 1. Bar surface ----------------------------------------------------- */
header.site-header {
    background: linear-gradient(180deg, rgba(17, 17, 27, 0.93) 0%, rgba(9, 9, 14, 0.88) 100%);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 34px rgba(0, 0, 0, 0.5);
}

header.site-header .nav-inner {
    position: relative;
    height: 74px;
}

header.site-header .nav-inner > * {
    position: relative;
    z-index: 1;
}

/* Soft brand ambience on the left, clipped to the bar height. */
header.site-header .nav-inner::before {
    content: '';
    position: absolute;
    left: -80px;
    top: 0;
    bottom: 0;
    width: 380px;
    background: radial-gradient(60% 130% at 32% 50%, rgba(129, 130, 248, 0.20), transparent 72%);
    pointer-events: none;
    z-index: 0;
}

html[data-theme="light"] header.site-header,
html.light header.site-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
    border-bottom-color: rgba(15, 23, 42, 0.08);
    box-shadow: inset 0 1px 0 #ffffff, 0 8px 26px rgba(15, 23, 42, 0.07);
}

html[data-theme="light"] header.site-header .nav-inner::before,
html.light header.site-header .nav-inner::before { opacity: 0.45; }

/* --- 2. Brand lockup: gradient tile + wordmark -------------------------- */
header.site-header .brand-logo {
    gap: 12px;
    padding: 4px 8px 4px 4px;
    border-radius: 16px;
    transition: background 0.25s ease;
}

header.site-header .brand-logo:hover { background: rgba(255, 255, 255, 0.045); }

header.site-header .brand-logo > img,
header.site-header .brand-mark {
    width: 40px;
    height: 40px;
    padding: 7px;
    box-sizing: border-box;
    flex-shrink: 0;
    border-radius: 13px;
    display: inline-grid;
    place-items: center;
    object-fit: contain;
    background: linear-gradient(150deg, rgba(129, 130, 248, 0.32) 0%, rgba(129, 130, 248, 0.08) 55%, rgba(129, 130, 248, 0.03) 100%);
    border: 1px solid rgba(129, 130, 248, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 20px rgba(99, 102, 241, 0.22);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

header.site-header .brand-mark img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    box-shadow: none !important;
}

header.site-header .brand-logo:hover > img,
header.site-header .brand-logo:hover .brand-mark {
    transform: translateY(-1px) scale(1.06);
    border-color: rgba(129, 130, 248, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 26px rgba(99, 102, 241, 0.42);
}

/* Monogram fallback: only rendered when logo.png fails to load, so a broken
   image can never spill its alt text over the wordmark. */
header.site-header .brand-mark .brand-mark-fallback {
    display: none;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 900;
    font-style: normal;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 0 14px rgba(129, 130, 248, 0.75);
}

header.site-header .brand-mark.is-empty .brand-mark-fallback { display: block; }

header.site-header .brand-logo-text {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.8px;
}

html[data-theme="light"] header.site-header .brand-logo:hover,
html.light header.site-header .brand-logo:hover { background: rgba(99, 102, 241, 0.06); }

html[data-theme="light"] header.site-header .brand-mark .brand-mark-fallback,
html.light header.site-header .brand-mark .brand-mark-fallback { color: #4f46e5; text-shadow: none; }

/* --- 3. Nav links become pills ------------------------------------------ */
header.site-header .nav-links { gap: 3px; }

header.site-header .nav-links a {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 13px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.1px;
    color: var(--text-muted);
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

header.site-header .nav-links a:hover {
    color: #ffffff;
    background: rgba(129, 130, 248, 0.13);
}

header.site-header .nav-links a.active {
    color: #ffffff;
    background: rgba(129, 130, 248, 0.16);
    box-shadow: inset 0 0 0 1px rgba(129, 130, 248, 0.34);
}

/* The sliding underline is replaced by the pill background. */
header.site-header .nav-links a::after { display: none !important; }

html[data-theme="light"] header.site-header .nav-links a:hover,
html[data-theme="light"] header.site-header .nav-links a.active,
html.light header.site-header .nav-links a:hover,
html.light header.site-header .nav-links a.active {
    color: #0f172a;
    background: rgba(99, 102, 241, 0.1);
}

/* --- 4. Control dock (bell / EN / theme) -------------------------------- */
/* The dock never shrinks, otherwise its buttons wrap onto two lines once
   the bar gets tight (1025–1180px). Overflow belongs to the link row. */
header.site-header .global-nav-actions { gap: 9px; flex-shrink: 0; }

header.site-header .nav-auth-logged-out { flex-shrink: 0; }

header.site-header .btn-nav-control,
header.site-header .nav-pill-btn {
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    border-radius: 12px;
    color: #b9b9cd;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease,
                transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

header.site-header .btn-nav-control:hover,
header.site-header .nav-pill-btn:hover {
    color: #ffffff;
    background: rgba(129, 130, 248, 0.16);
    border-color: rgba(129, 130, 248, 0.55);
    transform: translateY(-1.5px);
    box-shadow: 0 8px 20px rgba(129, 130, 248, 0.24);
}

html[data-theme="light"] header.site-header .btn-nav-control,
html[data-theme="light"] header.site-header .nav-pill-btn,
html.light header.site-header .btn-nav-control,
html.light header.site-header .nav-pill-btn {
    color: #475569;
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
}

/* Badge ring instead of a page-coloured border so it works on any surface. */
header.site-header .global-notif-badge {
    top: -4px;
    right: -4px;
    border: none;
    box-shadow: 0 0 0 2px rgba(10, 10, 14, 0.92), 0 0 12px rgba(239, 68, 68, 0.75);
}

html[data-theme="light"] header.site-header .global-notif-badge,
html.light header.site-header .global-notif-badge {
    box-shadow: 0 0 0 2px #ffffff, 0 0 10px rgba(239, 68, 68, 0.5);
}

/* --- 5. Auth cluster ---------------------------------------------------- */
header.site-header .nav-auth-logged-out {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
    padding-left: 14px;
    position: relative;
}

header.site-header .nav-auth-logged-out::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}

header.site-header .btn-nav-login-link {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    color: #d5d5e4;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

header.site-header .btn-nav-login-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1.5px);
}

header.site-header .btn-nav-register-btn {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    color: #ffffff !important;
    background: linear-gradient(135deg, #9294ff 0%, #7a7bf6 52%, #6366f1 100%);
    border: none;
    box-shadow: 0 10px 24px rgba(129, 130, 248, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, filter 0.22s ease;
}

header.site-header .btn-nav-register-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(129, 130, 248, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

html[data-theme="light"] header.site-header .nav-auth-logged-out::before,
html.light header.site-header .nav-auth-logged-out::before {
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.14), transparent);
}

html[data-theme="light"] header.site-header .btn-nav-login-link,
html.light header.site-header .btn-nav-login-link {
    color: #334155;
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] header.site-header .btn-nav-login-link:hover,
html.light header.site-header .btn-nav-login-link:hover {
    color: #0f172a;
    border-color: rgba(79, 70, 229, 0.4);
}

/* --- 6. Mobile hamburger + drawer --------------------------------------- */
header.site-header .mobile-menu-btn {
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: #e8e8f4;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    font-size: 16px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

header.site-header .mobile-menu-btn:hover {
    color: #ffffff;
    background: rgba(129, 130, 248, 0.16);
    border-color: rgba(129, 130, 248, 0.55);
}

header.site-header .mobile-nav-drawer {
    top: 78px;
    left: 12px;
    right: 12px;
    padding: 12px;
    gap: 2px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(13, 13, 21, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.62);
}

header.site-header .mobile-nav-drawer a {
    padding: 13px 14px;
    border-radius: 12px;
    border-bottom: none;
    font-size: 14.5px;
    font-weight: 600;
    color: #d6d6e6;
    transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease;
}

header.site-header .mobile-nav-drawer a:hover {
    color: #ffffff;
    background: rgba(129, 130, 248, 0.15);
    padding-left: 20px;
}

html[data-theme="light"] header.site-header .mobile-menu-btn,
html.light header.site-header .mobile-menu-btn {
    color: #334155;
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] header.site-header .mobile-nav-drawer,
html.light header.site-header .mobile-nav-drawer {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] header.site-header .mobile-nav-drawer a,
html.light header.site-header .mobile-nav-drawer a { color: #334155; }

html[data-theme="light"] header.site-header .mobile-nav-drawer a:hover,
html.light header.site-header .mobile-nav-drawer a:hover {
    color: #0f172a;
    background: rgba(99, 102, 241, 0.1);
}

/* --- 7. Tablet / small-laptop pass: keep the row breathing -------------- */
@media (max-width: 1180px) {
    header.site-header .nav-links { gap: 1px; }
    header.site-header .nav-links a { padding: 0 9px; font-size: 13.5px; }
    header.site-header .global-nav-actions { gap: 7px; }
    header.site-header .btn-nav-register-btn { padding: 0 16px; }
}

/* --- 8. Compact phone pass ---------------------------------------------- */
@media (max-width: 640px) {
    header.site-header .nav-inner { height: 64px; }
    header.site-header .brand-logo { gap: 9px; padding: 0; border-radius: 0; }
    header.site-header .brand-logo > img,
    header.site-header .brand-mark { width: 34px; height: 34px; padding: 6px; border-radius: 11px; }
    header.site-header .brand-mark .brand-mark-fallback { font-size: 15px; }
    header.site-header .btn-nav-control,
    header.site-header .nav-pill-btn { height: 36px; min-width: 36px; border-radius: 11px; }
    header.site-header .btn-nav-login-link { height: 36px; padding: 0 10px; font-size: 13px; border-radius: 11px; }
    header.site-header .btn-nav-register-btn { height: 36px; padding: 0 13px; font-size: 13px; border-radius: 11px; }
    header.site-header .mobile-menu-btn { width: 36px; height: 36px; border-radius: 11px; }
    header.site-header .nav-auth-logged-out { padding-left: 10px; gap: 6px; margin-left: 0; }
    header.site-header .global-nav-actions { gap: 6px; }
    header.site-header .mobile-nav-drawer { top: 70px; }
}

/* --- Motion safety ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    header.site-header .brand-logo > img,
    header.site-header .brand-mark,
    header.site-header .nav-links a,
    header.site-header .btn-nav-control,
    header.site-header .nav-pill-btn,
    header.site-header .btn-nav-login-link,
    header.site-header .btn-nav-register-btn {
        transition: none !important;
    }
}

/* ==========================================================================
   FOOTER V3 — Destek / Kaynaklar / Hakkımızda / Yasal kolon düzeni
   index.html dışındaki (SSR) sayfaların footer'ı bu sınıfla hizalanır.
   ========================================================================== */
.np-footer-grid {
    display: grid;
    grid-template-columns: 1.35fr repeat(5, minmax(0, 1fr));
    gap: 36px;
    padding: 64px 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.np-footer-grid > div:not(:first-child) > h3 {
    margin: 0 0 18px;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
}

.np-footer-grid > div:not(:first-child) > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
}

.np-footer-grid > div:not(:first-child) > ul a {
    display: inline-block;
    color: var(--text-muted);
    text-decoration: none;
    line-height: 1.5;
    transition: color 0.15s ease, transform 0.15s ease;
}

/* SSR footer'larında Tailwind'in `space-y-3` marjı gap ile birleşip
   çift boşluk üretmesin diye liste öğesi marjları sıfırlanır. */
.np-footer-grid > div:not(:first-child) > ul > li {
    margin: 0 !important;
}

.np-footer-grid > div:not(:first-child) > ul a:hover {
    color: var(--primary);
    transform: translateX(2px);
}

.np-footer-grid > div:not(:first-child) > ul a::before {
    content: "\203A";
    display: inline-block;
    margin-right: 8px;
    color: var(--text-dim);
    font-weight: 700;
    transition: color 0.15s ease;
}

.np-footer-grid > div:not(:first-child) > ul a:hover::before {
    color: var(--primary);
}

@media (max-width: 1180px) {
    .np-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px;
    }

    .np-footer-grid > div:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .np-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px;
        padding: 48px 20px;
    }
}

/* ==========================================================================
   SİTE FOOTER (TÜM SAYFALAR) — index.html footer'ıyla birebir aynı görünüm
   Tüm sayfalar bu sınıf adlarını kullanır; tema koyu/açık fark etmeksizin
   footer marka rengini (koyu zemin) korur.
   ========================================================================== */
footer.site-footer {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #09090d;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #9494a8;
    font-family: 'Instrument Sans', 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* Sayfa-özel eski footer kurallarını (padding / arka plan) etkisiz bırakır */
footer.site-footer.site-footer {
    padding: 0;
    margin: 0;
    max-width: none;
}

footer.site-footer .footer-watermark-container {
    position: relative;
    margin: 0 auto;
    display: flex;
    height: 18vw;
    max-height: 260px;
    min-height: 120px;
    width: 100%;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
}

footer.site-footer .footer-watermark-text,
footer.site-footer .footer-watermark-glow {
    display: block;
    user-select: none;
    white-space: nowrap;
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    font-size: clamp(5.5rem, 20vw, 18rem);
    margin-bottom: -0.18em;
    text-transform: lowercase;
}

footer.site-footer .footer-watermark-text {
    color: rgba(255, 255, 255, 0.04);
}

footer.site-footer .footer-watermark-glow {
    position: absolute;
    inset: auto 0 0 0;
    color: rgba(139, 131, 226, 0.15);
    mask-image: radial-gradient(circle 320px at 50% 50%, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0) 70%);
    -webkit-mask-image: radial-gradient(circle 320px at 50% 50%, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0) 70%);
    opacity: 0.8;
}

footer.site-footer .footer-main-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

footer.site-footer .footer-inner-grid {
    display: grid;
    grid-template-columns: 1.35fr repeat(5, minmax(0, 1fr));
    gap: 34px;
    padding: 64px 24px;
    max-width: 1400px;
    margin: 0 auto;
}

footer.site-footer .footer-brand-title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

footer.site-footer .footer-brand-desc {
    font-size: 14px;
    color: #8f8fa3;
    margin: 0 0 24px;
}

footer.site-footer .footer-social-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

footer.site-footer .footer-social-list li {
    margin: 0;
}

footer.site-footer .footer-social-btn {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.03);
    color: #9494a8;
    font-size: 18px;
    transition: all 0.2s ease;
    text-decoration: none;
}

footer.site-footer .footer-social-btn:hover {
    border-color: rgba(139, 131, 226, 0.6);
    color: #8b83e2;
    background: rgba(139, 131, 226, 0.08);
    transform: translateY(-2px);
}

footer.site-footer .footer-sublinks-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13.5px;
    color: #8f8fa3;
}

footer.site-footer .footer-sublink-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

footer.site-footer .footer-sublink-row svg,
footer.site-footer .footer-sublink-row i {
    width: 16px;
    height: 16px;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    color: rgba(139, 131, 226, 0.8);
    flex-shrink: 0;
}

footer.site-footer .footer-sublink-row a {
    color: #9494a8;
    text-decoration: none;
    transition: color 0.2s ease;
}

footer.site-footer .footer-sublink-row a:hover {
    color: #ffffff;
}

footer.site-footer .footer-col-heading {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #8182f8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 18px;
}

footer.site-footer .footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
}

footer.site-footer .footer-nav-list li {
    margin: 0;
}

footer.site-footer .footer-nav-list a {
    color: #8f8fa3;
    text-decoration: none;
    transition: all 0.15s ease;
}

footer.site-footer .footer-nav-list a::before {
    content: "\203A";
    margin-right: 8px;
    color: #55556b;
    font-weight: 700;
    transition: color 0.15s ease;
}

footer.site-footer .footer-nav-list a:hover {
    color: var(--primary);
    padding-left: 2px;
}

footer.site-footer .footer-nav-list a:hover::before {
    color: #8182f8;
}

footer.site-footer .footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 24px;
}

footer.site-footer .footer-bottom-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #6c6c7d;
}

footer.site-footer .footer-bottom-inner p {
    margin: 0;
}

@media (max-width: 1180px) {
    footer.site-footer .footer-inner-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px;
    }

    footer.site-footer .footer-inner-grid > div:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    footer.site-footer .footer-inner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px;
        padding: 48px 20px;
    }

    footer.site-footer .footer-bottom-inner {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* ==========================================================================
   NAVBAR (TÜM SAYFALAR) — sayfa-özel eski `header.site-header` kurallarını
   (düz arka plan, farklı yükseklik) etkisiz bırakır. Böylece refund,
   yazilim-paketleri, dashboard gibi kendi <style> bloğu olan sayfalarda da
   navbar index.html ile birebir aynı görünür.
   ========================================================================== */
header.site-header.site-header {
    background: linear-gradient(180deg, rgba(17, 17, 27, 0.93) 0%, rgba(9, 9, 14, 0.88) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
}

html[data-theme="light"] header.site-header.site-header,
html.light header.site-header.site-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

/* 961–1024px aralığında da masaüstü linkleri gizlenir (index.html davranışı) */
@media (max-width: 1024px) {
    header.site-header .nav-links {
        display: none;
    }

    header.site-header .mobile-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ==========================================================================
   FOOTER WATERMARK DÜZELTMESİ
   İki katman (metin + glow) tam üst üste binmediği için harfler çift/ bulanık
   görünüyordu. Tek katman bırakılır, yerine yumuşak bir metin parıltısı gelir.
   ========================================================================== */
footer.site-footer .footer-watermark-glow {
    display: none;
}

footer.site-footer .footer-watermark-container {
    height: 13vw;
    max-height: 190px;
    min-height: 96px;
}

/* Tek katman, parıltısız: harfler net kalsın, arka planda "fazladan yazı"
   gibi görünmesin. */
footer.site-footer .footer-watermark-text {
    color: rgba(255, 255, 255, 0.04);
    text-shadow: none;
}

/* ==========================================================================
   NAVBAR V4 — kapsül link grubu + gradyan marka + rafine aksiyonlar
   (REDESIGN V2'nin üzerine yazar; tüm sayfalarda aynı görünüm)
   ========================================================================== */
header.site-header.site-header {
    background: linear-gradient(180deg, rgba(14, 14, 22, 0.95) 0%, rgba(8, 8, 13, 0.9) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

html[data-theme="light"] header.site-header.site-header,
html.light header.site-header.site-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.92) 100%);
    border-bottom-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

header.site-header .nav-inner {
    height: 78px;
}

/* Soldaki mor ambiyansı incelt: kütle gibi duruyordu */
header.site-header .nav-inner::before {
    left: -70px;
    width: 300px;
    background: radial-gradient(58% 120% at 34% 55%, rgba(129, 130, 248, 0.14), transparent 74%);
}

/* --- Marka: canlı gradyan kare + beyaz işaret --------------------------------- */
header.site-header .brand-logo {
    gap: 11px;
    padding: 0;
    border-radius: 14px;
}

header.site-header .brand-logo:hover {
    background: transparent;
}

header.site-header .brand-logo > img,
header.site-header .brand-mark {
    width: 38px;
    height: 38px;
    padding: 8px;
    border-radius: 12px;
    background: linear-gradient(145deg, #7c7dff 0%, #6366f1 48%, #a855f7 100%);
    border: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 24px rgba(99, 102, 241, 0.42);
}

header.site-header .brand-mark img {
    filter: brightness(0) invert(1);
    opacity: 0.98;
}

header.site-header .brand-mark .brand-mark-fallback {
    color: #ffffff;
    font-size: 18px;
    text-shadow: none;
}

/* Açık temada fallback "N" koyu kalıyordu; mor karo üstünde beyaz kalmalı. */
html[data-theme="light"] header.site-header .brand-mark .brand-mark-fallback,
html.light header.site-header .brand-mark .brand-mark-fallback {
    color: #ffffff;
    text-shadow: none;
}

header.site-header .brand-logo-text {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.7px;
    color: var(--text-main);
}

header.site-header .brand-logo-text span {
    background: linear-gradient(90deg, #8182f8 0%, #c084fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

html[data-theme="light"] header.site-header .brand-logo-text span,
html.light header.site-header .brand-logo-text span {
    background: linear-gradient(90deg, #6366f1 0%, #9333ea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Linkler: hap şeklinde kapsül grubu --------------------------------------- */
header.site-header .nav-links {
    gap: 2px;
    padding: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-theme="light"] header.site-header .nav-links,
html.light header.site-header .nav-links {
    background: rgba(15, 23, 42, 0.035);
    border-color: rgba(15, 23, 42, 0.08);
}

header.site-header .nav-links a {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 15px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
}

header.site-header .nav-links a:hover,
header.site-header .nav-links a.active {
    background: rgba(129, 130, 248, 0.18);
    color: #ffffff;
}

html[data-theme="light"] header.site-header .nav-links a:hover,
html[data-theme="light"] header.site-header .nav-links a.active,
html.light header.site-header .nav-links a:hover,
html.light header.site-header .nav-links a.active {
    background: rgba(99, 102, 241, 0.12);
    color: #1e293b;
}

/* --- Sağdaki kontroller ------------------------------------------------------ */
header.site-header .btn-nav-control {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

header.site-header .btn-nav-login-link {
    border-radius: 12px;
    font-weight: 600;
}

header.site-header .btn-nav-register-btn {
    border-radius: 12px;
    background: linear-gradient(135deg, #7c7dff 0%, #6366f1 55%, #8b5cf6 100%);
    box-shadow: 0 8px 22px rgba(99, 102, 241, 0.42);
    font-weight: 700;
}

header.site-header .btn-nav-register-btn:hover {
    background: linear-gradient(135deg, #8f90ff 0%, #7071f5 55%, #9d6cf8 100%);
    box-shadow: 0 12px 28px rgba(99, 102, 241, 0.55);
}

/* --- Tablet sıkışma geçişi (kapsül içinde daha dar boşluk) -------------------- */
@media (max-width: 1180px) {
    header.site-header .nav-links {
        padding: 4px;
    }

    header.site-header .nav-links a {
        padding: 0 11px;
        font-size: 13px;
    }
}

/* ==========================================================================
   NAVBAR V5 — "Floating Glass Bar"
   Uçtan uca giden düz şerit yerine: yüzen, yuvarlatılmış, gradyan kenarlıklı
   cam kapsül. Altında yumuşak mor ışık halesi, içinde hap şeklinde link grubu.
   V2 + V4 kurallarının üzerine yazar (en sonda olduğu için kazanır).
   ========================================================================== */
/* Sarmalayıcı: şeffaf, tam genişlik; sadece üstten karartma (scrim) yapar.
   Böylece kapsül her sayfa düzeninde (block / flex gövde) sorunsuz ortalanır. */
header.site-header.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 8px 0 2px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(10, 10, 14, 0.94) 0%, rgba(10, 10, 14, 0.6) 60%, rgba(10, 10, 14, 0) 100%);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-theme="light"] header.site-header.site-header,
html.light header.site-header.site-header {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(248, 250, 252, 0.66) 60%, rgba(248, 250, 252, 0) 100%);
}

/* Yüzen kapsül (asıl bar) */
header.site-header .nav-inner {
    position: relative;
    width: min(1340px, calc(100% - 32px));
    max-width: none;
    margin: 0 auto;
    height: 66px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(40, 40, 60, 0.92) 0%, rgba(15, 15, 24, 0.9) 100%) padding-box,
        linear-gradient(115deg, rgba(129, 130, 248, 0.62) 0%, rgba(255, 255, 255, 0.08) 32%, rgba(255, 255, 255, 0.03) 68%, rgba(168, 85, 247, 0.5) 100%) border-box;
    box-shadow:
        0 26px 62px -24px rgba(0, 0, 0, 0.9),
        0 4px 18px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(26px) saturate(170%);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
}

html[data-theme="light"] header.site-header .nav-inner,
html.light header.site-header .nav-inner {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.9) 100%) padding-box,
        linear-gradient(115deg, rgba(99, 102, 241, 0.45) 0%, rgba(15, 23, 42, 0.06) 38%, rgba(15, 23, 42, 0.04) 66%, rgba(147, 51, 234, 0.32) 100%) border-box;
    box-shadow:
        0 20px 50px -24px rgba(15, 23, 42, 0.4),
        0 3px 14px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 #ffffff;
}

/* Kapsülün altına düşen yumuşak mor ışık */
header.site-header .nav-inner::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -10px;
    height: 18px;
    background: radial-gradient(62% 100% at 50% 0%, rgba(129, 130, 248, 0.42), transparent 74%);
    filter: blur(9px);
    pointer-events: none;
    z-index: 0;
}

html[data-theme="light"] header.site-header .nav-inner::after,
html.light header.site-header .nav-inner::after {
    background: radial-gradient(62% 100% at 50% 0%, rgba(99, 102, 241, 0.2), transparent 74%);
}

/* Mor ambiyans artık barın içinde kalıyor (köşe yuvarlaklığı taşmıyor) */
header.site-header .nav-inner::before {
    left: 0;
    width: 340px;
    border-radius: inherit;
    background: radial-gradient(58% 120% at 22% 52%, rgba(129, 130, 248, 0.16), transparent 72%);
}

header.site-header .brand-logo-text {
    font-size: 21.5px;
}

/* --- Link grubu: kapsül içinde hap linkler ------------------------------------ */
header.site-header .nav-links {
    gap: 3px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 18px -12px rgba(0, 0, 0, 0.9);
}

html[data-theme="light"] header.site-header .nav-links,
html.light header.site-header .nav-links {
    background: rgba(15, 23, 42, 0.035);
    border-color: rgba(15, 23, 42, 0.07);
}

header.site-header .nav-links a {
    height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

header.site-header .nav-links a:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

header.site-header .nav-links a.active {
    color: #ffffff;
    background: linear-gradient(180deg, rgba(129, 130, 248, 0.34) 0%, rgba(129, 130, 248, 0.16) 100%);
    box-shadow: inset 0 0 0 1px rgba(129, 130, 248, 0.45), 0 6px 16px -8px rgba(99, 102, 241, 0.8);
}

html[data-theme="light"] header.site-header .nav-links a:hover,
html.light header.site-header .nav-links a:hover {
    background: rgba(99, 102, 241, 0.1);
    color: #1e293b;
}

html[data-theme="light"] header.site-header .nav-links a.active,
html.light header.site-header .nav-links a.active {
    color: #312e81;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0.1) 100%);
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.35);
}

/* --- Sağ kontrol dock'u ------------------------------------------------------- */
header.site-header .btn-nav-control {
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
                transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

header.site-header .btn-nav-control:hover {
    color: #ffffff;
    background: rgba(129, 130, 248, 0.16);
    border-color: rgba(129, 130, 248, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px rgba(99, 102, 241, 0.85);
}

header.site-header .nav-auth-logged-out::before {
    height: 26px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}

header.site-header .btn-nav-login-link {
    height: 38px;
    display: inline-flex;
    align-items: center;
    border-radius: 12px;
    font-weight: 600;
}

header.site-header .btn-nav-register-btn {
    height: 38px;
    padding: 0 18px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, #7c7dff 0%, #6366f1 55%, #8b5cf6 100%);
    box-shadow: 0 12px 26px -10px rgba(99, 102, 241, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, filter 0.2s ease;
}

header.site-header .btn-nav-register-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 16px 32px -10px rgba(99, 102, 241, 1), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* --- Mobil / tablet: yüzen bar daralır --------------------------------------- */
@media (max-width: 1180px) {
    header.site-header .nav-links a {
        padding: 0 12px;
    }
}

@media (max-width: 1024px) {
    header.site-header.site-header {
        padding: 6px 0 2px;
    }

    header.site-header .nav-inner {
        width: calc(100% - 24px);
        padding: 0 12px;
        border-radius: 18px;
    }
}

@media (max-width: 640px) {
    header.site-header.site-header {
        padding: 5px 0 2px;
    }

    header.site-header .nav-inner {
        width: calc(100% - 16px);
        height: 60px;
        padding: 0 10px;
        border-radius: 16px;
    }

    header.site-header .brand-mark {
        width: 34px;
        height: 34px;
        padding: 7px;
        border-radius: 11px;
    }

    header.site-header .brand-logo-text {
        font-size: 18px;
    }
}

/* ==========================================================================
   NAVBAR V6 — "Compact Command Bar"
   Geri bildirim: V5 kapsülü ekranı uçtan uca kaplayıp çok geniş duruyordu.
   Bu katman kapsülü daraltır (1160px), yüksekliği düşürür (62px) ve link
   grubunun kutu görünümünü kaldırıp daha hafif bir komut çubuğu kurar.
   V5 en sonda duruyordu; bu blok ondan da sonra geldiği için kazanır.
   ========================================================================== */
header.site-header.site-header {
    padding: 7px 0 2px;
    background: linear-gradient(180deg, rgba(10, 10, 14, 0.9) 0%, rgba(10, 10, 14, 0.5) 58%, rgba(10, 10, 14, 0) 100%);
}

html[data-theme="light"] header.site-header.site-header,
html.light header.site-header.site-header {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.92) 0%, rgba(248, 250, 252, 0.55) 58%, rgba(248, 250, 252, 0) 100%);
}

/* Kapsül: 1340px → 1160px, 66px → 62px, 22px → 18px köşe */
header.site-header .nav-inner {
    width: min(1160px, calc(100% - 28px));
    height: 62px;
    padding: 0 12px 0 14px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(36, 36, 54, 0.9) 0%, rgba(13, 13, 21, 0.95) 100%) padding-box,
        linear-gradient(112deg, rgba(129, 130, 248, 0.55) 0%, rgba(255, 255, 255, 0.07) 30%, rgba(255, 255, 255, 0.025) 70%, rgba(168, 85, 247, 0.42) 100%) border-box;
    box-shadow:
        0 18px 44px -22px rgba(0, 0, 0, 0.92),
        0 3px 12px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
}

html[data-theme="light"] header.site-header .nav-inner,
html.light header.site-header .nav-inner {
    background:
        linear-gradient(180deg, #ffffff 0%, rgba(248, 250, 252, 0.94) 100%) padding-box,
        linear-gradient(112deg, rgba(99, 102, 241, 0.4) 0%, rgba(15, 23, 42, 0.05) 36%, rgba(15, 23, 42, 0.035) 68%, rgba(147, 51, 234, 0.28) 100%) border-box;
    box-shadow:
        0 16px 38px -22px rgba(15, 23, 42, 0.35),
        0 2px 10px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 #ffffff;
}

header.site-header .nav-inner::after {
    left: 18%;
    right: 18%;
    bottom: -8px;
    height: 14px;
    background: radial-gradient(60% 100% at 50% 0%, rgba(129, 130, 248, 0.32), transparent 74%);
    filter: blur(8px);
}

html[data-theme="light"] header.site-header .nav-inner::after,
html.light header.site-header .nav-inner::after {
    background: radial-gradient(60% 100% at 50% 0%, rgba(99, 102, 241, 0.16), transparent 74%);
}

header.site-header .nav-inner::before {
    width: 270px;
    background: radial-gradient(56% 118% at 20% 52%, rgba(129, 130, 248, 0.13), transparent 72%);
}

header.site-header .brand-logo-text {
    font-size: 20.5px;
}

/* --- Linkler: kutu yerine hafif, çizgisiz hap linkler -------------------------- */
header.site-header .nav-links {
    gap: 2px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

header.site-header .nav-links a {
    height: 30px;
    padding: 0 13px;
    border-radius: 9px;
    font-size: 13px;
    color: rgba(226, 226, 240, 0.6);
}

header.site-header .nav-links a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

header.site-header .nav-links a.active {
    color: #ffffff;
    background: rgba(129, 130, 248, 0.16);
    box-shadow: inset 0 0 0 1px rgba(129, 130, 248, 0.38);
}

html[data-theme="light"] header.site-header .nav-links a,
html.light header.site-header .nav-links a {
    color: #475569;
}

html[data-theme="light"] header.site-header .nav-links a:hover,
html.light header.site-header .nav-links a:hover {
    background: rgba(99, 102, 241, 0.08);
    color: #1e293b;
}

html[data-theme="light"] header.site-header .nav-links a.active,
html.light header.site-header .nav-links a.active {
    color: #312e81;
    background: rgba(99, 102, 241, 0.14);
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.32);
}

/* --- Sağ dock: kontroller yeni ölçeğe iner ------------------------------------ */
header.site-header .btn-nav-control {
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.075);
}

header.site-header .nav-auth-logged-out::before {
    height: 22px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}

header.site-header .btn-nav-login-link {
    height: 36px;
    border-radius: 10px;
    font-size: 13.5px;
}

header.site-header .btn-nav-register-btn {
    height: 36px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13.5px;
}

@media (max-width: 1180px) {
    header.site-header .nav-links a {
        padding: 0 10px;
        font-size: 12.5px;
    }
}

@media (max-width: 1024px) {
    header.site-header.site-header {
        padding: 6px 0 2px;
    }

    header.site-header .nav-inner {
        width: calc(100% - 20px);
        height: 58px;
        padding: 0 10px 0 12px;
        border-radius: 15px;
    }
}

@media (max-width: 640px) {
    header.site-header.site-header {
        padding: 5px 0 2px;
    }

    header.site-header .nav-inner {
        width: calc(100% - 14px);
        height: 54px;
        padding: 0 9px;
        border-radius: 14px;
    }

    header.site-header .btn-nav-control {
        height: 32px;
        min-width: 32px;
    }

    header.site-header .btn-nav-register-btn {
        height: 32px;
        padding: 0 12px;
    }

    header.site-header .brand-logo-text {
        font-size: 17.5px;
    }
}

/* ==========================================================================
   NAVBAR V7 — MARKA FOTO ALANI (brand mark) YENİ TASARIM
   Düz mor kare yerine: kırpılmış köşeli (HUD plaque) karo, akan gradyan
   yüzey, ikili gradyan halka, üst cam parlaması ve hover'da ışık süzülmesi.
   V5/V6'nın mark boyut kurallarını aynı kırılımlarla burada eziyoruz.
   ========================================================================== */
header.site-header .brand-mark {
    position: relative;
    isolation: isolate;
    width: 40px;
    height: 40px;
    padding: 9px;
    border: 0;
    border-radius: 14px 14px 14px 6px;
    background-image: linear-gradient(115deg, #8182f8 0%, #a855f7 26%, #6366f1 52%, #8b5cf6 76%, #8182f8 100%);
    background-size: 240% 100%;
    background-position: 0% 50%;
    animation: npBrandFlow 9s ease-in-out infinite alternate;
    box-shadow:
        0 0 0 1px rgba(129, 130, 248, 0.45),
        0 0 0 2px rgba(168, 85, 247, 0.16),
        0 12px 26px -12px rgba(99, 102, 241, 0.9),
        0 0 20px -10px rgba(168, 85, 247, 0.65);
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.34s ease;
}

@keyframes npBrandFlow {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

/* Üst cam parlaması */
header.site-header .brand-mark::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(120% 88% at 26% 4%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 54%);
}

/* Hover'da soldan sağa süzülen ışık */
header.site-header .brand-mark::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    background-image: linear-gradient(112deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.78) 50%, rgba(255, 255, 255, 0) 62%);
    background-size: 260% 100%;
    background-repeat: no-repeat;
    background-position: -120% 0;
    transition: background-position 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

header.site-header .brand-mark img {
    position: relative;
    z-index: 3;
    filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(12, 8, 32, 0.55));
    opacity: 1;
}

header.site-header .brand-logo:hover .brand-mark,
header.site-header .brand-logo:focus-visible .brand-mark {
    transform: translateY(-1px) scale(1.05) rotate(-2deg);
    box-shadow:
        0 0 0 1px rgba(129, 130, 248, 0.7),
        0 0 0 2px rgba(168, 85, 247, 0.3),
        0 16px 32px -12px rgba(99, 102, 241, 1),
        0 0 30px -8px rgba(168, 85, 247, 0.85);
}

header.site-header .brand-logo:hover .brand-mark::after,
header.site-header .brand-logo:focus-visible .brand-mark::after {
    background-position: 120% 0;
}

/* Açık temada karo aynı kalır, gölge yumuşar */
html[data-theme="light"] header.site-header .brand-mark,
html.light header.site-header .brand-mark {
    box-shadow:
        0 0 0 1px rgba(99, 102, 241, 0.4),
        0 0 0 2px rgba(147, 51, 234, 0.14),
        0 10px 22px -12px rgba(79, 70, 229, 0.75),
        0 0 18px -10px rgba(147, 51, 234, 0.5);
}

html[data-theme="light"] header.site-header .brand-mark img,
html.light header.site-header .brand-mark img {
    filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(49, 28, 120, 0.35));
}

@media (max-width: 1024px) {
    header.site-header .brand-mark {
        width: 36px;
        height: 36px;
        padding: 8px;
        border-radius: 13px 13px 13px 6px;
    }
}

@media (max-width: 640px) {
    header.site-header .brand-mark {
        width: 32px;
        height: 32px;
        padding: 7px;
        border-radius: 11px 11px 11px 5px;
    }

    header.site-header .brand-mark .brand-mark-fallback { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    header.site-header .brand-mark { animation: none; }
    header.site-header .brand-mark::after { transition: none; }
}

/* ==========================================================================
   NAVBAR V8 — "MISSION CONSOLE" KOMPLE YENİ TASARIM
   V6 komut çubuğunun üzerine yeni bir görsel dil kurar:
   - Kırpılmış köşeli kapsül (marka karosuyla aynı dil), üstte ince ışık hattı
     ve iç yüzeyde çok hafif dikey tarama dokusu
   - Linkler mono/büyük harf "konsol" yazısına döner; aktif sekme altında
     gradyan çizgi taşır (dolgulu hap yerine)
   - Sağ kontrol grubu tek bir "dock" paneli içine alınır
   - Butonlar da kırpılmış köşe kullanır; ölçüler ve oranlar büyütülür
   ========================================================================== */
header.site-header .nav-inner {
    width: min(1200px, calc(100% - 26px));
    height: 64px;
    padding: 0 12px 0 16px;
    border-radius: 20px 20px 20px 8px;
    background:
        linear-gradient(90deg, rgba(129, 130, 248, 0) 0%, rgba(129, 130, 248, 0.7) 22%, rgba(168, 85, 247, 0.5) 62%, rgba(168, 85, 247, 0) 100%) padding-box top / 100% 1px no-repeat,
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 58px) padding-box,
        linear-gradient(180deg, rgba(34, 34, 52, 0.94) 0%, rgba(12, 12, 19, 0.96) 100%) padding-box,
        linear-gradient(112deg, rgba(129, 130, 248, 0.6) 0%, rgba(255, 255, 255, 0.07) 30%, rgba(255, 255, 255, 0.025) 70%, rgba(168, 85, 247, 0.5) 100%) border-box;
    box-shadow:
        0 20px 48px -24px rgba(0, 0, 0, 0.94),
        0 3px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] header.site-header .nav-inner,
html.light header.site-header .nav-inner {
    background:
        linear-gradient(90deg, rgba(99, 102, 241, 0) 0%, rgba(99, 102, 241, 0.55) 22%, rgba(147, 51, 234, 0.4) 62%, rgba(147, 51, 234, 0) 100%) padding-box top / 100% 1px no-repeat,
        repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.03) 0 1px, transparent 1px 58px) padding-box,
        linear-gradient(180deg, #ffffff 0%, rgba(248, 250, 252, 0.96) 100%) padding-box,
        linear-gradient(112deg, rgba(99, 102, 241, 0.42) 0%, rgba(15, 23, 42, 0.05) 36%, rgba(15, 23, 42, 0.035) 68%, rgba(147, 51, 234, 0.3) 100%) border-box;
}

/* Marka bloğu ile link kümesi arasına ince bölme çizgisi */
header.site-header .brand-logo::after {
    content: '';
    width: 1px;
    height: 26px;
    margin-left: 14px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}

html[data-theme="light"] header.site-header .brand-logo::after,
html.light header.site-header .brand-logo::after {
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.14), transparent);
}

/* Linkler: mono konsol yazısı + aktif sekmede gradyan alt çizgi */
header.site-header .nav-links a {
    position: relative;
    height: 34px;
    padding: 0 12px;
    border-radius: 9px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(226, 226, 240, 0.55);
}

header.site-header .nav-links a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

header.site-header .nav-links a.active {
    color: #ffffff;
    background: rgba(129, 130, 248, 0.12);
    box-shadow: inset 0 0 0 1px rgba(129, 130, 248, 0.32);
}

header.site-header .nav-links a.active::after {
    content: '';
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #8182f8, #c084fc);
}

html[data-theme="light"] header.site-header .nav-links a,
html.light header.site-header .nav-links a { color: #566175; }

html[data-theme="light"] header.site-header .nav-links a:hover,
html.light header.site-header .nav-links a:hover { color: #0f172a; background: rgba(99, 102, 241, 0.08); }

html[data-theme="light"] header.site-header .nav-links a.active,
html.light header.site-header .nav-links a.active {
    color: #312e81;
    background: rgba(99, 102, 241, 0.12);
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.3);
}

/* Sağ kontrol dock'u */
header.site-header .global-nav-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 5px 4px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.028);
    border: 1px solid rgba(255, 255, 255, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="light"] header.site-header .global-nav-actions,
html.light header.site-header .global-nav-actions {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

header.site-header .btn-nav-control {
    height: 34px;
    min-width: 34px;
    border-radius: 10px 10px 10px 4px;
}

header.site-header .btn-nav-login-link {
    height: 34px;
    border-radius: 10px 10px 10px 4px;
    font-size: 13px;
}

header.site-header .btn-nav-register-btn {
    height: 34px;
    padding: 0 15px;
    border-radius: 10px 10px 10px 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    letter-spacing: 0.01em;
}

header.site-header .nav-auth-logged-out::before { height: 20px; }

@media (max-width: 1180px) {
    header.site-header .nav-links a {
        padding: 0 9px;
        font-size: 10.5px;
        letter-spacing: 0.04em;
    }
}

@media (max-width: 1024px) {
    header.site-header .nav-inner {
        width: calc(100% - 20px);
        height: 60px;
        padding: 0 10px 0 13px;
        border-radius: 18px 18px 18px 8px;
    }

    header.site-header .brand-logo::after { margin-left: 11px; height: 24px; }
    header.site-header .nav-links a { height: 32px; padding: 0 8px; font-size: 10px; }
    header.site-header .global-nav-actions { padding: 3px 4px 3px 8px; border-radius: 13px; }
    header.site-header .btn-nav-control { height: 32px; min-width: 32px; }
    header.site-header .btn-nav-login-link,
    header.site-header .btn-nav-register-btn { height: 32px; font-size: 12.5px; }
}

@media (max-width: 640px) {
    header.site-header .nav-inner {
        width: calc(100% - 14px);
        height: 56px;
        padding: 0 8px 0 10px;
        border-radius: 16px 16px 16px 6px;
    }

    header.site-header .brand-logo::after { display: none; }
    header.site-header .global-nav-actions { gap: 4px; padding: 3px 3px 3px 7px; border-radius: 12px; }
    header.site-header .btn-nav-control { height: 30px; min-width: 30px; }
    header.site-header .btn-nav-login-link { height: 30px; font-size: 12px; }
    header.site-header .btn-nav-register-btn { height: 30px; padding: 0 11px; font-size: 12px; }
}

/* ==========================================================================
   NAVBAR V9 — "HUD STRIP + GLASS BAR" (komple yeni yön)
   --------------------------------------------------------------------------
   V8 "Mission Console" katmanını geçersiz kılar. Yeni kompozisyon:
   - Header'ın en üstünde tam genişlik, ince bir SİSTEM DURUM ŞERİDİ durur
     (canlı nokta + çevrimiçi sayısı + ping + dil + build). Şerit <=1024px'te
     kapanır; mobil menü ile çakışmaz.
   - Altında 1440px'e kadar genişleyen CAM BAR: yarı saydam gövde + blur,
     gradyan 1px kenarlık ve üstte ince ışık hattı.
   - Linkler segment hapı içinde toplanır; aktif sekme gradyan dolgu alır
     (V8'in mono/büyük harf + alt çizgi yaklaşımı iptal edilir).
   - Marka bloğu marka karosu + "CS2 SUITE" mono etiketiyle iki satıra iner.
   ========================================================================== */

/* --- 0) Çapa (anchor) ofseti: header artık daha uzun ---------------------- */
section[id],
[id] {
    scroll-margin-top: 118px;
}

/* --- 1) Header zemini ---------------------------------------------------- */
header.site-header.site-header {
    padding: 0 0 10px;
    background: linear-gradient(180deg, rgba(9, 9, 14, 0.96) 0%, rgba(9, 9, 14, 0.7) 46%, rgba(9, 9, 14, 0) 100%);
}

html[data-theme="light"] header.site-header.site-header,
html.light header.site-header.site-header {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.97) 0%, rgba(248, 250, 252, 0.72) 46%, rgba(248, 250, 252, 0) 100%);
}

/* --- 2) HUD durum şeridi -------------------------------------------------- */
header.site-header .np-hud-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 30px;
    padding: 0 clamp(16px, 3vw, 34px);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(198, 198, 226, 0.52);
    background:
        linear-gradient(90deg, rgba(129, 130, 248, 0) 0%, rgba(129, 130, 248, 0.32) 30%, rgba(168, 85, 247, 0.26) 70%, rgba(168, 85, 247, 0) 100%) top / 100% 1px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

header.site-header .np-hud-group {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

header.site-header .np-hud-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 13px;
    white-space: nowrap;
    border-left: 1px solid rgba(255, 255, 255, 0.075);
}

header.site-header .np-hud-cell:first-child {
    padding-left: 0;
    border-left: 0;
}

header.site-header .np-hud-group:last-child .np-hud-cell:last-child {
    padding-right: 0;
}

header.site-header .np-hud-cell b { color: #eaeaf7; font-weight: 700; }

header.site-header .np-hud-live { color: #b9ffd8; }

header.site-header .np-hud-live i {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #24d07a;
    box-shadow: 0 0 0 3px rgba(36, 208, 122, 0.18);
    animation: npHudPulse 2.6s ease-in-out infinite;
}

@keyframes npHudPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(36, 208, 122, 0.18); }
    50% { opacity: 0.5; box-shadow: 0 0 0 7px rgba(36, 208, 122, 0); }
}

html[data-theme="light"] header.site-header .np-hud-strip,
html.light header.site-header .np-hud-strip {
    color: rgba(71, 85, 105, 0.7);
    background:
        linear-gradient(90deg, rgba(99, 102, 241, 0) 0%, rgba(99, 102, 241, 0.3) 30%, rgba(147, 51, 234, 0.24) 70%, rgba(147, 51, 234, 0) 100%) top / 100% 1px no-repeat,
        linear-gradient(180deg, rgba(15, 23, 42, 0.045), rgba(15, 23, 42, 0.015));
    border-bottom-color: rgba(15, 23, 42, 0.07);
}

html[data-theme="light"] header.site-header .np-hud-cell,
html.light header.site-header .np-hud-cell { border-left-color: rgba(15, 23, 42, 0.09); }

html[data-theme="light"] header.site-header .np-hud-cell b,
html.light header.site-header .np-hud-cell b { color: #0f172a; }

html[data-theme="light"] header.site-header .np-hud-live,
html.light header.site-header .np-hud-live { color: #047857; }

/* --- 3) Cam bar ---------------------------------------------------------- */
header.site-header .nav-inner {
    width: min(1440px, calc(100% - 26px));
    height: 62px;
    padding: 0 10px 0 16px;
    border: 1px solid transparent;
    border-radius: 16px;
    background:
        linear-gradient(90deg, rgba(129, 130, 248, 0) 0%, rgba(129, 130, 248, 0.75) 18%, rgba(168, 85, 247, 0.5) 62%, rgba(168, 85, 247, 0) 100%) padding-box top / 100% 1px no-repeat,
        linear-gradient(180deg, rgba(30, 30, 48, 0.62) 0%, rgba(10, 10, 17, 0.74) 100%) padding-box,
        linear-gradient(112deg, rgba(129, 130, 248, 0.6) 0%, rgba(255, 255, 255, 0.07) 30%, rgba(255, 255, 255, 0.025) 70%, rgba(168, 85, 247, 0.5) 100%) border-box;
    box-shadow:
        0 24px 54px -28px rgba(0, 0, 0, 0.95),
        0 2px 10px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
}

html[data-theme="light"] header.site-header .nav-inner,
html.light header.site-header .nav-inner {
    background:
        linear-gradient(90deg, rgba(99, 102, 241, 0) 0%, rgba(99, 102, 241, 0.6) 18%, rgba(147, 51, 234, 0.42) 62%, rgba(147, 51, 234, 0) 100%) padding-box top / 100% 1px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(246, 248, 252, 0.88) 100%) padding-box,
        linear-gradient(112deg, rgba(99, 102, 241, 0.45) 0%, rgba(15, 23, 42, 0.05) 32%, rgba(15, 23, 42, 0.035) 68%, rgba(147, 51, 234, 0.32) 100%) border-box;
    box-shadow:
        0 22px 46px -28px rgba(15, 23, 42, 0.4),
        0 2px 8px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 #ffffff;
}

/* --- 4) Marka bloğu: karo + iki satırlı wordmark ------------------------- */
header.site-header .brand-logo-text {
    display: inline-block;
    font-size: 20px;
    line-height: 1.02;
    letter-spacing: -0.42px;
}

header.site-header .brand-logo-text::after {
    content: 'CS2 SUITE';
    display: block;
    margin-top: 3px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.34em;
    color: rgba(158, 160, 202, 0.6);
}

html[data-theme="light"] header.site-header .brand-logo-text::after,
html.light header.site-header .brand-logo-text::after { color: rgba(100, 116, 139, 0.72); }

/* Marka ile link grubu arasındaki bölme çizgisi (V8'den) daha ince kalır */
header.site-header .brand-logo::after { height: 24px; margin-left: 12px; }

/* --- 5) Linkler: segment hapı ------------------------------------------- */
header.site-header .nav-links {
    gap: 2px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

header.site-header .nav-links a {
    position: relative;
    height: 32px;
    padding: 0 13px;
    border-radius: 9px;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.005em;
    text-transform: none;
    color: rgba(224, 224, 240, 0.6);
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

header.site-header .nav-links a:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

header.site-header .nav-links a.active {
    color: #ffffff;
    background: linear-gradient(135deg, #7c7dff 0%, #6366f1 58%, #8b5cf6 100%);
    box-shadow: 0 10px 22px -12px rgba(99, 102, 241, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

/* V8'in aktif sekme alt çizgisini iptal et */
header.site-header .nav-links a.active::after { display: none; }

html[data-theme="light"] header.site-header .nav-links,
html.light header.site-header .nav-links {
    background: rgba(15, 23, 42, 0.035);
    border-color: rgba(15, 23, 42, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

html[data-theme="light"] header.site-header .nav-links a,
html.light header.site-header .nav-links a { color: #55617a; }

html[data-theme="light"] header.site-header .nav-links a:hover,
html.light header.site-header .nav-links a:hover { background: rgba(99, 102, 241, 0.09); color: #0f172a; }

html[data-theme="light"] header.site-header .nav-links a.active,
html.light header.site-header .nav-links a.active {
    color: #ffffff;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 58%, #7c3aed 100%);
    box-shadow: 0 10px 20px -12px rgba(79, 70, 229, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* --- 6) Sağ kontrol kümesi --------------------------------------------- */
header.site-header .global-nav-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

header.site-header .btn-nav-control {
    height: 34px;
    min-width: 34px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(232, 232, 246, 0.78);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

header.site-header .btn-nav-control:hover {
    background: rgba(129, 130, 248, 0.16);
    border-color: rgba(129, 130, 248, 0.36);
    color: #ffffff;
    transform: translateY(-1px);
}

html[data-theme="light"] header.site-header .btn-nav-control,
html.light header.site-header .btn-nav-control {
    background: rgba(15, 23, 42, 0.035);
    border-color: rgba(15, 23, 42, 0.08);
    color: #475569;
}

html[data-theme="light"] header.site-header .btn-nav-control:hover,
html.light header.site-header .btn-nav-control:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.3);
    color: #312e81;
}

header.site-header .nav-auth-logged-out::before { height: 22px; }

header.site-header .btn-nav-login-link {
    height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    font-size: 13px;
}

html[data-theme="light"] header.site-header .btn-nav-login-link,
html.light header.site-header .btn-nav-login-link {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.03);
}

header.site-header .btn-nav-register-btn {
    height: 34px;
    padding: 0 16px;
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
}

/* --- 7) Kırılımlar ------------------------------------------------------- */
@media (max-width: 1180px) {
    header.site-header .nav-links a { padding: 0 10px; font-size: 12px; }
    header.site-header .np-hud-cell { padding: 0 10px; font-size: 9px; letter-spacing: 0.12em; }
}

@media (max-width: 1024px) {
    header.site-header.site-header { padding: 6px 0 8px; }
    header.site-header .np-hud-strip { display: none; }

    header.site-header .nav-inner {
        width: calc(100% - 20px);
        height: 58px;
        padding: 0 9px 0 13px;
        border-radius: 14px;
    }

    header.site-header .brand-logo-text { font-size: 18px; }
    header.site-header .nav-links { padding: 3px; border-radius: 11px; }
    header.site-header .nav-links a { height: 30px; padding: 0 9px; font-size: 11.5px; }
    header.site-header .btn-nav-control { height: 32px; min-width: 32px; }
    header.site-header .btn-nav-login-link,
    header.site-header .btn-nav-register-btn { height: 32px; font-size: 12.5px; }

    section[id],
    [id] { scroll-margin-top: 88px; }
}

@media (max-width: 768px) {
    header.site-header .brand-logo-text::after { display: none; }
}

@media (max-width: 640px) {
    header.site-header.site-header { padding: 5px 0 6px; }

    header.site-header .nav-inner {
        width: calc(100% - 14px);
        height: 54px;
        padding: 0 8px 0 11px;
        border-radius: 13px;
    }

    header.site-header .brand-logo::after { display: none; }
    header.site-header .brand-logo-text { font-size: 17px; }
    header.site-header .btn-nav-control { height: 30px; min-width: 30px; }
    header.site-header .btn-nav-login-link { height: 30px; font-size: 12px; }
    header.site-header .btn-nav-register-btn { height: 30px; padding: 0 12px; font-size: 12px; }

    section[id],
    [id] { scroll-margin-top: 74px; }
}

@media (prefers-reduced-motion: reduce) {
    header.site-header .np-hud-live i { animation: none; }
}

/* ==========================================================================
   NAVBAR V10 — "SADE RAY" (baştan tasarım)
   --------------------------------------------------------------------------
   V9'un kapsül + HUD şerit kompozisyonu bırakıldı (şerit artık enjekte
   edilmiyor; CSS'i yalnızca ileride tekrar istenirse diye duruyor).
   Yeni yaklaşım bilinçli olarak kapsülsüz ve "boşluklu":
   - Tam genişlik, kapsülsüz tek satır ray; sadece alt ince çizgi ve üstte
     yavaşça kayan marka ışığı.
   - Linkler hap/kutu değil: düz metin; hover ve aktif durumda soldan sağa
     büyüyen gradyan alt çizgi.
   - Sağ küme kutusuz: ikonlar çıplak, giriş metin linki, kayıt tek gradyan
     buton. Marka bölme çizgisi ve "CS2 SUITE" etiketi kaldırıldı.
   ========================================================================== */

header.site-header.site-header {
    padding: 0;
    background: rgba(9, 9, 13, 0.86);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

html[data-theme="light"] header.site-header.site-header,
html.light header.site-header.site-header {
    background: rgba(250, 251, 253, 0.9);
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

/* Üstte yavaşça kayan marka ışığı */
header.site-header.site-header::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(129, 130, 248, 0) 0%, rgba(129, 130, 248, 0.9) 34%, rgba(192, 132, 252, 0.9) 66%, rgba(129, 130, 248, 0) 100%);
    background-size: 200% 100%;
    animation: npRailSweep 8s linear infinite;
}

@keyframes npRailSweep {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* --- Ray: kapsül yok, tam genişlik --------------------------------------- */
header.site-header .nav-inner {
    width: 100%;
    max-width: 1500px;
    height: 68px;
    padding: 0 clamp(16px, 3vw, 40px);
    gap: 22px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

header.site-header .nav-inner::before,
header.site-header .nav-inner::after { display: none; }

/* --- Marka: tek satır, etiketsiz ---------------------------------------- */
header.site-header .brand-logo::after { display: none; }

header.site-header .brand-logo-text {
    font-size: 21px;
    line-height: 1;
    letter-spacing: -0.5px;
}

header.site-header .brand-logo-text::after { content: none; }

/* Karo artık tam kare kırpılmış değil: yumuşak tek yarıçap */
header.site-header .brand-mark { border-radius: 12px; }

html[data-theme="light"] header.site-header .brand-mark,
html.light header.site-header .brand-mark { border-radius: 12px; }

/* --- Linkler: düz metin + gradyan alt çizgi ----------------------------- */
header.site-header .nav-links {
    gap: 2px;
    margin-right: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

header.site-header .nav-links a {
    position: relative;
    height: 42px;
    padding: 0 13px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(220, 220, 238, 0.64);
}

header.site-header .nav-links a:hover {
    background: none;
    color: #ffffff;
}

header.site-header .nav-links a::after {
    content: '';
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 9px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #8182f8 0%, #c084fc 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

header.site-header .nav-links a:hover::after { transform: scaleX(1); }

header.site-header .nav-links a.active {
    color: #ffffff;
    background: none;
    box-shadow: none;
}

header.site-header .nav-links a.active::after {
    content: '';
    position: absolute;
    display: block;
    left: 13px;
    right: 13px;
    bottom: 9px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #8182f8 0%, #c084fc 100%);
    transform: scaleX(1);
}

html[data-theme="light"] header.site-header .nav-links a,
html.light header.site-header .nav-links a { color: #55617a; }

html[data-theme="light"] header.site-header .nav-links a:hover,
html.light header.site-header .nav-links a:hover { background: none; color: #0f172a; }

html[data-theme="light"] header.site-header .nav-links a.active,
html.light header.site-header .nav-links a.active { color: #312e81; background: none; box-shadow: none; }

/* --- Sağ küme: kutusuz -------------------------------------------------- */
header.site-header .global-nav-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

header.site-header .btn-nav-control {
    height: 38px;
    min-width: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: rgba(218, 218, 238, 0.62);
}

header.site-header .btn-nav-control:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: transparent;
    color: #ffffff;
    transform: none;
}

html[data-theme="light"] header.site-header .btn-nav-control,
html.light header.site-header .btn-nav-control {
    background: transparent;
    border-color: transparent;
    color: #55617a;
}

html[data-theme="light"] header.site-header .btn-nav-control:hover,
html.light header.site-header .btn-nav-control:hover {
    background: rgba(15, 23, 42, 0.05);
    color: #0f172a;
}

header.site-header .nav-auth-logged-out {
    gap: 10px;
    margin-left: 10px;
    padding-left: 16px;
}

header.site-header .nav-auth-logged-out::before {
    width: 1px;
    height: 26px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}

header.site-header .btn-nav-login-link {
    height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    background: none;
    color: rgba(226, 226, 242, 0.78);
    font-size: 13.5px;
    font-weight: 600;
}

header.site-header .btn-nav-login-link:hover { color: #ffffff; background: none; }

html[data-theme="light"] header.site-header .btn-nav-login-link,
html.light header.site-header .btn-nav-login-link { background: none; border: 0; color: #475569; }

header.site-header .btn-nav-register-btn {
    height: 38px;
    padding: 0 20px;
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: 0 10px 24px -12px rgba(99, 102, 241, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

/* --- Çapa ofseti + mobil çekmece: header tek satıra indi ---------------- */
section[id],
[id] { scroll-margin-top: 84px; }

header.site-header .mobile-nav-drawer { top: 69px; }

/* --- Kırılımlar --------------------------------------------------------- */
@media (max-width: 1180px) {
    header.site-header .nav-links a { padding: 0 10px; font-size: 12.5px; }
    header.site-header .nav-links a::after { left: 10px; right: 10px; }
    header.site-header .nav-links a.active::after { left: 10px; right: 10px; }
    header.site-header .btn-nav-register-btn { padding: 0 16px; }
}

@media (max-width: 1024px) {
    header.site-header.site-header { padding: 0; }
    header.site-header .nav-inner { height: 64px; max-width: 100%; padding: 0 16px; }
    header.site-header .brand-logo-text { font-size: 19px; }
    header.site-header .btn-nav-control { height: 36px; min-width: 36px; }
    header.site-header .btn-nav-login-link,
    header.site-header .btn-nav-register-btn { height: 36px; font-size: 13px; }
    header.site-header .mobile-nav-drawer { top: 65px; }

    section[id],
    [id] { scroll-margin-top: 78px; }
}

@media (max-width: 640px) {
    header.site-header .nav-inner { height: 60px; padding: 0 14px; gap: 14px; }
    header.site-header .brand-mark { width: 32px; height: 32px; padding: 7px; }
    header.site-header .brand-logo-text { font-size: 17.5px; }
    header.site-header .nav-auth-logged-out { padding-left: 12px; }
    header.site-header .btn-nav-register-btn { padding: 0 14px; }
    header.site-header .mobile-nav-drawer { top: 61px; }

    section[id],
    [id] { scroll-margin-top: 72px; }
}

@media (prefers-reduced-motion: reduce) {
    header.site-header.site-header::before { animation: none; }
}

/* ==========================================================================
   NAVBAR V11 — "İKİ KATMANLI HEADER" (yapı değişikliği)
   --------------------------------------------------------------------------
   V10'un tek satır rayı bırakıldı; artık header iki satırdan oluşuyor:
   - ÜST SATIR (60px): solda marka, sağda kontrol kümesi (bildirim / dil / tema)
     ve giriş-kayıt butonları.
   - ALT SATIR: marka ile aksiyonların altında, tam genişlik, ortalanmış link
     şeridi. Üstten ince bir ayırıcı çizgi alır.
   Linkler yuvarlak (pill) hap; aktif sekmede gradyan nokta + mor dolgu.
   ========================================================================== */

header.site-header.site-header {
    padding: 0;
    background: rgba(9, 9, 13, 0.9);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

html[data-theme="light"] header.site-header.site-header,
html.light header.site-header.site-header {
    background: rgba(250, 251, 253, 0.92);
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

/* --- Gövde: iki satıra sarabilen flex ----------------------------------- */
header.site-header .nav-inner {
    width: 100%;
    max-width: 1440px;
    height: auto;
    padding: 0 clamp(16px, 3vw, 34px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

header.site-header .nav-inner::before,
header.site-header .nav-inner::after { display: none; }

/* --- Üst satır: marka solda, aksiyonlar sağda --------------------------- */
header.site-header .brand-logo {
    order: 1;
    height: 60px;
}

header.site-header .brand-logo::after { display: none; }

header.site-header .brand-logo-text {
    font-size: 21px;
    line-height: 1;
    letter-spacing: -0.5px;
}

header.site-header .brand-logo-text::after { content: none; }

header.site-header .brand-mark { border-radius: 12px; }

/* --- Alt satır: ortalanmış link şeridi ---------------------------------- */
header.site-header .nav-links {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 7px 0 11px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

header.site-header .nav-links a {
    position: relative;
    height: 30px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    box-shadow: none;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    color: rgba(220, 220, 238, 0.66);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

header.site-header .nav-links a:hover {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

header.site-header .nav-links a::after { display: none; }

header.site-header .nav-links a.active {
    color: #ffffff;
    background: linear-gradient(180deg, rgba(129, 130, 248, 0.26), rgba(129, 130, 248, 0.12));
    border-color: rgba(129, 130, 248, 0.42);
    box-shadow: 0 8px 20px -12px rgba(99, 102, 241, 0.9);
}

header.site-header .nav-links a.active::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 7px;
    border-radius: 50%;
    vertical-align: middle;
    background: linear-gradient(135deg, #8182f8, #c084fc);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.85);
}

html[data-theme="light"] header.site-header .nav-links,
html.light header.site-header .nav-links { border-top-color: rgba(15, 23, 42, 0.08); }

html[data-theme="light"] header.site-header .nav-links a,
html.light header.site-header .nav-links a { color: #55617a; }

html[data-theme="light"] header.site-header .nav-links a:hover,
html.light header.site-header .nav-links a:hover { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.07); color: #0f172a; }

html[data-theme="light"] header.site-header .nav-links a.active,
html.light header.site-header .nav-links a.active {
    color: #312e81;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.16), rgba(99, 102, 241, 0.07));
    border-color: rgba(99, 102, 241, 0.34);
}

/* --- Kontrol kümesi üst satırın sağında -------------------------------- */
header.site-header .global-nav-actions {
    order: 2;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 60px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

header.site-header .btn-nav-control {
    height: 38px;
    min-width: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: rgba(218, 218, 238, 0.62);
}

header.site-header .btn-nav-control:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: transparent;
    color: #ffffff;
    transform: none;
}

header.site-header .nav-auth-logged-out {
    gap: 10px;
    margin-left: 12px;
    padding-left: 16px;
}

header.site-header .nav-auth-logged-out::before {
    width: 1px;
    height: 26px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}

header.site-header .btn-nav-login-link {
    height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    background: none;
    color: rgba(226, 226, 242, 0.78);
    font-size: 13.5px;
    font-weight: 600;
}

header.site-header .btn-nav-login-link:hover { color: #ffffff; background: none; }

header.site-header .btn-nav-register-btn {
    height: 38px;
    padding: 0 20px;
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: 0 10px 24px -12px rgba(99, 102, 241, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

html[data-theme="light"] header.site-header .btn-nav-control,
html.light header.site-header .btn-nav-control { background: transparent; border-color: transparent; color: #55617a; }

html[data-theme="light"] header.site-header .btn-nav-control:hover,
html.light header.site-header .btn-nav-control:hover { background: rgba(15, 23, 42, 0.05); color: #0f172a; }

html[data-theme="light"] header.site-header .btn-nav-login-link,
html.light header.site-header .btn-nav-login-link { background: none; border: 0; color: #475569; }

/* --- Çapa ofseti + mobil çekmece (iki satır: ~106px) -------------------- */
section[id],
[id] { scroll-margin-top: 120px; }

header.site-header .mobile-nav-drawer { top: 108px; }

/* --- Kırılımlar --------------------------------------------------------- */
@media (max-width: 1180px) {
    header.site-header .nav-links { gap: 4px; }
    header.site-header .nav-links a { padding: 0 12px; font-size: 12px; }
}

@media (max-width: 1024px) {
    header.site-header .brand-logo,
    header.site-header .global-nav-actions { height: 58px; }
    header.site-header .brand-logo-text { font-size: 19px; }
    header.site-header .nav-links a { height: 29px; padding: 0 11px; }
    header.site-header .btn-nav-control { height: 36px; min-width: 36px; }
    header.site-header .btn-nav-login-link,
    header.site-header .btn-nav-register-btn { height: 36px; font-size: 13px; }

    section[id],
    [id] { scroll-margin-top: 112px; }

    header.site-header .mobile-nav-drawer { top: 100px; }
}

/* Linkler 960px altında gizlendiği için header tek satıra iner */
@media (max-width: 960px) {
    header.site-header .brand-logo,
    header.site-header .global-nav-actions { height: 62px; }

    section[id],
    [id] { scroll-margin-top: 76px; }

    header.site-header .mobile-nav-drawer { top: 63px; }
}

@media (max-width: 640px) {
    header.site-header .brand-mark { width: 32px; height: 32px; padding: 7px; }
    header.site-header .brand-logo-text { font-size: 17.5px; }
    header.site-header .nav-auth-logged-out { padding-left: 12px; margin-left: 8px; }
    header.site-header .btn-nav-register-btn { padding: 0 14px; }
}

/* ==========================================================================
   NAVBAR V12 — "TACTICAL RAIL" (alışılmışın dışında)
   --------------------------------------------------------------------------
   Amaç: hiçbir klasik SaaS/gaming navbar'a benzemeyen bir üst şerit.
   - Header'ın en tepesinde sürekli kayan 3px'lik "ikaz bandı" (tarama dokusu).
   - Marka karosu kırpılmış köşeli taktik plaka: clip-path altıgen kesim +
     hafif eğim; altında mono "// CS2 SUITE" etiketi.
   - Linkler artık hap değil: İKİ SATIRLI terminal sekmeleri. Üst satırda
     mono sıra numarası (01...07, CSS counter ile), alt satırda etiket.
     Aralarında ince dikey ayırıcılar; aktif sekmenin altında mor ray çizgisi.
   - Kayıt butonu paralelogram kesimli; ikon butonları köşeli çerçeveli.
   ========================================================================== */

header.site-header.site-header {
    padding: 0;
    background: #0a0a10;
    border-bottom: 1px solid rgba(129, 130, 248, 0.18);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-theme="light"] header.site-header.site-header,
html.light header.site-header.site-header {
    background: #f7f8fc;
    border-bottom-color: rgba(99, 102, 241, 0.22);
}

/* --- En üstte kayan ikaz bandı ------------------------------------------ */
header.site-header.site-header::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    pointer-events: none;
    background-image: repeating-linear-gradient(45deg, rgba(129, 130, 248, 0.6) 0 3px, rgba(129, 130, 248, 0) 3px 9px);
    background-size: 24px 100%;
    opacity: 0.55;
    animation: npTape 2.4s linear infinite;
}

@keyframes npTape {
    from { background-position: 0 0; }
    to { background-position: 24px 0; }
}

/* --- Ray: tek satır, kapsülsüz ------------------------------------------ */
header.site-header .nav-inner {
    width: 100%;
    max-width: 1500px;
    height: 72px;
    padding: 0 clamp(16px, 3vw, 38px);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 18px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

header.site-header .nav-inner::before,
header.site-header .nav-inner::after { display: none; }

/* --- Marka: taktik plaka ------------------------------------------------ */
header.site-header .brand-logo {
    order: 1;
    height: 72px;
    gap: 12px;
}

header.site-header .brand-logo::after { display: none; }

header.site-header .brand-logo-text {
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.4px;
}

header.site-header .brand-logo-text::after {
    content: '// CS2 SUITE';
    display: block;
    margin-top: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(150, 152, 200, 0.62);
}

html[data-theme="light"] header.site-header .brand-logo-text::after,
html.light header.site-header .brand-logo-text::after { color: rgba(100, 116, 139, 0.7); }

/* Kırpılmış köşeli plaka */
header.site-header .brand-mark {
    border-radius: 0;
    clip-path: polygon(24% 0, 100% 0, 100% 76%, 76% 100%, 0 100%, 0 24%);
    transform: rotate(-4deg);
}

header.site-header .brand-logo:hover .brand-mark,
header.site-header .brand-logo:focus-visible .brand-mark { transform: rotate(0deg) scale(1.05); }

/* --- Linkler: numaralı iki satırlı terminal sekmeleri ------------------- */
header.site-header .nav-links {
    counter-reset: npNav;
    order: 2;
    flex-basis: auto;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    gap: 0;
    padding: 0;
    border: 0;
    border-top: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

header.site-header .nav-links li {
    counter-increment: npNav;
    display: flex;
}

header.site-header .nav-links li + li { border-left: 1px solid rgba(255, 255, 255, 0.065); }

header.site-header .nav-links a {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 72px;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    color: rgba(216, 216, 236, 0.68);
    transition: color 0.2s ease, background 0.2s ease;
}

header.site-header .nav-links a::before {
    content: counter(npNav, decimal-leading-zero);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(150, 152, 200, 0.5);
    transition: color 0.2s ease;
}

header.site-header .nav-links a::after { display: none; }

header.site-header .nav-links a:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
}

header.site-header .nav-links a:hover::before { color: #c084fc; }

header.site-header .nav-links a.active {
    color: #ffffff;
    background: linear-gradient(180deg, rgba(129, 130, 248, 0.2), rgba(129, 130, 248, 0.045));
    box-shadow: inset 0 -2px 0 0 #a855f7;
}

header.site-header .nav-links a.active::before { color: #c084fc; }

html[data-theme="light"] header.site-header .nav-links li + li,
html.light header.site-header .nav-links li + li { border-left-color: rgba(15, 23, 42, 0.07); }

html[data-theme="light"] header.site-header .nav-links a,
html.light header.site-header .nav-links a { color: #55617a; }

html[data-theme="light"] header.site-header .nav-links a:hover,
html.light header.site-header .nav-links a:hover { background: rgba(15, 23, 42, 0.045); color: #0f172a; }

html[data-theme="light"] header.site-header .nav-links a.active,
html.light header.site-header .nav-links a.active {
    color: #312e81;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.14), rgba(99, 102, 241, 0.04));
    box-shadow: inset 0 -2px 0 0 #6366f1;
}

/* --- Aksiyonlar: köşeli çerçeveli ikonlar, kesik CTA ------------------- */
header.site-header .global-nav-actions {
    order: 3;
    margin-left: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 72px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

header.site-header .btn-nav-control {
    height: 36px;
    min-width: 36px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
    color: rgba(220, 220, 240, 0.66);
}

header.site-header .btn-nav-control:hover {
    background: rgba(129, 130, 248, 0.2);
    border-color: rgba(129, 130, 248, 0.45);
    color: #ffffff;
    transform: none;
}

header.site-header .nav-auth-logged-out {
    gap: 10px;
    margin-left: 12px;
    padding-left: 16px;
}

header.site-header .nav-auth-logged-out::before {
    width: 1px;
    height: 28px;
    background: linear-gradient(180deg, transparent, rgba(129, 130, 248, 0.5), transparent);
}

header.site-header .btn-nav-login-link {
    height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    background: none;
    color: rgba(226, 226, 242, 0.78);
    font-size: 13.5px;
    font-weight: 600;
}

header.site-header .btn-nav-login-link:hover { color: #ffffff; background: none; }

header.site-header .btn-nav-register-btn {
    height: 38px;
    padding: 0 22px;
    border-radius: 0;
    clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
    font-size: 13.5px;
    font-weight: 700;
}

html[data-theme="light"] header.site-header .btn-nav-control,
html.light header.site-header .btn-nav-control {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.09);
    color: #55617a;
}

html[data-theme="light"] header.site-header .btn-nav-control:hover,
html.light header.site-header .btn-nav-control:hover { background: rgba(99, 102, 241, 0.14); color: #312e81; }

html[data-theme="light"] header.site-header .btn-nav-login-link,
html.light header.site-header .btn-nav-login-link { background: none; border: 0; color: #475569; }

/* --- Çapa ofseti + mobil çekmece (tek satır: 72px) --------------------- */
section[id],
[id] { scroll-margin-top: 88px; }

header.site-header .mobile-nav-drawer { top: 73px; }

/* --- Kırılımlar --------------------------------------------------------- */
@media (max-width: 1180px) {
    header.site-header .nav-links a { padding: 0 12px; font-size: 12px; }
    header.site-header .btn-nav-register-btn { padding: 0 18px; }
}

@media (max-width: 1024px) {
    header.site-header .brand-logo,
    header.site-header .global-nav-actions { height: 64px; }
    header.site-header .brand-logo-text { font-size: 19px; }
    header.site-header .brand-mark { border-radius: 0; }
    header.site-header .btn-nav-control { height: 34px; min-width: 34px; }
    header.site-header .btn-nav-login-link,
    header.site-header .btn-nav-register-btn { height: 36px; font-size: 13px; }
    header.site-header .nav-inner { height: 64px; }

    section[id],
    [id] { scroll-margin-top: 78px; }

    header.site-header .mobile-nav-drawer { top: 65px; }
}

@media (max-width: 640px) {
    header.site-header .nav-inner { height: 60px; padding: 0 14px; }
    header.site-header .brand-logo,
    header.site-header .global-nav-actions { height: 60px; }
    header.site-header .brand-mark { width: 32px; height: 32px; padding: 7px; }
    header.site-header .brand-logo-text { font-size: 17.5px; }
    header.site-header .brand-logo-text::after { content: none; }
    header.site-header .nav-auth-logged-out { padding-left: 12px; margin-left: 8px; }
    header.site-header .btn-nav-register-btn { padding: 0 14px; }

    section[id],
    [id] { scroll-margin-top: 70px; }

    header.site-header .mobile-nav-drawer { top: 61px; }
}

@media (prefers-reduced-motion: reduce) {
    header.site-header.site-header::before { animation: none; }
}

/* ==========================================================================
   NAVBAR V13 — "TACTICAL RAIL" rafine sürümü
   --------------------------------------------------------------------------
   V12 yapısı korunuyor (üstte kayan ikaz bandı, kesik köşeli plaka,
   kesik köşeli kayıt butonu, köşeli ikon butonları). Değişenler:
   - Linklerdeki 01...07 numaraları ve marka altındaki "// CS2 SUITE"
     etiketi kaldırıldı; linkler tek satır ve daha ferah.
   - Ayırıcılar tam boy kenarlık yerine kısa, ortalanmış hairline oldu.
   - Hover/aktif durumda yumuşak mor parıltı + ince gradyan zemin;
     kayıt butonunda hover'da ışık süzülmesi eklendi.
   ========================================================================== */

header.site-header.site-header {
    background: linear-gradient(180deg, #0c0c14 0%, #09090f 100%);
    border-bottom: 1px solid rgba(129, 130, 248, 0.22);
}

html[data-theme="light"] header.site-header.site-header,
html.light header.site-header.site-header {
    background: linear-gradient(180deg, #ffffff 0%, #f5f6fb 100%);
    border-bottom-color: rgba(99, 102, 241, 0.22);
}

/* Numaralar ve marka alt etiketi yok */
header.site-header .nav-links a::before { content: none; display: none; }
header.site-header .brand-logo-text::after { content: none; display: none; }

/* Linkler: tek satır, ferah */
header.site-header .nav-links a {
    flex-direction: row;
    gap: 0;
    height: 72px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.015em;
    color: rgba(216, 216, 236, 0.72);
}

header.site-header .nav-links a::after { display: none; }

/* Kısa, ortalanmış dikey ayırıcılar */
header.site-header .nav-links li { position: relative; }
header.site-header .nav-links li + li { border-left: 0; }

header.site-header .nav-links li + li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 18px;
    margin-top: -9px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}

html[data-theme="light"] header.site-header .nav-links li + li::before,
html.light header.site-header .nav-links li + li::before {
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.14), transparent);
}

header.site-header .nav-links a:hover {
    background: linear-gradient(180deg, rgba(129, 130, 248, 0.13), rgba(129, 130, 248, 0.02));
    color: #ffffff;
    text-shadow: 0 0 14px rgba(168, 85, 247, 0.55);
}

header.site-header .nav-links a.active {
    color: #ffffff;
    background: linear-gradient(180deg, rgba(129, 130, 248, 0.2), rgba(129, 130, 248, 0.03));
    box-shadow: inset 0 -2px 0 0 #a855f7;
    text-shadow: 0 0 16px rgba(168, 85, 247, 0.5);
}

html[data-theme="light"] header.site-header .nav-links a,
html.light header.site-header .nav-links a { color: #566175; }

html[data-theme="light"] header.site-header .nav-links a:hover,
html.light header.site-header .nav-links a:hover {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.02));
    color: #0f172a;
    text-shadow: none;
}

html[data-theme="light"] header.site-header .nav-links a.active,
html.light header.site-header .nav-links a.active {
    color: #312e81;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.16), rgba(99, 102, 241, 0.03));
    box-shadow: inset 0 -2px 0 0 #6366f1;
    text-shadow: none;
}

/* Kayıt butonunda hover'da ışık süzülmesi */
header.site-header .btn-nav-register-btn {
    position: relative;
    overflow: hidden;
}

header.site-header .btn-nav-register-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 60%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    background-position: -130% 0;
    transition: background-position 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

header.site-header .btn-nav-register-btn:hover::after { background-position: 130% 0; }

/* İkon butonlarında hover parlaklığı */
header.site-header .btn-nav-control:hover {
    box-shadow: 0 0 0 1px rgba(129, 130, 248, 0.35), 0 0 18px -6px rgba(129, 130, 248, 0.8);
}

/* Kırılımlar: linkler biraz daralır */
@media (max-width: 1180px) {
    header.site-header .nav-links a { padding: 0 14px; font-size: 12.5px; }
}

@media (max-width: 1024px) {
    header.site-header .nav-links a { height: 64px; padding: 0 12px; }
}

@media (max-width: 640px) {
    header.site-header .nav-links a { height: 60px; }
}