/*
 * MO Core — tasarım sistemi ve ortak bileşenler.
 *
 * Bu dosyada YALNIZCA her sayfada geçerli olan katman bulunur:
 * değişkenler, temel tipografi, butonlar, ses çalar, video lightbox.
 * Sayfaya özel düzenler temanın style.css dosyasındadır.
 */

/* ===========================================================================
 * 1) Tasarım belirteçleri
 * ======================================================================== */

:root {
	/*
	 * Renk paleti.
	 *
	 * Vurgu mor (#722F99); nötrler bilinçli olarak SOĞUK tutuluyor, çünkü
	 * sahne fotoğrafları mavi-beyaz ışıkta çekilmiş — sıcak bej/şeftali
	 * tonları o karelerle çakışıyordu.
	 *
	 * Yazı rengi siyaha yakın `--mo-ink`; mor yalnız vurgu ve koyu yüzeyde
	 * kullanılır. Siyah metin mor zeminde okunmaz (kontrast ~2.5:1), bu
	 * yüzden koyu yüzeylerde yazı beyaz/açık lila olur.
	 */
	--mo-ice:    #F8F7FC;  /* ana arka plan */
	--mo-white:  #FFFFFF;
	--mo-deep:   #2C1242;  /* koyu yüzey — alt bilgi, bülten bandı, menü */
	--mo-accent: #722F99;  /* ana vurgu — mor */
	--mo-lilac:  #A171C7;  /* ikincil vurgu */
	--mo-pink:   #E8B5C9;  /* seyrek yumuşak vurgu */
	--mo-soft:   #D9CCE8;  /* koyu yüzeydeki ikincil metin */
	--mo-mist:   #EDE9F5;  /* yumuşak bölüm zemini */
	--mo-ink:    #15121A;  /* ana metin — siyaha yakın */
	--mo-slate:  #6E6878;  /* ikincil metin */
	--mo-border: #E2DEE9;

	/*
	 * Tipografi.
	 *
	 * Marcellus Roma yazıtı geleneğinden gelen tek ağırlıklı (400) bir
	 * seriftir — kalın varyantı YOKTUR, başlıklarda font-weight yükseltmek
	 * tarayıcıya sahte kalınlık çizdirir. Ağırlık yerine punto ve boşlukla
	 * hiyerarşi kurulur. Arayüz ve gövde Outfit'te.
	 */
	--mo-serif: "Marcellus", "Times New Roman", Times, serif;
	--mo-sans:  "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Ölçü */
	--mo-max:    1360px;  /* içerik genişliği */
	--mo-gutter: 40px;    /* kenar boşluğu */
	--mo-radius: 999px;   /* buton yuvarlaklığı */
	--mo-card-radius: 4px;

	/* Hareket */
	--mo-ease: cubic-bezier(.22, 1, .36, 1);
	--mo-dur:  .4s;
}

@media (max-width: 900px) {
	:root {
		--mo-gutter: 20px;
	}
}

/* ===========================================================================
 * 2) Temel
 * ======================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/*
	 * Yatay taşmaya karşı güvenlik ağı. `clip` kaydırma bağlamı
	 * oluşturmadığı için başlıktaki position:sticky bozulmaz; `hidden`
	 * bozardı. Body'ye vermek her tarayıcıda görüntü alanına yansımıyor,
	 * bu yüzden ikisinde de var.
	 */
	overflow-x: clip;
}

body {
	margin: 0;
	/*
	 * Yatay taşmaya karşı güvenlik ağı. `hidden` yerine `clip` kullanılıyor:
	 * `hidden` bir kaydırma bağlamı oluşturup başlıktaki position:sticky'yi
	 * bozardı, `clip` bozmaz.
	 */
	overflow-x: clip;
	background: var(--mo-ice);
	color: var(--mo-ink);
	font-family: var(--mo-sans);
	/* Outfit'in x-yüksekliği geniş; 16px'te rahat okunuyor. */
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
}

/* Klavye kullanıcısı için görünür odak; fare tıklamasında görünmez. */
:focus-visible {
	outline: 2px solid var(--mo-accent);
	outline-offset: 3px;
}

/* Ekran okuyucuya özel metin. */
.mo-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* "İçeriğe atla" bağlantısı — odaklanınca görünür olur. */
.mo-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--mo-deep);
	color: #fff;
	padding: 12px 20px;
	font-size: 13px;
}

.mo-skip:focus {
	left: 0;
}

/* ===========================================================================
 * 3) Tipografi
 * ======================================================================== */

