/* #Fonts (yerel/self-hosted - tma/fonts/)
================================================== */
@font-face {font-family:'Jost'; 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/Jost-400-latin.woff2') format('woff2');}
@font-face {font-family:'Jost'; 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/Jost-400-latin-ext.woff2') format('woff2');}
@font-face {font-family:'Jost'; 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/Jost-500-latin.woff2') format('woff2');}
@font-face {font-family:'Jost'; 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/Jost-500-latin-ext.woff2') format('woff2');}
@font-face {font-family:'Jost'; 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/Jost-600-latin.woff2') format('woff2');}
@font-face {font-family:'Jost'; 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/Jost-600-latin-ext.woff2') format('woff2');}
@font-face {font-family:'Jost'; 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/Jost-700-latin.woff2') format('woff2');}
@font-face {font-family:'Jost'; 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/Jost-700-latin-ext.woff2') format('woff2');}


@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: 'Jost', 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 mobilde 1 sütuna DEĞİL 2 sütuna (%50) düşer - sütunlu galeriler
	(blok-galeri__oge/blok-referanslar__oge, bkz. tma/page-fonks-blk.php) .col-1-5'i
	KULLANDIĞI için bu tek satır her ikisini de kapsar. col-2-5/3-5/4-5 (galerilerde
	kullanılmıyor) DEĞİŞMEDİ. */
	.col-1-5 {width:50%;}
	.col-2-5 {width:100%;}
	.col-3-5 {width:100%;}
	.col-4-5 {width:100%;}

	/* galeri görsel başlığı (bkz. yukarısı .blok-galeri__baslik, .9rem taban) - mobilde
	.col-1-5 iki sütuna düştüğü için (bkz. yukarısı) daha da küçültüldü. */
	.blok-galeri__baslik {font-size:.8rem;}

	: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:#dcb039;}
.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:#dcb039;}
.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:8px 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:#dcb039;}
.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:#dcb039;}

.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:320px; max-width:90%; 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:68px;}

	.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:#dcb039;}

.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:68px; 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;}
.header2__nav-kapat {display:none;}
/* #siteNavOrtu2 (bkz. tma/page-fonks.php) - masaüstünde HER ZAMAN gizli, .site-header__nav-ortu
ile AYNI mantık (bkz. yukarısı) - sadece mobil @media içindeki .acik ile (menü açıkken) görünür. */
.header2__nav-ortu {display:none;}

/* 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; font-family:"Oswald", sans-serif; 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:#dcb039;}
.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;}
	/* #mobilMenuTetik2 tıklaması artık basit bir ul göster/gizle DEĞİL, header1 -> #siteNav
	ile AYNI davranış: .header2__nav'ın KENDİSİ soldan kayan sabit (fixed) bir panele dönüşür
	(bkz. tma/js/custom10.js -> #mobilMenuTetik2 click, aynı tıklama #siteNavOrtu2'yu ve
	body'yi de .acik yapar). #siteNavOrtu2 (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. */
	.header2__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;
	}
	.header2__nav.acik {transform:translateX(0);}
	.header2__nav > ul {display:flex; flex-direction:column; align-items:flex-start; gap:0; width:100%; padding:0;}
	.header2__nav li {width:100%;}
	.header2__nav > ul > li > a {padding:12px 20px; 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;}
	.header2__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;}
	.header2__nav-ortu {display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000;}
	.header2__nav-ortu.acik {display:block;}
}
@media (max-width:599px) {
	.header2__logo-link img {max-height:52px;}
}


/* HEADER3 (site-header)
--------------------------------*/

/* HEADER3 classları - header1/header2'den TAMAMEN BAĞIMSIZ. ÜST BLOK: logo solda,
sağda arama + dil dropdown + sosyal + telefon (flex, space-between). ALT BLOK: solda
menü, sağda CTA butonu (flex, space-between). */
/* Arkaplan görseli .header3'ün KENDİSİNDE (tek katman, ÜST + ALT bloğun ortak arkası) -
.header3__ust/.header3__alt'ın kendi background'u YOK ki görsel ikisinin de arkasından
kesintisiz görünsün. */
.header3 {background:#fff; border-bottom:1px solid #eee;}

.header3__ust {padding:14px 0;}
.header3__ust .container {display:flex; align-items:center; justify-content:space-between; gap:16px;}

.header3__logo-link {display:inline-block; vertical-align:middle; position:relative; z-index:5; margin-bottom:-72px;}
.header3__logo-link img {max-height:120px; width:auto;}

.header3__ust-sag {display:flex; align-items:center; gap:32px;}
/* öge arası gri dikey çizgiler - sabit yükseklikte ::before (border-left DEĞİL), çünkü
her öge (arama butonu/dil dropdown/sosyal ikonlar/telefon) farklı satır yüksekliğine sahip -
::before'un kendi height:28px'i tüm çizgileri EŞİT boyda gösterir. left:-16px, gap:32px'in
tam ortasına denk gelir (mobildeki gap:18px için aşağıda left:-9px'e ayrı bir kural var).
İlk öge hariç TÜM sonraki ögelere uygulanır (:first-child hariç sonraki kardeşler) - hangi
ögelerin (sosyal/telefon) DOM'da opsiyonel olarak render edildiğine bakılmaksızın çalışır. */
.header3__ust-sag > * {position:relative;}
.header3__ust-sag > * + *::before {content:''; position:absolute; top:50%; left:-16px; transform:translateY(-50%); width:1px; height:28px; background:#ddd;}

/* .header3__ust-sag'ın DÖRT doğrudan çocuğu (arama/dil/sosyal/tel) FARKLI font-size/
font-weight'e sahip olduğundan (1.05rem ikon, .9rem dil metni, telefonun miras alınan gövde
font-size'ı + kalın ağırlığı) organik içerik yüksekliklerine bırakılırsa align-items:center
onları satır olarak ortalasa bile piksel bazında hizasız görünürler - hepsine SABİT aynı
height:20px + kendi display:flex;align-items:center'ı verilerek içerikleri (ikon/metin) bu
tek ortak kutu içinde birebir aynı dikey merkeze oturtulur. */
.header3__arama {position:relative; display:flex; align-items:center; height:20px;}
.header3__arama-tetik {display:flex; align-items:center; justify-content:center; cursor:pointer; background:none; border:none; padding:0; font-size:1.05rem; color:#222;}
.header3__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;}
.header3__arama-kutu.acik {display:flex;}
.header3__arama-kutu input {width:220px;}
.header3__arama-kutu input,
.header3__arama-kutu button {height:32px; line-height:30px; padding:0 .6rem; margin:0; font-size:.85rem;}

/* dil dropdown - flag ikonu değil, sade kod metni + açılır liste (bkz. #dilTetik3 JS) */
.header3__dil {position:relative; display:flex; align-items:center; height:20px;}
.header3__dil-tetik {display:flex; align-items:center; gap:6px; background:none; border:none; padding:0; font-size:.9rem; color:#222; text-transform:uppercase; cursor:pointer; font-family:inherit;}
.header3__dil-tetik i {font-size:1.5rem;}
.header3__dil-liste {display:none; position:absolute; top:100%; right:0; margin-top:12px; background:#fff; border:1px solid #ddd; border-radius:5px; padding:6px 0; min-width:80px; box-shadow:0 4px 14px rgba(0,0,0,.08); z-index:20;}
.header3__dil-liste.acik {display:block;}
.header3__dil-liste a {display:block; padding:6px 14px; font-size:.85rem; text-transform:uppercase; color:#444;}
.header3__dil-liste a.aktif, .header3__dil-liste a:hover {color:#dcb039; background:#f7f7f7;}

.header3__sosyal {display:flex; align-items:center; gap:14px; height:20px;}
.header3__sosyal a {color:#555; font-size:1.05rem;}
.header3__sosyal a:hover {color:#dcb039;}

.header3__tel {display:flex; align-items:center; gap:8px; color:#222; font-weight:600; white-space:nowrap; height:20px;}
.header3__tel i {font-size:1.1rem; color:#dcb039;}

.header3__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;}
.header3__nav-kapat {display:none;}
/* #siteNavOrtu3 (bkz. tma/page-fonks.php) - masaüstünde HER ZAMAN gizli, .site-header__nav-ortu
ile AYNI mantık (bkz. yukarısı) - sadece mobil @media içindeki .acik ile (menü açıkken) görünür. */
.header3__nav-ortu {display:none;}

/* ALT BLOK - solda menü, sağda CTA butonu */
.header3__alt {background:rgba(255,255,255,.5); border-top:1px solid #f0f0f0;}
.header3__alt .container {display:flex; align-items:center; justify-content:space-between; gap:20px;}

.header3__nav {display:flex; align-items:center; padding-left:160px;}
.header3__nav > ul {display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-bottom:0; padding:12px 0;}
.header3__nav li {position:relative;}
.header3__nav > ul > li > a {display:flex; align-items:center; padding:8px 0; font-weight:500; font-family:"Oswald", sans-serif; text-transform:uppercase; font-size:.95rem; letter-spacing:0; color:#222; white-space:nowrap;}
.header3__nav li a:hover, .header3__nav li a.aktif, .header3__nav li.selected>a {color:#dcb039;}
.header3__nav li a.arrow {position:relative;}
.header3__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) */
.header3__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;}
.header3__nav li:hover > ul, .header3__nav li.jsAcik > ul {display:block;}
.header3__nav ul ul li a {padding:8px 18px; text-transform:none; font-weight:400; font-size:.85rem; white-space:nowrap;}
.header3__nav ul ul ul {top:0; left:100%;}

.header3__cta {display:inline-flex; align-items:center; gap:8px; background:#dcb039; color:#fff; font-weight:600; text-transform:uppercase; font-size:.85rem; letter-spacing:.02em; padding:12px 22px; border-radius:4px; white-space:nowrap; transition:background .15s ease-in-out;}
.header3__cta:hover {background:#010150; color:#fff;}
.header3__cta i {font-size:.85rem;}

@media only screen and (min-width:600px) and (max-width:997px), (max-width:599px) {
	.header3__logo-link {margin-bottom:-48px;}
	.header3__logo-link img {max-height:90px;}
	.header3__sosyal {display:none;}
	.header3__tel span {display:none;}
	/* menu-tetik, CTA ile AYNI görünüm (bg/yükseklik) - order:2 ile CTA'nın (varsayılan
	order:0) SAĞINA, .header3__alt .container'ın en sonuna taşınır - markup sırası
	(menu-tetik HTML'de CTA'dan önce) değişmeden, sadece görsel sıralama. */
	.header3__menu-tetik {display:flex; width:34px; height:34px; font-size:1.2rem;
		background:#00125e; color:#fff; border-radius:4px; order:2; box-sizing:border-box;
	}
	/* CTA küçült - height:34px (menu-tetik ile AYNI). margin-left:auto ile CTA (ve order:2
	sayesinde ondan sonra gelen menu-tetik) birlikte SAĞA yaslanır - .header3__alt .container'ın
	justify-content:space-between'i artık devreye girmez (solda boşalan yeri bu auto margin
	dolduruyor). */
	.header3__cta {height:34px; margin:5px 0 5px auto; padding:0 14px; font-size:.7rem; box-sizing:border-box;}

	/* menu-tetik solda, CTA sağda - nav position:fixed olduğu için (aşağısı) normal akıştan
	çıkar, bu iki öge arasında boşluk bırakır. */
	.header3__alt .container {justify-content:space-between;}
	/* #mobilMenuTetik3 tıklaması header1/header2 ile AYNI davranış: .header3__nav'ın KENDİSİ
	soldan kayan sabit (fixed) bir panele dönüşür (bkz. tma/js/custom10.js -> #mobilMenuTetik3
	click, aynı tıklama #siteNavOrtu3'ü ve body'yi de .acik yapar). */
	.header3__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;
	}
	.header3__nav.acik {transform:translateX(0);}
	.header3__nav > ul {display:flex; flex-direction:column; align-items:flex-start; gap:0; width:100%; padding:0;}
	.header3__nav li {width:100%;}
	.header3__nav > ul > li > a {padding:12px 20px; border-bottom:1px solid #f0f0f0;}
	.header3__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;}
	.header3__nav li.jsAcik > ul {display:block;}
	.header3__nav li:hover > ul {display:none;}
	.header3__nav li.jsAcik:hover > ul {display:block;}
	.header3__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;}
	.header3__nav-ortu {display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000;}
	.header3__nav-ortu.acik {display:block;}
}
@media (max-width:599px) {
	.header3__ust-sag {gap:18px;}
	.header3__ust-sag > * + *::before {left:-9px;}
}


/* metin-blok
================================================== */
/* WYSIWYG (TinyMCE) içeriğinde yazar eski sitelerden/Word'den tablo yapıştırmış olabilir
(bkz. aydinlareski göçü - ham <table border cellpadding cellspacing> etiketleri) - bunlar
hiç stil almadan çıplak/çirkin görünür. Genişlik HER ZAMAN %100 (konteynerin dışına taşmasın),
hücreler okunaklı padding + ince gri kenarlık alır, tek satır başlık hücreleri (ilk satır)
hafif gri zeminle hafifçe ayrıştırılır - bu bir <th> varsayımı DEĞİL, çoğu eski içerikte ilk
satır gerçekten başlık/ürün adı olduğu için genel bir sezgisel kural. .blok-metin'in kendisi
overflow-x:auto - tablo hücre içeriği sarmayıp (örn. uzun bir URL) genişliği zorlarsa
sayfanın tamamını değil sadece tabloyu kendi içinde kaydırır, taşma site düzenini bozmaz. */
.blok-metin {overflow-x:auto;}
.blok-metin table {width:100%; border-collapse:collapse; margin:1rem 0; font-size:.95rem;}
.blok-metin table td, .blok-metin table th {border:1px solid #e2e2e2; padding:10px 14px; text-align:left; vertical-align:top;}
.blok-metin table tr:first-child td, .blok-metin table tr:first-child th {background:#f7f7f7; font-weight:600;}
.blok-metin table tr:nth-child(even) td {background:#fafafa;}

/* 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,.15); 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:33%; left:calc(50% - min(var(--container), 96vw)/2);}
.slayt-blok-icerik--3 {text-align:right; width:33%; right:calc(50% - min(var(--container), 96vw)/2);}
.slayt-blok-icerik--2 {text-align:center; width:66%; left:50%; transform:translate(-50%, -50%);}

.slayt-blok-icerik h2 {color:#fff; margin-bottom:.6rem; font-size:1.8rem;}
.slayt-blok-icerik__metin {line-height:1.5; font-size:1.2rem;}
.slayt-blok-icerik .btn {display:inline-block; margin-top:.9rem; 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;}

@media (max-width:599px) {
	.slayt-blok-icerik {padding:0 20px;}
	.slayt-blok-icerik--1, .slayt-blok-icerik--2, .slayt-blok-icerik--3 {width:70%;}
	.slayt-blok-icerik--1 {left:calc(50% - min(var(--container), 96vw)/2 + 10px);}

	.slayt-blok-icerik h2 {font-size:1.5rem;}
	.slayt-blok-icerik__metin {font-size:1rem;}
}

/* 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:4/3; 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:4/3; object-fit:cover; display:block;}
.blok-galeri__baslik {margin-top:.5rem; font-size:.8rem; text-align:center;}

/* Izgara Galeri (Linksiz) (görünüm 4) - genel .blok-galeri__oge img kuralının aspect-ratio:4/3
+ object-fit:cover KIRPMASI burada geçersiz kılınır - görsel kendi doğal oranıyla, otomatik
boyutlanarak (kutuyu TAŞMADAN) gösterilir. Grid/genişlik/kırılma noktaları .blok-galeri--izgara
ile AYNI (görünüm 1'le paylaşılır), sadece içerik linksiz/kırpmasız. */
.blok-galeri__oge--linksiz img {aspect-ratio:auto; height:auto; object-fit:contain;}

/* 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) - artık genel .col-1-5 sistemini PAYLAŞMIYOR (blok-referanslar__oge
.col-3-12 kullanıyor, bkz. tma/page-fonks-blk.php - satırda 4 logo), kendi bağımsız genişlik/kırılma
noktalarına sahip: 997px üstü 5'li, 600-997px arası 4'lü, 600px altı 3'lü. position/flex/
gutter padding değerleri .col-X-12 sisteminden AYNEN kopyalandı (aynı .grid içinde flex
item olarak davranması için). */
.blok-galeri--izgara {
	background-image:url('../img/pattern-dot-1.png'); background-repeat:repeat;
}
.blok-galeri--izgara .blok-galeri__oge {
	position:relative; flex:0 0 auto;
	padding-left:calc(var(--aralik) / 2); padding-right:calc(var(--aralik) / 2);
	margin-bottom:var(--aralikTopBottom);
	width:25%;
}
@media only screen and (min-width:600px) and (max-width:997px) {
	.blok-galeri--izgara .blok-galeri__oge {width:33.33%;}
}
@media (max-width:599px) {
	.blok-galeri--izgara .blok-galeri__oge {width:50%;}
}

/* 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;
}

/* kucuk-gorseller-blok
================================================== */
/* galeri-blok'un sadeleştirilmiş hali (fancybox/video yok) - "küçük" olduğu için galeri-blok'un
Izgara'sından (4/3/2 sütun) daha SIK bir ızgara: 6/4/3 sütun. Kare kırpma (aspect-ratio:1/1,
object-fit:cover) - galeri-blok__oge img'in 4/3'ünden farklı, küçük görsel kartları için. */
.blok-kucuk-gorseller__oge img {width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:var(--radius, 5px);}
/* başlıklar gizli - img alt metni olarak DOM'da kalıyor, sadece görsel gizleniyor */
.blok-kucuk-gorseller__baslik {display:none;}

.blok-kucuk-gorseller--izgara .blok-kucuk-gorseller__oge {
	position:relative; flex:0 0 auto;
	padding-left:calc(var(--aralik) / 2); padding-right:calc(var(--aralik) / 2);
	margin-bottom:var(--aralikTopBottom);
	width:16.66%;
}
@media only screen and (min-width:600px) and (max-width:997px) {
	.blok-kucuk-gorseller--izgara .blok-kucuk-gorseller__oge {width:25%;}
}
@media (max-width:599px) {
	.blok-kucuk-gorseller--izgara .blok-kucuk-gorseller__oge {width:33.33%;}
}

/* Kayar Galeri (görünüm 2, bkz. tma/js/custom10.js -> ".blok-kucuk-gorseller--kayar" init) -
ileri/geri butonları YOK (navigation:false, swpStyleNav() hiç çağrılmıyor) - sadece Swiper'ın
kendi sürükle/kaydır davranışı. */
.blok-kucuk-gorseller--kayar {position:relative;}

/* 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). Izgara görünümde ayrı bir arka plan deseni YOK (blok-galeri--izgara'nın
pattern-dot-1.png'si burada bilerek kullanılmıyor) - boşluk margin tabanlı (aşağıya bkz.). */
/* blok-galeri--izgara ile AYNI desen: genel .col-X-12 sistemini PAYLAŞMAZ, kendi bağımsız
genişlik/kırılma noktalarına sahiptir (997px üstü 4'lü, 600-997px arası 3'lü, 600px altı 2'li).
.col-X-12'nin PADDING tabanlı gutter'ı burada İŞE YARAMAZ: padding, background:#fff ile AYNI
kutunun üzerinde olduğu için beyaz kart boşluğu da boyar, nokta deseni hiç görünmez. Bu yüzden
gutter MARGIN ile yapılıyor (gerçek, boyanmamış boşluk) - width buna göre margin kadar küçültülür. */
.blok-referanslar--izgara .blok-referanslar__oge {
	position:relative; flex:0 0 auto;
	margin-left:calc(var(--aralik) / 2); margin-right:calc(var(--aralik) / 2);
	width:calc(25% - var(--aralik));
}
@media (max-width:997px) {
	.blok-referanslar--izgara .blok-referanslar__oge {width:calc(33.33% - var(--aralik));}
}
@media (max-width:599px) {
	.blok-referanslar--izgara .blok-referanslar__oge {width:calc(50% - var(--aralik));}
}
.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;}
/* height:100px VE display/align-items/justify-content burada TEKRAR yazılıyor (genel kuralla
AYNI değerler) çünkü swiper-bundle.min.css (css10.css'ten SONRA yüklenir) kendi
".swiper-slide{height:auto}" VE ".swiper-slide{display:block}" kurallarını AYNI özgüllükle
ezer - slide'lar hem farklı yükseklikte kalır hem de display:block olduğu için logo
ortalanmaz (flex ortalaması display:flex'e bağlı). İki sınıflı bu seçici
(.blok-referanslar--kayar .blok-referanslar__oge) Swiper'ın tek sınıflı .swiper-slide
kuralını özgüllükle geçer, !important gerekmez. */
.blok-referanslar--kayar .blok-referanslar__oge {
	margin-bottom:0; height:100px; display:flex; align-items:center; justify-content:center;
}

/* 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;}

/* urun-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_urun_blok()). Tek görselde thumbnail şeridi PHP tarafında hiç render
edilmez (bkz. func_urun_blok $gorselSay>1 koşulu). */
.blok-urun__baslik {margin-bottom:1.2rem;}
.blok-urun__alt {display:flex; gap:var(--aralik); align-items:flex-start;}
.blok-urun__galeri {width:60%;}
.blok-urun__aciklama {width:40%;}

.blok-urun__ana {position:relative;}
.blok-urun__ana img {width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:var(--radius, 5px);}
.blok-urun__ana .swp-nav button.swp-prev, .blok-urun__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-urun__ana .swp-nav button.swp-prev {left:10px;}
.blok-urun__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 -> "urun-blok" init). */
.blok-urun__thumb {margin-top:12px;}
.blok-urun__thumb .swiper-slide {cursor:pointer; opacity:.55; transition:opacity .2s ease;}
.blok-urun__thumb .swiper-slide img {width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:var(--radius, 5px);}
.blok-urun__thumb .swiper-slide-thumb-active {opacity:1;}

@media only screen and (min-width:600px) and (max-width:997px), (max-width:599px) {
	.blok-urun__alt {flex-direction:column;}
	.blok-urun__galeri, .blok-urun__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;}



.solCont {flex:0 0 280px; width:280px; margin-bottom:24px; }
/* flex-basis auto DEĞİL 0% - .grid'in flex-wrap:wrap satır kırma kararı flex-shrink'ten ÖNCE,
her ögenin flex-basis'ine göre verilir; auto olsaydı sagCont'un geniş içeriği (galeri/metin)
tarayıcıya "bu satıra sığmıyor" dedirtip onu alta atardı (shrink hiç devreye giremeden) -
basis:0% ile hesaba hiç büyük bir boy girmiyor, tüm genişlik grow ile SONRADAN veriliyor. */
.sagCont {flex:1 1 0%; min-width:0;}
@media (max-width:997px) {
	.solCont {display:none;}
	.sagCont {flex:0 0 100%; width:100%;}
}
/* SOL MENÜ (syf/syfK detay sayfaları, bkz. tma/page-fonks.php -> solMenu(),
tma/page-fonks-syf.php -> syfGoster()/syfKGoster()) - üst menüyle (menu(1)) aynı
selected/aktif class'larını akordiyon olarak gösterir. Kategori metni tıklanınca NORMAL
link gibi o sayfaya gider - akordiyon aç/kapa AYRI bir +/- düğmesiyle (.solMenu-toggle,
tma/js/custom10.js tarafından <a class="arrow"> içine JS ile eklenir) yapılır, o yüzden
buradaki .arrow::after chevron YERİNE gerçek bir metin elemanı konumlandırılıyor.
================================================== */
.solMenu ul {list-style:none; margin:0; padding:0;  background-color: #fff;}
.solMenu > ul {border:1px solid #eee; border-radius:var(--radius, 5px); overflow:hidden;}
.solMenu li {border-bottom:1px solid #eee;}
.solMenu li:last-child {border-bottom:none;}
.solMenu li a {display:block; padding:10px 16px; font-size:.86rem; color:#222; text-decoration:none;}
.solMenu li a:hover, .solMenu li a.aktif, .solMenu li.selected > a {color:#dcb039;}
.solMenu li a.arrow {position:relative; padding-right:34px;}
.solMenu-toggle {position:absolute; top:0; right:0; width:34px; height:100%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; line-height:1; cursor:pointer;}
.solMenu-toggle:hover {color:#dcb039;}
.solMenu ul ul {display:none; background:#eee;}
.solMenu li.jsAcik > ul {display:block;}
.solMenu ul ul li a {padding-left:28px; font-size:.88rem;}
.solMenu ul ul ul li a {padding-left:40px;}

/* 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:4/3; 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%;}
/* mobilde kart 2 sütuna (%50 genişlik) düştüğü için genel h3 (1.05rem, bkz. yukarısı)
başlığı sığdırmıyor - kart özelinde daha da küçültülüp min-height de aynı orana çekildi
(3 satırlık ayrılan boşluk gereğinden büyük kalmasın diye). */
.syf-izgara__oge h3 {font-size:.85rem; min-height:calc(.85rem * 1.3 * 3);}
}


/* 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; margin-bottom:16px; border-bottom:1px solid #eee; background-color:#fff;}
.syf-liste__oge:last-child {border-bottom:none; margin-bottom:0;}
.syf-liste__gorsel {display:block; flex-shrink:0; width:220px;}
.syf-liste__gorsel img {width:100%; aspect-ratio:4/3; 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:4/3; 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:#dcb039;}
.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:#dcb039;}
.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;}

/* WhatsApp/telefon "customAra" butonları (bkz. tma/page-fonks.php -> tmaFooter()) - 3kef2
(tma/css/css70.css) ile AYNI kurallar. */
.customAra{position:fixed;right:0;color:#fff;z-index:2;border-radius:9999px 0 0 9999px;cursor:pointer;letter-spacing:-1px;overflow:hidden;width:3.5rem;transition:width 0.4s ease}
.whatsappAra{background-color:#4caf50;bottom:80px}
.telAra{background-color:#fd7e14;bottom:25px}
.customAra a{display:flex;align-items:center;text-decoration:none;color:#fff;height:3rem;padding:0 1rem}
.customAra i{font-size:1.8rem;line-height:3rem;min-width:1.8rem;text-align:center;animation:blink 1.5s infinite}
.customAra span{font-size:1.2rem;line-height:3rem;margin-left:1rem;white-space:nowrap;opacity:0;transition:opacity 0.3s ease 0.1s}
.customAra:hover{width:14rem}
.customAra:hover span{opacity:1}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}
50%{opacity:0.1;transform:scale(1.1)}
}

/* Ç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; } }