* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: rgb(255, 255, 255);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
  overflow-x: hidden; 
}

.landing-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
  padding: 20px;
  width: 100%;
}

.logo {
  width: clamp(100px, 30vw, 200px);
  height: auto;
  max-width: 90%; 
  opacity: 0;
  animation: fadeIn 2s ease-in-out forwards;
  animation-delay: 1s;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.logo:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

@media (max-width: 575.98px) {
  .logo {
    width: clamp(80px, 40vw, 120px);
    max-width: 80%;
  }
  
  .landing-container {
    padding: 15px;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .logo {
    width: clamp(100px, 35vw, 150px);
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .logo {
    width: clamp(120px, 25vw, 180px);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .logo {
    width: clamp(150px, 20vw, 200px);
  }
}

@media (min-width: 1200px) {
  .logo {
    width: clamp(180px, 15vw, 250px);
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .landing-container {
    padding: 10px;
  }
  
  .logo {
    width: clamp(60px, 20vh, 100px);
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo {
    animation: fadeInReduced 2s ease-in-out forwards;
    animation-delay: 1s;
  }
  
  @keyframes fadeInReduced {
    to {
      opacity: 1;
    }
  }
}

@media (prefers-color-scheme: dark) {
  body, html {
    background-color: #ffffff; 
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.fade-out {
  animation: fadeOut 1s ease-in-out forwards;
}

/* 10. TAMBAHAN: Focus states untuk accessibility */
.logo:focus {
  outline: 2px solid #007bff;
  outline-offset: 4px;
}

/* 11. TAMBAHAN: Print styles */
@media print {
  .landing-container {
    height: auto;
    min-height: auto;
  }
  
  .logo {
    opacity: 1;
    animation: none;
  }
}