@charset "UTF-8";

html {
  scroll-behavior: smooth;
}



#preloader {
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color:#fff;
    z-index:999998;
}
 
#status {
    width:130px;
    height:130px;
    position:absolute;
    left:50%;
    top:50%;
    background-image: url(../img/page-loader.gif);
	background-size: 100%;
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px   -100px;
}


body {
    padding-bottom: 100px;
    background-image: url(../images/bg.svg);
    background-repeat: no-repeat;
    background-size: 150%;
    background-position: center top;
    background-color: #111422;
	outline: none !important;
	-webkit-transition: all 0.2s ease-in-out;
	font-family: 'Inter', sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-decoration: none;
	margin: auto;
    color: #fff !important;
    direction:ltr;
    overflow-x: hidden !important;
}


::selection {
    color: #e5272d;
    background-color: rgba(53,49,137,0.8);
}




.login-frame{
    width: 100%;
    height: 400px;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
}


.login-field{
    background-repeat: no-repeat;
    background-size: auto 40%;
    background-position: 15px center;
    width: 100%;
    color: #fff !important;
    box-shadow:  0px 0px 30px rgba(0,0,0,.4);
    border: none;
    background-color: rgba(27,30,47,0.2);
    backdrop-filter: blur(4px) saturate(300%); 
    -webkit-backdrop-filter: blur(4px) saturate(300%); 
    border-radius: 15px;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 1em;
    padding: 16px 15px 16px 55px !important;
}


.login-field:hover{
    width: 100%;
    color: #000;
    background-color: rgba(27,30,47,0.2);
    backdrop-filter: blur(4px) saturate(500%); 
    -webkit-backdrop-filter: blur(4px) saturate(500%); 
    border-radius: 15px;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 1em;
    padding: 16px 15px 16px 55px !important;
}

.login-field::placeholder{
    color: #999;
}

.login-button{
border:none !important;
outline:none !important;
    width: 100%;
    height: auto;
    padding: 14px 0px;
    border-radius: 15px;
    background-color: #007aff;
    text-align: center;
    font-size: 0.95em;
    font-weight: 500;
color:#fff !important;
}

.login-button:hover{
color:#fff !important;
border:none !important;
outline:none !important;
    width: 100%;
    height: auto;
    padding: 14px 0px;
    border-radius: 15px;
    background-color: #036ee2;
    text-align: center;
    font-size: 0.95em;
    font-weight: 500;
}


.islembitti-button{

    width: 100%;
    height: auto;
    padding: 14px 0px;
    border-radius: 15px;
    background-color: #13c700;
    text-align: center;
    font-size: 0.95em;
    font-weight: 500;
}

.islemdevam-button{
    width: 100%;
    height: auto;
    padding: 14px 0px;
    border-radius: 15px;
    background-color: #e5272d;
    text-align: center;
    font-size: 0.95em;
    font-weight: 500;
}


.frame-static{
    border-radius:15px;
    background-color: #1b1e2f;
    box-shadow: 8px 8px 16px rgba(0,0,0,.32);
}


.frame{
    border-radius:15px;
    background-color: #1b1e2f;
    box-shadow: 8px 8px 16px rgba(0,0,0,.32);
}

.frame:hover{
   background-color: #007aff;
   box-shadow: 0px 0px 16px 2px rgba(0,0,0,.5);
}


.frame:hover img{
    filter: brightness(60);
}


.frame img{
    filter: brightness(1);
}




.frame2{
    border-radius:15px;
    background-color: #1b1e2f;
    box-shadow: 8px 8px 16px rgba(0,0,0,.32);
}


.frame-title{
    font-size: 0.9em;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
    display: block;
}


title{
    font-size: 1.6em;
    font-weight: 500;
    color: rgba(255,255,255,0.65);
    display: block;
}

.fix-header-background{
    width: 100%;
    height: auto;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(4px) saturate(300%); 
    -webkit-backdrop-filter: blur(4px) saturate(300%);  
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 9898;
    position: fixed;
}

.space{
    height: 70px;
}


.bekleyen-bildirim{
    width: 30px;
    height: 30px;
    text-align: center;
    color: #fff;
    font-size: 0.9em;
    font-weight: 700;
    background-color: #e5272d;
    border-radius: 150px;
    line-height: 30px;
}

.bildirim-title-add{
    font-size: 4em;
    font-weight: 300;
    color: #fff;
}

