/*==================================================
REMKIM DESIGN SYSTEM
==================================================*/

:root {

    /* Ana Renkler */

    --primary: #149fe9;

    --primary-dark: #0b75d1;

    --secondary: #071b31;

    --secondary-light: #123c63;

    --white: #ffffff;

    --background: #f6f9fc;

    --text: #0b2238;

    --text-light: #627789;

    --border: #e4edf5;

    /* Gölge */

    --shadow-sm: 0 10px 20px rgba(0, 0, 0, .05);

    --shadow-md: 0 20px 40px rgba(0, 0, 0, .08);

    --shadow-lg: 0 30px 60px rgba(0, 0, 0, .12);

    /* Radius */

    --radius: 22px;

    --radius-lg: 30px;

    /* Transition */

    --transition: .35s ease;

    /* Card System */

    --card-radius: 22px;
    --card-border: 1px solid var(--border);
    --card-shadow: 0 15px 40px rgba(0, 0, 0, .05);
    --card-transition: var(--transition);

    /* Container */

    --container: 1200px;
    --container-width: min(var(--container), 92%);

    /* Header */

    --header-height: 82px;
    --header-height-scroll: 68px;

    /* Z-index */

    --z-header: 9999;
    --z-overlay: 5;
    --z-content: 2;

}

html {

    scroll-behavior: smooth;

}

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

body {

    font-family: Arial, sans-serif;

    color: var(--text);

    background: var(--background);

    overflow-x: hidden;

    line-height: 1.6;

}

.container {

    width: var(--container-width);

    margin-inline: auto;

}

a {

    color: inherit;

    text-decoration: none;

}

ul {

    list-style: none;

}

img {

    display: block;

    max-width: 100%;

}



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

.site-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: var(--z-header);

    background: rgba(5, 18, 33, .68);

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

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

    transition:
        background .35s ease,
        box-shadow .35s ease,
        backdrop-filter .35s ease;

}

.site-header .container {

    height: var(--header-height);

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.logo {

    display: flex;

    flex-direction: column;

    text-decoration: none;

    color: #fff;

    font-size: 34px;

    font-weight: 800;

    letter-spacing: 2px;

    cursor: pointer;

    transition: .35s;

}

.logo-main {

    line-height: 1;

}

.logo:hover {

    color: #22b8ff;

}

.logo-sub {

    color: #8fb7d9;

    font-size: 12px;

    letter-spacing: .8px;

    margin-top: 4px;

}

.main-nav ul {

    display: flex;

    align-items: center;

    gap: 34px;

    margin: 0;

    padding: 0;

}

.main-nav a {

    position: relative;

    display: block;

    padding: 10px 0;

    color: #fff;

    font-size: 15px;

    transition: .30s;

}

nav a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -4px;

    width: 0;

    height: 2px;

    background: #149fe9;

    transition: .30s;

}

nav a:hover::after,

nav a.active::after {

    width: 100%;

}

.main-nav a:hover {

    color: #21b7ff;

}

.header-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 28px;

    border-radius: 40px;

    background: #18a8f5;

    color: #fff;

    font-weight: 600;

    white-space: nowrap;

    transition: .30s;

}

.header-button:hover {

    transform: translateY(-3px);

}


/* Scroll sonrası Header */

.site-header.scrolled {

    background: rgba(5, 18, 33, .94);

    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);

    backdrop-filter: blur(14px);

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

}

.site-header.scrolled::after {

    opacity: 1;

}

.site-header.scrolled .container {

    height: var(--header-height-scroll);

}

.site-header.scrolled .logo {

    font-size: 28px;

}

.site-header::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 1px;

    background: linear-gradient(90deg,

            transparent,

            rgba(20, 159, 233, .45),

            transparent);

    opacity: 0;

    transition: .35s;

}

.site-header:hover {

    box-shadow:

        0 14px 45px rgba(0, 0, 0, .08);

}

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

.hero {

    padding-top: 140px;
    padding-bottom: 80px;

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(135deg, #03111f 0%, #071b31 45%, #0b2744 100%);

    color: #fff;

}

.hero-container {

    display: grid;

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

    align-items: center;

    gap: 70px;

    position: relative;

    z-index: var(--z-content);

}

.hero-tag {

    display: inline-block;

    color: #24b8ff;

    letter-spacing: 2px;

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 20px;

    text-transform: uppercase;

    position: relative;

    backdrop-filter: blur(10px);

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

    border: 1px solid rgba(20, 159, 233, .15);

}

.hero h1 {

    font-size: 72px;

    line-height: 1.02;

    font-weight: 800;

    letter-spacing: -2px;

    margin-bottom: 34px;

    max-width: 760px;

}

.hero h1 span {

    color: #22b8ff;

}

.hero p {

    font-size: 20px;

    line-height: 1.9;

    color: #bdd1e2;

    max-width: 650px;

}

.hero-buttons {

    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 45px;

}

.btn-primary {

    padding: 18px 38px;

    border-radius: 50px;

    background: linear-gradient(135deg, #20b9ff, #0076d6);

    color: #fff;

    text-decoration: none;

    font-weight: 600;

    box-shadow: 0 15px 35px rgba(0, 140, 255, .28);

    transition: .35s;

    overflow: hidden;

    position: relative;

}

.btn-primary:hover {

    transform: translateY(-5px);

    box-shadow:

        0 20px 40px rgba(20, 159, 233, .28);

}

.btn-outline {

    padding: 16px 34px;

    border: 2px solid #1caeff;

    border-radius: 40px;

    background: #ffffff;

    color: #0A5FFF;

    text-decoration: none;

    font-weight: 600;

    transition: .35s;

}

.btn-outline:hover {

    background: #0A5FFF;

    color: #ffffff;

}

.hero-background {

    position: absolute;

    inset: 0;

}

.grid-overlay {

    opacity: .45;

    position: absolute;

    inset: 0;

    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: 60px 60px;

}

.glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

}

.glow-1 {

    width: 520px;

    height: 520px;

    background: #129ee8;

    top: -180px;

    right: -180px;

    opacity: .55;

}

.glow-2 {

    width: 420px;

    height: 420px;

    background: #0a4e86;

    bottom: -180px;

    left: -180px;

    opacity: .40;

}

.hero-right {

    display: flex;

    justify-content: center;

    align-items: center;

}

.network {

    position: relative;

    width: 520px;

    height: 520px;

}

.network-lines {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

}

.network-lines line {

    animation: linePulse 4s infinite;

    stroke: rgba(35, 180, 255, .28);

    stroke-width: 2;

}

.network-core {

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

    animation: pulse 5s infinite;

    position: absolute;

    left: 50%;

    top: 50%;

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

    width: 170px;

    height: 170px;

    border-radius: 50%;

    background: linear-gradient(135deg, #18a7f4, #0d4d8a);

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 28px;

    font-weight: 700;

    box-shadow: 0 0 50px rgba(24, 167, 244, .35);

}

.node {

    cursor: pointer;

    position: absolute;

    width: 150px;

    padding: 14px;

    border-radius: 14px;

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

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

    backdrop-filter: blur(10px);

    text-align: center;

    color: #fff;

    font-size: 14px;

    transition: .35s;

}

.node:hover {

    box-shadow: 0 0 35px rgba(24, 167, 244, .35);

    transform: scale(1.05);

    background: rgba(24, 167, 244, .15);

}

.node-top {

    left: 185px;

    top: 0;

}

.node-right {

    right: 0;

    top: 185px;

}

.node-bottom {

    left: 185px;

    bottom: 0;

}

.node-left {

    left: 0;

    top: 185px;

}

@keyframes pulse {

    0% {

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

    }

    50% {

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

    }

    100% {

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

    }

}

.hero-tag::after {

    content: "";

    display: block;

    margin-top: 14px;

    width: 90px;

    height: 2px;

    background: #22b8ff;

    border-radius: 5px;

}

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

.tech-lines {

    position: absolute;

    inset: 0;

    opacity: .10;

    background-image:

        linear-gradient(90deg, transparent 48%, rgba(34, 184, 255, .8) 50%, transparent 52%),

        linear-gradient(transparent 48%, rgba(34, 184, 255, .5) 50%, transparent 52%);

    background-size: 220px 220px;

    animation: techMove 25s linear infinite;

}

@keyframes techMove {

    from {

        background-position: 0 0, 0 0;

    }

    to {

        background-position: 220px 220px, -220px 220px;

    }

}

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

.particles {

    position: absolute;

    inset: 0;

}

.particle {

    position: absolute;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #28c4ff;

    box-shadow: 0 0 18px #28c4ff;

    animation: floatParticle 7s ease-in-out infinite;

}

.p1 {

    left: 12%;

    top: 20%;

}

.p2 {

    left: 82%;

    top: 18%;

    animation-delay: 1s;

}

.p3 {

    left: 75%;

    top: 72%;

    animation-delay: 2s;

}

.p4 {

    left: 18%;

    top: 68%;

    animation-delay: 3s;

}

.p5 {

    left: 52%;

    top: 12%;

    animation-delay: 4s;

}

.p6 {

    left: 55%;

    top: 84%;

    animation-delay: 5s;

}

@keyframes floatParticle {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-15px);

    }

    100% {

        transform: translateY(0);

    }

}