h1, h2, h3, h4 {
	font-family: var(--mo-serif);
	font-weight: 400;
	line-height: .95;
	margin: 0;
	color: var(--mo-ink);
	letter-spacing: -.01em;
}

p {
	margin: 0 0 1.2em;
}

p:last-child {
	margin-bottom: 0;
}

/* Bölüm başlığı — tasarım sistemindeki "Section Heading". */
.mo-h-section {
	font-family: var(--mo-serif);
	font-size: clamp(38px, 5vw, 82px);
	font-weight: 400;
	line-height: .95;
	color: var(--mo-ink);
}

/* Büyük editorial başlık. */
.mo-h-display {
	font-family: var(--mo-serif);
	font-size: clamp(48px, 7vw, 120px);
	font-weight: 400;
	line-height: .9;
	letter-spacing: -.02em;
	color: var(--mo-ink);
}

/* Küçük etiket — bölüm üstlerindeki büyük harfli minik yazı. */
.mo-label {
	font-family: var(--mo-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mo-slate);
	margin: 0 0 14px;
	display: block;
}

.mo-lead {
	font-size: 17px;
	line-height: 1.75;
	color: var(--mo-slate);
	max-width: 62ch;
}

.mo-muted {
	color: var(--mo-slate);
}

/* ===========================================================================
 * 4) Düzen yardımcıları
 * ======================================================================== */

.mo-wrap {
	max-width: var(--mo-max);
	margin: 0 auto;
	padding-left: var(--mo-gutter);
	padding-right: var(--mo-gutter);
}

.mo-section {
	padding: clamp(64px, 8vw, 120px) 0;
}

/*
 * Hero'nun hemen ardından gelen bölüm daha yukarıdan başlar: tam boy bir
 * görselden sonra 64px'lik boşluk, dar ekranda kopukluk gibi duruyordu.
 */
.mo-hero + .mo-section {
	padding-top: clamp(34px, 5vw, 78px);
}

@media (max-width: 900px) {
	.mo-section {
		padding: clamp(46px, 7vw, 74px) 0;
	}

	.mo-hero + .mo-section {
		padding-top: 26px;
	}
}

.mo-section--tight {
	padding: clamp(48px, 5vw, 72px) 0;
}

.mo-section--white {
	background: var(--mo-white);
}

.mo-section--mist {
	background: linear-gradient(180deg, var(--mo-mist) 0%, var(--mo-ice) 100%);
}

/*
 * Kart ızgaralarının çocukları daralabilsin. Varsayılan `min-width:auto`
 * kartı içeriğinin min-content genişliğinde tutuyor; dar sütunda uzun
 * başlık ya da dalga formu kartı sütundan taşırıyor.
 */
.mo-rgrid > *,
.mo-vgrid > *,
.mo-ngrid > *,
.mo-ggrid > *,
.mo-albums > *,
.mo-ccards > *,
.mo-news-home__list > * {
	min-width: 0;
}

/*
 * Izgara ve flex çocuklarının daralabilmesi için. Varsayılan `min-width:auto`
 * çocuğu min-content genişliğinde tutuyor; içinde kısaltılması gereken uzun
 * bir metin varsa (parça adı gibi) kutu viewport'u aşıyor ve sayfa yana
 * kayıyor.
 */
.mo-wrap > *,
.mo-sec-head__title {
	min-width: 0;
}

/* Bölüm başlığı satırı: solda başlık, sağda "tümü" bağlantısı. */
.mo-sec-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(28px, 4vw, 52px);
}

.mo-sec-head__title {
	min-width: 0;
}

/* ===========================================================================
 * 5) Butonlar ve bağlantılar
 * ======================================================================== */

.mo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--mo-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	padding: 14px 26px;
	border-radius: var(--mo-radius);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--mo-dur) var(--mo-ease),
	            color var(--mo-dur) var(--mo-ease),
	            border-color var(--mo-dur) var(--mo-ease);
}

.mo-btn--primary {
	background: var(--mo-accent);
	color: var(--mo-white);
}

.mo-btn--primary:hover {
	background: var(--mo-deep);
}

.mo-btn--ghost {
	background: transparent;
	border-color: var(--mo-ink);
	color: var(--mo-ink);
}

.mo-btn--ghost:hover {
	background: var(--mo-deep);
	color: var(--mo-white);
}

/* Koyu zemin üstünde kullanılan açık varyantlar. */
.mo-btn--light {
	background: var(--mo-white);
	color: var(--mo-ink);
}

