/*
Theme Name: Merve Özbey
Theme URI: https://merveozbey.com.tr
Author: GRKN Studios
Description: Merve Özbey resmi web sitesi teması. Modern, editorial ve fashion odaklı; içerik mo-* eklentilerinden gelir.
Version: 1.0.0
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: merveozbey
*/

/*
 * Bu dosya düzenden sorumludur. Tasarım belirteçleri (renk, tipografi,
 * buton, ses çalar) mo-core eklentisinin mo-core.css dosyasındadır.
 */

/* ===========================================================================
 * 1) Başlık
 * ======================================================================== */

.mo-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: var(--mo-white);
	border-bottom: 1px solid var(--mo-border);
	transition: background-color var(--mo-dur) var(--mo-ease),
	            border-color var(--mo-dur) var(--mo-ease);
}

/* Ana sayfada başlık hero'nun üstünde durur; kaydırınca opaklaşır. */
.mo-header--over {
	position: fixed;
	left: 0;
	right: 0;
	background: transparent;
	border-color: transparent;
	color: var(--mo-white);
}

.mo-header--over.is-scrolled {
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	border-color: var(--mo-border);
	color: var(--mo-ink);
}

.mo-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 74px;
}

/*
 * Marka — Merve Özbey'in imzası.
 *
 * Siyah ve beyaz sürüm birlikte basılır; zemine göre biri gösterilir.
 * Böylece hero'dan opak başlığa geçerken logo bir an kaybolmaz.
 */
.mo-brand {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: none;
	line-height: 0;
}

.mo-brand__logo {
	width: auto;
	height: 42px;
	transition: opacity var(--mo-dur) var(--mo-ease);
}

/* İkinci logo birincinin üstüne bindirilir. */
.mo-brand__logo--light {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

/* Varsayılan (opak başlık): siyah imza. */
.mo-brand__logo--dark { opacity: 1; }
.mo-brand__logo--light { opacity: 0; }

/* Hero üstündeki saydam başlıkta: beyaz imza. */
.mo-header--over:not(.is-scrolled) .mo-brand__logo--dark { opacity: 0; }
.mo-header--over:not(.is-scrolled) .mo-brand__logo--light { opacity: 1; }

.mo-footer__logo {
	width: auto;
	height: 54px;
}

.mo-nav__list {
	display: flex;
	align-items: center;
	/* On menü öğesi var; aralık buna göre ölçüldü. */
	gap: clamp(14px, 1.5vw, 22px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mo-nav__link {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	position: relative;
	transition: color var(--mo-dur) var(--mo-ease);
}

.mo-header:not(.mo-header--over) .mo-nav__link,
.mo-header--over.is-scrolled .mo-nav__link {
	color: var(--mo-ink);
}

.mo-nav__link:hover,
.mo-nav__link.is-active {
	color: var(--mo-accent);
}

/* Aktif öğenin altındaki ince çizgi. */
.mo-nav__link.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -7px;
	height: 1px;
	background: currentColor;
}

.mo-header__side {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: none;
}

/* Düğme içindeki küçük oynat üçgeni. */
.mo-btn__play {
	width: 0;
	height: 0;
	border-left: 8px solid currentColor;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

.mo-langs {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
}

.mo-langs__item {
	opacity: .6;
	transition: opacity var(--mo-dur) var(--mo-ease), color var(--mo-dur) var(--mo-ease);
}

.mo-langs__item:hover,
.mo-langs__item.is-active {
	opacity: 1;
	color: var(--mo-accent);
}

.mo-langs__sep {
	opacity: .35;
}

/* Hamburger — geniş ekranda da durur, tam menü panelini açar. */
.mo-burger {
	width: 30px;
	height: 22px;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.mo-burger span {
	display: block;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--mo-dur) var(--mo-ease), opacity var(--mo-dur) var(--mo-ease);
}

.mo-burger.is-open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.mo-burger.is-open span:nth-child(2) { opacity: 0; }
.mo-burger.is-open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ===========================================================================
 * 2) Tam ekran menü paneli
 * ======================================================================== */

.mo-menu {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: var(--mo-deep);
	color: var(--mo-white);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition: opacity .35s var(--mo-ease), transform .35s var(--mo-ease), visibility .35s;
	overflow-y: auto;
}

.mo-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.mo-menu__inner {
	max-width: var(--mo-max);
	margin: 0 auto;
	padding: 90px var(--mo-gutter) 60px;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
}

.mo-menu__close {
	position: absolute;
	top: 26px;
	right: var(--mo-gutter);
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	color: inherit;
	font-size: 22px;
	cursor: pointer;
	opacity: .8;
}

.mo-menu__close:hover {
	opacity: 1;
}

.mo-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mo-menu__list a {
	display: block;
	font-family: var(--mo-serif);
	font-size: clamp(30px, 5.5vw, 62px);
	font-weight: 400;
	line-height: 1.18;
	color: var(--mo-white);
	opacity: .85;
	transition: opacity var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease);
}

.mo-menu__list a:hover,
.mo-menu__list a.is-active {
	opacity: 1;
	transform: translateX(8px);
	color: var(--mo-soft);
}

.mo-menu__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, .16);
	padding-top: 24px;
}

.mo-menu__social {
	display: flex;
	gap: 18px;
	color: var(--mo-soft);
}

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

.mo-menu__langs {
	display: flex;
	gap: 18px;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mo-soft);
}

.mo-menu__langs a.is-active {
	color: var(--mo-white);
}