@keyframes linePulse {

    0% {

        opacity: .20;

    }

    50% {

        opacity: .75;

    }

    100% {

        opacity: .20;

    }

}

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

.hero-bottom {

    margin-top: 80px;

    width: 100%;

}

.hero-stats {

    display: flex;

    justify-content: center;

    gap: 70px;

    margin-bottom: 35px;

}

.stat-item {

    text-align: center;

}

.stat-item strong {

    display: block;

    color: #22b8ff;

    font-size: 32px;

    font-weight: 800;

    margin-bottom: 8px;

}

.stat-item span {

    color: #c4d5e5;

    font-size: 14px;

    letter-spacing: .5px;

}

.scroll-indicator {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    width: 34px;

    height: 60px;

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

    border-radius: 30px;

    margin: auto;

    padding-top: 8px;

}

.scroll-indicator span {

    width: 6px;

    height: 10px;

    border-radius: 20px;

    background: #22b8ff;

    animation: scrollMouse 2s infinite;

}

@keyframes scrollMouse {

    0% {

        transform: translateY(0);

        opacity: 1;

    }

    100% {

        transform: translateY(24px);

        opacity: 0;

    }

}

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

.about {

    padding: 140px 0;

    background: var(--white);

}

.about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;

}

.section-tag {

    display: inline-block;

    color: #149fe9;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 18px;

}

.about h2 {

    font-size: 52px;

    line-height: 1.15;

    margin-bottom: 30px;

    color: var(--text);

}

.about h2 span {

    color: #149fe9;

}

.about p {

    color: #5e7387;

    line-height: 1.9;

    margin-bottom: 22px;

    font-size: 17px;

}

.about-right {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

}

.feature-card {

    background: var(--white);

    padding: 34px 26px;

    border: var(--card-border);

    border-radius: 18px;

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

    transition: var(--card-transition);
}

.feature-card:hover {

    transform: translateY(-8px);

    border-color: #22b8ff;

    box-shadow: 0 20px 45px rgba(34, 184, 255, .18);

}

.feature-card h3 {

    color: var(--text);

    margin-bottom: 14px;

}

.feature-card h4 {

    margin: 12px 0 18px;

    min-height: 2.8em;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    line-height: 1.35;

}

@media (max-width:768px) {

    .feature-card h4 {

        font-size: 1.1rem;

        line-height: 1.35;

    }

}

.feature-card p {

    margin: 0;

    font-size: 15px;

}

/*==================================================
WHY REMKİM
==================================================*/

.why {

    padding: 140px 0;

    background: var(--white);

    counter-reset: whyCounter;

}

.why-grid {

    display: grid;

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

    gap: 35px;

    margin-top: 70px;

    align-items: stretch;

}

.why-card {

    position: relative;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    padding: 40px;

    background: #fff;

    border: var(--card-border);

    border-radius: var(--card-radius);

    box-shadow: var(--card-shadow);

    transition: var(--card-transition);

    counter-increment: whyCounter;


}

.why-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(90deg, #149fe9, #54c8ff);

    transform: scaleX(0);

    transform-origin: left;

    transition: .35s;

}

.why-card::after {

    content: counter(whyCounter, decimal-leading-zero);

    position: absolute;

    right: 24px;

    top: 18px;

    font-size: 56px;

    font-weight: 800;

    color: rgba(20, 159, 233, .08);

    pointer-events: none;

}

.why-card:hover {

    transform: translateY(-10px);

    border-color: #149fe9;

    box-shadow: 0 25px 60px rgba(20, 159, 233, .15);

}

.why-card:hover::before {

    transform: scaleX(1);

}

.why-card h3 {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 60px;

    text-align: center;

    line-height: 1.3;

}

.why-card p {

    color: #627789;

    line-height: 1.75;

    flex: 1;

}

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

.process {

    padding: 150px 0;

    background: #071b31;

    color: #ffffff;

}

.process h2 {

    font-size: 52px;

    margin: 22px 0;

    max-width: 720px;

}

.process h2 span {

    color: #22b8ff;

}

.process .section-text {

    color: #bfd0de;

    max-width: 780px;

}

