:root {
    --navy: #071521;
    --navy2: #0b2130;
    --navy3: #102d3d;
    --blue: #35a7ff;
    --blue2: #73c5ff;
    --gold: #c79a2b;
    --ink: #0b1724;
    --text: #46556a;
    --muted: #7f8ca0;
    --line: #dfe6ee;
    --bg: #f5f8fb;
    --white: #fff;
    --shell: min(1320px,calc(100% - 48px));
    --r: 26px;
    --shadow: 0 24px 70px rgba(7,21,33,.10)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
}

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

a {
    color: inherit
}

button, input, select, textarea {
    font: inherit
}

.kb-shell, .page-shell, .footer-container, .detail-container {
    width: var(--shell);
    margin-inline: auto
}

/* HEADER */
.site-header {
    position: fixed;
    top: 16px;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: .3s ease
}

.navbar-shell {
    width: min(1380px,calc(100% - 36px));
    height: 76px;
    margin: auto;
    padding: 0 14px 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 22px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(22px);
    box-shadow: 0 16px 45px rgba(7,21,33,.13);
    transition: .3s ease
}

.site-header.scrolled .navbar-shell {
    height: 68px;
    box-shadow: 0 12px 34px rgba(7,21,33,.16)
}

.custom-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    flex-shrink: 0;
    position: relative
}

.brand-symbol {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
    transition: .4s cubic-bezier(.2,.8,.2,1)
}

.brand-wordmark {
    width: 145px !important;
    height: 34px !important;
    object-fit: contain !important;
    object-position: left center;
    transition: .4s cubic-bezier(.2,.8,.2,1)
}

.custom-brand:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 0;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg,transparent,var(--gold),#efd16a,var(--gold),transparent);
    opacity: 0;
    transition: .35s
}

.custom-brand:hover .brand-symbol {
    transform: translateY(-2px) rotate(-3deg) scale(1.05);
    filter: drop-shadow(0 6px 8px rgba(199,154,43,.22))
}

.custom-brand:hover .brand-wordmark {
    transform: translateX(2px)
}

.custom-brand:hover:after {
    width: 100%;
    opacity: 1
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 30px
}

    .desktop-nav a {
        position: relative;
        display: flex;
        align-items: center;
        height: 42px;
        color: #465267;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        transition: .25s
    }

        .desktop-nav a:after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 2px;
            width: 0;
            height: 2px;
            border-radius: 99px;
            background: linear-gradient(90deg,#b8881d,#e5c354,#b8881d);
            transform: translateX(-50%);
            transition: .25s
        }

        .desktop-nav a:hover, .desktop-nav a.active {
            color: var(--navy)
        }

            .desktop-nav a:hover:after, .desktop-nav a.active:after {
                width: 100%
            }

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 12px
}

.nav-phone {
    display: flex;
    flex-direction: column;
    padding-right: 8px;
    text-decoration: none;
    line-height: 1.1
}

    .nav-phone span {
        font-size: 8px;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: #9aa5b4;
        font-weight: 800;
        margin-bottom: 5px
    }

    .nav-phone strong {
        font-size: 11px;
        color: var(--navy);
        font-weight: 800
    }

.nav-cta {
    height: 46px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 18px;
    border-radius: 13px;
    background: var(--navy);
    color: #fff !important;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    transition: .25s
}

    .nav-cta:hover {
        background: var(--blue);
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(53,167,255,.25)
    }

.mobile-menu-button {
    display: none;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    background: var(--navy);
    padding: 10px
}

    .mobile-menu-button span {
        display: block;
        height: 2px;
        margin: 4px 0;
        border-radius: 99px;
        background: #fff
    }

.mobile-menu {
    display: none
}
/* =========================================================
   TECHNOLOGY NAVBAR
========================================================= */

.site-header {
    position: fixed;
    top: 14px;
    right: 0;
    left: 0;
    z-index: 9999;
    background: transparent;
}

.navbar-shell {
    position: relative;
    display: flex;
    width: min(1380px, calc(100% - 36px));
    min-height: 72px;
    margin: 0 auto;
    padding: 0 14px 0 18px;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    border: 1px solid rgba(118, 185, 255, .18);
    border-radius: 20px;
    background: linear-gradient( 135deg, rgba(8, 19, 34, .92), rgba(12, 30, 51, .88) );
    box-shadow: 0 20px 60px rgba(3, 10, 20, .28), inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(22px);
}


    /* Hafif teknoloji grid hissi */

    .navbar-shell::before {
        position: absolute;
        inset: 0;
        background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px );
        background-size: 26px 26px;
        content: "";
        pointer-events: none;
    }


    /* Üstten hafif ışık */

    .navbar-shell::after {
        position: absolute;
        top: -70px;
        left: 20%;
        width: 400px;
        height: 130px;
        border-radius: 50%;
        background: rgba(35, 142, 255, .16);
        filter: blur(40px);
        content: "";
        pointer-events: none;
    }


    /* İçerik üstte */

    .navbar-shell > * {
        position: relative;
        z-index: 2;
    }


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

.custom-brand,
.brand {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    text-decoration: none !important;
}

.brand-symbol {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    filter: drop-shadow( 0 0 10px rgba(215, 174, 68, .18) );
    transition: transform .35s ease, filter .35s ease;
}

.brand-wordmark,
.brand-name {
    width: 145px !important;
    height: 32px !important;
    object-fit: contain !important;
    transition: transform .35s ease, filter .35s ease;
}

@media (hover: hover) and (pointer: fine) {

    .brand:hover .brand-symbol,
    .custom-brand:hover .brand-symbol {
        transform: rotate(-4deg) translateY(-2px) scale(1.06);
        filter: drop-shadow( 0 0 12px rgba(215, 174, 68, .28) );
    }

    .brand:hover .brand-wordmark,
    .brand:hover .brand-name,
    .custom-brand:hover .brand-wordmark {
        transform: translateX(3px);
    }
}


/* =========================================================
   DESKTOP NAV
========================================================= */

.desktop-nav {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .desktop-nav a {
        position: relative;
        display: inline-flex;
        min-height: 42px;
        padding: 0 14px;
        align-items: center;
        border-radius: 12px;
        color: rgba(224, 235, 247, .72);
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        transition: color .25s ease, background .25s ease, transform .25s ease;
    }


        /* Nokta efekti */

        .desktop-nav a::before {
            position: absolute;
            top: 50%;
            left: 7px;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #3fa2ff;
            content: "";
            opacity: 0;
            transform: translateY(-50%) scale(.5);
            transition: opacity .25s ease, transform .25s ease;
        }


@media (hover: hover) and (pointer: fine) {

    .desktop-nav a:hover {
        color: #ffffff;
        background: rgba(46, 137, 224, .10);
        transform: translateY(-1px);
    }

        .desktop-nav a:hover::before {
            opacity: 1;
            transform: translateY(-50%) scale(1);
        }
}


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

.nav-phone {
    display: flex;
    padding: 0 14px;
    flex-direction: column;
    border-left: 1px solid rgba(255,255,255,.07);
    text-decoration: none;
}

    .nav-phone span {
        margin-bottom: 4px;
        color: rgba(147, 167, 188, .75);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 1.3px;
    }

    .nav-phone strong {
        color: #ffffff;
        font-size: 11px;
        font-weight: 800;
    }


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

.nav-cta {
    position: relative;
    display: inline-flex;
    min-height: 46px;
    padding: 0 18px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(91, 176, 255, .28);
    border-radius: 13px;
    background: linear-gradient( 135deg, #0d6fd8, #1598ff );
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(12, 114, 219, .25);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .nav-cta::before {
        position: absolute;
        top: -40%;
        left: -30%;
        width: 50px;
        height: 160%;
        background: rgba(255,255,255,.18);
        content: "";
        transform: rotate(20deg) translateX(-80px);
        transition: transform .5s ease;
    }

    .nav-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 34px rgba(13, 132, 236, .34);
    }

        .nav-cta:hover::before {
            transform: rotate(20deg) translateX(240px);
        }


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

.mobile-menu-button {
    display: none;
    width: 42px;
    height: 42px;
    padding: 9px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    background: rgba(255,255,255,.05);
}

    .mobile-menu-button span {
        display: block;
        width: 100%;
        height: 2px;
        margin: 4px 0;
        border-radius: 999px;
        background: #ffffff;
    }


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

@media (max-width: 1100px) {

    .desktop-nav,
    .nav-phone {
        display: none;
    }

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

@media (max-width: 700px) {

    .site-header {
        top: 8px;
    }

    .navbar-shell {
        width: calc(100% - 16px);
        min-height: 62px;
        padding: 0 10px 0 13px;
        border-radius: 16px;
    }

    .brand-symbol {
        width: 34px !important;
        height: 34px !important;
    }

    .brand-wordmark,
    .brand-name {
        width: 110px !important;
        height: 27px !important;
    }

    .nav-cta {
        display: none;
    }
}
/* HOME HERO */
.kb-hero {
    position: relative;
    overflow: hidden;
    padding: 165px 0 0;
    background: linear-gradient(135deg,#06131f 0%,#071b29 55%,#0a2b3b 100%);
    color: #fff
}

.kb-hero-grid {
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(to bottom,#000 40%,transparent 95%)
}

.kb-hero-glow {
    position: absolute;
    width: 760px;
    height: 760px;
    right: -220px;
    top: -200px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(53,167,255,.23),transparent 65%);
    filter: blur(20px)
}

.kb-hero-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.03fr .97fr;
    gap: 70px;
    align-items: center;
    min-height: 620px
}

.kb-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--blue2);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 2.3px
}

    .kb-eyebrow i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--blue);
        box-shadow: 0 0 0 6px rgba(53,167,255,.10)
    }

.kb-hero-copy h1 {
    margin: 24px 0 0;
    max-width: 760px;
    font-size: clamp(66px,7vw,108px);
    line-height: .88;
    letter-spacing: -6px;
    font-weight: 720;
    color: #fff
}

    .kb-hero-copy h1 em, .kb-section-head h2 em, .kb-proof-copy h2 em, .kb-tech-copy h2 em, .kb-final-cta h2 em {
        display: block;
        color: var(--blue2);
        font-style: normal;
        font-weight: inherit
    }

.kb-hero-copy > p {
    max-width: 620px;
    margin: 30px 0 0;
    color: #9aaabd;
    font-size: 17px;
    line-height: 1.78
}

.kb-hero-actions {
    display: flex;
    gap: 12px;
    margin-top: 34px
}

.kb-btn {
    min-height: 56px;
    padding: 0 23px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    transition: .25s
}

.kb-btn-primary {
    background: #fff;
    color: var(--navy)
}

    .kb-btn-primary:hover {
        background: var(--blue);
        color: #fff;
        transform: translateY(-3px)
    }

.kb-btn-ghost {
    border: 1px solid rgba(255,255,255,.17);
    color: #fff
}

    .kb-btn-ghost:hover {
        border-color: rgba(255,255,255,.38);
        background: rgba(255,255,255,.05);
        color: #fff;
        transform: translateY(-3px)
    }

.kb-btn-ghost-light {
    border: 1px solid rgba(255,255,255,.2);
    color: #fff
}

    .kb-btn-ghost-light:hover {
        background: #fff;
        color: var(--navy)
    }

.kb-hero-trust {
    display: flex;
    gap: 36px;
    margin-top: 48px;
    padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,.09);
    max-width: 600px
}

    .kb-hero-trust div {
        display: flex;
        flex-direction: column
    }

    .kb-hero-trust strong {
        font-size: 22px;
        color: #fff;
        letter-spacing: -1px
    }

    .kb-hero-trust span {
        font-size: 10px;
        color: #73879c;
        margin-top: 4px
    }

.kb-hero-stage {
    position: relative;
    min-height: 540px;
    display: flex;
    align-items: center;
    justify-content: center
}

.kb-stage-orbit {
    position: absolute;
    border: 1px solid rgba(115,197,255,.13);
    border-radius: 50%
}

.orbit-one {
    width: 520px;
    height: 520px
}

.orbit-two {
    width: 370px;
    height: 370px
}

.kb-product-platform {
    position: relative;
    width: 560px;
    z-index: 3
}

.kb-product-halo {
    position: absolute;
    inset: 5% 12%;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(78,182,255,.18),transparent 68%);
    filter: blur(16px)
}

.kb-hero-product {
    position: relative;
    z-index: 2;
    width: 100%;
    max-height: 330px;
    object-fit: contain;
    filter: drop-shadow(0 40px 45px rgba(0,0,0,.36));
    transform: perspective(900px) rotateY(-8deg) rotateX(2deg)
}

.kb-stage-card {
    position: absolute;
    z-index: 6;
    min-width: 140px;
    padding: 15px 17px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(10,29,45,.80);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 50px rgba(0,0,0,.22);
    display: flex;
    flex-direction: column
}

    .kb-stage-card span, .kb-stage-caption span {
        font-size: 8px;
        color: #72879b;
        font-weight: 850;
        letter-spacing: 1.6px
    }

    .kb-stage-card strong {
        font-size: 19px;
        color: #fff;
        margin-top: 5px
    }

.kb-stage-card-top {
    top: 65px;
    right: -4px
}

.kb-stage-card-bottom {
    bottom: 120px;
    left: -12px
}

.kb-stage-caption {
    position: absolute;
    right: 0;
    bottom: 20px;
    z-index: 7;
    width: 285px;
    padding: 18px 19px;
    border-radius: 18px;
    background: #fff;
    color: var(--navy);
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
    display: grid;
    gap: 5px
}

    .kb-stage-caption strong {
        font-size: 14px
    }

    .kb-stage-caption a {
        font-size: 10px;
        color: var(--blue);
        font-weight: 800;
        text-decoration: none
    }

.kb-hero-strip {
    position: relative;
    z-index: 3;
    min-height: 78px;
    margin-top: 20px;
    border-top: 1px solid rgba(255,255,255,.09);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px
}

    .kb-hero-strip span {
        font-size: 9px;
        color: #8698ab;
        font-weight: 800;
        letter-spacing: 1.7px
    }

    .kb-hero-strip i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--blue)
    }

/* HOME SECTIONS */
.kb-solutions, .kb-process {
    padding: 120px 0;
    background: #f6f8fb
}

.kb-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 54px
}

.kb-section-kicker {
    display: block;
    color: var(--blue);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2.3px;
    margin-bottom: 14px
}

.kb-section-head h2, .kb-proof-copy h2, .kb-tech-copy h2, .kb-final-cta h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(45px,5vw,70px);
    line-height: 1;
    letter-spacing: -3.6px;
    font-weight: 720
}

.kb-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    padding-bottom: 7px;
    border-bottom: 1px solid #cbd4de;
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: .25s
}

    .kb-inline-link:hover {
        gap: 28px;
        color: var(--blue)
    }

.kb-solution-grid {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    grid-auto-rows: 340px;
    gap: 18px
}

.kb-solution-card {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 12px 36px rgba(7,21,33,.05);
    transition: .35s
}

.kb-solution-main {
    grid-row: span 2
}

.kb-solution-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: rgba(53,167,255,.25)
}

.kb-solution-card img {
    position: absolute;
    right: 6%;
    top: 14%;
    width: 56%;
    height: 58%;
    object-fit: contain;
    transition: .45s
}

.kb-solution-main img {
    width: 70%;
    height: 54%;
    right: 0;
    top: 20%
}

.kb-solution-card:hover img {
    transform: scale(1.04) translateY(-3px)
}

.kb-solution-top, .kb-solution-bottom {
    position: relative;
    z-index: 2
}

.kb-solution-top {
    display: flex;
    flex-direction: column;
    gap: 8px
}

    .kb-solution-top span {
        font-size: 8px;
        color: #8e9aaa;
        font-weight: 850;
        letter-spacing: 1.5px
    }

    .kb-solution-top b {
        font-size: 28px;
        letter-spacing: -1.2px
    }

.kb-solution-bottom {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 22px
}

    .kb-solution-bottom p {
        max-width: 360px;
        margin: 0;
        color: #718093;
        font-size: 12px;
        line-height: 1.7
    }

    .kb-solution-bottom strong {
        font-size: 10px;
        color: var(--blue);
        white-space: nowrap
    }

.kb-solution-dark {
    background: linear-gradient(145deg,#081827,#0b2a3b);
    border-color: #0b2a3b;
    color: #fff
}

    .kb-solution-dark .kb-solution-top b {
        color: #fff
    }

    .kb-solution-dark .kb-solution-bottom p {
        color: #91a1b4
    }

    .kb-solution-dark img {
        filter: drop-shadow(0 20px 25px rgba(0,0,0,.30))
    }

.kb-proof {
    padding: 120px 0;
    background: #fff
}

.kb-proof-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 90px;
    align-items: start
}

.kb-proof-copy {
    position: sticky;
    top: 120px
}

    .kb-proof-copy p {
        max-width: 560px;
        margin: 25px 0 30px;
        color: #6f7d90;
        font-size: 14px;
        line-height: 1.85
    }

.kb-proof-list {
    border-top: 1px solid var(--line)
}

    .kb-proof-list article {
        display: grid;
        grid-template-columns: 70px 1fr;
        gap: 20px;
        padding: 28px 0;
        border-bottom: 1px solid var(--line)
    }

        .kb-proof-list article > span {
            font-size: 9px;
            color: var(--blue);
            font-weight: 900
        }

    .kb-proof-list h3 {
        margin: 0 0 8px;
        color: var(--ink);
        font-size: 24px;
        letter-spacing: -1px
    }

    .kb-proof-list p {
        margin: 0;
        color: #788597;
        font-size: 12px;
        line-height: 1.7
    }

.kb-featured {
    padding: 120px 0;
    background: linear-gradient(145deg,#071521,#0b2939);
    color: #fff
}

.kb-section-head-light h2 {
    color: #fff
}

.kb-section-head-light .kb-inline-link {
    color: #fff;
    border-color: rgba(255,255,255,.2)
}

.kb-featured-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.kb-feature-card {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 26px;
    background: rgba(255,255,255,.045);
    text-decoration: none;
    color: #fff;
    transition: .35s
}

    .kb-feature-card:hover {
        transform: translateY(-6px);
        background: rgba(255,255,255,.07);
        color: #fff
    }

.kb-feature-image {
    position: relative;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 40%,rgba(255,255,255,.12),transparent 58%)
}

    .kb-feature-image img {
        width: 82%;
        height: 220px;
        object-fit: contain;
        filter: drop-shadow(0 25px 30px rgba(0,0,0,.30));
        transition: .4s
    }

.kb-feature-card:hover img {
    transform: scale(1.04)
}

.kb-feature-image span {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 7px 10px;
    border-radius: 99px;
    background: #fff;
    color: var(--navy);
    font-size: 8px;
    font-weight: 900
}

.kb-feature-meta {
    padding: 25px
}

    .kb-feature-meta small {
        color: var(--blue2);
        font-size: 8px;
        font-weight: 900;
        letter-spacing: 1.8px
    }

    .kb-feature-meta h3 {
        margin: 9px 0 11px;
        color: #fff;
        font-size: 24px;
        line-height: 1.1;
        letter-spacing: -1px
    }

    .kb-feature-meta p {
        margin: 0 0 20px;
        color: #8fa0b3;
        font-size: 12px;
        line-height: 1.7
    }

    .kb-feature-meta b {
        font-size: 10px;
        color: var(--blue2)
    }

.kb-process-track {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line)
}

    .kb-process-track article {
        min-height: 250px;
        padding: 28px;
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        background: #fff;
        transition: .3s
    }

        .kb-process-track article:hover {
            background: #fbfdff;
            transform: translateY(-3px)
        }

    .kb-process-track span {
        font-size: 9px;
        color: var(--blue);
        font-weight: 900
    }

    .kb-process-track h3 {
        margin: 78px 0 12px;
        color: var(--ink);
        font-size: 21px;
        letter-spacing: -.7px
    }

    .kb-process-track p {
        margin: 0;
        color: #7d8998;
        font-size: 12px;
        line-height: 1.7
    }

.kb-tech {
    padding: 40px 0 120px;
    background: #f6f8fb
}

.kb-tech-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
    border-radius: 34px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 20px 60px rgba(7,21,33,.07)
}

.kb-tech-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    background: linear-gradient(145deg,#eef4f8,#fff)
}

    .kb-tech-visual img {
        width: 90%;
        max-height: 390px;
        object-fit: contain
    }

.kb-tech-copy {
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

    .kb-tech-copy > p {
        max-width: 570px;
        color: #718094;
        font-size: 14px;
        line-height: 1.8
    }

.kb-tech-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 28px
}

    .kb-tech-points span {
        padding: 8px 11px;
        border: 1px solid var(--line);
        border-radius: 99px;
        color: #536276;
        font-size: 10px;
        font-weight: 700
    }

.kb-tech-copy .kb-btn {
    width: fit-content;
    background: var(--navy);
    color: #fff
}

    .kb-tech-copy .kb-btn:hover {
        background: var(--blue)
    }

.kb-cta-section {
    padding: 0 0 120px;
    background: #f6f8fb
}

.kb-final-cta {
    padding: 68px;
    border-radius: 34px;
    background: radial-gradient(circle at 88% 20%,rgba(53,167,255,.24),transparent 34%),linear-gradient(145deg,#071521,#0b2a3a);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
    color: #fff
}

    .kb-final-cta h2 {
        color: #fff
    }

    .kb-final-cta p {
        max-width: 650px;
        color: #91a1b4;
        font-size: 13px;
        line-height: 1.75
    }

.kb-final-actions {
    display: flex;
    gap: 10px;
    flex-direction: column;
    min-width: 190px
}

    .kb-final-actions .kb-btn {
        width: 100%
    }

/* INNER PAGE HERO */
.page-hero, .products-hero {
    position: relative;
    overflow: hidden;
    padding: 180px 0 95px;
    background: radial-gradient(circle at 88% 12%,rgba(53,167,255,.18),transparent 34%),linear-gradient(135deg,#06131f,#071c2a 58%,#0a2c3c);
    color: #fff
}

    .page-hero:after, .products-hero:after {
        content: "";
        position: absolute;
        width: 650px;
        height: 650px;
        right: -170px;
        top: -260px;
        border: 1px solid rgba(115,197,255,.09);
        border-radius: 50%
    }

.page-kicker, .section-eyebrow, .section-label {
    display: block;
    margin-bottom: 17px;
    color: var(--blue2);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2.2px
}

.page-hero h1, .products-hero h1 {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0;
    color: #fff;
    font-size: clamp(58px,7vw,96px);
    font-weight: 720;
    line-height: .93;
    letter-spacing: -5px
}

    .page-hero h1 span, .products-hero h1 span {
        display: block;
        color: var(--blue2)
    }

.page-hero p, .products-hero p {
    position: relative;
    z-index: 2;
    max-width: 690px;
    margin: 27px 0 0;
    color: #9aabba;
    font-size: 15px;
    line-height: 1.8
}

/* PRODUCTS */
.products-filter-section {
    background: #fff;
    border-bottom: 1px solid var(--line)
}

.products-filter-bar {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px
}

.products-categories {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.product-filter {
    min-height: 41px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: #fff;
    color: #667486;
    text-decoration: none;
    font-size: 10px;
    font-weight: 800
}

    .product-filter:hover {
        border-color: var(--blue);
        color: var(--blue)
    }

    .product-filter.active {
        background: var(--navy);
        border-color: var(--navy);
        color: #fff
    }

.products-search {
    display: flex;
    min-width: 330px;
    height: 45px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: #f7f9fb
}

    .products-search input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        padding: 0 14px;
        font-size: 11px
    }

    .products-search button {
        min-width: 68px;
        border: 0;
        border-radius: 99px;
        background: var(--navy);
        color: #fff;
        font-size: 10px;
        font-weight: 800
    }

.products-page {
    padding: 80px 0 110px;
    background: #f5f8fb
}

.products-result-head {
    margin-bottom: 30px
}

    .products-result-head span {
        display: block;
        color: var(--blue);
        font-size: 8px;
        font-weight: 900;
        letter-spacing: 1.8px;
        margin-bottom: 5px
    }

    .products-result-head h2 {
        margin: 0;
        color: var(--ink);
        font-size: 27px
    }

.products-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px
}

.product-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(7,21,33,.05);
    transition: .35s
}

    .product-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow);
        border-color: rgba(53,167,255,.25)
    }

.product-card-image {
    position: relative;
    height: 350px;
    padding: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle,#fff 0%,#edf3f7 75%);
    text-decoration: none
}

    .product-card-image img {
        width: 84%;
        height: 240px;
        object-fit: contain;
        transition: .4s
    }

.product-card:hover .product-card-image img {
    transform: scale(1.04)
}

.product-category-label {
    position: absolute;
    left: 20px;
    top: 20px
}

    .product-category-label span {
        padding: 7px 11px;
        border: 1px solid rgba(7,21,33,.08);
        border-radius: 99px;
        background: rgba(255,255,255,.82);
        font-size: 8px;
        font-weight: 850;
        color: #657287
    }

.product-image-arrow {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--navy);
    color: #fff;
    transition: .25s
}

.product-card:hover .product-image-arrow {
    background: var(--blue);
    transform: rotate(8deg)
}

.product-card-content {
    padding: 27px
}

.product-model {
    display: block;
    margin-bottom: 8px;
    color: var(--blue);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.3px;
    text-transform: uppercase
}

.product-card-content h3 {
    margin: 0
}

    .product-card-content h3 a {
        color: var(--ink);
        font-size: 27px;
        font-weight: 720;
        line-height: 1.1;
        letter-spacing: -1.2px;
        text-decoration: none
    }

.product-card-content > p {
    min-height: 65px;
    margin: 14px 0 22px;
    color: #758397;
    font-size: 12px;
    line-height: 1.75
}

.product-card-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 21px
}

    .product-card-specs > div {
        padding: 14px 0
    }

        .product-card-specs > div:first-child {
            border-right: 1px solid var(--line)
        }

        .product-card-specs > div:last-child {
            padding-left: 17px
        }

    .product-card-specs span {
        display: block;
        color: #9aa5b3;
        font-size: 7px;
        font-weight: 850;
        letter-spacing: 1.4px
    }

    .product-card-specs strong {
        font-size: 10px;
        color: #3d4a5c
    }

.product-detail-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none
}

    .product-detail-link span {
        color: var(--blue);
        font-size: 16px
    }

.products-empty {
    padding: 90px 30px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: #fff
}

.products-bottom-cta, .page-cta {
    padding: 20px 0 110px;
    background: #f5f8fb
}

.products-bottom-box, .page-cta-box, .product-cta {
    padding: 62px;
    border-radius: 32px;
    background: radial-gradient(circle at 88% 18%,rgba(53,167,255,.24),transparent 35%),var(--navy);
    color: #fff
}

    .products-bottom-box > div > span, .page-cta-box > span, .product-cta > span {
        display: block;
        color: var(--blue2);
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 2.1px;
        margin-bottom: 12px
    }

    .products-bottom-box h2, .page-cta-box h2, .product-cta h2 {
        max-width: 820px;
        margin: 0;
        color: #fff;
        font-size: clamp(42px,5vw,64px);
        line-height: 1;
        letter-spacing: -3px
    }

        .products-bottom-box h2 strong, .page-cta-box h2 strong {
            color: var(--blue2);
            font-weight: inherit
        }

    .products-bottom-box p, .page-cta-box p, .product-cta p {
        max-width: 650px;
        color: #93a3b6;
        font-size: 13px;
        line-height: 1.75
    }

    .products-bottom-box > a, .page-cta-box > a {
        display: inline-flex;
        margin-top: 24px;
        min-height: 52px;
        padding: 0 20px;
        align-items: center;
        border-radius: 14px;
        background: #fff;
        color: var(--navy);
        text-decoration: none;
        font-size: 11px;
        font-weight: 800
    }

/* DETAIL */
.product-detail {
    padding: 145px 0 105px;
    background: #f5f8fb
}

.back-link {
    display: inline-flex;
    margin-bottom: 28px;
    color: #758397;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none
}

.detail-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 64px;
    align-items: center
}

.detail-visual {
    position: relative;
    min-height: 530px;
    padding: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 34px;
    background: radial-gradient(circle,#fff,#edf3f7);
    box-shadow: 0 15px 45px rgba(7,21,33,.06)
}

    .detail-visual img {
        width: 80%;
        max-height: 410px;
        object-fit: contain
    }

.detail-category {
    position: absolute;
    top: 24px;
    left: 24px;
    padding: 8px 13px;
    border-radius: 99px;
    background: rgba(255,255,255,.85);
    font-size: 9px;
    font-weight: 800;
    color: #617083
}

.detail-model {
    color: var(--blue);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase
}

.detail-content h1 {
    margin: 10px 0 21px;
    color: var(--ink);
    font-size: clamp(44px,5vw,68px);
    line-height: 1;
    letter-spacing: -3px
}

.detail-description {
    color: #6f7e91;
    font-size: 14px;
    line-height: 1.8
}

.quick-specs {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 9px;
    margin-top: 28px
}

    .quick-specs div {
        padding: 15px;
        border: 1px solid var(--line);
        border-radius: 15px;
        background: #fff
    }

    .quick-specs span {
        display: block;
        color: #9aa5b4;
        font-size: 8px;
        font-weight: 850;
        text-transform: uppercase;
        margin-bottom: 5px
    }

    .quick-specs strong {
        color: var(--ink);
        font-size: 11px
    }

.detail-buttons {
    display: flex;
    gap: 10px;
    margin-top: 28px
}

.primary-detail-btn, .secondary-detail-btn {
    min-height: 51px;
    padding: 0 20px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800
}

.primary-detail-btn {
    background: var(--blue);
    color: #fff
}

.secondary-detail-btn {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink)
}

.details-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 68px
}

.feature-panel, .technical-panel {
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: #fff
}

    .feature-panel h2, .technical-panel h2 {
        margin: 10px 0 24px;
        color: var(--ink);
        font-size: 29px;
        letter-spacing: -1.3px
    }

.feature-item {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid var(--line)
}

    .feature-item > span {
        width: 27px;
        height: 27px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: rgba(53,167,255,.1);
        color: var(--blue);
        font-size: 10px;
        font-weight: 900
    }

    .feature-item p {
        margin: 0;
        color: #536176;
        font-size: 12px
    }

.technical-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line)
}

    .technical-row span {
        color: #728095;
        font-size: 12px
    }

    .technical-row strong {
        color: var(--ink);
        font-size: 12px;
        text-align: right
    }

/* SERVICES / ABOUT / CONTACT */
.services-page, .about-page, .contact-page {
    padding: 105px 0;
    background: #fff
}

.services-page-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px
}

.service-detail-card {
    min-height: 390px;
    padding: 36px;
    border: 1px solid var(--line);
    border-radius: 27px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(7,21,33,.05);
    transition: .3s
}

    .service-detail-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow)
    }

.service-detail-number {
    display: block;
    margin-bottom: 52px;
    color: var(--blue);
    font-size: 9px;
    font-weight: 900
}

.service-detail-card h2 {
    margin: 0 0 15px;
    color: var(--ink);
    font-size: 30px
}

.service-detail-card > p {
    color: #738195;
    font-size: 13px;
    line-height: 1.8
}

.service-detail-card ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    list-style: none;
    padding: 0;
    margin: 25px 0 0
}

.service-detail-card li {
    position: relative;
    padding-left: 15px;
    color: #475569;
    font-size: 11px
}

    .service-detail-card li:before {
        content: "";
        position: absolute;
        left: 0;
        top: 6px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--blue)
    }

.service-detail-dark {
    background: linear-gradient(145deg,#071521,#0b2a3b);
    border-color: #0b2a3b
}

    .service-detail-dark h2 {
        color: #fff
    }

    .service-detail-dark p, .service-detail-dark li {
        color: #94a4b7
    }

.service-process, .about-principles {
    padding: 105px 0;
    background: #f5f8fb
}

.process-heading, .principles-head {
    max-width: 820px;
    margin-bottom: 52px
}

    .process-heading > span, .principles-head > span {
        display: block;
        color: var(--blue);
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 2.1px;
        margin-bottom: 13px
    }

    .process-heading h2, .principles-head h2 {
        margin: 0;
        color: var(--ink);
        font-size: clamp(44px,5vw,68px);
        line-height: 1;
        letter-spacing: -3.4px
    }

    .process-heading strong, .principles-head strong {
        display: block;
        color: var(--blue);
        font-weight: inherit
    }

.process-grid, .principles-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line)
}

    .process-item, .principles-grid article {
        min-height: 235px;
        padding: 26px;
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        background: #fff
    }

        .process-item > span, .principles-grid article > span {
            color: var(--blue);
            font-size: 9px;
            font-weight: 900
        }

        .process-item h3, .principles-grid h3 {
            margin: 66px 0 11px;
            color: var(--ink);
            font-size: 20px
        }

        .process-item p, .principles-grid p {
            margin: 0;
            color: #7a8798;
            font-size: 12px;
            line-height: 1.7
        }

.about-page-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 80px;
    align-items: center
}

.about-page-visual {
    position: relative;
    min-height: 540px
}