/* ===========================================================================
 * 3) Hero
 * ======================================================================== */

.mo-hero {
	position: relative;
	min-height: min(92vh, 860px);
	display: flex;
	align-items: flex-end;
	color: var(--mo-white);
	overflow: hidden;
	background: var(--mo-deep);
}

.mo-hero__media {
	position: absolute;
	inset: 0;
}

.mo-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.1s var(--mo-ease);
}

/* <picture> satır içi bir öğe; slaytı doldurması için blok yapılır. */
.mo-hero__slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * İki düzen ayrı: yalnız masaüstü karesi olan slayt mobilde, yalnız mobil
 * karesi olan slayt masaüstünde hiç görünmez. Böylece dikey bir kare geniş
 * ekranda kırpılarak gösterilmiş olmaz.
 */
@media (max-width: 900px) {
	.mo-hero__slide.is-wide-only {
		display: none;
	}
}

@media (min-width: 901px) {
	.mo-hero__slide.is-mobile-only {
		display: none;
	}
}

.mo-hero__slide.is-active {
	opacity: 1;
}

/*
 * Kare alttan hizalanır: kırpma gerekirse ÜSTTEN yapılır, sahnenin ve
 * kalabalığın olduğu alt bant korunur.
 */
.mo-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
}

/*
 * Geniş ekranda kare sağa kaydırılır. Sebep: sahne karesinin ortasında
 * Merve Özbey'in imzası var; başlık solda durduğu için ikisi üst üste
 * binmesin diye görselin ağırlık merkezi sağa alınır.
 */
@media (min-width: 1100px) {
	.mo-hero__slide img {
		object-position: 66% bottom;
	}
}

/*
 * Mobilde kare zaten dikey çekilmiş; ortadan hizalanınca özne tam
 * görünüyor, alttan hizalamak sahneyi kesiyordu.
 */
@media (max-width: 900px) {
	.mo-hero__slide img {
		object-position: center center;
	}
}

/*
 * Metnin okunması için sol alttan yumuşak koyulaştırma. Fotoğrafa renk
 * filtresi uygulanmaz — yalnız siyaha doğru bir geçiş konur.
 */
.mo-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(18, 6, 30, .82) 0%, rgba(18, 6, 30, .5) 38%, rgba(18, 6, 30, 0) 68%),
		linear-gradient(0deg, rgba(18, 6, 30, .72) 0%, rgba(18, 6, 30, 0) 45%);
}

.mo-hero__inner {
	position: relative;
	width: 100%;
	padding-top: 160px;
	padding-bottom: 54px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}

.mo-hero__text {
	max-width: 640px;
}

.mo-hero__title {
	font-family: var(--mo-serif);
	font-size: clamp(58px, 9vw, 150px);
	font-weight: 400;
	/*
	 * Marcellus'un çıkıntıları uzun; .86 satır aralığında "Özbey"in noktaları
	 * üstteki satıra değiyordu.
	 */
	line-height: 1.02;
	letter-spacing: -.015em;
	color: var(--mo-white);
	margin: 0;
}

.mo-hero__line {
	display: block;
}

/* Başlıkla düğmeler arasındaki boşluk; arada slogan yok. */
.mo-hero__title {
	margin-bottom: .34em;
}

.mo-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 34px;
}

.mo-hero__follow {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.mo-hero__follow-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}

.mo-hero__follow-arrow {
	display: inline-flex;
	color: rgba(255, 255, 255, .55);
}

.mo-hero__social {
	display: flex;
	gap: 16px;
	color: rgba(255, 255, 255, .85);
}

.mo-hero__social a {
	transition: color var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease);
}

.mo-hero__social a:hover {
	color: var(--mo-white);
	transform: translateY(-2px);
}

.mo-hero__controls {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
	padding-bottom: 6px;
}

.mo-hero__count {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .85);
}

.mo-hero__count strong {
	font-size: 20px;
	font-weight: 500;
}

.mo-hero__dash {
	width: 30px;
	height: 1px;
	background: rgba(255, 255, 255, .5);
}

.mo-hero__nav {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .45);
	background: rgba(255, 255, 255, .08);
	color: var(--mo-white);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color var(--mo-dur) var(--mo-ease), border-color var(--mo-dur) var(--mo-ease);
}

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

/* ===========================================================================
 * 4) Sayfa başlığı bloğu
 * ======================================================================== */

.mo-phead {
	position: relative;
	padding: 150px 0 clamp(48px, 6vw, 88px);
	background: linear-gradient(135deg, var(--mo-ice) 0%, var(--mo-mist) 38%, var(--mo-soft) 72%, var(--mo-pink) 100%);
	overflow: hidden;
}

.mo-phead--image {
	color: var(--mo-white);
}

.mo-phead__bg {
	position: absolute;
	inset: 0;
}

.mo-phead__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Bannerlarda özne dikeyde ortada; üstten hizalamak sahneyi kesiyor. */
	object-position: center center;
}

/*
 * Banner kareleri 1920×457 — sayfa başlığından daha yassı. Kutuya bir alt
 * sınır verilir ki geniş ekranda görsel aşırı kırpılmasın, dar ekranda da
 * başlık sıkışmasın.
 */
.mo-phead--image {
	min-height: clamp(300px, 30vw, 440px);
	display: flex;
	align-items: flex-end;
	padding-top: 150px;
	padding-bottom: clamp(36px, 4vw, 60px);
}