.mo-btn--light:hover {
	background: var(--mo-soft);
}

.mo-btn--outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, .55);
	color: var(--mo-white);
}

.mo-btn--outline-light:hover {
	background: var(--mo-white);
	color: var(--mo-ink);
	border-color: var(--mo-white);
}

.mo-btn--sm {
	padding: 9px 18px;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Ok işaretli metin bağlantısı — hover'da ok ileri kayar. */
.mo-arrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mo-accent);
	white-space: nowrap;
}

.mo-arrow__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--mo-border);
	transition: transform var(--mo-dur) var(--mo-ease),
	            border-color var(--mo-dur) var(--mo-ease),
	            background-color var(--mo-dur) var(--mo-ease);
}

.mo-arrow:hover .mo-arrow__ico {
	transform: translateX(4px);
	border-color: var(--mo-accent);
	background: var(--mo-accent);
	color: var(--mo-white);
}

/* Alt çizgisi hover'da açılan bağlantı. */
.mo-underline {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size var(--mo-dur) var(--mo-ease);
}

.mo-underline:hover {
	background-size: 100% 1px;
}

/* ===========================================================================
 * 6) Kart temelleri
 * ======================================================================== */

.mo-card {
	background: var(--mo-white);
	border: 1px solid var(--mo-border);
	border-radius: var(--mo-card-radius);
	overflow: hidden;
	transition: border-color var(--mo-dur) var(--mo-ease),
	            transform var(--mo-dur) var(--mo-ease);
}

.mo-card:hover {
	border-color: var(--mo-soft);
}

/* Görsel çerçevesi — içindeki resim hover'da hafifçe büyür. */
.mo-frame {
	position: relative;
	overflow: hidden;
	background: var(--mo-mist);
}

.mo-frame > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform .8s var(--mo-ease);
}

.mo-card:hover .mo-frame > img,
a:hover > .mo-frame > img,
.mo-frame:hover > img {
	transform: scale(1.03);
}

.mo-ratio-1 { aspect-ratio: 1 / 1; }
.mo-ratio-43 { aspect-ratio: 4 / 3; }
.mo-ratio-169 { aspect-ratio: 16 / 9; }
.mo-ratio-34 { aspect-ratio: 3 / 4; }

/* Video kapaklarındaki oynat düğmesi. */
.mo-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, rgba(44, 18, 66, 0) 40%, rgba(44, 18, 66, .45) 100%);
	transition: background-color var(--mo-dur) var(--mo-ease);
}

.mo-play__ring {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, .85);
	background: rgba(255, 255, 255, .12);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--mo-dur) var(--mo-ease),
	            background-color var(--mo-dur) var(--mo-ease);
}

.mo-play__ring::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 4px;
	border-left: 15px solid #fff;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
}

a:hover .mo-play__ring {
	transform: scale(1.08);
	background: rgba(114, 47, 153, .55);
}

/* ===========================================================================
 * 7) Dalga formlu ses çalar
 *
 * serkancagri.com'daki çaların taşınabilir sürümü; renkler bu sitenin
 * paletine bağlandı. Çubuklar JavaScript tarafından üretilir.
 * ======================================================================== */

.scp {
	--scp-bar-on:  var(--mo-accent);
	--scp-bar-off: rgba(44, 18, 66, .18);
	--scp-icon:    var(--mo-ink);
	--scp-ring:    var(--mo-border);
	--scp-time:    var(--mo-slate);
	--scp-btn:     38px;
	--scp-wave-h:  40px;
	--scp-gap:     16px;

	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 var(--mo-dur) var(--mo-ease),
	            background-color var(--mo-dur) var(--mo-ease);
}

.scp-btn:hover {
	border-color: var(--mo-accent);
	background: rgba(114, 47, 153, .07);
}

/* Play üçgeni — düğme çapına oranlı çizilir. */
.scp-btn::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: calc(var(--scp-btn) * .08);
	border-left: calc(var(--scp-btn) * .3) solid var(--scp-icon);
	border-top: calc(var(--scp-btn) * .18) solid transparent;
	border-bottom: calc(var(--scp-btn) * .18) solid transparent;
	transition: none;
}

/* Çalarken iki çubuk — Font Awesome'a gerek kalmasın diye saf CSS. */
.scp-btn.is-playing::before {
	width: calc(var(--scp-btn) * .09);
	height: calc(var(--scp-btn) * .34);
	margin-left: 0;
	border: 0;
	background: var(--scp-icon);
	box-shadow: calc(var(--scp-btn) * .17) 0 0 var(--scp-icon);
	transform: translateX(calc(var(--scp-btn) * -.085));
}

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

