/* =========================================================
   ESD TECH — TEMEL KATMAN
   WordPress'te Kadence teması + Max Mega Menu eklentisinin
   sağladığı yapının statik karşılığı: sıfırlama, tipografi,
   kapsayıcı genişlikleri, header ve menü.

   stil.css ve altlik.css WordPress sürümünden birebir kopyalandı;
   bu dosya onlardan ÖNCE yükleniyor.

   Ölçüler çalışan WordPress sitesinden tarayıcıyla okundu:
   gövde 17px/27.2px · kapsayıcı 1290px + 24px yan boşluk ·
   içerik 1180px · header 113px (33 üst bar + 80 ana satır)
   ========================================================= */

:root {
	/* menü ve panel hareketlerinin ortak eğrisi */
	--za-ease: cubic-bezier(.22, .9, .3, 1);
}

/* --------------------------------------------------------
   1) SIFIRLAMA
   -------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	font-family: "Source Sans 3", sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: #1B2A3D;
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: var(--za-vurgu);
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 16px;
	color: var(--za-lacivert);
}

p {
	margin: 0 0 20px;
}

ul, ol {
	margin: 0 0 20px;
	padding-left: 20px;
}

/* --------------------------------------------------------
   1b) BLOK EDİTÖRÜ KARŞILIKLARI
   stil.css, WordPress'in buton bloklarına göre yazıldı.
   O blokların taban davranışı WordPress'in kendi stil
   dosyasından geliyordu; statik karşılığı burada.
   -------------------------------------------------------- */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-button {
	margin: 0;
}

.wp-block-button__link {
	display: inline-block;
	padding: 14px 24px;
	border: 0;
	border-radius: 3px;
	background: var(--za-vurgu);
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

/* bölüm altındaki tek buton ortalı dursun */
.za-bolum-buton {
	justify-content: center;
}

/* Klavyeyle gezenler için görünür odak — her yerde geçerli taban */
:focus-visible {
	outline: 2px solid var(--za-vurgu);
	outline-offset: 2px;
}

/* ekran okuyucuya özel metin */
.gizli-metin {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------
   2) KAPSAYICILAR
   -------------------------------------------------------- */
.site-container {
	width: 100%;
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 24px;
}

/* WordPress "constrained" düzeninin karşılığı:
   tam genişlik bölümün içindeki içerik 1180px'e sığar, ortalanır. */
.za-hero > *,
.za-bolum > *,
.za-neden > * {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

/* referans şeridi bu kuraldan muaf: hero'nun alt kenarında tam genişlik akıyor */
.za-hero > .za-hero-bant {
	max-width: none;
}

/* --------------------------------------------------------
   3) HEADER
   -------------------------------------------------------- */
.site-header {
	position: relative;
	z-index: 11;
	background: #fff;
}

.site-top-header-wrap {
	background: var(--za-lacivert);
}

.site-top-header-wrap .site-container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.site-main-header-wrap {
	background: #fff;
	border-bottom: 1px solid var(--za-cizgi);
}

.site-main-header-wrap .site-container {
	display: flex;
	align-items: center;
	gap: 26px;
	min-height: 80px;
	/* açılır paneller buna göre konumlanıyor */
	position: relative;
}

/* --- logo --- */
/* .brand inline-flex (stil.css) olduğu için satır tabanına oturuyor ve logo
   ölçülebilir şekilde 5px yukarıda kalıyordu. Marka bloğunu flex kabına
   çevirmek baseline etkisini kaldırıyor. */
.site-branding {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.site-branding .brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.site-title {
	margin: 0;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.2;
	color: var(--za-lacivert);
	transition: color .18s ease;
}

.site-title .marka-vurgu {
	color: var(--za-vurgu);
}

.site-branding .brand:hover .site-title {
	color: var(--za-lacivert-koyu);
}

.site-aciklama {
	margin: 2px 0 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--za-gri);
}

/* --- header sağ taraf --- */
/* --- header logosu ---
   logo.png koyu zemin için hazırlanmış (ESD harfleri beyaz); header beyaz
   olduğu için _logo-isle.py'nin ürettiği "logo-koyu" sürümü kullanılıyor. */
/* Marka bloğu. <a class="brand"> varsayılan olarak INLINE; içindeki logo
   satır tabanına oturuyor ve altında boşluk bırakarak yukarı kaymış
   görünüyordu. Flex'e çevrilip dikey ortalandı. */
.brand {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.site-title-wrap {
	display: flex;
	align-items: center;
}

.site-logo {
	display: block;
	width: auto;
	height: 40px;
	/* Kabartma: logo şeffaf olduğu için drop-shadow kutuyu değil şeklin
	   konturunu takip ediyor. İki katman — sıkı bir yakın gölge harflere
	   hacim veriyor, geniş olan yüzeyden ayırıyor. */
	filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6))
	        drop-shadow(0 1.5px 1.5px rgba(13, 35, 64, .28))
	        drop-shadow(0 4px 10px rgba(13, 35, 64, .16));
}

.header-sag {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
	flex: 0 0 auto;
}

.header-cart-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px;
	border-radius: 3px;
	color: var(--za-lacivert);
	transition: color .18s ease, background-color .18s ease;
}

.header-cart-wrap::before {
	content: "";
	width: 21px;
	height: 21px;
	flex: 0 0 21px;
	background: currentColor;
	-webkit-mask: var(--za-sepet) center / contain no-repeat;
	mask: var(--za-sepet) center / contain no-repeat;
}

.header-cart-wrap:hover {
	color: var(--za-vurgu);
	background: var(--za-zemin);
}

/* --- header butonu (Ürünler → store) --- */
.header-button {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 20px;
	border: 1px solid var(--za-vurgu);
	border-radius: 3px;
	background: var(--za-vurgu);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.005em;
	color: #fff;
	box-shadow: 0 10px 24px -12px rgba(37, 150, 190, .55);
	transition: background-color .18s ease, border-color .18s ease,
	            transform .18s cubic-bezier(.34, 1.3, .64, 1);
}

.header-button::after {
	content: "";
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
	background: currentColor;
	-webkit-mask: var(--za-dis-link) center / contain no-repeat;
	mask: var(--za-dis-link) center / contain no-repeat;
	transition: transform .18s cubic-bezier(.34, 1.3, .64, 1);
}

.header-button:hover {
	background: var(--za-vurgu-koyu);
	border-color: var(--za-vurgu-koyu);
	transform: translateY(-2px);
}

.header-button:hover::after {
	transform: translate(2px, -2px);
}

/* --------------------------------------------------------
   3a) DİL KUTUSU (TR / EN)
   Kutunun kendisi dil.js tarafından .header-sag içine, Ürünler
   butonu ile hamburgerin arasına ekleniyor — 11 sayfanın HTML'ini
   elle düzenlemek gerekmesin diye. Ölçüler .header-button ile
   eşleştirildi (12px dikey iç boşluk + 24px satır yüksekliği).
   -------------------------------------------------------- */
.za-dil {
	position: relative;
	flex: 0 0 auto;
}

.za-dil-buton {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 12px 12px 12px 14px;
	border: 1px solid var(--za-cizgi);
	border-radius: 3px;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: .04em;
	color: var(--za-lacivert);
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.za-dil-buton::after {
	content: "";
	width: 11px;
	height: 11px;
	flex: 0 0 11px;
	background: currentColor;
	-webkit-mask: var(--za-menu-ok) center / contain no-repeat;
	mask: var(--za-menu-ok) center / contain no-repeat;
	transition: transform .2s var(--za-ease);
}

.za-dil-buton:hover {
	border-color: #C7D2DE;
	background: var(--za-zemin);
}

.za-dil-buton:focus-visible {
	outline: 2px solid var(--za-vurgu);
	outline-offset: 2px;
}

.za-dil-buton[aria-expanded="true"] {
	border-color: var(--za-lacivert);
	background: var(--za-zemin);
}

.za-dil-buton[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

.za-dil-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 30;
	min-width: 168px;
	padding: 6px;
	border: 1px solid var(--za-cizgi);
	border-radius: 3px;
	background: #fff;
	/* katmanlı gölge — tek düz gölge yerine yakın + uzak katman */
	box-shadow: 0 2px 6px -2px rgba(13, 35, 64, .12),
	            0 18px 38px -14px rgba(13, 35, 64, .28);
	animation: za-dil-ac .18s var(--za-ease) both;
}

@keyframes za-dil-ac {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.za-dil-secenek {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 2px;
	font-size: 14.5px;
	color: var(--za-lacivert);
	text-decoration: none;
	transition: background-color .16s ease, color .16s ease;
}

.za-dil-secenek b {
	min-width: 24px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--za-gri);
	transition: color .16s ease;
}

.za-dil-secenek:hover {
	background: var(--za-zemin);
	color: var(--za-vurgu);
}

.za-dil-secenek:hover b {
	color: var(--za-vurgu);
}

.za-dil-secenek:focus-visible {
	outline: 2px solid var(--za-vurgu);
	outline-offset: -2px;
}

.za-dil-secenek[aria-current="true"] {
	background: var(--za-zemin);
	font-weight: 600;
}

.za-dil-secenek[aria-current="true"] b {
	color: var(--za-vurgu);
}

/* --------------------------------------------------------
   3b) EK İKONLAR
   stil.css'te 8 kategori ikonu var. ESD TECH'in yazılım
   tarafı ve kurumsal menüsü için gerekenler burada —
   stil.css'e dokunulmadı. Hepsi aynı sistem: maskeleme.
   -------------------------------------------------------- */
:root {
	--za-sepet: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 3.5h2.2l2.4 11.2a1.6 1.6 0 0 0 1.6 1.3h8.8a1.6 1.6 0 0 0 1.6-1.2l1.6-6.3H6.2'/><circle cx='9.4' cy='20' r='1.5'/><circle cx='17.4' cy='20' r='1.5'/></svg>");
	--za-dis-link: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4h6v6'/><path d='M20 4 11 13'/><path d='M18 14v4.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 18.5v-11A1.5 1.5 0 0 1 5.5 6H10'/></svg>");
	--za-menu-ok: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='m2 4.4 4 4 4-4'/></svg>");
}

/* hizmet ikonları */
.ik-plaka {
	--ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='2.2' y='6.5' width='19.6' height='11' rx='1.6'/><path d='M6 10.4v3.2M9.2 10.4v3.2M12.4 10.4v3.2M15.6 10.4h2.6M15.6 13.6h2.6'/></svg>");
}

.ik-konteyner {
	--ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='7' width='19' height='10.5' rx='1.2'/><path d='M6.4 7v10.5M10.2 7v10.5M14 7v10.5M17.8 7v10.5'/></svg>");
}

.ik-bariyer {
	--ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21V8.5'/><rect x='2.2' y='4.5' width='3.6' height='4' rx='1'/><path d='M6.6 6.5h14.2a1 1 0 0 1 1 1v1.6a1 1 0 0 1-1 1H6.6z'/><path d='M10 6.5 8.4 10.1M14 6.5 12.4 10.1M18 6.5 16.4 10.1'/></svg>");
}

.ik-veri {
	--ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3.2' y='3' width='17.6' height='5.6' rx='1.3'/><rect x='3.2' y='11.2' width='17.6' height='5.6' rx='1.3'/><path d='M6.6 5.8h.01M6.6 14h.01M10 5.8h3.4M10 14h3.4'/><path d='M8 19.4h8M12 16.8v2.6'/></svg>");
}

/* kurumsal menü ikonları */
.ik-bina {
	--ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21V8l8-5 8 5v13z'/><path d='M9.5 21v-6h5v6'/></svg>");
}

.ik-hedef {
	--ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v3M12 18v3M3 12h3M18 12h3'/><circle cx='12' cy='12' r='5.5'/><circle cx='12' cy='12' r='1.6'/></svg>");
}

.ik-belge {
	--ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M13.5 2.8H6.4a1.6 1.6 0 0 0-1.6 1.6v15.2a1.6 1.6 0 0 0 1.6 1.6h11.2a1.6 1.6 0 0 0 1.6-1.6V8.4z'/><path d='M13.5 2.8v5.6h5.7'/><path d='M8.4 13.4h7.2M8.4 17h4.8'/></svg>");
}

.ik-surec {
	--ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h7M3 12h13M3 18h9'/><path d='m17 3.5 3.5 2.5L17 8.5M20 15l-3.5 3 3.5 3'/></svg>");
}

/* Haberler — "Çalışma Sürecimiz" bu ikonla değiştirildi (12 Ağustos) */
.ik-haber {
	--ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M17.4 20.4H5.2a1.8 1.8 0 0 1-1.8-1.8V5.4a1.2 1.2 0 0 1 1.2-1.2h11a1.2 1.2 0 0 1 1.2 1.2v13.2a1.8 1.8 0 0 0 1.8 1.8 1.8 1.8 0 0 0 1.8-1.8V9.6h-3.6'/><path d='M7 8.2h6.4M7 12h6.4M7 15.6h4'/></svg>");
}

/* --------------------------------------------------------
   4) MENÜ
   Açılır paneller perde gibi iniyor (clip-path), satırlar
   sırayla beliriyor. Hem üzerine gelince hem klavye/dokunma
   ile açılıyor — JS `.acik` sınıfını ekliyor.
   -------------------------------------------------------- */
.za-nav {
	flex: 1 1 auto;
	min-width: 0;
}

.za-nav-liste {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.za-nav-oge {
	margin: 0;
	list-style: none;
	/* panelle bağlantı: fare aradaki boşlukta paneli kapatmasın */
	padding: 15px 0;
}

.za-nav-bag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	position: relative;
	padding: 10px 15px;
	border-radius: 3px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.005em;
	color: var(--za-lacivert);
	white-space: nowrap;
	transition: color .18s ease;
}

/* altta soldan açılan ince kırmızı çizgi */
.za-nav-bag::after {
	content: "";
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 2px;
	height: 2px;
	background: var(--za-vurgu);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .22s cubic-bezier(.34, 1.3, .64, 1);
}

.za-nav-bag:hover,
.za-nav-bag.acik-sayfa,
.za-nav-acilir:hover > .za-nav-bag,
.za-nav-acilir.acik > .za-nav-bag {
	color: var(--za-vurgu);
}

.za-nav-bag:hover::after,
.za-nav-bag.acik-sayfa::after,
.za-nav-acilir:hover > .za-nav-bag::after,
.za-nav-acilir.acik > .za-nav-bag::after {
	transform: scaleX(1);
}

/* --- aşağı ok: panelin olduğunu belli ediyor --- */
.za-ok-alt {
	width: 9px;
	height: 9px;
	flex: 0 0 9px;
	background: currentColor;
	opacity: .5;
	-webkit-mask: var(--za-menu-ok) center / contain no-repeat;
	mask: var(--za-menu-ok) center / contain no-repeat;
	transition: transform .3s var(--za-ease), opacity .3s var(--za-ease);
}

.za-nav-acilir:hover .za-ok-alt,
.za-nav-acilir.acik .za-ok-alt {
	transform: rotate(180deg);
	opacity: 1;
}

/* --------------------------------------------------------
   4b) AÇILIR PANEL
   -------------------------------------------------------- */
.za-mega {
	position: absolute;
	top: 100%;
	left: 50%;
	width: max-content;
	transform: translateX(-50%);
	/* nav ile panel arası köprü — fare boşlukta kaybolmasın */
	padding-top: 12px;
	opacity: 0;
	visibility: hidden;
	/* perde etkisi: yukarıdan aşağı iniyor.
	   Yanlarda negatif pay var ki gölge kırpılmasın. */
	clip-path: inset(0 -70px 100% -70px);
	transition: opacity .3s var(--za-ease),
	            clip-path .55s var(--za-ease),
	            visibility .55s;
	z-index: 30;
}

.za-nav-acilir:hover .za-mega,
.za-nav-acilir.acik .za-mega {
	opacity: 1;
	visibility: visible;
	clip-path: inset(0 -70px -70px -70px);
}

.za-mega-ic {
	background: #fff;
	border: 1px solid var(--za-cizgi);
	border-top: 2px solid var(--za-vurgu);
	border-radius: 0 0 4px 4px;
	box-shadow: 0 34px 72px -42px rgba(13, 35, 64, .5),
	            0 5px 16px -10px rgba(13, 35, 64, .2);
}

.za-mega-grid {
	display: grid;
	padding: 9px;
}

.za-mega.tek .za-mega-grid {
	grid-template-columns: minmax(268px, 1fr);
}

/* iki kolonlu panel: ortada ince ayırıcı */
.za-mega.iki .za-mega-grid {
	grid-template-columns: repeat(2, minmax(268px, 1fr));
	column-gap: 0;
}

.za-mega-kol + .za-mega-kol {
	padding-left: 14px;
	margin-left: 14px;
	border-left: 1px solid var(--za-cizgi);
}

/* --- kolon başlığı --- */
.za-mg-h {
	padding: 6px 15px 9px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--za-cizgi);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(27, 42, 61, .4);
}

