/**
 * Rise Net Video Player — çekirdek stil.
 *
 * Bu dosya yalnızca yapı, yerleşim ve davranış durumlarını tanımlar.
 * Görsel kimlik (renk, çerçeve, buton biçimi) /skins klasöründeki
 * tema dosyalarından gelir; böylece tema güncellemesi çekirdeği etkilemez.
 */

.rnvp {
	--rnvp-accent: #b9a16b;
	--rnvp-ratio: 16 / 9;
	--rnvp-max-width: none;
	--rnvp-radius: 14px;
	--rnvp-surface: #0d0f12;
	--rnvp-surface-2: #16191e;
	--rnvp-text: #f2f4f7;
	--rnvp-muted: rgba(242, 244, 247, 0.62);
	--rnvp-shadow: 0 18px 48px -18px rgba(0, 0, 0, 0.65);
	--rnvp-playlist-width: 310px;
	--rnvp-control-size: 38px;
	--rnvp-ui-pad: 14px;
	--rnvp-size-scale: 1;

	position: relative;
	display: block;
	width: 100%;
	max-width: var(--rnvp-max-width);
	margin-inline: 0;
	font-family: inherit;
	line-height: 1.45;
	color: var(--rnvp-text);
	box-sizing: border-box;
}

.rnvp *,
.rnvp *::before,
.rnvp *::after {
	box-sizing: inherit;
}

.rnvp--align-center {
	margin-inline: auto;
}

.rnvp--align-right {
	margin-inline: auto 0;
}

/* ---------------------------------------------------------------
 * Çerçeve ve yerleşim
 * ------------------------------------------------------------- */

.rnvp__frame {
	position: relative;
	width: calc(100% * var(--rnvp-size-scale));
	margin-inline: auto;
	transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
	border-radius: var(--rnvp-radius);
	background: var(--rnvp-surface);
	box-shadow: var(--rnvp-shadow);
	overflow: hidden;
}

.rnvp__inner {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.rnvp__stage {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	aspect-ratio: var(--rnvp-ratio);
	background: #000;
	overflow: hidden;
	outline: none;
}

.rnvp__stage:focus-visible {
	outline: 2px solid var(--rnvp-accent);
	outline-offset: -2px;
}

.rnvp__media {
	position: absolute;
	inset: 0;
}

.rnvp__media video,
.rnvp__media iframe,
.rnvp__iframe-host,
.rnvp__iframe-host iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	background: #000;
}

.rnvp__video {
	object-fit: contain;
}

/* Yönetim panelindeki tema gösterimi için boş ekran yüzeyi. */

.rnvp__demo-screen {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 100% at 30% 0%, rgba(255, 255, 255, 0.09), transparent 58%),
		linear-gradient(155deg, #1c2430 0%, #0b0e12 100%);
	background-color: #141920;
}

/* ---------------------------------------------------------------
 * Kapak görseli
 * ------------------------------------------------------------- */

.rnvp__poster {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: var(--rnvp-surface);
	transition: opacity 0.32s ease, visibility 0.32s ease;
	z-index: 6;
}

.rnvp__poster.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.rnvp__poster-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rnvp__poster-fallback {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 60%),
		var(--rnvp-surface);
}

.rnvp__poster::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.42) 100%);
	transition: opacity 0.3s ease;
}

.rnvp__poster:hover::after {
	opacity: 0.75;
}

.rnvp__poster-title {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 18px;
	z-index: 2;
	font-size: 15px;
	font-weight: 600;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rnvp__bigplay {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--rnvp-accent);
	color: #fff;
	cursor: pointer;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.75);
}

.rnvp__bigplay svg {
	width: 44%;
	height: 44%;
	margin-left: 3px;
}

.rnvp__poster:hover .rnvp__bigplay,
.rnvp__bigplay:hover {
	transform: scale(1.08);
}

.rnvp__bigplay:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.rnvp__bigplay--static {
	pointer-events: none;
}

/* ---------------------------------------------------------------
 * Kontroller
 * ------------------------------------------------------------- */

.rnvp__ui {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 5;
	opacity: 1;
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.rnvp.is-idle .rnvp__ui {
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}

.rnvp.is-idle .rnvp__stage {
	cursor: none;
}

.rnvp__ui-inner {
	position: relative;
}

.rnvp__titlebar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	padding: 0 var(--rnvp-ui-pad) 10px;
	pointer-events: none;
}

