/* ========================================
   ÇAĞRI BAKIM - ANA STİL DOSYASI
======================================== */

:root {
    /* ANA KURUMSAL MAVİ */
    --primary: #0789df;
    --primary-dark: #056bb5;

    /* KOYU TONLAR */
    --dark: #111827;
    --dark-secondary: #1f2937;

    /* METİN RENKLERİ */
    --text: #374151;
    --light-text: #6b7280;

    /* AÇIK TONLAR */
    --white: #ffffff;
    --light-bg: #f8fafc;

    /* KENAR / AYRAÇ */
    --border: #e5e7eb;

    --transition: 0.3s ease;
}


/* ========================================
   GENEL
======================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Manrope", sans-serif;
    color: var(--text);
    background: var(--white);
}

a {
    text-decoration: none;
}


/* ========================================
   ÜST İLETİŞİM ŞERİDİ
======================================== */

.top-bar {
    background: var(--dark);
    color: #d1d5db;
    font-size: 14px;
}

.top-bar-content {
    min-height: 40px;

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

.top-contact {
    display: flex;
    align-items: center;
    gap: 16px;
}

.top-contact a,
.top-contact span {
    color: #d1d5db;
}

.top-contact i {
    color: var(--primary);
    margin-right: 6px;
}

.top-contact a {
    transition: var(--transition);
}

.top-contact a:hover {
    color: var(--white);
}

.top-divider {
    width: 1px;
    height: 15px;
    background: #4b5563;
}

.top-text {
    font-size: 13px;
    letter-spacing: 0.4px;
}


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

.main-header {
    position: sticky;
    top: 0;
    z-index: 9998;

    width: 100%;

    background: var(--dark);

    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.18);
}

.navbar {
    min-height: 88px;
    padding: 0;

    background: var(--dark);
}


/* LOGO */

.navbar-brand {
    display: flex;
    align-items: center;

    padding: 0;

    background: transparent;
}

.site-logo {
    display: block;

    width: 200px;
    height: 70px;

    object-fit: contain;
}

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

.navbar .nav-link {
    position: relative;

    color: #ffffff;
    font-size: 16px;
    font-weight: 600;

    padding: 32px 13px !important;

    transition: var(--transition);
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--primary);
}


/* Aktif menü alt çizgisi */

.navbar .nav-link::after {
    transition: var(--transition);
}

.navbar .nav-link:not(.dropdown-toggle)::before {
    content: "";

    position: absolute;
    bottom: 24px;
    left: 13px;

    width: 0;
    height: 2px;

    background: var(--primary);

    transition: var(--transition);
}

.navbar .nav-link:hover::before,
.navbar .nav-link.active::before {
    width: calc(100% - 26px);
}


/* ========================================
   DROPDOWN
======================================== */

.dropdown-menu {
    border: none;
    border-radius: 12px;

    padding: 10px;

    min-width: 230px;

    background: var(--white);

    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
}

.dropdown-item {
    border-radius: 7px;

    padding: 10px 13px;

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

    color: var(--dark-secondary);

    transition: var(--transition);
}

.dropdown-item:hover {
    background: #eef7fd;
    color: var(--primary-dark);

    padding-left: 17px;
}

.services-dropdown {
    min-width: 340px;
}

.all-services {
    color: var(--primary-dark);
    font-weight: 700;
}

.all-services i {
    margin-left: 7px;
}


/* ========================================
   HEADER İLETİŞİM BUTONU
======================================== */

.header-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-left: 25px;

    padding: 13px 20px;

    background: var(--primary);
    color: var(--dark);

    border-radius: 8px;

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

    transition: var(--transition);
}

.header-contact-btn:hover {
    background: var(--primary-dark);
    color: var(--white);

    transform: translateY(-2px);
}
/* ==========================================================
   ANASAYFA HERO - ÇAĞRI BAKIM
========================================================== */

.hero {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    overflow: hidden;

    background:
        url("../images/anasayfa/hero.jpg")
        center center / cover no-repeat;
}


/* ARKA PLAN KARARTMA */

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(7, 12, 20, 0.94) 0%,
            rgba(7, 12, 20, 0.84) 31%,
            rgba(7, 12, 20, 0.48) 55%,
            rgba(7, 12, 20, 0.12) 78%,
            rgba(7, 12, 20, 0.08) 100%
        );
}


/* CONTAINER */

.hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
}


/* İÇERİK */

.hero-content {
    position: relative;
    max-width: 790px;
    padding: 85px 0 80px;
}


/* ==========================================================
   ÜST KÜÇÜK BAŞLIK
========================================================== */

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 18px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 3.5px;
}

.hero-eyebrow-line {
    width: 45px;
    height: 3px;

    flex-shrink: 0;

    background: var(--primary);
}


/* ==========================================================
   ÇAĞRI BAKIM ANA BAŞLIK
========================================================== */

.hero-brand-box {
    position: relative;

    display: inline-block;

    margin-bottom: 22px;

    padding: 20px 38px 22px 32px;

    isolation: isolate;
}


/* ARKADAKİ GEOMETRİK PLAKA */

.hero-brand-box::before {
    content: "";

    position: absolute;
    z-index: -1;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.025)
        );

    border-top: 1px solid rgba(255, 255, 255, 0.13);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(7, 137, 223, 0.65);

    transform: skewX(-10deg);

    box-shadow:
        0 16px 45px rgba(0, 0, 0, 0.25),
        0 5px 16px rgba(7, 137, 223, 0.06);
}


/* SOL MAVİ ÇİZGİ */

.hero-brand-box::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 3px;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--primary)
        );

    transform: skewX(-10deg);

    box-shadow: 0 0 12px rgba(7, 137, 223, 0.4);
}


/* ANA BAŞLIK */

.hero-company-title {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #ffffff;

    font-size: clamp(58px, 5.3vw, 82px);
    line-height: 0.95;

    font-weight: 800;

    letter-spacing: -3px;

    white-space: nowrap;

    text-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}


/* BAKIM MAVİ */

.hero-company-title span {
    color: var(--primary);
}

/* ==========================================================
   SLOGAN
========================================================== */

.hero-slogan {
    max-width: 760px;

    margin: 0 0 22px;

    color: #ffffff;

    font-size: clamp(27px, 2.6vw, 38px);
    line-height: 1.25;

    font-weight: 500;

    letter-spacing: -0.8px;
}

.hero-slogan strong {
    color: var(--primary);

    font-weight: 800;
}


/* ==========================================================
   AÇIKLAMA
========================================================== */

.hero-description {
    max-width: 620px;

    margin: 0 0 30px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 17px;
    line-height: 1.8;

    font-weight: 400;
}


/* ==========================================================
   BUTON
========================================================== */

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.hero .btn-primary-custom {
    min-height: 56px;

    padding: 0 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    color: #111827;

    background: var(--primary);

    border-radius: 9px;

    text-decoration: none;

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

    transition: 0.3s ease;

    box-shadow: 0 10px 25px rgba(7, 137, 223, 0.16);
}

.hero .btn-primary-custom:hover {
    color: #ffffff;

    background: var(--primary-dark);

    transform: translateY(-3px);

    box-shadow: 0 14px 30px rgba(7, 137, 223, 0.22);
}

.hero .btn-primary-custom i {
    font-size: 18px;

    transition: 0.3s ease;
}

.hero .btn-primary-custom:hover i {
    transform: translateX(4px);
}


/* ========================================
   HİZMETLERİMİZ — MODERN & PROFESYONEL
======================================== */

.services-section {
    position: relative;
    padding: 85px 0 100px;

    /* Hafif soğuk açık zemin */
    background: #f5f7f9;
}


/* ========================================
   BÜYÜK DIŞ PANEL
======================================== */

.services-panel {
    position: relative;
    padding: 50px;

    /* Beyaz ve çok hafif mavi-gri geçiş */
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f1f6fa 100%
        );

    border: 1px solid #dce5ec;
    border-radius: 22px;

    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    overflow: hidden;
}


/* Üst mavi vurgu */

.services-panel::after {
    content: "";

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

    transform: translateX(-50%);

    width: 90px;
    height: 3px;

    background: var(--primary);

    border-radius: 0 0 4px 4px;
}


/* Sağ üst dekoratif daire */

.services-panel::before {
    content: "";

    position: absolute;

    width: 200px;
    height: 200px;

    top: -115px;
    right: -80px;

    border: 1px solid rgba(7, 137, 223, 0.22);
    border-radius: 50%;

    pointer-events: none;
}


/* ========================================
   BAŞLIK ALANI
======================================== */

.services-heading {
    position: relative;
    z-index: 2;

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

    gap: 30px;

    margin-bottom: 32px;
    padding-bottom: 27px;

    border-bottom: 1px solid #dce5ec;
}


/* UZMANLIK ALANLARIMIZ */

.services-label {
    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--primary-dark);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;

    margin-bottom: 10px;
}

.services-label span {
    width: 28px;
    height: 2px;

    background: var(--primary);
}


/* Hizmetlerimiz */

.services-heading h2 {
    color: #1c2027;

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

    margin-bottom: 8px;
}


/* Açıklama */

.services-heading p {
    max-width: 600px;

    color: var(--light-text);

    font-size: 15px;
    line-height: 1.7;

    margin: 0;
}


