/* =====================================================
   SELİN ATEŞ — EDUCATION
   LIQUID GLASS / CINEMATIC SYSTEM
===================================================== */


/* =====================================================
   VARIABLES
===================================================== */

:root {

    --edu-black: #030303;
    --edu-black-soft: #080808;

    --edu-white: #ffffff;
    --edu-white-soft: rgba(255,255,255,.72);
    --edu-white-muted: rgba(255,255,255,.40);

    --edu-red: #ff2020;

    --edu-line: rgba(255,255,255,.10);

    --edu-display: "Figtree", sans-serif;
    --edu-serif: "Instrument Serif", serif;
    --edu-mono: "DM Mono", monospace;

    --edu-spring: cubic-bezier(.16,1,.3,1);
}


/* =====================================================
   PAGE
===================================================== */

body {

    background:
        radial-gradient(
            circle at 70% 10%,
            rgba(255,255,255,.035),
            transparent 35%
        ),
        radial-gradient(
            circle at 15% 60%,
            rgba(255,32,32,.035),
            transparent 30%
        ),
        var(--edu-black);

    color: var(--edu-white);

    overflow-x: hidden;
}


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

body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size: 140px 100%;

    opacity: .25;
}


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

.education-hero {

    position: relative;

    min-height: 100vh;

    padding:
        170px 6vw 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    overflow: hidden;
}


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

.education-hero::before {

    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    right: -250px;
    top: 12%;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.07);

    box-shadow:
        0 0 0 70px rgba(255,255,255,.012),
        0 0 0 140px rgba(255,255,255,.007),
        0 0 120px rgba(255,32,32,.04);

    pointer-events: none;

    animation:
        educationOrbit 16s linear infinite;
}


@keyframes educationOrbit {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


.education-hero::after {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    left: -250px;
    bottom: -220px;

    border-radius: 50%;

    border:
        1px solid rgba(255,32,32,.08);

    pointer-events: none;
}


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

.education-hero-number {

    position: absolute;

    top: 155px;
    left: 6vw;

    font-family: var(--edu-mono);

    font-size: 8px;

    letter-spacing: .12em;

    color:
        var(--edu-white-muted);
}


.education-hero-number::before {

    content: "";

    display: inline-block;

    width: 28px;
    height: 1px;

    margin-right: 12px;

    vertical-align: middle;

    background:
        var(--edu-red);

    box-shadow:
        0 0 8px rgba(255,32,32,.5);
}


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

.education-hero-label {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    width: max-content;

    margin-bottom: 32px;

    padding:
        8px 14px;

    border-radius: 999px;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.08);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    font-family: var(--edu-mono);

    font-size: 8px;

    letter-spacing: .12em;

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


.education-hero-label span {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--edu-red);

    box-shadow:
        0 0 10px rgba(255,32,32,.9);

    animation:
        educationDot 1.6s infinite;
}


@keyframes educationDot {

    0%,
    100% {
        transform: scale(.8);
        opacity: .55;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }

}


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

.education-hero-content {

    position: relative;

    z-index: 2;

    width: min(1250px,100%);

    margin: 0 auto;
}


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

.education-hero h1 {

    margin: 0;

    max-width: 1250px;

    font-family: var(--edu-display);

    font-size:
        clamp(
            82px,
            13.5vw,
            205px
        );

    font-weight: 500;

    line-height: .73;

    letter-spacing: -.075em;

    text-transform: uppercase;
}


