/* ============================================================================
 * Moxa Panel — Module Variants (Liquid Glass + 20 premium stilleri)
 * Sınıf sistemi:
 *   .mvar                            (her variant'lı modüle eklenir)
 *   .mvar--{id}                      (universal variant)
 *   .mvar-{moduleType}--{id}         (modül-spesifik özelleştirme)
 *   .mvar-tone--{tone}               (genel ton: dark | light | warm | cool | soft | vibrant | bold | neutral)
 *   .mvar-fx--{fx}                   (sürekli çalışan arka plan animasyonu)
 *
 * Bu dosya yalnızca *opsiyonel* katmandır — boş bırakılırsa eski stil korunur.
 * ========================================================================== */

/* ─── Ortak token'lar ─────────────────────────────────────────────────────── */
:root {
    --mvar-radius-lg: 24px;
    --mvar-radius-md: 16px;
    --mvar-shadow-glass: 0 8px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
    --mvar-shadow-deep: 0 30px 80px -20px rgba(0,0,0,.45);
    --mvar-glass-border: rgba(255,255,255,.18);
    --mvar-glass-bg: rgba(255,255,255,.08);
    --mvar-glass-blur: 18px;
    --mvar-easing: cubic-bezier(.21,.95,.27,1);
}

/* ─── Modül sarmalayıcı baz ───────────────────────────────────────────────── */
.mvar {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.mvar > * {
    position: relative;
    z-index: 1;
}

/* ─── Tone palet (renk + tipografi temelleri) ─────────────────────────────── */
.mvar-tone--dark    { color: #f5f7fb; }
.mvar-tone--dark a  { color: #fff; }
.mvar-tone--light   { color: #1f2937; }
.mvar-tone--warm    { color: #2a1e1a; }
.mvar-tone--cool    { color: #0e1a2c; }
.mvar-tone--soft    { color: #1c1f29; }
.mvar-tone--vibrant { color: #11071f; }
.mvar-tone--bold    { color: #050505; }

/* ============================================================================
 * 1) LIQUID GLASS — cam tabanlı modüller
 * ========================================================================== */
.mvar--glass {
    background: linear-gradient(135deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.30) 100%);
    -webkit-backdrop-filter: blur(var(--mvar-glass-blur)) saturate(160%);
    backdrop-filter: blur(var(--mvar-glass-blur)) saturate(160%);
    border-top: 1px solid rgba(255,255,255,.55);
    border-bottom: 1px solid rgba(255,255,255,.25);
    box-shadow: var(--mvar-shadow-glass);
    color: #0e1a2c;
}
.mvar--glass::before {
    content: "";
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(60% 60% at 18% 22%, rgba(120,180,255,.55) 0%, transparent 60%),
        radial-gradient(50% 50% at 80% 78%, rgba(255,160,220,.50) 0%, transparent 60%),
        radial-gradient(45% 45% at 50% 50%, rgba(180,255,220,.40) 0%, transparent 65%);
    filter: blur(60px);
    z-index: 0;
    animation: mvar-float-slow 22s ease-in-out infinite alternate;
}
.mvar--glass .pb-el,
.mvar--glass h1,
.mvar--glass h2,
.mvar--glass h3,
.mvar--glass p { text-shadow: 0 1px 0 rgba(255,255,255,.4); }

/* Cam kartlar — child cards otomatik camsı */
.mvar--glass [class*="rounded-2xl"],
.mvar--glass [class*="rounded-xl"],
.mvar--glass [class*="rounded-3xl"] {
    background: var(--mvar-glass-bg) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--mvar-glass-border) !important;
    box-shadow: 0 6px 18px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* ============================================================================
 * 2) GLASS DEEP — koyu cam (premium dark)
 * ========================================================================== */
.mvar--glass-deep {
    background: radial-gradient(140% 100% at 50% -10%, #1c1d29 0%, #08080d 60%);
    color: #f3f4f6;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.mvar--glass-deep::before {
    content: "";
    position: absolute; inset: -30%;
    background:
        radial-gradient(50% 50% at 30% 30%, rgba(99,102,241,.35) 0%, transparent 70%),
        radial-gradient(40% 40% at 70% 70%, rgba(236,72,153,.25) 0%, transparent 70%),
        radial-gradient(40% 40% at 50% 90%, rgba(34,211,238,.20) 0%, transparent 70%);
    filter: blur(70px);
    z-index: 0;
    animation: mvar-aurora-shift 28s ease-in-out infinite alternate;
}
.mvar--glass-deep [class*="rounded-2xl"],
.mvar--glass-deep [class*="rounded-xl"] {
    background: rgba(255,255,255,.04) !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: var(--mvar-shadow-deep), inset 0 1px 0 rgba(255,255,255,.06) !important;
    color: #e5e7eb;
}
.mvar--glass-deep h1,
.mvar--glass-deep h2,
.mvar--glass-deep h3 {
    color: #fafafa;
    text-shadow: 0 1px 24px rgba(99,102,241,.35);
}

/* ============================================================================
 * 3) AURORA — akışkan renkli akış
 * ========================================================================== */
.mvar--aurora {
    background: linear-gradient(135deg, #0a0a1f 0%, #1c0d2e 60%, #1f0838 100%);
    color: #f5f7ff;
    overflow: hidden;
}
.mvar--aurora::before,
.mvar--aurora::after {
    content: "";
    position: absolute;
    inset: -25%;
    background:
        radial-gradient(45% 45% at 25% 30%, rgba(34,211,238,.55) 0%, transparent 60%),
        radial-gradient(45% 45% at 75% 70%, rgba(168,85,247,.55) 0%, transparent 60%),
        radial-gradient(50% 50% at 50% 50%, rgba(244,114,182,.45) 0%, transparent 65%);
    filter: blur(80px);
    z-index: 0;
    animation: mvar-aurora-shift 18s ease-in-out infinite alternate;
}
.mvar--aurora::after {
    animation-delay: -9s;
    opacity: .65;
    transform: rotate(45deg);
}

/* ============================================================================
 * 4) MESH GRADIENT — yumuşak nokta mesh
 * ========================================================================== */
.mvar--mesh {
    background-color: #fafaff;
    background-image:
        radial-gradient(at 14% 22%, #d8e8ff 0%, transparent 50%),
        radial-gradient(at 84% 18%, #ffe1f4 0%, transparent 50%),
        radial-gradient(at 18% 84%, #d8fff0 0%, transparent 55%),
        radial-gradient(at 88% 86%, #fff4d6 0%, transparent 55%);
    color: #1f2937;
}
.mvar--mesh::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.6) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

/* ============================================================================
 * 5) NEON — koyu zemin + parlak konturlar
 * ========================================================================== */
.mvar--neon {
    background: radial-gradient(140% 100% at 50% 0%, #0d0a1a 0%, #04030a 60%);
    color: #e2e8f0;
}
.mvar--neon h1,
.mvar--neon h2,
.mvar--neon h3 {
    background: linear-gradient(90deg, #f0abfc 0%, #c084fc 50%, #7dd3fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 24px rgba(192,132,252,.45);
}
.mvar--neon [class*="rounded-2xl"],
.mvar--neon [class*="rounded-xl"] {
    background: rgba(15,11,30,.6) !important;
    border: 1px solid rgba(192,132,252,.35) !important;
    box-shadow:
        0 0 0 1px rgba(192,132,252,.18),
        0 12px 40px rgba(192,132,252,.20),
        inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.mvar--neon a,
.mvar--neon button,
.mvar--neon .btn-primary {
    box-shadow: 0 0 18px rgba(192,132,252,.45);
}

/* ============================================================================
 * 6) BRUTAL — brutalist sert kontur + ofset gölge
 * ========================================================================== */
.mvar--brutal {
    background: #fde68a;
    color: #111827;
    border-top: 6px solid #111;
    border-bottom: 6px solid #111;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}
.mvar--brutal h1,
.mvar--brutal h2,
.mvar--brutal h3 {
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #111;
}
.mvar--brutal [class*="rounded-2xl"],
.mvar--brutal [class*="rounded-xl"] {
    border-radius: 0 !important;
    background: #fff !important;
    border: 3px solid #111 !important;
    box-shadow: 6px 6px 0 #111 !important;
    transition: transform .25s var(--mvar-easing);
}
.mvar--brutal [class*="rounded-2xl"]:hover,
.mvar--brutal [class*="rounded-xl"]:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 #111 !important;
}

/* ============================================================================
 * 7) EDITORIAL — magazin tipografisi
 * ========================================================================== */
.mvar--editorial {
    background: #faf8f3;
    color: #1f2937;
    font-family: 'Playfair Display', Georgia, serif;
}
.mvar--editorial h1,
.mvar--editorial h2,
.mvar--editorial h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    letter-spacing: -0.03em;
}
.mvar--editorial h2 {
    border-top: 2px solid #111;
    border-bottom: 2px solid #111;
    display: inline-block;
    padding: 6px 18px;
    margin-inline: auto;
}
.mvar--editorial p {
    font-family: 'Georgia', serif;
    line-height: 1.75;
}

/* ============================================================================
 * 8) NEUMORPHISM — soft kabarık yüzey
 * ========================================================================== */
.mvar--neumorph {
    background: #e8eaf0;
    color: #1e293b;
}
.mvar--neumorph [class*="rounded-2xl"],
.mvar--neumorph [class*="rounded-xl"] {
    background: #e8eaf0 !important;
    border: none !important;
    box-shadow: 10px 10px 24px #c5c7cc, -10px -10px 24px #ffffff !important;
}
.mvar--neumorph [class*="rounded-2xl"]:hover,
.mvar--neumorph [class*="rounded-xl"]:hover {
    box-shadow: inset 6px 6px 16px #c5c7cc, inset -6px -6px 16px #ffffff !important;
}

/* ============================================================================
 * 9) MAGAZINE — asimetrik layout
 * ========================================================================== */
.mvar--magazine {
    background: #f4f1eb;
    color: #1f2937;
    font-family: 'Inter', system-ui, sans-serif;
}
.mvar--magazine h1,
.mvar--magazine h2 {
    font-family: 'Playfair Display', Georgia, serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.mvar--magazine [class*="rounded-2xl"],
.mvar--magazine [class*="rounded-xl"] {
    border-radius: 6px !important;
    background: #fff !important;
    border: 1px solid #e5e1d9 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}
.mvar--magazine .grid > *:nth-child(3n+1) { transform: translateY(0); }
.mvar--magazine .grid > *:nth-child(3n+2) { transform: translateY(24px); }
.mvar--magazine .grid > *:nth-child(3n)   { transform: translateY(-12px); }

/* ============================================================================
 * 10) HOLOGRAPHIC — gökkuşağı akış
 * ========================================================================== */
.mvar--holographic {
    background: #0a0a14;
    color: #fafafa;
}
.mvar--holographic::before {
    content: "";
    position: absolute; inset: -30%;
    background:
        conic-gradient(from 0deg, #f0abfc, #c084fc, #38bdf8, #34d399, #fde047, #fb923c, #f43f5e, #f0abfc);
    filter: blur(120px) opacity(.55);
    z-index: 0;
    animation: mvar-spin-slow 30s linear infinite;
}
.mvar--holographic h1,
.mvar--holographic h2 {
    background: linear-gradient(90deg, #f0abfc, #38bdf8, #fde047, #f0abfc);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: mvar-shimmer 6s linear infinite;
}

/* ============================================================================
 * 11) PRISM — gökkuşağı kenarlı
 * ========================================================================== */
.mvar--prism {
    background: #0c0c14;
    color: #f5f7fb;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    background-image:
        linear-gradient(#0c0c14, #0c0c14),
        linear-gradient(90deg, #f43f5e, #fde047, #34d399, #38bdf8, #c084fc, #f43f5e);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
.mvar--prism h1,
.mvar--prism h2 {
    background: linear-gradient(90deg, #f0abfc, #38bdf8, #fde047);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ============================================================================
 * 12) DARK LUXE — kurumsal koyu + altın
 * ========================================================================== */
.mvar--dark-luxe {
    background:
        linear-gradient(180deg, rgba(255,184,0,.04) 0%, transparent 30%),
        radial-gradient(120% 80% at 50% 0%, #1c1610 0%, #060503 70%);
    color: #f5f1e6;
}
.mvar--dark-luxe h1,
.mvar--dark-luxe h2,
.mvar--dark-luxe h3 {
    color: #fef3c7;
}
.mvar--dark-luxe [class*="rounded-2xl"],
.mvar--dark-luxe [class*="rounded-xl"] {
    background: rgba(255,255,255,.02) !important;
    border: 1px solid rgba(254,243,199,.12) !important;
    box-shadow: 0 22px 60px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,184,0,.06) !important;
}
.mvar--dark-luxe a,
.mvar--dark-luxe .btn-primary {
    color: #fef3c7;
}

/* ============================================================================
 * 13) MINIMAL — bol boşluk, sade
 * ========================================================================== */
.mvar--minimal {
    background: #ffffff;
    color: #1f2937;
}
.mvar--minimal h1,
.mvar--minimal h2,
.mvar--minimal h3 {
    font-weight: 300;
    letter-spacing: -0.04em;
}
.mvar--minimal [class*="rounded-2xl"],
.mvar--minimal [class*="rounded-xl"] {
    background: #fff !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: none !important;
    transition: border-color .3s ease;
}
.mvar--minimal [class*="rounded-2xl"]:hover { border-color: #1f2937 !important; }

/* ============================================================================
 * 14) TERMINAL — mono yazı, mat siyah
 * ========================================================================== */
.mvar--terminal {
    background: #050505;
    color: #4ade80;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, monospace;
}
.mvar--terminal h1,
.mvar--terminal h2,
.mvar--terminal h3 {
    color: #86efac;
    font-family: inherit;
    font-weight: 700;
}
.mvar--terminal h2::before { content: "$ "; opacity: .6; }
.mvar--terminal [class*="rounded-2xl"],
.mvar--terminal [class*="rounded-xl"] {
    background: #0a0a0a !important;
    border: 1px solid #1f2937 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: #d1d5db;
}

/* ============================================================================
 * 15) PASTEL — yumuşak pastel tonlar
 * ========================================================================== */
.mvar--pastel {
    background: linear-gradient(135deg, #fce7f3 0%, #e0f2fe 50%, #ecfccb 100%);
    color: #4c1d95;
}
.mvar--pastel h1,
.mvar--pastel h2,
.mvar--pastel h3 { color: #6d28d9; }
.mvar--pastel [class*="rounded-2xl"],
.mvar--pastel [class*="rounded-xl"] {
    background: rgba(255,255,255,.7) !important;
    border: 1px solid rgba(255,255,255,.9) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ============================================================================
 * 16) SUNSET — gün batımı geçiş
 * ========================================================================== */
.mvar--sunset {
    background: linear-gradient(160deg, #ff6b6b 0%, #f06292 35%, #845ec2 75%, #2d3561 100%);
    color: #fff;
}
.mvar--sunset h1,
.mvar--sunset h2 { text-shadow: 0 4px 24px rgba(0,0,0,.25); }
.mvar--sunset [class*="rounded-2xl"],
.mvar--sunset [class*="rounded-xl"] {
    background: rgba(255,255,255,.12) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.18) !important;
    color: #fff;
}

/* ============================================================================
 * 17) OCEAN — mavi-camgöbeği
 * ========================================================================== */
.mvar--ocean {
    background: linear-gradient(160deg, #0ea5e9 0%, #0891b2 50%, #064e3b 100%);
    color: #ecfeff;
}
.mvar--ocean::before {
    content: "";
    position: absolute; inset: -20%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.22) 0%, transparent 65%);
    filter: blur(60px);
    animation: mvar-float-slow 16s ease-in-out infinite alternate;
    z-index: 0;
}

/* ============================================================================
 * 18) MONO INK — siyah-beyaz sert kontrast
 * ========================================================================== */
.mvar--mono-ink {
    background: #fafafa;
    color: #050505;
    border-top: 1px solid #050505;
    border-bottom: 1px solid #050505;
}
.mvar--mono-ink h1,
.mvar--mono-ink h2 {
    font-weight: 900;
    letter-spacing: -0.05em;
    color: #050505;
}
.mvar--mono-ink [class*="rounded-2xl"],
.mvar--mono-ink [class*="rounded-xl"] {
    background: #fff !important;
    border: 1px solid #050505 !important;
    box-shadow: 4px 4px 0 #050505 !important;
    border-radius: 0 !important;
}

/* ============================================================================
 * 19) CYBER — cyberpunk parlak kontur
 * ========================================================================== */
.mvar--cyber {
    background: linear-gradient(180deg, #050008 0%, #14012c 100%);
    color: #f0abfc;
}
.mvar--cyber h1,
.mvar--cyber h2 {
    color: #fff;
    text-shadow: 0 0 20px #f0abfc, 0 0 40px #c084fc;
    letter-spacing: -0.02em;
}
.mvar--cyber [class*="rounded-2xl"],
.mvar--cyber [class*="rounded-xl"] {
    background: rgba(20,1,44,.55) !important;
    border: 1px solid #f0abfc !important;
    box-shadow:
        inset 0 0 12px rgba(240,171,252,.25),
        0 0 24px rgba(240,171,252,.30) !important;
    color: #f5d0fe;
}

/* ============================================================================
 * 20) CLASSIC — kurumsal sade (eski tasarımla en uyumlu)
 *      Bu variant başka stilleri override etmez, sadece sınıf eklenir.
 * ========================================================================== */
.mvar--classic { /* hiçbir override yok — saf classic */ }

/* ============================================================================
 *  Modül-spesifik küçük override'lar
 * ========================================================================== */

/* Hero — split image */
.mvar-hero--split-image .pb-hero { min-height: 78vh; }

/* Stats — orbits */
.mvar-stats--orbits .pb-el { animation: mvar-tilt-3d 12s ease-in-out infinite; }

/* Testimonials — card-stack */
.mvar-testimonials--card-stack .grid > * { transform: rotate(-2deg); transition: transform .4s var(--mvar-easing); }
.mvar-testimonials--card-stack .grid > *:nth-child(2n) { transform: rotate(2deg); }
.mvar-testimonials--card-stack .grid > *:hover { transform: rotate(0) translateY(-6px) scale(1.03); z-index: 2; }

/* card_carousel — cinematic snap */
.mvar-card_carousel--cinematic-snap {
    padding-block: clamp(1.5rem, 4vw, 3rem);
}
.mvar-card_carousel--cinematic-snap .pb-cc-title {
    letter-spacing: -0.02em;
}

/* Pricing — glow-card */
.mvar-pricing--glow-card .grid > *:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px -20px rgba(99,102,241,.45) !important;
}

/* Gallery — masonry */
.mvar-gallery--masonry .grid { column-count: 3; column-gap: 1rem; display: block !important; }
.mvar-gallery--masonry .grid > * { display: inline-block; width: 100%; margin-bottom: 1rem; break-inside: avoid; }
@media (max-width: 768px) { .mvar-gallery--masonry .grid { column-count: 2; } }
@media (max-width: 480px) { .mvar-gallery--masonry .grid { column-count: 1; } }

/* Logo wall — marquee-inf */
.mvar-logo_wall--marquee-inf .grid {
    display: flex !important; flex-wrap: nowrap;
    animation: mvar-marquee-x 30s linear infinite;
    width: max-content;
}

/* Timeline — horizontal */
.mvar-timeline--horizontal ol { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 1.5rem; border-left: none !important; padding-top: 2rem; overflow-x: auto; }
.mvar-timeline--horizontal ol li { padding-left: 0 !important; border-top: 2px solid currentColor; padding-top: 1.5rem; opacity: .85; }
.mvar-timeline--horizontal ol li > span:first-child { position: relative !important; left: 0 !important; top: -1.6rem !important; }

/* Marquee — tilted */
.mvar-marquee--tilted { transform: rotate(-2deg); }

/* Banner — hover reveal */
.mvar-banner_blocks--hover-reveal a:hover img { transform: scale(1.1) rotate(-1deg); }

/* ============================================================================
 *  Arka plan FX (sürekli çalışan animasyonlar)
 * ========================================================================== */

/* BLOB — uçuşan camsı blob'lar */
.mvar-fx--blob::after {
    content: "";
    position: absolute; inset: -10%;
    background:
        radial-gradient(34% 34% at 20% 30%, rgba(120,180,255,.50) 0%, transparent 60%),
        radial-gradient(28% 28% at 80% 70%, rgba(255,160,220,.45) 0%, transparent 60%),
        radial-gradient(36% 36% at 50% 90%, rgba(180,255,220,.45) 0%, transparent 60%);
    filter: blur(45px);
    z-index: 0;
    pointer-events: none;
    animation: mvar-blob-drift 24s ease-in-out infinite alternate;
}

/* AURORA — akan aurora */
.mvar-fx--aurora::after {
    content: "";
    position: absolute; inset: -25%;
    background:
        radial-gradient(40% 40% at 25% 30%, rgba(34,211,238,.45) 0%, transparent 60%),
        radial-gradient(40% 40% at 75% 70%, rgba(168,85,247,.45) 0%, transparent 60%);
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
    animation: mvar-aurora-shift 20s ease-in-out infinite alternate;
}

/* MESH — dolaşan mesh ışıkları */
.mvar-fx--mesh::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(40% 40% at var(--mx,30%) var(--my,30%), rgba(255,255,255,.18) 0%, transparent 65%),
        radial-gradient(40% 40% at calc(100% - var(--mx,30%)) calc(100% - var(--my,30%)), rgba(255,255,255,.12) 0%, transparent 65%);
    z-index: 0;
    pointer-events: none;
    animation: mvar-mesh-wander 18s ease-in-out infinite alternate;
}

/* GRID — yavaşça akan çizgi grid */
.mvar-fx--grid::before {
    content: "";
    position: absolute; inset: -2px;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: mvar-grid-drift 22s linear infinite;
    z-index: 0;
    pointer-events: none;
    mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 90%);
    -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 90%);
}

/* DOTS — nokta deseni nabız */
.mvar-fx--dots::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
    background-size: 18px 18px;
    z-index: 0;
    pointer-events: none;
    animation: mvar-dot-pulse 8s ease-in-out infinite alternate;
    mask-image: radial-gradient(80% 80% at 50% 50%, #000 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 0%, transparent 100%);
}

/* NOISE — ince film grain */
.mvar-fx--noise::after {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: .12;
    mix-blend-mode: overlay;
    z-index: 0;
    pointer-events: none;
    animation: mvar-noise-shift 1.4s steps(6) infinite;
}

/* HOLO — yavaş dönen konik renk */
.mvar-fx--holo::before {
    content: "";
    position: absolute; inset: -30%;
    background: conic-gradient(from 0deg, #f0abfc, #c084fc, #38bdf8, #34d399, #fde047, #fb923c, #f43f5e, #f0abfc);
    filter: blur(100px) opacity(.4);
    z-index: 0;
    pointer-events: none;
    animation: mvar-spin-slow 30s linear infinite;
}

/* ============================================================================
 *  Keyframes
 * ========================================================================== */
@keyframes mvar-float-slow {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-2%, 3%, 0) scale(1.05); }
}
@keyframes mvar-blob-drift {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(2%, -3%, 0) rotate(8deg) scale(1.06); }
    100% { transform: translate3d(-3%, 4%, 0) rotate(-6deg) scale(1.08); }
}
@keyframes mvar-aurora-shift {
    0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); opacity: .9; }
    50%  { transform: translate3d(2%,-2%,0) rotate(20deg) scale(1.1); opacity: 1; }
    100% { transform: translate3d(-3%,3%,0) rotate(-15deg) scale(1.05); opacity: .85; }
}
@keyframes mvar-mesh-wander {
    0%   { --mx: 20%; --my: 30%; }
    50%  { --mx: 70%; --my: 50%; }
    100% { --mx: 35%; --my: 70%; }
}
@property --mx { syntax: '<percentage>'; inherits: false; initial-value: 30%; }
@property --my { syntax: '<percentage>'; inherits: false; initial-value: 30%; }

@keyframes mvar-grid-drift {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 40px 40px, 40px 40px; }
}
@keyframes mvar-dot-pulse {
    0%   { opacity: .55; }
    100% { opacity: 1; }
}
@keyframes mvar-noise-shift {
    0% { transform: translate(0,0); }
    100% { transform: translate(-5%,5%); }
}
@keyframes mvar-spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes mvar-shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}
@keyframes mvar-tilt-3d {
    0%, 100% { transform: perspective(1000px) rotateY(-3deg) rotateX(2deg); }
    50%      { transform: perspective(1000px) rotateY(3deg) rotateX(-2deg); }
}
@keyframes mvar-marquee-x {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* ============================================================================
 *  Reduced motion — animasyonları durdur
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .mvar-fx--blob::after,
    .mvar-fx--aurora::after,
    .mvar-fx--mesh::after,
    .mvar-fx--grid::before,
    .mvar-fx--dots::before,
    .mvar-fx--noise::after,
    .mvar-fx--holo::before,
    .mvar--glass::before,
    .mvar--glass-deep::before,
    .mvar--aurora::before,
    .mvar--aurora::after,
    .mvar--ocean::before,
    .mvar--holographic::before,
    .mvar--holographic h1,
    .mvar--holographic h2,
    .mvar-stats--orbits .pb-el {
        animation: none !important;
    }
}

/* ============================================================================
 *  Mobil için optimizasyon (büyük blur'lar pahalı)
 * ========================================================================== */
@media (max-width: 640px) {
    .mvar--glass,
    .mvar--glass-deep,
    .mvar--aurora,
    .mvar-fx--blob::after,
    .mvar-fx--aurora::after { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    .mvar-fx--blob::after,
    .mvar-fx--aurora::after,
    .mvar-fx--mesh::after { filter: blur(30px); }
}