/* =========================================================
   USS TEKNOLOJİ VE DANIŞMANLIK
   HOME PAGE
========================================================= */


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

.hero {
    position: relative;
    min-height: 760px;
    padding-top: 78px;
    overflow: hidden;
    background: radial-gradient( circle at 70% 35%, rgba(0, 148, 255, .14), transparent 34% ), linear-gradient( 110deg, #020b16 0%, #051725 48%, #03111e 100% );
}


.hero-grid {
    position: absolute;
    inset: 0;
    opacity: .10;
    pointer-events: none;
    background-image: linear-gradient( rgba(38, 174, 255, .18) 1px, transparent 1px ), linear-gradient( 90deg, rgba(38, 174, 255, .18) 1px, transparent 1px );
    background-size: 72px 72px;
}


.hero::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 78px;
    bottom: 0;
    width: 1px;
    background: linear-gradient( transparent, rgba(67, 211, 255, .14), transparent );
    pointer-events: none;
}


.hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(120px);
}


.hero-glow-one {
    width: 520px;
    height: 520px;
    right: 3%;
    top: 8%;
    background: rgba(0, 139, 255, .16);
}


.hero-glow-two {
    width: 300px;
    height: 300px;
    left: -100px;
    bottom: -80px;
    background: rgba(36, 209, 255, .08);
}


.hero-container {
    position: relative;
    z-index: 2;
    min-height: calc(760px - 78px);
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(560px, 1.1fr);
    align-items: center;
    gap: 65px;
}


.hero-content {
    position: relative;
    z-index: 4;
    padding: 70px 0;
}


.hero-eyebrow {
    display: block;
    margin-bottom: 19px;
    color: #43d6ff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .17em;
}


.hero h1 {
    max-width: 720px;
    margin: 0 0 25px;
    color: #ffffff;
    font-size: clamp( 51px, 5.2vw, 77px );
    font-weight: 800;
    line-height: .99;
    letter-spacing: -.058em;
}


    .hero h1 span {
        display: block;
        color: #4bd5ff;
    }


.hero-description {
    max-width: 690px;
    margin: 0;
    color: #a6b7c5;
    font-size: 14px;
    line-height: 1.85;
}


.hero-actions {
    margin-top: 31px;
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}


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

.hero-support {
    margin-top: 39px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 680px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}


.support-item {
    min-width: 0;
    padding: 20px 18px 0 0;
    display: flex;
    align-items: center;
    gap: 12px;
}


    .support-item + .support-item {
        padding-left: 18px;
        border-left: 1px solid rgba(255, 255, 255, .08);
    }


.support-icon {
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(68, 214, 255, .24);
    border-radius: 50%;
    color: #43d6ff;
    background: rgba(13, 122, 189, .09);
    font-size: 7px;
    font-weight: 800;
}


.support-item strong {
    display: block;
    margin-bottom: 4px;
    color: #dbe6ed;
    font-size: 9px;
}


.support-item span {
    display: block;
    color: #687f90;
    font-size: 7px;
    line-height: 1.4;
}


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

.hero-visual {
    position: relative;
    align-self: stretch;
    min-height: 680px;
}


.server-scene {
    position: absolute;
    inset: 0 calc( (100vw - min(100vw - 80px, 1440px)) / -2 ) 0 0;
    min-width: 650px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 210px minmax(260px, 1fr) 210px;
    align-items: stretch;
    perspective: 1000px;
    background: linear-gradient( 90deg, rgba(1, 15, 27, .94), rgba(3, 50, 78, .32) 47%, rgba(1, 17, 30, .95) );
}


    .server-scene::before {
        content: "";
        position: absolute;
        z-index: 0;
        left: 50%;
        top: 0;
        width: 210px;
        height: 100%;
        transform: translateX(-50%);
        background: linear-gradient( 90deg, transparent, rgba(48, 189, 255, .09), transparent );
    }


    .server-scene::after {
        content: "";
        position: absolute;
        z-index: 0;
        left: 50%;
        bottom: -190px;
        width: 580px;
        height: 450px;
        transform: translateX(-50%) perspective(500px) rotateX(72deg);
        background: repeating-linear-gradient( 90deg, rgba(58, 193, 255, .20) 0, rgba(58, 193, 255, .20) 1px, transparent 1px, transparent 54px ), repeating-linear-gradient( 0deg, rgba(58, 193, 255, .12) 0, rgba(58, 193, 255, .12) 1px, transparent 1px, transparent 50px );
        opacity: .5;
    }


.hero .server {
    position: relative;
    z-index: 2;
    width: auto;
    padding: 32px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    border-radius: 0;
    box-shadow: none;
}


.server-left {
    transform: perspective(1000px) rotateY(7deg);
    transform-origin: left center;
    border-right: 1px solid rgba(48, 200, 255, .16);
    background: linear-gradient( 90deg, rgba(3, 18, 31, .98), rgba(5, 40, 63, .92) );
}


.server-right {
    transform: perspective(1000px) rotateY(-7deg);
    transform-origin: right center;
    border-left: 1px solid rgba(48, 200, 255, .16);
    background: linear-gradient( 90deg, rgba(5, 40, 63, .92), rgba(3, 18, 31, .98) );
}


.server-unit {
    position: relative;
    min-height: 56px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(66, 204, 255, .13);
    background: linear-gradient( 100deg, rgba(11, 50, 76, .90), rgba(5, 24, 40, .94) );
    box-shadow: inset 0 0 22px rgba(29, 177, 255, .035);
}


    .server-unit::after {
        content: "";
        position: absolute;
        left: 48px;
        right: 12px;
        height: 1px;
        background: linear-gradient( 90deg, rgba(56, 204, 255, .34), transparent );
    }


    .server-unit span {
        position: relative;
        z-index: 2;
        width: 5px;
        height: 5px;
        margin: 0;
        border-radius: 50%;
        background: #30dcff;
        box-shadow: 0 0 8px rgba(48, 220, 255, .75);
    }


        .server-unit span:nth-child(2) {
            background: #0fa2ff;
        }


        .server-unit span:nth-child(3) {
            opacity: .55;
        }


.server-center {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 180deg, rgba(2, 30, 49, .18), rgba(12, 107, 155, .09) 60%, rgba(4, 23, 39, .72) );
}


.technology-card {
    width: 210px;
    padding: 33px 30px;
    border: 1px solid rgba(65, 212, 255, .24);
    background: rgba(4, 42, 65, .64);
    backdrop-filter: blur(10px);
    box-shadow: 0 25px 70px rgba(0, 0, 0, .28);
}


    .technology-card > span {
        display: block;
        margin-bottom: 16px;
        color: #4cd8ff;
        font-size: 7px;
        font-weight: 800;
        letter-spacing: .12em;
    }


    .technology-card strong {
        display: block;
        color: #d9f0fa;
        font-size: 23px;
        font-weight: 600;
        line-height: 1.35;
    }


.tech-line {
    width: 32px;
    height: 2px;
    margin-top: 24px;
    background: #41d6ff;
    box-shadow: 0 0 12px rgba(65, 214, 255, .6);
}


/* =========================================================
   TRUST
========================================================= */

.hero + .trust-strip {
    position: relative;
    padding: 0;
    background: #03111d;
    border-top: 1px solid rgba(62, 204, 255, .11);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}


.trust-strip .trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-left: 1px solid rgba(255, 255, 255, .07);
}


.trust-strip .trust-item {
    min-height: 112px;
    padding: 23px 27px;
    display: flex;
    align-items: center;
    gap: 18px;
    border-right: 1px solid rgba(255, 255, 255, .08);
}


.trust-number {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(58, 208, 255, .24);
    border-radius: 50%;
    color: #40d3ff;
    font-size: 8px;
    font-weight: 800;
}


.trust-item strong {
    display: block;
    margin-bottom: 5px;
    color: white;
    font-size: 11px;
}


.trust-item p {
    margin: 0;
    color: #788e9f;
    font-size: 8px;
}


/* =========================================================
   COMMON LIGHT HEADINGS
========================================================= */

.home-page-placeholder {
    display: none;
}


.services-section .section-header,
.sectors-heading,
.process-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 70px;
}


    .services-section .section-heading,
    .sectors-heading > div,
    .process-heading > div {
        max-width: 750px;
    }


        .services-section .section-heading h2,
        .sectors-heading h2,
        .process-heading h2 {
            margin: 10px 0 0;
            color: #081a2d;
            font-size: clamp( 37px, 4vw, 57px );
            line-height: 1.06;
            letter-spacing: -.055em;
        }


            .services-section .section-heading h2 span,
            .sectors-heading h2 span,
            .process-heading h2 span {
                display: block;
                color: #1174cf;
            }


    .services-section .section-intro,
    .sectors-heading > p,
    .process-heading > p {
        max-width: 450px;
    }


        .services-section .section-intro p,
        .sectors-heading > p,
        .process-heading > p {
            color: #687b8c;
            font-size: 12px;
            line-height: 1.85;
        }


.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #0879d1;
    font-size: 9px;
    font-weight: 800;
}


    .text-link:hover {
        gap: 15px;
    }


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

.services-section {
    position: relative;
    padding: 115px 0;
    color: #102438;
    background: linear-gradient( 180deg, #f8fafc, #edf3f7 );
}


    .services-section .section-header {
        margin-bottom: 55px;
    }


    .services-section .services-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border-top: 1px solid #d5e1e9;
        border-left: 1px solid #d5e1e9;
    }


    .services-section .service-card {
        position: relative;
        min-width: 0;
        min-height: 335px;
        padding: 27px;
        display: flex;
        flex-direction: column;
        border: 0;
        border-right: 1px solid #d5e1e9;
        border-bottom: 1px solid #d5e1e9;
        border-radius: 0;
        color: #142b3f;
        background: rgba(255, 255, 255, .54);
        box-shadow: none;
        transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
    }


        .services-section .service-card:hover {
            z-index: 3;
            transform: translateY(-5px);
            background: #ffffff;
            box-shadow: 0 22px 55px rgba(16, 49, 75, .09);
        }


.service-card-top {
    margin-bottom: 38px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}


.services-section .service-number {
    position: static;
    color: #91a4b3;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .07em;
}


.services-section .service-icon {
    width: 56px;
    height: 56px;
    margin: 0;
    display: grid;
    place-items: center;
    border: 1px solid #bcddf4;
    color: #0877d1;
    background: #f3faff;
    font-size: 8px;
    font-weight: 800;
    box-shadow: 0 12px 25px rgba(9, 115, 194, .05);
}


.services-section .service-card h3 {
    min-height: 50px;
    margin: 0 0 14px;
    color: #163047;
    font-size: 17px;
    line-height: 1.4;
}


.services-section .service-card > p {
    margin: 0 0 25px;
    color: #687d8f;
    font-size: 10px;
    line-height: 1.8;
}


.services-section .service-card-link {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 17px;
    border-top: 1px solid #e0e7ed;
    color: #0877d1;
    font-size: 9px;
    font-weight: 800;
}


    .services-section .service-card-link span {
        transition: transform .2s ease;
    }


.services-section .service-card:hover
.service-card-link span {
    transform: translateX(4px);
}


/* =========================================================
   PROBLEM / SOLUTION
========================================================= */

