/* =========================================================
   ZAYIF AKIM — ÖZEL STİL
   Bu dosyayı Kaya düzenler. Panelden Ek CSS'e bir şey yazmayın,
   çakışma olmasın diye tüm özel CSS burada tutuluyor.
   ========================================================= */

:root {
	--za-lacivert: #0D2340;
	--za-lacivert-koyu: #081729;
	/* Vurgu rengi = logodaki turkuaz. 12 Ağustos 2026'da kırmızıdan (#E1121F)
	   çevrildi (Uğur: "logomuzdaki tema rengimiz"). Değişken adı da
	   --za-kirmizi → --za-vurgu olarak güncellendi; HTML'deki za-btn-kirmizi /
	   za-serit-kirmizi gibi SINIF adları eski kaldı, yalnızca ad. */
	--za-vurgu: #2596BE;
	--za-vurgu-koyu: #1B7897;
	--za-metin: #1B2A3D;
	--za-gri: #5A6B7F;
	--za-zemin: #F4F7FA;
	--za-cizgi: #E1E7EE;
	/* header'ın gerçek yüksekliği — JS ölçüp buraya yazıyor (zayif-akim-stil.php) */
	--za-header-h: 112px;

	/* Tipografik ölçek — aynı hiyerarşi seviyesi her yerde aynı değeri kullansın.
	   Önceden bölüm başlıkları üç ayrı clamp formülüyle tanımlıydı, gövde
	   metinlerinde 13.5–17px arası birbirini tekrar eden 8 değer vardı. */
	--za-fs-h2:    clamp(30px, 3.2vw, 44px);  /* bölüm başlıkları */
	--za-fs-h2-sm: clamp(25px, 2.5vw, 34px);  /* şerit/CTA gibi kısa bölümler */
	--za-fs-lead:  17px;                       /* hero altı giriş metni */
	--za-fs-body:  16.5px;                     /* bölüm açıklamaları */
	--za-fs-sm:    15px;                       /* kart metni, menü */
	--za-fs-meta:  13.5px;                     /* üst bar, telif, etiketler */

	/* Bölüm boşlukları */
	--za-bolum-ust: 90px;
	--za-bolum-alt: 96px;
	--za-bolum-yan: 24px;
}

/* Tam genişlik bölümler arasında beyaz çizgi/boşluk kalmasın */
.entry-content > .alignfull,
.entry-content > .wp-block-group.alignfull {
	margin-block: 0 !important;
}

/* =========================================================
   1) HEADER — ÜST BAR (telefon / e-posta / çalışma saatleri)
   HTML'i: Görünüm → Özelleştir → Header → HTML kutusu

   NOT: İkonlar buraya gömülü (mask-image). WordPress'in HTML
   alanı <svg> etiketlerini güvenlik gereği siliyor, o yüzden
   ikonlar HTML'de değil CSS'te tutuluyor.
   ========================================================= */
.ub {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	font-size: var(--za-fs-meta);
	letter-spacing: .01em;
	line-height: 1;
}

.ub .ub-i {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	/* Dokunma hedefi: ikon+metin tek başına ~15px kalıyor, parmakla vurulmuyor.
	   Telefon linki mobilde en kritik mikro-dönüşüm — payı burada veriyoruz. */
	padding: 9px 2px;
	color: rgba(255, 255, 255, .86);
	/* Kadence link stilini eziyoruz, alt çizgi istemiyoruz */
	text-decoration: none !important;
	box-shadow: none !important;
	transition: color .18s cubic-bezier(.34, 1.4, .64, 1);
}

/* ikon kutusu — hangi ikon olduğu --ikon değişkeninden geliyor */
.ub-i::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
	background: currentColor;
	opacity: .68;
	-webkit-mask: var(--ikon) center / contain no-repeat;
	mask: var(--ikon) center / contain no-repeat;
	transition: opacity .18s ease, background-color .18s ease;
}

.ub-tel {
	--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.8' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.1 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/></svg>");
}

.ub-mail {
	--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.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m2 6 10 7 10-7'/></svg>");
}

.ub-saat {
	--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.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9.2'/><path d='M12 7v5.2l3.4 2'/></svg>");
}

.ub a.ub-i:hover {
	color: #fff;
}

.ub a.ub-i:hover::before {
	opacity: 1;
	background: var(--za-vurgu);
}

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

/* çalışma saatleri — link değil, o yüzden daha soluk */
.ub .ub-t {
	color: rgba(255, 255, 255, .58);
	cursor: default;
}

/* ince dikey ayırıcı */
.ub-s {
	width: 1px;
	height: 13px;
	background: rgba(255, 255, 255, .18);
	display: inline-block;
	flex: 0 0 1px;
}

@media (max-width: 781px) {
	.ub {
		justify-content: center;
		gap: 10px;
		font-size: 12.5px;
	}
	.ub-s {
		display: none;
	}
	/* telefonda çalışma saatleri gereksiz yer kaplıyor */
	.ub .ub-t {
		display: none;
	}
}

/* =========================================================
   2) MEGA MENÜ (Max Mega Menu eklentisi)
   Eklenti kendi koyu gri temasıyla geliyor, hepsini eziyoruz.
   Panelde ayar aramaya gerek yok, görsel tarafı burada.
   ========================================================= */

/* --- 2a) eklentinin kabuğunu şeffaflaştır --- */
#mega-menu-wrap-primary,
#mega-menu-wrap-primary #mega-menu-primary,
#mega-menu-wrap-primary .mega-menu-toggle {
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* --- 2b) üst seviye menü linkleri --- */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
	background: transparent !important;
	color: var(--za-lacivert) !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: -.005em !important;
	text-transform: none !important;
	height: auto !important;
	line-height: 1 !important;
	padding: 10px 15px !important;
	border-radius: 3px;
	position: relative;
	transition: color .18s ease;
}

/* hover / açık durum — kırmızıya geçiyor, altında ince çizgi belirir */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link::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);
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
	background: transparent !important;
	color: var(--za-vurgu) !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover::after,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link::after,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link::after {
	transform: scaleX(1);
}