.about-visual-card {
    height: 540px;
    padding: 36px;
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: radial-gradient(circle at 25% 20%,rgba(53,167,255,.27),transparent 32%),var(--navy)
}

    .about-visual-card > span {
        font-size: 170px;
        font-weight: 900;
        letter-spacing: -14px;
        color: rgba(255,255,255,.055)
    }

.about-visual-info {
    display: flex;
    flex-direction: column;
    max-width: 320px
}

    .about-visual-info small {
        color: var(--blue2);
        font-size: 8px;
        font-weight: 900;
        letter-spacing: 2px
    }

    .about-visual-info strong {
        margin-top: 8px;
        color: #fff;
        font-size: 26px;
        line-height: 1.15
    }

.about-stat-card {
    position: absolute;
    right: -28px;
    bottom: 38px;
    width: 175px;
    padding: 22px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column
}

    .about-stat-card strong {
        color: var(--blue);
        font-size: 38px
    }

    .about-stat-card span {
        color: #758397;
        font-size: 10px
    }

.about-page-content h2, .contact-info-column h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(44px,5vw,66px);
    line-height: 1;
    letter-spacing: -3.2px
}

    .about-page-content h2 span, .contact-info-column h2 span {
        display: block;
        color: var(--blue)
    }

.about-page-content > p, .contact-intro {
    color: #6f7d90;
    font-size: 14px;
    line-height: 1.85
}

.about-values {
    margin-top: 32px
}

    .about-values > div {
        display: grid;
        grid-template-columns: 40px 1fr;
        column-gap: 14px;
        padding: 18px 0;
        border-top: 1px solid var(--line)
    }

        .about-values > div > span {
            color: var(--blue);
            font-size: 9px;
            font-weight: 900
        }

    .about-values strong {
        color: var(--ink);
        font-size: 15px
    }

    .about-values p {
        grid-column: 2;
        margin: 5px 0 0;
        color: #7b8797;
        font-size: 12px
    }

.about-numbers {
    padding: 65px 0;
    background: var(--navy)
}

.about-numbers-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr)
}

    .about-numbers-grid > div {
        min-height: 130px;
        padding: 22px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-right: 1px solid rgba(255,255,255,.08)
    }

        .about-numbers-grid > div:first-child {
            border-left: 1px solid rgba(255,255,255,.08)
        }

    .about-numbers-grid strong {
        color: #fff;
        font-size: 36px
    }

    .about-numbers-grid span {
        color: #788b9f;
        font-size: 10px;
        margin-top: 5px
    }

.contact-page-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px
}

.contact-info-list {
    border-top: 1px solid var(--line)
}

.contact-info-item {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    gap: 15px;
    align-items: center;
    min-height: 116px;
    padding: 20px 5px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
    transition: .25s
}

    .contact-info-item:hover {
        padding-left: 12px;
        padding-right: 12px;
        background: #f8fafc
    }

.contact-info-index {
    color: var(--blue);
    font-size: 9px;
    font-weight: 900
}

.contact-info-item small {
    display: block;
    color: #929dad;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.5px;
    margin-bottom: 6px
}

.contact-info-item strong {
    display: block;
    color: var(--ink);
    font-size: 16px
}

.contact-info-item p {
    margin: 4px 0 0;
    color: #8793a2;
    font-size: 11px
}

.contact-info-arrow {
    width: 39px;
    height: 39px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--navy);
    color: #fff
}

.contact-form-panel {
    padding: 36px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: #f7f9fb
}

.contact-form-head > span {
    display: block;
    color: var(--blue);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 10px
}

.contact-form-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 35px;
    line-height: 1.1;
    letter-spacing: -1.6px
}

.contact-form-head p {
    color: #7d8999;
    font-size: 12px;
    line-height: 1.7
}

.contact-form {
    display: grid;
    gap: 16px;
    margin-top: 24px
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 7px
}

    .form-field label {
        color: #344054;
        font-size: 10px;
        font-weight: 750
    }

    .form-field input, .form-field select, .form-field textarea {
        width: 100%;
        border: 1px solid #d9e1e9;
        border-radius: 13px;
        background: #fff;
        outline: 0;
        color: var(--ink);
        font-size: 12px
    }

    .form-field input, .form-field select {
        height: 49px;
        padding: 0 13px
    }

    .form-field textarea {
        min-height: 135px;
        padding: 13px;
        resize: vertical
    }

        .form-field input:focus, .form-field select:focus, .form-field textarea:focus {
            border-color: var(--blue);
            box-shadow: 0 0 0 4px rgba(53,167,255,.08)
        }

.contact-submit {
    width: fit-content;
    min-height: 51px;
    padding: 0 21px;
    border: 0;
    border-radius: 14px;
    background: var(--navy);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 30px
}

.contact-details-section {
    padding: 0 0 105px;
    background: #fff
}

.contact-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.contact-detail-card {
    min-height: 300px;
    padding: 36px;
    border: 1px solid var(--line);
    border-radius: 27px;
    background: #f7f9fb
}

    .contact-detail-card > span {
        display: block;
        color: var(--blue);
        font-size: 8px;
        font-weight: 900;
        letter-spacing: 1.9px;
        margin-bottom: 58px
    }

    .contact-detail-card h3 {
        margin: 0 0 20px;
        color: var(--ink);
        font-size: 30px;
        line-height: 1.1
    }

.working-hours > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    font-size: 11px
}

.working-hours span {
    color: #7d8998
}

.working-hours strong {
    color: var(--ink)
}

.contact-detail-dark {
    background: radial-gradient(circle at 90% 10%,rgba(53,167,255,.2),transparent 35%),var(--navy);
    border-color: var(--navy)
}

    .contact-detail-dark h3 {
        color: #fff
    }

    .contact-detail-dark p {
        color: #92a1b4;
        font-size: 13px;
        line-height: 1.8
    }

.selected-product-box {
    position: relative;
    padding: 18px 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(53,167,255,.2);
    border-radius: 15px;
    background: rgba(53,167,255,.06);
    display: flex;
    flex-direction: column
}

    .selected-product-box > span {
        font-size: 8px;
        color: var(--blue);
        font-weight: 900;
        letter-spacing: 1.5px
    }

    .selected-product-box > strong {
        margin-top: 5px;
        color: var(--ink);
        font-size: 15px
    }

    .selected-product-box > a {
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 9px;
        color: var(--blue);
        font-weight: 800;
        text-decoration: none
    }

.contact-alert {
    padding: 14px 16px;
    border-radius: 13px;
    margin-bottom: 17px
}

    .contact-alert p {
        margin: 3px 0 0;
        font-size: 11px
    }

.contact-alert-success {
    background: rgba(34,197,94,.08);
    color: #166534;
    border: 1px solid rgba(34,197,94,.2)
}

.contact-alert-error {
    background: rgba(239,68,68,.07);
    color: #991b1b;
    border: 1px solid rgba(239,68,68,.2)
}

/* FOOTER + WHATSAPP */
.site-footer {
    padding: 78px 0 28px;
    background: #040c15;
    color: #fff
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.25fr;
    gap: 55px;
    padding-bottom: 58px
}

.footer-clean-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none
}

.footer-symbol {
    width: 48px;
    height: 48px;
    object-fit: contain
}

.footer-wordmark {
    width: 145px;
    height: 34px;
    object-fit: contain
}

.footer-brand > p {
    max-width: 330px;
    color: #7f8da0;
    font-size: 12px;
    line-height: 1.8;
    margin: 22px 0
}

.footer-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

    .footer-badges span {
        padding: 6px 9px;
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 99px;
        color: #7f91a5;
        font-size: 8px
    }

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 10px
}

    .footer-column > span {
        color: #526276;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: 1.9px;
        margin-bottom: 6px
    }

    .footer-column a, .footer-column p {
        width: fit-content;
        margin: 0;
        color: #a7b1bf;
        font-size: 11px;
        text-decoration: none
    }

        .footer-column a:hover {
            color: #fff
        }

.footer-bottom {
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,.07);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #536174;
    font-size: 9px
}

    .footer-bottom p {
        margin: 0
    }

.floating-whatsapp {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 8px 17px 8px 8px;
    border-radius: 99px;
    background: #25d366;
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 16px 35px rgba(0,0,0,.22);
    transition: .25s
}

    .floating-whatsapp:hover {
        transform: translateY(-4px);
        background: #20bd5a
    }

.floating-whatsapp-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.16)
}

    .floating-whatsapp-icon svg {
        width: 25px;
        height: 25px;
        fill: #fff
    }

.floating-whatsapp-text {
    display: flex;
    flex-direction: column
}

    .floating-whatsapp-text small {
        font-size: 8px;
        color: rgba(255,255,255,.75);
        font-weight: 850;
        letter-spacing: 1.1px
    }

    .floating-whatsapp-text strong {
        font-size: 13px;
        color: #fff
    }

@media(max-width:1100px) {
    .desktop-nav, .nav-phone {
        display: none
    }

    .mobile-menu-button {
        display: block
    }

    .kb-hero-layout, .kb-proof-layout, .kb-tech-card, .detail-grid, .about-page-grid, .contact-page-grid {
        grid-template-columns: 1fr
    }

    .kb-hero-copy {
        text-align: center
    }

    .kb-eyebrow, .kb-hero-actions, .kb-hero-trust {
        justify-content: center
    }

    .kb-hero-copy > p {
        margin-left: auto;
        margin-right: auto
    }

    .kb-hero-stage {
        min-height: 470px
    }

    .kb-solution-grid {
        grid-template-columns: 1fr 1fr
    }

    .kb-solution-main {
        grid-row: auto
    }

    .kb-solution-card {
        min-height: 380px
    }

    .kb-featured-grid {
        grid-template-columns: 1fr 1fr
    }

    .kb-process-track, .process-grid, .principles-grid, .about-numbers-grid {
        grid-template-columns: 1fr 1fr
    }

    .footer-top {
        grid-template-columns: 1fr 1fr
    }

    .kb-proof-copy {
        position: static
    }
}

@media(max-width:800px) {
    .products-grid, .services-page-grid, .details-bottom, .contact-detail-grid {
        grid-template-columns: 1fr
    }

    .products-filter-bar {
        padding: 20px 0;
        flex-direction: column;
        align-items: stretch
    }

    .products-search {
        min-width: 0;
        width: 100%
    }

    .kb-featured-grid {
        grid-template-columns: 1fr
    }

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

    .kb-final-actions {
        width: 100%;
        flex-direction: row
    }

    .kb-solution-grid {
        grid-template-columns: 1fr
    }

    .kb-solution-card, .kb-solution-main {
        min-height: 380px
    }
}

@media(max-width:700px) {
    :root {
        --shell: calc(100% - 28px)
    }

    .site-header {
        top: 9px
    }

    .navbar-shell {
        width: calc(100% - 18px);
        height: 64px;
        padding-left: 12px
    }

    .nav-cta {
        display: none
    }

    .brand-symbol {
        width: 34px !important;
        height: 34px !important
    }

    .brand-wordmark {
        width: 105px !important;
        height: 27px !important
    }

    .mobile-menu {
        width: calc(100% - 18px);
        margin: 7px auto 0;
        padding: 13px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: rgba(255,255,255,.97);
        box-shadow: var(--shadow)
    }

        .mobile-menu.active {
            display: flex;
            flex-direction: column;
            gap: 4px
        }

        .mobile-menu a {
            padding: 12px;
            border-radius: 10px;
            color: var(--navy);
            font-size: 12px;
            font-weight: 700;
            text-decoration: none
        }

    .mobile-menu-cta {
        background: var(--blue);
        color: #fff !important;
        text-align: center
    }

    .kb-hero {
        padding-top: 120px
    }

    .kb-hero-layout {
        gap: 18px;
        min-height: auto
    }

    .kb-hero-copy h1 {
        font-size: 54px;
        letter-spacing: -4px
    }

    .kb-hero-copy > p {
        font-size: 14px
    }

    .kb-hero-actions {
        flex-direction: column
    }

    .kb-hero-trust {
        gap: 20px
    }

    .kb-hero-stage {
        min-height: 330px
    }

    .kb-product-platform {
        width: 95%
    }

    .kb-hero-product {
        max-height: 220px
    }

    .kb-stage-orbit {
        display: none
    }

    .kb-stage-card {
        transform: scale(.78)
    }

    .kb-stage-card-top {
        top: 15px;
        right: -12px
    }

    .kb-stage-card-bottom {
        bottom: 65px;
        left: -18px
    }

    .kb-stage-caption {
        width: 230px;
        right: 0;
        bottom: 0
    }

    .kb-hero-strip {
        overflow: hidden;
        justify-content: flex-start;
        gap: 20px;
        white-space: nowrap
    }

    .kb-solutions, .kb-proof, .kb-featured, .kb-process {
        padding: 78px 0
    }

    .kb-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px
    }

        .kb-section-head h2, .kb-proof-copy h2, .kb-tech-copy h2, .kb-final-cta h2 {
            font-size: 41px;
            letter-spacing: -2.5px
        }

    .kb-solution-card {
        min-height: 340px;
        padding: 24px
    }

        .kb-solution-card img, .kb-solution-main img {
            width: 70%;
            height: 48%;
            top: 22%;
            right: 0
        }

    .kb-solution-bottom {
        left: 24px;
        right: 24px
    }

        .kb-solution-bottom p {
            max-width: 220px
        }

    .kb-proof-list article {
        grid-template-columns: 42px 1fr
    }

    .kb-feature-image {
        height: 250px
    }

    .kb-process-track, .process-grid, .principles-grid, .about-numbers-grid {
        grid-template-columns: 1fr
    }

        .kb-process-track article {
            min-height: 210px
        }

        .kb-process-track h3 {
            margin-top: 50px
        }

    .kb-tech {
        padding-bottom: 78px
    }

    .kb-tech-visual {
        padding: 30px;
        min-height: 340px
    }

    .kb-tech-copy {
        padding: 32px 25px
    }

    .kb-final-cta {
        padding: 42px 25px
    }

    .kb-final-actions {
        flex-direction: column
    }

    .page-hero, .products-hero {
        padding: 130px 0 70px
    }

        .page-hero h1, .products-hero h1 {
            font-size: 50px;
            letter-spacing: -3px
        }

    .products-categories {
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    .product-filter {
        justify-content: center
    }

    .products-page {
        padding: 60px 0 78px
    }

    .product-card-image {
        height: 275px
    }

        .product-card-image img {
            height: 185px
        }

    .product-card-content {
        padding: 22px
    }

        .product-card-content h3 a {
            font-size: 24px
        }

    .product-detail {
        padding: 115px 0 78px
    }

    .detail-visual {
        min-height: 360px
    }

    .detail-content h1 {
        font-size: 42px;
        letter-spacing: -2.3px
    }

    .quick-specs {
        grid-template-columns: 1fr
    }

    .detail-buttons {
        flex-direction: column
    }

    .services-page, .about-page, .contact-page, .service-process, .about-principles {
        padding: 75px 0
    }

    .service-detail-card {
        min-height: auto;
        padding: 27px 23px
    }

        .service-detail-card ul {
            grid-template-columns: 1fr
        }

    .about-page-visual, .about-visual-card {
        min-height: 400px;
        height: 400px
    }

        .about-visual-card > span {
            font-size: 120px
        }

    .about-stat-card {
        right: 12px;
        bottom: 17px
    }

    .about-page-content h2, .contact-info-column h2 {
        font-size: 41px;
        letter-spacing: -2.4px
    }

    .contact-form-panel {
        padding: 25px 20px
    }

    .form-row {
        grid-template-columns: 1fr
    }

    .contact-submit {
        width: 100%;
        justify-content: center
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 34px
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px
    }

    .floating-whatsapp {
        right: 15px;
        bottom: 15px;
        padding: 7px
    }

    .floating-whatsapp-text {
        display: none
    }

    .floating-whatsapp-icon {
        width: 44px;
        height: 44px
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important
    }
}

/* =====================================================================
   PREMIUM HEADER + FOOTER V3
   ===================================================================== */
.premium-header {
    position: fixed;
    top: 16px;
    left: 0;
    right: 0;
    z-index: 1200;
    pointer-events: none
}

.premium-navbar {
    pointer-events: auto;
    width: min(1420px,calc(100% - 34px));
    height: 80px;
    margin: 0 auto;
    padding: 0 12px 0 15px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 34px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 24px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 20px 60px rgba(3,13,22,.16);
    backdrop-filter: blur(24px) saturate(140%);
    transition: height .3s ease,box-shadow .3s ease,background .3s ease
}

.premium-header.scrolled .premium-navbar {
    height: 70px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 14px 42px rgba(3,13,22,.18)
}

.premium-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none
}

.premium-brand-mark {
    position: relative;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid #e5eaf0;
    border-radius: 15px;
    background: linear-gradient(145deg,#fff,#f3f6f8);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(7,21,33,.06);
    overflow: hidden;
    transition: transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease
}

    .premium-brand-mark:after {
        content: "";
        position: absolute;
        inset: auto -30% -75% -30%;
        height: 80%;
        background: radial-gradient(circle,rgba(199,154,43,.22),transparent 65%)
    }

    .premium-brand-mark img {
        position: relative;
        z-index: 1;
        width: 36px;
        height: 36px;
        object-fit: contain
    }

.premium-brand-wordmark {
    width: 148px;
    height: 34px;
    object-fit: contain;
    object-position: left center;
    transition: transform .35s cubic-bezier(.2,.8,.2,1)
}

.premium-brand:hover .premium-brand-mark {
    transform: translateY(-2px) rotate(-2deg);
    box-shadow: 0 10px 24px rgba(7,21,33,.09)
}

.premium-brand:hover .premium-brand-wordmark {
    transform: translateX(2px)
}

.premium-nav {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 6px;
    border-radius: 16px;
    background: #f7f9fb
}

    .premium-nav a {
        position: relative;
        min-height: 44px;
        padding: 0 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        color: #4a586c;
        font-size: 12px;
        font-weight: 750;
        text-decoration: none;
        transition: color .25s ease,background .25s ease,transform .25s ease
    }

        .premium-nav a:after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 6px;
            width: 0;
            height: 2px;
            border-radius: 99px;
            background: linear-gradient(90deg,#c79a2b,#f0d36f,#c79a2b);
            transform: translateX(-50%);
            transition: width .25s ease
        }

        .premium-nav a:hover {
            color: #071521;
            background: #fff;
            transform: translateY(-1px)
        }

        .premium-nav a.active {
            color: #071521;
            background: #fff;
            box-shadow: 0 6px 16px rgba(7,21,33,.06)
        }

            .premium-nav a.active:after, .premium-nav a:hover:after {
                width: 22px
            }

.premium-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

.premium-phone {
    min-height: 50px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 14px;
    text-decoration: none;
    transition: background .25s ease
}

    .premium-phone:hover {
        background: #f4f7fa
    }

.premium-phone-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #28c76f;
    box-shadow: 0 0 0 5px rgba(40,199,111,.10)
}

.premium-phone-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1
}

    .premium-phone-copy small {
        color: #8b97a7;
        font-size: 7px;
        font-weight: 900;
        letter-spacing: 1.2px
    }

    .premium-phone-copy strong {
        color: #0b1724;
        font-size: 11px;
        font-weight: 850;
        white-space: nowrap
    }

.premium-quote-btn {
    min-height: 50px;
    padding: 0 17px 0 19px;
    display: flex;
    align-items: center;
    gap: 26px;
    border-radius: 14px;
    background: linear-gradient(135deg,#071521,#102d3d);
    color: #fff !important;
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(7,21,33,.18);
    transition: transform .25s ease,box-shadow .25s ease
}

    .premium-quote-btn b {
        width: 27px;
        height: 27px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        background: rgba(255,255,255,.10);
        font-size: 13px
    }

    .premium-quote-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(7,21,33,.24)
    }

.premium-menu-button {
    display: none;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    border-radius: 13px;
    background: #071521;
    cursor: pointer
}

    .premium-menu-button span {
        display: block;
        width: 100%;
        height: 2px;
        margin: 4px 0;
        border-radius: 99px;
        background: #fff;
        transition: .25s
    }

    .premium-menu-button.active span:nth-child(1) {
        transform: translateY(6px) rotate(45deg)
    }

    .premium-menu-button.active span:nth-child(2) {
        opacity: 0
    }

    .premium-menu-button.active span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg)
    }

.premium-mobile-menu {
    display: none;
    pointer-events: auto;
    width: min(720px,calc(100% - 18px));
    margin: 8px auto 0;
    padding: 13px;
    border: 1px solid #e4e9ef;
    border-radius: 20px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 20px 50px rgba(7,21,33,.18);
    backdrop-filter: blur(20px)
}

    .premium-mobile-menu > a {
        padding: 13px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 11px;
        color: #0b1724;
        font-size: 12px;
        font-weight: 750;
        text-decoration: none
    }

        .premium-mobile-menu > a:hover {
            background: #f4f7fa
        }

.premium-mobile-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 8px 0
}

    .premium-mobile-contact a {
        padding: 12px;
        border: 1px solid #e1e7ee;
        border-radius: 11px;
        color: #46556a;
        font-size: 11px;
        font-weight: 750;
        text-align: center;
        text-decoration: none
    }

.premium-mobile-menu .premium-mobile-cta {
    justify-content: center;
    background: #071521;
    color: #fff
}

.premium-footer {
    padding: 0 0 26px !important;
    background: #030b13 !important;
    overflow: hidden
}

    .premium-footer .footer-container {
        position: relative;
        padding-top: 62px
    }

        .premium-footer .footer-container:before {
            content: "";
            position: absolute;
            top: -360px;
            right: -260px;
            width: 760px;
            height: 760px;
            border: 1px solid rgba(67,171,255,.07);
            border-radius: 50%;
            pointer-events: none
        }

.premium-footer-cta {
    position: relative;
    z-index: 1;
    padding: 52px 54px;
    margin-bottom: 70px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 30px;
    background: radial-gradient(circle at 84% 18%,rgba(53,167,255,.24),transparent 30%),linear-gradient(135deg,#0b1d2b,#071521);
    box-shadow: 0 30px 80px rgba(0,0,0,.18)
}

    .premium-footer-cta:after {
        content: "";
        position: absolute;
        right: -110px;
        bottom: -250px;
        width: 520px;
        height: 520px;
        border: 1px solid rgba(255,255,255,.06);
        border-radius: 50%
    }

.premium-footer-cta-copy {
    position: relative;
    z-index: 1;
    max-width: 780px
}

.premium-footer-kicker {
    display: block;
    margin-bottom: 14px;
    color: #61b8ff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2.2px
}

.premium-footer-cta h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(38px,4vw,58px);
    font-weight: 680;
    line-height: 1;
    letter-spacing: -2.7px
}

    .premium-footer-cta h2 strong {
        display: block;
        color: #68bdff;
        font-weight: inherit
    }

.premium-footer-cta p {
    max-width: 640px;
    margin: 18px 0 0;
    color: #91a2b4;
    font-size: 13px;
    line-height: 1.75
}

.premium-footer-cta-actions {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 9px;
    flex-shrink: 0
}

    .premium-footer-cta-actions a {
        min-height: 52px;
        padding: 0 18px;
        display: flex;
        align-items: center;
        gap: 28px;
        border-radius: 14px;
        font-size: 11px;
        font-weight: 850;
        text-decoration: none
    }

.premium-footer-primary {
    background: #fff;
    color: #071521 !important
}

.premium-footer-secondary {
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: #fff !important
}

.premium-footer-cta-actions a:hover {
    transform: translateY(-2px)
}

.premium-footer-main {
    display: grid;
    grid-template-columns: 1.8fr .8fr 1fr 1.25fr;
    gap: 58px;
    padding-bottom: 54px
}

.premium-footer-brand {
    min-width: 0
}

.premium-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none
}

.premium-footer-logo-mark {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 15px;
    background: rgba(255,255,255,.04)
}

    .premium-footer-logo-mark img {
        width: 39px;
        height: 39px;
        object-fit: contain
    }

.premium-footer-logo > img {
    width: 155px;
    height: 35px;
    object-fit: contain;
    object-position: left center;
    filter: brightness(0) invert(1)
}

.premium-footer-brand > p {
    max-width: 380px;
    margin: 22px 0;
    color: #8190a2;
    font-size: 12px;
    line-height: 1.8
}

.premium-footer-tags {
    display: flex;
    gap: 7px;
    flex-wrap: wrap
}

    .premium-footer-tags span {
        padding: 7px 10px;
        border: 1px solid rgba(255,255,255,.07);
        border-radius: 99px;
        background: rgba(255,255,255,.025);
        color: #6f8195;
        font-size: 8px;
        font-weight: 750
    }

.premium-footer-column {
    display: flex;
    flex-direction: column;
    gap: 11px
}

.premium-footer-title {
    display: block;
    margin-bottom: 8px;
    color: #536579;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px
}

.premium-footer-column a {
    width: max-content;
    max-width: 100%;
    color: #a6b2c0;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease,transform .2s ease
}

    .premium-footer-column a:hover {
        color: #fff;
        transform: translateX(3px)
    }

.premium-footer-contact-card {
    align-self: start;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 19px;
    background: rgba(255,255,255,.035)
}

    .premium-footer-contact-card > a {
        display: block;
        margin-bottom: 8px;
        color: #aeb8c5;
        font-size: 11px;
        text-decoration: none
    }

    .premium-footer-contact-card .premium-footer-phone {
        color: #fff;
        font-size: 17px;
        font-weight: 800;
        letter-spacing: -.4px
    }

    .premium-footer-contact-card p {
        margin: 12px 0 18px;
        color: #6e7e91;
        font-size: 11px
    }

.premium-footer-status {
    padding-top: 15px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-top: 1px solid rgba(255,255,255,.07);
    color: #77899d;
    font-size: 9px
}

    .premium-footer-status i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #28c76f;
        box-shadow: 0 0 0 5px rgba(40,199,111,.08)
    }

.premium-footer-bottom {
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,.07);
    color: #506174;
    font-size: 9px
}

    .premium-footer-bottom p {
        margin: 0
    }

    .premium-footer-bottom > div {
        display: flex;
        align-items: center;
        gap: 10px
    }

    .premium-footer-bottom i {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #405266
    }

@media(max-width:1150px) {
    .premium-nav {
        display: none
    }

    .premium-phone {
        display: none
    }

    .premium-menu-button {
        display: block
    }

    .premium-navbar {
        grid-template-columns: auto 1fr auto
    }

    .premium-nav-actions {
        justify-self: end
    }

    .premium-footer-main {
        grid-template-columns: 1.5fr 1fr 1fr
    }

    .premium-footer-contact-card {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px
    }

        .premium-footer-contact-card .premium-footer-title, .premium-footer-contact-card .premium-footer-status {
            grid-column: 1/-1
        }
}

@media(max-width:800px) {
    .premium-footer-cta {
        padding: 42px 34px;
        align-items: flex-start;
        flex-direction: column
    }

    .premium-footer-cta-actions {
        width: 100%
    }

        .premium-footer-cta-actions a {
            flex: 1;
            justify-content: space-between
        }

    .premium-footer-main {
        grid-template-columns: 1fr 1fr
    }

    .premium-footer-brand {
        grid-column: 1/-1
    }

    .premium-footer-contact-card {
        grid-column: 1/-1
    }

    .premium-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px
    }
}

@media(max-width:700px) {
    .premium-header {
        top: 9px
    }

    .premium-navbar {
        width: calc(100% - 18px);
        height: 66px;
        padding: 0 10px;
        border-radius: 19px;
        gap: 12px
    }

    .premium-header.scrolled .premium-navbar {
        height: 62px
    }

    .premium-brand-mark {
        width: 42px;
        height: 42px;
        border-radius: 13px
    }

        .premium-brand-mark img {
            width: 32px;
            height: 32px
        }

    .premium-brand-wordmark {
        width: 112px;
        height: 28px
    }

    .premium-quote-btn {
        display: none
    }

    .premium-mobile-menu.active {
        display: block
    }

    .premium-footer .footer-container {
        padding-top: 45px
    }

    .premium-footer-cta {
        margin-bottom: 52px;
        padding: 34px 24px;
        border-radius: 24px
    }

        .premium-footer-cta h2 {
            font-size: 39px;
            letter-spacing: -2.1px
        }

    .premium-footer-cta-actions {
        flex-direction: column
    }

    .premium-footer-main {
        grid-template-columns: 1fr;
        gap: 34px
    }

    .premium-footer-brand, .premium-footer-contact-card {
        grid-column: auto
    }

    .premium-footer-contact-card {
        display: block
    }

    .premium-footer-bottom > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px
    }

    .premium-footer-bottom i {
        display: none
    }
}
/* =========================================================
   TYPOGRAPHY SYSTEM
========================================================= */

html,
body,
button,
input,
select,
textarea {
    font-family: "Manrope", sans-serif !important;
}

body {
    letter-spacing: -0.01em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Manrope", sans-serif !important;
    font-weight: 800;
    letter-spacing: -0.04em;
}

p,
a,
span,
small,
strong,
label,
input,
select,
textarea,
button {
    font-family: "Manrope", sans-serif !important;
}
/* =========================================================
   FINAL TECHNO NAVBAR OVERRIDE
   BU KOD SITE.CSS'İN EN SONUNDA KALACAK
========================================================= */

body .site-header {
    position: fixed !important;
    top: 14px !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 99999 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


    /* =========================================================
   NAVBAR MAIN SHELL
========================================================= */

    body .site-header .navbar-shell {
        position: relative !important;
        display: flex !important;
        width: min(1400px, calc(100% - 36px)) !important;
        min-height: 76px !important;
        margin: 0 auto !important;
        padding: 0 14px 0 18px !important;
        align-items: center !important;
        justify-content: space-between !important;
        overflow: hidden !important;
        border: 1px solid rgba(73, 163, 255, .20) !important;
        border-radius: 21px !important;
        background: linear-gradient( 135deg, rgba(5, 16, 29, .96) 0%, rgba(7, 25, 43, .95) 55%, rgba(10, 39, 61, .94) 100% ) !important;
        box-shadow: 0 24px 70px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255,255,255,.055), inset 0 -1px 0 rgba(0,0,0,.30) !important;
        backdrop-filter: blur(24px) !important;
    }


        /* GRID */

        body .site-header .navbar-shell::before {
            position: absolute !important;
            inset: 0 !important;
            display: block !important;
            background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ) !important;
            background-size: 28px 28px !important;
            content: "" !important;
            opacity: .65 !important;
            pointer-events: none !important;
        }


        /* BLUE LIGHT */

        body .site-header .navbar-shell::after {
            position: absolute !important;
            top: -85px !important;
            left: 22% !important;
            display: block !important;
            width: 480px !important;
            height: 150px !important;
            border: 0 !important;
            border-radius: 50% !important;
            background: rgba(24, 132, 255, .20) !important;
            filter: blur(50px) !important;
            content: "" !important;
            pointer-events: none !important;
        }


        body .site-header .navbar-shell > * {
            position: relative !important;
            z-index: 5 !important;
        }


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

    body .site-header .custom-brand {
        position: relative !important;
        display: inline-flex !important;
        width: auto !important;
        height: auto !important;
        gap: 9px !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        text-decoration: none !important;
        background: transparent !important;
    }


        body .site-header .custom-brand .brand-symbol {
            display: block !important;
            width: 43px !important;
            height: 43px !important;
            min-width: 43px !important;
            max-width: 43px !important;
            min-height: 43px !important;
            max-height: 43px !important;
            object-fit: contain !important;
            margin: 0 !important;
            filter: drop-shadow( 0 0 12px rgba(214, 170, 56, .20) ) !important;
            transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease !important;
        }


        body .site-header .custom-brand .brand-wordmark {
            display: block !important;
            width: 148px !important;
            height: 34px !important;
            min-width: 0 !important;
            max-width: 148px !important;
            object-fit: contain !important;
            object-position: left center !important;
            margin: 0 !important;
            filter: brightness(1.12) !important;
            transition: transform .35s ease, filter .35s ease !important;
        }


@media (hover: hover) and (pointer: fine) {

    body .site-header .custom-brand:hover .brand-symbol {
        transform: translateY(-2px) rotate(-4deg) scale(1.07) !important;
        filter: brightness(1.10) drop-shadow( 0 7px 13px rgba(214, 170, 56, .32) ) !important;
    }


    body .site-header .custom-brand:hover .brand-wordmark {
        transform: translateX(3px) scale(1.015) !important;
        filter: brightness(1.22) !important;
    }
}


/* =========================================================
   DESKTOP MENU
========================================================= */

body .site-header .desktop-nav {
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
    margin: 0 !important;
}


    body .site-header .desktop-nav a {
        position: relative !important;
        display: inline-flex !important;
        min-height: 44px !important;
        padding: 0 15px !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid transparent !important;
        border-radius: 12px !important;
        background: transparent !important;
        color: rgba(218, 231, 244, .72) !important;
        font-family: "Manrope", sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: -.15px !important;
        text-decoration: none !important;
        transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease !important;
    }


        /* Eski underline'ları kapat */

        body .site-header .desktop-nav a::after {
            display: none !important;
        }


        /* Yeni mavi nokta */

        body .site-header .desktop-nav a::before {
            position: absolute !important;
            top: 50% !important;
            left: 7px !important;
            display: block !important;
            width: 4px !important;
            height: 4px !important;
            border-radius: 50% !important;
            background: #39a5ff !important;
            box-shadow: 0 0 8px rgba(57, 165, 255, .75) !important;
            content: "" !important;
            opacity: 0 !important;
            filter: none !important;
            transform: translateY(-50%) scale(.3) !important;
            transition: opacity .25s ease, transform .25s ease !important;
        }


