@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Mochiy+Pop+P+One&family=Ubuntu:wght@500;700&display=swap');

:root {
	--color : #E74C3C;
	--header_max : 1200px;
	--header_max_yarisi : calc(100vh - 100px);
	--tema : #E74C3C;
	--slider_yazi : calc(100% - 144px);
	--slider_font_size : 56px;
}
html, body{
	scroll-behavior: smooth;
}
body {
	background-image: linear-gradient(to right, #F5F5F5 , #FFFFFF);
}
div.powered {
    background-color: black;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: white;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 100;
}
* {
	margin : 0;
	padding : 0;
	box-sizing: border-box;
	font-family: 'Kanit', sans-serif;
	font-family: 'Mochiy Pop P One', sans-serif;
	font-family: 'Ubuntu', sans-serif;
	outline: none;
}
li {
	list-style-type: none;
}
a {
	text-decoration: none;
	color: black;
}
.green {
	color: green;
}
.red {
	color: red;
}
.orange {
	color: orange;
}
.darkorange {
	color: darkorange;
}
.gray {
	color: gray;
}
.m_top {
	margin-top: 100px;
}
.flex {
	display: flex;

}
.flex-wrap {
	flex-wrap: wrap;
}
.flex-column {
	flex-direction: column;
}
.justify-center {
	justify-content: center;
}
.justify-between {
	justify-content: space-between;
}
.justify-evenly {
	justify-content: space-evenly;
}
.align-center {
	align-items: center;
}
.text-center {
	text-align: center;
}
div.arama {
	transition: 250ms ease;
	z-index: 9999999;
	position: fixed;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	bottom: 10px;
	right: 10px;
	display: flex;
	background-color: white;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	overflow: hidden;
}
div.arama a {
	width: 100%;
	height: 100%;
}
div.arama a img {
	width: 100%;
	height: 100%;
}

div.testler {
	display : flex;
	flex-wrap : wrap;
	justify-content : space-evenly;
	align-items : flex-start;
}

div.tests {
	display : flex;
	flex-direction : column;
	justify-content : center;
	align-items : center;
	width : 100%;
	max-width : 400px;
	margin : 20px;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	padding : 20px;
	border-radius : 10px;
	transition : 200ms ease;
}



div.tests div.test_butonlari {
	display : flex;
	justify-content : space-evenly;
	flex-wrap : wrap;
}
div.tests div.test_butonlari a {
	max-width : 150px;
	padding : 10px 20px;
	border-radius : 10px;
	margin:25px 10px;
	border : 2px solid red;
	text-decoration : none;
	color : red;
	font-weight : bolder;
	font-size : 24px;
	transition : 200ms ease;
}
div.tests div.test_butonlari a:hover {
	background : red;
	color : white;
}


.text-center {
	text-align: center;
}
.alt_yazi {
	color: gray;
	font-size: 16px;
}
.m_top {
	margin-top: 10px;
}
div.box{
	padding-bottom: 50px;
	padding-top: 30px;
	padding-left: 30px;
	padding-right: 30px;
	border-radius: 5px;
	margin-top: 10px;
	width: 100%;
	max-width: 550px;
}
/* Header */
header {
	width: 100%;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
	position: sticky;
	top: 0px;
	z-index: 99999999;
	height: 100px;
	background: white;
}
div.header {
	height: 100%;
	width: 100%;
	max-width: var(--header_max);
	padding: 2px;
	margin: auto;
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	background: white;
}
div.logo {
	max-width: 150px;
	text-align: center;
}
div.logo img {
	width: 100%;
	height: 100%;

}
div.logo h2 {
	color: var(--tema);
}
div.logo b {
	font-size: 14px;
	color: black;
	font-family: sans-serif;
}
div.linkler {
	display: flex;
	justify-content: right;
}
div.linkler b {
	font-size: 36px;
	cursor: pointer;
	display: none;
	margin-right: 20px;
}	
div.linkler ul li{
	margin-right: 20px;
	display: inline-block;

}
div.linkler ul li a {
	color: black;
}
div.linkler ul li a:hover {
	color: var(--tema);
}
div.mobil_header {
	width: 100%;
	background: black;
	overflow: hidden;
	display: none;
}
div.mobil_header ul {
	display: flex;
	flex-direction: column;
}
div.mobil_header ul li {
	text-align: center;
	padding: 10px;
}
div.mobil_header ul li a{
	color: white;
	
}

/* Banner */
div.slider {
	width: 100%;
	position: relative;
	height: 65vw;
	max-height: var(--header_max_yarisi);
	border-bottom: 2px solid gray;
	background: linear-gradient(90deg, rgba(238,60,60,1) 19%, rgba(190,64,64,1) 55%, rgba(212,51,51,1) 100%);
}
div.slider ul {
	width: 100%;
	height: 100%;
	display: flex;
	overflow: hidden;
	scroll-behavior: smooth;
}
div.slider ul li {
	min-width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: center;

}
div.slider ul li div.yazilar{
	width: var(--slider_yazi);
	margin-left: 72px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0px;
	color: white;
	font-size: var(--slider_font_size);
	

}

div.slider ul li img {
	height: 100%;
}
div.butonlar {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	position: absolute;
	top: 0px;
}
div.butonlar button {
	background: white;
	border: none;
	color: black;
	width:55px;
	height: 56px;
	font-size: 40px;
	position: absolute;
	cursor: pointer;

}
div.butonlar button:nth-child(1){
	left: 0px;
	border-radius: 0px 50% 50% 0px;
}
div.butonlar button:nth-child(2){
	right: 0px;
	border-radius: 50% 0px 0px 50%;

}


div.icerik {
	width: 90vw;
	max-width: 1200px;
	margin: 100px auto;
}

div.alt_tablo {
	width: 100%;
	display: grid;
	grid-template-columns: auto auto;
}
div.alt_tablo div.tablo{
	transition: 200ms ease;
	margin-right: 10px;
	margin-bottom: 30px;
	margin-left: 10px;
	padding: 40px;
	border: 2px solid var(--tema);
	color: var(--tema);
	border-radius: 10px;
}
div.alt_tablo div.tablo:hover{
	background-color: var(--tema);
}
div.alt_tablo div.tablo:hover *{
	color: white;

}
div.tavsiye {
	width : 100%;
	padding : 10px;
	margin-top: 50px;
}
div.tavsiye form {
	width : 100%;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-evenly;
}
div.tavsiye input {
	width : 48%;
	padding :15px;
	border : 1px solid lightgray;
	border-radius : 5px;
	font-size : 18px;
}
div.tavsiye textarea {
	width : 97%;
	padding : 15px;
	font-size : 18px;
	min-height : 150px;
	border : 1px solid lightgray;
	border-radius : 5px;
	resize : none;
	margin-top : 20px;
}
div.tavsiye button {
	margin-top : 20px;
	padding : 15px;
	border:none;
	border-radius : 5px;
	font-size : 20px;
	cursor : pointer;
  background: var(--tema);
	color : white;
	transition : 200ms ease;
}
div.tavsiye button:hover {
	background : black;
}
div#basarilarimiz{
	margin-top: 100px;
}

