/* =============================================================================
   fred.my — header & footer bersama (fred.my, /akaun, /help, /chatlane, /fredo)
   Semua kelas berawalan .fm- supaya tidak bertembung dengan CSS setiap laman.
   Navigasi: Utama + aplikasi fm_apps() + Bantuan.
   ========================================================================== */
@font-face { font-family: "Jakarta"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/jakarta.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jakarta"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/jakarta-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/outfit.woff2) format("woff2"); }

:root {
    --fm-bar-h: 64px;
    --fm-font: "Jakarta", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fm-display: "Outfit", "Jakarta", ui-sans-serif, system-ui, sans-serif;
    --fm-night: #0b1220;
    --fm-night-2: #131c30;
    --fm-night-3: #1c2740;
    --fm-line: rgba(255, 255, 255, .09);
    --fm-ink: #e8eefb;
    --fm-dim: #9aa8c3;
    --fm-blue: #3b82f6;
    --fm-violet: #8b5cf6;
}

html { scroll-padding-top: calc(var(--fm-bar-h, 64px) + 16px); }
.fm-bar, .fm-bar *, .fm-foot, .fm-foot *, .fm-skip { box-sizing: border-box; }
.fm-i { width: 20px; height: 20px; flex: none; display: block; }

.fm-skip { position: absolute; left: 12px; top: -60px; z-index: 2000; padding: 10px 16px; border-radius: 10px; background: #fff; color: #0b1220; font: 600 14px/1 var(--fm-font); text-decoration: none; transition: top .15s; }
.fm-skip:focus { top: 10px; }

/* ---- Bar: kaca cerah/gelap, melekit, mengecil semasa tatal ---------------- */
.fm-bar {
    --b-bg: rgba(255, 255, 255, .78); --b-line: rgba(15, 23, 42, .08); --b-ink: #0b1220; --b-dim: #475569;
    --b-seg: rgba(15, 23, 42, .045); --b-seg-line: rgba(15, 23, 42, .06); --b-hover: rgba(15, 23, 42, .06);
    --b-on-bg: #ffffff; --b-on-ink: #1d4ed8; --b-on-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 6px 16px -8px rgba(37, 99, 235, .45);
    --b-menu: #ffffff; --b-menu-ink: #0f172a; --b-menu-dim: #64748b; --b-menu-hover: #f1f5f9; --b-menu-line: rgba(15, 23, 42, .08);
    position: sticky; top: 0; z-index: 1000; height: var(--fm-bar-h);
    background: var(--b-bg); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
    border-bottom: 1px solid var(--b-line); color: var(--b-ink); font: 500 15px/1.4 var(--fm-font); -webkit-font-smoothing: antialiased;
    transition: height .25s ease, box-shadow .25s ease, background .25s ease;
}
:root[data-theme="dark"] .fm-bar {
    --b-bg: rgba(9, 14, 26, .78); --b-line: rgba(255, 255, 255, .08); --b-ink: #eef2fb; --b-dim: #a3b0c8;
    --b-seg: rgba(255, 255, 255, .05); --b-seg-line: rgba(255, 255, 255, .07); --b-hover: rgba(255, 255, 255, .07);
    --b-on-bg: rgba(255, 255, 255, .12); --b-on-ink: #ffffff; --b-on-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 16px -8px rgba(0, 0, 0, .6);
    --b-menu: #111a2e; --b-menu-ink: #eef2fb; --b-menu-dim: #94a3b8; --b-menu-hover: rgba(255, 255, 255, .06); --b-menu-line: rgba(255, 255, 255, .08);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .fm-bar.fm-auto {
        --b-bg: rgba(9, 14, 26, .78); --b-line: rgba(255, 255, 255, .08); --b-ink: #eef2fb; --b-dim: #a3b0c8;
        --b-seg: rgba(255, 255, 255, .05); --b-seg-line: rgba(255, 255, 255, .07); --b-hover: rgba(255, 255, 255, .07);
        --b-on-bg: rgba(255, 255, 255, .12); --b-on-ink: #ffffff; --b-on-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
        --b-menu: #111a2e; --b-menu-ink: #eef2fb; --b-menu-dim: #94a3b8; --b-menu-hover: rgba(255, 255, 255, .06); --b-menu-line: rgba(255, 255, 255, .08);
    }
}
.fm-bar.is-scrolled { box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .35); }
.fm-bar__in { max-width: 1440px; height: 100%; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 16px; position: relative; }
.fm-bar a { color: inherit; text-decoration: none; }

