/*
 * Saha Core — çekirdek stil.
 *
 * Burada YAPI vardır, KİMLİK yoktur. Renk/tipografi değerleri değişken olarak
 * tanımlanır; alt tema `assets/css/tema.css` ile bunları ezer. Bu dosyadaki
 * hiçbir kural belirli bir sektöre veya markaya ait değildir.
 *
 * Sıra: 1) belirteçler  2) sıfırlama  3) düzen  4) tipografi
 *       5) bileşenler   6) başlık/altbilgi  7) mobil eylem çubuğu
 */

/* ==========================================================================
   1) Tasarım belirteçleri (varsayılanlar — alt tema ezer)
   ========================================================================== */

:root {
	/* Renk — alt tema kendi paletini verir. */
	--renk-koyu:        #0B2433;
	--renk-koyu-2:      #123B4A;
	--renk-vurgu:       #168FB8;
	--renk-vurgu-koyu:  #0F7396;
	--renk-buz:         #E8F3F6;
	--renk-kagit:       #F7F8F5;
	--renk-metal:       #8A979D;
	--renk-metin:       #172126;
	--renk-beyaz:       #FFFFFF;

	/* Türetilmiş */
	--renk-metin-soluk: color-mix(in srgb, var(--renk-metin) 62%, transparent);
	--renk-cizgi:       color-mix(in srgb, var(--renk-metal) 34%, transparent);
	--renk-cizgi-koyu:  color-mix(in srgb, var(--renk-beyaz) 16%, transparent);
	/* Metin üzerinde kullanılabilir koyu vurgu — kontrast için (bkz. a{}). */
	--renk-baglanti:    var(--renk-vurgu-koyu);

	/* Tipografi */
	--yazi-baslik: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--yazi-govde:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Akıcı ölçek — clamp ile; kırılım noktalarında zıplama olmaz. */
	--ol-3xl: clamp(2.25rem, 1.55rem + 3.1vw, 4rem);
	--ol-2xl: clamp(1.75rem, 1.32rem + 1.9vw, 2.75rem);
	--ol-xl:  clamp(1.375rem, 1.16rem + 0.95vw, 1.875rem);
	--ol-lg:  clamp(1.125rem, 1.04rem + 0.38vw, 1.3125rem);
	--ol-md:  1rem;
	--ol-sm:  0.9375rem;
	--ol-xs:  0.8125rem;

	/* Boşluk — 4px ızgara */
	--bo-1: 0.25rem;  --bo-2: 0.5rem;   --bo-3: 0.75rem;
	--bo-4: 1rem;     --bo-5: 1.5rem;   --bo-6: 2rem;
	--bo-7: 3rem;     --bo-8: 4rem;     --bo-9: 6rem;

	/* Düzen */
	--genislik:      1200px;
	--genislik-dar:  760px;
	--kenar:         clamp(1rem, 4vw, 2.5rem);

	/*
	 * Köşe yarıçapı bilerek KÜÇÜK. Brief: "aşırı yuvarlak kartlar" yasak.
	 * Yuvarlak köşe yumuşaklık verir; burada istenen his teknik ve sağlam.
	 */
	--yaricap:    4px;
	--yaricap-sm: 2px;

	/* Gölge — çok hafif; parlak/gradient görünüm istenmiyor. */
	--golge-1: 0 1px 2px rgb(11 36 51 / 0.06), 0 2px 8px rgb(11 36 51 / 0.04);
	--golge-2: 0 2px 4px rgb(11 36 51 / 0.08), 0 8px 24px rgb(11 36 51 / 0.08);

	/* Hareket */
	--gecis: 180ms cubic-bezier(0.2, 0, 0.2, 1);
	--gecis-yavas: 420ms cubic-bezier(0.2, 0, 0.2, 1);

	/* Katman */
	--z-baslik: 40;
	--z-mobil:  50;
	--z-ustu:   60;
}

/* ==========================================================================
   2) Sıfırlama
   ========================================================================== */

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

* { margin: 0; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Yapışkan başlık bağlantı hedeflerini örtmesin. */
	scroll-padding-top: 6rem;
}

body {
	font-family: var(--yazi-govde);
	font-size: var(--ol-md);
	line-height: 1.65;
	color: var(--renk-metin);
	background: var(--renk-beyaz);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* Yatay taşma sitede hiçbir yerde olmamalı. */
	overflow-x: hidden;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; }

/*
 * HTML `hidden` özniteliği her zaman kazansın.
 * Tarayıcının varsayılanı `display: none` ama bu ZAYIF bir kural: bileşene
 * `display: grid/flex` verildiği anda hidden işlevsiz kalıyor ve gizli olması
 * gereken panel açık görünüyor (çerez ayrıntı panelinde başımıza geldi).
 */
[hidden] { display: none !important; }

/*
 * Bağlantı rengi vurgudan bir ton KOYU. Marka mavisi (#168FB8) beyaz üzerinde
 * 3.4:1 veriyor; gövde metni için WCAG AA 4.5:1 istiyor. Koyu ton 4.6:1.
 * Vurgu rengi büyük başlık, ikon ve dolgu alanlarında olduğu gibi kalıyor.
 */
a { color: var(--renk-baglanti); text-underline-offset: 0.2em; }

/* Görünür odak — klavye kullanıcısı nerede olduğunu her zaman görmeli. */
:focus-visible {
	outline: 2px solid var(--renk-vurgu);
	outline-offset: 3px;
	border-radius: var(--yaricap-sm);
}

