/* =========================================================
   OLCAYLAR MÜHENDİSLİK — RESPONSIVE.CSS
   Desktop style.css is untouched.
   901px+  : desktop styles from style.css
   <=900px : tablet/mobile navigation + layout
   <=768px : phone
   <=480px : small phone
========================================================= */


/* =========================================================
   TABLET / MOBILE — 900px AND BELOW
========================================================= */

@media screen and (max-width: 900px){

    /* ---------- GENERAL SAFETY ---------- */

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden !important;
        overscroll-behavior-x:none;
        -webkit-text-size-adjust:100%;
    }

    *,
    *::before,
    *::after{
        box-sizing:border-box;
    }

    img,
    video,
    svg,
    iframe{
        max-width:100%;
    }


    /* ---------- NAVBAR ---------- */

    .navbar,
    .navbar.navbar-scrolled{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;

        width:100% !important;
        height:82px !important;
        min-height:82px !important;

        padding:0 18px !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;

        background:#080c14 !important;

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

        box-shadow:0 8px 28px rgba(0,0,0,.18) !important;

        transform:none !important;

        filter:none !important;
        -webkit-filter:none !important;

        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;

        overflow:visible !important;

        z-index:20000 !important;
    }

    .navbar.navbar-hidden{
        transform:none !important;
    }


    /* ---------- LOGO ---------- */

    .navbar .logo{
        width:190px !important;
        max-width:190px !important;
        height:82px !important;

        display:flex !important;
        align-items:center !important;

        flex-shrink:0 !important;

        overflow:visible !important;
    }

    .navbar .logo img{
        width:190px !important;
        max-width:190px !important;
        height:auto !important;

        object-fit:contain !important;

        transform:none !important;

        filter:none !important;
        -webkit-filter:none !important;
    }


    /* ---------- HAMBURGER ---------- */

    .menu-toggle{
        position:relative !important;

        z-index:20004 !important;

        width:48px !important;
        height:48px !important;

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

        flex-shrink:0 !important;

        padding:0 !important;
        margin:0 !important;

        color:#ffffff !important;

        background:rgba(255,255,255,.04) !important;

        border:1px solid rgba(255,255,255,.18) !important;
        border-radius:10px !important;

        font-size:30px !important;
        line-height:1 !important;

        cursor:pointer !important;

        pointer-events:auto !important;
        touch-action:manipulation !important;

        -webkit-tap-highlight-color:transparent !important;
    }


    /* ---------- MOBILE MENU ---------- */

    .nav-links{
        position:fixed !important;

        top:0 !important;
        right:0 !important;
        left:auto !important;

        width:min(360px, 88vw) !important;
        max-width:88vw !important;

        height:100vh !important;
        height:100dvh !important;

        margin:0 !important;

        padding:
            calc(105px + env(safe-area-inset-top))
            28px
            calc(34px + env(safe-area-inset-bottom))
            !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;

        gap:0 !important;

        background:#080c14 !important;

        box-shadow:-18px 0 45px rgba(0,0,0,.30) !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        transform:translate3d(105%,0,0) !important;

        transition:transform .32s cubic-bezier(.2,.75,.25,1) !important;

        visibility:hidden !important;

        pointer-events:none !important;

        filter:none !important;
        -webkit-filter:none !important;

        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;

        z-index:20003 !important;

        -webkit-overflow-scrolling:touch;
    }

    .nav-links.nav-open,
    .nav-links.active{
        transform:translate3d(0,0,0) !important;

        visibility:visible !important;

        pointer-events:auto !important;
    }

    .nav-links::before{
        content:"MENÜ" !important;

        position:static !important;

        display:block !important;

        margin:0 0 22px !important;

        color:#e2b92f !important;

        font-size:11px !important;
        font-weight:800 !important;
        letter-spacing:3px !important;

        pointer-events:none !important;
    }

    .nav-links li{
        width:100% !important;

        margin:0 !important;

        border-bottom:1px solid rgba(255,255,255,.09) !important;

        pointer-events:auto !important;
    }

    .nav-links li:last-child{
        margin-top:22px !important;

        border-bottom:none !important;
    }

    .nav-links a{
        width:100% !important;
        min-height:58px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;

        padding:0 !important;

        color:#ffffff !important;

        font-size:17px !important;
        font-weight:600 !important;

        text-decoration:none !important;

        pointer-events:auto !important;
        touch-action:manipulation !important;

        -webkit-tap-highlight-color:rgba(226,185,47,.12) !important;
    }

    .nav-links > li > a:not(.nav-button)::before,
    .nav-links > li > a:not(.nav-button)::after{
        display:none !important;
    }

    .nav-links > li > a.active-link{
        color:#e2b92f !important;
    }

    .nav-links .nav-button{
        min-height:54px !important;

        justify-content:center !important;

        padding:0 20px !important;

        color:#101828 !important;

        background:#e2b92f !important;

        border-radius:8px !important;

        font-size:15px !important;
        font-weight:800 !important;
    }


    /* ---------- MENU BODY STATE ---------- */

    body.menu-active{
        overflow:hidden !important;

        touch-action:auto !important;

        filter:none !important;
        -webkit-filter:none !important;
    }

    body.menu-active::before,
    body.menu-active::after{
        content:none !important;

        display:none !important;

        pointer-events:none !important;

        opacity:0 !important;

        filter:none !important;
        -webkit-filter:none !important;

        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }


    /* ---------- HEROES ---------- */

    .hero,
    .page-hero,
    .projects-video-hero{
        width:100% !important;

        min-height:100svh;

        padding-top:max(
            108px,
            calc(82px + env(safe-area-inset-top))
        ) !important;

        overflow:hidden !important;
    }

    .hero-content,
    .page-hero-content,
    .projects-video-content{
        width:min(760px, calc(100% - 40px)) !important;
        max-width:100% !important;

        margin-inline:auto !important;

        transform:none !important;
    }

    .hero-content h1{
        font-size:clamp(38px, 7vw, 52px);
        line-height:1.08;
    }

    .hero-content p{
        font-size:17px;
        line-height:1.7;
    }

    .page-hero-content h1{
        font-size:clamp(46px, 8vw, 62px);
    }

    .projects-video-content h1{
        font-size:clamp(48px, 9vw, 68px);
    }


    /* ---------- HOME ---------- */

    .about-container{
        flex-direction:column;

        gap:45px;
    }

    .about-content,
    .about-image{
        width:100%;
    }

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

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


    /* ---------- ABOUT ---------- */

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

        gap:45px;
    }

    .mission-vision{
        grid-template-columns:1fr;
    }

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

    .about-cta{
        flex-direction:column;
        align-items:flex-start;
    }


    /* ---------- SERVICES ---------- */

    .service-detail-card{
        grid-template-columns:1fr;

        gap:42px;
    }

    .service-detail-reverse .service-detail-image,
    .service-detail-reverse .service-detail-visual,
    .service-detail-reverse .service-detail-content{
        order:initial;
    }

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

    .services-cta{
        flex-direction:column;
        align-items:flex-start;
    }


    /* ---------- PROJECTS ---------- */

    .projects-intro{
        grid-template-columns:1fr;

        gap:34px;
    }

    .featured-project{
        grid-template-columns:1fr;

        gap:42px;
    }

    .featured-project-reverse .featured-project-image,
    .featured-project-reverse .featured-project-content{
        order:initial;
    }

    .project-video-section{
        grid-template-columns:1fr;

        gap:45px;
    }

    .projects-cta{
        flex-direction:column;
        align-items:flex-start;
    }


    /* ---------- CONTACT ---------- */

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

        gap:34px;
    }

    .contact-info-section{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }

    .contact-info-card:last-child{
        grid-column:1 / -1;
    }

    .contact-main-section{
        grid-template-columns:1fr;
    }

    .contact-side-panel{
        min-height:620px;
    }


    /* ---------- REFERENCES ---------- */

    .references-intro{
        grid-template-columns:1fr;

        gap:34px;
    }

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

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

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

    .references-cta{
        flex-direction:column;
        align-items:flex-start;
    }


    /* ---------- HOME CTA ---------- */

    .home-cta-content{
        grid-template-columns:1fr;

        gap:36px;
    }

    .home-cta-buttons{
        width:100%;

        flex-direction:row;
    }

    .cta-phone,
    .cta-contact{
        flex:1;
    }


    /* ---------- FOOTER TABLET ---------- */

    .footer .container{
        width:min(100% - 40px, 1200px) !important;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr !important;

        gap:44px 36px !important;
    }

    .footer-brand{
        grid-column:1 / -1 !important;
    }

    .footer-brand p{
        max-width:620px !important;
    }

    .footer .footer-logo{
        width:330px !important;
        max-width:100% !important;
    }


    /* ---------- MOBILE SHARPNESS ---------- */

    body,
    main,
    section,
    header,
    footer,
    .hero,
    .page-hero,
    .projects-video-hero,
    .projects-intro,
    .project-showcase,
    .featured-project,
    .featured-project-image,
    .featured-project-content,
    .project-gallery-section{
        filter:none !important;
        -webkit-filter:none !important;

        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }
}


