/*==================================================
MH-BIO
MASTER HUMAN BIOTECHNOLOGY
==================================================*/

:root{

    --background:#030712;
    --background2:#07111F;
    --background3:#0E1A2F;

    --primary:#00D4FF;
    --primary-light:#63E6FF;

    /* Eski kodlar bozulmasın diye */
    --gold:var(--primary);
    --gold-light:var(--primary-light);

    --white:#F8FAFC;
    --gray:#C7D2E0;
    --gray2:#94A3B8;

    --border:rgba(0,212,255,.12);

    --glass:rgba(255,255,255,.035);

    --shadow:0 20px 60px rgba(0,0,0,.55);

    --radius:22px;

    --transition:.45s;

}

*{

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

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    color:var(--white);

    font-family:'Inter',sans-serif;

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    color:white;

    text-decoration:none;

}

.container{

    width:min(1300px,90%);

    margin:auto;

}

.section{

    padding:150px 0;

}

.section-header{

    margin-bottom:80px;

}

.center{

    text-align:center;

}

.section-label{

    display:inline-block;

    color:var(--primary);

    letter-spacing:4px;

    font-size:13px;

    text-transform:uppercase;

}

.section-header h2{

    font-size:58px;

    font-family:'Space Grotesk',sans-serif;

    margin:20px 0;

    line-height:1.1;

}

.section-header p{

    color:var(--gray);

    max-width:720px;

    font-size:18px;

    line-height:1.8;

}

.dark{

    background:var(--background2);

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

#home{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.hero{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:120px;

    align-items:center;

}

.hero-left{

    position:relative;

    z-index:5;

}

.tag{

    display:inline-block;

    color:var(--primary);

    letter-spacing:5px;

    margin-bottom:25px;

    font-size:13px;

}

.hero h1{

    font-size:92px;

    line-height:1;

    margin-bottom:35px;

    font-family:'Space Grotesk',sans-serif;

}

.hero h1 span{

    color:var(--primary);

}

.hero p{

    color:var(--gray);

    font-size:20px;

    line-height:1.9;

    max-width:620px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

}
.btn-primary{

    background:linear-gradient(135deg,var(--gold),var(--gold-light));

    color:#03111F;

    padding:20px 42px;

    border-radius:50px;

    font-weight:700;

    transition:.4s;

}
.btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:0 25px 50px rgba(0,212,255,.35);

}

.btn-secondary{

    padding:20px 42px;

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

    border-radius:50px;

    transition:.4s;

}

.btn-secondary:hover{

    border-color:var(--primary);

    color:var(--primary);

}
header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    backdrop-filter:blur(18px);

    background:rgba(5,6,8,.45);

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

}

.nav-container{

    height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo img{

    height:65px;

}

nav ul{

    display:flex;

    list-style:none;

    gap:40px;

}

nav a{

    color:white;

    font-weight:500;

    transition:.35s;

}

nav a:hover{

    color:var(--primary);

}
.hero-right{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-right img{

    width:520px;

    filter:drop-shadow(0 0 80px rgba(0,212,255,.30));

    animation:float 6s ease-in-out infinite;

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

    100%{

        transform:translateY(0);

    }

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

.about-grid{

    display:grid;

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

    gap:35px;

    margin-top:80px;

}

.about-card{

    position:relative;

    overflow:hidden;

    padding:45px;

    border-radius:24px;

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

    backdrop-filter:blur(25px);

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

    transition:.45s;

}

.about-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg,
    transparent,
    rgba(0,212,255,.08),
    transparent);

    transform:translateX(-100%);

    transition:1s;

}

.about-card:hover::before{

    transform:translateX(100%);

}

.about-card:hover{

    transform:translateY(-12px);

    border-color:rgba(0,212,255,.45);

    box-shadow:0 30px 60px rgba(0,0,0,.45);

}

.about-card i{

    font-size:42px;

    color:var(--primary);

    margin-bottom:30px;

}

.about-card h3{

    font-size:28px;

    margin-bottom:20px;

    font-family:'Space Grotesk',sans-serif;

}

.about-card p{

    color:var(--gray);

    line-height:1.8;

}

/*==================================================
TECHNOLOGY
==================================================*/

.technology-grid{

    display:grid;

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

    gap:35px;

}

.technology-box{

    position:relative;

    overflow:hidden;

    padding:45px;

    border-radius:24px;

    background:linear-gradient(180deg,#13161d,#0b0d12);

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

    transition:.45s;

    opacity:1 !important;

    visibility:visible !important;

    transform:translateY(0) !important;
}

.technology-box:hover{

    transform:translateY(-12px);

    border-color:var(--primary);

}

.technology-box span{

    display:inline-flex;

    width:55px;

    height:55px;

    border-radius:50%;

    justify-content:center;

    align-items:center;

    background:rgba(0,212,255,.12);

    color:var(--primary);

    margin-bottom:30px;

    font-weight:bold;

}

.technology-box h3{

    font-size:28px;

    margin-bottom:18px;

    font-family:'Space Grotesk',sans-serif;

}

.technology-box p{

    color:var(--gray);

    line-height:1.8;

}

/*==================================================
PRODUCT
==================================================*/

.product-layout{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.product-view{

    display:flex;

    justify-content:center;

    align-items:center;

}

.product-view img{

    width:520px;

    filter:drop-shadow(0 0 80px rgba(0,212,255,.25));

}

.product-features{

    display:grid;

    gap:25px;

}

.feature-box{

    padding:30px;

    border-radius:22px;

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

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

    transition:.45s;
    opacity:1 !important;

    visibility:visible !important;

}

.feature-box:hover{

    transform:translateX(15px);

    border-color:var(--primary);

}

.feature-box span{

    color:var(--primary);

    font-weight:bold;

    font-size:14px;

    letter-spacing:2px;

}

.feature-box h3{

    margin:12px 0;

    font-size:26px;

    font-family:'Space Grotesk',sans-serif;

}

.feature-box p{

    color:var(--gray);

    line-height:1.8;

}

/*==================================================
TIMELINE
==================================================*/

.timeline{

    margin-top:80px;

    position:relative;

}

.timeline::before{

    content:"";

    position:absolute;

    left:120px;

    top:0;

    width:2px;

    height:100%;

    background:rgba(0,212,255,.30);

}

.timeline-item{

    display:grid;

    grid-template-columns:150px 1fr;

    gap:60px;

    margin-bottom:70px;

}

.timeline-year{

    color:var(--primary);

    font-size:34px;

    font-weight:bold;

    font-family:'Space Grotesk',sans-serif;

}

.timeline-content{

    padding:35px;

    border-radius:22px;

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

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

}

.timeline-content h3{

    margin-bottom:15px;

    font-size:28px;

}

.timeline-content p{

    color:var(--gray);

}
/*==================================================
GALLERY
==================================================*/

.gallery-grid{

    display:grid;

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

    gap:30px;

}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    background:#111;

    aspect-ratio:1/1;

    cursor:pointer;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.65),
        transparent 60%
    );

    opacity:0;

    transition:.5s;

}