/* Ekran okuyucuya özel */
.saha-gizli {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* İçeriğe atla */
.saha-atla {
	position: absolute;
	top: -100%;
	left: var(--kenar);
	z-index: var(--z-ustu);
	padding: var(--bo-3) var(--bo-4);
	background: var(--renk-koyu);
	color: var(--renk-beyaz);
	border-radius: 0 0 var(--yaricap) var(--yaricap);
}
.saha-atla:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   3) Düzen
   ========================================================================== */

.saha-kap {
	width: 100%;
	max-width: var(--genislik);
	margin-inline: auto;
	padding-inline: var(--kenar);
}

.saha-kap--dar { max-width: var(--genislik-dar); }

.saha-bolum { padding-block: clamp(2.5rem, 6vw, 5rem); }
.saha-bolum--koyu {
	background: var(--renk-koyu);
	color: var(--renk-beyaz);
}
.saha-bolum--buz { background: var(--renk-buz); }
.saha-bolum--kagit { background: var(--renk-kagit); }

.saha-izgara {
	display: grid;
	gap: var(--bo-5);
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* ==========================================================================
   4) Tipografi
   ========================================================================== */

h1, h2, h3, h4 {
	font-family: var(--yazi-baslik);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

h1 { font-size: var(--ol-3xl); }
h2 { font-size: var(--ol-2xl); }
h3 { font-size: var(--ol-xl); }
h4 { font-size: var(--ol-lg); }

p, li { text-wrap: pretty; }

.saha-ustyazi {
	font-family: var(--yazi-baslik);
	font-size: var(--ol-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--renk-vurgu);
}

.saha-giris {
	font-size: var(--ol-lg);
	color: var(--renk-metin-soluk);
	max-width: 62ch;
}

/* ==========================================================================
   5) Bileşenler
   ========================================================================== */

/* --- Akış hattı — markanın tekrar eden işareti ---------------------------
   Su dalgası DEĞİL. Tankerden hedefe uzanan kontrollü bir lojistik hattı:
   ince çizgi + ilerleyen bir işaret. Sakin, işlevsel, dikkat çalmayan. */

.saha-akis {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--renk-cizgi);
}
.saha-akis--yatay { height: 1px; width: 100%; }
.saha-akis--dikey { width: 1px; height: 100%; }

.saha-akis::after {
	content: '';
	position: absolute;
	inset-block: 0;
	width: 33%;
	background: linear-gradient(90deg, transparent, var(--renk-vurgu), transparent);
	animation: saha-akis-ilerle 5.5s linear infinite;
}
.saha-akis--dikey::after {
	inset-inline: 0;
	width: auto;
	height: 33%;
	background: linear-gradient(180deg, transparent, var(--renk-vurgu), transparent);
	animation-name: saha-akis-ilerle-dikey;
}

@keyframes saha-akis-ilerle {
	from { transform: translateX(-100%); }
	to   { transform: translateX(400%); }
}
@keyframes saha-akis-ilerle-dikey {
	from { transform: translateY(-100%); }
	to   { transform: translateY(400%); }
}

/* --- Teknik etiket: 10 TON · PENDİK · 7/24 ------------------------------ */

