/**
 * AI Trend Bot - Unified Header Components CSS
 * Tüm sayfalarda tutarlı tema switch ve dil seçici stilleri
 */

/* ═══════════════════════════════════════════════════════════════════════════
   FIXED HEADER - Sadece fixed class'ı olan header'lar için
   Sticky header'lar kendi positioning'lerini korur
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sadece HTML'de fixed olarak tanımlanmış nav-blur header'lar için */
header.nav-blur.fixed,
header.nav-blur[class*="fixed"] {
    position: fixed !important;
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 32px) !important;
    max-width: 1280px !important;
    z-index: 9999 !important;
    margin: 0 !important;
}

/* Sticky header'lar için - kendi doğal akışlarında kalırlar */
header.nav-blur.sticky {
    position: sticky !important;
    top: 16px !important;
    z-index: 9999 !important;
}

/* Body padding gerekmiyor - her sayfa kendi padding'ine sahip */

/* Container'ların fixed header'ı etkilememesi için */
.relative:has(> header.nav-blur.fixed),
div:has(> header.nav-blur.fixed) {
    position: static !important;
}

/* Mobil için ayarlar */
@media (max-width: 768px) {
    header.nav-blur.fixed,
    header.nav-blur[class*="fixed"] {
        top: 8px !important;
        width: calc(100% - 16px) !important;
        border-radius: 16px !important;
    }
    
    header.nav-blur.sticky {
        top: 8px !important;
        border-radius: 16px !important;
    }
}

/* ===== THEME SWITCH ===== */
.theme-switch {
    position: relative !important;
    width: 44px !important;
    height: 24px !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    flex-shrink: 0 !important;
}

html:not(.dark) .theme-switch,
[data-theme="light"] .theme-switch {
    background-color: #cbd5e1 !important;
}

html.dark .theme-switch,
[data-theme="dark"] .theme-switch {
    background-color: #6366f1 !important;
}

.theme-switch .theme-knob,
.theme-knob {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background-color: white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html:not(.dark) .theme-switch .theme-knob,
html:not(.dark) .theme-knob,
[data-theme="light"] .theme-switch .theme-knob {
    transform: translateX(0) !important;
}

html.dark .theme-switch .theme-knob,
html.dark .theme-knob,
[data-theme="dark"] .theme-switch .theme-knob {
    transform: translateX(20px) !important;
}

/* Theme Icons */
.theme-icon-sun,
.theme-icon-moon {
    width: 14px !important;
    height: 14px !important;
}

.theme-icon-sun {
    color: #f59e0b !important;
}

.theme-icon-moon {
    color: #6366f1 !important;
}

html:not(.dark) .theme-icon-sun,
[data-theme="light"] .theme-icon-sun {
    display: block !important;
}

html:not(.dark) .theme-icon-moon,
[data-theme="light"] .theme-icon-moon {
    display: none !important;
}

html.dark .theme-icon-sun,
[data-theme="dark"] .theme-icon-sun {
    display: none !important;
}

html.dark .theme-icon-moon,
[data-theme="dark"] .theme-icon-moon {
    display: block !important;
}

/* ===== LANGUAGE SELECTOR ===== */
.lang-selector,
.language-selector,
[data-language-selector] {
    position: relative;
}

.lang-btn,
.lang-btn-fallback,
#lang-btn-fallback,
#guest-lang-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 14px;
}

html:not(.dark) .lang-btn,
html:not(.dark) #lang-btn-fallback,
html:not(.dark) #guest-lang-btn,
[data-theme="light"] .lang-btn {
    background-color: white;
    border-color: #e2e8f0;
    color: #475569;
}

html:not(.dark) .lang-btn:hover,
html:not(.dark) #lang-btn-fallback:hover,
html:not(.dark) #guest-lang-btn:hover,
[data-theme="light"] .lang-btn:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

html.dark .lang-btn,
html.dark #lang-btn-fallback,
html.dark #guest-lang-btn,
[data-theme="dark"] .lang-btn {
    background-color: #1e293b;
    border-color: #475569;
    color: #cbd5e1;
}

html.dark .lang-btn:hover,
html.dark #lang-btn-fallback:hover,
html.dark #guest-lang-btn:hover,
[data-theme="dark"] .lang-btn:hover {
    background-color: #334155;
    border-color: #64748b;
}