.gallery-item:hover::after{

    opacity:1;

}

.gallery-item:hover img{

    transform:scale(1.12);

}

/*==================================================
STATISTICS
==================================================*/

.stats-grid{

    display:grid;

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

    gap:35px;

}

.stat-box{

    padding:55px 20px;

    border-radius:24px;

    text-align:center;

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

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

    transition:.45s;

}

.stat-box:hover{

    transform:translateY(-12px);

    border-color:var(--primary);

}

.stat-box h2{

    font-size:70px;

    color:var(--primary);

    font-family:'Space Grotesk',sans-serif;

    margin-bottom:15px;

}

.stat-box p{

    color:var(--gray);

    letter-spacing:1px;

}

/*==================================================
VIDEO SECTION
==================================================*/

.video-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
}

.video-wrapper video{

    width:360px;
    max-width:90vw;

    height:auto;

    aspect-ratio:9 / 16;

    object-fit:cover;

    border-radius:24px;

    box-shadow:0 0 40px rgba(0,212,255,.25);

}

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

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.contact-info p{

    margin:30px 0;

}

.contact-item{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:25px;

    color:var(--gray);

}

.contact-item i{

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(0,212,255,.12);

    color:var(--primary);

    font-size:20px;

}

.contact-form{

    display:flex;

    flex-direction:column;

    gap:22px;

    padding:50px;

    border-radius:28px;

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

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

    backdrop-filter:blur(20px);

}

.contact-form input,
.contact-form textarea{

    width:100%;

    padding:18px 22px;

    background:#10141b;

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

    border-radius:14px;

    color:#fff;

    outline:none;

    transition:.35s;

    font-size:16px;

}

.contact-form input:focus,
.contact-form textarea:focus{

    border-color:var(--primary);

}

.contact-form button{

    height:60px;

    border:none;

    border-radius:50px;

    background:linear-gradient(135deg,var(--primary),var(--gold-light));

    color:#111;

    font-weight:700;

    cursor:pointer;

    transition:.4s;

}

.contact-form button:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(0,212,255,.35);

}

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

footer{

    position:relative;

    overflow:hidden;

    padding:120px 0 60px;

    background:#050608;

    text-align:center;

    border-top:1px solid rgba(255,255,255,.06);

}

footer::before{

    content:"MH";

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    font-size:340px;

    font-weight:900;

    color:rgba(255,255,255,.02);

    font-family:'Space Grotesk',sans-serif;

    pointer-events:none;

}

.footer-logo{

    width:130px;

    margin:auto;

    margin-bottom:25px;

}

footer h2{

    font-size:42px;

    margin-bottom:10px;

    font-family:'Space Grotesk',sans-serif;

}

footer>div>p{

    color:var(--gray);

}

.footer-menu{

    display:flex;

    justify-content:center;

    gap:35px;

    margin:45px 0;

}

.footer-menu a{

    transition:.35s;

}

.footer-menu a:hover{

    color:var(--primary);

}

.footer-social{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-bottom:40px;

}

.footer-social a{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    transition:.4s;

}

.footer-social a:hover{

    background:var(--primary);

    color:#111;

    transform:translateY(-6px);

}

.copyright{

    color:#777;

    font-size:14px;

}
/*==================================================
BACKGROUND EFFECTS
==================================================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:
    radial-gradient(circle at 20% 20%, rgba(0,212,255,.10), transparent 30%),
    radial-gradient(circle at 80% 30%, rgba(0,212,255,.08), transparent 35%),
    radial-gradient(circle at 50% 90%, rgba(0,212,255,.07), transparent 35%);

    pointer-events:none;

    z-index:-5;

}

.grid-background{

    position:fixed;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

    background-size:70px 70px;

    mask-image:radial-gradient(circle, black 35%, transparent 100%);

    opacity:.35;

    z-index:-4;

    animation:gridMove 25s linear infinite;

}

@keyframes gridMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(70px);

    }

}

.gradient-light{

    position:fixed;

    width:700px;

    height:700px;

    left:50%;

    top:-200px;

    transform:translateX(-50%);

    background:radial-gradient(circle,
    rgba(0,212,255,.18),
    transparent 70%);

    filter:blur(100px);

    pointer-events:none;

    z-index:-3;

    animation:pulseGlow 8s ease-in-out infinite;

}

@keyframes pulseGlow{

    0%,100%{

        transform:translateX(-50%) scale(1);

        opacity:.35;

    }

    50%{

        transform:translateX(-50%) scale(1.25);

        opacity:.8;

    }

}

/*==================================================
LOADER
==================================================*/

