/* "Scroll To Top" button Kodları */
#scrollTopBtn {
    position: fixed;
    bottom: 68px;
    right: 20px;
    width: 46px;
    height: 46px;
    background-image: var(--cs-primary-button-1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 5px 15px var(--cs-shadow-2);
    transition: opacity .3s
}

#scrollTopBtn svg {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
    width: 100%;
    height: 100%
}

#scrollTopBtn circle {
    fill: none;
    stroke: var(--cs-primary-button-1-text);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition: stroke-dashoffset .25s linear
}

#scrollTopBtn .toTopIcon {
    display: inline-block;
    width: 20px;
    height: 20px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath stroke-dasharray='20' stroke-dashoffset='20' d='M12 21l0 -17.5'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.2s' values='20;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='12' stroke-dashoffset='12' d='M12 3l7 7M12 3l-7 7'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.2s' dur='0.2s' values='12;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    color: var(--cs-primary-button-1-text);
    z-index: 2;
    transition: .4s;
    animation: 3s ease-in-out infinite floatPulse
}

@keyframes floatPulse {
    0%,100% {
        transform: skewX(0) scaleX(1) scaleY(1)
    }

    20% {
        transform: skewX(-10deg) scaleX(1.05) scaleY(.95)
    }

    40% {
        transform: skewX(8deg) scaleX(1.02) scaleY(.98)
    }

    60% {
        transform: skewX(-6deg) scaleX(1.03) scaleY(.97)
    }

    80% {
        transform: skewX(4deg) scaleX(1.01) scaleY(.99)
    }
}

@media screen and (max-width: 900px) {
    #scrollTopBtn {
        width:38px;
        height: 38px
    }

    #scrollTopBtn .toTopIcon {
        width: 18px;
        height: 18px
    }
}

@media screen and (max-width: 790px) {
    #scrollTopBtn {
        bottom:78px;
        right: 12px
    }
}

/* "Header Navigation" Kodları */
.headerNavigationMenu .headerContentBox::after,.headerNavigationMenu .headerContentBox::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 600% 600%;
    background-position: 0 50%;
    position: absolute
}

.headerNavigationMenu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px
}

.headerNavigationMenu .headerContentBox {
    text-decoration: none;
    position: relative;
    min-width: 130px;
    height: 47px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px;
    border-radius: 6px;
    z-index: 1;
    transition: .4s ease-in-out;
    flex: 1 1 0;
    box-shadow: none!important
}

.headerNavigationMenu .headerContentBox::before {
    padding: 1px;
    border-radius: inherit;
    z-index: 100;
    background-image: var(--header-hover-border-gradient);
    mask: var(--header-mask-gradient);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    opacity: 0;
    transition: opacity .3s
}

.headerNavigationMenu .headerContentBox::after {
    border: 1px solid var(--header-border-color);
    border-radius: inherit;
    z-index: -4;
    transition: .2s
}

.headerNavigationMenu .headerContentBox:hover::after {
    border-color: transparent;
    background-image: var(--header-hover-mask-gradient)
}

.headerContentBox .imgBox {
    position: relative;
    width: 30px;
    height: 34px;
    overflow: hidden;
    transform: translateY(4px);
    margin-left: 2px
}

.headerContentBox .imgBox img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    position: absolute;
    transition: .4s
}

