@font-face {
  font-family: "Chillax";
  src: url("fonts/Chillax-Variable.ttf") format("truetype");
}

:root {
    --ana-renk: dodgerblue;
	--ikincil-renk: #066ac9;
	--soluk-renk: #1f7cd6b8;
	--acik-renk: lightskyblue;
	--acik2-renk: #0085d7;
    color-scheme: light dark;
    --top-gr-c1: light-dark(#eee, black);
    --top-gr-c2: light-dark(#b1b1b1, #515151);
    --bgc: light-dark(white, black);
    --c: light-dark(black white);
}
@media print {
	.no-print{
    	display: none !important;
  	}
  	body{
  		margin: 7px 5px 7px 5px;
  	}
  	#logo_top{
  		height: 125px;
  	}
  	#main_page_div{
  		margin-left: auto;
  		margin-right: auto;
  		width: 90%;
  		max-width: 100%;
  	}
}
#a1_div{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
@page{
	margin: 0px 0px 0px 0px;
	size: A4 portrait;
}

h1, h2, h3, h4, h5, h6{
	font-family: Chillax;
	font-weight: normal;/*lighter*/
}
#etiket_tag{
    padding: 3px 10px 3px 10px;
    background-color: rgb(128 128 128 / 25%);
    border-radius: 30px;
    text-align: left;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    font-size: 15px;
    color: rgba(128, 128, 128, 1);
}
/*
.no-style, .no-style *{
	all: revert;
	all: unset;
	all: inherit;
	all: initial;
	color:var(--c);
}
*/

[data-theme="normal"]{
	--ana-renk: dodgerblue;
	--ikincil-renk: #066ac9;
	--soluk-renk: #1f7cd6b8;
	--acik-renk: lightskyblue;
	--acik2-renk: #0085d7;
}
[data-theme="mavi"]{
	--ana-renk: dodgerblue;
	--ikincil-renk: #066ac9;
	--soluk-renk: #1f7cd6b8;
	--acik-renk: lightskyblue;
	--acik2-renk: #0085d7;
}
[data-theme="kirmizi"]{
	--ana-renk: red;
	--ikincil-renk: darkred;
	--soluk-renk: #fc3d3d;
	--acik-renk: mediumvioletred;
	--acik2-renk: orangered;
}
[data-theme="yesil"]{
	--ana-renk: green;
	--ikincil-renk: darkgreen;
	--soluk-renk: lightgreen;
	--acik-renk: seagreen;
	--acik2-renk: mediumseagreen;
}




@media (prefers-color-scheme: dark){
	body{
		background-color: black;
		color: white;
	}
}
@media (prefers-color-scheme: light){
	body{
		background-color: white;
		color: black;
	}
}

/*
document.documentElement.style.colorScheme = "dark"
document.documentElement.dataset.theme = "yesil"
*/
    

body{
	text-align: center;
	text-decoration: none;
	font-family: "Trebuchet MS", Helvetica, sans-serif;;
}
a{
	color: light-dark(black, white);
}

.top-nav-alar a{
	line-height: 18px;
	font-family: Georgia;
    box-shadow: 0px 0px 10px 2px black;
    border-radius: 10px;
    color: white;
    background-color: var(--ana-renk);
    margin: 6px;
    padding: 9px;
    text-align: left;
    display: block;
    width: 150px;
    margin-left: 15px;
    text-shadow: 0px 0px 5px black;
    background: radial-gradient(var(--ana-renk) 50%, var(--ikincil-renk));
    transition: 0.3s;
}
.top-nav-alar a:hover{
    box-shadow: 0px 0px 10px 2px white;
    border-radius: 12px;
    margin-left: 17px;
    text-shadow: 0px 0px 5px white;
    width: 155px;
    transition: 0.3s;
}
.top-nav-alar a:hover b{
    font-size: 18px;
}