.fm-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--b-ink, #fff) !important; text-decoration: none !important; }
.fm-brand__mark { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, var(--fm-blue), var(--fm-violet)); color: #fff; font: 800 18px/1 var(--fm-display); box-shadow: 0 8px 18px -8px rgba(99, 102, 241, .8), inset 0 1px 0 rgba(255, 255, 255, .3); }
.fm-brand__txt { font: 700 19px/1 var(--fm-display); letter-spacing: -.015em; color: var(--b-ink, #fff); }
.fm-brand__txt b { font-weight: 700; background: linear-gradient(90deg, #3b82f6, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- Warna identiti setiap aplikasi (dipakai oleh crumb, menu Aplikasi & bar aplikasi) ---- */
.fm-tone-blue   { --fm-tone: #2563eb; --fm-tone-2: #7c3aed; --fm-tone-ink: #1d4ed8; }
.fm-tone-amber  { --fm-tone: #f59e0b; --fm-tone-2: #ea580c; --fm-tone-ink: #b45309; }
.fm-tone-violet { --fm-tone: #7c3aed; --fm-tone-2: #4f46e5; --fm-tone-ink: #6d28d9; }
.fm-tone-teal   { --fm-tone: #0f766e; --fm-tone-2: #0e7490; --fm-tone-ink: #0f766e; }
.fm-tone-green  { --fm-tone: #059669; --fm-tone-2: #0e7490; --fm-tone-ink: #047857; }
.fm-tone-sky    { --fm-tone: #0284c7; --fm-tone-2: #2563eb; --fm-tone-ink: #0369a1; }
.fm-tone-pink   { --fm-tone: #db2777; --fm-tone-2: #9333ea; --fm-tone-ink: #be185d; }
.fm-tone-fuchsia { --fm-tone: #c026d3; --fm-tone-2: #7c3aed; --fm-tone-ink: #a21caf; }
.fm-tone-rose   { --fm-tone: #e11d48; --fm-tone-2: #c2410c; --fm-tone-ink: #be123c; }
:root[data-theme="dark"] [class*="fm-tone-"] { --fm-tone-ink: color-mix(in srgb, var(--fm-tone) 55%, #fff); }

/* Aplikasi semasa (crumb) di sebelah jenama */
.fm-crumb { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; margin-left: -4px; border-radius: 999px; flex: none; color: var(--b-ink) !important; font: 650 14px/1 var(--fm-font); text-decoration: none !important; background: var(--b-seg); border: 1px solid var(--b-seg-line); transition: background .15s; }
.fm-crumb:hover { background: var(--b-hover); }
.fm-crumb::before { content: "/"; order: -1; margin: 0 2px 0 6px; color: var(--b-dim); opacity: .6; font-weight: 400; }
.fm-crumb__dot { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--fm-tone), var(--fm-tone-2)); }
.fm-crumb__dot .fm-i { width: 15px; height: 15px; }

/* Navigasi utama — ringkas: "Aplikasi ▾" + "Bantuan" */
.fm-nav { display: flex; align-items: center; gap: 4px; min-width: 0; margin-left: 8px; flex-shrink: 0; }
.fm-nav__a { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 999px; border: 0; background: none; cursor: pointer; color: var(--b-dim) !important; font: 600 14.5px/1 var(--fm-font); text-decoration: none !important; white-space: nowrap; transition: color .15s, background .15s; }
.fm-nav__a .fm-i { width: 18px; height: 18px; opacity: .8; }
.fm-nav__a:hover, .fm-nav__a[aria-expanded="true"] { color: var(--b-ink) !important; background: var(--b-hover); }
.fm-nav__a.is-on { color: var(--b-ink) !important; }
.fm-apps__btn > .fm-i:last-child { width: 15px; height: 15px; transition: transform .2s; }
.fm-apps__btn[aria-expanded="true"] > .fm-i:last-child { transform: rotate(180deg); }
.fm-nav__auth, .fm-nav__prefs { display: none; }

/* Panel "Aplikasi" */
.fm-apps { position: relative; }
.fm-apps__panel { display: none; position: absolute; left: 0; top: calc(100% + 12px); width: 620px; max-width: calc(100vw - 24px); padding: 10px; border-radius: 20px; background: var(--b-menu); color: var(--b-menu-ink); border: 1px solid var(--b-menu-line); box-shadow: 0 30px 70px -24px rgba(8, 12, 30, .5); font: 500 14.5px/1.4 var(--fm-font); animation: fm-pop .16s ease; transform-origin: top left; }
.fm-apps.is-open .fm-apps__panel { display: block; }
.fm-apps__title { margin: 4px 8px 10px; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--b-menu-dim); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fm-apps__title small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.fm-apps__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.fm-app-link { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; color: var(--b-menu-ink) !important; text-decoration: none !important; transition: background .15s; }
.fm-app-link:hover { background: var(--b-menu-hover); }
.fm-app-link.is-on { background: var(--b-menu-hover); box-shadow: inset 3px 0 0 var(--fm-tone); }
.fm-app-link__ico { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--fm-tone), var(--fm-tone-2)); box-shadow: 0 8px 16px -10px var(--fm-tone); }
.fm-app-link__ico .fm-i { width: 20px; height: 20px; }
.fm-app-link__txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fm-app-link__txt b { font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fm-app-link__txt em { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--fm-tone) 14%, transparent); color: var(--fm-tone-ink); }
.fm-app-link__txt small { color: var(--b-menu-dim); font-size: 13px; }
.fm-apps__home { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 12px 10px 4px; border-top: 1px solid var(--b-menu-line); color: var(--b-menu-ink) !important; font-weight: 650; text-decoration: none !important; }
.fm-apps__home .fm-i { width: 18px; height: 18px; color: var(--b-menu-dim); }
.fm-apps__home span { flex: 1; }
.fm-apps__home:hover span { text-decoration: underline; }

.fm-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
/* Reserve space for preferences before the desktop navigation can collide. */
@media (min-width: 961px) {
    .fm-bar__in { container-type: inline-size; }
    .fm-crumb { flex: 0 1 auto; min-width: 36px; max-width: 230px; }
    .fm-crumb > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@container (max-width: 1400px) {
    .fm-crumb > span:last-child { display: none; }
    .fm-nav__a { padding-inline: 8px; }
}
@media (min-width: 961px) and (max-width: 1500px) {
    .fm-bar__in { gap: 8px; }
    .fm-nav { gap: 0; margin-left: 0; }
    .fm-nav__a { padding-inline: 8px; }
    .fm-crumb > span:last-child { display: none; }
}
.fm-lang { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--b-seg); border: 1px solid var(--b-seg-line); }
.fm-lang a, .fm-lang__on { min-width: 38px; height: 32px; display: grid; place-items: center; padding: 0 10px; border-radius: 999px; font: 700 12.5px/1 var(--fm-font); letter-spacing: .05em; color: var(--b-dim) !important; text-decoration: none !important; transition: color .15s, background .15s; }
.fm-lang a:hover { color: var(--b-ink) !important; background: var(--b-hover); }
.fm-lang__on { background: var(--b-on-bg); color: var(--b-on-ink) !important; box-shadow: var(--b-on-shadow); }

.fm-icon-btn { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--b-seg-line); background: var(--b-seg); color: var(--b-ink); cursor: pointer; padding: 0; transition: background .15s, transform .15s; }
.fm-icon-btn:hover { background: var(--b-hover); }
.fm-icon-btn:active { transform: scale(.95); }
.fm-icon-btn:focus-visible, .fm-btn:focus-visible, .fm-nav__a:focus-visible, .fm-user__btn:focus-visible, .fm-lang a:focus-visible, .fm-foot a:focus-visible, .fm-brand:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.fm-theme-sun { display: none; }
:root[data-theme="dark"] .fm-theme-sun { display: block; }
:root[data-theme="dark"] .fm-theme-moon { display: none; }

.fm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; font: 650 14.5px/1 var(--fm-font); text-decoration: none !important; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s; }
.fm-btn--primary { background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff !important; box-shadow: 0 10px 22px -12px rgba(79, 70, 229, .9); }
.fm-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(79, 70, 229, .9); }
.fm-btn--ghost { color: var(--b-ink, #fff) !important; border-color: var(--b-seg-line, rgba(255, 255, 255, .15)); background: transparent; }
.fm-btn--ghost:hover { background: var(--b-hover, rgba(255, 255, 255, .08)); }

/* ---- Akaun (avatar + menu) --------------------------------------------- */
.fm-av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: #fff; font: 700 13px/1 var(--fm-font); }
.fm-av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.fm-av--lg { width: 44px; height: 44px; font-size: 16px; }
.fm-user { position: relative; }
.fm-user__btn { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px 0 4px; border-radius: 999px; border: 1px solid var(--b-seg-line); background: var(--b-seg); color: var(--b-ink); cursor: pointer; font: 650 14px/1 var(--fm-font); transition: background .15s; }
.fm-user__btn:hover { background: var(--b-hover); }
.fm-user__btn .fm-av { box-shadow: 0 0 0 2px var(--b-menu); }
.fm-user__btn .fm-i { width: 16px; height: 16px; color: var(--b-dim); transition: transform .2s; }
.fm-user__btn[aria-expanded="true"] .fm-i { transform: rotate(180deg); }
.fm-user__name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-user__menu { position: absolute; right: 0; top: calc(100% + 10px); width: 290px; max-width: calc(100vw - 24px); padding: 8px; border-radius: 18px; background: var(--b-menu); color: var(--b-menu-ink); border: 1px solid var(--b-menu-line); box-shadow: 0 30px 70px -24px rgba(8, 12, 30, .5); font: 500 14.5px/1.4 var(--fm-font); transform-origin: top right; animation: fm-pop .16s ease; }
@keyframes fm-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.fm-user__menu[hidden] { display: none; }
.fm-user__head { display: flex; gap: 12px; align-items: center; padding: 10px 10px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--b-menu-line); }
.fm-user__head > div { min-width: 0; }
.fm-user__head small:first-child { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.fm-user__head b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-user__head small { display: block; color: var(--b-menu-dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-user__menu a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; color: var(--b-menu-ink) !important; text-decoration: none !important; font-weight: 600; }
.fm-user__menu a .fm-i { width: 18px; height: 18px; color: var(--b-menu-dim); }
.fm-user__menu a:hover { background: var(--b-menu-hover); }
.fm-user__menu a.fm-user__out { color: #dc2626 !important; margin-top: 4px; border-top: 1px solid var(--b-menu-line); border-radius: 0 0 12px 12px; }
.fm-user__menu a.fm-user__out .fm-i { color: #dc2626; }

.fm-login .fm-i { width: 18px; height: 18px; }
.fm-burger { display: none; }
.fm-burger__close { display: none; }
.fm-burger[aria-expanded="true"] .fm-burger__open { display: none; }
.fm-burger[aria-expanded="true"] .fm-burger__close { display: block; }

@media (max-width: 1100px) { .fm-hide-md { display: none; } .fm-user__name { display: none; } }
@media (max-width: 960px) {
    :root { --fm-bar-h: 60px; }
    .fm-bar__in { padding: 0 10px 0 14px; gap: 8px; }
    .fm-brand__mark { width: 34px; height: 34px; }
    .fm-burger { display: grid; }
    .fm-hide-mob { display: none !important; }
    .fm-user__btn > .fm-i { display: none; }
    .fm-user__btn { padding: 0 3px; }
    .fm-nav { position: fixed; left: 10px; right: 10px; top: calc(var(--fm-bar-h) + 8px); margin: 0; transform: translateY(-6px) scale(.98); max-height: calc(100dvh - var(--fm-bar-h) - 20px); overflow-y: auto; overscroll-behavior: contain; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; border-radius: 22px; background: var(--b-menu); color: var(--b-menu-ink); border: 1px solid var(--b-menu-line); box-shadow: 0 30px 70px -20px rgba(8, 12, 30, .45); opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility 0s .18s; }
    .fm-nav.is-open { transform: none; opacity: 1; visibility: visible; transition: opacity .18s, transform .18s; }
    /* Kad akaun di atas sekali — pengguna terus nampak cara log masuk / daftar */
    .fm-nav__auth { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(37, 99, 235, .1), rgba(124, 58, 237, .1)); border: 1px solid var(--b-menu-line); }
    .fm-nav__auth p { grid-column: 1 / -1; margin: 0 0 4px; display: flex; flex-direction: column; gap: 2px; font: 500 13.5px/1.45 var(--fm-font); color: var(--b-menu-dim); }
    .fm-nav__auth p b { color: var(--b-menu-ink); font-size: 15.5px; }
    .fm-nav__auth .fm-btn { height: 46px; }
    .fm-nav__auth .fm-btn .fm-i { width: 18px; height: 18px; }
    .fm-nav__auth .fm-btn--ghost { color: var(--b-menu-ink) !important; border-color: var(--b-menu-line); background: var(--b-menu); }
    .fm-apps__btn { display: none; }
    .fm-apps__panel { display: block; position: static; width: auto; padding: 0; border: 0; box-shadow: none; background: none; animation: none; }
    .fm-apps__title { margin: 2px 6px 8px; }
    .fm-nav__help { height: auto; padding: 12px 10px; border-radius: 14px; color: var(--b-menu-ink) !important; font-size: 15px; border-top: 1px solid var(--b-menu-line); }
    .fm-nav__help:hover { background: var(--b-menu-hover); }
    .fm-nav__prefs { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 14px; background: var(--b-menu-hover); }
    .fm-nav__prefs > span { flex: 1; font: 650 14px/1 var(--fm-font); color: var(--b-menu-dim); }
    .fm-nav__prefs .fm-icon-btn { width: auto; padding: 0 12px; gap: 6px; display: inline-flex; align-items: center; color: var(--b-menu-ink); border-color: var(--b-menu-line); background: var(--b-menu); font: 600 13px/1 var(--fm-font); }
    .fm-nav__prefs .fm-icon-btn .fm-i { width: 17px; height: 17px; }
    .fm-nav__prefs .fm-lang { background: var(--b-menu); border-color: var(--b-menu-line); }
    .fm-user__menu { position: fixed; right: 10px; top: calc(var(--fm-bar-h) + 8px); }
}
.fm-icon-btn__txt { display: none; }
/* Shared disclosure panels: links stay readable without native select menus. */
.fm-more { position: relative; }
[data-nav-menu] > summary { list-style: none; cursor: pointer; }
[data-nav-menu] > summary::-webkit-details-marker { display: none; }
[data-nav-menu][open] > summary > svg:last-child { transform: rotate(180deg); }
[data-nav-menu]:not([open]) > .fm-nav-popover { display: none; }
.fm-nav-popover { position: absolute; right: 0; top: calc(100% + 8px); z-index: 3000; width: 280px; max-width: calc(100vw - 24px); max-height: min(560px,70dvh); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 10px; background: #fff; color: #0f172a; border: 1px solid #dbe3ee; border-radius: 18px; box-shadow: 0 18px 50px #0b12202b; font: 500 14px/1.45 var(--fm-font); }
.fm-nav-popover a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; height: auto; box-sizing: border-box; border-radius: 10px; color: inherit !important; text-decoration: none !important; white-space: normal; overflow-wrap: anywhere; }
.fm-nav-popover a:hover,.fm-nav-popover a[aria-current=page] { background: #edf3ff; color: #1d4ed8 !important; }
.fm-nav-popover .fm-i,.fm-nav-popover .i { width: 18px; height: 18px; flex: none; }
.fm-nav-popover a > svg { width: 18px; height: 18px; flex: none; }
.fm-nav-popover a > span { min-width: 0; }
.fm-nav-popover .fm-nav__a small { display: none; }
.fm-nav-popover__title { padding: 8px 44px 10px 12px; margin: 0; color: #64748b; font-size: 12px; font-weight: 700; }
.fm-nav-popover__close { position: absolute; right: 8px; top: 6px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; font-size: 24px; }
.fm-nav-popover__close:hover { background: #edf3ff; }
.fm-nav-popover .out { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; color: #b91c1c; border: 0; border-top: 1px solid #e2e8f0; border-radius: 0; background: none; font: inherit; cursor: pointer; }
.fm-nav-popover.is-mobile-menu { position: fixed; top: var(--fm-context-top,120px); left: 12px; right: 12px; width: auto; max-width: 560px; margin-inline: auto; max-height: calc(100dvh - var(--fm-context-top,120px) - 90px - env(safe-area-inset-bottom)); }
:root[data-theme=dark] .fm-nav-popover { background: #111a2e; color: #eef2fb; border-color: #334155; }
:root[data-theme=dark] .fm-nav-popover a:hover,:root[data-theme=dark] .fm-nav-popover a[aria-current=page],:root[data-theme=dark] .fm-nav-popover__close:hover { background: #1c2740; color: #a8c5ff !important; }
:root[data-theme=dark] .fm-nav-popover__title { color: #a3b0c8; }
@media (max-width: 960px) { .fm-nav__prefs .fm-icon-btn__txt { display: inline; } }
@media (max-width: 600px) {
    .fm-app__brand { flex: 1 1 0; }
    .fm-app__act { flex: 0 1 auto; max-width: 60%; }
    .fm-app__act .fm-app__btn { white-space: normal; height: auto; min-height: 40px; padding: 10px 12px; }
    .fm-apps__grid { grid-template-columns: 1fr; }
    .fm-crumb { padding-right: 4px; }
    .fm-crumb > span:last-child { display: none; }
    .fm-crumb::before { margin-left: 2px; }
    .fm-brand__txt { font-size: 18px; }
    .fm-login { padding: 0 14px; gap: 6px; }
}
@media (max-width: 400px) {
    .fm-crumb + .fm-nav + .fm-tools .fm-login .fm-i { display: none; }
    .fm-bar__in { padding-left: 10px; }
    .fm-brand { gap: 7px; }
    .fm-brand__txt { font-size: 17px; }
}
@media (max-width: 340px) { .fm-brand__txt { display: none; } }

@media (max-width: 960px) { html.fm-nav-open { overflow: hidden; } html.fm-nav-open .fm-bar { z-index: 2100; } }

/* ---- Bar identiti aplikasi (fm_appbar) --------------------------------- */
.fm-app, .fm-app * { box-sizing: border-box; }
.fm-app { --a-bg: rgba(255, 255, 255, .92); --a-line: rgba(15, 23, 42, .08); --a-ink: #0b1220; --a-dim: #5b6779; --a-hover: rgba(15, 23, 42, .05);
    position: sticky; top: var(--fm-sticky-top, var(--fm-bar-h, 64px)); z-index: 900; background: var(--a-bg); border-bottom: 1px solid var(--a-line); color: var(--a-ink); font: 500 15px/1.4 var(--fm-font); -webkit-font-smoothing: antialiased; }
:root[data-theme="dark"] .fm-app { --a-bg: rgba(13, 19, 33, .94); --a-line: rgba(255, 255, 255, .08); --a-ink: #eef2fb; --a-dim: #a3b0c8; --a-hover: rgba(255, 255, 255, .06); }
.fm-app::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--fm-tone), var(--fm-tone-2)); opacity: .9; }
.fm-app__in { max-width: 1440px; margin: 0 auto; padding: 10px 20px; min-height: 66px; display: flex; align-items: center; gap: 20px; }
.fm-app a { text-decoration: none !important; }
.fm-app__brand { display: inline-flex; align-items: center; gap: 12px; flex: none; color: var(--a-ink) !important; }
.fm-app__logo { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--fm-tone), var(--fm-tone-2)); box-shadow: 0 10px 20px -12px var(--fm-tone); }
.fm-app__logo .fm-i { width: 22px; height: 22px; }
.fm-app__logo.has-img { background: none; box-shadow: none; }
.fm-app__logo img, .fm-app__logo > svg:not(.fm-i) { width: 100%; height: 100%; display: block; object-fit: contain; }
.fm-app__name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fm-app__name b { font: 700 19px/1 var(--fm-display); letter-spacing: -.01em; white-space: nowrap; }
.fm-app__name small { font-size: 12.5px; color: var(--a-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.fm-app__nav { flex: 1; min-width: 0; display: flex; justify-content: center; }
.fm-app__scroll { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.fm-app__scroll::-webkit-scrollbar { display: none; }
.fm-app__nav a { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 10px; white-space: nowrap; flex: none; color: var(--a-dim) !important; font-weight: 600; font-size: 14.5px; transition: color .15s, background .15s; }
.fm-app__nav a svg { width: 17px; height: 17px; flex: none; }
.fm-app__nav a:hover { color: var(--a-ink) !important; background: var(--a-hover); }
.fm-app__nav a.is-on { color: var(--fm-tone-ink) !important; background: color-mix(in srgb, var(--fm-tone) 12%, transparent); }
.fm-app__act { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.fm-app__mobile { display: none; }
.fm-app__btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 18px; border-radius: 12px; white-space: nowrap; font: 700 14.5px/1 var(--fm-font); color: #fff !important; background: linear-gradient(135deg, var(--fm-tone), var(--fm-tone-2)); box-shadow: 0 12px 22px -14px var(--fm-tone); transition: transform .15s, box-shadow .15s, filter .15s; }
.fm-app__btn:hover { transform: translateY(-1px); filter: saturate(1.1) brightness(1.04); }
.fm-app__btn .fm-i, .fm-app__btn svg { width: 17px; height: 17px; }
.fm-app__btn--ghost { color: var(--a-ink) !important; background: transparent; border: 1px solid var(--a-line); box-shadow: none; }
.fm-app__btn--ghost:hover { background: var(--a-hover); filter: none; }
.fm-app__brand:focus-visible, .fm-app__nav a:focus-visible, .fm-app__btn:focus-visible, .fm-crumb:focus-visible, .fm-app-link:focus-visible, .fm-apps__home:focus-visible { outline: 2px solid var(--fm-tone, #3b82f6); outline-offset: 2px; }
@media (max-width: 960px) {
    .fm-app__in { flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px 0; }
    .fm-app .fm-app__nav { display: none; }
    .fm-app__mobile { display: block; order: 3; flex: 1 0 100%; min-width: 0; padding-bottom: 10px; position: relative; }
    .fm-app__mobile > summary { display: flex; align-items: center; gap: 10px; min-height: 42px; border: 1px solid var(--a-line); border-radius: 12px; padding: 10px 12px; background: var(--a-bg); color: var(--a-ink); font: 600 14px/1.4 var(--fm-font); cursor: pointer; list-style: none; }
    .fm-app__mobile > summary > span { flex: 1; }
    .fm-app__brand { flex: 1 1 auto; min-width: 0; max-width: 100%; }
    .fm-app__nav { order: 3; flex-basis: 100%; justify-content: flex-start; margin: 0 -16px; padding: 0 16px; position: relative; }
    .fm-app__nav::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 28px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--a-bg)); }
    .fm-app__scroll { padding: 2px 24px 8px 0; }
    .fm-app__nav a { height: 36px; padding: 0 12px; font-size: 14px; }
    .fm-app__in:not(:has(.fm-app__nav)) { padding-bottom: 10px; }
}
@media (max-width: 600px) {
    .fm-app__logo { width: 38px; height: 38px; border-radius: 11px; }
    .fm-app__name b { font-size: 17px; }
    .fm-app__name small { max-width: 46vw; }
    .fm-app__btn { height: 38px; padding: 0 14px; font-size: 13.5px; }
    .fm-app__btn--ghost { display: inline-flex; }
    .fm-app__act:has(> .fm-app__btn--ghost) { flex-basis: 100%; max-width: 100%; }
    .fm-app__act:has(> .fm-app__btn--ghost) > .fm-app__btn { flex: 1; justify-content: center; }
}

/* ---- Footer ------------------------------------------------------------- */
.fm-foot { background: var(--fm-night); color: var(--fm-dim); font: 400 14.5px/1.6 var(--fm-font); border-top: 1px solid var(--fm-line); -webkit-font-smoothing: antialiased; }
.fm-foot__in { max-width: 1440px; margin: 0 auto; padding: 48px 20px 22px; }
.fm-foot__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.fm-foot__about p { margin: 14px 0 18px; max-width: 380px; }
.fm-foot__title { margin: 4px 0 12px; color: #fff; font: 700 13px/1.2 var(--fm-font); letter-spacing: .08em; text-transform: uppercase; }
.fm-foot ul { list-style: none; margin: 0; padding: 0; }
.fm-foot__col li + li { margin-top: 8px; }
.fm-foot a { color: var(--fm-dim); text-decoration: none; overflow-wrap: anywhere; }
.fm-foot a:hover { color: #fff; }
.fm-social { display: flex; flex-wrap: wrap; gap: 8px; }
.fm-social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid var(--fm-line); color: var(--fm-ink); transition: background .15s, transform .15s; }
.fm-social a:hover { background: rgba(255, 255, 255, .14); transform: translateY(-1px); }
.fm-social .fm-i { width: 17px; height: 17px; }
.fm-foot__bottom { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--fm-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; font-size: 13.5px; }
.fm-foot__bottom p { margin: 0; }
.fm-foot__made { display: inline-flex; align-items: center; gap: 8px; }
.fm-flag { width: 20px; height: 12px; border-radius: 2px; background: linear-gradient(#cc0001 0 14.3%, #fff 0 28.6%, #cc0001 0 42.9%, #fff 0 57.2%, #cc0001 0 71.5%, #fff 0 85.8%, #cc0001 0); position: relative; overflow: hidden; }
.fm-flag::before { content: ""; position: absolute; left: 0; top: 0; width: 55%; height: 57%; background: #010066; }
@media (max-width: 1000px) { .fm-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fm-foot__about { grid-column: 1 / -1; } }
@media (max-width: 480px) { .fm-foot__in { padding: 36px 16px 20px; } .fm-foot__grid { gap: 24px 16px; } }

@media print { .fm-bar, .fm-foot, .fm-app { display: none; } }
@media (prefers-reduced-motion: reduce) { .fm-nav, .fm-btn, .fm-social a, .fm-app__btn { transition: none !important; } .fm-apps__panel, .fm-user__menu { animation: none !important; } }


/* ---- Rakan (Become my friend) dalam navbar ------------------------------ */
.fm-nav__friends { gap: 8px; }
/* Unlimited & Derma dalam bar melekit */
.fm-nav__promo { display: contents; }
.fm-nav__a small { display: none; }
.fm-nav__unl .fm-i { color: #f59e0b; opacity: 1; }
.fm-nav__unl > span { background: linear-gradient(90deg, #6366f1, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fm-nav__unl:hover > span, .fm-nav__unl.is-on > span { background: linear-gradient(90deg, #4f46e5, #9333ea); -webkit-background-clip: text; background-clip: text; }
.fm-pro { padding: 3px 6px; border-radius: 6px; background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; font: 800 10px/1 var(--fm-font); letter-spacing: .05em; }
.fm-nav__donate .fm-i { color: #f43f5e; opacity: 1; }
.fm-nav__donate:hover .fm-i { animation: fm-beat .9s ease-in-out infinite; }
@keyframes fm-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } 60% { transform: scale(.95); } }
@media (prefers-reduced-motion: reduce) { .fm-nav__donate:hover .fm-i { animation: none; } }
@media (max-width: 1280px) and (min-width: 961px) { .fm-nav__donate > span { display: none; } .fm-nav__donate { padding: 0 10px; } }
@media (max-width: 1040px) and (min-width: 961px) { .fm-nav__unl > span { display: none; } }
@media (max-width: 960px) {
    .fm-nav__auth { order: -2; }
    .fm-nav__promo { order: -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .fm-nav__promo .fm-nav__a { height: auto; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 2px; padding: 12px; border-radius: 16px; white-space: normal; font-size: 15px; border: 1px solid var(--b-menu-line); }
    .fm-nav__promo .fm-nav__a .fm-i { grid-row: 1 / 3; width: 22px; height: 22px; }
    .fm-nav__promo .fm-nav__a small { display: block; grid-column: 2; font: 500 12.5px/1.3 var(--fm-font); color: var(--b-menu-dim); }
    .fm-nav__promo .fm-pro { position: absolute; right: 10px; top: 10px; }
    .fm-nav__unl { position: relative; background: linear-gradient(135deg, rgba(99, 102, 241, .12), rgba(168, 85, 247, .12)); }
    .fm-nav__donate { color: var(--b-menu-ink) !important; background: linear-gradient(135deg, rgba(244, 63, 94, .1), rgba(249, 115, 22, .1)); }
}
.fm-faces { display: inline-flex; align-items: center; padding-left: 6px; }
.fm-faces img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; margin-left: -7px; border: 2px solid var(--b-bg, #fff); background: #cbd5e1; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.fm-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: linear-gradient(135deg, #ec4899, #8b5cf6); color: #fff; font: 700 11px/1 var(--fm-font); }
@media (max-width: 1180px) and (min-width: 961px) { .fm-nav__friends > span:not(.fm-faces) { display: none; } }
@media (max-width: 960px) {
    .fm-nav__friends { height: auto; padding: 12px 10px; border-radius: 14px; color: var(--b-menu-ink) !important; font-size: 15px; border-top: 1px solid var(--b-menu-line); }
    .fm-nav__friends:hover { background: var(--b-menu-hover); }
    .fm-nav__friends .fm-faces img { border-color: var(--b-menu, #fff); }
}

/* ---- Unlimited dalam menu pengguna -------------------------------------- */
.fm-user__menu a.fm-user__unl { margin: 2px 0 6px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(245, 158, 11, .14), rgba(236, 72, 153, .12)); border: 1px solid rgba(245, 158, 11, .28); }
.fm-user__menu a.fm-user__unl .fm-i { color: #d97706; width: 20px; height: 20px; }
.fm-user__unl span { display: flex; flex-direction: column; line-height: 1.25; }
.fm-user__unl small { color: var(--b-menu-dim); font-weight: 500; font-size: 12.5px; }
.fm-user__menu a.fm-user__unl.is-on { background: linear-gradient(135deg, #f59e0b, #ec4899); border-color: transparent; color: #fff !important; }
.fm-user__menu a.fm-user__unl.is-on .fm-i, .fm-user__unl.is-on small { color: rgba(255, 255, 255, .92); }

.fm-foot__legal a { color: var(--fm-dim); }
.fm-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =============================================================================
   Butang terapung — hanya di Pusat Bantuan: satu butang "Perlukan bantuan?" (kanan bawah)
   membuka menu: pembantu bantuan (.fm-chat__panel) atau live chat WaChap. Laman lain:
   tiada butang; panel dibuka oleh pautan [data-fm-chat-ask]. "Ke atas" (.fm-top) naik di atasnya.
   --fm-float-gap: jarak dari tepi; --fm-float-base: ruang bar tab bawah (telefon).
   ========================================================================== */
:root { --fm-float-gap: 24px; --fm-float-base: 0px; --fm-fab-h: 0px; }
body:has(.fm-chat--launcher) { --fm-fab-h: 66px; }

/* Isolated assistant styles: app styles must not change message or control contrast. */
.fm-chat {
    --c-bg: #fff; --c-ink: #172338; --c-dim: #526176; --c-line: #dce3ec;
    --c-soft: #f0f4f9; --c-link: #194db8; --c-me: #234ecb; --c-head: #15305b;
    position: fixed; left: var(--fm-float-gap); right: auto;
    bottom: calc(var(--fm-float-base) + max(var(--fm-float-gap), var(--fm-float-safe, env(safe-area-inset-bottom))));
    z-index: 1900; color: var(--c-ink); font: 400 14px/1.6 var(--fm-font); text-align: left;
    color-scheme: light;
}
.fm-chat, .fm-chat *, .fm-chat *::before, .fm-chat *::after { box-sizing: border-box; }
:root[data-theme="dark"] .fm-chat { --c-bg: #101b2e; --c-ink: #edf3ff; --c-dim: #b1c0d8; --c-line: #34435a; --c-soft: #1b2a41; --c-link: #a7c7ff; --c-me: #2854c8; --c-head: #0c1a33; color-scheme: dark; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .fm-chat { --c-bg: #101b2e; --c-ink: #edf3ff; --c-dim: #b1c0d8; --c-line: #34435a; --c-soft: #1b2a41; --c-link: #a7c7ff; --c-me: #2854c8; --c-head: #0c1a33; color-scheme: dark; }
}
.fm-chat button, .fm-chat input { font-family: var(--fm-font); letter-spacing: normal; text-transform: none; }
.fm-chat button { cursor: pointer; }
.fm-chat button:disabled { cursor: wait; opacity: .6; }
.fm-chat button:focus-visible, .fm-chat a:focus-visible { outline: 3px solid #74a5ff; outline-offset: 3px; }

/* Butang "Tanya kami": pil dengan ikon; label mengecil semasa tatal ke bawah (chat.js → .is-compact) */
.fm-chat__fab {
    position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 16px;
    border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; color: #fff;
    background: linear-gradient(135deg, #2563eb, #4f46e5 60%, #7c3aed);
    box-shadow: 0 14px 32px -12px rgba(49, 46, 129, .65), inset 0 1px 0 rgba(255, 255, 255, .22);
    font-size: 14.5px; font-weight: 700; white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease, padding .3s ease, gap .3s ease;
    animation: fm-fab-in .5s cubic-bezier(.2, .8, .2, 1.2) .5s both;
}
.fm-chat__fab:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -12px rgba(49, 46, 129, .75), inset 0 1px 0 rgba(255, 255, 255, .22); }
.fm-chat__fab:active { transform: scale(.96); }
.fm-chat__fab .fm-i { width: 22px; height: 22px; }
/* Titik "dalam talian" + gelang denyut lembut (3 kali sahaja supaya tidak mengganggu) */
.fm-chat__fab::before { content: ""; position: absolute; left: 32px; top: 11px; width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 2px #3b47e0; }
.fm-chat__fab::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(99, 102, 241, .55); animation: fm-fab-ring 2.4s ease-out 1.4s 3; pointer-events: none; }
.fm-chat__fab > span { display: inline-block; max-width: 160px; overflow: hidden; transition: max-width .3s ease, opacity .2s ease; }
.fm-chat.is-compact .fm-chat__fab { gap: 0; padding: 0 15px; }
.fm-chat.is-compact .fm-chat__fab > span { max-width: 0; opacity: 0; }
.fm-chat--launcher { left: auto; right: var(--fm-float-gap); }
.fm-chat--launcher .fm-chat__panel { left: auto; right: 0; transform-origin: bottom right; }
.fm-chat__fab > .fm-i + .fm-i { display: none; }
.fm-chat__fab[aria-expanded="true"] { background: #1e293b; }
.fm-chat__fab[aria-expanded="true"]::before, .fm-chat__fab[aria-expanded="true"]::after { display: none; }
.fm-chat__fab[aria-expanded="true"] > .fm-i:first-child { display: none; }
.fm-chat__fab[aria-expanded="true"] > .fm-i + .fm-i { display: block; animation: fm-spin-in .25s ease; }
.fm-chat__badge { position: absolute; right: -4px; top: -6px; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: #ef4444; color: #fff; font: 800 11px/1 var(--fm-font); font-style: normal; box-shadow: 0 0 0 2px #fff; }
.fm-chat__badge[hidden] { display: none; }
/* Sembunyikan butang semasa panel bantuan atau tetingkap live chat terbuka */
html.fm-chat-open .fm-chat--launcher > .fm-chat__fab, html.fm-live-open .fm-chat--launcher > .fm-chat__fab { display: none; }
html.fm-live-open .fm-top { opacity: 0; pointer-events: none; }
/* Butang WaChap sendiri disembunyikan — dibuka dari menu kami */
body:has(.fm-chat--launcher) [data-wachap-widget] > button { display: none !important; }

/* Menu dua pilihan di atas butang */
.fm-chat__menu { position: absolute; right: 0; bottom: calc(100% + 12px); width: 310px; max-width: calc(100vw - 2 * var(--fm-float-gap)); padding: 10px; border-radius: 20px; background: var(--c-bg); border: 1px solid var(--c-line); box-shadow: 0 24px 60px -18px rgba(8, 20, 48, .4); transform-origin: bottom right; animation: fm-menu-in .22s cubic-bezier(.2, .8, .2, 1.1); }
.fm-chat__menu[hidden] { display: none; }
.fm-chat__menu-title { margin: 4px 8px 8px; color: var(--c-dim); font: 700 12px/1.4 var(--fm-font); letter-spacing: .05em; text-transform: uppercase; }
.fm-chat__opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--c-ink); text-align: left; transition: background .15s, border-color .15s, transform .15s; animation: fm-msg-in .3s ease-out both; }
.fm-chat__opt + .fm-chat__opt { margin-top: 4px; animation-delay: .06s; }
.fm-chat__opt:hover { background: var(--c-soft); border-color: var(--c-line); transform: translateX(-2px); }
.fm-chat__opt-ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 13px; color: #fff; }
.fm-chat__opt--bot .fm-chat__opt-ico { background: linear-gradient(135deg, #2563eb, #7c3aed); }
.fm-chat__opt--live .fm-chat__opt-ico { background: linear-gradient(135deg, #059669, #0d9488); }
.fm-chat__opt b { display: block; font: 700 14.5px/1.3 var(--fm-font); }
.fm-chat__opt small { display: block; margin-top: 2px; color: var(--c-dim); font: 500 12.5px/1.4 var(--fm-font); }
@keyframes fm-menu-in { from { opacity: 0; transform: translateY(10px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes fm-spin-in { from { transform: rotate(-90deg); opacity: 0; } }
@keyframes fm-fab-in { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes fm-fab-ring { 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, .5); } 100% { box-shadow: 0 0 0 16px rgba(99, 102, 241, 0); } }

/* Panel: berlabuh di kiri bawah, tidak melepasi bar atas */
.fm-chat__panel {
    position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column;
    width: 400px; max-width: calc(100vw - 2 * var(--fm-float-gap));
    height: min(640px, calc(100dvh - var(--fm-bar-h, 64px) - var(--fm-float-base) - 2 * var(--fm-float-gap)));
    overflow: hidden; background: var(--c-bg); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: 22px;
    box-shadow: 0 30px 80px -20px rgba(8, 20, 48, .4); transform-origin: bottom left;
    animation: fm-chat-enter .28s cubic-bezier(.2, .8, .2, 1);
}
.fm-chat__panel[hidden] { display: none; }
.fm-chat__head {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 14px 14px 14px 16px;
    color: #fff; background: radial-gradient(120% 140% at 0% 0%, #2a55a8 0%, transparent 60%), var(--c-head); border: 0;
}
.fm-chat__head b, .fm-chat__head small, .fm-chat__head span { color: #fff; }
.fm-chat__head > div:first-of-type { min-width: 0; }
.fm-chat__head b { display: block; margin: 0; font: 650 16.5px/1.3 var(--fm-display); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-chat__head small { display: flex; align-items: center; gap: 6px; margin-top: 2px; font: 400 12px/1.4 var(--fm-font); color: #cfe0ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-chat__head small::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); }
.fm-chat__av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; background: linear-gradient(135deg, #3b82f6, #8b5cf6); border-radius: 13px; font: 800 19px/1 var(--fm-display); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.fm-chat__x { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; color: #fff; border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; background: rgba(255, 255, 255, .08); transition: background .15s, transform .15s; }
.fm-chat__x:hover { background: rgba(255, 255, 255, .18); transform: rotate(90deg); }
.fm-chat__x .fm-i { width: 18px; height: 18px; }
.fm-chat__head > .fm-chat__lang { display: flex; gap: 2px; padding: 3px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; background: rgba(255, 255, 255, .08); }
.fm-chat__lang button { min-width: 34px; min-height: 28px; padding: 4px 8px; background: transparent; color: #fff; border: 0; border-radius: 7px; font: 700 11.5px/1.3 var(--fm-font); transition: background .15s, color .15s; }
.fm-chat__lang button[aria-pressed="true"] { color: #133568; background: #fff; }
.fm-chat__status { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--c-line); background: var(--c-bg); color: var(--c-dim); font: 500 11.5px/1.5 var(--fm-font); }
.fm-chat__log { display: flex; flex: 1; flex-direction: column; min-height: 0; gap: 12px; padding: 16px 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scroll-behavior: smooth; }
.fm-chat__msg { max-width: 94%; padding: 12px 14px; border-radius: 16px; color: var(--c-ink); background: var(--c-soft); overflow-wrap: anywhere; font: 400 14px/1.65 var(--fm-font); animation: fm-msg-in .3s ease-out both; }
.fm-chat__msg.is-bot { align-self: flex-start; border-bottom-left-radius: 5px; }
.fm-chat__msg.is-me { align-self: flex-end; max-width: 85%; color: #fff; background: var(--c-me); border-bottom-right-radius: 5px; transform-origin: bottom right; }
.fm-chat__body, .fm-chat__msg p, .fm-chat__msg li, .fm-chat__msg b, .fm-chat__msg strong { color: inherit; font-size: inherit; }
.fm-chat__msg p { margin: 0 0 9px; line-height: inherit; }
.fm-chat__msg p:last-child { margin-bottom: 0; }
.fm-chat__msg h3, .fm-chat__msg h4 { margin: 0 0 9px; color: inherit; font: 700 15px/1.4 var(--fm-font); letter-spacing: normal; }
.fm-chat__msg a { color: var(--c-link); text-decoration: underline; text-underline-offset: 3px; font-weight: 650; }
.fm-chat__msg ol, .fm-chat__msg ul { margin: 6px 0 10px; padding-left: 20px; color: inherit; }
.fm-chat__msg li + li { margin-top: 5px; }
.fm-chat__msg code { padding: 2px 5px; border: 1px solid var(--c-line); border-radius: 5px; background: var(--c-bg); color: var(--c-ink); font-size: 12px; }
.fm-chat__more { display: inline-block; margin: 8px 0 2px; font-size: 13px; }
.fm-chat__chips { display: flex; flex-direction: column; align-items: stretch; gap: 7px; margin-top: 12px; }
.fm-chat__chips button { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 12px; border: 1px solid var(--c-line); border-radius: 12px; color: var(--c-link); background: var(--c-bg); text-align: left; font: 600 13px/1.45 var(--fm-font); transition: border-color .15s, background .15s, transform .15s; }
.fm-chat__chips button::after { content: "→"; margin-left: auto; opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.fm-chat__chips button:hover { border-color: var(--c-link); transform: translateX(2px); }
.fm-chat__chips button:hover::after { opacity: 1; transform: none; }
.fm-chat__fb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--c-line); color: var(--c-dim); font: 500 12px/1.5 var(--fm-font); }
.fm-chat__fb button { min-width: 44px; min-height: 32px; padding: 5px 12px; color: var(--c-ink); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 999px; font-size: 12px; transition: border-color .15s; }
.fm-chat__fb button:hover { border-color: var(--c-link); }
.fm-chat__alt { margin-top: 8px; color: var(--c-dim); font-size: 12px; }
/* "Sedang mencari jawapan…" dengan tiga titik beranimasi */
.fm-chat__typing { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 10px 14px; border-radius: 16px 16px 16px 5px; background: var(--c-soft); color: var(--c-dim); font-size: 12.5px; animation: fm-msg-in .25s ease-out both; }
.fm-chat__typing::before { content: ""; width: 26px; height: 6px; flex: none; background: radial-gradient(circle closest-side, currentColor 90%, transparent) 0 50% / 6px 6px no-repeat, radial-gradient(circle closest-side, currentColor 90%, transparent) 10px 50% / 6px 6px no-repeat, radial-gradient(circle closest-side, currentColor 90%, transparent) 20px 50% / 6px 6px no-repeat; animation: fm-dots 1s steps(1) infinite; }
.fm-chat__form { display: flex; flex: none; align-items: center; gap: 8px; margin: 0; padding: 12px 14px 8px; background: var(--c-bg); border-top: 1px solid var(--c-line); }
.fm-chat__form input { display: block; flex: 1; width: 100%; min-width: 0; height: 46px; margin: 0; padding: 0 14px; border: 1px solid var(--c-line); border-radius: 999px; color: var(--c-ink); background: var(--c-soft); font: 400 16px/1.4 var(--fm-font); box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.fm-chat__form input::placeholder { color: var(--c-dim); opacity: 1; }
.fm-chat__form input:focus { outline: none; border-color: #6798ef; box-shadow: 0 0 0 3px rgba(103, 152, 239, .25); }
.fm-chat__form button { display: grid; place-items: center; flex: none; width: 46px; height: 46px; margin: 0; padding: 0; color: #fff; background: linear-gradient(135deg, #2563eb, #4f46e5); border: 0; border-radius: 50%; transition: transform .15s; }
.fm-chat__form button:hover { transform: scale(1.06); }
.fm-chat__form button:active { transform: scale(.94); }
.fm-chat__form button .fm-i { width: 19px; height: 19px; }
.fm-chat__foot { display: flex; align-items: center; justify-content: space-between; flex: none; gap: 8px; padding: 2px 16px 12px; background: var(--c-bg); }
.fm-chat__foot a, .fm-chat__foot button { padding: 5px 0; color: var(--c-dim); background: transparent; border: 0; font: 500 11.5px/1.5 var(--fm-font); text-decoration: underline; text-underline-offset: 3px; }
.fm-chat__foot a:hover, .fm-chat__foot button:hover { color: var(--c-link); }
@keyframes fm-chat-enter { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fm-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fm-dots { 0% { opacity: .35; clip-path: inset(0 66% 0 0); } 33% { opacity: .7; clip-path: inset(0 33% 0 0); } 66% { opacity: 1; clip-path: inset(0 0 0 0); } }
@media (max-width: 960px) { :root { --fm-float-gap: 16px; } }
@media (max-width: 480px) {
    :root { --fm-float-gap: 12px; }
    .fm-chat__fab { min-height: 48px; padding: 0 16px 0 13px; font-size: 13.5px; gap: 8px; }
    .fm-chat__fab::before { left: 28px; top: 10px; }
    .fm-chat.is-compact .fm-chat__fab { padding: 0 13px; }
    /* Telefon: panel menjadi helaian bawah selebar skrin */
    .fm-chat__panel { position: fixed; left: 8px; right: 8px; bottom: calc(var(--fm-float-base) + max(8px, var(--fm-float-safe, env(safe-area-inset-bottom)))); width: auto; max-width: none; height: calc(100dvh - var(--fm-bar-h, 60px) - var(--fm-float-base) - 20px); border-radius: 20px; transform-origin: bottom center; }
    .fm-chat__head { gap: 8px; padding: 12px; }
    .fm-chat__av { width: 36px; height: 36px; font-size: 17px; }
    .fm-chat__head small { white-space: normal; align-items: flex-start; }
    .fm-chat__head small::before { margin-top: 4px; }
}
@media (max-width: 340px) { .fm-chat__head > .fm-chat__lang { display: none; } }
/* Semasa panel bantuan terbuka: sembunyikan butang terapung lain supaya tidak menutup kotak taip */
html.fm-chat-open .fm-top { opacity: 0; pointer-events: none; }
@media (max-width: 720px) { html.fm-chat-open [data-wachap-widget] { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .fm-chat__panel, .fm-chat__fab, .fm-chat__fab::after, .fm-chat__msg, .fm-chat__typing, .fm-chat__menu, .fm-chat__opt, .fm-chat__fab .fm-i { animation: none; } .fm-chat * { scroll-behavior: auto; transition: none; } .fm-chat__fab:hover { transform: none; } }
@media print { .fm-chat { display: none; } }

/* ---- Ikon aplikasi (SVG sendiri setiap aplikasi daripada app.json) ---- */
.fm-appicon { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.fm-app-link__ico.has-img, .fm-crumb__dot.has-img { background: none; box-shadow: 0 8px 16px -10px var(--fm-tone); overflow: hidden; }
.fm-crumb__dot.has-img { border-radius: 9px; }
.fm-app__logo.has-img, .fm-app__logo:has(.fm-appicon) { background: none; }

/* ---- Butang "ke atas" bersama: kanan bawah; naik di atas live chat WaChap jika ada ---- */
.fm-top {
    position: fixed; right: var(--fm-float-gap, 24px);
    bottom: calc(var(--fm-float-base, 0px) + var(--fm-fab-h, 0px) + max(var(--fm-float-gap, 24px), var(--fm-float-safe, env(safe-area-inset-bottom)))); z-index: 1890;
    width: 46px; height: 46px; padding: 0; display: grid; place-items: center; cursor: pointer;
    border-radius: 50%; border: 1px solid #dce3ec; background: #fff; color: #172338;
    box-shadow: 0 10px 26px rgba(15, 30, 70, .16); transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    animation: fm-top-in .3s cubic-bezier(.2, .8, .2, 1.2);
}
.fm-top[hidden] { display: none; }
.fm-top:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 30, 70, .22); }
.fm-top:hover .fm-i { animation: fm-top-nudge .6s ease-in-out infinite; }
@keyframes fm-top-in { from { opacity: 0; transform: translateY(10px) scale(.8); } }
@keyframes fm-top-nudge { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .fm-top, .fm-top:hover .fm-i { animation: none; } }
/* Live chat WaChap (widget-loader.js, gaya sebaris) — kekal di kanan, di atas bar tab telefon */
[data-wachap-widget] { bottom: calc(var(--fm-float-base, 0px) + max(var(--fm-float-gap, 16px), var(--fm-float-safe, env(safe-area-inset-bottom)))) !important; right: var(--fm-float-gap, 16px) !important; }
[data-wachap-widget] > iframe { height: min(620px, calc(100dvh - var(--fm-float-base, 0px) - 2 * var(--fm-float-gap, 16px) - 8px)) !important; }
.fm-top:focus-visible { outline: 3px solid #74a5ff; outline-offset: 3px; }
.fm-top .fm-i { width: 20px; height: 20px; }
:root[data-theme="dark"] .fm-top { background: #101b2e; color: #edf3ff; border-color: #34435a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .fm-top { background: #101b2e; color: #edf3ff; border-color: #34435a; } }
@media (max-width: 480px) { .fm-top { width: 44px; height: 44px; } }
@media print { .fm-top { display: none !important; } }

/* =============================================================================
   Platform v10 — Perisian & Forum dalam menu, bar tab ala aplikasi telefon, animasi
   ========================================================================== */
@media (max-width: 960px) {
    .fm-nav__sw, .fm-nav__forum { height: auto; padding: 12px 10px; border-radius: 14px; color: var(--b-menu-ink) !important; font-size: 15px; }
    .fm-nav__sw:hover, .fm-nav__forum:hover { background: var(--b-menu-hover); }
}

/* Bar tab bawah (telefon): kaca kabur, ikon + label, kawasan selamat iPhone */
.fm-tabbar { display: none; }
html.fm-app-picker-open { overflow: hidden; }
.fm-app-picker { width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 110px); box-sizing: border-box; padding: 16px; border: 1px solid #dbe3ee; border-radius: 24px; background: #fff; color: #0f172a; font-family: var(--fm-font); box-shadow: 0 24px 90px #0005; --b-menu-ink: #0f172a; --b-menu-dim: #64748b; --b-menu-hover: #f1f5f9; }
.fm-app-picker:not([open]) { display: none; }
.fm-app-picker::backdrop { background: #0b122080; }
.fm-app-picker__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fm-app-picker__head h2 { margin: 0; font: 700 23px var(--fm-display); }
.fm-app-picker__head button { border: 0; border-radius: 50%; width: 44px; height: 44px; background: #eef2f7; color: inherit; font-size: 28px; cursor: pointer; }
.fm-app-picker .fm-app-link__txt { overflow-wrap: anywhere; }
:root[data-theme="dark"] .fm-app-picker { background: #111a2e; color: #eef2fb; border-color: #334155; --b-menu-ink: #eef2fb; --b-menu-dim: #a3b0c8; --b-menu-hover: #1c2740; }
:root[data-theme="dark"] .fm-app-picker__head button { background: #1c2740; }
@media(max-width:720px) { .fm-app-picker { margin: auto auto calc(78px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 160px); } }
@media (max-width: 720px) {
    .fm-nav > .fm-apps { display: none; }
    .fm-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1950; display: grid; grid-template-columns: repeat(5, 1fr);
        padding: 6px 6px max(6px, env(safe-area-inset-bottom)); gap: 2px;
        background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px);
        border-top: 1px solid rgba(15, 23, 42, .08); box-shadow: 0 -10px 30px -18px rgba(15, 23, 42, .35);
        font: 600 10.5px/1.1 var(--fm-font); -webkit-font-smoothing: antialiased;
    }
    :root[data-theme="dark"] .fm-tabbar { background: rgba(9, 14, 26, .88); border-top-color: rgba(255, 255, 255, .08); }
    .fm-tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; padding: 4px 2px; border-radius: 14px; color: #64748b; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color .15s, background .15s, transform .12s; }
    :root[data-theme="dark"] .fm-tabbar a { color: #8f9cb6; }
    .fm-tabbar a:active { transform: scale(.94); }
    .fm-tabbar a.is-on { color: #1d4ed8; background: rgba(37, 99, 235, .09); }
    :root[data-theme="dark"] .fm-tabbar a.is-on { color: #9cb9ff; background: rgba(124, 166, 255, .12); }
    .fm-tabbar a.is-on::before { content: ""; position: absolute; top: -6px; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: currentColor; }
    .fm-tabbar .fm-i { width: 23px; height: 23px; }
    .fm-tabbar .fm-av--tab { width: 24px; height: 24px; font-size: 10px; }
    .fm-tabbar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
    /* Semua butang terapung naik di atas bar tab */
    :root:has(.fm-tabbar) { --fm-float-base: calc(66px + env(safe-area-inset-bottom)); --fm-float-safe: 0px; }
    .fm-foot { padding-bottom: 8px; }
}
@media print { .fm-tabbar { display: none !important; } }

/* Animasi muncul semasa tatal (shared/chrome.js menambah .is-in). Tanpa JS / gerakan dikurangkan: terus kelihatan. */
html.fm-anim .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--fm-delay, 0s); }
html.fm-anim .reveal.is-in { opacity: 1; transform: none; }
main { animation: fm-page-in .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes fm-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.fm-anim .reveal { opacity: 1; transform: none; transition: none; } main { animation: none; } }

.fm-notice-desktop{padding:12px 16px;border-top:1px solid var(--fm-line,#e5e7eb);display:grid;gap:8px}.fm-notice-desktop button{font:inherit;font-size:13px;font-weight:700;border:1px solid #cbd5e1;border-radius:10px;background:transparent;color:inherit;padding:10px 12px;cursor:pointer;white-space:normal}.fm-notice-desktop small{font-size:12px;line-height:1.5;overflow-wrap:anywhere}