/* ==========================================================
   ROBOWALL V2
   SERVICES + PROCESS
========================================================== */


/* ORTAK BÖLÜM BAŞLIKLARI */

.section {
    position: relative;
    padding: 120px 0;
}

.section::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: min(1120px, 88%);
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 137, 255, 0.12),
            rgba(49, 199, 255, 0.36),
            rgba(0, 137, 255, 0.12),
            transparent
        );

    box-shadow:
        0 0 24px
        rgba(0, 133, 255, 0.12);
}

.section-heading {
    position: relative;

    max-width: 760px;
}

.section-heading-center {
    margin-right: auto;
    margin-left: auto;

    text-align: center;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: var(--blue2);

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

    letter-spacing: 2px;
}

.section-eyebrow::before {
    content: "";

    width: 24px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--blue3)
        );

    box-shadow:
        0 0 14px
        rgba(61, 183, 255, 0.72);
}

.section-heading h2 {
    margin-top: 12px;

    color: white;

    font-size:
        clamp(
            38px,
            4vw,
            58px
        );

    line-height: 1.04;

    letter-spacing: -2px;
}

.section-heading h2 span {
    color: transparent;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--blue3),
            var(--blue2)
        );

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

    filter:
        drop-shadow(
            0 0 14px
            rgba(29, 143, 255, 0.16)
        );
}

.section-heading p {
    max-width: 660px;

    margin-top: 18px;

    color: var(--muted);

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

.section-heading-center p {
    margin-right: auto;
    margin-left: auto;
}


/* HİZMETLER BÖLÜMÜ */

.services-section {
    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 35%,
            rgba(0, 123, 255, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 65%,
            rgba(0, 190, 255, 0.08),
            transparent 32%
        );
}

.services-grid {
    margin-top: 52px;

    display: grid;

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

    gap: 20px;
}


/* HİZMET KARTI */

.service-card {
    position: relative;
    isolation: isolate;

    min-height: 305px;

    padding: 30px;

    overflow: hidden;

    color: white;

    background:
        radial-gradient(
            circle at 83% 12%,
            rgba(0, 158, 255, 0.11),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(9, 24, 43, 0.96),
            rgba(4, 10, 19, 0.98)
        );

    border:
        1px solid
        rgba(54, 170, 255, 0.28);

    border-radius: 20px;

    box-shadow:
        inset 0 0 28px
        rgba(0, 114, 255, 0.035),
        0 18px 48px
        rgba(0, 0, 0, 0.19);

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

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

    position: absolute;
    z-index: -1;

    top: -70%;
    left: -90%;

    width: 52%;
    height: 240%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(72, 205, 255, 0.16),
            transparent
        );

    transform: rotate(19deg);

    transition:
        left 0.95s ease;
}

.service-card::after {
    content: "";

    position: absolute;

    right: 26px;
    bottom: 0;
    left: 26px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--blue),
            var(--blue3),
            transparent
        );

    opacity: 0.30;

    transform: scaleX(0.55);

    box-shadow:
        0 0 14px
        rgba(43, 197, 255, 0.66);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}

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

    border-color:
        rgba(61, 196, 255, 0.78);

    box-shadow:
        inset 0 0 36px
        rgba(0, 139, 255, 0.08),
        0 0 26px
        rgba(0, 158, 255, 0.21),
        0 26px 64px
        rgba(0, 0, 0, 0.34);
}

.service-card:hover::before {
    left: 145%;
}

.service-card:hover::after {
    opacity: 1;
    transform: scaleX(1);
}


/* KART IŞIK KATMANI */

.service-card-light {
    position: absolute;
    z-index: -2;

    top: -70px;
    right: -70px;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 181, 255, 0.17),
            transparent 70%
        );

    filter: blur(12px);

    transition:
        transform 0.4s ease,
        opacity 0.4s ease;
}

.service-card:hover .service-card-light {
    transform:
        scale(1.45);

    opacity: 1;
}


/* HİZMET İKONU */

