/**
 * 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%;
	/* AKBULAK-32: yeni banner montajı 16:9'a yakın (848x478); masaüstü yükseklik genişlikle orantılı (üst-alt kırpma en aza iner); ekran yüksekliğinin %92'sini aşmaz, kısa/geniş pencerede kırpmayı sınırlamak için en az genişliğin yarısı kadar olabilir. */
	height: clamp(420px, min(56.25vw, max(92vh, 50vw)), 1080px);
	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;
	}
}

/* AKBULAK-28: videonun kendi alt kenarı — kakao, hafif asimetrik, sığ kavisli ince bitiş (6–12 px; mobilde daha ince). Altındaki ince adaçayı gölge Ürünlerimiz bölümünün üst kenarında (categories.css `.brandbase-cats::before`). Video yüksekliği/oranı/oynatımı değişmez; yeni yükseklik eklenmez (hero içinde mutlak konum). */
.brandbase-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 14' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%2375503d'/%3E%3Cstop offset='.35' stop-color='%238e644c'/%3E%3Cstop offset='1' stop-color='%238e644c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23c)' d='M0,14 L0,11 C200,2 470,12 790,5 C1050,0 1250,9 1440,2 L1440,14 Z'/%3E%3C/svg%3E") no-repeat center bottom / 100% 100%;
	pointer-events: none;
}

@media (max-width: 639px) {
	.brandbase-hero::after {
		height: 8px;
	}
}