* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.warningMessage {

	display: none;
	/* Başlangıçta gizli olacak */

	position: fixed;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	background-color: rgba(0, 0, 0, 0.7);
	/* Hafif saydam siyah arka plan */

	color: white;

	font-size: 2em;

	padding: 20px;

	border-radius: 10px;

	text-align: center;

	z-index: 1000;
	/* Diğer öğelerin üstünde görünmesi için */

	opacity: 0;
	/* Başlangıçta saydam */

	width: 80%;

	height: 50%;

	justify-content: center;

	align-items: center;

	transition: opacity 1.5s, visibility 1.5s
}





.success {
	position: fixed;
	top: 5px;
	width: 20%;
	height: 50px;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(0, 255, 0, .8);
	color: black;
	text-align: center;
	padding: 10px;
	font-size: 1.4em;
	border-radius: 10px;
	font-weight: 700;
	animation: fadeInOut 5s ease-in-out forwards;
}





.warning {
	position: fixed;
	top: 5px;
	width: 20%;
	height: 50px;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(255, 0, 0, .8);
	color: white;
	text-align: center;
	padding: 10px;
	font-size: 1.4em;
	border-radius: 10px;
	font-weight: 700;
	animation: fadeInOut 5s ease-in-out forwards;

}

body {

	position: relative;

	margin: 0;

	padding: 0;

	background-color: rgb(238 238 238);

	font-family: "Exo", sans-serif;

	font-optical-sizing: auto;

	font-weight: weight;

	font-style: normal;

}

html,
body {

	overflow-x: hidden;
	overflow-y: auto;

}

img {

	display: block;

}

section {

	width: 100%;

	height: 100vh;

	margin: 0;

	padding: 0;

	display: flex;

	flex-direction: column;

	align-content: space-between;

	justify-content: space-between;

}

header {

	display: flex;

	justify-content: space-between;

	padding-right: 15px;

	background-color: #fefefe;

	align-items: center;

	height: 60px;

	overflow: hidden;

}



header img {

	display: block;

}

.navbar {}

.navbar ul {
	display: flex;
	list-style-type: none;
	column-gap: 20px;
}

.navbar ul li a {

	text-decoration: none;

	color: black;

	border-bottom: solid 3px transparent;

	transition: all .6s;

}

.navbar ul li a:hover {
	border-color: black;
	padding-bottom: 10px;
}

.navbar ul li a i {
	display: none
}

.orta_kisim {
	/* height: calc(100vh - 115px); */
	flex: 1;
	min-height: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	overflow: hidden;

}


.anayazi h1 {

	font-weight: 700;
	font-size: 42px;
	white-space: nowrap;
	letter-spacing: 15px;
	opacity: 0;
	transform: translateY(100px);
	animation: yukariKaydir .5s ease-out forwards;
}

.anayazi p {

	letter-spacing: 5px;

	line-height: 31px;

	white-space: nowrap;

	text-align: left;

	font-weight: 400;

	font-size: 22px;

	opacity: 0;

	transform: translateY(100px);

	animation: yukariKaydir .5s ease-out forwards;

	animation-delay: .5s;
	margin-bottom: 5px;

}

.anayazi a {

	position: relative;

	text-decoration: none;

	padding: 15px 30px;

	font-size: 22px;

	color: #fff;

	background-color: rgb(32, 32, 32);

	font-family: "Roboto Slab", serif;

	opacity: 0;

	animation: gorunurOlmak 0.5s ease-out forwards;

	animation-delay: 1s;

	display: inline-block;

	transition: .5s;

	transition-delay: .8s;

}

.anayazi a:hover {

	color: #00eeff;

	text-shadow: 0 0 5px #00eeff;

	transition-delay: 1ms;



}

.anayazi a span {

	position: absolute;

	display: block;

	background: #00eeff;

	box-shadow: 0 0 10px #00eeff;

}

.anayazi a span:nth-child(1) {

	left: 0;

	top: 0;

	width: 50.5%;

	height: 1.5px;

	transform-origin: left;

	transform: scaleX(0);

	transition: transform .4s;



}

