/*
 * SunucuRadar sunucu detay mobil temel kabuğu.
 *
 * Kapsam:
 * - Mobil sol ve sağ dikey reklam
 * - Reklamlar arasında kalan içerik genişliği
 *
 * Sunucu hero, galeri, istatistik ve işlem kartlarının
 * iç tasarımı bu dosyanın kapsamı dışındadır.
 */

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

    body:has(.sr-detail-card) > .site {
        overflow-x: hidden !important;
    }

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

    body:has(.sr-detail-card) .sr-detail-card {
        width: 100% !important;
        max-width: none !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    body:has(.sr-detail-card) .sr-ad-mobile-card {
        position: fixed !important;
        top: 82px !important;
        bottom: auto !important;
        z-index: 42 !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 230px !important;
        min-height: 230px !important;
        margin: 0 !important;
        display: block !important;
        overflow: hidden !important;
        border:
            1px solid rgba(34, 197, 94, .35) !important;
        border-radius: 15px !important;
        background:
            linear-gradient(
                180deg,
                rgba(5, 46, 34, .94),
                rgba(2, 6, 23, .98)
            ) !important;
        box-shadow:
            0 12px 36px rgba(0, 0, 0, .30),
            inset 0 1px 0 rgba(255, 255, 255, .04)
            !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition:
            opacity .16s ease,
            visibility .16s ease !important;
    }

    body:has(.sr-detail-card)
    .sr-ad-mobile-card.is-following {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

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

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

    body:has(.sr-detail-card)
    .sr-ad-mobile-card .sr-ad-live {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        overflow: hidden !important;
        border-radius: inherit !important;
    }

    body:has(.sr-detail-card)
    .sr-ad-mobile-card .sr-ad-mobile-media {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    body:has(.sr-detail-card)
    .sr-ad-mobile-card .sr-ad-copy {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 4px !important;
        background:
            linear-gradient(
                180deg,
                rgba(2, 6, 23, .82),
                transparent 38%,
                rgba(2, 6, 23, .90)
            ) !important;
    }

    body:has(.sr-detail-card)
    .sr-ad-mobile-card .sr-ad-copy strong,
    body:has(.sr-detail-card)
    .sr-ad-mobile-card .sr-ad-copy p {
        display: none !important;
    }

    body:has(.sr-detail-card)
    .sr-ad-mobile-card .sr-ad-label {
        padding: 3px 2px !important;
        border: 0 !important;
        background: rgba(2, 6, 23, .72) !important;
        font-size: 7px !important;
        line-height: 1 !important;
        letter-spacing: .04em !important;
        writing-mode: vertical-rl !important;
        text-orientation: mixed !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 {
        min-width: 29px !important;
        min-height: 62px !important;
        padding: 6px 3px !important;
        border-radius: 9px !important;
        font-size: 8px !important;
        line-height: 1 !important;
        writing-mode: vertical-rl !important;
        text-orientation: mixed !important;
    }

    body:has(.sr-detail-card)
    .sr-ad-mobile-card > .sr-ad-empty {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 8px 4px !important;
        text-align: center !important;
    }

    body:has(.sr-detail-card)
    .sr-ad-mobile-card > .sr-ad-empty::before {
        content: "SR" !important;
        width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 10px !important;
        color: #04130a !important;
        font-size: 12px !important;
        font-weight: 1000 !important;
        background:
            linear-gradient(
                135deg,
                #4ade80,
                #16a34a
            ) !important;
    }

    body:has(.sr-detail-card)
    .sr-ad-mobile-card > .sr-ad-empty strong,
    body:has(.sr-detail-card)
    .sr-ad-mobile-card > .sr-ad-empty p,
    body:has(.sr-detail-card)
    .sr-ad-mobile-card > .sr-ad-empty small {
        display: none !important;
    }

    body:has(.sr-detail-card)
    .sr-ad-mobile-card > .sr-ad-empty .sr-ad-label {
        writing-mode: vertical-rl !important;
        text-orientation: mixed !important;
    }

    body:has(.sr-detail-card)
    .sr-ad-mobile-card > .sr-ad-empty .sr-ad-buy {
        min-width: 29px !important;
        min-height: 62px !important;
        padding: 6px 3px !important;
        border-radius: 9px !important;
        font-size: 8px !important;
        writing-mode: vertical-rl !important;
        text-orientation: mixed !important;
    }
}

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

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

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

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