html{
	overflow-y: scroll ;
	overflow-x: hidden;}
	body{
		background-color: #e5e5f7;
		opacity: 0.8;
		background-image: radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);	
		background-size: 15px 15px;
		
}
	a{text-decoration: none;}
	

	.panel{
		display: block;
		position: fixed;
		background-color: transparent; /* #292C33; */
		height: 100%;
		width: 100px;
		top: 0px;
		left: 0px;
		float: left;
		z-index:40;
	
	}
	.panel ul{
		background-color: transparent;
		list-style-type: none;
		font-family: courier new;
		margin-top:45px;
		height: auto;
		display: flex;
		flex-direction: column;
		align-content: center;

	}
	.panel ul li{
		position: relative;
		margin-left: -40px;
		border-bottom: px solid #9a8c98;
		height:70px;
		border-radius:0px 5px 5px 0px;
		margin-top:5px;
		display: i;
	}
	
	
	
	
	.panel ul li a{
		text-align: center;
		display: block;
		color: black;
		height: 50px;
		margin-top: 5px;
		margin-left:-0px;
		text-decoration: none;
		border-left: gray solid 0px;
		width: 100px;
		padding-top:15px;
		padding-bottom:5px;
		transition-duration: .5s;
		font-size: 14px;
		border-radius:0px;
		border-top: 0px solid #9a8c98;
		border-bottom: 0px solid #9a8c98;
		z-index:25;
	}
	.panel ul li a:hover{
		transition-duration: 0.5s;
		
	}


	#icon{
	display: block;
	padding-bottom:7px;
	font-size: 25px;

	}
	
	.baski-big{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index:-4;
		opacity: .04;
		display: none;;
	}

	#icon-big-edu{color: var(--color-edu); font-size: 500px; right:50px;}
	#icon-big-exper{color: var(--color-exper); font-size:350px; right:50px;}
	#icon-big-bag{color: var(--color-bag); font-size:350px; right:25%;}
	#icon-big-yetki{color: var(--color-yetki); font-size:350px; right:25%;}
	#icon-big-proje{color: var(--color-proje); font-size:350px; right:400px;}
	
	/* RENKLER  */
	
	:root{
		/*tema renkleri */
		--color-main:rgb(12, 5, 56);
		--color-home: #137383; 
		--color-exper: #C62E65;
		--color-yetki: #cb965e;
		--color-edu:  #c0b20f;
		--color-proje:  #493055;
		--color-bag: #4d9404;
		--color-blog: #f15f04;
		
		/*rgba için*/
		--color-main-rgb: 12, 5, 56;
		--color-home-rgb: 19, 115, 131; 
		--color-exper-rgb: 198, 46, 101;
		--color-yetki-rgb: 203, 150, 94;
		--color-edu-rgb: 192, 178, 15;
		--color-proje-rgb: 73, 48, 85;
		--color-bag-rgb: 77, 148, 4;
		--color-blog-rgb: 241, 95, 4;
		
		--opacity:0.2;
		--opcty-2:0.5;
	}
	
	
	#baslik-main, #pro-main,#cvcolor-main{background-color: var(--color-main);}
	#baslik-home, #pro-home,#cvcolor-home{background-color: var(--color-home); }
	#baslik-exper, #pro-exper,#cvcolor-exper{background-color: var(--color-exper) }
	#baslik-yetki, #pro-yetki, .line-in,#cvcolor-yetki{background-color: var(--color-yetki) }	
	#baslik-edu, #pro-edu, #cvcolor-edu{background-color: var(--color-edu)}
	#baslik-proje, #pro-proje,#cvcolor-proje{background-color:var(--color-proje);}
	#baslik-bag, #pro-bag,#cvcolor-bag{background-color:var(--color-bag) ;}
	#baslik-blog, #pro-blog,#cvcolor-blog{background-color:var(--color-blog) ;}

	#cvcolor-main:hover {background-color:rgba(var(--color-main-rgb), .8);}
	#cvcolor-home:hover {background-color:rgba(var(--color-home-rgb), .8) }
	#cvcolor-exper:hover {background-color:rgba(var(--color-exper-rgb), .8) }
	#cvcolor-yetki:hover {background-color:rgba(var(--color-yetki-rgb), .8) }
	#cvcolor-edu:hover {background-color:rgba(var(--color-edu-rgb), .8) }
	#cvcolor-proje:hover {background-color:rgba(var(--color-proje-rgb), .8) }
	#cvcolor-bag:hover {background-color:rgba(var(--color-bag-rgb), .8) }
	#cvcolor-blog:hover {background-color:rgba(var(--color-blog-rgb), .8) }

	#color-main, #main-line a{color:var(--color-main); }
	#color-home,#home-line a{color:var(--color-home); }
	#color-exper,#tcolor-exper, #exper-line a{color:var(--color-exper) }
	#color-yetki, #yetki-line a{color:var(--color-yetki) }
	#color-edu,#tcolor-edu, #edu-line a {color:var(--color-edu) }
	#color-proje, #tcolor-proje, #proje-line a{color:var(--color-proje) }
	#color-bag, #bag-line a{ color:var(--color-bag) }
	#color-blog, #tcolor-blog, #blog-line a{ color:var(--color-blog) }

	#deneyim-aciklama{
		color:black;
		background-color:transparent;
		margin-left:25px;
		padding-left: 5px;
		padding-right: 100px;
		border-left: 5px solid rgba(var(--color-exper-rgb), 0.5);
		font-style: italic;
	}


	
	/* SAYFA ALT ÇİZGİ */

	/* #sayfa-exper li{border-bottom: 1px solid var(--color-exper)}
	#sayfa-edu li{border-bottom: 1px solid var(--color-edu)}
	#sayfa-proje li{border-bottom: 1px solid var(--color-proje)} */

	.panel ul li:nth-child(1){background-color: rgba(var(--color-main-rgb), var(--opacity));}
	.panel ul li:nth-child(2){background-color: rgba(var(--color-home-rgb), var(--opacity));}
	.panel ul li:nth-child(3){background-color: rgba(var(--color-exper-rgb), var(--opacity));}
	.panel ul li:nth-child(4){background-color: rgba(var(--color-edu-rgb), var(--opacity));}
	.panel ul li:nth-child(5){background-color: rgba(var(--color-yetki-rgb), var(--opacity));}
	.panel ul li:nth-child(6){background-color: rgba(var(--color-proje-rgb), var(--opacity));}
	.panel ul li:nth-child(7){background-color: rgba(var(--color-bag-rgb), var(--opacity));}
	.panel ul li:nth-child(8){background-color: rgba(var(--color-blog-rgb), var(--opacity));}
	
	.panel ul li ul{
		width:100px;
		margin-top:-75px;
		margin-left:102px;
		background-color: black ;
		visibility: hidden;
		transition-duration: 0s;
		
		
	}
	.panel ul li ul li{
		position: relative; 
		margin-top: 4px;
		height: 71px;
		border: 1px solid #9a8c98;
		font-size: 10px;
		border-radius: 0px 2px 2px 0px;
		background-color: black;
		
	}
	.panel ul li ul li a{
	text-align: center;
	transition-duration: 0s;
	margin-left:20px;}
	
	
	.panel ul li:hover ul{
		height: auto;
		visibility: visible;
	}

	.timeline{
		font-family: courier new;
		margin-top: 0px;
		position: relative;
		margin-left: 0%;
		margin-right: 0%;
		
	}
	.timeline ul{
		margin-left: -2%;
		width: 90%;
		}
	.timeline ul li{
		list-style-type: none;
		padding: 10px;
		margin-top: 5px;
	}
	.timeline ul li span{
		padding-left: 10px;;
	}
	.timeline ul li span::before{
		content: " ";
		width: 5px;
		height: 20px;
		display: block;
		position: absolute;
		border-radius: 3px;
		margin-top: -2px;
	}
	.date-exper::before{background-color: var(--color-exper)}
	.date-edu::before{background-color: var(--color-edu)}
	.date-proje::before{background-color: var(--color-proje)}

	.slide{
		position: absolute;
		border-radius:2px;
		width: 7px;
		height: 100%;
		top: 0;
		left: 7px;
		z-index:42;
		transition: 0.3s all ease-in-out;
		transform: translateX(-100%);
		
	}
	#slide-bag{background-color: var(--color-bag)}
	#slide-home{background-color: var(--color-home)}
	#slide-exper{background-color: var(--color-exper)}
	#slide-edu{background-color:var(--color-edu)}
	#slide-yetki{background-color:var(--color-yetki)}
	#slide-proje{background-color:var(--color-proje)}
	#slide-main{background-color:var(--color-main)}
	#slide-blog{background-color:var(--color-blog)}
	
	:root{
		--aciksayfa-fon: ;
		--aciksayfa-bg: transparent;
	}
	
	.panel ul li:hover .slide {
		left: 100%;
		transition: 0.3s all ease-in-out;
	}
	
	
	.pro-taban{
		position: absolute;
		/* background-color: #292C33; */
		width: 300px;
		height: 350px;
		top: 0px;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 5px 5px 150px 150px;

	
	}
	
	#pro-main{
	margin-top:7px;	}
	

	/* ANA SAYFA SABİT  */
	.main{
		width: 400px;
		position: fixed;
		height: 100%;
		margin-left: -45px;
		background-color: transparent;
		top:0px;
		z-index:3;
		overflow: hidden;
		margin-left: calc(50% - 0px);
		transform: translateX(-50%)
	}
	#yayin-main{
		background-color: transparent;
  		width: calc(100vw - 25px);
		left: 0px;
		overflow-x: hidden;
		
		
	}
	

	#sayfa-main{
		overflow: hidden;
		animation-name: belirme;
  		animation-duration: 5s;
}

		@keyframes belirme {
  		from {opacity: 1;}
  		to {opacity: 1;}
}
	#main-hidden {
			display: block;
			transition-duration: 0.5s;
		}

	
	.profil{
		width: 340px;
		position: fixed;
		height: 100%;
		right: 0%;
		top:0px;
		z-index:3;
		overflow: visible;
		border-top: solid 7px transparent;
		
	}
	#pro-blog-yayin{
		display: none;
	}
	.avatar{
		position: relative;
		margin-top: 50px;
		width:300px;
		height:300px;
		border-radius: 50%;
			
	}
	.doner{
		display:block;
		position: absolute;
		top:11px;
		left:11px;
		width:270px;
		height:270px;
		background-color: transparent ;
		transform-origin: center;
		animation: donence 50s linear infinite ;
		transform: translate(-50%, -50%) rotate(0deg);
		border-radius:50%;
		border-top: 6px solid white;
		border-right: 6px solid white;
		border-bottom: 6px solid white;
		border-left: 6px solid transparent;
		animation-direction:alternate;
		
	}
	
	#doner-dis{
		top:26px;
		left:26px;
		width:240px;
		height:240px;	
		animation: donence-dis 50s linear infinite ;
		animation-direction:alternate;
		
	}
	


	@keyframes donence-dis {
		0%   {transform: rotate(0deg)}
		100% {transform: rotate(-720deg)}
		}
	@keyframes donence {
		0%   {transform: rotate(45deg)}
		100% {transform: rotate(720deg)}
		}

	
	.resim {
		position: absolute;
		width:210px;
		height:210px;
		border-radius:50%;
		border:0px solid white /*#333333*/;
		transform: translate(-50%, -50%);
		margin-left:50%;
		margin-top:50%;
		overflow: hidden;
	}
	.resim img{
		/* transform: scale:(0); */
		margin-top:5px;
		margin-left:5px;
		position: relative;
		width:200px;
		transform: scale(1.);
		transition-duration:0.5s;
		border-radius:50%;
	}
	.resim img:hover{
		transform:scale(1.1);
		transition-duration:0.5s;
	}
	
	.ad-soy{
		position: relative;
		font-style: normal;
		font-weight: bold;
		font-family: courier new;
		text-align: center;
		margin-top: 410px;
	}
	.ad-soy h1{
		font-size: 35px;
	}
	.ad-soy h2{
		margin-top: -15px;
		font-size:16px;
	}
	
	.sosyal{
		position: relative;
		background-color:transparent;
		margin-top: 30px;
		align-items: center;
		
	}
	.sosyal a{
		width: 30px;
		height: 30px; 
		padding: 10px;
		background-color: transparent;
		font-size: 20px;
		border-radius: 35%;
		transition-duration: 0.5s;
		transform: scale(1);
	}
	.sosyal a:hover i{
		opacity: 0.6;
		transition-duration: .5s;
	}
	.down-cv{
		display: block;
		position: relative;
		width: 70%;
		border-radius: 5px 5px 5px 5px;
		left: 50%;
		top: 5%;
		height:auto;
		transform: translateX(-50%);
		text-align: center;
		padding: 10px;
		color: white;
		transition-duration: 0.5S;
		font-size: 15px;
		font-family: courier new;
		

	}
	.down-cv:hover{
		background-color: transparent;
		transition-duration: 0.5S;

	}
	
	#attach{
		float:right; position: absolute; font-size: 25px; top:-1px; left:5px; color: white ;transform: rotate(-15deg);transition-duration: 0.5s; 	}
		
	.down-cv:hover #attach {
		color: white;
		transition-duration: 0.5s;
		transform: rotate(0deg);
		top: -30px;
		opacity: 0;
				
	}
	.kanepe {
		position: relative;
		background-color: transparent;
		width: 300px;
		height: 150px;
		margin-top:50px;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 0px 0px 0px 0px;
	}

	#kanepe-main{
		background-color: transparent;
		animation: yukari ease-out;
		animation-duration: 1s;
		animation-iteration-count: 1;

	}
	
	@keyframes yukari{
		from {margin-top:100%;}
		to {margin-top:50px;}

	}

	.down-cv:hover .kanepe {
		
		
		bottom: 0px;
		left: 200px;
		transform: translateX(-50%);
		border-radius: 150px 150px 0px 0px;

	}
	
	/* YAYIN KODLARI */
	
	.yayin{
		background-color: transparent ;
		position: relative;
		width: calc(100vw - 510px );
		z-index:5;
		color: black;
		top:0px;
		left: 100px;
		transform: translateX (100%);
		
	}
	
	#yayin-blog-yayin{
		width: calc( 100% - 75px);
	
	}

	.sayfa{
		background-color: transparent  ;
		width: 100%;
		padding:0 5px 5px 5px;
		position: relative;
		right: 0px;
		top:0%;
		height:100vh;
		border: solid 0px red;
		overflow-y: scroll ;
		overflow-x: hidden;
		text-overflow:ellipsis;  	
		
	}

	
	.baslik, .ozgecmis{
		position:relative ;
		right:0px;
		font-size:16px;
	 	padding:10px 10px 10px 30px;
		color: black;
		line-height: 2;
		width:90%;
		text-overflow: ellipsis;
		font-family: courier new;
		
	}
	
	.iletisim{
		font-family: courier new;
		display:block;
		background-color:rgba(var(--color-bag-rgb), .1);
		margin-top: 20px;
		border: solid 2px var(--color-bag);
		height:75px;
		text-align: center;
		/* width:calc(100% - 35px); */
		width:40%;
		padding:15px 5px 5px 5px;
		border-radius:15px;
		color:black;
		transition-duration:0.5s;
		overflow: hidden ;
		text-overflow: ellipsis; 
		float:left;
		font-weight: bold;

		
	}
	
	#iletisim-ikon{
		font-size:25px;
		display: block;
		
	}
	#time-kontak a{
		color: var(--color-bag);
		margin:10px;
		/* background-color: #eda359; */
	}

	#time-kontak a:hover {
		background-color: var(--color-bag);
		transition-duration:0.5s;
		color:white;
		font-weight: bold;

	}
	
	#time-kontak{
		background-color: transparent;
		
	}

	
	.egitim{
		display: flex;
		/* background-color: #5d5d5d; */
		flex-direction: column;
		width:100%;
		padding-left:15px;
		border-bottom: 1px solid rgba(8, 186, 168, 0.28);
	}
	
	.egitim:nth-child(n+2) {
		margin-top:10px;
	}
	.egitim span{
		position: absolute;
		margin-left:-15px;
		background-color: #444444;
		border: solid 0px white;
		border-radius:5px 5px 5px 5px;
		padding:2px 4px 2px 4px;
		transform: translateX(-100%);
		width:85px;
	}
	
	.ozgecmis #paragraf{
		display: flex;
		text-align: center;
		background-color: #444444;
		padding: 5px;
		width:100%;
		color: green ;
	}
	#bagla3{
		 overflow-y: scroll;
		 height: calc(100vh - 250px);
		 
	}
	#bagla-skill{
	position: relative;
	float: left;
}

