/* =========================================================
   CYBERKALKAN — MASTER STYLE
   Cyber Security + Web Technologies
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root {

    --bg: #030506;
    --bg-soft: #070b0d;
    --surface: #0a1012;
    --surface-2: #0d1518;

    --green: #39ff88;
    --green-dark: #16b85b;

    --cyan: #00e5ff;
    --cyan-dark: #009bb0;

    --white: #f2f7f5;
    --text: #b9c8c2;
    --muted: #687873;

    --border: rgba(57, 255, 136, .13);
    --border-cyan: rgba(0, 229, 255, .13);

    --container: 1240px;

    --header-height: 84px;

    --radius: 18px;

    --ease: cubic-bezier(.22, 1, .36, 1);

}


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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--bg);
}

body {

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(57,255,136,.055),
            transparent 35%
        ),
        var(--bg);

    color: var(--white);

    font-family:
        "Inter",
        system-ui,
        sans-serif;

    overflow-x: hidden;

    line-height: 1.6;
}

body::selection {
    background: var(--green);
    color: #000;
}

img {
    max-width: 100%;
    display: block;
}

button,
a {
    font: inherit;
}

button {
    border: 0;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.container {

    width: min(
        calc(100% - 48px),
        var(--container)
    );

    margin-inline: auto;

}


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

.page-loader {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: grid;

    place-items: center;

    background: #020405;

    /* DUZELTME: Virgüllü cubic-bezier tanımının shorthand içinde bozulmasını önlemek için 
       animasyon zamanlamasını timing-function ile ayırdık. 
       Ayrıca JS çalışmazsa loader 2.8s sonra yedek olarak kendiliğinden kapanır. */
    animation: loaderExit 1s 2.8s forwards;
    animation-timing-function: var(--ease);

    /* JS geçişi için opacity ve visibility transition'ları eklendi */
    transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
    opacity: 1;
    visibility: visible;

}

/* DUZELTME: JS'in eklediği loaded sınıfı için stil kuralları eklendi */
.page-loader.loaded {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    /* JS başarıyla loader'ı kapattıysa yedek CSS animasyonunu devre dışı bırak */
    animation: none;

}

.loader-content {

    width: min(
        360px,
        80vw
    );

    text-align: center;

}

.loader-logo {

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

    font-size: 26px;

    font-weight: 800;

    letter-spacing: .14em;

}

.loader-logo span {
    color: var(--green);
}

.loader-line {

    height: 2px;

    margin-top: 24px;

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

    overflow: hidden;

}

.loader-line span {

    display: block;

    width: 0;

    height: 100%;

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

    animation:
        loaderProgress
        1.8s
        ease
        forwards;

}

.loader-status {

    margin-top: 12px;

    font-size: 9px;

    color: var(--muted);

    letter-spacing: .24em;

    font-family:
        "Space Grotesk",
        monospace;

}

@keyframes loaderProgress {

    to {
        width: 100%;
    }

}

@keyframes loaderExit {

    0% {
        opacity: 1;
        visibility: visible;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

}


/* =========================================================
   GLOBAL BACKGROUND
   ========================================================= */

.global-background {

    position: fixed;

    inset: 0;

    z-index: -5;

    pointer-events: none;

    overflow: hidden;

}

.background-grid {

    position: absolute;

    inset: 0;

    opacity: .22;

    background-image:

        linear-gradient(
            rgba(57,255,136,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(57,255,136,.035) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 85%
        );

}

.background-glow {

    position: absolute;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    filter: blur(120px);

    opacity: .07;

}

.glow-green {

    top: -250px;

    left: -150px;

    background:
        var(--green);

}

.glow-cyan {

    right: -200px;

    top: 30%;

    background:
        var(--cyan);

}

.background-scan {

    position: absolute;

    left: 0;

    right: 0;

    top: -100%;

    height: 30%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(57,255,136,.025),
            transparent
        );

    animation:
        scanMove
        9s
        linear
        infinite;

}

@keyframes scanMove {

    to {
        transform:
            translateY(430%);
    }

}


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

.site-header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    height:
        var(--header-height);

    z-index: 500;

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

    background:
        rgba(3,5,6,.72);

    backdrop-filter:
        blur(22px);

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

}

.header-container {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 32px;

}


/* =========================================================
   BRAND
   ========================================================= */

.brand-logo {

    display: flex;

    align-items: center;

    gap: 11px;

    flex-shrink: 0;

}

.brand-symbol {

    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(57,255,136,.5);

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

    color:
        var(--green);

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

    font-size: 11px;

    font-weight: 800;

    box-shadow:
        0 0 24px
        rgba(57,255,136,.08);

}

.brand-name {

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

    font-size: 15px;

    font-weight: 800;

    letter-spacing: .12em;

}

.brand-name span {
    color: var(--green);
}


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

.main-navigation {

    display: flex;

    align-items: center;

    gap: 30px;

}

.main-navigation a {

    position: relative;

    color:
        var(--muted);

    font-size: 12px;

    font-weight: 600;

    transition:
        color .3s ease;

}

.main-navigation a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -9px;

    width: 0;

    height: 1px;

    background:
        var(--green);

    box-shadow:
        0 0 8px
        var(--green);

    transition:
        width .35s
        var(--ease);

}

.main-navigation a:hover,
.main-navigation a.active {

    color:
        var(--white);

}

.main-navigation a:hover::after,
.main-navigation a.active::after {

    width: 100%;

}


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

.header-cta {

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        11px 16px;

    border:
        1px solid
        rgba(57,255,136,.28);

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

    color:
        var(--green);

    font-size: 11px;

    font-weight: 700;

    transition:
        all .3s
        var(--ease);

}

.header-cta:hover {

    background:
        var(--green);

    color:
        #020403;

    box-shadow:
        0 0 30px
        rgba(57,255,136,.18);

}

.header-cta .arrow {
    font-size: 16px;
}


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

.menu-toggle {

    display: none;

    width: 42px;

    height: 42px;

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

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

    cursor: pointer;

}

.menu-toggle span {

    display: block;

    width: 18px;

    height: 1px;

    margin: 4px auto;

    background:
        var(--green);

    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);

}

/* DUZELTME: Mobil menü butonu açıldığında X işaretine dönüşme efekti */
.menu-toggle.active span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

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

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


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

.hero-section {

    position: relative;

    min-height:
        100vh;

    padding-top:
        var(--header-height);

    display: flex;

    flex-direction: column;

    justify-content: center;

    overflow: hidden;

}

.hero-container {

    min-height:
        calc(100vh - var(--header-height));

    display: grid;

    grid-template-columns:
        1.02fr
        .98fr;

    align-items: center;

    gap: 30px;

    padding-top: 55px;

    padding-bottom: 80px;

}


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

.hero-content {

    position: relative;

    z-index: 10;

}

.hero-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        7px 11px;

    border:
        1px solid
        rgba(57,255,136,.16);

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

    color:
        var(--green);

    font-family:
        "Space Grotesk",
        monospace;

    font-size: 9px;

    letter-spacing: .16em;

    margin-bottom: 24px;

}

.status-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:
        0 0 10px
        var(--green);

    animation:
        statusPulse
        1.7s
        infinite;

}

@keyframes statusPulse {

    50% {
        opacity: .35;
        transform: scale(.7);
    }

}


.hero-title {

    max-width: 800px;

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

    font-size:
        clamp(
            44px,
            5.3vw,
            78px
        );

    line-height:
        1.02;

    letter-spacing:
        -.055em;

    font-weight:
        700;

}

.gradient-text {

    color:
        var(--green);

    background:
        linear-gradient(
            110deg,
            var(--green),
            var(--cyan)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

}

.outline-text {

    color:
        transparent;

    -webkit-text-stroke:
        1px
        rgba(242,247,245,.7);

}

.hero-description {

    max-width:
        610px;

    margin-top:
        28px;

    color:
        var(--text);

    font-size:
        15px;

    line-height:
        1.85;

}


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

.hero-actions {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 34px;

    flex-wrap: wrap;

}

.button {

    min-height:
        50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding:
        0 19px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .02em;

    transition:
        all .35s
        var(--ease);

}

.button-primary {

    background:
        var(--green);

    color:
        #020403;

    box-shadow:
        0 0 30px
        rgba(57,255,136,.08);

}

.button-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 40px
        rgba(57,255,136,.18);

}

.button-secondary {

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

    color:
        var(--white);

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

}

.button-secondary:hover {

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

    color:
        var(--cyan);

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

}

.button-arrow {

    font-size:
        18px;

}


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

.hero-stats {

    display: flex;

    align-items: center;

    gap: 22px;

    margin-top: 48px;

}

.hero-stat {

    display: flex;

    flex-direction: column;

}

.hero-stat strong {

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

    font-size: 20px;

    color:
        var(--white);

}

.hero-stat span {

    margin-top: 3px;

    color:
        var(--muted);

    font-size: 9px;

    letter-spacing:
        .05em;

}

.stat-divider {

    width: 1px;

    height: 32px;

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

}


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

.hero-visual {

    position: relative;

    min-height:
        590px;

    display: grid;

    place-items: center;

}

.core-scene {

    position: relative;

    width:
        min(
            580px,
            48vw
        );

    height:
        min(
            580px,
            48vw
        );

    min-width:
        430px;

    min-height:
        430px;

    display: grid;

    place-items: center;

}


/* =========================================================
   CORE ORBITS
   ========================================================= */

.core-orbit {

    position: absolute;

    left: 50%;

    top: 50%;

    border-radius: 50%;

    border:
        1px solid
        rgba(57,255,136,.16);

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

    pointer-events: none;

}

