/*
=============================================================================
FRONTEND USER DROPDOWN - Admin Panel Uyumlu Modern Tasarım
Frontend kullanıcı dropdown'ı için admin panel ile aynı tasarım
=============================================================================
*/

/* ==========================================================================
   FRONTEND HEADER BUTTON - Admin Panel Stili
   ========================================================================== */

/* Frontend header için modern button tasarımı - Login öncesi ile tutarlı */
.header-account .header-button-standard {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  margin: 0 6px !important;
  border-radius: 8px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: #ffffff !important;
  border: 2px solid #28364a !important;
  color: #28364a !important;
  text-decoration: none !important;
  min-height: 40px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  gap: 8px !important;
  box-shadow: 0 2px 8px rgba(40, 54, 74, 0.1) !important;
}

.header-account .header-button-standard:hover {
  background: #f8f9fa !important;
  border-color: #1e2a3a !important;
  color: #1e2a3a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(40, 54, 74, 0.2) !important;
  text-decoration: none !important;
}

.header-account .header-button-standard:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(40, 54, 74, 0.2), 0 6px 20px rgba(40, 54, 74, 0.2) !important;
}

.header-account .header-button-standard:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(40, 54, 74, 0.15) !important;
}

/* Frontend Header Button Icons - Modern beyaz tasarıma uyumlu */
.header-account .header-button-icon {
  display: flex !important;
  align-items: center !important;
}

.header-account .header-button-icon .user-avatar {
  width: 28px !important;
  height: 28px !important;
  border: 2px solid rgba(40, 54, 74, 0.2) !important;
  margin-right: 0 !important;
  object-fit: cover !important;
}

.header-account .header-button-icon .user-avatar-initials {
  width: 28px !important;
  height: 28px !important;
  background: linear-gradient(135deg, #28364a 0%, #1e2a3a 100%) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  border: 2px solid rgba(40, 54, 74, 0.2) !important;
}

/* FontAwesome User Avatar Placeholder - Modern beyaz tasarıma uyumlu */
.header-account .header-button-icon .user-avatar-placeholder {
  width: 28px !important;
  height: 28px !important;
  background: #28364a !important;
  color: #ffffff !important;
  font-size: 12px !important;
  border: 2px solid rgba(40, 54, 74, 0.2) !important;
  margin-right: 0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Modern hover efekti - beyaz buton tasarımına uyumlu */
.header-account .header-button-standard:hover .header-button-icon .user-avatar-placeholder {
  background: #1e2a3a !important;
  border-color: rgba(30, 42, 58, 0.4) !important;
  transform: scale(1.05) !important;
}

/* Modern subtle pulse animasyonu */
.header-account .header-button-icon .user-avatar-placeholder {
  animation: modernAvatarPulse 3s ease-in-out infinite !important;
}

@keyframes modernAvatarPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(40, 54, 74, 0.15) !important;
  }

  70% {
    box-shadow: 0 0 0 3px rgba(40, 54, 74, 0) !important;
  }

  100% {
    box-shadow: 0 0 0 0 rgba(40, 54, 74, 0) !important;
  }
}

/* Avatar hover efektleri - modern beyaz tasarıma uyumlu */
.header-account .header-button-standard:hover .header-button-icon .user-avatar,
.header-account .header-button-standard:hover .header-button-icon .user-avatar-initials {
  border-color: rgba(30, 42, 58, 0.4) !important;
  transform: scale(1.05) !important;
}

/* user-avatar-placeholder için özel hover kuralı yukarıda tanımlandı */

