/*
Theme Name: FYB Social
Theme URI: https://yuinbettafish.com
Author: Yuin Betta Fish
Description: Tema jejaring sosial & marketplace komunitas Yuin Betta Fish. Tampilan aplikasi (top bar + sidebar + feed), tanpa jejak WordPress, warna mengikuti logo Yuin Betta Fish. Dipasangkan dengan plugin FYB Core & BuddyPress.
Version: 0.1.0
Requires at least: 6.1
Requires PHP: 7.4
Text Domain: fyb-social
*/

/* ==========================================================================
   1. Variabel & dasar
   ========================================================================== */
:root {
	/* Warna diambil dari logo Yuin Betta Fish (sama dengan situs utama). */
	--teal-900: #03302f;
	--teal-800: #04403f;
	--teal-700: #065755;
	--teal-600: #066867;
	--teal-500: #0d8482;
	--teal-400: #3aa19f;
	--teal-200: #bfe0de;
	--teal-100: #e6f3f2;
	--teal-50:  #f5faf9;

	--white: #ffffff;
	--ink: #12201f;
	--gray-700: #3f5352;
	--gray-600: #4d605f;
	--gray-500: #5b6b6a;
	--gray-400: #869998;
	--gray-300: #a9bcbb;
	--border: #e2edec;
	--surface: #f4f8f7;

	--danger: #b42318;
	--danger-soft: #fdecea;
	--warning: #b06a00;
	--warning-soft: #fdf3e4;
	--success: #15803d;
	--success-soft: #e9f7ef;

	--radius-sm: 10px;
	--radius: 14px;
	--radius-lg: 20px;
	--shadow-sm: 0 1px 2px rgba(3, 48, 47, .06);
	--shadow: 0 4px 16px rgba(3, 48, 47, .08);
	--shadow-lg: 0 16px 40px rgba(3, 48, 47, .16);

	--font-heading: 'Poppins', 'Segoe UI', sans-serif;
	--font-body: 'Inter', 'Segoe UI', sans-serif;

	--topbar-h: 60px;
	--rail-w: 232px;
	--right-w: 300px;
	--gap: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Atribut hidden harus selalu menang atas display apa pun di bawah. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
/* Foto profil tidak selalu persegi (apalagi di server tanpa GD, gambarnya
   disimpan apa adanya) — dipotong lewat CSS, bukan digepengkan. */
img.fyb-avatar, img.avatar { object-fit: cover; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--teal-800); line-height: 1.25; margin: 0 0 .5em; letter-spacing: -.01em; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: 15px; color: var(--ink); }
.screen-reader-text { position: absolute; left: -9999px; }
.fyb-icon { flex-shrink: 0; }

/* ==========================================================================
   2. Tombol & kolom isian
   ========================================================================== */
.fyb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 18px;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: var(--teal-600);
	color: var(--white);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fyb-btn:hover { background: var(--teal-700); }
.fyb-btn:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }
.fyb-btn--block { width: 100%; }
.fyb-btn--ghost { background: transparent; border-color: var(--border); color: var(--gray-700); }
.fyb-btn--ghost:hover { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-700); }
.fyb-btn--soft { background: var(--teal-100); color: var(--teal-700); }
.fyb-btn--soft:hover { background: var(--teal-200); }
.fyb-btn--danger { background: var(--danger); }
.fyb-btn--danger:hover { background: #8f1c13; }
.fyb-btn--sm { padding: 8px 14px; font-size: 13.5px; }
.fyb-btn[disabled], .fyb-btn.is-disabled { opacity: .55; pointer-events: none; }

.fyb-field { margin-bottom: 16px; }
.fyb-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--gray-700);
}
.fyb-input,
.fyb-textarea,
.fyb-select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--white);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fyb-input:focus,
.fyb-textarea:focus,
.fyb-select:focus {
	outline: none;
	border-color: var(--teal-400);
	box-shadow: 0 0 0 3px rgba(13, 132, 130, .12);
}
.fyb-textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.fyb-help { margin: 6px 0 0; font-size: 12.5px; color: var(--gray-500); }
.fyb-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--gray-700); }
.fyb-check input { margin-top: 3px; accent-color: var(--teal-600); }

/* ==========================================================================
   3. Kerangka aplikasi (top bar + sidebar + konten)
   ========================================================================== */
.fyb-topbar {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--topbar-h);
	background: var(--white);
	border-bottom: 1px solid var(--border);
}
.fyb-topbar__inner {
	max-width: 1320px;
	height: 100%;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	gap: 16px;
}
.fyb-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.fyb-brand img { width: 34px; height: 34px; border-radius: 9px; }
.fyb-brand__name { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--teal-800); letter-spacing: -.02em; }

.fyb-search { position: relative; flex: 1; max-width: 420px; }
.fyb-search input {
	width: 100%;
	padding: 9px 14px 9px 38px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--surface);
	font-size: 14px;
}
.fyb-search input:focus { outline: none; background: var(--white); border-color: var(--teal-200); box-shadow: 0 0 0 3px rgba(13, 132, 130, .1); }
.fyb-search .fyb-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--gray-400); }

.fyb-topnav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.fyb-topnav__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	color: var(--gray-500);
	transition: background .15s ease, color .15s ease;
}
.fyb-topnav__link:hover { background: var(--teal-50); color: var(--teal-700); }
.fyb-topnav__link.is-active { color: var(--teal-600); background: var(--teal-50); }
.fyb-badge-count {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--danger);
	color: var(--white);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.fyb-langswitch { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); }
.fyb-langswitch a {
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--gray-500);
}
.fyb-langswitch a.is-active { background: var(--teal-600); color: var(--white); }

.fyb-usermenu { position: relative; }
.fyb-usermenu__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 6px 4px 4px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--white);
	cursor: pointer;
}
.fyb-usermenu__toggle img { width: 30px; height: 30px; border-radius: 50%; }
.fyb-usermenu__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	width: 230px;
    padding: 8px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	display: none;
}
.fyb-usermenu.is-open .fyb-usermenu__panel { display: block; }
.fyb-usermenu__panel a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 9px;
	font-size: 14px;
	color: var(--gray-700);
}
.fyb-usermenu__panel a:hover { background: var(--teal-50); color: var(--teal-700); }
.fyb-usermenu__head { padding: 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.fyb-usermenu__head strong { display: block; font-size: 14.5px; color: var(--ink); }
.fyb-usermenu__head span { font-size: 12.5px; color: var(--gray-500); }

.fyb-shell {
	max-width: 1320px;
	margin: 0 auto;
	padding: var(--gap) 20px 64px;
	display: grid;
	grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--right-w);
	gap: var(--gap);
	align-items: start;
}
.fyb-shell--wide { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
.fyb-shell--full { grid-template-columns: minmax(0, 1fr); max-width: 1100px; }

.fyb-rail { position: sticky; top: calc(var(--topbar-h) + var(--gap)); }
.fyb-rail__nav { display: grid; gap: 2px; }
.fyb-rail__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	font-size: 14.5px;
	font-weight: 500;
	color: var(--gray-700);
	transition: background .15s ease, color .15s ease;
}
.fyb-rail__link:hover { background: var(--teal-50); color: var(--teal-700); }
.fyb-rail__link.is-active { background: var(--teal-600); color: var(--white); font-weight: 600; }
.fyb-rail__link .fyb-badge-count { position: static; margin-left: auto; }
.fyb-rail__cta { margin-top: 14px; }
.fyb-rail__foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--gray-400); line-height: 1.7; }
.fyb-rail__foot a:hover { color: var(--teal-600); }

/* grid-template-columns: minmax(0, 1fr) — tanpa itu satu anak yang lebar
   (mis. barisan tab yang panjang) menarik seluruh kolom ikut melebar dan
   halaman jadi bisa digeser ke samping. */
.fyb-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.fyb-main > * { min-width: 0; }
.fyb-right { position: sticky; top: calc(var(--topbar-h) + var(--gap)); display: grid; gap: 16px; }

/* Panel: kartu putih dasar yang dipakai hampir semua blok */
.fyb-panel {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}
.fyb-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--border);
}
.fyb-panel__head h2, .fyb-panel__head h3 { margin: 0; font-size: 15px; }
.fyb-panel__head a { font-size: 13px; color: var(--teal-600); font-weight: 600; }
.fyb-panel__body { padding: 16px; }
.fyb-panel__body--tight { padding: 10px; }

/* ==========================================================================
   4. Navigasi bawah (HP)
   ========================================================================== */
.fyb-tabbar { display: none; }
@media (max-width: 1080px) {
	:root { --right-w: 0px; }
	.fyb-shell { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
	.fyb-right { display: none; }
}
@media (max-width: 860px) {
	.fyb-shell, .fyb-shell--wide { grid-template-columns: minmax(0, 1fr); padding-bottom: 86px; }
	.fyb-rail { display: none; }
	.fyb-search { max-width: none; }
	.fyb-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 120;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		background: var(--white);
		border-top: 1px solid var(--border);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.fyb-tabbar a {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: 9px 0 7px;
		font-size: 10.5px;
		font-weight: 600;
		color: var(--gray-500);
	}
	.fyb-tabbar a.is-active { color: var(--teal-600); }
	.fyb-tabbar .fyb-badge-count { top: 2px; right: 50%; margin-right: -22px; }
}

/* ==========================================================================
   5. Halaman masuk / daftar (tanpa sidebar)
   ========================================================================== */
.fyb-auth {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) { .fyb-auth { grid-template-columns: 1fr; } }

.fyb-auth__side {
	position: relative;
	padding: 56px 48px;
	color: var(--white);
	background:
		radial-gradient(110% 80% at 15% 0%, rgba(13, 132, 130, .6) 0%, transparent 58%),
		linear-gradient(155deg, #04403f 0%, #03302f 60%, #021a19 100%);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
@media (max-width: 900px) { .fyb-auth__side { display: none; } }
.fyb-auth__side h1 { color: var(--white); font-size: 36px; line-height: 1.15; margin-bottom: 14px; }
.fyb-auth__side p { color: rgba(255, 255, 255, .8); font-size: 15.5px; max-width: 420px; }
.fyb-auth__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.fyb-auth__logo img { width: 44px; height: 44px; border-radius: 12px; }
.fyb-auth__logo span { font-family: var(--font-heading); font-weight: 700; font-size: 17px; }
.fyb-auth__points { margin-top: 32px; display: grid; gap: 14px; }
.fyb-auth__points li { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .85); font-size: 14.5px; }
.fyb-auth__points .fyb-icon { color: var(--teal-200); }

.fyb-auth__main {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	background: var(--white);
}
.fyb-auth__card { width: 100%; max-width: 400px; }
.fyb-auth__card h2 { font-size: 26px; margin-bottom: 6px; }
.fyb-auth__card > p { color: var(--gray-500); margin-bottom: 26px; font-size: 14.5px; }
.fyb-auth__mobile-logo { display: none; align-items: center; gap: 10px; margin-bottom: 28px; }
@media (max-width: 900px) { .fyb-auth__mobile-logo { display: flex; } }
.fyb-auth__mobile-logo img { width: 38px; height: 38px; border-radius: 10px; }
.fyb-auth__alt { margin-top: 22px; text-align: center; font-size: 14px; color: var(--gray-500); }
.fyb-auth__alt a { color: var(--teal-600); font-weight: 600; }
.fyb-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.fyb-auth__row a { font-size: 13px; color: var(--teal-600); font-weight: 600; }

/* ==========================================================================
   6. Pesan sistem
   ========================================================================== */
.fyb-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	margin-bottom: 18px;
	border: 1px solid transparent;
}
.fyb-notice--error { background: var(--danger-soft); color: var(--danger); border-color: #f6cfcb; }
.fyb-notice--success { background: var(--success-soft); color: var(--success); border-color: #c7ead6; }
.fyb-notice--info { background: var(--teal-50); color: var(--teal-700); border-color: var(--teal-200); }
.fyb-notice--warning { background: var(--warning-soft); color: var(--warning); border-color: #f2ddba; }

.fyb-empty {
	padding: 40px 24px;
	text-align: center;
	color: var(--gray-500);
	font-size: 14.5px;
}
.fyb-empty .fyb-icon { color: var(--teal-200); margin: 0 auto 10px; display: block; }

/* ==========================================================================
   7. Komposer & kartu kiriman (feed)
   ========================================================================== */
/* --- Pemicu di halaman: sebaris, tanpa isian apa pun --------------------
   Yang kelihatan di feed cuma undangan untuk menulis. Formulir aslinya di
   dalam jendela, jadi kotak ini tidak pernah memanjang dan tidak pernah
   menggeser kiriman di bawahnya. */
.fyb-starter__row { display: flex; gap: 12px; align-items: center; padding: 14px 16px; }
.fyb-starter img.fyb-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; }
.fyb-starter__fake {
	flex: 1;
	min-width: 0;
	min-height: 42px;
	padding: 11px 16px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--gray-500);
	font: inherit;
	font-size: 14.5px;
	text-align: left;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background .15s ease, border-color .15s ease;
}
.fyb-starter__fake:hover { background: var(--teal-50); border-color: var(--teal-200); }
.fyb-starter__tools {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px 10px;
	border-top: 1px solid var(--border);
}
.fyb-starter__tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 1 1 0;
	padding: 9px 10px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--gray-500);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}
.fyb-starter__tool:hover { background: var(--teal-50); color: var(--teal-700); }
.fyb-starter__tool .fyb-icon { color: var(--teal-600); }
.fyb-starter__emoji { font-size: 17px; line-height: 1; color: var(--teal-600); }
.fyb-starter__scope { flex: 0 0 auto; }

/* --- Formulir di dalam jendela ---------------------------------------- */
.fyb-modal__box--composer { max-width: 560px; padding: 0; }
.fyb-composer__head {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px 52px;
	border-bottom: 1px solid var(--border);
}
.fyb-composer__head h2 { margin: 0; font-size: 18px; }
.fyb-composer__head .fyb-modal__x { top: 12px; right: 14px; }
.fyb-composer { display: flex; flex-direction: column; }
.fyb-composer__who { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.fyb-composer img.fyb-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.fyb-composer__whotext { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.fyb-composer__whotext strong { font-size: 14.5px; color: var(--ink); }
.fyb-composer__input {
	width: 100%;
	min-height: 108px;
	max-height: 320px;
	padding: 0 16px 12px;
	border: 0;
	background: none;
	color: var(--ink);
	font: inherit;
	font-size: 17px;
	line-height: 1.5;
	resize: none;
}
.fyb-composer__input::placeholder { color: var(--gray-500); }
.fyb-composer__input:focus { outline: none; }
.fyb-composer .fyb-composer__preview { padding: 0 16px 12px; }
.fyb-composer__add {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 16px;
	padding: 9px 8px 9px 14px;
	border: 1px solid var(--border);
	border-radius: 12px;
}
.fyb-composer__addlabel {
	margin-right: auto;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--gray-700);
}
.fyb-composer__tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--teal-600);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}
.fyb-composer__tool:hover { background: var(--teal-50); }
.fyb-composer__count { font-size: 12.5px; color: var(--gray-500); padding-right: 4px; }
.fyb-composer__submit {
	margin: 14px 16px 16px;
	justify-content: center;
}
.fyb-composer__submit:disabled {
	background: var(--surface);
	color: var(--gray-500);
	cursor: not-allowed;
}
/* --- Pemilih privasi buatan sendiri ------------------------------------
   <select> bawaan digambar sistem operasi: tidak bisa diberi ikon,
   penjelasan, atau warna FYB, dan daftar birunya paling mencolok sendiri
   di tengah jendela yang rapi. Ikonnya ikon garis satu warna, bukan emoji
   berwarna — emoji berbeda bentuk di tiap sistem dan terlihat seperti
   tempelan. */
.fyb-vis { position: relative; }
.fyb-vis__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px 5px 9px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--gray-700);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fyb-vis__btn:hover,
.fyb-vis.is-open .fyb-vis__btn {
	background: var(--teal-50);
	border-color: var(--teal-200);
	color: var(--teal-800);
}
.fyb-vis__ico { display: inline-flex; color: currentColor; }
.fyb-vis__caret { display: inline-flex; color: var(--gray-500); transition: transform .15s ease; }
.fyb-vis.is-open .fyb-vis__caret { transform: rotate(180deg); }

/* position: fixed, bukan absolute. Jendela kiriman punya overflow-y auto,
   jadi daftar yang diposisikan relatif terhadap tombolnya akan TERPOTONG
   di tepi jendela. Letaknya dihitung JavaScript dari posisi tombol —
   cara yang sama dipakai panel saran mention. */
.fyb-vis__menu {
	position: fixed;
	z-index: 300;
	width: 290px;
	max-width: calc(100vw - 32px);
	padding: 7px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--white);
	box-shadow: 0 16px 38px rgba(3, 48, 47, .17);
	animation: fyb-vis-in .14s ease-out;
}
.fyb-vis__head {
	display: block;
	padding: 6px 10px 8px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--gray-500);
}
.fyb-vis__opt {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: 10px;
	background: none;
	text-align: left;
	font: inherit;
	color: var(--ink);
	cursor: pointer;
}
.fyb-vis__opt:hover { background: var(--surface); }
.fyb-vis__opt .fyb-vis__ico {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--surface);
	color: var(--gray-700);
}
.fyb-vis__opt:hover .fyb-vis__ico { background: var(--white); }
.fyb-vis__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.fyb-vis__txt strong { font-size: 13.5px; font-weight: 600; }
.fyb-vis__txt small { font-size: 11.5px; line-height: 1.45; color: var(--gray-500); }
.fyb-vis__tick { flex: 0 0 auto; color: var(--teal-600); opacity: 0; margin-top: 4px; }
.fyb-vis__opt.is-on .fyb-vis__tick { opacity: 1; }
.fyb-vis__opt.is-on .fyb-vis__ico { background: var(--teal-600); color: var(--white); }
.fyb-vis__opt.is-on strong { color: var(--teal-800); }

@keyframes fyb-vis-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

/* Tombol emotikon di jendela kiriman disamakan besarnya dengan tombol
   foto di sebelahnya — dua tombol sebaris yang beda ukuran terlihat
   seperti kesalahan. */
.fyb-composer__add .fyb-emoji__toggle {
	width: 38px;
	height: 38px;
	font-size: 23px;
	color: var(--teal-600);
}
.fyb-composer__add .fyb-emoji__toggle:hover,
.fyb-composer__add .fyb-emoji.is-open .fyb-emoji__toggle { background: var(--teal-50); }

/* Teks yang cuma untuk pembaca layar. */
.fyb-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


.fyb-post { padding: 0; }
.fyb-post__head { display: flex; align-items: center; gap: 11px; padding: 14px 16px 10px; }
.fyb-post__head img { width: 42px; height: 42px; border-radius: 50%; }
.fyb-post__who { min-width: 0; }
.fyb-post__name { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.fyb-post__name .fyb-icon--verified { color: var(--teal-500); }
.fyb-post__meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gray-500); }
.fyb-post__meta .fyb-icon { width: 13px; height: 13px; }
.fyb-post__menu { margin-left: auto; }
.fyb-post__body { padding: 0 16px 12px; font-size: 15px; line-height: 1.65; color: var(--ink); overflow-wrap: anywhere; }
.fyb-post__body a { color: var(--teal-600); font-weight: 500; }
.fyb-post__media img { width: 100%; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.fyb-post__stats { display: flex; gap: 14px; padding: 10px 16px; font-size: 12.5px; color: var(--gray-500); }
.fyb-post__actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid var(--border); }
.fyb-post__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 8px;
	border: 0;
	background: transparent;
	color: var(--gray-500);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.fyb-post__action:hover { background: var(--teal-50); color: var(--teal-700); }
.fyb-post__action.is-on { color: var(--teal-600); }
.fyb-post__action.is-on .fyb-icon { fill: rgba(13, 132, 130, .15); }

/* ==========================================================================
   8. Kartu kecil di rail kanan
   ========================================================================== */
.fyb-userrow { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; }
.fyb-userrow:hover { background: var(--teal-50); }
.fyb-userrow img { width: 38px; height: 38px; border-radius: 50%; }
.fyb-userrow__name { font-size: 14px; font-weight: 600; color: var(--ink); }
.fyb-userrow__sub { font-size: 12px; color: var(--gray-500); }
.fyb-userrow__action { margin-left: auto; }

.fyb-taglist { display: flex; flex-wrap: wrap; gap: 8px; }
.fyb-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px;
	border-radius: 999px;
	background: var(--teal-50);
	border: 1px solid var(--teal-100);
	color: var(--teal-700);
	font-size: 12.5px;
	font-weight: 600;
}
.fyb-tag:hover { background: var(--teal-100); }

/* ==========================================================================
   9. Lencana
   ========================================================================== */
.fyb-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .02em;
}
.fyb-pill--seller { background: var(--teal-100); color: var(--teal-700); }
.fyb-pill--admin { background: var(--teal-800); color: var(--white); }
.fyb-pill--pending { background: var(--warning-soft); color: var(--warning); }
.fyb-pill--sold { background: var(--danger-soft); color: var(--danger); }
.fyb-pill--new { background: var(--success-soft); color: var(--success); }

/* ==========================================================================
   10. Judul halaman biasa
   ========================================================================== */
.fyb-pagehead { margin-bottom: 4px; }
.fyb-pagehead h1 { font-size: 26px; margin-bottom: 4px; }
.fyb-pagehead p { color: var(--gray-500); margin: 0; font-size: 14.5px; }

.fyb-prose { font-size: 15.5px; line-height: 1.75; color: var(--gray-700); }
.fyb-prose h2 { font-size: 20px; margin-top: 1.4em; }
.fyb-prose a { color: var(--teal-600); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   11. Beranda tamu
   ========================================================================== */
.fyb-hero .fyb-panel__body { padding: 28px; }
.fyb-hero h1 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; margin-bottom: 10px; }
.fyb-hero p { color: var(--gray-500); font-size: 15.5px; margin-bottom: 20px; max-width: 46ch; }
.fyb-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* ==========================================================================
   12. Komposer: pratinjau foto
   ========================================================================== */
/* Petak kecil berukuran TETAP. Jangan dikembalikan ke `img { width:100% }`:
   foto kamera 4000px bikin kotak tulisnya memanjang satu layar penuh. */
.fyb-composer__preview {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 16px 12px;
}
.fyb-composer__thumb {
	position: relative;
	width: 84px;
	height: 84px;
	flex: 0 0 auto;
	border-radius: var(--radius-sm);
	overflow: hidden;
	border: 1px solid var(--border);
	background: var(--surface);
}
.fyb-composer__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.fyb-composer__remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(2, 26, 25, .66);
	color: var(--white);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}
.fyb-composer__remove:hover { background: var(--danger); }
.fyb-composer__count { font-size: 12.5px; color: var(--gray-500); }
.fyb-composer__tool input[type="file"] { display: none; }

/* ==========================================================================
   13. Komentar
   ========================================================================== */
.fyb-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--gray-400);
	cursor: pointer;
}
.fyb-iconbtn:hover { background: var(--danger-soft); color: var(--danger); }

.fyb-commentbox {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-top: 1px solid var(--border);
}
.fyb-commentbox img { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.fyb-commentbox__input {
	flex: 1;
	min-width: 0;
	padding: 9px 14px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	font-size: 14px;
}
.fyb-commentbox__input:focus { outline: none; background: var(--white); border-color: var(--teal-300, var(--teal-200)); }

.fyb-comments { padding: 4px 16px 14px; display: grid; gap: 10px; }
.fyb-comment { display: flex; gap: 10px; }
.fyb-comment img { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.fyb-comment__bubble { background: var(--surface); border-radius: 14px; padding: 9px 13px; min-width: 0; }
.fyb-comment__name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.fyb-comment__text { font-size: 14px; color: var(--gray-700); overflow-wrap: anywhere; }
.fyb-comment__time { font-size: 11.5px; color: var(--gray-400); }
/* Tautan di komentar warnanya sama dengan tautan di badan kiriman. */
.fyb-comment__text a,
.fyb-icomment__text a { color: var(--teal-600); font-weight: 500; }
.fyb-comment__text a:hover,
.fyb-icomment__text a:hover { color: var(--teal-800); text-decoration: underline; }

.fyb-loadmore { display: flex; justify-content: center; padding: 6px 0 20px; }

/* ==========================================================================
   14. Lapak kecil di rail kanan
   ========================================================================== */
.fyb-minilisting { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; }
.fyb-minilisting:hover { background: var(--teal-50); }
.fyb-minilisting img,
.fyb-minilisting__ph {
	width: 46px;
	height: 46px;
	border-radius: 9px;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--teal-50);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--teal-300, var(--teal-200));
}
.fyb-minilisting__info { min-width: 0; }
.fyb-minilisting__info strong {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fyb-minilisting__info span { font-size: 12.5px; color: var(--teal-600); font-weight: 600; }
.fyb-tag span { color: var(--gray-400); font-weight: 600; }

/* ==========================================================================
   15. Marketplace
   ========================================================================== */
.fyb-markethead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.fyb-markethead .fyb-pagehead { margin: 0; }

.fyb-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fyb-filters__search { position: relative; flex: 1; min-width: 180px; }
.fyb-filters__search input {
	width: 100%;
	padding: 10px 14px 10px 38px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	font-size: 14px;
}
.fyb-filters__search input:focus { outline: none; background: var(--white); border-color: var(--teal-400); }
.fyb-filters__search .fyb-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--gray-400); }
.fyb-filters .fyb-select { width: auto; min-width: 150px; padding: 10px 12px; }

.fyb-listinggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.fyb-listinggrid--sm { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }

.fyb-lcard {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform .18s ease, box-shadow .18s ease;
}
.fyb-lcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.fyb-lcard__media { position: relative; display: block; aspect-ratio: 4/3; background: var(--teal-50); }
.fyb-lcard__media img { width: 100%; height: 100%; object-fit: cover; }
.fyb-lcard__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--teal-200); }
.fyb-lcard.is-sold .fyb-lcard__media img { filter: grayscale(100%); opacity: .8; }
.fyb-lcard__flag { position: absolute; top: 10px; left: 10px; }
.fyb-lcard__body { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.fyb-lcard__tail { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-500); }
.fyb-lcard__title { margin: 0; font-size: 14.5px; line-height: 1.35; }
.fyb-lcard__title a { color: var(--ink); }
.fyb-lcard__title a:hover { color: var(--teal-700); }
.fyb-lcard__price { margin: 2px 0 0; font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--teal-700); }
.fyb-lcard__foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fyb-lcard__seller { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-500); min-width: 0; }
.fyb-lcard__seller img { width: 22px; height: 22px; border-radius: 50%; }
.fyb-lcard__seller span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fyb-lcard__city { font-size: 11.5px; color: var(--gray-400); flex-shrink: 0; }
.fyb-lcard__tools { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* Halaman satu lapak */
.fyb-listing { overflow: hidden; }
.fyb-listing__media { position: relative; background: var(--teal-50); }
.fyb-listing__media img { width: 100%; max-height: 520px; object-fit: cover; }
.fyb-listing__media.is-sold img { filter: grayscale(100%); opacity: .85; }
.fyb-listing__ph { display: flex; align-items: center; justify-content: center; height: 260px; color: var(--teal-200); }
.fyb-listing__flag { position: absolute; top: 16px; left: 16px; }
.fyb-listing__body { padding: 20px; }
.fyb-listing__eyebrow { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-500); }
.fyb-listing__body h1 { font-size: clamp(22px, 3vw, 28px); margin-bottom: 8px; }
.fyb-listing__price { font-family: var(--font-heading); font-size: 26px; font-weight: 800; color: var(--ink); margin: 0 0 18px; }

.fyb-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0; margin: 0 0 20px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.fyb-specs > div { padding: 0 14px; border-left: 1px solid var(--border); }
.fyb-specs > div:first-child { padding-left: 0; border-left: 0; }
.fyb-specs dt { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 3px; }
.fyb-specs dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); }

.fyb-listing__desc { margin-bottom: 20px; }
.fyb-listing__seller { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface); border-radius: var(--radius-sm); margin-bottom: 18px; }
.fyb-listing__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fyb-listing__actions form { margin: 0; }
.fyb-reportform { margin-left: auto; }

/* ==========================================================================
   16. Formulir panjang (lapak, pengajuan penjual)
   ========================================================================== */
.fyb-form .fyb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.fyb-form .fyb-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
@media (max-width: 620px) {
	.fyb-form .fyb-grid2, .fyb-form .fyb-grid3 { grid-template-columns: 1fr; }
}
.fyb-form__thumb { margin-top: 10px; }
.fyb-form__thumb img { border-radius: var(--radius-sm); border: 1px solid var(--border); }
.fyb-form input[type="file"] { padding: 10px; background: var(--surface); }

.fyb-steps { counter-reset: s; display: grid; gap: 10px; margin: 0 0 22px; }
.fyb-steps li {
	counter-increment: s;
	position: relative;
	padding-left: 36px;
	font-size: 14.5px;
	color: var(--gray-700);
}
.fyb-steps li::before {
	content: counter(s);
	position: absolute;
	left: 0;
	top: -1px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--teal-100);
	color: var(--teal-700);
	font-size: 12.5px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   17. Halaman BuddyPress (anggota, profil, grup, pesan, notifikasi)
   BuddyPress memakai markup template-pack "nouveau"; di sini dirapikan
   supaya menyatu dengan tampilan forum.
   ========================================================================== */
.fyb-bp #buddypress { font-family: var(--font-body); font-size: 14.5px; color: var(--ink); }
.fyb-bp #buddypress h1, .fyb-bp #buddypress h2, .fyb-bp #buddypress h3 { font-family: var(--font-heading); color: var(--teal-800); }

/* Navigasi tab (profil & direktori) */
.fyb-bp #buddypress .bp-navs {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--border);
	margin-bottom: 18px;
}
.fyb-bp #buddypress .bp-navs ul { display: flex; flex-wrap: wrap; gap: 2px; }
.fyb-bp #buddypress .bp-navs ul li { float: none; margin: 0; }
.fyb-bp #buddypress .bp-navs ul li a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 14px;
	border: 0;
	border-radius: 10px 10px 0 0;
	background: transparent;
	color: var(--gray-500);
	font-size: 14px;
	font-weight: 600;
}
.fyb-bp #buddypress .bp-navs ul li a:hover { background: var(--teal-50); color: var(--teal-700); }
.fyb-bp #buddypress .bp-navs ul li.current > a,
.fyb-bp #buddypress .bp-navs ul li.selected > a {
	background: transparent;
	color: var(--teal-700);
	box-shadow: inset 0 -2px 0 var(--teal-600);
}
.fyb-bp #buddypress .bp-navs ul li a span,
.fyb-bp #buddypress .bp-navs ul li a .count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--teal-100);
	color: var(--teal-700);
	font-size: 11px;
	font-weight: 700;
}

/* Daftar anggota / grup */
.fyb-bp #buddypress ul.item-list { border: 0; }
.fyb-bp #buddypress ul.item-list li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--border);
}
.fyb-bp #buddypress ul.item-list li:last-child { border-bottom: 0; }
.fyb-bp #buddypress ul.item-list li .item-avatar img,
.fyb-bp #buddypress img.avatar { border-radius: 50%; border: 0; margin: 0; }
.fyb-bp #buddypress ul.item-list li .item { flex: 1; min-width: 0; }
.fyb-bp #buddypress ul.item-list li .item-title,
.fyb-bp #buddypress ul.item-list li .item-title a { font-size: 15px; font-weight: 600; color: var(--ink); }
.fyb-bp #buddypress ul.item-list li .item-meta,
.fyb-bp #buddypress .activity-meta,
.fyb-bp #buddypress .item-desc { font-size: 12.5px; color: var(--gray-500); }

/* Tombol BuddyPress -> gaya tombol forum */
.fyb-bp #buddypress .generic-button a,
.fyb-bp #buddypress a.button,
.fyb-bp #buddypress input[type="submit"],
.fyb-bp #buddypress button.button,
.fyb-bp #buddypress .bp-list .action a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 15px;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: var(--teal-600);
	color: var(--white);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.fyb-bp #buddypress .generic-button a:hover,
.fyb-bp #buddypress a.button:hover,
.fyb-bp #buddypress input[type="submit"]:hover { background: var(--teal-700); color: var(--white); }
.fyb-bp #buddypress .generic-button a.leave-group,
.fyb-bp #buddypress a.button.remove,
.fyb-bp #buddypress .friendship-button a.remove { background: var(--teal-50); color: var(--teal-700); border-color: var(--border); }

/* Kolom isian */
.fyb-bp #buddypress input[type="text"],
.fyb-bp #buddypress input[type="email"],
.fyb-bp #buddypress input[type="password"],
.fyb-bp #buddypress input[type="search"],
.fyb-bp #buddypress textarea,
.fyb-bp #buddypress select {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--white);
	font-size: 14.5px;
	color: var(--ink);
}
.fyb-bp #buddypress input:focus, .fyb-bp #buddypress textarea:focus, .fyb-bp #buddypress select:focus {
	outline: none;
	border-color: var(--teal-400);
	box-shadow: 0 0 0 3px rgba(13, 132, 130, .12);
}
.fyb-bp #buddypress .dir-search input[type="search"],
.fyb-bp #buddypress .groups-members-search input[type="search"] { max-width: 280px; }

/* Header profil & grup */
.fyb-bp #buddypress #item-header,
.fyb-bp #buddypress .bp-wrap #item-header-content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	padding-bottom: 18px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--border);
}
.fyb-bp #buddypress #item-header-avatar img { width: 86px; height: 86px; border-radius: 50%; }
.fyb-bp #buddypress #item-header-content h2,
.fyb-bp #buddypress #item-header-content h1 { margin: 0 0 4px; font-size: 22px; }
.fyb-bp #buddypress #item-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Pesan */
.fyb-bp #buddypress table.messages-notices,
.fyb-bp #buddypress table { border: 0; width: 100%; }
.fyb-bp #buddypress table tr td, .fyb-bp #buddypress table tr th { border: 0; border-bottom: 1px solid var(--border); padding: 12px 8px; }
.fyb-bp #buddypress .thread-count { color: var(--teal-600); font-weight: 700; }
.fyb-bp #buddypress #message-threads li.unread { background: var(--teal-50); }
.fyb-bp #buddypress .message-box { padding: 14px 0; border-bottom: 1px solid var(--border); }

/* Notifikasi */
.fyb-bp #buddypress .notification-actions a { color: var(--teal-600); }

/* Pemberitahuan BuddyPress */
.fyb-bp #buddypress div#message p,
.fyb-bp #buddypress .bp-feedback {
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--teal-200);
	background: var(--teal-50);
	color: var(--teal-700);
	font-size: 14px;
}
.fyb-bp #buddypress .bp-feedback.error { background: var(--danger-soft); border-color: #f6cfcb; color: var(--danger); }
.fyb-bp #buddypress .bp-feedback .bp-icon { display: none; }

/* Feed aktivitas di dalam grup/profil memakai gaya kartu yang sama */
.fyb-bp #buddypress .activity-list li { padding: 14px 0; border-bottom: 1px solid var(--border); }
.fyb-bp #buddypress .activity-list li .activity-content { margin-left: 56px; }
.fyb-bp #buddypress .activity-header p { font-size: 13.5px; color: var(--gray-500); margin: 0 0 6px; }
.fyb-bp #buddypress .activity-inner { font-size: 14.5px; }
.fyb-bp #buddypress .activity-list .activity-avatar img { width: 44px; height: 44px; }

@media (max-width: 620px) {
	.fyb-bp #buddypress #item-header { flex-direction: column; align-items: flex-start; }
	.fyb-bp #buddypress .bp-navs ul li a { padding: 9px 11px; font-size: 13.5px; }
}

/* Tombol lapor sejajar dengan tombol aksi lain di kartu kiriman */
.fyb-post__reportinline { display: contents; }
.fyb-post__reportinline button { width: 100%; }

/* Sampul profil & grup: gradien merek, bukan kotak abu-abu bawaan */
.fyb-bp #buddypress #header-cover-image,
.fyb-bp #buddypress .header-cover-image {
	background:
		radial-gradient(110% 80% at 15% 0%, rgba(13, 132, 130, .55) 0%, transparent 58%),
		linear-gradient(155deg, #04403f 0%, #03302f 60%, #021a19 100%) !important;
	border-radius: var(--radius) var(--radius) 0 0;
	min-height: 180px;
}
.fyb-bp #buddypress #item-header-cover-image { position: relative; }
.fyb-bp #buddypress #item-header-cover-image #item-header-avatar img { border: 4px solid var(--white); background: var(--white); }
.fyb-bp #buddypress .bp-tooltip[data-bp-tooltip]::after { font-family: var(--font-body); }
.fyb-bp #buddypress #cover-image-container #item-header-content { color: var(--white); }
.fyb-bp #buddypress #item-header-content .user-nicename,
.fyb-bp #buddypress #cover-image-container h2 a { color: var(--white); text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.fyb-bp #buddypress .activity-update-form,
.fyb-bp #buddypress #whats-new-form {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 12px;
	background: var(--white);
}
.fyb-bp #buddypress .activity-list li.load-more a { display: inline-block; }
.fyb-bp #buddypress .bp-messages-content .acfb-holder,
.fyb-bp #buddypress .standard-form li { list-style: none; }
.fyb-bp #buddypress .bp-search form { display: flex; gap: 8px; }
.fyb-bp #buddypress .bp-search input[type="search"] { max-width: 240px; }

/* ==========================================================================
   18. Profil (versi FYB, menggantikan tampilan BuddyPress)
   ========================================================================== */
.fyb-profile { overflow: hidden; }
.fyb-profile__cover {
	height: 200px;
	background:
		radial-gradient(110% 90% at 12% 0%, rgba(13, 132, 130, .6) 0%, transparent 60%),
		radial-gradient(80% 70% at 100% 100%, rgba(58, 161, 159, .35) 0%, transparent 60%),
		linear-gradient(155deg, #04403f 0%, #03302f 58%, #021a19 100%);
}
@media (max-width: 620px) { .fyb-profile__cover { height: 130px; } }

.fyb-profile__head {
	display: flex;
	align-items: flex-end;
	gap: 18px;
	padding: 14px 20px 16px;
	flex-wrap: wrap;
}
/* Yang naik ke atas sampul cuma fotonya. Dulu seluruh baris yang ditarik
   ke atas, jadi kalau namanya panjang (mis. nama grup + lencana) teksnya
   ikut naik ke area gelap sampul dan jadi tidak terbaca. */
.fyb-profile__avatar { margin-top: -66px; }
.fyb-profile__avatar img {
	width: 112px;
	height: 112px;
	border-radius: 50%;
	border: 4px solid var(--white);
	background: var(--white);
	box-shadow: var(--shadow-sm);
}
.fyb-profile__ident { flex: 1; min-width: 180px; padding-bottom: 4px; }
.fyb-profile__ident h1 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0 0 2px; font-size: 24px; }
.fyb-profile__handle { margin: 0; font-size: 13.5px; color: var(--gray-500); }
.fyb-profile__actions { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 4px; }
.fyb-profile__actions form { margin: 0; }
.fyb-inlineform { display: inline; }

.fyb-profile__stats { display: flex; gap: 22px; padding: 0 20px 16px; flex-wrap: wrap; }
.fyb-profile__stats span { font-size: 13.5px; color: var(--gray-500); }
.fyb-profile__stats strong { color: var(--ink); font-family: var(--font-heading); font-size: 15px; margin-right: 3px; }

.fyb-tabs { display: flex; gap: 2px; padding: 0 12px; border-top: 1px solid var(--border); overflow-x: auto; }
.fyb-tabs__item {
	padding: 13px 16px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--gray-500);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}
.fyb-tabs__item:hover { color: var(--teal-700); }
.fyb-tabs__item.is-active { color: var(--teal-700); border-bottom-color: var(--teal-600); }

.fyb-photogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.fyb-photogrid__item { display: block; aspect-ratio: 1/1; border-radius: var(--radius-sm); overflow: hidden; background: var(--teal-50); }
.fyb-photogrid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.fyb-photogrid__item:hover img { transform: scale(1.06); }
.fyb-userrow__gicon {
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 10px;
	background: var(--teal-50); color: var(--teal-600); flex-shrink: 0;
}

/* ==========================================================================
   19. Halaman Pesan
   ========================================================================== */
.fyb-chat { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: 560px; overflow: hidden; }
@media (max-width: 760px) { .fyb-chat { grid-template-columns: 1fr; min-height: 0; } }

.fyb-chat__list { border-right: 1px solid var(--border); display: flex; flex-direction: column; }
@media (max-width: 760px) { .fyb-chat__list { border-right: 0; } }
.fyb-chat__listhead { padding: 15px 16px; font-family: var(--font-heading); font-weight: 700; color: var(--teal-800); border-bottom: 1px solid var(--border); }
.fyb-chat__none { padding: 20px 16px; color: var(--gray-500); font-size: 14px; }
.fyb-chat__row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.fyb-chat__row:hover { background: var(--teal-50); }
.fyb-chat__row.is-active { background: var(--teal-50); box-shadow: inset 3px 0 0 var(--teal-600); }
.fyb-chat__row img { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.fyb-chat__rowtext { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.fyb-chat__rowtext strong { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fyb-chat__rowtext small { font-size: 12.5px; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fyb-chat__row.is-unread strong { font-weight: 700; }
.fyb-chat__row.is-unread small { color: var(--teal-700); font-weight: 600; }
.fyb-chat__rowtime { font-size: 11px; color: var(--gray-400); flex-shrink: 0; }

.fyb-chat__view { display: flex; flex-direction: column; min-width: 0; }
.fyb-chat__viewhead { display: flex; align-items: center; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.fyb-chat__viewhead img { width: 36px; height: 36px; border-radius: 50%; }
.fyb-chat__viewhead strong { display: block; font-size: 15px; }
.fyb-chat__viewhead small { font-size: 12px; color: var(--gray-500); }
.fyb-chat__del { margin-left: auto; }

.fyb-chat__messages { flex: 1; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; max-height: 460px; }
.fyb-chat__messages--empty { align-items: center; justify-content: center; text-align: center; color: var(--gray-500); font-size: 14.5px; }
.fyb-chat__messages--empty .fyb-icon { color: var(--teal-200); }

.fyb-bubble { display: flex; gap: 9px; align-items: flex-end; max-width: 78%; }
/* Hanya avatar (anak langsung gelembung) yang dibulatkan. Dulu aturan ini
   kena juga ke foto lampiran, jadi fotonya ikut jadi lingkaran 30px. */
.fyb-bubble > img { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.fyb-bubble__body { background: var(--surface); border-radius: 16px 16px 16px 4px; padding: 9px 13px; min-width: 0; }
.fyb-bubble__who { display: block; font-size: 12px; font-weight: 600; color: var(--teal-700); margin-bottom: 2px; }
.fyb-bubble__text { font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere; }
.fyb-bubble__text p { margin: 0 0 .4em; }
.fyb-bubble__text p:last-child { margin: 0; }
.fyb-bubble__time { display: block; margin-top: 3px; font-size: 11px; color: var(--gray-400); }
.fyb-bubble.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.fyb-bubble.is-mine .fyb-bubble__body { background: var(--teal-600); border-radius: 16px 16px 4px 16px; }
.fyb-bubble.is-mine .fyb-bubble__text { color: var(--white); }
.fyb-bubble.is-mine .fyb-bubble__time { color: rgba(255, 255, 255, .75); text-align: right; }

.fyb-chat__reply { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 12px 16px; border-top: 1px solid var(--border); }
/* Kotak tulisnya textarea supaya Shift+Enter bisa turun baris. Satu baris
   saat kosong (bentuk pil seperti dulu), tumbuh mengikuti isi sampai ±6
   baris, lalu menggulir sendiri. */
.fyb-chat__reply textarea[data-chatinput] {
	flex: 1;
	min-width: 0;
	display: block;
	height: 44px;
	max-height: 148px;
	padding: 11px 16px;
	border: 1px solid var(--border);
	border-radius: 22px;
	background: var(--surface);
	font: inherit;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--ink);
	resize: none;
	overflow-y: auto;
}
.fyb-chat__reply textarea[data-chatinput]:focus { outline: none; background: var(--white); border-color: var(--teal-400); }
.fyb-chat__reply { align-items: flex-end; }
.fyb-chat__reply > .fyb-chat__attach,
.fyb-chat__reply > .fyb-btn { margin-bottom: 4px; }
.fyb-bubble--pending .fyb-bubble__text { white-space: pre-wrap; }

/* ==========================================================================
   20. Halaman Notifikasi
   ========================================================================== */
.fyb-notiflist { display: grid; }
.fyb-notif {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 13px 16px;
	border-bottom: 1px solid var(--border);
	/* Ruang untuk garis penanda di kiri, supaya baris yang sudah dibaca
	   dan yang belum tetap sejajar. */
	border-left: 3px solid transparent;
}
.fyb-notif:last-child { border-bottom: 0; }
.fyb-notif__icon {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--surface); color: var(--gray-400); flex-shrink: 0;
}
/* Foto orang (atau grup) yang memicu pemberitahuan, menggantikan lonceng. */
.fyb-notif__icon--photo { background: transparent; overflow: hidden; }
.fyb-notif__icon--photo img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.fyb-notif__body { flex: 1; min-width: 0; font-size: 14.5px; color: var(--gray-600); }
.fyb-notif__body a { color: var(--gray-600); }
.fyb-notif__body a:hover { color: var(--teal-700); }
.fyb-notif__body small { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 12px; color: var(--gray-400); }
.fyb-notif__tools { display: flex; gap: 2px; flex-shrink: 0; }
.fyb-notif form { margin: 0; }

/* Belum dibaca: latar teal muda, garis teal di kiri, teks hitam tebal, dan
   titik teal kecil di pojok fotonya. Yang sudah dibaca sengaja dibuat pudar
   supaya bedanya kelihatan sekali lirik. */
.fyb-notif.is-unread {
	background: var(--teal-50);
	border-left-color: var(--teal-600);
}
.fyb-notif.is-unread .fyb-notif__icon { background: var(--teal-600); color: var(--white); }
.fyb-notif.is-unread .fyb-notif__icon--photo {
	position: relative;
	overflow: visible;
	background: transparent;
	box-shadow: 0 0 0 2px var(--teal-500);
}
.fyb-notif.is-unread .fyb-notif__icon--photo::after {
	content: "";
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--teal-600);
	border: 2px solid var(--teal-50);
}
.fyb-notif.is-unread .fyb-notif__body { color: var(--ink); font-weight: 600; }
.fyb-notif.is-unread .fyb-notif__body a { color: var(--ink); font-weight: 600; }
.fyb-notif.is-unread .fyb-notif__body a:hover { color: var(--teal-700); }
.fyb-notif.is-unread .fyb-notif__body small { color: var(--teal-700); font-weight: 500; }
.fyb-notifcount {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--teal-100);
	color: var(--teal-800);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	vertical-align: 2px;
}

/* ==========================================================================
   21. Ikon pensil (ubah foto profil / sampul)
   ========================================================================== */
.fyb-profile__cover { position: relative; }
.fyb-profile__avatar { position: relative; }
.fyb-editpen {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: var(--teal-700);
	box-shadow: 0 2px 8px rgba(2, 26, 25, .22);
	transition: background .15s ease, transform .15s ease;
}
.fyb-editpen:hover { background: var(--white); transform: scale(1.06); color: var(--teal-800); }
.fyb-editpen--cover { right: 14px; bottom: 14px; }
.fyb-editpen--avatar { right: 2px; bottom: 6px; width: 30px; height: 30px; }

/* Halaman akun: buang tab bawaan BuddyPress, sisakan sub-menu pengaturan */
.fyb-bp--account #buddypress #item-header,
.fyb-bp--account #buddypress #cover-image-container,
.fyb-bp--account #buddypress .bp-navs.main-navs,
.fyb-bp--account #buddypress .bp-navs.bp-subnavs,
.fyb-bp--account #buddypress > .bp-navs:first-of-type,
.fyb-bp--group #buddypress #item-header,
.fyb-bp--group #buddypress #cover-image-container { display: none !important; }
.fyb-profile--account .fyb-profile__cover { height: 150px; }

/* Barisan tab pengaturan akun buatan sendiri (pengganti subnav BuddyPress). */
.fyb-tabs--account { border-top: 0; border-bottom: 1px solid var(--border); padding: 0 16px; }

/* Formulir dua kolom untuk pengaturan akun. */
.fyb-formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.fyb-formgrid .fyb-field--wide { grid-column: 1 / -1; }
@media (max-width: 620px) { .fyb-formgrid { grid-template-columns: 1fr; } }

.fyb-seccard {
	margin-top: 20px;
	padding: 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--teal-50);
}
.fyb-seccard__title {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 4px;
	font-size: 16px;
	color: var(--teal-800);
}
.fyb-seccard__title .fyb-icon { color: var(--teal-600); }
.fyb-seccard__title .fyb-pill { margin-left: auto; }
.fyb-seccard__lead { grid-column: 1 / -1; margin: 0 0 14px; font-size: 13.5px; color: var(--gray-700); line-height: 1.6; }
.fyb-seccard .fyb-input { background: var(--white); }
.fyb-input--pin { letter-spacing: .5em; font-family: var(--font-heading); }

/* ==========================================================================
   24. Layar kunci PIN (halaman penuh setelah masuk)
   ========================================================================== */
.fyb-pinpage { background: var(--teal-900); }
.fyb-pinlock {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	background:
		radial-gradient(90% 70% at 15% 0%, rgba(13, 132, 130, .55) 0%, transparent 62%),
		radial-gradient(70% 60% at 100% 100%, rgba(58, 161, 159, .32) 0%, transparent 60%),
		linear-gradient(155deg, #04403f 0%, #03302f 58%, #021a19 100%);
}
.fyb-pinlock__card {
	width: 100%;
	max-width: 390px;
	padding: 30px 26px 24px;
	border-radius: 20px;
	background: var(--white);
	box-shadow: 0 24px 60px rgba(2, 26, 25, .38);
	text-align: center;
}
.fyb-pinlock__logo { margin: 0 auto 14px; border-radius: 50%; }
.fyb-pinlock__card h1 { margin: 0 0 6px; font-size: 22px; color: var(--teal-800); }
.fyb-pinlock__card > p { margin: 0 0 18px; font-size: 14px; color: var(--gray-500); line-height: 1.55; }
.fyb-pinlock__card .fyb-notice { text-align: left; margin-bottom: 16px; }

.fyb-pindigits { display: flex; justify-content: center; gap: 9px; margin-bottom: 18px; }
.fyb-pindigit {
	width: 46px;
	height: 56px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 700;
	color: var(--ink);
	text-align: center;
}
.fyb-pindigit:focus { outline: none; border-color: var(--teal-500); background: var(--white); box-shadow: 0 0 0 3px var(--teal-100); }
.fyb-pindigit.is-filled { border-color: var(--teal-400); background: var(--white); }
@media (max-width: 400px) { .fyb-pindigit { width: 42px; height: 52px; font-size: 21px; } .fyb-pindigits { gap: 7px; } }

.fyb-pinlock__out { display: inline-block; margin-top: 16px; font-size: 13px; color: var(--gray-500); }
.fyb-pinlock__out:hover { color: var(--teal-700); text-decoration: underline; }

/* ==========================================================================
   22. Menu titik tiga di gelembung pesan
   ========================================================================== */
.fyb-bubble { position: relative; }
.fyb-msgmenu { position: relative; align-self: center; opacity: .35; transition: opacity .15s ease; }
.fyb-bubble:hover .fyb-msgmenu, .fyb-msgmenu.is-open, .fyb-msgmenu:focus-within { opacity: 1; }
/* Di layar sentuh tidak ada "hover", jadi titik tiganya harus selalu kelihatan. */
@media (hover: none) { .fyb-msgmenu { opacity: 1; } }
.fyb-msgmenu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--gray-400);
	cursor: pointer;
}
.fyb-msgmenu__toggle:hover { background: var(--surface); color: var(--gray-700); }
.fyb-msgmenu__panel {
	position: absolute;
	right: 0;
	top: 30px;
	z-index: 30;
	width: 198px;
	padding: 6px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	display: none;
}
.fyb-bubble.is-mine .fyb-msgmenu__panel { right: auto; left: 0; }
.fyb-msgmenu.is-open .fyb-msgmenu__panel { display: block; }
/* Dibuka ke atas — dipasang JS kalau ruang di bawah tidak cukup. */
.fyb-msgmenu.is-up .fyb-msgmenu__panel { top: auto; bottom: 30px; }
/* Dibalik ke samping kalau panelnya menjorok keluar daftar pesan. */
.fyb-msgmenu.is-flipx .fyb-msgmenu__panel { left: 0; right: auto; }
.fyb-bubble.is-mine .fyb-msgmenu.is-flipx .fyb-msgmenu__panel { left: auto; right: 0; }
.fyb-msgmenu__panel form { margin: 0; }
.fyb-msgmenu__item {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--gray-700);
	font-size: 13.5px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
}
.fyb-msgmenu__item:hover { background: var(--teal-50); color: var(--teal-700); }
.fyb-msgmenu__item--danger { color: var(--danger); }
.fyb-msgmenu__item--danger:hover { background: var(--danger-soft); color: var(--danger); }

.fyb-chat__headtools { margin-left: auto; display: flex; gap: 2px; }
.fyb-chat__headtools form { margin: 0; }

/* Pesan tersemat: satu baris mengambang persis di bawah kepala percakapan. */
.fyb-chat__pinned {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 16px;
	background: var(--teal-50);
	border-bottom: 1px solid var(--teal-200);
	color: var(--teal-800);
}
.fyb-chat__pinned form { margin: 0; }
.fyb-chat__pinned > .fyb-icon { color: var(--teal-600); flex-shrink: 0; }
.fyb-chat__pinnedtext { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.fyb-chat__pinnedtext strong { font-size: 12px; color: var(--teal-700); }
.fyb-chat__pinnedtext span { font-size: 13px; color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fyb-chat__pinnedtext:hover span { color: var(--teal-800); }
.fyb-bubble.is-pinned .fyb-bubble__body { box-shadow: 0 0 0 2px var(--teal-200); }
.fyb-bubble__time .fyb-icon { vertical-align: -2px; margin-right: 3px; }

/* Tombol kembali hanya berguna di tampilan dua langkah (ponsel). */
.fyb-chat__back { display: none; }

/* Di ponsel halaman pesan bekerja dua langkah seperti aplikasi chat: mula-mula
   hanya daftar percakapan; begitu satu dibuka (ada ?utas= di URL) isinya
   memenuhi layar dan daftarnya disembunyikan, kembalinya lewat tombol panah.
   Blok ini sengaja ditaruh paling bawah: aturan di dalam @media tetap kalah
   oleh aturan sama-kuat yang ditulis setelahnya. */
@media (max-width: 760px) {
	.fyb-chat__back { display: inline-flex; margin-left: -4px; flex-shrink: 0; }
	.fyb-chat__view { display: none; }
	.fyb-chat.is-open .fyb-chat__list { display: none; }
	.fyb-chat.is-open .fyb-chat__view { display: flex; }
	.fyb-chat__messages { max-height: none; min-height: 55vh; }
	.fyb-bubble { max-width: 86%; }
	.fyb-bubble__img { max-width: 100%; }
}
.fyb-iconbtn.is-on { background: var(--teal-100); color: var(--teal-700); }
.fyb-chat__attach { cursor: pointer; flex-shrink: 0; }
.fyb-chat__attach:hover { background: var(--teal-50); color: var(--teal-700); }
.fyb-chat__filename { font-size: 12px; color: var(--teal-700); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; }
/* Baris "Membalas …" ikut arus di atas kotak ketik (order:-1), bukan
   melayang di atasnya — kalau melayang, gelembung terakhir ketutupan. */
.fyb-chat__quote {
	order: -1;
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 9px;
	padding: 7px 12px;
	background: var(--teal-50);
	border-left: 3px solid var(--teal-500);
	border-radius: 8px;
	font-size: 12.5px;
	color: var(--gray-700);
}
/* display:flex di atas mengalahkan atribut hidden bawaan HTML, jadi
   kotak kutipan sempat tampil kosong sebelum ada yang dibalas. */
.fyb-chat__quote[hidden] { display: none; }
.fyb-chat__quote button { border: 0; background: transparent; font-size: 17px; line-height: 1; color: var(--gray-500); cursor: pointer; margin-left: auto; align-self: flex-start; }
.fyb-chat__quotelabel { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-weight: 600; color: var(--teal-700); }
.fyb-chat__quotebody { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.fyb-chat__quotebody strong { font-size: 12px; color: var(--teal-700); }
.fyb-chat__quotebody span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gray-600); }
.fyb-chat__reply { position: relative; }

/* Kutipan di dalam gelembung — balasan merujuk ke pesan aslinya, seperti
   di Messenger: nama pengirim + sepotong isinya, bisa diklik untuk lompat. */
.fyb-bubble__quote {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-bottom: 6px;
	padding: 6px 10px;
	border-left: 3px solid var(--teal-400);
	border-radius: 8px;
	background: rgba(6, 104, 103, .08);
	font-size: 12.5px;
	line-height: 1.4;
	max-width: 100%;
}
.fyb-bubble__quote strong { color: var(--teal-700); font-size: 11.5px; }
.fyb-bubble__quote span { color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fyb-bubble__quote:hover { background: rgba(6, 104, 103, .14); }
/* Di gelembung sendiri (latar teal) kutipannya dibuat terang. */
.fyb-bubble.is-mine .fyb-bubble__quote { border-left-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .16); }
.fyb-bubble.is-mine .fyb-bubble__quote strong { color: rgba(255, 255, 255, .95); }
.fyb-bubble.is-mine .fyb-bubble__quote span { color: rgba(255, 255, 255, .8); }
.fyb-bubble.is-mine .fyb-bubble__quote:hover { background: rgba(255, 255, 255, .24); }

/* Kedipan saat melompat ke pesan yang dikutip. */
.fyb-bubble.is-flash .fyb-bubble__body { animation: fyb-flash 1.4s ease; }
@keyframes fyb-flash {
	0%, 100% { box-shadow: 0 0 0 0 rgba(13, 132, 130, 0); }
	20%, 60% { box-shadow: 0 0 0 3px rgba(13, 132, 130, .45); }
}

.fyb-bubble__img { display: block; margin-top: 7px; border-radius: 10px; overflow: hidden; max-width: 260px; }
/* Foto mengikuti bentuk aslinya — jangan dipaksa kotak atau bulat. */
.fyb-bubble__img img { width: auto; max-width: 100%; height: auto; max-height: 320px; border-radius: 10px; display: block; }
/* Gelembung yang isinya cuma foto: tanpa bantalan, biar fotonya yang jadi
   bentuk gelembungnya. */
.fyb-bubble__body--media { padding: 4px; background: transparent !important; }
.fyb-bubble__body--media .fyb-bubble__img { margin-top: 0; }
.fyb-bubble.is-mine .fyb-bubble__body--media .fyb-bubble__time { color: var(--gray-400); text-align: right; }
.fyb-bubble__body--media .fyb-bubble__time { padding: 0 4px; }
.fyb-bubble__file {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 7px;
	padding: 8px 11px;
	border-radius: 9px;
	background: rgba(255, 255, 255, .22);
	font-size: 13px;
	max-width: 230px;
}
.fyb-bubble:not(.is-mine) .fyb-bubble__file { background: var(--white); border: 1px solid var(--border); color: var(--teal-700); }
.fyb-bubble__file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   23. Kartu anggota & grup
   ========================================================================== */
.fyb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fyb-chip {
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--white);
	font-size: 13px;
	font-weight: 600;
	color: var(--gray-500);
}
.fyb-chip:hover { border-color: var(--teal-200); color: var(--teal-700); background: var(--teal-50); }
.fyb-chip.is-active { background: var(--teal-600); border-color: var(--teal-600); color: var(--white); }

.fyb-membergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; }
.fyb-mcard {
	position: relative;
	/* Kartu memanjang penuh setinggi barisnya supaya deretan kartu rata
	   bawahnya walau isinya beda-beda (ada yang punya kota, ada yang tidak). */
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	text-align: center;
	transition: transform .18s ease, box-shadow .18s ease;
}
.fyb-mcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.fyb-mcard__cover {
	display: block;
	height: 72px;
	background:
		radial-gradient(90% 90% at 20% 0%, rgba(13, 132, 130, .55) 0%, transparent 60%),
		linear-gradient(150deg, #04403f, #03302f);
	background-size: cover;
	background-position: center;
}
.fyb-mcard__avatar { display: block; margin: -40px auto 0; width: 76px; }
.fyb-mcard__avatar img { width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--white); background: var(--white); }
.fyb-mcard__body { padding: 8px 14px 16px; display: flex; flex-direction: column; flex: 1; }
/* Lencana peran jangan ikut melebar penuh gara-gara body-nya flex-column. */
.fyb-mcard__body > .fyb-pill { align-self: center; }
.fyb-mcard__body h3 { margin: 0 0 4px; font-size: 15px; }
.fyb-mcard__body h3 a { color: var(--ink); }
.fyb-mcard__body h3 a:hover { color: var(--teal-700); }
.fyb-mcard__meta { margin: 6px 0 10px; font-size: 12.5px; color: var(--gray-500); line-height: 1.5; }
.fyb-mcard__stats { display: flex; justify-content: center; gap: 14px; font-size: 12px; color: var(--gray-500); margin-bottom: 12px; }
.fyb-mcard__stats strong { color: var(--ink); font-family: var(--font-heading); }
.fyb-mcard__actions { margin-top: auto; display: flex; justify-content: center; gap: 6px; }
.fyb-mcard__actions form { margin: 0; }
.fyb-mcard__actions .fyb-btn { padding: 7px 12px; font-size: 12.5px; }

.fyb-groupgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.fyb-gcard {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .18s ease, box-shadow .18s ease;
}
.fyb-gcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.fyb-gcard__cover {
	position: relative;
	display: block;
	height: 104px;
	background:
		radial-gradient(90% 90% at 15% 0%, rgba(13, 132, 130, .5) 0%, transparent 60%),
		linear-gradient(150deg, #04403f, #021a19);
	background-size: cover;
	background-position: center;
}
.fyb-gcard__status { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,.92); color: var(--teal-700); }
/* Sampul kartu grup position:relative, jadi fotonya harus ikut diposisikan
   supaya tidak tertimbun di belakang sampul. */
.fyb-gcard__photo { position: relative; z-index: 1; display: block; margin: -32px 0 0 14px; width: 62px; }
.fyb-gcard__photo img { width: 56px; height: 56px; border-radius: 14px; border: 3px solid var(--white); background: var(--white); box-shadow: var(--shadow-sm); object-fit: cover; }
.fyb-gcard__body { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.fyb-gcard__body h3 { margin: 0; font-size: 16px; }
.fyb-gcard__body h3 a { color: var(--ink); }
.fyb-gcard__body h3 a:hover { color: var(--teal-700); }
.fyb-gcard__meta { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--gray-500); }
.fyb-gcard__desc { margin: 2px 0 0; font-size: 13.5px; color: var(--gray-700); line-height: 1.55; }
.fyb-gcard__actions { margin-top: auto; padding-top: 12px; display: flex; gap: 7px; }

/* Kepala satu grup */
.fyb-grouphead__avatar img { border-radius: 18px !important; }
.fyb-grouphead__desc { padding: 0 20px 18px; margin: 0; color: var(--gray-700); font-size: 14.5px; line-height: 1.6; }
.fyb-groupjoin .generic-button a,
.fyb-groupjoin a {
	display: inline-flex;
	align-items: center;
	padding: 11px 18px;
	border-radius: var(--radius-sm);
	background: var(--teal-600);
	color: var(--white);
	font-size: 14.5px;
	font-weight: 600;
}
.fyb-groupjoin a:hover { background: var(--teal-700); color: var(--white); }
/* Nav grup bawaan BuddyPress diganti barisan tab sendiri di kepala grup. */
.fyb-bp--group #buddypress .bp-navs { display: none !important; }
.fyb-tabs--group { border-top: 1px solid var(--border); padding: 0 16px; }
/* Kepala grup tidak lagi memotong tabnya di bawah. */
.fyb-grouphead { overflow: visible; }

/* Penanda "di <Nama Grup>" pada kartu kiriman grup. */
.fyb-post__ingroup { font-size: 13.5px; color: var(--gray-500); font-weight: 400; }
.fyb-post__ingroup a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 2px;
	color: var(--teal-700);
	font-weight: 600;
}
.fyb-post__ingroup a:hover { text-decoration: underline; }
.fyb-post__ingroup .fyb-icon { color: var(--teal-600); }

/* Lencana grup di kotak tulis, pengganti pilihan privasi. */
.fyb-composer__scope {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--teal-50);
	color: var(--teal-700);
	font-size: 13px;
	font-weight: 600;
}
.fyb-composer__scope .fyb-icon { color: var(--teal-600); }

/* ==========================================================================
   25. Jendela ganti foto profil & sampul
   ========================================================================== */
.fyb-noscroll { overflow: hidden; }

.fyb-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px 16px; }
/* Tanpa backdrop-filter: di sebagian peramban efek itu membuat lapisan
   komposit baru dan kotak jendelanya malah tidak ikut tergambar. */
.fyb-modal__veil { position: absolute; inset: 0; background: rgba(2, 26, 25, .58); }
.fyb-modal__box {
	position: relative;
	width: 100%;
	background: var(--white);
	border-radius: 18px;
	box-shadow: 0 28px 70px rgba(2, 26, 25, .4);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}
.fyb-modal__box h2 { margin: 0 0 6px; font-size: 19px; color: var(--teal-800); }
.fyb-modal__lead { margin: 0 0 16px; font-size: 13.5px; color: var(--gray-500); line-height: 1.55; }
.fyb-modal__x {
	position: absolute; top: 10px; right: 12px; z-index: 2;
	width: 32px; height: 32px; border: 0; border-radius: 50%;
	background: transparent; color: var(--gray-500);
	font-size: 22px; line-height: 1; cursor: pointer;
}
.fyb-modal__x:hover { background: var(--surface); color: var(--ink); }
.fyb-modal__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.fyb-modal__danger { margin-right: auto; color: var(--danger); border-color: var(--border); }
.fyb-modal__danger:hover { background: #fdecec; color: var(--danger); }
.fyb-modal__err { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; background: #fdecec; color: var(--danger); font-size: 13px; }
.fyb-modal__err[hidden] { display: none; }
.fyb-modal__box form { margin: 0; }

/* -- Foto profil: kartu sempit, pratinjau bulat di tengah -- */
.fyb-modal__box--avatar { max-width: 400px; padding: 26px 24px 22px; text-align: center; }
.fyb-avdrop {
	display: block;
	padding: 20px 16px 18px;
	border: 2px dashed var(--teal-200);
	border-radius: 16px;
	background: var(--teal-50);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.fyb-avdrop:hover, .fyb-avdrop.is-over { border-color: var(--teal-500); background: var(--teal-100); }
.fyb-avdrop__ring {
	position: relative;
	display: block;
	width: 150px;
	height: 150px;
	margin: 0 auto 12px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--white);
	box-shadow: 0 0 0 4px var(--white), 0 6px 18px rgba(2, 26, 25, .16);
}
.fyb-avdrop__ring img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; display: block; }
.fyb-avdrop__preview { position: absolute; inset: 0; }
.fyb-avdrop__preview[hidden] { display: none; }
.fyb-avdrop__hint { display: block; font-size: 13px; color: var(--teal-700); font-weight: 600; }

/* -- Sampul: kartu lebar, pratinjau membentang -- */
.fyb-modal__box--cover { max-width: 680px; padding: 26px 26px 22px; }
.fyb-cvdrop {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Tinggi mengikuti lebar. JANGAN pasang min-height bersama aspect-ratio:
	   tingginya jadi memaksa lebar minimum dan kotaknya melar keluar jendela. */
	width: 100%;
	aspect-ratio: 4 / 1;
	border: 2px dashed var(--teal-200);
	border-radius: 14px;
	background-color: var(--teal-50);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	cursor: pointer;
	transition: border-color .15s ease;
}
.fyb-cvdrop:hover, .fyb-cvdrop.is-over { border-color: var(--teal-500); }
.fyb-cvdrop__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fyb-cvdrop__preview[hidden] { display: none; }
.fyb-cvdrop__hint {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 12px 18px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .9);
	color: var(--teal-800);
	text-align: center;
}
.fyb-cvdrop__hint strong { font-size: 14px; }
.fyb-cvdrop__hint small { font-size: 12px; color: var(--gray-500); }
.fyb-cvdrop.has-image .fyb-cvdrop__hint { opacity: 0; }
.fyb-cvdrop.has-image:hover .fyb-cvdrop__hint { opacity: 1; }

@media (max-width: 560px) {
	.fyb-modal { padding: 14px 12px; }
	.fyb-modal__box--avatar, .fyb-modal__box--cover { padding: 22px 18px 18px; }
	.fyb-avdrop__ring, .fyb-avdrop__ring img { width: 128px; height: 128px; }
	.fyb-modal__foot { flex-wrap: wrap; }
	.fyb-modal__danger { margin-right: 0; order: 3; width: 100%; }
}

/* ==========================================================================
   26. Emotikon, komentar berjenjang, dan bagikan kiriman
   ========================================================================== */

/* -- Papan emotikon -- */
.fyb-emoji { position: relative; display: inline-flex; }
.fyb-emoji__toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; padding: 0;
	border: 0; border-radius: 50%;
	background: transparent; color: var(--gray-500);
	font-size: 18px; line-height: 1; cursor: pointer;
}
.fyb-emoji__toggle:hover, .fyb-emoji.is-open .fyb-emoji__toggle { background: var(--teal-50); color: var(--teal-700); }
.fyb-emoji__panel {
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	z-index: 40;
	width: 282px;
	max-height: 260px;
	overflow-y: auto;
	padding: 10px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--white);
	box-shadow: 0 14px 34px rgba(2, 26, 25, .18);
}
.fyb-emoji__panel[hidden] { display: none; }
.fyb-emoji__group + .fyb-emoji__group { margin-top: 10px; }
.fyb-emoji__label { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--gray-400); }
.fyb-emoji__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.fyb-emoji__item {
	border: 0; border-radius: 8px; padding: 4px 0;
	background: transparent; font-size: 19px; line-height: 1.3; cursor: pointer;
}
.fyb-emoji__item:hover { background: var(--teal-50); }

/* -- Kotak tulis komentar -- */
.fyb-commentbox__field {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 2px;
	padding-right: 4px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
}
.fyb-commentbox__field:focus-within { background: var(--white); border-color: var(--teal-400); }
.fyb-commentbox__field .fyb-commentbox__input {
	flex: 1; min-width: 0;
	border: 0; background: transparent; padding: 9px 14px; font-size: 14px;
}
.fyb-commentbox__field .fyb-commentbox__input:focus { outline: none; }
.fyb-commentbox__clip {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	color: var(--gray-500); cursor: pointer; flex-shrink: 0;
}
.fyb-commentbox__clip:hover { background: var(--teal-50); color: var(--teal-700); }
.fyb-commentbox__filename { align-self: center; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--teal-700); }
.fyb-commentbox--reply { padding-left: 42px; }
.fyb-commentbox[hidden] { display: none; }

/* -- Komentar & balasan -- */
.fyb-comment { display: flex; gap: 9px; }
.fyb-comment[hidden] { display: none; }
.fyb-comment__main { flex: 1; min-width: 0; }
.fyb-comment__photo { display: block; margin-top: 7px; max-width: 220px; border-radius: 10px; overflow: hidden; }
.fyb-comment__photo img { width: 100%; height: auto; border-radius: 10px; }
.fyb-comment__tools { display: flex; align-items: center; gap: 12px; margin: 4px 0 0 12px; font-size: 12px; color: var(--gray-400); }
.fyb-comment__reply {
	border: 0; background: transparent; padding: 0;
	font-size: 12px; font-weight: 600; color: var(--gray-500); cursor: pointer;
}
.fyb-comment__reply:hover { color: var(--teal-700); text-decoration: underline; }
.fyb-comment__replies { margin: 8px 0 0 20px; display: grid; gap: 10px; padding-left: 12px; border-left: 2px solid var(--border); }
.fyb-comments__more {
	align-self: flex-start;
	margin-left: 41px;
	border: 0; background: transparent; padding: 2px 0;
	font-size: 13px; font-weight: 600; color: var(--gray-500); cursor: pointer;
}
.fyb-comments__more:hover { color: var(--teal-700); text-decoration: underline; }

/* -- Kartu kiriman asli di dalam bagikan-ulang -- */
.fyb-shared {
	display: block;
	margin: 0 16px 12px;
	padding: 12px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--surface);
	color: inherit;
}
.fyb-shared:hover { border-color: var(--teal-200); background: var(--teal-50); }
.fyb-shared--gone { color: var(--gray-500); font-size: 13.5px; }
.fyb-shared__head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.fyb-shared__head img { width: 28px; height: 28px; border-radius: 50%; }
.fyb-shared__who { display: flex; flex-direction: column; line-height: 1.3; }
.fyb-shared__who strong { font-size: 13.5px; }
.fyb-shared__who small { font-size: 11.5px; color: var(--gray-400); }
.fyb-shared__text { display: block; font-size: 14px; color: var(--gray-700); line-height: 1.55; }
/* Susunan galeri kutipan ada di bagian 40 — satu tempat saja. */

/* -- Jendela bagikan -- */
.fyb-modal__box--share { max-width: 480px; padding: 26px 24px 22px; }
.fyb-sharelink { margin-bottom: 18px; }
.fyb-sharelink label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--gray-700); }
.fyb-sharelink__row { display: flex; gap: 8px; }
.fyb-sharelink__row input {
	flex: 1; min-width: 0;
	padding: 10px 13px;
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	background: var(--surface); font-size: 13px; color: var(--gray-700);
}
.fyb-sharebody { padding-top: 16px; border-top: 1px solid var(--border); }
.fyb-sharebody[hidden] { display: none; }
.fyb-shareform .fyb-field { position: relative; }
.fyb-shareform .fyb-emoji { position: absolute; right: 6px; bottom: 6px; }
.fyb-sharelocked {
	margin: 0; padding: 14px; border-radius: var(--radius-sm);
	background: var(--surface); color: var(--gray-600); font-size: 13.5px; line-height: 1.6;
}
.fyb-sharelocked[hidden] { display: none; }

.fyb-singleback { display: flex; justify-content: center; }

/* ------------------------------------------------------------------
   27. Jendela konfirmasi
   ------------------------------------------------------------------ */
.fyb-modal__box--confirm { max-width: 400px; padding: 26px 24px 20px; text-align: left; }
.fyb-modal__box--confirm h2 { margin: 0 0 8px; font-size: 19px; }
.fyb-confirm__text { margin: 0 0 20px; color: var(--gray-600); font-size: 14.5px; line-height: 1.6; }
.fyb-confirm__actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.fyb-confirm__actions .fyb-btn { min-width: 96px; justify-content: center; }

/* ==========================================================================
   28. Galeri foto kiriman (susunan ala Facebook)

   Yang menentukan susunan cuma JUMLAH fotonya. Semua petak selain galeri
   satu-foto dipaksa rasio tetap + object-fit: cover, supaya campuran potret
   dan lanskap tidak membuat kartunya belang-belang.
   ========================================================================== */
.fyb-gallery {
	display: grid;
	gap: 3px;
	background: var(--border);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.fyb-gallery__item {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--surface);
	cursor: pointer;
	overflow: hidden;
	display: block;
	min-width: 0;
}
.fyb-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity .15s ease;
}
.fyb-gallery__item:hover img { opacity: .92; }
.fyb-gallery__item:focus-visible { outline: 3px solid var(--teal-500); outline-offset: -3px; }

/* 1 foto: biarkan rasio aslinya, cukup dibatasi tingginya. */
.fyb-gallery--1 { grid-template-columns: 1fr; }
.fyb-gallery--1 .fyb-gallery__item img { height: auto; max-height: 560px; object-fit: contain; background: #0b1817; }

/* 2 foto: berdampingan. */
.fyb-gallery--2 { grid-template-columns: 1fr 1fr; }
.fyb-gallery--2 .fyb-gallery__item { aspect-ratio: 1 / 1; }

/* 3 foto: satu tinggi di kiri, dua bertumpuk di kanan.
   Rasio dipasang di WADAHNYA, bukan di tiap petak: baris `1fr 1fr` cuma
   punya tinggi pasti kalau wadahnya punya tinggi pasti. Tanpa itu tiap
   baris ikut tinggi asli gambarnya dan satu foto potret bikin kartunya
   memanjang dua kali lipat. */
.fyb-gallery--3 {
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 1fr 1fr;
	aspect-ratio: 3 / 2;
}
.fyb-gallery--3 .fyb-gallery__item { min-height: 0; }
.fyb-gallery--3 .fyb-gallery__item:first-child { grid-row: span 2; }

/* 4 foto: kotak 2×2. */
.fyb-gallery--4 { grid-template-columns: 1fr 1fr; }
.fyb-gallery--4 .fyb-gallery__item { aspect-ratio: 1 / 1; }

/* 5 foto: dua besar di atas, tiga kecil di bawah. */
.fyb-gallery--5 { grid-template-columns: repeat(6, 1fr); }
.fyb-gallery--5 .fyb-gallery__item { grid-column: span 2; aspect-ratio: 1 / 1; }
.fyb-gallery--5 .fyb-gallery__item:nth-child(-n+2) { grid-column: span 3; aspect-ratio: 3 / 2; }

/* 6 foto: tiga kolom, dua baris. */
.fyb-gallery--6 { grid-template-columns: repeat(3, 1fr); }
.fyb-gallery--6 .fyb-gallery__item { aspect-ratio: 1 / 1; }

/* ==========================================================================
   29. Lightbox foto + komentar per gambar
   ========================================================================== */
.fyb-modal--photo .fyb-modal__veil { background: rgba(3, 12, 12, .88); }
.fyb-photoview {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	/* minmax(0, 1fr), bukan baris 'auto': tanpa tinggi baris yang pasti,
	   max-height: 100% pada fotonya tidak punya acuan dan foto tegak
	   (mis. QRIS 1024px) membuat barisnya ikut memanjang keluar jendela —
	   bagian bawah foto terpotong dan form komentarnya ikut hilang. */
	grid-template-rows: minmax(0, 1fr);
	width: min(1180px, 96vw);
	height: min(88vh, 860px);
	background: var(--white);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
.fyb-photoview__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #0b1817;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}
.fyb-photoview__stage img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}
.fyb-photoview__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: var(--white);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.fyb-photoview__nav:hover { background: rgba(255, 255, 255, .3); }
.fyb-photoview__nav--prev { left: 14px; }
.fyb-photoview__nav--next { right: 14px; }
.fyb-photoview__count {
	position: absolute;
	top: 14px;
	left: 16px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .5);
	color: var(--white);
	font-size: 12.5px;
}

.fyb-photoview__side {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	border-left: 1px solid var(--border);
	background: var(--white);
}
.fyb-photoview__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 16px 16px 10px;
	border-bottom: 1px solid var(--border);
}
.fyb-photoview__head h2 { margin: 0; font-size: 17px; }
.fyb-photoview__head .fyb-modal__x { position: static; }
.fyb-photoview__hint {
	margin: 0;
	padding: 10px 16px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--gray-500);
	background: var(--teal-50);
}
.fyb-photoview__list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 12px 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.fyb-photoview__empty { margin: 0; color: var(--gray-500); font-size: 13.5px; }
.fyb-photoview__form {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid var(--border);
}
.fyb-photoview__form .fyb-commentbox { flex: 1 1 auto; min-width: 0; }

.fyb-icomment { display: flex; gap: 8px; align-items: flex-start; }
.fyb-icomment__main { min-width: 0; flex: 1 1 auto; }
.fyb-icomment__bubble {
	background: var(--surface);
	border-radius: 14px;
	padding: 8px 12px;
}
.fyb-icomment__name { font-weight: 600; font-size: 13px; }
.fyb-icomment__text { font-size: 13.5px; line-height: 1.5; word-break: break-word; }
.fyb-icomment__tools {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 12px 0;
	font-size: 12px;
	color: var(--gray-500);
}
.fyb-icomment__tools button {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}
.fyb-icomment__tools button:hover { color: var(--danger); }

@media (max-width: 900px) {
	.fyb-photoview {
		grid-template-columns: minmax(0, 1fr);
		/* Fotonya dapat porsi lebih besar daripada panel komentarnya. */
		grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr);
		height: 92vh;
		width: 96vw;
	}
	.fyb-photoview__side { border-left: 0; border-top: 1px solid var(--border); }
}

/* ==========================================================================
   30. Mention @pengguna
   ========================================================================== */
.fyb-mention {
	color: var(--teal-700);
	font-weight: 600;
	text-decoration: none;
}
.fyb-mention:hover { text-decoration: underline; }

/* position: fixed supaya tetap benar di dalam jendela modal. */
.fyb-mentionbox {
	position: fixed;
	z-index: 300;
	max-height: 288px;
	overflow-y: auto;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	box-shadow: 0 14px 34px rgba(3, 48, 47, .18);
	padding: 4px;
}
.fyb-mentionbox__item {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 7px 9px;
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	text-align: left;
	cursor: pointer;
	font: inherit;
}
.fyb-mentionbox__item:hover,
.fyb-mentionbox__item.is-on { background: var(--teal-50); }
.fyb-mentionbox__item img {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}
.fyb-mentionbox__who { display: flex; flex-direction: column; min-width: 0; }
.fyb-mentionbox__who strong {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fyb-mentionbox__who small { font-size: 12px; color: var(--gray-500); }

/* Balasan tingkat dua: tidak boleh menjorok lagi ke dalam. */
.fyb-comment--reply .fyb-comment__replies { display: none; }

/* ==========================================================================
   31. Cerita: baris kartu di atas kotak tulis

   Bentuknya mengikuti Facebook: kartu tegak bersudut tumpul, foto profil
   berbingkai lingkaran di pojok kiri atas, nama di bawah dengan gradasi
   gelap supaya tetap terbaca di atas foto terang apa pun.
   ========================================================================== */
/* Tanpa margin sendiri: barisnya anak .fyb-main yang sudah punya
   `gap: 16px`, jadi jarak atas-bawahnya ikut rata dengan blok lain. */
.fyb-storyrail {
	position: relative;
}
.fyb-storyrail__track {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 2px;
}
.fyb-storyrail__track::-webkit-scrollbar { display: none; }

.fyb-storycard {
	position: relative;
	flex: 0 0 auto;
	width: 112px;
	height: 200px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	background: var(--teal-900);
	box-shadow: 0 1px 2px rgba(3, 48, 47, .18);
	display: block;
}
.fyb-storycard:hover { filter: brightness(1.06); }
.fyb-storycard:focus-visible { outline: 3px solid var(--teal-500); outline-offset: 2px; }

.fyb-storycard__shot { position: absolute; inset: 0; display: block; }
.fyb-storycard__shot img,
.fyb-storycard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.fyb-storycard__plain {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 12px 10px;
	color: var(--white);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	word-break: break-word;
}

/* Cincin foto profil di pojok kiri atas. Teal = masih ada yang belum
   dilihat; abu = sudah dilihat semua. */
.fyb-storycard__ring {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, .85);
	overflow: hidden;
	background: var(--surface);
}
.fyb-storycard__ring.is-new { border-color: var(--teal-500); }
.fyb-storycard__ring img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fyb-storycard__name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 26px 10px 10px;
	color: var(--white);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Kartu "Buat cerita": foto profil di atas, panel putih di bawah. */
.fyb-storycard--new { background: var(--white); border: 1px solid var(--border); }
.fyb-storycard--new .fyb-storycard__shot { bottom: 54px; }
.fyb-storycard--new .fyb-storycard__name {
	background: var(--white);
	color: var(--ink);
	text-align: center;
	padding: 20px 8px 10px;
}
.fyb-storycard__plus {
	position: absolute;
	left: 50%;
	bottom: 40px;
	transform: translateX(-50%);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 3px solid var(--white);
	background: var(--teal-600);
	color: var(--white);
	font-size: 19px;
	line-height: 1;
	z-index: 1;
}

.fyb-storyrail__next {
	position: absolute;
	top: 50%;
	right: -6px;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: var(--white);
	color: var(--ink);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(3, 48, 47, .2);
}
.fyb-storyrail__next:hover { background: var(--surface); }

/* ==========================================================================
   32. Cerita: jendela buat & penampil layar penuh
   ========================================================================== */
.fyb-modal__box--story { max-width: 720px; padding: 24px; }
.fyb-storyform__grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; }
.fyb-storyprev {
	position: relative;
	/* Lebar WAJIB ditulis. Petak ini anak grid yang isinya bisa kosong, dan
	   begitu diberi `margin: 0 auto` (lihat blok responsif) peregangan
	   otomatisnya mati — tanpa lebar eksplisit kotaknya menciut jadi garis
	   tipis karena isinya memang belum ada. */
	width: 100%;
	aspect-ratio: 9 / 16;
	border-radius: var(--radius-sm);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fyb-storyprev img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fyb-storyprev__text {
	position: relative;
	z-index: 1;
	padding: 14px;
	color: var(--white);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
	word-break: break-word;
}
.fyb-storyform__side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fyb-storyform__pick { align-self: flex-start; cursor: pointer; }
.fyb-storybg { display: flex; flex-wrap: wrap; gap: 8px; }
.fyb-storybg__dot {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	border: 2px solid transparent;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.fyb-storybg__dot input { position: absolute; opacity: 0; width: 0; height: 0; }
.fyb-storybg__dot:has(input:checked) { border-color: var(--ink); }
.fyb-input--sm { padding: 7px 10px; font-size: 13px; }

.fyb-storyview {
	position: fixed;
	inset: 0;
	z-index: 260;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fyb-storyview__veil { position: absolute; inset: 0; background: rgba(3, 12, 12, .93); }
.fyb-storyview__box {
	position: relative;
	z-index: 1;
	width: min(420px, 94vw);
	height: min(88vh, 760px);
	display: flex;
	flex-direction: column;
	background: #0b1817;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
.fyb-storyview__bars { display: flex; gap: 4px; padding: 10px 10px 0; }
.fyb-storyview__bar {
	flex: 1 1 0;
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .3);
	overflow: hidden;
}
.fyb-storyview__bar > span { display: block; height: 100%; width: 0; background: var(--white); }
.fyb-storyview__bar > span.is-running { animation: fyb-storybar 5s linear forwards; }
@keyframes fyb-storybar { from { width: 0; } to { width: 100%; } }

.fyb-storyview__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	color: var(--white);
}
.fyb-storyview__head img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.fyb-storyview__who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.fyb-storyview__who a { color: var(--white); font-weight: 600; font-size: 14px; text-decoration: none; }
.fyb-storyview__who small { color: rgba(255, 255, 255, .7); font-size: 12px; }
.fyb-storyview__x {
	border: 0;
	background: none;
	color: var(--white);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

.fyb-storyview__stage {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
}
.fyb-storyview__stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.fyb-storyview__text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 34px 18px 18px;
	color: var(--white);
	font-size: 15px;
	line-height: 1.5;
	background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
	word-break: break-word;
}
/* Cerita tanpa foto: teksnya di tengah, bukan menempel di bawah. */
.fyb-storyview__text.is-solo {
	position: static;
	padding: 24px;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	background: none;
}
.fyb-storyview__half {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 34%;
	border: 0;
	background: none;
	cursor: pointer;
}
.fyb-storyview__half--prev { left: 0; }
.fyb-storyview__half--next { right: 0; width: 66%; }

/* Kaki layar pemilik cerita.

   Yang kelihatan hanya satu baris tenang: jumlah penonton di kiri, dua
   tombol tipis di kanan. Isian kategori TIDAK ikut berjejer di baris itu —
   kotak putih dan tombol merah menyala di atas foto tampak ramai dan
   murahan. Isiannya ada di panel yang baru terbuka saat diminta, dan
   semua kendalinya memakai gaya gelap (.fyb-darkfield/.fyb-darkbtn)
   supaya menyatu dengan layar cerita, bukan gaya formulir terang. */
.fyb-storyview__foot {
	background: linear-gradient(180deg, rgba(8, 20, 20, 0), rgba(8, 20, 20, .82) 42%);
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 14px 14px 12px;
}
.fyb-storyview__bar2 {
	display: flex;
	align-items: center;
	gap: 8px;
}
/* .fyb-inlineform aslinya `display: inline`; di dalam baris lentur ini
   tingginya jadi ikut baris teks dan tombolnya meleset beberapa piksel. */
.fyb-storyview__bar2 .fyb-inlineform { display: flex; }
.fyb-storyview__views {
	margin-right: auto;
	color: rgba(255, 255, 255, .72);
	font-size: 12.5px;
	letter-spacing: .01em;
}

/* Tombol & isian bergaya gelap, khusus di atas media. */
.fyb-darkbtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: var(--white);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fyb-darkbtn:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .38); }
.fyb-darkbtn:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.fyb-darkbtn .fyb-icon { opacity: .85; }
/* Keadaan "panel sedang terbuka". Ditentukan dari PANELNYA lewat pemilih
   saudara, bukan dari kelas yang dipasang JavaScript — dengan begitu
   tombol dan panel mustahil beda keadaan. Kelas .is-on tetap didukung
   untuk tombol lain yang memakainya. */
.fyb-storypin:not([hidden]) ~ .fyb-storyview__bar2 [data-storypintoggle],
.fyb-darkbtn.is-on { background: var(--white); border-color: var(--white); color: var(--teal-900); }
.fyb-storypin:not([hidden]) ~ .fyb-storyview__bar2 [data-storypintoggle] .fyb-icon,
.fyb-darkbtn.is-on .fyb-icon { opacity: 1; }
.fyb-storypin:not([hidden]) ~ .fyb-storyview__bar2 [data-storypintoggle]:hover {
	background: rgba(255, 255, 255, .86);
	border-color: rgba(255, 255, 255, .86);
}
.fyb-darkbtn--danger:hover {
	background: rgba(180, 35, 24, .9);
	border-color: rgba(255, 255, 255, .32);
	color: var(--white);
}
.fyb-darkbtn--go {
	background: var(--white);
	border-color: var(--white);
	color: var(--teal-900);
}
.fyb-darkbtn--go:hover { background: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .88); }

.fyb-darkfield {
	height: 34px;
	min-width: 0;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	color: var(--white);
	font: inherit;
	font-size: 13px;
}
.fyb-darkfield::placeholder { color: rgba(255, 255, 255, .5); }
.fyb-darkfield:focus {
	outline: none;
	border-color: rgba(255, 255, 255, .55);
	background: rgba(255, 255, 255, .16);
}
/* Daftar pilihan digambar sistem operasi dengan latar terang, jadi
   tulisannya harus gelap — kalau diwarisi putih, pilihannya tak terbaca. */
.fyb-darkfield option { color: var(--ink); background: var(--white); }

/* Panel sorotan: muncul di atas baris tombol, bukan di dalamnya. */
.fyb-storypin {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-bottom: 12px;
	padding: 12px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 14px;
	background: rgba(10, 24, 24, .78);
	animation: fyb-storypin-in .16s ease-out;
}
.fyb-storypin__title {
	color: rgba(255, 255, 255, .78);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.fyb-storypin__row { display: flex; flex-wrap: wrap; gap: 8px; }
.fyb-storypin__row .fyb-darkfield { flex: 1 1 140px; }
.fyb-storypin__row .fyb-darkbtn { flex: 0 0 auto; }

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

@media (max-width: 420px) {
	.fyb-storypin__row .fyb-darkfield,
	.fyb-storypin__row .fyb-darkbtn { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   33. Arsip cerita
   ========================================================================== */
.fyb-storygrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	gap: 12px;
	padding: 0 16px 16px;
}
.fyb-storygrid__shot {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--surface);
	cursor: pointer;
}
.fyb-storygrid__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fyb-storygrid__meta {
	display: flex;
	justify-content: space-between;
	gap: 6px;
	padding-top: 5px;
	font-size: 12px;
	color: var(--gray-500);
}

/* Pengaturan sorotan per petak di halaman arsip. */
.fyb-storygrid__tags { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 6px; }
.fyb-chip--off { cursor: pointer; }
.fyb-chip--off:hover { border-color: var(--danger); color: var(--danger); background: #fdf2f1; }
.fyb-storygrid__pin {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	padding-top: 7px;
}
.fyb-storygrid__pin .fyb-input--sm { flex: 1 1 100%; min-width: 0; }
.fyb-storygrid__pin .fyb-btn { flex: 1 1 100%; justify-content: center; }
.fyb-storygrid__del {
	margin-top: 6px;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 12.5px;
	color: var(--gray-500);
	cursor: pointer;
}
.fyb-storygrid__del:hover { color: var(--danger); }

.fyb-hilist { list-style: none; margin: 10px 0 0; padding: 0; }
.fyb-hilist li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 0;
	border-top: 1px solid var(--border);
	font-size: 14px;
}
.fyb-hilist button {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	color: var(--danger);
	cursor: pointer;
}

@media (max-width: 620px) {
	.fyb-storyform__grid { grid-template-columns: minmax(0, 1fr); }
	.fyb-storyprev { width: 100%; max-width: 200px; margin: 0 auto; }
	.fyb-storycard { width: 96px; height: 172px; }
}

/* ==========================================================================
   34. Kartu pratinjau tautan
   ========================================================================== */
.fyb-linkcard {
	position: relative;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--surface);
}
.fyb-linkcard__hit {
	display: block;
	color: inherit;
	text-decoration: none;
}
.fyb-linkcard__hit:hover { background: var(--teal-50); }
.fyb-linkcard__shot {
	display: block;
	aspect-ratio: 1.91 / 1;      /* rasio baku kartu Open Graph */
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}
.fyb-linkcard__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fyb-linkcard__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 11px 14px;
	min-width: 0;
}
.fyb-linkcard__site {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--gray-500);
}
.fyb-linkcard__title {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.fyb-linkcard__desc {
	font-size: 13px;
	line-height: 1.5;
	color: var(--gray-500);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Bentuk ringkas: dipakai di komentar, dan untuk tautan tanpa gambar. */
.fyb-linkcard--flat .fyb-linkcard__shot { display: none; }
.fyb-linkcard--flat .fyb-linkcard__body { padding: 9px 12px; }
.fyb-linkcard--flat .fyb-linkcard__title { font-size: 13.5px; -webkit-line-clamp: 1; }

.fyb-linkcard__x {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(2, 26, 25, .62);
	color: var(--white);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}
.fyb-linkcard__x:hover { background: var(--danger); }

/* Tempatnya di masing-masing muka. */
.fyb-post__link { padding: 0 16px 12px; }
.fyb-composer__link { padding: 0 16px 12px; }
.fyb-comment__bubble .fyb-linkcard,
.fyb-icomment__bubble .fyb-linkcard { margin-top: 8px; background: var(--white); }

/* ==========================================================================
   35. Halaman Pesan: panel setinggi jendela + tombol ke pesan terbaru
   Dulu seluruh halaman yang menggulir, jadi kepala percakapan, pesan
   tersemat dan form "Tulis pesan…" ikut bergeser keluar layar. Sekarang
   panelnya dikunci setinggi jendela dan satu-satunya yang menggulir adalah
   daftar pesannya.
   Blok ini sengaja ditaruh paling bawah berkas: aturan .fyb-chat__messages
   di dalam @media (max-width: 760px) bagian atas harus kalah oleh yang ini.
   ========================================================================== */
.fyb-screen-chat .fyb-shell { padding-bottom: var(--gap); }
.fyb-screen-chat .fyb-chat {
	min-height: 420px;
	height: calc(100vh - var(--topbar-h) - var(--gap) * 2);
	/* dvh: di HP bilah alamat yang muncul-hilang tidak lagi memotong form. */
	height: calc(100dvh - var(--topbar-h) - var(--gap) * 2);
}

/* min-height: 0 — tanpa itu anak flex/grid menolak menyusut lebih kecil dari
   isinya, dan daftar pesan akan mendorong form kirim ke bawah panel. */
.fyb-screen-chat .fyb-chat__list { min-height: 0; overflow-y: auto; }
.fyb-screen-chat .fyb-chat__listhead { position: sticky; top: 0; z-index: 2; background: var(--white); }
.fyb-screen-chat .fyb-chat__view { min-height: 0; }
.fyb-screen-chat .fyb-chat__viewhead,
.fyb-screen-chat .fyb-chat__pinned,
.fyb-screen-chat .fyb-chat__jumpwrap,
.fyb-screen-chat .fyb-chat__reply { flex-shrink: 0; }
.fyb-screen-chat .fyb-chat__messages { flex: 1 1 auto; min-height: 0; max-height: none; }

@media (max-width: 860px) {
	/* tab bar bawah tetap butuh ruangnya */
	.fyb-screen-chat .fyb-shell { padding-bottom: 86px; }
	.fyb-screen-chat .fyb-chat {
		height: calc(100vh - var(--topbar-h) - var(--gap) - 86px);
		height: calc(100dvh - var(--topbar-h) - var(--gap) - 86px);
	}
}

/* Tombol turun ke pesan terbaru. Pembungkusnya setinggi nol supaya tombolnya
   mengapung tepat di atas form kirim, tanpa menambah tinggi apa pun. */
.fyb-chat__jumpwrap { position: relative; height: 0; z-index: 3; }
.fyb-chat__jump {
	position: absolute;
	right: 18px;
	bottom: 14px;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: var(--white);
	color: var(--teal-700);
	box-shadow: var(--shadow);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px) scale(.9);
	transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.fyb-chat__jump.is-on { opacity: 1; visibility: visible; transform: none; }
.fyb-chat__jump:hover { background: var(--teal-50); color: var(--teal-800); border-color: var(--teal-200); }
.fyb-chat__jump:active { transform: scale(.94); }

/* ==========================================================================
   36. Gulir tak berujung: penanda di ujung daftar kiriman
   Tombol "Muat lebih banyak" dibuang. Penanda ini tak terlihat; titik-titik
   kecilnya cuma muncul pada detik-detik susulan sedang diambil, supaya
   kalau jaringannya lambat orang tahu daftarnya belum habis.
   ========================================================================== */
.fyb-feedmore {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	margin-bottom: 8px;
	opacity: 0;
	transition: opacity .2s ease;
}
.fyb-feedmore.is-busy { opacity: 1; }
.fyb-feedmore.is-done { display: none; }
.fyb-feedmore__dots { display: flex; gap: 5px; }
.fyb-feedmore__dots i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--teal-300, var(--teal-200));
	animation: fyb-dots 1s ease-in-out infinite;
}
.fyb-feedmore__dots i:nth-child(2) { animation-delay: .15s; }
.fyb-feedmore__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes fyb-dots {
	0%, 80%, 100% { opacity: .35; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
	.fyb-feedmore__dots i { animation: none; }
}

/* ==========================================================================
   37. Kotak komentar: satu bentuk untuk semua
   Kotaknya kini textarea (Enter mengirim, Shift+Enter turun baris), dan
   kotak komentar foto memakai komponen yang sama persis dengan komentar
   kiriman — lengkap dengan emotikon, lampiran gambar, dan balasan.
   ========================================================================== */
.fyb-commentbox__field {
	/* center → flex-end: begitu tulisannya turun ke baris kedua, tombol
	   emotikon dan klipnya tetap sejajar baris terakhir, tidak melayang
	   di tengah kotak yang memanjang. */
	align-items: flex-end;
	/* Pil saat satu baris, sudut lembut saat memanjang. */
	border-radius: 19px;
}
.fyb-commentbox__field .fyb-commentbox__input {
	resize: none;
	overflow-y: auto;
	max-height: 140px;
	line-height: 1.45;
	font-family: inherit;
	/* tinggi satu baris persis seperti kotak lama */
	min-height: 38px;
	height: 38px;
	padding: 9px 14px;
}
.fyb-commentbox__field .fyb-emoji,
.fyb-commentbox__field .fyb-commentbox__clip { margin-bottom: 3px; }

/* -- Panel komentar di lightbox foto -- */
.fyb-photoview__list .fyb-comments { padding: 0; gap: 12px; }
.fyb-photoview__form { padding: 10px 12px; }
.fyb-photoview__form .fyb-commentbox { flex: 1 1 auto; min-width: 0; padding: 0; border-top: 0; }
/* Ruang di panel 360px itu sempit: balasannya cukup menjorok sedikit. */
.fyb-photoview__list .fyb-comment__replies { margin-left: 6px; padding-left: 10px; }
.fyb-photoview__list .fyb-commentbox--reply { padding-left: 14px; }

/* ==========================================================================
   38. Kotak komentar: sudut siku + lencana "Membalas"
   Sudutnya dulu pil (radius 999px). Begitu tulisannya lebih dari satu
   baris, huruf pertama/terakhir tiap baris masuk ke lengkungannya dan
   terpotong. Sekarang kotaknya bersudut tumpul biasa.
   Kotak balasan per komentar juga dibuang: di panel sempit kotak itu
   mentok sampai tombol Kirimnya tidak kelihatan. Yang dipakai kotak
   utama daftar itu, ditandai lencana "Membalas <nama>".
   ========================================================================== */
.fyb-commentbox { flex-wrap: wrap; }
.fyb-commentbox__field {
	border-radius: 12px;
	align-items: flex-end;
}
.fyb-commentbox__field .fyb-commentbox__input {
	padding: 9px 12px;
	border-radius: 12px;
}

/* Lencana sasaran balasan: satu baris penuh DI ATAS kotaknya (order: -1),
   ikut arus — bukan melayang — supaya tidak menutupi komentar terakhir. */
.fyb-commentbox__tag {
	order: -1;
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 2px;
	padding: 6px 10px;
	border-radius: 10px;
	background: var(--teal-50);
	color: var(--teal-700);
	font-size: 12.5px;
	line-height: 1.3;
}
.fyb-commentbox__tag[hidden] { display: none; }
.fyb-commentbox__tag > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fyb-commentbox__tag strong { font-weight: 600; }
.fyb-commentbox__tag button {
	margin-left: auto;
	flex-shrink: 0;
	border: 0;
	background: transparent;
	color: var(--teal-700);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
}
.fyb-commentbox__tag button:hover { color: var(--danger); }

/* Panel lightbox sempit: apa pun tidak boleh mendorongnya ke samping. */
.fyb-photoview__list { overflow-x: hidden; }
.fyb-photoview__side { overflow-x: hidden; }

/* ==========================================================================
   39. Pemberitahuan sebagai kartu melayang (kiri bawah)
   Dulu pemberitahuan menyelip di atas isi halaman: letaknya pindah-pindah
   mengikuti halaman dan sempat mendorong isi ke bawah. Sekarang melayang
   di kiri bawah layar, ada tombol ×, dan hilang sendiri setelah 7 detik.
   ========================================================================== */
.fyb-notice {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 150;
	width: max-content;
	max-width: min(380px, calc(100vw - 40px));
	margin: 0;
	padding: 12px 12px 12px 14px;
	align-items: center;
	gap: 10px;
	border-radius: 14px;
	box-shadow: var(--shadow-lg);
	animation: fyb-notice-in .22s ease-out;
}
.fyb-notice .fyb-icon { flex-shrink: 0; }
.fyb-notice > span { min-width: 0; line-height: 1.45; }
.fyb-notice.is-off { opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.fyb-notice__x {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 2px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	opacity: .6;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
}
.fyb-notice__x:hover { opacity: 1; background: rgba(0, 0, 0, .07); }
@keyframes fyb-notice-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
/* Tab bar HP menempel di dasar layar — pemberitahuannya naik di atasnya. */
@media (max-width: 860px) {
	.fyb-notice { left: 12px; right: 12px; bottom: 96px; max-width: none; width: auto; }
}
/* Layar kunci PIN: di sana pemberitahuannya memang bagian dari kartunya. */
.fyb-pinlock__card .fyb-notice,
.fyb-auth .fyb-notice {
	position: static;
	width: auto;
	max-width: none;
	margin-bottom: 16px;
	box-shadow: none;
	animation: none;
}

/* ==========================================================================
   40. Kartu kiriman asli di dalam bagikan-ulang
   Dulu cuma foto PERTAMA yang ikut, jadi kiriman 5 foto yang dibagikan
   tampil seperti kiriman berfoto satu. Sekarang petak kecil sampai empat
   foto, sisanya ditandai "+N", plus lencana "Kiriman asli" dan hitungan
   fotonya supaya jelas ini kutipan kiriman orang.
   ========================================================================== */
.fyb-sharenote {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 16px 8px;
	font-size: 12.5px;
	color: var(--gray-500);
}
.fyb-sharenote .fyb-icon { color: var(--teal-600); flex-shrink: 0; }

.fyb-shared__head { align-items: center; }
.fyb-shared__badge {
	margin-left: auto;
	flex-shrink: 0;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--teal-100, var(--teal-50));
	color: var(--teal-700);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .01em;
}
.fyb-shared__media {
	display: grid;
	gap: 3px;
	margin-top: 9px;
	border-radius: 10px;
	overflow: hidden;
}
/* Tingginya DIPATOK, bukan lewat aspect-ratio.
   aspect-ratio + max-height membuat perambannya menurunkan LEBARNYA supaya
   rasionya tetap: kartu selebar 522px cuma terisi galeri 320px, sisanya
   kosong melompong di sebelah kanan. Dengan tinggi pasti, lebarnya selalu
   penuh dan petaknya ikut melebar sendiri. */
.fyb-shared__media--1 { grid-template-columns: 1fr; }
.fyb-shared__media--2 { grid-template-columns: 1fr 1fr; height: 200px; }
.fyb-shared__media--3 { grid-template-columns: 1.7fr 1fr; grid-template-rows: 1fr 1fr; height: 220px; }
.fyb-shared__media--3 .fyb-shared__shot:first-child { grid-row: 1 / span 2; }
.fyb-shared__media--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 300px; }
.fyb-shared__shot { position: relative; display: block; overflow: hidden; min-width: 0; min-height: 0; background: var(--surface); }
.fyb-shared__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Satu foto: tidak dipotong jadi kotak, cukup dibatasi tingginya. */
.fyb-shared__media--1 .fyb-shared__shot img { height: auto; max-height: 280px; }
.fyb-shared__rest {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(2, 26, 25, .55);
	color: var(--white);
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 700;
}
.fyb-shared__count {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 7px;
	font-size: 12px;
	color: var(--gray-500);
}
.fyb-shared__link {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 7px 10px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--white);
	font-size: 12.5px;
	color: var(--teal-700);
}
.fyb-shared__link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   41. Reels — petak di halaman /reels/
   Kartunya bentuk kartu cerita tapi besar (9:16). Server ini tidak bisa
   membuat sampul dari video (GD & Imagick mati), jadi petak tanpa sampul
   memakai elemen <video> dengan preload="metadata": bingkai pertamanya
   tergambar tanpa mengunduh seluruh berkas.
   ========================================================================== */
.fyb-reels__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}
.fyb-reels__head h1 { margin: 0 0 4px; font-size: 24px; color: var(--teal-800); }
.fyb-reels__head p { margin: 0; font-size: 13.5px; color: var(--gray-500); max-width: 60ch; line-height: 1.5; }
.fyb-reels__head .fyb-btn { flex-shrink: 0; gap: 7px; }

.fyb-reelgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 14px;
}
@media (max-width: 520px) { .fyb-reelgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

.fyb-reelcard {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	padding: 0;
	border: 0;
	border-radius: 16px;
	overflow: hidden;
	background: #0b1817;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: transform .16s ease, box-shadow .16s ease;
}
.fyb-reelcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.fyb-reelcard__shot { position: absolute; inset: 0; display: block; }
.fyb-reelcard__shot img,
.fyb-reelcard__shot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fyb-reelcard__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, .45);
	color: #fff;
	backdrop-filter: none;
	transition: background .16s ease;
}
.fyb-reelcard:hover .fyb-reelcard__play { background: var(--teal-600); }
.fyb-reelcard__views {
	position: absolute;
	top: 9px;
	left: 9px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .5);
	color: #fff;
	font-size: 11.5px;
}
.fyb-reelcard__foot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 26px 10px 10px;
	text-align: left;
	background: linear-gradient(to top, rgba(2, 20, 19, .88), rgba(2, 20, 19, 0));
	color: #fff;
}
.fyb-reelcard__who { display: flex; align-items: center; gap: 7px; min-width: 0; }
.fyb-reelcard__who img { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .8); }
.fyb-reelcard__who strong { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fyb-reelcard__cap {
	font-size: 12px;
	line-height: 1.4;
	opacity: .9;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   42. Reels — penampil layar penuh
   Satu slide setinggi layar per reel, ditumpuk ke bawah dengan scroll-snap:
   gulir sedikit langsung mengunci ke video berikutnya, seperti aplikasi.
   ========================================================================== */
.fyb-reelview {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: #050b0b;
}
.fyb-reelview[hidden] { display: none; }
.fyb-reelview__track {
	height: 100%;
	overflow-y: auto;
	scroll-snap-type: y mandatory;
	scrollbar-width: none;
	overscroll-behavior: contain;
}
.fyb-reelview__track::-webkit-scrollbar { width: 0; height: 0; }

.fyb-reelview__x,
.fyb-reelview__nav {
	position: fixed;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	cursor: pointer;
}
.fyb-reelview__x:hover,
.fyb-reelview__nav:hover { background: rgba(255, 255, 255, .28); }
.fyb-reelview__x { top: 16px; right: 18px; font-size: 26px; line-height: 1; }
.fyb-reelview__nav--up { right: 18px; top: calc(50% - 52px); }
.fyb-reelview__nav--down { right: 18px; top: calc(50% + 10px); }
.fyb-reelview__nav--up .fyb-icon { transform: rotate(180deg); }
@media (max-width: 760px) { .fyb-reelview__nav { display: none; } }

.fyb-reel {
	position: relative;
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fyb-reel__stage {
	position: relative;
	height: calc(100% - 32px);
	aspect-ratio: 9 / 16;
	max-width: calc(100vw - 32px);
	border-radius: 16px;
	overflow: hidden;
	background: #000;
}
.fyb-reel__video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.fyb-reel__tap { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; }
.fyb-reel__big {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 66px;
	height: 66px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, .5);
	color: #fff;
}
.fyb-reel__big[hidden] { display: none; }

.fyb-reel__info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 40px 14px 14px;
	background: linear-gradient(to top, rgba(2, 20, 19, .9), rgba(2, 20, 19, 0));
	color: #fff;
	pointer-events: none;
}
.fyb-reel__info a, .fyb-reel__info button { pointer-events: auto; }
.fyb-reel__who { display: inline-flex; align-items: center; gap: 9px; color: #fff; }
.fyb-reel__who img { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .85); }
.fyb-reel__who strong { display: block; font-size: 14px; }
.fyb-reel__who small { font-size: 11.5px; opacity: .75; }
.fyb-reel__cap { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; max-height: 4.5em; overflow: hidden; }
.fyb-reel__cap a { color: #9fe3df; }

/* Tiang tombol: di luar video pada layar lebar, menumpang di atasnya di HP. */
.fyb-reel__rail {
	position: absolute;
	right: -62px;
	bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
}
.fyb-reel__rail form { margin: 0; }
.fyb-reel__act {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	width: 50px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 11px;
	line-height: 1.2;
	cursor: pointer;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.fyb-reel__act .fyb-icon { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45)); }
.fyb-reel__act:hover { color: var(--teal-200); }
.fyb-reel__act.is-on { color: #ff5d73; }
.fyb-reel__act.is-on .fyb-icon { fill: #ff5d73; }
@media (max-width: 980px) {
	.fyb-reel__rail { right: 6px; bottom: 90px; }
	.fyb-reel__info { padding-right: 70px; }
}

/* Panel komentar: samping kanan di layar lebar, lembar bawah di HP. */
.fyb-reel__panel {
	position: absolute;
	top: 0;
	right: 0;
	width: 380px;
	height: 100%;
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--white);
	border-left: 1px solid var(--border);
	box-shadow: -14px 0 40px rgba(0, 0, 0, .3);
	animation: fyb-reelpanel-in .18s ease-out;
}
.fyb-reel__panel[hidden] { display: none; }
.fyb-reel__panelhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--border);
}
.fyb-reel__panelhead strong { font-family: var(--font-heading); font-size: 15px; color: var(--teal-800); }
.fyb-reel__panelhead .fyb-modal__x { position: static; }
.fyb-reel__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px 14px; }
.fyb-reel__list .fyb-comments { padding: 0; gap: 12px; }
.fyb-reel__list .fyb-comment__replies { margin-left: 6px; padding-left: 10px; }
.fyb-reel__empty, .fyb-reel__hint { margin: 0; padding: 12px 16px; color: var(--gray-500); font-size: 13.5px; }
.fyb-reel__form { flex: 0 0 auto; border-top: 1px solid var(--border); }
.fyb-reel__form .fyb-commentbox { border-top: 0; }
@keyframes fyb-reelpanel-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
	.fyb-reel__panel {
		top: auto;
		left: 0;
		right: 0;
		width: auto;
		height: 72%;
		border-left: 0;
		border-radius: 18px 18px 0 0;
		animation: fyb-reelpanel-up .2s ease-out;
	}
	@keyframes fyb-reelpanel-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ==========================================================================
   43. Reels — jendela "Buat reel"
   ========================================================================== */
.fyb-modal__box--reel { max-width: 540px; padding: 24px; }
.fyb-reeldrop {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 240px;
	max-height: 46vh;
	margin: 4px 0 10px;
	padding: 18px;
	border: 2px dashed var(--teal-200);
	border-radius: 16px;
	background: var(--surface);
	cursor: pointer;
	overflow: hidden;
}
.fyb-reeldrop:hover, .fyb-reeldrop.is-over { border-color: var(--teal-500, var(--teal-600)); background: var(--teal-50); }
.fyb-reeldrop__empty { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--gray-500); text-align: center; }
.fyb-reeldrop__empty .fyb-icon { color: var(--teal-600); }
.fyb-reeldrop__empty strong { font-size: 15px; color: var(--teal-800); }
.fyb-reeldrop__empty small { font-size: 12.5px; }
.fyb-reeldrop__prev { max-height: 40vh; max-width: 100%; border-radius: 12px; background: #000; display: block; }
.fyb-reeldrop__prev[hidden] { display: none; }
.fyb-reeldrop__err { margin: 0 0 10px; color: var(--danger); font-size: 13px; }
.fyb-reeldrop__err[hidden] { display: none; }
.fyb-reelform__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }

/* Enam menu di tab bar HP: labelnya dirapatkan supaya tetap muat. */
@media (max-width: 420px) {
	.fyb-tabbar a { font-size: 9.5px; padding: 8px 0 6px; }
}

/* Jendela konfirmasi harus di ATAS penampil reel (z-index 200) — tombol
   Hapus di dalam penampil memakai jendela yang sama. */
#fyb-modal-confirm { z-index: 320; }

/* ==========================================================================
   44. Reels — perbaikan tata letak penampil
   Tiga hal yang salah di versi pertama:
   (1) tiang tombol ditaruh DI DALAM panggung yang ber-overflow:hidden, jadi
       di layar lebar tombolnya terpotong habis — suka/komentar/bagikan
       seolah-olah tidak ada;
   (2) panel komentar di HP tidak dipaku ke dasar layar, jadi dia melayang
       di atas dan nama pengunggahnya malah terlihat di bawahnya;
   (3) kotak keterangan di jendela buat reel tidak kelihatan sama sekali.
   ========================================================================== */
.fyb-reel {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}
.fyb-reel__stage { flex: 0 0 auto; }

/* Tiang tombol: sejajar video, bukan di dalamnya. */
.fyb-reel__rail {
	position: static;
	flex: 0 0 auto;
	align-self: center;
	height: calc(100% - 32px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 18px;
	padding-bottom: 14px;
}
.fyb-reel__act { width: 56px; }

/* Panel komentar terbuka: videonya digeser supaya tidak ketutupan. */
@media (min-width: 761px) {
	.fyb-reel.is-panel { padding-right: 380px; }
}

@media (max-width: 760px) {
	/* Di HP tiangnya menumpang di atas video, menempel ke kanan bawah. */
	.fyb-reel { gap: 0; }
	.fyb-reel__stage { width: 100%; height: 100%; max-width: none; border-radius: 0; aspect-ratio: auto; }
	.fyb-reel__rail {
		position: absolute;
		right: 8px;
		bottom: 96px;
		height: auto;
		gap: 16px;
		z-index: 2;
	}
	.fyb-reel__info { padding-right: 76px; }

	/* Lembar komentar dipaku ke DASAR layar — menutupi nama pengunggah,
	   bukan menyisakannya di bawah panel. */
	.fyb-reel__panel {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: auto;
		height: 76%;
		border-left: 0;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -14px 40px rgba(0, 0, 0, .4);
	}
}

/* -- Kotak keterangan di jendela "Buat reel" -- */
.fyb-reelcap {
	position: relative;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
	transition: border-color .15s ease, background .15s ease;
}
.fyb-reelcap:focus-within { border-color: var(--teal-400); background: var(--white); }
.fyb-reelcap__input {
	display: block;
	width: 100%;
	/* min-height eksplisit: tanpa ini kotaknya pernah tergambar setinggi
	   NOL — data-autogrow mengukur scrollHeight saat jendelanya masih
	   tersembunyi, dan yang tersembunyi tingginya 0 (jebakan #56). */
	min-height: 84px;
	max-height: 220px;
	padding: 11px 13px 4px;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ink);
	resize: none;
	overflow-y: auto;
}
.fyb-reelcap__input:focus { outline: none; }
.fyb-reelcap__tools {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 2px 8px 6px;
}
.fyb-reelcap__count { font-size: 11.5px; color: var(--gray-400); }

/* Sampul opsional di jendela "Buat reel". */
.fyb-reelcover {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	padding: 8px 10px;
	border: 1px dashed var(--border);
	border-radius: 12px;
	cursor: pointer;
	font-size: 13px;
	color: var(--gray-500);
}
.fyb-reelcover:hover { border-color: var(--teal-300, var(--teal-200)); background: var(--teal-50); color: var(--teal-700); }
.fyb-reelcover__pick { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.fyb-reelcover__pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fyb-reelcover__prev { width: 40px; height: 56px; object-fit: cover; border-radius: 8px; margin-left: auto; }
.fyb-reelcover__prev[hidden] { display: none; }

/* ==========================================================================
   45. Reels — lembar komentar harus MENUTUPI tiang tombol
   Tiang tombol di HP diberi z-index 2 supaya di atas video; panel
   komentarnya tidak diberi z-index sama sekali, jadi tombol suka/komentar/
   bagikan tembus menimpa lembar komentar yang putih. Urutannya sekarang
   tegas: video → tiang tombol → lembar komentar → tombol tutup.
   ========================================================================== */
.fyb-reel__panel { z-index: 6; }
.fyb-reelview__x { z-index: 8; }
/* Tombol panah hanya untuk layar lebar, dan di sana panelnya di samping —
   tidak pernah bertumpuk. */
.fyb-reelview__nav { z-index: 4; }

/* ==========================================================================
   46. Lencana angka: muncul sendiri saat ada yang baru
   Lencananya SELALU ada di markup (tersembunyi waktu nol), jadi
   JavaScript tinggal mengisinya tanpa halaman dimuat ulang. Sentakan
   kecilnya menandai "ini baru saja berubah".
   ========================================================================== */
.fyb-badge-count[hidden] { display: none; }
.fyb-badge-count.is-bump { animation: fyb-bump .42s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes fyb-bump {
	0%   { transform: scale(.4); opacity: .4; }
	55%  { transform: scale(1.25); opacity: 1; }
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.fyb-badge-count.is-bump { animation: none; }
}

/* ==========================================================================
   47. Lapisan sorot di kotak ketik (nama yang disebut) + kartu pemberitahuan

   Nama orang yang disebut tidak bisa jadi <a> di dalam <textarea>, jadi
   diwarnai lewat lapisan cermin di belakangnya: tulisan aslinya dibuat
   transparan, cerminnya yang menggambar semua hurufnya. Keduanya WAJIB
   sama persis font, padding, dan tinggi barisnya — kalau beda sedikit saja,
   hurufnya kelihatan dobel/bergeser. Itu sebabnya gayanya disalin dari
   gaya terhitung kotak ketiknya oleh JavaScript, bukan ditulis ulang di sini.
   ========================================================================== */
.fyb-sorotwrap {
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}
.fyb-sorotwrap > textarea,
.fyb-sorotwrap > input {
	display: block;
	width: 100%;
	position: relative;
	z-index: 1;
	background: transparent;
}
.fyb-sorot {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	overflow: hidden;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	pointer-events: none;
	border-style: solid;
	border-color: transparent;
	background: transparent;
}
.fyb-sorot__m { color: var(--teal-600); font-weight: 600; }

/* Tulisan aslinya disembunyikan, kursornya TIDAK — tanpa caret-color,
   kursor ketiknya ikut transparan dan orang tidak tahu sedang mengetik
   di mana. -webkit-text-fill-color perlu untuk Safari. */
textarea.is-sorot {
	color: transparent;
	-webkit-text-fill-color: transparent;
	caret-color: var(--ink);
}
textarea.is-sorot::selection { background: var(--teal-200); }

/* -- Kartu pemberitahuan yang datang sendiri -- */
.fyb-ntoasts {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 151;
	display: grid;
	gap: 8px;
	width: max-content;
	max-width: min(380px, calc(100vw - 40px));
}
.fyb-ntoast {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--teal-200);
	background: var(--white);
	box-shadow: 0 8px 24px rgba(4, 60, 60, .14);
	color: var(--ink);
	font-size: 13.5px;
	text-decoration: none;
	animation: fyb-ntoast-in .22s ease-out both;
}
.fyb-ntoast:hover { border-color: var(--teal-400); }
.fyb-ntoast.is-out { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.fyb-ntoast__pic { flex-shrink: 0; display: inline-flex; }
.fyb-ntoast__pic img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; }
.fyb-ntoast__text { flex: 1; min-width: 0; line-height: 1.35; }
.fyb-ntoast__x {
	flex-shrink: 0;
	border: 0; background: transparent; cursor: pointer;
	font-size: 18px; line-height: 1; color: var(--gray-400);
	padding: 2px 4px; border-radius: 6px;
}
.fyb-ntoast__x:hover { background: var(--surface); color: var(--ink); }

@keyframes fyb-ntoast-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* Di ponsel kartunya naik ke atas tab bar, sama seperti kartu notice. */
@media (max-width: 760px) {
	.fyb-ntoasts { left: 12px; right: 12px; bottom: calc(64px + 12px); width: auto; max-width: none; }
}

/* Seluruh kalimat pemberitahuan jadi tautan ke isinya, bukan cuma namanya. */
.fyb-notif__text { color: inherit; text-decoration: none; display: block; }
.fyb-notif__text:hover { text-decoration: underline; }

/* Kutipan tetap ringkas di layar sempit — ini kutipan, bukan kirimannya. */
@media (max-width: 480px) {
	.fyb-shared__media--2 { height: 150px; }
	.fyb-shared__media--3 { height: 170px; }
	.fyb-shared__media--4 { height: 230px; }
	.fyb-shared__media--1 .fyb-shared__shot img { max-height: 240px; }
}

/* ==========================================================================
   48. Kirim tanpa muat ulang: keadaan "mengirim", "mencoba lagi", "gagal"
   ========================================================================== */
.fyb-bubble--pending .fyb-bubble__body { opacity: .62; }
.fyb-bubble--pending.is-retry .fyb-bubble__body { opacity: .8; }
.fyb-bubble--pending.is-failed .fyb-bubble__body {
	opacity: 1;
	border: 1px solid var(--danger);
}
.fyb-bubble--pending.is-failed .fyb-bubble__time { color: var(--danger); }
.fyb-bubble__retry {
	display: block;
	margin-top: 6px;
	padding: 3px 10px;
	border: 1px solid var(--danger);
	border-radius: 999px;
	background: transparent;
	color: var(--danger);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.fyb-bubble__retry:hover { background: var(--danger-soft); }

/* Kotak komentar yang sedang mengirim: tetap bisa dibaca, tapi jelas
   sedang bekerja. Kotaknya TIDAK dikunci — orang boleh terus mengetik. */
.fyb-commentbox.is-sending .fyb-commentbox__field { opacity: .72; }
.fyb-commentbox.is-retry .fyb-commentbox__field { border-color: var(--warning, #b8860b); }

.fyb-cf-error {
	flex: 0 0 100%;
	order: 9;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--danger);
}
.fyb-cf-error button {
	border: 1px solid var(--danger);
	border-radius: 999px;
	background: transparent;
	color: var(--danger);
	font-size: 12px;
	font-weight: 600;
	padding: 2px 10px;
	cursor: pointer;
}
.fyb-cf-error button:hover { background: var(--danger-soft); }

/* ---- Kartu tautan di dalam gelembung pesan ----
   Urutannya seperti aplikasi chat pada umumnya: tulisan dulu, kartunya di
   bawah sebagai pelengkap. Kartunya "kartu di dalam gelembung" — bertepi
   sendiri dengan jarak tipis dari tepi gelembung — bukan menempel rata,
   supaya terbaca sebagai lampiran, bukan bagian dari tulisan.

   Gelembung dipatok 300px begitu membawa kartu, dan kartunya mengisi
   penuh lebar itu. Kalau gelembungnya ikut melebar mengikuti alamat
   panjang, kartunya jadi sempit dengan ruang kosong di sebelahnya. */
.fyb-bubble__body--link { width: 300px; max-width: 100%; padding: 8px 8px 7px; }
.fyb-bubble__body--link > .fyb-bubble__who,
.fyb-bubble__body--link > .fyb-bubble__quote,
.fyb-bubble__body--link > .fyb-bubble__text { margin-left: 5px; margin-right: 5px; }
.fyb-bubble__body--link > .fyb-bubble__who { margin-top: 1px; }
.fyb-bubble__body--link > .fyb-bubble__text { margin-top: 1px; }
.fyb-bubble__body--link > .fyb-bubble__time { padding: 0 5px; margin-top: 5px; }

.fyb-bubble__link { display: block; margin-top: 8px; }
.fyb-bubble__body--link > .fyb-bubble__link:first-child { margin-top: 0; }

.fyb-bubble__link .fyb-linkcard {
	width: 100%;
	max-width: none;
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--white);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.fyb-bubble__link .fyb-linkcard:hover {
	border-color: var(--teal-200);
	box-shadow: 0 4px 14px rgba(15, 23, 42, .09);
}
.fyb-bubble__link .fyb-linkcard__hit,
.fyb-bubble__link .fyb-linkcard__hit:hover { background: transparent; }

/* Rasio Open Graph (1,91:1) dengan object-fit: cover — gambar sumber yang
   rasionya beda ikut dipotong, bukan meninggalkan pita putih. */
.fyb-bubble__link .fyb-linkcard__shot {
	display: block;
	aspect-ratio: 1.91 / 1;
	overflow: hidden;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}
.fyb-bubble__link .fyb-linkcard__shot img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	transition: transform .35s ease;
}
.fyb-bubble__link .fyb-linkcard:hover .fyb-linkcard__shot img { transform: scale(1.03); }

.fyb-bubble__link .fyb-linkcard__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 10px 12px 11px;
}
/* Nama situs dengan ikon tautan kecil — penanda "ini membuka situs lain". */
.fyb-bubble__link .fyb-linkcard__site {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--teal-700);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fyb-bubble__link .fyb-linkcard__site::before {
	content: "";
	flex: 0 0 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fyb-bubble__link .fyb-linkcard__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
}
/* Keterangannya ikut, tapi dibatasi dua baris dan diredam — cukup untuk
   memberi gambaran isi halamannya tanpa membuat kartunya memanjang. */
.fyb-bubble__link .fyb-linkcard__desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--gray-500);
}
.fyb-bubble__link .fyb-linkcard--flat .fyb-linkcard__shot { display: none; }
.fyb-bubble__link .fyb-linkcard--flat .fyb-linkcard__title { -webkit-line-clamp: 2; }

/* Gelembung milik sendiri (teal): kartunya kaca tipis di atas teal,
   tulisannya putih — tidak ada blok putih terang yang menabrak warna
   gelembungnya. */
.fyb-bubble.is-mine .fyb-bubble__link .fyb-linkcard {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .22);
	box-shadow: none;
}
.fyb-bubble.is-mine .fyb-bubble__link .fyb-linkcard:hover {
	background: rgba(255, 255, 255, .17);
	border-color: rgba(255, 255, 255, .38);
}
.fyb-bubble.is-mine .fyb-bubble__link .fyb-linkcard__shot {
	background: rgba(255, 255, 255, .08);
	border-bottom-color: rgba(255, 255, 255, .16);
}
.fyb-bubble.is-mine .fyb-bubble__link .fyb-linkcard__site { color: rgba(255, 255, 255, .78); }
.fyb-bubble.is-mine .fyb-bubble__link .fyb-linkcard__title { color: var(--white); }
.fyb-bubble.is-mine .fyb-bubble__link .fyb-linkcard__desc { color: rgba(255, 255, 255, .78); }

/* Alamat di dalam gelembung HARUS kelihatan seperti tautan. Tanpa ini
   warnanya ikut warna tulisan biasa dan tidak bergaris bawah — di
   gelembung teal milik sendiri hasilnya terbaca seperti teks mati. */
.fyb-bubble__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	overflow-wrap: anywhere;
}
.fyb-bubble:not(.is-mine) .fyb-bubble__text a { color: var(--teal-700); font-weight: 500; }
.fyb-bubble:not(.is-mine) .fyb-bubble__text a:hover { color: var(--teal-800); }
.fyb-bubble.is-mine .fyb-bubble__text a { color: #fff; }
.fyb-bubble.is-mine .fyb-bubble__text a:hover { text-decoration-thickness: 2px; }
/* Di gelembung berkartu, alamat yang ditulis tetap ukuran biasa — itu
   tulisan orangnya, kartunya yang jadi pelengkap di bawahnya. */
.fyb-bubble__body--link .fyb-bubble__text { font-size: 14.5px; }

/* ---- Pesan yang ditarik ----
   Gelembung kosong bergaris putus-putus dengan tulisan miring yang
   diredam: jelas bukan pesan biasa, tapi tetap di tempatnya supaya alur
   percakapan tidak bolong. Warnanya sama untuk pesan sendiri maupun lawan
   bicara — yang membedakan cuma letaknya (kiri/kanan). */
.fyb-bubble.is-unsent .fyb-bubble__body,
.fyb-bubble.is-unsent.is-mine .fyb-bubble__body {
	background: transparent;
	border: 1px dashed var(--gray-300);
	padding: 8px 13px;
}
.fyb-bubble__unsent {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-style: italic;
	color: var(--gray-500);
}
.fyb-bubble__unsent .fyb-icon { flex-shrink: 0; opacity: .8; }
.fyb-bubble.is-unsent.is-mine .fyb-bubble__time { color: var(--gray-400); }
/* Sementara menunggu jawaban server sesudah "Tarik" ditekan. */
.fyb-bubble.is-unsending .fyb-bubble__body { opacity: .5; transition: opacity .15s ease; }

/* ==========================================================================
   Popup kiriman (seperti Facebook)
   --------------------------------------------------------------------------
   Dibuka dari tombol Komentar di timeline. Kepala tetap di atas, isinya
   menggulir sendiri (kiriman + komentar yang dimuat bertahap), dan kotak
   komentar menempel di dasar. Lapisannya di BAWAH jendela lain (Bagikan,
   konfirmasi, lightbox foto) karena jendela-jendela itu dibuka dari sini.
   ========================================================================== */
.fyb-postmodal {
	position: fixed;
	inset: 0;
	z-index: 115;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
}
.fyb-postmodal__veil { position: absolute; inset: 0; background: rgba(2, 26, 25, .58); }
.fyb-postmodal__box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 680px;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	background: var(--white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}
.fyb-postmodal__head {
	position: relative;
	flex-shrink: 0;
	padding: 15px 56px;
	border-bottom: 1px solid var(--border);
	text-align: center;
}
.fyb-postmodal__head h2 {
	margin: 0;
	font-size: 17px;
	color: var(--teal-800);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fyb-postmodal__head .fyb-modal__x { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); }
.fyb-postmodal__body {
	flex: 1;
	min-height: 160px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.fyb-postmodal__loading { display: flex; justify-content: center; padding: 48px 0; }
.fyb-postmodal__loading .fyb-feedmore { opacity: 1; }
/* Kartu di dalam popup tidak perlu bingkai panel lagi — popupnya bingkainya. */
.fyb-postmodal .fyb-post { border: 0; border-radius: 0; box-shadow: none; margin: 0; }

/* Halaman digembok selama popup terbuka; tab bar HP disembunyikan supaya
   kotak komentar di dasar popup tidak tertutup. */
body:has(.fyb-postmodal:not([hidden])) { overflow: hidden; }
body:has(.fyb-postmodal:not([hidden])) .fyb-tabbar { display: none; }

/* Komentar di popup / halaman kiriman. */
.fyb-postview__comments { padding: 6px 0 4px; border-top: 1px solid var(--border); }
.fyb-postview__comments .fyb-comments { padding-top: 6px; }
.fyb-postview__none { margin: 0; padding: 18px 16px; text-align: center; font-size: 14px; color: var(--gray-500); }
.fyb-postview__none a { color: var(--teal-700); font-weight: 600; }
/* Kotak komentar menempel di dasar wadah yang menggulir — dasar popup,
   atau dasar layar di halaman kiriman. */
.fyb-postview__form {
	position: sticky;
	bottom: 0;
	z-index: 3;
	background: var(--white);
	box-shadow: 0 -6px 14px -10px rgba(15, 23, 42, .25);
}
.fyb-post--single:not(.fyb-postmodal .fyb-post) .fyb-postview__form { border-radius: 0 0 var(--radius) var(--radius); }
@media (max-width: 860px) {
	/* Di halaman kiriman, tab bar HP ada di dasar layar. */
	.fyb-main .fyb-postview__form { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
	.fyb-postmodal .fyb-postview__form { bottom: 0; }
}
/* Komentar yang baru saja dikirim disorot sebentar. */
.fyb-comment.is-new > .fyb-comment__main > .fyb-comment__bubble { animation: fyb-comment-new 1.6s ease; }
@keyframes fyb-comment-new {
	0%, 35% { box-shadow: 0 0 0 2px var(--teal-200); }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* Di HP popupnya memenuhi layar. */
@media (max-width: 640px) {
	.fyb-postmodal { padding: 0; }
	.fyb-postmodal__box { max-width: none; height: 100%; max-height: none; border-radius: 0; }
}

/* Komentar yang sedang dihapus (menunggu jawaban server). */
.fyb-comment.is-deleting { opacity: .45; pointer-events: none; transition: opacity .15s ease; }


/* ==========================================================================
   Pratinjau lampiran — DI DALAM kotak ketik, seperti Messenger
   --------------------------------------------------------------------------
   Gambar: cuma gambar mini 64px bersudut lembut, tanpa nama berkas, dengan
   tombol × putih kecil yang menumpang di pojoknya. Dokumen (khusus pesan):
   keping berisi ikon + nama, karena dokumen tidak punya rupa. Kotak
   ketiknya jadi satu kesatuan: pratinjau di atas, tulisan di bawah.
   ========================================================================== */
.fyb-attachprev {
	flex: 0 0 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px 12px 4px;
	min-width: 0;
}

.fyb-attachprev__item {
	position: relative;
	flex-shrink: 0;
	animation: fyb-attach-in .18s ease-out;
}
@keyframes fyb-attach-in {
	from { opacity: 0; transform: scale(.94); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.fyb-attachprev__item { animation: none; }
}

/* Gambar */
.fyb-attachprev__item.is-image {
	width: 64px;
	height: 64px;
	border-radius: 10px;
	box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .06);
}
.fyb-attachprev__img,
.fyb-commentbox .fyb-attachprev__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

/* Dokumen */
.fyb-attachprev__item.is-file {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 260px;
	min-width: 0;
	padding: 8px 14px 8px 8px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--white);
}
.fyb-attachprev__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--teal-50);
	color: var(--teal-700);
}
.fyb-attachprev__name {
	min-width: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Tombol × — menumpang di pojok kanan atas. */
.fyb-attachprev__x {
	position: absolute;
	top: -7px;
	right: -7px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--white);
	color: var(--gray-700);
	box-shadow: 0 1px 4px rgba(15, 23, 42, .22), 0 0 0 1px rgba(15, 23, 42, .06);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.fyb-attachprev__x:hover { background: var(--surface); color: var(--ink); transform: scale(1.06); }
.fyb-attachprev__x:focus-visible { outline: 2px solid var(--teal-400); outline-offset: 1px; }

/* Kotak ketik komentar: pratinjaunya menempati baris sendiri di dalamnya. */
.fyb-commentbox__field { flex-wrap: wrap; }
.fyb-commentbox__field:has(.fyb-attachprev:not([hidden])) { border-radius: 16px; }

/* Kotak ketik pesan: bingkainya pindah dari textarea ke pembungkusnya,
   supaya pratinjau dan tulisannya ada di dalam bingkai yang sama. */
.fyb-chat__field {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: 22px;
	background: var(--surface);
	transition: border-color .15s ease, background .15s ease;
}
.fyb-chat__field:focus-within { background: var(--white); border-color: var(--teal-400); }
.fyb-chat__field:has(.fyb-attachprev:not([hidden])) { border-radius: 18px; }
.fyb-chat__reply .fyb-chat__field textarea[data-chatinput],
.fyb-chat__reply .fyb-chat__field textarea[data-chatinput]:focus {
	flex: none;
	width: 100%;
	height: 42px;
	border: 0;
	border-radius: 0;
	background: transparent;
}
/* Foto profil & tombol Kirim sejajar dengan BARIS TULISAN (bawah), bukan
   di tengah kotak yang meninggi karena pratinjau atau tulisan panjang. */
.fyb-commentbox > .fyb-avatar,
.fyb-commentbox > button[type="submit"] { align-self: flex-end; }
.fyb-commentbox > .fyb-avatar { margin-bottom: 4px; }
.fyb-commentbox > button[type="submit"] { margin-bottom: 2px; }

/* ==========================================================================
   Lembar "Bagikan" — seperti "Kirim ke" di Instagram
   --------------------------------------------------------------------------
   Desktop: kartu di tengah. HP: lembar yang naik dari bawah, dengan
   pegangan kecil di atasnya. Isinya tiga baris yang digeser ke samping
   (teman, tujuan, grup); bilah bawah berisi keterangan + tombol kirim
   baru muncul setelah sesuatu dipilih.
   ========================================================================== */
.fyb-sharesheet__box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 520px;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	background: var(--white);
	border-radius: 22px;
	box-shadow: 0 24px 60px -12px rgba(2, 26, 25, .35), 0 2px 8px rgba(2, 26, 25, .08);
	overflow: hidden;
	animation: fyb-sheet-in .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes fyb-sheet-in {
	from { opacity: 0; transform: translateY(14px) scale(.98); }
	to   { opacity: 1; transform: none; }
}
.fyb-sharesheet__grip { display: none; }

.fyb-sharesheet__head {
	position: relative;
	flex-shrink: 0;
	padding: 18px 60px 12px;
	text-align: center;
}
.fyb-sharesheet__head h2 {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--ink);
}
.fyb-sharesheet__x {
	position: absolute;
	top: 12px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--surface);
	color: var(--gray-700);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.fyb-sharesheet__x:hover { background: var(--teal-50); color: var(--ink); }

.fyb-sharesheet__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.fyb-sharesheet__sec { padding: 6px 0 14px; }
.fyb-sharesheet__sec + .fyb-sharesheet__sec { border-top: 1px solid var(--border); padding-top: 14px; }
.fyb-sharesheet__title {
	margin: 0 20px 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--gray-500);
}

/* Kolom cari teman */
.fyb-sharesheet__search {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 20px 12px;
	padding: 0 14px;
	height: 40px;
	border-radius: 12px;
	background: var(--surface);
	color: var(--gray-500);
	transition: box-shadow .15s ease, background .15s ease;
}
.fyb-sharesheet__search:focus-within { background: var(--white); box-shadow: 0 0 0 1.5px var(--teal-400); }
.fyb-sharesheet__search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 14px;
	color: var(--ink);
	outline: none;
}

/* Deretan yang digeser ke samping */
.fyb-sharesheet__row {
	display: flex;
	gap: 4px;
	padding: 4px 14px 2px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.fyb-sharesheet__row::-webkit-scrollbar { display: none; }

.fyb-sharesheet__item {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 80px;
	padding: 4px 2px 2px;
	border: 0;
	border-radius: 14px;
	background: transparent;
	color: var(--ink);
	font: inherit;
	cursor: pointer;
	scroll-snap-align: start;
	-webkit-tap-highlight-color: transparent;
}
.fyb-sharesheet__item[hidden] { display: none; }
.fyb-sharesheet__item:focus-visible { outline: 2px solid var(--teal-400); outline-offset: 2px; }
.fyb-sharesheet__item:disabled { cursor: not-allowed; opacity: .38; }
.fyb-sharesheet__label {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 100%;
	font-size: 12.5px;
	line-height: 1.3;
	text-align: center;
	color: var(--gray-700);
	overflow-wrap: anywhere;
}

/* Muka tiap pilihan: foto teman (bulat), logo tujuan (bulat berwarna),
   ikon grup (persegi lembut). Semua 60px, membesar sedikit saat disorot. */
.fyb-sharesheet__pic,
.fyb-sharesheet__app,
.fyb-sharesheet__group {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	flex-shrink: 0;
	transition: transform .16s ease, box-shadow .16s ease;
}
.fyb-sharesheet__item:hover .fyb-sharesheet__pic,
.fyb-sharesheet__item:hover .fyb-sharesheet__app,
.fyb-sharesheet__item:hover .fyb-sharesheet__group { transform: translateY(-2px); }
.fyb-sharesheet__item:disabled:hover > span { transform: none; }
.fyb-sharesheet__item:active .fyb-sharesheet__pic,
.fyb-sharesheet__item:active .fyb-sharesheet__app,
.fyb-sharesheet__item:active .fyb-sharesheet__group { transform: scale(.94); }

.fyb-sharesheet__pic { border-radius: 50%; }
.fyb-sharesheet__pic .fyb-sharesheet__img,
.fyb-sharesheet__pic img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(15, 23, 42, .06);
}

/* Semua tujuan memakai warna tema — tidak ada pelangi warna merek. Diam:
   lingkaran teal muda dengan ikon teal tua; disorot: berubah teal penuh
   dengan ikon putih. */
.fyb-sharesheet__app {
	border-radius: 50%;
	background: var(--teal-50);
	color: var(--teal-700);
	box-shadow: inset 0 0 0 1px rgba(6, 104, 103, .12);
	transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.fyb-sharesheet__item:hover:not(:disabled) .fyb-sharesheet__app,
.fyb-sharesheet__item:focus-visible .fyb-sharesheet__app {
	background: var(--teal-600);
	color: #fff;
	box-shadow: 0 6px 14px -6px rgba(6, 104, 103, .55);
}
.fyb-sharesheet__item.is-picked .fyb-sharesheet__app,
.fyb-sharesheet__item.is-done .fyb-sharesheet__app { background: var(--teal-600); color: #fff; }

/* Grup: lingkaran juga, sama seperti teman dan tujuan. Tanpa foto grup,
   huruf awalnya di atas teal muda. */
.fyb-sharesheet__group {
	border-radius: 50%;
	overflow: visible;
	background: var(--teal-50);
	box-shadow: inset 0 0 0 1px rgba(6, 104, 103, .12);
}
.fyb-sharesheet__group img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.fyb-sharesheet__initial { font-size: 22px; font-weight: 700; color: var(--teal-700); }

/* Tanda terpilih: cincin teal + lencana centang di pojok kanan bawah. */
.fyb-sharesheet__check {
	position: absolute;
	right: -2px;
	bottom: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--teal-600);
	color: #fff;
	box-shadow: 0 0 0 2.5px var(--white);
	opacity: 0;
	transform: scale(.5);
	transition: opacity .14s ease, transform .18s cubic-bezier(.3, 1.6, .5, 1);
}
.fyb-sharesheet__check .fyb-icon { stroke-width: 3; }
.fyb-sharesheet__item.is-picked .fyb-sharesheet__check { opacity: 1; transform: scale(1); }
.fyb-sharesheet__item.is-picked .fyb-sharesheet__pic img,
.fyb-sharesheet__item.is-picked .fyb-sharesheet__app,
.fyb-sharesheet__item.is-picked .fyb-sharesheet__group { box-shadow: 0 0 0 2.5px var(--white), 0 0 0 4.5px var(--teal-500, #0f9b98); }
.fyb-sharesheet__item.is-picked .fyb-sharesheet__label { color: var(--teal-700); font-weight: 600; }

.fyb-sharesheet__empty,
.fyb-sharesheet__note {
	margin: 2px 20px 4px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--gray-500);
}
.fyb-sharesheet__note {
	margin: 4px 20px 16px;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--surface);
}

/* Bilah bawah */
.fyb-sharesheet__foot {
	flex-shrink: 0;
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 12px 16px 16px;
	border-top: 1px solid var(--border);
	background: var(--white);
	animation: fyb-foot-in .2s ease-out;
}
.fyb-sharesheet__foot[hidden] { display: none; }
@keyframes fyb-foot-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}
.fyb-sharesheet__foot textarea {
	width: 100%;
	min-height: 44px;
	max-height: 120px;
	padding: 11px 14px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
	font: inherit;
	font-size: 14px;
	line-height: 1.45;
	color: var(--ink);
	resize: none;
}
.fyb-sharesheet__foot textarea:focus { outline: none; background: var(--white); border-color: var(--teal-400); }
.fyb-sharesheet__foot .fyb-btn { height: 46px; border-radius: 12px; font-size: 15px; }
.fyb-sharesheet__foot.is-done .fyb-btn { background: #12936a; border-color: #12936a; opacity: 1; }
.fyb-sharesheet__status { margin: 0; font-size: 13px; color: var(--danger); text-align: center; }

@media (prefers-reduced-motion: reduce) {
	.fyb-sharesheet__box,
	.fyb-sharesheet__foot { animation: none; }
}

/* HP: lembar naik dari bawah */
@media (max-width: 640px) {
	.fyb-sharesheet.fyb-modal { align-items: flex-end; padding: 0; }
	.fyb-sharesheet__box {
		max-width: none;
		max-height: 88vh;
		max-height: 88dvh;
		border-radius: 22px 22px 0 0;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		animation-name: fyb-sheet-up;
	}
	@keyframes fyb-sheet-up {
		from { transform: translateY(100%); }
		to   { transform: none; }
	}
	.fyb-sharesheet__grip {
		display: block;
		width: 38px;
		height: 4px;
		margin: 8px auto 0;
		border-radius: 999px;
		background: var(--gray-300);
	}
	.fyb-sharesheet__head { padding-top: 10px; }
	.fyb-sharesheet__x { top: 10px; }
	.fyb-sharesheet__item { width: 76px; }
}

/* Logo di dalam lingkaran tujuan: SVG sebagai blok (bukan inline, yang
   ikut turun mengikuti garis dasar teks), lalu ukurannya disamakan secara
   KASATMATA — tiap logo punya ruang kosong bawaan yang berbeda, jadi
   ukuran kotaknya sengaja tidak seragam. */
.fyb-sharesheet__app svg { display: block; width: 24px; height: 24px; flex-shrink: 0; }
[data-share-out="whatsapp"] .fyb-sharesheet__app svg { width: 21px; height: 21px; }
[data-share-out="telegram"] .fyb-sharesheet__app svg { width: 22px; height: 22px; }
[data-share-out="facebook"] .fyb-sharesheet__app svg { width: 27px; height: 27px; }
[data-share-out="x"] .fyb-sharesheet__app svg { width: 22px; height: 22px; }
.fyb-sharesheet__check svg { display: block; }

/* ==========================================================================
   Masuk / daftar lewat Google & Facebook
   Tombol putih bergaris tipis dengan logo resmi penyedianya (aturan merek
   Google & Facebook mewajibkan logo aslinya), lalu pemisah "atau".
   ========================================================================== */
.fyb-sociallogin { display: grid; gap: 10px; margin: 4px 0 0; }
.fyb-sociallogin__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 46px;
	padding: 0 18px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--white);
	color: var(--ink);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.fyb-sociallogin__btn svg { display: block; flex-shrink: 0; }
.fyb-sociallogin__btn:hover {
	background: var(--surface);
	border-color: var(--teal-200);
	box-shadow: 0 2px 8px -4px rgba(15, 23, 42, .18);
	color: var(--ink);
}
.fyb-sociallogin__btn:active { transform: scale(.99); }
.fyb-sociallogin__btn:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }

.fyb-sociallogin__or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0 14px;
	font-size: 12.5px;
	color: var(--gray-500);
	text-transform: lowercase;
}
.fyb-sociallogin__or::before,
.fyb-sociallogin__or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ==========================================================================
   Daftar: dua langkah
   --------------------------------------------------------------------------
   Langkah 1 (pilihan) dan langkah 2 (formulir) sama-sama panel grid yang
   tingginya dianimasikan lewat grid-template-rows 1fr <-> 0fr — tinggi
   aslinya tidak perlu diukur. Yang tertutup juga dibuat tak terlihat &
   tak terjangkau (visibility + inert dari JS), supaya Tab tidak nyasar ke
   kolom yang sedang tersembunyi.
   ========================================================================== */
.fyb-sociallogin__btn--email { width: 100%; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.fyb-sociallogin__btn--email svg { color: var(--teal-700); }

.fyb-regflow__pane {
	display: grid;
	grid-template-rows: 1fr;
	opacity: 1;
	visibility: visible;
	transition:
		grid-template-rows .45s cubic-bezier(.2, .8, .2, 1),
		opacity .3s ease,
		visibility 0s linear 0s;
}
/* Ruang 4px di tepi supaya garis fokus & bayangan tombol tidak terpotong
   oleh overflow: hidden. */
.fyb-regflow__inner { min-height: 0; overflow: hidden; margin: -4px; padding: 4px; }

.fyb-regflow__form { grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition-delay: 0s, 0s, .45s; }
.fyb-regflow.is-email .fyb-regflow__choose { grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition-delay: 0s, 0s, .45s; }
.fyb-regflow.is-email .fyb-regflow__form { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: .08s, .12s, 0s; }

/* Isi formulir masuk berurutan dari bawah, sedikit-sedikit. */
.fyb-regflow.is-email .fyb-regflow__form .fyb-regflow__back,
.fyb-regflow.is-email .fyb-regflow__form .fyb-field,
.fyb-regflow.is-email .fyb-regflow__form .fyb-btn { animation: fyb-reg-in .45s cubic-bezier(.2, .8, .2, 1) both; }
.fyb-regflow.is-email .fyb-regflow__form .fyb-field:nth-of-type(1) { animation-delay: .10s; }
.fyb-regflow.is-email .fyb-regflow__form .fyb-field:nth-of-type(2) { animation-delay: .15s; }
.fyb-regflow.is-email .fyb-regflow__form .fyb-field:nth-of-type(3) { animation-delay: .20s; }
.fyb-regflow.is-email .fyb-regflow__form .fyb-field:nth-of-type(4) { animation-delay: .25s; }
.fyb-regflow.is-email .fyb-regflow__form .fyb-field:nth-of-type(5) { animation-delay: .30s; }
.fyb-regflow.is-email .fyb-regflow__form .fyb-field:nth-of-type(6) { animation-delay: .35s; }
.fyb-regflow.is-email .fyb-regflow__form .fyb-btn { animation-delay: .40s; }
@keyframes fyb-reg-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
/* Dibuka langsung dari server (isian dikembalikan karena gagal): tanpa
   animasi masuk, formulirnya sudah di tempat. */
.fyb-regflow.is-instant .fyb-regflow__pane,
.fyb-regflow.is-instant .fyb-regflow__form * { transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
	.fyb-regflow__pane { transition: none; }
	.fyb-regflow.is-email .fyb-regflow__form * { animation: none !important; }
}

.fyb-regflow__back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0 0 14px -6px;
	padding: 6px 10px 6px 6px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--gray-500);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.fyb-regflow__back:hover { background: var(--teal-50); color: var(--teal-700); }
.fyb-regflow__back:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 1px; }
/* Baris "Ingat saya · Lupa sandi?" di formulir masuk ikut masuk berurutan. */
.fyb-regflow.is-email .fyb-regflow__form .fyb-auth__row { animation: fyb-reg-in .45s cubic-bezier(.2, .8, .2, 1) .2s both; }

/* ==========================================================================
   Popup Pemberitahuan + mode Pilih
   Popupnya memakai bingkai yang sama dengan popup kiriman (.fyb-postmodal).
   ========================================================================== */
.fyb-notifmodal .fyb-postmodal__box { max-width: 560px; }
.fyb-notifpanel { display: flex; flex-direction: column; min-height: 100%; }

.fyb-notifpanel__bar {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	padding: 8px 16px;
	background: var(--white);
	border-bottom: 1px solid var(--border);
}
.fyb-notifpanel__count {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--teal-50);
	color: var(--teal-700);
	font-size: 12.5px;
	font-weight: 600;
}
.fyb-notifpanel__tools { display: flex; gap: 4px; margin-left: auto; }
.fyb-notifpanel__link {
	padding: 6px 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--teal-700);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease;
}
.fyb-notifpanel__link:hover { background: var(--teal-50); }
.fyb-notifpanel__link:disabled { opacity: .5; cursor: default; }
.fyb-notifpanel .fyb-empty { padding: 48px 16px; }
.fyb-notifpanel .fyb-notiflist { flex: 1; align-content: start; }

/* Kotak centang: tersembunyi, muncul (melebar dari kiri) di mode Pilih. */
.fyb-notif__pick {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	width: 0;
	height: 40px;
	margin-right: -12px; /* menutup celah flex selagi lebarnya 0 */
	overflow: hidden;
	opacity: 0;
	cursor: pointer;
	transition: width .2s ease, margin .2s ease, opacity .15s ease;
}
.fyb-notif__pick input,
.fyb-notifpanel__all input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fyb-notif__box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border: 2px solid var(--gray-300);
	border-radius: 7px;
	background: var(--white);
	color: transparent;
	transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.fyb-notif__box .fyb-icon { stroke-width: 3.2; }
input:checked + .fyb-notif__box { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }
input:focus-visible + .fyb-notif__box { box-shadow: 0 0 0 3px rgba(13, 132, 130, .25); }

.fyb-notifpanel.is-selecting .fyb-notif__pick { width: 26px; margin-right: 0; opacity: 1; }
.fyb-notifpanel.is-selecting .fyb-notif { cursor: pointer; user-select: none; }
.fyb-notifpanel.is-selecting .fyb-notif__tools { display: none; }
.fyb-notifpanel.is-selecting .fyb-notif a { pointer-events: none; }
.fyb-notifpanel.is-selecting [data-notif-select],
.fyb-notifpanel.is-selecting [data-notif-readall] { display: none; }
.fyb-notif.is-picked { background: var(--teal-50); }
.fyb-notif.is-leaving { opacity: 0; transform: translateX(16px); transition: opacity .2s ease, transform .2s ease; }

/* Bilah bawah mode Pilih — menempel di dasar popup. */
.fyb-notifpanel__foot {
	position: sticky;
	bottom: 0;
	z-index: 2;
	display: none;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 16px;
	background: var(--white);
	border-top: 1px solid var(--border);
	box-shadow: 0 -6px 14px -10px rgba(15, 23, 42, .25);
}
.fyb-notifpanel.is-selecting .fyb-notifpanel__foot { display: flex; animation: fyb-foot-in .2s ease-out; }
.fyb-notifpanel__all { position: relative; display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--gray-700); cursor: pointer; }
.fyb-notifpanel__picked { flex: 1; font-size: 13px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-notifpanel__foot .fyb-btn { flex-shrink: 0; }
.fyb-notifpanel__foot .fyb-btn:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 480px) {
	.fyb-notifpanel__picked { display: none; }
	.fyb-notifpanel__foot { justify-content: space-between; }
}

/* ==========================================================================
   Navigasi tanpa muat ulang: garis kemajuan + isi lama dipudarkan
   Garisnya merambat pelan sampai ~80% selama menunggu, lalu melesat ke
   100% dan memudar begitu halaman barunya terpasang.
   ========================================================================== */
.fyb-pjaxbar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 400;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--teal-400), var(--teal-600));
	box-shadow: 0 0 10px rgba(13, 132, 130, .45);
	opacity: 0;
	pointer-events: none;
}
.fyb-pjaxbar.is-loading { opacity: 1; animation: fyb-pjax-jalan 6s cubic-bezier(.1, .7, .2, 1) forwards; }
.fyb-pjaxbar.is-done {
	width: 100% !important;
	opacity: 0;
	animation: none;
	transition: width .2s ease, opacity .3s ease .15s;
}
@keyframes fyb-pjax-jalan {
	0%   { width: 0; }
	20%  { width: 35%; }
	60%  { width: 68%; }
	100% { width: 82%; }
}

#fyb-content.is-pjax-loading > *:not(.fyb-rail) {
	opacity: .45;
	pointer-events: none;
	transition: opacity .18s ease .08s;
}
/* Isi baru masuk dengan sedikit gerakan, bukan muncul mendadak. */
#fyb-content > .fyb-main { animation: fyb-pjax-masuk .28s ease-out; }
@keyframes fyb-pjax-masuk {
	from { opacity: .6; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.fyb-pjaxbar.is-loading { animation: none; width: 70%; }
	#fyb-content > .fyb-main { animation: none; }
}

/* ==========================================================================
   Grup: wizard "Buat grup", kartu pilihan, halaman Pengaturan grup
   ========================================================================== */

/* ---- Kartu pilihan (radio) — dipakai wizard & Pengaturan ---- */
.fyb-choices { display: grid; gap: 10px; }
.fyb-choices--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fyb-choice { position: relative; display: block; cursor: pointer; }
.fyb-choice input { position: absolute; opacity: 0; pointer-events: none; }
.fyb-choice__card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	height: 100%;
	padding: 14px 16px;
	border: 1.5px solid var(--border);
	border-radius: 14px;
	background: var(--white);
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.fyb-choice:hover .fyb-choice__card { border-color: var(--teal-200); }
.fyb-choice input:checked + .fyb-choice__card {
	border-color: var(--teal-600);
	background: var(--teal-50);
	box-shadow: 0 0 0 3px rgba(13, 132, 130, .12);
}
.fyb-choice input:focus-visible + .fyb-choice__card { outline: 2px solid var(--teal-500); outline-offset: 2px; }
.fyb-choice__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--surface);
	color: var(--teal-700);
	transition: background .15s ease, color .15s ease;
}
.fyb-choice input:checked + .fyb-choice__card .fyb-choice__icon { background: var(--teal-600); color: #fff; }
.fyb-choice__text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.fyb-choice__text strong { font-size: 14.5px; color: var(--ink); }
.fyb-choice__text small { font-size: 12.5px; line-height: 1.45; color: var(--gray-500); }
.fyb-choice__dot {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border: 2px solid var(--gray-300);
	border-radius: 50%;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fyb-choice input:checked + .fyb-choice__card .fyb-choice__dot { border-color: var(--teal-600); box-shadow: inset 0 0 0 4px var(--white), inset 0 0 0 10px var(--teal-600); }
.fyb-choices--compact .fyb-choice__card { flex-direction: column; gap: 6px; padding: 12px 14px; }
.fyb-choices--compact .fyb-choice__dot { position: absolute; top: 12px; right: 12px; margin: 0; width: 18px; height: 18px; }
.fyb-choices--compact .fyb-choice__text { padding-right: 22px; }

/* ---- Wizard ---- */
.fyb-gwiz { display: grid; gap: 16px; }
.fyb-gwiz__hero {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 24px;
	background: linear-gradient(120deg, var(--teal-600), var(--teal-800, #034140));
	color: #fff;
	border: 0;
	overflow: hidden;
	position: relative;
}
.fyb-gwiz__hero::after {
	content: "";
	position: absolute;
	right: -40px;
	top: -60px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
}
.fyb-gwiz__heroicon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .16);
}
.fyb-gwiz__hero h1 { margin: 0 0 4px; font-size: 22px; color: #fff; }
.fyb-gwiz__hero p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .85); }

/* Tahapan: tiga kartu kecil yang bisa diklik. */
.fyb-gwiz__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.fyb-gwiz__step {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--border);
	border-radius: 14px;
	background: var(--white);
	color: var(--gray-500);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.fyb-gwiz__step:hover { border-color: var(--teal-200); }
.fyb-gwiz__step.is-on { border-color: var(--teal-600); background: var(--teal-50); color: var(--teal-800, #034140); }
.fyb-gwiz__num {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--surface);
	font-weight: 700;
	font-size: 13.5px;
	color: var(--gray-500);
}
.fyb-gwiz__num .fyb-icon { display: none; }
.fyb-gwiz__step.is-on .fyb-gwiz__num { background: var(--teal-600); color: #fff; }
.fyb-gwiz__step.is-done .fyb-gwiz__num { background: var(--teal-100, #cfe9e8); color: var(--teal-700); }
.fyb-gwiz__step.is-done .fyb-gwiz__num span { display: none; }
.fyb-gwiz__step.is-done .fyb-gwiz__num .fyb-icon { display: block; stroke-width: 3; }
.fyb-gwiz__steptext { display: grid; min-width: 0; }
.fyb-gwiz__steptext strong { font-size: 14px; color: inherit; }
.fyb-gwiz__steptext small { font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fyb-gwiz__layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.fyb-gwiz__form { display: flex; flex-direction: column; min-height: 420px; padding: 0; }
.fyb-gwiz__pane { flex: 1; padding: 24px 24px 8px; animation: fyb-gwiz-in .28s ease-out; }
@keyframes fyb-gwiz-in {
	from { opacity: 0; transform: translateX(10px); }
	to   { opacity: 1; transform: none; }
}
.fyb-gwiz__pane h2 { margin: 0 0 4px; font-size: 19px; color: var(--teal-800, #034140); outline: none; }
.fyb-gwiz__lead { margin: 0 0 20px; font-size: 14px; color: var(--gray-500); }
.fyb-gwiz__sub { margin: 22px 0 10px; font-size: 14px; color: var(--ink); }
.fyb-req { color: var(--danger); }
.fyb-opt { font-weight: 400; color: var(--gray-400); }
.fyb-field__foot { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0 0; font-size: 12px; }
.fyb-field__count { margin-left: auto; color: var(--gray-400); }
.fyb-field__err { color: var(--danger); font-weight: 600; }
.fyb-field.is-error .fyb-input { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(185, 28, 28, .12); }
.fyb-field.is-error label { color: var(--danger); }

/* Undang teman */
.fyb-gwiz__search {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 14px;
	margin-bottom: 12px;
	border-radius: 12px;
	background: var(--surface);
	color: var(--gray-500);
}
.fyb-gwiz__search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); outline: none; }
.fyb-gwiz__picked { font-size: 12.5px; font-weight: 600; color: var(--teal-700); white-space: nowrap; }
.fyb-gwiz__friends { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; max-height: 320px; overflow-y: auto; padding: 2px; }
.fyb-gwiz__friend {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1.5px solid var(--border);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.fyb-gwiz__friend[hidden] { display: none; }
.fyb-gwiz__friend input { position: absolute; opacity: 0; pointer-events: none; }
.fyb-gwiz__friend img { width: 36px; height: 36px; border-radius: 50%; }
.fyb-gwiz__friend > span:not(.fyb-gwiz__tick) { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-gwiz__tick {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 2px solid var(--gray-300);
	border-radius: 6px;
	color: transparent;
}
.fyb-gwiz__tick .fyb-icon { stroke-width: 3.2; }
.fyb-gwiz__friend:has(input:checked) { border-color: var(--teal-600); background: var(--teal-50); }
.fyb-gwiz__friend:has(input:checked) .fyb-gwiz__tick { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }
.fyb-gwiz__none { margin: 8px 0 0; font-size: 13px; color: var(--gray-500); }
.fyb-gwiz__empty { display: grid; justify-items: center; gap: 8px; padding: 28px 16px; border: 1.5px dashed var(--border); border-radius: 14px; text-align: center; color: var(--gray-400); }
.fyb-gwiz__empty p { margin: 0; max-width: 360px; font-size: 13.5px; color: var(--gray-500); }

/* Kaki: Kembali · Langkah n dari 3 · Lanjut / Buat grup */
.fyb-gwiz__foot {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 24px;
	border-top: 1px solid var(--border);
}
.fyb-gwiz__foot .fyb-btn { display: inline-flex; align-items: center; gap: 8px; }
.fyb-gwiz__foot .fyb-btn[hidden] { display: none; }
.fyb-gwiz__pos { flex: 1; text-align: center; font-size: 13px; color: var(--gray-500); }
[data-gwiz-prev][hidden] + .fyb-gwiz__pos { text-align: left; }
.fyb-gwiz__next {
	min-width: 150px;
	height: 46px;
	justify-content: center;
	padding: 0 22px;
	border-radius: 12px;
	font-size: 15px;
	box-shadow: 0 6px 16px -8px rgba(6, 104, 103, .7);
	transition: transform .12s ease, box-shadow .15s ease;
}
.fyb-gwiz__next:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(6, 104, 103, .8); }
.fyb-gwiz__next .fyb-icon { transition: transform .15s ease; }
[data-gwiz-next]:hover .fyb-icon { transform: translateX(3px); }
.fyb-gwiz__create.is-busy { opacity: .7; pointer-events: none; }

/* Pratinjau kartu grup */
.fyb-gwiz__preview { position: sticky; top: 84px; padding: 0; overflow: hidden; }
.fyb-gwiz__pvlabel { position: absolute; top: 10px; left: 12px; z-index: 1; margin: 0; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .85); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--teal-700); }
.fyb-gwiz__pvcover { height: 86px; background: linear-gradient(120deg, var(--teal-200), var(--teal-500, #0d8482)); }
.fyb-gwiz__pvbody { display: grid; gap: 4px; padding: 0 16px 18px; }
.fyb-gwiz__pvavatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-top: -32px;
	margin-bottom: 6px;
	border: 4px solid var(--white);
	border-radius: 50%;
	background: var(--teal-50);
	font-size: 26px;
	font-weight: 700;
	color: var(--teal-700);
}
.fyb-gwiz__pvname { font-size: 16px; color: var(--ink); overflow-wrap: anywhere; }
.fyb-gwiz__pvmeta { font-size: 12.5px; color: var(--gray-500); }
.fyb-gwiz__pvdesc { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--gray-600); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.fyb-gwiz__pvname.is-empty, .fyb-gwiz__pvdesc.is-empty { color: var(--gray-400); font-style: italic; font-weight: 500; }

@media (max-width: 900px) {
	.fyb-gwiz__layout { grid-template-columns: minmax(0, 1fr); }
	.fyb-gwiz__preview { display: none; }
}
@media (max-width: 640px) {
	.fyb-gwiz__steps { gap: 6px; }
	.fyb-gwiz__step { flex-direction: column; gap: 6px; padding: 10px 6px; text-align: center; }
	.fyb-gwiz__steptext small { display: none; }
	.fyb-choices--compact { grid-template-columns: minmax(0, 1fr); }
	.fyb-gwiz__pane { padding: 20px 16px 8px; }
	.fyb-gwiz__foot { padding: 14px 16px; }
	.fyb-gwiz__pos { display: none; }
	.fyb-gwiz__foot .fyb-btn { flex: 1; }
	.fyb-gwiz__next { min-width: 0; }
	.fyb-gwiz__hero { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.fyb-gwiz__pane { animation: none; }
}

/* ---- Kelola grup ---- */
.fyb-gmanage-wrap #subnav,
.fyb-gmanage-wrap .bp-navs.group-subnav { display: none !important; } /* menu bawaan BP diganti menu sendiri */
.fyb-gmanage__nav {
	display: flex;
	gap: 6px;
	margin-bottom: 14px;
	padding: 6px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--white);
	overflow-x: auto;
	scrollbar-width: none;
}
.fyb-gmanage__navitem {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	border-radius: 10px;
	color: var(--gray-600);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.fyb-gmanage__navitem:hover { background: var(--surface); color: var(--ink); }
.fyb-gmanage__navitem.is-on { background: var(--teal-600); color: #fff; }
.fyb-gmanage__navitem.is-danger { margin-left: auto; color: var(--danger); }
.fyb-gmanage__navitem.is-danger:hover { background: var(--danger-soft, #fdecec); }
.fyb-gmanage__navitem.is-danger.is-on { background: var(--danger); color: #fff; }

.fyb-gmanage { display: grid; gap: 14px; }
.fyb-gmanage__card { padding: 20px 22px; }
.fyb-gmanage__cardhead { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.fyb-gmanage__cardhead h2 { margin: 0 0 2px; font-size: 16.5px; color: var(--ink); }
.fyb-gmanage__cardhead p { margin: 0; font-size: 13px; color: var(--gray-500); }
.fyb-gmanage__cardhead > div { flex: 1; min-width: 0; }
.fyb-gmanage__cardicon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--teal-50);
	color: var(--teal-700);
}
.fyb-gmanage__looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fyb-gmanage__look {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1.5px solid var(--border);
	border-radius: 14px;
	background: var(--white);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.fyb-gmanage__look:hover { border-color: var(--teal-300, var(--teal-200)); background: var(--teal-50); }
.fyb-gmanage__look img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.fyb-gmanage__lookicon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--surface); color: var(--teal-700); }
.fyb-gmanage__look span:last-child { display: grid; }
.fyb-gmanage__look strong { font-size: 14px; color: var(--ink); }
.fyb-gmanage__look small { font-size: 12.5px; color: var(--gray-500); }

/* Bilah simpan menempel di dasar layar selama menggulir. */
.fyb-gmanage__save {
	position: sticky;
	bottom: 12px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	padding: 12px 14px 12px 20px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(6px);
	box-shadow: 0 10px 30px -14px rgba(15, 23, 42, .35);
}
.fyb-gmanage__save .fyb-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 12px; }
.fyb-gmanage__dirty { margin-right: auto; font-size: 13px; font-weight: 600; color: var(--warning, #b8860b); }
.fyb-gmanage.is-dirty .fyb-gmanage__save { border-color: var(--teal-200); }
@media (max-width: 860px) {
	.fyb-gmanage__save { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

.fyb-gmanage__danger { border-color: rgba(185, 28, 28, .25); }
.fyb-gmanage__danger .fyb-gmanage__cardhead { margin: 0; align-items: center; }
.fyb-gmanage__danger .fyb-gmanage__cardicon { background: var(--danger-soft, #fdecec); color: var(--danger); }
.fyb-gmanage__dangerbtn { flex-shrink: 0; background: var(--white); color: var(--danger); border: 1.5px solid rgba(185, 28, 28, .35); }
.fyb-gmanage__dangerbtn:hover { background: var(--danger); color: #fff; }

@media (max-width: 640px) {
	.fyb-gmanage__card { padding: 16px; }
	.fyb-gmanage__looks { grid-template-columns: minmax(0, 1fr); }
	.fyb-gmanage__danger .fyb-gmanage__cardhead { flex-wrap: wrap; }
}

/* Catatan di beranda grup untuk anggota yang tidak boleh menulis. */
.fyb-gnote { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: 14px; color: var(--gray-600); }
.fyb-gnote .fyb-icon { flex-shrink: 0; color: var(--teal-700); }

/* ==========================================================================
   Menu akun — "nama saya" di menu kiri & ujung kanan tab bar HP
   ========================================================================== */

/* Item paling atas menu kiri: foto + nama tampilan + panah. */
.fyb-rail__me {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	margin-bottom: 6px;
	padding: 8px 10px 8px 8px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--white);
	color: var(--ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.fyb-rail__me:hover { border-color: var(--teal-200); box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .18); }
.fyb-rail__me.is-open,
.fyb-rail__me.is-active { border-color: var(--teal-400); background: var(--teal-50); }
.fyb-rail__me img { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--teal-200); }
.fyb-rail__mename { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-rail__me .fyb-icon { flex-shrink: 0; color: var(--gray-400); transition: transform .2s ease; }
.fyb-rail__me.is-open .fyb-icon { transform: rotate(180deg); color: var(--teal-700); }
.fyb-rail__me:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }

/* Ujung kanan tab bar HP: foto kecil + nama (dipotong). */
.fyb-tabbar__me { display: none; }
@media (max-width: 860px) {
	.fyb-tabbar__me {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		min-width: 0;
		padding: 7px 4px 6px;
		border: 0;
		background: transparent;
		font: inherit;
		font-size: 10.5px;
		font-weight: 600;
		color: var(--gray-500);
		cursor: pointer;
	}
	.fyb-tabbar__me img { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--white), 0 0 0 3px transparent; transition: box-shadow .15s ease; }
	.fyb-tabbar__me span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.fyb-tabbar__me.is-open,
	.fyb-tabbar__me.is-active { color: var(--teal-600); }
	.fyb-tabbar__me.is-open img,
	.fyb-tabbar__me.is-active img { box-shadow: 0 0 0 1.5px var(--white), 0 0 0 3px var(--teal-500); }
}

/* Panel menu akun */
.fyb-account { position: fixed; inset: 0; z-index: 130; }
.fyb-account__veil { position: absolute; inset: 0; background: transparent; }
.fyb-account__card {
	position: fixed;
	width: 300px;
	padding: 8px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 18px;
	box-shadow: 0 24px 50px -16px rgba(2, 26, 25, .35), 0 2px 8px rgba(2, 26, 25, .08);
	animation: fyb-account-in .16s ease-out;
}
@keyframes fyb-account-in {
	from { opacity: 0; transform: translateY(-6px) scale(.98); }
	to   { opacity: 1; transform: none; }
}
.fyb-account__head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 6px 10px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--border);
}
.fyb-account__who {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
	padding: 6px;
	border-radius: 12px;
	color: var(--ink);
	text-decoration: none;
	transition: background .15s ease;
}
.fyb-account__who:hover { background: var(--surface); }
.fyb-account__who img { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; }
.fyb-account__who > span { display: grid; min-width: 0; }
.fyb-account__who strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-account__who small { font-size: 12.5px; color: var(--gray-500); }
.fyb-account__x { display: none; flex-shrink: 0; }
.fyb-account__list { display: grid; gap: 2px; }
.fyb-account__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 10px;
	border-radius: 12px;
	color: var(--gray-700);
	font-size: 14.5px;
	font-weight: 500;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.fyb-account__item:hover,
.fyb-account__item:focus-visible { background: var(--teal-50); color: var(--teal-800); outline: none; }
.fyb-account__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--surface);
	color: var(--teal-700);
	transition: background .15s ease, color .15s ease;
}
.fyb-account__item:hover .fyb-account__icon { background: var(--white); }
.fyb-account__item.is-danger { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 12px 12px; padding-top: 12px; }
.fyb-account__item.is-danger,
.fyb-account__item.is-danger .fyb-account__icon { color: var(--danger); }
.fyb-account__item.is-danger:hover { background: var(--danger-soft); color: var(--danger); }

/* HP: kartu mengambang di atas tab bar, seperti panel "Komentar foto". */
@media (max-width: 860px) {
	.fyb-account__veil { background: rgba(2, 26, 25, .45); animation: fyb-veil-in .18s ease-out; }
	.fyb-account__card {
		left: 10px !important;
		right: 10px;
		top: auto !important;
		bottom: calc(66px + env(safe-area-inset-bottom, 0px));
		width: auto !important;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		padding: 10px;
		border-radius: 20px;
		animation: fyb-account-up .22s cubic-bezier(.2, .8, .2, 1);
	}
	.fyb-account__x { display: flex; }
	/* Tab bar tetap di atas latar gelap, supaya terlihat tombol mana yang membuka. */
	body:has(.fyb-account:not([hidden])) .fyb-tabbar { z-index: 140; }
}
@keyframes fyb-account-up {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}
@keyframes fyb-veil-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.fyb-account__card, .fyb-account__veil { animation: none; }
}

/* Tombol akun pindah ke bawah "Pasang Lapak"; menunya membuka ke atas. */
.fyb-rail__account { margin-top: 12px; }
.fyb-rail__account .fyb-rail__me { margin-bottom: 0; }
.fyb-rail__account .fyb-rail__me .fyb-icon { transform: rotate(180deg); }
.fyb-rail__account .fyb-rail__me.is-open .fyb-icon { transform: none; }
.fyb-account__card { overflow-y: auto; overscroll-behavior: contain; }
.fyb-account__card.is-up { animation-name: fyb-account-in-up; }
@keyframes fyb-account-in-up {
	from { opacity: 0; transform: translateY(6px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

/* Menu kiri setinggi layar: navigasi di atas, kartu akun lalu catatan
   kaki menempel di paling bawah. */
@media (min-width: 861px) {
	.fyb-rail {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--topbar-h) - var(--gap) * 2);
		min-height: 420px;
		align-self: start;
	}
	.fyb-rail__foot { margin-top: auto; }
	.fyb-rail__account { margin-top: auto; padding-top: 16px; }
	.fyb-rail__account + .fyb-rail__foot { margin-top: 14px; }
}

/* ==========================================================================
   Kerangka halaman (skeleton) — tampil seketika saat pindah menu, sampai
   isi aslinya selesai diambil.
   ========================================================================== */
.fyb-skel { display: grid; gap: 16px; align-content: start; }
.fyb-skel__card,
.fyb-skel__tile {
	display: grid;
	gap: 10px;
	padding: 16px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.fyb-skel__card--head { gap: 12px; padding: 20px; }
.fyb-skel__row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.fyb-skel__row > span { flex: 1; display: grid; gap: 8px; }
.fyb-skel__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.fyb-skel__tile { padding: 10px 10px 14px; }
.fyb-skel__dot,
.fyb-skel__line,
.fyb-skel__block {
	display: block;
	background: linear-gradient(90deg, #e6eeed 0%, #f4f8f7 45%, #e6eeed 90%);
	background-size: 220% 100%;
	animation: fyb-skel-kilau 1.3s ease-in-out infinite;
}
.fyb-skel__dot { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; }
.fyb-skel__line { height: 12px; border-radius: 999px; }
.fyb-skel__line--sm { height: 9px; }
.fyb-skel__line--lg { height: 20px; border-radius: 8px; }
.fyb-skel__block { height: 220px; border-radius: 12px; margin-top: 6px; }
.fyb-skel__tile .fyb-skel__block { height: auto; aspect-ratio: 1; margin: 0 0 4px; }
@keyframes fyb-skel-kilau {
	from { background-position: 100% 0; }
	to   { background-position: -120% 0; }
}
@media (max-width: 860px) {
	.fyb-skel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.fyb-skel__dot, .fyb-skel__line, .fyb-skel__block { animation: none; }
}

/* Kerangka halaman Profil: sampul, foto bulat yang menumpang sampul, nama, tab. */
.fyb-skel__profile { padding: 0; gap: 0; overflow: hidden; }
.fyb-skel__cover { height: 200px; margin: 0; border-radius: 0; }
.fyb-skel__who { display: flex; align-items: flex-end; gap: 18px; padding: 0 20px 16px; }
.fyb-skel__who > span { flex: 1; display: grid; gap: 10px; padding-bottom: 6px; }
.fyb-skel__dot--xl { width: 112px; height: 112px; margin-top: -56px; border: 4px solid var(--white); box-sizing: content-box; }
.fyb-skel__tabs { display: flex; gap: 22px; padding: 14px 20px; border-top: 1px solid var(--border); }
.fyb-skel__tabs .fyb-skel__line { width: 64px; }
@media (max-width: 620px) {
	.fyb-skel__cover { height: 130px; }
	.fyb-skel__dot--xl { width: 84px; height: 84px; margin-top: -42px; }
}

/* Kerangka halaman Pesan: kolom percakapan + ruang obrolan. */
.fyb-skel__chat {
	display: grid;
	grid-template-columns: 290px minmax(0, 1fr);
	height: calc(100vh - var(--topbar-h) - var(--gap) * 2);
	min-height: 420px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}
.fyb-skel__chatlist { display: grid; align-content: start; gap: 0; border-right: 1px solid var(--border); }
.fyb-skel__chatlist > .fyb-skel__line--lg { margin: 16px; }
.fyb-skel__chatlist > .fyb-skel__row { margin: 0; padding: 11px 14px; border-top: 1px solid var(--border); }
.fyb-skel__chatview { display: flex; flex-direction: column; min-width: 0; }
.fyb-skel__chatview > .fyb-skel__row { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.fyb-skel__chatview .fyb-skel__dot { width: 36px; height: 36px; }
.fyb-skel__bubbles { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 18px 16px; }
.fyb-skel__bubble {
	display: block;
	height: 38px;
	border-radius: 18px 18px 18px 6px;
	background: linear-gradient(90deg, #e6eeed 0%, #f4f8f7 45%, #e6eeed 90%);
	background-size: 220% 100%;
	animation: fyb-skel-kilau 1.3s ease-in-out infinite;
}
.fyb-skel__bubble.is-me {
	align-self: flex-end;
	border-radius: 18px 18px 6px 18px;
	background-image: linear-gradient(90deg, #d4ebe9 0%, #e8f5f4 45%, #d4ebe9 90%);
}
.fyb-skel__input {
	display: block;
	height: 44px;
	margin: 0 16px 16px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--surface);
}
@media (max-width: 860px) {
	.fyb-skel__chat { height: calc(100vh - var(--topbar-h) - var(--gap) - 86px); }
}
@media (max-width: 760px) {
	.fyb-skel__chat { grid-template-columns: 1fr; }
	.fyb-skel__chat .fyb-skel__chatview { display: none; }
	.fyb-skel__chat.is-open .fyb-skel__chatlist { display: none; }
	.fyb-skel__chat.is-open .fyb-skel__chatview { display: flex; }
	.fyb-skel__chatlist { border-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.fyb-skel__bubble { animation: none; }
}

/* Kerangka formulir (Pengaturan akun). */
.fyb-skel__form { display: grid; gap: 12px; padding: 20px; }
.fyb-skel__form .fyb-skel__line--lg + .fyb-skel__line { margin-bottom: 8px; }
.fyb-skel__field { display: grid; gap: 8px; }
.fyb-skel__field .fyb-skel__input { margin: 0; border-radius: 10px; }
.fyb-skel__btn {
	display: block;
	width: 140px;
	height: 42px;
	margin-top: 6px;
	border-radius: 999px;
	background: linear-gradient(90deg, #d4ebe9 0%, #e8f5f4 45%, #d4ebe9 90%);
	background-size: 220% 100%;
	animation: fyb-skel-kilau 1.3s ease-in-out infinite;
}
.fyb-panel__body > .fyb-skel__form { padding: 0; }
@media (prefers-reduced-motion: reduce) { .fyb-skel__btn { animation: none; } }

/* Kerangka halaman satu lapak. */
.fyb-skel__photo { height: 380px; margin: 0; border-radius: 0; }
.fyb-skel__line--price { width: 28%; height: 24px; border-radius: 8px; margin-bottom: 6px; }
.fyb-skel__specs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	padding: 14px 0;
	margin: 4px 0 6px;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.fyb-skel__specs > span { display: grid; gap: 7px; }
.fyb-skel__listing .fyb-skel__row { margin: 8px 0 2px; }
@media (max-width: 620px) {
	.fyb-skel__photo { height: 260px; }
	.fyb-skel__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Kerangka baris di kolom daftar percakapan (sementara daftar segar datang). */
.fyb-skel__chatlist--rows { border-right: 0; }
.fyb-skel__chatlist--rows > .fyb-skel__row:first-child { border-top: 0; }

/* ==========================================================================
   Wizard "Pasang lapak" — memakai kerangka .fyb-gwiz (hero, tahapan, panel,
   kaki), ditambah komponen khusus lapak di bawah ini.
   ========================================================================== */
.fyb-lwiz .fyb-gwiz__layout { grid-template-columns: minmax(0, 1fr) 300px; }
.fyb-lwiz .fyb-gwiz__form { min-height: 0; }
.fyb-lwiz .fyb-field { margin-bottom: 18px; }
.fyb-lwiz .fyb-field label { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.fyb-lwiz__req { color: var(--danger); }
.fyb-lwiz .fyb-gwiz__sub { margin: 4px 0 10px; }
.fyb-lwiz .fyb-gwiz__sub ~ .fyb-gwiz__sub { margin-top: 22px; }

/* Foto: kotak besar yang bisa diklik atau dijatuhi berkas. */
.fyb-lwiz__drop {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	max-height: 300px;
	width: 100%;
	overflow: hidden;
	border: 2px dashed var(--teal-200);
	border-radius: 16px;
	background:
		radial-gradient(120% 90% at 0% 0%, rgba(13, 132, 130, .08), transparent 60%),
		var(--teal-50);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.fyb-lwiz__drop:hover { border-color: var(--teal-400); }
.fyb-lwiz__drop.is-over { border-color: var(--teal-600); background-color: var(--teal-100); transform: scale(1.01); }
.fyb-lwiz__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fyb-lwiz__drop:focus-within { box-shadow: 0 0 0 3px rgba(13, 132, 130, .18); }
.fyb-lwiz__drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fyb-lwiz__dropempty { display: grid; justify-items: center; gap: 6px; padding: 16px; text-align: center; }
.fyb-lwiz__dropicon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 4px;
	border-radius: 16px;
	background: var(--white);
	color: var(--teal-600);
	box-shadow: 0 8px 20px -10px rgba(6, 87, 85, .45);
}
.fyb-lwiz__dropempty strong { font-size: 15px; color: var(--teal-800); }
.fyb-lwiz__dropempty small { font-size: 12.5px; color: var(--gray-500); }
.fyb-lwiz__dropbar {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: none;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(2, 26, 25, .72);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
}
.fyb-lwiz__drop.has-photo { border-style: solid; border-color: transparent; }
.fyb-lwiz__drop.has-photo .fyb-lwiz__dropempty { display: none; }
.fyb-lwiz__drop.has-photo .fyb-lwiz__dropbar { display: inline-flex; }
.fyb-lwiz__tip { display: flex; align-items: center; gap: 6px; margin: 10px 0 20px; font-size: 12.5px; color: var(--gray-500); }
.fyb-lwiz__tip .fyb-icon { flex-shrink: 0; color: var(--teal-500); }

/* Jenis ekor: chip yang bisa dipilih satu. */
.fyb-lwiz__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fyb-lwiz__chip { position: relative; cursor: pointer; }
.fyb-lwiz__chip input { position: absolute; opacity: 0; pointer-events: none; }
.fyb-lwiz__chip span {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border: 1.5px solid var(--border);
	border-radius: 999px;
	background: var(--white);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--gray-700);
	transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.fyb-lwiz__chip:hover span { border-color: var(--teal-200); }
.fyb-lwiz__chip input:checked + span { border-color: var(--teal-600); background: var(--teal-600); color: #fff; box-shadow: 0 6px 14px -8px rgba(6, 104, 103, .8); }
.fyb-lwiz__chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(13, 132, 130, .25); }
.fyb-lwiz__chip--muted span { border-style: dashed; color: var(--gray-500); font-weight: 500; }
.fyb-lwiz__chip--muted input:checked + span { border-style: solid; background: var(--teal-50); border-color: var(--teal-400); color: var(--teal-800); box-shadow: none; }

/* Kelamin: tiga tombol berdampingan. */
.fyb-lwiz__seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.fyb-lwiz__segitem { position: relative; cursor: pointer; }
.fyb-lwiz__segitem input { position: absolute; opacity: 0; pointer-events: none; }
.fyb-lwiz__segitem > span:last-child,
.fyb-lwiz__segsym { pointer-events: none; }
.fyb-lwiz__segitem {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px;
	border: 1.5px solid var(--border);
	border-radius: 14px;
	background: var(--white);
	font-size: 14px;
	font-weight: 600;
	color: var(--gray-700);
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.fyb-lwiz__segitem:hover { border-color: var(--teal-200); }
.fyb-lwiz__segsym {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--surface);
	font-size: 16px;
	line-height: 1;
	color: var(--gray-500);
	transition: background .15s ease, color .15s ease;
}
.fyb-lwiz__segitem:has(input:checked) { border-color: var(--teal-600); background: var(--teal-50); color: var(--teal-800); }
.fyb-lwiz__segitem:has(input:checked) .fyb-lwiz__segsym { background: var(--teal-600); color: #fff; }
.fyb-lwiz__segitem--jantan:has(input:checked) .fyb-lwiz__segsym { background: #2563eb; }
.fyb-lwiz__segitem--betina:has(input:checked) .fyb-lwiz__segsym { background: #db2777; }
.fyb-lwiz__segitem:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(13, 132, 130, .25); }

.fyb-lwiz__grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* Jumlah: tombol − angka +. */
.fyb-lwiz__stepper {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 44px;
	align-items: stretch;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--white);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fyb-lwiz__stepper:focus-within { border-color: var(--teal-400); box-shadow: 0 0 0 3px rgba(13, 132, 130, .12); }
.fyb-lwiz__stepper button {
	border: 0;
	background: var(--surface);
	font-size: 18px;
	font-weight: 600;
	color: var(--teal-700);
	cursor: pointer;
	transition: background .15s ease;
}
.fyb-lwiz__stepper button:hover { background: var(--teal-100); }
.fyb-lwiz__stepper input {
	width: 100%;
	min-width: 0;
	padding: 12px 4px;
	border: 0;
	background: transparent;
	font: inherit;
	font-weight: 700;
	text-align: center;
	color: var(--ink);
	outline: none;
	-moz-appearance: textfield;
}
.fyb-lwiz__stepper input::-webkit-outer-spin-button,
.fyb-lwiz__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Kolom berawalan (Rp, ikon lokasi). */
.fyb-lwiz__affix {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--white);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.fyb-lwiz__affix:focus-within { border-color: var(--teal-400); box-shadow: 0 0 0 3px rgba(13, 132, 130, .12); }
.fyb-lwiz__prefix {
	display: grid;
	place-items: center;
	padding: 0 14px;
	border-right: 1px solid var(--border);
	background: var(--surface);
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 700;
	color: var(--teal-700);
}
.fyb-lwiz__prefix--icon { padding: 0 12px; }
.fyb-lwiz__affix input {
	flex: 1;
	min-width: 0;
	padding: 12px 14px;
	border: 0;
	background: transparent;
	font: inherit;
	color: var(--ink);
	outline: none;
}
.fyb-lwiz__affix input[data-lwiz-price] { font-family: var(--font-heading); font-size: 18px; font-weight: 700; letter-spacing: .01em; }
.fyb-lwiz__affix.is-off { opacity: .45; background: var(--surface); }
.fyb-lwiz__affix.is-off input { text-decoration: line-through; }

/* Sakelar Nego. */
.fyb-lwiz__switch {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: -4px 0 20px;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--white);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.fyb-lwiz__switch:hover { border-color: var(--teal-200); }
.fyb-lwiz__switch input { position: absolute; opacity: 0; pointer-events: none; }
.fyb-lwiz__track {
	position: relative;
	flex-shrink: 0;
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: var(--gray-300);
	transition: background .18s ease;
}
.fyb-lwiz__track span {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	transition: transform .18s ease;
}
.fyb-lwiz__switch:has(input:checked) { border-color: var(--teal-400); background: var(--teal-50); }
.fyb-lwiz__switch:has(input:checked) .fyb-lwiz__track { background: var(--teal-600); }
.fyb-lwiz__switch:has(input:checked) .fyb-lwiz__track span { transform: translateX(18px); }
.fyb-lwiz__switch:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(13, 132, 130, .2); }
.fyb-lwiz__switchtext { display: grid; gap: 2px; }
.fyb-lwiz__switchtext strong { font-size: 14px; color: var(--ink); }
.fyb-lwiz__switchtext small { font-size: 12.5px; color: var(--gray-500); }

/* Meter kelengkapan (di atas kaki formulir, semua langkah). */
.fyb-lwiz__meter {
	margin: 4px 24px 18px;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--surface);
	border: 1px solid var(--border);
}
.fyb-lwiz__meterhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.fyb-lwiz__meterhead strong { font-size: 13.5px; color: var(--ink); }
.fyb-lwiz__meterhead span { font-family: var(--font-heading); font-size: 15px; font-weight: 800; color: #b45309; transition: color .2s ease; }
.fyb-lwiz__bar { height: 8px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.fyb-lwiz__bar span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, #f59e0b, #fbbf24);
	transition: width .35s cubic-bezier(.2, .8, .2, 1), background .3s ease;
}
.fyb-lwiz__meter.is-mid .fyb-lwiz__bar span { background: linear-gradient(90deg, var(--teal-400), var(--teal-500)); }
.fyb-lwiz__meter.is-mid .fyb-lwiz__meterhead span { color: var(--teal-600); }
.fyb-lwiz__meter.is-full { border-color: var(--teal-200); background: var(--teal-50); }
.fyb-lwiz__meter.is-full .fyb-lwiz__bar span { background: linear-gradient(90deg, var(--teal-500), var(--teal-700)); }
.fyb-lwiz__meter.is-full .fyb-lwiz__meterhead span { color: var(--teal-700); }
.fyb-lwiz__hint { margin: 8px 0 0; font-size: 12.5px; color: var(--gray-600); }

/* Pratinjau: kartu Marketplace yang hidup. */
.fyb-lwiz__preview { position: sticky; top: calc(var(--topbar-h) + var(--gap)); display: grid; gap: 10px; }
.fyb-lwiz__pvlabel {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--teal-700);
}
.fyb-lwiz__pvlabel::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 4px rgba(13, 132, 130, .15); }
.fyb-lwiz__card { pointer-events: none; box-shadow: 0 18px 40px -22px rgba(2, 26, 25, .45); }
.fyb-lwiz__card .fyb-lcard__media { overflow: hidden; }
.fyb-lwiz__card .fyb-lcard__title { overflow-wrap: anywhere; }
.fyb-lwiz__card .fyb-lcard__title.is-empty { color: var(--gray-400); font-style: italic; font-weight: 500; }
.fyb-lwiz__card .fyb-lcard__city::before { content: "📍 "; }
.fyb-lwiz__pvmeta { margin: 2px 0 0; font-size: 12px; color: var(--gray-500); }

@media (max-width: 1080px) {
	.fyb-lwiz .fyb-gwiz__layout { grid-template-columns: minmax(0, 1fr); }
	.fyb-lwiz__preview { display: none; }
}
@media (max-width: 620px) {
	.fyb-lwiz__grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fyb-lwiz__grid3 > .fyb-field:last-child { grid-column: 1 / -1; }
	.fyb-lwiz__seg { gap: 6px; }
	.fyb-lwiz__segitem { flex-direction: column; gap: 6px; padding: 10px 6px; font-size: 13px; }
	.fyb-lwiz__meter { margin: 4px 16px 16px; }
	.fyb-lwiz__drop { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
	.fyb-lwiz__bar span, .fyb-lwiz__track span, .fyb-lwiz__drop { transition: none; }
}

/* ==========================================================================
   Tab bar HP: ikon saja. Labelnya tetap ada untuk pembaca layar (disembunyikan
   secara visual), menu aktif ditandai pil lembut di belakang ikonnya.
   ========================================================================== */
@media (max-width: 860px) {
	.fyb-tabbar a,
	.fyb-tabbar__me {
		height: 56px;
		padding: 0;
		display: grid;
		place-items: center;
		gap: 0;
	}
	.fyb-tabbar a > span:not(.fyb-badge-count),
	.fyb-tabbar__me > span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.fyb-tabbar a::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 52px;
		height: 34px;
		border-radius: 999px;
		background: transparent;
		transform: translate(-50%, -50%) scale(.7);
		transition: background .2s ease, transform .2s ease;
	}
	.fyb-tabbar a.is-active::before { background: var(--teal-50); transform: translate(-50%, -50%) scale(1); }
	.fyb-tabbar a .fyb-icon { position: relative; width: 24px; height: 24px; transition: transform .15s ease; }
	.fyb-tabbar a:active .fyb-icon { transform: scale(.9); }
	.fyb-tabbar a.is-active .fyb-icon { stroke-width: 2.2; }
	.fyb-tabbar .fyb-badge-count { top: 8px; right: 50%; margin-right: -22px; }
	.fyb-tabbar__me img { width: 28px; height: 28px; }
}

/* ==========================================================================
   Jadi penjual — hero .fyb-gwiz__hero, jalur 3 tahap, kartu status/formulir.
   ========================================================================== */
.fyb-seller__card { padding: 24px; }
.fyb-seller__card h2 { margin: 0 0 4px; font-size: 19px; color: var(--teal-800); }
.fyb-seller__card p { margin: 0; }

/* Jalur Isi formulir → Ditinjau → Mulai jualan */
.fyb-seller__path {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fyb-seller__stop {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1.5px solid var(--border);
	border-radius: 14px;
	background: var(--white);
	color: var(--gray-500);
}
.fyb-seller__dot {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--surface);
	color: var(--gray-400);
}
.fyb-seller__stoptext { display: grid; min-width: 0; }
.fyb-seller__stoptext strong { font-size: 14px; color: var(--gray-700); }
.fyb-seller__stoptext small { font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-seller__stop.is-on { border-color: var(--teal-600); background: var(--teal-50); }
.fyb-seller__stop.is-on .fyb-seller__dot { background: var(--teal-600); color: #fff; box-shadow: 0 0 0 4px rgba(13, 132, 130, .15); }
.fyb-seller__stop.is-on strong { color: var(--teal-800); }
.fyb-seller__stop.is-done .fyb-seller__dot { background: var(--teal-100); color: var(--teal-700); }
.fyb-seller__stop.is-done .fyb-seller__dot .fyb-icon { stroke-width: 3; }
.fyb-seller__stop.is-done strong { color: var(--teal-700); }

/* Kartu tengah (belum masuk / disetujui) */
.fyb-seller__center { display: grid; justify-items: center; gap: 8px; padding: 36px 24px; text-align: center; }
.fyb-seller__center p { max-width: 460px; font-size: 14px; color: var(--gray-500); }
.fyb-seller__center .fyb-btn { margin-top: 8px; }
.fyb-seller__bigicon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	margin-bottom: 6px;
	border-radius: 20px;
	background: var(--teal-50);
	color: var(--teal-600);
}
.fyb-seller__bigicon.is-ok {
	background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
	color: #fff;
	box-shadow: 0 14px 30px -14px rgba(6, 87, 85, .8);
	animation: fyb-seller-pop .5s cubic-bezier(.2, 1.4, .4, 1);
}
.fyb-seller__bigicon.is-wait { background: #fef3c7; color: #b45309; }
@keyframes fyb-seller-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.fyb-seller__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.fyb-seller__actions .fyb-btn { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.fyb-seller__done { background: radial-gradient(90% 70% at 50% 0%, var(--teal-50), var(--white) 70%); }

/* Sedang ditinjau */
.fyb-seller__review { display: flex; align-items: flex-start; gap: 16px; }
.fyb-seller__review .fyb-seller__bigicon { width: 56px; height: 56px; margin: 0; position: relative; }
.fyb-seller__review .fyb-seller__bigicon::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 24px;
	border: 2px solid #fcd34d;
	animation: fyb-seller-ring 1.8s ease-out infinite;
}
@keyframes fyb-seller-ring { from { opacity: .9; transform: scale(.92); } to { opacity: 0; transform: scale(1.18); } }
.fyb-seller__review p { font-size: 14px; color: var(--gray-500); line-height: 1.55; }
.fyb-seller__summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 20px 0 0;
	padding: 16px;
	border-radius: 14px;
	background: var(--surface);
}
.fyb-seller__summary div.is-wide { grid-column: 1 / -1; }
.fyb-seller__summary dt { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-500); }
.fyb-seller__summary dd { margin: 3px 0 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }

/* Formulir + kartu "Kenapa" */
.fyb-seller__layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.fyb-seller__form .fyb-field { margin-bottom: 18px; }
.fyb-seller__form .fyb-field label { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.fyb-seller__grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fyb-seller__private { display: flex; align-items: center; gap: 5px; margin: 7px 0 0 !important; font-size: 12px; color: var(--gray-500); }
.fyb-seller__private .fyb-icon { flex-shrink: 0; color: var(--teal-500); }
.fyb-seller__again {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 18px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--danger-soft);
	color: var(--danger);
	font-size: 13.5px;
	line-height: 1.5;
}
.fyb-seller__again .fyb-icon { flex-shrink: 0; margin-top: 2px; }
.fyb-seller__ideas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fyb-seller__idea {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 11px;
	border: 1px dashed var(--teal-200);
	border-radius: 999px;
	background: var(--teal-50);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--teal-700);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fyb-seller__idea:hover { border-style: solid; border-color: var(--teal-400); background: var(--teal-100); }
.fyb-seller__idea.is-used { border-style: solid; border-color: var(--teal-600); background: var(--teal-600); color: #fff; }
.fyb-seller__min { font-size: 12px; color: var(--gray-500); }
.fyb-seller__min.is-ok { color: var(--teal-600); font-weight: 600; }
.fyb-field.is-error .fyb-input { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(185, 28, 28, .12); }
.fyb-seller__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 6px -24px -24px;
	padding: 16px 24px;
	border-top: 1px solid var(--border);
	background: var(--surface);
	border-radius: 0 0 var(--radius) var(--radius);
}
.fyb-seller__foot p { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gray-500); }
.fyb-seller__foot .fyb-icon { flex-shrink: 0; color: var(--teal-500); }
.fyb-seller__foot .fyb-btn { display: inline-flex; align-items: center; gap: 8px; }
.fyb-seller__foot .fyb-btn.is-busy { opacity: .7; pointer-events: none; }

.fyb-seller__why { position: sticky; top: calc(var(--topbar-h) + var(--gap)); padding: 20px; background: linear-gradient(180deg, var(--teal-50), var(--white) 60%); }
.fyb-seller__why h3 { margin: 0 0 14px; font-size: 15px; color: var(--teal-800); }
.fyb-seller__why ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.fyb-seller__why li { display: flex; gap: 12px; }
.fyb-seller__whyicon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 11px;
	background: var(--white);
	color: var(--teal-600);
	box-shadow: 0 6px 14px -10px rgba(6, 87, 85, .6);
}
.fyb-seller__why li > span:last-child { display: grid; gap: 2px; }
.fyb-seller__why strong { font-size: 13.5px; color: var(--ink); }
.fyb-seller__why small { font-size: 12.5px; line-height: 1.45; color: var(--gray-500); }

@media (max-width: 1080px) {
	.fyb-seller__layout { grid-template-columns: minmax(0, 1fr); }
	.fyb-seller__why { position: static; }
}
@media (max-width: 620px) {
	.fyb-seller__card { padding: 18px 16px; }
	.fyb-seller__path { gap: 6px; }
	.fyb-seller__stop { flex-direction: column; gap: 6px; padding: 10px 6px; text-align: center; }
	.fyb-seller__stoptext small { display: none; }
	.fyb-seller__stoptext strong { font-size: 12.5px; }
	.fyb-seller__grid2 { grid-template-columns: minmax(0, 1fr); }
	.fyb-seller__summary { grid-template-columns: minmax(0, 1fr); }
	.fyb-seller__foot { flex-direction: column; align-items: stretch; margin: 6px -16px -18px; padding: 14px 16px; }
	.fyb-seller__foot .fyb-btn { justify-content: center; }
	.fyb-seller__review { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
	.fyb-seller__bigicon.is-ok, .fyb-seller__review .fyb-seller__bigicon::after { animation: none; }
}

.fyb-seller__card .fyb-gwiz__lead { margin: 0 0 20px; }
@media (max-width: 620px) { .fyb-seller__grid2 { gap: 0; } }

/* ==========================================================================
   Jelajah
   ========================================================================== */
.fyb-explore { gap: 16px; }

/* Hero pencarian */
.fyb-xhero {
	position: relative;
	overflow: hidden;
	padding: 24px;
	background:
		radial-gradient(90% 120% at 100% 0%, rgba(58, 161, 159, .28), transparent 55%),
		linear-gradient(150deg, #065755 0%, #04403f 60%, #03302f 100%);
	border: 0;
	color: #fff;
}
.fyb-xhero::after {
	content: "";
	position: absolute;
	right: -60px;
	bottom: -90px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	border: 38px solid rgba(255, 255, 255, .05);
	pointer-events: none;
}
.fyb-xhero__top h1 { margin: 0 0 4px; font-size: 24px; color: #fff; }
.fyb-xhero__top p { margin: 0 0 18px; font-size: 14px; color: rgba(255, 255, 255, .82); }
.fyb-xhero__search {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 6px 6px 16px;
	border-radius: 999px;
	background: var(--white);
	box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .55);
}
.fyb-xhero__search .fyb-icon { flex-shrink: 0; color: var(--teal-600); }
.fyb-xhero__search input {
	flex: 1;
	min-width: 0;
	padding: 10px 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	outline: none;
}
.fyb-xhero__search .fyb-btn { border-radius: 999px; padding-left: 22px; padding-right: 22px; }
.fyb-xhero__chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.fyb-xhero__chips span { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.fyb-xhero__chips a {
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .18);
	font-size: 12.5px;
	font-weight: 600;
	color: #fff;
	transition: background .15s ease, transform .15s ease;
}
.fyb-xhero__chips a:hover { background: rgba(255, 255, 255, .22); transform: translateY(-1px); }

/* Tab hasil pencarian */
.fyb-xtabs { position: relative; z-index: 1; display: flex; gap: 6px; margin-top: 16px; overflow-x: auto; scrollbar-width: none; }
.fyb-xtabs::-webkit-scrollbar { display: none; }
.fyb-xtabs__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, .85);
	transition: background .15s ease;
}
.fyb-xtabs__item span { padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 11.5px; }
.fyb-xtabs__item:hover { background: rgba(255, 255, 255, .12); }
.fyb-xtabs__item.is-active { background: var(--white); color: var(--teal-800); }
.fyb-xtabs__item.is-active span { background: var(--teal-100); color: var(--teal-700); }

/* Bagian */
.fyb-xsec { padding: 18px; }
.fyb-xsec__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fyb-xsec__head > div { flex: 1; min-width: 0; }
.fyb-xsec__head h2 { margin: 0; font-size: 17px; color: var(--teal-800); }
.fyb-xsec__head p { margin: 2px 0 0; font-size: 13px; color: var(--gray-500); }
.fyb-xsec__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--teal-50);
	color: var(--teal-600);
}
.fyb-xsec__icon.is-hot { background: #ffe4e6; color: #e11d48; }
.fyb-xsec__all { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--teal-600); }
.fyb-xsec__all:hover { color: var(--teal-800); }
.fyb-xsec__listings { margin: 0; }
.fyb-xsec__label { display: flex; align-items: center; gap: 8px; padding: 2px 4px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--teal-700); }

/* Kisi foto "Sedang ramai" */
.fyb-xgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fyb-xgrid__tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: var(--teal-50); }
.fyb-xgrid__tile.is-big { grid-column: span 2; grid-row: span 2; }
.fyb-xgrid__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.fyb-xgrid__tile:hover img { transform: scale(1.05); }
.fyb-xgrid__multi {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(2, 26, 25, .6);
	font-size: 11.5px;
	font-weight: 700;
	color: #fff;
}
.fyb-xgrid__shade {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	padding: 28px 10px 9px;
	background: linear-gradient(transparent, rgba(2, 26, 25, .78));
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	opacity: 0;
	transition: opacity .2s ease;
}
.fyb-xgrid__tile:hover .fyb-xgrid__shade,
.fyb-xgrid__tile:focus-visible .fyb-xgrid__shade,
.fyb-xgrid__tile.is-big .fyb-xgrid__shade { opacity: 1; }
.fyb-xgrid__who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fyb-xgrid__who img { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }
.fyb-xgrid__stats { display: flex; gap: 10px; flex-shrink: 0; }
.fyb-xgrid__stats span { display: inline-flex; align-items: center; gap: 3px; }

/* Grup untuk kamu */
.fyb-xgroups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fyb-xgroups__card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--white);
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.fyb-xgroups__card:hover { border-color: var(--teal-200); transform: translateY(-1px); box-shadow: 0 10px 22px -16px rgba(2, 26, 25, .5); }
.fyb-xgroups__avatar {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	overflow: hidden;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--teal-400), var(--teal-700));
	font-family: var(--font-heading);
	font-size: 19px;
	font-weight: 800;
	color: #fff;
}
.fyb-xgroups__avatar img { width: 100%; height: 100%; object-fit: cover; }
.fyb-xgroups__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fyb-xgroups__text strong { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-xgroups__text small { font-size: 12px; color: var(--gray-500); }
.fyb-xgroups__go { color: var(--gray-400); }

/* Hasil cari: anggota */
.fyb-xpeople { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fyb-xpeople__card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; }
.fyb-xpeople__who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.fyb-xpeople__who img { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; }
.fyb-xpeople__who > span { display: grid; min-width: 0; }
.fyb-xpeople__who strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-xpeople__who small { font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-xpeople__state { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--gray-500); }

/* Tombol Tambah teman */
.fyb-friendadd { margin: 0; flex-shrink: 0; }
.fyb-friendadd__btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 7px 12px;
	border: 0;
	border-radius: 999px;
	background: var(--teal-600);
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.fyb-friendadd__btn:hover { background: var(--teal-700); transform: translateY(-1px); }
.fyb-friendadd__btn.is-busy { opacity: .6; pointer-events: none; }
.fyb-friendadd__btn.is-sent { background: var(--teal-50); color: var(--teal-700); cursor: default; transform: none; }

/* Kolom kanan: Saran teman */
.fyb-suggest__tip {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 14px 4px;
	padding: 10px 12px;
	border-radius: 12px;
	background: #fef3c7;
	font-size: 12.5px;
	line-height: 1.45;
	color: #92400e;
}
.fyb-suggest__tip .fyb-icon { flex-shrink: 0; margin-top: 1px; }
.fyb-suggest__tip:hover { background: #fde68a; }
.fyb-suggest__list { margin: 0; padding: 6px 8px; list-style: none; }
.fyb-suggest__item { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 12px; transition: background .15s ease; }
.fyb-suggest__item:hover { background: var(--surface); }
.fyb-suggest__who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.fyb-suggest__who img { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; }
.fyb-suggest__text { display: grid; min-width: 0; }
.fyb-suggest__text strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-suggest__text small { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-suggest__city .fyb-icon { flex-shrink: 0; }
.fyb-suggest__city.is-near { color: var(--teal-600); font-weight: 600; }
.fyb-suggest__more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 12px;
	border-top: 1px solid var(--border);
	font-size: 13px;
	font-weight: 600;
	color: var(--teal-600);
}
.fyb-suggest__more:hover { background: var(--surface); }

@media (max-width: 620px) {
	.fyb-xhero { padding: 20px 16px; }
	.fyb-xhero__top h1 { font-size: 21px; }
	.fyb-xhero__search { padding-left: 14px; }
	.fyb-xhero__search .fyb-btn { padding-left: 16px; padding-right: 16px; }
	.fyb-xsec { padding: 16px 14px; }
	.fyb-xgroups, .fyb-xpeople { grid-template-columns: minmax(0, 1fr); }
	.fyb-xgrid { gap: 4px; }
	.fyb-xgrid__tile { border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.fyb-xgrid__tile img, .fyb-xgroups__card, .fyb-xhero__chips a { transition: none; }
}
.fyb-suggest__text strong { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fyb-suggest__text strong > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fyb-suggest__near {
	flex-shrink: 0;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--teal-100);
	font-size: 10.5px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--teal-700);
}

/* ==========================================================================
   Pengaturan akun: menu samping + isi. (.fyb-tabs--account / __item tetap
   dipakai supaya navigasi tanpa muat ulang mengenali menunya.)
   ========================================================================== */
.fyb-acc { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; overflow: hidden; }

.fyb-tabs.fyb-acc__nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-self: stretch;
	padding: 18px 12px;
	border: 0;
	border-right: 1px solid var(--border);
	background: linear-gradient(180deg, var(--surface), var(--white));
	overflow: visible;
}
.fyb-acc__navtitle { margin: 0 10px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); }
.fyb-tabs__item.fyb-acc__item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px;
	border: 0;
	border-radius: 12px;
	white-space: normal;
	color: var(--gray-700);
	transition: background .15s ease, color .15s ease;
}
.fyb-tabs__item.fyb-acc__item:hover { background: var(--white); color: var(--teal-800); }
.fyb-acc__ico {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--white);
	color: var(--teal-600);
	box-shadow: 0 1px 2px rgba(3, 48, 47, .08), inset 0 0 0 1px var(--border);
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.fyb-acc__lbl { display: grid; min-width: 0; }
.fyb-acc__lbl strong { font-size: 14px; color: inherit; }
.fyb-acc__lbl small { font-size: 12px; font-weight: 500; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-tabs__item.fyb-acc__item.is-active { background: var(--teal-600); color: #fff; box-shadow: 0 10px 22px -14px rgba(6, 87, 85, .9); }
.fyb-acc__item.is-active .fyb-acc__ico { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; }
.fyb-acc__item.is-active .fyb-acc__lbl small { color: rgba(255, 255, 255, .8); }
.fyb-acc__item.is-danger { margin-top: 8px; color: var(--danger); }
.fyb-acc__item.is-danger .fyb-acc__ico { color: var(--danger); }
.fyb-tabs__item.fyb-acc__item.is-danger:hover { background: var(--danger-soft); color: var(--danger); }
.fyb-tabs__item.fyb-acc__item.is-danger.is-active { background: var(--danger); color: #fff; }

/* Isi */
.fyb-acc__body { padding: 24px 28px 28px; min-width: 0; }
.fyb-acc__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.fyb-acc__head h2 { margin: 0; font-size: 20px; color: var(--teal-800); }
.fyb-acc__head p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--gray-500); }
.fyb-acc__headicon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
	color: #fff;
	box-shadow: 0 10px 20px -12px rgba(6, 87, 85, .9);
}
.fyb-acc__head.is-danger .fyb-acc__headicon { background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 10px 20px -12px rgba(185, 28, 28, .9); }
.fyb-acc__head.is-danger h2 { color: var(--danger); }

.fyb-acc .fyb-field { margin-bottom: 16px; }
.fyb-acc .fyb-field label { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.fyb-acc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }

/* Kelompok di tab Umum */
.fyb-acc__group { padding: 18px 0; border-top: 1px solid var(--border); }
.fyb-acc__group:first-of-type { border-top: 0; padding-top: 0; }
.fyb-acc__group h3 { margin: 0 0 12px; font-size: 14px; letter-spacing: .02em; color: var(--teal-700); }
.fyb-acc__group .fyb-field:last-child { margin-bottom: 0; }
.fyb-acc__url {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: -4px 0 6px;
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--surface);
	font-size: 12.5px;
	color: var(--gray-500);
	overflow-wrap: anywhere;
}
.fyb-acc__url .fyb-icon { flex-shrink: 0; color: var(--teal-500); }
.fyb-acc__url b { color: var(--teal-700); }
.fyb-acc__hint { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12.5px; color: var(--gray-500); }
.fyb-acc__hint .fyb-icon { flex-shrink: 0; color: var(--teal-500); }

/* Bilah simpan */
.fyb-acc__save {
	position: sticky;
	bottom: 12px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 8px;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(6px);
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.fyb-acc__save .fyb-btn { display: inline-flex; align-items: center; gap: 8px; }
.fyb-acc__save .fyb-btn.is-busy { opacity: .7; pointer-events: none; }
.fyb-acc__dirty { flex: 1; display: none; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #b45309; }
.fyb-acc__dirty::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .2); }
.fyb-acc__save [data-accreset] { display: none; }
.fyb-acc__save.is-dirty { border-color: #fcd34d; box-shadow: 0 14px 30px -18px rgba(180, 83, 9, .55); background: #fffdf5; }
.fyb-acc__save.is-dirty .fyb-acc__dirty { display: inline-flex; }
.fyb-acc__save.is-dirty [data-accreset] { display: inline-flex; }

/* Kartu di tab Keamanan */
.fyb-acc__card {
	margin-bottom: 16px;
	padding: 20px;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: var(--white);
}
.fyb-acc__card.is-on { border-color: var(--teal-200); background: linear-gradient(180deg, var(--teal-50), var(--white) 50%); }
.fyb-acc__cardtitle { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 15.5px; color: var(--ink); }
.fyb-acc__cardtitle > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--teal-50); color: var(--teal-600); }
.fyb-acc__status { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--surface); font-size: 12px; font-style: normal; font-weight: 700; color: var(--gray-500); }
.fyb-acc__status.is-on { background: var(--teal-600); color: #fff; }
.fyb-acc__lead { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--gray-600); }
.fyb-acc__cardfoot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding-top: 4px; }
.fyb-acc__cardfoot p { flex: 1; margin: 0; font-size: 12.5px; color: var(--gray-500); }

.fyb-acc__pass { position: relative; }
.fyb-acc__pass .fyb-input { padding-right: 46px; }
.fyb-acc__eye {
	position: absolute;
	top: 50%;
	right: 6px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--gray-400);
	cursor: pointer;
	transform: translateY(-50%);
}
.fyb-acc__eye:hover { background: var(--surface); color: var(--teal-700); }
.fyb-acc__eye .fyb-icon:last-child { display: none; }
.fyb-acc__eye.is-shown .fyb-acc__eyeon { display: none; }
.fyb-acc__eye.is-shown .fyb-icon:last-child { display: block; }

.fyb-acc__strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: -8px 0 6px; }
.fyb-acc__strength span { height: 5px; border-radius: 999px; background: var(--border); transition: background .2s ease; }
.fyb-acc__strength[data-level="1"] span:nth-child(-n+1) { background: #ef4444; }
.fyb-acc__strength[data-level="2"] span:nth-child(-n+2) { background: #f59e0b; }
.fyb-acc__strength[data-level="3"] span:nth-child(-n+3) { background: var(--teal-500); }
.fyb-acc__strength[data-level="4"] span { background: var(--teal-700); }
.fyb-acc__strengthtext { margin: 0 0 12px; font-size: 12px; color: var(--gray-500); }
.fyb-acc__match { margin: -8px 0 12px; font-size: 12px; font-weight: 600; color: var(--danger); }
.fyb-acc__match.is-ok { color: var(--teal-600); }
.fyb-acc .fyb-input--pin { text-align: center; font-size: 18px; }

/* Layar bawaan BuddyPress di dalam kerangka ini */
.fyb-acc__bp #buddypress .screen-heading,
.fyb-acc__bp #buddypress .bp-help-text.email-notifications-info { display: none; }
.fyb-acc__bp #buddypress,
.fyb-acc__bp #buddypress .bp-wrap,
.fyb-acc__bp #buddypress #item-body { margin: 0; padding: 0; border: 0; background: none; }
.fyb-acc__bp #buddypress p,
.fyb-acc__bp #buddypress li { font-size: 14px; line-height: 1.6; color: var(--gray-700); }
.fyb-acc__bp #buddypress .bp-feedback {
	display: flex;
	gap: 10px;
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 0;
	border-radius: 12px;
	background: var(--teal-50);
	box-shadow: none;
}
.fyb-acc__bp #buddypress .bp-feedback .bp-icon { display: none; }
.fyb-acc__bp #buddypress .bp-feedback p { margin: 0; padding: 0; color: var(--teal-800); }
.fyb-acc__bp #buddypress .bp-feedback.warning { background: var(--danger-soft); }
.fyb-acc__bp #buddypress .bp-feedback.warning p { color: var(--danger); font-weight: 600; }
.fyb-acc__bp #buddypress form > label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--white);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
}
.fyb-acc__bp #buddypress form > label input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--teal-600); }
.fyb-acc__bp #buddypress form > label.warn input[type="checkbox"] { accent-color: var(--danger); }
.fyb-acc__bp #buddypress .submit { margin: 16px 0 0; text-align: right; }
.fyb-acc__bp #buddypress input[type="submit"],
.fyb-acc__bp #buddypress #bp-data-export button {
	display: inline-flex;
	align-items: center;
	padding: 11px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--teal-600);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 10px 20px -12px rgba(6, 87, 85, .9);
	transition: background .15s ease, transform .15s ease;
}
.fyb-acc__bp #buddypress input[type="submit"]:hover,
.fyb-acc__bp #buddypress #bp-data-export button:hover { background: var(--teal-700); transform: translateY(-1px); }
.fyb-acc__bp #buddypress #delete-account-button { background: var(--danger); box-shadow: 0 10px 20px -12px rgba(185, 28, 28, .9); }
.fyb-acc__bp #buddypress input[type="submit"]:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.fyb-acc__bp #buddypress #bp-data-export { margin: 4px 0 20px; }

/* Unduh data: daftar isi jadi chip */
.fyb-acc__bp #buddypress #item-body > ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 16px;
	padding: 0;
	list-style: none;
}
.fyb-acc__bp #buddypress #item-body > ul li {
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--surface);
	font-size: 12.5px;
	color: var(--gray-700);
}

/* Notifikasi email: tabel jadi daftar baris dengan pilihan Ya/Tidak */
.fyb-acc__bp #buddypress table.notification-settings {
	width: 100%;
	margin: 0 0 18px;
	border: 1px solid var(--border);
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.fyb-acc__bp #buddypress table.notification-settings th,
.fyb-acc__bp #buddypress table.notification-settings td { padding: 12px 14px; border: 0; border-top: 1px solid var(--border); background: var(--white); font-size: 13.5px; text-align: left; vertical-align: middle; }
.fyb-acc__bp #buddypress table.notification-settings thead th { border-top: 0; background: var(--surface); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--teal-700); }
.fyb-acc__bp #buddypress table.notification-settings .icon { display: none; }
.fyb-acc__bp #buddypress table.notification-settings .yes,
.fyb-acc__bp #buddypress table.notification-settings .no { width: 64px; text-align: center; }
.fyb-acc__bp #buddypress table.notification-settings input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--teal-600); cursor: pointer; }
.fyb-acc__bp #buddypress table.notification-settings tbody tr:hover td { background: var(--surface); }

@media (max-width: 860px) {
	.fyb-acc { grid-template-columns: minmax(0, 1fr); }
	.fyb-tabs.fyb-acc__nav {
		flex-direction: row;
		gap: 6px;
		padding: 12px;
		border-right: 0;
		border-bottom: 1px solid var(--border);
		overflow-x: auto;
		scrollbar-width: none;
	}
	.fyb-tabs.fyb-acc__nav::-webkit-scrollbar { display: none; }
	.fyb-acc__navtitle { display: none; }
	.fyb-tabs__item.fyb-acc__item { flex-shrink: 0; padding: 7px 12px 7px 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--white); }
	.fyb-acc__ico { width: 28px; height: 28px; border-radius: 50%; box-shadow: none; background: var(--teal-50); }
	.fyb-acc__lbl small { display: none; }
	.fyb-acc__lbl strong { font-size: 13px; white-space: nowrap; }
	.fyb-acc__item.is-danger { margin-top: 0; }
	.fyb-tabs__item.fyb-acc__item.is-active { border-color: transparent; }
	.fyb-acc__body { padding: 20px 16px 22px; }
}
@media (max-width: 620px) {
	.fyb-acc__grid { grid-template-columns: minmax(0, 1fr); }
	.fyb-acc__save { flex-wrap: wrap; bottom: 74px; }
	.fyb-acc__dirty { flex-basis: 100%; }
	.fyb-acc__cardfoot { flex-direction: column; align-items: stretch; }
	.fyb-acc__cardfoot .fyb-btn { justify-content: center; }
}
.fyb-acc__url { margin: 10px 0 6px; }

/* Saran teman versi HP (Jelajah). */
.fyb-xstrip { display: none; padding: 16px 0 14px; }
.fyb-xstrip__head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 12px; }
.fyb-xstrip__head h2 { margin: 0; font-size: 16px; color: var(--teal-800); }
.fyb-xstrip__head a { font-size: 13px; font-weight: 600; color: var(--teal-600); }
.fyb-xstrip__row { display: flex; gap: 10px; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fyb-xstrip__row::-webkit-scrollbar { display: none; }
.fyb-xstrip__card {
	flex: 0 0 148px;
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: 14px 10px 12px;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: linear-gradient(180deg, var(--teal-50), var(--white) 55%);
	scroll-snap-align: start;
	text-align: center;
}
.fyb-xstrip__who { display: grid; justify-items: center; gap: 4px; min-width: 0; width: 100%; color: var(--ink); }
.fyb-xstrip__who img { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 4px; box-shadow: 0 0 0 3px var(--white), 0 6px 14px -8px rgba(2, 26, 25, .5); }
.fyb-xstrip__who strong { max-width: 100%; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-xstrip__who small { max-width: 100%; font-size: 11.5px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-xstrip .fyb-friendadd { width: 100%; }
.fyb-friendadd__btn.is-wide { width: 100%; justify-content: center; padding: 8px 12px; }
@media (max-width: 1080px) { .fyb-xstrip { display: block; } }

/* Notifikasi email: kolom ikon (sel kosong pertama) disembunyikan di SEMUA
   baris — bukan cuma di kepala tabel — supaya kolomnya sejajar; label
   pembaca layar BuddyPress tetap tersembunyi. */
.fyb-acc__bp #buddypress .bp-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.fyb-acc__bp #buddypress table.notification-settings { table-layout: auto; }
.fyb-acc__bp #buddypress table.notification-settings tr > :first-child { display: none; }
.fyb-acc__bp #buddypress table.notification-settings .title,
.fyb-acc__bp #buddypress table.notification-settings tbody td:nth-child(2) { width: 100%; line-height: 1.5; color: var(--gray-700); }
.fyb-acc__bp #buddypress table.notification-settings thead .title { color: var(--teal-700); }
.fyb-acc__bp #buddypress table.notification-settings .yes,
.fyb-acc__bp #buddypress table.notification-settings .no { min-width: 64px; white-space: nowrap; }
@media (max-width: 620px) {
	.fyb-acc__bp #buddypress table.notification-settings th,
	.fyb-acc__bp #buddypress table.notification-settings td { padding: 11px 10px; }
	.fyb-acc__bp #buddypress table.notification-settings .yes,
	.fyb-acc__bp #buddypress table.notification-settings .no { min-width: 46px; }
}

/* ==========================================================================
   Kolom kanan beranda
   ========================================================================== */
.fyb-right {
	max-height: calc(100vh - var(--topbar-h) - var(--gap) * 2);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.fyb-right::-webkit-scrollbar { display: none; }

/* Kartu "Kamu" */
.fyb-mecard { overflow: hidden; }
.fyb-mecard__cover {
	display: block;
	height: 64px;
	background:
		radial-gradient(90% 120% at 100% 0%, rgba(58, 161, 159, .45), transparent 60%),
		linear-gradient(150deg, #065755, #03302f);
	background-size: cover;
	background-position: center;
}
.fyb-mecard__body { display: grid; justify-items: center; gap: 4px; padding: 0 16px 16px; text-align: center; }
.fyb-mecard__avatar { margin-top: -32px; }
.fyb-mecard__avatar img { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--white); background: var(--white); box-shadow: 0 6px 16px -8px rgba(2, 26, 25, .6); }
.fyb-mecard__name { display: grid; gap: 1px; color: var(--ink); }
.fyb-mecard__name strong { font-family: var(--font-heading); font-size: 16px; }
.fyb-mecard__name small { font-size: 12.5px; color: var(--gray-500); }
.fyb-mecard__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
	margin: 10px 0 4px;
	padding: 10px 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.fyb-mecard__stats a { display: grid; gap: 1px; padding: 2px 0; border-radius: 10px; color: var(--ink); transition: background .15s ease; }
.fyb-mecard__stats a + a { border-left: 1px solid var(--border); border-radius: 0; }
.fyb-mecard__stats a:hover { background: var(--surface); }
.fyb-mecard__stats strong { font-family: var(--font-heading); font-size: 17px; color: var(--teal-800); }
.fyb-mecard__stats span { font-size: 11.5px; color: var(--gray-500); }
.fyb-mecard__quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 8px; }
.fyb-mecard__quick a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 6px;
	border-radius: 999px;
	background: var(--teal-50);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--teal-700);
	transition: background .15s ease;
}
.fyb-mecard__quick a:hover { background: var(--teal-100); }

/* Lagi dijual */
.fyb-mteaser .fyb-panel__body--tight { padding: 6px 8px 10px; }
.fyb-mteaser .fyb-minilisting { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; transition: background .15s ease; }
.fyb-mteaser .fyb-minilisting:hover { background: var(--surface); }
.fyb-mteaser .fyb-minilisting img,
.fyb-mteaser .fyb-minilisting__ph { width: 58px; height: 58px; flex-shrink: 0; border-radius: 12px; object-fit: cover; }
.fyb-mteaser .fyb-minilisting__info { display: grid; gap: 3px; min-width: 0; }
.fyb-mteaser .fyb-minilisting__info strong { white-space: normal; font-size: 13.5px; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fyb-mteaser .fyb-minilisting__info .fyb-minilisting__price { justify-self: start; padding: 2px 9px; border-radius: 999px; background: var(--teal-50); font-family: var(--font-heading); font-size: 12.5px; font-weight: 700; color: var(--teal-700); }
.fyb-mteaser .fyb-minilisting__info .fyb-minilisting__city { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--gray-500); }

/* Grup aktif */
.fyb-gteaser__list { margin: 0; padding: 6px 8px 10px; list-style: none; }
.fyb-gteaser__item { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 12px; color: var(--ink); transition: background .15s ease; }
.fyb-gteaser__item:hover { background: var(--surface); }
.fyb-gteaser__item .fyb-xgroups__avatar { width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
.fyb-gteaser__text { flex: 1; min-width: 0; display: grid; }
.fyb-gteaser__text strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-gteaser__text small { font-size: 12px; color: var(--gray-500); }
.fyb-gteaser__join { flex-shrink: 0; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--teal-200); font-size: 12px; font-weight: 700; color: var(--teal-700); }
.fyb-gteaser__item:hover .fyb-gteaser__join { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }

/* ==========================================================================
   Halaman Anggota & kartu anggota
   ========================================================================== */
.fyb-members { gap: 16px; }
.fyb-members__bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.fyb-members__bar .fyb-xtabs { margin-top: 0; }
.fyb-members__bar .fyb-xtabs__item .fyb-icon { margin-right: -2px; }
.fyb-members__sort { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.fyb-members__sort a { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .85); }
.fyb-members__sort a.is-active { background: var(--white); color: var(--teal-800); }
.fyb-members__tip {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid #fde68a;
	border-radius: var(--radius);
	background: #fffbeb;
	color: #92400e;
}
.fyb-members__tip > span:first-child { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; background: #fef3c7; }
.fyb-members__tip > span:nth-child(2) { flex: 1; display: grid; gap: 1px; }
.fyb-members__tip strong { font-size: 14px; }
.fyb-members__tip small { font-size: 12.5px; color: #b45309; }
.fyb-members__tip:hover { background: #fef3c7; }

.fyb-membergrid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.fyb-mcard { border-radius: 18px; }
.fyb-mcard__cover {
	position: relative;
	height: 78px;
	background:
		radial-gradient(90% 120% at 100% 0%, rgba(58, 161, 159, .45), transparent 60%),
		linear-gradient(150deg, #065755, #03302f);
	background-size: cover;
	background-position: center;
}
.fyb-mcard__near {
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	color: var(--teal-700);
}
.fyb-mcard__near.is-me { left: auto; right: 10px; background: var(--teal-600); color: #fff; }
.fyb-mcard__avatar { margin-top: -42px; width: 82px; }
.fyb-mcard__avatar img { width: 78px; height: 78px; border: 4px solid var(--white); box-shadow: 0 8px 18px -10px rgba(2, 26, 25, .6); }
.fyb-mcard__body { align-items: center; text-align: center; padding: 8px 14px 14px; }
.fyb-mcard__body h3 { margin: 4px 0 2px; font-size: 15.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fyb-mcard__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 0 0 4px; }
.fyb-mcard__city { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 12px; font-size: 12px; font-weight: 600; color: var(--teal-700); }
.fyb-mcard__city.is-empty { color: var(--gray-400); font-weight: 500; }
.fyb-mcard__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	width: 100%;
	margin: 0 0 14px;
	padding: 9px 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.fyb-mcard__stats span { display: grid; gap: 1px; font-size: 11px; }
.fyb-mcard__stats span + span { border-left: 1px solid var(--border); }
.fyb-mcard__stats strong { font-size: 16px; color: var(--teal-800); }
.fyb-mcard__actions { width: 100%; align-items: center; gap: 8px; }
.fyb-mcard__actions .fyb-friendadd { flex: 1; }
.fyb-mcard__actions .fyb-inlineform { flex: 1; }
.fyb-mcard__actions .fyb-inlineform .fyb-btn { width: 100%; justify-content: center; }
.fyb-mcard__btn,
.fyb-mcard__state {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid var(--border);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--gray-700);
}
.fyb-mcard__btn:hover { border-color: var(--teal-200); color: var(--teal-700); }
.fyb-mcard__state { background: var(--surface); color: var(--gray-500); }
.fyb-mcard__state.is-friend { border-color: var(--teal-100); background: var(--teal-50); color: var(--teal-700); }
.fyb-mcard__msg {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--border);
	color: var(--teal-700);
	transition: background .15s ease, border-color .15s ease;
}
.fyb-mcard__msg:hover { background: var(--teal-50); border-color: var(--teal-200); }
.fyb-mcard.is-me { box-shadow: 0 0 0 2px var(--teal-200); }
@media (max-width: 620px) {
	.fyb-membergrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.fyb-mcard__body { padding: 8px 10px 12px; }
	.fyb-mcard__stats strong { font-size: 14px; }
	.fyb-mcard__stats span { font-size: 10px; }
	.fyb-members__bar { align-items: stretch; }
	.fyb-members__sort { align-self: flex-start; }
}

/* ==========================================================================
   Arsip cerita
   ========================================================================== */
.fyb-sarch { gap: 16px; }
.fyb-sarch__heroin { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fyb-sarch__heroin .fyb-xhero__top p { margin-bottom: 0; max-width: 520px; }
.fyb-sarch__new {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 10px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--white);
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--teal-800);
	cursor: pointer;
	box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .6);
	transition: transform .15s ease;
}
.fyb-sarch__new:hover { transform: translateY(-1px); }
.fyb-sarch__stats { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.fyb-sarch__stats span {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .16);
	font-size: 12.5px;
	color: rgba(255, 255, 255, .85);
}
.fyb-sarch__stats strong { font-family: var(--font-heading); font-size: 15px; color: #fff; }
.fyb-sarch__stats em { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 12px; font-style: normal; color: rgba(255, 255, 255, .7); }

/* Sorotan: lingkaran ala profil */
.fyb-sarch__hl { display: flex; gap: 18px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.fyb-sarch__hl::-webkit-scrollbar { display: none; }
.fyb-sarch__hlitem { position: relative; display: grid; justify-items: center; gap: 3px; flex: 0 0 86px; text-align: center; }
.fyb-sarch__hlring {
	display: block;
	width: 74px;
	height: 74px;
	padding: 3px;
	border: 0;
	border-radius: 50%;
	background: conic-gradient(from 210deg, #7cc6c4, var(--teal-600), #f59e0b, #7cc6c4);
	cursor: pointer;
	transition: transform .15s ease;
}
.fyb-sarch__hlring:hover { transform: scale(1.04); }
.fyb-sarch__hlring img,
.fyb-sarch__hlring span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--white); object-fit: cover; }
.fyb-sarch__hlitem strong { max-width: 100%; margin-top: 4px; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-sarch__hlitem small { font-size: 11px; color: var(--gray-500); }
.fyb-sarch__hldel { position: absolute; top: 0; right: 2px; margin: 0; }
.fyb-sarch__hldel button {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 2px solid var(--white);
	border-radius: 50%;
	background: var(--gray-600);
	font-size: 14px;
	line-height: 1;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity .15s ease, background .15s ease;
}
.fyb-sarch__hlitem:hover .fyb-sarch__hldel button,
.fyb-sarch__hldel button:focus-visible { opacity: 1; }
.fyb-sarch__hldel button:hover { background: var(--danger); }
@media (hover: none) { .fyb-sarch__hldel button { opacity: 1; } }

/* Kisi cerita 9:16 */
.fyb-sarch__month { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 10px; font-size: 14px; color: var(--teal-800); }
.fyb-xsec__head + .fyb-sarch__month { margin-top: 2px; }
.fyb-sarch__month span { font-size: 12px; font-weight: 500; color: var(--gray-500); }
.fyb-storygrid.fyb-sarch__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.fyb-sarch__cell { position: relative; }
.fyb-sarch__shot {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 14px;
	background: var(--teal-50);
	cursor: pointer;
	box-shadow: 0 10px 22px -16px rgba(2, 26, 25, .7);
	transition: transform .18s ease, box-shadow .18s ease;
}
.fyb-sarch__shot:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -16px rgba(2, 26, 25, .75); }
.fyb-sarch__shot img { width: 100%; height: 100%; object-fit: cover; }
.fyb-sarch__plain { display: grid; place-items: center; width: 100%; height: 100%; padding: 14px; font-size: 13px; font-weight: 700; line-height: 1.35; color: #fff; text-align: center; overflow-wrap: anywhere; }
.fyb-sarch__foot {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	justify-content: space-between;
	padding: 26px 9px 8px;
	background: linear-gradient(transparent, rgba(2, 26, 25, .75));
	font-size: 11.5px;
	font-weight: 700;
	color: #fff;
}
.fyb-sarch__foot span { display: inline-flex; align-items: center; gap: 3px; }
.fyb-sarch__left,
.fyb-sarch__pinned {
	position: absolute;
	top: 8px;
	left: 8px;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(225, 29, 72, .92);
	font-size: 11px;
	font-weight: 700;
	color: #fff;
}
.fyb-sarch__pinned { left: auto; right: 8px; background: rgba(255, 255, 255, .92); color: var(--teal-700); }

/* Menu ⋯ pemilik */
.fyb-sarch__menu { position: absolute; top: 6px; left: 6px; z-index: 2; }
.fyb-sarch__cell:has(.fyb-sarch__left) .fyb-sarch__menu { top: 34px; }
.fyb-sarch__menu summary {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(2, 26, 25, .55);
	backdrop-filter: blur(4px);
	color: #fff;
	cursor: pointer;
	list-style: none;
	opacity: 0;
	transition: opacity .15s ease, background .15s ease;
}
.fyb-sarch__menu summary::-webkit-details-marker { display: none; }
.fyb-sarch__cell:hover .fyb-sarch__menu summary,
.fyb-sarch__menu[open] summary,
.fyb-sarch__menu summary:focus-visible { opacity: 1; }
.fyb-sarch__menu[open] summary { background: var(--teal-700); }
@media (hover: none) { .fyb-sarch__menu summary { opacity: 1; } }
.fyb-sarch__panel {
	position: absolute;
	top: 36px;
	left: 0;
	width: 230px;
	padding: 12px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--white);
	box-shadow: 0 20px 40px -18px rgba(2, 26, 25, .45);
	animation: fyb-account-in .14s ease-out;
}
.fyb-sarch__label { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); }
.fyb-sarch__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fyb-sarch__tags form { margin: 0; }
.fyb-sarch__tags button { padding: 4px 10px; border: 0; border-radius: 999px; background: var(--teal-50); font: inherit; font-size: 12px; font-weight: 700; color: var(--teal-700); cursor: pointer; }
.fyb-sarch__tags button:hover { background: var(--danger-soft); color: var(--danger); }
.fyb-sarch__pin { display: grid; gap: 6px; margin: 0 0 10px; }
.fyb-sarch__pin .fyb-input { padding: 8px 10px; font-size: 13px; }
.fyb-sarch__del { margin: 0; padding-top: 10px; border-top: 1px solid var(--border); }
.fyb-sarch__del button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--danger); cursor: pointer; }

.fyb-sarch__empty { display: grid; justify-items: center; gap: 10px; padding: 28px 16px; border: 1.5px dashed var(--border); border-radius: 16px; text-align: center; }
.fyb-sarch__empty span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--teal-50); color: var(--teal-500); }
.fyb-sarch__empty p { margin: 0; max-width: 360px; font-size: 13.5px; color: var(--gray-500); }

@media (max-width: 620px) {
	.fyb-sarch__heroin { flex-direction: column; }
	.fyb-sarch__stats em { margin-left: 0; flex-basis: 100%; }
	.fyb-storygrid.fyb-sarch__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
	.fyb-sarch__shot { border-radius: 10px; }
	.fyb-sarch__panel { width: 200px; }
	.fyb-sarch__cell:nth-child(3n) .fyb-sarch__panel { left: auto; right: -6px; }
}
.fyb-sarch__cell:has(.fyb-sarch__menu[open]) { z-index: 6; }
.fyb-mcard__avatar { position: relative; z-index: 1; }

/* ==========================================================================
   Reels — hero sinema + kartu
   ========================================================================== */
.fyb-reels { display: grid; gap: 16px; }
.fyb-rhero {
	position: relative;
	overflow: hidden;
	padding: 26px 26px 0;
	border-radius: var(--radius);
	background:
		radial-gradient(70% 120% at 100% 0%, rgba(225, 29, 72, .28), transparent 55%),
		radial-gradient(60% 100% at 0% 100%, rgba(13, 132, 130, .45), transparent 60%),
		linear-gradient(160deg, #0b1817 0%, #071211 100%);
	color: #fff;
	box-shadow: 0 20px 40px -26px rgba(0, 0, 0, .8);
}
.fyb-rhero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 14px);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
	pointer-events: none;
}
.fyb-rhero__in { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.fyb-rhero__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	padding: 4px 11px;
	border-radius: 999px;
	background: linear-gradient(90deg, #e11d48, #f97316);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
}
.fyb-rhero__text h1 { margin: 0 0 6px; font-size: 25px; line-height: 1.2; color: #fff; }
.fyb-rhero__text p { margin: 0; max-width: 560px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .75); }
.fyb-rhero__new {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
	padding: 11px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--white);
	font: inherit;
	font-size: 14px;
	font-weight: 800;
	color: #0b1817;
	cursor: pointer;
	box-shadow: 0 12px 26px -14px rgba(255, 255, 255, .4);
	transition: transform .15s ease;
}
.fyb-rhero__new:hover { transform: translateY(-1px) scale(1.02); }
.fyb-rhero__stats { position: relative; display: flex; flex-wrap: wrap; gap: 22px; margin-top: 20px; }
.fyb-rhero__stats span { display: grid; font-size: 12px; color: rgba(255, 255, 255, .6); }
.fyb-rhero__stats strong { font-family: var(--font-heading); font-size: 20px; color: #fff; }
.fyb-rhero__tabs { position: relative; display: flex; gap: 4px; margin: 18px -26px 0; padding: 0 20px; border-top: 1px solid rgba(255, 255, 255, .08); overflow-x: auto; scrollbar-width: none; }
.fyb-rhero__tabs::-webkit-scrollbar { display: none; }
.fyb-rhero__tabs a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
	padding: 14px 12px 12px;
	border-bottom: 2px solid transparent;
	font-size: 14px;
	font-weight: 700;
	color: rgba(255, 255, 255, .6);
	transition: color .15s ease;
}
.fyb-rhero__tabs a span { padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 11.5px; }
.fyb-rhero__tabs a:hover { color: #fff; }
.fyb-rhero__tabs a.is-active { color: #fff; border-bottom-color: #f43f5e; }

.fyb-reelgrid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.fyb-reelcard { border-radius: 18px; box-shadow: 0 14px 28px -18px rgba(0, 0, 0, .7); }
.fyb-reelcard:hover { transform: translateY(-4px); box-shadow: 0 22px 36px -18px rgba(0, 0, 0, .75); }
.fyb-reelcard__shot img,
.fyb-reelcard__shot video { transition: transform .4s ease; }
.fyb-reelcard:hover .fyb-reelcard__shot img,
.fyb-reelcard:hover .fyb-reelcard__shot video { transform: scale(1.06); }
.fyb-reelcard__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 22%, transparent 50%, rgba(2, 20, 19, .92)); }
.fyb-reelcard__play {
	width: 54px;
	height: 54px;
	background: rgba(255, 255, 255, .18);
	backdrop-filter: blur(6px);
	opacity: 0;
	transform: translate(-50%, -50%) scale(.85);
	transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
.fyb-reelcard:hover .fyb-reelcard__play,
.fyb-reelcard:focus-visible .fyb-reelcard__play { opacity: 1; transform: translate(-50%, -50%) scale(1); background: rgba(244, 63, 94, .92); }
@media (hover: none) { .fyb-reelcard__play { opacity: .9; transform: translate(-50%, -50%); } }
.fyb-reelcard__top { position: absolute; top: 9px; left: 9px; right: 9px; display: flex; justify-content: space-between; gap: 6px; }
.fyb-reelcard__top .fyb-reelcard__views { position: static; font-weight: 700; backdrop-filter: blur(4px); }
.fyb-reelcard__new { padding: 3px 8px; border-radius: 999px; background: #f43f5e; font-size: 11px; font-weight: 800; color: #fff; }
.fyb-reelcard__foot { gap: 6px; padding: 30px 11px 11px; background: none; }
.fyb-reelcard__who img { width: 28px; height: 28px; }
.fyb-reelcard__who strong { font-size: 13px; }
.fyb-reelcard__cap { font-size: 12.5px; }
.fyb-reelcard__stats { display: flex; gap: 12px; font-size: 12px; font-weight: 700; opacity: .9; }
.fyb-reelcard__stats span { display: inline-flex; align-items: center; gap: 4px; }

/* Kosong (Reels & Grup) */
.fyb-rempty { display: grid; justify-items: center; gap: 8px; padding: 40px 24px; text-align: center; }
.fyb-rempty__icon { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 4px; border-radius: 22px; background: linear-gradient(135deg, #f43f5e, #f97316); color: #fff; box-shadow: 0 14px 28px -14px rgba(225, 29, 72, .8); }
.fyb-rempty--light .fyb-rempty__icon { background: linear-gradient(135deg, var(--teal-500), var(--teal-700)); box-shadow: 0 14px 28px -14px rgba(6, 87, 85, .8); }
.fyb-rempty h2 { margin: 0; font-size: 18px; color: var(--teal-800); }
.fyb-rempty p { margin: 0 0 6px; max-width: 420px; font-size: 14px; color: var(--gray-500); }
.fyb-rempty .fyb-btn { display: inline-flex; align-items: center; gap: 8px; }

/* ==========================================================================
   Grup — direktori
   ========================================================================== */
.fyb-groups { gap: 16px; }
.fyb-groups .fyb-xhero__search { margin-top: 18px; }

.fyb-gmine { padding: 16px 0 14px; }
.fyb-gmine__row { display: flex; gap: 10px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
.fyb-gmine__row::-webkit-scrollbar { display: none; }
.fyb-gmine__item {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	max-width: 220px;
	padding: 7px 14px 7px 7px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--white);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ink);
	transition: border-color .15s ease, background .15s ease;
}
.fyb-gmine__item:hover { border-color: var(--teal-200); background: var(--teal-50); }
.fyb-gmine__item .fyb-xgroups__avatar { width: 34px; height: 34px; border-radius: 50%; font-size: 14px; }
.fyb-gmine__item > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fyb-groupgrid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.fyb-gcard { border-radius: 18px; }
.fyb-gcard.is-member { box-shadow: 0 0 0 2px var(--teal-200), var(--shadow-sm); }
.fyb-gcard__cover { height: 104px; }
.fyb-gcard__cover:not(.has-img) {
	background:
		radial-gradient(90% 120% at 100% 0%, rgba(58, 161, 159, .5), transparent 60%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 10px, transparent 10px 20px),
		linear-gradient(150deg, #065755, #03302f);
}
.fyb-gcard__status {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	backdrop-filter: blur(4px);
}
.fyb-gcard__joined {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--teal-600);
	font-size: 11px;
	font-weight: 700;
	color: #fff;
}
.fyb-gcard__photo { width: auto; margin: -34px 0 0 16px; }
.fyb-gcard__photo img,
.fyb-gcard__photo span {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border-radius: 18px;
	border: 4px solid var(--white);
	background: linear-gradient(135deg, var(--teal-400), var(--teal-700));
	box-shadow: 0 8px 18px -10px rgba(2, 26, 25, .6);
	object-fit: cover;
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 800;
	color: #fff;
}
.fyb-gcard__body { gap: 8px; padding: 10px 16px 16px; }
.fyb-gcard__body h3 { font-size: 16.5px; }
.fyb-gcard__desc { margin: 0; font-size: 13px; line-height: 1.55; color: var(--gray-600); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.fyb-gcard__desc.is-empty { color: var(--gray-400); font-style: italic; }
.fyb-gcard__people { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.fyb-gcard__faces { display: flex; }
.fyb-gcard__faces img { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--white); }
.fyb-gcard__faces img + img { margin-left: -8px; }
.fyb-gcard__people .fyb-gcard__meta { display: grid; gap: 0; }
.fyb-gcard__meta strong { font-size: 12.5px; color: var(--ink); }
.fyb-gcard__meta small { font-size: 11.5px; color: var(--gray-500); }
.fyb-gcard__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin-top: auto;
	padding: 9px 14px;
	border-radius: 999px;
	background: var(--teal-600);
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	transition: background .15s ease;
}
.fyb-gcard__go:hover { background: var(--teal-700); color: #fff; }
.fyb-gcard__go.is-member { background: var(--teal-50); color: var(--teal-700); }
.fyb-gcard__go.is-member:hover { background: var(--teal-100); }
.fyb-gcard__body { display: flex; flex-direction: column; }
.fyb-gcard__people + .fyb-gcard__go { margin-top: 10px; }

@media (max-width: 620px) {
	.fyb-rhero { padding: 20px 16px 0; }
	.fyb-rhero__in { flex-direction: column; }
	.fyb-rhero__text h1 { font-size: 21px; }
	.fyb-rhero__tabs { margin: 16px -16px 0; padding: 0 10px; }
	.fyb-reelgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.fyb-reelcard { border-radius: 14px; }
	.fyb-groupgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Marketplace — kepala terang & tenang, chip ekor, baris alat, kartu lapak
   ========================================================================== */
.fyb-market { gap: 14px; }
.fyb-mhead {
	padding: 22px 22px 18px;
	background:
		radial-gradient(70% 140% at 100% 0%, rgba(13, 132, 130, .08), transparent 60%),
		linear-gradient(180deg, var(--teal-50), var(--white) 70%);
}
.fyb-mhead__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.fyb-mhead__top h1 { margin: 0 0 4px; font-size: 23px; color: var(--teal-800); }
.fyb-mhead__top p { margin: 0; font-size: 13.5px; color: var(--gray-500); }
.fyb-mhead__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 9px 15px;
	border-radius: 999px;
	background: var(--teal-600);
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
	transition: background .15s ease;
}
.fyb-mhead__cta:hover { background: var(--teal-700); color: #fff; }
.fyb-mhead__cta.is-soft { background: var(--white); border: 1px solid var(--teal-200); color: var(--teal-700); }
.fyb-mhead__cta.is-soft:hover { background: var(--teal-50); }
.fyb-mhead__search {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 5px 5px 16px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--white);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fyb-mhead__search:focus-within { border-color: var(--teal-400); box-shadow: 0 0 0 3px rgba(13, 132, 130, .12); }
.fyb-mhead__search .fyb-icon { flex-shrink: 0; color: var(--gray-400); }
.fyb-mhead__search input { flex: 1; min-width: 0; padding: 9px 0; border: 0; background: transparent; font: inherit; font-size: 14.5px; color: var(--ink); outline: none; }
.fyb-mhead__search button {
	padding: 9px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--teal-50);
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--teal-700);
	cursor: pointer;
	transition: background .15s ease;
}
.fyb-mhead__search button:hover { background: var(--teal-100); }
.fyb-mhead__clear { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--gray-400); }
.fyb-mhead__clear:hover { background: var(--surface); color: var(--ink); }

.fyb-mchips { display: flex; gap: 6px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
.fyb-mchips::-webkit-scrollbar { display: none; }
.fyb-mchips a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 6px 13px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--white);
	font-size: 13px;
	font-weight: 600;
	color: var(--gray-700);
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.fyb-mchips a span { font-size: 11.5px; font-weight: 600; color: var(--gray-400); }
.fyb-mchips a:hover { border-color: var(--teal-200); color: var(--teal-700); }
.fyb-mchips a.is-active { border-color: var(--teal-200); background: var(--teal-50); color: var(--teal-800); }
.fyb-mchips a.is-active span { color: var(--teal-600); }

/* Baris alat */
.fyb-mbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 4px; }
.fyb-mbar__count { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--gray-600); }
.fyb-mbar__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fyb-mbar__near,
.fyb-mbar__select {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--white);
	font-size: 13px;
	font-weight: 600;
	color: var(--gray-700);
}
.fyb-mbar__near .fyb-icon,
.fyb-mbar__select .fyb-icon { flex-shrink: 0; color: var(--teal-600); }
.fyb-mbar__near:hover { border-color: var(--teal-200); color: var(--teal-700); }
.fyb-mbar__near.is-active { border-color: var(--teal-200); background: var(--teal-50); color: var(--teal-800); }
.fyb-mbar__select select {
	padding: 0 4px 0 0;
	border: 0;
	background: transparent;
	font: inherit;
	color: inherit;
	cursor: pointer;
	outline: none;
	appearance: auto;
}
.fyb-mbar__select:focus-within { border-color: var(--teal-400); }

/* Kartu lapak — dirapikan, tetap kalem */
.fyb-market__grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.fyb-lcard { border-radius: 16px; overflow: hidden; }
.fyb-lcard__media { overflow: hidden; }
.fyb-lcard__media img { transition: transform .35s ease; }
.fyb-lcard:hover .fyb-lcard__media img { transform: scale(1.04); }
.fyb-lcard__new {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	font-size: 11px;
	font-weight: 700;
	color: var(--teal-700);
	box-shadow: 0 2px 6px rgba(2, 26, 25, .12);
}
.fyb-lcard__body { padding: 12px 14px 14px; gap: 5px; }
.fyb-lcard__title { font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fyb-lcard__price { font-size: 17px; color: var(--teal-700); }
.fyb-lcard__foot { padding-top: 10px; border-top: 1px solid var(--border); margin-top: auto; }
.fyb-lcard__city { display: inline-flex; align-items: center; gap: 3px; }
.fyb-lcard__city .fyb-icon { color: var(--teal-500); }

@media (max-width: 620px) {
	.fyb-mhead { padding: 18px 16px 14px; }
	.fyb-mhead__top h1 { font-size: 21px; }
	.fyb-mhead__top { margin-bottom: 14px; }
	.fyb-mbar { padding: 0; }
	.fyb-mbar__tools { width: 100%; }
	.fyb-market__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.fyb-lcard__body { padding: 10px 11px 12px; }
	.fyb-lcard__price { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .fyb-lcard__media img { transition: none; } }
@media (max-width: 620px) {
	.fyb-mhead__top { flex-direction: column; align-items: stretch; gap: 12px; }
	.fyb-mhead__cta { align-self: flex-start; }
	.fyb-mbar__tools { flex-wrap: nowrap; }
	.fyb-mbar__select { flex: 1; min-width: 0; }
	.fyb-mbar__select select { width: 100%; min-width: 0; text-overflow: ellipsis; }
	.fyb-mbar__near { flex-shrink: 0; }
}

/* Marketplace: hero sebahasa dengan Jelajah. */
.fyb-mhero .fyb-xhero__search { margin-top: 18px; }
.fyb-mhero .fyb-mhead__clear { color: var(--gray-400); }
.fyb-mhero .fyb-sarch__heroin .fyb-xhero__top p { max-width: 560px; }

/* ==========================================================================
   Profil anggota
   ========================================================================== */
.fyb-pf { overflow: visible; border-radius: 20px; }
.fyb-pf__cover {
	position: relative;
	height: 230px;
	border-radius: 20px 20px 0 0;
	overflow: hidden;
}
.fyb-pf__cover:not(.has-img) {
	background:
		radial-gradient(70% 120% at 100% 0%, rgba(58, 161, 159, .45), transparent 60%),
		radial-gradient(60% 100% at 0% 100%, rgba(13, 132, 130, .35), transparent 60%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 12px, transparent 12px 24px),
		linear-gradient(150deg, #065755, #03302f);
}
.fyb-pf__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(2, 26, 25, .35)); pointer-events: none; }
.fyb-pf__coverbtn {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 13px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--teal-800);
	cursor: pointer;
	box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5);
	transition: background .15s ease;
}
.fyb-pf__coverbtn:hover { background: var(--white); }

.fyb-pf__head { display: flex; align-items: flex-end; gap: 20px; padding: 0 24px 18px; flex-wrap: wrap; }
.fyb-pf__avatar { position: relative; margin-top: -70px; flex-shrink: 0; }
.fyb-pf__avatar img {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	border: 5px solid var(--white);
	background: var(--white);
	box-shadow: 0 0 0 3px var(--teal-200), 0 14px 30px -14px rgba(2, 26, 25, .6);
}
.fyb-pf__ident { flex: 1; min-width: 200px; padding-bottom: 4px; }
.fyb-pf__ident h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0; font-size: 26px; color: var(--ink); }
.fyb-pf__handle { margin: 2px 0 10px; font-size: 14px; color: var(--gray-500); }
.fyb-pf__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.fyb-pf__pills span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--surface);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--gray-700);
}
.fyb-pf__pills .fyb-icon { color: var(--teal-600); }
.fyb-pf__pills .is-seller { background: var(--teal-50); color: var(--teal-800); }

.fyb-pf__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; }
.fyb-pf__btn,
.fyb-pf__friend .fyb-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--white);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--gray-700);
	transition: background .15s ease, border-color .15s ease;
}
.fyb-pf__btn:hover,
.fyb-pf__friend .fyb-btn:hover { border-color: var(--teal-200); background: var(--teal-50); color: var(--teal-800); }
.fyb-pf__btn.is-primary { border-color: var(--teal-600); background: var(--teal-600); color: #fff; box-shadow: 0 10px 20px -12px rgba(6, 87, 85, .9); }
.fyb-pf__btn.is-primary:hover { background: var(--teal-700); color: #fff; }
.fyb-pf__friend .fyb-inlineform { margin: 0; }
.fyb-pf__more { position: relative; }
.fyb-pf__more summary {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--border);
	border-radius: 50%;
	color: var(--gray-600);
	cursor: pointer;
	list-style: none;
}
.fyb-pf__more summary::-webkit-details-marker { display: none; }
.fyb-pf__more summary:hover,
.fyb-pf__more[open] summary { background: var(--surface); }
.fyb-pf__menu {
	position: absolute;
	top: 46px;
	right: 0;
	z-index: 5;
	min-width: 180px;
	padding: 8px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--white);
	box-shadow: 0 18px 36px -16px rgba(2, 26, 25, .45);
}
.fyb-pf__menu form { margin: 0; }
.fyb-pf__menu button { width: 100%; justify-content: flex-start; }

/* Tab = angka + label */
.fyb-tabs.fyb-ptabs { display: flex; gap: 4px; padding: 0 16px; border-top: 1px solid var(--border); }
.fyb-tabs__item.fyb-ptabs__item {
	display: grid;
	justify-items: center;
	gap: 0;
	min-width: 86px;
	padding: 12px 14px 10px;
	border-bottom: 3px solid transparent;
	color: var(--gray-500);
}
.fyb-ptabs__item strong { font-family: var(--font-heading); font-size: 18px; line-height: 1.2; color: var(--ink); }
.fyb-ptabs__item span { font-size: 12.5px; font-weight: 600; }
.fyb-tabs__item.fyb-ptabs__item:hover { background: var(--surface); }
.fyb-tabs__item.fyb-ptabs__item.is-active { border-bottom-color: var(--teal-600); color: var(--teal-700); }
.fyb-ptabs__item.is-active strong { color: var(--teal-700); }

/* Kiriman: dua kolom (Tentang | feed) */
.fyb-pf__layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; align-items: start; }
.fyb-pf__side { position: sticky; top: calc(var(--topbar-h) + var(--gap)); display: grid; gap: 16px; }
.fyb-pf__feed { display: grid; gap: 16px; min-width: 0; }
.fyb-pf__card { padding: 16px 16px 14px; }
.fyb-pf__card h2 { margin: 0 0 12px; font-size: 16px; color: var(--teal-800); }
.fyb-pf__card h2 span { font-family: var(--font-body, inherit); font-size: 13px; font-weight: 600; color: var(--gray-400); }
.fyb-pf__cardhead { display: flex; align-items: baseline; justify-content: space-between; }
.fyb-pf__cardhead a { font-size: 13px; font-weight: 600; color: var(--teal-600); }
.fyb-pf__facts { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fyb-pf__facts li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--gray-700); }
.fyb-pf__facts .fyb-icon { flex-shrink: 0; margin-top: 1px; color: var(--teal-600); }
.fyb-pf__facts strong { color: var(--ink); }
.fyb-pf__facts a { font-weight: 600; color: var(--teal-600); }
.fyb-pf__facts .is-muted { color: var(--gray-400); }
.fyb-pf__friends { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.fyb-pf__friends a { display: grid; gap: 4px; min-width: 0; text-align: center; color: var(--ink); }
.fyb-pf__friends img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 14px; object-fit: cover; transition: transform .15s ease; }
.fyb-pf__friends a:hover img { transform: scale(1.04); }
.fyb-pf__friends span { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-pf__groups { padding: 0; }
.fyb-pf__groups .fyb-gteaser__item { padding: 7px 4px; }

/* Foto */
.fyb-pf__photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.fyb-pf__photo { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--teal-50); }
.fyb-pf__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.fyb-pf__photo:hover img { transform: scale(1.05); }

@media (max-width: 1080px) {
	.fyb-pf__layout { grid-template-columns: minmax(0, 1fr); }
	.fyb-pf__side { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 620px) {
	.fyb-pf__cover { height: 150px; }
	.fyb-pf__head { flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 16px 16px; }
	.fyb-pf__avatar { margin-top: -54px; }
	.fyb-pf__avatar img { width: 104px; height: 104px; border-width: 4px; }
	.fyb-pf__ident h1 { font-size: 22px; }
	.fyb-pf__actions { width: 100%; }
	.fyb-pf__btn.is-primary { flex: 1; justify-content: center; }
	.fyb-tabs.fyb-ptabs { padding: 0 6px; overflow-x: auto; scrollbar-width: none; }
	.fyb-tabs.fyb-ptabs::-webkit-scrollbar { display: none; }
	.fyb-tabs__item.fyb-ptabs__item { min-width: 72px; padding: 10px 8px 8px; flex: 1; }
	.fyb-ptabs__item strong { font-size: 16px; }
	.fyb-pf__side { grid-template-columns: minmax(0, 1fr); }
	.fyb-pf__photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
	.fyb-pf__photo { border-radius: 8px; }
}
@media (max-width: 620px) {
	.fyb-pf__actions { flex-wrap: nowrap; gap: 6px; }
	.fyb-pf__btn.is-primary { min-width: 0; padding-left: 12px; padding-right: 12px; }
	.fyb-pf__friend { min-width: 0; }
	.fyb-pf__friend .fyb-btn { padding: 9px 12px; white-space: nowrap; font-size: 13px; }
	.fyb-pf__more { flex-shrink: 0; }
	.fyb-pf__actions .fyb-pf__btn:not(.is-primary) { flex: 1; justify-content: center; }
}

/* Nama tidak menempel ke sampul: beri ruang di atas kepala profil (foto
   tetap menumpang sampul karena margin negatifnya ikut disesuaikan). */
.fyb-pf__head { padding-top: 18px; }
.fyb-pf__avatar { margin-top: -88px; }
@media (max-width: 620px) {
	.fyb-pf__head { padding-top: 12px; }
	.fyb-pf__avatar { margin-top: -66px; }
}
.fyb-pf__head { align-items: flex-start; }
.fyb-pf__avatar { margin-top: -88px; }
.fyb-pf__actions { align-self: center; padding-bottom: 0; }
@media (max-width: 620px) {
	.fyb-pf__avatar { margin-top: -66px; }
	.fyb-pf__actions { align-self: stretch; }
}

/* Profil: kartu Tentang/Teman/Grup di KANAN kiriman (layar lebar). Di layar
   kecil tetap di atas kiriman — kalau di bawah, tertimbun gulir tak berujung. */
.fyb-pf__layout { grid-template-columns: minmax(0, 1fr) 290px; }
.fyb-pf__side { order: 2; }
@media (max-width: 1080px) {
	.fyb-pf__layout { grid-template-columns: minmax(0, 1fr); }
	.fyb-pf__side { order: 0; }
}

/* ==========================================================================
   Profil grup — memakai kerangka .fyb-pf, plus foto grup kotak-membulat
   ========================================================================== */
.fyb-gpf .fyb-pf__cover:not(.has-img) {
	background:
		radial-gradient(60% 120% at 0% 0%, rgba(58, 161, 159, .45), transparent 60%),
		radial-gradient(50% 90% at 100% 100%, rgba(13, 132, 130, .4), transparent 60%),
		radial-gradient(circle at 20px 20px, rgba(255, 255, 255, .07) 2px, transparent 2.5px) 0 0 / 28px 28px,
		linear-gradient(160deg, #075e5c, #032e2d);
}
.fyb-gpf .fyb-pf__head { align-items: flex-start; padding-top: 18px; }
.fyb-gpf__avatar { margin-top: -88px; }
.fyb-gpf__avatar img,
.fyb-gpf__initial {
	display: grid;
	place-items: center;
	width: 132px;
	height: 132px;
	border-radius: 30px;
	border: 5px solid var(--white);
	background: var(--white);
	object-fit: cover;
	box-shadow: 0 0 0 3px var(--teal-200), 0 14px 30px -14px rgba(2, 26, 25, .6);
}
.fyb-gpf__initial {
	background: linear-gradient(145deg, var(--teal-400, #3aa19f), var(--teal-700, #065755));
	font-family: var(--font-heading);
	font-size: 54px;
	font-weight: 700;
	color: #fff;
}
.fyb-gpf .fyb-pf__ident h1 { margin-bottom: 10px; }
.fyb-gpf__actions { padding-top: 6px; }
.fyb-gpf__join .generic-button { margin: 0; }
.fyb-gpf__join.fyb-groupjoin .generic-button a,
.fyb-gpf__join a,
.fyb-gpf__join button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 20px;
	border: 1px solid var(--teal-600);
	border-radius: 999px;
	background: var(--teal-600);
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 10px 20px -12px rgba(6, 87, 85, .9);
	transition: background .15s ease;
}
.fyb-gpf__join a:hover,
.fyb-gpf__join button:hover { background: var(--teal-700); color: #fff; }
.fyb-gpf__join .pending,
.fyb-gpf__join .membership-requested { background: var(--white); border-color: var(--border); color: var(--gray-600); box-shadow: none; }
.fyb-gpf__leave .generic-button { margin: 0; }
.fyb-gpf__leave a,
.fyb-gpf__leave button {
	display: flex;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	border-radius: 10px;
	background: none;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: #b42318;
	text-align: left;
	cursor: pointer;
}
.fyb-gpf__leave a:hover,
.fyb-gpf__leave button:hover { background: #fef3f2; }

.fyb-gpf__about {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	flex-wrap: wrap;
	margin: 0 24px 16px;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--surface);
}
.fyb-gpf__desc { flex: 1 1 320px; margin: 0; padding: 0; font-size: 14px; line-height: 1.6; color: var(--gray-700); }
.fyb-gpf__faces { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--gray-600); }
.fyb-gpf__faces:hover { color: var(--teal-700); }
.fyb-gpf__faces .fyb-gcard__faces img { width: 30px; height: 30px; border: 2px solid var(--surface); }

.fyb-gpf__admins { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fyb-gpf__admins a { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; color: var(--ink); }
.fyb-gpf__admins a:hover { background: var(--surface); }
.fyb-gpf__admins img { width: 40px; height: 40px; border-radius: 50%; }
.fyb-gpf__admins span { display: grid; min-width: 0; }
.fyb-gpf__admins strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-gpf__admins small { font-size: 12px; color: var(--teal-600); font-weight: 600; }


.fyb-gpf__label { display: flex; align-items: center; gap: 8px; margin: 6px 4px 10px; font-size: 15px; font-weight: 700; color: var(--teal-800); }
.fyb-gpf__label .fyb-icon { color: var(--teal-600); }
.fyb-gpf__label span { font-size: 13px; font-weight: 600; color: var(--gray-400); }
.fyb-membergrid + .fyb-gpf__label { margin-top: 18px; }

@media (max-width: 620px) {
	.fyb-gpf .fyb-pf__head { padding-top: 0; }
	.fyb-gpf__avatar { margin-top: -54px; }
	.fyb-gpf__avatar img,
	.fyb-gpf__initial { width: 96px; height: 96px; border-radius: 24px; border-width: 4px; font-size: 40px; }
	.fyb-gpf__about { margin: 0 16px 14px; }
	.fyb-gpf__extra { display: none; }
	.fyb-gpf__join { flex: 1; }
	.fyb-gpf__join a,
	.fyb-gpf__join button { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Kelola grup — menu samping + layar Anggota / Permintaan / Hapus sendiri
   ========================================================================== */
.fyb-gmanage-wrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.fyb-gmanage__main { display: grid; gap: 14px; min-width: 0; }
.fyb-gmanage__nav {
	position: sticky;
	top: calc(var(--topbar-h) + var(--gap));
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 12px 10px;
	border-radius: 18px;
	overflow: visible;
}
.fyb-gmanage__navtitle { margin: 2px 8px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-400); }
.fyb-gmanage__navitem {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 10px;
	border-radius: 12px;
	white-space: normal;
	color: var(--gray-700);
}
.fyb-gmanage__navicon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--surface);
	color: var(--teal-700);
	transition: background .15s ease, color .15s ease;
}
.fyb-gmanage__navtext { display: grid; min-width: 0; flex: 1; }
.fyb-gmanage__navtext strong { font-size: 14px; color: var(--ink); }
.fyb-gmanage__navtext small { font-size: 12px; font-weight: 500; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-gmanage__navbadge { padding: 1px 8px; border-radius: 999px; background: var(--teal-600); font-size: 11.5px; font-style: normal; font-weight: 700; color: #fff; }
.fyb-gmanage__navitem:hover { background: var(--surface); color: var(--ink); }
.fyb-gmanage__navitem.is-on { background: var(--teal-50); color: var(--teal-800); }
.fyb-gmanage__navitem.is-on .fyb-gmanage__navicon { background: var(--teal-600); color: #fff; }
.fyb-gmanage__navitem.is-on .fyb-gmanage__navtext strong { color: var(--teal-800); }
.fyb-gmanage__navitem.is-danger { margin: 8px 0 0; padding-top: 13px; border-top: 1px solid var(--border); border-radius: 0 0 12px 12px; }
.fyb-gmanage__navitem.is-danger .fyb-gmanage__navicon { background: var(--danger-soft, #fdecec); color: var(--danger); }
.fyb-gmanage__navitem.is-danger .fyb-gmanage__navtext strong { color: var(--danger); }
.fyb-gmanage__navitem.is-danger:hover { background: var(--danger-soft, #fdecec); }
.fyb-gmanage__navitem.is-danger.is-on { background: var(--danger-soft, #fdecec); color: var(--danger); }
.fyb-gmanage__navitem.is-danger.is-on .fyb-gmanage__navicon { background: var(--danger); color: #fff; }

.fyb-gmanage__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.fyb-gmanage__head h2 { margin: 0 0 2px; font-size: 17px; color: var(--ink); }
.fyb-gmanage__head p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gray-500); }

/* Anggota */
.fyb-gmm__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fyb-gmm__search {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 220px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--gray-400);
	transition: border-color .15s ease, background .15s ease;
}
.fyb-gmm__search:focus-within { border-color: var(--teal-400); background: var(--white); }
.fyb-gmm__search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); outline: none; }
.fyb-gmm__chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.fyb-gmm__chips::-webkit-scrollbar { display: none; }
.fyb-gmm__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 7px 12px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--white);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--gray-700);
	cursor: pointer;
}
.fyb-gmm__chip span { font-size: 11.5px; color: var(--gray-400); }
.fyb-gmm__chip:hover { border-color: var(--teal-200); }
.fyb-gmm__chip.is-on { border-color: var(--teal-200); background: var(--teal-50); color: var(--teal-800); }
.fyb-gmm__chip.is-on span { color: var(--teal-600); }

.fyb-gmm__list { display: grid; margin: 0; padding: 0; list-style: none; }
.fyb-gmm__row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-top: 1px solid var(--border); }
.fyb-gmm__row:first-child { border-top: 0; }
.fyb-gmm__row[hidden] { display: none; }
.fyb-gmm__who { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: var(--ink); }
.fyb-gmm__who img { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; }
.fyb-gmm__who span { display: grid; min-width: 0; }
.fyb-gmm__who strong { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-gmm__who strong em { font-style: normal; font-weight: 500; color: var(--gray-400); }
.fyb-gmm__who small { font-size: 12.5px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-gmm__who:hover strong { color: var(--teal-700); }
.fyb-gmm__row.is-banned .fyb-gmm__who { opacity: .6; }
.fyb-gmm__badge { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; background: var(--surface); font-size: 12px; font-weight: 700; color: var(--gray-600); }
.fyb-gmm__badge.is-admin { background: var(--teal-600); color: #fff; }
.fyb-gmm__badge.is-mod { background: var(--teal-50); color: var(--teal-800); }
.fyb-gmm__badge.is-banned { background: var(--danger-soft, #fdecec); color: var(--danger); }
.fyb-gmm__more summary { width: 36px; height: 36px; }
.fyb-gmm__spacer { width: 36px; flex-shrink: 0; }
.fyb-gmm__menu { top: 42px; min-width: 210px; padding: 6px; }
.fyb-gmm__act {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: 9px;
	background: none;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--gray-700);
	text-align: left;
	cursor: pointer;
}
.fyb-gmm__act .fyb-icon { color: var(--teal-600); }
.fyb-gmm__act:hover { background: var(--surface); }
.fyb-gmm__act.is-danger,
.fyb-gmm__act.is-danger .fyb-icon { color: var(--danger); }
.fyb-gmm__act.is-danger:hover { background: var(--danger-soft, #fdecec); }
.fyb-gmm__none { margin: 8px 0 0; padding: 18px; text-align: center; font-size: 13.5px; color: var(--gray-500); }

/* Permintaan */
.fyb-gmm__reqbtns { display: flex; gap: 6px; flex-shrink: 0; }
.fyb-gmm__reqbtns form { margin: 0; }
.fyb-gmm__reqbtns .fyb-pf__btn { padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.fyb-gmm__empty { display: grid; justify-items: center; gap: 4px; padding: 26px 12px 18px; text-align: center; }
.fyb-gmm__empty span { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%; background: var(--teal-50); color: var(--teal-600); }
.fyb-gmm__empty strong { font-size: 15px; color: var(--ink); }
.fyb-gmm__empty p { margin: 0; font-size: 13.5px; color: var(--gray-500); }

/* Hapus grup */
.fyb-gdel { border-color: rgba(185, 28, 28, .22); }
.fyb-gdel .fyb-gmanage__cardicon { background: var(--danger-soft, #fdecec); color: var(--danger); }
.fyb-gdel__lead { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; color: var(--gray-700); }
.fyb-gdel__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.fyb-gdel__list li { display: grid; gap: 2px; padding: 14px; border-radius: 14px; background: var(--surface); font-size: 12.5px; color: var(--gray-600); }
.fyb-gdel__list li span { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; border-radius: 10px; background: var(--white); color: var(--danger); }
.fyb-gdel__list strong { font-family: var(--font-heading); font-size: 20px; line-height: 1.2; color: var(--ink); }
.fyb-gdel__check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 13px 14px;
	border: 1px solid rgba(185, 28, 28, .2);
	border-radius: 12px;
	background: #fffafa;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--gray-700);
	cursor: pointer;
}
.fyb-gdel__check input { width: 17px; height: 17px; margin-top: 1px; flex-shrink: 0; accent-color: var(--danger); }
.fyb-gdel__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.fyb-gdel__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--danger);
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	transition: opacity .15s ease, filter .15s ease;
}
.fyb-gdel__btn:hover { filter: brightness(.92); }
.fyb-gdel__btn:disabled { opacity: .4; cursor: not-allowed; filter: none; }

@media (max-width: 1080px) {
	.fyb-gmanage-wrap { grid-template-columns: minmax(0, 1fr); }
	.fyb-gmanage__nav { position: static; display: flex; gap: 6px; padding: 6px; overflow-x: auto; scrollbar-width: none; }
	.fyb-gmanage__nav::-webkit-scrollbar { display: none; }
	.fyb-gmanage__navtitle,
	.fyb-gmanage__navtext small { display: none; }
	.fyb-gmanage__navitem { flex-shrink: 0; gap: 8px; padding: 6px 12px 6px 6px; white-space: nowrap; }
	.fyb-gmanage__navicon { width: 30px; height: 30px; border-radius: 9px; }
	.fyb-gmanage__navitem.is-danger { margin: 0 0 0 auto; padding-top: 6px; border-top: 0; border-radius: 12px; }
}
@media (max-width: 620px) {
	.fyb-gmanage__navtext strong { font-size: 13px; }
	.fyb-gmm__badge.is-member { display: none; }
	.fyb-gmm__row { gap: 8px; padding: 10px 0; }
	.fyb-gmm__reqbtns .fyb-pf__btn { padding: 7px 11px; }
	.fyb-gdel__list { grid-template-columns: minmax(0, 1fr); }
	.fyb-gdel__list li { grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; padding: 10px 12px; }
	.fyb-gdel__list li span { margin: 0; }
	.fyb-gdel__list strong { font-size: 17px; }
	.fyb-gdel__foot { flex-direction: column-reverse; }
	.fyb-gdel__foot > * { justify-content: center; }
}
/* Di layar Kelola, kepala grup diringkas supaya fokus ke pengaturannya. */
.fyb-gpf.is-manage .fyb-pf__cover { height: 120px; }
.fyb-gpf.is-manage .fyb-gpf__about { display: none; }
.fyb-gpf.is-manage .fyb-gpf__avatar { margin-top: -58px; }
.fyb-gpf.is-manage .fyb-gpf__avatar img,
.fyb-gpf.is-manage .fyb-gpf__initial { width: 96px; height: 96px; border-radius: 24px; font-size: 40px; }
@media (max-width: 620px) {
	.fyb-gpf.is-manage .fyb-pf__cover { height: 96px; }
	.fyb-gpf.is-manage .fyb-gpf__avatar { margin-top: -44px; }
	.fyb-gpf.is-manage .fyb-gpf__avatar img,
	.fyb-gpf.is-manage .fyb-gpf__initial { width: 76px; height: 76px; border-radius: 20px; font-size: 32px; }
}
.fyb-gpf.is-manage .fyb-gpf__manage { display: none; }
@media (max-width: 620px) {
	.fyb-gmanage__nav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; overflow: visible; }
	.fyb-gmanage__navitem,
	.fyb-gmanage__navitem.is-danger { flex-direction: column; justify-content: center; gap: 4px; margin: 0; padding: 8px 4px; text-align: center; white-space: normal; }
	.fyb-gmanage__navtext strong { font-size: 12px; line-height: 1.2; }
	.fyb-gmanage__navbadge { position: absolute; top: 4px; right: 8px; padding: 0 6px; font-size: 10.5px; }
}
/* Kolom grid satu-lajur dikunci selebar wadahnya: tanpa ini lajur "auto"
   ikut melebar mengikuti isi terlebar (deretan story, kotak tulis) dan
   tembus ke kanan di layar HP. */
.fyb-pf__layout > *,
.fyb-gmanage-wrap > * { min-width: 0; }
.fyb-pf__feed,
.fyb-gmanage__main { grid-template-columns: minmax(0, 1fr); }

/* ==========================================================================
   Pesan — ala Messenger: daftar (cari, saring, pilih & hapus massal, grup
   baru), percakapan, panel info. Ditaruh paling bawah supaya menang dari
   aturan .fyb-chat lama.
   ========================================================================== */
.fyb-chat { grid-template-columns: 340px minmax(0, 1fr); border-radius: 20px; }
.fyb-chat__list { position: relative; background: var(--white); }
.fyb-screen-chat .fyb-chat__listhead,
.fyb-chat__listhead {
	display: grid;
	gap: 10px;
	padding: 16px 14px 10px;
	border-bottom: 0;
	font-family: inherit;
	font-weight: 400;
}
.fyb-chat__listtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fyb-chat__listtop h1 { margin: 0; font-size: 23px; color: var(--ink); }
.fyb-chat__listtools { display: flex; gap: 6px; }
.fyb-chat__tool {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: var(--surface);
	color: var(--gray-700);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.fyb-chat__tool:hover { background: var(--teal-50); color: var(--teal-700); }
.fyb-chat__tool.is-on { background: var(--teal-600); color: #fff; }
.fyb-chat__search {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--surface);
	color: var(--gray-400);
}
.fyb-chat__search:focus-within { box-shadow: 0 0 0 2px var(--teal-200); background: var(--white); }
.fyb-chat__search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); outline: none; }
.fyb-chat__filters { display: flex; gap: 6px; }
.fyb-chat__filters button {
	padding: 6px 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--gray-600);
	cursor: pointer;
}
.fyb-chat__filters button:hover { background: var(--surface); }
.fyb-chat__filters button.is-on { background: var(--teal-50); color: var(--teal-800); }

.fyb-chat__rows { display: grid; gap: 2px; padding: 0 8px 10px; }
.fyb-chat .fyb-chat__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 10px;
	border: 0;
	border-radius: 14px;
	box-shadow: none;
	color: var(--ink);
	transition: background .12s ease;
}
.fyb-chat .fyb-chat__row:hover { background: var(--surface); }
.fyb-chat .fyb-chat__row.is-active { background: var(--teal-50); box-shadow: none; }
.fyb-chat__row[hidden] { display: none !important; }
.fyb-chat__rowtext { display: grid; flex: 1; min-width: 0; gap: 1px; }
.fyb-chat__rowtext strong { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-chat__rowsub { display: flex; align-items: baseline; gap: 4px; min-width: 0; font-size: 13px; color: var(--gray-500); }
.fyb-chat__rowsub small { min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-chat__rowsub .fyb-chat__rowtime { flex-shrink: 0; font-size: 12px; color: var(--gray-400); }
.fyb-chat__rowsub .fyb-chat__rowtime::before { content: "· "; }
.fyb-chat__dot { display: none; flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--teal-600); }
.fyb-chat .fyb-chat__row.is-unread strong { font-weight: 800; }
.fyb-chat .fyb-chat__row.is-unread small { color: var(--ink); font-weight: 700; }
.fyb-chat .fyb-chat__row.is-unread .fyb-chat__rowtime { color: var(--teal-700); font-weight: 600; }
.fyb-chat__row.is-unread .fyb-chat__dot { display: block; }

/* Pilih banyak */
.fyb-chat__pick {
	display: none;
	place-items: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border: 2px solid var(--gray-300, #cbd5d4);
	border-radius: 50%;
	color: transparent;
	transition: background .12s ease, border-color .12s ease;
}
.fyb-chat.is-selecting .fyb-chat__pick { display: grid; }
.fyb-chat.is-selecting .fyb-chat__dot { display: none; }
.fyb-chat__row.is-picked { background: var(--teal-50); }
.fyb-chat__row.is-picked .fyb-chat__pick { border-color: var(--teal-600); background: var(--teal-600); color: #fff; }
.fyb-chat__bulk {
	position: sticky;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding: 10px 12px;
	border-top: 1px solid var(--border);
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(6px);
}
.fyb-chat__bulk[hidden] { display: none; }
.fyb-chat__bulkcount { flex: 1; font-size: 13px; font-weight: 700; color: var(--ink); }
.fyb-chat__bulkall { padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--teal-700); cursor: pointer; }
.fyb-chat__bulk .fyb-pf__btn { padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.fyb-chat__bulkdel {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 0;
	border-radius: 999px;
	background: var(--danger);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}
.fyb-chat__bulkdel:disabled { opacity: .4; cursor: not-allowed; }
.fyb-chat__nomatch { margin: 0; padding: 20px; text-align: center; font-size: 13.5px; color: var(--gray-500); }
.fyb-chat__none { display: grid; justify-items: center; gap: 4px; padding: 34px 20px; text-align: center; }
.fyb-chat__none span { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; background: var(--teal-50); color: var(--teal-600); }
.fyb-chat__none strong { font-size: 15px; }
.fyb-chat__none p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gray-500); }

/* Foto percakapan (satu orang / grup bertumpuk) */
.fyb-chatava { position: relative; display: inline-block; flex-shrink: 0; width: var(--s, 48px); height: var(--s, 48px); }
.fyb-chat .fyb-chatava img,
.fyb-chatava img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.fyb-chat .fyb-chatava.is-group img,
.fyb-chatava.is-group img { position: absolute; width: 70%; height: 70%; border: 2px solid var(--white); }
.fyb-chatava.is-group img:first-child { top: 0; right: 0; }
.fyb-chatava.is-group img:last-child { bottom: 0; left: 0; }
.fyb-chatava.is-groupicon { display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, var(--teal-400, #3aa19f), var(--teal-700)); color: #fff; }

/* Kolom percakapan + panel info */
.fyb-chat .fyb-chat__view { position: relative; flex-direction: row; background: var(--white); }
.fyb-chat__conv { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.fyb-chat__view > .fyb-skel__chatview { flex: 1; }
.fyb-chat__viewhead { gap: 10px; padding: 10px 12px; box-shadow: 0 1px 0 var(--border), 0 6px 14px -12px rgba(2, 26, 25, .35); border-bottom: 0; z-index: 2; }
.fyb-chat__who {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	padding: 4px 8px 4px 4px;
	border: 0;
	border-radius: 12px;
	background: none;
	font: inherit;
	text-align: left;
	color: var(--ink);
	cursor: pointer;
}
.fyb-chat__who:hover { background: var(--surface); }
.fyb-chat__who > span:last-child { display: grid; min-width: 0; }
.fyb-chat__who strong { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-chat__who small { font-size: 12.5px; color: var(--gray-500); }
.fyb-chat__headtools { display: flex; gap: 6px; margin-left: auto; }
.fyb-chat.show-info .fyb-chat__headtools [data-chatinfo-toggle] { background: var(--teal-600); color: #fff; }

.fyb-chat__intro { display: grid; justify-items: center; gap: 4px; padding: 18px 12px 22px; text-align: center; }
.fyb-chat__intro strong { margin-top: 6px; font-size: 17px; color: var(--ink); }
.fyb-chat__intro small { font-size: 13px; color: var(--gray-500); }
.fyb-chatsys { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 4px auto; max-width: 90%; text-align: center; font-size: 12.5px; color: var(--gray-500); }
.fyb-chatsys span { font-weight: 600; }
.fyb-chatsys time { font-size: 11.5px; color: var(--gray-400); }

.fyb-chat__send {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	margin-bottom: 2px;
	border: 0;
	border-radius: 50%;
	background: var(--teal-600);
	color: #fff;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.fyb-chat__send:hover { background: var(--teal-700); }
.fyb-chat__send:active { transform: scale(.94); }

.fyb-chat__welcome { align-items: center; justify-content: center; gap: 8px; padding: 30px; text-align: center; }
.fyb-chat__welcomeicon { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 6px; border-radius: 50%; background: var(--teal-50); color: var(--teal-600); }
.fyb-chat__welcome h2 { margin: 0; font-size: 20px; color: var(--ink); }
.fyb-chat__welcome p { max-width: 340px; margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--gray-500); }
.fyb-chat__welcome .fyb-btn { display: inline-flex; align-items: center; gap: 8px; }

/* Panel info */
.fyb-chatinfo {
	display: none;
	flex-direction: column;
	gap: 6px;
	width: 300px;
	flex-shrink: 0;
	padding: 18px 14px;
	border-left: 1px solid var(--border);
	background: var(--white);
	overflow-y: auto;
}
.fyb-chat.show-info .fyb-chatinfo { display: flex; }
.fyb-chatinfo__top { position: relative; display: grid; justify-items: center; gap: 4px; padding: 6px 0 12px; text-align: center; }
.fyb-chatinfo__close { position: absolute; top: -6px; right: -4px; font-size: 22px; line-height: 1; }
.fyb-chatinfo__name { margin-top: 8px; font-size: 17px; color: var(--ink); overflow-wrap: anywhere; }
.fyb-chatinfo__top small { font-size: 12.5px; color: var(--gray-500); }
.fyb-chatinfo__profile { margin-top: 8px; padding: 7px 14px; font-size: 13px; }
.fyb-chatinfo__sec { border-radius: 12px; }
.fyb-chatinfo__sec > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	list-style: none;
}
.fyb-chatinfo__sec > summary::-webkit-details-marker { display: none; }
.fyb-chatinfo__sec > summary:hover { background: var(--surface); }
.fyb-chatinfo__sec > summary .fyb-icon { color: var(--teal-600); }
.fyb-chatinfo__rename { display: flex; gap: 6px; padding: 4px 6px 10px; }
.fyb-chatinfo__rename .fyb-input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; }
.fyb-chatinfo__rename .fyb-pf__btn { padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.fyb-chatinfo__label { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 4px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-400); }
.fyb-chatinfo__label em { font-style: normal; color: var(--gray-500); }
.fyb-chatinfo__add {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border: 0;
	border-radius: 999px;
	background: var(--teal-50);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--teal-700);
	cursor: pointer;
}
.fyb-chatinfo__people { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.fyb-chatinfo__people a { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; color: var(--ink); }
.fyb-chatinfo__people a:hover { background: var(--surface); }
.fyb-chatinfo__people img { width: 36px; height: 36px; border-radius: 50%; }
.fyb-chatinfo__people span { display: grid; min-width: 0; }
.fyb-chatinfo__people strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-chatinfo__people small { font-size: 11.5px; color: var(--teal-600); font-weight: 600; }
.fyb-chatinfo__actions { display: grid; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.fyb-chatinfo__actions form { margin: 0; }
.fyb-chatinfo__act {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px;
	border: 0;
	border-radius: 12px;
	background: none;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--gray-700);
	text-align: left;
	cursor: pointer;
}
.fyb-chatinfo__act:hover { background: var(--surface); }
.fyb-chatinfo__act.is-danger { color: var(--danger); }
.fyb-chatinfo__act.is-danger:hover { background: var(--danger-soft, #fdecec); }

/* Layar sedang: panel info mengapung di atas percakapan (tidak memeras) */
@media (max-width: 1399px) {
	.fyb-chatinfo { position: absolute; top: 0; right: 0; bottom: 0; z-index: 6; box-shadow: -18px 0 40px -24px rgba(2, 26, 25, .45); }
}

/* Jendela pilih orang */
.fyb-chatpick { max-width: 460px; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.fyb-chatpick__head { display: grid; gap: 10px; padding: 20px 20px 12px; }
.fyb-chatpick__head h2 { margin: 0; }
.fyb-chatpick__head .fyb-modal__lead { margin: 0; }
.fyb-chatpick__name { height: 42px; }
.fyb-chatpick__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fyb-chatpick__chips:empty { display: none; }
.fyb-chatpick__chips button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px 4px 10px;
	border: 0;
	border-radius: 999px;
	background: var(--teal-50);
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--teal-800);
	cursor: pointer;
}
.fyb-chatpick__chips button span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--teal-100, #d5efee); font-size: 13px; line-height: 1; }
.fyb-chatpick__search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--surface); color: var(--gray-400); }
.fyb-chatpick__search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); outline: none; }
.fyb-chatpick__list { flex: 1; min-height: 120px; max-height: 46vh; margin: 0; padding: 0 10px 8px; overflow-y: auto; list-style: none; }
.fyb-chatpick__list li[hidden] { display: none; }
.fyb-chatpick__list label { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.fyb-chatpick__list label:hover { background: var(--surface); }
.fyb-chatpick__list input { position: absolute; opacity: 0; pointer-events: none; }
.fyb-chatpick__list img { width: 40px; height: 40px; border-radius: 50%; }
.fyb-chatpick__list span { display: grid; flex: 1; min-width: 0; }
.fyb-chatpick__list strong { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-chatpick__list small { font-size: 12px; color: var(--teal-600); font-weight: 600; }
.fyb-chatpick__tick { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--gray-300, #cbd5d4); border-radius: 50%; color: transparent; }
.fyb-chatpick__list input:checked ~ .fyb-chatpick__tick { border-color: var(--teal-600); background: var(--teal-600); color: #fff; }
.fyb-chatpick__list input:focus-visible ~ .fyb-chatpick__tick { box-shadow: 0 0 0 3px var(--teal-200); }
.fyb-chatpick__none { padding: 20px; text-align: center; font-size: 13.5px; color: var(--gray-500); }
.fyb-chatpick__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--border); }
.fyb-chatpick__foot span { font-size: 13px; font-weight: 600; color: var(--gray-500); }
.fyb-chatpick__foot .fyb-btn:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 760px) {
	.fyb-chat { grid-template-columns: minmax(0, 1fr); }
	.fyb-chat__listtop h1 { font-size: 21px; }
	.fyb-chatinfo { width: 100%; border-left: 0; box-shadow: none; }
	.fyb-chat__who strong { font-size: 15px; }
}

/* Gelembung berurutan dirapatkan; nama pengirim hanya perlu di grup. */
.fyb-chat:not(.is-group) .fyb-bubble__who { display: none; }
.fyb-bubble.is-cont { margin-top: -9px; }
.fyb-bubble.is-cont .fyb-bubble__who { display: none; }
.fyb-bubble.has-next > img { visibility: hidden; }
.fyb-bubble.has-next .fyb-bubble__time { display: none; }
.fyb-bubble:not(.is-mine).has-next .fyb-bubble__body { border-bottom-left-radius: 6px; }
.fyb-bubble:not(.is-mine).is-cont .fyb-bubble__body { border-top-left-radius: 6px; }
.fyb-bubble.is-mine.has-next .fyb-bubble__body { border-bottom-right-radius: 6px; }
.fyb-bubble.is-mine.is-cont .fyb-bubble__body { border-top-right-radius: 6px; }

/* Foto grup chat */
.fyb-chatava.is-photo img { border-radius: 50%; object-fit: cover; }
.fyb-chatpick__ident { display: flex; align-items: center; gap: 12px; }
.fyb-chatpick__ident .fyb-chatpick__name { flex: 1; min-width: 0; }
.fyb-chatpick__photo { position: relative; flex-shrink: 0; cursor: pointer; }
.fyb-chatpick__photoprev {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border: 2px dashed var(--teal-200);
	border-radius: 50%;
	background: var(--teal-50);
	color: var(--teal-600);
	transition: border-color .15s ease, background .15s ease;
}
.fyb-chatpick__photo:hover .fyb-chatpick__photoprev { border-color: var(--teal-400); background: var(--teal-100, #d5efee); }
.fyb-chatpick__photoprev.has-photo { border: 0; }
.fyb-chatpick__photoprev img { width: 100%; height: 100%; object-fit: cover; }
.fyb-chatpick__photoplus {
	position: absolute;
	right: -2px;
	bottom: -2px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border: 2px solid var(--white);
	border-radius: 50%;
	background: var(--teal-600);
	color: #fff;
}
.fyb-chatinfo__photo { margin: 0; }
.fyb-chatinfo__photobtn { position: relative; display: inline-block; border-radius: 50%; cursor: pointer; }
.fyb-chatinfo__photobtn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(2, 26, 25, 0); transition: background .15s ease; }
.fyb-chatinfo__photobtn:hover::after { background: rgba(2, 26, 25, .18); }
.fyb-chatinfo__cam {
	position: absolute;
	right: -2px;
	bottom: -2px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 3px solid var(--white);
	border-radius: 50%;
	background: var(--surface);
	color: var(--gray-700);
}
.fyb-chatinfo__photo.is-uploading .fyb-chatinfo__photobtn { opacity: .5; pointer-events: none; }
.fyb-chatinfo__photodel { margin: 2px 0 0; }
.fyb-chatinfo__photodel button { padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--gray-500); cursor: pointer; }
.fyb-chatinfo__photodel button:hover { color: var(--danger); }

/* ==========================================================================
   Panel Admin (/panel/)
   ========================================================================== */
.fyb-adm { gap: 0; }
.fyb-adm__wrap { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 16px; align-items: start; }
.fyb-adm__main { display: grid; gap: 16px; min-width: 0; }

/* Menu kiri */
.fyb-adm__nav { position: sticky; top: calc(var(--topbar-h) + var(--gap)); display: grid; gap: 2px; padding: 12px 10px; border-radius: 18px; }
.fyb-adm__brand { display: flex; align-items: center; gap: 10px; margin: 2px 4px 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.fyb-adm__brandicon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(145deg, var(--teal-500, #13908d), var(--teal-700)); color: #fff; }
.fyb-adm__brand > span:last-child { display: grid; min-width: 0; }
.fyb-adm__brand strong { font-size: 15px; color: var(--ink); }
.fyb-adm__brand small { font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-adm__navitem { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; font-size: 14px; font-weight: 600; color: var(--gray-700); transition: background .12s ease, color .12s ease; }
.fyb-adm__navitem .fyb-icon { color: var(--gray-500); }
.fyb-adm__navitem span { flex: 1; min-width: 0; }
.fyb-adm__navitem em { padding: 1px 7px; border-radius: 999px; background: var(--danger); font-size: 11px; font-style: normal; font-weight: 700; color: #fff; }
.fyb-adm__navitem:hover { background: var(--surface); color: var(--ink); }
.fyb-adm__navitem.is-on { background: var(--teal-50); color: var(--teal-800); }
.fyb-adm__navitem.is-on .fyb-icon { color: var(--teal-600); }

/* Kepala bagian */
.fyb-adm__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 4px 4px 0; }
.fyb-adm__head h1 { margin: 0; font-size: 23px; color: var(--ink); }
.fyb-adm__head p { margin: 4px 0 0; font-size: 13.5px; color: var(--gray-500); }
.fyb-adm__headtools { display: flex; gap: 8px; }

/* Tombol */
.fyb-adm__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 9px 16px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--white);
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--gray-700);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fyb-adm__btn:hover { border-color: var(--teal-200); background: var(--teal-50); color: var(--teal-800); }
.fyb-adm__btn.is-primary { border-color: var(--teal-600); background: var(--teal-600); color: #fff; box-shadow: 0 10px 20px -12px rgba(6, 87, 85, .9); }
.fyb-adm__btn.is-primary:hover { background: var(--teal-700); color: #fff; }
.fyb-adm__btn.is-danger { border-color: rgba(185, 28, 28, .3); color: var(--danger); }
.fyb-adm__btn.is-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.fyb-adm__mini {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 11px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--white);
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--gray-700);
	white-space: nowrap;
	cursor: pointer;
}
.fyb-adm__mini .fyb-icon { width: 13px; height: 13px; }
.fyb-adm__mini:hover { border-color: var(--teal-200); background: var(--teal-50); color: var(--teal-800); }
.fyb-adm__mini.is-primary { border-color: var(--teal-600); background: var(--teal-600); color: #fff; }
.fyb-adm__mini.is-danger { color: var(--danger); }
.fyb-adm__mini.is-danger:hover { border-color: var(--danger); background: var(--danger); color: #fff; }
.fyb-adm__inline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fyb-adm__inline form,
.fyb-adm__rowact form,
.fyb-adm__menu form,
.fyb-adm__danger form { margin: 0; }

/* Kartu */
.fyb-adm__card { padding: 18px 20px; border-radius: 18px; }
.fyb-adm__card.is-flush { padding: 0; overflow: visible; }
.fyb-adm__cardhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.fyb-adm__cardhead h2 { margin: 0; font-size: 16px; color: var(--ink); }
.fyb-adm__cardhead > a { font-size: 13px; font-weight: 600; color: var(--teal-600); }
.fyb-adm__grid2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.fyb-adm__grid2 + .fyb-adm__grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Statistik */
.fyb-adm__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fyb-adm__stat {
	position: relative;
	display: grid;
	gap: 2px;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: var(--white);
	color: var(--ink);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.fyb-adm__stat:hover { border-color: var(--teal-200); box-shadow: 0 12px 24px -18px rgba(2, 26, 25, .5); transform: translateY(-1px); }
.fyb-adm__staticon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; border-radius: 10px; background: var(--teal-50); color: var(--teal-700); }
.fyb-adm__stat strong { font-family: var(--font-heading); font-size: 24px; line-height: 1.15; }
.fyb-adm__statlabel { font-size: 13px; font-weight: 600; color: var(--gray-600); }
.fyb-adm__stat small { font-size: 12px; color: var(--gray-400); }
.fyb-adm__stat.is-alert { border-color: rgba(217, 119, 6, .35); background: #fffbf3; }
.fyb-adm__stat.is-alert .fyb-adm__staticon { background: #fdf0d7; color: #b45309; }
.fyb-adm__stat.is-alert small { color: #b45309; font-weight: 600; }

/* Grafik */
.fyb-adm__legend { display: flex; gap: 12px; font-size: 12px; color: var(--gray-500); }
.fyb-adm__legend span { display: inline-flex; align-items: center; gap: 5px; }
.fyb-adm__legend span::before { content: ""; width: 9px; height: 9px; border-radius: 3px; }
.fyb-adm__legend .is-a::before { background: var(--teal-600); }
.fyb-adm__legend .is-b::before { background: #f2b65a; }
.fyb-adm__chart { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; height: 170px; padding-top: 6px; }
.fyb-adm__bar { display: grid; grid-template-rows: 1fr auto; gap: 6px; height: 100%; }
.fyb-adm__barpair { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; padding: 0 1px; border-radius: 6px; background: linear-gradient(180deg, transparent, var(--surface)); }
.fyb-adm__barpair i { width: 42%; min-height: 3px; border-radius: 4px 4px 2px 2px; }
.fyb-adm__barpair .is-a { background: var(--teal-600); }
.fyb-adm__barpair .is-b { background: #f2b65a; }
.fyb-adm__bar small { text-align: center; font-size: 10.5px; color: var(--gray-400); }

/* Aksi cepat */
.fyb-adm__quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.fyb-adm__quick a { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; font-size: 13.5px; font-weight: 600; color: var(--gray-700); transition: background .15s ease, border-color .15s ease; }
.fyb-adm__quick a .fyb-icon { color: var(--teal-600); }
.fyb-adm__quick a:hover { border-color: var(--teal-200); background: var(--teal-50); color: var(--teal-800); }

/* Daftar orang */
.fyb-adm__people { display: grid; margin: 0; padding: 0; list-style: none; }
.fyb-adm__people li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); }
.fyb-adm__people li:first-child { border-top: 0; }
.fyb-adm__people img { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.fyb-adm__people li > span { display: grid; flex: 1; min-width: 0; }
.fyb-adm__people strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-adm__people small { font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Saring */
.fyb-adm__filter { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.fyb-adm__search { display: flex; align-items: center; gap: 8px; flex: 1 1 240px; max-width: 380px; height: 38px; margin: 0; padding: 0 14px; border-radius: 999px; background: var(--surface); color: var(--gray-400); }
.fyb-adm__search:focus-within { box-shadow: 0 0 0 2px var(--teal-200); background: var(--white); }
.fyb-adm__search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); outline: none; }
.fyb-adm__chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.fyb-adm__chips::-webkit-scrollbar { display: none; }
.fyb-adm__chips a { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--gray-700); }
.fyb-adm__chips a span { font-size: 11.5px; color: var(--gray-400); }
.fyb-adm__chips a:hover { border-color: var(--teal-200); }
.fyb-adm__chips a.is-on { border-color: var(--teal-200); background: var(--teal-50); color: var(--teal-800); }
.fyb-adm__chips a.is-on span { color: var(--teal-600); }

/* Tabel */
.fyb-adm__tablewrap { overflow-x: auto; }
.fyb-adm__table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fyb-adm__table th { padding: 10px 16px; text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-400); background: var(--surface); }
.fyb-adm__table td { padding: 10px 16px; border-top: 1px solid var(--border); vertical-align: middle; color: var(--gray-700); }
.fyb-adm__table tbody tr:hover td { background: #fafcfc; }
.fyb-adm__table tr.is-muted .fyb-adm__who { opacity: .55; }
.fyb-adm__rowact { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.fyb-adm__who { display: flex; align-items: center; gap: 11px; min-width: 0; color: var(--ink); }
.fyb-adm__who img { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.fyb-adm__who img.is-square { border-radius: 10px; }
.fyb-adm__who span { display: grid; min-width: 0; }
.fyb-adm__who strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.fyb-adm__who small { font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.fyb-adm__who:hover strong { color: var(--teal-700); }
.fyb-adm__initial { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(145deg, var(--teal-400, #3aa19f), var(--teal-700)); font-weight: 800; color: #fff; }
.fyb-adm__soft { color: var(--gray-500); }
.fyb-adm__price { color: var(--teal-700); white-space: nowrap; }

/* Lencana */
.fyb-adm__badge { display: inline-flex; align-items: center; margin: 1px 2px 1px 0; padding: 2px 9px; border-radius: 999px; background: var(--surface); font-size: 11.5px; font-weight: 700; color: var(--gray-600); white-space: nowrap; }
.fyb-adm__badge.is-admin { background: var(--teal-700); color: #fff; }
.fyb-adm__badge.is-seller,
.fyb-adm__badge.is-ok,
.fyb-adm__badge.is-public,
.fyb-adm__badge.is-ad-aktif { background: var(--teal-50); color: var(--teal-800); }
.fyb-adm__badge.is-danger,
.fyb-adm__badge.is-user { background: var(--danger-soft, #fdecec); color: var(--danger); }
.fyb-adm__badge.is-warn,
.fyb-adm__badge.is-ad-terjadwal,
.fyb-adm__badge.is-private { background: #fdf0d7; color: #a1580c; }
.fyb-adm__badge.is-sold,
.fyb-adm__badge.is-hidden,
.fyb-adm__badge.is-ad-berakhir { background: #eceff3; color: #556070; }
.fyb-adm__badge.is-listing { background: #ede9fe; color: #6d28d9; }
.fyb-adm__badge.is-post { background: #e0f2fe; color: #0369a1; }

/* Menu ⋯ */
.fyb-adm__more { position: relative; }
.fyb-adm__more summary { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--gray-600); cursor: pointer; list-style: none; }
.fyb-adm__more summary::-webkit-details-marker { display: none; }
.fyb-adm__more summary:hover,
.fyb-adm__more[open] summary { background: var(--surface); }
.fyb-adm__menu { position: absolute; top: 36px; right: 0; z-index: 20; display: grid; min-width: 200px; padding: 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--white); box-shadow: 0 18px 36px -16px rgba(2, 26, 25, .45); }
.fyb-adm__menuitem { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--gray-700); text-align: left; white-space: nowrap; cursor: pointer; }
.fyb-adm__menuitem .fyb-icon { color: var(--teal-600); }
.fyb-adm__menuitem:hover { background: var(--surface); }
.fyb-adm__menuitem.is-danger,
.fyb-adm__menuitem.is-danger .fyb-icon { color: var(--danger); }
.fyb-adm__menuitem.is-danger:hover { background: var(--danger-soft, #fdecec); }

/* Halaman & kosong */
.fyb-adm__pages { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--gray-500); }
.fyb-adm__pages span { margin-right: auto; }
.fyb-adm__pages a { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-weight: 600; color: var(--gray-700); }
.fyb-adm__pages a:hover { border-color: var(--teal-200); color: var(--teal-700); }
.fyb-adm__empty { display: grid; justify-items: center; gap: 4px; padding: 34px 16px; text-align: center; }
.fyb-adm__empty span { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px; border-radius: 50%; background: var(--teal-50); color: var(--teal-600); }
.fyb-adm__empty strong { font-size: 15px; color: var(--ink); }
.fyb-adm__empty p { margin: 0; font-size: 13px; color: var(--gray-500); }

/* Formulir */
.fyb-adm__formgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; margin: 0; }
.fyb-adm__form { display: grid; gap: 14px; margin: 0; }
.fyb-adm__formtitle { margin: 0; font-size: 15px; color: var(--ink); }
.fyb-adm__form .fyb-adm__formtitle ~ .fyb-adm__formtitle { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--border); }
.fyb-adm__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fyb-adm__field { display: grid; gap: 6px; }
.fyb-adm__label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--gray-700); }
.fyb-adm__label em { font-style: normal; color: var(--danger); }
.fyb-adm__field small,
.fyb-adm__hint { margin: 0; font-size: 12px; line-height: 1.45; color: var(--gray-500); }
.fyb-adm__input { width: 100%; min-height: 42px; padding: 9px 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--white); font: inherit; font-size: 14px; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease; }
textarea.fyb-adm__input { resize: vertical; line-height: 1.55; }
.fyb-adm__input:focus { outline: none; border-color: var(--teal-400); box-shadow: 0 0 0 3px rgba(13, 132, 130, .12); }
.fyb-adm__input:disabled { background: var(--surface); color: var(--gray-500); }
.fyb-adm__savebar { display: flex; justify-content: flex-end; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.fyb-adm__side { display: grid; gap: 16px; }
.fyb-adm__usercard { display: grid; justify-items: center; gap: 4px; text-align: center; }
.fyb-adm__usercard img { width: 72px; height: 72px; border-radius: 50%; margin-bottom: 4px; }
.fyb-adm__usercard > strong { font-size: 16px; color: var(--ink); }
.fyb-adm__usercard > small { font-size: 12.5px; color: var(--gray-500); }
.fyb-adm__usercard .fyb-adm__btn { width: 100%; margin-top: 4px; }
.fyb-adm__userstats { display: flex; gap: 8px; width: 100%; margin: 10px 0 4px; }
.fyb-adm__userstats span { display: grid; flex: 1; padding: 10px; border-radius: 12px; background: var(--surface); font-size: 12px; color: var(--gray-500); }
.fyb-adm__userstats strong { font-family: var(--font-heading); font-size: 18px; color: var(--ink); }
.fyb-adm__notecard h2,
.fyb-adm__danger h2 { margin: 0 0 8px; font-size: 15px; }
.fyb-adm__notecard p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--gray-700); }
.fyb-adm__danger { display: grid; gap: 8px; border-color: rgba(185, 28, 28, .2); }
.fyb-adm__danger h2 { color: var(--danger); }
.fyb-adm__danger .fyb-adm__btn { width: 100%; }
.fyb-adm__danger form:last-child .fyb-adm__btn,
.fyb-adm__danger .fyb-adm__btn.is-danger { border-color: rgba(185, 28, 28, .3); color: var(--danger); }
.fyb-adm__dangerrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fyb-adm__dangerrow p { margin: 0; font-size: 13px; color: var(--gray-500); }
.fyb-adm__dangerrow .fyb-adm__btn { width: auto; }
.fyb-adm__radios { display: grid; gap: 8px; margin-bottom: 12px; }
.fyb-adm__radios label,
.fyb-adm__check,
.fyb-adm__switch { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--gray-700); cursor: pointer; }
.fyb-adm__radios input,
.fyb-adm__check input,
.fyb-adm__switch input { width: 17px; height: 17px; accent-color: var(--teal-600); }
.fyb-adm__radios label { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.fyb-adm__radios label:has(input:checked) { border-color: var(--teal-400); background: var(--teal-50); color: var(--teal-800); }
.fyb-adm__check { margin-top: 8px; font-size: 12.5px; color: var(--gray-500); }

/* Unggah gambar */
.fyb-adm__upload { display: block; cursor: pointer; }
.fyb-adm__uploadprev { display: grid; place-items: center; align-content: center; gap: 6px; aspect-ratio: 1; overflow: hidden; border: 2px dashed var(--teal-200); border-radius: 14px; background: var(--teal-50); color: var(--teal-600); transition: border-color .15s ease; }
.fyb-adm__upload.is-wide .fyb-adm__uploadprev { aspect-ratio: 4 / 1; }
.fyb-adm__upload.is-tall .fyb-adm__uploadprev { aspect-ratio: 16 / 9; }
.fyb-adm__upload:hover .fyb-adm__uploadprev { border-color: var(--teal-400); }
.fyb-adm__uploadprev small { font-size: 12.5px; font-weight: 600; }
.fyb-adm__uploadprev img { width: 100%; height: 100%; object-fit: cover; }
.fyb-adm__uploadprev:has(img) { border-style: solid; border-color: var(--border); }
.fyb-adm__adimgs { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.fyb-adm__adimgs > div { display: grid; gap: 6px; }
.fyb-adm__positions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fyb-adm__positions label { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.fyb-adm__positions input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--teal-600); }
.fyb-adm__positions span { display: grid; gap: 1px; }
.fyb-adm__positions strong { font-size: 13.5px; color: var(--ink); }
.fyb-adm__positions small { font-size: 11.5px; color: var(--gray-500); }
.fyb-adm__positions label:has(input:checked) { border-color: var(--teal-400); background: var(--teal-50); }

/* Daftar iklan */
.fyb-adm__ads { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.fyb-adm__ad { overflow: hidden; border-radius: 18px; }
.fyb-adm__adprev { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: 6px; padding: 10px; background: var(--surface); }
.fyb-adm__adprev > span { display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: var(--white); }
.fyb-adm__adprev .is-d { aspect-ratio: 4 / 1.4; }
.fyb-adm__adprev .is-m { aspect-ratio: 1; }
.fyb-adm__adprev img { width: 100%; height: 100%; object-fit: cover; }
.fyb-adm__adprev small { font-size: 11px; color: var(--gray-400); text-align: center; padding: 6px; }
.fyb-adm__adbody { display: grid; gap: 10px; padding: 14px 16px 16px; }
.fyb-adm__adtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fyb-adm__adtop strong { font-size: 15px; color: var(--ink); }
.fyb-adm__adpos { display: flex; flex-wrap: wrap; gap: 5px; }
.fyb-adm__adpos span { padding: 3px 9px; border-radius: 999px; background: var(--surface); font-size: 11.5px; font-weight: 600; color: var(--gray-600); }
.fyb-adm__admeta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--gray-500); }
.fyb-adm__admeta span { display: inline-flex; align-items: center; gap: 4px; }

/* Kiriman & laporan & log */
.fyb-adm__posts,
.fyb-adm__reports,
.fyb-adm__log { display: grid; margin: 0; padding: 0; list-style: none; }
.fyb-adm__posts li,
.fyb-adm__reports li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--border); }
.fyb-adm__posts li:first-child,
.fyb-adm__reports li:first-child { border-top: 0; }
.fyb-adm__posts img { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
.fyb-adm__postbody,
.fyb-adm__reportbody { flex: 1; min-width: 0; }
.fyb-adm__postmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fyb-adm__postmeta strong { font-size: 14px; color: var(--ink); }
.fyb-adm__postmeta small { font-size: 12px; color: var(--gray-400); }
.fyb-adm__postbody p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--gray-700); overflow-wrap: anywhere; }
.fyb-adm__reports li.is-done { opacity: .65; }
.fyb-adm__reportbody strong { display: block; font-size: 14px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.fyb-adm__reportbody strong a { color: inherit; }
.fyb-adm__reportbody strong a:hover { color: var(--teal-700); }
.fyb-adm__reportbody p { margin: 4px 0 0; font-size: 13px; font-style: italic; color: var(--gray-600); }
.fyb-adm__reportbody small { display: block; margin-top: 4px; font-size: 12px; color: var(--gray-400); }
.fyb-adm__log li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--gray-700); }
.fyb-adm__log li:first-child { border-top: 0; }
.fyb-adm__log img { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.fyb-adm__log li > span { flex: 1; min-width: 0; }
.fyb-adm__log strong { margin-right: 4px; color: var(--ink); }
.fyb-adm__log a { color: var(--teal-700); font-weight: 600; }
.fyb-adm__log time { flex-shrink: 0; font-size: 12px; color: var(--gray-400); }

/* Panel: layar sedang & HP */
@media (max-width: 1180px) {
	.fyb-adm__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fyb-adm__grid2,
	.fyb-adm__grid2 + .fyb-adm__grid2,
	.fyb-adm__formgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
	.fyb-adm__wrap { grid-template-columns: minmax(0, 1fr); }
	.fyb-adm__nav { position: static; display: flex; gap: 4px; padding: 6px; overflow-x: auto; scrollbar-width: none; }
	.fyb-adm__nav::-webkit-scrollbar { display: none; }
	.fyb-adm__brand { display: none; }
	.fyb-adm__navitem { flex-shrink: 0; padding: 8px 12px; white-space: nowrap; }
}
@media (max-width: 620px) {
	.fyb-adm__head h1 { font-size: 20px; }
	.fyb-adm__card { padding: 16px; }
	.fyb-adm__stats { gap: 8px; }
	.fyb-adm__stat { padding: 12px; }
	.fyb-adm__stat strong { font-size: 20px; }
	.fyb-adm__chart { gap: 3px; height: 140px; }
	.fyb-adm__cols,
	.fyb-adm__positions,
	.fyb-adm__adimgs { grid-template-columns: minmax(0, 1fr); }
	.fyb-adm__table th,
	.fyb-adm__table td { padding: 10px 12px; }
	.fyb-adm__table .is-hide-sm { display: none; }
	.fyb-adm__who strong,
	.fyb-adm__who small { max-width: 150px; }
	.fyb-adm__ads { grid-template-columns: minmax(0, 1fr); }
	.fyb-adm__posts li,
	.fyb-adm__reports li { flex-wrap: wrap; }
	.fyb-adm__dangerrow { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Iklan banner (tampil di situs)
   ========================================================================== */
.fyb-ad { position: relative; overflow: hidden; border-radius: 16px; background: var(--surface); line-height: 0; }
.fyb-ad a { display: block; }
.fyb-ad img { display: block; width: 100%; height: auto; }
.fyb-ad__tag { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(2, 26, 25, .55); font-size: 10.5px; font-weight: 700; line-height: 1.6; letter-spacing: .03em; color: #fff; }
.fyb-listinggrid > .fyb-ad { grid-column: 1 / -1; }
.fyb-right > .fyb-ad { margin-bottom: var(--gap); }
@media (max-width: 760px) {
	.fyb-ad.is-donly { display: none; }
	.fyb-ad { border-radius: 14px; }
}
@media (min-width: 761px) {
	.fyb-ad.is-monly { display: none; }
}

/* ==========================================================================
   Pengumuman situs (bilah di bawah top bar)
   ========================================================================== */
.fyb-announce { position: relative; z-index: 40; padding: 0 16px; background: var(--teal-700); color: #fff; }
.fyb-announce--promo { background: linear-gradient(90deg, #6d28d9, #9333ea); }
.fyb-announce--peringatan { background: #f59e0b; color: #3b2300; }
.fyb-announce--penting { background: #b91c1c; }
.fyb-announce__in { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 1200px; margin: 0 auto; padding: 9px 30px 9px 0; position: relative; }
.fyb-announce__icon { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.fyb-announce p { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.fyb-announce__link { flex-shrink: 0; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .95); font-size: 12.5px; font-weight: 700; color: var(--teal-800); white-space: nowrap; }
.fyb-announce--peringatan .fyb-announce__link { color: #3b2300; }
.fyb-announce__x { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; font-size: 20px; line-height: 1; color: inherit; cursor: pointer; opacity: .8; }
.fyb-announce__x:hover { background: rgba(255, 255, 255, .15); opacity: 1; }
.fyb-announce.is-hidden { display: none; }
.fyb-announce.is-preview { border-radius: 12px; padding: 0 12px; }
.fyb-announce.is-preview .fyb-announce__in { padding-right: 0; justify-content: flex-start; }
@media (max-width: 620px) {
	.fyb-announce__in { justify-content: flex-start; flex-wrap: wrap; gap: 6px 10px; }
	.fyb-announce p { flex: 1; min-width: 180px; font-size: 13px; }
}

/* ==========================================================================
   Panel Admin — halaman mandiri (bilah atas sendiri, tanpa menu forum)
   ========================================================================== */
body.fyb-admpage { background: var(--surface); }
.fyb-admbar { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--border); }
.fyb-admbar__in { display: flex; align-items: center; justify-content: space-between; gap: 14px; max-width: 1360px; height: 64px; margin: 0 auto; padding: 0 20px; }
.fyb-admbar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); }
.fyb-admbar__brand img { width: 34px; height: 34px; border-radius: 50%; }
.fyb-admbar__brand > span { display: grid; min-width: 0; line-height: 1.2; }
.fyb-admbar__brand strong { font-family: var(--font-heading); font-size: 16px; color: var(--teal-800); }
.fyb-admbar__brand small { font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-admbar__tools { display: flex; align-items: center; gap: 10px; }
.fyb-admbar__site { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--gray-700); }
.fyb-admbar__site:hover { border-color: var(--teal-200); background: var(--teal-50); color: var(--teal-800); }
.fyb-admbar__me { position: relative; }
.fyb-admbar__me summary { display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border: 1px solid var(--border); border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.fyb-admbar__me summary::-webkit-details-marker { display: none; }
.fyb-admbar__me summary img { width: 32px; height: 32px; border-radius: 50%; }
.fyb-admbar__me summary .fyb-icon { color: var(--gray-400); transform: rotate(90deg); }
.fyb-admbar__me[open] summary { background: var(--surface); }
.fyb-admbar__menu { position: absolute; top: 46px; right: 0; display: grid; min-width: 210px; padding: 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--white); box-shadow: 0 18px 36px -16px rgba(2, 26, 25, .45); }
.fyb-admbar__menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--gray-700); }
.fyb-admbar__menu a .fyb-icon { color: var(--teal-600); }
.fyb-admbar__menu a:hover { background: var(--surface); }
.fyb-admbar__menu a.is-danger,
.fyb-admbar__menu a.is-danger .fyb-icon { color: var(--danger); }
.fyb-admshell { display: block; max-width: 1360px; margin: 0 auto; padding: 20px; }
.fyb-admpage .fyb-adm__nav { top: 84px; }

/* Kerangka saat bagian baru dimuat */
.fyb-admskel { display: grid; gap: 12px; }
.fyb-admskel i { display: block; border-radius: 10px; background: linear-gradient(90deg, #e9efef 25%, #f4f7f7 50%, #e9efef 75%); background-size: 200% 100%; animation: fyb-admskel 1.2s ease-in-out infinite; }
.fyb-admskel__title { width: 220px; height: 26px; }
.fyb-admskel__sub { width: 340px; max-width: 80%; height: 14px; }
.fyb-admskel__card { display: grid; gap: 14px; padding: 20px; border-radius: 18px; }
.fyb-admskel__row { height: 38px; }
@keyframes fyb-admskel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .fyb-admskel i { animation: none; } }

@media (max-width: 760px) {
	.fyb-admbar__in { height: 58px; padding: 0 12px; gap: 8px; }
	.fyb-admbar__site span,
	.fyb-admbar__mename,
	.fyb-admbar__brand small { display: none; }
	.fyb-admbar__site { padding: 8px 10px; }
	.fyb-admbar__me summary { padding-right: 8px; }
	.fyb-admshell { padding: 12px; }
}

/* ==========================================================================
   Iklan: ukuran tetap per posisi (gambar apa pun dipotong rapi, tidak jadi
   kotak raksasa kalau yang diunggah gambar persegi).
   ========================================================================== */
.fyb-ad picture { display: block; }
.fyb-ad img { aspect-ratio: var(--ad-d, 4 / 1); object-fit: cover; }
.fyb-ad--beranda_atas,
.fyb-ad--beranda_feed,
.fyb-ad--jelajah_atas { --ad-d: 4 / 1; --ad-m: 16 / 9; }
.fyb-ad--marketplace_atas,
.fyb-ad--marketplace_grid,
.fyb-ad--lapak_detail,
.fyb-ad--grup_atas { --ad-d: 24 / 5; --ad-m: 2 / 1; }
.fyb-ad--sidebar { --ad-d: 6 / 5; }
@media (max-width: 760px) {
	.fyb-ad img { aspect-ratio: var(--ad-m, 16 / 9); }
}

/* ==========================================================================
   Pencarian ala Facebook
   Desktop: kolom di top bar + panel (terbaru / saran) di bawahnya.
   HP: ikon di top bar → layar cari penuh.
   ========================================================================== */
.fyb-search { position: relative; flex: 0 1 300px; max-width: 300px; }
.fyb-search__form { display: flex; align-items: center; gap: 6px; margin: 0; }
.fyb-search__back { display: none; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; color: var(--gray-700); cursor: pointer; }
.fyb-search__back:hover { background: var(--surface); }
.fyb-search__field { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; margin: 0; }
.fyb-search .fyb-search__field > .fyb-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--gray-400); pointer-events: none; }
.fyb-search .fyb-search__field input {
	width: 100%;
	height: 40px;
	padding: 0 34px 0 38px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--surface);
	font: inherit;
	font-size: 14.5px;
	color: var(--ink);
}
.fyb-search .fyb-search__field input::-webkit-search-cancel-button { display: none; }
.fyb-search .fyb-search__field input:focus { outline: none; background: var(--white); border-color: var(--teal-200); box-shadow: 0 0 0 3px rgba(13, 132, 130, .1); }
.fyb-search__clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--gray-200, #e3e8e8); font-size: 17px; line-height: 1; color: var(--gray-600); cursor: pointer; }
.fyb-search__clear[hidden] { display: none; }

.fyb-search__pop {
	position: absolute;
	top: calc(100% + 8px);
	left: -12px;
	width: 380px;
	max-height: min(70vh, 560px);
	overflow-y: auto;
	padding: 8px;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: var(--white);
	box-shadow: 0 22px 46px -18px rgba(2, 26, 25, .45);
	z-index: 150;
}
.fyb-search__pop[hidden] { display: none; }
.fyb-search__sec[hidden] { display: none; }
.fyb-search__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; }
.fyb-search__head strong { font-size: 15px; color: var(--ink); }
.fyb-search__head button { padding: 4px 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--teal-600); cursor: pointer; }
.fyb-search__head button:hover { background: var(--teal-50); }
.fyb-search__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.fyb-search__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.fyb-search__item:hover,
.fyb-search__item.is-hover { background: var(--surface); }
.fyb-search__ico { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; background: var(--surface); color: var(--gray-500); }
.fyb-search__ico img { width: 100%; height: 100%; object-fit: cover; }
.fyb-search__ico.is-square { border-radius: 10px; }
.fyb-search__ico.is-go { background: var(--teal-600); color: #fff; }
.fyb-search__txt { display: grid; flex: 1; min-width: 0; }
.fyb-search__txt strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-search__txt small { font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-search__del { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; font-size: 18px; line-height: 1; color: var(--gray-400); cursor: pointer; }
.fyb-search__del:hover { background: var(--white); color: var(--ink); }
.fyb-search__row { display: flex; align-items: center; gap: 2px; border-radius: 10px; }
.fyb-search__row:hover { background: var(--surface); }
.fyb-search__row .fyb-search__item:hover { background: none; }
.fyb-search__empty { margin: 0; padding: 10px 8px 12px; font-size: 13px; color: var(--gray-500); }
.fyb-search__empty[hidden] { display: none; }
.fyb-search__loading { padding: 10px 8px; font-size: 13px; color: var(--gray-400); }

.fyb-searchbtn { display: none; border: 0; background: none; cursor: pointer; }

/* Kepala Jelajah khusus HP */
.fyb-xmhead { display: none; }

@media (max-width: 760px) {
	.fyb-search { display: none; }
	.fyb-searchbtn { display: flex; }

	/* Layar cari penuh */
	body.fyb-searching { overflow: hidden; }
	body.fyb-searching .fyb-search {
		position: fixed;
		inset: 0;
		z-index: 400;
		display: flex;
		flex-direction: column;
		max-width: none;
		background: var(--white);
	}
	body.fyb-searching .fyb-search__form { padding: 10px 12px; border-bottom: 1px solid var(--border); }
	body.fyb-searching .fyb-search__back { display: grid; }
	body.fyb-searching .fyb-search__pop { position: static; flex: 1; width: auto; max-height: none; border: 0; border-radius: 0; box-shadow: none; padding: 8px 8px 24px; }
	body.fyb-searching .fyb-search__pop[hidden] { display: block; }

	/* Jelajah: tanpa top bar forum */
	body.fyb-screen-jelajah { --topbar-h: 0px; }
	body.fyb-screen-jelajah .fyb-topbar { display: none; }
	body.fyb-screen-jelajah .fyb-shell { padding-top: 0; }
	.fyb-xmhead {
		position: sticky;
		top: 0;
		z-index: 60;
		display: flex;
		align-items: center;
		gap: 6px;
		margin: 0 -16px;
		padding: 8px 12px;
		background: var(--white);
		border-bottom: 1px solid var(--border);
	}
	.fyb-xmhead__back { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; color: var(--gray-700); }
	.fyb-xmhead__back:active { background: var(--surface); }
	.fyb-xmhead__field { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--surface); font: inherit; font-size: 15px; color: var(--gray-500); text-align: left; cursor: text; }
	.fyb-xmhead__field span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.fyb-xmhead__field.has-q { color: var(--ink); font-weight: 600; }
	.fyb-xmhead__field .fyb-icon { flex-shrink: 0; color: var(--gray-400); }
	/* Judul & kotak cari di kartu hero sudah diwakili kepala di atas. */
	.fyb-screen-jelajah .fyb-xhero__top,
	.fyb-screen-jelajah .fyb-xhero__search { display: none; }
	.fyb-screen-jelajah .fyb-xhero { padding: 14px 16px; }
	.fyb-screen-jelajah .fyb-xhero:not(:has(.fyb-xhero__chips, .fyb-xtabs)) { display: none; }
}

/* Pencarian: aturan ikon lama (.fyb-search .fyb-icon absolut) hanya untuk
   ikon kaca pembesar di dalam kolom; ikon lain kembali normal. */
.fyb-search .fyb-search__back .fyb-icon,
.fyb-search .fyb-search__pop .fyb-icon { position: static; transform: none; color: inherit; }
.fyb-search__ico.is-letter { background: linear-gradient(145deg, var(--teal-400, #3aa19f), var(--teal-700)); font-weight: 800; color: #fff; }
@media (max-width: 760px) {
	body.fyb-searching .fyb-topbar { z-index: 500; }
}
@media (max-width: 760px) {
	/* Di Jelajah top bar disembunyikan, padahal layar cari ada di dalamnya:
	   saat mencari, top bar "hadir" lagi setinggi nol, hanya kotak cari. */
	body.fyb-screen-jelajah.fyb-searching .fyb-topbar { display: block; height: 0; border: 0; }
	body.fyb-screen-jelajah.fyb-searching .fyb-topbar__inner > :not(.fyb-search) { display: none; }
}

/* Panel: kolom grid satu-lajur dikunci selebar wadahnya (tabel lebar
   menggulir di dalam kartunya, bukan melebarkan halaman di HP). */
.fyb-adm__main,
.fyb-adm__side,
.fyb-adm__form,
.fyb-admskel { grid-template-columns: minmax(0, 1fr); }
.fyb-adm__wrap > *,
.fyb-adm__formgrid > *,
.fyb-adm__grid2 > * { min-width: 0; }
@media (max-width: 620px) {
	.fyb-adm__head { align-items: flex-start; }
	.fyb-adm__headtools { width: 100%; }
	.fyb-adm__headtools .fyb-adm__btn { flex: 1; }
}

/* ==========================================================================
   Menu titik tiga (kiriman / reel / lapak) + Simpan + halaman Tersimpan
   ========================================================================== */
.fyb-imenu { position: relative; margin-left: auto; flex-shrink: 0; }
.fyb-imenu__btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--gray-500); cursor: pointer; list-style: none; transition: background .15s ease, color .15s ease; }
.fyb-imenu__btn::-webkit-details-marker { display: none; }
.fyb-imenu__btn:hover,
.fyb-imenu[open] .fyb-imenu__btn { background: var(--surface); color: var(--ink); }
.fyb-imenu__panel {
	position: absolute;
	top: 42px;
	right: 0;
	z-index: 30;
	display: grid;
	width: 280px;
	padding: 6px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--white);
	box-shadow: 0 18px 40px -16px rgba(2, 26, 25, .45);
}
.fyb-imenu__panel form { margin: 0; }
.fyb-imenu__item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: 10px;
	background: none;
	font: inherit;
	text-align: left;
	color: var(--ink);
	cursor: pointer;
}
.fyb-imenu__item:hover { background: var(--surface); }
.fyb-imenu__item > .fyb-icon { flex-shrink: 0; margin-top: 1px; color: var(--gray-600); }
.fyb-imenu__item > span { display: grid; gap: 1px; min-width: 0; }
.fyb-imenu__item strong { font-size: 14px; font-weight: 600; }
.fyb-imenu__item small { font-size: 12px; color: var(--gray-500); }
.fyb-imenu__item.is-saved > .fyb-icon { color: var(--teal-600); fill: currentColor; }
.fyb-imenu__item.is-danger,
.fyb-imenu__item.is-danger > .fyb-icon { color: var(--danger); }
.fyb-imenu__item.is-danger:hover { background: var(--danger-soft, #fdecec); }
.fyb-post__head .fyb-imenu { align-self: flex-start; }

/* Di rel reel: tombol ⋯ seperti tombol aksi lain, menu terbuka ke kiri-atas. */
.fyb-imenu--reel { margin: 0; }
.fyb-imenu--reel .fyb-imenu__btn { width: 44px; height: 44px; background: rgba(255, 255, 255, .14); color: #fff; }
.fyb-imenu--reel .fyb-imenu__btn:hover,
.fyb-imenu--reel[open] .fyb-imenu__btn { background: rgba(255, 255, 255, .26); color: #fff; }
.fyb-imenu--reel .fyb-imenu__panel { top: auto; bottom: 0; right: 54px; }

/* Tombol Simpan berdiri sendiri */
[data-save].is-saved .fyb-icon { fill: currentColor; }
.fyb-reel__act.is-saved { color: #ffd166; }
.fyb-savebtn.is-saved { border-color: var(--teal-200); background: var(--teal-50); color: var(--teal-800); }

/* Halaman Tersimpan */
.fyb-saved { gap: 14px; }
.fyb-savedhead { padding: 20px 20px 0; border-radius: 18px; }
.fyb-savedhead__top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.fyb-savedhead__icon { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(145deg, var(--teal-500, #13908d), var(--teal-700)); color: #fff; }
.fyb-savedhead__icon .fyb-icon { fill: currentColor; }
.fyb-savedhead h1 { margin: 0; font-size: 22px; color: var(--ink); }
.fyb-savedhead p { margin: 2px 0 0; font-size: 13.5px; color: var(--gray-500); }
.fyb-savedtabs { display: flex; gap: 4px; margin: 0 -20px; padding: 0 14px; border-top: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.fyb-savedtabs::-webkit-scrollbar { display: none; }
.fyb-savedtabs a { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 12px 12px 10px; border-bottom: 3px solid transparent; font-size: 14px; font-weight: 600; color: var(--gray-600); }
.fyb-savedtabs a em { padding: 1px 8px; border-radius: 999px; background: var(--surface); font-size: 11.5px; font-style: normal; color: var(--gray-500); }
.fyb-savedtabs a:hover { color: var(--ink); }
.fyb-savedtabs a.is-on { border-bottom-color: var(--teal-600); color: var(--teal-800); }
.fyb-savedtabs a.is-on em { background: var(--teal-50); color: var(--teal-700); }
.fyb-savedlist { padding: 6px; border-radius: 18px; }
.fyb-savedlist ul { display: grid; margin: 0; padding: 0; list-style: none; }
.fyb-saveditem { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 14px; transition: background .15s ease, opacity .2s ease, transform .2s ease; }
.fyb-saveditem:hover { background: var(--surface); }
.fyb-saveditem.is-leaving { opacity: 0; transform: translateX(12px); }
.fyb-saveditem__thumb { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 88px; height: 88px; overflow: hidden; border-radius: 12px; background: var(--teal-50); color: var(--teal-600); }
.fyb-saveditem__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fyb-saveditem__thumb.is-reel { width: 66px; }
.fyb-saveditem__thumb i { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(2, 26, 25, .55); color: #fff; }
.fyb-saveditem__body { display: grid; gap: 3px; flex: 1; min-width: 0; color: var(--ink); }
.fyb-saveditem__body strong { font-size: 15px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fyb-saveditem__body small { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-saveditem__body small.is-when { color: var(--gray-400); }
.fyb-saveditem__un { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--white); font: inherit; font-size: 13px; font-weight: 700; color: var(--teal-700); cursor: pointer; }
.fyb-saveditem__un:hover { border-color: var(--danger); background: var(--danger-soft, #fdecec); color: var(--danger); }
.fyb-savedempty { display: grid; justify-items: center; gap: 4px; padding: 44px 20px; text-align: center; }
.fyb-savedempty span { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 8px; border-radius: 50%; background: var(--teal-50); color: var(--teal-600); }
.fyb-savedempty strong { font-size: 16px; color: var(--ink); }
.fyb-savedempty p { max-width: 360px; margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--gray-500); }
.fyb-adm__badge.is-reel { background: #fde7f3; color: #be185d; }
@media (max-width: 620px) {
	.fyb-imenu__panel { width: min(280px, calc(100vw - 32px)); }
	.fyb-saveditem { gap: 10px; padding: 8px; }
	.fyb-saveditem__thumb { width: 64px; height: 64px; }
	.fyb-saveditem__thumb.is-reel { width: 50px; }
	.fyb-saveditem__un span { display: none; }
	.fyb-saveditem__un { padding: 9px; }
}

/* Panel → Automation */
.fyb-oto__hero { display: grid; grid-template-columns: 1fr auto; gap: 16px 20px; align-items: center; }
.fyb-oto__state { display: flex; align-items: center; gap: 14px; }
.fyb-oto__state > div { display: grid; }
.fyb-oto__state strong { font-size: 18px; color: var(--ink); }
.fyb-oto__state small { font-size: 13px; color: var(--gray-500); }
.fyb-oto__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--gray-300, #cbd5d4); box-shadow: 0 0 0 5px var(--surface); flex-shrink: 0; }
.fyb-oto__hero.is-on .fyb-oto__dot { background: #16a34a; box-shadow: 0 0 0 5px rgba(22, 163, 74, .15); animation: fyb-oto-nadi 1.6s ease-in-out infinite; }
@keyframes fyb-oto-nadi { 50% { box-shadow: 0 0 0 9px rgba(22, 163, 74, .05); } }
.fyb-oto__btns { display: flex; gap: 8px; }
.fyb-oto__btns form { margin: 0; }
.fyb-oto__run { min-width: 120px; }
.fyb-oto__stop { min-width: 110px; border-color: rgba(185, 28, 28, .3); color: var(--danger); }
.fyb-oto__stop:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.fyb-oto__stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.fyb-oto__stats span { display: grid; padding: 12px; border-radius: 12px; background: var(--surface); font-size: 12px; color: var(--gray-500); }
.fyb-oto__stats strong { font-family: var(--font-heading); font-size: 20px; color: var(--ink); }
.fyb-oto__targets { display: grid; gap: 10px; }
.fyb-oto__queue { display: grid; margin: 0; padding: 0; list-style: none; }
.fyb-oto__queue li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.fyb-oto__queue li:first-child { border-top: 0; }
.fyb-oto__queue img { width: 32px; height: 32px; border-radius: 50%; }
.fyb-oto__queue span { display: grid; flex: 1; min-width: 0; }
.fyb-oto__queue strong { font-size: 13.5px; }
.fyb-oto__queue small { font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-oto__queue time { flex-shrink: 0; padding: 3px 9px; border-radius: 999px; background: var(--teal-50); font-size: 12px; font-weight: 700; color: var(--teal-800); }
.fyb-oto__accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 10px; }
.fyb-oto__acc { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 36px 9px 10px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color .15s ease, background .15s ease, opacity .15s ease; }
.fyb-oto__acc input { position: absolute; opacity: 0; pointer-events: none; }
.fyb-oto__acc img { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.fyb-oto__acc span { display: grid; min-width: 0; }
.fyb-oto__acc strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-oto__acc small { font-size: 11.5px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-oto__tick { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--gray-300, #cbd5d4); border-radius: 50%; color: transparent; }
.fyb-oto__acc:has(input:checked) { border-color: var(--teal-200); background: var(--teal-50); }
.fyb-oto__acc:has(input:checked) .fyb-oto__tick { border-color: var(--teal-600); background: var(--teal-600); color: #fff; }
.fyb-oto__acc:has(input:not(:checked)) { opacity: .6; }
.fyb-oto__missing p { margin: 0 0 8px; font-size: 13px; color: #a1580c; }
.fyb-adm__danger .fyb-adm__btn + form, .fyb-adm__danger form + form { margin-top: 0; }
@media (max-width: 760px) {
	.fyb-oto__hero { grid-template-columns: minmax(0, 1fr); }
	.fyb-oto__btns .fyb-adm__btn { flex: 1; }
	.fyb-oto__btns form { flex: 1; }
	.fyb-oto__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fyb-adm__badge.is-dummy { background: #ede9fe; color: #6d28d9; }
.fyb-adm__cols { align-items: start; }

/* ==========================================================================
   Lapak saya (/my-listings/)
   ========================================================================== */
.fyb-myshop { gap: 14px; }
.fyb-myshop__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.fyb-myshop__stats span { display: grid; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .12); font-size: 12.5px; color: rgba(255, 255, 255, .8); }
.fyb-myshop__stats strong { font-family: var(--font-heading); font-size: 22px; line-height: 1.2; color: #fff; }
.fyb-myshop__list { padding: 0; border-radius: 18px; overflow: hidden; }
.fyb-myshop__tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.fyb-myshop__chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.fyb-myshop__chips::-webkit-scrollbar { display: none; }
.fyb-myshop__chips a { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--gray-700); }
.fyb-myshop__chips a span { font-size: 11.5px; color: var(--gray-400); }
.fyb-myshop__chips a.is-on { border-color: var(--teal-200); background: var(--teal-50); color: var(--teal-800); }
.fyb-myshop__search { display: flex; align-items: center; gap: 8px; flex: 0 1 260px; height: 38px; margin: 0; padding: 0 14px; border-radius: 999px; background: var(--surface); color: var(--gray-400); }
.fyb-myshop__search:focus-within { box-shadow: 0 0 0 2px var(--teal-200); background: var(--white); }
.fyb-myshop__search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); outline: none; }
.fyb-myshop__items { display: grid; margin: 0; padding: 0; list-style: none; }
.fyb-myshop__item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--border); }
.fyb-myshop__item:first-child { border-top: 0; }
.fyb-myshop__thumb { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 84px; height: 84px; overflow: hidden; border-radius: 14px; background: var(--teal-50); color: var(--teal-600); }
.fyb-myshop__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fyb-myshop__thumb em { position: absolute; inset: auto 0 0; padding: 3px 0; background: rgba(2, 26, 25, .7); font-size: 11px; font-style: normal; font-weight: 700; text-align: center; color: #fff; }
.fyb-myshop__item.is-sold .fyb-myshop__thumb img { filter: grayscale(.6); opacity: .75; }
.fyb-myshop__info { display: grid; gap: 3px; flex: 1; min-width: 0; }
.fyb-myshop__title { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fyb-myshop__title:hover { color: var(--teal-700); }
.fyb-myshop__price { font-size: 15px; color: var(--teal-700); }
.fyb-myshop__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--gray-500); }
.fyb-myshop__meta span { display: inline-flex; align-items: center; gap: 4px; }
.fyb-myshop__badge { padding: 2px 9px; border-radius: 999px; background: var(--teal-50); font-weight: 700; color: var(--teal-800); }
.fyb-myshop__badge.is-sold { background: #eceff3; color: #556070; }
.fyb-myshop__acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fyb-myshop__acts form { margin: 0; }
.fyb-myshop__btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--white); font: inherit; font-size: 13px; font-weight: 700; color: var(--gray-700); white-space: nowrap; cursor: pointer; }
.fyb-myshop__btn:hover { border-color: var(--teal-200); background: var(--teal-50); color: var(--teal-800); }
.fyb-myshop__btn.is-primary { border-color: var(--teal-600); background: var(--teal-600); color: #fff; }
.fyb-myshop__btn.is-primary:hover { background: var(--teal-700); color: #fff; }
.fyb-myshop__btn.is-danger { width: 36px; justify-content: center; padding: 0; color: var(--danger); }
.fyb-myshop__btn.is-danger:hover { border-color: var(--danger); background: var(--danger); color: #fff; }
.fyb-myshop__empty { display: grid; justify-items: center; gap: 6px; padding: 40px 20px; text-align: center; }
.fyb-myshop__empty > span { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 4px; border-radius: 50%; background: var(--teal-50); color: var(--teal-600); }
.fyb-myshop__empty strong { font-size: 16px; color: var(--ink); }
.fyb-myshop__empty p { max-width: 360px; margin: 0 0 6px; font-size: 13.5px; color: var(--gray-500); }
.fyb-myshop__empty .fyb-btn { display: inline-flex; align-items: center; gap: 6px; }
.fyb-rail__cta .fyb-btn.is-on { box-shadow: 0 0 0 3px var(--teal-200); }
@media (max-width: 760px) {
	.fyb-myshop__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fyb-myshop__search { flex: 1 1 100%; }
	.fyb-myshop__item { flex-wrap: wrap; gap: 10px 12px; padding: 12px; }
	.fyb-myshop__thumb { width: 72px; height: 72px; }
	.fyb-myshop__info { flex: 1 1 calc(100% - 90px); }
	.fyb-myshop__acts { width: 100%; }
	.fyb-myshop__acts > a,
	.fyb-myshop__acts > form:not(:last-child) { flex: 1; }
	.fyb-myshop__acts .fyb-myshop__btn:not(.is-danger) { width: 100%; justify-content: center; }
}

/* "Baca selengkapnya" di kiriman panjang */
.fyb-readmore { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--teal-700); cursor: pointer; }
.fyb-readmore:hover { text-decoration: underline; }
[data-rm-short][hidden], [data-rm-full][hidden] { display: none; }

/* Penghitung karakter kotak tulis kiriman */
.fyb-composer__chars { padding: 0 16px 8px; font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; color: var(--gray-400); opacity: 0; transition: opacity .15s, color .15s; }
.fyb-composer__chars.is-on { opacity: 1; }
.fyb-composer__chars.is-near { color: #b7791f; }
.fyb-composer__chars.is-full { font-weight: 700; color: var(--danger); }
.fyb-sharesheet__chars { display: none; margin-top: -6px; padding: 0 2px; }
.fyb-sharesheet__chars.is-on { display: block; }
.fyb-reelcap__count.is-near { color: #b7791f; }
.fyb-reelcap__count.is-full { font-weight: 700; color: var(--danger); }

/* Penghitung komentar: muncul mulai 90% batas saja */
.fyb-commentbox__chars { display: none; flex-basis: 100%; padding: 0 4px 2px; font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: right; color: #b7791f; }
.fyb-commentbox__chars.is-near, .fyb-commentbox__chars.is-full { display: block; }
.fyb-commentbox__chars.is-full { font-weight: 700; color: var(--danger); }

/* Teks panjang (data-clamp): "… Baca selengkapnya" di ujung baris terakhir */
.fyb-clamp__more { display: inline; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; white-space: nowrap; cursor: pointer; }
.fyb-clamp__more:hover { text-decoration: underline; }
.fyb-reel__capwrap { margin-top: 8px; }
.fyb-reel__capwrap .fyb-reel__cap { margin: 0; max-height: none; overflow: hidden; overflow-wrap: anywhere; }
.fyb-reel__capwrap .fyb-reel__cap.is-open { max-height: 40vh; overflow-y: auto; pointer-events: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.fyb-reel__cap .fyb-clamp__more { color: #fff; }
.fyb-reel__info.is-capopen { background: linear-gradient(to top, rgba(2, 20, 19, .95) 60%, rgba(2, 20, 19, 0)); }

/* Bio profil: paling atas di kartu Tentang (seperti "Intro" Facebook) */
.fyb-pf__bio { display: grid; gap: 10px; margin: -2px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.fyb-pf__biotext { margin: 0; font-size: 14.5px; line-height: 1.5; text-align: center; color: var(--ink); overflow-wrap: anywhere; }
.fyb-pf__bio.is-empty .fyb-pf__biotext,
.fyb-pf__bio.is-editing .fyb-pf__biotext,
.fyb-pf__bio.is-editing .fyb-pf__biobtn { display: none; }
.fyb-pf__biobtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 36px; border: 0; border-radius: 10px; background: var(--surface); font: inherit; font-size: 13.5px; font-weight: 700; color: var(--gray-700); cursor: pointer; }
.fyb-pf__biobtn:hover { background: var(--teal-50); color: var(--teal-800); }
.fyb-pf__bioico { display: inline-flex; }
.fyb-pf__bio.is-empty .fyb-pf__bioico.is-edit,
.fyb-pf__bio:not(.is-empty) .fyb-pf__bioico.is-add { display: none; }
.fyb-pf__bioform { display: grid; gap: 8px; }
.fyb-pf__bioform[hidden] { display: none; }
.fyb-pf__bioform textarea { min-height: 76px; resize: none; text-align: center; font-size: 14px; line-height: 1.5; }
.fyb-pf__biofoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fyb-pf__biofoot > span:last-child { display: flex; gap: 6px; }
.fyb-acc__bio { margin-top: 14px; }
.fyb-acc__bio .fyb-field__foot .fyb-help { margin: 0; }

/* Foto profil yang sedang punya cerita: cincin (seperti Facebook), klik = buka cerita */
.fyb-pf__storyring { display: block; padding: 4px; border: 0; border-radius: 50%; background: var(--gray-300, #cfd6dd); cursor: pointer; transition: transform .15s; }
.fyb-pf__storyring.is-new { background: conic-gradient(from 210deg, #0d9488, #14b8a6, #22d3ee, #0f766e, #0d9488); }
.fyb-pf__storyring:hover { transform: scale(1.02); }
.fyb-pf__storyring:focus-visible { outline: 3px solid var(--teal-300, #5eead4); outline-offset: 3px; }
.fyb-pf__avatar.has-story .fyb-pf__storyring img { display: block; box-shadow: none; }
/* Tanpa cerita: tanpa garis toska, supaya tidak tertukar dengan cincin cerita. */
.fyb-pf__avatar:not(.has-story) img { box-shadow: 0 14px 30px -14px rgba(2, 26, 25, .6); }

/* "Lihat semua balasan" (balasan berikutnya dimuat saat diklik) */
.fyb-comment__morereplies { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 4px 6px; padding: 4px 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--gray-600, #4b5563); cursor: pointer; }
.fyb-comment__morereplies:hover { background: var(--surface); color: var(--teal-800); }
.fyb-comment__morereplies .fyb-icon { color: var(--gray-400); }
.fyb-comment__morereplies.is-loading { opacity: .7; cursor: progress; }

/* Jadi Penjual: bukti berjualan (maks. 5 gambar) */
.fyb-seller__proofs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 8px; }
.fyb-seller__proof, .fyb-seller__proofadd { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
.fyb-seller__proof img { width: 100%; height: 100%; object-fit: cover; }
.fyb-seller__proofx { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(2, 26, 25, .7); font-size: 16px; line-height: 1; color: #fff; cursor: pointer; }
.fyb-seller__proofx:hover { background: var(--danger); }
.fyb-seller__proofadd { display: grid; place-content: center; justify-items: center; gap: 2px; border: 1.5px dashed var(--teal-200); background: var(--teal-50); color: var(--teal-700); text-align: center; cursor: pointer; }
.fyb-seller__proofadd:hover { border-color: var(--teal-400); background: var(--teal-100); }
.fyb-seller__proofadd[hidden] { display: none; }
.fyb-seller__proofadd span { font-size: 12.5px; font-weight: 700; }
.fyb-seller__proofadd small { font-size: 11.5px; color: var(--gray-500); }
.fyb-proofs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.fyb-proofs__item { display: block; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--surface); }
.fyb-proofs__item img { width: 100%; height: 100%; object-fit: cover; }
.fyb-adm__applinks { display: grid; gap: 6px; margin: 10px 0; padding: 0; list-style: none; font-size: 13px; }
.fyb-adm__applinks li { display: flex; align-items: center; gap: 6px; }
.fyb-adm__applinks a { color: var(--teal-700); font-weight: 600; overflow-wrap: anywhere; }
.fyb-field .fyb-seller__proofadd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 6px; }
.fyb-field .fyb-seller__proofadd[hidden] { display: none; }

/* Panel: halaman Pengajuan penjual */
.fyb-aju__tabs { margin-bottom: 14px; }
.fyb-aju__list { display: grid; gap: 14px; }
.fyb-aju { display: grid; gap: 12px; scroll-margin-top: 80px; }
.fyb-aju:target { box-shadow: 0 0 0 2px var(--teal-400); }
.fyb-aju__head { display: flex; align-items: center; gap: 12px; }
.fyb-aju__head .fyb-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.fyb-aju__who { display: grid; flex: 1; min-width: 0; }
.fyb-aju__who strong { font-size: 15px; color: var(--ink); }
.fyb-aju__who small { font-size: 12.5px; color: var(--gray-500); }
.fyb-aju .fyb-adm__applinks { margin: 0; }
.fyb-aju__story { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface); font-size: 14px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.fyb-aju__proof > span { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 700; color: var(--gray-600, #4b5563); }
.fyb-aju__proof .fyb-proofs__item { width: 96px; height: 96px; }
.fyb-aju__noproof { margin: 0; font-size: 12.5px; color: var(--gray-400); }
.fyb-aju__acts { justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--border); }
.fyb-adm__applink { display: flex; align-items: center; gap: 12px; color: var(--teal-800); }
.fyb-adm__applink span { display: grid; }
.fyb-adm__applink small { color: var(--gray-500); }
.fyb-adm__applink:hover { box-shadow: 0 0 0 2px var(--teal-200); }

/* ==========================================================================
   Tombol Ikuti (pengganti Tambah teman)
   ========================================================================== */
.fyb-follow { margin: 0; flex-shrink: 0; }
.fyb-followbtn {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	height: 40px; padding: 0 18px;
	border: 1.5px solid var(--teal-600); border-radius: 999px;
	background: var(--teal-600); color: #fff;
	font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap;
	cursor: pointer;
	transition: background .18s, color .18s, border-color .18s, transform .12s, box-shadow .18s;
}
.fyb-followbtn:hover { background: var(--teal-700); border-color: var(--teal-700); box-shadow: 0 6px 16px -8px rgba(13, 148, 136, .7); }
.fyb-followbtn:active { transform: scale(.95); }
.fyb-followbtn.is-on { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-800); box-shadow: none; }
.fyb-followbtn.is-on:hover { background: var(--white); border-color: var(--teal-400); }
.fyb-followbtn__icon { display: inline-flex; transition: transform .25s; }
.fyb-followbtn__label { transition: opacity .15s; }
.fyb-followbtn__spin {
	position: absolute; top: 50%; left: 50%;
	width: 16px; height: 16px; margin: -8px 0 0 -8px;
	border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
	opacity: 0; pointer-events: none;
}
.fyb-followbtn.is-busy { pointer-events: none; transform: scale(.96); }
.fyb-followbtn.is-busy .fyb-followbtn__icon,
.fyb-followbtn.is-busy .fyb-followbtn__label { opacity: 0; }
.fyb-followbtn.is-busy .fyb-followbtn__spin { opacity: 1; animation: fyb-follow-spin .7s linear infinite; }
.fyb-followbtn.is-pop { animation: fyb-follow-pop .38s cubic-bezier(.3, 1.6, .5, 1); }
.fyb-followbtn.is-pop .fyb-followbtn__icon { animation: fyb-follow-icon .45s ease-out; }
@keyframes fyb-follow-spin { to { transform: rotate(360deg); } }
@keyframes fyb-follow-pop { 0% { transform: scale(.82); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes fyb-follow-icon { 0% { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) {
	.fyb-followbtn.is-pop, .fyb-followbtn.is-pop .fyb-followbtn__icon { animation: none; }
}
/* Ukuran */
.fyb-follow--sm .fyb-followbtn { height: 32px; padding: 0 12px; font-size: 13px; }
.fyb-follow--block { flex: 1; }
.fyb-follow--block .fyb-followbtn { width: 100%; height: 36px; font-size: 13.5px; }
.fyb-mcard__actions .fyb-follow { flex: 1; }
.fyb-xstrip .fyb-follow { width: 100%; }
.fyb-pf__friend .fyb-followbtn { height: 42px; }

/* Profil: angka pengikut / mengikuti */
.fyb-pf__follows { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; font-size: 14px; color: var(--gray-500); }
.fyb-pf__follows a { color: var(--gray-600, #4b5563); }
.fyb-pf__follows a:hover { color: var(--teal-700); }
.fyb-pf__follows strong { font-weight: 800; color: var(--ink); }
.fyb-pf__listhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 12px 16px; }
.fyb-pf__listhead h2 { margin: 0; font-size: 17px; color: var(--teal-800); }
.fyb-pf__listtabs { display: flex; gap: 6px; }
.fyb-pf__listtabs a { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--gray-700); }
.fyb-pf__listtabs a.is-on { border-color: var(--teal-200); background: var(--teal-50); color: var(--teal-800); }

/* HP: top bar tanpa logo — cukup nama situs, seperti aplikasi Facebook. */
@media (max-width: 760px) {
	.fyb-topbar .fyb-brand img { display: none; }
	.fyb-topbar .fyb-brand__name { font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
}

/* Panel: tab Pengguna / Pengguna dummy */
.fyb-adm__segtabs { display: inline-flex; gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 14px; background: var(--surface); }
.fyb-adm__segtabs a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--gray-600, #4b5563); }
.fyb-adm__segtabs a em { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--border); font-size: 12px; font-style: normal; text-align: center; color: var(--gray-700); }
.fyb-adm__segtabs a.is-on { background: var(--white); color: var(--teal-800); box-shadow: 0 2px 8px -4px rgba(2, 26, 25, .25); }
.fyb-adm__segtabs a.is-on em { background: var(--teal-50); color: var(--teal-800); }
.fyb-adm__dummyadd { margin-bottom: 14px; }
.fyb-adm__dummyform { display: grid; gap: 10px; margin: 0; }
.fyb-adm__dummyform label { display: grid; gap: 2px; }
.fyb-adm__dummyform label strong { font-size: 15px; color: var(--ink); }
.fyb-adm__dummyform label small { font-size: 12.5px; color: var(--gray-500); }
.fyb-adm__dummyrow { display: flex; gap: 8px; }
.fyb-adm__dummyrow .fyb-adm__input { flex: 1; min-width: 0; }

/* Panel → Automation: halaman daftar akun */
.fyb-oto__list { position: relative; transition: opacity .15s; }
.fyb-oto__list.is-loading { opacity: .45; pointer-events: none; }
.fyb-oto__pager { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.fyb-oto__pg { min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--white); font: inherit; font-size: 14px; font-weight: 700; color: var(--gray-700); cursor: pointer; }
.fyb-oto__pg:hover:not(:disabled) { border-color: var(--teal-200); background: var(--teal-50); color: var(--teal-800); }
.fyb-oto__pg.is-on { border-color: var(--teal-600); background: var(--teal-600); color: #fff; }
.fyb-oto__pg:disabled { opacity: .4; cursor: default; }
.fyb-oto__gap { padding: 0 2px; color: var(--gray-400); }
.fyb-oto__pginfo { margin-left: auto; font-size: 12.5px; color: var(--gray-500); }
.fyb-oto__acc.is-saving { opacity: .6; }

/* ==========================================================================
   Tombol kirim: animasi memuat (kiriman & komentar)
   ========================================================================== */
@keyframes fyb-putar { to { transform: rotate(360deg); } }
.fyb-composer__submit, .fyb-commentbox button[type="submit"] { position: relative; }
.fyb-commentbox.is-sending button[type="submit"],
.fyb-reelcomment.is-sending button[type="submit"] { color: transparent !important; pointer-events: none; }
.fyb-commentbox.is-sending button[type="submit"]::after,
.fyb-reelcomment.is-sending button[type="submit"]::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 18px; height: 18px; margin: -9px 0 0 -9px;
	border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%;
	animation: fyb-putar .7s linear infinite;
}
.fyb-commentbox.is-sending button[type="submit"]::after { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-color: rgba(13, 148, 136, .25); border-top-color: var(--teal-600); }
.fyb-commentbox.is-sending .fyb-commentbox__field { opacity: 1; }
.fyb-composer.is-sending .fyb-composer__input { opacity: .6; }

/* Komentar yang sedang dikirim (tampil duluan) */
.fyb-comment.is-pending { opacity: .62; }
.fyb-comment.is-pending .fyb-comment__bubble { background: var(--surface); }
.fyb-comment__sending { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-500); }
.fyb-comment__sending i { width: 11px; height: 11px; border: 2px solid var(--teal-200); border-top-color: var(--teal-600); border-radius: 50%; animation: fyb-putar .7s linear infinite; }
.fyb-post.is-new { animation: fyb-kartu-baru .45s ease-out; }
@keyframes fyb-kartu-baru { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Tombol Post saat memproses: tetap teal, spinner + tulisan (bukan kosong). */
.fyb-composer__submit.is-busy,
.fyb-composer__submit.is-busy:disabled {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	background: var(--teal-600) !important; color: #fff !important; cursor: progress; opacity: 1;
}
.fyb-composer__submit.is-busy { pointer-events: none; transition: none; }
.fyb-btnspin { flex-shrink: 0; width: 17px; height: 17px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: fyb-putar .7s linear infinite; }

/* ==========================================================================
   Foto diunggah begitu dipilih: progress di petak foto
   ========================================================================== */
.fyb-composer__thumb, .fyb-attachprev__item { position: relative; }
.fyb-composer__upl { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 18px; border-radius: 999px; background: rgba(2, 26, 25, .55); overflow: hidden; opacity: 0; transition: opacity .2s; pointer-events: none; }
.fyb-composer__upl i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--teal-500, #14b8a6); transition: width .2s; }
.fyb-composer__upl b { position: relative; display: block; font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center; color: #fff; }
.is-uploading > .fyb-composer__upl, .is-failed > .fyb-composer__upl { opacity: 1; }
.is-uploading > img { opacity: .7; }
.is-done > .fyb-composer__upl { opacity: 1; left: auto; right: 6px; width: 20px; height: 20px; background: var(--teal-600); animation: fyb-upl-selesai 1.6s forwards; }
.is-done > .fyb-composer__upl i { display: none; }
.is-done > .fyb-composer__upl b { line-height: 20px; }
.is-failed > .fyb-composer__upl { background: var(--danger); }
.is-failed > .fyb-composer__upl i { display: none; }
@keyframes fyb-upl-selesai { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.fyb-attachprev__item .fyb-composer__upl { left: 3px; right: 3px; bottom: 3px; height: 14px; }
.fyb-attachprev__item .fyb-composer__upl b { font-size: 9px; line-height: 14px; }

/* Kemajuan unggah video reel (diunggah begitu dipilih). */
.fyb-reelprog { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 13px; color: var(--muted, #65676b); }
.fyb-reelprog[hidden] { display: none; }
.fyb-reelprog__bar { flex: 1; height: 6px; border-radius: 99px; background: rgba(0,0,0,.08); overflow: hidden; }
.fyb-reelprog__bar i { display: block; height: 100%; width: 0; background: #066867; border-radius: inherit; transition: width .2s ease; }
.fyb-reelprog.is-ok .fyb-reelprog__txt { color: #066867; font-weight: 600; }