/* --- 2c) açılan panel --- */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
	background: #fff !important;
	width: 1020px !important;
	max-width: calc(100vw - 40px) !important;
	left: auto !important;
	right: 0 !important;
	padding: 26px 30px 30px !important;
	border: 1px solid var(--za-cizgi) !important;
	border-top: 3px solid var(--za-vurgu) !important;
	border-radius: 0 0 5px 5px !important;
	box-shadow: 0 28px 56px -16px rgba(13, 35, 64, .22),
	            0 4px 12px -4px rgba(13, 35, 64, .08) !important;
}

/* panelin üstüne küçük etiket — tise'deki "TÜM HİZMETLERİMİZ" gibi */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu::before {
	content: "ÇÖZÜMLERİMİZ";
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--za-vurgu);
	margin-bottom: 18px;
}

/* --- 2d) paneldeki kategoriler — kart görünümü --- */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
	display: flex !important;
	align-items: center !important;
	gap: 10px;
	background: #fff !important;
	color: var(--za-lacivert) !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	text-transform: none !important;
	padding: 13px 14px !important;
	margin: 0 0 8px !important;
	/* isimler 1 veya 2 satır olabiliyor; sabit yükseklik hepsini hizalıyor */
	min-height: 56px;
	border: 1px solid var(--za-cizgi) !important;
	border-radius: 4px;
	transition: border-color .18s ease, background-color .18s ease,
	            color .18s ease, transform .18s cubic-bezier(.34, 1.3, .64, 1);
}