::-webkit-scrollbar {
  width: 0px;
}
::-webkit-scrollbar-track {
	/* border: 1px  solid var(--color-home); */
  box-shadow: inset 0 0 0px grey; 
  border-radius: 0px;
}
::-webkit-scrollbar-thumb {
  /* background: var(--color-home);  */
  border-radius: 0px;
}


.baslik-co{
	font-family: 'Courier New', Courier, monospace;
	color: #fff;
	padding: 5px 5px 5px 30px;
	width: calc(100% - 100px);
	position: relative;
	left: 0px;
	text-align: left;
	align-items: left;
	justify-content: left;
	border-radius: 5px;
	font-size: 22px;
	display: flex;
	overflow-x: hidden;
	
	
}


.skill-card{
	margin-top: 5px;
	padding: 10px;
	/* box-shadow: 0px 1px 6px -2px gray ; */
	border-radius: 15px;
	

}

.skill-card:nth-child(n+2){margin-top: 45px;}

.skill-head{
	width: 550px;
	color: var(--color-yetki);
	font-weight: bold;
	text-align: center;
	font-size: 18px;
	padding: 5px;
	border-bottom: 0px solid white;
}

.gosterge{
	max-width: 550px;
	padding: 10px 10px 10px 10px;
	height: 25px;
	margin-top: px;
}
.line{
	background-color: rgba(var(--color-yetki-rgb), var(--opacity));
	position: relative;
	width: 300px;
	height: 15px;
	border-radius: 5px;
	margin-top: 10px;
	float: left;
	margin-left: 5px;
	
}
.line-in{
	position: absolute;
	top: 0;
	left:0;
	/* background-color: #249e6d; */
	height: 100%;
	width: 0%;
	border-radius: 5px;
	overflow: hidden;
	transform-origin: center;
	animation: line-in 1s ease-in;
	

}

