/* =====================================
   A10 TEKNOLOJİ PREMIUM CSS
===================================== */


:root{

    --main:#0d6efd;
    --blue:#38bdf8;
    --dark:#07111f;
    --card:rgba(255,255,255,.06);
    --border:rgba(255,255,255,.12);

}



*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    background:
    radial-gradient(circle at top left,#0d6efd22,transparent 35%),
    radial-gradient(circle at bottom right,#00d4ff18,transparent 35%),
    var(--dark);

    color:#fff;

    font-family:'Segoe UI',Arial,sans-serif;

    overflow-x:hidden;

}

.hero-modern{

min-height:100vh;

display:flex;

align-items:center;

position:relative;

overflow:hidden;

background:

linear-gradient(
135deg,
#020617,
#0b172d
);

}



/* küçük teknoloji etiketi */

.badge-tech{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 20px;

border-radius:50px;

background:#ffffff08;

border:1px solid #38bdf833;

color:#38bdf8;

font-size:14px;

letter-spacing:1px;

margin-bottom:30px;

}





.hero-title-modern{


font-size:clamp(45px,5vw,75px);

line-height:1.05;

font-weight:800;

letter-spacing:-2px;

color:white;

}



.hero-title-modern span{

color:#38bdf8;

}



.hero-title-modern strong{


background:

linear-gradient(
90deg,
#38bdf8,
#2563eb
);


-webkit-background-clip:text;

-webkit-text-fill-color:transparent;


}





.hero-subtitle-modern{


font-size:22px;

color:#94a3b8;

margin-top:30px;

letter-spacing:1px;

}




.hero-buttons{

margin-top:40px;

}



.btn-modern{


background:#2563eb;

padding:16px 35px;

border-radius:50px;

color:white;

text-decoration:none;

font-weight:700;

display:inline-flex;

gap:10px;

transition:.4s;


}



.btn-modern:hover{


box-shadow:

0 0 40px #2563eb;

transform:translateY(-5px);


}



.btn-outline-modern{


margin-left:15px;

padding:14px 35px;

border-radius:50px;

border:1px solid #38bdf8;

color:white;

text-decoration:none;


}






/* Sağ teknoloji paneli */





@keyframes pulse{


0%{

box-shadow:0 0 20px #38bdf855;

}


50%{

box-shadow:0 0 70px #2563eb;

}


100%{

box-shadow:0 0 20px #38bdf855;

}


}




.hero-modern{

min-height:100vh;

display:flex;

align-items:center;

position:relative;

overflow:hidden;

}



.hero-title-modern{


font-size:clamp(45px,5vw,78px);

font-weight:900;

line-height:1.05;

letter-spacing:-3px;

color:white;


}



.hero-title-modern span{


background:

linear-gradient(
90deg,
#38bdf8,
#2563eb
);


-webkit-background-clip:text;

-webkit-text-fill-color:transparent;


}



.hero-title-modern strong{


color:#fff;


}





.hero-subtitle-modern{


margin-top:35px;

font-size:22px;

color:#94a3b8;

letter-spacing:1px;


}





.hero-image-box{


position:relative;

display:flex;

justify-content:center;

align-items:center;


}



.hero-tech-image{


width:100%;

max-width:650px;


position:relative;

z-index:2;


animation:

floatImage 6s ease-in-out infinite;


filter:

drop-shadow(
0 30px 60px #000
);


}





@keyframes floatImage{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-25px);

}


100%{

transform:translateY(0);

}


}




.hero-image-box::after{


content:"";


position:absolute;


width:350px;

height:350px;


background:#0d6efd;


filter:blur(120px);


opacity:.35;


z-index:1;


}

.scan-line{


position:absolute;


width:100%;

height:2px;

background:#38bdf8;


animation:scan 4s infinite;


opacity:.5;


}



@keyframes scan{


0%{

top:0;

}


100%{

top:100%;

}


}

/* Scrollbar */

::-webkit-scrollbar{

    width:10px;

}


::-webkit-scrollbar-track{

    background:#020817;

}


::-webkit-scrollbar-thumb{

    background:#0d6efd;

    border-radius:20px;

}





/* Navbar */