#loader{

    position:fixed;

    inset:0;

    background:#050608;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.loader-logo img{

    width:170px;

    animation:loaderLogo 2s infinite ease-in-out;

}

.loader-line{

    margin-top:40px;

    width:220px;

    height:3px;

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

    overflow:hidden;

    border-radius:50px;

    position:relative;

}

.loader-line::after{

    content:"";

    position:absolute;

    width:45%;

    height:100%;

    background:linear-gradient(90deg,var(--primary),var(--gold-light));

    animation:loading 2s infinite;

}

@keyframes loading{

    from{

        left:-45%;

    }

    to{

        left:100%;

    }

}

@keyframes loaderLogo{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

/*==================================================
CUSTOM CURSOR
==================================================*/


/* Hover */

.cursor2.hover{

    width:60px;

    height:60px;

    border-color:var(--primary);

    background:rgba(0,212,255,.08);

    box-shadow:
        0 0 40px rgba(0,212,255,.25);

}

/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#08090c;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(var(--primary),var(--gold-light));

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--gold-light);

}

/*==================================================
SECTION TRANSITIONS
==================================================*/

.fade-up{

    opacity:0;

    transform:translateY(60px);

}

.fade-left{

    opacity:0;

    transform:translateX(-60px);

}

.fade-right{

    opacity:0;

    transform:translateX(60px);

}

.scale-in{

    opacity:0;

    transform:scale(.9);

}

/*==================================================
HOVER EFFECTS
==================================================*/

button,
a,
.about-card,
.technology-box,
.feature-box,
.gallery-item,
.stat-box{

    will-change:transform;

}

::selection{

    background:var(--primary);

    color:#111;

}
/*==================================================
RESPONSIVE
==================================================*/

@media (max-width:1200px){

.container{

    width:92%;

}

.hero{

    gap:70px;

}

.hero h1{

    font-size:72px;

}

.section-header h2{

    font-size:48px;

}

.hero-right img{

    width:430px;

}

}

@media (max-width:992px){

.hero{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-left{

    order:2;

}

.hero-right{

    order:1;

}

.hero p{

    margin:auto;

}

.hero-buttons{

    justify-content:center;

}

.about-grid,
.technology-grid,
.stats-grid{

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

}

.product-layout{

    grid-template-columns:1fr;

}

.contact-grid{

    grid-template-columns:1fr;

}

.gallery-grid{

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

}

.timeline-item{

    grid-template-columns:1fr;

}

.timeline::before{

    display:none;

}

nav{

    display:flex;

}

}

@media (max-width:768px){

.section{

    padding:90px 0;

}

.hero h1{

    font-size:52px;

}

.hero p{

    font-size:17px;

}

.section-header h2{

    font-size:38px;

}

.about-grid,
.technology-grid,
.stats-grid,
.gallery-grid{

    grid-template-columns:1fr;

}

.footer-menu{

    flex-direction:column;

    gap:18px;

}

.hero-right img{

    width:300px;

}

.product-view img{

    width:300px;

}

.contact-form{

    padding:30px;

}

}

@media (max-width:500px){

.hero{

    gap:40px;

}

.hero-buttons{

    flex-direction:column;

}

.btn-primary,
.btn-secondary{

    width:100%;

    text-align:center;

}

.section-header h2{

    font-size:32px;

}

.about-card,
.technology-box,
.feature-box{

    padding:30px;

}

.stat-box h2{

    font-size:46px;

}

footer::before{

    font-size:180px;

}

}
#particles{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-2;

}

.particle{

    position:absolute;

    width:3px;

    height:3px;

    border-radius:50%;

    background:rgba(0,212,255,.8);

    animation:particleMove linear infinite;

}

@keyframes particleMove{

    from{

        transform:translateY(0);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    to{

        transform:translateY(-250px);

        opacity:0;

    }

}
/*==================================================
SCROLL PROGRESS BAR
==================================================*/

#progress{

    position:fixed;

    top:0;

    left:0;

    width:0%;

    height:3px;

    background:linear-gradient(90deg,var(--primary),var(--gold-light));

    z-index:999999;

    box-shadow:0 0 25px rgba(0,212,255,.8);

}

/*==================================================
MOUSE LIGHT
==================================================*/

.mouse-light{

    position:fixed;

    width:500px;

    height:500px;

    border-radius:50%;

    pointer-events:none;

    background:radial-gradient(circle,
    rgba(0,212,255,.16),
    transparent 70%);

    filter:blur(50px);

    z-index:-1;

    transform:translate(-50%,-50%);

}

/*==================================================
GLASS EFFECT
==================================================*/

.glass{

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

    backdrop-filter:blur(25px);

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

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

}

/*==================================================
NAVBAR ACTIVE
==================================================*/

nav a.active{

    color:var(--primary);

    position:relative;

}

nav a.active::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:2px;

    background:var(--primary);

}

/*==================================================
IMAGE SHINE
==================================================*/

.gallery-item{

    position:relative;

}

.gallery-item::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-60%;

    width:40%;

    height:250%;

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

    transform:rotate(25deg);

    transition:1s;

    z-index:5;

}

.gallery-item:hover::before{

    left:160%;

}

/*==================================================
TITLE LINE
==================================================*/

.section-header h2{

    position:relative;

}

.section-header h2::after{

    content:"";

    width:90px;

    height:4px;

    background:linear-gradient(90deg,var(--primary),var(--gold-light));

    display:block;

    margin-top:20px;

}

.center h2::after{

    margin-left:auto;

    margin-right:auto;

}

/*==================================================
BUTTON SCALE
==================================================*/

.btn-primary:active,
.btn-secondary:active{

    transform:scale(.96);

}

/*==================================================
CARD BORDER ANIMATION
==================================================*/