div.ogrenciler{
	margin-top: 10px;
	width: 100%;
	display: grid;
	grid-template-columns: auto auto auto;
}
div.ogrenci {
	border: 3px solid  var(--tema);
	border-radius: 5px;
	margin-right: 30px;
	margin-top: 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
div.ogrenci img {
	height: 200px;
	object-fit: cover;
}
div.ogrenci div.alt{
	padding: 10px;
	transition: 100ms linear;
	background-color: white;
}
div.ogrenci div.alt h1{
	font-size: 20px;
	text-align: center;
	color:   var(--tema);
	margin-bottom: 10px;
}
div.ogrenci div.alt h3{
	text-align: center;
}
div.ogrenci:hover div.alt{
	background-color:  var(--tema);
}
div.ogrenci:hover div.alt h1,div.ogrenci:hover div.alt h3{
	color: white;
}
div.ogrenci_gorusleri {
	width : 100%;
	margin: 30px auto;
	padding : 10px;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-evenly;

}
div.gorusler {
  width : 100%;
	max-width : 500px;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
	border-radius : 15px;
	margin-bottom: 50px;
	position : relative;
	background-color: white;
}
div.gorusler div.bilgisi {
	width : 100%;
	padding : 10px;
	display : flex;
	align-items : center;
}
div.gorusler div.bilgisi img {
	width : 64px;
	height: 64px;
	
	border-radius : 50%;
}
div.gorusler div.bilgisi b {
	font-size : 20px;
	margin-left : 10px;
	font-family : sans-serif;
}
div.gorusler p {
	font-family : sans-serif;
	width : 80%;
	margin: 20px auto;
	color : black;
}
div.gorusler span.checked {
	color : orange;
}
div.gorusler div.yildizlar {
	padding : 10px;
	
}
div.gorusler div.yildizlar span {
	font-size : 14px;
}
div.bilgi_kutusu {
	width : 100%;
	display : flex;
	justify-content : space-evenly;
	flex-wrap : wrap;
	margin-top: 100px;
}
div.bilgi_kutusu div {
	width : 100%;
	max-width : 350px;
	background : black;
	border-radius : 5px;
	display : flex;
	flex-direction : column;
	color : white;
	padding : 25px 0px;
	margin-top: 20px;
}
div.bilgi_kutusu div h3 {
	text-align : center;
	margin: 15px auto;
	font-family : sans-serif;
}
div.bilgi_kutusu div .icon {
	font-size : 36px;
	margin : 0;
}
div.bilgi_kutusu div p {
	text-align:center;
	width : 80%;
	margin : auto;
	color : #EAECEE;
	font-weight :bolder;
	font-family :sans-serif;
}
div#duyurular{
	margin-top: 100px;
	
}
div.ozel_duyuru {
	width : 100%;
	max-width: calc(var(--header_max) / 2.3);
	border-radius : 15px;
	padding : 25px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	margin-top: 30px;
	margin-left: 5px;
	margin-right: 5px;
}

