:root{
  --base:#272162;
  --accent:#ef037c;
}

/* Elegant button (shape fixed, only lines animate) */
.btn-dance-elegant{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:14px 22px;
  border-radius:14px;                 /* SABİT */
  background: linear-gradient(135deg, rgba(39,33,98,.95), rgba(239,3,124,.12));
  color:#fff;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.3px;

  box-shadow: 0 12px 26px rgba(39,33,98,.28);
  overflow:hidden;
  isolation:isolate;
  transform:translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:inherit;
}

.btn-dance-elegant .btn-label{
  position:relative;
  z-index:2;
}

/* 1) Border draw layer (4 sides) */
.btn-dance-elegant::before{
  content:"";
  position:absolute;
  inset:7px;                          /* çizgiler içeriden */
  border-radius:12px;
  pointer-events:none;
  z-index:1;

  /* 4 kenarı gradient ile çiziyoruz (çok zarif) */
  background:
    linear-gradient(var(--accent), var(--accent)) top    / 0% 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right  / 1px 0% no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom / 0% 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left   / 1px 0% no-repeat;

  opacity:.85;
  filter: drop-shadow(0 0 10px rgba(239,3,124,.35));
  transition:
    background-size .45s cubic-bezier(.2,.9,.2,1),
    opacity .25s ease;
}

/* Hover: draw the rectangle in a clean way */
.btn-dance-elegant:hover::before{
  background-size:
    100% 1px,   /* top */
    1px 100%,   /* right */
    100% 1px,   /* bottom */
    1px 100%;   /* left */
  opacity:1;
}

/* 2) Spotlight sweep (stage feel) */
.btn-dance-elegant::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.10) 45%,
    rgba(239,3,124,.18) 52%,
    rgba(255,255,255,.10) 58%,
    transparent 100%
  );
  transform: translateX(-60%) rotate(12deg);
  z-index:0;
  opacity:0;
  transition: opacity .2s ease;
}

.btn-dance-elegant:hover::after{
  opacity:1;
  animation: sweep 0.9s ease forwards;
}

@keyframes sweep{
  from { transform: translateX(-60%) rotate(12deg); }
  to   { transform: translateX(60%)  rotate(12deg); }
}

/* Hover motion (minimal, classy) */
.btn-dance-elegant:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(39,33,98,.30), 0 14px 28px rgba(239,3,124,.16);
  filter: saturate(1.05);
}

/* Active */
.btn-dance-elegant:active{
  transform: translateY(0) scale(.99);
}

/* Focus */
.btn-dance-elegant:focus-visible{
  outline:3px solid rgba(239,3,124,.45);
  outline-offset:3px;
}

/* Block variant */
.btn-dance-elegant.btn-block{
  display: flex;
  width: 100%;
}

/* FINAL – Zarif & Dinamik Dans Butonu */
.btn-dance-final {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 26px;
  border-radius: 12px;

  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.4px;

  color: #fff;
  text-decoration: none;
  cursor: pointer;

  background: linear-gradient(
    135deg,
    var(--base),
    var(--accent)
  );

  box-shadow:
    0 10px 24px rgba(39, 33, 98, 0.35);

  overflow: hidden;
  isolation: isolate;
}

/* Text layer */
.btn-dance-final span {
  position: relative;
  z-index: 2;
}

/* Inner surface (clean, no shape change) */
.btn-dance-final::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: #1e1a4f;          /* koyu mor yüzey */
  border-radius: 11px;
  transition: opacity 0.35s ease;
  z-index: 1;
}

/* Glow layer (VERY subtle) */
.btn-dance-final::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(239, 3, 124, 0.35),
    transparent 60%
  );
  opacity: 0;
  filter: blur(18px);
  transition: opacity 0.35s ease;
  z-index: 0;
}

/* Hover */
.btn-dance-final:hover::before {
  opacity: 0.85;
}

.btn-dance-final:hover::after {
  opacity: 1;
  animation: dance-sweep 0.9s ease forwards;
}

