/* ==========================================================
   HABAŞ FAALİYETLER V3
   Tamamen bağımsız component
========================================================== */

.habas-faaliyet-v3 {
    position: relative;
    width: 100%;
    background: #ffffff;
    overflow: hidden;
}


    /* ==========================================================
   SECTION HEADER
========================================================== */
/*
    .habas-faaliyet-v3 .habas-faaliyet-v3-header {
        padding: 58px 20px 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }


    .habas-faaliyet-v3 .habas-faaliyet-v3-eyebrow {
        margin-bottom: 8px;
        color: #7d8a96;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
    }


    .habas-faaliyet-v3 .habas-faaliyet-v3-section-title {
        margin: 0;
        color: #153e6c;
        font-size: clamp(27px, 2.2vw, 38px);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -.4px;
        text-transform: uppercase;
    }


    .habas-faaliyet-v3 .habas-faaliyet-v3-section-line {
        width: 45px;
        height: 3px;
        margin-top: 17px;
        background: #d92128;
        border-radius: 10px;
    }*/


    /* ==========================================================
   FULL WIDTH SHOWCASE
========================================================== */

    .habas-faaliyet-v3 .habas-faaliyet-v3-showcase {
        width: 100%;
        margin: 0;
        padding: 0;
        background: #071523;
    }


    /* ==========================================================
   ROW
========================================================== */

    .habas-faaliyet-v3 .habas-faaliyet-v3-row {
        width: 100%;
        display: grid;
        gap: 0;
        border-top: 1px solid rgba(255, 255, 255, .32);
    }


        /* THREE */

        .habas-faaliyet-v3
        .habas-faaliyet-v3-row.is-three {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }


        /* TWO */

        .habas-faaliyet-v3
        .habas-faaliyet-v3-row.is-two {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }


    /* ==========================================================
   ITEM
========================================================== */

    .habas-faaliyet-v3 .habas-faaliyet-v3-item {
        position: relative;
        min-width: 0;
        margin: 0;
        background: #061522;
        overflow: hidden;
        border-right: 1px solid rgba(255, 255, 255, .34);
    }


        /* Son item sağ çizgisiz */

        .habas-faaliyet-v3
        .habas-faaliyet-v3-item:last-child {
            border-right: 0;
        }


    /* 3'lü satır yüksekliği */

    .habas-faaliyet-v3
    .is-three
    .habas-faaliyet-v3-item {
        height: clamp( 350px, 27vw, 470px );
    }


    /* 2'li satırlar biraz daha büyük */

    .habas-faaliyet-v3
    .is-two
    .habas-faaliyet-v3-item {
        height: clamp( 390px, 31vw, 520px );
    }


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

    .habas-faaliyet-v3 .habas-faaliyet-v3-link {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        color: #ffffff;
        text-decoration: none;
        overflow: hidden;
        outline: none;
    }


    /* ==========================================================
   IMAGE AREA
========================================================== */

    .habas-faaliyet-v3 .habas-faaliyet-v3-image-area {
        position: absolute;
        inset: -3px;
        overflow: hidden;
        background: #071522;
    }


    /* ==========================================================
   IMAGE
========================================================== */

    .habas-faaliyet-v3 .habas-faaliyet-v3-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /*
       Normal durum:
       - siyah/beyaz
       - karanlık
       - hafif blur
    */

        filter: grayscale(100%) saturate(20%) brightness(48%) contrast(1.08) blur(1px);
        transform: scale(1.035);
        transition: filter .65s ease, transform 1s cubic-bezier(.2,.72,.2,1);
    }


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

    .habas-faaliyet-v3 .habas-faaliyet-v3-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient( 180deg, rgba(3, 15, 26, .20) 0%, rgba(3, 15, 26, .12) 33%, rgba(3, 15, 26, .34) 58%, rgba(3, 15, 26, .92) 100% );
        transition: background .55s ease;
    }


    /* ==========================================================
   NUMBER
========================================================== */

    .habas-faaliyet-v3 .habas-faaliyet-v3-number {
        position: absolute;
        top: 27px;
        left: 30px;
        z-index: 3;
        color: rgba(255, 255, 255, .72);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 2px;
        transition: color .35s ease, transform .35s ease;
    }


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

    .habas-faaliyet-v3 .habas-faaliyet-v3-content {
        position: absolute;
        z-index: 3;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 30px clamp(25px, 2.3vw, 44px) 31px;
        color: #ffffff;
        transition: transform .5s cubic-bezier(.2,.7,.2,1);
    }


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

    .habas-faaliyet-v3 .habas-faaliyet-v3-accent {
        width: 34px;
        height: 3px;
        margin-bottom: 13px;
        background: #e02027;
        border-radius: 4px;
        transition: width .45s ease;
    }


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

    .habas-faaliyet-v3 .habas-faaliyet-v3-title {
        max-width: 600px;
        margin: 0;
        color: #ffffff;
        font-size: clamp( 22px, 1.7vw, 31px );
        font-weight: 650;
        line-height: 1.15;
        letter-spacing: -.3px;
        text-shadow: 0 2px 15px rgba(0, 0, 0, .30);
    }


    /* ==========================================================
   DESCRIPTION
========================================================== */

    .habas-faaliyet-v3 .habas-faaliyet-v3-description {
        max-width: 650px;
        max-height: 0;
        margin-top: 0;
        color: rgba(255, 255, 255, .88);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.55;
        opacity: 0;
        overflow: hidden;
        transform: translateY(12px);
        transition: opacity .4s ease, transform .45s ease, max-height .5s ease, margin-top .45s ease;
    }


        .habas-faaliyet-v3
        .habas-faaliyet-v3-description p {
            margin: 0 0 5px;
        }


    /* ==========================================================
   CTA
========================================================== */

    .habas-faaliyet-v3 .habas-faaliyet-v3-action {
        max-height: 0;
        margin-top: 0;
        display: flex;
        align-items: center;
        gap: 11px;
        color: #ffffff;
        font-size: 12px;
        font-weight: 650;
        letter-spacing: .7px;
        text-transform: uppercase;
        opacity: 0;
        overflow: hidden;
        transform: translateY(10px);
        transition: opacity .4s ease .04s, transform .45s ease, max-height .45s ease, margin-top .45s ease;
    }


        .habas-faaliyet-v3
        .habas-faaliyet-v3-action svg {
            width: 19px;
            height: 19px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: transform .3s ease;
        }


