/**
 * Video hero — kaynak: markaliste-twin-kit-1.0 `components/hero.css`
 * (geometri BİREBİR; renk rolü Akbulak tokenlarına bağlandı).
 *
 * Yazısız, butonsuz, tam genişlik; headerın hemen altında başlar, kontrol
 * çubuğu veya oynat düğmesi yoktur. Medya (video/poster) gelmemişken de alan
 * DOM'da ve sayfada yer alır: `--color-blue-800` taban rengi her koşulda
 * siyah flaş/CLS'i önler; poster ve video yokken Akbulak tokenlarından kurulu
 * nötr geliştirme yüzeyi (`--gradient-brand-dark`) gösterilir. Bu yüzey bir
 * tasarım kararı değil, medya gelene kadar alanın görünür kalmasını sağlar.
 *
 * Video davranışı (karar A26): autoplay muted loop playsinline, normal hız,
 * kontrol yok. Duraklatan/yavaşlatan kod yoktur.
 */

.brandbase-hero {
	--hero-focus: 50% 50%;
	position: relative;
	width: 100%;
	height: clamp(420px, 78vh, 820px);
	overflow: hidden;
	background-color: var(--color-blue-700);
}

.brandbase-hero__poster,
.brandbase-hero__poster img,
.brandbase-hero__video,
.brandbase-hero__dev-surface {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.brandbase-hero__poster img,
.brandbase-hero__video {
	object-fit: cover;
	object-position: var(--hero-focus);
}

/* Video, yedek görselin ÜSTÜNDE durur; yüklenemezse/oynamazsa saydam kalır ve
   yedek görsel (yoksa nötr yüzey) görünür. */
.brandbase-hero__video {
	background: transparent;
}

.brandbase-hero__video.has-error {
	display: none;
}

.brandbase-hero__dev-surface {
	background: var(--gradient-brand-dark);
}

/* <900px'te hero sabit yükseklik zorlamaz; tam genişlikte, video ile aynı
   16:9 oranında bir alana oturur ve `object-fit: contain` ile videonun tam
   karesi (dört kenarından hiç kırpılmadan) görünür. Masaüstü (`cover` +
   sabit yükseklik) değişmez. */
@media (max-width: 899px) {
	.brandbase-hero {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.brandbase-hero__poster img,
	.brandbase-hero__video {
		object-fit: contain;
	}
}