:root {
  --mavi: #3280d3;
  --maviHover: #54a2f5;
  --white: #ffffff;
  --acikGri: #f1f1f1;
  --kirmizi: #dd2020;
  --coolGri: #666666 ;
  --koyuGri: #333333 ;
  --linkAcikGri: #cccccc;
}


html, body { font-size: 16px;   width: 100%; padding: 0; margin:0; font-weight: 400;  font-style: normal; } body
{ color: #000; background:#fff; font-family: 'Open Sans';  display: flex; flex-direction: column; min-height: 100vh;
transition: all .5s; transition-timing-function: ease-out;} 
.playfair {  font-family: "Playfair Display", serif;}
* { transition: all .5s; transition-timing-function: ease-out;} 
* {  line-height: 1.25em; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
  outline:none;  background-repeat: no-repeat; margin: 0; padding: 0; }

#main { flex: 1; }

a {text-decoration: none; color: var(--linkAcikGri);} a:hover { color: #fff; } a.metinIciLink{text-decoration: underline;
font-style:italic; } button, a{cursor: pointer;}

h2 {font-size: 1.8rem; font-weight: normal; color: var(--koyuGri); display: block; text-align: center; font-weight: 600;} h3
{font-size: 1.3rem; font-weight: normal; color: var(--koyuGri); display: block; text-align: center; font-weight: 600;}
.alignc {text-align: center;} .alignl {text-align: left;} .alignr{text-align: right;}
.block {display: block;} .inline-block {display: inline-block;}
.floatR{float:right;} .floatL{float:left;}
.bold{font-weight:bold;} .italic{font-style: italic;} .pointer{cursor:pointer;} p { line-height: 1.75em; text-align:
 justify; letter-spacing: .05em; font-size: 1em;}

.tooltip {   position: relative;   display: inline-block;   }  
.tooltip .tooltiptext {   visibility: hidden;   width: 120px;   background-color: var(--coolGri);   color: #fff;   text-align:
 center;   border-radius: 6px;   padding: 5px 0;   position: absolute;   z-index: 1;   bottom: 125%;   left: 50%;
 margin-left: -60px;   opacity: 0;   transition: opacity 0.3s; }  
.tooltip .tooltiptext::after {   content: "";   position: absolute;   top: 100%;   left: 50%;   margin-left: -5px;
 border-width: 5px;   border-style: solid;   border-color: var(--coolGri) transparent transparent transparent; }  
.tooltip:hover .tooltiptext {   visibility: visible;   opacity: 1; } 
.grid1em2em{display: grid; grid-template-columns: 1fr;align-items: start;}
.gridTumSatir {grid-column: 1/-1;}
.inline-flex {display: inline-flex; align-items: center;}
.oneCikar {color: #000;}
.grid1auto2auto{display: grid; grid-template-columns: auto;}

#header {display: grid; align-items: center; grid-template-columns: 1fr; box-shadow: 0px 1px 2px var(--linkAcikGri);  z-index: 110;}
#header h1, #header h2 {font-size: 1rem; display: flex; text-indent: -100000px; background: var(--acikGri); width: 100%;
 height: 5em; align-items: center; padding-left: 1em; padding-right: 1em; justify-content: center;}
#header h1 {background: #e2e2e2; justify-content: center;}
#header h1 a {display: block; width: 13.25rem; height: 5rem; background-image: url("/files/logo.webp"); background-size: contain; background-position: center;}
#header h2 div {height: 2em; width: 8em; padding-left: 1em; padding-right: 1em; background-image: url("/files/marka-logo.svg"); background-size: contain;}

#haritaBox { padding:0 1em; box-sizing: border-box; max-width: 100vw;}
#mainFilterBox{padding: 1rem 2rem; background: var(--acikGri); box-shadow: 1px 2px var(--linkAcikGri); max-width: 90vw; margin: auto;
 border-radius: .5rem; display: inline-grid; grid-template-columns: auto; gap:1em;}
