@font-face {font-family: 'Esbah'; src: url('fonts/Esbah-Regular2.ttf') format('truetype'); font-display: swap;}
/*
red #ff431e
*/

/* #Reset & Basics k
================================================== */
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; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box;}
html {position: relative; height: 100%;	-webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box;	
/* font-size:14px; */}
body {position: relative; height: 100%; margin:0; padding:0; 
	font-family: "Roboto", sans-serif; font-weight: 400; line-height: 1.8; 
	font-size: 1rem; color: #202020; letter-spacing: 0; 
	background: rgba(255, 255, 255, 1); 
}
	:root {	--doc-height: 100%;}
/* Typography
------------------------------------- */
  h1, h2, h3, h4, h5, h6 {margin-top: 0; margin-bottom: 1rem; 
	font-family: 'Oswald', sans-serif; font-weight: 500; line-height: 1.5; color: inherit;}
  h1 {font-size: 3rem;}
  h2 {font-size: 2.4rem;}
  h3 {font-size: 1.8rem;}
  h4 {font-size: 1.6rem;}
  p {margin-top: 0; margin-bottom: .8rem; }
  b, strong {font-weight: 500;}
  small, .small  {font-size: 80%;}
  
  @media (max-width:1139px) and (min-width:993px){
	h1 {font-size: 2.8rem;}
	h2 {font-size: 2.1rem;}
	h3 {font-size: 1.6rem;}
	h4 {font-size: 1.5rem;}
  }
  @media (max-width:992px) and (min-width:769px){
	h1 {font-size: 2.6rem;}
	h2 {font-size: 1.8rem;}
	h3 {font-size: 1.4rem;}
	h4 {font-size: 1.3rem;}
  }
  @media (max-width:992px) and (min-width:769px){
	h1 {font-size: 2.4rem;}
	h2 {font-size: 1.5rem;}
	h3 {font-size: 1.2rem;}
	h4 {font-size: 1.1rem;}
  }
  @media (max-width:576px){
	h1 {font-size: 2.2rem;}
	h2 {font-size: 1.2rem;}
	h3 {font-size: 1rem;}
	h4 {font-size: .9rem;}
  }

  /* List */
  ol, ul, dl {margin-top: 0; margin-bottom: .8rem;}
  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: .8rem;	margin-bottom: 1rem; border: 0;	border-top: 1px dashed #ccc;}
  img {border:none; padding:0; margin:0; display:block;}
  /* Links */
  a {color: #000; text-decoration: none;}
  a:hover {text-decoration: none;}
  /* placeholder */
  ::placeholder {color: #aaa;}
  /* sup */
  sup {	vertical-align: super; font-size: .5rem;}
  /* 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; }
  button {border:none; background: none; cursor: pointer;}
  button.btn, .btn {display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; padding: .5rem 1rem;
	font-size: 1rem; line-height: 1.5; border-radius: 1px; transition: all .5s;
	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;}

/* GRID
––––––––––––––– */
.container-full {position:relative;	width: 100%; max-width:1920px; margin:0 auto; padding:0;}
.container-genis {position:relative; width: 100%; max-width: 1440px; margin:0 auto; padding:0;}
.container-dar {position:relative; width: 100%; max-width: 960px; margin:0 auto; padding:0;}
.container {position:relative; width: 100%; max-width: 1140px; margin:0 auto; padding:0;}
.grid {position:relative; width:100%; padding:0; margin:0;}
.container-full::after, .container-genis::after, .container-dar::after, .container::after, .grid::after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}

.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; float:left; /* border:1px solid rgba(221,221,221,1);	box-sizing:border-box;	-webkit-box-sizing:border-box;	-moz-box-sizing:border-box;	background-color:#ddd; */}
.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; */ margin:0px 16px; padding:0;}
	.content::after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}


@media (max-width:1139px) and (min-width:993px){
	.content{margin:0px 14px}
	.container,.container-genis,.container-dar{max-width:992px}
}
@media (max-width:992px) and (min-width:769px){
	.content{margin:0px 14px}
	.container,.container-genis,.container-dar{max-width:768px}
}
@media (max-width:768px) and (min-width:577px){
	.content{margin:0px 12px}
	.container,.container-genis,.container-dar{max-width:576px}
}
@media (max-width:576px){
	.content{margin:0px 12px}
	.container,.container-genis,.container-dar{max-width:94%}
}


/* FIX
--------------------------------*/
.clearfix::after {display:block; font-size:0; content:" "; clear:both; height:0;}
*html .clearfix {zoom:1;} /* IE6 */ 
*:first-child+html .clearfix {zoom:1;} /* IE7 */

.clear {clear:both; padding:0 !important; margin:0 !important;}

.fRight {float:right;}
.fLeft {float:left;}

.filterWhite {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(55deg) brightness(104%) contrast(103%);}
.filterNone {filter: none;}

.flexStart {display: flex; width:100%; justify-content: flex-start; align-items: center; flex-wrap:wrap;}
.flexCenter {display: flex; width:100%; justify-content: center; align-items: center; flex-wrap:wrap;}
.flexSpaceBetween {display: flex; justify-content: space-between; align-items: center;}