/* --- panel satırı --- */
.za-mg {
	position: relative;
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 11px 15px;
	border-radius: 2px;
	text-decoration: none;
}

/* sol kenarda açılan kırmızı çizgi */
.za-mg::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	bottom: 9px;
	width: 2px;
	background: var(--za-vurgu);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .32s var(--za-ease);
}

.za-mg:hover {
	background: rgba(37, 150, 190, .06);
}

.za-mg:hover::before {
	transform: scaleY(1);
}

/* açılır panelde bulunduğumuz sayfa — _kok-sayfa.py aria-current ekliyor */
.za-mg[aria-current="page"] {
	background: rgba(37, 150, 190, .06);
}

.za-mg[aria-current="page"]::before {
	transform: scaleY(1);
}

.za-mg[aria-current="page"] .za-mg-yazi b {
	color: var(--za-vurgu);
}

.za-mg-ikon {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	background: rgba(27, 42, 61, .5);
	-webkit-mask: var(--ikon) center / contain no-repeat;
	mask: var(--ikon) center / contain no-repeat;
	transition: background-color .28s var(--za-ease),
	            transform .28s var(--za-ease);
}

.za-mg:hover .za-mg-ikon {
	background: var(--za-vurgu);
	transform: scale(1.06);
}

.za-mg-yazi {
	min-width: 0;
}

.za-mg b {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.34;
	letter-spacing: -.008em;
	color: var(--za-lacivert);
	transition: color .2s ease;
}

.za-mg:hover b {
	color: var(--za-vurgu);
}

/* satırın altındaki küçük açıklama */
.za-mg i {
	display: block;
	margin-top: 4px;
	font-style: normal;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(27, 42, 61, .38);
}

/* --- satırlar sırayla beliriyor --- */
.za-mega-grid .za-mg,
.za-mega-grid .za-mg-h {
	opacity: 0;
	transform: translateY(9px);
	transition: opacity .42s var(--za-ease),
	            transform .42s var(--za-ease),
	            background-color .26s var(--za-ease);
}

.za-nav-acilir:hover .za-mega-grid .za-mg,
.za-nav-acilir:hover .za-mega-grid .za-mg-h,
.za-nav-acilir.acik .za-mega-grid .za-mg,
.za-nav-acilir.acik .za-mega-grid .za-mg-h {
	opacity: 1;
	transform: none;
}

/* gecikmeler: her kolon kendi içinde sırayla açılıyor */
.za-nav-acilir:hover .za-mega-kol > :nth-child(1),
.za-nav-acilir.acik .za-mega-kol > :nth-child(1),
.za-nav-acilir:hover .za-mega.tek .za-mega-grid > :nth-child(1),
.za-nav-acilir.acik .za-mega.tek .za-mega-grid > :nth-child(1) { transition-delay: .02s; }

.za-nav-acilir:hover .za-mega-kol > :nth-child(2),
.za-nav-acilir.acik .za-mega-kol > :nth-child(2),
.za-nav-acilir:hover .za-mega.tek .za-mega-grid > :nth-child(2),
.za-nav-acilir.acik .za-mega.tek .za-mega-grid > :nth-child(2) { transition-delay: .06s; }

.za-nav-acilir:hover .za-mega-kol > :nth-child(3),
.za-nav-acilir.acik .za-mega-kol > :nth-child(3),
.za-nav-acilir:hover .za-mega.tek .za-mega-grid > :nth-child(3),
.za-nav-acilir.acik .za-mega.tek .za-mega-grid > :nth-child(3) { transition-delay: .1s; }

.za-nav-acilir:hover .za-mega-kol > :nth-child(4),
.za-nav-acilir.acik .za-mega-kol > :nth-child(4),
.za-nav-acilir:hover .za-mega.tek .za-mega-grid > :nth-child(4),
.za-nav-acilir.acik .za-mega.tek .za-mega-grid > :nth-child(4) { transition-delay: .14s; }

.za-nav-acilir:hover .za-mega-kol > :nth-child(5),
.za-nav-acilir.acik .za-mega-kol > :nth-child(5) { transition-delay: .18s; }

.za-nav-acilir:hover .za-mega-kol > :nth-child(6),
.za-nav-acilir.acik .za-mega-kol > :nth-child(6) { transition-delay: .22s; }

.za-nav-acilir:hover .za-mega-kol > :nth-child(7),
.za-nav-acilir.acik .za-mega-kol > :nth-child(7) { transition-delay: .26s; }

/* --- panel alt şeridi --- */
.za-mega-alt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	padding: 14px 24px;
	border-top: 1px solid var(--za-cizgi);
	background: rgba(13, 35, 64, .03);
}

.za-mega-alt span {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: rgba(27, 42, 61, .45);
}

.za-mega-alt a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding-bottom: 4px;
	border-bottom: 1.5px solid var(--za-vurgu);
	white-space: nowrap;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--za-lacivert);
	transition: gap .3s var(--za-ease), color .3s var(--za-ease);
}

.za-mega-alt a:hover {
	color: var(--za-vurgu);
	gap: 15px;
}

.za-mega-alt-ok {
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
	background: currentColor;
	-webkit-mask: var(--za-ok) center / contain no-repeat;
	mask: var(--za-ok) center / contain no-repeat;
}

/* --------------------------------------------------------
   5) SABİT (STICKY) HEADER
   -------------------------------------------------------- */
.site-main-header-wrap.sabit {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	box-shadow: 0 10px 30px -14px rgba(13, 35, 64, .25);
	animation: za-header-in .28s var(--za-ease) both;
}

.site-main-header-wrap.sabit .site-container {
	min-height: 68px;
}

.site-main-header-wrap.sabit .za-nav-oge {
	padding: 9px 0;
}

@keyframes za-header-in {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

body.header-sabit .site-header {
	padding-bottom: 80px;
}

/* --------------------------------------------------------
   6) MOBİL MENÜ DÜĞMESİ
   -------------------------------------------------------- */
.menu-ac {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--za-cizgi);
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease;
	/* panelin üstünde kalsın ki kapatma düğmesi tıklanabilsin */
	position: relative;
	z-index: 70;
}

.menu-ac-cizgi {
	position: relative;
	display: block;
	width: 19px;
	height: 1.8px;
	background: var(--za-lacivert);
	transition: background-color .2s ease;
}

.menu-ac-cizgi::before,
.menu-ac-cizgi::after {
	content: "";
	position: absolute;
	left: 0;
	width: 19px;
	height: 1.8px;
	background: var(--za-lacivert);
	transition: transform .22s cubic-bezier(.34, 1.3, .64, 1);
}

.menu-ac-cizgi::before { top: -6px; }
.menu-ac-cizgi::after  { top: 6px; }

.menu-ac:hover {
	border-color: var(--za-vurgu);
}

.menu-ac[aria-expanded="true"] .menu-ac-cizgi {
	background: transparent;
}

.menu-ac[aria-expanded="true"] .menu-ac-cizgi::before {
	transform: translateY(6px) rotate(45deg);
}

.menu-ac[aria-expanded="true"] .menu-ac-cizgi::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* Arka planı karartan perde.
   z-index DİKKAT: .site-header'ın kendi `z-index: 11`i bir yığın
   bağlamı açıyor, yani header'ın içindeki hiçbir şey (menü paneli,
   kapatma düğmesi) 11'in üstüne çıkamıyor. Perdeye 50 verilince
   perde header'ın ÜSTÜNDE kalıyor ve ekran kararıp hiçbir yere
   tıklanamıyordu. Perde header'ın altında, hero'nun üstünde olmalı. */
.menu-perde {
	position: fixed;
	inset: 0;
	background: rgba(8, 22, 40, .55);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s;
	z-index: 9;
}

.menu-perde.acik {
	opacity: 1;
	visibility: visible;
}

/* --------------------------------------------------------
   7) TABLET
   -------------------------------------------------------- */
@media (max-width: 1140px) {
	.site-main-header-wrap .site-container {
		gap: 14px;
	}

	.za-nav-bag {
		padding: 10px 11px;
		font-size: 14.5px;
	}

	.za-mega.iki .za-mega-grid {
		grid-template-columns: repeat(2, minmax(238px, 1fr));
	}
}

/* --------------------------------------------------------
   8) MOBİL — menü sağdan açılan panel
   -------------------------------------------------------- */
