/* =====================================================================
   Halaman Masuk (index.html) — v100. Semua kelas berawalan .lp- supaya tidak bentrok dengan
   gaya dashboard (style.css). Ukuran memakai rem yang dipatok ke TINGGI layar (lihat html{font-size}
   di bawah), sehingga halaman selalu muat dalam satu layar di desktop tanpa menggulir.
   ===================================================================== */

:root{
  --navy:#0b2e6b; --blue:#1d4ed8; --blue-2:#3b82f6; --ink:#1e2a3a; --ink-soft:#5b6b82; --line:#e2e8f5; --amber:#fbbf24; --cyan:#00b4d8;
}
.lp-page,.lp-page *{box-sizing:border-box}

/* ============================================================
   SKALA CAIR TERHADAP TINGGI LAYAR (desktop)
   Seluruh ukuran memakai rem, dan rem itu sendiri dipatok ke tinggi viewport.
   Hasilnya: halaman SELALU muat dalam satu layar (tanpa menggulir) di laptop pendek
   maupun monitor tinggi — sama seperti halaman lama, hanya lebih rapi.
   ============================================================ */
html{font-size:clamp(11px,2.05vh,16px)}
@media(max-width:980px){html{font-size:16px}}

body{margin:0;font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:#fff;background:#0b2e6b;-webkit-font-smoothing:antialiased}
.lp-page svg{display:block;flex-shrink:0}

/* ---------- Latar: gradasi mesh yang sama dengan halaman lama, bergeser pelan ---------- */
.lp-page{min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;
  background-color:#0b2e6b;
  background-image:
    radial-gradient(ellipse 42% 38% at 6% 8%, rgba(7,29,71,.9) 0%, transparent 68%),
    radial-gradient(ellipse 38% 34% at 92% 6%, rgba(96,165,250,.85) 0%, transparent 68%),
    radial-gradient(ellipse 48% 42% at 38% 42%, rgba(255,255,255,.26) 0%, transparent 70%),
    radial-gradient(ellipse 40% 36% at 8% 90%, rgba(29,78,216,.8) 0%, transparent 68%),
    radial-gradient(ellipse 46% 42% at 94% 94%, rgba(45,212,191,1) 0%, transparent 68%),
    linear-gradient(135deg,#0b2e6b 0%,#1d4ed8 45%,#14b8a6 100%);
  background-attachment:fixed;background-size:130% 130%;animation:lpDrift 26s ease-in-out infinite alternate}
@keyframes lpDrift{0%{background-position:0% 0%}100%{background-position:9% 7%}}

/* ---------- Bilah atas: hanya logo + nama ---------- */
.lp-topbar{width:100%;max-width:1160px;margin:0 auto;padding:1.1rem 1.75rem .2rem}
.lp-brand{display:inline-flex;align-items:center;gap:.85rem;color:#fff;text-decoration:none}
.lp-logo{position:relative;width:3.4rem;height:3.4rem;border-radius:1rem;background:rgba(255,255,255,.96);display:flex;align-items:center;justify-content:center;
  box-shadow:0 .5rem 1.4rem rgba(2,12,40,.35),0 0 0 .35rem rgba(255,255,255,.12);animation:lpFloat 5s ease-in-out infinite}
.lp-logo img{width:82%;height:82%;object-fit:contain}
.lp-brand-name{font-weight:800;font-size:1.35rem;letter-spacing:.01em}

/* ---------- Isi ---------- */
.lp-main{flex:1;width:100%;max-width:1160px;margin:0 auto;padding:.4rem 1.75rem 1.2rem;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3.2rem;align-items:center}
.lp-hero{min-width:0}
.lp-page h1{margin:0 0 .7rem;font-size:3rem;line-height:1.07;font-weight:800;letter-spacing:-.02em;color:#fff}
.lp-page h1 em{font-style:normal;background:linear-gradient(90deg,#a5d0ff,#5eead4);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-lead{margin:0 0 1.15rem;font-size:1rem;line-height:1.6;color:#d5e2f8;max-width:36rem}

/* Kartu fitur — melayang pelan (bergantian), seperti halaman lama */
.lp-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-bottom:.95rem}
.lp-feat{display:flex;gap:.75rem;align-items:center;padding:.8rem .9rem;border-radius:1rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  box-shadow:0 .9rem 1.6rem -1rem rgba(2,8,23,.6),inset 0 1px 0 rgba(255,255,255,.14);
  animation:lpFloat 6s ease-in-out infinite;transition:background .25s,border-color .25s,box-shadow .25s,transform .25s}
.lp-features .lp-feat:nth-child(1){animation-delay:.1s}.lp-features .lp-feat:nth-child(2){animation-delay:.7s}
.lp-features .lp-feat:nth-child(3){animation-delay:1.3s}.lp-features .lp-feat:nth-child(4){animation-delay:1.9s}
.lp-feat:hover{transform:scale(1.02);background:rgba(255,255,255,.16);border-color:rgba(0,180,216,.6);box-shadow:0 1.6rem 2.6rem -1.2rem rgba(2,8,23,.7),inset 0 1px 0 rgba(255,255,255,.2)}
.lp-feat-ic{width:2.4rem;height:2.4rem;border-radius:.75rem;background:linear-gradient(135deg,#60a5fa,#22d3ee);color:#06285f;display:flex;align-items:center;justify-content:center}
.lp-feat p{margin:0;font-size:.86rem;line-height:1.4;color:#eaf1ff;font-weight:500}
@keyframes lpFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}

/* Kartu harga (tetap terbuka) */
.lp-price{border-radius:1.1rem;padding:.95rem 1.15rem;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.lp-price-top{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.lp-price-label{display:inline-flex;align-items:center;gap:.45rem;font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--amber)}
.lp-price-amt{font-size:1.75rem;font-weight:800;color:#fff;line-height:1}
.lp-price-amt small{font-size:.85rem;font-weight:600;color:#c3d5f5;margin-left:.15rem}
.lp-price p{margin:.5rem 0 .55rem;font-size:.86rem;line-height:1.5;color:#dbe7fb}
.lp-price p b{color:#fff}
.lp-steps{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:.3rem}
.lp-steps li{counter-increment:s;display:flex;align-items:center;gap:.6rem;font-size:.82rem;line-height:1.35;color:#e3ecfc}
.lp-steps li::before{content:counter(s);flex:0 0 1.3rem;width:1.3rem;height:1.3rem;border-radius:50%;background:#fff;color:var(--navy);font-weight:800;font-size:.72rem;display:flex;align-items:center;justify-content:center}

/* ---------- Kartu masuk ---------- */
.lp-login{min-width:0}
.lp-card{position:relative;background:#fff;border-radius:1.5rem;padding:1.6rem 1.6rem 1.35rem;box-shadow:0 2rem 4rem -1rem rgba(2,12,40,.55);color:var(--ink)}
.lp-card::before{content:"";position:absolute;left:1.5rem;right:1.5rem;top:0;height:.25rem;border-radius:0 0 .4rem .4rem;background:linear-gradient(90deg,var(--blue),#22d3ee)}
.lp-card h2{margin:0 0 .4rem;font-size:1.45rem;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.lp-card .lp-sub{margin:0 0 1.05rem;font-size:.88rem;line-height:1.55;color:var(--ink-soft)}
.lp-view{animation:lpFade .3s ease-out both}
@keyframes lpFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.lp-btn{width:100%;display:flex;align-items:center;gap:.85rem;text-align:left;font:inherit;cursor:pointer;border-radius:.95rem;padding:.7rem .9rem;border:1.5px solid var(--line);background:#fff;color:var(--ink);
  transition:transform .18s,box-shadow .18s,border-color .18s}
.lp-btn + .lp-btn{margin-top:.6rem}
.lp-btn:hover{transform:translateY(-2px);box-shadow:0 .7rem 1.4rem -.8rem rgba(11,46,107,.4);border-color:#b8ccf5}
.lp-btn:focus-visible{outline:3px solid var(--blue-2);outline-offset:2px}
.lp-btn .lp-ic{width:2.4rem;height:2.4rem;border-radius:.7rem;display:flex;align-items:center;justify-content:center;background:#eef3ff;color:var(--blue)}
.lp-btn .lp-tx{flex:1;min-width:0;line-height:1.25}
.lp-btn .lp-tx b{display:block;font-size:.95rem;font-weight:700}
.lp-btn .lp-tx span{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:.12rem;font-weight:500}
.lp-btn .lp-go{color:#9db2d9;transition:transform .18s}
.lp-btn:hover .lp-go{transform:translateX(3px);color:var(--blue)}
.lp-btn.lp-primary{background:linear-gradient(135deg,#1d4ed8,#2563eb 60%,#3b82f6);border-color:transparent;color:#fff;box-shadow:0 .8rem 1.6rem -.7rem rgba(29,78,216,.75)}
.lp-btn.lp-primary .lp-ic{background:rgba(255,255,255,.96);color:var(--blue)}
.lp-btn.lp-primary .lp-tx span,.lp-btn.lp-primary .lp-go{color:#dbe8ff}
.lp-btn.lp-primary:hover{border-color:transparent}
.lp-divider{display:flex;align-items:center;gap:.8rem;margin:.85rem 0;color:#7b8aa3;font-size:.78rem;font-weight:600}
.lp-divider::before,.lp-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.lp-btn.lp-ghost{border-style:dashed;border-color:#c5d3ee;background:#f7faff}
.lp-btn.lp-ghost .lp-ic{background:#fff;border:1px solid var(--line)}
.lp-hint{margin:.95rem 0 0;padding:.65rem .8rem;border-radius:.75rem;background:#f1f6ff;border:1px solid #dbe6fb;font-size:.8rem;line-height:1.5;color:#3d5078;display:flex;gap:.6rem;align-items:flex-start}
.lp-hint svg{color:var(--blue);margin-top:.1rem}
.lp-back{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;background:none;border:0;padding:.3rem 0;font:inherit;font-weight:700;font-size:.85rem;color:var(--blue);cursor:pointer}
.lp-back:hover{text-decoration:underline}

/* ---------- Footer ---------- */
.lp-foot{border-top:1px solid rgba(255,255,255,.16);background:rgba(4,20,58,.3)}
.lp-foot-in{max-width:1160px;margin:0 auto;padding:.8rem 1.75rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;color:#cddbf3;font-size:.8rem;line-height:1.55}
.lp-foot a{color:#8fe3ff;text-decoration:none;font-weight:600}
.lp-foot a:hover{text-decoration:underline}
.lp-foot-links{display:flex;gap:1.3rem}

/* ---------- Muncul bertahap saat halaman dibuka ---------- */
/* v105: teks TIDAK lagi mulai dari transparan (opacity:0). Robot verifikasi pihak ketiga (mis. payment
   gateway) yang mengambil tangkapan layar cepat sebelumnya bisa melihat halaman kosong. Sekarang hanya
   bergeser naik sedikit — teks selalu terlihat sejak detik pertama. */
.lp-rise{animation:lpRise .7s cubic-bezier(.16,1,.3,1) both}
.lp-d1{animation-delay:.05s}.lp-d2{animation-delay:.12s}.lp-d3{animation-delay:.2s}.lp-d4{animation-delay:.28s}.lp-d5{animation-delay:.36s}
@keyframes lpRise{from{transform:translateY(18px)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.lp-page,.lp-rise,.lp-logo,.lp-feat,.lp-view.lp-on{animation:none!important;opacity:1}.lp-btn,.lp-feat{transition:none}}

/* ---------- Layar sempit (tablet & HP): kartu masuk tampil PERTAMA ---------- */
@media(max-width:980px){
  .lp-main{grid-template-columns:minmax(0,1fr);gap:1.6rem;padding-top:.6rem}
  .lp-login{order:-1}
  .lp-page h1{font-size:2.3rem}
}
@media(max-width:640px){
  .lp-topbar{padding:1rem 1rem .2rem}
  .lp-main{padding:.5rem 1rem 2rem}
  .lp-card{padding:1.4rem 1.1rem 1.15rem;border-radius:1.25rem}
  .lp-features{grid-template-columns:1fr}
  .lp-page h1{font-size:2rem}
  .lp-foot-in{padding:1rem}
}

/* ---------- Tambahan: formulir kode undangan / email & banner status ---------- */
.lp-field{margin:0 0 .9rem}
.lp-field label{display:block;font-weight:700;font-size:.85rem;margin-bottom:.4rem;color:var(--navy)}
.lp-field input{width:100%;padding:.75rem .85rem;border-radius:.75rem;border:1.5px solid var(--line);background:#fbfcff;font:inherit;font-size:.95rem;color:var(--ink)}
.lp-field input:focus{outline:none;border-color:var(--blue-2);box-shadow:0 0 0 .25rem rgba(59,130,246,.18)}
.lp-btn.lp-center{justify-content:center;text-align:center;font-weight:700;font-size:.95rem;gap:.6rem}
.lp-btn.lp-center svg{width:1.25rem;height:1.25rem}
.lp-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.lp-hint.lp-banner{margin:0 0 .9rem}
.lp-hint svg.lp-bi{width:1.1rem;height:1.1rem}
.lp-links{display:flex;justify-content:flex-start}
a.lp-back{text-decoration:none}
a.lp-back:hover{text-decoration:underline}
body{margin:0;background:#0b2e6b}
.lp-addr{display:inline-flex;align-items:center;gap:.4rem;opacity:.85}


/* ---------- v105: tombol "Berlangganan Sekarang" di kartu harga ---------- */
.lp-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;margin-top:.75rem}
.lp-cta{display:inline-flex;align-items:center;gap:.5rem;font:inherit;font-weight:800;font-size:.9rem;cursor:pointer;border:0;border-radius:.8rem;padding:.65rem 1.1rem;background:var(--amber);color:#3a2a00;box-shadow:0 .6rem 1.2rem -.6rem rgba(251,191,36,.9);text-decoration:none}
.lp-cta:hover{filter:brightness(1.06)}
.lp-cta svg{width:1rem;height:1rem}
.lp-cta-link{color:#8fe3ff;font-weight:700;font-size:.82rem;text-decoration:none}
.lp-cta-link:hover{text-decoration:underline}
.lp-cta-note{flex-basis:100%;margin:0;font-size:.76rem;color:#c3d5f5}