/* Mobile Layout Fixes & Optimization */

/* RESET: pastikan tidak ada yang hidden di desktop */
.contact-form, .contact-section, .contact-card {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* RESET: pastikan style-switcher tidak terbuka secara default */
.style-switcher {
  transform: translateX(100%);
}

.style-switcher.open {
  transform: translateX(-15px);
}

@media (max-width: 600px) {



  body, html {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    box-sizing: border-box;
    background-attachment: scroll !important;
  }

  .container, .row, .section, .about-section, .home-section, .skills, .portfolio, .contact-section {
    max-width: 100vw !important;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  /* Fix button group */
  .cv-dropdown, .about-info .btn-1, .about-info .cv-dropdown-btn, .about-info .cv-dropdown-list {
    width: 100% !important;
    display: block !important;
    margin-bottom: 10px !important;
    text-align: center !important;
  }

  /* Fix tab nav */
  .about-tabs, .about-tabs .tab-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }

  .about-tabs .tab-item {
    flex: 1 1 30%;
    min-width: 90px;
    text-align: center;
    margin-bottom: 5px;
  }

  /* Skill icon grid */
  .skills .row, .skills .skill-item {
    flex-wrap: wrap !important;
    width: 100% !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
  .skills .skill-item {
    max-width: 40vw !important;
    min-width: 80px;
    margin-bottom: 15px;
  }

  /* Portfolio & Service Items */
  .portfolio-item, .service-item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px 0 !important;
    box-sizing: border-box !important;
  }

  /* Contact cards */
  .contact-card, .contact-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 20px auto !important;
    box-sizing: border-box !important;
  }

  /* Typography */
  h1, h2, h3, h4, h5, h6 {
    font-size: 5vw !important;
    word-break: break-word;
  }
  p, li, span, a, button {
    font-size: 4vw !important;
    word-break: break-word;
  }

  /* Fix dropdown & floating buttons */
  .dropdown-menu, .style-switcher, .day-night {
    left: 10px !important;
    right: auto !important;
    top: 10px !important;
    z-index: 1000;
    transform: none !important;
  }
  .style-switcher {
    top: 50px !important;
  }
  .day-night {
    top: 100px !important;
  }

  /* Fix modern-img-container */
  .modern-img-container {
    width: 90vw !important;
    max-width: 250px !important;
    margin: 0 auto 20px auto !important;
    display: flex;
    justify-content: center;
  }
  .modern-img-container img {
    width: 100% !important;
    height: auto !important;
    border-radius: 15px !important;
  }

  /* Fix preloader */
  .preloader {
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
  }
}

/* General fix for all breakpoints */
*, *:before, *:after {
  box-sizing: border-box !important;
}