@media (max-width: 920px) {
	.menu-ac {
		display: inline-flex;
	}

	/*
	 * ⚠️ ÖNEMLİ — mobil menünün en sinsi hatası buradaydı.
	 * Sabitlenen header'a giriş animasyonu veriyoruz; `animation-fill-mode: both`
	 * yüzünden animasyon bittikten sonra da `transform: translateY(0)` uygulanmış
	 * kalıyor. Üzerinde transform bulunan bir element, içindeki `position: fixed`
	 * elemanlar için "içeren blok" hâline geliyor — yani menü paneli artık
	 * ekranı değil HEADER'I referans alıyor ve header yüksekliğine (68px)
	 * hapsoluyor: panel açılıyor ama içindeki liste görünmüyor.
	 *
	 * Belirtisi tam da buydu: sayfa en üstteyken menü sorunsuz açılıyor,
	 * biraz kaydırdıktan sonra açılınca panel boş bir beyaz şeride dönüyor.
	 * Mobilde sabit header animasyonuna ihtiyaç yok, kapatıyoruz.
	 */
	.site-main-header-wrap.sabit {
		animation: none;
	}

	.za-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(360px, 88vw);
		flex: none;
		/* Panelin kendi zemini OLMAK ZORUNDA: yoksa arkadaki hero
		   görünüp yazılar okunmuyor. */
		background: #fff;
		box-shadow: -18px 0 44px -20px rgba(13, 35, 64, .4);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(100%);
		transition: transform .3s var(--za-ease);
		z-index: 60;
	}

	.za-nav.acik {
		transform: translateX(0);
	}

	/* panel başlığı — kapatma düğmesinin yanında marka dursun */
	.za-nav::before {
		content: "Menü";
		display: block;
		padding: 26px 22px 14px;
		border-bottom: 1px solid var(--za-cizgi);
		font-family: "Plus Jakarta Sans", sans-serif;
		font-size: 11.5px;
		font-weight: 700;
		letter-spacing: .2em;
		text-transform: uppercase;
		color: var(--za-gri);
	}

	/* CSS ile yazılan metin JS çevirisine takılmıyor; dil.js kök elemente
	   koyduğu data-dil ile buradan çevriliyor. Ezme kuralı MUTLAKA bu medya
	   sorgusunun içinde kalmalı — dışarı çıkarsa masaüstünde de ::before
	   oluşup menünün başına "Menu" yazısı düşer. */
	html[data-dil="en"] .za-nav::before {
		content: "Menu";
	}

	.za-nav-liste {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		padding: 8px 14px 26px;
	}

	.za-nav-oge {
		width: 100%;
		padding: 0;
		border-bottom: 1px solid var(--za-cizgi);
	}

	.za-nav-oge:last-child {
		border-bottom: 0;
	}

	.za-nav-bag {
		width: 100%;
		justify-content: space-between;
		padding: 16px 8px;
		font-size: 16px;
		font-weight: 700;
	}

	/* mobilde alt çizgi yerine düz renk vurgusu */
	.za-nav-bag::after {
		display: none;
	}

	/* --- mobilde panel akışa giriyor (perde efekti yok) --- */
	.za-mega {
		position: static;
		width: auto;
		transform: none;
		padding-top: 0;
		clip-path: none;
		opacity: 1;
		visibility: visible;
		transition: none;
		/* kapalıyken hiç yer kaplamasın */
		display: none;
	}

	.za-nav-acilir.acik .za-mega {
		display: block;
		clip-path: none;
	}

	/* üzerine gelme mobilde paneli açmasın — sadece dokunma açsın */
	.za-nav-acilir:hover .za-mega {
		display: none;
	}

	.za-nav-acilir.acik:hover .za-mega {
		display: block;
	}

	.za-mega-ic {
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: var(--za-zemin);
	}

	.za-mega-grid,
	.za-mega.tek .za-mega-grid,
	.za-mega.iki .za-mega-grid {
		grid-template-columns: minmax(0, 1fr);
		padding: 6px 4px 10px;
	}

	.za-mega-kol + .za-mega-kol {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
		margin-top: 10px;
	}

	.za-mg {
		gap: 12px;
		padding: 12px 10px;
	}

	.za-mg-ikon {
		width: 22px;
		height: 22px;
		flex: 0 0 22px;
	}

	.za-mg b {
		font-size: 14.5px;
	}

	.za-mg-h {
		padding: 8px 10px 8px;
	}

	/* mobilde satırlar gecikmeli açılmıyor — panel zaten akışta */
	.za-mega-grid .za-mg,
	.za-mega-grid .za-mg-h {
		opacity: 1;
		transform: none;
		transition: background-color .2s ease;
		transition-delay: 0s !important;
	}

	.za-mega-alt {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 14px 14px 16px;
		background: transparent;
	}

	.header-button {
		padding: 11px 14px;
		font-size: 14px;
	}

	/* dil kutusu da butonla birlikte küçülsün */
	.za-dil-buton {
		padding: 11px 9px 11px 11px;
		font-size: 13px;
		line-height: 22px;
	}
}

@media (max-width: 600px) {
	.site-container {
		padding: 0 20px;
	}

	.site-main-header-wrap .site-container {
		min-height: 68px;
	}

	.site-title {
		font-size: 22px;
	}

	.site-aciklama {
		display: none;
	}

	body.header-sabit .site-header {
		padding-bottom: 68px;
	}

	/* Dar ekranda header sağında dört öğe yan yana duruyor:
	   Ürünler · dil · hamburger. Aralıklar ve dil kutusu daraltıldı
	   ki 375px genişlikte taşma olmasın. */
	.header-sag {
		gap: 10px;
	}

	.za-dil-buton {
		gap: 5px;
		padding: 10px 8px 10px 10px;
		font-size: 12.5px;
	}

	.za-dil-panel {
		min-width: 156px;
	}
}

/* en dar ekranlarda Ürünler butonunun dış bağlantı ikonu yer kaplamasın */
@media (max-width: 430px) {
	.header-button::after {
		display: none;
	}
}

/* --------------------------------------------------------
   9) HAREKET AZALTMA TERCİHİ
   -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.site-main-header-wrap.sabit {
		animation: none;
	}

	.za-mega,
	.za-nav,
	.menu-perde,
	.za-mega-grid .za-mg,
	.za-mega-grid .za-mg-h {
		transition-duration: .01ms;
		transition-delay: 0s !important;
	}

	.za-mega-grid .za-mg,
	.za-mega-grid .za-mg-h {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------
   10) İKİ TARAFLI BÖLÜM  (.za-split)
   Bir yanda görsel, öbür yanda başlık + hizmet kutucukları.
   `.za-split-ters` görseli sola alıyor.
   -------------------------------------------------------- */
.za-split {
	padding: 92px 24px 96px;
	background: #fff;
	/* clip = kırpar ama kaydırılabilir kap OLUŞTURMAZ.
	   Görsel kapsayıcının dışına taştığı için burada şart. */
	overflow: hidden;
	overflow: clip;
	position: relative;
}

.za-split-ters {
	background: var(--za-zemin);
}

/* --------------------------------------------------------
   10a) ARKA PLAN HARELERİ
   İnce eğri hatlar + minik artı işaretleri. Görsellerin arkası
   şeffaf olduğu için bu katman onların ardından görünüyor.
   -------------------------------------------------------- */
.za-split-hare {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	overflow: clip;
}

.za-split-hare svg {
	position: absolute;
	fill: none;
	stroke: rgba(13, 35, 64, .17);
	stroke-width: 1;
	stroke-linecap: round;
}

.za-split-hare .h1 {
	left: -5%;
	top: -12%;
	width: 82%;
	height: 78%;
}

.za-split-hare .h2 {
	right: -8%;
	bottom: -16%;
	width: 70%;
	height: 86%;
	stroke: rgba(13, 35, 64, .12);
}

.za-split-hare .h3 {
	right: 4%;
	top: -6%;
	width: 48%;
	height: 96%;
	stroke: rgba(37, 150, 190, .13);
}

/* minik artılar — Emons/Eşgün dilindeki nokta işaretleri */
.za-split-hare .ha1,
.za-split-hare .ha2 {
	width: 13px;
	height: 13px;
	stroke-width: 1.4;
}

.za-split-hare .ha1 {
	left: 17%;
	top: 20%;
	stroke: rgba(37, 150, 190, .34);
}

.za-split-hare .ha2 {
	right: 24%;
	bottom: 18%;
	stroke: rgba(13, 35, 64, .24);
}

/* Arka plan dokusu: hero'daki nokta ızgarasının açık zemin sürümü.
   Görsellerin arkası şeffaf olduğu için bu doku onların ardından
   görünüyor ve bölüm boş bir beyazlık gibi durmuyor. */
.za-split::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(13, 35, 64, .1) 1px, transparent 1px);
	background-size: 27px 27px;
	opacity: .5;
}

/* köşeden gelen geniş, çok soluk ışık */
.za-split::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(820px 560px at 86% 10%,
	            rgba(37, 150, 190, .055),
	            rgba(37, 150, 190, 0) 70%);
}

.za-split-ters::after {
	background: radial-gradient(820px 560px at 14% 10%,
	            rgba(13, 35, 64, .07),
	            rgba(13, 35, 64, 0) 70%);
}

.za-split-ic {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1.12fr;
	/* Görsel ile metin/kart tarafı fazla yakın duruyordu; ara açıldı. */
	gap: 72px;
	align-items: center;
	max-width: 1180px;
	margin: 0 auto;
}

/* Ters bölümde metin tarafında 3 kolonlu kart ızgarası var; görsele
   biraz daha az yer bırakılıyor ki kartlar daralmasın. */
.za-split-ters .za-split-ic {
	grid-template-columns: 0.88fr 1fr;
}

/* Görsel kendi tarafında kapsayıcıyı bir miktar aşıyor: biri sola,
   öbürü sağa dayanıyor. Ölçü kasıtlı olarak ölçülü tutuldu —
   tam kenara kadar uzatınca bölümü eziyordu.
   Taşan kısım .za-split üzerindeki `overflow: clip` ile kırpılıyor. */
.za-split-gorsel {
	margin-right: calc(-1 * max(0px, (100vw - 1180px) / 2 - 62px));
}

.za-split-ters .za-split-gorsel {
	margin-right: 0;
	margin-left: calc(-1 * max(0px, (100vw - 1180px) / 2 - 62px));
}

/* --- metin tarafı --- */
.za-split-metin .za-etiket {
	margin: 0 0 18px !important;
}

.za-split-baslik {
	margin: 0 0 16px !important;
	font-size: clamp(27px, 2.9vw, 38px);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -.03em;
	color: var(--za-lacivert);
}

.za-split-alt {
	margin: 0 0 28px !important;
	max-width: 52ch;
	font-size: var(--za-fs-body);
	line-height: 1.7;
	color: var(--za-gri);
}

/* --- görsel tarafı --- */
.za-split-gorsel {
	position: relative;
}

/* <picture> varsayılan olarak satır içi — kutuyu doldurmalı */
.za-split-gorsel picture {
	display: block;
}

/* Görsellerin arka planı silinmiş (bkz. _isle.py): kutu gölgesi ve
   köşe yuvarlaması YOK — nesne doğrudan bölümün dokusu üzerinde
   duruyor, kendi gölgesini de beraberinde getiriyor. */
.za-split-gorsel img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* nesnenin arkasında yumuşak hare — boşlukta asılı gibi durmasın */
.za-split-gorsel::before {
	content: "";
	position: absolute;
	inset: -8% -5%;
	pointer-events: none;
	z-index: 0;
	background: radial-gradient(50% 50% at 50% 52%,
	            rgba(13, 35, 64, .08),
	            rgba(13, 35, 64, 0) 72%);
}

.za-split-gorsel picture,
.za-split-gorsel img {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------
   10b) HİZMET KARTLARI  (.za-hk)
   Kare kartlar; her kartta o hizmete ait şeffaf zeminli
   görsel var. Header'ın çizgi ikonları burada kullanılmıyor —
   aynı simgeyi iki yerde görmek tekrar hissi veriyordu.
   -------------------------------------------------------- */
.za-hk-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

/* Altı hizmet 3+3 duruyor. İki kolonda (3 satır) bölüm ortalandığında
   son satır görselin altında kalıyordu. */
.za-hk-grid.uc {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.za-hk {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 16px 16px 20px;
	background: #fff;
	border: 1px solid var(--za-cizgi);
	border-radius: 4px;
	text-decoration: none;
	overflow: hidden;
	overflow: clip;
	transition: border-color .22s ease, box-shadow .22s ease,
	            transform .22s cubic-bezier(.34, 1.3, .64, 1);
}

.za-hk:hover {
	border-color: rgba(37, 150, 190, .35);
	box-shadow: 0 2px 5px rgba(13, 35, 64, .05),
	            0 18px 34px -22px rgba(13, 35, 64, .38);
	transform: translateY(-3px);
}

.za-hk:focus-visible {
	outline: 2px solid var(--za-vurgu);
	outline-offset: 2px;
}

/* alt kenardan dolan kırmızı hat */
.za-hk::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--za-vurgu);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s var(--za-ease);
}

.za-hk:hover::after {
	transform: scaleX(1);
}

/* Görsel alanı sabit yükseklikte: üretilen görsellerin oranları
   farklı (dikey bariyer, yatay switch), sabit kutu olmadan kartlar
   birbirini tutmuyordu. */
.za-hk-gorsel {
	/* Görsel mutlak konumla bu kutuya sabitleniyor. Önce ızgara +
	   yüzde yükseklikle denendi; ızgara elemanında yüzde yükseklik
	   tutmadığı için görsel 116px kutuda 393px'e çıkıp yazıların
	   üstüne biniyordu. */
	position: relative;
	height: 116px;
	margin-bottom: 14px;
	/* şeffaf görselin arkasında yumuşak hare — nesne havada durmasın */
	background: radial-gradient(56% 56% at 50% 60%,
	            rgba(13, 35, 64, .06),
	            rgba(13, 35, 64, 0) 70%);
}

.za-hk-gorsel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform .4s var(--za-ease);
}

.za-hk:hover .za-hk-gorsel img {
	transform: translateY(-5px);
}

.za-hk-etiket {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--za-vurgu);
}

.za-hk-ad {
	margin-top: 7px;
	padding-right: 20px;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.34;
	letter-spacing: -.012em;
	color: var(--za-lacivert);
	transition: color .18s ease;
}

.za-hk:hover .za-hk-ad {
	color: var(--za-vurgu);
}

.za-hk-ok {
	position: absolute;
	right: 15px;
	bottom: 18px;
	width: 15px;
	height: 15px;
	background: var(--za-vurgu);
	-webkit-mask: var(--za-ok) center / contain no-repeat;
	mask: var(--za-ok) center / contain no-repeat;
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity .3s var(--za-ease), transform .3s var(--za-ease);
}

.za-hk:hover .za-hk-ok {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------
   10b-eski) alt alta kutucuklar — artık kullanılmıyor,
   kare kartlara geçildi. Aşağıdaki kurallar HTML'de
   karşılığı olmadığı için etkisiz.
   -------------------------------------------------------- */
.za-hz-grid {
	display: grid;
	gap: 9px;
}

.za-hz {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--za-cizgi);
	border-radius: 3px;
	background: #fff;
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease,
	            transform .2s cubic-bezier(.34, 1.3, .64, 1);
}

.za-hz:hover {
	border-color: rgba(37, 150, 190, .42);
	box-shadow: 0 1px 2px rgba(13, 35, 64, .04),
	            0 12px 26px -18px rgba(13, 35, 64, .35);
	transform: translateX(4px);
}

.za-hz:focus-visible {
	outline: 2px solid var(--za-vurgu);
	outline-offset: 2px;
}

.za-hz-ikon {
	width: 25px;
	height: 25px;
	flex: 0 0 25px;
	background: rgba(27, 42, 61, .48);
	-webkit-mask: var(--ikon) center / contain no-repeat;
	mask: var(--ikon) center / contain no-repeat;
	transition: background-color .2s ease, transform .2s ease;
}

.za-hz:hover .za-hz-ikon {
	background: var(--za-vurgu);
	transform: scale(1.07);
}