.problem-section {
    position: relative;
    padding: 105px 0;
    overflow: hidden;
    background: linear-gradient( 110deg, #020d18, #051c2e 65%, #03111e );
}


.problem-background {
    position: absolute;
    inset: 0;
    opacity: .13;
    background-image: linear-gradient( rgba(53, 200, 255, .16) 1px, transparent 1px ), linear-gradient( 90deg, rgba(53, 200, 255, .16) 1px, transparent 1px );
    background-size: 75px 75px;
}


.problem-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .9fr .72fr .8fr;
    align-items: center;
    gap: 65px;
}


.problem-content h2 {
    margin: 10px 0 20px;
    color: white;
    font-size: clamp( 39px, 4vw, 56px );
    line-height: 1.08;
    letter-spacing: -.05em;
}


    .problem-content h2 span {
        display: block;
        color: #48d4ff;
    }


.problem-content > p {
    max-width: 560px;
    margin-bottom: 30px;
    color: #94a9ba;
    font-size: 12px;
    line-height: 1.85;
}


.problem-list {
    border-top: 1px solid rgba(255, 255, 255, .08);
}


.problem-item {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}


.problem-check {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(62, 213, 255, .32);
    border-radius: 50%;
    color: #42d8ff;
    font-size: 9px;
}


.problem-item p {
    margin: 0;
    color: #b0bec8;
    font-size: 10px;
    line-height: 1.5;
}


/* =========================================================
   PROBLEM VISUAL
========================================================= */

.problem-visual {
    min-height: 430px;
}


.problem-server {
    position: relative;
    height: 430px;
    overflow: hidden;
    border: 1px solid rgba(65, 209, 255, .13);
    background: radial-gradient( circle at 40% 45%, rgba(16, 139, 211, .20), transparent 55% ), #031522;
}


.problem-rack {
    position: absolute;
    left: 25px;
    top: 30px;
    bottom: 30px;
    width: 57%;
    padding: 17px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border: 1px solid rgba(63, 207, 255, .19);
    background: rgba(3, 28, 45, .91);
}


.problem-rack-unit {
    flex: 1;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid rgba(70, 202, 255, .13);
    background: linear-gradient( 90deg, #082b42, #051b2d );
}


.rack-leds {
    display: flex;
    gap: 5px;
}


    .rack-leds span {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #40d9ff;
        box-shadow: 0 0 7px rgba(64, 217, 255, .7);
    }


        .rack-leds span:nth-child(2) {
            background: #1ca3ff;
        }


        .rack-leds span:nth-child(3) {
            opacity: .45;
        }


.rack-line {
    flex: 1;
    height: 1px;
    background: linear-gradient( 90deg, rgba(63, 209, 255, .34), transparent );
}


.problem-message {
    position: absolute;
    z-index: 4;
    right: 17px;
    bottom: 31px;
    width: 185px;
    padding: 24px;
    border: 1px solid rgba(72, 213, 255, .20);
    background: rgba(3, 27, 44, .91);
    backdrop-filter: blur(12px);
}


    .problem-message small {
        display: block;
        margin-bottom: 11px;
        color: #42d5ff;
        font-size: 6px;
        font-weight: 800;
    }


    .problem-message strong {
        display: block;
        color: white;
        white-space: pre-line;
        font-size: 20px;
        line-height: 1.25;
    }


    .problem-message > span {
        display: block;
        width: 27px;
        height: 2px;
        margin-top: 20px;
        background: #42d5ff;
    }


/* =========================================================
   PROCESS
========================================================= */

.process-section {
    padding: 105px 0;
    color: #102438;
    background: #f7f9fb;
}


.process-heading {
    margin-bottom: 55px;
}


.process-section .process-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px solid #d5e1e9;
    border-left: 1px solid #d5e1e9;
}


.process-section .process-card {
    position: relative;
    min-width: 0;
    min-height: 315px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    border: 0;
    border-right: 1px solid #d5e1e9;
    border-bottom: 1px solid #d5e1e9;
    color: #142c40;
    background: rgba(255, 255, 255, .52);
}


.process-top {
    margin-bottom: 41px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.process-number {
    color: #0877d1;
    font-size: 9px;
    font-weight: 800;
}


.process-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid #bbdcf3;
    border-radius: 50%;
    color: #0878d1;
    background: #f2f9fe;
    font-size: 15px;
    box-shadow: inset 0 0 0 7px rgba(9, 119, 209, .035);
}


.process-section .process-card h3 {
    margin: 0 0 12px;
    color: #153047;
    font-size: 15px;
}


.process-section .process-card p {
    margin: 0;
    color: #708291;
    font-size: 9px;
    line-height: 1.8;
}


/* =========================================================
   NUMBERS
========================================================= */

.numbers-section {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
    background: linear-gradient( 105deg, #02101d, #06243a 55%, #031522 );
}


.numbers-glow {
    position: absolute;
    right: 10%;
    top: -160px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(0, 139, 255, .12);
    filter: blur(120px);
}


.numbers-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .9fr 1.35fr;
    align-items: center;
    gap: 80px;
}


.numbers-heading h2 {
    margin: 10px 0 20px;
    color: white;
    font-size: clamp( 36px, 3.7vw, 52px );
    line-height: 1.08;
    letter-spacing: -.05em;
}


    .numbers-heading h2 span {
        display: block;
        color: #46d5ff;
    }


.numbers-heading p {
    max-width: 520px;
    margin: 0;
    color: #8fa5b5;
    font-size: 11px;
    line-height: 1.85;
}


.numbers-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-left: 1px solid rgba(255, 255, 255, .08);
}


.number-card {
    min-height: 175px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}


    .number-card strong {
        display: block;
        margin-bottom: 14px;
        color: #49d6ff;
        font-size: clamp( 33px, 3vw, 47px );
        font-weight: 700;
        line-height: 1;
    }


        .number-card strong span {
            font-size: .55em;
        }


    .number-card p {
        margin: 0;
        color: #9badba;
        font-size: 9px;
        line-height: 1.6;
    }


/* =========================================================
   SECTORS
========================================================= */

.sectors-section {
    padding: 110px 0;
    color: #102438;
    background: linear-gradient( 180deg, #edf3f7, #f8fafc );
}


.sectors-heading {
    margin-bottom: 53px;
}


.sectors-section .sector-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px solid #d6e1e9;
    border-left: 1px solid #d6e1e9;
}


.sectors-section .sector-card {
    position: relative;
    min-width: 0;
    min-height: 255px;
    padding: 23px;
    border: 0;
    border-right: 1px solid #d6e1e9;
    border-bottom: 1px solid #d6e1e9;
    background: rgba(255, 255, 255, .48);
    transition: transform .25s ease, background .25s ease;
}


    .sectors-section .sector-card:hover {
        z-index: 2;
        transform: translateY(-4px);
        background: white;
    }


.sector-index {
    display: block;
    margin-bottom: 26px;
    color: #8ca1b2;
    font-size: 8px;
    font-weight: 800;
}


.sector-symbol {
    width: 50px;
    height: 50px;
    margin-bottom: 29px;
    display: grid;
    place-items: center;
    border: 1px solid #bddcf2;
    color: #0877d1;
    background: #f2f9fe;
    font-size: 7px;
    font-weight: 800;
}


.sector-card h3 {
    margin: 0 0 10px;
    color: #173047;
    font-size: 14px;
}


.sector-card p {
    margin: 0;
    color: #6f8293;
    font-size: 9px;
    line-height: 1.75;
}


/* =========================================================
   SECTOR CTA
========================================================= */

.sector-cta {
    margin-top: 30px;
    min-height: 145px;
    padding: 30px 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    color: white;
    background: linear-gradient( 115deg, #061c2f, #073152 );
}


    .sector-cta > div {
        max-width: 750px;
    }


        .sector-cta > div > span {
            display: block;
            margin-bottom: 9px;
            color: #45d6ff;
            font-size: 7px;
            font-weight: 800;
            letter-spacing: .13em;
        }


    .sector-cta h3 {
        margin: 0;
        color: white;
        font-size: 20px;
        line-height: 1.45;
    }


/* =========================================================
   WHY USS
========================================================= */

.why-section {
    position: relative;
    padding: 115px 0;
    overflow: hidden;
    background: linear-gradient( 115deg, #020d18, #051b2e );
}


.why-decoration {
    position: absolute;
    right: -230px;
    top: -220px;
    width: 650px;
    height: 650px;
    border: 1px solid rgba(65, 211, 255, .08);
    border-radius: 50%;
}


    .why-decoration::before,
    .why-decoration::after {
        content: "";
        position: absolute;
        border: 1px solid rgba(65, 211, 255, .06);
        border-radius: 50%;
    }


    .why-decoration::before {
        inset: 70px;
    }


    .why-decoration::after {
        inset: 145px;
    }


.why-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    align-items: start;
    gap: 85px;
}


.why-content {
    position: sticky;
    top: 125px;
}


    .why-content h2 {
        margin: 10px 0 22px;
        color: white;
        font-size: clamp( 38px, 4vw, 56px );
        line-height: 1.08;
        letter-spacing: -.055em;
    }


        .why-content h2 span {
            display: block;
            color: #48d5ff;
        }


.why-description {
    margin-bottom: 28px;
    color: #91a6b6;
    font-size: 12px;
    line-height: 1.9;
}


.why-highlight {
    margin-bottom: 30px;
    padding: 21px 22px;
    border-left: 2px solid #42d6ff;
    background: rgba(255, 255, 255, .025);
}


    .why-highlight span {
        display: block;
        margin-bottom: 9px;
        color: #42d6ff;
        font-size: 7px;
        font-weight: 800;
    }


    .why-highlight strong {
        color: #c5d4dd;
        font-size: 11px;
        line-height: 1.7;
    }


.why-section .why-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-left: 1px solid rgba(255, 255, 255, .08);
}


.why-section .why-card {
    position: relative;
    min-width: 0;
    min-height: 305px;
    padding: 26px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .014);
}


.why-number {
    display: block;
    margin-bottom: 30px;
    color: #536f82;
    font-size: 8px;
    font-weight: 800;
}


.why-icon {
    width: 51px;
    height: 51px;
    margin-bottom: 27px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(65, 211, 255, .20);
    color: #43d5ff;
    background: rgba(10, 122, 188, .06);
    font-size: 7px;
    font-weight: 800;
}


.why-card h3 {
    margin: 0 0 11px;
    color: white;
    font-size: 15px;
}


.why-card p {
    margin: 0;
    color: #8198aa;
    font-size: 10px;
    line-height: 1.8;
}


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

.contact-cta-section {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
    background: linear-gradient( 115deg, #03101d, #073657 );
}


.contact-grid-bg {
    position: absolute;
    inset: 0;
    opacity: .13;
    background-image: linear-gradient( rgba(63, 207, 255, .16) 1px, transparent 1px ), linear-gradient( 90deg, rgba(63, 207, 255, .16) 1px, transparent 1px );
    background-size: 70px 70px;
}


.contact-glow {
    position: absolute;
    right: -100px;
    top: -220px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: rgba(0, 145, 255, .14);
    filter: blur(120px);
}


.contact-cta-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr .9fr;
    align-items: center;
    gap: 90px;
}


.contact-cta-content h2 {
    margin: 10px 0 20px;
    color: white;
    font-size: clamp( 39px, 4vw, 56px );
    line-height: 1.08;
    letter-spacing: -.05em;
}


    .contact-cta-content h2 span {
        display: block;
        color: #48d5ff;
    }


