/**
 * Anasayfa hero'su.
 * Ölçüler 1366px tabanlı tasarımdan alınmıştır.
 */

.tume-hero {
	position: relative;
	min-height: min(100svh);
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--c-koyu);
	color: var(--c-beyaz);
}

/* ---------- Medya katmanı ---------- */

.tume-hero__medya {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.tume-hero__slayt {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s ease;
}

.tume-hero__slayt.is-aktif {
	opacity: 1;
	visibility: visible;
}

.tume-hero__gorsel,
.tume-hero__slayt img,
.tume-hero__slayt video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* YouTube: iframe 16:9 olduğu için kabı büyütüp ortalıyoruz (letterbox olmasın). */
.tume-hero__yt {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	pointer-events: none;
}

.tume-hero__yt iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, 177.78vh);
	height: max(100%, 56.25vw);
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
	/*
	 * Oynatma gerçekten başlayana kadar iframe saklı kalır; böylece otomatik
	 * oynatma engellenirse siyah kutu değil, slaytın poster görseli görünür.
	 */
	opacity: 0;
	transition: opacity 0.4s ease;
}

.tume-hero__yt.is-oynuyor iframe {
	opacity: 1;
}

/* Oynatıcı üzerinde hiçbir YouTube arayüzü belirmesin diye şeffaf kalkan. */
.tume-hero__yt-kalkan {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: transparent;
}

/*
 * Slaytların üstüne döşenen ızgara dokusu (230x230 png, %25 opaklık).
 * Perdenin de üstünde durur; tasarımda çizgiler koyu yeşil alanda da görünüyor.
 * Metin katmanı ayrı stacking context'te olduğu için okunabilirlik etkilenmez.
 */
.tume-hero__izgara {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0.45;
	background-image: url("../img/grid/Slider_GRID.png");
	background-repeat: repeat;
	background-size: 230px 230px;
	background-position: top center;
}

/* Metnin okunabilirliği için soldan sağa açılan koyu yeşil perde. */
.tume-hero__perde {
	position: absolute;
	inset: 0;
	z-index: 2;
	mix-blend-mode: hard-light;
	background:
		linear-gradient(90deg, rgba(0, 74, 40, 0.96) 0%, rgba(0, 74, 40, 0.86) 18%, rgba(0, 74, 40, 0.55) 38%, rgba(0, 74, 40, 0.22) 60%, rgba(0, 74, 40, 0.14) 100%),
		linear-gradient(180deg, rgba(0, 74, 40, 0.78) 0%, rgba(0, 74, 40, 0) 26%);
}

/* ---------- İçerik ---------- */

.tume-hero__ic {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	width: 100%;
	/* Yatay kaydırılan başlık şeridi (nowrap çipler) kabı genişletmesin. */
	min-width: 0;
	padding-top: var(--header-h);
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* Aktif slaytın büyük başlığı — yalnızca mobilde görünür (şeridin üstünde). */
.tume-hero__aktif {
	display: none;
}

/* ---------- Sol: dikey başlık listesi (aynı zamanda pagination) ---------- */

.tume-hero__liste {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(0.75rem, 3vw, 3.15rem);
	padding-left: 1.75rem;
	max-width: 34rem;
}

/* Noktaları birleştiren dikey çizgi */
.tume-hero__liste::before {
	content: "";
	position: absolute;
	left: 0.32rem;
	top: -5%;
	height: 110%;
	width: 1px;
	background: linear-gradient(to top, #7DC80F00 0%, #7DC80Faa 20%, #7DC80Faa 80%, #7DC80F00 100%);
}

.tume-hero__dugme {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	text-align: left;
	color: var(--c-beyaz);
	transition: opacity var(--gecis), transform var(--gecis);
}

.tume-hero__nokta {
	position: absolute;
	left: 1px;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: var(--c-lime);
	transition: width var(--gecis), height var(--gecis), left var(--gecis), background var(--gecis);
}

.tume-hero__etiket {
	font-family: var(--f-baslik);
	font-weight: 600;
	line-height: 1.08;
	transition: font-size var(--gecis), opacity var(--gecis), font-weight var(--gecis);
}

/* Aktife uzaklığa göre kademelenme — tasarımdaki ölçüler */
.tume-hero__dugme[data-uzaklik="0"] .tume-hero__etiket {
	font-size: clamp(1.75rem, 3.4vw, 2.375rem);
	font-weight: 700;
	color: var(--c-beyaz);
	opacity: 1;
}

/* Pasif slaytların başlıkları temanın parlak yeşili */
.tume-hero__dugme[data-uzaklik="1"] .tume-hero__etiket {
	font-size: var(--wp--preset--font-size--md);
	color: var(--c-lime);
	opacity: 0.95;
}

.tume-hero__dugme[data-uzaklik="2"] .tume-hero__etiket {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--c-lime);
	opacity: 0.8;
}

.tume-hero__dugme[data-uzaklik="3"] .tume-hero__etiket {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--c-lime);
	opacity: 0.62;
}

