body {
    background-color: var(--darker-color);
    color: var(--primary-color);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
}

body::before{
    background-color: var(--darker-color) !important;
}

/* Scroll performance optimization */
.row.g-2 {
    contain: layout style;
}

.container {
    contain: layout style;
}

/* Tema Renk Ayarları */
body {
    color: var(--primary-color);
}

/* Açık tema için metin renkleri - Navbar ve Footer hariç */
body.light-theme *:not(.navbar *, .footer *) {
    color: black !important;
}

/* Koyu tema için metin renkleri - Navbar ve Footer hariç */
body:not(.light-theme) *:not(.navbar *, .footer *) {
    color: var(--primary-color) !important;
}

/* Navbar ve Footer elementleri için renk koruması */
.navbar *, .footer * {
    color: inherit;
}

/* Navbar ve Footer için özel tema renkleri */
body.light-theme .nav-link,
body.light-theme .navbar-brand,
body.light-theme .navbar *,
body.light-theme .footer * {
    color: var(--light-primary-color) !important;
}

/* Light tema için footer ve en beğenilenler renk düzenlemeleri */
body.light-theme .footer *,
body.light-theme .most-liked-anime *,
body.light-theme .most-liked-details *,
body.light-theme .most-liked-info * {
    color: var(--primary-color) !important;
}

/* Açık tema için metin renkleri - Footer ve en beğenilenler özel durumu */
body.light-theme *:not(.navbar *, .footer *, .most-liked-anime *, .most-liked-details *, .most-liked-info *) {
    color: black !important;
}

/* Koyu tema için metin renkleri */
body:not(.light-theme) *:not(.navbar *) {
    color: var(--primary-color) !important;
}

/* Footer ve En Beğenilenler için spesifik tema renkleri */
body.light-theme .footer,
body.light-theme .footer *,
body.light-theme .most-likes,
body.light-theme .most-likes *,
body.light-theme .most-likes,
body.light-theme .most-likes *,
body.light-theme .most-likes,
body.light-theme .most-likes * {
    color: var(--primary-color) !important;
}

/* Genel metin renkleri için yeni spesifik seçici */
body.light-theme *:not(
    .navbar,
    .navbar *,
    .footer,
    .footer *,
    .most-likes,
    .most-likes *,
    .most-likes,
    .most-likes *,
    .most-likes,
    .most-likes *
) {
    color: black !important;
}

/* Koyu tema için spesifik seçici */
body:not(.light-theme) *:not(.navbar, .navbar *) {
    color: var(--primary-color) !important;
}

/* Responsive Düzenlemeler */
@media (max-width: 768px) {
    .alphabet-nav .nav {
        flex-wrap: nowrap;
    }
    
    .alphabet-nav .nav-link {
        padding: 0.5rem;
    }
}

/* Ana Sayfa Düzeni */
.page-wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
    background-color: #f8f9fa;
}


/* Ana İçerik Alanı */
.main-content {
    width: 60%;
    margin: 0 auto;
    padding: 0;
    background-color: var(--light-color);
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    min-height: 100vh;
}

/* Responsive Düzenlemeler */
@media (max-width: 1200px) {
    .ad-space {
        display: none;
    }
    
    .main-content {
        width: 100%;
    }
}

/* Arama Dropdown Stilleri */
.search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% - 1px); /* Arama çubuğuyla birleşmesi için */
    left: 0;
    /* Sadece arama input'u genişliğinde olması için */
    width: calc(100% - 76px); /* Arama butonu genişliği + margin değeri */
    background: var(--card-bg);
    border: 2px solid var(--accent-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    background-color: rgba(33, 37, 41, 0.85);
}

@supports (backdrop-filter: blur(8px)) {
    .search-container .dropdown-menu {
        backdrop-filter: blur(8px);
    }
    .search-dropdown {
        backdrop-filter: blur(8px);
    }
}

@media (max-width: 768px) {
    .search-container .dropdown-menu,
    .search-dropdown {
        backdrop-filter: none;
    }
}

