Require explicit persisted acknowledgement of notifications

src/components/Header.jsx

@@ -12,6 +12,7 @@ export const Header = () => {
     setIsAiSpecAnalyzerOpen,
     userProfile,
     notifications,
+    refreshNotifications,markNotificationsRead,notificationError,notificationBusy,
     setActiveTab,
     clearAllFilters,
     isRefreshingLive,
@@ -144,7 +145,7 @@ export const Header = () => {
           <div className="relative">
             <button
               aria-label="Bildirimler"
-              onClick={() => setShowNotifications(!showNotifications)}
+              onClick={() => {setShowNotifications(!showNotifications);if(!showNotifications)void refreshNotifications();}}
               className="relative p-2 text-slate-300 hover:text-white hover:bg-slate-700 rounded-lg transition-colors"
             >
               <Bell className="w-5 h-5" />
@@ -157,13 +158,15 @@ export const Header = () => {
               <div className="absolute right-0 mt-2 w-80 bg-white text-slate-800 rounded-xl shadow-xl border border-slate-200 py-2 z-50 animate-fade-in">
                 <div className="px-4 py-2 border-b border-slate-100 flex items-center justify-between">
                   <h4 className="font-bold text-sm">Bildirimler</h4>
-                  <span className="text-xs text-blue-600 cursor-pointer hover:underline">Tümünü Okundu İşaretle</span>
+                  <button disabled={notificationBusy || !notifications.some(n=>!n.read)} onClick={markNotificationsRead} className="text-xs text-blue-600 hover:underline disabled:opacity-50">Tümünü Okundu İşaretle</button>
                 </div>
+                {notificationError&&<p role="alert" className="px-3 py-2 text-xs text-red-700">{notificationError} <button className="underline" onClick={refreshNotifications}>Bildirimleri yeniden yükle</button></p>}
+                {notificationBusy&&<p role="status" className="px-3 text-xs">Okundu bilgisi kaydediliyor…</p>}
                 <div className="max-h-64 overflow-y-auto divide-y divide-slate-100">
                   {notifications.map(n => (
                     <div key={n.id} className="p-3 hover:bg-slate-50 transition-colors cursor-pointer text-xs">
                       <div className="font-semibold text-slate-900 flex justify-between">
-                        <span>{n.title}</span>
+                        <span>{!n.read&&<span className="text-blue-600 mr-1">Okunmadı ·</span>}{n.title}</span>
                         <span className="text-slate-400 font-normal text-[10px]">{n.time}</span>
                       </div>
                       <p className="text-slate-600 mt-1 leading-relaxed">{n.text}</p>