/* =========================================================================
   UBKS - tasarim sistemi (2. surum, bastan yazildi)

   Renk paleti onceki surumden korundu; tipografi, yerlesim ve bilesenler
   yeniden kuruldu.

   Yapisal kararlar:
   - Global yan menu yok. Kategori sayfalari kendi bolumlerine ait duz
     (ic ice gecmeyen) bir bolum menusu kullanir.
   - Hero gorseli kirpilmaz: dogal oraninda, tam gorunur.
   - Yazi tipleri: Fraunces (baslik) + Manrope (govde ve menu).
   ========================================================================= */

:root {
	/* --- Marka (degismedi) --- */
	--yesil:       #00ae42;
	--yesil-koyu:  #009a3c;
	--yesil-acik:  #e7f7ee;
	--kirmizi:     #c74a36;

	/* --- Kategori renkleri (onceki anasayfa kutularindan) --- */
	--kat-1: #1378c6;
	--kat-2: #9bd75c;
	--kat-3: #f7833f;
	--kat-4: #658ac8;
	--kat-5: #83c340;

	/* --- Notr: yesile hafif kayan gri, secilmis bir notr --- */
	--murekkep:  #242121;
	--metin:     #46504b;
	--soluk:     #79857e;
	--cizgi:     #e2e8e4;
	--cizgi-acik:#eff3f0;
	--zemin:     #f7f9f8;
	--yuzey:     #ffffff;

	/* --- Olcu --- */
	--kap:       1240px;
	--dar:       800px;
	--r:         14px;
	--r-sm:      9px;
	--r-pill:    999px;

	--golge-yu:  0 1px 2px rgba(36, 33, 33, .04), 0 10px 30px -14px rgba(36, 33, 33, .14);
	--golge-hi:  0 2px 6px rgba(36, 33, 33, .06), 0 22px 48px -20px rgba(36, 33, 33, .24);

	--gecis:     220ms cubic-bezier(.4, 0, .2, 1);

	/* Ust serit yuksekligi: tam ekran mobil menu buradan asagi acilir */
	--ust-yuk:   88px;

	--serif: "Fraunces", Georgia, "Times New Roman", serif;
	--sans:  "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
	margin: 0;
	background: var(--yuzey);
	color: var(--metin);
	font-family: var(--sans);
	font-size: 16.5px;
	line-height: 1.68;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--yesil-koyu); text-decoration: none; transition: color var(--gecis); }
a:hover { color: var(--yesil); }
:focus-visible { outline: 2.5px solid var(--yesil); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-optical-sizing: auto;
	color: var(--murekkep);
	font-weight: 600;
	line-height: 1.16;
	margin: 0 0 .5em;
	text-wrap: balance;
	letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 2.9vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.3rem); }
h4 { font-size: 1.02rem; }
p { margin: 0 0 1.15em; }

.kap { width: 100%; max-width: var(--kap); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }
.kap-dar { max-width: var(--dar); }

.goz {
	display: inline-block; font-family: var(--sans);
	font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--yesil-koyu); margin-bottom: 14px;
}

