/*
 * SunucuRadar mobil zarif sunucu kartı şablonu v2.
 *
 * Yalnız /servers listesindeki kartları etkiler.
 * Reklam, footer, navigasyon ve canlı destek kapsam dışıdır.
 */

@media (max-width: 760px) {
    html body:has(.server-market-shell)
    .market-server-list {
        gap: 8px !important;
    }

    html body:has(.server-market-shell)
    .market-server-card {
        position: relative !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        border:
            1px solid rgba(74, 222, 128, .20) !important;
        border-radius: 11px !important;
        background:
            linear-gradient(
                145deg,
                rgba(9, 18, 34, .96),
                rgba(3, 9, 22, .98)
            ) !important;
        box-shadow:
            0 5px 16px rgba(0, 0, 0, .20),
            inset 0 1px 0 rgba(255, 255, 255, .02)
            !important;
    }

    html body:has(.server-market-shell)
    .market-server-card:hover {
        transform: none !important;
        box-shadow:
            0 5px 16px rgba(0, 0, 0, .20) !important;
    }

    html body:has(.server-market-shell)
    .market-banner-area {
        margin: 0 !important;
        padding: 4px 4px 0 !important;
    }

    html body:has(.server-market-shell)
    .market-banner {
        width: 100% !important;
        height: 46px !important;
        max-height: 46px !important;
        overflow: hidden !important;
        border-radius: 7px !important;
        box-shadow: none !important;
    }

    html body:has(.server-market-shell)
    .market-banner img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    html body:has(.server-market-shell)
    .market-rank {
        top: 6px !important;
        left: 6px !important;
        z-index: 5 !important;
        width: auto !important;
        min-width: 29px !important;
        height: 20px !important;
        padding: 0 6px !important;
        gap: 2px !important;
        border:
            1px solid rgba(74, 222, 128, .36) !important;
        border-radius: 6px !important;
        color: #dcfce7 !important;
        font-size: 8px !important;
        background: rgba(2, 6, 23, .88) !important;
    }

    html body:has(.server-market-shell)
    .market-rank .crown {
        font-size: 9px !important;
    }

    html body:has(.server-market-shell)
    .market-info {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 2px !important;
        margin: 0 !important;
        padding: 7px 7px 5px !important;
        overflow: hidden !important;
    }

    html body:has(.server-market-shell)
    .market-title {
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.05 !important;
    }

    html body:has(.server-market-shell)
    .market-title strong {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body:has(.server-market-shell)
    .market-icon {
        width: 19px !important;
        height: 19px !important;
        min-width: 19px !important;
        border-radius: 5px !important;
        font-size: 7px !important;
    }

    html body:has(.server-market-shell)
    .market-domain {
        min-width: 0 !important;
        overflow: hidden !important;
        color: #aebbd0 !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body:has(.server-market-shell)
    .market-online {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        display: block !important;
        margin: 2px 0 0 !important;
        padding: 3px 0 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-top:
            1px solid rgba(148, 163, 184, .08) !important;
        border-radius: 0 !important;
        color: #86efac !important;
        font-size: 8px !important;
        line-height: 1.1 !important;
        text-align: left !important;
        text-overflow: clip !important;
        white-space: normal !important;
        background: transparent !important;
    }

    html body:has(.server-market-shell)
    .market-bars {
        margin-right: 3px !important;
    }

    html body:has(.server-market-shell)
    .market-tags-inline,
    html body:has(.server-market-shell)
    .market-info .market-tags {
        display: none !important;
    }

    html body:has(.server-market-shell)
    .market-meta {
        display: grid !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        gap: 0 !important;
        margin: 0 6px !important;
        padding: 5px 0 !important;
        border-top:
            1px solid rgba(148, 163, 184, .09) !important;
        border-left: 0 !important;
        background: transparent !important;
    }

    html body:has(.server-market-shell)
    .market-meta-pill:nth-child(2) {
        display: none !important;
    }

    html body:has(.server-market-shell)
    .market-meta-pill {
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        padding: 2px 3px !important;
        overflow: hidden !important;
        border: 0 !important;
        border-right:
            1px solid rgba(148, 163, 184, .10) !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    html body:has(.server-market-shell)
    .market-meta-pill:nth-child(4) {
        border-right: 0 !important;
    }

    html body:has(.server-market-shell)
    .market-meta-pill span {
        display: block !important;
        margin: 0 !important;
        color: #718096 !important;
        font-size: 6px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    html body:has(.server-market-shell)
    .market-meta-pill strong {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        color: #b7f7ca !important;
        font-size: 8px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body:has(.server-market-shell)
    .market-meta-score strong {
        color: #f4f7fb !important;
        font-size: 8px !important;
    }

    html body:has(.server-market-shell)
    .market-meta-mini {
        display: none !important;
    }

    html body:has(.server-market-shell)
    .market-action {
        position: relative !important;
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin: 0 !important;
        padding: 5px 6px 6px !important;
        border-top:
            1px solid rgba(148, 163, 184, .08) !important;
        border-left: 0 !important;
    }

    html body:has(.server-market-shell)
    .market-status {
        display: none !important;
    }

    html body:has(.server-market-shell)
    .market-vote,
    html body:has(.server-market-shell)
    .market-copy {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 25px !important;
        max-height: 25px !important;
        margin: 0 !important;
        padding: 4px 3px !important;
        border-radius: 6px !important;
        font-size: 7px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }

    html body:has(.server-market-shell)
    .market-bottom {
        margin-top: 8px !important;
    }
}

@media (max-width: 420px) {
    html body:has(.server-market-shell)
    .market-banner {
        height: 42px !important;
        max-height: 42px !important;
    }

    html body:has(.server-market-shell)
    .market-title {
        font-size: 12px !important;
    }

    html body:has(.server-market-shell)
    .market-domain {
        font-size: 8px !important;
    }
}

/* MOBILE_SERVER_CARD_FINAL_REFINEMENT_V3_START */

@media (max-width: 760px) {
    html body:has(.server-market-shell)
    .market-server-list {
        gap: 6px !important;
    }

    html body:has(.server-market-shell)
    .market-server-card {
        border-radius: 10px !important;
        box-shadow:
            0 4px 13px rgba(0, 0, 0, .18),
            inset 0 1px 0 rgba(255, 255, 255, .018)
            !important;
    }

    html body:has(.server-market-shell)
    .market-info {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
        gap: 2px !important;
        padding: 6px 7px 4px !important;
    }

    html body:has(.server-market-shell)
    .market-title {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        align-items: flex-start !important;
        font-size: 12px !important;
        line-height: 1.08 !important;
    }

    html body:has(.server-market-shell)
    .market-title strong {
        display: -webkit-box !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    html body:has(.server-market-shell)
    .market-domain {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin: 0 !important;
        font-size: 8px !important;
    }

    html body:has(.server-market-shell)
    .market-online {
        grid-column: 1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        margin-top: 2px !important;
        padding-top: 3px !important;
        font-size: 8px !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    html body:has(.server-market-shell)
    .market-meta {
        margin-right: 5px !important;
        margin-left: 5px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    html body:has(.server-market-shell)
    .market-meta-pill {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }

    html body:has(.server-market-shell)
    .market-action {
        gap: 4px !important;
        padding: 4px 5px 5px !important;
    }

    html body:has(.server-market-shell)
    .market-vote,
    html body:has(.server-market-shell)
    .market-copy {
        min-height: 23px !important;
        max-height: 23px !important;
        padding: 3px 2px !important;
        border-radius: 5px !important;
        font-size: 6.5px !important;
    }

    html body:has(.server-market-shell)
    .market-banner-area {
        padding: 3px 3px 0 !important;
    }

    html body:has(.server-market-shell)
    .market-banner {
        height: 43px !important;
        max-height: 43px !important;
    }
}

@media (max-width: 420px) {
    html body:has(.server-market-shell)
    .market-title {
        font-size: 11px !important;
    }

    html body:has(.server-market-shell)
    .market-banner {
        height: 40px !important;
        max-height: 40px !important;
    }
}

/* MOBILE_SERVER_CARD_FINAL_REFINEMENT_V3_END */