/* =========================================================================
   Pak Nakliyat – main.css
   Tasarım sistemi, temel düzen, header, mobil menü, footer, mobil alt çubuk.
   Tek kritik stil dosyası. Bileşen CSS'leri (form, harita, blog) ayrı yüklenir.

   İçindekiler
   1. Tasarım değişkenleri
   2. Sıfırlama ve temel
   3. Tipografi
   4. Düzen yardımcıları
   5. Butonlar, çipler, kartlar
   6. Header ve ana menü
   7. Mobil menü
   8. Sayfa başı ve içerik (prose)
   9. SSS akordeonu (core/details)
   10. CTA bandı
   11. Footer
   12. Mobil alt çubuk ve WhatsApp butonu
   13. Arama, sayfalama, 404, boş durum
   15–28. Ortak form alanları, breadcrumb, hero, hızlı arama, güven şeridi,
          kartlar, neden biz, süreç, form bölümü, yorumlar, SSS, bölgeler,
          blog kartı, iletişim bandı
   14. Erişilebilirlik ve hareket tercihleri (dosya sonunda kalır: ezsin)
   ========================================================================= */

/* 1. Tasarım değişkenleri ------------------------------------------------ */
:root {
	/* Renkler: Customizer (2. aşama) bu değerleri satır içi CSS ile ezer. */
	--renk-ana: #0F2A4A;
	--renk-ana-koyu: #0A1E36;
	--renk-ana-acik: #E7EDF5;
	--renk-vurgu: #F59E0B;
	--renk-vurgu-rgb: 245, 158, 11;
	--renk-vurgu-yazi: #0F2A4A;  /* vurgu zemini üzerindeki yazı (otomatik kontrast) */
	--renk-zemin: #F5F6F8;
	--renk-metin: #1F2937;
	--renk-ikincil: #6B7280;
	--renk-ikincil-acik: #5F6673; /* açık zeminde AA için bir ton koyu */
	--renk-cizgi: #E5E7EB;
	--renk-beyaz: #FFFFFF;
	/* Şartname #128C7E diyor; beyaz yazıyla 4,13:1 (AA altı). Bir ton koyusu 4,95:1. */
	--renk-wa: #107E71;
	--renk-wa-koyu: #0B6A5F;
	--renk-hata: #B42318;
	--renk-hata-zemin: #FEF3F2;
	--renk-basari: #067647;
	--renk-basari-zemin: #ECFDF3;
	--renk-bilgi-zemin: #EFF4FB;
	--renk-uyari-zemin: #FFF8EB;

	/* Bağlama göre değişen anlamsal renkler (açık zemin varsayılan). */
	--zemin: var(--renk-beyaz);
	--yazi: var(--renk-metin);
	--yazi-ikincil: var(--renk-ikincil);
	--baglanti: var(--renk-ana);
	--odak: var(--renk-ana);

	/* Fontlar: dosya varsa enqueue.php ailelerin başına Inter/Montserrat ekler. */
	--font-sistem: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--font-metin: var(--font-sistem);
	--font-baslik: var(--font-sistem);

	/* Akışkan tipografi. */
	--fs-kucuk: 0.875rem;
	--fs-govde: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--fs-buyuk: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	--fs-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	--fs-h3: clamp(1.1875rem, 1.08rem + 0.5vw, 1.4375rem);
	--fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	--fs-h1: clamp(1.875rem, 1.35rem + 2.5vw, 3.125rem);
	--sa-govde: 1.6;
	--sa-baslik: 1.2;

	/* 8px tabanlı boşluk ölçeği. */
	--b-1: 0.25rem;
	--b0: 0.5rem;
	--b1: 1rem;
	--b2: 1.5rem;
	--b3: 2rem;
	--b4: 2.5rem;
	--b5: 3rem;
	--b6: 4rem;
	--bolum: 3.5rem;            /* ~56px mobil */

	/* Bileşenler. */
	--kap: 1200px;
	--kap-dar: 760px;
	--kap-bosluk: clamp(1rem, 4vw, 1.5rem);
	--radius: 12px;
	--radius-k: 8px;
	--radius-tam: 999px;
	--golge-1: 0 1px 2px rgba(15, 42, 74, 0.06), 0 1px 3px rgba(15, 42, 74, 0.08);
	--golge-2: 0 4px 6px -1px rgba(15, 42, 74, 0.08), 0 10px 24px -6px rgba(15, 42, 74, 0.14);
	--golge-3: 0 20px 40px -12px rgba(15, 42, 74, 0.28);
	--gecis: 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
	--dokunma: 48px;

	/* Sabit öğe yükseklikleri. */
	--header-h: 60px;
	--alt-cubuk-h: calc(60px + env(safe-area-inset-bottom, 0px));
	--admin-bar: 0px;
}

@media (min-width: 960px) {
	:root {
		--header-h: 80px;
		--alt-cubuk-h: 0px;
		--bolum: 6rem;              /* ~96px masaüstü */
	}
}

/* Koyu (lacivert) bölümler: içindeki anlamsal renkler tersine döner. */
.koyu {
	--zemin: var(--renk-ana);
	--yazi: var(--renk-beyaz);
	--yazi-ikincil: rgba(255, 255, 255, 0.78);
	--baglanti: var(--renk-beyaz);
	--odak: var(--renk-vurgu);
	--renk-cizgi: rgba(255, 255, 255, 0.14);
	background-color: var(--zemin);
	color: var(--yazi);
}

/* Açık gri zeminde #6B7280 kontrastı 4.47:1'e düşer; AA için bir ton koyulaştırılır. */
.acik-zemin {
	--zemin: var(--renk-zemin);
	--yazi-ikincil: var(--renk-ikincil-acik);
	background-color: var(--zemin);
}

/* 2. Sıfırlama ve temel -------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + var(--admin-bar) + 16px);
	scroll-behavior: smooth;
	hanging-punctuation: first last;
}

body {
	margin: 0;
	padding-top: var(--header-h);
	padding-bottom: var(--alt-cubuk-h);
	min-height: 100vh;
	min-height: 100dvh;
	font-family: var(--font-metin);
	font-size: var(--fs-govde);
	line-height: var(--sa-govde);
	color: var(--renk-metin);
	background-color: var(--renk-beyaz);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

body.admin-bar {
	--admin-bar: 32px;
}

/* Mobilde araç çubuğu 46px. (600px altında çubuk sayfayla kayar; yalnız giriş
   yapmış kullanıcıyı etkileyen küçük bir boşluk kabul edilir.) */
@media (max-width: 782px) {
	body.admin-bar {
		--admin-bar: 46px;
	}
}

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

img,
video {
	height: auto;
}

svg.ikon {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
}

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

button {
	cursor: pointer;
}

a {
	color: var(--baglanti);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	text-decoration-thickness: 2px;
}

hr {
	border: 0;
	border-top: 1px solid var(--renk-cizgi);
	margin: var(--b3) 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* 3. Tipografi ----------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--b1);
	font-family: var(--font-baslik);
	font-weight: 700;
	line-height: var(--sa-baslik);
	letter-spacing: -0.01em;
	color: inherit;
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5,
h6 { font-size: var(--fs-govde); }

p,
ul,
ol,
dl,
blockquote,
figure,
table {
	margin: 0 0 var(--b1);
}

p {
	text-wrap: pretty;
}

strong,
b {
	font-weight: 600;
}

small {
	font-size: var(--fs-kucuk);
}

.ust-baslik {
	display: inline-block;
	margin-bottom: var(--b0);
	font-size: var(--fs-kucuk);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--yazi-ikincil);
}

.koyu .ust-baslik {
	color: var(--renk-vurgu);
}

.kucuk-baslik {
	font-size: var(--fs-h4);
	margin-bottom: var(--b1);
}

