body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    background-color: #f4f4f4;
    color: #333;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.logo {
    font-size: 24px;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
}

.dark-mode-toggle {
    background-color: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    transition: color 0.3s ease;
    color: #333;
}

.dark-mode-toggle i {
    transition: color 0.3s ease;
}

.dark-mode-toggle .fa-moon {
    display: none;
}

.dark-mode-toggle.active .fa-sun {
    display: none;
}

.dark-mode-toggle.active .fa-moon {
    display: inline-block;
}

.category-slider {
    display: flex;
    overflow-x: auto;
    padding: 20px;
    white-space: nowrap; 
    scrollbar-width: none; 
}

img {
  max-width: 100%; /* Görselin en fazla kapsayıcısının %100'ü kadar geniş olmasını sağlar */
  height: auto;      /* Yüksekliği otomatik olarak ayarla */
}


.category-slider::-webkit-scrollbar { 
    display: none; 
}

.slide {
    min-width: 125px; /* Slide genişliği */
    padding: 75px 75px; /* Padding ayarı */
    background-color: #fff; 
    border-radius: 5px;
    margin-right: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
}

.slide.active {
    background-color: #eee;
}

.card-view {
    padding: 20px;
}

.card {
    background-color: #fff;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: none; 
}

.card.active {
    display: block; 
}

.card-content {
    display: none; 
}

.card-content.active {
    display: block; 
    padding: 20px;
}

/* Karanlık Mod Stilleri */
body.dark-mode {
    background-color: #222;
    color: #fff;
}

.slide.active.dark-mode {
    background-color: #333; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); 
}

.card.dark-mode {
    background-color: #333;
    color: #fff; 
}

.dark-mode-toggle.active i {
    color: #fff;
}

.dark-mode-toggle.active {
    color: #000; 
}

.slide.dark-mode {
    background-color: #000; 
}

/* Sosyal medya ikonları */
.social-media {
    background-color: #f4f4f4;
    padding: 20px;
    text-align: center;
}

.social-media ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}

.social-media li {
    display: inline-block;
    margin: 0 10px;
}

.social-media a {
    color: #333;
    font-size: 24px;
    transition: color 0.3s ease;
}

.social-media a:hover {
    color: #ffc107; 
}

.social-media.dark-mode {
    background-color: #222;
}

.social-media.dark-mode a {
    color: #fff;
}

.social-media.dark-mode a:hover {
    color: #ffc107; 
}

/* Karanlık modda ikon renkleri */
.dark-mode-toggle .fa-moon {
    color: #d9d9d9; 
}

.dark-mode-toggle.active .fa-sun {
    color: #f5c623; 
}

/* Quiz stilleri */
.quiz {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 5px;
}

.quiz .question {
    margin-bottom: 10px;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 15px;
    border-radius: 10px; 
    background-color:##00000000; 
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}

.quiz .question p {
    font-size: 16px;
    margin-bottom: 10px;
    text-align: interal; 
}

.answer {
    display: block;
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
    background-color: #fff;
    border: 1px solid #ddd;
    color: #333;
}

.answer:hover {
    background-color: #e9e9e9;
}

.answer input[type="radio"]:checked + label {
    background-color: #4CAF50; /* Yeşil */
    color: #fff;
}

.answer input[type="radio"]:checked + label.wrong {
    background-color: #f44336; /* Kırmızı */
    color: #fff;
}

.quiz .result {
    margin-top: 10px;
    font-weight: bold;
    display: flex;
    justify-content: space-around;
}

#goTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #fff;
  border: none;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.7; 
  transition: opacity 0.3s ease;
}

#goTopBtn:hover {
  opacity: 1; 
}

#goTopBtn i {
  font-size: 20px; 
}

/* Karanlık modda soru çerçevesi */
.quiz .question.dark-mode {
    background-color: #111; 
    color: #fff; 
    border: 2px solid #fff; 
}

.dark-mode-toggle .fa-sun {
    color: #ffc107; /* Güneş sarı */
}

.dark-mode-toggle .fa-moon {
    color: #ffc107; /* Ay sarı */
}

/* Font Kontrol Stilleri */
.font-controls {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px; /* İçerikle arasında boşluk bırakmak için */
}

.font-controls button {
   margin: 0 5px;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff0;
    cursor: pointer;
    font-size: 14px;
    color: black;

  
}

/* ...diğer stiller... */

/* Font Kontrol Düğmeleri - Karanlık Mod */
.dark-mode .font-controls button {
  background-color: #333; /* Koyu arka plan */
  color: #fff;            /* Açık renk metin */
  border: 1px solid #ccc; /* Daha açık bir kenarlık */
}

.dark-mode .font-controls button:hover {
  background-color: #555; /* Daha açık bir hover rengi */
}