.about-card,
.technology-box,
.feature-box{

    overflow:hidden;

}

.about-card::before,
.technology-box::before,
.feature-box::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:24px;

    background:linear-gradient(
    45deg,
    transparent,
    rgba(0,212,255,.4),
    transparent);

    opacity:0;

    transition:.5s;

    z-index:-1;

}

.about-card:hover::before,
.technology-box:hover::before,
.feature-box:hover::before{

    opacity:1;

}

/*==================================================
IMAGE ZOOM
==================================================*/

.product-view{

    overflow:hidden;

}

.product-view img{

    transition:1s;

}

.product-view:hover img{

    transform:scale(1.08) rotate(-3deg);

}

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

footer{

    position:relative;

}

footer::after{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(0,212,255,.08),
    transparent 70%);

    left:50%;

    top:0;

    transform:translateX(-50%);

    pointer-events:none;

}
/*==================================================
PREMIUM HERO EFFECTS
==================================================*/

#home{

    position:relative;

}

#home::before{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(0,212,255,.12),
    transparent 70%);

    right:-250px;

    top:-250px;

    filter:blur(60px);

    pointer-events:none;

}

#home::after{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(255,255,255,.04),
    transparent 70%);

    left:-250px;

    bottom:-250px;

    filter:blur(80px);

}

/*==================================================
TITLE ANIMATION
==================================================*/

.hero h1{

    background:linear-gradient(
    90deg,
    #ffffff,
    #ffffff,
    var(--gold-light),
    #ffffff);

    background-size:300%;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:titleFlow 8s linear infinite;

}

@keyframes titleFlow{

    0%{

        background-position:0%;

    }

    100%{

        background-position:300%;

    }

}

/*==================================================
TECH GRID BACKGROUND
==================================================*/

.tech-lines{

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.08;

    background-image:

    repeating-linear-gradient(

        90deg,

        transparent,

        transparent 120px,

        rgba(0,212,255,.15) 121px,

        transparent 122px

    );

    z-index:-6;

}

/*==================================================
IMAGE FRAME
==================================================*/

.product-view{

    position:relative;

}

.product-view::before{

    content:"";

    position:absolute;

    width:560px;

    height:560px;

    border-radius:50%;

    border:1px solid rgba(0,212,255,.15);

    animation:rotateSlow 18s linear infinite;

}

.product-view::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    border:1px dashed rgba(0,212,255,.25);

    animation:rotateReverse 14s linear infinite;

}

@keyframes rotateReverse{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0);

    }

}

/*==================================================
TECH BOX ICON
==================================================*/

.technology-box span{

    transition:.45s;

}

.technology-box:hover span{

    transform:rotate(360deg) scale(1.1);

}

/*==================================================
FEATURE BAR
==================================================*/

.feature-box{

    position:relative;

}

.feature-box::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:3px;

    background:linear-gradient(90deg,var(--primary),var(--gold-light));

    transition:.6s;

}

.feature-box:hover::after{

    width:100%;

}

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

.contact-form{

    position:relative;

    overflow:hidden;

}

.contact-form::before{

    content:"";

    position:absolute;

    inset:-2px;

    background:linear-gradient(
    45deg,
    transparent,
    rgba(0,212,255,.18),
    transparent);

    opacity:0;

    transition:.5s;

}

.contact-form:hover::before{

    opacity:1;

}

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

.footer-logo img{

    transition:1s;

}

.footer-logo img:hover{

    transform:rotate(360deg) scale(1.1);

}

/*==================================================
SCROLL DOWN
==================================================*/

.scroll-down{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    color:var(--gray2);

    letter-spacing:3px;

    font-size:12px;

}

.scroll-down span{

    width:2px;

    height:60px;

    background:linear-gradient(
    transparent,
    var(--primary),
    transparent);

    animation:scrollDown 2s infinite;

}

@keyframes scrollDown{

    0%{

        transform:translateY(-10px);

        opacity:0;

    }

    50%{

        opacity:1;

    }

    100%{

        transform:translateY(10px);

        opacity:0;

    }

}

/*==================================================
IMAGE HOVER SHADOW
==================================================*/

.gallery-item:hover{

    box-shadow:

    0 0 40px rgba(0,212,255,.15),

    0 30px 70px rgba(0,0,0,.45);

}

/*==================================================
BUTTON RIPPLE
==================================================*/

.btn-primary{

    position:relative;

    isolation:isolate;

}

.btn-primary::before{

    content:"";

    position:absolute;

    width:0;

    height:0;

    border-radius:50%;

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

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    transition:.7s;

    z-index:-1;

}

.btn-primary:hover::before{

    width:450px;

    height:450px;

}

/*==================================================
SECTION DIVIDER
==================================================*/

.section{

    position:relative;

}

.section:not(:last-child)::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    width:200px;

    height:1px;

    transform:translateX(-50%);

    background:linear-gradient(
    90deg,
    transparent,
    rgba(0,212,255,.3),
    transparent);

}
/*==================================================
PREMIUM NAVBAR
==================================================*/

header{

    transition:.45s;

}

header.scrolled{

    height:75px;

    background:rgba(5,6,8,.82);

    backdrop-filter:blur(30px);

    box-shadow:0 15px 40px rgba(0,0,0,.45);

}

header.scrolled .logo img{

    height:52px;

}

/*==================================================
NAVIGATION
==================================================*/

nav ul{

    display:flex;

    align-items:center;

    gap:40px;

    list-style:none;

}

nav ul li{

    position:relative;

}

nav ul li a{

    position:relative;

    display:inline-block;

    color:var(--white);

    font-weight:500;

    letter-spacing:.5px;

    text-decoration:none;

    transition:
        color .35s ease,
        transform .35s ease,
        text-shadow .35s ease;

}

/* Hover */

