/*
 * Mavi Derinlik – ana sayfa stilleri (default.php)
 *
 * Yazım: native CSS nesting.
 *
 * İçindekiler:
 *   1. Videolu giriş (hero)
 *   2. Kaydırmalı video (scroll-story)
 *   3. Bölüm aralıkları
 *   4. Dalgıçlar ve zıpkıncılar
 */

/* 1. Videolu giriş ---------------------------------------------------- */

.hero {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(80% 60% at 70% 20%, rgba(19, 90, 148, 0.65), transparent 70%),
		linear-gradient(180deg, var(--color-deep) 0%, var(--color-abyss) 100%);
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.hero__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Metin okunabilirliği için koyu katman: üstte header, altta metin için daha yoğun. */
.hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(3, 10, 22, 0.7) 0%, rgba(3, 10, 22, 0.15) 28%, rgba(3, 10, 22, 0.35) 60%, rgba(3, 10, 22, 0.92) 100%),
		linear-gradient(90deg, rgba(3, 10, 22, 0.55) 0%, transparent 70%);
}

.hero__content {
	align-self: end;
	width: min(100% - (var(--container-gutter) * 2), var(--container-width));
	margin-inline: auto;
	padding-top: calc(var(--header-height) + var(--space-xl));
	padding-bottom: var(--space-lg);
}

.hero__eyebrow {
	margin-bottom: var(--space-md);
	color: var(--color-turquoise);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.hero__title {
	max-width: 12ch;
	font-size: var(--text-3xl);
	font-weight: 300;
	line-height: 0.98;
	letter-spacing: -0.025em;
}

.hero__description {
	max-width: 44ch;
	margin-top: var(--space-md);
	color: rgba(242, 238, 229, 0.88);
	font-size: var(--text-lg);
	line-height: 1.55;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

.hero__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	width: min(100% - (var(--container-gutter) * 2), var(--container-width));
	margin-inline: auto;
	padding-bottom: var(--space-md);
}

.hero__scroll-cue {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.5rem;
	color: var(--color-foam-muted);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-decoration: none;
	text-transform: uppercase;

	&:hover {
		color: var(--color-foam);
	}
}

.hero__scroll-line {
	position: relative;
	width: 1px;
	height: 40px;
	overflow: hidden;
	background-color: var(--color-line);

	&::after {
		content: "";
		position: absolute;
		left: 0;
		top: -40%;
		width: 100%;
		height: 40%;
		background-color: var(--color-turquoise);
		animation: hero-scroll-line 2.4s var(--ease-out) infinite;
	}
}

@keyframes hero-scroll-line {
	0% {
		top: -40%;
	}

	100% {
		top: 100%;
	}
}

.hero .admin-hint {
	position: absolute;
	top: calc(var(--header-height) + 1rem);
	left: 50%;
	transform: translateX(-50%);
}

@media (max-width: 699px) {
	.hero__title {
		max-width: none;
	}

	.hero__actions .button {
		flex: 1 1 100%;
	}
}

/* 2. Kaydırmalı video ------------------------------------------------- */

/*
 * Varsayılan (JS yok, mobil, hareket azaltma): hafif statik düzen.
 * Görsel üstte, keşif metinleri altında kartlar halinde.
 */
.scroll-story {
	position: relative;
	background-color: var(--color-abyss);
}

.scroll-story__sticky {
	position: relative;
	display: grid;
	min-height: 70vh;
	overflow: hidden;
	isolation: isolate;
}

.scroll-story__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(70% 60% at 30% 70%, rgba(70, 211, 200, 0.18), transparent 70%),
		linear-gradient(180deg, var(--color-abyss), var(--color-deep));
}

.scroll-story__poster,
.scroll-story__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.scroll-story__video {
	opacity: 0;
	transition: opacity 600ms ease;

	&.is-ready {
		opacity: 1;
	}
}

.scroll-story__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(3, 10, 22, 0.85) 0%, rgba(3, 10, 22, 0.2) 40%, rgba(3, 10, 22, 0.75) 100%);
}

.scroll-story__heading {
	align-self: start;
	width: min(100% - (var(--container-gutter) * 2), var(--container-width));
	margin-inline: auto;
	padding-top: var(--space-xl);
}

.scroll-story__title {
	max-width: 16ch;
	font-size: var(--text-2xl);
	font-weight: 300;
}

.scroll-story__progress {
	display: none;
}

.scroll-story__steps {
	display: grid;
	gap: var(--space-md);
	width: min(100% - (var(--container-gutter) * 2), var(--container-width));
	margin-inline: auto;
	padding-block: var(--space-lg) var(--space-xl);
	list-style: none;
	counter-reset: none;

	@media (min-width: 700px) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.scroll-story__step-card {
	padding: var(--space-md);
	border: 1px solid var(--color-line);
	border-left: 2px solid var(--color-turquoise);
	border-radius: var(--radius-sm);
	background-color: rgba(6, 26, 51, 0.7);
}

.scroll-story__step-number {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--color-turquoise);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.18em;
}