.giris-metni {
	font-size: var(--fs-buyuk);
	color: var(--yazi-ikincil);
	max-width: 62ch;
}

/* Turuncu metin açık zeminde AA'yı geçmez; yalnız koyu zeminde vurgu rengi olur. */
.vurgu-metin {
	font-weight: 600;
	color: var(--renk-ana);
}

.koyu .vurgu-metin {
	color: var(--renk-vurgu);
}

/* 4. Düzen yardımcıları -------------------------------------------------- */
.kap {
	width: 100%;
	max-width: calc(var(--kap) + 2 * var(--kap-bosluk));
	margin-inline: auto;
	padding-inline: max(var(--kap-bosluk), env(safe-area-inset-left, 0px));
}

.kap--dar {
	max-width: calc(var(--kap-dar) + 2 * var(--kap-bosluk));
}

.bolum {
	padding-block: var(--bolum);
}

.bolum--ust-dar {
	padding-top: var(--b3);
}

.bolum__bas {
	max-width: 720px;
	margin-bottom: var(--b4);
}

.bolum__bas--orta {
	margin-inline: auto;
	text-align: center;
}

.bolum__bas--orta .giris-metni {
	margin-inline: auto;
}

.izgara {
	display: grid;
	gap: var(--b2);
}

@media (min-width: 640px) {
	.izgara--2,
	.izgara--3,
	.izgara--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.izgara--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.izgara--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Yatay kaydırmalı liste (CSS scroll-snap; otomatik dönen slider yok). */
.kaydir {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(260px, 82%);
	gap: var(--b1);
	margin: 0;
	padding: 0 0 var(--b1);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--kap-bosluk);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.kaydir > * {
	scroll-snap-align: start;
}

@media (min-width: 640px) {
	.kaydir {
		grid-auto-columns: minmax(280px, 44%);
	}
}

@media (min-width: 960px) {
	.kaydir {
		grid-auto-columns: calc((100% - 2 * var(--b1)) / 3);
	}
}

/* Sabit oranlı görsel/yer tutucu: CLS sıfır. */
.oran {
	position: relative;
	aspect-ratio: var(--oran, 16 / 10);
	overflow: hidden;
	border-radius: var(--radius);
	background-color: var(--renk-ana-acik);
}

.oran > img,
.oran > video,
.oran > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Fotoğraf eklenene kadar şık yer tutucu. */
.yer-tutucu {
	display: grid;
	place-items: center;
	color: var(--renk-ana);
	background:
		radial-gradient(120% 120% at 100% 0%, rgba(var(--renk-vurgu-rgb),0.16), transparent 55%),
		linear-gradient(135deg, var(--renk-ana-acik), #F8FAFC);
}

.yer-tutucu .ikon {
	width: 48px;
	height: 48px;
	opacity: 0.55;
}

/* 5. Butonlar, çipler, kartlar ------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: var(--dokunma);
	padding: 0.625rem 1.25rem;
	border: 2px solid transparent;
	border-radius: var(--radius-k);
	font-family: var(--font-metin);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform var(--gecis), box-shadow var(--gecis), background-color var(--gecis), border-color var(--gecis), color var(--gecis);
	-webkit-tap-highlight-color: transparent;
}

.btn:hover {
	text-decoration: none;
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
}

.btn[disabled],
.btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

.btn--birincil {
	background-color: var(--renk-vurgu);
	color: var(--renk-vurgu-yazi);
	box-shadow: 0 2px 0 rgba(15, 42, 74, 0.12);
}

.btn--birincil:hover {
	box-shadow: var(--golge-2);
	color: var(--renk-vurgu-yazi);
}

.btn--koyu {
	background-color: var(--renk-ana);
	color: var(--renk-beyaz);
}

.btn--koyu:hover {
	background-color: var(--renk-ana-koyu);
	color: var(--renk-beyaz);
}

.btn--cizgi {
	border-color: currentColor;
	background-color: transparent;
	color: var(--renk-ana);
}

.btn--cizgi:hover {
	background-color: var(--renk-ana);
	border-color: var(--renk-ana);
	color: var(--renk-beyaz);
}

.btn--cizgi-acik {
	border-color: rgba(255, 255, 255, 0.55);
	background-color: transparent;
	color: var(--renk-beyaz);
}

.btn--cizgi-acik:hover {
	border-color: var(--renk-beyaz);
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--renk-beyaz);
}

.btn--wa {
	background-color: var(--renk-wa);
	color: var(--renk-beyaz);
}

.btn--wa:hover {
	background-color: var(--renk-wa-koyu);
	color: var(--renk-beyaz);
}

.btn--metin {
	min-height: auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--baglanti);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.btn--metin:hover {
	transform: none;
}

.btn--buyuk {
	min-height: 56px;
	padding: 0.875rem 1.75rem;
	font-size: 1.0625rem;
}

.btn--blok {
	display: flex;
	width: 100%;
}

/* Güven çipi. */
.cip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 36px;
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-tam);
	background-color: var(--renk-beyaz);
	font-size: var(--fs-kucuk);
	font-weight: 600;
	color: var(--renk-ana);
	white-space: nowrap;
}

.cip .ikon {
	width: 18px;
	height: 18px;
	color: var(--renk-vurgu);
}

.koyu .cip {
	border-color: rgba(255, 255, 255, 0.18);
	background-color: rgba(255, 255, 255, 0.06);
	color: var(--renk-beyaz);
}

/* Kart. */
.kart {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius);
	background-color: var(--renk-beyaz);
	color: var(--renk-metin);
	box-shadow: var(--golge-1);
	transition: transform var(--gecis), box-shadow var(--gecis);
}

.kart:hover {
	transform: translateY(-2px);
	box-shadow: var(--golge-2);
}

.kart__gorsel {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--renk-ana-acik);
}

.kart__gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kart__govde {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--b0);
	padding: var(--b2);
}

.kart__baslik {
	margin: 0;
	font-size: var(--fs-h4);
}

.kart__baslik a {
	color: inherit;
	text-decoration: none;
}

/* Kartın tamamı tıklanabilir; erişilebilir ad başlık bağlantısından gelir. */
.kart__baslik a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.kart__metin {
	margin: 0;
	color: var(--renk-ikincil);
}

.kart__eylem {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding-top: var(--b0);
}

.ikon-cerceve {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-k);
	background-color: var(--renk-ana-acik);
	color: var(--renk-ana);
}

.koyu .ikon-cerceve {
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--renk-vurgu);
}

/* 6. Header ve ana menü -------------------------------------------------- */
/*
 * Header sabittir (fixed) ve gövdede sabit boşluk ayrılır. Kaydırınca küçülme
 * yalnızca transform ile yapılır: düzen değişmez, CLS oluşmaz.
 */
.site-header {
	position: fixed;
	top: var(--admin-bar);
	right: 0;
	left: 0;
	z-index: 100;
	height: var(--header-h);
	background-color: rgba(255, 255, 255, 0.97);
	border-bottom: 1px solid transparent;
	transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
	will-change: transform;
}

@supports (backdrop-filter: blur(8px)) {
	.site-header {
		background-color: rgba(255, 255, 255, 0.9);
		backdrop-filter: saturate(1.4) blur(10px);
	}
}

.site-header__ic {
	display: flex;
	align-items: center;
	gap: var(--b2);
	height: 100%;
	transition: transform var(--gecis);
}

@media (min-width: 960px) {
	.site-header.kucuk {
		transform: translateY(-14px);
		box-shadow: var(--golge-1);
		border-bottom-color: var(--renk-cizgi);
	}

	.site-header.kucuk .site-header__ic {
		transform: translateY(7px);
	}

	.site-header.kucuk .logo {
		transform: scale(0.9);
	}
}

@media (max-width: 959px) {
	.site-header.kucuk {
		box-shadow: var(--golge-1);
		border-bottom-color: var(--renk-cizgi);
	}
}

