/*
 * reyhan/kalici-calar (E3) · kalıcı çubuk, panel, scrubber, hız, takip vurgusu.
 * SPEC 3.7, 3.8, 3.10.4, 3.11. Her sayfada yüklenir. Kart, gölge, gradyan, blur yok.
 */

/* Gövde alt boşluğu yalnız çubuk açıkken. */
html.r-calar-acik body {
	padding-block-end: calc(var(--r-player-h, 64px) + env(safe-area-inset-bottom, 0px));
}

/* ---------- Çubuk ---------- */
.r-calar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 20;
	padding-block-end: env(safe-area-inset-bottom, 0px);
	background: var(--r-paper-2);
	border-block-start: 1px solid var(--r-line);
	color: var(--r-ink);
	font-family: var(--r-f-sans);
	view-transition-name: reyhan-calar;
	/*
	 * Durağan hâlde `transform: none`: dönüşümlü ata `position: fixed`
	 * çocuklar (panel, örtü) için kapsayıcı blok olur ve örtü yalnız çubuğu
	 * kaplardı. Giriş kaydırması yalnız @starting-style'dan gelir.
	 */
	transform: none;
	transition: transform var(--r-dur-2) var(--r-ease), display var(--r-dur-2) allow-discrete;
}
.r-calar[hidden] {
	display: none;
	transform: translateY(100%);
}
@starting-style {
	.r-calar {
		transform: translateY(100%);
	}
}

/* 2 px dinleme ilerlemesi (etkileşimsiz). */
.r-calar__iz {
	position: absolute;
	inset-inline: 0;
	inset-block-start: -1px;
	block-size: 2px;
	pointer-events: none;
}
.r-calar__iz-dolgu {
	display: block;
	block-size: 100%;
	inline-size: 0;
	background: var(--sayi);
	transition: background-color var(--r-dur-3) var(--r-ease);
}

.r-calar__cubuk {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	box-sizing: border-box;
	max-inline-size: 1360px;
	block-size: var(--r-player-h, 64px);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 80px);
}

.r-calar__sol {
	display: flex;
	align-items: center;
	gap: 12px;
	min-inline-size: 0;
}
.r-calar__kapak {
	flex-shrink: 0;
	inline-size: 40px;
	block-size: 40px;
	object-fit: cover;
	border-radius: 0;
}
.r-calar__kapak[hidden] {
	display: none;
}

.r-calar__bilgi {
	display: flex;
	align-items: baseline;
	gap: 0;
	min-inline-size: 0;
	max-inline-size: 400px;
	min-block-size: 44px;
	align-content: center;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
}
.r-calar__baslik,
.r-calar__yazar {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.r-calar__baslik {
	flex-shrink: 1;
	min-inline-size: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
}
.r-calar__yazar {
	flex-shrink: 2;
	min-inline-size: 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--r-ink-2);
}
.r-calar__yazar:not(:empty)::before {
	content: " · ";
}
.r-calar__mobil-zaman {
	display: none;
}

/* Başlık alanının geçici içerikleri (takip durdu, sıradaki). */
.r-calar__gecici {
	display: flex;
	align-items: center;
	gap: 12px;
	min-inline-size: 0;
	font-size: 14px;
}
.r-calar__gecici[hidden],
.r-calar__takip-durdu[hidden],
.r-calar__siradaki[hidden] {
	display: none;
}
.r-calar__cubuk--gecici .r-calar__bilgi {
	display: none;
}
.r-calar__takip-durdu,
.r-calar__siradaki {
	display: flex;
	align-items: center;
	gap: 12px;
	min-inline-size: 0;
}
.r-calar__siradaki-metin {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.r-calar__sayac {
	font-family: var(--r-f-mono);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--r-ink-2);
}

.r-calar__orta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.r-calar__sag {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	min-inline-size: 0;
}
.r-calar__zaman {
	font-family: var(--r-f-mono);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--r-ink);
}

