:root {
 --koyuMavi: #163f5e;
 --mavi:#084c61; 
 --acikMavi: #9fcbdc;
 --sari:#ffc857;
 --gri: #e5e5e5;
}
html, body {width: 100%; min-height: 100%; margin: 0; padding: 0; box-sizing: border-box; 
	background: var(--mavi); font-size: 16px;}
* {  font-family: 'Raleway', 'Verdana', sans-serif; line-height: 1.25em; box-sizing: border-box; 
	scroll-margin-top: 7rem; outline:none;}

.alignc {text-align: center;} .alignl {text-align: left;} .alignr {text-align: right;}

h2 {font-size: 1.625em; line-height: 1.15em; font-weight: normal; color: var(--mavi); letter-spacing: .2em; 
	font-size: 2em; text-align: center;    }
h2.pageTitle { border-bottom: 1px solid #555; padding: 1rem;}
h2.disi { color: var(--acikMavi)!important;}
h2.pageTitle.disi { color: var(--acikMavi)!important; border-bottom: 1px solid var(--acikMavi)!important;}
h3.koyuZemin{color: white ; text-shadow: 1px 1px 1px var(--koyuMavi); font-weight: 600; letter-spacing: .2em; 
	background: #033051; padding: .5em 1em; display: inline-block; margin: 0;}
p.h3Aciklama {color: white ; text-shadow: 1px 1px 1px var(--koyuMavi); margin: .5em 1em;}
p.subH3Aciklama {color: white ; text-shadow: 1px 1px 1px var(--koyuMavi); margin: 1em; font-weight: 600; letter-spacing: .2em;}

a, button {text-decoration: none; color: inherit; cursor: pointer; font-size:1rem; }
a {letter-spacing: .05em;}
button {position: relative;}
p, li { color: #666; letter-spacing: .05em; line-height: 1.6em; }
ul {list-style: none; padding: 0; margin: 0;}

div {overflow: hidden;}
.upTabletOnly, .upTabletOnlyInline {display: none;}
.padd2mob1 {padding: 1rem;}
.marg2mob1 {margin: 1rem;}
.span2mob1 {display: grid; grid-template-columns: auto; padding: 0rem; gap: 0rem;}
.spanFullRow{grid-column: 1/-1;}


.koyuTaban {background-color: var(--mavi); }

/* header */
#mainmenu {position: fixed; top: 0; left: 0;  display: grid; width: 100%; 
	grid-template-columns: 1fr; padding: 0; margin: 0;   justify-items: center; z-index: 100; }
#mainmenu li{height: 3.5rem; display: flex; align-items: flex-end; width: 100%; padding: .5rem 1rem; }
#mainmenu a, #mainmenu button {display: flex; align-items: flex-end;color: #fff; width: 100%;}
#mainmenu a:hover, #mainmenu button:hover {color: var(--sari);}
#mainmenu span, #mainmenu button {width: 100%; text-align: center; }	
#mainmenu img {height: 1.5em; margin-right: .5rem;}	
#mainmenu a:hover  img { filter:sepia(74%) saturate(2316%) hue-rotate(314deg) brightness(80%) contrast(101%);}
#logo, h1 { display:flex; position:fixed; top:.5rem; left:.5rem; height:3rem; width:3rem; align-items: center; 
	justify-content: flex-start; z-index: 110; margin: 0; padding: 0; align-items: flex-end;}
#logo img {height:3rem; width:3rem;}
#mobilMenuLink {position: fixed; top: 1rem; right: .5rem; background: var(--koyuMavi); 
	z-index: 111; display: flex; align-items:center; justify-content:center; border:none; 
	padding:5px; border-radius:5px; }
#mobilMenuIcon {height: 1.3rem; transition: .25s transform ease-out; }

#mobilMenuIcon {transform: rotate(0deg);}
.mobilMenuAcik #mobilMenuIcon { transform: rotate(45deg);}
#mainmenu {max-height: 0; overflow: hidden; transition: .25s max-height ease-out; }
.mobilMenuAcik #mainmenu {max-height: 24rem; }
#mainmenu #flagImg {height:1.2rem; margin-bottom: .2rem; transition: .25s height ease-out; }
/* x header */

/* footer */
#footerSection {background: var(--koyuMavi);}
#footerMenuBox { display:grid; grid-template-columns: 1fr; }
h3.sitemapBaslik {display: flex; font-weight: normal; letter-spacing: .1em; color: #fff; 
	padding: .5rem; background: rgba(255, 255, 255, .1); font-size: .9em; align-items: center;}