.header-isaret {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 24px;
	pointer-events: none;
}

/* Logo */
.logo {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.6rem;
	color: var(--renk-ana);
	text-decoration: none;
	transform-origin: left center;
	transition: transform var(--gecis);
}

.logo:hover {
	text-decoration: none;
}

.logo__ikon {
	width: 36px;
	height: 36px;
}

.logo__zemin {
	fill: var(--renk-vurgu);
}

.logo__cizgi {
	stroke: var(--renk-vurgu-yazi);
}

.logo__yazi {
	font-family: var(--font-baslik);
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1;
	white-space: nowrap;
}

.logo__yazi b {
	font-weight: 700;
}

.logo__gorsel {
	width: auto;
	max-width: 200px;
	max-height: 44px;
}

.logo--acik {
	color: var(--renk-beyaz);
}

@media (min-width: 960px) {
	.logo__ikon {
		width: 40px;
		height: 40px;
	}

	.logo__yazi {
		font-size: 1.375rem;
	}

	.logo__gorsel {
		max-height: 52px;
	}
}

/* Ana menü (masaüstü) */
.ana-nav {
	display: none;
}

@media (min-width: 960px) {
	.ana-nav {
		display: block;
		margin-left: var(--b1);
	}
}

.ana-menu {
	display: flex;
	align-items: center;
	gap: var(--b-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ana-menu > li {
	position: relative;
	display: flex;
	align-items: center;
}

.ana-menu a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius-k);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--renk-metin);
	text-decoration: none;
	transition: color var(--gecis), background-color var(--gecis);
}

.ana-menu a:hover,
.ana-menu .current-menu-item > a,
.ana-menu .current-menu-ancestor > a,
.ana-menu .current_page_item > a {
	color: var(--renk-ana);
	background-color: var(--renk-zemin);
}

.ana-menu .menu-item-has-children > a {
	padding-right: 0.25rem;
}

.alt-ac {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--radius-k);
	background: none;
	color: var(--renk-ikincil);
}

.alt-ac .ikon {
	transition: transform var(--gecis);
}

.alt-ac[aria-expanded="true"] .ikon {
	transform: rotate(180deg);
}

.ana-menu .sub-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 10;
	min-width: 260px;
	margin: 0;
	padding: var(--b0);
	list-style: none;
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius);
	background-color: var(--renk-beyaz);
	box-shadow: var(--golge-3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--gecis), transform var(--gecis), visibility 0s linear 180ms;
}

/* Fare ile üzerine gelince ve düğmeyle açılınca görünür. */
@media (hover: hover) {
	.ana-menu > li:hover > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition-delay: 0s;
	}
}

.ana-menu > li.acik > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

.ana-menu .sub-menu a {
	display: flex;
	width: 100%;
	font-weight: 500;
}

/* Header eylemleri */
.site-header__eylem {
	display: flex;
	align-items: center;
	gap: var(--b1);
	margin-left: auto;
}

.header-tel {
	display: none;
	align-items: center;
	gap: 0.6rem;
	min-height: var(--dokunma);
	color: var(--renk-ana);
	text-decoration: none;
}

.header-tel:hover {
	text-decoration: none;
}

.header-tel__ikon {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--renk-ana-acik);
	color: var(--renk-ana);
}

.header-tel__metin {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.header-tel__etiket {
	font-size: 0.75rem;
	color: var(--renk-ikincil);
}

.header-tel__no {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.header-teklif {
	display: none;
}

@media (min-width: 1100px) {
	.header-tel {
		display: inline-flex;
	}
}

@media (min-width: 960px) {
	.header-teklif {
		display: inline-flex;
	}
}

.menu-dugme {
	display: inline-grid;
	place-items: center;
	width: var(--dokunma);
	height: var(--dokunma);
	margin-right: -8px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-k);
	background: none;
	color: var(--renk-ana);
}

@media (min-width: 960px) {
	.site-header .menu-dugme {
		display: none;
	}
}

/* Sade header (Teklif Al açılış sayfası): mobilde de telefon görünür. */
.site-header--sade .header-tel {
	display: inline-flex;
}

.site-header--sade .header-wa {
	min-height: 44px;
	padding-inline: 0.875rem;
}

@media (max-width: 599px) {
	.site-header--sade .header-tel__metin,
	.site-header--sade .header-wa span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.site-header--sade .header-wa {
		width: 44px;
		padding: 0;
	}
}

/* 7. Mobil menü (<dialog>) ----------------------------------------------- */
.mobil-menu {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0 var(--kap-bosluk) calc(var(--b3) + env(safe-area-inset-bottom, 0px));
	border: 0;
	background-color: var(--renk-beyaz);
	color: var(--renk-metin);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mobil-menu[open] {
	display: flex;
	flex-direction: column;
	animation: menu-gir 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.mobil-menu::backdrop {
	background-color: rgba(10, 30, 54, 0.4);
}

@keyframes menu-gir {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

html.menu-acik {
	overflow: hidden;
}

.mobil-menu__ust {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 60px;
	background-color: var(--renk-beyaz);
	border-bottom: 1px solid var(--renk-cizgi);
}

.mobil-menu__nav {
	padding-block: var(--b1);
}

.mobil-menu__liste,
.mobil-menu__liste .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobil-menu__liste > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--renk-cizgi);
}

.mobil-menu__liste > li > a {
	flex: 1;
	display: flex;
	align-items: center;
	min-height: 56px;
	font-family: var(--font-baslik);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--renk-ana);
	text-decoration: none;
}

.mobil-menu__liste .alt-ac {
	width: var(--dokunma);
	height: var(--dokunma);
}

.mobil-menu__liste .sub-menu {
	display: none;
	flex-basis: 100%;
	padding-bottom: var(--b0);
}

.mobil-menu__liste li.acik > .sub-menu {
	display: block;
}

.mobil-menu__liste .sub-menu a {
	display: flex;
	align-items: center;
	min-height: var(--dokunma);
	padding-left: var(--b1);
	font-size: 1.0625rem;
	color: var(--renk-metin);
	text-decoration: none;
}

.mobil-menu__alt {
	display: grid;
	gap: var(--b1);
	margin-top: auto;
	padding-top: var(--b2);
}

.mobil-menu__iletisim {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--b0);
}

.mobil-menu__saat {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--b0);
	margin: 0;
	font-size: var(--fs-kucuk);
	color: var(--renk-ikincil);
}

/* 8. Sayfa başı ve içerik ------------------------------------------------ */
.sayfa-basi {
	padding-block: var(--b3) var(--b4);
	background-color: var(--renk-zemin);
	--yazi-ikincil: var(--renk-ikincil-acik);
}

.sayfa-basi__baslik {
	margin: 0;
	max-width: 28ch;
}

.sayfa-basi__ozet {
	margin: var(--b1) 0 0;
	max-width: 62ch;
	font-size: var(--fs-buyuk);
	color: var(--yazi-ikincil);
}

.sayfa__gorsel {
	margin: 0 0 var(--b3);
	overflow: hidden;
	border-radius: var(--radius);
}

/* Okunaklı içerik alanı (sayfalar; blog 13. aşamada genişletilir). */
.icerik {
	max-width: 72ch;
}

.icerik > * + * {
	margin-top: var(--b1);
}

.icerik > :first-child {
	margin-top: 0;
}

.icerik h2 {
	margin-top: var(--b4);
}

.icerik h3 {
	margin-top: var(--b3);
}

.icerik h2 + *,
.icerik h3 + * {
	margin-top: 0;
}

.icerik ul,
.icerik ol {
	padding-left: 1.4em;
}

.icerik li + li {
	margin-top: 0.35em;
}

.icerik li::marker {
	color: var(--renk-ana);
}

