/* ==========================================================
   HABAŞ PAGE HERO V2
   İç sayfa banner
========================================================== */

.habas-page-hero-v2 {
    position: relative;
    width: 100%;
    height: clamp(340px, 3vw, 500px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    isolation: isolate;
    animation: habasPageHeroImage 1.3s cubic-bezier(.2,.7,.2,1) both;
}


/* ==========================================================
   INITIAL IMAGE ANIMATION
========================================================== */

@keyframes habasPageHeroImage {

    from {
        background-size: 108%;
    }

    to {
        background-size: 103%;
    }
}


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

.habas-page-hero-v2
.habas-page-hero-v2-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient( 90deg, rgba(3, 18, 34, .90) 0%, rgba(3, 27, 49, .73) 29%, rgba(3, 27, 49, .34) 58%, rgba(3, 27, 49, .13) 100% ), linear-gradient( 0deg, rgba(3, 17, 29, .74) 0%, rgba(3, 17, 29, .10) 58%, rgba(3, 17, 29, .18) 100% );
}


/* ==========================================================
   VERY SUBTLE PATTERN
========================================================== */

.habas-page-hero-v2
.habas-page-hero-v2-pattern {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .07;
    background-image: linear-gradient( 135deg, rgba(255,255,255,.9) 1px, transparent 1px );
    background-size: 9px 9px;
}


/* ==========================================================
   CONTAINER
========================================================== */

.habas-page-hero-v2
.habas-page-hero-v2-container {
    position: relative;
    z-index: 5;
    width: calc(100% - 100px);
    max-width: 1500px;
    margin: 0 auto;
    padding-bottom: 58px;
}


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

.habas-page-hero-v2
.habas-page-hero-v2-content {
    max-width: 850px;
    color: #ffffff;
    opacity: 0;
    transform: translateY(22px);
    animation: habasPageHeroContent .75s ease .18s forwards;
}


@keyframes habasPageHeroContent {

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================
   RED ACCENT
========================================================== */

.habas-page-hero-v2
.habas-page-hero-v2-accent {
    width: 48px;
    height: 3px;
    margin-bottom: 18px;
    background: #e1262d;
    border-radius: 10px;
    box-shadow: 0 3px 14px rgba(225, 38, 45, .25);
}


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

.habas-page-hero-v2
.habas-page-hero-v2-title {
    max-width: 900px;
    margin: 0 0 18px;
    padding: 0;
    color: #ffffff;
    font-size: clamp(38px, 4vw, 62px);
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -1.4px;
    text-transform: none;
    text-shadow: 0 4px 25px rgba(0,0,0,.28);
}


/* ==========================================================
   BREADCRUMB
========================================================== */

.habas-page-hero-v2
.habas-page-hero-v2-breadcrumb {
    margin: 0;
    padding: 0;
}


    .habas-page-hero-v2
    .habas-page-hero-v2-breadcrumb ol {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        list-style: none;
    }


    /* Breadcrumb item */

    .habas-page-hero-v2
    .habas-page-hero-v2-breadcrumb li {
        margin: 0;
        padding: 0;
        color: rgba(255,255,255,.70);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.3;
    }


    /* Home */

    .habas-page-hero-v2
    .habas-page-hero-v2-breadcrumb a {
        position: relative;
        color: #ffffff;
        font-weight: 600;
        text-decoration: none;
        transition: color .22s ease;
    }


        .habas-page-hero-v2
        .habas-page-hero-v2-breadcrumb a:hover {
            color: #ef3238;
        }


/* Separator */

.habas-page-hero-v2
.habas-page-hero-v2-separator {
    display: flex;
    align-items: center;
}


    .habas-page-hero-v2
    .habas-page-hero-v2-separator svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: rgba(255,255,255,.60);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* Current page */

.habas-page-hero-v2
.habas-page-hero-v2-breadcrumb .active {
    color: rgba(255,255,255,.72);
    font-weight: 400;
}


/* ==========================================================
   BOTTOM GRADIENT
========================================================== */

.habas-page-hero-v2
.habas-page-hero-v2-bottom {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient( 90deg, #e1262d 0, #e1262d 60px, rgba(255,255,255,.18) 60px, rgba(255,255,255,.18) 100% );
}


/* ==========================================================
   LARGE MONITOR
========================================================== */

@media (min-width: 1700px) {

    .habas-page-hero-v2
    .habas-page-hero-v2-container {
        max-width: 1580px;
    }
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991px) {

    .habas-page-hero-v2 {
        height: 390px;
        background-size: cover;
        animation: none;
    }


        .habas-page-hero-v2
        .habas-page-hero-v2-container {
            width: calc(100% - 50px);
            padding-bottom: 45px;
        }


        .habas-page-hero-v2
        .habas-page-hero-v2-title {
            font-size: 44px;
        }
}


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

@media (max-width: 600px) {

    .habas-page-hero-v2 {
        height: 320px;
        background-position: center;
    }


        .habas-page-hero-v2
        .habas-page-hero-v2-overlay {
            background: linear-gradient( 0deg, rgba(3,18,32,.90) 0%, rgba(3,18,32,.58) 58%, rgba(3,18,32,.25) 100% );
        }


        .habas-page-hero-v2
        .habas-page-hero-v2-container {
            width: calc(100% - 34px);
            padding-bottom: 35px;
        }


        .habas-page-hero-v2
        .habas-page-hero-v2-accent {
            width: 38px;
            margin-bottom: 13px;
        }


        .habas-page-hero-v2
        .habas-page-hero-v2-title {
            margin-bottom: 14px;
            font-size: 34px;
            line-height: 1.08;
            letter-spacing: -.7px;
        }


        .habas-page-hero-v2
        .habas-page-hero-v2-breadcrumb li {
            font-size: 12.5px;
        }
}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .habas-page-hero-v2,
    .habas-page-hero-v2-content {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}