/* ==========================================================
   DESKTOP HOVER
========================================================== */

@media (hover: hover) and (pointer: fine) {


    /* Fotoğraf renklenir ve yaklaşır */

    .habas-faaliyet-v3
    .habas-faaliyet-v3-item:hover
    .habas-faaliyet-v3-image {
        filter: grayscale(0%) saturate(105%) brightness(88%) contrast(1.02) blur(0);
        transform: scale(1.095);
    }


    /* Overlay biraz açılır */

    .habas-faaliyet-v3
    .habas-faaliyet-v3-item:hover
    .habas-faaliyet-v3-overlay {
        background: linear-gradient( 180deg, rgba(3, 15, 26, .05) 0%, rgba(3, 15, 26, .03) 32%, rgba(3, 15, 26, .19) 58%, rgba(3, 15, 26, .82) 100% );
    }


    /* Numara */

    .habas-faaliyet-v3
    .habas-faaliyet-v3-item:hover
    .habas-faaliyet-v3-number {
        color: #ffffff;
        transform: translateY(-2px);
    }


    /* Kırmızı çizgi büyür */

    .habas-faaliyet-v3
    .habas-faaliyet-v3-item:hover
    .habas-faaliyet-v3-accent {
        width: 58px;
    }


    /* Description görünür */

    .habas-faaliyet-v3
    .habas-faaliyet-v3-item:hover
    .habas-faaliyet-v3-description {
        max-height: 120px;
        margin-top: 14px;
        opacity: 1;
        transform: translateY(0);
    }


    /* CTA görünür */

    .habas-faaliyet-v3
    .habas-faaliyet-v3-item:hover
    .habas-faaliyet-v3-action {
        max-height: 42px;
        margin-top: 17px;
        opacity: 1;
        transform: translateY(0);
    }


        .habas-faaliyet-v3
        .habas-faaliyet-v3-item:hover
        .habas-faaliyet-v3-action svg {
            transform: translateX(5px);
        }
}


