/* Lapisan warna untuk beranda Finbase (draf 2026-10-26). Dipasang di atas beranda.css; semua aturan di bawah body.fx. */
body.fx {
  --w-hijau: #10B981; --w-hijau-m: #D1FAE5; --w-kuning: #F59E0B; --w-kuning-m: #FEF3C7; --w-koral: #F97316; --w-koral-m: #FFEDD5;
  --w-pink: #EC4899; --w-pink-m: #FCE7F3; --w-biru: #3B82F6; --w-biru-m: #DBEAFE; --w-ungu: #8B5CF6; --w-ungu-m: #EDE9FE; --w-teal: #14B8A6; --w-teal-m: #CCFBF1;
}

/* garis pelangi di bawah menu */
.fx .atas { border-bottom: 0; box-shadow: none; position: sticky; }
.fx .atas::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--w-hijau), var(--w-teal), var(--w-biru), var(--w-ungu), var(--w-pink), var(--w-koral), var(--w-kuning)); }

/* hero: gumpalan warna lembut + kata berwarna + coretan dekorasi */
.fx-hero { background:
  radial-gradient(38% 55% at 6% 22%, rgba(16,185,129,.20), transparent 70%),
  radial-gradient(32% 50% at 94% 14%, rgba(245,158,11,.22), transparent 70%),
  radial-gradient(36% 55% at 88% 88%, rgba(139,92,246,.18), transparent 70%),
  radial-gradient(34% 50% at 10% 92%, rgba(59,130,246,.16), transparent 70%); overflow: hidden; }