/* 01 — 09 */

.services-count {
    flex-shrink: 0;

    color: #7b8794;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

/* ========================================
   HİZMET KARTLARI
======================================== */

.service-card {
    display: block;
    height: 100%;

    background: rgba(255, 255, 255, 0.92);

    border: 1px solid #dce5ec;
    border-radius: 11px;

    overflow: hidden;

    color: var(--dark);

    box-shadow:
        0 5px 15px rgba(15, 23, 42, 0.06);

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


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

    border-color: rgba(7, 137, 223, 0.55);

    box-shadow:
        0 14px 30px rgba(15, 23, 42, 0.12);
}


/* ========================================
   HİZMET GÖRSELLERİ
======================================== */

.service-image {
    position: relative;

    height: 185px;

    overflow: hidden;

    background: #e3e9ee;
}


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

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(17, 24, 39, 0.22),
            transparent 55%
        );

    pointer-events: none;
}


.service-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}


.service-card:hover .service-image img {
    transform: scale(1.045);
}


/* ========================================
   HİZMET NUMARALARI
======================================== */

.service-number {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 2;

    width: 34px;
    height: 34px;

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

    background: rgba(22, 27, 34, 0.92);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;

    color: var(--primary);

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

    backdrop-filter: blur(5px);
}
/* ========================================
   KART ALT ALANI
======================================== */

.service-info {
    min-height: 78px;

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

    gap: 15px;

    padding: 17px 17px 17px 19px;
}


.service-info h3 {
    color: #25282d;

    font-size: 15px;
    line-height: 1.4;

    font-weight: 700;

    margin: 0;

    transition: color 0.3s ease;
}


/* Yuvarlak ok */

.service-arrow {
    flex-shrink: 0;

    width: 34px;
    height: 34px;

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

    background: #f4f8fb;

    border: 1px solid #d8e3eb;
    border-radius: 50%;

    color: #34383e;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.service-card:hover .service-info h3 {
    color: var(--primary-dark);
}


.service-card:hover .service-arrow {
    background: var(--primary);
    border-color: var(--primary);

    color: #111827;

    transform: rotate(45deg);
}


/* ========================================
   ALT ALAN
======================================== */

.services-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-top: 30px;
    padding-top: 25px;

    border-top: 1px solid #dce5ec;
}


.services-footer p {
    color: var(--light-text);

    font-size: 14px;

    margin: 0;
}


.services-footer a {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    color: #25282d;

    font-size: 14px;
    font-weight: 700;

    transition: color 0.3s ease;
}


.services-footer a i {
    color: var(--primary);

    transition: transform 0.3s ease;
}


.services-footer a:hover {
    color: var(--primary-dark);
}


.services-footer a:hover i {
    transform: translateX(5px);
}
/* ========================================
   HAKKIMIZDA
======================================== */

.about-section {
    position: relative;

    padding: 85px 0;

    background: #f5f6f7;
}


/* ========================================
   HAKKIMIZDA DIŞ PANEL
======================================== */

.about-panel {
    position: relative;

    padding: 50px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f8f9 100%
        );

    border: 1px solid #dde1e5;
    border-radius: 22px;

    box-shadow:
        0 18px 45px rgba(17, 24, 39, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    overflow: hidden;
}


/* Panelin üstündeki mavi çizgi */

.about-panel::after {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 90px;
    height: 3px;

    background: var(--primary);

    border-radius: 0 0 4px 4px;
}


/* Sağ üst dekoratif daire */

.about-panel::before {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    top: -110px;
    right: -80px;

    border: 1px solid rgba(7, 137, 223, 0.22);
    border-radius: 50%;

    pointer-events: none;
}


/* ========================================
   SOL GÖRSEL
======================================== */

.about-image-wrapper {
    position: relative;

    padding: 0 25px 25px 0;
}


/* Görsel arkasındaki mavi dekor */

.about-image-wrapper::before {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 70%;
    height: 75%;

    background: var(--primary);

    border-radius: 18px;

    opacity: 0.12;
}


/* Ana görsel */

.about-image {
    position: relative;

    height: 430px;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 18px 40px rgba(17, 24, 39, 0.14);
}


.about-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Görsel üzerindeki hafif gradient */

.about-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(17, 24, 39, 0.23),
            transparent 55%
        );

    pointer-events: none;
}


/* ========================================
   GÖRSEL ÜZERİNDEKİ BİLGİ KUTUSU
======================================== */

.about-image-badge {
    position: absolute;

    z-index: 3;

    right: 0;
    bottom: 55px;

    min-width: 250px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 16px 19px;

    background: #171c24;

    border-radius: 10px 0 0 10px;

    box-shadow:
        0 12px 30px rgba(17, 24, 39, 0.20);
}


/* Badge ikonu */

.badge-icon {
    flex-shrink: 0;

    width: 41px;
    height: 41px;

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

    background: var(--primary);

    border-radius: 8px;

    color: #171c24;

    font-size: 18px;
}


/* Badge yazıları */

.about-image-badge div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.about-image-badge strong {
    color: #ffffff;

    font-size: 14px;
    font-weight: 700;
}


.about-image-badge div span {
    color: #9ca3af;

    font-size: 11px;
}


/* ========================================
   SAĞ İÇERİK
======================================== */

.about-content {
    position: relative;

    z-index: 2;

    padding-left: 15px;
}


/* ÇAĞRI BAKIM */

.about-label {
    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--primary-dark);

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

    letter-spacing: 2px;

    margin-bottom: 15px;
}


.about-label > span {
    width: 28px;
    height: 2px;

    background: var(--primary);
}


/* ========================================
   ANA BAŞLIK
======================================== */

.about-content h2 {
    max-width: 570px;

    color: #171c24;

    font-size: 40px;
    line-height: 1.18;

    font-weight: 800;

    margin-bottom: 20px;
}

.about-content h2 span {
    color: var(--primary-dark);
}


/* ========================================
   AÇIKLAMALAR
======================================== */

.about-lead {
    max-width: 570px;

    color: #374151;

    font-size: 17px;
    line-height: 1.75;

    font-weight: 500;

    margin-bottom: 13px;
}

.about-text {
    max-width: 570px;

    color: #6b7280;

    font-size: 14px;
    line-height: 1.8;

    margin-bottom: 25px;
}


/* ========================================
   ÖZELLİKLER
======================================== */

.about-features {
    display: flex;
    flex-direction: column;

    gap: 12px;

    margin-bottom: 29px;
}

.about-feature {
    display: flex;
    align-items: center;

    gap: 11px;
}


/* Yuvarlak check */

.about-feature > span {
    flex-shrink: 0;

    width: 27px;
    height: 27px;

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

    background: #eef7fd;

    border: 1px solid #c9e5f7;
    border-radius: 50%;

    color: var(--primary-dark);

    font-size: 14px;
}

.about-feature p {
    color: #374151;

    font-size: 14px;
    font-weight: 600;

    margin: 0;
}


/* ========================================
   HAKKIMIZDA BUTONU
======================================== */

.about-actions {
    display: flex;
    align-items: center;
}