@media (hover: hover) and (pointer:fine) and (min-width:1024px) {
    .headerContentBox .imgBox img:first-child {
        left:0;
        transform: scale(1)
    }

    .headerContentBox .imgBox img:nth-child(2) {
        left: -30px;
        transform: scale(.4);
        opacity: 0
    }

    .headerContentBox:hover .imgBox img:first-child {
        left: 30px;
        transform: scale(.4);
        opacity: 0
    }

    .headerContentBox:hover .imgBox img:nth-child(2) {
        left: 0;
        transform: scale(1);
        opacity: 1
    }

    .headerNavigationMenu .headerContentBox:hover {
        background-color: transparent
    }

    .headerNavigationMenu .headerContentBox:hover::before {
        opacity: 1;
        animation: 6s linear infinite borderAnimate
    }

    @keyframes borderAnimate {
        0%,100% {
            background-position: 0 50%
        }

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

.headerContentBox .rightBox {
    height: 32px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 4px;
    color: var(--header-text);
    transform: translateY(2px)
}

.headerContentBox .rightBox .subTitle,.headerContentBox .rightBox .title {
    font-size: 12px;
    transition: .4s
}

.headerContentBox .rightBox .title {
    font-weight: 500
}

.headerContentBox:hover .rightBox {
    color: var(--header-hover-text)
}

@media screen and (min-width: 1024px) and (max-width:1540px) {
    .headerNavigationMenu {
        padding:6px
    }
}

@media screen and (max-width: 1530px) {
    .headerNavigationMenu .headerContentBox {
        min-width:238px
    }
}

@media screen and (max-width: 1352px) {
    .headerNavigationMenu .headerContentBox {
        min-width:146px
    }
}

@media screen and (max-width: 500px) {
    .headerNavigationMenu .headerContentBox {
        min-width:160px
    }
}

@media screen and (max-width: 425px) {
    .headerNavigationMenu .headerContentBox {
        height:40px
    }
}

@media screen and (max-width: 332px) {
    .headerNavigationMenu .headerContentBox {
        min-width:160px
    }
}

/* Partners Kodları */
.partnersMainContainer {
    padding: 12px;
    background-image: var(--partners-section-background-gradient)
}

.partnersContainer {
    width: 100%;
    --partner-width: 150px;
    --partner-height: 56px;
    --start-x: 100vw;
    height: var(--partner-height);
    -webkit-mask-image: var(--partners-slider-edge-mask);
    mask-image: var(--partners-slider-edge-mask);
    overflow: hidden
}

.partnerInfiniteSlideBox {
    display: flex;
    width: 100%;
    min-width: calc(var(--partner-width) * var(--quantity));
    position: relative
}

.partnerSlide {
    width: var(--partner-width);
    height: var(--partner-height);
    position: absolute;
    left: 100%;
    animation-delay: calc( (var(--duration) / var(--quantity)) * (var(--position) - 1) - var(--duration) );
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: left;
    backface-visibility: hidden
}

.partnersContainer.active .partnerSlide {
    animation: autoRun var(--duration) linear infinite;
    animation-delay: calc( (var(--duration) / var(--quantity)) * (var(--position) - 1) - var(--duration))
}

@media (hover: none) {
    .partnersContainer:hover .partnerSlide {
        animation-play-state:running
    }
}

.partnerSlide img {
    width: 100%;
    max-width: 100%;
    height: 85%;
    border-radius: inherit;
    object-fit: contain
}

.partnersContainer:focus .partnerSlide,.partnersContainer:hover .partnerSlide {
    animation-play-state: paused
}

@keyframes autoRun {
    from {
        left: 100%
    }

    to {
        left: calc(var(--partner-width) * -1)
    }
}

@media screen and (max-width: 600px) {
    .partnersMainContainer {
        padding:8px
    }

    .partnersContainer {
        --partner-width: 138px;
        --partner-height: 50px
    }
}

/* "Features" Kodları */
.featuresMainContainer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.featuresContainer {
    height: 200px;
    position: relative;
    padding: 12px 4px;
    border-radius: 6px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    overflow: hidden;
    scroll-behavior: smooth
}

.featuresCard {
    width: 100%;
    max-width: 200px;
    min-width: 180px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 34px;
    opacity: 0;
    transition: .4s;
    text-decoration: none
}

@media screen and (min-width: 1024px) {
    .featuresContainer>.featuresCard:nth-child(4n+1),.featuresContainer>.featuresCard:nth-child(4n+5),.featuresContainer>.featuresCard:nth-child(4n-3) {
        transform:translateY(-140%)
    }

    .featuresContainer>.featuresCard:nth-child(4n+3),.featuresContainer>.featuresCard:nth-child(4n+7),.featuresContainer>.featuresCard:nth-child(4n-1) {
        transform: translateY(140%)
    }

    .featuresContainer.active .featuresCard {
        animation: showFeatureCard calc(.5s * var(--index)) ease-in-out forwards
    }

    @keyframes showFeatureCard {
        100% {
            opacity: 1;
            transform: translateY(0)
        }
    }
}

.featuresIconBox {
    margin-top: 24px;
    --size: 60px;
    position: relative;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color);
    z-index: 1;
    flex-shrink: 0
}

.featuresIconBox span {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: inherit;
    opacity: .2;
    z-index: -1
}

.featuresCard:hover .featuresIconBox span {
    animation: 4s ease-in-out infinite pulse;
    animation-delay: calc(1s * (var(--i)))
}

@keyframes pulse {
    10% {
        opacity: .8
    }

    100% {
        opacity: 0;
        transform: scale(2)
    }
}

.featuresIconBox img {
    --image-size: 32px;
    width: var(--image-size);
    height: var(--image-size);
    object-fit: cover
}

.featureCardDetail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--color)
}

