/* =====================================================
   SELİN ATEŞ — PORTFOLIO
   EDITORIAL / CINEMATIC / LIQUID GLASS
===================================================== */


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

:root {

    --black: #050505;
    --black-soft: #0a0a0a;

    --white: #f5f5f5;
    --white-soft: rgba(255,255,255,.72);

    --gray: #777;
    --gray-dark: #444;

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

    --line-soft:
        rgba(255,255,255,.055);

    --glass:
        rgba(255,255,255,.025);

    --display:
        "Figtree",
        sans-serif;

    --serif:
        "Instrument Serif",
        serif;

    --mono:
        "DM Mono",
        monospace;

    --ease:
        cubic-bezier(.16,1,.3,1);

}


/* =====================================================
   RESET
===================================================== */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    background:
        var(--black);

    scroll-behavior:
        smooth;

}


body {

    min-height: 100vh;

    background:
        var(--black);

    color:
        var(--white);

    font-family:
        var(--display);

    overflow-x:
        hidden;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button {

    font-family:
        inherit;

}


img {

    max-width:
        100%;

}


::selection {

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

    color:
        #000;

}


/* =====================================================
   CURSOR
===================================================== */

.cursor {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #fff;

    transform:
        translate(-50%, -50%);

    pointer-events:
        none;

    z-index:
        99999;

    mix-blend-mode:
        difference;

}


.cursor-glow {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        90px;

    height:
        90px;

    border-radius:
        50%;

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

    transform:
        translate(-50%, -50%);

    pointer-events:
        none;

    z-index:
        99998;

}


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

.portfolio-background {

    position:
        fixed;

    inset:
        0;

    overflow:
        hidden;

    pointer-events:
        none;

    z-index:
        0;

}


.portfolio-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        .65;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025)
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025)
            1px,
            transparent 1px
        );

    background-size:
        90px 90px;

}


.portfolio-glow {

    position:
        absolute;

    width:
        700px;

    height:
        700px;

    left:
        50%;

    top:
        35%;

    transform:
        translate(-50%, -50%);

    border-radius:
        50%;

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

    filter:
        blur(30px);

}


.portfolio-bg-text {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(-50%, -50%);

    font-family:
        var(--display);

    font-size:
        clamp(180px, 28vw, 500px);

    font-weight:
        600;

    line-height:
        .7;

    letter-spacing:
        -.09em;

    color:
        transparent;

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

    white-space:
        nowrap;

}


/* =====================================================
   HEADER
===================================================== */

.portfolio-header {

    position:
        relative;

    z-index:
        20;

    width:
        100%;

    min-height:
        90px;

    padding:
        0 3vw;

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    border-bottom:
        1px solid var(--line-soft);

}


.portfolio-logo {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    width:
        fit-content;

    font-family:
        var(--mono);

    font-size:
        10px;

    letter-spacing:
        .08em;

}


.portfolio-logo-dot {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #fff;

    box-shadow:
        0 0 12px
        rgba(255,255,255,.5);

    animation:
        logoPulse
        1.8s infinite;

}


@keyframes logoPulse {

    0%,
    100% {

        opacity:
            .45;

        transform:
            scale(.8);

    }

    50% {

        opacity:
            1;

        transform:
            scale(1.2);

    }

}


.portfolio-header-center {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        .12em;

    color:
        #666;

}


.portfolio-header-center span:last-child {

    color:
        #aaa;

}


.portfolio-header-right {

    display:
        flex;

    justify-content:
        flex-end;

    align-items:
        center;

    gap:
        25px;

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        .1em;

}


.portfolio-header-right > span {

    color:
        #555;

}


.portfolio-header-right a {

    color:
        #999;

    transition:
        color .3s ease;

}


.portfolio-header-right a:hover {

    color:
        #fff;

}


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

.portfolio-hero {

    position:
        relative;

    z-index:
        2;

    min-height:
        calc(100vh - 90px);

    padding:
        110px 7vw 80px;

    display:
        flex;

    align-items:
        center;

}


.portfolio-hero-index {

    position:
        absolute;

    top:
        120px;

    left:
        3vw;

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        .12em;

    color:
        #555;

}


.portfolio-hero-content {

    width:
        min(1250px, 100%);

    margin:
        0 auto;

}