.btn-dance-final:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 36px rgba(39, 33, 98, 0.45),
    0 0 18px rgba(239, 3, 124, 0.25);
}

/* Click */
.btn-dance-final:active {
  transform: translateY(0) scale(0.98);
}

/* Spotlight movement */
@keyframes dance-sweep {
  from {
    transform: translateX(-40%) rotate(8deg);
  }
  to {
    transform: translateX(40%) rotate(8deg);
  }
}

/* Block variant */
.btn-dance-final.btn-block {
  display: flex;
  width: 100%;
}

/* From Uiverse.io by adamgiebl - Adapted for Dance Academy */
.btn-dance-send {
  font-family: inherit;
  font-size: 20px;
  background: linear-gradient(135deg, var(--base), var(--accent));
  color: white;
  padding: 0.7em 1em;
  padding-left: 0.9em;
  display: flex;
  align-items: center;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(39, 33, 98, 0.35);
  text-decoration: none;
  font-weight: 600;
}

.btn-dance-send span {
  display: block;
  margin-left: 0.3em;
  transition: all 0.3s ease-in-out;
}

.btn-dance-send .svg-wrapper-1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-dance-send .svg-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-dance-send svg {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
  width: 24px;
  height: 24px;
}

.btn-dance-send:hover .svg-wrapper {
  animation: fly-1 0.6s ease-in-out infinite alternate;
}

.btn-dance-send:hover svg {
  transform: translateX(1.2em) rotate(45deg) scale(1.1);
}

.btn-dance-send:hover span {
  transform: translateX(5em);
}

.btn-dance-send:hover {
  box-shadow: 0 16px 36px rgba(39, 33, 98, 0.45), 0 0 18px rgba(239, 3, 124, 0.25);
  transform: translateY(-2px);
}

.btn-dance-send:active {
  transform: scale(0.95);
}

@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }
  to {
    transform: translateY(-0.1em);
  }
}

/* Block variant */
.btn-dance-send.btn-block {
  width: 100%;
  justify-content: center;
}

/* Ensure white text and icon in all send buttons (white theme) */
html:not(.dark) .btn-dance-send,
html:not(.dark) .btn-dance-send span,
html:not(.dark) .btn-dance-send svg {
  color: white !important;
  fill: white !important;
  stroke: white !important;
}

/* From Uiverse.io by firemonste_8052 - Adapted for Dance Academy with brand colors */
.btn-dance-spin {
  position: relative;
  margin: 0;
  display: inline-block;
}

.btn-dance-spin .button-container {
  position: relative;
  margin: 0;
}

.btn-dance-spin .button-border {
  padding: 3px;
  inset: 0;
  background: rgba(39, 33, 98, 0.5);
  border-radius: inherit;
  clip-path: path(
    "M 90 0 C 121 0 126 5 126 33 C 126 61 121 66 90 66 L 33 66 C 5 66 0 61 0 33 C 0 5 5 0 33 0 Z"
  );
}

.btn-dance-spin .button {
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 0.875em;
  clip-path: path(
    "M 90 0 C 115 0 120 5 120 30 C 120 55 115 60 90 60 L 30 60 C 5 60 0 55 0 30 C 0 5 5 0 30 0 Z"
  );
  width: 120px;
  height: 60px;
  background: linear-gradient(135deg, var(--base), var(--accent));
  display: flex;
  flex-direction: column;
  color: #fff;
  overflow: hidden;
  font-weight: 600;
  font-size: 1rem;
}

.btn-dance-spin .real-button {
  position: absolute;
  width: 120px;
  height: 60px;
  z-index: 1;
  outline: none;
  border: none;
  border-radius: 17px;
  cursor: pointer;
  opacity: 0;
}

.btn-dance-spin .backdrop {
  position: absolute;
  inset: -9900%;
  background: radial-gradient(
    circle at 50% 50%,
    #0000 0,
    #0000 20%,
    rgba(39, 33, 98, 0.67) 50%
  );
  background-size: 3px 3px;
  z-index: -1;
}

