/* ══════════════════════════════════════════════════════════════════════ TOAST — native alert() yerine geçen global bildirim yığını NEDEN: alert() tarayıcının kendi diyalogunu açar; sayfayı bloklar, tema ile hiç ilgisi olmayan sistem penceresi çizer ve mobilde "bu site bir daha rahatsız etmesin" kutusunu tetikler. Yerine sayfanın kendi dilinde, bloklamayan bir bildirim gerekiyordu. YAKLAŞIM: yığın 'ye portal edilir (select-pop.js / tooltip.js ile aynı mantık). Böylece kartlardaki overflow:hidden / transform / backdrop-filter kırpmalarından ve stacking context tuzaklarından etkilenmez; z-index tek bir yerde, en üstte yönetilir. Sıralama (yukarıdan aşağı): .uk-tip (ipucu) 2147483000 TOAST 2147482800 ← burası .selpop 2147482900 (ipucunun hemen altı) İpucu her şeyin üstünde kalmalı çünkü toast'ın kapat düğmesinin de ipucu olabilir; toast ise açılır listelerin üstünde durmaz — kullanıcı liste seçerken bildirim listeyi kapatmasın. RENKLER: tümü theme-tokens.css / ui-kit.css token'larından türetilir (--uk-toast-bg, --uk-ok, --uk-no, --uk-warn, --uk-ac). Aşağıdaki --tst-* değişkenleri yalnızca bu token'ları paketler; yeni sabit marka rengi tanımlanmaz. Fallback değerleri, toast.css ui-kit.css'ten ÖNCE yüklenirse ya da tek başına test edilirse bileşen çıplak kalmasın diye duruyor. ══════════════════════════════════════════════════════════════════════ */ :root { /* Zemin OPAK olmak zorunda: --uk-toast-bg koyu temada rgba(...,0.97), yani hafif saydam. Altında opak bir taban olmazsa bildirimin ardındaki içerik seçilir ve metin okunmaz hale gelir. Taban rengi, token'ın kendi rengiyle aynı ton (rgb 20,20,40) olduğu için görsel fark yaratmaz. */ --tst-base: #141428; --tst-bg: var(--uk-toast-bg, rgba(20, 20, 40, 0.97)); --tst-fg: #ffffff; --tst-fg-soft: rgba(255, 255, 255, 0.66); --tst-border: rgba(255, 255, 255, 0.14); --tst-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35); --tst-track: rgba(255, 255, 255, 0.14); --tst-focus: rgba(255, 255, 255, 0.55); /* Tip renkleri — rgb üçlüsü token'ları (ui-kit.css :root) */ --tst-ok: var(--uk-ok, 46, 204, 113); --tst-no: var(--uk-no, 231, 76, 60); --tst-warn: var(--uk-warn, 245, 158, 11); --tst-info: var(--uk-ac, 147, 104, 233); --tst-accent: var(--tst-info); /* .tst-- ile ezilir */ } /* AÇIK TEMA — hiçbir renk tek temada kalmasın diye tüm küme yeniden tanımlanır. --uk-toast-bg açık temada da koyu (#1e1b33): tasarım dili, bildirimi açık sayfada da koyu bir yüzey olarak gösteriyor; burada o karar korunur, yalnızca taban/gölge/kenar ona göre ayarlanır. */ body.light-theme { --tst-base: #1e1b33; --tst-bg: var(--uk-toast-bg, #1e1b33); --tst-fg: #ffffff; --tst-fg-soft: rgba(255, 255, 255, 0.7); --tst-border: rgba(30, 27, 51, 0.18); --tst-shadow: 0 18px 44px rgba(30, 27, 51, 0.28), 0 2px 8px rgba(30, 27, 51, 0.16); --tst-track: rgba(255, 255, 255, 0.18); --tst-focus: rgba(255, 255, 255, 0.6); --tst-ok: var(--uk-ok, 46, 204, 113); --tst-no: var(--uk-no, 231, 76, 60); --tst-warn: var(--uk-warn, 245, 158, 11); --tst-info: var(--uk-ac, 147, 104, 233); --tst-accent: var(--tst-info); } /* ── Yığın (portal) ──────────────────────────────────────────────────── */ .tst-stack { position: fixed; right: 20px; bottom: 20px; z-index: 2147482800; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; width: max-content; max-width: min(92vw, 400px); margin: 0; padding: 0; /* Yığın boş alanı tıklamayı yutmasın; yalnızca bildirimlerin kendisi tıklanabilir olsun. */ pointer-events: none; font-family: inherit; } /* ── Tek bildirim ────────────────────────────────────────────────────── */ .tst { position: relative; box-sizing: border-box; display: flex; align-items: flex-start; gap: 10px; width: 100%; min-width: 0; padding: 12px 12px 12px 14px; overflow: hidden; border: 1px solid var(--tst-border); border-left: 3px solid rgb(var(--tst-accent)); border-radius: 12px; /* OPAK zemin: taban renk + token rengi üst katman olarak boyanır. */ background-color: var(--tst-base); background-image: linear-gradient(var(--tst-bg), var(--tst-bg)); box-shadow: var(--tst-shadow); color: var(--tst-fg); cursor: pointer; pointer-events: auto; opacity: 0; transform: translateX(24px) scale(0.98); transition: opacity .22s var(--uk-ease, cubic-bezier(.2, .8, .2, 1)), transform .22s var(--uk-ease, cubic-bezier(.2, .8, .2, 1)); } .tst.is-in { opacity: 1; transform: none; } .tst.is-out { opacity: 0; transform: translateX(24px) scale(0.98); } .tst:focus-visible, .tst:focus-within { outline: 2px solid var(--tst-focus); outline-offset: 2px; } .tst--ok { --tst-accent: var(--tst-ok); } .tst--no { --tst-accent: var(--tst-no); } .tst--warn { --tst-accent: var(--tst-warn); } .tst--info { --tst-accent: var(--tst-info); } /* Simge — tip rengi burada da token'dan gelir */ .tst-ico { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px; font-size: 15px; line-height: 1; border-radius: 50%; color: rgb(var(--tst-accent)); background: rgba(var(--tst-accent), 0.16); } .tst-msg { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--tst-fg); /* Uzun hata metinleri (sunucudan gelen mesajlar) taşmasın. */ overflow-wrap: anywhere; white-space: pre-line; } /* Kapat düğmesi — klavye ile erişilebilsin diye gerçek