/**
 * Hizmet detay landing — unified theme background (SERVICE.DETAIL.BACKGROUND.UNIFY.1)
 * Yeni class yapısı: .sv-lp*
 */

.sv-lp {
    --sv-accent: var(--theme-primary, #2563eb);
    --sv-accent-soft: color-mix(in srgb, var(--theme-primary, #2563eb) 14%, transparent);
    --sv-ink: var(--theme-text, #0f172a);
    --sv-muted: var(--theme-text-muted, #64748b);
    --sv-line: color-mix(in srgb, var(--theme-border, #dbe5e8) 100%, transparent);
    --sv-card-bg: var(--theme-card-bg, #ffffff);
    --sv-card-border: var(--theme-card-border, var(--theme-border, #e2e8f0));
    --sv-card-radius: var(--theme-card-radius, calc(var(--theme-radius, 8px) + 4px));
    position: relative;
    overflow-x: clip;
    color: var(--sv-ink);
    background: var(--theme-bg, #f5f8f8);
}

.sv-lp>section,
.sv-lp-story,
.sv-lp-gains,
.sv-lp-flow,
.sv-lp-tech,
.sv-lp-works,
.sv-lp-more {
    background: transparent;
}

.sv-lp-wrap {
    width: var(--layout-container-wide);
    margin-inline: auto;
}

.sv-lp-eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sv-muted);
}

.sv-lp-eyebrow--light {
    color: var(--theme-text-muted, var(--sv-muted));
}

.sv-lp-heading {
    margin: 0;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    font-weight: var(--theme-heading-weight, 300);
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.sv-lp-heading--light {
    color: var(--theme-text, var(--sv-ink));
}

/* ── Hero (light / unified) ── */
.sv-lp-hero {
    position: relative;
    padding: var(--ds-stack) 0 var(--ds-section-y-md);
    color: var(--theme-text, var(--sv-ink));
    background: transparent;
}

.sv-lp-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.sv-lp-hero__mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 15% 20%, color-mix(in srgb, var(--theme-primary, #2563eb) 7%, transparent), transparent 58%),
        radial-gradient(ellipse 50% 45% at 88% 75%, color-mix(in srgb, var(--theme-accent, #7c3aed) 5%, transparent), transparent 55%);
}

.sv-lp-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--theme-border, #dbe5e8) 45%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--theme-border, #dbe5e8) 45%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, #000 15%, transparent 78%);
    opacity: 0.35;
}

.sv-lp-hero__pointer {
    --sv-pointer-x: 50%;
    --sv-pointer-y: 40%;
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 420px at var(--sv-pointer-x) var(--sv-pointer-y),
            color-mix(in srgb, var(--theme-primary, #2563eb) 8%, transparent),
            transparent 62%);
    transition: background 0.35s ease;
    opacity: 0.65;
}

.sv-lp-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

.sv-lp-hero__glow--a {
    top: -5%;
    right: 8%;
    width: min(38vw, 340px);
    height: min(38vw, 340px);
    background: var(--theme-overlay-soft, color-mix(in srgb, var(--theme-text, #0f172a) 8%, transparent));
    opacity: 0.55;
}

.sv-lp-hero__glow--b {
    bottom: -15%;
    left: -5%;
    width: min(32vw, 280px);
    height: min(32vw, 280px);
    background: color-mix(in srgb, var(--theme-accent, #7c3aed) 8%, transparent);
    opacity: 0.45;
}

.sv-lp-hero__layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}

.sv-lp-hero__crumb .page-breadcrumb {
    margin: 0;
}

.sv-lp-hero__crumb .page-breadcrumb__list {
    font-size: 0.73rem;
    color: var(--theme-text-muted, var(--sv-muted));
}

.sv-lp-hero__crumb .page-breadcrumb__link {
    color: var(--theme-text-muted, var(--sv-muted));
}

.sv-lp-hero__crumb .page-breadcrumb__link:hover {
    color: var(--theme-text, var(--sv-ink));
}

.sv-lp-hero__crumb .page-breadcrumb__current {
    color: var(--theme-text, var(--sv-ink));
}

.sv-lp-hero__crumb .page-breadcrumb__item:not(:last-child)::after {
    color: var(--theme-text-soft, color-mix(in srgb, var(--theme-text-muted, #64748b) 70%, transparent));
}

.sv-lp-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 1rem 0 0;
    padding: 0.38rem 0.75rem 0.38rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--sv-card-border);
    background: color-mix(in srgb, var(--theme-primary, #2563eb) 5%, var(--sv-card-bg));
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--theme-text-muted, var(--sv-muted));
}

.sv-lp-hero__tag-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    background: var(--sv-accent-soft);
    color: var(--sv-accent);
    font-size: 0.68rem;
}

.sv-lp-hero__title {
    margin: 0.9rem 0 0;
    max-width: 11ch;
    font-size: clamp(2.6rem, 6.5vw, 4.5rem);
    font-weight: var(--theme-heading-weight, 300);
    line-height: 0.95;
    letter-spacing: -0.05em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.sv-lp-hero__lead {
    margin: 1.15rem 0 0;
    max-width: 44ch;
    font-size: clamp(1.02rem, 1.55vw, 1.18rem);
    line-height: 1.72;
    color: var(--theme-text-muted, var(--sv-muted));
}

.sv-lp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.65rem;
}

.sv-lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--theme-button-height, 3rem);
    padding: 0.75rem var(--theme-button-padding-x, 1.55rem);
    border-radius: var(--theme-button-radius, 8px);
    font-size: 0.92rem;
    font-weight: var(--theme-button-font-weight, 600);
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.sv-lp-btn:hover,
.sv-lp-btn:focus-visible {
    transform: translateY(-2px);
}

.sv-lp-btn--fill {
    color: var(--theme-button-color, #fff);
    background: var(--theme-button-bg, var(--theme-primary, #2563eb));
    border-color: var(--theme-button-border, transparent);
    box-shadow: var(--theme-button-shadow, 0 18px 40px -18px color-mix(in srgb, var(--theme-primary, #2563eb) 65%, transparent));
}

.sv-lp-btn--line {
    color: var(--theme-primary, #2563eb);
    background: var(--sv-card-bg);
    border-color: color-mix(in srgb, var(--theme-primary, #2563eb) 28%, var(--sv-card-border));
}

.sv-lp-btn--line:hover,
.sv-lp-btn--line:focus-visible {
    border-color: color-mix(in srgb, var(--theme-primary, #2563eb) 45%, var(--sv-card-border));
    background: color-mix(in srgb, var(--theme-primary, #2563eb) 6%, var(--sv-card-bg));
}

/* Hero device mockup */
.sv-lp-hero__stage {
    --sv-parallax-y: 0px;
    position: relative;
    min-height: clamp(300px, 36vw, 440px);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate3d(0, var(--sv-parallax-y), 0);
    will-change: transform;
}

.sv-lp-hero__device {
    position: relative;
    width: min(100%, 520px);
    transform: perspective(1200px) rotateY(-6deg) rotateX(4deg);
    transition: transform 0.4s ease;
}

.sv-lp-hero__device:hover {
    transform: perspective(1200px) rotateY(-2deg) rotateX(2deg);
}

.sv-lp-hero__device-chrome {
    display: flex;
    gap: 0.35rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--sv-card-radius) var(--sv-card-radius) 0 0;
    background: color-mix(in srgb, var(--theme-text, #0f172a) 6%, var(--sv-card-bg));
    border: 1px solid var(--sv-card-border);
    border-bottom: none;
}

.sv-lp-hero__device-chrome span {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--theme-text-muted, #64748b) 35%, transparent);
}

.sv-lp-hero__device-screen {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 10;
    width: 100%;
    border: 1px solid var(--sv-card-border);
    border-top: none;
    border-radius: 0 0 var(--theme-radius, 8px) var(--theme-radius, 8px);
    overflow: hidden;
    isolation: isolate;
    /* cover ile görsel tüm alanı dolduruyor — beyaz arkaplan gizli kalır */
    background: var(--theme-card-bg, #f1f5f9);
    box-shadow:
        var(--theme-card-shadow, 0 28px 56px -28px color-mix(in srgb, var(--theme-text, #0f172a) 22%, transparent)),
        inset 0 0 0 1px color-mix(in srgb, var(--theme-border, #dbe5e8) 25%, transparent);
}

.sv-lp-hero__device-fx {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.sv-lp-hero__device-mesh {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 70% at 30% 20%, rgba(91, 140, 255, 0.18), transparent 58%);
    opacity: 0.7;
}

.sv-lp-hero__device-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.35;
}

.sv-lp-hero__device-noise {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sv-lp-hero__device-light {
    position: absolute;
    inset: -10% -5% auto;
    height: 45%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent);
}

.sv-lp-hero__device-screen img {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    /* cover + üstten %15 offset: tarayıcı hissi, beyaz header boşluğu gizlenir */
    object-fit: cover;
    object-position: center 15%;
}

.sv-lp-hero__device-base {
    display: block;
    width: 72%;
    height: 0.55rem;
    margin: 0 auto;
    border-radius: 0 0 var(--sv-card-radius) var(--sv-card-radius);
    background: color-mix(in srgb, var(--theme-text-muted, #64748b) 12%, var(--sv-card-bg));
    border: 1px solid var(--sv-card-border);
    border-top: none;
}

.sv-lp-hero__device-glow {
    position: absolute;
    inset: 20% -10% -20%;
    background: radial-gradient(ellipse at center, var(--theme-overlay-soft, color-mix(in srgb, var(--theme-text, #0f172a) 8%, transparent)), transparent 68%);
    pointer-events: none;
    z-index: -1;
    opacity: 0.7;
}

/* Hero abstract placeholder */
.sv-lp-hero__abstract {
    position: relative;
    width: min(100%, 480px);
    aspect-ratio: 4 / 3;
    border-radius: var(--sv-card-radius);
    border: 1px solid var(--sv-card-border);
    background:
        radial-gradient(ellipse 80% 70% at 50% 40%, color-mix(in srgb, var(--theme-primary, #2563eb) 8%, transparent), transparent 65%),
        var(--sv-card-bg);
    overflow: hidden;
    box-shadow: var(--theme-card-shadow, 0 16px 48px color-mix(in srgb, var(--theme-text, #0f172a) 8%, transparent));
}

.sv-lp-hero__abstract-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--theme-border, #dbe5e8) 55%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--theme-border, #dbe5e8) 55%, transparent) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.45;
}

.sv-lp-hero__abstract-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 55%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--theme-border, #dbe5e8) 55%, transparent);
    box-shadow: none;
}

.sv-lp-hero__abstract-mono {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(4rem, 12vw, 7rem);
    font-weight: 700;
    letter-spacing: -0.06em;
    color: color-mix(in srgb, var(--theme-text, #0f172a) 5%, transparent);
    user-select: none;
}

.sv-lp-hero__abstract-icon {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: var(--sv-card-radius);
    background: color-mix(in srgb, var(--theme-primary, #2563eb) 8%, var(--sv-card-bg));
    border: 1px solid var(--sv-card-border);
    color: var(--sv-accent);
    font-size: 1.15rem;
    box-shadow: var(--theme-card-shadow, 0 16px 48px color-mix(in srgb, var(--theme-text, #0f172a) 8%, transparent));
}

.sv-lp-hero__abstract-chip {
    position: absolute;
    left: 1.25rem;
    bottom: 1.25rem;
    max-width: calc(100% - 2.5rem);
    padding: 0.5rem 0.85rem;
    border-radius: var(--theme-radius, 8px);
    background: color-mix(in srgb, var(--sv-card-bg) 92%, var(--theme-bg, #f5f8f8));
    border: 1px solid var(--sv-card-border);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--theme-text, var(--sv-ink));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Story / value ── */
.sv-lp-story {
    padding-block: var(--ds-section-y-md);
    background: transparent;
}

.sv-lp-story__panel {
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sv-lp-story__prose {
    margin-top: 1.15rem;
    max-width: 68ch;
    font-size: clamp(1.02rem, 1.4vw, 1.12rem);
    line-height: 1.82;
    color: var(--sv-ink);
}

.sv-lp-story__prose :where(h2, h3, h4) {
    margin-top: 1.6rem;
    margin-bottom: 0.65rem;
    font-weight: var(--theme-heading-weight, 300);
    letter-spacing: -0.02em;
}

.sv-lp-story__prose :where(p, ul, ol) {
    margin-bottom: 1rem;
}

.sv-lp-story__prose :where(a) {
    color: var(--theme-primary, #2563eb);
}

.sv-lp-story__prose :where(img) {
    max-width: 100%;
    height: auto;
    border-radius: var(--sv-card-radius);
}

/* ── Gains (light cards) ── */
.sv-lp-gains {
    position: relative;
    padding-block: var(--ds-section-y-md);
    color: var(--theme-text, var(--sv-ink));
    background: transparent;
}

.sv-lp-gains__bg {
    display: none;
}

.sv-lp-gains__head {
    position: relative;
    max-width: 52ch;
    margin-bottom: var(--ds-stack);
}

.sv-lp-gains__sub {
    margin: 0.85rem 0 0;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--theme-text-muted, var(--sv-muted));
}

.sv-lp-gains__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.85rem, 1.5vw, 1.1rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sv-lp-gain {
    height: 100%;
    padding: var(--ds-card-pad);
    border-radius: var(--sv-card-radius);
    border: 1px solid var(--sv-card-border);
    background: var(--sv-card-bg);
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.32s ease,
        box-shadow 0.32s ease;
}

.sv-lp-gain:hover {
    transform: translateY(-6px);
    border-color: var(--theme-card-border, var(--sv-card-border));
    box-shadow: var(--theme-card-shadow-hover, 0 28px 64px color-mix(in srgb, var(--theme-text, #0f172a) 10%, transparent));
}

.sv-lp-gain__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.8rem;
    border-radius: var(--theme-radius, 8px);
    background: var(--sv-accent-soft);
    color: var(--sv-accent);
    font-size: 0.95rem;
    transition: transform 0.32s ease, background-color 0.32s ease, box-shadow 0.32s ease;
}

.sv-lp-gain:hover .sv-lp-gain__icon {
    transform: scale(1.06);
    background: var(--theme-overlay-soft, color-mix(in srgb, var(--theme-text, #0f172a) 8%, transparent));
    box-shadow: none;
}

.sv-lp-gain__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: var(--theme-heading-weight, 300);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.sv-lp-gain__text {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--theme-text-muted, var(--sv-muted));
}

/* ── Process flow ── */
.sv-lp-flow {
    padding-block: var(--ds-section-y-md);
    background: transparent;
}

.sv-lp-flow__intro {
    max-width: 52ch;
    margin-bottom: var(--ds-stack-sm);
}

.sv-lp-flow__lead {
    margin: 0.75rem 0 0;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--sv-muted);
}

.sv-lp-flow__track {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sv-lp-flow__step {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    min-width: min(100%, 210px);
}

.sv-lp-flow__card {
    flex: 1;
    min-height: 100%;
    padding: clamp(1.1rem, 1.6vw, 1.3rem);
    border-radius: var(--sv-card-radius);
    border: 1px solid var(--sv-card-border);
    background: var(--sv-card-bg);
    box-shadow: var(--theme-card-shadow, 0 16px 48px color-mix(in srgb, var(--theme-text, #0f172a) 8%, transparent));
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.sv-lp-flow__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--theme-card-shadow-hover, 0 28px 64px color-mix(in srgb, var(--theme-text, #0f172a) 10%, transparent));
}

.sv-lp-flow__num {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--sv-muted);
}

.sv-lp-flow__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    margin-top: 0.55rem;
    border-radius: var(--theme-radius, 8px);
    background: var(--sv-accent-soft);
    color: var(--theme-primary, #2563eb);
    font-size: 0.82rem;
}

.sv-lp-flow__label {
    margin: 0.65rem 0 0;
    font-size: 1rem;
    font-weight: var(--theme-heading-weight, 300);
    letter-spacing: -0.02em;
}

.sv-lp-flow__desc {
    margin: 0.4rem 0 0;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--sv-muted);
}

.sv-lp-flow__connector {
    position: relative;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2px;
    margin: 0 0.1rem;
    background: linear-gradient(90deg, color-mix(in srgb, var(--theme-primary, #2563eb) 12%, transparent), color-mix(in srgb, var(--theme-primary, #2563eb) 45%, transparent), color-mix(in srgb, var(--theme-primary, #2563eb) 12%, transparent));
    border-radius: 999px;
}

.sv-lp-flow__connector::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1px;
    width: 0.35rem;
    height: 0.35rem;
    border-top: 2px solid color-mix(in srgb, var(--theme-primary, #2563eb) 45%, transparent);
    border-right: 2px solid color-mix(in srgb, var(--theme-primary, #2563eb) 45%, transparent);
    transform: translateY(-50%) rotate(45deg);
}

/* ── Tech stack ── */
.sv-lp-tech {
    padding-block: var(--ds-section-y-md);
    color: var(--theme-text, var(--sv-ink));
    background: transparent;
}

.sv-lp-tech__head {
    max-width: 48ch;
    margin-bottom: var(--ds-stack-sm);
}

.sv-lp-tech__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ds-gap-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sv-lp-tech__card {
    height: 100%;
    padding: clamp(1rem, 1.5vw, 1.2rem);
    border-radius: var(--sv-card-radius);
    border: 1px solid var(--sv-card-border);
    background: var(--sv-card-bg);
    transition:
        border-color 0.28s ease,
        background-color 0.28s ease,
        transform 0.28s ease,
        box-shadow 0.28s ease;
}

.sv-lp-tech__card:hover {
    transform: translateY(-3px);
    border-color: var(--theme-card-border, var(--sv-card-border));
    background: var(--sv-card-bg);
    box-shadow: var(--theme-card-shadow-hover, 0 28px 64px color-mix(in srgb, var(--theme-text, #0f172a) 10%, transparent));
}

.sv-lp-tech__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    margin-bottom: 0.7rem;
    border-radius: var(--theme-radius, 8px);
    background: var(--sv-accent-soft);
    color: var(--sv-accent);
    font-size: 0.85rem;
    transition: transform 0.28s ease, background-color 0.28s ease, box-shadow 0.28s ease;
}

.sv-lp-tech__card:hover .sv-lp-tech__icon {
    transform: scale(1.08);
    background: var(--theme-overlay-soft, color-mix(in srgb, var(--theme-text, #0f172a) 8%, transparent));
    box-shadow: none;
}

.sv-lp-tech__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: var(--theme-heading-weight, 300);
    letter-spacing: -0.02em;
}

.sv-lp-tech__text {
    margin: 0.45rem 0 0;
    font-size: 0.82rem;
    line-height: 1.58;
    color: var(--theme-text-muted, var(--sv-muted));
}

/* ── Reference showcase ── */
.sv-lp-works {
    padding-block: var(--ds-section-y-md);
    background: transparent;
}

.sv-lp-works__head {
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.sv-lp-works__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.8vw, 1.35rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sv-lp-works__card {
    --frame-radius: var(--theme-card-radius, calc(var(--theme-radius, 8px) + 4px));
    --border-gap: 8px;
    position: relative;
    display: block;
    padding: var(--border-gap);
    border-radius: calc(var(--frame-radius) + var(--border-gap));
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    cursor: pointer;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.sv-lp-works__card::before {
    content: "";
    position: absolute;
    inset: calc(var(--border-gap) * -1);
    z-index: 0;
    border-radius: calc(var(--frame-radius) + var(--border-gap));
    border: 1px solid rgba(0, 0, 0, .10);
    opacity: 0;
    pointer-events: none;
    transform: scale(.985);
    transition:
        opacity .28s ease,
        transform .32s cubic-bezier(.22, 1, .36, 1);
}

.sv-lp-works__card:hover {
    transform: translateY(-6px);
}

.sv-lp-works__card:hover::before,
.sv-lp-works__card:focus-visible::before {
    opacity: 1;
    transform: scale(1);
}

.sv-lp-works__card:focus-visible {
    outline: 2px solid var(--theme-input-focus, var(--theme-primary, #2563eb));
    outline-offset: 4px;
}

.sv-lp-works__frame {
    position: relative;
    z-index: 1;
    display: block;
    aspect-ratio: 16 / 11;
    border-radius: var(--frame-radius);
    overflow: hidden;
    border: 0;
    background: var(--theme-card-bg, var(--sv-card-bg));
    margin-bottom: 22px;
    box-shadow: var(--theme-card-shadow, 0 16px 48px color-mix(in srgb, var(--theme-text, #0f172a) 8%, transparent));
    transition:
        transform .35s cubic-bezier(.22, 1, .36, 1),
        box-shadow .35s ease;
}

.sv-lp-works__card:hover .sv-lp-works__frame {
    transform: scale(1.01);
    box-shadow: var(--theme-card-shadow-hover, 0 28px 64px color-mix(in srgb, var(--theme-text, #0f172a) 10%, transparent));
}

.sv-lp-works__frame::before,
.sv-lp-works__frame::after {
    display: none !important;
}

.sv-lp-works__frame img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.sv-lp-works__frame .media-placeholder,
.sv-lp-works__placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: inherit;
}

.sv-lp-works__frame--placeholder {
    background: color-mix(in srgb, var(--theme-surface, var(--theme-card-bg, #fff)) 92%, var(--theme-primary, #2563eb) 8%);
}

.sv-lp-works__frame--placeholder .sv-lp-works__shine {
    opacity: 0.35;
}

.sv-lp-works__shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(125deg, rgba(255, 255, 255, .16) 0%, transparent 38%);
    opacity: .55;
}

.sv-lp-works__meta {
    position: relative;
    z-index: 1;
    margin-top: 0 !important;
    padding: 0;
    text-align: left;
}

.sv-lp-works__label {
    display: none !important;
}

.sv-lp-works__title {
    margin: 0;
    font-size: clamp(1.05rem, 1.4vw, 1.28rem);
    font-weight: var(--theme-heading-weight, 300);
    line-height: 1.25;
    letter-spacing: -0.03em;
    color: var(--theme-text, var(--sv-ink));
}

/* ── Related services ── */
.sv-lp-more {
    --sv-more-accent: var(--theme-primary, #2563eb);
    --sv-more-surface: var(--theme-card-bg, #ffffff);
    --sv-more-border: var(--theme-card-border, var(--theme-border, #e2e8f0));
    --sv-more-radius: var(--theme-card-radius, calc(var(--theme-radius, 8px) + 4px));
    --sv-more-shadow: var(--theme-card-shadow, var(--ds-elevation-1, 0 10px 30px color-mix(in srgb, var(--theme-text, #0f172a) 8%, transparent)));
    --sv-more-shadow-hover: var(--theme-card-shadow-hover, var(--ds-elevation-hover, 0 16px 40px color-mix(in srgb, var(--theme-text, #0f172a) 12%, transparent)));
    padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(2.5rem, 4vw, 3.5rem);
    background: transparent;
}

.sv-lp-more__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ds-gap, 1rem) var(--ds-gap-lg, 1.5rem);
    margin-bottom: clamp(1.15rem, 2vw, 1.5rem);
}

.sv-lp-more__lead {
    margin: 0;
    max-width: 28rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--sv-muted);
}

.sv-lp-more__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.85rem, 1.4vw, 1.1rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sv-lp-more__grid>li {
    display: flex;
    min-width: 0;
}

.sv-lp-more__card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100%;
    min-width: 0;
    padding: clamp(1.05rem, 1.6vw, 1.25rem);
    border-radius: var(--sv-more-radius);
    background: var(--sv-more-surface);
    border: 1px solid var(--sv-more-border);
    box-shadow: var(--sv-more-shadow);
    color: inherit;
    text-decoration: none;
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.sv-lp-more__card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--sv-more-accent) 42%, var(--sv-more-border));
    box-shadow: var(--sv-more-shadow-hover);
}

.sv-lp-more__card:focus-visible {
    outline: var(--ds-focus-ring, 2px solid var(--sv-more-accent));
    outline-offset: 3px;
}

.sv-lp-more__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-gap-sm, 0.75rem);
    margin-bottom: 0.85rem;
}

.sv-lp-more__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--theme-radius, 8px);
    background: var(--sv-accent-soft);
    color: var(--sv-more-accent);
    font-size: 0.95rem;
    transition: background-color 0.22s ease, color 0.22s ease;
}

.sv-lp-more__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--sv-muted);
    font-size: 0.75rem;
    transition: transform 0.22s ease, color 0.22s ease;
}

.sv-lp-more__card:hover .sv-lp-more__icon {
    background: color-mix(in srgb, var(--sv-more-accent) 22%, transparent);
}

.sv-lp-more__card:hover .sv-lp-more__arrow {
    color: var(--sv-more-accent);
    transform: translateX(3px);
}

.sv-lp-more__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.sv-lp-more__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: var(--theme-heading-weight, 300);
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--sv-ink);
}

.sv-lp-more__text {
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--sv-muted);
}

.sv-lp-more__footer {
    display: inline-flex;
    align-items: center;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--sv-more-border) 85%, transparent);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sv-more-accent);
}

/* ── Section reveal animations ── */
.sv-lp-reveal {
    opacity: 0;
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.sv-lp-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (scripting: none) {
    .sv-lp-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sv-lp-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Editorial service detail — hero is intentionally inherited unchanged. */
.service-editorial, .service-outcomes, .service-roadmap, .service-assurance { padding: clamp(3.25rem, 6vw, 6rem) 0; }
.service-editorial__layout { display: block; }
.service-editorial__prose { max-width: 100%; color: var(--sv-muted); font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.78; }
.service-editorial__prose > :first-child { margin-top: 0; }
.service-editorial__prose h2, .service-editorial__prose h3 { margin: 1.85em 0 .6em; color: var(--theme-text, #0f172a); font-weight: var(--theme-heading-weight, 500); line-height: 1.2; letter-spacing: -.025em; }
.service-editorial__prose li + li { margin-top: .45rem; }
.service-editorial__prose figure { max-width: 100%; margin-inline: 0; }
.service-editorial__prose figure img { display: block; width: 100%; max-height: 42rem; object-fit: contain; }
.sv-lp > .service-outcomes {
    color: var(--theme-button-color, #fff);
    background: linear-gradient(135deg,
        var(--theme-secondary, var(--sv-accent)),
        color-mix(in srgb, var(--theme-primary, var(--sv-accent)) 72%, var(--theme-secondary, var(--sv-accent))) 68%);
}
.service-outcomes .sv-lp-wrap { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(2.5rem, 8vw, 8rem); }
.service-outcomes .sv-lp-eyebrow { color: color-mix(in srgb, var(--theme-button-color, #fff) 72%, transparent); }
.service-outcomes .sv-lp-heading { color: var(--theme-button-color, #fff); }
.service-outcomes__intro > p:last-child { max-width: 32rem; color: color-mix(in srgb, var(--theme-button-color, #fff) 72%, transparent); line-height: 1.7; }
.service-outcomes__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.service-outcomes__list li { display: grid; grid-template-columns: 2.5rem 3.5rem 1fr; gap: .8rem; align-items: start; padding: 1.35rem; border: 1px solid rgba(255,255,255,.1); border-radius: 1.15rem; background: rgba(255,255,255,.045); }
.service-outcomes__number { padding-top: .8rem; color: color-mix(in srgb, var(--theme-button-color, #fff) 82%, transparent); font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.service-outcomes__icon, .service-roadmap__icon, .service-assurance__icon { display: grid; width: 3.25rem; height: 3.25rem; place-items: center; border-radius: 1rem; color: var(--sv-accent); background: color-mix(in srgb, var(--sv-accent) 11%, var(--sv-card-bg)); }
.service-outcomes__list h3, .service-roadmap__track h3, .service-assurance__list h3 { margin: .1rem 0 .45rem; font-size: 1.15rem; font-weight: 650; letter-spacing: -.015em; }
.service-outcomes__list p, .service-roadmap__track p, .service-assurance__list p { margin: 0; color: var(--sv-muted); line-height: 1.65; }
.service-outcomes__list p { color: color-mix(in srgb, var(--theme-button-color, #fff) 68%, transparent); }
.service-outcomes__list h3 { color: var(--theme-button-color, #fff); }
.service-roadmap .sv-lp-wrap { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(2.5rem, 8vw, 8rem); }
.service-roadmap__intro { align-self: start; }
.service-roadmap__track { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.service-roadmap__track li { display: grid; grid-template-columns: 3rem 3.5rem 1fr; gap: 1.1rem; position: relative; padding: 1.2rem 1.35rem; border: 1px solid var(--sv-card-border); border-radius: 1.1rem; background: var(--sv-card-bg); transition: border-color .25s ease, transform .25s ease; }
.service-roadmap__track li:hover { transform: translateX(.3rem); border-color: color-mix(in srgb, var(--sv-accent) 42%, var(--sv-card-border)); }
.service-roadmap__track li:not(:last-child)::after { display: none; }
.service-roadmap__num { padding-top: .8rem; color: var(--sv-accent); font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.sv-lp > .service-assurance { border-block: 1px solid var(--sv-card-border); background: linear-gradient(180deg, var(--sv-card-bg), color-mix(in srgb, var(--sv-accent) 4%, var(--theme-bg, #fff))); }
.service-outcomes, .service-roadmap, .service-assurance, .sv-lp-works, .sv-lp-more {
    content-visibility: auto;
    contain-intrinsic-size: auto 42rem;
}
.service-assurance__head { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 2.5rem; }
.service-assurance__head .sv-lp-heading { max-width: 15ch; }
.service-assurance__list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; border-block: 1px solid color-mix(in srgb, var(--theme-text, #0f172a) 12%, transparent); list-style: none; }
.service-assurance__list li { padding: 2rem; border-right: 1px solid color-mix(in srgb, var(--theme-text, #0f172a) 12%, transparent); transition: background .25s ease; }
.service-assurance__list li:hover { background: color-mix(in srgb, var(--sv-accent) 5%, transparent); }
.service-assurance__list li:first-child { padding-left: 0; }
.service-assurance__list li:last-child { padding-right: 0; border-right: 0; }
.service-assurance__icon { margin-bottom: 1.35rem; }
@media (max-width: 900px) {
    .service-outcomes .sv-lp-wrap, .service-roadmap .sv-lp-wrap { grid-template-columns: 1fr; gap: 2rem; }
    .service-outcomes__list { grid-template-columns: 1fr; }
    .service-assurance__list { grid-template-columns: repeat(2, 1fr); }
    .service-assurance__list li:nth-child(2) { border-right: 0; }
}
@media (max-width: 600px) {
    .service-editorial__prose figure img { max-height: 32rem; }
    .service-outcomes__list li, .service-roadmap__track li { grid-template-columns: 2rem 2.8rem 1fr; gap: .75rem; }
    .service-outcomes__icon, .service-roadmap__icon { width: 2.7rem; height: 2.7rem; border-radius: .8rem; }
    .service-assurance__list { grid-template-columns: 1fr; }
    .service-assurance__list li, .service-assurance__list li:first-child, .service-assurance__list li:last-child { padding: 1.35rem 0; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--theme-text, #0f172a) 12%, transparent); }
    .service-assurance__list li:last-child { border-bottom: 0; }
}

/* Wide editorial content shell: readable prose plus a compact conversion rail. */
.sv-lp-story {
    padding-block: clamp(3.5rem, 7vw, 7rem);
}

.sv-lp-story__panel {
    min-width: 0;
}

.sv-lp-story__prose {
    max-width: 92ch;
    margin-inline: 0;
    font-size: clamp(1.02rem, .25vw + .98rem, 1.14rem);
    line-height: 1.82;
}

.sv-lp-gains,
.sv-lp-tech {
    color: var(--theme-text, #102033);
    background: color-mix(in srgb, var(--theme-primary, #16a394) 4%, var(--theme-bg, #f5f8f8));
}

.sv-lp-gains__bg { opacity: .22; }
.sv-lp-eyebrow--light { color: var(--theme-primary, #16a394); }
.sv-lp-heading--light,
.sv-lp-gains__sub { color: var(--theme-text, #102033); }

.sv-lp-gains__grid,
.sv-lp-tech__grid { gap: 1rem; }

.sv-lp-gain,
.sv-lp-tech__card {
    height: 100%;
    border: 1px solid var(--theme-border, #dbe5e8);
    border-radius: 1.15rem;
    color: var(--theme-text, #102033);
    background: var(--theme-surface, #fff);
    box-shadow: none;
}

.sv-lp-gain__title,
.sv-lp-tech__title { color: var(--theme-text, #102033); }
.sv-lp-gain__text,
.sv-lp-tech__text { color: var(--theme-text-muted, #607083); }

.sv-lp-flow__track { gap: 1rem; }
.sv-lp-flow__step { min-width: 0; }
.sv-lp-flow__connector { display: none; }
.sv-lp-flow__card { border-radius: 1.15rem; box-shadow: none; }


.sv-lp-story__prose :where(h2, h3) {
    scroll-margin-top: 6rem;
    letter-spacing: -.02em;
}

.sv-lp-reveal--scale {
    transform: scale(0.97);
}

.sv-lp-reveal--slide {
    transform: translateX(28px);
}

.sv-lp-reveal--fade {
    transform: translateY(12px);
}

.sv-lp-reveal--parallax {
    transform: translateY(24px);
}

.home-cta.sv-lp-reveal--up {
    transform: translateY(32px);
}

/* Hizmet detay — CTA dış section site zeminiyle bütünleşir */
body:has(.sv-lp) .home-cta.home-section {
    background: transparent;
    border-top: 0;
}

/* ── Responsive ── */
@media (max-width: 1023px) {
    .sv-lp-hero__layout {
        grid-template-columns: 1fr;
    }

    .sv-lp-hero__stage {
        order: -1;
    }

    .sv-lp-hero__title {
        max-width: none;
    }

    .sv-lp-hero__device {
        transform: none;
    }

    .sv-lp-hero__device:hover {
        transform: none;
    }

    .sv-lp-tech__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sv-lp-flow__track {
        flex-direction: column;
        gap: 0.65rem;
    }

    .sv-lp-flow__step {
        flex-direction: column;
        min-width: 100%;
    }

    .sv-lp-flow__connector {
        width: 2px;
        height: 1.75rem;
        margin: 0.2rem 0;
        background: linear-gradient(180deg, rgba(91, 140, 255, 0.12), rgba(91, 140, 255, 0.55), rgba(91, 140, 255, 0.12));
    }

    .sv-lp-flow__connector::after {
        top: auto;
        bottom: -1px;
        right: 50%;
        transform: translateX(50%) rotate(135deg);
    }

    .sv-lp-works__grid,
    .sv-lp-more__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .sv-lp-wrap {
        width: var(--layout-container-wide);
    }

    .sv-lp-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sv-lp-btn {
        width: 100%;
    }

    .sv-lp-gains__grid {
        grid-template-columns: 1fr;
    }

    .sv-lp-tech__grid,
    .sv-lp-works__grid,
    .sv-lp-more__grid {
        grid-template-columns: 1fr;
    }

    .sv-lp-hero__abstract-chip {
        white-space: normal;
    }

    .sv-lp-flow__track {
        gap: 0;
        align-items: stretch;
    }

    .sv-lp-flow__step {
        flex: none;
        width: 100%;
        align-items: stretch;
    }

    .sv-lp-flow__card {
        width: 100%;
        min-height: 8.75rem;
        flex: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .sv-lp-flow__connector {
        width: 2px;
        height: 1.5rem;
        margin: var(--ds-stack-xs, 0.375rem) auto;
        align-self: center;
        flex-shrink: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sv-lp-hero__stage {
        transform: none;
        will-change: auto;
    }

    .sv-lp-hero__pointer {
        display: none;
    }

    .sv-lp-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .sv-lp-btn,
    .sv-lp-gain,
    .sv-lp-gain__icon,
    .sv-lp-tech__card,
    .sv-lp-tech__icon,
    .sv-lp-flow__card,
    .sv-lp-more__card,
    .sv-lp-more__icon,
    .sv-lp-more__arrow,
    .sv-lp-works__card,
    .sv-lp-works__frame,
    .sv-lp-hero__device {
        transition: none;
    }

    .sv-lp-btn:hover,
    .sv-lp-btn:focus-visible,
    .sv-lp-gain:hover,
    .sv-lp-gain:hover .sv-lp-gain__icon,
    .sv-lp-tech__card:hover,
    .sv-lp-tech__card:hover .sv-lp-tech__icon,
    .sv-lp-flow__card:hover,
    .sv-lp-more__card:hover,
    .sv-lp-works__card:hover,
    .sv-lp-works__card:hover .sv-lp-works__frame,
    .sv-lp-hero__device:hover {
        transform: none;
    }

    .sv-lp-works__card::before {
        transition: none;
    }

    .sv-lp-works__card:hover::before,
    .sv-lp-works__card:focus-visible::before {
        opacity: 1;
        transform: scale(1);
    }
}