.featureCardTitle {
    font-size: 16px;
    font-weight: 400
}

.featureCardDesc {
    text-align: center;
    font-size: 13px;
    font-weight: 300
}

.featuresLine {
    min-width: 1px;
    height: 100%;
    background-origin: padding-box;
    background-repeat: no-repeat;
    background-image: var(--divider-accent-gradient);
    opacity: 0;
    transform: scale(.8);
    margin: 0 12px
}

.featuresContainer.active .featuresLine {
    animation: .5s ease-in-out forwards featureLineAnimate;
    animation-delay: calc(.5s * var(--index))
}

@keyframes featureLineAnimate {
    100% {
        opacity: 1;
        transform: scale(1)
    }
}

.featuresContainer::-webkit-scrollbar {
    height: 3px
}

.featuresContainer::-webkit-scrollbar-track {
    background: rgba(0,0,0,.05);
    border-radius: 4px
}

.featuresContainer::-webkit-scrollbar-thumb {
    background: var(--cs-color-6);
    border-radius: 4px
}

@media screen and (max-width: 1440px) {
    .featuresContainer {
        padding:12px 8px;
        overflow-x: auto;
        justify-content: start;
        height: 236px
    }

    .featuresCard {
        min-width: 165px
    }
}

@media screen and (max-width: 1280px) {
    .featuresCard {
        min-width:150px
    }
}

@media screen and (max-width: 1024px) {
    .featuresContainer {
        align-items:start;
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
        height: auto
    }

    .featuresContainer .featuresCard {
        opacity: 0;
        transform: scale(.8)
    }

    .featuresContainer.active .featuresCard {
        animation: responsiveFeatureCard calc(.3s * var(--index)) ease-in-out forwards
    }

    @keyframes responsiveFeatureCard {
        100% {
            opacity: 1;
            transform: scale(1)
        }
    }

    .featuresContainer .featuresLine {
        display: none
    }

    .featuresCard {
        gap: 18px
    }

    .featuresIconBox {
        --size: 46px
    }

    .featuresIconBox img {
        --image-size: 26px
    }

    .featureCardTitle {
        font-size: 15px
    }

    .featureCardDesc {
        font-size: 13px
    }
}

@media screen and (max-width: 460px) {
    .featuresCard {
        max-width:150px
    }
}

@media screen and (max-width: 336px) {
    .featuresCard {
        max-width:100%;
        padding: 12px;
        background: var(--bg-color);
        border-radius: 6px
    }

    .featuresIconBox {
        margin-top: 0
    }
}

