.notification-bell{position:relative;z-index:30}.notification-bell-trigger{position:relative;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--barang-border);border-radius:12px;background:var(--barang-surface);color:var(--barang-accent);cursor:pointer}.notification-bell-trigger:hover,.notification-bell-trigger:focus-visible{border-color:var(--barang-accent);background:var(--barang-surface-muted)}.notification-bell-trigger:focus-visible{outline:3px solid color-mix(in srgb,var(--barang-accent) 32%,transparent);outline-offset:2px}.notification-bell-badge{position:absolute;top:-6px;inset-inline-end:-7px;min-width:18px;padding:2px 4px;border:2px solid var(--barang-surface);border-radius:99px;background:#ef6b63;color:#fff;font-size:10px;font-weight:800;line-height:1.1;text-align:center;direction:ltr}.notification-bell-backdrop{position:fixed;inset:0;z-index:-1;border:0;background:transparent;cursor:default}.notification-bell-popover{position:absolute;top:calc(100% + .55rem);inset-inline-end:0;width:min(360px,calc(100vw - 2rem));overflow:hidden;border:1px solid var(--barang-border);border-radius:16px;background:var(--barang-surface);box-shadow:0 20px 55px #1a294321}.notification-bell-popover header,.notification-bell-popover footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.8rem 1rem;border-bottom:1px solid var(--barang-border)}.notification-bell-popover header small{display:block;margin-top:.2rem;color:var(--barang-muted);font-size:.68rem}.notification-bell-close{border:0;background:transparent;color:var(--barang-muted);font-size:1.35rem;cursor:pointer}.notification-bell-list{display:grid;max-height:320px;overflow:auto}.notification-bell-item{display:flex;align-items:flex-start;gap:.65rem;width:100%;padding:.75rem 1rem;border:0;border-bottom:1px solid var(--barang-border);background:transparent;color:var(--barang-text);font:inherit;text-align:start;cursor:pointer}.notification-bell-item:hover,.notification-bell-item:focus-visible{background:var(--barang-surface-muted)}.notification-bell-item:focus-visible{outline:2px solid var(--barang-accent);outline-offset:-2px}.notification-bell-item.is-unread{background:color-mix(in srgb,#6947c7 4%,var(--barang-surface))}.notification-bell-item-icon{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:9px;background:color-mix(in srgb,#08a6a6 14%,var(--barang-surface));color:#08a6a6}.notification-bell-item span:last-child{display:grid;gap:.2rem;min-width:0}.notification-bell-item strong{overflow:hidden;font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.notification-bell-item small{color:var(--barang-muted);font-size:.67rem}.notification-bell-popover footer{border-bottom:0;border-top:1px solid var(--barang-border);justify-content:flex-start}.notification-bell-popover footer a{color:var(--barang-accent);font-size:.75rem;font-weight:750;text-decoration:none}.notification-bell-message{padding:1.4rem 1rem;color:var(--barang-muted);font-size:.78rem;text-align:center}@media(max-width:620px){.notification-bell-popover{position:fixed;top:64px;inset-inline:1rem;width:auto}.notification-bell-trigger{width:38px;height:38px}}