/* Card stays on the black surface; only its photo responds to hover. */
.services .scard { isolation: isolate; }
.services .scard:hover { transform: none; box-shadow: none; }
.services .scard__media { isolation: isolate; }
/* Tepi bawah area gambar hampir selalu jatuh di antara dua piksel (posisi
   kartu sendiri berkoma), dan tepi klip yang dihaluskan browser meloloskan
   satu baris piksel gambar sebagai garis terang — terlihat atau tidak
   tergantung isi fotonya, itu sebabnya hanya muncul di sebagian viewport.
   Gambar dipendekkan 1px supaya baris paling bawah itu tidak berisi foto. */
.services .scard__media img { z-index: 0; height: calc(100% - 1px); }
.services .scard__media::after { z-index: 1; bottom: 0; height: 131px; }
.services .scard__body { position: relative; z-index: 1; margin-top: 0; }
.services .btn--pill { font-size: 12px; }

/* Keep the Figma glow outside the photo's clipping frame. Only opacity pulses. */
.dservice__artwork { position: relative; width: 100%; isolation: isolate; }
.dservice__artwork::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 23px;
  box-shadow: 0 .608px 90.1px rgba(248,97,59,.75);
  z-index: -1;
  pointer-events: none;
  animation: service-glow 5.4s ease-in-out infinite;
}
.dservice__artwork .dservice__media { width: 100%; }
@keyframes service-glow { 0%,100% { opacity: .82; } 50% { opacity: 1; } }
.dservice__column { min-width: 0; }
/* Penimpaan 'selalu terlihat' dicopot supaya elemen detail ikut
   animasi masuk yang sama seperti halaman lain. */
.dlist { min-width: 0; }
.dlist__item { display: block; min-width: 0; }
.dlist__item:hover { padding-left: 0; }
.dlist__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 44px;
  color: inherit;
  padding: 0;
  transition: color 220ms ease;
}
.dlist__link > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.dlist__link:is(:hover,:focus-visible) { color: #fa967c; }
.dlist__link:focus-visible { outline: 2px solid #fa967c; outline-offset: 5px; }
.dlist__item:last-child .dlist__link > span:first-child { text-transform: none; }
.detail-motion-ready .dlist__item:not(.is-in) { opacity: 0; transform: translateX(-18px); }
.detail-motion-ready .dlist__item.is-in {
  animation: service-list-enter 760ms cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--list-delay,0) * 1ms);
}
@keyframes service-list-enter {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: none; }
}

/* Halaman detail yang datang dari kartu tidak memainkan animasi masuk
   standar, supaya tidak ada dua gerakan yang bertabrakan. */