h3.sitemapBaslik img {height: 1.375em; width: auto; margin-right: .5rem;}
.sitemapLinkBox { padding-left: 20px;}
.sitemapLinkBox li {list-style: none; margin-bottom: .5rem;}
#footerSection .sitemapLinkBox a {color: var(--acikMavi); font-size: .8rem; font-style: italic;}
#footerSection .sitemapLinkBox a:hover {color: #fff;}
.sitemapLinkBox a::before {content: ''; width: .2em; height: .2em; border-style: solid; border-width: 0 .1em .1em 0;
 border-color: transparent var(--acikMavi) var(--acikMavi) transparent; display: inline-block; -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); margin-right: .5em; margin-bottom: .1em;}
#footerContactBox {display: grid; grid-template-columns: 1fr; gap:1rem;}
#footerAddress {display: grid; grid-template-columns: auto; gap: 1rem; margin:1rem }
#footerSection * {font-size: .8rem; color: #fff;}
#haritaLink { display:block; height:13rem; width:100%; background-image:url('/files/icerikGorselleri/haritaGorsel.png'); background-size: cover; background-position:center center; }
#footerContactBox button.koyuButton {padding: .5em 2em .5em 1em; background: var(--mavi); border-width: 0; position: relative; float: right; text-align: left; box-shadow: 1px 1px black ; margin: 1px; color: var(--acikMavi);}
#footerContactBox button.koyuButton:hover { color: white ;}
#footerContactBox input, #footerContactBox textarea {border: 0; border-bottom: var(--mavi) solid 1px; 
	border-right: var(--mavi) solid 1px; background: rgba(255, 255, 255, .1); 
	color: white ; padding: 1em; box-shadow: white .1em inner; margin-bottom: .5em; width: 100%; display: block;}
#footerContactBox textarea {height: 10em;}
::placeholder { color: var(--acikMavi); font-style: italic; font-size:.8rem; }

.BU::after {content: url('/files/icons/iconSagUcgen.svg'); position: absolute; right: 1em;}
.BU:hover::after {content: url('/files/icons/iconSagUcgenDolu.svg'); position: absolute; right: 1em;}

/* mavi üçgenli */
.MU::after {content: url('/files/icons/iconSagUcgenMavi.svg'); position: absolute; right: 1em;}
.MU:hover::after {content: url('/files/icons/iconSagUcgenMaviDolu.svg'); position: absolute; right: 1em;}

/* mavi üçgen başta */
.MUB::before {content: url('/files/icons/iconSagUcgenMavi.svg'); position: absolute; left: .5em;}
.MUB:hover::before {content: url('/files/icons/iconSagUcgenMaviDolu.svg'); position: absolute; left: .5em;}

.koyuButton { background: rgba(22, 63, 94, .7); border: 1px rgba(255,255,255,.2) solid; padding: .75em 3.5em .75em 1.5em; color: white ; display: block; font-style: italic;}
.koyuButton:hover { border: 1px rgba(255,255,255,.3) solid; }

