.music-btn-wrap, .music-btn-wrap * { box-sizing: border-box; }

.music-btn-wrap {
  --bg-color: #000000;          /* Apple Pitch Black */
  --btn-bg-start: #1c1c1e;      /* Apple Dark Gray */
  --btn-bg-end: #0c0c0e;        /* Deep Graphite */
  --border-color: rgba(255, 255, 255, 0.08); /* Minimal sub-pixel border */
  --active-color: #ffffff;      /* Pure White */
  --muted-gray: #86868b;        /* Apple Signature Muted Gray */
  --size: 55px;
}

/* ---------------- Buton Kapsülü ---------------- */
.music-btn-wrap {
  position: relative;
  width: var(--size);
  height: var(--size);
  border: none;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.music-btn-wrap:hover { transform: scale(1.05); }
.music-btn-wrap:active { transform: scale(0.97); }
.music-btn-wrap:focus-visible { outline: none; }

/* ---------------- Hassas Beyaz / Şeffaf Ses Dalgaları ---------------- */
.wave {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  pointer-events: none;
}
.playing .wave  { animation: appleRipple 3.2s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.playing .wave2 { animation-delay: 1.6s; border-color: rgba(255, 255, 255, 0.06); }

@keyframes appleRipple {
  0%   { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ---------------- Premium Mat Metal / Cam Halkalar ---------------- */
.ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }

/* Yumuşak beyaz arkadan aydınlatma (Glow) */
.ring-outer {
  inset: -3px;
  background: rgba(255, 255, 255, 0.02);
  filter: blur(10px);
  opacity: 0;
  transition: opacity 0.4s;
}
.playing .ring-outer { opacity: 1; }
.music-btn-wrap:hover .ring-outer { background: rgba(255, 255, 255, 0.04); opacity: 1; }

/* Kusursuz İnce Gümüş Kenarlık */
.ring-border {
  inset: -1px;
  border: 1px solid var(--border-color);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.8),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
  transition: border-color 0.3s;
}
.music-btn-wrap:hover .ring-border {
  border-color: rgba(255, 255, 255, 0.2);
}

/* ---------------- Apple Obsidian Cam Gövde ---------------- */
.orb {
  position: relative;
  width: calc(var(--size) - 12px);
  height: calc(var(--size) - 12px);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--btn-bg-start) 0%, var(--btn-bg-end) 100%);
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.15),
    inset 0 -3px 8px rgba(0, 0, 0, 0.6),
    0 10px 24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
/* Üst parlak cam yansıması */
.orb-shine {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.06) 0%, transparent 100%);
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  pointer-events: none;
}

/* ---------------- Apple-Style Minimal Beyaz Ekolayzer ---------------- */
.eq {
  display: flex;
  align-items: center;
  gap: 3.5px;
  height: 18px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.eq .bar {
  width: 3.5px;
  border-radius: 20px;
  background: var(--active-color);
  height: 30%;
  opacity: 0.9;
  /* İnce gümüş parıltı efekti */
  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.2);
}

.eq .bar:nth-child(1){ animation: appleBounce 0.7s ease-in-out infinite; animation-delay:-0.15s;}
.eq .bar:nth-child(2){ animation: appleBounce 0.7s ease-in-out infinite; animation-delay:-0.45s;}
.eq .bar:nth-child(3){ animation: appleBounce 0.7s ease-in-out infinite; animation-delay:-0.05s;}
.eq .bar:nth-child(4){ animation: appleBounce 0.7s ease-in-out infinite; animation-delay:-0.6s;}
.eq .bar:nth-child(5){ animation: appleBounce 0.7s ease-in-out infinite; animation-delay:-0.3s;}

@keyframes appleBounce {
  0%, 100% { height: 20%; opacity: 0.6; }
  50%      { height: 100%; opacity: 1; }
}

/* Duraklatınca ekolayzer pürüzsüzce söner */
.paused .eq { opacity: 0; transform: scale(0.7); }
.paused .eq .bar { animation-play-state: paused; }

/* ---------------- Gümüş Play İkonu ---------------- */
.play-icon {
  position: absolute;
  color: var(--active-color);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.paused .play-icon { opacity: 1; transform: scale(1); }