/* Şeffaf Butonlar CSS */

/* Ana buton stili */
.btn, 
button:not(.close-settings):not(.vocabulary-action):not(.nav-icon), 
.login-button {
  background-color: #DD0000 !important;
  border: 2px solid #DD0000 !important;
  color: white !important;
  font-weight: bold;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(221, 0, 0, 0.3) !important;
}

/* Hover efekti */
.btn:hover, 
button:not(.close-settings):not(.vocabulary-action):not(.nav-icon):hover, 
.login-button:hover {
  background-color: #bb0000 !important;
  border-color: #bb0000 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(221, 0, 0, 0.4) !important;
}

/* Dark mode kodları - Karanlık tema için buton rengi ayarlamaları */
body.dark-mode .btn, 
body.dark-mode button:not(.close-settings):not(.vocabulary-action):not(.nav-icon), 
body.dark-mode .login-button {
  /* Dark mode'da buton çerçeveleri sarı olur (Alman bayrağı sarısı) */
  border-color: #FFCE00 !important;
  color: #FFCE00 !important;
}

/* Dark mode'da buton hover efektleri */
body.dark-mode .btn:hover, 
body.dark-mode button:not(.close-settings):not(.vocabulary-action):not(.nav-icon):hover, 
body.dark-mode .login-button:hover {
  /* Hover durumunda hafif sarı arka plan */
  background-color: rgba(255, 206, 0, 0.1) !important;
}

/* Oyun kartları kart başlıklarındaki butonlar */
.game-card-header {
  background-color: transparent !important;
  border-bottom: 2px solid #DD0000 !important;
  color: #DD0000 !important;
}

body.dark-mode .game-card-header {
  border-color: #FFCE00 !important;
  color: #FFCE00 !important;
}

/* Özel butonlar için ayarlar */
.game-button {
  background-color: transparent !important;
  border: 1px solid #DD0000 !important;
  color: #DD0000 !important;
}

body.dark-mode .game-button {
  border-color: #FFCE00 !important;
  color: #FFCE00 !important;
}

/* İçindeki yazı görünsün */
.btn span, 
button:not(.close-settings):not(.vocabulary-action):not(.nav-icon) span, 
.login-button span {
  color: inherit;
}

/* Aktif butonlar */
.btn.active, 
button.active:not(.close-settings):not(.vocabulary-action):not(.nav-icon), 
.login-button.active {
  background-color: rgba(221, 0, 0, 0.1) !important;
}

/* Oyun sayfası stilleri için özel ayarlamalar */
.game-card {
  border: 1px solid #ddd !important;
  background-color: transparent !important;
}

body.dark-mode .game-card {
  border-color: #4a5568 !important;
  background-color: transparent !important;
}

.rank {
  background-color: transparent !important;
  border: 1px solid #DD0000 !important;
  color: #DD0000 !important;
}

body.dark-mode .rank {
  border-color: #FFCE00 !important;
  color: #FFCE00 !important;
}

.badge-item {
  background-color: transparent !important;
  border: 1px solid #ddd !important;
}

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

/* Oyun sayfasındaki tablolar */
.leaderboard-table {
  background-color: transparent !important;
  border: 1px solid #ddd;
}

body.dark-mode .leaderboard-table {
  border-color: #4a5568 !important;
}

.leaderboard-header {
  background-color: transparent !important;
  border-bottom: 1px solid #ddd;
  color: #333;
}

body.dark-mode .leaderboard-header {
  border-color: #4a5568 !important;
  color: #f5f5f5;
}

/* Oyundaki ön tanımlı stilleri ezmek için önemli flag */
.flashcard-front, .flashcard-back {
  background-color: transparent !important;
  border: 1px solid #DD0000 !important;
}

body.dark-mode .flashcard-front, 
body.dark-mode .flashcard-back {
  border-color: #FFCE00 !important;
}

/* Öğrenme faydaları listesi arkaplanı */
.benefits-list li {
  background-color: transparent !important;
  border: 1px solid #ddd;
}

body.dark-mode .benefits-list li {
  border-color: #4a5568 !important;
}