.service-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    color: #dff6ff;

    background:
        linear-gradient(
            145deg,
            rgba(0, 117, 255, 0.25),
            rgba(0, 200, 255, 0.08)
        );

    border:
        1px solid
        rgba(29, 143, 255, 0.92);

    border-radius: 15px;

    box-shadow:
        inset 0 0 18px
        rgba(0, 135, 255, 0.14),
        0 0 21px
        rgba(0, 153, 255, 0.22);

    font-size: 15px;
    font-weight: 900;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.service-card:hover .service-icon {
    transform:
        translateY(-4px)
        rotate(-4deg);

    box-shadow:
        inset 0 0 22px
        rgba(0, 168, 255, 0.20),
        0 0 31px
        rgba(0, 181, 255, 0.40);
}


/* HİZMET NUMARASI */

.service-number {
    position: absolute;

    top: 30px;
    right: 30px;

    color:
        rgba(103, 192, 255, 0.48);

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

    letter-spacing: 2px;
}


/* HİZMET METİNLERİ */

.service-card h3 {
    margin-top: 54px;

    color: white;

    font-size: 21px;

    letter-spacing: -0.6px;
}

.service-card p {
    margin-top: 15px;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.78;
}

.service-card a {
    position: absolute;

    left: 30px;
    bottom: 28px;

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

    gap: 10px;

    color: #a9ddff;

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

    transition:
        color 0.25s ease,
        gap 0.25s ease;
}

.service-card a:hover {
    gap: 16px;

    color: white;
}


/* ÇALIŞMA SÜRECİ */

.process-section {
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0, 146, 255, 0.09),
            transparent 34%
        ),
        rgba(2, 7, 14, 0.50);
}

.process-grid {
    position: relative;

    margin-top: 60px;

    display: grid;

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

    gap: 18px;
}

.process-grid::before {
    content: "";

    position: absolute;

    top: 44px;
    right: 7%;
    left: 7%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(29, 143, 255, 0.32),
            rgba(72, 214, 255, 0.54),
            rgba(29, 143, 255, 0.32),
            transparent
        );

    box-shadow:
        0 0 18px
        rgba(0, 145, 255, 0.20);
}


/* SÜREÇ KARTI */

.process-card {
    position: relative;
    z-index: 2;

    min-height: 225px;

    padding: 28px 24px;

    background:
        linear-gradient(
            145deg,
            rgba(8, 21, 38, 0.92),
            rgba(4, 10, 18, 0.96)
        );

    border:
        1px solid
        rgba(50, 151, 255, 0.24);

    border-radius: 18px;

    box-shadow:
        inset 0 0 24px
        rgba(0, 110, 255, 0.025);

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

.process-card:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(58, 190, 255, 0.66);

    box-shadow:
        0 0 25px
        rgba(0, 145, 255, 0.14),
        0 20px 45px
        rgba(0, 0, 0, 0.22);
}


/* SÜREÇ NUMARASI */

.process-number {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--blue2)
        );

    border:
        1px solid
        rgba(122, 220, 255, 0.58);

    border-radius: 50%;

    box-shadow:
        0 0 24px
        rgba(0, 163, 255, 0.32);

    font-size: 12px;
    font-weight: 900;
}

.process-card h3 {
    margin-top: 48px;

    color: white;

    font-size: 18px;
}

.process-card p {
    margin-top: 12px;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.75;
}
/* ==========================================================
   NEDEN ROBOWALL?
========================================================== */

.why-robowall-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(0, 162, 255, 0.10),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #020913,
            #03101d
        );
}


/* ARKA PLAN IŞIKLARI */

.why-robowall-glow {
    position: absolute;

    width: 460px;
    height: 460px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(80px);

    opacity: 0.20;
}

.why-robowall-glow-left {
    top: 16%;
    left: -260px;

    background:
        #007cff;
}

.why-robowall-glow-right {
    right: -260px;
    bottom: 2%;

    background:
        #00c8ff;
}


/* KARTLAR */

.why-robowall-grid {
    position: relative;
    z-index: 2;

    margin-top: 58px;

    display: grid;

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

    gap: 18px;
}