.za-hz-yazi {
	flex: 1 1 auto;
	min-width: 0;
}

.za-hz-yazi b {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.34;
	letter-spacing: -.01em;
	color: var(--za-lacivert);
	transition: color .18s ease;
}

.za-hz:hover .za-hz-yazi b {
	color: var(--za-vurgu);
}

.za-hz-yazi i {
	display: block;
	margin-top: 3px;
	font-style: normal;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--za-gri);
}

.za-hz-ok {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	background: #C2CDDA;
	-webkit-mask: var(--za-ok) center / contain no-repeat;
	mask: var(--za-ok) center / contain no-repeat;
	transition: background-color .2s ease, transform .2s ease;
}

.za-hz:hover .za-hz-ok {
	background: var(--za-vurgu);
	transform: translateX(3px);
}

/* --------------------------------------------------------
   10c) BÖLÜM AYIRACI
   İki bölümü birbirinden ayıran tek satırlık şerit.
   -------------------------------------------------------- */
.za-ayirac {
	padding: 30px 24px;
	background: var(--za-lacivert);
	text-align: center;
	position: relative;
	overflow: hidden;
	overflow: clip;
}

/* köşeden gelen hafif kırmızı ışık */
.za-ayirac::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(680px 240px at 50% 0%,
	            rgba(37, 150, 190, .22),
	            rgba(37, 150, 190, 0) 72%);
}

.za-ayirac p {
	position: relative;
	z-index: 1;
	max-width: 76ch;
	margin: 0 auto !important;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .01em;
	color: rgba(255, 255, 255, .8);
}

/* --------------------------------------------------------
   10d) İKİ TARAFLI BÖLÜM — TABLET / MOBİL
   -------------------------------------------------------- */
@media (max-width: 980px) {
	.za-split-ic,
	.za-split-ters .za-split-ic {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	/* mobilde görsel her zaman metnin ALTINDA kalsın —
	   ters bölümde de sıra bozulmasın */
	.za-split-ters .za-split-metin {
		order: 1;
	}

	.za-split-ters .za-split-gorsel {
		order: 2;
	}

	/* dar ekranda üç kolon sıkışıyor */
	.za-hk-grid.uc {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Büyük bölüm görselleri mobilde gizleniyor: küçük ekranda
	   ayrıntıları okunmuyor, sadece yer kaplıyor. Hizmet kartlarının
	   kendi görselleri işi zaten anlatıyor. */
	.za-split-gorsel {
		display: none;
	}

	.za-split-ic,
	.za-split-ters .za-split-ic {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
}

@media (max-width: 600px) {
	.za-split {
		padding: 58px 20px 62px;
	}

	.za-ayirac {
		padding: 24px 20px;
	}

	.za-ayirac p {
		font-size: 14.5px;
	}

	.za-hk-grid,
	.za-hk-grid.uc {
		gap: 9px;
	}

	.za-hk {
		padding: 13px 13px 17px;
	}

	.za-hk-gorsel {
		height: 88px;
		margin-bottom: 11px;
	}

	.za-hk-ad {
		font-size: 13.5px;
		padding-right: 14px;
	}

	/* dar ekranda ok yer kaplamasın */
	.za-hk-ok {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.za-hz,
	.za-hz-ikon,
	.za-hz-ok {
		transition-duration: .01ms;
	}

	.za-hz:hover,
	.za-hz:hover .za-hz-ikon,
	.za-hz:hover .za-hz-ok {
		transform: none;
	}
}

/* --------------------------------------------------------
   11) HAKKIMIZDA
   Yerleşim: solda etiket + başlık + metin + butonlar,
   sağda 2×2 rakam kutuları, altta tam genişlik foto şeridi.

   NOT: İlk turda Eşgün'deki beş parçalı foto mozaiği birebir
   uyarlanmıştı; bu sitenin diline oturmadı (orada sayfa 1680px
   ve ince serif başlıklar var, bizde 1180px ve kalın başlık).
   Onun yerine sitenin kendi ritmi kullanıldı: sola dayalı metin,
   kart mantığı, tam genişlik şerit.
   -------------------------------------------------------- */
.za-hakkinda {
	position: relative;
	padding: 88px 24px 96px;
	/* Akıllı Yazılım bölümüyle aynı zemin */
	background: #fff;
	overflow: hidden;
	overflow: clip;
}

.za-hakkinda-ic {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
}

.za-hakkinda-ust {
	margin-top: 26px;
	display: grid;
	grid-template-columns: 1.18fr 1fr;
	gap: 72px;
	align-items: center;
}

/* --- sol taraf --- */

/* öncesinde küçük kırmızı kare olan etiket */
.za-etiket-kare {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin: 0 !important;
	font-size: 11px;
	letter-spacing: .22em;
}

.za-etiket-kare::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: 0 0 6px;
	background: var(--za-vurgu);
}

.za-hakkinda h2 {
	margin: 0 0 18px !important;
	font-size: clamp(26px, 3.1vw, 42px);
	/* gövde başlıklarından bir tık ince: cümle uzun, 800 ağır kalıyordu */
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.03em;
	color: var(--za-lacivert);
}

.za-hakkinda h2 em {
	font-style: normal;
	color: var(--za-vurgu);
}

.za-hakkinda-metin {
	margin: 0 0 34px !important;
	max-width: 58ch;
	font-size: var(--za-fs-body);
	line-height: 1.72;
	color: var(--za-gri);
}

.za-hakkinda-butonlar {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
}

.za-hb {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border: 1px solid var(--za-cizgi);
	border-radius: 3px;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--za-lacivert);
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease,
	            color .2s ease, transform .2s cubic-bezier(.34, 1.3, .64, 1);
}

.za-hb-dolu {
	background: var(--za-vurgu);
	border-color: var(--za-vurgu);
	color: #fff;
	box-shadow: 0 10px 24px -12px rgba(37, 150, 190, .5);
}

.za-hb-ok {
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
	background: currentColor;
	-webkit-mask: var(--za-ok) center / contain no-repeat;
	mask: var(--za-ok) center / contain no-repeat;
	transition: transform .2s cubic-bezier(.34, 1.3, .64, 1);
}

.za-hb:hover {
	transform: translateY(-2px);
}

.za-hb:hover .za-hb-ok {
	transform: translateX(4px);
}

.za-hb-dolu:hover {
	background: var(--za-vurgu-koyu);
	border-color: var(--za-vurgu-koyu);
}

.za-hb:not(.za-hb-dolu):hover {
	border-color: #C2CDDA;
	background: var(--za-zemin);
}

.za-hb:focus-visible {
	outline: 2px solid var(--za-vurgu);
	outline-offset: 3px;
}

/* --- sağ taraf: nitelik kutuları ---
   Rakam sayacı (10+ / 1.200+ …) bilerek kullanılmadı: o kalıp her
   yapay zekâ şablonunda var ve siteyi hazır tema gibi gösteriyor.
   Aralarındaki 1px boşluk çerçeve rengini gösteriyor, böylece dört
   kutu tek bir tablo gibi duruyor (ayrı ayrı kart değil). */
.za-ozellikler {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--za-cizgi);
	border: 1px solid var(--za-cizgi);
	border-radius: 4px;
	overflow: hidden;
	overflow: clip;
}

.za-oz {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 22px 20px;
	background: #fff;
	transition: background-color .22s ease;
}

.za-oz:hover {
	background: #FBFCFD;
}

.za-oz-ikon {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	margin-top: 1px;
	background: var(--za-vurgu);
	-webkit-mask: var(--ikon) center / contain no-repeat;
	mask: var(--ikon) center / contain no-repeat;
}

.za-oz-yazi {
	min-width: 0;
}

.za-oz-yazi b {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -.012em;
	color: var(--za-lacivert);
}

.za-oz-yazi i {
	display: block;
	margin-top: 4px;
	font-style: normal;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--za-gri);
}