/* Arama Dropdown Stilleri */
.search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% - 1px);
    /* Bootstrap'in form-control genişliğiyle eşleştirme */
    right: 90px; /* button width + margin */
    background: var(--card-bg);
    border: 2px solid var(--accent-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    background-color: rgba(33, 37, 41, 0.85);
}

.search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.1);
    background-color: rgba(16, 15, 15, 0.017);
}

.search-item:last-child {
    border-bottom: none;
}

.search-item:hover {   
     background-color: rgba(6, 5, 5, 0.22);

}

.search-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.search-item img {
    width: 45px;
    height: 63px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.search-item-info {
    display: flex;
    flex-direction: column;
}

.search-item-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
}

.search-item-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.no-results {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* Position the dropdown relative to the search form */
.d-flex {
    position: relative;
    width: 100%;
}

.d-flex .form-control:focus {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: var(--accent-color);
    box-shadow: none;
}

/* Form input focus durumunda border düzenlemesi */
.d-flex .form-control:focus {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: var(--accent-color);
    box-shadow: none;
}

/* Responsive düzenleme */
@media (max-width: 992px) {
    .search-dropdown {
        width: calc(100% - 90px);
        right: 90px;
    }
}

@media (max-width: 576px) {
    .search-dropdown {
        width: calc(100% - 90px);
        right: 90px;
    }
}

/* Arama formu ve dropdown düzeni */
.d-flex {
    position: relative;
    width: 100%;
}

/* Arama Dropdown Stilleri */
.search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--card-bg);
    border: 2px solid var(--accent-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    background-color: rgba(33, 37, 41, 0.85);
}

@supports (backdrop-filter: blur(8px)) {
    .filter-form-dropdown {
        backdrop-filter: blur(8px);
    }
}

@media (max-width: 768px) {
    .filter-form-dropdown {
        backdrop-filter: none;
    }
}

/* Arama input focus stilleri */
.d-flex .form-control:focus {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: var(--accent-color);
    box-shadow: none;
}

/* Responsive ayarlamalar */
@media (min-width: 992px) {
    .d-flex {
        width: auto;
    }
    
    .search-dropdown {
        width: 100%;
        min-width: 300px; /* Minimum genişlik */
    }
}

@media (max-width: 991px) {
    .search-dropdown {
        width: 100%;
    }
}

/* Anime Kartları Stilleri */
.anime-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(7, 6, 6, 0.2);
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.anime-card img {
    width: 100%;
    height: auto;
    display: block;
}

.anime-details {
    position: absolute;
    bottom: -100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.75);
    padding: 15px;
    color: white;
    transition: bottom 0.3s ease-in-out;
}

.anime-card:hover .anime-details {
    bottom: 0;
}

.anime-info {
    padding: 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.anime-info h3, .anime-info h4 {
    color: white;
    margin: 0;
    font-size: 1.1rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.anime-details p {
    margin: 5px 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

/* En Beğenilenler Bölümü Stilleri */
.most-likes {
    margin-top: 20px;
    padding: 1.5rem;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.most-likes .sidebar-title {
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.most-likes #mostLikedContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

@media (max-width: 768px) {
    .most-likes #mostLikedContainer {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 10px;
    }
}

.most-likes .anime-card {
    margin-bottom: 0;
    height: auto;
}

.most-likes .anime-card img {
    height: auto;
    object-fit: cover;
}

.anime-link {
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.anime-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

/* Profil butonu stilleri */
.profile-btn {
    position: relative;
    cursor: pointer;
}

.profile-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #343a40;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    min-width: 150px;
    z-index: 1000;
    margin-top: 0.5rem;
}

.profile-dropdown a {
    display: block;
    padding: 8px 16px;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s;
}

.profile-dropdown a:hover {
    background-color: rgba(255,255,255,0.1);
}

.profile-btn:hover .profile-dropdown {
    display: block;
}

/* Profil butonu ve dropdown stilleri */
.logged-in {
    position: relative;
}

.profile-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.profile-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #343a40;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    min-width: 180px;
    margin-top: 0.5rem;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.profile-dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s;
}

.profile-dropdown a:hover {
    background-color: rgba(255,255,255,0.1);
}

.logged-in:hover .profile-dropdown {
    display: block;
}

/* Anime Kart Aksiyon Butonları */
.anime-actions {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: rgba(0, 0, 0, 0.05);
}

.anime-actions button {
    flex: 1;
    margin: 0 5px;
    font-size: 0.9rem;
}

.like-btn.active {
    background-color: #dc3545;
    color: white;
}

.follow-btn.active {
    background-color: #0d6efd;
    color: white;
}

/* Liste Seçici Butonlar */
.list-selector {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.list-selector button {
    padding: 10px 20px;
    font-size: 1.1rem;
    min-width: 150px;
}

/* Anime Liste Konteyneri */
#animeListContainer {
    min-height: 300px;
}

/* Profil Sayfası Stilleri */
.profile-sidebar {
    background-color: var(--dark);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.profile-image-container {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto;
}

.profile-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary);
}

.image-upload-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--primary);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.image-upload-btn:hover {
    background: var(--primary-dark);
}

.profile-edit-section {
    margin-top: 15px;
}

#profileEditForm {
    margin-top: 20px;
}