.why-robowall-card {
    position: relative;
    overflow: hidden;

    min-height: 320px;

    padding: 30px 25px;

    background:
        radial-gradient(
            circle at 88% 4%,
            rgba(0, 174, 255, 0.12),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(9, 24, 43, 0.96),
            rgba(3, 11, 21, 0.98)
        );

    border:
        1px solid
        rgba(54, 170, 255, 0.24);

    border-radius: 22px;

    box-shadow:
        inset 0 0 28px
        rgba(0, 135, 255, 0.035),
        0 20px 54px
        rgba(0, 0, 0, 0.24);

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

.why-robowall-card:hover {
    transform:
        translateY(-10px);

    border-color:
        rgba(74, 211, 255, 0.70);

    box-shadow:
        inset 0 0 34px
        rgba(0, 147, 255, 0.08),
        0 26px 65px
        rgba(0, 0, 0, 0.35),
        0 0 30px
        rgba(0, 158, 255, 0.15);
}


/* NUMARA */

.why-card-number {
    position: absolute;

    top: 22px;
    right: 22px;

    color:
        rgba(97, 203, 255, 0.48);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.5px;
}


/* İKON */

.why-card-icon {
    width: 62px;
    height: 62px;

    display: grid;
    place-items: center;

    color: white;

    background:
        linear-gradient(
            145deg,
            rgba(0, 112, 255, 0.32),
            rgba(0, 207, 255, 0.10)
        );

    border:
        1px solid
        rgba(67, 200, 255, 0.66);

    border-radius: 18px;

    box-shadow:
        inset 0 0 20px
        rgba(0, 156, 255, 0.12),
        0 0 24px
        rgba(0, 163, 255, 0.18);

    font-size: 15px;
    font-weight: 900;

    transition:
        transform 0.32s ease,
        box-shadow 0.32s ease;
}

.why-robowall-card:hover
.why-card-icon {
    transform:
        rotate(-5deg)
        scale(1.08);

    box-shadow:
        inset 0 0 26px
        rgba(0, 164, 255, 0.18),
        0 0 34px
        rgba(0, 182, 255, 0.32);
}


/* METİNLER */

.why-robowall-card h3 {
    margin-top: 30px;

    color: white;

    font-size: 19px;
    line-height: 1.25;
}

.why-robowall-card p {
    margin-top: 14px;

    color: #91a4b9;

    font-size: 11px;
    line-height: 1.75;
}


/* ALT NEON ÇİZGİ */

.why-card-line {
    position: absolute;

    right: 25px;
    bottom: 22px;
    left: 25px;

    height: 2px;

    overflow: hidden;

    background:
        rgba(44, 161, 255, 0.12);
}

.why-card-line::after {
    content: "";

    position: absolute;

    top: 0;
    left: -60%;

    width: 55%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            #1aa9ff,
            #67e7ff,
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(42, 202, 255, 0.75);

    animation:
        whyCardLineMove
        3.8s linear infinite;
}

.why-robowall-card:nth-child(2)
.why-card-line::after {
    animation-delay: 0.7s;
}

.why-robowall-card:nth-child(3)
.why-card-line::after {
    animation-delay: 1.4s;
}

.why-robowall-card:nth-child(4)
.why-card-line::after {
    animation-delay: 2.1s;
}

@keyframes whyCardLineMove {
    to {
        left: 110%;
    }
}


/* ALT ÇAĞRI ALANI */

.why-robowall-footer {
    position: relative;
    z-index: 2;

    margin-top: 24px;
    padding: 25px 28px;

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

    gap: 24px;

    background:
        linear-gradient(
            110deg,
            rgba(5, 25, 48, 0.92),
            rgba(4, 14, 27, 0.96)
        );

    border:
        1px solid
        rgba(52, 175, 255, 0.28);

    border-radius: 20px;

    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, 0.25);
}

.why-robowall-footer span,
.why-robowall-footer strong {
    display: block;
}

.why-robowall-footer div > span {
    color: #37c7ff;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.7px;
}

.why-robowall-footer strong {
    margin-top: 7px;

    color: white;

    font-size: 19px;
}


/* TABLET */

@media (max-width: 1050px) {

    .why-robowall-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* TELEFON */

@media (max-width: 700px) {

    .why-robowall-grid {
        margin-top: 38px;

        grid-template-columns:
            1fr;
    }

    .why-robowall-card {
        min-height: 280px;
    }

    .why-robowall-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .why-robowall-footer
    .primary-button {
        width: 100%;

        justify-content: space-between;
    }

}