:root {
    --detail-container-width: 1440px;
    --detail-container-gutter: 32px;
}

.custom-page-container > .container {
    width: 100%;
    max-width: var(--detail-container-width);
    margin: 0 auto;
    padding-left: var(--detail-container-gutter);
    padding-right: var(--detail-container-gutter);
    box-sizing: border-box;
}

.container-fluid.ehizmet,
.container-fluid.e,
.hero-section .container-fluid.ehizmet,
.iletisim-section .container-fluid.ehizmet {
    width: 100%;
    max-width: var(--detail-container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--detail-container-gutter);
    padding-right: var(--detail-container-gutter);
    box-sizing: border-box;
}

.hero-section + .custom-page-container,
.custom-page-container + .container-fluid.ehizmet,
.container-fluid.ehizmet + .container-fluid.ehizmet,
.container-fluid.ehizmet + .iletisim-section,
.iletisim-section + .container-fluid.ehizmet,
.container-fluid.ehizmet + .industries,
.industries + .container-fluid.ehizmet {
    margin-top: 64px;
}

.section-hizmetler {
    padding-bottom: 64px;
}

.section-entegrasyon {
    padding-top: 16px;
}

.references-area {
    display: flex;
    flex-direction: column;
    row-gap: 92px;
}

.references-slider-and-button {
    display: flex;
    flex-direction: column;
    row-gap: 62px;
}

.logo-container {
    overflow: hidden;
    width: 90%;
    margin: 20px 0;
}

.logo-track {
    display: flex;
    width: max-content;
    animation: scroll 80s linear infinite;
}

.logo-track img {
    height: 60px;
    margin: 0 40px;
    filter: grayscale(1);
    transition: .4s;
    opacity: 0.3;
}

.logo-track img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transition: .4s;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ── INDUSTRIES ── */
.industries {
    max-width: 1440px;
    margin: 40px auto;
    padding: 40px 20px;
    box-sizing: border-box;
}

.ind-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 48px;
}

.ind-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.ind-card-link:hover,
.ind-card-link:focus,
.ind-card-link:active {
    text-decoration: none;
    color: inherit;
}

.ind-card-link .ind-card,
.ind-card-link .ind-card *,
.ind-card-link .ind-card h3,
.ind-card-link .ind-card p {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.ind-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    transition: border-color .25s, transform .2s;
    cursor: default;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ind-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-3px);
}

.ind-card-img {
    width: 100%;
    height: 160px;
    overflow: hidden;
    position: relative;
}

.ind-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(15%) brightness(0.9);
    transition: filter .3s, transform .4s;
}

.ind-card:hover .ind-card-img img {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.06);
}

.ind-card-body {
    padding: 16px 18px 18px;
    border-top: 2px solid transparent;
    transition: border-color .25s;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ind-card:hover .ind-card-body {
    border-top-color: var(--color-primary);
}

.ind-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 6px;
    line-height: 1.3;
    font-family: var(--font-family-primary);
}

