:root {
    --mp-brand: #0A4BD9;
    --mp-brand2: #0B66FF;
    --mp-ink: #0B1220;
    --mp-text: #1C2A44;
    --mp-muted: #64748B;
    --mp-bg: #fff;
    --mp-soft: #F4F7FF;
    --mp-soft2: #EEF5FF;
    --mp-border: rgba(15,23,42,.10);
    --mp-shadow: 0 14px 40px rgba(2,10,25,.10);
    --mp-radius: 18px;
}

.mp-container {
    width: min(1140px, 92%);
    margin-inline: auto;
}

.mp-w100 {
    width: 100%;
}

.mp-section {
    padding: 64px 0;
}

.mp-soft {
    background: linear-gradient(180deg, var(--mp-soft2), #fff 55%);
}

.mp-head {
    margin-bottom: 18px;
}

.mp-h2 {
    margin: 0 0 8px;
    font-size: clamp(24px, 2.4vw, 34px);
    letter-spacing: -.5px;
    color: var(--mp-ink);
}

.mp-sub {
    margin: 0;
    color: var(--mp-muted);
    line-height: 1.6;
    max-width: 70ch;
}

.mp-h1 {
    margin: 30px 0 30px;
    font-size: clamp(34px, 4.2vw, 52px);
    line-height: 1.06;
    letter-spacing: -1px;
    color: var(--mp-ink);
}

.mp-grad {
    background: linear-gradient(135deg, var(--mp-brand), var(--mp-brand2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mp-lead {
    margin: 0;
    color: var(--mp-muted);
    line-height: 1.7;
    max-width: 62ch;
}

/* Buttons */
.mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 3px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 600;
    text-decoration: none;
    transition: .18s ease;
    user-select: none;
    margin-top: 21px;
}

.mp-btn-primary {
    background: linear-gradient(135deg, var(--mp-brand), var(--mp-brand2));
    color: #fff;
    box-shadow: 0 14px 28px rgba(10,75,217,.20);
}

    .mp-btn-primary:hover {
        transform: translateY(-1px);
        filter: saturate(1.05);
        color:#fff;
    }

.mp-btn-ghost {
    background: #fff;
    border-color: var(--mp-border);
    color: var(--mp-ink);
}

    .mp-btn-ghost:hover {
        transform: translateY(-1px);
        box-shadow: var(--mp-shadow);
    }

/* Hero */
.mp-hero {
    padding: 68px 0 22px;
    background: radial-gradient(900px 420px at 14% 12%, rgba(10,75,217,.22), transparent 55%), radial-gradient(720px 320px at 86% 16%, rgba(11,102,255,.18), transparent 55%), linear-gradient(180deg, var(--mp-soft), #fff 56%);
}

.mp-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 34px;
    align-items: center;
}

.mp-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    border: 1px solid rgba(10,75,217,.18);
    background: rgba(255,255,255,.78);
    border-radius: 999px;
    font-weight: 600;
    color: #2f43ff;
}

.mp-badge-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--mp-brand);
    box-shadow: 0 0 0 6px rgba(10,75,217,.12);
}

.mp-actions {
    display: flex;
    gap: 12px;
    margin-top: 60px;
    flex-wrap: wrap;
}

.mp-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 50px;
}

.mp-trust-item {
    background: rgba(255,255,255,.85);
    border: 1px solid var(--mp-border);
    border-radius: 14px;
    padding: 12px 12px;
}

.mp-trust-val {
    font-weight: 1000;
    color: var(--mp-ink);
    font-size: 16px;
}

.mp-trust-lbl {
    color: var(--mp-muted);
    font-weight: 800;
    font-size: 12px;
    margin-top: 3px;
}

/* Panel mock */
/* ===== Animated Tech Hero (no image, premium) ===== */