.acikButton { background-color: var(--gri);  padding: .5em 2.5em .5em 1em; display: block; color: var(--mavi); 
  text-shadow: none!important; box-shadow: 1px 1px #b4b4b4; font-style: italic;}
.acikButton:hover { background-color: #dce6e5; }
.hizmetButton {border-left: 6px var(--mavi) solid;}
.uygulamaButton {background: var(--gri); border-left: 6px var(--koyuMavi) solid;}
.ortala { display: inline-block; position: relative; left: 50%; transform: translateX(-50%); margin: .5rem auto; }
#menuBackground {display: block; width: 100%; z-index: 80; position: fixed; top: 0; left: 0; z-index: 95; 
	transition: background-color .5s ease-out,  height .5s ease-out, border-color .5s ease-out;
	background-color: var(--koyuMavi); height: 4rem; border-width: 0 0 1px 0; border-style:solid; }
#topHeading {display: block; width: 100%; height: 4rem; }
.anasayfa #menuBackground {background-color: transparent; border-color: rgba(255, 255, 255, 0);}
.anasayfa.scrolled #menuBackground { background-color: var(--koyuMavi); border-color: rgba(255, 255, 255, 1);}
.anasayfa #topHeading {display: none;}

.stickyBack {padding: 1rem; background-color: white ; min-height:10rem; 
 position: relative; background-attachment: fixed; background-position: center;
 background-repeat: no-repeat; background-size: cover; 
 background-image: url("/files/backgrounds/stickyMainHizmetler.jpg");
}
.whiteBack {background-image: url("/files/backgrounds/stickyMainHizmetler.jpg");}
.blueBack {background-image: url("/files/backgrounds/stickyMainReferanslar.jpg");}
/* x footer */

/* Akordiyon */

.accordion { display: flex; flex-direction: column; width: 100%;  margin: 0 auto; }
.accordion-item { border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; background-color: #fff; }
.accordion-header { display: flex; justify-content: space-between; background-color: #f2f2f2; 
	letter-spacing: .3em; font-weight: normal; font-size: 1.1em; align-items: center; cursor: pointer;
	padding: .75em 1em;  margin: 2px 0 0; color: var(--koyuMavi);  transition: .5s ease-in-out;
}
.accordion-header::before {content: url('/files/icons/iconSagUcgenMavi.svg'); order:2; margin-left: auto;}
.accordion-header:hover, .accordion .accordion-header.aktif {background-color: var(--mavi); color: white ;}
.accordion-header:hover::before, .accordion-header.aktif::before {content: url('/files/icons/iconSagUcgen.svg'); float: right;}

.accordion-icon { font-size: 20px; font-weight: bold; transition: transform 0.3s ease; }
/* Aktif Durum Stilleri */ 
.accordion-header[aria-expanded="true"] { background-color: #e9ecef; }
.accordion-header[aria-expanded="true"] .accordion-icon { transform: rotate(45deg); }
.accordion-collapse { padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height 1s ease-out, padding 1s ease; }
.accordion-header[aria-expanded="true"] {background-color: var(--mavi); color: white ;}
.accordion-header[aria-expanded="true"] + .accordion-collapse { max-height: 2500px; padding: 20px; }
#ekipmanlar .accordion-collapse  {background: #e2e2e2; } 
.accordion-collapse ul.ekipmanListe {padding: 0; display: grid; grid-template-columns: repeat(auto-fit, 300px);
	justify-content: center; justify-items: center; gap: 20px; list-style: none; margin: 0;}
.accordion-collapse ul.ekipmanListe li {width: 100%;}
/* end Akordiyon */

/* Slideshow */
#slideshow { margin: 0; overflow: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%;z-index: 10101; background: rgba(0,0,0,.95); display: none; justify-content: center; align-items: center; transition: opacity 0.5s;}
/* [THE SLIDES] */
#slideshow, #slides img { width: 100%; height:100%;}
#slides img {
 /* OBJECT-FIT: PLAY WITH WHICHEVER WORKS BEST */
 /* fill | contain | cover | none | scale-down */
 object-fit: fill; transition: all 1s; visibility: visible; opacity: 1;}
#slideshow img.ninja { visibility: hidden; opacity: 0.3;}
#slide-left, #slide-right, #slide-caption, #slide-close { position: absolute;}
#slide-left, #slide-right, #slide-close { font-size: 2em; color: white ; background:rgba(0,0,0,.3);
 padding: .1em .2em; top: 40%; transition: opacity 0.5s; opacity: 0.7; transform: scaleY(3);}
#slide-left:hover, #slide-right:hover, #slide-close:hover { cursor: pointer; opacity: 1;}
#slide-left { left: 0; }
#slide-right { right: 0; }
#slide-close { right: 0.5rem; top:0.5rem; transform:none; width: 1em; height: 1em; display: flex; align-items: center; justify-content: center;}
#slide-caption { width:100%; bottom:1em; left:0; background:rgba(0,0,0,.7); color: white ; padding:1em; font-size:1.5em; text-align: center;}
/* end Slideshow */

#breadCrumbs {margin: 0 2rem 2rem 0;}
#breadCrumbs p {color: #666;}
#breadCrumbs a {display: inline-block; font-size: .9em; text-shadow: none; color: var(--mavi);}
#breadCrumbs span:last-of-type {font-weight: bold; color:var(--mavi);}
#breadCrumbs .sep { display: inline-block; content: ''; width: .4em; height: .4em; display: inline-block;
 border-style: solid; border-width: 0 1px 1px 0; border-color: transparent var(--koyuMavi) var(--koyuMavi) transparent;
 transform: rotate(-45deg); margin-right: .4em; margin-left: .1em;}

