@font-face {
    font-family: Gotham;
    src: url('../fonts/GothamRounded-Light.otf');
    font-weight: 400;
}
@font-face {
    font-family: Gotham;
    src: url('../fonts/GothamRounded-Medium.otf');
    font-weight: 500;
}



@font-face {
    font-family: Gotham;
    src: url('../fonts/GothamRounded-Bold.otf');
    font-weight: 600;
}

@font-face {
    font-family: GothamItalic;
    src: url('../fonts/GothamRounded-LightItalic.otf');
    font-weight: 400;
}
@font-face {
    font-family: GothamItalic;
    src: url('../fonts/GothamRounded-MediumItalic.otf');
    font-weight: 500;
}



@font-face {
    font-family: GothamItalic;
    src: url('../fonts/GothamRounded-BoldItalic.otf');
    font-weight: 600;
}





@font-face {
    font-family: GothamBook;
    src: url('../fonts/GothamRounded-Book.otf');
    font-weight: 500;
}


@font-face {
    font-family: GothamBookItalic;
    src: url('../fonts/GothamRounded-BookItalic.otf');
    font-weight: 500;
}


.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Oran 16:9 için (Genişlik:Yükseklik) */
    overflow: hidden;
}

    .iframe-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none; /* İframe kenarlığını kaldır */
    }

@media (max-width: 768px) {
        .iframe-container {
            display: block;
            width: 100%;
            padding-bottom: 200%; /* Oran 16:9 için (Genişlik:Yükseklik) */
            height: 100vh; /* İstediğiniz yükseklik */
            overflow: hidden; /* İçeriğin dışarı taşmaması için */
            overflow-y: scroll; /* Dikey scroll eklemek için */
            -webkit-overflow-scrolling: touch; /* Daha iyi scroll deneyimi için */
        }

       .iframe-container iframe {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           border: none; /* İframe kenarlığını kaldır */
       }
}

/************************************ SLOT CSS AYARLARI *********************************************************/

/* Genel stiller */
.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.card-body {
    background-color: #fff;
}

.card {
    border: none;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.accordion-title {
    font-weight: bold;
    color: #007bff;
}

.slot-dropdown {
    width: 100%;
}

/* Takvim ve kaydırma stilleri */
#calendar {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: thin; /* Yatay kaydırma çubuğunun kalınlığı */
    scrollbar-color: #214B93 #f8f9fa; /* Yatay kaydırma çubuğunun rengi */
    transform: scaleY(-1);
}

    #calendar::-webkit-scrollbar {
        height: 30px !important; /* Yatay kaydırma çubuğunun yüksekliği */
        background-color: #f8f9fa; /* Yatay kaydırma çubuğunun arka plan rengi */
    }

    #calendar::-webkit-scrollbar-thumb {
        background-color: #214B93; /* Yatay kaydırma çubuğunun dolgu rengi */
        border-radius: 5px; /* Yatay kaydırma çubuğunun köşe yarıçapı */
    }

#calender-table {
    transform: scaleY(-1);
}

.scrollable {
    display: flex;
}

.day {
    margin: 5px;
    padding: 10px;
    border: 1px solid #489AD5;
    border-radius: 10px;
    display: inline-block;
    min-width: 150px; /* Genişlik ayarı */
    box-sizing: border-box;
}

    .day p {
        margin: 0;
        word-wrap: break-word; /* Metni kırma */
    }

        .day p strong {
            font-weight: bold;
        }

.time {
    background-color: #f0f0f0;
    margin: 5px;
    padding: 5px;
    cursor: pointer;
}

.time-list {
    display: flex;
    flex-wrap: wrap; /* Allow slots to wrap */
    flex-direction: column; /* Display slots in a column */
}

.time-slot {
    margin: 5px;
    padding: 5px;
    border: 2px solid orange; /* Updated border */
    cursor: pointer;
    text-align: center;
    display: flex; /* Centering the content */
    align-items: center; /* Centering the content */
    justify-content: center; /* Centering the content */
    border-radius: 8px; /* Added border-radius */
}

    .time-slot:hover {
        background-color: orange; /* Background color on hover */
        color: white; /* Text color on hover */
    }

