body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background: linear-gradient(to right, #e91e63, #9c27b0);
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      min-height: 100vh;
      overflow-x: hidden;
  }

  header {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 20px;
  }
header img {
  width: 10vw;              /* Skala proporsional terhadap lebar layar */
  max-width: 60px;          /* Batas maksimal untuk layar besar (laptop) */
  min-width: 40px;          /* Batas minimal untuk layar kecil (HP) */
  height: auto;             /* Menjaga rasio gambar */
  border-radius: 1%;
  border: 2px solid white;
  animation: pulse 2s infinite;
  object-fit: cover;        /* Jaga isi gambar tidak terdistorsi */
}
@media (max-width: 480px) {
  header img {
    width: 14vw;
    max-width: 50px;
  }
}


  h1 {
      font-size: 2em;
      font-weight: bold;
      animation: slideDown 1s ease-in-out;
  }
  .marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    height: 2em; /* Sesuaikan dengan tinggi teks */
}

.marquee {
    display: inline-block;
    white-space: nowrap;
    animation: marqueeLoop 15s linear infinite;
}

.marquee span {
    display: inline-block;
    padding-right: 50px; /* Jarak antar duplikasi */
}
.marquee-container {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}
.marquee {
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    color: #ffebee;
    font-style: italic;
    font-size: 1.1em;
    animation: scrollLeft 15s linear infinite;
}

.typing-effect {
  font-size: 1.2em;
  border-right: 2px solid white;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  animation:
  typing 4s steps(52, end) forwards,
  blink 0.7s step-end infinite;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 100%;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 1000px;
}

.card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 25px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  animation: fadeInZoom 0.6s ease-in-out forwards, pulseZoom 3s ease-in-out infinite;
}

.card a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 1.1em;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}

footer {
  margin-top: auto;
  padding: 20px;
  font-size: 0.9em;
  color: #f8c5e8;
  animation: fadeIn 1s ease-in;
}

/* Animations */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes slideDown {
  0% { transform: translateY(-40px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes typing {
  from { width: 0; }
  to { width: 52ch; }
}

@keyframes blink {
  0%, 100% { border-color: transparent; }
  50% { border-color: white; }
}

@keyframes fadeInZoom {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes pulseZoom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}


/* Animasi teks berjalan dari kanan ke kiri */
@keyframes scrollLeft {
    0% { transform: translateX(20%); }
    100% { transform: translateX(-10%); }
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.5s; }
.delay-4 { animation-delay: 0.7s; }
.delay-5 { animation-delay: 0.9s; }
.delay-6 { animation-delay: 1.1s; }
.delay-7 { animation-delay: 1.3s; }
.delay-8 { animation-delay: 1.5s; }

</style>

<style>.rain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.drop {
  position: absolute;
  width: 2px;
  height: 15px;
  background: rgba(255, 255, 255, 0.2);
  animation: fall linear infinite;
}

@keyframes fall {
  0% {
    top: -20px;
    opacity: 0;
}
10% {
    opacity: 1;
}
100% {
    top: 100%;
    opacity: 0;
}
}