@media (hover: hover) and (pointer: fine) {

    body .site-header .desktop-nav a:hover {
        border-color: rgba(70, 164, 255, .10) !important;
        background: linear-gradient( 135deg, rgba(38, 127, 215, .12), rgba(29, 107, 180, .05) ) !important;
        color: #ffffff !important;
        transform: translateY(-1px) !important;
    }


        body .site-header .desktop-nav a:hover::before {
            opacity: 1 !important;
            transform: translateY(-50%) scale(1) !important;
        }
}


/* =========================================================
   RIGHT AREA
========================================================= */

body .site-header .navbar-actions {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}


/* PHONE */

body .site-header .nav-phone {
    display: flex !important;
    min-width: 83px !important;
    padding: 0 14px !important;
    flex-direction: column !important;
    border-left: 1px solid rgba(255,255,255,.07) !important;
    background: transparent !important;
    text-decoration: none !important;
}


    body .site-header .nav-phone span {
        margin-bottom: 4px !important;
        color: #60788f !important;
        font-size: 8px !important;
        font-weight: 800 !important;
        letter-spacing: 1.2px !important;
        text-transform: uppercase !important;
    }


    body .site-header .nav-phone strong {
        color: #edf6ff !important;
        font-size: 11px !important;
        font-weight: 800 !important;
    }


/* =========================================================
   FREE DISCOVERY BUTTON
========================================================= */

body .site-header .nav-cta {
    position: relative !important;
    display: inline-flex !important;
    min-height: 47px !important;
    padding: 0 20px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(101, 185, 255, .28) !important;
    border-radius: 13px !important;
    background: linear-gradient( 135deg, #116cd0, #149cff ) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 10px 28px rgba(12, 117, 216, .25), inset 0 1px 0 rgba(255,255,255,.14) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}


    body .site-header .nav-cta::before {
        position: absolute !important;
        top: -50% !important;
        left: -60px !important;
        display: block !important;
        width: 38px !important;
        height: 200% !important;
        background: rgba(255,255,255,.22) !important;
        content: "" !important;
        transform: rotate(18deg) !important;
        transition: left .5s ease !important;
    }


    body .site-header .nav-cta::after {
        display: none !important;
    }


    body .site-header .nav-cta:hover {
        color: #ffffff !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 15px 38px rgba(12, 132, 235, .34), inset 0 1px 0 rgba(255,255,255,.18) !important;
    }


        body .site-header .nav-cta:hover::before {
            left: 130% !important;
        }


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

body .site-header .mobile-menu-button {
    display: none !important;
}


@media (max-width: 1100px) {

    body .site-header .desktop-nav,
    body .site-header .nav-phone {
        display: none !important;
    }


    body .site-header .mobile-menu-button {
        display: block !important;
        width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
        border: 1px solid rgba(255,255,255,.10) !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,.055) !important;
    }
}


@media (max-width: 700px) {

    body .site-header {
        top: 8px !important;
    }


        body .site-header .navbar-shell {
            width: calc(100% - 16px) !important;
            min-height: 64px !important;
            padding: 0 10px 0 13px !important;
            border-radius: 17px !important;
        }


        body .site-header .custom-brand .brand-symbol {
            width: 35px !important;
            height: 35px !important;
            min-width: 35px !important;
            max-width: 35px !important;
            min-height: 35px !important;
            max-height: 35px !important;
        }


        body .site-header .custom-brand .brand-wordmark {
            width: 110px !important;
            height: 27px !important;
            max-width: 110px !important;
        }


        body .site-header .nav-cta {
            display: none !important;
        }
}
/* =========================================================
   FINAL FONT OVERRIDE
========================================================= */

html,
body,
button,
input,
textarea,
select,
option {
    font-family: "Manrope", sans-serif !important;
}

body {
    font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Manrope", sans-serif !important;
    font-weight: 800 !important;
}

p {
    font-family: "Manrope", sans-serif !important;
    font-weight: 500;
}
/* =====================================================================
   KLIMACI BARIS - TECHNO HEADER FINAL
   Layout uses .premium-* classes. Keep this block at the very end.
   ===================================================================== */
:root {
    --kb-ink: #06111d;
    --kb-ink-2: #0a2133;
    --kb-line: rgba(113, 190, 255, .18);
    --kb-blue: #35a9ff;
    --kb-blue-2: #087ee8;
    --kb-gold: #d3a83f;
}

html, body, button, input, select, textarea {
    font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body {
    font-weight: 500;
    letter-spacing: -.012em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Manrope", sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -.045em;
}

body .premium-header {
    position: fixed !important;
    top: 14px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    pointer-events: none !important;
}

body .premium-navbar {
    position: relative !important;
    pointer-events: auto !important;
    width: min(1420px, calc(100% - 34px)) !important;
    height: 78px !important;
    margin: 0 auto !important;
    padding: 0 12px 0 15px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 30px !important;
    overflow: hidden !important;
    border: 1px solid var(--kb-line) !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, rgba(5,17,30,.965), rgba(7,28,46,.95) 58%, rgba(8,39,59,.94)) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(24px) saturate(135%) !important;
    transition: height .28s ease, transform .28s ease, box-shadow .28s ease !important;
}

    body .premium-navbar::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        pointer-events: none !important;
        background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) !important;
        background-size: 26px 26px !important;
        mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent) !important;
    }

    body .premium-navbar::after {
        content: "" !important;
        position: absolute !important;
        width: 430px !important;
        height: 120px !important;
        top: -82px !important;
        left: 28% !important;
        border-radius: 50% !important;
        background: rgba(35,151,255,.24) !important;
        filter: blur(48px) !important;
        pointer-events: none !important;
    }

    body .premium-navbar > * {
        position: relative !important;
        z-index: 2 !important;
    }

body .premium-header.scrolled .premium-navbar {
    height: 68px !important;
    background: rgba(5,17,30,.975) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.34) !important;
}

body .premium-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
}

body .premium-brand-mark {
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(211,168,63,.25) !important;
    border-radius: 15px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 24px rgba(211,168,63,.05) !important;
}

    body .premium-brand-mark::after {
        background: radial-gradient(circle, rgba(211,168,63,.28), transparent 66%) !important;
    }

    body .premium-brand-mark img {
        width: 37px !important;
        height: 37px !important;
    }

body .premium-brand-wordmark {
    width: 150px !important;
    height: 34px !important;
    filter: brightness(1.2) contrast(1.02) !important;
}

body .premium-brand:hover .premium-brand-mark {
    transform: translateY(-2px) rotate(-3deg) scale(1.03) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.18), 0 0 20px rgba(211,168,63,.10) !important;
}

body .premium-nav {
    justify-self: center !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: auto !important;
    padding: 5px !important;
    border: 1px solid rgba(255,255,255,.055) !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.035) !important;
}

    body .premium-nav a {
        position: relative !important;
        min-height: 42px !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid transparent !important;
        border-radius: 11px !important;
        color: rgba(221,234,247,.67) !important;
        background: transparent !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        letter-spacing: -.01em !important;
        text-decoration: none !important;
    }

        body .premium-nav a::after {
            bottom: 4px !important;
            height: 2px !important;
            background: linear-gradient(90deg, var(--kb-blue-2), #62c1ff) !important;
            box-shadow: 0 0 10px rgba(53,169,255,.55) !important;
        }

        body .premium-nav a:hover {
            color: #fff !important;
            background: rgba(53,169,255,.075) !important;
            transform: translateY(-1px) !important;
        }

        body .premium-nav a.active {
            color: #fff !important;
            border-color: rgba(74,171,255,.12) !important;
            background: linear-gradient(135deg,rgba(40,137,224,.14),rgba(255,255,255,.035)) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
        }

body .premium-phone {
    min-height: 50px !important;
    padding: 0 12px !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
}

    body .premium-phone:hover {
        background: rgba(255,255,255,.045) !important;
        border-color: rgba(255,255,255,.055) !important;
    }

body .premium-phone-dot {
    background: #35d47c !important;
    box-shadow: 0 0 0 5px rgba(53,212,124,.09),0 0 14px rgba(53,212,124,.25) !important;
}

body .premium-phone-copy small {
    color: #668198 !important;
}

body .premium-phone-copy strong {
    color: #eef7ff !important;
}

body .premium-quote-btn {
    min-height: 50px !important;
    padding: 0 12px 0 18px !important;
    gap: 20px !important;
    border: 1px solid rgba(106,193,255,.28) !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg,#0878dc,#19a5ff) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(7,126,232,.27), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

    body .premium-quote-btn b {
        background: rgba(255,255,255,.14) !important;
    }

    body .premium-quote-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 15px 34px rgba(8,134,238,.38) !important;
    }

body .premium-menu-button {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
}

body .premium-mobile-menu {
    border-color: rgba(89,173,247,.17) !important;
    background: rgba(5,18,31,.98) !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.38) !important;
}

    body .premium-mobile-menu > a {
        color: #e9f4ff !important;
    }

        body .premium-mobile-menu > a:hover {
            background: rgba(53,169,255,.08) !important;
        }

body .premium-mobile-contact a {
    border-color: rgba(255,255,255,.08) !important;
    color: #9db3c8 !important;
}

body .premium-mobile-menu .premium-mobile-cta {
    background: linear-gradient(135deg,#0878dc,#19a5ff) !important;
    color: #fff !important;
}

@media (max-width: 1180px) {
    body .premium-nav {
        display: none !important;
    }

    body .premium-menu-button {
        display: block !important;
    }
}

@media (max-width: 760px) {
    body .premium-header {
        top: 8px !important;
    }

    body .premium-navbar {
        width: calc(100% - 16px) !important;
        height: 64px !important;
        padding: 0 9px 0 11px !important;
        border-radius: 17px !important;
        gap: 10px !important;
    }

    body .premium-header.scrolled .premium-navbar {
        height: 60px !important;
    }

    body .premium-brand-mark {
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
    }

        body .premium-brand-mark img {
            width: 31px !important;
            height: 31px !important;
        }

    body .premium-brand-wordmark {
        width: 112px !important;
        height: 27px !important;
    }

    body .premium-phone, body .premium-quote-btn {
        display: none !important;
    }
}

/* =========================================================
   KLİMACI BARIŞ — SERVICES / REAL FIELD MEDIA
   2026 PREMIUM SERVICE SHOWCASE
========================================================= */

.services-hero-premium {
    background: radial-gradient(circle at 83% 18%, rgba(24,148,255,.18), transparent 30%), linear-gradient(135deg, #04101c 0%, #061a2b 58%, #082b40 100%) !important;
}

.kb-services-showcase {
    position: relative;
    overflow: hidden;
    padding: 112px 0 84px;
    background: radial-gradient(circle at 12% 8%, rgba(21,151,255,.055), transparent 28%), #f4f7fa;
}

    .kb-services-showcase::before {
        position: absolute;
        top: 55px;
        right: -160px;
        width: 430px;
        height: 430px;
        border: 1px solid rgba(20,126,210,.075);
        border-radius: 50%;
        content: "";
        pointer-events: none;
    }

.kb-services-head {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 70px;
    margin-bottom: 48px;
    align-items: end;
}

    .kb-services-head > div > span,
    .kb-services-trust-copy > span {
        display: block;
        margin-bottom: 14px;
        color: #0b8ff2;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 2.2px;
    }

    .kb-services-head h2 {
        max-width: 760px;
        margin: 0;
        color: #061321;
        font-size: clamp(42px, 5vw, 67px);
        font-weight: 800;
        line-height: .98;
        letter-spacing: -3.4px;
    }

        .kb-services-head h2 strong {
            display: block;
            color: #108df2;
            font-weight: inherit;
        }

    .kb-services-head > p {
        max-width: 500px;
        margin: 0 0 3px;
        color: #6c7989;
        font-size: 14px;
        line-height: 1.85;
    }

.kb-service-media-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.kb-service-media-card {
    position: relative;
    min-height: 510px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 28px;
    background: #071522;
    box-shadow: 0 20px 55px rgba(5,18,31,.10);
    isolation: isolate;
    transform: translateZ(0);
}

.kb-service-media-card--wide {
    min-height: 590px;
}

.kb-service-photo,
.kb-service-shade {
    position: absolute;
    inset: 0;
}

    .kb-service-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 43%;
        filter: saturate(.72) contrast(1.06) brightness(.72);
        transform: scale(1.025);
        transition: transform .8s cubic-bezier(.16,.8,.2,1), filter .55s ease;
    }

.kb-service-photo--split img {
    object-position: center 30%;
}

.kb-service-photo--outdoor img {
    object-position: center 27%;
}

.kb-service-photo--install img {
    object-position: center 37%;
}

.kb-service-shade {
    z-index: 1;
    background: linear-gradient(180deg, rgba(4,13,23,.13) 0%, rgba(4,13,23,.18) 28%, rgba(4,13,23,.89) 82%, rgba(4,13,23,.98) 100%), linear-gradient(90deg, rgba(3,14,25,.54), transparent 60%);
}

.kb-service-media-card::before {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(85,184,255,.50), transparent);
    content: "";
    opacity: .65;
}

.kb-service-media-card::after {
    position: absolute;
    z-index: 2;
    top: -70px;
    right: -70px;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(91,187,255,.14);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.kb-service-card-content {
    position: relative;
    z-index: 3;
    display: flex;
    min-height: inherit;
    padding: 30px;
    flex-direction: column;
    justify-content: space-between;
}

.kb-service-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .kb-service-card-top span {
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        border: 1px solid rgba(255,255,255,.16);
        border-radius: 50%;
        background: rgba(3,16,29,.36);
        color: #77c7ff;
        font-size: 9px;
        font-weight: 800;
        backdrop-filter: blur(10px);
    }

    .kb-service-card-top small {
        padding: 8px 11px;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 999px;
        background: rgba(4,15,26,.34);
        color: rgba(229,242,253,.78);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 1.35px;
        backdrop-filter: blur(12px);
    }

.kb-service-card-content h3 {
    max-width: 620px;
    margin: 0 0 13px;
    color: #fff;
    font-size: clamp(27px, 3vw, 39px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1.8px;
}

.kb-service-card-content p {
    max-width: 610px;
    margin: 0 0 22px;
    color: #a7b6c5;
    font-size: 12.5px;
    line-height: 1.75;
}

.kb-service-card-content a {
    display: inline-flex;
    width: fit-content;
    min-height: 43px;
    padding: 0 5px 0 15px;
    gap: 18px;
    align-items: center;
    border: 1px solid rgba(108,192,255,.19);
    border-radius: 999px;
    background: rgba(11,112,194,.15);
    color: #e9f6ff;
    font-size: 10.5px;
    font-weight: 800;
    text-decoration: none;
    backdrop-filter: blur(14px);
    transition: background .25s ease, transform .25s ease, border-color .25s ease;
}

    .kb-service-card-content a b {
        display: grid;
        width: 33px;
        height: 33px;
        place-items: center;
        border-radius: 50%;
        background: #118fe9;
        color: #fff;
        font-size: 13px;
        transition: transform .28s ease;
    }

@media (hover:hover) and (pointer:fine) {
    .kb-service-media-card:hover .kb-service-photo img {
        filter: saturate(.92) contrast(1.05) brightness(.84);
        transform: scale(1.07);
    }

    .kb-service-media-card:hover .kb-service-card-content a {
        border-color: rgba(93,188,255,.35);
        background: rgba(12,131,220,.22);
        transform: translateY(-2px);
    }

        .kb-service-media-card:hover .kb-service-card-content a b {
            transform: rotate(7deg) translate(1px,-1px);
        }
}

.kb-services-trust-strip {
    position: relative;
    z-index: 2;
    display: grid;
    margin-top: 18px;
    padding: 18px 20px 18px 18px;
    grid-template-columns: 82px 1fr auto;
    gap: 22px;
    align-items: center;
    border: 1px solid #dce4eb;
    border-radius: 23px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(5,18,31,.055);
}

.kb-services-team-photo {
    width: 82px;
    height: 82px;
    overflow: hidden;
    border-radius: 18px;
    background: #e9eef2;
}

    .kb-services-team-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 36%;
    }

.kb-services-trust-copy > span {
    margin-bottom: 5px;
    font-size: 8px;
}

.kb-services-trust-copy strong {
    display: block;
    color: #061321;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.7px;
}

.kb-services-trust-copy p {
    max-width: 700px;
    margin: 5px 0 0;
    color: #7b8795;
    font-size: 11px;
    line-height: 1.6;
}

.kb-services-trust-cta {
    display: inline-flex;
    min-height: 47px;
    padding: 0 7px 0 17px;
    gap: 18px;
    align-items: center;
    border-radius: 999px;
    background: #071522;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    text-decoration: none;
}

    .kb-services-trust-cta span {
        display: grid;
        width: 33px;
        height: 33px;
        place-items: center;
        border-radius: 50%;
        background: #128fef;
    }

.kb-process-premium {
    background: #fff !important;
}

    .kb-process-premium .process-item {
        transition: background .3s ease, transform .3s ease;
    }

@media (hover:hover) and (pointer:fine) {
    .kb-process-premium .process-item:hover {
        background: #f4f8fb;
        transform: translateY(-3px);
    }
}

@media (max-width: 900px) {
    .kb-services-head {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .kb-service-media-grid {
        grid-template-columns: 1fr;
    }

    .kb-service-media-card,
    .kb-service-media-card--wide {
        min-height: 490px;
    }

    .kb-services-trust-strip {
        grid-template-columns: 70px 1fr;
    }

    .kb-services-team-photo {
        width: 70px;
        height: 70px;
    }

    .kb-services-trust-cta {
        grid-column: 1 / -1;
        width: fit-content;
    }
}

@media (max-width: 650px) {
    .kb-services-showcase {
        padding: 78px 0 60px;
    }

    .kb-services-head h2 {
        font-size: 41px;
        letter-spacing: -2.3px;
    }

    .kb-service-media-card,
    .kb-service-media-card--wide {
        min-height: 455px;
        border-radius: 22px;
    }

    .kb-service-card-content {
        padding: 21px;
    }

        .kb-service-card-content h3 {
            font-size: 28px;
            letter-spacing: -1.4px;
        }

        .kb-service-card-content p {
            font-size: 11.5px;
        }

    .kb-service-photo--install img {
        object-position: center 35%;
    }

    .kb-services-trust-strip {
        padding: 15px;
        grid-template-columns: 58px 1fr;
        gap: 14px;
    }

    .kb-services-team-photo {
        width: 58px;
        height: 58px;
        border-radius: 14px;
    }

    .kb-services-trust-copy strong {
        font-size: 15px;
    }

    .kb-services-trust-copy p {
        display: none;
    }
}

/* =========================================================
   BTU CALCULATOR
========================================================= */
.btu-hero {
    position: relative;
    overflow: hidden;
    padding: 170px 0 100px;
    background: radial-gradient(circle at 78% 18%,rgba(20,151,255,.18),transparent 28%),linear-gradient(135deg,#04111e 0%,#061b2d 55%,#07304a 100%);
    color: #fff
}

.btu-hero-grid {
    position: absolute;
    inset: 0;
    opacity: .22;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size: 44px 44px
}

.btu-hero-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 70px;
    align-items: center
}

.btu-hero-copy h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(58px,6.7vw,96px);
    font-weight: 800;
    line-height: .93;
    letter-spacing: -5px
}

    .btu-hero-copy h1 em {
        display: block;
        color: #55b7ff;
        font-style: normal
    }

.btu-hero-copy p {
    max-width: 700px;
    margin: 28px 0 0;
    color: #95a9bc;
    font-size: 15px;
    line-height: 1.85
}

.btu-hero-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 28px
}

    .btu-hero-tags span {
        padding: 9px 13px;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 999px;
        background: rgba(255,255,255,.04);
        color: #b8c7d5;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .9px
    }

.btu-hero-meter {
    position: relative;
    display: grid;
    min-height: 400px;
    place-items: center
}

.btu-meter-orbit {
    position: absolute;
    border: 1px solid rgba(81,183,255,.16);
    border-radius: 50%
}

.btu-meter-orbit-a {
    width: 380px;
    height: 380px
}

.btu-meter-orbit-b {
    width: 260px;
    height: 260px
}

.btu-meter-core {
    position: relative;
    z-index: 2;
    display: flex;
    width: 210px;
    height: 210px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    background: rgba(5,20,34,.7);
    box-shadow: 0 0 70px rgba(24,132,255,.12);
    backdrop-filter: blur(18px)
}

    .btu-meter-core small {
        color: #6888a3;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 2px
    }

    .btu-meter-core strong {
        margin-top: 9px;
        color: #fff;
        font-size: 31px;
        letter-spacing: -1.8px
    }

    .btu-meter-core span {
        margin-top: 3px;
        color: #55b7ff;
        font-size: 10px;
        font-weight: 800
    }

.btu-calculator-section {
    padding: 90px 0;
    background: #f3f6fa
}

.btu-calculator-layout {
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr);
    gap: 24px;
    align-items: start
}

.btu-form, .btu-result {
    border: 1px solid #dfe6ee;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 22px 65px rgba(6,20,35,.07)
}

.btu-form {
    padding: 36px
}

.btu-panel-head > span {
    color: #1884ff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.8px
}

.btu-panel-head h2 {
    margin: 9px 0 8px;
    color: #07111f;
    font-size: 35px;
    font-weight: 800;
    letter-spacing: -1.7px
}

.btu-panel-head p {
    margin: 0;
    color: #7a8798;
    font-size: 12px
}

.btu-fields {
    display: grid;
    margin-top: 30px;
    grid-template-columns: 1fr 1fr;
    gap: 15px
}

.btu-field {
    display: flex;
    min-width: 0;
    padding: 16px;
    flex-direction: column;
    border: 1px solid #e1e7ed;
    border-radius: 17px;
    background: #f9fbfd
}

.btu-field-wide {
    grid-column: 1/-1
}

.btu-field > span {
    margin-bottom: 9px;
    color: #344054;
    font-size: 10px;
    font-weight: 800
}

.btu-field input, .btu-field select {
    width: 100%;
    height: 42px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #07111f;
    font-size: 14px;
    font-weight: 750
}

.btu-field select {
    cursor: pointer
}

.btu-input-unit {
    display: flex;
    align-items: center
}

    .btu-input-unit b {
        color: #8a98a9;
        font-size: 11px
    }

.btu-field small {
    margin-top: 6px;
    color: #97a3b1;
    font-size: 9px
}

.btu-switches {
    display: grid;
    margin-top: 16px;
    grid-template-columns: repeat(3,1fr);
    gap: 10px
}

    .btu-switches label {
        display: flex;
        gap: 10px;
        padding: 14px;
        border: 1px solid #e1e7ed;
        border-radius: 16px;
        background: #fff;
        cursor: pointer
    }

    .btu-switches input {
        width: 17px;
        height: 17px;
        accent-color: #1884ff
    }

    .btu-switches span {
        display: flex;
        flex-direction: column
    }

    .btu-switches b {
        color: #07111f;
        font-size: 10px
    }

    .btu-switches small {
        margin-top: 3px;
        color: #8996a6;
        font-size: 8px;
        line-height: 1.4
    }

.btu-form-note {
    margin-top: 18px;
    padding: 14px 16px;
    border-left: 3px solid #1884ff;
    border-radius: 10px;
    background: #f3f8ff;
    color: #69778a;
    font-size: 10px;
    line-height: 1.65
}

.btu-result {
    position: sticky;
    top: 105px;
    padding: 28px;
    overflow: hidden;
    background: radial-gradient(circle at 80% 5%,rgba(24,132,255,.18),transparent 28%),#071522;
    color: #fff
}

.btu-result-head {
    display: flex;
    align-items: center;
    gap: 10px
}

    .btu-result-head span {
        color: #62baff;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 1.8px
    }

    .btu-result-head i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #32df8e;
        box-shadow: 0 0 10px rgba(50,223,142,.7)
    }

    .btu-result-head small {
        color: #70859a;
        font-size: 9px
    }

.btu-gauge {
    position: relative;
    margin-top: 15px
}

    .btu-gauge svg {
        display: block;
        width: 100%
    }

.btu-gauge-track, .btu-gauge-value {
    fill: none;
    stroke-width: 13;
    stroke-linecap: round
}

.btu-gauge-track {
    stroke: rgba(255,255,255,.08)
}

.btu-gauge-value {
    stroke: #1884ff;
    stroke-dasharray: 4 96;
    filter: drop-shadow(0 0 8px rgba(24,132,255,.55));
    transition: stroke-dasharray .4s ease
}

.btu-gauge-copy {
    position: absolute;
    right: 0;
    bottom: 15px;
    left: 0;
    text-align: center
}

    .btu-gauge-copy small {
        display: block;
        color: #6e8399;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: 1.2px
    }

    .btu-gauge-copy strong {
        display: block;
        margin-top: 4px;
        color: #fff;
        font-size: 35px;
        font-weight: 800;
        letter-spacing: -2px
    }

    .btu-gauge-copy span {
        color: #54b3ff;
        font-size: 10px;
        font-weight: 800
    }

.btu-result-primary {
    padding: 20px;
    border: 1px solid rgba(85,183,255,.15);
    border-radius: 18px;
    background: rgba(24,132,255,.08);
    text-align: center
}

    .btu-result-primary span {
        display: block;
        color: #7d9bb5;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: 1.3px
    }

    .btu-result-primary strong {
        display: inline-block;
        margin-top: 7px;
        color: #fff;
        font-size: 37px;
        letter-spacing: -2px
    }

    .btu-result-primary small {
        margin-left: 5px;
        color: #55b7ff;
        font-size: 9px
    }

.btu-result-grid {
    display: grid;
    margin-top: 12px;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

    .btu-result-grid > div {
        padding: 14px;
        border: 1px solid rgba(255,255,255,.07);
        border-radius: 14px;
        background: rgba(255,255,255,.025)
    }

    .btu-result-grid span {
        display: block;
        color: #6f8295;
        font-size: 8px
    }

    .btu-result-grid strong {
        display: inline-block;
        margin-top: 5px;
        color: #eaf4ff;
        font-size: 17px
    }

    .btu-result-grid small {
        display: block;
        margin-top: 2px;
        color: #58738b;
        font-size: 7px
    }

.btu-system-recommendation {
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.08)
}

    .btu-system-recommendation > span {
        color: #55b7ff;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: 1.4px
    }

    .btu-system-recommendation h3 {
        margin: 7px 0 6px;
        color: #fff;
        font-size: 23px;
        letter-spacing: -1px
    }

    .btu-system-recommendation p {
        margin: 0;
        color: #869aad;
        font-size: 10.5px;
        line-height: 1.6
    }

.btu-load-bars {
    display: grid;
    margin-top: 15px;
    gap: 9px
}

    .btu-load-bars > div {
        display: grid;
        grid-template-columns: 115px 1fr;
        gap: 10px;
        align-items: center
    }

    .btu-load-bars span {
        color: #72879a;
        font-size: 8px
    }

    .btu-load-bars b {
        height: 5px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(255,255,255,.07)
    }

    .btu-load-bars i {
        display: block;
        width: 20%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg,#1884ff,#52c8ff);
        transition: width .4s ease
    }

.btu-result-actions {
    display: grid;
    margin-top: 20px;
    gap: 8px
}

    .btu-result-actions .kb-btn {
        width: 100%;
        justify-content: space-between
    }

.btu-capacity-scale {
    padding: 100px 0;
    background: #fff
}

.btu-scale-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px
}

    .btu-scale-grid article {
        min-height: 220px;
        padding: 25px;
        border: 1px solid #e1e7ee;
        border-radius: 20px;
        background: #f8fafc
    }

        .btu-scale-grid article > span {
            color: #1884ff;
            font-size: 9px;
            font-weight: 900
        }

    .btu-scale-grid h3 {
        margin: 65px 0 9px;
        color: #07111f;
        font-size: 20px
    }

    .btu-scale-grid p {
        margin: 0;
        color: #788697;
        font-size: 11px;
        line-height: 1.65
    }

.btu-info-section {
    padding: 95px 0;
    background: #eef3f8
}

.btu-info-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 80px
}

    .btu-info-grid h2 {
        margin: 10px 0 0;
        color: #07111f;
        font-size: clamp(42px,5vw,64px);
        line-height: 1;
        letter-spacing: -3px
    }

        .btu-info-grid h2 em {
            display: block;
            color: #1884ff;
            font-style: normal
        }

.btu-info-copy p {
    color: #6f7e90;
    font-size: 13px;
    line-height: 1.8
}

.btu-info-copy .kb-inline-link {
    margin-top: 10px
}

/* =========================================================
   GOOGLE REVIEWS HOME BLOCK
========================================================= */
.kb-google-reviews {
    padding: 95px 0;
    background: #fff
}

.kb-google-review-card {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 50px;
    align-items: center;
    padding: 55px;
    border: 1px solid #e0e6ed;
    border-radius: 30px;
    background: linear-gradient(135deg,#f9fbfd,#f1f6fa);
    box-shadow: 0 20px 60px rgba(7,17,31,.06)
}

.kb-google-review-copy h2 {
    margin: 9px 0 16px;
    color: #07111f;
    font-size: clamp(40px,4.6vw,62px);
    line-height: 1;
    letter-spacing: -3px
}

    .kb-google-review-copy h2 em {
        display: block;
        color: #1884ff;
        font-style: normal
    }

.kb-google-review-copy p {
    max-width: 650px;
    color: #738194;
    font-size: 13px;
    line-height: 1.8
}

.kb-google-review-btn {
    display: inline-flex;
    margin-top: 18px;
    padding: 0 20px;
    min-height: 50px;
    gap: 30px;
    align-items: center;
    border-radius: 13px;
    background: #07111f;
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800
}

    .kb-google-review-btn:hover {
        color: #fff;
        background: #1884ff
    }

.kb-google-review-visual {
    display: flex;
    min-height: 260px;
    padding: 30px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 24px;
    background: #071522;
    color: #fff;
    text-align: center
}

.kb-google-g {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 17px;
    background: #fff;
    color: #4285f4;
    font-size: 31px;
    font-weight: 800
}

.kb-review-stars {
    display: flex;
    gap: 4px;
    margin-top: 18px;
    color: #fbbc04;
    font-size: 22px
}

.kb-google-review-visual strong {
    margin-top: 9px;
    font-size: 17px
}

.kb-google-review-visual small {
    max-width: 260px;
    margin-top: 6px;
    color: #788da1;
    font-size: 9px;
    line-height: 1.5
}

@media(max-width:1100px) {
    .btu-hero-layout, .btu-calculator-layout, .btu-info-grid, .kb-google-review-card {
        grid-template-columns: 1fr
    }

    .btu-result {
        position: relative;
        top: auto
    }

    .btu-switches, .btu-scale-grid {
        grid-template-columns: 1fr 1fr
    }

    .btu-hero-meter {
        min-height: 300px
    }
}

@media(max-width:700px) {
    .btu-hero {
        padding: 130px 0 70px
    }

    .btu-hero-copy h1 {
        font-size: 50px;
        letter-spacing: -3px
    }

    .btu-hero-meter {
        min-height: 240px
    }

    .btu-meter-orbit-a {
        width: 260px;
        height: 260px
    }

    .btu-meter-orbit-b {
        width: 190px;
        height: 190px
    }

    .btu-meter-core {
        width: 160px;
        height: 160px
    }

        .btu-meter-core strong {
            font-size: 24px
        }

    .btu-calculator-section {
        padding: 65px 0
    }

    .btu-form, .btu-result {
        padding: 21px;
        border-radius: 22px
    }

    .btu-fields, .btu-switches, .btu-scale-grid {
        grid-template-columns: 1fr
    }

    .btu-field-wide {
        grid-column: auto
    }

    .btu-result-grid {
        grid-template-columns: 1fr 1fr
    }

    .btu-capacity-scale, .btu-info-section, .kb-google-reviews {
        padding: 70px 0
    }

    .kb-google-review-card {
        padding: 27px;
        border-radius: 22px
    }

    .kb-google-review-copy h2 {
        font-size: 39px;
        letter-spacing: -2px
    }

    .btu-load-bars > div {
        grid-template-columns: 95px 1fr
    }
}

\n\n /* =========================================================\n   GOOGLE REVIEWS - SAMPLE EXPERIENCE BLOCK\n========================================================= */ \n.kb-google-reviews {
    padding: 105px 0;
    background: linear-gradient(180deg,#fff 0%,#f6f9fc 100%)
}

\n.kb-google-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 36px;
    margin-bottom: 34px
}

    \n.kb-google-head h2 {
        margin: 9px 0 0;
        color: #07111f;
        font-size: clamp(42px,5vw,66px);
        line-height: .98;
        letter-spacing: -3.4px
    }

        \n.kb-google-head h2 em {
            display: block;
            color: #1884ff;
            font-style: normal
        }

\n.kb-google-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 270px;
    padding: 16px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(7,17,31,.06)
}

    \n.kb-google-summary .kb-google-g {
        width: 44px;
        height: 44px;
        border: 1px solid #e6ebf0;
        border-radius: 13px;
        background: #fff;
        color: #4285f4;
        font-size: 24px
    }

    \n.kb-google-summary strong {
        display: block;
        color: #172033;
        font-size: 12px
    }

