*{
	box-sizing:border-box;
    user-select: none;
	-webkit-tap-highlight-color: transparent; /* rgba(255, 255, 255, 0); */
}
body{
	margin:0px;
	width:100vw;
	height:100vh;
	background: #e1ccaf;
	font-family: 'Poppins', sans-serif;
}
#first{
	z-index:99;
	position:absolute;
	width:100%;
	height:100vh;
	background-color:#333;
	text-align:center;
	font-size:3.5vh;
	font-weight:bold;
	color:orange;
	cursor:pointer;
}
#first div{
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#start{
	display:none;
	z-index:99;
	position:absolute;
	width: 100%;
	height: 100%;
	background-color:#333;
	text-align:center;
	font-size:3.5vh;
	font-weight:bold;
	color:#fff;
}
#start div{
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.giris{
	width:200px;
	height:200px;
	border-radius: 50%;
	border: 10px solid orange;
}
#main{
	margin: 0px auto 0px auto;
	border: 0px solid #fff;
}
#video{
	position:relative;
}
#video-ekran{
	display:none;
	position: absolute;
	width:100%;
	height:100%;
}
video{
	/* width:100% !important; */
}
#cerceve{
	display:block;
	position: absolute;
	height:100%;
	width:100%;
	background: url(../img/akilli-cay-bardagi.jpg) no-repeat;
	background-size:100% 100%;
}
#soru{
	position: relative;
	text-align:center;
	color:#333;
	background-color:#fff;
}
#soru-metin{
	position:absolute;
	width:100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#soru-no{
	display:none;
	position: absolute;
	/* background: url(../img/soru-no.png) no-repeat; */
	background: linear-gradient(#e3312d,#aa1300);
	background-size:100% 100%;
	color:#fff;
}
#answer{
    display: none;
    position: absolute;
    text-align: center;
	color:#555;
	transform: rotate(2deg);
}
#answer span{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
#buttons{
	display:none;
}
#buttons div{
	cursor:pointer;
	text-align:center;
	color:#fff;
}
#button-emin-degilim{
    background: linear-gradient(#feaf3a,#e87313);
}
#button-emin-degilim:hover{
    background: linear-gradient(#e87313,#feaf3a);
}

#button-evet{
    background: linear-gradient(#35d84a,#60b61f);
}

#button-evet:hover{
    background: linear-gradient(#60b61f,#35d84a);
	user-select: none;
}

#button-hayir{
    background: linear-gradient(#e8574a,#be231c);
}

#button-hayir:hover{
    background: linear-gradient(#be231c,#e8574a);
}

#button-basla{
	display:inline-block;
	cursor:pointer;
	text-align:center;
	color:#fff;
    background: linear-gradient(#35d84a,#60b61f);
}

#button-basla:hover{
    background: linear-gradient(#60b61f,#35d84a);	
}

#button-bildi{
	display:inline-block;
	cursor:pointer;
	text-align:center;
	color:#fff;
    background: linear-gradient(#35d84a,#60b61f);
}

#button-bildi:hover{
    background: linear-gradient(#60b61f,#35d84a);	
}

#button-bilemedi{
	display:inline-block;
	cursor:pointer;
	text-align:center;
	color:#fff;
    background: linear-gradient(#e8574a,#be231c);
}

#button-bilemedi:hover{
    background: linear-gradient(#be231c,#e8574a);	
}

#basla{
	display:table;
	margin: 0 auto;
}
#basla-div{
	display:table;
	margin: 0 auto;
}

#data-div{
	position:relative;
    display: none;
    width: 100%;
    height: 100%;
    background-color: #333;
    text-align: center;
    font-family: 'Verdana';
    color: #fff;
}
#data-div div{
	position:absolute;
	width:100%;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#geribildirim{
	text-align:center;
	margin: 0px auto;
	display:none;
}

input[type=text] {
    padding: 1vh; 
    border: 2px solid #ccc; 
    border-radius: 1vh;
	font-size:3vh;
}

