/* Pengalaman Tenaga Ahli — marquee 3 baris (diadopsi dari Alt 1, js/marquee.js)
   Arah & kecepatan diatur lewat atribut di HTML:
     data-direction="left" | "right"     data-speed="piksel per detik" */
.marquee-rows { display: grid; gap: 16px; margin-top: 10px; }

/* Baris dapat digeser (drag / swipe / scroll horizontal) dan juga berjalan otomatis (js/marquee.js). */
.marquee {
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee::-webkit-scrollbar { display: none; }
.marquee.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.marquee__track { display: flex; width: max-content; }
/* jarak antar item = gap; padding-right menyamakan jarak antar grup agar pembungkusan di tengah tak terlihat */
.marquee__group { display: flex; gap: 16px; padding-right: 16px; flex: none; }

.client-pill {
  padding: 20px 34px; border-radius: 20px; white-space: nowrap;
  font: 600 clamp(15px, 1.6vw, 19px) var(--font-display); letter-spacing: -.01em; color: var(--text-soft);
  transition: color .3s, border-color .3s;
}
.client-pill:hover { color: var(--pill-hover-text); border-color: var(--hover-border); }

/* ---------- Logo klien (plat putih agar logo berlatar putih tetap rapi di tema gelap/terang) ---------- */
.client-logo {
  height: 88px; padding: 14px 28px; border-radius: 18px; flex: none;
  display: grid; place-items: center; background: #fff;
  border: 1px solid rgba(20, 70, 170, .14); box-shadow: 0 14px 30px -18px rgba(0, 20, 80, .5);
  transition: transform .3s, box-shadow .3s;
}
.client-logo:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -16px rgba(0, 20, 80, .6); }
.client-logo img { height: 48px; width: auto; max-width: 150px; object-fit: contain; -webkit-user-drag: none; user-select: none; pointer-events: none; }