.process-flow {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 10px;

    margin-top: 80px;

    flex-wrap: nowrap;

}

.step {

    flex: 1;

    text-align: center;

    position: relative;

}

.step-icon {

    width: 90px;

    height: 90px;

    margin: auto;

    border-radius: 50%;

    background: linear-gradient(135deg, #22b8ff, #0a67b5);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

    font-weight: 700;

    color: #fff;

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

    transition: var(--card-transition);

}

.step:hover .step-icon {

    transform: translateY(-8px) scale(1.05);

}

.step h3 {

    margin-top: 25px;

    margin-bottom: 15px;

    font-size: 20px;

}

.step p {

    color: #b8cddd;

    line-height: 1.7;

    font-size: 15px;

}

.flow-line {

    flex: 0 0 60px;

    height: 2px;

    margin-top: 45px;

    background: linear-gradient(90deg, #22b8ff, rgba(34, 184, 255, .15));

}

/*==================================================
PRODUCTS
==================================================*/

.products {

    padding: 150px 0;

    background: var(--white);

}

.products h2 {

    font-size: 52px;

    color: var(--text);

    margin: 20px 0;

    max-width: 760px;

}

.products h2 span {

    color: #149fe9;

}

.product-grid {

    display: grid;

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

    gap: 30px;

    margin-top: 70px;

}

.product-card {

    background: var(--white);

    border: var(--card-border);

    border-radius: var(--card-radius);

    padding: 34px 28px;

    transition: var(--card-transition);

    position: relative;

    overflow: hidden;

    border-radius: 28px;
    
    overflow: hidden;

}

.product-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 4px;

    background: #1caeff;

    transform: scaleX(0);

    transform-origin: left;

    transition: var(--card-transition);

}


.product-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 22px 50px rgba(0, 0, 0, .08);

}

.product-card:hover::before {

    transform: scaleX(1);

}

.product-card h3 {

    color: var(--text);

    margin-bottom: 18px;

    font-size: 24px;

}

.product-card p {

    color: #627789;

    line-height: 1.8;

    margin-bottom: 30px;

}

.product-card span {

    display: inline-block;

    color: #149fe9;

    font-weight: 700;

    letter-spacing: .5px;

}

.featured {

    background: linear-gradient(135deg, #0b2238, #123c63);

}

.featured h3,

.featured p,

.featured span {

    color: #ffffff;

}

/* ==================================================
   FEATURED PRODUCT FAMILY
================================================== */

.featured-card {

    position: relative;

    padding: 42px;

    border: 2px solid rgba(20, 159, 233, .12);

    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);

    overflow: hidden;

}

.featured-card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 5px;

    background: linear-gradient(90deg, #0A5FFF, #43A1FF);

}

.card-type {

    display: inline-flex;

    align-items: center;

    padding: 8px 14px;

    border-radius: 999px;

    background: #eef5ff;

    color: #0A5FFF;

    font-size: .78rem;

    font-weight: 700;

    letter-spacing: .8px;

    margin-bottom: 24px;

}

.featured-card h3 {

    font-size: 2rem;

    margin-bottom: 8px;

    color: var(--text);

    font-size: 1.45rem;

    line-height: 1.3;

    text-align: center;

}

.featured-card h4 {

    font-size: 1.15rem;

    color: #0A5FFF;

    font-weight: 600;

    margin-bottom: 22px;

}

.featured-card p {

    font-size: 1rem;

    line-height: 1.8;

    color: #5f6675;

    max-width: 620px;

    margin-bottom: 32px;

}

.featured-card .btn {

    width: max-content;

}

/*==================================================
INDUSTRIES
==================================================*/

.industries {

    padding: 150px 0;

    background: var(--background);

}

.industries h2 {

    font-size: 52px;

    margin: 20px 0;

    color: var(--text);

}

.industries h2 span {

    color: #149fe9;

}

.industry-grid {

    display: grid;

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

    gap: 28px;

    margin-top: 70px;

}

.industry-card {

    background: var(--white);

    border-radius: 20px;

    padding: 40px 28px;

    border: var(--card-border);

    position: relative;

    overflow: hidden;

    transition: var(--card-transition);

    min-height: 180px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

}

.industry-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(circle at top right,
            rgba(34, 184, 255, .18),
            transparent 60%);

    opacity: 0;

    transition: var(--card-transition);

}

.industry-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);

}

.industry-card:hover::before {

    opacity: 1;

}

.industry-no {

    position: absolute;

    top: 25px;

    right: 25px;

    font-size: 40px;

    font-weight: 800;

    color: #dde9f2;

}

.industry-card h3 {

    font-size: 24px;

    color: var(--text);

    z-index: 2;

}

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

.cta {

    padding: 170px 0;

    text-align: center;

    background:
        linear-gradient(135deg, #071b31, #0b2f52);

    position: relative;

    overflow: hidden;

}

.cta::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    border-radius: 50%;

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

    left: -250px;

    top: -250px;

}

.cta::after {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    border-radius: 50%;

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

    right: -220px;

    bottom: -220px;

}

.cta .container {

    position: relative;

    z-index: var(--z-content);

}

.cta h2 {

    font-size: 62px;

    color: #ffffff;

    margin-bottom: 30px;

}

.cta h2 span {

    color: #22b8ff;

}

.cta p {

    max-width: 760px;

    margin: auto;

    color: #c8d7e5;

    line-height: 2;

    font-size: 20px;

    margin-bottom: 50px;

}

.cta-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}

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

.contact {

    padding: 150px 0;

    background: var(--white);

}

.contact-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: start;

}

.contact h2 {

    font-size: 52px;

    margin: 20px 0;

    color: var(--text);

}

.contact h2 span {

    color: #149fe9;

}

.contact-info>p {

    color: #627789;

    line-height: 1.9;

    margin-bottom: 40px;

}

.info-box {

    padding: 22px 28px;

    border: var(--card-border);

    border-radius: 16px;

    margin-bottom: 18px;

    transition: var(--card-transition);

}

.info-box:hover {

    border-color: #22b8ff;

    transform: translateX(6px);

}

.info-box h3 {

    color: var(--text);

    margin-bottom: 8px;

    font-size: 18px;

}

.info-box p {

    margin: 0;

    color: #627789;

}

.contact-form {

    background: #f7fafc;

    padding: 40px;

    border-radius: var(--card-radius);

    box-shadow: 0 20px 45px rgba(0, 0, 0, .06);

}

