/* ==========================================================
   TK TECH V2
========================================================== */

:root {

    --bg:
        #030607;

    --panel:
        #070c0f;

    --cyan:
        #6fe3fb;

    --cyan-bright:
        #baf5ff;

    --text:
        #f3f8f9;

    --muted:
        #7a8b91;

    --border:
        rgba(255,255,255,.07);

    --border-cyan:
        rgba(111,227,251,.16);

    --shell:
        1280px;

    --ease:
        cubic-bezier(.2,.7,.2,1);

}


/* ==========================================================
   RESET
========================================================== */

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    overflow-x: hidden;

    color:
        var(--text);

    background:
        var(--bg);

    font-family:
        "Manrope",
        sans-serif;

    -webkit-font-smoothing:
        antialiased;
}


a {
    color: inherit;

    text-decoration: none;
}


button {
    font: inherit;
}


img {
    display: block;

    max-width: 100%;
}


.v2-shell {
    width:
        min(
            var(--shell),
            calc(100% - 48px)
        );

    margin-inline:
        auto;
}



/* ==========================================================
   GLOBAL ATMOSPHERE
========================================================== */

.v2-page-atmosphere {
    position: fixed;

    z-index: -10;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    background:
        #030607;
}


.v2-aurora {
    position: absolute;

    border-radius: 50%;

    filter:
        blur(130px);

    opacity: .7;

    animation:
        v2Aurora
        15s
        ease-in-out
        infinite alternate;
}


.v2-aurora-one {
    width: 650px;
    height: 650px;

    right: -200px;
    top: 70px;

    background:
        rgba(40, 183, 220, .12);
}


.v2-aurora-two {
    width: 570px;
    height: 570px;

    left: -290px;
    top: 550px;

    background:
        rgba(52, 163, 197, .075);

    animation-delay:
        -5s;
}


.v2-aurora-three {
    width: 450px;
    height: 450px;

    left: 45%;
    top: -270px;

    background:
        rgba(92, 222, 251, .055);

    animation-delay:
        -9s;
}


@keyframes v2Aurora {

    from {
        transform:
            translate3d(
                -25px,
                -15px,
                0
            )
            scale(.92);
    }

    to {
        transform:
            translate3d(
                45px,
                35px,
                0
            )
            scale(1.1);
    }

}


.v2-grid {
    position: absolute;

    inset: 0;

    opacity: .13;

    background-image:

        linear-gradient(
            rgba(92,220,250,.04) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(92,220,250,.04) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

    mask-image:
        linear-gradient(
            180deg,
            black,
            transparent 80%
        );
}


.v2-noise {
    position: absolute;

    inset: 0;

    opacity: .14;

    background-image:

        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.008) 0,
            rgba(255,255,255,.008) 1px,
            transparent 1px,
            transparent 4px
        );

}



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

.v2-header {
    position: absolute;

    z-index: 1000;

    top: 0;
    left: 0;

    width: 100%;

    transition:
        background .3s ease,
        border-color .3s ease,
        backdrop-filter .3s ease;
}


.v2-header.scrolled {
    position: fixed;

    border-bottom:
        1px solid
        rgba(111,227,251,.08);

    background:
        rgba(3,6,7,.82);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);
}


.v2-nav {
    min-height: 92px;

    display: flex;
    align-items: center;

    gap: 35px;
}


.v2-brand {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-right: auto;
}


.v2-brand-mark {
    width: 47px;
    height: 47px;

    display: grid;
    place-items: center;

    color:
        #a9efff;

    border:
        1px solid
        rgba(111,227,251,.22);

    background:
        linear-gradient(
            145deg,
            rgba(111,227,251,.09),
            rgba(255,255,255,.012)
        );

    clip-path:
        polygon(
            25% 5%,
            75% 5%,
            95% 25%,
            95% 75%,
            75% 95%,
            25% 95%,
            5% 75%,
            5% 25%
        );

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

    font-size: 14px;

    font-weight: 700;

    box-shadow:
        inset 0 0 25px
        rgba(111,227,251,.04);
}


.v2-brand-copy {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.v2-brand-copy strong {
    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 15px;

    letter-spacing:
        1.6px;
}


.v2-brand-copy small {
    color:
        #617278;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        1.5px;
}


.v2-nav-links {
    display: flex;

    gap: 31px;
}


.v2-nav-links a {
    position: relative;

    color:
        #87969b;

    font-size:
        11px;

    font-weight:
        600;

    transition:
        color .25s ease;
}


.v2-nav-links a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -11px;

    width: 0;
    height: 1px;

    transform:
        translateX(-50%);

    background:
        var(--cyan);

    box-shadow:
        0 0 8px
        rgba(111,227,251,.75);

    transition:
        width .25s ease;
}


.v2-nav-links a:hover {
    color: #fff;
}


.v2-nav-links a:hover::after {
    width: 100%;
}


.v2-nav-cta {
    min-height: 46px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    border: 1px solid rgba(37, 211, 102, .34);
    border-radius: 999px;
    background: linear-gradient(135deg, #2fd96b, #25d366);
    box-shadow:
        0 14px 34px rgba(37, 211, 102, .18),
        inset 0 1px 0 rgba(255,255,255,.22);
    font-size: 10px;
    font-weight: 800;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}

.v2-nav-cta span {
    color: #ffffff;
    font-size: 14px;
}

.v2-nav-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 40px rgba(37, 211, 102, .24),
        inset 0 1px 0 rgba(255,255,255,.28);
    filter: brightness(1.03);
}


/* ==========================================================
   MOBILE NAV
========================================================== */

.v2-menu-button {
    position: relative;

    width: 44px;
    height: 44px;

    display: none;

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

    border-radius:
        10px;

    background:
        rgba(255,255,255,.02);
}


.v2-menu-button span {
    position: absolute;

    left: 12px;

    width: 18px;
    height: 1px;

    background:
        #d3e2e6;
}


.v2-menu-button span:first-child {
    top: 17px;
}


.v2-menu-button span:last-child {
    top: 25px;
}


.v2-mobile-menu {
    display: none;
}



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

.v2-hero {
    min-height:
        100vh;

    padding:
        120px 0 55px;

    display: flex;
    align-items: center;
}


.v2-hero-panel {
    position: relative;
    min-height: 690px;
    padding: 75px 70px;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(500px, .98fr);
    align-items: center;
    gap: 70px;
    overflow: hidden;
    border: 1px solid rgba(115,230,255,.12);
    border-radius: 34px;
    background:
        radial-gradient(
            circle at 72% 48%,
            rgba(77, 224, 255, .16) 0%,
            rgba(77, 224, 255, .08) 18%,
            rgba(77, 224, 255, 0) 56%
        ),
        radial-gradient(
            circle at 18% 85%,
            rgba(36, 120, 145, .09) 0%,
            rgba(36, 120, 145, 0) 42%
        ),
        linear-gradient(
            145deg,
            rgba(8,14,17,.98),
            rgba(2,6,8,.98)
        );
    box-shadow:
        0 65px 150px rgba(0,0,0,.58),
        0 0 90px rgba(57,210,246,.03),
        inset 0 1px 0 rgba(255,255,255,.035);
}


/* ==========================================================
   HERO DECORATION
========================================================== */

.v2-circuit-lines {
    position: absolute;

    z-index: 0;

    right: -80px;
    top: -60px;

    width: 650px;
    height: 650px;

    opacity: .19;

    pointer-events: none;

    background:

        linear-gradient(
            115deg,
            transparent 0 35%,
            rgba(111,227,251,.11) 35.15%,
            transparent 35.3% 100%
        ),

        linear-gradient(
            135deg,
            transparent 0 56%,
            rgba(111,227,251,.08) 56.1%,
            transparent 56.3%
        ),

        linear-gradient(
            25deg,
            transparent 0 63%,
            rgba(111,227,251,.07) 63.1%,
            transparent 63.3%
        );
}


.v2-panel-light {
    position: absolute;
    z-index: 0;
    width: 380px;
    height: 380px;
    right: 120px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(87,226,255,.18) 0%,
            rgba(87,226,255,.08) 36%,
            rgba(87,226,255,0) 72%
        );
    filter: blur(58px);
    opacity: .88;
    pointer-events: none;
}

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

.v2-hero-content {
    position: relative;

    z-index: 10;

    max-width:
        650px;
}


.v2-kicker {
    margin-bottom:
        26px;

    display: flex;
    align-items: center;

    gap: 10px;

    color:
        #7d8d92;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        2.3px;
}


.v2-kicker-dot {
    width: 6px;
    height: 6px;

    border-radius:
        50%;

    background:
        #7aeaff;

    box-shadow:
        0 0 7px #7aeaff,
        0 0 18px
        rgba(122,234,255,.55);
}


.v2-kicker i {
    width: 30px;
    height: 1px;

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


.v2-hero h1 {
    max-width:
        670px;

    color:
        #f7fbfc;

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

    font-size:
        clamp(
            55px,
            5.2vw,
            80px
        );

    line-height:
        .96;

    letter-spacing:
        -4.4px;

    font-weight:
        600;
}


.v2-hero h1 span {
    display: block;

    margin-top:
        11px;

    color:
        transparent;

    background:
        linear-gradient(
            100deg,
            #eefcff,
            #a8efff 28%,
            #61dcf8 66%,
            #baf5ff
        );

    background-size:
        170% 100%;

    background-clip:
        text;

    -webkit-background-clip:
        text;

    animation:
        v2HeroText
        7s
        ease-in-out
        infinite alternate;
}


@keyframes v2HeroText {

    from {
        background-position:
            0% 50%;
    }

    to {
        background-position:
            100% 50%;
    }

}


.v2-hero-description {
    max-width:
        580px;

    margin-top:
        28px;

    color:
        #849399;

    font-size:
        14px;

    line-height:
        1.85;
}



/* ==========================================================
   BUTTONS
========================================================== */

.v2-hero-actions {
    margin-top:
        35px;

    display: flex;

    gap:
        11px;
}


.v2-button {
    position: relative;

    min-height:
        55px;

    padding:
        0 22px;

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

    gap:
        18px;

    overflow:
        hidden;

    border-radius:
        11px;

    font-size:
        10px;

    font-weight:
        800;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.v2-button b {
    font-size:
        15px;
}


.v2-button-primary {
    color:
        #041014;

    background:
        linear-gradient(
            135deg,
            #bdf7ff,
            #61dffb
        );

    box-shadow:
        0 13px 36px
        rgba(73,217,250,.16);
}


.v2-button-primary:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 18px 47px
        rgba(73,217,250,.24);
}


.v2-button-secondary {
    color:
        #ccd8db;

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

    background:
        rgba(255,255,255,.025);
}


.v2-button-secondary:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(111,227,251,.22);
}



/* ==========================================================
   HERO META
========================================================== */

.v2-hero-meta {
    max-width:
        580px;

    margin-top:
        44px;

    padding-top:
        23px;

    display: grid;

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

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


.v2-hero-meta > div {
    display: flex;
    align-items: center;

    gap:
        11px;
}


.v2-hero-meta span {
    color:
        #536970;

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

    font-size:
        7px;
}


.v2-hero-meta p {
    display: flex;
    flex-direction: column;

    color:
        #65767c;

    font-size:
        8px;

    line-height:
        1.45;
}


.v2-hero-meta strong {
    color:
        #a5b5ba;

    font-weight:
        700;
}



/* ==========================================================
   TK CORE STAGE
========================================================== */

.v2-core-stage {
    position: relative;
    z-index: 8;
    width: 520px;
    height: 520px;
    margin-inline: auto;
    display: grid;
    place-items: center;
    perspective: 1400px;
    transform-style: preserve-3d;
    overflow: visible;
}



/* ==========================================================
   CORE BACKLIGHT
========================================================== */

.v2-core-backlight {
    position: absolute;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(98,230,255,.22) 0%,
            rgba(98,230,255,.11) 38%,
            rgba(98,230,255,0) 74%
        );
    filter: blur(42px);
    animation: v2Backlight 6s ease-in-out infinite;
}


@keyframes v2Backlight {

    0%,
    100% {
        opacity: .6;

        transform:
            scale(.9);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.08);
    }

}



/* ==========================================================
   RINGS
========================================================== */

.v2-core-ring {
    position: absolute;

    border-radius:
        50%;

    pointer-events:
        none;
}


.v2-ring-1 {
    width:
        330px;

    height:
        330px;

    border:
        1px solid
        rgba(111,227,251,.11);

    animation:
        v2RingCW
        32s
        linear
        infinite;
}


.v2-ring-2 {
    width:
        405px;

    height:
        405px;

    border:
        1px dashed
        rgba(111,227,251,.075);

    animation:
        v2RingCCW
        45s
        linear
        infinite;
}


.v2-ring-3 {
    width:
        485px;

    height:
        485px;

    border:
        1px dotted
        rgba(111,227,251,.045);

    animation:
        v2RingCW
        68s
        linear
        infinite;
}


.v2-ring-1::before,
.v2-ring-2::before,
.v2-ring-3::before {
    content: "";

    position: absolute;

    border-radius:
        50%;

    background:
        #83ecff;

    box-shadow:
        0 0 8px
        rgba(131,236,255,.9),

        0 0 22px
        rgba(131,236,255,.35);
}


.v2-ring-1::before {
    width: 6px;
    height: 6px;

    left: -3px;
    top: 50%;
}


.v2-ring-2::before {
    width: 5px;
    height: 5px;

    top: -3px;
    left: 50%;
}


.v2-ring-3::before {
    width: 4px;
    height: 4px;

    right: 11%;
    bottom: 13%;
}


@keyframes v2RingCW {

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes v2RingCCW {

    to {
        transform:
            rotate(-360deg);
    }

}



/* ==========================================================
   LOGO DEVICE
========================================================== */

.v2-logo-device {
    position: relative;

    z-index: 20;

    width:
        275px;

    height:
        275px;

    padding:
        11px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(125,232,255,.22);

    border-radius:
        31px;

    background:
        rgba(5,10,12,.78);

    box-shadow:

        0 48px 110px
        rgba(0,0,0,.58),

        0 0 90px
        rgba(65,218,252,.08),

        inset 0 1px 0
        rgba(255,255,255,.055);

    transform:
        perspective(1200px)
        rotateY(-4deg)
        rotateX(2deg);

    transition:
        transform .2s ease-out;
}


.v2-logo-device img {
    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    object-fit:
        cover;

    border-radius:
        23px;

    filter:
        saturate(.86)
        brightness(.88)
        contrast(1.07);
}


.v2-device-glow {
    position: absolute;

    z-index: 1;

    inset:
        25px;

    background:
        rgba(72,220,252,.14);

    filter:
        blur(55px);
}


.v2-device-scan {
    position: absolute;

    z-index: 5;

    left: 10%;
    right: 10%;

    top: 18%;

    height:
        1px;

    opacity: 0;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            #a4f2ff,
            transparent
        );

    box-shadow:
        0 0 13px
        rgba(111,227,251,.8);

    animation:
        v2Scanner
        5s
        ease-in-out
        infinite;
}


@keyframes v2Scanner {

    0%,
    12% {
        top: 16%;

        opacity: 0;
    }

    30% {
        opacity: .5;
    }

    75% {
        opacity: .35;
    }

    90%,
    100% {
        top: 84%;

        opacity: 0;
    }

}