nav ul li:hover a{

    color:var(--primary);

    transform:translateY(-2px);

    text-shadow:
        0 0 8px rgba(0,212,255,.85),
        0 0 18px rgba(0,212,255,.55),
        0 0 35px rgba(0,212,255,.25);

}

/* Active Link */

nav ul li a.active{

    color:var(--primary);

}

/* Underline */

nav ul li::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-10px;

    width:0;

    height:2px;

    border-radius:50px;

    transform:translateX(-50%);

    background:var(--primary);

    box-shadow:
        0 0 8px var(--primary),
        0 0 16px var(--primary),
        0 0 24px rgba(0,212,255,.5);

    transition:width .35s ease;

}

nav ul li:hover::after{

    width:100%;

}

/*==================================================
PREMIUM GLASS
==================================================*/

.glass-card{

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

    backdrop-filter:blur(30px);

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

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

    border-radius:28px;

}

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

.hero-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:90px 90px;

    mask-image:radial-gradient(circle,black 35%,transparent 100%);

    animation:gridAnimation 30s linear infinite;

    opacity:.25;

}

@keyframes gridAnimation{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(90px);

    }

}

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

.hero-circle{

    position:absolute;

    right:5%;

    top:50%;

    transform:translateY(-50%);

    width:650px;

    height:650px;

    border-radius:50%;

    border:1px solid rgba(0,212,255,.15);

    animation:rotateSlow 35s linear infinite;

}

.hero-circle::before{

    content:"";

    position:absolute;

    inset:60px;

    border-radius:50%;

    border:1px dashed rgba(0,212,255,.20);

}

.hero-circle::after{

    content:"";

    position:absolute;

    inset:130px;

    border-radius:50%;

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

}

/*==================================================
TEXT SHADOW
==================================================*/

.hero h1{

    text-shadow:

    0 0 30px rgba(0,212,255,.08);

}

/*==================================================
FEATURE ICON
==================================================*/

.feature-box span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    border-radius:50%;

    background:rgba(0,212,255,.12);

}

/*==================================================
TIMELINE DOT
==================================================*/

.timeline-item{

    position:relative;

}

.timeline-item::before{

    content:"";

    position:absolute;

    left:111px;

    top:10px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:0 0 20px rgba(0,212,255,.6);

}

/*==================================================
IMAGE BORDER
==================================================*/

.gallery-item{

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

}

.gallery-item:hover{

    border-color:rgba(0,212,255,.4);

}

/*==================================================
STAT BOX
==================================================*/

.stat-box{

    overflow:hidden;

    position:relative;

}

.stat-box::before{

    content:"";

    position:absolute;

    width:100%;

    height:4px;

    left:0;

    top:0;

    background:linear-gradient(90deg,var(--primary),transparent);

}

/*==================================================
VIDEO
==================================================*/

.video-wrapper{

    position:relative;

}

.video-wrapper::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:30px;

    background:linear-gradient(

    135deg,

    rgba(0,212,255,.35),

    transparent,

    rgba(0,212,255,.18)

    );

    z-index:-1;

}

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

.contact-form input::placeholder,
.contact-form textarea::placeholder{

    color:#8c94a2;

}

.contact-form input:hover,
.contact-form textarea:hover{

    border-color:rgba(0,212,255,.3);

}

/*==================================================
SOCIAL
==================================================*/

.footer-social a i{

    transition:.4s;

}

.footer-social a:hover i{

    transform:scale(1.25);

}

/*==================================================
BACKGROUND NOISE
==================================================*/

body::after{

    content:"";

    position:fixed;

    inset:0;

    background-image:url("https://www.transparenttextures.com/patterns/asfalt-dark.png");

    opacity:.025;

    pointer-events:none;

    z-index:9999;

}

/*==================================================
SMOOTH TRANSITIONS
==================================================*/

*{

    transition:

    color .3s,

    border-color .3s,

    background-color .3s;

}
/*==================================================
ADVANCED PREMIUM EFFECTS
==================================================*/

/* Animated Border */

.border-animation{

    position:relative;

    overflow:hidden;

}

.border-animation::before{

    content:"";

    position:absolute;

    inset:-2px;

    background:conic-gradient(

        from 0deg,

        transparent,

        rgba(0,212,255,.6),

        transparent,

        rgba(255,255,255,.25),

        transparent

    );

    animation:borderRotate 6s linear infinite;

    z-index:-2;

}

.border-animation::after{

    content:"";

    position:absolute;

    inset:2px;

    background:#090b0f;

    border-radius:inherit;

    z-index:-1;

}

@keyframes borderRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*===============================================

Glow Text

================================================*/

.glow-text{

    color:white;

    text-shadow:

    0 0 10px rgba(0,212,255,.3),

    0 0 25px rgba(0,212,255,.25),

    0 0 45px rgba(0,212,255,.15);

}

/*===============================================

Glass Panel

================================================*/

.glass-panel{

    background:

    linear-gradient(

    135deg,

    rgba(255,255,255,.06),

    rgba(255,255,255,.02)

    );

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

    backdrop-filter:blur(35px);

    border-radius:30px;

    box-shadow:

    0 20px 60px rgba(0,0,0,.35);

}

/*===============================================

Floating Dots

================================================*/

.floating-dot{

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:

    0 0 20px rgba(0,212,255,.8);

    animation:floatingDot 8s infinite ease-in-out;

}

@keyframes floatingDot{

    0%{

        transform:translateY(0);

        opacity:.2;

    }

    50%{

        transform:translateY(-35px);

        opacity:1;

    }

    100%{

        transform:translateY(0);

        opacity:.2;

    }

}

/*===============================================

Section Glow

================================================*/

.section{

    overflow:hidden;

}

.section::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(0,212,255,.06),

    transparent 70%);

    top:-300px;

    right:-300px;

    pointer-events:none;

}