.saha-etiket {
	display: inline-flex;
	align-items: center;
	gap: var(--bo-1);
	padding: 0.25rem 0.5rem;
	font-family: var(--yazi-baslik);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: var(--yaricap-sm);
	background: transparent;
	white-space: nowrap;
	/*
	 * Renk zemine göre kendini ayarlasın diye currentColor üzerinden türetilir.
	 * Böylece etiket koyu bölümde de, altbilgide de, beyaz kartta da okunur —
	 * her kap için ayrı kural yazmaya gerek kalmaz.
	 */
	color: color-mix(in srgb, currentColor 82%, transparent);
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.saha-etiket--vurgu {
	color: var(--renk-vurgu);
	border-color: color-mix(in srgb, var(--renk-vurgu) 45%, transparent);
	background: color-mix(in srgb, var(--renk-vurgu) 7%, transparent);
}
.saha-etiket--uyari {
	color: #9A5B00;
	border-color: color-mix(in srgb, #9A5B00 40%, transparent);
	background: color-mix(in srgb, #9A5B00 7%, transparent);
}
/*
 * Etiket artık currentColor'dan türediği için koyu bölüm kuralı gerekmiyor.
 * Yalnızca vurgu/uyarı türleri sabit renk taşır (yukarıda tanımlı).
 */

/* --- Eylem butonları (dönüşüm noktaları) -------------------------------- */

.saha-eylem {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bo-2);
	min-height: 48px;              /* dokunma alanı */
	padding: var(--bo-3) var(--bo-5);
	font-family: var(--yazi-baslik);
	font-size: var(--ol-sm);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--yaricap);
	transition: background var(--gecis), border-color var(--gecis), color var(--gecis), transform var(--gecis);
}
.saha-eylem:active { transform: translateY(1px); }

/* Birincil — sayfada tek. Su mavisi yalnızca burada güçlü kullanılır. */
/*
 * Dolgulu birincil buton koyu tonu kullanır: mobil eylem çubuğundaki 11px
 * metin marka mavisi üzerinde okunmuyordu (3.3:1). Koyu tonda 4.6:1.
 */
.saha-eylem--teklif {
	background: var(--renk-vurgu-koyu);
	color: var(--renk-beyaz);
}
.saha-eylem--teklif:hover {
	background: color-mix(in srgb, var(--renk-vurgu-koyu) 86%, #000);
}

/* Telefon — koyu, kurumsal. */
.saha-eylem--telefon {
	background: var(--renk-koyu);
	color: var(--renk-beyaz);
}
.saha-eylem--telefon:hover {
	background: var(--renk-koyu-2);
}

/* WhatsApp — çerçeveli; marka rengi taklit edilmiyor, sayfa düzeni bozulmasın. */
.saha-eylem--whatsapp,
.saha-eylem--eposta,
.saha-eylem--harita,
.saha-eylem--belge {
	background: transparent;
	color: var(--renk-koyu);
	border-color: var(--renk-cizgi);
}
.saha-eylem--whatsapp:hover,
.saha-eylem--eposta:hover,
.saha-eylem--harita:hover,
.saha-eylem--belge:hover {
	border-color: var(--renk-vurgu);
	color: var(--renk-vurgu);
	background: color-mix(in srgb, var(--renk-vurgu) 6%, transparent);
}

.saha-bolum--koyu .saha-eylem--whatsapp,
.saha-bolum--koyu .saha-eylem--eposta {
	color: var(--renk-beyaz);
	border-color: var(--renk-cizgi-koyu);
}

.saha-ikon { flex: none; }

/* --- Kart --------------------------------------------------------------- */

.saha-kart {
	display: flex;
	flex-direction: column;
	gap: var(--bo-3);
	padding: var(--bo-5);
	background: var(--renk-beyaz);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--yaricap);
	transition: border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.saha-kart:hover {
	border-color: color-mix(in srgb, var(--renk-vurgu) 50%, transparent);
	transform: translateY(-2px);
	box-shadow: var(--golge-1);
}
.saha-kart__baslik { font-size: var(--ol-lg); }
.saha-kart__metin { color: var(--renk-metin-soluk); font-size: var(--ol-sm); }

/* --- Hızlı yanıt (GEO) --------------------------------------------------- */

.saha-cevap {
	padding: var(--bo-5);
	background: var(--renk-buz);
	border-left: 3px solid var(--renk-vurgu);
	border-radius: 0 var(--yaricap) var(--yaricap) 0;
}
.saha-cevap__soru {
	font-family: var(--yazi-baslik);
	font-weight: 700;
	margin-bottom: var(--bo-2);
}
.saha-cevap__metin { color: var(--renk-metin); }

/* --- Doğrulanacak işareti (yalnızca yöneticiye görünür) ------------------ */

.saha-dogrulanacak {
	background: #FFF3CD;
	color: #7A5200;
	padding: 0 0.3em;
	border-radius: var(--yaricap-sm);
	font-size: 0.85em;
	font-weight: 600;
}

/* --- İçerik kutuları ([uyari] [bilgi] [vurgu]) --------------------------- */

.saha-kutu {
	padding: var(--bo-4) var(--bo-5);
	border-radius: var(--yaricap);
	border-left: 3px solid var(--renk-metal);
	background: var(--renk-kagit);
}
.saha-kutu__baslik { font-family: var(--yazi-baslik); font-weight: 700; margin-bottom: var(--bo-2); }
.saha-kutu--bilgi { border-left-color: var(--renk-vurgu); background: var(--renk-buz); }
.saha-kutu--uyari { border-left-color: #9A5B00; background: #FFF8ED; }
.saha-kutu--vurgu { border-left-color: var(--renk-koyu); background: var(--renk-kagit); }
.saha-kutu p + p { margin-top: var(--bo-3); }

/* --- İçerik içi dönüşüm bloğu -------------------------------------------- */

.saha-icerik-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bo-4);
	padding: var(--bo-5);
	background: var(--renk-koyu);
	color: var(--renk-beyaz);
	border-radius: var(--yaricap);
}
.saha-icerik-cta__metin {
	font-family: var(--yazi-baslik);
	font-size: var(--ol-lg);
	font-weight: 700;
	margin: 0;
}
.saha-icerik-cta__eylem { display: flex; flex-wrap: wrap; gap: var(--bo-3); }
.saha-icerik-cta .saha-eylem--whatsapp {
	color: var(--renk-beyaz);
	border-color: var(--renk-cizgi-koyu);
}

.saha-eylem--satirici {
	display: inline;
	min-height: 0;
	padding: 0;
	font-size: inherit;
	color: var(--renk-vurgu);
	text-decoration: underline;
}

/* --- İçindekiler --------------------------------------------------------- */

.saha-icindekiler {
	padding: var(--bo-4) var(--bo-5);
	background: var(--renk-kagit);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--yaricap);
}
.saha-icindekiler__baslik {
	font-family: var(--yazi-baslik);
	font-size: var(--ol-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--renk-metin-soluk);
	margin-bottom: var(--bo-3);
}
.saha-icindekiler ol {
	margin: 0;
	padding-left: 1.1rem;
	display: grid;
	gap: var(--bo-2);
	font-size: var(--ol-sm);
}
.saha-icindekiler a { color: var(--renk-metin); text-decoration: none; }
.saha-icindekiler a:hover { color: var(--renk-vurgu); text-decoration: underline; }

/* --- SSS ----------------------------------------------------------------- */

