/* ------------------------------------
   GENEL STİLLER
------------------------------------ */

html.dark, body.dark {
    background-color: #181818 !important;
    color: #eee !important;
}

/* HEADER */
html.dark header, body.dark header {
    background-color: #232323 !important;
    border-bottom: 1px solid #444 !important;
    color: #eee !important;
}

/* MENÜLER */
html.dark .profile-menu,
html.dark .create-menu,
html.dark .news-menu,
html.dark .game-menu,
body.dark .profile-menu,
body.dark .create-menu,
body.dark .news-menu,
body.dark .game-menu {
    background-color: #232323 !important;
    color: #eee !important;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.7);
}

/* Menü linkleri */
html.dark .profile-menu a,
html.dark .create-menu a,
html.dark .news-menu a,
html.dark .game-menu a,
body.dark .profile-menu a,
body.dark .create-menu a,
body.dark .news-menu a,
body.dark .game-menu a {
    color: #eee !important;
}

html.dark .search-container input,
body.dark .search-container input {
    background: #232323 !important;
    color: #eee !important;
    border-color: #444 !important;
}

html.dark .search-suggestions,
body.dark .search-suggestions {
    background-color: #232323 !important;
    color: #eee !important;
    box-shadow: 0px 4px 16px rgba(0,0,0,0.6);
}

html.dark #nav-list .notification-bell i,
body.dark #nav-list .notification-bell i {
    color: #ffce00 !important;
}

html.dark #nav-list .notification-count,
body.dark #nav-list .notification-count {
    background: #e74c3c !important;
    color: #fff !important;
}

html.dark .profile-menu a:hover,
html.dark .create-menu a:hover,
html.dark .news-menu a:hover,
html.dark .game-menu a:hover,
body.dark .profile-menu a:hover,
body.dark .create-menu a:hover,
body.dark .news-menu a:hover,
body.dark .game-menu a:hover {
    background-color: #444 !important;
}

/* Genel dark renk blokları... */

/* Dark modda navbar başlıkları ve linkler */
html.dark #nav-list li span#Kategori,
body.dark #nav-list li span#Kategori {
    color: #eee !important;
}

html.dark .create-menu a,
body.dark .create-menu a {
    color: #eee !important;
}

html.dark #nav-list a,
body.dark #nav-list a {
    color: #eee !important;
}

html.dark .search-option,
body.dark .search-option {
    color: #e0e0e0 !important;     /* Açık gri-beyaz, tam okunur */
    background: #232323 !important; /* Hover’ı override için */
    border-bottom: 1px solid #333 !important;
}

html.dark .search-option:hover,
body.dark .search-option:hover {
    background: #25292f !important;
}

html.dark .search-container input::placeholder,
body.dark .search-container input::placeholder {
    color: #aaa !important;
}

/* Hover’ı override için */
html.dark a {
    color: #64B5F6  !important; /* Bu daha çok link gibi, 99c3ff ise google'inki, daha az linkimsi belki gelecekte bunu kullanırız*/
}
html.dark a:hover {
    color: #42A5F5 !important;
}






body {
    margin: 8px !important;
    padding: 0 !important;
}


/* Header genel düzen */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #ddd;
    font-weight: 400;
    font-family: 'Merriweather', serif;
    font-size: 16px;
}

.plain-link {
    color: inherit;
    text-decoration: none;
}

/* Logo */
.logo {
    margin-right: 20px;
    cursor: pointer;
}

#Kategori {
    color: initial;
    margin-right: 0; 
}

/* Menü düzeni */
#main-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#nav-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

#nav-list li {
    margin-left: 20px;
    font-size: 18px;
}

/* Profil, Oluşturduklarım, News ve Game menülerini düzenle */
.profile-container3, .create-container, .news-container, .game-container {
    display: flex;
    align-items: center;
    position: relative; 
}

/* Profil resmi boyutu */
.profile-container3 img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 10px;
}

/* Profil menüsü */
.profile-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px;
    z-index: 1;
    width: 200px;
    top: 50px; 
    right: -20px; 
}

/* Oluşturduklarım menüsü */
.create-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px;
    z-index: 1;
    width: 200px;
    top: 20px; 
    right: 0;
}

/* News menüsü */
.news-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px;
    z-index: 1;
    width: 200px;
    top: 20px;
    right: 0;
}

/* Game menüsü */
.game-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px;
    z-index: 1;
    width: 200px;
    top: 20px;
    right: 0;
}

/* Menü içindeki bağlantıların düzeni */
.profile-menu a, .create-menu a, .news-menu a, .game-menu a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 8px 0;
}

.profile-menu a:hover,
.create-menu a:hover,
.news-menu a:hover,
.game-menu a:hover {
    background-color: #f0f0f0;
}

/* Bildirim çanı kapsayıcı olarak li etiketi kullanılıyor */
#nav-list .notification-bell {
    position: relative;
    font-size: 24px; /* Çan simgesi boyutu */
    margin-left: 20px; /* Oluşturduklarım ile aradaki boşluk */
    display: flex;
    align-items: center;
}