/* "Footer" Kodları */
.footerMainContainer {
    margin-top: 24px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 4px;
    background-color: var(--cs-sticky-footer-bg);
    position: relative;
    z-index: 1
}

.footerContainer {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 12px;
    padding: 20px 12px
}

.footerStepBox {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: space-between;
    opacity: 1!important
}

.footerStepBox[data-step="2"] .footerPageLinks {
    width: 100%;
    display: grid;
    grid-auto-rows: max-content;
    grid-auto-flow: column;
    row-gap: 5px;
    column-gap: 32px;
    list-style: none;
    font-size: 16px
}

.footerStepBox[data-step="2"] .footerPageLinks li {
    display: flex;
    align-items: center;
    justify-content: start
}

.footerStepBox[data-step="2"] .footerPageLinks a {
    text-decoration: none;
    font-size: 15px;
    color: var(--cs-color-9);
    display: flex;
    align-items: center;
    transition: .4s
}

.footerStepBox[data-step="2"] .footerPageLinks a:hover {
    color: var(--cs-color-6)
}

.footerStepBox[data-step="2"] .footerContactBox {
    border: 1px solid var(--cs-border-color-2);
    border-radius: 6px;
    padding: 18px 22px
}

.footerStepBox[data-step="2"] .footerContactBox,.footerStepBox[data-step="3"] .footerSocialMediaBox,.footerStepBox[data-step="3"] .footerTrustBadgesBox {
    width: 348px;
    flex-shrink: 0
}

.footerContactBox .footerContactTitle,.footerSocialMediaBox .footerSocialMediaTitle {
    padding: 4px;
    font-size: 16px;
    color: var(--title-secondary-color);
    position: absolute;
    top: -14px;
    font-weight: 400;
    background-color: var(--cs-footer-bg);
    border-radius: 6px
}

.footerContactBox .footerContactTitle {
    left: 18px
}

.footerSocialMediaBox .footerSocialMediaTitle {
    left: -5px
}

.footerStepBox[data-step="2"] .footerContactBox {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start
}

.footerContactBox .footerContactLink {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    text-decoration: none
}

.footerContactLink .iconBox {
    --box-icon-size: 30px;
    --icon-padding: 6px;
    width: var(--box-icon-size);
    height: var(--box-icon-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--cs-border-color-3);
    padding: 3px
}

.iconBox .footerIcon {
    width: calc(var(--box-icon-size) - var(--icon-padding));
    height: calc(var(--box-icon-size) - var(--icon-padding));
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    color: var(--cs-color-6)
}

.footerIcon.phone {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E")
}

.footerIcon.email {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8-7L4 8v10h16V8zm0-2l8-5H4zM4 8V6v12z'/%3E%3C/svg%3E")
}

.footerContactLink .text {
    font-size: 16px;
    font-weight: 500;
    color: var(--cs-color-1)
}

.footerContactBox .subText {
    margin-left: 38px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--cs-color-9)
}

.footerStepBox[data-step="3"] {
    width: 100%;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px
}

.footerStepBox[data-step="3"] .footerSocialMediaBox {
    padding: 10px 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 8px
}

.footerSocialMediaLinks {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 12px;
    list-style: none;
    margin: 16px 0 0
}

.footerSocialMediaLinks li a {
    position: relative;
    --link-size: 34px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--link-size);
    height: var(--link-size);
    transition: .2s
}

.footerSocialMediaLinks li a::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 10px;
    z-index: -1;
    box-shadow: 0 4px 5px var(--cs-shadow-2);
    background-color: var(--cs-footer-bg);
    transition: .2s
}

.footerSocialMediaLinks li a:hover .linkContent,.footerSocialMediaLinks li a:hover:before {
    border-radius: 50%
}

.footerSocialMediaLinks li a::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 4px;
    z-index: -2;
    background: var(--social-color);
    transition: .2s
}

.footerSocialMediaLinks li a:hover:after {
    background: 0 0
}

