/* css/whatsapp.css */

:root {
   --color-whatsapp: #25d366;
   --color-whatsapp-hover: #128c7e;
   --color-whatsapp-glow: rgba(37, 211, 102, 0.45);
}

.whatsapp-float {
   position: fixed;
   bottom: 30px;
   right: 30px;
   z-index: 9999;

   /* Menggunakan ukuran dimensi tetap (width & height) agar lingkaran bulat sempurna */
   width: 62px;
   height: 62px;
   background-color: var(--color-whatsapp);
   border-radius: 50%;

   /* Flexbox presisi agar logo tepat di tengah */
   display: flex;
   justify-content: center;
   align-items: center;
   text-decoration: none;

   /* Bayangan multi-layer (soft shadow + green ambient glow) */
   box-shadow:
      0 8px 24px var(--color-whatsapp-glow),
      0 4px 12px rgba(0, 0, 0, 0.2);

   transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

   /* Animasi denyut halus agar menarik perhatian pengunjung */
   animation: waPulse 2.8s infinite;
}

.whatsapp-float img,
.whatsapp-float svg,
.whatsapp-float i {
   width: 36px;
   height: 36px;
   font-size: 36px;
   color: #ffffff;
   object-fit: contain;
   display: block;
   transition: transform 0.3s ease;
}

/* Efek Interaksi Hover */
.whatsapp-float:hover {
   transform: scale(1.12) translateY(-4px);
   background-color: var(--color-whatsapp-hover);
   box-shadow:
      0 14px 30px rgba(18, 140, 126, 0.5),
      0 6px 16px rgba(0, 0, 0, 0.25);
   animation: none; /* Berhenti berdenyut saat kursor diarahkan */
}

.whatsapp-float:hover img,
.whatsapp-float:hover i {
   transform: scale(1.05);
}

/* Efek saat diklik / disentuh */
.whatsapp-float:active {
   transform: scale(0.96) translateY(0);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Keyframes pulse lembut */
@keyframes waPulse {
   0% {
      box-shadow:
         0 0 0 0 rgba(37, 211, 102, 0.6),
         0 4px 12px rgba(0, 0, 0, 0.2);
   }
   70% {
      box-shadow:
         0 0 0 14px rgba(37, 211, 102, 0),
         0 8px 24px rgba(0, 0, 0, 0.2);
   }
   100% {
      box-shadow:
         0 0 0 0 rgba(37, 211, 102, 0),
         0 4px 12px rgba(0, 0, 0, 0.2);
   }
}

/* Penyesuaian Responsif untuk Mobile / Layar HP */
@media screen and (max-width: 768px) {
   .whatsapp-float {
      bottom: 22px;
      right: 22px;
      width: 54px;
      height: 54px;
   }

   .whatsapp-float img,
   .whatsapp-float svg,
   .whatsapp-float i {
      width: 30px;
      height: 30px;
      font-size: 30px;
   }
}