#mainFilterBox > * {display: flex; align-items: center; justify-content: center;} select {padding: 1em 0; border: 0px
 solid var(--linkAcikGri); background: #fff; color: var(--coolGri); border-radius: .3rem;   border-right: 16px solid transparent; border-left:
 8px solid transparent; font-size: 1rem; } option:disabled {  color: #999; }

button {background: #999; padding: 1em; color: #fff; border-radius: .7em; border: 0; font-size: 1rem;} button:hover
{background: var(--kirmizi);} 

.container { display: block; position: relative; padding-left: 25px; cursor: pointer; font-size: 1rem; 
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-right: 1rem;}
.container input { position: absolute; opacity: 0; cursor: pointer; }
.checkmark { position: absolute; top: .15rem; left: 0; height: 1rem; width: 1rem; background-color: #fff; border-radius:
 50%; }
.container:hover input ~ .checkmark { background-color: var(--linkAcikGri); }
.container input:checked ~ .checkmark { background-color: var(--coolGri); }
.checkmark:after { content: ""; position: absolute; display: none; }
.container input:checked ~ .checkmark:after { display: block; }
.container .checkmark:after { top: .3rem; left: .3rem; width: .4rem; height: .4rem; border-radius: 50%; background:#fff; }
#sehir {grid-column: 1 / -1;}

.acikGri {background: var(--acikGri); color: var(--coolGri); font-size: 1rem; line-height: 1.4rem;}
.acikGri a {text-decoration: none;}
.acikGri a:hover {text-decoration:underline;}
#govde {padding: 2em 1em 1em 1em;}
.max800 {max-width: 800px; margin: 0 auto;}
.flexCenter{display: flex; min-height: 100%; align-items: center; justify-content: center;}


dl {display: grid; grid-template-columns: auto; max-width: 90vw; margin:auto; } dt {margin: 2em 0 1em; font-weight: 600;
font-size: 1.1em; grid-column: 1 / -1;}

dd a {display: inline-flex!important; font-size: 14px; color: var(--coolGri); margin: 0 .5em 1em 0;  align-items: center;}
dd a:hover {color: #999; text-decoration: none!important;} 

dd a::after { content: ">"; transform: scaleX(.5); display: inline-block; padding-left:0.2em; padding-right: .5em;
transition: all .3s; transition-timing-function: ease-out;} dd a:hover::after { padding-left:.5em;
padding-right: .2em;}
.attr, .attr img { height:2em; width:auto; display: inline-block;}
.attr {margin-right: .5rem;}


#gMap {height: 400px; width: 100%;  box-sizing: border-box;z-index: 95; box-shadow: rgba(0, 0, 0, 0.23) 0px 3px 3px;   filter: grayscale(100%) contrast(110%); }
#gMap img.iconMarker {height: 40px;}
.markerTitle {font-size: 14px; font-weight: 600; text-align: left; margin-bottom: .5em;}
.markerLinkBox {display: grid; grid-template-columns: auto auto; align-items: center; }
#markerAltBox {}
.markerLink { display: flex; align-items: center; color:var(--mavi);  }
.markerLink:not(.markergeri)::after { content: ">"; display: inline-block; padding-left:0.2em;}
.markerLink.markergeri::before{ content: "<"; transform: scaleX(.5); display: inline-block; padding-right:0.2em; }
.markerLink:hover { color:var(--maviHover); }
.markerAdres {max-width: 300px; margin-bottom: .5em; font-style: italic; -webkit-user-select: none; user-select: none; /}
.markerTelefonAc, .markerGoogldaAc {display: inline-flex; align-items:center; margin-bottom: 1em;}
.markerTelefonAc::before, .markerGoogldaAc::before, .markerHatabildir::before, .markerAnasayfa::before  {
  display: inline-block; height: 1.5em; width: 1.5em; margin-right: 1em; overflow: hidden; content: ""; 
  background-size: contain; background-repeat: no-repeat; background-position: center center;}
.markerTelefonAc::before {  background-image: url(/files/icon-phone.svg); }
.markerGoogldaAc::before {  background-image: url(/files/icon-googlemaps.svg);}
.markerHatabildir::before { background-image: url(/files/icon-error.svg);}
.markerAnasayfa::before { background-image: url(/files/icon-home.svg);}
.markerIcon {height: 1.5rem; margin: .3em .5em .3em 0;}

#breadcrumbs {color: var(--coolGri); margin: auto; text-align: left; width: 100%; display: block;}
#breadcrumbs a {color: var(--mavi); text-decoration:underline; }
#breadcrumbs a:hover {color: var(--maviHover); text-decoration:underline; }

/* harita */
.svg-turkiye-haritasi {  max-width: 1000px;   margin: 0 auto;  text-align: center; overflow: hidden;}
.svg-turkiye-haritasi svg {  width: 100%;  height: auto;}
.ilInfo {  position: absolute;  z-index: 2;}
.ilInfo div {    display: inline-block;  background: var(--coolGri);  color: #fff; padding: 8px 16px;  -webkit-border-radius:
 4px;  -moz-border-radius: 4px;  border-radius: 4px; }
#svg-turkiye-haritasi path {  cursor: pointer;}
#svg-turkiye-haritasi path:hover { fill: var(--kirmizi);}
#bolge-1 g path{  fill:#5F807F} #bolge-2 g path{  fill:#CFD2D7} #bolge-3 g path{  fill:#AAB5BD} #bolge-4 g path
 {  fill:#839AA0}
#bolge-5 g path{  fill:#AAB5BD} #bolge-6 g path{  fill:#CFD2D7} #bolge-7 g path{  fill:#5F807F}
/* xharita */

#footer{  display: flex; justify-content: space-between; padding: 1em; background:var(--coolGri); align-items: center;
 flex-direction: column;}
#footer #footerLogo {height: 2.5rem;} ul#footerMenu { list-style: none; margin: 1rem 0;} ul#footerMenu li
 { display:inline-block; }
ul#footerMenu a {color: var(--linkAcikGri); font-size: 14px;padding: 0 1em;} ul#footerMenu li:nth-child(n+2) a { border-left: 1px
solid var(--linkAcikGri); }
ul#footerMenu a:hover {color: #fff;}

#crossSiteLinks{ padding:.5rem 2rem ;  display: flex; justify-content: center; list-style: none; align-items: center; 
  box-shadow:  0 1px 3px #999 inset, 0 -1px 3px #999  inset ; flex-wrap: wrap; width: 102vw; left:-1vw; position: relative;
}
#crossSiteLinks #crossBaslik {width: 100%;  font-weight: bold; text-align: center; padding: .5rem .5rem; 
  border-bottom: 1px solid #999; margin: 0 1rem 1rem;}
#crossSiteLinks li, #crossSiteLinks a, #crossSiteLinks img{height: 2rem; display: flex; align-items: center;}
#crossSiteLinks li {margin: 0 1rem .5rem 0; }
#crossSiteLinks .crossSiteTxt {text-indent: -10000px;}

.noktaDetay {background: #e6e6e6; padding: 1rem; box-shadow: 1px 1px 2px var(--linkAcikGri); display: flex; border-radius: .5em;
 font-size: .9rem; flex-direction: column; justify-content: space-between;}
#noktaDetayBox {display: inline-grid; grid-gap: 1rem; grid-template-columns: auto; margin: auto;}
#noktaDetayBox a.markerTel { color: var(--mavi); text-decoration: underline; margin-top: .5em}
#noktaDetayBox a.markerTel:hover {color: var(--maviHover);}
#noktaDetayBox .noktaLinkButon, #noktaDetayBox .markerLink, .noktaBilgiBtn {display: inline-flex; align-items: center; font-size: .9rem;
 background-color: var(--acikGri); padding-left:3rem; padding-right: 2rem; text-align: left; height: 3rem!important; position: relative;
 background-position: .5rem .5rem; background-size: auto 2rem ; background-repeat: no-repeat; border: var(--linkAcikGri) 1px solid; color: rgba(0, 0, 0, 0.85); 
 border-radius: .25rem;  box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
 box-sizing: border-box; width: 100%;}
 .noktaBilgiBtn {padding-left: 1rem; color: var(--mavi);}
#noktaDetayBox .noktaLinkButon {background-image: url('/files/logo-amblem.svg'); margin:0 0 .5em 0;} 
#noktaDetayBox .markerLink  {background-image: url('/files/icon-googlemaps.svg'); margin:0 0 1em 0;}
#noktaDetayBox .markerLink:hover, .noktaBilgiBtn:hover  {text-decoration: none!important;}
#noktaDetayBox .noktaLinkButon:hover, #noktaDetayBox .markerLink:hover, .noktaBilgiBtn:hover { border-color: rgba(0, 0, 0, 0.15);  
  box-shadow:rgba(0, 0, 0, 0.1) 0 4px 12px; color: rgba(0, 0, 0, 0.65); }
