/*
 * Medya arşivi , bento + shorts tadında yaratıcı grid.
 * Farklı boyutlar, farklı aspect-ratio'lar, tipe göre rozet renkleri.
 */

/* =========================
   Arşiv başlığı
   ========================= */

.media-archive__header {
	text-align: center;
	margin-bottom: var(--space-10);
}

.media-archive__kicker {
	margin: 0 0 var(--space-4);
	font-size: var(--fs-tag);
	font-weight: var(--fw-700);
	letter-spacing: var(--track-micro);
	color: var(--color-brand);
	text-transform: uppercase;
}

/* =========================
   Bento grid
   ========================= */

/*
 * Bento , grid-auto-rows + row-span ile masonry benzeri doldurma.
 * lg kart 2x2 → yanındaki boşluğa 2 adet sm kart dikey sığar.
 */
.bento {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 240px;
	grid-auto-flow: dense;
	gap: var(--space-6);
}

@media (max-width: 900px) {
	.bento {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 220px;
		gap: var(--space-5);
	}
}

@media (max-width: 480px) {
	.bento {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		gap: var(--space-4);
	}

	.bento__item {
		min-height: 220px;
	}
}

/* =========================
   Boyutlar (row ve column span'leri kombin)
   ========================= */

.bento__item {
	aspect-ratio: auto;
	min-height: 0;
}

.bento__item--sm { grid-column: span 1; grid-row: span 1; }
.bento__item--md { grid-column: span 1; grid-row: span 1; }
.bento__item--lg { grid-column: span 2; grid-row: span 2; }

/* sm + portrait = dikey şerit (2 row) */
.bento__item--sm.bento__item--portrait { grid-row: span 2; }
.bento__item--sm.bento__item--tall     { grid-row: span 1; }

/* md + wide = yatay (2 col, 1 row) */
.bento__item--md.bento__item--wide { grid-column: span 2; grid-row: span 1; }

@media (max-width: 900px) {
	/* 2-col grid: lg hâlâ 2 col, md tek satır yatay */
	.bento__item--lg { grid-column: span 2; grid-row: span 2; }
	.bento__item--md.bento__item--wide { grid-column: span 2; }
}

@media (max-width: 480px) {
	/*
	 * Tek kolon: tüm span'leri sıfırla, aspect-ratio ile doğal yükseklik.
	 * Combined class selector'ları daha yüksek specificity'de olduğundan
	 * aynı specificity + sonralık ile override ederiz.
	 */
	.bento__item,
	.bento__item--sm,
	.bento__item--md,
	.bento__item--lg,
	.bento__item--sm.bento__item--portrait,
	.bento__item--sm.bento__item--tall,
	.bento__item--md.bento__item--wide,
	.bento__item--lg.bento__item--portrait,
	.bento__item--lg.bento__item--square,
	.bento__item--lg.bento__item--wide {
		grid-column: span 1 !important;
		grid-row: auto !important;
	}

	.bento__item--portrait { aspect-ratio: 9 / 11; }
	.bento__item--tall     { aspect-ratio: 4 / 5; }
	.bento__item--square   { aspect-ratio: 1 / 1; }
	.bento__item--wide     { aspect-ratio: 4 / 3; }
}

/* =========================
   Medya kartı (temel)
   ========================= */

.media-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-surface-soft);
	color: var(--color-text);
	text-decoration: none;
	box-shadow: var(--shadow-card);
	transition:
		transform var(--dur) var(--ease-out-brand),
		box-shadow var(--dur) var(--ease-out-brand);
	isolation: isolate;
}

.media-card:hover {
	transform: translateY(-3px) scale(1.01);
	box-shadow:
		rgba(0, 0, 0, 0.02) 0 0 0 1px,
		rgba(0, 0, 0, 0.08) 0 8px 18px,
		rgba(0, 0, 0, 0.15) 0 16px 32px;
	color: var(--color-text);
}

.media-card:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 3px;
}

/* =========================
   Thumbnail
   ========================= */

.media-card__thumb {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}

.media-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--dur-slow) var(--ease-out-brand);
}

.media-card:hover .media-card__thumb img {
	transform: scale(1.05);
}

.media-card__thumb--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--color-surface-soft), #e9e9e9);
	color: rgba(0, 0, 0, 0.3);
}

.media-card__thumb--empty svg {
	width: 36%;
	max-width: 100px;
	height: auto;
}

.media-card__thumb--branded {
	display: flex;
	align-items: center;
	justify-content: center;
}

.media-card__source-logo {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.4rem, 3vw + 0.5rem, 2.8rem);
	letter-spacing: -0.03em;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
	padding: var(--space-5);
	word-break: break-word;
	hyphens: auto;
	position: relative;
	z-index: 1;
}

/* =========================
   Overlay + gradient + body
   ========================= */

.media-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 40%,
		rgba(0, 0, 0, 0.75) 100%
	);
	z-index: 1;
	pointer-events: none;
	transition: opacity var(--dur) var(--ease-out-brand);
}

.media-card__overlay {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	z-index: 2;
}

.media-card__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--space-5) var(--space-6) var(--space-6);
	color: #fff;
	z-index: 2;
}

.media-card__badges {
	margin: 0 0 var(--space-3);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.media-card__type-badge,
.media-card__source {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--radius-full);
	font-family: var(--font-sans);
	font-size: var(--fs-badge);
	font-weight: var(--fw-700);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.media-card__type-badge {
	background: #fff;
	color: var(--color-text);
}

.media-card__source {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.media-card__title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: clamp(1rem, 1.2vw + 0.6rem, 1.25rem);
	font-weight: var(--fw-600);
	line-height: 1.25;
	letter-spacing: var(--track-soft);
	color: #fff;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.media-card__date {
	display: block;
	margin-top: var(--space-3);
	font-size: var(--fs-small);
	color: rgba(255, 255, 255, 0.75);
	font-weight: var(--fw-500);
}

/* =========================
   Tipe göre vurgu rengi (üst rozet şerit)
   ========================= */

.media-card--article .media-card__type-badge { background: #222; color: #fff; }
.media-card--video   .media-card__type-badge { background: var(--color-brand); color: #fff; }
.media-card--podcast .media-card__type-badge { background: #6e3fe0; color: #fff; }
.media-card--tv      .media-card__type-badge { background: #f59e0b; color: #fff; }

/* =========================
   Video: play ikon overlay
   ========================= */

.media-card__play {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-circle);
	background: rgba(255, 255, 255, 0.95);
	color: var(--color-brand);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	transition: transform var(--dur) var(--ease-out-brand);
}

.media-card:hover .media-card__play {
	transform: scale(1.1);
}

/* =========================
   Podcast: dalga animasyonu
   ========================= */

.media-card__wave {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 26px;
	padding: 4px 8px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.95);
}

.media-card__wave span {
	display: block;
	width: 2px;
	background: #6e3fe0;
	border-radius: 2px;
	animation: media-wave 1.2s ease-in-out infinite;
}

.media-card__wave span:nth-child(1) { height: 40%; animation-delay: 0s; }
.media-card__wave span:nth-child(2) { height: 75%; animation-delay: 0.15s; }
.media-card__wave span:nth-child(3) { height: 55%; animation-delay: 0.3s; }
.media-card__wave span:nth-child(4) { height: 85%; animation-delay: 0.45s; }

@keyframes media-wave {
	0%, 100% { transform: scaleY(0.6); }
	50%      { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
	.media-card__wave span { animation: none; transform: none; }
	.media-card:hover { transform: none; }
	.media-card:hover .media-card__thumb img { transform: none; }
	.media-card:hover .media-card__play { transform: none; }
}