/* Çan simgesi için stiller */
#nav-list .notification-bell i {
    color: #333;
}

/* Bildirim sayısı kapsayıcı */
#nav-list .notification-count {
    position: absolute;
    top: -6px;
    right: -10px;
    background: #e74c3c;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: none;
}

/* Bildirim sayısı görünür olduğunda */
#nav-list .notification-count.show {
    display: inline-block;
}



/* ------------------------------------
   ARAMA KUTUSU (Güncellenmiş)
------------------------------------ */

.search-container {
    position: relative !important;
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important; /* Ortalıyoruz */
    margin-right: 20px !important; 
}

/* Arama inputu daha büyük ve modern tasarım */
.search-container input {
    width: 100% !important;
    max-width: 400px !important;            /* Daha geniş bir max-width */
    padding: 10px 14px !important;          /* İç boşlukları arttırdık */
    font-size: 16px !important;
    border: 2px solid #ccc !important;      /* Sedikçe koyu kenarlık */
    border-radius: 6px !important;
    outline: none !important;
    transition: border-color 0.3s, box-shadow 0.3s !important;
    font-family: 'Segoe UI', Tahoma, sans-serif !important; /* Modern bir font */
}

.search-container input:focus {
    border-color: #999;
    box-shadow: 0 0 4px rgba(0,0,0,0.1);
}

/* Açılır öneri kutusu */
.search-suggestions {
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;                      
    transform: translateX(-50%);   /* Kutuyu tam inputun ortasında tut */
    width: 100%;
    max-width: 400px;
    background-color: #fff;
    box-shadow: 0px 4px 16px rgba(0,0,0,0.15);
    border-radius: 6px;
    display: none;
    z-index: 9999;
    margin-top: 4px;
    padding: 6px 0;
}

/* Öneriler */
.search-option {
    padding: 10px 14px;
    cursor: pointer;
    color: #333;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 15px;
    border-bottom: 1px solid #f0f0f0;
}

/* Sonuncu elemana sınır çizgisi uygulama */
.search-option:last-child {
    border-bottom: none;
}

.search-option:hover {
    background-color: #f0f0f0;
}

/* ------------------------------------
   MOBİL (max-width: 768px)
------------------------------------ */
@media (max-width: 768px) {
    header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    .hamburger {
        display: block;
        cursor: pointer;
        width: 30px;
        height: 25px;
        position: relative;
        z-index: 3;
    }

    .hamburger div {
        position: absolute;
        width: 100%;
        height: 4px;
        background-color: #333;
        left: 0;
        transition: all 0.3s ease;
    }

    .hamburger div:nth-child(1) {
        top: 0;
    }
    .hamburger div:nth-child(2) {
        top: 10px;
    }
    .hamburger div:nth-child(3) {
        top: 20px;
    }

    .hamburger.active div:nth-child(1) {
        transform: rotate(45deg);
        top: 10px;
    }
    .hamburger.active div:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active div:nth-child(3) {
        transform: rotate(-45deg);
        top: 10px;
    }

    #main-nav {
        display: none;
        width: 100%;
        background-color: #f8f8f8;
        position: absolute;
        top: 60px;
        left: 0;
        flex-direction: column;
        padding: 10px 0;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        z-index: 2;
    }

    #main-nav.active {
        display: flex;
    }

    #nav-list {
        flex-direction: column;
        align-items: flex-start;
    }

    #nav-list li {
        width: 100%;
        margin: 10px 0;
        padding: 0 20px;
        position: relative;
    }

    #nav-list li a, #nav-list li span {
        width: 100%;
        display: block;
        padding: 10px 0;
        font-size: 18px;
        color: #333;
        cursor: pointer;
    }

    #nav-list li a:hover {
        background-color: #f0f0f0;
    }

    .profile-menu, .create-menu, .news-menu, .game-menu {
        display: none;
        flex-direction: column;
        padding-left: 20px;
    }

    .profile-container3.active .profile-menu,
    .create-container.active .create-menu,
    .news-container.active .news-menu,
    .game-container.active .game-menu {
        display: flex;
    }

    .profile-menu a, .create-menu a, .news-menu a, .game-menu a {
        padding: 8px 0;
        font-size: 16px;
    }

    .profile-container3 img {
        width: 40px;
        height: 40px;
    }

    #Kategori {
        display: inline;
    }

    .profile-container3,
    .create-container,
    .news-container,
    .game-container {
        width: 100%;
    }

    #main-nav, .profile-menu, .create-menu, .news-menu, .game-menu {
        z-index: 2;
    }

    /* Arama kutusu mobilde biraz daralsın */
    .search-container {
        display: none;
    }
    .search-container input {
        display: none;
    }

    .search-suggestions {
        max-width: 200px;
        left: 0;
        transform: none; /* Mobilde ortalama yerine sola yasla */
    }
}

/* Mobil (max-width: 768px) */
@media (max-width: 1000px) {

}