/* ana sayfa */
header {padding: 1em; width: 100vw; height: 80vh; max-height: 50vw; overflow: hidden; color: white ;}
header.subPage {height: 5em; position: relative; display: block;}
header section {width: 100%; display:none;}
header .butonBox { display: none;}
#mainHizmetler a {text-align: center; display:block; margin-bottom: .1em;}
#mainHizmetler span { color: var(--mavi);}
#mainHizmetler span::before { content: "\A"; white-space: pre;}
.hizmetOku {display: none;}


/* ekipmanlar */
#ekipmanlar .akordiyonIcerik {background: #e2e2e2; padding: 0 2%;}
#ekipmanlar ul li {box-shadow: #999 0.1em 0.1em 0.1em; margin: 1em 1% 1em 0%; background-color: var(--mavi); color: white ;}
#ekipmanlar ul li .picBox {background: white ; padding: 0; margin: 0; overflow: hidden;}
#ekipmanlar ul li div {text-align: center; padding: .5em ;}
#ekipmanlar ul li div.model {font-weight: 600;}
#ekipmanlar ul li div.adi {line-height: 1.3em; min-height: 4em;}
#ekipmanlar ul li table {padding: 1em; color: white ; font-size: .9em; width: 100%;}
/* x ekipmanlar */

/* hizmetler */
.hizmetIkonuBuyuk {width: 6rem;}
.hizmetIkonuKucuk {height: 1.5rem; padding-right: 1rem;}
.hizmetList a.hizmetListGovde {display: none; grid-template-columns: 7rem auto;}
.hizmetList a.more {width: 90%;}
.hizmetBox h2 {font-size: 1.5em; text-align: left!important; letter-spacing: .02em;}

 .hizmetBox .faaliyetIkonu {width: 6em; height: auto; margin-right: 1em; float: left;}
/* x hizmetler */
/* projeler */
ul.lister { border: 0px white solid; float: none!important;}
ul.lister::after { content: ""; display: table; clear: both;}
ul.lister li { border: 0px white solid; float: left; margin: 1px; display: inline-block; overflow: show; position: relative;}
ul.lister li figure {display: block; width: 100%; margin: 0; padding: 0;}
ul.lister li a {display: block;}
ul.lister li a span {line-height: 1.2em;}
ul.lister li a img, ul.lister li img {width: 100%; height: 100%; float: left; cursor: pointer;  aspect-ratio: 1 / 1;}
ul.lister figcaption {display:none;}
ul#anasayfaEkipmanListe li {background: #f2f2f2;}
/* x projeler */

/* proje */
.maviBox { background: var(--koyuMavi); display: inline-block; padding: 1em; margin: 0 0;}
.maviBox h4 { color: var(--sari); font-weight: normal; letter-spacing: .2em; margin: 0; padding: 0 0 .5em 0; border-bottom: 1px white solid; text-align: center; font-size: 1.2em;}
.maviBox * { color: white ;}

.maviBox dl { width: 100%;}
.maviBox dt, dd { float: left; padding: .1em; margin: .1em .1em .4em .1em;}
.maviBox dt { width: 6em; font-style: italic; color: var(--sari);}
.maviBox dd { width: calc(100% - 7em); color: #eea;}
.prevNext {display: block; padding: .2em 1em .2em 1em; color: var(--mavi); text-align: left; 
	font-style: italic; font-size: .9rem;}
.prevNext:hover {color: var(--koyuMavi);}
.prev {padding-left: 1.5em;}
.next {padding-right: 2em;}
.prev::before { transform: rotate(180deg);}
.prevNext span {font-weight: 600;}

mark { background:none; font-weight: bold; color:inherit; letter-spacing: .1em; color: rgba(40,82,110,.9);}
/* x proje */
	/* about us */
	.girisMetni p, .girisMetni li { margin-top: 0; color: #666; letter-spacing: .05em; line-height: 1.6em;}
	.girisMetni li { list-style-image: url('/files/check3.svg'); list-style-position: outside; margin: 0 1em .5em;}
	#calisanlarPics {display: block;; align-items: center; position: relative;}
#calisanlarList { display: flex; justify-content: center; flex-wrap: wrap; width: 100%; z-index: 12;}
#calisanlarList li {display: inline-block; margin-right: 1.5em; margin-bottom: .2em; overflow: hidden; padding: 0; }
#calisanlarList li img {height: 10em; cursor: pointer; transition: filter .4s ease-in-out;
 -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: .6;}
#calisanlarList li img:hover {-webkit-filter: grayscale(0%); filter: grayscale(0%); opacity: 1;}

#calisanDetay {background: rgba(50, 82, 108, .96); position: fixed; min-width: 80%; left: 50%;
 -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
 top: 50%; display: none; opacity: 0; z-index: 12000; transition: 0.4s; align-items: center; padding: 2em; margin:2em;
 border: 1px white solid; box-shadow: 1px 1px 2px rgba(50, 82, 108, .5); max-height: 90%; overflow-y: scroll; font-size:.9em;
}
#calisanDetay div { color: white ; display: block; z-index: 12000; line-height: 2em;}
#calisanlarList hr {width: 100%; height: 0; border: none; display: none;}
#calisanPic {float:left; height:12em; margin: 1em 1em 1em 0;}
#calisanIsmi, #calisanGorevi {text-align: center; display:inline-block;}
#calisanIsmi {font-weight:bold; letter-spacing: .2em; white-space: nowrap;}
#calisanGorevi {font-style:italic;}
#calisanMetni {color: #ccc!important; margin:1em 0; letter-spacing: .1em; font-size: .9em!important; display: inline!important;}
#calisanOkullar {}
.calisanButton {background:none; color: white ; border: none; margin-top: 2rem; font-size:.8rem; opacity:.6;}
.calisanButton:hover {opacity:1;}
#calisanDetayKapat {height:3em; width:auto; cursor:pointer; position: absolute; right: 1em; top: 1em;}

