/**
 * Video Sorot Almira — bingkai video dengan aksen emas.
 *
 * Seluruh gaya dilingkupi .alm-vsorot supaya tidak bocor ke widget lain;
 * beranda memuat belasan blok CSS berdampingan dan satu selektor telanjang
 * seperti "img" atau "button" akan langsung merusak tetangganya.
 *
 * Token warna dan font mengikuti widget Almira yang sudah ada:
 * emas #EDAF33, biru tua #0F2E40, abu dingin #F2F6F9, Plus Jakarta Sans.
 */

.alm-vsorot {
	position: relative;
	overflow: hidden;
	background: #f2f6f9;
	font-family: "Plus Jakarta Sans", sans-serif;
	color: #0f2e40;
}

/* Dua lingkaran cahaya, sama seperti section "kenapa-alasan" di atasnya. */
.alm-vsorot::before,
.alm-vsorot::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.alm-vsorot::before {
	width: 520px;
	height: 520px;
	left: -280px;
	top: -260px;
	background: radial-gradient(circle, rgba(237, 175, 51, 0.14), transparent 68%);
}

.alm-vsorot::after {
	width: 580px;
	height: 580px;
	right: -320px;
	bottom: -340px;
	background: radial-gradient(circle, rgba(65, 133, 192, 0.12), transparent 68%);
}

.alm-vsorot__dalam {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
	padding: 78px 24px;
}

/* ── Kepala ── */

.alm-vsorot__kepala {
	max-width: 680px;
	margin: 0 auto 38px;
	text-align: center;
}

.alm-vsorot__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 14px;
	color: #c96628;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 2.2px;
	text-transform: uppercase;
}

.alm-vsorot__eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #c96628, #edaf33);
}

.alm-vsorot__judul {
	margin: 0 0 14px;
	font-size: clamp(27px, 2.9vw, 41px);
	line-height: 1.18;
	letter-spacing: -1.1px;
	font-weight: 800;
	color: #0f2e40;
}

.alm-vsorot__teks {
	margin: 0;
	font-size: 16px;
	line-height: 1.72;
	color: #47606e;
}

/* ── Panggung ──
   aspect-ratio dipasang pada bingkai supaya tinggi sudah pasti sebelum poster
   selesai diunduh. Tanpa ini, poster yang dimuat lazy akan mendorong FAQ di
   bawahnya begitu tiba dan menciptakan CLS. */

.alm-vsorot__panggung {
	position: relative;
	margin: 0 auto;
	max-width: 860px;
}

.alm-vsorot--r169 .alm-vsorot__bingkai { aspect-ratio: 16 / 9; }
.alm-vsorot--r11  .alm-vsorot__bingkai { aspect-ratio: 1 / 1; }
.alm-vsorot--r916 .alm-vsorot__bingkai { aspect-ratio: 9 / 16; }

/* Tanpa spasi: kelas rasio dan kelas panggung menempel pada elemen yang sama.
   Video tegak dibatasi lebih sempit supaya tidak menjulang setinggi layar. */
.alm-vsorot__panggung.alm-vsorot--r916 { max-width: 420px; }

/* ── Bingkai ── */

.alm-vsorot__bingkai {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	background: #0f2e40;
	box-shadow:
		0 34px 70px -34px rgba(15, 46, 64, 0.72),
		0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Garis emas tipis di tepi dalam — pseudo-element supaya tidak menambah
   elemen DOM dan tidak tertimpa oleh poster. */
.alm-vsorot__bingkai::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: 24px;
	border: 1px solid rgba(237, 175, 51, 0.55);
	pointer-events: none;
	transition: border-color 0.35s ease;
}

.alm-vsorot__bingkai:hover::after {
	border-color: rgba(237, 175, 51, 0.9);
}

/* ── Tombol pemantik (seluruh area poster dapat diklik) ── */

.alm-vsorot__pemantik {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.alm-vsorot__pemantik:focus-visible {
	outline: 3px solid #edaf33;
	outline-offset: 4px;
	border-radius: 24px;
}

.alm-vsorot__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s ease;
}

.alm-vsorot__poster--kosong {
	background: linear-gradient(135deg, #123a50, #0f2e40);
}

.alm-vsorot__pemantik:hover .alm-vsorot__poster {
	transform: scale(1.045);
	filter: brightness(0.92);
}

/* Gelap bertingkat di bawah agar pita judul tetap terbaca di foto terang.
   Dipasang di dalam tombol, bukan di bingkai, supaya urutan tumpukan tetap
   poster -> gradasi -> tombol putar -> pita. */
.alm-vsorot__pemantik::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(10, 32, 45, 0.82) 0%,
		rgba(10, 32, 45, 0.28) 34%,
		rgba(10, 32, 45, 0.06) 62%,
		transparent 100%
	);
	pointer-events: none;
}