/* Frontend Header Button Arrow - Modern beyaz tasarıma uyumlu */
.header-account .header-button-arrow {
  color: rgba(40, 54, 74, 0.7) !important;
  margin-left: 8px !important;
  font-size: 10px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.header-account .header-button-standard:hover .header-button-arrow {
  color: white !important;
  transform: translateY(-1px) !important;
}

.header-account .header-button-text {
  color: #28364a !important;
  font-weight: 600 !important;
  margin: 0 4px !important;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.header-account .header-button-standard:hover .header-button-text {
  color: #1e2a3a !important;
}

.header-account .header-button-text .user-name {
  color: white;
  font-weight: inherit !important;
}

/* ==========================================================================
   ADMIN PANEL UYUMLU USER DROPDOWN MENU
   ========================================================================== */

.user-dropdown-menu {
  min-width: 320px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.15),
    0 4px 10px rgba(0, 0, 0, 0.1) !important;
  background: #ffffff !important;
  margin-top: 15px !important;
  overflow: hidden !important;
  animation: dropdownFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  z-index: 1000 !important;
  transform: none !important;
  will-change: auto !important;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==========================================================================
   USER DROPDOWN HEADER - Kompakt User Info Display
   ========================================================================== */

.user-dropdown-header {
  background: linear-gradient(135deg, #f8fafb 0%, #e8f0f4 100%) !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.user-dropdown-avatar {
  width: 44px !important;
  height: 44px !important;
  object-fit: cover !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  margin-right: 12px !important;
}

.user-dropdown-avatar-initials {
  width: 44px !important;
  height: 44px !important;
  background: linear-gradient(135deg, #28364a 0%, #1e2a3a 100%) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  margin-right: 12px !important;
}

/* FontAwesome User Avatar Placeholder - Dropdown Header */
.user-dropdown-avatar-placeholder {
  width: 44px !important;
  height: 44px !important;
  background: linear-gradient(135deg, #28364a 0%, #1e2a3a 100%) !important;
  color: #ffffff !important;
  font-size: 18px !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  margin-right: 12px !important;
}

.user-dropdown-info {
  flex: 1 !important;
}

.user-dropdown-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a2b3d !important;
  margin-bottom: 2px !important;
  line-height: 1.3 !important;
}

.user-dropdown-email {
  font-size: 12px !important;
  color: #6c757d !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
}

.user-dropdown-role {
  font-size: 11px !important;
  color: #495057 !important;
  font-weight: 500 !important;
  padding: 3px 6px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  border-radius: 10px !important;
  display: inline-block !important;
  line-height: 1.2 !important;
}

/* ==========================================================================
   DROPDOWN ITEMS - Kompakt Menu Items
   ========================================================================== */

.user-dropdown-item {
  display: flex !important;
  align-items: center !important;
  padding: 10px 20px !important;
  color: #495057 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  text-align: left !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.user-dropdown-item:hover {
  background: #f8f9fa !important;
  color: #28364a !important;
  text-decoration: none !important;
}

.user-dropdown-item:focus {
  outline: none !important;
  background: #e9ecef !important;
  color: #28364a !important;
}

.user-dropdown-item i {
  width: 14px !important;
  text-align: center !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
}

.user-dropdown-item small {
  font-size: 10px !important;
  opacity: 0.7 !important;
  transition: opacity 0.3s ease !important;
}

.user-dropdown-item:hover small {
  opacity: 1 !important;
}

.user-dropdown-item.text-danger:hover {
  background: #f8d7da !important;
  color: #dc3545 !important;
}

/* Account Status */
.user-account-status {
  padding: 10px 20px !important;
  background: #f8f9fa !important;
  border-top: 1px solid #e9ecef !important;
  border-bottom: 1px solid #e9ecef !important;
  margin: 6px 0 !important;
}

.user-account-status small {
  font-size: 10px !important;
  line-height: 1.4 !important;
}

.user-account-status .fas.fa-clock {
  color: #6c757d !important;
  opacity: 0.8 !important;
}

/* Badge Styling - Admin paneldeki gibi normalleştirilmiş font weight */
.user-dropdown-menu .badge.bg-success {
  background: linear-gradient(135deg, #38a169 0%, #2f855a 100%) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  padding: 7px 12px !important;
  font-weight: 400 !important;
}

/* ==========================================================================
   DROPDOWN DIVIDERS
   ========================================================================== */

.user-dropdown-menu .dropdown-divider {
  margin: 0 !important;
  border-top: 1px solid #f1f3f4 !important;
  opacity: 1 !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN - Mobile Optimizations
   ========================================================================== */

@media (max-width: 768px) {
  .header-account .header-button-standard {
    padding: 6px 12px !important;
    min-height: 36px !important;
  }

  .header-account .header-button-icon .user-avatar,
  .header-account .header-button-icon .user-avatar-initials,
  .header-account .header-button-icon .user-avatar-placeholder {
    width: 24px !important;
    height: 24px !important;
  }

  .header-account .header-button-icon .user-avatar-initials,
  .header-account .header-button-icon .user-avatar-placeholder {
    font-size: 10px !important;
  }

  .user-dropdown-menu {
    min-width: 280px !important;
    margin-top: 5px !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
  }

  .user-dropdown-header {
    padding: 16px !important;
  }

  .user-dropdown-avatar,
  .user-dropdown-avatar-initials,
  .user-dropdown-avatar-placeholder {
    width: 40px !important;
    height: 40px !important;
  }

  .user-dropdown-avatar-initials,
  .user-dropdown-avatar-placeholder {
    font-size: 16px !important;
  }

  .user-dropdown-name {
    font-size: 15px !important;
  }

  .user-dropdown-item {
    padding: 14px 16px !important;
  }
}

/* ==========================================================================
   DROPDOWN ARROW ANIMATION - Admin Panel Uyumlu
   ========================================================================== */

.dropdown.show .header-button-arrow {
  transform: rotate(180deg) !important;
}

/* Frontend header background güncelleme - Dark theme uyumlu */
.header-account .header-button-standard {
  box-shadow: none !important;
}

.header-account .header-button-standard:hover {
  box-shadow: 0 2px 8px rgba(40, 54, 74, 0.1) !important;
}

/* Frontend için ek positioning düzeltmeleri */
.header-account {
  position: relative !important;
}

.header-account .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  float: none !important;
  min-width: 320px !important;
  margin: 0 !important;
  transform: none !important;
}

/* ==========================================================================
   DARK MODE SUPPORT - Frontend User Dropdown
   ========================================================================== */

/* Dark Mode Header Button Override */
body.dark-mode .header-account .header-button-standard {
  background: rgba(52, 73, 94, 0.6) !important;
  border: 1px solid rgba(76, 95, 115, 0.4) !important;
  color: #ecf0f1 !important;
}

body.dark-mode .header-account .header-button-standard:hover {
  background: rgba(118, 183, 41, 0.8) !important;
  border-color: rgba(118, 183, 41, 0.6) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(118, 183, 41, 0.3) !important;
}

body.dark-mode .header-account .header-button-arrow {
  color: rgba(236, 240, 241, 0.7) !important;
}

body.dark-mode .header-account .header-button-text {
  color: #ecf0f1 !important;
}

body.dark-mode .header-account .header-button-text .user-name {
  color: #ecf0f1 !important;
}

/* Dark Mode Avatar Placeholders */
body.dark-mode .header-account .header-button-icon .user-avatar-placeholder {
  background: linear-gradient(135deg, #1e2a3a 0%, #15202b 100%) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

body.dark-mode .header-account .header-button-standard:hover .header-button-icon .user-avatar-placeholder {
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Dark Mode Dropdown Menu */
body.dark-mode .user-dropdown-menu {
  background: #34495e !important;
  border: 1px solid #4a5f73 !important;
  box-shadow: 0 15px 35px rgba(30, 42, 58, 0.8) !important;
}

body.dark-mode .user-dropdown-header {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
  border-bottom-color: #4a5f73 !important;
}

body.dark-mode .user-dropdown-name {
  color: #ecf0f1 !important;
}

body.dark-mode .user-dropdown-email {
  color: #bdc3c7 !important;
}

body.dark-mode .user-dropdown-role {
  background: rgba(52, 73, 94, 0.7) !important;
  color: #ecf0f1 !important;
}

body.dark-mode .user-dropdown-avatar-placeholder {
  background: linear-gradient(135deg, #28364a 0%, #1e2a3a 100%) !important;
  border-color: #4a5f73 !important;
}

body.dark-mode .user-dropdown-item {
  color: #bdc3c7 !important;
}

body.dark-mode .user-dropdown-item:hover {
  background: linear-gradient(135deg, #3d4f63 0%, #34495e 100%) !important;
  color: #ecf0f1 !important;
  border-left-color: #76b729 !important;
}

body.dark-mode .user-account-status {
  background: #2c3e50 !important;
  border-color: #4a5f73 !important;
}

body.dark-mode .user-account-status small {
  color: #95a5a6 !important;
}

body.dark-mode .user-account-status .fas.fa-clock {
  color: #95a5a6 !important;
  opacity: 0.8 !important;
}

/* Mobile responsive dark mode support */
@media (max-width: 768px) {
  body.dark-mode .header-account .header-button-icon .user-avatar-placeholder {
    background: linear-gradient(135deg, #1e2a3a 0%, #15202b 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
  }

  body.dark-mode .user-dropdown-avatar-placeholder {
    background: linear-gradient(135deg, #28364a 0%, #1e2a3a 100%) !important;
    border-color: #4a5f73 !important;
  }

  body.dark-mode .user-account-status .fas.fa-clock {
    color: #95a5a6 !important;
    opacity: 0.8 !important;
  }
}

@media (max-width: 576px) {
  body.dark-mode .header-account .header-button-icon .user-avatar-placeholder {
    background: linear-gradient(135deg, #1e2a3a 0%, #15202b 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
  }

  body.dark-mode .user-dropdown-avatar-placeholder {
    background: linear-gradient(135deg, #28364a 0%, #1e2a3a 100%) !important;
    border-color: #4a5f73 !important;
  }

  body.dark-mode .user-account-status .fas.fa-clock {
    color: #95a5a6 !important;
    opacity: 0.8 !important;
  }
}

/* ==========================================================================
   LOGIN ÖNCESİ HEADER BUTONLARI - Admin Panel Uyumlu Boyutlandırma
   ========================================================================== */

/* Header Group Container */
.header-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Container positioning for dropdowns */
.header-selection,
.header-auth {
  position: relative !important;
}

/* Dark Mode Toggle Button - Lacivert Arka Plan */
.header-selection-btn.dark-mode-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  margin: 0 4px !important;
  border-radius: 25px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: #28364a !important;
  border: 1px solid #1e2a3a !important;
  color: #ffffff !important;
  text-decoration: none !important;
  min-height: 36px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  width: auto !important;
  min-width: 36px !important;
}

.header-selection-btn.dark-mode-toggle:hover {
  background: #1e2a3a !important;
  border-color: #15202b !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(40, 54, 74, 0.3) !important;
}

.header-selection-btn.dark-mode-toggle:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(40, 54, 74, 0.3) !important;
}

/* Dil Seçimi Button - Lacivert Arka Plan */
.header-selection .header-selection-btn {
  display: flex !important;
  align-items: center !important;
  padding: 6px 12px !important;
  margin: 0 4px !important;
  border-radius: 25px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: #28364a !important;
  border: 1px solid #1e2a3a !important;
  color: #ffffff !important;
  text-decoration: none !important;
  min-height: 36px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  gap: 6px !important;
}

.header-selection .header-selection-btn:hover {
  background: #1e2a3a !important;
  border-color: #15202b !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(40, 54, 74, 0.3) !important;
}

.header-selection .header-selection-btn:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(40, 54, 74, 0.3) !important;
}

.header-selection .header-selection-btn span {
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* SVG Bayrak Stilleri */
.header-selection .header-selection-btn svg {
  margin-right: 8px !important;
  flex-shrink: 0 !important;
  border-radius: 2px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.header-selection-list li a svg {
  margin-right: 8px !important;
  flex-shrink: 0 !important;
  border-radius: 2px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.header-selection .header-selection-btn i {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 10px !important;
  transition: transform 0.3s ease !important;
}

.header-selection:hover .header-selection-btn i {
  transform: rotate(180deg) !important;
}

/* Login Button - Lacivert Arka Plan */
.header-auth .header-auth-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  margin: 0 4px !important;
  border-radius: 25px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: #28364a !important;
  border: 1px solid #1e2a3a !important;
  color: #ffffff !important;
  text-decoration: none !important;
  min-height: 36px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  width: auto !important;
  min-width: 36px !important;
}

.header-auth .header-auth-btn:hover {
  background: #1e2a3a !important;
  border-color: #15202b !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(40, 54, 74, 0.3) !important;
}

.header-auth .header-auth-btn:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(40, 54, 74, 0.3) !important;
}

/* Login Nav Dropdown */
.header-auth-navs {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  min-width: 200px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.15),
    0 4px 10px rgba(0, 0, 0, 0.1) !important;
  background: #ffffff !important;
  margin-top: 15px !important;
  overflow: hidden !important;
  animation: dropdownFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 1000 !important;
}

.header-auth-navs a {
  display: flex !important;
  align-items: center !important;
  padding: 14px 20px !important;
  color: #495057 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  gap: 8px !important;
}

.header-auth-navs a:hover {
  background: #f8f9fa !important;
  color: #28364a !important;
  text-decoration: none !important;
  transform: translateX(2px) !important;
}

.header-auth-navs a svg {
  flex-shrink: 0 !important;
}

.header-auth-navs a span {
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Language Selection Dropdown */
.header-selection-list {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  min-width: 180px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.15),
    0 4px 10px rgba(0, 0, 0, 0.1) !important;
  background: #ffffff !important;
  margin-top: 15px !important;
  overflow: hidden !important;
  animation: dropdownFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 1000 !important;
  list-style: none !important;
}

.header-selection-list li {
  margin: 0 !important;
  padding: 0 !important;
}

.header-selection-list li a {
  display: flex !important;
  align-items: center !important;
  padding: 14px 20px !important;
  color: #495057 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.header-selection-list li a:hover {
  background: #f8f9fa !important;
  color: #28364a !important;
  text-decoration: none !important;
  transform: translateX(2px) !important;
}

.header-selection-list li a span {
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   LOGIN ÖNCESİ BUTONLAR - DARK MODE DESTEĞİ
   ========================================================================== */

/* Dark Mode - Dark Mode Toggle Button */
body.dark-mode .header-selection-btn.dark-mode-toggle {
  background: rgba(118, 183, 41, 0.9) !important;
  border-color: rgba(118, 183, 41, 0.8) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(118, 183, 41, 0.4) !important;
}

body.dark-mode .header-selection-btn.dark-mode-toggle:hover {
  background: rgba(118, 183, 41, 1) !important;
  border-color: rgba(118, 183, 41, 0.9) !important;
  box-shadow: 0 6px 20px rgba(118, 183, 41, 0.5) !important;
}

/* Dark Mode - Language Selection Button */
body.dark-mode .header-selection .header-selection-btn {
  background: #1e2a3a !important;
  border: 1px solid #15202b !important;
  color: #ecf0f1 !important;
}

body.dark-mode .header-selection .header-selection-btn:hover {
  background: #15202b !important;
  border-color: #0f1419 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(30, 42, 58, 0.4) !important;
}

body.dark-mode .header-selection .header-selection-btn span {
  color: #ecf0f1 !important;
}

body.dark-mode .header-selection .header-selection-btn:hover span {
  color: #ffffff !important;
}

body.dark-mode .header-selection .header-selection-btn i {
  color: rgba(236, 240, 241, 0.8) !important;
}

body.dark-mode .header-selection .header-selection-btn:hover i {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Dark Mode SVG Bayrak Stilleri */
body.dark-mode .header-selection .header-selection-btn svg {
  border-color: rgba(236, 240, 241, 0.3) !important;
}

body.dark-mode .header-selection-list li a svg {
  border-color: rgba(76, 95, 115, 0.4) !important;
}

/* Dark Mode - Login Button */
body.dark-mode .header-auth .header-auth-btn {
  background: #1e2a3a !important;
  border: 1px solid #15202b !important;
  color: #ecf0f1 !important;
}

body.dark-mode .header-auth .header-auth-btn:hover {
  background: #15202b !important;
  border-color: #0f1419 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(30, 42, 58, 0.4) !important;
}

/* Dark Mode - Dropdown Menus */
body.dark-mode .header-auth-navs,
body.dark-mode .header-selection-list {
  background: #34495e !important;
  border: 1px solid #4a5f73 !important;
  box-shadow: 0 15px 35px rgba(30, 42, 58, 0.8) !important;
}

body.dark-mode .header-auth-navs a,
body.dark-mode .header-selection-list li a {
  color: #bdc3c7 !important;
}

body.dark-mode .header-auth-navs a:hover,
body.dark-mode .header-selection-list li a:hover {
  background: linear-gradient(135deg, #3d4f63 0%, #34495e 100%) !important;
  color: #ecf0f1 !important;
}

body.dark-mode .header-auth-navs a span,
body.dark-mode .header-selection-list li a span {
  color: inherit !important;
}

/* SVG Icons Dark Mode Support */
body.dark-mode .header-auth-navs a svg path {
  fill: #bdc3c7 !important;
}

body.dark-mode .header-auth-navs a:hover svg path {
  fill: #ecf0f1 !important;
}



/* ==========================================================================
   LOGIN ÖNCESİ BUTONLAR - RESPONSIVE TASARIM
   ========================================================================== */

@media (max-width: 768px) {
  .header-group {
    gap: 6px !important;
  }

  .header-selection-btn.dark-mode-toggle,
  .header-auth .header-auth-btn,
  .header-btn,
  .header-button,
  .panel-btn,
  a[href*="admin"],
  button[class*="panel"] {
    padding: 8px 8px !important;
    min-height: 32px !important;
    min-width: 32px !important;
    margin: 0 2px !important;
  }

  .header-selection .header-selection-btn {
    padding: 6px 8px !important;
    min-height: 32px !important;
    margin: 0 2px !important;
    font-size: 13px !important;
    gap: 4px !important;
  }

  .header-account .header-button-standard {
    padding: 6px 8px !important;
    min-height: 32px !important;
    margin: 0 2px !important;
  }

  .header-account .header-button-icon {
    margin-right: 6px !important;
  }

  .header-account .header-button-icon .user-avatar,
  .header-account .header-button-icon .user-avatar-placeholder {
    width: 20px !important;
    height: 20px !important;
    margin-right: 0 !important;
  }

  .header-account .header-button-icon .user-avatar-placeholder {
    font-size: 8px !important;
  }

  .header-account .header-button-text {
    margin: 0 3px !important;
  }

  .header-account .header-button-arrow {
    margin-left: 6px !important;
  }

  .header-selection .header-selection-btn span {
    font-size: 13px !important;
  }

  /* Mobile'da dropdown'ları daha küçük yap */
  .header-auth-navs,
  .header-selection-list {
    min-width: 160px !important;
    margin-top: 10px !important;
  }

  .user-dropdown-menu {
    min-width: 280px !important;
    margin-top: 10px !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
  }

  .user-dropdown-header {
    padding: 12px 16px !important;
  }

  .user-dropdown-avatar,
  .user-dropdown-avatar-initials,
  .user-dropdown-avatar-placeholder {
    width: 36px !important;
    height: 36px !important;
    margin-right: 8px !important;
  }

  .user-dropdown-avatar-initials,
  .user-dropdown-avatar-placeholder {
    font-size: 14px !important;
  }

  .user-dropdown-name {
    font-size: 14px !important;
  }

  .user-dropdown-item {
    padding: 8px 16px !important;
    font-size: 12px !important;
  }

  .user-dropdown-item i {
    width: 12px !important;
    margin-right: 8px !important;
  }

  .header-auth-navs a,
  .header-selection-list li a {
    padding: 10px 14px !important;
    font-size: 12px !important;
  }

  .header-auth-navs a span,
  .header-selection-list li a span {
    font-size: 12px !important;
  }
}

@media (max-width: 576px) {
  .header-group {
    gap: 4px !important;
  }

  .header-selection-btn.dark-mode-toggle,
  .header-auth .header-auth-btn,
  .header-btn,
  .header-button,
  .panel-btn,
  a[href*="admin"],
  button[class*="panel"] {
    padding: 8px 6px !important;
    min-height: 28px !important;
    min-width: 28px !important;
    margin: 0 1px !important;
  }

  .header-selection .header-selection-btn {
    padding: 6px 6px !important;
    min-height: 28px !important;
    margin: 0 1px !important;
    font-size: 12px !important;
  }

  .header-account .header-button-standard {
    padding: 6px 6px !important;
    min-height: 28px !important;
    margin: 0 1px !important;
  }

  .header-account .header-button-icon {
    margin-right: 4px !important;
  }

  .header-account .header-button-icon .user-avatar,
  .header-account .header-button-icon .user-avatar-placeholder {
    width: 18px !important;
    height: 18px !important;
    margin-right: 0 !important;
  }

  .header-account .header-button-icon .user-avatar-placeholder {
    font-size: 7px !important;
  }

  .header-account .header-button-text {
    margin: 0 2px !important;
  }

  .header-account .header-button-arrow {
    margin-left: 4px !important;
  }

  .header-selection .header-selection-btn span {
    display: none !important; /* Mobile'da sadece bayrak göster */
  }

  .user-dropdown-menu {
    min-width: 260px !important;
  }

  .user-dropdown-avatar,
  .user-dropdown-avatar-initials,
  .user-dropdown-avatar-placeholder {
    width: 32px !important;
    height: 32px !important;
    margin-right: 6px !important;
  }

  .user-dropdown-avatar-initials,
  .user-dropdown-avatar-placeholder {
    font-size: 12px !important;
  }

  .user-dropdown-item {
    padding: 6px 14px !important;
    font-size: 11px !important;
  }

  .header-auth-navs,
  .header-selection-list {
    min-width: 140px !important;
  }

  .header-auth-navs a,
  .header-selection-list li a {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
}

/* ==========================================================================
   LOGIN ÖNCESİ BUTONLAR - Standart Header Button Stili
   ========================================================================== */

/* Tüm login öncesi butonlar için ortak stiller */
.header-group .header-selection-btn,
.header-group .header-button-standard {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  margin: 0 4px !important;
  border-radius: 25px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: #28364a !important;
  border: 1px solid #1e2a3a !important;
  color: #ffffff !important;
  text-decoration: none !important;
  min-height: 36px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  gap: 6px !important;
}

.header-group .header-selection-btn:hover,
.header-group .header-button-standard:hover {
  background: #1e2a3a !important;
  border-color: #15202b !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(40, 54, 74, 0.3) !important;
  text-decoration: none !important;
}

.header-group .header-selection-btn:focus,
.header-group .header-button-standard:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(40, 54, 74, 0.3) !important;
}

/* Login butonu span */
.header-group .header-button-standard span {
  color: #ffffff !important;
  font-weight: 500 !important;
  margin-left: 4px !important;
}

/* SVG iconlar için currentColor */
.header-group .header-button-standard svg {
  flex-shrink: 0 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   LOGIN ÖNCESİ BUTONLAR - Modern Tasarım
   ========================================================================== */

/* Modern Login Butonu - Beyaz arkaplan, lacivert çerçeve */
.header-button-modern {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  margin: 0 6px !important;
  border-radius: 8px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: #ffffff !important;
  border: 2px solid #28364a !important;
  color: #28364a !important;
  text-decoration: none !important;
  min-height: 40px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  gap: 8px !important;
  box-shadow: 0 2px 8px rgba(40, 54, 74, 0.1) !important;
}

.header-button-modern:hover {
  background: #f8f9fa !important;
  border-color: #1e2a3a !important;
  color: #1e2a3a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(40, 54, 74, 0.2) !important;
  text-decoration: none !important;
}

.header-button-modern:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(40, 54, 74, 0.2), 0 6px 20px rgba(40, 54, 74, 0.2) !important;
}

.header-button-modern:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(40, 54, 74, 0.15) !important;
}

.header-button-modern span {
  color: inherit !important;
  font-weight: 600 !important;
  margin-left: 4px !important;
}

.header-button-modern svg {
  flex-shrink: 0 !important;
  color: inherit !important;
}

/* ==========================================================================
   HAMBURGER MENU - Dil ve Dark Mode için
   ========================================================================== */

.header-hamburger-menu {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.header-hamburger-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  background: #ffffff !important;
  border: 2px solid #28364a !important;
  border-radius: 8px !important;
  color: #28364a !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 8px rgba(40, 54, 74, 0.1) !important;
}

.header-hamburger-btn:hover {
  background: #f8f9fa !important;
  border-color: #1e2a3a !important;
  color: #1e2a3a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(40, 54, 74, 0.2) !important;
}

.header-hamburger-btn.active {
  background: #28364a !important;
  border-color: #28364a !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.header-hamburger-btn.active:hover {
  background: #1e2a3a !important;
  border-color: #1e2a3a !important;
  color: #ffffff !important;
}

.header-hamburger-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  min-width: 280px !important;
  background: #ffffff !important;
  border: 2px solid #e9ecef !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-10px) scale(0.95) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 9999 !important;
  backdrop-filter: blur(10px) !important;
}

.header-hamburger-dropdown.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
}

.hamburger-item {
  padding: 0 !important;
  border-bottom: 1px solid #f1f3f4 !important;
}

.hamburger-item:last-child {
  border-bottom: none !important;
}

/* Dark Mode Toggle */
.hamburger-option {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 12px 16px !important;
  background: transparent !important;
  border: none !important;
  color: #495057 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  gap: 12px !important;
}

.hamburger-option:hover {
  background: #f8f9fa !important;
  color: #28364a !important;
}

.hamburger-option.active {
  background: #e3f2fd !important;
  color: #1976d2 !important;
}

.hamburger-option i {
  font-size: 16px !important;
  width: 20px !important;
  text-align: center !important;
}

/* Language Section */
.hamburger-language-section {
  padding: 8px 0 !important;
}

.hamburger-section-title {
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #6c757d !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1px solid #f1f3f4 !important;
  margin-bottom: 4px !important;
}

.hamburger-language-list {
  max-height: 200px !important;
  overflow-y: auto !important;
}

.hamburger-language-option {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 10px 16px !important;
  color: #495057 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  gap: 12px !important;
}

.hamburger-language-option:hover {
  background: #f8f9fa !important;
  color: #28364a !important;
  text-decoration: none !important;
}

.hamburger-language-option.active {
  background: linear-gradient(135deg, #e8f5e8 0%, #f0f8ff 100%) !important;
  color: #28364a !important;
  font-weight: 600 !important;
  border-left: 3px solid #76b729 !important;
}

.hamburger-language-option svg {
  flex-shrink: 0 !important;
  border-radius: 2px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================================
   DARK MODE SUPPORT - Hamburger Menu
   ========================================================================== */

body.dark-mode .header-button-modern {
  background: #2d3748 !important;
  border-color: #4a5568 !important;
  color: #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .header-button-modern:hover {
  background: #4a5568 !important;
  border-color: #718096 !important;
  color: #f7fafc !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .header-hamburger-btn {
  background: #2d3748 !important;
  border-color: #4a5568 !important;
  color: #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .header-hamburger-btn:hover {
  background: #4a5568 !important;
  border-color: #718096 !important;
  color: #f7fafc !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .header-hamburger-btn.active {
  background: #e2e8f0 !important;
  border-color: #e2e8f0 !important;
  color: #2d3748 !important;
}

body.dark-mode .header-hamburger-dropdown {
  background: #2d3748 !important;
  border-color: #4a5568 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .hamburger-item {
  border-bottom-color: #4a5568 !important;
}

body.dark-mode .hamburger-option {
  color: #e2e8f0 !important;
}

body.dark-mode .hamburger-option:hover {
  background: #4a5568 !important;
  color: #f7fafc !important;
}

body.dark-mode .hamburger-option.active {
  background: #1a365d !important;
  color: #63b3ed !important;
}

body.dark-mode .hamburger-section-title {
  color: #a0aec0 !important;
  border-bottom-color: #4a5568 !important;
}

body.dark-mode .hamburger-language-option {
  color: #e2e8f0 !important;
}

body.dark-mode .hamburger-language-option:hover {
  background: #4a5568 !important;
  color: #f7fafc !important;
}

body.dark-mode .hamburger-language-option.active {
  background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%) !important;
  color: #81c784 !important;
  border-left-color: #81c784 !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN - Mobil Desteği
   ========================================================================== */

@media (max-width: 768px) {
  .header-button-modern {
    padding: 6px 12px !important;
    font-size: 13px !important;
    min-height: 36px !important;
    gap: 6px !important;
  }

  .header-button-modern span {
    display: none !important;
  }

  .header-hamburger-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }

  .header-hamburger-dropdown {
    min-width: 260px !important;
    right: -10px !important;
  }

  .hamburger-option {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  .hamburger-language-option {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  .hamburger-section-title {
    padding: 6px 14px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 576px) {
  .header-button-modern {
    margin: 0 3px !important;
    padding: 6px 10px !important;
  }

  .header-hamburger-dropdown {
    min-width: 240px !important;
    right: -20px !important;
  }

  .hamburger-language-list {
    max-height: 160px !important;
  }
}