/* ==========================================================
   KEYBOARD FOCUS
========================================================== */

.habas-faaliyet-v3
.habas-faaliyet-v3-item:focus-within
.habas-faaliyet-v3-image {
    filter: grayscale(0%) saturate(105%) brightness(88%) blur(0);
    transform: scale(1.095);
}


.habas-faaliyet-v3
.habas-faaliyet-v3-item:focus-within
.habas-faaliyet-v3-description {
    max-height: 120px;
    margin-top: 14px;
    opacity: 1;
    transform: translateY(0);
}


.habas-faaliyet-v3
.habas-faaliyet-v3-item:focus-within
.habas-faaliyet-v3-action {
    max-height: 42px;
    margin-top: 17px;
    opacity: 1;
    transform: translateY(0);
}


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

@media (max-width: 991px) {

    .habas-faaliyet-v3
    .habas-faaliyet-v3-row.is-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .habas-faaliyet-v3
    .habas-faaliyet-v3-row.is-two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .habas-faaliyet-v3
    .habas-faaliyet-v3-item {
        height: 390px !important;
    }


    .habas-faaliyet-v3
    .habas-faaliyet-v3-content {
        padding: 25px;
    }
}


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

/*@media (max-width: 650px) {

    .habas-faaliyet-v3
    .habas-faaliyet-v3-header {
        padding: 45px 18px 35px;
    }


    .habas-faaliyet-v3
    .habas-faaliyet-v3-row.is-three,
    .habas-faaliyet-v3
    .habas-faaliyet-v3-row.is-two {
        grid-template-columns: 1fr;
    }


    .habas-faaliyet-v3
    .habas-faaliyet-v3-item {
        height: 360px !important;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.35);
    }*/


    /*
       Mobilde hover yok.
       Bu nedenle görsel hafif renkli ve
       açıklama sürekli görünür.
    */

    /*.habas-faaliyet-v3
    .habas-faaliyet-v3-image {
        filter: grayscale(15%) saturate(90%) brightness(70%) blur(0);
        transform: scale(1.04);
    }


    .habas-faaliyet-v3
    .habas-faaliyet-v3-description {
        max-height: 100px;
        margin-top: 12px;
        opacity: 1;
        transform: translateY(0);
    }


    .habas-faaliyet-v3
    .habas-faaliyet-v3-action {
        max-height: 40px;
        margin-top: 14px;
        opacity: 1;
        transform: translateY(0);
    }


    .habas-faaliyet-v3
    .habas-faaliyet-v3-title {
        font-size: 24px;
    }


    .habas-faaliyet-v3
    .habas-faaliyet-v3-description {
        font-size: 13px;
        line-height: 1.45;
    }
}*/


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

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

    .habas-faaliyet-v3 * {
        transition-duration: .01ms !important;
    }
}

/* ==========================================================
   EXPERIENCE INTRO
========================================================== */

.habas-faaliyet-v3 .habas-faaliyet-v3-experience {
    position: relative;
    width: 100%;
    padding: 76px 0 46px;
    background: #ffffff;
}


/* ==========================================================
   INNER
========================================================== */

.habas-faaliyet-v3 .habas-faaliyet-v3-experience-inner {
    width: calc(100% - 100px);
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 330px 1px minmax(0, 1fr);
    align-items: center;
    column-gap: 58px;
}


/* ==========================================================
   70
========================================================== */

.habas-faaliyet-v3
.habas-faaliyet-v3-experience-number-area {
    display: flex;
    align-items: flex-end;
    gap: 18px;
}


.habas-faaliyet-v3
.habas-faaliyet-v3-experience-number {
    margin: 0;
    color: #123f70;
    font-size: clamp(100px, 9vw, 150px);
    font-weight: 700;
    line-height: .78;
    letter-spacing: -8px;
}


