/* ═══════════════════════════════════════════════════
   HİZMETLERİMİZ HERO (Figma: 1440×391, #120522)
═══════════════════════════════════════════════════ */
.services-hero {
    position: relative;
    width: 100%;
    height: 391px;
    background: #120522;
}
.services-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 35% 35%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
}

/* Layout'taki hamburger bu sayfada da aynı yerde görünecek */
/* Nav scrolled durumunu bu sayfada devre dışı bırak */
.nav.scrolled {
    background: none !important;
    backdrop-filter: none !important;
}

/* ── Instagram link — hamburger hizası ── */
.services-instagram {
    position: absolute;
    top: 281px;
    right: 123px;
    z-index: 20;
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.04em;
    color: rgba(217,217,217,0.7);
    text-decoration: none;
    transition: color 0.2s;
}
.services-instagram:hover { color: #D9D9D9; }

/* ═══════════════════════════════════════════════════
   HİZMETLERİMİZ BAŞLIK (Rubik 600 48px #C41027)
═══════════════════════════════════════════════════ */
.services-title-section {
    background: #fff;
    padding: 64px 0 48px;
}
.services-title-wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
@media (min-width: 1025px) {
    /* Figma: title Left 123px, Vector Left 83px → padding 83px, gap 38px */
    .services-title-wrap { padding: 0 83px; gap: 38px; }
    /* Figma Vector 40: Height 165px, Border 2px → width 2px */
    .services-title-line { height: 165px; width: 2px; }
}
.services-title-line {
    width: 2px;
    height: 165px;
    background: #C41027;
    flex-shrink: 0;
    border-radius: 1px;
    margin-top: 4px;
}
.services-title-wrap h1 {
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 48px;
    font-weight: 600;
    color: #C41027;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════
   SERVICE BLOCK
═══════════════════════════════════════════════════ */
.service-block {
    background: #fff;
}
.service-block-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px;
}
@media (min-width: 1025px) {
    .service-block-inner {
        padding: 20px 123px 100px;
    }
}

/* Image — ortada, max 780px */
.service-block-image {
    padding-top: 16px;
    max-width: 780px;
    margin: 0 auto;
}
.service-block-image-wrap {
    position: relative;
    width: 100%;
    /* Figma desktop: 780×332px */
    aspect-ratio: 780 / 332;
    overflow: hidden;
    background: #0a0a0a;
}
.service-block-image-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.service-block-no-img {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1030, #0e0c22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.08);
    font-size: 56px;
}

/* Text grid — ortada, max 780px */
.service-block-text {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px 0 64px;
    max-width: 780px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .service-block-text {
        grid-template-columns: 1fr 1fr;
        gap: 70px;
    }
}
@media (min-width: 1025px) {
    /* Figma: resimden her iki yana biraz taşıyor, ortalı */
    .service-block-text {
        max-width: 920px;
        border: none;
        padding: 40px 0 64px;
        margin: 0 auto;
        gap: 120px;
    }
    /* Figma: title Rubik 500, 24px, 100%, 0% */
    .service-block-title {
        font-size: 24px;
        font-weight: 500;
        line-height: 1.0;
        letter-spacing: 0;
        margin-bottom: 16px;
    }
    /* Figma: desc Rubik 400, 20px, 119%, 4% */
    .service-block-desc {
        font-size: 20px;
        font-weight: 400;
        line-height: 1.19;
        letter-spacing: 0.04em;
    }
    /* Figma: sağ kolon daha sağa */
    .service-block-right {
        padding-left: 60px;
    }
    /* Figma: "Hizmet Kapsamı:" Rubik 500, 20px, 119%, 4% */
    .service-block-right h4 {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.19;
        letter-spacing: 0.04em;
        margin-bottom: 14px;
    }
    /* Figma: bullet items Rubik 400, 20px, 119%, 4% */
    .service-block-bullets li {
        font-size: 20px;
        font-weight: 400;
        line-height: 1.19;
        letter-spacing: 0.04em;
        margin-bottom: 8px;
    }
}

/* Left column */
.service-block-left {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.service-block-line {
    margin-top: 4px;
    width: 2px;
    height: 60px;
    align-self: flex-start;
    background: #C41027;
    flex-shrink: 0;
    border-radius: 1px;
}
.service-block-title {
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #C41027;
    margin-bottom: 14px;
}
.service-block-desc {
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.55;
    color: #442D84;
}

/* Right column */
.service-block-right h4 {
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #442D84;
    margin-bottom: 12px;
}
.service-block-bullets {
    list-style: none;
    padding: 0;
}
.service-block-bullets li {
    font-family: 'Rubik', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.55;
    color: #442D84;
    margin-bottom: 6px;
}
.service-block-bullets li::before {
    content: '•';
    margin-right: 8px;
}

/* Empty state */
.services-empty {
    text-align: center;
    padding: 80px 24px;
    color: #999;
    font-size: 16px;
    background: #fff;
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
    .services-instagram { right: 48px; top: 180px; }
}
@media (max-width: 768px) {
    /* Hero */
    .services-hero { height: 210px; }
    .services-instagram { right: 25px; bottom: 34px; font-size: 12px; }

    /* Başlık — Figma: Rubik 600, 24px, letter-spacing 4%, NOT uppercase */
    /* Figma: Top 266px (hero 210 + padding 56), group height 87px, gap to image 13px */
    .services-title-section { padding: 56px 0 13px; }
    .services-title-wrap { padding: 0 26px; gap: 12px; }
    .services-title-wrap h1 {
        font-size: 24px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.04em;
        text-transform: none;
    }
    /* Figma Vector 65: Height 99.5px, Border 2px, Left 26px */
    .services-title-line { height: 100px; width: 2px; margin-top: 0; }

    /* Servis blokları */
    .service-block-inner { padding: 0 26px; }

    /* Figma: resim 244×124, ortalı */
    .service-block-image { padding-top: 0; max-width: 244px; margin: 0 auto; }

    /* Resim oranı — Figma: 244×124 */
    .service-block-image-wrap { aspect-ratio: 244 / 124; }

    /* Metin grid: tek sütun
       Figma: image→title 30px, bullets→next-image 24px, desc→hizmetkapsamı 14px */
    .service-block-text {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 30px 0 24px;
    }

    /* Sol: başlık + açıklama ortalı, sol kırmızı çizgi gizli */
    .service-block-left {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .service-block-line { display: none; }

    /* Figma: title top 520, height 23px → margin-bottom = desc top(569) - title bottom(543) = 26px */
    .service-block-title {
        font-size: 15px;
        font-weight: 400;
        line-height: 17px;
        text-align: center;
        color: #C41027;
        letter-spacing: 0.04em;
        margin: 0 auto 26px;
        border-bottom: 2px solid #C41027;
        padding-bottom: 6px;
        width: fit-content;
    }

    /* Figma: Rubik 300, 13px, line-height 17px, letter-spacing 4%, center, #4C358C
       margin: 0 → browser default paragraph margin kaldırıldı */
    .service-block-desc {
        margin: 0;
        text-align: center;
        font-size: 13px;
        font-weight: 300;
        line-height: 17px;
        letter-spacing: 0.04em;
        color: #4C358C;
    }

    /* Figma: "Hizmet Kapsamı:" Rubik 400, 13px, line-height 17px, letter-spacing 4%
       margin-top: 0 → browser default h4 margin kaldırıldı */
    .service-block-right h4 {
        margin: 0 0 8px;
        font-size: 13px;
        font-weight: 400;
        line-height: 17px;
        letter-spacing: 0.04em;
        color: #4C358C;
    }

    /* Figma: bullet items Rubik 300 (Light), 13px, line-height 17px, letter-spacing 4% */
    .service-block-bullets li {
        font-size: 13px;
        font-weight: 300;
        line-height: 17px;
        letter-spacing: 0.04em;
        color: #4C358C;
        margin-bottom: 4px;
    }
}