.fx-warna.hijau { color: #059669; } .fx-warna.koral { color: #EA580C; } .fx-warna.ungu { color: #7C3AED; }
.fx-dudel { position: absolute; pointer-events: none; }
.fx-dudel.d1 { left: 7%; top: 18%; width: 54px; color: var(--w-kuning); transform: rotate(-12deg); }
.fx-dudel.d2 { right: 8%; top: 30%; width: 90px; color: var(--w-pink); }
.fx-dudel.d3 { left: 10%; bottom: 22%; width: 70px; color: var(--w-biru); }
.fx-dudel.d4 { right: 22%; top: 9%; width: 30px; color: var(--w-teal); }
@media (max-width: 760px) { .fx-dudel.d2, .fx-dudel.d3 { display: none; } .fx-dudel.d1 { left: 4%; top: 4%; width: 36px; } .fx-dudel.d4 { right: 6%; top: 3%; } }
.fx-coret::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 16 C 60 6 120 8 170 12 S 260 18 296 8' fill='none' stroke='%23EC4899' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fx-btn-abu { background: #fff; color: #5B21B6; box-shadow: 0 0 0 2px #DDD6FE inset; }
.fx-btn-abu:hover { background: var(--w-ungu-m); color: #5B21B6; }
.fx-catatan { color: #7C3AED; } .fx-catatan svg { color: #7C3AED; }

/* kubah modul: gradasi mint → langit → lila, ubin berwarna */
.fx-kubah, .fx-kubah::before { background: #ECFDF5; }
.fx-kubah { background: linear-gradient(180deg, #ECFDF5 0%, #E0F2FE 55%, #F5F3FF 100%); }
.fx-pil { box-shadow: 0 0 0 2px #A7F3D0, 0 10px 24px -14px rgba(16,185,129,.6); }
.fx-pil b { color: #047857; }
.fx-modul li:nth-child(6n+1) .ik { background: var(--w-hijau-m); box-shadow: 0 10px 22px -14px var(--w-hijau); }
.fx-modul li:nth-child(6n+2) .ik { background: var(--w-kuning-m); box-shadow: 0 10px 22px -14px var(--w-kuning); }
.fx-modul li:nth-child(6n+3) .ik { background: var(--w-pink-m); box-shadow: 0 10px 22px -14px var(--w-pink); }
.fx-modul li:nth-child(6n+4) .ik { background: var(--w-biru-m); box-shadow: 0 10px 22px -14px var(--w-biru); }
.fx-modul li:nth-child(6n+5) .ik { background: var(--w-ungu-m); box-shadow: 0 10px 22px -14px var(--w-ungu); }
.fx-modul li:nth-child(6n+6) .ik { background: var(--w-koral-m); box-shadow: 0 10px 22px -14px var(--w-koral); }
.fx-modul .ik { border-radius: 16px; }
.fx-saklar, .fx-lihat { color: #6D28D9; }
.fx-saklar[aria-pressed="true"] .jalur { background: var(--w-pink); border-color: var(--w-pink); }

/* pernyataan: kata kunci berwarna */
.fx-nyata b { color: #047857; }
.fx-nyata .sorot { background: linear-gradient(transparent 58%, #FDE68A 58%); padding: 0 .1em; color: var(--teks); font-weight: 600; }

/* kolase: latar gumpalan kuning-oranye + titik-titik */
.fx-kolase::before { content: ""; position: absolute; z-index: -1; left: 3%; right: -3%; top: 8%; bottom: -2%; border-radius: 48px; background: linear-gradient(135deg, #FDE68A, #FDBA74 55%, #F9A8D4); transform: rotate(-2deg); }
.fx-kolase::after { content: ""; position: absolute; z-index: -1; right: -4%; top: -4%; width: 180px; height: 140px; background: radial-gradient(#8B5CF6 2.4px, transparent 2.6px) 0 0/16px 16px; opacity: .5; }
.fx-kolase { isolation: isolate; }
.fx-kolase-teks b { color: #C2410C; }

/* untuk siapa: kartu berwarna */
.fx-judul .fx-warna { font: inherit; }
.fx-siapa article { border: 0; }
.fx-siapa article:nth-child(1) { background: var(--w-kuning-m); }
.fx-siapa article:nth-child(2) { background: var(--w-pink-m); }
.fx-siapa article:nth-child(3) { background: var(--w-biru-m); }
.fx-siapa .ik { background: #fff; }
.fx-siapa p { color: var(--teks-2); }

/* baris fitur: panel lebih jenuh + judul berwarna */
.fx-panel { overflow: visible; isolation: isolate; }
.fx-panel.kuning { background: linear-gradient(135deg, #FDE68A, #FCD34D); }
.fx-panel.mint { background: linear-gradient(135deg, #A7F3D0, #6EE7B7); }
.fx-panel.biru { background: linear-gradient(135deg, #BAE6FD, #93C5FD); }
.fx-panel.ungu { background: linear-gradient(135deg, #DDD6FE, #F5D0FE); }
.fx-panel::before { content: ""; position: absolute; z-index: -1; width: 90px; height: 90px; border-radius: 50%; top: -22px; left: -22px; background: rgba(255,255,255,.55); }
.fx-baris:nth-of-type(1) .fx-teks h3 { color: #B45309; }
.fx-baris:nth-of-type(2) .fx-teks h3 { color: #047857; }
.fx-baris:nth-of-type(3) .fx-teks h3 { color: #1D4ED8; }
.fx-baris:nth-of-type(4) .fx-teks h3 { color: #7C3AED; }
.fx-teks h3 .fx-coret { color: var(--teks); }

/* bidang nilai: latar gradasi gelap, kartu pastel */
.fx-bidang { background: linear-gradient(135deg, #064E3B 0%, #0F766E 45%, #1E3A8A 100%); color: #fff; }
.fx-bidang .fx-judul { color: #fff; }
.fx-bidang .fx-lingkar::after { filter: brightness(1.6); }
.fx-nilai article { border: 0; }
.fx-nilai article:nth-child(1) { background: var(--w-kuning-m); }
.fx-nilai article:nth-child(2) { background: var(--w-hijau-m); }
.fx-nilai article:nth-child(3) { background: var(--w-pink-m); }
.fx-nilai article:nth-child(4) { background: var(--w-biru-m); }
.fx-nilai h3 { color: var(--teks); }

/* harga: pita warna di atas tiap kartu */
.fx .paket-grid .kartu.paket { border-top: 6px solid var(--w-biru); }
.fx .paket-grid .kartu.paket:nth-child(2) { border-top-color: var(--w-hijau); box-shadow: 0 0 0 2px var(--w-hijau), 0 26px 50px -26px rgba(16,185,129,.7); }
.fx .paket-grid .kartu.paket:nth-child(3) { border-top-color: var(--w-ungu); }
.fx #harga { background: linear-gradient(180deg, #fff 0%, #FFF7ED 100%); }

/* faq: penanda warna */
.fx-faq details { border-left-width: 5px; }
.fx-faq details:nth-child(6n+1) { border-left-color: var(--w-hijau); }
.fx-faq details:nth-child(6n+2) { border-left-color: var(--w-kuning); }
.fx-faq details:nth-child(6n+3) { border-left-color: var(--w-pink); }
.fx-faq details:nth-child(6n+4) { border-left-color: var(--w-biru); }
.fx-faq details:nth-child(6n+5) { border-left-color: var(--w-ungu); }
.fx-faq details:nth-child(6n+6) { border-left-color: var(--w-koral); }
.fx #faq { background: #FFF7ED; padding-top: clamp(3rem, 6vw, 4.5rem) !important; }

/* penutup: pita hijau-ungu */
.fx-penutup { background: linear-gradient(120deg, #059669 0%, #0D9488 40%, #7C3AED 100%); color: #fff; }
.fx-penutup p { color: rgba(255,255,255,.9); }
.fx-penutup .fx-stabilo { color: var(--teks); }
.fx-penutup .fx-btn-utama { background: #fff; color: #047857; box-shadow: 0 10px 24px -12px rgba(0,0,0,.4); }
.fx-penutup .fx-btn-abu { background: rgba(255,255,255,.14); color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.5) inset; }

/* hero setinggi layar (desktop & HP) */
.fx-hero { min-height: calc(100vh - 66px); min-height: calc(100svh - 66px); display: flex; flex-direction: column; justify-content: center; padding-block: 2.5rem 7.5rem; box-sizing: border-box; }
.fx-hero > .fx-w { width: 100%; }
.fx-hero .fx-catatan { bottom: 7rem; }
.fx-kubah { margin-top: 0; }
.fx-gulir { position: absolute; left: 50%; bottom: 6.6rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .1rem; color: #6D28D9; font: 600 .78rem/1 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.fx-gulir svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: no-preference) { .fx-gulir svg { animation: fx-turun 1.6s ease-in-out infinite; } @keyframes fx-turun { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } } }
@media (max-width: 1000px) { .fx-hero { padding-block: 1.5rem 4.5rem; } .fx-hero .fx-catatan { margin-top: 1.4rem; } .fx-gulir { bottom: 3.2rem; } }
.fx-hero h1 { font-size: clamp(2.9rem, min(7.4vw, 10.5vh), 6rem); }
@media (max-height: 820px) { .fx-gulir { display: none; } }
@media (max-width: 640px) { .fx-hero h1 { font-size: clamp(2.5rem, 11vw, 3.2rem); } .fx-hero .fx-lead { font-size: 1rem; margin-top: 1.1rem; } .fx-hero .fx-aksi { margin-top: 1.5rem; } .fx-hero .fx-apk { margin-top: .8rem; } .fx-gulir { display: none; } }