/* 
 * PVPLER.NET - Main Stylesheet
 * Complete Restoration & Refinement
 */

:root {
    --primary: #d4af37;
    --dark-900: #0a0a14;
    --dark-800: #12121f;
    --dark-700: #1a1a2e;
    --dark-600: #252535;
    --dark-500: #30303f;
    --glass: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.05);
}

/* Tailwind pre-built uyumluluk: özel dark palet (CSP nedeniyle CDN config yok) */
.bg-dark-900 { background-color: var(--dark-900); }
.bg-dark-900\/30 { background-color: rgba(10, 10, 20, 0.3); }
.bg-dark-900\/50 { background-color: rgba(10, 10, 20, 0.5); }
.bg-dark-900\/80 { background-color: rgba(10, 10, 20, 0.8); }
.bg-dark-900\/90 { background-color: rgba(10, 10, 20, 0.9); }
.bg-dark-800 { background-color: var(--dark-800); }
.bg-dark-800\/50 { background-color: rgba(18, 18, 31, 0.5); }
.bg-dark-800\/95 { background-color: rgba(18, 18, 31, 0.95); }
.bg-dark-700 { background-color: var(--dark-700); }
.bg-dark-700\/50 { background-color: rgba(26, 26, 46, 0.5); }
.bg-dark-700\/80 { background-color: rgba(26, 26, 46, 0.8); }
.bg-dark-600 { background-color: var(--dark-600); }
.bg-dark-600\/30 { background-color: rgba(37, 37, 53, 0.3); }
.bg-dark-600\/50 { background-color: rgba(37, 37, 53, 0.5); }
.bg-dark-500 { background-color: var(--dark-500); }
.hover\:bg-dark-700:hover { background-color: var(--dark-700); }
.hover\:bg-dark-700\/80:hover { background-color: rgba(26, 26, 46, 0.8); }
.hover\:bg-dark-600\/30:hover { background-color: rgba(37, 37, 53, 0.3); }
.hover\:bg-dark-600\/50:hover { background-color: rgba(37, 37, 53, 0.5); }
.hover\:bg-dark-500:hover { background-color: var(--dark-500); }
.border-dark-500 { border-color: var(--dark-500); }
.border-dark-600 { border-color: var(--dark-600); }
.border-dark-900 { border-color: var(--dark-900); }
.border-t-dark-600 { border-top-color: var(--dark-600); }
.text-dark-900 { color: var(--dark-900); }
.divide-dark-600 > * + * { border-color: var(--dark-600); }
.divide-y.divide-dark-600 > * + * { border-top-color: var(--dark-600); }
/* Gradient stops (Tailwind pre-built ile birlikte kullanılır) */
.from-dark-900 { --tw-gradient-from: #0a0a14; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-dark-900\/90 { --tw-gradient-from: rgba(10, 10, 20, 0.9); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-dark-900\/80 { --tw-gradient-stops: var(--tw-gradient-from), rgba(10, 10, 20, 0.8), var(--tw-gradient-to); }
.to-dark-900 { --tw-gradient-to: #0a0a14; }
.to-transparent { --tw-gradient-to: transparent; }

body {
    background-color: var(--dark-900) !important;
    background-image: radial-gradient(circle at top, #1a1a2e 0%, #0a0a14 100%) !important;
    background-attachment: fixed !important;
    color: #e0e0e0;
    font-family: 'Inter', sans-serif;
    margin: 0;
}

.font-cinzel {
    font-family: 'Cinzel', serif;
}

.gold-text {
    background: linear-gradient(to right, #d4af37, #f9d976, #d4af37);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Cinzel', serif;
    font-weight: bold;
}

.site-brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    max-width: min(100%, 20rem);
    padding: 0.12rem 0;
    white-space: nowrap;
    isolation: isolate;
}

.site-brand::before {
    content: '';
    position: absolute;
    inset: 12% 4% 0 0;
    background:
        radial-gradient(circle at 18% 45%, rgba(255, 230, 150, 0.2), transparent 34%),
        radial-gradient(circle at 58% 50%, rgba(212, 175, 55, 0.16), transparent 42%);
    filter: blur(18px);
    opacity: 0.72;
    pointer-events: none;
    z-index: -1;
}

.site-brand-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1rem;
    flex: none;
    background: linear-gradient(145deg, rgba(18, 18, 31, 0.96), rgba(31, 24, 16, 0.96));
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 24px rgba(0, 0, 0, 0.34);
}

.site-brand-mark::before {
    position: relative;
    content: '';
    position: absolute;
    inset: 0.33rem;
    border-radius: 0.78rem;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(212, 175, 55, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.site-brand-mark::after {
    content: '';
    position: absolute;
    width: 1.55rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 238, 182, 0.95), rgba(212, 175, 55, 0.82), transparent);
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.42);
    transform: rotate(-48deg);
}

.site-brand-mark-letter {
    position: relative;
    z-index: 1;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    background: linear-gradient(135deg, #fffdfa 0%, #f6dc9a 40%, #d4af37 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.site-brand-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.18rem;
    min-width: 0;
}

.site-brand-word {
    position: relative;
    display: inline-block;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: clamp(1.12rem, 1.8vw, 1.85rem);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 0.95;
    color: #fbf8ee;
    background: linear-gradient(135deg, #fffdf7 0%, #f8ebc7 38%, #d9ae4a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 18px rgba(212, 175, 55, 0.12);
}

.site-brand-word::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.28rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0), rgba(212, 175, 55, 0.75), rgba(212, 175, 55, 0));
    opacity: 0.42;
}

