/* ===== INFRASTRUCTURE MOBILE STYLES ===== */

/* Mobile (di bawah 768px) */
@media (max-width: 767px) {
  .carousel-track,
  .service-item {
    transition: none !important;
  }

  .infrastructure {
    padding: 40px 20px !important;
    text-align: center !important;
  }

  .infrastructure > .container {
    padding: 0 20px !important;
  }

  /* ===== PERBAIKI HEADER UNTUK CENTER ===== */
  .infrastructure-header {
    display: block !important;
    text-align: center !important;
    margin-bottom: 40px !important;
    width: 100% !important;
  }

  .infrastructure-header h2 {
    font-size: 36px !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    width: 100% !important;
  }

  .infrastructure h2 .blue-text,
  .infrastructure h2 .red-text {
    display: block !important;
    text-align: center !important;
  }

  .infrastructure h2 .blue-text br,
  .infrastructure h2 .red-text br {
    display: none !important;
  }

  .infrastructure-intro {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
  }

  .infrastructure-intro p {
    font-size: 18px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    padding-top: 10px;
  }

  /* CAROUSEL CONTAINER - UPDATE UNTUK HYBRID APPROACH */
  .carousel-wrapper {
    margin-top: 40px !important;
  }

  .carousel-container {
    height: 400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
  }
  /* ===== ANIMASI LEBIH CEPAT UNTUK MOBILE ===== */
  .carousel-track {
    justify-content: center !important;
    gap: 10px !important;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* Lebih cepat */
  }

  .service-item {
    width: 280px !important;
    height: 200px !important;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* 0.6s untuk mobile */
    will-change: transform, opacity !important;
  }

  .service-item.active {
    width: 320px !important;
    height: 250px !important;
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
    z-index: 3 !important;
    transition-delay: 0.1s !important; /* Delay lebih pendek */
  }

  .service-item.left {
    width: 300px !important;
    height: 230px !important;
    opacity: 0.8 !important;
    transform: scale(0.95) translateX(-40px) translateY(10px) !important; /* Movement lebih kecil */
    z-index: 2 !important;
    transition-delay: 0.05s !important;
  }

  .service-item.right {
    width: 300px !important;
    height: 230px !important;
    opacity: 0.8 !important;
    transform: scale(0.95) translateX(40px) translateY(10px) !important; /* Movement lebih kecil */
    z-index: 2 !important;
    transition-delay: 0.05s !important;
  }

  .service-item:not(.active):not(.left):not(.right) {
    opacity: 0.4 !important;
    transform: scale(0.9) translateY(15px) !important; /* Movement lebih kecil */
    z-index: 1 !important;
    transition-delay: 0s !important;
  }

  /* GAMBAR - MOBILE */
  .carousel-image {
    border-radius: 50px !important;
    object-fit: cover !important;
  }

  /* JUDUL DI BAWAH GAMBAR */
  .image-container h3 {
    font-size: 18px !important;
    width: 200px !important;
    height: 45px !important;
    border-radius: 22.5px !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* ===== TOMBOL PANAH DI KIRI-KANAN GAMBAR ===== */
  .nav-arrows {
    position: absolute !important;
    top: 59% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 15px !important;
    margin-top: 0 !important;
    z-index: 30 !important;
    pointer-events: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .arrow-btn {
    width: 50px !important;
    height: 50px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid #204f9d !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    z-index: 31 !important;
    margin: 0 !important;
  }

  .arrow-icon {
    width: 20px !important;
    filter: brightness(0) saturate(100%) invert(19%) sepia(70%) saturate(1555%)
      hue-rotate(201deg) brightness(94%) contrast(89%) !important;
  }

  .arrow-btn:hover .arrow-icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
      hue-rotate(0deg) brightness(100%) contrast(100%) !important;
  }

  /* DOTS - CENTER */
  .carousel-dots {
    margin-top: 30px !important;
    justify-content: center !important;
  }

  /* VIEW ALL BUTTON - CENTER */
  .view-all-bottom {
    justify-content: center !important;
    margin-top: 30px !important;
  }
}

/* Extra Small Mobile */
@media (max-width: 480px) {
  .infrastructure {
    padding: 30px 15px !important;
  }

  .infrastructure-header h2 {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }

  .infrastructure-intro p {
    font-size: 16px !important;
  }

  .carousel-container {
    height: 250px !important;
  }

  .carousel-track {
    gap: 8px !important;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* Lebih cepat lagi */
  }

  .service-item {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* 0.5s untuk mobile kecil */
  }

  .service-item.active {
    transform: scale(1) translateY(0) !important;
    transition-delay: 0.08s !important;
  }

  .service-item.left {
    transform: scale(0.95) translateX(-30px) translateY(8px) !important; /* Movement lebih kecil */
    transition-delay: 0.04s !important;
  }

  .service-item.right {
    transform: scale(0.95) translateX(30px) translateY(8px) !important; /* Movement lebih kecil */
    transition-delay: 0.04s !important;
  }

  .service-item:not(.active):not(.left):not(.right) {
    transform: scale(0.9) translateY(12px) !important; /* Movement lebih kecil */
    transition-delay: 0s !important;
  }

  .image-container h3 {
    font-size: 16px !important;
    width: 180px !important;
    height: 40px !important;
  }

  .arrow-btn {
    width: 44px !important;
    height: 44px !important;
  }

  .arrow-icon {
    width: 18px !important;
  }

  .nav-arrows {
    padding: 0 10px !important;
  }
}