/* Genel Stil */

.container {

    margin-top: 50px;

}



.col-lg-1 {

    flex: 0 0 8.333%;

    max-width: 8.333%;

}



/* Form alanı düzenlemeleri */

.form-container-kredi {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    max-width: 800px;

    margin: 0 auto;

    padding: 20px;

    background-color: #363e49;

    border-radius: 13px;

}



.form-select2 {

    padding: 0.445rem 1.25rem 0.6rem 0.8rem;

    border-radius: 0.25rem;

}



/* Genel sekme düzenlemeleri */

.nav-tabs {

    border-bottom: none;

    display: flex;

    justify-content: center;

}

ul#krediTab {

    flex-wrap: nowrap !important;

}

.btn {

    display: inline-block;

    font-weight: 500;

    color: #f63e06;

    text-align: center;

    vertical-align: middle;

    -webkit-user-select: none;

    -moz-user-select: none;

    user-select: none;

    background-color: transparent;

    border: 0rem solid transparent;

    margin-right: 10px;

    padding: 0.5625rem 1.125rem;

    font-size: 0.875rem;

    line-height: 1.8;

    border-radius: 4px;

    transition: all 0.15s ease-in-out;

    line-break: normal;

}



.nav-tabs .nav-item {

    margin-bottom: -1px !important;

    display: flex !important;

    align-items: center !important;

}



.nav-tabs .nav-link {

    color: #d8d8d8 !important;

    padding: 10px 20px !important;

    border: none !important;

    background-color: transparent !important;

    border-radius: 0 !important;

}



.nav-tabs .nav-link.active {

   

    color: #dc5f13 !important;

    font-weight: bold !important;

}



/* Buton özellikleri */

.btn-custom2 {

    background-color: #ff6600 ;

    color: #ffffff ;

    border: none ;

    padding: 10px ;

    font-size: 15px ;

    font-weight: bold;

    border-radius: 60% ;

    cursor: pointer;

   

    margin-right: 25px;

}







.btn-custom2:hover {

    background-color: #ff6600;

}



.custom-label.kredi {

    font-size: 14px;

    color: #ffffff;

    line-height: 1.5em;

    display: inline-block;

    vertical-align: middle;

    margin-bottom: 0px;

}



.header-container h3,

.header-container h5 {

    color: #dc5f13;

}





/* Mobil cihazlar (max-width: 390px) */



@media only screen and (max-width: 375px) and (min-width: 374px) {

    .form-container-kredi {

        padding: 10px;

        max-width: 100%;

    }

    

    .btn-custom2 {

        font-size: 10px !important;

    }



    .form-select {

        padding: 0.375rem 0.5rem 0.4rem 0.9rem;

        background-position: right 0.9rem center;

        border-radius: 7%;

    }

    

    .col.col-lg-4 {

        position: relative;

    width: 100%;

    padding-right: 0px;

    padding-left: 2px;

    }

    

    .col.col-lg-3 {

        position: relative;

    width: 100%;

    padding-right: 0px;

    padding-left: 2px;

    }

    

    .col.col-lg-2 {

        position: relative;

    width: 100%;

    padding-right: 0px;

    padding-left: 2px;

    }



    .custom-label.kredi {

        font-size: 9px;

    }



    .btn-custom2 {

        font-size: 10px;

        border-radius: 100px;

        background-color: #ff6600;

        color: #ffffff;

        border: none;

        padding: 7px;

        font-weight: bold;

        cursor: pointer;

        margin-right: 25px;

    }



    .w-100spec2 {

        width: 67% !important;

        height: 77% !important;

        margin-top: 22%;

        margin-left: 5%;

    }



    .col-lg-1 {

        display: none;

    }

}



