/* 
 * Metin2 Portal - 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;
}

.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;
    }
}