.tume-hero__dugme:not([data-uzaklik="0"]):hover .tume-hero__etiket {
	opacity: 1;
	color: var(--c-beyaz);
}

/* Aktif slaytın noktası büyür ve beyaza döner */
.tume-hero__dugme[data-uzaklik="0"] .tume-hero__nokta {
	left: -0.22rem;
	width: 17px;
	height: 17px;
	border-radius: 4px;
	background: var(--c-beyaz);
}

/* ---------- Sağ: dikey kart slider'ı ---------- */

.tume-hero__kartlar {
	position: relative;
	flex: 0 0 auto;
	width: clamp(240px, 20vw, 272px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
}

.tume-hero__kart-ok {
	color: rgba(255, 255, 255, 0.9);
	padding: 0.25rem 0.75rem;
	transition: color var(--gecis), transform var(--gecis);
}

.tume-hero__kart-ok:hover {
	color: var(--c-lime);
	transform: scale(1.15);
}

.tume-hero__kart-yuva {
	position: relative;
	width: 100%;
	aspect-ratio: 243 / 233;
}

.tume-hero__kart {
	position: absolute;
	inset: 0;
	display: flex;
	overflow: hidden;
	background: var(--c-beyaz);
	color: var(--c-siyah);
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
}

.tume-hero__kart.is-aktif {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	z-index: 2;
}

/*
 * Kart destesi görünümü: bir önceki kart üstte, bir sonraki altta;
 * ikisi de soluk ve bulanık. Aktif kartın arkasında kalırlar.
 */
.tume-hero__kart.is-onceki,
.tume-hero__kart.is-sonraki {
	visibility: visible;
	opacity: 0.35;
	filter: blur(3px);
	z-index: 1;
	pointer-events: none;
}

.tume-hero__kart.is-onceki {
	transform: translateY(-100%);
}

.tume-hero__kart.is-sonraki {
	transform: translateY(100%);
}

/* Görsel kartın sağ yarısını kaplar; kişi fotoğrafı sağ kenara yaslanır. */
.tume-hero__kart-gorsel {
	position: absolute;
	inset: 0 0 0 35%;
	z-index: 0;
}

.tume-hero__kart-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 90% top;
}

/* Fotoğrafın sol kenarı beyaza eriyor: başlık hangi görselde olursa olsun okunur. */
.tume-hero__kart-gorsel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--c-beyaz) 0%, rgba(255, 255, 255, 0) 42%);
}

.tume-hero__kart-ic {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1rem 1.1rem 1.1rem;
	width: 100%;
}

.tume-hero__kart-baslik {
	margin: 0;
	max-width: 54%;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.02;
	color: var(--c-siyah);
	text-wrap: balance;
}

/*
 * Kart butonu: kare oranlı, köşe yarıçapı 7/18/7/7 ve header'daki giriş
 * butonunun soldan sağa şeffaflaşan beyaz gradient kenarı.
 */
.tume-hero__kart-buton {
	align-self: flex-start;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	width: clamp(74px, 32%, 100px);
	max-width: 52%;
	/* Yazı her zaman 0.5rem'lik iç boşluğun içinde kalır, taşarsa küçülür. */
	padding: 0.5rem;
	font-family: var(--f-baslik);
	font-size: clamp(0.75rem, 1.15vw, 1rem);
	font-weight: 700;
	line-height: 1.05;
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
	overflow-wrap: anywhere;
	hyphens: auto;
	color: var(--c-beyaz);
	border: 2px solid transparent;
	border-radius: 7px 18px 7px 7px;
	background:
		linear-gradient(var(--c-lime), var(--c-lime)) padding-box,
		linear-gradient(90deg, #fff 0%, #cbe89a 45%, var(--c-lime) 100%) border-box;
	transition: filter var(--gecis);
}

.tume-hero__kart-buton:hover {
	filter: brightness(1.08);
	color: var(--c-beyaz);
}

/* Kartın sağ kenarındaki dikey noktalar */
.tume-hero__kart-noktalar {
	position: absolute;
	right: -0.9rem;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	z-index: 2;
}

.tume-hero__kart-noktalar button {
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--c-beyaz);
	opacity: 0.85;
	transition: background var(--gecis), transform var(--gecis);
}

.tume-hero__kart-noktalar button.is-aktif {
	background: var(--c-lime);
	transform: scale(1.2);
}

/* ---------- Duyarlı davranış ---------- */

@media (max-width: 1100px) {
	.tume-hero__ic {
		padding-top: calc(var(--header-h-mobil) + 1rem);
		align-items: flex-end;
	}

	.tume-hero__kartlar {
		width: clamp(200px, 32vw, 240px);
	}
}

