/* ============================================================================
   TeamWars — Bildirim (alert/toast) bileşeni                      2026-08-03
   ============================================================================

   NEDEN YENİDEN YAZILDI
   ---------------------
   Eski sistem jQuery Gritter (2011) idi ve İKİ ayrı sebeple bozuktu:
     1) gritter.js `defer` ile, onu çağıran inline <script> defer'siz yükleniyordu.
        Inline script parse SIRASINDA, defer'li script parse BİTİNCE çalışır —
        yani $.gritter çağrıldığı anda henüz tanımsızdı. Site genelinde
        set_flashdata('responses') 14 controller'da 250+ yerde kullanılıyor ve
        HİÇBİRİ görünmüyordu.
     2) Kapatma düğmesi güvenilir çalışmıyordu.

   BU DOSYANIN TASARIM KURALLARI
     - Hiçbir kural bileşenin DIŞINA sızmaz: her seçici .twal- öneki altında.
       (Site genelinde daha önce evrensel kural sızıntısı yaşandı; burada
       tek bir çıplak element seçicisi bile yok.)
     - Yan şerit (border-left renk aksanı) YOK — ucuz görünür. Durum rengi
       ikon rozetinde ve alttaki ince ilerleme çizgisinde taşınır.
     - Gradyan metin YOK.
     - Renk tek başına anlam taşımaz: her durumun ayrıca kendi ikonu var
       (renk körlüğü + yüksek kontrast modu).
     - Mantıksal özellikler (inset-inline-end) kullanılır -> RTL (Arapça)
       kendiliğinden doğru taraftan girer.
   ========================================================================= */

.twal-wrap {
	position: fixed;
	/* Site başlığı SABİT (position:fixed) ve ~70px. Bildirim 16px'ten başlarsa
	   menüyü örter — ölçüldü, 1440px'te navigasyonun üstüne biniyordu.
	   Bu yüzden başlığın ALTINDAN başlar. */
	inset-block-start: 86px;
	inset-inline-end: 16px;
	z-index: 2147483000;          /* modal/backdrop üstünde; tek yer, keyfi 9999 yok */
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(380px, calc(100vw - 32px));
	pointer-events: none;         /* boş alan tıklamayı engellemesin */
	container-type: inline-size;
}

/* Yığın sırası: en yeni ÜSTTE. */
.twal-wrap.twal-bottom { inset-block-start: auto; inset-block-end: 16px; flex-direction: column-reverse; }

.twal {
	--twal-renk: #7c8db5;
	position: relative;           /* fixed DEĞİL — sarmalayıcı zaten fixed */
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 12px;
	align-items: start;
	padding: 13px 14px;
	border-radius: 14px;
	overflow: hidden;
	pointer-events: auto;
	cursor: grab;
	touch-action: pan-y;          /* dikey kaydırma sayfada kalsın, yatayı biz alalım */
	user-select: none;
	-webkit-user-select: none;

	background: rgba(19, 30, 54, .86);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .08);

	/* Katmanlı gölge: geniş+yumuşak ortam gölgesi + yakın kontak gölgesi.
	   Tek gölge "yapıştırma" hissi verir, ikisi derinlik verir. */
	box-shadow:
		0 18px 40px -12px rgba(0, 0, 0, .55),
		0 4px 12px -4px rgba(0, 0, 0, .4),
		inset 0 1px 0 0 rgba(255, 255, 255, .06);

	will-change: transform, opacity;
	animation: twal-in .42s cubic-bezier(.16, 1, .3, 1) both;
}

/* Durum renginin ikon arkasındaki yumuşak parıltısı — şerit yerine bu. */
.twal::before {
	content: "";
	position: absolute;
	inset-block-start: -40%;
	inset-inline-start: -10%;
	width: 160px; height: 160px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--twal-renk) 0%, transparent 68%);
	opacity: .13;
	pointer-events: none;
}