.scroll-story__step-title {
	font-size: var(--text-xl);
}

.scroll-story__step-text {
	margin-top: 0.5rem;
	color: var(--color-foam-muted);
}

/*
 * Gelişmiş mod: JS, masaüstü/tablet ve hareket tercihi uygunsa .is-enhanced ekler.
 * Video alanı ekranda sabit kalır, metinler sırayla görünür. Sayfa doğal
 * kaydırmayla ilerler; kaydırma yakalanmaz veya kilitlenmez.
 */
.scroll-story.is-enhanced {
	.scroll-story__sticky {
		position: sticky;
		top: 0;
		height: 100vh;
		height: 100svh;
		min-height: 0;
	}

	.scroll-story__progress {
		position: absolute;
		left: var(--container-gutter);
		right: var(--container-gutter);
		bottom: var(--space-lg);
		display: block;
		height: 2px;
		background-color: var(--color-line);
	}

	.scroll-story__progress-bar {
		display: block;
		width: 100%;
		height: 100%;
		background-color: var(--color-turquoise);
		transform: scaleX(0);
		transform-origin: left center;
	}

	.scroll-story__steps {
		position: relative;
		z-index: 1;
		display: block;
		width: 100%;
		margin-top: -100vh;
		margin-top: -100svh;
		padding: 0;
	}

	.scroll-story__step {
		display: flex;
		align-items: center;
		min-height: 100vh;
		min-height: 100svh;
		width: min(100% - (var(--container-gutter) * 2), var(--container-width));
		margin-inline: auto;

		&:first-child {
			padding-top: 30vh;
		}

		&:last-child {
			align-items: flex-start;
			padding-top: 20vh;
		}
	}

	.scroll-story__step-card {
		max-width: 420px;
		margin-left: auto;
		padding: var(--space-lg);
		background-color: rgba(3, 10, 22, 0.55);
		backdrop-filter: blur(10px);
		opacity: 0.15;
		transform: translateY(32px);
		transition:
			opacity 700ms var(--ease-out),
			transform 700ms var(--ease-out);
	}

	.scroll-story__step.is-active .scroll-story__step-card {
		opacity: 1;
		transform: none;
	}

	.admin-hint {
		position: relative;
		z-index: 2;
	}
}

/* 3. Bölüm aralıkları ------------------------------------------------- */

.home-section {
	width: min(100% - (var(--container-gutter) * 2), var(--container-width));
	margin-inline: auto;
	padding-top: var(--space-2xl);
}

.home-section--regions {
	.card-grid {
		@media (min-width: 1100px) {
			grid-template-columns: repeat(6, minmax(0, 1fr));
		}
	}

	/* Masaüstünde ilk iki kart geniş, kalanlar üçlü sıra: belgesel kolaj hissi. */
	.region-card {
		@media (min-width: 1100px) {
			grid-column: span 2;

			&:nth-child(1),
			&:nth-child(2) {
				grid-column: span 3;
			}

			&:nth-child(1) .region-card__media,
			&:nth-child(2) .region-card__media {
				aspect-ratio: 16 / 9;
			}
		}
	}
}

/* 4. Dalgıçlar ve zıpkıncılar ----------------------------------------- */

.guide-features {
	display: grid;
	gap: var(--space-xl);
	padding-top: var(--space-2xl);
}

.guide-feature {
	display: grid;
	align-items: center;
	gap: var(--space-lg);
	width: min(100% - (var(--container-gutter) * 2), var(--container-width));
	margin-inline: auto;

	@media (min-width: 1100px) {
		grid-template-columns: 7fr 5fr;
		gap: var(--space-xl);

		&.guide-feature--spear {
			grid-template-columns: 5fr 7fr;

			.guide-feature__media {
				order: 2;
			}
		}
	}
}

.guide-feature__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--color-deep);
	box-shadow: var(--shadow-card);

	@media (min-width: 700px) {
		aspect-ratio: 16 / 10;
	}

	.guide-feature__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.guide-feature__text {
	max-width: 48ch;
	margin-top: var(--space-sm);
	color: var(--color-foam-muted);
	font-size: var(--text-lg);
}

.guide-feature__list {
	display: grid;
	margin-block: var(--space-md);
	list-style: none;
	border-top: 1px solid var(--color-line);

	& a {
		display: block;
		padding: 0.875rem 0;
		border-bottom: 1px solid var(--color-line);
		color: var(--color-foam);
		font-weight: 600;
		text-decoration: none;

		&:hover {
			color: var(--color-turquoise);
		}
	}
}

.guide-feature__soon {
	margin-top: var(--space-md);
	color: var(--color-foam-muted);
	font-size: var(--text-sm);
	font-style: italic;
}

.guide-feature .button {
	margin-top: var(--space-sm);
}