/*
 * SC Player 1.0 — dalga formlu ses çalar + video lightbox.
 *
 * serkancagri.com'daki çaların taşınabilir sürümü. Bağımlılık yok
 * (Font Awesome, jQuery vb. gerekmez). Renk ve ölçüler .scp üzerindeki
 * CSS değişkenleriyle değiştirilir.
 */

/* ---------------------------------------------------------------------------
 * 1) Ses çalar
 * ------------------------------------------------------------------------ */

.scp {
	--scp-bar-on: #dfd8cc;                    /* çalınmış kısmın çubuk rengi */
	--scp-bar-off: rgba(223, 216, 204, .32);  /* çalınmamış kısım */
	--scp-icon: #f6f1e8;                      /* play/pause ikonu */
	--scp-ring: rgba(255, 255, 255, .4);      /* düğme çemberi */
	--scp-time: #cfc6b8;                      /* süre yazısı */
	--scp-btn: 38px;                          /* düğme çapı */
	--scp-wave-h: 40px;                       /* dalga alanının yüksekliği */
	--scp-gap: 18px;                          /* öğeler arası boşluk */

	display: flex;
	align-items: center;
	gap: var(--scp-gap);
}

.scp-btn {
	width: var(--scp-btn);
	height: var(--scp-btn);
	flex: none;
	border-radius: 50%;
	border: 1px solid var(--scp-ring);
	background: none;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color .2s;
}

.scp-btn:hover {
	border-color: var(--scp-icon);
}

/* Play üçgeni — düğme çapına oranlı çizilir, --scp-btn'i değiştirmek yeter. */
.scp-btn::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: calc(var(--scp-btn) * .079);
	border-left: calc(var(--scp-btn) * .263) solid var(--scp-icon);
	border-top: calc(var(--scp-btn) * .158) solid transparent;
	border-bottom: calc(var(--scp-btn) * .158) solid transparent;
}

/* Pause — iki çubuk. İkincisi box-shadow ile çizilir, ek eleman gerekmez. */
.scp-btn.is-playing::before {
	width: calc(var(--scp-btn) * .079);
	height: calc(var(--scp-btn) * .29);
	margin-left: 0;
	border: 0;
	background: var(--scp-icon);
	box-shadow: calc(var(--scp-btn) * .184) 0 0 var(--scp-icon);
	transform: translateX(calc(var(--scp-btn) * -.092));
}

.scp-wave {
	flex: 1;
	height: var(--scp-wave-h);
	display: flex;
	align-items: center;
	gap: 2px;
	overflow: hidden;
}

.scp-wave > i {
	display: block;
	flex: 1;
	min-width: 1px;
	border-radius: 1px;
	background: var(--scp-bar-off);
}

.scp-wave > i.is-on {
	background: var(--scp-bar-on);
}

.scp-time {
	font-size: 14px;
	font-weight: 300;
	color: var(--scp-time);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * 2) Video lightbox
 *
 * .scp-lightbox sınıflı bağlantılar (data-yt="videoID") sayfadan ayrılmadan
 * gömülü YouTube oynatıcısı açar. Kapatma: ✕, ESC veya perdeye tıklama.
 * ------------------------------------------------------------------------ */

.scp-lb {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(5, 4, 3, .94);
}

.scp-lb-box {
	position: relative;
	width: min(1080px, 100%);
}

.scp-lb-video {
	aspect-ratio: 16 / 9;
	width: 100%;
	background: #000;
	border: 1px solid rgba(216, 178, 106, .35);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
}

.scp-lb-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.scp-lb-close {
	position: absolute;
	right: 0;
	top: -44px;
	appearance: none;
	background: none;
	border: 0;
	padding: 8px;
	color: #efeae2;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	font-family: inherit;
}

.scp-lb-close:hover {
	color: #f0d49b;
}

.scp-lb-fallback {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
	font-size: 11px;
	letter-spacing: 2px;
	font-weight: 300;
	color: #a49b8e;
	text-decoration: none;
}

.scp-lb-fallback:hover {
	color: #f0d49b;
}