/* kartın solundaki ikon kutusu.
   Hangi ikon geleceği menü öğesine yazılan CSS sınıfından belli oluyor
   (Görünüm → Menüler → öğe → "CSS Sınıfları" alanı → ik-kamera, ik-alarm ...) */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link::before {
	content: "";
	width: 21px;
	height: 21px;
	flex: 0 0 21px;
	background: var(--za-lacivert);
	opacity: .5;
	-webkit-mask: var(--ikon) center / contain no-repeat;
	mask: var(--ikon) center / contain no-repeat;
	transition: background-color .18s ease, opacity .18s ease, transform .18s cubic-bezier(.34, 1.3, .64, 1);
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover::before {
	background: var(--za-vurgu);
	opacity: 1;
	transform: scale(1.08);
}

/* --- kategori ikonları (ince çizgi, 21px) --- */
.ik-kamera {
	--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='M15 10.5l5-2.6a.8.8 0 0 1 1.2.7v6.8a.8.8 0 0 1-1.2.7l-5-2.6'/><rect x='2.8' y='6.2' width='12.2' height='11.6' rx='2'/><circle cx='8.9' cy='12' r='2.4'/></svg>");
}

.ik-alarm {
	--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='M18 8.5A6 6 0 0 0 6 8.5c0 6.5-2.6 8.5-2.6 8.5h17.2S18 15 18 8.5'/><path d='M13.7 20.5a2 2 0 0 1-3.4 0'/></svg>");
}

.ik-yangin {
	--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='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.4-.5-2-1-3-1.1-2.1-.2-4 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.2.4-2.3 1-3a2.5 2.5 0 0 0 2.5 2.5z'/></svg>");
}

.ik-gecis {
	--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='5' width='19' height='14' rx='2'/><circle cx='8.6' cy='10.8' r='2.1'/><path d='M5.2 16c.8-1.2 2-1.9 3.4-1.9s2.6.7 3.4 1.9'/><path d='M15 10h4M15 13.6h2.6'/></svg>");
}

.ik-interkom {
	--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='5.5' y='2.5' width='13' height='19' rx='2'/><circle cx='12' cy='8.2' r='2.6'/><path d='M9.2 14.4h5.6M10.4 17.6h3.2'/></svg>");
}

.ik-santral {
	--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 14.5v-3.2a8 8 0 0 1 16 0v3.2'/><path d='M4 14.5a2 2 0 0 0 2 2h1v-5H6a2 2 0 0 0-2 2z'/><path d='M20 14.5a2 2 0 0 1-2 2h-1v-5h1a2 2 0 0 1 2 2z'/><path d='M17 16.8v.7a3 3 0 0 1-3 3h-1.6'/></svg>");
}

.ik-kablo {
	--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='9' y='2.5' width='6' height='5' rx='1'/><rect x='2' y='16.5' width='6' height='5' rx='1'/><rect x='16' y='16.5' width='6' height='5' rx='1'/><path d='M12 7.5v4.2'/><path d='M5 16.5v-2.4h14v2.4'/></svg>");
}

.ik-ses {
	--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 10.6v2.8a1 1 0 0 0 1 1h2.2L11 18V6l-4.8 3.6H4a1 1 0 0 0-1 1z'/><path d='M15.2 8.6a4.8 4.8 0 0 1 0 6.8'/><path d='M18.4 6a8.4 8.4 0 0 1 0 12'/></svg>");
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover {
	background: #fff !important;
	color: var(--za-vurgu) !important;
	border-color: rgba(37, 150, 190, .45) !important;
	transform: translateX(2px);
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover::before {
	background: var(--za-vurgu);
	height: 20px;
}

/* kolon aralığı */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-column {
	padding: 0 6px !important;
}

/* eklentinin satır/sütun boşlukları paneli gereksiz uzatıyor, sıfırlıyoruz */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu ul.mega-sub-menu > li.mega-menu-row {
	margin-bottom: 0 !important;
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:last-child > a.mega-menu-link {
	margin-bottom: 0 !important;
}

/* --- 2e) mobil --- */
@media (max-width: 781px) {
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
		width: 100% !important;
		padding: 16px !important;
		border-radius: 0 !important;
	}
}

/* =========================================================
   3) ANA SAYFA — HERO
   Blok kodu: Sayfalar → Ana sayfa → Kod düzenleyici
   ========================================================= */
.za-hero {
	position: relative;
	/* clip = kırpar ama kaydırılabilir kap OLUŞTURMAZ.
	   hidden ile taşan mutlak konumlu katmanlar (::before/::after) bölümü
	   gizli bir scroll kabına çeviriyor; tarayıcı bir odak/çapa atlamasında
	   o kabı kaydırıp içeriği yukarı kaydırıyordu. hidden satırı eski
	   tarayıcılar için yedek olarak duruyor. */
	overflow: hidden;
	overflow: clip;
	/* ilk ekranı tam kaplasın — header'ın ölçülen yüksekliği düşülüyor */
	min-height: calc(100svh - var(--za-header-h));
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* alttaki marka bandına yer bırakılıyor */
	padding: 0 0 176px;
	background:
		radial-gradient(1100px 620px at 82% 18%, rgba(35, 82, 140, .55), transparent 68%),
		radial-gradient(760px 520px at 12% 88%, rgba(37, 150, 190, .13), transparent 70%),
		linear-gradient(152deg, #0A1C33 0%, #12304F 52%, #0B2138 100%);
	color: #fff;
}

/* Nokta ızgarası — çok yavaş kayarak derinlik hissi veriyor.
   İki farklı yoğunlukta katman üst üste: yakın/uzak izlenimi. */
.za-hero::before {
	content: "";
	position: absolute;
	inset: -10%;
	background-image:
		radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px),
		radial-gradient(rgba(120, 190, 255, .1) 1px, transparent 1px);
	background-size: 42px 42px, 96px 96px;
	background-position: 0 0, 20px 30px;
	animation: za-izgara 70s linear infinite;
	pointer-events: none;
}

/* Işık bulutları — iki ayrı odak yavaşça süzülüyor.
   Shader yerine bu: aynı "canlı arka plan" etkisi, GPU'yu yormuyor,
   telefonda pil tüketmiyor ve JS gerektirmiyor. */
.za-hero::after {
	content: "";
	position: absolute;
	inset: -25%;
	background:
		radial-gradient(circle at 78% 22%, rgba(120, 190, 255, .16), transparent 42%),
		radial-gradient(circle at 22% 78%, rgba(37, 150, 190, .1), transparent 46%),
		radial-gradient(circle at 52% 46%, rgba(80, 150, 220, .08), transparent 50%);
	animation: za-isik 26s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes za-izgara {
	to {
		background-position: 420px 420px, 960px -960px;
	}
}

@keyframes za-isik {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
		opacity: .9;
	}
	50% {
		transform: translate3d(-3.5%, 2.5%, 0) scale(1.14);
		opacity: 1;
	}
	100% {
		transform: translate3d(2.5%, -2%, 0) scale(1.06);
		opacity: .94;
	}
}

/* Hareket hassasiyeti olan kullanıcılarda arka plan sabit kalır */
@media (prefers-reduced-motion: reduce) {
	.za-hero::before,
	.za-hero::after {
		animation: none;
	}
}

/* WordPress hero'nun içine inner-container koyuyor; bant onun altına
   yapışıyordu (hero'nun değil). display:contents ile o kutu yok sayılıyor,
   böylece içerik ve bant doğrudan hero'nun çocuğu gibi davranıyor. */
.za-hero > .wp-block-group__inner-container {
	display: contents !important;
}

.za-hero > *,
.za-hero > .wp-block-group__inner-container > * {
	position: relative;
	z-index: 1;
}

/* Hero içeriği — kendi sarmalayıcısında.
   Bu şart: WordPress'in "constrained layout" kuralı doğrudan çocuklara
   margin-left/right:auto !important basıyor, yani her satırı ortalıyor.
   İçeriği ayrı bir kutuya alınca o kural devreye girmiyor,
   yazılar sola dayalı kalıyor. */
.za-hero-ic {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	/* daha geniş kutu = içerik daha sola yaklaşıyor */
	max-width: 1360px;
	margin: 0 auto !important;
	padding: 40px 28px 0;
}

.za-hero-ic > .wp-block-group__inner-container {
	display: contents;
}

/* içerideki her satır sola dayalı */
.za-hero-ic > *,
.za-hero-ic > .wp-block-group__inner-container > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* --- bölüm etiketi (sadece kırmızı yazı; çizgi yok) --- */
.za-etiket {
	margin: 0 0 20px !important;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--za-vurgu);
}

/* hero içindeki etiket biraz daha parlak dursun */
.za-hero .za-etiket {
	color: #5CC8E8;
}

/* --- başlık --- */
.za-hero-baslik {
	/* sola dayalı kalsın — max-width verilince WordPress ortalıyor */
	margin: 0 auto 22px 0 !important;
	/* !important şart: Kadence'ın içerik kuralları max-width'i eziyor */
	max-width: 24ch !important;
	font-size: clamp(38px, 5.4vw, 68px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.035em;
	color: #fff;
}

/* --- açıklama --- */
.za-hero-metin {
	margin: 0 auto 34px 0 !important;
	/* 3 satıra bölünsün, tek satır halinde ekrana yayılmasın */
	max-width: 46ch !important;
	font-size: 17px;
	line-height: 1.72;
	color: rgba(255, 255, 255, .74);
}

/* --- butonlar --- */
.za-hero-butonlar {
	gap: 14px !important;
}

.za-hero-butonlar .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 16px 26px;
	border-radius: 3px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.005em;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease,
	            color .2s ease, transform .2s cubic-bezier(.34, 1.3, .64, 1);
}

/* butonların sağındaki ok */
.za-hero-butonlar .wp-block-button__link::after {
	content: "";
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	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);
}

:root {
	--za-ok: 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='M5 12h13'/><path d='m13 6 6 6-6 6'/></svg>");
}

.za-hero-butonlar .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* dolu kırmızı buton */
.za-btn-kirmizi .wp-block-button__link {
	background: var(--za-vurgu) !important;
	color: #fff !important;
	border: 1px solid var(--za-vurgu);
	box-shadow: 0 12px 28px -12px rgba(37, 150, 190, .6);
}

.za-btn-kirmizi .wp-block-button__link:hover {
	background: var(--za-vurgu-koyu) !important;
	border-color: var(--za-vurgu-koyu);
	transform: translateY(-2px);
}

/* çerçeveli buton */
.za-btn-hat .wp-block-button__link {
	background: transparent !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, .32);
}

.za-btn-hat .wp-block-button__link:hover {
	background: rgba(255, 255, 255, .08) !important;
	border-color: rgba(255, 255, 255, .6);
	transform: translateY(-2px);
}

