/* Alap gomb – eredeti stílus a Uiverse.io / vinodjangid07 alapján, portfólióhoz igazítva */
.Btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  height: 55px;
  padding: 0 26px;
  border-radius: 45px;
  border: none;
  background-color: var(--pink, #ff4fa3);
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0px 10px 10px rgba(255, 214, 236, 0.6) inset,
    0px 5px 12px rgba(90, 10, 50, 0.25),
    0px -10px 10px rgba(229, 56, 143, 0.55) inset;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Nagyobb változat (fő CTA a hero-ban) */
.Btn--lg {
  height: 60px;
  padding: 0 34px;
  font-size: 1.1rem;
}

/* Fehér változat (pink háttéren, pl. Kapcsolat szekció) */
.Btn--white {
  background-color: #ffffff;
  color: var(--pink-deep, #e5388f);
  box-shadow:
    0px 8px 10px rgba(255, 255, 255, 0.7) inset,
    0px 6px 16px rgba(90, 10, 50, 0.28),
    0px -8px 10px rgba(255, 217, 236, 0.9) inset;
}

.Btn:hover {
  animation: jello-horizontal 0.9s both;
}

/* Áttetsző, körvonalas gomb (másodlagos CTA a hero-ban) */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  height: 60px;
  padding: 0 30px;
  border-radius: 45px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}

@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}