/**
 * TÜME — Temel stiller
 * Tasarım tokenları theme.json'dan gelir; burada kısa takma adlara bağlanır.
 * Ölçüler 1366px tabanlı tasarımdan çıkarılmış, %7 büyütülmüş ölçeğe göredir.
 */

:root {
	/* Renkler */
	--c-yesil: var(--wp--preset--color--yesil);
	--c-lime: var(--wp--preset--color--lime);
	--c-koyu: var(--wp--preset--color--koyu-yesil);
	--c-koyu-2: var(--wp--preset--color--koyu-yesil-acik);
	--c-acik-yesil: var(--wp--preset--color--acik-yesil);
	--c-siyah: var(--wp--preset--color--siyah);
	--c-gri: var(--wp--preset--color--gri);
	--c-acik-gri: var(--wp--preset--color--acik-gri);
	--c-beyaz: var(--wp--preset--color--beyaz);

	/* Tipografi — üç genişlik, üç rol */
	--f-govde: var(--wp--preset--font-family--govde);   /* Barlow Light 300 */
	--f-baslik: var(--wp--preset--font-family--baslik); /* Barlow Semi Condensed 700 */
	--f-menu: var(--wp--preset--font-family--menu);     /* Barlow Condensed 600 */

	/* Ölçü */
	--container: 1200px;
	/* Metin ve görsel içeren bölümlerin gövde genişliği (carousel'ler hariç) */
	--container-metin: 965px;
	--gutter: clamp(1.25rem, 5vw, 5rem);
	--header-h: var(--wp--custom--header--height);
	--header-h-mobil: var(--wp--custom--header--height-mobile);

	/* Diğer */
	--r-sm: var(--wp--custom--radius--sm);
	--r-md: var(--wp--custom--radius--md);
	--r-lg: var(--wp--custom--radius--lg);
	--r-pill: var(--wp--custom--radius--pill);
	--gecis: var(--wp--custom--transition);
	--golge-kart: var(--wp--custom--shadow--card);
	--golge-yumusak: var(--wp--custom--shadow--soft);
}

/* ---------- Reset ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--f-govde);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--wp--custom--line-height--body);
	color: var(--c-siyah);
	background: var(--c-beyaz);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6em;
	font-family: var(--f-baslik);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--heading);
}

p {
	margin: 0 0 0.6em;
}

/* Gövde Light (300) olduğu için vurgular 600'e çekiliyor. */
strong,
b {
	font-weight: 600;
}

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

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--gecis);
}

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

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--c-lime);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------- Yerleşim ---------- */

.tume-container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.tume-section {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.tume-section--tight {
	padding-block: clamp(2rem, 4vw, 3.5rem);
}

.tume-section--acik-yesil {
	background: var(--c-acik-yesil);
}

.tume-section--koyu {
	background: var(--c-koyu);
	color: var(--c-beyaz);
}

/* ---------- Bölüm başlığı (kicker + başlık) ---------- */

/* Logodan gelen 2x2 kare motifi */
.tume-motif {
	display: inline-grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px;
	width: 14px;
	flex: 0 0 auto;
}

.tume-motif span {
	display: block;
	aspect-ratio: 1;
	background: currentColor;
	border-radius: 1px;
}

.tume-motif span:nth-child(2) {
	opacity: 0.45;
}

.tume-kicker {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.35rem;
	font-family: var(--f-baslik);
	font-size: var(--wp--preset--font-size--xs);
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-yesil);
}

.tume-section-title {
	margin: 0 0 1.2rem;
	font-size: var(--wp--preset--font-size--xxxl);
	color: var(--c-yesil);
}

.tume-section--koyu .tume-section-title {
	color: var(--c-lime);
}

/* Koyu zeminde kicker beyaz (revize) */
.tume-section--koyu .tume-kicker {
	color: var(--c-beyaz);
}

.tume-section-head--merkez {
	text-align: center;
}

/* Ortalanmış bölümlerde motif kicker'ın üstüne geçer (iç sayfa düzeni). */
.tume-section-head--merkez .tume-kicker {
	flex-direction: column;
	gap: 0.7rem;
	align-items: center;
}

/*
 * Blok editöründen yazılan kicker paragrafı: <p class="tume-kicker-blok">.
 * Motif, 2x2 kare deseni olarak arka plan görseliyle basılır.
 */