input[type=button] {
    padding: 1vh 2vh;
	margin-left: 1vh;
	font-size: 3vh;
    background: #ccc; 
    cursor: pointer;
    border-radius: 1vh; 
}

/* Landscape */
@media (min-aspect-ratio: 1/1){
	#main{
		width: 110vh;
		height: 100vh;
		padding: 1vh;
	}
	#video{
		margin-top:4vh;
		width:100%;
		height:62vh;
	}
	#Player{
		border-radius: 4vh;
	}
	#cerceve{
		/* border: 0.5vh solid #fc8e0e; */
		border-radius: 4vh;
		box-shadow: 0vh 1vh 3vh #0005;
	}
	#soru{
		font-weight:bold;
		height:15vh;
		margin: 4vh 1vh 1vh 1vh;
		padding: 0 2vh;
		font-size:2.5vh;
		border-radius: 2vh;
		box-shadow: 0.05vh 0.1vh 0 0.1vh rgb(0, 0, 0, 0.15);
	}
	#soru-metin{
		padding:3vh 2vh;		
	}
	#soru img{
		height:2.5vh;
	}
	#soru-no{
		top: -2vh;
		left: 3vh;
		width: 15vh;
		height: 5vh;
		text-shadow: 0.1vh 0.2vh #860700;
		font-size: 2.2vh;
		line-height: 4.5vh;
		border-radius: 1vh;
	}
	#answer{
		font-size: 4.5vh;
		text-shadow: 0.1vh 0.1vh #fff;
		top: 5vh;
		right: 7vh;
	}
	#answer span{
		height: 14vh;
		width: 31vh;
	}
	#buttons{
		margin: 3vh auto;
	}
	#buttons div{
		display:inline-block;
		margin:0 2vh;
		border: solid 0.5vh #fff;
		line-height:6vh;
		width:23vh;
		height:7vh;
		border-radius: 4vh;
		font-size: 2.5vh;
	}
	#button-evet{
		box-shadow: 0 0.5vh rgb(0 0 0 / 15%), inset 0vh -0.5vh #547e1d;
		text-shadow: 0 0.25vh 0 #547e1d;
	}
	#button-hayir{
		box-shadow: 0 0.5vh rgb(0 0 0 / 15%), inset 0vh -0.5vh #9a130c;
		text-shadow: 0 0.25vh 0 #9a130c;
	}
	#button-emin-degilim{
		box-shadow: 0 0.5vh rgb(0 0 0 / 15%), inset 0vh -0.5vh #c35705;
		text-shadow: 0 0.25vh 0 #c35705;
	}

	#button-basla{
		margin-top:2.5vh;
		border: solid 0.5vh #fff;
		line-height:6vh;
		width:23vh;
		height:7vh;
		border-radius: 4vh;
		font-size: 2.5vh;
		box-shadow: 0 0.5vh rgb(0 0 0 / 15%), inset 0vh -0.5vh #547e1d;
		text-shadow: 0 0.25vh 0 #547e1d;
	}
	
	#button-bildi{
		margin-top:2.5vh;
		margin-right:2vh;
		border: solid 0.5vh #fff;
		line-height:6vh;
		width:23vh;
		height:7vh;
		border-radius: 4vh;
		font-size: 2.5vh;
		box-shadow: 0 0.5vh rgb(0 0 0 / 15%), inset 0vh -0.5vh #547e1d;
		text-shadow: 0 0.25vh 0 #547e1d;
	}

	#button-bilemedi{
		margin-top:2.5vh;
		margin-left:2vh;
		border: solid 0.5vh #fff;
		line-height:6vh;
		width:23vh;
		height:7vh;
		border-radius: 4vh;
		font-size: 2.5vh;
		box-shadow: 0 0.5vh rgb(0 0 0 / 15%), inset 0vh -0.5vh #9a130c;
		text-shadow: 0 0.25vh 0 #9a130c;
	}
	#data-div{
		font-size: 5vh;
		border-radius: 4vh;
		box-shadow: inset 0 0 1vh rgb(194 128 23);
	}
}