.za-hero-butonlar .wp-block-button__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (max-width: 781px) {
	.za-hero {
		min-height: auto;
		padding: 58px 0 64px;
	}
	.za-hero-baslik {
		max-width: none;
		letter-spacing: -.028em;
	}
	.za-hero-metin {
		font-size: 16px;
	}
	.za-hero-butonlar .wp-block-button__link {
		padding: 14px 20px;
		font-size: 14.5px;
	}
}

/* =========================================================
   3b) WORDPRESS SARMALAYICI DÜZELTMESİ  ⚠️ önemli
   İç içe group bloklarında WordPress araya
   .wp-block-group__inner-container diye fazladan bir div koyuyor.
   Bu, flex/grid düzenlerini bozuyor (çocuklar sarmalayıcının içinde kalıyor).
   display:contents ile sarmalayıcıyı görsel olarak yok sayıyoruz,
   çocuklar doğrudan flex/grid elemanı oluyor.
   ========================================================= */
.za-markalar-serit > .wp-block-group__inner-container,
.za-markalar-ic > .wp-block-group__inner-container,
.za-kart-grid > .wp-block-group__inner-container,
.za-kart > .wp-block-group__inner-container,
.za-bolum-basi > .wp-block-group__inner-container,
.za-rakamlar > .wp-block-group__inner-container,
.za-neden-ic > .wp-block-group__inner-container,
.za-neden-sol > .wp-block-group__inner-container,
.za-avantajlar > .wp-block-group__inner-container,
.za-avantaj > .wp-block-group__inner-container,
.za-rakam > .wp-block-group__inner-container,
.za-cta-ic > .wp-block-group__inner-container,
.za-cta-metin > .wp-block-group__inner-container,
.za-altlik-ic > .wp-block-group__inner-container,
.za-cozum-grid > .wp-block-group__inner-container,
.za-sayfa-bas-ic > .wp-block-group__inner-container,
.za-tedarik > .wp-block-group__inner-container,
.za-tedarik-metin > .wp-block-group__inner-container {
	display: contents !important;
}

/* İkinci tuzak: WordPress/Kadence blokların arasına dikey margin basıyor
   (`> * + *`). Grid/flex kaplarda bu margin satır yüksekliğine ekleniyor,
   kartlar satırı doldurmadığı için aralarda gri şerit kalıyor.
   Grid elemanlarının dikey margin'ini burada sıfırlıyoruz — boşluğu
   sadece `gap` yönetsin. */
.za-kart-grid > *,
.za-kart-grid > .wp-block-group__inner-container > *,
.za-avantajlar > *,
.za-avantajlar > .wp-block-group__inner-container > *,
.za-rakamlar > *,
.za-rakamlar > .wp-block-group__inner-container > *,
.za-neden-ic > *,
.za-neden-ic > .wp-block-group__inner-container > *,
.za-cta-ic > *,
.za-cta-ic > .wp-block-group__inner-container > *,
.za-tedarik > *,
.za-tedarik > .wp-block-group__inner-container > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* =========================================================
   4) ORTAK BÖLÜM KALIBI (endeks'teki yapı)
   ── ETİKET / Dev Başlık / gri alt satır  → hepsi ortalı
   ========================================================= */
/* Yatay boşluk bölümün kendi padding'inde. WordPress'in "constrained"
   düzeni içeriği 1180px'e sığdırıp ortalıyor ama kenar boşluğu vermiyor;
   ekran 1180'in altına inince yazılar kenara yapışıyordu. */
.za-bolum {
	padding: var(--za-bolum-ust) var(--za-bolum-yan) var(--za-bolum-alt);
}

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

.za-bolum-basi {
	max-width: 620px;
	margin: 0 auto 52px;
	text-align: center;
}

/* ortalı bölümlerde etiketin çizgisi iki yana geliyor */
.za-bolum-basi .za-etiket {
	justify-content: center;
}

.za-bolum-basi .za-etiket::after {
	content: "";
	width: 30px;
	height: 2px;
	flex: 0 0 30px;
	background: var(--za-vurgu);
}

.za-bolum-baslik {
	margin: 0 0 14px !important;
	font-size: var(--za-fs-h2);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.03em;
	color: var(--za-lacivert);
}

.za-bolum-metin {
	margin: 0 !important;
	font-size: var(--za-fs-body);
	line-height: 1.7;
	color: var(--za-gri);
}

/* =========================================================
   4b) BÖLÜMLER ARASI BOŞLUK
   WordPress blokların arasına kendiliğinden boşluk koyuyor;
   tam genişlikte bölümlerde bu, aralarda beyaz çizgi bırakıyor.
   ========================================================= */
.za-hero,
.za-bolum,
.za-serit-kirmizi {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* =========================================================
   4b-2) HERO İÇİNDEKİ MARKA BANDI
   Silopi Kapı Dünyası'ndaki gibi: hero'nun alt kenarında,
   hero'nun içinde duran cam efektli şerit.
   ========================================================= */
.za-hero-bant {
	/* hero'nun tam alt kenarına oturuyor.
	   width:auto + margin:0 şart — WordPress'in alignfull kuralı
	   negatif margin ve 100vw genişlik basıyor, absolute'u bozuyor. */
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	top: auto !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	z-index: 2;
	padding: 22px 0 24px !important;
	/* Hero'yla bütün görünsün: neredeyse şeffaf, sadece yukarıdan aşağı
	   koyulaşan çok hafif bir tint. Blur ve üst çizgi bilinçli olarak yok —
	   ikisi de bandın sınırını belli edip "ayrı şerit" hissi veriyordu. */
	background: linear-gradient(180deg,
	            rgba(8, 22, 40, 0) 0%,
	            rgba(8, 22, 40, .035) 45%,
	            rgba(8, 22, 40, .09) 100%);
	border-top: 0;
}

.za-hero-bant > .wp-block-group__inner-container {
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* bant içindeki kartlar — yuvarlak, yarı saydam beyaz, logolar renkli okunsun */
.za-hero-bant .za-marka {
	width: 122px;
	height: 122px;
	/* logo görselleri geldikten sonra 16px'ten düşürüldü: yatay logolar
	   (Borusan, Gübretaş) daire içinde çok küçük kalıyordu. Logolar
	   şeffaflaştırıldıktan sonra bir kez daha düşürüldü. */
	padding: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .93);
	border-color: rgba(255, 255, 255, .5);
	box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .55);
}

