/* Çerçeve sayfalarının zemini (Hakkımızda, Asistan — body.hz-cerceve): düz koyu yerine Hizmetler sayfasındaki gibi katmanlı zemin.
   Turkuaz ışık süzmeleri, nokta ızgara, dönüşümlü açık bantlar; hareket yalnız transform/opacity, hareket azaltma tercihinde durur. */
.hz-cerceve main{position:relative;isolation:isolate}
/* sayfa boyunca ışık lekeleri */
.hz-cerceve main::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
	background:radial-gradient(1000px 680px at 88% 2%,rgba(0,214,205,.26),transparent 64%),radial-gradient(760px 560px at 4% 18%,rgba(0,214,205,.15),transparent 70%),
		radial-gradient(900px 640px at 96% 42%,rgba(0,214,205,.14),transparent 70%),radial-gradient(820px 600px at 2% 66%,rgba(0,214,205,.14),transparent 70%),
		radial-gradient(900px 600px at 90% 88%,rgba(0,214,205,.14),transparent 70%)}

/* giriş: nokta ızgara + süzülen ışık */
.hz-cerceve .phd{position:relative;isolation:isolate;overflow:hidden}
.hz-cerceve .phd::before{content:"";position:absolute;inset:-20% -10%;z-index:-1;pointer-events:none;
	background:radial-gradient(42% 48% at 74% 38%,rgba(0,214,205,.30),transparent 70%),radial-gradient(30% 36% at 18% 80%,rgba(0,214,205,.16),transparent 70%);
	animation:cerceve-isik 22s ease-in-out infinite alternate}
.hz-cerceve .phd::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(214,240,238,.14) 1px,transparent 1.3px);background-size:26px 26px;
	-webkit-mask-image:radial-gradient(ellipse 62% 72% at 62% 42%,#000 18%,transparent 76%);mask-image:radial-gradient(ellipse 62% 72% at 62% 42%,#000 18%,transparent 76%)}
@keyframes cerceve-isik{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-5%,4%,0) scale(1.08)}100%{transform:translate3d(4%,-3%,0) scale(1.02)}}

/* dönüşümlü açık bantlar (Hizmetler sayfasındaki --zemin-2) ve bant içinde ışık */
.hz-cerceve .hz-bant{position:relative;isolation:isolate;background:linear-gradient(180deg,#10272A,#0D2123);border-block:1px solid rgba(214,240,238,.08)}
.hz-cerceve .hz-bant::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
	background:radial-gradient(48% 70% at 100% 0%,rgba(0,214,205,.19),transparent 70%),radial-gradient(40% 60% at 0% 100%,rgba(0,214,205,.13),transparent 70%);
	animation:cerceve-nefes 12s ease-in-out infinite alternate}
.hz-cerceve .hz-bant::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(214,240,238,.07) 1px,transparent 1.3px);background-size:24px 24px;
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
@keyframes cerceve-nefes{0%{opacity:.65}100%{opacity:1}}
/* bantlı bölümde üst çizgi bandın kendisinde; içerideki çizgi tekrarlanmaz */
.hz-cerceve .hz-bant .wrap{background:none !important}
.hz-cerceve main>.sec+.sec.hz-bant .wrap>.sec-head,.hz-cerceve main>.hz-bant+.sec .wrap>.sec-head{border-top:0}

/* cam paneller biraz daha aydınlık */
.hz-cerceve :is(.as-ozet,.as-terim,.as-tablo,.org,.thd-s,.ekp-k,.krc){background:linear-gradient(160deg,rgba(0,214,205,.15),rgba(0,214,205,.04) 55%,rgba(9,21,22,.3))}

@media (prefers-reduced-motion:reduce){.hz-cerceve .phd::before,.hz-cerceve .hz-bant::before{animation:none}}
/* bant boşlukları (eski içerikte satır içi padding-top:0 olan bölümler dahil) */
.hz-cerceve .hz-bant{padding-block:clamp(64px,7vw,104px) !important}
.hz-cerceve .hz-bant .wrap{padding-top:0 !important}
.hz-cerceve .hz-bant+.sec .wrap{background:none !important}
/* kapanış bandı: süs katmanları (::before/::after, video) bandın kendisine göre konumlanır — aksi hâlde main'e yayılıp sayfanın üstünü örter ve tıklamayı keser */
.hz-cerceve .band{position:relative;overflow:hidden;isolation:isolate}
/* kapanış bandı içeriği süs katmanının (::after) üstünde kalsın — kendi stili olmayan yeni sayfalarda yazılar soluk görünüyordu */
.hz-cerceve .band>*{position:relative;z-index:2}
/* yatay taşma kesilir ama sayfa kaydırma kabı oluşmaz (hidden yerine clip): yapışkan öğeler (süzgeç, rehber listesi, yan başlıklar) çalışır */
html:has(body.hz-cerceve),body.hz-cerceve{overflow-x:clip;overflow-y:visible}