.site-brand-domain {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.site-brand-accent {
    width: 1.6rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0), rgba(212, 175, 55, 0.9));
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.28);
    flex: none;
}

.site-brand-net {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.25rem;
    padding: 0.14rem 0.46rem;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(212, 175, 55, 0.08));
    font-family: 'Inter', sans-serif;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    line-height: 1;
    text-transform: uppercase;
    color: #d9c7a0;
    background: linear-gradient(135deg, #fffaf0 0%, #f0dba3 45%, #bc8b34 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.12);
}

.site-user-trigger {
    max-width: min(100%, 21rem);
}

.site-user-name {
    display: inline-block;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.glass {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    transition: all 0.3s ease;
}

.glass:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(212, 175, 55, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
}

/* Advertisement Styles */
.ad-red-glow {
    position: relative;
    padding: 3px;
    overflow: hidden;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 12px;
    transition: all 0.5s ease;
    z-index: 1;
}

.ad-red-glow::before {
    content: '';
    position: absolute;
    top: -150%;
    left: -150%;
    width: 400%;
    height: 400%;
    background: conic-gradient(transparent, transparent, transparent, #ef4444, #b91c1c, #ef4444);
    animation: rotate-border 3s linear infinite;
    z-index: -1;
}

@keyframes rotate-border {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.ad-red-glow::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #0a0a14;
    border-radius: 9px;
    z-index: -1;
}

.ad-728x90 {
    width: 100%;
    max-width: 728px;
    height: 90px;
    margin: 0 auto;
    overflow: hidden;
}

.ad-728x90 img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* Sticky Popup Styles */
.ad-sticky-wrapper {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
    pointer-events: none;
}

.ad-popup-item {
    width: 250px;
    height: 250px;
    pointer-events: auto;
    position: relative;
    animation: slide-up-left 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slide-up-left {
    from {
        transform: translateY(100px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.ad-popup-item img {
    width: 250px !important;
    height: 250px !important;
    object-fit: cover !important;
    border-radius: 12px;
}

/* Animations */
.animate-spin-slow {
    animation: spin 8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.market-glow-effect {
    position: relative;
    z-index: 1;
}

.market-glow-effect::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #d4af37, #f9d976, #d4af37);
    border-radius: inherit;
    z-index: -1;
    opacity: 0.2;
    filter: blur(8px);
    animation: market-pulse 2s ease-in-out infinite alternate;
}

@keyframes market-pulse {
    from {
        opacity: 0.1;
        transform: scale(0.95);
    }

    to {
        opacity: 0.4;
        transform: scale(1.05);
    }
}

.hype-glow-card {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.2);
}

/* Rotating Borders for Servers (Loading Bar Style) */
.rotating-border {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.rotating-border::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    animation: rotate-border 3s linear infinite;
    z-index: -2;
    background-repeat: no-repeat;
    background-position: center;
}

.rotating-border::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: #12121f;
    /* Kart arkaplanı */
    border-radius: inherit;
    z-index: -1;
}

/* Daha belirgin dönen bar - sarı (hype) */
.border-yellow-glow::before {
    background: conic-gradient(transparent 160deg, transparent 190deg, #d4af37 250deg, #f9d976 310deg, transparent 350deg, transparent 360deg);
}

/* Daha belirgin dönen bar - kırmızı (premium) */
.border-red-glow::before {
    background: conic-gradient(transparent 160deg, transparent 190deg, #ef4444 250deg, #f87171 310deg, transparent 350deg, transparent 360deg);
}

.premium-card-shadow {
    box-shadow: 0 0 24px rgba(239, 68, 68, 0.25), 0 0 48px rgba(239, 68, 68, 0.1);
}

.hype-card-shadow {
    box-shadow: 0 0 24px rgba(212, 175, 55, 0.25), 0 0 48px rgba(212, 175, 55, 0.1);
}

/* Anasayfa sunucu kartları: rotating-border iç dolgu */
.server-card-home.rotating-border::after {
    background: #12121f !important;
}

/* Header Spacer */
.header-spacer {
    height: 80px;
}

@media (min-width: 768px) {
    .header-spacer {
        height: 112px;
    }
}

@media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden;
    }

    body {
        background-attachment: scroll !important;
    }

    img,
    svg,
    video,
    canvas {
        max-width: 100%;
    }

    .container {
        max-width: 100%;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .glass {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .site-brand {
        gap: 0;
        max-width: min(100%, 10.9rem);
    }

    .site-brand-mark {
        width: 2.15rem;
        height: 2.15rem;
        border-radius: 0.8rem;
    }

    .site-brand-mark::before {
        inset: 0.26rem;
        border-radius: 0.62rem;
    }

    .site-brand-mark::after {
        width: 1.15rem;
    }

    .site-brand-mark-letter {
        font-size: 0.88rem;
    }

    .site-brand-stack {
        gap: 0.12rem;
    }

    .site-brand-word {
        font-size: 0.9rem;
        letter-spacing: 0.1em;
    }

    .site-brand-domain {
        gap: 0.25rem;
    }

    .site-brand-accent {
        width: 0.8rem;
        height: 1.5px;
    }

    .site-brand-net {
        min-height: 1rem;
        padding: 0.08rem 0.28rem;
        font-size: 0.46rem;
        letter-spacing: 0.18em;
    }

    .site-user-trigger {
        max-width: 10.5rem;
    }

    .site-user-name {
        max-width: 5.5rem;
    }

    .text-5xl {
        font-size: 2rem !important;
        line-height: 1.05 !important;
    }

    .text-4xl {
        font-size: 1.7rem !important;
        line-height: 1.1 !important;
    }

    .text-3xl {
        font-size: 1.45rem !important;
        line-height: 1.15 !important;
    }

    .admin-panel-frame {
        max-width: 100%;
    }

    .admin-gold-corner {
        width: 12px !important;
        height: 12px !important;
    }

    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }

    .sticky {
        position: static !important;
    }

    .ad-sticky-wrapper {
        left: 12px;
        right: 12px;
        bottom: 88px;
        gap: 12px;
    }

    .ad-popup-item,
    .ad-popup-item img {
        width: min(42vw, 180px) !important;
        height: min(42vw, 180px) !important;
    }

    .module-announcement-container {
        left: 12px !important;
        right: 12px !important;
        bottom: 88px !important;
        max-width: calc(100vw - 24px) !important;
    }

    .mobile-bottom-nav {
        display: block !important;
    }

    .mobile-bottom-nav > div {
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }

    #cookie-consent-widget {
        left: 12px !important;
        right: 12px !important;
        bottom: 88px !important;
        width: auto !important;
    }

    #cookie-consent-widget > div {
        width: 100% !important;
    }

    #scrollToTop {
        right: 1rem !important;
        bottom: 6rem !important;
    }

    .header-spacer {
        height: 84px;
    }
}


/* Extracted from main layout for better browser caching. */
.admin-panel-frame {
    background-color: rgba(15, 15, 15, 0.95);
    border: 2px solid #5c4033;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    position: relative;
}

.admin-gold-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: #d4af37;
    z-index: 10;
    pointer-events: none;
}

.admin-gold-text {
    color: #d4af37;
    font-family: 'Cinzel', serif;
}

/* Root Rank Special UI */
@keyframes root-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.root-avatar-container {
    position: relative;
    padding: 3px;
}

.root-spinning-border {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 50%, #ff0000 100%);
    filter: blur(1px);
    animation: root-spin 2s linear infinite;
    z-index: 0;
    pointer-events: none;
}

.root-badge {
    background: linear-gradient(45deg, #8b0000, #ff0000);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: 'Inter', sans-serif;
}

body.page-carkifelek {
    background: #050505 !important;
}

/* Module announcements */
.module-announcement-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    /* Stack upwards */
    gap: 15px;
    max-width: 350px;
    pointer-events: none;
    /* Allow clicks through empty space */
}

.module-announcement-card {
    pointer-events: auto;
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 3px;
    /* For border space */
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: none;
    /* Hidden by default, shown by JS */
    animation: slideInLeft 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%) scale(0.8);
        opacity: 0;
    }

    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

