/* Font Tanımları (Lokal) */
/* cinzel-regular - latin */
/* cinzel-regular - latin */
/* ------------------------------------------------------------------------------------------------------------------------------- */
/* --- Renk Paleti --- */
:root {
    /* Arka Plan Renkleri */
    --color-background-darkest: #0a0a0a;
    --color-background-dark: #141414;
    --color-background-panel: rgba(34, 34, 34, 0.5);
    --color-background-input: #222222;

    /* Metin Renkleri */
    --color-text-primary: #c0c0c0;
    --color-text-headings: #ffffff;
    --color-text-secondary: #888888;
    --color-text-inverted: #000000;

    /* Vurgu Renkleri (Sitenin Kimliği) */
    --color-accent-primary: #a98f5a;
    --color-accent-primary-hover: #d4af37;

    /* Kenarlık Renkleri */
    --color-border-primary: #333333;
    --color-border-secondary: #444444;

    /* Özel Renkler */
    --color-status-online: #4CAF50;
    --color-brand-discord: #5865F2;
    --color-brand-discord-hover: #4f5bda;
}
/* ------------------------------------------------------------------------------------------------------------------------------- */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/cinzel-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cinzel-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/cinzel-v26-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v49-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v49-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ------------------------------------------------------------------------------------------------------------------------------- */
/* ---Genel Ayarlar ve Resetleme */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--color-background-darkest);
    color: var(--color-text-primary);
    background-image: url('https://www.transparenttextures.com/patterns/dark-denim.png');
    font-size: 14px;
}
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}
h1, h2, h3 {
    font-family: 'Cinzel', serif;
    color: var(--color-text-headings);
    font-weight: 700;
}
ul {
    list-style: none;
}
a {
    color: var(--color-accent-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}
    a:hover {
        color: var(--color-accent-primary-hover);
    }
/* ------------------------------------------------------------------------------------------------------------------------------- */
/* --- Header (Üst Kısım) --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border-primary);
    margin-bottom: 20px;
}
    .logo h1 {
        font-size: 2.5em;
        color: var(--color-accent-primary-hover);
        text-shadow: 0 0 5px var(--color-accent-primary-hover), 0 0 10px var(--color-text-inverted);
    }
    .logo p {
        font-size: 0.9em;
        color: var(--color-text-secondary);
    }
nav ul li a {
    padding: 10px 15px;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--color-text-primary);
    border-bottom: 2px solid transparent;
}
nav ul li a:hover, nav ul li a.active {
    color: var(--color-text-headings);
    border-bottom: 2px solid var(--color-accent-primary-hover);
}
/* ------------------------------------------------------------------------------------------------------------------------------- */
/* --- Main Content (Ana İçerik) --- */
main {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 25px;
}
/* Hero Section */
.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.7)), url('https://i.imgur.com/eQhKkG5.jpeg') no-repeat center center/cover;
    padding: 60px 40px;
    text-align: center;
    border: 1px solid var(--color-border-secondary);
    border-radius: 4px;
}
    .hero h2 {
        font-size: 2.2em;
        color: var(--color-accent-primary-hover);
        margin-bottom: 10px;
    }
/* Buttonlar */
.btn {
    display: inline-block;
    padding: 12px 25px;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    text-transform: uppercase ;
    border-radius: 3px;
    transition: all 0.3s ease;
    border: 1px solid;
}
    .btn-primary {
        background-color: var(--color-accent-primary);
        color: var(--color-text-inverted);
        border-color: var(--color-accent-primary-hover);
    }
        .btn-primary:hover {
            background-color: var(--color-accent-primary-hover);
            color: var(--color-text-inverted);
            box-shadow: 0 0 10px var(--color-accent-primary-hover);
        }
    .btn-secondary {
        background-color: transparent;
        color: var(--color-text-primary);
        border-color: var(--color-text-secondary);
    }
        .btn-secondary:hover {
            background-color: var(--color-background-input);
            color: var(--color-text-headings);
            border-color: var(--color-text-primary);
        }
/* Sunucu Bilgileri */
.server-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 25px 0;
}
.info-box {
    background: var(--color-background-panel);
    border: 1px solid var(--color-border-primary);
    padding: 15px;
    text-align: center;
    border-radius: 4px;
}
    .info-box h3 {
        color: var(--color-accent-primary);
    }
.status-online {
    color: var(--color-status-online);
    text-shadow: 0 0 5px var(--color-status-online);
}
/* Haberler */
.news {
    background: var(--color-background-panel);
    border: 1px solid var(--color-border-primary);
    padding: 20px;
    border-radius: 4px;
}
    .news h2 {
        border-bottom: 1px solid var(--color-border-secondary);
        padding-bottom: 10px;
    }
    .news article {
        margin-top: 20px;
        padding-bottom: 20px;
        border-bottom: 1px dashed var(--color-border-primary);
    }
        .news article:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
.news-date {
    color: var(--color-accent-primary);
}
/* ------------------------------------------------------------------------------------------------------------------------------- */
/* --- Sidebar (Yan Panel) --- */
.widget {
    background: var(--color-background-dark);
    border: 1px solid var(--color-border-primary);
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 4px;
}
    .widget h3 {
        border-bottom: 1px solid var(--color-border-secondary);
        padding-bottom: 10px;
        margin-bottom: 15px;
    }
/* Giriş Paneli*/
.login-panel input {
    background: var(--color-background-input);
    border: 1px solid var(--color-border-secondary);
    color: var(--color-text-headings);
}
.login-panel button {
    background: var(--color-accent-primary);
    color: var(--color-text-inverted);
}
    .login-panel button:hover {
        background: var(--color-accent-primary-hover);
    }
/* Sıralama Paneli */
.rankings ol li {
    border-bottom: 1px dashed var(--color-border-primary);
}
    .rankings ol li span {
        color: var(--color-accent-primary);
    }
/* Discord Paneli */
.btn-discord {
    background-color: var(--color-brand-discord);
    color: var(--color-text-headings);
}
    .btn-discord:hover {
        background-color: var(--color-brand-discord-hover);
        color: var(--color-text-headings);
    }
/* ------------------------------------------------------------------------------------------------------------------------------- */
/* --- Footer (Alt Kısım) --- */
footer {
    border-top: 1px solid var(--color-border-primary);
    color: var(--color-text-secondary);
}