:root { 
	--mainBack: #ccc;
	--kirmizi: #ac5558;
	--kizil : #C23B2A;  
	--yesil: #096;
}

@font-face { font-family: 'Roboto'; src: url('/fonts/Roboto-Regular.ttf') format('truetype'); 
	font-weight: 400; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url('/fonts/Roboto-Italic.ttf') format('truetype'); 
	font-weight: 400; font-style: italic; }
@font-face { font-family: 'Roboto'; src: url('/fonts/Roboto-SemiBold.ttf') format('truetype'); 
	font-weight: 600; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url('/fonts/Roboto-Bold.ttf') format('truetype'); 
	font-weight: 700; font-style: normal;}
@font-face { font-family: 'Roboto'; src: url('/fonts/Roboto-BoldItalic.ttf') format('truetype'); 
	font-weight: 700; font-style: italic;}

html {scroll-behavior:smooth; font-size: 15px;}
body{font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 15px; background: var(--mainBack); 
	width: 100vw; min-height: 100dvh; box-sizing: border-box; overflow-x: hidden;   padding: 0;margin: 0;}
* {box-sizing: border-box; font-size: 1rem;}
.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;} .underline {text-decoration: underline;}
.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: square;}
h1, h2, h3, h4 {color: #263b0e; font-weight: normal; letter-spacing: .1rem;}

h1 {font-size: 1rem; letter-spacing: .1rem; margin: 0; text-indent: -200vw;}
h2 {font-size: 1.3rem; line-height: 1.15rem; display: block; color: #009060; margin-bottom: 1.5rem; text-align: center;}
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; 
	flex-direction: column; min-height: calc(100dvh - 3rem);}

.beyazKutu {margin:3rem auto; width:20rem; background: #fff; border-radius: .5rem; padding: 2rem;     
	box-shadow: 2px 2px 2px rgba(128, 128, 128, .4);}
.beyazKutu.genisEkran {max-width: calc(100dvw - 2rem); width: auto;}
.beyazKutu h2 { text-align: center;  margin: 1.5rem 1rem 2rem;}

.slidingLabel input, .slidingLabel select, .slidingLabel textarea {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,
.slidingLabel textarea:not(:placeholder-shown) + label , textarea:focus + label,
.slidingLabel select:not(:placeholder-shown) + label , select: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;}
.btnGri { background: #f3f3f3; }
.simpleBtn {border: 1px solid #ccc; border-radius: 8px; text-align: center; color: #666; padding: 5px; 
	font-size: .9em; box-shadow: 1px 1px 1px #ddd;}
.simpleBtn:hover {box-shadow: 1px 1px 1px #999;}	
.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;}
.textLink { color:#999 }

.yesilBtn {background: #009060; color: white; padding: 0.8rem; border: none; border-radius: 0.3rem; 
	cursor: pointer; font-size: 1rem;}

/* form elemanları */
input, textarea ,select {color: #555555; font-family: 'Open Sans', sans-serif; padding: .5rem;
	font-size: 1rem; background: #f2f2f2; border: 0; height: 3rem;   margin-bottom: 1rem;
	display: inline-block;
  -webkit-box-shadow: inset .1rem .1rem .1rem 0rem rgba(0,0,0,0.2);
  -moz-box-shadow: inset .1rem .1rem .1rem 0rem rgba(0,0,0,0.2);
  box-shadow: inset .1rem .1rem .1rem 0rem rgba(0,0,0,0.2);
}

textarea { height:5rem;}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus
textarea:-webkit-autofill, textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { font-size: 1rem;
    -webkit-text-fill-color: #555555;
    -webkit-box-shadow: inset .1rem .1rem .3rem 100rem #f2f2f2;
    -moz-box-shadow: inset .1rem .1rem .3rem 100rem #f2f2f2;
    box-shadow: inset .1rem .1rem .3rem 100rem #f2f2f2;
}

input:focus, input[type=submit]:active, button:active { outline:none;}

input[type='radio'], input[type='checkbox'] {border:none; height: auto; width: auto; display: inline-block;
  box-shadow: none;}
 ::placeholder { font-style: italic; color: #bbb;}
.coolSelect {padding: .5rem; border-radius: .5rem; border:1px #999 solid;  max-width: 400px; 
	font-size: 0.9rem; outline: none;}
.coolSelect:hover, .coolSelect:focus { box-shadow: 1px 1px 2px rgba(100, 100, 100, .3); }
.acikTr { background: #fff; color: #333; font-style: italic;  }
.koyuTr { background: #f0f0e9; color: #000; border-bottom: 1px solid #fff; }

@media only screen and (min-width: 701px) {
  .menuLink .menuIcon { opacity: .5; transition: opacity 0.5s ease-out;}
  .menuLink:hover .menuIcon { opacity: 1;}
  .beyazKutu { padding: 2rem; max-width: 1000px;}

	#footerBox {grid-auto-flow: column; grid-template-columns: auto auto auto auto; 
		grid-template-rows: auto auto; }
}