/*
 * SunucuRadar sunucu detay premium mobil üst tasarımı.
 *
 * Kapsam:
 * - Reklamlar arasında okunabilir içerik genişliği
 * - Kompakt sunucu kimliği
 * - 2x2 hero istatistikleri
 * - Yatay mobil sekme navigasyonu
 *
 * Galeri, açıklama, sidebar, footer ve işlevler korunur.
 */

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

    body:has(.sr-detail-card) main.container {
        width: calc(100% - 84px) !important;
        max-width: none !important;
        margin: 8px auto 0 !important;
        padding: 0 !important;
    }

    body:has(.sr-detail-card) .sr-detail-card {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 6px !important;
        overflow: visible !important;
        border-radius: 18px !important;
        border:
            1px solid rgba(74, 222, 128, .18) !important;
        background:
            radial-gradient(
                circle at 16% 0%,
                rgba(34, 197, 94, .08),
                transparent 25%
            ),
            linear-gradient(
                180deg,
                rgba(10, 24, 43, .96),
                rgba(3, 10, 24, .96)
            ) !important;
        box-shadow:
            0 16px 44px rgba(0, 0, 0, .28),
            inset 0 1px 0 rgba(255, 255, 255, .025)
            !important;
    }

    body:has(.sr-detail-card) .sr-ad-mobile-card {
        width: 34px !important;
        min-width: 34px !important;
        height: 218px !important;
        min-height: 218px !important;
        top: 88px !important;
        border-radius: 12px !important;
    }

    body:has(.sr-detail-card)
    .sr-ad-mobile-card-left {
        left: 3px !important;
    }

    body:has(.sr-detail-card)
    .sr-ad-mobile-card-right {
        right: 3px !important;
    }

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

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

    body:has(.sr-detail-card)
    .server-detail-hero,
    body:has(.sr-detail-card)
    .sr-hero {
        margin: 0 0 7px !important;
        padding: 10px !important;
        overflow: hidden !important;
        border-radius: 15px !important;
        border:
            1px solid rgba(134, 239, 172, .16) !important;
        background:
            radial-gradient(
                circle at 0% 0%,
                rgba(34, 197, 94, .16),
                transparent 35%
            ),
            radial-gradient(
                circle at 100% 0%,
                rgba(59, 130, 246, .10),
                transparent 38%
            ),
            linear-gradient(
                145deg,
                rgba(13, 31, 52, .96),
                rgba(3, 10, 24, .96)
            ) !important;
        box-shadow:
            0 12px 30px rgba(0, 0, 0, .22),
            inset 0 1px 0 rgba(255, 255, 255, .035)
            !important;
    }

    body:has(.sr-detail-card)
    .sr-hero::before {
        background-size: 26px 26px !important;
        opacity: .08 !important;
    }

    body:has(.sr-detail-card)
    .sr-hero-main {
        display: grid !important;
        grid-template-columns: 58px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 9px !important;
    }

    body:has(.sr-detail-card)
    .sr-server-logo {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 58px !important;
        min-width: 58px !important;
        height: 58px !important;
        min-height: 58px !important;
        border-radius: 14px !important;
        border:
            1px solid rgba(74, 222, 128, .30) !important;
        background:
            radial-gradient(
                circle at 30% 25%,
                rgba(187, 247, 208, .34),
                transparent 28%
            ),
            linear-gradient(
                145deg,
                rgba(20, 83, 45, .92),
                rgba(3, 24, 38, .96)
            ) !important;
        box-shadow:
            0 9px 20px rgba(0, 0, 0, .24),
            0 0 18px rgba(34, 197, 94, .10)
            !important;
    }

    body:has(.sr-detail-card)
    .sr-server-logo span {
        font-size: 18px !important;
        line-height: 1 !important;
        letter-spacing: -.5px !important;
    }

    body:has(.sr-detail-card)
    .sr-hero-title {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        display: grid !important;
        align-content: center !important;
        gap: 5px !important;
    }

    body:has(.sr-detail-card)
    .sr-online-pill {
        min-height: 20px !important;
        margin: 0 !important;
        padding: 4px 7px !important;
        gap: 5px !important;
        border-radius: 999px !important;
        font-size: 7px !important;
        letter-spacing: .04em !important;
    }

    body:has(.sr-detail-card)
    .sr-online-pill::before {
        width: 5px !important;
        height: 5px !important;
    }

    body:has(.sr-detail-card)
    .sr-hero-title h1 {
        max-width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        color: #f8fafc !important;
        font-size: clamp(18px, 6.2vw, 25px) !important;
        font-weight: 1000 !important;
        line-height: .98 !important;
        letter-spacing: -.8px !important;
        overflow-wrap: anywhere !important;
    }

    body:has(.sr-detail-card)
    .sr-server-ip {
        width: fit-content !important;
        max-width: 100% !important;
        min-height: 25px !important;
        padding: 5px 7px !important;
        gap: 5px !important;
        border-radius: 8px !important;
        font-size: 8px !important;
        line-height: 1 !important;
    }

    body:has(.sr-detail-card)
    .sr-server-ip span {
        font-size: 7px !important;
    }

    body:has(.sr-detail-card)
    .sr-server-ip strong {
        overflow: hidden !important;
        font-size: 8px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body:has(.sr-detail-card)
    .sr-hero-right {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        min-width: 0 !important;
        margin-top: 2px !important;
    }

    body:has(.sr-detail-card)
    .sr-hero-metrics {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body:has(.sr-detail-card)
    .sr-hero-metric {
        min-width: 0 !important;
        min-height: 52px !important;
        padding: 8px !important;
        display: grid !important;
        align-content: center !important;
        gap: 4px !important;
        overflow: hidden !important;
        border:
            1px solid rgba(148, 163, 184, .13) !important;
        border-radius: 10px !important;
        background:
            radial-gradient(
                circle at 100% 0%,
                rgba(34, 197, 94, .08),
                transparent 44%
            ),
            rgba(9, 20, 38, .72) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .02)
            !important;
    }

    body:has(.sr-detail-card)
    .sr-hero-metric span {
        margin: 0 !important;
        overflow: hidden !important;
        color: #8d9aaf !important;
        font-size: 7px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body:has(.sr-detail-card)
    .sr-hero-metric strong {
        min-width: 0 !important;
        overflow: hidden !important;
        color: #86efac !important;
        font-size: 12px !important;
        font-weight: 1000 !important;
        line-height: 1.05 !important;
        overflow-wrap: anywhere !important;
    }

    body:has(.sr-detail-card)
    .server-detail-tabs,
    body:has(.sr-detail-card)
    .sr-tabs {
        width: 100% !important;
        margin: 9px 0 0 !important;
        padding: 8px 0 1px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        border-top:
            1px solid rgba(148, 163, 184, .12) !important;
        scroll-snap-type: x proximity !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body:has(.sr-detail-card)
    .server-detail-tabs::-webkit-scrollbar,
    body:has(.sr-detail-card)
    .sr-tabs::-webkit-scrollbar {
        display: none !important;
    }

    body:has(.sr-detail-card)
    .server-detail-tab {
        flex: 0 0 auto !important;
        min-width: 74px !important;
        min-height: 30px !important;
        padding: 6px 9px !important;
        scroll-snap-align: start !important;
        border-radius: 8px !important;
        font-size: 8px !important;
        line-height: 1 !important;
        box-shadow: none !important;
    }

    body:has(.sr-detail-card)
    .server-detail-tab.active {
        color: #03200d !important;
        background:
            linear-gradient(
                135deg,
                #86efac,
                #22c55e
            ) !important;
        box-shadow:
            0 6px 16px rgba(34, 197, 94, .16)
            !important;
    }

    body:has(.sr-detail-card)
    .server-detail-layout,
    body:has(.sr-detail-card)
    .sr-detail-layout {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
    }

    body:has(.sr-detail-card)
    .sr-detail-main,
    body:has(.sr-detail-card)
    .sr-sidebar {
        width: 100% !important;
        min-width: 0 !important;
    }

    body:has(.sr-detail-card)
    .sr-live-chat {
        right: 7px !important;
        bottom: 9px !important;
    }

    body:has(.sr-detail-card)
    .sr-live-chat-button {
        width: 46px !important;
        min-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        border-radius: 14px !important;
    }

    body:has(.sr-detail-card)
    .sr-live-chat-button::before {
        width: 29px !important;
        height: 29px !important;
        border-radius: 9px !important;
        font-size: 11px !important;
    }
}

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

    body:has(.sr-detail-card) .sr-ad-mobile-card {
        width: 32px !important;
        min-width: 32px !important;
        height: 205px !important;
        min-height: 205px !important;
    }

    body:has(.sr-detail-card)
    .sr-hero-main {
        grid-template-columns: 52px minmax(0, 1fr) !important;
        gap: 7px !important;
    }

    body:has(.sr-detail-card)
    .sr-server-logo {
        width: 52px !important;
        min-width: 52px !important;
        height: 52px !important;
        min-height: 52px !important;
        border-radius: 13px !important;
    }

    body:has(.sr-detail-card)
    .sr-server-logo span {
        font-size: 16px !important;
    }

    body:has(.sr-detail-card)
    .sr-hero-title h1 {
        font-size: clamp(17px, 6vw, 22px) !important;
    }

    body:has(.sr-detail-card)
    .sr-hero-metric {
        min-height: 49px !important;
        padding: 7px !important;
    }

    body:has(.sr-detail-card)
    .sr-hero-metric strong {
        font-size: 11px !important;
    }
}