.orbit-one {

    width: 290px;
    height: 290px;

    animation:
        orbitRotate
        15s
        linear
        infinite;

}

.orbit-two {

    width: 390px;
    height: 390px;

    border-color:
        rgba(0,229,255,.11);

    transform:
        translate(-50%, -50%)
        rotateX(65deg);

    animation:
        orbitRotateReverse
        20s
        linear
        infinite;

}

.orbit-three {

    width: 500px;
    height: 500px;

    border-style:
        dashed;

    border-color:
        rgba(57,255,136,.07);

    animation:
        orbitRotate
        28s
        linear
        infinite;

}

@keyframes orbitRotate {

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

}

@keyframes orbitRotateReverse {

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

}


/* =========================================================
   CYBER CORE
   ========================================================= */

.cyber-core {

    position: relative;

    z-index: 10;

    width: 190px;

    height: 190px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    cursor: pointer;

    background:

        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,.13),
            transparent 20%
        ),

        radial-gradient(
            circle,
            rgba(57,255,136,.23),
            rgba(0,229,255,.05) 48%,
            #030807 72%
        );

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

    box-shadow:

        0 0 35px
        rgba(57,255,136,.14),

        0 0 90px
        rgba(0,229,255,.08),

        inset 0 0 45px
        rgba(57,255,136,.11);

    transform-style:
        preserve-3d;

    transition:
        filter .35s ease;

}

.cyber-core::before {

    content: "";

    position: absolute;

    inset: 12px;

    border-radius: 50%;

    border:
        1px solid
        rgba(0,229,255,.3);

    animation:
        coreSpin
        9s
        linear
        infinite;

}

.cyber-core::after {

    content: "";

    position: absolute;

    inset: -17px;

    border-radius: 50%;

    border:
        1px solid
        rgba(57,255,136,.09);

    box-shadow:
        0 0 40px
        rgba(57,255,136,.09);

    animation:
        corePulse
        2.8s
        ease-in-out
        infinite;

}

@keyframes coreSpin {

    to {
        transform:
            rotate(360deg);
    }

}

@keyframes corePulse {

    50% {
        transform:
            scale(1.08);

        opacity: .35;
    }

}

.core-inner {

    position: relative;

    z-index: 3;

    text-align: center;

}

.core-symbol {

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

    font-size: 37px;

    font-weight: 800;

    letter-spacing:
        -.08em;

    color:
        var(--green);

    text-shadow:
        0 0 25px
        rgba(57,255,136,.65);

}

.core-label {

    margin-top: 6px;

    font-family:
        "Space Grotesk",
        monospace;

    color:
        var(--cyan);

    font-size: 8px;

    letter-spacing:
        .28em;

}


/* =========================================================
   CORE DATA
   ========================================================= */

.core-data {

    position: absolute;

    z-index: 20;

    display: flex;

    flex-direction: column;

    gap: 2px;

    padding: 8px 11px;

    min-width: 90px;

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

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

    backdrop-filter:
        blur(8px);

}

.core-data strong {

    font-family:
        "Space Grotesk",
        monospace;

    font-size: 10px;

    color:
        var(--green);

}

.data-label {

    color:
        var(--muted);

    font-size: 7px;

    letter-spacing: .16em;

}

.data-top {

    top: 65px;

    left: 50%;

    transform:
        translateX(-50%);

}

.data-right {

    right: 7px;

    top: 50%;

    transform:
        translateY(-50%);

    border-left: 0;

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

    text-align: right;

}

.data-right strong {
    color: var(--cyan);
}

.data-bottom {

    bottom: 65px;

    left: 50%;

    transform:
        translateX(-50%);

}

.data-left {

    left: 7px;

    top: 50%;

    transform:
        translateY(-50%);

}


/* =========================================================
   FLOATING NODES
   ========================================================= */

.floating-node {

    position: absolute;

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:
        0 0 15px
        var(--green);

}

.node-one {

    top: 25%;

    left: 24%;

    animation:
        floatNode
        4s
        ease-in-out
        infinite;

}

.node-two {

    right: 20%;

    top: 28%;

    background:
        var(--cyan);

    box-shadow:
        0 0 15px
        var(--cyan);

    animation:
        floatNode
        5s
        1s
        ease-in-out
        infinite;

}

.node-three {

    bottom: 23%;

    left: 26%;

    animation:
        floatNode
        5s
        .5s
        ease-in-out
        infinite;

}

.node-four {

    bottom: 26%;

    right: 25%;

    background:
        var(--cyan);

    box-shadow:
        0 0 15px
        var(--cyan);

    animation:
        floatNode
        4.5s
        1.5s
        ease-in-out
        infinite;

}

@keyframes floatNode {

    50% {
        transform:
            translateY(-14px)
            scale(1.4);

        opacity: .55;
    }

}


/* =========================================================
   CORE PARTICLES
   ========================================================= */

/* DUZELTME: cyber-core tıklandığında saçılan yeşil animasyon parçacıkları için stil tanımları */
.core-particle {

    position: absolute;

    width: 4px;

    height: 4px;

    background: var(--green);

    border-radius: 50%;

    pointer-events: none;

    box-shadow: 0 0 10px var(--green);

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

    animation: particleFade 1.2s var(--ease) forwards;

}

@keyframes particleFade {

    to {

        transform:
            translate(
                calc(-50% + var(--particle-x)),
                calc(-50% + var(--particle-y))
            )
            scale(0);

        opacity: 0;

    }

}


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

.hero-bottom {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

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

}

.hero-bottom-container {

    min-height: 58px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.trust-items {

    display: flex;

    gap: 28px;

}

.trust-items span {

    color:
        var(--muted);

    font-size: 9px;

    letter-spacing:
        .08em;

}

.scroll-indicator {

    display: flex;

    align-items: center;

    gap: 12px;

    color:
        var(--muted);

    font-size: 8px;

    letter-spacing:
        .18em;

}

.scroll-arrow {

    color:
        var(--green);

    font-size:
        15px;

    animation:
        scrollBounce
        1.5s
        infinite;

}

@keyframes scrollBounce {

    50% {
        transform:
            translateY(4px);
    }

}


/* =========================================================
   SECTIONS
   ========================================================= */

.section {

    position: relative;

    padding:
        140px 0;

}

.section-heading {

    max-width:
        720px;

}

.section-heading.centered {

    margin-inline:
        auto;

    text-align:
        center;

}

.section-number {

    display:
        inline-block;

    margin-bottom:
        18px;

    color:
        var(--green);

    font-family:
        "Space Grotesk",
        monospace;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .2em;

}

.section-heading h2 {

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

    font-size:
        clamp(
            34px,
            4vw,
            57px
        );

    line-height:
        1.08;

    letter-spacing:
        -.045em;

}

.section-heading p {

    margin-top:
        20px;

    color:
        var(--text);

    font-size:
        14px;

    max-width:
        600px;

}

.section-heading.centered p {

    margin-inline:
        auto;

}


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

.security-grid {

    display:
        grid;

    grid-template-columns:
        1fr
        .9fr;

    gap:
        70px;

    margin-top:
        70px;

    align-items:
        center;

}


/* =========================================================
   TERMINAL
   ========================================================= */

.terminal {

    overflow:
        hidden;

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

    background:
        rgba(5,10,11,.8);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.25);

}

.terminal-header {

    height:
        43px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    padding:
        0 15px;

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

    color:
        var(--muted);

    font-family:
        monospace;

    font-size:
        9px;

}

.terminal-dots {

    display:
        flex;

    gap:
        5px;

}

.terminal-dots span {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

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

}

.terminal-dots span:first-child {
    background: var(--green);
}

.terminal-body {

    padding:
        30px;

    min-height:
        300px;

    font-family:
        monospace;

    font-size:
        11px;

}

.terminal-line {

    color:
        var(--muted);

    margin-bottom:
        15px;

}

.terminal-line.success {

    color:
        var(--green);

    text-shadow:
        0 0 12px
        rgba(57,255,136,.3);

}

.terminal-progress {

    height:
        2px;

    margin-top:
        35px;

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

}

.terminal-progress span {

    display:
        block;

    height:
        100%;

    width:
        92%;

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

    box-shadow:
        0 0 15px
        rgba(57,255,136,.4);

}


/* =========================================================
   SECURITY FEATURES
   ========================================================= */

.security-features {

    display:
        flex;

    flex-direction:
        column;

}

.security-feature {

    display:
        grid;

    grid-template-columns:
        52px 1fr;

    gap:
        20px;

    padding:
        27px 0;

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

}

.security-feature:first-child {

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

}

.feature-number {

    color:
        var(--green);

    font-family:
        monospace;

    font-size:
        11px;

}

.security-feature h3 {

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

    font-size:
        19px;

}

.security-feature p {

    margin-top:
        8px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.8;

}


/* =========================================================
   WEB DESIGN
   ========================================================= */

.web-design-section {

    overflow:
        hidden;

}

.web-offer {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        1.1fr .9fr;

    min-height:
        500px;

    margin-top:
        70px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(57,255,136,.18);

    background:
        linear-gradient(
            135deg,
            rgba(57,255,136,.055),
            rgba(0,229,255,.025)
        );

}

.offer-glow {

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    left:
        -180px;

    top:
        -180px;

    border-radius:
        50%;

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

    filter:
        blur(100px);

}

.offer-content {

    position:
        relative;

    z-index:
        2;

    padding:
        70px;

}