.contact-form form {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.contact-form input,

.contact-form textarea {

    padding: 18px;

    border: 1px solid #dce7f0;

    border-radius: 12px;

    font-size: 16px;

    font-family: inherit;

    outline: none;

    transition: var(--card-transition);

    resize: vertical;

}

.contact-form input:focus,

.contact-form textarea:focus {

    border-color: #22b8ff;

    box-shadow: 0 0 0 4px rgba(34, 184, 255, .12);

}

.contact-form button {

    border: none;

    cursor: pointer;

    align-self: flex-start;

}

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

.footer {

    background: #071b31;

    color: #d8e5ef;

    padding-top: 90px;

}

.footer-grid {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1.2fr;

    gap: 50px;

    padding-bottom: 60px;

}

.footer-logo {

    font-size: 34px;

    font-weight: 800;

    color: #ffffff;

    letter-spacing: 2px;

    margin-bottom: 25px;

}

.footer-about p {

    line-height: 1.9;

    color: #b8cad8;

}

.footer h3 {

    color: #ffffff;

    margin-bottom: 25px;

    font-size: 20px;

}

.footer-links {

    display: flex;

    flex-direction: column;

}

.footer-links a {

    color: #b8cad8;

    text-decoration: none;

    margin-bottom: 14px;

    transition: var(--card-transition);

}

.footer-links a:hover {

    color: #22b8ff;

    padding-left: 6px;

}

.footer-contact p {

    margin-bottom: 15px;

    color: #b8cad8;

}

.footer-bottom {

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

    text-align: center;

    padding: 28px 0;

    color: #8da8bb;

    font-size: 14px;

}

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

.reveal {

    opacity: 0;

    transform: translateY(70px);

    transition:
        opacity .9s ease,
        transform .9s ease;

}

.reveal.active {

    opacity: 1;

    transform: translateY(0);

}

/*==================================================
ACTIVE MENU
==================================================*/

nav a.active {

    color: #22b8ff;

}

nav a.active::after {

    width: 100%;

}

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

.menu-toggle {

    display: none;

    width: 42px;

    height: 42px;

    cursor: pointer;

    flex-direction: column;

    justify-content: center;

    gap: 6px;

}

.menu-toggle span {

    width: 28px;

    height: 3px;

    background: #ffffff;

    border-radius: 10px;

    transition: .35s;

}

/*--------------------------------------------------
TABLET
--------------------------------------------------*/

@media(max-width:992px) {

    .hero-right {

        order: -1;

    }

    .product-grid {

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

    }

    .industry-grid {

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

    }

    .contact-grid {

        grid-template-columns: 1fr;

    }

    .footer-grid {

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

    }

    .featured-card {

        grid-column: span 1;

    }

}

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

@media(max-width:768px) {

    .featured-card {

        padding: 32px 24px;

    }

    .featured-card h3 {

        font-size: 1.45rem;

        line-height: 1.3;

        text-align: center;

    }

    nav {

        position: fixed;

        right: -100%;

        top: 82px;

        width: 300px;

        height: calc(100vh - 82px);

        background: #071b31;

        display: flex;

        flex-direction: column;

        padding: 45px 30px;

        transition: var(--transition);

        z-index: var(--z-overlay);

    }


    nav a {

        margin: 0 0 24px 0;

        font-size: 18px;

    }

    .btn-header {

        margin: 25px 0 0;

        text-align: center;

        font-weight: 700;

        letter-spacing: .3px;

    }

    .menu-toggle {

        display: flex;

        position: absolute;

        right: 20px;

        top: 20px;

    }

    .hero h1 {

        font-size: 44px;

    }

    .products h2,

    .why h2,

    .contact h2,

    .industries h2,

    .process h2,

    .cta h2 {

        font-size: 38px;

    }

    .product-grid,

    .industry-grid,

    .footer-grid {

        grid-template-columns: 1fr;

    }

}

@media(max-width:576px) {

    .network {

        width: 280px;

        height: 280px;

        margin: auto;

    }

    .network-core {

        width: 120px;

        height: 120px;

        font-size: 1.3rem;

    }

}

.hero-right {

    overflow: hidden;

}

@media (max-width:768px) {

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


    .site-header .container {

        height: 72px;

        padding: 0 16px;

    }

    .logo {

        font-size: 22px;

        letter-spacing: 1px;

    }

    .logo-sub {

        font-size: 9px;

        line-height: 1.3;

    }

    .main-nav {

        position: fixed;

        top: 72px;

        left: 0;

        width: 100%;

        background: #071a2f;

        display: none;

        padding: 30px 0;

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

    }

    .main-nav.active {

        display: block;

    }

    .main-nav ul {

        flex-direction: column;

        gap: 0;

        align-items: center;

    }

    .main-nav li {

        width: 100%;

        text-align: center;

    }

    .main-nav a {

        display: block;

        padding: 18px 0;

        font-size: 18px;

    }

    .header-button {

        padding: 12px 18px;

        font-size: 15px;

        margin-right: 55px;

    }

    .menu-toggle {

        display: flex;

        align-items: center;

        justify-content: center;

        width: 44px;

        height: 44px;

        position: absolute;

        right: 16px;

        top: 14px;

        cursor: pointer;

        z-index: 10001;

    }

}

/*==================================================
MENU TOGGLE ANIMATION
==================================================*/

/*==================================================
PREMIUM CARD EFFECT
==================================================*/

.why-card,
.product-card,
.industry-card {

    position: relative;

    overflow: hidden;

    isolation: isolate;

}

.why-card::before,
.product-card::after,
.industry-card::after {

    content: "";

    position: absolute;

    left: -140%;

    top: 0;

    width: 70%;

    height: 100%;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .28),
            transparent);

    transform: skewX(-25deg);

    transition: left .8s var(--transition);

    pointer-events: none;

}

.why-card::before,
.product-card::after,
.industry-card::after {

    left: 170%;

}

/*==================================================
BUTTON LIGHT EFFECT
==================================================*/

.btn-primary::after {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 60%;

    height: 100%;

    background: linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .45),

            transparent);

    transform: skewX(-25deg);

    transition: left .6s;

}

.btn-primary:hover::after {

    left: 180%;

}

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

@keyframes floatGlow {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-20px);

    }

    100% {

        transform: translateY(0);

    }

}

.glow {

    animation: floatGlow 7s ease-in-out infinite;

}

.glow-2 {

    animation-delay: 3s;

}

/*==================================================
PAGE LOAD
==================================================*/

body {

    animation: pageFade .7s ease;

    overflow-x: hidden;

}