.saha-sss { display: grid; gap: var(--bo-2); }
.saha-sss__oge {
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--yaricap);
	background: var(--renk-beyaz);
}
.saha-sss__oge summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bo-3);
	padding: var(--bo-4);
	font-family: var(--yazi-baslik);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	min-height: 48px;
}
.saha-sss__oge summary::-webkit-details-marker { display: none; }
.saha-sss__oge summary::after {
	content: '';
	flex: none;
	width: 10px; height: 10px;
	border-right: 2px solid var(--renk-metal);
	border-bottom: 2px solid var(--renk-metal);
	transform: rotate(45deg);
	transition: transform var(--gecis);
}
.saha-sss__oge[open] summary::after { transform: rotate(-135deg); }
.saha-sss__cevap { padding: 0 var(--bo-4) var(--bo-4); color: var(--renk-metin-soluk); }

/* --- Video (tıklamadan yüklenmez) ---------------------------------------- */

.saha-video { position: relative; }
.saha-video__dugme {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--renk-koyu);
	border-radius: var(--yaricap);
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.saha-video__dugme img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.saha-video__oynat {
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	width: 64px; height: 64px;
	border-radius: 50%;
	background: var(--renk-vurgu);
}
.saha-video__oynat::after {
	content: '';
	position: absolute;
	inset: 50% auto auto 54%;
	translate: -50% -50%;
	border-left: 18px solid #fff;
	border-block: 11px solid transparent;
}
.saha-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--yaricap); }
.saha-video__baslik { margin-top: var(--bo-2); font-size: var(--ol-sm); color: var(--renk-metin-soluk); }

/* --- Teklif formu -------------------------------------------------------- */

.saha-form-sarmal {
	padding: var(--bo-6);
	background: var(--renk-beyaz);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--yaricap);
}
.saha-form__baslik { font-size: var(--ol-xl); margin-bottom: var(--bo-5); }

.saha-form__izgara {
	display: grid;
	gap: var(--bo-4);
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.saha-form__alan--genis { grid-column: 1 / -1; }

.saha-form__alan label {
	display: block;
	font-family: var(--yazi-baslik);
	font-size: var(--ol-sm);
	font-weight: 600;
	margin-bottom: var(--bo-2);
}
.saha-form__zorunlu { color: var(--renk-vurgu); }

.saha-form input[type='text'],
.saha-form input[type='tel'],
.saha-form select,
.saha-form textarea {
	width: 100%;
	min-height: 48px;
	padding: var(--bo-3) var(--bo-4);
	background: var(--renk-beyaz);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--yaricap);
	transition: border-color var(--gecis);
}
.saha-form textarea { min-height: 90px; resize: vertical; }
.saha-form input:focus, .saha-form select:focus, .saha-form textarea:focus {
	border-color: var(--renk-vurgu);
}
.saha-form input:user-invalid, .saha-form select:user-invalid {
	border-color: #B3261E;
}

.saha-form__ipucu { margin-top: var(--bo-1); font-size: var(--ol-xs); color: var(--renk-metin-soluk); }

.saha-form__onay { display: grid; gap: var(--bo-3); margin-top: var(--bo-5); }
.saha-form__onay label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--bo-3);
	align-items: start;
	font-size: var(--ol-sm);
	color: var(--renk-metin-soluk);
	cursor: pointer;
}
.saha-form__onay input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--renk-vurgu); }

.saha-form__gonder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bo-4);
	margin-top: var(--bo-5);
}
.saha-form__not { font-size: var(--ol-xs); color: var(--renk-metin-soluk); max-width: 34ch; }

/* Honeypot: ekran okuyucudan da, gözden de uzak ama "display:none" değil —
   bazı botlar gizli alanları atlıyor, konumlandırma daha iyi tuzak. */
.saha-tuzak {
	position: absolute;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.saha-form-sonuc {
	padding: var(--bo-5);
	border-radius: var(--yaricap);
	border-left: 3px solid var(--renk-vurgu);
	background: var(--renk-buz);
}
.saha-form-sonuc:focus { outline: none; }
.saha-form-sonuc--hata { border-left-color: #B3261E; background: #FDECEA; }
.saha-form-sonuc ul { margin: var(--bo-2) 0 0; padding-left: 1.2rem; }
.saha-form-sonuc__eylem { display: flex; flex-wrap: wrap; gap: var(--bo-3); margin-top: var(--bo-4); }

/* --- Ekmek kırıntısı ----------------------------------------------------- */

.saha-izyolu { margin-bottom: var(--bo-4); font-size: var(--ol-xs); }
.saha-izyolu ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-2);
	list-style: none;
	padding: 0;
	color: var(--renk-metin-soluk);
}
.saha-izyolu li + li::before { content: '/'; margin-right: var(--bo-2); color: var(--renk-metal); }
.saha-izyolu a { color: inherit; text-decoration: none; }
.saha-izyolu a:hover { color: var(--renk-vurgu); }

/* --- Detay düzeni -------------------------------------------------------- */

.saha-detay__hero { padding-top: var(--bo-6); background: var(--renk-kagit); }
.saha-detay__hero-ic {
	display: grid;
	gap: var(--bo-6);
	align-items: center;
	padding-bottom: var(--bo-7);
}
@media (min-width: 900px) {
	.saha-detay__hero-ic { grid-template-columns: 1.1fr 0.9fr; }
}
.saha-detay__etiketler {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-2);
	margin-top: var(--bo-4);
}
.saha-detay__eylem {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-3);
	margin-top: var(--bo-5);
}
.saha-detay__gorsel img { border-radius: var(--yaricap); }