.about-btn {
    min-height: 50px;

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

    gap: 10px;

    padding: 0 22px;

    background: #171c24;

    border-radius: 8px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.about-btn i {
    color: var(--primary);

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.about-btn:hover {
    background: var(--primary);
    color: #171c24;

    transform: translateY(-2px);
}

.about-btn:hover i {
    color: #171c24;

    transform: translateX(4px);
}


/* ========================================
   SABİT İLETİŞİM BUTONLARI
======================================== */

.floating-contact {
    position: fixed;

    left: 22px;
    bottom: 30px;

    z-index: 9999;

    display: flex;
    flex-direction: column;

    gap: 12px;
}


/* ORTAK BUTON */

.floating-btn {
    position: relative;

    width: 58px;
    height: 58px;

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

    border-radius: 14px;

    color: #ffffff;

    font-size: 23px;

    box-shadow:
        0 8px 22px rgba(17, 24, 39, 0.18);

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

.floating-btn:hover {
    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(17, 24, 39, 0.24);
}


/* TELEFON */

.floating-phone {
    background: var(--primary);
}

.floating-phone:hover {
    background: var(--primary-dark);
}


/* WHATSAPP */

.floating-whatsapp {
    background: #25d366;
}

.floating-whatsapp:hover {
    background: #1fbd5a;
}

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

.floating-tooltip {
    position: absolute;

    left: 72px;
    top: 50%;

    transform:
        translateY(-50%)
        translateX(-6px);

    padding: 8px 12px;

    background: #171c24;

    border-radius: 7px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
}


/* Küçük üçgen */

.floating-tooltip::before {
    content: "";

    position: absolute;

    left: -5px;
    top: 50%;

    transform: translateY(-50%);

    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #171c24;
}


/* Hover */

.floating-btn:hover .floating-tooltip {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(-50%)
        translateX(0);
}


/* ========================================
   MAKİNE PARKURU - ANA SAYFA
======================================== */

.machine-preview {
    padding: 95px 0;

    background: #ffffff;
}


/* ANA KUTU */

.machine-preview-box {
    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 460px;

    background: #171c24;

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 20px 50px rgba(17, 24, 39, 0.13);
}


/* ========================================
   SOL İÇERİK
======================================== */

.machine-preview-content {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 60px;

    overflow: hidden;
}


/* Dekoratif daire */

.machine-preview-content::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -170px;
    bottom: -170px;

    border: 1px solid rgba(7, 137, 223, 0.13);
    border-radius: 50%;
}


/* TEKNİK ALTYAPI */

.machine-label {
    position: relative;

    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--primary);

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

    letter-spacing: 2px;

    margin-bottom: 16px;
}


.machine-label > span {
    width: 28px;
    height: 2px;

    background: var(--primary);
}


/* BAŞLIK */

.machine-preview-content h2 {
    position: relative;

    max-width: 520px;

    color: #ffffff;

    font-size: 42px;
    line-height: 1.18;
    font-weight: 800;

    margin-bottom: 20px;
}


.machine-preview-content h2 span {
    color: var(--primary);
}


/* AÇIKLAMA */

.machine-preview-content > p {
    position: relative;

    max-width: 510px;

    color: #b7bdc7;

    font-size: 15px;
    line-height: 1.8;

    margin-bottom: 28px;
}


/* ========================================
   KÜÇÜK ÖZELLİKLER
======================================== */

.machine-highlights {
    position: relative;

    display: flex;
    flex-wrap: wrap;

    gap: 30px;

    margin-bottom: 32px;
}


.machine-highlight {
    display: flex;
    align-items: center;

    gap: 11px;
}


.machine-highlight > i {
    width: 39px;
    height: 39px;

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

    background: rgba(7, 137, 223, 0.10);

    border: 1px solid rgba(7, 137, 223, 0.22);
    border-radius: 8px;

    color: var(--primary);

    font-size: 17px;
}


.machine-highlight div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.machine-highlight strong {
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
}


.machine-highlight span {
    color: #7f8996;

    font-size: 11px;
}

/* ========================================
   BUTON
======================================== */

.machine-preview-btn {
    position: relative;

    width: fit-content;
    min-height: 50px;

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

    gap: 10px;

    padding: 0 21px;

    background: var(--primary);

    border-radius: 8px;

    color: #171c24;

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

    transition: var(--transition);
}


.machine-preview-btn i {
    transition: transform 0.3s ease;
}


.machine-preview-btn:hover {
    background: #ffffff;

    color: #171c24;

    transform: translateY(-2px);
}


.machine-preview-btn:hover i {
    transform: translateX(4px);
}


/* ========================================
   SAĞ GÖRSEL
======================================== */

.machine-preview-image {
    position: relative;

    min-height: 460px;

    overflow: hidden;
}


.machine-preview-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    position: absolute;
    inset: 0;

    transition: transform 0.7s ease;
}


.machine-preview-box:hover
.machine-preview-image img {
    transform: scale(1.035);
}


/* Görseli içerikle birleştiren gradient */

.machine-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(23, 28, 36, 0.55) 0%,
            rgba(23, 28, 36, 0.05) 45%,
            rgba(23, 28, 36, 0.10) 100%
        );
}


/* Görsel alt etiketi */

.machine-image-tag {
    position: absolute;

    right: 22px;
    bottom: 22px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 10px 14px;

    background: rgba(17, 24, 39, 0.82);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;

    color: #ffffff;

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

    backdrop-filter: blur(8px);
}


.machine-image-tag i {
    color: var(--primary);
}


/* ========================================
   İLETİŞİM CTA
======================================== */

.contact-cta {
    padding: 0 0 100px;

    background: #ffffff;
}


.contact-cta-box {
    position: relative;

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

    gap: 50px;

    padding: 55px 60px;

    background:
        linear-gradient(
            120deg,
            #f7fbfe 0%,
            #eaf4fb 100%
        );

    border: 1px solid #d6e5ef;
    border-radius: 20px;

    overflow: hidden;
}


/* Sağ taraftaki dekor */

.contact-cta-box::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -100px;
    top: -150px;

    border: 1px solid rgba(7, 137, 223, 0.20);
    border-radius: 50%;
}


/* Mavi sol çizgi */

.contact-cta-box::after {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 4px;
    height: 90px;

    transform: translateY(-50%);

    background: var(--primary);

    border-radius: 0 4px 4px 0;
}


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

.contact-cta-content {
    position: relative;
    z-index: 2;

    max-width: 600px;
}


.contact-cta-label {
    display: block;

    color: var(--primary-dark);

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

    letter-spacing: 2px;

    margin-bottom: 12px;
}


.contact-cta-content h2 {
    color: #171c24;

    font-size: 36px;
    line-height: 1.2;
    font-weight: 800;

    margin-bottom: 13px;
}


.contact-cta-content h2 span {
    color: var(--primary-dark);
}


.contact-cta-content p {
    max-width: 540px;

    color: var(--light-text);

    font-size: 15px;
    line-height: 1.75;

    margin: 0;
}


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

.contact-cta-actions {
    position: relative;
    z-index: 2;

    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: 12px;
}


/* TELEFON */

.cta-phone-btn {
    min-height: 58px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 0 19px;

    background: #171c24;

    border-radius: 9px;

    color: #ffffff;

    transition: var(--transition);
}


.cta-phone-btn > i {
    color: var(--primary);

    font-size: 19px;
}


.cta-phone-btn div {
    display: flex;
    flex-direction: column;
}


.cta-phone-btn small {
    color: #9ca3af;

    font-size: 10px;
}


.cta-phone-btn strong {
    color: #ffffff;

    font-size: 14px;
    font-weight: 700;
}


.cta-phone-btn:hover {
    background: #252c36;

    color: #ffffff;

    transform: translateY(-2px);
}


/* WHATSAPP */

.cta-whatsapp-btn {
    min-height: 58px;

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

    gap: 9px;

    padding: 0 19px;

    background: #25d366;

    border-radius: 9px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    transition: var(--transition);
}


.cta-whatsapp-btn i {
    font-size: 18px;
}


.cta-whatsapp-btn:hover {
    background: #1fbd5a;

    color: #ffffff;

    transform: translateY(-2px);
}


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

.site-footer {
    position: relative;

    background:
        linear-gradient(
            135deg,
            #11161d 0%,
            #171c24 100%
        );

    color: #ffffff;

    overflow: hidden;
}


/* Sol altta dekoratif daire */

.site-footer::before {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    left: -220px;
    bottom: -220px;

    border: 1px solid rgba(7, 137, 223, 0.16);
    border-radius: 50%;

    pointer-events: none;
}


/* ========================================
   ANA FOOTER ALANI
======================================== */

.footer-main {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    padding: 70px 0 60px;
}


/* ========================================
   SOL TARAF
======================================== */

.footer-brand {
    max-width: 430px;
}


.footer-logo {
    display: inline-block;

    margin-bottom: 22px;
}


.footer-logo img {
    display: block;

    width: 210px;
    height: 70px;

    object-fit: contain;
    object-position: left center;
}


.footer-brand p {
    max-width: 380px;

    color: #939ca8;

    font-size: 15px;
    line-height: 1.8;

    margin: 0;
}

/* ========================================
   SAĞ - BİZE ULAŞIN
======================================== */

.footer-contact {
    max-width: 520px;

    justify-self: end;

    width: 100%;
}


/* BAŞLIK */

.footer-title {
    position: relative;

    color: #ffffff;

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

    letter-spacing: 0.5px;

    margin: 0 0 28px;

    padding-left: 15px;
}


/* Mavi başlık çizgisi */

.footer-title::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 3px;
    height: 24px;

    transform: translateY(-50%);

    background: var(--primary);

    border-radius: 2px;
}


/* ========================================
   İLETİŞİM SATIRLARI
======================================== */

.footer-contact-row {
    width: fit-content;

    display: flex;
    align-items: flex-start;

    gap: 13px;

    margin-bottom: 17px;

    color: #d6d9de;

    font-size: 14px;
    line-height: 1.7;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


/* İkon */

.footer-contact-row i {
    flex-shrink: 0;

    width: 20px;

    margin-top: 2px;

    color: var(--primary);

    font-size: 16px;

    text-align: center;
}


/* Hover */

.footer-contact-row:hover {
    color: #ffffff;

    transform: translateX(4px);
}


/* Telefon */

.footer-contact-row[href^="tel:"] span {
    color: #e3e6ea;

    transition: color 0.3s ease;
}


.footer-contact-row[href^="tel:"]:hover span {
    color: var(--primary);
}


/* Mail */

.footer-contact-row[href^="mailto:"] span {
    transition: color 0.3s ease;
}


.footer-contact-row[href^="mailto:"]:hover span {
    color: var(--primary);
}


/* ========================================
   WHATSAPP
======================================== */

.footer-whatsapp i {
    color: #25d366;
}


.footer-whatsapp:hover {
    color: #25d366;
}


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

.footer-bottom {
    position: relative;
    z-index: 2;

    min-height: 65px;

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

    gap: 30px;

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


.footer-bottom p,
.footer-bottom span {
    color: #68717d;

    font-size: 11px;

    margin: 0;
}


/* ==========================================================
   HAKKIMIZDA İÇ SAYFASI
========================================================== */


/* ==========================================================
   İÇ SAYFA HERO / BAŞLIK
========================================================== */

.inner-page-hero {
    position: relative;

    padding: 72px 0;

    background:
        linear-gradient(
            110deg,
            #151b23 0%,
            #202833 100%
        );

    overflow: hidden;
}


.inner-page-hero::before {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    right: -130px;
    top: -210px;

    border: 1px solid rgba(7, 137, 223, 0.17);
    border-radius: 50%;
}


.inner-page-hero::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 110px;
    height: 3px;

    background: var(--primary);
}


.inner-page-hero-content {
    position: relative;
    z-index: 2;
}


.inner-page-label {
    display: block;

    color: var(--primary);

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

    letter-spacing: 2.5px;

    margin-bottom: 10px;
}


.inner-page-hero h1 {
    color: #ffffff;

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

    margin-bottom: 14px;
}


.inner-breadcrumb {
    display: flex;
    align-items: center;

    gap: 9px;

    font-size: 12px;
}


.inner-breadcrumb a {
    color: #9ca3af;

    transition: color 0.3s ease;
}


.inner-breadcrumb a:hover {
    color: var(--primary);
}


.inner-breadcrumb i {
    color: #5f6874;

    font-size: 10px;
}


.inner-breadcrumb span {
    color: #d4d7dc;
}


/* ==========================================================
   HAKKIMIZDA ANA ALAN
========================================================== */

.about-page-section {
    padding: 90px 0 70px;

    background: #f5f6f7;
}


.about-page-panel {
    position: relative;

    padding: 50px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8f9fa 100%
        );

    border: 1px solid #dde1e5;
    border-radius: 22px;

    box-shadow:
        0 18px 45px rgba(17, 24, 39, 0.07);

    overflow: hidden;
}


