/* ------------------------------------------------------------------
   SC Player — dalga formlu ses calar + YouTube lightbox
   Tum renk ve olculer .scp uzerindeki degiskenlerdir; tema kendi
   paletini app.css icinde ezer.
   ------------------------------------------------------------------ */

.scp {
	--scp-bar-on: #F4F4EF;
	--scp-bar-off: rgba(244, 244, 239, .3);
	--scp-icon: #F4F4EF;
	--scp-ring: rgba(244, 244, 239, .42);
	--scp-ring-on: #AFCBD5;
	--scp-time: #CFE0E6;
	--scp-btn: 38px;
	--scp-wave-h: 40px;
	--scp-gap: 18px;

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

/* --------------------------------------------------------------- dugme */

.scp-btn {
	all: unset;
	box-sizing: border-box;
	position: relative;
	flex: 0 0 auto;
	width: var(--scp-btn);
	height: var(--scp-btn);
	border-radius: 50%;
	border: 1px solid var(--scp-ring);
	cursor: pointer;
	color: var(--scp-icon);
	transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}

.scp-btn:hover,
.scp-btn:focus-visible {
	border-color: var(--scp-ring-on);
	transform: scale(1.04);
}

.scp-btn:focus-visible {
	outline: 2px solid var(--scp-ring-on);
	outline-offset: 3px;
}

/* Play ucgeni — dugme capina oranli. */
.scp-btn::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: calc(var(--scp-btn) * .16) 0 calc(var(--scp-btn) * .16) calc(var(--scp-btn) * .27);
	border-color: transparent transparent transparent currentColor;
	transition: opacity .15s ease;
}

/* Pause — saf CSS iki cubuk. */
.scp-btn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--scp-btn) * .26);
	height: calc(var(--scp-btn) * .32);
	transform: translate(-50%, -50%);
	opacity: 0;
	background:
		linear-gradient(currentColor, currentColor) left / calc(var(--scp-btn) * .09) 100% no-repeat,
		linear-gradient(currentColor, currentColor) right / calc(var(--scp-btn) * .09) 100% no-repeat;
	transition: opacity .15s ease;
}

.scp.is-playing .scp-btn::before { opacity: 0; }
.scp.is-playing .scp-btn::after { opacity: 1; }

/* ---------------------------------------------------------------- dalga */

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

.scp-bar {
	flex: 1 1 auto;
	min-width: 1px;
	max-width: 3px;
	border-radius: 1px;
	background: var(--scp-bar-off);
	transition: background-color .18s ease;
}

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

/* ---------------------------------------------------------------- sure */

.scp-time {
	flex: 0 0 auto;
	font-family: "Manrope", system-ui, sans-serif;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .08em;
	color: var(--scp-time);
}

/* ------------------------------------------------------------ lightbox */

.scp-lb {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5vh 5vw;
	background: rgba(10, 42, 52, .93);
	backdrop-filter: blur(6px);
	animation: scp-fade .25s ease;
}

@keyframes scp-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.scp-lb-frame {
	position: relative;
	width: min(1180px, 100%);
	aspect-ratio: 16 / 9;
	background: #000;
	box-shadow: 0 40px 120px rgba(0, 0, 0, .55);
}

.scp-lb-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.scp-lb-close {
	all: unset;
	position: absolute;
	top: max(16px, 3vh);
	right: max(16px, 3vw);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(244, 244, 239, .35);
	color: #F4F4EF;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.scp-lb-close:hover,
.scp-lb-close:focus-visible {
	background: #F4F4EF;
	border-color: #F4F4EF;
	color: #0A2A34;
}

html.scp-lb-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.scp-lb { animation: none; }
	.scp-btn { transition: none; }
}