/* ---------------------------------------------------------------
   FMU Live Activity  —  canli aktivite akisi (ticker + toast)
   Tema token'lari: --i-primary, --i-background_*, --i-color_*
   --------------------------------------------------------------- */

:root {
	--fmul-radius: var(--i-box--bo-ra, 8px);
	--fmul-surface: var(--i-background_2, #1c1f26);
	--fmul-surface-alt: var(--i-background_3, #23262e);
	--fmul-text: var(--i-color_root, #d7dae0);
	--fmul-text-soft: var(--i-color_soft, #9aa0ab);
	--fmul-accent: var(--i-primary, #3b82f6);
	--fmul-alert: #f59e0b;
	--fmul-shadow: 0 6px 24px -6px rgb(0 0 0 / 45%);
	--fmul-toast-width: 330px;
	--fmul-icon-font: var(--i-font-awesome, "Font Awesome 6 Free");
	--fmul-ticker-height: 38px;
	--fmul-ticker-gap: 40px;
}

/* =============================== TICKER =============================== */

.fmulTicker {
	position: relative;
	z-index: 900;
	display: flex;
	align-items: stretch;
	height: var(--fmul-ticker-height);
	background: var(--fmul-surface);
	border-block-end: 1px solid var(--i-box--bo-co, rgb(255 255 255 / 8%));
	font-size: 13px;
	color: var(--fmul-text);
	overflow: hidden;
}

.fmulTicker--fixed {
	position: sticky;
	inset-block-start: 0;
}

.fmulTicker_label {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding-inline: 12px;
	background: var(--fmul-accent);
	color: var(--i-primary-contrast, #fff);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.fmulTicker_pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	animation: fmulPulse 1.8s ease-in-out infinite;
}

@keyframes fmulPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .35; transform: scale(.7); }
}

.fmulTicker_viewport {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
}

.fmulTicker_close {
	flex: 0 0 auto;
	padding-inline: 10px;
	border: 0;
	background: transparent;
	color: var(--fmul-text-soft);
	cursor: pointer;
	line-height: 1;
}
.fmulTicker_close:hover { color: var(--fmul-text); }

/* --- mod: marquee (kesintisiz kayan serit) --- */

.fmulTicker_track {
	display: flex;
	align-items: center;
	gap: var(--fmul-ticker-gap);
	height: 100%;
	width: max-content;
	animation: fmulMarquee var(--fmul-speed, 40s) linear infinite;
}
.fmulTicker:hover .fmulTicker_track,
.fmulTicker_track[data-paused] { animation-play-state: paused; }

@keyframes fmulMarquee {
	from { transform: translate3d(0, 0, 0); }
	/* Icerik iki kez basildigi icin yarisi kadar kayar; ek yarim bosluk birlesme yerini gizler. */
	to   { transform: translate3d(calc(-50% - var(--fmul-ticker-gap) / 2), 0, 0); }
}

/* --- mod: slide (tek tek asagi kayan) --- */

.fmulTicker--slide .fmulTicker_viewport { display: grid; }
.fmulTicker--slide .fmulTicker_item {
	grid-area: 1 / 1;
	align-self: center;
	padding-inline: 14px;
	opacity: 0;
	transform: translateY(-100%);
	transition: transform .45s cubic-bezier(.22, .61, .36, 1), opacity .3s;
	pointer-events: none;
}
.fmulTicker--slide .fmulTicker_item.is-active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.fmulTicker--slide .fmulTicker_item.is-leaving {
	opacity: 0;
	transform: translateY(100%);
}

.fmulTicker_item {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	min-width: 0;
}
.fmulTicker_item a { color: inherit; text-decoration: none; }
.fmulTicker_item a:hover { color: var(--i-link-hover--co, var(--fmul-accent)); }
.fmulTicker_item .fmulName { font-weight: 600; }
.fmulTicker_item .fmulTitle { color: var(--fmul-text-soft); overflow: hidden; text-overflow: ellipsis; }
.fmulTicker_item .fmulTime { color: var(--fmul-text-soft); font-size: 11px; }

.fmulIcon {
	flex: 0 0 auto;
	font-family: var(--fmul-icon-font);
	font-weight: 900;
	font-style: normal;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--fmul-accent) 18%, transparent);
	color: var(--fmul-accent);
	font-size: 10px;
}

/* Tepki gorseli (begen, tesekkur, +rep ...) ikon yerine gecer */
.fmulIcon--image {
	background: none;
	object-fit: contain;
}

/* Moderasyon olaylari (onay kuyrugu, sikayet) akista one cikar */
.fmulIcon--alert {
	background: color-mix(in srgb, var(--fmul-alert) 22%, transparent);
	color: var(--fmul-alert);
}

.fmulToast.fmul--alert {
	border-color: color-mix(in srgb, var(--fmul-alert) 45%, transparent);
}
.fmulToast.fmul--alert .fmulToast_progress { background: var(--fmul-alert); }
.fmulTicker_item.fmul--alert .fmulName { color: var(--fmul-alert); }

.fmulAvatar {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--fmul-surface-alt);
}

/* =============================== TOAST =============================== */

.fmulToasts {
	position: fixed;
	z-index: 1500;
	inset-block-end: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: var(--fmul-toast-width);
	max-width: calc(100vw - 24px);
	pointer-events: none;
}
.fmulToasts--right { inset-inline-end: 16px; align-items: flex-end; }
.fmulToasts--left  { inset-inline-start: 16px; align-items: flex-start; }

.fmulToast {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--i-box--bo-co, rgb(255 255 255 / 8%));
	border-radius: var(--fmul-radius);
	background: var(--fmul-surface);
	box-shadow: var(--fmul-shadow);
	color: var(--fmul-text);
	font-size: 13px;
	line-height: 1.4;
	pointer-events: auto;
	opacity: 0;
	transform: translateY(12px) scale(.97);
	transition: opacity .28s ease, transform .28s cubic-bezier(.22, .61, .36, 1);
}
.fmulToast.is-in { opacity: 1; transform: none; }
.fmulToast.is-out { opacity: 0; transform: translateY(6px) scale(.97); }

