/* =========================================================
   WHY YEDİİKLİM V2 — SCROLL EXPERIENCE
========================================================= */

.why-section {
    --why-accent: #f2384a;
    --why-accent-rgb: 242, 56, 74;
    --why-progress: 0;

    position: relative;
    isolation: isolate;
    overflow: clip;
    content-visibility: auto;
    contain-intrinsic-size: auto 1100px;

    padding: 150px 0 190px;

    background: #f8fafc;

}


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

.why-section::before {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    right: -250px;
    top: 15%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(var(--why-accent-rgb), .13) 0%,
            rgba(var(--why-accent-rgb), .055) 32%,
            transparent 70%
        );

    filter: blur(20px);

    pointer-events: none;

    transform:
        translate3d(
            0,
            calc(var(--why-progress) * 220px),
            0
        )
        scale(
            calc(1 + var(--why-progress) * .15)
        );

}


/* Dev arka plan typography */

.why-section::after {
    content: "YEDİİKLİM";

    position: absolute;

    left: -45px;
    bottom: -40px;

    z-index: -1;

    color: #102d56;

    opacity: .022;

    font-size: clamp(120px, 16vw, 240px);
    font-weight: 950;

    line-height: .8;
    letter-spacing: -13px;

    white-space: nowrap;

    pointer-events: none;
    user-select: none;
}


/* =========================================================
   GRID
========================================================= */

.why-container {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, .82fr)
        minmax(0, 1.18fr);

    gap: clamp(70px, 8vw, 120px);

    align-items: start;
}


/* =========================================================
   LEFT / STICKY
========================================================= */

.why-intro {
    position: sticky;
    top: 145px;

    max-width: 480px;
}


/* Label */

.why-label {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 25px;

    color: var(--red);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.9px;
}


.why-label::before {
    content: "";

    width: 30px;
    height: 3px;

    border-radius: 100px;

    background: var(--red);
}


/* Heading */

.why-intro h2 {
    margin: 0;

    color: var(--navy-dark);

    font-size: clamp(48px, 4.7vw, 70px);
    font-weight: 920;

    line-height: .97;

    letter-spacing: -4.5px;
}


.why-intro h2 span {
    display: block;

    margin-top: 7px;

    color: var(--why-accent);

}


/* Text */

.why-intro p {
    max-width: 435px;

    margin-top: 28px;

    color: #6d7d91;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   LEFT PROGRESS INDICATOR
========================================================= */

.why-intro::after {
    content: "";

    display: block;

    width:
        calc(45px + (90px * var(--why-progress)));

    height: 3px;

    margin-top: 34px;

    border-radius: 100px;

    background: var(--why-accent);

    opacity: .75;

}


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

.why-link {
    display: inline-flex;
    align-items: center;

    gap: 13px;

    margin-top: 27px;

    color: var(--navy);

    font-size: 12px;
    font-weight: 850;
}


.why-link > span {
    width: 39px;
    height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--navy);

    color: #fff;

    font-size: 11px;

    transition: transform 300ms cubic-bezier(.2,.8,.2,1);
}


.why-link:hover > span {
    transform: translateX(5px);

    background: var(--red);
}


/* =========================================================
   TIMELINE
========================================================= */

.why-list {
    position: relative;

    padding-left: 66px;
}


/* Base line */

.why-list::before {
    content: "";

    position: absolute;

    top: 92px;
    bottom: 92px;
    left: 20px;

    width: 3px;

    border-radius: 100px;

    background:
        linear-gradient(
            to bottom,
            rgba(16,45,86,.07),
            rgba(16,45,86,.14),
            rgba(16,45,86,.07)
        );
}


/* Progress */

.why-list::after {
    content: "";

    position: absolute;

    top: 92px;
    left: 20px;

    width: 3px;

    height:
        calc(
            (100% - 184px) *
            var(--why-progress)
        );

    border-radius: 100px;

    background: var(--why-accent);

    box-shadow:
        0 0 8px rgba(var(--why-accent-rgb), .5),
        0 0 22px rgba(var(--why-accent-rgb), .25);

}


/* =========================================================
   CARDS
========================================================= */

.why-item {
    --why-color: #f2384a;
    --why-soft: #ffe1e4;
    --item-progress: 0;

    position: relative;

    display: grid;

    grid-template-columns:
        45px
        62px
        minmax(0, 1fr)
        42px;

    gap: 21px;

    align-items: center;

    min-height: 205px;

    padding: 30px 20px;

    opacity:
        calc(.25 + var(--item-progress) * .75);

    filter:
        blur(
            calc(
                (1 - var(--item-progress)) * 3px
            )
        );

    transform:
        translate3d(
            calc((1 - var(--item-progress)) * 28px),
            calc((1 - var(--item-progress)) * 20px),
            0
        )
        scale(
            calc(.94 + var(--item-progress) * .06)
        );

    transform-origin: center left;

    will-change:
        transform,
        opacity,
        filter;
}


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

.why-item::before {
    content: "";

    position: absolute;

    inset: 10px -16px;

    z-index: -1;

    border:
        1px solid rgba(var(--why-accent-rgb), .10);

    border-radius: 27px;

    background:
        linear-gradient(
            125deg,
            rgba(255,255,255,.92),
            rgba(255,255,255,.55)
        );

    box-shadow:
        0 25px 70px rgba(16,45,86,.06);

    opacity:
        calc(
            var(--item-progress) * .98
        );

    backdrop-filter:
        blur(14px);

    transform:
        scale(
            calc(.96 + var(--item-progress) * .04)
        );
}


