*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Segoe UI",Arial,sans-serif;
}

html{scroll-behavior:smooth;}

body{
background:#020b18;
color:white;
overflow-x:hidden;
}

button,a{font-family:inherit;}

button{transition:.3s ease;}

.header{
height:100px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 50px;
background:rgba(2,9,20,.92);
border-bottom:1px solid #12304d;
position:sticky;
top:0;
z-index:100;
backdrop-filter:blur(14px);
}

.logo{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:100%;}
.logo-img{width:160px;height:auto;display:block;}
.logo p{font-size:12px;color:#aaa;margin-top:5px;}

nav{display:flex;align-items:center;gap:25px;}
nav a{color:white;text-decoration:none;font-size:15px;transition:.3s;}
nav a:hover{color:#008cff;}
nav button{
background:#087cff;border:none;padding:13px 25px;border-radius:10px;
color:white;font-weight:bold;cursor:pointer;
}
nav button:hover{box-shadow:0 0 20px #087cff;transform:translateY(-2px);}

.hero{
min-height:700px;display:flex;align-items:center;justify-content:space-between;
padding:60px 50px;
background:radial-gradient(circle at right,#06457d,#020b18 65%);
position:relative;overflow:hidden;
}
.hero::before{
content:"";position:absolute;width:420px;height:420px;border-radius:50%;
background:#087cff22;filter:blur(50px);right:-120px;top:100px;
animation:floatGlow 5s ease-in-out infinite;
}
.hero-text{width:45%;position:relative;z-index:1;}
.hero-text h1{font-size:65px;line-height:1.1;}
.hero-text h1 span{color:#087cff;text-shadow:0 0 25px #087cff55;}
.hero-text p{margin-top:25px;font-size:18px;color:#c4d1e0;line-height:1.7;}
.hero-buttons{margin-top:35px;display:flex;gap:15px;}
.hero-buttons button,.pos-text button{
background:#087cff;border:none;padding:16px 28px;border-radius:10px;color:white;cursor:pointer;
}
.hero-buttons button:hover,.pos-text button:hover{transform:translateY(-3px);box-shadow:0 0 25px #087cff;}
.dark-btn{background:#132238!important;border:1px solid #345!important;}
.hero-image{width:50%;display:flex;justify-content:center;position:relative;z-index:1;}
.hero-image img{width:600px;max-width:100%;filter:drop-shadow(0 0 40px #007cff);animation:float 4s ease-in-out infinite;}

.features-mini{display:flex;gap:20px;margin-top:50px;}
.features-mini div{
background:#07182c;padding:20px;border-radius:15px;border:1px solid #173453;width:180px;
transition:.3s;box-shadow:0 10px 30px #0003;
}
.features-mini div:hover{transform:translateY(-7px);border-color:#087cff;box-shadow:0 0 25px #087cff33;}
.feature-icon{font-size:24px;}
.features-mini b{display:block;margin:10px 0;}
.features-mini p{font-size:13px;color:#aaa;}

.about{
display:flex;align-items:center;gap:60px;padding:90px 50px;background:#06111f;
}
.about-image{width:40%;}
.about-image img{width:100%;max-width:450px;border-radius:25px;box-shadow:0 0 40px #087cff55;}
.about-text{width:60%;}
.about-text h2{font-size:45px;color:#087cff;}
.about-text h3{font-size:22px;margin:15px 0 25px;}
.about-text p{font-size:18px;color:#cbd5e1;line-height:1.8;margin-bottom:15px;}

.section-label{
display:inline-block;color:#087cff;font-size:13px;font-weight:800;
letter-spacing:3px;margin-bottom:12px;
}

.services,.references{padding:80px 50px;background:#06111f;text-align:center;}
.services h2,.references h2,.why-section h2,.process h2{font-size:40px;}
.section-desc{color:#aaa;margin:15px 0 40px;}

.service-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;}
.card{
background:#0b1c32;padding:30px;border-radius:15px;border:1px solid #173453;
text-align:left;transition:.3s;box-shadow:0 10px 30px #0002;
}
.card:hover{transform:translateY(-8px);border-color:#087cff;box-shadow:0 0 25px #087cff55;}
.card h3{color:#087cff;margin-bottom:15px;}
.card p{color:#cbd5e1;line-height:1.6;}

.why-section{padding:80px 50px;background:#020b18;text-align:center;}
.why-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-top:40px;}
.why-card{
background:#0b1c32;padding:30px;border-radius:15px;border:1px solid #173453;
text-align:left;transition:.3s;
}
.why-card:hover{transform:translateY(-8px);border-color:#087cff;box-shadow:0 0 25px #087cff55;}
.why-card h3{color:#087cff;font-size:22px;margin-bottom:15px;}
.why-card p{color:#cbd5e1;line-height:1.6;font-size:16px;}

.process{padding:80px 50px;background:#06111f;text-align:center;}
.process-box{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-top:40px;}
.process-card{
background:#0b1c32;padding:35px 25px;border-radius:15px;border:1px solid #173453;
text-align:left;transition:.3s;
}
.process-card:hover{transform:translateY(-8px);border-color:#087cff;box-shadow:0 0 25px #087cff55;}
.process-card span{
display:inline-flex;width:45px;height:45px;align-items:center;justify-content:center;
background:#087cff;border-radius:50%;font-weight:bold;margin-bottom:20px;
box-shadow:0 0 20px #087cff66;
}
.process-card h3{font-size:24px;color:#087cff;margin-bottom:15px;}
.process-card p{color:#cbd5e1;line-height:1.6;}

.pos-section{
display:flex;align-items:center;gap:50px;padding:90px 50px;background:#020b18;
}
.pos-image{width:45%;}
.pos-image img{width:550px;max-width:100%;filter:drop-shadow(0 0 30px #087cff);}
.pos-text{width:50%;}
.pos-text h2{font-size:42px;margin-bottom:30px;}
.pos-text li{list-style:none;font-size:18px;margin:15px 0;color:#dbeafe;}
.pos-text button{margin-top:25px;}

.reference-box{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.reference-photo{
background:#0b1c32;padding:15px;border-radius:15px;border:1px solid #173453;transition:.3s;
}
.reference-photo:hover{transform:translateY(-8px);border-color:#087cff;box-shadow:0 0 25px #087cff44;}
.reference-photo img{width:100%;height:150px;object-fit:cover;border-radius:10px;}
.reference-photo h3{margin-top:15px;}

.contact{display:flex;gap:50px;padding:90px 50px;background:#020b18;}
.contact-info,.contact-form{width:50%;}
.contact-info h2{font-size:40px;margin-bottom:20px;}
.contact-info p{color:#cbd5e1;line-height:1.8;margin:15px 0;}
.contact-form{background:#0b1c32;padding:30px;border-radius:15px;border:1px solid #173453;}
.contact-form input,.contact-form textarea{
width:100%;padding:15px;margin-bottom:15px;background:#020b18;border:1px solid #173453;
border-radius:8px;color:white;outline:none;
}
.contact-form input:focus,.contact-form textarea:focus{border-color:#087cff;box-shadow:0 0 15px #087cff22;}
.contact-form textarea{height:150px;resize:vertical;}
.contact-form button{
width:100%;padding:15px;background:#087cff;border:none;border-radius:8px;color:white;cursor:pointer;
}
.contact-form button:hover{box-shadow:0 0 25px #087cff;transform:translateY(-2px);}

.whatsapp-btn{
position:fixed;right:25px;bottom:25px;width:60px;height:60px;background:#25d366;
border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;
z-index:200;cursor:pointer;box-shadow:0 0 20px #25d36688;animation:pulse 2s infinite;
}

footer{background:#020914;padding:30px;text-align:center;border-top:1px solid #173453;}
footer h3{color:#087cff;}

.reveal{
opacity:0;transform:translateY(35px);
transition:opacity .8s ease,transform .8s ease;
}
.reveal.show{opacity:1;transform:translateY(0);}

@keyframes float{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-15px);}
}
@keyframes floatGlow{
0%,100%{transform:scale(1);opacity:.7;}
50%{transform:scale(1.15);opacity:1;}
}
@keyframes pulse{
0%{box-shadow:0 0 0 0 #25d36688;}
70%{box-shadow:0 0 0 15px #25d36600;}
100%{box-shadow:0 0 0 0 #25d36600;}
}

@media(max-width:1100px){
nav{gap:14px;}
.header{padding:0 25px;}
.hero-text h1{font-size:52px;}
.features-mini{gap:10px;}
.features-mini div{width:160px;}
}

@media(max-width:900px){
.header{padding:0 20px;height:85px;}
nav{display:none;}

.hero,.about,.pos-section,.contact{flex-direction:column;}
.hero{padding:70px 20px;min-height:auto;text-align:center;}
.hero-text,.hero-image,.about-image,.about-text,.pos-image,.pos-text,.contact-info,.contact-form{width:100%;}
.hero-text h1{font-size:42px;}
.hero-buttons{justify-content:center;flex-wrap:wrap;}
.features-mini{flex-direction:column;align-items:center;}
.features-mini div{width:100%;max-width:350px;text-align:left;}

.about,.pos-section,.contact{padding:60px 20px;}
.about-text{text-align:center;}
.about-text h2{font-size:38px;}

.services,.references,.why-section,.process{padding:60px 20px;}
.services h2,.references h2,.why-section h2,.process h2{font-size:32px;}

.service-cards,.why-cards,.process-box{grid-template-columns:1fr;}
.reference-box{grid-template-columns:repeat(2,1fr);}

.pos-text h2{font-size:36px;}
.contact-info h2{font-size:32px;}

.logo-img{width:140px;}
.whatsapp-btn{right:18px;bottom:18px;}
}

@media(max-width:520px){
.reference-box{grid-template-columns:1fr;}
.hero-buttons button{width:100%;}
}/* MOBİL MENÜ */

.mobile-menu-btn{
    display:none;
    background:#087cff;
    border:none;
    color:white;
    font-size:25px;
    width:48px;
    height:48px;
    border-radius:10px;
    cursor:pointer;
}

.mobile-menu-btn:hover{
    box-shadow:0 0 20px #087cff;
    transform:scale(1.05);
}

@media(max-width:900px){

    .header{
        position:sticky;
    }

    .mobile-menu-btn{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    nav{
        display:none;
        position:absolute;
        top:85px;
        left:0;
        width:100%;
        padding:20px;
        background:#020914;
        border-bottom:1px solid #173453;
        flex-direction:column;
        gap:15px;
        animation:menuOpen .3s ease;
    }

    nav.active{
        display:flex;
    }

    nav a{
        width:100%;
        padding:12px;
        text-align:center;
        border-radius:8px;
        background:#07182c;
    }

    nav button{
        width:100%;
    }
}

@keyframes menuOpen{
    from{
        opacity:0;
        transform:translateY(-15px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}/* ANA SAYFA GİRİŞ ANİMASYONU */

.hero-text h1{
    animation: heroTitle 1s ease forwards;
}

.hero-text > p{
    opacity:0;
    animation: heroText 1s ease .25s forwards;
}

.hero-buttons{
    opacity:0;
    animation: heroText 1s ease .45s forwards;
}

.features-mini{
    opacity:0;
    animation: heroText 1s ease .65s forwards;
}

.hero-image{
    opacity:0;
    animation: heroImage 1.2s ease .2s forwards;
}

@keyframes heroTitle{
    from{
        opacity:0;
        transform:translateY(35px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes heroText{
    from{
        opacity:0;
        transform:translateY(25px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes heroImage{
    from{
        opacity:0;
        transform:translateX(60px) scale(.92);
    }
    to{
        opacity:1;
        transform:translateX(0) scale(1);
    }
}