html, body {
    cursor: none;
}

/* Önceki sitenin fontu, tarayıcıda varsa kullanılır, yoksa fallback */
@font-face {
    font-family: 'OriginalRetroFont';
    src: local('Courier New'), local('Courier'), monospace;
}

* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    cursor: none;
}

body {
    font-family: monospace;
    margin: 0;
    padding: 0;
    background-color: rgb(233, 233, 233);
    display: flex;
    flex-direction: column;
    min-height: 111vh; /* Make sure the body takes at least full height */
}

.logo {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    width: 96%;
    background: #ff0000;
    color: white;
    font-size: 40px;
    margin-top: 10px;
}

.logo:hover {
    color: white;
}

nav {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35px;
    width: 96%;
    background: #033c5369;
}

nav ul {
    display: flex; /* Flexbox kullanarak elemanları yatayda düzenle */
    justify-content: flex-start; /* Elemanları sola yasla */
    width: 100%; /* Navigasyon kutusunun tamamını kapla */
}

nav li {
    display: inline-block;
    margin: 0 8px;
    line-height: 35px; /* Nav yüksekliğine uygun olacak şekilde güncelledim */
    margin-top: 0;
}

/* "Login" düğmesi için özel stil */
.login-button {
    margin-left: auto; /* Düğmeyi en sağa yaslamak için otomatik boşluk */
    border-radius: 4px;
}

.login-button a {
   border: 1px solid white; /* Beyaz kenarlık */
   padding: 4px 20px;
   background-color: #033c532d; /* Arka plan rengi */
   color: white; /* Yazı rengi */
   border-radius: 4px;
}

.login-button a:hover {
    background-color: #055f7a65; /* Hover efekti için farklı bir renk */
    color: white;
}

nav a {
    color: white;
    font-size: 18px;
    border: 1px solid transparent;
    padding: 5px 20px;
}

nav a:hover {
    color: red;
}

.page-layout {
    display: flex;
    justify-content: left;
    width: 96%;
    max-width: 92% - 200px;
    margin: 8px 2%; /* ortala */
    gap: 20px; /* sidebar ile içerik arası boşluk */
}

