:root {
    --bgmaincolor: radial-gradient(circle, rgba(23,138,150,1) 0%, rgb(22 38 86) 100%);
    --bgheadercolor: #36385F;
    --bgsecondcolor: linear-gradient(180deg, #35375E 0%, #444676 100%);
    --main-color: #fff;
    --upper-widget-bg: linear-gradient(180deg, #4B4D80 0%, rgba(75, 77, 128, 0.00) 100%);
    --mobile-menu-bg: linear-gradient( 94.3deg, rgb(32 42 89) 10.9%, rgb(16 19 41) 87.1% );
    --mainshadow: rgb(50 50 93 / 25%) 0px 2px 5px -1px, rgb(0 0 0 / 30%) 0px 1px 3px -1px;
    --mainfont: Titillium Web;
    --green: #8BD331;
    --pink-dark: #EE5C42;
    --pink-light: #fcedee;
    --primary-50: #575995;
    --primary-100: #4B4D80;
    --primary-200: #373961;
    --primary-300: #36385F;
    --text-color-50: #EAEFFC;
    --text-color-100: #7F848E;
    --text-color-white: #FFF;
}

.maviTabAlan{
    direction:rtl;
}

.basarili-odeme {
    padding: 40px;
    align-self: center;
    width: 150px;
    display: block;
    border-radius: 50%;
    font-size: 4em;
    margin: auto;
    background: var(--green);
    color: var(--text-color-white);
}

.footer-copy {
    color: var(--primary-color-300);
    text-align: center;
    font-size: 16px;
    font-weight: 400;
}

.footer-alt-block{
    padding:15px 40px;
    background:var(--text-color-50);
    margin-top:30px;
}

.bg-primary-300{
    background:var(--primary-300);
}

.custom-baslik {
    color: var(--text-color-white);
    text-align: center;
    font-size: 32px;
    padding: 20px 0;
    font-weight: 600;
    line-height: 56px;
    background: var(--primary-200)
}

.odeme-kurum-logo {
    width: 96px;
    height: 96px;
    display: flex;
    padding: 19.2px 0px;
    justify-content: center;
    align-items: center;
    border-radius: 96px;
    transition: 0.4s ease-in-out;
    /*background: var(--primary-50);*/
    background: var(--text-color-white);
    cursor: pointer;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
   /* .odeme-kurum-logo img {
        display: none;
        transition: 0.4s ease-in;
    }*/
    .odeme-kurum-logo span {
        font-size: 15px;
        display:none!important;
        font-weight: 600;
        text-transform: uppercase;
        line-height: 20px;
        transition: 0.4s ease-in;
    }
 /*   .odeme-kurum-logo:hover span {
        display: none;
        transition: 0.4s ease-in-out;
    }

    .odeme-kurum-logo:hover img {
        display: block;
        transition: 0.4s ease-in;
    }
    .odeme-kurum-logo:hover {
        box-shadow: var(--primary-50) 3px 3px, var(--primary-100) 7px 7px;
        filter:drop-shadow(1px 2px 3px var(--text-color-100));
        background: var(--text-color-50);
        cursor: pointer;
        transition: 0.3s ease-in;
    }*/
.alt-block{
    background:var(--primary-100);
    padding:50px 0;
    margin-top:40px;
}
.mukavele-input {
    border-radius: 8px;
    border: 3px solid var(--primary-200);
    background: var(--text-color-50);
    padding: 20px 16px;
    display:block;
    width:100%;
    margin-top:15px;
}
.mukavele-span {
    color: var(--primary-200);
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
}
@media (min-width: 992px)
{
    .container {
        max-width: 1600px!important;
    }
}

.logo-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 25px;
    padding: 0px !important;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: -1px -1px 0px #2fc0be, 2px 2px 0px #3667c1;
    color: #e4e4e4;
}

.shadow-step {
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.footer-visa {
    background: -webkit-linear-gradient(#222862, #25489f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.footer-mastercard {
    background: -webkit-linear-gradient(right,#f79e1b, #eb001b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.email-transform{
    text-transform:lowercase!important;
}


#ETBIS a:hover {
    box-shadow: none !important;
}

input[type=number] {
    -moz-appearance: textfield !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none!important;
}
b {
    color: #07183d;
}

.boxArea i {
    color: #121831;
    padding: 10px;
}

#hizmetlerimizsubMenu {
    opacity: 0.8;
    background: var(--mobile-menu-bg);
    border-radius: 3px
}

::-webkit-scrollbar {
    width: 10px;
    height:5px;
}

::-webkit-scrollbar-track {
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-200);
    border-radius: 3px;
}

    ::-webkit-scrollbar-thumb:active {
        border: 1px solid white;
    }

::-webkit-scrollbar-track:hover {
    background-color: var(--primary-100);
}
.pay-span {
    color: var(--text-color-100);
    font-size: 20px;
    font-weight: 400;
}
body {
    font-family: var(--mainfont) !important;
    background: var(--text-color-50);
}
.text-success{
    color:var(--green)!important;
}
textarea {
    resize: none;
    height: 100px !important;
}

.custom-card {
    color: var(--primary-300);
    padding: 10px;
    font-size: 16px;
    display: flex;
    background: var(--text-color-white);
    flex-direction: row;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    justify-content: center;
    align-items: center;
}
    .custom-card b {
        font-size: 20px;
        color: var(--primary-300);
    }
.indexpage-card {
    opacity: 1;
    border-radius: 8px;
    text-decoration: none;
    background:#fff
}
.step-card {
    opacity: 1;
    border-radius: 15px;
    box-shadow: var(--mainshadow);
    text-decoration: none;
}



    .indexpage-card h5 {
        font-size: 17px;
        font-weight: 600
    }

    .indexpage-card h3 {
        font-size: 20px;
        font-weight: 600
    }

footer {
    padding-top:40px;
    background: var(--bgheadercolor);
}

.text-main {
    color: var(--primary-200);
}

.c-mt {
    margin-top: 74px;
}

.ındex-mt {
    margin-top: 5%;
}

header .menu .navbar-collapse ul > li > a {
    transition: 0.5s;
    color: var(--text-color-50);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    cursor:pointer;
}

.logo-menu{
    margin-top:20px;
}
.btn-box {
    height: 100%;
    box-shadow: 0px 2.639286518096924px 2.639286518096924px 0px rgba(0, 0, 0, 0.25);
    background: var(--upper-widget-bg);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 25px 0;
    margin: 8px 0;
    outline: none;
    transition: ease-in-out 0.3s;
}

    .btn-box:hover {
        color: white;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
        transform: translateY(10px);
        transition: ease-in 0.3s;
    }


    .custom-baslik {
        color: var(--text-color-white);
        text-align: center;
        font-size: 32px;
        text-transform: uppercase;
        font-weight: 600;
        line-height: 56px;
    }

img.adim {
    width: 65%;
}

.ucAdimd h4 {
    font-size: 15px;
    margin: 0
}

table {
    width: 100%;
    table-layout: fixed;
    /*border-radius: 15px;*/
}

#faturalistesi tr:nth-child(2n+1) {
    background: var(--text-color-50);
}




.btn-red {
    border-radius: 8px;
    background: var(--green);
    padding: 20px 16px;
    color: var(--text-color-white)
}




.tbl-content {
    overflow-x: auto;
    margin-top: 0px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    margin-top: 15px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

th {
    padding: 12px 5px 10px 5px;
    text-align: center;
    font-weight: 600;
    font-weight: bold;
    font-size: 16px;
    color: var(--primary-300);
}

td {
    padding: 10px 0 10px;
    text-align: center;
    vertical-align: middle!important;
    font-weight: bold;
    font-weight: 500;
    font-size: 16px;
    color: var(--primary-300);
}


.answertable {
    width: 15%;
}
.tbl-content::-webkit-scrollbar {
    width: 6px;
}

.tbl-content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.tbl-content::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

#Yardim{
    padding:40px;
}

#Yardim a {
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    color: var(--primary-200)
}