.contact-cta-content p {
    max-width: 680px;
    margin: 0;
    color: #90a7b8;
    font-size: 12px;
    line-height: 1.85;
}


.contact-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.contact-main-button,
.contact-support-button {
    min-height: 85px;
    padding: 18px 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    border: 1px solid rgba(255, 255, 255, .10);
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
}


.contact-main-button {
    background: linear-gradient( 110deg, #087dcc, #0661a0 );
}


.contact-support-button {
    background: rgba(255, 255, 255, .028);
}


    .contact-main-button:hover,
    .contact-support-button:hover {
        transform: translateY(-3px);
        border-color: rgba(65, 213, 255, .28);
    }


.contact-actions small {
    display: block;
    margin-bottom: 5px;
    color: rgba(214, 242, 255, .62);
    font-size: 6px;
    font-weight: 800;
}


.contact-actions strong {
    color: white;
    font-size: 13px;
}


.contact-actions > a > span {
    color: #aeefff;
    font-size: 20px;
}


/* =========================================================
   REVEAL - SAFE
========================================================= */

.hero .reveal,
.services-section .reveal,
.problem-section .reveal,
.process-section .reveal,
.numbers-section .reveal,
.sectors-section .reveal,
.why-section .reveal,
.contact-cta-section .reveal {
    opacity: 1;
    transform: none;
}


/* =========================================================
   RESPONSIVE 1300
========================================================= */

@media (max-width: 1300px) {

    .hero-container {
        grid-template-columns: .92fr 1.08fr;
        gap: 35px;
    }


    .server-scene {
        min-width: 570px;
        grid-template-columns: 175px 1fr 175px;
    }


    .services-section .services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


    .sectors-section .sector-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* =========================================================
   RESPONSIVE 1150
========================================================= */

@media (max-width: 1150px) {

    .hero {
        min-height: auto;
    }


    .hero-container {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 30px;
    }


    .hero-content {
        padding: 80px 0 25px;
    }


    .hero-visual {
        min-height: 560px;
    }


    .server-scene {
        inset: 0;
        min-width: 0;
    }


    .hero::after {
        display: none;
    }


    .trust-strip .trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


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


    .problem-visual {
        grid-column: 1 / -1;
        max-width: 750px;
        width: 100%;
        margin: auto;
    }


    .process-section .process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


    .numbers-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }


    .why-layout {
        grid-template-columns: 1fr;
    }


    .why-content {
        position: static;
        max-width: 800px;
    }

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


/* =========================================================
   RESPONSIVE 900
========================================================= */

@media (max-width: 900px) {

    .services-section .section-header,
    .sectors-heading,
    .process-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
    }


        .services-section .section-intro,
        .sectors-heading > p,
        .process-heading > p {
            max-width: 700px;
        }


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


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


    .problem-visual {
        grid-column: auto;
    }


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


    .sectors-section .sector-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .sector-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* =========================================================
   PHONE
========================================================= */

@media (max-width: 700px) {

    .hero {
        padding-top: 68px;
    }


    .hero-container {
        width: min( calc(100% - 32px), 1440px );
    }


    .hero-content {
        padding: 60px 0 20px;
    }


    .hero h1 {
        font-size: clamp( 41px, 12vw, 56px );
    }


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


    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }


        .hero-actions .button {
            width: 100%;
        }


    .hero-support {
        grid-template-columns: 1fr;
        gap: 0;
    }


    .support-item {
        min-height: 65px;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }


        .support-item + .support-item {
            padding-left: 0;
            border-left: 0;
        }


    .hero-visual {
        min-height: 420px;
    }


    .server-scene {
        grid-template-columns: 105px 1fr 105px;
    }


    .hero .server {
        padding: 20px 7px;
        gap: 6px;
    }


    .server-unit {
        min-height: 39px;
        padding: 0 7px;
        gap: 4px;
    }


        .server-unit::after {
            left: 29px;
            right: 6px;
        }


        .server-unit span {
            width: 4px;
            height: 4px;
        }


    .technology-card {
        width: 145px;
        padding: 21px 18px;
    }


        .technology-card strong {
            font-size: 16px;
        }


    .trust-strip .trust-grid {
        grid-template-columns: 1fr;
    }


    .trust-strip .trust-item {
        min-height: 90px;
    }


    .services-section,
    .problem-section,
    .process-section,
    .numbers-section,
    .sectors-section,
    .why-section,
    .contact-cta-section {
        padding: 80px 0;
    }


        .services-section .services-grid,
        .process-section .process-grid,
        .numbers-grid,
        .sectors-section .sector-grid,
        .why-section .why-grid {
            grid-template-columns: 1fr;
        }


        .services-section .service-card {
            min-height: 310px;
        }


    .problem-server {
        height: 380px;
    }


    .problem-rack {
        left: 14px;
        top: 20px;
        bottom: 20px;
        width: 67%;
    }


    .problem-message {
        right: 10px;
        bottom: 20px;
        width: 155px;
        padding: 18px;
    }


        .problem-message strong {
            font-size: 16px;
        }


    .process-section .process-card {
        min-height: 260px;
    }


    .number-card {
        min-height: 140px;
    }


    .sector-cta {
        padding: 27px 22px;
    }


        .sector-cta h3 {
            font-size: 18px;
        }


    .contact-main-button,
    .contact-support-button {
        min-height: 80px;
    }
}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media (max-width: 430px) {

    .server-scene {
        grid-template-columns: 82px 1fr 82px;
    }


    .technology-card {
        width: 125px;
        padding: 17px 14px;
    }


        .technology-card > span {
            font-size: 5px;
        }


        .technology-card strong {
            font-size: 14px;
        }


    .problem-message {
        width: 137px;
    }
}
/* =========================================================
   USS HOME - FINAL LAYOUT FIX
   Eski anasayfa görünümünü geri getirir.
========================================================= */


/* =========================================================
   01 - HERO'DAKİ İÇE GİRME / DİKEY KAYMA DÜZELTMESİ
========================================================= */

.hero {
    width: 100% !important;
    margin: 0 !important;
    padding-top: 78px !important;
}


    .hero .hero-container {
        width: min( calc(100% - 80px), var(--container) ) !important;
        max-width: var(--container) !important;
        min-height: calc(760px - 78px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, .9fr) minmax(560px, 1.1fr) !important;
        align-items: center !important;
        gap: 65px !important;
    }


.hero-content {
    padding: 55px 0 !important;
}


/* =========================================================
   02 - TRUST STRIP
   Global site.css içindeki
   .trust-strip { display:grid } çakışmasını kaldırıyoruz.
========================================================= */

.hero + .trust-strip {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    grid-template-columns: none !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 1px solid rgba(61, 205, 255, .11) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
    background: #03111d !important;
}


    .hero + .trust-strip > .trust-grid {
        width: min( calc(100% - 80px), var(--container) ) !important;
        max-width: var(--container) !important;
        min-height: auto !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat( 4, minmax(0, 1fr) ) !important;
        align-items: stretch !important;
        border-top: 0 !important;
        border-left: 1px solid rgba(255, 255, 255, .07) !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        background: transparent !important;
    }


    .hero + .trust-strip
    .trust-item {
        width: auto !important;
        min-width: 0 !important;
        min-height: 112px !important;
        margin: 0 !important;
        padding: 23px 27px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 18px !important;
        border-left: 0 !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        border-right: 1px solid rgba(255, 255, 255, .08) !important;
        background: transparent !important;
    }


    .hero + .trust-strip
    .trust-number {
        position: static !important;
        width: 48px !important;
        height: 48px !important;
        flex: 0 0 48px !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 !important;
        border: 1px solid rgba(58, 208, 255, .24) !important;
        border-radius: 50% !important;
        color: #40d3ff !important;
        background: transparent !important;
        font-size: 8px !important;
        font-weight: 800 !important;
    }


    .hero + .trust-strip
    .trust-item > div {
        min-width: 0 !important;
    }


    .hero + .trust-strip
    .trust-item strong {
        display: block !important;
        margin: 0 0 5px !important;
        color: #ffffff !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
    }


    .hero + .trust-strip
    .trust-item p {
        margin: 0 !important;
        color: #788e9f !important;
        font-size: 8px !important;
        line-height: 1.5 !important;
    }


/* =========================================================
   03 - ÇALIŞMA SÜRECİ
   ESKİ 6'Lİ FERAH TASARIM
========================================================= */

.process-section {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 110px 0 115px !important;
    color: #102438 !important;
    background: #f7f9fb !important;
}


    .process-section .process-heading {
        margin-bottom: 55px !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 70px !important;
    }


        .process-section
        .process-heading > div {
            max-width: 720px !important;
        }


        .process-section
        .process-heading > p {
            max-width: 450px !important;
            margin: 0 !important;
            color: #687b8c !important;
            font-size: 12px !important;
            line-height: 1.85 !important;
        }


        .process-section
        .process-heading h2 {
            margin: 10px 0 0 !important;
            color: #081a2d !important;
            font-size: clamp( 37px, 4vw, 57px ) !important;
            line-height: 1.06 !important;
            letter-spacing: -.055em !important;
        }


            .process-section
            .process-heading h2 span {
                display: block !important;
                color: #1174cf !important;
            }


    .process-section .process-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat( 6, minmax(0, 1fr) ) !important;
        align-items: stretch !important;
        border-top: 1px solid #d4e1ea !important;
        border-left: 1px solid #d4e1ea !important;
        background: transparent !important;
    }


    .process-section .process-card {
        position: relative !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 390px !important;
        margin: 0 !important;
        padding: 30px 30px 32px !important;
        display: flex !important;
        flex-direction: column !important;
        border: 0 !important;
        border-right: 1px solid #d4e1ea !important;
        border-bottom: 1px solid #d4e1ea !important;
        border-radius: 0 !important;
        color: #142c40 !important;
        background: rgba( 255, 255, 255, .42 ) !important;
        box-shadow: none !important;
        transition: background .25s ease, transform .25s ease, box-shadow .25s ease !important;
    }


        .process-section .process-card:hover {
            z-index: 2 !important;
            transform: translateY(-4px) !important;
            background: #ffffff !important;
            box-shadow: 0 20px 45px rgba( 12, 44, 70, .07 ) !important;
        }


    .process-section .process-top {
        width: 100% !important;
        margin: 0 0 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }


    .process-section .process-number {
        position: static !important;
        color: #0877d1 !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }


    .process-section .process-icon {
        width: 61px !important;
        height: 61px !important;
        flex: 0 0 61px !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 !important;
        border: 1px solid #b8dbf2 !important;
        border-radius: 50% !important;
        color: #0878d1 !important;
        background: #eef8fe !important;
        box-shadow: inset 0 0 0 9px rgba( 8, 119, 209, .035 ) !important;
        font-size: 16px !important;
        font-weight: 500 !important;
    }


    .process-section
    .process-card h3 {
        margin: 0 0 16px !important;
        color: #19344d !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
    }


    .process-section
    .process-card p {
        margin: 0 !important;
        color: #748798 !important;
        font-size: 10px !important;
        line-height: 1.9 !important;
    }


/* =========================================================
   04 - RAKAMLARLA USS
   ESKİ KOYU YATAY TASARIM
========================================================= */

.numbers-section {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 78px 0 !important;
    overflow: hidden !important;
    color: #ffffff !important;
    background: linear-gradient( 105deg, #02111f 0%, #05243b 55%, #031827 100% ) !important;
}


    .numbers-section
    .numbers-glow {
        position: absolute !important;
        right: 8% !important;
        top: -200px !important;
        width: 600px !important;
        height: 600px !important;
        border-radius: 50% !important;
        background: rgba( 0, 145, 255, .10 ) !important;
        filter: blur(130px) !important;
    }


    .numbers-section
    .numbers-layout {
        position: relative !important;
        z-index: 2 !important;
        display: grid !important;
        grid-template-columns: minmax(430px, .78fr) minmax(0, 1.22fr) !important;
        align-items: center !important;
        gap: 90px !important;
        padding: 0 !important;
    }


    .numbers-section
    .numbers-heading {
        max-width: 590px !important;
    }


        .numbers-section
        .numbers-heading h2 {
            margin: 10px 0 27px !important;
            color: #ffffff !important;
            font-size: clamp( 44px, 4vw, 64px ) !important;
            line-height: 1.08 !important;
            letter-spacing: -.055em !important;
        }


            .numbers-section
            .numbers-heading h2 span {
                display: block !important;
                color: #3ccfff !important;
            }


        .numbers-section
        .numbers-heading p {
            max-width: 570px !important;
            margin: 0 !important;
            color: #839aaa !important;
            font-size: 11px !important;
            line-height: 1.95 !important;
        }


    .numbers-section .numbers-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat( 4, minmax(0, 1fr) ) !important;
        border-top: 1px solid rgba( 255, 255, 255, .10 ) !important;
        border-left: 1px solid rgba( 255, 255, 255, .10 ) !important;
    }


    .numbers-section .number-card {
        width: auto !important;
        min-width: 0 !important;
        min-height: 220px !important;
        margin: 0 !important;
        padding: 31px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        border: 0 !important;
        border-right: 1px solid rgba( 255, 255, 255, .10 ) !important;
        border-bottom: 1px solid rgba( 255, 255, 255, .10 ) !important;
        border-radius: 0 !important;
        background: rgba( 255, 255, 255, .008 ) !important;
        box-shadow: none !important;
    }


        .numbers-section
        .number-card strong {
            display: block !important;
            margin: 0 0 20px !important;
            color: #38cfff !important;
            font-size: clamp( 45px, 4vw, 61px ) !important;
            font-weight: 700 !important;
            line-height: 1 !important;
            letter-spacing: -.04em !important;
        }


            .numbers-section
            .number-card strong span {
                color: #38cfff !important;
                font-size: .43em !important;
                vertical-align: .15em !important;
            }


        .numbers-section
        .number-card p {
            margin: 0 !important;
            color: #8198a8 !important;
            font-size: 9px !important;
            line-height: 1.6 !important;
        }


/* =========================================================
   05 - SEKTÖRLER
   ESKİ 6'Lİ YATAY TASARIM
========================================================= */

.sectors-section {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 110px 0 !important;
    color: #102438 !important;
    background: #edf3f7 !important;
}


    .sectors-section
    .sectors-heading {
        margin-bottom: 53px !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 70px !important;
    }


        .sectors-section
        .sectors-heading > div {
            max-width: 750px !important;
        }


        .sectors-section
        .sectors-heading > p {
            max-width: 450px !important;
            margin: 0 !important;
            color: #687b8c !important;
            font-size: 12px !important;
            line-height: 1.85 !important;
        }


        .sectors-section
        .sectors-heading h2 {
            margin: 10px 0 0 !important;
            color: #081a2d !important;
            font-size: clamp( 37px, 4vw, 57px ) !important;
            line-height: 1.06 !important;
            letter-spacing: -.055em !important;
        }


            .sectors-section
            .sectors-heading h2 span {
                display: block !important;
                color: #1174cf !important;
            }


    .sectors-section .sector-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat( 6, minmax(0, 1fr) ) !important;
        align-items: stretch !important;
        border-top: 1px solid #d3e0e9 !important;
        border-left: 1px solid #d3e0e9 !important;
        background: transparent !important;
    }


    .sectors-section .sector-card {
        position: relative !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 320px !important;
        margin: 0 !important;
        padding: 31px 29px !important;
        border: 0 !important;
        border-right: 1px solid #d3e0e9 !important;
        border-bottom: 1px solid #d3e0e9 !important;
        border-radius: 0 !important;
        color: #142c40 !important;
        background: rgba( 255, 255, 255, .38 ) !important;
        box-shadow: none !important;
        transition: transform .25s ease, background .25s ease, box-shadow .25s ease !important;
    }


        .sectors-section
        .sector-card:hover {
            z-index: 2 !important;
            transform: translateY(-4px) !important;
            background: #ffffff !important;
            box-shadow: 0 20px 45px rgba( 12, 44, 70, .07 ) !important;
        }


    .sectors-section
    .sector-index {
        position: static !important;
        display: block !important;
        margin: 0 0 30px !important;
        color: #88a0b2 !important;
        font-size: 8px !important;
        font-weight: 800 !important;
    }


    .sectors-section
    .sector-symbol {
        width: 62px !important;
        height: 62px !important;
        margin: 0 0 38px !important;
        display: grid !important;
        place-items: center !important;
        border: 1px solid #b8daf1 !important;
        color: #0877d1 !important;
        background: #f0f8fe !important;
        font-size: 7px !important;
        font-weight: 800 !important;
    }


    .sectors-section
    .sector-card h3 {
        margin: 0 0 13px !important;
        color: #19344d !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
    }


    .sectors-section
    .sector-card p {
        margin: 0 !important;
        color: #718596 !important;
        font-size: 10px !important;
        line-height: 1.8 !important;
    }


    /* =========================================================
   06 - SEKTÖR CTA
========================================================= */

    .sectors-section .sector-cta {
        width: 100% !important;
        min-height: 145px !important;
        margin: 30px 0 0 !important;
        padding: 30px 35px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 50px !important;
        color: #ffffff !important;
        background: linear-gradient( 115deg, #061c2f, #073152 ) !important;
    }


        .sectors-section
        .sector-cta > div {
            max-width: 750px !important;
        }


            .sectors-section
            .sector-cta > div > span {
                display: block !important;
                margin-bottom: 9px !important;
                color: #45d6ff !important;
                font-size: 7px !important;
                font-weight: 800 !important;
                letter-spacing: .13em !important;
            }


        .sectors-section
        .sector-cta h3 {
            margin: 0 !important;
            color: #ffffff !important;
            font-size: 20px !important;
            line-height: 1.45 !important;
        }


/* =========================================================
   07 - 1150px
========================================================= */

@media (max-width: 1150px) {

    .hero .hero-container {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
        gap: 25px !important;
    }


    .hero-content {
        padding: 70px 0 20px !important;
    }


    .hero + .trust-strip > .trust-grid {
        grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important;
    }


    .process-section
    .process-grid {
        grid-template-columns: repeat( 3, minmax(0, 1fr) ) !important;
    }


    .numbers-section
    .numbers-layout {
        grid-template-columns: 1fr !important;
        gap: 45px !important;
    }


    .sectors-section
    .sector-grid {
        grid-template-columns: repeat( 3, minmax(0, 1fr) ) !important;
    }
}


/* =========================================================
   08 - 900px
========================================================= */

@media (max-width: 900px) {

    .process-section
    .process-heading,
    .sectors-section
    .sectors-heading {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 25px !important;
    }


        .process-section
        .process-heading > p,
        .sectors-section
        .sectors-heading > p {
            max-width: 700px !important;
        }


    .numbers-section
    .numbers-grid {
        grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important;
    }


    .sectors-section
    .sector-grid {
        grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important;
    }
}


/* =========================================================
   09 - TELEFON
========================================================= */

@media (max-width: 700px) {

    .hero {
        padding-top: 68px !important;
    }


        .hero .hero-container,
        .hero + .trust-strip > .trust-grid {
            width: calc(100% - 32px) !important;
        }


    .hero-content {
        padding: 55px 0 15px !important;
    }


    .hero + .trust-strip > .trust-grid {
        grid-template-columns: 1fr !important;
    }


    .hero + .trust-strip
    .trust-item {
        min-height: 88px !important;
        padding: 18px 10px !important;
    }


    .process-section,
    .numbers-section,
    .sectors-section {
        padding: 80px 0 !important;
    }


        .process-section
        .process-grid,
        .numbers-section
        .numbers-grid,
        .sectors-section
        .sector-grid {
            grid-template-columns: 1fr !important;
        }


        .process-section
        .process-card {
            min-height: 285px !important;
        }


        .sectors-section
        .sector-card {
            min-height: 270px !important;
        }


        .numbers-section
        .number-card {
            min-height: 150px !important;
        }


        .sectors-section
        .sector-cta {
            align-items: flex-start !important;
            flex-direction: column !important;
            padding: 27px 22px !important;
        }
}
/* =========================================================
   USS HERO - LIVE DATACENTER
   Kurumsal / Hafif Animasyon Sistemi
========================================================= */


/* ---------------------------------------------------------
   HERO GRID YAVAŞ HAREKET
--------------------------------------------------------- */

.hero-grid {
    animation: heroGridMove 28s linear infinite;
}

@keyframes heroGridMove {

    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 72px 72px, 72px 72px;
    }
}


