/* TAPS Service Detail Typography + Accent Control V14.9 */

/*
    Sorun:
    - Hizmet detay başlıkları çok büyük, line-height çok dar ve harf aralığı fazla sıkıydı.
    - Özellikle Türkçe karakterli başlıklarda "Bakım", "Danışmanlık", "Periyodik" gibi kelimeler sıkışıyordu.
*/

.service-detail-panel {
    padding-top: clamp(28px, 3.6vw, 52px) !important;
    padding-bottom: clamp(28px, 3.6vw, 52px) !important;
}

.service-detail-head {
    gap: 14px !important;
}

.service-detail-panel h3 {
    font-size: clamp(32px, 3.15vw, 58px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.018em !important;
    word-spacing: .035em !important;
    max-width: 1120px !important;
    text-wrap: balance;
}

/* İki satırlı uzun başlıklar için daha ferah yapı */
.service-detail-panel h3 br {
    line-height: 1.08 !important;
}

.service-detail-summary {
    margin-top: 4px !important;
    max-width: 980px !important;
    font-size: clamp(15px, 1vw, 17px) !important;
    line-height: 1.68 !important;
    letter-spacing: .003em !important;
}

.service-detail-body {
    margin-top: 24px !important;
    max-width: 1040px !important;
    font-size: 15.5px !important;
    line-height: 1.78 !important;
}

.service-detail-kicker {
    margin-bottom: 4px !important;
    color: var(--service-detail-accent, var(--taps-color-primary, #00d6ff)) !important;
    border-color: color-mix(in srgb, var(--service-detail-accent, #00d6ff) 30%, rgba(255,255,255,.12)) !important;
    background: color-mix(in srgb, var(--service-detail-accent, #00d6ff) 10%, transparent) !important;
}

.service-detail-panel::after {
    background: radial-gradient(circle, color-mix(in srgb, var(--service-detail-accent, #00d6ff) 26%, transparent), transparent 62%) !important;
}

.service-detail-actions .detail-cta-primary {
    background: linear-gradient(135deg, var(--service-detail-accent, var(--taps-color-primary, #00d6ff)), var(--taps-color-accent, #f5b94b)) !important;
    box-shadow: 0 14px 32px color-mix(in srgb, var(--service-detail-accent, #00d6ff) 22%, transparent) !important;
}

.service-detail-actions .detail-cta-secondary {
    border-color: color-mix(in srgb, var(--service-detail-accent, #00d6ff) 26%, rgba(255,255,255,.14)) !important;
}

/* Dropdown içindeki içerik rozeti de hizmet vurgusuna yakın dursun */
.top-category-menu a[href^="#detail-"]::after {
    color: var(--taps-color-primary, #00d6ff) !important;
    background: color-mix(in srgb, var(--taps-color-primary, #00d6ff) 10%, transparent) !important;
}

/* Kartlar arasında daha dengeli boşluk */
.service-detail-stack {
    gap: clamp(20px, 2vw, 30px) !important;
}

/* Header sabit olduğu için hedefe scroll yaptığında başlık üstte ezilmesin */
.service-detail-panel {
    scroll-margin-top: 150px !important;
}

@media (max-width: 1280px) {
    .service-detail-panel h3 {
        font-size: clamp(30px, 4vw, 52px) !important;
        line-height: 1.10 !important;
    }
}

@media (max-width: 760px) {
    .service-detail-panel {
        padding: 24px !important;
        scroll-margin-top: 110px !important;
    }

    .service-detail-panel h3 {
        font-size: clamp(27px, 9vw, 40px) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.012em !important;
    }

    .service-detail-summary {
        font-size: 14.5px !important;
        line-height: 1.68 !important;
    }

    .service-detail-body {
        font-size: 14px !important;
        line-height: 1.72 !important;
    }
}