/* Border Animation */
.module-announcement-border {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 2px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.module-announcement-border::before {
    content: "";
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, transparent 0%, var(--border-color) 25%, transparent 50%, var(--border-color) 75%, transparent 100%);
    animation: rotateBorder 4s linear infinite;
}

@keyframes rotateBorder {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.module-announcement-inner {
    background: #111;
    border-radius: 9px;
    position: relative;
    padding: 15px;
    z-index: 10;
    display: flex;
    gap: 12px;
}

.module-announcement-close {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 0;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
    z-index: 20;
}

.module-announcement-close:hover {
    background: #ff4444;
    color: white;
}

/* Colors */
.border-yellow {
    --border-color: #fbbf24;
}

.border-red {
    --border-color: #ef4444;
}

.border-blue {
    --border-color: #3b82f6;
}

.border-white {
    --border-color: #ffffff;
}

.border-black {
    --border-color: #333333;
}


/* PVPLER.NET responsive hardening
 * Desktop (>1023px) layout is intentionally left untouched.
 */

.defer-render {
    content-visibility: auto;
    contain-intrinsic-size: 1px 640px;
}

@media (max-width: 1023px) {
    html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }

    body,
    main,
    footer,
    header {
        min-width: 0;
    }

    img,
    picture,
    video,
    canvas {
        max-width: 100%;
        height: auto;
    }

    .server-category-links {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
        scrollbar-width: thin;
        padding-bottom: .5rem;
        -webkit-overflow-scrolling: touch;
    }

    .server-category-links > a {
        flex: 0 0 auto;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .server-filter-panel {
        position: static !important;
        top: auto !important;
    }

    .server-card,
    .server-list-shell,
    .server-details,
    .server-name-row {
        min-width: 0;
        max-width: 100%;
    }

    .server-title,
    .server-title a {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

@media (max-width: 767px) {
    :root {
        --mobile-side-gap: 14px;
        --mobile-bottom-nav-height: 74px;
    }

    body {
        padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom));
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    main {
        overflow-x: clip;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: var(--mobile-side-gap) !important;
        padding-right: var(--mobile-side-gap) !important;
    }

    header nav {
        width: 100%;
        min-width: 0;
        padding-left: var(--mobile-side-gap) !important;
        padding-right: var(--mobile-side-gap) !important;
    }

    header nav > a,
    header nav > div {
        min-width: 0;
    }

    .site-user-trigger {
        max-width: 9.75rem !important;
        min-width: 44px;
        min-height: 44px;
    }

    .site-user-name {
        max-width: 4.75rem !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        max-width: 100%;
        width: 100%;
        font-size: 16px !important;
    }

    button,
    a,
    input,
    select,
    textarea {
        touch-action: manipulation;
    }

    .admin-btn,
    .server-cta,
    .mobile-bottom-nav a {
        min-height: 44px;
    }

    .slider-container {
        height: min(520px, calc(100svh - 96px)) !important;
        min-height: 430px;
        margin-bottom: 2rem !important;
        border-radius: 1.25rem !important;
    }

    .slider-container .slide-content {
        width: 100%;
        max-width: 100%;
    }

    .slider-container .slide-content p {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .server-list-heading {
        margin-top: 0 !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.25rem !important;
        margin-bottom: .75rem !important;
    }

    .server-list-heading h1 {
        font-size: clamp(1.7rem, 8vw, 2.25rem) !important;
        line-height: 1.08 !important;
        overflow-wrap: anywhere;
    }

    .server-list-shell {
        padding-left: var(--mobile-side-gap) !important;
        padding-right: var(--mobile-side-gap) !important;
        padding-bottom: 2rem !important;
    }

    .server-filter-panel {
        margin-bottom: 1rem;
        padding: 1rem !important;
    }

    .server-filter-options {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .server-card {
        padding: .85rem !important;
    }

    .server-card-grid {
        gap: .85rem !important;
    }

    .server-logo-wrap {
        width: 100%;
        justify-content: center !important;
    }

    .server-details {
        width: 100%;
        text-align: center !important;
    }

    .server-name-row {
        align-items: center !important;
    }

    .server-title {
        font-size: clamp(1.2rem, 6vw, 1.55rem) !important;
        line-height: 1.12 !important;
    }

    .server-meta {
        row-gap: .45rem !important;
        column-gap: .75rem !important;
    }

    .server-stats {
        border-left: 0 !important;
        padding-left: 0 !important;
        padding-top: .85rem;
        border-top: 1px solid rgba(92, 64, 51, .35);
    }

    .server-pagination {
        gap: .4rem !important;
    }

    .server-pagination > a {
        width: 42px !important;
        height: 42px !important;
    }

    #hype-container {
        scroll-padding-inline: var(--mobile-side-gap);
        overscroll-behavior-inline: contain;
    }

    .server-card-home {
        min-width: 0;
    }

    .mobile-bottom-nav {
        min-height: var(--mobile-bottom-nav-height);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-bottom-nav > div {
        gap: 0 !important;
        justify-content: stretch !important;
    }

    .mobile-bottom-nav a {
        flex: 1 1 0;
        min-width: 0;
        padding: .45rem .2rem !important;
    }

    .mobile-bottom-nav a span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .67rem !important;
    }

    footer {
        margin-bottom: 0 !important;
    }

    footer .grid {
        grid-template-columns: 1fr !important;
    }

    #cookie-consent-widget {
        max-width: calc(100vw - 24px) !important;
    }

    #scrollToTop {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        padding: 0 !important;
    }

    /* Generic public modals should never exceed the viewport. */
    [class*="fixed"][class*="inset-0"] > .glass,
    [class*="fixed"][class*="inset-0"] > .admin-panel-frame,
    [role="dialog"] {
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100svh - 24px) !important;
        overflow-y: auto;
    }

    .overflow-x-auto {
        max-width: 100%;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    pre,
    code {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 420px) {
    .server-filter-options {
        grid-template-columns: 1fr !important;
    }

    .site-user-trigger .site-user-name,
    .site-user-trigger .site-user-meta {
        display: none !important;
    }

    .slider-container {
        min-height: 450px;
    }

    .server-category-links > a {
        padding-left: .8rem !important;
        padding-right: .8rem !important;
    }
}

@media (hover: none) and (pointer: coarse) {
    .group:hover img,
    .group:hover .slide-bg,
    a:hover,
    button:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Lighthouse/compositor: sonsuz görsel efektleri layout/paint ölçümünden ayır. */
.ad-red-glow::before,
.animate-spin-slow,
.market-glow-effect::before,
.root-spinning-border,
.module-announcement-border::before,
.ad-popup-item {
    will-change: transform, opacity;
    backface-visibility: hidden;
}


/* ============================================================
   2026-09-12 Mobile click/nav + home hero hardening
   These semantic rules intentionally do not depend on generated
   Tailwind utilities so a stale CSS build cannot break navigation.
   ============================================================ */
.site-header {
    z-index: 10050 !important;
    isolation: isolate;
    pointer-events: none;
}

.site-header-nav,
.site-header-logo,
.site-desktop-nav,
.site-mobile-top-nav,
.site-auth-actions,
.site-header button,
.site-header a {
    pointer-events: auto;
}

.site-header-nav {
    position: relative;
    z-index: 1;
}

.site-desktop-nav {
    display: none;
    min-width: 0;
}

.site-mobile-top-nav {
    display: none;
}

.site-auth-actions {
    position: relative;
    z-index: 3;
}

.site-auth-link {
    position: relative;
    z-index: 1;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(212, 175, 55, .18);
}

.mobile-bottom-nav {
    z-index: 10040 !important;
    isolation: isolate;
    pointer-events: auto !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.mobile-bottom-nav > div,
.mobile-bottom-nav a {
    position: relative;
    pointer-events: auto !important;
}

.home-hero-slider {
    position: relative;
    height: 500px;
    min-height: 460px;
    isolation: isolate;
    touch-action: pan-y;
}

.home-hero-slide {
    position: absolute !important;
    inset: 0 !important;
}

.home-hero-slide:not(.active) {
    pointer-events: none !important;
}

.home-hero-media,
.home-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
}

.home-hero-content-shell {
    position: relative !important;
    z-index: 20 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 0 4rem 11.5rem !important;
    pointer-events: none;
}

.home-hero-copy,
.home-hero-copy a,
.home-hero-copy button {
    pointer-events: auto;
}

.home-hero-copy {
    width: min(100%, 48rem);
    max-width: 48rem;
}

.home-hero-primary {
    min-height: 52px;
}

.home-hero-controls {
    position: absolute !important;
    z-index: 40 !important;
    right: 2rem !important;
    bottom: 2rem !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    pointer-events: auto !important;
}

.home-hero-control {
    min-width: 44px;
    min-height: 44px;
    pointer-events: auto !important;
    touch-action: manipulation;
}

.home-hero-progress {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 35 !important;
    pointer-events: none !important;
}

@media (min-width: 768px) {
    .site-desktop-nav {
        display: flex !important;
        flex: 0 1 auto;
        align-items: center;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .site-desktop-nav::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 767px) {
    .site-header-nav {
        min-height: 78px !important;
        padding-top: 10px !important;
        padding-bottom: 8px !important;
        gap: 8px !important;
    }

    .site-mobile-top-nav {
        display: flex !important;
        align-items: center;
        gap: 7px;
        width: min(100%, 100vw);
        padding: 0 12px 10px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto !important;
        position: relative;
        z-index: 4;
    }

    .site-mobile-top-nav::-webkit-scrollbar {
        display: none;
    }

    .site-mobile-top-link {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 7px 10px;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 999px;
        background: rgba(255, 255, 255, .045);
        color: #c7c9d3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(212, 175, 55, .18);
    }

    .site-mobile-top-link:active {
        border-color: rgba(212, 175, 55, .55);
        color: #d4af37;
        background: rgba(212, 175, 55, .10);
    }

    .site-mobile-top-link svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex: 0 0 auto;
    }

    .site-header-logo {
        flex: 1 1 auto !important;
        max-width: 42vw;
    }

    .site-auth-actions {
        flex: 0 0 auto !important;
        gap: 6px !important;
    }

    .site-auth-link {
        white-space: nowrap;
        font-size: .875rem !important;
    }

    .site-login-link {
        padding: .65rem .5rem !important;
    }

    .site-register-link {
        padding: .65rem .85rem !important;
    }

    .site-register-link svg {
        flex: 0 0 auto;
    }

    .header-spacer {
        height: 132px !important;
    }

    .home-hero-slider,
    .slider-container {
        height: clamp(470px, 68svh, 560px) !important;
        min-height: 470px !important;
        margin-bottom: 2rem !important;
        border-radius: 1.25rem !important;
    }

    .home-hero-content-shell {
        justify-content: flex-start !important;
        padding: 2rem 1.5rem 5.75rem !important;
    }

    .home-hero-copy {
        width: 100% !important;
        max-width: 100% !important;
        transform: none;
    }

    .home-hero-copy > p:first-of-type {
        margin: 0 0 .9rem !important;
        font-size: clamp(2rem, 9vw, 2.85rem) !important;
        line-height: 1.04 !important;
        letter-spacing: .01em !important;
        overflow: visible !important;
        display: block !important;
        -webkit-line-clamp: initial !important;
    }

    .home-hero-copy > p:nth-of-type(2) {
        margin-bottom: 1.25rem !important;
        font-size: clamp(.98rem, 4.4vw, 1.08rem) !important;
        line-height: 1.55 !important;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .home-hero-actions {
        width: 100%;
    }

    .home-hero-primary {
        width: 100% !important;
        min-height: 54px;
        padding: .85rem 1.1rem !important;
    }

    .home-hero-controls {
        right: 1rem !important;
        bottom: 1rem !important;
        gap: .55rem !important;
    }

    .home-hero-control {
        width: 44px !important;
        height: 44px !important;
        background: rgba(10, 10, 20, .72) !important;
        border-color: rgba(255, 255, 255, .24) !important;
    }

    .home-hero-media img,
    .home-hero-media .slide-bg {
        object-position: center center;
    }
}

@media (max-width: 374px) {
    .site-login-link {
        font-size: .78rem !important;
        padding-inline: .35rem !important;
    }

    .site-register-link {
        font-size: .78rem !important;
        padding-inline: .65rem !important;
    }

    .home-hero-content-shell {
        padding-inline: 1.1rem !important;
    }
}