/* --- alt: tam genişlik foto şeridi --- */
.za-foto-serit {
	margin-top: 58px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.za-fs-parca {
	width: 100%;
	height: 100%;
	aspect-ratio: 900 / 620;
	object-fit: cover;
	display: block;
	border-radius: 3px;
	background: var(--za-zemin);
}


/* Hakkımızda bölümündeki hare katmanı: üstteki bölümlerden gelen
   hatların devamı, ama iyice soluk — bölüm sakin kalsın. */
.za-hare-devam svg {
	stroke: rgba(13, 35, 64, .1);
}

.za-hare-devam .h1 {
	left: -4%;
	top: -8%;
	width: 76%;
	height: 70%;
}

.za-hare-devam .h2 {
	right: -6%;
	top: -10%;
	width: 66%;
	height: 78%;
	stroke: rgba(37, 150, 190, .1);
}

.za-hare-devam .ha1 {
	left: 30%;
	top: 34%;
	stroke: rgba(37, 150, 190, .26);
}

/* --- tablet / mobil --- */
@media (max-width: 1080px) {
	/* Dar ekranda sıra: etiket → foto şeridi → yazılar.
	   Görseller bölümün en başında dursun, anlatım altta kalsın. */
	.za-hakkinda-ic {
		display: flex;
		flex-direction: column;
	}

	.za-hakkinda-ic > .za-etiket-kare {
		order: 1;
	}

	.za-foto-serit {
		order: 2;
		margin-top: 22px;
	}

	.za-hakkinda-ust {
		order: 3;
		margin-top: 40px;
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.za-hakkinda-metin {
		max-width: none;
	}
}

@media (max-width: 820px) {
	.za-foto-serit {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}

@media (max-width: 600px) {
	.za-hakkinda {
		padding: 58px 20px 66px;
	}

	.za-hakkinda h2 {
		/* Uğur: "başlık ve fotoğraf çok küçük duruyor" — büyütüldü */
		font-size: clamp(25px, 7.4vw, 34px);
		line-height: 1.2;
	}

	.za-hakkinda-metin {
		font-size: 15px;
		margin-bottom: 28px !important;
	}

	.za-hb {
		flex: 1 1 auto;
		justify-content: center;
		padding: 13px 16px;
		font-size: 12px;
	}

	/* Uğur'un isteği: dar ekranda da 2×2 kalsın, dört kutu alt alta
	   uzayınca bölüm gereksiz uzuyordu. */
	.za-ozellikler {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.za-oz {
		padding: 17px 16px;
		gap: 12px;
	}

	.za-oz-ikon {
		width: 22px;
		height: 22px;
		flex: 0 0 22px;
	}

	.za-oz-yazi b {
		font-size: 14.5px;
	}

	.za-foto-serit {
		margin-top: 40px;
	}

	.za-fs-parca {
		border-radius: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.za-hb,
	.za-hb-ok {
		transition-duration: .01ms;
	}

	.za-hb:hover,
	.za-hb:hover .za-hb-ok {
		transform: none;
	}
}

/* --------------------------------------------------------
   12) HANGİ SEKTÖRLERE HİZMET VERİYORUZ
   Koyu zeminli bölüm; iki açık bölümün arasında duruyor ve
   sayfaya nefes aralığı veriyor.
   -------------------------------------------------------- */
.za-sektor {
	position: relative;
	padding: 86px 24px 92px;
	background: var(--za-lacivert);
	overflow: hidden;
	overflow: clip;
}

/* ince nokta ızgarası — hero'daki dokunun koyu zemin sürümü */
.za-sektor::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
	background-size: 27px 27px;
}

/* üstten gelen geniş kırmızı ışık */
.za-sektor::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(900px 420px at 50% -6%,
	            rgba(37, 150, 190, .22),
	            rgba(37, 150, 190, 0) 70%);
}

.za-sektor-ic {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
}

/* --- bölüm başı: solda başlık, sağda açıklama ---
   Ortalanmış başlık + altı eşit kart denendi; hazır şablon hissi
   veriyordu. Sayfanın geri kalanı sola dayalı olduğu için başlık da
   sola alındı, kart sayısı satırda üçe düşürüldü. */
.za-sektor-basi {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 60px;
	align-items: end;
	margin-bottom: 44px;
}

.za-sektor .za-etiket {
	margin: 0 0 15px !important;
	color: #5CC8E8;
}

.za-sektor h2 {
	margin: 0 !important;
	font-size: clamp(27px, 3.3vw, 43px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.032em;
	color: #fff;
}

.za-sektor h2 em {
	font-style: normal;
	color: #5CC8E8;
}

.za-sektor-metin {
	margin: 0 !important;
	padding-bottom: 5px;
	font-size: var(--za-fs-body);
	line-height: 1.7;
	color: rgba(255, 255, 255, .68);
}

/* --- kart ızgarası --- */
.za-sektor-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.za-sk {
	position: relative;
	display: block;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 4px;
	background: rgba(255, 255, 255, .05);
	text-decoration: none;
	overflow: hidden;
	overflow: clip;
	transition: border-color .22s ease,
	            transform .22s cubic-bezier(.34, 1.3, .64, 1);
}

/* Bu kartlar tıklanabilir DEĞİL — sektörler için ayrı sayfa yok.
   O yüzden yükselme/kırmızı kenar gibi "bana tıkla" sinyalleri
   kaldırıldı; yalnızca görselin hafif yakınlaşması kaldı. */
.za-sk:hover {
	border-color: rgba(255, 255, 255, .18);
}

.za-sk-gorsel {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform .5s var(--za-ease);
}

.za-sk:hover .za-sk-gorsel {
	transform: scale(1.04);
}

/* Metin görselin ÜSTÜNDE duruyor: altta ayrı bir şerit olarak
   yazınca kartlar "ikon + başlık listesi" gibi duruyordu. */
.za-sk-alt {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 34px 14px 14px;
	background: linear-gradient(180deg,
	            rgba(8, 22, 40, 0) 0%,
	            rgba(8, 22, 40, .72) 46%,
	            rgba(8, 22, 40, .92) 100%);
}

.za-sk-ikon {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	background: #5CC8E8;
	-webkit-mask: var(--ikon) center / contain no-repeat;
	mask: var(--ikon) center / contain no-repeat;
	transition: transform .22s ease;
}

.za-sk:hover .za-sk-ikon {
	transform: scale(1.08);
}

.za-sk-ad {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: #fff;
	text-shadow: 0 1px 3px rgba(8, 22, 40, .5);
}

/* --- sektör bölümü: tablet / mobil --- */
@media (max-width: 980px) {
	.za-sektor-basi {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		align-items: start;
	}

	.za-sektor-metin {
		padding-bottom: 0;
	}
}

@media (max-width: 640px) {
	.za-sektor {
		padding: 58px 20px 64px;
	}

	.za-sektor-basi {
		margin-bottom: 30px;
	}

	.za-sektor-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.za-sk-alt {
		padding: 26px 11px 12px;
		gap: 8px;
	}

	.za-sk-ikon {
		width: 17px;
		height: 17px;
		flex: 0 0 17px;
	}

	.za-sk-ad {
		font-size: 11.5px;
	}
}

/* --------------------------------------------------------
   12b) EK İKONLAR — nitelik kutuları ve sektör kartları
   -------------------------------------------------------- */
.ik-kod {
	--ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='m8.4 8.6-4 3.4 4 3.4'/><path d='m15.6 8.6 4 3.4-4 3.4'/><path d='m13.4 5.6-2.8 12.8'/></svg>");
}

.ik-destek {
	--ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 14v-2a8 8 0 0 1 16 0v2'/><path d='M4 14a2 2 0 0 0 2 2h1v-4H6a2 2 0 0 0-2 2z'/><path d='M20 14a2 2 0 0 1-2 2h-1v-4h1a2 2 0 0 1 2 2z'/><path d='M17 16.4v.8a3 3 0 0 1-3 3h-1.4'/></svg>");
}

.ik-anahtar {
	--ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='7.6' cy='16.4' r='3.6'/><path d='m10.2 13.8 8.2-8.2'/><path d='m15.4 8.6 2.2 2.2 2.6-2.6-2.2-2.2'/></svg>");
}

.ik-fabrika {
	--ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2.6 20.4V10.2l5.4 3.2V10.2l5.4 3.2V6.6h3.2l1 13.8z'/><path d='M2.6 20.4h18.8'/><path d='M6.4 17h1.4M11 17h1.4M15.6 17H17'/></svg>");
}

.ik-hastane {
	--ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4.4' width='16' height='15.2' rx='1.6'/><path d='M12 8.6v6.8M8.6 12h6.8'/><path d='M4 19.6h16'/></svg>");
}

.ik-egitim {
	--ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2.4 9.2 12 4.6l9.6 4.6L12 13.8z'/><path d='M6.2 11v4.8c0 1.4 2.6 2.6 5.8 2.6s5.8-1.2 5.8-2.6V11'/><path d='M20.4 10v4.6'/></svg>");
}

.ik-avm {
	--ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4.6 8.6h14.8l-1.2 11.2a1.4 1.4 0 0 1-1.4 1.2H7.2a1.4 1.4 0 0 1-1.4-1.2z'/><path d='M9 8.6V6.4a3 3 0 0 1 6 0v2.2'/><path d='M9 12.4v1.2M15 12.4v1.2'/></svg>");
}

/* =========================================================
   13) HİZMET DETAY SAYFASI
   Yerleşim tise.com.tr'deki hizmet sayfasından esinlendi:
   solda başlık bloğu, sağda tam yükseklik görsel; altında
   giriş metni, ardından görsel + özellik listesi.
   ========================================================= */

/* --- sayfa yolu (breadcrumb) --- */
.za-yol {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: 22px;
	font-size: var(--za-fs-meta);
	color: var(--za-gri);
}

.za-yol a {
	color: var(--za-gri);
	text-decoration: none;
	transition: color .18s ease;
}

.za-yol a:hover {
	color: var(--za-vurgu);
}

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

.za-yol-ayrac {
	width: 5px;
	height: 8px;
	flex: 0 0 5px;
	background: var(--za-cizgi);
	-webkit-mask: var(--za-yol-ok) center / contain no-repeat;
	mask: var(--za-yol-ok) center / contain no-repeat;
}

:root {
	--za-yol-ok: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m1 1 4 4-4 4'/></svg>");
}

/* --- 13a) sayfa başı --- */
.za-hz-bas {
	position: relative;
	background: #fff;
	overflow: hidden;
	overflow: clip;
}

.za-hz-bas-ic {
	display: grid;
	grid-template-columns: 1fr 1.06fr;
	align-items: center;
	gap: 56px;
	max-width: 1320px;
	margin: 0 auto;
	padding-left: 24px;
}

.za-hz-bas-metin {
	padding: 76px 0 80px;
}

.za-hz-baslik {
	margin: 0 0 16px !important;
	font-size: clamp(30px, 3.8vw, 50px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.034em;
	color: var(--za-lacivert);
}

.za-hz-alt {
	margin: 0 0 24px !important;
	max-width: 46ch;
	font-size: var(--za-fs-lead);
	line-height: 1.68;
	color: var(--za-gri);
}

/* küçük nitelik etiketleri */
.za-hz-rozetler {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 32px;
}

.za-rozet {
	padding: 7px 13px;
	border: 1px solid var(--za-cizgi);
	border-radius: 100px;
	background: var(--za-zemin);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--za-lacivert);
}

/* Görsel sağ kenara dayanıyor: kapsayıcıyı aşıp ekran kenarına
   kadar gidiyor, tıpkı referans sayfadaki gibi. */
.za-hz-bas-gorsel {
	align-self: stretch;
	margin-right: calc(-1 * max(0px, (100vw - 1320px) / 2));
}

.za-hz-bas-gorsel picture,
.za-hz-bas-gorsel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 420px;
}

/* --- 13b) giriş metni --- */
.za-hz-giris {
	padding: 76px 24px 80px;
	background: var(--za-zemin);
}

.za-hz-giris-ic {
	max-width: 820px;
	margin: 0 auto;
}

.za-hz-giris p {
	margin: 0 !important;
	font-size: 17px;
	line-height: 1.78;
	color: var(--za-metin);
}

.za-hz-giris p + p {
	margin-top: 20px !important;
}

/* --- 13c) öne çıkan özellikler --- */
.za-hz-ozellik {
	padding: 84px 24px 88px;
	background: #fff;
}

.za-hz-ozellik-ic {
	display: grid;
	grid-template-columns: 1fr 1.18fr;
	gap: 68px;
	align-items: start;
	max-width: 1180px;
	margin: 0 auto;
}

.za-hz-ozellik-gorsel img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(13, 35, 64, .05),
	            0 26px 50px -28px rgba(13, 35, 64, .38);
}

.za-hz-ozellik-metin h2 {
	margin: 15px 0 26px !important;
	font-size: clamp(24px, 2.8vw, 36px);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.03em;
	color: var(--za-lacivert);
}

/* --- özellik listesi --- */
.za-hz-liste {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.za-hz-liste li {
	position: relative;
	padding: 0 0 0 26px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--za-gri);
}

.za-hz-liste li + li {
	margin-top: 20px;
}

/* madde işareti: içi boş kırmızı halka */
.za-hz-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 9px;
	height: 9px;
	border: 2px solid var(--za-vurgu);
	border-radius: 50%;
}

.za-hz-liste b {
	display: block;
	margin-bottom: 3px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.012em;
	color: var(--za-lacivert);
}

/* --- 13d) kullanım alanları --- */
.za-hz-alan {
	position: relative;
	padding: 84px 24px 88px;
	background: var(--za-lacivert);
	overflow: hidden;
	overflow: clip;
}

.za-hz-alan::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
	background-size: 27px 27px;
}

.za-hz-alan::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(880px 400px at 18% -8%,
	            rgba(37, 150, 190, .2),
	            rgba(37, 150, 190, 0) 70%);
}

.za-hz-alan-ic {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
}

.za-hz-alan-basi {
	margin-bottom: 38px;
}

.za-hz-alan .za-etiket {
	margin: 0 0 14px !important;
	color: #5CC8E8;
}

.za-hz-alan h2 {
	margin: 0 !important;
	font-size: clamp(25px, 2.9vw, 38px);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -.03em;
	color: #fff;
}

.za-hz-alan-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.za-alan {
	padding: 24px 22px 26px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 4px;
	background: rgba(255, 255, 255, .05);
	transition: background-color .22s ease, border-color .22s ease;
}

.za-alan:hover {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .18);
}

.za-alan-ikon {
	display: block;
	width: 26px;
	height: 26px;
	margin-bottom: 16px;
	background: #5CC8E8;
	-webkit-mask: var(--ikon) center / contain no-repeat;
	mask: var(--ikon) center / contain no-repeat;
}

.za-alan b {
	display: block;
	margin-bottom: 7px;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -.012em;
	color: #fff;
}

.za-alan span {
	display: block;
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .66);
}

/* --- 13e) kapanış çağrısı --- */
.za-hz-cta {
	padding: 62px 24px 66px;
	background: var(--za-vurgu);
	/* diyagonal ince çizgi dokusu */
	background-image: repeating-linear-gradient(115deg,
	                  rgba(255, 255, 255, .055) 0 1px,
	                  rgba(255, 255, 255, 0) 1px 13px);
}

.za-hz-cta-ic {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	max-width: 1180px;
	margin: 0 auto;
}

.za-hz-cta-metin {
	max-width: 62ch;
}

.za-hz-cta h2 {
	margin: 0 0 10px !important;
	font-size: var(--za-fs-h2-sm);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -.028em;
	color: #fff;
}

.za-hz-cta p {
	margin: 0 !important;
	font-size: var(--za-fs-body);
	line-height: 1.68;
	color: rgba(255, 255, 255, .84);
}

/* kırmızı zemin üstünde butonlar */
.za-hz-cta .za-hb-dolu {
	background: #fff;
	border-color: #fff;
	color: var(--za-vurgu);
	box-shadow: 0 12px 26px -14px rgba(8, 22, 40, .5);
}

.za-hz-cta .za-hb-dolu:hover {
	background: var(--za-zemin);
	border-color: var(--za-zemin);
}

.za-hb-acik {
	background: transparent;
	border-color: rgba(255, 255, 255, .42);
	color: #fff;
}

.za-hb-acik:hover {
	background: rgba(255, 255, 255, .12) !important;
	border-color: #fff !important;
	color: #fff;
}

/* --- 13f) hizmet sayfası: tablet / mobil --- */
@media (max-width: 1000px) {
	.za-hz-bas-ic {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding-left: 0;
	}

	.za-hz-bas-metin {
		padding: 52px 24px 34px;
	}

	.za-hz-bas-gorsel {
		margin-right: 0;
	}

	.za-hz-bas-gorsel picture,
	.za-hz-bas-gorsel img {
		min-height: 0;
		aspect-ratio: 16 / 9;
		height: auto;
	}

	.za-hz-ozellik-ic {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	.za-hz-alan-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.za-hz-cta-ic {
		flex-direction: column;
		align-items: flex-start;
		gap: 26px;
	}
}

@media (max-width: 600px) {
	.za-hz-bas-metin {
		padding: 40px 20px 28px;
	}

	.za-hz-giris {
		padding: 52px 20px 56px;
	}

	.za-hz-giris p {
		font-size: 15.5px;
	}

	.za-hz-ozellik,
	.za-hz-alan {
		padding: 56px 20px 60px;
	}

	/* Uğur: mobilde altı kart alt alta çok uzuyordu — 2'li kalıyor */
	.za-hz-alan-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.za-hz-cta {
		padding: 46px 20px 50px;
	}

	.za-hz-liste li {
		font-size: 15px;
	}
}

/* ========================================================
   14) İLETİŞİM SAYFASI (iletisim.html)
   Düzen Eşgün Lojistik'in iletişim sayfasından alındı: solda
   bilgi listesi, sağda açık zeminli teklif formu. Görsel bilerek
   yok. Palet ve tipografi ESD TECH'in kendi dili.
   ======================================================== */
:root {
	--za-yukle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 16V4'/><path d='m7.5 8.5 4.5-4.5 4.5 4.5'/><path d='M3.5 15v3.5A1.5 1.5 0 0 0 5 20h14a1.5 1.5 0 0 0 1.5-1.5V15'/></svg>");
	--za-carpi: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'><path d='M6 6l12 12M18 6 6 18'/></svg>");
}

/* --- sayfa başı --- */
.za-sbas {
	background: #fff;
}

.za-sbas-ic {
	max-width: 1290px;
	margin: 0 auto;
	padding: 62px 24px 56px;
}

.za-sbas-grid {
	display: grid;
	grid-template-columns: 1fr .82fr;
	align-items: start;
	gap: 72px;
}

.za-sbas-baslik {
	margin: 0 !important;
	font-size: clamp(30px, 3.6vw, 48px);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -.034em;
	color: var(--za-lacivert);
}

/* ikinci satır vurgusu — ana sayfadaki "ESD TECH Hakkında" başlığıyla aynı dil */
.za-sbas-baslik em {
	font-style: normal;
	color: var(--za-vurgu);
}

.za-sbas-giris {
	margin: 8px 0 0 !important;
	font-size: var(--za-fs-lead);
	line-height: 1.72;
	color: var(--za-gri);
}

/* --- gövde: bilgiler + form --- */
.za-ilt {
	background: #fff;
	padding: 0 0 104px;
}

.za-ilt-ic {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	align-items: start;
	gap: 88px;
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 24px;
}

/* --- sol sütun: iletişim bilgileri --- */
.za-ilt-bilgi {
	border-top: 1px solid var(--za-cizgi);
}

.za-ib {
	padding: 24px 0;
	border-bottom: 1px solid var(--za-cizgi);
}

.za-ib-etiket {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--za-vurgu);
}