.icerik blockquote {
	margin-inline: 0;
	padding: var(--b1) var(--b2);
	border-left: 4px solid var(--renk-vurgu);
	border-radius: 0 var(--radius-k) var(--radius-k) 0;
	background-color: var(--renk-zemin);
	font-size: var(--fs-buyuk);
}

.icerik blockquote p:last-child {
	margin-bottom: 0;
}

.icerik img {
	border-radius: var(--radius-k);
}

.icerik figcaption,
.wp-element-caption {
	margin-top: var(--b0);
	font-size: var(--fs-kucuk);
	color: var(--renk-ikincil);
	text-align: center;
}

/* Tablolar mobilde yatay kayar. */
.icerik .wp-block-table,
.icerik .tablo-sar {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.icerik table {
	min-width: 520px;
	font-size: 0.9375rem;
}

.icerik th,
.icerik td {
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--renk-cizgi);
	text-align: left;
	vertical-align: top;
}

.icerik th {
	background-color: var(--renk-zemin);
	font-weight: 600;
}

.alignwide,
.alignfull {
	max-width: none;
}

.aligncenter {
	margin-inline: auto;
}

.sayfa-baglantilari {
	display: flex;
	gap: var(--b0);
	margin-top: var(--b3);
}

/* Editör blok stilleri: Bilgi / Uyarı / İpucu kutusu (paragraf ve grup). */
.icerik [class*="is-style-"][class*="-kutusu"] {
	padding: var(--b1) var(--b2);
	border-left: 4px solid var(--kutu-cizgi);
	border-radius: 0 var(--radius-k) var(--radius-k) 0;
	background-color: var(--kutu-zemin);
	color: var(--renk-metin);
}

.icerik .is-style-bilgi-kutusu {
	--kutu-zemin: var(--renk-bilgi-zemin);
	--kutu-cizgi: var(--renk-ana);
}

.icerik .is-style-uyari-kutusu {
	--kutu-zemin: var(--renk-uyari-zemin);
	--kutu-cizgi: var(--renk-vurgu);
}

.icerik .is-style-ipucu-kutusu {
	--kutu-zemin: var(--renk-basari-zemin);
	--kutu-cizgi: var(--renk-basari);
}

.icerik [class*="-kutusu"] > :first-child {
	margin-top: 0;
}

.icerik [class*="-kutusu"] > * + * {
	margin-top: var(--b0);
}

/* 9. SSS akordeonu (core/details) ---------------------------------------- */
/* Ayrıntılar bloğu her yerde akordeon görünür; JS gerekmez. */
.wp-block-details,
.sss-oge {
	margin: 0;
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius);
	background-color: var(--renk-beyaz);
	transition: box-shadow var(--gecis), border-color var(--gecis);
}

.wp-block-details + .wp-block-details,
.sss-oge + .sss-oge {
	margin-top: var(--b0);
}

.wp-block-details[open],
.sss-oge[open] {
	border-color: rgba(15, 42, 74, 0.24);
	box-shadow: var(--golge-1);
}

.wp-block-details > summary,
.sss-oge > summary {
	position: relative;
	display: block;
	min-height: var(--dokunma);
	padding: var(--b1) calc(var(--b1) + 40px) var(--b1) var(--b2);
	font-family: var(--font-baslik);
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.35;
	color: var(--renk-ana);
	list-style: none;
	cursor: pointer;
}

.wp-block-details > summary::-webkit-details-marker,
.sss-oge > summary::-webkit-details-marker {
	display: none;
}

/* Artı → çarpı işareti (yalnızca transform). */
.wp-block-details > summary::before,
.wp-block-details > summary::after,
.sss-oge > summary::before,
.sss-oge > summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--b2);
	width: 14px;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background-color: var(--renk-vurgu);
	transition: transform var(--gecis);
}

.wp-block-details > summary::after,
.sss-oge > summary::after {
	transform: rotate(90deg);
}

.wp-block-details[open] > summary::after,
.sss-oge[open] > summary::after {
	transform: rotate(0deg);
}

.wp-block-details > :not(summary),
.sss-oge__cevap {
	padding: 0 var(--b2) var(--b2);
	color: var(--renk-metin);
}

.wp-block-details > :not(summary) + :not(summary) {
	padding-top: 0;
}

/* 10. CTA bandı ---------------------------------------------------------- */
.cta-bandi {
	position: relative;
	overflow: hidden;
	padding-block: var(--b5);
	background:
		radial-gradient(70% 140% at 100% 0%, rgba(var(--renk-vurgu-rgb),0.18), transparent 60%),
		var(--renk-ana);
}

.cta-bandi__ic {
	display: grid;
	gap: var(--b2);
	align-items: center;
}

.cta-bandi__baslik {
	margin-bottom: var(--b0);
}

.cta-bandi__metin p {
	margin: 0;
	color: var(--yazi-ikincil);
}

.cta-bandi__eylem {
	display: flex;
	flex-wrap: wrap;
	gap: var(--b0);
}

@media (max-width: 599px) {
	.cta-bandi__eylem .btn {
		flex: 1 1 100%;
	}

	.cta-bandi__eylem .btn--cizgi-acik,
	.cta-bandi__eylem .btn--wa {
		flex-basis: calc(50% - var(--b0) / 2);
	}
}

@media (min-width: 960px) {
	.cta-bandi {
		padding-block: var(--b6);
	}

	.cta-bandi__ic {
		grid-template-columns: 1fr auto;
		gap: var(--b5);
	}
}

/* 11. Footer ------------------------------------------------------------- */
.site-footer {
	font-size: 0.9375rem;
}

.site-footer a {
	color: var(--yazi-ikincil);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--renk-beyaz);
	text-decoration: underline;
}

.site-footer__ust {
	display: grid;
	gap: var(--b4);
	padding-block: var(--b6) var(--b4);
}

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

	.site-footer__marka {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.site-footer__ust {
		grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
		gap: var(--b5);
	}

	.site-footer__marka {
		grid-column: auto;
	}
}

.site-footer__tanitim {
	margin: var(--b2) 0;
	max-width: 42ch;
	color: var(--yazi-ikincil);
}

.iletisim-listesi {
	display: grid;
	gap: var(--b0);
	margin: 0;
	padding: 0;
	list-style: none;
}

.iletisim-listesi li {
	display: flex;
	align-items: center;
	gap: var(--b0);
	min-height: 32px;
}

.iletisim-listesi .ikon {
	color: var(--renk-vurgu);
}

.site-footer .iletisim-listesi .vurgu-metin {
	font-size: 1.0625rem;
	color: var(--renk-vurgu);
}

.site-footer__baslik {
	margin-bottom: var(--b1);
	font-size: 1rem;
	letter-spacing: 0.02em;
	color: var(--renk-beyaz);
}

.site-footer__kolon ul {
	display: grid;
	gap: 0.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__kolon a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
}

.site-footer__alt {
	border-top: 1px solid var(--renk-cizgi);
}

.site-footer__alt-ic {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--b0) var(--b2);
	padding-block: var(--b2);
	font-size: var(--fs-kucuk);
	color: var(--yazi-ikincil);
}

.site-footer__telif {
	margin: 0;
}

.hukuki-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--b-1) var(--b2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hukuki-menu a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

/* Hukuki bağlantılar + "Çerez Tercihleri" düğmesi aynı satırda. */
.site-footer__hukuki {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--b-1) var(--b2);
}

.site-footer__hukuki .cerez-tercih {
	min-height: 32px;
	text-decoration: none;
}

.site-footer__hukuki .cerez-tercih:hover {
	text-decoration: underline;
}

/* 12. Mobil alt çubuk ve WhatsApp butonu --------------------------------- */
.mobil-cubuk {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 90;
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: var(--alt-cubuk-h);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	box-shadow: 0 -4px 16px rgba(15, 42, 74, 0.14);
	transition: transform 200ms ease;
}

