/* Only the requested Services motion and hover details. */
@property --nightless-edge-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.services .scard__desc { font-size: 12px; line-height: 19.4625px; }
.dservice__artwork::before {
  box-shadow: 0 .608px 90.1px 12px rgba(248,97,59,.9), 0 0 32px rgba(248,97,59,.55);
  animation: service-glow-strong 3.8s ease-in-out infinite;
}
/* Halo ini satu-satunya yang menerangi area di sekitar kartu, sedangkan latar
   section di belakangnya hampir hitam. Versi sebelumnya turun sampai opacity
   .45 sekaligus menyusut (scale .96), jadi halonya mundur dan latar gelap itu
   tersingkap — itulah warna hitam yang berkedip. Sekarang napasnya bermain di
   rentang atas saja dan ukurannya tetap, jadi tepinya tidak pernah menggelap. */
@keyframes service-glow-strong {
  0%,100% { opacity: .72; }
  50% { opacity: 1; }
}
.services .scard::after, .dservice__artwork::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.7px;
  border-radius: inherit;
  background: conic-gradient(from var(--nightless-edge-angle), transparent 0deg 245deg, rgba(248,97,59,.2) 278deg, #f8613b 306deg, #ffe2d0 328deg, #fa967c 343deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  animation: nightless-edge-orbit 3.2s linear infinite;
  animation-play-state: paused;
  transition: opacity 260ms ease;
}
.dservice__artwork::after { border-radius: 23px; padding: 2px; }
.services .scard:is(:hover,:focus-within,:active)::after,
.dservice__artwork:is(:hover,:focus-within,:active)::after { opacity: 1; animation-play-state: running; }
@keyframes nightless-edge-orbit { to { --nightless-edge-angle: 360deg; } }

/* A short resting underline becomes a full warm gradient; the arrow follows. */
.dlist__item { border-bottom-color: transparent; }
.dlist__link { position: relative; }
.dlist__link::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 26%; height: 1px;
  background: linear-gradient(90deg, #f8613b, #fa967c 65%, rgba(248,97,59,.1));
  opacity: .6;
  transition: width 620ms cubic-bezier(.22,1,.36,1), opacity 260ms ease;
  pointer-events: none;
}
.dlist__link > span:first-child {
  color: #fff;
  background: linear-gradient(100deg, #ffd1bc, #f8613b 42%, #fa967c 75%, #ffe2d0);
  background-size: 180% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text;
  transition: color 260ms ease, background-position 620ms ease;
}
.dlist__link > span[aria-hidden] {
  opacity: 0; transform: translateX(-9px);
  transition: opacity 200ms ease, transform 300ms cubic-bezier(.22,1,.36,1);
}
.dlist__link:is(:hover,:focus-visible,:active)::after { width: 100%; opacity: 1; }
.dlist__link:is(:hover,:focus-visible,:active) > span:first-child { color: transparent; background-position: 100% 50%; }
.dlist__link:is(:hover,:focus-visible,:active) > span[aria-hidden] {
  opacity: 1; transform: translateX(0); color: #fa967c;
  transition-delay: 360ms;
}

/* Back action: the gradient travels through the label and the chevron leads. */
.dservice .dservice__back {
  position: relative; gap: 8px;
  color: #fff; background: linear-gradient(100deg,#ffd1bc,#f8613b,#fa967c);
  -webkit-background-clip: text; background-clip: text;
  background-size: 180% 100%; background-position: 0% 50%;
  transition: color 220ms ease, background-position 500ms ease;
}
/* Garis bawah saat hover dicopot; warna teks dan panahnya saja yang bergerak. */
.dservice__back svg { color: #fff; transition: transform 450ms cubic-bezier(.22,1,.36,1), color 220ms ease; }
.dservice .dservice__back:is(:hover,:focus-visible,:active) { gap: 8px; color: transparent; background-position: 100% 50%; }
.dservice__back:is(:hover,:focus-visible,:active) svg { transform: translateX(-4px); color: #fa967c; }
@media (max-width: 860px) {
  .dservice__artwork::before { box-shadow: 0 .608px 64px 8px rgba(248,97,59,.9), 0 0 26px rgba(248,97,59,.55); }
}
@media (hover: none), (pointer: coarse) {
  .dlist__link > span[aria-hidden] { opacity: .65; transform: none; }
  .dlist__link:is(:focus-visible,:active) > span[aria-hidden] { transition-delay: 0ms; }
  .dservice__back::before { content: ""; position: absolute; inset: -12px -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .dservice__artwork::before { animation: none; opacity: .85; transform: none; }
  .services .scard::after, .dservice__artwork::after { animation: none; transition: none; }
  .dlist__link::after, .dlist__link > span, .dservice .dservice__back, .dservice__back svg { transition: none; }
}