.portfolio-hero-label {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        38px;

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        .13em;

    color:
        #777;

}


.portfolio-hero-label span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #fff;

    box-shadow:
        0 0 12px
        rgba(255,255,255,.5);

}


.portfolio-hero-title {

    max-width:
        1100px;

    font-family:
        var(--display);

    font-size:
        clamp(72px, 11vw, 175px);

    font-weight:
        500;

    line-height:
        .79;

    letter-spacing:
        -.075em;

    text-transform:
        uppercase;

}


.portfolio-hero-title span {

    font-family:
        var(--serif);

    font-style:
        italic;

    font-weight:
        400;

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

}


.portfolio-hero-bottom {

    margin-top:
        70px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        50px;

}


.portfolio-hero-bottom p {

    max-width:
        430px;

    color:
        #777;

    font-size:
        13px;

    line-height:
        1.75;

}


.portfolio-scroll {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        .12em;

    color:
        #666;

}


.portfolio-scroll strong {

    font-size:
        17px;

    font-weight:
        400;

    color:
        #fff;

    animation:
        scrollArrow
        1.6s infinite;

}


@keyframes scrollArrow {

    0%,
    100% {

        transform:
            translateY(0);

        opacity:
            .4;

    }

    50% {

        transform:
            translateY(7px);

        opacity:
            1;

    }

}


/* =====================================================
   CONTROLS
===================================================== */

.portfolio-controls {

    position:
        relative;

    z-index:
        10;

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    gap:
        30px;

    padding:
        18px 3vw;

    border-top:
        1px solid var(--line);

    border-bottom:
        1px solid var(--line);

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

    backdrop-filter:
        blur(12px);

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

}


.portfolio-filter-label {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        .1em;

    color:
        #555;

}


.portfolio-filter-label span:first-child {

    color:
        #aaa;

}


.portfolio-filter {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        6px;

}


.filter-button {

    padding:
        8px 14px;

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

    border-radius:
        100px;

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

    color:
        #666;

    cursor:
        pointer;

    font-family:
        var(--mono);

    font-size:
        7px;

    letter-spacing:
        .09em;

    transition:
        color .35s ease,
        border-color .35s ease,
        background .35s ease,
        transform .4s var(--ease);

}


.filter-button:hover {

    color:
        #fff;

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

    transform:
        translateY(-2px);

}


.filter-button.active {

    color:
        #000;

    background:
        #fff;

    border-color:
        #fff;

}


.portfolio-count {

    display:
        flex;

    justify-content:
        flex-end;

    gap:
        7px;

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        .08em;

    color:
        #555;

}


.portfolio-count strong {

    color:
        #fff;

    font-weight:
        400;

}


/* =====================================================
   PROJECTS
===================================================== */

.portfolio-projects {

    position:
        relative;

    z-index:
        2;

    width:
        min(1400px, 100%);

    margin:
        0 auto;

    padding:
        120px 5vw 180px;

}


/* =====================================================
   PROJECT
===================================================== */

.portfolio-project {

    position:
        relative;

    width:
        min(850px, 78%);

    margin-bottom:
        170px;

}


.portfolio-project:nth-child(even) {

    margin-left:
        auto;

    margin-right:
        4%;

}


.portfolio-project:nth-child(3n) {

    width:
        min(700px, 65%);

    margin-left:
        10%;

}


.project-link {

    display:
        block;

}


.project-image-wrap {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        1.35 / 1;

    overflow:
        hidden;

    background:
        #101010;

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

}


/* GLASS EDGE */

.project-image-wrap::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        3;

    pointer-events:
        none;

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

    opacity:
        .6;

}


.project-image-wrap::after {

    content:
        "VIEW PROJECT  ↗";

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    z-index:
        5;

    transform:
        translate(-50%, -50%)
        scale(.88);

    padding:
        13px 19px;

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

    border-radius:
        100px;

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

    backdrop-filter:
        blur(12px);

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

    color:
        #fff;

    font-family:
        var(--mono);

    font-size:
        7px;

    letter-spacing:
        .1em;

    opacity:
        0;

    transition:
        opacity .45s ease,
        transform .55s var(--ease);

}


.project-link:hover
.project-image-wrap::after {

    opacity:
        1;

    transform:
        translate(-50%, -50%)
        scale(1);

}