.za-hero-bant .za-marka:hover {
	background: #fff;
	border-color: rgba(255, 255, 255, .9);
	box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .55);
}

.za-hero-bant .za-marka img {
	max-height: 62px;
}

.za-hero-bant /* Referans logosu. Tuval (_logo-isle.py) 316×216 ve logo içinde
   ortalanmış olduğu için burada contain yeterli; kırpma olmuyor. */
.za-marka-logo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* logolar renkli; şerit sakin dursun diye hafif soluk, hover'da tam */
	opacity: .88;
	transition: opacity .2s ease;
}

.za-marka:hover .za-marka-logo {
	opacity: 1;
}

.za-marka-ad {
	font-size: 14.5px;
	opacity: .74;
}

@media (max-width: 781px) {
	.za-hero {
		min-height: calc(100svh - var(--za-header-h));
		padding-bottom: 128px;
	}
	.za-hero-ic {
		padding: 28px 20px 0;
	}
	.za-hero-bant .za-marka {
		width: 88px;
		height: 88px;
		padding: 11px;
	}
	.za-hero-bant .za-marka img {
		max-height: 44px;
	}
	.za-hero-bant .za-marka-ad {
		font-size: 11.5px;
	}
}

/* =========================================================
   4c) MARKA BANDI
   İçeriği [za_markalar] kısa kodu üretir.
   Panel → Markalar → Yeni Ekle (marka adı + logo)
   8'den az marka varsa bant sabit durur; fazlaysa kaymaya başlar.
   ========================================================= */
.za-marka-serit {
	/* clip: kayan bant ekrandan taşıyor; hidden burada da gizli bir
	   kaydırılabilir kap yaratıp bandı yatay kaydırabiliyordu. */
	overflow: hidden;
	overflow: clip;
}

/* Kayan hâlde kenarlar sise giriyormuş gibi soluyor.
   Solma payını kart sayısına göre PHP hesaplıyor (--za-bant-solma). */
.za-marka-kayar {
	--za-bant-solma: 8%;
	-webkit-mask: linear-gradient(90deg,
	              transparent,
	              #000 var(--za-bant-solma),
	              #000 calc(100% - var(--za-bant-solma)),
	              transparent);
	mask: linear-gradient(90deg,
	      transparent,
	      #000 var(--za-bant-solma),
	      #000 calc(100% - var(--za-bant-solma)),
	      transparent);
}

/* sabit hâl — az marka varken ortada duruyor */
.za-marka-ic {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
}

/* Kayan hâl — liste ikiye katlandığı için %50 kayınca dikişsiz başa dönüyor.
   Süre PHP'den geliyor (--za-bant-sure), böylece bant uzasa da hız sabit kalıyor. */
.za-marka-kayar .za-marka-ic {
	justify-content: flex-start;
	flex-wrap: nowrap;
	width: max-content;
	gap: 0;
	/* süre PHP'den gelir; gelmezse 40s */
	animation: za-kay var(--za-bant-sure, 40s) linear infinite;
	/* alt piksel titremesini engeller */
	will-change: transform;
}

.za-marka-kayar:hover .za-marka-ic {
	animation-play-state: paused;
}

@keyframes za-kay {
	to {
		transform: translateX(-50%);
	}
}

.za-marka {
	flex: none;
	width: 158px;
	height: 108px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 11px 13px;
	background: #fff;
	border: 1px solid var(--za-cizgi);
	border-radius: 8px;
	box-shadow: 0 2px 10px -5px rgba(13, 35, 64, .16);
	transition: border-color .2s ease, box-shadow .22s ease,
	            transform .22s cubic-bezier(.34, 1.3, .64, 1);
}

.za-marka-kayar .za-marka {
	margin: 0 8px;
}

.za-marka:hover {
	border-color: rgba(37, 150, 190, .38);
	box-shadow: 0 16px 30px -14px rgba(13, 35, 64, .26);
	transform: translateY(-3px);
}

.za-marka img {
	max-width: 100%;
	max-height: 58px;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: .88;
	transition: opacity .22s ease;
}

.za-marka:hover img {
	opacity: 1;
}

/* Logosu henüz yüklenmemiş markalar yazıyla görünür.
   Renk opaklıkla soldurulmuyor: beyaz kart üzerinde .6 opaklık kontrastı
   4.3:1'e düşürüyordu (WCAG AA 4.5:1 istiyor, 16.5px bold "büyük metin" sayılmıyor). */
.za-marka-ad {
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.3;
	text-align: center;
	color: #2A4468;
	transition: color .2s ease;
}

.za-marka:hover .za-marka-ad {
	color: var(--za-lacivert);
}

/* hareket hassasiyeti olan kullanıcılarda bant durur */
@media (prefers-reduced-motion: reduce) {
	.za-marka-kayar .za-marka-ic {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
	}
}

@media (max-width: 781px) {
	.za-marka {
		width: 134px;
		height: 94px;
		padding: 14px;
	}
	.za-marka img {
		max-height: 46px;
	}
	.za-marka-ad {
		font-size: 14.5px;
	}
}

/* =========================================================
   5) HİZMET KARTLARI (4×2 grid — tise'deki yapı)
   İkonlar mega menüyle aynı sistemden geliyor: ik-kamera, ik-alarm ...
   ========================================================= */
.za-kart-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.za-kart {
	display: flex;
	flex-direction: column;
	padding: 26px 24px 28px !important;
	background: #fff;
	border: 1px solid var(--za-cizgi);
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(13, 35, 64, .04);
	transition: border-color .2s ease, box-shadow .22s ease,
	            transform .22s cubic-bezier(.34, 1.25, .64, 1);
}