@keyframes line-in{
	0% {width:0%;}
}


	
	
.line-head{
	width: 200px;
	color: black;
	margin-top: 10px;
	float:left ;
	height: 15px;
	font-size: 15px;
	font-family: courier new;
	
}

.blog-yayin {
	display:block;
	float: left;
	width: 95%;
	height: auto;
	background-color:transparent;
	margin: 3px 3px;
	overflow: clip;
	padding:0px 10px 5px 0px;
	border-bottom: 1px solid var(--color-blog);
}

.blog-icerik{
	padding-bottom:50px;
}

.blog-icerik p{
	background-color: transparent;
	padding-left:10px;
}

#ozet:nth-child(2n-1){
	background-color: transparent;
}
#ozet:nth-child(2n){
	background-color: transparent;
}

.ozet-baslik{
	width:100%;
	height: auto;
	padding:5px 0px 5px 0px;
	display:block;
	text-align: left;
	font-weight: bold;
	font-size: 20px;
	color:var(--color-blog);
	border-radius: 0px 15px 15px 0px;
	margin-left:10px;
}

.ozet-baslik::before{
	content: "  ";
	display: inline-block;
	margin-left: -10px;
	width: 5px;
	height: 20px;
	background-color: var(--color-blog);
	position:absolute;

}