.scp-wave > i {
	flex: 1 1 auto;
	min-width: 1px;
	border-radius: 1px;
	background: var(--scp-bar-off);
	transition: background-color .15s linear;
}

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

.scp-time {
	flex: none;
	font-size: 12px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--scp-time);
	letter-spacing: .04em;
}

/* Koyu zeminde kullanılan varyant. */
.scp--dark {
	--scp-bar-on:  #FFFFFF;
	--scp-bar-off: rgba(255, 255, 255, .3);
	--scp-icon:    #FFFFFF;
	--scp-ring:    rgba(255, 255, 255, .45);
	--scp-time:    var(--mo-soft);
}

/* ===========================================================================
 * 8) Video lightbox
 * ======================================================================== */

.scp-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(15, 22, 46, .92);
	opacity: 0;
	transition: opacity .3s var(--mo-ease);
}

.scp-lb.is-open {
	opacity: 1;
}

.scp-lb__box {
	position: relative;
	width: min(1180px, 100%);
	aspect-ratio: 16 / 9;
	background: #000;
}

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

.scp-lb__close {
	position: absolute;
	top: -46px;
	right: 0;
	width: 36px;
	height: 36px;
	border: 0;
	background: none;
	cursor: pointer;
	color: #fff;
	font-size: 26px;
	line-height: 1;
	opacity: .85;
	transition: opacity var(--mo-dur) var(--mo-ease);
}

.scp-lb__close:hover {
	opacity: 1;
}

@media (max-width: 640px) {
	.scp-lb__close {
		top: -42px;
	}
}

/* ===========================================================================
 * 9) Açılış hareketi
 *
 * Görünür alana giren bölümler yumuşakça belirir. Hareketi azaltmayı
 * seçen kullanıcılarda animasyon tamamen kapanır.
 * ======================================================================== */

.mo-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s var(--mo-ease), transform .7s var(--mo-ease);
}

.mo-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Sıralı belirme — kardeş öğeler birbirini kısa aralıkla izler. */
.mo-stagger > * {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s var(--mo-ease), transform .6s var(--mo-ease);
}

.mo-stagger.is-in > * {
	opacity: 1;
	transform: none;
}

.mo-stagger.is-in > *:nth-child(2) { transition-delay: .08s; }
.mo-stagger.is-in > *:nth-child(3) { transition-delay: .16s; }
.mo-stagger.is-in > *:nth-child(4) { transition-delay: .24s; }
.mo-stagger.is-in > *:nth-child(5) { transition-delay: .32s; }
.mo-stagger.is-in > *:nth-child(6) { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.mo-reveal,
	.mo-stagger > * {
		opacity: 1;
		transform: none;
	}
}

/* ===========================================================================
 * 10) Sayfa altındaki sabit çalar
 *
 * Bir önizleme başlayınca alttan çıkar. Sayfa gezinirken ses devam etmez
 * (her sayfa yeni yüklenir) ama aynı sayfada gezinirken kontrol elde kalır.
 * ======================================================================== */

.mo-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 950;
	background: var(--mo-deep);
	color: var(--mo-white);
	transform: translateY(100%);
	transition: transform .45s var(--mo-ease);
	box-shadow: 0 -10px 40px rgba(18, 6, 30, .28);
}

.mo-bar.is-open {
	transform: none;
}

.mo-bar__inner {
	max-width: var(--mo-max);
	margin: 0 auto;
	padding: 10px var(--mo-gutter);
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 64px;
}

.mo-bar__cover {
	width: 44px;
	height: 44px;
	flex: none;
	object-fit: cover;
	border-radius: 2px;
}

/* Play / pause düğmesi — çalardaki ikonun aynısı, beyaz. */
.mo-bar__toggle {
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .45);
	background: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--mo-dur) var(--mo-ease);
}

.mo-bar__toggle:hover {
	background: rgba(255, 255, 255, .12);
}

.mo-bar__toggle::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 3px;
	border-left: 11px solid #fff;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
}

.mo-bar__toggle.is-playing::before {
	width: 3.5px;
	height: 13px;
	margin-left: 0;
	border: 0;
	background: #fff;
	box-shadow: 6px 0 0 #fff;
	transform: translateX(-3px);
}

.mo-bar__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 0 1 240px;
}