.rnvp__title {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rnvp:not(.is-started) .rnvp__ui {
	opacity: 0;
	pointer-events: none;
}

.rnvp__controls {
	position: relative;
	padding: 26px var(--rnvp-ui-pad) var(--rnvp-ui-pad);
	background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.72) 62%, rgba(0, 0, 0, 0.88) 100%);
}

.rnvp__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 6px;
}

.rnvp__group {
	display: flex;
	align-items: center;
	gap: 2px;
	min-width: 0;
}

.rnvp__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--rnvp-control-size);
	height: var(--rnvp-control-size);
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.rnvp__btn svg {
	width: 21px;
	height: 21px;
	display: block;
}

.rnvp__btn:hover {
	background: rgba(255, 255, 255, 0.14);
}

.rnvp__btn:active {
	transform: scale(0.94);
}

.rnvp__btn:focus-visible {
	outline: 2px solid var(--rnvp-accent);
	outline-offset: 2px;
}

.rnvp__time {
	padding: 0 8px;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	color: var(--rnvp-muted);
	white-space: nowrap;
}

/* --- İlerleme çubuğu --- */

.rnvp__progress-wrap {
	position: relative;
	height: 16px;
	display: flex;
	align-items: center;
}

.rnvp__buffer {
	position: absolute;
	left: 0;
	top: 50%;
	height: 4px;
	width: 0;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.28);
	border-radius: 99px;
	pointer-events: none;
	transition: width 0.3s linear;
}

.rnvp__progress,
.rnvp__volume-range {
	--rnvp-played: 0%;

	position: relative;
	width: 100%;
	height: 16px;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.rnvp__progress:focus,
.rnvp__volume-range:focus {
	outline: none;
}

.rnvp__progress:focus-visible,
.rnvp__volume-range:focus-visible {
	outline: 2px solid var(--rnvp-accent);
	outline-offset: 3px;
	border-radius: 99px;
}

.rnvp__progress::-webkit-slider-runnable-track,
.rnvp__volume-range::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 99px;
	background: linear-gradient(
		to right,
		var(--rnvp-accent) 0%,
		var(--rnvp-accent) var(--rnvp-played),
		rgba(255, 255, 255, 0.22) var(--rnvp-played),
		rgba(255, 255, 255, 0.22) 100%
	);
}

.rnvp__progress::-moz-range-track,
.rnvp__volume-range::-moz-range-track {
	height: 4px;
	border-radius: 99px;
	background: linear-gradient(
		to right,
		var(--rnvp-accent) 0%,
		var(--rnvp-accent) var(--rnvp-played),
		rgba(255, 255, 255, 0.22) var(--rnvp-played),
		rgba(255, 255, 255, 0.22) 100%
	);
}

.rnvp__progress::-webkit-slider-thumb,
.rnvp__volume-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 13px;
	height: 13px;
	margin-top: -4.5px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
	transition: transform 0.16s ease;
}

.rnvp__progress::-moz-range-thumb,
.rnvp__volume-range::-moz-range-thumb {
	width: 13px;
	height: 13px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.rnvp__progress:hover::-webkit-slider-thumb {
	transform: scale(1.2);
}

/* --- Ses --- */

.rnvp__volume {
	display: flex;
	align-items: center;
}

.rnvp__volume-range {
	width: 0;
	opacity: 0;
	transition: width 0.24s ease, opacity 0.24s ease, margin 0.24s ease;
}

.rnvp__volume:hover .rnvp__volume-range,
.rnvp__volume:focus-within .rnvp__volume-range {
	width: 74px;
	opacity: 1;
	margin-inline: 4px 6px;
}

/* --- Hız menüsü --- */

.rnvp__menu {
	position: relative;
}

.rnvp__menu-panel {
	position: absolute;
	right: 0;
	bottom: calc(100% + 10px);
	min-width: 148px;
	padding: 8px;
	border-radius: 12px;
	background: rgba(18, 20, 24, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(14px);
	z-index: 6;
}

.rnvp__menu-heading {
	display: block;
	padding: 4px 8px 8px;
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--rnvp-muted);
}

.rnvp__menu-list {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.rnvp__menu-item {
	display: block;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: #fff;
	font-size: 13px;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.rnvp__menu-item:hover {
	background: rgba(255, 255, 255, 0.1);
}

.rnvp__menu-item.is-active {
	background: var(--rnvp-accent);
	color: #fff;
	font-weight: 600;
}

/* ---------------------------------------------------------------
 * Yükleniyor / hata
 * ------------------------------------------------------------- */

.rnvp__spinner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	z-index: 3;
	pointer-events: none;
}

.rnvp__spinner.is-visible {
	opacity: 1;
	visibility: visible;
}

.rnvp__spinner span {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.22);
	border-top-color: var(--rnvp-accent);
	animation: rnvp-spin 0.75s linear infinite;
}

@keyframes rnvp-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rnvp__spinner span {
		animation-duration: 2.4s;
	}

	.rnvp *,
	.rnvp *::before,
	.rnvp *::after {
		transition-duration: 0.01ms !important;
	}
}

