/* ═══════════════════════════════════════════════════════════════════════════
 Header bildirim menüsü — header purple + footer green (ynm-shell)
 ═══════════════════════════════════════════════════════════════════════════ */

.ynm-shell.yon-notify-menu,
.yon-notify-menu.ynm-shell{
 --ynm-bg:var(--h-bg-page);
 --ynm-surface:var(--h-bg-card);
 --ynm-raised:var(--h-bg-raised);
 --ynm-border:rgba(148,163,184,.14);
 --ynm-text:#f1f5f9;
 --ynm-muted:#94a3b8;
 --ynm-accent:var(--h-blue);
 --ynm-accent-2:var(--h-blue-dark);
 --ynm-accent-soft:rgba(61,90,254,.14);
 --ynm-green:var(--h-green);
 position:absolute;right:0;top:calc(100% + 8px);z-index:var(--yn-overlay-panel, 10070);
 width:min(400px, calc(100vw - 24px));
 max-height:min(80vh, 560px);
 display:flex;flex-direction:column;
 background:var(--ynm-surface);
 border:1px solid var(--ynm-border);
 border-radius:18px;
 box-shadow:0 22px 56px -18px rgba(0,0,0,.65), 0 0 0 1px rgba(61,90,254,.08);
 color:var(--ynm-text);
 overflow:hidden;
 isolation:isolate;
}
.ynm-shell--footer{
 --ynm-accent:var(--h-green);
 --ynm-accent-2:var(--h-green-dark);
 --ynm-accent-soft:rgba(17,211,119,.14);
 box-shadow:0 22px 56px -18px rgba(0,0,0,.65), 0 0 0 1px rgba(17,211,119,.08);
}
.ynm-shell--dual{
 --ynm-accent:var(--h-blue);
 --ynm-accent-2:var(--h-green);
 --ynm-accent-soft:rgba(61,90,254,.12);
}
.ynm-shell--pro::before{
 content:"";
 position:absolute;inset:0 0 auto 0;height:100px;pointer-events:none;z-index:0;
 background:radial-gradient(ellipse 70% 90% at 80% 0%, var(--ynm-accent-soft), transparent 70%);
}
.ynm-shell--pro > *{position:relative;z-index:1}
.ynm-shell--compact{--ynm-pad:10px}
.ynm-shell--comfortable{--ynm-pad:12px}

