/* === GENEL AYARLAR === */
body {
  font-family: Arial, 'Poppins', sans-serif;
  transition: background 0.3s, color 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 20px;
  background: #fff;
  color: #000;
  margin: 0;
}

body.dark {
  background: #222;
  color: #fff;
}

/* === BAŞLIK === */
h1 {
  color: #333;
  text-align: center;
}

body.dark h1 {
  color: #fff;
}

/* === OTOMATİK TAMAMLAMA === */
.autocomplete-container {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.input-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  border: 2px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* === ARAMA KUTUSU === */
input {
  flex: 1;
  padding: 14px;
  font-size: 18px;
  border: none;
  outline: none;
  border-radius: 0;
}

button#searchBtn {
  padding: 14px 20px;
  font-size: 18px;
  border: none;
  background: #0052cc;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s;
}

button#searchBtn:hover {
  background: #003d99;
}

/* === OTOMATİK TAMAMLAMA ÖNERİLERİ === */
.autocomplete-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border-radius: 0 0 10px 10px;
  background: #fff;
  max-height: 250px;
  overflow-y: auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  box-sizing: border-box;
}

.autocomplete-suggestions div {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  font-size: 18px;
  color: #000;
}

.autocomplete-suggestions div:last-child {
  border-bottom: none;
}

.autocomplete-suggestions div:hover,
.autocomplete-suggestions div.active {
  background-color: #a0c4ff;
}

/* === SONUÇ ALANI === */
#result {
  margin-top: 50px;
  text-align: center;
  min-height: 80px;
}

/* === ARTİKEL RENKLERİ (LIGHT MODE) === */
#result span.artikel.der {
  color: #0b61d6; /* mavi */
  font-size: 40px;
  font-weight: bold;
}

#result span.artikel.die {
  color: #b91c1c; /* kırmızı */
  font-size: 40px;
  font-weight: bold;
}

#result span.artikel.das {
  color: #006633; /* yeşil */
  font-size: 40px;
  font-weight: bold;
}

/* === ÇOĞUL ETİKETİ === */
.plural {
  color: #6a1b9a;
  font-weight: bold;
  font-size: 25px;
  margin-right: 4px;
}

/* === KELİME VE MESAJLAR === */
#result span.word {
  font-size: 30px;
}

#result .notfound {
  color: orange;
  font-style: italic;
  font-size: 28px;
}

/* === HECELEME RENKLERİ === */
.syl-blue {
  color: #0b61d6;
  font-weight: bold;
}

.syl-red {
  color: #b91c1c;
  font-weight: bold;
}

/* === TEMA BUTONU === */
.theme-toggle {
  margin-top: 20px;
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* === DİL BUTONLARI === */
.language-buttons {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.lang-btn {
  border: none;
  background: none;
  padding: 0;
  margin: 0 5px;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  width: 50px;
  height: 35px;
}

.lang-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s, box-shadow 0.2s;
}

.lang-btn:hover img:not(.active) {
  transform: scale(1.05);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

.lang-btn.active img {
  box-shadow: 0 0 8px 2px #007bff;
  transform: scale(1.1);
}

/* === LOGO EFEKTİ (TEMA BUTONU ALTINDA) === */
#themeToggle {
  position: relative;
}

#themeToggle::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  margin-top: 15px;
  background: url("img/logo.webp") no-repeat center center;
  background-size: contain;
  opacity: 0.15;
  filter: saturate(150%) contrast(120%);
  pointer-events: none;
}

@media (max-width: 600px) {
  #themeToggle::after {
    width: 120px;
    height: 120px;
    opacity: 0.12;
  }
}

/* === MOBİL UYUMLULUK === */
@media (max-width: 600px) {
  .input-wrapper {
    flex-direction: column;
  }

  input,
  button#searchBtn {
    width: 100%;
    margin: 3px 0;
    font-size: 20px;
    padding: 16px;
  }

  #result span.artikel {
    font-size: 50px;
    margin: 0 5px;
  }

  #result span.word {
    font-size: 40px;
    margin-top: 10px;
  }

  .autocomplete-suggestions {
    max-height: 250px;
  }
}

/* === DARK MODE === */
body.dark {
  background: #121212;
  color: #e0e0e0;
}

body.dark h1 {
  color: #90caf9;
}

body.dark input[type="text"] {
  background: #2c2c2c;
  border: 1px solid #444;
  color: #f1f1f1;
}

body.dark input[type="text"]::placeholder {
  color: #888;
}

/* === DARK MODE RENK GEÇİŞLERİ (KESİN ETKİLİ) === */
body.dark #result span.artikel.der {
  color: #64b5f6 !important; /* açık mavi */
}

body.dark #result span.artikel.die {
  color: #ef5350 !important; /* açık kırmızı */
}

body.dark #result span.artikel.das {
  color: #66bb6a !important; /* açık yeşil */
}

body.dark #result .syl-blue {
  color: #64b5f6 !important;
}

body.dark #result .syl-red {
  color: #ef5350 !important;
}

body.dark #result .plural {
  color: #ce93d8 !important; /* açık mor */
}