/*
 * SunucuRadar Analiz Et profesyonel mobil sayfası.
 * Analiz işlemleri ve formlar değiştirilmez.
 */

@media (max-width: 760px) {
    body:has(.sr-analyze-page) {
        overflow-x: hidden !important;
    }

    body:has(.sr-analyze-page)
    main.container {
        width: calc(100% - 104px) !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 8px 0 18px !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page {
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 12px !important;
        overflow: hidden !important;
        border:
            1px solid rgba(74, 222, 128, .20) !important;
        border-radius: 18px !important;
        background:
            radial-gradient(
                circle at 15% 0,
                rgba(34, 197, 94, .15),
                transparent 32%
            ),
            radial-gradient(
                circle at 100% 8%,
                rgba(56, 189, 248, .09),
                transparent 30%
            ),
            linear-gradient(
                155deg,
                rgba(10, 25, 43, .97),
                rgba(3, 10, 23, .98)
            ) !important;
        box-shadow:
            0 18px 48px rgba(0, 0, 0, .30),
            inset 0 1px 0 rgba(255, 255, 255, .035)
            !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        pointer-events: none !important;
        opacity: .08 !important;
        background-image:
            linear-gradient(
                rgba(134, 239, 172, .18) 1px,
                transparent 1px
            ),
            linear-gradient(
                90deg,
                rgba(134, 239, 172, .18) 1px,
                transparent 1px
            ) !important;
        background-size: 26px 26px !important;
        mask-image:
            linear-gradient(
                to bottom,
                #000,
                transparent 72%
            ) !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page > * {
        position: relative !important;
        z-index: 1 !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page .badge {
        min-height: 22px !important;
        margin: 0 0 7px !important;
        padding: 5px 8px !important;
        gap: 5px !important;
        border:
            1px solid rgba(74, 222, 128, .24) !important;
        border-radius: 999px !important;
        color: #86efac !important;
        background: rgba(34, 197, 94, .10) !important;
        font-size: 7px !important;
        font-weight: 900 !important;
        letter-spacing: .04em !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page h1 {
        max-width: 100% !important;
        margin: 0 0 7px !important;
        color: #f8fafc !important;
        font-size: clamp(20px, 7vw, 27px) !important;
        font-weight: 1000 !important;
        line-height: 1.02 !important;
        letter-spacing: -.9px !important;
        overflow-wrap: anywhere !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page > p {
        margin: 0 !important;
        color: #aab6c7 !important;
        font-size: 8.5px !important;
        line-height: 1.48 !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page .form {
        margin: 10px 0 0 !important;
        padding: 9px !important;
        display: grid !important;
        gap: 7px !important;
        border:
            1px solid rgba(148, 163, 184, .14) !important;
        border-radius: 12px !important;
        background:
            linear-gradient(
                145deg,
                rgba(4, 19, 33, .80),
                rgba(2, 8, 18, .74)
            ) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .02)
            !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page .form-row {
        gap: 5px !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page label {
        color: #d7e1ee !important;
        font-size: 8px !important;
        font-weight: 900 !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page input,
    body:has(.sr-analyze-page)
    .sr-analyze-page select {
        min-height: 38px !important;
        padding: 8px 10px !important;
        border:
            1px solid rgba(148, 163, 184, .18) !important;
        border-radius: 9px !important;
        color: #f1f5f9 !important;
        background: rgba(2, 8, 18, .84) !important;
        font-size: 9px !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page input::placeholder {
        color: #66758a !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page input:focus,
    body:has(.sr-analyze-page)
    .sr-analyze-page select:focus {
        border-color:
            rgba(74, 222, 128, .58) !important;
        box-shadow:
            0 0 0 3px rgba(34, 197, 94, .11)
            !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page .actions {
        margin: 0 !important;
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page .actions button,
    body:has(.sr-analyze-page)
    .sr-analyze-page .actions .button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 34px !important;
        padding: 7px 8px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 9px !important;
        font-size: 8px !important;
        line-height: 1.15 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page .actions button {
        color: #03150a !important;
        background:
            linear-gradient(
                135deg,
                #86efac,
                #22c55e
            ) !important;
        box-shadow:
            0 7px 18px rgba(34, 197, 94, .17)
            !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page .feature-grid,
    body:has(.sr-analyze-page)
    .sr-analyze-page .result-grid {
        margin: 10px 0 0 !important;
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page .feature,
    body:has(.sr-analyze-page)
    .sr-analyze-page .result-item {
        min-width: 0 !important;
        min-height: 62px !important;
        padding: 8px !important;
        display: grid !important;
        align-content: center !important;
        gap: 4px !important;
        overflow: hidden !important;
        border:
            1px solid rgba(148, 163, 184, .12) !important;
        border-radius: 9px !important;
        background:
            radial-gradient(
                circle at 100% 0,
                rgba(34, 197, 94, .07),
                transparent 44%
            ),
            rgba(2, 8, 18, .48) !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page .feature strong,
    body:has(.sr-analyze-page)
    .sr-analyze-page .result-item strong {
        margin: 0 !important;
        overflow: hidden !important;
        color: #86efac !important;
        font-size: 8px !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page .feature span,
    body:has(.sr-analyze-page)
    .sr-analyze-page .result-item span {
        color: #8f9caf !important;
        font-size: 6.5px !important;
        line-height: 1.35 !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page .motd,
    body:has(.sr-analyze-page)
    .sr-analyze-page .notice,
    body:has(.sr-analyze-page)
    .sr-analyze-page .success,
    body:has(.sr-analyze-page)
    .sr-analyze-page .empty {
        margin-top: 8px !important;
        padding: 8px !important;
        border-radius: 9px !important;
        font-size: 7px !important;
        line-height: 1.4 !important;
    }

    body:has(.sr-analyze-page)
    .sr-ad-mobile-card {
        width: 42px !important;
        min-width: 42px !important;
        height: 230px !important;
        min-height: 230px !important;
        top: 82px !important;
        border-radius: 13px !important;
    }

    body:has(.sr-analyze-page)
    .sr-ad-mobile-card-left {
        left: 4px !important;
    }

    body:has(.sr-analyze-page)
    .sr-ad-mobile-card-right {
        right: 4px !important;
    }

    body:has(.sr-analyze-page)
    .sr-ad-mobile-card > .sr-ad-empty::before {
        width: 29px !important;
        height: 29px !important;
        min-height: 29px !important;
        border-radius: 8px !important;
        font-size: 10px !important;
    }

    body:has(.sr-analyze-page)
    .sr-ad-mobile-card .sr-ad-open,
    body:has(.sr-analyze-page)
    .sr-ad-mobile-card .sr-ad-buy,
    body:has(.sr-analyze-page)
    .sr-ad-mobile-card > .sr-ad-empty .sr-ad-buy {
        min-width: 27px !important;
        min-height: 60px !important;
        padding: 5px 2px !important;
        border-radius: 8px !important;
        font-size: 7px !important;
    }
}

@media (max-width: 420px) {
    body:has(.sr-analyze-page)
    main.container {
        width: calc(100% - 92px) !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page {
        padding: 10px !important;
        border-radius: 16px !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page h1 {
        font-size: clamp(19px, 7vw, 24px) !important;
    }

    body:has(.sr-analyze-page)
    .sr-analyze-page .feature-grid,
    body:has(.sr-analyze-page)
    .sr-analyze-page .result-grid {
        grid-template-columns: 1fr !important;
    }

    body:has(.sr-analyze-page)
    .sr-ad-mobile-card {
        width: 38px !important;
        min-width: 38px !important;
        height: 215px !important;
        min-height: 215px !important;
    }
}