/* ============================================================
   Kozas — kurumsal/geleneksel tasarım sistemi (v2)
   Beyaz zemin, orman yeşili kurumsal vurgu, ortalanmış resmi
   bölüm başlıkları, ölçülü köşe ve gölgeler.
   ============================================================ */

:root {
	/* renk */
	--zemin: #FFFFFF;
	--zemin-gri: #F5F7F4;
	--murekkep: #22262B;
	--murekkep-2: #555C63;
	--cizgi: #E2E6E1;
	--yesil: #157A44;
	--yesil-koyu: #0F5E34;
	--yesil-acik: #EAF4EE;
	--orman: #16241C;
	--orman-2: #1F3126;
	--orman-metin: #D9E2DB;
	--orman-soluk: #93A89A;
	/* tipografi */
	--font: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
	/* ölçüler */
	--kap: 1140px;
	--radius: 4px;
	--golge: 0 2px 10px rgba(22, 36, 28, .07);
	--gecis: .2s ease;
}

/* ---------- sıfırlama ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.7;
	color: var(--murekkep);
	background: var(--zemin);
	-webkit-font-smoothing: antialiased;
}
img, video, iframe { max-width: 100%; height: auto; display: block; }
a { color: var(--yesil); text-decoration: none; transition: color var(--gecis); }
a:hover { color: var(--yesil-koyu); }
ul[role="list"], ol[role="list"] { list-style: none; }

.kap { max-width: var(--kap); margin: 0 auto; padding: 0 22px; }
.kap-dar { max-width: 840px; }

.ekran-disi {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.atla {
	position: absolute; left: -999px; top: 8px; z-index: 200;
	background: var(--yesil); color: #fff; padding: 8px 16px; border-radius: var(--radius);
}
.atla:focus { left: 8px; color: #fff; }

/* ---------- butonlar ---------- */
.btn {
	display: inline-block;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .02em;
	line-height: 1;
	padding: 15px 28px;
	border-radius: var(--radius);
	border: 1px solid transparent;
	transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
	cursor: pointer;
	text-align: center;
}
.btn-dolu { background: var(--yesil); color: #fff; }
.btn-dolu:hover { background: var(--yesil-koyu); color: #fff; }
.btn-cerceve { border-color: rgba(255, 255, 255, .6); color: #fff; }
.btn-cerceve:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }
.btn-cizgi { border-color: var(--yesil); color: var(--yesil); }
.btn-cizgi:hover { background: var(--yesil); color: #fff; }
.btn-beyaz { background: #fff; color: var(--yesil-koyu); font-variant-numeric: tabular-nums; }
.btn-beyaz:hover { background: var(--yesil-acik); color: var(--yesil-koyu); }
.btn-genis { width: 100%; padding: 16px; font-size: 15px; }

/* ---------- üst bilgi çubuğu ---------- */
.bilgi-cubuk { background: var(--orman); color: var(--orman-metin); font-size: 13px; }
/* İki telefon + dil seçici dar ekranda tek satıra sığmaz. Taşma yerine
   KONTROLLÜ sarma: row-gap sabit, içerik ortalı — çubuk 480px altında iki
   satıra düşer (ilk satır iki numara, ikinci satır dil seçici). */
.bilgi-ic { display: flex; justify-content: space-between; align-items: center; min-height: 38px; gap: 16px; flex-wrap: wrap; row-gap: 2px; }
.bilgi-sol { display: flex; gap: 22px; align-items: center; }
.bilgi-sol a { color: var(--orman-metin); }
.bilgi-sol a:hover { color: #fff; }
.bilgi-sag { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.bilgi-tel {
	display: flex; align-items: center; gap: 7px;
	color: #fff; font-weight: 600; font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.bilgi-tel svg { flex-shrink: 0; }
.bilgi-tel:hover { color: #9FE0B4; }
/* Dil seçici — segmentli pill: aktif dil beyaz dolgulu. */
.dil-secici {
	display: inline-flex; align-items: center;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 99px;
	padding: 2px;
	gap: 2px;
}
.dil-secici a {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 34px;
	padding: 3px 10px;
	border-radius: 99px;
	color: var(--orman-soluk);
	font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
	line-height: 1.5;
	transition: color var(--gecis), background var(--gecis);
}
.dil-secici a:hover { color: #fff; }
.dil-secici a.aktif {
	background: #fff;
	color: var(--orman);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.dil-secici a.aktif:hover { color: var(--orman); }

/* ---------- logo ---------- */
.logo { display: inline-flex; flex-direction: column; line-height: 1; user-select: none; }
.logo-ad {
	font-size: 22px; font-weight: 800;
	letter-spacing: .045em;
	color: var(--murekkep);
	white-space: nowrap;
}
.logo-tire, .logo-spor { color: var(--yesil); }
/* Alt satır: harfler iki yana dağıtılır — genişlik üst satırla her zaman eşit. */
.logo-alt {
	display: flex; justify-content: space-between;
	width: 100%;
	font-size: 9.5px; font-weight: 600;
	text-transform: uppercase;
	color: var(--murekkep-2);
	margin-top: 5px;
}
.logo-alt i { font-style: normal; }
.logo-koyu .logo-ad { color: #fff; }
.logo-koyu .logo-spor, .logo-koyu .logo-tire { color: #58D67C; }
.logo-koyu .logo-alt { color: var(--orman-soluk); }

/* ---------- header ---------- */
.ust {
	position: sticky; top: 0; z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--cizgi);
	box-shadow: 0 1px 0 rgba(22, 36, 28, .02);
}
.ust.golgeli { box-shadow: var(--golge); }
.ust-ic { display: flex; align-items: center; gap: 22px; height: 82px; flex-wrap: nowrap; }
.ust-logo { flex-shrink: 0; display: flex; align-items: center; }
/* Menü ortada: logo solda, CTA sağda, nav ikisinin ortasında hizalanır. */
.ust-nav { display: flex; gap: 6px; flex: 1; justify-content: center; flex-wrap: nowrap; }
.ust-nav a {
	color: var(--murekkep);
	font-size: 15px; font-weight: 600;
	padding: 10px 11px;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.ust-nav a:hover, .ust-nav a.aktif { color: var(--yesil); }
.ust-nav a.aktif { border-bottom-color: var(--yesil); }
.ust-eylem { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.ust-cta { padding: 13px 22px; }
.nav-dugme { display: none; }

/* Arama — masaüstünde gizli, mobil header'ın sol öğesi. */
.ara-dugme { display: none; }
.ara-panel { border-top: 1px solid var(--cizgi); background: var(--zemin-gri); }
.ara-form { display: flex; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
.ara-form input[type="search"] {
	flex: 1;
	border: 1px solid #C9D0C9; border-radius: var(--radius);
	padding: 12px 14px; font: inherit; font-size: 15px;
	background: #fff;
}
.ara-form input[type="search"]:focus { outline: 2px solid var(--yesil); border-color: var(--yesil); }
.ara-form .btn { padding: 12px 22px; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-ortu {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(15, 23, 18, .62) 0%, rgba(15, 23, 18, .55) 60%, rgba(15, 23, 18, .78) 100%);
}
.hero-ic {
	position: relative; z-index: 2;
	color: #fff; text-align: center;
	padding: 118px 22px 64px;
	max-width: 820px;
}
.hero-ustyazi {
	font-size: 13px; font-weight: 600;
	letter-spacing: .22em; text-transform: uppercase;
	color: #9FE0B4;
	margin-bottom: 18px;
}
.hero h1 {
	font-size: clamp(32px, 4.6vw, 50px);
	font-weight: 800; letter-spacing: -.015em; line-height: 1.15;
}
.hero-metin {
	margin: 22px auto 34px;
	max-width: 640px;
	font-size: 17px;
	color: rgba(255, 255, 255, .88);
}
.hero-eylem { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.hero-veri {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: repeat(4, 1fr);
	background: rgba(255, 255, 255, .96);
	border-radius: var(--radius) var(--radius) 0 0;
	box-shadow: 0 -2px 18px rgba(15, 23, 18, .18);
	margin-top: 40px;
}
.veri-kut {
	text-align: center;
	padding: 26px 14px 24px;
	border-right: 1px solid var(--cizgi);
}
.veri-kut:last-child { border-right: none; }
.veri-kut strong {
	display: block;
	font-size: 32px; font-weight: 800; letter-spacing: -.02em;
	color: var(--yesil); font-variant-numeric: tabular-nums;
}
.veri-kut span { font-size: 13px; color: var(--murekkep-2); font-weight: 500; }

/* ---------- genel bölüm ---------- */
.bolum { padding: 88px 0; }
.bolum-gri { background: var(--zemin-gri); border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.bolum-gri + .bolum-gri { border-top: none; }

.kicker {
	font-size: 12.5px; font-weight: 800;
	letter-spacing: .2em; text-transform: uppercase;
	color: var(--yesil);
	margin-bottom: 10px;
}
.bolum-bas { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.bolum-bas h1, .bolum-bas h2 {
	font-size: clamp(25px, 3.2vw, 34px);
	font-weight: 800; letter-spacing: -.01em; line-height: 1.25;
}
.bolum-bas h2::after, .kurumsal-metin h2::after {
	content: '';
	display: block;
	width: 46px; height: 3px;
	background: var(--yesil);
	margin: 18px auto 0;
}
.bolum-bas p { margin-top: 16px; color: var(--murekkep-2); font-size: 16px; }

/* ---------- kurumsal ---------- */
.kurumsal-izgara { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
.kurumsal-metin .kicker { margin-bottom: 8px; }
.kurumsal-metin h2 { font-size: clamp(25px, 3.2vw, 33px); font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.kurumsal-metin h2::after { margin: 16px 0 0; }
.kurumsal-metin > p { color: var(--murekkep-2); margin-top: 18px; }
.kurumsal-liste { margin-top: 24px; display: grid; gap: 12px; }
.kurumsal-liste li {
	position: relative;
	padding-left: 30px;
	font-weight: 500; font-size: 15px;
}
.kurumsal-liste li::before {
	content: '';
	position: absolute; left: 0; top: 3px;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--yesil-acik);
	border: 1.5px solid var(--yesil);
}
.kurumsal-liste li::after {
	content: '';
	position: absolute; left: 5px; top: 8px;
	width: 8px; height: 4.5px;
	border-left: 2px solid var(--yesil);
	border-bottom: 2px solid var(--yesil);
	transform: rotate(-45deg);
}
.kurumsal-gorsel { border: 1px solid var(--cizgi); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--golge); }
.kurumsal-gorsel img { width: 100%; }
.kurumsal-gorsel figcaption {
	padding: 12px 16px;
	font-size: 13px; color: var(--murekkep-2);
	border-top: 1px solid var(--cizgi);
}

/* ---------- sahalar ---------- */
.saha-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.saha-kart {
	background: #fff; border: 1px solid var(--cizgi); border-radius: var(--radius);
	overflow: hidden; box-shadow: var(--golge);
}
.saha-kart figure { aspect-ratio: 16 / 9; overflow: hidden; }
.saha-kart img { width: 100%; height: 100%; object-fit: cover; }
.saha-kart-ic { padding: 28px 30px 32px; }
.saha-kart h3 { font-size: 20px; font-weight: 800; }
.saha-kart h3::after {
	content: '';
	display: block;
	width: 34px; height: 3px;
	background: var(--yesil);
	margin: 12px 0 14px;
}
.saha-kart p { color: var(--murekkep-2); font-size: 15px; }

.olcu-baslik { font-size: 21px; font-weight: 800; margin: 56px 0 26px; text-align: center; }
.olcu-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.olcu-kart {
	background: #fff; border: 1px solid var(--cizgi); border-radius: var(--radius);
	display: flex; flex-direction: column;
	overflow: hidden;
}
.olcu-kart.one { border-color: var(--yesil); box-shadow: var(--golge); }
.olcu-bas {
	background: var(--zemin-gri);
	border-bottom: 1px solid var(--cizgi);
	padding: 20px 24px;
	text-align: center;
}
.olcu-kart.one .olcu-bas { background: var(--orman); border-bottom-color: var(--orman); }
.olcu-kart.one .olcu-bas h4 { color: #fff; }
.olcu-kart.one .olcu-bas h4 small { color: var(--orman-soluk); }
.olcu-etiket {
	font-size: 11.5px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase;
	color: #9FE0B4;
	margin-bottom: 4px;
}
.olcu-bas h4 { font-size: 27px; font-weight: 800; letter-spacing: -.01em; }
.olcu-bas h4 small { font-size: 14px; font-weight: 500; color: var(--murekkep-2); }
.olcu-kart ul { padding: 10px 24px 20px; flex: 1; }
.olcu-kart li {
	display: flex; justify-content: space-between; gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--cizgi);
	font-size: 14px;
}
.olcu-kart li:last-child { border-bottom: none; }
.olcu-kart li span { color: var(--murekkep-2); }
.olcu-kart li strong { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.olcu-kart .btn { margin: 0 24px 24px; }

/* ---------- çözümler (ek hizmetler) ---------- */
.cozum-izgara { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.cozum-kart {
	background: #fff; border: 1px solid var(--cizgi); border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow var(--gecis), border-color var(--gecis);
}
.cozum-kart:hover { box-shadow: var(--golge); border-color: #C9D6CC; }
.cozum-kart figure { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 2px solid var(--yesil); }
.cozum-kart img { width: 100%; height: 100%; object-fit: cover; }
.cozum-ic { padding: 16px 16px 18px; }
.cozum-ic h3 { font-size: 14.5px; font-weight: 700; line-height: 1.35; margin-bottom: 7px; }
.cozum-ic p { font-size: 13px; line-height: 1.55; color: var(--murekkep-2); }

.cozum-detay-ac {
	margin-top: 12px;
	background: none; border: none; padding: 0;
	font: inherit; font-size: 13px; font-weight: 700;
	color: var(--yesil); cursor: pointer;
	letter-spacing: .02em;
}
.cozum-detay-ac::after { content: ' →'; }
.cozum-detay-ac:hover { color: var(--yesil-koyu); text-decoration: underline; }

/* ---------- hizmet detay popup ---------- */
.detay-perde {
	position: fixed; inset: 0; z-index: 300;
	background: rgba(15, 23, 18, .6);
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
}
.detay-kutu {
	position: relative;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: 0 20px 60px rgba(15, 23, 18, .35);
	max-width: 860px; width: 100%;
	max-height: 90vh; overflow-y: auto;
}
.detay-kapat {
	position: absolute; top: 14px; right: 14px; z-index: 2;
	width: 40px; height: 40px;
	background: #fff; color: var(--murekkep);
	border: 1px solid var(--cizgi); border-radius: 50%;
	font-size: 23px; line-height: 1; cursor: pointer;
	transition: background var(--gecis), color var(--gecis);
	box-shadow: 0 2px 8px rgba(15, 23, 18, .2);
}
.detay-kapat:hover { background: var(--yesil); color: #fff; border-color: var(--yesil); }
.detay-gorsel { max-height: 300px; overflow: hidden; border-bottom: 3px solid var(--yesil); }
.detay-gorsel img { width: 100%; height: 300px; object-fit: cover; }
.detay-govde { padding: 28px 36px 34px; }
.detay-baslik { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.detay-baslik::after {
	content: '';
	display: block;
	width: 40px; height: 3px;
	background: var(--yesil);
	margin: 14px 0 4px;
}
.detay-metin { margin-top: 14px; color: var(--murekkep-2); font-size: 15px; line-height: 1.75; }
.detay-alt {
	font-size: 12.5px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--yesil);
	margin-top: 26px;
}
.detay-liste {
	margin-top: 14px;
	display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px;
	list-style: none; padding: 0;
}
.detay-liste li {
	position: relative; padding-left: 26px;
	font-size: 14.5px; color: var(--murekkep-2); line-height: 1.5;
}
.detay-liste li::before {
	content: '';
	position: absolute; left: 0; top: 4px;
	width: 15px; height: 15px;
	border-radius: 50%;
	background: var(--yesil-acik);
	border: 1.5px solid var(--yesil);
}
.detay-liste li::after {
	content: '';
	position: absolute; left: 4px; top: 8px;
	width: 7px; height: 4px;
	border-left: 2px solid var(--yesil);
	border-bottom: 2px solid var(--yesil);
	transform: rotate(-45deg);
}
.detay-tablo {
	width: 100%; border-collapse: collapse;
	margin-top: 14px;
	font-size: 14px;
	border: 1px solid var(--cizgi);
}
.detay-tablo th, .detay-tablo td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--cizgi); }
.detay-tablo tr:last-child th, .detay-tablo tr:last-child td { border-bottom: none; }
.detay-tablo th {
	width: 38%;
	background: var(--zemin-gri);
	font-weight: 600; white-space: nowrap;
}
.detay-tablo td { color: var(--murekkep-2); font-variant-numeric: tabular-nums; }
.detay-eylem {
	display: flex; gap: 12px; flex-wrap: wrap;
	margin-top: 28px; padding-top: 22px;
	border-top: 1px solid var(--cizgi);
}
@media (max-width: 640px) {
	.detay-govde { padding: 22px 20px 26px; }
	.detay-liste { grid-template-columns: 1fr; }
	.detay-gorsel, .detay-gorsel img { max-height: 190px; height: 190px; }
}

/* ---------- süreç ---------- */
.surec-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.surec-kart {
	background: #fff; border: 1px solid var(--cizgi); border-radius: var(--radius);
	overflow: hidden;
}
.surec-kart figure { aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 3px solid var(--yesil); }
.surec-kart img { width: 100%; height: 100%; object-fit: cover; }
.surec-ic { padding: 22px 24px 26px; }
.surec-ic h3 {
	display: flex; align-items: center; gap: 10px;
	font-size: 16.5px; font-weight: 700;
	margin-bottom: 10px;
}
.surec-no {
	flex-shrink: 0;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--yesil); color: #fff;
	font-size: 14px; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center;
	font-variant-numeric: tabular-nums;
}
.surec-ic p { font-size: 14.5px; color: var(--murekkep-2); }

/* ---------- şartname tablosu ---------- */
/* Sağ kenardaki gölge, tablonun yana kaydığını gösterir; sona gelindiğinde
   kaybolur (background-attachment: local ile kaydırmaya bağlı). */
.tablo-sar {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	border: 1px solid var(--cizgi); border-radius: var(--radius);
	background:
		linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
		linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(22, 36, 28, .16), rgba(22, 36, 28, 0)) left center / 14px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(22, 36, 28, .16), rgba(22, 36, 28, 0)) right center / 14px 100% no-repeat scroll,
		#fff;
	box-shadow: var(--golge);
}
/* Yalnızca kaydırma gereken genişliklerde görünen metin ipucu. */
.tablo-ipucu { display: none; }
.sart-tablo { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 14.5px; }
.sart-tablo th, .sart-tablo td { padding: 14px 18px; text-align: left; vertical-align: top; }
.sart-tablo thead th {
	background: var(--orman); color: var(--orman-metin);
	font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
	white-space: nowrap;
}
.sart-tablo tbody tr { border-top: 1px solid var(--cizgi); }
.sart-tablo tbody tr:nth-child(even) { background: var(--zemin-gri); }
.sart-tablo tbody th { font-weight: 700; white-space: nowrap; }
.sart-tablo td:nth-child(2) { color: var(--yesil-koyu); font-weight: 600; }
.sart-not { margin: 22px auto 0; color: var(--murekkep-2); font-size: 15px; max-width: 760px; text-align: center; }

/* ---------- maliyet ---------- */
.maliyet-kart {
	background: #fff; border: 1px solid var(--cizgi); border-radius: var(--radius);
	box-shadow: var(--golge);
	padding: 34px 38px;
}
.maliyet-bant { margin-bottom: 22px; }
.maliyet-bant div {
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
	padding: 15px 2px;
	border-bottom: 1px solid var(--cizgi);
}
.maliyet-bant div:first-child { border-top: 1px solid var(--cizgi); }
.maliyet-bant dt { font-weight: 600; }
.maliyet-bant dd { font-weight: 700; color: var(--yesil-koyu); font-variant-numeric: tabular-nums; text-align: right; }
.maliyet-kart > p { color: var(--murekkep-2); font-size: 15px; }

/* ---------- CTA şeridi ---------- */
.cta-serit { background: var(--yesil); color: #fff; }
.cta-ic {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding-top: 34px; padding-bottom: 34px;
	flex-wrap: wrap;
}
.cta-ic p { font-size: 19px; font-weight: 600; max-width: 560px; line-height: 1.45; }
.cta-eylem { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-serit .btn-cerceve { border-color: rgba(255, 255, 255, .7); }

/* ---------- galeri ---------- */
.galeri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.galeri-kare {
	border: 1px solid var(--cizgi); border-radius: var(--radius);
	overflow: hidden; background: #fff;
}
.galeri-kare a { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.galeri-kare img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.galeri-kare:hover img { transform: scale(1.04); }
.galeri-kare figcaption {
	padding: 10px 14px;
	font-size: 13px; color: var(--murekkep-2);
	border-top: 1px solid var(--cizgi);
	text-align: center;
}

/* ---------- ışık kutusu ---------- */
.isik-perde {
	position: fixed; inset: 0; z-index: 300;
	background: rgba(15, 23, 18, .93);
	display: flex; align-items: center; justify-content: center;
	padding: 28px; cursor: zoom-out;
}
.isik-perde img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; border-radius: var(--radius); }

/* ---------- ankara ---------- */
.ankara-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
.ankara-metin .kicker { margin-bottom: 8px; }
.ankara-metin h2 { font-size: clamp(25px, 3.2vw, 32px); font-weight: 800; letter-spacing: -.01em; }
.ankara-metin h2::after {
	content: '';
	display: block;
	width: 46px; height: 3px;
	background: var(--yesil);
	margin: 16px 0 0;
}
.ankara-metin > p { color: var(--murekkep-2); margin: 18px 0 24px; }
.nap {
	background: #fff; border: 1px solid var(--cizgi); border-left: 3px solid var(--yesil);
	border-radius: var(--radius);
	padding: 22px 26px;
}
.nap p { margin: 3px 0; font-size: 14.5px; }
.ankara-harita { border: 1px solid var(--cizgi); border-radius: var(--radius); overflow: hidden; box-shadow: var(--golge); background: #fff; }
.ankara-harita iframe { width: 100%; height: 424px; }

/* Yapım rehberi — makale blokları */
.yazit-dizisi { display: grid; gap: 18px; }
.yazit {
	background: #fff; border: 1px solid var(--cizgi);
	border-left: 3px solid var(--yesil); border-radius: var(--radius);
	padding: 22px 26px; box-shadow: var(--golge);
}
.yazit h3 { font-size: 17.5px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 8px; }
.yazit p { color: var(--murekkep-2); font-size: 15px; line-height: 1.75; }

/* Ankara — bölge kartları ve ilçe listesi */
.bolge-kartlari { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.bolge-karti {
	background: #fff; border: 1px solid var(--cizgi); border-radius: var(--radius);
	border-top: 3px solid var(--yesil); box-shadow: var(--golge); padding: 24px 26px;
}
.bolge-karti h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 10px; }
.bolge-karti p { color: var(--murekkep-2); font-size: 14.5px; }

.semt-kutusu {
	margin-top: 26px; padding: 26px 28px; background: #fff;
	border: 1px solid var(--cizgi); border-radius: var(--radius);
}
.semt-basi { font-size: 15.5px; font-weight: 800; text-align: center; margin-bottom: 16px; color: var(--yesil-koyu); }
.semt-listesi { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 18px; padding: 0; }
.semt-listesi li {
	font-size: 14px; padding: 5px 13px; background: var(--yesil-acik);
	border: 1px solid var(--cizgi); border-radius: 999px; color: var(--murekkep);
}
.semt-notu { text-align: center; color: var(--murekkep-2); font-size: 14.5px; margin: 0; }

/* ---------- sss ---------- */
.sss-liste { display: grid; gap: 0; border: 1px solid var(--cizgi); border-radius: var(--radius); background: #fff; box-shadow: var(--golge); }
.sss-kut { border-bottom: 1px solid var(--cizgi); padding: 0 26px; }
.sss-kut:last-child { border-bottom: none; }
.sss-kut summary {
	cursor: pointer; list-style: none;
	font-weight: 600; font-size: 15.5px;
	padding: 19px 34px 19px 0;
	position: relative;
}
.sss-kut summary::-webkit-details-marker { display: none; }
/* Soru metni h3 ile işaretli; görünüm summary tipografisini korur. */
.sss-kut summary h3 { font: inherit; color: inherit; display: inline; }
.sss-kut summary::after {
	content: '+';
	position: absolute; right: 2px; top: 50%;
	transform: translateY(-50%);
	width: 24px; height: 24px;
	border: 1px solid var(--cizgi); border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px; color: var(--yesil);
	line-height: 1;
}
.sss-kut[open] summary { color: var(--yesil-koyu); }
.sss-kut[open] summary::after { content: '−'; background: var(--yesil-acik); border-color: var(--yesil); }
.sss-kut p { padding: 0 0 20px; color: var(--murekkep-2); font-size: 15px; max-width: 92%; }

/* ---------- iletişim ---------- */
.iletisim-izgara { display: grid; grid-template-columns: .9fr 1.6fr; gap: 28px; align-items: start; }
.iletisim-bilgi {
	background: #fff; color: var(--murekkep);
	border: 1px solid var(--cizgi); border-top: 3px solid var(--yesil);
	border-radius: var(--radius);
	box-shadow: var(--golge);
	padding: 30px 30px 34px;
}
.iletisim-bilgi h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.iletisim-bilgi h3::after {
	content: '';
	display: block;
	width: 34px; height: 3px;
	background: var(--yesil);
	margin-top: 12px;
}
.iletisim-bilgi ul { display: grid; gap: 18px; margin-top: 22px; }
.iletisim-bilgi li { display: grid; gap: 3px; font-size: 14.5px; color: var(--murekkep-2); }
.ib-etiket {
	font-size: 11.5px; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--yesil);
}
.iletisim-bilgi a { color: var(--murekkep); font-weight: 600; }
.iletisim-bilgi a:hover { color: var(--yesil); }

.teklif-form {
	background: #fff; border: 1px solid var(--cizgi); border-radius: var(--radius);
	box-shadow: var(--golge);
	padding: 32px 34px;
}
.form-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.teklif-form label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.teklif-form label small { font-weight: 400; color: var(--murekkep-2); }
.teklif-form input[type="text"], .teklif-form input[type="tel"],
.teklif-form select, .teklif-form textarea {
	width: 100%;
	background: #fff; color: var(--murekkep);
	border: 1px solid #C9D0C9; border-radius: var(--radius);
	padding: 12px 14px; font: inherit; font-size: 15px;
}
.teklif-form input:focus, .teklif-form select:focus, .teklif-form textarea:focus {
	outline: 2px solid var(--yesil); outline-offset: 0; border-color: var(--yesil);
}
.teklif-form input[type="file"] { font-size: 13.5px; color: var(--murekkep-2); padding: 8px 0; }
.teklif-form textarea { resize: vertical; }
.teklif-form > p { margin-top: 16px; }
.kvkk-onay label { font-weight: 400; font-size: 13.5px; color: var(--murekkep-2); }
.kvkk-onay input { accent-color: var(--yesil); margin-right: 6px; }
.kvkk-onay a { text-decoration: underline; }
.form-sonuc { border-radius: var(--radius); padding: 22px 26px; margin: 0 auto 30px; max-width: 840px; }
.form-ok { background: var(--yesil-acik); border: 1px solid var(--yesil); }
.form-ok h3 { margin-bottom: 6px; color: var(--yesil-koyu); }
.form-uyari { background: #FBEEE8; border: 1px solid #C4582D; color: #8A3D1E; }

/* ---------- footer ---------- */
.alt { background: var(--orman); color: var(--orman-soluk); padding: 64px 0 0; }
.alt-izgara {
	/* İletişim kolonu en geniş: adres blok/kat/ofis detayıyla uzadı ve iki
	   telefon satırı eklendi; dar kolonda çalışma saati "19.00"u alt satıra
	   düşürüyordu (ölçümle görüldü). */
	display: grid; grid-template-columns: 1.15fr 0.95fr 1.45fr 0.95fr; gap: 36px;
	padding-bottom: 46px;
}
.alt-blok { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.alt-tanim { font-size: 14px; margin-top: 14px; }
.alt-baslik {
	font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
	color: #fff; margin-bottom: 10px;
}
.alt-blok a { color: var(--orman-soluk); font-size: 14.5px; }
.alt-blok a:hover { color: #9FE0B4; }
.alt-adres { font-style: normal; font-size: 14.5px; line-height: 1.65; }

/* ---------- alt bilgi ikon dili ----------
   Kutu/çip YOK: yalın çizgi ikonlar, ikon sütunu GRID ile kurulur. Kardeş
   projede (halisahamaliyeti.com.tr) yuvarlak köşeli çip + flex düzeni var;
   burada hem görsel dil hem kurulum mekaniği bilinçli olarak farklı. */
.alt-kunye { list-style: none; display: grid; gap: 11px; }
.alt-kunye li { display: grid; grid-template-columns: 15px 1fr; column-gap: 11px; align-items: start; }
.alt-simge { flex: none; color: #6FBF8B; margin-top: 3px; }

/* Bağlantı madde işareti: 45° döndürülmüş açık kare. Üzerine gelindiğinde
   dolgulanıp hafifçe döner — chevron kaydırma hareketinden ayrışsın. */
.alt-madde { display: inline-flex; align-items: center; gap: 10px; }
.alt-madde-im { flex: none; color: rgba(255, 255, 255, .38); transition: color .18s ease, transform .18s ease; }
.alt-madde:hover .alt-madde-im { color: #9FE0B4; transform: rotate(90deg); }
.alt-imza {
	border-top: 1px solid rgba(255, 255, 255, .09);
	padding-top: 22px; padding-bottom: 26px;
	font-size: 13px;
}

/* ---------- kalıcı öğeler ---------- */
.wa-fab {
	position: fixed; right: 22px; bottom: 22px; z-index: 90;
	width: 54px; height: 54px; border-radius: 50%;
	background: #25D366; color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 5px 18px rgba(0, 0, 0, .22);
	transition: transform var(--gecis);
}
.wa-fab:hover { transform: scale(1.06); color: #fff; }
.mob-cubuk { display: none; }

/* ---------- giriş animasyonu (yalnızca yumuşak belirme) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.giris { opacity: 0; transition: opacity .55s ease; }
	.giris.gorundu { opacity: 1; }
}

/* ---------- yasal sayfalar ---------- */
.sayfa-icerik { padding-top: 56px; }
.duz-metin h2 { font-size: 22px; margin: 28px 0 10px; }
.duz-metin h3 { font-size: 18px; margin: 22px 0 8px; }
.duz-metin p, .duz-metin li { color: var(--murekkep-2); margin-bottom: 10px; }
.duz-metin ul, .duz-metin ol { padding-left: 22px; }

/* ---------- ana sayfadan alt sayfaya bağlantı ---------- */
.dokum-bag { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.dokum-bag:hover { text-decoration: underline; }
.sss-kut .sss-bag { margin-top: -10px; }

/* ============================================================
   Altyapı ve drenaj maliyeti sayfası (yalnız TR)
   Ana sayfa bileşenlerinin üzerine yalnızca yerleşim eklenir.
   ============================================================ */
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-veri.uclu { grid-template-columns: repeat(3, 1fr); }
.hero-veri.uclu strong { font-size: 25px; line-height: 1.25; }

.senaryo-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.senaryo-kart { display: flex; flex-direction: column; }
.senaryo-kart .saha-kart-ic { flex: 1; display: flex; flex-direction: column; padding: 24px 24px 20px; }
.senaryo-kart h3 { font-size: 18.5px; }
.senaryo-kart .maliyet-bant { margin: 16px 0 0; margin-top: auto; padding-top: 16px; }
.senaryo-kart .maliyet-bant div { padding: 11px 0; }
.senaryo-kart .maliyet-bant dt { font-size: 13.5px; font-weight: 500; color: var(--murekkep-2); }
.senaryo-kart .maliyet-bant dd { font-size: 15px; white-space: nowrap; }

.bolum-kisa { padding: 56px 0; }
.ozet-cevap { padding: 26px 30px; }
.ozet-cevap h2 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 10px; }
.ozet-cevap p { font-size: 16px; color: var(--murekkep); }

.kesit-cerceve {
	background: #fff; border: 1px solid var(--cizgi); border-radius: var(--radius);
	box-shadow: var(--golge); padding: 18px 18px 0; margin-bottom: 28px;
}
.kesit-cerceve svg { display: block; width: 100%; height: auto; }
.kesit-cerceve figcaption { padding: 12px 2px 14px; font-size: 13px; color: var(--murekkep-2); border-top: 1px solid var(--cizgi); margin-top: 12px; }

.metraj-tablo td:nth-child(2) { color: var(--murekkep-2); font-weight: 500; }
.metraj-tablo td.sayi { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--murekkep); font-weight: 600; }
.metraj-tablo tbody th { white-space: normal; min-width: 220px; }
.metraj-tablo tfoot th, .metraj-tablo tfoot td {
	background: var(--yesil-acik); border-top: 2px solid var(--yesil);
	font-weight: 800; color: var(--yesil-koyu);
}
.metraj-tablo tfoot td.sayi { color: var(--yesil-koyu); font-weight: 800; }

.formul-kutu { margin-top: 28px; }
.formul-kutu ul { list-style: none; display: grid; gap: 8px; margin-top: 6px; }
.formul-kutu li { position: relative; padding-left: 18px; color: var(--murekkep-2); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.formul-kutu li::before { content: ''; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; background: var(--yesil); border-radius: 1px; }

.hat-izgara { display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: center; }
.hat-izgara .kesit-cerceve { margin-bottom: 0; }
/* Izgara öğesi, içindeki kaydırmalı çizimin 600px genişliğiyle büyümesin. */
.hat-izgara > * { min-width: 0; }
.metraj-liste { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--radius); box-shadow: var(--golge); padding: 6px 22px; margin-bottom: 0; }
.metraj-liste div:first-child { border-top: none; }
.metraj-liste div:last-child { border-bottom: none; }
.metraj-liste dt { font-weight: 500; font-size: 14.5px; color: var(--murekkep-2); }
.hat-not { margin-top: 16px; font-size: 14.5px; color: var(--murekkep-2); }

.etki-yon {
	display: inline-block; margin: -2px 0 10px;
	font-size: 13px; font-weight: 700; color: var(--yesil-koyu);
	background: var(--yesil-acik); border-radius: var(--radius); padding: 3px 10px;
	font-variant-numeric: tabular-nums;
}
.etken-izgara { margin-top: 0; }

.tasarruf-izgara { margin-top: 48px; align-items: stretch; }
.tasarruf-baslik { font-size: 19px; font-weight: 800; margin-bottom: 4px; }
.tasarruf-baslik + .kurumsal-liste { margin-top: 14px; }
.kurumsal-liste + .tasarruf-baslik { margin-top: 30px; }
.uyari-liste li::before { background: #FBEEE8; border-color: #C4582D; }
.uyari-liste li::after { border: none; width: 2px; height: 8px; left: 8px; top: 7px; background: #C4582D; transform: none; }
.tasarruf-gorsel { display: flex; flex-direction: column; }
.tasarruf-gorsel img { flex: 1; width: 100%; min-height: 320px; max-height: 560px; object-fit: cover; }

.surec-metin .surec-kart { border-top: 3px solid var(--yesil); }

.bag-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bag-kart {
	display: flex; flex-direction: column; gap: 6px;
	background: #fff; border: 1px solid var(--cizgi); border-radius: var(--radius);
	padding: 20px 22px; color: var(--murekkep);
	transition: border-color var(--gecis), box-shadow var(--gecis);
}
.bag-kart:hover { border-color: var(--yesil); box-shadow: var(--golge); color: var(--murekkep); }
.bag-kart-ad { font-weight: 800; font-size: 15.5px; line-height: 1.35; }
.bag-kart-ad::after { content: ' →'; color: var(--yesil); }
.bag-kart-metin { font-size: 14px; color: var(--murekkep-2); line-height: 1.55; }

@media (max-width: 1024px) {
	/* Senaryo kartları 3'lü kalır: 2 sütuna düşse üçüncü kart satırda yalnız kalırdı. */
	.bag-izgara { grid-template-columns: 1fr 1fr; }
	.tasarruf-gorsel img { max-height: 420px; }
}
@media (max-width: 900px) {
	.hero-veri.uclu { grid-template-columns: 1fr; }
	.hero-veri.uclu .veri-kut { border-right: none; border-bottom: 1px solid var(--cizgi); padding: 16px 12px; }
	.hero-veri.uclu .veri-kut:last-child { border-bottom: none; }
	.hero-veri.uclu strong { font-size: 22px; }
	.senaryo-izgara, .hat-izgara { grid-template-columns: 1fr; }
	.bolum-kisa { padding: 44px 0; }
}
@media (max-width: 560px) {
	/* Çizimdeki numaralar telefonda okunur kalsın: çizim küçülmez, kutusu içinde yana kayar. */
	.kesit-kaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.kesit-kaydir svg { width: 600px; max-width: none; }
	.bag-izgara { grid-template-columns: 1fr; }
	.ozet-cevap { padding: 20px 18px; }
	.kesit-cerceve { padding: 10px 10px 0; }
	.metraj-liste { padding: 4px 16px; }
	.senaryo-kart .maliyet-bant dd { white-space: normal; }
}

/* ============================================================
   Duyarlı kırılımlar
   ============================================================ */
/* Menü sıkışmadan hamburgera geç — nav asla alt satıra kaymaz. */
@media (max-width: 1140px) {
	.ust-nav {
		position: absolute; top: 100%; left: 0; right: 0;
		background: #fff; border-bottom: 1px solid var(--cizgi);
		box-shadow: var(--golge);
		flex-direction: column; gap: 0; padding: 6px 0;
		display: none; margin: 0;
		max-height: calc(100vh - 80px); overflow-y: auto;
		-webkit-overflow-scrolling: touch; overscroll-behavior: contain;
	}
	/* Mobil tarayıcılarda araç çubuğu açılıp kapandıkça 100vh yanıltıcıdır. */
	@supports (height: 100dvh) {
		.ust-nav { max-height: calc(100dvh - 80px); }
	}
	.ust-nav.acik { display: flex; }
	.ust-nav a { padding: 13px 24px; font-size: 14px; border-bottom: none; }
	.nav-dugme {
		display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
		width: 44px; height: 44px;
		background: none; border: none; padding: 0; cursor: pointer;
	}
	.nav-dugme span { width: 22px; height: 2px; background: var(--murekkep); transition: transform var(--gecis), opacity var(--gecis); }
	.nav-dugme[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.nav-dugme[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.nav-dugme[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 1024px) {
	.galeri { grid-template-columns: repeat(3, 1fr); }
	.cozum-izgara { grid-template-columns: repeat(3, 1fr); }
	.surec-izgara, .olcu-izgara { grid-template-columns: repeat(2, 1fr); }
	.alt-izgara { grid-template-columns: 1fr 1fr; }
	.kurumsal-izgara { grid-template-columns: 1fr; gap: 34px; }
	.iletisim-izgara { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	/* Üst çubukta artık İKİ numara var; çalışma saati + e-posta ile birlikte
	   tablet genişliğinde de tek satıra sığmıyor (ölçümde EN sayfası 640px'de
	   iki satıra çıkıyordu — İngilizce numaralar "+90" öneki yüzünden daha uzun).
	   Sol blok burada tümüyle düşer: çalışma saati ve e-posta iletişim
	   bölümünde, NAP'te ve alt bilgide zaten yer alıyor. */
	.bilgi-sol { display: none; }

	/* Mobil header: solda arama, ortada logo, sağda menü düğmesi. */
	.ust-ic {
		height: 72px;
		display: grid;
		grid-template-columns: 44px 1fr 44px;
		align-items: center;
		gap: 8px;
	}
	.ara-dugme {
		display: flex; align-items: center; justify-content: center;
		width: 44px; height: 44px;
		background: none; border: none; cursor: pointer;
		color: var(--murekkep);
	}
	.ara-dugme:hover { color: var(--yesil); }
	.ust-logo { justify-self: center; }
	.ust-eylem { justify-self: end; }
	.ust-cta { display: none; }

	.saha-izgara, .ankara-izgara { grid-template-columns: 1fr; }
	.bolge-kartlari { grid-template-columns: 1fr; gap: 18px; margin-top: 34px; }
	.hero-veri { grid-template-columns: repeat(2, 1fr); }
	.veri-kut:nth-child(2) { border-right: none; }
	.veri-kut:nth-child(1), .veri-kut:nth-child(2) { border-bottom: 1px solid var(--cizgi); }
	.form-izgara { grid-template-columns: 1fr; }
	.bolum { padding: 62px 0; }
	.hero-ic { padding-top: 84px; }
	.cta-ic { justify-content: center; text-align: center; }

	.mob-cubuk {
		display: grid; grid-template-columns: 1fr 1fr 1.2fr;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
		background: #fff; border-top: 1px solid var(--cizgi);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.mob-cubuk a {
		display: flex; align-items: center; justify-content: center;
		text-align: center; padding: 14px 8px; min-height: 52px;
		font-size: 14px; font-weight: 600; color: var(--murekkep);
	}
	/* Bitişik üç hedefin sınırı görünür olsun. */
	.mob-cubuk a + a { border-left: 1px solid var(--cizgi); }
	.mob-cubuk a.vurgu { background: var(--yesil); color: #fff; border-left-color: var(--yesil); }
	/* Alt çubuğun tam yüksekliği + iPhone ana ekran çubuğu payı kadar boşluk. */
	body { padding-bottom: calc(53px + env(safe-area-inset-bottom)); }
	.wa-fab { bottom: calc(69px + env(safe-area-inset-bottom)); }
}

@media (max-width: 900px) and (min-width: 561px) {
	.cozum-izgara { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.galeri, .surec-izgara, .olcu-izgara, .cozum-izgara { grid-template-columns: 1fr; }
	.alt-izgara { grid-template-columns: 1fr; }
	.teklif-form { padding: 24px 18px; }
	.maliyet-kart { padding: 24px 20px; }
	/* Üst çubukta e-posta + iki telefon + dil aynı satıra sığmıyor; e-postayı
	   düşürüp iki numarayı ve dil seçiciyi ortalıyoruz. E-posta zaten iletişim
	   bölümünde ve alt bilgide yer alıyor.
	   Aradaki boşluk 12px'e iniyor ki 320px'de iki numara aynı satırda kalsın
	   (2×132px + 12px = 276px ≤ 288px kullanılabilir alan); dil seçici alt
	   satıra sarar. */
	.bilgi-sol { display: none; }
	.bilgi-ic { justify-content: center; gap: 14px; }
	.bilgi-sag { gap: 12px; }
}

/* ============================================================
   Mobil kullanım — dokunma hedefleri, okunabilirlik, güvenli alan
   ============================================================ */
@media (max-width: 900px) {
	/* iOS, 16px'in altındaki alanlara odaklanınca sayfayı otomatik
	   yakınlaştırır ve düzen bozulur. */
	.teklif-form input[type="text"], .teklif-form input[type="tel"],
	.teklif-form select, .teklif-form textarea,
	.ara-form input[type="search"] { font-size: 16px; }

	/* Dokunma hedefleri: WCAG 2.2 asgari 24px, pratikte 44px hedeflenir. */
	.ust-logo { min-height: 44px; }
	.dil-secici a { padding: 11px 13px; font-size: 12px; }
	.cozum-detay-ac { padding: 11px 0; margin-top: 6px; }
	.iletisim-bilgi li a { display: inline-block; padding: 10px 0; }
	.alt-blok a { padding: 10px 0; }
	.alt-blok { gap: 0; }
	.alt-blok .alt-baslik { margin-top: 8px; }
	.alt-adres { line-height: 2.1; }
	.bilgi-tel { padding: 9px 0; }
	/* Onay kutusu parmakla vurulabilecek boyutta; etiket metni normal satır
	   akışında kalmalı (flex düzeni metni sütunlara bölüyordu). */
	.kvkk-onay input { width: 20px; height: 20px; margin-right: 9px; vertical-align: -4px; }
	.kvkk-onay label { line-height: 1.75; }
	.sss-kut summary { padding-top: 17px; padding-bottom: 17px; }

	/* 11,5px etiketler telefonda okunmuyor. */
	.olcu-etiket, .ib-etiket { font-size: 12px; }

	/* Etiket/değer satırlarında uzun değer taşmasın. */
	.olcu-kart li span { min-width: 0; }
	/* break-word: yalnızca sığmayan sözcüğü böler; "anywhere" asgari genişliği
	   de küçülteceği için sığan sözcükleri de bölerdi. */
	.olcu-kart li strong { min-width: 0; overflow-wrap: break-word; }
	.maliyet-bant dt, .maliyet-bant dd { min-width: 0; overflow-wrap: break-word; }

	/* Yatay kaydırmalı tablo: kaydırılabildiği yazıyla da bildirilir. */
	.tablo-ipucu {
		display: block; margin: 0 0 10px;
		font-size: 13px; color: var(--murekkep-2); text-align: center;
	}
	.tablo-ipucu::before { content: '↔ '; color: var(--yesil); font-weight: 700; }
	.tablo-sar:focus-visible { outline: 2px solid var(--yesil); outline-offset: 2px; }

	/* Modal içi tablo dar ekranda sarılabilsin. */
	.detay-tablo th { width: auto; white-space: normal; }
	.detay-tablo th, .detay-tablo td { padding: 9px 11px; }

	/* Dokunmada gri kutu parlaması yerine kendi vurgumuz. */
	a, button, summary, label { -webkit-tap-highlight-color: rgba(21, 122, 68, .12); }
}

/* Pencere/ışık kutusu açıkken sabit çubuklar perdenin ardından sızmasın. */
body.pencere-acik .mob-cubuk,
body.pencere-acik .wa-fab { display: none; }
body.pencere-acik { overflow: hidden; }

@media (max-width: 400px) {
	.kap { padding: 0 16px; }
	.hero-ic { padding-left: 16px; padding-right: 16px; }
	.saha-kart-ic { padding: 22px 20px 26px; }
	.surec-ic { padding: 20px 18px 22px; }
	.cozum-ic { padding: 14px 14px 16px; }
	.iletisim-bilgi { padding: 24px 20px 28px; }
	.sss-kut { padding: 0 18px; }
	.sss-kut summary { padding-right: 30px; }
	.nap, .yazit, .bolge-karti { padding: 18px 18px; }
	.semt-kutusu { padding: 22px 18px; }
	.veri-kut { padding: 22px 8px 20px; }
	.veri-kut strong { font-size: 28px; }
	.hero-metin { font-size: 16px; }
	.mob-cubuk a { font-size: 13px; padding: 14px 4px; }
}

/* Yatay tutulan telefonlarda (yükseklik dar) pencereler ekrana sığsın. */
@media (max-height: 520px) and (orientation: landscape) {
	.detay-kutu { max-height: 94vh; }
	.detay-gorsel, .detay-gorsel img { max-height: 140px; height: 140px; }
	.isik-perde { padding: 12px; }
}

/* ---------- baskı ---------- */
@media print {
	.bilgi-cubuk, .ust, .wa-fab, .mob-cubuk, .hero-video, .teklif-form, .cta-serit { display: none !important; }
}