/* ═══════════════════════════════════════════════════════════════════════════
   OYS · Bildirim ve Duyuru Panelleri (v5)
   Kullanici/js/bildirim.css üzerine kurumsal, sade bir katman.
   Palet: #252156 / #3b357f · altın #a9762f
   ═══════════════════════════════════════════════════════════════════════════ */

.site-navbar .notification-panel{
  width:420px !important;
  max-width:calc(100vw - 24px) !important;
  padding:0 !important;
  border:1px solid var(--oysh-kenar) !important;
  border-radius:18px !important;
  overflow:hidden !important;
  box-shadow:0 24px 54px -18px rgba(26,23,51,.32),0 2px 8px rgba(26,23,51,.07) !important;
  background:#fff !important;
}

/* ── Panel başlığı ── */
.site-navbar .notif-header{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:16px 18px 13px !important;
  border-bottom:1px solid var(--oysh-kenar) !important;
  background:#fff !important;
}
.site-navbar .notif-header h5{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex:1 1 auto !important;
  margin:0 !important;
  font-size:14.5px !important;
  font-weight:800 !important;
  letter-spacing:-.2px !important;
  color:var(--oysh-ink) !important;
}
.site-navbar .notif-count-badge,
.site-navbar .duyuru-count-badge{
  display:inline-flex !important;
  align-items:center !important;
  height:20px !important;
  padding:0 9px !important;
  border-radius:999px !important;
  background:#edecf9 !important;
  color:#3b357f !important;
  font-size:10.5px !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;
  border:0 !important;
}
.site-navbar .mark-all-read{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  height:30px !important;
  padding:0 10px !important;
  border:1px solid var(--oysh-kenar) !important;
  border-radius:9px !important;
  background:#fff !important;
  color:var(--oysh-ink-soft) !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  cursor:pointer !important;
  white-space:nowrap !important;
  transition:background .18s,color .18s,border-color .18s !important;
}
.site-navbar .mark-all-read:hover{
  background:var(--oysh-hover) !important;
  color:var(--oysh-mor) !important;
  border-color:#dcd9ee !important;
}
.site-navbar .mark-all-read i{font-size:11px}

/* ── Liste ── */
.site-navbar .notif-list{
  max-height:min(60vh,460px) !important;
  overflow-y:auto !important;
  padding:6px !important;
  background:#fff !important;
  scrollbar-width:thin;
}
.site-navbar .notif-list::-webkit-scrollbar{width:6px}
.site-navbar .notif-list::-webkit-scrollbar-thumb{background:#dedcee;border-radius:6px}

.site-navbar .notif-item{
  position:relative !important;
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
  padding:12px 13px !important;
  margin:2px 0 !important;
  border:0 !important;
  border-radius:13px !important;
  background:transparent !important;
  text-decoration:none !important;
  transition:background .18s !important;
}
.site-navbar .notif-item:hover{background:var(--oysh-hover) !important}
.site-navbar .notif-item.unread{background:#f7f6fd !important}
.site-navbar .notif-item.unread::before{
  content:"" !important;
  position:absolute !important;
  left:4px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:3px !important;
  height:26px !important;
  border-radius:3px !important;
  background:var(--oysh-mor) !important;
}

.site-navbar .notif-icon{
  flex:none !important;
  width:38px !important;
  height:38px !important;
  border-radius:12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:15px !important;
  background:#edecf9 !important;
  color:#3b357f !important;
}
.site-navbar .notif-icon.replied{background:#edecf9 !important;color:#3b357f !important}
.site-navbar .notif-icon.read-icon{background:#f1f0f7 !important;color:#8b88a5 !important}
.site-navbar .notif-icon.duyuru-icon{background:#fbf4e8 !important;color:#a9762f !important}

.site-navbar .notif-content{flex:1 1 auto !important;min-width:0 !important}
.site-navbar .notif-top-row{display:flex !important;align-items:center !important;gap:8px !important}
.site-navbar .notif-course{
  font-size:13px !important;
  font-weight:700 !important;
  color:var(--oysh-ink) !important;
  line-height:1.35 !important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.site-navbar .notif-status-tag{
  display:inline-flex !important;
  align-items:center !important;
  height:18px !important;
  margin-top:5px !important;
  padding:0 8px !important;
  border-radius:999px !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;
}
.site-navbar .notif-status-tag.new{background:#edecf9 !important;color:#3b357f !important}
.site-navbar .notif-status-tag.okundu{background:#f1f0f7 !important;color:#8b88a5 !important}

.site-navbar .notif-message,
.site-navbar .notif-reply{
  margin-top:5px !important;
  font-size:12px !important;
  font-weight:400 !important;
  line-height:1.55 !important;
  color:var(--oysh-ink-soft) !important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.site-navbar .notif-message strong,
.site-navbar .notif-reply strong{color:var(--oysh-ink) !important;font-weight:700 !important}
.site-navbar .notif-time{font-size:11px !important;color:var(--oysh-ink-mute) !important}

/* ── Panel altı ── */
.site-navbar .notif-footer{
  padding:11px 14px !important;
  border-top:1px solid var(--oysh-kenar) !important;
  background:#fbfbfe !important;
  text-align:center !important;
}
.site-navbar .notif-footer a{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  color:var(--oysh-mor) !important;
  text-decoration:none !important;
}
.site-navbar .notif-footer a:hover{color:#3b357f !important;text-decoration:none !important}

/* ── Gece modu ── */
body.dark-mode .site-navbar .notification-panel,
body.dark-mode .site-navbar .notif-header,
body.dark-mode .site-navbar .notif-list{background:#232232 !important}
body.dark-mode .site-navbar .notif-footer{background:#1f1e2d !important}
body.dark-mode .site-navbar .notif-item.unread{background:rgba(255,255,255,.05) !important}
body.dark-mode .site-navbar .notif-header h5,
body.dark-mode .site-navbar .notif-course{color:#f1f0f7 !important}

/* ── Mobil ── */
@media (max-width:767px){
  .site-navbar .notification-panel{
    width:auto !important;
    border-radius:18px !important;
  }
  .site-navbar .notif-list{max-height:calc(100vh - 220px) !important}
  .site-navbar .notif-header{padding:14px 15px 11px !important}
  .site-navbar .mark-all-read{height:28px !important;font-size:11px !important}
}