.education-hero h1 em {

    font-family: var(--edu-serif);

    font-style: italic;

    font-weight: 400;

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


.education-hero h1 em::after {

    content: "";

    display: inline-block;

    width: .055em;
    height: .055em;

    margin-left: .035em;

    border-radius: 50%;

    background:
        var(--edu-red);

    box-shadow:
        0 0 18px rgba(255,32,32,.8);
}


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

.education-hero-description {

    width: min(480px,100%);

    margin-top: 60px;

    padding:
        20px 22px;

    border-radius: 20px;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid rgba(255,255,255,.09);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.07),
        0 20px 60px rgba(0,0,0,.15);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    font-size: 14px;

    line-height: 1.75;

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


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

.education-hero-bottom {

    position: absolute;

    left: 6vw;
    right: 6vw;
    bottom: 35px;

    display: flex;

    justify-content: space-between;

    font-family:
        var(--edu-mono);

    font-size: 7px;

    letter-spacing: .12em;

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


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

.education-scroll {

    position: absolute;

    left: 50%;

    bottom: 30px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 12px;

    font-family:
        var(--edu-mono);

    font-size: 7px;

    letter-spacing: .13em;

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


.education-scroll strong {

    font-size: 15px;

    font-weight: 400;

    color:
        rgba(255,255,255,.75);

    animation:
        educationScroll 1.5s infinite;
}


@keyframes educationScroll {

    0%,
    100% {
        transform: translateY(0);
        opacity: .4;
    }

    50% {
        transform: translateY(6px);
        opacity: 1;
    }

}


/* =====================================================
   GLASS SECTION
===================================================== */

.education-glass-section {

    position: relative;

    margin:
        0 5vw 80px;

    padding:
        90px 6vw 110px;

    overflow: hidden;

    border-radius: 30px;

    background:
        rgba(255,255,255,.018);

    border:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.08),
        inset 0 -1px 1px rgba(0,0,0,.15),
        0 30px 100px rgba(0,0,0,.20);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.education-glass-section::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.30),
            transparent
        );

    pointer-events: none;
}


.education-glass-section::after {

    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -260px;
    bottom: -260px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.035);

    pointer-events: none;
}


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

.education-section-number {

    position: absolute;

    top: 32px;
    right: 38px;

    font-family:
        var(--edu-mono);

    font-size: 8px;

    letter-spacing: .1em;

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


.education-section-number::before {

    content: "";

    display: inline-block;

    width: 20px;
    height: 1px;

    margin-right: 10px;

    vertical-align: middle;

    background:
        rgba(255,255,255,.20);
}


/* =====================================================
   SECTION LABEL
===================================================== */

.education-section-label {

    position: relative;

    z-index: 2;

    display: inline-block;

    margin-bottom: 45px;

    padding:
        7px 12px;

    border-radius: 999px;

    background:
        rgba(255,255,255,.018);

    border:
        1px solid rgba(255,255,255,.08);

    font-family:
        var(--edu-mono);

    font-size: 7px;

    letter-spacing: .13em;

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


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

.education-intro-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0,1.3fr)
        minmax(280px,.7fr);

    gap: 90px;

    align-items: end;
}


.education-intro-grid h2 {

    margin: 0;

    font-size:
        clamp(
            60px,
            8vw,
            125px
        );

    font-weight: 500;

    line-height: .78;

    letter-spacing: -.07em;
}


.education-intro-grid h2 em {

    font-family:
        var(--edu-serif);

    font-style: italic;

    font-weight: 400;
}


.education-text {

    max-width: 520px;
}


.education-text p {

    margin-bottom: 25px;

    font-size: 14px;

    line-height: 1.8;

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


.education-text p:last-child {
    margin-bottom: 0;
}


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

.education-timeline-section {
    padding-bottom: 120px;
}


.education-timeline {

    position: relative;

    z-index: 2;

    margin-top: 35px;
}


.education-timeline-item {

    position: relative;

    display: grid;

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

    gap: 25px;

    min-height: 300px;

    padding:
        45px 0;

    border-top:
        1px solid rgba(255,255,255,.08);
}


.education-timeline-item:last-child {

    border-bottom:
        1px solid rgba(255,255,255,.08);
}


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

.education-timeline-year {

    display: flex;

    flex-direction: column;

    gap: 8px;

    padding-top: 5px;
}


.education-timeline-year strong {

    font-family:
        var(--edu-mono);

    font-size: 20px;

    font-weight: 400;

    color:
        #fff;
}


.education-timeline-year span {

    font-family:
        var(--edu-mono);

    font-size: 7px;

    letter-spacing: .08em;

    color:
        var(--edu-red);
}


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

.education-timeline-line {

    position: relative;

    display: flex;

    justify-content: center;

    width: 45px;
}


.education-timeline-line::before {

    content: "";

    position: absolute;

    top: 0;
    bottom: -45px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            rgba(255,32,32,.65),
            rgba(255,255,255,.10)
        );
}