.mp-motion-tech {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(10,75,217,.14);
    background: radial-gradient(700px 340px at 18% 20%, rgba(10,75,217,.25), transparent 60%), radial-gradient(620px 320px at 86% 18%, rgba(11,102,255,.18), transparent 60%), linear-gradient(180deg, rgba(244,247,255,.94), rgba(255,255,255,.92));
    box-shadow: 0 26px 90px rgba(2,10,25,.16);
    aspect-ratio: 4 / 3;
}

    .mp-motion-tech::before {
        content: "";
        position: absolute;
        inset: -40px;
        background: radial-gradient(circle at 30% 20%, rgba(10,75,217,.18), transparent 45%), radial-gradient(circle at 80% 70%, rgba(11,102,255,.14), transparent 45%);
        filter: blur(18px);
        opacity: .9;
        pointer-events: none;
    }

.mp-motion-grid {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(10,75,217,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(10,75,217,.06) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: .6;
    mask-image: radial-gradient(closest-side at 55% 45%, #000 72%, transparent 100%);
    animation: mpGridMove 8s linear infinite;
    pointer-events: none;
}

@keyframes mpGridMove {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 140px 140px, 140px 140px;
    }
}

/* Card */
.mp-motion-card {
    position: absolute;
    inset: 14px;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(15,23,42,.10);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 58px rgba(2,10,25,.12);
    display: grid;
    grid-template-rows: 48px 1fr;
}

.mp-motion-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(244,247,255,.62));
    border-bottom: 1px solid rgba(15,23,42,.08);
}

.mp-motion-dots span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(2,10,25,.12);
    margin-right: 6px;
}

.mp-motion-title {
    font-weight: 1100;
    font-size: 13px;
    color: rgba(11,18,32,.82);
}

.mp-motion-badge {
    margin-left: auto;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 1100;
    color: rgba(16,185,129,.98);
    background: rgba(16,185,129,.10);
    border: 1px solid rgba(16,185,129,.16);
}

/* Layout body */
.mp-motion-body {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 12px;
    padding: 14px;
    min-height: 0;
}

/* Code */
.mp-motion-code {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(15,23,42,.10);
    background: radial-gradient(460px 200px at 40% 18%, rgba(10,75,217,.12), transparent 60%), rgba(255,255,255,.62);
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 14px;
}

.mp-ln {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: rgba(100,116,139,.75);
    font-weight: 1100;
    font-size: 11px;
    user-select: none;
    padding-top: 2px;
}

.mp-code {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    line-height: 1.9;
    color: rgba(11,18,32,.86);
    white-space: pre;
}

    /* soft syntax */
    .mp-code .k {
        color: rgba(10,75,217,.95);
        font-weight: 1200;
    }

    .mp-code .m {
        color: rgba(2,132,199,.95);
        font-weight: 1200;
    }

    .mp-code .s {
        color: rgba(245,158,11,.95);
        font-weight: 1200;
    }

.mp-caret {
    position: absolute;
    left: calc(40px + 14px + 230px);
    top: 90px;
    width: 10px;
    height: 16px;
    border-radius: 3px;
    background: rgba(10,75,217,.85);
    animation: mpBlink 1.05s ease-in-out infinite;
    box-shadow: 0 0 0 6px rgba(10,75,217,.10);
}

@keyframes mpBlink {
    0%,100% {
        opacity: .25
    }

    50% {
        opacity: 1
    }
}

/* Scanline + highlight (motion) */
.mp-scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 62px;
    top: -70px;
    background: linear-gradient(180deg, rgba(11,102,255,.0), rgba(11,102,255,.14), rgba(11,102,255,0));
    animation: mpScan 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes mpScan {
    0% {
        transform: translateY(0);
        opacity: .0;
    }

    15% {
        opacity: .9;
    }

    50% {
        transform: translateY(210px);
        opacity: .35;
    }

    100% {
        transform: translateY(420px);
        opacity: 0;
    }
}

.mp-highlight {
    position: absolute;
    left: 14px;
    right: 14px;
    height: 14px;
    top: 128px;
    border-radius: 999px;
    background: rgba(10,75,217,.10);
    border: 1px solid rgba(10,75,217,.10);
    animation: mpHighlight 2.9s ease-in-out infinite;
    pointer-events: none;
}

@keyframes mpHighlight {
    0%,100% {
        transform: translateY(0);
        opacity: .25;
    }

    50% {
        transform: translateY(46px);
        opacity: .55;
    }
}

