.rest-page {
  margin-top: 10px;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: white;
  z-index: 0;
}

/* Gambar jalan bergerak dari kanan ke kiri */
.bg-road {
  position: absolute;
  width: 200%;
  height: 100%;
  background: url("img/jalanin.png") repeat-x;
  background-size: contain; /* atau cover jika ingin penuh */
  animation: moveRoad 10s linear infinite;
  z-index: 1;
  border-radius: 10px;
}

@keyframes moveRoad {
  from { background-position: -100% 0; } /* mulai dari kanan */
  to { background-position: 0 0; }       /* bergerak ke kiri */
}

/* Mobil tetap di atas */
.sleeping-boy {
  position: absolute;
  bottom: 15%;
  left: 70%;
  transform: translateX(-50%);
  width: 600px;
  z-index: 2;
  transition: filter 2s ease;
}

/* Mobil tampak samping */
.car {
  position: absolute;
  bottom: 10px;   /* naik sedikit dari bawah */
  left: 20px;     /* posisinya di kiri jalan */
  width: 600px;  /* sesuaikan ukuran mobil */
  z-index: 2;
}
.roda {
  position: absolute;
  width: 90px;
  animation: putarBan 2s linear infinite;
  z-index: 5; /* pastikan lebih besar dari mobil */
}
.roda.depan { bottom: 122px; left: 820px; }
.roda.belakang { bottom: 122px; left: 1215px; }

@keyframes putarBan {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
/* 📱 Responsif untuk HP kecil */
@media (max-width: 576px) {
  .rest-page { height: 55vh; }
  .car { width: 160px; bottom: 5%; left: 15%; } /* mobil lebih kecil */
  .roda { width: 50px; } /* roda tetap besar agar proporsional */
  .roda.depan { bottom: 8%; left: 42%; }
  .roda.belakang { bottom: 8%; left: 66%; }
}

/* 📱 Responsif untuk HP besar / tablet kecil */
@media (min-width: 577px) and (max-width: 768px) {
  .rest-page { height: 65vh; }
  .car { width: 220px; bottom: 7%; left: 18%; }
  .roda { width: 65px; }
  .roda.depan { bottom: 10%; left: 44%; }
  .roda.belakang { bottom: 10%; left: 68%; }
}

/* 💻 Responsif untuk tablet besar */
@media (min-width: 769px) and (max-width: 1024px) {
  .rest-page { height: 75vh; }
  .car { width: 300px; bottom: 9%; left: 20%; }
  .roda { width: 85px; }
  .roda.depan { bottom: 13%; left: 47%; }
  .roda.belakang { bottom: 13%; left: 71%; }
}

     .confetti {
      position: absolute;
      width: 10px;
      height: 15px;
      opacity: 1;
      animation: fall 3s linear infinite;
      z-index:999;
    }
    
    .confetti.red { background: #ff4d4d; }
    .confetti.blue { background: #4d79ff; }
    .confetti.green { background: #4dff88; }
    .confetti.yellow { background: #ffe44d; }
    .confetti.pink { background: #ff4d94; }
    .confetti.orange { background: #ff944d; }
    .confetti.black { background: #100701e6; }
    
    .confetti2 {
      position: absolute;
      width: 40px;
      height: 5px;
      border-radius: 0% 50% 0% 0%;
      opacity: 0.7;
      animation: fall 3s linear infinite;
      z-index:999;
    }
    
    .confetti2.red { background: #ff4d4d; }
    .confetti2.blue { background: #4d79ff; }
    .confetti2.green { background: #4dff88; }
    .confetti2.yellow { background: #ffe44d; }
    .confetti2.pink { background: #ff4d94; }
    .confetti2.orange { background: #ff944d; }
    .confetti2.black { background: #100701e6; }
    
    .confetti3 {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      opacity: 0.7;
      animation: fall 3s linear infinite;
      z-index:999;
    }
    
    .confetti3.red { background: #ff4d4d; }
    .confetti3.blue { background: #4d79ff; }
    .confetti3.green { background: #4dff88; }
    .confetti3.yellow { background: #ffe44d; }
    .confetti3.pink { background: #ff4d94; }
    .confetti3.orange { background: #ff944d; }
    .confetti3.black { background: #100701e6; }
    
    @keyframes fall {
      0% {
        transform: translateY(-100px) rotate(15deg);
        opacity: 1;
      }
      100% {
        transform: translateY(600px) rotate(275deg);
        opacity: 0;
      }
    }