* {margin:0px; padding:0px; box-sizing:border-box}
html,body{width:100%;min-height:100%}
img {border:none;max-width:100%;height:auto;vertical-align: middle}
a {text-decoration:none}
h1,h2,h3,h4,h5,h6{font-weight:bold;font-size:calc(1em + 0.55vw)}
ul.nomarr, ol.nomarr {list-style-type:none;margin:0;padding:0}
summary{cursor:pointer}

.dskyok{display:none}
.mblyok{display:unset}
@media all and (max-width: 480px) {.dskyok{display:unset} .mblyok{display:none} }

.temizle {clear:both;}
.ufak{font-size:calc(1em - 0.2vw)}
.kucuk{font-size:calc(1em - 0.1vw)}
.buyuk{font-size:calc(1em + 0.4vw)}
.hizala{margin-left:auto;margin-right:auto}
.ortala{text-align:center}
.hatakutusu {border: red 5px solid;margin: 25px 0;padding: 10px;background-color: #ffd9d9;text-align: center;color: red;font-weight: bold}

#sosyalpaylasim li {position:relative;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;display: inline-block;margin: 5px;width: calc(90% / 5);min-width: 50px;height: 50px;line-height: 1px;text-align: center;border-radius: 7px} #sosyalpaylasim li a svg {fill: #ffffff;width: 85%;height: 85%;padding: 5px;margin:3px;border-radius:2px} #sosyalpaylasim li a span {display:none} #sosyalpaylasim li.paylas-facebook{background-color:#306199} #sosyalpaylasim li.paylas-facebook:hover{background-color:#244872} #sosyalpaylasim li.paylas-tumblr{background-color:#32506d} #sosyalpaylasim li.paylas-tumblr:hover{background-color:#22364a} #sosyalpaylasim li.paylas-linkedin{background-color:#007bb6} #sosyalpaylasim li.paylas-linkedin:hover{background-color:#005983} #sosyalpaylasim li.paylas-twitter{background-color:#26c4f1} #sosyalpaylasim li.paylas-twitter:hover{background-color:#0eaad6} #sosyalpaylasim li.paylas-pinterest{background-color:#b81621} #sosyalpaylasim li.paylas-pinterest:hover{background-color:#8a1119} #sosyalpaylasim li.paylas-instagram{background-color:#125688} #sosyalpaylasim li.paylas-instagram:hover{background-color:#0c3a5b} #sosyalpaylasim li.paylas-whatsapp{background-color:#43d854} #sosyalpaylasim li.paylas-whatsapp:hover{background-color:#28c039} #sosyalpaylasim li.paylas-xing{background-color:#005A5F} #sosyalpaylasim li.paylas-xing:hover{background-color:#002a2c}
#sosyalpaylasim li .psayac {position: absolute;top: -5px;right: -5px;background-color: #fff;height: 20px;line-height: 17px;padding: 0 4px;border: green 2px solid;font-size: 9px;font-weight: bold;border-radius: 7px}@font-face {
  font-display: swap; 
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 400;
  src: url('/tasarim/roboto_flex_regular.woff2') format('woff2'),
       url('tasarim/roboto_flex_regular.woff') format('woff');
}

:root {
	--renkbir: #07143a;
	--renkiki: #726569;
	--renkuc: #1573a1;
}

