/* TAPS Hizmetlerimiz + Dinamik Banner V14.4 */

.hero.has-dynamic-banner {
    --taps-banner-image: none;
    --taps-banner-overlay: .55;
    --taps-banner-accent: var(--taps-color-primary, #00d6ff);
    --taps-banner-accent-2: var(--taps-color-secondary, #2b6cff);
}

.hero-home.has-dynamic-banner::before {
    background:
        linear-gradient(90deg, rgba(2, 8, 23, var(--taps-banner-overlay)), rgba(2, 8, 23, .38), rgba(2, 8, 23, .68)),
        radial-gradient(circle at 72% 30%, color-mix(in srgb, var(--taps-banner-accent) 36%, transparent), transparent 24%),
        var(--taps-banner-image),
        linear-gradient(135deg, #06101f 0%, #0f2236 48%, #64748b 100%) !important;
    background-size: cover, auto, cover, auto !important;
    background-position: center, center, center, center !important;
    z-index: 1;
}

.hero-home.has-dynamic-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(130deg, rgba(255,255,255,0) 0 42%, rgba(255,255,255,.26) 42.2% 43.4%, rgba(255,255,255,0) 43.6%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 58px);
    opacity: .56;
    mix-blend-mode: screen;
}

.hero-home.has-dynamic-banner .intro-copy,
.hero-home.has-dynamic-banner .home-panels {
    z-index: 5;
}

.hero-detail.has-dynamic-banner .scene {
    background:
        linear-gradient(90deg, rgba(2, 8, 23, var(--taps-banner-overlay)), rgba(2, 8, 23, .34), rgba(2, 8, 23, .70)),
        radial-gradient(circle at 68% 22%, color-mix(in srgb, var(--taps-banner-accent) 36%, transparent), transparent 26%),
        var(--taps-banner-image),
        linear-gradient(130deg, #06101f 0%, #0f2236 38%, #cbd5e1 38.3%, #64748b 62%, #081120 100%) !important;
    background-size: cover, auto, cover, auto !important;
    background-position: center, center, center, center !important;
}

.hero-detail[data-panel="smart"].has-dynamic-banner .scene {
    background:
        linear-gradient(90deg, rgba(2, 8, 23, var(--taps-banner-overlay)), rgba(2, 8, 23, .34), rgba(2, 8, 23, .70)),
        radial-gradient(circle at 68% 22%, color-mix(in srgb, var(--taps-banner-accent) 38%, transparent), transparent 26%),
        var(--taps-banner-image),
        linear-gradient(130deg, #020617 0%, #082338 45%, #006c83 72%, #020617 100%) !important;
    background-size: cover, auto, cover, auto !important;
    background-position: center, center, center, center !important;
}

.hero-detail.has-dynamic-banner .scene::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(130deg, rgba(255,255,255,0) 0 42%, rgba(255,255,255,.28) 42.2% 43.4%, rgba(255,255,255,0) 43.6%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 58px);
    opacity: .46;
    mix-blend-mode: screen;
}

.hero-detail.has-dynamic-banner .scene::after {
    border-left-color: var(--taps-banner-accent) !important;
    box-shadow:
        0 0 72px color-mix(in srgb, var(--taps-banner-accent) 32%, transparent),
        inset 0 0 46px color-mix(in srgb, var(--taps-banner-accent-2) 18%, transparent) !important;
}

.hero-detail.has-dynamic-banner .detail-copy .kicker,
.hero-home.has-dynamic-banner .intro-copy .kicker {
    color: var(--taps-banner-accent) !important;
    text-shadow: 0 0 18px color-mix(in srgb, var(--taps-banner-accent) 40%, transparent);
}

.hero-detail.has-dynamic-banner .detail-copy h1,
.hero-home.has-dynamic-banner .intro-copy h1 {
    text-shadow:
        0 18px 42px rgba(0,0,0,.46),
        0 0 36px color-mix(in srgb, var(--taps-banner-accent) 16%, transparent);
}

.home-card.has-dynamic-banner::before,
.split-card.has-dynamic-banner {
    background:
        linear-gradient(90deg, rgba(2, 8, 23, .68), rgba(2, 8, 23, .28)),
        var(--taps-card-image),
        linear-gradient(135deg, #06101f 0%, #0f2236 48%, #64748b 100%) !important;
    background-size: cover, cover, auto !important;
    background-position: center, center, center !important;
}

.home-card.has-dynamic-banner.smart::before,
.split-card.has-dynamic-banner.smart {
    background:
        linear-gradient(90deg, rgba(2, 8, 23, .68), rgba(2, 8, 23, .24)),
        var(--taps-card-image),
        linear-gradient(135deg, #020617 0%, #082338 48%, #007f91 100%) !important;
    background-size: cover, cover, auto !important;
    background-position: center, center, center !important;
}

.home-card.has-dynamic-banner .card-tags {
    border-color: color-mix(in srgb, var(--taps-card-accent, #00d6ff) 48%, rgba(255,255,255,.34));
    box-shadow: 0 0 22px color-mix(in srgb, var(--taps-card-accent, #00d6ff) 20%, transparent);
}

.service-card[data-type="banner"] {
    display: none !important;
}

@media(max-width:760px) {
    .hero-home.has-dynamic-banner::after {
        opacity: .28;
    }

    .hero-detail.has-dynamic-banner .scene::before {
        opacity: .25;
    }
}