/* Log */
.mp-motion-log {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.66);
    display: grid;
    grid-template-rows: 42px 1fr;
    min-height: 0;
}

.mp-log-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(15,23,42,.08);
    font-weight: 1100;
    font-size: 12px;
    color: rgba(11,18,32,.72);
    background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(244,247,255,.62));
}

.mp-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
    box-shadow: 0 0 0 6px rgba(16,185,129,.10);
}

.mp-ok {
    background: rgba(16,185,129,.95);
}

.mp-pill {
    margin-left: auto;
    font-size: 11px;
    font-weight: 1100;
    padding: 6px 10px;
    border-radius: 999px;
    color: rgba(10,75,217,.95);
    background: rgba(10,75,217,.10);
    border: 1px solid rgba(10,75,217,.16);
}

.mp-log-viewport {
    position: relative;
    padding: 12px;
    min-height: 0;
    overflow: hidden;
}

.mp-log-track {
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: mpLogScroll 6s linear infinite;
}

@keyframes mpLogScroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

.mp-log-block {
    display: grid;
    gap: 10px;
}

.mp-log-row {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    color: rgba(100,116,139,.95);
    font-weight: 900;
}

    .mp-log-row .t {
        display: inline-block;
        width: 44px;
        font-weight: 1200;
        color: rgba(10,75,217,.95);
    }

        .mp-log-row .t.ok {
            color: rgba(16,185,129,.98);
        }

        .mp-log-row .t.warn {
            color: rgba(245,158,11,.98);
        }

/* Orbit dots (eye-candy) */
.mp-orbit {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 999px;
    border: 1px dashed rgba(10,75,217,.16);
    opacity: .55;
    pointer-events: none;
}

    .mp-orbit::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: rgba(11,102,255,.55);
        box-shadow: 0 0 0 7px rgba(11,102,255,.10);
        top: -5px;
        left: 50%;
        transform: translateX(-50%);
    }

.mp-orbit-1 {
    left: -30px;
    top: 18px;
    animation: mpOrbit 5s linear infinite;
}

.mp-orbit-2 {
    right: -40px;
    bottom: 10px;
    width: 150px;
    height: 150px;
    animation: mpOrbit 7s linear infinite reverse;
}

@keyframes mpOrbit {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mp-motion-grid,
    .mp-scanline,
    .mp-highlight,
    .mp-log-track,
    .mp-orbit,
    .mp-caret {
        animation: none !important;
    }
}

@media (max-width: 980px) {
    .mp-motion-tech {
        aspect-ratio: 16 / 10;
    }

    .mp-motion-body {
        grid-template-columns: 1fr;
    }

    .mp-motion-log {
        display: none;
    }
    /* mobilde sade */
    .mp-ln {
        display: none;
    }

    .mp-motion-code {
        grid-template-columns: 1fr;
    }

    .mp-caret {
        left: 220px;
    }
}

/* Strip */
/* ===== Premium Strip (static logos + subtle motion) ===== */

.mp-strip {
    padding: 18px 0;
}

.mp-strip-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(10,75,217,.10);
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 38px rgba(2,10,25,.08);
}

    /* altta ince premium gradient çizgi */
    .mp-strip-inner::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 8px;
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(10,75,217,0), rgba(10,75,217,.25), rgba(11,102,255,.22), rgba(10,75,217,0));
        opacity: .65;
    }

/* başlık: küçük dot + daha net tipografi */
.mp-strip-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mp-muted);
    font-weight: 1000;
    font-size: 12.5px;
    letter-spacing: .2px;
    white-space: nowrap;
}

    .mp-strip-title::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: rgba(10,75,217,.65);
        box-shadow: 0 0 0 6px rgba(10,75,217,.10);
    }

/* logos alanı */
.mp-logos {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    overflow: hidden; /* desktop: tek satır, temiz */
    padding: 6px 4px;
    border-radius: 14px;
}

    /* arkada “data flow” çizgisi (hareket burada) */
    .mp-logos::before {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        top: 50%;
        height: 2px;
        transform: translateY(-50%);
        border-radius: 999px;
        background: repeating-linear-gradient(90deg, rgb(10 75 217 / 55%) 0 16px, rgba(10, 75, 217, 0) 16px 36px);
        opacity: .22;
        animation: mpFlow 7s linear infinite;
        pointer-events: none;
    }

