:root {
    --baslikcolor: rgb(0, 99, 99);
    --baslikcolorbg: rgb(0, 116, 116);
    --baslikhovercolor: rgb(22, 155, 155);
}

@media (min-width: 1200px) {
    .infodiv {
        position: fixed;
        top: -100px;
    }

    .mobilmenudiv {
        display: none;
    }

    .mobilmenuacbtn {
        display: none;
    }

    .header_container {
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
        height: auto;
        border-bottom: 1px solid #ddd;
        box-shadow: 0px 0px 5px #ddd;
        background-color: #fff;
    }

    .profilgirisdiv {
        position: relative;
        top: 0px;
        left: 50%;
        transform: translate(-50%);
        width: 100%;
        height: 0px;
        background-color: #fff;
        box-shadow: 0px 10px 5px #ddd;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        transition: .2s ease;
        margin-bottom: 0px;
    }

    .profilgirisdiv2 {
        display: none;
    }

    .profilgirisdiv div input {
        width: 200px;
        padding: 5px 12px;
        background-color: #fff;
        box-shadow: 0px 2px 5px #aaa;
        color: #333;
        border: none;
        border: 1px solid #ddd;
        margin: 0px 10px;
        font-size: 16px;
        border-radius: 5px;
    }
    .profilgirisdiv div button {
        width: 200px;
        padding: 5px 12px;
        background-color: #fff;
        box-shadow: 0px 2px 5px #aaa;
        color: #333;
        border: none;
        border: 1px solid #ddd;
        margin: 0px 10px;
        font-size: 16px;
        border-radius: 5px;
    }

    .profilgirisdiv div input:focus {
        border: 2px solid teal;
    }

    .profilgirisdiv div input[type=submit] {
        cursor: pointer;
    }

    .profilgirisdiv div input[type=submit]:hover {
        border: 2px solid teal;
    }

    .profilgirisdiv div i {
        color: teal;
        font-size: 28px;
        float: left;
        margin-right: 10px;
        text-shadow: 0px 3px 5px #777;
    }

    .profilgirisdiv .profila {
        cursor: pointer;
    }

    .header_container .logo {
        text-align: center;
    }

    .header_container .logo .logoaheader2 {
        color: #000;
        text-align: center;
        font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
        font-size: 70px;
        font-weight: bold;
        letter-spacing: -1px;
        cursor: pointer;
    }

    .header_container .logo .logoaheader2 img {
        width: 200px;
        height: auto;
    }

    .roads {
        position: relative;
        height: 35px;
        cursor: default;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .roads .div1 {
        position: relative;
        top: 0px;
        left: 0px;
        width: 120px;
        height: 35px;
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items: center;
    }

    .roads .cscsdiv1btn1 {
        position: relative;
        top: 0px;
        left: 0px;
        width: 35px;
        height: 35px;
        margin: 0px;
        border: none;
        color: #555;
        font-size: 18px;
        transform: rotate(0deg);
        cursor: pointer;
        transition: 0.2s ease-in-out;
        background-color: transparent;
        border-radius: 5px;
    }

    .roads .cscsdiv1btn1:hover {
        background-color: #eee;
        color: #111;
    }

    .roads .cscsdiv1btn2 {
        position: relative;
        top: 0px;
        left: 0px;
        width: 35px;
        height: 35px;
        margin: 0px 5px;
        margin-right: 50px;
        border: none;
        color: #555;
        font-size: 18px;
        transform: rotate(90deg);
        cursor: pointer;
        transition: 0.2s ease-in-out;
        background-color: transparent;
        border-radius: 5px;
    }

    .roads .cscsdiv1btn2:hover {
        background-color: #eee;
        color: #111;
    }

    .roads .div1 .cscsdiv1btn1:hover {
        background-color: #eee;
    }

    .roads .div2 {
        position: relative;
        top: 0px;
        left: 0px;
        width: 950px;
        height: 35px;
        text-align: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .roads .div3 {
        position: relative;
        top: 0px;
        left: 0px;
        width: 120px;
        height: 35px;
    }

    .roads .div1 .headerdivleftmenubtn {
        border: none;
        background-color: transparent;
    }

    .roads a {
        color: #333;
        font-family: "Times New Roman", Times, serif;
        transition: 0.3s ease;
        padding: 5px 10px;
        font-weight: bold;
        font-size: 12px;
        letter-spacing: -0px;
        border-radius: 5px;
        margin: 0px;
        text-decoration: none;
    }

    .roads a:hover {
        background-color: #eee;
    }

    .roads .dibgobtn{
        position: relative;
        top: 0px;
        left: 0px;
        width: 50px;
        height: 100%;
        overflow: hidden;
        border: none;
        background-color: transparent;
        cursor: pointer;
    }
    .roads .dibgobtn img{
        position: relative;
        width: 30px;
        height: 30px;

    }


    .dibgosohbetbalondiv{
        position: fixed;
        top: -100%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 500px;
        height: 700px;
        z-index: 100;
        background: linear-gradient(#9d00bd 20%, #3301a8 50%, #007bce 80%);
        border: 5px solid #fff;
        border-radius: 10px;
        overflow: hidden;
        box-sizing: content-box;
        transition: .5s ease;
    }
    .dibgobalonustdiv{
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 50px;
        background-color: transparent;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0px 10px;
    }
    .dibgobalonustdiv img{
        position: relative;
        top: 0px;
        left: 0px;
        width: 30px;
        height: 30px;
        transition: 1s ease;
    }
    .dibgobalonustdiv button{
        position: relative;
        top: 0px;
        left: 0px;
        width: 30px;
        height: 30px;
        border: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        color: #fff;
        padding: 10px;
        border-radius: 20px;
        font-size: 18px;
        cursor: pointer;
    }
    .dibgobalonsohbetodadiv{
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 600px;
        background-color: transparent;
        color: #ddd;
        padding: 10px;
        overflow: auto;
        border-top: 3px solid #ffffff30;
        border-bottom: 3px solid #ffffff30;
        transition: .5s ease;
        font-size: 8px;
    }
    .msghours{
        position: relative;
        width: 20px;
        font-size: 10px;
        margin-left: 5px;
        margin-right: 5px;
        color: #fff;
        background-color: transparent;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .dibgobalonsohbetodadiv span.dibgoyazispan{
        display: inline-block;
        color: #fff;
        padding-left: 50px;
        border-radius: 10px;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: right;
        margin: 10px;
    }
    .dibgobalonsohbetodadiv span.dibgoyazispan img{
        position: relative;
        top: 0px;
        left: 0px;
        width: 20px;
        height: 20px;
        overflow: hidden;
        border-radius: 20px;
        float: right;
        margin-left: 10px;
        background-color: transparent;
    }
    .dibgobalonsohbetodadiv span.dibgoyazispan p{
        position: relative;
        top: 0px;
        left: 0px;
        width: 350px;
        height: auto;
        border-radius: 10px;
        padding: 10px;
        font-size: 12px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #00000030;
    }
    .dibgobalonsohbetodadiv span.questyazispan{
        display: inline-block;
        color: #fff;
        padding-right: 50px;
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: left;
        margin: 10px;
    }
    .dibgobalonsohbetodadiv span.questyazispan i{
        position: relative;
        top: 0px;
        left: 0px;
        width: 30px;
        height: 30px;
        font-size: 18px;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        float: left;
        margin-right: 5px;
    }
    .dibgobalonsohbetodadiv span.questyazispan p{
        position: relative;
        top: 0px;
        left: 0px;
        width: 350px;
        height: auto;
        border-radius: 10px;
        padding: 10px;
        font-size: 12px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        background-color: #ffffff30;
    }
    .dibgobalonaltdiv{
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 50px;
        color: #222;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .dibgobalonaltdiv .altdivsendtexttxtarea{
        position: relative;
        top: 0px;
        left: 0px;
        width: 440px;
        height: 30px;
        resize: none;
        border-radius: 5px;
        color: #222;
        background-color: #fff;
        border: none;;
        padding: 5px 10px;
    }
    .dibgobalonaltdiv .altdivsendtexttxtarea:focus{
        border: 2px solid #009cc4;
    }
    .dibgobalonaltdiv .altdivsendtextbtn{
        position: relative;
        top: 0px;
        left: 0px;
        width: 40px;
        height: 30px;
        border-radius: 5px;
        background-color: transparent;
        color: #fff;
        font-size: 18px;
        border: none;
        cursor: pointer;
        transition: .2s ease;
    }
    .dibgobalonaltdiv .altdivsendtextbtn:hover{
        color: #00ccff;
    }
    .sifreunuttumbtn{
        display: none;
    }

}

@media (max-width: 1200px) {
    .mobilmenudiv {
        display: none;
        background-color: var(--baslikcolor);
    }
    .dibgosohbetbalondiv{
        display: none;
    }

    .mobilmenudiv a {
        color: #fff;
    }

    .mobilmenuacbtn {
        display: none;
        color: #fff;
    }

    .mobilmenuacbtn i {
        color: var(--baslikcolor);
    }

    .mobilmenudiv i {
        color: var(--baslikhovercolor);
    }

    .header_container {
        position: fixed;
        top: calc(100% - 50px);
        left: 0px;
        width: 100%;
        height: 50px;
        border-top: 1px solid #aaa;
        border-bottom: 1px solid #aaa;
        overflow: hidden;
        background-color: #fff;
        z-index: 104;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .profilgirisdiv {
        display: none;
    }

    .profilgirisdiv2 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 0px;
        background-color: #fafafa;
        box-shadow: inset 0px 0px 5px #aaa;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        transition: .2s ease;
        margin-bottom: 10px;
        z-index: 103;
    }
    .profilgirisdiv2geribtn{
        position: relative;
        top: 20px;
        padding: 10px 20px;
        background-color: darkred;
        color: #fff;
    }

    .profilgirisdiv2 div {
        width: 100%;
        padding: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .profilgirisdiv2 div input {
        width: 100%;
        padding: 12px 20px;
        background-color: #fff;
        color: #333;
        border: none;
        border: 1px solid #ddd;
        margin: 0px 10px;
        font-size: 16px;
        border-radius: 5px;
        margin-bottom: 20px;
    }

    .profilgirisdiv2 div input:focus {
        border: 2px solid teal;
    }

    .profilgirisdiv2 div input[type=submit] {
        cursor: pointer;
    }

    .profilgirisdiv2 div input[type=submit]:hover {
        border: 2px solid teal;
    }

    .profilgirisdiv2 div i {
        color: teal;
        font-size: 100px;
        float: left;
        margin-right: 10px;
    }

    .profilgirisdiv2 .profila {
        cursor: pointer;
    }

    .header_container .logo {
        text-align: center;
        width: 50px;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .header_container .logo .logoaheader2 {
        color: #000;
        width: 50px;
        height: 100%;
        overflow: hidden;
        text-align: center;
        font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
        font-size: 0px;
        font-weight: bold;
        letter-spacing: -1px;
        cursor: pointer;
        padding: 3px;
    }

    .header_container .logo .logoaheader2 img {
        position: relative;
        top: 0px;
        width: auto;
        height: 100%;
    }

    .mobilmenudiv {
        position: fixed;
        top: -50px;
        left: 0px;
        width: 100%;
        height: 0px;
        background-color: #eee;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: end;
        transition: .2s ease;
        overflow: hidden;
        z-index: 101;
        padding-bottom: 30px;
    }

    .mobilmenudiv a {
        color: #555;
        padding: 10px;
        font-size: 18px;
        margin-bottom: 2px;
    }

    .mobilmenuacbtn {
        display: block;
        position: fixed;
        top: calc(100% - 50px);
        right: 0px;
        height: 50px;
        width: 50px;
        font-size: 20px;
        color: #555;
        background-color: transparent;
        border: none;
        z-index: 105;
        padding: 5px 10px;
    }

    .mobilmenudiv a.otukapa {
        background-color: crimson;
        color: #fff;
        border-radius: 5px;
        padding: 10px 20px;
    }

    .roads {
        display: none;
    }
    .sifreunuttumbtn{
        width: 100%;
        padding: 12px 20px;
        background-color: #c9c9c9;
        color: #111;
        border: none;
        border: 1px solid #ddd;
        margin: 0px 10px;
        font-size: 16px;
        border-radius: 5px;
        margin-bottom: 20px;
        text-align: center;
    }
}

@media (max-width: 700px) {
    .mobilmenudiv {
        display: none;
        background-color: var(--baslikcolor);
    }
    .dibgosohbetbalondiv{
        display: none;
    }

    .mobilmenudiv a {
        color: #fff;
    }

    .mobilmenuacbtn {
        display: none;
        color: #fff;
    }

    .mobilmenuacbtn i {
        color: var(--baslikcolor);
    }

    .mobilmenudiv i {
        color: var(--baslikhovercolor);
    }

    .header_container {
        position: fixed;
        top: calc(100% - 50px);
        left: 0px;
        width: 100%;
        height: 50px;
        border-top: 1px solid #aaa;
        border-bottom: 1px solid #aaa;
        overflow: hidden;
        background-color: #fff;
        z-index: 104;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .profilgirisdiv {
        display: none;
    }

    .profilgirisdiv2 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 0px;
        background-color: #fafafa;
        box-shadow: inset 0px 0px 5px #aaa;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        transition: .2s ease;
        margin-bottom: 10px;
        z-index: 103;
    }
    .profilgirisdiv2geribtn{
        position: relative;
        top: 20px;
        padding: 10px 20px;
        background-color: darkred;
        color: #fff;
    }

    .profilgirisdiv2 div {
        width: 100%;
        padding: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .profilgirisdiv2 div input {
        width: 100%;
        padding: 12px 20px;
        background-color: #fff;
        color: #333;
        border: none;
        border: 1px solid #ddd;
        margin: 0px 10px;
        font-size: 16px;
        border-radius: 5px;
        margin-bottom: 20px;
    }

    .profilgirisdiv2 div input:focus {
        border: 2px solid teal;
    }

    .profilgirisdiv2 div input[type=submit] {
        cursor: pointer;
    }

    .profilgirisdiv2 div input[type=submit]:hover {
        border: 2px solid teal;
    }

    .profilgirisdiv2 div i {
        color: teal;
        font-size: 100px;
        float: left;
        margin-right: 10px;
    }

    .profilgirisdiv2 .profila {
        cursor: pointer;
    }

    .header_container .logo {
        text-align: center;
        width: 50px;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .header_container .logo .logoaheader2 {
        color: #000;
        width: 50px;
        height: 100%;
        overflow: hidden;
        text-align: center;
        font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
        font-size: 0px;
        font-weight: bold;
        letter-spacing: -1px;
        cursor: pointer;
        padding: 3px;
    }

    .header_container .logo .logoaheader2 img {
        position: relative;
        top: 0px;
        width: auto;
        height: 100%;
    }

    .mobilmenudiv {
        position: fixed;
        top: -50px;
        left: 0px;
        width: 100%;
        height: 0px;
        background-color: #eee;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: end;
        transition: .2s ease;
        overflow: hidden;
        z-index: 101;
        padding-bottom: 30px;
    }

    .mobilmenudiv a {
        color: #555;
        padding: 10px;
        font-size: 18px;
        margin-bottom: 2px;
    }

    .mobilmenuacbtn {
        display: block;
        position: fixed;
        top: calc(100% - 50px);
        right: 0px;
        height: 50px;
        width: 50px;
        font-size: 20px;
        color: #555;
        background-color: transparent;
        border: none;
        z-index: 105;
        padding: 5px 10px;
    }

    .mobilmenudiv a.otukapa {
        background-color: crimson;
        color: #fff;
        border-radius: 5px;
        padding: 10px 20px;
    }

    .roads {
        display: none;
    }
    .sifreunuttumbtn{
        width: 100%;
        padding: 12px 20px;
        background-color: #c9c9c9;
        color: #111;
        border: none;
        border: 1px solid #ddd;
        margin: 0px 10px;
        font-size: 16px;
        border-radius: 5px;
        margin-bottom: 20px;
        text-align: center;
    }
}