.tume-kicker-blok {
	margin-bottom: 0.4rem;
	padding-top: 2rem;
	font-family: var(--f-baslik);
	font-size: var(--wp--preset--font-size--xs);
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-gri);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='7' height='7' fill='%23104622'/%3E%3Crect x='9' width='7' height='7' fill='%23104622' opacity='.45'/%3E%3Crect y='9' width='7' height='7' fill='%23104622'/%3E%3Crect x='9' y='9' width='7' height='7' fill='%23104622'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 16px 16px;
	background-position: top center;
}

/* Sola hizalı kicker'da motif satır içi solda durur (anasayfa bantları). */
.tume-kicker-blok:not(.has-text-align-center) {
	padding-top: 0;
	padding-left: 1.55rem;
	background-position: left 0.15em;
}

/* Çekirdek butonlar: 1px kenar, 5px köşe (tasarım revizesi) */
.wp-block-button__link,
.wp-element-button {
	border-radius: 5px;
	border-width: 1px;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 1px;
}

/* Çekirdek buton: tasarımdaki ok işareti */
.wp-block-button__link::after,
.wp-element-button::after {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-left: 0.55em;
	vertical-align: -0.08em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M1 8h12M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M1 8h12M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/*
 * Davet bandı: çekirdek "cover" bloğu metni beyaza zorluyor, tasarımda ise
 * açık gökyüzü üzerinde koyu metin var.
 */
.wp-block-cover.tume-cta,
.wp-block-cover.tume-cta .wp-block-cover__inner-container {
	color: var(--c-siyah);
}

/* ---------- Butonlar ---------- */

.tume-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1.5rem;
	font-family: var(--f-menu);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 5px;
	border: 1px solid transparent;
	background: var(--c-lime);
	color: var(--c-beyaz);
	transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}

.tume-btn:hover {
	background: var(--c-yesil);
	color: var(--c-beyaz);
}

.tume-btn--cerceve {
	background: transparent;
	color: var(--c-yesil);
	border: 1px solid var(--c-yesil);
}

.tume-btn--cerceve:hover {
	background: var(--c-yesil);
	color: var(--c-beyaz);
}

.tume-btn--beyaz {
	background: var(--c-beyaz);
	color: var(--c-koyu);
}

.tume-btn--beyaz:hover {
	background: var(--c-lime);
	color: var(--c-beyaz);
}

/* Kartların sağ altındaki yeşil yuvarlak ok */
.tume-ok {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(to top, #a6e04a 0%, var(--c-lime) 55%, #63a70b 100%);
	box-shadow: inset 0 0 15px rgb(255 255 255 / 45%);
	color: var(--c-beyaz);
	transition: filter var(--gecis), transform var(--gecis);
}

.tume-teknolojiler{
	background: linear-gradient(to top, #a6e04a 0%, var(--c-lime) 55%, #63a70b 100%);
	box-shadow: inset 0 0 15px rgb(255 255 255 / 45%);
}

.tume-ok:hover {
	background: var(--c-yesil);
	transform: translateX(3px);
}

/* ---------- Ekmek kırıntısı (tüm iç şablonlarda) ---------- */

.tume-breadcrumb {
	padding-top: 1.5rem;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--c-gri);
}

.tume-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-family: var(--f-menu);
	font-weight: 500;
}

.tume-breadcrumb li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.tume-breadcrumb li + li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.6;
}

.tume-breadcrumb a {
	color: var(--c-yesil);
	display: flex;
	align-items: center;
}

.tume-breadcrumb a:hover {
	color: var(--c-koyu);
}

.tume-breadcrumb [aria-current="page"] {
	color: var(--c-siyah);
}

/* ---------- Yardımcılar ---------- */

.tume-gizli {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.tume-atla {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 999;
	padding: 0.6rem 1rem;
	background: var(--c-koyu);
	color: var(--c-beyaz);
	transition: top var(--gecis);
}

.tume-atla:focus {
	top: 1rem;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------- İç sayfa banner'ı ---------- */

/*
 * Ölçüler sarmalayıcıda tanımlı: banner kutusu yüksekliği buradan okur, alt
 * kenarına oturan çağrı butonu da aynı değeri kullanır. İkisi ayrı yerde
 * tanımlanırsa kaçınılmaz olarak birbirinden kayarlar.
 */
.tume-banner-alan {
	--banner-h: 230px;
	--banner-figur-h: 410px;
	--cta-cap: 120px;
	--cta-halka-son: 300px;
	position: relative;
}

/* Geniş banner: sayfa düzenlerken sağ panelden "Geniş (500px)" seçilir. */
.tume-banner-alan--genis {
	--banner-h: 500px;
}

.tume-banner {
	position: relative;
	height: var(--banner-h, 230px);
	background: var(--c-koyu);
	overflow: hidden;
}

.tume-banner__gorsel,
.tume-banner__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

/*
 * YouTube iframe'i 16:9 sabittir. Banner kutusunu kırpmayla kaplaması için
 * kutu yüksekliğine ve pencere genişliğine göre büyütülüp ortalanıyor:
 * iki kenardan hangisi taşmayı gerektiriyorsa o belirleyici oluyor.
 * Oynatıcı hazır olana kadar arkada poster görseli durur.
 */
.tume-banner__yt {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background-position: center 35%;
	background-size: cover;
}

.tume-banner__yt iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, calc(var(--banner-h) * 16 / 9));
	height: max(var(--banner-h), calc(100vw * 9 / 16));
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}