div.ozel_duyuru .tarih {
	text-align : right;
	font-weight : bolder;
}
div.duyuru {
	margin-top: 20px;
	padding: 10px;
	display: grid;
	align-items: center;
	grid-template-columns: auto auto;
}
div.duyurulars {
	max-height: 500px;
	overflow: auto;
}
div.duyuru img {
	width: 80%;
	max-width:300px;
}
div.duyuru h1.tarih {
	text-align: right;
	font-size: 20px;
	color: gray;
}


div#iletisim {
	margin-top: 100px;
}
div.bilgiler {
	padding: 10px;
	margin-top: 20px;
}
div.bilgiler div.telefon {
	font-size: 24px;
	display: grid;
	align-items: center;
	grid-template-columns: auto auto;
}
div.bilgiler div.telefon a {
	display: none;
	margin-top: 10px;
	color: white;
	background-color: #ff6600;
	text-align: center;
	font-size: 20px;
	transition: 300ms ease;
	padding: 15px;
	border-radius: 15px;
}
div.bilgiler div.telefon a:hover {
	font-size: 24px;
}

div.bilgiler form {
	max-width: 700px;
	margin: 30px auto;
	display: grid;
	grid-template-columns: auto;
}
div.bilgiler form b {
	padding: 5px;
}
div.bilgiler form input,textarea {
	outline: none;
	border-radius: 15px;
	padding: 20px;
	color: black;
	border: none;
	border:1px solid lightgray;
	font-weight: bolder;
	margin-bottom: 10px;
	resize: none;
	font-size: 20px;
	transition: 200ms ease;
}
div.bilgiler form select {
	outline: none;
	border-radius: 15px;
	padding: 20px;
	color: black;
	border: none;
	border:1px solid lightgray;
	font-weight: bolder;
	margin-bottom: 10px;
	resize: none;
	font-size: 20px;
	transition: 200ms ease;
}
div.bilgiler form input:focus,textarea:focus{
	font-size: 24px;
}
div.bilgiler form input[type="submit"]{
	border: 2px solid var(--tema);
	transition: 200ms ease;
	background-color: white;
	color: var(--tema);
	border-radius: 10px;
	padding: 15px;
	cursor: pointer;
}
div.bilgiler form input[type="submit"]:hover {
	color: white;
	background-color: var(--tema);
}
div.videolar {
	display : flex;
	flex-wrap : wrap;
	width : 100%;
	justify-content : space-evenly;
}
div.videolar div.video {
	width:  100%;
	max-width : 350px;
	display : flex;
	flex-direction : column;
}
div.videolar div.video {
	width : 100%;
	
}
div.videolar div.video video {
	border-radius : 10px;
}
div.videolar div.video h2{
  width: 100%; 
	padding : 5px;
}
div.videolar div.video .tarih {
	text-align : right;
	font-weight :bolder;
	padding : 5px;
	font-family : sans-serif;
}
div#sosyal_medya {
	margin-top: 20px;
	margin-bottom: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
