/* Halaman masuk Finbase (2026-10-27): selaras landing — gradasi hijau→toska→biru, logo kotak kuadran,
   salam tulisan tangan. HP: kepala berwarna + lembar form dari bawah seperti aplikasi Android.
   Desktop: panel merek di kiri, form di kanan. Tema gelap/terang mengikuti pilihan aplikasi. */
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/caveat-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}

.lg-body {
  --lg-sheet: #16231C; --lg-ink: #E9F1EC; --lg-ink-2: #A8B6AE; --lg-line: #2C3B33; --lg-field: #1D2C24; --lg-field-focus: #22352B;
  --lg-hijau: #10B981; --lg-hijau-t: #059669; --lg-ring: rgba(16,185,129,.35);
  --lg-grad: linear-gradient(140deg, #065F46 0%, #0F766E 45%, #1E40AF 100%);
  --lg-tangan: 'Caveat', 'Segoe Print', cursive;
  margin: 0; min-height: 100vh; min-height: 100dvh; background: #0B1410; color: var(--lg-ink);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
[data-theme=light] .lg-body { --lg-sheet: #FFFFFF; --lg-ink: #111827; --lg-ink-2: #6B7280; --lg-line: #E5E7EB; --lg-field: #F3F6F4; --lg-field-focus: #FFFFFF; background: #F6F7FB; }

.lg { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

/* ---- panel merek ---- */
.lg-hero { position: relative; overflow: hidden; background: var(--lg-grad); color: #fff; padding: clamp(2rem, 5vw, 3.5rem); display: flex; flex-direction: column; }
.lg-hero::before, .lg-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.lg-hero::before { width: 420px; height: 420px; right: -140px; top: -120px; background: radial-gradient(circle, rgba(251,191,36,.35), transparent 65%); }
.lg-hero::after { width: 360px; height: 360px; left: -120px; bottom: -140px; background: radial-gradient(circle, rgba(236,72,153,.3), transparent 65%); }
.lg-merek { position: relative; display: flex; align-items: center; gap: .75rem; font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; color: #fff; text-decoration: none; }
.lg-merek .logo { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.45); }
.lg-isi { position: relative; margin: auto 0; padding-block: 2rem; max-width: 30rem; }
.lg-sapa { font-family: var(--lg-tangan); font-weight: 700; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; color: #FDE68A; margin: 0; }
.lg-judul { font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; margin: .6rem 0 0; text-wrap: balance; }
.lg-judul span { white-space: nowrap; padding-bottom: .12em; background: 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='%23FBBF24' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% .28em no-repeat; }
.lg-poin { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .7rem; font-size: .98rem; color: rgba(255,255,255,.92); }
.lg-poin li { display: flex; align-items: center; gap: .7rem; }
.lg-poin i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: rgba(255,255,255,.14); }
.lg-poin i svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lg-cuplik { position: relative; margin-top: 2rem; width: min(100%, 26rem); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12); transform: rotate(-1.5deg); }
.lg-cuplik img { display: block; width: 100%; height: auto; }
.lg-kaki-hero { position: relative; font-size: .82rem; color: rgba(255,255,255,.7); }

/* ---- panel form ---- */
.lg-panel { display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3rem); background: var(--lg-sheet); }
.lg-form { width: 100%; max-width: 400px; display: flex; flex-direction: column; }
.lg-form h1 { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -.025em; color: var(--lg-ink); }
.lg-form .sub { margin: .35rem 0 1.5rem; color: var(--lg-ink-2); font-size: .97rem; }
.lg-label { font-size: .85rem; font-weight: 600; color: var(--lg-ink-2); margin: 0 0 .4rem; }
.lg-field { position: relative; margin-bottom: 1rem; }
.lg-field > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; fill: none; stroke: var(--lg-ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; z-index: 1; transition: stroke .15s; }
.lg-field:focus-within > svg { stroke: var(--lg-hijau); }
.lg-field input { width: 100%; box-sizing: border-box; height: 54px; border-radius: 14px; border: 1.5px solid var(--lg-line); background: var(--lg-field); color: var(--lg-ink); font: inherit; font-size: 16px; padding: 0 14px 0 46px; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; -webkit-appearance: none; appearance: none; }
.lg-field input::placeholder { color: var(--lg-ink-2); opacity: .7; }
.lg-field input:focus { border-color: var(--lg-hijau); background: var(--lg-field-focus); box-shadow: 0 0 0 4px var(--lg-ring); }
.lg-field .sandi-wrap input { padding-right: 52px !important; }
.lg-field .sandi-lihat { right: 6px; color: var(--lg-ink-2); }
.lg-galat { display: flex; gap: .6rem; align-items: flex-start; background: rgba(239,68,68,.12); color: #FCA5A5; border: 1px solid rgba(239,68,68,.35); border-radius: 12px; padding: .75rem .9rem; font-size: .92rem; margin-bottom: 1rem; }
[data-theme=light] .lg-galat { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
.lg-galat svg { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.lg-tombol { margin-top: .5rem; height: 54px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-size: 1.02rem; font-weight: 700; color: #fff; background: linear-gradient(180deg, #10B981, #059669); box-shadow: 0 12px 24px -12px rgba(5,150,105,.9); display: flex; align-items: center; justify-content: center; gap: .5rem; transition: transform .12s, box-shadow .12s, filter .12s; }
.lg-tombol svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lg-tombol:hover { filter: brightness(1.05); }
.lg-tombol:active { transform: scale(.98); box-shadow: 0 6px 14px -8px rgba(5,150,105,.9); }
.lg-tombol:focus-visible { outline: 3px solid var(--lg-ring); outline-offset: 2px; }
.lg-tombol[disabled] { opacity: .75; cursor: progress; }
.lg-pisah { display: flex; align-items: center; gap: .8rem; margin: 1.3rem 0 1rem; color: var(--lg-ink-2); font-size: .85rem; }
.lg-pisah::before, .lg-pisah::after { content: ""; flex: 1; height: 1px; background: var(--lg-line); }
.lg-google { display: flex; justify-content: center; min-height: 44px; color-scheme: light; }
.lg-google iframe { color-scheme: light; }
.lg-catatan { text-align: center; color: var(--lg-ink-2); font-size: .82rem; margin: .7rem 0 0; }
.lg-daftar { text-align: center; margin: 1.4rem 0 0; font-size: .93rem; color: var(--lg-ink-2); }
.lg-daftar a { color: var(--lg-hijau); font-weight: 700; text-decoration: none; }
.lg-daftar a:hover { text-decoration: underline; }
.lg-mw { margin: 1.6rem 0 0; text-align: center; font-size: .78rem; color: var(--lg-ink-2); }
.lg-mw a { color: inherit; font-weight: 700; text-decoration: none; }
.lg-form .flash { border-radius: 12px; }

/* ---- HP: kepala berwarna + lembar dari bawah ---- */
@media (max-width: 860px) {
  .lg { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .lg-hero { padding: calc(env(safe-area-inset-top, 0px) + 22px) max(22px, env(safe-area-inset-right, 0px)) 52px max(22px, env(safe-area-inset-left, 0px)); }
  .lg-hero::before { width: 260px; height: 260px; right: -90px; top: -90px; }
  .lg-hero::after { width: 220px; height: 220px; left: -80px; bottom: -110px; }
  .lg-merek { font-size: 1.15rem; }
  .lg-merek .logo { width: 38px; height: 38px; }
  .lg-isi { margin: 0; padding-block: 1.4rem 0; }
  .lg-sapa { font-size: 2.2rem; }
  .lg-judul { font-size: 1.35rem; }
  .lg-poin, .lg-cuplik, .lg-kaki-hero { display: none; }
  .lg-panel { place-items: start center; margin-top: -28px; position: relative; border-radius: 28px 28px 0 0; padding: 26px max(20px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 24px) max(20px, env(safe-area-inset-left, 0px)); box-shadow: 0 -12px 30px -18px rgba(0,0,0,.45); }
  .lg-panel::before { content: ""; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--lg-line); }
  .lg-form h1 { font-size: 1.5rem; }
  .lg-form .sub { margin-bottom: 1.2rem; }
  .lg-tombol { height: 56px; border-radius: 16px; }
}
@media (max-width: 860px) and (max-height: 640px) { .lg-judul { display: none; } .lg-isi { padding-top: .8rem; } }
@media (prefers-reduced-motion: no-preference) {
  .lg-panel { animation: lg-naik .45s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes lg-naik { from { transform: translateY(18px); opacity: .6; } to { transform: none; opacity: 1; } }
}