/*
 * Bannerlar zaten koyu; perde yalnız metnin arkasını biraz daha
 * bastırmak için var, fotoğrafı renk olarak değiştirmez.
 */
.mo-phead--image::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(18, 6, 30, .72) 0%, rgba(18, 6, 30, .3) 52%, rgba(18, 6, 30, 0) 100%),
		linear-gradient(0deg, rgba(18, 6, 30, .5) 0%, rgba(18, 6, 30, 0) 60%);
}

.mo-phead__inner {
	position: relative;
	z-index: 1;
}

.mo-phead--image .mo-label,
.mo-phead--image .mo-h-display {
	color: var(--mo-white);
}

.mo-phead--image .mo-label {
	color: rgba(255, 255, 255, .75);
}

.mo-phead__intro {
	margin-top: 18px;
}

.mo-phead--image .mo-phead__intro {
	color: rgba(255, 255, 255, .85);
}

/* ===========================================================================
 * 5) Yeni Çıkan
 * ======================================================================== */

.mo-newrel__grid {
	display: grid;
	/* çocuklar daralabilsin */
	grid-template-columns: 1.05fr 1fr .85fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.mo-newrel__title {
	font-family: var(--mo-serif);
	font-size: clamp(34px, 3.6vw, 56px);
	font-weight: 400;
	line-height: 1;
	margin-bottom: .35em;
}

.mo-newrel__text {
	color: var(--mo-slate);
	max-width: 42ch;
}

.mo-newrel__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin: 26px 0 22px;
}

/* ---------------------------------------------------------------------------
 * Platform chip'leri
 *
 * Marka simgesi + ad, yuvarlak çerçeve içinde. Ayrı bir "Dinle" düğmesi
 * yok; dinleyici hangi platforma gideceğini kendisi seçiyor.
 * ------------------------------------------------------------------------ */

.mo-chips {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.mo-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px 9px 13px;
	border: 1px solid var(--mo-border);
	border-radius: 999px;
	background: var(--mo-white);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--mo-ink);
	white-space: nowrap;
	transition: border-color var(--mo-dur) var(--mo-ease),
	            color var(--mo-dur) var(--mo-ease),
	            background-color var(--mo-dur) var(--mo-ease);
}

.mo-chip:hover {
	border-color: var(--mo-accent);
	color: var(--mo-accent);
}

.mo-chip__ico {
	display: inline-flex;
	color: var(--mo-slate);
	transition: color var(--mo-dur) var(--mo-ease);
}

.mo-chip:hover .mo-chip__ico {
	color: var(--mo-accent);
}

/* Tek yayın sayfasında biraz daha iri. */
.mo-chips--lg .mo-chip {
	padding: 11px 19px 11px 15px;
	font-size: 13px;
}

.mo-newrel__tracks {
	border-left: 1px solid var(--mo-border);
	padding-left: clamp(20px, 3vw, 40px);
}

/* Parça listesi — ana sayfa, müzik sayfası ve tekil yayın ortak kullanır. */
.mo-tracks {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	counter-reset: none;
}

.mo-tracks__row {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid var(--mo-border);
	font-size: 14px;
}

.mo-tracks__row:last-child {
	border-bottom: 0;
}

.mo-tracks__no {
	font-size: 12px;
	font-weight: 600;
	color: var(--mo-slate);
	font-variant-numeric: tabular-nums;
}

.mo-tracks__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--mo-ink);
	font-weight: 500;
}

.mo-tracks__time {
	font-size: 12px;
	color: var(--mo-slate);
	font-variant-numeric: tabular-nums;
}

.mo-tracks__play {
	display: inline-flex;
}

.mo-tracks__all {
	margin-top: 4px;
}

/* ===========================================================================
 * 6) Konser kartları
 * ======================================================================== */

.mo-ccards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.mo-ccards--list {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* Ana sayfa: masaüstünde üç kart yeter, 4. ve 5. gizlenir. */
@media (min-width: 901px) {
	.mo-ccards--home > *:nth-child(n + 4) {
		display: none;
	}
}

.mo-ccard {
	display: grid;
	grid-template-columns: 130px 1fr;
	background: var(--mo-white);
	border: 1px solid var(--mo-border);
	overflow: hidden;
	transition: border-color var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease);
}

.mo-ccard:hover {
	border-color: var(--mo-soft);
	transform: translateY(-2px);
}

.mo-ccard.is-past {
	opacity: .68;
}

.mo-ccard__date {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 22px 10px;
	background: var(--mo-mist);
	color: var(--mo-ink);
	overflow: hidden;
}

/* Görsel varsa tarih onun üstünde okunur kalsın diye koyulaştırma konur. */
.mo-ccard__date.has-image {
	color: var(--mo-white);
}

/*
 * Dekoratif kare. Tarih beyaz yazıldığı için görsel kısılır ve üstüne
 * navy bir perde konur — kareler zaten koyu olduğundan bu ikisi birlikte
 * okunurluğu garantiler, fotoğraf da tamamen kaybolmaz.
 */
.mo-ccard__date img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .55;
	transition: opacity var(--mo-dur) var(--mo-ease);
}

.mo-ccard:hover .mo-ccard__date img {
	opacity: .75;
}

.mo-ccard__date.has-image {
	background: var(--mo-deep);
}

.mo-ccard__date.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18, 6, 30, .28) 0%, rgba(18, 6, 30, .62) 100%);
}

.mo-ccard__day,
.mo-ccard__month {
	position: relative;
	z-index: 1;
}

