.disabled {
    background-color:brown;
    color:white;
    cursor: not-allowed;
    text-align: center;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

input[type="radio"]:checked + span {
    background-color: #4caf50;
    height: 100px;
    width: 123px;
    color: white;
    border-color: #4caf50;
    display: flex;
    justify-content: center;
    align-items: center;
}

section .alert {
    position: absolute;
    top: 130px;
    width: 100%;
    text-align: center;
    font-size: 24px;
    z-index: 1;
}

section {
    font-family: "Inria Sans", sans-serif;
    font-size: 17px;
    font-weight: 300;
    top:90px;
    justify-content: center;
}

#form_content {
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
}

form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: max-content max-content max-content max-content;
    grid-template-areas:
        'tarih soru1'
        'saat soru2'
        'saat soru3'
        'saat butonlar'
    ;
    gap: 1px 20px;
}

form p:nth-of-type(1) #id_randevutarihi {
    grid-area: tarih;
    width: 100%;
    font-size: 50px;
    text-align: center;
    border: 2px solid #70689d;
    border-radius: 5px;
    color: #70689d;
}

.radio-group {
    grid-area: saat;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.radio-group .saat-label input {
    display: none;
}

.saat-label {
    background-color: #70689d;
    color: white;
    font-weight: 600;
    font-size: 25px;
    border-radius: 5px;
    width: 123px;
    height: 100px;
    margin: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.saat-label:hover {
    background-color: #70689d80;
}

form p:nth-of-type(4) {
    grid-area: soru1;
}
form p:nth-of-type(4) textarea{
    height: 120px;
    border: 2px solid #70689d;
}

form p:nth-of-type(5) {
    grid-area: soru2;
}
form p:nth-of-type(5) textarea{
    height: 120px;
    border: 2px solid #70689d;
}

form p:nth-of-type(6) {
    grid-area: soru3;
}
form p:nth-of-type(6) textarea{
    height: 120px;
    border: 2px solid #70689d;
}

#butonlar {
    grid-area: butonlar;
    display: flex;
    justify-content: center;
    align-items: center;
}

#butonlar input {
    width: 45%;
    margin: 0px 10px;
}

p>label {
    display: none;
}

#randevuolustur, #odemeyap {
    text-align: center;
    text-decoration: none;
    color: #70689d;
    background-color:gainsboro;
    padding: 15px 40px;
    border: 1px solid #70689d;
    border-radius: 5px;
    font-size: 18px;
    margin-top: 10px;
}

#randevuolustur:hover {
    background-color:#70689d;
    color: white;
}

#odemeyap:hover {
    background-color:#70689d;
    color: white;
}

#odemeyap:disabled:hover {
    background-color: gainsboro;
    color: #70689d;
}

#meetingcards {
    width: max-content;
    margin: 50px 80px 50px 80px;
}

@media screen and (max-width:1200px) {
    section .alert {
        position: fixed;
        top: 100px;
        width: 100%;
        text-align: center;
        font-size: 18px;
    }

    section {
        font-family: "Inria Sans", sans-serif;
        font-size: 17px;
        font-weight: 300;
        height: 100vh;
        top:190px;
        justify-content: center;
    }

    #form_content {
        width: 70%;
    }

    form {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: max-content max-content max-content max-content max-content max-content;
        grid-template-areas:
            'tarih'
            'saat'
            'soru1'
            'soru2' 
            'soru3'
            'butonlar'
        ;
        gap: 1px 20px;
    }

    .disabled {
        height: 100px;
    }
    
    input[type="radio"]:checked + span {
        height: 100px;
        width: 90px;
    }

    .saat-label{
        font-size: 23px;
        border-radius: 5px;
        width: 90px;
        height: 100px;
        margin: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #meetingcards {
        margin: 0px 15% 30px 15%;
    }
}

@media screen and (max-width:1000px) {
    section .alert {
        position: fixed;
        top: 100px;
        width: 100%;
        text-align: center;
        font-size: 16px;
    }

    #form_content {
        width: 70%;
    }

    .disabled {
        height: 75px;
    }
    
    input[type="radio"]:checked + span {
        height: 75px;
        width: 75px;
    }

    .saat-label {
        font-weight: 600;
        font-size: 15px;
        border-radius: 5px;
        width: 75px;
        height: 75px;
        margin: 3px;
    }

    .disabled {
        height: 75px;
    }

    #id_randevusaati div {
        font-size: 21px;
        border-radius: 5px;
        width: 105px;
        height: 100px;
        margin: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media screen and (max-width:850px) {
    section .alert {
        position: fixed;
        top: 100px;
        width: 100%;
        text-align: center;
        font-size: 16px;
    }

    #form_content {
        width: 70%;
    }

    .disabled {
        height: 50px;
    }
    
    input[type="radio"]:checked + span {
        height: 50px;
        width: 50px;
    }

    .saat-label {
        font-weight: 600;
        font-size: 15px;
        border-radius: 5px;
        width: 50px;
        height: 50px;
        margin: 3px;
    }

    .disabled {
        height: 50px;
    }

    #id_randevusaati div {
        font-size: 21px;
        border-radius: 5px;
        width: 95px;
        height: 100px;
        margin: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #butonlar {
        grid-area: butonlar;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #butonlar input {
        width: 70%;
        margin: 10px 10px;
        text-align: center;
    }

   

    #randevuolustur {
        padding: 15px 0px;
        border: 1px solid #70689d;
        border-radius: 5px;
        font-size: 18px;
        margin-top: 10px;
    }
}