/* Mobil uyumlu stiller */
@media (max-width: 768px) {
    .scrollable {
        display: flex;
        flex-wrap: nowrap; /* Slotların sarılmasını engelle */
        overflow-x: auto; /* Yatay kaydırma */
        justify-content: flex-start; /* Slotları sola hizalayın */
    }

    .day {
        flex-direction: column;
        width: 200px; /* Her gün öğesinin genişliğini ayarlayın */
        margin: 5px;
        display: inline-block; /* Gün öğelerini yanyana göstermek için */
    }

    .time-list {
        flex-direction: column; /* Mobilde zaman slotlarını dikey hizalayın */
        flex-wrap: nowrap; /* Slotların sarılmasını engelle */
        justify-content: flex-start; /* Slotları sola hizalayın */
    }

    .time-slot {
        width: 100%; /* Slot genişliğini tam yapın */
        margin: 5px 0; /* Slotların arasındaki boşluğu ayarlayın */
    }
}



/************************************ FORM AYARLARI *********************************************************/
.radio {
    position: relative;
    cursor: pointer;
    line-height: 20px;
    font-size: 14px;
    margin: 15px 0;
}
.radio .label {
    position: relative;
    display: block;
    float: left;
    margin-right: 10px;
    width: 20px;
    height: 20px;
    border: 2px solid #57BEE6;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}
.radio .label:after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #57BEE6;
    transform: scale(0);
    transition: all 0.2s ease;
    opacity: 0.08;
    pointer-events: none;
}
.radio:hover .label:after {
    transform: scale(3.6);
}
input[type="radio"]:checked + .label {
    border-color: #57BEE6;
}
input[type="radio"]:checked + .label:after {
    transform: scale(1);
    transition: all 0.2s cubic-bezier(0.35, 0.9, 0.4, 0.9);
    opacity: 1;
}


input[type="checkbox"]:checked + .label {
    border-color: #57BEE6;
}
input[type="checkbox"]:checked + .label:after {
    transform: scale(1);
    transition: all 0.2s cubic-bezier(0.35, 0.9, 0.4, 0.9);
    opacity: 1;
}
.cntr {
    position: absolute;
    top: calc(50% - 10px);
    left: 0;
    width: 100%;
    text-align: center;
}
.hidden {
    display: none;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #829AAD !important;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #829AAD !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #829AAD !important;
}




/******************************** NAV BAR *********************************************************/
.navbar{
    z-index: 9999;
}
.light .navbar{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
}



.navbar .navbar-brand img{
    max-width: 180px;
    transform: translateY(-3px);
}


.navbar .nav-item{
    margin-left:25px;
}

.navbar .nav-item > a{
    color:#F28D04 !important;
    cursor:pointer;
    font-family: Gotham;
    font-weight: 500;
    text-transform: uppercase;
    font-size:14px;

}

.navbar .nav-item .dropdown-menu a{
    color:#F28D04 !important;
    font-size:14px;
    font-family: Gotham;
    font-weight: 400;
}

.navbar .dropdown-item:hover + .alt-menu{
    height: auto;
}
.navbar .nav-item .alt-menu:hover{
    height:auto;
}

.navbar .nav-item .alt-menu{
    padding-left: 37px;
    padding-right: 15px;
    height:0;
    overflow: hidden;
    transition: all 1s ease-out;
}

.navbar .nav-item .alt-menu a{
    display: block;
    white-space: nowrap;
}
.navbar .nav-item .alt-menu .dropdown-item{
    display: none;
}


.navbar .extra-links{
    display: inline-block;
    margin-right:15px;

}

.navbar .extra-links a{
    font-size:12px;
    font-family: GothamBook;
    font-weight: 500;
    color:#F28D04;
    text-decoration: none;
}

.navbar input.ara{
    border-color:#F28D04;
}


.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(38,109,176,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}

.navbar-toggler {

}






/****************************************** SLİDER ******************************************/
.slick-arrow{
    display: none !important;
}


.slick-slide {
    outline: none !important;
}




/**************************** UZMANLARIMIZLA GÖRÜŞÜN ********************/
#uzman_gorus{
    max-width: 300px;
    position: absolute;
    top: 180px;
    left: 180px;
    text-align: center;
}


    #uzman_gorus * {
        font-family: Gotham;
        color: #F28D04;
    }

    #uzman_gorus .gorus{
        font-weight: 600;
        font-size:24px;
    }


