@charset "utf-8";
/* CSS Document */
body{
	margin:0;
	padding: 0;
	display:flex;
	flex-direction: column;
	align-items: center;
	
}

.menu_bar{
	height: 80px;
	width: 100%;
	background-color: #073f68;
	margin-top: 20px;
	display:flex;		
	justify-content:center
	
}


.logo{ 
	margin-top: 2px;
	
}
.logo img{
	height: 75px;
	margin-left: 10px;
}

.menu {
	
	/*  border: 1px solid red;	 */
	
}
.menu ul li{
	
	list-style-type:none;
	display: inline-block;
	padding: 5px;
	margin: 5px;
		
}

.menu a {
	display:block;
	color :#e9e3e4;
	background-color: #073f68 ; /* rgba(3,31,65,0.6); */
	font-size: 20px;
	text-decoration: none;
	box-sizing: border-box;
	border:1px solid white;
	border-radius: 10px;
	padding: 10px;
	transition: 0.5s;
}

.menu a:hover{
	color :navy;
	background-color:white;
	box-shadow: 0 8px 8px 0 rgba(0,0,0,0.5);
	/* gölgenin yatay ve dikey yansıması, bulanıklığı, yayılması ve rengi  */
}

/* 
.kontrol{
	position: relative;
	font-size: 40px;
	float:right;
	line-height: 60px;
	padding:10px;
	color:White;
	margin-right: 20px;
	cursor:pointer;	
}*/
#kontrol{
	display:none; 
}



 .menu i{display: none; 
        }  


/* Galeri alanı CSS kodları */

.galeri{
	background: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.5)),
		url("images/creative-software.jpg"); /*  linear-gradient kullanarak resmin üstüne siyah bir transparan katman ekledik.  */
	
	/* background: url("resimler/galeri.jpg");*/
	width: 100%;
	height: 50vh;
	background-position: center;
	background-size : cover;
	display:flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	
}


.galeri .YazilimArsiv{	
	
	color:darkblue;
	font-family: calibri;
	font-size: 30px;

	
}

.galeri a{
	font-family: calibri;
	color : navy;
	font-size : 20px;
	padding: 10px 30px;
	text-decoration: none;
	box-sizing:  border-box;
	border : 1px solid white;
	background-color: rgba(255,255,255,0.3); /* ilk 3 parametre rengi belirliyor, 4. parametre transparan yapıyor. */
	transition: 0.5s;
}

.galeri a:hover{
	color:#073f68;
	background-color:white;	
	padding: 10px;
	
}


.YazilimArsiv h3{
	border-bottom: 1px  double white;
	padding-bottom: 20px;
	Color : #E9DE42;
	text-align: center;	
	
}

.YazilimArsiv h4{
	border-bottom: 1px  double white;
	padding-bottom: 20px;
	Color : white;
	text-align: center;	
	
}


/* Orta alan CSS kodları */

.orta_alan {
	
	display: flex;	
	flex-wrap: wrap; /* Box ların otomatik olarak aşağı kaymasını sağlar. */
	
 /*	flex-flow:row;    */ 
	
	width: 95%;
	padding: 10px;
	justify-content: space-around;
	
}

.orta{
	display: flex;
	
	width: 24%;
	min-width: 300px; 
	
	border :2px solid gray;
	border-radius: 15px;
	margin : 2% 0;
	box-sizing: border-box;
	box-shadow: 5px 6px 6px gray;
	background: linear-gradient(rgba(52,64,98,0.8),rgba(52,64,98,0.5));
	padding: 10px;
	
}

.orta .icerik{
	display:flex;
	flex-direction:column;	
	padding: 7px;
	/*justify-content: center;
	align-items:stretch;	
	text-align: justify;*/
	font-family: verdana;
	color:white;
}
.orta p{ text-indent: 15px;  /* Paragrafın ilk kelimesini içerden olması için. */
		 justify-content: center;
		align-items: center;
	   /* border: 2px solid yellow; for test */
	     height: 45%;
        }