/* =========================================================
   TIMELINE DOT
========================================================= */

.why-item::after {
    content: "";

    position: absolute;

    top: 50%;
    left: -47px;

    width: 13px;
    height: 13px;

    border:
        3px solid #f8fafc;

    border-radius: 50%;

    background: #d5dce5;

    box-shadow:
        0 0 0 2px #d5dce5;

    transform:
        translate(-50%, -50%)
        scale(
            calc(.8 + var(--item-progress) * .35)
        );

}


/* =========================================================
   COLORS
========================================================= */

.why-item-red {
    --why-color: #f2384a;
    --why-soft: #ffe1e4;
}


.why-item-blue {
    --why-color: #2868eb;
    --why-soft: #dce9ff;
}


.why-item-green {
    --why-color: #009f72;
    --why-soft: #d7f6ea;
}


.why-item-purple {
    --why-color: #8338ec;
    --why-soft: #ebddff;
}


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

.why-number {
    align-self: start;

    padding-top: 9px;

    color: var(--why-color);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.2px;

    opacity:
        calc(.45 + var(--item-progress) * .55);
}


/* =========================================================
   ICON
========================================================= */

.why-icon {
    width: 57px;
    height: 57px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background: var(--why-soft);

    color: var(--why-color);

    font-size: 19px;

    transform:
        rotate(
            calc(
                (1 - var(--item-progress)) * 7deg
            )
        )
        scale(
            calc(.88 + var(--item-progress) * .12)
        );

}


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

.why-content h3 {
    margin: 0 0 9px;

    color: var(--navy-dark);

    font-size: 21px;
    font-weight: 880;

    letter-spacing: -.8px;
}


.why-content p {
    max-width: 430px;

    margin: 0;

    color: #718096;

    font-size: 12.5px;

    line-height: 1.7;
}


/* =========================================================
   ARROW
========================================================= */

.why-arrow {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    justify-self: end;

    border:
        1px solid rgba(16,45,86,.11);

    border-radius: 50%;

    color: #9ba6b5;

    font-size: 10px;

    transform:
        rotate(
            calc(
                (1 - var(--item-progress)) * -20deg
            )
        );

}


/* =========================================================
   ACTIVE
========================================================= */

.why-item.is-active::after {
    background: var(--why-color);

    box-shadow:
        0 0 0 2px var(--why-color),
        0 0 0 8px var(--why-soft),
        0 0 28px var(--why-color);
}


.why-item.is-active .why-icon {
    background: var(--why-color);

    color: #ffffff;

    box-shadow:
        0 14px 35px rgba(16,45,86,.12);
}


.why-item.is-active .why-content h3 {
    color: var(--why-color);
}


.why-item.is-active .why-arrow {
    border-color: var(--why-color);

    background: var(--why-color);

    color: #fff;
}


/* =========================================================
   PASSED
========================================================= */

.why-item.is-passed {
    opacity: .58;
}


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

@media (max-width: 950px) {

    /*
     * Kritik kısım:
     * Scroll için yeterli mesafe yaratıyoruz.
     */

    .why-section {
        padding:
            100px 0 150px;
    }


    .why-container {
        display: block;
    }


    .why-intro {
        position: relative;

        top: auto;

        max-width: 650px;

        margin-bottom: 65px;
    }


    .why-list {
        padding-left: 58px;
    }


    .why-item {
        min-height: 220px;
    }

}


/* =========================================================
   MOBILE SCROLL SCENE
========================================================= */

@media (max-width: 600px) {

    .why-section {
        padding:
            90px 0 180px;
    }


    .why-intro {
        margin-bottom: 55px;
    }


    .why-intro h2 {
        font-size: 44px;

        letter-spacing: -3.2px;
    }


    .why-intro p {
        font-size: 14px;
    }


    /*
     * Mobilde özellikle uzun tutuyoruz.
     * Böylece son kartta sayfa bitmiyor.
     */

    .why-list {
        min-height: 1250px;

        padding-left: 38px;
    }


    .why-list::before,
    .why-list::after {
        left: 9px;

        top: 95px;

        bottom: 95px;
    }


    .why-item {
        grid-template-columns:
            34px
            49px
            minmax(0, 1fr);

        gap: 12px;

        min-height: 285px;

        padding:
            30px 4px;
    }


    .why-item::after {
        left: -29px;
    }


    .why-item::before {
        inset:
            22px -8px;
    }


    .why-icon {
        width: 47px;
        height: 47px;

        border-radius: 15px;

        font-size: 16px;
    }


    .why-arrow {
        display: none;
    }


    .why-content h3 {
        font-size: 18px;
    }


    .why-content p {
        font-size: 12px;

        line-height: 1.65;
    }


    .why-section::before {
        width: 450px;
        height: 450px;

        right: -280px;
    }


    .why-section::after {
        bottom: 5px;

        font-size: 100px;

        letter-spacing: -7px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .why-item {
        opacity: 1;

        filter: none;

        transform: none;
    }

}