button {
    position: relative;
    padding: 12px 35px;
    font-size: 17px;
    font-weight: 500;
    color: #181818;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
  }
  
  .star-1 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 25px;
    height: auto;
    filter: drop-shadow(0 0 0 #fffdef);
    z-index: -5;
    transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
  }
  
  .star-2 {
    position: absolute;
    top: 45%;
    left: 45%;
    width: 15px;
    height: auto;
    filter: drop-shadow(0 0 0 #fffdef);
    z-index: -5;
    transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
  }
  
  .star-3 {
    position: absolute;
    top: 40%;
    left: 40%;
    width: 5px;
    height: auto;
    filter: drop-shadow(0 0 0 #fffdef);
    z-index: -5;
    transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
  }
  
  .star-4 {
    position: absolute;
    top: 20%;
    left: 40%;
    width: 8px;
    height: auto;
    filter: drop-shadow(0 0 0 #fffdef);
    z-index: -5;
    transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
  }
  
  .star-5 {
    position: absolute;
    top: 25%;
    left: 45%;
    width: 15px;
    height: auto;
    filter: drop-shadow(0 0 0 #fffdef);
    z-index: -5;
    transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01);
  }
  
  .star-6 {
    position: absolute;
    top: 5%;
    left: 50%;
    width: 5px;
    height: auto;
    filter: drop-shadow(0 0 0 #fffdef);
    z-index: -5;
    transition: all 0.8s ease;
  }
  
  
  button:hover .star-1 {
    position: absolute;
    top: -80%;
    left: -30%;
    width: 25px;
    height: auto;
    filter: drop-shadow(0 0 10px #fffdef);
    z-index: 2;
  }
  
  button:hover .star-2 {
    position: absolute;
    top: -25%;
    left: 10%;
    width: 15px;
    height: auto;
    filter: drop-shadow(0 0 10px #fffdef);
    z-index: 2;
  }
  
  button:hover .star-3 {
    position: absolute;
    top: 55%;
    left: 25%;
    width: 5px;
    height: auto;
    filter: drop-shadow(0 0 10px #fffdef);
    z-index: 2;
  }
  
  button:hover .star-4 {
    position: absolute;
    top: 30%;
    left: 80%;
    width: 8px;
    height: auto;
    filter: drop-shadow(0 0 10px #fffdef);
    z-index: 2;
  }
  
  button:hover .star-5 {
    position: absolute;
    top: 25%;
    left: 115%;
    width: 15px;
    height: auto;
    filter: drop-shadow(0 0 10px #fffdef);
    z-index: 2;
  }
  
  button:hover .star-6 {
    position: absolute;
    top: 5%;
    left: 60%;
    width: 5px;
    height: auto;
    filter: drop-shadow(0 0 10px #fffdef);
    z-index: 2;
  }
  
  .fil0 {
    fill: #fffdef;
  }

/* Mégis Lévays vagy? */
.secondary-action-btn {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  display: inline-block;
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  color: #222;
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(100, 116, 139, 0.10);
  transition: background 0.5s cubic-bezier(.4,0,.2,1), box-shadow 0.5s cubic-bezier(.4,0,.2,1), color 0.3s, filter 0.4s, transform 0.4s cubic-bezier(.4,0,.2,1);
  border: none;
  outline: none;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.secondary-action-btn::before {
  content: '';
  position: absolute;
  left: -60%;
  top: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.0) 100%);
  pointer-events: none;
  transition: opacity 0.4s;
  opacity: 0;
  z-index: 2;
  filter: blur(1px);
}

.secondary-action-btn:hover::before {
  animation: btn-sweep 1.1s cubic-bezier(.4,0,.2,1);
  opacity: 1;
}

@keyframes btn-sweep {
  0% {
    left: -60%;
    opacity: 0.1;
  }
  30% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 120%;
    opacity: 0;
  }
}

.secondary-action-btn:hover {
  background: linear-gradient(120deg, #a5b4fc 0%, #818cf8 60%, #6366f1 100%);
  color: #fff;
  box-shadow: 0 0 32px 6px rgba(129, 140, 248, 0.25), 0 2px 12px rgba(100, 116, 139, 0.13);
  filter: brightness(1.12) saturate(1.25);
}

.secondary-action-btn:active {
  background: #e0e7ff;
  color: #222;
  box-shadow: 0 1px 4px rgba(100, 116, 139, 0.08);
  filter: none;
}

.secondary-action-btn:not(.secondary-action-btn-bottom):hover {
  transform: scale(1.07);
}
.secondary-action-btn:not(.secondary-action-btn-bottom):active {
  transform: scale(0.98);
}

/* For bottom placement convenience */
.secondary-action-btn-bottom {
  display: block;
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 1000;
  pointer-events: auto;
}

.secondary-action-btn-bottom:hover {
  transform: translateX(-50%) scale(1.07);
}
.secondary-action-btn-bottom:active {
  transform: translateX(-50%) scale(0.98);
}

@media (max-width: 600px) {
  .secondary-action-btn {
    font-size: 12px;
    padding: 8px 14px;
  }
  .secondary-action-btn-bottom {
    bottom: 16px;
  }
}