.saha-detay__govde {
	display: grid;
	gap: var(--bo-7);
	padding-block: var(--bo-7);
	align-items: start;
}
@media (min-width: 1200px) {
	.saha-detay__govde { grid-template-columns: minmax(0, 1fr) 320px; }
}
.saha-detay__ana > * + * { margin-top: var(--bo-6); }
.saha-detay__bolum > h2 { margin-bottom: var(--bo-4); }

/* Mobilde yan sütun içeriğin ALTINA iner ve yapışkan kart gizlenir —
   alt eylem çubuğu zaten aynı işi görüyor. */
@media (max-width: 1199px) {
	.saha-detay__yan .saha-yan-kart { display: none; }
}

/* --- Onaylı liste -------------------------------------------------------- */

.saha-onay-liste { list-style: none; padding: 0; display: grid; gap: var(--bo-3); }
.saha-onay-liste li {
	position: relative;
	padding-left: 1.75rem;
}
.saha-onay-liste li::before {
	content: '';
	position: absolute;
	left: 0; top: 0.55em;
	width: 9px; height: 5px;
	border-left: 2px solid var(--renk-vurgu);
	border-bottom: 2px solid var(--renk-vurgu);
	transform: rotate(-45deg);
}

/* --- Süreç --------------------------------------------------------------- */

.saha-surec { list-style: none; padding: 0; display: grid; gap: var(--bo-5); counter-reset: adim; }
.saha-surec__adim { display: grid; grid-template-columns: auto 1fr; gap: var(--bo-4); align-items: start; }
.saha-surec__no {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	font-family: var(--yazi-baslik);
	font-weight: 700;
	color: var(--renk-vurgu);
	border: 1px solid color-mix(in srgb, var(--renk-vurgu) 40%, transparent);
	border-radius: var(--yaricap);
}
.saha-surec__baslik { font-size: var(--ol-lg); margin-bottom: var(--bo-1); }
.saha-surec--yatay { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

/* --- Künye tablosu ------------------------------------------------------- */

.saha-kunye { display: grid; gap: 0; }
.saha-kunye__satir {
	display: grid;
	grid-template-columns: minmax(140px, 34%) 1fr;
	gap: var(--bo-4);
	padding-block: var(--bo-3);
	border-bottom: 1px solid var(--renk-cizgi);
}
.saha-kunye dt { color: var(--renk-metin-soluk); font-size: var(--ol-sm); }
.saha-kunye dd { margin: 0; font-weight: 600; }

/* --- Yan sütun ----------------------------------------------------------- */

.saha-detay__yan > * + * { margin-top: var(--bo-5); }

.saha-yan-kart {
	position: sticky;
	top: 96px;
	padding: var(--bo-5);
	background: var(--renk-koyu);
	color: var(--renk-beyaz);
	border-radius: var(--yaricap);
}
.saha-yan-kart__ustyazi {
	font-size: var(--ol-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--renk-beyaz) 62%, transparent);
}
.saha-yan-kart__baslik {
	font-family: var(--yazi-baslik);
	font-size: var(--ol-xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-block: var(--bo-2) var(--bo-3);
}
.saha-yan-kart__tel { font-size: var(--ol-lg); font-weight: 600; margin-bottom: var(--bo-4); }
.saha-yan-kart__eylem { display: grid; gap: var(--bo-2); }
.saha-yan-kart__eylem .saha-eylem { width: 100%; }
.saha-yan-kart__eylem .saha-eylem--telefon { background: var(--renk-vurgu); }
.saha-yan-kart__eylem .saha-eylem--whatsapp,
.saha-yan-kart__eylem .saha-eylem--teklif {
	background: transparent;
	color: var(--renk-beyaz);
	border-color: var(--renk-cizgi-koyu);
}
.saha-yan-kart__not {
	margin-top: var(--bo-4);
	font-size: var(--ol-xs);
	color: color-mix(in srgb, var(--renk-beyaz) 62%, transparent);
}

.saha-yan-blok {
	padding: var(--bo-5);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--yaricap);
}
.saha-yan-blok__baslik {
	font-size: var(--ol-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--renk-metin-soluk);
	margin-bottom: var(--bo-3);
}
.saha-yan-liste { list-style: none; padding: 0; display: grid; gap: var(--bo-3); font-size: var(--ol-sm); }
.saha-yan-liste a { color: var(--renk-metin); text-decoration: none; }
.saha-yan-liste a:hover { color: var(--renk-vurgu); text-decoration: underline; }
.saha-yan-etiketler { display: flex; flex-wrap: wrap; gap: var(--bo-2); }
.saha-yan-etiketler a.saha-etiket { text-decoration: none; }
.saha-yan-etiketler a.saha-etiket:hover { color: var(--renk-vurgu); border-color: var(--renk-vurgu); }

/* --- Kart eklentileri ---------------------------------------------------- */