/* =========================================================
   PHONE — 768px AND BELOW
========================================================= */

@media screen and (max-width:768px){

    /* ---------- GLOBAL ---------- */

    .container{
        width:100% !important;
        max-width:100% !important;

        padding-left:20px !important;
        padding-right:20px !important;
    }

    .section-title{
        font-size:12px;

        letter-spacing:2px;
    }

    .about,
    .projects,
    .contact{
        padding:72px 20px;
    }

    .section-header{
        margin-bottom:42px;
    }

    .section-header h2,
    .about-content h2,
    .contact-box h2{
        font-size:clamp(29px, 8vw, 36px);

        line-height:1.18;
    }


    /* ---------- HOME HERO ---------- */

    .hero{
        min-height:100svh !important;

        padding:
            max(
                105px,
                calc(82px + env(safe-area-inset-top))
            )
            18px
            60px
            !important;

        align-items:center;
    }

    .hero-content{
        width:100% !important;

        max-width:680px !important;

        padding:0 !important;

        text-align:center;
    }

    .hero-content h1{
        margin-bottom:22px;

        font-size:clamp(34px, 10vw, 46px);

        line-height:1.08;

        word-break:normal;
        overflow-wrap:normal;
    }

    .hero-content p{
        max-width:620px;

        margin:0 auto 28px;

        font-size:15px;

        line-height:1.72;
    }

    .hero-buttons{
        width:100%;

        flex-direction:column;
        align-items:center;

        gap:12px;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary{
        width:min(100%, 290px);

        text-align:center;
    }


    /* ---------- PAGE HERO ---------- */

    .page-hero{
        min-height:540px !important;

        padding:
            max(
                115px,
                calc(82px + env(safe-area-inset-top))
            )
            20px
            65px
            !important;
    }

    .page-hero-content{
        width:100% !important;

        padding:0 !important;
    }

    .page-hero-content > span{
        margin-bottom:14px;

        font-size:12px;

        letter-spacing:2px;
    }

    .page-hero-content h1{
        margin-bottom:20px;

        font-size:clamp(42px, 12vw, 56px);

        line-height:1.02;
    }

    .page-hero-content p{
        max-width:620px;

        font-size:16px;

        line-height:1.65;
    }


    /* ---------- HOME ---------- */

    .about{
        text-align:left;
    }

    .project-grid,
    .services-grid{
        grid-template-columns:1fr;
    }

    .project-card img{
        height:230px;
    }

    .service-items{
        grid-template-columns:1fr;
    }

    .contact-actions,
    .contact-details{
        flex-direction:column;

        gap:12px;
    }


    /* ---------- ABOUT PAGE ---------- */

    .about-detail{
        padding:70px 20px;

        gap:42px;
    }

    .about-detail-image img{
        height:360px;
    }

    .about-detail-content h2{
        font-size:34px;
    }

    .about-detail-content p{
        font-size:16px;

        line-height:1.75;
    }

    .mission-vision{
        padding:65px 20px;

        gap:18px;
    }

    .mission-card{
        padding:38px 26px;
    }

    .why-us{
        padding:72px 20px;
    }

    .why-us-grid{
        grid-template-columns:1fr;

        margin-top:38px;

        gap:18px;
    }

    .about-cta{
        padding:58px 20px;
    }

    .about-cta h2{
        font-size:30px;
    }


    /* ---------- SERVICES PAGE ---------- */

    .services-detail{
        width:calc(100% - 40px);

        padding:72px 0;

        gap:78px;
    }

    .service-detail-card{
        gap:36px;
    }

    .service-detail-image img{
        height:330px;
    }

    .service-detail-visual{
        min-height:330px;
        height:auto;

        padding:32px 25px;
    }

    .service-detail-visual > span{
        font-size:72px;
    }

    .service-detail-visual h3{
        font-size:29px;
    }

    .service-detail-number{
        top:-32px;

        font-size:72px;
    }

    .service-detail-content h2{
        font-size:34px;
    }

    .service-detail-content p{
        font-size:16px;
    }

    .work-process{
        padding:72px 20px;
    }

    .process-grid{
        grid-template-columns:1fr;

        margin-top:38px;

        gap:18px;
    }

    .services-cta{
        padding:58px 20px;
    }

    .services-cta h2{
        font-size:31px;
    }


    /* ---------- PROJECTS PAGE ---------- */

    .projects-video-hero{
        min-height:100svh !important;

        padding:
            max(
                112px,
                calc(82px + env(safe-area-inset-top))
            )
            20px
            70px
            !important;
    }

    .projects-video-content h1{
        font-size:clamp(46px, 13vw, 62px);
    }

    .projects-video-content p{
        font-size:15px;

        line-height:1.68;
    }

    .projects-intro{
        width:calc(100% - 40px);

        padding:72px 0 56px;

        gap:30px;
    }

    .projects-intro-title h2{
        font-size:34px;
    }

    .project-showcase{
        width:calc(100% - 40px);

        padding:24px 0 72px;

        gap:76px;
    }

    .featured-project{
        gap:34px;
    }

    .featured-project-image img{
        height:330px;
    }

    .project-number{
        margin-bottom:14px;

        font-size:48px;
    }

    .featured-project-content h2{
        font-size:32px;
    }

    .featured-project-content p{
        font-size:16px;
    }

    .project-gallery-section{
        padding:72px 20px;
    }

    .project-gallery-grid{
        grid-template-columns:1fr;

        grid-auto-rows:300px;

        margin-top:38px;

        gap:20px;
    }

    .gallery-large,
    .gallery-wide{
        grid-column:auto;
        grid-row:auto;
    }


    /* New editorial gallery */

    .gallery-section-heading{
        margin-bottom:38px;
    }

    .gallery-section-heading h2{
        font-size:32px;
    }

    .editorial-gallery{
        display:flex !important;

        flex-direction:column !important;

        gap:20px !important;
    }

    .editorial-card,
    .editorial-main,
    .editorial-secondary{
        width:100% !important;

        height:300px !important;
    }

    .editorial-overlay{
        left:18px !important;
        right:18px !important;
        bottom:18px !important;
    }

    .editorial-overlay h3{
        font-size:21px !important;
    }

    .gallery-number{
        display:none !important;
    }

    .functional-projects{
        margin-top:62px !important;

        padding-top:48px !important;
    }

    .functional-projects-heading{
        margin-bottom:28px !important;
    }

    .functional-projects-heading h2{
        font-size:30px !important;
    }

    .functional-projects-grid{
        grid-template-columns:1fr !important;

        gap:20px !important;
    }

    .functional-project-card{
        height:300px !important;
    }

    .project-video-section{
        width:calc(100% - 40px);

        padding:72px 0;

        gap:38px;
    }

    .project-video-box video{
        height:320px;
    }

    .project-video-text h2{
        font-size:32px;
    }

    .projects-cta{
        padding:58px 20px;
    }

    .projects-cta h2{
        font-size:31px;
    }


    /* ---------- CONTACT PAGE ---------- */

    .contact-intro{
        width:calc(100% - 40px);

        padding:72px 0 52px;

        gap:30px;
    }

    .contact-intro-heading h2{
        font-size:34px;
    }

    .contact-info-section{
        width:calc(100% - 40px);

        padding-bottom:72px;

        grid-template-columns:1fr;

        gap:18px;
    }

    .contact-info-card:last-child{
        grid-column:auto;
    }

    .contact-info-card{
        min-height:280px;

        padding:30px 24px;
    }

    .contact-form-wrapper{
        padding:72px 20px;
    }

    .contact-form-heading h2{
        font-size:34px;
    }

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

        gap:0;
    }

    .contact-side-panel{
        min-height:540px;

        padding:50px 22px;
    }

    .contact-side-content h2{
        font-size:32px;
    }

    .contact-map-section{
        padding:72px 20px;
    }

    .contact-map-heading h2{
        font-size:33px;
    }

    .contact-location-box{
        min-height:500px;

        padding:40px 22px;
    }

    .location-content h3{
        font-size:32px;
    }

    .location-buttons{
        flex-direction:column;

        align-items:stretch;
    }

    .location-buttons a{
        width:100%;

        text-align:center;
    }

    .floating-whatsapp{
        right:14px;
        bottom:14px;

        padding:8px;
    }

    .floating-whatsapp div{
        display:none;
    }

    .floating-whatsapp > span{
        width:44px;
        height:44px;
    }


    /* ---------- REFERENCES PAGE ---------- */

    .references-intro{
        width:calc(100% - 40px);

        padding:72px 0 52px;

        gap:30px;
    }

    .references-intro-heading h2{
        font-size:34px;
    }

    .references-stats{
        width:calc(100% - 40px);

        padding-bottom:72px;

        grid-template-columns:1fr;

        gap:18px;
    }

    .reference-stat-card{
        min-height:220px;
    }

    .reference-projects{
        padding:72px 20px;
    }

    .reference-project-grid{
        grid-template-columns:1fr;

        gap:18px;

        margin-top:38px;
    }

    .reference-project-card:last-child{
        grid-column:auto;
    }

    .reference-project-image{
        height:270px;
    }

    .customer-comments{
        padding:72px 20px;
    }

    .comments-grid{
        grid-template-columns:1fr;

        margin-top:38px;

        gap:18px;
    }

    .comment-card:last-child{
        grid-column:auto;
    }

    .reference-video-banner{
        min-height:500px;

        padding:65px 20px;
    }

    .reference-video-content h2{
        font-size:35px;
    }

    .references-cta{
        padding:58px 20px;
    }

    .references-cta h2{
        font-size:30px;
    }


    /* ---------- HOME CTA ---------- */

    .home-cta{
        padding:62px 0;
    }

    .home-cta-content{
        display:block;
    }

    .home-cta h2{
        font-size:32px;

        line-height:1.16;
    }

    .home-cta p{
        font-size:15px;
    }

    .home-cta-buttons{
        width:100%;

        flex-direction:column;

        margin-top:30px;
    }


    /* ---------- FOOTER PHONE ---------- */

    .footer{
        width:100% !important;

        padding:56px 0 0 !important;

        text-align:left !important;

        overflow:hidden !important;
    }

    .footer .container{
        width:100% !important;
        max-width:100% !important;

        margin:0 auto !important;

        padding-left:22px !important;
        padding-right:22px !important;
    }

    .footer-grid{
        width:100% !important;

        display:grid !important;

        grid-template-columns:minmax(0,1fr) !important;

        gap:36px !important;
    }

    .footer-col,
    .footer-brand{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        grid-column:auto !important;
    }

    .footer .footer-logo{
        width:min(280px, 78vw) !important;
        max-width:100% !important;
        height:auto !important;

        margin:0 0 20px !important;
    }

    .footer-brand p{
        width:100% !important;
        max-width:560px !important;

        margin:0 !important;

        font-size:15px !important;

        line-height:1.8 !important;

        white-space:normal !important;

        word-break:normal !important;

        overflow-wrap:break-word !important;
    }

    .footer h3{
        margin:0 0 16px !important;

        font-size:19px !important;
    }

    .footer ul{
        width:100% !important;

        margin:0 !important;
        padding:0 !important;
    }

    .footer li{
        width:100% !important;

        margin-bottom:10px !important;

        font-size:15px !important;

        line-height:1.6 !important;

        white-space:normal !important;

        word-break:normal !important;

        overflow-wrap:break-word !important;
    }

    .footer-bottom{
        width:100% !important;
        max-width:100% !important;

        margin-top:40px !important;

        padding:
            22px
            20px
            calc(22px + env(safe-area-inset-bottom))
            !important;

        font-size:13px !important;

        line-height:1.55 !important;

        text-align:center !important;

        white-space:normal !important;
    }
}