.ind-card p {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

    /* ── Hizmet Alanları Grid ── */
    .hizmet-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        align-items: stretch;
    }

    .hizmet-kart {
        display: flex;
        flex-direction: column;
        height: 100%;
        background-color: #ffffff;
        border: 1px solid rgba(200, 16, 46, 0.25);
        padding: 32px 24px;
        transition: all .3s ease;
    }

    .hizmet-kart:hover {
        background-color: #fafafa;
        border-color: var(--color-primary);
    }

    .hizmet-kart .numara {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: rgba(200, 16, 46, 0.08);
        font-size: 13px;
        font-weight: 700;
        color: var(--color-primary);
        letter-spacing: 1px;
        margin-bottom: 20px;
        transition: all .3s ease;
    }

    .hizmet-kart:hover .numara {
        background-color: var(--color-primary);
        color: white;
    }

    .hizmet-kart h3 {
        font-size: 18px;
        font-weight: 600;
        color: var(--color-primary-dark);
        margin-bottom: 10px;
        font-family: var(--font-family-primary);
    }

    .hizmet-kart p {
        font-size: 14px;
        color: var(--color-text-secondary);
        line-height: 1.65;
        margin: 0;
    }

    .hizmet-cta-bar {
        grid-column: 1 / -1;
        background-color: #ffffff;
        border: 1px solid rgba(200, 16, 46, 0.25);
        margin-top: -1px;
        padding: 24px 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
    }

    .hizmet-cta-bar .cta-text {
        font-size: 14px;
        color: var(--color-text-secondary);
    }

    .hizmet-cta-bar .cta-text strong {
        color: var(--color-primary-dark);
        font-weight: 600;
        display: block;
        margin-bottom: 2px;
    }

    .hizmet-cta-bar .btn-cta {
        background-color: var(--color-primary);
        color: white;
        padding: 12px 28px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: background-color .3s;
        white-space: nowrap;
    }

    .hizmet-cta-bar .btn-cta:hover {
        background-color: #a00d24;
    }

    /* ── Süreç Adımları ── */
    .surec-item {
        display: flex;
        gap: 24px;
        padding: 28px 0;
        border-bottom: 1px solid #e0e0e0;
        align-items: flex-start;
    }

    .surec-item:last-child {
        border-bottom: none;
    }

    .surec-numara {
        width: 44px;
        height: 44px;
        border: 2px solid #e0e0e0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        color: #999;
        flex-shrink: 0;
        transition: all .3s;
    }

    .surec-item:hover .surec-numara {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .surec-body h4 {
        font-size: 18px;
        font-weight: 600;
        color: var(--color-primary-dark);
        margin-bottom: 6px;
        font-family: var(--font-family-primary);
    }

    .surec-body p {
        font-size: 14px;
        color: var(--color-text-secondary);
        line-height: 1.65;
        margin: 0;
    }

    /* ── Proje Referans Kartları ── */
    .proje-kart {
        background: #ffffff;
        border: 1px solid #e0e0e0;
        overflow: hidden;
        transition: transform .3s;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .proje-kart:hover {
        transform: translateY(-3px);
    }

    .proje-kart-img {
        width: 100%;
        height: 200px;
        overflow: hidden;
    }

    .proje-kart-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .4s;
    }

    .proje-kart:hover .proje-kart-img img {
        transform: scale(1.05);
    }

    .proje-kart-body {
        padding: 20px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .proje-tag {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--color-primary);
        margin-bottom: 8px;
    }

    .proje-kart-body h4 {
        font-size: 16px;
        font-weight: 600;
        color: var(--color-primary-dark);
        margin-bottom: 8px;
        line-height: 1.4;
    }

    .proje-kart-body .proje-meta {
        font-size: 13px;
        color: var(--color-text-secondary);
        line-height: 1.5;
        margin-bottom: 12px;
    }

    .proje-kpi {
        display: flex;
        align-items: baseline;
        gap: 8px;
        border-top: 1px solid #ddd;
        padding-top: 12px;
        margin-top: auto;
    }

    .proje-kpi strong {
        font-size: 22px;
        font-weight: 700;
        color: var(--color-primary-dark);
    }

    .proje-kpi span {
        font-size: 12px;
        color: #999;
    }

    /* ── İletişim Formu ── */
    .iletisim-section {
        background-color: #ffffff;
        padding-bottom: 64px;
    }

    .iletisim-form-wrapper {
        background: white;
        padding: 32px;
        border: 1px solid #e0e0e0;
    }

    .iletisim-form-wrapper h3 {
        font-size: 22px;
        font-weight: 600;
        color: var(--color-primary-dark);
        margin-bottom: 6px;
    }

    .iletisim-form-wrapper .form-lead {
        font-size: 14px;
        color: #888;
        margin-bottom: 20px;
    }

    .iletisim-form-wrapper label {
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        color: #888;
        letter-spacing: .5px;
    }

    .iletisim-form-wrapper input,
    .iletisim-form-wrapper textarea {
        border: 1px solid #e0e0e0;
        padding: 10px 12px;
        font-size: 14px;
        font-family: var(--font-family-primary);
        width: 100%;
        outline: none;
        transition: border-color .3s;
    }

    .iletisim-form-wrapper input:focus,
    .iletisim-form-wrapper textarea:focus {
        border-color: #999;
    }

    .iletisim-form-wrapper textarea {
        min-height: 80px;
        resize: vertical;
    }

    .btn-form-submit {
        background-color: var(--color-primary);
        color: white;
        border: none;
        padding: 14px;
        width: 100%;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .5px;
        cursor: pointer;
        font-family: var(--font-family-primary);
        transition: background-color .3s;
        margin-top: 8px;
    }

    .btn-form-submit:hover {
        background-color: #a00d24;
    }

    .iletisim-bilgi h3 {
        font-size: 22px;
        font-weight: 600;
        color: var(--color-primary-dark);
        margin-bottom: 10px;
    }

    .iletisim-bilgi p {
        font-size: 14px;
        color: var(--color-text-secondary);
        line-height: 1.65;
        margin-bottom: 20px;
    }

    .iletisim-bilgi .bilgi-item {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
        font-size: 14px;
        color: var(--color-primary-dark);
    }

    .iletisim-bilgi .bilgi-icon {
        width: 32px;
        height: 32px;
        background: #fce8eb;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .iletisim-bilgi .bilgi-icon svg {
        width: 14px;
        height: 14px;
        color: var(--color-primary);
    }

    .etiket-kirmizi {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--color-primary);
        margin-bottom: 10px;
    }

    .section-titleb {
        font-size: 36px;
        font-weight: 500;
        padding-bottom: 14px;
        font-family: var(--font-family-primary);
    }

    .section-lead {
        font-size: 15px;
        color: var(--color-text-secondary);
        max-width: 600px;
        line-height: 1.65;
    }

    /* ── Hero Bölümü ── */
    .hero-section {
        background-color: #ffffff;
        padding-top: 0;
    }

    .hero-section .hero-row {
        display: flex;
        align-items: stretch;
        min-height: 480px;
    }

    .hero-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .hero-left .hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--color-primary);
        margin-bottom: 16px;
    }

    .hero-left .hero-eyebrow::before {
        content: '';
        width: 20px;
        height: 2px;
        background: var(--color-primary);
    }

    .hero-left h1 {
        font-size: 50px;
        font-weight: 600;
        line-height: 1.1;
        color: var(--color-primary-dark);
        margin-bottom: 20px;
        font-family: var(--font-family-primary);
    }

    .hero-left h1 span {
        color: var(--color-primary);
    }

    .hero-left .hero-desc {
        font-size: 15px;
        color: var(--color-text-secondary);
        line-height: 1.7;
        max-width: 460px;
        margin-bottom: 28px;
    }

    .hero-buttons {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .hero-buttons .btn-hero-primary {
        background-color: var(--color-primary);
        color: white;
        padding: 13px 28px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: background-color .3s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .hero-buttons .btn-hero-primary:hover {
        background-color: #a00d24;
        color: white;
    }

    .hero-buttons .btn-hero-outline {
        border: 1px solid #ccc;
        color: var(--color-text-secondary);
        padding: 13px 28px;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        transition: all .3s;
    }

    .hero-buttons .btn-hero-outline:hover {
        border-color: var(--color-primary-dark);
        color: var(--color-primary-dark);
    }

    /* Hero Sağ Fotoğraf Grid */
    .hero-photo-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 4px;
        height: 100%;
        min-height: 400px;
    }

    .hero-photo-grid .photo-main {
        grid-row: 1 / span 2;
        overflow: hidden;
    }

    .hero-photo-grid .photo-top {
        overflow: hidden;
    }

    .hero-photo-grid .photo-bottom {
        overflow: hidden;
    }

    .hero-photo-grid img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .4s;
    }

    .hero-photo-grid .photo-main:hover img,
    .hero-photo-grid .photo-top:hover img,
    .hero-photo-grid .photo-bottom:hover img {
        transform: scale(1.04);
    }


    
    /* ── Intro Bölümü ── */
    .intro-grid {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 60px;
        padding: 40px 0;
    }

    .intro-text p {
        font-size: 15px;
        color: var(--color-text-secondary);
        line-height: 1.7;
        margin-bottom: 16px;
    }

    .intro-bullets {
        list-style: none;
        padding: 0;
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .intro-bullets li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 15px;
        color: var(--color-primary-dark);
        font-weight: 500;
    }

    .intro-bullets li::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--color-primary);
        margin-top: 8px;
        flex-shrink: 0;
    }

    .intro-right-stats {
        display: flex;
        flex-direction: column;
    }

    .intro-stat-box,
    .intro-cert-box {
        background: #ffffff;
        border: 1px solid #e0e0e0;
        padding: 24px 28px;
        margin-bottom: -1px; /* border collapse */
    }

    .intro-stat-n {
        font-size: 32px;
        font-weight: 700;
        color: var(--color-primary-dark);
        line-height: 1;
        font-family: var(--font-family-primary);
        display: flex;
        align-items: baseline;
        gap: 4px;
    }

    .intro-stat-n em {
        color: var(--color-primary);
        font-size: 24px;
        font-style: normal;
    }

    .intro-stat-l {
        font-size: 13px;
        color: var(--color-text-secondary);
        margin-top: 8px;
        font-weight: 500;
    }
    
    .intro-stat-l-alt {
        font-size: 14px;
        color: #888;
        line-height: 1.5;
        margin-top: 8px;
    }

    .intro-cert-title {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #999;
        margin-bottom: 12px;
    }

    .intro-cert-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .intro-cert-tag {
        border: 1px solid #e0e0e0;
        background: #ffffff;
        font-size: 11px;
        font-weight: 600;
        color: #666;
        padding: 6px 12px;
        white-space: nowrap;
        transition: border-color .3s;
    }

    .intro-cert-tag:hover {
        border-color: #bbb;
    }

    @media (max-width: 1280px) {
        .hero-section {
            padding-top: 72px;
        }

        .hero-left {
            padding-top: 24px;
        }
    }

    @media (max-width: 991px) {
        :root {
            --detail-container-gutter: 20px;
        }

        .industries {
            margin: 24px auto;
            padding: 24px 16px;
        }

        .hero-section + .custom-page-container,
        .custom-page-container + .container-fluid.ehizmet,
        .container-fluid.ehizmet + .container-fluid.ehizmet,
        .container-fluid.ehizmet + .iletisim-section,
        .iletisim-section + .container-fluid.ehizmet,
        .container-fluid.ehizmet + .industries,
        .industries + .container-fluid.ehizmet {
            margin-top: 40px;
        }

        .section-hizmetler {
            padding-bottom: 40px;
        }

        .section-entegrasyon {
            padding-top: 8px;
        }

        .intro-grid {
            grid-template-columns: 1fr;
            gap: 30px;
        }

        .hizmet-grid {
            grid-template-columns: 1fr;
        }

        .ind-grid {
            grid-template-columns: 1fr 1fr;
        }

        .hizmet-cta-bar {
            flex-direction: column;
            text-align: center;
        }

        .hero-photo-grid {
            display: grid;
            margin-top: 24px;
        }

        .hero-left h1 {
            font-size: 36px;
        }

        .iletisim-section {
            padding-bottom: 40px;
        }
    }

    @media (max-width: 767px) {
        .industries {
            padding: 20px 12px;
        }

        .ind-grid {
            grid-template-columns: 1fr;
        }
    }