.mobil-cubuk a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 60px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--renk-beyaz);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.mobil-cubuk a:active {
	filter: brightness(0.92);
}

.mobil-cubuk__ara {
	background-color: var(--renk-ana);
}

.mobil-cubuk__wa {
	background-color: var(--renk-wa);
}

/* Tek bağlantı varsa tam genişlik. */
.mobil-cubuk a:only-child {
	grid-column: 1 / -1;
}

/* Klavye açıkken, form odak modunda ve menü açıkken gizlenir. */
.klavye-acik .mobil-cubuk,
.odak-modu .mobil-cubuk,
.menu-acik .mobil-cubuk {
	transform: translateY(110%);
}

.klavye-acik body,
.odak-modu body {
	padding-bottom: 0;
}

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

.wa-buton {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	display: none;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: var(--renk-wa);
	color: var(--renk-beyaz);
	box-shadow: var(--golge-3);
	transition: transform var(--gecis), background-color var(--gecis);
}

.wa-buton:hover {
	transform: scale(1.06);
	background-color: var(--renk-wa-koyu);
	color: var(--renk-beyaz);
}

@media (min-width: 960px) {
	.wa-buton {
		display: grid;
	}
}

/* Sade açılış sayfasında header'da WhatsApp zaten var. */
.sade-sayfa .wa-buton {
	display: none;
}

/* 13. Arama, sayfalama, 404, boş durum ----------------------------------- */
.arama-formu {
	display: flex;
	gap: var(--b0);
	max-width: 520px;
}

.arama-formu__alan {
	flex: 1;
	min-width: 0;
	min-height: var(--dokunma);
	padding: 0.625rem 1rem;
	border: 1px solid #C9CED6;
	border-radius: var(--radius-k);
	background-color: var(--renk-beyaz);
	font-size: 1rem; /* iOS yakınlaştırmasın */
}

.arama-formu__dugme {
	width: var(--dokunma);
	padding: 0;
}

.sayfalama {
	margin-top: var(--b5);
}

.sayfalama .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--b-1);
}

.sayfalama .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 0.75rem;
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-k);
	font-weight: 600;
	color: var(--renk-ana);
	text-decoration: none;
}

.sayfalama .page-numbers:hover {
	border-color: var(--renk-ana);
}

.sayfalama .page-numbers.current {
	border-color: var(--renk-ana);
	background-color: var(--renk-ana);
	color: var(--renk-beyaz);
}

.sayfalama .page-numbers.dots {
	border: 0;
}

.hata-sayfasi {
	padding-block: var(--b6) var(--b3);
	text-align: center;
	background-color: var(--renk-zemin);
	--yazi-ikincil: var(--renk-ikincil-acik);
}

.hata-sayfasi .ust-baslik {
	font-size: 1rem;
	color: var(--renk-ana);
}

.hata-sayfasi__metin {
	margin-inline: auto;
	max-width: 52ch;
	color: var(--yazi-ikincil);
}

.hata-sayfasi .arama-formu {
	margin: var(--b3) auto 0;
}

.ok-listesi {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ok-listesi li {
	border-bottom: 1px solid var(--renk-cizgi);
}

.ok-listesi a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--dokunma);
	color: var(--renk-ana);
	font-weight: 600;
	text-decoration: none;
}

.ok-listesi a::after {
	content: "→";
	color: var(--renk-vurgu);
	transition: transform var(--gecis);
}

.ok-listesi a:hover::after {
	transform: translateX(4px);
}

.bos-durum {
	padding: var(--b5) var(--b2);
	border: 1px dashed var(--renk-cizgi);
	border-radius: var(--radius);
	text-align: center;
}

.bos-durum .arama-formu {
	margin-inline: auto;
}

/* Tek sütunlu grid'ler içeriğin en geniş satırına göre büyüyüp sayfayı taşırmasın.
   :where() özgüllüğü sıfırdır; çok sütunlu medya kuralları her zaman bunu ezer. */
:where(.izgara, .form-bolumu__ic, .bolgeler, .sss-bolumu, .iletisim-cta__ic, .cta-bandi__ic, .site-footer__ust) {
	grid-template-columns: minmax(0, 1fr);
}

/* 15. Form alanları (ortak) ----------------------------------------------- */
.alan {
	display: block;
	width: 100%;
	min-height: var(--dokunma);
	padding: 0.6875rem 0.875rem;
	border: 1px solid #C2C8D0;
	border-radius: var(--radius-k);
	background-color: var(--renk-beyaz);
	color: var(--renk-metin);
	font-size: 1rem; /* 16px: iOS yakınlaştırmasın */
	line-height: 1.4;
	transition: border-color var(--gecis), box-shadow var(--gecis);
}

.alan::placeholder {
	color: #7A828E;
	opacity: 1;
}

.alan:hover {
	border-color: #98A1AD;
}

.alan:focus {
	outline: none;
	border-color: var(--renk-ana);
	box-shadow: 0 0 0 3px rgba(15, 42, 74, 0.18);
}

.alan[aria-invalid="true"] {
	border-color: var(--renk-hata);
}

/* Bal tuzağı alanı: ekran dışı (display:none bazı botlarca atlanır). */
.pak-bal {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.btn--kucuk {
	min-height: 40px;
	padding: 0.5rem 0.875rem;
	font-size: 0.9375rem;
}

.ok-baglanti {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 44px;
	font-weight: 600;
	color: var(--baglanti);
	text-decoration: none;
}

.ok-baglanti:hover {
	text-decoration: underline;
}

.ok-baglanti .ikon {
	transition: transform var(--gecis);
}

.ok-baglanti:hover .ikon {
	transform: translateX(3px);
}

.bolum__bas--yan {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--b1) var(--b3);
	max-width: none;
}

.bolum__bas--yan h2 {
	margin-bottom: 0;
}

.bolum__bas h2 {
	margin-bottom: var(--b0);
}

/* Form hata kutusu (JS'siz dönüş ve 8B AJAX hataları): her zaman Ara/WhatsApp. */
.form-hata-kutusu {
	display: grid;
	gap: var(--b0);
	margin-bottom: var(--b1);
	padding: var(--b1);
	border-left: 4px solid var(--renk-hata);
	border-radius: var(--radius-k);
	background-color: var(--renk-hata-zemin);
	color: var(--renk-metin);
}

.form-hata-kutusu p {
	margin: 0;
}

.form-hata-kutusu__kapilar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--b0);
}

/* Devam şeridi (yarım form; formun olmadığı sayfalarda). Sabit konum: akışı itmez (CLS yok). */
.devam-seridi {
	position: fixed;
	right: 12px;
	bottom: calc(var(--alt-cubuk-h) + 12px);
	left: 12px;
	z-index: 90;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 3rem 0.75rem 1rem;
	border-radius: var(--radius);
	background-color: var(--renk-ana);
	color: var(--renk-beyaz);
	box-shadow: var(--golge-3);
	animation: devam-gir 0.3s ease-out;
}

.devam-seridi__metin {
	flex: 1 1 100%;
	margin: 0;
	font-weight: 600;
}

.devam-seridi__kapat {
	position: absolute;
	top: 0.25rem;
	right: 0.25rem;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--renk-beyaz);
	cursor: pointer;
}

.cerez-acik .devam-seridi,
.klavye-acik .devam-seridi,
.odak-modu .devam-seridi,
.menu-acik .devam-seridi {
	display: none;
}

