/* ErkanButon Floating Buttons */
.erkanbuton-btn{
  position: fixed;
  width: var(--erkanbuton-btn, 190px);
  height: var(--erkanbuton-btn, 190px);
  background: transparent;
  cursor: pointer;
  display: block;
  text-decoration: none;
  z-index: var(--erkanbuton-z, 2147483647) !important;
}
.erkanbuton-ring,
.erkanbuton-fill,
.erkanbuton-icon,
.erkanbuton-icon svg{ pointer-events: none; }
.erkanbuton-ring,
.erkanbuton-fill,
.erkanbuton-icon{
  position: absolute;
  border-radius: 999px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
.erkanbuton-ring{
  width: var(--erkanbuton-ring, 160px);
  height: var(--erkanbuton-ring, 160px);
  border: 2px solid rgba(30,30,30,.4);
  opacity: .5;
  animation: erkanbutonZoomIn 1s infinite;
}
.erkanbuton-fill{
  width: var(--erkanbuton-fill, 118px);
  height: var(--erkanbuton-fill, 118px);
  border: 2px solid transparent;
  opacity: .75;
  animation: erkanbutonPulse 1s infinite;
}
.erkanbuton-icon{
  width: var(--erkanbuton-icon, 86px);
  height: var(--erkanbuton-icon, 86px);
  display: grid;
  place-items: center;
  color: #fff;
  opacity: .95;
  animation: erkanbutonTada 1.2s infinite;
}
.erkanbuton-icon svg{
  width: var(--erkanbuton-svg, 44px);
  height: var(--erkanbuton-svg, 44px);
  display: block;
}
.erkanbuton-phone .erkanbuton-ring{ border-color: rgba(245,12,0,.65); }
.erkanbuton-phone .erkanbuton-fill{ background: rgba(0,175,242,.5); }
.erkanbuton-phone .erkanbuton-icon{ background: #f50c00; }
.erkanbuton-whatsapp .erkanbuton-ring{ border-color: rgba(13,159,22,.65); }
.erkanbuton-whatsapp .erkanbuton-fill{ background: rgba(13,159,22,.5); }
.erkanbuton-whatsapp .erkanbuton-icon{ background: #0d9f16; }
@keyframes erkanbutonPulse{
  0%{ transform: translate(-50%, -50%) scale(1); }
  50%{ transform: translate(-50%, -50%) scale(1.05); }
  100%{ transform: translate(-50%, -50%) scale(1); }
}
@keyframes erkanbutonZoomIn{
  0%{ opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  50%{ opacity: 1; }
  100%{ opacity: .6; transform: translate(-50%, -50%) scale(1); }
}
@keyframes erkanbutonTada{
  0%{ transform: translate(-50%, -50%) scale(1); }
  10%,20%{ transform: translate(-50%, -50%) scale(.9) rotate(-3deg); }
  30%,50%,70%,90%{ transform: translate(-50%, -50%) scale(1.08) rotate(3deg); }
  40%,60%,80%{ transform: translate(-50%, -50%) scale(1.08) rotate(-3deg); }
  100%{ transform: translate(-50%, -50%) scale(1); }
}
