// :root {
//   --fikoyt-uygulama-baslik-maks-genislik: unset;
//   --fikoyt-uygulama-baslik-dis-bosluk-sag-sol: 0px;
//   --fikoyt-uygulama-baslik-ic-bosluk: 0px 5px 0px 0px;
//   --fikoyt-uygulama-baslik-radius: 0px;
//   --fikoyt-uygulama-baslik-yukseklik: 30px;
//   --fikoyt-uygulama-baslik-arka-renk: rgba(255, 255, 255, 0.863);
//   --fikoyt-uygulama-baslik-golge: 0 1px 2px 0 rgba(34, 36, 38, .15);
//   --fikoyt-uygulama-baslik-sinir: 1px solid rgba(34, 36, 38, .15);
//   --fikoyt-uygulama-baslik-alt-baslik-yazi-boyutu: 0.75em;
// }

:host {
  position: relative;
  display: inline-block;
  overflow: hidden;
  perspective: 1500px;
}

fikoyt-dalga {


  .ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
    border-radius: 50%;
    pointer-events: none;
    animation: ripple-animation 3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  }

  .particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, transparent);
    pointer-events: none;
    animation: particle-animation 2s ease-out forwards;
  }

  @keyframes ripple-animation {
    0% {
      transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
      opacity: 0.8;
    }

    50% {
      transform: translate(-50%, -50%) scale(3) rotate(180deg);
      opacity: 0.4;
    }

    100% {
      transform: translate(-50%, -50%) scale(6) rotate(360deg);
      opacity: 0;
    }
  }

  @keyframes particle-animation {
    0% {
      transform: scale(0.2) translate(0, 0);
      opacity: 1;
    }

    100% {
      transform: scale(1) translate(200%, 200%);
      opacity: 0;
    }
  }

}