/* Language Dropdown */
.lang-dropdown,
#lang-dropdown,
#lang-dropdown-fallback,
#guest-lang-dropdown {
    position: absolute;
    right: 0;
    margin-top: 8px;
    width: 176px;
    padding: 8px 0;
    border-radius: 12px;
    border: 1px solid;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    z-index: 50;
    max-height: 320px;
    overflow-y: auto;
}

html:not(.dark) .lang-dropdown,
html:not(.dark) #lang-dropdown,
html:not(.dark) #lang-dropdown-fallback,
html:not(.dark) #guest-lang-dropdown,
[data-theme="light"] .lang-dropdown {
    background-color: white;
    border-color: #e2e8f0;
}

html.dark .lang-dropdown,
html.dark #lang-dropdown,
html.dark #lang-dropdown-fallback,
html.dark #guest-lang-dropdown,
[data-theme="dark"] .lang-dropdown {
    background-color: #1e293b;
    border-color: #475569;
}

/* Language Options */
.lang-dropdown button,
#lang-dropdown button,
#lang-dropdown-fallback button,
#guest-lang-dropdown button,
.lang-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 16px;
    text-align: left;
    font-size: 14px;
    transition: background-color 0.15s ease;
    border: none;
    background: none;
    cursor: pointer;
}

html:not(.dark) .lang-dropdown button,
html:not(.dark) #lang-dropdown button,
html:not(.dark) #lang-dropdown-fallback button,
html:not(.dark) #guest-lang-dropdown button,
[data-theme="light"] .lang-option {
    color: #475569;
}

html:not(.dark) .lang-dropdown button:hover,
html:not(.dark) #lang-dropdown button:hover,
html:not(.dark) #lang-dropdown-fallback button:hover,
html:not(.dark) #guest-lang-dropdown button:hover,
[data-theme="light"] .lang-option:hover {
    background-color: #f1f5f9;
}

html.dark .lang-dropdown button,
html.dark #lang-dropdown button,
html.dark #lang-dropdown-fallback button,
html.dark #guest-lang-dropdown button,
[data-theme="dark"] .lang-option {
    color: #cbd5e1;
}

html.dark .lang-dropdown button:hover,
html.dark #lang-dropdown button:hover,
html.dark #lang-dropdown-fallback button:hover,
html.dark #guest-lang-dropdown button:hover,
[data-theme="dark"] .lang-option:hover {
    background-color: #334155;
}

/* Flag emoji size */
.lang-dropdown button span:first-child,
#lang-dropdown button span:first-child,
#lang-dropdown-fallback button span:first-child,
#guest-lang-dropdown button span:first-child,
#current-flag,
#guest-current-flag {
    font-size: 16px;
    line-height: 1;
}

/* Arrow icon */
.lang-btn svg,
#lang-btn-fallback svg,
#guest-lang-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

/* Hidden class for dropdowns - Only apply to lang-dropdown elements */
.lang-dropdown.hidden,
#lang-dropdown.hidden,
#lang-dropdown-fallback.hidden,
#guest-lang-dropdown.hidden {
    display: none !important;
}

/* ===== SENTINEL/DASHBOARD THEME SWITCH ===== */
/* For dashboard pages using sentinel-pro.css style */
.elite-header .theme-switch,
.user-controls .theme-switch {
    width: 44px;
    height: 24px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .theme-switch {
        width: 40px;
        height: 22px;
    }
    
    .theme-switch .theme-knob,
    .theme-knob {
        width: 18px;
        height: 18px;
    }
    
    html.dark .theme-switch .theme-knob,
    html.dark .theme-knob,
    [data-theme="dark"] .theme-switch .theme-knob {
        transform: translateX(18px);
    }
    
    .theme-icon-sun,
    .theme-icon-moon {
        width: 12px;
        height: 12px;
    }
}

/* ===== PROFILE BUTTON - Dashboard Pages (ID Selector) ===== */
#profile-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    border-radius: 9999px;
    border: 1px solid #334155;
    background: #1e293b;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

#profile-dropdown-btn:hover {
    background: #334155;
}

html:not(.dark) #profile-dropdown-btn {
    border-color: #e2e8f0;
    background: #ffffff;
}

html:not(.dark) #profile-dropdown-btn:hover {
    background: #f8fafc;
}

/* Profile Avatar in Button */
#profile-dropdown-btn #user-avatar,
#user-profile-container #user-avatar {
    height: 1.75rem;
    width: 1.75rem;
    border-radius: 9999px;
    background: linear-gradient(to bottom right, #22d3ee, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Profile User Name in Button */
#profile-dropdown-btn #sentinel-user-name,
#profile-dropdown-btn span:not(:first-child):not(:last-child) {
    font-size: 0.875rem;
    font-weight: 500;
    color: #cbd5e1;
}

