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


html {scroll-behavior:smooth; font-size: 14px;}
body{font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 14px; 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;}
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: var(--kirmizi); 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; }
#stage.footersiz {  justify-content:center; }

#contentBox { display: flex; width: 100%; background: var(--mainBack); justify-content: center; 
  flex-direction: column; min-height: calc(100dvh - 6rem);}

.beyazKutu {margin:3rem auto; width:20rem; background: #e9e9e9; 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 #f99; }
.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: .9rem; 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; font-size: .9rem;}

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); }
#headerBox, #footerBox  { font-size: 1rem; color: #333; display: flex; flex-direction: row; width: 100% ; 
  justify-content: space-between; align-items: center; margin:0; background:#eee; height:3rem; 
  overflow: hidden; z-index: 90; display: flex; justify-content: space-between; padding: 0rem .5rem; 
  align-items: center; box-shadow: 0 2px 4px #ccc;}

#uygulamalarUL { list-style:none; }
#uygulamalarUL li {margin-bottom: .5rem;}
#uygulamalarUL li a {padding: 1rem 2rem 1rem 1rem; background: #f9f9f9; display: block; color: #777; 
  border-left: 2px solid #ccc; position: relative;}
#uygulamalarUL li a:after { content: ' »'; position: absolute; right: .5rem; color: #999;}
#uygulamalarUL li a:hover {color: var(--kizil); 
  border-left: 2px solid var(--kizil); }