.za-ib-etiket::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: 0 0 6px;
	background: var(--za-vurgu);
}

.za-ib a,
.za-ib p {
	display: block;
	margin: 12px 0 0 !important;
	font-size: 17.5px;
	line-height: 1.5;
	color: var(--za-lacivert);
	text-decoration: none;
	transition: color .18s ease;
}

.za-ib a:hover {
	color: var(--za-vurgu);
}

.za-ib a:focus-visible {
	outline: 2px solid var(--za-vurgu);
	outline-offset: 3px;
	border-radius: 2px;
}

.za-ib p.za-ib-kucuk {
	font-size: 15px;
	line-height: 1.7;
	color: var(--za-gri);
}

/* --- sağ sütun: form kutusu --- */
.za-ilt-form {
	padding: 42px 42px 44px;
	border: 1px solid var(--za-cizgi);
	border-radius: 3px;
	background: var(--za-zemin);
	/* katmanlı gölge: yakın kenar + uzak yayılma */
	box-shadow: 0 2px 8px -4px rgba(13, 35, 64, .06),
	            0 30px 60px -32px rgba(13, 35, 64, .16);
}

.za-ilt-form h2 {
	margin: 0 !important;
	font-size: clamp(22px, 2.3vw, 31px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.028em;
	color: var(--za-lacivert);
}

.za-ilt-form h2 em {
	font-style: normal;
	color: var(--za-vurgu);
}

.za-ilt-form-giris {
	margin: 14px 0 0 !important;
	font-size: 15px;
	line-height: 1.72;
	color: var(--za-gri);
}

/* --- form alanları --- */
.za-frm {
	display: grid;
	gap: 18px;
	margin-top: 30px;
}

.za-frm-ikili {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.za-fa {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.za-fa label {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--za-gri);
}

.za-fa label b {
	color: var(--za-vurgu);
}

.za-fa input,
.za-fa select,
.za-fa textarea {
	width: 100%;
	padding: 14px 15px;
	border: 1px solid var(--za-cizgi);
	border-radius: 3px;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	color: var(--za-metin);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.za-fa textarea {
	min-height: 122px;
	line-height: 1.7;
	resize: vertical;
}

.za-fa input::placeholder,
.za-fa textarea::placeholder {
	color: #9AA8B8;
}

.za-fa input:hover,
.za-fa select:hover,
.za-fa textarea:hover {
	border-color: #C2CDDA;
}

.za-fa input:focus,
.za-fa select:focus,
.za-fa textarea:focus {
	outline: none;
	border-color: var(--za-vurgu);
	box-shadow: 0 0 0 3px rgba(37, 150, 190, .12);
}

/* tarayıcının kendi oku yerine kendi okumuz */
.za-fa select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	cursor: pointer;
}

.za-fa-sec {
	position: relative;
}

.za-fa-sec::after {
	content: "";
	position: absolute;
	right: 16px;
	bottom: 19px;
	width: 11px;
	height: 11px;
	background: var(--za-gri);
	-webkit-mask: var(--za-menu-ok) center / contain no-repeat;
	mask: var(--za-menu-ok) center / contain no-repeat;
	pointer-events: none;
}

/* --- dosya yükleme (Proje Fiyatlandırma seçilince açılıyor) --- */
.za-dosya-alan {
	animation: za-dosya-ac .3s var(--za-ease) both;
}

@keyframes za-dosya-ac {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Asıl input görünmez; tıklama etiket üzerinden gidiyor.
   display:none DEĞİL — o hâlde klavye odağı alamıyor ve tarayıcı
   doğrulama mesajını gösteremiyor. */
.za-dosya-girdi {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	opacity: 0;
	overflow: hidden;
	clip-path: inset(50%);
}

.za-dosya-kutu {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 20px 18px;
	border: 1px dashed #BCC8D6;
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease;
}

.za-dosya-kutu:hover,
.za-dosya-girdi:focus-visible + .za-dosya-kutu {
	border-color: var(--za-vurgu);
	background: #F1FAFD;
}

/* sürükleme sırasında */
.za-dosya-kutu.uzerinde {
	border-color: var(--za-vurgu);
	border-style: solid;
	background: #E8F6FB;
}

.za-dosya-ikon {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	background: var(--za-vurgu);
	-webkit-mask: var(--za-yukle) center / 24px no-repeat;
	mask: var(--za-yukle) center / 24px no-repeat;
}

.za-dosya-yazi {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--za-gri);
}

.za-dosya-yazi b {
	font-weight: 700;
	color: var(--za-lacivert);
}

.za-dosya-yazi i {
	font-style: normal;
}

.za-dosya-yazi u {
	margin-top: 3px;
	font-size: 12px;
	letter-spacing: .01em;
	text-decoration: none;
	color: #8B9AAB;
}

/* seçilen dosyalar */
.za-dosya-liste {
	display: grid;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.za-dosya-liste:empty {
	display: none;
}

.za-dosya-liste li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--za-cizgi);
	border-radius: 3px;
	background: #fff;
	font-size: 13.5px;
	color: var(--za-lacivert);
}

.za-dosya-liste li.buyuk {
	border-color: rgba(37, 150, 190, .4);
	background: #F1FAFD;
	color: var(--za-vurgu-koyu);
}

.za-dosya-ad {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.za-dosya-boyut {
	flex: 0 0 auto;
	font-size: 12.5px;
	color: var(--za-gri);
}

.za-dosya-sil {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: transparent;
	cursor: pointer;
	transition: background-color .16s ease;
}

.za-dosya-sil::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: var(--za-gri);
	-webkit-mask: var(--za-carpi) center / 13px no-repeat;
	mask: var(--za-carpi) center / 13px no-repeat;
}

.za-dosya-sil:hover {
	background: rgba(37, 150, 190, .1);
}

.za-dosya-sil:hover::before {
	background: var(--za-vurgu);
}

.za-dosya-sil:focus-visible {
	outline: 2px solid var(--za-vurgu);
	outline-offset: 1px;
}

/* --- form altı --- */
.za-frm-alt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 6px;
}

.za-frm-not {
	max-width: 42ch;
	margin: 0 !important;
	font-size: 12.5px;
	line-height: 1.62;
	color: #8B9AAB;
}

.za-frm-buton {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 24px;
	border: 1px solid var(--za-vurgu);
	border-radius: 3px;
	background: var(--za-vurgu);
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: 0 10px 24px -12px rgba(37, 150, 190, .5);
	transition: background-color .18s ease, border-color .18s ease,
	            transform .18s cubic-bezier(.34, 1.3, .64, 1);
}

.za-frm-buton:hover {
	background: var(--za-vurgu-koyu);
	border-color: var(--za-vurgu-koyu);
	transform: translateY(-2px);
}

.za-frm-buton:hover .za-hb-ok {
	transform: translateX(4px);
}

.za-frm-buton:focus-visible {
	outline: 2px solid var(--za-vurgu);
	outline-offset: 3px;
}

.za-frm-buton[disabled] {
	opacity: .6;
	cursor: default;
	transform: none;
}

/* gönderim sonucu */
.za-frm-durum {
	display: none;
	margin-top: 4px;
	padding: 15px 17px;
	border-left: 2px solid var(--za-lacivert);
	border-radius: 0 3px 3px 0;
	background: rgba(13, 35, 64, .06);
	font-size: 14.5px;
	line-height: 1.66;
	color: var(--za-lacivert);
}

.za-frm-durum.acik {
	display: block;
}

.za-frm-durum.hata {
	border-left-color: var(--za-vurgu);
	background: rgba(37, 150, 190, .07);
	color: var(--za-vurgu-koyu);
}

/* bot tuzağı — ekranda görünmemeli */
.za-bot-tuzak {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 1180px) {
	.za-ilt-ic {
		gap: 56px;
	}

	.za-ilt-form {
		padding: 34px 32px 36px;
	}

	.za-sbas-grid {
		gap: 48px;
	}
}

@media (max-width: 1000px) {
	.za-sbas-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.za-ilt-ic {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	/* sayfanın asıl işi form — mobilde önce o gelsin */
	.za-ilt-form {
		order: -1;
	}

	.za-ilt {
		padding-bottom: 78px;
	}
}

@media (max-width: 700px) {
	.za-sbas-ic {
		padding: 46px 20px 40px;
	}

	.za-ilt-ic {
		padding: 0 20px;
	}

	.za-ilt-form {
		padding: 26px 20px 30px;
	}

	.za-frm {
		margin-top: 24px;
		gap: 15px;
	}

	.za-frm-ikili {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.za-ib {
		padding: 20px 0;
	}

	.za-ib a,
	.za-ib p {
		font-size: 16px;
	}

	.za-frm-alt {
		flex-direction: column;
		align-items: stretch;
	}

	.za-frm-buton {
		justify-content: space-between;
	}

	.za-dosya-kutu {
		padding: 16px 14px;
		gap: 12px;
	}
}

/* ========================================================
   15) KURUMSAL SAYFALAR
   hakkimizda.html · hakkimizda/vizyon-misyon.html · haberler.html
   Düzen Eşgün Lojistik'in aynı sayfalarından alındı (grid oranları
   birebir), tipografi ve palet ESD TECH'in kendi dili: ağır
   Plus Jakarta Sans başlıklar, kırmızı <em> vurgusu, 3px köşe.
   ======================================================== */

/* --- ortak bölüm başlığı --- */
.za-man h2,
.za-ilke h2,
.za-ekip h2,
.za-yak h2 {
	margin: 16px 0 0 !important;
	font-size: clamp(26px, 3.1vw, 42px);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -.034em;
	color: var(--za-lacivert);
}

/* İkinci satır vurgusu. <em> varsayılan İTALİK gelir; bunu normal'e çekmeyi
   atlamak başlıkları eğik ve renksiz bırakıyor — bir kez bu şekilde bozuldu. */
.za-man h2 em,
.za-ilke h2 em,
.za-ekip h2 em,
.za-yak h2 em {
	font-style: normal;
	color: var(--za-vurgu);
}

/* sayfa başına görsel şeridi eklenebiliyor (hakkımızda) */
.za-sbas-gorsel {
	margin-top: 44px;
	border-radius: 3px;
	overflow: hidden;
	overflow: clip;
}

.za-sbas-gorsel img {
	display: block;
	width: 100%;
	height: clamp(220px, 30vw, 380px);
	object-fit: cover;
}

/* ============ BİZ KİMİZ (solda sticky başlık, sağda metin) ============ */
.za-man {
	background: #fff;
	padding: 12px 0 96px;
}

.za-man-ic {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	align-items: start;
	gap: 92px;
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 24px;
}

/* metin uzun; başlık kaydırma boyunca ekranda kalıyor */
.za-man-sol {
	position: sticky;
	top: calc(var(--za-header-h, 114px) + 34px);
}

.za-man-metin p {
	margin: 0 0 20px !important;
	font-size: 16.5px;
	line-height: 1.78;
	color: var(--za-gri);
}

.za-man-metin p:last-child {
	margin-bottom: 0 !important;
}

.za-man-metin strong {
	font-weight: 700;
	color: var(--za-lacivert);
}

/* ============ ÇALIŞMA İLKELERİ (2×2, çizgiyle ayrılmış) ============ */
.za-ilke {
	background: var(--za-zemin);
	padding: 88px 0 92px;
}

.za-ilke-ic {
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 24px;
}

.za-ilke-bas {
	max-width: 44ch;
	margin-bottom: 54px;
}

.za-ilke-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--za-cizgi);
}

.za-ik {
	position: relative;
	padding: 40px 58px 42px 0;
	border-bottom: 1px solid var(--za-cizgi);
}

.za-ik:nth-child(even) {
	padding: 40px 0 42px 58px;
	border-left: 1px solid var(--za-cizgi);
}

/* numara — ilkeler sırayla okunsun */
.za-ik::before {
	content: counter(za-ilke-sayac, decimal-leading-zero);
	counter-increment: za-ilke-sayac;
	display: block;
	margin-bottom: 14px;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--za-vurgu);
}

.za-ilke-grid {
	counter-reset: za-ilke-sayac;
}

.za-ik b {
	display: block;
	margin-bottom: 10px;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--za-lacivert);
}

.za-ik p {
	margin: 0 !important;
	font-size: 15.5px;
	line-height: 1.74;
	color: var(--za-gri);
}

/* ============ TAAHHÜT (lacivert zemin, 3 kolon) ============ */
.za-soz {
	position: relative;
	background: var(--za-lacivert);
	padding: 84px 0 88px;
	overflow: hidden;
	overflow: clip;
}

/* katmanlı radial hareler — ana sayfadaki koyu bölümlerle aynı doku */
.za-soz::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(680px 320px at 12% 0%, rgba(37, 150, 190, .16), transparent 68%),
		radial-gradient(560px 300px at 88% 100%, rgba(76, 122, 190, .16), transparent 70%);
	pointer-events: none;
}

.za-soz-ic {
	position: relative;
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 24px;
}

.za-soz h2 {
	margin: 16px 0 0 !important;
	max-width: 30ch;
	font-size: clamp(24px, 2.8vw, 38px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.03em;
	color: #fff;
}

.za-soz h2 em {
	font-style: normal;
	color: #7FD4EE;
}

.za-soz-liste {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 56px;
}

.za-sz {
	padding: 0 40px 0 0;
	border-right: 1px solid rgba(255, 255, 255, .13);
}

.za-sz:last-child {
	padding-right: 0;
	border-right: 0;
}

.za-sz + .za-sz {
	padding-left: 40px;
}

.za-sz b {
	display: block;
	margin-bottom: 11px;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: -.015em;
	color: #fff;
}

.za-sz p {
	margin: 0 !important;
	font-size: 15px;
	line-height: 1.74;
	color: rgba(255, 255, 255, .68);
}

/* ============ EKİP (solda görsel mozaik, sağda metin) ============ */
.za-ekip {
	background: #fff;
	padding: 92px 0 96px;
}

.za-ekip-ic {
	display: grid;
	grid-template-columns: 1.12fr 1fr;
	align-items: center;
	gap: 88px;
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 24px;
}

.za-ekip-gorsel {
	position: relative;
	padding-bottom: 54px;
}

.za-ekip-gorsel img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
}