#Yardim .list-group-item.active {
    background: var(--primary-200);
    border: none;
}

    #Yardim .list-group-item.active > a {
        color: var(--text-color-white);
    }


.MainPage-card {
    background: var(--bgsecondcolor);
}


.effect:before {
    box-sizing: border-box;
    transform: translateX(100%);
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 99.5%;
    height: 2px;
    border-bottom: 2px solid transparent;
    border-left: 2px solid transparent;
}

.effect:after {
    box-sizing: border-box;
    transform: translateX(-100%);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 99.5%;
    height: 2px;
    border-top: 2px solid transparent;
    border-right: 2px solid transparent;
}

header .menu .navbar-collapse ul > li > a:hover {
    transition: 0.5s;
}

.footer-accordion .card-body {
    background: var(--text-color-50);
}

.footer-accordion .btn-link:hover, .footer-accordion .btn-link:focus {
    text-decoration: none;
    box-shadow: 0px 1px 0px 0px #EAEFFC;
    color: var(--text-color-50);
}


.footer-accordion button {
    color: var(--text-color-50);
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    border-radius: 0;
    line-height: 24px;
    background: var(--primary-300);
    display: flex;
    padding: 16px 66px 16px 12px;
    align-items: center;
    box-shadow: 0px 1px 0px 0px #EAEFFC;
}

