/* KOCUCE_SERVER_DETAIL_V1 */

/* Genel kartlar */
.sv-card {
    border: 1px solid #e0e8f5 !important;
    border-radius: 20px !important;
    background: #fff;
    box-shadow: 0 12px 35px rgba(17,35,74,.045);
}

/* Sunucu ana bilgi karti */
.sv-card:has(.sv-logo) {
    position: relative;
    overflow: hidden;
    border-radius: 24px !important;
    box-shadow: 0 20px 55px rgba(17,35,74,.085);
}

.sv-card:has(.sv-logo)::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(
        90deg,
        #2563eb 0%,
        #ed1745 52%,
        #ff8a00 100%
    );
    pointer-events: none;
}

/* Logo */
.sv-logo {
    border-radius: 20px !important;
    border: 3px solid #fff !important;
    box-shadow:
        0 0 0 1px #dce5f4,
        0 12px 30px rgba(15,23,42,.14) !important;
}

/* Sunucu adi */
.sv-card h1 {
    letter-spacing: -.6px;
    line-height: 1.25;
}

/* Bilgi satirlari */
.sv-card:has(.sv-logo) .grid > div {
    transition: border-color .2s, background .2s;
}

.sv-card:has(.sv-logo) .grid > div:hover {
    border-color: #cbd9f0;
    background: #f5f8ff;
}

/* Ekran goruntuleri */
#screenshots-grid {
    gap: 16px !important;
}

#screenshots-grid .screenshot-thumb {
    border-radius: 16px !important;
    border: 2px solid #e2e8f4 !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.07);
    transition:
        transform .25s,
        box-shadow .25s,
        border-color .25s;
}

#screenshots-grid .screenshot-thumb:hover {
    transform: translateY(-4px);
    border-color: #ed1745 !important;
    box-shadow: 0 16px 35px rgba(15,23,42,.14);
}

/* Tanitim ve yorum sekmeleri */
.server-tab {
    transition:
        color .2s,
        background .2s,
        border-color .2s;
}

.server-tab:hover {
    color: #e11d48;
}

/* Tanitim metninin dis cercevesi */
.server-description {
    background: #fff;
    border-radius: 18px;
}

/* Tanitim iceriginin orijinal hizalama,
   resim siralama ve editor bicimleri korunur. */

/* Etiketler */
.sv-card a {
    transition: color .2s, background-color .2s;
}

/* Mobil */
@media (max-width: 768px) {
    .sv-card {
        border-radius: 16px !important;
    }

    .sv-card:has(.sv-logo) {
        border-radius: 18px !important;
    }

    #screenshots-grid {
        gap: 10px !important;
    }

    #screenshots-grid .screenshot-thumb {
        border-radius: 12px !important;
    }
}