/*--------------------------------------------------BÖLGE BİLGİ KARTI SİTİLLERİ*/
.models-card-container{
    width: 100%; height: calc(100vh - 200px); padding-top: 120px; display: flex; flex-direction: column; background-color: rgb(230, 231, 232);
}

.models-card-label{
    width: 90%; height: 15%; margin: auto; display: flex; align-items: center;
}
.models-card-label-text{
    width: 100%; height: auto;
}
.models-card-label-button{
    width: auto; height: 75px; display: flex; justify-content: flex-end; border: none;
}
/**/
.button-style{
    min-width: 250px; padding: 20px; outline:1px solid rgb(3, 25, 43); outline-offset:1px; flex: 1 auto; text-align:center; background:#eee; transition: all 0.3s ease-out;
}
.button-style:hover{
    outline:1px solid rgb(3, 25, 43); outline-offset:5px;
}
/**/

.models-card-main-content{
    width: 100%; height: 85%; display:flex; flex-direction: column;
}
.models-card-main-content-inside{
    width: 100%; min-height: 95%; display: flex;
}

.models-card-arrow{
    width: 5%; height: 100%; display: flex; cursor: pointer;
}
.models-card-arrow img{
    height: 40%;
    width: 40%;
    margin: auto;
    transition: 0.5s;
}
#models-card-arrow-left:hover img{
    transform: translateX(-5px);
}
#models-card-arrow-right:hover img{
    transform: translateX(5px);
}

.models-card-main-text-side-container{
    width: 90%; height: 100%; display: flex;
}
.models-card-main-text-side-content{
    width: 48%; height: 95%; margin: auto; display: flex;
}
.models-card-main-text-side-content p{
    margin: auto;
}

.models-card-main-models-side-container{
    width: 48%; height: 95%; margin: auto; display: flex;
}

.models-card-main-bottom-side-container{
    display:flex; justify-content: flex-start; margin-left: 5%;
}

.models-card-button-link-light{
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 10px;
    min-width: 150px;
    height: 65%;
    border: none;
    background-color: rgb(220, 221, 222);
    color: rgb(3, 25, 43);
    outline:1px solid rgb(3, 25, 43); outline-offset:1px; flex: 1 auto; text-align:center; transition: all 0.3s ease-out;
    cursor: pointer;
}
.models-card-link-light:hover{
    outline:1px solid rgb(3, 25, 43); outline-offset:5px;
    background-color: rgb(230, 231, 232);
}

/*--------------------------------------------------BÖLGE BİLGİ KARTI SİTİLLERİ SONU*/

/*--------------------------------------------------TAM EKRAN GALERİ SİTİLLERİ*/
.models-fullsize{
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.95); 
    display: none; 
    z-index: 99;
}

.models-fullsize-image{
    width: 90%; 
    height: 90%; 
    margin: auto; 
    display: flex;
}
.models-fullsize-image img{
    max-width: 90%; 
    max-height: 90%; 
    display: flex; 
    margin: auto;
}

.models-fullsize-bottom{
    bottom: 0%; 
    width: 100%; 
    height: 10%; 
    display: flex;
}
.models-fullsize-button-content{
    width: auto; 
    height: auto; 
    margin: auto; 
    display: flex;
}
.models-fullsize-button{
    display: flex;
    margin: 5px;
    padding: 10px;
    min-width: 75px;
    background-color: white;
    border: solid 1px rgb(3, 25, 43);
    cursor: pointer;
}
.models-fullsize-button *{
    margin: auto;
}
/*--------------------------------------------------TAM EKRAN GALERİ SİTİLLERİ SONU*/

/*--------------------------------------------------GALERİ SİTİLLERİ*/
.models-container{
    width: 100%; height: 100%; margin: auto; 
    display: flex; flex-direction: column; 
    background-color: rgb(230, 231, 232);
}

/*-------------------------GALERİ SLİDER BÖLGESİ*/
    #models-slider-container{
        width: 95%; height: 30%; 
        display: flex; margin: auto;  
        background-color: rgb(230, 231, 232);
        overflow: hidden; 
    }

    #models-slide-area{
        display: flex; 
        width: auto;
        cursor: e-resize;
        touch-action: pan-x;
    }

    .models-slide-area-card{
        touch-action: pan-x;
        width: 250px; 
        height: 90%;
        margin-top: auto; 
        margin-bottom: auto;
        margin: auto;
        margin-left: 5px;
        margin-right: 5px;
        display: flex;  
        flex-direction: column;
        background: linear-gradient(180deg, rgba(199, 200, 202, 1) 0%, rgba(220, 221, 222, 1) 100%);
        border-radius: 10px;
    }

    .models-slide-area-card-image{
        display: flex; width: 90%; height: 70%; margin: auto;
    }
    .models-slide-area-card-image img{
        width: 100%; object-fit: contain; pointer-events: none; 
	  object-position: bottom;
    }

    .models-slide-area-card-button{
        display: flex; width: 90%; height: 20%; margin: auto; flex-direction: column;
    }
    
    .models-slide-area-card-button a{
        width: 100%; min-height: 50%; margin: auto; 
    }

    .models-slide-area-card-button button{
        height: 100%; width: 100%; background-color: rgb(230, 231, 232); border: none; 
        position: relative; cursor: pointer;
    }

    .models-slide-area-card-button button p{
        font-family: 'Izmir-Bold';
    }

    
    .models-slide-area-card-button button:after{
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 3px;
        bottom: 0;
        left: 0;
        background-color: rgb(3, 25, 43);
        transform-origin: bottom right;
        transition: transform 0.25s ease-out;
    }
    .models-slide-area-card-button button:hover:after{
        transform: scaleX(1);
        transform-origin: bottom left;
    }




    














    .models-slide-area-image{
        width: 150px; height: 84%; border: solid 5px white; display: flex; margin: auto; margin-left: 10px;
    }
    .models-slide-area-image img{
        width: 100%; object-fit: cover; pointer-events: none; cursor: pointer;
    }
    
    .models-slide-count-info-container{
        width: auto; height: 84%; 
        display: flex; margin: auto; margin-left: 10px;
    }
    .models-slide-count-info-content{
        margin: auto; 
        display: flex;
        color: rgb(3, 25, 43); 
        font-size: 5rem; 
        margin-left: 40px; 
    }
    /*-------------------------GALERİ SLİDER BÖLGESİ SONU

/*--------------------------------------------------GALERİ SİTİLLERİ SONU*/

@media only screen and (min-device-width : 320px) and (max-device-width : 539px) {

    .models-card-container{
        padding-top: 50px;
    }
    .models-card-main-text-side-container{
        width: 80%; height: 100%; display: flex;
    }
   
    .models-card-arrow{
        width: 10%;
    }

   }