.pt-6 {
    padding-top: 72px;
    padding-bottom: 36px;
}
#logo {
    margin-left: 2.5rem
}

@media only screen and (max-width: 992px) {
    .c-mt {
        margin-top:75px !important
    }
    .navbar-expand-lg .mobilenavbar-collapse {
        display: block !important;
        flex: auto;
        /*background: white;*/
        height: 75px
    }

    .indexpage-card h3{
        font-size:17px;
    }
    .indexpage-card b{
        font-size:15px;
    }
}
@media only screen and (max-width: 440px) {
   .fa-credit-card,.fa-lock,.fa-user,.fa-phone{
       display:none;
   }
   
}
.footer-accordion{
    display:none;
}
@media only screen and (max-width: 978px) {
    .footer-web{
     display:none;
 }
    .footer-accordion {
        display: block!important;
    }
}


.get-isim{
    display:block;
    margin-top:15px;
}


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

        

        footer{
            padding-top:0
        }

        .alert-info b {
            font-size: 15px !important;
        }

        .alert-info span {
            font-size: 13px!important;
        }
        .alert-danger {
            font-size: 14px!important;
        }

        .ucAdim {
            padding-bottom: 0;
        }

        .footer-alt-block {
            padding: 15px !important;
            margin-top:0
        }

        .odeme-kurum-logo {
           
            margin: 5px;
        }

            .odeme-kurum-logo span {
                font-size: 13px;
            }


        .Odeme-card .form-control {
            font-size: 12px !important;
        }

        .pt-6 {
            padding-top: 0px;
            padding-bottom: 0px;
        }

        .btn-box img {
            width: 50px !important;
        }
        .btn-box .get-isim{
            font-size:13px;
        }
        .alert-info {
            font-size: 14px !important;
        }

        .custom-baslik {
            font-size: 25px;
            line-height:25px;
            padding:10px;
        }

        th {
            font-size: 13px;
        }

        td {
            font-size: 13px;
            overflow: hidden;
            /*white-space: nowrap;*/
            text-overflow: ellipsis;
        }

        .step-visible {
            display: none;
        }


        .ındex-mt h3 {
            font-size: 16px;
            margin-bottom: 5px !important
        }

        .widget-display {
            display: none;
        }

        label[for="ham-menu"] {
            display: block !important;
        }



        .custom-control-label {
            font-size: 15px;
        }

      

        .footer a {
            color: var(--primary-200) !important;
            padding: 7px;
            font-weight: 600;
        }
    }


    @media only screen and (min-width: 768px) {
        .maviTabAlan .nav-pills .nav-link:hover {
            z-index: 9999
        }

        .btn-box {
            min-height: 170px;
        }
    }


    .maviTabAlan .nav-pills .nav-link:hover ~ h5 {
        background: black !important;
    }

    .query-card p {
        text-align: left;
        font-size: 15px;
        line-height: 1.2;
        margin-bottom: 0;
        margin-top: 12px;
    }





    .input-effect {
        padding-left: 0px;
        padding-right: 0px;
    }


    input:focus {
        filter: drop-shadow(0 0 1px var(--main-color)) !important;
    }

    footer a {
        padding: 5px 20px 5px 15px;
    }

    :focus {
        outline: none;
    }

    .stepper-wrapper {
        margin-top: auto;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .stepper-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        margin-top: 15px;
        margin-bottom: 5px;
    }

        .stepper-item::before {
            position: absolute;
            content: "";
            border-bottom: 2px solid #ccc;
            width: 100%;
            top: 20px;
            left: -50%;
            z-index: 2;
        }

        .stepper-item::after {
            position: absolute;
            content: "";
            border-bottom: 2px solid #ccc;
            width: 100%;
            top: 20px;
            left: 50%;
            z-index: 2;
        }

        .stepper-item .step-counter {
            position: relative;
            z-index: 5;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #ccc;
            margin-bottom: 6px;
        }

        .stepper-item.active {
            font-weight: bold;
        }

        .stepper-item.completed .step-counter {
            background: var(--main-color);
            color: white;
        }

        .stepper-item.completed::after {
            position: absolute;
            content: "";
            border-bottom: 2px solid var(--main-color);
            width: 100%;
            top: 20px;
            left: 50%;
            z-index: 3;
        }

        .stepper-item:first-child::before {
            content: none;
        }

        .stepper-item:last-child::after {
            content: none;
        }

    .st18 {
        fill: #FFFFFF;
    }

    .st19 {
        display: inline;
        fill: none;
        stroke: #FFFFFF;
        stroke-width: 0.75;
    }

    .st16 {
        fill: none;
        stroke: #FFFFFF;
        stroke-width: 0.5;
        stroke-miterlimit: 10;
    }