.ynm-shell .yon-notify-menu__head,
.ynm-shell .ynm-head{
 display:flex;align-items:center;justify-content:space-between;gap:10px;
 padding:13px 14px;border-bottom:1px solid var(--ynm-border);
 background:linear-gradient(180deg, rgba(61,90,254,.08), transparent);
 flex-shrink:0;
}
.ynm-shell--footer .ynm-head{
 background:linear-gradient(180deg, rgba(17,211,119,.08), transparent);
}
.ynm-shell .ynm-head strong,
.ynm-shell .yon-notify-menu__head strong{
 display:inline-flex;align-items:center;gap:8px;
 font-size:13.5px;font-weight:850;color:var(--ynm-text);
}
.ynm-shell .ynm-head strong i{color:var(--ynm-accent);font-size:16px}
.ynm-shell .ynm-unread{
 display:inline-flex;align-items:center;justify-content:center;
 min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:999px;
 background:linear-gradient(135deg, var(--ynm-accent), var(--ynm-accent-2));
 color:#fff;font-size:10px;font-weight:850;
}
.ynm-shell--footer .ynm-unread{color:#04140a}
.ynm-shell .yon-notify-menu__read-all,
.ynm-shell .ynm-read-all{
 border:1px solid rgba(61,90,254,.28);background:rgba(61,90,254,.1);
 color:#d8b4fe;font-size:11px;font-weight:750;cursor:pointer;
 padding:6px 10px;border-radius:999px;transition:background .15s, border-color .15s;
}
.ynm-shell--footer .ynm-read-all{
 border-color:rgba(17,211,119,.28);background:rgba(17,211,119,.1);color:#86efac;
}
.ynm-shell .ynm-read-all:hover{filter:brightness(1.08)}

.ynm-shell .ynm-tip{
 display:flex;gap:8px;align-items:flex-start;
 margin:10px 12px 0;padding:9px 11px;border-radius:12px;
 border:1px solid rgba(17,211,119,.22);background:rgba(17,211,119,.08);
 font-size:11.5px;line-height:1.4;color:#bbf7d0;flex-shrink:0;
}
.ynm-shell .ynm-tip i{color:var(--ynm-green);margin-top:1px}
.ynm-shell--header .ynm-tip{
 border-color:rgba(61,90,254,.22);background:rgba(61,90,254,.08);color:#e9d5ff;
}
.ynm-shell--header .ynm-tip i{color:var(--ynm-accent)}

.ynm-shell .yon-notify-menu__list,
.ynm-shell .ynm-list{
 max-height:none;overflow-y:auto;flex:1;min-height:0;
}

.ynm-shell .yon-notify-menu__empty,
.ynm-shell .ynm-empty{
 padding:42px 20px;text-align:center;color:var(--ynm-muted);
}
.ynm-shell .ynm-empty i{
 font-size:36px;display:block;margin-bottom:10px;opacity:.5;color:var(--ynm-accent);
}
.ynm-shell .ynm-empty p{
 margin:0;font-size:13.5px;font-weight:800;color:var(--ynm-text);
}
.ynm-shell .ynm-empty span{
 display:block;margin-top:6px;font-size:12px;line-height:1.45;color:var(--ynm-muted);
}

.ynm-shell .yon-notify-item,
.ynm-shell .ynm-item{
 display:flex;flex-direction:column;gap:8px;
 padding:12px 14px;border-bottom:1px solid var(--ynm-border);
 color:inherit;transition:background .15s;
}
.ynm-shell .ynm-item:hover{background:rgba(23,29,40,.85)}
.ynm-shell .ynm-item.is-unread,
.ynm-shell .yon-notify-item.is-unread{
 background:linear-gradient(90deg, var(--ynm-accent-soft), transparent 72%);
 box-shadow:inset 3px 0 0 var(--ynm-accent);
}
.ynm-shell .yon-notify-item__link,
.ynm-shell .ynm-link{
 display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:inherit;
}

/* Media: avatar or icon */
.ynm-shell .ynm-media{
 position:relative;width:44px;height:44px;flex-shrink:0;
}
.ynm-shell .ynm-avatar{
 width:44px;height:44px;border-radius:50%;object-fit:cover;display:block;
 border:2px solid rgba(61,90,254,.45);
 box-shadow:0 0 0 3px rgba(61,90,254,.12);
 background:var(--ynm-bg);
}
.ynm-shell--footer .ynm-avatar{
 border-color:rgba(17,211,119,.45);
 box-shadow:0 0 0 3px rgba(17,211,119,.12);
}
.ynm-shell .ynm-avatar--fallback{
 display:grid;place-items:center;
 font-size:15px;font-weight:850;color:#fff;
 background:linear-gradient(135deg, var(--h-blue), var(--h-blue-dark));
 border-color:transparent;
}
.ynm-shell--footer .ynm-avatar--fallback{
 background:linear-gradient(135deg, var(--h-green), var(--h-green-dark));color:#04140a;
}
.ynm-shell .ynm-type{
 position:absolute;right:-3px;bottom:-2px;
 width:18px;height:18px;border-radius:50%;
 display:grid;place-items:center;
 background:var(--ynm-surface);border:1.5px solid var(--ynm-border);
 color:var(--ynm-accent);font-size:10px;line-height:1;
 box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.ynm-shell--footer .ynm-type{color:var(--ynm-green)}
.ynm-shell .ynm-dot{
 position:absolute;top:-1px;left:-1px;
 width:9px;height:9px;border-radius:50%;
 background:var(--ynm-accent);border:2px solid var(--ynm-surface);
 box-shadow:0 0 0 2px rgba(61,90,254,.25);
}
.ynm-shell--footer .ynm-dot{
 background:var(--ynm-green);box-shadow:0 0 0 2px rgba(17,211,119,.25);
}

.ynm-shell .yon-notify-item__icon,
.ynm-shell .ynm-icon{
 width:44px;height:44px;border-radius:14px;flex-shrink:0;
 background:var(--ynm-bg);border:1px solid var(--ynm-border);
 display:grid;place-items:center;color:var(--ynm-accent);font-size:17px;
}
.ynm-shell .ynm-media .ynm-icon{width:100%;height:100%}
.ynm-shell .ynm-item.is-unread .ynm-icon{
 background:rgba(61,90,254,.14);border-color:rgba(61,90,254,.28);
}
.ynm-shell--footer .ynm-item.is-unread .ynm-icon{
 background:rgba(17,211,119,.14);border-color:rgba(17,211,119,.28);
}
.ynm-shell .ynm-actor{
 display:inline-flex;align-items:center;gap:4px;
 margin-bottom:3px;padding:2px 8px;border-radius:999px;
 font-size:10.5px;font-weight:750;letter-spacing:.01em;
 color:#d8b4fe;background:rgba(61,90,254,.12);border:1px solid rgba(61,90,254,.2);
}
.ynm-shell--footer .ynm-actor{
 color:#86efac;background:rgba(17,211,119,.1);border-color:rgba(17,211,119,.22);
}
.ynm-shell .yon-notify-item__body strong,
.ynm-shell .ynm-body strong{
 display:block;font-size:12.5px;font-weight:800;color:var(--ynm-text);margin-bottom:2px;
}
.ynm-shell .yon-notify-item__body p,
.ynm-shell .ynm-body p{
 margin:0;font-size:11.5px;color:var(--ynm-muted);line-height:1.45;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ynm-shell .yon-notify-item__body time,
.ynm-shell .ynm-body time{
 display:block;margin-top:5px;font-size:10px;font-weight:650;color:var(--ynm-muted);
}
.ynm-shell .yon-notify-item__actions,
.ynm-shell .ynm-actions{
 display:flex;flex-wrap:wrap;gap:8px;padding-left:56px;
}
.ynm-shell .yon-notify-action,
.ynm-shell .ynm-action{
 border:none;border-radius:9px;padding:6px 11px;font-size:11px;font-weight:750;cursor:pointer;
 background:var(--ynm-raised);color:var(--ynm-text);
}
.ynm-shell .ynm-action.is-ok,
.ynm-shell .yon-notify-action.is-ok{
 background:rgba(17,211,119,.18);color:#86efac;
}
.ynm-shell .ynm-action.is-danger,
.ynm-shell .yon-notify-action.is-danger{
 background:rgba(239,68,68,.14);color:#fca5a5;
}
.ynm-shell .ynm-action:hover{filter:brightness(1.1)}

.ynm-shell--compact .ynm-media,
.ynm-shell--compact .ynm-avatar,
.ynm-shell--compact .ynm-icon{width:38px;height:38px}
.ynm-shell--compact .ynm-actions{padding-left:50px}
.ynm-shell--compact .ynm-item{padding:10px 12px}

.ynm-shell .yon-notify-menu__foot,
.ynm-shell .ynm-foot{
 padding:10px 12px;border-top:1px solid var(--ynm-border);
 background:linear-gradient(180deg, transparent, rgba(10,14,22,.35));
 display:flex;flex-wrap:wrap;gap:8px;flex-shrink:0;
}
.ynm-shell .ynm-foot a,
.ynm-shell .yon-notify-menu__foot a{
 display:inline-flex;align-items:center;gap:5px;
 padding:7px 10px;border-radius:999px;font-size:11.5px;font-weight:750;
 text-decoration:none;color:var(--ynm-muted);
 border:1px solid var(--ynm-border);background:var(--ynm-bg);
 transition:color .15s, border-color .15s, background .15s;
}
.ynm-shell .ynm-foot a:hover{
 color:#d8b4fe;border-color:rgba(61,90,254,.35);background:rgba(61,90,254,.1);
}
.ynm-shell--footer .ynm-foot a:hover{
 color:#86efac;border-color:rgba(17,211,119,.35);background:rgba(17,211,119,.1);
}

.ynm-shell .ynm-sound{
 display:inline-flex;align-items:center;gap:5px;
 margin-left:auto;font-size:10.5px;font-weight:700;color:var(--ynm-muted);
}
.ynm-shell .ynm-sound i{color:var(--ynm-accent)}

.ynm-bell-badge{
 position:absolute;right:-2px;top:-2px;
 display:flex;align-items:center;justify-content:center;
 min-width:16px;height:16px;padding:0 4px;border-radius:999px;
 background:linear-gradient(135deg,var(--h-blue),var(--h-blue-dark));
 color:#fff;font-size:8px;font-weight:850;
}

html[data-theme="light"] .ynm-shell.yon-notify-menu{
 --ynm-bg:#f3f5f8;
 --ynm-surface:#ffffff;
 --ynm-raised:#f8fafc;
 --ynm-border:rgba(15,23,42,.08);
 --ynm-text:#0f172a;
 --ynm-muted:#64748b;
 background:#fff;
 box-shadow:0 20px 50px rgba(15,23,42,.14);
}
html[data-theme="light"] .ynm-shell .ynm-item.is-unread{background:rgba(61,90,254,.06)}
html[data-theme="light"] .ynm-shell--footer .ynm-item.is-unread{background:rgba(17,211,119,.06)}
html[data-theme="light"] .ynm-shell .ynm-foot a{background:#fff}
html[data-theme="light"] .ynm-shell .ynm-avatar{box-shadow:0 0 0 3px rgba(61,90,254,.1)}
html[data-theme="light"] .ynm-shell .ynm-type{background:#fff}
html[data-theme="light"] .ynm-shell .ynm-dot{border-color:#fff}
html[data-theme="light"] .ynm-shell .ynm-actor{color:var(--h-blue-dark)}

/* ── YON dropdown (ynm-shell--yon) ─────────────────────────── */
.ynm-shell--yon{
 --ynm-bg:var(--h-bg-page);
 --ynm-surface:#1a1d28;
 --ynm-raised:#222633;
 --ynm-border:rgba(255,255,255,.08);
 --ynm-text:var(--h-text);
 --ynm-muted:var(--h-text-muted);
 width:min(420px, calc(100vw - 24px));
 border-radius:14px;
 background:var(--ynm-surface);
 box-shadow:0 24px 64px rgba(0,0,0,.55);
}
.ynm-shell--yon .ynm-head{
 background:transparent;
 padding:14px 16px 10px;
 border-bottom:1px solid var(--ynm-border);
}
.ynm-shell--yon .ynm-head__title{
 display:inline-flex;align-items:center;gap:8px;
 font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
 color:var(--ynm-text);
}
.ynm-shell--yon .ynm-head__dot{
 width:8px;height:8px;border-radius:999px;background:var(--h-blue);
 box-shadow:0 0 10px var(--h-blue-glow);
}
.ynm-shell--yon .ynm-head__count{color:var(--ynm-muted);font-weight:700}
.ynm-shell--yon .ynm-read-all{
 border:0;background:rgba(102,122,250,.18);color:#c7d2fe;
 font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
 padding:7px 12px;border-radius:999px;
}
.ynm-shell--yon .ynm-item{
 padding:0;border-bottom:1px solid var(--ynm-border);
}
.ynm-shell--yon .ynm-link{
 padding:14px 16px;align-items:flex-start;
}
.ynm-shell--yon .ynm-icon{
 width:36px;height:36px;border-radius:10px;font-size:16px;
 background:var(--ynm-raised);border:1px solid var(--ynm-border);
}
.ynm-shell--yon .ynm-thumb,
.ynm-shell--yon .yon-notify-item__thumb{
 width:48px;height:48px;flex-shrink:0;border-radius:10px;overflow:hidden;
 background:var(--ynm-raised);border:1px solid var(--ynm-border);
}
.ynm-shell--yon .ynm-thumb img,
.ynm-shell--yon .yon-notify-item__thumb img{
 width:100%;height:100%;object-fit:cover;display:block;
}
.ynm-shell--yon .ynm-item.has-image .ynm-link{align-items:center}
.ynm-shell--yon .ynm-item.is-tone-blue .ynm-icon{color:#7dd3fc;background:rgba(56,189,248,.1);border-color:rgba(56,189,248,.2)}
.ynm-shell--yon .ynm-item.is-tone-green .ynm-icon{color:#86efac;background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.2)}
.ynm-shell--yon .ynm-item.is-tone-orange .ynm-icon{color:#fcd34d;background:rgba(255,193,7,.12);border-color:rgba(255,193,7,.28)}
.ynm-shell--yon .ynm-item.is-promo{
 background:rgba(255,193,7,.06);
 border-left:3px solid var(--h-orange,#ffc107);
}
.ynm-shell--yon .ynm-item.is-promo.is-unread{background:rgba(255,193,7,.1)}
.ynm-shell--yon .ynm-body__top{
 display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;
}
.ynm-shell--yon .ynm-body strong{
 font-size:13px;font-weight:800;margin:0;
}
.ynm-shell--yon .ynm-item.is-tone-blue .ynm-body strong{color:#7dd3fc}
.ynm-shell--yon .ynm-item.is-tone-green .ynm-body strong{color:#86efac}
.ynm-shell--yon .ynm-item.is-tone-orange .ynm-body strong{color:#fcd34d}
.ynm-shell--yon .ynm-body time{
 font-size:11px;font-weight:650;color:inherit;opacity:.85;white-space:nowrap;
}
.ynm-shell--yon .ynm-item.is-tone-blue .ynm-body time{color:#7dd3fc}
.ynm-shell--yon .ynm-item.is-tone-green .ynm-body time{color:#86efac}
.ynm-shell--yon .ynm-item.is-tone-orange .ynm-body time{color:#fcd34d}
.ynm-shell--yon .ynm-body p{
 font-size:12px;color:var(--ynm-muted);margin:0;-webkit-line-clamp:1;
}
.ynm-shell--yon .ynm-foot{
 padding:12px 16px 14px;border-top:1px solid var(--ynm-border);background:#141722;
 display:block;
}
.ynm-shell--yon .ynm-all-btn{
 display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
 padding:12px 14px;border-radius:10px;text-decoration:none;
 background:#0f1118;border:1px solid var(--ynm-border);
 color:var(--ynm-text);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
 transition:background .15s, border-color .15s;
}
.ynm-shell--yon .ynm-all-btn:hover{
 background:#171a24;border-color:rgba(102,122,250,.35);color:#fff;
}
.ynm-shell--yon .ynm-empty{padding:36px 20px}

@media (max-width: 767px) {
 body.yon-notify-open {
 overflow: hidden;
 touch-action: none;
 }

 .yon-notify-wrap.is-open {
 z-index: var(--yn-overlay-wrap, 10060);
 }

 .ynm-mobile-backdrop {
 position: fixed;
 inset: 0;
 z-index: var(--yn-overlay-backdrop, 10050);
 background: rgba(5, 8, 14, 0.72);
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
 }

 html[data-theme="light"] .ynm-mobile-backdrop {
 background: rgba(15, 23, 42, 0.42);
 }

 .yon-notify-wrap .ynm-shell.yon-notify-menu,
 .yon-notify-wrap .yon-notify-menu.ynm-shell,
 .yon-notify-wrap .ynm-shell--mobile {
 position: fixed;
 inset: 0;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 width: 100%;
 max-width: none;
 max-height: none;
 height: 100dvh;
 z-index: var(--yn-overlay-panel, 10070);
 border-radius: 0;
 border-left: 0;
 border-right: 0;
 border-top: 0;
 box-shadow: none;
 padding-bottom: calc(var(--ymm-bar-h, 62px) + env(safe-area-inset-bottom, 0px));
 }

 .yon-notify-wrap .ynm-head {
 display: grid;
 grid-template-columns: 40px 1fr auto;
 align-items: center;
 gap: 8px;
 padding: max(12px, env(safe-area-inset-top, 0px)) 14px 12px;
 }

 .yon-notify-wrap .ynm-head strong {
 justify-self: center;
 font-size: 14px;
 }

 .yon-notify-wrap .ynm-read-all {
 justify-self: end;
 padding: 6px 8px;
 font-size: 10px;
 white-space: nowrap;
 max-width: 42vw;
 overflow: hidden;
 text-overflow: ellipsis;
 }

 .ynm-close {
 width: 36px;
 height: 36px;
 border-radius: 11px;
 border: 1px solid var(--ynm-border);
 background: var(--ynm-raised);
 color: var(--ynm-text);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 20px;
 cursor: pointer;
 flex-shrink: 0;
 }

 .yon-notify-wrap .ynm-list {
 flex: 1;
 min-height: 0;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 overscroll-behavior: contain;
 }

 .yon-notify-wrap .ynm-foot {
 flex-shrink: 0;
 padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
 }

 .yon-notify-wrap .yon-icon-btn,
 .yon-notify-wrap .yon-notify-trigger {
 width: 36px;
 height: 36px;
 min-width: 36px;
 border-radius: 11px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: var(--ys-bg-3, var(--h-bg-raised));
 border: 1px solid rgba(148, 163, 184, 0.12);
 }
}

/* ═══════════════════════════════════════════════════════════════
 ynm-panel — bildirim dropdown (kurumsal v2)
 ═══════════════════════════════════════════════════════════════ */

.ynm-panel.ynm-panel--notify.ynm-shell--yon {
 --ynm-bg: var(--h-bg-page);
 --ynm-surface: var(--h-bg-header);
 --ynm-raised: var(--h-bg-raised);
 --ynm-border: var(--h-border);
 --ynm-text: var(--h-text-bright);
 --ynm-muted: var(--h-text-muted);
 --ynm-accent: var(--h-blue);
 width: min(400px, calc(100vw - 20px));
 border-radius: 12px;
 border: 1px solid var(--ynm-border);
 background: var(--ynm-surface);
 box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
 overflow: hidden;
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon::before {
 display: none;
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-head {
 display: grid;
 grid-template-columns: auto 1fr auto;
 align-items: center;
 gap: 10px;
 padding: 12px 14px;
 background: var(--h-bg-card);
 border-bottom: 1px solid var(--ynm-border);
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-head__title {
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 0.07em;
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-head__dot {
 box-shadow: none;
 background: var(--h-green);
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-head__unread {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 20px;
 height: 20px;
 padding: 0 6px;
 margin-left: 6px;
 border-radius: 999px;
 background: var(--h-blue);
 color: #fff;
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 0;
 text-transform: none;
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-read-all {
 border: 1px solid color-mix(in srgb, var(--h-blue) 35%, var(--ynm-border));
 background: color-mix(in srgb, var(--h-blue) 10%, var(--h-bg-raised));
 color: var(--h-blue-text);
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.04em;
 padding: 6px 11px;
 border-radius: 999px;
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-read-all:hover {
 filter: none;
 background: color-mix(in srgb, var(--h-blue) 16%, var(--h-bg-raised));
 border-color: var(--h-blue);
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-list {
 background: var(--h-bg-header);
 max-height: min(52vh, 420px);
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-item {
 border-bottom-color: var(--ynm-border);
 transition: background 0.14s ease;
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-item:hover {
 background: color-mix(in srgb, var(--h-bg-raised) 55%, var(--h-bg-header));
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-item.is-unread:not(.is-promo) {
 background: color-mix(in srgb, var(--h-blue) 7%, var(--h-bg-header));
 box-shadow: inset 3px 0 0 var(--h-blue);
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-link {
 padding: 12px 14px;
 gap: 11px;
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-icon {
 width: 40px;
 height: 40px;
 border-radius: 10px;
 font-size: 17px;
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-thumb {
 width: 52px;
 height: 52px;
 border-radius: 10px;
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-body__top {
 flex-wrap: wrap;
 align-items: center;
 gap: 6px 8px;
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-promo-tag {
 display: inline-flex;
 align-items: center;
 padding: 2px 7px;
 border-radius: 999px;
 background: color-mix(in srgb, var(--h-orange) 16%, transparent);
 border: 1px solid color-mix(in srgb, var(--h-orange) 35%, var(--ynm-border));
 color: var(--h-orange);
 font-size: 9px;
 font-weight: 800;
 letter-spacing: 0.06em;
 text-transform: uppercase;
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-body strong {
 font-size: 12.5px;
 font-weight: 700;
 color: var(--ynm-text);
 flex: 1 1 auto;
 min-width: 0;
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-body p {
 font-size: 11.5px;
 line-height: 1.45;
 -webkit-line-clamp: 2;
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-body time {
 margin-left: auto;
 font-size: 10px;
 color: var(--ynm-muted);
 opacity: 1;
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-item.is-promo {
 background: color-mix(in srgb, var(--h-orange) 7%, var(--h-bg-header));
 border-left: 3px solid var(--h-orange);
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-item.is-promo.is-unread {
 background: color-mix(in srgb, var(--h-orange) 11%, var(--h-bg-header));
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-empty {
 padding: 40px 18px;
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-empty i {
 color: var(--h-blue);
 opacity: 0.45;
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-foot {
 padding: 10px 12px 12px;
 background: var(--h-bg-card);
 border-top: 1px solid var(--ynm-border);
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-all-btn {
 border-radius: var(--h-radius);
 background: var(--h-bg-raised);
 border: 1px solid var(--ynm-border);
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 0.06em;
 padding: 11px 14px;
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-all-btn:hover {
 background: color-mix(in srgb, var(--h-blue) 10%, var(--h-bg-raised));
 border-color: color-mix(in srgb, var(--h-blue) 35%, var(--ynm-border));
 color: var(--h-text-bright);
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-actions {
 padding: 0 14px 12px 68px;
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-action {
 border-radius: 8px;
 font-weight: 700;
}

@media (max-width: 767px) {
 .yon-notify-wrap .ynm-panel.ynm-panel--notify.ynm-shell--yon {
 border-radius: 0;
 border-left: 0;
 border-right: 0;
 }

 .yon-notify-wrap .ynm-panel.ynm-panel--notify .ynm-list {
 max-height: none;
 }
}

/* Kurumsal v4 — belirgin bildirim paneli */
.ynm-panel.ynm-panel--notify.ynm-shell--yon {
 border: 2px solid color-mix(in srgb, var(--h-blue) 38%, var(--h-border)) !important;
 box-shadow:
 0 22px 60px rgba(0, 0, 0, 0.45),
 0 0 0 1px color-mix(in srgb, var(--h-blue) 18%, transparent) !important;
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-head__unread {
 min-width: 23px !important;
 height: 23px !important;
 font-size: 11px !important;
 background: var(--h-blue) !important;
 box-shadow: 0 2px 12px color-mix(in srgb, var(--h-blue) 55%, transparent) !important;
}

.ynm-panel.ynm-panel--notify.ynm-shell--yon .ynm-item.is-unread:not(.is-promo) {
 border-left: 3px solid var(--h-blue) !important;
 background: color-mix(in srgb, var(--h-blue) 10%, var(--h-bg-header)) !important;
}

/* =================================================================
 ynm-panel v3 — bildirim dropdown (glass, shell uyumlu)
 deploy-marker: ynm-panel-v3-glass
 ================================================================= */

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon {
 --ynm-border: var(--h-border-soft);
 --ynm-surface: color-mix(in srgb, var(--h-bg-card) 84%, transparent);
 --ynm-raised: color-mix(in srgb, var(--h-bg-raised) 88%, transparent);
 width: min(400px, calc(100vw - 20px));
 border-radius: 14px;
 border: 1px solid color-mix(in srgb, var(--h-blue) 22%, var(--h-border)) !important;
 background: var(--ynm-surface) !important;
 backdrop-filter: blur(18px) saturate(165%) !important;
 -webkit-backdrop-filter: blur(18px) saturate(165%) !important;
 box-shadow:
 0 20px 56px rgba(0, 0, 0, 0.42),
 0 0 0 1px color-mix(in srgb, var(--h-blue) 14%, transparent),
 inset 0 1px 0 color-mix(in srgb, var(--h-text-bright) 6%, transparent) !important;
 overflow: hidden;
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon::before {
 display: none;
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-head {
 display: grid;
 grid-template-columns: auto 1fr auto;
 align-items: center;
 gap: 10px;
 padding: 12px 14px;
 background: color-mix(in srgb, var(--h-bg-header) 72%, transparent);
 border-bottom: 1px solid var(--ynm-border);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-head__title {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 0.07em;
 color: var(--h-text-bright);
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-head__icon {
 width: 32px;
 height: 32px;
 border-radius: 10px;
 display: inline-grid;
 place-items: center;
 flex-shrink: 0;
 background: color-mix(in srgb, var(--h-blue) 12%, var(--h-bg-raised));
 border: 1px solid color-mix(in srgb, var(--h-blue) 28%, var(--h-border));
 color: var(--h-blue-text);
 font-size: 16px;
 box-shadow: var(--h-shadow-blue);
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-head__dot {
 display: none;
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-head__unread {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 22px;
 height: 22px;
 padding: 0 6px;
 margin-left: 4px;
 border-radius: 999px;
 background: var(--h-blue) !important;
 color: #fff !important;
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 0;
 text-transform: none;
 box-shadow:
 0 0 0 2px color-mix(in srgb, var(--h-bg-page) 80%, transparent),
 0 2px 10px color-mix(in srgb, var(--h-blue) 50%, transparent) !important;
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-read-all {
 border: 1px solid color-mix(in srgb, var(--h-blue) 32%, var(--h-border));
 background: color-mix(in srgb, var(--h-blue) 10%, var(--h-bg-raised));
 color: var(--h-blue-text);
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.04em;
 padding: 6px 11px;
 border-radius: 999px;
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-read-all:hover {
 background: color-mix(in srgb, var(--h-blue) 16%, var(--h-bg-raised));
 border-color: var(--h-blue);
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-list {
 background: color-mix(in srgb, var(--h-bg-header) 65%, transparent);
 max-height: min(52vh, 420px);
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-item {
 border-bottom-color: var(--ynm-border);
 transition: background 0.14s ease;
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-item:hover {
 background: color-mix(in srgb, var(--h-bg-raised) 55%, transparent);
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-item.is-unread:not(.is-promo) {
 background: color-mix(in srgb, var(--h-blue) 8%, transparent) !important;
 box-shadow: inset 3px 0 0 var(--h-blue) !important;
 border-left: 0 !important;
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-link {
 padding: 12px 14px;
 gap: 11px;
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-icon {
 width: 40px;
 height: 40px;
 border-radius: 10px;
 font-size: 17px;
 background: var(--ynm-raised);
 border: 1px solid var(--ynm-border);
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-thumb {
 width: 52px;
 height: 52px;
 border-radius: 10px;
 border: 1px solid var(--ynm-border);
 background: var(--ynm-raised);
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-body__top {
 flex-wrap: wrap;
 align-items: center;
 gap: 6px 8px;
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-promo-tag {
 display: inline-flex;
 align-items: center;
 padding: 2px 7px;
 border-radius: 999px;
 background: color-mix(in srgb, var(--h-orange) 16%, transparent);
 border: 1px solid color-mix(in srgb, var(--h-orange) 35%, var(--ynm-border));
 color: var(--h-orange);
 font-size: 9px;
 font-weight: 800;
 letter-spacing: 0.06em;
 text-transform: uppercase;
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-body strong {
 font-size: 12.5px;
 font-weight: 700;
 color: var(--h-text-bright);
 flex: 1 1 auto;
 min-width: 0;
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-body p {
 font-size: 11.5px;
 line-height: 1.45;
 color: var(--h-text-muted);
 -webkit-line-clamp: 2;
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-body time {
 margin-left: auto;
 font-size: 10px;
 color: var(--h-text-muted);
 opacity: 1;
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-item.is-promo {
 background: color-mix(in srgb, var(--h-orange) 8%, transparent) !important;
 border-left: 3px solid var(--h-orange) !important;
 box-shadow: none !important;
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-item.is-promo.is-unread {
 background: color-mix(in srgb, var(--h-orange) 12%, transparent) !important;
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-empty {
 padding: 44px 20px;
 color: var(--h-text-muted);
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-empty i {
 width: 52px;
 height: 52px;
 border-radius: 14px;
 display: grid;
 place-items: center;
 font-size: 24px;
 color: var(--h-blue-text);
 background: color-mix(in srgb, var(--h-blue) 10%, var(--h-bg-raised));
 border: 1px solid color-mix(in srgb, var(--h-blue) 22%, var(--h-border));
 opacity: 1;
 margin-bottom: 4px;
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-empty p {
 color: var(--h-text-bright);
 font-weight: 700;
 font-size: 13px;
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-empty span {
 font-size: 12px;
 line-height: 1.45;
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-foot {
 padding: 10px 12px 12px;
 background: color-mix(in srgb, var(--h-bg-card) 78%, transparent);
 border-top: 1px solid var(--ynm-border);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-all-btn {
 border-radius: var(--h-radius, 12px);
 background: color-mix(in srgb, var(--h-bg-raised) 90%, transparent);
 border: 1px solid var(--ynm-border);
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 0.06em;
 padding: 11px 14px;
 color: var(--h-text);
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-all-btn:hover {
 background: color-mix(in srgb, var(--h-blue) 10%, var(--h-bg-raised));
 border-color: color-mix(in srgb, var(--h-blue) 35%, var(--ynm-border));
 color: var(--h-text-bright);
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-actions {
 padding: 0 14px 12px 68px;
}

.ynm-panel--v3.ynm-panel--notify.ynm-shell--yon .ynm-action {
 border-radius: 8px;
 font-weight: 700;
}

@media (max-width: 767px) {
 .yon-notify-wrap .ynm-panel--v3.ynm-panel--notify.ynm-shell--yon {
 border-radius: 0 !important;
 border-left: 0 !important;
 border-right: 0 !important;
 border-top: 0 !important;
 backdrop-filter: blur(22px) saturate(170%) !important;
 -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
 }

 .yon-notify-wrap .ynm-panel--v3.ynm-panel--notify .ynm-list {
 max-height: none;
 }

 .yon-notify-wrap .ynm-panel--v3 .ynm-head__icon {
 width: 36px;
 height: 36px;
 }
}

@media (hover: none) {
 .ynm-panel--v3.ynm-panel--notify .ynm-read-all,
 .ynm-panel--v3.ynm-panel--notify .ynm-all-btn,
 .ynm-panel--v3.ynm-panel--notify .ynm-close {
 min-height: 44px;
 }
}

/* =================================================================
 ynm-panel v4 — bildirim dropdown (unified glass polish)
 deploy-marker: ynm-panel-v4
 ================================================================= */

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon {
 --ynm-v4-radius: 16px;
 width: min(408px, calc(100vw - 20px));
 border-radius: var(--ynm-v4-radius) !important;
 border: 1px solid color-mix(in srgb, var(--h-blue) 28%, var(--h-border)) !important;
 background: color-mix(in srgb, var(--h-bg-card) 80%, transparent) !important;
 backdrop-filter: blur(22px) saturate(172%) !important;
 -webkit-backdrop-filter: blur(22px) saturate(172%) !important;
 box-shadow:
 0 24px 64px rgba(0, 0, 0, 0.48),
 0 0 0 1px color-mix(in srgb, var(--h-blue) 16%, transparent),
 inset 0 1px 0 color-mix(in srgb, var(--h-text-bright) 8%, transparent) !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-head {
 padding: 14px 16px;
 background: linear-gradient(
 180deg,
 color-mix(in srgb, var(--h-bg-header) 88%, transparent) 0%,
 color-mix(in srgb, var(--h-bg-card) 72%, transparent) 100%
 );
 border-bottom: 1px solid color-mix(in srgb, var(--h-blue) 18%, var(--h-border));
 position: sticky;
 top: 0;
 z-index: 2;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-head__icon {
 width: 36px;
 height: 36px;
 border-radius: 11px;
 font-size: 17px;
 background: linear-gradient(
 145deg,
 color-mix(in srgb, var(--h-blue) 16%, var(--h-bg-raised)),
 color-mix(in srgb, var(--h-blue) 8%, var(--h-bg-card))
 );
 border: 1px solid color-mix(in srgb, var(--h-blue) 32%, var(--h-border));
 box-shadow: var(--h-shadow-blue);
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-head__title {
 font-size: 11px;
 letter-spacing: 0.08em;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-head__unread {
 min-width: 24px;
 height: 24px;
 font-size: 11px;
 background: linear-gradient(135deg, var(--h-blue) 0%, var(--h-blue-dark) 100%) !important;
 box-shadow:
 0 0 0 2px color-mix(in srgb, var(--h-bg-page) 85%, transparent),
 0 3px 14px color-mix(in srgb, var(--h-blue) 55%, transparent) !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-list {
 background: color-mix(in srgb, var(--h-bg-header) 58%, transparent);
 max-height: min(54vh, 440px);
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-item {
 transition: background 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-item:hover {
 background: color-mix(in srgb, var(--h-bg-raised) 62%, transparent);
 transform: translateY(-1px);
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-item.is-unread:not(.is-promo) {
 background: color-mix(in srgb, var(--h-blue) 10%, transparent) !important;
 box-shadow: inset 4px 0 0 var(--h-blue) !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-thumb {
 width: 48px;
 height: 48px;
 border-radius: 11px;
 border-color: color-mix(in srgb, var(--h-blue) 20%, var(--h-border));
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-icon {
 width: 48px;
 height: 48px;
 border-radius: 11px;
 font-size: 18px;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-promo-tag {
 background: color-mix(in srgb, var(--h-orange) 18%, transparent);
 border-color: color-mix(in srgb, var(--h-orange) 42%, var(--h-border));
 color: var(--h-orange);
 box-shadow: 0 0 12px color-mix(in srgb, var(--h-orange) 18%, transparent);
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-item.is-promo {
 background: color-mix(in srgb, var(--h-orange) 10%, transparent) !important;
 border-left: 4px solid var(--h-orange) !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-empty {
 padding: 52px 24px;
 gap: 10px;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-empty i {
 width: 60px;
 height: 60px;
 border-radius: 16px;
 font-size: 28px;
 background: linear-gradient(
 145deg,
 color-mix(in srgb, var(--h-blue) 14%, var(--h-bg-raised)),
 color-mix(in srgb, var(--h-blue) 6%, var(--h-bg-card))
 );
 box-shadow: var(--h-shadow-blue);
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-foot {
 position: sticky;
 bottom: 0;
 z-index: 2;
 padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
 background: linear-gradient(
 0deg,
 color-mix(in srgb, var(--h-bg-card) 92%, transparent) 0%,
 color-mix(in srgb, var(--h-bg-card) 78%, transparent) 100%
 );
 border-top: 1px solid color-mix(in srgb, var(--h-blue) 16%, var(--h-border));
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-all-btn {
 background: color-mix(in srgb, var(--h-blue) 10%, var(--h-bg-raised));
 border-color: color-mix(in srgb, var(--h-blue) 32%, var(--h-border));
 color: var(--h-blue-text);
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-all-btn:hover {
 background: color-mix(in srgb, var(--h-blue) 16%, var(--h-bg-raised));
 color: var(--h-text-bright);
 border-color: var(--h-blue);
}

@media (max-width: 767px) {
 .yon-notify-wrap .ynm-panel--v4.ynm-panel--notify.ynm-shell--yon {
 position: fixed !important;
 inset: 0 !important;
 width: 100% !important;
 max-width: none !important;
 height: 100dvh !important;
 border-radius: 0 !important;
 border: 0 !important;
 padding-top: env(safe-area-inset-top, 0px);
 display: flex !important;
 flex-direction: column;
 }

 .yon-notify-wrap .ynm-panel--v4.ynm-panel--notify .ynm-list {
 flex: 1 1 auto;
 max-height: none;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 }

 .yon-notify-wrap .ynm-panel--v4 .ynm-head__icon {
 width: 40px;
 height: 40px;
 }
}

@media (hover: none) {
 .ynm-panel--v4.ynm-panel--notify .ynm-read-all,
 .ynm-panel--v4.ynm-panel--notify .ynm-all-btn,
 .ynm-panel--v4.ynm-panel--notify .ynm-close {
 min-height: 44px;
 }
}

/* =================================================================
 ynm-panel v4 KAPSAMLI — bildirim (unified chrome, cascade kazanır)
 yon-shell-v4-comprehensive
 deploy-marker: yon-shell-v4-kapsamli
 ================================================================= */

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon {
 --ynm-k4-radius: 16px;
 overflow: hidden !important;
 border-radius: var(--ynm-k4-radius) !important;
 border: 1px solid color-mix(in srgb, var(--h-blue) 32%, var(--h-border)) !important;
 background: color-mix(in srgb, var(--h-bg-card) 76%, transparent) !important;
 backdrop-filter: blur(24px) saturate(180%) !important;
 -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
 box-shadow:
 0 28px 72px rgba(0, 0, 0, 0.52),
 0 0 0 1px color-mix(in srgb, var(--h-blue) 18%, transparent),
 inset 0 1px 0 color-mix(in srgb, var(--h-text-bright) 10%, transparent) !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-head {
 padding: 16px 18px !important;
 background: linear-gradient(
 180deg,
 color-mix(in srgb, var(--h-bg-header) 92%, transparent) 0%,
 color-mix(in srgb, var(--h-bg-card) 68%, transparent) 100%
 ) !important;
 border-bottom: 1px solid color-mix(in srgb, var(--h-blue) 22%, var(--h-border)) !important;
 position: sticky !important;
 top: 0 !important;
 z-index: 3 !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-head__icon {
 width: 40px !important;
 height: 40px !important;
 border-radius: 12px !important;
 font-size: 18px !important;
 background: linear-gradient(
 145deg,
 color-mix(in srgb, var(--h-blue) 18%, var(--h-bg-raised)),
 color-mix(in srgb, var(--h-blue) 8%, var(--h-bg-card))
 ) !important;
 border: 1px solid color-mix(in srgb, var(--h-blue) 36%, var(--h-border)) !important;
 box-shadow: var(--h-shadow-blue) !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-head__title {
 font-size: 11px !important;
 font-weight: 800 !important;
 letter-spacing: 0.1em !important;
 text-transform: uppercase !important;
 color: var(--h-text-bright) !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-head__unread {
 min-width: 26px !important;
 height: 26px !important;
 font-size: 11px !important;
 font-weight: 800 !important;
 background: linear-gradient(135deg, var(--h-blue) 0%, var(--h-blue-dark) 100%) !important;
 box-shadow:
 0 0 0 2px color-mix(in srgb, var(--h-bg-page) 88%, transparent),
 0 4px 16px color-mix(in srgb, var(--h-blue) 58%, transparent) !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-list {
 background: color-mix(in srgb, var(--h-bg-header) 52%, transparent) !important;
 max-height: min(56vh, 460px) !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-item {
 min-height: 64px !important;
 padding: 10px 16px !important;
 border-bottom: 1px solid color-mix(in srgb, var(--h-border) 65%, transparent) !important;
 transition: background 0.14s ease, transform 0.14s ease !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-item:hover {
 background: color-mix(in srgb, var(--h-bg-raised) 68%, transparent) !important;
 transform: translateY(-1px);
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-item.is-unread:not(.is-promo) {
 background: color-mix(in srgb, var(--h-blue) 12%, transparent) !important;
 box-shadow: inset 4px 0 0 var(--h-blue) !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-thumb,
.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-icon {
 width: 48px !important;
 height: 48px !important;
 border-radius: 12px !important;
 flex-shrink: 0 !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-thumb {
 border: 1px solid color-mix(in srgb, var(--h-blue) 24%, var(--h-border)) !important;
 object-fit: cover !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-icon {
 font-size: 19px !important;
 background: color-mix(in srgb, var(--h-blue) 10%, var(--h-bg-raised)) !important;
 border: 1px solid color-mix(in srgb, var(--h-blue) 22%, var(--h-border)) !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-promo-tag {
 display: inline-flex !important;
 align-items: center !important;
 padding: 2px 8px !important;
 border-radius: 999px !important;
 font-size: 9px !important;
 font-weight: 800 !important;
 letter-spacing: 0.06em !important;
 text-transform: uppercase !important;
 background: color-mix(in srgb, var(--h-orange) 20%, transparent) !important;
 border: 1px solid color-mix(in srgb, var(--h-orange) 48%, var(--h-border)) !important;
 color: var(--h-orange) !important;
 box-shadow: var(--h-shadow-orange) !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-item.is-promo {
 background: color-mix(in srgb, var(--h-orange) 12%, transparent) !important;
 border-left: 4px solid var(--h-orange) !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-empty {
 padding: 56px 28px !important;
 gap: 12px !important;
 text-align: center !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-empty i {
 width: 64px !important;
 height: 64px !important;
 border-radius: 18px !important;
 font-size: 30px !important;
 color: var(--h-blue-text) !important;
 background: linear-gradient(
 145deg,
 color-mix(in srgb, var(--h-blue) 16%, var(--h-bg-raised)),
 color-mix(in srgb, var(--h-blue) 6%, var(--h-bg-card))
 ) !important;
 border: 1px solid color-mix(in srgb, var(--h-blue) 28%, var(--h-border)) !important;
 box-shadow: var(--h-shadow-blue) !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-empty p {
 color: var(--h-text-muted) !important;
 font-size: 13px !important;
 font-weight: 600 !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-foot {
 position: sticky !important;
 bottom: 0 !important;
 z-index: 3 !important;
 padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
 background: linear-gradient(
 0deg,
 color-mix(in srgb, var(--h-bg-card) 94%, transparent) 0%,
 color-mix(in srgb, var(--h-bg-card) 76%, transparent) 100%
 ) !important;
 border-top: 1px solid color-mix(in srgb, var(--h-blue) 18%, var(--h-border)) !important;
 backdrop-filter: blur(12px) !important;
 -webkit-backdrop-filter: blur(12px) !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-all-btn {
 min-height: 44px !important;
 border-radius: 12px !important;
 font-weight: 700 !important;
 background: color-mix(in srgb, var(--h-blue) 12%, var(--h-bg-raised)) !important;
 border: 1px solid color-mix(in srgb, var(--h-blue) 36%, var(--h-border)) !important;
 color: var(--h-blue-text) !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-all-btn:hover {
 background: color-mix(in srgb, var(--h-blue) 18%, var(--h-bg-raised)) !important;
 color: var(--h-text-bright) !important;
 border-color: var(--h-blue) !important;
}

.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-read-all,
.ynm-panel--v4.ynm-panel--notify.ynm-shell--yon .ynm-close {
 min-height: 44px !important;
 min-width: 44px !important;
 border-radius: 10px !important;
}

@media (max-width: 767px) {
 .yon-notify-wrap .ynm-panel--v4.ynm-panel--notify.ynm-shell--yon {
 position: fixed !important;
 inset: 0 !important;
 width: 100% !important;
 max-width: none !important;
 height: 100dvh !important;
 border-radius: 0 !important;
 border: 0 !important;
 padding-top: env(safe-area-inset-top, 0px) !important;
 display: flex !important;
 flex-direction: column !important;
 }

 .yon-notify-wrap .ynm-panel--v4.ynm-panel--notify .ynm-list {
 flex: 1 1 auto !important;
 max-height: none !important;
 overflow-y: auto !important;
 -webkit-overflow-scrolling: touch;
 }

 .yon-notify-wrap .ynm-panel--v4 .ynm-head {
 position: sticky !important;
 top: 0 !important;
 }

 .yon-notify-wrap .ynm-panel--v4 .ynm-foot {
 position: sticky !important;
 bottom: 0 !important;
 }
}

@media (hover: none) {
 .ynm-panel--v4.ynm-panel--notify .ynm-item:hover {
 transform: none !important;
 }
}

/* =================================================================
 ynm-panel v5 — bildirim dropdown (kurumsal glass, tek katman)
 deploy-marker: ynm-panel-v5
 ================================================================= */

.ynm-panel--v5.ynm-panel--notify.ynm-shell--yon {
 --ynm-v5-radius: 16px;
 position: absolute;
 right: 0;
 top: calc(100% + 10px);
 z-index: var(--yn-overlay-panel, 10070);
 width: min(408px, calc(100vw - 20px));
 max-height: min(82vh, 560px);
 display: flex;
 flex-direction: column;
 border-radius: var(--ynm-v5-radius);
 border: 1px solid color-mix(in srgb, var(--h-blue) 30%, var(--h-border));
 background: color-mix(in srgb, var(--h-bg-card) 78%, transparent);
 backdrop-filter: blur(24px) saturate(180%);
 -webkit-backdrop-filter: blur(24px) saturate(180%);
 box-shadow:
 0 28px 72px rgba(0, 0, 0, 0.52),
 0 0 0 1px color-mix(in srgb, var(--h-blue) 18%, transparent),
 inset 0 1px 0 color-mix(in srgb, var(--h-text-bright) 10%, transparent);
 overflow: hidden;
 color: var(--h-text);
}

.ynm-panel--v5.ynm-panel--notify.ynm-shell--yon::before {
 display: none;
}

.ynm-panel--v5.ynm-panel--notify .ynm-head {
 display: grid;
 grid-template-columns: auto 1fr auto;
 align-items: center;
 gap: 10px;
 padding: 14px 16px;
 background: linear-gradient(
 180deg,
 color-mix(in srgb, var(--h-bg-header) 92%, transparent) 0%,
 color-mix(in srgb, var(--h-bg-card) 70%, transparent) 100%
 );
 border-bottom: 1px solid color-mix(in srgb, var(--h-blue) 20%, var(--h-border));
 position: sticky;
 top: 0;
 z-index: 3;
 flex-shrink: 0;
}

.ynm-panel--v5.ynm-panel--notify .ynm-head__title {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--h-text-bright);
}

.ynm-panel--v5.ynm-panel--notify .ynm-head__icon {
 width: 38px;
 height: 38px;
 border-radius: 11px;
 display: inline-grid;
 place-items: center;
 background: linear-gradient(
 145deg,
 color-mix(in srgb, var(--h-blue) 16%, var(--h-bg-raised)),
 color-mix(in srgb, var(--h-blue) 8%, var(--h-bg-card))
 );
 border: 1px solid color-mix(in srgb, var(--h-blue) 32%, var(--h-border));
 color: var(--h-blue-text);
 font-size: 17px;
 box-shadow: var(--h-shadow-blue);
}

.ynm-panel--v5.ynm-panel--notify .ynm-head__unread {
 min-width: 24px;
 height: 24px;
 padding: 0 6px;
 margin-left: 4px;
 border-radius: 999px;
 background: linear-gradient(135deg, var(--h-blue) 0%, var(--h-blue-dark) 100%);
 color: #fff;
 font-size: 11px;
 font-weight: 800;
 box-shadow:
 0 0 0 2px color-mix(in srgb, var(--h-bg-page) 88%, transparent),
 0 3px 14px color-mix(in srgb, var(--h-blue) 55%, transparent);
}

.ynm-panel--v5.ynm-panel--notify .ynm-read-all {
 border: 1px solid color-mix(in srgb, var(--h-blue) 34%, var(--h-border));
 background: color-mix(in srgb, var(--h-blue) 12%, var(--h-bg-raised));
 color: var(--h-blue-text);
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 padding: 8px 12px;
 border-radius: 999px;
 cursor: pointer;
 position: relative;
 z-index: 4;
 pointer-events: auto;
}

.ynm-panel--v5.ynm-panel--notify .ynm-read-all:hover {
 background: color-mix(in srgb, var(--h-blue) 18%, var(--h-bg-raised));
 border-color: var(--h-blue);
}

.ynm-panel--v5.ynm-panel--notify .ynm-list {
 flex: 1 1 auto;
 min-height: 0;
 overflow-y: auto;
 background: color-mix(in srgb, var(--h-bg-header) 50%, transparent);
 max-height: min(54vh, 440px);
}

.ynm-panel--v5.ynm-panel--notify .ynm-item {
 border-bottom: 1px solid color-mix(in srgb, var(--h-border) 70%, transparent);
 transition: background 0.14s ease;
}

.ynm-panel--v5.ynm-panel--notify .ynm-link {
 padding: 12px 16px;
 gap: 12px;
}

.ynm-panel--v5.ynm-panel--notify .ynm-item.is-unread:not(.is-promo) {
 background: color-mix(in srgb, var(--h-blue) 10%, transparent);
 box-shadow: inset 4px 0 0 var(--h-blue);
}

.ynm-panel--v5.ynm-panel--notify .ynm-item.is-promo {
 background: color-mix(in srgb, var(--h-orange) 10%, transparent);
 border-left: 4px solid var(--h-orange);
}

.ynm-panel--v5.ynm-panel--notify .ynm-item.is-promo.is-read,
.ynm-panel--v5.ynm-panel--notify .ynm-item.is-promo:not(.is-unread) {
 background: color-mix(in srgb, var(--h-orange) 5%, transparent);
 border-left-color: color-mix(in srgb, var(--h-orange) 55%, var(--h-border));
 opacity: 0.88;
}

.ynm-panel--v5.ynm-panel--notify .ynm-icon,
.ynm-panel--v5.ynm-panel--notify .ynm-thumb {
 width: 46px;
 height: 46px;
 border-radius: 11px;
}

.ynm-panel--v5.ynm-panel--notify .ynm-body strong {
 font-size: 12.5px;
 font-weight: 700;
 color: var(--h-text-bright);
}

.ynm-panel--v5.ynm-panel--notify .ynm-body p {
 font-size: 11.5px;
 color: var(--h-text-muted);
 -webkit-line-clamp: 2;
}

.ynm-panel--v5.ynm-panel--notify .ynm-promo-tag {
 padding: 2px 8px;
 border-radius: 999px;
 background: color-mix(in srgb, var(--h-orange) 18%, transparent);
 border: 1px solid color-mix(in srgb, var(--h-orange) 42%, var(--h-border));
 color: var(--h-orange);
 font-size: 9px;
 font-weight: 800;
 letter-spacing: 0.06em;
 text-transform: uppercase;
}

.ynm-panel--v5.ynm-panel--notify .ynm-foot {
 position: sticky;
 bottom: 0;
 z-index: 3;
 flex-shrink: 0;
 padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
 background: linear-gradient(
 0deg,
 color-mix(in srgb, var(--h-bg-card) 94%, transparent) 0%,
 color-mix(in srgb, var(--h-bg-card) 76%, transparent) 100%
 );
 border-top: 1px solid color-mix(in srgb, var(--h-blue) 18%, var(--h-border));
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
}

.ynm-panel--v5.ynm-panel--notify .ynm-all-btn {
 min-height: 44px;
 border-radius: 12px;
 background: color-mix(in srgb, var(--h-blue) 12%, var(--h-bg-raised));
 border: 1px solid color-mix(in srgb, var(--h-blue) 34%, var(--h-border));
 color: var(--h-blue-text);
 font-weight: 800;
}

.ynm-panel--v5.ynm-panel--notify .ynm-all-btn:hover {
 background: color-mix(in srgb, var(--h-blue) 18%, var(--h-bg-raised));
 border-color: var(--h-blue);
 color: var(--h-text-bright);
}

.ynm-panel--v5.ynm-panel--notify .ynm-empty {
 padding: 52px 24px;
}

.ynm-panel--v5.ynm-panel--notify .ynm-empty i {
 width: 58px;
 height: 58px;
 border-radius: 16px;
 display: grid;
 place-items: center;
 font-size: 26px;
 color: var(--h-blue-text);
 background: color-mix(in srgb, var(--h-blue) 12%, var(--h-bg-raised));
 border: 1px solid color-mix(in srgb, var(--h-blue) 28%, var(--h-border));
 opacity: 1;
}

@media (max-width: 767px) {
 .yon-notify-wrap .ynm-panel--v5.ynm-panel--notify.ynm-shell--yon {
 position: fixed;
 inset: 0;
 top: 0;
 width: 100%;
 max-width: none;
 height: 100dvh;
 max-height: none;
 border-radius: 0;
 border: 0;
 z-index: var(--yn-overlay-panel, 10070);
 padding-top: env(safe-area-inset-top, 0px);
 }

 .yon-notify-wrap .ynm-panel--v5 .ynm-list {
 max-height: none;
 flex: 1 1 auto;
 }
}

@media (hover: none) {
 .ynm-panel--v5.ynm-panel--notify .ynm-read-all,
 .ynm-panel--v5.ynm-panel--notify .ynm-all-btn,
 .ynm-panel--v5.ynm-panel--notify .ynm-close {
 min-height: 44px;
 }
}

/* =================================================================
   ynm-panel v6 — renk uyumu + görsel geliştirme
   deploy-marker: ynm-panel-v6
   ================================================================= */

.yon-notify-wrap .ynm-shell.ynm-panel--v5.ynm-panel--notify {
    --ynm-v6-radius: 18px;
    --ynm-v6-accent: var(--h-blue, #667afa);
    --ynm-v6-accent-2: var(--h-blue-dark, #6366f1);
    --ynm-v6-accent-text: var(--h-blue-text, #c7d2fe);
    --ynm-v6-accent-soft: var(--h-blue-soft, rgba(102, 122, 250, 0.14));
    --ynm-v6-green: var(--h-green, #34d399);
    --ynm-v6-green-soft: var(--h-green-soft, rgba(52, 211, 153, 0.12));
    --ynm-v6-orange: var(--h-orange, #ffc107);
    --ynm-v6-orange-soft: var(--h-orange-soft, rgba(255, 193, 7, 0.14));
    --ynm-v6-surface: color-mix(in srgb, var(--h-bg-card, #2f3144) 82%, transparent);
    --ynm-v6-deep: color-mix(in srgb, var(--h-bg-page, #161b28) 88%, transparent);
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify.ynm-shell--header {
    --ynm-v6-accent: var(--h-blue, #667afa);
    --ynm-v6-accent-soft: var(--h-blue-soft, rgba(102, 122, 250, 0.14));
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify.ynm-shell--pro.ynm-shell--yon {
    border-radius: var(--ynm-v6-radius);
    border: 1px solid color-mix(in srgb, var(--ynm-v6-accent) 28%, var(--h-border, #32394e));
    background: var(--ynm-v6-surface);
    backdrop-filter: blur(28px) saturate(185%);
    -webkit-backdrop-filter: blur(28px) saturate(185%);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px color-mix(in srgb, var(--ynm-v6-accent) 14%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--h-text-bright, #fff) 8%, transparent);
    overflow: hidden;
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify.ynm-shell--pro::before {
    display: block;
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 120px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 85% 100% at 88% -10%, color-mix(in srgb, var(--ynm-v6-accent) 22%, transparent), transparent 68%),
        radial-gradient(ellipse 60% 80% at 8% 0%, color-mix(in srgb, var(--ynm-v6-green) 8%, transparent), transparent 62%);
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify.ynm-shell--pro > * {
    position: relative;
    z-index: 1;
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-head {
    padding: calc(var(--ynm-pad, 12px) + 2px) 16px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--h-bg-header, #222433) 94%, transparent) 0%,
        color-mix(in srgb, var(--h-bg-card, #2f3144) 72%, transparent) 100%
    );
    border-bottom: 1px solid color-mix(in srgb, var(--ynm-v6-accent) 22%, var(--h-border));
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-head__title {
    font-size: 11px;
    letter-spacing: 0.11em;
    color: var(--h-text-bright, #fff);
    gap: 10px;
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-head__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--ynm-v6-accent) 18%, var(--h-bg-raised)),
        color-mix(in srgb, var(--ynm-v6-accent) 6%, var(--h-bg-card))
    );
    border: 1px solid color-mix(in srgb, var(--ynm-v6-accent) 34%, var(--h-border));
    color: var(--ynm-v6-accent-text);
    box-shadow: var(--h-shadow-blue, 0 2px 8px rgba(102, 122, 250, 0.22));
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-head__count {
    color: var(--h-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-head__unread {
    background: linear-gradient(135deg, var(--ynm-v6-accent), var(--ynm-v6-accent-2));
    color: #fff;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--h-bg-page) 90%, transparent),
        0 4px 16px color-mix(in srgb, var(--ynm-v6-accent) 45%, transparent);
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-read-all {
    border-color: color-mix(in srgb, var(--ynm-v6-accent) 36%, var(--h-border));
    background: color-mix(in srgb, var(--ynm-v6-accent) 14%, var(--h-bg-raised));
    color: var(--ynm-v6-accent-text);
    transition: background 0.16s, border-color 0.16s, transform 0.16s;
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-read-all:hover {
    background: color-mix(in srgb, var(--ynm-v6-accent) 22%, var(--h-bg-raised));
    border-color: var(--ynm-v6-accent);
    transform: translateY(-1px);
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-list {
    background: var(--ynm-v6-deep);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--h-border) 80%, transparent) transparent;
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-list::-webkit-scrollbar {
    width: 6px;
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--h-border) 85%, transparent);
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-item {
    border-bottom-color: color-mix(in srgb, var(--h-border) 65%, transparent);
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-item:hover {
    background: color-mix(in srgb, var(--h-bg-raised) 55%, transparent);
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-item.is-unread:not(.is-promo) {
    background: color-mix(in srgb, var(--ynm-v6-accent) 11%, transparent);
    box-shadow: inset 4px 0 0 var(--ynm-v6-accent);
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-item.is-promo {
    background: color-mix(in srgb, var(--ynm-v6-orange) 11%, transparent);
    border-left: 4px solid var(--ynm-v6-orange);
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-link {
    padding: 13px 16px;
    gap: 13px;
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-icon {
    background: color-mix(in srgb, var(--h-bg-raised) 88%, var(--h-bg-page));
    border: 1px solid color-mix(in srgb, var(--h-border) 90%, transparent);
    color: var(--ynm-v6-accent-text);
    font-size: 18px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-thumb {
    border: 1px solid color-mix(in srgb, var(--h-border) 90%, transparent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-item.is-tone-blue .ynm-icon {
    color: var(--ynm-v6-accent-text);
    background: var(--ynm-v6-accent-soft);
    border-color: color-mix(in srgb, var(--ynm-v6-accent) 32%, var(--h-border));
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-item.is-tone-green .ynm-icon {
    color: var(--ynm-v6-green);
    background: var(--ynm-v6-green-soft);
    border-color: color-mix(in srgb, var(--ynm-v6-green) 32%, var(--h-border));
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-item.is-tone-orange .ynm-icon {
    color: var(--ynm-v6-orange);
    background: var(--ynm-v6-orange-soft);
    border-color: color-mix(in srgb, var(--ynm-v6-orange) 35%, var(--h-border));
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-body__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-body strong {
    color: var(--h-text-bright);
    line-height: 1.35;
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-item.is-tone-blue .ynm-body strong { color: var(--ynm-v6-accent-text); }
.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-item.is-tone-green .ynm-body strong { color: var(--ynm-v6-green); }
.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-item.is-tone-orange .ynm-body strong { color: var(--ynm-v6-orange); }

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-body p {
    color: var(--h-text-muted);
    line-height: 1.5;
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-body time {
    font-size: 10px;
    font-weight: 650;
    color: var(--h-text-muted-alt, var(--h-text-muted));
    opacity: 0.9;
    white-space: nowrap;
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-promo-tag {
    background: var(--ynm-v6-orange-soft);
    border-color: color-mix(in srgb, var(--ynm-v6-orange) 42%, var(--h-border));
    color: var(--ynm-v6-orange);
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-actions {
    padding: 0 16px 12px 75px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-action {
    border: 1px solid color-mix(in srgb, var(--h-border) 90%, transparent);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 10.5px;
    font-weight: 750;
    background: color-mix(in srgb, var(--h-bg-raised) 90%, transparent);
    color: var(--h-text);
    cursor: pointer;
    transition: filter 0.15s, border-color 0.15s;
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-action.is-ok {
    background: var(--ynm-v6-green-soft);
    border-color: color-mix(in srgb, var(--ynm-v6-green) 35%, var(--h-border));
    color: var(--ynm-v6-green);
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-action.is-danger {
    background: color-mix(in srgb, var(--h-danger, #ff4454) 12%, transparent);
    border-color: color-mix(in srgb, var(--h-danger) 35%, var(--h-border));
    color: #fca5a5;
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-action:hover {
    filter: brightness(1.08);
    border-color: color-mix(in srgb, var(--ynm-v6-accent) 35%, var(--h-border));
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-foot {
    background: linear-gradient(
        0deg,
        color-mix(in srgb, var(--h-bg-card) 96%, transparent) 0%,
        color-mix(in srgb, var(--h-bg-card) 78%, transparent) 100%
    );
    border-top: 1px solid color-mix(in srgb, var(--ynm-v6-accent) 20%, var(--h-border));
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-all-btn {
    width: 100%;
    min-height: 46px;
    border-radius: 13px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--ynm-v6-accent) 16%, var(--h-bg-raised)),
        color-mix(in srgb, var(--ynm-v6-accent) 8%, var(--h-bg-card))
    );
    border: 1px solid color-mix(in srgb, var(--ynm-v6-accent) 36%, var(--h-border));
    color: var(--ynm-v6-accent-text);
    letter-spacing: 0.06em;
    transition: background 0.16s, border-color 0.16s, transform 0.16s, color 0.16s;
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-all-btn:hover {
    background: linear-gradient(135deg, var(--ynm-v6-accent), var(--ynm-v6-accent-2));
    border-color: transparent;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--h-shadow-blue);
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-all-btn i {
    font-size: 16px;
    transition: transform 0.16s;
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-all-btn:hover i {
    transform: translateX(3px);
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-empty {
    padding: 56px 24px;
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-empty i {
    margin: 0 auto 14px;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    font-size: 28px;
    color: var(--ynm-v6-accent-text);
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--ynm-v6-accent) 14%, var(--h-bg-raised)),
        color-mix(in srgb, var(--ynm-v6-accent) 6%, var(--h-bg-card))
    );
    border: 1px solid color-mix(in srgb, var(--ynm-v6-accent) 30%, var(--h-border));
    box-shadow: var(--h-shadow-blue);
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-empty p {
    font-size: 14px;
    font-weight: 800;
    color: var(--h-text-bright);
}

.yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-empty span {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--h-text-muted);
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.yon-notify-wrap .ynm-bell-badge {
    background: linear-gradient(135deg, var(--h-blue), var(--h-blue-dark));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--h-bg-header) 92%, transparent);
}

.yon-notify-wrap .yon-notify-trigger.is-active {
    background: color-mix(in srgb, var(--h-blue) 16%, var(--h-bg-raised)) !important;
    border-color: color-mix(in srgb, var(--h-blue) 38%, var(--h-border)) !important;
    color: var(--h-text-bright) !important;
}

@media (max-width: 767px) {
    .yon-notify-wrap .ynm-panel--v5.ynm-panel--notify.ynm-shell--mobile {
        background: var(--h-bg-page);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-close {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: 1px solid color-mix(in srgb, var(--h-border) 90%, transparent);
        background: color-mix(in srgb, var(--h-bg-raised) 92%, transparent);
        color: var(--h-text);
    }

    .yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-head {
        padding-top: max(14px, env(safe-area-inset-top, 0px));
    }

    .yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-actions {
        padding-left: 16px;
    }
}

html[data-theme="light"] .yon-notify-wrap .ynm-panel--v5.ynm-panel--notify.ynm-shell--yon {
    --ynm-v6-surface: rgba(255, 255, 255, 0.94);
    --ynm-v6-deep: #f8fafc;
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}

html[data-theme="light"] .yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-item.is-unread:not(.is-promo) {
    background: rgba(102, 122, 250, 0.07);
}

html[data-theme="light"] .yon-notify-wrap .ynm-panel--v5.ynm-panel--notify .ynm-icon {
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.08);
}