/* ---------------------------------------------------------------
   FMU Kısa Notlar
   Renkler tema token'larından gelir, açık/koyu şemaya uyar.
   --------------------------------------------------------------- */

.fmnApp {
	--fmn-surface: var(--i-background_2, #1c1f26);
	--fmn-raised: var(--i-background_3, #23262e);
	--fmn-text: var(--i-color_root, #d7dae0);
	--fmn-soft: var(--i-color_soft, #9aa0ab);
	--fmn-accent: var(--i-primary, #b92743);
	--fmn-border: var(--i-box--bo-co, rgb(128 128 128 / 22%));
	--fmn-radius: var(--i-box--bo-ra, 10px);

	color: var(--fmn-text);
	font-size: 14px;
}

.fmnBox {
	background: var(--fmn-surface);
	border: 1px solid var(--fmn-border);
	border-radius: var(--fmn-radius);
	overflow: hidden;
}

/* Yan sütunda tema widget'larıyla aynı ritim — altındaki bloğa yapışmasın.
   Temanızda farklıysa --fmn-side-gap ile ezebilirsiniz. */
.fmnApp--side { display: block; margin-block-end: var(--fmn-side-gap, 18px); }
.fmnBox + .fmnBox { margin-block-start: 16px; }

.fmnBox_head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 15px;
	border-block-end: 1px solid var(--fmn-border);
	font-weight: 700;
	font-size: 14px;
}
.fmnBox_head i { color: var(--fmn-accent); }
.fmnBox_count {
	margin-inline-start: auto;
	font-weight: 500;
	font-size: 12px;
	color: var(--fmn-soft);
}

.fmnBox_foot {
	display: block;
	padding: 11px 15px;
	border-block-start: 1px solid var(--fmn-border);
	text-align: center;
	font-weight: 500;
	font-size: 13px;
	color: var(--i-link--co, var(--fmn-accent));
}
.fmnBox_foot:hover { background: var(--fmn-raised); text-decoration: none; }

/* ------------------------------------------------------------ avatar */

.fmnAvatar {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--fmn-raised);
	color: var(--fmn-text);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
}
.fmnAvatar--sm { width: 30px; height: 30px; font-size: 12px; }

/* ---------------------------------------------------------- composer */

.fmnComposer { padding: 14px 15px; }

.fmnComposer_row { display: flex; gap: 10px; }

.fmnComposer_input {
	flex: 1 1 auto;
	min-height: 54px;
	max-height: 180px;
	padding: 9px 11px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--fmn-raised);
	color: var(--fmn-text);
	font: inherit;
	line-height: 1.5;
	resize: none;
	outline: none;
	transition: border-color .15s ease;
}
.fmnComposer_input:focus { border-color: var(--fmn-accent); }
.fmnComposer_input::placeholder { color: var(--fmn-soft); }

/* Etiket önerileri — hashtag'i görünür ve tek tık yapar */
.fmnComposer_tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-block-start: 9px;
	padding-inline-start: 46px;
}
.fmnComposer--compact .fmnComposer_tags { padding-inline-start: 0; }

.fmnChip {
	padding: 4px 10px;
	border: 1px solid var(--fmn-border);
	border-radius: 999px;
	background: transparent;
	color: var(--fmn-soft);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}
.fmnChip:hover {
	color: hsl(var(--fmn-tag-h, 352) 62% 38%);
	border-color: hsl(var(--fmn-tag-h, 352) 62% 38% / 55%);
}
:root[data-ips-scheme="dark"] .fmnChip:hover {
	color: hsl(var(--fmn-tag-h, 352) 72% 72%);
	border-color: hsl(var(--fmn-tag-h, 352) 72% 72% / 45%);
}
.fmnChip--new { font-weight: 700; padding-inline: 11px; }

.fmnComposer_foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-start: 10px;
	padding-inline-start: 46px;
}
.fmnComposer--compact .fmnComposer_foot { padding-inline-start: 0; }

.fmnComposer_hint {
	font-size: 12px;
	color: var(--fmn-soft);
}
.fmnComposer--compact .fmnComposer_hint { display: none; }