.footerSocialMediaLinks li a .linkContent {
    position: relative;
    --link-content-size: calc(100% - 6px);
    display: flex;
    width: var(--link-content-size);
    height: var(--link-content-size);
    border-radius: 8px;
    z-index: 10;
    overflow: hidden;
    transition: .2s
}

.footerSocialMediaLinks li a .linkContent::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    transform: skewX(-25deg);
    background: var(--cs-bg-shine-gradient);
    z-index: 2;
    pointer-events: none;
    animation: 7s linear infinite shineFlash
}

@keyframes shineFlash {
    0% {
        left: -75%;
        opacity: 0
    }

    10% {
        left: 125%;
        opacity: 1
    }

    100%,20% {
        left: 125%;
        opacity: 0
    }
}

.footerSocialMediaLinks li a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transition: .2s
}

.footerStepBox[data-step="3"] .footerTrustBadgesBox {
    margin-top: 20px;
    display: flex;
    align-items: end;
    justify-content: end
}

.footerTrustBadgesBox .etbisLogo {
    --etbis-size: 110px;
    width: var(--etbis-size);
    height: var(--etbis-size);
    object-fit: contain
}

.footerTrustBadgeContent {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 6px;
    margin-right: 6px
}

.footerTrustBadgeContent .footerGoogleImage {
    width: 124px;
    object-fit: cover
}

.footerTrustBadgeContent .footerComodoImage {
    width: 120px;
    object-fit: cover
}

.footerLine {
    width: 100%;
    height: 1px;
    background-origin: padding-box;
    background-repeat: no-repeat;
    background-image: var(--divider-accent-gradient-two)
}

.footerStepBox[data-step="4"] {
    margin-top: 8px
}

.footerStepBox[data-step="4"] .footerCompanyInfo {
    font-size: 15px;
    color: var(--title-secondary-color)
}

.footerStepBox[data-step="4"] .footerCopyright {
    font-size: 13px;
    color: var(--title-secondary-color)
}

@media screen and (max-width: 1024px) {
    .footerStepBox[data-step="2"] .footerPageLinks {
        column-gap:6px
    }

    .footerStepBox[data-step="2"] .footerPageLinks a {
        font-size: 14px
    }
}

@media screen and (max-width: 900px) {
    .footerStepBox[data-step="2"] .footerContactBox,.footerStepBox[data-step="3"] .footerSocialMediaBox,.footerStepBox[data-step="3"] .footerTrustBadgesBox {
        flex-shrink:1
    }

    .footerStepBox[data-step="2"] {
        justify-content: start;
        flex-direction: column;
        gap: 24px
    }

    .footerStepBox[data-step="2"] .footerPageLinks {
        display: flex;
        flex-wrap: wrap;
        gap: 20px
    }

    .footerStepBox[data-step="2"] .footerPageLinks li {
        flex: 0 0 auto
    }

    .footerPageLinks {
        position: relative
    }

    .footerStepBox[data-step="2"] .footerPageLinks::before {
        position: absolute;
        bottom: -18px;
        left: 0;
        content: "";
        width: 100%;
        height: 1px;
        background-image: var(--divider-accent-gradient-two)
    }

    .footerContactBox {
        margin-top: 18px;
        width: 100%!important
    }

    .footerContactBox .subText {
        margin-left: 0
    }

    .footerContactBox,.footerSocialMediaBox {
        padding: 12px
    }

    .footerContactBox .footerContactTitle {
        left: 12px
    }

    .footerSocialMediaBox {
        width: 360px
    }
}

@media screen and (max-width: 760px) {
    .footerStepBox[data-step="4"] {
        flex-wrap:wrap
    }
}