.v2-device-status {
    position: absolute;

    z-index: 6;

    left: 50%;
    bottom: 17px;

    transform:
        translateX(-50%);

    padding:
        7px 10px;

    display: flex;
    align-items: center;

    gap:
        7px;

    color:
        #91a7ad;

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

    border-radius:
        7px;

    background:
        rgba(3,7,8,.73);

    backdrop-filter:
        blur(12px);

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    white-space:
        nowrap;
}


.v2-device-status span {
    width: 5px;
    height: 5px;

    border-radius:
        50%;

    background:
        #65e9b9;

    box-shadow:
        0 0 8px
        rgba(101,233,185,.8);
}



/* ==========================================================
   SERVICE NODES
========================================================== */

.v2-service-node {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 12;
    min-width: 138px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(111,227,251,.13);
    border-radius: 10px;
    background: rgba(5,10,12,.78);
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
    box-shadow:
        0 14px 35px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.025);
    transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
    will-change: transform;
}


.v2-service-node:hover {
    border-color: rgba(111,227,251,.34);
    background: rgba(9,20,23,.91);
    box-shadow:
        0 18px 42px rgba(0,0,0,.4),
        0 0 18px rgba(111,227,251,.08);
}


.v2-service-node > span {
    width:
        27px;

    height:
        27px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    color:
        #76e7ff;

    border:
        1px solid
        rgba(111,227,251,.12);

    border-radius:
        7px;

    background:
        rgba(111,227,251,.025);

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

    font-size:
        7px;
}


.v2-service-node > div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.v2-service-node small {
    color:
        #455b62;

    font-size:
        5.5px;

    font-weight:
        800;

    letter-spacing:
        1.2px;
}


.v2-service-node strong {
    color:
        #cad9dc;

    font-size:
        8px;

    white-space:
        nowrap;
}



@keyframes v2NodeFloat {

    0%,
    100% {
        translate:
            0 0;
    }

    50% {
        translate:
            0 -7px;
    }

}



/* ==========================================================
   PANEL CODE
========================================================== */

.v2-panel-code {
    position:
        absolute;

    z-index:
        3;

    right:
        26px;

    bottom:
        19px;

    color:
        rgba(103,128,136,.5);

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

    font-size:
        6px;

    letter-spacing:
        2px;
}



/* ==========================================================
   NEXT PREVIEW
========================================================== */

.v2-next-preview {
    padding:
        130px 0;

    text-align:
        center;
}


.v2-next-preview span {
    color:
        #557078;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        2.5px;
}


.v2-next-preview h2 {
    max-width:
        750px;

    margin:
        20px auto 0;

    color:
        #e9f2f4;

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

    font-size:
        clamp(
            40px,
            5vw,
            70px
        );

    line-height:
        1;

    letter-spacing:
        -3px;

    font-weight:
        500;
}


.v2-next-preview strong {
    display:
        block;

    color:
        #6edff8;

    font-weight:
        500;
}



/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1050px) {

.v2-service-node {
    display: none;
}

    .v2-nav-links,
    .v2-nav-cta {
        display:
            none;
    }


    .v2-menu-button {
        display:
            block;
    }


    .v2-hero-panel {
        grid-template-columns:
            1fr;

        gap:
            50px;

        padding:
            70px 55px;
    }


    .v2-hero-content {
        max-width:
            720px;
    }


    .v2-core-stage {
        margin-top:
            10px;
    }

}



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

@media (max-width: 650px) {

    .v2-shell {
        width:
            min(
                100% - 30px,
                var(--shell)
            );
    }


    .v2-nav {
        min-height:
            78px;
    }


    .v2-brand-mark {
        width:
            42px;

        height:
            42px;
    }


    .v2-brand-copy small {
        display:
            none;
    }


    .v2-hero {
        padding:
            95px 0 30px;
    }


    .v2-hero-panel {
        min-height:
            auto;

        padding:
            42px 23px 38px;

        border-radius:
            23px;

        gap:
            35px;
    }


    .v2-kicker {
        font-size:
            6.5px;

        letter-spacing:
            1.3px;
    }


    .v2-kicker i {
        display:
            none;
    }


    .v2-hero h1 {
        font-size:
            clamp(
                44px,
                13vw,
                60px
            );

        line-height:
            .98;

        letter-spacing:
            -3px;
    }


    .v2-hero-description {
        font-size:
            13px;
    }


    .v2-hero-actions {
        flex-direction:
            column;
    }


    .v2-button {
        width:
            100%;
    }


    .v2-hero-meta {
        grid-template-columns:
            1fr;

        gap:
            15px;
    }


    .v2-core-stage {
        width:
            100%;

        height:
            360px;
    }


    .v2-logo-device {
        width:
            215px;

        height:
            215px;

        border-radius:
            25px;
    }


    .v2-ring-1 {
        width:
            265px;

        height:
            265px;
    }


    .v2-ring-2 {
        width:
            320px;

        height:
            320px;
    }


    .v2-ring-3 {
        display:
            none;
    }


    .v2-service-node {
        display:
            none;
    }


    .v2-device-status {
        font-size:
            5px;
    }


    .v2-next-preview {
        padding:
            90px 0;
    }

}



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

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

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }

}

/* ==========================================================
   V3 / LIGHT DEFAULT + DARK MODE
========================================================== */

:root {
    --bg: #f4f8fa;
    --panel: #ffffff;
    --cyan: #168da8;
    --cyan-bright: #5dd5ee;
    --text: #132127;
    --muted: #66777e;
    --border: rgba(16, 73, 87, .12);
    --border-cyan: rgba(22, 141, 168, .18);
    color-scheme: light;
}

html[data-theme="dark"] {
    --bg: #030607;
    --panel: #070c0f;
    --cyan: #6fe3fb;
    --cyan-bright: #baf5ff;
    --text: #f3f8f9;
    --muted: #7a8b91;
    --border: rgba(255,255,255,.07);
    --border-cyan: rgba(111,227,251,.16);
    color-scheme: dark;
}

body {
    background: var(--bg);
    color: var(--text);
    transition: background-color .35s ease, color .35s ease;
}

.v2-page-atmosphere {
    background: #f4f8fa;
    transition: background-color .35s ease;
}

.v2-aurora-one {
    background: rgba(42, 182, 214, .16);
}

.v2-aurora-two {
    background: rgba(81, 176, 199, .10);
}

.v2-aurora-three {
    background: rgba(92, 222, 251, .12);
}

.v2-grid {
    opacity: .22;
    background-image:
        linear-gradient(rgba(18, 110, 132, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 110, 132, .055) 1px, transparent 1px);
}

.v2-noise {
    opacity: .08;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(8, 48, 58, .012) 0,
            rgba(8, 48, 58, .012) 1px,
            transparent 1px,
            transparent 4px
        );
}

.v2-header.scrolled {
    border-bottom: 1px solid rgba(22, 141, 168, .12);
    background: rgba(248, 252, 253, .88);
    box-shadow: 0 12px 40px rgba(25, 67, 77, .06);
}

.v2-brand-mark {
    color: #117e97;
    border-color: rgba(22, 141, 168, .24);
    background: linear-gradient(145deg, rgba(22,141,168,.10), rgba(255,255,255,.84));
    box-shadow: inset 0 0 25px rgba(22,141,168,.05);
}

.v2-brand-copy strong {
    color: #132127;
}

.v2-brand-copy small {
    color: #77878d;
}

.v2-nav-links a {
    color: #627178;
}

.v2-nav-links a:hover {
    color: #122027;
}