.saha-kart__gorsel {
	display: block;
	margin: calc(var(--bo-5) * -1) calc(var(--bo-5) * -1) 0;
	overflow: hidden;
	border-radius: var(--yaricap) var(--yaricap) 0 0;
}
.saha-kart__gorsel img { width: 100%; transition: scale var(--gecis-yavas); }
.saha-kart:hover .saha-kart__gorsel img { scale: 1.03; }
.saha-kart__etiketler { display: flex; flex-wrap: wrap; gap: var(--bo-2); }
.saha-kart__baslik a { color: inherit; text-decoration: none; }
.saha-kart__baslik a:hover { color: var(--renk-vurgu); }
.saha-kart__git { margin-top: auto; font-size: var(--ol-sm); }
.saha-kart__git a {
	display: inline-flex;
	align-items: center;
	gap: var(--bo-2);
	font-weight: 600;
	text-decoration: none;
}
.saha-kart__git a:hover { gap: var(--bo-3); }

/* --- Arşiv üst ----------------------------------------------------------- */

.saha-arsiv__ust { margin-bottom: var(--bo-6); }
.saha-arsiv__ust .saha-akis { margin-top: var(--bo-4); }

.pagination, .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-2);
	justify-content: center;
	margin-top: var(--bo-7);
}
.page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px; min-height: 44px;
	padding-inline: var(--bo-3);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--yaricap);
	text-decoration: none;
	color: var(--renk-metin);
}
.page-numbers.current { background: var(--renk-koyu); color: var(--renk-beyaz); border-color: var(--renk-koyu); }

/* --- Belgeler ------------------------------------------------------------ */

.saha-belge-liste { list-style: none; padding: 0; display: grid; gap: var(--bo-4); }
.saha-belge {
	padding: var(--bo-5);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--yaricap);
}
.saha-belge--arsiv { opacity: 0.7; }
.saha-belge__ust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bo-3); }
.saha-belge__baslik { font-size: var(--ol-lg); }
.saha-belge__aciklama { margin-top: var(--bo-2); color: var(--renk-metin-soluk); font-size: var(--ol-sm); }
.saha-belge__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-4);
	margin-block: var(--bo-3);
	font-size: var(--ol-xs);
	color: var(--renk-metin-soluk);
}
.saha-belge-surec {
	margin-bottom: var(--bo-7);
	padding: var(--bo-6);
	background: var(--renk-buz);
	border-left: 3px solid var(--renk-vurgu);
	border-radius: 0 var(--yaricap) var(--yaricap) 0;
}
.saha-belge-surec h2 { font-size: var(--ol-xl); margin-bottom: var(--bo-3); }
.saha-belge-surec > * + * { margin-top: var(--bo-4); }
.saha-belge-surec__not { font-size: var(--ol-sm); color: var(--renk-metin-soluk); }

.saha-belge-arsiv { margin-top: var(--bo-6); }
.saha-belge-arsiv summary { cursor: pointer; font-weight: 600; padding: var(--bo-3) 0; }

/* --- Blog köprüsü -------------------------------------------------------- */

.saha-kopru {
	padding: var(--bo-6);
	background: var(--renk-buz);
	border-radius: var(--yaricap);
	border-left: 3px solid var(--renk-vurgu);
}
.saha-kopru__baslik { font-size: var(--ol-xl); margin-block: var(--bo-2) var(--bo-3); }
.saha-kopru__baslik a { color: var(--renk-koyu); text-decoration: none; }
.saha-kopru__eylem { display: flex; flex-wrap: wrap; gap: var(--bo-3); margin-top: var(--bo-4); }

.saha-yazi__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-2);
	margin-top: var(--bo-4);
	font-size: var(--ol-sm);
	color: var(--renk-metin-soluk);
}

/* --- İletişim ------------------------------------------------------------ */

.saha-iletisim > * + * { margin-top: var(--bo-6); }
.saha-iletisim__kartlar {
	display: grid;
	gap: var(--bo-4);
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.saha-iletisim__kart {
	display: grid;
	gap: var(--bo-2);
	align-content: start;
	padding: var(--bo-5);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--yaricap);
}
.saha-iletisim__ikon { color: var(--renk-vurgu); }
.saha-iletisim__kart h2 { font-size: var(--ol-lg); }
.saha-iletisim__deger { color: var(--renk-metin-soluk); font-size: var(--ol-sm); }
.saha-iletisim__kart .saha-eylem { margin-top: var(--bo-2); }
.saha-iletisim__adres address { font-style: normal; margin-block: var(--bo-2) var(--bo-4); }

.saha-teklif__alternatif {
	margin-top: var(--bo-6);
	padding-top: var(--bo-5);
	border-top: 1px solid var(--renk-cizgi);
	text-align: center;
}
.saha-teklif__eylem {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-3);
	justify-content: center;
	margin-top: var(--bo-4);
}

/* ==========================================================================
   6) Başlık ve altbilgi
   ========================================================================== */

.saha-ust-serit {
	background: var(--renk-koyu);
	color: color-mix(in srgb, var(--renk-beyaz) 82%, transparent);
	font-size: var(--ol-xs);
}
.saha-ust-serit__ic {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bo-3);
	min-height: 38px;
	padding-block: var(--bo-2);
}
.saha-ust-serit a { color: inherit; text-decoration: none; }
.saha-ust-serit a:hover { color: var(--renk-beyaz); }

.saha-baslik {
	position: sticky;
	top: 0;
	z-index: var(--z-baslik);
	background: var(--renk-beyaz);
	border-bottom: 1px solid var(--renk-cizgi);
	transition: box-shadow var(--gecis), background var(--gecis);
}
.saha-baslik__ic {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bo-5);
	/* Yapışkan olunca kompaktlaşır — geçiş yumuşak. */
	min-height: 76px;
	transition: min-height var(--gecis-yavas);
}
.saha-baslik--kompakt { box-shadow: var(--golge-1); }
.saha-baslik--kompakt .saha-baslik__ic { min-height: 60px; }