.offer-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        7px 10px;

    border:
        1px solid
        rgba(57,255,136,.2);

    color:
        var(--green);

    font-family:
        monospace;

    font-size:
        8px;

    letter-spacing:
        .15em;

}

.offer-content h3 {

    max-width:
        580px;

    margin-top:
        28px;

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

    font-size:
        clamp(
            34px,
            4vw,
            57px
        );

    line-height:
        1.04;

    letter-spacing:
        -.05em;

}

.offer-content h3 span {

    display:
        block;

    color:
        var(--green);

}

.offer-content > p {

    max-width:
        560px;

    margin-top:
        20px;

    color:
        var(--text);

    font-size:
        13px;

    line-height:
        1.8;

}

.offer-price {

    margin-top:
        30px;

}

.offer-price span {

    display:
        block;

    color:
        var(--muted);

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

}

.offer-price strong {

    display:
        block;

    margin-top:
        3px;

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

    font-size:
        48px;

    line-height:
        1;

}

.offer-price small {

    color:
        var(--green);

    font-size:
        22px;

}

.offer-content .button {

    margin-top:
        28px;

}


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

.offer-services {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        50px;

    border-left:
        1px solid
        rgba(255,255,255,.07);

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

}

.offer-service {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    min-height:
        82px;

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

}

.offer-service:first-child {

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

}

.offer-service span {

    color:
        var(--green);

    font-family:
        monospace;

    font-size:
        9px;

}

.offer-service strong {

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

    font-size:
        14px;

}


/* =========================================================
   WEB ADVANTAGES
   ========================================================= */

.web-advantages {

    display:
        grid;

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

    gap:
        1px;

    margin-top:
        1px;

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

}

.web-advantages .why-card {

    border:
        0;

}


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

.why-grid {

    display:
        grid;

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

    gap:
        14px;

    margin-top:
        65px;

}

.why-card {

    position:
        relative;

    padding:
        32px;

    min-height:
        220px;

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

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

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

}

.why-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(57,255,136,.25);

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

}

.why-card > span {

    color:
        var(--green);

    font-family:
        monospace;

    font-size:
        9px;

}

.why-card h3 {

    margin-top:
        55px;

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

    font-size:
        18px;

}

.why-card p {

    margin-top:
        10px;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.8;

}

.why-icon {

    font-family:
        monospace;

    color:
        var(--green);

    font-size:
        25px;

    text-shadow:
        0 0 20px
        rgba(57,255,136,.25);

}

.why-icon + h3 {

    margin-top:
        35px;

}


/* =========================================================
   PORTFOLIO
   ========================================================= */

.portfolio-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

}

.text-link {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--green);

    font-size:
        11px;

    font-weight:
        700;

}

.text-link span {

    font-size:
        18px;

    transition:
        transform .3s ease;

}

.text-link:hover span {

    transform:
        translate(4px, -4px);

}

.portfolio-filters {

    display:
        flex;

    gap:
        8px;

    margin-top:
        45px;

    flex-wrap:
        wrap;

}

.portfolio-filter {

    padding:
        9px 14px;

    color:
        var(--muted);

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

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

    font-size:
        9px;

    cursor:
        pointer;

    transition:
        all .3s ease;

}

.portfolio-filter:hover,
.portfolio-filter.active {

    color:
        var(--green);

    border-color:
        rgba(57,255,136,.28);

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

}

.portfolio-grid {

    display:
        grid;

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

    gap:
        12px;

    margin-top:
        18px;

}

.portfolio-placeholder {

    position:
        relative;

    min-height:
        310px;

    overflow:
        hidden;

    padding:
        28px;

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

    background:

        linear-gradient(
            135deg,
            rgba(57,255,136,.035),
            rgba(0,229,255,.015)
        );

    transition:
        transform .4s
        var(--ease),
        border-color .4s ease;

}

.portfolio-placeholder::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(57,255,136,.12),
            transparent 30%
        );

    opacity:
        0;

    transition:
        opacity .4s ease;

}

.portfolio-placeholder:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(57,255,136,.25);

}

.portfolio-placeholder:hover::before {

    opacity:
        1;

}

.portfolio-number {

    position:
        absolute;

    top:
        24px;

    right:
        24px;

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

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

    font-size:
        38px;

    font-weight:
        700;

}

.portfolio-content {

    position:
        absolute;

    left:
        28px;

    bottom:
        28px;

}

.portfolio-content span {

    color:
        var(--green);

    font-family:
        monospace;

    font-size:
        8px;

    letter-spacing:
        .15em;

}

.portfolio-content h3 {

    margin-top:
        7px;

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

    font-size:
        21px;

}

.portfolio-content p {

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        10px;

}

.portfolio-arrow {

    position:
        absolute;

    right:
        26px;

    bottom:
        26px;

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(57,255,136,.2);

    color:
        var(--green);

}


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

.process-list {

    margin-top:
        65px;

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

}

.process-item {

    display:
        grid;

    grid-template-columns:
        100px 1fr;

    gap:
        35px;

    padding:
        35px 0;

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

    transition:
        padding .35s
        var(--ease);

}

.process-item:hover {

    padding-left:
        14px;

}

.process-number {

    color:
        var(--green);

    font-family:
        "Space Grotesk",
        monospace;

    font-size:
        14px;

}

.process-item h3 {

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

    font-size:
        22px;

}

.process-item p {

    max-width:
        600px;

    margin-top:
        7px;

    color:
        var(--muted);

    font-size:
        12px;

}


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

.contact-section {

    padding-bottom:
        160px;

}

.contact-box {

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        rgba(57,255,136,.18);

    background:
        linear-gradient(
            120deg,
            rgba(57,255,136,.045),
            rgba(0,229,255,.025)
        );

}

.contact-box::before {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    border-radius:
        50%;

    right:
        -250px;

    top:
        -250px;

    background:
        rgba(0,229,255,.06);

    filter:
        blur(100px);

}

.contact-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        1.1fr .9fr;

}

.contact-content {

    padding:
        70px;

}

.contact-content h2 {

    max-width:
        650px;

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

    font-size:
        clamp(
            36px,
            4vw,
            60px
        );

    line-height:
        1.04;

    letter-spacing:
        -.05em;

}

.contact-content p {

    max-width:
        600px;

    margin-top:
        20px;

    color:
        var(--text);

    font-size:
        13px;

    line-height:
        1.8;

}

.contact-actions {

    margin-top:
        30px;

}


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

.contact-terminal {

    align-self:
        center;

    margin:
        50px;

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

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

}

.contact-terminal-header {

    display:
        flex;

    justify-content:
        space-between;

    padding:
        14px 18px;

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

    font-family:
        monospace;

    font-size:
        8px;

    color:
        var(--muted);

}

.contact-terminal-header span:last-child {

    color:
        var(--green);

}

.contact-terminal-body {

    padding:
        25px;

}

.contact-terminal-body > div {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        14px 0;

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

}

.contact-terminal-body span {

    color:
        var(--muted);

    font-family:
        monospace;

    font-size:
        9px;

}

.contact-terminal-body strong {

    color:
        var(--green);

    font-family:
        monospace;

    font-size:
        9px;

}


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

.site-footer {

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

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

}

.footer-main {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        80px;

    padding:
        65px 0;

}

.footer-brand {

    max-width:
        380px;

}

.footer-brand p {

    margin-top:
        18px;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.8;

}

.footer-links {

    display:
        flex;

    gap:
        100px;

}

.footer-links > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;

}

.footer-links span {

    margin-bottom:
        8px;

    color:
        var(--green);

    font-family:
        monospace;

    font-size:
        8px;

    letter-spacing:
        .16em;

}

.footer-links a {

    color:
        var(--muted);

    font-size:
        11px;

    transition:
        color .3s ease;

}

.footer-links a:hover {

    color:
        var(--white);

}

.footer-bottom {

    min-height:
        60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

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

    color:
        var(--muted);

    font-family:
        monospace;

    font-size:
        8px;

    letter-spacing:
        .08em;

}


/* =========================================================
   CURSOR GLOW
   ========================================================= */

.cursor-glow {

    position:
        fixed;

    width:
        260px;

    height:
        260px;

    left:
        0;

    top:
        0;

    border-radius:
        50%;

    pointer-events:
        none;

    z-index:
        999;

    background:
        radial-gradient(
            circle,
            rgba(57,255,136,.055),
            transparent 65%
        );

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

    opacity:
        0;

    transition:
        opacity .3s ease;

}

body:hover .cursor-glow {

    opacity:
        1;

}


/* =========================================================
   REVEAL
   ========================================================= */

[data-reveal] {

    opacity:
        0;

    transform:
        translateY(35px);

    transition:
        opacity .8s
        var(--ease),
        transform .8s
        var(--ease);

}

[data-reveal="left"] {

    transform:
        translateX(-40px);

}

[data-reveal="right"] {

    transform:
        translateX(40px);

}

[data-reveal="scale"] {

    transform:
        scale(.92);

}