html:not(.dark) #profile-dropdown-btn #sentinel-user-name,
html:not(.dark) #profile-dropdown-btn span:not(:first-child):not(:last-child) {
    color: #475569;
}

/* Profile Arrow Icon in Button */
#profile-dropdown-btn svg {
    width: 1rem;
    height: 1rem;
    color: #94a3b8;
}

/* Profile Dropdown Container */
#user-profile-container {
    position: relative;
}

/* ===== USER DROPDOWN (ID Selector for Dashboard Pages) ===== */
#user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 14rem;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow: hidden;
}

#user-dropdown.hidden {
    display: none !important;
}

html:not(.dark) #user-dropdown {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

#user-dropdown > div:first-child {
    padding: 0.75rem;
    border-bottom: 1px solid #334155;
}

html:not(.dark) #user-dropdown > div:first-child {
    border-bottom-color: #f1f5f9;
}

#user-dropdown #dropdown-avatar {
    height: 2.25rem;
    width: 2.25rem;
    border-radius: 9999px;
    background: linear-gradient(to bottom right, #8b5cf6, #06b6d4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
}

#user-dropdown #dropdown-user-name {
    font-weight: 500;
    font-size: 0.875rem;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html:not(.dark) #user-dropdown #dropdown-user-name {
    color: #0f172a;
}

#user-dropdown #dropdown-user-email {
    font-size: 0.75rem;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html:not(.dark) #user-dropdown #dropdown-user-email {
    color: #64748b;
}

#user-dropdown a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    color: #cbd5e1;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background-color 0.15s;
}

html:not(.dark) #user-dropdown a {
    color: #475569;
}

#user-dropdown a:hover {
    background: rgba(51, 65, 85, 0.5);
}

html:not(.dark) #user-dropdown a:hover {
    background: #f8fafc;
}

#user-dropdown a svg,
#user-dropdown button svg {
    width: 1rem;
    height: 1rem;
    color: #94a3b8;
}

#user-dropdown button[onclick*="Logout"],
#user-dropdown button[onclick*="logout"] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    color: #f87171 !important;
    font-size: 0.875rem;
    transition: background-color 0.15s;
    border: none;
    background: transparent;
    width: 100%;
    cursor: pointer;
}

#user-dropdown button[onclick*="Logout"]:hover,
#user-dropdown button[onclick*="logout"]:hover {
    background: rgba(239, 68, 68, 0.1);
}

html:not(.dark) #user-dropdown button[onclick*="Logout"]:hover,
html:not(.dark) #user-dropdown button[onclick*="logout"]:hover {
    background: #fef2f2;
}

#user-dropdown .border-t,
#user-dropdown .border-b {
    border-color: #334155;
}

html:not(.dark) #user-dropdown .border-t,
html:not(.dark) #user-dropdown .border-b {
    border-color: #f1f5f9;
}