.anayazi a:hover span:nth-child(1) {

	transform: scaleX(1);

	transform-origin: right;



}

.anayazi a span:nth-child(2) {

	right: 0;

	top: 0;

	width: 50.5%;

	height: 1.5px;

	transform-origin: right;

	transform: scaleX(0);

	transition: transform .4s;

}

.anayazi a:hover span:nth-child(2) {

	transform: scaleX(1);

	transform-origin: left;



}

.anayazi a span:nth-child(3) {

	top: 0;

	right: 0;

	width: 1.5px;

	height: 100%;

	transform: scaleY(0);

	transition: transform .4s;

	transform-origin: bottom;

	transition-delay: 0.4s;

}

.anayazi a:hover span:nth-child(3) {

	transform: scaleY(1);

	transform-origin: top;



}

.anayazi a span:nth-child(4) {

	top: 0;

	left: 0;

	width: 1.5px;

	height: 100%;

	transform-origin: bottom;

	transform: scaleY(0);

	transition: transform 0.4s;

	transition-delay: 0.3s;

}

.anayazi a:hover span:nth-child(4) {

	transform: scaleY(1);

	transform-origin: top;

}

.anayazi a span:nth-child(5) {
	bottom: 0;
	left: 0;

	width: 50.15%;

	height: 1.5px;

	transform: scaleX(0);

	transition: transform 0.2s;

	transition-delay: 0.7s;

	transform-origin: right;



}

.anayazi a:hover span:nth-child(5) {

	transform: scaleX(1);

	transform-origin: left;

}

.anayazi a span:nth-child(6) {

	bottom: 0;

	right: 0;

	width: 50.15%;

	height: 1.5px;

	transform: scaleX(0);

	transition: transform 0.2s;

	transition-delay: 0.7s;

	transform-origin: left;



}

.anayazi a:hover span:nth-child(6) {

	transform: scaleX(1);

	transform-origin: right;

}

.resim {

	display: flex;

	justify-content: center;

	align-items: center;

	column-gap: 10px;
	height: 100%;

}

.resim img {

	height: 500px;

	border-radius: 15px;

	opacity: 0;

	transform: translateX(100px);

	animation: sagtaraftan 1s ease-in forwards;

}

footer {
	display: block;
	width: 100%;
	height: 55px;
	background-color: rgba(0, 0, 0, 0.4);
	align-content: center;
}

footer ul {

	width: 100%;

	list-style-type: none;

	font-size: 20px;

	display: flex;

	justify-content: center;

	column-gap: 25px;

}

footer ul li {

	margin: 0;



	border: solid 1px white;

}

footer ul li a {
	text-decoration: none;
	padding: 10px;
	border-radius: 10%;
	display: flex;
	align-items: center;
	justify-content: center;
}

footer ul li:nth-child(1) a {
	background-color: #E4405F;
	color: #fff
}

footer ul li:nth-child(2) a {
	background-color: #1877F2;
	color: #fff
}

footer ul li:nth-child(3) a {
	background-color: #1DA1F2;
	color: #fff
}

footer ul li:nth-child(4) a {
	background-color: #FF0000;
	color: #fff
}

footer ul li:nth-child(5) a {
	background-color: #000;
	color: #fff
}

.mobilFooter {
	display: none;
}

.tabletFooter li a {

	transition: .5s;



}

.tabletFooter li a:hover {

	transform: scale(1.2);

	border-radius: 50%;



}





/* ------------------------PROJELER KISMI START ----------------- */

.container {

	animation: gorunurOlmak 1s forwards ease;

	width: 90%;

	margin: 25px auto;

	display: flex;

	flex-wrap: wrap;

	gap: 10px;

}



.box {

	width: 200px;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 0 5px black;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: space-between;

	padding: 0 0 5px 0;

	transition: .4s;

	height: 250px;

	background-color: rgba(0, 0, 0, .1);

}



/*.box:hover {

	box-shadow: 0 0 20px #222;



}*/