/* Sessize al: iki ikon, aria-pressed ile değişir. */
.r-calar__sessiz .r-ikon--sessiz,
.r-calar__sessiz[aria-pressed="true"] .r-ikon--ses {
	display: none;
}
.r-calar__sessiz[aria-pressed="true"] .r-ikon--sessiz {
	display: inline-block;
}

/* Takip / Sıra metin düğmeleri: ikon + görünür metin. */
.r-calar__takip,
.r-calar__sira-dugme {
	gap: 6px;
	font-size: 14px;
	white-space: nowrap;
}
.r-calar__takip[hidden] {
	display: none;
}
.r-calar__takip[aria-pressed="false"] {
	color: var(--r-ink-2);
	text-decoration-color: transparent;
}
.r-calar__takip[aria-pressed="true"] {
	text-decoration-thickness: 2px;
}

/* ---------- Hız hapı ve hız grubu ---------- */
.r-hiz-hapi {
	position: relative;
	display: inline-grid;
	place-items: center;
	min-inline-size: 44px;
	block-size: 28px;
	padding: 0 10px;
	background: var(--r-paper-3);
	border: 0;
	border-radius: 999px;
	color: var(--r-ink);
	font: 500 14px/16px var(--r-f-sans);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background-color var(--r-dur-1) var(--r-ease), color var(--r-dur-1) var(--r-ease);
}
.r-hiz-hapi::after {
	content: "";
	position: absolute;
	inset: -8px 0;
}

.r-hiz {
	display: inline-flex;
	flex-wrap: wrap;
	border: 1px solid var(--r-rule-strong);
	border-radius: 0;
}
.r-hiz__oge {
	min-inline-size: 44px;
	min-block-size: 44px;
	padding: 0 8px;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--r-ink);
	font: 500 14px/16px var(--r-f-sans);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background-color var(--r-dur-1) var(--r-ease), color var(--r-dur-1) var(--r-ease);
}
.r-hiz__oge + .r-hiz__oge {
	border-inline-start: 1px solid var(--r-rule-strong);
}
.r-hiz__oge[aria-pressed="true"] {
	background: var(--r-ink);
	color: var(--r-paper);
	font-weight: 600;
}

/* ---------- Scrubber (segmentli; SPEC 3.10.4) ---------- */
.r-scrubber__kap {
	position: relative;
	block-size: 32px;
	--r-sc-iz: 1px;
}
.r-scrubber__iz,
.r-scrubber__onbellek,
.r-scrubber__dolgu {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 50%;
	pointer-events: none;
}
.r-scrubber__iz {
	inset-inline-end: 0;
	block-size: 1px;
	transform: translateY(-50%);
}
.r-scrubber__segment {
	position: absolute;
	inset-block: 0;
	inset-inline-start: var(--bas, 0%);
	inline-size: max(0px, calc(var(--gen, 100%) - 2px));
	background: var(--r-rule-strong);
}
.r-scrubber__onbellek {
	inline-size: 0;
	block-size: 2px;
	transform: translateY(-50%);
	background: var(--sayi-15);
}
.r-scrubber__dolgu {
	inline-size: 0;
	block-size: 4px;
	transform: translateY(-50%);
	background: var(--sayi);
}
.r-scrubber {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	background: transparent;
	color: var(--sayi);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.r-scrubber::-webkit-slider-runnable-track {
	block-size: 32px;
	background: transparent;
	border: 0;
}
.r-scrubber::-moz-range-track {
	block-size: 32px;
	background: transparent;
	border: 0;
}
.r-scrubber::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	inline-size: 4px;
	block-size: 14px;
	margin-block-start: 9px;
	background: var(--sayi);
	border: 0;
	border-radius: 0;
}
.r-scrubber::-moz-range-thumb {
	inline-size: 4px;
	block-size: 14px;
	background: var(--sayi);
	border: 0;
	border-radius: 0;
}
.r-scrubber:focus-visible {
	outline: 2px solid var(--r-accent);
	outline-offset: 3px;
}