/* =========================================================
   SMALL PHONE — 480px AND BELOW
========================================================= */

@media screen and (max-width:480px){

    .navbar,
    .navbar.navbar-scrolled{
        height:76px !important;
        min-height:76px !important;

        padding:0 14px !important;
    }

    .navbar .logo{
        width:160px !important;
        max-width:160px !important;
        height:76px !important;
    }

    .navbar .logo img{
        width:160px !important;
        max-width:160px !important;
    }

    .menu-toggle{
        width:44px !important;
        height:44px !important;

        font-size:28px !important;
    }

    .nav-links{
        width:90vw !important;
        max-width:90vw !important;

        padding:
            calc(96px + env(safe-area-inset-top))
            24px
            calc(28px + env(safe-area-inset-bottom))
            !important;
    }

    .hero{
        padding-top:max(
            100px,
            calc(76px + env(safe-area-inset-top))
        ) !important;
    }

    .hero-content h1{
        font-size:clamp(31px, 10.5vw, 40px);
    }

    .hero-content p{
        font-size:14px;

        line-height:1.68;
    }

    .page-hero{
        min-height:500px !important;

        padding-top:max(
            108px,
            calc(76px + env(safe-area-inset-top))
        ) !important;
    }

    .page-hero-content h1{
        font-size:clamp(38px, 12vw, 50px);
    }

    .page-hero-content p{
        font-size:15px;
    }

    .projects-video-hero{
        padding-top:max(
            108px,
            calc(76px + env(safe-area-inset-top))
        ) !important;
    }

    .projects-video-content h1{
        font-size:clamp(42px, 13vw, 54px);
    }

    .about-detail-image img,
    .service-detail-image img,
    .featured-project-image img{
        height:300px;
    }

    .project-video-box video{
        height:285px;
    }

    .editorial-card,
    .editorial-main,
    .editorial-secondary,
    .functional-project-card{
        height:280px !important;
    }

    .footer .container{
        padding-left:18px !important;
        padding-right:18px !important;
    }

    .footer .footer-logo{
        width:min(245px, 76vw) !important;
    }

    .footer-grid{
        gap:32px !important;
    }
}


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

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

    .nav-links{
        transition:none !important;
    }
}