/**
 * File: assets/css/wp-plyr-responsive.css
 * (Diperbarui dengan Hack Overlay saat Jeda/Selesai)
 */

/**
 * Animasi 'pulse' untuk skeleton loader.
 */
@keyframes wp-plyr-pulse {
	0% {
		background-color: #222; /* Abu-abu gelap */
	}
	50% {
		background-color: #333; /* Abu-abu sedikit lebih terang */
	}
	100% {
		background-color: #222; /* Kembali ke abu-abu gelap */
	}
}

/*
 * BARU: Wrapper untuk menampung placeholder + watermark.
 * Ini meniru .video-wrapper dari plugin lama Anda.
 */
.wp-plyr-video-wrapper {
	position: relative;
}

/*
 * Wrapper ini sekarang juga berfungsi sebagai placeholder
 * untuk lazy loading.
 */
.wp-plyr-responsive-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* Rasio 16:9 */
	height: 0;
	overflow: hidden;
	max-width: 100%;
	border-radius: 15px;
	/*
	 * Terapkan animasi skeleton loader.
	 */
	background-color: #222;
	animation: wp-plyr-pulse 1.8s infinite ease-in-out;

	/* Gaya untuk thumbnail (setelah dimuat) */
	background-size: cover;
	background-position: center;
	transition: all 0.2s ease-in-out;
}

/*
 * --------------------------------------------------------------------------
 * KUSTOMISASI WARNA KONTROL
 * --------------------------------------------------------------------------
 */
.wp-plyr-responsive-wrapper {
	--plyr-color-main: #9146ff; /* Tetap ungu */
}

/*
 * --------------------------------------------------------------------------
 * GAYA WATERMARK (Dari plugin lama)
 * --------------------------------------------------------------------------
 */
.wp-plyr-watermark {
	position: absolute;
	bottom: 125px;
	right: 70px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
	z-index: 10; /* Pastikan di atas video */
	pointer-events: none; /* Agar tidak bisa diklik */
}

@media (max-width: 480px) {
	.wp-plyr-watermark {
		bottom: 70px;
		right: 20px;
	}
}

/* * Hack ini "mendorong" iframe ke atas sebesar 50% dan membuatnya
 * 200% lebih tinggi. Ini menyembunyikan branding YouTube (related videos, etc.)
 * di bagian atas dan bawah.
 */
.wp-plyr-responsive-wrapper .plyr--youtube .plyr__video-embed iframe {
	top: -50%;
	height: 200%;
}

/*
 * --------------------------------------------------------------------------
 * BARU: YOUTUBE PAUSE/END HACK (Menyembunyikan Judul saat Jeda)
 * --------------------------------------------------------------------------
 */

/* * Ini menargetkan wrapper video HANYA saat YouTube dijeda ATAU selesai.
 * Kita membuat bilah hitam di atas untuk menutupi judul/branding YouTube.
 */
.wp-plyr-responsive-wrapper.plyr--youtube.plyr--paused .plyr__video-wrapper::before,
.wp-plyr-responsive-wrapper.plyr--youtube.plyr--ended .plyr__video-wrapper::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 70px; /* Cukup tinggi untuk menutupi judul YouTube */
	background: #000; /* Latar belakang hitam pekat */
	z-index: 2; /* Di atas iframe (z-index: 1), di bawah kontrol (z-index: 3+) */
	/* Cocokkan radius border agar tidak bocor */
	border-radius: 15px 15px 0 0;
}
.wp-plyr-responsive-wrapper > div,
.wp-plyr-responsive-wrapper .plyr,
.wp-plyr-responsive-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 15px;
}
.plyr__video-wrapper {
	border-radius: 15px;
}

@media (max-width: 767px) {
	.plyr__video-wrapper {
		border-radius: 8px;
	}
	.wp-plyr-responsive-wrapper {
		border-radius: 8px;
	}
	.wp-plyr-responsive-wrapper > div,
	.wp-plyr-responsive-wrapper .plyr,
	.wp-plyr-responsive-wrapper iframe {
		border-radius: 8px;
	}
	
	/* Penyesuaian radius untuk mobile */
	.wp-plyr-responsive-wrapper.plyr--youtube.plyr--paused .plyr__video-wrapper::before,
	.wp-plyr-responsive-wrapper.plyr--youtube.plyr--ended .plyr__video-wrapper::before {
		border-radius: 8px 8px 0 0;
	}
}
.plyr__volume input[type=range] {
	max-width: 25px;
	min-width: 45px;
}

/**

 * Animasi Membesar dan Mengecil untuk Tombol Play Plyr

 */
@keyframes scaleAnimation {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}

}
.plyr__control--overlaid {
	animation: scaleAnimation 1.5s ease-in-out infinite !important;
	transform-origin: center center !important;
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	margin-left: -30px !important;
	margin-top: -30px !important;
	background: #ff0000;
}

/* Hentikan animasi saat hover */

.plyr__control--overlaid:hover {
	animation: none !important;
	transform: scale(1.05) !important;
	transform-origin: center center !important;
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	margin-left: -30px !important;
	margin-top: -30px !important;
	background: #ff0000;

}