/* küçük görsel büyüğün sağ alt köşesine biniyor */
.za-ekip-kucuk {
	position: absolute;
	right: -18px;
	bottom: 0;
	width: 46%;
	border: 5px solid #fff;
	border-radius: 3px;
	box-shadow: 0 2px 10px -4px rgba(13, 35, 64, .12),
	            0 26px 52px -26px rgba(13, 35, 64, .3);
}

.za-ekip-metin p {
	margin: 18px 0 0 !important;
	font-size: 16.5px;
	line-height: 1.78;
	color: var(--za-gri);
}

.za-ekip-butonlar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

/* ============ VİZYON / MİSYON (iki kutu yan yana) ============ */
.za-vm {
	background: #fff;
	padding: 8px 0 0;
}

.za-vm-ic {
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 24px;
}

.za-vm-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	border-radius: 3px;
	overflow: hidden;
	overflow: clip;
}

.za-vmb {
	position: relative;
	padding: 50px 46px 54px;
	overflow: hidden;
	overflow: clip;
}

.za-vmb.koyu {
	background: var(--za-lacivert);
}

.za-vmb.acik {
	background: var(--za-zemin);
}

/* köşede soluk büyük harf — kutuları ayırt eden sessiz detay */
.za-vmb::after {
	content: "";
	position: absolute;
	right: -60px;
	bottom: -70px;
	width: 240px;
	height: 240px;
	border: 1px solid currentColor;
	border-radius: 50%;
	opacity: .07;
	pointer-events: none;
}

.za-vmb.koyu::after {
	color: #fff;
	opacity: .12;
}

.za-vmb.acik::after {
	color: var(--za-lacivert);
}

.za-vmb h2 {
	position: relative;
	margin: 15px 0 0 !important;
	font-size: clamp(23px, 2.5vw, 33px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.03em;
}

.za-vmb p {
	position: relative;
	margin: 20px 0 0 !important;
	font-size: 16px;
	line-height: 1.76;
}

.za-vmb.koyu h2 { color: #fff; }
.za-vmb.koyu p  { color: rgba(255, 255, 255, .7); }
.za-vmb.acik h2 { color: var(--za-lacivert); }
.za-vmb.acik p  { color: var(--za-gri); }

/* koyu kutuda etiket okunur kalsın */
.za-vmb.koyu .za-etiket {
	color: #7FD4EE !important;
}

.za-vmb.koyu .za-etiket-kare::before {
	background: #7FD4EE;
}

/* ============ MANİFESTO (tek büyük cümle) ============ */
.za-mnf {
	background: #fff;
	padding: 86px 0 90px;
}

.za-mnf-ic {
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 24px;
}

.za-mnf p {
	max-width: 30ch;
	margin: 0 !important;
	padding-left: 38px;
	border-left: 2px solid var(--za-vurgu);
	font-size: clamp(22px, 2.9vw, 38px);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -.03em;
	color: var(--za-lacivert);
}

.za-mnf p em {
	font-style: normal;
	color: var(--za-vurgu);
}

/* ============ SORUMLULUK YAKLAŞIMI (3 kolon) ============ */
.za-yak {
	background: var(--za-zemin);
	padding: 88px 0 92px;
}

.za-yak-ic {
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 24px;
}

.za-yak-bas {
	max-width: 42ch;
	margin-bottom: 52px;
}

.za-yak-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--za-cizgi);
}

.za-yk {
	padding: 38px 46px 0 0;
	border-right: 1px solid var(--za-cizgi);
}

.za-yk:last-child {
	padding-right: 0;
	border-right: 0;
}

.za-yk + .za-yk {
	padding-left: 46px;
}

.za-yk b {
	display: block;
	margin-bottom: 11px;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--za-lacivert);
}

.za-yk p {
	margin: 0 !important;
	font-size: 15.5px;
	line-height: 1.74;
	color: var(--za-gri);
}

/* ============ HABERLER ============ */
/* kategori süzgeci */
.za-nfilt-sarmal {
	background: #fff;
}

.za-nfilt-ic {
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 24px;
}

.za-nfilt {
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid var(--za-cizgi);
	border-bottom: 1px solid var(--za-cizgi);
}

.za-nfilt button {
	position: relative;
	padding: 16px 26px;
	border: 0;
	background: none;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--za-gri);
	cursor: pointer;
	transition: color .18s ease, background-color .18s ease;
}

.za-nfilt button:first-child {
	padding-left: 0;
}

.za-nfilt button::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	background: var(--za-vurgu);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .24s var(--za-ease);
}

.za-nfilt button:hover {
	color: var(--za-lacivert);
}

.za-nfilt button.secili {
	color: var(--za-vurgu);
}

.za-nfilt button.secili::after {
	transform: scaleX(1);
}

.za-nfilt button:focus-visible {
	outline: 2px solid var(--za-vurgu);
	outline-offset: -3px;
}

/* haber listesi */
.za-nlist {
	background: #fff;
	padding: 52px 0 96px;
}

.za-nlist-ic {
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 24px;
}

.za-nlist-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(304px, 1fr));
	gap: 26px;
}

.za-nlist-grid:empty {
	display: none;
}

.za-nk {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--za-cizgi);
	border-radius: 3px;
	background: #fff;
	overflow: hidden;
	overflow: clip;
	text-decoration: none;
	transition: border-color .2s ease, transform .24s var(--za-ease),
	            box-shadow .24s var(--za-ease);
}

.za-nk:hover {
	border-color: #C2CDDA;
	transform: translateY(-3px);
	box-shadow: 0 2px 10px -4px rgba(13, 35, 64, .1),
	            0 26px 48px -26px rgba(13, 35, 64, .26);
}

.za-nk:focus-visible {
	outline: 2px solid var(--za-vurgu);
	outline-offset: 2px;
}

.za-nk-gorsel {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--za-zemin);
	overflow: hidden;
	overflow: clip;
}

.za-nk-gorsel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--za-ease);
}

.za-nk:hover .za-nk-gorsel img {
	transform: scale(1.04);
}

.za-nk-govde {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 20px 22px;
}

.za-nk-ust {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.za-nk-kat {
	padding: 4px 9px;
	border-radius: 2px;
	background: rgba(37, 150, 190, .09);
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--za-vurgu);
}

.za-nk-tarih {
	font-size: 12.5px;
	color: #8B9AAB;
}

.za-nk-baslik {
	margin: 0 0 9px !important;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.34;
	letter-spacing: -.022em;
	color: var(--za-lacivert);
	transition: color .18s ease;
}

.za-nk:hover .za-nk-baslik {
	color: var(--za-vurgu);
}

.za-nk-ozet {
	margin: 0 !important;
	font-size: 14.5px;
	line-height: 1.68;
	color: var(--za-gri);
}

.za-nk-devam {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--za-vurgu);
}

.za-nk-devam .za-hb-ok {
	width: 13px;
	height: 13px;
	flex: 0 0 13px;
}

.za-nk:hover .za-nk-devam .za-hb-ok {
	transform: translateX(4px);
}

/* süzgeç sonucu boşsa */
.za-nlist-bos {
	display: none;
	margin: 0 !important;
	padding: 44px 0;
	font-size: 16px;
	color: var(--za-gri);
}

.za-nlist-bos.acik {
	display: block;
}

/* hiç haber yokken gösterilen kutu */
.za-yakinda {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 620px;
	padding: 38px 36px 40px;
	border: 1px solid var(--za-cizgi);
	border-left: 2px solid var(--za-vurgu);
	border-radius: 0 3px 3px 0;
	background: var(--za-zemin);
}

.za-yakinda b {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--za-vurgu);
}

.za-yakinda h2 {
	margin: 14px 0 0 !important;
	font-size: clamp(21px, 2.3vw, 29px);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.03em;
	color: var(--za-lacivert);
}

.za-yakinda p {
	margin: 15px 0 0 !important;
	font-size: 15.5px;
	line-height: 1.74;
	color: var(--za-gri);
}

.za-yakinda .za-hb {
	margin-top: 24px;
}

@media (max-width: 1180px) {
	.za-man-ic {
		gap: 56px;
	}

	.za-ekip-ic {
		gap: 54px;
	}

	.za-ik {
		padding-right: 36px;
	}

	.za-ik:nth-child(even) {
		padding-left: 36px;
	}

	.za-sz {
		padding-right: 26px;
	}

	.za-sz + .za-sz {
		padding-left: 26px;
	}

	.za-yk {
		padding-right: 30px;
	}

	.za-yk + .za-yk {
		padding-left: 30px;
	}

	.za-vmb {
		padding: 40px 34px 44px;
	}
}

/* 1000px yerine 1100px: 1000-1100 aralığında iki kolon sıkışıyor, metin dar
   bir şeride iniyor ve görsel küçülüyordu (Uğur bildirdi). */
@media (max-width: 1100px) {
	.za-man-ic,
	.za-ekip-ic {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* tek kolonda sticky başlığın anlamı kalmıyor */
	.za-man-sol {
		position: static;
	}

	.za-ilke-grid,
	.za-vm-grid {
		grid-template-columns: 1fr;
	}

	.za-ik,
	.za-ik:nth-child(even) {
		padding: 32px 0 34px;
		border-left: 0;
	}

	.za-soz-liste,
	.za-yak-grid {
		grid-template-columns: 1fr;
	}

	.za-sz,
	.za-sz + .za-sz,
	.za-yk,
	.za-yk + .za-yk {
		padding: 26px 0;
		border-right: 0;
	}

	.za-sz {
		border-bottom: 1px solid rgba(255, 255, 255, .13);
	}

	.za-sz:last-child {
		border-bottom: 0;
	}

	.za-yk {
		border-bottom: 1px solid var(--za-cizgi);
	}

	.za-yk:last-child {
		border-bottom: 0;
	}


	/* mobilde binen küçük görsel akışı bozuyor */
	.za-ekip-gorsel {
		padding-bottom: 0;
	}

	.za-ekip-kucuk {
		display: none;
	}
}

@media (max-width: 700px) {
	.za-man {
		padding-bottom: 66px;
	}

	.za-ilke,
	.za-yak {
		padding: 62px 0 66px;
	}

	.za-soz {
		padding: 62px 0 64px;
	}

	.za-ekip {
		padding: 66px 0 70px;
	}

	.za-mnf {
		padding: 58px 0 62px;
	}

	.za-mnf p {
		padding-left: 24px;
	}

	.za-man-ic,
	.za-ilke-ic,
	.za-soz-ic,
	.za-ekip-ic,
	.za-vm-ic,
	.za-mnf-ic,
	.za-yak-ic,
	.za-nfilt-ic,
	.za-nlist-ic {
		padding: 0 20px;
	}

	.za-vmb {
		padding: 32px 22px 36px;
	}

	.za-man-metin p,
	.za-ekip-metin p {
		font-size: 15.5px;
	}

	.za-nfilt button {
		padding: 14px 16px;
		font-size: 11.5px;
	}

	.za-nlist {
		padding: 40px 0 70px;
	}

	.za-nlist-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.za-yakinda {
		padding: 28px 22px 30px;
	}


	.za-sbas-gorsel {
		margin-top: 30px;
	}
}

/* ========================================================
   16) HİZMETLER LİSTESİ (hizmetlerimiz.html)
   İki grup: Yazılım Çözümleri (2 kart, geniş) ve Zayıf Akım
   Sistemleri (8 kart). Kart görselleri ana sayfadakiyle aynı
   izometrik maketler; özet metinleri de hizmet sayfalarının
   hero altı metinleriyle birebir aynı.
   ======================================================== */
.za-hzl {
	background: #fff;
	padding: 18px 0 92px;
}

.za-hzl.alt-zemin {
	background: var(--za-zemin);
	border-top: 1px solid var(--za-cizgi);
	padding-top: 84px;
}

.za-hzl-ic {
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 24px;
}

.za-hzl-bas {
	max-width: 62ch;
	margin-bottom: 46px;
}

.za-hzl-bas h2 {
	margin: 16px 0 0 !important;
	font-size: clamp(24px, 2.8vw, 38px);
	font-weight: 700;
	line-height: 1.17;
	letter-spacing: -.032em;
	color: var(--za-lacivert);
}

.za-hzl-bas h2 em {
	font-style: normal;
	color: var(--za-vurgu);
}

.za-hzl-giris {
	margin: 16px 0 0 !important;
	font-size: 16px;
	line-height: 1.74;
	color: var(--za-gri);
}

.za-hzl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
	gap: 22px;
}

