/**
 * Hero: yazısız otomatik banner, Carilo çerçevesi içinde (CARILO-05).
 *
 * ÇERÇEVE: dört kenar birlikte tasarlanır. Üst ve yan kenarlar sakin bordo (--ft); alt kenarda Carilo logosunun
 * kavis hareketinden esinli, sığ ve bütünleşik bordo bant (fildişine inen kavis) + ona oturan iki ok. Logo kırmızısı
 * çevreyi dolaşmaz: yalnız sol üst köşede kısa bir işaret ve alt kavis çizgisinin orta bölümünde (uçlara doğru sönen).
 * Çerçeve sabit kimliktir; afiş renklerinden yüzey üretilmez.
 *
 * SAHNE: afiş alanı = genişlik − 2×çerçeve, oranı 12/5 (22 afişin gerçek oranı). 22 afiş kırpmasız, esnetmesiz,
 * dolgusuz tam doldurur. Yupo (16:9) aynı yükseklikte doğal genişliğinde durur; yanlarda komşu afişlerin kenarları
 * koyu bordo örtüyle (çerçevenin devamı gibi) görünür. Yükseklik slayttan bağımsız; 100vh zorlaması yok.
 */

.carilo-hero {
	--ft: 10px; /* üst/yan çerçeve */
	--band: 66px; /* alt kavisli bant (okları taşır) */
	--arrow: 48px;
	--hero-fade: 450ms;
	position: relative;
	container-type: inline-size;
	background-color: var(--color-ivory);
	color: var(--color-ivory); /* alt kavis svg'si currentColor ile plaka zeminine eşitlenir */
}

@media (max-width: 699px) {
	.carilo-hero {
		--ft: 7px;
		--band: 58px;
		--arrow: 44px;
	}
}

.carilo-hero__viewport {
	--vw: min(100cqw, 2200px);
	--sw: calc(var(--vw) - 2 * var(--ft));
	--H: calc(var(--sw) / 2.4);
	position: relative;
	max-width: 2200px;
	margin-inline: auto;
	height: calc(var(--ft) + var(--H) + var(--band));
	overflow: hidden;
	touch-action: pan-y;
	background-color: var(--color-wine-900); /* çerçeve ve görsel yüklenene kadar sahne zemini; yazı/görsel yok */
}

.carilo-hero__slides {
	position: absolute;
	left: var(--ft);
	top: var(--ft);
	width: var(--sw);
	height: var(--H);
	overflow: hidden;
	background-color: var(--color-wine-950);
}

/* Her kare sahne boyutundadır; görsel kendi doğal genişliğiyle ortalanır. Konum (--k) hero.js'te hesaplanır. */
.carilo-hero__slide {
	--iw0: calc(var(--H) * var(--r, 2.4));
	--k: 1;
	position: absolute;
	inset: 0;
	overflow: hidden;
	visibility: hidden;
	transform: translate3d(calc(var(--k) * var(--sw)), 0, 0);
	transition: transform var(--hero-fade) var(--ease-in-out), visibility 0s linear var(--hero-fade);
}

.carilo-hero__slide.is-active,
.carilo-hero__slide.is-near {
	visibility: visible;
	transition: transform var(--hero-fade) var(--ease-in-out), visibility 0s;
}

/* Komşu kareler çerçevenin devamı gibi koyu görünür (görsel değişmez, yalnız bu kare üstüne bordo örtü). */
.carilo-hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: var(--color-wine-950);
	opacity: 0.86;
	pointer-events: none;
	transition: opacity var(--hero-fade) var(--ease-in-out);
}

.carilo-hero__slide.is-active::after {
	opacity: 0;
}

/* --boot: ilk görsel çözülüp sahne ölçülene dek (hero.js kaldırır) kareler hiçbir geçişle konumlanmaz; kayma/perde yok. */
.carilo-hero--instant .carilo-hero__slide,
.carilo-hero--instant .carilo-hero__slide.is-active,
.carilo-hero--instant .carilo-hero__slide::after,
.carilo-hero--boot .carilo-hero__slide,
.carilo-hero--boot .carilo-hero__slide.is-active,
.carilo-hero--boot .carilo-hero__slide::after {
	transition: none;
}

/* Özgün dosyanın en dış 1–2 px'lik üretim çizgisi (varsa) `trim` ile sahne dışına taşar; boşluk kalmaz. */
.carilo-hero__img {
	position: absolute;
	z-index: 1;
	left: calc((var(--sw) - var(--iw0)) / 2 - var(--tl, 0) * var(--iw0) / (var(--fw, 1600) - var(--tl, 0) - var(--tr, 0)));
	top: calc(-1 * var(--tt, 0) * var(--H) / (var(--fh, 800) - var(--tt, 0) - var(--tb, 0)));
	width: calc(var(--iw0) * var(--fw, 1600) / (var(--fw, 1600) - var(--tl, 0) - var(--tr, 0)));
	height: calc(var(--H) * var(--fh, 800) / (var(--fh, 800) - var(--tt, 0) - var(--tb, 0)));
	max-width: none;
	user-select: none;
	-webkit-user-drag: none;
	color: transparent; /* yüklenmeyen görselin alt metni sahnede hiç boyanmaz (ad, kare etiketinde ve ekran okuyucuda) */
	font-size: 0;
}

/* Sol üst köşe: logo kırmızısından kısa, kontrollü işaret. */
.carilo-hero__tick {
	position: absolute;
	z-index: 3;
	left: 0;
	top: 0;
	width: clamp(34px, 5vw, 64px);
	height: 3px;
	background-color: var(--color-accent-on-dark);
	pointer-events: none;
}

/* Alt kenar: bordo bant fildişi zemine kavisle iner. SVG'nin dolgusu fildişidir (bant bordo = viewport zemini). */
.carilo-hero__curve {
	position: absolute;
	z-index: 3;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: var(--band);
	color: var(--color-ivory);
	pointer-events: none;
	overflow: visible;
}

.carilo-hero__curve-line {
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.carilo-hero__curve--mobile { display: none; }

@media (max-width: 699px) {
	.carilo-hero__curve--desktop { display: none; }
	.carilo-hero__curve--mobile { display: block; }
}

/* Oklar çerçevenin alt bandına oturur: bordo yüzey, sade açık ok, alt kenarda ince kırmızı ayrıntı. */
.carilo-hero__controls {
	position: absolute;
	z-index: 4;
	right: calc(var(--ft) + clamp(0.5rem, 1.6vw, 1.5rem));
	top: calc(var(--ft) + var(--H) + 5px);
	display: flex;
	gap: 10px;
}

.carilo-hero__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--arrow);
	height: var(--arrow);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--color-wine-800);
	color: var(--color-ivory);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ivory) 22%, transparent), inset 0 -3px 0 -1px var(--color-accent-on-dark);
	cursor: pointer;
	transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.carilo-hero__arrow[hidden] { display: none; }

.carilo-hero__arrow svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.carilo-hero__arrow:hover {
	background-color: var(--color-wine-700);
}

.carilo-hero__arrow:active {
	transform: scale(0.96);
}

.carilo-hero__arrow:focus-visible {
	outline: 3px solid var(--color-focus-on-dark);
	outline-offset: 3px;
	border-radius: 50%;
}

@media (max-width: 699px) {
	.carilo-hero__controls { gap: 8px; right: calc(var(--ft) + 8px); }
	.carilo-hero__arrow svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.carilo-hero__slide,
	.carilo-hero__slide.is-active,
	.carilo-hero__slide::after { transition: none; }
}