.rnvp__error {
	position: absolute;
	inset: auto 16px 64px 16px;
	padding: 12px 16px;
	border-radius: 10px;
	background: rgba(180, 32, 40, 0.92);
	color: #fff;
	font-size: 13.5px;
	text-align: center;
	z-index: 7;
}

/* ---------------------------------------------------------------
 * Oynatma listesi
 * ------------------------------------------------------------- */

.rnvp__playlist {
	display: flex;
	flex-direction: column;
	flex: 0 0 var(--rnvp-playlist-width);
	max-width: var(--rnvp-playlist-width);
	background: var(--rnvp-surface-2);
	border-left: 1px solid rgba(255, 255, 255, 0.07);
	min-height: 0;
}

.rnvp__playlist-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 14px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	flex: 0 0 auto;
}

.rnvp__playlist-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rnvp-muted);
}

.rnvp__playlist-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 22px;
	padding: 0 7px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.1);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--rnvp-text);
}

.rnvp__playlist-items {
	margin: 0;
	padding: 6px;
	list-style: none;
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
}

.rnvp__playlist-items::-webkit-scrollbar {
	width: 8px;
}

.rnvp__playlist-items::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 99px;
}

.rnvp__playlist-item {
	margin: 0 0 2px;
	list-style: none;
}

.rnvp__playlist-btn {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	padding: 8px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.18s ease;
	font: inherit;
}

.rnvp__playlist-btn:hover {
	background: rgba(255, 255, 255, 0.07);
}

.rnvp__playlist-btn:focus-visible {
	outline: 2px solid var(--rnvp-accent);
	outline-offset: -2px;
}

.rnvp__playlist-item.is-active .rnvp__playlist-btn {
	background: rgba(255, 255, 255, 0.11);
}

.rnvp__playlist-item.is-active .rnvp__playlist-name {
	color: var(--rnvp-accent);
	font-weight: 700;
}

.rnvp__playlist-thumb {
	position: relative;
	flex: 0 0 84px;
	width: 84px;
	aspect-ratio: 16 / 9;
	border-radius: 7px;
	overflow: hidden;
	background: #000;
}

.rnvp__playlist-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rnvp__playlist-index {
	position: absolute;
	left: 4px;
	top: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.72);
	font-size: 10.5px;
	font-weight: 700;
	color: #fff;
}

.rnvp__playlist-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.rnvp__playlist-name {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--rnvp-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rnvp__playlist-duration {
	font-size: 11.5px;
	color: var(--rnvp-muted);
	font-variant-numeric: tabular-nums;
}

/* Alt konumlu liste. */

.rnvp--playlist-bottom .rnvp__inner {
	flex-direction: column;
}

.rnvp--playlist-bottom .rnvp__playlist {
	flex: 0 0 auto;
	max-width: none;
	border-left: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.rnvp--playlist-bottom .rnvp__playlist-items {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 10px;
}

.rnvp--playlist-bottom .rnvp__playlist-item {
	flex: 0 0 232px;
	margin: 0;
}

/* ---------------------------------------------------------------
 * Başlık / açıklama bloğu
 * ------------------------------------------------------------- */

.rnvp__caption {
	margin-top: 14px;
	color: inherit;
}

.rnvp__caption-title {
	margin: 0 0 6px;
	font-size: 1.15em;
	line-height: 1.3;
	color: inherit;
}

.rnvp__caption-text {
	margin: 0;
	font-size: 0.95em;
	opacity: 0.82;
	color: inherit;
}

.rnvp__noscript {
	margin: 10px 0 0;
	font-size: 0.92em;
}

/* ---------------------------------------------------------------
 * Lightbox tetikleyici
 * ------------------------------------------------------------- */

.rnvp__trigger {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: left;
}

.rnvp__trigger-inner {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--rnvp-ratio);
	border-radius: var(--rnvp-radius);
	overflow: hidden;
	box-shadow: var(--rnvp-shadow);
	background: var(--rnvp-surface);
}

.rnvp__trigger .rnvp__poster {
	cursor: inherit;
}

.rnvp__trigger .rnvp__bigplay--static {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.rnvp__trigger:hover .rnvp__bigplay--static {
	transform: translate(-50%, -50%) scale(1.09);
}

.rnvp__trigger:focus-visible .rnvp__trigger-inner {
	outline: 3px solid var(--rnvp-accent);
	outline-offset: 3px;
}

.rnvp__trigger-label {
	display: block;
	margin-top: 10px;
	font-size: 0.98em;
	font-weight: 600;
	color: inherit;
}

/* ---------------------------------------------------------------
 * Lightbox penceresi
 * ------------------------------------------------------------- */

body.rnvp-lightbox-open {
	overflow: hidden;
}

.rnvp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 4vw, 48px);
	background: rgba(6, 7, 9, 0.88);
	backdrop-filter: blur(8px);
	animation: rnvp-fade 0.22s ease;
	max-width: none;
}