/* YouTube arayüzü hiç ortaya çıkmasın diye tıklamayı yutan şeffaf kalkan. */
.tume-banner__yt-kalkan {
	position: absolute;
	inset: 0;
}

.tume-banner__perde {
	mix-blend-mode: hard-light;
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(16, 70, 34, 0.92) 0%, rgba(16, 70, 34, 0.55) 55%, rgba(16, 70, 34, 0.75) 100%);
}

/*
 * Banner ızgarası: 230x230 png yatay tek sıra döşenir (banner yüksekliği de
 * 230px olduğu için tam bir sıra), %25 opaklık.
 */
.tume-banner__doku {
	position: absolute;
	inset: 0;
	opacity: 1;
	background-image: url("../img/grid/Header_GRID.png");
	background-repeat: repeat-x;
	background-size: 230px 230px;
	background-position: top center;
}

/* 500px banner'da 230px'lik ızgara tek sıra yetmez, dikeyde de döşenir. */
.tume-banner--genis .tume-banner__doku {
	background-repeat: repeat;
	background-image: url("../img/grid/Header_GRID_BIG.png");
	background-size: 230px 500px;
}

/* ----- Banner figürü (kesim fotoğraf) ----- */

/*
 * Yuva header'la aynı container: max-width + otomatik yan boşluk. Mutlak
 * konumlu bir kutuda sol/sağ 0 verilip margin-inline:auto bırakılınca kutu
 * ortalanır — böylece figürün sağ kenarı header'daki Giriş butonunun sağ
 * kenarıyla aynı dikey çizgiye oturur.
 */
.tume-banner__figur-yuva {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	pointer-events: none;
}

/* Alt kenarı banner'ın alt kenarıyla tam hizalı; oran korunur. */
.tume-banner__figur {
	display: block;
	width: auto;
	height: var(--banner-figur-h, 410px);
	max-width: none;
}

/* ----- Banner çağrı butonu (yuvarlak) ----- */

/*
 * Merkezi banner'ın alt kenarına, sayfaya yatay olarak ortalanır: yarısı
 * banner'ın içinde, yarısı altındaki beyaz zeminde kalır.
 */
.tume-banner__cta {
	position: absolute;
	top: var(--banner-h, 230px);
	left: 50%;
	z-index: 2;
	width: var(--cta-cap);
	height: var(--cta-cap);
	transform: translate(-50%, -50%);
}

/*
 * Yuvarlak buton yüzeyi (yeşil gradient + iç beyaz parlama) .tume-ok'tan gelir;
 * burada yalnızca ölçü, yerleşim ve metin tanımlanır.
 *
 * .tume-ok inline-grid'dir; iki satır metin grid'de örtük satırlara dağılıp
 * dikeyde gereğinden fazla açılır. Bu yüzden dikey akış flex'e çevrildi.
 */
.tume-ok--cta {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	gap: 0;
	text-align: center;
	text-decoration: none;
	box-shadow:
		inset 0 0 26px rgb(255 255 255 / 45%),
		0 8px 24px rgb(16 70 34 / 30%);
}