@keyframes devam-gir {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

@media (min-width: 960px) {
	/* Masaüstünde sol altta (sağ altta WhatsApp butonu var). */
	.devam-seridi {
		right: auto;
		bottom: 24px;
		left: 24px;
		max-width: 26rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.devam-seridi {
		animation: none;
	}
}

/* Çerez bandı: sabit (akışı itmez), mobilde alt çubuğun üstünde. "Kabul Et" ve "Reddet" eşit. */
.cerez-bandi {
	position: fixed;
	right: 12px;
	bottom: calc(var(--alt-cubuk-h) + 12px);
	left: 12px;
	z-index: 95;
	display: grid;
	gap: var(--b1);
	padding: var(--b1) var(--b2);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius);
	background-color: var(--renk-beyaz);
	color: var(--renk-metin);
	box-shadow: var(--golge-3);
	font-size: var(--fs-kucuk);
}

.cerez-bandi[hidden] {
	display: none;
}

.cerez-bandi p {
	margin: 0;
}

.cerez-bandi__baslik {
	margin-bottom: 0.25rem !important;
	font-weight: 700;
	color: var(--renk-ana);
}

.cerez-bandi a {
	color: var(--renk-ana);
	font-weight: 600;
}

.cerez-bandi__dugmeler {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--b0);
}

/* İki düğme aynı görünüm: tercih yönlendirilmez. */
.cerez-bandi__dugme {
	border-color: var(--renk-ana);
	background-color: var(--renk-ana);
	color: var(--renk-beyaz);
}

.cerez-bandi__dugme:hover {
	background-color: var(--renk-ana-koyu);
	color: var(--renk-beyaz);
}

.odak-modu .cerez-bandi,
.klavye-acik .cerez-bandi {
	display: none;
}

@media (min-width: 960px) {
	.cerez-bandi {
		right: auto;
		bottom: 24px;
		left: 24px;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		max-width: 46rem;
	}

	.cerez-bandi__dugmeler {
		grid-template-columns: repeat(2, minmax(7.5rem, auto));
	}
}

.cerez-tercih {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	cursor: pointer;
}

/* 16. Breadcrumb ---------------------------------------------------------- */
.breadcrumb {
	margin-bottom: var(--b1);
	font-size: var(--fs-kucuk);
	color: var(--yazi-ikincil);
}

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumb li {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.breadcrumb li + li::before {
	content: "›";
	color: var(--yazi-ikincil);
	opacity: 0.8;
}

.breadcrumb a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--yazi-ikincil);
	text-decoration: none;
}

.breadcrumb a:hover {
	color: var(--baglanti);
	text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
	font-weight: 600;
	color: var(--yazi);
}

/* 17. Hero ---------------------------------------------------------------- */
.hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--b4) var(--b5);
	background:
		radial-gradient(60% 80% at 100% 0%, rgba(var(--renk-vurgu-rgb), 0.16), transparent 60%),
		radial-gradient(50% 60% at 0% 100%, rgba(255, 255, 255, 0.06), transparent 70%),
		var(--renk-ana);
}

.hero__ic {
	display: grid;
	gap: var(--b3);
	/* minmax(0,1fr): kaydırılabilir çip satırı sütunu genişletip sayfayı taşırmasın. */
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"metin"
		"hizli"
		"harita";
}

.hero__metin {
	grid-area: metin;
}

.hero__hizli {
	grid-area: hizli;
}

.hero__harita {
	grid-area: harita;
}

.hero__baslik {
	margin-bottom: var(--b1);
	max-width: 18ch;
	color: var(--renk-beyaz);
}

.hero__alt {
	margin-bottom: var(--b2);
	max-width: 54ch;
	font-size: var(--fs-buyuk);
	color: var(--yazi-ikincil);
}

/* Güven çipleri: mobilde yatay kaydırma, masaüstünde sarar. */
.cip-satiri {
	display: flex;
	gap: var(--b0);
	margin: 0 calc(-1 * var(--kap-bosluk)) var(--b2);
	padding: 0 var(--kap-bosluk) 4px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.cip-satiri::-webkit-scrollbar {
	display: none;
}

.cip-satiri .cip {
	flex-shrink: 0;
	scroll-snap-align: start;
}

.cip[hidden],
[data-pak-bos-gizle][hidden] {
	display: none;
}

.hero__eylem {
	display: flex;
	flex-wrap: wrap;
	gap: var(--b0);
}

.hero__teklif {
	flex: 1 1 100%;
}

/* Mobilde "Hemen Ara" alt çubukta; hero'da tekrar edilmez. */
.hero__ara {
	display: none;
}

/* Harita alanı: yüklenene kadar sabit oranlı yer tutucu (CLS sıfır). */
.harita-alani {
	position: relative;
	aspect-ratio: 2 / 1;
	width: 100%;
	border-radius: var(--radius);
	background:
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.16) 1px, transparent 1.5px) 0 0 / 14px 14px,
		radial-gradient(70% 90% at 30% 40%, rgba(255, 255, 255, 0.07), transparent 70%);
}

.harita-alani__nokta--ist {
	position: absolute;
	top: 22%;
	left: 15%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--renk-vurgu);
	box-shadow: 0 0 0 6px rgba(var(--renk-vurgu-rgb), 0.25);
}

/* İstanbul ilçe haritası: istanbul.svg oranında sabit sahne (CLS yok); açık zemin için noktalı yer tutucu. */
.ist-harita {
	margin: 0;
}

.ist-harita__sahne {
	position: relative;
	aspect-ratio: 868 / 466;
	width: 100%;
	border-radius: var(--radius);
	background: radial-gradient(circle at 1px 1px, rgba(15, 42, 74, 0.14) 1px, transparent 1.5px) 0 0 / 14px 14px;
}

.ist-harita--hazir .ist-harita__sahne {
	background: none;
}

.ist-harita__lejant {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: var(--b0) 0 0;
	font-size: var(--fs-kucuk);
	color: var(--yazi-ikincil);
}

.ist-harita__yaka::before {
	content: "";
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	margin-right: 0.375rem;
	border-radius: 3px;
	vertical-align: -0.05em;
	background-color: rgba(15, 42, 74, 0.18);
}

.ist-harita__yaka--anadolu::before {
	background-color: rgba(var(--renk-vurgu-rgb), 0.35);
}

@media (min-width: 600px) {
	.hero__teklif {
		flex: 0 0 auto;
	}

	.cip-satiri {
		flex-wrap: wrap;
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}
}

@media (min-width: 960px) {
	.hero {
		padding-block: var(--b6) var(--b6);
	}

	.hero__ic {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		grid-template-areas:
			"metin harita"
			"hizli harita";
		align-items: center;
		column-gap: var(--b5);
		row-gap: var(--b3);
	}

	.hero__metin {
		align-self: end;
	}

	.hero__hizli {
		align-self: start;
	}

	.hero__ara {
		display: inline-flex;
	}

	.hero__harita .harita-alani {
		aspect-ratio: 16 / 10;
	}
}

/* 18. Hızlı arama barı ---------------------------------------------------- */
.hizli-arama {
	display: grid;
	gap: var(--b1);
}

.hizli-arama__baslik {
	margin: 0;
	font-family: var(--font-baslik);
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.3;
}

.hizli-arama__alt {
	margin: 0.125rem 0 0;
	color: var(--yazi-ikincil);
}

.hizli-arama__alanlar {
	display: grid;
	gap: var(--b0);
}

.hizli-arama__dugme {
	width: 100%;
}

.hizli-arama__kvkk {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--yazi-ikincil);
}

.hizli-arama__kvkk a {
	color: inherit;
}

.hizli-arama__durum:empty {
	display: none;
}

@media (min-width: 600px) {
	.hizli-arama__alanlar {
		grid-template-columns: 1fr 1fr auto;
	}

	.hizli-arama__dugme {
		width: auto;
	}
}

/* Kart görünümü (beyaz zemin): mobil hero ve form yedeği. */
.hizli-arama--kart,
.hizli-arama--hero {
	--yazi: var(--renk-metin);
	--yazi-ikincil: var(--renk-ikincil);
	--baglanti: var(--renk-ana);
	--odak: var(--renk-ana);
	padding: var(--b2);
	border-radius: var(--radius);
	background-color: var(--renk-beyaz);
	color: var(--renk-metin);
	box-shadow: var(--golge-3);
}