body{font-family: 'Roboto Flex', sans-serif;font-size:1.1em}
a {color:#022485}
p {margin-bottom:7px}
header{position:sticky;z-index:9999;top:-1px;background-color:var(--renkbir);border-bottom: var(--renkiki) 10px solid}
	header.sticky {height: 60px;overflow: hidden}
	header.sticky #header {gap: 0}
	header.sticky #logo {width: 130px;height: 45px;margin: 5px 0}
	header.sticky #logo span:first-child{font-size: 1.1em;letter-spacing: 1px}
	header.sticky #logo span:nth-child(2){font-size: 0.45em;letter-spacing: 2.5px}
	header.sticky #ustmenu {line-height: 20px;font-size: 0.8em}
fieldset {border: none}
h2,h3,h4,h5,h6,h7{color:#2f4f4f;margin:20px 0}
.baslik{padding-left:2%;font-size: calc(1em + 0.55vw);color:var(--renkiki);font-weight:bold}
#header {display: grid;align-items: start;grid-template-areas:'logo menu';grid-template-columns: min-content;gap: 10px;}
	#logo {grid-area: logo;width:300px;height:75px;margin:5px 0}
		#logo * {transition: all 750ms}
		#logo a {display:block}
		#logo span {white-space:nowrap}
		#logo span:nth-child(2) {display: block;color: #A3A3A3;text-align: right;font-size: 0.9em;letter-spacing: 5px;border-bottom: #ccc 1px solid}
	#ustmenu {grid-area: menu;color:#fff;text-align:right;line-height:90px}
		#ustmenu span {transition: all 750ms;padding: 7px 10px;display: inline-block;border-bottom: var(--renkbir) 5px solid}
		#ustmenu span:hover {border-bottom: #fff 5px solid}
		#ustmenu span a {color: #fff}
/* #menuac {display:inline-block;cursor: pointer;font-size: 3em;padding: 5px;position: relative;top: 11px} */
#menuac {cursor:pointer}
#kategorimenusu {transition:all 750ms;opacity:0;position: fixed;z-index: -99;top: 0;left: 0;background-color: rgb(0 0 0 / 90%);width: 100vw;height: 100vh}
body.menuacik #kategorimenusu {opacity:1;z-index:99}
#kategorimenusu nav {position:relative;margin: 20vh 25vw;background-color: #fff;padding: 20px;border-radius: 10px}
#kategorimenusu nav div.holder {width: 100%;max-width: 420px;margin: 0 auto}
#kategorimenusu nav #menukapa {margin:0;position: absolute;display: inline-block;top: -10px;right: -10px;cursor: pointer;background-color: var(--renkiki);width: 26px;height: 26px;line-height: 25px;text-align: center;font-weight: bold;border-radius: 100%;border: #000 1px solid;padding: 0 6px;box-shadow: #000 -2px 3px 10px -2px}
#kategorimenusu nav .menubaslik {font-weight: bold;font-size: 1.2em;border-bottom: #000 1px solid;padding-bottom: 5px}
#kategorimenusu nav span {display: block;margin: 11px 0}
footer {background-color:#303030;margin-top:45px;margin-bottom:100px;padding:2% 0;color:#fff}
	footer ul {list-style-type:none;column-count: auto;column-width: 280px;break-inside: avoid-column}
	footer li{margin-bottom:30px}
	footer .fbaslik {font-size:1.2em;border-bottom:#fff 1px solid;margin-bottom:15px;display: inline-block;padding-right: 25%}
	footer span {display:block;min-width: 48px;margin-bottom:12px}
	footer a {color:#A3A3A3;font-size:0.9em}
	footer #sosyalaglar {background-color: #fff;border-radius: 15px;padding: 12px;display: inline-block;filter: drop-shadow(0px 4px 10px black)}
	footer #sosyalaglar p {display: inline-block;margin: 6px}
	footer #sosyalaglar svg {vertical-align: middle;transition: all 750ms;padding: 3px}
	footer #sosyalaglar p:hover svg {padding: 0}
.tamgenislik {display:block;width:95%;max-width:1200px;margin:0 auto}
.aragenisalan {width: calc(100vw - 10px);position: relative;left: 50%;right: 50%;margin-left: -50vw;margin-right: -50vw;background-color: #b8d1d1}
.butonlastir {cursor: pointer;font-weight: normal;border: #ccc 1px solid;border-radius: 5px;transition: all 750ms;line-height: 25px;padding: 4px 7px !important;height: 35px;background-color: #2ea44f !important;display: inline-block;color: #fff !important}
.butonlastir:hover {box-shadow: #888 5px 5px 10px -5px;text-shadow: #000000 0px 0px 3px}
#tasiyici {width:95%; max-width:1200px;margin: 0 auto; display: grid; align-items: start; grid-template-areas: 'ustalan ustalan' 'icerikalan yanalan'; grid-template-columns: auto; gap: 10px}
#tasiyici #ustbilgiler {grid-area: ustalan}
#tasiyici #iceriktasiyici {grid-area: icerikalan;/*width:calc(100vw - 35px);*/max-width:890px;overflow-x:auto}
#tasiyici #listeler {width:300px;max-width:300px; grid-area: yanalan;position:sticky;top:0}
#tasiyici.full {grid-template-areas:'ustalan' 'icerikalan' 'yanalan'}
#tasiyici.full #iceriktasiyici, #tasiyici.full #listeler {width:100%; max-width:100%}
#aramaformu {margin:10px 0;display: inline-block;width: 100%;max-width: 400px}
#aramaformu legend {display:none}
#aramaformu fieldset{position:relative}
#aramaformu input#q {color: var(--renkiki);outline: none;font-weight: normal;border: #ddd 1px solid;border-radius: 5px;transition: all 750ms;line-height: 25px;padding: 5px 5px 5px 40px;height: 35px;width:100%}
#aramaformu input#q:focus{outline: none;box-shadow: #888 5px 5px 10px -5px;border-bottom: #9a370d 1px solid}
#aramaformu button{position: absolute;left: 5px;top: 4px;border: none;background-color: transparent;font-size: 20px}
.htasiyici{padding: 7px;border: #ccc 1px solid;margin-bottom: 15px}
.htasiyici h1 {margin-bottom:10px}
.htasiyici p.altbaslik{color:var(--renkuc);margin-bottom:10px}
.htasiyici p.altbaslik2{font-size: 0.8em;color: #333}
#sayfayolu {font-size: 0.7em;white-space: nowrap;overflow-x: auto}
#sayfayolu a {font-weight:unset}
#sayfayolu span:before{content:"🔗"}
#sayfayolu span {display: inline-block;margin-bottom: 7px;margin-right: 10px}
#icerikkunye figure{text-align:left !important}
#icerikkunye table {width: 100%;border: #e9c4b5  1px solid}
#icerikkunye td, #icerikkunye th {padding: 10px}
#icerikkunye th {white-space:nowrap}
.related img {transition: all 300ms}
.related img:hover {filter: drop-shadow(0px 0px 5px #000)}
.related section {display: inline-block;width: calc(calc(100% - 42px) / 3);overflow:hidden;padding: 7px;margin: 7px}
.related hgroup {height:50px;line-height:25px;overflow:hidden}
.related picture, .related a {display:block}
.related h3, .related h4, .related h5, .related h6, .related h7 {font-size: 1em;margin: unset}
.related hgroup a {color:var(--renkuc);font-weight:bold}
.related div {line-height: 35px;height: 35px;color: #5f5f5f;font-size: 0.9em;font-weight: bold}
.related div.detay {font-size: 0.8em;line-height: 1.3em;font-weight: normal;color: #000;height: 6.5em;overflow: hidden;border-bottom: #eee 2px solid}
@media all and (max-width: 960px) {
	#tasiyici {grid-template-areas: 'ustalan' 'icerikalan' 'yanalan'}
	#header {display:block;text-align:center}
	#header #logo{width:unset;display:inline-block}
	#header #ustmenu {text-align:center;line-height:30px}
	#tasiyici #listeler {position: static;display: block;width: 100%;max-width: unset;border: #888 1px solid;padding: 3%;margin: 3% 0;box-shadow: #888 0px 1px 10px 3px;background-color: #dcdfda}
	#oylama legend {background:#dcdfda !important}
	#oylama label {background:#dcdfda}
	#tasiyici #iceriktasiyici {width:100%}
}
@media all and (max-width: 820px) {
	header{position:static}
	.related section {width:calc(calc(100% - 28px) / 2)}
	footer #sosyalaglar {display:block;width: 90%;margin: 0 auto;text-align: center;padding: 4px}
}
@media all and (max-width: 480px) {
	.related section {display:block;width:100%;margin: 7px 0}
}#cerezpolitikasi {text-align:center;transition: all 1.5s ease-in-out;position:fixed;z-index:9999;left:2%;bottom:2%;border-radius:10px;width:320px;background-color:#000000;background-color:rgb(0 0 0 / 75%);color:#ffffff;padding:1%;box-shadow: #000 0px 0px 10px 0px}
#cerezpolitikasi * {font-family:Helvetica;font-size:12px;line-height:15px;}
#cerezpolitikasi span.clspad{padding:4px}
#cerezpolitikasi.aktif{left:0}
#cerezpolitikasi.kapali{left:-310px}
#cerezpolitikasi.kapali #cerezgizlegoster{display: block;position: absolute;top: calc(50% - 20px);right: -13px;width: 40px;height: 40px;background-color: #000;color: #fff;font-size: 50px !important;border-radius: 100%;padding: 9px 0 0 4px;cursor: pointer}
#cerezpolitikasi.kapali:hover {left:0}
#cerezpolitikasi.kapali:hover #cerezgizlegoster {zoom:0.5}
#cerezpolitikasi .gizli {display:none}
#cerezgizlegoster{display:none}
#cerezkapat{cursor: pointer;color: #fff;background-color: #000;position: absolute;top: -10px;right: -10px;border: #fff 1px solid;padding: 4px 7px;border-radius: 100%}
#cerezozellestirdiv{transition: all 1.5s ease-in-out;height:1px;overflow:hidden;text-align:left;color:#000;background-color: #f0f0f0;border-radius: 10px;padding:0px;}
#cerezozellestirdiv input[type="checkbox"] {width:15px;height:15px}
#cerezozellestirdiv label {font-weight:bold}
#cerezozellestirdiv.aktif {height:340px;padding:15px}
#cerezozellestirdiv.kabul {height:1px;padding:0px}
#cerezpolitikasi .tus {transition:all 250ms;text-align:center;padding:5px;border-radius:3px;cursor:pointer;display:inline-block;min-width: 110px;border: #ccc 1px solid;color:#fff}
#cerezpolitikasi .tus:hover {box-shadow: #888 5px 5px 10px -5px;text-shadow: #000000 0px 0px 3px}
#cerezpolitikasi .notral {background-color: #804D0A}
#cerezpolitikasi .kabul {background-color: #008000}
#cerezpolitikasi .ret {background-color: #ff0000}
/* diğer sayfalar */
.cerezizinuyarisi {position:relative;display: block;width: 100%;height: 100%;border:orangered 1px dashed;background-color: #fff8f8;text-align: center;color: orangered;text-shadow: #818181 1px 1px 2px}
.cerezizinuyarisi:before {content:attr(data-before);display:block;padding:10px}
.cerezizinuyarisi:after {content:attr(data-after);font-weight:bold}
.cerezizinuyarisi .cerezizintusu {cursor: pointer;display: block;padding:10px}
.cerezizinuyarisi .cerezizintusu:before{display:block;content:attr(data-izin);}
.cerezizinuyarisi .cerezizintusu:after{display:block;content:attr(data-after);}
.cerezizinuyarisi:before, .cerezizinuyarisi .cerezizintusu, .cerezizinuyarisi:after{position: relative;top: 35%}/*anasayfa.css*/
#tasiyici {grid-template-areas:'ustalan' 'icerikalan'}
#tasiyici #iceriktasiyici{max-width: 1200px}

.girisbuyukleri {}
.girisbuyukleri .cbuyuk, .girisbuyukleri .ckucuk {display: inline-block;width: 49.5%;height: 400px;border: #888 1px solid;overflow:hidden}
.girisbuyukleri .ckucuk {width: 24.5%}
.girisbuyukleri a {display: block;width: 100%;height: 100%;position: relative}
.girisbuyukleri img {height: 100%;width: auto;max-width: unset;filter: brightness(0.4);transition: all 500ms}
.girisbuyukleri span {padding:10px;position: absolute;color: #fff}
.girisbuyukleri .cbaslik {bottom: 25px;font-weight: bold}
.girisbuyukleri .czaman {bottom: 75px;font-size:0.8em}


figure#varsayilangorsel {display: block;text-align: center;padding: 3%}
#sayfagorselleri picture {display:inline-block;width:calc(96% / 4);height:auto}

section.icerik figure {text-align:center}
section.icerik figure:not(.full) img {display: inline-block;width: calc(95% / 2);height: auto;padding: 1%;margin: 1%;border: #ccc 1px solid;transition: all 750ms}
section.icerik figure:not(.full) img:hover{box-shadow: #888 0px 0px 10px -4px;filter: brightness(0.7)}

figcaption {position:relative;width: 80%;margin: 0 auto;text-align:center;font-size:0.8em;color:#595959;z-index:1;overflow:hidden;padding: 1% 0;font-style: oblique}
figcaption:after, figcaption:before {content:"\a0";position:absolute;top:51%;width:100%;height:2px;background-color:#ccc;text-align:right}
figcaption:before{margin-left: calc(-100% - 15px)}
figcaption:after{margin-left: 15px}

.icerik {padding: 2%;text-align: justify;line-height: 1.7em}

.ricerik {display: block;margin: 15px 0;border-bottom: #888 1px solid;padding-bottom: 12px}
.ricerik a {display: block;margin-top: 12px}

.related hgroup:first-child, 
.girisbuyukleri hgroup:first-child {background: linear-gradient(180deg, rgba(0,0,0,0) calc(50% - 2px), var(--renkiki) calc(50%), rgba(0,0,0,0) calc(50% + 2px) );display: block}
.related hgroup:first-child h2, 
.girisbuyukleri hgroup:first-child h1 {position: relative;top: -9px;margin-left: 5%;padding: 0 15px;display: inline-block;background-color: #fff}

@media all and (min-width: 960px) {
	.girisbuyukleri img:hover {filter: brightness(1);margin-left: calc(50% - 350px)}
}
@media all and (max-width: 960px) {
	.girisbuyukleri img {filter: brightness(1);margin-left: calc(50% - 350px)}
}
@media all and (max-width: 820px) {
	.girisbuyukleri .cbuyuk, .girisbuyukleri .ckucuk {height:200px}
	.girisbuyukleri img {margin-left: calc(50% - 175px)}
	.girisbuyukleri .cbaslik {font-weight: unset;width: 100%;background-color: #000;position: absolute;bottom: 0;left:0;height: 35px;font-size: 0.7em;white-space: nowrap}
	.girisbuyukleri .czaman {display:none}
	.girisbuyukleri .ckucuk {width: 24.2%}
}
@media all and (max-width: 480px) {
	.girisbuyukleri .cbuyuk {display:block;width:100%;max-width:460px;height:unset;margin:0 auto;text-align:center;margin-bottom:17px;border:none}
	.girisbuyukleri .cbuyuk img{width:100%;height:auto}
	.girisbuyukleri .ckucuk {width:49.3%}
	.girisbuyukleri .cbuyuk img {margin-left: 0}
}