div#sosyal_medya a {
	font-size: 36px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	margin-left: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: black;
	transition: 200ms ease;
}
div#sosyal_medya a:first-child:hover {
	background-color: #3B5998;
	color: white;
}
div#sosyal_medya a:nth-child(2):hover{
	color: white;
	background-color: #bb0000;
}
div#sosyal_medya a:last-child:hover{
	color: white;
	background: #f09433; 
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
}

div#hakkimizda p {
	padding: 20px;

}



div.duyuru-ekle{
	width: 100%;
	padding: 5px;
	max-width: 1200px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
div.duyuru-ekle form {
	display: flex;
	flex-direction: row;
}

@media all and (max-width: 1000px){
	
	div.ogrenciler{
		grid-template-columns: auto auto;
	}
}
@media all and (max-width: 750px){
	div.alt_tablo{
		grid-template-columns: auto;
	}
	.topnav a{
		font-size: 12px;
	}
	header{
		grid-template-columns: auto;
	}
	header div{
		margin-bottom: 5px;
	}
}
@media all and (max-width: 600px){
	div.bilgiler div.telefon{
		grid-template-columns: auto;
	}
	div.ogrenciler {
		grid-template-columns: auto;
	}
	div.duyuru {
		grid-template-columns: auto;
	}
}
@media all and (max-width: 425px){
	.topnav a{
		font-size: 30px;
	}
	.topnav a b {
		display: none;
	}
	div#sosyal_medya a {
		width: 50px;
		height: 50px;
		font-size: 24px;
	}
	div.bilgiler form input,textarea{
		padding: 10px;
	}
	div.bilgiler form input[type="submit"]{
		padding: 10px;
	}
}



/* footer */
footer {
	width: 100%;
	margin-top: 200px;
	padding: 0px 0px 10px 0px;
	background: #E74C3C;
}
footer div.sosyal_medya {
	width: 100%;
	padding: 15px;
	background: white;
	background: #FEFEFE;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
footer div.sosyal_medya div.icons {
	max-width: 500px;
	width: 100%;
	margin: auto;
	display: flex;
	justify-content: space-around;
}
footer div.sosyal_medya .fa {
  font-size: 24px;
  text-align: center;
  text-decoration: none;
  color: black;
}

footer div.sosyal_medya .fa:hover {
    color: var(--tema);
}
footer div.foot {
	display: flex;
	margin-top: 30px;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
footer div.foot div.logo_alt {
	border: none;
	max-width: 320px;

}
footer div.foot div.logo_alt img {
	width: 100%;
}
footer div.foot div.logo_alt p {
	font-size: 16px;
	font-family: sans-serif;
	margin-top: 10px;
}
footer div.foot div.foots {
	display: flex;
	flex-direction: column;
	max-width: 280px;
	margin-right: 20px;
	margin-bottom: 50px;
}
footer div.foot div.foots ul {
	margin-top: 5px;
}
footer div.foot div.foots ul li {
	margin-top: 5px;
}
footer h2 {
	color: white;
}
footer div.foot div.foots a {
	font-size: 18px;
	font-family: sans-serif;
	color: white;
	transition: 200ms ease;

}
footer div.foot div.foots a:hover {
	font-size: 19px;
}
footer div.foot div.foots p {
	margin-top: 10px;
	font-size: 18px;
	font-family: sans-serif;
	color: white;

}
/* Media */


@media all and (max-width: 768px){
	footer div.foot {
		justify-content: flex-start;
		padding: 10px;
	}
	div.fotolar {
		flex: 50%;
		max-width: 50%;
	}
	div.linkler ul{
		display: none;
	}
	div.linkler b {
		display: block;
	}
	div.fotolarimiz img {
		width: 100%;
	}
	div.banner button {
		width: 24px;
		height: 24px;
		font-size: 12px;
		padding: 0px;
	}
	div.butonlar button {
		width: 28px;
		height: 36px;
		font-size: 16px;
		font-weight: bolder;
	}
}