/* ==========================================================
   FOOTER TRANSITION V1
========================================================== */

.habas-footer-transition-v1 {
    position: relative;
    width: 100%;
    min-height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #07192b;
}


/* ==========================================================
   BACKGROUND
========================================================== */

.habas-footer-transition-v1-bg {
    position: absolute;
    inset: -5%;
    background-image: url('/Content/images/footer-transition.jpg');
    background-size: cover;
    background-position: center;
    filter: grayscale(60%) brightness(65%);
    transform: scale(1.04);
    transition: transform 8s ease, filter 1s ease;
}


/* Hafif hareket */

.habas-footer-transition-v1:hover
.habas-footer-transition-v1-bg {
    transform: scale(1.09);
    filter: grayscale(20%) brightness(70%);
}


/* ==========================================================
   OVERLAY
========================================================== */

.habas-footer-transition-v1-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(4, 20, 36, .92) 0%, rgba(7, 41, 70, .82) 50%, rgba(4, 20, 36, .92) 100% );
}


/* ==========================================================
   CONTENT
========================================================== */

.habas-footer-transition-v1-inner {
    position: relative;
    z-index: 2;
    width: calc(100% - 50px);
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 0;
    text-align: center;
    color: #ffffff;
}


/* ==========================================================
   KICKER
========================================================== */

.habas-footer-transition-v1-kicker {
    margin-bottom: 14px;
    color: rgba(255,255,255,.55);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
}


/* ==========================================================
   TITLE
========================================================== */

.habas-footer-transition-v1-title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 300;
    line-height: 1.14;
    letter-spacing: -.8px;
}


    .habas-footer-transition-v1-title strong {
        display: block;
        margin-top: 3px;
        font-weight: 700;
    }


/* ==========================================================
   RED LINE
========================================================== */

.habas-footer-transition-v1-line {
    width: 46px;
    height: 3px;
    margin: 23px auto;
    background: #e1262d;
    border-radius: 10px;
}


/* ==========================================================
   LINK
========================================================== */

.habas-footer-transition-v1-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .25s ease;
}


    .habas-footer-transition-v1-link svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .25s ease;
    }


    .habas-footer-transition-v1-link:hover {
        color: #ffffff;
    }


        .habas-footer-transition-v1-link:hover svg {
            transform: translateX(7px);
        }


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .habas-footer-transition-v1 {
        min-height: 300px;
    }


    .habas-footer-transition-v1-inner {
        width: calc(100% - 32px);
        padding: 50px 0;
    }


    .habas-footer-transition-v1-title {
        font-size: 30px;
    }
}