@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Rajdhani:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    /* Metin2 dogu-savas paleti: kizil/altin, sicak koyu zemin */
    --bg: #120c09;
    --bg-elevated: #1c1310;
    --border: #3a2418;
    --accent: #dc2626;
    --accent-dark: #7a1220;
    --accent-2: #c9a227;
    --gold: #f5b942;
    --text: #f0e6d8;
    --text-dim: #a89a86;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Manrope', sans-serif;
}

/* Admin paneli sade koyu zeminde kalir; site arka plan fotografi sadece
   halka acik sayfalarda (body.admin-body olmayanlarda) gorunur. */
body:not(.admin-body) {
    background-color: #14100c;
    background-image: linear-gradient(rgba(10, 6, 5, .6), rgba(10, 6, 5, .82)), url('/assets/img/bg.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* ---- Keskin kenar kurali: sitede yuvarlak kutu yok, hepsi dovulmus metal
   levha gibi keskin kesim. ---- */
.rounded, .rounded-sm, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl,
.rounded-full, .rounded-t-xl, .rounded-b-xl, .rounded-t-2xl {
    border-radius: 0 !important;
}

/* Sol/sag skyscraper reklamlar ve ust menu disinda kalan orta alani
   (sunucu tanitim + navigasyon) tek bir kutu icine alir, arka plan
   fotografinin ustunde net ama biraz saydam bir "icerik alani" olustur. */
.content-panel {
    position: relative;
    background-color: rgba(20, 13, 10, .66);
    background-image: repeating-linear-gradient(135deg, rgba(220, 38, 38, .035) 0, rgba(220, 38, 38, .035) 1px, transparent 1px, transparent 38px);
    border: 1px solid var(--border);
    box-shadow: 0 0 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(245, 185, 66, .08);
    backdrop-filter: blur(3px);
}
.content-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--gold) 50%, var(--accent) 80%, transparent);
    opacity: .85;
}

.font-display {
    font-family: 'Cinzel', serif;
    letter-spacing: .01em;
}
.font-stat {
    font-family: 'Rajdhani', sans-serif;
}

.bg-bg { background: var(--bg); }
.bg-elevated { background: var(--bg-elevated); }
.border-app { border-color: var(--border); }

.gradient-accent {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 55%, var(--gold) 100%);
    transition: filter .15s ease, transform .1s ease;
}
.gradient-accent::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .6s ease;
}
.gradient-accent:hover::after { transform: translateX(120%); }
.gradient-accent:hover { filter: brightness(1.08); }
.gradient-accent:active { transform: scale(.97); }

.text-accent { color: var(--accent); }
.text-accent-2 { color: var(--accent-2); }
.text-gold { color: var(--gold); }

button, .gradient-accent, a[class*="border-app"] {
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, border-color .12s ease, color .12s ease;
}

/* Genel kart hover: hafif kalkma + golge (server-row, admin/toplist kartlari) */
article.bg-elevated {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
article.bg-elevated:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
    border-color: var(--accent-2);
}

.rank-badge {
    background: linear-gradient(180deg, #2a1c14 0%, #1c1310 100%);
    border: 1px solid var(--border);
}
.rank-badge.top1 {
    background: linear-gradient(135deg, var(--gold), #8a6410);
    border-color: transparent;
    color: #1a1206;
    animation: pulse-gold 2s ease-in-out infinite;
}
.rank-badge.top2 { background: linear-gradient(135deg, #c7ccd6, #8b92a5); border-color: transparent; color: #1a1206; }
.rank-badge.top3 { background: linear-gradient(135deg, #d98a4d, #6b3a14); border-color: transparent; color: #1a1206; }

@keyframes pulse-gold {
    0%, 100% { box-shadow: 0 0 6px rgba(245, 185, 66, .5); }
    50% { box-shadow: 0 0 20px rgba(245, 185, 66, .95); }
}

/* VIP kademe: karti hafifce nabiz gibi parlat (kirmizi VIP daha yogun) */
@keyframes pulse-red-border {
    0%, 100% { box-shadow: 0 0 0 rgba(220, 38, 38, 0); }
    50% { box-shadow: 0 0 18px rgba(220, 38, 38, .6); }
}
.border-red-500\/50 { animation: pulse-red-border 2.2s ease-in-out infinite; }

@keyframes pulse-green-border {
    0%, 100% { box-shadow: 0 0 0 rgba(34, 197, 94, 0); }
    50% { box-shadow: 0 0 14px rgba(34, 197, 94, .45); }
}
.border-green-500\/50 { animation: pulse-green-border 2.4s ease-in-out infinite; }

.star {
    color: #3a2b1c;
}
.star.filled {
    color: var(--gold);
}

/* Hero: kizil-altin gradient mesh + parlayan baslik */
.hero-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(122, 18, 32, .4), rgba(18, 12, 9, .92) 62%);
}
.hero-panel::before {
    content: '';
    position: absolute;
    inset: -50% -10% auto -10%;
    height: 160%;
    background:
        radial-gradient(circle at 25% 30%, rgba(220, 38, 38, .3), transparent 55%),
        radial-gradient(circle at 78% 65%, rgba(245, 185, 66, .18), transparent 55%);
    filter: blur(14px);
    pointer-events: none;
}
.hero-panel > * { position: relative; }

.text-glow-accent {
    animation: glow-pulse 2.6s ease-in-out infinite;
}
@keyframes glow-pulse {
    0%, 100% { text-shadow: 0 0 10px rgba(220, 38, 38, .45), 0 0 2px rgba(220, 38, 38, .8); }
    50% { text-shadow: 0 0 24px rgba(220, 38, 38, .9), 0 0 6px rgba(220, 38, 38, 1); }
}

/* Ust menu: alt kenarda kizil-altin parlayan cizgi */
.site-header { border-bottom: 1px solid transparent; position: relative; }
.site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--gold), var(--accent), transparent);
    opacity: .75;
}

.skyscraper-ad {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 250px;
    z-index: 30;
    overflow: hidden;
    display: none;
}
.skyscraper-ad img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.skyscraper-left { left: 0; }
.skyscraper-right { right: 0; }

/* Icerik + sag panel (1180px) her zaman ortalanir; skyscraper'lar sadece
   onlarla cakismayacak kadar genis ekranlarda (>=1900px) gorunur. */
@media (min-width: 2000px) {
    .skyscraper-ad { display: block; }
}

.scrollbar-thin::-webkit-scrollbar { height: 6px; width: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--border); }

[x-cloak] { display: none !important; }

.star-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 2px;
}
.star-rating input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-rating label {
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    color: #3a2b1c;
    transition: color .1s;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
    color: var(--gold);
}

.rich-content h2 { font-family: 'Cinzel', serif; font-size: 1.35rem; font-weight: 700; color: var(--text); margin: 1.25em 0 .5em; }
.rich-content h3 { font-family: 'Cinzel', serif; font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 1em 0 .4em; }
.rich-content p { margin: .6em 0; }
.rich-content ul, .rich-content ol { margin: .6em 0; padding-left: 1.4em; }
.rich-content ul { list-style: disc; }
.rich-content ol { list-style: decimal; }
.rich-content li { margin: .25em 0; }
.rich-content a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.rich-content blockquote { border-left: 3px solid var(--accent-2); padding-left: 1em; margin: 1em 0; color: var(--text-dim); font-style: italic; }
.rich-content img { max-width: 100%; margin: .75em 0; }
.rich-content strong { color: var(--text); font-weight: 700; }