:root{
    --background:#061820;
    --background-light:#092732;
    --teal:#00b7bd;
    --teal-light:#39d8db;
    --white:#ffffff;
    --text:#f5f8f9;
    --muted:#9eb1b8;
    --line:rgba(59,212,215,.18);
    --max-width:1440px;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--background);
    color:var(--text);
    font-family:Arial,Helvetica,sans-serif;
    line-height:1.5;
    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}

button{
    font:inherit;
}


/* HEADER */

.site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:100;

    display:grid;
    grid-template-columns:250px 1fr 150px;
    align-items:center;
    gap:25px;

    padding:16px clamp(25px,4vw,70px);

    background:linear-gradient(
        to bottom,
        rgba(2,14,19,.88),
        rgba(2,14,19,.12)
    );

    transition:.35s;
}

.site-header.scrolled{
    background:rgba(3,20,27,.94);
    backdrop-filter:blur(15px);
    border-bottom:1px solid var(--line);
}


/* GERÇEK LOGO */

.brand{
    display:flex;
    align-items:center;
    width:230px;
    height:70px;
}

.brand img{
    display:block;
    width:220px;
    max-height:68px;
    object-fit:contain;
    object-position:left center;
}


/* MENU */

.main-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(18px,2.2vw,40px);
}

.main-nav a{
    position:relative;
    padding:12px 0;

    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
}

.main-nav a::after{
    content:"";

    position:absolute;
    left:0;
    right:100%;
    bottom:4px;

    height:2px;
    background:var(--teal);

    transition:.25s;
}

.main-nav a:hover::after{
    right:0;
}

.header-cta{
    justify-self:end;

    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:12px 20px;

    border:1px solid var(--teal);
    border-radius:30px;

    font-size:12px;
    font-weight:700;
    text-transform:uppercase;

    transition:.25s;
}

.header-cta:hover{
    background:var(--teal);
    color:#002128;
}

.menu-button{
    display:none;
    width:45px;
    padding:8px;

    background:none;
    border:0;
}

.menu-button span{
    display:block;
    height:2px;
    margin:6px 0;
    background:#fff;
}


/* HERO */

.hero{
    position:relative;

    min-height:780px;
    height:100vh;

    display:flex;
    align-items:center;

    isolation:isolate;
}

.hero-background{
    position:absolute;
    inset:0;
    z-index:-3;

    background-image:url("images/hero.webp");
    background-position:center;
    background-size:cover;
}

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:-2;

    background:
        linear-gradient(
            90deg,
            rgba(2,13,18,.94) 0%,
            rgba(2,13,18,.68) 38%,
            rgba(2,13,18,.12) 75%
        ),
        linear-gradient(
            0deg,
            rgba(2,13,18,.70),
            transparent 55%
        );
}

.hero-content{
    width:min(var(--max-width),100%);
    margin:auto;

    padding:
        120px
        clamp(25px,5vw,85px)
        90px;
}

.eyebrow{
    margin:0 0 18px;

    color:var(--teal-light);

    font-size:12px;
    font-weight:700;
    letter-spacing:2.3px;
}

.hero h1{
    max-width:680px;
    margin:0;

    font-size:clamp(60px,7vw,105px);
    font-weight:900;
    line-height:.83;
    letter-spacing:-4px;
}

.hero h1 strong{
    display:block;
    color:var(--teal);
}

.accent-line{
    display:block;

    width:65px;
    height:4px;

    margin:28px 0;

    background:var(--teal);
}

.hero-description{
    margin:0;

    color:#f1f4f5;

    font-size:clamp(18px,1.7vw,25px);
}

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:18px;

    margin-top:32px;
}

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:20px;

    padding:15px 25px;

    border-radius:30px;

    font-size:12px;
    font-weight:800;
    text-transform:uppercase;

    transition:.25s;
}

.button-primary{
    background:var(--teal);
    color:#002128;
    border:1px solid var(--teal);
}

.button-primary:hover{
    background:#52e0e2;
    transform:translateY(-2px);
}

.button-outline{
    background:rgba(0,0,0,.20);
    border:1px solid rgba(255,255,255,.75);
}

.button-outline:hover{
    color:var(--teal);
    border-color:var(--teal);
}

.scroll-down{
    position:absolute;
    left:50%;
    bottom:23px;

    transform:translateX(-50%);

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;

    font-size:9px;
}

.mouse-icon{
    width:19px;
    height:31px;

    display:flex;
    justify-content:center;

    padding-top:6px;

    border:1px solid #fff;
    border-radius:12px;
}

.mouse-icon i{
    width:2px;
    height:6px;

    background:#fff;

    animation:mouseScroll 1.4s infinite;
}

@keyframes mouseScroll{

    0%{
        opacity:0;
        transform:translateY(0);
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:translateY(8px);
    }
}


/* İSTATİSTİK */