.twal-ikon {
	position: relative;
	flex: 0 0 auto;
	width: 34px; height: 34px;
	border-radius: 10px;
	display: grid; place-items: center;
	background: color-mix(in srgb, var(--twal-renk) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--twal-renk) 32%, transparent);
	color: var(--twal-renk);
}
.twal-ikon svg { width: 17px; height: 17px; display: block; }

.twal-govde { min-width: 0; padding-block-start: 1px; }

.twal-baslik {
	margin: 0 0 2px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.01em;
	color: #eef2f9;
	overflow-wrap: anywhere;
}
.twal-metin {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #b3c0d6;               /* #131e36 üzerinde ~7.4:1 — gövde metni eşiğinin üstünde */
	overflow-wrap: anywhere;
}
.twal-metin p { margin: 0 0 4px; }
.twal-metin p:last-child { margin-bottom: 0; }
.twal-metin a { color: #8ab4ff; text-decoration: underline; text-underline-offset: 2px; }
.twal-metin strong, .twal-metin b { color: #dbe4f2; font-weight: 600; }

.twal-kapat {
	flex: 0 0 auto;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 8px;
	color: #7f8ca6;
	cursor: pointer;
	line-height: 0;
	/* Görsel olarak 26px ama dokunma hedefi 40px — mobilde ıskalanmasın. */
	padding: 7px;
	margin: -7px -7px 0 0;
	transition: color .18s ease, background-color .18s ease;
}
.twal-kapat:hover { color: #eef2f9; background: rgba(255, 255, 255, .07); }
.twal-kapat:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 2px; color: #eef2f9; }
.twal-kapat svg { width: 14px; height: 14px; }

/* Kalan süre çizgisi — bilgi verir, sürükleyip durdurulabilir. */
.twal-sure {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	height: 2px;
	width: 100%;
	transform-origin: left center;
	background: var(--twal-renk);
	opacity: .5;
}
[dir="rtl"] .twal-sure { transform-origin: right center; }

/* --- Durumlar: her biri renk + KENDİ İKONU (renk tek başına anlam taşımaz) --- */
.twal-basari  { --twal-renk: #3ddc97; }
.twal-hata    { --twal-renk: #ff5a5f; }
.twal-uyari   { --twal-renk: #ffb648; }
.twal-bilgi   { --twal-renk: #62a0ff; }

/* --- Sürükleme --- */
.twal.twal-suruklenirken { cursor: grabbing; animation: none; transition: none; }
.twal.twal-cikis { animation: twal-out .22s cubic-bezier(.4, 0, 1, 1) both; }

@keyframes twal-in {
	from { opacity: 0; transform: translate3d(0, -10px, 0) scale(.96); }
	to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes twal-out {
	from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
	to   { opacity: 0; transform: translate3d(0, -6px, 0) scale(.97); }
}

/* --- Mobil: tam genişlik, üstte, başparmakla rahat --- */
@media (max-width: 575.98px) {
	.twal-wrap {
		inset-inline: 12px;
		inset-block-start: 72px;   /* mobil başlık ~58px + boşluk */
		width: auto;
	}
	.twal { padding: 14px; border-radius: 16px; }
	.twal-baslik { font-size: 14px; }
	.twal-metin { font-size: 13.5px; }
}

/* --- Hareket duyarlılığı: yer değiştirme yok, yalnız sönümleme --- */
@media (prefers-reduced-motion: reduce) {
	.twal { animation: twal-in-rm .14s linear both; }
	.twal.twal-cikis { animation: twal-out-rm .12s linear both; }
	.twal-kapat { transition: none; }
	@keyframes twal-in-rm  { from { opacity: 0 } to { opacity: 1 } }
	@keyframes twal-out-rm { from { opacity: 1 } to { opacity: 0 } }
}

/* --- Yüksek kontrast / zorlanmış renk modu: cam ve parıltı kaybolur,
       kenarlık ve ikon anlamı taşır --- */
@media (forced-colors: active) {
	.twal {
		background: Canvas;
		border: 1px solid CanvasText;
		backdrop-filter: none;
		box-shadow: none;
	}
	.twal::before { display: none; }
	.twal-baslik, .twal-metin { color: CanvasText; }
}