#uzman_gorus .form-control{
    border:1px solid #57BEE6;
    border-radius: 8px;
    text-indent: 18px;
    background-repeat: no-repeat;
    background-position: left center;
}

    #uzman_gorus #Email {
        background-image: url('../images/home/kullanici_adi.png');
        margin-top: 15px;
    }

    #uzman_gorus #Password {
        background-image: url('../images/home/sifre.png')
    }



    #uzman_gorus button.btn {
        background-color: #F28D04;
        border-color: #F28D04;
        color: white;
        margin-top: 7px;
        font-size: 14px;
    }


    #uzman_gorus .sifremi_unuttum{
        text-align: right;
        font-size:12px;
        margin-top:15px;
    }

    #uzman_gorus .sifremi_unuttum a{
        font-weight: 500;
        text-decoration: none;
    }


    /*********************************** MENU ************************************************/
    #menu{
        width: 250px;
        background: #F2F2F2;
        border-radius: 20px;
        position: absolute;
        top: 150px;
        left: 25px;
        z-index: 2;
    }

        #menu .ust {
            height: 250px;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            position: relative;
            background: rgb(242,141,4);
            background: radial-gradient(circle, rgba(242,141,4,1) 0%, rgba(242,141,4,1) 48%, rgba(242,141,4,1) 71%);
        }


            #menu .ust .foto {
                background: #F28D04;
                width: 180px;
                height: 180px;
                border-radius: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate( -50%, -50% );
                background-position: center center;
                -webkit-box-shadow: 0px 7px 9px 0px rgba(48,47,48,0.7);
                -moz-box-shadow: 0px 7px 9px 0px rgba(48,47,48,0.7);
                box-shadow: 0px 7px 9px 0px rgba(48,47,48,0.7);
            }

            #menu .ust .mini-bar {
                height: 5px;
                width: 100%;
                background: #F28D04;
                position: absolute;
                bottom: 5px;
                left: 0;
            }


#menu .kullanici{
    font-family: GothamBook;
    color:white;
    background: #67737f;
    padding:7px 15px 2px 15px;
    position: relative;
}

#menu .kullanici .unvan{
    font-size:12px;
    opacity: .6;
    transform: translateY(-5px);
    display: inline-block;
}


#menu .kullanici .bttn-default{
    position: absolute;
    top:50%;
    left:auto;
    right:20px;
    transform:translateY(-50%);
}


#menu .nav{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
}

#menu .nav ul{
    padding:0;
    width: 100%;
    margin:0;
}

#menu .nav li{
    list-style: none;
    padding:5px 0;
    width: 100%;
    border-bottom:1px solid #e1e0e0;
}

#menu .nav li.aktif{

}

    #menu .nav li.aktif a {
        color: white;
        background: rgb(242,141,4);
        background: linear-gradient(0deg, rgba(242,141,4,1) 0%, rgba(242,141,4,1) 100%);
    }




    #menu .nav li a {
        display: inline-block;
        padding: 5px;
        width: 100%;
        color: #F28D04;
        text-decoration: none;
        border-radius: 5px;
        background: rgb(255,255,255);
        background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(237,236,237,1) 100%);
        font-family: GothamBook;
        font-size: 14px;
    }

#menu .nav li a span:last-child{
    display: inline-block;
    transform:translateY(-9px);
}


#menu .kulakcik {
    display: none;
    padding: 10px;
    position: absolute;
    background: #F28D04;
    top: 10px;
    right: -48px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 3px 3px 3px rgba(0,0,0,.5);
}

#menu .kulakcik [class^='bttn-']{
    transform: translateY(3px);
}

#menu .kulakcik [class^='bttn-'] .hamburger{
    display: none;
}


#menu.hide .kulakcik [class^='bttn-'] .hamburger{
    display: inline;
}

#menu.hide .kulakcik [class^='bttn-'] .kapat{
    display: none;
}


#menu span.doktor{
    display: inline-block;
    padding: 10px 0 15px;
}

/**************************  BUTTONLAR *************************************/
[class^='bttn-']{
    width: 30px;
    height:30px;
    display: inline-block;
    border-radius: 100%;
    position: relative;
    background: rgb(236,236,236);
    background: linear-gradient(0deg, rgba(236,236,236,1) 0%, rgba(189,189,189,1) 100%);
}

[class^='bttn-']:before{
    content: '';
    display: inline-block;
    position: absolute;
    width: 26px;
    height:26px;
    top:2px;
    left:2px;
    border:1px solid #808080;
    border-radius: 100%;
    background: rgb(237,236,237);
    background: linear-gradient(0deg, rgba(237,236,237,1) 0%, rgba(255,255,255,1) 100%);

}

[class^='bttn-'] img{
    position: absolute;;
    display: inline-block;
    width:15px;
    left:50%;
    top:50%;
    transform:translate( -50%, -50% )
}


.bttn-success:before{
    border-color:#158737;
    background: rgb(21,135,55);
    background: linear-gradient(0deg, rgba(21,135,55,1) 0%, rgba(120,184,42,1) 100%);
}