@keyframes pageFade {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

/*==================================================
GLOBAL RADIUS
==================================================*/

/*==================================================
GLOBAL CARD SYSTEM
==================================================*/

.why-card,
.product-card,
.industry-card,
.info-box,
.contact-form {

    border-radius: var(--card-radius);

    transition: var(--card-transition);

    box-shadow: var(--card-shadow);

}

.why-card:hover,
.product-card:hover,
.industry-card:hover {

    box-shadow: var(--shadow-md);

}

/*==================================================
GLOBAL TITLES
==================================================*/

.section-tag{

    display:inline-flex;

    align-items:center;

    padding:10px 22px;

    border-radius:50px;

    background:#eef6ff;

    color:#0A5FFF;

    font-size:.80rem;

    font-weight:700;

    letter-spacing:1.4px;

    text-transform:uppercase;

    margin-bottom:28px;

}

section h2 {

    font-weight: 800;

    line-height: 1.15;

}

section h2 span {

    color: var(--primary);

}

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

section {

    position: relative;

}

section::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 0;

    transform: translateX(-50%);

    width: 120px;

    height: 2px;

    background: linear-gradient(90deg,

            transparent,

            rgba(20, 159, 233, .45),

            transparent);

}

.footer::after {

    display: none;

}

/*==================================================
READABILITY
==================================================*/

p {

    line-height: 1.8;

}

h1,
h2,
h3 {

    letter-spacing: -.4px;

}

/*==================================================
SVG ICON SYSTEM
==================================================*/

.icon-box {

    width: 64px;

    height: 64px;

    border-radius: 18px;

    background: linear-gradient(135deg, #149fe9, #0b75d1);

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

    box-shadow: 0 18px 35px rgba(20, 159, 233, .20);

    transition: var(--card-transition);

}

.icon-box svg {

    width: 30px;

    height: 30px;

    stroke: #ffffff;

    stroke-width: 2;

    fill: none;

}

.why-card:hover .icon-box,
.product-card:hover .icon-box,
.industry-card:hover .icon-box {

    transform: translateY(-6px) rotate(-3deg);

}

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

.info-box {

    display: flex;

    align-items: flex-start;

    gap: 18px;

}

.info-icon {

    width: 52px;

    height: 52px;

    flex-shrink: 0;

    border-radius: 14px;

    background: rgba(20, 159, 233, .08);

    display: flex;

    justify-content: center;

    align-items: center;

}

.info-icon svg {

    width: 24px;

    height: 24px;

    stroke: #149fe9;

    stroke-width: 2;

    fill: none;

}

/*==================================================
SECTION BACKGROUND
==================================================*/

.about,
.products,
.contact {

    position: relative;

    overflow: hidden;

}

.about::before,
.products::before,
.contact::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: radial-gradient(rgba(20, 159, 233, .08),

            transparent 70%);

    right: -180px;

    top: -180px;

    pointer-events: none;

}

/*==================================================
IMAGE PLACEHOLDER
==================================================*/