.box .image {

	width: 100%;

	position: relative;

	background-color: rgba(0, 0, 0, .1);

	height: 65%;

}



.box .image img {

	width: 100%;

	height: 150px;

}





.boxFooter {
	width: 100%;
}



.boxFooter {
	display: flex;
	justify-content: center;
}

.boxFooter a {
	text-decoration: none;
	color: white;
	transition: text-decoration ease .5s;
}

.boxFooter a:hover {
	text-decoration: underline;

}






.fa-regular {
	color: #ccc;
}



.fa-solid {
	color: gold;
}





.boxContent {

	position: relative;

	width: 90%;

	height: 50px;

	display: flex;

	justify-content: center;

	align-items: center;

	border: solid 2px rgba(255, 255, 255, .5);

	border-right: solid 2px rgba(255, 255, 255, .2);

	border-bottom: solid 2px rgba(255, 255, 255, .2);

	border-radius: 10px;

	font-size: 18px;

	color: #fff;

	text-decoration: none;

	background-color: #000;

	overflow: hidden;





}



.boxContent::before {

	content: "";

	position: absolute;

	top: 0;

	left: 0;

	background: rgba(255, 255, 255, 0.3);

	width: 100%;

	height: 50%;







}



.boxContent::after {

	content: "";

	position: absolute;

	top: 0;

	height: 100%;

	width: 100%;

	left: -100%;

	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);

	transition: .5s;

}



.boxContent:hover::after {

	left: 100%;

}



.boxContent span:nth-child(1) {

	position: absolute;

	width: 90%;

	height: 3px;

	background: #0ef;

	bottom: 5px;

	left: 50%;

	transform: translateX(-50%);

	border-radius: 2000px / 50px;

	box-shadow:

		0 0 10px #0ef,

		0 0 20px #0ef,

		0 0 40px #0ef,

		0 0 80px #0ef,

		0 0 160px #0ef;

}



.boxContent span:nth-child(1):before {

	content: "";

	position: absolute;

	width: 80%;

	height: 3px;

	background: #0ef;

	bottom: 3px;

	left: 50%;

	transform: translateX(-50%);

	border-radius: 2000px / 50px;

	box-shadow:

		0 0 10px #0ef,

		0 0 20px #0ef,

		0 0 40px #0ef,

		0 0 80px #0ef,

		0 0 160px #0ef;

}



.boxContent span:nth-child(1):after {

	content: "";

	position: absolute;

	width: 90%;

	height: 3px;

	background: #0ef;

	bottom: 35px;

	left: 50%;

	transform: translateX(-50%);

	border-radius: 2000px / 50px;

	box-shadow:

		0 0 10px #0ef,

		0 0 20px #0ef,

		0 0 40px #0ef,

		0 0 80px #0ef,

		0 0 160px #0ef;

}



.boxContent span:nth-child(2) {

	position: absolute;

	top: 50%;

	left: 8px;

	transform: translateY(-50%);

	width: 3px;

	height: 75%;

	background: #0ef;
	border-radius: 90px / 2000px;



}

.boxContent span:nth-child(3) {

	position: absolute;

	top: 50%;

	right: 8px;

	transform: translateY(-50%);

	width: 3px;

	height: 90%;

	background: #0ef;

	border-radius: 120px / 2000px;



}


.puanWindow {
	position: fixed;
	z-index: 99;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 250px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 15px;
	padding: 15px;
	border: solid 2px white;

	opacity: 0;
	pointer-events: none;
	transition: top .6s ease-in-out, opacity .4s ease;
}

.puanWindow.active {
	top: 20%;
	opacity: 1;
	pointer-events: auto;
	background-color: rgba(0, 0, 0, .7);
}

.puanWindow h1 {
	margin: 0;
	padding: 0;
	font-size: 18px;
	color: white;
}

.puanWindow h1::after {
	content: ' Projesi';
}

.puanWindow form {
	width: 100%;
	text-align: center;

}