#politikalar * {text-align: justify;}

#politikalar h3 .h3icon {display: inline-block; height:1.3em; width: 1.2em; margin-right: .7em; background-repeat: no-repeat; background-size: contain;}
#politikalar h3#kalite .h3icon {background-image: url('/files/icerikGorselleri/iconPolitikaKalite.gif');}
#politikalar h3#cevre .h3icon {background-image: url('/files/icerikGorselleri/iconPolitikaCevre.gif');}
#politikalar h3#guvenlik .h3icon {background-image: url('/files/icerikGorselleri/iconPolitikaGuvenlik.svg');}
#politikalar h3#kalite.accordion-header[aria-expanded="true"] .h3icon, #politikalar h3#kalite:hover .h3icon {background-image: url('/files/icerikGorselleri/iconPolitikaKaliteB.gif');}
#politikalar h3#cevre.accordion-header[aria-expanded="true"] .h3icon, #politikalar h3#cevre:hover .h3icon {background-image: url('/files/icerikGorselleri/iconPolitikaCevreB.gif');}
#politikalar h3#guvenlik.accordion-header[aria-expanded="true"] .h3icon,#politikalar h3#guvenlik:hover .h3icon {background-image: url('/files/icerikGorselleri/iconPolitikaGuvenlikB.svg');}

#politikalar ul {clear: both;}
#politikalar li {margin-bottom: 1em; margin-left: 2em; text-indent: -1.2em;}
#politikalar li::before {content: " "; display: inline-block; border: .2em solid; border-color: red; font-size: .8em; height: 0; overflow:hidden; margin-right: 1em;}
#cevre + div li::before {border-color: #4f7522;}
#guvenlik + div li::before {border-color: var(--koyuMavi);}

#yayinlarBox {display: flex; flex-wrap: wrap; justify-content: space-around; overflow: visible;}
.yayinBox { box-sizing: border-box; margin: 0 1px 1px 0; color: var(--koyuMavi); position: relative; overflow: visible;}
.yayinBox a {background-color: white ; letter-spacing: .12em!important; background-image: url('/files/icons/iconSagUcgenMaviDolu.svg'); background-repeat: no-repeat; background-size:auto 1em ; background-position: right 1em center; padding: 1.5em 3em 1.5em 1.5em; display: block;}
.yayinBox a:hover {background-color: var(--koyuMavi); color: white ; background-image: url('/files/icons/iconSagUcgenDolu.svg'); background-repeat: no-repeat; }
.yayinAdi {font-weight: 600; overflow: hidden;}
a:not(.mouseover) .yayinAdi::first-letter { float: left; font-size: 2.6em; line-height: 1em; margin-right: .1em;}
.yayinDetayi {font-style: italic; overflow: hidden; opacity: .4;}
.yayinBox .mouseover {background-color: var(--koyuMavi); color: white ; padding: 1.5em 2.5em 1.5em 1.5em; top: 0; position: absolute; width: 100%; z-index: 5000; display: none;}
.yayinBox:nth-last-child(-n+2) .mouseover {top: auto; bottom:0;}

.yayinBox:hover .mouseover .yayinAdi {font-weight: normal;}