.mo-ccard__day {
	font-family: var(--mo-serif);
	font-size: 46px;
	font-weight: 400;
	line-height: 1;
}

.mo-ccard__month {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-top: 4px;
}

.mo-ccard__body {
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mo-ccard__city {
	font-family: var(--mo-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mo-ink);
}

.mo-ccard__venue {
	display: flex;
	align-items: baseline;
	gap: 7px;
	font-size: 14px;
	color: var(--mo-ink);
	margin: 0;
}

/* Tam tarih satırı — "27 Ağustos 2026". */
.mo-ccard__full {
	font-size: 12px;
	color: var(--mo-slate);
	margin: 2px 0 0;
	font-variant-numeric: tabular-nums;
}

.mo-ccard__time {
	margin-left: 8px;
	font-variant-numeric: tabular-nums;
}

.mo-ccard__foot {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
}

.mo-ccard__pin {
	color: var(--mo-accent);
	display: inline-flex;
	flex: none;
	/* Simge ilk satırın x-yüksekliğine hizalanır. */
	transform: translateY(2px);
}

.mo-ccard__soldout {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mo-slate);
	border: 1px solid var(--mo-border);
	border-radius: var(--mo-radius);
	padding: 8px 16px;
}

/* Geçmiş konser listesi. */
.mo-past {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mo-past__row {
	display: grid;
	grid-template-columns: 150px 200px 1fr;
	gap: 16px;
	padding: 15px 0;
	border-bottom: 1px solid var(--mo-border);
	font-size: 14px;
	color: var(--mo-slate);
}

.mo-past__date {
	font-weight: 600;
	color: var(--mo-ink);
	font-variant-numeric: tabular-nums;
}

.mo-past__city {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 12px;
	font-weight: 600;
}

.mo-conc__h {
	margin-bottom: clamp(24px, 3vw, 40px);
}

/* ===========================================================================
 * 7) Video kartları
 * ======================================================================== */

.mo-vgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.mo-vcard .mo-frame {
	background: var(--mo-deep);
}

.mo-vcard__meta {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 18px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--mo-white);
	text-shadow: 0 1px 12px rgba(18, 6, 30, .5);
}

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

.mo-vcard__sub {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .85;
}

/* ===========================================================================
 * 8) Yayın kartları (diskografi)
 * ======================================================================== */

.mo-rgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 2.4vw, 34px);
}

.mo-rcard__cover {
	display: block;
}

.mo-rcard__body {
	padding-top: 14px;
}

.mo-rcard__title {
	font-family: var(--mo-serif);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.15;
	/* Bölünemeyen uzun bir ad kartı taşırmasın. */
	overflow-wrap: anywhere;
}

.mo-rcard__meta {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mo-slate);
	margin: 6px 0 0;
}

.mo-rcard__player {
	margin-top: 12px;
	min-width: 0;
	overflow: hidden;
}

/* Süzgeç düğmeleri. */
.mo-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: clamp(26px, 3vw, 44px);
}

.mo-filters__btn {
	border: 1px solid var(--mo-border);
	background: transparent;
	border-radius: var(--mo-radius);
	padding: 9px 20px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mo-slate);
	cursor: pointer;
	transition: all var(--mo-dur) var(--mo-ease);
}

.mo-filters__btn:hover {
	border-color: var(--mo-accent);
	color: var(--mo-accent);
}

.mo-filters__btn.is-active {
	background: var(--mo-deep);
	border-color: var(--mo-ink);
	color: var(--mo-white);
}

/* Öne çıkan yayın bloğu. */
.mo-feat__grid {
	display: grid;
	/* çocuklar daralabilsin */
	grid-template-columns: minmax(0, 420px) 1fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}

.mo-feat__title {
	font-family: var(--mo-serif);
	font-size: clamp(32px, 3.4vw, 54px);
	font-weight: 400;
	line-height: 1;
	margin-bottom: .3em;
}

.mo-feat__meta {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mo-slate);
	margin-bottom: 20px;
}

.mo-feat__tracks {
	margin-top: 26px;
	border-top: 1px solid var(--mo-border);
	padding-top: 6px;
}

/* ===========================================================================
 * 9) Galeri
 * ======================================================================== */

.mo-gal-home__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 26px;
}

.mo-gal-home__side {
	display: flex;
	align-items: center;
	gap: 22px;
	flex: none;
}

.mo-gal-home__nav {
	display: flex;
	gap: 10px;
}

.mo-rail__btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--mo-border);
	background: var(--mo-white);
	color: var(--mo-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all var(--mo-dur) var(--mo-ease);
}

.mo-rail__btn:hover {
	background: var(--mo-deep);
	border-color: var(--mo-ink);
	color: var(--mo-white);
}

.mo-rail {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding: 0 var(--mo-gutter) 8px;
	scrollbar-width: none;
}

.mo-rail::-webkit-scrollbar {
	display: none;
}

/*
 * Kareler tek yükseklikte durur, genişlik kendi oranından gelir. Dikey ve
 * yatay fotoğraflar birlikte dizildiğinde tırtıklı bir şerit yerine düz
 * bir bant oluşur ve hiçbir kare kırpılmaz.
 */
.mo-rail__item {
	flex: 0 0 auto;
	height: clamp(240px, 26vw, 340px);
	scroll-snap-align: start;
	overflow: hidden;
	background: var(--mo-mist);
}

.mo-rail__item img {
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: cover;
	transition: transform .8s var(--mo-ease);
}

.mo-rail__item:hover img {
	transform: scale(1.04);
}