.navbar{

    padding:18px 0;

    background:rgba(7,17,31,.65);

    backdrop-filter:blur(20px);

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

    transition:.4s;

}



.navbar-brand{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:30px;

    font-weight:900;

    letter-spacing:2px;

}



.navbar-brand img{

    filter:drop-shadow(0 0 15px #0d6efd);

}



.nav-link{

    color:#fff!important;

    font-weight:500;

    position:relative;

}



.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:0;

    height:2px;

    background:#38bdf8;

    transition:.3s;

}



.nav-link:hover::after{

    width:100%;

}





/* Hero */


.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

}



.hero h1{

    font-size:clamp(42px,6vw,75px);

    font-weight:900;

    line-height:1.05;

    background:

    linear-gradient(
    90deg,
    #fff,
    #38bdf8
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}



.hero p{

    font-size:21px;

    color:#cbd5e1;

    margin-top:25px;

    line-height:1.7;

}



.heroImage{

    max-width:600px;

    animation:floating 5s infinite ease-in-out;

}



@keyframes floating{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-25px);

}


100%{

transform:translateY(0);

}


}





/* Buttons */


.btnA{

    background:

    linear-gradient(
    135deg,
    #0d6efd,
    #38bdf8
    );

    color:#fff;

    border:none;

    padding:15px 35px;

    border-radius:50px;

    font-weight:700;

    transition:.4s;

}



.btnA:hover{

    transform:translateY(-5px);

    box-shadow:

    0 15px 40px #0d6efd88;

}





.btnB{

    padding:13px 35px;

    border-radius:50px;

    border:2px solid #38bdf8;

    color:white;

    background:transparent;

    transition:.4s;

}



.btnB:hover{

    background:#38bdf8;

    color:#001;

}





/* Section */


section{

    padding:100px 0;

}



.title{

    font-size:48px;

    font-weight:900;

}



.line{

    height:5px;

    width:120px;

    background:

    linear-gradient(
    90deg,
    #0d6efd,
    #38bdf8
    );

    border-radius:20px;

}





/* Glass Cards */


.cardGlass{

    background:

    rgba(255,255,255,.05);

    border:

    1px solid var(--border);

    backdrop-filter:

    blur(20px);

    border-radius:25px;

    transition:.45s;

    overflow:hidden;

}



.cardGlass:hover{

    transform:

    translateY(-12px);

    border-color:#38bdf8;

    box-shadow:

    0 20px 60px #0008,
    0 0 35px #0d6efd55;

}





/* Icons */


.cardGlass i{

    transition:.4s;

}



.cardGlass:hover i{

    transform:scale(1.2)
    rotate(8deg);

}





/* Numbers */


.number{

    font-size:45px;

    font-weight:900;

    color:#38bdf8;

}





/* Images */


.cardGlass img{

    transition:.5s;

}



.cardGlass:hover img{

    transform:scale(1.08);

}





/* Form */


.form-control,
.form-select{


    background:#ffffff10;

    border:1px solid #ffffff22;

    color:white;

}



.form-control:focus,
.form-select:focus{


    background:#ffffff15;

    color:white;

    border-color:#38bdf8;

    box-shadow:0 0 20px #38bdf855;

}




/* Footer */


footer{

    border-top:

    1px solid rgba(255,255,255,.1);

}



footer h3{

    font-weight:900;

}



footer a:hover{

    color:#38bdf8!important;

}





/* WhatsApp */


.fa-whatsapp{

    filter:

    drop-shadow(
    0 0 15px #25d366
    );

}





/* Scroll animasyon başlangıç */


.cardGlass{

    opacity:0;

    transform:translateY(40px);

}



/* Mobil */


@media(max-width:991px){


.hero{

    text-align:center;

}



.hero h1{

    font-size:45px;

}



.heroImage{

    margin-top:50px;

}



.navbar-collapse{

    background:#07111f;

    padding:20px;

    border-radius:20px;

}



.title{

    font-size:38px;

}



}





/* Glow efektleri */


.glow{

box-shadow:

0 0 20px #0d6efd,
0 0 60px #0d6efd55;

}



/* Loading efekti */


.fade{

animation:

fade .8s ease;

}



@keyframes fade{


from{

opacity:0;

transform:translateY(30px);

}


to{

opacity:1;

transform:none;

}


}