/* =========================================================
   DURU HİKAYEMİZ PAGE
========================================================= */

.duru-story-page {
    background:
        #fffaf7;

    color:
        #281f22;
}


/* =========================================================
   HERO
========================================================= */

.duru-story-page__hero {
    position:
        relative;

    height:
        min(
            900px,
            92svh
        );

    min-height:
        680px;

    overflow:
        hidden;

    color:
        #ffffff;

    background:
        #291a20;
}


.duru-story-page__hero-media {
    position:
        absolute;

    inset:
        0;
}


.duru-story-page__hero-photo,
.duru-story-page__hero-fallback {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;
}


.duru-story-page__hero-photo {
    object-position:
        center;
}


.duru-story-page__hero-fallback {
    background:
        linear-gradient(
            135deg,
            #54313c,
            #a55b70,
            #e6a6ae
        );
}


.duru-story-page__hero-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(22,13,17,.72) 0%,
            rgba(22,13,17,.35) 42%,
            rgba(22,13,17,.08) 75%,
            rgba(22,13,17,.18) 100%
        );
}


.duru-story-page__hero-content {
    position:
        absolute;

    z-index:
        2;

    left:
        7vw;

    top:
        50%;

    width:
        min(
            700px,
            75vw
        );

    transform:
        translateY(-43%);
}


.duru-story-page__eyebrow {
    display:
        block;

    margin-bottom:
        23px;

    font-size:
        8px;

    letter-spacing:
        .32em;

    text-transform:
        uppercase;

    opacity:
        .72;
}


.duru-story-page__hero h1 {
    margin:
        0;

    font-family:
        Didot,
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        clamp(
            60px,
            7vw,
            112px
        );

    font-weight:
        400;

    line-height:
        .88;

    letter-spacing:
        -.035em;
}


.duru-story-page__hero h1 em {
    color:
        #efc3c9;

    font-weight:
        400;
}


.duru-story-page__hero-content p {
    max-width:
        440px;

    margin:
        31px
        0
        0;

    font-size:
        12px;

    line-height:
        1.8;

    color:
        rgba(255,255,255,.72);
}


.duru-story-page__hero-bottom {
    position:
        absolute;

    z-index:
        2;

    left:
        5vw;

    right:
        5vw;

    bottom:
        27px;

    display:
        flex;

    justify-content:
        space-between;

    font-size:
        7px;

    letter-spacing:
        .25em;

    opacity:
        .55;
}


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

.duru-story-page__intro {
    padding:
        clamp(
            100px,
            11vw,
            180px
        )
        5vw;
}


.duru-story-page__intro-shell {
    max-width:
        1500px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        .55fr
        1.45fr;

    gap:
        clamp(
            60px,
            9vw,
            160px
        );
}


.duru-story-page__intro-left {
    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;
}


.duru-story-page__section-number,
.duru-story-page__small {
    font-size:
        8px;

    letter-spacing:
        .27em;

    text-transform:
        uppercase;
}


.duru-story-page__section-number {
    color:
        #c9687d;
}


.duru-story-page__small {
    color:
        rgba(40,31,34,.50);
}


.duru-story-page__intro-main h2 {
    max-width:
        1000px;

    margin:
        0;

    font-family:
        Didot,
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        clamp(
            54px,
            6vw,
            100px
        );

    line-height:
        .94;

    font-weight:
        400;

    letter-spacing:
        -.035em;
}


.duru-story-page__intro-main h2 em {
    margin:
        0
        .07em;

    color:
        #c9687d;

    font-weight:
        400;
}


.duru-story-page__intro-main p {
    max-width:
        650px;

    margin:
        45px
        0
        0;

    font-size:
        14px;

    line-height:
        1.95;

    color:
        rgba(40,31,34,.63);
}


/* =========================================================
   STATEMENT
========================================================= */

.duru-story-page__statement {
    padding:
        40px
        5vw
        150px;

    background:
        linear-gradient(
            180deg,
            #fffaf7,
            #f8eeea 65%,
            #f2dedf
        );
}