@keyframes mpFlow {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 220px 0;
    }
}

/* logo pill (premium glass) */
.mp-logo {
    position: relative;
    z-index: 1; /* çizginin üstünde */
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.10);
    background: radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.85), transparent 60%), rgba(244,247,255,.62);
    font-weight: 1100;
    color: rgba(11,18,32,.74);
    letter-spacing: .6px;
    font-size: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.70), 0 10px 22px rgba(2,10,25,.06);
    transition: .16s ease;
    user-select: none;
    white-space: nowrap;
}

    .mp-logo:hover {
        transform: translateY(-1px);
        border-color: rgba(10,75,217,.20);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 18px 44px rgba(2,10,25,.12);
    }

    /* çok hafif “sheen” – sadece bazı pill’lerde, dikkat çekici ama rahatsız etmez */
    .mp-logo::after {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 999px;
        background: linear-gradient(110deg, rgba(255,255,255,0), rgba(255,255,255,.28), rgba(255,255,255,0));
        transform: translateX(-120%);
        opacity: 0;
        pointer-events: none;
    }

    .mp-logo:nth-child(2)::after,
    .mp-logo:nth-child(5)::after {
        animation: mpSheen 4.8s ease-in-out infinite;
        opacity: 1;
    }

@keyframes mpSheen {
    0%,55% {
        transform: translateX(-120%);
        opacity: 0;
    }

    70% {
        opacity: .9;
    }

    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

/* mobil: wrap yerine yatay kaydır, scrollbar görünmesin */
@media (max-width: 980px) {
    .mp-logos {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .mp-logos::-webkit-scrollbar {
            display: none;
        }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mp-logos::before {
        animation: none !important;
    }

    .mp-logo:nth-child(2)::after,
    .mp-logo:nth-child(5)::after {
        animation: none !important;
        opacity: 0;
    }
}

/* Grid + cards */
.mp-grid {
    display: grid;
    gap: 14px;
}

.mp-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mp-card {
    background: #fff;
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    padding: 18px;
    box-shadow: 0 10px 26px rgba(2,10,25,.06);
    transition: .18s ease;
}

    .mp-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--mp-shadow);
    }

.mp-ic {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(10,75,217,.10);
    border: 1px solid rgba(10,75,217,.16);
    font-size: 20px;
}

.mp-card h3 {
    margin: 12px 0 8px;
    color: var(--mp-ink);
    font-size: 18px;
}

.mp-card p {
    margin: 0;
    color: var(--mp-muted);
    line-height: 1.65;
}

.mp-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: grid;
    gap: 8px;
}

    .mp-list li {
        position: relative;
        padding-left: 22px;
        color: var(--mp-text);
        font-weight: 600;
        font-size: 13px;
    }

        .mp-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 0;
            color: rgba(10,75,217,.95);
            font-weight: 1100;
        }

.mp-link {
    display: inline-flex;
    margin-top: 12px;
    font-weight: 1100;
    color: rgba(10,75,217,.98);
    text-decoration: none;
}

/* Split */
.mp-split {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 16px;
    align-items: start;
}

/* Steps */
.mp-steps {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.mp-step {
    display: flex;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--mp-border);
    border-radius: 16px;
    background: rgba(255,255,255,.75);
}

.mp-step-no {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(10,75,217,.10);
    border: 1px solid rgba(10,75,217,.16);
    font-weight: 1100;
    color: rgba(10,75,217,.95);
}

.mp-step-title {
    font-weight: 1100;
    color: var(--mp-ink);
}

.mp-step-text {
    color: var(--mp-muted);
    font-weight: 900;
    font-size: 13px;
    margin-top: 2px;
}

/* Aside */
.mp-aside {
    background: #fff;
    border: 1px solid rgba(10,75,217,.18);
    border-radius: 20px;
    padding: 18px;
    box-shadow: var(--mp-shadow);
}

