.whatsapp-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  z-index: 1000;
}

/* WhatsApp Butonu */
.whatsapp-button {
  background-color: #25D366;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: pulse 1.5s infinite;
  cursor: pointer;
  position: relative;
  margin-right: 10px; /* Tıkla Ara butonu ile arasına boşluk */
}

/* Tıkla Ara Butonu */
.call-button {
  background-color: #2196F3; /* Mavi renk, isteğe göre değiştirebilirsiniz */
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: pulse 1.5s infinite;
  cursor: pointer;
  position: relative;
}

@keyframes pulse {
  0% {
      box-shadow: 0 0 10px rgba(37, 211, 102, 0.7); /* WhatsApp için yeşil ton */
  }
  50% {
      box-shadow: 0 0 20px rgba(37, 211, 102, 0.9);
  }
  100% {
      box-shadow: 0 0 10px rgba(37, 211, 102, 0.7);
  }
}

/* Tıkla Ara için farklı pulse animasyonu (isteğe bağlı) */
.call-button {
  animation: pulse-call 1.5s infinite;
}

@keyframes pulse-call {
  0% {
      box-shadow: 0 0 10px rgba(0, 123, 255, 0.7); /* Mavi ton */
  }
  50% {
      box-shadow: 0 0 20px rgba(0, 123, 255, 0.9);
  }
  100% {
      box-shadow: 0 0 10px rgba(0, 123, 255, 0.7);
  }
}

.whatsapp-button img, .call-button img {
  width: 35px;
  height: 35px;
}

.message-box {
  background-color: white;
  color: black;
  padding: 10px 15px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  font-size: 12px;
  position: absolute;
  left: 105px; /* İki butondan sonra mesaj kutusu için konum */
  display: flex;
  align-items: center;
  white-space: nowrap;
  opacity: 0;
  transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
}

@keyframes slideFade {
  0% {
      opacity: 0;
      transform: translateX(-30px);
  }
  100% {
      opacity: 1;
      transform: translateX(0);
  }
}

.message-box.show {
  animation: slideFade 0.6s ease-in-out;
  opacity: 1;
}