/**
 * Şirketlerimiz: solda kompakt bordo başlık plaketi (tek kırmızı ayrıntı), sağda üç şirketin kesintisiz akan logo şeridi.
 * Markaliste twin-kit `brands` marquee bileşeninden uyarlandı: aynı kümenin kopyaları, kayma = tam bir küme (sıçrama/boşluk yok),
 * kopyalar erişilebilirlik ağacı dışında, azaltılmış harita statik sıra. Logoların arkasında kart/çerçeve yok.
 *
 * ZEMİN: Prestige logosunun kaynak PDF'indeki gerçek zemin rengi (#FEFEFE, gömülü görselin köşe/kenar ölçümü) şerit ve bölüm yüzeyidir;
 * böylece Prestige çevresinde yapıştırılmış dikdörtgen veya renk kayması oluşmaz. Diğer logolar (Akbulak kahve, Markaliste koyu lacivert-siyah)
 * bu açık zeminde yüksek kontrastlıdır. Logolara filtre/gölge/renk uygulanmaz; ölçek yalnız max-width/max-height iledir (oran korunur).
 */

.carilo-co {
	--co-bg: #fefefe;
	position: relative;
	overflow: hidden;
	background-color: var(--co-bg);
	padding-block: clamp(1.25rem, 3vw, 2.25rem);
}

.carilo-co__inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: clamp(0.75rem, 2vw, 1.5rem);
}

/* ---- Başlık plaketi: kompakt bordo, kesik köşe (Carilo geometri ailesi), tek ince logo kırmızısı çizgi ---- */
.carilo-co__plaque {
	--cut: 16px;
	position: relative;
	display: inline-block;
	padding: 0.95rem 2.75rem 0.85rem 1.25rem;
	background-color: var(--color-wine-800);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}

.carilo-co__rule {
	display: block;
	width: 40px;
	height: 3px;
	margin-bottom: 0.55rem;
	background-color: var(--color-accent-on-dark);
	border-radius: var(--radius-pill);
}

.carilo-co__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.5rem, 2.3vw, 2.125rem);
	line-height: 1.05;
	letter-spacing: -0.005em;
	color: var(--color-ivory);
	overflow-wrap: anywhere;
}

/* ---- Akış ---- */
.carilo-co__marquee {
	position: relative;
	width: 100%;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.carilo-co__track {
	display: flex;
	width: max-content;
	animation: carilo-co-scroll var(--co-dur, 18s) linear infinite;
	will-change: transform;
}

.carilo-co__marquee:hover .carilo-co__track,
.carilo-co__marquee:focus-within .carilo-co__track {
	animation-play-state: paused;
}

@keyframes carilo-co-scroll {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(var(--co-shift, -50%), 0, 0); }
}

.carilo-co__set {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin: 0;
	padding: 0 clamp(2rem, 5vw, 4rem) 0 0;
	list-style: none;
	gap: clamp(2rem, 5vw, 4rem);
}

.carilo-co__item { flex: none; display: block; }

.carilo-co__node {
	--co-w: 160px;
	--co-w-m: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(150px, 15vw, 232px);
	height: clamp(92px, 8.5vw, 116px);
	text-decoration: none;
	outline-offset: 6px;
}

.carilo-co__node img {
	display: block;
	width: auto;
	height: auto;
	max-width: var(--co-w);
	max-height: 100%;
	object-fit: contain;
	user-select: none;
	transition: transform var(--duration-fast) var(--ease-standard);
}

.carilo-co__node:hover img,
.carilo-co__node:focus-visible img { transform: scale(1.04); }

.carilo-co__node:focus-visible {
	outline: 3px solid var(--color-focus-on-light);
	border-radius: 8px;
}

/* ---- Azaltılmış hareket: akış durur, kopyalar gizlenir, tek statik sıra (sığmazsa sarar; yatay taşma yok) ---- */
@media (prefers-reduced-motion: reduce) {
	.carilo-co__track { animation: none; transform: none; width: auto; }
	.carilo-co__set { flex-wrap: wrap; justify-content: center; padding-right: 0; }
	.carilo-co__set--dup { display: none; }
	.carilo-co__marquee { -webkit-mask-image: none; mask-image: none; }
	.carilo-co__node img { transition: none; }
	.carilo-co__node:hover img, .carilo-co__node:focus-visible img { transform: none; }
}

/* ---- ≥900px: başlık solda, şerit sağda ---- */
@media (min-width: 900px) {
	.carilo-co__inner { flex-direction: row; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); }
	.carilo-co__head { flex: 0 0 auto; }
	.carilo-co__marquee { flex: 1 1 auto; }
}

@media (max-width: 639px) {
	.carilo-co { padding-block: 1.25rem 1.5rem; }
	.carilo-co__node { width: 156px; height: 76px; }
	.carilo-co__node img { max-width: var(--co-w-m); }
	.carilo-co__set { gap: 1.75rem; padding-right: 1.75rem; }
}