.top-nav-alar a b{
	line-height: 15px;
	text-align: center;
	width: 18px;
	float: right;
}
.top-nav-alar{
	font-size: 16px	;
	height: 100vh;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0px 0px 25px 1px black;
    padding: 5px;
    text-align: left;
    border: 1px solid gray;
    background-color: lightskyblue;
    /*background: linear-gradient(135deg, lightskyblue 500%, #0085d7);*/
    /*background: linear-gradient(135deg, #eee 50%, #b1b1b1);*/
    background: linear-gradient(135deg, var(--top-gr-c1) 50%, var(--top-gr-c2));
    width: 190px;
    position: fixed;
    left: -155px;
}
#top_nav_alar_ok{
	text-align: center;
	box-shadow: 0px 0px 5px 1px black;
    border-radius: 10px;
    margin-top: 20px;
    margin-left: 150px;
    position: absolute;
    width: 25px;
    padding: 5px;
    background-color: var(--ana-renk);
    color: white;
    text-shadow: 0px 0px 5px black;
    border-left: 0px;
    background: radial-gradient(var(--ana-renk) 50%, var(--ikincil-renk));
}

.fadeIN { animation: fadeIn 0.3s linear forwards; }
.fadeOUT { animation: fadeOut 0.3s linear forwards; }

@keyframes fadeIn{
0% { display:block;opacity:0; }
100% { opacity:1; } 
}
@keyframes fadeOut{
0% { opacity:1; }
100% { opacity:0;display:none; } 
}


.sidemenuAcil { animation: sideAcil 0.25s linear forwards; }
.sidemenuKapan { animation: sideKapan 0.25s linear forwards; }

@keyframes sideAcil{
0% { left:-155px; }
100% { left:-10px; } 
}
@keyframes sideKapan{
0% { left:-10px; }
100% { left:-155px; } 
}

.apk{
    z-index: 100;
	font-size: 15px;
	width: 90px;
	border-bottom-left-radius: 10px;
	top: 0px;
	right: 5px;
    border-bottom-right-radius: 10px;
    box-shadow: 0px 0px 25px 10px black;
    padding: 5px;
    text-align: left;
    border: 1px solid gray;
    background-color: lightskyblue;
    background: linear-gradient(135deg, var(--acik-renk)  50%, var(--acik2-renk) );
    position: absolute;
}

#apk_b{ 
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	box-shadow: 0px 9px 15px 1px black;
	margin-top: 5px;
	margin-left: 27px;
	position: absolute;
	width: 25px;
	padding: 5px;
	background-color: var(--ana-renk);
	color: white;
	text-shadow: 0px 0px 5px black;
	border-top: 0px;
	background: radial-gradient(var(--ana-renk) 70%, var(--ikincil-renk));
}
/*
background: -webkit-linear-gradient(180deg, rgba(0,0,252,1) 20%, rgba(0,252,203,1) 65%, rgba(88,252,0,1) 100%);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
  */

body{
	word-wrap: break-word;
	overflow-x: hidden;
	font-size: 18px;
	margin: 0px;
	width: 100vw;
	height: 100vh;
	background-color: var(--bgc);
	color: var(--c);
	line-height: 25px;
}
header{
	margin: 0px;
	/*width: 100%;*/
	width: 99.5%;
	height: 110px;
	top: 0px;
	/*background: linear-gradient(135deg, #efefef 70%, #b1b1b1);*/
	background: linear-gradient(135deg, var(--top-gr-c1) 50%, var(--top-gr-c2));
    border: 1px solid #aaa;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0px 0px 15px 1px;
}
header *{
	text-decoration: none;
}
#main_page_div{
	display: table;
	table-layout: fixed;
	min-width: 70%;
	max-width: calc(100% - 50px/*110px*/);
	width: calc(100% - 50px);
	/*min-height: 90%;*/
	margin-top: 20px;
	/*background-color: #ddd;*/
	margin-left: auto;
	margin-right: auto;
}

#header-img{
	margin: 2px;
	width: 64px;
}