/* ---------- Panel ---------- */
.r-calar__ortu {
	position: fixed;
	inset: 0;
	z-index: 29;
	background: transparent;
}
.r-calar__ortu[hidden],
.r-calar__panel[hidden] {
	display: none;
}
.r-calar__panel {
	position: fixed;
	z-index: 30;
	inset-inline-end: max(16px, calc((100vw - 1360px) / 2 + 16px));
	inset-block-end: calc(var(--r-player-h, 64px) + env(safe-area-inset-bottom, 0px));
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 16px;
	inline-size: min(420px, calc(100vw - 32px));
	max-block-size: min(560px, 70vh);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 20px;
	background: var(--r-paper);
	border: 1px solid var(--r-rule-strong);
	border-radius: 0;
	color: var(--r-ink);
	font-family: var(--r-f-sans);
}
.r-calar__panel:focus-visible {
	outline: 2px solid var(--r-accent);
	outline-offset: -2px;
}

.r-calar__panel-bas {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: 12px;
}
.r-calar__panel-bas .r-calar__kapak[hidden] + .r-calar__panel-metin {
	grid-column: 1 / 3;
}
.r-calar__panel-metin {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}
.r-calar__panel-baslik {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	color: var(--r-ink);
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: underline 1px var(--r-line);
	text-underline-offset: .2em;
}
.r-calar__panel-yazar {
	font-size: 13px;
	line-height: 18px;
	color: var(--r-ink-2);
}

