/* ==========================================================================
   RAIA — TEMA TERANG untuk LANDING PAGE
   Dipakai setelah light.css. Aktif lewat <html data-theme="light">
   ========================================================================== */
html[data-theme="light"]{
  --panel2:#fbf9f5;
}

/* ---------- header / nav ---------- */
html[data-theme="light"] .nav,
html[data-theme="light"] nav{
  background:rgba(255,255,255,.86) !important;
  border-bottom:1px solid rgba(28,24,16,.08) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 8px 24px -22px rgba(28,24,16,.45) !important;
}
html[data-theme="light"] .nav-links a{color:#57524a !important}
html[data-theme="light"] .nav-links a:hover{color:#1a1712 !important}
html[data-theme="light"] .nav-login{
  background:#fff !important;border:1px solid rgba(28,24,16,.12) !important;
  color:#2a251d !important;box-shadow:0 1px 2px rgba(28,24,16,.05) !important;
}
html[data-theme="light"] .nav-login:hover{border-color:rgba(232,90,5,.42) !important;color:#b8480a !important}
html[data-theme="light"] .nav-cta{
  background:linear-gradient(100deg,#ff8a3d,#e85a05 55%,#b03d00) !important;
  color:#fff !important;box-shadow:0 10px 26px -16px rgba(232,90,5,.75) !important;
}

/* ---------- eyebrow & chips ---------- */
html[data-theme="light"] .eyebrow{
  background:#fff !important;border-color:rgba(28,24,16,.11) !important;
  color:#57524a !important;box-shadow:0 1px 2px rgba(28,24,16,.04) !important;
}
html[data-theme="light"] .chip{
  background:#fff !important;border-color:rgba(28,24,16,.11) !important;
  color:#57524a !important;box-shadow:0 1px 2px rgba(28,24,16,.04) !important;
}
html[data-theme="light"] .chip:hover{border-color:rgba(232,90,5,.40) !important;color:#b8480a !important}

/* ---------- kartu-kartu ---------- */
html[data-theme="light"] .pcard{
  background:linear-gradient(180deg,#ffffff,#fbf9f5) !important;
  border-color:rgba(28,24,16,.09) !important;
  box-shadow:0 1px 2px rgba(28,24,16,.05),0 34px 64px -34px rgba(28,24,16,.42) !important;
}
html[data-theme="light"] .tier,
html[data-theme="light"] .why,
html[data-theme="light"] .step,
html[data-theme="light"] .pipcard,
html[data-theme="light"] .res{
  background:linear-gradient(180deg,#ffffff,#fbf9f5) !important;
  border-color:rgba(28,24,16,.085) !important;
  box-shadow:0 1px 2px rgba(28,24,16,.035),0 16px 32px -28px rgba(28,24,16,.40) !important;
}
html[data-theme="light"] .feat{
  background:#ffffff !important;
  border-color:rgba(28,24,16,.085) !important;
  box-shadow:0 1px 2px rgba(28,24,16,.035) !important;
}
html[data-theme="light"] .pcard:hover,
html[data-theme="light"] .why:hover,
html[data-theme="light"] .pipcard:hover,
html[data-theme="light"] .feat:hover,
html[data-theme="light"] .tier:hover{border-color:rgba(232,90,5,.34) !important}

/* kartu mengambang di hero */
html[data-theme="light"] .f-bal,
html[data-theme="light"] .f-vol{
  background:linear-gradient(180deg,#ffffff,#fbf9f5) !important;
  border-color:rgba(28,24,16,.10) !important;
  box-shadow:0 18px 40px -24px rgba(28,24,16,.40) !important;
}

/* ---------- CTA band ---------- */
html[data-theme="light"] .ctaband{
  border-color:rgba(232,90,5,.30) !important;
  background:
    radial-gradient(700px 300px at 50% -30%, rgba(232,90,5,.16), transparent 70%),
    linear-gradient(180deg,#ffffff,#fdf8f1) !important;
  box-shadow:0 24px 60px -40px rgba(232,90,5,.55) !important;
}

/* ---------- tombol ---------- */
html[data-theme="light"] .btn-ghost{
  background:#ffffff !important;
  border-color:rgba(28,24,16,.12) !important;
  color:#2a251d !important;
  box-shadow:0 1px 2px rgba(28,24,16,.05) !important;
}
html[data-theme="light"] .btn-ghost:hover{
  border-color:rgba(232,90,5,.42) !important;color:#b8480a !important;
}

/* ---------- tabel ---------- */
html[data-theme="light"] thead th{
  background:#fbf9f5 !important;
  color:#6d675c !important;
  border-bottom-color:rgba(28,24,16,.11) !important;
}
html[data-theme="light"] tbody td{color:#3d382f !important;border-bottom-color:rgba(28,24,16,.06) !important}
html[data-theme="light"] tbody tr:hover{background:rgba(232,90,5,.045) !important}
html[data-theme="light"] .tbl-res,
html[data-theme="light"] table{border-color:rgba(28,24,16,.09) !important}

/* ---------- marquee & trust ---------- */
html[data-theme="light"] .trust-row{color:#6d675c !important}
html[data-theme="light"] .mq-track span{color:#8f887c !important}
html[data-theme="light"] .mq-track b{color:#57524a !important}

/* ---------- footer ---------- */
html[data-theme="light"] footer,
html[data-theme="light"] .foot{border-top-color:rgba(28,24,16,.09) !important}
html[data-theme="light"] .links a{color:#6d675c !important}
html[data-theme="light"] .links a:hover{color:#b8480a !important}

/* ---------- tombol tema di dalam nav ---------- */
.nav-actions{display:flex;align-items:center;gap:10px}
#raiaThemeBtn.in-nav{
  position:static !important;top:auto !important;right:auto !important;
  width:38px;height:38px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--ink);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
#raiaThemeBtn.in-nav:hover{border-color:var(--acc);color:var(--acc);transform:none}
html[data-theme="light"] #raiaThemeBtn.in-nav{
  background:#fff !important;border:1px solid rgba(28,24,16,.12) !important;
  color:#2a251d !important;box-shadow:0 1px 2px rgba(28,24,16,.05) !important;
}
html[data-theme="light"] #raiaThemeBtn.in-nav:hover{
  color:#b8480a !important;border-color:rgba(232,90,5,.42) !important;
}
/* ---------- perbaikan kontras: angka & label ---------- */
html[data-theme="light"] .metric b{color:#1a1712 !important}
html[data-theme="light"] .metric b i{color:#e85a05 !important}
html[data-theme="light"] .metric{
  background:linear-gradient(180deg,#ffffff,#fbf9f5) !important;
  border-color:rgba(28,24,16,.085) !important;
  box-shadow:0 1px 2px rgba(28,24,16,.035),0 14px 28px -26px rgba(28,24,16,.38) !important;
}
html[data-theme="light"] .metric > span{color:#6d675c !important}
html[data-theme="light"] .metric em{color:#0a8f4d !important}

/* badge Market Live */
html[data-theme="light"] .livetag{
  color:#0a7a43 !important;
  background:rgba(10,143,77,.10) !important;
  border-color:rgba(10,143,77,.38) !important;
}

/* kartu kecil dalam portofolio */
html[data-theme="light"] .mini{
  background:#fbf9f5 !important;
  border-color:rgba(28,24,16,.09) !important;
}
html[data-theme="light"] .mini b,
html[data-theme="light"] .pcard b,
html[data-theme="light"] .pcard-head b{color:#1a1712 !important}
html[data-theme="light"] .pcard .ptotal{color:#1a1712 !important}
html[data-theme="light"] .pcard span,
html[data-theme="light"] .pcard label{color:#6d675c !important}

/* bar volume chart */
html[data-theme="light"] .bars span,
html[data-theme="light"] .bars i{opacity:.9}

/* logo trust: dari pudar jadi tegas */
html[data-theme="light"] .trust-row{opacity:1 !important;color:#57524a !important}
html[data-theme="light"] .trust-row span,
html[data-theme="light"] .trust-row b{color:#57524a !important}
html[data-theme="light"] .trust-row i{background:#8f887c !important}
html[data-theme="light"] .mq-track{opacity:1 !important}
html[data-theme="light"] .mq-track span{color:#6d675c !important;font-weight:700}
html[data-theme="light"] .mq-track i{background:#c4bfae !important}

/* garis pemisah antar elemen */
html[data-theme="light"] .stat{border-right-color:rgba(28,24,16,.10) !important}
html[data-theme="light"] .num{color:#8f887c !important}
html[data-theme="light"] em,
html[data-theme="light"] .hero h1 em{color:#e85a05 !important}

/* tombol utama tetap gradasi oranye bertulisan putih */
html[data-theme="light"] .btn-main{
  background:linear-gradient(100deg,#ff8a3d,#e85a05 55%,#c94a02) !important;
  color:#fff !important;
}

/* ---------- grid overlay & marquee ---------- */
html[data-theme="light"] body::after{
  opacity:.55 !important;
  background-image:
    linear-gradient(rgba(28,24,16,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(28,24,16,.045) 1px,transparent 1px) !important;
}
html[data-theme="light"] .marquee{
  background:rgba(28,24,16,.022) !important;
  border-top-color:rgba(28,24,16,.09) !important;
  border-bottom-color:rgba(28,24,16,.09) !important;
}
html[data-theme="light"] .mq-track span{
  color:#3d382f !important;
  font-weight:800 !important;
}
html[data-theme="light"] .trust-row{
  opacity:1 !important;
}
html[data-theme="light"] .trust-row span{
  color:#3d382f !important;
  font-weight:700 !important;
}
html[data-theme="light"] .trust-row i{
  background:#c4bfae !important;
}

/* ==========================================================================
   HERO v2 — kartu melayang tidak lagi menutupi isi kartu utama
   ========================================================================== */
.hero-side{
  min-height:520px !important;
  padding:34px 10px !important;
}

/* kartu melayang digeser ke LUAR kartu utama, bukan menimpanya */
.f-bal{
  top:-8px !important;
  right:-6px !important;
}
.f-vol{
  bottom:-4px !important;
  right:-6px !important;
}

/* jarak aman supaya tidak keluar dari .wrap */
@media(max-width:1240px){
  .f-bal{right:0 !important}
  .f-vol{right:0 !important}
}
@media(max-width:1000px){
  .hero-side{min-height:470px !important}
}
@media(max-width:560px){
  .f-bal{top:-16px !important;right:0 !important}
  .f-vol{bottom:-10px !important;right:0 !important}
}

/* marquee: fade di tepi dilunakkan biar tulisan tidak hilang */
.marquee{
  mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent) !important;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent) !important;
}
.mq-track span{color:var(--muted) !important}
html[data-theme="light"] .mq-track span{color:#3d382f !important}

/* garis pemisah stats dibuat lebih jelas */
.stats{border-top-color:var(--line) !important}
html[data-theme="light"] .stats{border-top-color:rgba(28,24,16,.14) !important}

/* kontras kartu melayang di mode terang */
html[data-theme="light"] .f-bal,
html[data-theme="light"] .f-vol{
  background:linear-gradient(180deg,#ffffff,#fdfbf7) !important;
  border-color:rgba(28,24,16,.13) !important;
  box-shadow:0 20px 46px -26px rgba(28,24,16,.45), 0 2px 6px rgba(28,24,16,.06) !important;
}
html[data-theme="light"] .bars i{background:#d8d2c4 !important}
html[data-theme="light"] .bars i.hot{
  background:linear-gradient(180deg,#ff8a3d,#e85a05) !important;
  box-shadow:0 0 14px rgba(232,90,5,.35) !important;
}

/* ==========================================================================
   HERO v3 — kartu melayang tidak lagi menutupi isi kartu utama
   Hasil ukur sebelum perbaikan:
     f-bal keluar 84px dari kartu, f-vol keluar 88px, f-vol menutup 39px grafik
   ========================================================================== */
.hero-side{
  display:block !important;
  min-height:0 !important;
  position:relative !important;
  padding:46px 0 124px !important;
}
.hero-side .pcard{
  margin:0 auto !important;
  max-width:352px !important;
  position:relative !important;
  z-index:2 !important;
}
/* kedua kartu melayang: nempel di tepi kanan area, TIDAK menimpa isi kartu */
.hero-side .f-bal{
  top:8px !important;
  right:0 !important;
  z-index:4 !important;
}
.hero-side .f-vol{
  bottom:4px !important;
  right:0 !important;
  z-index:4 !important;
}
/* batasi lebar supaya tidak melewati tepi container */
.hero-side .f-bal{max-width:min(170px,44%)}
.hero-side .f-vol{max-width:min(190px,48%)}

@media(max-width:1000px){
  .hero-side{padding:40px 0 110px !important;max-width:400px !important;margin:0 auto !important}
}
@media(max-width:560px){
  .hero-side{padding:34px 0 96px !important}
  .hero-side .f-bal{top:0 !important;right:0 !important}
  .hero-side .f-vol{bottom:0 !important;right:0 !important}
}

/* --- MARQUEE: teks harus terbaca, fade hanya di ujung --- */
.marquee{
  mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%) !important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%) !important;
}
.marquee .mq-track span{color:var(--muted) !important;font-weight:800 !important}
html[data-theme="light"] .marquee{background:rgba(28,24,16,.025) !important}
html[data-theme="light"] .marquee .mq-track span{color:#2f2a22 !important}

/* --- STATS: garis atas lebih jelas --- */
.stats{border-top:1px solid var(--line) !important}
html[data-theme="light"] .stats{border-top-color:rgba(28,24,16,.13) !important}

/* --- kontras kartu kecil di mode terang --- */
html[data-theme="light"] .mini{
  background:#fbf9f5 !important;
  border-color:rgba(28,24,16,.10) !important;
}
html[data-theme="light"] .bars i{background:#d3ccbd !important}
html[data-theme="light"] .bars i.hot{
  background:linear-gradient(180deg,#ff8a3d,#e85a05) !important;
  box-shadow:0 0 14px rgba(232,90,5,.35) !important;
}
html[data-theme="light"] .pcard .spark{filter:saturate(1.05)}

/* ==========================================================================
   HERO v4 — polesan akhir: kartu melayang tidak menutup tombol "···"
   ========================================================================== */
.hero-side .f-bal{
  top:-18px !important;
  right:-6px !important;
}
.hero-side .pcard-head{
  padding-right:66px !important;   /* sisakan ruang supaya "···" tidak tertutup */
}
/* tepi kiri marquee: jangan sampai kata pertama terpotong */
.marquee{
  mask-image:linear-gradient(90deg,#000 0,#000 96%,transparent 100%) !important;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 96%,transparent 100%) !important;
}
.marquee .mq-track{padding-left:2px}

@media(max-width:1000px){
  .hero-side .f-bal{top:-14px !important;right:0 !important}
  .hero-side .pcard-head{padding-right:66px !important}
}
@media(max-width:560px){
  .hero-side .f-bal{top:-12px !important;right:0 !important}
  .hero-side .pcard-head{padding-right:60px !important}
}


/* ==========================================================================
   STEP META — pengganti <code> teknis di bagian "Alur Kerja"
   Dulu menampilkan nama file & return code broker (bocor internal).
   ========================================================================== */
.stepmeta{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:14px;padding:7px 12px;border-radius:9px;
  font-size:11px;font-weight:700;letter-spacing:.01em;
  color:#cfcfc8;
  background:rgba(255,255,255,.045);
  border:1px solid var(--line2);
  font-variant-numeric:tabular-nums;
}
.stepmeta i.ok{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:#3ddc97;box-shadow:0 0 8px rgba(61,220,151,.65);
}
html[data-theme="light"] .stepmeta{
  color:#334155 !important;
  background:#f7f9fc !important;
  border:1px solid rgba(15,23,42,.10) !important;
}
html[data-theme="light"] .stepmeta i.ok{
  background:#059669 !important;
  box-shadow:0 0 0 3px rgba(5,150,105,.14) !important;
}