.bildirim-title-ok{
    font-size: 4em;
    font-weight: 300;
    color: #fff;
}

.fiyat-title{
    font-size: 4em;
    font-weight: 300;
    color: #fff;
}


.arama-title{
    font-size: 3em;
    font-weight: 300;
    color: #fff;
}


.big-text{
    font-size: 2em;
    text-transform: uppercase;
    font-weight: 400;
    color: #fff;
}

.bildirim-text{
    font-size: 1em;
    font-weight: 400;
    color: #fff;
}

.bildirim-text2{
    font-size: 0.8em;
    font-weight: 400;
    color: #fff;
}

.bildirim-stext{
    font-size: 0.86em;
    font-weight: 300;
    color: rgba(255,255,255,0.5);
}


.bildirim-frame{ 
    border-radius: 15px;
    background: linear-gradient(194deg, rgba(67,129,255,1) 0%, rgba(67,76,255,1) 100%);
    box-shadow: 0px 8px 40px 1px rgba(67,76,255,.32);
}

.bildirim-frame2{
    background: rgb(250,128,83);
    background: linear-gradient(194deg, rgba(250,128,83,1) 0%, rgba(255,101,165,1) 100%);
    border-radius: 15px;
    box-shadow: 0px 8px 40px 1px rgba(251,101,165,.32);
}



.frame-field{
    font-size: 0.9em;
    width: 100%;
    height: auto;
    padding: 15px 20px;
    border: none;
    outline: none;
    border-radius:15px;
    background-color: #1b1e2f;
    box-shadow: 8px 8px 16px rgba(0,0,0,.32);
    color: #fff;
}


.frame-field:focus{
    width: 100%;
    height: auto;
    padding: 15px 20px;
    border: none;
    outline: none;
    border-radius:15px;
    background-color: #007aff;
    box-shadow: 8px 8px 16px rgba(0,0,0,.32);
    color: #fff;
}

.frame-field::placeholder{
    color: rgba(255,255,255,0.5);
}


.frame-field-arama{
    background-image: url(../images/arama.svg);
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: auto 40%;
    font-size: 0.9em;
    width: 100%;
    height: auto;
    padding: 15px 20px 15px 45px !important;
    border: none;
    outline: none;
    border-radius:15px;
    background-color: #1b1e2f;
    box-shadow: 8px 8px 16px rgba(0,0,0,.32);
    color: #fff;
}


.frame-field-arama:focus{
    width: 100%;
    height: auto;
    padding: 15px 20px 15px 45px !important;
    border: none;
    outline: none;
    border-radius:15px;
    background-color: #007aff;
    box-shadow: 8px 8px 16px rgba(0,0,0,.32);
    color: #fff;
}

.frame-field-arama::placeholder{
    color: #fff;
}






input,
select,
option,
button {
    background-color: #1b1e2f;
    padding: 15px 20px !important;
    -webkit-appearance: none;
}

.select-style{
    background-image: url(../images/list-bg.svg);
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: auto 30%;
}


.control-nav{
    width: 95%;
    height: auto;
    position: fixed;
    bottom: 10px;
    border-radius: 15px;
    left: 0px;
    margin: auto;
    right: 0px;
    z-index: 989898;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(4px) saturate(300%); 
    -webkit-backdrop-filter: blur(4px) saturate(300%);  
}

.control-nav-btn{
    border-radius: 10px;
    text-align: center;
}

.control-nav-btn img{
    filter: brightness(30);
}



.control-nav-btn-act{
    border-radius: 10px;
    background-color: #007aff;
    text-align: center;
}

.control-nav-btn-act img{
    filter: brightness(30);
}

.control-nav-text{
    font-size: 0.65em;
    color: rgba(255,255,255,0.6);
}


.arac-liste-text{
    font-size: 0.9em;
    color: rgba(255,255,255,0.8);
    display: block;
    font-weight: 300;
}

.arac-liste-border-right{
    border-right: 1px solid rgba(255,255,255,0.2);
}



.frame-date{
    background-image: url(../images/date.svg);
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: auto 40%;
    border-radius:15px;
    background-color: #1b1e2f;
    box-shadow: 8px 8px 16px rgba(0,0,0,.32);
}

.frame-date:hover{
   background-color: #007aff;
   box-shadow: 0px 0px 16px 2px rgba(0,0,0,.5);
}