[data-reveal].revealed {

    opacity:
        1;

    transform:
        translate(0)
        scale(1);

}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .main-navigation {

        gap:
            18px;

    }

    .hero-container {

        grid-template-columns:
            1fr;

        padding-top:
            80px;

    }

    .hero-content {

        text-align:
            center;

    }

    .hero-description {

        margin-inline:
            auto;

    }

    .hero-actions,
    .hero-stats {

        justify-content:
            center;

    }

    .hero-visual {

        min-height:
            520px;

    }

    .core-scene {

        width:
            520px;

        height:
            520px;

    }

    .security-grid,
    .contact-grid {

        grid-template-columns:
            1fr;

    }

    .why-grid {

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

    }

    .portfolio-grid {

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

    }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 760px) {

    :root {

        --header-height:
            70px;

    }

    .container {

        width:
            min(
                calc(100% - 30px),
                var(--container)
            );

    }

    .site-header {

        height:
            var(--header-height);

    }

    .main-navigation {

        display:
            none;

    }

    /* DUZELTME: Mobil menü açıldığında görünecek dropdown alanı tasarımı */
    .main-navigation.mobile-open {

        display: flex;

        flex-direction: column;

        position: fixed;

        top: var(--header-height);

        left: 0;

        right: 0;

        bottom: 0;

        background: rgba(3, 5, 6, 0.96);

        backdrop-filter: blur(25px);

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

        padding: 50px 30px;

        gap: 25px;

        align-items: center;

        z-index: 499;

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

        animation: mobileMenuFade 0.4s var(--ease) forwards;

    }

    @keyframes mobileMenuFade {
        from {
            opacity: 0;
            transform: translateY(-15px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .header-cta {

        display:
            none;

    }

    .menu-toggle {

        display:
            block;

    }

    .hero-container {

        padding-top:
            55px;

        padding-bottom:
            100px;

    }

    .hero-title {

        font-size:
            clamp(
                39px,
                12vw,
                58px
            );

    }

    .hero-description {

        font-size:
            13px;

    }

    .hero-stats {

        gap:
            13px;

    }

    .hero-stat strong {

        font-size:
            17px;

    }

    .hero-stat span {

        font-size:
            8px;

    }

    .stat-divider {

        height:
            25px;

    }

    .hero-visual {

        min-height:
            430px;

    }

    .core-scene {

        min-width:
            340px;

        min-height:
            340px;

        width:
            100%;

        height:
            400px;

        transform:
            scale(.75);

    }

    .hero-bottom {

        display:
            none;

    }

    .section {

        padding:
            90px 0;

    }

    .section-heading h2 {

        font-size:
            35px;

    }

    .security-grid {

        margin-top:
            45px;

        gap:
            40px;

    }

    .terminal-body {

        padding:
            22px;

        min-height:
            250px;

    }

    .web-offer {

        grid-template-columns:
            1fr;

    }

    .offer-content {

        padding:
            40px 25px;

    }

    .offer-services {

        padding:
            20px 25px 35px;

        border-left:
            0;

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

    }

    .web-advantages {

        grid-template-columns:
            1fr 1fr;

    }

    .why-grid {

        grid-template-columns:
            1fr;

        margin-top:
            45px;

    }

    .portfolio-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

    .portfolio-grid {

        grid-template-columns:
            1fr;

    }

    .portfolio-placeholder {

        min-height:
            260px;

    }

    .process-item {

        grid-template-columns:
            55px 1fr;

        gap:
            15px;

    }

    .contact-content {

        padding:
            40px 25px;

    }

    .contact-terminal {

        margin:
            0 25px 30px;

    }

    .footer-main {

        flex-direction:
            column;

        gap:
            45px;

    }

    .footer-links {

        gap:
            70px;

    }

    .footer-bottom {

        min-height:
            80px;

        align-items:
            flex-start;

        justify-content:
            center;

        flex-direction:
            column;

        gap:
            5px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 420px) {

    .hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }

    .button {

        width:
            100%;

    }

    .hero-stats {

        gap:
            9px;

    }

    .hero-stat span {

        max-width:
            70px;

    }

    .web-advantages {

        grid-template-columns:
            1fr;

    }

    .offer-price strong {

        font-size:
            40px;

    }

    .footer-links {

        gap:
            45px;

    }

}

/* CyberKalkan desktop enhancements - append after style.css */
.logo-wrap { display:flex; align-items:center; justify-content:center; }
.site-logo { display:block; width:auto; height:42px; max-width:170px; object-fit:contain; }
.core-logo { width:120px; height:120px; display:flex; align-items:center; justify-content:center; }
.core-logo img { display:block; width:78px; height:78px; object-fit:contain; }
.footer-socials a { display:flex; align-items:center; justify-content:center; }
.footer-socials i { font-style:normal; font-size:11px; font-weight:800; letter-spacing:.04em; }
.footer-contact-list a { color:inherit; text-decoration:none; transition:opacity .2s ease; }
.footer-contact-list a:hover { opacity:.7; }

.projects-preview-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:48px;
}
.project-preview-card {
    position:relative;
    min-height:290px;
    padding:26px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.025);
    overflow:hidden;
    transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.project-preview-card:hover {
    transform:translateY(-6px);
    border-color:rgba(127,174,116,.45);
    background:rgba(127,174,116,.045);
}
.project-preview-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:rgba(255,255,255,.42);
    font-size:10px;
    letter-spacing:.14em;
    font-weight:700;
}
.project-preview-content { margin-top:58px; }
.project-preview-icon {
    width:48px;height:48px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(127,174,116,.35);
    color:#b9d7ae;
    font-weight:800;
    font-size:13px;
    margin-bottom:20px;
}
.project-preview-content h3 { margin:0 0 10px; }
.project-preview-content p { margin:0 0 18px; color:rgba(255,255,255,.58); line-height:1.7; font-size:14px; }
.project-tag {
    display:inline-flex;
    padding:7px 10px;
    border:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.62);
    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.projects-preview-action { margin-top:30px; text-align:center; }

.offer-service { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.offer-service span { flex:0 0 auto; }
.offer-service small {
    margin-left:0;
    color:rgba(255,255,255,.42);
    font-size:11px;
    line-height:1.45;
}

@media (max-width: 900px) {
    .projects-preview-grid { grid-template-columns:1fr; }
}

/* =========================================================
   CYBERKALKAN // NEW PREMIUM BRAND
   ========================================================= */

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.site-header {
    background: rgba(3, 5, 6, 0.34);
    border-bottom: 1px solid rgba(57, 255, 136, 0.07);

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

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

.site-header:hover {
    background: rgba(3, 5, 6, 0.44);
    border-bottom-color: rgba(57, 255, 136, 0.12);
}


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

.brand-logo {
    display: flex;
    align-items: center;
    gap: 14px;

    position: relative;

    text-decoration: none;
}


/* ---------------------------------------------------------
   LOGO
   --------------------------------------------------------- */

/* Eski kutuyu tamamen kaldırıyoruz */
.brand-symbol.logo-wrap {
    position: relative;

    width: 58px;
    height: 58px;

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

    border: none;
    background: transparent;

    box-shadow: none;

    overflow: visible;

    flex-shrink: 0;

    animation: cyberLogoFloat 4s ease-in-out infinite;
}


/* Logo görüntüsü */
.brand-symbol.logo-wrap .site-logo {
    position: relative;
    z-index: 2;

    width: 56px;
    height: 56px;

    max-width: none;

    object-fit: contain;

    /* Köşeleri yumuşat */
    border-radius: 15px;

    /* Neon neon ışık */
    filter:
        drop-shadow(0 0 5px rgba(57, 255, 136, 0.20));

    transition:
        transform .45s ease,
        filter .45s ease;
}


/* ---------------------------------------------------------
   LOGO AROUND GLOW
   --------------------------------------------------------- */

.brand-symbol.logo-wrap::before {
    content: "";

    position: absolute;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(57, 255, 136, 0.16) 0%,
            rgba(57, 255, 136, 0.06) 35%,
            transparent 72%
        );

    filter: blur(7px);

    opacity: .65;

    z-index: 0;

    animation: cyberLogoGlow 3s ease-in-out infinite;
}


/* ÖNCEKİ KARE/TARAMA ANİMASYONUNU KESİNLİKLE KAPAT */
.brand-symbol.logo-wrap::after {
    display: none !important;
}


/* ---------------------------------------------------------
   LOGO HOVER
   --------------------------------------------------------- */

.brand-logo:hover .site-logo {
    transform: scale(1.08) rotate(-1deg);

    filter:
        drop-shadow(0 0 8px rgba(57, 255, 136, 0.45))
        drop-shadow(0 0 18px rgba(0, 229, 255, 0.18));
}

.brand-logo:hover .brand-symbol.logo-wrap::before {
    opacity: 1;
}


/* ---------------------------------------------------------
   CYBERKALKAN TEXT
   --------------------------------------------------------- */

.brand-name {
    position: relative;

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

    font-size: 17px;

    font-weight: 800;

    letter-spacing: .13em;

    line-height: 1;

    /* Neon gradient */
    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #ffffff 30%,
            #39ff88 45%,
            #00e5ff 52%,
            #39ff88 60%,
            #ffffff 75%,
            #ffffff 100%
        );

    background-size: 250% auto;

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

    -webkit-text-fill-color: transparent;

    animation:
        cyberTextShine 5s linear infinite,
        cyberTextFloat 4s ease-in-out infinite;
}


/* KALKAN */
.brand-name span {
    background:
        linear-gradient(
            90deg,
            #39ff88,
            #00e5ff,
            #39ff88,
            #00e5ff
        );

    background-size: 220% auto;

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

    -webkit-text-fill-color: transparent;

    animation: cyberKalkanShine 3s linear infinite;
}


/* ---------------------------------------------------------
   TEXT HOVER
   --------------------------------------------------------- */

.brand-logo:hover .brand-name {
    letter-spacing: .16em;

    filter:
        drop-shadow(0 0 6px rgba(57, 255, 136, 0.28));

    transition:
        letter-spacing .4s ease,
        filter .4s ease;
}


/* ---------------------------------------------------------
   LOGO ANIMATIONS
   --------------------------------------------------------- */

@keyframes cyberLogoFloat {

    0% {
        transform: translateY(0);
    }

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

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


@keyframes cyberLogoGlow {

    0% {
        transform: scale(.82);
        opacity: .35;
    }

    50% {
        transform: scale(1.12);
        opacity: .75;
    }

    100% {
        transform: scale(.82);
        opacity: .35;
    }
}


/* ---------------------------------------------------------
   CYBERKALKAN TEXT ANIMATIONS
   --------------------------------------------------------- */

@keyframes cyberTextShine {

    0% {
        background-position: 250% center;
    }

    100% {
        background-position: -250% center;
    }
}


@keyframes cyberKalkanShine {

    0% {
        background-position: 220% center;
    }

    100% {
        background-position: -220% center;
    }
}


@keyframes cyberTextFloat {

    0% {
        transform: translateY(0);
    }

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

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


/* ---------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------- */

.main-navigation {
    gap: 32px;
}

.main-navigation a {
    position: relative;

    padding: 8px 0;

    transition:
        color .3s ease,
        transform .3s ease;
}

.main-navigation a:hover {
    transform: translateY(-1px);
}

.main-navigation a::after {
    bottom: 0;

    height: 2px;

    border-radius: 999px;

    box-shadow:
        0 0 7px rgba(57, 255, 136, 0.55);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .brand-logo {
        gap: 10px;
    }

    .brand-symbol.logo-wrap {
        width: 46px;
        height: 46px;
    }

    .brand-symbol.logo-wrap .site-logo {
        width: 45px;
        height: 45px;
        border-radius: 12px;
    }

    .brand-name {
        font-size: 14px;
        letter-spacing: .10em;
    }

    .brand-logo:hover .brand-name {
        letter-spacing: .10em;
    }
}

/* =========================================================
   CYBERKALKAN // LOGO + BRAND ANIMATION v2
   ========================================================= */

/* LOGO ALANI */
.brand-symbol.logo-wrap {
    width: 78px;
    height: 78px;

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

    position: relative;

    border: none !important;
    background: transparent !important;
    box-shadow: none !important;

    overflow: visible;

    flex-shrink: 0;

    animation: cyberLogoFloat 4s ease-in-out infinite;
}

/* LOGONUN KENDİSİ */
.brand-symbol.logo-wrap .site-logo {
    width: 76px;
    height: 76px;

    max-width: none;

    object-fit: contain;

    border-radius: 22px;

    position: relative;
    z-index: 2;

    filter:
        drop-shadow(0 0 7px rgba(57,255,136,.28))
        drop-shadow(0 0 18px rgba(57,255,136,.10));

    animation: cyberLogoPulse 3.5s ease-in-out infinite;

    transition:
        transform .45s ease,
        filter .45s ease;
}

/* LOGONUN ARKASINDAKİ YUMUŞAK GLOW */
.brand-symbol.logo-wrap::before {
    content: "";

    position: absolute;

    width: 72px;
    height: 72px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(57,255,136,.22) 0%,
            rgba(57,255,136,.09) 32%,
            rgba(0,229,255,.04) 52%,
            transparent 75%
        );

    filter: blur(10px);

    z-index: 0;

    animation: cyberLogoAura 3.5s ease-in-out infinite;
}

/* ESKİ KUTU / ÇİZGİ / TARAMA EFEKTİ TAMAMEN KAPALI */
.brand-symbol.logo-wrap::after {
    display: none !important;
}

.brand-logo::after {
    display: none !important;
}


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

.brand-logo:hover .site-logo {
    transform: scale(1.10);

    filter:
        drop-shadow(0 0 10px rgba(57,255,136,.55))
        drop-shadow(0 0 24px rgba(0,229,255,.22));
}


/* =========================================================
   CYBERKALKAN YAZISI
   ========================================================= */

.brand-name {
    position: relative;

    font-size: 17px;
    font-weight: 800;
    letter-spacing: .13em;

    line-height: 1;

    color: #fff;

    /* Ana yazı */
    background:
        linear-gradient(
            110deg,
            #ffffff 0%,
            #ffffff 28%,
            #39ff88 42%,
            #ffffff 50%,
            #00e5ff 58%,
            #39ff88 68%,
            #ffffff 82%,
            #ffffff 100%
        );

    background-size: 300% 100%;

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

    -webkit-text-fill-color: transparent;

    animation: cyberBrandFlow 4s ease-in-out infinite;

    transition:
        letter-spacing .4s ease,
        filter .4s ease;
}


/* KALKAN KISMI */
.brand-name span {
    background:
        linear-gradient(
            90deg,
            #39ff88,
            #00e5ff,
            #39ff88,
            #00e5ff,
            #39ff88
        );

    background-size: 300% 100%;

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

    -webkit-text-fill-color: transparent;

    animation: cyberKalkanFlow 2.8s linear infinite;
}


/* =========================================================
   YAZIYA NEON PARILTI
   ========================================================= */

.brand-logo:hover .brand-name {
    letter-spacing: .17em;

    filter:
        drop-shadow(0 0 5px rgba(57,255,136,.40))
        drop-shadow(0 0 12px rgba(0,229,255,.18));
}


/* =========================================================
   LOGO ANİMASYONLARI
   ========================================================= */

@keyframes cyberLogoFloat {

    0% {
        transform: translateY(0);
    }

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

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


@keyframes cyberLogoPulse {

    0% {
        filter:
            drop-shadow(0 0 6px rgba(57,255,136,.22))
            drop-shadow(0 0 14px rgba(57,255,136,.08));
    }

    50% {
        filter:
            drop-shadow(0 0 10px rgba(57,255,136,.50))
            drop-shadow(0 0 25px rgba(0,229,255,.18));
    }

    100% {
        filter:
            drop-shadow(0 0 6px rgba(57,255,136,.22))
            drop-shadow(0 0 14px rgba(57,255,136,.08));
    }
}


@keyframes cyberLogoAura {

    0% {
        transform: scale(.82);
        opacity: .35;
    }

    50% {
        transform: scale(1.18);
        opacity: .85;
    }

    100% {
        transform: scale(.82);
        opacity: .35;
    }
}


/* =========================================================
   CYBERKALKAN YAZI ANİMASYONLARI
   ========================================================= */

/*
   Yazının üzerinde sürekli hareket eden
   neon ışık geçişi
*/
@keyframes cyberBrandFlow {

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

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

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


@keyframes cyberKalkanFlow {

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

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


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 768px) {

    .brand-symbol.logo-wrap {
        width: 58px;
        height: 58px;
    }

    .brand-symbol.logo-wrap .site-logo {
        width: 57px;
        height: 57px;
        border-radius: 17px;
    }

    .brand-name {
        font-size: 14px;
        letter-spacing: .09em;
    }

    .brand-logo:hover .brand-name {
        letter-spacing: .09em;
    }
}

/* =========================================================
   CYBERKALKAN // FINAL BRAND SYSTEM
   ========================================================= */


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

.brand-logo {
    gap: 15px;
    align-items: center;
}


/* Menüdeki logo */
.brand-symbol.logo-wrap {
    width: 70px !important;
    height: 70px !important;

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

    position: relative;

    border: none !important;
    background: transparent !important;
    box-shadow: none !important;

    overflow: visible;

    flex-shrink: 0;

    animation:
        headerLogoFloat
        4s ease-in-out infinite;
}


/* Logo görseli */
.brand-symbol.logo-wrap .site-logo {
    width: 68px !important;
    height: 68px !important;

    max-width: none !important;

    object-fit: contain;

    border-radius: 20px;

    position: relative;
    z-index: 5;

    filter:
        drop-shadow(0 0 5px rgba(57,255,136,.35))
        drop-shadow(0 0 15px rgba(0,229,255,.12));

    animation:
        headerLogoGlow
        3.2s ease-in-out infinite;

    transition:
        transform .4s ease,
        filter .4s ease;
}


/* Logo arkasındaki yumuşak ışık */
.brand-symbol.logo-wrap::before {
    content: "";

    position: absolute;

    width: 72px;
    height: 72px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(57,255,136,.18),
            rgba(0,229,255,.05) 45%,
            transparent 72%
        );

    filter: blur(10px);

    opacity: .7;

    z-index: 0;

    animation:
        headerLogoAura
        3.2s ease-in-out infinite;
}


/* Eski çizgi/tarama efektlerini tamamen kaldır */
.brand-symbol.logo-wrap::after,
.brand-logo::after {
    display: none !important;
}


/* Logo hover */
.brand-logo:hover .site-logo {
    transform: scale(1.07);

    filter:
        drop-shadow(0 0 9px rgba(57,255,136,.65))
        drop-shadow(0 0 22px rgba(0,229,255,.28));
}


/* =========================================================
   CYBERKALKAN YAZISI
   ========================================================= */

.brand-name {
    position: relative;

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

    font-size: 18px !important;

    font-weight: 800;

    letter-spacing: .16em;

    line-height: 1;

    /* Görseldeki futuristik beyaz + neon geçiş */
    background:
        linear-gradient(
            100deg,

            #ffffff 0%,
            #ffffff 20%,

            #b8fff0 31%,

            #39ff88 40%,

            #ffffff 47%,

            #00e5ff 55%,

            #39ff88 63%,

            #ffffff 73%,

            #ffffff 100%
        );

    background-size: 320% 100%;

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

    -webkit-text-fill-color: transparent;

    animation:
        brandEnergyFlow
        4.5s linear infinite;

    filter:
        drop-shadow(0 0 3px rgba(57,255,136,.12));
}


/* KALKAN kısmı */
.brand-name span {
    background:
        linear-gradient(
            100deg,

            #39ff88 0%,
            #00e5ff 25%,
            #ffffff 50%,
            #39ff88 75%,
            #00e5ff 100%
        );

    background-size: 250% 100%;

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

    -webkit-text-fill-color: transparent;

    animation:
        kalkanEnergyFlow
        2.8s linear infinite;
}


/* =========================================================
   YAZIYA ELEKTRİKSEL / GLITCH HİSSİ
   ========================================================= */

.brand-name {
    text-shadow:
        0 0 10px rgba(57,255,136,.08);
}


/* Hover'da enerji yükselsin */
.brand-logo:hover .brand-name {
    letter-spacing: .19em;

    filter:
        drop-shadow(0 0 5px rgba(57,255,136,.45))
        drop-shadow(0 0 14px rgba(0,229,255,.25));
}


/* =========================================================
   HEADER LOGO ANIMATIONS
   ========================================================= */

@keyframes headerLogoFloat {

    0% {
        transform: translateY(0);
    }

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

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


@keyframes headerLogoGlow {

    0% {
        filter:
            drop-shadow(0 0 5px rgba(57,255,136,.25))
            drop-shadow(0 0 12px rgba(0,229,255,.08));
    }

    50% {
        filter:
            drop-shadow(0 0 9px rgba(57,255,136,.60))
            drop-shadow(0 0 22px rgba(0,229,255,.22));
    }

    100% {
        filter:
            drop-shadow(0 0 5px rgba(57,255,136,.25))
            drop-shadow(0 0 12px rgba(0,229,255,.08));
    }
}


@keyframes headerLogoAura {

    0% {
        transform: scale(.82);
        opacity: .35;
    }

    50% {
        transform: scale(1.15);
        opacity: .85;
    }

    100% {
        transform: scale(.82);
        opacity: .35;
    }
}


/* =========================================================
   CYBERKALKAN TEXT ENERGY
   ========================================================= */

@keyframes brandEnergyFlow {

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

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

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


@keyframes kalkanEnergyFlow {

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

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


/* =========================================================
   CYBER CORE // SAĞ TARAFTAKİ LOGO
   ========================================================= */

/*
   Mevcut Cyber Core zaten 190x190.
   Biz sadece içindeki logoyu büyütüyoruz.
*/

.core-symbol.core-logo {
    width: 150px !important;
    height: 150px !important;

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

    position: relative;

    border: none !important;
    background: transparent !important;

    box-shadow: none !important;

    overflow: visible;

    animation:
        coreLogoFloat
        4s ease-in-out infinite;
}


/* Sağdaki logo */
.core-symbol.core-logo img {
    width: 128px !important;
    height: 128px !important;

    object-fit: contain;

    border-radius: 28px;

    position: relative;
    z-index: 5;

    filter:
        drop-shadow(0 0 8px rgba(57,255,136,.42))
        drop-shadow(0 0 25px rgba(0,229,255,.16));

    animation:
        coreLogoEnergy
        3.5s ease-in-out infinite;

    transition:
        transform .5s ease,
        filter .5s ease;
}


/* Sağdaki logonun arkasındaki aura */
.core-symbol.core-logo::before {
    content: "";

    position: absolute;

    width: 125px;
    height: 125px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(57,255,136,.25),
            rgba(0,229,255,.08) 42%,
            transparent 72%
        );

    filter: blur(13px);

    z-index: 0;

    animation:
        coreLogoAura
        3.5s ease-in-out infinite;
}


/* Hover */
.cyber-core:hover .core-symbol.core-logo img {
    transform: scale(1.08);

    filter:
        drop-shadow(0 0 12px rgba(57,255,136,.75))
        drop-shadow(0 0 30px rgba(0,229,255,.30));
}


/* =========================================================
   CORE LOGO ANIMATIONS
   ========================================================= */

@keyframes coreLogoFloat {

    0% {
        transform: translateY(0);
    }

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

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


@keyframes coreLogoEnergy {

    0% {
        filter:
            drop-shadow(0 0 7px rgba(57,255,136,.32))
            drop-shadow(0 0 18px rgba(0,229,255,.10));
    }

    50% {
        filter:
            drop-shadow(0 0 12px rgba(57,255,136,.65))
            drop-shadow(0 0 28px rgba(0,229,255,.24));
    }

    100% {
        filter:
            drop-shadow(0 0 7px rgba(57,255,136,.32))
            drop-shadow(0 0 18px rgba(0,229,255,.10));
    }
}


@keyframes coreLogoAura {

    0% {
        transform: scale(.82);
        opacity: .35;
    }

    50% {
        transform: scale(1.18);
        opacity: .9;
    }

    100% {
        transform: scale(.82);
        opacity: .35;
    }
}


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

@media (max-width: 768px) {

    .brand-symbol.logo-wrap {
        width: 56px !important;
        height: 56px !important;
    }

    .brand-symbol.logo-wrap .site-logo {
        width: 54px !important;
        height: 54px !important;
        border-radius: 16px;
    }

    .brand-name {
        font-size: 14px !important;
        letter-spacing: .10em;
    }

    .core-symbol.core-logo {
        width: 120px !important;
        height: 120px !important;
    }

    .core-symbol.core-logo img {
        width: 105px !important;
        height: 105px !important;
        border-radius: 23px;
    }
}

/* =========================================================
   CYBERKALKAN HEADER LOGO — SADECE LOGO
   ========================================================= */

/* Menüdeki mevcut yazıyı gizle */
header .logo span,
header .logo-text,
header .brand-text,
header .site-title {
    display: none !important;
}

/* Logo alanı */
header .logo,
header .navbar-brand,
header .brand,
header .logo-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* CyberKalkan logosu */
header .logo img,
header .navbar-brand img,
header .brand img,
header .logo-link img {
    width: 125px !important;
    height: 72px !important;

    object-fit: contain !important;

    /* Kare görünüm yerine yumuşak */
    border-radius: 18px !important;

    /* Neon CyberKalkan efekti */
    filter:
        drop-shadow(0 0 5px rgba(0, 255, 120, 0.65))
        drop-shadow(0 0 14px rgba(0, 255, 180, 0.25));

    transition:
        transform 0.35s ease,
        filter 0.35s ease !important;
}

/* Mouse üzerine gelince hafif canlılık */
header .logo:hover img,
header .navbar-brand:hover img,
header .brand:hover img,
header .logo-link:hover img {
    transform: scale(1.06);

    filter:
        drop-shadow(0 0 7px rgba(0, 255, 120, 0.9))
        drop-shadow(0 0 22px rgba(0, 255, 200, 0.45));
}


/* =========================================================
   HEADER YÜKSEKLİĞİ
   ========================================================= */

header {
    min-height: 88px !important;
}

header .container,
header .nav-container,
header .navbar-container {
    min-height: 88px !important;
    display: flex !important;
    align-items: center !important;
}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 768px) {

    header .logo img,
    header .navbar-brand img,
    header .brand img,
    header .logo-link img {
        width: 100px !important;
        height: 60px !important;
    }

    header {
        min-height: 76px !important;
    }
}

/* =========================================================
   CYBERKALKAN — HEADER LOGO FINAL
   ========================================================= */

/* HEADER'DAKİ CYBERKALKAN YAZISINI GİZLE */
header .logo span,
header .logo .logo-text,
header .logo .brand-text,
header .logo-text,
header .brand-text,
header .site-title {
    display: none !important;
}

/* Logo alanını büyüt */
header .logo,
header .navbar-brand,
header .brand,
header .logo-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;
    height: 88px !important;
}

/* LOGOYU CİDDİ ŞEKİLDE BÜYÜT */
header .logo img,
header .navbar-brand img,
header .brand img,
header .logo-link img {
    width: 150px !important;
    height: 80px !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;

    border-radius: 22px !important;

    filter:
        drop-shadow(0 0 6px rgba(0, 255, 100, 0.85))
        drop-shadow(0 0 16px rgba(0, 255, 150, 0.45))
        drop-shadow(0 0 30px rgba(0, 255, 180, 0.18));

    transition:
        transform 0.35s ease,
        filter 0.35s ease !important;
}

/* Hover'da hafif büyüme */
header .logo:hover img,
header .navbar-brand:hover img,
header .brand:hover img,
header .logo-link:hover img {
    transform: scale(1.08);

    filter:
        drop-shadow(0 0 8px rgba(0, 255, 100, 1))
        drop-shadow(0 0 20px rgba(0, 255, 150, 0.65))
        drop-shadow(0 0 35px rgba(0, 255, 180, 0.3));
}


/* HEADER LOGONUN BÜYÜMESİ İÇİN */
header {
    min-height: 92px !important;
}

header .container,
header .nav-container,
header .navbar-container {
    min-height: 92px !important;
    display: flex !important;
    align-items: center !important;
}


/* MOBİL */
@media (max-width: 768px) {

    header .logo img,
    header .navbar-brand img,
    header .brand img,
    header .logo-link img {
        width: 200px !important;
        height: 100px !important;
    }

    header,
    header .container,
    header .nav-container,
    header .navbar-container {
        min-height: 76px !important;
    }
}

/* =========================================================
   CYBERKALKAN HEADER — TEK LOGO KONTROLÜ
   ========================================================= */

.site-header .brand-logo {
    display: flex !important;
    align-items: center !important;

    width: 240px !important;
    height: 120px !important;

    flex: 0 0 240px !important;

    position: relative !important;

    overflow: visible !important;

    text-decoration: none !important;
}


.site-header .brand-symbol.logo-wrap {
    width: 240px !important;
    height: 120px !important;

    min-width: 240px !important;
    min-height: 120px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    position: relative !important;

    overflow: visible !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}


.site-header .brand-symbol.logo-wrap .site-logo {
    display: block !important;

    width: 230px !important;
    height: 115px !important;

    min-width: 230px !important;
    min-height: 115px !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;

    position: relative !important;
    z-index: 999 !important;

    border-radius: 30px !important;

    transform: none !important;

    filter:
        drop-shadow(0 0 8px rgba(57,255,136,.65))
        drop-shadow(0 0 20px rgba(0,229,255,.20));
}


/* Logo hover */
.site-header .brand-logo:hover .site-logo {
    transform: scale(1.05) !important;
}


/* Eski efektleri kapat */
.site-header .brand-symbol.logo-wrap::before,
.site-header .brand-symbol.logo-wrap::after,
.site-header .brand-logo::before,
.site-header .brand-logo::after {
    display: none !important;
}


/* Header'ın logoya yer açması */
.site-header {
    min-height: 125px !important;
}

.site-header .header-container {
    min-height: 125px !important;

    display: flex !important;
    align-items: center !important;

    overflow: visible !important;
}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 768px) {

    .site-header .brand-logo {
        width: 150px !important;
        height: 80px !important;

        flex-basis: 150px !important;
    }

    .site-header .brand-symbol.logo-wrap {
        width: 150px !important;
        height: 80px !important;

        min-width: 150px !important;
        min-height: 80px !important;
    }

    .site-header .brand-symbol.logo-wrap .site-logo {
        width: 145px !important;
        height: 75px !important;

        min-width: 145px !important;
        min-height: 75px !important;
    }

    .site-header,
    .site-header .header-container {
        min-height: 90px !important;
    }
}

/* =========================================================
   CYBERKALKAN HEADER - COMPACT CYBER LOGO
   ========================================================= */

/* HEADER'I KÜÇÜLT */
.site-header .header-container {
    min-height: 78px !important;
    height: 78px !important;
}


/* =========================================================
   LOGO LINK ALANI
   ========================================================= */

.site-header .header-brand-logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 76px !important;
    height: 76px !important;

    min-width: 76px !important;
    max-width: 76px !important;

    flex: 0 0 76px !important;

    position: relative !important;

    padding: 0 !important;
    margin: 0 !important;

    text-decoration: none !important;
}


/* =========================================================
   CYBER HALKA
   ========================================================= */

.site-header .header-logo-wrap {
    position: relative !important;

    width: 70px !important;
    height: 70px !important;

    min-width: 70px !important;
    min-height: 70px !important;

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

    border-radius: 50% !important;

    background: rgba(0, 10, 8, 0.85) !important;

    overflow: visible !important;

    border: 2px solid rgba(0, 255, 120, 0.45) !important;

    box-shadow:
        0 0 8px rgba(0, 255, 120, 0.25),
        0 0 20px rgba(0, 255, 120, 0.12),
        inset 0 0 15px rgba(0, 255, 120, 0.08) !important;
}


/* DÖNEN NEON HALKA */

.site-header .header-logo-wrap::before {
    content: "" !important;

    position: absolute !important;

    inset: -6px !important;

    border-radius: 50% !important;

    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            transparent 20deg,
            #00ff88 30deg,
            #00ff88 55deg,
            transparent 65deg,
            transparent 105deg,
            #00d9ff 120deg,
            #00d9ff 145deg,
            transparent 155deg,
            transparent 215deg,
            #00ff88 230deg,
            #00ff88 255deg,
            transparent 265deg,
            transparent 320deg,
            #00d9ff 335deg,
            transparent 350deg
        ) !important;

    -webkit-mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 3px),
            #000 calc(100% - 2px)
        ) !important;

    mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 3px),
            #000 calc(100% - 2px)
        ) !important;

    animation: cyberHeaderRing 8s linear infinite !important;

    pointer-events: none !important;

    z-index: 0 !important;
}