.btn-dance-spin .spin {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.5;
  overflow: hidden;
  transition: 0.3s;
}

.btn-dance-spin .real-button:active ~ .button-container .spin {
  opacity: 1;
}

.btn-dance-spin .spin-blur {
  filter: blur(2em) url(#unopaq);
}

.btn-dance-spin .spin-intense {
  inset: -0.125em;
  filter: blur(0.25em) url(#unopaq2);
  border-radius: 0.75em;
}

.btn-dance-spin .spin-inside {
  inset: -2px;
  border-radius: inherit;
  filter: blur(2px) url(#unopaq3);
  z-index: 0;
}

.btn-dance-spin .spin::before {
  content: "";
  position: absolute;
  inset: -150%;
  animation:
    speen 8s cubic-bezier(0.56, 0.15, 0.28, 0.86) infinite,
    woah 4s infinite;
  animation-play-state: paused;
}

.btn-dance-spin .real-button:hover ~ .button-container .spin::before {
  animation-play-state: running;
}

.btn-dance-spin .spin-blur::before {
  background: linear-gradient(
    90deg,
    rgba(239, 3, 124, 0.8) 30%,
    #0000 50%,
    rgba(39, 33, 98, 0.8) 70%
  );
}

.btn-dance-spin .spin-intense::before {
  background: linear-gradient(
    90deg,
    rgba(239, 3, 124, 0.9) 20%,
    #0000 45% 55%,
    rgba(39, 33, 98, 0.9) 80%
  );
}

.btn-dance-spin .spin-inside::before {
  background: linear-gradient(
    90deg,
    rgba(239, 3, 124, 0.7) 30%,
    #0000 45% 55%,
    rgba(39, 33, 98, 0.7) 70%
  );
}

@keyframes speen {
  0% {
    rotate: 10deg;
  }
  50% {
    rotate: 190deg;
  }
  to {
    rotate: 370deg;
  }
}

@keyframes woah {
  0%, to {
    scale: 1;
  }
  50% {
    scale: 0.75;
  }
}

/* Block variant */
.btn-dance-spin.btn-block {
  width: 100%;
}

.btn-dance-spin.btn-block .button,
.btn-dance-spin.btn-block .real-button {
  width: 100%;
}

/* Dans Akademisi - Gradient Border Glow Button */
.btn-dance-text {
  font-size: 1rem;
  padding: 0.5em 0.7em;
  border-radius: 0.5em;
  border: none;
  background-color: #000;
  color: #747474;
  cursor: pointer;
  box-shadow: 2px 2px 3px #000000b4;
  font-family: inherit;
  font-weight: 400;
  text-decoration: none;
  display: inline-block;
  transition: color 0.4s ease;
}

.btn-dance-text .actual-text,
.btn-dance-text .front-text {
  display: none;
}

/* Container wrapper for gradient border */
.btn-dance-text-container {
  position: relative;
  padding: 3px;
  background: linear-gradient(90deg, var(--base), var(--accent));
  border-radius: 0.9em;
  transition: all 0.4s ease;
  display: inline-block;
  margin: 0 auto;
}

/* Center container when inside centered parent */
.text-center .btn-dance-text-container,
.course-card-footer .btn-dance-text-container,
.course-detail-sidebar .btn-dance-text-container {
  display: block;
  margin: 0 auto;
  width: fit-content;
}


.btn-dance-text-container::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 0.9em;
  z-index: -10;
  filter: blur(0);
  transition: filter 0.4s ease;
}

.btn-dance-text-container:hover::before {
  background: linear-gradient(90deg, var(--base), var(--accent));
  filter: blur(1.2em);
}

.btn-dance-text-container:hover .btn-dance-text {
  color: #ffffff;
}

.btn-dance-text-container:active::before {
  filter: blur(0.2em);
}

/* Link variant */
.btn-dance-text.link {
  text-decoration: none;
}