.ozet-icerik{
	background-color: transparent;
	max-height: 250px;
	display:block ;
	padding: 10px 0px 0px 20px;
	margin-top:5px;
	width:100%;
	font-size:16px;
	overflow: hidden;
	
}
.ozet-img{
	background-color: transparent;
	float:left;
	padding:10px 10px 10px 0px;
	max-height:150px;
	width: auto;
	margin-top:-10px;
	
}
.devam{
	background-color: transparent;
	display: flex;
	
}
.devam::after{
	content: "yazının devamı... ";
	position: relative;
	/* right: 150px; */
	color:var(--color-blog);
	color: black;
	border:rgba(var(--color-blog-rgb), var(--opacity)) 2px solid;
	padding:2px 15px;
	font-style: italic;
	border-radius: 7px;
	margin-top: 10px;

}
.icerik-tarih{
	position: relative;
	display:block;
	color:var(--color-blog);
	padding:2px 5px;
	border-radius: 2px;
	font-size:15px;
	text-align: left;
	margin-left: 10px;;
}

.tag{
	float: right;
	background-color: rgba(var(--color-blog-rgb), var(--opacity));
	margin-left: 3px;
	padding: 2px 15px;
	border-radius: 7px;
	color:var(--color-blog);
	font-size:14px;

}
.table-kitap{
	border-collapse: collapse;
	width:100%;
}