.mo-ggrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(12px, 1.6vw, 22px);
}

.mo-ggrid__item {
	margin: 0;
}

.mo-ggrid__item .mo-frame {
	aspect-ratio: 3 / 4;
}

.mo-ggrid__item.is-wide {
	grid-column: span 2;
}

.mo-ggrid__item.is-wide .mo-frame {
	aspect-ratio: 3 / 2;
}

/* ===========================================================================
 * 10) Haber kartları
 * ======================================================================== */

.mo-news-home__grid {
	display: grid;
	/* çocuklar daralabilsin */
	grid-template-columns: minmax(0, 300px) 1fr;
	gap: clamp(28px, 4vw, 60px);
	align-items: start;
}

/* Ana sayfadaki haber başlığı dar sütunda duruyor; bölüm başlığı
   ölçüsünde bırakmak kartların üstüne taşıyordu. */
.mo-news-home__head .mo-h-section {
	font-size: clamp(26px, 2.8vw, 40px);
	line-height: 1.05;
}

.mo-news-home__head .mo-arrow {
	margin-top: 20px;
}

/* Kartlar kendi yüksekliğinde dursun, en uzunun boyuna uzamasın. */
.mo-news-home__list {
	align-items: start;
}

.mo-news-home__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.mo-ngrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.4vw, 34px);
}

.mo-ncard__link {
	display: block;
	height: 100%;
	background: var(--mo-white);
	border: 1px solid var(--mo-border);
	transition: border-color var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease);
}

.mo-ncard__link:hover {
	border-color: var(--mo-soft);
	transform: translateY(-2px);
}

.mo-ncard__body {
	padding: 18px 20px 22px;
}

.mo-ncard__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mo-slate);
	margin-bottom: 10px;
}

.mo-ncard__source {
	color: var(--mo-accent);
}

.mo-ncard__title {
	font-family: var(--mo-serif);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.mo-ncard__excerpt {
	font-size: 14px;
	color: var(--mo-slate);
	margin: 10px 0 0;
}

.mo-ncard__more {
	margin-top: 16px;
}

/* Ana sayfadaki dar kart: görsel solda, metin sağda. */
.mo-ncard--compact .mo-ncard__link {
	display: grid;
	grid-template-columns: 108px 1fr;
	align-items: stretch;
}

.mo-ncard--compact .mo-ncard__media {
	height: 100%;
}

.mo-ncard--compact .mo-ncard__media img {
	height: 100%;
}

.mo-ncard--compact .mo-ncard__body {
	padding: 16px 18px;
}

.mo-ncard--compact .mo-ncard__title {
	font-size: 18px;
}

/* ===========================================================================
 * 11) Hakkında, menajerlik, iletişim
 * ======================================================================== */

/*
 * Varsayılan: tek sütun, okunaklı satır uzunluğunda. İki sütunlu düzen
 * yalnız portre görseli girildiğinde devreye girer (`--split`); yoksa
 * metin dar sütuna sıkışıp sağ taraf boş kalıyordu.
 */
.mo-about {
	display: block;
}

.mo-about--split {
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 70px);
	align-items: start;
}

.mo-about__pdf {
	margin-top: 26px;
}

.mo-mgmt {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 22px;
	margin-bottom: 40px;
}

.mo-mgmt__card {
	border: 1px solid var(--mo-border);
	padding: 26px 24px;
}

.mo-mgmt__name {
	font-family: var(--mo-serif);
	font-size: 24px;
	color: var(--mo-ink);
	margin-bottom: .3em;
}

.mo-contact {
	display: grid;
	/* çocuklar daralabilsin */
	grid-template-columns: minmax(0, 320px) 1fr;
	gap: clamp(28px, 4vw, 70px);
	align-items: start;
}

.mo-contact__block {
	margin-bottom: 28px;
}

.mo-contact__social {
	display: flex;
	gap: 16px;
	color: var(--mo-ink);
}

.mo-contact__social a:hover {
	color: var(--mo-accent);
}

.mo-field {
	margin-bottom: 18px;
}

.mo-field label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mo-slate);
	margin-bottom: 7px;
}

.mo-field input,
.mo-field textarea {
	width: 100%;
	font: inherit;
	font-size: 15px;
	color: var(--mo-ink);
	background: var(--mo-white);
	border: 1px solid var(--mo-border);
	border-radius: 3px;
	padding: 13px 15px;
	transition: border-color var(--mo-dur) var(--mo-ease);
}

.mo-field input:focus,
.mo-field textarea:focus {
	border-color: var(--mo-accent);
	outline: none;
}

.mo-field textarea {
	resize: vertical;
}

/* Bal küpü — ekranda görünmez ama ekran okuyucudan da gizlenmiş sayılmaz. */
.mo-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mo-note {
	padding: 13px 18px;
	border-radius: 3px;
	font-size: 14px;
	margin-bottom: 22px;
}

.mo-note--ok {
	background: rgba(114, 47, 153, .1);
	color: var(--mo-ink);
	border: 1px solid rgba(114, 47, 153, .3);
}

.mo-note--err {
	background: rgba(232, 181, 201, .22);
	color: #8a2846;
	border: 1px solid rgba(232, 181, 201, .6);
}

/* Serbest metin blokları. */
.mo-prose {
	max-width: 74ch;
}

.mo-prose h2 {
	font-size: clamp(28px, 3vw, 44px);
	margin: 1.4em 0 .5em;
}

.mo-prose h3 {
	font-size: clamp(22px, 2.2vw, 30px);
	margin: 1.3em 0 .4em;
}