.mp-aside-top {
    margin-bottom: 12px;
}

.mp-aside-title {
    font-weight: 1100;
    color: var(--mp-ink);
    font-size: 16px;
}

.mp-aside-sub {
    color: var(--mp-muted);
    font-weight: 900;
    font-size: 12.5px;
    margin-top: 4px;
}

.mp-checks {
    display: grid;
    gap: 8px;
    margin: 12px 0 14px;
}

.mp-check {
    font-weight: 900;
    color: var(--mp-text);
}



/* FAQ */
.mp-faq {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

    .mp-faq details {
        background: rgba(255,255,255,.75);
        border: 1px solid var(--mp-border);
        border-radius: 16px;
        padding: 12px 14px;
    }

    .mp-faq summary {
        cursor: pointer;
        font-weight: 1100;
        color: var(--mp-ink);
    }

.mp-faq-body {
    margin-top: 10px;
    color: var(--mp-muted);
    font-weight: 600;
    line-height: 1.6;
}

/* Form */
.mp-form {
    background: #fff;
    border: 1px solid rgba(10,75,217,.18);
    border-radius: 20px;
    padding: 18px;
    box-shadow: var(--mp-shadow);
}

.mp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.mp-form label {
    display: grid;
    gap: 8px;
    font-weight: 1100;
    color: var(--mp-ink);
    font-size: 13px;
}

.mp-form input, .mp-form select, .mp-form textarea {
    width: 100%;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid var(--mp-border);
    outline: none;
    font: inherit;
    color: var(--mp-text);
    background: #fff;
}

    .mp-form input:focus, .mp-form select:focus, .mp-form textarea:focus {
        border-color: rgba(10,75,217,.35);
        box-shadow: 0 0 0 4px rgba(10,75,217,.12);
    }

.mp-span-2 {
    grid-column: 1/-1;
}

.mp-mini {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--mp-muted);
    font-weight: 900;
}

/* Responsive */
@media (max-width: 980px) {
    .mp-hero-grid {
        grid-template-columns: 1fr;
    }

    .mp-split {
        grid-template-columns: 1fr;
    }

    .mp-grid-3 {
        grid-template-columns: 1fr;
    }

    .mp-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mp-float-1, .mp-float-2 {
        display: none;
    }
}

@media (max-width: 520px) {
    .mp-form-grid {
        grid-template-columns: 1fr;
    }

    .mp-trust {
        grid-template-columns: 1fr;
    }
}

/* ===== Premium panel overrides (append end of home-v2.css) ===== */

.mp-panel--premium{
  border-color: rgba(10,75,217,.14);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 70px rgba(2,10,25,.14);
}

.mp-panel-top--premium{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(244,247,255,.72));
}

.mp-panel-title--premium{
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: -.2px;
}

.mp-mini-badge{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 1000;
  color: rgba(10,75,217,.95);
  background: rgba(10,75,217,.10);
  border: 1px solid rgba(10,75,217,.18);
}

.mp-panel-body--premium{
  padding: 14px;
  gap: 10px;
}

.mp-kpi--premium{
  position: relative;
  border-radius: 18px;
  padding: 14px 14px 12px;
  background:
    radial-gradient(140px 60px at 20% 20%, rgba(10,75,217,.12), transparent 60%),
    #fff;
}

.mp-kpi-label{
  font-size: 11px;
  font-weight: 1000;
  color: rgba(100,116,139,.92);
  letter-spacing: .2px;
  text-transform: uppercase;
}

.mp-kpi--premium .mp-kpi-val{
  font-size: 26px;
  margin-top: 6px;
}

.mp-kpi-chip{
  position:absolute;
  right:12px;
  top:12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 1000;
  border: 1px solid transparent;
}

.mp-chip-up{
  color: rgba(16,185,129,.98);
  background: rgba(16,185,129,.10);
  border-color: rgba(16,185,129,.16);
}

/* Chart premium */
.mp-chart--premium{
  padding: 14px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(10,75,217,.10), rgba(11,102,255,.05));
}

