:root {
--banner-top: 16px;   /* üstten iniş mesafesi (üst kenara yapışmaz) */
--banner-error-fg:   #DC3545;
--banner-warning-fg: #D97706;
--banner-success-fg: #2D6A4F;
--banner-info-fg:    #0284C7;
}
[data-theme="dark"] {
--banner-error-fg:   #F1707A;
--banner-warning-fg: #FBBF24;
--banner-success-fg: #52B788;
--banner-info-fg:    #38BDF8;
}
.app-banner-wrap {
position: fixed;
top: calc(var(--announcement-h, 0px) + var(--banner-top));
left: 50%;
transform: translateX(-50%);
width: min(360px, calc(100vw - 28px));
z-index: 1103;
pointer-events: none;
}
.app-banner {
--c-fg: var(--banner-error-fg);          /* canlı accent → tint zemin/çerçeve */
--c-text: var(--c-fg);
--c-detail: var(--text-muted);           /* alt satır nötr gri (fallback) */
display: flex;
align-items: center;
gap: 11px;
padding: 11px 13px;
border-radius: var(--radius-surface);
background: var(--surface);
border: 1px solid var(--c-fg);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
pointer-events: auto;
position: relative;   /* alt kenardaki geri sayım/loader çubuğu için */
overflow: hidden;     /* çubuk yuvarlak köşelere sığsın */
opacity: 0;
transform: translateY(-130%);
transition: opacity .28s cubic-bezier(.4, 0, .2, 1),
transform .34s cubic-bezier(.34, 1.32, .5, 1);
}
@supports (color: color-mix(in srgb, red, blue)) {
.app-banner {
--c-bg:     color-mix(in srgb, var(--c-fg) 10%, var(--surface));
--c-border: color-mix(in srgb, var(--c-fg) 30%, var(--surface));
--c-text:   color-mix(in srgb, var(--c-fg) 65%, var(--text));
--c-detail: color-mix(in srgb, var(--text) 65%, var(--surface));
background: var(--c-bg);
border-color: var(--c-border);
}
}
.app-banner.is-shown {
opacity: 1;
transform: translateY(0);
}
.app-banner-progress {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2.5px;
background: color-mix(in srgb, var(--c-fg) 14%, transparent);
overflow: hidden;
pointer-events: none;
}
.app-banner-progress > span {
display: block;
height: 100%;
background: var(--c-fg);
opacity: .7;
transform-origin: left;
}
.app-banner-progress.is-running > span {
animation-name: appBannerCountdown;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes appBannerCountdown {
from { transform: scaleX(1); }
to   { transform: scaleX(0); }
}
.app-banner-progress.is-indeterminate > span {
width: 40%;
}
.app-banner-progress.is-indeterminate.is-running > span {
animation: appBannerLoading 1.1s ease-in-out infinite;
}
@keyframes appBannerLoading {
from { transform: translateX(-100%); }
to   { transform: translateX(250%); }
}
.app-banner-icon {
flex-shrink: 0;
font-size: 1.15rem;
line-height: 1;
color: var(--c-text);
display: flex;
align-items: center;
justify-content: center;
}
.app-banner-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.app-banner-text {
font-size: .875rem;
font-weight: 600;
line-height: 1.35;
color: var(--c-text);
overflow-wrap: anywhere;
}
.app-banner-sub {
font-size: .78rem;
font-weight: 500;
line-height: 1.3;
color: var(--c-detail);
overflow-wrap: anywhere;
}
.app-banner .app-banner-close {
align-self: center;
margin-top: 0;
color: var(--c-text);
opacity: .72; /* non-text 3:1 (en kötü light warning ≈3.14) korunur */
}
.app-banner .app-banner-close:hover {
color: var(--c-text);
opacity: 1;
background: color-mix(in srgb, var(--c-text) 12%, transparent);
}
.app-banner.type-success .app-banner-close,
.app-banner.type-info .app-banner-close {
display: none;
}
.app-banner-link {
align-self: flex-start;
margin-top: 3px;
font-size: .8rem;
font-weight: 600;
color: var(--c-text);
text-decoration: underline;
}
.app-banner-link:hover { opacity: .85; }
.app-banner.type-error   { --c-fg: var(--banner-error-fg); }
.app-banner.type-warning { --c-fg: var(--banner-warning-fg); }
.app-banner.type-success { --c-fg: var(--banner-success-fg); }
.app-banner.type-info    { --c-fg: var(--banner-info-fg); }
.app-banner--inline {
width: 100%;
margin-bottom: var(--page-gap);
transform: translateY(-8px);
}
.app-banner--inline.is-shown { transform: translateY(0); }
.app-banner--inline .app-banner-close,
.app-banner--inline.type-success .app-banner-close,
.app-banner--inline.type-info .app-banner-close {
display: inline-flex;
align-self: center;
margin-top: 0;
--app-x-size: 28px;
--app-x-font: 1.15rem;
}
.app-banner-undo {
flex-shrink: 0;
align-self: center;
margin-left: auto;
padding: 4px 12px;
border: 1px solid var(--c-fg);
border-radius: 50rem;
background: transparent;
color: var(--c-fg);
font-size: .8rem;
font-weight: 600;
line-height: 1.2;
transition: background .15s, color .15s;
}
.app-banner-undo:hover { background: var(--c-fg); color: #fff; }
@media (max-width: 991.98px) {
.app-banner-wrap {
width: calc(100vw - 28px);
}
.app-banner--inline {
margin-bottom: var(--page-gap-mobile);
}
}