.fmulToasts--left .fmulToast  { transform: translateX(-12px) scale(.97); }
.fmulToasts--right .fmulToast { transform: translateX(12px) scale(.97); }
.fmulToasts--left .fmulToast.is-in,
.fmulToasts--right .fmulToast.is-in { transform: none; }

.fmulToast_media { position: relative; flex: 0 0 auto; }
.fmulToast_media .fmulAvatar { width: 34px; height: 34px; }
.fmulToast_media .fmulIcon {
	position: absolute;
	inset-block-end: -3px;
	inset-inline-end: -3px;
	width: 16px;
	height: 16px;
	font-size: 8px;
	background: var(--fmul-surface);
	box-shadow: 0 0 0 2px var(--fmul-surface);
}

.fmulToast_media .fmulIcon--image { padding: 1px; }

/* Avatar yoksa ikon rozet olarak degil, asil gorsel olarak durur */
.fmulToast_media--solo .fmulIcon {
	position: static;
	width: 34px;
	height: 34px;
	font-size: 14px;
	box-shadow: none;
	background: color-mix(in srgb, var(--fmul-accent) 18%, transparent);
}
.fmulToast_media--solo .fmulIcon--alert {
	background: color-mix(in srgb, var(--fmul-alert) 22%, transparent);
}

.fmulToast_body { flex: 1 1 auto; min-width: 0; }
.fmulToast_text { margin: 0; }
.fmulToast_text a { color: inherit; text-decoration: none; }
.fmulToast_text a:hover { text-decoration: underline; }
.fmulToast_title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--fmul-text-soft);
}
.fmulToast_meta {
	margin-block-start: 3px;
	color: var(--fmul-text-soft);
	font-size: 11px;
}

/* Kapatma dugmesi: metnin akisini bozmadan sag ust kosede, parmakla
   basilabilecek kadar buyuk ama gorsel olarak sessiz. */
.fmulToast_close {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-end: 4px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--fmul-text-soft);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	opacity: .55;
	transition: opacity .15s ease, background .15s ease;
}
.fmulToast:hover .fmulToast_close { opacity: 1; }
.fmulToast_close:hover {
	background: color-mix(in srgb, var(--fmul-text-soft) 18%, transparent);
	color: var(--fmul-text);
}

/* Metin kapatma dugmesinin altina girmesin */
.fmulToast_body { padding-inline-end: 22px; }

.fmulToast_progress {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	height: 2px;
	width: 100%;
	transform-origin: left center;
	background: var(--fmul-accent);
	opacity: .5;
	animation: fmulProgress var(--fmul-life, 6s) linear forwards;
}
.fmulToast { position: relative; overflow: hidden; }
.fmulToast:hover .fmulToast_progress { animation-play-state: paused; }

@keyframes fmulProgress {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

/* =============================== MOBIL =============================== */

@media (max-width: 767px) {
	.fmulToasts {
		/* Tam genislige yayilan bildirim mobilde devasa duruyor; sabit bir
		   genislikte tutup ekran kenarina yaslıyoruz. */
		inset-inline-start: auto;
		inset-inline-end: 10px;
		inset-block-end: calc(10px + var(--fmul-mobile-offset, 56px));
		width: min(var(--fmul-toast-width), calc(100vw - 20px));
	}
	.fmulToasts--left {
		inset-inline-start: 10px;
		inset-inline-end: auto;
	}
	.fmulTicker { font-size: 12px; }
	.fmulTicker_label span:not(.fmulTicker_pulse) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fmulTicker_track { animation: none; padding-inline-start: 14px; overflow: hidden; }
	.fmulToast, .fmulTicker_item { transition-duration: .01ms; }
	.fmulToast_progress { animation: none; }
	.fmulTicker_pulse { animation: none; }
}

/* --- uye tercihleri baglantisi --- */
.fmulTicker_prefs {
	flex: 0 0 auto;
	align-self: center;
	padding-inline: 8px;
	font-size: 12px;
	white-space: nowrap;
	color: var(--fmul-text-soft);
	text-decoration: none;
}
.fmulTicker_prefs:hover { color: var(--fmul-text); text-decoration: underline; }

.fmulToasts_prefs {
	display: none;
	align-self: flex-end;
	padding: 2px 6px;
	font-size: 12px;
	color: var(--fmul-text-soft);
	text-decoration: none;
}
.fmulToasts:has(.fmulToast) .fmulToasts_prefs { display: block; }
.fmulToasts_prefs:hover { color: var(--fmul-text); text-decoration: underline; }