/* Masaüstünde hero içinde tek satır, yarı saydam koyu panel. */
@media (min-width: 960px) {
	.hizli-arama--hero {
		--yazi: var(--renk-beyaz);
		--yazi-ikincil: rgba(255, 255, 255, 0.78);
		--baglanti: var(--renk-beyaz);
		--odak: var(--renk-vurgu);
		padding: var(--b2);
		border: 1px solid rgba(255, 255, 255, 0.14);
		background-color: rgba(255, 255, 255, 0.06);
		color: var(--renk-beyaz);
		box-shadow: none;
	}

	.hizli-arama--hero .hizli-arama__baslik {
		font-size: 1rem;
	}

	.hizli-arama--hero .alan {
		border-color: transparent;
	}
}

.form-yedek .hizli-arama--kart {
	padding: 0;
	box-shadow: none;
}

/* 19. Güven şeridi -------------------------------------------------------- */
.guven-seridi {
	border-bottom: 1px solid var(--renk-cizgi);
	background-color: var(--renk-beyaz);
}

.guven-seridi__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	gap: var(--b1) var(--b2);
	margin: 0;
	padding: var(--b3) 0;
	list-style: none;
}

.guven-seridi__oge {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.guven-seridi__ikon {
	display: inline-grid;
	flex-shrink: 0;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: rgba(var(--renk-vurgu-rgb), 0.14);
	color: var(--renk-ana);
}

.guven-seridi__metin {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.guven-seridi__baslik {
	font-weight: 700;
	color: var(--renk-ana);
}

a.guven-seridi__baslik {
	text-decoration: underline;
	text-decoration-color: rgba(15, 42, 74, 0.3);
}

.guven-seridi__alt {
	font-size: var(--fs-kucuk);
	color: var(--renk-ikincil);
}

@media (max-width: 599px) {
	.guven-seridi__liste {
		grid-template-columns: 1fr 1fr;
		padding: var(--b2) 0;
	}

	.guven-seridi__oge {
		align-items: flex-start;
	}

	.guven-seridi__ikon {
		width: 36px;
		height: 36px;
	}
}

/* 20. Kart ızgarası ve hizmet kartı -------------------------------------- */
.kart-izgara,
.yazi-izgara,
.rota-izgara {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kart-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: var(--b2);
}

.kart-izgara > li,
.yazi-izgara > li {
	display: flex;
}

.kart-izgara .kart,
.yazi-izgara .kart {
	width: 100%;
}

.kart--hizmet .kart__govde {
	gap: 0.75rem;
}

.kart--hizmet .ikon-cerceve {
	width: 52px;
	height: 52px;
	margin-bottom: var(--b-1);
}

/* Dar ekranda hizmet kartı yatay: ikon solda, metin sağda (sayfa boyu yarıya iner). */
@media (max-width: 599px) {
	.kart-izgara {
		gap: var(--b1);
	}

	.kart--hizmet .kart__govde {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		column-gap: var(--b1);
		row-gap: 0.25rem;
		padding: var(--b1) var(--b1) var(--b1) var(--b1);
	}

	.kart--hizmet .ikon-cerceve {
		grid-row: span 3;
		width: 48px;
		height: 48px;
		margin: 0;
	}

	.kart--hizmet .kart__eylem--iki {
		grid-column: 2;
		padding-top: var(--b0);
		border-top: 0;
	}
}

.kart__eylem--iki {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--b0);
	margin-top: auto;
	padding-top: var(--b1);
	border-top: 1px solid var(--renk-cizgi);
}

.kart__detay {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--renk-ana);
}

.kart:hover .kart__detay .ikon {
	transform: translateX(3px);
	transition: transform var(--gecis);
}

/* 21. Neden biz ve sayaçlar ---------------------------------------------- */
.neden-izgara {
	display: grid;
	gap: var(--b3) var(--b4);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

@media (min-width: 960px) {
	.neden-izgara {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.neden-oge__ikon {
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--b1);
	border-radius: var(--radius);
	background-color: rgba(var(--renk-vurgu-rgb), 0.14);
	color: var(--renk-ana);
}

.neden-oge__baslik {
	margin-bottom: var(--b0);
	font-size: var(--fs-h4);
}

.neden-oge__metin {
	margin: 0;
	color: var(--renk-ikincil);
}

.sayaclar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
	gap: var(--b2);
	margin: var(--b5) 0 0;
	padding: var(--b3);
	border-radius: var(--radius);
	text-align: center;
}

.sayac {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.25rem;
}

.sayac__deger {
	margin: 0;
	font-family: var(--font-baslik);
	font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
	font-weight: 700;
	line-height: 1;
	color: var(--renk-vurgu);
	font-variant-numeric: tabular-nums;
}

.sayac__etiket {
	font-size: var(--fs-kucuk);
	color: var(--yazi-ikincil);
}

/* 22. Taşınma süreci ------------------------------------------------------ */
.surec {
	position: relative;
	display: grid;
	gap: var(--b3);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.surec__adim {
	position: relative;
	padding-left: 64px;
}

.surec__no {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 2px solid var(--renk-vurgu);
	border-radius: 50%;
	background-color: var(--renk-beyaz);
	font-family: var(--font-baslik);
	font-weight: 700;
	color: var(--renk-ana);
}

/* Adımları bağlayan çizgi (mobilde dikey). */
.surec__adim:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 48px;
	bottom: calc(-1 * var(--b3) + 4px);
	left: 21px;
	width: 2px;
	background-color: var(--renk-cizgi);
}

.surec__baslik {
	margin: 0.5rem 0 0.25rem;
	font-size: var(--fs-h4);
}

.surec__metin {
	margin: 0;
	color: var(--yazi-ikincil);
}

@media (min-width: 960px) {
	.surec {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--b2);
		text-align: center;
	}

	.surec__adim {
		padding: 0;
	}

	.surec__no {
		position: relative;
		margin: 0 auto var(--b1);
		width: 56px;
		height: 56px;
		font-size: 1.25rem;
	}

	/* Masaüstünde yatay bağlantı çizgisi. */
	.surec__adim:not(:last-child)::after {
		top: 27px;
		bottom: auto;
		left: calc(50% + 36px);
		width: calc(100% - 72px + var(--b2));
		height: 2px;
	}
}

/* 23. Form bölümü ve güven kutusu ---------------------------------------- */
.form-bolumu__ic {
	display: grid;
	gap: var(--b4);
}

@media (min-width: 1024px) {
	.form-bolumu__ic {
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: start;
	}

	.guven-kutusu {
		position: sticky;
		top: calc(var(--header-h) + var(--admin-bar) + 24px);
		margin-top: 7.5rem;
	}
}

.form-yedek {
	padding: var(--b3);
}

.form-yedek__kapilar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: var(--b0);
	margin-top: var(--b2);
	padding-top: var(--b2);
	border-top: 1px solid var(--renk-cizgi);
}

.guven-kutusu {
	padding: var(--b3);
	border-radius: var(--radius);
	background-color: var(--renk-zemin);
}

.guven-kutusu__baslik {
	margin-bottom: var(--b1);
	font-family: var(--font-baslik);
	font-weight: 700;
	color: var(--renk-ana);
}