.about-page-panel::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 90px;
    height: 3px;

    background: var(--primary);

    border-radius: 0 0 4px 4px;
}

/* ==========================================================
   HAKKIMIZDA GÖRSEL
========================================================== */

.about-page-image {
    position: relative;

    height: 470px;

    overflow: hidden;

    border-radius: 15px;

    box-shadow:
        0 18px 40px rgba(17, 24, 39, 0.12);
}


.about-page-image > img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.about-page-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(17, 24, 39, 0.30),
            transparent 55%
        );

    pointer-events: none;
}


.about-page-image-info {
    position: absolute;

    z-index: 3;

    left: 20px;
    bottom: 20px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 13px 16px;

    background: rgba(17, 24, 39, 0.90);

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 9px;

    backdrop-filter: blur(7px);
}


.about-page-image-info > i {
    color: var(--primary);

    font-size: 19px;
}


.about-page-image-info div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.about-page-image-info strong {
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
}


.about-page-image-info span {
    color: #9ca3af;

    font-size: 10px;
}


/* ==========================================================
   HAKKIMIZDA YAZI
========================================================== */

.about-page-content {
    position: relative;

    z-index: 2;

    padding-left: 15px;
}


.about-page-label {
    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--primary-dark);

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

    letter-spacing: 2px;

    margin-bottom: 15px;
}


.about-page-label > span {
    width: 28px;
    height: 2px;

    background: var(--primary);
}


.about-page-content h2 {
    color: #171c24;

    font-size: 40px;
    line-height: 1.2;
    font-weight: 800;

    margin-bottom: 22px;
}


.about-page-content h2 span {
    color: var(--primary-dark);
}


.about-page-content p {
    color: #6b7280;

    font-size: 14px;
    line-height: 1.85;

    margin-bottom: 16px;
}


.about-page-content .about-page-lead {
    color: #374151;

    font-size: 17px;
    line-height: 1.75;
    font-weight: 600;

    margin-bottom: 16px;
}


/* ==========================================================
   ÇALIŞMA YAKLAŞIMIMIZ
========================================================== */

.approach-section {
    padding: 75px 0 90px;

    background: #ffffff;
}


.approach-heading {
    max-width: 690px;

    margin-bottom: 38px;
}


.section-small-label {
    display: block;

    color: var(--primary-dark);

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

    letter-spacing: 2px;

    margin-bottom: 11px;
}


.approach-heading h2 {
    color: #171c24;

    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;

    margin-bottom: 12px;
}


.approach-heading h2 span {
    color: var(--primary-dark);
}


.approach-heading > p {
    max-width: 620px;

    color: #6b7280;

    font-size: 14px;
    line-height: 1.8;

    margin: 0;
}


/* ÇALIŞMA YAKLAŞIMI KARTLARI */

.approach-item {
    position: relative;

    height: 100%;

    padding: 30px;

    background: #f8f9fa;

    border: 1px solid #e4e7eb;
    border-radius: 13px;

    overflow: hidden;

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


.approach-item:hover {
    transform: translateY(-5px);

    border-color: rgba(7, 137, 223, 0.45);

    box-shadow:
        0 15px 30px rgba(17, 24, 39, 0.08);
}


.approach-number {
    position: absolute;

    right: 20px;
    top: 14px;

    color: #e2e5e9;

    font-size: 36px;
    font-weight: 800;
}


.approach-icon {
    width: 48px;
    height: 48px;

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

    margin-bottom: 22px;

    background: #eef7fd;

    border: 1px solid #c9e5f7;
    border-radius: 9px;

    color: var(--primary-dark);

    font-size: 20px;
}


.approach-item h3 {
    color: #20252c;

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

    margin-bottom: 10px;
}


.approach-item p {
    color: #727983;

    font-size: 13px;
    line-height: 1.8;

    margin: 0;
}

/* ==========================================================
   NEDEN BİZİMLE ÇALIŞMALISINIZ
========================================================== */

.why-us-section {
    padding: 90px 0;

    background: #f5f6f7;
}


.why-us-wrapper {
    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 75px;

    padding: 55px;

    background: #ffffff;

    border: 1px solid #e0e3e7;
    border-radius: 22px;

    box-shadow:
        0 18px 45px rgba(17, 24, 39, 0.06);
}


/* SOL TARAF */

.why-us-intro {
    position: relative;

    padding-right: 45px;

    border-right: 1px solid #e4e7eb;
}


.why-us-label {
    display: block;

    color: var(--primary-dark);

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

    letter-spacing: 2px;

    margin-bottom: 13px;
}


.why-us-intro h2 {
    color: #171c24;

    font-size: 38px;
    line-height: 1.2;

    font-weight: 800;

    margin-bottom: 18px;
}


.why-us-intro h2 span {
    color: var(--primary-dark);
}


.why-us-intro > p {
    color: #6b7280;

    font-size: 14px;
    line-height: 1.85;

    margin-bottom: 26px;
}


.why-us-link {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: #252a31;

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

    transition: color 0.3s ease;
}


.why-us-link i {
    color: var(--primary-dark);

    transition: transform 0.3s ease;
}


.why-us-link:hover {
    color: var(--primary-dark);
}


.why-us-link:hover i {
    transform: translateX(5px);
}


/* SAĞ TARAF */

.why-us-list {
    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 35px;
}


.why-us-item {
    display: flex;

    gap: 14px;

    padding: 22px 0;

    border-bottom: 1px solid #e8eaed;
}


.why-us-item:nth-last-child(-n+2) {
    border-bottom: none;
}


.why-us-icon {
    flex-shrink: 0;

    width: 39px;
    height: 39px;

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

    background: #eef7fd;

    border: 1px solid #c9e5f7;
    border-radius: 8px;

    color: var(--primary-dark);

    font-size: 17px;
}


.why-us-item h3 {
    color: #252a31;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 800;

    margin: 1px 0 7px;
}


.why-us-item p {
    color: #747b84;

    font-size: 12px;
    line-height: 1.75;

    margin: 0;
}


/* ==========================================================
   UZMANLIK ALANLARIMIZ
========================================================== */

.about-expertise-section {
    padding: 90px 0 100px;

    background: #ffffff;
}


.about-expertise-box {
    position: relative;

    padding: 48px 50px;

    background:
        linear-gradient(
            120deg,
            #171c24,
            #202731
        );

    border-radius: 20px;

    overflow: hidden;
}


.about-expertise-box::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -140px;
    bottom: -180px;

    border: 1px solid rgba(7, 137, 223, 0.13);
    border-radius: 50%;

    pointer-events: none;
}


.about-expertise-title {
    position: relative;
    z-index: 2;

    max-width: 650px;

    margin-bottom: 30px;
}


.about-expertise-title > span {
    display: block;

    color: var(--primary);

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

    letter-spacing: 2px;

    margin-bottom: 10px;
}


.about-expertise-title h2 {
    color: #ffffff;

    font-size: 32px;
    line-height: 1.3;

    font-weight: 800;

    margin: 0;
}


.about-expertise-list {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 10px;

    margin-bottom: 30px;
}


.about-expertise-list a {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 13px 14px;

    background: rgba(255, 255, 255, 0.045);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;

    color: #d9dde2;

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

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}


.about-expertise-list a i {
    color: var(--primary);
}


.about-expertise-list a:hover {
    background: rgba(255, 255, 255, 0.08);

    border-color: rgba(7, 137, 223, 0.30);

    color: #ffffff;
}


.expertise-btn {
    position: relative;
    z-index: 2;

    min-height: 48px;

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

    gap: 10px;

    padding: 0 20px;

    background: var(--primary);

    border-radius: 8px;

    color: #171c24;

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

    transition: var(--transition);
}


.expertise-btn i {
    transition: transform 0.3s ease;
}


