/* Keyframes untuk lampu notifikasi */
@keyframes denyut {
  from { opacity: 1; }
  to   { opacity: 0.4; }
}
.lampu {
  animation: denyut 2s ease-in-out infinite;
}

/* Keyframes bertahap dengan persen */
@keyframes geser {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(72px); }
  100% { transform: translateX(0); }
}
.bola {
  animation-name: geser;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

/* Keyframes pergantian warna */
@keyframes warna-berganti {
  0%, 100% { background-color: rgb(14, 165, 233); }
  50%      { background-color: rgb(16, 185, 129); }
}
.kotak {
  animation: warna-berganti 4s linear infinite;
}