.kb-google-summary .kb-review-stars {
    margin-top: 5px;
    font-size: 15px
}

\n.kb-google-review-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

\n.kb-review-card {
    position: relative;
    min-height: 285px;
    padding: 26px;
    border: 1px solid #e1e7ee;
    border-radius: 24px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 50px rgba(7,17,31,.055);
    transition: transform .3s ease,border-color .3s ease,box-shadow .3s ease
}

\n.kb-review-card-featured {
    background: linear-gradient(145deg,#071522,#0a263c);
    border-color: rgba(73,163,255,.18);
    box-shadow: 0 24px 60px rgba(7,21,34,.17)
}

\n.kb-review-card:hover {
    transform: translateY(-5px);
    border-color: rgba(24,132,255,.22);
    box-shadow: 0 26px 60px rgba(7,17,31,.09)
}

\n.kb-review-top {
    display: grid;
    grid-template-columns: 44px 1fr 30px;
    gap: 12px;
    align-items: center
}

.kb-review-avatar {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg,#ddecfb,#f5f9fd);
    color: #1768ad;
    font-size: 11px;
    font-weight: 800
}

.kb-review-top strong {
    display: block;
    color: #101828;
    font-size: 12px
}

.kb-review-top small {
    display: block;
    margin-top: 3px;
    color: #8a97a8;
    font-size: 9px
}

.kb-review-google {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 9px;
    background: #f5f8fb;
    color: #4285f4;
    font-size: 16px;
    font-weight: 800
}

.kb-review-card .kb-review-stars {
    display: flex;
    gap: 3px;
    margin-top: 22px;
    color: #fbbc04;
    font-size: 17px
}

.kb-review-card p {
    margin: 16px 0 22px;
    color: #68768a;
    font-size: 12px;
    line-height: 1.8
}

.kb-review-tag {
    display: inline-flex;
    min-height: 28px;
    padding: 0 10px;
    align-items: center;
    border-radius: 999px;
    background: #f3f7fa;
    color: #758397;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .5px
}

.kb-review-card-featured .kb-review-top strong {
    color: #fff
}

.kb-review-card-featured .kb-review-top small {
    color: #8094a9
}

.kb-review-card-featured .kb-review-avatar {
    background: rgba(255,255,255,.08);
    color: #79c3ff
}

.kb-review-card-featured .kb-review-google {
    background: rgba(255,255,255,.08);
    color: #7ebcff
}

.kb-review-card-featured p {
    color: #9babbc
}

.kb-review-card-featured .kb-review-tag {
    background: rgba(255,255,255,.07);
    color: #8ea3b8
}

\n.kb-google-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px;
    padding: 15px 17px;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    background: rgba(255,255,255,.72)
}

.kb-google-note > span {
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    flex: 0 0 23px;
    border-radius: 50%;
    background: #e9f3ff;
    color: #1884ff;
    font-size: 10px;
    font-weight: 900
}

.kb-google-note p {
    margin: 1px 0 0;
    color: #7b8797;
    font-size: 9px;
    line-height: 1.65
}

.kb-google-note strong {
    color: #4f5d70
}

\n@media(max-width:1000px) {
    .kb-google-head {
        align-items: flex-start;
        flex-direction: column
    }

    .kb-google-review-grid {
        grid-template-columns: 1fr
    }

    .kb-google-summary {
        min-width: 0
    }

    .kb-review-card {
        min-height: 0
    }
}

\n@media(max-width:700px) {
    .kb-google-reviews {
        padding: 72px 0
    }

    .kb-google-head h2 {
        font-size: 40px;
        letter-spacing: -2.3px
    }

    .kb-review-card {
        padding: 22px;
        border-radius: 20px
    }

    .kb-google-note p {
        font-size: 8px
    }
}

\n
/* =========================================================
   KLIMACI BARIS - PREMIUM CUSTOMER REVIEWS
========================================================= */
.kb-reviews {
    position: relative;
    padding: 125px 0;
    overflow: hidden;
    background: linear-gradient( 180deg, #06101c 0%, #071523 48%, #06101c 100% );
    color: #fff;
}


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

.kb-reviews::before {
    position: absolute;
    inset: 0;
    background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px );
    background-size: 52px 52px;
    content: "";
    opacity: .45;
    pointer-events: none;
}


.kb-reviews::after {
    position: absolute;
    top: 0;
    right: 8%;
    width: 1px;
    height: 100%;
    background: linear-gradient( transparent, rgba(58, 163, 255, .18), transparent );
    content: "";
    pointer-events: none;
}


.kb-reviews-glow {
    position: absolute;
    top: -240px;
    left: 55%;
    width: 650px;
    height: 500px;
    border-radius: 50%;
    background: rgba(17, 125, 222, .13);
    filter: blur(100px);
    pointer-events: none;
}


.kb-reviews .page-shell {
    position: relative;
    z-index: 3;
}


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

.kb-reviews-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 70px;
    margin-bottom: 60px;
    align-items: end;
}


.kb-reviews-heading {
    max-width: 790px;
}


    .kb-reviews-heading .section-eyebrow {
        display: inline-flex;
        margin-bottom: 22px;
        align-items: center;
        color: #43a9ff;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 2.2px;
    }


        .kb-reviews-heading .section-eyebrow::before {
            width: 30px;
            height: 1px;
            margin-right: 12px;
            background: #43a9ff;
            content: "";
        }


    .kb-reviews-heading h2 {
        max-width: 760px;
        margin: 0;
        color: #f5f9fd;
        font-size: clamp(40px, 5vw, 70px);
        font-weight: 800;
        line-height: .99;
        letter-spacing: -.055em;
    }


        .kb-reviews-heading h2 span {
            display: block;
            color: #7890a7;
        }


    .kb-reviews-heading > p {
        max-width: 610px;
        margin: 27px 0 0;
        color: #8499ad;
        font-size: 15px;
        line-height: 1.85;
    }


/* =========================================================
   SCORE
========================================================= */

.kb-review-score {
    padding: 27px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 20px;
    background: linear-gradient( 145deg, rgba(255,255,255,.065), rgba(255,255,255,.018) );
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 20px 60px rgba(0,0,0,.15);
    backdrop-filter: blur(15px);
}


.kb-score-top {
    display: flex;
    gap: 20px;
    align-items: center;
}


    .kb-score-top > strong {
        color: #ffffff;
        font-size: 54px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.06em;
    }


.kb-score-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 6px;
}


    .kb-score-stars span {
        color: #f0b94d;
        font-size: 14px;
    }


.kb-score-top small {
    color: #8da1b5;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
}


.kb-score-line {
    width: 100%;
    height: 1px;
    margin: 22px 0;
    background: rgba(255,255,255,.075);
}


.kb-score-bottom {
    display: flex;
    gap: 9px;
    align-items: center;
    color: #7890a7;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
}


.kb-score-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #36a9ff;
    box-shadow: 0 0 10px rgba(54,169,255,.8);
}


/* =========================================================
   REVIEW GRID
========================================================= */

.kb-review-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(255,255,255,.09);
    border-bottom: 1px solid rgba(255,255,255,.09);
}


/* =========================================================
   REVIEW CARD
========================================================= */

.kb-review-card {
    position: relative;
    display: flex;
    min-height: 430px;
    padding: 35px;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.012);
    transition: background .4s ease, transform .4s ease;
}


    .kb-review-card:first-child {
        border-left: 1px solid rgba(255,255,255,.09);
    }


    .kb-review-card::before {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 2px;
        background: linear-gradient( 90deg, transparent, #249bff, transparent );
        content: "";
        opacity: 0;
        transform: scaleX(.3);
        transition: opacity .4s ease, transform .4s ease;
    }


    .kb-review-card:hover {
        z-index: 2;
        background: linear-gradient( 150deg, rgba(27, 109, 180, .13), rgba(255,255,255,.025) );
        transform: translateY(-5px);
    }


        .kb-review-card:hover::before {
            opacity: 1;
            transform: scaleX(1);
        }


/* Featured */

.kb-review-featured {
    background: linear-gradient( 145deg, rgba(18, 93, 157, .16), rgba(255,255,255,.018) );
}


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

.kb-review-card-top {
    display: flex;
    margin-bottom: 42px;
    align-items: center;
    justify-content: space-between;
}


.kb-review-number {
    color: #52697e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}


.kb-review-stars {
    color: #eab449;
    font-size: 12px;
    letter-spacing: 3px;
}


/* =========================================================
   QUOTE
========================================================= */

.kb-review-card blockquote {
    position: relative;
    margin: 0 0 42px;
    color: #dfe9f2;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -.02em;
}


    .kb-review-card blockquote::before {
        display: block;
        margin-bottom: 20px;
        color: #248fe8;
        content: "“";
        font-family: Georgia, serif;
        font-size: 64px;
        line-height: .5;
        opacity: .75;
    }


/* =========================================================
   PERSON
========================================================= */

.kb-review-person {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 13px;
    margin-top: auto;
    align-items: center;
}


.kb-review-avatar {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(67, 169, 255, .24);
    border-radius: 50%;
    background: linear-gradient( 135deg, #0e385b, #0a2137 );
    color: #69baff;
    font-size: 15px;
    font-weight: 800;
}


.kb-review-person-info {
    display: flex;
    flex-direction: column;
}


    .kb-review-person-info strong {
        color: #ffffff;
        font-size: 13px;
        font-weight: 800;
    }


    .kb-review-person-info span {
        margin-top: 4px;
        color: #70869a;
        font-size: 10px;
        font-weight: 600;
    }


.kb-review-location {
    color: #60778c;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* =========================================================
   VERIFIED
========================================================= */

.kb-review-verified {
    display: flex;
    gap: 7px;
    margin-top: 26px;
    padding-top: 19px;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,.065);
    color: #698095;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}


    .kb-review-verified span {
        display: inline-flex;
        width: 18px;
        height: 18px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(62, 174, 255, .30);
        border-radius: 50%;
        color: #48adff;
        font-size: 9px;
    }


/* =========================================================
   BOTTOM CTA
========================================================= */

.kb-reviews-bottom {
    display: flex;
    margin-top: 55px;
    padding-top: 35px;
    align-items: center;
    justify-content: space-between;
}


.kb-reviews-bottom-text > span {
    display: block;
    margin-bottom: 9px;
    color: #4baeff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}


.kb-reviews-bottom-text p {
    max-width: 460px;
    margin: 0;
    color: #8296a9;
    font-size: 13px;
    line-height: 1.7;
}


.kb-reviews-cta {
    display: inline-flex;
    min-width: 225px;
    min-height: 58px;
    padding: 0 8px 0 22px;
    gap: 25px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(64, 168, 255, .24);
    border-radius: 14px;
    background: linear-gradient( 135deg, #0b66bb, #159cf1 );
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 14px 35px rgba(10, 113, 200, .20);
    transition: transform .3s ease, box-shadow .3s ease;
}


    .kb-reviews-cta strong {
        display: flex;
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(255,255,255,.12);
        font-size: 16px;
        transition: transform .3s ease;
    }


    .kb-reviews-cta:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 45px rgba(10, 113, 200, .30);
    }


        .kb-reviews-cta:hover strong {
            transform: translate(2px, -2px);
        }


/* =========================================================
   DISCLAIMER
========================================================= */

.kb-review-disclaimer {
    margin: 25px 0 0;
    color: rgba(120, 143, 163, .55);
    font-size: 9px;
    letter-spacing: .4px;
}


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

@media (max-width: 1050px) {

    .kb-reviews-header {
        grid-template-columns: 1fr;
        gap: 35px;
    }


    .kb-review-score {
        max-width: 340px;
    }


    .kb-review-grid {
        grid-template-columns: 1fr;
    }


    .kb-review-card {
        min-height: auto;
        border-right: 1px solid rgba(255,255,255,.09);
        border-bottom: 1px solid rgba(255,255,255,.09);
    }
}


@media (max-width: 700px) {

    .kb-reviews {
        padding: 85px 0;
    }


    .kb-reviews-heading h2 {
        font-size: clamp(37px, 11vw, 52px);
    }


    .kb-reviews-heading > p {
        font-size: 13px;
    }


    .kb-review-score {
        padding: 22px;
    }


    .kb-score-top > strong {
        font-size: 47px;
    }


    .kb-review-card {
        padding: 29px 23px;
        min-height: 390px;
    }


        .kb-review-card blockquote {
            font-size: 15px;
            line-height: 1.75;
        }


    .kb-review-person {
        grid-template-columns: 44px 1fr;
    }


    .kb-review-location {
        display: none;
    }


    .kb-review-avatar {
        width: 44px;
        height: 44px;
    }


    .kb-reviews-bottom {
        gap: 25px;
        align-items: stretch;
        flex-direction: column;
    }


    .kb-reviews-cta {
        width: 100%;
    }
}
/* =========================================================
   PREMIUM CUSTOMER EXPERIENCE
========================================================= */

.kb-reviews {
    position: relative;
    padding: 125px 0;
    overflow: hidden;
    background: linear-gradient( 180deg, #06101c 0%, #071523 50%, #06101c 100% );
    color: #ffffff;
}


    /* GRID BACKGROUND */

    .kb-reviews::before {
        position: absolute;
        inset: 0;
        background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px );
        background-size: 52px 52px;
        content: "";
        opacity: .45;
        pointer-events: none;
    }


    /* VERTICAL LIGHT */

    .kb-reviews::after {
        position: absolute;
        top: 0;
        right: 8%;
        width: 1px;
        height: 100%;
        background: linear-gradient( transparent, rgba(58,163,255,.18), transparent );
        content: "";
        pointer-events: none;
    }


/* GLOW */

.kb-reviews-glow {
    position: absolute;
    top: -250px;
    left: 50%;
    width: 720px;
    height: 520px;
    border-radius: 50%;
    background: rgba(18,128,224,.13);
    filter: blur(100px);
    pointer-events: none;
}


.kb-reviews .kb-shell {
    position: relative;
    z-index: 3;
}


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

.kb-reviews-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 80px;
    margin-bottom: 64px;
    align-items: end;
}


.kb-reviews-heading {
    max-width: 830px;
}


.kb-review-eyebrow {
    display: inline-flex;
    margin-bottom: 22px;
    gap: 12px;
    align-items: center;
    color: #49adff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.4px;
}


    .kb-review-eyebrow::before {
        width: 30px;
        height: 1px;
        background: #49adff;
        content: "";
    }


.kb-reviews-heading h2 {
    max-width: 820px;
    margin: 0;
    color: #f7fbff;
    font-size: clamp(43px, 5vw, 72px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.055em;
}


    .kb-reviews-heading h2 span {
        display: block;
        color: #748ba1;
    }


.kb-reviews-heading p {
    max-width: 620px;
    margin: 28px 0 0;
    color: #8398ab;
    font-size: 14px;
    line-height: 1.9;
}


/* =========================================================
   SCORE PANEL
========================================================= */

.kb-review-score {
    padding: 26px;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 21px;
    background: linear-gradient( 145deg, rgba(255,255,255,.065), rgba(255,255,255,.018) );
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 25px 70px rgba(0,0,0,.16);
    backdrop-filter: blur(16px);
}


.kb-score-brand {
    display: flex;
    gap: 16px;
    align-items: center;
}


.kb-google-mark {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 15px;
    background: #ffffff;
    color: #4285f4;
    font-size: 24px;
    font-weight: 900;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}


.kb-score-brand > div:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}


.kb-score-brand span {
    margin-bottom: 4px;
    color: #526d85;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.7px;
}


.kb-score-brand strong {
    color: #eaf3fb;
    font-size: 12px;
    font-weight: 750;
}


.kb-score-line {
    width: 100%;
    height: 1px;
    margin: 23px 0;
    background: rgba(255,255,255,.075);
}


.kb-score-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}


    .kb-score-stars span {
        color: #f0b84a;
        font-size: 17px;
        text-shadow: 0 4px 14px rgba(240,184,74,.16);
    }


.kb-review-score > small {
    color: #70869a;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .5px;
}


/* =========================================================
   REVIEW GRID
========================================================= */

.kb-review-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(255,255,255,.09);
    border-bottom: 1px solid rgba(255,255,255,.09);
}


/* =========================================================
   REVIEW CARD
========================================================= */

.kb-review-card {
    position: relative;
    display: flex;
    min-height: 445px;
    padding: 36px;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.012);
    transition: transform .4s cubic-bezier(.2,.8,.2,1), background .4s ease, box-shadow .4s ease;
}


    .kb-review-card:first-child {
        border-left: 1px solid rgba(255,255,255,.09);
    }


    .kb-review-card::before {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 2px;
        background: linear-gradient( 90deg, transparent, #269dff, transparent );
        content: "";
        opacity: 0;
        transform: scaleX(.25);
        transition: opacity .4s ease, transform .4s ease;
    }


.kb-review-featured {
    background: linear-gradient( 145deg, rgba(18,94,158,.16), rgba(255,255,255,.018) );
}


@media (hover:hover) and (pointer:fine) {

    .kb-review-card:hover {
        z-index: 2;
        background: linear-gradient( 150deg, rgba(26,112,187,.14), rgba(255,255,255,.025) );
        box-shadow: 0 25px 70px rgba(0,0,0,.17);
        transform: translateY(-6px);
    }


        .kb-review-card:hover::before {
            opacity: 1;
            transform: scaleX(1);
        }
}


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

.kb-review-card-top {
    display: flex;
    margin-bottom: 42px;
    align-items: center;
    justify-content: space-between;
}


.kb-review-number {
    color: #50677c;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 2px;
}


.kb-review-stars {
    color: #ebb54b;
    font-size: 12px;
    letter-spacing: 3px;
}


/* =========================================================
   QUOTE
========================================================= */

.kb-review-card blockquote {
    position: relative;
    margin: 0 0 42px;
    color: #dce7f1;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.85;
    letter-spacing: -.015em;
}


    .kb-review-card blockquote::before {
        display: block;
        height: 35px;
        margin-bottom: 18px;
        color: #238fe8;
        content: "“";
        font-family: Georgia, serif;
        font-size: 66px;
        line-height: .65;
        opacity: .75;
    }


/* =========================================================
   CUSTOMER
========================================================= */

.kb-review-person {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) auto;
    gap: 13px;
    margin-top: auto;
    align-items: center;
}


.kb-review-avatar {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(66,171,255,.24);
    border-radius: 50%;
    background: linear-gradient( 135deg, #103b60, #091f34 );
    color: #6bbcff;
    font-size: 15px;
    font-weight: 850;
}


.kb-review-person-info {
    display: flex;
    min-width: 0;
    flex-direction: column;
}


    .kb-review-person-info strong {
        color: #ffffff;
        font-size: 13px;
        font-weight: 800;
    }


    .kb-review-person-info span {
        margin-top: 4px;
        color: #71879b;
        font-size: 10px;
        font-weight: 600;
    }


.kb-review-location {
    color: #587085;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 1.2px;
}


/* =========================================================
   VERIFIED LABEL
========================================================= */

.kb-review-verified {
    display: flex;
    gap: 8px;
    margin-top: 27px;
    padding-top: 19px;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,.065);
    color: #668096;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 1px;
    text-transform: uppercase;
}


    .kb-review-verified span {
        display: grid;
        width: 18px;
        height: 18px;
        place-items: center;
        border: 1px solid rgba(67,174,255,.30);
        border-radius: 50%;
        color: #4db1ff;
        font-size: 9px;
    }


/* =========================================================
   REVIEW BOTTOM
========================================================= */

.kb-reviews-bottom {
    display: flex;
    margin-top: 55px;
    padding-top: 35px;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
}


.kb-reviews-bottom-text > span {
    display: block;
    margin-bottom: 8px;
    color: #4caeff;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 2px;
}


.kb-reviews-bottom-text p {
    max-width: 470px;
    margin: 0;
    color: #8095a8;
    font-size: 12px;
    line-height: 1.75;
}


/* CTA */

.kb-reviews-cta {
    display: inline-flex;
    min-width: 230px;
    min-height: 58px;
    padding: 0 8px 0 22px;
    gap: 25px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(65,169,255,.25);
    border-radius: 14px;
    background: linear-gradient( 135deg, #0b66bb, #159cf1 );
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 14px 35px rgba(10,113,200,.20);
    transition: transform .3s ease, box-shadow .3s ease;
}


    .kb-reviews-cta strong {
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border-radius: 10px;
        background: rgba(255,255,255,.12);
        font-size: 16px;
        transition: transform .3s ease;
    }


    .kb-reviews-cta:hover {
        color: #ffffff !important;
        box-shadow: 0 20px 45px rgba(10,113,200,.30);
        transform: translateY(-3px);
    }


        .kb-reviews-cta:hover strong {
            transform: translate(2px,-2px);
        }


/* =========================================================
   DISCLAIMER
========================================================= */

.kb-review-disclaimer {
    margin: 25px 0 0;
    color: rgba(120,143,163,.54);
    font-size: 8px;
    letter-spacing: .35px;
}


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

@media (max-width: 1050px) {

    .kb-reviews-header {
        grid-template-columns: 1fr;
        gap: 35px;
    }


    .kb-review-score {
        max-width: 380px;
    }


    .kb-review-grid {
        grid-template-columns: 1fr;
    }


    .kb-review-card {
        min-height: auto;
        border-left: 1px solid rgba(255,255,255,.09);
        border-bottom: 1px solid rgba(255,255,255,.09);
    }
}


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

@media (max-width: 700px) {

    .kb-reviews {
        padding: 85px 0;
    }


    .kb-reviews-heading h2 {
        font-size: clamp(38px, 11vw, 52px);
    }


    .kb-reviews-heading p {
        font-size: 13px;
    }


    .kb-review-score {
        padding: 21px;
    }


    .kb-review-card {
        min-height: 390px;
        padding: 29px 23px;
    }


        .kb-review-card blockquote {
            font-size: 15px;
            line-height: 1.8;
        }


    .kb-review-person {
        grid-template-columns: 44px minmax(0,1fr);
    }


    .kb-review-location {
        display: none;
    }


    .kb-review-avatar {
        width: 44px;
        height: 44px;
    }


    .kb-reviews-bottom {
        align-items: stretch;
        flex-direction: column;
    }


    .kb-reviews-cta {
        width: 100%;
    }
}
/* =========================================================
   BLOG SYSTEM
========================================================= */

.kb-blog-page {
    padding: 110px 0 130px;
    background: #f4f7fb;
}


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

.kb-blog-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 70px;
    margin-bottom: 60px;
    align-items: end;
}


    .kb-blog-header h2 {
        max-width: 700px;
        margin: 0;
        color: #07111f;
        font-size: clamp(45px, 5vw, 70px);
        font-weight: 800;
        line-height: .98;
        letter-spacing: -.055em;
    }


        .kb-blog-header h2 span {
            display: block;
            color: #1884ff;
        }


    .kb-blog-header > p {
        margin: 0;
        color: #748094;
        font-size: 13px;
        line-height: 1.85;
    }


/* =========================================================
   BLOG GRID
========================================================= */

.kb-blog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}


.kb-blog-card {
    overflow: hidden;
    border: 1px solid #dfe6ed;
    border-radius: 25px;
    background: #ffffff;
    box-shadow: 0 15px 40px rgba(7,17,31,.055);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}


    .kb-blog-card:hover {
        border-color: rgba(24,132,255,.24);
        box-shadow: 0 25px 65px rgba(7,17,31,.10);
        transform: translateY(-6px);
    }


/* FEATURED */

.kb-blog-card-featured {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
}


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

.kb-blog-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.85) contrast(1.04) brightness(.92);
    transition: transform .65s cubic-bezier(.2,.8,.2,1), filter .4s ease;
}

.kb-blog-card:hover .kb-blog-image img {
    transform: scale(1.055);
    filter: saturate(1) contrast(1.03) brightness(1);
}

.kb-blog-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
}


.kb-blog-card:hover .kb-blog-image img {
    transform: scale(1.05);
}


.kb-blog-image::after {
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, transparent 55%, rgba(5,16,29,.30) );
    content: "";
}


.kb-blog-image > span {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
    display: inline-flex;
    min-height: 31px;
    padding: 0 12px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;
    background: rgba(6,18,31,.60);
    color: #ffffff;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}


/* =========================================================
   BLOG CONTENT
========================================================= */

.kb-blog-content {
    display: flex;
    padding: 31px;
    flex-direction: column;
}


.kb-blog-card-featured .kb-blog-content {
    padding: 48px;
    justify-content: center;
}


.kb-blog-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    color: #8c98a7;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .7px;
    text-transform: uppercase;
}


    .kb-blog-meta i {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #1884ff;
    }


.kb-blog-content h2 {
    margin: 17px 0 0;
}


    .kb-blog-content h2 a {
        color: #07111f;
        font-size: 30px;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -.035em;
        text-decoration: none;
    }


.kb-blog-card-featured h2 a {
    font-size: clamp(35px,4vw,51px);
}


.kb-blog-content > p {
    margin: 16px 0 25px;
    color: #748094;
    font-size: 12px;
    line-height: 1.8;
}


