/* =========================================================
   HİZMET CTA EMOJİ + MİKRO HAREKET KATMANI
   - Yalnız gerçek hizmet sayfalarında yüklenir.
   - Butonların mevcut renk, ölçü ve tıklama davranışını değiştirmez.
   - Emoji olmayan CTA'lara hizmet/aksiyon bağlamına uygun emoji ekler.
========================================================= */
.enb-service-cta{
  --enb-cta-delay: 0s;
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.enb-service-cta--emoji-before::before,
.enb-service-cta--emoji-after::after,
.enb-service-cta__generated-icon,
.enb-service-cta__native-icon{
  display: inline-block;
  flex: 0 0 auto;
  transform-origin: 50% 72%;
  vertical-align: -.08em;
  pointer-events: none;
}

.enb-service-cta--emoji-before::before{
  content: attr(data-enb-cta-emoji);
  margin-right: .46em;
}

.enb-service-cta--emoji-after::after{
  content: attr(data-enb-cta-emoji);
  margin-left: .46em;
}

.enb-service-cta__generated-icon{
  margin-right: .46em;
}

.enb-service-cta--motion{
  transition:
    filter .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    background-color .2s ease !important;
}

.enb-service-cta--motion.is-enb-cta-visible{
  animation: enbServiceCtaBreath 5.2s ease-in-out var(--enb-cta-delay) infinite;
}

.enb-service-cta--motion.is-enb-cta-visible.enb-service-cta--emoji-before::before,
.enb-service-cta--motion.is-enb-cta-visible.enb-service-cta--emoji-after::after,
.enb-service-cta--motion.is-enb-cta-visible > .enb-service-cta__generated-icon,
.enb-service-cta--motion.is-enb-cta-visible > .enb-service-cta__native-icon{
  animation: enbServiceCtaEmojiMove 2.9s ease-in-out var(--enb-cta-delay) infinite;
}

@media (hover:hover) and (pointer:fine){
  .enb-service-cta--motion:hover{
    filter: brightness(1.075) saturate(1.055);
  }

  .enb-service-cta--motion:hover.enb-service-cta--emoji-before::before,
  .enb-service-cta--motion:hover.enb-service-cta--emoji-after::after,
  .enb-service-cta--motion:hover > .enb-service-cta__generated-icon,
  .enb-service-cta--motion:hover > .enb-service-cta__native-icon{
    animation-duration: 1.05s;
  }
}

.enb-service-cta--motion:focus-visible{
  filter: brightness(1.07) saturate(1.05);
}

.enb-service-cta--motion:active{
  filter: brightness(.96) saturate(.98);
}

@keyframes enbServiceCtaBreath{
  0%, 72%, 100%{
    filter: brightness(1) saturate(1);
  }
  82%{
    filter: brightness(1.055) saturate(1.045);
  }
  90%{
    filter: brightness(1.015) saturate(1.01);
  }
}

@keyframes enbServiceCtaEmojiMove{
  0%, 62%, 100%{
    transform: translateY(0) rotate(0deg) scale(1);
  }
  70%{
    transform: translateY(-2px) rotate(-7deg) scale(1.08);
  }
  78%{
    transform: translateY(1px) rotate(6deg) scale(1.02);
  }
  86%{
    transform: translateY(-1px) rotate(-3deg) scale(1.05);
  }
}

@media (max-width: 639px){
  .enb-service-cta--emoji-before::before{
    margin-right: .4em;
  }

  .enb-service-cta--emoji-after::after{
    margin-left: .4em;
  }

  .enb-service-cta__generated-icon{
    margin-right: .4em;
  }
}

@media (prefers-reduced-motion: reduce){
  .enb-service-cta,
  .enb-service-cta::before,
  .enb-service-cta::after,
  .enb-service-cta__generated-icon,
  .enb-service-cta__native-icon{
    animation: none !important;
    transition: none !important;
  }
}