.r-calar__panel-zaman {
	display: flex;
	justify-content: space-between;
	margin: 4px 0 0;
	font-family: var(--r-f-mono);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.r-calar__panel-zaman > :last-child {
	color: var(--r-ink-2);
}

.r-calar__panel-tasima {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

/* Sekmeler */
.r-calar__sekmeler {
	display: flex;
	border-block-end: 1px solid var(--r-line);
}
.r-calar__sekme {
	min-block-size: 44px;
	margin-block-end: -1px;
	padding: 0 12px;
	background: none;
	border: 0;
	border-block-end: 2px solid transparent;
	border-radius: 0;
	color: var(--r-ink-2);
	font: 500 15px/20px var(--r-f-sans);
	cursor: pointer;
}
.r-calar__sekme[aria-selected="true"] {
	border-block-end-color: var(--r-ink);
	color: var(--r-ink);
}
.r-calar__bolme[hidden] {
	display: none;
}
.r-calar__bos {
	margin: 12px 0 0;
}
.r-calar__bos[hidden] {
	display: none;
}

/* Bölümler (SPEC 3.10.3) */
.r-calar__bolumler,
.r-calar__sira {
	margin: 0;
	padding: 0;
	list-style: none;
}
.r-calar__bolum + .r-calar__bolum,
.r-calar__sira-oge + .r-calar__sira-oge {
	border-block-start: 1px solid var(--r-line);
}
.r-calar__bolum-dugme {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 24px;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 48px;
	padding: 0 0 0 12px;
	background: none;
	border: 0;
	border-inline-start: 2px solid transparent;
	border-radius: 0;
	color: var(--r-ink);
	font: 400 15px/20px var(--r-f-sans);
	text-align: start;
	cursor: pointer;
}
.r-calar__bolum--aktif .r-calar__bolum-dugme {
	border-inline-start-color: var(--r-ink);
	font-weight: 500;
}
.r-calar__bolum-zaman {
	font-family: var(--r-f-mono);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--r-ink-2);
}

/* Sıra */
.r-calar__sira-oge {
	display: flex;
	align-items: center;
	gap: 12px;
	min-block-size: 55px;
}
.r-calar__sira-cal {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
	min-block-size: 44px;
	justify-content: center;
	padding: 0 0 0 12px;
	background: none;
	border: 0;
	border-inline-start: 2px solid transparent;
	border-radius: 0;
	color: var(--r-ink);
	font: inherit;
	text-align: start;
	cursor: pointer;
}
.r-calar__sira-oge--aktif .r-calar__sira-cal {
	border-inline-start-color: var(--r-ink);
}
.r-calar__sira-baslik {
	overflow: hidden;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.r-calar__sira-alt {
	font-size: 13px;
	line-height: 18px;
	color: var(--r-ink-2);
}
.r-calar__kaldir {
	font-size: 14px;
}
.r-calar__temizle {
	margin-block-start: 8px;
	font-size: 14px;
}
.r-calar__temizle[hidden] {
	display: none;
}

/* Ayarlar */
.r-calar__ayarlar {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.r-calar__ayar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.r-calar__ayar-ad {
	font-size: 14px;
	color: var(--r-ink-2);
}
.r-calar__secim,
.r-calar__uyku {
	display: flex;
	align-items: center;
	gap: 10px;
	min-block-size: 44px;
	font-size: 15px;
	line-height: 20px;
	cursor: pointer;
}
.r-calar__secim input {
	flex-shrink: 0;
	inline-size: 20px;
	block-size: 20px;
	margin: 0;
	accent-color: var(--r-ink);
}
.r-calar__uyku select {
	min-block-size: 44px;
	padding: 0 8px;
	background: var(--r-paper);
	border: 1px solid var(--r-rule-strong);
	border-radius: 0;
	color: var(--r-ink);
	font: 400 16px/20px var(--r-f-sans);
}

.r-calar__panel-alt {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0;
	padding-block-start: 12px;
	border-block-start: 1px solid var(--r-line);
}
.r-calar__panel-alt a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--r-ink-2);
	font-size: 13px;
	text-decoration: underline 1px var(--r-line);
	text-underline-offset: .2em;
}
.r-calar__panel-alt a:not([href]) {
	display: none;
}

/* ---------- Dar ekran (< 720): alta sabit mobil çalar ve alt sayfa ---------- */
@media (max-width: 719.98px) {
	.r-calar__cubuk {
		grid-template-columns: minmax(0, 1fr) auto auto;
		gap: 4px;
		padding-inline: 16px 4px;
	}
	.r-calar__sol > .r-calar__kapak,
	.r-calar__onceki,
	.r-calar__orta > .r-calar__atla,
	.r-calar__zaman,
	.r-calar__sag > .r-hiz-hapi,
	.r-calar__sessiz,
	.r-calar__takip,
	.r-calar__sira-dugme {
		display: none;
	}
	.r-calar__takip[hidden] {
		display: none;
	}
	.r-calar__bilgi {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: baseline;
		max-inline-size: none;
		inline-size: 100%;
	}
	.r-calar__baslik {
		grid-column: 1 / -1;
	}
	.r-calar__yazar::before {
		content: none;
	}
	.r-calar__mobil-zaman {
		display: block;
		overflow: hidden;
		font-family: var(--r-f-mono);
		font-size: 13px;
		font-variant-numeric: tabular-nums;
		color: var(--r-ink-2);
		white-space: nowrap;
	}
	.r-calar__mobil-zaman::before {
		content: "\00a0· ";
	}
	.r-calar__yazar:empty + .r-calar__mobil-zaman::before {
		content: none;
	}
	.r-calar__orta {
		gap: 0;
	}
	.r-calar__oynat {
		--r-o: 44px;
	}
	.r-calar__gecici {
		flex-wrap: wrap;
		gap: 0 8px;
		font-size: 13px;
	}

	.r-calar__ortu {
		background: var(--wp--custom--scrim, rgb(0 0 0 / .4));
	}
	.r-calar__panel {
		inset-inline: 0;
		inset-block-end: 0;
		inline-size: auto;
		max-block-size: calc(100dvh - 120px);
		padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
		border-width: 1px 0 0;
	}
	/* Klavye kısayolları yalnız masaüstünde anlamlı (SPEC 3.8 madde 6). */
	.r-calar__secim--kisayol {
		display: none;
	}
}

/* ---------- Metin takip vurgusu (SPEC 3.11) ---------- */
::highlight(reyhan-cumle) {
	background-color: var(--r-marker);
	color: var(--r-ink);
}
html.r-belirgin-takip ::highlight(reyhan-cumle) {
	text-decoration: underline 2px var(--takip-cizgi);
	text-underline-offset: .18em;
}
mark.r-cumle {
	background-color: var(--r-marker);
	color: var(--r-ink);
	transition: background-color var(--r-dur-1) var(--r-ease);
}
html.r-belirgin-takip mark.r-cumle {
	text-decoration: underline 2px var(--takip-cizgi);
	text-underline-offset: .18em;
}
.r-metin > .r-okunuyor,
.wp-block-post-content > .r-okunuyor {
	position: relative;
}
.r-metin > .r-okunuyor::before,
.wp-block-post-content > .r-okunuyor::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: -16px;
	inline-size: 2px;
	background: var(--sayi);
	pointer-events: none;
}
@media (max-width: 719.98px) {
	.r-metin > .r-okunuyor::before,
	.wp-block-post-content > .r-okunuyor::before {
		inset-inline-start: -12px;
	}
}