#profileEditForm .form-control {
    background-color: var(--dark-light);
    border-color: var(--border-color);
    color: var(--text-color);
}

#profileEditForm .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}

/* Profil bilgileri stilleri */
.profile-user-info {
    margin-top: 1rem;
}

.profile-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#passwordChangeForm {
    background: rgba(0,0,0,0.03);
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
}

/* Navbar profil butonu stilleri */
.nav-profile {
    position: relative;
    min-width: 120px;
    text-align: center;
}

.nav-profile .profile-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.nav-profile .profile-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: #343a40;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    margin-top: 0.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
}

.nav-profile .profile-dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s;
}

.nav-profile .profile-dropdown a:hover {
    background-color: rgba(255,255,255,0.1);
}

.nav-profile:hover .profile-dropdown {
    display: block;
}

.logged-in {
    background-color: #28a745;
    border-color: #28a745;
}

.logged-in:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* Profil sayfası stilleri */
.profile-icon {
    margin-bottom: 1rem;
    color: #343a40;
}

.username-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.edit-username-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

#usernameEditContainer {
    max-width: 250px;
    margin: 0 auto;
}

#usernameEditContainer .input-group {
    margin-top: 0.5rem;
}

/* Profil Sayfası Özel Stilleri */
.profile-sidebar {
    background-color: var(--dark);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
}

.profile-icon {
    color: var(--accent-color);
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.profile-icon:hover {
    color: var(--accent-color-hover);
}

.profile-user-info {
    color: var(--text-color);
}

.username-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.edit-username-btn {
    color: var(--accent-color);
    border-color: var(--accent-color);
    background: transparent;
    padding: 0.25rem 0.5rem;
}

.edit-username-btn:hover {
    background-color: var(--accent-color);
    color: var(--light);
}

#usernameEditContainer .input-group {
    background-color: var(--darker);
}

#usernameEditContainer input {
    background-color: var(--dark);
    border-color: var(--border-color);
    color: var(--text-color);
}

#passwordChangeForm {
    background-color: var(--darker);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin: 1.5rem 0;
}

#passwordChangeForm .form-control {
    background-color: var(--dark);
    border-color: var(--border-color);
    color: var(--text-color);
}

#passwordChangeForm .form-control:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--accent-color-rgb), 0.25);
}

#passwordChangeForm .form-label {
    color: var(--text-color);
}

.btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.btn-primary:hover {
    background-color: var(--accent-color-hover);
    border-color: var(--accent-color-hover);
}

.btn-outline-danger {
    color: var(--danger);
    border-color: var(--danger);
}

.btn-outline-danger:hover {
    background-color: var(--danger);
    color: var(--light);
}

/* Liste seçici butonları */
.list-selector {
    background-color: var(--dark);
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
}

.list-selector button {
    background-color: var(--darker);
    border-color: var(--border-color);
    color: var(--text-color);
}

.list-selector button.active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--light);
}

/* Anime liste konteyneri */
#animeListContainer {
    background-color: var(--dark);
    border-radius: var(--border-radius);
    padding: 1.5rem;
}

