:root { 
	--mainBack: #ccc;
	--kirmizi: #ac5558;
  
}
html {scroll-behavior:smooth;}

body{font-family: "Roboto", sans-serif; font-weight: 400; font-size: 15px; background: var(--mainBack); 
	width: 100vw; min-height: 100vh; box-sizing: border-box; overflow-x: hidden;   padding: 0;margin: 0;}
* {box-sizing: border-box; font-size: 15px;}
.alignc {text-align: center;} .alignl {text-align: left;} .alignr {text-align: right;}
.block {display: block;} .inline-block {display: inline-block;}
.invisible {visibility: hidden;}
.hidden {display: none!important;}
.noBreak {white-space: nowrap;}
.upTabletOnly {display: none;}
.upTabletOnlyInline {display: none;}
.upTabletOnlyFlex {display: none;}
.upTabletOnlyInlineblock {display: none;}
.bold {font-weight: bold;} .italic { font-style: italic;}
.spinsiz::-webkit-outer-spin-button,
.spinsiz::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.spinsiz { -moz-appearance: textfield;}

.unselectable { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none;
	-moz-user-select: none; -ms-user-select: none; user-select: none;}

p { line-height: 1.75rem; text-align: justify; letter-spacing: .05rem; font-size: 1rem;}
a, button {text-decoration: none; color: inherit; cursor: pointer; }

ul, li {margin: 0; padding: 0; list-style: none;}
h1, h2, h3, h4 {color: #263b0e; font-weight: normal; letter-spacing: 1px;}

h1 {font-size: 1rem; letter-spacing: .1rem; margin: 0; text-indent: -200vw;}
h2 {font-size: 1.3rem; line-height: 1.15rem; display: block;}
h3 {font-size: 1.2rem; padding: 0rem; display: block; text-align: center;}
h4 {font-size: 1rem;}
hr { border: 0; height: 1px; background: #666666; }



#stage{display: flex; width: 100vw; min-height: 100vh; align-items: center; flex-direction: column;}
#stage.footerli { justify-content:space-between; }

#contentBox { display: flex; width: 100%; background: var(--mainBack); justify-content: center;}

.beyazKutu {margin:3rem auto; width:20rem; background: #fff; border-radius: .5rem; padding: 2rem;     
	box-shadow: 2px 2px 2px rgba(128, 128, 128, .4);}
.beyazKutu h2 { color:#922D30;  text-align: center; font-size: 19px; margin: 1.5rem 1rem 2rem;}

.slidingLabel input, .slidingLabel select {padding: .5rem; border: 1px solid #ccc; outline: none; 
	position: absolute; top: 0px; left: 0px; width: 100%; height: 4rem; padding: 1.5rem 1rem .5rem 1rem; 
	border-radius: .4rem;}
.slidingLabel input:focus { border: 1px solid var(--kirmizi); }
.slidingLabel .inputBox, .slidingLabel  .textareaBox { position:relative; height:4rem; width: 100%; display: flex; margin-bottom: 1rem; }

.slidingLabel label {position: absolute; top: 1.5rem;left: 1rem; font-size: .8rem; color: #888; font-style: italic; transition: all 0.2s ease-out;}
.slidingLabel input:not(:placeholder-shown) + label , input:focus + label  { top: .5rem; left: .5rem; color: #aaa; }

option:disabled {color: red; font-style: italic;}

.italic {font-style: italic; }
.alignc {text-align: center;}
.acikrenk { opacity:.5; }
.size90{ font-size:.9rem; }

.btn { cursor: pointer; border: none; display: inline-flex; align-items: center;  text-decoration: none; 
	font-size: .9rem; letter-spacing: 1px;  
	outline: none;  position: relative;   box-shadow: 2px 2px 4px rgba(0,0,0,.2);
	color: #fff; padding:.5rem 1rem; margin-top: 1rem;}
.btn-sepSol { padding-left: 3rem !important;}
.btn-sepSag { padding-right: 3rem !important;}
.btn-sepSag:after, .btn-sepSol:before {  background: rgba(0,0,0,0.15); position: absolute;  height: 100%;
	display:flex; align-items:center; box-sizing: border-box; transition: all 0.3s;}
.btn-sepSag:after { content: "❯"; right: 0; width: 2rem; justify-content: flex-end; padding-right: .7rem;}
.btn-sepSag:hover:after { padding-right: .6rem;}
.btn-sepSol:before { content: "❮"; left: 0; width: 2rem; justify-content: flex-start; padding-left: .7rem;}

.btnK {background: var(--kirmizi);}
.btnGeri, .btnExit {background: #777;}
.btnAcikGri { background: #f2f2f2; color: #999; box-shadow: none; border: 1px solid #ddd;}
.hata-metni { color: var(--kirmizi); font-size: 14px; margin-top: 10px; min-height: 20px; text-align: center; }
.aciklama-metni { color: #666; margin-top: 10px; min-height: 20px; text-align: center; font-style: italic; 
	background: #eee; padding: .4rem;}


/* menu */
.app-card {margin: .5rem; color: #666; text-decoration: none; text-align: center;
	background: #f3f3f3; padding: .5rem .8rem .5rem 5px; display: block; width: 100%;
	 border-left: 1px solid red; position: relative; box-shadow: 1px 1px 2px rgba(100, 100, 100, .2);
}
.app-card:hover {box-shadow: 1px 1px 2px rgba(100, 100, 100, .3);}
.app-card:after {content:'»'; position: absolute; right: .5rem}
.basicLink { text-decoration:none; color:#666; }
.basicLink:after {content:' »';}
.basicLink:hover {  color:var(--kirmizi); }

.hataMesaji {display: flex; padding: 11px; justify-content: center; background-color: #f33; color: #fff; 
	margin-bottom: 1rem;}