/* ==========================================================
   YILLIK TECRÜBE
========================================================== */

.habas-faaliyet-v3
.habas-faaliyet-v3-experience-years {
    max-width: 100px;
    padding-bottom: 5px;
    color: #183e64;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 1.5px;
}


/* ==========================================================
   VERTICAL DIVIDER
========================================================== */

.habas-faaliyet-v3
.habas-faaliyet-v3-experience-divider {
    width: 1px;
    height: 150px;
    background: linear-gradient( to bottom, transparent, #d9dee3 15%, #d9dee3 85%, transparent );
}


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

.habas-faaliyet-v3
.habas-faaliyet-v3-experience-content {
    max-width: 800px;
}


/* 1956'DAN BUGÜNE */

.habas-faaliyet-v3
.habas-faaliyet-v3-experience-since {
    margin-bottom: 11px;
    color: #7e8d9b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}


/* MAIN HEADING */

.habas-faaliyet-v3
.habas-faaliyet-v3-experience-heading {
    max-width: 690px;
    margin: 0;
    color: #123f70;
    font-size: clamp(27px, 2.4vw, 41px);
    font-weight: 650;
    line-height: 1.14;
    letter-spacing: -.7px;
}


/* RED LINE */

.habas-faaliyet-v3
.habas-faaliyet-v3-experience-redline {
    width: 46px;
    height: 3px;
    margin: 20px 0;
    background: #dd2229;
    border-radius: 10px;
}


/* TEXT */

.habas-faaliyet-v3
.habas-faaliyet-v3-experience-text {
    max-width: 780px;
    margin: 0;
    color: #5d6c79;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
}


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

.habas-faaliyet-v3
.habas-faaliyet-v3-activity-heading {
    margin-top: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #153e6c;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.habas-faaliyet-v3
.habas-faaliyet-v3-activity-line {
    width: 36px;
    height: 2px;
    margin-top: 13px;
    background: #dd2229;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1100px) {

    .habas-faaliyet-v3
    .habas-faaliyet-v3-experience-inner {
        width: calc(100% - 60px);
        grid-template-columns: 260px 1px minmax(0, 1fr);
        column-gap: 38px;
    }


    .habas-faaliyet-v3
    .habas-faaliyet-v3-experience-number {
        font-size: 110px;
    }
}


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

@media (max-width: 850px) {

    .habas-faaliyet-v3
    .habas-faaliyet-v3-experience {
        padding: 58px 0 38px;
    }


    .habas-faaliyet-v3
    .habas-faaliyet-v3-experience-inner {
        width: calc(100% - 44px);
        grid-template-columns: 1fr;
        row-gap: 34px;
    }


    .habas-faaliyet-v3
    .habas-faaliyet-v3-experience-divider {
        width: 100%;
        height: 1px;
        background: linear-gradient( to right, #d9dee3, transparent );
    }


    .habas-faaliyet-v3
    .habas-faaliyet-v3-experience-number {
        font-size: 115px;
    }


    .habas-faaliyet-v3
    .habas-faaliyet-v3-activity-heading {
        margin-top: 48px;
    }
}


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

@media (max-width: 550px) {

    .habas-faaliyet-v3
    .habas-faaliyet-v3-experience {
        padding: 46px 0 31px;
    }


    .habas-faaliyet-v3
    .habas-faaliyet-v3-experience-inner {
        width: calc(100% - 32px);
    }


    .habas-faaliyet-v3
    .habas-faaliyet-v3-experience-number {
        font-size: 92px;
        letter-spacing: -5px;
    }


    .habas-faaliyet-v3
    .habas-faaliyet-v3-experience-years {
        max-width: 90px;
        font-size: 12px;
    }


    .habas-faaliyet-v3
    .habas-faaliyet-v3-experience-heading {
        font-size: 27px;
        line-height: 1.18;
    }


    .habas-faaliyet-v3
    .habas-faaliyet-v3-experience-text {
        font-size: 14px;
        line-height: 1.65;
    }
}