.puanWindow form #login1 {
	width: 90%;
	margin: 25px auto;

	display: flex;
	justify-content: space-around;

}

.puanWindow form #login1 i {
	font-size: 30px;
	color: gold;
	text-shadow: 0 0 30px black;
}

.puanWindow form input[type="submit"] {


	cursor: pointer;
	border-radius: 5px;
	padding: 8px 15px;
	border: none;
	box-shadow: 0 0 5px black;
	transition: box-shadow .3s ease;
}

.puanWindow form input:hover {
	box-shadow: 0 0 10px white;
}



/* --------------------PROJELER KISMI STOP ---------------------- */

/* --------------------İLETİSİM KISMI STOP ---------------------- */


.iletisimContainer {
	width: 100%;
	height: 100%;

	padding: 15px 0;
	overflow-y: auto;


}

.iletisimContent {
	animation: gorunurOlmak 1s forwards;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 0 5px black;
	padding: 20px 40px;
	margin: 10px;
	column-gap: 15px;
	border-radius: 5px;
}

.rightBoxSpan {
	display: none;
}



.rightBox form {

	display: flex;

	flex-direction: column;

	row-gap: 5px;

}



.rightBox form input {

	padding: 7px;

}



.rightBox form textarea {

	resize: none;

}



.rightBox form input[type="submit"] {

	border: solid 2px black;

	font-size: 1.2em;

	cursor: pointer;



}



/* --------------------İLETİSİM KISMI STOP ---------------------- */









/* ---------------SCREEN ---- MEDİA ---------------------- */





@media (max-width:1290px) {

	.orta_kisim {
		width: 96%;
		margin: 0 2%;
		display: flex;
		justify-content: space-around;
	}



	.anayazi h1 {

		font-weight: 500;
		font-size: 36px;
		letter-spacing: 10px;
	}

	.anayazi p {
		letter-spacing: 1px;
		font-size: 22px;
	}

	.anayazi a {
		padding: 10px 20px;
		font-size: 18px;
	}

	.resim img {
		height: 450px;
	}





}



@media (max-width:1000px) {



	.leftBox {

		font-size: .8em;



	}





}



@media (max-width:900px) {


	.container {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		gap: 10px;
		margin: 10px 0;

	}

	.anayazi h1 {

		font-weight: 500;
		font-size: 32px;
		letter-spacing: 10px;
	}

	.anayazi p {
		letter-spacing: 0;
		font-size: 20px;
		white-space: normal;
	}

	.anayazi a {
		padding: 10px 20px;
		font-size: 14px;
		font-weight: normal;
	}

	.resim img {
		height: 400px;
	}

	.navbar ul li a {
		border-bottom: none;
	}



	.anayazi a span {
		display: none;
	}

	.anayazi a:hover {
		color: white;
	}

	.tabletFooter {
		display: none;
	}

	.mobilFooter {
		display: flex;
	}



	.box:hover {
		box-shadow: 0 0 5px black;
	}

	.boxContent {
		font-size: 1.2em;
	}


	.box {
		width: 30%;
		height: 250px;
	}



	.leftBox {
		display: none
	}

	.rightBox h2 {
		display: none;
	}

	.rightBoxSpan {
		margin: 0;
		display: inline-block;
	}

	#buttonsProjesi {
		display: none;
	}

	.iletisimContent {
		height: 100%;
		box-shadow: none;
	}



}



@media (max-width:760px) {

	.navbar ul {
		padding: 0;
	}

	.orta_kisim {
		display: flex;
	}

	.navbar ul {
		column-gap: 10px;
	}

	.resim {

		display: flex;

		position: relative;
		width: 100%;
		height: 100%;

	}

	.resim img {
		object-fit: contain;

		width: 100%;
		height: 100%;
		animation: none;
		opacity: 1;
		transform: translateX(0);
	}

	.resim .anayazi {
		position: absolute;
		bottom: 5%;
		left: 20%;
		z-index: 1;
		color: #fff;
		display: block;
	}

	.anayazi h1 {
		font-size: 4vw;
		letter-spacing: 2px;

		animation: none;
		opacity: 1;
		transform: translateY(0);
	}

	.anayazi p {
		font-size: 3vw;
		margin: 0;
		animation: none;
		opacity: 1;
		transform: translateY(0);
	}

	.anayazi a {
		animation: none;
		opacity: 1;
	}



	.iletisimContent {
		height: 100%;
		box-shadow: none;
	}

	.rightBoxSpan h1 {
		margin: 0;
	}

	.rightBoxSpan span {
		display: none;
	}

	.footer {

		height: 55px;
	}





}