/* Sidebar sabit genişlikte */
.left-sidebar {
    flex: 0 0 180px; /* hep 200px genişlik */
    padding: 4px;
    border: 0px solid #000;
    background-color: #dfdede;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

/* Sidebar'daki tüm linkleri hedef alır */
.left-sidebar a {
    display: block;
    padding: 8px 4px;
    color: #000;
    text-decoration: none;
    border: none;
    background: none;
    box-shadow: none;
    font-size: 16px;
    cursor: none;  /* Fare imlecinin ok olarak kalmasını sağlar */
    transition: background-color 0.3s ease, color 0.1s ease; /* Yumuşak bir geçiş efekti ekler */
}

/* Fareyle üzerine gelindiğinde yapılacak değişiklikler */
.left-sidebar a:hover {
    background-color: #e9e9e9;  /* Hafif gri bir arka plan rengi ekler */
    color: #ff0000;                /* Metin rengini biraz koyulaştırır */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Hafif bir gölge ekleyerek 3D hissi verir */
    border-radius: 4px;         /* Köşeleri hafifçe yuvarlar */
}

/* İçerik geri kalan alanı kaplasın */
.main-content-area {
    flex: 1; /* kalan alanı kapla */
    border: 0px solid #000;
    padding: 20px;
}


/* Arama çubuğu için ana konteyner */
.search-container {
    width: 96%;
    margin: 3px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ccc;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* Arama kutusu */
.search-box {
    display: flex;
    align-items: center;
    border: 1px solid #ff00006c;   /* kırmızı çerçeve */
    border-radius: 2px;
    overflow: hidden;
    width: 500px;
    background: #e8e4e4; /* beyaz arkaplan */
}

/* Yazı alanı */
.search-box input {
    border: none;
    outline: none;
    font-family: monospace;
    font-size: 1em;
    flex-grow: 1;
    padding: 6px 8px;
    background: transparent;
}

/* Buton */
.search-box button {
    font-family: monospace;
    border: none;
    background-color: #e8e4e4;
    color: #ff0000;
    padding: 6px 14px;
    transition: background 0.2s;
}

.search-box button:hover {
    background-color: #ff0000; /* hover efekti */
    color: #e8e4e4;
}

/* Prompt karakteri */
.prompt-char {
    font-weight: bold;
    color: #ff0000;
    padding: 0 6px;
}

/* ========================================= */
/* === YASAKLAMA PENCERESİ STİLLERİ BAŞLANGIÇ === */
/* ========================================= */

/* Pencereyi tüm ekranı kaplayan bir katman yapar */
.ban-window {
    position: fixed; /* Sayfa kaysa bile yerinde kalır */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Arkadaki içeriği karartan yarı saydam siyah */
    display: flex; /* İçeriği dikey ve yatayda ortalamak için */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Diğer tüm öğelerin üzerinde görünmesini sağlar */
}

/* Asıl bilgilendirme kutusu */
.ban-content {
    background-color: #ffffff; /* Kutu arka planı: Beyaz */
    padding: 25px 35px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border-top: 5px solid #d9534f; /* Üst kenarda kırmızı bir vurgu */
    max-width: 500px; /* Geniş ekranlarda kutunun çok yayılmasını önler */
    width: 90%; /* Mobil uyumluluk için */
    text-align: left; /* İstenildiği gibi tüm metinleri sola dayalı yapar */
}

/* "Banned for 30 Days" başlığı */
.ban-title {
    color: #d9534f; /* Başlık rengi: Kırmızı */
    font-size: 2em; /* 1em = 16px */
    margin-top: 0;
    margin-bottom: 20px;
}

/* Bilgilendirme kutusundaki tüm paragraflar için genel stil */
.ban-content p {
    color: #333333; /* Metin rengi: Okunabilirlik için koyu gri */
    line-height: 1.6; /* Satır aralığı */
    margin: 12px 0;
    font-size: 0.95em; /* 15px */
}

/* Önemli bilgileri (sebep, not vb.) vurgulamak için */
.moderator-note, .ban-reason, .offensive-item {
    background-color: #f2f2f2; /* Vurgu için açık gri arka plan */
    border-left: 4px solid #d9534f; /* Solunda kırmızı bir şerit */
    padding: 10px 15px;
    margin: 15px 0;
    border-radius: 4px;
}

/* İtiraz e-posta linki */
.appeal a {
    color: #007bff; /* Standart link rengi */
    font-weight: bold;
    text-decoration: none;
}

.appeal a:hover {
    text-decoration: underline;
}

/* "Logout" düğmesi */
.ban-logout-button {
    display: block; /* margin: auto'nun çalışması için gerekli */
    width: fit-content; /* İçeriğe göre genişlik */
    margin: 30px auto 0 auto; /* Üstten boşluk, soldan ve sağdan otomatik hizalama (ortalar) */
    background-color: #ffffff; /* Düğme arka planı: Kırmızı */
    color: #c9302c; /* Düğme metni: Beyaz */
    border: 1.5px solid #c9302c; /* Kırmızı kenarlık */
    padding: 8px 32px;
    font-size: 1em; /* 16px */
    border-radius: 4px;
    transition: background-color 0.2s ease-in-out; /* Üzerine gelince renk geçişi efekti */
}

/* Düğmenin üzerine gelindiğindeki hali */
.ban-logout-button:hover {
    background-color: #c9302c; /* Daha koyu bir kırmızı */
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Hafif gölge efekti */
}

.ban-date {
    color: #c9302c;
}

.a-button-a {
    color: #007bff; /* Standart link rengi */
    font-weight: bold;
    text-decoration: none;
}

.a-button-a:hover {
    text-decoration: underline;
}

/* ======================================= */
/* === YASAKLAMA PENCERESİ STİLLERİ SON === */
/* ======================================= */

/* ------------------------------ */
/* Mobil Navigasyon için stiller  */
/* ------------------------------ */

@media (max-width: 768px) {

    /* Normal menü gizleniyor, sadece login ve Navigasyon kalıyor */
    nav ul li:not(.login-button):not(.mobile-nav-toggle) {
        display: none;
    }

    .mobile-nav-toggle {
        display: block;
    }

    #navToggle {
        background-color: red;
        color: white;
        border: none;
        padding: 4px 10px;
        border-radius: 3px;
        border: red 2px solid;
        font-size: 0.85em;
    }

    #navToggle:hover {
        background-color: white;
        color: red;
    }

    /* Sol menü başlangıçta gizli */
    .left-sidebar {
        position: fixed;
        top: 0;
        left: -100%; /* Başta ekran dışında */
        width: 250px;
        height: 100vh;
        background-color: #e9f5fe;
        box-shadow: 2px 0 8px rgba(0,0,0,0.2);
        transition: left 0.3s ease;
        z-index: 1000;
        padding: 20px;
        overflow-y: auto;
    }

    .left-sidebar::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Edge */
    }

    /* Menü açıldığında */
    .left-sidebar.active {
        left: 0;
    }

    /* Menü açıkken arka plan karartma efekti */
    body.nav-open::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        z-index: 900;
        transition: opacity 0.3s ease;
    }

    /* Diğer içerik menü altında kalsın */
    .main-content-area {
        position: relative;
        z-index: 1;
    }
}

/* Navigasyon düğmesini masaüstünde gizle */
@media (min-width: 769px) {
    .mobile-nav-toggle {
        display: none !important;
    }
}