.atla { position: absolute; left: -9999px; background: var(--murekkep); color: #fff; padding: 12px 18px; border-radius: var(--r-sm); }
.atla:focus { left: 16px; top: 16px; z-index: 200; color: #fff; }

/* ============================================================== dugmeler */
.dugme {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 13px 26px; border: 0; border-radius: var(--r-pill);
	font: inherit; font-family: var(--sans); font-size: .95rem; font-weight: 700;
	background: var(--yesil); color: #fff; cursor: pointer; text-align: center;
	transition: background var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.dugme:hover { background: var(--yesil-koyu); color: #fff; transform: translateY(-1px); box-shadow: var(--golge-yu); }
.dugme svg { flex: 0 0 auto; transition: transform var(--gecis); }
.dugme:hover svg { transform: translateX(3px); }

.dugme-cizgi { background: transparent; color: var(--murekkep); box-shadow: inset 0 0 0 1.5px var(--cizgi); }
.dugme-cizgi:hover { background: var(--yesil-acik); color: var(--yesil-koyu); box-shadow: inset 0 0 0 1.5px var(--yesil); }

/* ================================================================== ust */
.ust {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255, 255, 255, .93);
	backdrop-filter: saturate(1.5) blur(12px);
	border-bottom: 1px solid var(--cizgi);
}
/* Yatay tasma guvencesi: ust seritte bir oge buyurse sayfa yana kaymasin */
html, body { overflow-x: clip; }

.ust-ic { display: flex; align-items: center; gap: clamp(10px, 2vw, 28px); min-height: var(--ust-yuk); flex-wrap: nowrap; }
/* Dar ekranda gorunen/gizlenen parcalar (bkz. duyarlilik bolumu) */
.yalniz-mobil { display: none; }
.gezinme-ara { display: none; }
.ust-ic > nav { min-width: 0; }        /* menunun kuculebilmesi icin */
.ust-sag { flex: 0 0 auto; }

/* Logo buyutuldu: onceki surumde 46px idi */
.logo { flex: 0 0 auto; }
.logo img { height: 64px; width: auto; }

.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ------------------------------------------------------------- gezinme */
.gezinme { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.gezinme > li { position: relative; }
.gezinme ul { margin: 0; padding: 0; list-style: none; }

.gezinme > li > a {
	display: flex; align-items: center; gap: 6px;
	padding: 10px 15px; border-radius: var(--r-sm);
	font-family: var(--sans); font-size: .95rem; font-weight: 600;
	color: var(--murekkep); white-space: nowrap;
	transition: background var(--gecis), color var(--gecis);
}
.gezinme > li > a:hover { background: var(--zemin); color: var(--yesil-koyu); }
.gezinme > li[aria-current] > a { color: var(--yesil-koyu); background: var(--yesil-acik); }
.gezinme .ok { transition: transform var(--gecis); }
.gezinme > li:hover .ok { transform: rotate(180deg); }

.gezinme .alt {
	position: absolute; top: calc(100% + 10px); left: 0; min-width: 290px;
	background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r);
	box-shadow: var(--golge-hi); padding: 10px;
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
}
.gezinme > li:hover .alt, .gezinme > li:focus-within .alt { opacity: 1; visibility: visible; transform: none; }
.gezinme .alt a {
	display: block; padding: 10px 13px; border-radius: var(--r-sm);
	font-size: .92rem; font-weight: 500; color: var(--metin); line-height: 1.4;
}
.gezinme .alt a:hover { background: var(--yesil-acik); color: var(--yesil-koyu); }

.menu-dugme {
	display: none; width: 44px; height: 44px; padding: 0; margin-left: 4px;
	border: 1.5px solid var(--cizgi); border-radius: var(--r-sm);
	background: var(--yuzey); cursor: pointer; position: relative;
}
.menu-dugme span { position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; border-radius: 2px; background: var(--murekkep); }
.menu-dugme span::before, .menu-dugme span::after {
	content: ''; position: absolute; left: 0; right: 0; height: 2px;
	border-radius: 2px; background: var(--murekkep); transition: transform var(--gecis);
}
.menu-dugme span::before { top: -6px; }
.menu-dugme span::after  { top: 6px; }
.menu-dugme[aria-expanded="true"] span { background: transparent; }
.menu-dugme[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-dugme[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* ============================================================== kahraman
   Gorsel KIRPILMAZ: dogal oraninda, tam gorunur. Metin gorselin uzerinde,
   solda ve dikeyde ortada durur; gradyan yalnizca sol yariyi koyultur, boylece
   sagdaki baca kesiti kararmaz. Alan onceki surumden bir tik daha yuksek. */
.kahraman { position: relative; background: var(--murekkep); overflow: hidden; }
.kahraman-slayt { position: relative; }
/* Gorsel sarmalayici: on plandaki kesit gorsele gore konumlanir, slayta gore
   degil. Dar ekranda panel gorselin altina inince kesit metne binmez. */
.kahraman-gorsel { position: relative; display: block; line-height: 0; }
/* Arka gorsel yuksekligi belirler; object-fit yok, yani kirpma yok */
.kahraman-arka {
	width: 100%;
	height: clamp(460px, 62vh, 700px);
	object-fit: cover;
	object-position: center bottom;   /* ust taraftaki duz gokyuzu kirpilir */
}

/* On plandaki baca kesiti: seffaf zeminli, saga alta oturur.
   Onceki tasarimda da ayri bir gorseldi (manset.resim). */
.kahraman-on {
	position: absolute; right: 0; bottom: 0; z-index: 1;
	width: min(52%, 720px); height: auto; pointer-events: none;
}

/* Panel tum gorseli kaplar; icerik dikeyde ortalanir. Alt kenardaki ikinci
   gradyan noktalarin ve gorsel bitisinin okunur kalmasi icin. */
.kahraman-panel {
	position: absolute; inset: 0; z-index: 2;
	display: flex; align-items: center;
	padding-bottom: clamp(18px, 3vw, 34px);
	background:
		linear-gradient(180deg, rgba(12, 16, 14, 0) 55%, rgba(12, 16, 14, .55) 100%),
		linear-gradient(100deg, rgba(12, 16, 14, .90) 0%, rgba(12, 16, 14, .70) 34%, rgba(12, 16, 14, .18) 62%, rgba(12, 16, 14, 0) 80%);
}
.kahraman-panel .kap > * { max-width: 34rem; }

.kahraman h1 {
	color: #fff; margin-bottom: .34em;
	font-size: clamp(2.15rem, 4.6vw, 3.45rem); line-height: 1.06;
	letter-spacing: -.015em;
	text-wrap: balance;
	text-shadow: 0 2px 26px rgba(0, 0, 0, .35);
}
.kahraman-alt {
	color: rgba(255, 255, 255, .88);
	font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.55;
	margin-bottom: clamp(22px, 3vw, 34px);
	max-width: 28rem;
}


/* Kahramandaki eylem dugmesi (eski arama kutusunun yeri) */
.kahraman-eylem { margin: 0; }
.dugme-buyuk { padding: 16px 30px; font-size: 1rem; box-shadow: 0 12px 30px rgba(0, 0, 0, .28); }
.dugme-buyuk svg { width: 17px; height: 17px; transition: transform var(--gecis); }
.dugme-buyuk:hover svg, .dugme-buyuk:focus-visible svg { transform: translateX(4px); }

/* Kontrol seridi: metinle ayni sol hizada tek satir - nokta cubuklari,
   "01 / 02" sayaci, onceki/sonraki oklari. */
.kahraman-kontrol {
	position: absolute; z-index: 3; bottom: clamp(18px, 3vw, 28px);
	left: 50%; transform: translateX(-50%);
	width: 100%; max-width: var(--kap);
	padding-inline: clamp(18px, 4vw, 40px);
	display: flex; align-items: center; gap: clamp(14px, 2vw, 22px);
}
.kahraman-noktalar { display: flex; gap: 9px; }
.kahraman-noktalar button {
	width: 26px; height: 4px; padding: 0; border: 0; border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .42); cursor: pointer;
	transition: background var(--gecis), width var(--gecis);
}
.kahraman-noktalar button:hover { background: rgba(255, 255, 255, .7); }
.kahraman-noktalar button[aria-current="true"] { background: var(--yesil); width: 52px; }

/* Sayac: "01 / 02" - noktalarla oklar arasinda, ince ve soluk. */
.kahraman-sayac {
	margin: 0; font-size: .84rem; font-weight: 600; letter-spacing: .08em;
	color: rgba(255, 255, 255, .58); font-variant-numeric: tabular-nums;
}
.kahraman-sayac b { color: #fff; font-weight: 700; }

.kahraman-oklar { display: flex; gap: 8px; margin-left: 4px; }
.kahraman-oklar button {
	width: 42px; height: 42px; display: grid; place-items: center;
	padding: 0; cursor: pointer; color: #fff;
	background: rgba(12, 16, 14, .30);
	border: 1px solid rgba(255, 255, 255, .34); border-radius: 10px;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	transition: background var(--gecis), border-color var(--gecis);
}
.kahraman-oklar button svg { width: 18px; height: 18px; }
.kahraman-oklar button:hover { background: rgba(12, 16, 14, .58); border-color: rgba(255, 255, 255, .7); }
.kahraman-oklar button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Sayfa basligi (ic sayfalar) - gorsel yok, tipografi tasiyor */
/* Sayfa basligi. TEK bicim: her sayfada once kirinti, sonra baslik.
   (Harita sayfalari icin ayri bir "sik" varyant vardi; kirintiyi basliktan
   sonraya aliyordu ve sayfalar arasinda tutarsizlik yaratiyordu. Kaldirildi;
   olculer harita hala ekrana sigacak sekilde secildi.) */
.sayfa-bas { background: var(--zemin); border-bottom: 1px solid var(--cizgi); padding: 22px 0 26px; }
.sayfa-bas h1 { margin: 0; font-size: clamp(1.7rem, 3.2vw, 2.35rem); }

.kirinti { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; font-size: .86rem; }
.kirinti li { display: flex; align-items: center; gap: 8px; color: var(--soluk); }
.kirinti li + li::before { content: '/'; color: var(--cizgi); }
.kirinti a { color: var(--metin); font-weight: 500; }

/* ------------------------------------------------------------- arama */
.arama-kutu { display: flex; gap: 10px; max-width: 30rem; }
.arama-kutu input {
	flex: 1; min-width: 0; padding: 14px 20px;
	font: inherit; font-family: var(--sans); color: var(--murekkep);
	background: #fff; border: 1.5px solid transparent; border-radius: var(--r-pill);
}
.arama-kutu input::placeholder { color: var(--soluk); }
.arama-kutu input:focus { outline: none; border-color: var(--yesil); box-shadow: 0 0 0 4px rgba(0, 174, 66, .25); }
.arama-kutu-acik input { border-color: var(--cizgi); }

/* ============================================================= bolumler */
.bolum { padding: clamp(52px, 8vw, 96px) 0; }
.bolum-zemin { background: var(--zemin); }
.bolum-bas { max-width: 46rem; margin-bottom: clamp(32px, 4vw, 48px); }
.bolum-bas p { color: var(--soluk); font-size: 1.06rem; margin: 0; }

.izgara { display: grid; gap: clamp(16px, 2vw, 24px); }
.izgara-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.izgara-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.izgara-4 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }

/* ---------------------------------------------------- UBKS Nedir bolumu */
.nedir { display: grid; gap: clamp(30px, 5vw, 56px); align-items: center; }
@media (min-width: 940px) { .nedir { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
/* Ekran goruntusu ciplak durmasin: arkasina yumusak renkli bir tabla.
   Tabla sag kolonu bir tasarim ogesi haline getirir, gorseli kirpmaz. */
.nedir .ekran {
	margin: 0; padding: clamp(14px, 1.6vw, 22px);
	border-radius: calc(var(--r) + 10px);
	background:
		radial-gradient(120% 120% at 12% 8%, rgba(0, 174, 66, .17), rgba(0, 174, 66, 0) 58%),
		linear-gradient(150deg, rgba(19, 120, 198, .13), rgba(19, 120, 198, .03) 62%, rgba(0, 0, 0, 0));
}
.nedir .ekran img { border-radius: var(--r); }
.nedir .ekran figcaption { text-align: left; margin-top: 12px; }

.nedir-tanim { font-size: clamp(1.08rem, 1.7vw, 1.25rem); line-height: 1.6; color: var(--metin); }
.nedir-tanim strong { color: var(--murekkep); font-weight: 700; }

.surec { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.surec li {
	display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; align-items: start;
	padding: 20px 22px; background: var(--yuzey);
	border: 1px solid var(--cizgi); border-radius: var(--r);
	transition: border-color var(--gecis), box-shadow var(--gecis);
}
.surec li:hover { border-color: var(--yesil); box-shadow: var(--golge-yu); }
.surec li::before {
	counter-increment: s; content: counter(s, decimal-leading-zero);
	font-family: var(--sans); font-size: .82rem; font-weight: 800; letter-spacing: .04em;
	color: var(--yesil-koyu); background: var(--yesil-acik);
	width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
}
.surec h3 { margin: 0 0 .25em; font-size: 1.08rem; }
.surec p { margin: 0; font-size: .95rem; color: var(--soluk); }

/* Anasayfadaki uc adim seridi (Proje -> Devreye Alma -> Periyodik Kontrol).
   Kutulu kart yerine ust cizgili adim: numara sirayi anlatir, cerceve
   olmadigi icin ustteki "UBKS Nedir" blogunun parcasi gibi durur.
   NOT: .surec li ile ayni ozgullukte oldugu icin ondan SONRA gelmeli. */
.surec-yatay { margin-top: clamp(34px, 4.5vw, 52px); }
.surec-yatay li { align-content: start; }
@media (min-width: 820px) {
	.surec-yatay { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
	.surec-yatay li {
		display: block; padding: 20px 0 0;
		background: none; border: 0; border-top: 2px solid var(--cizgi);
		border-radius: 0;
		transition: border-color var(--gecis);
	}
	.surec-yatay li:hover { box-shadow: none; border-top-color: var(--yesil); }
	.surec-yatay li::before {
		display: block; width: auto; height: auto; margin-bottom: 12px;
		background: none; border-radius: 0; color: var(--yesil);
		font-size: .78rem; text-align: left;
	}
	.surec-yatay h3 { font-size: 1.16rem; margin-bottom: .35em; }
}

/* --------------------------------------------------------- kategori kart */
.kat-kart {
	display: flex; flex-direction: column; gap: 4px;
	padding: 26px 24px 22px; border-radius: var(--r);
	background: var(--yuzey); border: 1px solid var(--cizgi);
	border-top: 4px solid var(--kat);
	transition: transform var(--gecis), box-shadow var(--gecis);
}
.kat-kart:hover { transform: translateY(-3px); box-shadow: var(--golge-hi); }
.kat-kart h3 { margin-bottom: .5em; }
.kat-kart h3 a { color: var(--murekkep); }
.kat-kart:hover h3 a { color: var(--kat); }
.kat-kart ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.kat-kart ul a {
	display: block; padding: 6px 0; font-size: .93rem; color: var(--metin);
	border-bottom: 1px solid transparent;
}
.kat-kart ul a::before { content: '›'; color: var(--kat); font-weight: 800; margin-right: 8px; }
.kat-kart ul a:hover { color: var(--kat); }
.kat-kart .adet { margin-top: 12px; font-size: .82rem; color: var(--soluk); font-weight: 600; }

/* -------------------------------------------------------- firma kartlari */
.firma-kart {
	display: flex; flex-direction: column; gap: 10px; padding: 26px 24px;
	background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r);
	color: var(--metin); transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.firma-kart:hover { transform: translateY(-3px); box-shadow: var(--golge-hi); border-color: var(--yesil); }
.firma-kart .ikon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--yesil-acik); color: var(--yesil-koyu); }
.firma-kart h3 { margin: 0; font-size: 1.06rem; }
.firma-kart:hover h3 { color: var(--yesil-koyu); }
.firma-kart p { margin: 0; font-size: .9rem; color: var(--soluk); }

/* ================================================ kategori sayfa duzeni
   Global site agaci yan menusu KALKTI. Buradaki menu yalnizca bu sayfanin
   kendi bolumlerini gosterir; ic ice gecmez. */
.duzen { display: grid; gap: clamp(28px, 4vw, 52px); align-items: start; padding: clamp(34px, 5vw, 60px) 0 clamp(50px, 7vw, 84px); }
@media (min-width: 960px) { .duzen { grid-template-columns: 260px minmax(0, 1fr); } }
.duzen-tek { display: block; max-width: var(--dar); margin-inline: auto; padding: clamp(34px, 5vw, 60px) 0 clamp(50px, 7vw, 84px); }
/* Harita sayfalari: ust dolgu kisa (harita ekrana sigsin) */
.duzen-harita { padding-top: 18px; }

/* ------------------------------------------------------- bolum menusu
   Sayfanin kendi bolumlerini gosterir; ic ice gecmez. Kart icinde,
   numarali ve okunan bolumu yesil olarak isaretleyen bir icindekiler. */
/* Sayfa bolumleri menusu.
   Onceden kutulu bir kart + "BU SAYFADA" basligi + 01/02 numaralariydi;
   sag taraftaki icerikle yarisiyordu. Simdi yalnizca ince bir dikey ray:
   baslik yok (nav'in aria-label'i o isi goruyor), numara yok, cerceve yok.
   Okunan bolum yesil ray parcasi ve yesil metinle isaretlenir. */
.bolum-menu {
	position: sticky; top: calc(var(--ust-yuk) + 20px);
	border-left: 1px solid var(--cizgi);
}
.bolum-menu ol { list-style: none; margin: 0; padding: 0; display: grid; }
.bolum-menu a {
	display: block; margin-left: -1px;
	padding: 10px 0 10px 16px;
	border-left: 2px solid transparent;
	font-size: .93rem; font-weight: 500; color: var(--soluk); line-height: 1.45;
	transition: color var(--gecis), border-color var(--gecis);
}
.bolum-menu a:hover { color: var(--murekkep); border-left-color: var(--cizgi-koyu, var(--cizgi)); }
.bolum-menu a[aria-current="true"] {
	color: var(--yesil-koyu); font-weight: 700; border-left-color: var(--yesil);
}
/* --------------------------------------------------------------- icerik */
.icerik { min-width: 0; }
.icerik > :first-child { margin-top: 0; }

/* Birlestirilmis bolumler: her eski yaprak sayfa bir bolum */
.icerik-bolum { padding-top: 8px; }
.icerik-bolum + .icerik-bolum { margin-top: clamp(44px, 6vw, 72px); padding-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--cizgi); }
.icerik-bolum > h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: .7em; }

.metin p { max-width: 68ch; }
.metin ul, .metin ol { padding-left: 1.35em; margin: 0 0 1.2em; max-width: 68ch; }
.metin li { margin-bottom: .45em; }
.metin li > ul, .metin li > ol { margin-top: .45em; }
.metin img { border-radius: var(--r-sm); margin: 1.5em 0; }
.metin strong { color: var(--murekkep); font-weight: 700; }
.metin a { text-decoration: underline; text-underline-offset: 2px; }
.metin table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .94rem; }
.metin th, .metin td { padding: 11px 14px; border: 1px solid var(--cizgi); text-align: left; }
.metin th { background: var(--zemin); color: var(--murekkep); font-weight: 700; }
.tasma { overflow-x: auto; }

/* Bos bolum uyarisi */
/* Gecici ornek metin uyarisi: yayina alinmadan once fark edilsin */
.ornek-not {
	display: inline-block; margin: 0 0 16px; padding: 7px 14px;
	background: #fdf6e8; color: #8a5a12; border: 1px solid #e8c882;
	border-radius: var(--r-pill); font-size: .83rem; font-weight: 700;
}

/* Standart listesi tablosu */
.standart { width: 100%; border-collapse: collapse; font-size: .95rem; }
.standart th, .standart td { padding: 12px 16px; border-bottom: 1px solid var(--cizgi); text-align: left; vertical-align: top; }
.standart thead th { background: var(--zemin); color: var(--murekkep); font-family: var(--sans); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.standart tbody th { font-family: var(--sans); font-weight: 700; color: var(--yesil-koyu); white-space: nowrap; }
.standart tbody tr:hover { background: var(--zemin); }

.bos-not { padding: 18px 20px; background: var(--zemin); border-left: 3px solid var(--cizgi); border-radius: var(--r-sm); color: var(--soluk); font-size: .95rem; }

/* ------------------------------------------- UBKS Hakkinda bilesenleri */
/* Rol kartlari (Gaz Dagitim / Imalat / Montaj / Akredite Kontrol) */
.rol-kart { padding: 24px 22px; background: var(--zemin); border: 1px solid var(--cizgi); border-radius: var(--r); }
.rol-kart h3 { margin: 0 0 .4em; font-size: 1.08rem; }
.rol-kart p { margin: 0; font-size: .95rem; color: var(--soluk); }

/* Modul blogu: baslik + ozet + ozellik listesi + ekran goruntusu */
.modul { margin-top: clamp(30px, 4vw, 46px); }
.modul > h3 { font-size: clamp(1.2rem, 1.9vw, 1.4rem); margin-bottom: .3em; }
.modul-ozet { color: var(--soluk); max-width: 68ch; margin-bottom: 1.2em; }

/* Ozellik listesi: etiket + aciklama ciftleri */
.ozellik { margin: 0 0 4px; display: grid; gap: 14px; }
@media (min-width: 700px) { .ozellik { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ozellik dt {
	font-family: var(--sans); font-weight: 700; color: var(--murekkep); font-size: .97rem;
	padding-left: 16px; position: relative;
}
.ozellik dt::before {
	content: ''; position: absolute; left: 0; top: .62em;
	width: 7px; height: 7px; border-radius: 50%; background: var(--yesil);
}
.ozellik dd { margin: 4px 0 0 16px; font-size: .93rem; color: var(--soluk); }
/* Aciklamasi olmayan maddeler yalniz basina kalmasin */
.ozellik dt + dt { margin-top: 0; }
/* Maddeler arasina silik ayirici: her etiket-aciklama cifti nerede bitiyor
   belli olsun. Izgara satirlari esit yukseklikte oldugu icin etiket ve
   aciklamanin cizgileri ayni hizada durur. Son satirda cizgi yok. */
.ozellik > dd { padding-bottom: 14px; border-bottom: 1px solid var(--cizgi); }
@media (min-width: 700px) { .ozellik > dt { padding-bottom: 14px; border-bottom: 1px solid var(--cizgi); } }
.ozellik > :last-child, .ozellik > dt:nth-last-child(2) { padding-bottom: 0; border-bottom: 0; }

/* Kazanimlar */
.kazanim { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 10px; }
@media (min-width: 700px) { .kazanim { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kazanim li {
	display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start;
	padding: 15px 18px; background: var(--yesil-acik); border-radius: var(--r-sm);
	font-weight: 600; color: var(--murekkep); font-size: .96rem;
}
.kazanim li::before {
	content: ''; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
	background: var(--yesil) no-repeat center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
}

/* Ekran goruntusu / sema */
.ekran { margin: clamp(22px, 3vw, 34px) 0 0; }
.ekran img {
	width: 100%; height: auto; border-radius: var(--r);
	border: 1px solid var(--cizgi); background: var(--zemin);
}
.ekran figcaption { margin-top: 10px; font-size: .86rem; color: var(--soluk); }
.ekran-orta { max-width: 460px; }
/* Anasayfadaki urun ekrani: hafif cerceve ve golge ile one cikar */
.ekran-cerceve img { box-shadow: var(--golge-hi); border-color: var(--cizgi); }
.ekran-cerceve figcaption { text-align: right; }
/* Genis semalar kendi kabinda kayar, sayfa yatay kaymaz */
.ekran-genis { overflow-x: auto; }
.ekran-genis img { min-width: 720px; }

/* ------------------------------------- baca turu kesit cizimleri (SVG)
   Kaynakta bu bolumlerin gorseli yok; kesit cizimi malzeme katmanlarini
   anlatiyor. Fotograf degil, oldugu icin her ekranda net kalir. */
.baca-cizim {
	margin: 0 0 clamp(18px, 2.5vw, 26px);
	padding: clamp(14px, 2vw, 20px);
	background: var(--zemin); border: 1px solid var(--cizgi); border-radius: var(--r);
	max-width: 420px;
}
.baca-cizim svg { display: block; width: 100%; height: auto; }
.baca-cizim figcaption { margin-top: 12px; font-size: .88rem; color: var(--soluk); line-height: 1.5; }
.cz { stroke-linejoin: round; }
.cz .c-kabuk   rect   { fill: #dfe4e0; stroke: #b6bfb9; stroke-width: 1.4; }
.cz .c-yalitim rect,
.cz .c-yalitim circle { fill: #fbe9c8; stroke: #e5c88b; stroke-width: 1.2; }
.cz .c-astar   rect,
.cz .c-astar   circle { fill: #cdd5cf; stroke: #a9b3ac; stroke-width: 1.2; }
.cz .c-kil     rect,
.cz .c-kil     circle { fill: #e3a06f; stroke: #c07a48; stroke-width: 1.2; }
.cz .c-celik   rect,
.cz .c-celik   circle { fill: #d6dde3; stroke: #94a3af; stroke-width: 1.4; }
.cz .c-plastik rect,
.cz .c-plastik circle { fill: #cfe3f5; stroke: #7fb0d8; stroke-width: 1.4; }
.cz .c-plastik-esnek rect { fill: none; stroke: #7fb0d8; stroke-width: 1.4; }
.cz .c-plastik-esnek path { stroke: #a8cbe6; stroke-width: 1.1; fill: none; }
.cz .c-bosluk  rect,
.cz .c-bosluk  circle { fill: #fff; stroke: #cfd6d1; stroke-width: 1; }
.cz .c-seam    path,
.cz .c-seam    circle { stroke: #b6bfb9; stroke-width: 1; fill: none; stroke-dasharray: 4 4; }
/* Baca gazi yonu */
.cz .c-ok path { stroke: var(--yesil); stroke-width: 2; fill: none; marker-end: var(--ok-isaret); }
.cz marker path { fill: var(--yesil); }
.baca-cizim .c-etiket {
	font-family: var(--sans); font-size: 11px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; fill: var(--soluk);
}

/* ------------------------------------------------ surec semasi (SVG)
   Draw.io PNG'sinin yerine gecti. Genis ekranda kapsayiciya olceklenir;
   dar ekranda metin okunmaz hale gelmemesi icin kendi icinde kaydirilir. */
.ekran-sema { margin: clamp(22px, 3vw, 34px) 0 0; }
.sema-kaydir { overflow-x: auto; overscroll-behavior-x: contain; }
.sema { display: block; width: 100%; height: auto; min-width: 820px; }
.sema .kulvar text {
	font-family: var(--sans); font-size: 15px; font-weight: 800;
	letter-spacing: .04em;
}
.sema .dugum rect, .sema .dugum path { fill: #fff; stroke-width: 1.6; }
.sema .dugum text {
	font-family: var(--sans); font-size: 16px; font-weight: 600;
	fill: var(--murekkep); text-anchor: middle;
}
.sema .d-imalat  rect { stroke: #7fb4e2; }
.sema .d-montaj  rect { stroke: #7ecb9b; }
.sema .d-kontrol rect { stroke: #9aa8d2; }
.sema .d-karar   path { stroke: #f0a165; }
.sema .d-karar   text { font-size: 14px; }
.sema .d-onay  rect { fill: var(--yesil); stroke: var(--yesil-koyu); }
.sema .d-onay  text { fill: #fff; font-weight: 700; }
.sema .d-iptal rect { fill: var(--kirmizi); stroke: #a83c2b; }
.sema .d-iptal text  { fill: #fff; font-weight: 700; letter-spacing: .04em; }
.sema .etiket text {
	font-family: var(--sans); font-size: 11px; font-weight: 800;
	letter-spacing: .08em; fill: #6f7b75;
	paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round;
}
.ekran-sema figcaption { text-align: left; }

/* --------------------------------------------------------- baglanti liste */
.bag-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.bag-liste > li > a {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
	padding: 15px 19px; background: var(--yuzey);
	border: 1px solid var(--cizgi); border-radius: var(--r-sm);
	color: var(--murekkep); font-weight: 600;
	transition: border-color var(--gecis), background var(--gecis), transform var(--gecis);
}
.bag-liste > li > a:hover { border-color: var(--yesil); background: var(--yesil-acik); color: var(--yesil-koyu); transform: translateX(3px); }
.bag-liste ul { list-style: none; padding: 8px 0 0 20px; margin: 0; display: grid; gap: 6px; }
.bag-liste ul a { color: var(--metin); font-size: .93rem; font-weight: 500; }
.bag-liste .tarih { margin-left: auto; color: var(--soluk); font-size: .84rem; font-weight: 500; }

/* ---------------------------------------------------------------- ekler */
.ekler { margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--cizgi); }
.ekler h2 { font-size: 1.15rem; margin-bottom: 14px; }
.ekler ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ekler a {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
	padding: 13px 17px; background: var(--zemin);
	border: 1px solid var(--cizgi); border-radius: var(--r-sm);
	color: var(--murekkep); font-weight: 600;
	transition: border-color var(--gecis), background var(--gecis);
}
.ekler a:hover { border-color: var(--yesil); background: var(--yesil-acik); color: var(--yesil-koyu); }
.ek-bilgi { margin-left: auto; color: var(--soluk); font-size: .83rem; font-weight: 500; white-space: nowrap; }

/* =============================================================== harita */
.harita-sarmal { background: var(--zemin); border: 1px solid var(--cizgi); border-radius: var(--r); padding: clamp(16px, 2.5vw, 26px); }
.harita-sarmal > p { color: var(--soluk); font-size: .95rem; margin: 0 0 14px; }
/* "Haritadan bir il secin" ipucu: secim satirindan alinip harita kutusunun
   basina tasindi; harita ile birlikte gorunuyor. */
.harita-ipucu { text-align: center; color: var(--soluk); font-size: .95rem; margin: 0 0 12px; }
/* Harita acilista ekrana TAM sigmali: yuksekligi viewport'a gore sinirli,
   SVG kendi oraninda icine yerlesir (kirpilmaz, kaydirma gerekmez). */
#map {
	position: relative;
	width: 100%; margin-inline: auto;
	aspect-ratio: 1050 / 620;
	min-height: 240px;
	/* 334px = ust serit (89) + sayfa basligi (132) + duzen dolgusu (18)
	   + sarmal dolgusu (2x26) + ipucu satiri (34) + pay. Olculdu: 900px
	   kaydirmadan siger. Baslik alani degisirse bu deger de degismeli. */
	max-height: calc(100vh - 334px);
	max-height: calc(100dvh - 334px);
}
#map svg { width: 100%; height: 100%; }
/* Il adi balonu (tarayicinin gecikmeli <title> ipucu yerine) */
.il-balon {
	position: absolute; z-index: 2; transform: translate(-50%, -150%);
	padding: 4px 11px; border-radius: var(--r-pill);
	background: var(--murekkep); color: #fff;
	font-family: var(--sans); font-size: .8rem; font-weight: 600;
	white-space: nowrap; pointer-events: none;
}
#map path { cursor: pointer; transition: fill 130ms linear; }
/* Odak halkasi yalnizca klavyede: fareyle tiklayinca ilin cevresinde
   kutu gorunmesin. */
#map path:focus { outline: none; }
#map path:focus-visible { outline: 2px solid var(--yesil); }

.firma-detay:empty { display: none; }
.firma-detay {
	margin-top: 24px; padding: clamp(22px, 3vw, 30px); position: relative;
	background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); box-shadow: var(--golge-hi);
}
.firma-detay .kapat {
	position: absolute; top: 15px; right: 15px; width: 36px; height: 36px;
	display: grid; place-items: center; border: 0; border-radius: 50%;
	background: var(--zemin); color: var(--murekkep); font-size: 21px; line-height: 1; cursor: pointer;
	transition: background var(--gecis), color var(--gecis);
}
.firma-detay .kapat:hover { background: var(--kirmizi); color: #fff; }
.firma-detay .baslik { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; padding-right: 50px; }
.firma-detay .baslik h3 { margin: 0; font-size: 1.2rem; }
.firma-detay .adet {
	padding: 4px 13px; border-radius: var(--r-pill); background: var(--yesil-acik); color: var(--yesil-koyu);
	font-family: var(--sans); font-size: .8rem; font-weight: 700; white-space: nowrap;
}
.firma-liste { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); max-height: 440px; overflow-y: auto; }
.firma { background: var(--zemin); border: 1px solid var(--cizgi); border-radius: var(--r-sm); padding: 17px; }
.firma dl { margin: 0; }
.firma dt { font-size: .71rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--soluk); }
.firma dd { margin: 0 0 9px; font-size: .93rem; color: var(--murekkep); }
.firma-bos, .firma-hata { text-align: center; color: var(--soluk); padding: 28px 0; margin: 0; }
.firma-hata { color: var(--kirmizi); }

.firma-secim { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 26px; }
.firma-secim label { color: var(--soluk); font-size: .93rem; font-weight: 600; }
.firma-secim select {
	flex: 0 1 320px; min-width: 0; padding: 13px 44px 13px 18px;
	font: inherit; font-family: var(--sans); font-size: .95rem; color: var(--murekkep);
	background: var(--yuzey) no-repeat right 16px center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2379857e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	border: 1.5px solid var(--cizgi); border-radius: var(--r-pill);
	appearance: none; -webkit-appearance: none; cursor: pointer;
	transition: border-color var(--gecis), box-shadow var(--gecis);
}
.firma-secim select:hover { border-color: var(--yesil); }
.firma-secim select:focus { outline: none; border-color: var(--yesil); box-shadow: 0 0 0 4px rgba(0, 174, 66, .2); }

/* ====================================================== kipli pencere
   Anasayfada il tiklaninca firma listesi burada acilir. Govde kaydirilir,
   kapatma dugmesi (getirilen HTML'in icinde) kutuya gore sabit kalir. */
.pencere { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: clamp(12px, 3vw, 34px); }
.pencere-perde { position: absolute; inset: 0; background: rgba(16, 20, 18, .58); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pencere-kutu {
	position: relative; z-index: 1;
	width: min(780px, 100%); max-height: min(84vh, 820px);
	display: flex; overflow: hidden;
	background: var(--yuzey); border-radius: calc(var(--r) + 4px);
	box-shadow: 0 30px 80px -22px rgba(0, 0, 0, .55);
	animation: pencere-gir 200ms cubic-bezier(.2, .8, .2, 1);
}
@keyframes pencere-gir { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.pencere-govde { flex: 1 1 auto; min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
/* Panel gorunumu iptal: cerceve/golge artik pencerenin kendisinde */
.pencere .firma-detay { position: static; margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.pencere .firma-detay:empty { display: block; }
.pencere .firma-liste { max-height: none; overflow: visible; }
/* Baslik kaydirmayla kaybolmasin */
.pencere .firma-detay .baslik {
	position: sticky; top: 0; z-index: 2; margin: 0;
	padding: 20px 68px 16px clamp(22px, 3vw, 30px);
	background: var(--yuzey); border-bottom: 1px solid var(--cizgi);
}
.pencere .firma-liste, .pencere .firma-bos, .pencere .firma-hata { padding: clamp(20px, 3vw, 28px); }
/* Kapatma dugmesi kutuya gore sabit (govde kayarken yerinde kalir) */
.pencere .kapat { position: absolute; top: 16px; right: 18px; z-index: 3; }
body.pencere-acik { overflow: hidden; }

/* ---------------------------------------------- arama penceresi */
.pencere-ara { align-items: start; padding-top: clamp(60px, 12vh, 130px); }
.pencere-kutu-ara { width: min(640px, 100%); flex-direction: column; max-height: min(76vh, 640px); }
.ara-bas {
	position: relative; display: flex; align-items: center; gap: 12px;
	padding: 16px 60px 16px clamp(18px, 3vw, 24px);
	border-bottom: 1px solid var(--cizgi);
}
.ara-buyutec { flex: 0 0 auto; color: var(--soluk); }
.ara-bas input {
	flex: 1 1 auto; min-width: 0; padding: 6px 0;
	font: inherit; font-family: var(--sans); font-size: 1.05rem; color: var(--murekkep);
	background: none; border: 0;
}
.ara-bas input:focus { outline: none; }
.ara-bas input::placeholder { color: var(--soluk); }
.ara-bas .kapat {
	position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
	width: 34px; height: 34px; display: grid; place-items: center;
	padding: 0; border: 0; border-radius: 50%;
	background: var(--zemin); color: var(--murekkep); font-size: 20px; line-height: 1; cursor: pointer;
	transition: background var(--gecis), color var(--gecis);
}
.ara-bas .kapat:hover { background: var(--kirmizi); color: #fff; }
.ara-sonuc { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px; }
.ara-bos { margin: 0; padding: 22px 14px; color: var(--soluk); font-size: .93rem; text-align: center; }
.ara-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ara-liste a {
	display: grid; gap: 3px; padding: 11px 14px; border-radius: var(--r-sm);
	color: var(--murekkep); transition: background var(--gecis);
}
.ara-liste a:hover, .ara-liste a:focus-visible { background: var(--yesil-acik); }
.ara-liste .ad { font-weight: 700; font-size: .98rem; }
.ara-liste .ozet { color: var(--soluk); font-size: .86rem; line-height: 1.45; }
.ara-tumu { margin: 6px 0 0; padding: 12px 14px; border-top: 1px solid var(--cizgi-acik); }
.ara-tumu a { font-family: var(--sans); font-size: .89rem; font-weight: 700; color: var(--yesil-koyu); }

/* ============================================ hizli baglantilar seridi
   Footerdan buraya (anasayfa, haritanin alti) tasindi. Logolarin besi saf
   beyaz oldugu icin acik zeminde koyu plakaya oturur. */
.hizli-serit { margin-top: clamp(22px, 3vw, 34px); }
/* Alti baglanti genis ekranda TEK sirada; daralinca 3 ve 2 kolona duser.
   Kart dikey: ikon ustte, ad altta - 170px'lik kolonda yan yana sigmiyor. */
.hizli-serit ul {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 560px)  { .hizli-serit ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hizli-serit ul { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.hizli-serit a {
	position: relative; height: 100%;
	display: flex; flex-direction: column; align-items: center; gap: 11px;
	padding: 18px 12px 16px; background: var(--yuzey);
	border: 1px solid var(--cizgi); border-radius: var(--r);
	color: var(--murekkep); font-size: .88rem; font-weight: 600;
	text-align: center; line-height: 1.3;
	transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
.hizli-serit a:hover { border-color: var(--yesil); box-shadow: var(--golge-yu); transform: translateY(-2px); }
.hizli-serit .ad { display: block; }
.hizli-serit .dis-ok { position: absolute; top: 9px; right: 9px; margin: 0; }
.hizli-serit .logo-kutu { width: 46px; height: 46px; border-radius: 12px; }
.hizli-serit .logo-kutu img { width: 28px; height: 28px; }
/* Logolarin besi beyaz cizim: acik zeminde kayboluyorlar, bu yuzden
   kutu gerekiyor. Siyah kutu sert duruyordu; marka yesili kullaniliyor. */
.hizli-serit .logo-koyu { background: var(--yesil); }
.hizli-serit .logo-acik { background: #fff; box-shadow: inset 0 0 0 1px var(--cizgi); }
.hizli-serit a:hover .logo-koyu { background: var(--yesil-koyu); }

/* ============================================================== iletisim */
/* Iki sutun (solda e-posta/telefon, sagda adres/web) ve altlarinda tam
   genislikte portal karti. Once sagda "Bize Yazın" formu vardi; form
   kaldirildi (istendi), statik sitede gonderim ucu da yoktu. */
.iletisim-izgara { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) { .iletisim-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.iletisim-izgara > .portal-kart { grid-column: 1 / -1; }

.bilgi-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.bilgi-liste li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start; }
.bilgi-liste .ikon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--yesil-acik); color: var(--yesil-koyu); }
.bilgi-liste dt { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); }
.bilgi-liste dd { margin: 2px 0 0; color: var(--murekkep); font-weight: 600; }
.bilgi-liste .yok { color: var(--soluk); font-weight: 500; font-style: italic; }

/* Tam genislige yayildigi icin genis ekranda metin solda, dugme sagda. */
.portal-kart {
	display: grid; gap: 12px; padding: clamp(24px, 3.5vw, 34px);
	background: var(--murekkep); color: rgba(255, 255, 255, .78); border-radius: var(--r);
}
.portal-kart h3 { color: #fff; margin: 0 0 6px; }
.portal-kart p { margin: 0; font-size: .95rem; max-width: 56ch; }
.portal-kart .dugme { justify-self: start; }
@media (min-width: 760px) {
	.portal-kart { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 3vw, 40px); }
	.portal-kart .dugme { justify-self: end; }
}

/* =============================================================== arama */
.sonuc-bilgi { color: var(--soluk); margin-bottom: 20px; }
.sonuc-bilgi strong { color: var(--murekkep); }

/* ================================================================== alt */
.alt { background: var(--murekkep); color: rgba(255, 255, 255, .68); padding: clamp(44px, 6vw, 68px) 0 0; }

/* Hizli baglantilar: onceden acik zeminli seritte 6 buyuk kart halindeydi.
   Cogu dis referans baglantisi oldugu icin o yeri hak etmiyordu ve acik
   seritle koyu footer arasindaki gecis surekli sorun cikariyordu; artik
   footer izgarasinin bir kolonu. */
.alt-hizli { gap: 4px; }
.alt-hizli a { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
/* Logo kutusu. Logolarin besi saf beyaz cizim oldugu icin koyu zemin,
   renkli olan (Su Bilgi) acik zemin ister; uretici olcup secer. */
.logo-kutu {
	flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
	border-radius: 8px; overflow: hidden;
	transition: background var(--gecis), box-shadow var(--gecis);
}
.logo-kutu img { width: 26px; height: 26px; object-fit: contain; }
/* Beyaz cizimli logolar: koyu/renkli zemin */
.logo-koyu { background: rgba(255, 255, 255, .12); }
.alt-hizli a:hover .logo-koyu { background: var(--yesil); }
/* Renkli veya koyu logolar: beyaz plaka */
.logo-acik { background: #fff; }
.alt-hizli a:hover .logo-acik { box-shadow: 0 0 0 2px var(--yesil); }

/* Dis baglanti isareti */
.dis-ok { width: 13px; height: 13px; flex: 0 0 auto; opacity: .45; margin-left: 2px; }
.alt a:hover > .dis-ok { opacity: 1; }
.alt-izgara {
	/* auto-fit ile 5. kolon (Uyelik) tek basina alt satira dusuyordu;
	   masaustunde sabit izgara: logo + 4 esit kolon. */
	display: grid; gap: 34px 28px; grid-template-columns: 1fr;
	padding-top: 0;
	padding-bottom: 44px;
}
.alt h4 { color: #fff; font-family: var(--sans); font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 16px; }
.alt ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.alt a { color: rgba(255, 255, 255, .68); font-size: .93rem; }
.alt a:hover { color: #fff; }
/* Logo koyu metinli; #242121 zeminde kayboluyordu. Beyaz plaka uzerinde. */
.alt-logo a { display: inline-block; background: #fff; padding: 12px 16px; border-radius: var(--r-sm); margin-bottom: 18px; }
.alt-logo img { height: 46px; width: auto; }
/* Hizli baglantilar kolonu kalktigi icin artik logo + 3 kolon */
@media (min-width: 620px)  { .alt-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .alt-izgara { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } }
/* Logo kolonu genis ekranda ilk hucre, dar ekranda tum satiri alir */
@media (min-width: 620px) and (max-width: 999px) { .alt-logo { grid-column: 1 / -1; } }
.alt-logo p { font-size: .93rem; margin: 0; max-width: 26rem; }

/* Alt bolum kolonlari <details open> olarak gelir: masaustunde normal kolon
   gibi durur (ok gizli, tiklamayla kapanmaz), telefonda ubks.js "open"i
   kaldirir ve kolonlar akordeona doner - footer dort satira iner. */
.alt-kol > summary { list-style: none; }
.alt-kol > summary::-webkit-details-marker { display: none; }
.alt-kol > summary::marker { content: ''; }
.alt-kol > summary h4 { display: inline; }
.alt-ok { display: none; }
@media (min-width: 621px) {
	.alt-kol > summary { pointer-events: none; }   /* masaustunde kapanmasin */
}
.alt-telif {
	border-top: 1px solid rgba(255, 255, 255, .12); padding: 18px 0;
	display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
	font-size: .86rem; color: rgba(255, 255, 255, .5);
}
.alt-orta { margin-right: auto; }
.alt-marka { display: inline-grid; place-items: center; padding: 7px; background: rgba(255, 255, 255, .08); border-radius: var(--r-sm); transition: background var(--gecis); }
.alt-marka:hover { background: rgba(255, 255, 255, .16); }
.alt-marka img { width: 34px; height: auto; }

.yukari {
	position: fixed; right: 22px; bottom: 22px; z-index: 90;
	width: 48px; height: 48px; display: grid; place-items: center;
	background: var(--yesil); color: #fff; border: 0; border-radius: 50%;
	box-shadow: var(--golge-hi); cursor: pointer;
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
}
.yukari.gorunur { opacity: 1; visibility: visible; transform: none; }

/* ============================================================ duyarlilik */
@media (max-width: 1120px) { .gezinme > li > a { padding: 10px 11px; font-size: .91rem; } }

@media (max-width: 1080px) {
	.menu-dugme { display: block; }
	.logo img { height: 52px; }

	/* Mobil menu: ust seridin altindan asagi TAM EKRAN acilir. Ust serit
	   ustte kalir (z-index daha yuksek), boylece hamburger X'e donusup
	   kapatma dugmesi olarak kullanilabilir. En ustte arama alani var. */
	.ust { z-index: 300; }
	.gezinme {
		/* NOT: .ust'un backdrop-filter'i onu sabit konumlu cocuklar icin
		   kapsayan blok yapiyor; bu yuzden "inset: 0" viewport'a degil
		   ust seride gore cozuluyordu. Yukseklik acikca veriliyor. */
		display: none; position: fixed; z-index: 200;
		top: 100%; left: 0; right: 0;
		height: calc(100vh - var(--ust-yuk));
		height: calc(100dvh - var(--ust-yuk));
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--yuzey); border-top: 1px solid var(--cizgi);
		box-shadow: none; padding: 18px clamp(18px, 4vw, 40px) 40px;
		overflow-y: auto; overscroll-behavior: contain;
	}
	.gezinme.acik { display: flex; }
	.gezinme > li { border-bottom: 1px solid var(--cizgi-acik); }
	.gezinme > li:last-child { border-bottom: 0; }
	.gezinme > li > a { padding: 15px 2px; font-size: 1.06rem; font-weight: 700; }
	.gezinme > li[aria-current="page"] > a { color: var(--yesil-koyu); }
	.gezinme .ok { display: none; }
	.gezinme .alt {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; border-left: 2px solid var(--cizgi-acik);
		border-radius: 0; margin: 0 0 12px 4px; padding: 0 0 0 12px; min-width: 0;
	}
	.gezinme .alt a { padding: 9px 2px; font-size: .97rem; color: var(--soluk); }
	.gezinme .alt a:hover { color: var(--murekkep); background: none; }

	/* Menu icindeki arama alani */
	.gezinme-ara { display: block; border-bottom: 0 !important; margin-bottom: 14px; }
	.gezinme-ara form { display: flex; gap: 9px; }
	.gezinme-ara input {
		flex: 1; min-width: 0; padding: 13px 18px;
		font: inherit; font-family: var(--sans); color: var(--murekkep);
		background: var(--zemin); border: 1.5px solid var(--cizgi); border-radius: var(--r-pill);
	}
	.gezinme-ara input::placeholder { color: var(--soluk); }
	.gezinme-ara input:focus {
		outline: none; background: var(--yuzey);
		border-color: var(--yesil); box-shadow: 0 0 0 4px rgba(0, 174, 66, .2);
	}
	.gezinme-ara button {
		flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center;
		padding: 0; border: 0; border-radius: 50%;
		background: var(--yesil); color: #fff; cursor: pointer;
	}
	/* Menu acikken arkadaki sayfa kaymasin. DIKKAT: body'ye overflow:hidden
	   vermek .ust'un position:sticky'sini bozuyor - body kaydirma kabina
	   donusunce serit kendi statik konumuna, yani sayfanin en ustune gidiyor.
	   .gezinme de .ust'un backdrop-filter'i yuzunden ona gore konumlandigindan
	   menuyle birlikte ekranin disinda kaliyordu (sayfanin ortasinda veya
	   altinda menu acmak islemiyordu). Cozum: menu acikken serit fixed. */
	body.menu-acik { overflow: hidden; }
	body.menu-acik .ust { position: fixed; top: 0; left: 0; right: 0; }
	/* Fixed olunca serit akistan cikiyor; sayfa 75px yukari kaymasin. */
	body.menu-acik { padding-top: var(--ust-yuk); }
	/* Dar ekran: dikey ray yerine yatay kaydirilabilir sekme seridi */
	.bolum-menu {
		position: static; margin-bottom: 22px;
		border-left: 0; border-bottom: 1px solid var(--cizgi);
		overflow-x: auto; -webkit-overflow-scrolling: touch;
	}
	.bolum-menu ol { grid-auto-flow: column; grid-auto-columns: max-content; }
	.bolum-menu a {
		margin: 0 0 -1px; padding: 10px 16px;
		border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap;
	}
	/* Ilk sekme sayfa metniyle ayni sol hizada baslasin */
	.bolum-menu li:first-child a { padding-left: 0; }
	/* Sag kenarda soluma: seridin kaydirilabilir oldugunu belli eder */
	.bolum-menu {
		-webkit-mask-image: linear-gradient(90deg, #000 84%, rgba(0, 0, 0, .15));
		mask-image: linear-gradient(90deg, #000 84%, rgba(0, 0, 0, .15));
	}
	.bolum-menu a[aria-current="true"] { border-bottom-color: var(--yesil); }
	/* Dar ekranda metin GORSELIN UZERINDE kalir. Onceki surumde panel
	   position:static ile gorselin altina iniyordu; kahraman "fotograf +
	   altinda ayri bir siyah kutu" gibi ikiye boluniyor, gorselin sol yarisi
	   da bos gokyuzu olarak kaliyordu. Simdi: gorsel yukselir, metin alta
	   hizalanir, karartma soldan degil ASAGIDAN gelir (tum genislik okunur),
	   on plandaki baca kesiti metnin ustune - gokyuzune - tasinir. */
	.kahraman-arka { height: clamp(500px, 74vh, 640px); }
	.kahraman-panel {
		align-items: flex-end;
		padding-bottom: clamp(76px, 13vw, 104px);
		background: linear-gradient(180deg,
			rgba(12, 16, 14, .34)  0%,
			rgba(12, 16, 14, .20) 32%,
			rgba(12, 16, 14, .80) 68%,
			rgba(12, 16, 14, .94) 100%);
	}
	.kahraman-panel .kap > *, .kahraman-alt { max-width: none; }
	/* Kesit kuculur ve yukari alinir: alttaki metin alanina binmez. */
	.kahraman-on { width: min(64%, 430px); bottom: 33%; }
	.kahraman-kontrol { bottom: clamp(18px, 4vw, 26px); }
}

/* Ust serit dar ekranda tasiyordu (375px'de 461px genislik gerekiyordu, yani
   menu dugmesi ekranin disinda kaliyordu). Cozum: "Ara" dugmesi seritten
   menu paneline tasindi, "Üye Girişi" kisaldi, logo bir tik kucultuldu. */
@media (max-width: 620px) {
	.hidden-mobil { display: none; }
	.yalniz-mobil { display: inline; }
	.ust-ara { display: none; }
	.gezinme-ara { display: block; }
	.gezinme-ara a { color: var(--yesil-koyu); font-weight: 700; }

	:root { --ust-yuk: 74px; }
	.ust-ic { gap: 10px; }
	.logo img { height: 46px; }
	.dugme { padding: 11px 17px; font-size: .92rem; }

	/* Telefonda gorsel hem kesiti hem de altindaki metni tasimali; fazla
	   uzamamasi icin ust sinir dusuruldu. */
	.kahraman-arka { height: clamp(470px, 70vh, 560px); }
	.kahraman h1 { font-size: clamp(1.85rem, 7.6vw, 2.3rem); }
	.kahraman-alt { font-size: 1rem; }
	.kahraman-on { width: min(72%, 300px); bottom: 36%; }

	/* Harita telefonda kucuk kaliyor (oran 1050/620) */
	#map { min-height: 0; }

	/* ---- Alt bolum telefonda akordeon ----
	   Dort kolon acikken footer ekranlar boyu uzuyordu. Simdi her kolon
	   dokunulabilir tek satir; ok isareti acilma yonunu gosterir. */
	.alt { padding-top: 30px; }
	.alt-izgara { gap: 0; padding-bottom: 18px; }
	.alt-logo { padding-bottom: 20px; }
	.alt-logo a { margin-bottom: 14px; padding: 10px 14px; }
	.alt-logo img { height: 40px; }
	.alt-logo p { font-size: .89rem; }
	.alt-telif { padding: 16px 0 22px; }
	.alt-kol { border-top: 1px solid rgba(255, 255, 255, .12); }
	.alt-kol > summary {
		display: flex; align-items: center; justify-content: space-between;
		gap: 12px; padding: 15px 2px; cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.alt-kol > summary h4 { margin: 0; }
	.alt-kol > ul { padding: 0 2px 18px; }
	.alt-kol > ul li { line-height: 1.35; }
	.alt-ok {
		display: block; flex: 0 0 auto; width: 17px; height: 17px;
		color: rgba(255, 255, 255, .5); transition: transform var(--gecis);
	}
	.alt-kol[open] > summary .alt-ok { transform: rotate(180deg); }
	.alt-telif { flex-direction: column; align-items: flex-start; gap: 10px; }
	.alt-orta { margin-right: 0; }

}

@media (max-width: 380px) {
	.logo img { height: 40px; }
	.dugme { padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	html { scroll-behavior: auto; }
}

@media print {
	.ust, .alt, .bolum-menu, .yukari, .kahraman-kontrol { display: none !important; }
	body { color: #000; font-size: 11pt; }
	.icerik-bolum + .icerik-bolum { page-break-before: always; }
}

/* ========================================== planli bakim duyurusu */
.bakim-kutu {
	width: min(520px, 100%); display: grid;
	grid-template-columns: 1fr;
	padding: clamp(24px, 5vw, 38px); overflow: visible;
	border-top: 4px solid var(--yesil);
}
.bakim-icerik { min-width: 0; }
.bakim-etiket {
	margin: 0 40px 22px; color: var(--yesil);
	font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800;
	letter-spacing: normal; text-align: center; text-transform: none;
}
.bakim-icerik > p:last-of-type {
	margin: 0; color: var(--soluk); font-size: .96rem; line-height: 1.75;
}
.bakim-tamam {
	display: flex; width: max-content;
	margin: 24px auto 0; border: 0; cursor: pointer;
}
.bakim-kapat {
	position: absolute; top: 14px; right: 16px;
	width: 36px; height: 36px; display: grid; place-items: center;
	padding: 0; border: 0; border-radius: 50%;
	background: var(--zemin); color: var(--murekkep);
	font-size: 23px; line-height: 1; cursor: pointer;
	transition: background var(--gecis), color var(--gecis);
}
.bakim-kapat:hover { background: var(--kirmizi); color: #fff; }