/* Watch sayfası sezon seçici stil düzenlemeleri */
body.light-theme #seasonSelect,
body.light-theme #seasonSelect * {
    color: var(--primary-color) !important;
}

body.light-theme .episodes-container select,
body.light-theme .season-filter select {
    color: var(--primary-color) !important;
    
    border-color: var(--primary-color) !important;
}

body.light-theme .episodes-container select option,
body.light-theme .season-filter select option {
    color: var(--primary-color) !important;
   
}

/* Theme Switch */
.nav {
    z-index: 1000;
}

.theme-switch {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Dairenin sol köşeye hizalanması için */
    width: 45px; /* Genişliği azalttık */
    height: 24px; /* Yüksekliği azalttık */
    background: var(--card-bg);
    border-radius: 12px;
    cursor: pointer;
    padding: 2px;
    margin-left: auto; /* Navbar'ın sonuna almak için */
}

.theme-switch::before {
    content: '';
    position: relative; /* absolute yerine relative yaptık */
    width: 20px; /* Daire boyutunu küçülttük */
    height: 20px;
    border-radius: 50%;
    background: var(--theme-switch-dark);
    transition: 0.3s;
    left: 0;
}

.theme-switch.light {
    justify-content: flex-end; /* Dairenin sağ köşeye hizalanması için */
}

.theme-switch.light::before {
    left: 0; /* Sol margin'i kaldırdık çünkü justify-content kullanıyoruz */
    background: var(--theme-switch-light);
}

/* Light tema için genel stiller */
body.light-theme {
    background-color: var(--light-bg) !important;
    color: black;
}

body.light-theme h1, h2, h3, p{
    color: black ;
}



.horizontal-ads{
    background-color: var(--light-bg) !important;
}

body.light-theme option{
    color: black !important;
}

/* Koyu arka planlı elementlerin açık temadaki stilleri */
body.light-theme .search-dropdown,
body.light-theme .profile-dropdown,
body.light-theme .nav,
body.light-theme .theme-switch,
body.light-theme .card,
body.light-theme .anime-card,
body.light-theme .search-container,
body.light-theme .profile-sidebar,
body.light-theme .list-selector,
body.light-theme #animeListContainer,
body.light-theme #passwordChangeForm {
    background-color: var(--light-bg) !important;
}

/* Hover efektlerinin açık temada düzgün çalışması için */
body.light-theme .anime-card:hover,
body.light-theme .profile-dropdown a:hover,
body.light-theme .search-item:hover {
    background-color: var(--light-bg) !important;
}

/* Navbar link hover renkleri */
.navbar .nav-link:hover,
.navbar .dropdown-item:hover,
.navbar-brand:hover,
.navbar a:hover {
    color: var(--secondary-color) !important;
    transition: color 0.3s ease;
}

/* Light tema için navbar hover */
body.light-theme .navbar .nav-link:hover,
body.light-theme .navbar .dropdown-item:hover,
body.light-theme .navbar-brand:hover,
body.light-theme .navbar a:hover {
    color: var(--secondary-color) !important;
}

/* Sosyal medya ikonları hover renkleri */
.social-links-nav .fa-facebook:hover {
    color: #004cff !important;
}

.social-links-nav .fa-instagram:hover {
    color: #e1306c !important;
}

.social-links-nav .fa-discord:hover {
    color: #7289da !important;
}

.social-links-nav .fa-twitter:hover {
    color: #1da1f2 !important;
}

.social-links-nav i {
    transition: color 0.3s ease;
}

/* Footer sosyal medya ikonları hover renkleri */
.footer .social-links i.fa-facebook:hover {
    color: #185ae9 !important;
}

.footer .social-links i.fa-instagram:hover {
    color: #e1306c !important;
}

.footer .social-links i.fa-discord:hover {
    color: #7289da !important;
}

.footer .social-links i.fa-twitter:hover {
    color: #1da1f2 !important;
}

.footer .social-links i {
    transition: color 0.3s ease;
}

/* Gereksiz stilleri kaldır */
/* Eski tanımlamaları kaldır */