/* ---------- Hover yalnız ince imleçte ---------- */
@media (hover: hover) and (pointer: fine) {
	.r-calar__bilgi:hover .r-calar__baslik,
	.r-calar__sira-cal:hover .r-calar__sira-baslik {
		color: var(--r-ink-2);
	}
	.r-hiz-hapi:hover,
	.r-hiz__oge:not([aria-pressed="true"]):hover {
		background: var(--r-ink);
		color: var(--r-paper);
	}
	.r-calar__sekme:hover {
		color: var(--r-ink);
	}
	.r-calar__bolum-dugme:hover,
	.r-calar__sira-cal:hover {
		background: var(--r-paper-2);
	}
	.r-calar__panel-baslik:hover,
	.r-calar__panel-alt a:hover {
		text-decoration-color: currentColor;
		text-decoration-thickness: 2px;
	}
	/* "Kaldır" ince imleçte yalnız hover ve odakta; dokunmatikte hep görünür. */
	.r-calar__sira-oge:not(:hover):not(:focus-within) .r-calar__kaldir {
		opacity: 0;
	}
	/* Scrubber tutamacı ince imleçte yalnız hover ve odakta. */
	.r-scrubber:not(:hover):not(:focus-visible)::-webkit-slider-thumb {
		opacity: 0;
	}
	.r-scrubber:not(:hover):not(:focus-visible)::-moz-range-thumb {
		opacity: 0;
	}
}

.r-calar :focus-visible,
.r-hiz-hapi:focus-visible,
.r-hiz__oge:focus-visible {
	outline: 2px solid var(--r-accent);
	outline-offset: 3px;
}

/* ---------- Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
	.r-calar,
	.r-calar__iz-dolgu,
	.r-hiz-hapi,
	.r-hiz__oge,
	mark.r-cumle {
		transition-duration: .01ms;
	}
	@starting-style {
		.r-calar {
			transform: none;
		}
	}
}

/* ---------- Zorlanmış renkler ---------- */
@media (forced-colors: active) {
	.r-calar {
		border-block-start-color: CanvasText;
	}
	.r-calar__panel {
		border-color: CanvasText;
	}
	.r-calar__iz-dolgu,
	.r-scrubber__dolgu,
	.r-scrubber__segment {
		background: Highlight;
	}
	.r-scrubber__onbellek {
		background: GrayText;
	}
	.r-scrubber::-webkit-slider-thumb {
		background: ButtonText;
	}
	.r-scrubber::-moz-range-thumb {
		background: ButtonText;
	}
	.r-hiz,
	.r-hiz__oge + .r-hiz__oge {
		border-color: ButtonText;
	}
	.r-hiz-hapi {
		border: 1px solid ButtonText;
	}
	.r-hiz__oge[aria-pressed="true"] {
		background: Highlight;
		color: HighlightText;
	}
	.r-calar__sekme[aria-selected="true"],
	.r-calar__bolum--aktif .r-calar__bolum-dugme,
	.r-calar__sira-oge--aktif .r-calar__sira-cal {
		border-color: Highlight;
	}
	::highlight(reyhan-cumle) {
		background-color: Mark;
		color: MarkText;
	}
	mark.r-cumle {
		background-color: Mark;
		color: MarkText;
	}
	.r-metin > .r-okunuyor::before,
	.wp-block-post-content > .r-okunuyor::before {
		background: Highlight;
	}
}