/* --- GENEL KUTU --- */
.notif-box { position: relative; margin-right: 5px; }

.notif-btn { 
    width: 40px; height: 40px; border-radius: 10px; 
    border: 1px solid var(--border-color); background: var(--element-bg); 
    color: var(--text-main); display: flex; align-items: center; justify-content: center; 
    font-size: 18px; cursor: pointer; transition: .2s; 
}

.notif-btn:hover, .notif-dropdown.show ~ .notif-btn { 
    color: var(--primary-color); border-color: var(--primary-color); 
    box-shadow: 0 6px 18px var(--shadow-color); 
}

.notif-badge { 
    position: absolute; top: -5px; right: -5px; 
    background: var(--primary-color); color: #fff; 
    font-size: 10px; font-weight: 800; padding: 2px 6px; 
    border-radius: 10px; border: 2px solid var(--bg-body); 
}

/* --- DROPDOWN --- */
.notif-dropdown { 
    position: absolute; top: 55px; right: -10px; width: 320px; 
    background: var(--modal-bg); border: 1px solid var(--border-color); 
    border-radius: 16px; box-shadow: 0 20px 50px var(--shadow-color); 
    display: none; overflow: hidden; z-index: 9999; 
}
.notif-dropdown.show { display: block; animation: fadeIn .2s ease; }

.notif-header { 
    padding: 14px 15px; border-bottom: 1px solid var(--border-color); 
    font-weight: 700; font-size: 13px; color: var(--text-main); 
    display: flex; justify-content: space-between; align-items: center; 
}
.notif-header span { color: var(--primary-color); cursor: pointer; font-size: 11px; font-weight: 600; }

/* --- LİSTE --- */
.notif-list { 
    max-height: 300px; overflow-y: auto; background: var(--bg-body); 
    scrollbar-width: thin; scrollbar-color: var(--border-color) transparent;
}

.notif-item { 
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 15px; 
    text-decoration: none; background: var(--element-bg); color: var(--text-main); 
    border-bottom: 1px solid var(--border-color); transition: background .15s ease; 
}
.notif-item:hover { background: var(--input-bg); }

.notif-item.unread { border-left: 3px solid var(--primary-color); }
.notif-item.unread .notif-content { font-weight: 600; }
.notif-item.unread .notif-icon { color: var(--primary-color); }

.notif-item.read { opacity: .75; }
.notif-item.read:hover { opacity: 1; }

.notif-icon { 
    width: 32px; height: 32px; border-radius: 50%; background: var(--input-bg); 
    display: flex; align-items: center; justify-content: center; 
    color: var(--text-sub); font-size: 14px; flex-shrink: 0; 
}
.notif-content { font-size: 13px; line-height: 1.4; color: var(--text-sub); }
.notif-content strong { color: var(--text-main); }
.notif-time { font-size: 11px; color: var(--text-sub); margin-top: 4px; display: block; }
.notif-empty { padding: 24px; text-align: center; font-size: 13px; color: var(--text-sub); }

/* --- DAHA FAZLA GÖSTER BUTONU (DÜZELTİLDİ) --- */
.notif-load-more { 
    width: 100%; padding: 10px; background: var(--input-bg); 
    border-top: 1px solid var(--border-color); text-align: center; display: block;
}
.btn-notif-more { 
    width: 100%; padding: 10px; background: var(--element-bg); 
    color: var(--primary-color); border: 1px solid var(--border-color); 
    border-radius: 8px; font-family: 'Urbanist', sans-serif; 
    font-size: 12px; font-weight: 700; cursor: pointer; 
    transition: all 0.2s ease; display: flex; align-items: center; 
    justify-content: center; gap: 8px; 
}
.btn-notif-more:hover { 
    background: var(--primary-color); color: #fff; 
    box-shadow: 0 4px 12px var(--primary-glow); border-color: var(--primary-color); 
    transform: translateY(-1px);
}

/* --- TEMA AYARLARI --- */
[data-theme="light"] .notif-header { background-color: #ffffff; color: #1a1a1a; border-bottom: 2px solid rgba(0,0,0,0.1); }
[data-theme="light"] .notif-header * { color: #1a1a1a; }
[data-theme="light"] .notif-header span, [data-theme="light"] .notif-header i { color: var(--primary-color); }
[data-theme="light"] .notif-dropdown { background-color: #ffffff; }

/* Scrollbar */
.notif-list::-webkit-scrollbar { width: 6px; }
.notif-list::-webkit-scrollbar-track { background: transparent; }
.notif-list::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 20px; border: 1px solid transparent; transition: background 0.3s ease; }
.notif-list::-webkit-scrollbar-thumb:hover { background-color: var(--primary-color); }