@media only screen and (max-width: 390px) and (min-width: 389px) {

    .form-container-kredi {

        padding: 10px;

        max-width: 100%;

    }

    

    .btn-custom2 {

        font-size: 10px !important;

    }



    .form-select {

        padding: 0.375rem 0.5rem 0.4rem 0.9rem;

        background-position: right 0.9rem center;

        border-radius: 7%;

    }

    

    .col.col-lg-4 {

        position: relative;

    width: 100%;

    padding-right: 0px;

    padding-left: 2px;

    }

    

    .col.col-lg-3 {

        position: relative;

    width: 100%;

    padding-right: 0px;

    padding-left: 2px;

    }

    

    .col.col-lg-2 {

        position: relative;

    width: 100%;

    padding-right: 0px;

    padding-left: 2px;

    }



    .custom-label.kredi {

        font-size: 9px;

    }



    .btn-custom2 {

        font-size: 10px;

        border-radius: 100px;

        background-color: #ff6600;

        color: #ffffff;

        border: none;

        padding: 7px;

        font-weight: bold;

        cursor: pointer;

        margin-right: 25px;

    }



    .w-100spec2 {

        width: 68% !important;

        height: 77% !important;

        margin-top: 26%;

        margin-left: 5%;

    }



    .col-lg-1 {

        display: none;

    }

}



@media only screen and (max-width: 393px) and (min-width: 392px) {

    .form-container-kredi {

        padding: 10px;

        max-width: 100%;

    }

    

    .btn-custom2 {

        font-size: 10px !important;

    }



    .form-select {

        padding: 0.375rem 0.5rem 0.4rem 0.9rem;

        background-position: right 0.9rem center;

        border-radius: 7%;

    }

    

    .col.col-lg-4 {

        position: relative;

    width: 100%;

    padding-right: 0px;

    padding-left: 2px;

    }

    

    .col.col-lg-3 {

        position: relative;

    width: 100%;

    padding-right: 0px;

    padding-left: 2px;

    }

    

    .col.col-lg-2 {

        position: relative;

    width: 100%;

    padding-right: 0px;

    padding-left: 2px;

    }



    .custom-label.kredi {

        font-size: 9px;

    }



    .btn-custom2 {

        font-size: 10px;

        border-radius: 100px;

        background-color: #ff6600;

        color: #ffffff;

        border: none;

        padding: 7px;

        font-weight: bold;

        cursor: pointer;

        margin-right: 25px;

    }



    .w-100spec2 {

        width: 64% !important;

        height: 77% !important;

        margin-top: 26%;

        margin-left: 5%;

    }



    .col-lg-1 {

        display: none;

    }

}



/* Küçük mobil cihazlar (max-width: 412px) */

@media only screen and (max-width: 412px) {

    .w-100spec2 {

        width: 57%;

        height: 77%;

        margin-top: 23%;

        margin-left: 5%;

    }

}







/* Küçük tabletler (max-width: 414px) */

@media only screen and (max-width: 414px) and (min-width: 413px) {

    .form-container-kredi {

        padding: 10px;

        max-width: 100%;

    }

    

    .btn-custom2 {

        font-size: 9px !important;

    }

    

    .w-100spec2 {

        width: 65% !important;

    }



    .custom-label.kredi {

        font-size: 13px;

    }

    

    .col.col-lg-4 {

        position: relative;

    width: 100%;

    padding-right: 0px;

    padding-left: 2px;

    }

    

    .col.col-lg-3 {

        position: relative;

    width: 100%;

    padding-right: 0px;

    padding-left: 2px;

    }

    

    .col.col-lg-2 {

        position: relative;

    width: 100%;

    padding-right: 0px;

    padding-left: 2px;

    }



    .btn-custom2 {

        font-size: 10px;

        border-radius: 100px;

        background-color: #ff6600;

        color: #ffffff;

        border: none;

        padding: 7px;

        font-weight: bold;

        cursor: pointer;

        margin-right: 25px;

    }



    .w-100spec2 {

        width: 60%;

        height: 80%;

        margin-top: 23%;

        margin-left: 5%;

    }



    .col-lg-1 {

        display: none;

    }

    .col.col-lg-2 {

        position: relative;

    width: 100%;

    padding-right: 0px;

    padding-left: 0px;

    }

    

    .col.col-lg-4 {

        position: relative;

    width: 100%;

    padding-right: 0px;

    padding-left: 5px;

    }

    

}