.bttn-info:before{
    border-color:#3B7EAC;
    background: rgb(59,126,172);
    background: linear-gradient(0deg, rgba(59,126,172,1) 0%, rgba(115,193,237,1) 100%);
}

.bttn-alert:before{
    border-color:#CD1D17 ;
    background: rgb(205,29,23);
    background: linear-gradient(0deg, rgba(205,29,23,1) 0%, rgba(237,107,88,1) 100%);
}

.bttn-purple:before{
    border-color:#7d2463;
    background: rgb(125,36,99);
    background: linear-gradient(0deg, rgba(125,36,99,1) 0%, rgba(173,12,94,1) 100%);
}

.bttn-danger:before{
    border-color:#e29500;
    background: rgb(226,149,0);
    background: linear-gradient(0deg, rgba(226,149,0,1) 0%, rgba(235,201,0,1) 100%);
}





/*********************************** DOKTORLAR *****************************************/
#doktorlar{
    margin-top:-140px;
}


#doktorlar *{
    font-family: Gotham;
}


#doktorlar .col-lg-6 > .row{
    padding:15px;
}
#doktorlar .col-lg-6  .col-5{
    background-position: left center;
    background-size:cover;

    text-align: center;
    min-height: 334px !important;
}

#doktorlar .col-lg-6  .col-5 > div{
    position: absolute;
    top: 50%;
    width: 100%;
    left: 0;
    transform: translateY(-50%);
    padding: 25px;
    margin: 0 auto;
}

#doktorlar .col-lg-6  .col-5 > div p{
    color:white;
    font-size:14px;
}

#doktorlar .col-lg-6  .col-5 > div a.btn{
    color:#266DB0;
    background-color:#86D2DF;
    border-color:#86D2DF;
    font-size:14px;
}


#doktorlar .col-lg-6  .col-7{
    background-position: right center;
    background-size:auto;
}



/*********************************** HEREAWAY HAKKINDA *****************************************/
#hakkinda{
    background-image:url('../images/home/hakkinda_bg.png');
    background-position:center center;
}

#hakkinda * {
    font-family: Gotham;
    color:#266DB0;
}

#hakkinda .col-lg-6{
    min-height:700px;
}

#hakkinda .col-lg-6 > div{
    padding: 25px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}




/***************************************** FOOTER ***************************************************************/
#footer {
    background: #214B93;
    padding: 15px 30px;
}
#footer * {
    font-family: Gotham;
    color:white;
    font-size:14px;
}

#footer .kol{
    padding:15px;
    padding-top:30px;
    border-right:1px solid white
}

#footer .kol:last-child{
    border-right:none;
}

#footer a.social{
    margin-right:5px;
    cursor:pointer;
}
#footer li{
    list-style: none;
}

#footer li a{
    text-decoration: none;
}

#footer ul{
    padding-left:0;
}

#footer .alt-menu{
    margin-bottom:0;
    padding-left:15px;
    display: none;
}

#footer li:hover > .alt-menu{
    display: block;
}

#footer form{
    max-width: 300px;
}

#footer .form-control{
    border:1px solid white;
    background: none;
}


#footer button.btn{
    color:#266DB0;
    background-color:white;
    border-color:white;
}










@media (max-width:1400px){
    #doktorlar{
        margin-top:-80px;
    }
}




@media (max-width:1280px){
    .navbar .nav-item{
        margin-left:0;
    }


    #uzman_gorus{
        left:30px;
    }


    #doktorlar{
        margin-top:0;
    }

    #menu{
        position: absolute;
        left: 0;
        top:90px;
        transition: all 300ms ease-out;
        z-index: 1;
        box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
    }
    #menu .kulakcik{
        display: inline-block;
    }
    #menu.hide{
        left:-255px;
    }

}








@media (max-width:1100px){
    #uzman_gorus{
        top:80px;
    }
}





@media (max-width:992px){
    #hakkinda{
        background-position: left center;
    }
    #hakkinda .col-lg-6{
        min-height: auto;
    }

    #hakkinda .col-lg-6 > div{
        position: static;
        transform:none;
    }


    #footer .kol{
        border-right:none;
    }
}












@media (max-width:900px){
    #uzman_gorus{
        position: static;
        margin:0 auto;
        margin-top:30px;

    }

    #doktorlar{
        margin-top:50px;
    }
}




@media (max-width:500px){
    .navbar-collapse{
        background:white;
    }

    #doktorlar .col-lg-6  .col-5 > div{
        padding:5px;
    }

    #doktorlar .col-lg-6  .col-5 > div p{
        font-size:12px;
    }

    #doktorlar .col-lg-6  .col-5 > div a.btn{
        font-size:12px;
    }
}