.fmnComposer_count {
	margin-inline-start: auto;
	font-size: 12px;
	color: var(--fmn-soft);
	font-variant-numeric: tabular-nums;
}
.fmnComposer_count.is-warn { color: #e0a33e; }
.fmnComposer_count.is-over { color: var(--fmn-accent); font-weight: 600; }

.fmnBtn {
	padding: 7px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--fmn-accent);
	color: var(--i-primary-contrast, #fff);
	font: 600 13px/1 inherit;
	cursor: pointer;
	transition: opacity .15s ease;
}
.fmnBtn:disabled { opacity: .4; cursor: default; }
.fmnBtn--ghost {
	display: block;
	width: 100%;
	margin-block-start: 14px;
	padding-block: 10px;
	border: 1px solid var(--fmn-border);
	border-radius: var(--fmn-radius);
	background: transparent;
	color: var(--fmn-soft);
}
.fmnBtn--ghost:hover { background: var(--fmn-surface); color: var(--fmn-text); }

/* --------------------------------------------------------------- not */

.fmnNote {
	display: flex;
	gap: 10px;
	padding: 13px 15px;
	border-block-end: 1px solid var(--fmn-border);
}
.fmnNote:last-child { border-block-end: 0; }
.fmnNote--hidden { opacity: .55; }
.fmnNote.is-new { animation: fmnPop .45s ease; }
.fmnNote.is-going { opacity: 0; transform: translateY(-4px); transition: .25s ease; }

@keyframes fmnPop {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

.fmnNote_body { flex: 1 1 auto; min-width: 0; }

.fmnNote_head {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
	font-size: 13px;
}
.fmnNote_name { font-weight: 600; color: inherit; }
a.fmnNote_name:hover { color: var(--fmn-accent); text-decoration: none; }
.fmnNote_time { color: var(--fmn-soft); font-size: 12px; }

.fmnBadge {
	padding: 1px 6px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--fmn-accent) 16%, transparent);
	color: var(--i-link--co, var(--fmn-accent));
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .02em;
}

.fmnNote_text {
	margin-block-start: 3px;
	font-size: 14px;
	line-height: 1.5;
	overflow-wrap: break-word;
}

/* Etiketler: her biri kendi renginde, hafif zeminli rozet.
   Renk tonu sunucudan --fmn-tag-h ile gelir, aynı etiket hep aynı renk. */
/* @ ile etiketlenen üye */
/* Not içindeki üç öğe de aynı rozet dilini konuşur, sadece renk tonu değişir:
   etiket çok renkli, üye kırmızı, adres mavi. */
.fmnMention { --fmn-tag-h: 352; }
.fmnLink { --fmn-tag-h: 205; }