/* ---------------------------------------------------------
   SERVER SCENE GENEL
--------------------------------------------------------- */

.server-scene {
    isolation: isolate;
    transform-style: preserve-3d;
}


    /* Ortadaki mavi ışık alanı */

    .server-scene::before {
        animation: serverCoreGlow 6s ease-in-out infinite;
    }

@keyframes serverCoreGlow {

    0%, 100% {
        opacity: .50;
        filter: blur(0);
    }

    50% {
        opacity: .95;
        filter: blur(4px);
    }
}


/* Zemin network grid hareketi */

.server-scene::after {
    animation: serverFloorFlow 16s linear infinite;
}

@keyframes serverFloorFlow {

    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 54px 0, 0 50px;
    }
}


/* ---------------------------------------------------------
   SERVER RACK'LARI
--------------------------------------------------------- */

.server-left,
.server-right,
.server-center {
    will-change: transform;
    transition: transform .18s cubic-bezier( .2, .8, .2, 1 );
}


/* ---------------------------------------------------------
   SERVER UNIT
--------------------------------------------------------- */

.hero .server-unit {
    overflow: hidden;
    transition: border-color .35s ease, background .35s ease, box-shadow .35s ease;
}


    .hero .server-unit:hover {
        border-color: rgba( 64, 215, 255, .28 );
        background: linear-gradient( 100deg, rgba( 11, 63, 94, .95 ), rgba( 5, 28, 47, .96 ) );
        box-shadow: inset 0 0 28px rgba( 29, 177, 255, .08 );
    }


    /* ---------------------------------------------------------
   DATA PULSE
--------------------------------------------------------- */

    .hero .server-unit::before {
        content: "";
        position: absolute;
        z-index: 3;
        left: 45px;
        top: 50%;
        width: 40px;
        height: 1px;
        transform: translateY(-50%) translateX(-80px);
        opacity: 0;
        pointer-events: none;
        background: linear-gradient( 90deg, transparent, #4be0ff, #ffffff, #4be0ff, transparent );
        box-shadow: 0 0 10px rgba( 70, 220, 255, .65 );
        animation: serverDataPulse 4.8s ease-in-out infinite;
    }


@keyframes serverDataPulse {

    0% {
        opacity: 0;
        transform: translateY(-50%) translateX(-70px);
    }

    12% {
        opacity: 0;
    }

    25% {
        opacity: .85;
    }

    55% {
        opacity: .20;
    }

    72% {
        opacity: 0;
        transform: translateY(-50%) translateX(160px);
    }

    100% {
        opacity: 0;
        transform: translateY(-50%) translateX(160px);
    }
}


/* Her cihaz aynı anda çalışmasın */

.hero .server-unit:nth-child(1)::before {
    animation-delay: .1s;
}

.hero .server-unit:nth-child(2)::before {
    animation-delay: 1.7s;
}

.hero .server-unit:nth-child(3)::before {
    animation-delay: .8s;
}

.hero .server-unit:nth-child(4)::before {
    animation-delay: 2.9s;
}

.hero .server-unit:nth-child(5)::before {
    animation-delay: 1.2s;
}

.hero .server-unit:nth-child(6)::before {
    animation-delay: 3.7s;
}

.hero .server-unit:nth-child(7)::before {
    animation-delay: 2.1s;
}

.hero .server-unit:nth-child(8)::before {
    animation-delay: 4.2s;
}


/* ---------------------------------------------------------
   LED ANİMASYONLARI
--------------------------------------------------------- */

.hero .server-unit span {
    animation: serverLed 2.8s ease-in-out infinite;
}


    .hero .server-unit span:nth-child(1) {
        animation-delay: .2s;
    }


    .hero .server-unit span:nth-child(2) {
        animation-delay: 1.1s;
    }


    .hero .server-unit span:nth-child(3) {
        animation-delay: 1.8s;
    }


.hero .server-unit:nth-child(2n)
span:nth-child(1) {
    animation-delay: 1.4s;
}


.hero .server-unit:nth-child(3n)
span:nth-child(2) {
    animation-delay: 2.2s;
}


.hero .server-unit:nth-child(4n)
span:nth-child(3) {
    animation-delay: .6s;
}


@keyframes serverLed {

    0%, 100% {
        opacity: .30;
        box-shadow: 0 0 3px rgba( 48, 220, 255, .30 );
    }

    40% {
        opacity: 1;
        box-shadow: 0 0 9px rgba( 48, 220, 255, .90 );
    }

    55% {
        opacity: .55;
    }

    68% {
        opacity: 1;
        box-shadow: 0 0 12px rgba( 48, 220, 255, .80 );
    }
}


/* ---------------------------------------------------------
   SERVER UNIT'LERE ÇOK HAFİF YAŞAYAN IŞIK
--------------------------------------------------------- */

.hero .server-unit:nth-child(odd) {
    animation: rackBreathOdd 7s ease-in-out infinite;
}


.hero .server-unit:nth-child(even) {
    animation: rackBreathEven 8.5s ease-in-out infinite;
}


@keyframes rackBreathOdd {

    0%, 100% {
        background: linear-gradient( 100deg, rgba( 11, 50, 76, .90 ), rgba( 5, 24, 40, .94 ) );
    }

    50% {
        background: linear-gradient( 100deg, rgba( 12, 61, 91, .94 ), rgba( 5, 29, 48, .96 ) );
    }
}


@keyframes rackBreathEven {

    0%, 100% {
        opacity: .93;
    }

    50% {
        opacity: 1;
    }
}


/* ---------------------------------------------------------
   MERKEZ PULSE
--------------------------------------------------------- */

.server-center::before,
.server-center::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba( 65, 215, 255, .13 );
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}