/*
 * Mobil kurgu: dikey liste yerine yatay kaydırılan başlık şeridi.
 * Büyük başlık şeridin üstünde ayrı durur; JS her geçişte metnini günceller
 * ve aktif çipi şeritte ortalar.
 */
@media (max-width: 860px) {
	.tume-hero {
		min-height: 100svh;
		align-items: stretch; /* içerik kabı yüksekliği kaplasın, altta ölü boşluk kalmasın */
	}

	.tume-hero__ic {
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		gap: 1.25rem;
		padding-block: calc(var(--header-h-mobil) + 1.5rem) 0.2rem;
		padding-inline:0;
	}

	.tume-hero__perde {
		background: linear-gradient(180deg, rgba(16, 70, 34, 0.8) 0%, rgba(16, 70, 34, 0.3) 38%, rgba(16, 70, 34, 0.94) 100%);
	}
	.tume-hero__slayt{
		max-height:85svh;
	}

	/* Büyük aktif başlık */
	.tume-hero__aktif {
		display: none;
		width: 100%;
		margin: 0;
		font-family: var(--f-baslik);
		font-weight: 700;
		font-size: clamp(1.75rem, 8.5vw, 2.5rem);
		line-height: 1.04;
		color: var(--c-beyaz);
		text-wrap: balance;
	}

	/* Şerit */
	.tume-hero__liste {
		flex-direction: row;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		padding-left: 0;
		gap: 0.5rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-ms-overflow-style: none;
		/* Şeridin kenarlarında yumuşak kesim */
		mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
	}

	.tume-hero__liste::-webkit-scrollbar {
		display: none;
	}

	.tume-hero__liste::before {
		display: none; /* dikey çizgi mobilde yok */
	}

	.tume-hero__oge {
		flex: 0 0 auto;
		scroll-snap-align: center;
	}

	.tume-hero__nokta {
		display: none;
	}

	.tume-hero__dugme {
		gap: 0;
		padding: 0.45rem 0.85rem;
		border-radius: var(--r-pill);
		background: rgba(255, 255, 255, 0.14);
		border: 1px solid rgba(255, 255, 255, 0.18);
		white-space: nowrap;
	}

	/* Çipler eşit boyda: masaüstündeki kademelenme mobilde geçersiz. */
	.tume-hero__dugme[data-uzaklik="0"] .tume-hero__etiket,
	.tume-hero__dugme[data-uzaklik="1"] .tume-hero__etiket,
	.tume-hero__dugme[data-uzaklik="2"] .tume-hero__etiket,
	.tume-hero__dugme[data-uzaklik="3"] .tume-hero__etiket {
		font-family: var(--f-menu);
		font-size: var(--wp--preset--font-size--sm);
		font-weight: 600;
		opacity: 1;
		color: var(--c-beyaz);
	}

	.tume-hero__dugme[data-uzaklik="0"] {
		background: var(--c-lime);
		border-color: var(--c-lime);
	}

	.tume-hero__kartlar {
		width: 100%;
		max-width: 260px;
		margin-inline: auto;
		gap:0.2rem;
		flex-direction:row;
	}
	.tume-hero__kart-ok--asagi, .tume-hero__kart-ok--yukari{
		transform: rotate(-90deg);
		z-index:20;
	}
	.tume-hero__kart-ok--asagi:hover {
    		color: var(--c-lime);
		transform: rotate(-90deg) scale(1.15);
	}
	.tume-hero__kart-ok--yukari:hover {
    		color: var(--c-lime);
		transform: rotate(-90deg) scale(1.15);
	}
	.tume-hero__kart-noktalar{
		display:none;
		flex-direction:row;
		top: calc(100% + 5px);
		right:50%;
		transform: translateX(50%);
	}
	.tume-hero__kart-ic{
		gap:0.5rem;
		padding:0.6rem;
	}
	.tume-hero__kart.is-onceki, .tume-hero__kart.is-sonraki{
		opacity:0.9;
		filter:blur(4px) brightness(.4);
	}
	.tume-hero__kart.is-sonraki{
		transform: translateX(100%);
	}
	.tume-hero__kart.is-onceki{
		transform: translateX(-100%);
	}

	/* Mobilde kart daha geniş: başlık için ayrılan alanı da genişlet. */
	.tume-hero__kart-gorsel {
		inset: 0 0 0 50%;
	}

	.tume-hero__kart-baslik {
		max-width: 48%;
		line-height: 0.9;
	}

	.tume-hero__kart-buton {
		max-width: 46%;
	}
}

/* Sürükleme sırasında metin/görsel seçimi devre dışı */
.tume-hero.is-surukleniyor,
.tume-hero__kartlar.is-surukleniyor {
	user-select: none;
	cursor: grabbing;
}

.tume-hero__liste,
.tume-hero__kart-yuva {
	cursor: grab;
}