.onay-listesi {
	display: grid;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.onay-listesi li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.onay-listesi .ikon {
	margin-top: 0.15em;
	color: var(--renk-basari);
}

.guven-kutusu__saat {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: var(--b2) 0 0;
	padding-top: var(--b1);
	border-top: 1px solid var(--renk-cizgi);
	font-size: var(--fs-kucuk);
	color: var(--renk-ikincil-acik);
}

/* 24. Yorum kartı --------------------------------------------------------- */
.kart--yorum {
	height: 100%;
	margin: 0;
}

.kart--yorum:hover {
	transform: none;
}

.yildizlar {
	display: flex;
	gap: 2px;
	margin: 0;
}

.yildiz--dolu {
	color: var(--renk-vurgu);
}

.yildiz--bos {
	color: var(--renk-cizgi);
}

.kart--yorum__metin {
	margin: 0;
	color: var(--renk-metin);
}

.kart--yorum__metin p:last-child {
	margin-bottom: 0;
}

.kart--yorum__kisi {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	margin-top: auto;
	padding-top: var(--b1);
	border-top: 1px solid var(--renk-cizgi);
	font-size: var(--fs-kucuk);
	color: var(--renk-ikincil);
}

.kart--yorum__kisi strong {
	font-size: 1rem;
	color: var(--renk-ana);
}

.kaydir:focus-visible {
	outline-offset: 4px;
}

/* 25. SSS bölümü ---------------------------------------------------------- */
.sss-bolumu {
	display: grid;
	gap: var(--b3);
}

@media (min-width: 960px) {
	.sss-bolumu {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
		gap: var(--b6);
		align-items: start;
	}

	.sss-bolumu__bas {
		position: sticky;
		top: calc(var(--header-h) + var(--admin-bar) + 24px);
	}
}

.sss-liste {
	display: grid;
	gap: var(--b0);
}

.sss-liste .sss-oge + .sss-oge {
	margin-top: 0;
}

/* 26. Bölgeler ve rota kartları ------------------------------------------ */
.bolgeler {
	display: grid;
	gap: var(--b4);
}

@media (min-width: 1024px) {
	.bolgeler {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: var(--b5);
	}
}

.bolgeler__istanbul .ist-harita {
	margin-bottom: var(--b3);
}

.bolgeler__yaka {
	margin: 0 0 var(--b0);
}

/* İlçe dizini: arama + iki yaka. */
.ilce-dizini {
	display: grid;
	gap: var(--b2);
}

.ilce-dizini__arama {
	display: grid;
	gap: 0.4rem;
	max-width: 24rem;
}

.ilce-dizini__arama[hidden],
.ilce-dizini__yaka[hidden],
.ilce-listesi li[hidden] {
	display: none;
}

.ilce-dizini__yakalar {
	display: grid;
	gap: var(--b2);
}

.ilce-listesi {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ilce-listesi a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius-tam);
	background-color: var(--renk-beyaz);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--renk-ana);
	text-decoration: none;
	transition: border-color var(--gecis), background-color var(--gecis);
}

.ilce-listesi a:hover {
	border-color: var(--renk-ana);
	background-color: var(--renk-ana-acik);
}

.rota-izgara {
	display: grid;
	gap: var(--b0);
}

@media (min-width: 640px) and (max-width: 1023px) {
	.rota-izgara {
		grid-template-columns: 1fr 1fr;
	}
}

.rota-karti {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 64px;
	padding: 0.75rem var(--b1);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--radius);
	background-color: var(--renk-beyaz);
	color: var(--renk-metin);
	text-decoration: none;
	transition: border-color var(--gecis), box-shadow var(--gecis);
}

.rota-karti:hover {
	border-color: rgba(15, 42, 74, 0.3);
	box-shadow: var(--golge-1);
}

.rota-karti__ikon {
	display: inline-grid;
	flex-shrink: 0;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-k);
	background-color: var(--renk-ana-acik);
	color: var(--renk-ana);
}

.rota-karti__metin {
	display: flex;
	flex: 1;
	flex-direction: column;
	line-height: 1.3;
}

.rota-karti__baslik {
	color: var(--renk-ana);
}

.rota-karti__bilgi {
	font-size: var(--fs-kucuk);
	color: var(--renk-ikincil);
}

.rota-karti__ok {
	color: var(--renk-ikincil);
	transition: transform var(--gecis);
}

.rota-karti:hover .rota-karti__ok {
	transform: translateX(3px);
}

/* 27. Blog kartı ---------------------------------------------------------- */
.kart--yazi .kart__gorsel .yer-tutucu {
	width: 100%;
	height: 100%;
}

.kart__ust {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--renk-ikincil);
}

.kart__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: auto 0 0;
	padding-top: var(--b0);
	font-size: var(--fs-kucuk);
	color: var(--renk-ikincil);
}

/* Teklif kartı (hizmet sayfası, blog kenar çubuğu; masaüstünde yapışkan) */
.teklif-karti {
	display: grid;
	gap: var(--b0);
	padding: var(--b2);
	border: 1px solid var(--renk-cizgi);
	border-top: 4px solid var(--renk-vurgu);
	border-radius: var(--radius);
	background-color: var(--renk-beyaz);
	box-shadow: var(--golge-2);
}

.teklif-karti__baslik {
	margin: 0;
	font-family: var(--font-baslik);
	font-size: var(--fs-h4);
	font-weight: 700;
	color: var(--renk-ana);
}

.teklif-karti__metin {
	margin: 0 0 var(--b-1);
	font-size: var(--fs-kucuk);
	color: var(--renk-ikincil-acik);
}

.teklif-karti__saat {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin: var(--b-1) 0 0;
	font-size: var(--fs-kucuk);
	color: var(--renk-ikincil-acik);
}

@media (min-width: 1024px) {
	.teklif-karti {
		position: sticky;
		top: calc(var(--header-h) + var(--admin-bar) + 24px);
	}
}

/* 28. İletişim + son CTA -------------------------------------------------- */
.iletisim-cta {
	padding-block: var(--bolum);
	background:
		radial-gradient(60% 120% at 100% 100%, rgba(var(--renk-vurgu-rgb), 0.16), transparent 60%),
		var(--renk-ana);
}

.iletisim-cta__ic {
	display: grid;
	gap: var(--b4);
	align-items: center;
}

.iletisim-cta__alt {
	margin-bottom: var(--b2);
	color: var(--yazi-ikincil);
}

.iletisim-cta .iletisim-listesi .ikon {
	color: var(--renk-vurgu);
}

.iletisim-cta .iletisim-listesi a {
	color: var(--renk-beyaz);
}

.iletisim-cta__tel {
	font-size: 1.375rem;
	text-decoration: none;
}

.iletisim-cta .iletisim-listesi a.iletisim-cta__tel {
	color: var(--renk-vurgu);
}

.iletisim-cta__eylem {
	display: grid;
	gap: var(--b0);
}

@media (min-width: 960px) {
	.iletisim-cta__ic {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
		gap: var(--b6);
	}
}

/* 14. Erişilebilirlik ve hareket tercihleri ------------------------------ */
/* .screen-reader-text: çekirdeğin ürettiği gizli metinler (sayfalama başlığı vb.). */
.gizli-metin,
.screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
}

.atla {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius-k);
	background-color: var(--renk-ana);
	color: var(--renk-beyaz);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform var(--gecis);
}

.atla:focus {
	transform: translateY(0);
	color: var(--renk-beyaz);
}

.site-main:focus {
	outline: none;
}

/* Belirgin odak halkası: açık zeminde lacivert, koyu zeminde turuncu. */
:focus-visible {
	outline: 3px solid var(--odak);
	outline-offset: 2px;
	border-radius: 4px;
}

.btn:focus-visible {
	outline-offset: 3px;
}

.mobil-cubuk a:focus-visible {
	outline: 3px solid var(--renk-vurgu);
	outline-offset: -5px;
}

@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;
		transition-delay: 0s !important;
	}
}

@media (forced-colors: active) {
	.btn,
	.cip,
	.kart {
		border: 1px solid CanvasText;
	}
}

@media print {
	.site-header,
	.mobil-cubuk,
	.wa-buton,
	.cta-bandi,
	.site-footer__ust {
		display: none !important;
	}

	body {
		padding: 0;
	}
}