.fmnMention,
.fmnLink {
	display: inline-block;
	padding: 1px 6px;
	border-radius: 6px;
	color: hsl(var(--fmn-tag-h) 62% 38%);
	background: hsl(var(--fmn-tag-h) 62% 38% / 11%);
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.fmnMention:hover,
.fmnLink:hover {
	color: hsl(var(--fmn-tag-h) 62% 30%);
	background: hsl(var(--fmn-tag-h) 62% 38% / 20%);
	text-decoration: none;
}

.fmnLink i {
	margin-inline-end: 5px;
	font-size: .82em;
	opacity: .7;
}

:root[data-ips-scheme="dark"] .fmnMention,
:root[data-ips-scheme="dark"] .fmnLink,
:root[data-ips-prefers-color-scheme="dark"] .fmnMention,
:root[data-ips-prefers-color-scheme="dark"] .fmnLink {
	color: hsl(var(--fmn-tag-h) 72% 72%);
	background: hsl(var(--fmn-tag-h) 72% 72% / 14%);
}
:root[data-ips-scheme="dark"] .fmnMention:hover,
:root[data-ips-scheme="dark"] .fmnLink:hover {
	color: hsl(var(--fmn-tag-h) 80% 80%);
	background: hsl(var(--fmn-tag-h) 72% 72% / 24%);
}

.fmnTag {
	display: inline-block;
	padding: 1px 6px;
	border-radius: 6px;
	color: hsl(var(--fmn-tag-h, 352) 62% 38%);
	background: hsl(var(--fmn-tag-h, 352) 62% 38% / 11%);
	font-weight: 600;
	text-decoration: none;
}
.fmnTag:hover {
	color: hsl(var(--fmn-tag-h, 352) 62% 30%);
	background: hsl(var(--fmn-tag-h, 352) 62% 38% / 20%);
	text-decoration: none;
}

/* Koyu şemada aynı ton, açık ve okunur haliyle */
:root[data-ips-scheme="dark"] .fmnTag,
:root[data-ips-prefers-color-scheme="dark"] .fmnTag {
	color: hsl(var(--fmn-tag-h, 352) 72% 72%);
	background: hsl(var(--fmn-tag-h, 352) 72% 72% / 14%);
}
:root[data-ips-scheme="dark"] .fmnTag:hover,
:root[data-ips-prefers-color-scheme="dark"] .fmnTag:hover {
	color: hsl(var(--fmn-tag-h, 352) 80% 80%);
	background: hsl(var(--fmn-tag-h, 352) 72% 72% / 24%);
}

.fmnNote_actions {
	display: flex;
	gap: 16px;
	margin-block-start: 7px;
}

.fmnAct {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fmn-soft);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}
.fmnAct:hover { color: var(--fmn-accent); }
.fmnAct--like.is-on { color: var(--fmn-accent); font-weight: 600; }
.fmnAct--del:hover { color: #e0554f; }

/* ------------------------------------------------------------ yanıt */

.fmnNote_replies { margin-block-start: 9px; }

.fmnReply {
	display: flex;
	gap: 8px;
	padding-inline-start: 11px;
	border-inline-start: 2px solid var(--fmn-border);
	font-size: 13px;
}
.fmnReply + .fmnReply { margin-block-start: 8px; }
.fmnReply .fmnNote_text { font-size: 13px; }

.fmnReplyBox {
	display: flex;
	gap: 8px;
	margin-block-start: 9px;
}
.fmnReplyBox input {
	flex: 1 1 auto;
	padding: 7px 10px;
	border: 1px solid var(--fmn-border);
	border-radius: 8px;
	background: var(--fmn-raised);
	color: var(--fmn-text);
	font: inherit;
	font-size: 13px;
	outline: none;
}
.fmnReplyBox input:focus { border-color: var(--fmn-accent); }

/* ------------------------------------------------------------- sayfa */

.fmnPage {
	display: grid;
	grid-template-columns: 1fr 290px;
	gap: 20px;
	align-items: start;
}

.fmnPage_title { margin: 0 0 3px; font-size: 24px; font-weight: 800; }
.fmnPage_sub { margin: 0 0 16px; color: var(--fmn-soft); font-size: 14px; }

.fmnBack {
	display: inline-block;
	margin-block-end: 10px;
	color: var(--fmn-soft);
	font-size: 13px;
}
.fmnBack:hover { color: var(--fmn-accent); text-decoration: none; }

.fmnBox--composer { margin-block-end: 16px; }

/* -------------------------------------------------------- etiketler */

.fmnTrend_row {
	display: flex;
	align-items: baseline;
	gap: 9px;
	padding: 9px 15px;
	color: inherit;
}
.fmnTrend_row:hover { background: var(--fmn-raised); text-decoration: none; }
.fmnTrend_rank { width: 12px; color: var(--fmn-soft); font-size: 12px; }
.fmnTrend_n { margin-inline-start: auto; color: var(--fmn-soft); font-size: 12px; }

/* --------------------------------------------------------------- boş */

.fmnEmpty {
	padding: 26px 15px;
	text-align: center;
	color: var(--fmn-soft);
	font-size: 13px;
}

.fmnToast {
	position: fixed;
	inset-block-end: 18px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: 2000;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--fmn-accent);
	color: #fff;
	font-size: 13px;
	box-shadow: 0 8px 24px -8px rgb(0 0 0 / 45%);
}

/* -------------------------------------------------------------- dar */

@media (max-width: 979px) {
	.fmnPage { grid-template-columns: 1fr; }
	.fmnPage_side { order: -1; }
	.fmnComposer_foot { padding-inline-start: 0; }
}