#user-dropdown .flex { display: flex; }
#user-dropdown .items-center { align-items: center; }
#user-dropdown .justify-between { justify-content: space-between; }
#user-dropdown .gap-3 { gap: 0.75rem; }
#user-dropdown .gap-2\.5 { gap: 0.625rem; }
#user-dropdown .flex-1 { flex: 1 1 0%; }
#user-dropdown .min-w-0 { min-width: 0; }
#user-dropdown .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
#user-dropdown .p-3 { padding: 0.75rem; }
#user-dropdown .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
#user-dropdown .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
#user-dropdown .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
#user-dropdown .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
#user-dropdown .mt-2 { margin-top: 0.5rem; }
#user-dropdown .text-xs { font-size: 0.75rem; line-height: 1rem; }
#user-dropdown .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
#user-dropdown .font-medium { font-weight: 500; }
#user-dropdown .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#user-dropdown .rounded { border-radius: 0.25rem; }
#user-dropdown .rounded-md { border-radius: 0.375rem; }
#user-dropdown .w-full { width: 100%; }
#user-dropdown .bg-slate-50 { background-color: #f8fafc; }
.dark #user-dropdown .bg-slate-50,
#user-dropdown .dark\:bg-slate-700\/50 { background-color: rgba(51, 65, 85, 0.5); }
#user-dropdown .text-slate-500 { color: #64748b; }
.dark #user-dropdown .text-slate-500,
#user-dropdown .dark\:text-slate-400 { color: #94a3b8; }
#user-dropdown .text-slate-600 { color: #475569; }
.dark #user-dropdown .text-slate-600,
#user-dropdown .dark\:text-slate-300 { color: #cbd5e1; }
#user-dropdown .text-slate-700 { color: #334155; }
.dark #user-dropdown .text-slate-700 { color: #cbd5e1; }
#user-dropdown .text-slate-900 { color: #0f172a; }
.dark #user-dropdown .text-slate-900,
#user-dropdown .dark\:text-white { color: #ffffff; }
#user-dropdown .bg-cyan-100 { background-color: rgba(6, 182, 212, 0.15); }
.dark #user-dropdown .bg-cyan-100,
#user-dropdown .dark\:bg-cyan-900\/50 { background-color: rgba(6, 182, 212, 0.2); }
#user-dropdown .text-cyan-700 { color: #0e7490; }
.dark #user-dropdown .text-cyan-700,
#user-dropdown .dark\:text-cyan-300 { color: #22d3ee; }
#user-dropdown .text-red-600 { color: #dc2626; }
.dark #user-dropdown .text-red-600,
#user-dropdown .dark\:text-red-400 { color: #f87171; }
#user-dropdown .hover\:bg-slate-50:hover { background-color: #f8fafc; }
.dark #user-dropdown .hover\:bg-slate-50:hover,
#user-dropdown .dark\:hover\:bg-slate-700\/50:hover { background-color: rgba(51, 65, 85, 0.5); }
#user-dropdown .hover\:bg-red-50:hover { background-color: #fef2f2; }
.dark #user-dropdown .hover\:bg-red-50:hover,
#user-dropdown .dark\:hover\:bg-red-900\/20:hover { background-color: rgba(127, 29, 29, 0.2); }
#user-dropdown .transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

/* ===== PROFILE DROPDOWN ===== */
.profile-dropdown-container {
    position: relative;
}

.profile-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    border-radius: 9999px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-card, white);
    cursor: pointer;
    transition: all 0.2s;
}

html.dark .profile-dropdown-btn {
    border-color: #334155;
    background: #1e293b;
}

.profile-dropdown-btn:hover {
    background: #f8fafc;
}

html.dark .profile-dropdown-btn:hover {
    background: #334155;
}

.profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 280px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    z-index: 100;
    overflow: hidden;
}

html.dark .profile-dropdown-menu {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

.profile-dropdown-header {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, rgba(6,182,212,0.1), rgba(59,130,246,0.1));
}

html.dark .profile-dropdown-header {
    border-color: #334155;
    background: linear-gradient(135deg, rgba(6,182,212,0.15), rgba(59,130,246,0.15));
}

.profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #334155;
    text-decoration: none;
    transition: background-color 0.2s;
}

html.dark .profile-dropdown-item {
    color: #cbd5e1;
}

.profile-dropdown-item:hover {
    background: #f1f5f9;
}

html.dark .profile-dropdown-item:hover {
    background: #334155;
}

.profile-dropdown-item svg {
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.7;
}

.profile-dropdown-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 0.25rem 0;
}

html.dark .profile-dropdown-divider {
    background: #334155;
}

.profile-dropdown-logout {
    color: #ef4444 !important;
}

.profile-dropdown-logout:hover {
    background: #fef2f2 !important;
}

html.dark .profile-dropdown-logout:hover {
    background: rgba(239,68,68,0.1) !important;
}