.Odeme-card .custom-select {
    border-radius: 8px;
    background: var(--text-color-50);
    height: 52px;
    color: var(--primary-300);
    font-weight: 500;
    position: relative;
    font-size: 14px;
    margin-top: 10px;
    border-style: solid;
    border-width: 3px;
    border-image: radial-gradient(var(--pink-light), var(--primary-300) ) 1;
    letter-spacing: 1.5px;
}

.Odeme-card .custom-select:focus {
    outline: none;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.Odeme-card .form-control::placeholder {
    color: var(--primary-100);
}

.Odeme-card .form-control {
    border-style: solid;
    border-width: 3px;
    border-image: radial-gradient(var(--pink-light), var(--primary-300) ) 1;
    border-radius: 8px;
    background: var(--text-color-50);
    height: 26px;
    color: var(--primary-300);
    font-weight: 600;
    font-size: 14px;
    margin-top: 10px;
    padding: 25px 15px;
    letter-spacing: 1.5px;
}
    .Odeme-card .form-control:focus {
        outline: none;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    }

    .inputWithIcon {
        position: relative
    }

    .Odeme-card span {
        font-size: 14px;
    }

    .inputWithIcon span {
        position: absolute;
        right: 20px;
        bottom: 20px;
        color: var(--primary-200);
        cursor: pointer;
        transition: 0.3s;
        font-size: 14px
    }

    .getir-input {
        border-radius: 8px;
        border: 2px solid rgba(234, 239, 252, 0.20);
        background: var(--primary-200);
        padding: 14px 0px 14px 50px;
        color: var(--text-color-50, #EAEFFC);
        font-size: 14px;
        align-items: center;
        margin-bottom: 25px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    }

        .getir-input::placeholder {
            color: var(--text-color-50);
        }

    .getir-svg {
        position: absolute;
        top: 19%;
        z-index: 9;
        left: 15px;
    }

    .alert-info {
        color: var(--primary-200);
        text-align: center;
        border-radius: 0;
        border: none;
        padding: 15px;
        background: var(--text-color-50);
    }

        .alert-info b {
            font-weight: 700;
            font-size: 23px;
        }

        .alert-info span {
            font-weight: 500;
            font-size: 15px;
        }

    .alert-danger {
        background: var(--pink-light);
        color: var(--pink-dark);
        font-size: 20px;
        font-weight: 600;
        border-radius: 8px;
        border: none;
    }


    .shadow-lg {
        box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px !important;
    }

    #ham-menu {
        display: none;
    }

    label[for="ham-menu"] {
        display: none;
        z-index: 999;
        background-color: white;
        border-radius: 5px;
        border: 2px solid var(--main-color);
    }

    .ham-menu {
        right: 0;
        border-radius: 5px;
        position: fixed;
        visibility: hidden;
        transform: translate(115%);
        z-index: 998;
        background-color: var(--main-color);
        transition: 1s;
        justify-content: center;
        align-items: center;
        max-height: 550px;
        overflow: auto;
    }

    #ham-menu:checked ~ div.ham-menu {
        transform: translate(0px);
        visibility: visible;
    }

    #ham-menu:checked ~ [for="ham-menu"] > div {
        color: white;
        background: var(--main-color);
        transition: 0.5s;
        border: none;
    }

    [for="ham-menu"] > div {
        padding: 5px;
        color: var(--main-color);
        font-weight: 700;
        font-size: 20px;
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column wrap;
        align-content: center;
        align-items: center;
        transition: 0.5s
    }

        [for="ham-menu"] > div:hover {
            transform: scale(1,1);
        }

    .lock-scroll {
        overflow: hidden;
    }

    .rgb::after {
        content: "";
        background: linear-gradient(45deg, #ff0000 0%, #ff9a00 10%, #d0de21 20%, #4fdc4a 30%, #3fdad8 40%, #2fc9e2 50%, #1c7fee 60%, #5f15f2 70%, #ba0cf8 80%, #fb07d9 90%, #ff0000 100% ) repeat 0% 0% / 300% 100%;
        position: absolute;
        inset: -3px;
    }

    @keyframes rgb {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    .rgb::after {
        border-radius: 16px;
        filter: blur(8px);
        transform: translateZ(-1px); /*or z-index */
        animation: rgb 6s linear infinite;
    }

    .btn-suc {
        font-size: 20px;
        font-weight: 600;
        line-height: 20px;
    }

    .error-btn {
        background: var(--pink-dark);
        padding: 20px 16px;
        border-radius: 4px;
        color: var(--text-color-50);
        font-size: 20px;
        font-weight: 600;
        line-height: 20px;
    }

    .homepage-btn {
        padding: 20px 16px;
        font-size: 20px;
        font-weight: 600;
        line-height: 20px;
        border-radius: 4px;
        border: 1px solid var(--pink-dark);
        color: var(--pink-dark);
    }

    #sorgu.active {
        animation: scale-display 0.3s;
        display: inline-flex;
    }

    #sorgu.out {
        animation: scale-display--reversed 0.3s;
        animation-fill-mode: forwards;
        display: inline-flex;
    }

    @keyframes scale-display {
        0% {
            opacity: 0;
            transform: scale(0);
            -webkit-transform: scale(0);
        }

        100% {
            opacity: 1;
            transform: scale(1);
            -webkit-transform: scale(1);
        }
    }

    @keyframes scale-display--reversed {
        0% {
            display: inline-flex;
            opacity: 1;
            transform: scale(1);
            -webkit-transform: scale(1);
        }

        99% {
            display: inline-flex;
            opacity: 0;
            transform: scale(0);
            -webkit-transform: scale(0);
        }

        100% {
            display: none;
            opacity: 0;
            transform: scale(0);
            -webkit-transform: scale(0);
        }
    }




    footer .phone {
        padding: 8px 16px;
        background: var(--primary-50);
        font-size: 14px;
        color: var(--text-color-white);
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        margin-top: 20px;
        display: block;
        width: 200px;
    }

    footer .adress {
        font-size: 14px;
        color: var(--text-color-white);
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        display: block;
        margin-top: 35px;
    }





.page_404 {
    padding: 80px 0;
    background: #fff;
}

    .page_404 img {
        width: 100%;
    }

.four_zero_four_bg {
    background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
    height: 500px;
    background-position: center;
}


    .four_zero_four_bg h1 {
        font-size: 120px;
        margin-bottom:50px;
    }

    .four_zero_four_bg h3 {
        font-size: 80px;
    }

.link_404 {
    color: #fff !important;
    padding: 10px 20px;
    background: #39ac31;
    margin: 20px 0;
    display: inline-block;
}

.contant_box_404 {
    margin-top: -50px;
}
.rise {
    text-shadow: -0.01em -0.01em 0.01em #000;
    animation: rise 2s ease-in-out 0.5s forwards;
}

@keyframes rise {
    to {
        text-shadow: 0em 0.01em #ff5, 0em 0.02em #ff5, 0em 0.02em 0.03em #ff5, -0.01em 0.01em #333, -0.02em 0.02em #333, -0.03em 0.03em #333, -0.04em 0.04em #333, -0.01em -0.01em 0.03em #000, -0.02em -0.02em 0.03em #000, -0.03em -0.03em 0.03em #000;
        transform: translateY(-0.025em) translateX(0.04em);
    }
}