@media screen and (max-width: 600px) {
    .footerStepBox[data-step="2"] .footerContactBox,.footerStepBox[data-step="3"] .footerSocialMediaBox {
        width:100%
    }

    .footerSocialMediaLinks {
        flex-wrap: wrap;
        justify-content: center
    }

    .footerStepBox[data-step="3"] .footerSocialMediaBox {
        border: 1px solid var(--cs-border-color-2);
        border-radius: 6px;
        padding: 18px 22px
    }

    .footerContactBox .footerContactTitle,.footerSocialMediaBox .footerSocialMediaTitle {
        font-size: 15px
    }

    .footerSocialMediaBox .footerSocialMediaTitle {
        left: 12px
    }

    .footerStepBox[data-step="3"] {
        margin-top: 12px;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center
    }

    .footerSocialMediaLinks li a {
        --link-size: 30px
    }

    .footerStepBox[data-step="3"] .footerTrustBadgesBox {
        margin-top: 0;
        justify-content: center
    }

    .footerStepBox[data-step="4"] {
        justify-content: center;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px
    }

    .footerStepBox[data-step="4"] .footerCompanyInfo {
        font-size: 14px;
        text-align: center
    }

    .footerStepBox[data-step="2"] .footerPageLinks {
        display: grid;
        gap: 10px;
        display: flex;
        flex-wrap: wrap
    }

    .footerStepBox[data-step="2"] .footerPageLinks li {
        border-bottom: 0;
        flex-basis: 40%;
        display: flex;
        align-items: center
    }

    .footerStepBox[data-step="2"] .footerPageLinks {
        column-gap: 24px;
        justify-content: space-between
    }
}

@media screen and (max-width: 430px) {
    .footerTrustBadgesBox .etbisLogo {
        --etbis-size:84px
    }

    .footerTrustBadgeContent .footerComodoImage {
        width: 104px
    }

    .footerTrustBadgeContent .footerGoogleImage {
        width: 112px
    }

    .footerContactBox .footerContactLink {
        flex-wrap: wrap
    }

    .footerStepBox[data-step="2"] .footerContactBox,.footerStepBox[data-step="3"] .footerSocialMediaBox {
        padding: 14px 10px
    }

    .footerStepBox[data-step="2"] .footerPageLinks li {
        flex-basis: 44%
    }

    .footerStepBox[data-step="2"] .footerPageLinks li a {
        font-size: 12px
    }
}

@media screen and (max-width: 320px) {
    .footerStepBox[data-step="2"] .footerPageLinks {
        justify-content:start
    }

    .footerStepBox[data-step="2"] .footerPageLinks li {
        flex-basis: auto
    }
}

/* Mobilde gösterilen "Yapışkan Footer" Kodları */
.navigationMobileButton .navigateIconBox::before,.stickyFooterNavigation .textBox::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
    /*background-color: var(--cs-container-bg);*/
    border-radius: inherit
}

.stickyFooterNavigation {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 78px;
    border-radius: 0 !important;
    /*border-top-left-radius: 40px;
    border-top-right-radius: 40px;*/
    background-color: var(--cs-sticky-footer-bg);
    display: none;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    /*box-shadow: 0 0 14px var(--cs-shadow-1);*/
    box-shadow: 0 0 14px rgb(0 0 0 / 3%) !important;
    z-index: 10;
    padding: 4px 6px;
    overflow: hidden;
    opacity: 1
}

.stickyFooterNavigation .navigationMobileButton {
    max-width: 100px;
    flex: 0 0 100px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none
}

.navigationMobileButton .navigateIconBox {
    position: relative;
    --icon-size: 32px;
    width: var(--icon-size);
    height: var(--icon-size);
    /*background-color: var(--cs-border-color-3);*/
    background: transparent !important;
    border-radius: 50%;
    padding: 4px;
    z-index: 10;
    display: flex;
    transform: scale(.98);
    flex-shrink: 0
}

.navigationMobileButton .navigateIconBox::before {
    --before-size: 90%;
    width: var(--before-size);
    height: var(--before-size)
}