ul#mainMusteriler {overflow: hidden; padding: 0; display: flex; justify-content:space-around; 
align-items: center; flex-wrap: wrap; margin-top: 1em; height: 12em; background-color: var(--mavi);}
ul#mainMusteriler li {width: 10rem; margin-right: 2px; height: 6rem; background-color: none;}
ul#mainMusteriler.lister li a {display: block; width: 100%; height: 3rem; background-repeat: no-repeat; 
background-size: contain; background-position: center center; background-color: var(--mavi);}

@media only screen and (max-width: 500px) {
	html, body {font-size: 14px;}
}

@media only screen and (max-width: 600px) {
	a {display: block; margin: 0; padding: 0; position: relative; }
	#mainmenu li{ background-color:var(--koyuMavi); border-bottom:1px solid #fff; }


 /* mainpage content */

 .hizmetContainer div:first-child {flex-direction: column;}
 #mainHizmetler a {text-align: left; width: 100%; display: flex; align-items: center;}
 #mainHizmetler a span:not(.upTabletOnlyInline) {display: flex; align-items: center; }
 #mainHizmetler img { max-width:5em; max-height: 2rem; float: left; width: 5rem;}
 .geoteknikUygulamalar {padding: 1em 0;}
 .geoteknikUygulamalar span {justify-content: center; width: 100%;}
 .geoteknikUygulamalar img {display: none;}
 ul#anasayfaEkipmanListe li { width:49%; margin: 0 1px 1px 0; float: left; }
 ul#anasayfaEkipmanListe figure { display: flex; align-items: center;}
 ul#anasayfaEkipmanListe { margin-left: 3%;}
 ul#anasayfaEkipmanListe li a {display: block; background: rgba(95, 129, 152, .1);}
 ul#anasayfaEkipmanListe li a:hover {display: block; background: rgba(95, 129, 152, .3);}
 .geoteknikUygulamalar {text-shadow: none!important; font-size: 1.2em!important;}
 a.acikRenk {text-shadow: none!important; background-color: #edf7f6; box-shadow: 1px 1px #b4b4b4; margin-right: 1px; font-weight: 600; min-height: 3.2em;}
 a.acikRenk:hover { background-color: #dce6e5;}

 /* mobilde beyaz üçgenli */
 .MBU::after {content: url('/files/icons/iconSagUcgen.svg'); position: absolute; right: 1em;}
 .MBU:hover::after {content: url('/files/icons/iconSagUcgenDolu.svg'); position: absolute; right: 1em;}

 /* mobilde mavi üçgenli */
 .MMU::after {content: url('/files/icons/iconSagUcgenMavi.svg'); position: absolute; right: 1em;}
 .MMU:hover::after {content: url('/files/icons/iconSagUcgenMaviDolu.svg'); position: absolute; right: 1em;}


 /* end mainpage content */

	#calisanlarList hr:nth-of-type(2n) {display: block;}
	.yayinBox { width: calc(100% - 1px); text-shadow: none!important;}
	/* ana sayfa */
	header {height: 12em; overflow: visible;}
	#mobileHakkindaMenu ul li { display: block; width: 50%; float: left;}
	.sticky-mainHeader {display: none;}
	.mainHeaderMobilBox { display: block; }
	.mainHeaderMobil { background-image: url("/files/backgrounds/header0mobil.jpg"); background-position: 0 bottom; background-size:cover; display: flex; width: 100vw; height: 40vw; flex-direction: column; align-items: center; justify-content: space-around; }
	.mainHeaderMobil p { text-align: center; font-size: 1.2rem; color:var(--sari);  letter-spacing: .2em; 
	text-shadow: 1px 1px 0 var(--koyuMavi), -1px 1px 0 var(--koyuMavi), 1px -1px 0 var(--koyuMavi), -1px -1px 0 var(--koyuMavi);}
	.sticky-mainHizmetler { background-image: url("/files/backgrounds/stickyMainHizmetlerMobil.jpg"); }
	.sticky-mainReferanslar { background-image: url("/files/backgrounds/stickyMainReferanslarMobil.jpg");}
	.sticky-mainEkipmanlar { background-image: url("/files/backgrounds/stickymainEkipmanlarMobil.jpg");}

 ul.lister:not(.liInline) li {float: none; width: 100%}
 ul.lister li a {height: 6em;width: 100% ; background-color: rgba(200, 200, 200, .2);}
 ul.lister li img {height: 6em; width: auto!important;}
 ul.lister li a span {display: flex; height: 100%; flex-direction: column; padding: .5em 1rem; color: white ; 
 	justify-content: center; letter-spacing: .1em; padding-top: 1em;}
 ul.lister li a:hover {background-color: rgba(158,203, 220, .5);}
 ul.lister.koyu li a {color: var(--mavi); background-color: #edf7f6; position: relative; border-right: var(--mavi) solid .3em; 
 	border-left: var(--mavi) solid .3em; border-bottom: var(--mavi) solid 1px;}
 ul.lister.koyu li a span {color: var(--mavi); }
 ul.lister.koyu li a:hover {background-color: rgba(158,203, 220, .5);}
 .thumbMetni {color: white ; display: block; clear: both;}



}
@media only screen and (min-width: 600px) {
 .upTabletOnly {display: block;}
 .upTabletOnlyInline {display: inline;}
 .mobileOnly, .mobileOnlyInlineBlock, .nonTabletInline {display: none;}
 .padd2mob1 {padding: 2rem;}
 .marg2mob1 {margin: 2rem;}
 .span2mob1 { grid-template-columns: auto auto; gap: 2rem;}
 

	
	/* footer */
	#footerMenuBox { grid-template-columns: 1fr 1fr 1fr; max-width: 880px; margin: auto; }
	h3.sitemapBaslik {background: none;}
	.sitemapLinkBox { padding-left: 10px;}
	#footerContactBox { grid-template-columns: 2fr 1fr; gap:2rem; max-width: 880px; margin: auto; }
	#footerAddr {order:3;}
	#footerFax {order:2;}
	#footerAddress {grid-template-columns: auto auto; gap: 0 1rem; }
	#footerAddr {order:2;}
	#footerFax {order:3;}
	
	/* ana sayfa */


  .mainHeaderMobilBox {display: none;}
   header.subPage {height: 12em; }
   header  h3 a{ font-size:1.25em!important; display: inline-block; text-align: center;}
   header img.slideButton {height: 5em; text-shadow: .1em .1em .1em var(--koyuMavi); cursor: pointer; margin: 1.5em; padding-top: 2em;}
  header .manset { font-size: 1.2em; font-weight: normal; text-shadow: 1px 1px 2px var(--koyuMavi); color: var(--sari); padding-top: 2em; padding-left: 3em; opacity: 0; animation-fill-mode: forwards;
  animation-name: sliderTransitionH3; animation-duration:2s; animation-delay: 1s; }
  @keyframes sliderTransitionH3 { from {padding-left: 3em; opacity: 0; } to {padding-left: 0; opacity: 1;} }

  header .aciklama {font-size: .7em; color: var(--acikMavi);}
  header .butonBox { display:block; position:absolute; bottom:1em; left:0; z-index:80; text-align:center; width:100%;}
  header .butonBox div {display:inline-block; margin-right:.5em; height:.6em; width:.6em; border:1px #999 solid;
  border-radius: 100%;}
  header .butonBox div.active { background: #999 ;}
  header section.aktifHeader {display:block;}

  .geoteknikUygulamalar {max-width: 240px;}
  #headerSlider {
    position: relative; width: 100vw; height: 80vh; max-height: 50vw; overflow: hidden;
    display: flex; justify-content: space-between; align-items: center; background-color: var(--mavi);
  }
  /* Background layer styling */
  .bg-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; 
    background-repeat: no-repeat; transition: opacity 1.2s ease-in-out; 
  }
  /* Ensure content stays above the background */
  #slidesContainer, .slideButton, .butonBox { z-index: 10; }
  .headerSliding { animation: sliderTransition 2.5s forwards; }
  @keyframes sliderTransition { from { background-size: 130% auto; } to { background-size: 100% auto; } }


 .sticky-mainHeader { display: block; padding: 0;}
 .sticky-mainHizmetler { background-image: url("/files/backgrounds/stickyMainHizmetler.jpg"); }
 .sticky-mainReferanslar { background-image: url("/files/backgrounds/stickyMainReferanslar.jpg");}
 .sticky-mainEkipmanlar { background-image: url("/files/backgrounds/stickymainEkipmanlar.jpg");}

 .sticky-subPageHeaderhakkinda { background-image: url("/files/backgrounds/stickyMainReferanslar.jpg");}
 .sticky-subPageHeaderhizmetler { background-image: url("/files/backgrounds/stickySubpageHizmetler.jpg");}
 .sticky-subPageHeaderprojeler { background-image: url("/files/backgrounds/stickyMainReferanslar.jpg");}
 .sticky-subPageHeaderekimpanlar { background-image: url("/files/backgrounds/stickyMainReferanslar.jpg");}

  .hizmetContainer {align-items: center; display: flex; justify-content: space-between;}
  .hizmetContainer img {max-height: 8em;}



  /* hizmetler */
	.hizmetList a.hizmetListGovde {display: grid;}
	.hizmetList a.more {width: auto;}
	.hizmetMetni { overflow: hidden; line-height: 1.6em; font-size: 1em; color: #666; text-align: justify;
	 display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
	.hizmetMetni:hover { color: black ; }
	/* projeler */
  ul.lister li {width: calc(16.66% - 2px); aspect-ratio: 1 / 1; overflow: hidden;}
	ul.lister figure {width: 100%; height: 100%; aspect-ratio: 1 / 1;}

	ul.lister li:hover span {display: flex; width: 100%; height: 100%; flex-direction: column; position: absolute; top: 0; left: 0; background-color: rgba(3,48,81,.93); padding: .5em; color: white ; text-align: center; justify-content: center; letter-spacing: .1em; line-height:1.2em;}
	ul.lister li:hover span > div {font-weight: 600;}
	ul.lister li:hover span { font-size:.9em!important;}
	ul.lister figcaption { display: flex; color: white ; font-size: .9em; line-height: 1.2em; padding: .5em; position: absolute; bottom:0; width: 100%; background-color: rgba(3,48,81,.8); min-height: 2.5em; justify-content:center; align-items: center; text-align: center;}
	ul.lister li span {display: none;}
	#anasayfaEkipmanListe figcaption {position: relative; font-size: .7em;}

	ul#anasayfaEkipmanListe li {background-color: rgba(95, 129, 152, .15);}
	.inline { display: inline-block; margin: .5em .4em .2em 0; position: relative; letter-spacing: 0;}
	/* proje */
	.maviBox { float: right; margin: 0 0 2em 2em;}
	.maviBox dl { width: 19em;}
	.maviBox dd { width: 6em;}
	.maviBox dd { width: 12em; color: #eea;}
	#filtreBox { width: 100%!important;}
	


 #calisanlarList hr:nth-of-type(4n) {display: block;}
 #calisanPic { height:21em; margin-right: 1em;}
 #calisanDetay div { display: block; z-index: 12000;}

 .yayinBox { width: calc(50% - 1px);}
 .yayinBox:hover .mouseover {display: block;}
 a:not(.mouseover) .yayinAdi {white-space: nowrap; text-overflow: ellipsis;}
 a:not(.mouseover) .yayinDetayi { white-space: nowrap; text-overflow: ellipsis; }


}

/* laptop: çoğunlukla 1280 - 1400 arasında*/
@media only screen and (min-width: 880px) { 
	.nonTabletInline {display: inline;}
	.nonLaptop {display: none;}
	/* header */
	#menuBackground {position: fixed; top: 0; left: 0; z-index: 95; background-color: var(--koyuMavi); border-color: rgba(255, 255, 255, 1);
		height: 7rem;}
	#topHeading { height: 7rem;}
	.scrolled #menuBackground { height: 4rem; }
	#mainmenu {height: auto; grid-template-columns: auto auto auto auto 3rem 3rem; 
		 left: 0; width: 100dvw; padding-left: 7rem;   padding-bottom: 1rem; max-height: 7rem; }
	#mainmenu li{height: 6rem; transition: .5s height ease-out;}
	.scrolled #mainmenu li {height: 3.5rem; }
	#mainmenu li * {transition: .5s font-size ease-out;}
	.scrolled #mainmenu li * {font-size: .8rem;}
	#logo, h1 { display:flex; position:fixed; top:1rem; left:1rem; height:4.5rem; width:5rem; 
	justify-content: flex-start; z-index: 110; margin: 0; padding: 0; align-items: flex-end;}
	#logo img { height:4rem; width: auto;}
	#logo,  h1,  #logo  img { transition: .5s height ease-out, .5s top ease-out, .5s left ease-out; }
	#mainmenu #flagImg {height:1.3rem; }
	.scrolled #mainmenu #flagImg {height:1.1rem; }
	.scrolled h1, .scrolled #logo img,.scrolled a#logo {height:2.5rem; top: .5rem; left: .5rem;}
	#mainmenu li {width: auto;}
	#mobilMenuLink {display: none;}
	
	/* x header */
	.whiteBack {padding: 2rem; }
	p.h3Aciklama {display: inline-block;}

}