.kb-blog-link {
    display: flex;
    margin-top: auto;
    padding-top: 19px;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #e6ebf0;
    color: #07111f;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}


    .kb-blog-link span {
        color: #1884ff;
        font-size: 16px;
        transition: transform .3s ease;
    }


.kb-blog-card:hover .kb-blog-link span {
    transform: translate(2px,-2px);
}


/* =========================================================
   BLOG DETAIL HERO
========================================================= */

.kb-blog-detail-hero {
    position: relative;
    padding: 170px 0 90px;
    overflow: hidden;
    background: radial-gradient( circle at 80% 20%, rgba(35,151,255,.17), transparent 34% ), linear-gradient( 135deg, #061321, #09283e );
}


    .kb-blog-detail-hero::after {
        position: absolute;
        top: -300px;
        right: -140px;
        width: 700px;
        height: 700px;
        border: 1px solid rgba(86,179,255,.10);
        border-radius: 50%;
        content: "";
    }


    .kb-blog-detail-hero .kb-shell {
        position: relative;
        z-index: 2;
    }


.kb-blog-back {
    display: inline-flex;
    margin-bottom: 45px;
    color: #718aa0;
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
}


.kb-blog-detail-head {
    max-width: 1000px;
}


    .kb-blog-detail-head > span {
        display: inline-flex;
        margin-bottom: 18px;
        color: #53b0ff;
        font-size: 9px;
        font-weight: 850;
        letter-spacing: 2px;
        text-transform: uppercase;
    }


    .kb-blog-detail-head h1 {
        margin: 0;
        color: #ffffff;
        font-size: clamp(52px,7vw,91px);
        font-weight: 800;
        line-height: .94;
        letter-spacing: -.06em;
    }


.kb-blog-detail-meta {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    align-items: center;
    color: #71869a;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .6px;
}


    .kb-blog-detail-meta i {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #46aaff;
    }


/* =========================================================
   ARTICLE
========================================================= */

.kb-blog-article-section {
    padding: 80px 0 130px;
    background: #f4f7fb;
}


.kb-blog-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 55px;
    align-items: start;
}


.kb-blog-article {
    overflow: hidden;
    border: 1px solid #e0e6ec;
    border-radius: 27px;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(7,17,31,.06);
}


.kb-blog-cover {
    height: 480px;
    overflow: hidden;
    background: #edf2f6;
}


    .kb-blog-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


.kb-blog-body {
    max-width: 850px;
    padding: 55px;
}


    .kb-blog-body h2 {
        margin: 48px 0 17px;
        color: #07111f;
        font-size: 31px;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -.035em;
    }


        .kb-blog-body h2:first-child {
            margin-top: 0;
        }


    .kb-blog-body p {
        margin: 0 0 19px;
        color: #526174;
        font-size: 14px;
        line-height: 1.95;
    }


    .kb-blog-body ul {
        display: grid;
        margin: 20px 0 25px;
        padding: 0;
        gap: 11px;
        list-style: none;
    }


    .kb-blog-body li {
        position: relative;
        padding-left: 19px;
        color: #526174;
        font-size: 13px;
        line-height: 1.7;
    }


        .kb-blog-body li::before {
            position: absolute;
            top: 9px;
            left: 0;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #1884ff;
            content: "";
        }


/* =========================================================
   SIDEBAR
========================================================= */

.kb-blog-sidebar {
    position: sticky;
    top: 110px;
    display: grid;
    gap: 18px;
}


.kb-blog-sidebar-card {
    padding: 29px;
    border-radius: 22px;
    background: radial-gradient( circle at 90% 5%, rgba(25,146,255,.20), transparent 35% ), #071421;
    box-shadow: 0 20px 60px rgba(7,17,31,.14);
}


    .kb-blog-sidebar-card > span,
    .kb-blog-other > span {
        display: block;
        margin-bottom: 15px;
        color: #4cacff;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: 1.8px;
    }


    .kb-blog-sidebar-card h3 {
        margin: 0;
        color: #ffffff;
        font-size: 24px;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -.035em;
    }


    .kb-blog-sidebar-card p {
        margin: 16px 0 23px;
        color: #8298ab;
        font-size: 11px;
        line-height: 1.8;
    }


    .kb-blog-sidebar-card a {
        display: flex;
        min-height: 49px;
        padding: 0 8px 0 16px;
        align-items: center;
        justify-content: space-between;
        border-radius: 12px;
        background: #1884ff;
        color: #ffffff;
        font-size: 10px;
        font-weight: 800;
        text-decoration: none;
    }


        .kb-blog-sidebar-card a strong {
            display: grid;
            width: 35px;
            height: 35px;
            place-items: center;
            border-radius: 9px;
            background: rgba(255,255,255,.13);
        }


/* OTHER POSTS */

.kb-blog-other {
    padding: 26px;
    border: 1px solid #e0e6ec;
    border-radius: 22px;
    background: #ffffff;
}


    .kb-blog-other > a {
        position: relative;
        display: flex;
        padding: 17px 28px 17px 0;
        flex-direction: column;
        border-top: 1px solid #e8edf1;
        text-decoration: none;
    }


        .kb-blog-other > a:first-of-type {
            border-top: 0;
        }


    .kb-blog-other small {
        margin-bottom: 5px;
        color: #1884ff;
        font-size: 7px;
        font-weight: 850;
        letter-spacing: 1px;
        text-transform: uppercase;
    }


    .kb-blog-other strong {
        color: #07111f;
        font-size: 12px;
        line-height: 1.5;
    }


    .kb-blog-other b {
        position: absolute;
        top: 50%;
        right: 0;
        color: #1884ff;
        transform: translateY(-50%);
    }


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

@media (max-width: 1000px) {

    .kb-blog-header {
        grid-template-columns: 1fr;
        gap: 22px;
    }


    .kb-blog-grid {
        grid-template-columns: 1fr;
    }


    .kb-blog-card-featured {
        grid-column: auto;
        grid-template-columns: 1fr;
    }


        .kb-blog-card-featured .kb-blog-image {
            min-height: 340px;
        }


    .kb-blog-article-layout {
        grid-template-columns: 1fr;
    }


    .kb-blog-sidebar {
        position: static;
        grid-template-columns: 1fr 1fr;
    }
}


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

@media (max-width: 700px) {

    .kb-blog-page {
        padding: 75px 0 90px;
    }


    .kb-blog-header h2 {
        font-size: 43px;
    }


    .kb-blog-image,
    .kb-blog-card-featured .kb-blog-image {
        min-height: 270px;
    }


    .kb-blog-card-featured .kb-blog-content,
    .kb-blog-content {
        padding: 25px;
    }


        .kb-blog-content h2 a,
        .kb-blog-card-featured h2 a {
            font-size: 27px;
        }


    .kb-blog-detail-hero {
        padding: 135px 0 70px;
    }


    .kb-blog-detail-head h1 {
        font-size: 48px;
    }


    .kb-blog-article-section {
        padding: 55px 0 85px;
    }


    .kb-blog-cover {
        height: 280px;
    }


    .kb-blog-body {
        padding: 27px 23px;
    }


        .kb-blog-body h2 {
            font-size: 25px;
        }


    .kb-blog-sidebar {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   BLOG V2 - FINAL OVERRIDE
========================================================= */

.blog-hero-v2 {
    position: relative;
    padding: 190px 0 95px;
    overflow: hidden;
    background: radial-gradient( circle at 82% 18%, rgba(29, 145, 245, .18), transparent 32% ), linear-gradient( 135deg, #06111e 0%, #081b2d 55%, #0a2d43 100% );
}


    .blog-hero-v2::before {
        position: absolute;
        inset: 0;
        background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px );
        background-size: 48px 48px;
        content: "";
        opacity: .55;
    }


    .blog-hero-v2 .kb-shell {
        position: relative;
        z-index: 2;
    }


.blog-hero-v2-inner {
    display: grid;
    grid-template-columns: minmax(0,1fr) 280px;
    gap: 80px;
    align-items: end;
}


.blog-hero-v2-copy {
    max-width: 850px;
}


    .blog-hero-v2-copy > span {
        display: inline-flex;
        margin-bottom: 22px;
        color: #4cabff;
        font-size: 9px;
        font-weight: 850;
        letter-spacing: 2.4px;
    }


    .blog-hero-v2-copy h1 {
        margin: 0;
        color: #ffffff;
        font-size: clamp(55px, 7vw, 92px);
        font-weight: 800;
        line-height: .92;
        letter-spacing: -.065em;
    }


        .blog-hero-v2-copy h1 em {
            display: block;
            color: #5cb3ff;
            font-style: normal;
        }


    .blog-hero-v2-copy p {
        max-width: 620px;
        margin: 28px 0 0;
        color: #8398ac;
        font-size: 14px;
        line-height: 1.9;
    }


.blog-hero-v2-side {
    padding-left: 22px;
    border-left: 1px solid rgba(255,255,255,.10);
}


    .blog-hero-v2-side small {
        display: block;
        margin-bottom: 11px;
        color: #526d84;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: 1.7px;
    }


    .blog-hero-v2-side strong {
        color: #d9e5ef;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.5;
    }


/* =========================================================
   LIST
========================================================= */

.blog-list-v2 {
    padding: 85px 0 125px;
    background: #f3f6fa;
}


/* =========================================================
   FEATURED
========================================================= */

.blog-featured-v2 {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    min-height: 470px;
    overflow: hidden;
    border: 1px solid #dfe6ed;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 22px 65px rgba(7,17,31,.075);
}


.blog-featured-v2-image {
    position: relative;
    display: block;
    min-height: 470px;
    overflow: hidden;
    background: linear-gradient( 135deg, #dfe7ee, #eef3f7 );
}


    .blog-featured-v2-image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform .65s cubic-bezier(.2,.8,.2,1);
    }


    .blog-featured-v2-image::after {
        position: absolute;
        inset: 0;
        background: linear-gradient( 180deg, rgba(5,16,28,.02), rgba(5,16,28,.22) );
        content: "";
    }


    .blog-featured-v2-image > span,
    .blog-card-v2-image > span {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 4;
        display: inline-flex;
        min-height: 32px;
        padding: 0 13px;
        align-items: center;
        border: 1px solid rgba(255,255,255,.28);
        border-radius: 999px;
        background: rgba(6,19,32,.62);
        color: #ffffff;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        backdrop-filter: blur(12px);
    }


.blog-featured-v2-content {
    display: flex;
    padding: 55px;
    flex-direction: column;
    justify-content: center;
}


.blog-meta-v2 {
    display: flex;
    gap: 10px;
    align-items: center;
    color: #8491a0;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .7px;
}


    .blog-meta-v2 i {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #1884ff;
    }


.blog-featured-v2-content h2 {
    margin: 20px 0 0;
    color: #07111f;
    font-size: clamp(38px,4vw,55px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
}


.blog-featured-v2-content > p {
    margin: 20px 0 30px;
    color: #68788a;
    font-size: 13px;
    line-height: 1.85;
}


/* =========================================================
   GRID CARDS
========================================================= */

.blog-grid-v2 {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 22px;
    margin-top: 22px;
}


.blog-card-v2 {
    overflow: hidden;
    border: 1px solid #dfe6ed;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 14px 40px rgba(7,17,31,.05);
    transition: transform .35s ease, box-shadow .35s ease;
}


    .blog-card-v2:hover,
    .blog-featured-v2:hover {
        box-shadow: 0 28px 70px rgba(7,17,31,.10);
        transform: translateY(-5px);
    }


.blog-card-v2-image {
    position: relative;
    display: block;
    height: 300px;
    overflow: hidden;
    background: linear-gradient( 135deg, #dfe7ee, #eef3f7 );
}


    .blog-card-v2-image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s cubic-bezier(.2,.8,.2,1);
    }


.blog-card-v2:hover img,
.blog-featured-v2:hover img {
    transform: scale(1.055);
}


.blog-card-v2-content {
    display: flex;
    min-height: 300px;
    padding: 30px;
    flex-direction: column;
}


    .blog-card-v2-content h3 {
        margin: 17px 0 0;
        color: #07111f;
        font-size: 27px;
        font-weight: 800;
        line-height: 1.08;
        letter-spacing: -.035em;
    }


    .blog-card-v2-content > p {
        margin: 16px 0 25px;
        color: #718093;
        font-size: 12px;
        line-height: 1.8;
    }


/* =========================================================
   READ LINK
========================================================= */

.blog-read-v2 {
    display: flex;
    margin-top: auto;
    padding-top: 18px;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #e7ecf0;
    color: #07111f;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}


    .blog-read-v2 strong {
        color: #1884ff;
        font-size: 16px;
        transition: transform .25s ease;
    }


    .blog-read-v2:hover strong {
        transform: translate(2px,-2px);
    }


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

@media (max-width: 1000px) {

    .blog-hero-v2-inner {
        grid-template-columns: 1fr;
        gap: 35px;
    }


    .blog-hero-v2-side {
        max-width: 350px;
    }


    .blog-featured-v2 {
        grid-template-columns: 1fr;
    }


    .blog-featured-v2-image {
        min-height: 360px;
    }


    .blog-grid-v2 {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 700px) {

    .blog-hero-v2 {
        padding: 140px 0 70px;
    }


    .blog-hero-v2-copy h1 {
        font-size: 50px;
    }


    .blog-list-v2 {
        padding: 60px 0 90px;
    }


    .blog-featured-v2 {
        border-radius: 22px;
    }


    .blog-featured-v2-image {
        min-height: 270px;
    }


    .blog-featured-v2-content {
        padding: 28px 23px;
    }


        .blog-featured-v2-content h2 {
            font-size: 34px;
        }


    .blog-card-v2-image {
        height: 250px;
    }


    .blog-card-v2-content {
        min-height: auto;
        padding: 25px 22px;
    }


        .blog-card-v2-content h3 {
            font-size: 25px;
        }
}
/* =========================================================
   KLİMACI BARIŞ - GLOBAL PREMIUM MOTION
========================================================= */


/* =========================================================
   PAGE ENTRY
========================================================= */

body {
    opacity: 0;
}

    body.kb-page-ready {
        opacity: 1;
        transition: opacity .32s ease;
    }


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

.kb-auto-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
    transition-delay: var(--reveal-delay, 0ms);
}


    .kb-auto-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }


/* =========================================================
   NAVBAR SCROLL
========================================================= */

.site-header {
    transition: top .35s ease, transform .35s ease;
}


    .site-header .premium-navbar,
    .site-header .navbar-shell {
        transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, min-height .35s ease, transform .35s ease;
    }


    .site-header.is-scrolled {
        top: 8px !important;
    }


        .site-header.is-scrolled .premium-navbar,
        .site-header.is-scrolled .navbar-shell {
            border-color: rgba(73, 163, 255, .25) !important;
            background: linear-gradient( 135deg, rgba(4, 14, 25, .97), rgba(6, 25, 43, .96), rgba(8, 38, 58, .95) ) !important;
            box-shadow: 0 18px 55px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.055) !important;
        }


/* =========================================================
   PREMIUM CARD MOTION
========================================================= */

.kb-solution-card,
.kb-feature-card,
.kb-review-card,
.blog-card-v2,
.blog-featured-v2,
.service-card,
.service-detail-card,
.product-card {
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}


@media (hover: hover) and (pointer: fine) {

    .kb-solution-card:hover,
    .kb-feature-card:hover,
    .blog-card-v2:hover,
    .service-card:hover,
    .service-detail-card:hover,
    .product-card:hover {
        transform: translateY(-7px);
    }
}


/* =========================================================
   BUTTON FEEL
========================================================= */

.kb-btn,
.nav-cta,
.contact-submit,
.primary-detail-btn,
.kb-reviews-cta,
.blog-read-v2 {
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, background .28s ease, color .28s ease;
}


@media (hover: hover) and (pointer: fine) {

    .kb-btn:hover,
    .nav-cta:hover,
    .contact-submit:hover,
    .primary-detail-btn:hover {
        transform: translateY(-3px);
    }
}


/* =========================================================
   LINK ARROW MICRO MOTION
========================================================= */

.kb-inline-link span,
.kb-blog-link span,
.blog-read-v2 strong,
.product-detail-link span {
    display: inline-block;
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
}


@media (hover: hover) and (pointer: fine) {

    .kb-inline-link:hover span,
    .kb-blog-link:hover span,
    .blog-read-v2:hover strong,
    .product-detail-link:hover span {
        transform: translate(3px, -3px);
    }
}


/* =========================================================
   IMAGE MOTION
========================================================= */

.kb-solution-card img,
.kb-feature-card img,
.blog-card-v2 img,
.blog-featured-v2 img,
.product-card img {
    transition: transform .65s cubic-bezier(.2,.8,.2,1), filter .4s ease;
}


@media (hover: hover) and (pointer: fine) {

    .kb-solution-card:hover img,
    .kb-feature-card:hover img,
    .blog-card-v2:hover img,
    .blog-featured-v2:hover img {
        transform: scale(1.045);
    }
}


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

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

    body {
        opacity: 1 !important;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .kb-auto-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}
/* =========================================================
   UYGULAMALARIMIZ / PROJECT SHOWCASE
========================================================= */

.kb-projects {
    padding: 120px 0;
    background: #f4f7fb;
}


.kb-projects-head {
    display: grid;
    grid-template-columns: minmax(0,1fr) 430px;
    gap: 70px;
    margin-bottom: 52px;
    align-items: end;
}


    .kb-projects-head h2 {
        max-width: 760px;
        margin: 0;
        color: #07111f;
        font-size: clamp(45px,5vw,70px);
        font-weight: 800;
        line-height: .98;
        letter-spacing: -.055em;
    }


        .kb-projects-head h2 span {
            display: block;
            color: #1884ff;
        }


    .kb-projects-head > p {
        margin: 0;
        color: #748094;
        font-size: 13px;
        line-height: 1.85;
    }


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

.kb-project-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    grid-template-rows: 340px 340px;
    gap: 18px;
}


.kb-project-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(7,17,31,.08);
    border-radius: 24px;
    background: #07111f;
    box-shadow: 0 18px 55px rgba(7,17,31,.09);
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}


.kb-project-large {
    grid-row: span 2;
}


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

.kb-project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.78) contrast(1.05) brightness(.72);
    transform: scale(1.02);
    transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .45s ease;
}


.kb-project-card::after {
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, rgba(5,16,28,.03) 25%, rgba(5,16,28,.22) 55%, rgba(5,16,28,.94) 100% );
    content: "";
    pointer-events: none;
}


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

.kb-project-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    padding: 30px;
}


    .kb-project-overlay > span {
        display: block;
        margin-bottom: 9px;
        color: #55b2ff;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: 1.8px;
    }


    .kb-project-overlay h3 {
        margin: 0;
        color: #ffffff;
        font-size: 27px;
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -.035em;
    }


.kb-project-large .kb-project-overlay h3 {
    font-size: clamp(34px,4vw,48px);
}


.kb-project-overlay p {
    max-width: 470px;
    margin: 10px 0 0;
    color: #98a9b8;
    font-size: 11px;
    line-height: 1.7;
}


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

@media (hover:hover) and (pointer:fine) {

    .kb-project-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 28px 75px rgba(7,17,31,.16);
    }


        .kb-project-card:hover img {
            transform: scale(1.07);
            filter: saturate(.96) contrast(1.05) brightness(.86);
        }
}


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

.kb-projects-bottom {
    display: flex;
    margin-top: 35px;
    padding-top: 30px;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #dfe6ed;
}


    .kb-projects-bottom > div {
        display: flex;
        flex-direction: column;
    }


    .kb-projects-bottom small {
        margin-bottom: 7px;
        color: #1884ff;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: 1.7px;
    }


    .kb-projects-bottom strong {
        color: #17243a;
        font-size: 13px;
        font-weight: 750;
    }


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

@media (max-width: 1000px) {

    .kb-projects-head {
        grid-template-columns: 1fr;
        gap: 20px;
    }


    .kb-project-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 500px 300px;
    }


    .kb-project-large {
        grid-column: span 2;
        grid-row: auto;
    }
}


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

@media (max-width: 700px) {

    .kb-projects {
        padding: 80px 0;
    }


    .kb-projects-head h2 {
        font-size: 43px;
    }


    .kb-project-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }


    .kb-project-large {
        grid-column: auto;
    }


    .kb-project-card {
        height: 320px;
        border-radius: 20px;
    }


    .kb-project-large {
        height: 430px;
    }


    .kb-project-overlay {
        padding: 24px;
    }


        .kb-project-overlay h3,
        .kb-project-large .kb-project-overlay h3 {
            font-size: 27px;
        }


    .kb-projects-bottom {
        gap: 22px;
        align-items: flex-start;
        flex-direction: column;
    }
}
/* =========================================================
   MOBILE STICKY ACTION BAR
========================================================= */

.mobile-sticky-actions {
    display: none;
}


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

@media (max-width: 700px) {

    body {
        padding-bottom: 82px;
    }


    .mobile-sticky-actions {
        position: fixed;
        right: 10px;
        bottom: 10px;
        left: 10px;
        z-index: 999999;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        min-height: 64px;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.11);
        border-radius: 18px;
        background: linear-gradient( 135deg, rgba(5,16,29,.97), rgba(8,33,52,.96) );
        box-shadow: 0 18px 55px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
        backdrop-filter: blur(20px);
    }


    /* =====================================================
       ITEM
    ===================================================== */

    .mobile-sticky-action {
        position: relative;
        display: flex;
        min-width: 0;
        gap: 5px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #9eb0c0 !important;
        text-decoration: none !important;
        transition: background .25s ease, color .25s ease;
    }


        .mobile-sticky-action + .mobile-sticky-action {
            border-left: 1px solid rgba(255,255,255,.07);
        }


        .mobile-sticky-action strong {
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .3px;
        }


    .mobile-sticky-icon {
        display: grid;
        width: 27px;
        height: 27px;
        place-items: center;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 9px;
        background: rgba(255,255,255,.04);
        color: #68baff;
        font-size: 13px;
    }


    /* =====================================================
       WHATSAPP
    ===================================================== */

    .mobile-sticky-whatsapp {
        color: #c2d7cb !important;
    }


        .mobile-sticky-whatsapp .mobile-sticky-icon {
            border-color: rgba(37,211,102,.18);
            background: rgba(37,211,102,.08);
            color: #40dd7a;
        }


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

    .mobile-sticky-offer {
        background: linear-gradient( 135deg, rgba(12,107,205,.18), rgba(20,156,255,.15) );
        color: #ffffff !important;
    }


        .mobile-sticky-offer::before {
            position: absolute;
            top: 0;
            right: 18%;
            left: 18%;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient( 90deg, transparent, #3eaeff, transparent );
            content: "";
        }


        .mobile-sticky-offer .mobile-sticky-icon {
            border-color: rgba(69,175,255,.24);
            background: rgba(41,143,229,.12);
            color: #ffffff;
        }


    /* =====================================================
       TAP
    ===================================================== */

    .mobile-sticky-action:active {
        background: rgba(255,255,255,.07);
    }


    /* =====================================================
       FLOATING WHATSAPP'İ MOBİLDE GİZLE
       İKİ WHATSAPP BUTONU OLMASIN
    ===================================================== */

    .floating-whatsapp {
        display: none !important;
    }
}
/* =========================================================
   PRODUCT DETAIL V2
========================================================= */

.product-detail-v2 {
    padding: 185px 0 110px;
    background: radial-gradient( circle at 80% 5%, rgba(37, 147, 238, .10), transparent 28% ), #f3f6fa;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.pd-breadcrumb {
    display: flex;
    margin-bottom: 25px;
    gap: 9px;
    align-items: center;
    color: #8593a2;
    font-size: 9px;
    font-weight: 700;
    overflow: hidden;
}


    .pd-breadcrumb a {
        color: #6f8092;
        text-decoration: none;
    }


        .pd-breadcrumb a:hover {
            color: #1884ff;
        }


    .pd-breadcrumb span {
        color: #bdc6ce;
    }


    .pd-breadcrumb strong {
        color: #24364a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


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

.pd-main {
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(420px, .97fr);
    gap: 20px;
}


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

.pd-gallery {
    position: relative;
    display: flex;
    min-height: 650px;
    padding: 25px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dfe6ed;
    border-radius: 30px;
    background: radial-gradient( circle at 50% 45%, rgba(51, 156, 240, .09), transparent 38% ), #ffffff;
    box-shadow: 0 24px 70px rgba(7,17,31,.07);
}


.pd-gallery-top,
.pd-gallery-bottom {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.pd-category,
.pd-energy {
    display: inline-flex;
    min-height: 32px;
    padding: 0 13px;
    align-items: center;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .8px;
}


.pd-category {
    border: 1px solid #dfe7ee;
    background: #f5f8fa;
    color: #718194;
}


.pd-energy {
    background: #e8f5ff;
    color: #1884ff;
}


.pd-product-image {
    position: relative;
    display: flex;
    min-height: 500px;
    flex: 1;
    align-items: center;
    justify-content: center;
}


    .pd-product-image img {
        position: relative;
        z-index: 3;
        max-width: 82%;
        max-height: 390px;
        object-fit: contain;
        filter: drop-shadow( 0 35px 34px rgba(11,30,47,.14) );
        transition: transform .6s cubic-bezier(.2,.8,.2,1);
    }


.pd-gallery:hover .pd-product-image img {
    transform: translateY(-5px) scale(1.025);
}


.pd-image-ring {
    position: absolute;
    border: 1px solid rgba(37,144,232,.10);
    border-radius: 50%;
}


.pd-ring-one {
    width: 390px;
    height: 390px;
}


.pd-ring-two {
    width: 270px;
    height: 270px;
}


.pd-gallery-bottom {
    padding-top: 18px;
    border-top: 1px solid #ebeff3;
}


    .pd-gallery-bottom span {
        color: #1884ff;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: 1.8px;
    }


    .pd-gallery-bottom small {
        color: #9aa6b2;
        font-size: 8px;
    }


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

.pd-info {
    display: flex;
    padding: 48px;
    flex-direction: column;
    border: 1px solid #dfe6ed;
    border-radius: 30px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(7,17,31,.07);
}


.pd-model {
    display: inline-flex;
    margin-bottom: 16px;
    color: #1884ff;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}


.pd-info-head h1 {
    max-width: 620px;
    margin: 0;
    color: #06111f;
    font-size: clamp(44px,4.5vw,66px);
    font-weight: 800;
    line-height: .96;
    letter-spacing: -.055em;
}


.pd-info-head p {
    max-width: 580px;
    margin: 23px 0 0;
    color: #708092;
    font-size: 13px;
    line-height: 1.85;
}


/* =========================================================
   QUICK SPECS
========================================================= */

.pd-quick-info {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    margin-top: 34px;
    border-top: 1px solid #e5ebf0;
    border-left: 1px solid #e5ebf0;
}


    .pd-quick-info > div {
        min-height: 92px;
        padding: 20px;
        border-right: 1px solid #e5ebf0;
        border-bottom: 1px solid #e5ebf0;
    }


    .pd-quick-info span {
        display: block;
        margin-bottom: 8px;
        color: #94a0ac;
        font-size: 7px;
        font-weight: 850;
        letter-spacing: 1.2px;
    }


    .pd-quick-info strong {
        color: #18273a;
        font-size: 13px;
        font-weight: 800;
    }


/* =========================================================
   HELP
========================================================= */

.pd-help-box {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 14px;
    margin-top: 24px;
    padding: 18px;
    border: 1px solid #dfe8ef;
    border-radius: 15px;
    background: #f7fafc;
}


.pd-help-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: #e6f3ff;
    color: #1685e9;
    font-size: 15px;
    font-weight: 850;
}


.pd-help-box strong {
    color: #16263a;
    font-size: 11px;
    font-weight: 800;
}


.pd-help-box p {
    margin: 5px 0 0;
    color: #8492a0;
    font-size: 9px;
    line-height: 1.65;
}


/* =========================================================
   ACTIONS
========================================================= */

.pd-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 24px;
}


.pd-offer-button,
.pd-whatsapp-button {
    display: flex;
    min-height: 72px;
    padding: 0 12px 0 18px;
    align-items: center;
    justify-content: space-between;
    border-radius: 16px;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}


.pd-offer-button {
    background: linear-gradient( 135deg, #0b70d5, #149cff );
    color: #ffffff !important;
    box-shadow: 0 14px 36px rgba(18,133,229,.23);
}


.pd-whatsapp-button {
    border: 1px solid #dfe6ed;
    background: #ffffff;
    color: #142339 !important;
}


    .pd-offer-button > div,
    .pd-whatsapp-button > div {
        display: flex;
        flex-direction: column;
    }


.pd-actions small {
    margin-bottom: 4px;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 1.2px;
}


.pd-offer-button small {
    color: rgba(255,255,255,.65);
}


.pd-whatsapp-button small {
    color: #8d9aa8;
}


.pd-actions strong {
    font-size: 10px;
    font-weight: 800;
}


.pd-actions > a > span {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 11px;
    font-size: 15px;
}


.pd-offer-button > span {
    background: rgba(255,255,255,.13);
}


.pd-whatsapp-button > span {
    background: #edf3f7;
    color: #1685e9;
}


.pd-offer-button:hover,
.pd-whatsapp-button:hover {
    transform: translateY(-3px);
}


.pd-offer-button:hover {
    box-shadow: 0 20px 45px rgba(18,133,229,.32);
}


/* PHONE */

.pd-contact-mini {
    display: flex;
    margin-top: 24px;
    padding-top: 21px;
    gap: 10px;
    align-items: center;
    border-top: 1px solid #e7ecf0;
}


.pd-contact-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #35d984;
    box-shadow: 0 0 10px rgba(53,217,132,.5);
}


.pd-contact-mini > div {
    display: flex;
    flex-direction: column;
}


.pd-contact-mini small {
    color: #9aa6b2;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 1.2px;
}


.pd-contact-mini a {
    margin-top: 3px;
    color: #18273a;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}


/* =========================================================
   DETAILS
========================================================= */

.pd-details {
    padding: 105px 0 30px;
}


.pd-details-header {
    display: grid;
    grid-template-columns: minmax(0,1fr) 380px;
    gap: 70px;
    margin-bottom: 42px;
    align-items: end;
}


    .pd-details-header > div > span {
        display: inline-block;
        margin-bottom: 14px;
        color: #1884ff;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: 1.8px;
    }


    .pd-details-header h2 {
        margin: 0;
        color: #07111f;
        font-size: clamp(40px,4vw,60px);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.05em;
    }


        .pd-details-header h2 em {
            color: #1884ff;
            font-style: normal;
        }


    .pd-details-header > p {
        margin: 0;
        color: #718093;
        font-size: 12px;
        line-height: 1.8;
    }


/* =========================================================
   DETAIL GRID
========================================================= */

.pd-detail-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 17px;
}


.pd-detail-card {
    position: relative;
    min-height: 410px;
    padding: 32px;
    overflow: hidden;
    border: 1px solid #dfe6ed;
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(7,17,31,.045);
}


.pd-card-number {
    position: absolute;
    top: 23px;
    right: 25px;
    color: #d7e0e7;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
}


.pd-card-kicker {
    display: block;
    margin-bottom: 16px;
    color: #1884ff;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1.5px;
}


.pd-detail-card h3 {
    max-width: 300px;
    margin: 0;
    color: #07111f;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -.035em;
}


/* FEATURE LIST */

.pd-feature-list {
    margin-top: 30px;
}


.pd-feature {
    display: grid;
    grid-template-columns: 30px minmax(0,1fr);
    gap: 10px;
    min-height: 54px;
    align-items: center;
    border-top: 1px solid #e7ecf0;
}


    .pd-feature span {
        display: grid;
        width: 27px;
        height: 27px;
        place-items: center;
        border-radius: 50%;
        background: #e7f4ff;
        color: #1685e9;
        font-size: 10px;
        font-weight: 850;
    }


    .pd-feature p {
        margin: 0;
        color: #586a7d;
        font-size: 11px;
    }


/* TECHNICAL */

.pd-tech-list {
    margin-top: 30px;
}


.pd-tech-row {
    display: flex;
    min-height: 55px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid #e7ecf0;
}


    .pd-tech-row span {
        color: #8391a0;
        font-size: 10px;
    }


    .pd-tech-row strong {
        color: #17263a;
        font-size: 10px;
        font-weight: 800;
        text-align: right;
    }


/* SUITABILITY */

.pd-suitability {
    background: radial-gradient( circle at 95% 5%, rgba(37,147,238,.15), transparent 35% ), linear-gradient( 145deg, #071421, #0a2940 );
    border-color: rgba(67,161,236,.18);
}


    .pd-suitability .pd-card-number {
        color: rgba(255,255,255,.08);
    }


    .pd-suitability h3 {
        color: #ffffff;
    }


    .pd-suitability p {
        margin: 30px 0 0;
        color: #879daf;
        font-size: 11px;
        line-height: 1.8;
    }


    .pd-suitability a {
        display: flex;
        margin-top: 30px;
        padding-top: 20px;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid rgba(255,255,255,.08);
        color: #ffffff;
        font-size: 10px;
        font-weight: 800;
        text-decoration: none;
    }


        .pd-suitability a span {
            color: #51b0ff;
            font-size: 16px;
        }


/* =========================================================
   FINAL OFFER
========================================================= */

.pd-final-offer {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) 390px;
    gap: 70px;
    margin-top: 75px;
    padding: 58px;
    align-items: center;
    overflow: hidden;
    border-radius: 28px;
    background: radial-gradient( circle at 85% 10%, rgba(39,151,242,.22), transparent 32% ), linear-gradient( 135deg, #061321, #09283e );
    box-shadow: 0 28px 75px rgba(7,17,31,.16);
}


    .pd-final-offer::before {
        position: absolute;
        inset: 0;
        background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px );
        background-size: 42px 42px;
        content: "";
        opacity: .4;
    }


.pd-final-copy,
.pd-final-actions {
    position: relative;
    z-index: 2;
}


    .pd-final-copy > span {
        display: block;
        margin-bottom: 13px;
        color: #53b1ff;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: 1.8px;
    }


    .pd-final-copy h2 {
        margin: 0;
        color: #ffffff;
        font-size: clamp(40px,4vw,58px);
        font-weight: 800;
        line-height: .98;
        letter-spacing: -.05em;
    }


        .pd-final-copy h2 em {
            display: block;
            color: #5ab3ff;
            font-style: normal;
        }


    .pd-final-copy p {
        max-width: 570px;
        margin: 18px 0 0;
        color: #879daf;
        font-size: 11px;
        line-height: 1.8;
    }


/* FINAL ACTIONS */

.pd-final-actions {
    display: grid;
    gap: 9px;
}


.pd-final-primary,
.pd-final-secondary {
    display: flex;
    min-height: 62px;
    padding: 0 8px 0 18px;
    align-items: center;
    justify-content: space-between;
    border-radius: 14px;
    color: #ffffff !important;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}


.pd-final-primary {
    background: linear-gradient( 135deg, #0b70d5, #159cff );
}


.pd-final-secondary {
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.045);
}


    .pd-final-primary strong,
    .pd-final-secondary strong {
        display: grid;
        width: 44px;
        height: 44px;
        place-items: center;
        border-radius: 11px;
        background: rgba(255,255,255,.10);
        font-size: 15px;
    }


.pd-final-phone {
    display: flex;
    margin-top: 8px;
    padding-top: 17px;
    flex-direction: column;
    border-top: 1px solid rgba(255,255,255,.08);
    text-decoration: none;
}


    .pd-final-phone small {
        color: #607b92;
        font-size: 7px;
        font-weight: 850;
        letter-spacing: 1.5px;
    }


    .pd-final-phone strong {
        margin-top: 4px;
        color: #ffffff;
        font-size: 12px;
        font-weight: 800;
    }


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

@media (max-width: 1050px) {

    .pd-main {
        grid-template-columns: 1fr;
    }


    .pd-gallery {
        min-height: 560px;
    }


    .pd-detail-grid {
        grid-template-columns: 1fr 1fr;
    }


    .pd-suitability {
        grid-column: span 2;
    }


    .pd-final-offer {
        grid-template-columns: 1fr;
        gap: 35px;
    }
}


@media (max-width: 700px) {

    .product-detail-v2 {
        padding: 125px 0 80px;
    }


    .pd-breadcrumb {
        margin-bottom: 15px;
    }


    .pd-gallery {
        min-height: 430px;
        padding: 18px;
        border-radius: 22px;
    }


    .pd-product-image {
        min-height: 330px;
    }


        .pd-product-image img {
            max-width: 90%;
            max-height: 270px;
        }


    .pd-ring-one {
        width: 280px;
        height: 280px;
    }


    .pd-ring-two {
        width: 190px;
        height: 190px;
    }


    .pd-gallery-bottom small {
        display: none;
    }


    .pd-info {
        padding: 31px 22px;
        border-radius: 22px;
    }


    .pd-info-head h1 {
        font-size: 43px;
    }


    .pd-quick-info {
        grid-template-columns: 1fr;
    }


    .pd-actions {
        grid-template-columns: 1fr;
    }


    .pd-details {
        padding-top: 75px;
    }


    .pd-details-header {
        grid-template-columns: 1fr;
        gap: 18px;
    }


        .pd-details-header h2 {
            font-size: 42px;
        }


    .pd-detail-grid {
        grid-template-columns: 1fr;
    }


    .pd-suitability {
        grid-column: auto;
    }


    .pd-detail-card {
        min-height: auto;
        padding: 27px 22px;
    }


    .pd-final-offer {
        margin-top: 55px;
        padding: 40px 23px;
        border-radius: 22px;
    }


    .pd-final-copy h2 {
        font-size: 40px;
    }
}
/* =========================================================
   HOME BLOG SHOWCASE
========================================================= */

.kb-home-blog {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background: radial-gradient( circle at 85% 0%, rgba(26, 139, 236, .08), transparent 25% ), #f3f6fa;
}


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

.kb-home-blog-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 70px;
    margin-bottom: 52px;
    align-items: end;
}


    .kb-home-blog-head h2 {
        max-width: 760px;
        margin: 0;
        color: #07111f;
        font-size: clamp(45px, 5vw, 70px);
        font-weight: 800;
        line-height: .98;
        letter-spacing: -.055em;
    }


        .kb-home-blog-head h2 span {
            display: block;
            color: #1884ff;
        }


.kb-home-blog-head-right {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}


    .kb-home-blog-head-right > p {
        margin: 0 0 19px;
        color: #718093;
        font-size: 13px;
        line-height: 1.85;
    }


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

.kb-home-blog-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr .85fr;
    gap: 18px;
}


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

.kb-home-blog-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid #dfe6ed;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(7,17,31,.055);
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}


    .kb-home-blog-card:hover {
        border-color: rgba(24,132,255,.22);
        box-shadow: 0 28px 70px rgba(7,17,31,.11);
        transform: translateY(-6px);
    }


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

.kb-home-blog-image {
    position: relative;
    display: block;
    height: 285px;
    overflow: hidden;
    background: #e9eef3;
}


.kb-home-blog-featured .kb-home-blog-image {
    height: 340px;
}


.kb-home-blog-image::after {
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, rgba(4,15,26,.01) 35%, rgba(4,15,26,.27) 100% );
    content: "";
    pointer-events: none;
}


.kb-home-blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.82) contrast(1.04) brightness(.91);
    transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .4s ease;
}


.kb-home-blog-card:hover
.kb-home-blog-image img {
    transform: scale(1.055);
    filter: saturate(1) contrast(1.03) brightness(.98);
}


/* CATEGORY */

.kb-home-blog-category {
    position: absolute;
    top: 17px;
    left: 17px;
    z-index: 3;
    display: inline-flex;
    min-height: 31px;
    padding: 0 12px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 999px;
    background: rgba(5,18,31,.66);
    color: #ffffff;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 1.2px;
    backdrop-filter: blur(10px);
}


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

.kb-home-blog-content {
    display: flex;
    min-height: 300px;
    padding: 28px;
    flex: 1;
    flex-direction: column;
}


.kb-home-blog-featured
.kb-home-blog-content {
    padding: 33px;
}


.kb-home-blog-meta {
    display: flex;
    gap: 9px;
    align-items: center;
    color: #8b98a5;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .8px;
}


    .kb-home-blog-meta i {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #1884ff;
    }


.kb-home-blog-content h3 {
    margin: 17px 0 0;
    line-height: 1;
}


    .kb-home-blog-content h3 a {
        color: #07111f;
        font-size: 27px;
        font-weight: 800;
        line-height: 1.08;
        letter-spacing: -.04em;
        text-decoration: none;
    }


.kb-home-blog-featured
.kb-home-blog-content h3 a {
    font-size: clamp(32px, 3vw, 43px);
}


.kb-home-blog-content > p {
    margin: 16px 0 25px;
    color: #718093;
    font-size: 11px;
    line-height: 1.8;
}