/*===============================================

Product Rotation

================================================*/

.product-view img{

    animation:productFloat 10s ease-in-out infinite;

}

@keyframes productFloat{

    0%{

        transform:

        rotate(-2deg)

        translateY(0);

    }

    50%{

        transform:

        rotate(2deg)

        translateY(-18px);

    }

    100%{

        transform:

        rotate(-2deg)

        translateY(0);

    }

}

/*===============================================

Button Light

================================================*/

.btn-primary{

    overflow:hidden;

}

.btn-primary span{

    position:relative;

    z-index:2;

}

.btn-primary::after{

    content:"";

    position:absolute;

    width:100px;

    height:300%;

    left:-150px;

    top:-100%;

    background:

    rgba(255,255,255,.4);

    transform:rotate(30deg);

    animation:buttonLight 5s infinite;

}

@keyframes buttonLight{

    0%{

        left:-150px;

    }

    30%{

        left:150%;

    }

    100%{

        left:150%;

    }

}

/*===============================================

Technology Card Shadow

================================================*/

.technology-box:hover{

    box-shadow:

    0 25px 70px rgba(0,0,0,.45),

    0 0 40px rgba(0,212,255,.15);

}

/*===============================================

Gallery Overlay

================================================*/

.gallery-item .overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    transparent,

    rgba(0,0,0,.75));

    display:flex;

    justify-content:flex-end;

    flex-direction:column;

    padding:35px;

    opacity:0;

    transition:.5s;

}

.gallery-item:hover .overlay{

    opacity:1;

}

.gallery-item h3{

    font-size:24px;

    margin-bottom:10px;

}

.gallery-item p{

    color:#ddd;

    line-height:1.6;

}

/*===============================================

Footer Gradient

================================================*/

footer{

    background:

    linear-gradient(

    180deg,

    #07080b,

    #050608,

    #000);

}
/*==================================================
SCROLL TOP
==================================================*/

.scrollTop{

position:fixed;

right:35px;

bottom:35px;

width:58px;

height:58px;

border:none;

border-radius:50%;

background:linear-gradient(135deg,var(--primary),var(--gold-light));

color:#111;

font-size:24px;

cursor:pointer;

opacity:0;

pointer-events:none;

transform:translateY(40px);

transition:.4s;

z-index:999;

}

.scrollTop.show{

opacity:1;

pointer-events:auto;

transform:translateY(0);

}

.scrollTop:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,212,255,.35);

}

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

.menu-toggle{

display:none;

width:50px;

height:50px;

cursor:pointer;

justify-content:center;

align-items:center;

flex-direction:column;

gap:6px;

}

.menu-toggle span{

width:28px;

height:2px;

background:#fff;

transition:.35s;

}

@media(max-width:992px){

.menu-toggle{

display:flex;

}

nav ul{

flex-direction:column;

gap:30px;

}

}
/*==================================================
ACTIVE ANIMATION
==================================================*/

.about-card,
.technology-box,
.feature-box,
.gallery-item,
.stat-box{

opacity:0;

transform:translateY(70px);

transition:

1s cubic-bezier(.2,.8,.2,1);

}

.about-card.active,
.technology-box.active,
.feature-box.active,
.gallery-item.active,
.stat-box.active{

opacity:1;

transform:translateY(0);

}

/*==================================================
LOGO ROTATION
==================================================*/

.logo img{

transition:.3s linear;

transform-origin:center;

}

/*==================================================
PREMIUM TITLE
==================================================*/

.section-header h2 span{

display:inline-block;

}

/*==================================================
HERO BACKGROUND ANIMATION
==================================================*/

.hero-background{

position:absolute;

inset:0;

overflow:hidden;

z-index:-1;

}

.hero-background::before{

content:"";

position:absolute;

width:1200px;

height:1200px;

left:50%;

top:50%;

transform:translate(-50%,-50%);

border-radius:50%;

border:1px solid rgba(0,212,255,.08);

animation:rotateSlow 60s linear infinite;

}

.hero-background::after{

content:"";

position:absolute;

width:850px;

height:850px;

left:50%;

top:50%;

transform:translate(-50%,-50%);

border-radius:50%;

border:1px dashed rgba(0,212,255,.15);

animation:rotateReverse 35s linear infinite;

}
/*==================================================
LIGHTBOX
==================================================*/

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    pointer-events:none;

    transition:.4s;

    z-index:999999;

}

.lightbox.show{

    opacity:1;

    pointer-events:auto;

}

.lightbox img{

    max-width:85%;

    max-height:85%;

    border-radius:18px;

    box-shadow:

    0 0 80px rgba(0,0,0,.8);

    transform:scale(.8);

    transition:.4s;

}

.lightbox.show img{

    transform:scale(1);

}

.lightbox-close{

    position:absolute;

    top:35px;

    right:45px;

    font-size:60px;

    color:white;

    cursor:pointer;

    transition:.3s;

}

.lightbox-close:hover{

    color:var(--primary);

    transform:rotate(90deg);

}
/*==================================================
HERO VIDEO
==================================================*/

.hero-video{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:-3;

}

.hero-video video{

    width:100%;

    height:100%;

    object-fit:cover;

    filter:

    brightness(.18)

    contrast(1.2)

    saturate(1.2);

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(5,6,8,.55),

        rgba(5,6,8,.82)

    );

    z-index:-2;

}
/*==================================================
PLASMA CURSOR TAIL
==================================================*/

/*==================================================
3D HAND
==================================================*/

#hand3D{

width:100%;

height:700px;

position:relative;

}

#hand3D canvas{

width:100% !important;

height:100% !important;

display:block;

}

.hero-right{

display:flex;

justify-content:center;

align-items:center;

}
/*==================================================
3D CANVAS EFFECT
==================================================*/