.education-timeline-item:last-child
.education-timeline-line::before {

    bottom: 0;
}


.education-timeline-line span {

    position: relative;

    z-index: 2;

    width: 11px;
    height: 11px;

    margin-top: 4px;

    border-radius: 50%;

    background:
        var(--edu-red);

    border:
        3px solid var(--edu-black);

    box-shadow:
        0 0 0 1px rgba(255,32,32,.35),
        0 0 20px rgba(255,32,32,.45);
}


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

.education-timeline-content {

    position: relative;

    padding:
        0 15px 0 10px;
}


.education-index {

    display: inline-block;

    margin-right: 15px;

    font-family:
        var(--edu-mono);

    font-size: 8px;

    color:
        var(--edu-red);
}


.education-timeline-content small {

    font-family:
        var(--edu-mono);

    font-size: 7px;

    letter-spacing: .12em;

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


.education-timeline-content h3 {

    margin-top: 25px;

    font-size:
        clamp(
            48px,
            6vw,
            90px
        );

    font-weight: 500;

    line-height: .80;

    letter-spacing: -.065em;
}


.education-timeline-content h4 {

    margin-top: 28px;

    font-family:
        var(--edu-serif);

    font-size:
        clamp(
            25px,
            3vw,
            42px
        );

    font-style: italic;

    font-weight: 400;

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


.education-timeline-content p {

    max-width: 600px;

    margin-top: 25px;

    font-size: 13px;

    line-height: 1.8;

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


/* =====================================================
   TAGS
===================================================== */

.education-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 30px;
}


.education-tags span {

    padding:
        7px 11px;

    border-radius: 999px;

    font-family:
        var(--edu-mono);

    font-size: 7px;

    letter-spacing: .07em;

    color:
        rgba(255,255,255,.48);

    background:
        rgba(255,255,255,.025);

    border:
        1px solid rgba(255,255,255,.08);

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease;
}


.education-tags span:hover {

    color: #fff;

    background:
        rgba(255,255,255,.07);

    border-color:
        rgba(255,255,255,.20);
}


/* =====================================================
   DESIGN × TECHNOLOGY
===================================================== */

.education-bridge {

    position: relative;

    min-height: 85vh;

    margin:
        0 5vw 80px;

    padding:
        100px 6vw;

    overflow: hidden;

    border-radius: 32px;

    background:
        rgba(255,255,255,.018);

    border:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.08),
        0 30px 100px rgba(0,0,0,.20);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.education-bridge::before {

    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    right: -350px;
    top: -180px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.055);

    box-shadow:
        0 0 0 70px rgba(255,255,255,.012),
        0 0 100px rgba(255,32,32,.04);

    pointer-events: none;
}


.education-bridge-content {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    gap: 100px;

    align-items: center;
}


.education-bridge-title {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    font-size:
        clamp(
            75px,
            10vw,
            155px
        );

    font-weight: 500;

    line-height: .70;

    letter-spacing: -.075em;
}


.education-bridge-title span {

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


.education-bridge-title em {

    font-family:
        var(--edu-serif);

    font-size:
        1.05em;

    font-style: italic;

    font-weight: 400;

    color:
        var(--edu-red);
}


.education-bridge-title strong {

    margin:
        22px 0;

    font-family:
        var(--edu-mono);

    font-size: 13px;

    font-weight: 400;

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


.education-bridge-text p {

    margin-bottom: 28px;

    font-size: 14px;

    line-height: 1.8;

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


.education-bridge-text p:last-child {
    margin-bottom: 0;
}


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

.learning-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 12px;

    margin-top: 20px;
}


.learning-card {

    position: relative;

    min-height: 350px;

    padding: 30px;

    overflow: hidden;

    border-radius: 22px;

    background:
        rgba(255,255,255,.018);

    border:
        1px solid rgba(255,255,255,.08);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.06);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transition:
        transform .55s var(--edu-spring),
        background .4s ease,
        border-color .4s ease;
}


.learning-card::before {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -90px;
    top: -90px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.07);

    transition:
        transform .7s var(--edu-spring);
}


.learning-card:hover {

    transform:
        translateY(-8px);

    background:
        rgba(255,255,255,.035);

    border-color:
        rgba(255,255,255,.17);
}


.learning-card:hover::before {

    transform:
        scale(1.4);
}


.learning-card > span {

    font-family:
        var(--edu-mono);

    font-size: 8px;

    color:
        var(--edu-red);
}


.learning-card h2 {

    margin-top: 60px;

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

    font-weight: 500;

    line-height: .8;

    letter-spacing: -.06em;
}


.learning-card p {

    max-width: 420px;

    margin-top: 25px;

    font-size: 12px;

    line-height: 1.7;

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


.learning-card ul {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 25px;

    list-style: none;
}


.learning-card li {

    padding:
        7px 10px;

    border-radius: 999px;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid rgba(255,255,255,.07);

    font-family:
        var(--edu-mono);

    font-size: 7px;

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


/* =====================================================
   PHILOSOPHY
===================================================== */

.education-philosophy {

    position: relative;

    min-height: 90vh;

    margin:
        0 5vw 80px;

    padding:
        110px 6vw;

    display: flex;

    flex-direction: column;

    justify-content: center;

    overflow: hidden;

    border-radius: 32px;

    background:
        rgba(255,255,255,.018);

    border:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.08),
        0 30px 100px rgba(0,0,0,.20);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.education-philosophy::before {

    content: "05";

    position: absolute;

    right: -50px;
    bottom: -170px;

    font-size:
        48vw;

    line-height: .7;

    font-weight: 600;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.025);

    pointer-events: none;
}


.education-philosophy-content {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    gap: 100px;

    align-items: end;
}


.education-philosophy h2 {

    font-size:
        clamp(
            75px,
            11vw,
            170px
        );

    font-weight: 500;

    line-height: .72;

    letter-spacing: -.075em;
}


.education-philosophy h2 em {

    font-family:
        var(--edu-serif);

    font-style: italic;

    font-weight: 400;

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


.education-philosophy-text p {

    margin-bottom: 25px;

    font-size: 13px;

    line-height: 1.8;

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


.education-philosophy-text p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   FINAL
===================================================== */

.education-final {

    position: relative;

    min-height: 90vh;

    margin:
        0 5vw 80px;

    padding:
        110px 6vw;

    display: flex;

    align-items: center;

    overflow: hidden;

    border-radius: 32px;

    background:
        rgba(255,255,255,.018);

    border:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.08),
        0 30px 100px rgba(0,0,0,.20);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.education-final::before {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    right: -250px;
    top: -180px;

    border-radius: 50%;

    border:
        1px solid rgba(255,32,32,.12);

    box-shadow:
        0 0 120px rgba(255,32,32,.06);

    pointer-events: none;
}


.education-final-background {

    position: absolute;

    right: -50px;
    bottom: -80px;

    font-size:
        35vw;

    line-height: .7;

    font-weight: 600;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.035);

    pointer-events: none;
}


.education-final-content {

    position: relative;

    z-index: 2;

    max-width: 1000px;
}


.education-final-content > span {

    display: inline-block;

    margin-bottom: 35px;

    font-family:
        var(--edu-mono);

    font-size: 8px;

    letter-spacing: .14em;

    color:
        var(--edu-red);
}


.education-final h2 {

    font-size:
        clamp(
            65px,
            9.5vw,
            150px
        );

    font-weight: 500;

    line-height: .75;

    letter-spacing: -.075em;
}


.education-final h2 em {

    font-family:
        var(--edu-serif);

    font-style: italic;

    font-weight: 400;
}


.education-final p {

    max-width: 500px;

    margin-top: 55px;

    font-size: 14px;

    line-height: 1.8;

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


/* =====================================================
   FINAL LINKS
===================================================== */

.education-final-links {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 45px;
}


.education-final-links a {

    display: inline-flex;

    align-items: center;

    gap: 25px;

    padding:
        11px 12px 11px 18px;

    border-radius: 999px;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid rgba(255,255,255,.12);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.07);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    font-family:
        var(--edu-mono);

    font-size: 8px;

    letter-spacing: .08em;

    color:
        rgba(255,255,255,.60);

    transition:
        transform .45s var(--edu-spring),
        background .35s ease,
        border-color .35s ease,
        color .35s ease;
}


.education-final-links a span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 27px;
    height: 27px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.90);

    color:
        #000;

    font-size: 12px;

    transition:
        transform .45s var(--edu-spring);
}


.education-final-links a:hover {

    transform:
        translateY(-4px);

    background:
        rgba(255,255,255,.07);

    border-color:
        rgba(255,255,255,.28);

    color:
        #fff;
}


.education-final-links a:hover span {

    transform:
        rotate(45deg);
}


/* =====================================================
   FOOTER
===================================================== */

.footer {

    margin:
        0 5vw;

    min-height: 100px;

    padding:
        25px 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-top:
        1px solid rgba(255,255,255,.08);

    font-family:
        var(--edu-mono);

    font-size: 7px;

    letter-spacing: .1em;

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


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

@media (max-width: 1000px) {

    .education-hero h1 {

        font-size:
            clamp(
                75px,
                14vw,
                160px
            );
    }


    .education-intro-grid,
    .education-bridge-content,
    .education-philosophy-content {

        grid-template-columns:
            1fr;

        gap: 55px;
    }


    .learning-grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


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

@media (max-width: 700px) {


    /* HERO */

    .education-hero {

        min-height:
            100svh;

        padding:
            125px 20px 100px;
    }


    .education-hero-number {

        top: 110px;
        left: 20px;
    }


    .education-hero h1 {

        font-size:
            clamp(
                60px,
                18vw,
                115px
            );

        line-height:
            .76;
    }


    .education-hero-description {

        margin-top:
            40px;

        padding:
            17px 18px;

        border-radius:
            17px;

        font-size:
            13px;
    }


    .education-hero-bottom {

        left: 20px;
        right: 20px;

        bottom: 22px;
    }


    .education-scroll {

        display: none;
    }


    /* GLASS */

    .education-glass-section,
    .education-bridge,
    .education-philosophy,
    .education-final {

        margin:
            0 15px 50px;

        padding:
            65px 22px 75px;

        border-radius:
            24px;
    }


    .education-section-number {

        top: 25px;
        right: 25px;
    }


    .education-section-label {

        margin-bottom:
            40px;
    }


    /* INTRO */

    .education-intro-grid {

        grid-template-columns:
            1fr;

        gap:
            40px;
    }


    .education-intro-grid h2 {

        font-size:
            clamp(
                52px,
                14vw,
                90px
            );
    }


    .education-text p {

        font-size:
            13px;
    }


    /* TIMELINE */

    .education-timeline-item {

        grid-template-columns:
            55px
            25px
            minmax(0,1fr);

        gap:
            10px;

        min-height:
            260px;

        padding:
            35px 0;
    }


    .education-timeline-year strong {

        font-size:
            14px;
    }


    .education-timeline-year span {

        font-size:
            6px;
    }


    .education-timeline-line {

        width:
            25px;
    }


    .education-timeline-content {

        padding:
            0;
    }


    .education-timeline-content h3 {

        margin-top:
            20px;

        font-size:
            clamp(
                32px,
                9vw,
                60px
            );
    }


    .education-timeline-content h4 {

        margin-top:
            20px;

        font-size:
            23px;
    }


    .education-timeline-content p {

        font-size:
            12px;
    }


    .education-tags span {

        font-size:
            6px;

        padding:
            6px 8px;
    }


    /* BRIDGE */

    .education-bridge {

        min-height:
            75vh;
    }


    .education-bridge-content {

        gap:
            45px;
    }


    .education-bridge-title {

        font-size:
            clamp(
                58px,
                16vw,
                100px
            );
    }


    .education-bridge-text p {

        font-size:
            13px;
    }


    /* LEARNING */

    .learning-grid {

        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    .learning-card {

        min-height:
            300px;

        padding:
            25px;

        border-radius:
            20px;
    }


    .learning-card h2 {

        margin-top:
            50px;

        font-size:
            55px;
    }


    /* PHILOSOPHY */

    .education-philosophy {

        min-height:
            75vh;
    }


    .education-philosophy-content {

        gap:
            45px;
    }


    .education-philosophy h2 {

        font-size:
            clamp(
                65px,
                18vw,
                120px
            );
    }


    .education-philosophy-text p {

        font-size:
            13px;
    }


    /* FINAL */

    .education-final {

        min-height:
            75vh;
    }


    .education-final h2 {

        font-size:
            clamp(
                58px,
                16vw,
                105px
            );
    }


    .education-final p {

        margin-top:
            40px;

        font-size:
            13px;
    }


    .education-final-links {

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    /* FOOTER */

    .footer {

        margin:
            0 20px;

        padding:
            25px 0;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            14px;
    }


    /* CURSOR */

    .cursor,
    .cursor-glow {

        display:
            none;
    }

}


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

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

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}

/* =====================================================
   HERO VISIBILITY FIX
===================================================== */

.education-hero {
    position: relative !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 100vh !important;
    z-index: 1 !important;
}

.education-hero-content {
    position: relative !important;
    z-index: 10 !important;
    visibility: visible !important;
}

.education-hero h1 {
    position: relative !important;
    z-index: 20 !important;
    display: block !important;
    visibility: visible !important;
    color: #ffffff !important;
}

.education-hero-label,
.education-hero-description,
.education-hero-number,
.education-hero-bottom,
.education-scroll {
    position: relative !important;
    z-index: 20 !important;
    visibility: visible !important;
}

.education-hero-label {
    opacity: 1 !important;
}

.education-hero-description {
    opacity: 1 !important;
    color: rgba(255,255,255,.55) !important;
}

/* =====================================================
   EDUCATION TIMELINE — CINEMATIC SCROLL
===================================================== */

.education-timeline {
    position: relative;
}

/* Ana timeline çizgisi */
.education-timeline::before {
    content: "";
    position: absolute;

    left: 142px;
    top: 0;
    bottom: 0;

    width: 1px;

    background: rgba(255,255,255,.08);

    z-index: 0;
}

/* Scroll ile ilerleyen kırmızı çizgi */
.education-timeline::after {
    content: "";

    position: absolute;

    left: 142px;
    top: 0;

    width: 1px;
    height: var(--timeline-progress, 0%);

    background: linear-gradient(
        to bottom,
        #ff2020,
        rgba(255,32,32,.35)
    );

    box-shadow:
        0 0 10px rgba(255,32,32,.55),
        0 0 25px rgba(255,32,32,.20);

    z-index: 1;

    transform-origin: top;
}


/* Timeline item */
.education-timeline-item {
    position: relative;

    transition:
        opacity .6s ease,
        transform .6s cubic-bezier(.16,1,.3,1);
}


/* Aktif timeline */
.education-timeline-item.timeline-active {
    transform: translateX(8px);
}


/* Yıl */
.education-timeline-item .education-timeline-year {
    position: relative;
    z-index: 5;

    transition:
        transform .5s cubic-bezier(.16,1,.3,1),
        opacity .5s ease;
}


.education-timeline-item.timeline-active
.education-timeline-year {
    transform: translateX(-5px);
}


/* Aktif yıl */
.education-timeline-item.timeline-active
.education-timeline-year strong {
    color: #ff2020;

    text-shadow:
        0 0 15px rgba(255,32,32,.45);
}


/* Timeline noktası */
.education-timeline-item
.education-timeline-line span {

    transition:
        transform .5s cubic-bezier(.16,1,.3,1),
        box-shadow .5s ease,
        background .5s ease;
}


.education-timeline-item.timeline-active
.education-timeline-line span {

    transform: scale(1.45);

    background: #ff2020;

    box-shadow:
        0 0 0 6px rgba(255,32,32,.08),
        0 0 20px rgba(255,32,32,.75),
        0 0 45px rgba(255,32,32,.35);
}


/* İçerik */
.education-timeline-item
.education-timeline-content {

    position: relative;

    transition:
        transform .6s cubic-bezier(.16,1,.3,1),
        opacity .5s ease;
}


.education-timeline-item.timeline-active
.education-timeline-content {

    transform: translateX(8px);
}


/* Büyük arka plan yılı */
.education-timeline-content::after {

    content: attr(data-year);

    position: absolute;

    right: -20px;
    top: 10px;

    font-family: "Figtree", sans-serif;

    font-size: clamp(
        100px,
        14vw,
        220px
    );

    font-weight: 600;

    line-height: .7;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.025);

    pointer-events: none;

    z-index: -1;

    transition:
        opacity .6s ease,
        transform .8s cubic-bezier(.16,1,.3,1);
}


.education-timeline-item.timeline-active
.education-timeline-content::after {

    opacity: 1;

    transform:
        translateX(-20px);

    -webkit-text-stroke:
        1px rgba(255,32,32,.06);
}


/* İçerik hover */
.education-timeline-item:hover
.education-timeline-content {

    transform:
        translateX(12px);
}


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

@media (max-width: 700px) {

    .education-timeline::before,
    .education-timeline::after {

        left: 67px;

    }


    .education-timeline-item.timeline-active {

        transform:
            translateX(4px);

    }


    .education-timeline-item
    .education-timeline-content::after {

        font-size: 100px;

        right: -5px;

        top: 20px;

    }

}

/* =====================================================
   DESIGN × CODE × EXPERIENCE — MOTION
===================================================== */

.education-bridge {
    perspective: 1200px;
}

.education-bridge-title {
    perspective: 1000px;
}

.education-bridge-title > * {
    will-change: transform, opacity;
}

.education-bridge-title span,
.education-bridge-title em {
    display: block;
}

.education-bridge-title strong {
    display: block;
    transform-origin: center;
}

.education-bridge-text {
    position: relative;
    z-index: 3;
}

.education-bridge-text p {
    transition:
        color .4s ease,
        transform .5s cubic-bezier(.16,1,.3,1);
}

.education-bridge-text p:hover {
    color: rgba(255,255,255,.75);
    transform: translateX(8px);
}


/* Büyük arka plan ışığı */

.education-bridge::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: 15%;
    top: 25%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,32,32,.08),
            transparent 70%
        );

    filter: blur(30px);

    opacity: .5;

    pointer-events: none;

    transition:
        transform 1s cubic-bezier(.16,1,.3,1);
}


/* Aktif hareket */

.education-bridge.bridge-active::after {
    transform:
        translate(120px, 80px)
        scale(1.4);
}


/* Mobile */

@media (max-width: 700px) {

    .education-bridge-title > * {
        transform: none !important;
    }

}