.mo-prose a {
	color: var(--mo-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mo-prose img {
	margin: 1.6em 0;
}

.mo-404 {
	padding-top: 200px;
}

/* ===========================================================================
 * 12) Bülten bandı ve alt bilgi
 * ======================================================================== */

.mo-news-band {
	background: var(--mo-deep);
	color: var(--mo-white);
	padding: clamp(40px, 5vw, 62px) 0;
}

.mo-news-band__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.mo-news-band__title {
	font-family: var(--mo-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mo-white);
	margin-bottom: 8px;
}

.mo-news-band__sub {
	font-size: 14px;
	color: var(--mo-soft);
	max-width: 46ch;
	margin: 0;
}

.mo-news-band__form {
	display: flex;
	flex-direction: column;
	gap: 10px;          /* iki rıza satırı arası */
	flex: 1 1 420px;
	max-width: 580px;
}

.mo-news-band__row {
	display: flex;
	align-items: center;
	gap: 16px;          /* e-posta alanı ile düğme arası */
	margin-bottom: 10px;  /* giriş satırı ile rıza kutuları arası */
}

/* Düğme metni sıkışmasın; alan daralınca önce giriş kutusu daralır. */
.mo-news-band__row .mo-btn {
	flex: none;
	white-space: nowrap;
}

/* Açık rıza kutusu — onaysız kayıt oluşturulmaz. */
.mo-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: 54ch;
	font-size: 12px;
	line-height: 1.6;
	color: var(--mo-soft);
	cursor: pointer;
}

.mo-consent input {
	margin: 3px 0 0;
	width: 15px;
	height: 15px;
	flex: none;
	accent-color: var(--mo-soft);
	cursor: pointer;
}

.mo-consent a {
	color: var(--mo-white);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mo-news-band__form input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	font: inherit;
	font-size: 14px;
	color: var(--mo-white);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: var(--mo-radius);
	padding: 13px 20px;
}

.mo-news-band__form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, .55);
}

.mo-news-band__form input[type="email"]:focus {
	border-color: var(--mo-white);
	outline: none;
}

.mo-news-band__msg {
	flex: 1 1 100%;
	font-size: 14px;
	margin: 0;
}

.mo-news-band__msg.is-ok {
	color: var(--mo-soft);
}

.mo-news-band__msg.is-err {
	color: var(--mo-pink);
}

.mo-footer {
	background: var(--mo-deep);
	color: var(--mo-white);
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: clamp(36px, 4vw, 54px) 0;
}

.mo-footer__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 28px;
}

.mo-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mo-footer__name {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mo-soft);
}

.mo-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.mo-footer__nav a {
	color: var(--mo-soft);
	transition: color var(--mo-dur) var(--mo-ease);
}

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

.mo-footer__social {
	display: flex;
	gap: 18px;
	color: var(--mo-soft);
}

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

.mo-footer__legal {
	grid-column: 1 / -1;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-top: 22px;
	margin: 8px 0 0;
	font-size: 12px;
	color: rgba(255, 255, 255, .6);
}

/* ===========================================================================
 * 13) Duyarlı davranış
 *
 * Mobil, masaüstünün küçültülmüşü değil: hero tipografisi küçülür, portre
 * baskınlaşır, menü hamburgere iner, konser kartları yatay kayar.
 * ======================================================================== */

@media (max-width: 1180px) {
	.mo-nav {
		display: none;
	}

	.mo-newrel__grid {
		grid-template-columns: 1fr 1fr;
	}

	.mo-newrel__tracks {
		grid-column: 1 / -1;
		border-left: 0;
		border-top: 1px solid var(--mo-border);
		padding-left: 0;
		padding-top: 22px;
	}

	.mo-rgrid {
		grid-template-columns: repeat(3, 1fr);
	}

	.mo-ggrid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1181px) {
	/* Geniş ekranda hamburger yalnız tam menü kısayoludur. */
	.mo-burger {
		opacity: .8;
	}
}