/* yazılım tarafında iki ürün var; kartlar yatay ve geniş duruyor */
.za-hzl-grid.ikili {
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

/* --- hizmet kartı --- */
.za-hzk {
	display: flex;
	flex-direction: column;
	padding: 18px 18px 22px;
	border: 1px solid var(--za-cizgi);
	border-radius: 4px;
	background: #fff;
	text-decoration: none;
	transition: border-color .2s ease, transform .24s var(--za-ease),
	            box-shadow .24s var(--za-ease);
}

.za-hzk:hover {
	border-color: #C2CDDA;
	transform: translateY(-3px);
	box-shadow: 0 2px 10px -4px rgba(13, 35, 64, .1),
	            0 28px 52px -28px rgba(13, 35, 64, .28);
}

.za-hzk:focus-visible {
	outline: 2px solid var(--za-vurgu);
	outline-offset: 3px;
}

/* görsel alanı: şeffaf izometrik maketin arkasında yumuşak daire */
.za-hzk-gorsel {
	position: relative;
	display: grid;
	place-items: center;
	height: 148px;
	margin-bottom: 16px;
	border-radius: 3px;
	background:
		radial-gradient(closest-side at 50% 52%, #EEF3F9, rgba(238, 243, 249, 0) 78%);
	overflow: hidden;
	overflow: clip;
}

.za-hzl.alt-zemin .za-hzk-gorsel {
	background:
		radial-gradient(closest-side at 50% 52%, #E9F0F7, rgba(233, 240, 247, 0) 78%);
}

/* Yükseklik grid hücresinde yüzdeyle tutmuyor (ana sayfada da bu tuzağa
   düşülmüştü) — mutlak konum + inset ile sabitliyoruz. */
.za-hzk-gorsel img {
	position: absolute;
	inset: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	object-fit: contain;
	transition: transform .4s var(--za-ease);
}

.za-hzk:hover .za-hzk-gorsel img {
	transform: scale(1.05);
}

.za-hzk-govde {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.za-hzk-ad {
	display: block;
	margin-bottom: 9px;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 17.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.024em;
	color: var(--za-lacivert);
	transition: color .18s ease;
}

.za-hzk:hover .za-hzk-ad {
	color: var(--za-vurgu);
}

.za-hzk-ozet {
	display: block;
	flex: 1 1 auto;
	font-size: 14.5px;
	line-height: 1.68;
	color: var(--za-gri);
}

.za-hzk-devam {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--za-vurgu);
}

.za-hzk-devam .za-hb-ok {
	width: 13px;
	height: 13px;
	flex: 0 0 13px;
}

.za-hzk:hover .za-hzk-devam .za-hb-ok {
	transform: translateX(4px);
}

/* ========================================================
   17) REFERANSLAR (referanslar.html)
   ======================================================== */
.za-ref {
	background: #fff;
	padding: 14px 0 96px;
}

.za-ref-ic {
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 24px;
}

.za-ref-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 22px;
}

.za-refk {
	display: flex;
	flex-direction: column;
	padding: 22px 22px 24px;
	border: 1px solid var(--za-cizgi);
	border-radius: 4px;
	background: #fff;
	transition: border-color .2s ease, transform .24s var(--za-ease),
	            box-shadow .24s var(--za-ease);
}

.za-refk:hover {
	border-color: #C2CDDA;
	transform: translateY(-3px);
	box-shadow: 0 2px 10px -4px rgba(13, 35, 64, .1),
	            0 26px 48px -26px rgba(13, 35, 64, .24);
}

/* Logo alanı: tuval (_logo-isle.py) zaten ortalanmış ve paylı olduğu için
   burada contain yeterli, logo kırpılmıyor. Görsel yüklenmezse tarayıcı
   alt metnini (marka adını) gösteriyor — sessiz yedek. */
.za-refk-logo {
	position: relative;
	display: block;
	height: 104px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--za-cizgi);
}

/* ⚠️ Görsel MUTLAK konumlu. max-height:100% grid/flex kutusunda tutmuyor;
   logo 300px doğal boyutunda render edilip kartı aşıyor ve metnin üstüne
   biniyordu. Aynı tuzağa ana sayfada da düşülmüştü. */
.za-refk-logo img {
	position: absolute;
	inset: 0 0 12px;
	width: 100%;
	height: calc(100% - 12px);
	object-fit: contain;
	/* logolar renkli; kart sakin dursun diye hafif soluk, hover'da tam */
	opacity: .9;
	transition: opacity .2s ease;
}

.za-refk:hover .za-refk-logo img {
	opacity: 1;
}

.za-refk-sektor {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--za-vurgu);
}

.za-refk-ad {
	display: block;
	margin: 9px 0 8px;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.024em;
	color: var(--za-lacivert);
}

.za-refk p {
	margin: 0 !important;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--za-gri);
}

.za-ref-not {
	max-width: 68ch;
	margin: 40px 0 0 !important;
	padding-left: 20px;
	border-left: 2px solid var(--za-cizgi);
	font-size: 14.5px;
	line-height: 1.72;
	color: #8B9AAB;
}

@media (max-width: 1000px) {
	.za-hzl-grid.ikili {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) {
	.za-hzl {
		padding-bottom: 66px;
	}

	.za-hzl.alt-zemin {
		padding-top: 62px;
	}

	.za-hzl-ic,
	.za-ref-ic {
		padding: 0 20px;
	}

	.za-hzl-bas {
		margin-bottom: 32px;
	}

	/* Uğur: mobilde kartlar tek tek kocaman uzuyordu — ana sayfadaki gibi
	   2'li ızgara. Kart içi ölçüler aşağıda buna göre küçültüldü. */
	.za-hzl-grid,
	.za-ref-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.za-hzk {
		padding: 12px 12px 15px;
	}

	.za-hzk-gorsel {
		height: 92px;
		margin-bottom: 11px;
	}

	.za-hzk-ad {
		font-size: 14.5px;
		margin-bottom: 6px;
	}

	.za-hzk-ozet {
		font-size: 12.5px;
		line-height: 1.6;
	}

	.za-hzk-devam {
		margin-top: 12px;
		font-size: 10.5px;
		letter-spacing: .1em;
	}

	.za-refk {
		padding: 14px 13px 16px;
	}

	.za-refk-logo {
		height: 62px;
		margin-bottom: 13px;
	}

	.za-refk-sektor {
		font-size: 9.5px;
		letter-spacing: .12em;
	}

	.za-refk-ad {
		font-size: 15.5px;
		margin: 7px 0 6px;
	}

	.za-refk p {
		font-size: 12.5px;
		line-height: 1.6;
	}

	.za-refk-isbirligi {
		margin-top: 12px;
		padding-top: 11px;
		font-size: 10px;
		letter-spacing: .06em;
	}

	.za-hzk-gorsel {
		height: 128px;
	}

	.za-ref {
		padding-bottom: 70px;
	}

	.za-refk {
		padding: 18px 18px 20px;
	}

	.za-refk-logo {
		height: 86px;
		margin-bottom: 16px;
	}
}

/* --------------------------------------------------------
   ÜST BAR — MOBİL
   Masaüstünde tek satırda telefon · e-posta · destek duruyor.
   Dar ekranda üçü sığmayıp sarıyor ve satırlar birbirine giriyordu;
   burada ayraçlar kaldırılıp öğeler ortalanmış iki satıra dağıtılıyor.
   -------------------------------------------------------- */
@media (max-width: 920px) {
	.site-top-header-wrap .site-container {
		padding: 0 20px;
	}

	.ub {
		justify-content: center;
		gap: 6px 16px;
		font-size: 12.5px;
	}
}

@media (max-width: 600px) {
	.ub {
		gap: 5px 14px;
		font-size: 12px;
	}

	/* dikey ayraç çizgileri sarma satırlarında yanlış yere düşüyor */
	.ub-s {
		display: none;
	}

	/* Dar ekranda üç bilgi tek satıra sığmıyor, ikinci satıra sarınca da
	   üst bar iki kat kalınlaşıyordu. 7/24 bilgisi burada gizleniyor —
	   footer'ın iletişim kolonunda ve hizmet sayfalarında zaten var. */
	.ub-saat {
		display: none;
	}
}

@media (max-width: 380px) {
	.ub {
		font-size: 11.5px;
	}
}

/* Nitelik kutuları dar ekranda da 2×2 duruyor; yan yana iki kutu için
   ikon ve yazı alt alta geçiyor, yoksa metin iki harfe sıkışıyor. */
@media (max-width: 560px) {
	.za-oz {
		flex-direction: column;
		gap: 9px;
		padding: 15px 13px;
	}

	.za-oz-yazi b {
		font-size: 13.5px;
	}

	.za-oz-yazi i {
		font-size: 12px;
	}
}

/* Hakkımızda sayfası — mobil
   Tek kolona inince görsel mozaik dar kalıyordu; tam genişliğe alınıp
   başlık büyütüldü. */
@media (max-width: 1100px) {
	.za-ekip-gorsel {
		max-width: 560px;
	}

	.za-ekip-metin h2,
	.za-man-sol h2 {
		font-size: clamp(25px, 6.6vw, 36px);
	}
}

@media (max-width: 700px) {
	.za-ekip-gorsel {
		max-width: none;
	}

	.za-ekip-metin p,
	.za-man-metin p {
		font-size: 15.5px;
		line-height: 1.74;
	}
}

/* Kullanım alanı kartları dar ekranda da 2'li; iç boşluk ve yazı küçültüldü. */
@media (max-width: 560px) {
	.za-alan {
		padding: 14px 12px 16px;
	}

	.za-alan b {
		font-size: 13.5px;
	}

	.za-alan p {
		font-size: 12.5px;
		line-height: 1.6;
	}
}

/* Referans kartının altındaki iş birliği satırı. Hangi kuruma hangi
   sistemin kurulduğu bilinmediği için burada proje adı YOK; yalnızca
   iş birliği belirtiliyor. */
.za-refk-isbirligi {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--za-cizgi);
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--za-lacivert);
}

.za-refk-isbirligi::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
	background: var(--za-vurgu);
	-webkit-mask: var(--za-onay) center / contain no-repeat;
	mask: var(--za-onay) center / contain no-repeat;
}

:root {
	--za-onay: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m4.5 12.5 5 5 10-11'/></svg>");
}

@media (max-width: 600px) {
	.site-logo {
		height: 36px;
	}
}

/* ========================================================
   18) YASAL METİN SAYFALARI
   gizlilik-politikasi · kvkk · cerez-politikasi
   Tek kolon, okuma genişliği sınırlı (75ch civarı). Numaralı
   başlıklar ve tanım listeleri metnin taranmasını kolaylaştırıyor.
   ======================================================== */
.za-yasal {
	background: #fff;
	padding: 8px 0 96px;
}

.za-yasal-ic {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 24px;
}

.za-yasal-tarih {
	display: inline-block;
	margin: 0 0 34px !important;
	padding: 7px 13px;
	border-radius: 3px;
	background: var(--za-zemin);
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--za-gri);
}

.za-yasal-ic h2 {
	margin: 40px 0 14px !important;
	padding-top: 30px;
	border-top: 1px solid var(--za-cizgi);
	font-size: clamp(19px, 2.1vw, 24px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.024em;
	color: var(--za-lacivert);
}

.za-yasal-ic h2:first-of-type {
	margin-top: 0 !important;
	padding-top: 0;
	border-top: 0;
}

.za-yasal-ic h3 {
	margin: 26px 0 10px !important;
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--za-lacivert);
}

.za-yasal-ic p {
	margin: 0 0 15px !important;
	font-size: 16px;
	line-height: 1.78;
	color: var(--za-gri);
}

.za-yasal-ic ul,
.za-yasal-ic ol {
	margin: 0 0 18px !important;
	padding-left: 22px;
}

.za-yasal-ic li {
	margin-bottom: 9px;
	font-size: 16px;
	line-height: 1.74;
	color: var(--za-gri);
}

.za-yasal-ic li::marker {
	color: var(--za-vurgu);
}

.za-yasal-ic strong {
	font-weight: 700;
	color: var(--za-lacivert);
}

.za-yasal-ic a {
	color: var(--za-vurgu);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.za-yasal-ic a:hover {
	color: var(--za-vurgu-koyu);
}

/* veri sorumlusu / iletişim künyesi */
.za-yasal-kunye {
	margin: 4px 0 18px;
	padding: 20px 22px;
	border: 1px solid var(--za-cizgi);
	border-left: 2px solid var(--za-vurgu);
	border-radius: 0 3px 3px 0;
	background: var(--za-zemin);
}

.za-yasal-kunye p {
	margin: 0 0 7px !important;
	font-size: 15px;
}

.za-yasal-kunye p:last-child {
	margin-bottom: 0 !important;
}

/* ⚠️ Serhat'tan beklenen bilgiler. Yayına çıkmadan ÖNCE hepsi doldurulup
   bu işaretlemeler kaldırılacak — bu yüzden göze batacak şekilde duruyor. */
.za-eksik {
	padding: 2px 7px;
	border-radius: 2px;
	background: #FFF3C4;
	box-shadow: inset 0 0 0 1px #E9C765;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 13.5px;
	font-weight: 700;
	color: #7A5B00;
}

/* metin içi tablo (çerez listesi) */
.za-yasal-tablo-sarmal {
	margin: 0 0 20px;
	overflow-x: auto;
}

.za-yasal-tablo {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.za-yasal-tablo th,
.za-yasal-tablo td {
	padding: 12px 14px;
	border: 1px solid var(--za-cizgi);
	text-align: left;
	vertical-align: top;
	line-height: 1.6;
	color: var(--za-gri);
}

.za-yasal-tablo th {
	background: var(--za-zemin);
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--za-lacivert);
	white-space: nowrap;
}

@media (max-width: 700px) {
	.za-yasal {
		padding-bottom: 70px;
	}

	.za-yasal-ic {
		padding: 0 20px;
	}

	.za-yasal-ic p,
	.za-yasal-ic li {
		font-size: 15.5px;
	}

	.za-yasal-ic h2 {
		margin-top: 32px !important;
		padding-top: 24px;
	}

	.za-yasal-kunye {
		padding: 16px 16px;
	}
}

/* Yalnızca İngilizce dilde görünen çeviri uyarısı. Metnin kendisi zaten
   İngilizce ve data-dil-atla taşıdığı için çeviri motoru ona dokunmuyor. */
.za-yasal-cd {
	display: none;
}

html[data-dil="en"] .za-yasal-cd {
	display: block;
	margin: 0 0 30px !important;
	padding: 14px 17px;
	border-left: 2px solid var(--za-vurgu);
	border-radius: 0 3px 3px 0;
	background: var(--za-zemin);
	font-size: 14.5px;
	line-height: 1.66;
	color: var(--za-gri);
}