:root {
  color-scheme: dark only;
  font-family: system-ui;
}

body {
  color: #e7e9d2;
  background-color: #121212;
  text-align: center;
}

h1 {
  font-size: 48px;
  font-family: "Poppins", sans-serif;
  color: white;
  text-align: center;
  opacity: 0;
  transform: translateY(-30px);
  animation: slideIn 1s ease-out forwards;
  animation-delay: 0.3s;
}

/* Süzülme efekti tanımı */
@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sound-button {
  background-color: #232323;
  border: none;
  font-size: x-large;
  font-weight: bold;
  width: 80px;
  height: 80px;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0px 0px 4px 2px rgba(255, 255, 255, 1),
    0px 0px 4px 2px rgba(255, 255, 255, 1);
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
  user-select: none;
}

.sound-button:has(:not(audio[src="empty.mp3"])) {
  box-shadow: 0px 0px 4px 2px rgba(0, 145, 145, 1),
    0px 0px 4px 2px rgba(0, 145, 145, 1);
}

.sound-button:active {
  background-color: rgb(0, 80, 133);
  color: rgb(255, 255, 255);
}

.sound-button.active {
  background-color: rgb(0, 80, 133);
  color: rgb(255, 255, 255);
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(3, min-content);
  justify-content: center;
  gap: 20px;
  margin-block: 48px;
}

.sound-button.kayit {
  background-color: red;
  color: white;
  animation: pulse 1s infinite;
  box-shadow: 0 0 10px red;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0px red;
  }
  50% {
    box-shadow: 0 0 15px red;
  }
  100% {
    box-shadow: 0 0 0px red;
  }
}