@media (max-width: 900px) {
	/*
	 * Mobil kareler 9:16 çekilmiş; hero neredeyse tam ekran olunca kare
	 * kırpılmadan oturuyor ve alttaki beyaz bölüm ekranın dışında kalıyor.
	 *
	 * `svh` tarayıcı çubuğu gizlenip görününce yüksekliğin zıplamasını
	 * önler; desteklemeyen tarayıcılar üstteki `vh` değerinde kalır.
	 */
	.mo-hero {
		min-height: min(94vh, 900px);
		min-height: min(100svh, 900px);
	}

	.mo-hero__inner {
		flex-direction: column;
		align-items: flex-start;
		padding-top: 130px;
		padding-bottom: 26px;
	}

	.mo-hero__controls {
		align-self: flex-end;
	}

	.mo-newrel__grid,
	.mo-feat__grid,
	.mo-about--split,
	.mo-contact,
	.mo-news-home__grid {
		grid-template-columns: 1fr;
	}

	.mo-feat__cover,
	.mo-about__portrait {
		max-width: 380px;
	}

	.mo-vgrid,
	.mo-ngrid,
	.mo-news-home__list {
		grid-template-columns: 1fr;
	}

	.mo-rgrid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mo-ggrid {
		grid-template-columns: repeat(2, 1fr);
	}

	/*
	 * Mobilde konserler yan yana kaydırılmaz, alt alta liste olur:
	 * yatay şeritte kaç konser olduğu görünmüyordu ve kaydırmayı
	 * fark etmeyen ziyaretçi yalnız ilk kartı görüyordu.
	 */
	.mo-ccards {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.mo-ccard {
		width: auto;
	}

	/* Listede tarih kutusu daralır, ad ve mekâna daha çok yer kalır. */
	.mo-ccard {
		grid-template-columns: 96px 1fr;
	}

	.mo-ccard__day {
		font-size: 34px;
	}

	.mo-ccard__body {
		padding: 14px 16px;
	}

	.mo-past__row {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.mo-footer__inner {
		grid-template-columns: 1fr;
		justify-items: start;
	}

	.mo-news-band__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.mo-news-band__form {
		max-width: none;
	}
}

@media (max-width: 560px) {
	.mo-hero__title {
		font-size: clamp(50px, 16vw, 80px);
		line-height: 1.04;
	}

	.mo-hero__cta .mo-btn {
		flex: 1 1 100%;
	}

	.mo-rgrid,
	.mo-ggrid {
		grid-template-columns: 1fr 1fr;
	}

	.mo-ggrid__item.is-wide {
		grid-column: span 2;
	}

	.mo-news-band__row {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.mo-tracks__row {
		grid-template-columns: 26px 1fr auto;
	}

	.mo-tracks__play {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}

	.mo-tracks__time {
		display: none;
	}
}

/* ===========================================================================
 * 14) Tek yayın sayfası
 *
 * Düzen serkancagri.com'daki albüm bloğundan uyarlandı; renkler bu sitenin
 * açık paletine çevrildi.
 * ======================================================================== */

.mo-rel {
	position: relative;
	padding: clamp(120px, 13vw, 190px) 0 clamp(56px, 7vw, 96px);
	overflow: hidden;
}

/* Hafif atmosferik zemin — tasarım sistemindeki gradient, çok düşük yoğunlukta. */
.mo-rel__glow {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--mo-ice) 0%, var(--mo-mist) 38%, var(--mo-soft) 74%, var(--mo-pink) 100%);
	opacity: .5;
}

.mo-rel__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 78px);
	align-items: start;
}

/* Çocuklar daralabilsin; yoksa uzun parça adı satırı yana taşırıyor. */
.mo-rel__grid > * {
	min-width: 0;
}

.mo-rel__cover {
	position: relative;
}

.mo-rel__art {
	position: relative;
	aspect-ratio: 1;
	background: var(--mo-white);
	box-shadow: 0 26px 70px rgba(44, 18, 66, .26);
}

.mo-rel__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mo-rel__badge {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 13px;
	border: 1px solid var(--mo-accent);
	border-radius: 2px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mo-accent);
}

.mo-rel__title {
	font-family: var(--mo-serif);
	font-size: clamp(38px, 4.6vw, 68px);
	font-weight: 400;
	line-height: 1.02;
	margin: 18px 0 0;
	color: var(--mo-ink);
}

.mo-rel__artist {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mo-slate);
	margin: 12px 0 0;
}

.mo-rel__desc {
	max-width: 58ch;
	color: var(--mo-slate);
	margin: 20px 0 0;
}

/* Üç ölçü sütunu, aralarında ince ayraç. */
.mo-rel__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 28px 0 0;
}

.mo-rel__facts > div {
	padding-right: 30px;
	margin-right: 30px;
	border-right: 1px solid var(--mo-border);
}

.mo-rel__facts > div:last-child {
	border-right: 0;
	margin-right: 0;
	padding-right: 0;
}

.mo-rel__facts dt {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mo-slate);
}

.mo-rel__facts dd {
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--mo-ink);
}

.mo-rel__actions {
	margin-top: 8px;
}

/* Parça listesi. */
.mo-rel__tracks {
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
	border-top: 1px solid var(--mo-border);
}

.mo-rel__track {
	display: grid;
	grid-template-columns: 26px 32px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 13px 4px;
	border-bottom: 1px solid var(--mo-border);
	transition: background-color var(--mo-dur) var(--mo-ease);
}

.mo-rel__track:hover {
	background: rgba(255, 255, 255, .55);
}

.mo-rel__no {
	font-family: var(--mo-serif);
	font-size: 17px;
	color: var(--mo-slate);
	font-variant-numeric: tabular-nums;
}

.mo-rel__play {
	display: inline-flex;
	justify-content: center;
}