@media (max-width:670px) {}

@media (max-width:500px) {
	.box {
		height: 200px;
	}

	.box .image img {
		height: 100%;
		width: 100%;
	}

	.boxContent {
		font-size: 15px;
	}

	.iletisimContainer {
		overflow-y: hidden;
	}

	.iletisimContent {
		padding: 10px;
	}

	.rightBox {
		width: 100%;
	}

	.rightBox form textarea {
		height: 120px;
	}



	.rightBoxSpan {
		margin: 0;
		padding: 0;
		text-align: center;
		padding-bottom: 5px;
	}

	.rightBoxSpan h1 {
		margin: 0;
		padding: 0;
	}

	footer {
		height: auto;
	}

	.mobilFooter {
		margin: 0;
		padding: 5px 0;
	}

}

@media (max-width:460px) {
	header {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100px;

	}

	header .logo {
		height: 30px;
		margin-bottom: 5px;
	}

	.orta_kisim {}

	.anayazi {
		left: 10%;
		bottom: 2%;
	}

	.footer {}


}

@media (max-width:400px) {

	.resim .anayazi {
		left: 5%;
		bottom: 5%;
	}

	.anayazi h1 {
		font-size: 3vw;
	}

	.anayazi p {
		font-size: 3vw;
	}

	.container {
		row-gap: 50px;
	}

	.box {
		width: 36%;
		height: 200px;
	}



	.box .image img {

		height: 90%;

	}



	.boxContent {
		font-size: .8em;
		white-space: nowrap;
		height: 40px
	}

	.boxContent span:nth-child(1)::after {
		display: none
	}

	.boxContent span:nth-child(1)::before {
		display: none
	}



	.boxContent span:nth-child(2) {
		display: none
	}

	.boxContent span:nth-child(3) {
		display: none
	}

	.star i {
		font-size: 12px;
	}

	.stars {
		align-items: center;
	}

	.stars span {
		font-size: .7em;
	}



}

@media (max-width:380px) {

	.container {
		margin: 0;
	}

	.box {
		width: 45%;
	}

	.navbar ul {
		flex-direction: row;
		row-gap: 7px;
	}

	.navbar ul li a span {
		display: none
	}

	.navbar ul li a i {
		display: inline-block;
		border: solid 1px black;
		padding: 15px;
		border-radius: 45px;
		box-shadow: 0 0 15px black;
		color: black;
	}

	/* .navbar ul li:last-child a {

		display: inline-block;

		border: solid 1px black;

		padding: 12px;

		border-radius: 45px;

		box-shadow: 0 0 15px black;

		color: black;
	} */





}

/* burasi index sayfasına aittir start  */

@keyframes gorunurOlmak {

	0% {

		opacity: 0;

	}

	100% {

		opacity: 1;

	}

}





@keyframes sagtaraftan {

	0% {

		opacity: 0;

		transform: translateX(100px);

	}

	100% {

		opacity: 1;

		transform: translateX(0);



	}

}



@keyframes yukariKaydir {

	0% {

		opacity: 0;

		transform: translateY(100px);

	}

	100% {

		opacity: 1;

		transform: translateY(0);

	}

}

/* burasi index sayfasına aittir start  */







/*warning ve success sınıfları için kullanılıt*/

@keyframes fadeInOut {

	0% {

		opacity: 0;

	}

	50% {

		opacity: 1;

	}

	100% {

		opacity: 0;

	}

}