/* TAPS Unified Buttons + Service Detail Page V15 */

:root {
    --taps-btn-radius: 999px;
    --taps-btn-h: 48px;
    --taps-btn-px: 22px;
}

/* Tüm public butonları aynı aileye çek */
.taps-btn,
.btn,
.service-link,
.detail-cta-primary,
.detail-cta-secondary,
.lead-form .submit,
.service-detail-actions a,
.hero-buttons a,
.hero-buttons button,
.service-detail-hero-actions a,
.related-services a,
.top-category-menu a[href*="/hizmetler/"] {
    border-radius: var(--taps-btn-radius) !important;
    font-family: var(--taps-font-menu, system-ui) !important;
    font-size: 12.5px !important;
    font-weight: 950 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        filter .22s ease,
        background .22s ease !important;
}

.taps-btn,
.btn,
.service-link,
.detail-cta-primary,
.detail-cta-secondary,
.lead-form .submit,
.service-detail-actions a,
.hero-buttons a,
.hero-buttons button,
.service-detail-hero-actions a {
    min-height: var(--taps-btn-h) !important;
    padding: 0 var(--taps-btn-px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
}

.taps-btn-primary,
.btn.primary,
.service-link,
.detail-cta-primary,
.lead-form .submit,
.hero-buttons .primary {
    color: #06101d !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    background:
        linear-gradient(135deg, var(--service-accent, var(--taps-color-primary, #00d6ff)), var(--taps-color-accent, #f5b94b)) !important;
    box-shadow:
        0 14px 32px color-mix(in srgb, var(--service-accent, var(--taps-color-primary, #00d6ff)) 24%, transparent),
        0 0 0 1px rgba(255,255,255,.16) inset !important;
}

.taps-btn-secondary,
.btn.ghost,
.detail-cta-secondary,
.hero-buttons .ghost {
    color: #ffffff !important;
    border: 1px solid color-mix(in srgb, var(--service-accent, var(--taps-color-primary, #00d6ff)) 28%, rgba(255,255,255,.16)) !important;
    background: rgba(255,255,255,.045) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.04) inset,
        0 12px 28px rgba(0,0,0,.14) !important;
}

.taps-btn:hover,
.btn:hover,
.service-link:hover,
.detail-cta-primary:hover,
.detail-cta-secondary:hover,
.lead-form .submit:hover,
.service-detail-actions a:hover,
.hero-buttons a:hover,
.hero-buttons button:hover,
.service-detail-hero-actions a:hover {
    transform: translateY(-3px) !important;
    filter: brightness(1.06) saturate(1.04) !important;
}

.taps-btn-primary:hover,
.btn.primary:hover,
.service-link:hover,
.detail-cta-primary:hover,
.lead-form .submit:hover {
    box-shadow:
        0 20px 44px color-mix(in srgb, var(--service-accent, var(--taps-color-primary, #00d6ff)) 32%, transparent),
        0 0 0 1px rgba(255,255,255,.18) inset !important;
}

/* Detail page */
.detail-shell {
    min-height: 100vh;
}

.service-detail-page {
    position: relative;
    min-height: 100vh;
    padding-left: var(--rail-w, 88px);
    background:
        radial-gradient(circle at 72% 16%, color-mix(in srgb, var(--service-accent, #00d6ff) 18%, transparent), transparent 30%),
        linear-gradient(135deg, #050c18, #081829 48%, #030814);
    color: #ffffff;
}

.service-detail-hero {
    position: relative;
    overflow: hidden;
    min-height: clamp(480px, 58vh, 720px);
    padding: calc(var(--nav-h, 96px) + 56px) clamp(28px, 7vw, 120px) clamp(48px, 6vw, 90px);
    border-bottom: 1px solid rgba(0,214,255,.16);
    isolation: isolate;
}

.service-detail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        linear-gradient(90deg, rgba(2,8,23,.86), rgba(2,8,23,.50), rgba(2,8,23,.80)),
        var(--service-bg-image),
        linear-gradient(135deg, #06101f 0%, #0f2236 50%, #020617 100%);
    background-size: cover, cover, auto;
    background-position: center, center, center;
    opacity: .98;
}

.service-detail-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(130deg, rgba(255,255,255,0) 0 42%, rgba(255,255,255,.24) 42.2% 43.4%, rgba(255,255,255,0) 43.6%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.065) 0 1px, transparent 1px 74px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 62px);
    opacity: .42;
    mix-blend-mode: screen;
    pointer-events: none;
}

.service-detail-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    margin-bottom: 36px;
    color: rgba(255,255,255,.58);
    font-family: var(--taps-font-menu, system-ui);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.service-detail-breadcrumb a {
    color: rgba(255,255,255,.76);
    text-decoration: none;
}

.service-detail-breadcrumb b {
    color: var(--service-accent, #00d6ff);
}

.service-detail-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: clamp(28px, 6vw, 90px);
    align-items: center;
}

.service-detail-hero-copy {
    max-width: 980px;
}

.service-detail-kicker {
    width: max-content;
    max-width: 100%;
    margin-bottom: 16px;
    padding: 8px 13px;
    border-radius: 999px;
    color: var(--service-accent, #00d6ff);
    background: color-mix(in srgb, var(--service-accent, #00d6ff) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--service-accent, #00d6ff) 26%, rgba(255,255,255,.12));
    font-family: var(--taps-font-menu, system-ui);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.service-detail-hero h1 {
    margin: 0;
    max-width: 980px;
    color: #ffffff;
    font-family: var(--taps-font-heading, system-ui);
    font-size: clamp(42px, 5.2vw, 92px);
    font-weight: 950;
    line-height: 1.02;
    letter-spacing: -0.025em;
    text-wrap: balance;
    text-shadow: 0 22px 54px rgba(0,0,0,.42);
}

.service-detail-hero p {
    margin: 20px 0 0;
    max-width: 820px;
    color: rgba(255,255,255,.78);
    font-size: clamp(16px, 1.2vw, 20px);
    font-weight: 750;
    line-height: 1.65;
}

.service-detail-hero-actions {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.service-detail-hero-card {
    position: relative;
    overflow: hidden;
    min-height: 230px;
    padding: 28px;
    border-radius: 30px;
    border: 1px solid color-mix(in srgb, var(--service-accent, #00d6ff) 24%, rgba(255,255,255,.12));
    background:
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
        radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--service-accent, #00d6ff) 20%, transparent), transparent 42%);
    box-shadow:
        0 28px 70px rgba(0,0,0,.30),
        0 0 0 1px rgba(255,255,255,.04) inset,
        0 0 42px color-mix(in srgb, var(--service-accent, #00d6ff) 16%, transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.service-detail-hero-card span {
    color: var(--service-accent, #00d6ff);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.service-detail-hero-card strong {
    margin-top: 10px;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 950;
    line-height: 1;
}

.service-detail-hero-card em {
    margin-top: 12px;
    color: rgba(255,255,255,.62);
    font-style: normal;
    font-weight: 800;
}

.service-detail-content-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    gap: clamp(22px, 3vw, 42px);
    padding: clamp(34px, 5vw, 82px) clamp(24px, 6vw, 110px);
}

.service-detail-main-card,
.service-detail-form-card {
    border-radius: 30px;
    border: 1px solid color-mix(in srgb, var(--service-accent, #00d6ff) 17%, rgba(255,255,255,.10));
    background:
        linear-gradient(135deg, rgba(7,16,28,.86), rgba(7,16,28,.58)),
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--service-accent, #00d6ff) 10%, transparent), transparent 34%);
    box-shadow:
        0 20px 54px rgba(0,0,0,.24),
        0 0 0 1px rgba(255,255,255,.04) inset;
}

.service-detail-main-card {
    padding: clamp(26px, 3vw, 46px);
}

.service-detail-section-title span,
.form-card-head span {
    display: inline-flex;
    margin-bottom: 10px;
    color: var(--service-accent, #00d6ff);
    font-family: var(--taps-font-menu, system-ui);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.service-detail-section-title h2,
.form-card-head h2 {
    margin: 0;
    color: #ffffff;
    font-family: var(--taps-font-heading, system-ui);
    font-size: clamp(30px, 3vw, 54px);
    font-weight: 950;
    line-height: 1.08;
    letter-spacing: -0.018em;
    text-wrap: balance;
}

.service-detail-rich {
    margin-top: 24px;
    color: rgba(255,255,255,.76);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.78;
}

.service-detail-rich p,
.service-detail-rich ul,
.service-detail-rich ol {
    margin-top: 0;
    margin-bottom: 16px;
}

.service-detail-rich ul,
.service-detail-rich ol {
    padding-left: 22px;
}

.service-detail-rich li {
    margin-bottom: 9px;
}

.service-detail-rich strong,
.service-detail-rich b {
    color: #ffffff;
}

.service-detail-form-card {
    position: sticky;
    top: calc(var(--nav-h, 96px) + 24px);
    align-self: start;
    padding: clamp(22px, 2.4vw, 34px);
}

.form-card-head p {
    margin: 12px 0 0;
    color: rgba(255,255,255,.68);
    font-weight: 700;
    line-height: 1.55;
}

.service-lead-form {
    margin-top: 24px;
    display: grid;
    gap: 14px;
}

.service-lead-form label {
    display: grid;
    gap: 8px;
    color: rgba(255,255,255,.72);
    font-weight: 850;
    font-size: 13px;
}

.service-lead-form input,
.service-lead-form textarea {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    color: #ffffff;
    padding: 13px 14px;
    outline: none;
    font: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.service-lead-form input:focus,
.service-lead-form textarea:focus {
    border-color: color-mix(in srgb, var(--service-accent, #00d6ff) 46%, rgba(255,255,255,.16));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--service-accent, #00d6ff) 13%, transparent);
    background: rgba(255,255,255,.075);
}

.service-contact-mini {
    margin-top: 20px;
    display: grid;
    gap: 10px;
}

.service-contact-mini a {
    color: rgba(255,255,255,.72);
    text-decoration: none;
    font-weight: 850;
}

.related-services {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.related-services h3 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 950;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.related-grid a {
    display: grid;
    gap: 6px;
    min-height: 96px;
    padding: 17px;
    border-radius: 20px;
    color: #ffffff;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.045);
}

.related-grid a:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--service-accent, #00d6ff) 28%, rgba(255,255,255,.12));
}

.related-grid a span {
    color: var(--service-accent, #00d6ff);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.related-grid a strong {
    font-size: 15px;
    line-height: 1.25;
}

/* Linkleri detay sayfasına çevrilen menüde küçük ibare */
.top-category-menu a[href*="/hizmetler/"]::after {
    content: "Detay";
    align-self: flex-start;
    margin-top: 2px;
    padding: 3px 7px;
    border-radius: 999px;
    color: var(--taps-color-primary, #00d6ff);
    background: color-mix(in srgb, var(--taps-color-primary, #00d6ff) 10%, transparent);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Light mode */
html[data-theme="light"] .service-detail-page {
    color: #07111f;
    background:
        radial-gradient(circle at 72% 16%, color-mix(in srgb, var(--service-accent, #00d6ff) 13%, transparent), transparent 30%),
        linear-gradient(135deg, #f5f8fb, #eaf1f8 48%, #ffffff);
}

html[data-theme="light"] .service-detail-hero::before {
    background:
        linear-gradient(90deg, rgba(7,17,31,.62), rgba(7,17,31,.30), rgba(7,17,31,.60)),
        var(--service-bg-image),
        linear-gradient(135deg, #f8fbff 0%, #dbeafe 50%, #ffffff 100%);
}

html[data-theme="light"] .service-detail-main-card,
html[data-theme="light"] .service-detail-form-card {
    background:
        linear-gradient(135deg, rgba(255,255,255,.86), rgba(245,248,251,.72)),
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--service-accent, #00d6ff) 10%, transparent), transparent 34%);
    border-color: color-mix(in srgb, var(--service-accent, #00d6ff) 18%, rgba(7,17,31,.08));
    box-shadow: 0 20px 54px rgba(8,20,36,.12), 0 0 0 1px rgba(255,255,255,.60) inset;
}

html[data-theme="light"] .service-detail-section-title h2,
html[data-theme="light"] .form-card-head h2,
html[data-theme="light"] .related-services h3 {
    color: #07111f;
}

html[data-theme="light"] .service-detail-rich,
html[data-theme="light"] .form-card-head p {
    color: #27364a;
}

html[data-theme="light"] .service-lead-form label {
    color: #27364a;
}

html[data-theme="light"] .service-lead-form input,
html[data-theme="light"] .service-lead-form textarea {
    color: #07111f;
    background: rgba(7,17,31,.035);
    border-color: rgba(7,17,31,.10);
}

html[data-theme="light"] .service-contact-mini a {
    color: #27364a;
}

html[data-theme="light"] .related-grid a {
    color: #07111f;
    background: rgba(7,17,31,.035);
    border-color: rgba(7,17,31,.08);
}

@media (max-width: 1180px) {
    .service-detail-hero-grid,
    .service-detail-content-wrap {
        grid-template-columns: 1fr;
    }

    .service-detail-form-card {
        position: relative;
        top: auto;
    }
}

@media (max-width: 760px) {
    .service-detail-page {
        padding-left: 0;
    }

    .service-detail-hero {
        padding: calc(var(--nav-h, 76px) + 28px) 18px 38px;
    }

    .service-detail-hero h1 {
        font-size: clamp(34px, 12vw, 54px);
        line-height: 1.05;
    }

    .service-detail-content-wrap {
        padding: 24px 16px 48px;
    }

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