.expertise-btn:hover {
    background: #ffffff;

    color: #171c24;
}


.expertise-btn:hover i {
    transform: translateX(4px);
}

/* ==========================================================
   MAKİNE PARKURU İÇ SAYFASI
========================================================== */


/* ==========================================================
   MAKİNE PARKURU TANITIM
========================================================== */

.machine-page-intro {
    padding: 90px 0 70px;

    background: #f5f6f7;
}


.machine-page-intro-box {
    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 480px;

    background: #ffffff;

    border: 1px solid #e0e3e7;
    border-radius: 22px;

    box-shadow:
        0 18px 45px rgba(17, 24, 39, 0.07);

    overflow: hidden;
}


/* SOL */

.machine-page-intro-content {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 55px;
}


.machine-page-label {
    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--primary-dark);

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

    letter-spacing: 2px;

    margin-bottom: 15px;
}


.machine-page-label > span {
    width: 28px;
    height: 2px;

    background: var(--primary);
}


.machine-page-intro-content h2 {
    color: #171c24;

    font-size: 40px;
    line-height: 1.2;
    font-weight: 800;

    margin-bottom: 20px;
}


.machine-page-intro-content h2 span {
    color: var(--primary-dark);
}


.machine-page-lead {
    color: #374151 !important;

    font-size: 16px !important;
    font-weight: 600;

    line-height: 1.8 !important;
}


.machine-page-intro-content > p {
    color: #6b7280;

    font-size: 14px;
    line-height: 1.85;

    margin-bottom: 15px;
}


/* KÜÇÜK ÖZELLİKLER */

.machine-page-mini-features {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 13px;
}


.machine-page-mini-features > div {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 10px 12px;

    background: #eef7fd;

    border: 1px solid #c9e5f7;
    border-radius: 7px;
}


.machine-page-mini-features i {
    color: var(--primary-dark);

    font-size: 14px;
}


.machine-page-mini-features span {
    color: #454b53;

    font-size: 11px;
    font-weight: 700;
}


/* SAĞ GÖRSEL */

.machine-page-intro-image {
    position: relative;

    min-height: 480px;

    overflow: hidden;
}


.machine-page-intro-image > img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;
}


.machine-page-intro-box:hover
.machine-page-intro-image > img {
    transform: scale(1.035);
}


.machine-page-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(17, 24, 39, 0.40),
            transparent 55%
        );
}


.machine-page-image-badge {
    position: absolute;

    left: 22px;
    bottom: 22px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 13px 15px;

    background: rgba(17, 24, 39, 0.90);

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 9px;

    backdrop-filter: blur(7px);
}


.machine-page-image-badge > i {
    color: var(--primary);

    font-size: 19px;
}


.machine-page-image-badge div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.machine-page-image-badge strong {
    color: #ffffff;

    font-size: 12px;
}


.machine-page-image-badge span {
    color: #9ca3af;

    font-size: 10px;
}


/* ==========================================================
   EKİPMANLAR
========================================================== */

.equipment-section {
    padding: 80px 0 95px;

    background: #ffffff;
}


.equipment-heading {
    max-width: 700px;

    margin-bottom: 45px;
}


.equipment-heading > span {
    display: block;

    color: var(--primary-dark);

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

    letter-spacing: 2px;

    margin-bottom: 10px;
}


.equipment-heading h2 {
    color: #171c24;

    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;

    margin-bottom: 12px;
}


.equipment-heading h2 strong {
    color: var(--primary-dark);

    font-weight: 800;
}


.equipment-heading p {
    color: #6b7280;

    font-size: 14px;
    line-height: 1.8;

    margin: 0;
}

/* ==========================================================
   EKİPMAN GRUPLARI
========================================================== */

.equipment-group {
    display: grid;

    grid-template-columns: 0.32fr 1fr;

    gap: 45px;

    padding: 35px 0;

    border-top: 1px solid #e5e7eb;
}


.equipment-group:last-child {
    border-bottom: 1px solid #e5e7eb;
}


/* GRUP BAŞLIĞI */

.equipment-group-heading {
    display: flex;
    align-items: flex-start;

    gap: 13px;
}


.equipment-group-icon {
    flex-shrink: 0;

    width: 43px;
    height: 43px;

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

    background: #eef7fd;

    border: 1px solid #c9e5f7;
    border-radius: 8px;

    color: var(--primary-dark);

    font-size: 18px;
}


.equipment-group-heading > div:last-child {
    padding-top: 2px;
}


.equipment-group-heading span {
    display: block;

    color: var(--primary-dark);

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

    letter-spacing: 1.5px;

    margin-bottom: 4px;
}


.equipment-group-heading h3 {
    color: #252a31;

    font-size: 15px;
    line-height: 1.45;

    font-weight: 800;

    margin: 0;
}


/* ==========================================================
   EKİPMAN LİSTESİ
========================================================== */

.equipment-list {
    display: grid;

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

    gap: 10px;
}


.equipment-item {
    min-height: 88px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 15px;

    background: #f8f9fa;

    border: 1px solid #e5e7eb;
    border-radius: 9px;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}


.equipment-item:hover {
    transform: translateY(-3px);

    background: #f3f9fd;

    border-color: rgba(7, 137, 223, 0.40);
}


.equipment-number {
    flex-shrink: 0;

    width: 30px;
    height: 30px;

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

    background: #171c24;

    border-radius: 6px;

    color: var(--primary);

    font-size: 9px;
    font-weight: 800;
}


.equipment-item > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.equipment-item strong {
    color: #252a31;

    font-size: 13px;
    font-weight: 800;
}


.equipment-item div span {
    color: #747b84;

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


/* ==========================================================
   TEKNİK ALTYAPI BİLGİSİ
========================================================== */

.machine-capability-section {
    padding: 0 0 100px;

    background: #ffffff;
}


.machine-capability-box {
    position: relative;

    display: grid;

    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 25px;

    padding: 38px 42px;

    background:
        linear-gradient(
            120deg,
            #171c24,
            #202731
        );

    border-radius: 17px;

    overflow: hidden;
}


.machine-capability-box::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: -120px;
    top: -150px;

    border: 1px solid rgba(7, 137, 223, 0.14);
    border-radius: 50%;
}


.machine-capability-icon {
    width: 55px;
    height: 55px;

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

    background: rgba(7, 137, 223, 0.10);

    border: 1px solid rgba(7, 137, 223, 0.22);
    border-radius: 10px;

    color: var(--primary);

    font-size: 22px;
}


.machine-capability-content {
    position: relative;
    z-index: 2;

    max-width: 680px;
}


.machine-capability-content > span {
    display: block;

    color: var(--primary);

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

    letter-spacing: 2px;

    margin-bottom: 5px;
}


.machine-capability-content h2 {
    color: #ffffff;

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

    margin-bottom: 6px;
}


.machine-capability-content p {
    color: #929ba7;

    font-size: 12px;
    line-height: 1.7;

    margin: 0;
}


.machine-capability-btn {
    position: relative;
    z-index: 2;

    min-height: 47px;

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

    gap: 9px;

    padding: 0 18px;

    background: var(--primary);

    border-radius: 7px;

    color: #171c24;

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

    white-space: nowrap;

    transition: var(--transition);
}


.machine-capability-btn i {
    transition: transform 0.3s ease;
}


.machine-capability-btn:hover {
    background: #ffffff;

    color: #171c24;
}


.machine-capability-btn:hover i {
    transform: translateX(4px);
}

/* ==========================================================
   HİZMETLER ANA SAYFASI
========================================================== */


/* ==========================================================
   HİZMETLER GİRİŞ
========================================================== */

.services-page-intro {
    padding: 80px 0 45px;

    background: #f5f6f7;
}


.services-page-intro .container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;
}


.services-page-intro-content {
    max-width: 720px;
}


.services-page-label {
    display: block;

    color: var(--primary-dark);

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

    letter-spacing: 2px;

    margin-bottom: 12px;
}


.services-page-intro-content h2 {
    color: #171c24;

    font-size: 40px;
    line-height: 1.2;
    font-weight: 800;

    margin-bottom: 16px;
}


.services-page-intro-content h2 span {
    color: var(--primary-dark);
}


.services-page-intro-content p {
    max-width: 680px;

    color: #6b7280;

    font-size: 14px;
    line-height: 1.85;

    margin: 0;
}


/* SAĞ KÜÇÜK BİLGİ */

.services-page-intro-info {
    flex-shrink: 0;

    min-width: 220px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 15px 17px;

    background: #ffffff;

    border: 1px solid #e1e4e8;
    border-radius: 10px;

    box-shadow:
        0 10px 25px rgba(17, 24, 39, 0.05);
}


.services-intro-info-icon {
    flex-shrink: 0;

    width: 43px;
    height: 43px;

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

    background: #eef7fd;

    border: 1px solid #c9e5f7;
    border-radius: 8px;

    color: var(--primary-dark);

    font-size: 18px;
}


