/**
 * ParaXTR — Mobil Tema (sadece ≤768px)
 * Ana uygulama kabuğu: ferah, aydınlık arka plan.
 * Masaüstünde yüklenmez / uygulanmaz.
 */

@media (max-width: 768px) {
    :root {
        --bg-dark: #eef6ff;
        --glass: rgba(255, 255, 255, 0.82);
        --border: rgba(148, 163, 184, 0.22);
        --mob-surface: rgba(255, 255, 255, 0.88);
        --mob-text: #0f172a;
        --mob-muted: #64748b;
    }

    html,
    body {
        background-color: #f0f9ff !important;
        background-image:
            linear-gradient(
                165deg,
                #ffffff 0%,
                #ecfeff 28%,
                #f5f3ff 58%,
                #fff7ed 100%
            ) !important;
    }

    body > .parax-global-background {
        background-color: transparent !important;
        background-image:
            radial-gradient(ellipse 130% 90% at -10% -5%, rgba(56, 189, 248, 0.55) 0%, transparent 52%),
            radial-gradient(ellipse 100% 75% at 105% 10%, rgba(167, 139, 250, 0.45) 0%, transparent 48%),
            radial-gradient(ellipse 90% 70% at 50% 105%, rgba(251, 191, 36, 0.32) 0%, transparent 52%),
            radial-gradient(ellipse 70% 55% at 85% 90%, rgba(244, 114, 182, 0.28) 0%, transparent 50%),
            radial-gradient(ellipse 80% 60% at 20% 80%, rgba(52, 211, 153, 0.22) 0%, transparent 45%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(240, 249, 255, 0.35) 100%) !important;
        opacity: 1 !important;
        filter: saturate(1.12) !important;
        animation: mob-theme-aurora 20s ease-in-out infinite alternate;
    }

    @keyframes mob-theme-aurora {
        0% {
            transform: scale(1) translate(0, 0);
            filter: saturate(1.05) brightness(1);
        }
        50% {
            transform: scale(1.04) translate(-1.5%, 1%);
            filter: saturate(1.18) brightness(1.03);
        }
        100% {
            transform: scale(1.02) translate(1%, -0.5%);
            filter: saturate(1.12) brightness(1.02);
        }
    }

    .fixed-bg-mesh {
        opacity: 0.35 !important;
        filter: blur(90px) saturate(1.6) !important;
        background-color: transparent !important;
        background-image:
            radial-gradient(circle at 15% 25%, rgba(56, 189, 248, 0.55) 0%, transparent 42%),
            radial-gradient(circle at 85% 75%, rgba(236, 72, 153, 0.4) 0%, transparent 42%),
            radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.25) 0%, transparent 50%) !important;
    }

    #auth-guard-overlay {
        background: rgba(240, 249, 255, 0.94) !important;
    }

    #auth-guard-overlay p {
        color: rgba(15, 23, 42, 0.5) !important;
    }

    header.premium-header {
        background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(255, 255, 255, 0.82) 100%
        ) !important;
        border: 1px solid rgba(255, 255, 255, 0.95) !important;
        box-shadow:
            0 10px 40px rgba(56, 189, 248, 0.14),
            0 4px 16px rgba(167, 139, 250, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 1) !important;
        backdrop-filter: blur(22px) saturate(1.45) !important;
        -webkit-backdrop-filter: blur(22px) saturate(1.45) !important;
    }

    header button.text-white,
    header a.text-white,
    header #logoutBtn {
        color: #475569 !important;
    }

    header button.text-white:hover,
    header a.text-white:hover {
        color: #0891b2 !important;
    }

    header #logoutBtn:hover {
        color: #ef4444 !important;
    }

    header .logo-aura {
        color: #0f172a !important;
        text-shadow: none !important;
        animation: none !important;
    }

    header .logo-aura span {
        animation: none !important;
        text-shadow: none !important;
    }

    /* Logo X — açık cyan beyaz barda okunmuyor */
    header .logo-aura span.text-\[\#00ffff\] {
        color: #0369a1 !important;
    }

    /* Sayfa üst başlıkları — açık zemin üzerinde (kart dışı) */
    #dynamic-content .flex.items-center.justify-center.gap-2 > h2.text-white,
    #dynamic-content .flex.items-center.justify-center.gap-2 > h1.text-white {
        color: #0f172a !important;
    }

    #dynamic-content .tasks-section-bar__title {
        color: #0f172a !important;
    }

    #dynamic-content .tasks-section-bar__sub {
        color: #64748b !important;
    }

    /* Görevler — bölüm etiketleri (Öne Çıkan, Hızlı Operasyonlar) */
    #dynamic-content .tasks-hub-mini-label {
        color: #475569 !important;
    }

    /* Görevler — geri butonu (Reklam vb. alt sayfalar) */
    #dynamic-content .tasks-hub-back {
        color: #475569 !important;
        border-color: rgba(148, 163, 184, 0.35) !important;
        background: rgba(255, 255, 255, 0.82) !important;
        box-shadow: 0 2px 10px rgba(148, 163, 184, 0.12) !important;
    }

    #dynamic-content .tasks-hub-back:hover {
        color: #0891b2 !important;
        background: rgba(236, 254, 255, 0.95) !important;
        border-color: rgba(56, 189, 248, 0.4) !important;
    }

    /* Görevler → Reklam — üst istatistik bandı (0/20, +50, 15s) */
    #dynamic-content .parax-ads__stat {
        background: rgba(255, 255, 255, 0.82) !important;
        border-color: rgba(148, 163, 184, 0.22) !important;
    }

    #dynamic-content .parax-ads__stat strong {
        color: #0f172a !important;
    }

    #dynamic-content .parax-ads__stat span {
        color: #64748b !important;
    }

    #dynamic-content .parax-ads__stat--gold {
        border-color: rgba(251, 191, 36, 0.45) !important;
        background: rgba(254, 243, 199, 0.55) !important;
    }

    #dynamic-content .parax-ads__stat--gold strong {
        color: #b45309 !important;
    }

    #dynamic-content .parax-ads__device {
        color: #64748b !important;
    }

    #dynamic-content .parax-ads__progress {
        background: rgba(148, 163, 184, 0.28) !important;
    }

    #dynamic-content .parax-ads__empty {
        background: rgba(255, 255, 255, 0.78) !important;
        border-color: rgba(148, 163, 184, 0.3) !important;
    }

    #dynamic-content .parax-ads__empty p {
        color: #334155 !important;
    }

    #dynamic-content .parax-ads__empty small {
        color: #64748b !important;
    }

    header .coin-card {
        background: rgba(255, 255, 255, 0.9) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        box-shadow:
            0 4px 18px rgba(56, 189, 248, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    }

    header .coin-card .text-\[9px\] {
        color: #94a3b8 !important;
    }

    #coin-count {
        color: #0f172a !important;
        text-shadow: none !important;
    }

    #main-scroller,
    #page-content-wrap {
        background: transparent !important;
    }

    footer.flex-none,
    #mobile-footer {
        background: rgba(255, 255, 255, 0.9) !important;
        border-top-color: rgba(148, 163, 184, 0.18) !important;
        backdrop-filter: blur(22px) saturate(1.35) !important;
        -webkit-backdrop-filter: blur(22px) saturate(1.35) !important;
        box-shadow: 0 -6px 28px rgba(167, 139, 250, 0.1) !important;
    }

    footer .mobile-btn i {
        color: #94a3b8 !important;
        opacity: 1 !important;
    }

    footer .mobile-btn.active i {
        color: #0891b2 !important;
        text-shadow: 0 0 14px rgba(8, 145, 178, 0.4) !important;
    }

    footer .mobile-btn--center {
        background: linear-gradient(145deg, #ffffff 0%, #ecfeff 100%) !important;
        border-color: rgba(56, 189, 248, 0.35) !important;
        box-shadow:
            0 10px 32px rgba(56, 189, 248, 0.22),
            0 0 24px rgba(0, 255, 255, 0.12) !important;
    }

    footer .mobile-btn--center i {
        color: #0891b2 !important;
        opacity: 1 !important;
    }

    footer .mobile-btn .border-\[\#0A0B0E\] {
        border-color: #ffffff !important;
    }

    #dynamic-content > .flex.justify-center.items-center.min-h-\[40vh\] p {
        color: #64748b !important;
    }

    /* Cüzdan — logo bar ile başlık arası */
    #main-scroller:has(.wallet-mobile-page) {
        padding-top: 0.35rem !important;
    }

    #page-content-wrap:has(.wallet-mobile-page) {
        padding-top: 0.25rem !important;
    }

    #dynamic-content .wallet-mobile-page .wallet-page-head {
        margin-top: -0.15rem !important;
        margin-bottom: 0.5rem !important;
    }

    #dynamic-content .wallet-mobile-page .wallet-page-head__title {
        color: #0f172a !important;
    }
}