/* Plan badge colors */
.plan-badge-starter { background: rgba(6,182,212,0.2); color: #0891b2; }
.plan-badge-pro { background: rgba(168,85,247,0.2); color: #9333ea; }
.plan-badge-ultimate { background: rgba(245,158,11,0.2); color: #d97706; }
.plan-badge-enterprise { background: rgba(16,185,129,0.2); color: #059669; }
.plan-badge-free { background: rgba(100,116,139,0.2); color: #64748b; }

html.dark .plan-badge-starter { background: rgba(6,182,212,0.3); color: #22d3ee; }
html.dark .plan-badge-pro { background: rgba(168,85,247,0.3); color: #c084fc; }
html.dark .plan-badge-ultimate { background: rgba(245,158,11,0.3); color: #fbbf24; }
html.dark .plan-badge-enterprise { background: rgba(16,185,129,0.3); color: #34d399; }
html.dark .plan-badge-free { background: rgba(100,116,139,0.3); color: #94a3b8; }

/* ===== UNIFIED PROFILE DROPDOWN (Tüm Sayfalar için) ===== */

/* Profile Container */
.profile-dropdown-container,
.user-profile {
    position: relative;
}

/* Profile Button - Profesyonel Görünüm */
#profile-dropdown-btn,
.profile-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 14px 6px 6px !important;
    border-radius: 50px !important;
    border: 1px solid !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,250,252,0.9)) !important;
    border-color: rgba(226,232,240,0.8) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 0 0 1px rgba(255,255,255,0.5) inset !important;
}

html.dark #profile-dropdown-btn,
html.dark .profile-btn {
    background: linear-gradient(135deg, rgba(30,41,59,0.95), rgba(15,23,42,0.95)) !important;
    border-color: rgba(71,85,105,0.6) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.05) inset !important;
}

#profile-dropdown-btn:hover,
.profile-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(6,182,212,0.15), 0 0 0 1px rgba(6,182,212,0.2) !important;
    border-color: rgba(6,182,212,0.4) !important;
}

html.dark #profile-dropdown-btn:hover,
html.dark .profile-btn:hover {
    box-shadow: 0 4px 16px rgba(6,182,212,0.25), 0 0 0 1px rgba(6,182,212,0.3) !important;
    border-color: rgba(6,182,212,0.5) !important;
}

/* Avatar Stilleri */
#user-avatar,
.profile-btn img,
#sentinel-user-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid transparent !important;
    background: linear-gradient(135deg, #06b6d4, #3b82f6, #8b5cf6) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    box-shadow: 0 2px 8px rgba(6,182,212,0.3) !important;
}

/* Kullanıcı Adı */
#user-display-name,
.profile-name,
#sentinel-user-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    max-width: 100px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html:not(.dark) #user-display-name,
html:not(.dark) .profile-name,
html:not(.dark) #sentinel-user-name {
    color: #1e293b !important;
}

html.dark #user-display-name,
html.dark .profile-name,
html.dark #sentinel-user-name {
    color: #f1f5f9 !important;
}

/* Plan Badge (Button içindeki) */
.profile-plan,
#sentinel-user-plan {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, rgba(6,182,212,0.15), rgba(59,130,246,0.15)) !important;
    color: #0891b2 !important;
}

html.dark .profile-plan,
html.dark #sentinel-user-plan {
    background: linear-gradient(135deg, rgba(6,182,212,0.25), rgba(59,130,246,0.25)) !important;
    color: #22d3ee !important;
}

/* Dropdown Arrow */
#profile-dropdown-btn svg,
.profile-btn .profile-arrow,
.profile-btn svg:last-child {
    width: 16px !important;
    height: 16px !important;
    transition: transform 0.3s ease !important;
    opacity: 0.6 !important;
}

/* ===== DROPDOWN MENU - PROFESYONEL TASARIM ===== */
.profile-dropdown-menu,
.user-dropdown,
#profile-dropdown-menu,
#user-dropdown {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: -40px !important;
    min-width: 210px !important;
    max-width: 230px !important;
    width: 220px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    z-index: 9999 !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Glass Effect */
    background: rgba(255,255,255,0.98) !important;
    /* v15.2 PERFORMANCE: backdrop-filter kaldırıldı, opak arka plan yeterli */
    border: 1px solid rgba(226,232,240,0.8) !important;
    box-shadow: 
        0 20px 50px rgba(0,0,0,0.12),
        0 10px 20px rgba(0,0,0,0.08),
        0 0 0 1px rgba(255,255,255,0.5) inset !important;
}

html.dark .profile-dropdown-menu,
html.dark .user-dropdown,
html.dark #profile-dropdown-menu,
html.dark #user-dropdown {
    background: rgba(15,23,42,0.98) !important;
    border-color: rgba(71,85,105,0.5) !important;
    box-shadow: 
        0 20px 50px rgba(0,0,0,0.5),
        0 10px 20px rgba(0,0,0,0.3),
        0 0 0 1px rgba(255,255,255,0.05) inset !important;
}

/* Dropdown Header */
.profile-dropdown-header,
.dropdown-header {
    padding: 16px !important;
    background: linear-gradient(135deg, rgba(6,182,212,0.08), rgba(59,130,246,0.08), rgba(139,92,246,0.08)) !important;
    border-bottom: 1px solid rgba(226,232,240,0.5) !important;
}