.image-frame {

    position: relative;

    overflow: hidden;

    border-radius: var(--card-radius);

    background: linear-gradient(135deg, #f7fbff, #edf6fc);

    border: var(--card-border);

    min-height: 320px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.image-frame::before {

    content: "REMKİM";

    font-size: 42px;

    font-weight: 800;

    color: rgba(20, 159, 233, .15);

    letter-spacing: 4px;

}

/*==================================================
MICRO INTERACTIONS
==================================================*/

a,
button {

    transition: var(--transition);

}

img {

    max-width: 100%;

    display: block;

}

::selection {

    background: #149fe9;

    color: #ffffff;

}

/*==================================================
HERO PREMIUM EFFECT
==================================================*/

.hero {

    position: relative;

    overflow: hidden;

}

.hero::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    right: -220px;

    top: -220px;

    border-radius: 50%;

    background: radial-gradient(rgba(20, 159, 233, .18),

            transparent 70%);

    pointer-events: none;

}

.hero::after {

    content: "";

    position: absolute;

    left: -280px;

    bottom: -280px;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    background: radial-gradient(rgba(11, 117, 209, .10),

            transparent 72%);

    pointer-events: none;

}

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

.hero h1 {

    position: relative;

    z-index: 2;

    line-height: 1.05;

    letter-spacing: -1px;

}

.hero h1 span {

    display: inline-block;

    background: linear-gradient(90deg,

            #149fe9,

            #54c8ff,

            #149fe9);

    background-size: 220%;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: heroGradient 6s linear infinite;

}

@keyframes heroGradient {

    from {

        background-position: 0%;

    }

    to {

        background-position: 220%;

    }

}

/*==================================================
BUTTON PREMIUM
==================================================*/

.btn-primary,
.btn-outline,
.btn-header {

    backdrop-filter: blur(12px);

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

}

.btn-primary:hover {

    transform: translateY(-4px) scale(1.02);

}

.btn-outline:hover {

    transform: translateY(-4px);

    border-color: #149fe9;

    color: #149fe9;

}

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

.why-card::before,
.product-card::before,
.industry-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(90deg,

            #149fe9,

            #54c8ff);

    transform: scaleX(0);

    transform-origin: left;

    transition: var(--card-transition);

}

.why-card:hover::before,
.product-card:hover::before,
.industry-card:hover::before {

    transform: scaleX(1);

}

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

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: #eef4f8;

}

::-webkit-scrollbar-thumb {

    background: #149fe9;

    border-radius: 20px;

}

::-webkit-scrollbar-thumb:hover {

    background: #0b75d1;

}

/*==================================================
PROGRESS BAR
==================================================*/

.progress-bar {

    position: absolute;

    left: 0;

    top: 0;

    width: 0;

    height: 3px;

    background: linear-gradient(90deg, #149fe9, #54c8ff);

    z-index: var(--z-header);

    transition: width .12s linear;

}

/*==================================================
BACK TO TOP
==================================================*/

/*==================================================
BACK TO TOP
==================================================*/

.back-to-top {

    position: fixed;

    right: 24px;

    bottom: 24px;

    width: 52px;

    height: 52px;

    border: none;

    border-radius: 50%;

    background: var(--primary);

    color: #fff;

    font-size: 22px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px);

    transition: .3s;

    z-index: 999;

}

.back-to-top.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

.back-to-top:hover {

    transform: translateY(-4px);

}

/*==================================================
CARD NUMBER
==================================================*/


/*==================================================
CARD DEPTH
==================================================*/

.why-card:hover,
.product-card:hover,
.industry-card:hover {

    transform: translateY(-10px);

    box-shadow:

        0 20px 30px rgba(0, 0, 0, .08),

        0 40px 80px rgba(20, 159, 233, .12);

}

.hero-left {

    animation: heroLeft .9s ease;

}

.hero-right {

    animation: heroRight 1.1s ease;

}

@keyframes heroLeft {

    from {

        opacity: 0;

        transform: translateX(-50px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

@keyframes heroRight {

    from {

        opacity: 0;

        transform: translateX(50px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

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

.product-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 22px;

    color: var(--primary);

    font-weight: 700;

    text-decoration: none;

    transition: var(--transition);

}

.product-link:hover {

    gap: 14px;

}

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

.product-badge {

    display: inline-flex;

    align-items: center;

    padding: 7px 14px;

    margin-bottom: 18px;

    border-radius: 999px;

    background: rgba(20, 159, 233, .10);

    color: var(--primary);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .8px;

    text-transform: uppercase;

}

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

.product-note {

    margin-top: 18px;

    color: var(--muted);

    font-size: 14px;

    font-style: italic;

}

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

.product-features {

    list-style: none;

    margin: 22px 0 18px;

    padding: 0;

}

.product-features li {

    position: relative;

    padding-left: 22px;

    margin-bottom: 10px;

    color: var(--muted);

    font-size: 15px;

}

.product-features li::before {

    content: "";

    position: absolute;

    left: 0;

    top: 8px;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--primary);

}

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

.product-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin: 18px 0;

}

.product-meta span {

    padding: 6px 12px;

    border-radius: 999px;

    background: rgba(20, 159, 233, .08);

    color: var(--primary);

    font-size: 13px;

    font-weight: 600;

}

/* ==================================================
ÜRÜNLER SAYFASI
V7.0
================================================== */

/* ---------- PAGE HERO ---------- */

.page-hero {

    padding: 140px 0 90px;

    background: linear-gradient(135deg, #f8fbff, #eef5ff);

    text-align: center;

}

.page-hero h1 {

    font-size: clamp(2.5rem, 5vw, 4rem);

    margin: 20px 0;

}

.page-hero h1 span {

    color: var(--primary);

}

.page-hero p {

    max-width: 820px;

    margin: 0 auto;

    font-size: 1.15rem;

    line-height: 1.9;

    color: var(--muted);

}


/* ---------- SYSTEM GRID ---------- */

.systems {

    padding: 100px 0;

}

.system-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 35px;

}


/* ---------- SYSTEM CARD ---------- */

.system-card {

    background: var(--white);

    border-radius: var(--card-radius);

    padding: 45px;

    border: var(--card-border);

    box-shadow: var(--card-shadow);

    transition: var(--card-transition);

}

.system-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 60px rgba(0, 0, 0, .10);

}


.system-category {

    display: inline-block;

    margin-bottom: 18px;

    font-size: .82rem;

    font-weight: 700;

    letter-spacing: 1px;

    color: var(--primary);

    text-transform: uppercase;

}

.system-card h2 {

    margin-bottom: 18px;

    color: var(--text);

}

.system-card p {

    line-height: 1.8;

    color: var(--muted);

    margin-bottom: 30px;

}


/* ---------- SOON ---------- */

.system-card.soon {

    opacity: .72;

}

/* ---------- ACTIVE SYSTEM ---------- */

.system-card:first-child {

    position: relative;

    border: 2px solid rgba(10, 95, 255, .18);

}

.system-card:first-child::after {

    content: "AKTİF SİSTEM";

    position: absolute;

    top: 22px;

    right: 22px;

    background: linear-gradient(135deg, #0A5FFF, #2E7DFF);

    color: #fff;

    font-size: .72rem;

    font-weight: 700;

    padding: 8px 14px;

    border-radius: 999px;

    letter-spacing: .5px;

}


/* ---------- APPROACH ---------- */

.approach {

    padding: 110px 0;

    background: var(--background);

}

.approach h2 {

    text-align: center;

    margin-bottom: 40px;

}

.approach p {

    max-width: 900px;

    margin: 0 auto 25px;

    line-height: 1.9;

    text-align: center;

    color: var(--muted);

}

.family-list {

    margin: 24px 0;

    display: flex;

    flex-direction: column;

    gap: 8px;

}

.family-list strong {

    margin-top: 12px;

    color: var(--text);

    font-size: .9rem;

    display: block;

    margin-top: 14px;

    text-align: center;

}

.family-list span {

    display: inline-block;

    align-self: center;

    padding: 6px 14px;

    border-radius: 999px;

    background: #eef4ff;

    color: var(--primary);

    font-weight: 500;

}

.product-card h4 {

    font-size: 1rem;

    font-weight: 600;

    color: #0A5FFF;

    margin: 10px 0 18px;

}

/*==================================================
PERFORMANCE
==================================================*/

.performance {

    background: var(--background);

}

.performance-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 40px;

    margin-top: 90px;

}

.performance-item {

    padding: 50px 32px;

    background: var(--white);

    border: var(--card-border);

    border-radius: 18px;

    text-align: center;

    transition: var(--card-transition);

}

.performance-item:hover {

    transform: translateY(-4px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, .08);

    border-color:#0A5FFF;

}

.performance-item p {

    line-height: 1.9;

    color: var(--muted);

    margin-top: 48px;

}

.performance-item h3 {

    font-size: 2rem;

    color: #0A5FFF;

    margin-bottom: 10px;

}

.performance-item span {

    color: var(--muted);

    font-weight: 600;

    line-height: 1.6;

}

/*==================================================
UZMANLIK ALANLARI
==================================================*/

.expertise {

    background: var(--white);

}

.expertise-wrapper {

    display: grid;

    grid-template-columns: 280px 1fr;

    gap: 70px;

    align-items: center;

}

.expertise-menu {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 18px;

}

.expertise-btn {

    background: transparent;

    border: none;

    border-left: 3px solid transparent;

    text-align: left;

    padding: 20px 22px;

    cursor: pointer;

    font-size: 1rem;

    font-weight: 600;

    color: #5f6675;

    transition: all .25s ease;

}

.expertise-btn:hover {

    color: #111827;

    border-left-color: #0A5FFF;

    background: transparent;

}

.expertise-btn.active {

    color: #111827;

    border-left-color: #0A5FFF;

    background: transparent;

}

.expertise-content {

    background: var(--white);

    border: var(--card-border);

    border-radius: 18px;

    padding: 45px;

    min-height: 430px;

    transition:

        opacity .20s ease,

        transform .25s ease,

        box-shadow .25s ease;

}

.expertise-content:hover {

    box-shadow: 0 20px 45px rgba(0, 0, 0, .05);

}

.expertise-title {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 35px 0 18px;

    color: #0A5FFF;

    font-size: .82rem;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.expertise-title::after {

    content: "";

    flex: 1;

    height: 1px;

    background: linear-gradient(to right, #d9e5ff, transparent);

}

.expertise-content h3 {

    font-size: 2rem;

    margin-bottom: 14px;

    padding-bottom: 14px;

    border-bottom: 1px solid #edf1f7;

}

.expertise-content p {

    color: #5f6675;

    line-height: 1.8;

    margin-bottom: 28px;

}

.expertise-list {

    display: grid;

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

    gap: 16px;

}

.expertise-list div {

    padding: 14px 18px;

    background: #f8fafc;

    border-radius: 10px;

    font-weight: 500;

}

.expertise-title {

    margin-top: 35px;

    margin-bottom: 12px;

    font-size: .85rem;

    font-weight: 700;

    letter-spacing: 1px;

    color: #0A5FFF;

    text-transform: uppercase;

}

.expertise-platform {

    margin-top: 25px;

    padding: 22px;

    border-left: 4px solid #0A5FFF;

    background: #f8fbff;

    border-radius: 12px;

}

.expertise-platform strong {

    display: block;

    margin-bottom: 8px;

    color: #111827;

}

.expertise-products {

    margin-top: 25px;

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}

.expertise-products span {

    padding: 10px 18px;

    background: #eef4ff;

    border-radius: 999px;

    font-size: .92rem;

    font-weight: 600;

}

/*==================================================
RESPONSIVE DESIGN
==================================================*/
@media (max-width:992px) {

    .container {

        width: 92%;

    }

    /* HERO */

    .hero-content {

        display: grid;

        grid-template-columns: 1fr;

        text-align: left;

        gap: 60px;

    }

    .hero-left {

        order: 1;

    }

    .hero-right {

        order: 2;

    }

    .hero-buttons {

        justify-content: center;

        flex-wrap: wrap;

    }

    .hero-stats {

        justify-content: center;

        flex-wrap: wrap;

    }

    /* Hakkımızda */

    .about-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    /* Neden REMKİM */

    .why-grid {

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

    }

    /* Proses */

    .process-flow {

        flex-direction: column;

        align-items: center;

    }

    .flow-line {

        width: 2px;

        height: 45px;

    }

    /* Ürünler */

    .product-grid {

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

    }

    /* Performans */

    .performance-grid {

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

    }

    /* Uzmanlık */

    .expertise-wrapper {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .expertise-menu {

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

    }

    .expertise-btn {

        border-left: none;

        border-bottom: 3px solid transparent;

    }

    .expertise-btn.active {

        border-left: none;

        border-bottom: 3px solid #0A5FFF;

    }

}

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

@media (max-width:576px) {

    /* Genel */

    section {

        padding: 80px 0;

    }

    .container {

        width: 92%;

    }

    /* Başlıklar */

    h1 {

        font-size: 2.8rem;

        line-height: 1.1;

    }

    h2 {

        font-size: 2.2rem;

        line-height: 1.2;

    }

    .section-text {

        font-size: 1rem;

    }

    /* HERO */

    .hero {

        min-height: auto;

        padding-top: 120px;

    }

    .hero-content {

        gap: 45px;

    }

    .hero-left {

        text-align: center;

    }

    .hero-buttons {

        flex-direction: column;

        width: 100%;

        gap: 15px;

    }

    .hero-buttons a {

        width: 100%;

        justify-content: center;

    }

    .hero-stats {

        flex-direction: column;

        gap: 20px;

    }

    .hero-right {

        display: flex;

        justify-content: center;

    }

    .network {

        transform: scale(.72);

        transform-origin: center;

    }

    html,
    body {
        overflow-x: hidden;
    }

    /*==================================================
HERO MOBILE FIX V7.1
==================================================*/

    @media (max-width:991px) {

        .hero {

            min-height: auto;
            padding: 140px 0 80px;

        }

        .hero-container {

            grid-template-columns: 1fr;
            gap: 60px;
            text-align: center;

        }

        .hero-left {

            order: 1;

        }

        .hero-right {

            order: 2;

            margin-top: 20px;

        }

        .hero h1 {

            font-size: 48px;
            line-height: 1.15;

        }

        .hero p {

            max-width: 100%;
            margin: auto;

        }

        .hero-buttons {

            justify-content: center;

        }

        .network {

            width: 420px;
            max-width: 100%;
            margin: auto;

        }

    }

    @media (max-width:768px) {

        .hero {

            padding-top: 120px;

        }

        .hero h1 {

            font-size: 38px;

        }

        .hero p {

            font-size: 17px;

        }

        .hero-buttons {

            flex-direction: column;
            align-items: center;

        }

        .hero-buttons a {

            width: 260px;

        }

        .network {

            width: 320px;

        }

        .network-core {

            width: 120px;
            height: 120px;

            font-size: 22px;

        }

        .node {

            width: 95px;

            padding: 10px;

            font-size: 12px;

        }

        .node-top {

            left: 112px;

        }

        .node-right {

            top: 112px;

        }

        .node-bottom {

            left: 112px;

        }

        .node-left {

            top: 112px;

        }

    }

    @media (max-width:480px) {

        .network {

            width: 270px;

        }

        .network-core {

            width: 95px;
            height: 95px;

            font-size: 18px;

        }

        .node {

            width: 78px;

            font-size: 11px;

            padding: 8px;

        }

        .node-top {

            left: 96px;

        }

        .node-right {

            top: 96px;

        }

        .node-bottom {

            left: 96px;

        }

        .node-left {

            top: 96px;

        }

    }

    /* =====================================================
Performance Renewal System
===================================================== */

    .performance-grid {

        display: grid;

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

        gap: 100px;

        margin-top: 80px;

    }


    .performance-item {

        padding-bottom: 48px;

        border-bottom: 1px solid rgba(0, 0, 0, .08);

    }


    .performance-item h3 {

        font-size: 1.55rem;

        font-weight: 600;

        margin-bottom: 18px;

        color: #1f2937;

    }


    .performance-item p {

        font-size: 1.02rem;

        line-height: 1.9;

        color: #5b6472;

        margin: 0;

    }

    /* =====================================================
RPAM FLOW
=====================================================*/

    .rpam-flow {

        margin-top: 90px;

        display: flex;

        flex-direction: column;

        gap: 0;

    }

    .flow-item {

        padding: 40px 0;

    }

    .flow-item span {

        display: inline-block;

        font-size: .80rem;

        letter-spacing: 2px;

        font-weight: 700;

        color: #6b7280;

        margin-bottom: 10px;

    }

    .flow-item h3 {

        font-size: 2rem;

        font-weight: 500;

        color: #111827;

        margin: 0;

    }

    .flow-line {

        width: 1px;

        height: 55px;

        background: #d1d5db;

        margin-left: 10px;

    }

    /*======================================================
Technology Platform
======================================================*/

    .platform-center {

        max-width: 760px;

        margin: 0 auto 90px;

        text-align: center;

    }

    .platform-center h2 {

        font-size: 2.6rem;

        font-weight: 500;

        margin-bottom: 28px;

        color: #111827;

    }

    .platform-center p {

        font-size: 1.1rem;

        line-height: 2;

        color: #5b6472;

    }


    .platform-module{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    padding:35px 0;

    border-top:2px solid rgba(15,23,42,.08);

    min-height:320px;

    }

     .platform-module .btn{

    margin-top:auto;

    }

    .platform-module h4{

    margin:18px 0;

    }

    .platform-module p{

    margin-bottom:35px;

    line-height:1.9;

    }

    .platform-module h3 {

        font-size: 2rem;

        margin-bottom: 8px;

        font-weight: 500;

        color: #111827;

    }


    .platform-module h4 {

        font-size: 1rem;

        font-weight: 600;

        letter-spacing: 1px;

        text-transform: uppercase;

        color: #2563eb;

        margin-bottom: 28px;

    }


    .platform-module p {

        font-size: 1.05rem;

        line-height: 1.9;

        color: #5b6472;

    }

}

    /*======================================================
PERFORMANCE RENEWAL SYSTEM
======================================================*/

    /*------------------------------------------------------
GENEL SECTION DÜZENİ
------------------------------------------------------*/

    .hero-performance {

        padding: 180px 0 140px;

    }


    .hero-performance .hero-content {

        max-width: 760px;

    }


    .hero-performance .hero-title {

        margin-bottom: 32px;

    }


    .hero-performance .hero-text {

        max-width: 700px;

        line-height: 1.9;

    }


    /*------------------------------------------------------
SECTION BOŞLUKLARI
------------------------------------------------------*/

    .section {

        padding: 140px 0;

    }


    /*------------------------------------------------------
ALTERNATİF ZEMİNLER
------------------------------------------------------*/

    .section-light {

        background: #f8fafc;

    }


    .section-white {

        background: #ffffff;

    }

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

    .section .container {

        max-width: 1180px;

    }

    .section-title{

    font-size:clamp(2.4rem,4vw,3.6rem);

    font-weight:700;

    line-height:1.15;

    letter-spacing:-1px;

    margin-bottom:34px;

    }

    .section-text{

    max-width:760px;

    line-height:2;

    font-size:1.08rem;

    color:#55606f;

    margin-bottom:70px;

    }

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

    .technology-intro {

        padding-top: 180px;

    }

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

    .outcome-grid {

        display: grid;

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

        gap: 50px 70px;

        margin-top: 80px;

    }

    .outcome-item {

        padding-bottom: 35px;

        border-bottom: 1px solid rgba(15, 23, 42, .08);

    }

    .outcome-item h3 {

        font-size: 1.5rem;

        margin-bottom: 18px;

        color: #111827;

        font-weight: 600;

    }

    .outcome-item p {

        line-height: 1.9;

        color: var(--muted);

    }

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

    .process-list {

        margin-top: 70px;

    }

    .process-item {

        padding: 28px 0;

        border-bottom: 1px solid rgba(15, 23, 42, .08);

        font-size: 1.25rem;

        font-weight: 500;

        color: #111827;

        transition: .3s;

    }

    .process-item:hover {

        padding-left: 18px;

        color: #0A5FFF;

    }

    /*======================================================
SONUÇ
======================================================*/

    .performance-actions {

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 24px;

        flex-wrap: wrap;

        padding-top: 60px;

    }


    /* Son bölüm butonları */

    .performance-actions .btn {

        min-width: 290px;

        text-align: center;

    }

    .performance-footer-note {

        margin-top: 70px;

        text-align: center;

        font-size: .95rem;

        color: #7b8794;

        letter-spacing: .5px;

    }

    /*======================================================
PERFORMANCE QUOTE
======================================================*/

    .performance-quote {

        max-width: 900px;

        margin: 70px auto 0;

        padding: 50px 40px;

        text-align: center;

        font-size: 1.45rem;

        line-height: 1.9;

        color: #111827;

        font-style: normal;

        border-top: 1px solid rgba(15, 23, 42, .08);

        border-bottom: 1px solid rgba(15, 23, 42, .08);

    }

    .performance-footer-note {

        margin-top: 80px;

        text-align: center;

        color: #7b8794;

        font-size: .95rem;

        line-height: 1.8;

    }
/*======================================================
TECHNOLOGY PLATFORM GRID
======================================================*/

.technology-platform-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin:80px 0;

}

.technology-card{

    background:#fff;

    padding:45px 35px;

    border-radius:18px;

    border:1px solid rgba(15,23,42,.08);

    transition:.35s;

}

.technology-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.08);

}

.technology-card h3{

    margin-bottom:20px;

    color:#0A5FFF;

    font-size:1.5rem;

}

.technology-card p{

    line-height:1.9;

    color:#5b6472;

}
/*======================================================
TRADEMARK
======================================================*/

.tm{

    font-size:.42em;

    vertical-align:super;

    position:relative;

    top:-0.15em;

    margin-left:1px;

    font-weight:400;

}

.platform-module .btn{

    display:inline-block;

    margin-top:40px;

}

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

.hero-page{

    padding-top:180px;
    padding-bottom:120px;

    background:#ffffff;

}

.hero-page-content{

    max-width:900px;

}

.hero-page h1{

    margin-top:18px;
    margin-bottom:28px;

}

.product-image {
    width: 100%;
    height: 300px;
    object-fit: contain;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 24px;
    padding: 18px;
    margin-bottom: 20px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.06),
        0 2px 8px rgba(15, 23, 42, 0.04);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.product-card:hover .product-image {
    transform: scale(1.06);
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.10),
        0 6px 14px rgba(15, 23, 42, 0.06);
}

.product-card:hover .product-image {
    transform: translateY(-4px);
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.10),
        0 6px 14px rgba(15, 23, 42, 0.06);
}
.product-hero-image {
    width: 100%;
    max-width: 520px;
    height: auto;
    object-fit: contain;
    border-radius: 28px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 24px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow:
        0 16px 40px rgba(15, 23, 42, 0.08),
        0 4px 12px rgba(15, 23, 42, 0.05);
}

.product-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    justify-items: center;
}
.featured-card .btn-outline {
    display: block;
    width: 100%;
    text-align: center;
}

.table-wrap{
    overflow-x:auto;
    border-radius:20px;
    border:1px solid rgba(15,23,42,.08);
    background:#fff;
}

.comparison-table{
    width:100%;
    border-collapse:collapse;
    min-width:640px;
}

.comparison-table th{
    background:#0F172A;
    color:#fff;
    text-align:left;
    padding:18px 20px;
    font-size:.95rem;
    letter-spacing:.03em;
}

.comparison-table td{
    padding:18px 20px;
    border-top:1px solid rgba(15,23,42,.08);
    color:#334155;
}

.comparison-table tr:nth-child(even) td{
    background:#F8FAFC;
}