.mp-chart-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.mp-chart-title{
  font-weight: 1100;
  color: var(--mp-ink);
}

.mp-chart-sub{
  font-size: 11px;
  font-weight: 1000;
  color: rgba(100,116,139,.95);
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(15,23,42,.08);
}

.mp-spark--premium{
  height: 52px;
  border-radius: 14px;
  margin-top: 10px;
  background:
    linear-gradient(90deg, rgba(10,75,217,0), rgba(10,75,217,.22), rgba(10,75,217,0)),
    radial-gradient(20px 20px at 18% 62%, rgba(10,75,217,.28), transparent 55%),
    radial-gradient(20px 20px at 38% 42%, rgba(10,75,217,.18), transparent 55%),
    radial-gradient(20px 20px at 58% 56%, rgba(10,75,217,.22), transparent 55%),
    radial-gradient(20px 20px at 78% 36%, rgba(10,75,217,.16), transparent 55%),
    radial-gradient(20px 20px at 92% 46%, rgba(10,75,217,.20), transparent 55%);
  border: 1px solid rgba(10,75,217,.10);
}

/* Connections: tiny, clean */
.mp-conn--premium{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
  border-radius: 18px;
}

.mp-conn-mini{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight: 1000;
  color: rgba(11,18,32,.72);
  font-size: 12px;
}

.mp-brand-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  box-shadow: 0 0 0 5px rgba(2,10,25,.03);
}

.mp-dot-ok{ background: rgba(16,185,129,.98); }
.mp-dot-warn{ background: rgba(245,158,11,.98); }

/* Float premium (tek baloncuk) */
.mp-float--premium{
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 22px 70px rgba(2,10,25,.18);
}

@media (max-width: 980px){
  .mp-float--premium{ display:none; }
}

/* ===== Stats strip (like screenshot) ===== */
.mp-stats {
    padding: 10px 0 34px;
}

.mp-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.mp-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 14px;
    border-radius: 16px;
    border: 1px solid rgba(15,23,42,.08);
    background: rgba(2,10,25,.02);
    box-shadow: 0 10px 26px rgba(2,10,25,.06);
}

.mp-stat-icon {
    width: 64px;
    height: 52px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--mp-brand), var(--mp-brand2));
    box-shadow: 0 14px 28px rgba(10,75,217,.18);
    flex: 0 0 auto;
}

    .mp-stat-icon svg {
        width: 26px;
        height: 26px;
    }

.mp-stat-value {
    font-weight: 1200;
    font-size: 28px;
    letter-spacing: -.6px;
    color: rgba(11,18,32,.92);
    min-width: 54px;
}

.mp-stat-text {
    line-height: 1.05;
}

.mp-stat-title {
    font-weight: 1100;
    color: rgba(11,18,32,.86);
    font-size: 14px;
}

.mp-stat-sub {
    font-weight: 1000;
    color: rgba(100,116,139,.95);
    font-size: 13px;
    margin-top: 4px;
}

/* responsive */
@media (max-width: 980px) {
    .mp-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .mp-stats-grid {
        grid-template-columns: 1fr;
    }

    .mp-stat-value {
        min-width: auto;
    }
}

/* ===== Feature section (screenshot-like) ===== */
.mp-feature {
    padding: 58px 0;
}

.mp-feature-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 34px;
    align-items: center;
}

/* Left */
.mp-feature-kicker {
    color: rgba(100,116,139,.95);
    font-weight: 900;
    margin-bottom: 8px;
}

.mp-feature-title {
    margin: 0 0 16px;
    color: var(--mp-ink);
    font-size: clamp(26px, 3.2vw, 44px);
    line-height: 1.12;
    letter-spacing: -.7px;
    font-weight: 600;
}

.mp-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: grid;
    gap: 10px;
    max-width: 68ch;
}

    .mp-feature-list li {
        position: relative;
        padding-left: 18px;
        color: var(--mp-text);
        font-weight: 600;
        line-height: 1.6;
    }

        .mp-feature-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: .62em;
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: rgba(16,185,129,.95); /* yeşil dot */
            box-shadow: 0 0 0 5px rgba(16,185,129,.14);
        }

