/* #Fonts (yerel/self-hosted - tma/fonts/)
================================================== */
/* IBM Plex Serif - sitenin genel yazı tipi (bkz. body { font-family }). woff2/unicode-range
ayrımı YOK (kaynak sadece .ttf), tek dosyadan tüm karakterleri (Türkçe dahil) kapsıyor. */
@font-face {font-family:'IBM Plex Serif'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/IBMPlexSerif-Regular.ttf') format('truetype');}
@font-face {font-family:'IBM Plex Serif'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/IBMPlexSerif-Italic.ttf') format('truetype');}
@font-face {font-family:'IBM Plex Serif'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/IBMPlexSerif-Medium.ttf') format('truetype');}
@font-face {font-family:'IBM Plex Serif'; font-style:italic; font-weight:500; font-display:swap; src:url('../fonts/IBMPlexSerif-MediumItalic.ttf') format('truetype');}
@font-face {font-family:'IBM Plex Serif'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/IBMPlexSerif-SemiBold.ttf') format('truetype');}
@font-face {font-family:'IBM Plex Serif'; font-style:italic; font-weight:600; font-display:swap; src:url('../fonts/IBMPlexSerif-SemiBoldItalic.ttf') format('truetype');}
@font-face {font-family:'IBM Plex Serif'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/IBMPlexSerif-Bold.ttf') format('truetype');}
@font-face {font-family:'IBM Plex Serif'; font-style:italic; font-weight:700; font-display:swap; src:url('../fonts/IBMPlexSerif-BoldItalic.ttf') format('truetype');}

/*
@font-face {font-family:'Oswald'; font-style:normal; font-weight:400; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; src:url('../fonts/Oswald-400-latin.woff2') format('woff2');}
@font-face {font-family:'Oswald'; font-style:normal; font-weight:400; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; src:url('../fonts/Oswald-400-latin-ext.woff2') format('woff2');}
@font-face {font-family:'Oswald'; font-style:normal; font-weight:500; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; src:url('../fonts/Oswald-500-latin.woff2') format('woff2');}
@font-face {font-family:'Oswald'; font-style:normal; font-weight:500; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; src:url('../fonts/Oswald-500-latin-ext.woff2') format('woff2');}
@font-face {font-family:'Oswald'; font-style:normal; font-weight:600; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; src:url('../fonts/Oswald-600-latin.woff2') format('woff2');}
@font-face {font-family:'Oswald'; font-style:normal; font-weight:600; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; src:url('../fonts/Oswald-600-latin-ext.woff2') format('woff2');}
@font-face {font-family:'Oswald'; font-style:normal; font-weight:700; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; src:url('../fonts/Oswald-700-latin.woff2') format('woff2');}
@font-face {font-family:'Oswald'; font-style:normal; font-weight:700; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; src:url('../fonts/Oswald-700-latin-ext.woff2') format('woff2');}
*/

/* #Reset & Basics
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, 
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, 
tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;	
	/* font-size:14px; */
}

body {
	margin:0; padding:0;
	font-family: 'IBM Plex Serif', serif;
	font-size: 1rem; /* (tarayıcının varsayılan font-size değeri 16px. Öyleyse 1rem = 16px. Ancak bu değer html içindeki font size ile değiştirilebilir.) */
	font-weight: 400;
	line-height: 1.6;
	background-color: #f5f5f5; /* #f9f9f9; */
	color: #222;
	letter-spacing: normal;
	}

/* Typography
------------------------------------- */
h1, h2, h3, h4, h5, h6 {margin-top: 0;	margin-bottom: 1rem; font-weight: 500; line-height: 1.25; color: inherit; /*font-family: "Oswald", sans-serif;*/}
h1 {font-size: 1.75rem; color: #000;}
h2 {font-size: 1.4rem; color: #111;}
h3 {font-size: 1.15rem; color: #222;}
h4 {font-size: 1rem;}
h5 {font-size: .9rem;}
h6 {font-size: .9rem;}
p {margin-top: 0; margin-bottom: 1rem;}
b, strong {font-weight: 700;}
small, .small  {font-size: 80%;}

@media only screen and (min-width:998px) and (max-width:1239px) {

}
@media only screen and (min-width:600px) and (max-width:997px) {
	h1 {font-size: 1.6rem;}
	h2 {font-size: 1.3rem;}
	h3 {font-size: 1.1rem;}
}
@media only screen and (min-width:0px) and (max-width:599px) {
	h1 {font-size: 1.4rem;}
	h2 {font-size: 1.2rem;}
	h3 {font-size: 1.05rem;}
}

/* List
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ol,ul, dl {margin-top: 0; margin-bottom: 1rem;}
ol ol, ul ul, ol ul, ul ol {margin-bottom: 0;}

/* HR
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {box-sizing: content-box; height: 0;	overflow: visible; margin-top: .5rem; margin-bottom: .5rem; border: 0; border-top: 1px solid #ddd; }
hr.dashed {box-sizing: content-box;	height: 0; overflow: visible; margin-top: 1rem;	margin-bottom: 1rem; border: 0;	border-top: 1px dashed #ccc; }
img {border:none; padding:0; margin:0; display:block;}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {color: #333; text-decoration: none;}
a:hover {text-decoration: none;}

/* placeholder
–––––––––––––––––––––––––––––––––––––––––––––––––– */
::placeholder {
	color: #aaa;
	text-transform: uppercase;
}
  

/* Form
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input, button, select, optgroup, textarea {margin: 0; font-family: inherit;	font-size: inherit;	line-height: inherit; border:1px solid #aaa;}
label {display: block; font-weight:400;}
button {border-radius: 0;}
button, input {overflow: visible;}
button, select {text-transform: none;}
button, html [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none;}
input[type="radio"], input[type="checkbox"] {box-sizing: border-box; padding: 0;}
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {-webkit-appearance: listbox;}
textarea {overflow: auto; resize: vertical;	background-color:#fff;}
fieldset {border: 1px solid #bbb;}
legend {font-weight:500;}
textarea:focus, input:focus{
    outline: none;
}

/*
input:required {background: #eee;}
input:invalid {background: red;}
*/

/* Form (statik formlar)
–––––––––––––––––––––––––––––––––––––––––––––––––– */ 
.formum{margin:0}
.formum .satir { display: flex; flex-direction: column; margin: 0 0 8px 0; width: 100%; }
.formum .satir.form50 { width: 50%; }
.formum .satir-grup { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; }
.formum .satir-grup .satir { flex: 1; min-width: 120px; }
.formum input,.formum button,.formum select,.formum optgroup,.formum textarea{padding:.5rem 1rem;;border:1px solid #ccc;border-radius:5px}
.formum button,.formum .btn{width:auto;align-self:flex-start}
.formum input,.formum select,.formum textarea{color:#000;font-size:.9rem}
.formum input[type="checkbox"]{margin:.2rem .5rem 0 0;width:16px;height:16px}
.formum label{display:block;font-weight:400;font-size:.9rem; color:#888;}
.formum fieldset{border:none;border-top:1px dashed #ccc;margin:20px 0;padding:1rem 0}
.formum legend{font-weight:500;background-color:#000;border:1px dashed #ccc;color:#eee;padding:.5rem 1rem;margin-bottom:.5rem;font-size:1.2rem;border-radius:5px}
.formum a{text-decoration:underline;color:#222}
.formum .formOgeXS{width:70px;padding:.3rem .3rem}
.formum .formOgeS{width:120px}
.formum .formOgeM{width:220px}
.formum .formOgeL{width:340px;max-width:100%}
.formum .formOgeXL{width:80%;max-width:100%}
.formum .checkboxKutu { display: flex; align-items: flex-start; gap: 8px; }
.formum input.checkbox { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; }
.formum span.checkbox-label { font-size: .8rem; color: #222; line-height: 1.2; }
.formum .telAlani { display: flex; gap: 8px; align-items: flex-start; }
.formum .telUlkeKod { width: 180px; flex-shrink: 0; }
.formum .telNumarasi { flex: 1; min-width: 0; }
.formum .captchaAlani { display: flex; align-items: center; gap: 10px; }
.formum .captchaAlani img { height: 32px; width: auto; border-radius: 5px; }


/* Table
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.aTable { width: 100%; margin-bottom: 1rem; background-color: transparent; border-collapse: collapse; }
.aTable thead tr { background: #fff; border:none; border-bottom: 1px solid rgb(0, 0, 0); text-align: left; }
.aTable thead th { padding: .5rem; vertical-align: bottom; font-weight:500; }
.aTable tbody {	border-bottom: 1px solid #000; }
.aTable tbody tr { border-bottom: 1px solid #ddd; text-align: left;}
.aTable tbody td { padding: .5rem; vertical-align: center; }
.table-bordered { border: 1px solid #ddd; }


button .btn, .btn {display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; border:1px solid #fff; padding: .4rem .8rem;
	font-size: 1rem; line-height: 1.5; border-radius: 5px; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	cursor:pointer;	margin: .5rem 0; background-color:#ddd; color:#333;}
	.btn:hover {color: #fff; background-color: #5a6268;	border-color: #545b62; text-decoration: none;}
	.btn:focus, .btn.focus {box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);}
	.btn.disabled, .btn:disabled {color: #fff; background-color: #6c757d; border-color: #6c757d;}
	.btn span{margin-right: 0;}

p.hata {background-color: #eee; color:#dc3545; padding:.5rem; margin:1rem 0; border-radius:5px;}
p.onay {background-color: #eee; color:#198754; padding:.5rem; margin:1rem 0; border-radius:5px;}

p.hata a {color:#88242d; font-weight:500; text-decoration: underline; }
p.onay a {color:#0f4e31; font-weight:500; text-decoration: underline; }


/* GRID */
:root {
	--aralik: 32px; /* yatay aralıklar */
	--aralikTopBottom: 32px; /* dikey aralıklar */
	--container:1240px;
}
.container-full {position:relative;	width:100%; margin:0 auto; padding:0;}
.container-genis {position:relative; width:1440px; max-width:96%; margin:0 auto; padding:0;}
.container {position:relative;	width:var(--container);  max-width:96%; margin:0 auto; padding:0;}
.container-dar {position:relative;	width:800px;  max-width:96%; padding:10px 0; margin:30px auto;}

/*
container kenarı:                    x = 0
.grid (margin-left: -16px):          x = -16   ← .grid'in border-box'ı burada başlıyor (taşma BU)
.col-12-12 (padding-left: 16px):     içerik = -16 + 16 = 0   ← .content burada başlıyor

Yani: .grid -16'ya taşıyor, .col-12-12'nin padding'i içeriği +16 geri itiyor, 
ikisi toplanınca 0 — content tam container kenarında. Margin taşmayı "önlemedi", 
padding'in yarattığı iç-çekilmeyi (indent) tam olarak dengeledi.
*/

.grid {position:relative; padding:0; /* background:#ddd; */
	display: flex; flex-wrap: wrap; align-items: flex-start;
	margin-left: calc(var(--aralik) / -2); margin-right: calc(var(--aralik) / -2);}

.col-1-12, .col-2-12, .col-3-12, .col-4-12, .col-5-12, .col-6-12, .col-7-12, .col-8-12, .col-9-12, .col-10-12, .col-11-12, .col-12-12, .col-1-5, .col-2-5, .col-3-5, .col-4-5 {
	position:relative; flex: 0 0 auto;
	/* 	.grid'in çocuğu olan her .col-X-12, kendi içine aralik/2 (16px) padding alır. Bu iki şeyi sağlar:
		- Yan yana duran sütunlar arasında eşit boşluk (aralık) oluşur.
		- .col-X-12'nin border-box'ı container'dan taşsa bile (görünmez, çünkü arka planı yok), padding'in içindeki 
		gerçek içerik container kenarına tam hizalı kalır. */
	padding-left: calc(var(--aralik) / 2); padding-right: calc(var(--aralik) / 2);}
.col-1-12 {width:8.33%;}
.col-2-12 {width:16.66%;}
.col-3-12 {width:25%;}
.col-4-12 {width:33.33%;}
.col-5-12 {width:41.66%;}
.col-6-12 {width:50%;}
.col-7-12 {width:58.33%;}
.col-8-12 {width:66.66%;}
.col-9-12 {width:75%;}
.col-10-12 {width:83.33%;}
.col-11-12 {width:91.66%;}
.col-12-12 {width:100%;}
/* --- */
.col-1-5 {width:20%;}
.col-2-5 {width:40%;}
.col-3-5 {width:60%;}
.col-4-5 {width:80%;}
/* .col-5-4 -> .col-12-12 */

.content {position:relative; /* background:#fff; */ padding:0;
	/* flex item olarak kullanildiginda (grid/col-X-12'nin dogrudan cocugu), icerige-gore-boyutlanma yerine
	   eskisi gibi tam genislik kaplasin diye. Flex-item olmayan (normal blok) baglamlarda bu iki ozellik
	   hicbir etki yaratmaz, o yuzden her yerde tanimlamak guvenli. */
	flex: 0 0 auto; width:100%;}
	/* .content HER ZAMAN bir .col-X-12'nin (dogrudan) cocugu olarak kullanilir - aralik padding'ini
	   (sol/sag) o col-X-12'den miras alir, .content'in kendisi hicbir zaman .grid'in veya bir kart
	   class'inin (boxUrnK1 vb.) DOGRUDAN cocugu olarak kullanilmaz. Bu sayede burada ayrica bir
	   ".grid > .content" istisna kurali gerekmiyor - bkz. col-X-12 kurallari icin ~253. satir. */

.kenarHizala {
	width: calc(100% - var(--aralik)); margin-left: calc(var(--aralik) / 2); margin-right: calc(var(--aralik) / 2);}

.marginTop {margin-top:var(--aralikTopBottom);}
.marginBottom {margin-bottom:var(--aralikTopBottom);}
.paddingTop {padding-top:var(--aralikTopBottom);}
.paddingBottom {padding-bottom:var(--aralikTopBottom);}

@media only screen and (min-width:998px) and (max-width:1239px) {
	:root {
		--aralik: 24px; /* yatay aralıklar */
		--aralikTopBottom: 24px; /* dikey aralıklar */
	}
	.marginTop {margin-top:var(--aralikTopBottom);}
	.marginBottom {margin-bottom:var(--aralikTopBottom);}
	.paddingTop {padding-top:var(--aralikTopBottom);}
	.paddingBottom {padding-bottom:var(--aralikTopBottom);}
}
@media only screen and (min-width:600px) and (max-width:997px) {
	.container, .container-genis, .container-dar {max-width:92%;}
	.col-1-12 {width:100%;}
	.col-2-12 {width:100%;}
	.col-3-12 {width:100%;}
	.col-4-12 {width:100%;}
	.col-5-12 {width:100%;}
	.col-6-12 {width:100%;}
	.col-7-12 {width:100%;}
	.col-8-12 {width:100%;}
	.col-9-12 {width:100%;}
	.col-10-12 {width:100%;}
	.col-11-12 {width:100%;}
	.col-12-12 {width:100%;}

	.col-1-5 {width:100%;}
	.col-2-5 {width:100%;}
	.col-3-5 {width:100%;}
	.col-4-5 {width:100%;}

	:root {
		--aralik: 24px; /* yatay aralıklar */
		--aralikTopBottom: 24px; /* dikey aralıklar */
	}
	/* .col-12-12{width:100%} yukarida ayni ozelligi (width) ayni specificity ile ama SONRA tanimladigi
	   icin, .kenarHizala'nin kendi width:calc(100% - aralik) kuralini (~296. satir) eziyordu - ayni
	   width kuralini burada tekrar tanimlayip (media query icinde SONRA gelerek) kazanmasini sagliyoruz
	   (bkz. asagidaki 599px blogundaki ayni mantik). */
	.kenarHizala {width: calc(100% - var(--aralik));}
	.marginTop {margin-top:var(--aralikTopBottom);}
	.marginBottom {margin-bottom:var(--aralikTopBottom);}
	.paddingTop {padding-top:var(--aralikTopBottom);}
	.paddingBottom {padding-bottom:var(--aralikTopBottom);}
}

@media (max-width:599px){
	.container, .container-genis, .container-dar {max-width:90%;}
	.col-1-12 {width:100%;}
	.col-2-12 {width:100%;}
	.col-3-12 {width:100%;}
	.col-4-12 {width:100%;}
	.col-5-12 {width:100%;}
	.col-6-12 {width:100%;}
	.col-7-12 {width:100%;}
	.col-8-12 {width:100%;}
	.col-9-12 {width:100%;}
	.col-10-12 {width:100%;}
	.col-11-12 {width:100%;}
	.col-12-12 {width:100%;}
	
	.col-1-5 {width:100%;}
	.col-2-5 {width:100%;}
	.col-3-5 {width:100%;}
	.col-4-5 {width:100%;}

	:root {
		--aralik: 16px; /* yatay aralıklar */
		--aralikTopBottom: 16px; /* dikey aralıklar */
	}
	/* .col-12-12{width:100%} yukarida ayni ozelligi (width) ayni specificity ile ama SONRA tanimladigi
	   icin, .kenarHizala'nin kendi width:calc(100% - aralik) kuralini (~296. satir) eziyordu - kart
	   width:100%'e donuyor ama kendi pozitif margin'i (aralik/2 her yanda) hala uygulaniyor, bu da karti
	   kapsayicidan tam --aralik kadar (16px) tasiriyordu. Ayni width kuralini burada tekrar tanimlayip
	   (media query icinde SONRA gelerek) kazanmasini sagliyoruz. */
	.kenarHizala {width: calc(100% - var(--aralik));}
	.marginTop {margin-top:var(--aralikTopBottom);}
	.marginBottom {margin-bottom:var(--aralikTopBottom);}
	.paddingTop {padding-top:var(--aralikTopBottom);}
	.paddingBottom {padding-bottom:var(--aralikTopBottom);}
}

/* FIX
--------------------------------*/
.clear {clear:both; padding:0 !important; margin:0 !important;}

/* İMG 
--------------------------------*/

.img img {object-fit: contain; max-width:100%;}
img {border:none; padding:0; margin:0; display:block;}
.img-k {position: relative; width: 100%; overflow: hidden; aspect-ratio: 1 / 1;}
.img-k-Yatay {position: relative; width: 100%; overflow: hidden; aspect-ratio: 4 / 3;} /* yatay */
.img-k-Dikey {position: relative; width: 100%; overflow: hidden; aspect-ratio: 3 / 4;} /* dikey */
.img-k img, .img-k-Yatay img, .img-k-Dikey img {width: 100%; height: 100%; object-fit: contain; display: block;}
.img-k a, .img-k-Yatay a, .img-k-Dikey a {display: block; width: 100%; height: 100%;}

/* HEADER1 (site-header)
--------------------------------*/
.site-header {background:#fff; border-bottom:1px solid #eee;}

.site-header__ust {background:#f7f8f9; border-bottom:1px solid #eee; font-size:.85rem;}
.site-header__ust .grid {min-height:40px; align-items:center;}
/* eskiden .grid > .col-6-12 > .site-header__ust-sol/-sag idi - iki sütunluk bu basit bar için
gereksiz bir sarmalayıcıydı, kaldırıldı. width:50%+flex:0 0 auto+padding, .col-6-12'nin
sağladığı genişlik/gutter davranışının BİREBİR aynısı (bkz. col-1-12..col-12-12 kuralları). */
.site-header__ust-sol {display:flex; align-items:center; gap:24px; flex-wrap:wrap; flex:0 0 auto; width:50%; padding-left:calc(var(--aralik) / 2); padding-right:calc(var(--aralik) / 2);}
.site-header__ust-sol a {display:inline-flex; align-items:center; gap:6px; color:#555;}
.site-header__ust-sol a:hover {color:#0d5aa7;}
.site-header__ust-sol i {font-size:.9rem; color:#999;}
/* eposta-alan: {%epo:...%} makrosu JS'in mailto linkine çevirmesinden önce/sonra ikon+metin
hizası bozulmasın diye - hizalama sarmalayıcı span'e taşındı, içindeki a sade inline kalır
(bkz. tma/page-fonks.php -> tmaHeader/tmaFooter, tma/js/custom10.js -> e-posta makrosu). */
.site-header__ust-sol .eposta-alan {display:inline-flex; align-items:center; gap:6px; color:#555;}
.site-header__ust-sol .eposta-alan a {display:inline; color:inherit;}
.site-header__ust-sol .eposta-alan a:hover {color:#0d5aa7;}
.site-header__ust-sag {display:flex; align-items:center; justify-content:flex-end; flex:0 0 auto; width:50%; padding-left:calc(var(--aralik) / 2); padding-right:calc(var(--aralik) / 2);}
.site-header__dil {display:flex; align-items:center; gap:8px;}
.site-header__dil a {display:flex; align-items:center; opacity:.45; transition:opacity .15s ease-in-out;}
.site-header__dil a.aktif, .site-header__dil a:hover {opacity:1;}
.site-header__dil img {width:20px; height:auto; display:block;}

.site-header__ana {padding:16px 0;}
/* Ana bar tam olarak 3 temel öge: logo / menü / arama+sosyal - eski .grid + .col-X-12
sarmalayıcıları (12'lik grid genişlik matematiği bu üçüne hiç gerekmiyordu) kaldırıldı,
.container burada DOĞRUDAN flex+space-between (yalnızca bu bağlamda - .container'ın kendisi
genel/paylaşılan bir sınıf olduğu için global olarak flex yapılmadı). */
.site-header__ana .container {display:flex; align-items:center; justify-content:space-between;}
/* vertical-align:middle - inline-block bir öge (.site-header__logo), .logo'nun (flex olmayan,
normal akışlı) satır kutusunda varsayılan vertical-align:baseline ile font descender payı
kadar (~8px) boşluk bırakır (bkz. .blok-slayt__oge img'deki AYNI klasik CSS tuzağı) - bu da
.logo'nun (flex item) yüksekliğini img'den daha uzun yapıp .site-header__sag ile dikey
ortalamasını kaydırıyordu. middle ile bu boşluk kalkar, .logo img ile birebir aynı yükseklikte
olur. */
.site-header__logo {display:inline-block; vertical-align:middle;}
.site-header__logo img {max-height:64px; width:auto;}

.site-header__nav {display:flex; align-items:center; gap:12px;}
.site-header__nav > ul {display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-bottom:0;}
.site-header__nav li {position:relative;}
.site-header__nav > ul > li > a {display:block; padding:8px 0; /*font-family:"Oswald", sans-serif;*/ font-weight:500; text-transform:uppercase; font-size:1rem; letter-spacing:.02em; color:#222; white-space:nowrap;}
.site-header__nav li a:hover, .site-header__nav li a.aktif, .site-header__nav li.selected>a {color:#0d5aa7;}
.site-header__nav li a.arrow {position:relative;}
.site-header__nav li a.arrow::after {content:''; display:inline-block; width:5px; height:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin-left:6px; vertical-align:2px;}

/* alt menüler (dropdown) */
.site-header__nav ul ul {display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid #eee; box-shadow:0 8px 20px rgba(0,0,0,.1); padding:8px 0; margin-bottom:0; min-width:220px; z-index:30;}
.site-header__nav li:hover > ul, .site-header__nav li.jsAcik > ul {display:block;}
.site-header__nav ul ul li a {padding:8px 18px; text-transform:none; font-weight:400; font-size:.85rem; white-space:nowrap;}
.site-header__nav ul ul ul {top:0; left:100%;}

.site-header__sag {display:flex; align-items:center; gap:18px;}

.site-header__arama {position:relative;}
.site-header__arama-tetik {display:flex; align-items:center; gap:6px; cursor:pointer; background:none; border:none; padding:0; font-size:.85rem; color:#222; font-family:inherit;}
.site-header__arama-tetik i {font-size:1rem;}
.site-header__arama-kutu {display:none; position:absolute; top:100%; right:0; margin-top:12px; background:#fff; border:1px solid #ddd; border-radius:5px; padding:4px; box-shadow:0 4px 14px rgba(0,0,0,.08); z-index:20; gap:6px;}
.site-header__arama-kutu.acik {display:flex;}
.site-header__arama-kutu input {width:220px;}
/* input (miras font-size/line-height) ve button (.btn'den 1rem/1.5) varsayılan yükseklikleri
farklı olduğu için kutu gereğinden yüksek duruyordu - ikisi de sabit, daha kısa bir height'a
çekildi. */
.site-header__arama-kutu input,
.site-header__arama-kutu button {height:32px; line-height:30px; padding:0 .6rem; margin:0; font-size:.85rem;}

.site-header__sosyal {display:flex; align-items:center; gap:14px; padding-left:18px; border-left:1px solid #ddd;}
.site-header__sosyal a {color:#555; font-size:1.05rem;}
.site-header__sosyal a:hover {color:#0d5aa7;}

.site-header__menu-tetik {display:none; align-items:center; justify-content:center; width:38px; height:38px; background:none; border:none; border-radius:5px; font-size:1.2rem; color:#222; cursor:pointer;}
.site-header__nav-kapat {display:none;}
/* #siteNavOrtu (bkz. tma/page-fonks.php), .site-header__ana .container'ın (display:flex,
justify-content:space-between) İÇİNDE .site-header__nav ile .site-header__sag ARASINDA yer
alan bir kardeş eleman - masaüstünde display:none TANIMLI DEĞİLSE (eskiden sadece mobil
@media içindeydi) normal <div> gibi görünür kalıp 4. bir flex öge olarak sayılır, bu da
3 değil 4 öge arasında eşit boşluk dağıtıp nav'ı sola kaydırırdı (bkz. asd1.png'deki hata).
Masaüstünde HER ZAMAN gizli - sadece mobil @media içindeki .acik ile (menü açıkken) görünür. */
.site-header__nav-ortu {display:none;}

@media only screen and (min-width:600px) and (max-width:997px), (max-width:599px) {
	.site-header__ana {padding:8px 0;}
	.site-header__ana .container {flex-wrap:wrap;}
	.site-header__menu-tetik {display:flex;}
	/* #mobilMenuTetik artık nav'ın İÇİNDE DEĞİL (bkz. tma/page-fonks.php -> .site-header__sag) -
	tıklama ID ile #siteNav'a bağlı. Mobilde nav'ın KENDİSİ dropdown DEĞİL, soldan kayan sabit
	(fixed) bir panel - .acik sınıfı eklenince translateX(-100%)'den translateX(0)'a .3s'de
	kayar (bkz. tma/js/custom10.js -> #mobilMenuTetik click, aynı tıklama #siteNavOrtu'yu ve
	body'yi de .acik yapar). #siteNavOrtu (bkz. tma/page-fonks.php, nav'ın hemen dışında)
	panel açıkken sayfanın geri kalanını karartan/tıklanınca kapatan tam ekran katman. */
	.site-header__nav {
		position:fixed; top:0; left:0; width:280px; max-width:82%; height:100%;
		background:#fff;
		transform:translateX(-100%); transition:transform .3s ease;
		z-index:1001; overflow-y:auto; padding:56px 0 24px 0;
	}
	.site-header__nav.acik {transform:translateX(0);}
	.site-header__nav > ul {display:flex; flex-direction:column; align-items:flex-start; gap:0; width:100%;}
	.site-header__nav li {width:100%;}
	.site-header__nav > ul > li > a {padding:12px 20px; border-bottom:1px solid #f0f0f0;}
	.site-header__nav ul ul {display:none; position:static; box-shadow:none; border:none; border-left:2px solid #eee; padding:0 0 0 14px; min-width:0;}
	.site-header__nav li.jsAcik > ul {display:block;}
	.site-header__nav li:hover > ul {display:none;}
	.site-header__nav li.jsAcik:hover > ul {display:block;}
	.site-header__nav-kapat {display:flex; align-items:center; justify-content:center; position:absolute; top:10px; right:10px; width:36px; height:36px; background:none; border:none; font-size:1.1rem; color:#222; cursor:pointer;}
	.site-header__nav-ortu {display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000;}
	.site-header__nav-ortu.acik {display:block;}
	.site-header__sosyal {display:none;}
}
/* Mobil menü panel açıkken sayfanın arkası kaymasın diye - bkz. tma/js/custom10.js ->
siteNavAcJS()/siteNavKapatJS(). Sadece mobilde tetiklenebilir olsa da kural sınırsız
genişlikte tanımlı, zararsız. */
body.menuAcik {overflow:hidden;}
@media (max-width:599px) {
	.site-header__logo img {max-height:52px;}

	.site-header__ust-sol {gap:14px;}
	.site-header__ust-sol span.site-header__ust-metin {display:none;}
}


/* HEADER2 (site-header)
--------------------------------*/

/* HEADER2 classları */
.header2 {background:#fff; border-bottom:1px solid #eee;}

/* ÜST BLOK - grid ile [sol | logo | sağ] - grid-template-columns:1fr auto 1fr, sol/sağ
grupların genişliği FARKLI olsa bile logo'yu satırın GERÇEK ortasına sabitler (flex
space-between'in aksine, iki yanı EŞİT genişlikte olmadıkça yanlış sonuç verirdi). */
.header2__ust {background:#fff; padding:14px 0;}
.header2__ust .container {display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:16px;}

.header2__ust-sol {display:flex; align-items:center; gap:18px; justify-self:start;}

.header2__sosyal {display:flex; align-items:center; gap:14px;}
.header2__sosyal a {color:#555; font-size:1.05rem;}
.header2__sosyal a:hover {color:#0d5aa7;}

.header2__dil {display:flex; align-items:center; gap:8px;}
.header2__dil a {display:flex; align-items:center; opacity:.45; transition:opacity .15s ease-in-out;}
.header2__dil a.aktif, .header2__dil a:hover {opacity:1;}
.header2__dil img {width:20px; height:auto; display:block;}

.header2__logo {justify-self:center;}
.header2__logo-link {display:inline-block; vertical-align:middle;}
.header2__logo-link img {max-height:64px; width:auto;}

.header2__ust-sag {display:flex; align-items:center; gap:18px; justify-self:end;}

.header2__arama {position:relative;}
.header2__arama-tetik {display:flex; align-items:center; gap:6px; cursor:pointer; background:none; border:none; padding:0; font-size:.85rem; color:#222; font-family:inherit;}
.header2__arama-tetik i {font-size:1rem;}
.header2__arama-kutu {display:none; position:absolute; top:100%; right:0; margin-top:12px; background:#fff; border:1px solid #ddd; border-radius:5px; padding:8px; box-shadow:0 4px 14px rgba(0,0,0,.08); z-index:20; gap:6px;}
.header2__arama-kutu.acik {display:flex;}
.header2__arama-kutu input {width:220px;}
/* input (miras font-size/line-height) ve button (.btn'den 1rem/1.5) varsayılan yükseklikleri
farklı olduğu için kutu gereğinden yüksek duruyordu - ikisi de sabit, daha kısa bir height'a
çekildi (bkz. .site-header__arama-kutu - header1'deki AYNI kural). */
.header2__arama-kutu input,
.header2__arama-kutu button {height:32px; line-height:30px; padding:0 .6rem; margin:0; font-size:.85rem;}

.header2__menu-tetik {display:none; align-items:center; justify-content:center; width:38px; height:38px; background:none; border:none; border-radius:5px; font-size:1.2rem; color:#222; cursor:pointer;}

/* ALT BLOK - sadece menü, ortalı */
.header2__alt {border-top:1px solid #f0f0f0;}
.header2__alt .container {display:flex; justify-content:center;}

.header2__nav {display:flex; align-items:center;}
.header2__nav > ul {display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; margin-bottom:0; padding:12px 0;}
.header2__nav li {position:relative;}
.header2__nav > ul > li > a {display:block; padding:8px 0; font-weight:500; text-transform:uppercase; font-size:1rem; letter-spacing:.02em; color:#222; white-space:nowrap;}
.header2__nav li a:hover, .header2__nav li a.aktif, .header2__nav li.selected>a {color:#0d5aa7;}
.header2__nav li a.arrow {position:relative;}
.header2__nav li a.arrow::after {content:''; display:inline-block; width:5px; height:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin-left:6px; vertical-align:2px;}

/* alt menüler (dropdown) */
.header2__nav ul ul {display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid #eee; box-shadow:0 8px 20px rgba(0,0,0,.1); padding:8px 0; margin-bottom:0; min-width:220px; z-index:30;}
.header2__nav li:hover > ul, .header2__nav li.jsAcik > ul {display:block;}
.header2__nav ul ul li a {padding:8px 18px; text-transform:none; font-weight:400; font-size:.85rem; white-space:nowrap;}
.header2__nav ul ul ul {top:0; left:100%;}

@media only screen and (min-width:600px) and (max-width:997px), (max-width:599px) {
	.header2__sosyal {display:none;}
	.header2__menu-tetik {display:flex;}
	/* mobilde arama butonunda sadece ikon kalsın, "ARAMA"/"SEARCH" metni gizlensin -
	metin ayrı bir span'e sarılı olmadığı için (bkz. tma/page-fonks.php) buton font-size:0
	yapılıp ikon kendi sabit font-size:1rem'iyle (aşağıdaki .header2__arama-tetik i kuralı)
	görünür bırakılıyor. */
	.header2__arama-tetik {font-size:0; gap:0;}

	.header2__alt .container {justify-content:flex-start;}
	.header2__nav {width:100%;}
	.header2__nav > ul {display:none; flex-direction:column; align-items:flex-start; gap:0; width:100%; padding:0;}
	.header2__nav.acik > ul {display:flex;}
	.header2__nav li {width:100%;}
	.header2__nav > ul > li > a {padding:10px 0; border-bottom:1px solid #f0f0f0;}
	.header2__nav ul ul {display:none; position:static; box-shadow:none; border:none; border-left:2px solid #eee; padding:0 0 0 14px; min-width:0;}
	.header2__nav li.jsAcik > ul {display:block;}
	.header2__nav li:hover > ul {display:none;}
	.header2__nav li.jsAcik:hover > ul {display:block;}
}
@media (max-width:599px) {
	.header2__logo-link img {max-height:52px;}
}


/* slayt-blok
================================================== */
/* yüklenen görsel, özellikle "Full" görünümde (.container-full), container-full ile birebir
aynı oranda (ör. 1920px) olmayabilir - bu durumda görsel container'dan küçük kalıp soldan
hizalanabilir (img varsayılan olarak inline). text-align:center + inline-block ile görsel
her zaman (küçük de olsa büyük de olsa) yatayda ortalanır, max-width:100% ile de container'dan
taşması engellenir. */
.blok-slayt__oge {position:relative; width:100%; text-align:center;}
/* vertical-align:middle - inline-block img'in varsayılan vertical-align:baseline'ı altında
fontun descender payı kadar (~8px) boşluk bırakır, klasik bir CSS tuzağı. */
.blok-slayt__oge img {display:inline-block; max-width:100%; height:auto; vertical-align:middle;}
/* Görselin üstünde hafif bir karartma katmanı - pointer-events:none ile TIKLAMAYI
ENGELLEMEZ, altındaki görsel/link (bkz. gorselLinkli) tıklamayı normal şekilde alır. */
.blok-slayt__oge::before {content:""; position:absolute; inset:0; background:rgba(0,0,0,.3); pointer-events:none; z-index:2;}

/* slayt-blok-icerik - görselin ÜSTÜNDE (overlay), genişliği --container'ı hiç geçmez,
dikeyde her zaman slayt alanına (.blok-slayt__oge) ortalanır. Yatay konumu (sol kenar/orta/
sağ kenar) ve içindeki metnin hizası --1/--2/--3 varyant sınıflarına göre değişir (aşağıda). */
.slayt-blok-icerik {position:absolute; top:50%; transform:translateY(-50%); z-index:5;
	max-width:var(--container); padding:0 64px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.5);
}
/* Sınıf adı tma/sett.php -> slayt-blok ogeGorunum seçeneklerinin SAYISAL değeriyle birebir
aynı (bkz. tma/page-fonks-syf.php -> blokListele() 'slayt-blok-icerik--'.$gorunumDegeri) - 0
(Görünmesin) için hiç kutu render edilmediğinden burada karşılığı yok.
--1 Solda / --3 Sağda: kutunun kendisi --container alanının sol/sağ kenarına yaslanır
(dikeyde hep ortada) - "calc(50% - var(--container)/2)" .container'ın kendi ortalama
matematiğiyle AYNI (width:var(--container); margin:0 auto), o yüzden hem Standart
(.container) hem Full (.container-full) slaytlarda kutunun kenarı container'ın gerçek
kenarına denk gelir.
--2 Ortada: kutu hem yatay hem dikeyde tam ortada.
NOT: .container'ın GERÇEK genişliği width:var(--container) İLE max-width:96% arasındaki
KÜÇÜK olanıdır (bkz. yukarıdaki .container kuralı) - --container sabit (1240px) olduğu için
"var(--container)/2" tek başına, viewport --container'dan DAR olduğunda (tüm tabletler/
telefonlar) kutuyu ekranın çok dışına itiyordu (mobilde metnin hiç görünmemesi buradan
kaynaklanıyordu). min(var(--container),96vw) ile GERÇEK container genişliği hesaba katılır. */
.slayt-blok-icerik--1 {text-align:left; width:50%; left:calc(50% - min(var(--container), 96vw)/2);}
.slayt-blok-icerik--3 {text-align:right; width:50%; right:calc(50% - min(var(--container), 96vw)/2);}
.slayt-blok-icerik--2 {text-align:center; width:50%; left:50%; transform:translate(-50%, -50%);}
@media (max-width:599px) {
	.slayt-blok-icerik--1, .slayt-blok-icerik--2, .slayt-blok-icerik--3 {width:70%;}
}
.slayt-blok-icerik h2 {color:#fff; margin-bottom:.6rem;}
.slayt-blok-icerik__metin {line-height:1.6;}
.slayt-blok-icerik .btn {display:inline-block; margin-top:.5rem; background-color:transparent; color:#fff; text-shadow:none;}
.slayt-blok-icerik .btn:hover {background-color:#fff; color:#222; border-color:#fff;}

.blok-slayt .swp-nav button.swp-prev, .blok-slayt .swp-nav button.swp-next {position:absolute; top:50%; transform:translateY(-50%); z-index:10; opacity:0;
	width:50px; height:50px; border:none; border-radius:50%; color:#fff; background:rgba(0,0,0,.5); font-size:1.4rem;
	display:flex; align-items:center; justify-content:center; cursor:pointer;
	transition:all .3s ease;
}
.blok-slayt .swp-nav button.swp-prev {left:50px;}
.blok-slayt .swp-nav button.swp-next {right:50px;}
.blok-slayt .swp-nav button.swp-prev:hover, .blok-slayt .swp-nav button.swp-next:hover {background:rgba(0,0,0,.8);}
.blok-slayt:hover .swp-nav button.swp-prev {opacity:.8; left:10px;}
.blok-slayt:hover .swp-nav button.swp-next {opacity:.8; right:10px;}

/* anasayfa-blok
================================================== */
/* Başlık üstte tam genişlik, iki uzun metin (Uzun Metin 1/2) altında yan yana %50/%50 -
mobilde/tablette alt alta (bkz. tma/page-fonks-blk.php -> func_anasayfa_blok()). */
.blok-anasayfa .blok-baslik {text-align:center; font-size:1.75rem; border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:.6rem 0;}
.blok-anasayfa__alt {display:flex; gap:var(--aralik);}
.blok-anasayfa__metin {width:50%;}
@media (min-width:998px) {
	.blok-anasayfa__metin {font-size:1.15rem;}
}
@media only screen and (min-width:600px) and (max-width:997px), (max-width:599px) {
	.blok-anasayfa__alt {flex-direction:column;}
	.blok-anasayfa__metin {width:100%;}
}

/* gorsel-blok
================================================== */
/* Başlık/açıklama HER ZAMAN görselin ALTINDA (dikey kart) - kart (.blok-gorsel) TAM
GENİŞLİK, nokta deseni arka plan (pattern-dot-1.png, background-repeat) o yüzden konteynerin
TAMAMINI kaplar; görsel (img) kendi içinde max-width:300px ile küçük tutulur. İki görünüm bu
300px'lik görsel+metin içeriğinin TAM GENİŞLİK kart içindeki hizasıyla ayrışır (bkz.
--solda/--ortalanmis align-items). */
.blok-gorsel {
	width:100%; display:flex; flex-direction:column; gap:12px;
	padding:16px;
	background-image:url('../img/pattern-dot-1.png'); background-repeat:repeat;
}
.blok-gorsel__gorsel img {width:100%; max-width:300px; aspect-ratio:1/1; object-fit:cover; display:block; border-radius:var(--radius, 5px);}
.blok-gorsel__icerik h3 {margin-bottom:.5rem; font-size: 1rem;}
.blok-gorsel__icerik p {margin-bottom:0;}

.blok-gorsel--solda {align-items:flex-start; text-align:left;}
.blok-gorsel--ortalanmis {align-items:center; text-align:center;}

/* galeri-blok
================================================== */
.blok-galeri__oge img {width:100%; aspect-ratio:1/1; object-fit:cover; display:block;}
.blok-galeri__baslik {margin-top:.5rem; font-size:.9rem; text-align:center;}

/* video/video-youtube: kapak görseli (yoksa tma/img/_vidyukleniyor.png) + ortalanmış oynat
ikonu, tıklayınca Fancybox içinde (data-fancybox grubu - bkz. tma/page-fonks-syf.php ->
blokListele()) video/Youtube oynatılır, galerinin tamamında ileri/geri gezinilebilir. */
.blok-galeri__video-oynat {position:relative; display:block;}
.blok-galeri__oynat-ikon {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
	width:52px; height:52px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff;
	display:flex; align-items:center; justify-content:center; font-size:1.1rem; padding-left:4px;
}

/* Izgara Galeri (görünüm 1) - mevcut .grid/.col-1-5 sistemi (%20 genişlik, tma/css/css10.css
üstteki GRID bölümü) yeniden kullanılıyor, sadece satır aralarına dikey boşluk ekleniyor. */
.blok-galeri--izgara .blok-galeri__oge {margin-bottom:var(--aralikTopBottom);}

/* Kayar Galeri (görünüm 2) - Swiper carousel, nav okları .blok-slayt'ten farklı olarak
(fotoğraf ÜSTÜ değil, sade sayfa üstü olduğu için) hep görünür, beyaz zemin. swpStyleNav()
nav kutusunu .swiper elemanının İÇİNE (child) ekliyor - Swiper'ın kendi çekirdek CSS'i
.swiper'a overflow:hidden verdiği için NEGATİF (dışa taşan) left/right değerleri kesiliyordu
(yarısı görünme sorunu buradan geliyordu) - o yüzden butonlar sınırların İÇİNDE tutuluyor. */
.blok-galeri--kayar {position:relative;}
.blok-galeri--kayar .swp-nav button.swp-prev, .blok-galeri--kayar .swp-nav button.swp-next {
	position:absolute; top:40%; transform:translateY(-50%); z-index:10;
	width:42px; height:42px; border:1px solid #ddd; border-radius:50%; background:#fff; color:#222; font-size:1.1rem;
	display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.blok-galeri--kayar .swp-nav button.swp-prev {left:10px;}
.blok-galeri--kayar .swp-nav button.swp-next {right:10px;}

/* Tekli Kayar Galeri (görünüm 3) - .blok-gorsel'deki (bkz. yukarısı) nokta deseni arka plan
deseniyle AYNI mantık: slayt (.blok-galeri__oge) TAM GENİŞLİK kalır, görsel yükseklik max
450px ile sınırlanıp genişliği KENDİ ORANINA göre otomatik hesaplanır (bu yüzden genel
.blok-galeri__oge img kuralının aspect-ratio:1/1 + object-fit:cover'ı burada geçersiz
kılınıyor - kare kırpma YOK, görsel olduğu gibi sığdırılıyor), ortalanır; kalan sol/sağ
(dar ekranlarda üst/alt da) boşluk pattern-dot.png ile doldurulur. */
.blok-galeri--kayar-tekli .blok-galeri__oge {
	display:flex; flex-direction:column; align-items:center;
	background-image:url('../img/pattern-dot.png'); background-repeat:repeat;
}
.blok-galeri--kayar-tekli .blok-galeri__oge > a {display:block;}
.blok-galeri--kayar-tekli .blok-galeri__oge img {
	width:auto; max-width:100%; height:auto; max-height:450px; aspect-ratio:auto; object-fit:contain;
}

/* referanslar-blok
================================================== */
/* Logolar KIRPILMAZ (object-fit:contain) - galeri-blok'un fotoğraf kartlarının aksine, bir
logonun oranının bozulması/kesilmesi kabul edilemez. Sabit yükseklikli beyaz kart içinde
ortalanır, gri tonlama ile ayrıştırılıp hover'da renkli hale gelir (tipik "güvenilen firmalar"
şeridi deseni). */
.blok-referanslar__oge {display:flex; align-items:center; justify-content:center; height:100px;
	padding:12px; margin-bottom:var(--aralikTopBottom); background:#fff; border-radius:var(--radius, 5px);
}
.blok-referanslar__oge img {max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
	filter:grayscale(100%); opacity:.6; transition:filter .25s ease, opacity .25s ease;
}
.blok-referanslar__oge:hover img {filter:grayscale(0%); opacity:1;}

/* Kayar (görünüm 2) - galeri-blok--kayar ile AYNI nav ok deseni. */
.blok-referanslar--kayar {position:relative;}
.blok-referanslar--kayar .swp-nav button.swp-prev, .blok-referanslar--kayar .swp-nav button.swp-next {
	position:absolute; top:40%; transform:translateY(-50%); z-index:10;
	width:42px; height:42px; border:1px solid #ddd; border-radius:50%; background:#fff; color:#222; font-size:1.1rem;
	display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.blok-referanslar--kayar .swp-nav button.swp-prev {left:10px;}
.blok-referanslar--kayar .swp-nav button.swp-next {right:10px;}
.blok-referanslar--kayar .blok-referanslar__oge {margin-bottom:0;}

/* banner-blok
================================================== */
/* slayt-blok'un aksine görselin üstünde bir metin overlay'i (ogeGorunum varyantı) YOK - başlık
görselin ALTINDA sabit bir şerit olarak gösterilir (bkz. tma/page-fonks-syf.php ->
blokListele() banner-blok, .blok-banner__baslik). */
.blok-banner__oge {position:relative; width:100%; text-align:center;}
.blok-banner__oge img {display:inline-block; width:100%; max-width:100%; height:auto; vertical-align:middle;}
.blok-banner__baslik {position:absolute; left:0; right:0; bottom:0; padding:14px 20px; background:rgba(0,0,0,.5); color:#fff; text-align:center; font-size:1.05rem;}

.blok-banner .swp-nav button.swp-prev, .blok-banner .swp-nav button.swp-next {position:absolute; top:50%; transform:translateY(-50%); z-index:10; opacity:0;
	width:50px; height:50px; border:none; border-radius:50%; color:#fff; background:rgba(0,0,0,.5); font-size:1.4rem;
	display:flex; align-items:center; justify-content:center; cursor:pointer;
	transition:all .3s ease;
}
.blok-banner .swp-nav button.swp-prev {left:50px;}
.blok-banner .swp-nav button.swp-next {right:50px;}
.blok-banner .swp-nav button.swp-prev:hover, .blok-banner .swp-nav button.swp-next:hover {background:rgba(0,0,0,.8);}
.blok-banner:hover .swp-nav button.swp-prev {opacity:.8; left:10px;}
.blok-banner:hover .swp-nav button.swp-next {opacity:.8; right:10px;}

/* proje-blok
================================================== */
/* Başlık ÜSTTE tam genişlik, altında SOLDA %60 "ürün galerisi" (büyük/aktif görsel + altında
thumbnail şeridi) SAĞDA %40 zengin metin açıklaması (bkz. tma/page-fonks-syf.php ->
blokListele() func_proje_blok()). Tek görselde thumbnail şeridi PHP tarafında hiç render
edilmez (bkz. func_proje_blok $gorselSay>1 koşulu). */
.blok-proje__baslik {margin-bottom:1.2rem;}
.blok-proje__alt {display:flex; gap:var(--aralik); align-items:flex-start;}
.blok-proje__galeri {width:60%;}
.blok-proje__aciklama {width:40%;}

.blok-proje__ana {position:relative;}
.blok-proje__ana img {width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border-radius:var(--radius, 5px);}
.blok-proje__ana .swp-nav button.swp-prev, .blok-proje__ana .swp-nav button.swp-next {
	position:absolute; top:50%; transform:translateY(-50%); z-index:10;
	width:42px; height:42px; border:1px solid #ddd; border-radius:50%; background:#fff; color:#222; font-size:1.1rem;
	display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.blok-proje__ana .swp-nav button.swp-prev {left:10px;}
.blok-proje__ana .swp-nav button.swp-next {right:10px;}

/* Thumbnail şeridi - Swiper Thumbs bileşeni aktif olan slide'a otomatik olarak
.swiper-slide-thumb-active sınıfını ekler (bkz. tma/js/custom10.js -> "proje-blok" init). */
.blok-proje__thumb {margin-top:12px;}
.blok-proje__thumb .swiper-slide {cursor:pointer; opacity:.55; transition:opacity .2s ease;}
.blok-proje__thumb .swiper-slide img {width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border-radius:var(--radius, 5px);}
.blok-proje__thumb .swiper-slide-thumb-active {opacity:1;}

@media only screen and (min-width:600px) and (max-width:997px), (max-width:599px) {
	.blok-proje__alt {flex-direction:column;}
	.blok-proje__galeri, .blok-proje__aciklama {width:100%;}
}

/* belge-blok
================================================== */
/* Swiper YOK - satırlar düz bir liste olarak ALT ALTA (bkz. tma/page-fonks-syf.php ->
blokListele() belge-blok): kapak görseli solda, başlık ortada (kalan alanı doldurur),
İndir butonu sağda - her satır .blok-belge__oge. */
.blok-belge__oge {display:flex; align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid #eee;}
.blok-belge__oge:last-child {border-bottom:none;}
.blok-belge__oge img {width:64px; height:64px; object-fit:cover; border-radius:5px; flex-shrink:0;}
.blok-belge__baslik {flex:1; font-weight:500;}
.blok-belge__indir {flex-shrink:0;}

/* tab-blok
================================================== */
/* Başlık<->içerik eşleşmesi INDEX bazlı (bkz. tma/js/custom10.js -> "tab-blok" tıklama
işleyicisi, .index() kullanır) - .aktif sınıfı olan başlık/içerik ÇİFTİ (aynı sıradaki)
gösterilir, diğerleri display:none. */
.blok-tab__baslik-liste {display:flex; flex-wrap:wrap; gap:8px; border-bottom:1px solid #eee; margin-bottom:1.5rem;}
.blok-tab__baslik {padding:.7rem 1.2rem; cursor:pointer; font-weight:500; color:#888; border-bottom:2px solid transparent; margin-bottom:-1px;}
.blok-tab__baslik.aktif {color:#222; border-bottom-color:#222;}
.blok-tab__icerik {display:none;}
.blok-tab__icerik.aktif {display:block;}

/* harita-blok
================================================== */
/* "Google Map"/"Yandex Map" linkleri - görsel üstte, metin altta (bkz. tma/page-fonks-syf.php
-> blokListele() harita-blok). */
.blok-harita__servisler {display:flex; gap:20px; margin-bottom:1rem;}
.blok-harita__servisler a {display:flex; flex-direction:column; align-items:center; gap:.3rem; text-decoration:none; color:inherit;}
.blok-harita__servisler img {width:48px; height:48px;}
.blok-harita__etiket {margin-top:.5rem; font-size:.9rem; text-align:center;}

/* sayfalar-mod-blok / kategoriler-mod-blok / diger-sayfalar-mod-blok (bkz.
tma/page-fonks-syf.php -> blokListele())
================================================== */
/* Izgara görünümü aşağıdaki syfListele() bölümündeki .syf-izgara__oge/.content/
.syf-izgara__gorsel/.syf-izgara__icerik'i AYNEN kullanır - ayrı bir stil YOK. Kayar (carousel)
görünümü ise nav ok stilini .blok-galeri--kayar ile birebir paylaşır (bkz. aşağıdaki
"galeri-blok" bölümü, buradaki .blok-mod--kayar). */
.blok-mod--kayar {position:relative;}
.blok-mod--kayar .swp-nav button.swp-prev, .blok-mod--kayar .swp-nav button.swp-next {
	position:absolute; top:40%; transform:translateY(-50%); z-index:10;
	width:42px; height:42px; border:1px solid #ddd; border-radius:50%; background:#fff; color:#222; font-size:1.1rem;
	display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.blok-mod--kayar .swp-nav button.swp-prev {left:10px;}
.blok-mod--kayar .swp-nav button.swp-next {right:10px;}

/* syfListele() - kategori sayfası alt kategori/sayfa listesi (bkz. tma/page-fonks-syf.php ->
syfListele(), tma/sett.php -> syfGrnm 10/11)
================================================== */
/* Izgara (görünüm 10) - .syf-izgara__oge artık DOĞRUDAN grid sütunu (.grid'in çocuğu, eskiden
bu rolü ayrı bir .col-3-12 class'ı görüyordu - bkz. tma/page-fonks-syf.php -> syfListele()),
yukarıdaki GRID bölümündeki .col-3-12 ile AYNI genişlik/gutter/responsive davranışını kendi
üzerinde taşır. İçindeki .content ise proje genelindeki ".content HER ZAMAN bir .col-X-12'nin
(burada .syf-izgara__oge'nin) DOĞRUDAN çocuğu" kuralına uyan, beyaz kart kutusunun kendisi. */
.syf-izgara__oge {position:relative; flex:0 0 auto; width:25%;
	padding-left:calc(var(--aralik) / 2); padding-right:calc(var(--aralik) / 2);
	margin-bottom:var(--aralikTopBottom);}
.syf-izgara__oge .content {text-align:center; background-color:#fff;}
.syf-izgara__gorsel {display:block; margin-bottom:1rem;}
.syf-izgara__icerik {padding-left:16px; padding-right:16px;}
.syf-izgara__gorsel img {width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border-radius:var(--radius, 5px);}
/* Başlık en fazla 2 satır (taşan kısım "…" ile kesilir) - TÜM kartlarda AYNI yüksekliği
tutması için satır-yüksekliği sabitlenip 2 satırlık yer min-height ile HER ZAMAN ayrılır
(başlık 1 satır bile olsa boşluk kalır) - kartlar grid'de yatayda hizalı kalır. */
.syf-izgara__oge h3 {margin-bottom:.5rem; line-height:1.3; min-height:calc(1.25rem * 1.3 * 3);
	display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.syf-izgara__oge h3 a, .syf-izgara__oge p {color:inherit;}
@media only screen and (min-width:600px) and (max-width:997px) {
.syf-izgara__oge { width:33.33%;}
}
@media (max-width:599px) {
.syf-izgara__oge { width:50%;}
}


/* Liste (görünüm 11) - satır başına TEK öge, tanıtım resmi (yüklüyse) solda, içerik sağda. */
.syf-liste__oge {display:flex; align-items:flex-start; gap:24px; padding:20px 16px; border-bottom:1px solid #eee; background-color:#fff;}
.syf-liste__oge:last-child {border-bottom:none;}
.syf-liste__gorsel {display:block; flex-shrink:0; width:220px;}
.syf-liste__gorsel img {width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border-radius:var(--radius, 5px);}
.syf-liste__icerik {flex:1;}
.syf-liste__icerik h3 {margin-bottom:.5rem;}
.syf-liste__icerik h3 a {color:inherit;}
@media (max-width:599px) {
	.syf-liste__oge {flex-direction:column;}
	.syf-liste__gorsel {width:100%;}
}

/* Arama Sonuçları (google görünümü)
--------------------------------*/
.arama-sonuc__form {margin-bottom:1.5rem;}
/* input/select/button varsayılan olarak farklı font-size/line-height miras aldığı için
(button .btn'den 1rem/1.5, input/select .formum'dan .9rem/miras) yükseklikleri eşit
gelmiyordu - üçü için de sabit height + o height'a göre hesaplanmış line-height (height - 2*1px
border) ile dikey ortalama sağlanıyor, box-sizing zaten global reset ile border-box. */
.arama-sonuc__form input,
.arama-sonuc__form select,
.arama-sonuc__form button {height:44px; line-height:42px; padding:0 1rem; margin:0; font-size:.9rem;}
.arama-sonuc__baslik {font-size:1rem; margin-bottom:1.5rem;}
.arama-sonuc__mesaj {color:#777;}
.arama-sonuc__oge {display:flex; align-items:flex-start; gap:24px; padding:20px 0; border-bottom:1px solid #eee;}
.arama-sonuc__oge:last-child {border-bottom:none;}
.arama-sonuc__gorsel {display:block; flex-shrink:0; width:160px;}
.arama-sonuc__gorsel img {width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border-radius:var(--radius, 5px);}
.arama-sonuc__icerik {flex:1; min-width:0;}
.arama-sonuc__adres {display:block; font-size:.8rem; color:#006621; margin-bottom:2px; word-break:break-all;}
.arama-sonuc__icerik h3 {margin:0 0 .4rem; font-size:1.15rem;}
.arama-sonuc__icerik h3 a {color:#0d5aa7;}
.arama-sonuc__icerik h3 a:hover {text-decoration:underline;}
.arama-sonuc__ozet {margin:0; color:#545454; font-size:.9rem; line-height:1.5;}
@media (max-width:599px) {
	.arama-sonuc__oge {flex-direction:column;}
	.arama-sonuc__gorsel {width:100%;}
}

/* Pager
--------------------------------*/
/* Pager - apanel/icerik.php'nin kendi ul.pager'ıyla AYNI prev/numaralı/next deseni (bkz.
syfListele() sonu), .selected = aktif sayfa, .disabled = uç noktalarda tıklanamaz ok. */
.pager {display:flex; flex-wrap:wrap; justify-content:center; gap:6px; list-style:none; margin:2rem 0 0; padding:0;}
.pager li a, .pager li.disabled {display:flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 6px;
	border:1px solid #eee; border-radius:5px; color:inherit; text-decoration:none; font-size:.9rem;}
.pager li a:hover {border-color:#222;}
.pager li a.selected {background:#222; border-color:#222; color:#fff;}

/* Gezgin (breadcrumb)
--------------------------------*/
.gezgin {margin:1rem 0; font-size:.85rem; color:#777;}
.gezgin a {color:#777;}
.gezgin a:hover {color:#0d5aa7;}
.gezgin .aktif {color:#222;}
.gezgin .ayrac {font-style:normal; margin:0 4px; color:#ccc;}

/* FOOTER1 (site footer)
--------------------------------*/
/* FOOTER1 classları - Footer2 eklendiğinde ondan TAMAMEN BAĞIMSIZ olacak (bkz. HEADER2'nin
.site-header'dan bağımsız olması ile AYNI prensip, tma/page-fonks.php -> tmaFooter()). */
.footer1 {background:#1a1d21; color:#c9ccd1; margin-top:var(--aralikTopBottom);}

.footer1__ust {padding:48px 0;}
.footer1__grid {display:grid; grid-template-columns:repeat(4, 1fr); gap:32px;}

.footer1__sutun {min-width:0;}
.footer1__baslik {color:#fff; font-size:.95rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:1rem;}

.footer1__logo {display:inline-block; vertical-align:middle; margin-bottom:16px;}
.footer1__logo img {max-height:44px; width:auto; filter: brightness(0) invert(1);}

.footer1__iletisim {display:flex; flex-direction:column; gap:10px; font-size:.9rem;}
.footer1__iletisim a, .footer1__iletisim p {display:flex; align-items:flex-start; gap:8px; color:#c9ccd1;}
.footer1__iletisim a:hover {color:#fff;}
.footer1__iletisim i {margin-top:2px; color:#8a8f98;}
/* eposta-alan: bkz. .site-header__ust-sol .eposta-alan açıklaması */
.footer1__iletisim .eposta-alan {display:flex; align-items:flex-start; gap:8px; color:#c9ccd1;}
.footer1__iletisim .eposta-alan a {display:inline; color:inherit;}
.footer1__iletisim .eposta-alan a:hover {color:#fff;}

.footer1__menu {list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.footer1__menu li {position:relative;}
.footer1__menu a {color:#c9ccd1; font-size:.9rem;}
.footer1__menu a:hover {color:#fff;}
/* alt kategorili menü öğeleri (bkz. fonks.php -> menu()/syfKMenu()) footer'da AÇILIR-KAPANIR
DEĞİL, hepsi düz liste halinde görünür - dropdown/arrow davranışı YOK, o yüzden a.arrow'un
ok ikonu burada gösterilmez. */
.footer1__menu ul {list-style:none; margin:8px 0 0; padding:0 0 0 14px; display:flex; flex-direction:column; gap:8px;}

.footer1__sosyal {display:flex; align-items:center; gap:14px;}
.footer1__sosyal a {color:#c9ccd1; font-size:1.1rem;}
.footer1__sosyal a:hover {color:#fff;}

.footer1__alt {border-top:1px solid rgba(255,255,255,.1); padding:18px 0;}
.footer1__alt .container {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem;}
.footer1__alt-sol, .footer1__alt-sag  {display:flex; align-items:center; gap:16px; color:#4a4f57;}
.footer1__alt-sol a, .footer1__alt-sag a {color:#4a4f57;}
.footer1__alt-sol a:hover, .footer1__alt-sag a:hover  {color:#fff;}

@media only screen and (min-width:600px) and (max-width:997px) {
	.footer1__grid {grid-template-columns:repeat(2, 1fr); row-gap:32px;}
}
@media (max-width:599px) {
	.footer1__grid {grid-template-columns:1fr; row-gap:32px;}
	.footer1__alt .container {justify-content:center; text-align:center;}
}

/* FOOTER2 (site footer)
--------------------------------*/
/* FOOTER2 classları - alt bar (copyright/avinga/sitemap) İSTEĞE İSTİNADEN Footer1 ile AYNI
.footer1__alt class'ını paylaşır (bkz. tma/page-fonks.php -> tmaFooter()), üst kısım (logo/
sosyal/iletişim/menü satırları) ise kendi .footer2* class'larını kullanır. */
.footer2 {background:#1a1d21; color:#c9ccd1; margin-top:var(--aralikTopBottom);}

.footer2__ust {padding:48px 0;}
.footer2__ust .container {display:flex; flex-direction:column; align-items:center; gap:28px; text-align:center;}

.footer2__satir {width:100%; display:flex; justify-content:center;}

.footer2__logo {display:inline-block; vertical-align:middle;}
.footer2__logo img {max-height:48px; width:auto; filter: brightness(0) invert(1);}

.footer2__sosyal {display:flex; align-items:center; justify-content:center; gap:16px;}
.footer2__sosyal a {color:#c9ccd1; font-size:1.15rem;}
.footer2__sosyal a:hover {color:#fff;}

.footer2__iletisim {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:24px; font-size:.9rem;}
.footer2__iletisim a, .footer2__iletisim span {display:inline-flex; align-items:center; gap:8px; color:#c9ccd1;}
.footer2__iletisim a:hover {color:#fff;}
.footer2__iletisim i {color:#8a8f98;}
/* eposta-alan: bkz. .site-header__ust-sol .eposta-alan açıklaması */
.footer2__iletisim .eposta-alan a {display:inline; gap:0; color:inherit;}

/* alt menü - SADECE üst seviye li'ler yatay bir satırda; alt kategorili öğelerin ul'si (bkz.
fonks.php -> menu()/syfKMenu()) TAMAMEN gizli, dropdown/arrow davranışı YOK. */
.footer2__menu {list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:28px;}
.footer2__menu li {position:relative;}
.footer2__menu > li > a {color:#c9ccd1; font-size:.9rem; text-transform:uppercase; letter-spacing:.02em;}
.footer2__menu > li > a:hover {color:#fff;}
.footer2__menu ul {display:none;}

/* alt bar - .footer1__alt ile AYNI içerik, sadece düzen farklı: sol/sağ değil, ortalı ve
tek satırda "|" ayraçlı (bkz. tma/page-fonks.php -> tmaFooter()). Kaynak sırası
.footer1__alt .container'dan SONRA geldiği için justify-content burada override eder. */
.footer2__alt .container {justify-content:center;}
.footer2__alt-satir {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; color:#4a4f57;}
.footer2__alt-satir a {color:#4a4f57;}
.footer2__alt-ayrac {color:#4a4f57;}

/* Fancybox - ajax/inline (HTML) içerik popup'ları
================================================== */
/* SADECE data-type="ajax" (KVKK/Çerez/Satış/Üye Sözleşmesi onay linkleri, bkz. tma/page-fonks.php
-> kvkkUrl) icin - fancybox bu tur icerigi ".fancybox-slide--html" sinifiyla isaretliyor, galeri-blok'un
gorsel/video lightbox'lari (".fancybox-slide--image"/"--video") ETKILENMEZ. Vendor'un kendi
".fancybox-content" kurali (jquery.fancybox.min.css) max-width:100% ve width tanimlamiyor
(inline-block ile icerige gore boyutlaniyor) - buradaki İKİ sınıflı secici DAHA YUKSEK
ozgüllükte oldugu icin (kaynak sirasindan BAGIMSIZ olarak - css10.css aslinda fancybox
CSS'inden ONCE yukleniyor, ama ozgülluk kaynak sirasini her zaman yener) override eder. */
.fancybox-slide--html .fancybox-content {
	width:90%;
	max-width:1024px;
}

.pager li.disabled {opacity:.35;}

/* Çerez onay banner'ı (#cookieNotice, bkz. tma/page-fonks.php -> tmaFooter() ve
tma/js/custom10.js -> acceptCookies()) - 3kef2 (tma/css/css69.css) ile AYNI kurallar. */
.cookie-banner { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 800px; background-color: #fff; padding: 20px 32px; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 20; display: none; }
.cookie-content { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.cookie-content p { margin: 0; font-size: 14px; color: #444; line-height: 1.5; }
.cookie-content a { color: #007bff; text-decoration: underline; }
.cookie-btn { background-color: #333; color: #fff; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-weight: bold; white-space: nowrap; transition: background 0.3s; }
.cookie-btn:hover { background-color: #000; }
@media (max-width: 600px) { .cookie-content { flex-direction: column; text-align: center; } }