/* ===== BROTUBE SIDE RHYTHM ===== */

.side-rhythm{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:72px;
  height:360px;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .45s ease;
}

.side-rhythm.active{
  opacity:.75;
}

.side-rhythm.left{
  left:18px;
}

.side-rhythm.right{
  right:18px;
}

.rhythm-bars{
  height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
}

.rhythm-bar{
  width:5px;
  height:22%;
  min-height:25px;
  max-height:250px;
  border-radius:999px;
  background:linear-gradient(
    to top,
    rgba(255,0,25,.15),
    rgba(255,0,25,.95),
    rgba(255,90,100,1)
  );
  box-shadow:
    0 0 8px rgba(255,0,25,.65),
    0 0 18px rgba(255,0,25,.30);

  transform-origin:center;
  animation:broBeat 720ms ease-in-out infinite alternate;
  animation-play-state:paused;
}

.side-rhythm.active .rhythm-bar{
  animation-play-state:running;
}

.rhythm-bar:nth-child(1){animation-duration:520ms}
.rhythm-bar:nth-child(2){animation-duration:690ms;animation-delay:-180ms}
.rhythm-bar:nth-child(3){animation-duration:440ms;animation-delay:-90ms}
.rhythm-bar:nth-child(4){animation-duration:810ms;animation-delay:-260ms}
.rhythm-bar:nth-child(5){animation-duration:590ms;animation-delay:-120ms}
.rhythm-bar:nth-child(6){animation-duration:730ms;animation-delay:-340ms}
.rhythm-bar:nth-child(7){animation-duration:470ms;animation-delay:-210ms}
.rhythm-bar:nth-child(8){animation-duration:650ms;animation-delay:-80ms}
.rhythm-bar:nth-child(9){animation-duration:540ms;animation-delay:-300ms}
.rhythm-bar:nth-child(10){animation-duration:760ms;animation-delay:-160ms}

@keyframes broBeat{
  0%{
    transform:scaleY(.20);
    opacity:.35;
  }
  35%{
    transform:scaleY(.70);
    opacity:.85;
  }
  70%{
    transform:scaleY(1.35);
    opacity:1;
  }
  100%{
    transform:scaleY(.45);
    opacity:.60;
  }
}

/* GECE teması */
body[data-theme="gece"] .rhythm-bar{
  background:linear-gradient(
    to top,
    rgba(30,90,255,.15),
    rgba(40,120,255,.95),
    rgba(90,180,255,1)
  );
  box-shadow:
    0 0 8px rgba(40,120,255,.65),
    0 0 18px rgba(40,120,255,.30);
}

/* AMOLED */
body[data-theme="amoled"] .side-rhythm.active{
  opacity:.60;
}

/* Küçük laptoplarda kenarlara yaklaştır */
@media(max-width:1250px) and (min-width:701px){
  .side-rhythm{
    width:44px;
  }

  .side-rhythm.left{
    left:2px;
  }

  .side-rhythm.right{
    right:2px;
  }

  .rhythm-bars{
    gap:3px;
  }

  .rhythm-bar{
    width:3px;
  }
}

/* Mobilde daha minimal */
@media(max-width:700px){
  .side-rhythm{
    width:22px;
    height:230px;
  }

  .side-rhythm.left{
    left:1px;
  }

  .side-rhythm.right{
    right:1px;
  }

  .rhythm-bars{
    height:190px;
    gap:2px;
  }

  .rhythm-bar{
    width:2px;
  }

  .rhythm-bar:nth-child(n+7){
    display:none;
  }

  .side-rhythm.active{
    opacity:.42;
  }
}