#arama_kutusu{
	padding: 4px;
    margin: 3px;
    border-radius: 5px;
    font-family: Verdana;
    font-size: 14px;
    border: 1px solid #ddd;
    box-shadow: 0px 0px 1px black;
    width: 165px;
}
#araYolla{
	margin: unset;
    font-size: 20px;
    border: unset;
    background-color: unset;
    padding: unset;
}


@media (min-width: 720px){
	#main_page_div{
		max-width: 70%;
	}
	#header-img{
		width: 96px;
		margin: 6px;
	}
	header{
		height: 150px;
	}
}
#logo_top{
	margin-top: 10px;
}
@media (max-width: 720px){
	#logo_top{
		height: 60px;
	}
	#main_page_div{
		margin-left: 50px;
	}
}

.top-nav-user{
	line-height: 17px;
	position: absolute;
	right: 0px;
	top: 5px;
	float: right;
}
.top-nav-user div a{
	font-family: Georgia;
	font-size: 13px;
    box-shadow: 0px 0px 10px 1px black;
    border-radius: 10px;
    color: #dadada;
    background-color: var(--ana-renk);
    margin: 5px;
    padding: 6px;
    text-align: right;
    display: block;
    width: 80px;
    text-shadow: 0px 0px 5px black;
    background: radial-gradient(var(--soluk-renk)  50%, var(--ikincil-renk));
    transition: 0.3s;
}

.top-nav-user div a b{
	line-height: 18px;
	text-align: center;
	width: 18px;
	float: left;
}
.top-nav-user div a:hover{
	color: white;
    box-shadow: 0px 0px 15px 2px white;
    border-radius: 10px;
    text-shadow: 0px 0px 5px white;
    transition: 0.3s;
}
.top-nav-user div a:hover b{
    font-size: 16px;
}

#top-nav-user-in a{
	font-family: Georgia;
	font-size: 13px;
    box-shadow: 0px 0px 10px 1px black;
    border-radius: 10px;
    color: #dadada;
    background-color: var(--ana-renk);
    margin: 5px;
    margin-top: 0px;
    padding: 5px;
    text-align: center;
    display: block;
    width: 50px;
    text-shadow: 0px 0px 5px black;
    background: radial-gradient(var(--soluk-renk)  50%, var(--ikincil-renk));
    transition: 0.3s;
    height: 70px;
    transition: 0.3s;
}

#top-nav-user-in #cikis{
	height: 17px;
}

#top-nav-user-in a:hover{
	color: white;
    box-shadow: 0px 0px 15px 2px white;
    border-radius: 10px;
    text-shadow: 0px 0px 5px white;
    transition: 0.3s;
}


#top-nav-user-in i{
	max-width: 50px;
	max-height: 15px;
	overflow: clip;
    display: block;
	text-align: center;
}

#top-nav-user-in img{
	width: 50px;
}

#temalar{
	margin-left: 15px;
    width: 168px;
    display: block;
    position: static;
    bottom: 20px;
    top: calc(100vh - 450px);
    position: relative;
}

#tema{
	display: inline-block;
	float: left;
	padding: 4px;
    width: 90px;
    border: 1px solid black;
    border-radius: 10px;
    box-shadow: 0px 0px 4px 2px black;
    transition: 0.3s;

}
button, select{
	padding: 4px;
    border: 1px solid black;
    margin: 5px;
    border-radius: 10px;
    box-shadow: 0px 0px 4px 2px black;
    transition: 0.3s;
}
#tema:hover, button:hover, select:hover{
	border: 1px solid white;
	box-shadow: 0px 0px 5px 2px white;
    transition: 0.3s;
}
#sema{
	display: inline-block;
	float: right;

}
#sema a{
	display: inline-block;
	margin: 0px;
	width: 20px;
	padding: 5px;
	background: light-dark(#aaa,#333333);
	text-align: center;
	font-size: 16px;
	line-height: 20px;
}
#sema a:hover{
	border-radius: 10px;
}