.esbahFont {font-family: 'Esbah', serif; letter-spacing: -0.05em; font-weight: normal;}
.lightFont {font-weight: 100;}

/* img
------------------------------------- */  
img {border:none; padding:0; margin:0; display:block;}
/*img {image-rendering: pixelated;} */
/*"image-rendering" özelliğini "pixelated" olarak ayarlar, bu da görüntüyü piksel tabanlı olarak keskinleştirir. auto (Varsayılan Değer): Bu değer, tarayıcının otomatik olarak görüntü işleme yöntemini seçmesine izin verir.*/
.img {}
.img img {object-fit: contain; max-width:100%;} /* En/boy oranını korurken kutuya doldurmak için duruma göre resmin boyutunu artırır veya azaltır.*/
/* kare */
.img-k {position:relative; width:100%; padding-top:100%; overflow:hidden;}/* 100% -> 1:1 Aspect Ratio | 75% -> 4:3 Aspect Ratio | 62.5% -> 8:5 Aspect Ratio */
/* yatay */
.img-k-y {position:relative; width:100%; padding-top:75%; overflow:hidden;}/* 100% -> 1:1 Aspect Ratio | 75% -> 4:3 Aspect Ratio | 62.5% -> 8:5 Aspect Ratio */
/* dikey */
.img-k-d {position:relative; width:100%; padding-top:125%; overflow:hidden;}/* 100% -> 1:1 Aspect Ratio | 75% -> 4:3 Aspect Ratio | 62.5% -> 8:5 Aspect Ratio */
	
.img-k img, .img-k-y img, .img-k-d img  {max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform:  translate(-50%, -50%);}

.displayNone {display:none;}
.displayBlock {display:block;}
.opacity0 {opacity: 0;}
.opacity1 {opacity: 1;}

/* HEADER
================================================================================================== */	
#headerKutu {z-index: 20; width: 100%; 	
	display: flex; justify-content:center; align-items: center; background: rgba(255, 255, 255, 1);}
.headerKutu1 {position:relative; height:116px;}
.headerKutu2 {position:fixed; height: 100px; top: 0; left: 0;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);}

.headerKutuIc {width: 100%; display: flex; justify-content:space-between; align-items: center;}