/* İÇ HALKA */

.site-header .header-logo-wrap::after {
    content: "" !important;

    position: absolute !important;

    inset: 4px !important;

    border-radius: 50% !important;

    border: 1px solid rgba(0, 255, 140, 0.28) !important;

    box-shadow:
        inset 0 0 8px rgba(0, 255, 140, 0.12),
        0 0 8px rgba(0, 255, 140, 0.08) !important;

    pointer-events: none !important;

    z-index: 2 !important;
}


/* =========================================================
   ASIL LOGO
   ========================================================= */

.site-header .header-site-logo {
    position: relative !important;

    z-index: 1 !important;

    width: 58px !important;
    height: 58px !important;

    min-width: 58px !important;
    min-height: 58px !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;

    border-radius: 50% !important;

    box-shadow:
        0 0 10px rgba(0, 255, 100, 0.25),
        0 0 22px rgba(0, 255, 100, 0.10) !important;

    transition:
        transform 0.35s ease,
        filter 0.35s ease,
        box-shadow 0.35s ease !important;

    animation: cyberHeaderLogoFloat 4s ease-in-out infinite !important;
}


/* LOGO HOVER */

.site-header .header-brand-logo:hover .header-site-logo {
    transform: scale(1.07) !important;

    filter:
        brightness(1.15)
        saturate(1.2) !important;

    box-shadow:
        0 0 14px rgba(0, 255, 100, 0.45),
        0 0 30px rgba(0, 220, 255, 0.18) !important;
}