.services-page-intro-info > div:last-child {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.services-page-intro-info strong {
    color: #252a31;

    font-size: 13px;
    font-weight: 800;
}


.services-page-intro-info span {
    color: #858b93;

    font-size: 10px;
}


/* ==========================================================
   HİZMET KARTLARI
========================================================== */

.services-page-list {
    padding: 35px 0 95px;

    background: #f5f6f7;
}


.service-page-card {
    display: block;

    height: 100%;

    background: #ffffff;

    border: 1px solid #e1e4e8;
    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 10px 25px rgba(17, 24, 39, 0.045);

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


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

    border-color: rgba(7, 137, 223, 0.45);

    box-shadow:
        0 20px 40px rgba(17, 24, 39, 0.10);
}


/* GÖRSEL */

.service-page-image {
    position: relative;

    height: 230px;

    overflow: hidden;

    background: #e5e7eb;
}


.service-page-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(17, 24, 39, 0.35),
            transparent 55%
        );

    pointer-events: none;
}


.service-page-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.55s ease;
}


.service-page-card:hover
.service-page-image img {
    transform: scale(1.055);
}


/* NUMARA */

.service-page-number {
    position: absolute;
    z-index: 2;

    right: 14px;
    top: 14px;

    width: 35px;
    height: 35px;

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

    background: rgba(17, 24, 39, 0.88);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;

    color: var(--primary);

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

    backdrop-filter: blur(5px);
}


/* KART İÇERİK */

.service-page-card-content {
    padding: 25px 24px 24px;
}


.service-page-category {
    display: block;

    color: var(--primary-dark);

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

    letter-spacing: 1.5px;

    margin-bottom: 8px;
}


.service-page-card-content h3 {
    min-height: 47px;

    color: #252a31;

    font-size: 17px;
    line-height: 1.4;
    font-weight: 800;

    margin-bottom: 10px;
}


.service-page-card-content p {
    min-height: 63px;

    color: #747b84;

    font-size: 12px;
    line-height: 1.8;

    margin-bottom: 18px;
}


.service-page-link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #252a31;

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

    transition: color 0.3s ease;
}


.service-page-link i {
    color: var(--primary-dark);

    transition: transform 0.3s ease;
}


.service-page-card:hover
.service-page-link {
    color: var(--primary-dark);
}


.service-page-card:hover
.service-page-link i {
    transform: translateX(5px);
}


/* ==========================================================
   NEDEN ÇAĞRI BAKIM
========================================================== */

.services-why-section {
    padding: 90px 0;

    background: #ffffff;
}


.services-why-box {
    position: relative;

    padding: 50px;

    background:
        linear-gradient(
            120deg,
            #171c24 0%,
            #202731 100%
        );

    border-radius: 20px;

    overflow: hidden;
}


.services-why-box::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -150px;
    top: -200px;

    border: 1px solid rgba(7, 137, 223, 0.15);
    border-radius: 50%;
}


.services-why-box::after {
    content: "";

    position: absolute;

    left: 0;
    top: 50px;

    width: 3px;
    height: 75px;

    background: var(--primary);
}


/* BAŞLIK */

.services-why-heading {
    position: relative;
    z-index: 2;

    max-width: 690px;

    margin-bottom: 35px;
}


.services-why-heading > span {
    display: block;

    color: var(--primary);

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

    letter-spacing: 2px;

    margin-bottom: 9px;
}


.services-why-heading h2 {
    color: #ffffff;

    font-size: 32px;
    line-height: 1.3;
    font-weight: 800;

    margin-bottom: 11px;
}


.services-why-heading h2 strong {
    color: var(--primary);

    font-weight: 800;
}


.services-why-heading p {
    max-width: 620px;

    color: #9ca3af;

    font-size: 12px;
    line-height: 1.8;

    margin: 0;
}


/* 4 ÖZELLİK */

.services-why-items {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 10px;

    margin-bottom: 30px;
}


.services-why-item {
    min-height: 115px;

    display: flex;
    align-items: flex-start;

    gap: 12px;

    padding: 18px;

    background: rgba(255, 255, 255, 0.045);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;

    transition:
        background 0.3s ease,
        border-color 0.3s ease;
}


.services-why-item:hover {
    background: rgba(255, 255, 255, 0.07);

    border-color: rgba(7, 137, 223, 0.25);
}


.services-why-item > i {
    flex-shrink: 0;

    color: var(--primary);

    font-size: 19px;
}


.services-why-item > div {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.services-why-item strong {
    color: #ffffff;

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


.services-why-item span {
    color: #929aa5;

    font-size: 10px;
    line-height: 1.6;
}


/* BUTON */

.services-why-btn {
    position: relative;
    z-index: 2;

    min-height: 47px;

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

    gap: 9px;

    padding: 0 19px;

    background: var(--primary);

    border-radius: 7px;

    color: #171c24;

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

    transition: var(--transition);
}


.services-why-btn i {
    transition: transform 0.3s ease;
}


.services-why-btn:hover {
    background: #ffffff;

    color: #171c24;
}


.services-why-btn:hover i {
    transform: translateX(4px);
}

/* ==========================================================
   HİZMET DETAY SAYFALARI
========================================================== */


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

.service-detail-hero h1 {
    max-width: 900px;
}


/* ==========================================================
   HİZMET TANITIM
========================================================== */

.service-detail-intro {
    padding: 90px 0;

    background: #f5f6f7;
}


.service-detail-intro-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 65px;
}


/* GÖRSEL */

.service-detail-main-image {
    position: relative;

    height: 500px;

    overflow: hidden;

    border-radius: 18px;

    box-shadow:
        0 20px 45px rgba(17, 24, 39, 0.12);
}


.service-detail-main-image > img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;
}


.service-detail-main-image:hover > img {
    transform: scale(1.035);
}


.service-detail-main-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(17, 24, 39, 0.42),
            transparent 55%
        );

    pointer-events: none;
}


.service-detail-image-label {
    position: absolute;

    z-index: 3;

    left: 20px;
    bottom: 20px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 13px 16px;

    background: rgba(17, 24, 39, 0.91);

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 9px;

    backdrop-filter: blur(7px);
}


.service-detail-image-label > i {
    color: var(--primary);

    font-size: 19px;
}