/* ikon — kutunun içinde, hover'da kırmızıya dönüyor */
.za-kart::before {
	content: "";
	width: 46px;
	height: 46px;
	margin-bottom: 18px;
	border-radius: 5px;
	background:
		var(--za-zemin) center / 26px 26px no-repeat;
	/* ikonun kendisi maskeyle basılıyor, rengi ayrı katmanda */
	background-image: none;
	position: relative;
}

/* ikon maskesi ayrı bir katman olarak — böylece kutu rengi ve ikon rengi bağımsız */
.za-kart::after {
	content: "";
	position: absolute;
	top: 26px;
	left: 24px;
	width: 46px;
	height: 46px;
	background: var(--za-lacivert);
	opacity: .62;
	-webkit-mask: var(--ikon) center / 25px 25px no-repeat;
	mask: var(--ikon) center / 25px 25px no-repeat;
	transition: background-color .2s ease, opacity .2s ease, transform .22s cubic-bezier(.34, 1.3, .64, 1);
	pointer-events: none;
}

.za-kart {
	position: relative;
}

.za-kart h3 {
	margin: 0 0 9px !important;
	font-size: 16.5px !important;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -.015em;
	color: var(--za-lacivert);
	transition: color .18s ease;
}

/* Kart tıklanabilir. Link başlıkta duruyor ama tıklama alanı tüm kart:
   başlığın ::after katmanı kartın üstünü kaplıyor (stretched link).
   Kart hover'da yükseliyor ve kenarı kırmızıya dönüyordu; tıklanmıyor olması
   "tıkla beni" diyip hiçbir şey yapmamak demekti. */
.za-kart h3 a {
	color: inherit;
	text-decoration: none;
	box-shadow: none !important;
}

.za-kart h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Klavyeyle gezerken hangi kartta olduğu görünsün */
.za-kart:focus-within {
	border-color: rgba(37, 150, 190, .5);
	outline: 2px solid var(--za-vurgu);
	outline-offset: 2px;
}

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

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

.za-kart:hover::before {
	background-color: rgba(37, 150, 190, .07);
}

.za-kart:hover::after {
	background: var(--za-vurgu);
	opacity: 1;
	transform: scale(1.06);
}

.za-kart:hover h3 {
	color: var(--za-vurgu);
}

/* bölüm altındaki ortalı buton */
.za-bolum-buton {
	justify-content: center;
	margin-top: 40px !important;
}

.za-bolum-buton .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 15px 26px;
	border-radius: 3px;
	background: var(--za-vurgu) !important;
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 12px 26px -14px rgba(37, 150, 190, .55);
	transition: background-color .2s ease, transform .2s cubic-bezier(.34, 1.3, .64, 1);
}