/* =========================================================
   MENÜYÜ KÜÇÜLT
   ========================================================= */

.site-header .main-navigation {
    gap: 24px !important;
}

.site-header .main-navigation a {
    font-size: 12px !important;
    font-weight: 600 !important;

    padding: 6px 0 !important;

    letter-spacing: 0.1px !important;
}


/* TEKLİF AL BUTONU DA KÜÇÜLSÜN */

.site-header .header-cta {
    padding: 10px 16px !important;

    font-size: 12px !important;

    min-height: 40px !important;

    white-space: nowrap !important;
}


/* =========================================================
   ANİMASYONLAR
   ========================================================= */

@keyframes cyberHeaderRing {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes cyberHeaderLogoFloat {

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

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

}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 768px) {

    .site-header .header-container {
        min-height: 68px !important;
        height: 68px !important;
    }

    .site-header .header-brand-logo {
        width: 62px !important;
        height: 62px !important;

        min-width: 62px !important;
        max-width: 62px !important;

        flex-basis: 62px !important;
    }

    .site-header .header-logo-wrap {
        width: 58px !important;
        height: 58px !important;
    }

    .site-header .header-site-logo {
        width: 48px !important;
        height: 48px !important;
    }

}

/* =========================================================
   CYBERKALKAN HEADER - COMPACT MODE
   ========================================================= */