@media only screen and (max-width: 430px) and (min-width: 429px) {

    .form-container-kredi {

        padding: 10px;

        max-width: 100%;

    }

    

    .btn-custom2 {

        font-size: 10px !important;

    }



    .form-select {

        padding: 0.375rem 0.5rem 0.4rem 0.9rem;

        background-position: right 0.9rem center;

        border-radius: 7%;

    }

    

    .col.col-lg-4 {

        position: relative;

    width: 100%;

    padding-right: 0px;

    padding-left: 2px;

    }

    

    .col.col-lg-3 {

        position: relative;

    width: 100%;

    padding-right: 0px;

    padding-left: 2px;

    }

    

    .col.col-lg-2 {

        position: relative;

    width: 100%;

    padding-right: 0px;

    padding-left: 2px;

    }



    .custom-label.kredi {

        font-size: 9px;

    }



    .btn-custom2 {

        font-size: 10px;

        border-radius: 100px;

        background-color: #ff6600;

        color: #ffffff;

        border: none;

        padding: 7px;

        font-weight: bold;

        cursor: pointer;

        margin-right: 25px;

    }



    .w-100spec2 {

        width: 58% !important;

        height: 77% !important;

        margin-top: 22%;

        margin-left: 5%;

    }



    .col-lg-1 {

        display: none;

    }

}



/* Tabletler ve küçük ekranlar (max-width: 767px) */

@media only screen and (max-width: 767px) {

    .form-container-kredi {

        padding: 15px;

    }



    .custom-label.kredi {

        font-size: var(--hw-form-fn-sz, 10px) !important;

    }



    .btn-custom2 {

        font-size: 14px;

    }



    .w-100spec2 {

        width: 60%;

    }

}



/* iPad Air (min-width: 768px) */

@media only screen and (min-width: 768px) {

    .w-100spec2 {

        width: 50%;

        height: 100%;

        margin-top: 5%;

    }



    .btn-custom2 {

        background-color: #ff6600;

        color: #ffffff;

        border: none;

        padding: 6px;

        font-size: 15px;

        font-weight: bold;

        border-radius: 60%;

        cursor: pointer;

        margin-right: 25px;

    }



    .col-lg-1 {

        display: block;

        flex: 1 0 0%;

        max-width: 0%;

        width: 0;

        padding: 0;

    }

}



/* Orta ve büyük ekranlar (max-width: 1170px) */

@media only screen and (max-width: 1170px) {

    .form-container-kredi {

        max-width: 100%;

    }



    .col-lg-1 {

        display: none;

    }

}



/* Daha büyük cihazlar (min-width: 975px) */

@media only screen and (min-width: 975px) {

    .w-100spec2 {

        min-width: 70px !important;

        min-height: 72px !important;

    }

}



/* Daha büyük cihazlar (min-width: 1024px) */

@media only screen and (min-width: 1024px) {

    .w-100spec2 {

        width: 88%;

    }

}









/* Detaylı düzenlemeler */

.result {

    background-color: #f8f9fa;

    padding: 20px;

    border-radius: 5px;

    margin-top: 20px;

    border: 1px solid #dee2e6;

}



.result .row {

    border-bottom: 1px solid #dee2e6;

    padding: 10px 0;

}



.result h5 {

    color: #e46219;

}



.result .row:last-child {

    border-bottom: none;

}



.result p {

    margin: 5px 0;

}



.header-title {

    display: flex;

    align-items: center;

    margin-bottom: 20px;

}



.header-title::before {

    content: "";

    width: 4px;

    height: 24px;

    background-color: #dc5f13;

    margin-right: 10px;

}







.circle-wrapper {

    position: relative;

    display: flex;

    align-items: center;

}



.circle {

    position: absolute;

    left: -11px;

    width: 23px;

    height: 23px;

    background-color: #ff6600;

    border-radius: 50%;

    z-index: 10;

}



/* Manuel Ayrac */

.ayrac {

    color: #d8d8d8;

    margin: 0 10px;

    font-weight: bold;

}



/* Hover Efekti */

.nav-tabs .nav-link:hover {

    color: #ffffff;

    border-bottom: none;

}



/* Genel düzenlemeler */

.rowkredi {

    display: flex;

    flex-wrap: wrap;

    margin-right: -43px;

    margin-left: -15px;

}



.align-items-end {

    align-items: flex-end;

}