.server-center::before {
    width: 300px;
    height: 300px;
    animation: centerPulseOne 6s ease-out infinite;
}


.server-center::after {
    width: 390px;
    height: 390px;
    animation: centerPulseTwo 6s ease-out 2s infinite;
}


@keyframes centerPulseOne {

    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.65);
    }

    25% {
        opacity: .42;
    }

    75% {
        opacity: .05;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.25);
    }
}


@keyframes centerPulseTwo {

    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.68);
    }

    25% {
        opacity: .25;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.12);
    }
}


/* ---------------------------------------------------------
   ORTA TEKNOLOJİ PANELİ
--------------------------------------------------------- */

.technology-card {
    animation: technologyCardFloat 6.5s ease-in-out infinite;
    will-change: transform;
    transition: border-color .3s ease, box-shadow .3s ease;
}


    .technology-card:hover {
        border-color: rgba( 73, 217, 255, .38 );
        box-shadow: 0 25px 75px rgba( 0, 141, 226, .12 );
    }


@keyframes technologyCardFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}


/* ---------------------------------------------------------
   ORTADAKİ ÇİZGİ
--------------------------------------------------------- */

.tech-line {
    position: relative;
    overflow: hidden;
    animation: technologyLineGlow 3.2s ease-in-out infinite;
}


    .tech-line::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 12px;
        transform: translateX(-20px);
        background: #ffffff;
        box-shadow: 0 0 12px #4ce0ff;
        animation: technologyLineFlow 3s ease-in-out infinite;
    }


@keyframes technologyLineGlow {

    0%, 100% {
        opacity: .65;
        width: 32px;
    }

    50% {
        opacity: 1;
        width: 48px;
    }
}


@keyframes technologyLineFlow {

    0% {
        transform: translateX(-20px);
    }

    65%, 100% {
        transform: translateX(70px);
    }
}


/* ---------------------------------------------------------
   HERO GLOW'LAR DA HAFİF YAŞASIN
--------------------------------------------------------- */

.hero-glow-one {
    animation: heroGlowOneMove 12s ease-in-out infinite alternate;
}


.hero-glow-two {
    animation: heroGlowTwoMove 15s ease-in-out infinite alternate;
}


@keyframes heroGlowOneMove {

    from {
        transform: translate3d( 0, 0, 0 );
        opacity: .75;
    }

    to {
        transform: translate3d( -60px, 35px, 0 );
        opacity: 1;
    }
}


@keyframes heroGlowTwoMove {

    from {
        transform: translate3d( 0, 0, 0 );
    }

    to {
        transform: translate3d( 70px, -25px, 0 );
    }
}


/* =========================================================
   MOBILE
   Telefonda parallax yok, efektler daha sakin.
========================================================= */

@media (max-width: 700px) {

    .server-center::before {
        width: 210px;
        height: 210px;
    }


    .server-center::after {
        width: 270px;
        height: 270px;
    }


    .hero .server-unit::before {
        animation-duration: 6.5s;
    }


    .technology-card {
        animation-duration: 7.5s;
    }
}


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

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

    .hero-grid,
    .server-scene::before,
    .server-scene::after,
    .hero .server-unit,
    .hero .server-unit::before,
    .hero .server-unit span,
    .server-center::before,
    .server-center::after,
    .technology-card,
    .tech-line,
    .tech-line::after,
    .hero-glow-one,
    .hero-glow-two {
        animation: none !important;
    }
}
/* =========================================================
   USS HERO - NETWORK DATA LAYER V2
========================================================= */


/* =========================================================
   NETWORK SVG
========================================================= */

.hero-network-overlay {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    opacity: .76;
}


/* =========================================================
   NETWORK PATH
========================================================= */

.network-path {
    fill: none;
    stroke: url( #ussNetworkGradient );
    stroke-width: 1.15;
    stroke-dasharray: 7 12;
    vector-effect: non-scaling-stroke;
    animation: networkDashFlow 9s linear infinite;
}


.network-path-soft {
    opacity: .43;
    stroke-width: .8;
}


#ussPath01 {
    animation-delay: .4s;
}


#ussPath02 {
    animation-delay: 1.2s;
}


#ussPath03 {
    animation-delay: 2.1s;
}


#ussPath04 {
    animation-delay: .8s;
}


#ussPath05 {
    animation-delay: 1.6s;
}


#ussPath06 {
    animation-delay: 2.7s;
}


@keyframes networkDashFlow {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -190;
    }
}


/* =========================================================
   DATA PACKETS
========================================================= */

.network-packet {
    fill: #8cecff;
    filter: url( #ussPacketGlow );
    opacity: .90;
}


.network-packet-small {
    fill: #ffffff;
    opacity: .75;
}


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

.network-core-ring {
    fill: none;
    stroke: rgba( 63, 216, 255, .20 );
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    transform-origin: 500px 350px;
    animation: networkCoreRing 5.5s ease-in-out infinite;
}


.network-core-ring-two {
    opacity: .45;
    animation-delay: 1.4s;
}


@keyframes networkCoreRing {

    0%, 100% {
        opacity: .08;
        transform: scale(.86);
    }

    45% {
        opacity: .38;
    }

    70% {
        opacity: .12;
        transform: scale(1.18);
    }
}


/* =========================================================
   TELEMETRY CARDS
========================================================= */

.hero-telemetry {
    position: absolute;
    z-index: 5;
    min-width: 118px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba( 64, 215, 255, .14 );
    background: rgba( 3, 27, 44, .58 );
    backdrop-filter: blur(10px);
    pointer-events: none;
    box-shadow: 0 10px 30px rgba( 0, 0, 0, .12 );
    animation: telemetryFloat 7s ease-in-out infinite;
}


.hero-telemetry-one {
    left: 25%;
    top: 18%;
}


.hero-telemetry-two {
    right: 23%;
    top: 27%;
    animation-delay: 1.7s;
}


.hero-telemetry-three {
    right: 21%;
    bottom: 16%;
    animation-delay: 3.1s;
}


.telemetry-dot {
    position: relative;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #43dcff;
    box-shadow: 0 0 11px rgba( 67, 220, 255, .80 );
}


    .telemetry-dot::after {
        content: "";
        position: absolute;
        inset: -5px;
        border: 1px solid rgba( 67, 220, 255, .28 );
        border-radius: 50%;
        animation: telemetryPulse 2.6s ease-out infinite;
    }


.hero-telemetry small {
    display: block;
    margin-bottom: 3px;
    color: #657f91;
    font-size: 5px;
    font-weight: 800;
    letter-spacing: .09em;
}


.hero-telemetry strong {
    display: block;
    color: #b8eafa;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: .07em;
}


@keyframes telemetryFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}