#hand3D{

    position:relative;

    width:100%;

    height:700px;

    display:flex;

    justify-content:center;

    align-items:center;

}

#hand3D canvas{

    filter:
        drop-shadow(0 0 50px rgba(0,212,255,.25))
        drop-shadow(0 0 100px rgba(0,212,255,.15));

}
/*==================================================
HERO CONTENT
==================================================*/

.hero-left>*{

    opacity:0;

    transform:translateY(50px);

}

.hero-left .tag{

    animation:fadeUp .8s forwards .3s;

}

.hero-left h1{

    animation:fadeUp 1s forwards .6s;

}

.hero-left p{

    animation:fadeUp 1s forwards .9s;

}

.hero-buttons{

    animation:fadeUp 1s forwards 1.2s;

}

@keyframes fadeUp{

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*==================================================
ANIMATED BACKGROUND
==================================================*/

.hero-bg-lines{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:-2;

}

.hero-bg-lines span{

    position:absolute;

    display:block;

    width:1px;

    height:200px;

    background:linear-gradient(

    transparent,

    rgba(0,212,255,.18),

    transparent);

    animation:lineMove linear infinite;

}

@keyframes lineMove{

    from{

        transform:translateY(-200px);

    }

    to{

        transform:translateY(120vh);

    }

}
/*==================================================
SCROLL INDICATOR
==================================================*/

.scroll-indicator{

position:absolute;

left:50%;

bottom:30px;

transform:translateX(-50%);

width:30px;

height:55px;

border:2px solid rgba(255,255,255,.3);

border-radius:20px;

display:flex;

justify-content:center;

padding-top:8px;

}

.scroll-indicator span{

width:5px;

height:10px;

background:var(--primary);

border-radius:20px;

animation:scrollWheel 2s infinite;

}

@keyframes scrollWheel{

0%{

transform:translateY(0);

opacity:1;

}

100%{

transform:translateY(18px);

opacity:0;

}

}
/*==================================================
TECH CARD PREMIUM
==================================================*/

.technology-box{

    position:relative;

    overflow:hidden;

    cursor:pointer;

    transform-style:preserve-3d;

}

.technology-box::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:radial-gradient(

        circle,

        rgba(0,212,255,.18),

        transparent 70%

    );

    left:var(--x);

    top:var(--y);

    transform:translate(-50%,-50%);

    opacity:0;

    transition:.3s;

    pointer-events:none;

}

.technology-box:hover::before{

    opacity:1;

}

.technology-box h3{

    transition:.4s;

}

.technology-box:hover h3{

    color:var(--primary);

}

.technology-box p{

    transition:.4s;

}

.technology-box:hover p{

    color:#fff;

}
/*==================================================
ABOUT CARD
==================================================*/

.about-card{

transition:.45s;

}

.about-card:hover{

transform:

translateY(-12px)

scale(1.03);

box-shadow:

0 30px 80px rgba(0,0,0,.4),

0 0 40px rgba(0,212,255,.12);

}

.about-card h3{

transition:.4s;

}

.about-card:hover h3{

color:var(--primary);

}
/*==================================================
GALLERY
==================================================*/

.gallery-item{

overflow:hidden;

border-radius:24px;

}

.gallery-item img{

transition:1s;

}

.gallery-item:hover img{

transform:

scale(1.15)

rotate(2deg);

}
/*==================================================
BUTTON GLOW
==================================================*/

.btn-primary{

box-shadow:

0 0 35px rgba(0,212,255,.15);

}

.btn-primary:hover{

box-shadow:

0 0 70px rgba(0,212,255,.35);

}
.stat-box{

transition:.45s;

}

.stat-box:hover{

transform:

translateY(-10px);

box-shadow:

0 30px 60px rgba(0,0,0,.45);

}
/*==================================================
ROADMAP
==================================================*/

.timeline{

position:relative;

margin-top:80px;

padding-left:80px;

}

.timeline::before{

content:"";

position:absolute;

left:30px;

top:0;

bottom:0;

width:2px;

background:linear-gradient(

transparent,

var(--primary),

transparent

);

}

.timeline-item{

display:flex;

align-items:flex-start;

gap:40px;

margin-bottom:70px;

position:relative;

}

.timeline-year{

min-width:80px;

font-size:32px;

font-weight:700;

color:var(--primary);

}

.timeline-content{

padding:35px;

border-radius:22px;

transition:.4s;

flex:1;

}

.timeline-content:hover{

transform:translateY(-8px);

box-shadow:

0 25px 60px rgba(0,0,0,.4);

}

.timeline-content h3{

margin-bottom:15px;

}

.timeline-content p{

line-height:1.8;

color:#cfd3da;

}
/*==================================================
COUNTER
==================================================*/

.counter{

font-size:72px;

font-weight:700;

color:var(--primary);

margin-bottom:12px;

}

.stat-box{

text-align:center;

padding:45px;

border-radius:24px;

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

}

.stat-box p{

color:#bfc7d4;

font-size:18px;

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

footer{

padding:120px 0 40px;

text-align:center;

}

.footer-logo img{

width:110px;

margin-bottom:25px;

}

.footer-logo h2{

font-size:34px;

margin-bottom:10px;

}

.footer-logo p{

color:#999;

margin-bottom:40px;

}

.footer-menu{

display:flex;

justify-content:center;

gap:35px;

margin-bottom:45px;

flex-wrap:wrap;

}

.footer-menu a{

color:#ccc;

transition:.3s;

}

.footer-menu a:hover{

color:var(--primary);

}

.footer-social{

display:flex;

justify-content:center;

gap:20px;

margin-bottom:45px;

}

.footer-social a{

width:55px;

height:55px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

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

font-size:22px;

transition:.4s;

}

.footer-social a:hover{

background:var(--primary);

color:#111;

transform:translateY(-6px);

}

.copyright{

color:#777;

}
/*==================================================
PREMIUM HERO PRODUCT VIDEO
==================================================*/

.hero-product-video{

    position:relative;

    width:70%;

    max-width:450px;

    aspect-ratio:9/16;

    overflow:hidden;

    border-radius:32px;

    background:#050608;

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

    backdrop-filter:blur(20px);

    box-shadow:
        0 40px 120px rgba(0,0,0,.55),
        0 0 50px rgba(0,212,255,.12);

    animation:videoGlow 6s ease-in-out infinite;

}

/* Altın çerçeve efekti */

.hero-product-video::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:32px;

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

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.08),
        inset 0 -1px 1px rgba(0,0,0,.4);

    pointer-events:none;

}