.tume-ok--cta:hover,
.tume-ok--cta:focus-visible {
	/* .tume-ok'un yana kayma efekti ortalanmış bir butonda yanlış durur. */
	transform: none;
	background: linear-gradient(to top, #b6ea63 0%, var(--c-lime) 55%, #74bd0d 100%);
}

.tume-banner__cta-ust,
.tume-banner__cta-alt {
	display: block;
	font-family: var(--f-baslik);
	line-height: 1;
	text-transform: uppercase;
	color: var(--c-beyaz);
}

/*
 * Kendi sunucumuzdaki tek italik yüz Barlow Semi Condensed Medium (500);
 * "regular italik" isteği en yakın gerçek italikle karşılanıyor, tarayıcıya
 * yapay eğim üretmesi bırakılmıyor.
 */
.tume-banner__cta-ust {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	font-style: italic;
	letter-spacing: 0.02em;
}

.tume-banner__cta-alt {
	margin-top: 0.1em;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* ----- Çağrı butonunun çevresindeki halkalar ----- */

.tume-banner__halkalar {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/*
 * Halka buton genişliğinde başlar, 300px'e büyürken şeffaflaşır ve tam 300px'te
 * görünmez olur. Büyüme `inset` ile yapılıyor — `scale` kullanılsa çizgi
 * kalınlığı da büyür, oysa çizginin 2px kalması gerekiyor.
 * (300px - 120px) / 2 = 90px, bu yüzden bitiş inset'i -90px.
 */
.tume-banner__halka {
	position: absolute;
	inset: 0;
	border: 2px solid var(--c-beyaz);
	border-radius: 50%;
	opacity: 0;
	animation: tume-banner-halka 4s linear infinite;
}

/* Dört halka 4s'lik döngüye 1s aralıkla dağıtılınca akış kesintisiz görünür. */
.tume-banner__halka:nth-child(2) {
	animation-delay: 1s;
}

.tume-banner__halka:nth-child(3) {
	animation-delay: 2s;
}

.tume-banner__halka:nth-child(4) {
	animation-delay: 3s;
}

@keyframes tume-banner-halka {
	from {
		inset: 0;
		opacity: 0.7;
	}

	to {
		inset: calc((var(--cta-cap) - var(--cta-halka-son)) / 2);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tume-banner__halka {
		animation: none;
		inset: -24px;
		opacity: 0.35;
	}

	.tume-banner__halka:nth-child(n + 2) {
		display: none;
	}
}

/* Banner'ın hemen altında, sayfanın en üstünde devam eden ızgara (tam opak). */
body:not(.home) .tume-main {
	background-image: url("../img/grid/Page-Top_GRID.png");
	background-repeat: repeat-x;
	background-size: 230px 230px;
	background-position: top center;
}

@media (max-width: 860px) {
	.tume-banner-alan {
		--banner-h: 168px;
		--banner-figur-h: 250px;
	}

	.tume-banner-alan--genis {
		--banner-h: 300px;
	}
	
	.tume-banner__doku{
		background-position: bottom center;
	}

	/*
	 * Çağrı butonu banner'ın 60px altına sarkar. Dar ekranda ekmek kırıntısı
	 * o alana giriyor (768px altında ölçülerek görüldü), bu yüzden banner'ın
	 * altına butonu kapsayacak kadar pay bırakılıyor.
	 */
	.tume-banner-alan--cta {
		margin-bottom: calc(var(--cta-cap, 120px) / 2 + 10px);
	}
}

/* ---------- KVKK çerez bandı ---------- */

.tume-kvkk {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 200;
	background: var(--c-koyu);
	color: var(--c-beyaz);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
}

.tume-kvkk[hidden] {
	display: none;
}

.tume-kvkk__ic {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding: 0.9rem var(--gutter);
}

.tume-kvkk__metin {
	margin: 0;
	max-width: 78ch;
	font-size: var(--wp--preset--font-size--sm);
	color: rgba(255, 255, 255, 0.9);
}

.tume-kvkk__metin a {
	color: var(--c-lime);
	text-decoration: underline;
}

.tume-kvkk__kabul {
	flex: 0 0 auto;
}

/* ---------- Karusellerde fare ile sürükleme ---------- */

[data-kaydirma-ray] {
	cursor: grab;
}

[data-kaydirma-ray].is-surukleniyor {
	cursor: grabbing;
	user-select: none;
}

/* Sürüklerken kart içindeki bağlantı/görsel sürükleme hayaleti çıkmasın */
[data-kaydirma-ray].is-surukleniyor a,
[data-kaydirma-ray].is-surukleniyor img {
	pointer-events: none;
}

/*
 * Karusel sayfa noktaları — paydaşlar bandı her sayfada göründüğü için
 * bu stiller ortak dosyada durur (daha önce hikayeler.css'teydi ve iç
 * sayfalarda yüklenmediği için noktalar boyutsuz kalıyordu).
 */

.tume-noktalar {
	display: flex;
	gap: 0.5rem;
}

.tume-noktalar button {
	display: block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: rgba(16, 70, 34, 0.22);
	transition: background var(--gecis), transform var(--gecis);
}

.tume-noktalar button:hover {
	background: rgba(16, 70, 34, 0.45);
}

.tume-noktalar button.is-aktif {
	background: var(--c-koyu);
	transform: scale(1.1);
}

/* ---------- Footer üstündeki beyaz şerit ---------- */

.tume-footer-serit {
	height: 12px;
	background: var(--c-beyaz);
}