.za-bolum-buton .wp-block-button__link::after {
	content: "";
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	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-bolum-buton .wp-block-button__link:hover {
	background: var(--za-vurgu-koyu) !important;
	transform: translateY(-2px);
}

.za-bolum-buton .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

@media (max-width: 1024px) {
	.za-kart-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.za-bolum {
		padding: 58px 20px 62px;
	}
	.za-bolum-basi {
		margin-bottom: 36px;
	}
	.za-kart-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

/* =========================================================
   6) NEDEN BİZ — lacivert, asimetrik bölüm
   Sol tarafta metin, sağ tarafta numaralı avantaj satırları.
   İkon kartı gridi bilinçli olarak kullanılmadı: hizmet bölümü
   zaten öyle, ikisi üst üste gelince sayfa tekrara düşüyor.
   ========================================================= */
.za-neden {
	position: relative;
	overflow: hidden;
	overflow: clip; /* bkz. .za-hero'daki açıklama */
	padding: var(--za-bolum-ust) var(--za-bolum-yan) var(--za-bolum-alt) !important;
	background: var(--za-lacivert-koyu);
	color: #fff;
}

/* Köşede çok soluk bir kırmızı ışık — düz lacivert bloktan kurtarıyor.
   ⚠️ inset:0 — kutu bölümün dışına TAŞMAMALI. Taşan bir mutlak konumlu
   çocuk, overflow:hidden olan bölümü farkında olmadan "kaydırılabilir kap"
   yapıyor; sayfa içinde bir odak/çapa atlaması olduğunda tarayıcı bu kabı
   da kaydırıp içeriği yukarı çekiyor ve altta kocaman boşluk kalıyor.
   Işığın yerini kutuyu büyütmek yerine gradyanın kendi konumu belirliyor. */
.za-neden::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(760px 820px at 88% 4%,
	            rgba(37, 150, 190, .22),
	            rgba(37, 150, 190, 0) 70%);
}

.za-neden-ic {
	position: relative;
	z-index: 1;
	display: grid !important;
	grid-template-columns: 5fr 7fr;
	gap: 72px;
	align-items: start;
}

.za-neden-sol .za-etiket {
	color: rgba(255, 255, 255, .62);
}

.za-neden-sol h2 {
	margin: 12px 0 0 !important;
	font-size: var(--za-fs-h2);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.03em;
	color: #fff;
}

.za-neden-sol p {
	margin: 20px 0 0 !important;
	max-width: 42ch;
	font-size: var(--za-fs-body);
	line-height: 1.75;
	color: rgba(255, 255, 255, .74);
}

/* --- numaralı avantaj satırları --- */
.za-avantajlar {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px;
	background: rgba(255, 255, 255, .09); /* aradaki saç teli çizgiler */
	counter-reset: za-av;
}

.za-avantaj {
	position: relative;
	padding: 26px 26px 28px !important;
	background: var(--za-lacivert-koyu);
	transition: background-color .25s ease;
	counter-increment: za-av;
}

/* Dev, soluk sıra numarası — köşede filigran gibi.
   Numara CSS counter'dan geliyor: blok editöründe kart eklenip
   silinse de 01/02/03 kendiliğinden doğru sırayla devam eder. */
.za-avantaj::before {
	content: counter(za-av, decimal-leading-zero);
	position: absolute;
	top: 14px;
	right: 18px;
	font-size: 46px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
	color: rgba(255, 255, 255, .07);
	transition: color .25s ease;
}

.za-avantaj h3 {
	margin: 0 0 10px !important;
	padding-right: 48px;
	font-size: 18.5px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.3;
	color: #fff;
}

/* başlığın solundaki kısa kırmızı çentik */
.za-avantaj h3::before {
	content: "";
	display: block;
	width: 26px;
	height: 3px;
	margin-bottom: 14px;
	border-radius: 2px;
	background: var(--za-vurgu);
	transition: width .25s cubic-bezier(.34, 1.3, .64, 1);
}

.za-avantaj p {
	margin: 0 !important;
	font-size: var(--za-fs-sm);
	line-height: 1.7;
	color: rgba(255, 255, 255, .66);
}

.za-avantaj:hover {
	background: #0B1E36;
}

.za-avantaj:hover::before {
	color: rgba(37, 150, 190, .3);
}

.za-avantaj:hover h3::before {
	width: 44px;
}

/* --- rakam şeridi (bölümün altında) --- */
.za-rakamlar {
	position: relative;
	z-index: 1;
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	margin-top: 76px !important;
	padding-top: 44px !important;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.za-rakam {
	padding: 0 26px !important;
	border-left: 1px solid rgba(255, 255, 255, .1);
}

.za-rakam:first-child {
	padding-left: 0 !important;
	border-left: 0;
}

.za-rakam p:first-child {
	margin: 0 !important;
	font-size: clamp(38px, 4vw, 56px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.045em;
	color: #fff;
}

/* sayının sonundaki + / 24 gibi ekler kırmızı */
.za-rakam .za-ek {
	color: var(--za-vurgu);
}

.za-rakam p:last-child {
	margin: 12px 0 0 !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	line-height: 1.5;
	color: rgba(255, 255, 255, .58);
}

@media (max-width: 1024px) {
	.za-neden-ic {
		grid-template-columns: 1fr;
		gap: 44px;
	}
	.za-neden-sol p {
		max-width: 62ch;
	}
	.za-rakamlar {
		grid-template-columns: repeat(2, 1fr);
		gap: 36px 0;
	}
	.za-rakam:nth-child(odd) {
		padding-left: 0 !important;
		border-left: 0;
	}
}

@media (max-width: 600px) {
	.za-neden {
		padding: 62px 20px 66px !important;
	}
	.za-avantajlar {
		grid-template-columns: 1fr;
	}
	.za-rakamlar {
		margin-top: 52px !important;
		padding-top: 34px !important;
	}
}

/* =========================================================
   7) CTA BANDI — kırmızı şerit
   ========================================================= */
.za-cta {
	position: relative;
	overflow: hidden;
	overflow: clip; /* bkz. .za-hero'daki açıklama */
	padding: 54px 24px !important;
	background: var(--za-vurgu);
	color: #fff;
}

/* diyagonal çizgi dokusu — düz kırmızı bloğu kırıyor */
.za-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	background-image: repeating-linear-gradient(115deg,
	                  rgba(255, 255, 255, .07) 0 1px,
	                  transparent 1px 13px);
}

.za-cta-ic {
	position: relative;
	z-index: 1;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.za-cta-metin {
	flex: 1 1 380px;
}

.za-cta-metin h2 {
	margin: 0 !important;
	font-size: var(--za-fs-h2-sm);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.03em;
	color: #fff;
}

.za-cta-metin p {
	margin: 12px 0 0 !important;
	font-size: var(--za-fs-body);
	line-height: 1.7;
	color: rgba(255, 255, 255, .88);
}

.za-cta-butonlar {
	flex: 0 0 auto;
	gap: 12px !important;
}

.za-cta-butonlar .wp-block-button__link {
	padding: 16px 28px;
	border-radius: 3px;
	font-size: 15.5px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease,
	            transform .2s cubic-bezier(.34, 1.3, .64, 1);
}

.za-cta-butonlar .wp-block-button:first-child .wp-block-button__link {
	background: #fff !important;
	color: var(--za-lacivert) !important;
	box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .5);
}

.za-cta-butonlar .wp-block-button:first-child .wp-block-button__link:hover {
	transform: translateY(-2px);
	background: #fff !important;
	color: var(--za-vurgu-koyu) !important;
}

.za-cta-butonlar .wp-block-button:last-child .wp-block-button__link {
	background: transparent !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, .55);
}

.za-cta-butonlar .wp-block-button:last-child .wp-block-button__link:hover {
	background: rgba(255, 255, 255, .12) !important;
	border-color: #fff;
	transform: translateY(-2px);
}

@media (max-width: 600px) {
	.za-cta {
		padding: 42px 20px !important;
	}
	.za-cta-ic {
		gap: 26px;
	}
	.za-cta-butonlar {
		width: 100%;
	}
	.za-cta-butonlar .wp-block-button {
		width: 100%;
	}
	.za-cta-butonlar .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* =========================================================
   9) İÇ SAYFA BAŞI  (Ürünlerimiz, Hakkımızda, İletişim ...)
   Ana sayfada hero var; iç sayfalarda onun küçük kardeşi.
   Tek yerde duruyor ki altı sayfa aynı görünsün.
   ========================================================= */
.za-sayfa-bas {
	position: relative;
	padding: 62px var(--za-bolum-yan) 66px !important;
	background: var(--za-lacivert);
	/* clip = kırpar ama kaydırılabilir kap OLUŞTURMAZ (bkz. 4. tuzak) */
	overflow: hidden;
	overflow: clip;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* köşeden gelen hafif kırmızı ışık — düz lacivert blok olmasın */
.za-sayfa-bas::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(720px 420px at 92% 0%,
	            rgba(37, 150, 190, .2),
	            rgba(37, 150, 190, 0) 68%);
}

/* ince nokta ızgarası dokusu */
.za-sayfa-bas::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
	background-size: 26px 26px;
}

.za-sayfa-bas-ic {
	position: relative;
	z-index: 1;
	max-width: 760px;
}