.mo-rel__name {
	min-width: 0;
	font-size: 15px;
	color: var(--mo-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mo-rel__len {
	font-size: 13px;
	color: var(--mo-slate);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
	.mo-rel__grid {
		grid-template-columns: 1fr;
	}

	.mo-rel__cover {
		max-width: 340px;
	}

	.mo-rel__facts > div {
		padding-right: 20px;
		margin-right: 20px;
	}
}

@media (max-width: 560px) {
	.mo-rel__facts {
		gap: 16px 0;
	}

	.mo-rel__facts > div {
		border-right: 0;
		margin-right: 0;
		padding-right: 24px;
	}

	.mo-rel__track {
		grid-template-columns: 22px 30px 1fr auto;
		gap: 10px;
	}
}

/* ---------------------------------------------------------------------------
 * Basın kupürü kartı
 *
 * Kupür gazete sayfasından kesilir; dikey ve her seferinde farklı orandadır.
 * Kart oranına kırpmak başlığı yok ediyor, bu yüzden görsel bütün hâlde,
 * yumuşak bir zemin üstünde gösterilir.
 * ------------------------------------------------------------------------ */

/*
 * Kupür kartında yazı yok, yalnız görsel var. Kupür gazete sayfasından
 * kesildiği için her biri farklı orandadır; hepsi aynı yükseklikte,
 * kırpılmadan, yumuşak bir zemin üstünde durur.
 */
.mo-ncard--clip .mo-ncard__link {
	display: block;
	padding: 0;
}

.mo-ncard--clip .mo-ncard__media {
	aspect-ratio: 3 / 4;
	background: var(--mo-mist);
	padding: 16px;
}

.mo-ncard--clip .mo-ncard__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Kupürde büyütme hoş durmuyor; onun yerine zemin hafifçe açılır. */
.mo-ncard--clip:hover .mo-ncard__media img {
	transform: none;
}

.mo-ncard--clip:hover .mo-ncard__media {
	background: var(--mo-white);
}

/* Ana sayfadaki dar kupür kartı biraz daha yassı. */
.mo-ncard--clip.mo-ncard--compact .mo-ncard__media {
	aspect-ratio: 4 / 5;
	padding: 12px;
}

/* ===========================================================================
 * 15) Ödüller
 *
 * Tablo yerine yıl yıl gruplanmış liste: tablo mobilde yatay kaydırma
 * gerektiriyordu, liste her genişlikte okunuyor.
 * ======================================================================== */

.mo-awsum {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-bottom: clamp(36px, 5vw, 64px);
}

.mo-awsum__item {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding-right: 40px;
	margin-right: 40px;
	border-right: 1px solid var(--mo-border);
}

.mo-awsum__item:last-child {
	border-right: 0;
	margin-right: 0;
	padding-right: 0;
}

.mo-awsum__no {
	font-family: var(--mo-serif);
	font-size: clamp(44px, 6vw, 76px);
	line-height: 1;
	color: var(--mo-accent);
}

.mo-awsum__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mo-slate);
}

.mo-awards {
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 4vw, 46px);
}

.mo-awyear {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: clamp(16px, 3vw, 40px);
	align-items: start;
}

.mo-awyear__no {
	font-family: var(--mo-serif);
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1;
	color: var(--mo-ink);
	font-variant-numeric: tabular-nums;
	position: sticky;
	top: 100px;
}

.mo-awlist {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--mo-border);
}

.mo-awrow {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 8px 18px;
	padding: 16px 0;
	border-bottom: 1px solid var(--mo-border);
}

/* Satır başındaki ödül işareti — hepsi kazanılmış ödül. */
.mo-awrow__mark {
	display: inline-flex;
	color: var(--mo-accent);
	transform: translateY(2px);
}

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

.mo-awrow__category {
	font-size: 15px;
	color: var(--mo-ink);
}

.mo-awrow__ceremony {
	font-size: 13px;
	color: var(--mo-slate);
}

.mo-awrow__work {
	font-family: var(--mo-serif);
	font-size: 17px;
	color: var(--mo-accent);
	text-align: right;
}

.mo-awnote {
	margin-top: clamp(28px, 4vw, 44px);
	padding-top: 20px;
	border-top: 1px solid var(--mo-border);
	font-size: 13px;
	color: var(--mo-slate);
	max-width: 70ch;
}

.mo-awbody {
	margin-top: clamp(28px, 4vw, 44px);
}

@media (max-width: 760px) {
	.mo-awyear {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.mo-awyear__no {
		position: static;
	}

	/* Dar ekranda işaret ve metin yan yana, eser adı alt satırda. */
	.mo-awrow {
		grid-template-columns: 24px minmax(0, 1fr);
		gap: 4px 14px;
	}

	.mo-awrow__work {
		grid-column: 2;
	}

	.mo-awrow__work {
		text-align: left;
		font-size: 15px;
	}
}

/* Galeri albümü — başlık satırındaki fotoğraf sayısı */

.mo-album__count {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mo-slate);
	white-space: nowrap;
}

/* Izgaradaki fotoğraflar artık bağlantı. */
a.mo-ggrid__item {
	display: block;
}

/* ===========================================================================
 * 16) Galeri albüm kartları
 * ======================================================================== */

/*
 * Albüm kartları sabit ve ölçülü genişlikte durur. `1fr` verilince tek
 * albümde kart sütun genişliğine yayılıp gereğinden iri görünüyordu.
 */
.mo-albums {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 232px));
	justify-content: start;
	gap: clamp(20px, 2.6vw, 34px);
}

.mo-albumcard__cover {
	display: block;
}

.mo-albumcard__body {
	padding-top: 14px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
}

.mo-albumcard__name {
	font-family: var(--mo-serif);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--mo-ink);
	overflow-wrap: anywhere;
}

/* Fotoğraf sayısı — ince çerçeveli küçük bir etiket. */
.mo-albumcard__count {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 4px 11px;
	border: 1px solid var(--mo-border);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mo-slate);
	font-variant-numeric: tabular-nums;
	transition: border-color var(--mo-dur) var(--mo-ease), color var(--mo-dur) var(--mo-ease);
}

.mo-albumcard:hover .mo-albumcard__count {
	border-color: var(--mo-accent);
	color: var(--mo-accent);
}

/* Yalnız lightbox gezinmesi için duran bağlantılar. */
.mo-albumcard__rest {
	display: none;
}

/* Alt bilgideki yapımcı bağlantısı. */
.mo-footer__credit a {
	color: var(--mo-soft);
	transition: color var(--mo-dur) var(--mo-ease);
}

.mo-footer__credit a:hover {
	color: var(--mo-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}