/*
 * SunucuRadar sunucu detay premium mobil alt içerik.
 *
 * Kapsam:
 * - Kullanıcı değerlendirmesi
 * - Etiketler
 * - Sunucu işlemleri
 * - Hızlı istatistikler
 * - Oy / ödül özeti
 * - Alt içerikte reklam yoğunluğu
 */

@media (max-width: 760px) {
    body:has(.sr-detail-card)
    .reaction-panel {
        margin: 10px 0 0 !important;
        padding: 10px !important;
        overflow: hidden !important;
        border:
            1px solid rgba(148, 163, 184, .14) !important;
        border-radius: 12px !important;
        background:
            radial-gradient(
                circle at 0% 0%,
                rgba(34, 197, 94, .08),
                transparent 34%
            ),
            rgba(9, 20, 38, .66) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .025)
            !important;
    }

    body:has(.sr-detail-card)
    .reaction-panel-head {
        margin: 0 !important;
    }

    body:has(.sr-detail-card)
    .reaction-panel-head .sr-kicker {
        margin: 0 0 3px !important;
        font-size: 7px !important;
        letter-spacing: .05em !important;
    }

    body:has(.sr-detail-card)
    .reaction-panel-head h3 {
        margin: 0 0 5px !important;
        font-size: 13px !important;
        line-height: 1.1 !important;
    }

    body:has(.sr-detail-card)
    .reaction-panel-head p {
        margin: 0 !important;
        color: #9daabd !important;
        font-size: 8px !important;
        line-height: 1.42 !important;
    }

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

    body:has(.sr-detail-card)
    .reaction-count {
        min-width: 0 !important;
        min-height: 46px !important;
        padding: 7px 8px !important;
        display: grid !important;
        align-content: center !important;
        gap: 3px !important;
        border-radius: 9px !important;
        background: rgba(2, 8, 18, .52) !important;
    }

    body:has(.sr-detail-card)
    .reaction-count span {
        margin: 0 !important;
        font-size: 7px !important;
        line-height: 1 !important;
    }

    body:has(.sr-detail-card)
    .reaction-count strong {
        overflow: hidden !important;
        font-size: 12px !important;
        line-height: 1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body:has(.sr-detail-card)
    .reaction-panel .notice {
        margin: 7px 0 0 !important;
        padding: 7px 8px !important;
        border-radius: 8px !important;
        font-size: 8px !important;
        line-height: 1.35 !important;
    }

    body:has(.sr-detail-card)
    .reaction-panel .actions {
        margin: 6px 0 0 !important;
    }

    body:has(.sr-detail-card)
    .reaction-panel .actions .button {
        width: 100% !important;
        min-height: 30px !important;
        padding: 6px 9px !important;
        border-radius: 8px !important;
        font-size: 8px !important;
    }

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

    body:has(.sr-detail-card)
    .reaction-actions form,
    body:has(.sr-detail-card)
    .reaction-button {
        width: 100% !important;
        min-width: 0 !important;
    }

    body:has(.sr-detail-card)
    .reaction-button {
        min-height: 32px !important;
        padding: 6px 8px !important;
        border-radius: 8px !important;
        font-size: 8px !important;
    }

    body:has(.sr-detail-card)
    .sr-section-block:has(.detail-tags) {
        margin-top: 10px !important;
        padding: 9px !important;
        border:
            1px solid rgba(148, 163, 184, .12) !important;
        border-radius: 11px !important;
        background: rgba(9, 20, 38, .48) !important;
    }

    body:has(.sr-detail-card)
    .sr-section-block:has(.detail-tags) > h2 {
        margin: 0 0 7px !important;
        font-size: 12px !important;
    }

    body:has(.sr-detail-card)
    .detail-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        margin: 0 !important;
    }

    body:has(.sr-detail-card)
    .detail-tag {
        min-height: 24px !important;
        padding: 5px 7px !important;
        border-radius: 999px !important;
        color: #d6fbe1 !important;
        font-size: 7px !important;
        font-weight: 850 !important;
        line-height: 1.1 !important;
        border:
            1px solid rgba(74, 222, 128, .18) !important;
        background:
            linear-gradient(
                135deg,
                rgba(34, 197, 94, .10),
                rgba(15, 23, 42, .62)
            ) !important;
    }

    body:has(.sr-detail-card)
    .sr-sidebar {
        gap: 7px !important;
    }

    body:has(.sr-detail-card)
    .sr-side-card,
    body:has(.sr-detail-card)
    .detail-side-card {
        padding: 10px !important;
        border-radius: 12px !important;
        border:
            1px solid rgba(148, 163, 184, .13) !important;
        background:
            radial-gradient(
                circle at 0% 0%,
                rgba(34, 197, 94, .07),
                transparent 34%
            ),
            rgba(8, 18, 34, .70) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .02)
            !important;
    }

    body:has(.sr-detail-card)
    .sr-side-card h2,
    body:has(.sr-detail-card)
    .detail-side-card h3 {
        margin: 0 0 8px !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
    }

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

    body:has(.sr-detail-card)
    .detail-actions .button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 34px !important;
        padding: 7px 6px !important;
        border-radius: 8px !important;
        font-size: 8px !important;
        line-height: 1.1 !important;
    }

    body:has(.sr-detail-card)
    .detail-actions .button:first-child {
        grid-column: 1 / -1 !important;
    }

    body:has(.sr-detail-card)
    .sr-stat-list {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin: 0 0 7px !important;
    }

    body:has(.sr-detail-card)
    .sr-stat-list > div {
        min-width: 0 !important;
        min-height: 42px !important;
        padding: 7px !important;
        display: grid !important;
        align-content: center !important;
        gap: 3px !important;
        border:
            1px solid rgba(148, 163, 184, .10) !important;
        border-radius: 8px !important;
        background: rgba(2, 8, 18, .42) !important;
    }

    body:has(.sr-detail-card)
    .sr-stat-list span {
        overflow: hidden !important;
        color: #8996aa !important;
        font-size: 7px !important;
        line-height: 1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body:has(.sr-detail-card)
    .sr-stat-list strong {
        overflow: hidden !important;
        color: #dce7f5 !important;
        font-size: 9px !important;
        line-height: 1.05 !important;
        text-align: left !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body:has(.sr-detail-card)
    .detail-stat-grid,
    body:has(.sr-detail-card)
    .sr-mini-stats {
        display: grid !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    body:has(.sr-detail-card)
    .detail-stat-box {
        min-width: 0 !important;
        min-height: 43px !important;
        padding: 6px !important;
        display: grid !important;
        align-content: center !important;
        gap: 3px !important;
        border-radius: 8px !important;
    }

    body:has(.sr-detail-card)
    .detail-stat-box span {
        margin: 0 !important;
        overflow: hidden !important;
        font-size: 6.5px !important;
        line-height: 1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body:has(.sr-detail-card)
    .detail-stat-box strong {
        font-size: 11px !important;
        line-height: 1 !important;
    }

    body:has(.sr-detail-card)
    .sr-vote-card {
        padding: 10px !important;
    }

    body:has(.sr-detail-card)
    .sr-vote-card p {
        margin: 0 !important;
        font-size: 8px !important;
        line-height: 1.42 !important;
    }

    body:has(.sr-detail-card)
    .sr-stars {
        display: flex !important;
        gap: 5px !important;
        margin: 8px 0 !important;
    }

    body:has(.sr-detail-card)
    .sr-stars span {
        width: 25px !important;
        height: 25px !important;
        border-radius: 7px !important;
        font-size: 13px !important;
    }

    body:has(.sr-detail-card)
    .sr-sidebar
    .sr-side-card:has(.sr-side-tags) {
        display: none !important;
    }

    body:has(.sr-detail-card).sr-detail-lower-active
    .sr-ad-mobile-card {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

@media (max-width: 420px) {
    body:has(.sr-detail-card)
    .detail-actions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    body:has(.sr-detail-card)
    .sr-stat-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    body:has(.sr-detail-card)
    .detail-stat-grid,
    body:has(.sr-detail-card)
    .sr-mini-stats {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }
}