/* Font Tanımlaması */
:root {
  --main-font: 'Montserrat', sans-serif;
}

/* Genel Sayfa ve Arka Plan */
body {
  font-family: var(--main-font);
  margin: 0;
  padding: 20px;
  background: #1e1e3f; /* Koyu mor-mavi */
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Ana Oyun Konteyneri */
.game-container {
  width: 100%;
  max-width: 450px;
  background: linear-gradient(145deg, #2a2a57, #3b3b7a);
  padding: 30px;
  border-radius: 25px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

/* --- Geri Bildirim Animasyonları --- */
.game-container.correct {
  animation: pulse-green 0.5s;
}
.game-container.incorrect {
  animation: shake 0.5s;
}
@keyframes pulse-green {
  0% { box-shadow: 0 10px 40px rgba(0,0,0,0.4), 0 0 0 0 rgba(46, 204, 113, 0.5); }
  50% { box-shadow: 0 10px 40px rgba(0,0,0,0.4), 0 0 0 20px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 10px 40px rgba(0,0,0,0.4), 0 0 0 0 rgba(46, 204, 113, 0); }
}
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

h1 {
  font-size: 2.5em;
  color: #fff;
  margin: 0 0 15px 0;
  text-shadow: 0 0 10px #ff79c6;
}
.icon {
  display: inline-block;
  transform-origin: bottom;
  animation: wiggle 2s ease-in-out infinite;
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(8deg); }
  75% { transform: rotate(-8deg); }
}

/* Skor Alanı */
#score-display {
  background: rgba(0,0,0,0.2);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 1.3em;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 25px;
}
#score { color: #f1fa8c; } /* Limon sarısı */

/* Resim Alanı */
.image-wrapper {
  background: #1e1e3f;
  border-radius: 20px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}
#img {
  width: 100%;
  max-width: 250px;
  height: auto;
  border-radius: 15px;
  border: none;
}
.hint-text {
  min-height: 24px;
  font-size: 1.1em;
  color: #bd93f9; /* Açık mor */
}

/* Giriş Alanı */
.input-area {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
#input {
  flex-grow: 1;
  font-family: var(--main-font);
  font-size: 1.2em;
  padding: 12px;
  border: 2px solid #6272a4; /* Gri-mavi */
  background-color: #1e1e3f;
  border-radius: 10px;
  color: #fff;
  outline: none;
  transition: all 0.3s;
}
#input::placeholder { color: #6272a4; }
#input:focus {
  border-color: #ff79c6; /* Pembe */
  box-shadow: 0 0 10px #ff79c6;
}

#submit-btn {
  font-family: var(--main-font);
  font-weight: 700;
  font-size: 1.1em;
  padding: 0 25px;
  background: linear-gradient(45deg, #ff79c6, #bd93f9);
  border: none;
  color: white;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
#submit-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px #ff79c6;
}

/* Form stilleri */
#form {
  border-top: 2px solid #6272a4;
  margin-top: 30px;
  padding-top: 20px;
}
#form h2 { color: #50fa7b; /* Yeşil */ }
.final-score { font-size: 1.3em; margin-bottom: 15px; }
#final-score-val { color: #f1fa8c; }
#form input {
  width: 80%;
  margin: 5px 0;
  padding: 12px;
  border-radius: 8px;
  border: 2px solid #6272a4;
  background: #1e1e3f;
  color: #fff;
  font-size: 1em;
}
.submit-btn {
  background: #50fa7b;
  color: #1e1e3f;
  font-weight: 700;
  margin-top: 10px;
}