/* ── Tombol putar ── */

.alm-vsorot__tombol {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	width: 80px;
	height: 80px;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.alm-vsorot__tombol svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.alm-vsorot__cakram {
	fill: #edaf33;
	transform-origin: 40px 40px;
	transition: fill 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.alm-vsorot__segitiga {
	fill: #0f2e40;
}

/* Denyut halus supaya tombol menarik perhatian tanpa berisik. */
.alm-vsorot__denyut {
	fill: rgba(237, 175, 51, 0.36);
	transform-origin: 40px 40px;
	animation: almVsorotDenyut 2.8s ease-out infinite;
}

@keyframes almVsorotDenyut {
	0%   { transform: scale(0.86); opacity: 0.85; }
	70%  { transform: scale(1.28); opacity: 0; }
	100% { transform: scale(1.28); opacity: 0; }
}

.alm-vsorot__pemantik:hover .alm-vsorot__cakram,
.alm-vsorot__pemantik:focus-visible .alm-vsorot__cakram {
	fill: #f5c44e;
}

.alm-vsorot__pemantik:hover .alm-vsorot__cakram {
	transform: scale(1.09);
}

/* ── Pita judul ── */

.alm-vsorot__pita {
	position: absolute;
	left: 26px;
	right: 26px;
	bottom: 22px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	text-align: left;
	pointer-events: none;
}

.alm-vsorot__pita-judul {
	font-size: clamp(15px, 1.5vw, 19px);
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
	text-shadow: 0 2px 14px rgba(10, 32, 45, 0.6);
}

.alm-vsorot__pita-durasi {
	flex: none;
	padding: 5px 13px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.28);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	color: #fff;
}

/* ── Iframe setelah diklik ── */

.alm-vsorot__bingkai iframe {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ── Cadangan tanpa JavaScript ── */

.alm-vsorot__noscript {
	position: absolute;
	left: 50%;
	bottom: 22px;
	z-index: 5;
	transform: translateX(-50%);
	padding: 11px 22px;
	border-radius: 999px;
	background: #edaf33;
	color: #0f2e40;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

/* Pesan di editor saat ID video belum diisi. */
.alm-vsorot__kosong {
	padding: 26px;
	border: 1px dashed #b7c6d1;
	border-radius: 14px;
	background: #f7fafc;
	color: #47606e;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	text-align: center;
}

/* ── Layar kecil ── */

@media (max-width: 767px) {
	.alm-vsorot__dalam { padding: 56px 18px; }
	.alm-vsorot__kepala { margin-bottom: 28px; }
	.alm-vsorot__bingkai { border-radius: 18px; }
	.alm-vsorot__bingkai::after { border-radius: 18px; }
	.alm-vsorot__tombol { width: 62px; height: 62px; }
	.alm-vsorot__pita { left: 16px; right: 16px; bottom: 14px; }

	/**
	 * Di lebar 390 px, judul + badge durasi tidak muat sebaris: pita
	 * membungkus menjadi dua baris setinggi 61 px, naik menutupi wajah di
	 * poster dan bertabrakan dengan tombol putar di tengah.
	 *
	 * Solusinya bukan mengecilkan font sampai tak terbaca, melainkan
	 * membuang yang paling tidak penting. Badge "Tonton sekarang" hanya
	 * mengulang pesan yang sudah disampaikan tombol putar berwarna emas di
	 * tengah bingkai, jadi di ponsel ia disembunyikan dan judul dipaksa
	 * tetap satu baris.
	 */
	.alm-vsorot__pita {
		flex-wrap: nowrap;
	}

	.alm-vsorot__pita-durasi {
		display: none;
	}

	.alm-vsorot__pita-judul {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 14px;
		line-height: 1.3;
	}
}

/* ── Hormati prefers-reduced-motion ──
   Denyut dan zoom dimatikan total; tombol tetap menonjol karena warnanya
   kontras, bukan karena gerakannya. */

@media (prefers-reduced-motion: reduce) {
	.alm-vsorot__denyut { animation: none; }

	.alm-vsorot__poster,
	.alm-vsorot__cakram {
		transition: none;
	}

	.alm-vsorot__pemantik:hover .alm-vsorot__poster {
		transform: none;
	}
}