/* Dönen halka */

.hero-product-video::after{

    content:"";

    position:absolute;

    width:120%;

    height:120%;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    background:radial-gradient(
        circle,
        rgba(0,212,255,.10),
        transparent 70%
    );

    filter:blur(80px);

    z-index:-1;

    pointer-events:none;

}

/* Video */

.hero-product-video video{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    border-radius:30px;

}

/* Hover */

.hero-product-video:hover video{

    transform:scale(1.02);

}


@keyframes videoGlow{

    0%,100%{

        box-shadow:
            0 40px 120px rgba(0,0,0,.55),
            0 0 35px rgba(0,212,255,.10);

    }

    50%{

        box-shadow:
            0 40px 120px rgba(0,0,0,.55),
            0 0 70px rgba(0,212,255,.20);

    }

}

/*==================================================
PRODUCT HEADER
==================================================*/

#product .section-header{

    text-align:center;

    max-width:800px;

    margin:0 auto 60px;

}

#product .section-header p{

    text-align:center;

    margin:20px auto 0;

}
#cursorCanvas{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:9999;

}
/*==================================================
MOBILE
==================================================*/

@media (max-width:768px){

    .product-grid,
    .features-grid,
    .stats-grid,
    .roadmap-grid,
    .contact-grid{

        grid-template-columns:1fr !important;

    }

    .product-card,
    .feature-card,
    .stat-card,
    .roadmap-card,
    .contact-card{

        width:100% !important;

        max-width:100% !important;

        min-width:0 !important;

    }

}
/*==================================================
MOBILE NAVBAR
==================================================*/

.menu-toggle{
    display:none;
    width:42px;
    height:42px;
    position:relative;
    cursor:pointer;
    z-index:10001;
}

.menu-toggle span{
    position:absolute;
    left:8px;
    width:26px;
    height:2px;
    background:var(--white);
    border-radius:50px;
    transition:.35s;
}

.menu-toggle span:nth-child(1){ top:12px; }
.menu-toggle span:nth-child(2){ top:20px; }
.menu-toggle span:nth-child(3){ top:28px; }

.menu-toggle.active span:nth-child(1){
    transform:rotate(45deg);
    top:20px;
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:rotate(-45deg);
    top:20px;
}

@media (max-width:992px){

    .menu-toggle{
        display:block;
    }

    nav{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100vh;

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

        background:rgba(3,7,18,.98);
        backdrop-filter:blur(25px);

        transform:translateX(100%);
        opacity:0;
        visibility:hidden;

        transition:transform .45s, opacity .45s;

        z-index:9999;
    }

    nav.active{
        transform:translateX(0);
        opacity:1;
        visibility:visible;
    }

    nav ul{
        display:flex;
        flex-direction:column;
        gap:35px;
        padding:0;
        margin:0;
        list-style:none;
        text-align:center;
    }

    nav ul li a{
        font-size:1.4rem;
        font-weight:600;
    }
}

body.menu-open{
    overflow:hidden;
}
/*==================================================
ROADMAP MOBILE FIX
==================================================*/

@media(max-width:768px){

    .timeline{

        width:100%;
        padding:0;
    }


    .timeline-item{

        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        position:relative;
        left:0;
        right:0;
        transform:none;
    }


    .timeline-content{

        width:100%;
        max-width:100%;
        margin:0;
        left:0;
        right:0;
        transform:none;
        box-sizing:border-box;
    }


    .timeline-year{

        position:static;
        margin-bottom:20px;
    }

}
.product-gallery{

    display:grid;

    grid-template-columns:repeat(2, minmax(0, 400px));

    justify-content:center;

    gap:25px;

    margin-top:50px;
    
}

.product-image{

    width:100%;

    max-width:400px;

    overflow:hidden;

    border-radius:24px;

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

    background:var(--background3);

}

.product-image img{

    width:100%;
    height:100%;       /* Görseli kart yüksekliğine zorlar */
    object-fit:cover;
    display:block;

    transition:.5s ease;

}

.product-image:hover img{

    transform:scale(1.03);

}

.product-video{

    margin-top:100px;

}

@media(max-width:768px){

    .product-gallery{

        grid-template-columns:1fr;

        gap:18px;

    }

    .product-video{

        margin-top:70px;

    }

}
.logo{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

}

.logo img{

    width:42px;

    height:42px;

    object-fit:contain;

}

.logo span{

    color:var(--white);

    font-family:'Space Grotesk',sans-serif;

    font-size:22px;

    font-weight:700;

    letter-spacing:.5px;

    transition:.3s;

}

.logo:hover span{

    color:var(--primary);

}
/* Disable cursor effect on mobile */
@media(max-width:768px){

    #cursorCanvas{
        display:none;
    }

    .product-gallery{

        grid-template-columns:1fr;

        gap:18px;

    }

    .product-image{

        max-width:100%;

    }

    .product-video{

        margin-top:70px;

    }
    .logo img{

    width:36px;

    height:36px;

    }

    .logo span{

        font-size:20px;

    }

}