.duru-story-page__statement-shell {
    max-width:
        1100px;

    margin:
        0 auto;

    text-align:
        center;
}


.duru-story-page__statement-mark {
    margin-bottom:
        30px;

    color:
        #c9687d;

    font-size:
        23px;
}


.duru-story-page__statement-shell > span {
    display:
        block;

    margin-bottom:
        28px;

    font-size:
        8px;

    letter-spacing:
        .32em;

    color:
        #9c6975;
}


.duru-story-page__statement h2 {
    margin:
        0;

    font-family:
        Didot,
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        clamp(
            46px,
            5.8vw,
            92px
        );

    line-height:
        .95;

    font-weight:
        400;
}


.duru-story-page__statement h2 em {
    color:
        #c9687d;

    font-weight:
        400;
}


.duru-story-page__statement p {
    max-width:
        620px;

    margin:
        42px
        auto
        0;

    font-size:
        13px;

    line-height:
        1.9;

    color:
        rgba(40,31,34,.58);
}


/* =========================================================
   FEATURES
========================================================= */

.duru-story-page__features {
    padding:
        120px
        5vw;

    background:
        #fffaf7;
}


.duru-story-page__features-head {
    max-width:
        1500px;

    margin:
        0 auto
        65px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;
}


.duru-story-page__features-head > span {
    font-size:
        8px;

    letter-spacing:
        .28em;

    color:
        #a57782;
}


.duru-story-page__features-head h2 {
    margin:
        0;

    font-family:
        Didot,
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        clamp(
            45px,
            5vw,
            78px
        );

    font-weight:
        400;

    line-height:
        1;
}


.duru-story-page__features-head h2 em {
    color:
        #c9687d;

    font-weight:
        400;
}


.duru-story-page__features-grid {
    max-width:
        1500px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                220px,
                1fr
            )
        );

    border-top:
        1px solid
        rgba(40,31,34,.12);
}


.duru-story-page__feature {
    min-height:
        220px;

    padding:
        28px
        30px;

    border-right:
        1px solid
        rgba(40,31,34,.10);

    transition:
        background .35s ease;
}


.duru-story-page__feature:hover {
    background:
        #f8eeea;
}


.duru-story-page__feature > span {
    font-size:
        8px;

    letter-spacing:
        .2em;

    color:
        #c9687d;
}


.duru-story-page__feature-line {
    width:
        28px;

    height:
        1px;

    margin:
        43px
        0
        25px;

    background:
        #d7b277;
}


.duru-story-page__feature h3 {
    margin:
        0;

    font-family:
        Didot,
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        25px;

    line-height:
        1.15;

    font-weight:
        400;
}


/* =========================================================
   VISUAL
========================================================= */

.duru-story-page__visual {
    padding:
        45px
        5vw
        140px;
}


.duru-story-page__visual-card {
    position:
        relative;

    max-width:
        1500px;

    height:
        min(
            760px,
            62vw
        );

    min-height:
        550px;

    margin:
        0 auto;

    overflow:
        hidden;

    border-radius:
        36px;

    background:
        #8e6570;
}


.duru-story-page__visual-photo,
.duru-story-page__visual-fallback {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;
}


.duru-story-page__visual-photo {
    transition:
        transform 1.5s
        cubic-bezier(.2,.7,.3,1);
}


.duru-story-page__visual-card:hover
.duru-story-page__visual-photo {
    transform:
        scale(1.035);
}


.duru-story-page__visual-fallback {
    background:
        linear-gradient(
            135deg,
            #7d3148,
            #d17c91
        );
}


.duru-story-page__visual-shade {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(24,13,18,.67),
            rgba(24,13,18,.12) 65%
        );
}


.duru-story-page__visual-content {
    position:
        absolute;

    z-index:
        2;

    left:
        6vw;

    bottom:
        70px;

    color:
        #ffffff;
}


