/* ==================================================
   CSS KHUSUS SERVICES SECTION (6 BLOCKS)
   ================================================== */

.services-grid-wrapper {
  width: 100%;
  overflow-x: hidden; /* Mencegah bug double scroll di HP */
  padding: 10px 0;
}

.services-grid-new {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px; /* Gap diperkecil agar lebih padat */
  max-width: 900px; /* Lebar maksimal dikurangi */
  margin: 0 auto;
}

.service-card-new {
  background: rgba(30, 30, 35, 0.95); /* Solid dark, tidak transparan */
  border: 1px solid rgba(255, 215, 0, 0.5); /* Garis emas */
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  /* Desktop animation state initial */
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

/* Saat reveal di desktop (dari front-services.js) */
.service-card-new.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Saat parallax aktif, cabut efek transition transform agar gerakan mouse instan dan smooth via JS */
.service-card-new.parallax-active {
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card-new img {
  width: 100%;
  height: 110px; /* Gambar diperkecil (dari 180px ke 110px) */
  object-fit: cover;
  border-bottom: 1px solid rgba(255, 215, 0, 0.5); /* Garis emas tipis pemisah */
  /* Parallax effect dipicu lewat JS */
}

.service-card-title {
  padding: 10px; /* Padding dikurangi */
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.9rem; /* Ukuran font diperkecil */
  color: #fff;
  letter-spacing: 1px;
}

/* ==================================================
   MOBILE RESPONSIVE
   ================================================== */
@media (max-width: 768px) {
  .services-grid-new {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 0 15px;
  }
  
  .service-card-new {
    flex-direction: row;
    align-items: center;
    border-radius: 8px;
    /* Reset parallax transform untuk mobile agar tidak bug */
    transform: translateY(20px) !important; 
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .service-card-new.is-revealed {
    opacity: 1;
    transform: translateY(0) !important;
  }

  .service-card-new img {
    width: 40%;
    height: 90px;
    border-bottom: none;
    border-right: 1px solid rgba(255, 215, 0, 0.5);
  }

  .service-card-title {
    width: 60%;
    text-align: left;
    padding: 10px 15px;
    font-size: 0.95rem;
  }
}