#noktaDetayBox .noktaLinkButon:after, #noktaDetayBox .markerLink:after, .noktaBilgiBtn:after{ content:"▸"; position:absolute; right:0; 
   color: var(--mavi); display: flex; background: var(--mavi); color: #fff; height: 100%; width: 1rem; 
  justify-content: center; align-items: center; padding: 0 .5rem;border-radius: 0 .25rem .25rem 0;}
.noktaBilgileri {max-width: 500px; display: inline-block; background: #fff; padding: 1rem; border-radius:.5rem; 
  box-shadow: 1px 1px 2px var(--linkAcikGri);}
.noktaDetay dl {display: block; text-align: left;} 
.noktaDetay dt, .noktaDetay dd{display: inline-block; margin-top:auto; margin-bottom: 0; margin-top: .5rem; font-size:14px;}
#sehirIntro {max-width:692px; margin-right:1rem; padding:2rem;}

h2.metinBaslik {font-size: 1.8rem; padding: 1em 0; font-family: "Playfair Display", serif; font-weight: 400; letter-spacing: .1em;}
h3.metinBaslik {font-size: 1.6rem; padding: 1em 0; font-family: "Playfair Display", serif; font-weight: 400; letter-spacing: .1em;}

/* forms */
input, textarea {    background-clip: padding-box; background-image: none; border: 1px solid #dadbdd;
    border-radius: .5em;  color: var(--coolGri);  line-height: 1;    margin-bottom: 0;   width: 100%;
    padding: 11px 15px;  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; font-size: 1rem;
}
input:focus, textarea:focus{    border: 1px solid #999;}
textarea { grid-column: 1/-1; min-height: 100px; line-height: 1.7rem; font-size: .9em;}
.formbaslik {font-size: 1.5em; font-weight: bold; color:var(--kirmizi); text-align: center;grid-column: 1/-1;}
::placeholder { font-style:italic; opacity: .6; letter-spacing: 0; font-size: .9em;}
/* x forms */

/* iletisim form */
#iletisimForm {width: 100%}
#iletisimFormBox{overflow:hidden; text-align:center;transition: max-height .4s;  position:relative; width: 100%;}
#messageBoard { position:absolute; top:0; left:0; width:100%; height:100%; display: none; background: rgba(241,241,241,.9); grid-column: 1/-1; 
  align-items: center; justify-content: center; border: 1px solid var(--linkAcikGri); box-shadow: 1px 1px 3px #bbb;}
.iletisimBox {  display: grid; grid-template-columns: 1fr; gap: 1em 0; padding: 0 1em;}
.hataMesaji { grid-column: 1/-1; background:var(--kirmizi); padding: .5em; color: #fff; font-weight: bold; font-style: italic; 
  display: none; background-image: url(/files/ikonError.svg); background-size: contain; background-position: left;
  background-repeat: no-repeat;
/* loader */
.loader {width:50px; aspect-ratio: 1; display: grid; border: 4px solid #0000; border-radius: 50%; 
  border-right-color: #25b09b; animation: l15 1s infinite linear; }
.loader::before, .loader::after {content:"";grid-area:1/1;margin:2px; border:inherit; border-radius:50%;animation:l15 2s infinite;}
.loader::after { margin: 8px; animation-duration: 3s;} @keyframes l15{  100%{transform: rotate(1turn)} }

} 
/* x iletisim form */
/* banners */
#exBox{display: block; text-align: center;}
#ex {display: inline-flex; margin:auto; width: auto; position: relative; justify-content: flex-end; 
    flex-direction: column; align-items: flex-end;}
#ex a {display: inline-block; position: relative;}
#ex #bannerImg {max-width: 100%;}
#ex #kapa {display: flex;  background: #333; align-items: center; 
  padding: .2rem .4rem; border-radius: 0; box-sizing: border-box; font-size: 10px;}
/* x banners */

@media only screen and (min-width: 680px) { html, body {  } 
  #header h1 {background: var(--acikGri); justify-content: flex-start;}
  #header h2 { justify-content: flex-end;}
  #sehir {grid-column: 1 / 2;}
  #footer {padding: 1em 2em;}
  #govde {padding: 4em 2em 2em 2em;}
  #footer {flex-direction: row;}
  .noktaDetay {display: inline-flex; width: 330px; margin-right: 1em;}
  #noktaDetayBox {grid-template-columns: auto auto;} }

@media only screen and (min-width: 768px) { 
  #header {grid-template-columns: auto auto;}
  .grid1auto2auto{grid-template-columns: auto auto;}
  #mainFilterBox {grid-template-columns: auto auto auto;} dl { grid-template-columns: auto auto;  max-width: 800px;} 
  .iletisimBox {  grid-template-columns: 1fr 1fr; gap:1em; padding: 0 2em;}
  #iletisimForm {width: auto;}

  #crossSiteLinks #crossBaslik { margin: 0 2rem 1rem;}
}

@media only screen and (min-width: 1200px) { 
  #noktaDetayBox {grid-template-columns: auto auto auto;} 
  #sehirIntro {max-width:1054px;}
}