/* Portrait */
@media (max-aspect-ratio: 1/1){
	#main{
		position:absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 95vw;
		padding: 1vw;
	}
	#video{
		width:100%;
		height: 53.4375vw;
	}
	#Player{
		border-radius: 4vw;
	}
	#cerceve{
		/* border: 0.5vw solid #fc8e0e; */
		border-radius: 4vw;
		box-shadow: 0vh 1vw 3vw #0005;
	}
	#soru{
		height:30vw;
		margin: 5vw 1vw 1vw 1vw;
		padding:0 1vw;
		font-size:4vw;
		border-radius: 3vw;
		box-shadow: 0.05vw 0.1vw 0 0.1vw rgb(0, 0, 0, 0.15);
	}
	#soru-metin{
		padding:3vw 2vw;		
	}
	#soru img{
		height:2.5vw;
	}
	#soru-no{
		top:-2vw;
		left:3vw;
		width:18vw;
		height:6vw;
		text-shadow: 0.1vw 0.2vw #860700;
		font-size:3vw;
		line-height:6vw;
		border-radius:1vw;		
	}
	#answer{
		font-size: 4.5vw;
		text-shadow: 0.1vw 0.1vw #fff;
		top: 4vw;
		right: 5.5vw;
	}
	#answer span{
		height: 14vw;
		width: 28vw;
	}
	#buttons{
		margin: 2vw auto;
	}
	#buttons div{
		display:block;
		margin:3vw 0;
		border: solid 1vw #fff;
		line-height:10vw;
		width:70vw;
		height:12vw;
		border-radius: 6vw;
		font-size: 4.5vw;
	}
	#button-evet{
		box-shadow: 0 0.5vw rgb(0 0 0 / 15%), inset 0vw -0.5vw #547e1d;
		text-shadow: 0 0.25vw 0 #547e1d;
	}
	#button-hayir{
		box-shadow: 0 0.5vw rgb(0 0 0 / 15%), inset 0vw -0.5vw #9a130c;
		text-shadow: 0 0.25vw 0 #9a130c;
	}
	#button-emin-degilim{
		box-shadow: 0 0.5vw rgb(0 0 0 / 15%), inset 0vw -0.5vw #c35705;
		text-shadow: 0 0.25vw 0 #c35705;
	}
	#button-basla{
		margin-top: 2.5vw;
		border: solid 1vw #fff;
		line-height: 10vw;
		width: 70vw;
		height: 12vw;
		border-radius: 6vw;
		font-size: 4.5vw;
		box-shadow: 0 .5vw rgb(0 0 0/15%),inset 0vw -0.5vw #547e1d;
		text-shadow: 0 .25vw 0 #547e1d;
	}
	#button-bildi{
		margin-top:3.5vw;
		border: solid 1vw #fff;
		line-height:10vw;
		width:70vw;
		height:12vw;
		border-radius: 6vw;
		font-size: 4.5vw;
		box-shadow: 0 0.5vw rgb(0 0 0 / 15%), inset 0vw -0.5vw #547e1d;
		text-shadow: 0 0.25vw 0 #547e1d;
	}

	#button-bilemedi{
		margin-top:3.5vw;
		border: solid 1vw #fff;
		line-height:10vw;
		width:70vw;
		height:12vw;
		border-radius: 6vw;
		font-size: 4.5vw;
		box-shadow: 0 0.5vw rgb(0 0 0 / 15%), inset 0vw -0.5vw #9a130c;
		text-shadow: 0 0.25vw 0 #9a130c;
	}
	#data-div{
		font-size: 5vw;
		border-radius: 4vw;
		box-shadow: inset 0 0 1vw rgb(194 128 23);
	}
}