@import url('https://fonts.googleapis.com/css2?family=Caveat&family=Chakra+Petch:wght@300&family=Signika:wght@700&display=swap');

body{
    background-image: url("/build/images/back.jpg");
}

.sag-card{
    background: rgba(255, 255, 255, 0.5) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(5.1px) !important;
    -webkit-backdrop-filter: blur(5.1px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    display: none !important;
    padding: 48px !important;
}

@media (min-width: 767px) {
    .sag-card{
        animation: slideInOut 1s forwards !important;
    }
}

@media(max-width: 766.98px){
    .sag-card{
        padding: 30px !important;
        animation: fadeIn 2s;
    }
}

.sol-card{
    display: none !important;
    animation: fadeIn 2s;
}

.aktif-div{
    display: block !important;
}

.form-control{
    background-color: rgb(255,255,255,0.5) !important;
    border: 1px solid rgb(255,255,255,0.5) !important;
    padding: 12px 16px !important;
    border-radius: 50px !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    color: rgb(0,0,0,0.6) !important;
}

.form-control::placeholder{
    text-align: center !important;
    font-weight: 300 !important;
    font-size: 14px !important;
    color: rgb(0,0,0,0.3) !important;
}

.form-control:enabled{
    box-shadow: 0px 0px 0px !important;
    background-color: rgb(255,255,255,0.5) !important;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes slideInOut {
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
    0% {
        transform: translateX(50%);
        opacity: 0;
    }
}

.lircode-logo{
    width: 40% !important;
}

.p1{
    font-size: 100px !important;
    transform: rotate(-8deg) !important;
    margin-top: -110px !important;
}

.p2{
    font-size: 70px !important;
    margin-top: -80px !important;
    transform: rotate(-4deg) !important;
}

.p3{
    font-size: 100px !important;
    transform: rotate(-8deg) !important;
    margin-top: -110px !important;
}

.p4{
    font-size: 70px !important;
    margin-top: -70px !important;
    transform: rotate(-4deg) !important;
}

.qrresim{
    width: 60% !important;
}

.alt-bilgi{
    position: fixed !important;
    bottom: 5px !important;
    font-size: 13px !important;
}

@media (max-width: 575.98px) {
    .margin-cihazlar{
        margin-top: -100px !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .margin-cihazlar{
        margin-top: -100px !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px){
    .margin-cihazlar{
        margin-top: -100px !important;
    }
}