/* GENEL TASARIM */
.bk-iletisim-ara,
.bk-iletisim-whatsapp {
  position: fixed;
  bottom: 3%; /* Butonlar ekranın altında %3 yukarıda durur */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1111; /* Butonların her şeyin üstünde görünmesi için */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Yumuşak geçiş animasyonu */
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hafif gölge efekti */
}

/* HEMEN ARA BUTONU */
.bk-iletisim-ara {
  left: 20px; /* Sol tarafa yerleştir */
  background-color: black; /* Buton arka planı siyah */
  color: white; /* Yazı rengi beyaz */
  border-radius: 30px; /* Butona oval köşe görünümü */
  height: 50px; /* Yükseklik */
  padding: 0 20px; /* İçerik kenar boşlukları */
  font-size: 16px; /* Yazı boyutu */
  font-weight: bold; /* Yazıyı kalın yap */
  display: flex;
  gap: 10px; /* İkon ve yazı arasındaki boşluk */
  animation: fadeIn 1.2s ease; /* Sayfa yüklendiğinde yavaşça görünsün */
}

.bk-iletisim-ara:hover {
  transform: translateY(-3px) scale(1.1); /* Hover sırasında %10 büyüt ve yukarı hareket */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* Hover sırasında gölgeyi artır */
}

.bk-iletisim-ara a {
  color: white!important; /* Hemen Ara yazısı beyaz */
  text-decoration: none; /* Alt çizgi olmadan görünüm */
}

.bk-iletisim-ara a:hover {
  color: white; /* Hover sırasında da yazı beyaz kalsın */
}

.bk-iletisim-ara .bk-iletisim-icon {
  background-color: #25d366; /* Yeşil arka plan (WhatsApp yeşili) */
  width: 35px; /* İkon genişliği */
  height: 35px; /* İkon yüksekliği */
  border-radius: 50%; /* Tam daire görünüm */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white; /* İkon rengi */
  font-size: 1.4rem; /* İkon boyutu */
  position: relative;
  animation: pulse 1.2s infinite; /* Daha hızlı atan kalp animasyonu */
}

/* WHATSAPP BUTONU */
.bk-iletisim-whatsapp {
  right: 20px; /* Sağ tarafa yerleştir */
  background-color: #25d366; /* Arka plan yeşil */
  width: 60px; /* Genişlik */
  height: 60px; /* Yükseklik */
  border-radius: 50%; /* Tam daire görünüm */
  animation: fadeIn 1.2s ease; /* Sayfa yüklendiğinde yavaşça görünsün */
}

.bk-iletisim-whatsapp:hover {
  transform: translateY(-3px) scale(1.1); /* Hover sırasında yukarı hareket ve %10 büyüt */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* Hover sırasında gölgeyi artır */
}

.bk-iletisim-whatsapp .bk-iletisim-icon {
  color: white; /* İkon rengi beyaz */
  font-size: 2rem; /* İkon boyutu */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  animation: pulse 1.2s infinite; /* Daha hızlı atan kalp animasyonu */
}

/* RESPONSIVE TASARIM (MOBİL UYUMLULUK) */
@media (max-width: 600px) {
  .bk-iletisim-ara {
    height: 45px; /* Buton yüksekliğini küçült */
    padding: 0 15px; /* Kenar boşluklarını azalt */
    font-size: 14px; /* Yazı boyutunu küçült */
  }

  .bk-iletisim-ara .bk-iletisim-icon {
    width: 30px; /* İkon boyutunu küçült */
    height: 30px;
    font-size: 1.2rem;
  }

  .bk-iletisim-whatsapp {
    width: 50px; /* Buton boyutunu küçült */
    height: 50px;
  }

  .bk-iletisim-whatsapp .bk-iletisim-icon {
    font-size: 1.8rem; /* İkon boyutunu küçült */
  }
}

/* TOOLTIP TASARIMI */
.bt-tooltip {
  position: relative;
  display: inline-block;
}

.bt-tooltip .bt-tooltip-text {
  visibility: hidden;
  opacity: 0;
  width: 140px;
  background-color: #333; /* Tooltip arka plan rengi */
  color: #fff; /* Tooltip yazı rengi */
  text-align: center;
  border-radius: 8px; /* Köşeleri yuvarlat */
  padding: 8px 12px; /* İçerik kenar boşluğu */
  position: absolute;
  z-index: 10;
  top: 50%;
  right: 50px; /* Daha yakın konumlandırma */
  transform: translateY(-50%); /* Görünüm tam hizalı */
  white-space: nowrap;
  font-size: 13px; /* Yazı boyutu */
  font-family: Arial, sans-serif; /* Yazı tipi */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Hafif gölge */
  transition: none; /* Animasyon yok */
  pointer-events: none; /* Fareyle etkileşim olmaz */
}

.bt-tooltip .bt-tooltip-text::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent #333 transparent transparent; /* Ok tasarımı */
}

.bt-tooltip:hover .bt-tooltip-text {
  visibility: visible; /* Tooltip görünsün */
  opacity: 1; /* Tam opaklık */
  transform: translateY(-50%); /* Boyut değişmeden görünür */
  pointer-events: auto; /* Etkileşim sağlansın */
}

/* ANİMASYONLAR */

/* Fade-in (Sayfa yüklenirken butonlar görünür) */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pulse (Kalp atışı efekti) */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(37, 211, 102, 0.4);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.6);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(37, 211, 102, 0.4);
  }
}