/* HEADER'IN KENDİSİNİ KÜÇÜLT */
.site-header {
    height: 70px !important;
    min-height: 70px !important;
    padding: 0 !important;
}

/* HEADER İÇERİĞİ */
.site-header .header-container {
    height: 70px !important;
    min-height: 70px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* =========================================================
   LOGOYU BÜYÜT
   ========================================================= */

.site-header .header-brand-logo {
    width: 88px !important;
    height: 88px !important;

    min-width: 88px !important;
    max-width: 88px !important;

    flex: 0 0 88px !important;

    /* Header'ı büyütmesin */
    align-self: center !important;
}

.site-header .header-logo-wrap {
    width: 82px !important;
    height: 82px !important;

    min-width: 82px !important;
    min-height: 82px !important;
}

.site-header .header-site-logo {
    width: 68px !important;
    height: 68px !important;
}


/* =========================================================
   MENÜYÜ DİKEY OLARAK ORTALA
   ========================================================= */

.site-header .main-navigation {
    height: 70px !important;

    display: flex !important;
    align-items: center !important;

    gap: 24px !important;
}


/* Menü linkleri */
.site-header .main-navigation a {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}


/* =========================================================
   TEKLİF AL BUTONU
   ========================================================= */

.site-header .header-cta {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 9px 15px !important;

    min-height: 38px !important;
}


/* =========================================================
   HEADER ALT BOŞLUĞUNU / ÇİZGİYİ KOMPAKT TUT
   ========================================================= */

.site-header::after {
    height: 1px !important;
}


/* =========================================================
   LOGO HALKASI
   ========================================================= */

.site-header .header-logo-wrap::before {
    inset: -5px !important;
}

.site-header .header-logo-wrap::after {
    inset: 4px !important;
}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 768px) {

    .site-header {
        height: 64px !important;
        min-height: 64px !important;
    }

    .site-header .header-container {
        height: 64px !important;
        min-height: 64px !important;
    }

    .site-header .header-brand-logo {
        width: 68px !important;
        height: 68px !important;

        min-width: 68px !important;
        max-width: 68px !important;

        flex-basis: 68px !important;
    }

    .site-header .header-logo-wrap {
        width: 62px !important;
        height: 62px !important;
    }

    .site-header .header-site-logo {
        width: 52px !important;
        height: 52px !important;
    }
}

/* =========================================================
   CYBERKALKAN HEADER - DENGELİ BOYUT
   ========================================================= */

/* HEADER */
.site-header {
    height: 82px !important;
    min-height: 82px !important;
    padding: 0 !important;
}

/* HEADER CONTAINER */
.site-header .header-container {
    height: 82px !important;
    min-height: 82px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    display: flex !important;
    align-items: center !important;
}


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