/* sola dayalı kalsın — constrained düzen çocukları ortalıyor */
.za-sayfa-bas-ic > *,
.za-sayfa-bas-ic > .wp-block-group__inner-container > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.za-sayfa-baslik {
	margin: 0 0 16px !important;
	max-width: 24ch !important;
	font-size: clamp(30px, 3.6vw, 46px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.032em;
	color: #fff;
}

.za-sayfa-metin {
	margin: 0 !important;
	max-width: 58ch !important;
	font-size: var(--za-fs-lead);
	line-height: 1.72;
	color: rgba(255, 255, 255, .74);
}

.za-sayfa-bas .za-etiket {
	color: #5CC8E8;
}

/* =========================================================
   9b) "ARADIĞINIZ ÜRÜN LİSTEDE YOK MU?" ŞERİDİ
   2000 ürünün hepsi sitede olmuyor; tedarik talebini
   kaçırmamak için Ürünlerimiz sayfasının altında duruyor.
   ========================================================= */
.za-tedarik {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 34px 36px;
	background: #fff;
	border: 1px solid var(--za-cizgi);
	border-left: 3px solid var(--za-vurgu);
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(13, 35, 64, .04),
	            0 14px 30px -22px rgba(13, 35, 64, .3);
}

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

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

.za-tedarik-alt {
	margin: 0 !important;
	font-size: var(--za-fs-body);
	line-height: 1.68;
	color: var(--za-gri);
}

.za-tedarik-butonlar {
	flex: 0 0 auto;
	gap: 12px !important;
}

.za-tedarik-butonlar .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 24px;
	border-radius: 3px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.005em;
	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-tedarik-butonlar .wp-block-button__link::after {
	content: "";
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	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-tedarik-butonlar .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* açık zeminde hatlı buton — mevcut .za-btn-hat koyu zemin için (beyaz metin) */
.za-btn-hat-koyu .wp-block-button__link {
	background: transparent !important;
	color: var(--za-lacivert) !important;
	border: 1px solid var(--za-cizgi);
}

.za-btn-hat-koyu .wp-block-button__link:hover {
	background: var(--za-zemin) !important;
	border-color: #C2CDDA;
	transform: translateY(-2px);
}

.za-tedarik-butonlar .wp-block-button__link:focus-visible {
	outline: 2px solid var(--za-vurgu);
	outline-offset: 3px;
}

@media (max-width: 900px) {
	.za-tedarik {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
	.za-tedarik-butonlar {
		width: 100%;
	}
}

@media (max-width: 600px) {
	.za-sayfa-bas {
		padding: 44px 20px 48px !important;
	}
	.za-tedarik {
		padding: 26px 22px;
	}
	.za-tedarik-butonlar .wp-block-button {
		width: 100%;
	}
	.za-tedarik-butonlar .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

/* =========================================================================
   HERO SLIDER — dönen arka plan görselleri + slayt metinleri
   Görseller lacivert zeminli üretildi; hero'nun kendi degrade/doku
   katmanları (::before/::after) üstlerinde kalarak dokuyu sürdürüyor.
   ========================================================================= */

.za-hero-fonlar {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* temel.css hero çocuklarını 1180px'e hapsediyor (constrained düzen);
	   fon katmanı marka bandı gibi bu kuraldan muaf — tam genişlik */
	max-width: none;
	margin: 0;
}

.za-hero-fon {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	opacity: 0;
	transition: opacity 900ms ease;
}

.za-hero-fon.etkin { opacity: 1; }

/* Doku katmanları ve içerik görsellerin üstünde kalsın */
.za-hero::before,
.za-hero::after { z-index: 1; }
.za-hero-ic,
.za-hero > .za-hero-bant { position: relative; z-index: 2; }

/* Slayt metinleri: hepsi aynı hücrede üst üste, yumuşak geçiş.
   Izgara sayesinde yükseklik en uzun slayta göre sabit — butonlar zıplamaz. */
.za-hero-slaytlar { display: grid; }

.za-hero-slayt {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 600ms ease, transform 600ms ease;
	pointer-events: none;
}

.za-hero-slayt.etkin {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* h1 dışındaki slayt başlıkları da aynı tipografiyi kullanır */
p.za-hero-baslik { margin: 0; }

/* Noktalar */
.za-hero-noktalar {
	display: flex;
	gap: 9px;
	margin: 22px 0 4px;
}

.za-hero-nokta {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .32);
	cursor: pointer;
	transition: background-color 250ms ease, transform 250ms ease;
}

.za-hero-nokta:hover { background: rgba(255, 255, 255, .6); }

.za-hero-nokta[aria-selected="true"] {
	background: var(--za-turkuaz, #2596be);
	transform: scale(1.15);
}

/* Dar ekranda görselin sağdaki öğesi görünür kalsın; koyu zemin +
   beyaz metin okunurluğu koruyor */
@media (max-width: 760px) {
	.za-hero-fon { object-position: 68% center; opacity: 0; }
	.za-hero-fon.etkin { opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
	.za-hero-fon,
	.za-hero-slayt { transition: none; }
}

/* =========================================================================
   SPLIT BÖLÜM ARKA PLANI — hare çizgileri kaldırıldı.
   Serhat ince kavis çizgilerini ekran çatlağı sanıyordu; yerine köşelerden
   süzülen yumuşak ışık haleleri kondu. Minik artı işaretleri duruyor.
   ========================================================================= */

/* yalnızca kavis çizgileri (.h1-.h3) gizli; minik artılar (.ha1/.ha2) duruyor */
.za-split-hare .h1,
.za-split-hare .h2,
.za-split-hare .h3 { display: none; }

.za-split-hare::before,
.za-split-hare::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

/* Sol üstten turkuaz nefes */
.za-split-hare::before {
	left: -12%;
	top: -18%;
	width: 56%;
	height: 72%;
	background: radial-gradient(closest-side, rgba(37, 150, 190, .09), transparent 72%);
}

/* Sağ alttan lacivert derinlik */
.za-split-hare::after {
	right: -10%;
	bottom: -20%;
	width: 52%;
	height: 70%;
	background: radial-gradient(closest-side, rgba(13, 35, 64, .08), transparent 74%);
}

/* --- 404 sayfası --------------------------------------------------------- */
.za-404 { text-align: center; padding-block: clamp(60px, 12vw, 130px); }
.za-404 h1 { margin: 10px 0 14px; }
.za-404-metin { max-width: 520px; margin: 0 auto 30px; color: var(--za-soluk, #5b6b7c); }
.za-404-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }