/* Our Clients Logo Slider — frontend */

.ocls-wrap { width: 100%; box-sizing: border-box; }
.ocls-inner { width: 100%; box-sizing: border-box; padding: 0 16px; }

.ocls-title {
	margin: 0 0 28px;
	font-size: clamp(20px, 3vw, 30px);
	font-weight: 700;
	line-height: 1.2;
}

/* Area geser */
.ocls-marquee {
	position: relative;
	overflow: hidden;
	width: 100%;
}

/* Efek memudar di tepi */
.ocls-marquee.ocls-fade {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Rel yang bergerak: berisi 2 grup identik -> loop mulus di -50% */
.ocls-track {
	display: flex;
	width: max-content;
	gap: var(--ocls-gap, 48px);
	will-change: transform;
}
.ocls-marquee.ocls-ready .ocls-track {
	animation: ocls-scroll var(--ocls-duration, 30s) linear infinite;
}
.ocls-marquee[data-direction="right"] .ocls-track {
	animation-direction: reverse;
}
.ocls-marquee.ocls-pause:hover .ocls-track {
	animation-play-state: paused;
}

.ocls-group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: var(--ocls-gap, 48px);
}

.ocls-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.ocls-logo a { display: inline-flex; }
.ocls-logo img {
	display: block;
	height: var(--ocls-logo-h, 60px);
	width: auto;
	max-width: none;
	object-fit: contain;
}

/* Grayscale + berwarna saat hover */
.ocls-marquee.ocls-grayscale .ocls-logo img {
	filter: grayscale(100%);
	opacity: .65;
	transition: filter .3s ease, opacity .3s ease;
}
.ocls-marquee.ocls-grayscale .ocls-logo:hover img {
	filter: grayscale(0);
	opacity: 1;
}

@keyframes ocls-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Hormati preferensi pengguna yang mengurangi animasi */
@media (prefers-reduced-motion: reduce) {
	.ocls-marquee.ocls-ready .ocls-track { animation: none; }
	.ocls-track { flex-wrap: wrap; justify-content: center; }
	.ocls-group[aria-hidden="true"] { display: none; }
}