.mo-bar__title {
	font-size: 13px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mo-bar__artist {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mo-soft);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Parça adı yoksa metin alanı yer kaplamasın. */
.mo-bar.is-bare .mo-bar__meta {
	display: none;
}

.mo-bar__seek {
	flex: 1 1 auto;
	height: 4px;
	min-width: 60px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .22);
	cursor: pointer;
	position: relative;
}

.mo-bar__fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	border-radius: 2px;
	background: var(--mo-soft);
}

.mo-bar__time {
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--mo-soft);
	flex: none;
}

.mo-bar__close {
	width: 32px;
	height: 32px;
	flex: none;
	border: 0;
	background: none;
	color: var(--mo-soft);
	font-size: 15px;
	cursor: pointer;
	transition: color var(--mo-dur) var(--mo-ease);
}

.mo-bar__close:hover {
	color: var(--mo-white);
}

/* Çubuk açıkken sayfanın son bölümü altında kalmasın. */
body:has(.mo-bar.is-open) {
	padding-bottom: 64px;
}

@media (max-width: 640px) {
	.mo-bar__inner {
		gap: 10px;
	}

	.mo-bar__cover,
	.mo-bar__time--total {
		display: none;
	}

	.mo-bar__meta {
		flex-basis: auto;
	}
}

/* ===========================================================================
 * 11) Çerez bildirimi
 * ======================================================================== */

.mo-cookie {
	position: fixed;
	left: var(--mo-gutter);
	bottom: var(--mo-gutter);
	z-index: 940;
	max-width: 440px;
	background: var(--mo-deep);
	color: var(--mo-white);
	padding: 20px 22px;
	border-radius: 4px;
	box-shadow: 0 18px 50px rgba(18, 6, 30, .3);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .45s var(--mo-ease), transform .45s var(--mo-ease);
}

.mo-cookie.is-open {
	opacity: 1;
	transform: none;
}

.mo-cookie__text {
	margin: 0;
	font-size: 13px;
	line-height: 1.65;
	color: var(--mo-soft);
}

.mo-cookie__text a {
	color: var(--mo-white);
}

/* İki seçenek yan yana; dar ekranda alt alta. */
.mo-cookie__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Alt çalar açıkken bildirim onun üstünde dursun. */
body:has(.mo-bar.is-open) .mo-cookie {
	bottom: calc(var(--mo-gutter) + 64px);
}

@media (max-width: 560px) {
	.mo-cookie {
		left: 12px;
		right: 12px;
		bottom: 12px;
		max-width: none;
	}
}

/* ---------------------------------------------------------------------------
 * Görsel lightbox — basın kupürleri
 * ------------------------------------------------------------------------ */

.scp-lb--image {
	background: rgba(18, 6, 30, .94);
}

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

.scp-lb__figure img {
	max-width: 100%;
	/* Üstteki kapat düğmesine ve kenar boşluğuna yer bırakılır. */
	max-height: calc(100vh - 110px);
	width: auto;
	height: auto;
	object-fit: contain;
	background: #fff;
	cursor: default;
}

.scp-lb--image .scp-lb__close {
	top: -44px;
	right: 0;
}

/* Lightbox — albüm gezinme */

.scp-lb__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .4);
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--mo-dur) var(--mo-ease);
}

.scp-lb__nav:hover {
	background: rgba(255, 255, 255, .22);
}

.scp-lb__nav--prev { left: -62px; }
.scp-lb__nav--next { right: -62px; }

.scp-lb__count {
	position: absolute;
	top: -38px;
	left: 0;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .1em;
	color: var(--mo-soft);
}

/* Dar ekranda oklar görselin üstüne alınır. */
@media (max-width: 1040px) {
	.scp-lb__nav--prev { left: 8px; }
	.scp-lb__nav--next { right: 8px; }

	.scp-lb__nav {
		background: rgba(18, 6, 30, .55);
	}
}

/* Sabit çalar — parça geçiş düğmeleri */

.mo-bar__step {
	width: 32px;
	height: 32px;
	flex: none;
	border: 0;
	background: none;
	color: var(--mo-soft);
	font-size: 9px;
	letter-spacing: -2px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--mo-dur) var(--mo-ease);
}

.mo-bar__step:hover {
	color: var(--mo-white);
}

/* Tek parçalık çalarda geçiş okları yer kaplamasın. */
.mo-bar.is-solo .mo-bar__step {
	display: none;
}

@media (max-width: 640px) {
	.mo-bar__step {
		width: 28px;
	}
}