.table-kitap td,th{
	border-bottom:2px solid white;
	padding:5px;
}
.table-kitap th{background-color: #C62E652a; text-align: center;}
.table-kitap td:nth-child(1){width: 150px;}
.table-kitap td:nth-child(2){width:auto; border-left:2px solid white; border-right:2px solid white}
.table-kitap td:nth-child(3){width:30px}

.tanitim { background-color:rgba(var(--color-blog-rgb), var(--opacity));}
.tanitim td:nth-child(1){font-weight: bold;}

.alinti{background: #249e6d2a;}
.alinti td:nth-child(1){font-size: 16px;text-align: right;vertical-align: top;padding-right: 10px; color:red;font-style: italic;}
/* .alinti td:nth-child(2){} */
.alinti td:nth-child(3){font-size: 14px; vertical-align: bottom;text-align:right}

.notlar{background: #a2ef074d;}
.notlar td:nth-child(1){font-size: 16px;text-align: right;vertical-align: top;padding-right: 10px; color:red;font-style: italic;}



#yirmi  	{width: 20%;}
#yirmi-bes	{width: 25%;}
#otuz		{width: 30%;}
#otuz-bes	{width: 35%;}
#kirk		{width: 40%;}
#kirk-bes	{width: 45%;}
#elli		{width: 50%;}
#elli-bes	{width: 55%;}
#altmis		{width: 60%;}
#altmis-bes	{width: 65%;}
#yetmis		{width: 70%;}
#yetmis-bes	{width: 75%;}
#seksen		{width: 80%;}
#seksen-bes	{width: 85%;}
#doksan		{width: 90%;}
#doksan-bes	{width: 95%;}
#yuz		{width: 100%;}

@media (max-width:850px){
		.yayin{
			left:110px;
			background-color:transparent ;
			text-overflow: ellipsis;
			width:85%;
			z-index:-1;
			
		}
	
		.panel ul{
			margin-top: 0px;
		}
		.panel ul li{height: 50px;}
		.panel ul #icon{display: none}

		.profil{
			display: none;
			width:0px;
			position: absolute;
			margin-left:1000px;
		}
		#main-hidden {
			display: block;
		}
	}
@media (max-width:1100px){
	.skill-head{
		text-align: left ;
		height:30%;
		border:0px solid transparent;}
}