/* =========================================================
   SERKAN ŞİMŞEK // DIGITAL EXPERIENCE
   RESPONSIVE
   FINAL
========================================================= */


/* =========================================================
   ≤ 1280px
========================================================= */

@media
(max-width: 1280px) {

    :root {
        --sidebar-width: 96px;
    }


    .section-shell,
    .footer-inner,
    .hero-container {
        width:
            calc(100% - 160px);
    }

}


/* =========================================================
   ≤ 1100px
========================================================= */

@media
(max-width: 1100px) {

    body {
        cursor: auto;
    }


    .cursor,
    .cursor-glow {
        display: none;
    }


    .section-shell,
    .footer-inner,
    .hero-container {
        width:
            calc(100% - 70px);
    }


    .section-heading {
        letter-spacing:
            -3px;
    }


    .sidebar {
        display: none;
    }


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

    .mobile-header {
        position: fixed;

        left: 24px;
        right: 24px;
        top: 20px;

        z-index: 9800;

        display: flex;

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

        min-height: 64px;

        padding:
            0 12px 0 20px;

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

        border-radius:
            20px;

        background:
            rgba(10, 10, 10, .68);

        backdrop-filter:
            blur(22px);

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

        box-shadow:
            0 20px 60px
            rgba(0, 0, 0, .38);
    }


    .mobile-logo {
        font-family:
            "Outfit",
            sans-serif;

        font-size: 20px;

        font-weight: 800;

        letter-spacing:
            -1px;

        background:
            linear-gradient(
                135deg,
                #f0f0f0,
                #797979 45%,
                var(--gold-light)
            );

        -webkit-background-clip:
            text;

        background-clip:
            text;

        -webkit-text-fill-color:
            transparent;
    }


    .mobile-menu-button {
        position: relative;

        width: 48px;
        height: 48px;

        display: flex;

        flex-direction: column;

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

        gap: 7px;

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

        border-radius:
            15px;

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

        cursor: pointer;
    }


    .mobile-menu-button span {
        width: 19px;
        height: 1px;

        display: block;

        background:
            #d3d3d3;
    }


    .mobile-menu-button.is-open
    span:first-child {
        transform:
            translateY(4px)
            rotate(45deg);
    }


    .mobile-menu-button.is-open
    span:last-child {
        transform:
            translateY(-4px)
            rotate(-45deg);
    }


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

    .mobile-menu {
        position: fixed;

        inset: 0;

        z-index: 9700;

        display: flex;

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

        background:
            radial-gradient(
                circle at 70% 25%,
                rgba(199, 154, 61, .13),
                transparent 35%
            ),
            rgba(3, 3, 3, .96);

        backdrop-filter:
            blur(30px);

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


    .mobile-menu::before {
        content: "";

        position: absolute;

        inset: 0;

        opacity: .18;

        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:
            48px 48px;
    }


    .mobile-menu nav {
        position: relative;

        z-index: 2;

        width:
            min(
                82%,
                620px
            );

        display: flex;

        flex-direction: column;

        gap: 7px;
    }


    .mobile-menu nav a {
        display: grid;

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

        align-items: center;

        min-height: 86px;

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

        color:
            #e3e3e3;

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

        font-size:
            clamp(
                32px,
                7vw,
                54px
            );

        font-weight: 600;

        line-height: 1;

        letter-spacing:
            -2px;
    }


    .mobile-menu nav a span {
        color:
            var(--gold);

        font-size: 10px;

        font-weight: 600;

        letter-spacing:
            2px;
    }


    .mobile-menu nav a:hover,
    .mobile-menu nav a.active {
        color:
            var(--gold-light);
    }

}


/* =========================================================
   ≤ 900px
========================================================= */

@media
(max-width: 900px) {

    .section-shell,
    .footer-inner,
    .hero-container {
        width:
            calc(100% - 50px);
    }


    .hero {
        min-height: auto;

        padding:
            145px 0 90px;
    }


    .hero-container {
        grid-template-columns:
            1fr;

        gap: 20px;
    }


    .hero-content {
        order: 1;

        padding-left: 0;
    }


    .hero-content::before {
        display: none;
    }


    .hero-visual {
        order: 2;

        min-height: 520px;

        margin-top: 15px;
    }


    .hero-title {
        max-width: 100%;
    }


    .hero-title-word {
        font-size:
            clamp(
                62px,
                12vw,
                104px
            );
    }


    .hero-description-wrap {
        max-width: 700px;
    }


    .hero-actions {
        margin-top: 28px;
    }


    .hero-scroll,
    .hero-corner {
        display: none;
    }


    .hero-orbit-one {
        width: 650px;
        height: 650px;
    }


    .hero-orbit-two {
        width: 520px;
        height: 520px;
    }


    .hero-orbit-three {
        width: 410px;
        height: 410px;
    }


    .cube-fallback {
        width: 220px;
        height: 220px;
    }


    .face-front {
        transform:
            translateZ(110px);
    }


    .face-right {
        transform:
            rotateY(90deg)
            translateZ(110px);
    }


    .face-top {
        transform:
            rotateX(90deg)
            translateZ(110px);
    }


    .object-ring-one {
        width: 390px;
        height: 390px;

        margin:
            -195px 0 0 -195px;
    }


    .object-ring-two {
        width: 320px;
        height: 320px;

        margin:
            -160px 0 0 -160px;
    }


    .object-caption {
        right: 4%;
        bottom: 8%;
    }


    .about-layout {
        grid-template-columns:
            1fr;

        gap: 50px;
    }


    .about-symbol {
        min-height: 320px;
    }


    .services {
        padding:
            110px 0 130px;
    }


    .portfolio {
        padding:
            110px 0 130px;
    }


    .contact {
        padding:
            115px 0 110px;
    }


    .contact-layout {
        grid-template-columns:
            1fr;

        gap: 55px;
    }


    .contact-content {
        max-width: none;
    }


    .project-modal-panel {
        padding:
            55px 40px;
    }

}


/* =========================================================
   ≤ 700px
========================================================= */

@media
(max-width: 700px) {

    :root {
        --radius-sm: 12px;
        --radius-md: 20px;
        --radius-lg: 28px;
    }


    body {
        font-size: 15px;
    }


    .section-shell,
    .footer-inner,
    .hero-container {
        width:
            calc(100% - 32px);
    }


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

    .mobile-header {
        left: 16px;
        right: 16px;
        top: 14px;

        min-height: 58px;

        padding:
            0 8px 0 16px;

        border-radius:
            17px;
    }


    .mobile-menu-button {
        width: 43px;
        height: 43px;

        border-radius:
            13px;
    }


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

    .hero {
        padding:
            120px 0 75px;
    }


    .hero-eyebrow {
        flex-wrap: wrap;

        gap: 10px;

        margin-bottom: 24px;

        font-size: 8px;

        letter-spacing:
            2.8px;
    }


    .hero-eyebrow-line {
        width: 32px;
    }


    .hero-title {
        line-height: .87;

        letter-spacing:
            -3px;
    }


    .hero-title-row {
        padding:
            3px 0;
    }


    .hero-title-word {
        font-size:
            clamp(
                52px,
                17vw,
                82px
            );

        letter-spacing:
            -3px;
    }


    .hero-title-outline {
        -webkit-text-stroke:
            1px
            rgba(255, 255, 255, .42);
    }


    .hero-description-wrap {
        margin-top: 26px;
    }


    .hero-description {
        font-size: 15px;

        line-height: 1.75;
    }


    .hero-description-secondary {
        font-size: 9px;

        letter-spacing:
            1.2px;

        line-height: 1.8;
    }


    .hero-actions {
        flex-direction: column;

        align-items: stretch;

        gap: 12px;

        margin-top: 26px;
    }


    .hero-actions
    .button {
        width: 100%;

        min-height: 58px;
    }


    .hero-signature {
        margin-top: 24px;

        font-size: 10px;

        line-height: 1.6;
    }


    .hero-visual {
        min-height: 430px;

        margin-top: 25px;
    }


    .cube-fallback {
        width: 170px;
        height: 170px;
    }


    .face-front {
        transform:
            translateZ(85px);
    }


    .face-right {
        transform:
            rotateY(90deg)
            translateZ(85px);
    }


    .face-top {
        transform:
            rotateX(90deg)
            translateZ(85px);
    }


    .object-ring-one {
        width: 300px;
        height: 300px;

        margin:
            -150px 0 0 -150px;
    }


    .object-ring-two {
        width: 245px;
        height: 245px;

        margin:
            -122.5px 0 0 -122.5px;
    }


    .object-aura-one {
        width: 390px;
        height: 390px;
    }


    .object-aura-two {
        width: 280px;
        height: 280px;
    }


    .object-caption {
        left: 0;
        right: auto;
        bottom: 5%;

        gap: 11px;

        font-size: 7px;

        letter-spacing:
            2px;
    }


    .object-caption::before {
        width: 34px;
    }


    .hero-orbit-one {
        width: 440px;
        height: 440px;
    }


    .hero-orbit-two {
        width: 350px;
        height: 350px;
    }


    .hero-orbit-three {
        width: 280px;
        height: 280px;
    }


    /* =====================================================
       GLOBAL TYPOGRAPHY
    ====================================================== */

    .section-kicker {
        margin-bottom: 28px;

        gap: 12px;

        font-size: 9px;

        letter-spacing:
            3px;
    }


    .section-kicker::after {
        width: 42px;
    }


    .section-heading {
        margin-bottom: 18px;

        font-size:
            clamp(
                44px,
                14vw,
                72px
            );

        line-height: .9;

        letter-spacing:
            -3px;
    }


    .section-lead {
        margin-bottom: 48px;

        font-size: 15px;

        line-height: 1.75;
    }


    /* =====================================================
       ABOUT
    ====================================================== */

    .about {
        padding:
            90px 0 100px;
    }


    .about-title {
        font-size:
            clamp(
                44px,
                14vw,
                72px
            );
    }


    .about-copy {
        grid-template-columns:
            1fr;

        gap: 18px;
    }


    .about-meta {
        grid-template-columns:
            1fr;
    }


    /* =====================================================
       SERVICES
    ====================================================== */

    .services {
        padding:
            85px 0 100px;
    }


    .service-row {
        min-height: auto;

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

        gap: 10px;

        padding:
            28px 0;
    }


    .service-number {
        padding-left: 0;
        padding-top: 6px;

        font-size: 9px;
    }


    .service-main {
        grid-template-columns:
            1fr;

        gap: 12px;
    }


    .service-main h3 {
        font-size:
            clamp(
                34px,
                12vw,
                52px
            );

        letter-spacing:
            -2px;
    }


    .service-main p {
        max-width: none;

        font-size: 14px;

        line-height: 1.65;
    }


    .service-arrow {
        display: none;
    }


    .service-row:hover,
    .service-row.is-active {
        min-height: auto;
    }


    .service-row:hover
    .service-main h3 {
        transform:
            translateX(7px);
    }


    /* =====================================================
       PORTFOLIO
    ====================================================== */

    .portfolio {
        padding:
            90px 0 105px;
    }


    .portfolio
    .section-header {
        margin-bottom: 48px;
    }


    .portfolio-stage {
        grid-template-columns:
            1fr;

        gap: 48px;
    }


    .project-large {
        grid-column:
            auto;
    }


    .project-large
    .project-media,
    .project-media {
        min-height:
            410px;

        border-radius:
            20px;
    }


    .project-placeholder {
        padding:
            20px;
    }


    .project-info {
        padding:
            16px 0 0;

        align-items:
            flex-start;
    }


    .project-category {
        margin-bottom: 7px;

        font-size: 8px;

        letter-spacing:
            2px;
    }


    .project-info h3 {
        font-size: 29px;

        letter-spacing:
            -1px;

        line-height: 1.05;
    }


    .project-index {
        padding-top: 5px;

        font-size: 9px;
    }


    .project-info::before {
        display: none;
    }


    /* =====================================================
       CONTACT
    ====================================================== */

    .contact {
        min-height: auto;

        padding:
            90px 0;
    }


    .contact-layout {
        gap: 42px;
    }


    .contact-heading {
        font-size:
            clamp(
                52px,
                17vw,
                80px
            );

        line-height: .84;

        letter-spacing:
            -4px;
    }


    .contact-content {
        padding:
            28px 20px;

        border-radius:
            21px;
    }


    .contact-content > p {
        margin-bottom: 30px;

        font-size: 14px;

        line-height: 1.75;
    }


    .contact-mail {
        min-height: 70px;

        padding:
            0;
    }


    .contact-mail span {
        max-width:
            calc(100% - 55px);

        overflow-wrap:
            anywhere;

        font-size: 18px;
    }


    .contact-mail strong {
        width: 40px;
        height: 40px;
    }


    .contact-links {
        gap: 8px;

        margin:
            18px 0 30px;
    }


    .contact-links a {
        min-height: 40px;

        padding:
            0 13px;

        font-size: 9px;
    }


    .project-button {
        width: 145px;
        height: 145px;
    }


    .project-button-text {
        font-size: 8px;
    }


    .project-button-text strong {
        font-size: 10px;
    }


    .project-button-arrow {
        right: 25px;
        top: 23px;

        font-size: 17px;
    }


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

    .footer-inner {
        min-height: auto;

        padding:
            38px 0;

        flex-direction: column;

        align-items: flex-start;

        gap: 16px;
    }


    .footer-top {
        position: absolute;

        right: 0;
        top: 39px;
    }


    /* =====================================================
       MODAL
    ====================================================== */

    .project-modal {
        align-items: flex-end;
    }


    .project-modal-panel {
        width: 100%;

        max-height: 92vh;

        padding:
            48px 20px 30px;

        border-left: 0;
        border-right: 0;
        border-bottom: 0;

        border-radius:
            26px 26px 0 0;
    }


    .project-modal-close {
        right: 18px;
        top: 18px;

        width: 44px;
        height: 44px;
    }


    .project-modal h2 {
        font-size: 43px;

        letter-spacing:
            -2px;
    }


    .project-modal-panel > p {
        margin-bottom: 32px;

        font-size: 14px;
    }


    .form-row {
        grid-template-columns:
            1fr;
    }


    .project-form {
        gap: 19px;
    }

}


/* =========================================================
   ≤ 480px
========================================================= */

@media
(max-width: 480px) {

    .section-shell,
    .footer-inner,
    .hero-container {
        width:
            calc(100% - 26px);
    }


    .hero-title-word {
        font-size:
            clamp(
                46px,
                16.8vw,
                70px
            );
    }


    .hero-visual {
        min-height: 380px;
    }


    .cube-fallback {
        width: 145px;
        height: 145px;
    }


    .face-front {
        transform:
            translateZ(72.5px);
    }


    .face-right {
        transform:
            rotateY(90deg)
            translateZ(72.5px);
    }


    .face-top {
        transform:
            rotateX(90deg)
            translateZ(72.5px);
    }


    .object-ring-one {
        width: 260px;
        height: 260px;

        margin:
            -130px 0 0 -130px;
    }


    .object-ring-two {
        width: 210px;
        height: 210px;

        margin:
            -105px 0 0 -105px;
    }


    .section-heading {
        font-size:
            clamp(
                40px,
                13.6vw,
                62px
            );
    }


    .project-large
    .project-media,
    .project-media {
        min-height:
            350px;
    }


    .contact-heading {
        font-size:
            clamp(
                48px,
                16vw,
                68px
            );
    }

}


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

@media
(max-height: 560px)
and
(orientation: landscape)
and
(max-width: 950px) {

    .mobile-header {
        top: 10px;
    }


    .mobile-menu nav {
        gap: 0;
    }


    .mobile-menu nav a {
        min-height: 56px;

        font-size: 28px;
    }


    .hero {
        padding-top:
            105px;
    }


    .hero-visual {
        min-height:
            380px;
    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media
(hover: none)
and
(pointer: coarse) {

    .button:hover,
    .contact-mail:hover,
    .contact-links a:hover,
    .service-row:hover,
    .project-link:hover
    .project-media {
        transform: none;
    }


    .project-link:hover
    .project-scan {
        animation: none;
    }

}


/* =========================================================
   VERY SMALL HEIGHT DESKTOP
========================================================= */

@media
(max-height: 720px)
and
(min-width: 1101px) {

    .hero {
        min-height:
            800px;
    }


    .hero-visual {
        min-height:
            620px;
    }

}


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

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

    .global-light,
    .hero-orbit,
    .hero-scanline,
    .hero-spotlight,
    .hero-lines span,
    .object-ring,
    .object-aura,
    .contact-orbit,
    .contact-light,
    .project-button-ring::before {
        animation:
            none !important;
    }

}