.project-image {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transform:
        scale(1.015);

    filter:
        saturate(.9);

    transition:
        transform
        1.1s
        var(--ease),
        filter
        .8s
        ease;

}


.project-link:hover
.project-image {

    transform:
        scale(1.065);

    filter:
        saturate(1);

}


/* =====================================================
   PROJECT INFO
===================================================== */

.project-info {

    position:
        relative;

    padding:
        20px 2px 0;

    display:
        grid;

    grid-template-columns:
        45px 1fr auto;

    gap:
        15px;

    align-items:
        start;

}


.project-number {

    padding-top:
        5px;

    font-family:
        var(--mono);

    font-size:
        8px;

    color:
        #555;

}


.project-main h3 {

    font-size:
        clamp(26px, 3.5vw, 50px);

    font-weight:
        500;

    line-height:
        .95;

    letter-spacing:
        -.055em;

}


.project-main h3 span {

    font-family:
        var(--serif);

    font-style:
        italic;

    color:
        #777;

}


.project-category {

    margin-top:
        11px;

    font-family:
        var(--mono);

    font-size:
        7px;

    letter-spacing:
        .12em;

    color:
        #666;

}


.project-arrow {

    padding-top:
        3px;

    color:
        #666;

    font-size:
        20px;

    transition:
        color .35s ease,
        transform .5s var(--ease);

}


.project-link:hover
.project-arrow {

    color:
        #fff;

    transform:
        translate(6px, -6px);

}


/* INFO LINE */

.project-info::after {

    content:
        "";

    position:
        absolute;

    left:
        45px;

    right:
        0;

    bottom:
        -16px;

    height:
        1px;

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

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform .8s var(--ease);

}


.portfolio-project:hover
.project-info::after {

    transform:
        scaleX(1);

}


/* =====================================================
   END SECTION
===================================================== */

.portfolio-end {

    position:
        relative;

    min-height:
        90vh;

    overflow:
        hidden;

    border-top:
        1px solid var(--line);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

}


.portfolio-end-bg {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(-50%, -50%);

    font-family:
        var(--display);

    font-size:
        clamp(280px, 55vw, 850px);

    font-weight:
        600;

    line-height:
        .7;

    letter-spacing:
        -.1em;

    color:
        transparent;

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

    pointer-events:
        none;

}


.portfolio-end-content {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

}


.portfolio-end-label {

    margin-bottom:
        32px;

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        .12em;

    color:
        #666;

}


.portfolio-end h2 {

    font-size:
        clamp(75px, 12vw, 180px);

    font-weight:
        500;

    line-height:
        .76;

    letter-spacing:
        -.08em;

}


.portfolio-end h2 span {

    font-family:
        var(--serif);

    font-style:
        italic;

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

}


.portfolio-end p {

    max-width:
        420px;

    margin:
        45px 0 35px;

    color:
        #777;

    font-size:
        13px;

    line-height:
        1.7;

}


.portfolio-contact {

    display:
        flex;

    align-items:
        center;

    gap:
        22px;

    padding:
        14px 21px;

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

    border-radius:
        100px;

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

    backdrop-filter:
        blur(14px);

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

    font-family:
        var(--mono);

    font-size:
        8px;

    letter-spacing:
        .1em;

    transition:
        background .4s ease,
        border-color .4s ease,
        transform .5s var(--ease);

}


.portfolio-contact strong {

    font-size:
        17px;

    font-weight:
        400;

}


.portfolio-contact:hover {

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

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

    transform:
        translateY(-5px);

}


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

.portfolio-footer {

    position:
        relative;

    z-index:
        5;

    padding:
        25px 3vw;

    border-top:
        1px solid var(--line);

    display:
        grid;

    grid-template-columns:
        1fr 1fr 1fr;

    align-items:
        center;

    font-family:
        var(--mono);

    font-size:
        7px;

    letter-spacing:
        .1em;

    color:
        #555;

}


.portfolio-footer span:nth-child(2) {

    text-align:
        center;

}


.portfolio-footer a {

    text-align:
        right;

    color:
        #666;

    transition:
        color .3s ease;

}


.portfolio-footer a:hover {

    color:
        #fff;

}


/* =====================================================
   SCROLL PROGRESS
===================================================== */