.saha-logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.saha-logo img { max-height: 44px; width: auto; transition: max-height var(--gecis-yavas); }
.saha-baslik--kompakt .saha-logo img { max-height: 34px; }
.saha-logo__yazi {
	font-family: var(--yazi-baslik);
	font-weight: 800;
	font-size: 1.375rem;
	letter-spacing: -0.03em;
	color: var(--renk-koyu);
	white-space: nowrap;
}

/*
 * Menü içeriğinden daha dar olamaz (flex: 0 0 auto). Aksi hâlde maddeler
 * sağdaki butonların altına kayıp görünmez oluyordu — üstelik sessizce.
 */
.saha-menu { display: none; flex: 0 0 auto; }

.saha-menu > ul {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 1.4vw, 1.5rem);
	list-style: none;
	padding: 0;
	margin: 0;
}

.saha-menu li { position: relative; }

.saha-menu a {
	/* Tıklama/dokunma alanı 44px'in altına düşmesin (WCAG hedef boyutu). */
	display: flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--yazi-baslik);
	font-size: var(--ol-sm);
	font-weight: 600;
	color: var(--renk-metin);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color var(--gecis), border-color var(--gecis);
}
.saha-menu > ul > li > a:hover,
.saha-menu .current-menu-item > a,
.saha-menu .current-menu-ancestor > a {
	color: var(--renk-vurgu);
	border-bottom-color: var(--renk-vurgu);
}

/* Alt menü oku */
.saha-menu .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 6px; height: 6px;
	margin-left: 0.4em;
	vertical-align: 0.15em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--gecis);
}
.saha-menu .menu-item-has-children:hover > a::after { transform: rotate(-135deg); }

/*
 * Açılır menü. `visibility` ile gizleniyor (display:none değil) ki geçiş
 * yumuşak olsun ve klavye odağı içeri girebilsin.
 */
.saha-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	translate: -50% 0;
	z-index: var(--z-baslik);
	display: grid;
	gap: 0;
	min-width: 240px;
	padding: var(--bo-2);
	margin: 0;
	list-style: none;
	background: var(--renk-beyaz);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--yaricap);
	box-shadow: var(--golge-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
}
.saha-menu li:hover > .sub-menu,
.saha-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.saha-menu .sub-menu a {
	padding: var(--bo-3);
	border-bottom: 0;
	border-radius: var(--yaricap-sm);
	font-weight: 500;
	white-space: normal;
}
.saha-menu .sub-menu a:hover {
	background: var(--renk-buz);
	color: var(--renk-vurgu);
}

.saha-baslik__eylem { display: none; gap: var(--bo-3); align-items: center; flex: none; }

/*
 * Dar masaüstünde telefon butonu yalnızca ikona düşer — menü sığmadığında
 * ilk feda edilecek şey numaranın yazısıdır, butonun kendisi değil.
 */
@media (min-width: 1200px) and (max-width: 1439px) {
	.saha-baslik__eylem .saha-eylem--telefon { padding-inline: var(--bo-3); }
	.saha-baslik__eylem .saha-eylem--telefon .saha-eylem__metin { display: none; }
}

.saha-menu-dugme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	background: transparent;
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--yaricap);
	color: var(--renk-koyu);
}

@media (min-width: 1200px) {
	.saha-menu { display: block; }
	.saha-baslik__eylem { display: flex; }
	.saha-menu-dugme { display: none; }
}

/* Mobil menü paneli */
.saha-mobil-menu {
	position: fixed;
	inset: 0;
	z-index: var(--z-ustu);
	display: grid;
	grid-template-rows: auto 1fr;
	background: var(--renk-beyaz);
	transform: translateX(100%);
	transition: transform var(--gecis-yavas);
	visibility: hidden;
}
.saha-mobil-menu[data-acik='1'] { transform: none; visibility: visible; }

/*
 * Yönetici çubuğu sabit konumludur ve panelin üstünü örter. Ziyaretçide bu
 * sorun yok ama geliştirme/önizleme sırasında logo ve kapat düğmesi kayboluyor.
 */
.admin-bar .saha-mobil-menu { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .saha-mobil-menu { top: 46px; }
}
.saha-mobil-menu__ust {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 76px;
	padding-inline: var(--kenar);
	border-bottom: 1px solid var(--renk-cizgi);
}
.saha-mobil-menu__govde {
	overflow-y: auto;
	padding: var(--bo-5) var(--kenar) calc(var(--bo-9) + env(safe-area-inset-bottom));
}
.saha-mobil-menu ul { list-style: none; padding: 0; margin: 0; }
.saha-mobil-menu > .saha-mobil-menu__govde > ul > li { border-bottom: 1px solid var(--renk-cizgi); }
.saha-mobil-menu a {
	display: block;
	padding: var(--bo-4) 0;
	font-family: var(--yazi-baslik);
	font-size: var(--ol-lg);
	font-weight: 600;
	color: var(--renk-metin);
	text-decoration: none;
	min-height: 48px;
}
/* Mobilde alt menü hep açık: iki kez dokunmak yerine tek kaydırma. */
.saha-mobil-menu .sub-menu {
	padding-left: var(--bo-4);
	padding-bottom: var(--bo-3);
	border-left: 2px solid var(--renk-cizgi);
	margin-left: var(--bo-1);
}
.saha-mobil-menu .sub-menu a {
	padding-block: var(--bo-3);
	font-size: var(--ol-md);
	font-weight: 500;
	color: var(--renk-metin-soluk);
}