/* Theme switch */
.v2-theme-toggle {
    position: relative;
    width: 68px;
    height: 36px;
    padding: 0 8px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(22, 141, 168, .18);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 8px 26px rgba(28, 76, 88, .07), inset 0 1px 0 rgba(255,255,255,.9);
    color: #607178;
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.v2-theme-toggle:hover {
    border-color: rgba(22, 141, 168, .32);
    box-shadow: 0 10px 30px rgba(28, 76, 88, .10), inset 0 1px 0 rgba(255,255,255,.9);
}

.v2-theme-toggle i {
    position: absolute;
    z-index: 1;
    left: 4px;
    top: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #e3f5f9);
    box-shadow: 0 4px 12px rgba(26, 85, 99, .18);
    transition: transform .3s var(--ease), background .3s ease;
}

.v2-theme-icon {
    position: relative;
    z-index: 2;
    width: 18px;
    text-align: center;
    font-size: 13px;
    line-height: 1;
    transition: opacity .25s ease, color .25s ease;
}

.v2-theme-icon-light {
    color: #0e7188;
}

.v2-theme-icon-dark {
    color: #89979c;
}

html[data-theme="dark"] .v2-theme-toggle i {
    transform: translateX(32px);
    background: linear-gradient(145deg, #193039, #091216);
}

html[data-theme="dark"] .v2-theme-icon-light {
    color: #65767c;
}

html[data-theme="dark"] .v2-theme-icon-dark {
    color: #baf5ff;
}

/* Light hero */
.v2-hero-panel {
    border-color: rgba(24, 137, 162, .14);
    background:
        radial-gradient(circle at 72% 48%, rgba(56, 202, 233, .18) 0%, rgba(56, 202, 233, .08) 23%, rgba(56, 202, 233, 0) 58%),
        radial-gradient(circle at 18% 85%, rgba(54, 150, 174, .09) 0%, rgba(54, 150, 174, 0) 44%),
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(238,246,248,.98));
    box-shadow:
        0 45px 110px rgba(23, 70, 82, .12),
        0 0 75px rgba(57,210,246,.04),
        inset 0 1px 0 rgba(255,255,255,.94);
}

.v2-circuit-lines {
    opacity: .24;
}

.v2-panel-light {
    opacity: .62;
    background: radial-gradient(circle, rgba(46,180,208,.20) 0%, rgba(46,180,208,.08) 38%, rgba(46,180,208,0) 72%);
}

.v2-kicker {
    color: #687980;
}

.v2-kicker-dot {
    background: #169bb9;
    box-shadow: 0 0 7px rgba(22,155,185,.65), 0 0 18px rgba(22,155,185,.24);
}

.v2-hero h1 {
    color: #132127;
}

.v2-hero h1 span {
    background: linear-gradient(100deg, #19343c, #1689a3 34%, #36b7d2 68%, #0d687c);
    background-size: 170% 100%;
    background-clip: text;
    -webkit-background-clip: text;
}

.v2-hero-description {
    color: #5f7178;
}

.v2-button-secondary {
    color: #26393f;
    border-color: rgba(18, 95, 113, .14);
    background: rgba(255,255,255,.62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
}

.v2-button-secondary:hover {
    border-color: rgba(22, 141, 168, .30);
    background: rgba(255,255,255,.92);
}

.v2-hero-meta {
    border-top-color: rgba(19, 83, 98, .10);
}

.v2-hero-meta span {
    color: #70838a;
}

.v2-hero-meta p {
    color: #74858c;
}

.v2-hero-meta strong {
    color: #2b4148;
}

.v2-core-backlight {
    background: radial-gradient(circle, rgba(58,193,221,.24) 0%, rgba(58,193,221,.10) 40%, rgba(58,193,221,0) 74%);
}

.v2-ring-1 { border-color: rgba(18, 128, 153, .20); }
.v2-ring-2 { border-color: rgba(18, 128, 153, .14); }
.v2-ring-3 { border-color: rgba(18, 128, 153, .10); }

.v2-ring-1::before,
.v2-ring-2::before,
.v2-ring-3::before {
    background: #31b9d4;
    box-shadow: 0 0 8px rgba(49,185,212,.72), 0 0 22px rgba(49,185,212,.24);
}

/* Core stays intentionally darker for contrast */
.v2-logo-device {
    border-color: rgba(53, 190, 219, .28);
    background: rgba(8, 18, 22, .92);
    box-shadow: 0 35px 80px rgba(19, 60, 70, .20), 0 0 70px rgba(65,218,252,.10), inset 0 1px 0 rgba(255,255,255,.055);
}

/* Service cards: fixed layout + subtle micro movement */
.v2-service-node {
    border-color: rgba(18, 128, 153, .16);
    background: rgba(255,255,255,.86);
    box-shadow: 0 14px 35px rgba(28, 72, 82, .10), inset 0 1px 0 rgba(255,255,255,.9);
    animation: v2NodeFloat 5.4s ease-in-out infinite;
    will-change: translate;
}

.v2-service-node:hover {
    border-color: rgba(22, 141, 168, .34);
    background: rgba(255,255,255,.98);
    box-shadow: 0 18px 42px rgba(28, 72, 82, .14), 0 0 18px rgba(22,141,168,.08);
}

.v2-service-node > span {
    color: #10849e;
    border-color: rgba(22, 141, 168, .16);
    background: rgba(22,141,168,.045);
}

.v2-service-node small {
    color: #72858c;
}

.v2-service-node strong {
    color: #294047;
}

.v2-node-1 { transform: translate(-50%, -50%) translate(-202px, -144px); animation-delay: -1.0s; }
.v2-node-2 { transform: translate(-50%, -50%) translate(190px, -150px); animation-delay: -2.8s; }
.v2-node-3 { transform: translate(-50%, -50%) translate(235px, -34px); animation-delay: -4.1s; }
.v2-node-4 { transform: translate(-50%, -50%) translate(194px, 132px); animation-delay: -1.8s; }
.v2-node-5 { transform: translate(-50%, -50%) translate(-205px, 132px); animation-delay: -3.5s; }
.v2-node-6 { transform: translate(-50%, -50%) translate(-242px, -20px); animation-delay: -.4s; }

.v2-panel-code {
    color: rgba(65, 92, 100, .50);
}

.v2-next-preview span {
    color: #688087;
}

.v2-next-preview h2 {
    color: #17282e;
}

.v2-next-preview strong {
    color: #148ba5;
}

/* Mobile menu now actually opens */
.v2-mobile-menu.active {
    display: block;
    margin: 0 15px;
    padding: 12px;
    border: 1px solid rgba(22,141,168,.14);
    border-radius: 18px;
    background: rgba(250,253,254,.96);
    box-shadow: 0 22px 60px rgba(28,72,82,.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.v2-mobile-menu nav {
    display: grid;
    gap: 4px;
}

.v2-mobile-menu a {
    padding: 13px 14px;
    border-radius: 11px;
    color: #30474e;
    font-size: 12px;
    font-weight: 700;
}

.v2-mobile-menu a:hover {
    background: rgba(22,141,168,.06);
}

.v2-menu-button {
    border-color: rgba(20, 90, 106, .14);
    background: rgba(255,255,255,.62);
}

.v2-menu-button span {
    background: #334d54;
}

/* ==========================================================
   DARK THEME OVERRIDES
========================================================== */

html[data-theme="dark"] .v2-page-atmosphere { background: #030607; }
html[data-theme="dark"] .v2-aurora-one { background: rgba(40, 183, 220, .12); }
html[data-theme="dark"] .v2-aurora-two { background: rgba(52, 163, 197, .075); }
html[data-theme="dark"] .v2-aurora-three { background: rgba(92, 222, 251, .055); }
html[data-theme="dark"] .v2-grid {
    opacity: .13;
    background-image:
        linear-gradient(rgba(92,220,250,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(92,220,250,.04) 1px, transparent 1px);
}
html[data-theme="dark"] .v2-noise {
    opacity: .14;
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.008) 0, rgba(255,255,255,.008) 1px, transparent 1px, transparent 4px);
}
html[data-theme="dark"] .v2-header.scrolled {
    border-bottom-color: rgba(111,227,251,.08);
    background: rgba(3,6,7,.82);
    box-shadow: none;
}
html[data-theme="dark"] .v2-brand-mark {
    color: #a9efff;
    border-color: rgba(111,227,251,.22);
    background: linear-gradient(145deg, rgba(111,227,251,.09), rgba(255,255,255,.012));
    box-shadow: inset 0 0 25px rgba(111,227,251,.04);
}
html[data-theme="dark"] .v2-brand-copy strong { color: #f3f8f9; }
html[data-theme="dark"] .v2-brand-copy small { color: #617278; }
html[data-theme="dark"] .v2-nav-links a { color: #87969b; }
html[data-theme="dark"] .v2-nav-links a:hover { color: #fff; }
html[data-theme="dark"] .v2-theme-toggle {
    border-color: rgba(111,227,251,.12);
    background: rgba(8,15,18,.78);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="dark"] .v2-hero-panel {
    border-color: rgba(115,230,255,.12);
    background:
        radial-gradient(circle at 72% 48%, rgba(77,224,255,.16) 0%, rgba(77,224,255,.08) 18%, rgba(77,224,255,0) 56%),
        radial-gradient(circle at 18% 85%, rgba(36,120,145,.09) 0%, rgba(36,120,145,0) 42%),
        linear-gradient(145deg, rgba(8,14,17,.98), rgba(2,6,8,.98));
    box-shadow: 0 65px 150px rgba(0,0,0,.58), 0 0 90px rgba(57,210,246,.03), inset 0 1px 0 rgba(255,255,255,.035);
}
html[data-theme="dark"] .v2-panel-light {
    opacity: .88;
    background: radial-gradient(circle, rgba(87,226,255,.18) 0%, rgba(87,226,255,.08) 36%, rgba(87,226,255,0) 72%);
}
html[data-theme="dark"] .v2-kicker { color: #7d8d92; }
html[data-theme="dark"] .v2-kicker-dot {
    background: #7aeaff;
    box-shadow: 0 0 7px #7aeaff, 0 0 18px rgba(122,234,255,.55);
}
html[data-theme="dark"] .v2-hero h1 { color: #f7fbfc; }
html[data-theme="dark"] .v2-hero h1 span {
    background: linear-gradient(100deg, #eefcff, #a8efff 28%, #61dcf8 66%, #baf5ff);
    background-size: 170% 100%;
    background-clip: text;
    -webkit-background-clip: text;
}
html[data-theme="dark"] .v2-hero-description { color: #849399; }
html[data-theme="dark"] .v2-button-secondary {
    color: #ccd8db;
    border-color: rgba(255,255,255,.085);
    background: rgba(255,255,255,.025);
    box-shadow: none;
}
html[data-theme="dark"] .v2-button-secondary:hover { border-color: rgba(111,227,251,.22); background: rgba(255,255,255,.025); }
html[data-theme="dark"] .v2-hero-meta { border-top-color: rgba(255,255,255,.055); }
html[data-theme="dark"] .v2-hero-meta span { color: #536970; }
html[data-theme="dark"] .v2-hero-meta p { color: #65767c; }
html[data-theme="dark"] .v2-hero-meta strong { color: #a5b5ba; }
html[data-theme="dark"] .v2-core-backlight {
    background: radial-gradient(circle, rgba(98,230,255,.22) 0%, rgba(98,230,255,.11) 38%, rgba(98,230,255,0) 74%);
}
html[data-theme="dark"] .v2-ring-1 { border-color: rgba(111,227,251,.11); }
html[data-theme="dark"] .v2-ring-2 { border-color: rgba(111,227,251,.075); }
html[data-theme="dark"] .v2-ring-3 { border-color: rgba(111,227,251,.045); }
html[data-theme="dark"] .v2-ring-1::before,
html[data-theme="dark"] .v2-ring-2::before,
html[data-theme="dark"] .v2-ring-3::before {
    background: #83ecff;
    box-shadow: 0 0 8px rgba(131,236,255,.9), 0 0 22px rgba(131,236,255,.35);
}
html[data-theme="dark"] .v2-logo-device {
    border-color: rgba(125,232,255,.22);
    background: rgba(5,10,12,.78);
    box-shadow: 0 48px 110px rgba(0,0,0,.58), 0 0 90px rgba(65,218,252,.08), inset 0 1px 0 rgba(255,255,255,.055);
}
html[data-theme="dark"] .v2-service-node {
    border-color: rgba(111,227,251,.13);
    background: rgba(5,10,12,.78);
    box-shadow: 0 14px 35px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.025);
}
html[data-theme="dark"] .v2-service-node:hover {
    border-color: rgba(111,227,251,.34);
    background: rgba(9,20,23,.91);
    box-shadow: 0 18px 42px rgba(0,0,0,.4), 0 0 18px rgba(111,227,251,.08);
}
html[data-theme="dark"] .v2-service-node > span {
    color: #76e7ff;
    border-color: rgba(111,227,251,.12);
    background: rgba(111,227,251,.025);
}
html[data-theme="dark"] .v2-service-node small { color: #455b62; }
html[data-theme="dark"] .v2-service-node strong { color: #cad9dc; }
html[data-theme="dark"] .v2-panel-code { color: rgba(103,128,136,.5); }
html[data-theme="dark"] .v2-next-preview span { color: #557078; }
html[data-theme="dark"] .v2-next-preview h2 { color: #e9f2f4; }
html[data-theme="dark"] .v2-next-preview strong { color: #6edff8; }
html[data-theme="dark"] .v2-mobile-menu.active {
    border-color: rgba(111,227,251,.10);
    background: rgba(5,10,12,.96);
    box-shadow: 0 22px 60px rgba(0,0,0,.36);
}
html[data-theme="dark"] .v2-mobile-menu a { color: #cad9dc; }
html[data-theme="dark"] .v2-mobile-menu a:hover { background: rgba(111,227,251,.05); }
html[data-theme="dark"] .v2-menu-button {
    border-color: var(--border);
    background: rgba(255,255,255,.02);
}
html[data-theme="dark"] .v2-menu-button span { background: #d3e2e6; }

@media (max-width: 1050px) {
    .v2-theme-toggle {
        margin-left: auto;
    }
}

@media (max-width: 650px) {
    .v2-theme-toggle {
        width: 62px;
        height: 34px;
    }

    .v2-theme-toggle i {
        width: 26px;
        height: 26px;
    }

    html[data-theme="dark"] .v2-theme-toggle i {
        transform: translateX(28px);
    }
}

/* ==========================================================
   TK TECH - READABILITY + LAYOUT BALANCE
========================================================== */

/* HEADER */
.v2-brand-copy strong {
    font-size: 17px;
    letter-spacing: 1.8px;
}

.v2-brand-copy small {
    font-size: 8px;
    letter-spacing: 1.6px;
}

.v2-nav-links a {
    font-size: 12px;
    font-weight: 700;
}

.v2-nav-cta {
    min-height: 48px;
    padding: 0 22px;
    font-size: 11px;
}


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

.v2-hero-content {
    position: relative;
    z-index: 20;
    max-width: 610px;
}

.v2-kicker {
    font-size: 8.5px;
    letter-spacing: 2px;
}


/* MAIN TITLE */

.v2-hero h1 {
    max-width: 610px;

    font-size: clamp(
        58px,
        4.65vw,
        78px
    );

    line-height: 1.04;
    letter-spacing: -3px;
    font-weight: 700;
}


/*
Başlıktaki gradient alanını block yapıyoruz.
Bu hem son harflerdeki görüntü hatasını giderir
hem de sağ tarafa taşmayı önler.
*/

.v2-hero h1 span {
    display: block;

    width: 100%;
    max-width: 610px;

    margin-top: 10px;

    padding-right: 8px;
    padding-bottom: 6px;

    overflow: visible;

    color: transparent;
    -webkit-text-fill-color: transparent;

    background:
        linear-gradient(
            100deg,
            #19343c 0%,
            #1689a3 34%,
            #36b7d2 68%,
            #0d687c 100%
        );

    background-size: 170% 100%;

    background-clip: text;
    -webkit-background-clip: text;
}


/* DARK MODE TITLE */

html[data-theme="dark"] .v2-hero h1 span {
    background:
        linear-gradient(
            100deg,
            #eefcff,
            #a8efff 28%,
            #61dcf8 66%,
            #baf5ff
        );

    background-size: 170% 100%;

    background-clip: text;
    -webkit-background-clip: text;
}


/* DESCRIPTION */

.v2-hero-description {
    max-width: 590px;

    margin-top: 27px;

    font-size: 16px;
    line-height: 1.8;
}


/* ==========================================================
   BUTTONS
========================================================== */

.v2-hero-actions {
    margin-top: 31px;
}

.v2-button {
    min-height: 55px;

    padding: 0 22px;

    gap: 16px;

    font-size: 11px;
}

.v2-button b {
    font-size: 15px;
}


/* ==========================================================
   HERO META
========================================================== */

.v2-hero-meta {
    max-width: 570px;

    margin-top: 39px;
    padding-top: 21px;
}

.v2-hero-meta span {
    font-size: 7.5px;
}

.v2-hero-meta p {
    font-size: 9px;
    line-height: 1.5;
}

.v2-hero-meta strong {
    font-size: 9px;
}


/* ==========================================================
   SERVICE CARDS
========================================================== */

.v2-service-node {
    min-width: 148px;

    padding: 10px 11px;

    gap: 9px;
}

.v2-service-node > span {
    width: 29px;
    height: 29px;

    font-size: 7.5px;
}

.v2-service-node small {
    font-size: 6px;
    letter-spacing: 1.1px;
}

.v2-service-node strong {
    font-size: 9px;
}


/* ==========================================================
   DESKTOP LAYOUT FIX
========================================================== */

@media (min-width: 1051px) {

    /*
    Sol yazı ve sağ TK Core alanının
    birbirine girmesini engelliyoruz.
    */

    .v2-hero-panel {
        grid-template-columns:
            minmax(0, 1.02fr)
            minmax(480px, .98fr);

        gap: 42px;

        padding:
            72px
            58px
            68px
            60px;
    }


    .v2-hero-content {
        max-width: 610px;
    }


    /*
    Kartları merkeze biraz daha yaklaştırıyoruz.
    Özellikle soldaki 06 kartının başlığın
    üzerine gelmesini engelliyor.
    */

    .v2-node-1 {
        transform:
            translate(-50%, -50%)
            translate(-185px, -145px);
    }

    .v2-node-2 {
        transform:
            translate(-50%, -50%)
            translate(180px, -148px);
    }

    .v2-node-3 {
        transform:
            translate(-50%, -50%)
            translate(215px, -30px);
    }

    .v2-node-4 {
        transform:
            translate(-50%, -50%)
            translate(180px, 130px);
    }

    .v2-node-5 {
        transform:
            translate(-50%, -50%)
            translate(-185px, 130px);
    }

    .v2-node-6 {
        transform:
            translate(-50%, -50%)
            translate(-205px, -18px);
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1050px) {

    .v2-hero-panel {
        grid-template-columns: 1fr;

        padding: 65px 50px;

        gap: 45px;
    }

    .v2-hero-content {
        max-width: 720px;
    }

    .v2-hero h1 {
        max-width: 720px;

        font-size: clamp(
            54px,
            8vw,
            72px
        );

        line-height: 1.04;
        letter-spacing: -2.6px;
    }

    .v2-hero h1 span {
        max-width: 720px;
    }

    .v2-hero-description {
        max-width: 650px;

        font-size: 16px;
    }

}


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

@media (max-width: 650px) {

    .v2-brand-copy strong {
        font-size: 15px;
    }


    .v2-kicker {
        font-size: 7px;
        letter-spacing: 1.3px;
    }


    .v2-hero h1 {
        max-width: 100%;

        font-size: clamp(
            43px,
            12vw,
            57px
        );

        line-height: 1.04;
        letter-spacing: -2px;
    }


    .v2-hero h1 span {
        max-width: 100%;

        margin-top: 8px;

        padding-right: 4px;
        padding-bottom: 4px;
    }


    .v2-hero-description {
        font-size: 14px;
        line-height: 1.7;
    }


    .v2-button {
        min-height: 54px;

        font-size: 11px;
    }


    .v2-hero-meta span {
        font-size: 7px;
    }


    .v2-hero-meta p,
    .v2-hero-meta strong {
        font-size: 9px;
    }

}

/* ==========================================================
   SERVICES SECTION
========================================================== */

.v2-services {
    position: relative;

    padding:
        135px 0
        145px;

    scroll-margin-top:
        90px;
}


/* ==========================================================
   SECTION HEADER
========================================================== */

.v2-services-head {
    margin-bottom:
        55px;
}


.v2-section-kicker {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        24px;

    color:
        #6f8188;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        2.2px;
}


.v2-section-kicker span {
    display:
        grid;

    place-items:
        center;

    width:
        30px;

    height:
        30px;

    color:
        #128ca6;

    border:
        1px solid
        rgba(22,141,168,.16);

    border-radius:
        8px;

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

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

    font-size:
        8px;
}


.v2-section-kicker i {
    display:
        block;

    width:
        38px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            #1ba8c7,
            transparent
        );
}


.v2-services-head-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, .55fr);

    align-items:
        end;

    gap:
        70px;
}


.v2-services-head h2 {
    max-width:
        790px;

    color:
        #14242a;

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

    font-size:
        clamp(
            48px,
            5vw,
            72px
        );

    line-height:
        1;

    letter-spacing:
        -3.3px;

    font-weight:
        600;
}


.v2-services-head h2 span {
    display:
        block;

    margin-top:
        7px;

    color:
        #168ca6;
}


.v2-services-head-grid > p {
    max-width:
        430px;

    padding-bottom:
        5px;

    color:
        #64777e;

    font-size:
        15px;

    line-height:
        1.8;
}


/* ==========================================================
   BENTO GRID
========================================================== */

.v2-services-grid {
    display:
        grid;

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

    gap:
        18px;
}


/* ==========================================================
   CARD BASE
========================================================== */

.v2-service-card {
    position:
        relative;

    min-height:
        300px;

    padding:
        30px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(18, 116, 139, .12);

    border-radius:
        25px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.88),
            rgba(239,247,249,.82)
        );

    box-shadow:
        0 20px 60px
        rgba(34, 77, 88, .055),
        inset 0 1px 0
        rgba(255,255,255,.9);

    transition:
        transform .35s var(--ease),
        border-color .35s ease,
        box-shadow .35s ease;
}


.v2-service-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(22,141,168,.28);

    box-shadow:
        0 28px 70px
        rgba(34,77,88,.10),
        inset 0 1px 0
        rgba(255,255,255,.95);
}


/* GRID SIZES */

.v2-service-card-technical {
    grid-column:
        span 7;

    min-height:
        390px;

    padding:
        38px;
}


.v2-service-card-system {
    grid-column:
        span 5;

    min-height:
        390px;

    padding:
        38px;
}


.v2-services-grid >
.v2-service-card:nth-child(3),

.v2-services-grid >
.v2-service-card:nth-child(4),

.v2-services-grid >
.v2-service-card:nth-child(5) {

    grid-column:
        span 4;
}


.v2-service-card-growth {
    grid-column:
        1 / -1;

    min-height:
        250px;

    padding:
        38px 42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        60px;
}


/* ==========================================================
   CARD TOP
========================================================== */

.v2-service-card-top {
    position:
        relative;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        38px;
}


.v2-card-number {
    display:
        grid;

    place-items:
        center;

    width:
        32px;

    height:
        32px;

    flex-shrink:
        0;

    color:
        #1187a0;

    border:
        1px solid
        rgba(22,141,168,.18);

    border-radius:
        8px;

    background:
        rgba(22,141,168,.045);

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

    font-size:
        8px;

    font-weight:
        700;
}


.v2-card-category {
    color:
        #7b8d93;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        1.8px;
}


/* ==========================================================
   CARD CONTENT
========================================================== */

.v2-card-content {
    position:
        relative;

    z-index:
        5;
}


.v2-card-content h3 {
    max-width:
        500px;

    color:
        #17282e;

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

    font-size:
        clamp(
            27px,
            2.3vw,
            38px
        );

    line-height:
        1.05;

    letter-spacing:
        -1.4px;

    font-weight:
        600;
}


.v2-card-content p {
    max-width:
        490px;

    margin-top:
        18px;

    color:
        #697c83;

    font-size:
        14px;

    line-height:
        1.75;
}


/* ==========================================================
   SERVICE TAGS
========================================================== */

.v2-service-tags {
    position:
        relative;

    z-index:
        5;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    max-width:
        400px;

    margin-top:
        27px;
}


.v2-service-tags span {
    padding:
        7px 10px;

    color:
        #50666e;

    border:
        1px solid
        rgba(20,110,130,.10);

    border-radius:
        999px;

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

    font-size:
        8px;

    font-weight:
        700;
}


/* ==========================================================
   TECH CARD VISUAL
========================================================== */

.v2-card-visual-tech {
    position:
        absolute;

    right:
        -20px;

    bottom:
        -70px;

    width:
        340px;

    height:
        340px;

    opacity:
        .85;
}


.v2-tech-ring {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    border:
        1px solid
        rgba(20,155,184,.13);

    border-radius:
        50%;

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


.v2-tech-ring:nth-child(1) {
    width:
        280px;

    height:
        280px;

    border-style:
        dashed;

    animation:
        v2ServiceRing
        28s linear
        infinite;
}


.v2-tech-ring:nth-child(2) {
    width:
        205px;

    height:
        205px;

    animation:
        v2ServiceRingReverse
        22s linear
        infinite;
}


.v2-tech-core {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        105px;

    height:
        105px;

    display:
        grid;

    place-items:
        center;

    transform:
        translate(-50%, -50%)
        rotate(-8deg);

    color:
        #34bedb;

    border:
        1px solid
        rgba(28,171,201,.23);

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            rgba(14,48,58,.96),
            rgba(4,17,21,.98)
        );

    box-shadow:
        0 25px 60px
        rgba(28,135,158,.20),
        0 0 50px
        rgba(45,190,219,.12);

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

    font-size:
        25px;

    font-weight:
        700;
}


@keyframes v2ServiceRing {

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}


@keyframes v2ServiceRingReverse {

    to {
        transform:
            translate(-50%, -50%)
            rotate(-360deg);
    }

}


/* ==========================================================
   SYSTEM DECORATION
========================================================== */

.v2-service-card-system::before {
    content:
        "";

    position:
        absolute;

    width:
        330px;

    height:
        330px;

    right:
        -130px;

    bottom:
        -130px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(39,188,219,.18),
            rgba(39,188,219,.05) 40%,
            transparent 70%
        );

    filter:
        blur(10px);
}


.v2-service-line {
    position:
        absolute;

    left:
        38px;

    right:
        38px;

    bottom:
        37px;

    height:
        1px;

    overflow:
        visible;

    background:
        linear-gradient(
            90deg,
            rgba(25,139,164,.10),
            rgba(25,139,164,.45),
            rgba(25,139,164,.10)
        );
}


.v2-service-line::after {
    content:
        "";

    position:
        absolute;

    top:
        -3px;

    left:
        25%;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #29b5d2;

    box-shadow:
        0 0 18px
        rgba(41,181,210,.75);
}


/* ==========================================================
   SMALL CARD ARROW
========================================================== */

.v2-card-arrow {
    position:
        absolute;

    right:
        26px;

    bottom:
        24px;

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    color:
        #168ca6;

    border:
        1px solid
        rgba(22,141,168,.13);

    border-radius:
        50%;

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

    font-size:
        14px;

    transition:
        transform .3s var(--ease),
        background .3s ease;
}


.v2-service-card:hover
.v2-card-arrow {

    transform:
        rotate(45deg);

    background:
        rgba(255,255,255,.92);
}


/* ==========================================================
   GROWTH CARD
========================================================== */

.v2-growth-left {
    max-width:
        520px;
}


.v2-service-card-growth
.v2-service-card-top {
    margin-bottom:
        22px;
}


.v2-growth-stats {
    min-width:
        520px;

    display:
        grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr;

    align-items:
        center;

    gap:
        24px;

    padding:
        27px 30px;

    border:
        1px solid
        rgba(21,132,157,.11);

    border-radius:
        20px;

    background:
        rgba(255,255,255,.45);
}


.v2-growth-stats div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}


.v2-growth-stats span {
    color:
        #829399;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        1.7px;
}


.v2-growth-stats strong {
    color:
        #20363d;

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

    font-size:
        16px;
}


.v2-growth-stats i {
    width:
        1px;

    height:
        40px;

    background:
        rgba(23,117,139,.10);
}


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

.v2-services-footer {
    margin-top:
        28px;

    padding:
        22px 3px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;
}


.v2-services-footer > div {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.v2-services-footer-dot {
    width:
        7px;

    height:
        7px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        #28b7d3;

    box-shadow:
        0 0 13px
        rgba(40,183,211,.65);
}


.v2-services-footer p {
    color:
        #6a7d84;

    font-size:
        13px;
}


.v2-services-footer > a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        18px;

    color:
        #1e373e;

    font-size:
        12px;

    font-weight:
        800;
}


.v2-services-footer > a span {
    display:
        grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

    color:
        #0b839d;

    border:
        1px solid
        rgba(22,141,168,.15);

    border-radius:
        50%;

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

    transition:
        transform .3s var(--ease);
}


.v2-services-footer > a:hover span {
    transform:
        rotate(45deg);
}


/* ==========================================================
   SERVICES / DARK MODE
========================================================== */

html[data-theme="dark"]
.v2-section-kicker {

    color:
        #657980;
}


html[data-theme="dark"]
.v2-section-kicker span {

    color:
        #79e6fb;

    border-color:
        rgba(111,227,251,.13);

    background:
        rgba(111,227,251,.025);
}


html[data-theme="dark"]
.v2-services-head h2 {

    color:
        #edf6f8;
}


html[data-theme="dark"]
.v2-services-head h2 span {

    color:
        #67ddf7;
}


html[data-theme="dark"]
.v2-services-head-grid > p {

    color:
        #829399;
}


html[data-theme="dark"]
.v2-service-card {

    border-color:
        rgba(111,227,251,.085);

    background:
        linear-gradient(
            145deg,
            rgba(8,14,17,.94),
            rgba(3,8,10,.94)
        );

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.25),
        inset 0 1px 0
        rgba(255,255,255,.025);
}


html[data-theme="dark"]
.v2-service-card:hover {

    border-color:
        rgba(111,227,251,.21);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.38),
        0 0 28px
        rgba(75,210,241,.035);
}


html[data-theme="dark"]
.v2-card-number {

    color:
        #74e6fc;

    border-color:
        rgba(111,227,251,.12);

    background:
        rgba(111,227,251,.025);
}


html[data-theme="dark"]
.v2-card-category {

    color:
        #50656d;
}


html[data-theme="dark"]
.v2-card-content h3 {

    color:
        #edf5f7;
}


html[data-theme="dark"]
.v2-card-content p {

    color:
        #7c8d93;
}


html[data-theme="dark"]
.v2-service-tags span {

    color:
        #819399;

    border-color:
        rgba(255,255,255,.055);

    background:
        rgba(255,255,255,.025);
}


html[data-theme="dark"]
.v2-card-arrow {

    color:
        #73e4fb;

    border-color:
        rgba(111,227,251,.10);

    background:
        rgba(255,255,255,.025);
}


html[data-theme="dark"]
.v2-service-card:hover
.v2-card-arrow {

    background:
        rgba(111,227,251,.05);
}


html[data-theme="dark"]
.v2-growth-stats {

    border-color:
        rgba(111,227,251,.07);

    background:
        rgba(255,255,255,.018);
}


html[data-theme="dark"]
.v2-growth-stats strong {

    color:
        #dbe8eb;
}


html[data-theme="dark"]
.v2-growth-stats span {

    color:
        #566a72;
}


html[data-theme="dark"]
.v2-growth-stats i {

    background:
        rgba(255,255,255,.055);
}


html[data-theme="dark"]
.v2-services-footer p {

    color:
        #71838a;
}


html[data-theme="dark"]
.v2-services-footer > a {

    color:
        #d6e5e8;
}


html[data-theme="dark"]
.v2-services-footer > a span {

    color:
        #78e6fb;

    border-color:
        rgba(111,227,251,.10);

    background:
        rgba(255,255,255,.02);
}


/* ==========================================================
   SERVICES / TABLET
========================================================== */

@media (max-width: 1050px) {

    .v2-services {
        padding:
            105px 0
            115px;
    }


    .v2-services-head-grid {
        grid-template-columns:
            1fr;

        gap:
            25px;
    }


    .v2-services-head-grid > p {
        max-width:
            620px;
    }


    .v2-service-card-technical,
    .v2-service-card-system {

        grid-column:
            span 6;
    }


    .v2-services-grid >
    .v2-service-card:nth-child(3),

    .v2-services-grid >
    .v2-service-card:nth-child(4),

    .v2-services-grid >
    .v2-service-card:nth-child(5) {

        grid-column:
            span 6;
    }


    .v2-services-grid >
    .v2-service-card:nth-child(5) {

        grid-column:
            1 / -1;
    }


    .v2-service-card-growth {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .v2-growth-stats {
        width:
            100%;

        min-width:
            0;
    }

}


/* ==========================================================
   SERVICES / MOBILE
========================================================== */

@media (max-width: 650px) {

    .v2-services {
        padding:
            85px 0
            90px;
    }


    .v2-services-head {
        margin-bottom:
            35px;
    }


    .v2-section-kicker {
        font-size:
            7.5px;
    }


    .v2-services-head h2 {
        font-size:
            clamp(
                40px,
                12vw,
                55px
            );

        line-height:
            1.02;

        letter-spacing:
            -2.3px;
    }


    .v2-services-head-grid > p {
        font-size:
            14px;

        line-height:
            1.7;
    }


    .v2-services-grid {
        grid-template-columns:
            1fr;

        gap:
            13px;
    }


    .v2-service-card,
    .v2-service-card-technical,
    .v2-service-card-system,
    .v2-services-grid >
    .v2-service-card:nth-child(3),
    .v2-services-grid >
    .v2-service-card:nth-child(4),
    .v2-services-grid >
    .v2-service-card:nth-child(5),
    .v2-service-card-growth {

        grid-column:
            1 / -1;
    }


    .v2-service-card {
        min-height:
            270px;

        padding:
            27px;
    }


    .v2-service-card-technical,
    .v2-service-card-system {

        min-height:
            340px;
    }


    .v2-card-content h3 {
        font-size:
            29px;
    }


    .v2-card-content p {
        font-size:
            13px;
    }


    .v2-card-visual-tech {
        width:
            250px;

        height:
            250px;

        right:
            -70px;

        bottom:
            -80px;

        opacity:
            .55;
    }


    .v2-service-card-growth {
        padding:
            28px;

        gap:
            35px;
    }


    .v2-growth-stats {
        grid-template-columns:
            1fr;

        gap:
            18px;

        padding:
            22px;
    }


    .v2-growth-stats i {
        width:
            100%;

        height:
            1px;
    }


    .v2-services-footer {
        align-items:
            flex-start;

        flex-direction:
            column;

        margin-top:
            18px;

        padding-top:
            20px;
    }

}

/* ==========================================================
   REFERENCES
========================================================== */

.v2-references {
    position: relative;
    padding: 135px 0 150px;
    overflow: hidden;
    scroll-margin-top: 90px;
}


/* ==========================================================
   REFERENCES HEADER
========================================================== */

.v2-references-head {
    margin-bottom: 52px;
}


.v2-references-head-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, .55fr);

    align-items: end;
    gap: 70px;
}


.v2-references-head h2 {
    max-width: 760px;

    color: #14242a;

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

    font-size:
        clamp(
            48px,
            5vw,
            72px
        );

    line-height: 1;
    letter-spacing: -3.3px;
    font-weight: 600;
}


.v2-references-head h2 span {
    display: block;
    margin-top: 7px;
    color: #168ca6;
}


.v2-references-head-grid > p {
    max-width: 420px;

    padding-bottom: 5px;

    color: #64777e;

    font-size: 15px;
    line-height: 1.8;
}


/* ==========================================================
   PROJECT SLIDER
========================================================== */

.v2-ref-slider {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(18,116,139,.12);

    border-radius: 30px;

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

    box-shadow:
        0 35px 90px
        rgba(29,75,86,.075);
}


.v2-ref-track {
    display: flex;

    width: 100%;

    transition:
        transform
        .75s
        cubic-bezier(.22,.8,.22,1);

    will-change: transform;
}


.v2-ref-project {
    flex:
        0 0 100%;

    min-width: 100%;

    padding: 22px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(330px, .55fr);

    gap: 22px;

    opacity: .32;

    transition:
        opacity .45s ease;
}


.v2-ref-project.is-active {
    opacity: 1;
}


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

.v2-ref-gallery {
    min-width: 0;
}


.v2-ref-gallery-stage {
    position: relative;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    border:
        1px solid
        rgba(20,113,134,.12);

    border-radius: 23px;

    background:
        #dce9ec;
}


.v2-ref-images {
    position: absolute;
    inset: 0;
}


.v2-ref-image {
    position: absolute;

    inset: 0;

    margin: 0;

    opacity: 0;

    transform:
        scale(1.035);

    transition:
        opacity .55s ease,
        transform .8s
        cubic-bezier(.22,.8,.22,1);

    pointer-events: none;
}


.v2-ref-image.is-active {
    opacity: 1;

    transform:
        scale(1);

    pointer-events: auto;
}


.v2-ref-image img {
    width: 100%;
    height: 100%;

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

    cursor: zoom-in;

    transition:
        transform .35s ease,
        opacity .35s ease;
}


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

.v2-ref-image-arrow {
    position: absolute;

    z-index: 15;

    top: 50%;

    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    transform:
        translateY(-50%);

    color: #152a31;

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

    border-radius: 50%;

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

    box-shadow:
        0 10px 30px
        rgba(20,54,62,.13);

    backdrop-filter:
        blur(12px);

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

    cursor: pointer;

    font-size: 15px;

    transition:
        transform .25s ease,
        background .25s ease;
}


.v2-ref-image-arrow:hover {
    background: #fff;
}


.v2-ref-image-prev {
    left: 19px;
}


.v2-ref-image-next {
    right: 19px;
}


.v2-ref-image-prev:hover {
    transform:
        translateY(-50%)
        translateX(-3px);
}


.v2-ref-image-next:hover {
    transform:
        translateY(-50%)
        translateX(3px);
}


/* ==========================================================
   IMAGE COUNTER
========================================================== */

.v2-ref-image-counter {
    position: absolute;

    z-index: 15;

    left: 20px;
    bottom: 20px;

    min-height: 38px;

    padding: 0 13px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #21343a;

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

    border-radius: 999px;

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

    box-shadow:
        0 9px 28px
        rgba(18,53,61,.12);

    backdrop-filter:
        blur(12px);

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

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

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


.v2-ref-image-counter i {
    width: 18px;
    height: 1px;

    background:
        rgba(31,67,76,.25);
}


/* ==========================================================
   PROJECT BADGE
========================================================== */

.v2-ref-project-badge {
    position: absolute;

    z-index: 15;

    right: 20px;
    top: 20px;

    padding:
        10px 13px;

    color: #17323a;

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

    border-radius: 999px;

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

    backdrop-filter:
        blur(12px);

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

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


/* ==========================================================
   THUMBNAILS
========================================================== */

.v2-ref-thumbs {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 8px;

    margin-top: 9px;
}


.v2-ref-thumbs button {
    position: relative;

    height: 72px;

    padding: 0;

    overflow: hidden;

    border:
        1px solid
        transparent;

    border-radius: 11px;

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

    cursor: pointer;

    opacity: .48;

    transition:
        opacity .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.v2-ref-thumbs button:hover {
    opacity: .80;
}


.v2-ref-thumbs button.is-active {
    opacity: 1;

    border-color:
        rgba(21,165,195,.55);

    transform:
        translateY(-2px);
}


.v2-ref-thumbs img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* 4 görselli projede thumbnail alanını koru */

.v2-ref-thumbs:has(button:nth-child(4):last-child) {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


/* ==========================================================
   PROJECT CONTENT
========================================================== */

.v2-ref-content {
    position: relative;

    padding:
        34px 32px;

    display: flex;

    flex-direction: column;

    border:
        1px solid
        rgba(18,116,139,.10);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.88),
            rgba(239,247,249,.78)
        );
}


.v2-ref-content-top {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 43px;
}


.v2-ref-content-top > span {
    display: grid;

    place-items: center;

    width: 32px;
    height: 32px;

    color: #128aa4;

    border:
        1px solid
        rgba(22,141,168,.17);

    border-radius: 8px;

    background:
        rgba(22,141,168,.04);

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

    font-size: 8px;
}


.v2-ref-content-top p {
    color: #778a90;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1.7px;
}


.v2-ref-content h3 {
    color: #17282e;

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

    font-size:
        clamp(
            38px,
            3.2vw,
            52px
        );

    line-height: .98;

    letter-spacing: -2.2px;

    font-weight: 600;
}


.v2-ref-content h3 span {
    display: block;

    color: #178da7;
}


.v2-ref-description {
    margin-top: 25px;

    color: #657980;

    font-size: 14px;

    line-height: 1.8;
}


/* ==========================================================
   TAGS
========================================================== */

.v2-ref-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 27px;
}


.v2-ref-tags span {
    padding:
        7px 10px;

    color: #50666d;

    border:
        1px solid
        rgba(18,107,128,.10);

    border-radius: 999px;

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

    font-size: 8px;

    font-weight: 700;
}


/* ==========================================================
   PROJECT INFO
========================================================== */

.v2-ref-info {
    margin-top: 32px;

    padding-top: 25px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 20px;

    border-top:
        1px solid
        rgba(18,100,119,.10);
}


.v2-ref-info div {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.v2-ref-info small {
    color: #8b9a9f;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.v2-ref-info strong {
    color: #2a4148;

    font-size: 11px;

    font-weight: 700;
}


/* ==========================================================
   LIVE LINK
========================================================== */

.v2-ref-live-link {
    margin-top: auto;

    padding-top: 35px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    color: #18343c;

    font-size: 11px;

    font-weight: 800;
}


.v2-ref-live-link span {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    color: #1088a1;

    border:
        1px solid
        rgba(18,132,157,.14);

    border-radius: 50%;

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

    transition:
        transform .3s
        var(--ease),
        background .3s ease;
}


.v2-ref-live-link:hover span {
    transform:
        rotate(45deg);

    background:
        rgba(255,255,255,.96);
}


/* ==========================================================
   MAIN PROJECT NAV
========================================================== */

.v2-ref-project-nav {
    margin-top: 24px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 30px;
}


.v2-ref-project-counter {
    display: flex;
    align-items: center;

    gap: 11px;

    color: #213b43;

    font-family:
        "Space Grotesk",
        sans-serif;
}


.v2-ref-project-counter > span {
    font-size: 12px;
    font-weight: 700;
}


.v2-ref-project-counter i {
    width: 42px;
    height: 1px;

    background:
        rgba(21,93,109,.20);
}


.v2-ref-project-counter small {
    margin-left: 5px;

    color: #839399;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.7px;
}


.v2-ref-project-buttons {
    display: flex;
    gap: 8px;
}


.v2-ref-project-buttons button {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    color: #18343c;

    border:
        1px solid
        rgba(18,111,132,.13);

    border-radius: 50%;

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

    cursor: pointer;

    font-size: 15px;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}


.v2-ref-project-buttons button:hover {
    border-color:
        rgba(22,141,168,.30);

    background:
        rgba(255,255,255,.96);
}


.v2-ref-project-buttons button:first-child:hover {
    transform:
        translateX(-3px);
}


.v2-ref-project-buttons button:last-child:hover {
    transform:
        translateX(3px);
}


/* ==========================================================
   REFERENCES / DARK MODE
========================================================== */

html[data-theme="dark"]
.v2-references-head h2 {
    color: #edf6f8;
}


html[data-theme="dark"]
.v2-references-head h2 span {
    color: #67ddf7;
}


html[data-theme="dark"]
.v2-references-head-grid > p {
    color: #829399;
}


html[data-theme="dark"]
.v2-ref-slider {
    border-color:
        rgba(111,227,251,.08);

    background:
        rgba(3,8,10,.48);

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.24);
}


html[data-theme="dark"]
.v2-ref-content {
    border-color:
        rgba(111,227,251,.07);

    background:
        linear-gradient(
            145deg,
            rgba(8,14,17,.96),
            rgba(3,8,10,.96)
        );
}


html[data-theme="dark"]
.v2-ref-content h3 {
    color: #edf6f8;
}


html[data-theme="dark"]
.v2-ref-content h3 span {
    color: #69def7;
}


html[data-theme="dark"]
.v2-ref-description {
    color: #7e9096;
}


html[data-theme="dark"]
.v2-ref-content-top p {
    color: #50646c;
}


html[data-theme="dark"]
.v2-ref-tags span {
    color: #819399;

    border-color:
        rgba(255,255,255,.055);

    background:
        rgba(255,255,255,.025);
}


html[data-theme="dark"]
.v2-ref-info {
    border-top-color:
        rgba(255,255,255,.055);
}


html[data-theme="dark"]
.v2-ref-info small {
    color: #52656c;
}


html[data-theme="dark"]
.v2-ref-info strong {
    color: #c8d7da;
}


html[data-theme="dark"]
.v2-ref-live-link {
    color: #d8e7ea;
}


html[data-theme="dark"]
.v2-ref-live-link span {
    color: #76e5fb;

    border-color:
        rgba(111,227,251,.10);

    background:
        rgba(255,255,255,.025);
}


html[data-theme="dark"]
.v2-ref-live-link:hover span {
    background:
        rgba(111,227,251,.06);
}


html[data-theme="dark"]
.v2-ref-project-counter {
    color: #d8e8eb;
}


html[data-theme="dark"]
.v2-ref-project-counter i {
    background:
        rgba(111,227,251,.12);
}


html[data-theme="dark"]
.v2-ref-project-counter small {
    color: #556a71;
}


html[data-theme="dark"]
.v2-ref-project-buttons button {
    color: #cfe1e5;

    border-color:
        rgba(111,227,251,.09);

    background:
        rgba(255,255,255,.025);
}


html[data-theme="dark"]
.v2-ref-project-buttons button:hover {
    border-color:
        rgba(111,227,251,.22);

    background:
        rgba(111,227,251,.05);
}


/* ==========================================================
   REFERENCES / TABLET
========================================================== */

@media (max-width: 1050px) {

    .v2-references {
        padding:
            105px 0
            115px;
    }


    .v2-references-head-grid {
        grid-template-columns:
            1fr;

        gap: 25px;
    }


    .v2-references-head-grid > p {
        max-width: 620px;
    }


    .v2-ref-project {
        grid-template-columns:
            1fr;

        padding: 18px;
    }


    .v2-ref-content {
        min-height: 470px;
    }

}


/* ==========================================================
   REFERENCES / MOBILE
========================================================== */

@media (max-width: 650px) {

    .v2-references {
        padding:
            85px 0
            90px;
    }


    .v2-references-head {
        margin-bottom: 34px;
    }


    .v2-references-head h2 {
        font-size:
            clamp(
                40px,
                12vw,
                55px
            );

        line-height: 1.02;

        letter-spacing: -2.3px;
    }


    .v2-references-head-grid > p {
        font-size: 14px;
        line-height: 1.7;
    }


    .v2-ref-slider {
        border-radius: 22px;
    }


    .v2-ref-project {
        padding: 10px;

        gap: 10px;
    }


    .v2-ref-gallery-stage {
        border-radius: 17px;

        aspect-ratio: 4 / 3;
    }


    .v2-ref-image-arrow {
        width: 40px;
        height: 40px;
    }


    .v2-ref-image-prev {
        left: 11px;
    }


    .v2-ref-image-next {
        right: 11px;
    }


    .v2-ref-project-badge {
        right: 12px;
        top: 12px;

        font-size: 6px;
    }


    .v2-ref-image-counter {
        left: 12px;
        bottom: 12px;
    }


    .v2-ref-thumbs {
        gap: 5px;
    }


    .v2-ref-thumbs button {
        height: 54px;

        border-radius: 8px;
    }


    .v2-ref-content {
        min-height: 0;

        padding:
            28px 24px;
    }


    .v2-ref-content-top {
        margin-bottom: 30px;
    }


    .v2-ref-content h3 {
        font-size: 38px;
    }


    .v2-ref-description {
        font-size: 13px;
    }


    .v2-ref-project-nav {
        margin-top: 18px;
    }


    .v2-ref-project-buttons button {
        width: 46px;
        height: 46px;
    }

}


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

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

    .v2-ref-track,
    .v2-ref-image {
        transition: none;
    }

}

/* ==========================================================
   REFERENCE IMAGE FIT FIX
========================================================== */

.v2-ref-gallery-stage {
    background:
        radial-gradient(
            circle at center,
            rgba(33, 153, 180, .08),
            rgba(239, 247, 249, .96)
        );
}


/*
Dikey veya yatay fark etmeksizin
görselin tamamı görünür.
*/

.v2-ref-image {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 14px;
}


.v2-ref-image img {
    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

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

    border-radius: 12px;

    cursor: zoom-in;
}


/* DARK MODE */

html[data-theme="dark"]
.v2-ref-gallery-stage {

    background:
        radial-gradient(
            circle at center,
            rgba(64, 205, 235, .065),
            rgba(3, 8, 10, .96)
        );
}


/* Thumbnail küçük kalabilir ve alanı doldurabilir */

.v2-ref-thumbs img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

/* ==========================================================
   REFERENCE LIGHTBOX
========================================================== */

.v2-lightbox {
    position: fixed;

    z-index: 99999;

    inset: 0;

    padding: 35px;

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

    visibility: hidden;
    opacity: 0;

    background:
        rgba(2, 6, 8, .92);

    backdrop-filter:
        blur(15px);

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

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


.v2-lightbox.is-active {
    visibility: visible;
    opacity: 1;
}


.v2-lightbox-image {
    max-width: min(1400px, 94vw);
    max-height: 90vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 14px;

    box-shadow:
        0 40px 120px
        rgba(0,0,0,.55);

    transform:
        scale(.96);

    transition:
        transform .35s
        cubic-bezier(.22,.8,.22,1);
}


.v2-lightbox.is-active
.v2-lightbox-image {

    transform:
        scale(1);
}


.v2-lightbox-close {
    position: absolute;

    right: 28px;
    top: 25px;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    color: #fff;

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

    border-radius: 50%;

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

    cursor: pointer;

    font-size: 20px;

    transition:
        transform .25s ease,
        background .25s ease;
}


.v2-lightbox-close:hover {
    transform:
        rotate(90deg);

    background:
        rgba(255,255,255,.12);
}


.v2-lightbox-caption {
    position: absolute;

    left: 50%;
    bottom: 18px;

    transform:
        translateX(-50%);

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

    font-size: 11px;

    letter-spacing: .3px;
}


body.v2-lightbox-open {
    overflow: hidden;
}


@media (max-width: 650px) {

    .v2-lightbox {
        padding: 15px;
    }

    .v2-lightbox-image {
        max-width: 96vw;
        max-height: 86vh;
    }

    .v2-lightbox-close {
        width: 42px;
        height: 42px;

        right: 14px;
        top: 14px;
    }

}

/* ==========================================================
   LIGHTBOX GALLERY NAVIGATION
========================================================== */

.v2-lightbox-stage {
    width: min(1400px, 84vw);
    height: 88vh;

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


.v2-lightbox-image {
    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 14px;

    box-shadow:
        0 40px 120px
        rgba(0,0,0,.55);

    opacity: 1;

    transform: scale(1);

    transition:
        opacity .18s ease,
        transform .3s
        cubic-bezier(.22,.8,.22,1);
}


.v2-lightbox-image.is-changing {
    opacity: 0;

    transform:
        scale(.985);
}


/* ==========================================================
   PREV / NEXT BUTTONS
========================================================== */

.v2-lightbox-nav {
    position: absolute;

    z-index: 20;

    top: 50%;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    transform:
        translateY(-50%);

    color: #ffffff;

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

    border-radius: 50%;

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

    backdrop-filter:
        blur(14px);

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

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

    cursor: pointer;

    font-size: 19px;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}


.v2-lightbox-nav:hover {
    background:
        rgba(255,255,255,.14);

    border-color:
        rgba(255,255,255,.23);
}


.v2-lightbox-prev {
    left: 26px;
}


.v2-lightbox-next {
    right: 26px;
}


.v2-lightbox-prev:hover {
    transform:
        translateY(-50%)
        translateX(-4px);
}


.v2-lightbox-next:hover {
    transform:
        translateY(-50%)
        translateX(4px);
}


/* ==========================================================
   LIGHTBOX BOTTOM INFO
========================================================== */

.v2-lightbox-bottom {
    position: absolute;

    z-index: 20;

    left: 50%;
    bottom: 18px;

    width:
        min(
            900px,
            calc(100% - 150px)
        );

    transform:
        translateX(-50%);

    display: flex;
    align-items: center;

    justify-content:
        space-between;

    gap: 30px;

    pointer-events: none;
}


.v2-lightbox-caption {
    position: static;

    transform: none;

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

    font-size: 11px;
}


.v2-lightbox-counter {
    min-height: 38px;

    padding: 0 14px;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    flex-shrink: 0;

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

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

    border-radius: 999px;

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

    backdrop-filter:
        blur(12px);

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

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

    font-size: 9px;

    font-weight: 700;
}


.v2-lightbox-counter i {
    width: 20px;
    height: 1px;

    background:
        rgba(255,255,255,.20);
}


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

@media (max-width: 650px) {

    .v2-lightbox {
        padding:
            65px 10px
            75px;
    }


    .v2-lightbox-stage {
        width: 100%;
        height: 78vh;
    }


    .v2-lightbox-nav {
        width: 44px;
        height: 44px;

        top: auto;
        bottom: 15px;

        transform: none;

        font-size: 15px;
    }


    .v2-lightbox-prev {
        left: 15px;
    }


    .v2-lightbox-next {
        right: 15px;
    }


    .v2-lightbox-prev:hover,
    .v2-lightbox-next:hover {

        transform: none;

    }


    .v2-lightbox-bottom {
        bottom: 20px;

        width:
            calc(100% - 135px);

        justify-content: center;
    }


    .v2-lightbox-caption {
        display: none;
    }

}

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

.v2-about {
    position: relative;
    padding: 135px 0 145px;
    scroll-margin-top: 90px;
}


/* ==========================================================
   ABOUT HEADER
========================================================== */

.v2-about-head {
    margin-bottom: 52px;
}


.v2-about-head-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, .55fr);

    align-items: end;

    gap: 70px;
}


.v2-about-head h2 {
    max-width: 800px;

    color: #14242a;

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

    font-size:
        clamp(
            48px,
            5vw,
            72px
        );

    line-height: 1;

    letter-spacing: -3.3px;

    font-weight: 600;
}


.v2-about-head h2 span {
    display: block;

    margin-top: 7px;

    color: #168ca6;
}


.v2-about-head-grid > p {
    max-width: 420px;

    padding-bottom: 5px;

    color: #64777e;

    font-size: 15px;

    line-height: 1.8;
}


/* ==========================================================
   MAIN PANEL
========================================================== */

.v2-about-panel {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, .95fr);

    overflow: hidden;

    border:
        1px solid
        rgba(18,116,139,.12);

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.88),
            rgba(239,247,249,.75)
        );

    box-shadow:
        0 30px 85px
        rgba(28,72,82,.07);
}


/* ==========================================================
   ABOUT LEFT
========================================================== */

.v2-about-main {
    position: relative;

    padding:
        58px 60px
        55px;

    border-right:
        1px solid
        rgba(18,105,126,.09);
}


.v2-about-label {
    display: inline-block;

    margin-bottom: 38px;

    color: #75888e;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 2px;
}


.v2-about-main h3 {
    max-width: 650px;

    color: #17282e;

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

    font-size:
        clamp(
            38px,
            3.6vw,
            55px
        );

    line-height: 1.03;

    letter-spacing: -2.3px;

    font-weight: 600;
}


.v2-about-main h3 span {
    display: block;

    color: #168ca6;
}


.v2-about-main > p {
    max-width: 650px;

    margin-top: 27px;

    color: #657980;

    font-size: 15px;

    line-height: 1.85;
}


.v2-about-main > p + p {
    margin-top: 17px;
}


/* ==========================================================
   SIGNATURE
========================================================== */

.v2-about-signature {
    margin-top: 42px;

    padding-top: 27px;

    display: flex;
    align-items: center;

    gap: 15px;

    border-top:
        1px solid
        rgba(18,98,117,.09);
}


.v2-about-signature > span {
    width: 43px;
    height: 43px;

    flex-shrink: 0;

    border:
        1px solid
        rgba(22,141,168,.18);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(22,141,168,.12),
            rgba(255,255,255,.7)
        );
}


.v2-about-signature div {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.v2-about-signature strong {
    color: #233b42;

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

    font-size: 12px;

    letter-spacing: 1.4px;
}


.v2-about-signature small {
    color: #849499;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


/* ==========================================================
   WORK SYSTEM
========================================================== */

.v2-about-system {
    padding:
        45px 45px
        38px;
}


.v2-about-system-head {
    padding-bottom: 24px;

    display: flex;
    align-items: center;

    justify-content:
        space-between;

    border-bottom:
        1px solid
        rgba(18,105,126,.09);
}


.v2-about-system-head span,
.v2-about-system-head small {
    color: #7b8d93;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.7px;
}


.v2-about-step {
    position: relative;

    padding:
        31px 0;

    display: grid;

    grid-template-columns:
        42px 1fr;

    gap: 17px;

    border-bottom:
        1px solid
        rgba(18,105,126,.08);
}


.v2-about-step:last-child {
    border-bottom: 0;
}


.v2-about-step-number {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    color: #1389a3;

    border:
        1px solid
        rgba(22,141,168,.17);

    border-radius: 9px;

    background:
        rgba(22,141,168,.04);

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

    font-size: 8px;
}


.v2-about-step h4 {
    color: #22383f;

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

    font-size: 17px;

    font-weight: 600;
}


.v2-about-step p {
    max-width: 420px;

    margin-top: 9px;

    color: #71838a;

    font-size: 13px;

    line-height: 1.7;
}


/* ==========================================================
   VALUES
========================================================== */

.v2-about-values {
    margin-top: 18px;

    display: grid;

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

    gap: 18px;
}


.v2-about-values article {
    min-height: 200px;

    padding: 28px;

    border:
        1px solid
        rgba(18,116,139,.10);

    border-radius: 22px;

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

    transition:
        transform .3s var(--ease),
        border-color .3s ease,
        background .3s ease;
}


.v2-about-values article:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(22,141,168,.25);

    background:
        rgba(255,255,255,.83);
}


.v2-about-values article > span {
    color: #158ba5;

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

    font-size: 8px;
}


.v2-about-values h4 {
    margin-top: 36px;

    color: #21373e;

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

    font-size: 20px;

    font-weight: 600;
}


.v2-about-values p {
    max-width: 340px;

    margin-top: 12px;

    color: #708289;

    font-size: 13px;

    line-height: 1.7;
}


/* ==========================================================
   ABOUT / DARK MODE
========================================================== */

html[data-theme="dark"]
.v2-about-head h2 {

    color: #edf6f8;
}


html[data-theme="dark"]
.v2-about-head h2 span {

    color: #67ddf7;
}


html[data-theme="dark"]
.v2-about-head-grid > p {

    color: #829399;
}


html[data-theme="dark"]
.v2-about-panel {

    border-color:
        rgba(111,227,251,.08);

    background:
        linear-gradient(
            145deg,
            rgba(8,14,17,.95),
            rgba(3,8,10,.94)
        );

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


html[data-theme="dark"]
.v2-about-main {

    border-right-color:
        rgba(255,255,255,.055);
}


html[data-theme="dark"]
.v2-about-label {

    color: #52666d;
}


html[data-theme="dark"]
.v2-about-main h3 {

    color: #edf5f7;
}


html[data-theme="dark"]
.v2-about-main h3 span {

    color: #68ddf7;
}


html[data-theme="dark"]
.v2-about-main > p {

    color: #7d9096;
}


html[data-theme="dark"]
.v2-about-signature {

    border-top-color:
        rgba(255,255,255,.055);
}


html[data-theme="dark"]
.v2-about-signature > span {

    border-color:
        rgba(111,227,251,.10);

    background:
        rgba(111,227,251,.025);
}


html[data-theme="dark"]
.v2-about-signature strong {

    color: #dce9ec;
}


html[data-theme="dark"]
.v2-about-signature small {

    color: #53676e;
}


html[data-theme="dark"]
.v2-about-system-head {

    border-bottom-color:
        rgba(255,255,255,.055);
}


html[data-theme="dark"]
.v2-about-system-head span,

html[data-theme="dark"]
.v2-about-system-head small {

    color: #52666d;
}


html[data-theme="dark"]
.v2-about-step {

    border-bottom-color:
        rgba(255,255,255,.05);
}


html[data-theme="dark"]
.v2-about-step-number {

    color: #75e4fa;

    border-color:
        rgba(111,227,251,.10);

    background:
        rgba(111,227,251,.025);
}


html[data-theme="dark"]
.v2-about-step h4 {

    color: #dbe8eb;
}


html[data-theme="dark"]
.v2-about-step p {

    color: #71848b;
}


html[data-theme="dark"]
.v2-about-values article {

    border-color:
        rgba(111,227,251,.07);

    background:
        rgba(255,255,255,.018);
}


html[data-theme="dark"]
.v2-about-values article:hover {

    border-color:
        rgba(111,227,251,.18);

    background:
        rgba(111,227,251,.03);
}


html[data-theme="dark"]
.v2-about-values h4 {

    color: #dce9ec;
}


html[data-theme="dark"]
.v2-about-values p {

    color: #71848b;
}


/* ==========================================================
   ABOUT / TABLET
========================================================== */

@media (max-width: 1050px) {

    .v2-about {
        padding:
            105px 0
            115px;
    }


    .v2-about-head-grid {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .v2-about-panel {
        grid-template-columns: 1fr;
    }


    .v2-about-main {
        border-right: 0;

        border-bottom:
            1px solid
            rgba(18,105,126,.09);
    }


    html[data-theme="dark"]
    .v2-about-main {

        border-bottom-color:
            rgba(255,255,255,.055);
    }

}


/* ==========================================================
   ABOUT / MOBILE
========================================================== */

@media (max-width: 650px) {

    .v2-about {
        padding:
            85px 0
            90px;
    }


    .v2-about-head {
        margin-bottom: 34px;
    }


    .v2-about-head h2 {
        font-size:
            clamp(
                40px,
                12vw,
                55px
            );

        line-height: 1.02;

        letter-spacing: -2.3px;
    }


    .v2-about-head-grid > p {
        font-size: 14px;

        line-height: 1.7;
    }


    .v2-about-panel {
        border-radius: 22px;
    }


    .v2-about-main {
        padding:
            35px 26px;
    }


    .v2-about-main h3 {
        font-size: 36px;

        letter-spacing: -1.7px;
    }


    .v2-about-main > p {
        font-size: 13px;

        line-height: 1.75;
    }


    .v2-about-system {
        padding:
            30px 25px;
    }


    .v2-about-values {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .v2-about-values article {
        min-height: 170px;
    }

}

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

.v2-contact {
    position: relative;
    padding: 135px 0 145px;
    scroll-margin-top: 90px;
}


.v2-contact-head {
    margin-bottom: 52px;
}


.v2-contact-head-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, .55fr);

    align-items: end;

    gap: 70px;
}


.v2-contact-head h2 {
    max-width: 800px;

    color: #14242a;

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

    font-size:
        clamp(
            48px,
            5vw,
            72px
        );

    line-height: 1;

    letter-spacing: -3.3px;

    font-weight: 600;
}


.v2-contact-head h2 span {
    display: block;

    margin-top: 7px;

    color: #168ca6;
}


.v2-contact-head-grid > p {
    max-width: 420px;

    padding-bottom: 5px;

    color: #64777e;

    font-size: 15px;

    line-height: 1.8;
}


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

.v2-contact-panel {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(420px, .92fr);

    overflow: hidden;

    border:
        1px solid
        rgba(18,116,139,.12);

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.94),
            rgba(235,246,248,.88)
        );

    box-shadow:
        0 40px 100px
        rgba(27,72,83,.09);
}


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

.v2-contact-main {
    padding:
        65px 60px;

    border-right:
        1px solid
        rgba(18,105,126,.09);
}


.v2-contact-label {
    display: inline-block;

    margin-bottom: 38px;

    color: #72868c;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 2px;
}


.v2-contact-main h3 {
    max-width: 690px;

    color: #17282e;

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

    font-size:
        clamp(
            40px,
            4vw,
            58px
        );

    line-height: 1.02;

    letter-spacing: -2.5px;

    font-weight: 600;
}


.v2-contact-main h3 span {
    display: block;

    color: #168ca6;
}


.v2-contact-main > p {
    max-width: 630px;

    margin-top: 27px;

    color: #657980;

    font-size: 15px;

    line-height: 1.85;
}


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

.v2-contact-actions {
    margin-top: 42px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;
}


.v2-contact-actions > a {
    min-height: 88px;

    padding: 18px 19px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-radius: 17px;

    transition:
        transform .3s var(--ease),
        border-color .3s ease,
        box-shadow .3s ease;
}


.v2-contact-actions > a:hover {
    transform:
        translateY(-4px);
}


.v2-contact-actions div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.v2-contact-actions small {
    font-size: 6px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.v2-contact-actions strong {
    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 14px;

    font-weight: 600;
}


.v2-contact-actions > a > span {
    width: 39px;
    height: 39px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 50%;

    font-size: 14px;

    transition:
        transform .3s var(--ease);
}


.v2-contact-actions > a:hover > span {
    transform:
        rotate(45deg);
}


/* WHATSAPP */

.v2-contact-whatsapp {
    color: #ffffff;

    border:
        1px solid
        rgba(37,211,102,.25);

    background:
        linear-gradient(
            135deg,
            #31d76d,
            #25c95d
        );

    box-shadow:
        0 18px 45px
        rgba(37,211,102,.15);
}


.v2-contact-whatsapp small {
    color:
        rgba(255,255,255,.68);
}


.v2-contact-whatsapp > span {
    color: #ffffff;

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

    background:
        rgba(255,255,255,.10);
}


/* PHONE */

.v2-contact-call {
    color: #20363d;

    border:
        1px solid
        rgba(18,116,139,.12);

    background:
        rgba(255,255,255,.64);
}


.v2-contact-call small {
    color: #819298;
}


.v2-contact-call > span {
    color: #1089a3;

    border:
        1px solid
        rgba(22,141,168,.14);

    background:
        rgba(22,141,168,.04);
}


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

.v2-contact-side {
    position: relative;

    min-height: 560px;

    padding:
        45px;

    overflow: hidden;
}


.v2-contact-side-head {
    position: relative;

    z-index: 10;

    padding-bottom: 23px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid
        rgba(18,105,126,.09);
}


.v2-contact-side-head span,
.v2-contact-side-head small {
    color: #74878d;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.7px;
}


.v2-contact-side-head small {
    color: #26a873;
}


/* ==========================================================
   STATUS
========================================================== */

.v2-contact-status {
    position: relative;

    z-index: 10;

    margin-top: 32px;

    display: flex;

    align-items: center;

    gap: 15px;
}


.v2-contact-status-icon {
    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(27,169,118,.16);

    border-radius: 50%;

    background:
        rgba(38,174,119,.055);
}


.v2-contact-status-icon span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #2cc47f;

    box-shadow:
        0 0 8px
        rgba(44,196,127,.9),
        0 0 20px
        rgba(44,196,127,.30);
}


.v2-contact-status > div:last-child {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.v2-contact-status small {
    color: #88989d;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 1.4px;
}


.v2-contact-status strong {
    color: #273d44;

    font-size: 12px;

    font-weight: 700;
}


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

.v2-contact-info {
    position: relative;

    z-index: 10;

    margin-top: 34px;
}


.v2-contact-info > div {
    padding: 18px 0;

    display: grid;

    grid-template-columns:
        30px 1fr;

    align-items: center;

    gap: 13px;

    border-bottom:
        1px solid
        rgba(18,105,126,.08);
}


.v2-contact-info > div:last-child {
    border-bottom: 0;
}


.v2-contact-info > div > span {
    color: #158ba5;

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

    font-size: 7px;
}


.v2-contact-info div div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.v2-contact-info small {
    color: #8a999e;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 1.4px;
}


.v2-contact-info strong {
    color: #2a4148;

    font-size: 11px;
}


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

.v2-contact-system {
    position: absolute;

    right: -80px;
    bottom: -120px;

    width: 370px;
    height: 370px;

    opacity: .55;
}


.v2-contact-system-ring {
    position: absolute;

    left: 50%;
    top: 50%;

    border:
        1px solid
        rgba(22,141,168,.13);

    border-radius: 50%;

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


.v2-contact-system-ring:nth-child(1) {
    width: 330px;
    height: 330px;

    border-style: dashed;

    animation:
        v2ContactRing
        40s linear
        infinite;
}


.v2-contact-system-ring:nth-child(2) {
    width: 245px;
    height: 245px;

    animation:
        v2ContactRingReverse
        30s linear
        infinite;
}


.v2-contact-system-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 110px;
    height: 110px;

    display: grid;

    place-items: center;

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

    color: #39bdd8;

    border:
        1px solid
        rgba(33,177,207,.20);

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #16343d,
            #061317
        );

    box-shadow:
        0 25px 70px
        rgba(33,157,184,.20);

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

    font-size: 24px;

    font-weight: 700;
}


@keyframes v2ContactRing {

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}


@keyframes v2ContactRingReverse {

    to {
        transform:
            translate(-50%, -50%)
            rotate(-360deg);
    }

}


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

.v2-footer {
    padding:
        20px 0 25px;
}


.v2-footer-main {
    padding:
        35px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    border-top:
        1px solid
        rgba(18,105,126,.10);

    border-bottom:
        1px solid
        rgba(18,105,126,.10);
}


.v2-footer-brand {
    display: flex;

    align-items: center;

    gap: 13px;
}


.v2-footer-brand-mark {
    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    color: #168ba5;

    border:
        1px solid
        rgba(22,141,168,.18);

    background:
        rgba(22,141,168,.045);

    clip-path:
        polygon(
            25% 5%,
            75% 5%,
            95% 25%,
            95% 75%,
            75% 95%,
            25% 95%,
            5% 75%,
            5% 25%
        );

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

    font-size: 12px;

    font-weight: 700;
}


.v2-footer-brand > div:last-child {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.v2-footer-brand strong {
    color: #20363d;

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

    font-size: 13px;

    letter-spacing: 1.4px;
}


.v2-footer-brand small {
    color: #87969b;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 1.4px;
}


/* FOOTER NAV */

.v2-footer-nav {
    display: flex;

    align-items: center;

    gap: 27px;
}


.v2-footer-nav a {
    color: #687b82;

    font-size: 10px;

    font-weight: 700;

    transition:
        color .25s ease;
}


.v2-footer-nav a:hover {
    color: #1489a3;
}


/* FOOTER BOTTOM */

.v2-footer-bottom {
    padding-top: 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


.v2-footer-bottom p {
    color: #89989d;

    font-size: 9px;
}


.v2-footer-bottom > span {
    color: #9aa7ab;

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

    font-size: 6px;

    letter-spacing: 1.8px;
}


/* ==========================================================
   CONTACT + FOOTER / DARK
========================================================== */

html[data-theme="dark"]
.v2-contact-head h2 {

    color: #edf6f8;
}


html[data-theme="dark"]
.v2-contact-head h2 span {

    color: #67ddf7;
}


html[data-theme="dark"]
.v2-contact-head-grid > p {

    color: #829399;
}


html[data-theme="dark"]
.v2-contact-panel {

    border-color:
        rgba(111,227,251,.08);

    background:
        linear-gradient(
            145deg,
            rgba(8,14,17,.96),
            rgba(3,8,10,.95)
        );

    box-shadow:
        0 40px 100px
        rgba(0,0,0,.28);
}


html[data-theme="dark"]
.v2-contact-main {

    border-right-color:
        rgba(255,255,255,.055);
}


html[data-theme="dark"]
.v2-contact-label {

    color: #52666d;
}


html[data-theme="dark"]
.v2-contact-main h3 {

    color: #edf5f7;
}


html[data-theme="dark"]
.v2-contact-main h3 span {

    color: #68ddf7;
}


html[data-theme="dark"]
.v2-contact-main > p {

    color: #7d9096;
}


html[data-theme="dark"]
.v2-contact-call {

    color: #d7e6e9;

    border-color:
        rgba(111,227,251,.08);

    background:
        rgba(255,255,255,.025);
}


html[data-theme="dark"]
.v2-contact-call small {

    color: #586c73;
}


html[data-theme="dark"]
.v2-contact-call > span {

    color: #73e5fb;

    border-color:
        rgba(111,227,251,.10);

    background:
        rgba(111,227,251,.025);
}


html[data-theme="dark"]
.v2-contact-side-head {

    border-bottom-color:
        rgba(255,255,255,.055);
}


html[data-theme="dark"]
.v2-contact-side-head span {

    color: #566a71;
}


html[data-theme="dark"]
.v2-contact-status strong {

    color: #cfdee1;
}


html[data-theme="dark"]
.v2-contact-status small {

    color: #53676e;
}


html[data-theme="dark"]
.v2-contact-info > div {

    border-bottom-color:
        rgba(255,255,255,.05);
}


html[data-theme="dark"]
.v2-contact-info small {

    color: #53676e;
}


html[data-theme="dark"]
.v2-contact-info strong {

    color: #c8d8db;
}


html[data-theme="dark"]
.v2-footer-main {

    border-top-color:
        rgba(255,255,255,.055);

    border-bottom-color:
        rgba(255,255,255,.055);
}


html[data-theme="dark"]
.v2-footer-brand-mark {

    color: #74e5fb;

    border-color:
        rgba(111,227,251,.11);

    background:
        rgba(111,227,251,.025);
}


html[data-theme="dark"]
.v2-footer-brand strong {

    color: #dce9ec;
}


html[data-theme="dark"]
.v2-footer-brand small,

html[data-theme="dark"]
.v2-footer-nav a,

html[data-theme="dark"]
.v2-footer-bottom p,

html[data-theme="dark"]
.v2-footer-bottom > span {

    color: #596c73;
}


html[data-theme="dark"]
.v2-footer-nav a:hover {

    color: #72e3f9;
}


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

@media (max-width: 1050px) {

    .v2-contact {
        padding:
            105px 0
            115px;
    }


    .v2-contact-head-grid {
        grid-template-columns:
            1fr;

        gap: 25px;
    }


    .v2-contact-panel {
        grid-template-columns:
            1fr;
    }


    .v2-contact-main {
        border-right: 0;

        border-bottom:
            1px solid
            rgba(18,105,126,.09);
    }


    html[data-theme="dark"]
    .v2-contact-main {

        border-bottom-color:
            rgba(255,255,255,.055);
    }

}


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

@media (max-width: 650px) {

    .v2-contact {
        padding:
            85px 0
            80px;
    }


    .v2-contact-head {
        margin-bottom:
            34px;
    }


    .v2-contact-head h2 {
        font-size:
            clamp(
                40px,
                12vw,
                55px
            );

        line-height: 1.02;

        letter-spacing: -2.3px;
    }


    .v2-contact-head-grid > p {
        font-size: 14px;

        line-height: 1.7;
    }


    .v2-contact-panel {
        border-radius:
            22px;
    }


    .v2-contact-main {
        padding:
            38px 26px;
    }


    .v2-contact-main h3 {
        font-size:
            36px;

        letter-spacing:
            -1.7px;
    }


    .v2-contact-main > p {
        font-size:
            13px;

        line-height:
            1.75;
    }


    .v2-contact-actions {
        grid-template-columns:
            1fr;
    }


    .v2-contact-side {
        min-height:
            510px;

        padding:
            30px 25px;
    }


    .v2-footer-main {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .v2-footer-nav {
        width: 100%;

        flex-wrap:
            wrap;

        gap:
            15px 22px;
    }


    .v2-footer-bottom {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            8px;
    }

}

/* ==========================================================
   GLOBAL SECTION SPACING
   Tüm bölümlerde dengeli dikey ritim
========================================================== */


/* DESKTOP */

.v2-hero {
    padding-bottom: 56px;
}

.v2-services,
.v2-references,
.v2-about,
.v2-contact {
    padding-top: 56px;
    padding-bottom: 56px;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1050px) {

    .v2-hero {
        padding-bottom: 45px;
    }

    .v2-services,
    .v2-references,
    .v2-about,
    .v2-contact {
        padding-top: 45px;
        padding-bottom: 45px;
    }

}


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

@media (max-width: 650px) {

    .v2-hero {
        padding-bottom: 34px;
    }

    .v2-services,
    .v2-references,
    .v2-about,
    .v2-contact {
        padding-top: 34px;
        padding-bottom: 34px;
    }

}

/* ==========================================================
   MOBILE FIXED CONTACT BAR
========================================================== */

.v2-mobile-contact {
    display: none;
}


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

@media (max-width: 650px) {

    /*
    Alt butonların sayfa içeriğinin üstünü
    kapatmaması için footer altında biraz alan.
    */

    body {
        padding-bottom: 78px;
    }


    .v2-mobile-contact {
        position: fixed;

        z-index: 9990;

        left: 12px;
        right: 12px;
        bottom: 12px;

        display: grid;

        grid-template-columns:
            .76fr 1.24fr;

        gap: 9px;

        pointer-events: none;
    }


    .v2-mobile-contact > a {
        min-height: 54px;

        padding: 0 17px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 9px;

        border-radius: 16px;

        font-family:
            "Manrope",
            sans-serif;

        text-decoration: none;

        pointer-events: auto;

        -webkit-tap-highlight-color:
            transparent;

        backdrop-filter:
            blur(16px);

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

        box-shadow:
            0 12px 35px
            rgba(17,50,59,.14);

        transition:
            transform .2s ease;
    }


    .v2-mobile-contact > a:active {
        transform:
            scale(.97);
    }


    /* ======================================================
       CALL
    ====================================================== */

    .v2-mobile-call {
        color: #18333b;

        border:
            1px solid
            rgba(18,116,139,.15);

        background:
            rgba(249,253,254,.94);
    }


    .v2-mobile-call strong {
        font-size: 12px;

        font-weight: 800;
    }


    .v2-mobile-contact-icon {
        width: 27px;
        height: 27px;

        display: grid;

        place-items: center;

        color: #138ca7;

        border:
            1px solid
            rgba(22,141,168,.13);

        border-radius: 50%;

        background:
            rgba(22,141,168,.055);

        font-size: 12px;
    }


    /* ======================================================
       WHATSAPP
    ====================================================== */

    .v2-mobile-whatsapp {
        color: #ffffff;

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

        background:
            linear-gradient(
                135deg,
                #2bd46b,
                #20c65a
            );

        box-shadow:
            0 14px 38px
            rgba(37,211,102,.22);
    }


    .v2-mobile-whatsapp strong {
        font-size: 12px;

        font-weight: 800;
    }


    .v2-mobile-contact-arrow {
        width: 27px;
        height: 27px;

        display: grid;

        place-items: center;

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

        border-radius: 50%;

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

        font-size: 11px;
    }


    /* ======================================================
       DARK MODE
    ====================================================== */

    html[data-theme="dark"]
    .v2-mobile-call {

        color: #dcebed;

        border-color:
            rgba(111,227,251,.10);

        background:
            rgba(7,14,17,.92);

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


    html[data-theme="dark"]
    .v2-mobile-contact-icon {

        color: #70e2f9;

        border-color:
            rgba(111,227,251,.11);

        background:
            rgba(111,227,251,.035);
    }

}

/* ==========================================================
   DESKTOP FIXED WHATSAPP
========================================================== */

.v2-desktop-whatsapp {
    position: fixed;

    z-index: 9980;

    right: 26px;
    bottom: 26px;

    min-width: 178px;
    min-height: 58px;

    padding: 9px 10px 9px 15px;

    display: flex;
    align-items: center;

    gap: 11px;

    color: #ffffff;

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

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #2dd56c,
            #21c85b
        );

    box-shadow:
        0 18px 45px
        rgba(37,211,102,.22),
        0 8px 25px
        rgba(12,50,29,.12);

    text-decoration: none;

    transition:
        transform .3s cubic-bezier(.22,.8,.22,1),
        box-shadow .3s ease;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


.v2-desktop-whatsapp:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 25px 55px
        rgba(37,211,102,.27),
        0 10px 30px
        rgba(12,50,29,.16);
}


/* ONLINE DOT */

.v2-desktop-whatsapp-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 0 5px
        rgba(255,255,255,.12);
}


/* TEXT */

.v2-desktop-whatsapp > div {
    display: flex;
    flex-direction: column;

    gap: 1px;

    flex: 1;
}


.v2-desktop-whatsapp small {
    color:
        rgba(255,255,255,.68);

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 1.25px;
}


.v2-desktop-whatsapp strong {
    color: #ffffff;

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

    font-size: 12px;

    font-weight: 700;
}


/* ARROW */

.v2-desktop-whatsapp > i {
    width: 36px;
    height: 36px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

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

    border-radius: 50%;

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

    font-style: normal;

    font-size: 12px;

    transition:
        transform .3s cubic-bezier(.22,.8,.22,1);
}


.v2-desktop-whatsapp:hover > i {
    transform:
        rotate(45deg);
}


/* ==========================================================
   SUBTLE PULSE
========================================================== */

.v2-desktop-whatsapp-dot {
    animation:
        v2WhatsappPulse
        2.4s ease-in-out
        infinite;
}


@keyframes v2WhatsappPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px
            rgba(255,255,255,.10);
    }

    50% {
        box-shadow:
            0 0 0 8px
            rgba(255,255,255,.02);
    }

}


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

@media (max-width: 650px) {

    .v2-desktop-whatsapp {
        display: none;
    }

}


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

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

    .v2-desktop-whatsapp-dot {
        animation: none;
    }

}

/* ==========================================================
   NAVIGATION / ACTIVE SECTION
========================================================== */

html {
    scroll-behavior: smooth;
}


/* Sabit header nedeniyle bölüm başlığı header altında kalmasın */

#hizmetler,
#referanslar,
#hakkimizda,
#iletisim {
    scroll-margin-top: 105px;
}


/* ==========================================================
   DESKTOP ACTIVE LINK
========================================================== */

.v2-nav-links a {
    position: relative;
}


.v2-nav-links a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -9px;

    width: 0;
    height: 2px;

    transform: translateX(-50%);

    border-radius: 999px;

    background: #168ca6;

    transition:
        width .28s ease,
        opacity .28s ease;

    opacity: 0;
}


.v2-nav-links a.is-active {
    color: #1489a3;
}


.v2-nav-links a.is-active::after {
    width: 18px;
    opacity: 1;
}


/* DARK */

html[data-theme="dark"]
.v2-nav-links a.is-active {
    color: #71e3fa;
}


html[data-theme="dark"]
.v2-nav-links a::after {
    background: #71e3fa;
}


/* ==========================================================
   MOBILE MENU ACTIVE LINK
========================================================== */

.v2-mobile-menu a.is-active {
    color: #1489a3;
}


html[data-theme="dark"]
.v2-mobile-menu a.is-active {
    color: #71e3fa;
}

/* ==========================================================
   MOBILE HERO / PREMIUM FIRST SCREEN
========================================================== */

@media (max-width: 650px) {

    /* ------------------------------------------------------
       HERO WRAPPER
    ------------------------------------------------------ */

    .v2-hero {
        padding-top: 14px;
        padding-bottom: 34px;
    }


    .v2-hero .v2-shell {
        width: calc(100% - 20px);
    }


    .v2-hero-panel {
        min-height: auto;

        padding:
            34px 20px
            24px;

        display: grid;

        grid-template-columns: 1fr;

        gap: 0;

        overflow: hidden;

        border-radius: 25px;
    }


    /* ------------------------------------------------------
       CONTENT
    ------------------------------------------------------ */

    .v2-hero-content {
        position: relative;

        z-index: 20;

        max-width: none;
    }


    .v2-kicker {
        margin-bottom: 17px;

        font-size: 7px;

        letter-spacing: 1.6px;
    }


    .v2-hero h1 {
        max-width: 100%;

        margin: 0;

        font-size:
            clamp(
                44px,
                12.5vw,
                57px
            );

        line-height: .98;

        letter-spacing: -2.6px;
    }


    .v2-hero h1 span {
        max-width: 100%;

        margin-top: 7px;

        padding-bottom: 5px;
    }


    /* ------------------------------------------------------
       DESCRIPTION
    ------------------------------------------------------ */

    .v2-hero-description {
        max-width: 390px;

        margin-top: 21px;

        font-size: 13px;

        line-height: 1.7;
    }


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

    .v2-hero-actions {
        margin-top: 24px;

        display: grid;

        grid-template-columns: 1fr;

        gap: 9px;
    }


    .v2-button {
        width: 100%;

        min-height: 52px;

        padding: 0 17px;

        justify-content: space-between;

        border-radius: 14px;

        font-size: 10px;
    }


    .v2-button b {
        font-size: 13px;
    }


    /* ------------------------------------------------------
       TRUST / META
       Mobilde dikey yerine yatay
    ------------------------------------------------------ */

    .v2-hero-meta {
        max-width: none;

        margin-top: 27px;

        padding-top: 18px;

        display: grid;

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

        gap: 0;

        border-top:
            1px solid
            rgba(18,105,126,.10);
    }


    .v2-hero-meta > div {
        min-width: 0;

        padding:
            0 11px;

        display: flex;

        align-items: flex-start;

        gap: 7px;

        border-right:
            1px solid
            rgba(18,105,126,.08);
    }


    .v2-hero-meta > div:first-child {
        padding-left: 0;
    }


    .v2-hero-meta > div:last-child {
        padding-right: 0;

        border-right: 0;
    }


    .v2-hero-meta span {
        flex-shrink: 0;

        font-size: 6px;
    }


    .v2-hero-meta p {
        margin: 0;

        font-size: 7px;

        line-height: 1.35;
    }


    .v2-hero-meta strong {
        display: block;

        font-size: 7px;
    }


    /* ------------------------------------------------------
       CORE
    ------------------------------------------------------ */

    .v2-core-stage {
        position: relative;

        width: 100%;

        height: 285px;

        min-height: 0;

        margin-top: 8px;

        overflow: visible;
    }


    .v2-logo-device {
        width: 174px;
        height: 174px;

        border-radius: 35px;
    }


    .v2-logo-device img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        border-radius: inherit;
    }


    /* Mobilde servis kutularını kaldır.
       Ana görsel daha güçlü görünür. */

    .v2-service-node {
        display: none;
    }


    /* ------------------------------------------------------
       CORE RINGS
    ------------------------------------------------------ */

    .v2-ring-1 {
        width: 265px;
        height: 265px;
    }


    .v2-ring-2 {
        width: 220px;
        height: 220px;
    }


    .v2-ring-3 {
        width: 185px;
        height: 185px;
    }


    .v2-core-backlight {
        width: 235px;
        height: 235px;

        opacity: .75;
    }


    /* ------------------------------------------------------
       PANEL CODE
    ------------------------------------------------------ */

    .v2-panel-code {
        display: none;
    }


    /* ------------------------------------------------------
       DARK MODE META DIVIDERS
    ------------------------------------------------------ */

    html[data-theme="dark"]
    .v2-hero-meta {

        border-top-color:
            rgba(255,255,255,.065);
    }


    html[data-theme="dark"]
    .v2-hero-meta > div {

        border-right-color:
            rgba(255,255,255,.055);
    }

}

/* ==========================================================
   MOBILE HERO / SAFE PREMIUM ENHANCEMENT
========================================================== */

@media (max-width: 650px) {

    .v2-core-stage {
        position: relative;
        height: 285px;
        margin-top: 8px;
        overflow: visible;
    }

    .v2-service-node {
        display: none !important;
    }

    .v2-logo-device {
        width: 182px;
        height: 182px;

        box-shadow:
            0 28px 70px rgba(15, 104, 125, .22),
            0 0 60px rgba(61, 214, 241, .15);

        animation:
            v2SafeCoreFloat
            4s ease-in-out
            infinite;
    }

    @keyframes v2SafeCoreFloat {

        0%,
        100% {
            transform:
                perspective(1200px)
                rotateY(-4deg)
                rotateX(2deg)
                translateY(0);
        }

        50% {
            transform:
                perspective(1200px)
                rotateY(-4deg)
                rotateX(2deg)
                translateY(-6px);
        }

    }

    .v2-core-backlight {
        width: 250px;
        height: 250px;
        opacity: .95;
    }

    .v2-ring-1 {
        width: 270px;
        height: 270px;
    }

    .v2-ring-2 {
        width: 225px;
        height: 225px;
    }

    .v2-ring-3 {
        display: block;

        width: 195px;
        height: 195px;

        opacity: .35;
    }

    .v2-device-status {
        bottom: 12px;

        padding: 6px 9px;

        font-size: 5px;

        letter-spacing: 1.2px;
    }

}


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

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

    .v2-logo-device {
        animation: none !important;
    }

}

/* ==========================================================
   TK TECH / MOBILE BOOT SCREEN
========================================================== */

.v2-boot {
    display: none;
}


@media (max-width: 0px) {

    html.tk-boot-pending
    .v2-boot {

        position: fixed;

        z-index: 999999;

        inset: 0;

        display: flex;

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

        overflow: hidden;

        background:
            radial-gradient(
                circle at 50% 46%,
                rgba(49, 201, 231, .10),
                transparent 30%
            ),
            #020608;

        opacity: 1;

        visibility: visible;

        transition:
            opacity .3s ease,
            visibility .3s ease,
            transform .55s cubic-bezier(.7,0,.2,1);
    }


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

    .v2-boot-grid {
        position: absolute;

        inset: -40px;

        opacity: .25;

        background-image:

            linear-gradient(
                rgba(86, 218, 245, .055) 1px,
                transparent 1px
            ),

            linear-gradient(
                90deg,
                rgba(86, 218, 245, .055) 1px,
                transparent 1px
            );

        background-size:
            44px 44px;

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

        -webkit-mask-image:
            radial-gradient(
                circle,
                black,
                transparent 72%
            );

        animation:
            v2BootGrid
            5s linear
            infinite;
    }


    @keyframes v2BootGrid {

        to {
            transform:
                translateY(44px);
        }

    }


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

    .v2-boot-glow {
        position: absolute;

        width: 340px;
        height: 340px;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                rgba(61, 218, 247, .15),
                rgba(61, 218, 247, .045) 38%,
                transparent 70%
            );

        filter:
            blur(18px);

        animation:
            v2BootGlow
            2s ease-in-out
            infinite alternate;
    }


    @keyframes v2BootGlow {

        from {
            opacity: .55;
            transform: scale(.9);
        }

        to {
            opacity: 1;
            transform: scale(1.1);
        }

    }


    /* ======================================================
       CONTENT
    ====================================================== */

    .v2-boot-content {
        position: relative;

        z-index: 5;

        width:
            min(
                310px,
                calc(100% - 60px)
            );

        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;

        opacity: 0;

        transform:
            translateY(12px)
            scale(.97);

        animation:
            v2BootAppear
            .4s ease
            forwards;
    }


    @keyframes v2BootAppear {

        to {
            opacity: 1;

            transform:
                translateY(0)
                scale(1);
        }

    }


    /* ======================================================
       CORE
    ====================================================== */

    .v2-boot-core {
        position: relative;

        width: 122px;
        height: 122px;

        display: grid;
        place-items: center;

        margin-bottom: 30px;
    }


    .v2-boot-mark {
        position: relative;

        z-index: 4;

        width: 76px;
        height: 76px;

        display: grid;
        place-items: center;

        color: #aef4ff;

        border:
            1px solid
            rgba(111, 227, 251, .25);

        background:
            linear-gradient(
                145deg,
                rgba(18, 43, 51, .95),
                rgba(3, 10, 13, .98)
            );

        clip-path:
            polygon(
                25% 5%,
                75% 5%,
                95% 25%,
                95% 75%,
                75% 95%,
                25% 95%,
                5% 75%,
                5% 25%
            );

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

        font-size: 22px;

        font-weight: 700;

        letter-spacing: -1px;

        box-shadow:
            0 0 38px
            rgba(74, 218, 248, .15);

        animation:
            v2BootCore
            .75s cubic-bezier(.2,.8,.2,1)
            both;
    }


    @keyframes v2BootCore {

        0% {
            opacity: 0;
            transform: scale(.65);
        }

        60% {
            opacity: 1;
            transform: scale(1.08);
        }

        100% {
            opacity: 1;
            transform: scale(1);
        }

    }


    /* ======================================================
       RINGS
    ====================================================== */

    .v2-boot-ring {
        position: absolute;

        left: 50%;
        top: 50%;

        border-radius: 50%;

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


    .v2-boot-ring-one {
        width: 108px;
        height: 108px;

        border:
            1px solid
            rgba(105, 228, 252, .18);

        animation:
            v2BootRingCW
            2.8s linear
            infinite;
    }


    .v2-boot-ring-one::before {
        content: "";

        position: absolute;

        width: 5px;
        height: 5px;

        left: -3px;
        top: 50%;

        border-radius: 50%;

        background: #6eeaff;

        box-shadow:
            0 0 12px
            rgba(110,234,255,.95);
    }


    .v2-boot-ring-two {
        width: 134px;
        height: 134px;

        border:
            1px dashed
            rgba(105, 228, 252, .10);

        animation:
            v2BootRingCCW
            4s linear
            infinite;
    }


    @keyframes v2BootRingCW {

        from {
            transform:
                translate(-50%, -50%)
                rotate(0deg);
        }

        to {
            transform:
                translate(-50%, -50%)
                rotate(360deg);
        }

    }


    @keyframes v2BootRingCCW {

        from {
            transform:
                translate(-50%, -50%)
                rotate(360deg);
        }

        to {
            transform:
                translate(-50%, -50%)
                rotate(0deg);
        }

    }


    /* ======================================================
       BRAND
    ====================================================== */

    .v2-boot-brand {
        display: flex;

        flex-direction: column;

        gap: 4px;
    }


    .v2-boot-brand strong {
        color: #f0fafc;

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

        font-size: 22px;

        font-weight: 700;

        letter-spacing: 3px;
    }


    .v2-boot-brand small {
        color: #4e666e;

        font-size: 6px;

        font-weight: 800;

        letter-spacing: 2px;
    }


    /* ======================================================
       STATUS
    ====================================================== */

    .v2-boot-status {
        width: 100%;

        margin-top: 33px;

        display: flex;

        align-items: center;

        justify-content:
            space-between;

        color: #60757c;

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

        font-size: 7px;

        font-weight: 600;

        letter-spacing: 1.4px;
    }


    .v2-boot-status strong {
        color: #7ceaff;

        font-size: 8px;
    }


    /* ======================================================
       PROGRESS
    ====================================================== */

    .v2-boot-progress {
        position: relative;

        width: 100%;
        height: 2px;

        margin-top: 10px;

        overflow: hidden;

        background:
            rgba(255,255,255,.06);
    }


    .v2-boot-progress > span {
        position: absolute;

        left: 0;
        top: 0;

        width: 0%;
        height: 100%;

        background:
            linear-gradient(
                90deg,
                #1e94ad,
                #72e8ff
            );

        box-shadow:
            0 0 14px
            rgba(79, 222, 248, .7);

        transition:
            width .18s ease;
    }


    /* ======================================================
       ONLINE
    ====================================================== */

    .v2-boot-online {
        margin-top: 16px;

        display: flex;

        align-items: center;

        gap: 7px;

        color: #576d74;

        font-size: 6px;

        font-weight: 800;

        letter-spacing: 1.7px;

        opacity: .35;

        transition:
            color .25s ease,
            opacity .25s ease;
    }


    .v2-boot-online i {
        width: 5px;
        height: 5px;

        border-radius: 50%;

        background: #496267;
    }


    .v2-boot.is-online
    .v2-boot-online {
        color: #7fe6bd;

        opacity: 1;
    }


    .v2-boot.is-online
    .v2-boot-online i {
        background: #67eab8;

        box-shadow:
            0 0 9px
            rgba(103,234,184,.9);
    }


    /* ======================================================
       LEAVING
    ====================================================== */

    .v2-boot.is-leaving {
        opacity: 0;

        transform:
            scale(1.035);

        pointer-events: none;
    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

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

    .v2-boot {
        display: none !important;
    }

}

/* ==========================================================
   TK TECH / DESKTOP BOOT ENHANCEMENT
========================================================== */

@media (min-width: 651px) {

    .v2-boot-content {
        width: 390px;
    }

    .v2-boot-core {
        width: 165px;
        height: 165px;
        margin-bottom: 38px;
    }

    .v2-boot-mark {
        width: 100px;
        height: 100px;

        font-size: 28px;

        box-shadow:
            0 0 55px
            rgba(74,218,248,.18);
    }

    .v2-boot-ring-one {
        width: 140px;
        height: 140px;
    }

    .v2-boot-ring-two {
        width: 175px;
        height: 175px;
    }

    .v2-boot-brand strong {
        font-size: 27px;
        letter-spacing: 4px;
    }

    .v2-boot-brand small {
        font-size: 7px;
        letter-spacing: 2.4px;
    }

    .v2-boot-status {
        margin-top: 38px;
        font-size: 8px;
    }

    .v2-boot-status strong {
        font-size: 9px;
    }

    .v2-boot-online {
        margin-top: 18px;
        font-size: 7px;
    }

    .v2-boot-glow {
        width: 500px;
        height: 500px;
    }

}