/* =========================================================
   READ
========================================================= */

.kb-home-blog-read {
    display: flex;
    margin-top: auto;
    padding-top: 18px;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #e7ecf0;
    color: #17263a;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}


    .kb-home-blog-read strong {
        color: #1884ff;
        font-size: 15px;
        transition: transform .25s ease;
    }


    .kb-home-blog-read:hover strong {
        transform: translate(2px,-2px);
    }


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

.kb-home-blog-bottom {
    display: flex;
    margin-top: 35px;
    padding-top: 29px;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #dfe6ed;
}


    .kb-home-blog-bottom > div {
        display: flex;
        flex-direction: column;
    }


        .kb-home-blog-bottom > div span {
            margin-bottom: 6px;
            color: #1884ff;
            font-size: 8px;
            font-weight: 850;
            letter-spacing: 1.8px;
        }


        .kb-home-blog-bottom > div strong {
            color: #17263a;
            font-size: 13px;
            font-weight: 750;
        }


    .kb-home-blog-bottom > a {
        display: inline-flex;
        gap: 12px;
        align-items: center;
        color: #27374a;
        font-size: 10px;
        font-weight: 800;
        text-decoration: none;
    }


        .kb-home-blog-bottom > a span {
            color: #1884ff;
            font-size: 15px;
            transition: transform .25s ease;
        }


        .kb-home-blog-bottom > a:hover span {
            transform: translateX(4px);
        }


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

@media (max-width: 1050px) {

    .kb-home-blog-head {
        grid-template-columns: 1fr;
        gap: 22px;
    }


    .kb-home-blog-grid {
        grid-template-columns: 1fr 1fr;
    }


    .kb-home-blog-featured {
        grid-column: span 2;
    }


        .kb-home-blog-featured
        .kb-home-blog-image {
            height: 420px;
        }
}


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

@media (max-width: 700px) {

    .kb-home-blog {
        padding: 80px 0;
    }


    .kb-home-blog-head h2 {
        font-size: 43px;
    }


    .kb-home-blog-grid {
        grid-template-columns: 1fr;
    }


    .kb-home-blog-featured {
        grid-column: auto;
    }


        .kb-home-blog-image,
        .kb-home-blog-featured
        .kb-home-blog-image {
            height: 270px;
        }


        .kb-home-blog-content,
        .kb-home-blog-featured
        .kb-home-blog-content {
            min-height: auto;
            padding: 25px 22px;
        }


            .kb-home-blog-content h3 a,
            .kb-home-blog-featured
            .kb-home-blog-content h3 a {
                font-size: 27px;
            }


    .kb-home-blog-bottom {
        gap: 22px;
        align-items: flex-start;
        flex-direction: column;
    }
}
/* =========================================================
   CONTACT LOCATION
========================================================= */

.contact-location-section {
    position: relative;
    padding: 110px 0 130px;
    overflow: hidden;
    background: radial-gradient( circle at 82% 5%, rgba(28, 142, 238, .08), transparent 26% ), #f3f6fa;
}


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

.contact-location-head {
    display: grid;
    grid-template-columns: minmax(0,1fr) 420px;
    gap: 70px;
    margin-bottom: 48px;
    align-items: end;
}


    .contact-location-head h2 {
        max-width: 760px;
        margin: 0;
        color: #07111f;
        font-size: clamp(44px,5vw,68px);
        font-weight: 800;
        line-height: .98;
        letter-spacing: -.055em;
    }


        .contact-location-head h2 span {
            display: block;
            color: #1884ff;
        }


    .contact-location-head > p {
        margin: 0;
        color: #718093;
        font-size: 13px;
        line-height: 1.85;
    }


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

.contact-location-grid {
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(360px,.75fr);
    gap: 18px;
}


/* =========================================================
   MAP
========================================================= */

.contact-map-card {
    position: relative;
    min-height: 570px;
    overflow: hidden;
    border: 1px solid #dfe6ed;
    border-radius: 28px;
    background: #e8edf2;
    box-shadow: 0 22px 65px rgba(7,17,31,.08);
}


    .contact-map-card iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        filter: saturate(.72) contrast(1.03);
    }


/* MAP BADGE */

.contact-map-badge {
    position: absolute;
    bottom: 22px;
    left: 22px;
    z-index: 4;
    display: flex;
    min-width: 210px;
    padding: 15px 17px;
    gap: 11px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 15px;
    background: rgba(5,20,34,.88);
    box-shadow: 0 15px 40px rgba(0,0,0,.20);
    backdrop-filter: blur(16px);
}


.contact-map-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #43adff;
    box-shadow: 0 0 12px rgba(67,173,255,.8);
}


.contact-map-badge > div {
    display: flex;
    flex-direction: column;
}


.contact-map-badge small {
    margin-bottom: 3px;
    color: #6b8295;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 1.4px;
}


.contact-map-badge strong {
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}


/* =========================================================
   LOCATION PANEL
========================================================= */

.contact-location-panel {
    position: relative;
    padding: 42px;
    overflow: hidden;
    border-radius: 28px;
    background: radial-gradient( circle at 100% 0%, rgba(40,154,247,.18), transparent 35% ), linear-gradient( 145deg, #061321, #09283e );
    box-shadow: 0 25px 70px rgba(7,17,31,.16);
}


    .contact-location-panel::before {
        position: absolute;
        inset: 0;
        background-image: linear-gradient( rgba(255,255,255,.023) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.023) 1px, transparent 1px );
        background-size: 42px 42px;
        content: "";
        opacity: .4;
        pointer-events: none;
    }


    .contact-location-panel > * {
        position: relative;
        z-index: 2;
    }


.contact-location-kicker {
    display: block;
    margin-bottom: 15px;
    color: #51afff;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1.8px;
}


.contact-location-panel h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(34px,3.2vw,48px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.045em;
}


    .contact-location-panel h3 span {
        display: block;
        color: #5cb3ff;
    }


.contact-location-panel > p {
    margin: 20px 0 0;
    color: #879caf;
    font-size: 11px;
    line-height: 1.8;
}


/* =========================================================
   ACTIONS
========================================================= */

.contact-location-actions {
    display: grid;
    gap: 9px;
    margin-top: 30px;
}


.contact-location-action {
    display: flex;
    min-height: 70px;
    padding: 0 11px 0 17px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 15px;
    background: rgba(255,255,255,.045);
    color: #ffffff !important;
    text-decoration: none;
    transition: transform .3s ease, background .3s ease, border-color .3s ease;
}


    .contact-location-action > div {
        display: flex;
        flex-direction: column;
    }


    .contact-location-action small {
        margin-bottom: 4px;
        color: #607b91;
        font-size: 7px;
        font-weight: 850;
        letter-spacing: 1.4px;
    }


    .contact-location-action strong {
        font-size: 11px;
        font-weight: 800;
    }


    .contact-location-action > span {
        display: grid;
        width: 40px;
        height: 40px;
        place-items: center;
        border-radius: 11px;
        background: rgba(255,255,255,.07);
        color: #59b4ff;
        font-size: 15px;
        transition: transform .25s ease;
    }


.contact-location-whatsapp > span {
    color: #42dc7a;
}


.contact-location-action:hover {
    border-color: rgba(76,174,255,.22);
    background: rgba(255,255,255,.065);
    transform: translateY(-3px);
}


    .contact-location-action:hover > span {
        transform: translate(2px,-2px);
    }


/* =========================================================
   AREAS
========================================================= */

.contact-service-areas {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,.08);
}


    .contact-service-areas > span {
        display: block;
        margin-bottom: 13px;
        color: #5d778d;
        font-size: 7px;
        font-weight: 850;
        letter-spacing: 1.5px;
    }


    .contact-service-areas > div {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
    }


    .contact-service-areas strong {
        display: inline-flex;
        min-height: 31px;
        padding: 0 11px;
        align-items: center;
        border: 1px solid rgba(255,255,255,.075);
        border-radius: 999px;
        background: rgba(255,255,255,.035);
        color: #a8bac9;
        font-size: 8px;
        font-weight: 700;
    }


/* =========================================================
   NOTE
========================================================= */

.contact-location-note {
    display: grid;
    grid-template-columns: 26px minmax(0,1fr);
    gap: 10px;
    margin-top: 26px;
    padding-top: 22px;
    align-items: start;
    border-top: 1px solid rgba(255,255,255,.08);
}


    .contact-location-note > span {
        display: grid;
        width: 25px;
        height: 25px;
        place-items: center;
        border: 1px solid rgba(77,174,255,.2);
        border-radius: 50%;
        color: #4eafff;
        font-size: 9px;
        font-weight: 850;
    }


    .contact-location-note p {
        margin: 0;
        color: #647d91;
        font-size: 8px;
        line-height: 1.7;
    }


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

@media (max-width: 1000px) {

    .contact-location-head {
        grid-template-columns: 1fr;
        gap: 20px;
    }


    .contact-location-grid {
        grid-template-columns: 1fr;
    }


    .contact-map-card {
        min-height: 480px;
    }
}


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

@media (max-width: 700px) {

    .contact-location-section {
        padding: 75px 0 90px;
    }


    .contact-location-head h2 {
        font-size: 42px;
    }


    .contact-map-card {
        min-height: 380px;
        border-radius: 21px;
    }


    .contact-map-badge {
        right: 14px;
        bottom: 14px;
        left: 14px;
        min-width: 0;
    }


    .contact-location-panel {
        padding: 34px 23px;
        border-radius: 21px;
    }


        .contact-location-panel h3 {
            font-size: 38px;
        }
}
/* =========================================================
   PRODUCTS PAGE V2
========================================================= */

.products-page-v2 {
    position: relative;
    padding: 180px 0 80px;
    overflow: hidden;
    background: radial-gradient( circle at 82% 15%, rgba(25, 142, 239, .17), transparent 30% ), linear-gradient( 135deg, #061321 0%, #082137 60%, #0a344b 100% );
    color: #ffffff;
}


    /* GRID EFFECT */

    .products-page-v2::before {
        position: absolute;
        inset: 0;
        background-image: linear-gradient( rgba(255,255,255,.022) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.022) 1px, transparent 1px );
        background-size: 48px 48px;
        content: "";
        opacity: .5;
        pointer-events: none;
    }


    .products-page-v2 .page-shell {
        position: relative;
        z-index: 2;
    }


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

.products-hero-v2 {
    display: grid;
    grid-template-columns: minmax(0,1fr) 210px;
    gap: 60px;
    align-items: end;
}


.products-hero-v2-copy {
    max-width: 850px;
}


    .products-hero-v2-copy .page-kicker {
        color: #52b0ff;
    }


    .products-hero-v2-copy h1 {
        margin: 0;
        color: #ffffff;
        font-size: clamp(55px, 7vw, 90px);
        font-weight: 800;
        line-height: .93;
        letter-spacing: -.065em;
    }


        .products-hero-v2-copy h1 span {
            display: block;
            color: #5eb5ff;
        }


    .products-hero-v2-copy p {
        max-width: 650px;
        margin: 27px 0 0;
        color: #8ca1b4;
        font-size: 14px;
        line-height: 1.85;
    }


/* HERO COUNT */

.products-hero-v2-info {
    display: flex;
    padding-left: 25px;
    flex-direction: column;
    border-left: 1px solid rgba(255,255,255,.11);
}


    .products-hero-v2-info > span {
        color: #607c94;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: 1.7px;
    }


    .products-hero-v2-info strong {
        margin-top: 8px;
        color: #ffffff;
        font-size: 58px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.06em;
    }


    .products-hero-v2-info small {
        margin-top: 4px;
        color: #778da0;
        font-size: 9px;
    }


/* =========================================================
   CONTROLS
========================================================= */

.products-control-section {
    position: relative;
    z-index: 4;
    padding: 32px 0 0;
    background: #f3f6fa;
}


.products-control-panel {
    padding: 18px;
    border: 1px solid #dfe6ed;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 18px 55px rgba(7,17,31,.07);
}


/* =========================================================
   SEARCH
========================================================= */

.products-search-v2 {
    position: relative;
    display: flex;
    min-height: 65px;
    align-items: center;
    border: 1px solid #dfe6ed;
    border-radius: 16px;
    background: #f7f9fb;
    overflow: hidden;
}


.products-search-icon {
    display: grid;
    width: 58px;
    place-items: center;
    color: #1884ff;
    font-size: 22px;
}


.products-search-v2 input {
    min-width: 0;
    flex: 1;
    height: 63px;
    padding: 0 15px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #16263a;
    font-size: 12px;
    font-weight: 600;
}


    .products-search-v2 input::placeholder {
        color: #9aa5b1;
    }


.products-search-v2 button {
    display: flex;
    min-width: 125px;
    height: 49px;
    margin-right: 7px;
    padding: 0 10px 0 18px;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-radius: 12px;
    background: linear-gradient( 135deg, #0d70d4, #159cff );
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(20,143,235,.20);
    transition: transform .25s ease, box-shadow .25s ease;
}


    .products-search-v2 button span {
        font-size: 14px;
    }


    .products-search-v2 button:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 32px rgba(20,143,235,.30);
    }


.products-search-clear {
    display: grid;
    width: 36px;
    height: 36px;
    margin-right: 6px;
    place-items: center;
    border-radius: 50%;
    background: #e9eef3;
    color: #697a8d;
    font-size: 18px;
    text-decoration: none;
}


/* =========================================================
   FILTER
========================================================= */

.products-filter-v2 {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 8px;
    margin-top: 12px;
}


.product-filter-v2 {
    position: relative;
    display: flex;
    min-height: 64px;
    padding: 0 15px;
    gap: 10px;
    align-items: center;
    overflow: hidden;
    border: 1px solid #e2e8ee;
    border-radius: 13px;
    background: #ffffff;
    color: #536477;
    text-decoration: none;
    transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease;
}


    .product-filter-v2::before {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2px;
        background: linear-gradient( 90deg, transparent, #1884ff, transparent );
        content: "";
        opacity: 0;
        transition: opacity .25s ease;
    }


.product-filter-number {
    color: #a2adb8;
    font-size: 7px;
    font-weight: 850;
}


.product-filter-v2 strong {
    font-size: 9px;
    font-weight: 800;
}


.product-filter-v2:hover {
    border-color: rgba(24,132,255,.24);
    color: #13263b;
    transform: translateY(-2px);
}


.product-filter-v2.active {
    border-color: rgba(24,132,255,.25);
    background: linear-gradient( 135deg, #071522, #0a2e47 );
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(7,17,31,.13);
}


    .product-filter-v2.active::before {
        opacity: 1;
    }


    .product-filter-v2.active
    .product-filter-number {
        color: #55b3ff;
    }


/* =========================================================
   ACTIVE FILTER ROW
========================================================= */

.products-active-row {
    display: flex;
    min-height: 90px;
    padding: 27px 3px 20px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #dfe5eb;
}


    .products-active-row > div:first-child {
        display: flex;
        align-items: baseline;
        gap: 12px;
    }


        .products-active-row > div:first-child > span {
            color: #9aa5b0;
            font-size: 7px;
            font-weight: 850;
            letter-spacing: 1.5px;
        }


        .products-active-row > div:first-child > strong {
            color: #17263a;
            font-size: 18px;
            font-weight: 800;
        }


        .products-active-row > div:first-child > small {
            color: #1884ff;
            font-size: 9px;
            font-weight: 700;
        }


.products-result-count {
    display: flex;
    gap: 6px;
    align-items: baseline;
}


    .products-result-count strong {
        color: #1884ff;
        font-size: 28px;
        font-weight: 800;
        letter-spacing: -.04em;
    }


    .products-result-count span {
        color: #8492a1;
        font-size: 9px;
    }


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

.products-list-section {
    padding: 35px 0 115px;
    background: #f3f6fa;
}


.products-grid-v2 {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
}


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

.product-card-v2 {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dfe6ed;
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 14px 42px rgba(7,17,31,.05);
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}


    .product-card-v2:hover {
        border-color: rgba(24,132,255,.25);
        box-shadow: 0 27px 70px rgba(7,17,31,.10);
        transform: translateY(-7px);
    }


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

.product-card-v2-image {
    position: relative;
    display: flex;
    height: 315px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient( circle at 50% 47%, rgba(34,148,239,.095), transparent 38% ), #f8fafc;
}


.product-image-halo {
    position: absolute;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(24,132,255,.10);
    border-radius: 50%;
    transition: transform .5s ease;
}


    .product-image-halo::after {
        position: absolute;
        inset: 25px;
        border: 1px solid rgba(24,132,255,.08);
        border-radius: 50%;
        content: "";
    }


.product-card-v2-image img {
    position: relative;
    z-index: 2;
    max-width: 78%;
    max-height: 220px;
    object-fit: contain;
    filter: drop-shadow( 0 26px 24px rgba(7,22,36,.12) );
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
}


.product-card-v2:hover
.product-card-v2-image img {
    transform: translateY(-5px) scale(1.045);
}


.product-card-v2:hover
.product-image-halo {
    transform: scale(1.08);
}


/* CATEGORY */

.product-card-v2-category {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 4;
}


    .product-card-v2-category span {
        display: inline-flex;
        min-height: 29px;
        padding: 0 11px;
        align-items: center;
        border: 1px solid #dee6ed;
        border-radius: 999px;
        background: rgba(255,255,255,.88);
        color: #708195;
        font-size: 7px;
        font-weight: 850;
        letter-spacing: .9px;
        backdrop-filter: blur(8px);
    }


/* FEATURED */

.product-featured-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
    display: inline-flex;
    min-height: 29px;
    padding: 0 10px;
    align-items: center;
    border-radius: 999px;
    background: #e7f4ff;
    color: #1884ff;
    font-size: 6px;
    font-weight: 850;
    letter-spacing: 1px;
}


/* ARROW */

.product-card-v2-arrow {
    position: absolute;
    right: 17px;
    bottom: 17px;
    z-index: 4;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #e1e7ed;
    border-radius: 12px;
    background: #ffffff;
    color: #1884ff;
    font-size: 15px;
    box-shadow: 0 8px 22px rgba(7,17,31,.08);
    transition: transform .3s ease, background .3s ease, color .3s ease;
}


.product-card-v2:hover
.product-card-v2-arrow {
    background: #1884ff;
    color: #ffffff;
    transform: translate(2px,-2px);
}


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

.product-card-v2-content {
    display: flex;
    min-height: 340px;
    padding: 27px;
    flex-direction: column;
}


.product-card-v2-model {
    color: #1884ff;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}


.product-card-v2-content h3 {
    margin: 13px 0 0;
}


    .product-card-v2-content h3 a {
        color: #07111f;
        font-size: 25px;
        font-weight: 800;
        line-height: 1.07;
        letter-spacing: -.035em;
        text-decoration: none;
    }


.product-card-v2-content > p {
    margin: 14px 0 22px;
    color: #718093;
    font-size: 10px;
    line-height: 1.75;
}


/* =========================================================
   SPECS
========================================================= */

.product-card-v2-specs {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    margin-top: auto;
    border-top: 1px solid #e7ecf0;
    border-left: 1px solid #e7ecf0;
}


    .product-card-v2-specs > div {
        min-width: 0;
        min-height: 64px;
        padding: 12px;
        border-right: 1px solid #e7ecf0;
        border-bottom: 1px solid #e7ecf0;
    }


    .product-card-v2-specs span {
        display: block;
        margin-bottom: 5px;
        color: #9aa5b0;
        font-size: 6px;
        font-weight: 850;
        letter-spacing: .8px;
    }


    .product-card-v2-specs strong {
        display: block;
        color: #26384c;
        font-size: 8px;
        font-weight: 800;
        line-height: 1.4;
    }


/* =========================================================
   CARD ACTIONS
========================================================= */

.product-card-v2-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 18px;
}


.product-card-v2-detail,
.product-card-v2-offer {
    display: flex;
    min-height: 47px;
    align-items: center;
    border-radius: 11px;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}


.product-card-v2-detail {
    padding: 0 10px 0 15px;
    justify-content: space-between;
    background: #071522;
    color: #ffffff !important;
}


    .product-card-v2-detail span {
        color: #58b3ff;
        font-size: 14px;
        transition: transform .25s ease;
    }


    .product-card-v2-detail:hover span {
        transform: translate(2px,-2px);
    }


.product-card-v2-offer {
    padding: 0 15px;
    justify-content: center;
    border: 1px solid #dfe6ed;
    color: #1884ff !important;
    background: #ffffff;
}


/* =========================================================
   EMPTY
========================================================= */

.products-empty-v2 {
    display: flex;
    min-height: 480px;
    padding: 50px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px dashed #cfdae3;
    border-radius: 25px;
    background: #ffffff;
    text-align: center;
}


.products-empty-icon {
    display: grid;
    width: 60px;
    height: 60px;
    margin-bottom: 25px;
    place-items: center;
    border-radius: 18px;
    background: #e9f4ff;
    color: #1884ff;
    font-size: 27px;
}


.products-empty-v2 > span {
    color: #1884ff;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1.8px;
}


.products-empty-v2 h2 {
    max-width: 620px;
    margin: 15px 0 0;
    color: #07111f;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.045em;
}


    .products-empty-v2 h2 strong {
        color: #1884ff;
    }


.products-empty-v2 p {
    max-width: 500px;
    margin: 18px 0 25px;
    color: #798898;
    font-size: 11px;
    line-height: 1.8;
}


.products-empty-v2 > a {
    display: inline-flex;
    min-height: 48px;
    padding: 0 17px;
    gap: 18px;
    align-items: center;
    border-radius: 12px;
    background: #071522;
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}


/* =========================================================
   HELP
========================================================= */

.products-help-v2 {
    padding: 0 0 120px;
    background: #f3f6fa;
}


.products-help-v2-card {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 50px;
    padding: 50px;
    align-items: center;
    overflow: hidden;
    border-radius: 25px;
    background: radial-gradient( circle at 90% 5%, rgba(45,158,247,.22), transparent 34% ), linear-gradient( 135deg, #061321, #09283f );
    box-shadow: 0 25px 70px rgba(7,17,31,.15);
}


    .products-help-v2-card > div:first-child > span {
        display: block;
        margin-bottom: 12px;
        color: #52afff;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: 1.7px;
    }


    .products-help-v2-card h2 {
        margin: 0;
        color: #ffffff;
        font-size: clamp(35px,4vw,52px);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.05em;
    }


        .products-help-v2-card h2 strong {
            color: #5cb3ff;
        }


    .products-help-v2-card p {
        max-width: 580px;
        margin: 17px 0 0;
        color: #879caf;
        font-size: 11px;
        line-height: 1.8;
    }


.products-help-v2-actions {
    display: flex;
    gap: 9px;
}


.products-help-primary,
.products-help-secondary {
    display: flex;
    min-height: 55px;
    padding: 0 17px;
    gap: 18px;
    align-items: center;
    border-radius: 13px;
    color: #ffffff !important;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}


.products-help-primary {
    background: linear-gradient( 135deg, #0d70d5, #159cff );
}


.products-help-secondary {
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.045);
}


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

@media (max-width: 1050px) {

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


    .products-hero-v2-info {
        max-width: 220px;
    }


    .products-filter-v2 {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }


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


    .products-help-v2-card {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}


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

@media (max-width: 700px) {

    .products-page-v2 {
        padding: 135px 0 65px;
    }


    .products-hero-v2-copy h1 {
        font-size: 50px;
    }


    .products-hero-v2-info strong {
        font-size: 48px;
    }


    .products-control-section {
        padding-top: 18px;
    }


    .products-control-panel {
        padding: 11px;
        border-radius: 17px;
    }


    .products-search-v2 {
        min-height: 58px;
    }


    .products-search-icon {
        width: 45px;
    }


    .products-search-v2 input {
        height: 56px;
        padding: 0 8px;
        font-size: 11px;
    }


    .products-search-v2 button {
        min-width: 78px;
        height: 44px;
        padding: 0 12px;
        gap: 7px;
    }


    .products-filter-v2 {
        display: flex;
        padding-bottom: 3px;
        overflow-x: auto;
        scrollbar-width: none;
    }


        .products-filter-v2::-webkit-scrollbar {
            display: none;
        }


    .product-filter-v2 {
        min-width: 135px;
    }


    .products-active-row {
        gap: 15px;
        align-items: flex-start;
        flex-direction: column;
    }


        .products-active-row > div:first-child {
            align-items: flex-start;
            flex-direction: column;
            gap: 4px;
        }


    .products-list-section {
        padding-bottom: 80px;
    }


    .products-grid-v2 {
        grid-template-columns: 1fr;
    }


    .product-card-v2-image {
        height: 285px;
    }


    .product-card-v2-content {
        min-height: auto;
        padding: 24px 21px;
    }


        .product-card-v2-content h3 a {
            font-size: 24px;
        }


    .product-card-v2-specs {
        grid-template-columns: 1fr;
    }


    .product-card-v2-actions {
        grid-template-columns: 1fr 100px;
    }


    .products-help-v2 {
        padding-bottom: 90px;
    }


    .products-help-v2-card {
        padding: 38px 23px;
        border-radius: 21px;
    }


        .products-help-v2-card h2 {
            font-size: 39px;
        }


    .products-help-v2-actions {
        align-items: stretch;
        flex-direction: column;
    }


    .products-help-primary,
    .products-help-secondary {
        justify-content: space-between;
    }
}
/* =========================================================
   BTU PRODUCT RECOMMENDATIONS
========================================================= */

.btu-products-section {
    position: relative;
    padding: 115px 0 125px;
    background: radial-gradient( circle at 84% 5%, rgba(28,142,238,.08), transparent 26% ), #f3f6fa;
}


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

.btu-products-head {
    display: grid;
    grid-template-columns: minmax(0,1fr) 210px;
    gap: 70px;
    margin-bottom: 45px;
    align-items: end;
}


    .btu-products-head h2 {
        max-width: 760px;
        margin: 0;
        color: #07111f;
        font-size: clamp(44px,5vw,68px);
        font-weight: 800;
        line-height: .98;
        letter-spacing: -.055em;
    }


        .btu-products-head h2 span {
            display: block;
            color: #1884ff;
        }


/* RESULT */

.btu-products-result-info {
    display: flex;
    padding-left: 22px;
    flex-direction: column;
    border-left: 1px solid #dce4eb;
}


    .btu-products-result-info small {
        color: #93a0ac;
        font-size: 7px;
        font-weight: 850;
        letter-spacing: 1.5px;
    }


    .btu-products-result-info strong {
        margin-top: 7px;
        color: #1884ff;
        font-size: 34px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.045em;
    }


    .btu-products-result-info span {
        margin-top: 3px;
        color: #8492a0;
        font-size: 8px;
    }


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

.btu-products-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
}


/* TÜM KARTLAR DEFAULT GİZLİ */

.btu-product-card {
    display: none;
    overflow: hidden;
    border: 1px solid #dfe6ed;
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(7,17,31,.055);
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}


    /* JS UYGUN OLANLARI AÇAR */

    .btu-product-card.is-btu-visible {
        display: flex;
        flex-direction: column;
        animation: btuProductIn .55s cubic-bezier(.2,.8,.2,1) both;
    }


@keyframes btuProductIn {

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

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


.btu-product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(24,132,255,.23);
    box-shadow: 0 27px 70px rgba(7,17,31,.10);
}


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

.btu-product-image {
    position: relative;
    display: flex;
    height: 300px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient( circle at 50% 45%, rgba(38,148,239,.10), transparent 40% ), #f8fafc;
}


    .btu-product-image img {
        position: relative;
        z-index: 2;
        max-width: 78%;
        max-height: 210px;
        object-fit: contain;
        filter: drop-shadow( 0 25px 25px rgba(8,25,41,.12) );
        transition: transform .6s cubic-bezier(.2,.8,.2,1);
    }


.btu-product-card:hover
.btu-product-image img {
    transform: translateY(-5px) scale(1.045);
}


.btu-product-halo {
    position: absolute;
    width: 205px;
    height: 205px;
    border: 1px solid rgba(24,132,255,.10);
    border-radius: 50%;
}


    .btu-product-halo::after {
        position: absolute;
        inset: 27px;
        border: 1px solid rgba(24,132,255,.07);
        border-radius: 50%;
        content: "";
    }


/* CATEGORY */

.btu-product-category {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 4;
}


    .btu-product-category span {
        display: inline-flex;
        min-height: 29px;
        padding: 0 11px;
        align-items: center;
        border: 1px solid #dfe6ed;
        border-radius: 999px;
        background: rgba(255,255,255,.88);
        color: #728296;
        font-size: 7px;
        font-weight: 850;
        letter-spacing: .9px;
    }


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

.btu-product-content {
    display: flex;
    min-height: 300px;
    padding: 27px;
    flex: 1;
    flex-direction: column;
}


.btu-product-model {
    color: #1884ff;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}


.btu-product-content h3 {
    margin: 13px 0 0;
    color: #07111f;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.035em;
}


.btu-product-content > p {
    margin: 14px 0 22px;
    color: #718093;
    font-size: 10px;
    line-height: 1.75;
}


/* =========================================================
   SPECS
========================================================= */

.btu-product-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: auto;
    border-top: 1px solid #e7ecf0;
    border-left: 1px solid #e7ecf0;
}


    .btu-product-specs > div {
        min-height: 62px;
        padding: 12px;
        border-right: 1px solid #e7ecf0;
        border-bottom: 1px solid #e7ecf0;
    }


    .btu-product-specs span {
        display: block;
        margin-bottom: 5px;
        color: #99a5b0;
        font-size: 6px;
        font-weight: 850;
        letter-spacing: .8px;
    }


    .btu-product-specs strong {
        color: #26384c;
        font-size: 8px;
        font-weight: 800;
    }


/* =========================================================
   ACTIONS
========================================================= */

.btu-product-actions {
    display: grid;
    grid-template-columns: 1fr 90px;
    gap: 8px;
    margin-top: 17px;
}


    .btu-product-actions > a {
        display: flex;
        min-height: 46px;
        padding: 0 13px;
        align-items: center;
        justify-content: space-between;
        border-radius: 11px;
        font-size: 8px;
        font-weight: 800;
        text-decoration: none;
    }


        .btu-product-actions > a:first-child {
            background: #071522;
            color: #ffffff;
        }


            .btu-product-actions > a:first-child span {
                color: #54b2ff;
                font-size: 14px;
            }


        .btu-product-actions > a:last-child {
            justify-content: center;
            border: 1px solid #dfe6ed;
            color: #1884ff;
            background: #ffffff;
        }


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

.btu-products-bottom {
    display: flex;
    margin-top: 34px;
    padding-top: 28px;
    gap: 35px;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #dfe6ed;
}


    .btu-products-bottom p {
        max-width: 670px;
        margin: 0;
        color: #8492a0;
        font-size: 9px;
        line-height: 1.7;
    }


    .btu-products-bottom a {
        display: inline-flex;
        gap: 14px;
        align-items: center;
        color: #17263a;
        font-size: 9px;
        font-weight: 800;
        text-decoration: none;
    }


        .btu-products-bottom a span {
            color: #1884ff;
            font-size: 14px;
        }


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

@media (max-width: 1000px) {

    .btu-products-head {
        grid-template-columns: 1fr;
        gap: 25px;
    }


    .btu-products-result-info {
        max-width: 220px;
    }


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


    .btu-product-card.is-btu-visible:nth-child(3) {
        /* JS'nin seçtiği üçüncü kart yine görünür */
    }
}


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

@media (max-width: 700px) {

    .btu-products-section {
        padding: 80px 0;
    }


    .btu-products-head h2 {
        font-size: 42px;
    }


    .btu-products-grid {
        grid-template-columns: 1fr;
    }


    .btu-product-image {
        height: 270px;
    }


    .btu-product-content {
        min-height: auto;
        padding: 24px 21px;
    }


    .btu-products-bottom {
        gap: 18px;
        align-items: flex-start;
        flex-direction: column;
    }
}
/* =========================================================
   404 PAGE
========================================================= */

.kb-404 {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: radial-gradient( circle at 78% 25%, rgba(29,145,245,.18), transparent 32% ), linear-gradient( 135deg, #061321, #09283e );
}

.kb-404-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px );
    background-size: 50px 50px;
    opacity: .5;
}

.kb-404 .kb-shell {
    position: relative;
    z-index: 2;
}

.kb-404-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 480px;
    gap: 80px;
    align-items: center;
}

.kb-404-kicker {
    display: inline-flex;
    margin-bottom: 20px;
    color: #54b2ff;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 2px;
}

.kb-404-copy h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(58px,7vw,96px);
    font-weight: 800;
    line-height: .92;
    letter-spacing: -.065em;
}

    .kb-404-copy h1 em {
        display: block;
        color: #5cb3ff;
        font-style: normal;
    }

.kb-404-copy p {
    max-width: 560px;
    margin: 28px 0 0;
    color: #8499ac;
    font-size: 14px;
    line-height: 1.9;
}

.kb-404-actions {
    display: flex;
    gap: 10px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.kb-404-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255,255,255,.09);
    font-size: 135px;
    font-weight: 900;
    letter-spacing: -.08em;
}