.mp-feature-btn {
    padding: 12px 16px;
    border-radius: 999px;
}

/* Right mock */
.mp-feature-mock {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(15,23,42,.10);
    background: radial-gradient(700px 340px at 18% 20%, rgba(10,75,217,.18), transparent 60%), radial-gradient(620px 320px at 86% 18%, rgba(11,102,255,.14), transparent 60%), rgba(255,255,255,.70);
    box-shadow: 0 26px 90px rgba(2,10,25,.14);
    aspect-ratio: 4 / 3;
}

.mp-mock-mainimg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.03) contrast(1.02);
}

/* Cards */
.mp-mock-card {
    position: absolute;
    border-radius: 16px;
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 58px rgba(2,10,25,.12);
    padding: 12px;
}

.mp-mock-card--left {
    left: 14px;
    bottom: 14px;
    width: 190px;
}

.mp-mock-card--right {
    right: 14px;
    top: 14px;
    width: 220px;
}

.mp-mock-chip {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 1000;
    color: rgba(10,75,217,.95);
    background: rgba(10,75,217,.10);
    border: 1px solid rgba(10,75,217,.16);
    margin-bottom: 10px;
}

.mp-mock-row {
    font-weight: 900;
    font-size: 12px;
    color: rgba(11,18,32,.72);
    padding: 7px 8px;
    border-radius: 12px;
    background: rgba(2,10,25,.03);
    margin-top: 6px;
}

.mp-mock-title {
    font-weight: 1100;
    color: var(--mp-ink);
    font-size: 13px;
}

.mp-mock-sub {
    margin-top: 4px;
    color: rgba(100,116,139,.95);
    font-weight: 900;
    font-size: 12px;
    line-height: 1.4;
}

.mp-mock-mini {
    margin-top: 10px;
    display: grid;
    gap: 6px;
    color: rgba(11,18,32,.74);
    font-weight: 900;
    font-size: 12px;
}

.mp-mock-cta {
    display: inline-flex;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 1100;
    color: #fff;
    background: linear-gradient(135deg, var(--mp-brand), var(--mp-brand2));
    box-shadow: 0 14px 28px rgba(10,75,217,.18);
}

/* Popup */
.mp-mock-popup {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 14px;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 58px rgba(2,10,25,.12);
    padding: 10px 12px;
    width: min(260px, 86%);
}

.mp-mock-popup-top {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(11,18,32,.86);
    font-size: 12px;
    font-weight: 1100;
}

.mp-mock-popup-text {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 900;
    color: rgba(100,116,139,.95);
}

/* Responsive */
@media (max-width: 980px) {
    .mp-feature-grid {
        grid-template-columns: 1fr;
    }

    .mp-feature-mock {
        aspect-ratio: 16 / 10;
    }

    .mp-mock-card--left {
        width: 170px;
    }

    .mp-mock-card--right {
        width: 200px;
    }
}

@media (max-width: 520px) {
    .mp-mock-card--left,
    .mp-mock-card--right {
        display: none; /* mobilde sade kalsın */
    }
}

/* ===== Dynamic Integrations Section (dark card) ===== */
.mp-integrations {
    padding: 54px 0;
}

.mp-integ-card {
    position: relative;
    border-radius: 34px;
    overflow: hidden;
    /* border: 1px solid rgba(15, 23, 42, .14); */
    background: radial-gradient(900px 420px at 50% -10%, rgba(10, 75, 217, .26), transparent 58%), radial-gradient(700px 380px at 85% 35%, rgba(11, 102, 255, .14), transparent 60%), linear-gradient(180deg, #bac0f7, #2f43ff 68%);
    box-shadow: 0 26px 90px rgba(2, 10, 25, .22);
    min-height: 430px;
    padding: 42px 22px;
}

    /* subtle grid */
    .mp-integ-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
        background-size: 34px 34px;
        opacity: .22;
        mask-image: radial-gradient(circle at 50% 28%, #000 52%, transparent 78%);
        pointer-events: none;
    }

    /* orbit rings */
    .mp-integ-card::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 36%;
        width: 520px;
        height: 520px;
        transform: translate(-50%, -50%);
        background: radial-gradient(circle at center, transparent 44%, rgba(255,255,255,.10) 45% 46%, transparent 47%), radial-gradient(circle at center, transparent 60%, rgba(255,255,255,.08) 61% 62%, transparent 63%), radial-gradient(circle at center, transparent 76%, rgba(255,255,255,.06) 77% 78%, transparent 79%);
        opacity: .55;
        filter: blur(.1px);
        animation: mpIntegSpin 22s linear infinite;
        pointer-events: none;
    }