.stats{
    max-width:var(--max-width);
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);

    padding:0 clamp(25px,4vw,60px);

    background:linear-gradient(
        180deg,
        #06242d,
        #061820
    );

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

.stats article{
    position:relative;

    min-height:118px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
}

.stats article:not(:last-child)::after{
    content:"";

    position:absolute;
    right:0;

    width:1px;
    height:45px;

    background:var(--line);
}

.stat-icon{
    color:var(--teal);
    font-size:36px;
}

.stats strong{
    display:block;

    color:var(--teal);

    font-size:28px;
    line-height:1;
}

.stats small{
    font-size:10px;
    font-weight:700;
}


/* GENEL BÖLÜMLER */

.section{
    padding:80px clamp(25px,4vw,70px);
}

.section-heading{
    margin-bottom:40px;
    text-align:center;
}

.section-heading p{
    margin:0 0 8px;

    color:var(--teal);

    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
}

.section-heading h2{
    margin:0;

    color:#0b2026;

    font-size:30px;
}

.section-heading-light h2{
    color:#fff;
}

.section-heading span{
    display:block;

    width:45px;
    height:3px;

    margin:12px auto 0;

    background:var(--teal);
}


/* HİZMETLER */

.services-section{
    background:#f7f8f8;
    color:#0b2026;
}

.services-grid{
    max-width:var(--max-width);
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:330px;

    gap:8px;
}

.service-card{
    position:relative;

    overflow:hidden;

    background:#11232a;
}

.service-wide{
    grid-column:span 2;
}

.service-card img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:.7s;
}

.service-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;

    padding:75px 22px 20px;

    color:#fff;

    background:linear-gradient(
        transparent,
        rgba(1,12,16,.97)
    );

    transform:translateY(58px);

    transition:.4s;
}

.service-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
}

.service-heading h3{
    margin:0;

    font-size:24px;
    line-height:1;
}

.service-heading span{
    color:var(--teal);
    font-size:12px;
}

.service-size{
    margin:9px 0;

    color:var(--teal-light);

    font-size:13px;
    font-weight:700;
}

.service-description{
    margin:0;

    color:#d6e1e4;

    font-size:12px;

    opacity:0;

    transition:.3s;
}

.service-card:hover img{
    transform:scale(1.07);
}

.service-card:hover .service-overlay{
    transform:translateY(0);
}

.service-card:hover .service-description{
    opacity:1;
}


/* NEDEN BİZ */

.benefits-section{
    background:
        radial-gradient(
            circle at 50% 0,
            #0b3441,
            #061820 65%
        );
}

.benefits-grid{
    max-width:var(--max-width);
    margin:auto;

    display:grid;
    grid-template-columns:repeat(6,1fr);

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

.benefit{
    position:relative;

    padding:36px 17px;

    text-align:center;
}

.benefit:not(:last-child)::after{
    content:"";

    position:absolute;
    right:0;
    top:25%;
    bottom:25%;

    width:1px;

    background:var(--line);
}

.benefit i{
    display:block;

    margin-bottom:14px;

    color:var(--teal);

    font-size:34px;
    font-style:normal;
}

.benefit h3{
    margin:0 0 10px;

    font-size:14px;
    line-height:1.25;
}

.benefit p{
    margin:0;

    color:var(--muted);

    font-size:11px;
}


/* ÇALIŞMALAR */

.portfolio-section{
    background:#f7f8f8;
}

.portfolio-grid{
    max-width:var(--max-width);
    margin:auto;

    display:grid;
    grid-template-columns:
        1.1fr
        1.1fr
        1fr
        1.5fr
        .9fr;

    gap:8px;
}

.portfolio-item{
    position:relative;

    min-height:230px;
    padding:0;

    overflow:hidden;

    border:0;
    background:#071820;

    cursor:pointer;
}

.portfolio-item img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:.5s;
}

.portfolio-item span{
    position:absolute;
    left:0;
    right:0;
    bottom:0;

    padding:40px 16px 14px;

    color:#fff;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.85)
    );

    font-size:12px;
    font-weight:800;
    text-align:left;

    transform:translateY(100%);

    transition:.3s;
}

.portfolio-item:hover img{
    transform:scale(1.06);
}

.portfolio-item:hover span{
    transform:translateY(0);
}


/* İLETİŞİM */

.contact-section{
    max-width:var(--max-width);
    margin:auto;

    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:80px;

    padding:100px clamp(25px,5vw,80px);

    background:linear-gradient(
        145deg,
        #061820,
        #0a2a35
    );
}

.contact-intro h2{
    margin:0 0 25px;

    font-size:clamp(42px,5vw,72px);
    line-height:1.04;
}

.contact-intro h2 strong{
    display:block;
    color:var(--teal);
}

.contact-intro > p:not(.eyebrow){
    max-width:600px;

    margin-bottom:30px;

    color:var(--muted);

    font-size:17px;
}