.kb-404-core {
    display: grid;
    width: 165px;
    height: 165px;
    place-items: center;
    border: 1px solid rgba(84,178,255,.20);
    border-radius: 50%;
    background: radial-gradient( circle, rgba(49,157,245,.20), rgba(7,20,34,.35) 58%, transparent 60% );
    box-shadow: 0 0 80px rgba(27,140,233,.13);
}

    .kb-404-core::before,
    .kb-404-core::after {
        position: absolute;
        border: 1px solid rgba(84,178,255,.10);
        border-radius: 50%;
        content: "";
    }

    .kb-404-core::before {
        width: 250px;
        height: 250px;
    }

    .kb-404-core::after {
        width: 330px;
        height: 330px;
    }

    .kb-404-core strong {
        position: relative;
        z-index: 3;
        color: #ffffff;
        font-size: 85px;
        font-weight: 800;
    }

@media (max-width: 900px) {

    .kb-404 {
        padding: 140px 0 90px;
    }

    .kb-404-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .kb-404-visual {
        font-size: 100px;
    }
}

@media (max-width: 600px) {

    .kb-404-copy h1 {
        font-size: 52px;
    }

    .kb-404-visual {
        font-size: 72px;
    }

    .kb-404-core {
        width: 120px;
        height: 120px;
    }

        .kb-404-core strong {
            font-size: 62px;
        }

    .kb-404-actions {
        flex-direction: column;
    }
}
/* =========================================================
   CONTACT FORM STATUS
========================================================= */

.contact-form-alert {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr);
    gap: 14px;
    max-width: 1280px;
    margin: 25px auto;
    padding: 17px 20px;
    align-items: center;
    border-radius: 15px;
}


.contact-form-alert-error {
    border: 1px solid rgba(232,82,82,.18);
    background: rgba(232,82,82,.07);
}


.contact-form-alert-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 12px;
    background: rgba(232,82,82,.12);
    color: #d94242;
    font-size: 17px;
    font-weight: 900;
}


.contact-form-alert strong {
    display: block;
    color: #18263a;
    font-size: 11px;
    font-weight: 800;
}


.contact-form-alert p {
    margin: 4px 0 0;
    color: #7b8794;
    font-size: 10px;
}


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

.contact-selected-product {
    display: flex;
    margin-top: 20px;
    padding: 15px 17px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid rgba(24,132,255,.15);
    border-radius: 13px;
    background: rgba(24,132,255,.055);
}


    .contact-selected-product span {
        color: #1884ff;
        font-size: 7px;
        font-weight: 850;
        letter-spacing: 1.3px;
    }


    .contact-selected-product strong {
        color: #17263a;
        font-size: 10px;
        font-weight: 800;
        text-align: right;
    }


/* =========================================================
   SUCCESS OVERLAY
========================================================= */

.contact-status-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999999;
    display: grid;
    padding: 25px;
    place-items: center;
    background: rgba(2,10,18,.76);
    backdrop-filter: blur(16px);
    animation: contactOverlayIn .35s ease both;
}


@keyframes contactOverlayIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* =========================================================
   SUCCESS CARD
========================================================= */

.contact-status-card {
    position: relative;
    width: min(100%, 530px);
    padding: 52px 45px 42px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 27px;
    background: radial-gradient( circle at 85% 5%, rgba(33,153,247,.22), transparent 35% ), linear-gradient( 145deg, #061321, #092a42 );
    box-shadow: 0 40px 100px rgba(0,0,0,.35);
    text-align: center;
    animation: contactCardIn .5s cubic-bezier(.2,.8,.2,1) both;
}


@keyframes contactCardIn {

    from {
        opacity: 0;
        transform: translateY(20px) scale(.97);
    }

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


/* CLOSE */

.contact-status-close {
    position: absolute;
    top: 17px;
    right: 17px;
    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    color: #8298aa;
    font-size: 19px;
    cursor: pointer;
}


/* SUCCESS ICON */

.contact-status-icon {
    display: grid;
    width: 84px;
    height: 84px;
    margin: 0 auto 25px;
    place-items: center;
    border: 1px solid rgba(58,218,135,.23);
    border-radius: 50%;
    background: rgba(58,218,135,.08);
    box-shadow: 0 0 45px rgba(58,218,135,.10);
}


    .contact-status-icon span {
        display: grid;
        width: 48px;
        height: 48px;
        place-items: center;
        border-radius: 50%;
        background: #35d783;
        color: #ffffff;
        font-size: 19px;
        font-weight: 900;
        box-shadow: 0 10px 30px rgba(53,215,131,.25);
    }


/* COPY */

.contact-status-kicker {
    display: block;
    margin-bottom: 12px;
    color: #55b2ff;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 2px;
}


.contact-status-card h2 {
    margin: 0;
    color: #ffffff;
    font-size: 35px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.04em;
}


.contact-status-card > p {
    max-width: 400px;
    margin: 17px auto 0;
    color: #859caf;
    font-size: 11px;
    line-height: 1.8;
}


/* =========================================================
   SUCCESS ACTIONS
========================================================= */

.contact-status-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 30px;
}


    .contact-status-actions a {
        display: flex;
        min-height: 53px;
        padding: 0 13px;
        align-items: center;
        justify-content: space-between;
        border-radius: 13px;
        color: #ffffff;
        font-size: 9px;
        font-weight: 800;
        text-decoration: none;
    }


        .contact-status-actions a:first-child {
            background: linear-gradient( 135deg, #0d70d5, #159cff );
        }


        .contact-status-actions a:last-child {
            border: 1px solid rgba(255,255,255,.09);
            background: rgba(255,255,255,.045);
        }


        .contact-status-actions a span {
            font-size: 14px;
        }


/* =========================================================
   VALID INPUT STATES
========================================================= */

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: rgba(24,132,255,.55) !important;
    box-shadow: 0 0 0 3px rgba(24,132,255,.07);
    outline: none;
}


.contact-form input:invalid:not(:placeholder-shown) {
    border-color: rgba(225,65,65,.38);
}


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

@media (max-width: 600px) {

    .contact-status-overlay {
        padding: 15px;
    }


    .contact-status-card {
        padding: 46px 23px 30px;
        border-radius: 22px;
    }


        .contact-status-card h2 {
            font-size: 29px;
        }


    .contact-status-actions {
        grid-template-columns: 1fr;
    }


    .contact-selected-product {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }


        .contact-selected-product strong {
            text-align: left;
        }
}
/* =========================================================
   CONTACT PAGE SPACING FIX
========================================================= */

.contact-main-section {
    padding-bottom: 70px;
}

.contact-details-section {
    padding: 0 0 110px;
}

.contact-detail-grid {
    gap: 28px;
}

.contact-detail-card {
    margin: 0;
}

.contact-location-section {
    padding: 110px 0 130px;
    border-top: 1px solid rgba(10, 30, 50, .06);
}

.contact-location-head {
    margin-top: 0;
}


/* Ana form ve bilgi kartları arasında da nefes */
.contact-page-grid {
    gap: 28px;
}


/* Form paneli ve sol bilgi paneli alt sectiona yapışmasın */
.contact-info-column,
.contact-form-panel {
    margin-bottom: 0;
}


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

@media (max-width: 1000px) {

    .contact-main-section {
        padding-bottom: 55px;
    }

    .contact-details-section {
        padding-bottom: 80px;
    }

    .contact-location-section {
        padding-top: 80px;
    }
}


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

@media (max-width: 700px) {

    .contact-main-section {
        padding-bottom: 45px;
    }

    .contact-page-grid {
        gap: 18px;
    }

    .contact-detail-grid {
        gap: 18px;
    }

    .contact-details-section {
        padding-bottom: 65px;
    }

    .contact-location-section {
        padding: 65px 0 90px;
    }
}
/* CONTACT SAYFASI - DAHA FERAH BOŞLUK */

.contact-page-grid {
    gap: 36px !important;
}

.contact-main-section {
    padding-bottom: 95px !important;
}

.contact-detail-grid {
    gap: 36px !important;
}

.contact-details-section {
    padding-bottom: 135px !important;
}

.contact-location-section {
    padding-top: 135px !important;
}

.contact-location-head {
    margin-bottom: 55px !important;
}

@media (max-width: 1000px) {

    .contact-page-grid {
        gap: 26px !important;
    }

    .contact-detail-grid {
        gap: 26px !important;
    }

    .contact-main-section {
        padding-bottom: 75px !important;
    }

    .contact-details-section {
        padding-bottom: 100px !important;
    }

    .contact-location-section {
        padding-top: 100px !important;
    }
}

@media (max-width: 700px) {

    .contact-page-grid {
        gap: 22px !important;
    }

    .contact-detail-grid {
        gap: 22px !important;
    }

    .contact-main-section {
        padding-bottom: 60px !important;
    }

    .contact-details-section {
        padding-bottom: 80px !important;
    }

    .contact-location-section {
        padding-top: 80px !important;
    }

    .contact-location-head {
        margin-bottom: 35px !important;
    }
}
/* =========================================================
   CONTACT PAGE FINAL SPACING FIX
========================================================= */


/* HERO NAVBAR'IN ALTINA GİRMESİN */

.page-hero {
    padding-top: 185px !important;
    padding-bottom: 85px !important;
}

.page-hero-content {
    margin-top: 0 !important;
}


/* ANA İLETİŞİM ALANI */

.contact-main-section {
    padding-top: 0 !important;
    padding-bottom: 55px !important;
}


/* SOL BİLGİ + FORM */

.contact-page-grid {
    gap: 28px !important;
}


/* ÇALIŞMA SAATLERİ / HİZMET BÖLGESİ */

.contact-details-section {
    padding-top: 35px !important;
    padding-bottom: 70px !important;
}

.contact-detail-grid {
    gap: 28px !important;
}


/* KONUM BÖLÜMÜ */

.contact-location-section {
    padding-top: 80px !important;
    padding-bottom: 110px !important;
}

.contact-location-head {
    margin-top: 0 !important;
    margin-bottom: 45px !important;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1001px) {

    .contact-detail-card {
        min-height: 260px;
    }
}


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

@media (max-width: 1000px) {

    .page-hero {
        padding-top: 150px !important;
        padding-bottom: 70px !important;
    }

    .contact-main-section {
        padding-bottom: 45px !important;
    }

    .contact-details-section {
        padding-top: 25px !important;
        padding-bottom: 55px !important;
    }

    .contact-location-section {
        padding-top: 65px !important;
    }
}


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

@media (max-width: 700px) {

    .page-hero {
        padding-top: 125px !important;
        padding-bottom: 55px !important;
    }

    .contact-page-grid {
        gap: 20px !important;
    }

    .contact-main-section {
        padding-bottom: 35px !important;
    }

    .contact-details-section {
        padding-top: 20px !important;
        padding-bottom: 45px !important;
    }

    .contact-detail-grid {
        gap: 18px !important;
    }

    .contact-location-section {
        padding-top: 55px !important;
        padding-bottom: 80px !important;
    }

    .contact-location-head {
        margin-bottom: 32px !important;
    }
}
/* =========================================================
   CONTACT PAGE - HERO / TOP GAP FINAL FIX
========================================================= */

/* Contact sayfasındaki eski büyük hero alanını kapat */
body:has(.contact-main-section) .page-hero {
    display: none !important;
}


/* Navbar sonrası iletişim alanını düzgün başlat */
body:has(.contact-main-section) .contact-main-section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
    margin-top: 0 !important;
    background: #f4f7fb;
}


/* Ana iki kolon */
body:has(.contact-main-section) .contact-page-grid {
    align-items: stretch !important;
    gap: 32px !important;
}


/* Sol taraf */
body:has(.contact-main-section) .contact-info-column {
    padding-top: 4px !important;
}


/* Sağ form kartı */
body:has(.contact-main-section) .contact-form-panel {
    margin-top: 0 !important;
}


/* =========================================================
   ÇALIŞMA SAATLERİ BÖLÜMÜ
========================================================= */

body:has(.contact-main-section) .contact-details-section {
    padding-top: 55px !important;
    padding-bottom: 65px !important;
    margin: 0 !important;
    background: #ffffff;
}


body:has(.contact-main-section) .contact-detail-grid {
    gap: 28px !important;
    align-items: stretch !important;
}


/* Kartlar aynı yükseklikte */
body:has(.contact-main-section) .contact-detail-card {
    min-height: 260px !important;
    height: 100% !important;
}


/* =========================================================
   KONUM BÖLÜMÜ
========================================================= */

body:has(.contact-main-section) .contact-location-section {
    margin: 0 !important;
    padding-top: 75px !important;
    padding-bottom: 110px !important;
}


body:has(.contact-main-section) .contact-location-head {
    margin-top: 0 !important;
    margin-bottom: 42px !important;
}
/* =========================================================
   CONTACT PAGE - TOP AREA FIX
========================================================= */

/* Hero tekrar görünsün */
.page-hero {
    display: block !important;
    margin: 0 !important;
    padding: 150px 0 90px !important;
    min-height: 0 !important;
}


/* Hero yazısı navbar altında kalmasın */
.page-hero-content {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}


    /* Hero başlığı */
    .page-hero-content h1 {
        margin-top: 15px;
    }


/* =========================================================
   FORM BÖLÜMÜ
========================================================= */

.contact-main-section {
    margin: 0 !important;
    padding: 75px 0 80px !important;
}


.contact-page-grid {
    gap: 32px !important;
    align-items: start !important;
}


/* Sol taraf */
.contact-info-column {
    margin: 0 !important;
    padding: 0 !important;
}


/* Sağ form */
.contact-form-panel {
    margin: 0 !important;
}


/* =========================================================
   ALT KARTLAR
========================================================= */

.contact-details-section {
    margin: 0 !important;
    padding: 70px 0 75px !important;
}


.contact-detail-grid {
    gap: 28px !important;
    align-items: stretch !important;
}


.contact-detail-card {
    margin: 0 !important;
    min-height: 260px !important;
}


/* =========================================================
   KONUM
========================================================= */

.contact-location-section {
    margin: 0 !important;
    padding: 85px 0 110px !important;
}


.contact-location-head {
    margin: 0 0 45px !important;
}


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

@media (max-width: 1000px) {

    .page-hero {
        padding: 130px 0 75px !important;
    }

    .contact-main-section {
        padding: 60px 0 65px !important;
    }

    .contact-details-section {
        padding: 55px 0 60px !important;
    }

    .contact-location-section {
        padding: 65px 0 90px !important;
    }
}


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

@media (max-width: 700px) {

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

    .contact-main-section {
        padding: 45px 0 50px !important;
    }

    .contact-page-grid {
        gap: 25px !important;
    }

    .contact-details-section {
        padding: 45px 0 50px !important;
    }

    .contact-detail-grid {
        gap: 20px !important;
    }

    .contact-detail-card {
        min-height: auto !important;
    }

    .contact-location-section {
        padding: 55px 0 80px !important;
    }
}
/* =========================================================
   CONTACT PAGE - FINAL FIX
   BUNU SITE.CSS DOSYASININ EN ALTINA KOY
========================================================= */


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

body:has(.contact-main-section) .page-hero {
    display: block !important;
    position: relative !important;
    min-height: 430px !important;
    margin: 0 !important;
    padding: 165px 0 80px !important;
    overflow: hidden !important;
    background: radial-gradient( circle at 84% 12%, rgba(49, 158, 245, .16), transparent 30% ), linear-gradient( 135deg, #061321 0%, #071b2c 50%, #0a3148 100% ) !important;
}


/* HERO İÇERİK */

body:has(.contact-main-section) .page-hero-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 850px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}


    body:has(.contact-main-section) .page-hero-content .page-kicker {
        display: block !important;
        margin-bottom: 18px !important;
        color: #58b4ff !important;
        font-size: 9px !important;
        font-weight: 850 !important;
        letter-spacing: 2px !important;
    }


    body:has(.contact-main-section) .page-hero-content h1 {
        max-width: 900px !important;
        margin: 0 !important;
        color: #ffffff !important;
        font-size: clamp(55px, 6vw, 82px) !important;
        font-weight: 800 !important;
        line-height: .95 !important;
        letter-spacing: -.06em !important;
    }


        body:has(.contact-main-section) .page-hero-content h1 span {
            display: block !important;
            color: #5db5ff !important;
        }


    body:has(.contact-main-section) .page-hero-content > p {
        max-width: 640px !important;
        margin: 26px 0 0 !important;
        color: #8fa4b6 !important;
        font-size: 13px !important;
        line-height: 1.8 !important;
    }



/* =========================================================
   ANA CONTACT BÖLÜMÜ
========================================================= */

body:has(.contact-main-section) .contact-main-section {
    margin: 0 !important;
    padding: 80px 0 85px !important;
    background: #f3f6fa !important;
}


body:has(.contact-main-section) .contact-page-grid {
    display: grid !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
    gap: 34px !important;
    align-items: start !important;
}


/* SOL TARAF */

body:has(.contact-main-section) .contact-info-column {
    margin: 0 !important;
    padding: 0 !important;
}


    body:has(.contact-main-section) .contact-info-column h2 {
        margin-top: 16px !important;
    }


/* SAĞ FORM */

body:has(.contact-main-section) .contact-form-panel {
    margin: 0 !important;
    padding: 42px !important;
    border: 1px solid #dce5ec !important;
    border-radius: 26px !important;
    background: #ffffff !important;
    box-shadow: 0 20px 60px rgba(7, 17, 31, .055) !important;
}



/* =========================================================
   ÇALIŞMA SAATLERİ + HİZMET BÖLGESİ
========================================================= */

body:has(.contact-main-section) .contact-details-section {
    margin: 0 !important;
    padding: 70px 0 !important;
    background: #ffffff !important;
}


body:has(.contact-main-section) .contact-detail-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    align-items: stretch !important;
}


body:has(.contact-main-section) .contact-detail-card {
    min-height: 260px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 38px !important;
    border-radius: 24px !important;
}



/* =========================================================
   KONUM BÖLÜMÜ
========================================================= */

body:has(.contact-main-section) .contact-location-section {
    margin: 0 !important;
    padding: 90px 0 115px !important;
    background: radial-gradient( circle at 82% 5%, rgba(35, 149, 238, .08), transparent 27% ), #f3f6fa !important;
}


body:has(.contact-main-section) .contact-location-head {
    margin: 0 0 48px !important;
}



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

@media (max-width: 1000px) {

    body:has(.contact-main-section) .page-hero {
        min-height: 390px !important;
        padding: 145px 0 70px !important;
    }


    body:has(.contact-main-section) .contact-page-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }


    body:has(.contact-main-section) .contact-main-section {
        padding: 65px 0 70px !important;
    }


    body:has(.contact-main-section) .contact-detail-grid {
        grid-template-columns: 1fr !important;
    }
}



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

@media (max-width: 700px) {

    body:has(.contact-main-section) .page-hero {
        min-height: 0 !important;
        padding: 125px 0 60px !important;
    }


    body:has(.contact-main-section) .page-hero-content h1 {
        font-size: 46px !important;
    }


    body:has(.contact-main-section) .contact-main-section {
        padding: 45px 0 55px !important;
    }


    body:has(.contact-main-section) .contact-page-grid {
        gap: 22px !important;
    }


    body:has(.contact-main-section) .contact-form-panel {
        padding: 27px 21px !important;
        border-radius: 21px !important;
    }


    body:has(.contact-main-section) .contact-details-section {
        padding: 50px 0 !important;
    }


    body:has(.contact-main-section) .contact-detail-grid {
        gap: 20px !important;
    }


    body:has(.contact-main-section) .contact-detail-card {
        min-height: auto !important;
        padding: 28px 22px !important;
    }


    body:has(.contact-main-section) .contact-location-section {
        padding: 60px 0 85px !important;
    }
}
/* =========================================================
   BTU SIMPLE / REFERENCE STYLE
========================================================= */

.btu-simple-page {
    position: relative;
    min-height: 100vh;
    padding: 165px 0 120px;
    overflow: hidden;
    background: linear-gradient( 180deg, #edf9ff 0, #f6fbfe 22%, #ffffff 55%, #f5fbff 100% );
}


/* =========================================================
   BACKGROUND LINES
========================================================= */

.btu-simple-bg-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}


    .btu-simple-bg-lines::before,
    .btu-simple-bg-lines::after {
        position: absolute;
        width: 130%;
        height: 340px;
        left: -15%;
        border: 2px solid rgba(63, 183, 246, .14);
        border-radius: 50%;
        content: "";
    }


    .btu-simple-bg-lines::before {
        top: 170px;
        transform: rotate(-3deg);
    }


    .btu-simple-bg-lines::after {
        top: 600px;
        transform: rotate(4deg);
    }


.btu-simple-page > .kb-shell {
    position: relative;
    z-index: 2;
}


/* =========================================================
   INTRO
========================================================= */

.btu-simple-intro {
    max-width: 830px;
    margin: 0 auto 48px;
    text-align: center;
}


    .btu-simple-intro h1 {
        margin: 12px 0 0;
        color: #071426;
        font-size: clamp(45px, 5vw, 67px);
        font-weight: 800;
        line-height: .98;
        letter-spacing: -.055em;
    }


        .btu-simple-intro h1 span {
            display: block;
            color: #188cf2;
        }


    .btu-simple-intro p {
        max-width: 710px;
        margin: 22px auto 0;
        color: #64778a;
        font-size: 13px;
        line-height: 1.8;
    }


/* =========================================================
   MAIN CALCULATOR
========================================================= */

.btu-simple-calculator {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(350px, .8fr);
    gap: 28px;
    max-width: 1080px;
    margin: auto;
    padding: 34px;
    border: 1px solid rgba(125,177,208,.25);
    border-radius: 27px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 28px 70px rgba(17,70,102,.14);
    backdrop-filter: blur(15px);
}


/* =========================================================
   FORM
========================================================= */

.btu-simple-form {
    min-width: 0;
}


.btu-simple-form-title {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 19px;
    border-bottom: 1px solid #ddeaf2;
}


.btu-simple-form-icon {
    color: #149ce9;
    font-size: 20px;
}


.btu-simple-form-title h2 {
    margin: 0;
    color: #071426;
    font-size: 21px;
    font-weight: 800;
}


/* =========================================================
   AREA
========================================================= */

.btu-area-card {
    padding: 19px 17px;
    border: 1px solid #cfeafb;
    border-radius: 17px;
    background: linear-gradient( 180deg, #f5fcff, #f9fdff );
}


.btu-area-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}


    .btu-area-head label {
        color: #17283b;
        font-size: 11px;
        font-weight: 800;
    }


    .btu-area-head strong {
        color: #0c8be7;
        font-size: 17px;
        font-weight: 850;
    }


/* RANGE */

.btu-area-card input[type="range"] {
    --range-progress: 18%;
    width: 100%;
    height: 7px;
    appearance: none;
    border-radius: 999px;
    outline: none;
    background: linear-gradient( 90deg, #159fe9 0, #159fe9 var(--range-progress), #bfe7f8 var(--range-progress), #bfe7f8 100% );
}


    .btu-area-card input[type="range"]::-webkit-slider-thumb {
        width: 15px;
        height: 15px;
        appearance: none;
        border: 0;
        border-radius: 50%;
        background: #088bd6;
        box-shadow: 0 4px 12px rgba(0,126,202,.28);
        cursor: pointer;
    }


    .btu-area-card input[type="range"]::-moz-range-thumb {
        width: 15px;
        height: 15px;
        border: 0;
        border-radius: 50%;
        background: #088bd6;
        cursor: pointer;
    }


.btu-area-scale {
    display: flex;
    margin-top: 9px;
    justify-content: space-between;
    color: #8194a6;
    font-size: 8px;
}


    .btu-area-scale span {
        display: flex;
        flex-direction: column;
    }


        .btu-area-scale span:nth-child(2) {
            text-align: center;
        }


        .btu-area-scale span:last-child {
            text-align: right;
        }


    .btu-area-scale small {
        margin-top: 2px;
        font-size: 7px;
        color: #a2afb9;
    }


/* =========================================================
   FIELDS
========================================================= */

.btu-simple-fields {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
    margin-top: 24px;
}


.btu-simple-field {
    display: flex;
    gap: 8px;
    flex-direction: column;
}


    .btu-simple-field > span {
        color: #24364b;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: .2px;
    }


    .btu-simple-field select,
    .btu-simple-field input {
        width: 100%;
        height: 48px;
        padding: 0 14px;
        border: 1px solid #bfe0f4;
        border-radius: 11px;
        outline: 0;
        background: #f9fdff;
        color: #17283b;
        font-size: 10px;
        font-weight: 600;
        transition: border-color .25s ease, box-shadow .25s ease;
    }


        .btu-simple-field select:focus,
        .btu-simple-field input:focus {
            border-color: #159fe9;
            box-shadow: 0 0 0 3px rgba(21,159,233,.08);
        }


/* =========================================================
   NOTE
========================================================= */

.btu-simple-note {
    display: grid;
    grid-template-columns: 24px minmax(0,1fr);
    gap: 9px;
    margin-top: 22px;
    padding: 15px;
    align-items: start;
    border: 1px solid #f5cf65;
    border-radius: 12px;
    background: #fff9e8;
}


    .btu-simple-note > span {
        display: grid;
        width: 20px;
        height: 20px;
        place-items: center;
        border: 1px solid #efa800;
        border-radius: 50%;
        color: #e39100;
        font-size: 8px;
        font-weight: 850;
    }


    .btu-simple-note p {
        margin: 0;
        color: #996a11;
        font-size: 8px;
        line-height: 1.6;
    }


/* =========================================================
   RESULT
========================================================= */

.btu-simple-result {
    position: sticky;
    top: 120px;
    align-self: start;
    padding: 30px;
    overflow: hidden;
    border-radius: 24px;
    background: radial-gradient( circle at 100% 0, rgba(29,185,247,.25), transparent 32% ), linear-gradient( 145deg, #075b87, #063352 60%, #071a31 );
    box-shadow: 0 30px 55px rgba(8,42,70,.27);
    color: #ffffff;
}


    .btu-simple-result::after {
        position: absolute;
        width: 330px;
        height: 330px;
        top: 70px;
        left: 115px;
        border: 1px solid rgba(73,190,245,.13);
        border-radius: 50%;
        content: "";
    }


    .btu-simple-result > * {
        position: relative;
        z-index: 2;
    }


/* BADGE */

.btu-result-badge {
    display: inline-flex;
    min-height: 26px;
    padding: 0 12px;
    gap: 7px;
    align-items: center;
    border-radius: 999px;
    background: rgba(102,206,255,.22);
    color: #bdeaff;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .8px;
}


/* MAIN */

.btu-simple-result-main {
    margin-top: 34px;
}


    .btu-simple-result-main > small {
        display: block;
        margin-bottom: 6px;
        color: #6bc9f7;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: 1.1px;
    }


    .btu-simple-result-main > div {
        display: flex;
        gap: 8px;
        align-items: baseline;
    }


    .btu-simple-result-main strong {
        color: #ffffff;
        font-size: clamp(45px,4vw,58px);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.055em;
    }


    .btu-simple-result-main > div span {
        color: #5ebef0;
        font-size: 16px;
        font-weight: 800;
    }


/* STANDARD */

.btu-standard-class {
    display: flex;
    gap: 9px;
    margin-top: 15px;
    align-items: center;
    color: #d9ecf7;
    font-size: 9px;
}


    .btu-standard-class strong {
        display: inline-flex;
        min-height: 28px;
        padding: 0 11px;
        align-items: center;
        border-radius: 7px;
        background: #0ca7ed;
        color: #ffffff;
        font-size: 10px;
    }


.btu-result-divider {
    height: 1px;
    margin: 24px 0;
    background: rgba(255,255,255,.10);
}


/* BENEFITS */

.btu-result-benefits {
    display: grid;
    gap: 12px;
}


    .btu-result-benefits > div {
        display: grid;
        grid-template-columns: 18px minmax(0,1fr);
        gap: 7px;
        align-items: center;
    }


    .btu-result-benefits span {
        color: #21dca0;
        font-size: 11px;
        font-weight: 900;
    }


    .btu-result-benefits p {
        margin: 0;
        color: #cae2ef;
        font-size: 8px;
        line-height: 1.45;
    }


/* SYSTEM */

.btu-system-mini {
    display: flex;
    margin-top: 24px;
    flex-direction: column;
}


    .btu-system-mini small {
        color: #638ca5;
        font-size: 7px;
        font-weight: 850;
        letter-spacing: 1.1px;
    }


    .btu-system-mini strong {
        margin-top: 4px;
        color: #ffffff;
        font-size: 14px;
    }


/* OFFER */

.btu-result-offer {
    display: flex;
    min-height: 55px;
    margin-top: 30px;
    padding: 0 18px;
    align-items: center;
    justify-content: space-between;
    border-radius: 13px;
    background: linear-gradient( 135deg, #09aae9, #10b7f4 );
    color: #031426 !important;
    font-size: 10px;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 14px 35px rgba(0,173,239,.20);
    transition: transform .25s ease, box-shadow .25s ease;
}


    .btu-result-offer:hover {
        transform: translateY(-3px);
        box-shadow: 0 19px 42px rgba(0,173,239,.30);
    }


/* =========================================================
   PRODUCTS
========================================================= */

.btu-simple-products {
    max-width: 1080px;
    margin: 70px auto 0;
}


.btu-simple-products-head {
    display: flex;
    gap: 40px;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 25px;
}


    .btu-simple-products-head h2 {
        margin: 8px 0 0;
        color: #071426;
        font-size: clamp(28px,3vw,39px);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.04em;
    }


        .btu-simple-products-head h2 span {
            color: #0d8ee8;
        }


    .btu-simple-products-head > a {
        display: inline-flex;
        gap: 10px;
        align-items: center;
        color: #18344d;
        font-size: 9px;
        font-weight: 800;
        text-decoration: none;
    }


        .btu-simple-products-head > a span {
            color: #149ee9;
        }


/* GRID */

.btu-simple-products-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 17px;
}


.btu-simple-product {
    display: none;
    overflow: hidden;
    border: 1px solid #dcebf4;
    border-radius: 21px;
    background: #ffffff;
    box-shadow: 0 14px 38px rgba(18,64,92,.07);
}


    .btu-simple-product.is-visible {
        display: flex;
        flex-direction: column;
        animation: btuSimpleIn .45s ease both;
    }


@keyframes btuSimpleIn {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

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


/* IMAGE */

.btu-simple-product-image {
    position: relative;
    display: flex;
    height: 220px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient( circle, rgba(24,151,231,.10), transparent 42% ), #f6fbfe;
}


    .btu-simple-product-image img {
        max-width: 78%;
        max-height: 160px;
        object-fit: contain;
        filter: drop-shadow( 0 20px 20px rgba(9,45,69,.12) );
        transition: transform .4s ease;
    }


.btu-simple-product:hover
.btu-simple-product-image img {
    transform: translateY(-4px) scale(1.04);
}


.btu-simple-product-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    min-height: 27px;
    padding: 0 10px;
    align-items: center;
    border-radius: 999px;
    background: #0b8bdc;
    color: #ffffff;
    font-size: 7px;
    font-weight: 850;
}


/* CONTENT */

.btu-simple-product-content {
    display: flex;
    min-height: 250px;
    padding: 22px;
    flex: 1;
    flex-direction: column;
}


    .btu-simple-product-content > span {
        color: #0b8bdc;
        font-size: 7px;
        font-weight: 850;
        letter-spacing: 1px;
    }


    .btu-simple-product-content h3 {
        margin: 10px 0 0;
        color: #071426;
        font-size: 20px;
        font-weight: 800;
        line-height: 1.08;
    }


    .btu-simple-product-content p {
        margin: 12px 0 18px;
        color: #708294;
        font-size: 9px;
        line-height: 1.7;
    }


.btu-simple-product-meta {
    display: flex;
    gap: 8px;
    margin-top: auto;
    align-items: center;
    color: #50677b;
    font-size: 8px;
}


    .btu-simple-product-meta i {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #0d95e8;
    }


/* ACTIONS */

.btu-simple-product-actions {
    display: grid;
    grid-template-columns: 1fr 78px;
    gap: 7px;
    margin-top: 17px;
}


    .btu-simple-product-actions a {
        display: flex;
        min-height: 43px;
        padding: 0 12px;
        align-items: center;
        justify-content: space-between;
        border-radius: 10px;
        font-size: 8px;
        font-weight: 800;
        text-decoration: none;
    }


        .btu-simple-product-actions a:first-child {
            background: #08233a;
            color: #ffffff;
        }


            .btu-simple-product-actions a:first-child span {
                color: #36adf1;
            }


        .btu-simple-product-actions a:last-child {
            justify-content: center;
            border: 1px solid #d7e8f3;
            color: #0b8bdc;
            background: #ffffff;
        }


/* =========================================================
   DISCLAIMER
========================================================= */

.btu-simple-disclaimer {
    display: grid;
    grid-template-columns: 28px minmax(0,1fr);
    gap: 12px;
    max-width: 1080px;
    margin: 35px auto 0;
    padding-top: 25px;
    align-items: start;
    border-top: 1px solid #dcebf4;
}


    .btu-simple-disclaimer > span {
        display: grid;
        width: 26px;
        height: 26px;
        place-items: center;
        border: 1px solid #a8daf6;
        border-radius: 50%;
        color: #0b8bdc;
        font-size: 9px;
        font-weight: 850;
    }


    .btu-simple-disclaimer p {
        max-width: 760px;
        margin: 0;
        color: #7d8e9e;
        font-size: 9px;
        line-height: 1.7;
    }


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

@media (max-width: 950px) {

    .btu-simple-calculator {
        grid-template-columns: 1fr;
    }


    .btu-simple-result {
        position: relative;
        top: auto;
    }


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


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

@media (max-width: 650px) {

    .btu-simple-page {
        padding: 125px 0 80px;
    }


    .btu-simple-intro {
        margin-bottom: 30px;
        text-align: left;
    }


        .btu-simple-intro h1 {
            font-size: 43px;
        }


        .btu-simple-intro p {
            margin-left: 0;
        }


    .btu-simple-calculator {
        padding: 17px;
        border-radius: 20px;
    }


    .btu-simple-fields {
        grid-template-columns: 1fr;
    }


    .btu-area-scale span:nth-child(2) {
        display: none;
    }


    .btu-simple-result {
        padding: 24px 20px;
        border-radius: 20px;
    }


    .btu-simple-result-main strong {
        font-size: 45px;
    }


    .btu-simple-products {
        margin-top: 55px;
    }


    .btu-simple-products-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }


    .btu-simple-products-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   BTU - TYPOGRAPHY / SIZE FIX
========================================================= */

/* ÜST BAŞLIK */

.btu-simple-intro .kb-section-kicker {
    font-size: 11px !important;
    letter-spacing: 1.8px !important;
}

.btu-simple-intro h1 {
    font-size: clamp(52px, 5.3vw, 74px) !important;
}

.btu-simple-intro p {
    max-width: 760px !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
}


/* =========================================================
   FORM BAŞLIĞI
========================================================= */

.btu-simple-form-title h2 {
    font-size: 25px !important;
}

.btu-simple-form-icon {
    font-size: 24px !important;
}


/* =========================================================
   ALAN SLIDER
========================================================= */

.btu-area-head label {
    font-size: 14px !important;
}

.btu-area-head strong {
    font-size: 21px !important;
}

.btu-area-scale {
    font-size: 10px !important;
}

    .btu-area-scale small {
        font-size: 9px !important;
    }


/* =========================================================
   INPUT / SELECT LABELS
========================================================= */

.btu-simple-field > span {
    font-size: 10px !important;
    line-height: 1.4 !important;
    letter-spacing: .35px !important;
}

.btu-simple-field select,
.btu-simple-field input {
    height: 54px !important;
    padding: 0 15px !important;
    font-size: 12px !important;
}


/* =========================================================
   NOTE
========================================================= */

.btu-simple-note p {
    font-size: 10px !important;
    line-height: 1.65 !important;
}

.btu-simple-note > span {
    width: 23px !important;
    height: 23px !important;
    font-size: 10px !important;
}


/* =========================================================
   RESULT PANEL
========================================================= */

.btu-result-badge {
    min-height: 30px !important;
    padding: 0 14px !important;
    font-size: 9px !important;
}

.btu-simple-result-main > small {
    font-size: 10px !important;
}

.btu-simple-result-main strong {
    font-size: clamp(52px, 4.5vw, 66px) !important;
}

.btu-simple-result-main > div span {
    font-size: 19px !important;
}

.btu-standard-class {
    font-size: 11px !important;
}

    .btu-standard-class strong {
        min-height: 31px !important;
        font-size: 11px !important;
    }


/* =========================================================
   RESULT BENEFITS
========================================================= */

.btu-result-benefits p {
    font-size: 10px !important;
    line-height: 1.55 !important;
}

.btu-result-benefits span {
    font-size: 13px !important;
}


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

.btu-system-mini small {
    font-size: 9px !important;
}

.btu-system-mini strong {
    font-size: 17px !important;
}


/* =========================================================
   OFFER BUTTON
========================================================= */

.btu-result-offer {
    min-height: 60px !important;
    padding: 0 20px !important;
    font-size: 12px !important;
}


/* =========================================================
   PRODUCTS TITLE
========================================================= */

.btu-simple-products-head .kb-section-kicker {
    font-size: 10px !important;
}

.btu-simple-products-head h2 {
    font-size: clamp(32px, 3.2vw, 44px) !important;
}

.btu-simple-products-head > a {
    font-size: 11px !important;
}


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

.btu-simple-product-content > span {
    font-size: 9px !important;
}

.btu-simple-product-content h3 {
    font-size: 24px !important;
}

.btu-simple-product-content p {
    font-size: 11px !important;
    line-height: 1.7 !important;
}

.btu-simple-product-meta {
    font-size: 10px !important;
}

.btu-simple-product-actions a {
    min-height: 47px !important;
    font-size: 10px !important;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.btu-simple-disclaimer p {
    font-size: 10px !important;
}


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

@media (max-width: 950px) {

    .btu-simple-intro h1 {
        font-size: 56px !important;
    }
}


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

@media (max-width: 650px) {

    .btu-simple-intro .kb-section-kicker {
        font-size: 9px !important;
    }

    .btu-simple-intro h1 {
        font-size: 42px !important;
    }

    .btu-simple-intro p {
        font-size: 13px !important;
    }

    .btu-simple-form-title h2 {
        font-size: 21px !important;
    }

    .btu-area-head label {
        font-size: 12px !important;
    }

    .btu-area-head strong {
        font-size: 18px !important;
    }

    .btu-simple-field > span {
        font-size: 9px !important;
    }

    .btu-simple-field select,
    .btu-simple-field input {
        font-size: 11px !important;
    }

    .btu-simple-result-main strong {
        font-size: 48px !important;
    }
}
/* Merkezi sistem hizmet kartı görsel ayarı */

.service-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}

.service-card-image {
    overflow: hidden;
}
/* HOME - VRF / VRV UYGULAMA GÖRSELİ */

.home-vrf-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%;
}

/* =========================================================
   2026-08-10 / BTU SPOTLIGHT + PREMIUM AMBIENT BACKGROUND
   ========================================================= */

.kb-site-ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(rgba(53,167,255,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(53,167,255,.025) 1px,transparent 1px);
    background-size: 72px 72px;
}

    .kb-site-ambient::before {
        content: "";
        position: absolute;
        inset: -20%;
        background: radial-gradient(circle at 20% 30%,rgba(53,167,255,.12),transparent 25%), radial-gradient(circle at 78% 18%,rgba(115,197,255,.10),transparent 24%), radial-gradient(circle at 65% 78%,rgba(199,154,43,.07),transparent 22%);
        animation: kbAmbientDrift 18s ease-in-out infinite alternate;
    }

    .kb-site-ambient i {
        position: absolute;
        display: block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(53,167,255,.35);
        box-shadow: 0 0 22px rgba(53,167,255,.45);
        animation: kbAmbientParticle 14s linear infinite;
    }

        .kb-site-ambient i:nth-child(1) {
            left: 12%;
            top: 78%;
            animation-duration: 17s
        }

        .kb-site-ambient i:nth-child(2) {
            left: 54%;
            top: 88%;
            width: 5px;
            height: 5px;
            animation-delay: -6s;
            animation-duration: 20s
        }

        .kb-site-ambient i:nth-child(3) {
            left: 86%;
            top: 72%;
            width: 4px;
            height: 4px;
            animation-delay: -10s;
            animation-duration: 16s
        }

@keyframes kbAmbientDrift {
    from {
        transform: translate3d(-2%,-1%,0) scale(1)
    }

    to {
        transform: translate3d(3%,2%,0) scale(1.08)
    }
}

@keyframes kbAmbientParticle {
    0% {
        transform: translate3d(0,80px,0);
        opacity: 0
    }

    15% {
        opacity: .7
    }

    80% {
        opacity: .35
    }

    100% {
        transform: translate3d(70px,-900px,0);
        opacity: 0
    }
}

/* Hero BTU button */
.kb-btn-btu {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(53,167,255,.55);
    background: linear-gradient(135deg,#0878e8,#20b6ff);
    color: #fff !important;
    box-shadow: 0 14px 36px rgba(23,151,242,.26);
}

    .kb-btn-btu::before {
        content: "";
        position: absolute;
        top: -60%;
        left: -45px;
        width: 30px;
        height: 220%;
        background: rgba(255,255,255,.25);
        transform: rotate(18deg);
        animation: kbBtuShine 3.8s ease-in-out infinite;
    }

    .kb-btn-btu:hover {
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 18px 42px rgba(23,151,242,.38);
    }

@keyframes kbBtuShine {
    0%,58% {
        left: -55px
    }

    78%,100% {
        left: calc(100% + 55px)
    }
}

/* Large BTU entry directly under hero */
.kb-btu-spotlight {
    position: relative;
    z-index: 5;
    padding: 34px 0 18px;
    background: transparent;
}

.kb-btu-spotlight-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: center;
    overflow: hidden;
    min-height: 150px;
    padding: 26px 30px;
    border: 1px solid rgba(53,167,255,.24);
    border-radius: 26px;
    background: linear-gradient(120deg,rgba(7,21,33,.98),rgba(9,40,61,.96));
    color: #fff;
    text-decoration: none;
    box-shadow: 0 22px 60px rgba(7,21,33,.16);
    transition: transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}

    .kb-btu-spotlight-card::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        right: -120px;
        top: -260px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(53,167,255,.28),transparent 68%);
        transition: .4s ease;
    }

    .kb-btu-spotlight-card:hover {
        color: #fff;
        transform: translateY(-5px);
        border-color: rgba(53,167,255,.48);
        box-shadow: 0 30px 72px rgba(7,21,33,.22);
    }