html.dark .profile-dropdown-header,
html.dark .dropdown-header {
    background: linear-gradient(135deg, rgba(6,182,212,0.12), rgba(59,130,246,0.12), rgba(139,92,246,0.12)) !important;
    border-bottom-color: rgba(71,85,105,0.4) !important;
}

/* Header içindeki Avatar */
.profile-dropdown-header .h-10,
.dropdown-header img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #06b6d4, #3b82f6, #8b5cf6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    color: white !important;
    font-size: 18px !important;
    box-shadow: 0 4px 12px rgba(6,182,212,0.3) !important;
}

/* Header İsim ve Email */
#profile-dropdown-name,
.dropdown-header p:first-child {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
}

html:not(.dark) #profile-dropdown-name,
html:not(.dark) .dropdown-header p:first-child {
    color: #0f172a !important;
}

html.dark #profile-dropdown-name,
html.dark .dropdown-header p:first-child {
    color: #f8fafc !important;
}

#profile-dropdown-email,
.dropdown-email {
    font-size: 12px !important;
    opacity: 0.7 !important;
}

/* Header Plan Badge */
#profile-dropdown-plan,
#dropdown-user-plan-badge,
.plan-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Menu Items - Profesyonel Görünüm */
.profile-dropdown-item,
.dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border: none !important;
    background: none !important;
    width: 100% !important;
    text-align: left !important;
    cursor: pointer !important;
}

html:not(.dark) .profile-dropdown-item,
html:not(.dark) .dropdown-item {
    color: #334155 !important;
}

html.dark .profile-dropdown-item,
html.dark .dropdown-item {
    color: #e2e8f0 !important;
}

.profile-dropdown-item:hover,
.dropdown-item:hover {
    background: linear-gradient(90deg, rgba(6,182,212,0.08), rgba(59,130,246,0.05)) !important;
    padding-left: 20px !important;
}

html.dark .profile-dropdown-item:hover,
html.dark .dropdown-item:hover {
    background: linear-gradient(90deg, rgba(6,182,212,0.15), rgba(59,130,246,0.1)) !important;
}

/* Menu Item Icons */
.profile-dropdown-item svg,
.dropdown-item svg {
    width: 20px !important;
    height: 20px !important;
    opacity: 0.7 !important;
    flex-shrink: 0 !important;
}

.profile-dropdown-item:hover svg,
.dropdown-item:hover svg {
    opacity: 1 !important;
    color: #06b6d4 !important;
}

/* Upgrade Item - Özel Vurgu */
.dropdown-item.upgrade {
    background: linear-gradient(90deg, rgba(168,85,247,0.08), rgba(236,72,153,0.05)) !important;
    color: #9333ea !important;
}

html.dark .dropdown-item.upgrade {
    background: linear-gradient(90deg, rgba(168,85,247,0.15), rgba(236,72,153,0.1)) !important;
    color: #c084fc !important;
}

.dropdown-item.upgrade:hover {
    background: linear-gradient(90deg, rgba(168,85,247,0.15), rgba(236,72,153,0.1)) !important;
    padding-left: 20px !important;
}

.dropdown-item.upgrade svg {
    color: #a855f7 !important;
}

/* Divider */
.profile-dropdown-divider,
.dropdown-divider {
    height: 1px !important;
    margin: 8px 16px !important;
    background: linear-gradient(90deg, transparent, rgba(148,163,184,0.3), transparent) !important;
}

/* Logout Button - Kırmızı Vurgu */
.profile-dropdown-logout,
.dropdown-item.logout {
    color: #ef4444 !important;
}

.profile-dropdown-logout:hover,
.dropdown-item.logout:hover {
    background: linear-gradient(90deg, rgba(239,68,68,0.08), rgba(239,68,68,0.03)) !important;
    color: #dc2626 !important;
}

html.dark .profile-dropdown-logout:hover,
html.dark .dropdown-item.logout:hover {
    background: linear-gradient(90deg, rgba(239,68,68,0.15), rgba(239,68,68,0.08)) !important;
    color: #f87171 !important;
}

.profile-dropdown-logout svg,
.dropdown-item.logout svg {
    color: #ef4444 !important;
}

/* Hidden State */
.profile-dropdown-menu.hidden,
.user-dropdown.hidden,
#profile-dropdown-menu.hidden,
#user-dropdown.hidden {
    display: none !important;
}