.contact-card{
    padding:40px;

    background:rgba(2,18,24,.65);

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

    box-shadow:0 30px 70px rgba(0,0,0,.25);
}

.contact-logo{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    padding-bottom:30px;

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

.contact-logo img{
    width:260px;
    max-height:130px;

    object-fit:contain;
    object-position:left center;
}

.contact-logo em{
    margin-top:15px;

    color:var(--teal);

    font-family:cursive;
    font-size:20px;
}

.contact-details{
    display:grid;
}

.contact-details a{
    display:flex;
    align-items:flex-start;
    gap:18px;

    padding:22px 0;

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

.contact-details a:last-child{
    border-bottom:0;
}

.contact-details > a > span{
    min-width:26px;

    color:var(--teal);

    font-size:25px;
}

.contact-details small{
    display:block;

    margin-bottom:5px;

    color:var(--teal);

    font-size:9px;
    letter-spacing:1.5px;
}

.contact-details strong{
    font-size:14px;
    font-weight:500;
}


/* FOOTER */

.site-footer{
    max-width:var(--max-width);
    margin:auto;

    display:flex;
    justify-content:space-between;

    padding:20px clamp(25px,4vw,70px);

    color:var(--muted);

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

    font-size:11px;
}


/* LIGHTBOX */

.lightbox{
    position:fixed;
    inset:0;
    z-index:500;

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

    padding:45px;

    background:rgba(0,8,11,.95);

    opacity:0;
    pointer-events:none;

    transition:.25s;
}

.lightbox.open{
    opacity:1;
    pointer-events:auto;
}

.lightbox img{
    max-width:92vw;
    max-height:90vh;

    object-fit:contain;
}

.lightbox-close{
    position:absolute;
    top:20px;
    right:28px;

    color:#fff;

    background:none;
    border:0;

    font-size:46px;

    cursor:pointer;
}


/* WHATSAPP */

.whatsapp {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.28);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.whatsapp img{
    width:60px;
    height:60px;
    display:block;
}

.whatsapp:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
}

/* SCROLL ANİMASYONU */

.reveal{
    opacity:0;
    transform:translateY(25px);

    transition:.75s;
}

.reveal.visible{
    opacity:1;
    transform:none;
}


/* TABLET */

@media(max-width:1050px){

    .site-header{
        grid-template-columns:1fr auto;
    }

    .header-cta{
        display:none;
    }

    .menu-button{
        display:block;
    }

    .main-nav{
        position:fixed;
        top:78px;
        left:0;
        right:0;

        flex-direction:column;
        align-items:stretch;
        gap:0;

        padding:15px 30px;

        background:rgba(3,20,27,.98);

        transform:translateY(-140%);

        transition:.3s;
    }

    .main-nav.open{
        transform:translateY(0);
    }

    .main-nav a{
        padding:16px;
        border-bottom:1px solid var(--line);
    }

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

    .stats article:nth-child(2)::after{
        display:none;
    }

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

    .benefits-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .benefit:nth-child(3)::after{
        display:none;
    }

    .portfolio-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .contact-section{
        grid-template-columns:1fr;
        gap:45px;
    }

}


/* MOBİL */

@media(max-width:640px){

    .site-header{
        padding:12px 20px;
    }

    .brand{
        width:190px;
        height:60px;
    }

    .brand img{
        width:180px;
        max-height:58px;
    }

    .hero{
        min-height:720px;
    }

    .hero-background{
        background-position:64% center;
    }

    .hero-overlay{
        background:
            linear-gradient(
                90deg,
                rgba(2,13,18,.93),
                rgba(2,13,18,.38)
            ),
            linear-gradient(
                0deg,
                rgba(2,13,18,.85),
                transparent
            );
    }

    .hero-content{
        padding:110px 24px 80px;
    }

    .hero h1{
        font-size:58px;
        letter-spacing:-3px;
    }

    .hero-description{
        font-size:17px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:flex-start;
    }

    .stats{
        grid-template-columns:1fr;
        padding:0 25px;
    }

    .stats article{
        justify-content:flex-start;

        min-height:90px;

        padding-left:20px;
    }

    .stats article::after{
        display:none !important;
    }

    .services-grid{
        grid-template-columns:1fr;
        grid-auto-rows:390px;
    }

    .service-wide{
        grid-column:auto;
    }

    .service-overlay{
        transform:none;
    }

    .service-description{
        opacity:1;
    }

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

    .benefit:nth-child(even)::after{
        display:none;
    }

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

    .portfolio-item{
        min-height:200px;
    }

    .portfolio-item:nth-child(4){
        grid-column:span 2;
    }

    .contact-section{
        padding:70px 24px;
    }

    .contact-card{
        padding:25px;
    }

    .contact-logo img{
        width:220px;
    }

    .site-footer{
        flex-direction:column;
        gap:8px;
    }

}