.saha-altbilgi {
	background: var(--renk-koyu);
	color: color-mix(in srgb, var(--renk-beyaz) 76%, transparent);
	padding-block: var(--bo-8) var(--bo-5);
	/* Mobil eylem çubuğu içeriği örtmesin. */
	padding-bottom: calc(var(--bo-5) + var(--mobil-cubuk-yer, 0px));
}
.saha-altbilgi a { color: inherit; text-decoration: none; }
.saha-altbilgi a:hover { color: var(--renk-beyaz); }
.saha-altbilgi h3 {
	font-size: var(--ol-sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--renk-beyaz);
	margin-bottom: var(--bo-4);
}
/*
 * Altbilgi iletişim bağlantıları: metin gibi görünür ama dokunma alanı
 * butonla aynı (44px). Telefon numarasına parmakla isabet etmek mobilde
 * en sık kullanılan eylem.
 */
.saha-altbilgi__liste {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--bo-1);
	font-size: var(--ol-sm);
}
.saha-altbilgi__baglanti {
	justify-content: flex-start;
	min-height: 44px;
	padding: 0;
	font-family: var(--yazi-govde);
	font-size: inherit;
	font-weight: 400;
	color: inherit;
	border: 0;
	background: none;
}
.saha-altbilgi__baglanti:hover { color: var(--renk-beyaz); }
.saha-altbilgi__adres { padding-block: var(--bo-2); }

.saha-altbilgi__kunye {
	margin-top: var(--bo-6);
	padding-top: var(--bo-5);
	border-top: 1px solid var(--renk-cizgi-koyu);
	font-size: var(--ol-xs);
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-4);
	justify-content: space-between;
}

/* ==========================================================================
   7) Çerez onay bandı
   ========================================================================== */

/*
 * Mobil eylem çubuğunun ÜSTÜNDE konumlanır — ikisi birbirini örtmemeli.
 * Bu, brief'teki "form veya çerez paneli açıldığında çakışmamalı" maddesi.
 */
.saha-cerez {
	position: fixed;
	inset-inline: 0;
	bottom: calc(var(--mobil-cubuk-yer, 0px) + env(safe-area-inset-bottom));
	z-index: calc(var(--z-mobil) + 1);
	background: var(--renk-beyaz);
	border-top: 1px solid var(--renk-cizgi);
	box-shadow: 0 -4px 20px rgb(11 36 51 / 0.12);
}
.saha-cerez[hidden] { display: none; }

.saha-cerez__ic {
	display: grid;
	gap: var(--bo-4);
	width: 100%;
	max-width: var(--genislik);
	margin-inline: auto;
	padding: var(--bo-4) var(--kenar);
	max-height: 70vh;
	overflow-y: auto;
}
@media (min-width: 860px) {
	.saha-cerez__ic { grid-template-columns: 1fr auto; align-items: center; }
}

.saha-cerez__baslik { font-family: var(--yazi-baslik); font-weight: 700; }
.saha-cerez__metin { font-size: var(--ol-sm); color: var(--renk-metin-soluk); max-width: 72ch; }

.saha-cerez__secim { display: grid; gap: var(--bo-2); margin-top: var(--bo-4); }
.saha-cerez__secim label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--bo-3);
	align-items: start;
	font-size: var(--ol-sm);
}
.saha-cerez__secim input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--renk-vurgu); }

.saha-cerez__eylem { display: flex; flex-wrap: wrap; gap: var(--bo-2); align-items: center; }
.saha-cerez__bag {
	min-height: 48px;
	padding-inline: var(--bo-3);
	background: none;
	border: 0;
	font-size: var(--ol-sm);
	font-weight: 600;
	color: var(--renk-metin-soluk);
	text-decoration: underline;
}

/* ==========================================================================
   8) Mobil sabit eylem çubuğu
   ========================================================================== */

.saha-mobil-cubuk {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: var(--z-mobil);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: var(--renk-beyaz);
	border-top: 1px solid var(--renk-cizgi);
	/* Çentikli/gestür alanlı telefonlarda buton kenara yapışmasın. */
	padding-bottom: env(safe-area-inset-bottom);
	box-shadow: 0 -2px 12px rgb(11 36 51 / 0.08);
}

.saha-mobil-cubuk .saha-eylem {
	flex-direction: column;
	gap: 2px;
	min-height: 58px;
	padding: var(--bo-2);
	font-size: 0.6875rem;
	letter-spacing: 0.02em;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--renk-koyu);
}
.saha-mobil-cubuk .saha-eylem:not(:last-child) {
	border-right: 1px solid var(--renk-cizgi);
}
.saha-mobil-cubuk .saha-eylem--teklif {
	/* Koyu ton: çubuktaki 11px metin açık mavi üzerinde okunmuyordu (3.3:1). */
	background: var(--renk-vurgu-koyu);
	color: var(--renk-beyaz);
}

@media (min-width: 1200px) {
	.saha-mobil-cubuk { display: none; }
}

/* Çubuk görünürken sayfa sonunda içerik kalmasın diye gövdeye yer bırakılır. */
@media (max-width: 1199px) {
	body { --mobil-cubuk-yer: 58px; }
}