.service-detail-image-label > div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.service-detail-image-label strong {
    color: #ffffff;

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


.service-detail-image-label span {
    color: #9ca3af;

    font-size: 10px;
}


/* YAZI */

.service-detail-small-title {
    display: block;

    color: var(--primary-dark);

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

    letter-spacing: 2px;

    margin-bottom: 13px;
}


.service-detail-intro-content h2 {
    color: #171c24;

    font-size: 40px;
    line-height: 1.2;
    font-weight: 800;

    margin-bottom: 20px;
}


.service-detail-intro-content h2 span {
    color: var(--primary-dark);
}


.service-detail-intro-content p {
    color: #6b7280;

    font-size: 14px;
    line-height: 1.85;

    margin-bottom: 15px;
}


.service-detail-intro-content .service-detail-lead {
    color: #374151;

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


/* ETİKETLER */

.service-detail-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 24px;
}


.service-detail-tags span {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 8px 11px;

    background: #ffffff;

    border: 1px solid #e1e4e8;
    border-radius: 6px;

    color: #555c65;

    font-size: 10px;
    font-weight: 700;
}


.service-detail-tags i {
    color: var(--primary-dark);
}


/* ==========================================================
   ORTAK BÖLÜM BAŞLIĞI
========================================================== */

.service-section-heading {
    max-width: 730px;

    margin-bottom: 40px;
}


.service-section-heading > span {
    display: block;

    color: var(--primary-dark);

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

    letter-spacing: 2px;

    margin-bottom: 10px;
}


.service-section-heading h2 {
    color: #171c24;

    font-size: 36px;
    line-height: 1.25;
    font-weight: 800;

    margin-bottom: 12px;
}


.service-section-heading h2 strong {
    color: var(--primary-dark);

    font-weight: 800;
}


.service-section-heading p {
    color: #6b7280;

    font-size: 13px;
    line-height: 1.8;

    margin: 0;
}


/* ==========================================================
   TEKNİK YAKLAŞIM
========================================================== */

.service-technical-section {
    padding: 85px 0 95px;

    background: #ffffff;
}


.service-technical-grid {
    display: grid;

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

    gap: 14px;
}


.service-technical-item {
    position: relative;

    min-height: 270px;

    padding: 27px 24px;

    background: #f8f9fa;

    border: 1px solid #e3e6e9;
    border-radius: 12px;

    overflow: hidden;

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


.service-technical-item:hover {
    transform: translateY(-5px);

    border-color: rgba(7, 137, 223, 0.42);

    box-shadow:
        0 15px 30px rgba(17, 24, 39, 0.07);
}


.service-tech-number {
    position: absolute;

    right: 17px;
    top: 12px;

    color: #e1e4e8;

    font-size: 31px;
    font-weight: 800;
}


.service-tech-icon {
    width: 45px;
    height: 45px;

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

    margin-bottom: 21px;

    background: #eef7fd;

    border: 1px solid #c9e5f7;
    border-radius: 8px;

    color: var(--primary-dark);

    font-size: 18px;
}


.service-technical-item h3 {
    color: #252a31;

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

    margin-bottom: 10px;
}


.service-technical-item p {
    color: #747b84;

    font-size: 11.5px;
    line-height: 1.8;

    margin: 0;
}

/* ==========================================================
   UYGULAMA ALANLARI
========================================================== */

.service-application-section {
    padding: 90px 0;

    background: #f5f6f7;
}


.service-application-box {
    display: grid;

    grid-template-columns: 0.75fr 1.25fr;

    gap: 65px;

    padding: 50px;

    background: #ffffff;

    border: 1px solid #e0e3e7;
    border-radius: 20px;

    box-shadow:
        0 15px 40px rgba(17, 24, 39, 0.055);
}


/* SOL */

.service-application-heading > span {
    display: block;

    color: var(--primary-dark);

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

    letter-spacing: 2px;

    margin-bottom: 10px;
}


.service-application-heading h2 {
    color: #171c24;

    font-size: 34px;
    line-height: 1.25;
    font-weight: 800;

    margin-bottom: 15px;
}


.service-application-heading h2 strong {
    display: block;

    color: var(--primary-dark);

    font-weight: 800;
}


.service-application-heading p {
    color: #6b7280;

    font-size: 13px;
    line-height: 1.85;

    margin: 0;
}


/* SAĞ */

.service-application-list {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0 28px;
}


.service-application-item {
    display: flex;

    gap: 13px;

    padding: 20px 0;

    border-bottom: 1px solid #e8eaed;
}


.service-application-item:nth-last-child(-n+2) {
    border-bottom: none;
}


.service-application-icon {
    flex-shrink: 0;

    width: 38px;
    height: 38px;

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

    background: #eef7fd;

    border: 1px solid #c9e5f7;
    border-radius: 7px;

    color: var(--primary-dark);

    font-size: 16px;
}


.service-application-item h3 {
    color: #252a31;

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

    margin: 1px 0 6px;
}


.service-application-item p {
    color: #747b84;

    font-size: 11px;
    line-height: 1.7;

    margin: 0;
}

/* ==========================================================
   HİZMET DETAY - SANAYİ ÇÖZÜMLERİ
========================================================== */

.service-industry-section {
    padding: 0 0 90px;

    background: #f5f6f7;
}


.service-industry-box {
    position: relative;

    padding: 45px 50px;

    background: #ffffff;

    border: 1px solid #e0e3e7;
    border-radius: 18px;

    overflow: hidden;
}


.service-industry-box::before {
    content: "";

    position: absolute;

    left: 0;
    top: 38px;

    width: 3px;
    height: 75px;

    background: var(--primary);
}


.service-industry-content {
    max-width: 850px;
}


.service-industry-content h2 {
    color: #171c24;

    font-size: 31px;
    line-height: 1.3;
    font-weight: 800;

    margin-bottom: 16px;
}


.service-industry-content h2 span {
    color: var(--primary-dark);
}


.service-industry-content p {
    color: #6b7280;

    font-size: 13px;
    line-height: 1.85;

    margin-bottom: 10px;
}


.service-industry-content p:last-child {
    margin-bottom: 0;
}


.service-industry-content strong {
    color: #374151;

    font-weight: 700;
}


/* ==========================================================
   İLETİŞİM SAYFASI - YENİ TASARIM
========================================================== */

.contact-simple-section {
    padding: 70px 0 45px;

    background: #ffffff;
}


/* BAŞLIK */

.contact-simple-heading {
    max-width: 720px;

    margin: 0 auto 50px;

    text-align: center;
}


.contact-simple-heading > span,
.contact-location-heading > span {
    display: block;

    margin-bottom: 10px;

    color: var(--primary-dark);

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

    letter-spacing: 1.5px;
}


.contact-simple-heading h2,
.contact-location-heading h2 {
    margin-bottom: 16px;

    color: var(--dark);

    font-size: 40px;
    line-height: 1.2;
    font-weight: 500;
}


.contact-simple-heading h2 strong,
.contact-location-heading h2 strong {
    font-weight: 800;
}


.contact-simple-heading p,
.contact-location-heading p {
    max-width: 650px;

    margin: 0 auto;

    color: var(--light-text);

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


/* ==========================================================
   İLETİŞİM KARTLARI
========================================================== */

.contact-simple-grid {
    display: grid;

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

    gap: 20px;
}


.contact-simple-card {
    min-height: 390px;

    padding: 45px 25px 35px;

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

    text-align: center;

    background: #f4f5f6;

    border: 1px solid #eef0f2;

    transition: 0.3s ease;
}


.contact-simple-card:hover {
    transform: translateY(-5px);

    background: #ffffff;

    border-color: rgba(7, 137, 223, 0.35);

    box-shadow: 0 18px 45px rgba(17, 24, 39, 0.09);
}


/* İKON */

.contact-simple-icon {
    width: 100px;
    height: 100px;

    margin-bottom: 30px;

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

    color: var(--primary-dark);

    background: #ffffff;

    border-radius: 50%;

    font-size: 34px;

    transition: 0.3s ease;
}


.contact-simple-card:hover .contact-simple-icon {
    color: #ffffff;

    background: var(--primary);
}


/* KART YAZILARI */

.contact-simple-card h3 {
    margin-bottom: 18px;

    color: var(--dark);

    font-size: 21px;
    font-weight: 800;
}


.contact-simple-text {
    min-height: 95px;

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


.contact-simple-text p,
.contact-simple-text a {
    margin: 0;

    color: var(--light-text);

    font-size: 15px;
    line-height: 1.8;

    text-decoration: none;
}


.contact-simple-text a:hover {
    color: var(--primary-dark);
}


/* BUTON */

.contact-simple-btn {
    min-width: 160px;
    min-height: 48px;

    margin-top: auto;

    padding: 0 20px;

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

    gap: 12px;

    color: #ffffff;

    background: var(--dark);

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    transition: 0.3s ease;
}


.contact-simple-btn i {
    font-size: 18px;

    transition: 0.3s ease;
}


.contact-simple-btn:hover {
    color: #111827;

    background: var(--primary);
}


.contact-simple-btn:hover i {
    transform: translateX(4px);
}


/* ==========================================================
   HARİTA / KONUM
========================================================== */

.contact-location-section {
    padding: 90px 0 100px;

    background: #f8fafc;
}


.contact-location-heading {
    max-width: 720px;

    margin: 0 auto 42px;

    text-align: center;
}


/* HARİTA */

.contact-location-map {
    position: relative;

    max-width: 1100px;

    margin: 0 auto;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    box-shadow: 0 15px 40px rgba(17, 24, 39, 0.08);
}


.contact-location-map iframe {
    display: block;

    width: 100%;
    height: 450px;

    pointer-events: none;
}


.contact-map-click {
    position: absolute;
    inset: 0;

    z-index: 2;

    display: block;

    cursor: pointer;
}


/* ADRES ALANI */

.contact-location-address {
    max-width: 900px;

    margin: 25px auto 0;

    padding: 25px 30px;

    display: grid;

    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 20px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
}


.contact-location-address-icon {
    width: 58px;
    height: 58px;

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

    color: var(--primary-dark);

    background: rgba(7, 137, 223, 0.12);

    border-radius: 50%;

    font-size: 25px;
}


.contact-location-address span {
    display: block;

    margin-bottom: 5px;

    color: var(--primary-dark);

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

    letter-spacing: 1.3px;
}


.contact-location-address p {
    margin: 0;

    color: var(--dark);

    font-size: 15px;
    line-height: 1.7;
    font-weight: 700;
}


.contact-location-address-btn {
    min-height: 45px;

    padding: 0 18px;

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

    gap: 10px;

    color: #ffffff;

    background: var(--dark);

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition: 0.3s ease;
}


.contact-location-address-btn:hover {
    color: #111827;

    background: var(--primary);
}


.contact-location-address-btn i {
    transition: 0.3s ease;
}


.contact-location-address-btn:hover i {
    transform: translateX(4px);
}


/* ==========================================================
   BLOG SAYFASI
========================================================== */

.blog-section {
    padding: 85px 0 100px;

    background: #f7f8fa;
}


/* ==========================================================
   BLOG BAŞLIK
========================================================== */

.blog-heading {
    width: 100%;
    max-width: 1100px;

    margin: 0 0 55px;

    text-align: left;
}


.blog-heading-label {
    display: block;

    margin-bottom: 11px;

    color: var(--primary-dark);

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

    letter-spacing: 1.7px;
}


.blog-heading h2 {
    max-width: 1100px;

    margin: 0 0 17px;

    color: var(--dark);

    font-size: 40px;
    line-height: 1.25;
    font-weight: 500;
}


.blog-heading h2 strong {
    color: var(--dark);

    font-weight: 800;
}


.blog-heading p {
    max-width: 1100px;

    margin: 0;

    color: var(--light-text);

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


/* ==========================================================
   BLOG KART
========================================================== */

.blog-card {
    max-width: 1120px;

    margin: 0 auto 28px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 18px;

    transition: 0.3s ease;
}


.blog-card:last-child {
    margin-bottom: 0;
}


.blog-card:hover {
    border-color: rgba(7, 137, 223, 0.35);

    box-shadow: 0 18px 45px rgba(17, 24, 39, 0.07);
}


/* KARTIN KAPALI HALİ */

.blog-card-summary {
    display: grid;

    grid-template-columns: 0.82fr 1.18fr;

    min-height: 330px;
}


/* ==========================================================
   BLOG GÖRSEL
========================================================== */

.blog-card-image {
    position: relative;

    min-height: 330px;

    overflow: hidden;

    background: #202630;
}


.blog-image-placeholder {
    position: absolute;
    inset: 0;

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

    gap: 10px;

    color: rgba(255, 255, 255, 0.45);

    background:
        linear-gradient(
            135deg,
            #171c24,
            #2c3440
        );
}


.blog-image-placeholder i {
    color: var(--primary);

    font-size: 35px;
}


.blog-image-placeholder span {
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;
}


/*
   Görselleri oluşturduğumuzda aşağıdaki şekilde kullanacağız:

.blog-image-1 {
    background: url("../images/blog/endustriyel-kaynak.jpg")
                center / cover no-repeat;
}

.blog-image-2 {
    background: url("../images/blog/gebze-metal-imalat.jpg")
                center / cover no-repeat;
}

.blog-image-3 {
    background: url("../images/blog/kaynak-yontemleri.jpg")
                center / cover no-repeat;
}

.blog-image-4 {
    background: url("../images/blog/paslanmaz-kaynak.jpg")
                center / cover no-repeat;
}

   Görseller geldikten sonra .blog-image-placeholder
   divlerini HTML'den kaldıracağız.
*/


/* ==========================================================
   KART İÇERİK
========================================================== */

.blog-card-content {
    padding: 45px 50px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}


.blog-category {
    display: inline-flex;
    align-items: center;

    margin-bottom: 14px;

    color: var(--primary-dark);

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

    letter-spacing: 1.5px;
}


.blog-category::before {
    content: "";

    width: 25px;
    height: 2px;

    margin-right: 10px;

    background: var(--primary);
}


.blog-card-content h3 {
    max-width: 610px;

    margin: 0 0 17px;

    color: var(--dark);

    font-size: 27px;
    line-height: 1.35;
    font-weight: 800;
}


.blog-card-content > p {
    max-width: 630px;

    margin: 0 0 24px;

    color: var(--light-text);

    font-size: 15px;
    line-height: 1.85;
}


/* ==========================================================
   DEVAMINI OKU
========================================================== */

.blog-read-btn {
    padding: 0;

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

    gap: 10px;

    color: var(--dark);

    background: transparent;

    border: 0;

    font-family: inherit;

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

    cursor: pointer;

    transition: 0.3s ease;
}


.blog-read-btn i {
    display: inline-block;

    color: var(--primary-dark);

    font-size: 16px;

    transition: 0.3s ease;
}


.blog-read-btn:hover {
    color: var(--primary-dark);
}


.blog-read-btn:hover i {
    transform: translateY(3px);
}


.blog-read-btn .read-less-text {
    display: none;
}


.blog-read-btn[aria-expanded="true"] .read-more-text {
    display: none;
}


.blog-read-btn[aria-expanded="true"] .read-less-text {
    display: inline;
}


.blog-read-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}


/* ==========================================================
   AÇILAN BLOG İÇERİĞİ
========================================================== */

.blog-article-body {
    padding: 55px 65px 65px;

    border-top: 1px solid #e5e7eb;

    background: #ffffff;
}


.blog-article-intro {
    max-width: 900px;

    margin-bottom: 42px;
}


.blog-article-intro > span {
    display: block;

    margin-bottom: 10px;

    color: var(--primary-dark);

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

    letter-spacing: 1.5px;
}


.blog-article-intro h3 {
    margin: 0 0 20px;

    color: var(--dark);

    font-size: 30px;
    line-height: 1.35;
    font-weight: 800;
}


.blog-article-intro p,
.blog-article-section p {
    color: #626b78;

    font-size: 15px;
    line-height: 1.9;
}


.blog-article-intro p {
    margin-bottom: 13px;
}


.blog-article-intro p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   3'LÜ BİLGİ ALANI
========================================================== */

.blog-info-grid {
    display: grid;

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

    gap: 18px;

    margin-bottom: 45px;
}


.blog-info-item {
    padding: 28px;

    background: #f7f8fa;

    border: 1px solid #eceef1;
    border-radius: 12px;
}


.blog-info-number {
    display: block;

    margin-bottom: 15px;

    color: var(--primary);

    font-size: 14px;
    font-weight: 800;
}


.blog-info-item h4 {
    margin-bottom: 11px;

    color: var(--dark);

    font-size: 17px;
    font-weight: 800;
}


.blog-info-item p {
    margin: 0;

    color: var(--light-text);

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


/* ==========================================================
   NORMAL MAKALE BÖLÜMÜ
========================================================== */

.blog-article-section {
    max-width: 950px;

    margin: 0 0 40px;
}


.blog-article-section h4 {
    margin-bottom: 14px;

    color: var(--dark);

    font-size: 22px;
    font-weight: 800;
}


.blog-article-section p {
    margin-bottom: 12px;
}


/* ==========================================================
   VURGU KUTUSU
========================================================== */

.blog-highlight-box {
    display: flex;
    align-items: flex-start;

    gap: 22px;

    padding: 28px 30px;

    background: #171c24;

    border-left: 3px solid var(--primary);
    border-radius: 8px;
}


.blog-highlight-box > i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: var(--primary);

    font-size: 25px;
}


.blog-highlight-box h4 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 800;
}


.blog-highlight-box p {
    max-width: 850px;

    margin: 0;

    color: #aeb5bf;

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

/* ==========================================================
   KAYNAK YÖNTEMLERİ
========================================================== */

.blog-method {
    display: grid;

    grid-template-columns: 65px 1fr;

    gap: 25px;

    padding: 35px 0;

    border-top: 1px solid #e5e7eb;
}


.blog-method:first-of-type {
    border-top: 0;
}


.blog-method-number {
    width: 55px;
    height: 55px;

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

    color: #111827;

    background: var(--primary);

    border-radius: 8px;

    font-size: 15px;
    font-weight: 800;
}


.blog-method-content h4 {
    margin-bottom: 12px;

    color: var(--dark);

    font-size: 21px;
    font-weight: 800;
}


.blog-method-content > p {
    max-width: 850px;

    margin-bottom: 23px;

    color: #626b78;

    font-size: 14px;
    line-height: 1.85;
}


.blog-method-columns {
    display: grid;

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

    gap: 20px;
}


.blog-method-columns > div {
    padding: 20px 22px;

    background: #f7f8fa;

    border-radius: 8px;
}


.blog-method-columns h5 {
    margin-bottom: 12px;

    color: var(--dark);

    font-size: 14px;
    font-weight: 800;
}


.blog-method-columns ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.blog-method-columns li {
    position: relative;

    margin-bottom: 8px;

    padding-left: 17px;

    color: var(--light-text);

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


.blog-method-columns li:last-child {
    margin-bottom: 0;
}


.blog-method-columns li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 8px;

    width: 5px;
    height: 5px;

    background: var(--primary);

    border-radius: 50%;
}


/* ==========================================================
   3 KRİTİK FAKTÖR
========================================================== */

.blog-critical-section {
    margin-top: 35px;

    padding: 38px;

    background: #171c24;

    border-radius: 12px;
}


.blog-critical-heading {
    margin-bottom: 28px;
}


.blog-critical-heading span {
    display: block;

    margin-bottom: 8px;

    color: var(--primary);

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

    letter-spacing: 1.5px;
}


.blog-critical-heading h4 {
    margin: 0;

    color: #ffffff;

    font-size: 23px;
    font-weight: 800;
}


.blog-critical-grid {
    display: grid;

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

    gap: 15px;
}


.blog-critical-item {
    padding: 22px;

    background: rgba(255, 255, 255, 0.055);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}


.blog-critical-item strong {
    display: block;

    margin-bottom: 11px;

    color: var(--primary);

    font-size: 13px;
}


.blog-critical-item h5 {
    margin-bottom: 8px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 800;
}


.blog-critical-item p {
    margin: 0;

    color: #aeb5bf;

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


/* ==========================================================
   CHECK LIST
========================================================== */

.blog-check-list {
    display: grid;

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

    gap: 10px 20px;

    margin: 22px 0 0;
    padding: 0;

    list-style: none;
}


.blog-check-list li {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #626b78;

    font-size: 14px;
}


.blog-check-list i {
    color: var(--primary-dark);

    font-size: 18px;
}


/* ==========================================================
   PASLANMAZ ALAŞIMLARI
========================================================== */

.blog-alloy-section {
    margin: 42px 0;

    padding: 35px;

    background: #f7f8fa;

    border-radius: 12px;
}


.blog-alloy-heading {
    margin-bottom: 25px;
}


.blog-alloy-heading span {
    display: block;

    margin-bottom: 7px;

    color: var(--primary-dark);

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

    letter-spacing: 1.5px;
}


.blog-alloy-heading h4 {
    margin: 0;

    color: var(--dark);

    font-size: 22px;
    font-weight: 800;
}


.blog-alloy-grid {
    display: grid;

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

    gap: 13px;
}


.blog-alloy-item {
    padding: 20px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 8px;
}


.blog-alloy-item strong {
    display: block;

    margin-bottom: 9px;

    color: var(--primary-dark);

    font-size: 15px;
    font-weight: 800;
}


.blog-alloy-item p {
    margin: 0;

    color: var(--light-text);

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

/* ==========================================================
   BLOG GÖRSELLERİ
========================================================== */

.blog-card-image {
    position: relative;

    overflow: hidden;
}


.blog-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 0.5s ease;
}


.blog-card:hover .blog-card-image img {
    transform: scale(1.035);
}