.duru-story-page__visual-content > span {
    display:
        block;

    margin-bottom:
        20px;

    font-size:
        8px;

    letter-spacing:
        .32em;

    opacity:
        .7;
}


.duru-story-page__visual-content h2 {
    margin:
        0;

    font-family:
        Didot,
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        clamp(
            55px,
            7vw,
            110px
        );

    line-height:
        .88;

    font-weight:
        400;
}


.duru-story-page__visual-content em {
    color:
        #efc3c9;

    font-weight:
        400;
}


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

.duru-story-page__cta {
    padding:
        100px
        5vw
        130px;

    background:
        linear-gradient(
            135deg,
            #f9efeb,
            #fffaf7
        );
}


.duru-story-page__cta-shell {
    max-width:
        1500px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        60px;
}


.duru-story-page__cta-shell
> div
> span {
    display:
        block;

    margin-bottom:
        20px;

    font-size:
        8px;

    letter-spacing:
        .30em;

    color:
        #a96a7a;
}


.duru-story-page__cta h2 {
    margin:
        0;

    font-family:
        Didot,
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        clamp(
            46px,
            5vw,
            78px
        );

    line-height:
        .95;

    font-weight:
        400;
}


.duru-story-page__cta h2 em {
    color:
        #c9687d;

    font-weight:
        400;
}


.duru-story-page__cta a {
    min-width:
        235px;

    min-height:
        58px;

    padding:
        0
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    border:
        1px solid
        rgba(125,49,72,.25);

    border-radius:
        40px;

    color:
        #7d3148;

    font-size:
        8px;

    letter-spacing:
        .20em;

    text-transform:
        uppercase;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;
}


.duru-story-page__cta a:hover {
    transform:
        translateY(-3px);

    background:
        #7d3148;

    color:
        #ffffff;
}


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

@media (max-width: 800px) {

    .duru-story-page__hero {
        height:
            82svh;

        min-height:
            650px;
    }


    .duru-story-page__hero-content {
        left:
            24px;

        right:
            24px;

        top:
            auto;

        bottom:
            110px;

        width:
            auto;

        transform:
            none;
    }


    .duru-story-page__hero h1 {
        font-size:
            clamp(
                52px,
                15vw,
                74px
            );
    }


    .duru-story-page__hero-bottom {
        left:
            24px;

        right:
            24px;
    }


    .duru-story-page__intro {
        padding:
            85px
            20px;
    }


    .duru-story-page__intro-shell {
        display:
            block;
    }


    .duru-story-page__intro-left {
        margin-bottom:
            40px;
    }


    .duru-story-page__intro-main h2 {
        font-size:
            48px;
    }


    .duru-story-page__statement {
        padding:
            35px
            20px
            95px;
    }


    .duru-story-page__statement h2 {
        font-size:
            43px;
    }


    .duru-story-page__features {
        padding:
            85px
            20px;
    }


    .duru-story-page__features-head {
        margin-bottom:
            45px;

        display:
            block;
    }


    .duru-story-page__features-head h2 {
        margin-top:
            18px;

        font-size:
            45px;
    }


    .duru-story-page__features-grid {
        grid-template-columns:
            1fr;
    }


    .duru-story-page__feature {
        min-height:
            175px;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(40,31,34,.10);
    }


    .duru-story-page__visual {
        padding:
            20px
            20px
            90px;
    }


    .duru-story-page__visual-card {
        height:
            650px;

        min-height:
            0;

        border-radius:
            24px;
    }


    .duru-story-page__visual-content {
        left:
            25px;

        right:
            25px;

        bottom:
            45px;
    }


    .duru-story-page__visual-content h2 {
        font-size:
            55px;
    }


    .duru-story-page__cta {
        padding:
            80px
            20px
            95px;
    }


    .duru-story-page__cta-shell {
        display:
            block;
    }


    .duru-story-page__cta h2 {
        font-size:
            45px;
    }


    .duru-story-page__cta a {
        width:
            100%;

        margin-top:
            45px;
    }

}