.navigateIconBox .navIcon {
    --icon-size: 100%;
    display: inline-block;
    width: var(--icon-size);
    height: var(--icon-size);
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    color: var(--cs-color-7)
}

.navigateIconBox .navIcon.support {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M422.401 217.174c-6.613-67.84-46.72-174.507-170.666-174.507c-123.947 0-164.054 106.667-170.667 174.507c-23.2 8.805-38.503 31.079-38.4 55.893v29.867c0 32.99 26.744 59.733 59.733 59.733c32.99 0 59.734-26.744 59.734-59.733v-29.867c-.108-24.279-14.848-46.095-37.334-55.253c4.267-39.254 25.174-132.48 126.934-132.48s122.453 93.226 126.72 132.48c-22.44 9.178-37.106 31.009-37.12 55.253v29.867a59.95 59.95 0 0 0 33.92 53.76c-8.96 16.853-31.787 39.68-87.894 46.506c-11.215-17.03-32.914-23.744-51.788-16.023c-18.873 7.72-29.646 27.717-25.71 47.725s21.48 34.432 41.872 34.432a42.67 42.67 0 0 0 37.973-23.68c91.52-10.454 120.747-57.6 129.92-85.334c24.817-8.039 41.508-31.301 41.173-57.386v-29.867c.103-24.814-15.2-47.088-38.4-55.893m-302.933 85.76c0 9.425-7.641 17.066-17.067 17.066s-17.066-7.64-17.066-17.066v-29.867a17.067 17.067 0 1 1 34.133 0zm264.533-29.867c0-9.426 7.641-17.067 17.067-17.067s17.067 7.641 17.067 17.067v29.867c0 9.425-7.641 17.066-17.067 17.066s-17.067-7.64-17.067-17.066z'/%3E%3C/svg%3E")
}

.navigateIconBox .navIcon.home {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'%3E%3Cpath d='M5 12H3l9-9l9 9h-2M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6'/%3E%3C/g%3E%3C/svg%3E")
}

.navigateIconBox .navIcon.shopping {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.4' d='M2.5 8.5h19l-1.164 6.986c-.4 2.395-.599 3.592-1.438 4.303c-.84.711-2.053.711-4.48.711H9.582c-2.428 0-3.642 0-4.48-.71c-.84-.712-1.04-1.91-1.439-4.304zm9.5 4v4m4-4v4m-8-4v4m14.5-8h-21m16.5 0l-3-5m-9 5l3-5'/%3E%3C/svg%3E")
}

.navigateIconBox .navIcon.order {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23000' stroke-linejoin='round' stroke-width='2.7'%3E%3Cpath d='M44 14L24 4L4 14v20l20 10l20-10z'/%3E%3Cpath stroke-linecap='round' d='m4 14l20 10m0 20V24m20-10L24 24M34 9L14 19'/%3E%3C/g%3E%3C/svg%3E")
}

.navigateIconBox .navIcon.profile {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath stroke-linejoin='round' d='M4 18a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z'/%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3C/g%3E%3C/svg%3E")
}

.stickyFooterNavigation .textBox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100px;
    width: 100%;
    padding: 4px 2px;
    border-radius: 20px;
    /*background-color: var(--cs-border-color-2);*/
    background: transparent !important;
    z-index: 1
}

.stickyFooterNavigation .textBox::before {
    width: 97%;
    height: 88%
}

.textBox .text {
    color: var(--cs-color-7);
    font-size: 13px
}

@media screen and (max-width: 790px) {
    .stickyFooterNavigation {
        display:flex
    }
}

@media screen and (max-width: 520px) {
    .stickyFooterNavigation {
        gap:0;
        height: 70px
    }

    .navigationMobileButton {
        max-width: auto!important;
        flex: 1 0 auto!important
    }

    .stickyFooterNavigation .textBox {
        max-width: auto;
        padding: 2px 0
    }

    .stickyFooterNavigation .textBox .text {
        font-size: 12px
    }
}