/* =====================================================================
   FAT Workspace (landing). Selalu terang sesuai referensi — tidak
   mengikuti tema gelap aplikasi. Token khusus halaman ada di .fatw.
   ===================================================================== */
.app.portal-mode .sidebar, .app.portal-mode .topbar, .app.portal-mode .status-strip, .app.portal-mode .app-foot { display: none; }
.app.portal-mode .content { padding: 0; display: block; }
.app.portal-mode .main { background: #EAF3FC; }
.nav-home { color: #61D9CF; margin-bottom: 6px; }

.fatw {
  --fw-max: 1240px; --fw-pad: clamp(16px, 4vw, 48px);
  --fw-navy: #13254A; --fw-ink: #1B2A4A; --fw-body: #4D5D7A; --fw-teal: #0E9F95; --fw-teal-2: #12B5A8;
  --fw-sky: #E4EFFC; --fw-cream: #FCF1DC; --fw-lav: #ECE7FB; --fw-line: rgba(27, 42, 74, .08);
  --fw-r: 24px; --fw-shadow: 0 10px 30px rgba(32, 72, 130, .10); --fw-shadow-hi: 0 22px 46px rgba(32, 72, 130, .18);
  color-scheme: light; color: var(--fw-ink); font-family: var(--font);
  min-height: 100vh; background: linear-gradient(180deg, #F1F7FE 0%, #E6F0FB 45%, #EAF3FC 100%);
  overflow-x: clip;
}
.fatw *:focus-visible { outline: 3px solid var(--fw-teal); outline-offset: 3px; border-radius: 10px; }
.fw-i { width: 1.15em; height: 1.15em; flex: none; }

/* Navbar */
.fw-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px max(var(--fw-pad), calc((100% - var(--fw-max)) / 2)); background: rgba(246, 250, 255, .75); backdrop-filter: blur(10px); border-bottom: 1px solid var(--fw-line); position: relative; z-index: 5; }
.fw-logo { font: 500 clamp(15px, 1.6vw, 19px) var(--font-display); letter-spacing: .32em; color: var(--fw-navy); }
.fw-logo b { font-weight: 800; }
.fw-user { position: relative; }
.fw-userbtn { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--fw-ink); font: 500 15px var(--font); padding: 4px 6px 4px 4px; border-radius: 999px; cursor: pointer; }
.fw-userbtn:hover { background: rgba(255, 255, 255, .7); }
.fw-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #DCE8F8; color: #3C5A8C; }
.fw-chev { transition: transform .2s ease; }
.fw-userbtn[aria-expanded="true"] .fw-chev { transform: rotate(180deg); }
.fw-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; background: #fff; border-radius: 14px; box-shadow: var(--fw-shadow-hi); padding: 6px; display: grid; z-index: 10; }
.fw-menu[hidden] { display: none; }
.fw-menu-h { padding: 10px 12px 8px; font-weight: 600; border-bottom: 1px solid var(--fw-line); margin-bottom: 4px; }
.fw-menu-h small { display: block; font-weight: 400; color: var(--fw-body); font-size: 12px; }
.fw-menu a, .fw-menu button { text-align: left; padding: 9px 12px; border-radius: 9px; color: var(--fw-ink); text-decoration: none; border: 0; background: none; font: inherit; font-size: 14px; cursor: pointer; }
.fw-menu a:hover, .fw-menu button:hover, .fw-menu a:focus-visible, .fw-menu button:focus-visible { background: #EEF4FC; }

.fw-main { width: 100%; max-width: calc(var(--fw-max) + 2 * var(--fw-pad)); margin: 0 auto; padding: 0 var(--fw-pad) 32px; }

/* Hero */
.fw-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); align-items: center; gap: 12px; min-height: 340px; }
.fw-hero-bg { position: absolute; inset: 0 -40px; z-index: 0; pointer-events: none; overflow: hidden; }
.fw-hero-bg i { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .55; }
.fw-hero-bg i:nth-child(1) { width: 380px; height: 380px; left: -80px; top: -60px; background: #D7E9FD; }
.fw-hero-bg i:nth-child(2) { width: 300px; height: 300px; left: 38%; bottom: -120px; background: #D3F1EE; }
.fw-hero-text { position: relative; z-index: 2; padding: 36px 0 24px; display: grid; gap: 14px; justify-items: start; }
.fw-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: #DCEAFB; color: #1F5FB0; font-size: 14.5px; font-weight: 500; }
.fw-pill .fw-i { color: #2C6FD0; }
.fw-hero h1 { margin: 6px 0 0; font: 800 clamp(30px, 3.9vw, 52px)/1.08 var(--font-display); letter-spacing: -.035em; color: var(--fw-navy); }
.fw-hero p { margin: 0; font-size: clamp(16px, 1.7vw, 21px); color: var(--fw-body); }
.fw-ctrl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.fw-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid #C9D9EE; background: rgba(255, 255, 255, .6); color: var(--fw-ink); font: 500 14.5px var(--font); cursor: pointer; transition: background .2s, border-color .2s; }
.fw-ghost:hover { background: #fff; border-color: #9EB8DA; }

/* Maskot (lapisan: gambar · cahaya · kelopak · balon · area klik) */
.fw-mascot { position: relative; z-index: 1; align-self: end; width: 100%; max-width: 600px; justify-self: end; padding-right: 3.5%; }
.fw-float { animation: fwFloat 5s ease-in-out infinite; will-change: transform; }
.fw-par { will-change: transform; }
.fw-stage { position: relative; width: 100%; container-type: inline-size; }
.fw-img { display: block; width: 100%; height: auto; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(0deg, transparent 0, #000 9%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(0deg, transparent 0, #000 9%); mask-composite: intersect; }
.fw-glow { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(90, 190, 255, .55) 0%, rgba(90, 190, 255, .18) 45%, transparent 70%); animation: fwGlow 4.5s ease-in-out infinite alternate; }
.fw-lids { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fw-lid { transform-box: fill-box; transform-origin: 50% 0%; transform: scaleY(0); }
.fw-hit { position: absolute; left: 34%; top: 8%; width: 40%; height: 84%; border: 0; background: transparent; cursor: pointer; border-radius: 40%; }
.fw-bubble { position: absolute; transform: translate(-50%, -50%) rotate(var(--rot)); aspect-ratio: 1.78; border: 0; border-radius: 9cqw / 9cqw; cursor: pointer; padding: 0 3cqw; color: #fff;
  background: linear-gradient(160deg, #2B7BE0 0%, #1858BE 60%, #1450AE 100%); box-shadow: 0 1.2cqw 3cqw rgba(20, 70, 160, .35), inset 0 .3cqw 0 rgba(255, 255, 255, .25); display: grid; place-items: center; text-align: center; transition: filter .2s; }
.fw-bubble:hover { filter: brightness(1.06); }
.fw-bub-in { display: grid; gap: .6cqw; }
.fw-bub-in b { font: 800 4.6cqw/1.05 var(--font-display); }
.fw-bub-in span { font: 500 2.4cqw/1.3 var(--font); opacity: .95; }
.fw-bub-in.swap { animation: fwSwap .35s cubic-bezier(.2, .8, .2, 1); }
.fw-pt { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--c); pointer-events: none; box-shadow: 0 0 8px var(--c); animation: fwBurst .7s cubic-bezier(.2, .8, .2, 1) forwards; }

/* Kartu */
.fw-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 8px; }
.fw-card { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --lift: 0px; --enter: 16px;
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; min-height: 300px; padding: clamp(22px, 2.4vw, 36px);
  border-radius: var(--fw-r); border: 1px solid rgba(255, 255, 255, .7); box-shadow: var(--fw-shadow); cursor: pointer; isolation: isolate;
  opacity: 0; transform: perspective(900px) translateY(calc(var(--enter) - var(--lift))) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, opacity .55s ease; transition-delay: calc(var(--i, 0) * 85ms); }
.fw-card.fw-in { opacity: 1; --enter: 0px; }
.fw-card.fw-in:hover, .fw-card.fw-in:focus-within { --lift: 6px; box-shadow: var(--fw-shadow-hi); transition-delay: 0s; }
.fw-card.tilt { transition: transform .12s linear, box-shadow .3s ease, opacity .55s ease; }
.fw-card.tone-teal { background: linear-gradient(140deg, #0C8E86 0%, #0FA79C 55%, #14BAAD 100%); color: #fff; border-color: transparent; }
.fw-card.tone-sky { background: linear-gradient(160deg, #EAF3FE, #DFECFB); }
.fw-card.tone-cream { background: linear-gradient(160deg, #FEF5E4, #FBEDD3); }
.fw-card.tone-lavender { background: linear-gradient(160deg, #F1ECFD, #E7E0FA); }
.fw-spot { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(255, 255, 255, .55), transparent 60%); }
.fw-card.tone-teal .fw-spot { background: radial-gradient(320px circle at var(--mx) var(--my), rgba(255, 255, 255, .22), transparent 60%); }
.fw-card:hover .fw-spot { opacity: 1; }
.fw-deco { position: absolute; right: -6px; bottom: -6px; width: 42%; max-width: 190px; z-index: -1; fill: #8DB5EC; stroke: #8DB5EC; opacity: .28; pointer-events: none;
  transform: translate(calc((var(--ry) * -2.2)), calc(var(--rx) * 2.2)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.fw-card.tone-cream .fw-deco { fill: #E7B86A; stroke: #E7B86A; }
.fw-card.tone-lavender .fw-deco { fill: #A996E8; stroke: #A996E8; }
.fw-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.fw-ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; flex: none; color: #2D74D6;
  background: linear-gradient(160deg, #FFFFFF 0%, #EEF4FC 100%); box-shadow: 0 8px 18px rgba(32, 72, 130, .12), inset 0 -3px 0 rgba(32, 72, 130, .06), inset 0 1px 0 #fff;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.fw-ic .fw-i { width: 28px; height: 28px; filter: drop-shadow(0 2px 2px rgba(45, 116, 214, .25)); }
.tone-cream .fw-ic { color: #2D74D6; }
.tone-teal .fw-ic { background: linear-gradient(160deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .12)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 18px rgba(0, 60, 55, .18); }
.fw-card:hover .fw-ic, .fw-card:focus-within .fw-ic { transform: translateY(-4px) rotate(-6deg); }
.fw-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; font-size: 13px; color: var(--fw-body); background: rgba(27, 42, 74, .06); white-space: nowrap; }
.fw-status.on { background: rgba(255, 255, 255, .2); color: #fff; }
.fw-status i { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: fwPulse 2.2s ease-in-out infinite; }
.fw-card h2 { margin: 10px 0 0; font: 800 clamp(20px, 2vw, 27px)/1.15 var(--font-display); letter-spacing: -.02em; color: var(--fw-navy); }
.fw-card.tone-teal h2 { color: #fff; }
.fw-card p { margin: 0; color: var(--fw-body); font-size: clamp(14px, 1.15vw, 16px); line-height: 1.6; }
.fw-card.tone-teal p { color: rgba(255, 255, 255, .92); }
.fw-action { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; padding: 6px 0; font: 700 16px var(--font); color: var(--fw-teal); text-decoration: none; cursor: pointer; }
.fw-card.tone-teal .fw-action { color: #fff; }
.fw-action .fw-i { transition: transform .25s ease; }
.fw-card:hover .fw-action .fw-i, .fw-action:focus-visible .fw-i { transform: translateX(5px); }
.fw-stats { display: grid; grid-template-columns: auto auto minmax(80px, 1fr); gap: 4px 24px; align-items: end; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .28); }
.fw-stats small { display: block; font-size: 12.5px; opacity: .9; }
.fw-stats b { font: 800 clamp(18px, 1.8vw, 24px) var(--font-display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fw-spark { width: 100%; height: 40px; overflow: visible; }
.fw-spark polyline { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fw-spark circle { fill: #fff; opacity: 0; transition: opacity .3s ease 1.3s; }
.fw-card.fw-in .fw-spark polyline { animation: fwDraw 1.3s cubic-bezier(.4, 0, .2, 1) .45s forwards; }
.fw-card.fw-in .fw-spark circle { opacity: 1; }
.fw-hint { text-align: center; color: #6B7C99; font-size: 14px; margin: 28px 0 8px; }

/* Detail modul (modal) */
.fw-detail { display: grid; gap: 14px; color: var(--ink); }
.fw-detail-h { display: flex; gap: 16px; align-items: center; }
.fw-detail-h .fw-ic { width: 56px; height: 56px; }
.fw-detail-h p { margin: 6px 0 0; color: var(--ink-2); }
.fw-detail .fw-status { background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.fw-detail h4 { margin: 4px 0 0; font: 700 14px var(--font-display); }
.fw-detail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fw-detail li { display: flex; gap: 10px; align-items: flex-start; }
.fw-detail li .fw-i { color: var(--teal); margin-top: 2px; }
.fw-note { margin: 0; font-size: 13px; color: var(--muted); }

/* Keyframes */
@keyframes fwFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes fwGlow { from { opacity: .45; } to { opacity: .85; } }
@keyframes fwPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); } }
@keyframes fwDraw { to { stroke-dashoffset: 0; } }
@keyframes fwSwap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fwBurst { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); opacity: 0; } }

/* Jeda animasi (tombol) & preferensi kurangi gerakan */
.fatw.paused .fw-float, .fatw.paused .fw-glow, .fatw.paused .fw-status i { animation-play-state: paused; }
.fatw.paused .fw-card { transition: opacity .2s ease; transition-delay: 0s; transform: none; }
.fatw.paused .fw-card .fw-ic, .fatw.paused .fw-card .fw-action .fw-i, .fatw.paused .fw-deco { transition: none; transform: none; }
.fatw.paused .fw-spark polyline { animation: none; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .fw-float, .fw-glow, .fw-status i, .fw-bub-in.swap { animation: none !important; }
  .fw-card { transition: opacity .2s ease !important; transform: none !important; }
  .fw-spark polyline { animation: none !important; stroke-dashoffset: 0; }
}

/* Responsif */
@media (max-width: 1080px) {
  .fw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .fw-hero { grid-template-columns: 1fr; min-height: 0; }
  .fw-hero-text { padding: 24px 0 0; }
  .fw-mascot { justify-self: center; max-width: 560px; padding-right: 4%; }
}
@media (max-width: 620px) {
  .fw-grid { grid-template-columns: 1fr; }
  .fw-card { min-height: 0; }
  .fw-uname { display: none; }
  .fw-logo { letter-spacing: .22em; }
  .fw-stats { grid-template-columns: 1fr 1fr; }
  .fw-spark { grid-column: 1 / -1; height: 34px; }
}

/* ---------- Mode satu layar (laptop/desktop) ----------
   Semua elemen muat dalam tinggi layar; ukuran mengikuti tinggi viewport (vh). */
@media (min-width: 900px) {
  .fatw { height: 100vh; min-height: 560px; display: flex; flex-direction: column; overflow: hidden; }
  .fw-nav { padding-top: 12px; padding-bottom: 12px; flex: none; }
  .fw-logo { font-size: 15px; }
  .fw-avatar { width: 32px; height: 32px; }
  .fw-userbtn { font-size: 14px; }
  .fw-main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: clamp(8px, 1.6vh, 18px); }
  .fw-hero { flex: none; min-height: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; }
  .fw-hero-text { padding: clamp(8px, 2vh, 24px) 0 clamp(6px, 1.2vh, 14px); gap: clamp(6px, 1.1vh, 12px); }
  .fw-pill { padding: 6px 14px; font-size: 12.5px; }
  .fw-hero h1 { margin: 0; font-size: clamp(26px, min(2.7vw, 5vh), 42px); }
  .fw-hero p { font-size: clamp(13.5px, 1.9vh, 17px); }
  .fw-ctrl { margin-top: 2px; }
  .fw-ghost { padding: 7px 14px; font-size: 13px; }
  .fw-mascot { width: auto; max-width: none; padding-right: 2.5%; }
  .fw-stage { width: clamp(300px, 52vh, 520px); }
  .fw-grid { flex: 1; min-height: 0; margin-top: clamp(6px, 1.4vh, 16px); gap: clamp(10px, 1.6vh, 18px); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .fw-card { min-height: 0; padding: clamp(14px, 2.2vh, 24px) clamp(16px, 1.8vw, 26px); gap: clamp(4px, .9vh, 8px); border-radius: 20px; }
  .fw-ic { width: clamp(38px, 5.4vh, 52px); height: clamp(38px, 5.4vh, 52px); border-radius: 14px; }
  .fw-ic .fw-i { width: 55%; height: 55%; }
  .fw-status { padding: 4px 10px; font-size: 12px; }
  .fw-card h2 { margin: 2px 0 0; font-size: clamp(16px, min(1.5vw, 2.7vh), 22px); }
  .fw-card p { font-size: clamp(12.5px, 1.75vh, 14.5px); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .fw-action { font-size: 14px; padding: 2px 0; }
  .fw-stats { padding-top: clamp(6px, 1vh, 10px); gap: 2px 18px; }
  .fw-stats small { font-size: 11.5px; }
  .fw-stats b { font-size: clamp(15px, 2.4vh, 20px); }
  .fw-spark { height: clamp(22px, 3.4vh, 32px); }
  .fw-deco { width: 30%; max-width: 120px; }
  .fw-hint { flex: none; margin: clamp(6px, 1.2vh, 12px) 0 0; font-size: 12.5px; }
}
/* Kartu ringkas: ikon kiri, judul & deskripsi kanan, aksi di bawah */
@media (min-width: 900px) {
  .fw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fw-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "ic tt st" "ic ds ds" "sp sp sp" "ac ac ac"; column-gap: 14px; row-gap: clamp(2px, .6vh, 6px); align-content: stretch; }
  .fw-card-top { display: contents; }
  .fw-card .fw-ic { grid-area: ic; align-self: start; }
  .fw-card .fw-status { grid-area: st; align-self: start; }
  .fw-card h2 { grid-area: tt; align-self: center; }
  .fw-card p { grid-area: ds; }
  .fw-card .fw-stats { grid-area: sp; align-self: end; }
  .fw-card .fw-action { grid-area: ac; margin-top: 4px; }
  .fw-card .fw-spot, .fw-card .fw-deco { grid-area: 1 / 1 / -1 / -1; }
}
/* Layar pendek: sembunyikan petunjuk & deskripsi kartu jadi 1 baris */
@media (min-width: 900px) and (max-height: 700px) {
  .fw-hint { display: none; }
  .fw-card p { -webkit-line-clamp: 1; }
  .fw-pill { display: none; }
}