@keyframes rnvp-fade {
	from {
		opacity: 0;
	}
}

.rnvp-lightbox__shell {
	position: relative;
	width: min(1180px, 100%);
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rnvp-lightbox .rnvp__frame {
	width: 100%;
}

.rnvp-lightbox .rnvp__ui {
	opacity: 1;
	pointer-events: auto;
}

.rnvp-lightbox__close {
	position: absolute;
	top: -46px;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.18s ease;
	z-index: 10;
}

.rnvp-lightbox__close svg {
	width: 20px;
	height: 20px;
}

.rnvp-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.22);
}

.rnvp-lightbox__close:focus-visible {
	outline: 2px solid var(--rnvp-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
 * Erişim kilidi kutusu
 * ------------------------------------------------------------- */

.rnvp-locked {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: clamp(28px, 6vw, 54px) 24px;
	border-radius: 14px;
	background: linear-gradient(160deg, #16191e 0%, #0d0f12 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: #eef1f5;
	text-align: center;
}

.rnvp-locked__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
	color: var(--rnvp-accent, #b9a16b);
}

.rnvp-locked__text {
	margin: 0;
	max-width: 42ch;
	font-size: 15px;
	opacity: 0.88;
}

.rnvp-locked__btn {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 99px;
	background: var(--rnvp-accent, #b9a16b);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: filter 0.18s ease;
}

.rnvp-locked__btn:hover {
	filter: brightness(1.08);
	color: #fff;
}

.rnvp__notice {
	padding: 12px 16px;
	border-left: 3px solid #b9a16b;
	background: rgba(185, 161, 107, 0.09);
	font-size: 14px;
}

/* ---------------------------------------------------------------
 * Ortadaki oynat/duraklat ve sarma düğmeleri
 * ------------------------------------------------------------- */

.rnvp__center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
	display: flex;
	align-items: center;
	gap: clamp(14px, 5%, 42px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s ease, visibility 0.22s ease;
}

/* Oynatma başladıktan sonra: fare üzerindeyken ya da duraklatılmışken görünür. */
.rnvp.is-started:not(.is-idle) .rnvp__center {
	opacity: 1;
	visibility: visible;
}

.rnvp__center-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(12, 14, 18, 0.55);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.rnvp__center-btn svg {
	width: 24px;
	height: 24px;
	display: block;
}

.rnvp__center-btn--main {
	width: 68px;
	height: 68px;
	background: rgba(12, 14, 18, 0.66);
}

.rnvp__center-btn--main svg {
	width: 32px;
	height: 32px;
}

.rnvp__center-btn:hover {
	background: var(--rnvp-accent);
	transform: scale(1.07);
}

.rnvp__center-btn:active {
	transform: scale(0.95);
}

.rnvp__center-btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* ---------------------------------------------------------------
 * Çift dokunarak sarma bölgeleri
 * ------------------------------------------------------------- */

.rnvp__taps {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}

.rnvp__tap {
	position: relative;
	width: 32%;
	height: 100%;
	pointer-events: auto;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
}

.rnvp__tap-ripple {
	position: absolute;
	top: 50%;
	width: 190%;
	aspect-ratio: 1;
	transform: translateY(-50%) scale(0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.42s ease, transform 0.42s ease;
}

.rnvp__tap--back .rnvp__tap-ripple {
	right: 8%;
}

.rnvp__tap--fwd .rnvp__tap-ripple {
	left: 8%;
}

.rnvp__tap-ripple.is-active {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}

.rnvp__tap-label {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
	font-variant-numeric: tabular-nums;
}

/* Fare kullanan masaüstünde bölgeler görsel olarak hissedilmez. */
@media (hover: hover) and (pointer: fine) {
	.rnvp__tap {
		width: 26%;
	}
}

/* ---------------------------------------------------------------
 * Sarma düğmeleri (kontrol çubuğu)
 * ------------------------------------------------------------- */

.rnvp__btn--skip svg text {
	font-size: 7.6px;
}

/* ---------------------------------------------------------------
 * Ayarlar menüsü bölümleri
 * ------------------------------------------------------------- */

.rnvp__menu-panel {
	max-height: 320px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.rnvp__menu-section + .rnvp__menu-section {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.rnvp__menu-section[hidden] {
	display: none;
}

.rnvp__menu-slider {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 4px 10px 6px;
}

.rnvp__menu-range {
	--rnvp-played: 50%;

	flex: 1 1 auto;
	width: 100%;
	height: 16px;
	margin: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.rnvp__menu-range::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.24);
}

.rnvp__menu-range::-moz-range-track {
	height: 4px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.24);
}

.rnvp__menu-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 13px;
	height: 13px;
	margin-top: -4.5px;
	border: 0;
	border-radius: 50%;
	background: var(--rnvp-accent);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.rnvp__menu-range::-moz-range-thumb {
	width: 13px;
	height: 13px;
	border: 0;
	border-radius: 50%;
	background: var(--rnvp-accent);
}

.rnvp__menu-range:focus-visible {
	outline: 2px solid var(--rnvp-accent);
	outline-offset: 3px;
	border-radius: 99px;
}

.rnvp__menu-readout {
	min-width: 42px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--rnvp-muted);
	text-align: right;
}

/* Medya katmanına uygulanan parlaklık geçişi. */
.rnvp__media {
	transition: filter 0.16s linear;
}

/* ---------------------------------------------------------------
 * Duyarlı: küçük ekranlarda merkez düğmeleri incelt
 * ------------------------------------------------------------- */

@media (max-width: 600px) {
	.rnvp__center-btn {
		width: 44px;
		height: 44px;
	}

	.rnvp__center-btn svg {
		width: 21px;
		height: 21px;
	}

	.rnvp__center-btn--main {
		width: 58px;
		height: 58px;
	}

	.rnvp__center-btn--main svg {
		width: 27px;
		height: 27px;
	}
}

/* ---------------------------------------------------------------
 * Tam ekran
 * ------------------------------------------------------------- */

.rnvp__frame:fullscreen {
	width: 100vw !important;
	height: 100vh;
	border-radius: 0;
	display: flex;
	align-items: center;
}

.rnvp__frame:fullscreen .rnvp__inner {
	width: 100%;
	height: 100%;
}

.rnvp__frame:fullscreen .rnvp__stage {
	aspect-ratio: auto;
	height: 100%;
}

.rnvp__frame:fullscreen .rnvp__playlist {
	max-height: 100%;
}

/* ---------------------------------------------------------------
 * Duyarlı davranış
 * ------------------------------------------------------------- */

@media (max-width: 860px) {
	.rnvp--has-playlist .rnvp__inner {
		flex-direction: column;
	}

	.rnvp--has-playlist .rnvp__playlist {
		flex: 0 0 auto;
		max-width: none;
		max-height: 260px;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.07);
	}
}

@media (max-width: 600px) {
	.rnvp {
		--rnvp-control-size: 34px;
		--rnvp-ui-pad: 10px;
	}

	.rnvp__bigplay {
		width: 58px;
		height: 58px;
	}

	.rnvp__btn svg {
		width: 19px;
		height: 19px;
	}

	.rnvp__time {
		font-size: 11.5px;
		padding: 0 4px;
	}

	.rnvp__volume:hover .rnvp__volume-range,
	.rnvp__volume:focus-within .rnvp__volume-range {
		width: 54px;
	}

	.rnvp__playlist-thumb {
		flex-basis: 68px;
		width: 68px;
	}

	.rnvp-lightbox__close {
		top: -42px;
	}
}