/**
 * Bildirim (toast) bölgesi.
 *
 * Masaüstünde sağ altta, dar ekranda alt merkezde. Site yüzeyi, yarıçapı ve
 * tipografisiyle; engelleyici değil, sayfanın üstünde yüzer.
 */

.dj-notices {
	position: fixed;
	z-index: var(--dj-z-drawer);
	inset-block-end: var(--dj-space-30);
	inset-inline-end: var(--dj-space-30);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--dj-space-12);
	pointer-events: none;
}

.dj-notices:empty {
	display: none;
}

.dj-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--dj-space-12);
	width: min(calc(380 * var(--dj-u)), calc(100vw - var(--dj-space-60)));
	padding: var(--dj-space-16) var(--dj-space-16) var(--dj-space-16) var(--dj-space-20);
	border: 1px solid var(--dj-line);
	border-radius: var(--dj-radius-md);
	background: var(--dj-white);
	box-shadow: var(--dj-shadow-md);
	color: var(--dj-ink);
	pointer-events: auto;
	opacity: 0;
	transform: translateY(calc(10 * var(--dj-u)));
	transition: opacity var(--dj-transition), transform var(--dj-transition);
}

.dj-notice.is-open {
	opacity: 1;
	transform: translateY(0);
}

.dj-notice.is-leaving {
	opacity: 0;
	transform: translateY(calc(6 * var(--dj-u)));
}

/* Aynı kanaldaki bildirim yenilendiğinde kısa bir vurgu. */
.dj-notice.is-bumped {
	animation: dj-notice-bump 220ms ease-out;
}

@keyframes dj-notice-bump {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.03); }
	100% { transform: scale(1); }
}

.dj-notice__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: calc(24 * var(--dj-u));
	height: calc(24 * var(--dj-u));
	color: var(--dj-green);
}

.dj-notice__icon[hidden] {
	display: none;
}

.dj-notice__icon svg {
	width: 100%;
	height: 100%;
}

.dj-notice--error .dj-notice__icon {
	color: var(--dj-red);
}

.dj-notice__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(6 * var(--dj-u));
	flex: 1 1 auto;
	min-width: 0;
}

.dj-notice__text {
	margin: 0;
	font-size: var(--dj-fs-16);
	font-weight: var(--dj-fw-medium);
	line-height: var(--dj-lh-snug);
}

.dj-notice__action {
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--dj-fs-14);
	font-weight: var(--dj-fw-semibold);
	color: var(--dj-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.dj-notice__action[hidden] {
	display: none;
}

.dj-notice__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: calc(24 * var(--dj-u));
	height: calc(24 * var(--dj-u));
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--dj-muted);
	cursor: pointer;
	transition: color var(--dj-transition);
}

.dj-notice__close:hover {
	color: var(--dj-ink);
}

.dj-notice__close svg {
	width: calc(14 * var(--dj-u));
	height: calc(14 * var(--dj-u));
}

/* Dar ekranda alt merkez, tam genişliğe yakın. */
@media (max-width: 767px) {
	.dj-notices {
		inset-inline: 16px;
		inset-block-end: 16px;
		align-items: stretch;
	}

	.dj-notice {
		width: 100%;
		padding: 14px 14px 14px 16px;
		border-radius: var(--dj-radius-md);
	}

	.dj-notice__icon,
	.dj-notice__close {
		width: 22px;
		height: 22px;
	}

	.dj-notice__close svg {
		width: 14px;
		height: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dj-notice {
		transition: opacity var(--dj-transition);
		transform: none;
	}

	.dj-notice.is-open,
	.dj-notice.is-leaving {
		transform: none;
	}

	.dj-notice.is-bumped {
		animation: none;
	}
}