@keyframes telemetryPulse {

    0% {
        opacity: .65;
        transform: scale(.55);
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}


/* =========================================================
   ALT KÖŞE SYSTEM DATA
========================================================= */

.hero-scene-data {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 23px;
    transform: translateX(-50%);
    min-width: 310px;
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    border-top: 1px solid rgba( 64, 215, 255, .12 );
    border-left: 1px solid rgba( 64, 215, 255, .12 );
    opacity: .72;
    pointer-events: none;
}


    .hero-scene-data > div {
        min-height: 43px;
        padding: 8px 10px;
        display: flex;
        align-items: center;
        gap: 8px;
        border-right: 1px solid rgba( 64, 215, 255, .12 );
        border-bottom: 1px solid rgba( 64, 215, 255, .12 );
        background: rgba( 2, 20, 34, .48 );
    }


    .hero-scene-data span {
        color: #42d8ff;
        font-size: 5px;
        font-weight: 800;
    }


    .hero-scene-data small {
        color: #668092;
        font-size: 5px;
        font-weight: 700;
    }


/* =========================================================
   TECHNOLOGY CARD'I NETWORK'ÜN ÜSTÜNDE TUT
========================================================= */

.server-center {
    z-index: 4;
}


    .server-center
    .technology-card {
        position: relative;
        z-index: 6;
    }


/* =========================================================
   RACK'LER ÖN PLAN
========================================================= */

.server-left,
.server-right {
    z-index: 4;
}


/* =========================================================
   SOFT SCAN LINE
========================================================= */

.server-scene {
    --scan-position: -15%;
}


    .server-scene > .server-center::after {
        pointer-events: none;
    }


/*
    Hero'nun üstünden çok hafif
    tarama ışığı geçiyor.
*/

.hero-visual::before {
    content: "";
    position: absolute;
    z-index: 7;
    left: 0;
    top: -20%;
    width: 100%;
    height: 120px;
    pointer-events: none;
    opacity: .30;
    background: linear-gradient( 180deg, transparent, rgba( 67, 216, 255, .035 ), rgba( 67, 216, 255, .07 ), transparent );
    animation: heroScanLine 11s linear infinite;
}


@keyframes heroScanLine {

    0% {
        transform: translateY(-150px);
    }

    70%, 100% {
        transform: translateY(950px);
    }
}


/* =========================================================
   DAHA PREMIUM DERİNLİK
========================================================= */

.hero-visual {
    perspective: 1200px;
}


.server-scene {
    box-shadow: inset 45px 0 80px rgba( 0, 0, 0, .15 ), inset -45px 0 80px rgba( 0, 0, 0, .15 );
}


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

@media (max-width: 1150px) {

    .hero-network-overlay {
        opacity: .55;
    }


    .hero-telemetry-one {
        left: 15%;
    }


    .hero-telemetry-two {
        right: 14%;
    }


    .hero-telemetry-three {
        right: 12%;
    }
}


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

@media (max-width: 700px) {

    .hero-network-overlay {
        opacity: .40;
    }


    .hero-telemetry {
        min-width: 90px;
        padding: 8px 9px;
    }


    .hero-telemetry-one {
        left: 4%;
        top: 15%;
    }


    .hero-telemetry-two {
        right: 4%;
        top: 19%;
    }


    .hero-telemetry-three {
        display: none;
    }


    .hero-scene-data {
        width: calc( 100% - 30px );
        min-width: 0;
        bottom: 13px;
    }


        .hero-scene-data small {
            font-size: 4px;
        }


    .hero-visual::before {
        display: none;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .network-path,
    .network-core-ring,
    .hero-telemetry,
    .telemetry-dot::after,
    .hero-visual::before {
        animation: none !important;
    }
}
/* =========================================================
   USS HERO - CORPORATE BOOT SEQUENCE
========================================================= */


/* ---------------------------------------------------------
   01 - İLK DURUM
--------------------------------------------------------- */

/*
   Sadece HTML üzerinde .uss-hero-boot varsa
   uygulanır.

   JavaScript kapalıysa bu class eklenmeyeceği için
   içerik normal görünür.
*/

.uss-hero-boot .hero-content {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(3px);
}


.uss-hero-boot .server-left,
.uss-hero-boot .server-right {
    opacity: 0;
    filter: brightness(.35) saturate(.5);
}


.uss-hero-boot .hero-network-overlay {
    opacity: 0;
}


.uss-hero-boot .technology-card {
    opacity: 0;
    filter: blur(6px) brightness(.65);
}


.uss-hero-boot .hero-telemetry {
    opacity: 0;
}


.uss-hero-boot .hero-scene-data {
    opacity: 0;
}


/* ---------------------------------------------------------
   02 - RACK STARTUP
--------------------------------------------------------- */

.uss-hero-boot.boot-running
.server-left {
    animation: bootRackLeft .55s cubic-bezier(.2,.8,.2,1) .05s both;
}


.uss-hero-boot.boot-running
.server-right {
    animation: bootRackRight .55s cubic-bezier(.2,.8,.2,1) .16s both;
}


@keyframes bootRackLeft {

    0% {
        opacity: 0;
        filter: brightness(.28) saturate(.35);
    }

    45% {
        opacity: .70;
        filter: brightness(.75) saturate(.75);
    }

    100% {
        opacity: 1;
        filter: brightness(1) saturate(1);
    }
}


@keyframes bootRackRight {

    0% {
        opacity: 0;
        filter: brightness(.28) saturate(.35);
    }

    45% {
        opacity: .70;
        filter: brightness(.75) saturate(.75);
    }

    100% {
        opacity: 1;
        filter: brightness(1) saturate(1);
    }
}


/* ---------------------------------------------------------
   03 - SERVER UNIT STARTUP FLASH
--------------------------------------------------------- */

.uss-hero-boot.boot-running
.server-unit {
    animation: serverUnitBoot .65s ease both, rackBreathEven 8.5s ease-in-out 1.7s infinite;
}


    .uss-hero-boot.boot-running
    .server-unit:nth-child(odd) {
        animation: serverUnitBoot .65s ease both, rackBreathOdd 7s ease-in-out 1.7s infinite;
    }


    .uss-hero-boot.boot-running
    .server-unit:nth-child(1) {
        animation-delay: .13s, 1.7s;
    }

    .uss-hero-boot.boot-running
    .server-unit:nth-child(2) {
        animation-delay: .19s, 1.7s;
    }

    .uss-hero-boot.boot-running
    .server-unit:nth-child(3) {
        animation-delay: .25s, 1.7s;
    }

    .uss-hero-boot.boot-running
    .server-unit:nth-child(4) {
        animation-delay: .31s, 1.7s;
    }

    .uss-hero-boot.boot-running
    .server-unit:nth-child(5) {
        animation-delay: .37s, 1.7s;
    }

    .uss-hero-boot.boot-running
    .server-unit:nth-child(6) {
        animation-delay: .43s, 1.7s;
    }

    .uss-hero-boot.boot-running
    .server-unit:nth-child(7) {
        animation-delay: .49s, 1.7s;
    }

    .uss-hero-boot.boot-running
    .server-unit:nth-child(8) {
        animation-delay: .55s, 1.7s;
    }


@keyframes serverUnitBoot {

    0% {
        opacity: .15;
        box-shadow: inset 0 0 0 rgba(65, 215, 255, 0);
    }

    45% {
        opacity: 1;
        box-shadow: inset 0 0 32px rgba(65, 215, 255, .13), 0 0 14px rgba(65, 215, 255, .05);
    }

    100% {
        opacity: 1;
        box-shadow: inset 0 0 22px rgba(29, 177, 255, .035);
    }
}


/* ---------------------------------------------------------
   04 - NETWORK ONLINE
--------------------------------------------------------- */

.uss-hero-boot.boot-running
.hero-network-overlay {
    animation: bootNetwork .70s ease .48s both;
}


@keyframes bootNetwork {

    0% {
        opacity: 0;
        filter: brightness(.4);
    }

    55% {
        opacity: .88;
        filter: brightness(1.35);
    }

    100% {
        opacity: .76;
        filter: brightness(1);
    }
}


/* ---------------------------------------------------------
   05 - CORE PANEL ONLINE
--------------------------------------------------------- */

.uss-hero-boot.boot-running
.technology-card {
    animation: technologyBoot .72s cubic-bezier(.16,.8,.25,1) .67s both, technologyCardFloat 6.5s ease-in-out 1.6s infinite;
}


@keyframes technologyBoot {

    0% {
        opacity: 0;
        filter: blur(8px) brightness(.55);
    }

    55% {
        opacity: 1;
        filter: blur(0) brightness(1.18);
    }

    100% {
        opacity: 1;
        filter: blur(0) brightness(1);
    }
}


/* ---------------------------------------------------------
   06 - CORE LINE
--------------------------------------------------------- */

.uss-hero-boot.boot-running
.tech-line {
    animation: technologyLineBoot .55s ease .90s both, technologyLineGlow 3.2s ease-in-out 1.55s infinite;
}


@keyframes technologyLineBoot {

    from {
        width: 0;
        opacity: 0;
    }

    to {
        width: 32px;
        opacity: 1;
    }
}


/* ---------------------------------------------------------
   07 - TELEMETRY ONLINE
--------------------------------------------------------- */

.uss-hero-boot.boot-running
.hero-telemetry-one {
    animation: telemetryBoot .45s ease .90s both, telemetryFloat 7s ease-in-out 1.6s infinite;
}


.uss-hero-boot.boot-running
.hero-telemetry-two {
    animation: telemetryBoot .45s ease 1.02s both, telemetryFloat 7s ease-in-out 2.1s infinite;
}


.uss-hero-boot.boot-running
.hero-telemetry-three {
    animation: telemetryBoot .45s ease 1.14s both, telemetryFloat 7s ease-in-out 2.7s infinite;
}


@keyframes telemetryBoot {

    from {
        opacity: 0;
        clip-path: inset( 0 100% 0 0 );
    }

    to {
        opacity: 1;
        clip-path: inset( 0 0 0 0 );
    }
}


/* ---------------------------------------------------------
   08 - ALT SYSTEM DATA
--------------------------------------------------------- */

.uss-hero-boot.boot-running
.hero-scene-data {
    animation: sceneDataBoot .55s ease 1.08s both;
}


@keyframes sceneDataBoot {

    from {
        opacity: 0;
        transform: translateX(-50%) translateY(9px);
    }

    to {
        opacity: .72;
        transform: translateX(-50%) translateY(0);
    }
}


/* ---------------------------------------------------------
   09 - SOL TARAF İÇERİK
--------------------------------------------------------- */

.uss-hero-boot.boot-running
.hero-content {
    animation: heroContentBoot .72s cubic-bezier(.16,.8,.25,1) 1.02s both;
}


@keyframes heroContentBoot {

    from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


/* ---------------------------------------------------------
   10 - BAŞLIK İÇİN ÇOK HAFİF PARLAKLIK
--------------------------------------------------------- */

.uss-hero-boot.boot-running
.hero h1 span {
    animation: heroTitleBlueBoot .85s ease 1.16s both;
}


@keyframes heroTitleBlueBoot {

    0% {
        text-shadow: 0 0 0 rgba(65, 215, 255, 0);
    }

    45% {
        text-shadow: 0 0 24px rgba(65, 215, 255, .18);
    }

    100% {
        text-shadow: 0 0 0 rgba(65, 215, 255, 0);
    }
}


/* ---------------------------------------------------------
   BOOT TAMAMLANDIKTAN SONRA GARANTİ
--------------------------------------------------------- */

.uss-hero-boot.boot-complete
.hero-content,
.uss-hero-boot.boot-complete
.server-left,
.uss-hero-boot.boot-complete
.server-right,
.uss-hero-boot.boot-complete
.hero-network-overlay,
.uss-hero-boot.boot-complete
.technology-card,
.uss-hero-boot.boot-complete
.hero-telemetry,
.uss-hero-boot.boot-complete
.hero-scene-data {
    opacity: 1;
}


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

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

    .uss-hero-boot
    .hero-content,
    .uss-hero-boot
    .server-left,
    .uss-hero-boot
    .server-right,
    .uss-hero-boot
    .hero-network-overlay,
    .uss-hero-boot
    .technology-card,
    .uss-hero-boot
    .hero-telemetry,
    .uss-hero-boot
    .hero-scene-data {
        opacity: 1 !important;
        filter: none !important;
        transform: none;
        animation: none !important;
    }
}
/* =========================================================
   USS HOME - SYSTEM FLOW TRANSITION
========================================================= */

.home-system-flow {
    position: relative;
    z-index: 5;
    width: 100%;
    min-height: 155px;
    overflow: hidden;
    border-top: 1px solid rgba(64, 211, 255, .09);
    border-bottom: 1px solid rgba(9, 53, 83, .10);
    background: linear-gradient( 180deg, #03111d 0%, #061a29 47%, #eaf1f6 48%, #f7f9fb 100% );
}


/* ---------------------------------------------------------
   GLOW
--------------------------------------------------------- */

.home-flow-glow {
    position: absolute;
    left: 50%;
    top: -170px;
    width: 720px;
    height: 330px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(26, 174, 255, .11);
    filter: blur(95px);
    pointer-events: none;
}


/* ---------------------------------------------------------
   CONTAINER
--------------------------------------------------------- */

.home-flow-container {
    position: relative;
    z-index: 2;
    min-height: 155px;
}


/* ---------------------------------------------------------
   TOP META
--------------------------------------------------------- */

.home-flow-meta {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}


    .home-flow-meta > span {
        color: #42d6ff;
        font-size: 6px;
        font-weight: 800;
        letter-spacing: .17em;
    }


    .home-flow-meta > small {
        color: #567286;
        font-size: 6px;
        font-weight: 700;
        letter-spacing: .11em;
    }


/* ---------------------------------------------------------
   FLOW RAIL
--------------------------------------------------------- */

.home-flow-rail {
    position: relative;
    height: 107px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    border-left: 1px solid rgba(23, 104, 153, .13);
    border-right: 1px solid rgba(23, 104, 153, .13);
}


/* ---------------------------------------------------------
   MAIN LINE
--------------------------------------------------------- */

.home-flow-line {
    position: absolute;
    z-index: 1;
    left: 7%;
    right: 7%;
    top: 36px;
    height: 1px;
    overflow: visible;
    background: linear-gradient( 90deg, transparent, rgba(56, 200, 255, .20) 8%, rgba(56, 200, 255, .50) 50%, rgba(56, 200, 255, .20) 92%, transparent );
}


    /* Noktalı teknik çizgi */

    .home-flow-line::before {
        content: "";
        position: absolute;
        inset: -2px 0 auto;
        height: 5px;
        opacity: .22;
        background: repeating-linear-gradient( 90deg, #3ad5ff 0, #3ad5ff 2px, transparent 2px, transparent 16px );
    }


/* ---------------------------------------------------------
   DATA PACKETS
--------------------------------------------------------- */

.home-flow-packet {
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #8aeaff;
    box-shadow: 0 0 8px #42d7ff, 0 0 18px rgba(66, 215, 255, .44);
    animation: homeFlowPacket 7s linear infinite;
}


.packet-one {
    animation-delay: 0s;
}


.packet-two {
    animation-delay: 2.3s;
}


.packet-three {
    animation-delay: 4.6s;
}


@keyframes homeFlowPacket {

    0% {
        left: 0;
        opacity: 0;
    }

    7% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        left: calc(100% - 7px);
        opacity: 0;
    }
}


/* ---------------------------------------------------------
   NODES
--------------------------------------------------------- */

.home-flow-node {
    position: relative;
    z-index: 3;
    min-width: 0;
    height: 107px;
    padding: 25px 22px 18px;
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-rows: 26px 18px;
    align-content: center;
    column-gap: 11px;
    border-right: 1px solid rgba(22, 102, 151, .13);
}


    .home-flow-node:last-child {
        border-right: 0;
    }


    .home-flow-node > span {
        grid-row: 1 / 3;
        width: 31px;
        height: 31px;
        display: grid;
        place-items: center;
        align-self: center;
        border: 1px solid rgba(18, 134, 203, .25);
        border-radius: 50%;
        color: #0878d1;
        background: rgba(246, 251, 255, .94);
        box-shadow: 0 0 0 5px rgba(7, 119, 209, .025);
        font-size: 6px;
        font-weight: 800;
        transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    }


    .home-flow-node strong {
        align-self: end;
        color: #17344c;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: .08em;
    }


    .home-flow-node small {
        align-self: start;
        color: #738696;
        font-size: 7px;
    }


    .home-flow-node:hover > span {
        transform: scale(1.06);
        border-color: rgba(8, 132, 211, .55);
        box-shadow: 0 0 0 6px rgba(7, 119, 209, .05), 0 0 20px rgba(19, 137, 255, .12);
    }


/* =========================================================
   SERVICES ENTRY
========================================================= */

/*
   Flow bölümünden hizmetlere geçerken
   keskin renk değişimini yumuşatıyoruz.
*/

.home-system-flow + .services-section {
    padding-top: 95px !important;
    background: linear-gradient( 180deg, #f7f9fb 0%, #f4f7fa 35%, #edf3f7 100% ) !important;
}


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

@media (max-width: 900px) {

    .home-system-flow {
        min-height: auto;
        background: linear-gradient( 180deg, #03111d 0%, #061a29 28%, #edf3f7 29%, #f7f9fb 100% );
    }


    .home-flow-meta {
        height: 55px;
    }


    .home-flow-rail {
        height: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .home-flow-line {
        display: none;
    }


    .home-flow-node {
        min-height: 100px;
        border-bottom: 1px solid rgba(22, 102, 151, .13);
    }
}


/* =========================================================
   PHONE
========================================================= */

@media (max-width: 700px) {

    .home-flow-meta {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
    }


        .home-flow-meta > small {
            font-size: 5px;
        }


    .home-flow-rail {
        grid-template-columns: 1fr;
    }


    .home-flow-node {
        min-height: 82px;
        height: auto;
        grid-template-rows: 22px 17px;
        padding: 15px 10px;
    }


    .home-system-flow + .services-section {
        padding-top: 75px !important;
    }
}


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

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

    .home-flow-packet {
        animation: none !important;
    }
}

/* =========================================================
   USS HOME - PREMIUM SERVICE CARDS
========================================================= */


/* ---------------------------------------------------------
   CARD BASE
--------------------------------------------------------- */

.services-section .service-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform .28s ease, background .28s ease, box-shadow .28s ease, border-color .28s ease !important;
}


    /* ---------------------------------------------------------
   TECH GRID
--------------------------------------------------------- */

    .services-section .service-card::before {
        content: "";
        position: absolute;
        z-index: -2;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        background-image: linear-gradient( rgba(16, 125, 195, .055) 1px, transparent 1px ), linear-gradient( 90deg, rgba(16, 125, 195, .055) 1px, transparent 1px );
        background-size: 27px 27px;
        transform: scale(1.04);
        transition: opacity .30s ease, transform .45s ease;
    }


    .services-section .service-card:hover::before,
    .services-section .service-card:focus-within::before {
        opacity: 1;
        transform: scale(1);
    }


    /* ---------------------------------------------------------
   SOFT BLUE GLOW
--------------------------------------------------------- */

    .services-section .service-card::after {
        content: "";
        position: absolute;
        z-index: -1;
        right: -90px;
        top: -90px;
        width: 200px;
        height: 200px;
        opacity: 0;
        pointer-events: none;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(19, 137, 255, .13), transparent 68% );
        transition: opacity .35s ease, transform .45s ease;
    }


    .services-section .service-card:hover::after,
    .services-section .service-card:focus-within::after {
        opacity: 1;
        transform: translate( -18px, 18px );
    }


    /* ---------------------------------------------------------
   HOVER CARD
--------------------------------------------------------- */

    .services-section .service-card:hover,
    .services-section .service-card:focus-within {
        z-index: 5;
        transform: translateY(-7px);
        background: rgba( 255, 255, 255, .96 ) !important;
        box-shadow: 0 28px 60px rgba( 9, 48, 79, .11 ) !important;
    }


    /* ---------------------------------------------------------
   TOP ENERGY LINE
--------------------------------------------------------- */

    .services-section .service-card
    .service-card-top {
        position: relative;
    }


        .services-section .service-card
        .service-card-top::before {
            content: "";
            position: absolute;
            left: 0;
            top: -27px;
            width: 0;
            height: 2px;
            opacity: 0;
            background: linear-gradient( 90deg, #0877d1, #40e3ff, rgba(64, 227, 255, 0) );
            box-shadow: 0 0 10px rgba(64, 227, 255, .28);
            transition: width .45s ease, opacity .25s ease;
        }


    .services-section .service-card:hover
    .service-card-top::before,
    .services-section .service-card:focus-within
    .service-card-top::before {
        width: 100%;
        opacity: 1;
    }


/* ---------------------------------------------------------
   SERVICE NUMBER
--------------------------------------------------------- */

.services-section .service-number {
    transition: color .25s ease, transform .25s ease;
}


.services-section .service-card:hover
.service-number,
.services-section .service-card:focus-within
.service-number {
    color: #0877d1;
    transform: translateX(3px);
}


/* ---------------------------------------------------------
   ICON
--------------------------------------------------------- */

.services-section .service-icon {
    position: relative;
    isolation: isolate;
    transition: transform .3s ease, color .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}


    .services-section .service-icon::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: -1px;
        opacity: 0;
        border: 1px solid rgba(19, 137, 255, .22);
        transform: scale(.75);
        transition: opacity .3s ease, transform .45s ease;
    }


.services-section .service-card:hover
.service-icon,
.services-section .service-card:focus-within
.service-icon {
    transform: translateY(-3px);
    color: #056bc0;
    border-color: rgba(15, 132, 211, .48);
    background: #edf8ff;
    box-shadow: 0 12px 28px rgba( 8, 119, 209, .10 );
}


    .services-section .service-card:hover
    .service-icon::before,
    .services-section .service-card:focus-within
    .service-icon::before {
        opacity: 1;
        transform: scale(1.28);
    }


    /* ---------------------------------------------------------
   ICON PULSE
--------------------------------------------------------- */

    .services-section .service-card:hover
    .service-icon::after,
    .services-section .service-card:focus-within
    .service-icon::after {
        content: "";
        position: absolute;
        inset: -1px;
        border: 1px solid rgba( 64, 211, 255, .22 );
        animation: homeServiceIconPulse 1.8s ease-out infinite;
    }


@keyframes homeServiceIconPulse {

    0% {
        opacity: .65;
        transform: scale(.90);
    }

    100% {
        opacity: 0;
        transform: scale(1.48);
    }
}


/* ---------------------------------------------------------
   TITLE
--------------------------------------------------------- */

.services-section .service-card h3 {
    transition: color .25s ease, transform .25s ease;
}


.services-section .service-card:hover h3,
.services-section .service-card:focus-within h3 {
    color: #0a5fa5;
    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   DESCRIPTION
--------------------------------------------------------- */

.services-section .service-card > p {
    transition: color .25s ease;
}


.services-section .service-card:hover > p,
.services-section .service-card:focus-within > p {
    color: #536d81;
}


/* ---------------------------------------------------------
   LINK
--------------------------------------------------------- */

.services-section .service-card-link {
    position: relative;
    overflow: hidden;
    transition: color .25s ease, padding-left .25s ease;
}


    .services-section .service-card-link::before {
        content: "";
        position: absolute;
        left: 0;
        top: -1px;
        width: 0;
        height: 2px;
        background: linear-gradient( 90deg, #0877d1, #40e3ff );
        transition: width .42s cubic-bezier( .2, .8, .2, 1 );
    }


.services-section .service-card:hover
.service-card-link::before,
.services-section .service-card:focus-within
.service-card-link::before {
    width: 100%;
}


.services-section .service-card:hover
.service-card-link,
.services-section .service-card:focus-within
.service-card-link {
    color: #0569bb;
    padding-left: 4px;
}


/* ---------------------------------------------------------
   ARROW
--------------------------------------------------------- */

.services-section .service-card-link span {
    position: relative;
    transition: transform .25s ease, color .25s ease;
}


.services-section .service-card:hover
.service-card-link span,
.services-section .service-card:focus-within
.service-card-link span {
    color: #0a8edb;
    transform: translateX(7px);
}


/* ---------------------------------------------------------
   FIRST HOVER MICRO FLASH
--------------------------------------------------------- */

.services-section .service-card
.service-card-top::after {
    content: "";
    position: absolute;
    right: -65px;
    top: -40px;
    width: 100px;
    height: 120px;
    opacity: 0;
    pointer-events: none;
    transform: rotate(25deg);
    background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .70), transparent );
}


.services-section .service-card:hover
.service-card-top::after {
    animation: homeServiceReflection .75s ease 1;
}


@keyframes homeServiceReflection {

    0% {
        opacity: 0;
        transform: translateX(-40px) rotate(25deg);
    }

    25% {
        opacity: .38;
    }

    100% {
        opacity: 0;
        transform: translateX(150px) rotate(25deg);
    }
}


/* =========================================================
   MOUSE OLMAYAN CİHAZLAR
========================================================= */

@media ( hover: none ) {

    .services-section .service-card:hover {
        transform: none;
    }


    .services-section .service-card
    .service-icon::after {
        display: none;
    }
}


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

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

    .services-section .service-card,
    .services-section .service-card::before,
    .services-section .service-card::after,
    .services-section .service-icon,
    .services-section .service-icon::before,
    .services-section .service-icon::after,
    .services-section .service-card-link,
    .services-section .service-card-link::before,
    .services-section .service-card-link span,
    .services-section .service-card-top::before,
    .services-section .service-card-top::after {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   USS HOME - FINAL POLISH
   WHY USS
========================================================= */


/* =========================================================
   01 - WHY USS / ARKA PLAN DERİNLİĞİ
========================================================= */

.why-section {
    isolation: isolate;
}

    .why-section::before {
        content: "";
        position: absolute;
        z-index: 0;
        left: -220px;
        bottom: -260px;
        width: 620px;
        height: 620px;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient( circle, rgba(23, 157, 229, .10), transparent 68% );
        filter: blur(25px);
    }


    .why-section::after {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 0;
        pointer-events: none;
        opacity: .10;
        background-image: linear-gradient( rgba(66, 207, 255, .10) 1px, transparent 1px ), linear-gradient( 90deg, rgba(66, 207, 255, .10) 1px, transparent 1px );
        background-size: 70px 70px;
        mask-image: linear-gradient( 90deg, transparent, black 35%, black 100% );
    }


    /* =========================================================
   02 - WHY CONTENT
========================================================= */

    .why-section .why-content {
        position: relative;
        z-index: 2;
    }


        .why-section .why-content::before {
            content: "";
            position: absolute;
            left: -28px;
            top: 3px;
            width: 2px;
            height: 72px;
            background: linear-gradient( 180deg, #40dcff, rgba(64, 220, 255, 0) );
            box-shadow: 0 0 15px rgba(64, 220, 255, .18);
        }


    .why-section .why-highlight {
        position: relative;
        overflow: hidden;
        transition: border-color .3s ease, background .3s ease, transform .3s ease;
    }


        .why-section .why-highlight::after {
            content: "";
            position: absolute;
            right: -90px;
            top: -90px;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            opacity: 0;
            background: radial-gradient( circle, rgba(64, 216, 255, .13), transparent 70% );
            transition: opacity .3s ease, transform .4s ease;
        }


        .why-section .why-highlight:hover {
            transform: translateX(4px);
            border-left-color: #75e6ff;
            background: rgba(255, 255, 255, .035);
        }


            .why-section .why-highlight:hover::after {
                opacity: 1;
                transform: translate(-15px, 15px);
            }


    /* =========================================================
   03 - WHY CARDS
========================================================= */

    .why-section .why-card {
        isolation: isolate;
        overflow: hidden;
        transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
    }


        .why-section .why-card::before {
            content: "";
            position: absolute;
            z-index: -2;
            inset: 0;
            opacity: 0;
            pointer-events: none;
            background-image: linear-gradient( rgba(68, 210, 255, .05) 1px, transparent 1px ), linear-gradient( 90deg, rgba(68, 210, 255, .05) 1px, transparent 1px );
            background-size: 27px 27px;
            transition: opacity .3s ease;
        }


        .why-section .why-card::after {
            content: "";
            position: absolute;
            z-index: -1;
            right: -80px;
            bottom: -80px;
            width: 170px;
            height: 170px;
            border-radius: 50%;
            opacity: 0;
            pointer-events: none;
            background: radial-gradient( circle, rgba(21, 158, 231, .14), transparent 68% );
            transition: opacity .35s ease, transform .4s ease;
        }


        .why-section .why-card:hover {
            z-index: 3;
            transform: translateY(-6px);
            background: rgba(255, 255, 255, .028);
            box-shadow: 0 25px 55px rgba(0, 0, 0, .17);
        }


            .why-section .why-card:hover::before {
                opacity: 1;
            }


            .why-section .why-card:hover::after {
                opacity: 1;
                transform: translate(-20px, -20px);
            }


    /* ---------------------------------------------------------
   WHY NUMBER
--------------------------------------------------------- */

    .why-section .why-number {
        transition: color .25s ease, transform .25s ease;
    }


    .why-section .why-card:hover
    .why-number {
        color: #43d9ff;
        transform: translateX(3px);
    }


    /* ---------------------------------------------------------
   WHY ICON
--------------------------------------------------------- */

    .why-section .why-icon {
        position: relative;
        transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
    }


        .why-section .why-icon::after {
            content: "";
            position: absolute;
            inset: -1px;
            opacity: 0;
            border: 1px solid rgba(67, 215, 255, .20);
            transition: opacity .3s ease, transform .4s ease;
        }


    .why-section .why-card:hover
    .why-icon {
        transform: translateY(-4px);
        border-color: rgba(67, 215, 255, .42);
        background: rgba(14, 132, 196, .10);
        box-shadow: 0 12px 30px rgba(0, 135, 210, .08);
    }


        .why-section .why-card:hover
        .why-icon::after {
            opacity: 1;
            transform: scale(1.22);
        }


    /* ---------------------------------------------------------
   WHY TEXT
--------------------------------------------------------- */

    .why-section .why-card h3 {
        transition: color .25s ease;
    }


    .why-section .why-card:hover h3 {
        color: #dff8ff;
    }


    .why-section .why-card p {
        transition: color .25s ease;
    }


    .why-section .why-card:hover p {
        color: #96adbd;
    }


/* =========================================================
   10 - TOUCH DEVICES
========================================================= */

@media (hover: none) {

    .why-section .why-card:hover {
        transform: none;
    }
}


/* =========================================================
   11 - MOBILE
========================================================= */

@media (max-width: 700px) {

    .why-section .why-content::before {
        display: none;
    }
}


/* =========================================================
   12 - REDUCED MOTION
========================================================= */

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

    .why-section .why-card,
    .why-section .why-card::before,
    .why-section .why-card::after,
    .why-section .why-icon,
    .why-section .why-icon::after,
    .why-section .why-highlight {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   USS HOME - SERVICE SVG ICON SYSTEM
========================================================= */

.services-section
.service-icon-svg {
    position: relative;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
    color: #0877d1;
}


    /* =========================================================
   SVG
========================================================= */

    .services-section
    .service-icon-svg svg {
        width: 29px;
        height: 29px;
        overflow: visible;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.45;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
        transition: transform .32s cubic-bezier(.2,.8,.2,1), filter .32s ease, stroke .32s ease;
    }


    /* Bazı LED / nokta parçaları */

    .services-section
    .service-icon-svg
    .icon-fill {
        fill: currentColor;
        stroke: none;
    }


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

.services-section
.service-card:hover
.service-icon-svg svg,
.services-section
.service-card:focus-within
.service-icon-svg svg {
    transform: scale(1.09) translateY(-1px);
    filter: drop-shadow( 0 0 5px rgba(25, 165, 235, .22) );
}


/* =========================================================
   İÇ IŞIK
========================================================= */

.services-section
.service-icon-svg::before {
    background: radial-gradient( circle, rgba(59, 206, 255, .15), rgba(59, 206, 255, .025) 50%, transparent 72% ) !important;
}


.services-section
.service-card:hover
.service-icon-svg,
.services-section
.service-card:focus-within
.service-icon-svg {
    color: #0574c8 !important;
}


    /* =========================================================
   HER İKONDA ÇOK HAFİF BAĞIMSIZ HAREKET
========================================================= */

    .services-section
    .service-card:hover
    .service-icon-svg svg path,
    .services-section
    .service-card:hover
    .service-icon-svg svg rect,
    .services-section
    .service-card:hover
    .service-icon-svg svg circle,
    .services-section
    .service-card:hover
    .service-icon-svg svg ellipse {
        transition: stroke .25s ease, fill .25s ease, opacity .25s ease;
    }


/* =========================================================
   DATACENTER LED BLINK
========================================================= */

.services-section
.service-card:nth-child(1):hover
.icon-fill:nth-of-type(1) {
    animation: serviceLedBlink 1.1s ease-in-out infinite;
}


.services-section
.service-card:nth-child(1):hover
.icon-fill:nth-of-type(2) {
    animation: serviceLedBlink 1.3s ease-in-out .25s infinite;
}


.services-section
.service-card:nth-child(1):hover
.icon-fill:nth-of-type(3) {
    animation: serviceLedBlink 1.5s ease-in-out .45s infinite;
}


@keyframes serviceLedBlink {

    0%, 100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }
}


/* =========================================================
   CYBER SECURITY
========================================================= */

.services-section
.service-card:nth-child(7):hover
.service-icon-svg svg {
    animation: serviceShieldPulse 1.9s ease-in-out infinite;
}


@keyframes serviceShieldPulse {

    0%, 100% {
        filter: drop-shadow( 0 0 2px rgba(25, 165, 235, .10) );
    }

    50% {
        filter: drop-shadow( 0 0 7px rgba(25, 165, 235, .30) );
    }
}


/* =========================================================
   BACKUP
========================================================= */

.services-section
.service-card:nth-child(16):hover
.service-icon-svg svg {
    animation: backupIconSoftMove 2.4s ease-in-out infinite;
}


@keyframes backupIconSoftMove {

    0%, 100% {
        transform: scale(1.09) rotate(0deg);
    }

    50% {
        transform: scale(1.09) rotate(-2deg);
    }
}


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

@media (max-width: 700px) {

    .services-section
    .service-icon-svg svg {
        width: 28px;
        height: 28px;
    }
}


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

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

    .services-section
    .service-icon-svg svg,
    .services-section
    .service-icon-svg svg path,
    .services-section
    .service-icon-svg svg rect,
    .services-section
    .service-icon-svg svg circle,
    .services-section
    .service-icon-svg svg ellipse {
        animation: none !important;
        transition: none !important;
    }
}