.portfolio-scroll-progress {

    position:
        fixed;

    top:
        0;

    right:
        0;

    width:
        2px;

    height:
        100vh;

    background:
        #fff;

    transform:
        scaleY(0);

    transform-origin:
        top;

    z-index:
        9999;

    pointer-events:
        none;

    box-shadow:
        0 0 12px
        rgba(255,255,255,.5);

}


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

@media (max-width: 1000px) {

    .portfolio-header {

        grid-template-columns:
            1fr auto;

    }


    .portfolio-header-center {

        display:
            none;

    }


    .portfolio-controls {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .portfolio-filter-label {

        justify-content:
            center;

    }


    .portfolio-filter {

        justify-content:
            center;

    }


    .portfolio-count {

        justify-content:
            center;

    }


    .portfolio-project {

        width:
            85%;

    }


    .portfolio-project:nth-child(3n) {

        width:
            75%;

    }

}


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

@media (max-width: 700px) {

    .cursor,
    .cursor-glow {

        display:
            none;

    }


    .portfolio-header {

        min-height:
            75px;

        padding:
            0 20px;

    }


    .portfolio-header-right > span {

        display:
            none;

    }


    .portfolio-hero {

        min-height:
            calc(100vh - 75px);

        padding:
            100px 20px 60px;

    }


    .portfolio-hero-index {

        top:
            95px;

        left:
            20px;

    }


    .portfolio-hero-label {

        margin-bottom:
            28px;

        font-size:
            7px;

    }


    .portfolio-hero-title {

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

        line-height:
            .82;

    }


    .portfolio-hero-bottom {

        margin-top:
            45px;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            30px;

    }


    .portfolio-hero-bottom p {

        max-width:
            340px;

        font-size:
            12px;

    }


    .portfolio-scroll {

        align-self:
            flex-end;

    }


    .portfolio-controls {

        padding:
            20px;

    }


    .portfolio-filter {

        justify-content:
            flex-start;

    }


    .filter-button {

        padding:
            8px 11px;

        font-size:
            7px;

    }


    .portfolio-projects {

        padding:
            80px 20px 130px;

    }


    .portfolio-project,
    .portfolio-project:nth-child(3n) {

        width:
            100%;

        margin-left:
            0;

        margin-right:
            0;

        margin-bottom:
            90px;

    }


    .project-image-wrap {

        aspect-ratio:
            1 / 1;

    }


    .project-info {

        grid-template-columns:
            32px 1fr auto;

    }


    .project-main h3 {

        font-size:
            29px;

    }


    .project-arrow {

        font-size:
            17px;

    }


    .portfolio-end {

        min-height:
            80vh;

        padding:
            50px 20px;

    }


    .portfolio-end h2 {

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

    }


    .portfolio-end p {

        margin:
            35px 0;

        font-size:
            12px;

    }


    .portfolio-footer {

        padding:
            20px;

        grid-template-columns:
            1fr 1fr;

    }


    .portfolio-footer span:nth-child(2) {

        display:
            none;

    }


    .portfolio-footer a {

        text-align:
            right;

    }

}


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

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

    html {

        scroll-behavior:
            auto;

    }


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

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}

/* =====================================================
   BEHANCE PROJECT VISUAL
===================================================== */

.project-visual {
    position: relative;

    width: 100%;
    height: min(58vw, 720px);

    overflow: hidden;

    background: #080808;

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

    border-radius: 24px;
}


.project-visual iframe {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    background: #080808;

    transform: scale(1);

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


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

.project-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    padding: 25px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.8),
            transparent 45%
        );

    opacity: 0;

    transition:
        opacity .5s ease;

    pointer-events: none;
}


.project-overlay span {

    font-family:
        "DM Mono",
        monospace;

    font-size: 8px;

    letter-spacing: .12em;

    color: white;
}


.project-overlay strong {

    width: 42px;
    height: 42px;

    display: flex;

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

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

    border-radius: 50%;

    font-size: 15px;

    font-weight: 400;

    color: white;

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

    backdrop-filter: blur(10px);
}


.project-link:hover
.project-visual iframe {

    transform:
        scale(1.025);

}


.project-link:hover
.project-overlay {

    opacity: 1;

}

/* =====================================================
   PORTFOLIO IMAGE SIZE — 1920 × 1080
===================================================== */

.project-image-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}

.project-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}