.logo {position: relative; padding: 0; margin: 0; animation: 1s .1s backInDown both; background-color: #0a1a72;}
.headerKutu1 .logo {height: 140px; width: 160px; top:50px;}
.headerKutu2 .logo {height: 80px; width: 160px; }
.logo img {max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; 
	transform: translate(-50%, -50%);}
/* Başlangıç durumu */
.headerKutu1 img.logo-dark {opacity: 1; z-index: 2;}
.headerKutu1 img.logo-light {opacity: 0; z-index: 1;}
/* Scroll sonrası veya tema değişiminde */
.headerKutu2 img.logo-dark {opacity: 0; z-index: 1;}
.headerKutu2 img.logo-light { opacity: 1; z-index: 2;}


.headerKutuSag {display: flex; justify-content:center; align-items: center; transition:all .3s ease; animation:1s .1s backInRight both;}

ul.headerMenu {display: flex; padding: 0; list-style: none; margin: 0; font-family: 'Oswald', sans-serif;}
	ul.headerMenu li {position: relative; padding: 0; margin: 0 1.2rem; color: #000; font-size: 1rem; font-weight: 500; cursor: pointer; letter-spacing: 1px;
	display: flex; flex-direction: row; align-items: flex-end; }
	ul.headerMenu li > * {margin-top: auto;}
	ul.headerMenu li span.num {display: inline-flex; justify-content: center; align-items: center; height: 3.2rem; color: #cbcbcb; font-size: 3rem; font-weight: 300;
	line-height: 1; text-align:center; width:1.6rem;}
	ul.headerMenu li span.num-nokt {width:1rem;}
	ul.headerMenu li span.txt {font-size: .95rem; font-weight: 500; line-height: 1.4;}
	ul.headerMenu li span.num-width {}
	ul.headerMenu li span {transition: color 0.5s ease;}
	ul.headerMenu li:last-child {/*margin-right:0;*/}
	ul.headerMenu li.aktif span.num{color: #ff431e;}
	ul.headerMenu li:hover span.num{color: #ff431e;}

.dilVeWeb {position: relative; border-left: 1px solid #cbcbcb; padding-left: 1.2rem;
	display: flex; flex-direction: column; align-items: flex-start;}

	.dilSelect {position: relative; display: inline-block;}
	.dilSelect select {display: block; width: 100%; margin: 0; padding: 2px 50px 2px 10px; font-size: 0.9rem; border: 1px solid #eee;
	border-radius: 3px; color: #202020; background-color: #eee; appearance: none; cursor: pointer;}
	.dilSelect select::-ms-expand {display: none;}
	.dilSelect::after {content: '\e912'; font-family: 'icomoon'; position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
	pointer-events: none; color: #202020; font-size: 1rem;}
	.dilSelect select:focus {color: #202020; outline: none; border-color: #ccc;}

	#esbahWeb {position: relative; margin:0; padding:0; width:100%;}
	#esbahWeb a {color:#000; padding:0; display:block; font-size:1rem; font-family: 'Oswald', sans-serif; line-height:3;}
	#esbahWeb a:hover {color: #ff431e;}
	#esbahWeb span {font-size:1rem; }
	#esbahWeb i {font-size:1rem; color: #ff431e;}

.menuAc {display:none; cursor: pointer; padding-top:.3rem; padding-left:1.2rem;}
.menuAc i {font-size:2rem;}

/* respblok
**************************** */ 
#respBlok {position: fixed; top: 0; left: 0; z-index: 20; width: 100%; height: 100%; background: rgba(0, 0, 0, .3); display: none;}
	.respContent {position: relative; width: 300px; height: 100%; background-color: #fff; float: left; 
		display: flex; flex-direction: column; align-items: flex-start; justify-content:flex-start; padding: 0;}
	.respContent .menuKapat {position: absolute; top: 0; left: 300px; padding: 16px; color: #fff; cursor: pointer; z-index: 3; background-color: #ff431e;
	display: block;}
	.respContent .menuKapat span {font-size: 1.5rem; line-height: 1;}
	.respMenuUL {list-style: none; margin: 48px 10% 32px 10%; padding: 0; width: 80%; border: 1px solid #fff; background: #fff; overflow: hidden;}
	.respMenuUL li {width: 100%; padding: .5rem; border-bottom: 1px solid #eee; font-size: 1.2rem; color: #202020; transition: background 0.2s ease, color 0.2s ease;}
	.respMenuUL li:last-child {border-bottom: none;}
	.respMenuUL li:hover {background: #f8f8f8; color: #000; cursor: pointer;}
	.respMenuUL li.aktif {color: #ff431e;}
    .respMenuUL i {color:#202020; margin-right:.5rem;}

.respTel444 {position:relative; float:left; width:100%; margin: 3rem 2rem 2rem 2rem; background-color: #eee;}
.respTel444 i {position:relative; float:left; font-size:2rem; height:3rem; width:3rem; line-height:3rem; color:#202020; text-align: center; 
	transition: all .3s;}
.respTel444 span {float:left; color:#202020; font-size:1.6rem; line-height:3rem; padding:0 1rem; }
.respTel444 a {color:#ff431e;}
.respTel444:hover i {/*background-color: #333; color:#fff;*/}

ul.resp-sosyal-link {list-style:none; margin:0 2rem; padding:0; float:left;}
ul.resp-sosyal-link li {position:relative; display:block; float:left; list-style:none; height:2.4rem; line-height:3rem; width:80%;
	margin:5px 10px 5px 0; padding:0; background:transparent; text-align:center; transition:all 0.15s ease-out;  }
ul.resp-sosyal-link li a {display:block;}
ul.resp-sosyal-link li i {float:left; color:#202020; font-size:1.6rem; line-height:2.4rem; width:2.5rem; height:2.4rem; text-align: center; }
ul.resp-sosyal-link li span {float:left; color:#202020; font-size:1.2rem; line-height:2.4rem; height:3rem; }
ul.resp-sosyal-link li:hover i {font-size:2rem;}


@media (max-width:1139px) and (min-width:993px){
	#headerKutu {}
	.headerKutu1 {height:84px;}
	.headerKutu2 {height:64px;}
	.headerKutu1 .logo {height: 84px; width: 128px; top:20px;}
	.headerKutu2 .logo {height: 64px; width: 128px;}
	.menuAc {display:block;}
	ul.headerMenu {display:none;}
	.dilVeWeb {border-left: none;}
	#esbahWeb {display:none;}
}
@media (max-width:992px) and (min-width:769px){
	#headerKutu {}
	.headerKutu1 {height:84px;}
	.headerKutu2 {height:64px;}
	.headerKutu1 .logo {height: 84px; width: 128px; top:20px;}
	.headerKutu2 .logo {height: 64px; width: 128px;}
	ul.headerMenu {display:none;}
	.menuAc {display:block;}
	.dilVeWeb {border-left: none;}
	#esbahWeb {display:none;}
	
	
}
@media (max-width:768px) and (min-width:577px){
	#headerKutu {}
	.headerKutu1 {height:84px;}
	.headerKutu2 {height:64px;}
	.headerKutu1 .logo {height: 84px; width: 128px; top:20px;}
	.headerKutu2 .logo {height: 64px; width: 128px;}
	ul.headerMenu {display:none;}
	.menuAc {display:block;}
	.dilVeWeb {border-left: none;}
	#esbahWeb {display:none;}
	
	
}
@media (max-width:576px){
	#headerKutu {}
	.headerKutu1 {height:84px;}
	.headerKutu2 {height:64px;}
	.headerKutu1 .logo {height: 84px; width: 128px; top:20px;}
	.headerKutu2 .logo {height: 64px; width: 128px;}
	ul.headerMenu {display:none;}
	.menuAc {display:block;}
	.dilVeWeb {border-left: none;}
	#esbahWeb {display:none;}
	
	
}


/* banner
----------------------------------
*/
.bannerKap {background-color: rgba(41,86,180,1); height: calc(100vh - 116px); overflow: hidden; animation:1s .1s fadeIn both;}
.bannerDetay {position:relative; width:100%; height: 100%;}
.bannerimg {position:relative; width:100%; height: 100%;}
.bannerimg img {width:100%; height: 100%; object-fit: cover; }
.bannerimg picture::after {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; 
	/* Başlangıç gradient */ 
	background: linear-gradient(to right, rgba(41,86,180,0.8), rgba(17, 20, 82, 0.9)); 
	/*background: linear-gradient(to right, rgba(41,86,180,0.3), rgba(17, 20, 82, 0.5)); */
	transition: opacity .5s ease;}
.bannerContKap {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; display: flex; align-items: center; /* dikey ortalama */}
.bannerCont {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; /* yan yana ayır */ flex-direction: row;}
.bannerContKapSol {width: 50%; display: flex; align-items: center;   /* dikeyde ortala */}
	.bannerContKapSol h1 {font-size: 3.2rem; line-height: 1.2; font-weight: 700; color: #fff; margin-bottom: 1.5rem; display: inline-block;}
	.bannerContKapSol p {font-size: 1.4rem; line-height: 1.2; font-weight: 400; color: #fff; margin-bottom: 1rem;  display: inline-block;}
	.bannerContKapSol span.bannerLabel {font-size: 1.4rem; line-height: 2; font-weight: 700; background-color: transparent;	color: #fff;
		padding: 0 1.5rem; display: inline-block; position: relative; background-color: #ff431e; display: inline-block;}


	/* TALEP FORMU */
	#talepFormKutu {position:absolute; top:150px; left:58%; display:flex; align-items:center; overflow: hidden;  z-index:5;
		/*background: rgba(255, 255, 255, .05); */
		background: rgba(17, 20, 82, .3); 
		border: 1px solid  rgba(255, 255, 255, .2); 
		border-radius:24px;}
	#talepFormKutuIc {padding:24px 28px; margin:0; width:400px;}
	#talepFormKutuIc h3 {color:#fff; font-size:1.8rem; margin-bottom:1rem;}
	#talepFormKutuIc p {font-size:1rem; color:#ddd;}

	/* -> TALEP FORMU OGE */

	.talepFormKap {width:100%; display:flex; justify-content: flex-start; flex-wrap: wrap;}
	.talepFormItem {width:100%; padding:0 1rem 1.2rem 0; display:flex; flex-wrap:wrap;}
	.talepFormItem.form50 {width:50%;}

	.talepForm {display:flex;}
	.talepForm input, .talepForm textarea {float:left; border:none; border-bottom:1px solid rgba(255,255,255,.8); color: #eee; background: transparent;}
		.talepForm input[type="text"], .talepForm textarea {width:100%; font-size: 1rem; line-height:1.5; font-weight:300; letter-spacing: .02rem;}
		.talepForm input[type="checkbox"] {margin:.2rem 1rem 0 0; width:16px; height:16px;}
		
		.talepForm textarea {height:3rem;}
		.talepForm .error {border: 1px solid #ff431e;}

		.talepForm input::placeholder, .talepForm textarea::placeholder {color:#eee;}
		.talepForm .butonum {width:100%; font-weight: 400; text-align: center;	font-size: 1rem; line-height: 2.5; border-radius: 9999px; transition: all .5s ease;
		cursor:pointer;	margin: 0; background-color:#ff431e; color:#fff;}
		.talepForm .butonum:hover {background-color:#000;}
		.talepForm .fInfo {font-size:.7rem; margin: 0; padding:0 .1rem; color:#ddd;}
		.talepForm .fInfo a {text-decoration: underline; color:#ddd;}
		.talepForm .telKutu {width:100%; display:flex; justify-content: flex-start;}

	.talepForm select.telUlkeKod {width:100px; margin-right:5px; float:left; border:none; background-color: transparent; border-bottom:1px solid rgba(255,255,255,.8); color:#eee; }
	.talepForm select.telUlkeKod:focus {color: #222; /* yazı rengi değişir */ background-color: #fff; /* arka plan değişir */ border-bottom-color: #222;}
	.talepForm input.tel {width : calc(100% - 110px); float:right;}


	/* Hover efekt */
	/*	*/
	.bannerKap:hover .bannerimg picture::after {opacity: 0.1;}
	.bannerKap:hover .bannerContKapSol {animation:1s .1s backOutLeft both;}
	.bannerKap:hover  + #talepFormKutu {animation:.3s .1s pulse both; background-color: rgba(17, 20, 82, 0.9);}





@media (max-width:1139px) and (min-width:993px){
	.bannerKap {height: 610px;}

	.bannerContKapSol h1 {font-size: 2.8rem; }
	.bannerContKapSol p {font-size: 1.4rem;}
	.bannerContKapSol span.bannerLabel {font-size: 1.4rem;}	

	.bannerimg picture::after {
	background: linear-gradient(to right, rgba(41,86,180,0.6), rgba(17, 20, 82, 0.7)); }

	.bannerKap:hover .bannerimg picture::after {opacity: 1;}
	.bannerKap:hover .bannerContKapSol {animation:none;}
	.bannerKap:hover  + #talepFormKutu {animation:none;}
	
	#talepFormKutu {top:132px; left:60%;}
	#talepFormKutuIc {padding:16px 32px; width:364px;}

}
@media (max-width:992px) and (min-width:769px){
	.bannerKap {height: 560px;}

	.bannerContKapSol h1 {font-size: 2.4rem; }
	.bannerContKapSol p {font-size: 1.4rem;}
	.bannerContKapSol span.bannerLabel {font-size: 1.4rem;}	

	.bannerimg picture::after {
	background: linear-gradient(to right, rgba(41,86,180,0.6), rgba(17, 20, 82, 0.7)); }

	.bannerKap:hover .bannerimg picture::after {opacity: 1;}
	.bannerKap:hover .bannerContKapSol {animation:none;}
	.bannerKap:hover  + #talepFormKutu {animation:none;}
	
	#talepFormKutu {top:110px;left:50%;}
	#talepFormKutuIc {padding:16px 32px; width:364px;}
}
@media (max-width:768px) and (min-width:577px){
	.bannerKap {height: 520px;}

	.bannerContKapSol {width: 100%;   justify-content: flex-end;  /* sağa yasla */  text-align: right; /* metinleri sağa hizala */}
	.bannerContKapSol h1 {font-size: 2rem; }
	.bannerContKapSol p {font-size: 1.2rem;}
	.bannerContKapSol span.bannerLabel {font-size: 1.2rem;}
	
	.bannerimg picture::after {
	background: linear-gradient(to right, rgba(41,86,180,0.3), rgba(17, 20, 82, 0.5)); }

	.bannerKap:hover .bannerimg picture::after {opacity: 1;}
	.bannerKap:hover .bannerContKapSol {animation:none;}
	.bannerKap:hover  + #talepFormKutu {animation:none;}
	
	#talepFormKutu {margin:0 auto; position:relative; width:100%; top:0; left:0; border-radius:0; background-color: rgba(17, 20, 82, 1);}
	#talepFormKutuIc {padding:32px 32px; width:100%;}
}
@media (max-width:576px){
	.bannerKap {height: 480px;}

	.bannerContKapSol {width: 100%;   justify-content: flex-end;  /* sağa yasla */  text-align: right; /* metinleri sağa hizala */}
	.bannerContKapSol h1 {font-size: 1.6rem;}
	.bannerContKapSol p {font-size: 1.2rem;}
	.bannerContKapSol span.bannerLabel {font-size: 1.2rem; padding: 0 .5rem;}
	
	.bannerimg picture::after {
	background: linear-gradient(to right, rgba(41,86,180,0.3), rgba(17, 20, 82, 0.5)); }

	.bannerKap:hover .bannerimg picture::after {opacity: 1;}
	.bannerKap:hover .bannerContKapSol {animation:none;}
	.bannerKap:hover  + #talepFormKutu {animation:none;}

	#talepFormKutu {margin:0 auto; position:relative; width:100%; top:0; left:0; border-radius:0; background-color: rgba(17, 20, 82, 1);}
	#talepFormKutuIc {padding:32px 32px; width:100%;}
}



p.modH2Top {text-align: center; font-size: 1.4rem; margin: 0 auto 1rem auto; color: #ff431e; font-weight:500;}
h2.modH2 {text-align: center; margin: 0 auto 2rem auto; font-size: 2.8rem;}
p.modH2Bottom {text-align: center; font-size: 1rem; max-width: 600px; margin: 0 auto 2rem auto;}

@media (max-width:1139px) and (min-width:993px){
h2.modH2 {font-size: 2.4rem;}
}
@media (max-width:992px) and (min-width:769px){
h2.modH2 {font-size: 2.4rem;}
}
@media (max-width:768px) and (min-width:577px){
h2.modH2 {font-size: 2.1rem;}
}
@media (max-width:576px){
h2.modH2 {font-size: 2.1rem;}
}

/* bilgi modülü
----------------------------------
*/
.modBilgi {padding-top: 64px; padding-bottom:64px;}
.modBilgiKunye {display: flex;justify-content: center; align-items: center; gap: 50px; list-style: none; padding: 0; margin: 0;}
.modBilgiKunye li {width: 140px; height: 140px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 10px; font-size: 12px; font-weight:400; background-color: #ff431e; color: #fff; cursor: pointer; 
  box-shadow: 0 4px 4px rgba(0,0,0,0.08);}
.modBilgiKunye li span { font-weight: 500; font-size: 16px; margin-top: 5px; font-family: 'Oswald', sans-serif;}
.modBilgiKunye li:hover {animation:1s pulse both; background-color: #ccc; color:#202020;}

@media (max-width:1139px) and (min-width:993px){

}
@media (max-width:992px) and (min-width:769px){

}
@media (max-width:768px) and (min-width:577px){

}
@media (max-width:576px){
.modBilgi {padding-top:48px; padding-bottom:48px;}
.modBilgiKunye {gap: 10px;}
.modBilgiKunye li {width: 100px; height: 100px;}
.modBilgiKunye li span { font-weight: 500; font-size: 13px;}
}

/* galeri video İkon
----------------------------------
*/
.modVidIkonKap { padding-top: 64px; padding-bottom:64px; background-color: rgba(41,86,180,1); 
	background-image: url('../images/anaProjeKapBg3.png'); background-position: top right; background-repeat: no-repeat;}
.modVidIkon {color:#000; display:flex; flex-wrap: wrap;}
	.modVidIkonSol {width:60%; padding:32px;}
		.projeCustomVideoKap {width:100%; display:flex; justify-content:flex-start; padding:12px 0;}
		.projeCustomVideoKap video {width:100%; max-width:840px;}

	.modVidIkonSag {width:40%; padding:32px;}
		.modVidIkonSag .projeIkonKap {width:100%; display:flex; justify-content: flex-start; flex-wrap: wrap; margin:0; padding:0; }
        .modVidIkonSag .projeIkon {position: relative; width: 33.33%; margin: 1.3rem 0; display: flex; justify-content: flex-start; /* Sola yasla */ align-items: center;      
            flex-wrap: nowrap; text-align: left;}
        .modVidIkonSag .projeIkon i {width:3rem; font-size: 2.4rem; color: #fff; margin-right: 0.75rem;}
        .modVidIkonSag .projeIkon span {font-size: 0.8rem; line-height: 1.2; color: #fff; display: inline-block; text-align: left; 
			padding-right:.5rem;}
		.modVidIkonSag .projeIkon:hover i {animation:1s flash both;}


@media (max-width:1139px) and (min-width:993px){
	.modVidIkonSol {width:100%; padding:0 16px;}
	.modVidIkonSag {width:100%; padding:0 16px;}
}
@media (max-width:992px) and (min-width:769px){
	.modVidIkonSol {width:100%; padding:0 16px;}
	.modVidIkonSag {width:100%; padding:0 16px;}
}
@media (max-width:768px) and (min-width:577px){
	.modVidIkonSol {width:100%; padding:0 16px;}
	.modVidIkonSag {width:100%; padding:0 16px;}
}
@media (max-width:576px){
	.modVidIkonKap {padding-top:48px; padding-bottom:48px;}
	.modVidIkonSol {width:100%; padding:0 16px;}
	.modVidIkonSag {width:100%; padding:0 16px;}

    .modVidIkonSag .projeIkon {position: relative; width: 50%;}
}


/* tabs modülü 2
----------------------------------
*/
.modTab2 {
  width: 100%;
}

.modTab2Title {
  cursor: pointer;
  display: flex;                /* img + metin yan yana */
  align-items: center;          /* dikey ortalama */
  justify-content: flex-start;  /* ✅ içerikler sola yaslı */
  padding: 16px 64px 16px 16px;
  background: #ff431e;
  color: #fff;
  border: 1px solid #eee;
  margin-top: 16px;
  border-radius: 16px;
  transition: 0.2s;
  position: relative;
  transition: all 0.3s ease;
}

.modTab2Title h3{
  font-weight: 500;
  font-size: 1.6rem;
  font-family: 'Oswald', sans-serif;
  margin:0;
}

.modTab2Title img {
  width: 48px;
  height: 48px;
  margin-right: 16px;
  flex-shrink: 0; /* küçük ekranlarda bozulmayı önler */
  filter: brightness(0) invert(1) contrast(1000%);
}

.modTab2Title::after {
	content: '\e912'; font-family: 'icomoon'; 
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 1.8rem;
  transition: 0.3s ease;
}

.modTab2Title.active::after {
	content: '\e914'; font-family: 'icomoon'; 
}

.modTab2Title.active {
  background: #2956b4;
  color: #fff;
}


.modTab2Content {
  display: none;
  margin-top:.5rem;
  padding: 2rem;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 16px;
  animation: 1s animationfadeInDown2 both;
}

.modTab2Content.active {
  display: block;
}



@keyframes animationfadeInDown2 {
  0% {
    opacity: 0;
    transform: translateY(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width:1139px) and (min-width:993px){

}
@media (max-width:992px) and (min-width:769px){

}
@media (max-width:768px) and (min-width:577px){

}
@media (max-width:576px){
.modTab2Title h3{
  font-weight: 500;
  font-size: 1.2rem;
  font-family: 'Oswald', sans-serif;
}
}


/* harita
----------------------------------
*/

.modHarita {margin-top: 32px; background-color: #222; min-height:400px;}

.haritaKap {
  position: relative;
  width: 100%;
  height: 800px;
  overflow: hidden;
  border: 1px solid #ccc;
}

.haritaKap img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* Genişliğe sığdır, taşanı kırp */
  object-position: center center; /* Görseli hem yatay hem dikey ortala */
  display: block;
}


/* galeri modülü
----------------------------------
*/
.modGaleri {padding-top: 64px; padding-bottom:64px; }
.modGaleri h2 {text-align:center;}
.modGaleri p.h2Top {text-align:center; font-size:1.2rem;}

.flexModGaleri {display:flex; justify-content: center; flex-wrap: wrap; padding:5px;}
	.modGaleriItem {margin:1%; width:31.33%; box-shadow: 0 4px 4px rgba(0,0,0,0.08);}
		.modGaleriImg {position:relative;  width:100%; overflow: hidden;} 
		.modGaleriImg img  {z-index:1; width:100%; transition: transform 0.4s ease;}

/* Sol üst köşebent */
.modGaleriImg::before, .modGaleriImg::after {content: ""; position: absolute; width: 60px; height: 60px; border: 5px solid #ff431e; 
  transition: all 0.3s ease; z-index:2;}
/* Sol üst */
.modGaleriImg::before {top: -5px; left: -5px; border-right: none; border-bottom: none;}
/* Sağ alt */
.modGaleriImg::after {bottom: -5px; right: -5px; border-left: none; border-top: none;}
.modGaleriItem:hover {box-shadow: 0 4px 4px rgba(0,0,0,0.1);}
.modGaleriItem:hover .modGaleriImg::before{top: 10px; left: 10px;}
.modGaleriItem:hover .modGaleriImg::after {bottom: 10px; right: 10px;}
.modGaleriItem:hover img {transform: scale(1.1);}


@media (max-width:1139px) and (min-width:993px){

}
@media (max-width:992px) and (min-width:769px){

}
@media (max-width:768px) and (min-width:577px){

}
@media (max-width:576px){

.haritaKap {
  height: 500px;
}

	.modGaleri {padding-top:48px; padding-bottom:48px;}
	.modGaleriItem {margin:2%; width:98%; box-shadow: 0 4px 4px rgba(0,0,0,0.08);}
}


/* FOOTER
---------------------------------------
*/

#rightKap {position:fixed; bottom: 120px; width:80px; right: 0; z-index: 19; background: rgba(0, 0, 0, .4);
	display:flex; align-items: flex-end; flex-wrap: wrap;}

ul.sosyal {position:relative; margin:0; list-style:none; padding:0; width:100%;}
	ul.sosyal li {position:relative; display:block; list-style:none; height:4rem; margin:0 .5rem; padding:0; 
		background:transparent;	text-align: center;	color:#fff;}
	ul.sosyal li a {color:#fff; }
	ul.sosyal li.phone {border-bottom:1px solid rgba(229, 229, 229, .2); /*border-top:1px solid rgba(229, 229, 229, .2); */
		margin-top:1rem; padding-top:1rem; height:6rem;}
	ul.sosyal li.phone span {font-size: 1rem;}
	ul.sosyal li.whatsapp {border-bottom:1px solid rgba(229, 229, 229, .2); border-top:1px solid rgba(229, 229, 229, .2); 
		margin-bottom:1rem;	padding-top:1rem; height:6rem;}
	ul.sosyal li a {display:block;}
	ul.sosyal li i {float:left; color:#ddd; font-size:2rem; line-height:4rem; width:4rem; height:4rem; width:100%; 
		transition:all .2s ease-out;}
	ul.sosyal li:hover i {font-size:3rem;}

#footerKap {background-color: #f9f9f9; }

#footer {color:#202020; display:flex; padding-top:72px; padding-bottom:72px;}
#footerSol {width:50%; padding:32px; border-right:1px solid rgba(0,0,0,.1); display:flex; flex-direction: row-reverse; flex-wrap: wrap;}
#footerSag {width:50%; padding:32px; display:flex;}

#footer a {color:#202020;}
#footerSol .logo2 {position:relative; height:50px; padding:0; margin:0 0 20px 0; z-index:11;}
#footerSol .logo2 img {max-height:100%; }
#footerSol p.foot { width:100%; margin:0; color:#202020; font-size: 1.2rem; font-weight:400; text-align:right;}

ul.sosyal-link { list-style:none; margin:16px 0; padding:0;}
ul.sosyal-link li {position:relative; display:block; float:left; list-style:none; width:3rem; height:3rem;
	margin:0 20px 0 0; padding:0; background:transparent; text-align:center; transition:all 0.15s ease-out; 
	border: 1px solid #eee; background-color: #eee;
	font-weight:300; 
}
ul.sosyal-link li a {display:block;}
ul.sosyal-link li a i {color:#202020; font-size:1.5rem; line-height:3rem; width:3rem; height:3rem; text-align: center;}
ul.sosyal-link li a span {display:none;}
ul.sosyal-link li:hover {background:rgba(120, 120, 120, 0.1); border-radius: 50%;}

/* -> iletisim bilgi ikonları */
#footerSag .fContactIkonKap {width:100%; display:flex; flex-wrap: wrap; margin:0; padding:0;}
#footerSag .fContactIkon {position:relative; width:100%; margin: 0 0 .3rem 0; display:flex;}
#footerSag .fContactIkon i {position:relative; font-size:1.8rem; min-width:2.4rem; line-height:2.4rem; color:#ff431e; text-align: center; transition: all .3s;}
#footerSag .fContactIkon p {font-size:1rem; padding:.3rem 0 0 .5rem; font-weight:300; }
#footerSag .fContactIkon p.telefon {font-size:1.6rem; padding:0 0 0 .5rem;}
#footerSag .fContactIkon:hover i {/*background-color: #333; color:#fff;*/}	


ul.mapAcUL {position: relative; float:right; margin:0 0 -40px 30px; padding:0; list-style: none; z-index:3;}
	ul.mapAcUL li {float:left; width:90px; text-align:center; font-size:.7rem; line-height:1.5; color: #202020; padding:0; margin:0 8px 0 0; cursor: pointer; }
	ul.mapAcUL li a {color: #333;}
	ul.mapAcUL li span {}
	ul.mapAcUL li i {font-size:2rem; color:#333;}
	ul.mapAcUL li img {width:100%;}

#footerAlt {color:#666; font-size:.8rem; border-top:1px solid rgba(0,0,0,.1); padding:20px 0;}
#footerAlt p.copyright { float:left; padding:10px 0; margin:0; font-weight:500; }

@media (max-width:1139px) and (min-width:993px){

}
@media (max-width:992px) and (min-width:769px){

}
@media (max-width:768px) and (min-width:577px){

}
@media (max-width:576px){
	#footer {flex-wrap: wrap; padding-top:48px; padding-bottom:48px;}
	#footerSol {width:100%; padding:64px 32px 32px 32px; border-right:none; flex-direction: row;}
	#footerSol .logo2 {height:30px;}
	#footerSol p.foot {text-align:left;}
	#footerSag {width:100%; padding:32px; }
}

/* PROJE DETAY
================================================================================================== */
/* galeri img katman */
.fancybox-content::after {content: ''; text-align:center; position: absolute; width: 100%; height:100%; background: rgba(0, 0, 0, .01); left: 0;  bottom: 0; right: 0; z-index:1; 
	background: url('../images/yasal-uyari.png') bottom right NO-REPEAT;
}
/* galeri vid katman */
.fancybox-slide--video .fancybox-content::after,
.fancybox-slide--html .fancybox-content::after
{display:none;}

.fancybox-slide--html .fancybox-content {
    width: 80vw;
    height: 80vh;
	overflow: auto !important;
}

@media only screen and (min-width:993px) and (max-width:1200px) {

}
@media only screen and (min-width:769px) and (max-width:992px) {

}
@media only screen and (min-width:577px) and (max-width:768px) {

}
@media only screen and (min-width:0px) and (max-width:576px) {
	.fancybox-slide--html .fancybox-content {
		width: 90vw;
		height: 90vh;
		overflow: auto !important;
	}
}


/* -> cooke - çerez */
#cookie-notice2 { background:rgba(0,0,0,1); padding:1rem; position:fixed; display:flex; 
    justify-content: center; align-items: center; border-radius:5px; bottom:0; left:0; width:90%;  
    margin:5%; visibility:hidden; z-index:100; box-sizing:border-box;}
#cookie-notice2 p {color:#eee; font-family:inherit; font-size:.9rem; margin:0; font-weight:300;}
#cookie-notice2 p a {text-decoration: underline; color:#eee;}
#cookie-notice2 button {margin:0 .5rem; cursor:pointer}
@media only screen and (max-width:992px){
	#cookie-notice2 {border-radius:0; padding:.5rem;}
	#cookie-notice2 p {font-size:.7rem;}
}

/* -> whatsappAra ve telAra */

.customAra {position: fixed; right: 0; color: #fff; z-index: 5; 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: 100px; }
.telAra {background-color: #fd7e14; bottom: 45px; }

.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: 10rem;}
.customAra:hover span {opacity: 1;}

/* Yanıp sönme animasyonu */
@keyframes blink {0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.1; transform: scale(1.1); }}


/* BACKGROUND - COLOR 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bg-blue {background-color: #4096ca;}
.bg-indigo {background-color: #6610f2;}
.bg-purple {background-color: #6f42c1;}
.bg-pink {background-color: #d63384;}
.bg-red {background-color: #ec1414;}
.bg-orange {background-color: #fd7e14;}
.bg-yellow {background-color: #ffc107;}
.bg-green {background-color: #198754;}
.bg-teal {background-color: #20c997;}
.bg-cyan {background-color: #0dcaf0;}
.bg-white {background-color: #fff;}
.bg-gray {background-color: #eee;}
.bg-gray-dark {background-color: #343a40;}
.bg-primary {background-color: #192d69;} /* 00643c */
.bg-secondary {background-color: #ff431e;} /* 9e783c */
.bg-success {background-color: #198754;}
.bg-info {background-color: #0dcaf0;}
.bg-warning {background-color: #ffc107;}
.bg-danger {background-color: #dc3545;}
.bg-light {background-color: #eee;}
.bg-dark {background-color: #212529;}
.bg-turuncu {background-color: #a50120;}
.bg-black {background-color: #000;}

.color-blue {color: #4096ca;}
.color-indigo {color: #6610f2;}
.color-purple {color: #6f42c1;}
.color-pink {color: #d63384;}
.color-red {color: #ec1414;}
.color-orange {color: #fd7e14;}
.color-yellow {color: #ffc107;}
.color-green {color: #198754;}
.color-teal {color: #20c997;}
.color-cyan {color: #0dcaf0;}
.color-white {color: #fff;}
.color-gray {color: #6c757d;}
.color-gray-dark {color: #202020;}
.color-primary {color: #192d69;}  /* 00643c */
.color-secondary {color: #ff431e;}  /* 9e783c */
.color-success {color: #198754;}
.color-info {color: #0dcaf0;}
.color-warning {color: #ffc107;}
.color-danger {color: #dc3545;}
.color-light {color: #eee;}
.color-dark {color: #212529;}
.color-turuncu {color:#a50120;}
.color-black {color:#000;}