.orta img { 
 	width: 60%;	
	justify-content: space-between;
	align-items:center;
    padding-left: 20%;
	padding-right: 20%;
	border : 1 px solid red;		
	
}

.orta h3{	
	font-family: Cambria;
	text-align: center;	
	color: darkblue;
	/*  border: 2px solid yellow; for test */
}

.orta h5{	
	font-family: Cambria;
	text-align: center;	
	color: #0A3A02;
	font-weight: bold;
	font-size: 14px;
	/*  border: 2px solid yellow; for test */
}


.orta .dllink {	
	text-align: center;	
	color: red;	
}


/* alt alan CSS kodları */
.alt_alan{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: 50vh;
	background-color: #171717;
	color:white;
}
.alt_alan h3{
	padding: 18px;
	color:red;
}

.alt_alan .icerik{
	display: flex;
	width: 33%;
	padding: 20px;
	box-sizing: border-box;
	text-align: justify;
	font-family: courier;	
}


.alt_alan .sosyal{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	font-size: 40px;
	border-top : 1 px solid white;	
		
}

.alt_alan i{ margin:20px; }
.alt_alan a{color:gray;}

/* burada her child için ayrı bir hover yapıyoruz. */
.sosyal a:nth-child(1):hover{color:blue;}
.sosyal a:nth-child(2):hover{color:aqua;}
.sosyal a:nth-child(3):hover{color:#E1595B;}
.sosyal a:nth-child(4):hover{color:blue;}


/* tablet görünüm kodları */
@media only screen and (max-width:1024px){
	.orta_alan{flex-wrap: wrap;}
	
	.orta{width: 48%;}
	
	.orta img{width: 30%;}
	
	#kontrol{
	/*	display: none;*/
	}
}

/* cep telefonu görünüm kodları */
@media only screen and (max-width:992px){
	/* menu responsive kodları    */
	.menu_bar {justify-content: space-between;}
	.menu_bar .logo{margin-left: 10%}
	.menu_bar .menu{margin-right: 10%}
	
	
	.kontorl{
		display: flex;
	}
	
	.menu{
		position: fixed;
		margin: 0;		
		padding: 0;
		width: 100%;
		border:0px solid rgba(0,0,0,0);
	    border-radius: 0px;
	}
	.menu ul {
		position: fixed;
		margin-top: 20px;
		margin-left: -40px;
		width: 100%;
		box-shadow : 0 8px 8px 0 rgba(0,0,0,0.5);
		display: none; /* pull-down menü başlangıçta gizleniyor.*
	   /* 3'lü bar simgesine basınca görünecek. */
	}	
	.menu ul li{
		display:block;
		margin: 0;
		padding: 0;
		width: 100%;
	}
	.menu a{
		width: 100%;
		font-size: 30px;
		line-height: 70px;
		border-radius: 0;
		border:0px solid rgba(0,0,0,0);
		border-bottom: 1px dotted gray;
	}
	
	
	.menu a:hover{
	color :antiquewhite;
	/* background-color:cornflowerblue ; */
	box-shadow: 0 8px 8px 0 rgba(0,0,0,0);
	/* gölgenin yatay ve dikey yansıması, bulanıklığı, yayılması ve rengi  */
    }
	
	#kontrol:checked~ul{
		display:block;
	}
	
	/* menüler gizlendiğinde sağda görünen yatay 3 çizgi. */
	.menu i{display:block;
			cursor:pointer;
			color:white;
			font-size: 30px;
			border: 0px solid white;
			padding: 5px;
			border-radius: 0%;
			margin-top: 3%;
			margin-left:93%; /* ekranın sağında görünmesi için */
	}
	
	
	/* orta alan responsive kodları */
	.orta {width: 100%;}
	.orta .icerik{flex-direction:row;}
	.icerik img, h3, p{padding: 1%;}
	
	
	/* alt alan responsive kodları */
	.alt_alan {height: 80vh;}
	.alt_alan .icerik{
		display: flex;
		width: 100%;		
		flex-direction: column;
		justify-content: center;
		align-items: center;		
		
	}
	
	
}