@keyframes mpIntegSpin {
    0% {
        transform: translate(-50%,-50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

/* center content */
.mp-integ-center {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    padding-top: 120px; /* üstte pill’lere alan */
}

.mp-integ-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgb(255 255 255 / 100%);
    font-weight: 1000;
    font-size: 12px;
}

.mp-integ-title {
    margin: 18px 0 10px;
    color: #fff;
    font-weight: 1200;
    letter-spacing: -.8px;
    line-height: 1.08;
    font-size: clamp(26px, 3.2vw, 46px);
}

.mp-integ-sub {
    margin: 0 auto;
    max-width: 62ch;
    color: rgba(255,255,255,.68);
    font-weight: 900;
    line-height: 1.7;
}

/* CTA button (dark-friendly) */
.mp-integ-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    padding: 12px 18px;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    font-weight: 1100;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(135deg, #000000, #4585f3);
    box-shadow: 0 18px 44px rgba(10,75,217,.28);
    transition: .18s ease;
}

    .mp-integ-btn:hover {
        transform: translateY(-1px);
        color: #fff;
    }

/* floating pills */
.mp-integ-floats {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.mp-integ-pill {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,23,42,.12);
    box-shadow: 0 16px 46px rgba(2,10,25,.22);
    transform: translateZ(0);
}

.mp-integ-ico {
    width: 34px;
    height: 28px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(10,75,217,.10);
    border: 1px solid rgba(10,75,217,.16);
    font-weight: 1200;
    color: rgba(11,18,32,.86);
    font-size: 12px;
}

.mp-integ-name {
    font-weight: 1100;
    color: rgba(11,18,32,.82);
    font-size: 12.5px;
    white-space: nowrap;
}

.mp-integ-pin {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(11,102,255,.75);
    box-shadow: 0 0 0 6px rgba(11,102,255,.14);
}

/* positions + motion */
.mp-p1 {
    left: 10%;
    top: 22%;
    animation: mpFloat1 4.8s ease-in-out infinite;
}

.mp-p2 {
    left: 34%;
    top: 10%;
    filter: blur(.2px);
    animation: mpFloat2 5.6s ease-in-out infinite;
}

.mp-p3 {
    right: 18%;
    top: 24%;
    animation: mpFloat3 5.2s ease-in-out infinite;
}

.mp-p4 {
    right: 24%;
    top: 36%;
    animation: mpFloat1 4.9s ease-in-out infinite;
}

@keyframes mpFloat1 {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes mpFloat2 {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(12px);
    }
}

@keyframes mpFloat3 {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

/* responsive */
@media (max-width: 980px) {
    .mp-integ-card {
        min-height: 380px;
    }

    .mp-integ-center {
        padding-top: 96px;
    }

    .mp-p2 {
        display: none;
    }
    /* mobilde sade */
    .mp-p4 {
        right: 12%;
        top: 40%;
    }

    .mp-integ-card::after {
        width: 420px;
        height: 420px;
    }
}

@media (max-width: 520px) {
    .mp-integ-card {
        border-radius: 26px;
        padding: 34px 16px;
    }

    .mp-integ-center {
        padding-top: 74px;
    }

    .mp-p1 {
        left: 8%;
        top: 16%;
    }

    .mp-p3 {
        right: 8%;
        top: 20%;
    }

    .mp-p4 {
        display: none;
    }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mp-integ-card::after,
    .mp-p1, .mp-p2, .mp-p3, .mp-p4 {
        animation: none !important;
    }
}