.site-header .header-brand-logo {
    width: 94px !important;
    height: 94px !important;

    min-width: 94px !important;
    max-width: 94px !important;

    flex: 0 0 94px !important;

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

    align-self: center !important;

    margin: 0 !important;
    padding: 0 !important;

    position: relative !important;
}


/* LOGO HALKASI */

.site-header .header-logo-wrap {
    width: 88px !important;
    height: 88px !important;

    min-width: 88px !important;
    min-height: 88px !important;

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

    position: relative !important;

    margin: 0 !important;

    transform: translateY(0) !important;
}


/* ASIL LOGO */

.site-header .header-site-logo {
    width: 74px !important;
    height: 74px !important;

    min-width: 74px !important;
    min-height: 74px !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;

    object-fit: cover !important;

    position: relative !important;
    z-index: 1 !important;
}


/* =========================================================
   MENÜ
   ========================================================= */

.site-header .main-navigation {
    height: 82px !important;

    display: flex !important;
    align-items: center !important;

    gap: 28px !important;

    margin-top: 0 !important;
}


/* MENÜ YAZILARI */

.site-header .main-navigation a {
    font-size: 13px !important;

    padding-top: 5px !important;
    padding-bottom: 5px !important;

    line-height: 1.2 !important;

    font-weight: 600 !important;
}


/* =========================================================
   TEKLİF AL
   ========================================================= */

.site-header .header-cta {
    padding: 10px 17px !important;

    min-height: 40px !important;

    font-size: 13px !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* =========================================================
   ALT ÇİZGİ
   ========================================================= */

.site-header::after {
    height: 1px !important;
}


/* =========================================================
   LOGO HALKASI
   ========================================================= */

.site-header .header-logo-wrap::before {
    inset: -5px !important;
}

.site-header .header-logo-wrap::after {
    inset: 4px !important;
}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 768px) {

    .site-header {
        height: 70px !important;
        min-height: 70px !important;
    }

    .site-header .header-container {
        height: 70px !important;
        min-height: 70px !important;
    }

    .site-header .header-brand-logo {
        width: 76px !important;
        height: 76px !important;

        min-width: 76px !important;
        max-width: 76px !important;

        flex-basis: 76px !important;
    }

    .site-header .header-logo-wrap {
        width: 70px !important;
        height: 70px !important;
    }

    .site-header .header-site-logo {
        width: 58px !important;
        height: 58px !important;
    }

}

/* =========================================================
   CYBERKALKAN HEADER - SON DENGE AYARI (GÜNCELLENDİ)
   ========================================================= */

/* HEADER */
.site-header {
    height: 100px !important;
    min-height: 100px !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* HEADER CONTAINER */
.site-header .header-container {
    height: 100px !important;
    min-height: 100px !important;

    display: flex !important;
    align-items: center !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    overflow: visible !important;
}


/* =========================================================
   LOGO - BÜYÜTÜLDÜ VE ALTA ALINDI
   ========================================================= */

.site-header .header-brand-logo {
    width: 104px !important;
    height: 104px !important;

    min-width: 104px !important;
    max-width: 104px !important;

    flex: 0 0 104px !important;

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

    position: relative !important;

    margin: 0 !important;
    padding: 0 !important;

    align-self: center !important;

    transform: translateY(4px) !important; /* Üst kısımdan kurtarıp aşağı indirdik */
}


/* LOGO HALKASI */

.site-header .header-logo-wrap {
    width: 98px !important; /* 86px'den 98px'e büyütülüp rahatlatıldı */
    height: 98px !important;

    min-width: 98px !important;
    min-height: 98px !important;

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

    position: relative !important;

    margin: 0 !important;

    transform: translateY(0) !important;
}


/* LOGONUN KENDİSİ */

.site-header .header-site-logo {
    width: 82px !important; /* 72px'den 82px'e büyütüldü */
    height: 82px !important;

    min-width: 82px !important;
    min-height: 82px !important;

    max-width: none !important;
    max-height: none !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;

    position: relative !important;
    z-index: 1 !important;

    transform: translateY(0) !important;
}


/* =========================================================
   MENÜ - RAHATLATILDI VE AŞAĞI ALINDI
   ========================================================= */

.site-header .main-navigation {
    height: 100px !important;

    display: flex !important;
    align-items: center !important;

    gap: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateY(5px) !important; /* Menüyü de logo gibi aşağı çektik */
}


/* MENÜ YAZILARI - KÜÇÜLTÜLDÜ */

.site-header .main-navigation a {
    font-size: 13px !important; /* 15px'den 13px'e küçültüldü */

    line-height: 1.2 !important;

    padding: 6px 0 !important;

    font-weight: 600 !important;

    white-space: nowrap !important;
}


/* =========================================================
   TEKLİF AL
   ========================================================= */

.site-header .header-cta {
    padding: 11px 18px !important;

    min-height: 42px !important;

    font-size: 13px !important;

    margin: 0 !important;

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

    transform: translateY(5px) !important; /* Menüyle aynı hizada olması için aşağı aldık */
}


/* =========================================================
   LOGO HALKALARINI LOGOYA GÖRE AYARLA
   ========================================================= */

.site-header .header-logo-wrap::before {
    inset: -5px !important;
}

.site-header .header-logo-wrap::after {
    inset: 4px !important;
}


/* =========================================================
   ALT ÇİZGİ
   ========================================================= */

.site-header::after {
    height: 1px !important;
}


/* =========================================================
   MOBİL / RESPONSIVE (DENGELENDİ)
   ========================================================= */

@media (max-width: 768px) {

    .site-header {
        height: 86px !important;
        min-height: 86px !important;
    }

    .site-header .header-container {
        height: 86px !important;
        min-height: 86px !important;
    }

    .site-header .header-brand-logo {
        width: 82px !important;
        height: 82px !important;

        min-width: 82px !important;
        max-width: 82px !important;

        flex-basis: 82px !important;
        transform: translateY(4px) !important;
    }

    .site-header .header-logo-wrap {
        width: 78px !important;
        height: 78px !important;

        min-width: 78px !important;
        min-height: 78px !important;
    }

    .site-header .header-site-logo {
        width: 66px !important;
        height: 66px !important;

        min-width: 66px !important;
        min-height: 66px !important;
    }

    .site-header .main-navigation {
        height: 72px !important;
        gap: 34px !important;
    }

}


/* =========================================================
   CYBERKALKAN HEADER - SON DENGE AYARI (GÜNCELLENDİ)
   ========================================================= */

/* HEADER */
.site-header {
    height: 86px !important;
    min-height: 86px !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* HEADER CONTAINER */
.site-header .header-container {
    height: 86px !important;
    min-height: 86px !important;

    display: flex !important;
    align-items: center !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    overflow: visible !important;
}


/* =========================================================
   LOGO - MENÜYE SIĞACAK ŞEKİLDE KÜÇÜLTÜLDÜ
   ========================================================= */

.site-header .header-brand-logo {
    width: auto !important;
    height: 86px !important;
    min-width: unset !important;
    max-width: unset !important;
    flex: 0 0 auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;

    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    transform: none !important;
}


/* LOGO HALKASI */

.site-header .header-logo-wrap {
    width: 56px !important; /* Halka boyutu 56px'e düşürüldü */
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;

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

    position: relative !important;
    margin: 0 !important;
    transform: none !important;
}


/* LOGONUN KENDİSİ */

.site-header .header-site-logo {
    width: 46px !important; /* Görsel boyutu 46px'e düşürüldü */
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;

    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;

    position: relative !important;
    z-index: 1 !important;
    border-radius: 50% !important;
    transform: none !important;
}


/* =========================================================
   MENÜ - BİR TIK YUKARI ALINDI
   ========================================================= */

.site-header .main-navigation {
    height: 86px !important;

    display: flex !important;
    align-items: center !important;

    gap: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateY(-2px) !important; /* Yazılar bir tık yukarı alındı */
}


/* MENÜ YAZILARI */

.site-header .main-navigation a {
    font-size: 13px !important;

    line-height: 1.2 !important;

    padding: 6px 0 !important;

    font-weight: 600 !important;

    white-space: nowrap !important;
}


/* =========================================================
   TEKLİF AL
   ========================================================= */

.site-header .header-cta {
    padding: 11px 18px !important;

    min-height: 42px !important;

    font-size: 13px !important;

    margin: 0 !important;

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

    transform: translateY(-2px) !important; /* Menüyle dengelendi */
}


/* =========================================================
   LOGO HALKALARI
   ========================================================= */

.site-header .header-logo-wrap::before {
    inset: -4px !important;
}

.site-header .header-logo-wrap::after {
    inset: 3px !important;
}


/* =========================================================
   ALT ÇİZGİ
   ========================================================= */

.site-header::after {
    height: 1px !important;
}


/* =========================================================
   MOBİL / RESPONSIVE (DENGELENDİ)
   ========================================================= */

@media (max-width: 768px) {

    .site-header {
        height: 70px !important;
        min-height: 70px !important;
    }

    .site-header .header-container {
        height: 70px !important;
        min-height: 70px !important;
    }

    .site-header .header-brand-logo {
        width: auto !important;
        height: 70px !important;
        gap: 8px !important;
    }

    .site-header .header-logo-wrap {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
    }

    .site-header .header-site-logo {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    .site-header .brand-name {
        font-size: 13px !important;
        letter-spacing: .08em;
    }

    .site-header .header-logo-wrap::before {
        inset: -3px !important;
    }

    .site-header .header-logo-wrap::after {
        inset: 2px !important;
    }
}