.kb-btu-icon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border: 1px solid rgba(115,197,255,.35);
    border-radius: 22px;
    background: linear-gradient(145deg,rgba(53,167,255,.22),rgba(53,167,255,.07));
    color: #73c5ff;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -1px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.kb-btu-spotlight-copy,
.kb-btu-spotlight-action {
    position: relative;
    z-index: 2;
}

    .kb-btu-spotlight-copy span,
    .kb-btu-spotlight-action small {
        color: #58b9ff;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 1.8px;
    }

    .kb-btu-spotlight-copy h2 {
        margin: 7px 0 5px;
        color: #fff;
        font-size: clamp(24px,2.2vw,34px);
        line-height: 1.05;
        letter-spacing: -1.4px;
    }

    .kb-btu-spotlight-copy p {
        margin: 0;
        color: #91a6ba;
        font-size: 13px;
        line-height: 1.55;
    }

.kb-btu-spotlight-action {
    min-width: 220px;
    padding-left: 28px;
    border-left: 1px solid rgba(255,255,255,.10);
}

    .kb-btu-spotlight-action strong {
        display: flex;
        gap: 22px;
        align-items: center;
        margin-top: 8px;
        color: #fff;
        font-size: 14px;
    }

    .kb-btu-spotlight-action b {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: #35a7ff;
        font-size: 15px;
        transition: transform .25s ease;
    }

.kb-btu-spotlight-card:hover .kb-btu-spotlight-action b {
    transform: translate(3px,-3px);
}

/* Let the ambient layer become visible between/behind home sections */
.kb-solutions,
.kb-process,
.kb-projects,
.kb-home-blog {
    background: rgba(246,248,251,.94);
}

@media (max-width:900px) {
    .kb-hero-actions {
        flex-wrap: wrap
    }

    .kb-btu-spotlight-card {
        grid-template-columns: auto 1fr;
    }

    .kb-btu-spotlight-action {
        grid-column: 1/-1;
        padding: 18px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.10);
    }
}

@media (max-width:600px) {
    .kb-btu-spotlight {
        padding: 18px 0 8px
    }

    .kb-btu-spotlight-card {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px;
    }

    .kb-btu-icon {
        width: 64px;
        height: 64px;
        border-radius: 18px
    }

    .kb-btu-spotlight-action {
        grid-column: auto
    }

    .kb-btn-btu {
        width: 100%
    }
}

@media (prefers-reduced-motion:reduce) {
    .kb-site-ambient::before,
    .kb-site-ambient i,
    .kb-btn-btu::before {
        animation: none !important;
    }
}


/* =========================================================
   FINAL BACKGROUND ANIMATION FIX
   ========================================================= */

/* Ambient layer must sit above body background, below page sections */
.kb-site-ambient {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    opacity: 1 !important;
    background: linear-gradient(rgba(53,167,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(53,167,255,.035) 1px,transparent 1px) !important;
    background-size: 72px 72px !important;
    animation: kbAmbientGridMove 18s linear infinite !important;
}

    .kb-site-ambient::before {
        content: "" !important;
        position: absolute !important;
        inset: -18% !important;
        background: radial-gradient(circle at 18% 28%,rgba(53,167,255,.16),transparent 24%), radial-gradient(circle at 80% 22%,rgba(115,197,255,.13),transparent 22%), radial-gradient(circle at 66% 78%,rgba(199,154,43,.08),transparent 20%) !important;
        filter: blur(6px);
        animation: kbAmbientGlowMove 14s ease-in-out infinite alternate !important;
    }

    .kb-site-ambient i {
        position: absolute !important;
        display: block !important;
        border-radius: 50% !important;
        background: #35a7ff !important;
        box-shadow: 0 0 18px rgba(53,167,255,.7) !important;
        opacity: .55 !important;
        animation: kbAmbientParticleRise 13s linear infinite !important;
    }

        .kb-site-ambient i:nth-child(1) {
            width: 6px !important;
            height: 6px !important;
            left: 10% !important;
            top: 88% !important;
            animation-duration: 15s !important;
        }

        .kb-site-ambient i:nth-child(2) {
            width: 5px !important;
            height: 5px !important;
            left: 52% !important;
            top: 94% !important;
            animation-delay: -5s !important;
            animation-duration: 18s !important;
        }

        .kb-site-ambient i:nth-child(3) {
            width: 4px !important;
            height: 4px !important;
            left: 86% !important;
            top: 82% !important;
            animation-delay: -9s !important;
            animation-duration: 16s !important;
        }

@keyframes kbAmbientGridMove {
    from {
        background-position: 0 0,0 0
    }

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

@keyframes kbAmbientGlowMove {
    0% {
        transform: translate3d(-2%,-1%,0) scale(1)
    }

    100% {
        transform: translate3d(3%,2%,0) scale(1.08)
    }
}

@keyframes kbAmbientParticleRise {
    0% {
        transform: translate3d(0,100px,0);
        opacity: 0
    }

    12% {
        opacity: .6
    }

    80% {
        opacity: .35
    }

    100% {
        transform: translate3d(80px,-1000px,0);
        opacity: 0
    }
}

/* Keep all home content above the global ambient layer */
.kb-hero,
.kb-btu-spotlight,
.kb-solutions,
.kb-proof,
.kb-featured,
.kb-process,
.kb-tech,
.kb-projects,
.kb-home-blog,
.kb-reviews {
    position: relative !important;
    z-index: 1 !important;
}

/* Hero itself gets a clearly visible animated tech background */
.kb-hero-grid {
    animation: kbHeroGridMove 16s linear infinite !important;
}

.kb-hero-glow {
    animation: kbHeroGlowFloat 8s ease-in-out infinite alternate !important;
}

.orbit-one {
    animation: kbOrbitSpin 24s linear infinite !important;
}

.orbit-two {
    animation: kbOrbitSpinReverse 18s linear infinite !important;
}

.kb-hero-product {
    animation: kbProductFloat 5.5s ease-in-out infinite !important;
}

.kb-stage-card-top {
    animation: kbStageFloatA 5s ease-in-out infinite !important;
}

.kb-stage-card-bottom {
    animation: kbStageFloatB 6s ease-in-out infinite !important;
}

@keyframes kbHeroGridMove {
    from {
        background-position: 0 0,0 0
    }

    to {
        background-position: 70px 70px,70px 70px
    }
}

@keyframes kbHeroGlowFloat {
    from {
        transform: translate3d(-20px,-10px,0) scale(1);
        opacity: .78
    }

    to {
        transform: translate3d(35px,28px,0) scale(1.12);
        opacity: 1
    }
}

@keyframes kbOrbitSpin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes kbOrbitSpinReverse {
    from {
        transform: rotate(360deg)
    }

    to {
        transform: rotate(0deg)
    }
}

@keyframes kbProductFloat {
    0%,100% {
        transform: perspective(900px) rotateY(-8deg) rotateX(2deg) translateY(0)
    }

    50% {
        transform: perspective(900px) rotateY(-8deg) rotateX(2deg) translateY(-10px)
    }
}

@keyframes kbStageFloatA {
    0%,100% {
        transform: translateY(0)
    }

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

@keyframes kbStageFloatB {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(8px)
    }
}

/* Make light sections slightly translucent so the moving ambient background reads through */
.kb-solutions,
.kb-process,
.kb-projects,
.kb-home-blog {
    background: rgba(246,248,251,.93) !important;
    backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion:reduce) {
    .kb-site-ambient,
    .kb-site-ambient::before,
    .kb-site-ambient i,
    .kb-hero-grid,
    .kb-hero-glow,
    .orbit-one,
    .orbit-two,
    .kb-hero-product,
    .kb-stage-card-top,
    .kb-stage-card-bottom {
        animation: none !important;
    }
}


/* =========================================================
   ABS-STYLE AIRFLOW BACKGROUND
   Thin animated blue airflow lines + soft moving particles
   ========================================================= */

/* Disable the previous grid / particle background layer */
.kb-site-ambient {
    display: none !important;
}

/* Keep the canvas above section backgrounds, below actual content */
.kb-airflow-canvas {
    position: fixed;
    inset: 0;
    z-index: 3;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    opacity: .92;
}

/* Inner content remains readable and above the airflow */
.kb-shell,
.page-shell,
.footer-container,
.detail-container {
    position: relative;
    z-index: 4;
}

/* Sections/backgrounds stay below the airflow canvas */
.kb-hero,
.kb-btu-spotlight,
.kb-solutions,
.kb-proof,
.kb-featured,
.kb-process,
.kb-tech,
.kb-projects,
.kb-home-blog,
.kb-reviews {
    position: relative;
    z-index: 2;
}

/* The old animated grid/orbit motion is toned down so the airflow is the star */
.kb-hero-grid {
    animation: none !important;
    opacity: .075 !important;
}

.kb-hero-glow {
    animation: none !important;
}

.orbit-one,
.orbit-two {
    animation: none !important;
}

/* Keep only a very subtle product float */
.kb-hero-product {
    animation: kbProductFloatSoft 6.5s ease-in-out infinite !important;
}

@keyframes kbProductFloatSoft {
    0%,100% {
        transform: perspective(900px) rotateY(-8deg) rotateX(2deg) translateY(0);
    }

    50% {
        transform: perspective(900px) rotateY(-8deg) rotateX(2deg) translateY(-6px);
    }
}

/* Allow airflow to read through light sections */
.kb-solutions,
.kb-process,
.kb-projects,
.kb-home-blog {
    background: rgba(246,248,251,.90) !important;
    backdrop-filter: blur(1.5px);
}

/* Slightly stronger on large screens, lighter on mobile */
@media (max-width:700px) {
    .kb-airflow-canvas {
        opacity: .62;
    }

    .kb-solutions,
    .kb-process,
    .kb-projects,
    .kb-home-blog {
        background: rgba(246,248,251,.94) !important;
    }
}

@media (prefers-reduced-motion:reduce) {
    .kb-hero-product {
        animation: none !important;
    }
}


/* =========================================================
   FINAL GLOBAL BACKGROUND ANIMATION
   All pages / no wave / premium air-flow particles
   ========================================================= */

.kb-airflow-canvas,
.kb-site-ambient {
    display: none !important;
}

.kb-global-bg {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    opacity: .88;
}

/* Page content remains above the global animation */
main {
    position: relative;
    z-index: 2;
}

    main .kb-shell,
    main .page-shell,
    main .detail-container {
        position: relative;
        z-index: 4;
    }

.site-header,
.premium-header,
.floating-whatsapp,
.mobile-sticky-actions {
    position: fixed;
    z-index: 9999 !important;
}

.site-footer,
.premium-footer {
    position: relative;
    z-index: 3;
}

/* Soft translucency on the light sections, so motion can be seen */
.kb-solutions,
.kb-process,
.kb-projects,
.kb-home-blog,
.contact-main-section,
.contact-details-section,
.contact-location-section,
.products-control-section,
.products-list-section,
.products-help-v2,
.btu-simple-page {
    background-color: rgba(246,248,251,.92) !important;
}

/* Old animation systems should not compete */
.kb-hero-grid {
    animation: none !important;
}

.kb-hero-glow {
    animation: none !important;
}

/* Tiny premium float, not a game-like effect */
.kb-hero-product {
    animation: kbGlobalSoftFloat 7s ease-in-out infinite !important;
}

@keyframes kbGlobalSoftFloat {
    0%,100% {
        transform: perspective(900px) rotateY(-8deg) rotateX(2deg) translateY(0);
    }

    50% {
        transform: perspective(900px) rotateY(-8deg) rotateX(2deg) translateY(-5px);
    }
}

@media (max-width:700px) {
    .kb-global-bg {
        opacity: .56;
    }
}

@media (prefers-reduced-motion:reduce) {
    .kb-global-bg {
        opacity: .35;
    }

    .kb-hero-product {
        animation: none !important;
    }
}


/* =========================================================
   GLOBAL ANIMATION VISIBILITY FIX
   Canvas above section backgrounds, pointer-events disabled
   ========================================================= */

.kb-global-bg {
    position: fixed !important;
    inset: 0 !important;
    z-index: 120 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    opacity: 1 !important;
    display: block !important;
}

/* Do not put the whole main element in a stacking context above the canvas */
main {
    position: relative !important;
    z-index: auto !important;
}

    /* Section backgrounds stay under canvas */
    main > section,
    main > div {
        position: relative !important;
        z-index: 1 !important;
    }

    /* Actual readable content stays above canvas */
    main .kb-shell,
    main .page-shell,
    main .detail-container,
    main .footer-container,
    main form,
    main .contact-form-panel,
    main .product-card-v2,
    main .btu-simple-calculator,
    main .btu-simple-product,
    main article,
    main .kb-btu-spotlight-card {
        position: relative !important;
        z-index: 160 !important;
    }

.site-header,
.premium-header,
.floating-whatsapp,
.mobile-sticky-actions {
    z-index: 9999 !important;
}

.site-footer,
.premium-footer {
    position: relative !important;
    z-index: 160 !important;
}

/* Keep light backgrounds mostly solid but animation still passes over them */
.kb-solutions,
.kb-process,
.kb-projects,
.kb-home-blog,
.contact-main-section,
.contact-details-section,
.contact-location-section,
.products-control-section,
.products-list-section,
.products-help-v2,
.btu-simple-page {
    background-color: rgba(246,248,251,.97) !important;
}

@media (max-width:700px) {
    .kb-global-bg {
        opacity: .76 !important;
    }
}
/* SADECE ORTADAKİ NAVBAR MENÜ KUTUSUNU AÇAR */

.premium-nav {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
/* SADECE UZUN NAVBAR KUTUSUNUN RENGİ */

.premium-navbar {
    background: #12354d !important;
}
.premium-navbar {
    background: #16415c !important;
}
/* NAVBAR - AÇIK PREMIUM RENK */

body .premium-navbar,
body .premium-header.scrolled .premium-navbar {
    background: linear-gradient( 135deg, rgba(250, 249, 246, 0.98), rgba(245, 247, 247, 0.98) 55%, rgba(239, 244, 245, 0.97) ) !important;
    border-color: rgba(7, 35, 52, 0.10) !important;
    box-shadow: 0 18px 50px rgba(5, 22, 34, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
}
    body .premium-navbar .premium-nav a {
        color: #53636e !important;
    }

        body .premium-navbar .premium-nav a:hover,
        body .premium-navbar .premium-nav a.active {
            color: #071f30 !important;
        }

    body .premium-navbar .premium-phone-copy small {
        color: #74838d !important;
    }

    body .premium-navbar .premium-phone-copy strong {
        color: #071f30 !important;
    }
/* LOGOYU AÇIK NAVBARDA OKUNUR HALE GETİR */

body .premium-brand-wordmark {
    filter: brightness(0.78) contrast(1.35) saturate(1.35) drop-shadow(0 1px 0 rgba(255,255,255,.45)) drop-shadow(0 2px 4px rgba(5,20,30,.18)) !important;
    opacity: 1 !important;
}

body .premium-brand-mark img {
    filter: contrast(1.20) saturate(1.25) drop-shadow(0 2px 5px rgba(5,20,30,.12)) !important;
    opacity: 1 !important;
},body .premium-brand-wordmark {
    filter:
        brightness(0.62)
        contrast(1.55)
        saturate(1.45)
        drop-shadow(0 2px 4px rgba(5,20,30,.22)) !important;
}
body .premium-brand-wordmark {
    filter: brightness(0.62) contrast(1.55) saturate(1.45) drop-shadow(0 2px 4px rgba(5,20,30,.22)) !important;
}
/* =========================================================
   GLOBAL INSTAGRAM FOLLOW
========================================================= */

.kb-instagram-follow {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 225px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(8, 31, 48, 0.10);
    border-radius: 18px;
    box-shadow: 0 15px 45px rgba(6, 27, 42, 0.14), 0 2px 8px rgba(6, 27, 42, 0.06);
    text-decoration: none !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .25s ease, box-shadow .25s ease;
}


/* ICON */

.kb-instagram-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: radial-gradient( circle at 30% 105%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90% );
    box-shadow: 0 7px 18px rgba(214, 36, 159, 0.22);
}


    .kb-instagram-icon svg {
        width: 23px;
        height: 23px;
        fill: none;
        stroke: #ffffff;
        stroke-width: 1.8;
    }


/* TEXT */

.kb-instagram-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}


    .kb-instagram-copy small {
        margin-bottom: 3px;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 1.5px;
        color: #84939d;
    }


    .kb-instagram-copy strong {
        font-size: 14px;
        font-weight: 800;
        color: #071f30;
    }


    .kb-instagram-copy span {
        margin-top: 3px;
        font-size: 10px;
        font-weight: 600;
        color: #74838d;
    }


/* ARROW */

.kb-instagram-arrow {
    margin-left: auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #edf6fc;
    color: #1597e5;
    font-size: 13px;
    font-weight: 800;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}


/* HOVER */

.kb-instagram-follow:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 55px rgba(6, 27, 42, 0.20), 0 4px 12px rgba(6, 27, 42, 0.08);
}


    .kb-instagram-follow:hover .kb-instagram-arrow {
        background: #1597e5;
        color: #ffffff;
        transform: rotate(5deg);
    }


/* MOBILE */

@media (max-width: 768px) {

    .kb-instagram-follow {
        left: 12px;
        bottom: 14px;
        min-width: 0;
        padding: 8px;
        border-radius: 15px;
    }


    .kb-instagram-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }


    .kb-instagram-copy,
    .kb-instagram-arrow {
        display: none;
    }
}
/* =========================================================
   INSTAGRAM - MOBILE FIX
========================================================= */

@media (max-width: 768px) {

    body .kb-instagram-follow {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        left: 14px !important;
        right: auto !important;
        bottom: 18px !important;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        border: 1px solid rgba(8, 31, 48, 0.12) !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 30px rgba(6, 27, 42, 0.18) !important;
        z-index: 999999 !important;
        transform: none !important;
    }

        body .kb-instagram-follow .kb-instagram-icon {
            display: flex !important;
            width: 40px !important;
            height: 40px !important;
            flex: 0 0 40px !important;
            margin: 0 !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 12px !important;
        }

            body .kb-instagram-follow .kb-instagram-icon svg {
                display: block !important;
                width: 22px !important;
                height: 22px !important;
            }

        body .kb-instagram-follow .kb-instagram-copy,
        body .kb-instagram-follow .kb-instagram-arrow {
            display: none !important;
        }
}
/* =========================================================
   INSTAGRAM MOBILE - FULL CARD / NO OVERLAP
========================================================= */

@media (max-width: 768px) {

    body .kb-instagram-follow {
        /* Fixed'i kapat - hiçbir içeriğin üzerine binmez */
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        /* Kartı tekrar tam boy göster */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: calc(100% - 32px) !important;
        height: auto !important;
        min-width: 0 !important;
        margin: 24px 16px !important;
        padding: 12px 14px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 11px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        border: 1px solid rgba(8, 31, 48, 0.10) !important;
        border-radius: 18px !important;
        box-shadow: 0 12px 35px rgba(6, 27, 42, 0.12) !important;
        transform: none !important;
        z-index: 5 !important;
    }


        /* Instagram ikonu */

        body .kb-instagram-follow .kb-instagram-icon {
            display: flex !important;
            width: 44px !important;
            height: 44px !important;
            flex: 0 0 44px !important;
            margin: 0 !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 13px !important;
        }


            body .kb-instagram-follow .kb-instagram-icon svg {
                display: block !important;
                width: 23px !important;
                height: 23px !important;
            }


        /* Yazıları mobilde tekrar göster */

        body .kb-instagram-follow .kb-instagram-copy {
            display: flex !important;
            flex: 1 !important;
            flex-direction: column !important;
            min-width: 0 !important;
        }


            body .kb-instagram-follow .kb-instagram-copy small {
                display: block !important;
                margin-bottom: 3px !important;
                font-size: 8px !important;
                font-weight: 800 !important;
                letter-spacing: 1.4px !important;
                color: #84939d !important;
            }


            body .kb-instagram-follow .kb-instagram-copy strong {
                display: block !important;
                font-size: 14px !important;
                font-weight: 800 !important;
                color: #071f30 !important;
            }


            body .kb-instagram-follow .kb-instagram-copy span {
                display: block !important;
                margin-top: 3px !important;
                font-size: 10px !important;
                font-weight: 600 !important;
                color: #74838d !important;
            }


        /* Sağdaki ok */

        body .kb-instagram-follow .kb-instagram-arrow {
            display: flex !important;
            width: 32px !important;
            height: 32px !important;
            flex: 0 0 32px !important;
            margin-left: auto !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 10px !important;
            background: #edf6fc !important;
            color: #1597e5 !important;
        }
}
/* =========================================================
   GLOBAL INSTAGRAM
========================================================= */

.global-instagram {
    position: fixed !important;
    left: 22px !important;
    bottom: 22px !important;
    width: 230px !important;
    height: 68px !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 10px 12px !important;
    background: #ffffff !important;
    border: 1px solid rgba(7, 31, 48, .12) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 35px rgba(5, 25, 40, .18) !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2147483647 !important;
    box-sizing: border-box !important;
}


/* ICON */

.global-instagram-icon {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
    background: radial-gradient( circle at 30% 105%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90% ) !important;
}

    .global-instagram-icon svg {
        width: 23px !important;
        height: 23px !important;
        fill: none !important;
        stroke: #ffffff !important;
        stroke-width: 1.8 !important;
    }


/* TEXT */

.global-instagram-text {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    line-height: 1.1 !important;
}

    .global-instagram-text small {
        display: block !important;
        margin-bottom: 3px !important;
        color: #84939d !important;
        font-size: 8px !important;
        font-weight: 800 !important;
        letter-spacing: 1.3px !important;
    }

    .global-instagram-text strong {
        display: block !important;
        color: #071f30 !important;
        font-size: 14px !important;
        font-weight: 800 !important;
    }

    .global-instagram-text span {
        display: block !important;
        margin-top: 3px !important;
        color: #74838d !important;
        font-size: 10px !important;
        font-weight: 600 !important;
    }


/* ARROW */

.global-instagram-arrow {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9px !important;
    background: #edf6fc !important;
    color: #1597e5 !important;
    font-weight: 800 !important;
}


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

@media (max-width: 768px) {

    .global-instagram {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        left: 12px !important;
        right: auto !important;
        /*
           WhatsApp sağ altta olduğu için sol tarafta tutuyoruz.
           Alt navigasyon vb. ile çakışmaması için biraz yukarıda.
        */
        bottom: 18px !important;
        width: 205px !important;
        height: 62px !important;
        padding: 8px 10px !important;
        border-radius: 16px !important;
        z-index: 2147483647 !important;
    }

    .global-instagram-icon {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
    }

        .global-instagram-icon svg {
            width: 21px !important;
            height: 21px !important;
        }

    .global-instagram-text {
        display: flex !important;
    }

        .global-instagram-text small {
            font-size: 7px !important;
        }

        .global-instagram-text strong {
            font-size: 13px !important;
        }

        .global-instagram-text span {
            font-size: 9px !important;
        }

    .global-instagram-arrow {
        display: flex !important;
        width: 27px !important;
        height: 27px !important;
        flex-basis: 27px !important;
    }
}
/* =========================================================
   MOBILE INSTAGRAM - ALT BUTONLARLA ÇAKIŞMA FIX
========================================================= */

@media (max-width: 768px) {

    body .global-instagram {
        position: fixed !important;
        left: 12px !important;
        right: auto !important;
        /* Teklif Al + WhatsApp barının üstüne çıkar */
        bottom: 92px !important;
        width: 205px !important;
        height: 62px !important;
        z-index: 99999 !important;
    }
}