/* ============================================================
   LANDING PAGE — pengganti login-screen lama (hero+form statis).
   Semua class di sini diawali "lp-" supaya tidak bentrok dengan
   class lain di style.css. Warna pakai variabel dari :root di
   style.css (--primary, --accent, --gray-*, dst), jadi otomatis
   ikut kalau brand color sistem diganti di sana.
   ============================================================ */

/* #login-screen di style.css sudah position:fixed;inset:0 supaya
   nutup layar penuh sebelum login — itu tetap dipakai, cuma di sini
   ditambah overflow-y:auto supaya landing page yang lebih panjang
   dari 1 layar tetap bisa discroll, dan flex-direction:column
   supaya section-section-nya berbaris ke bawah (bukan lagi 2 kolom
   berdampingan seperti hero+form dulu). */
#login-screen { flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; scroll-behavior: smooth; }
#lp-beranda, #lp-alur, #lp-modul, #lp-kontak { scroll-margin-top: 66px; }

.lp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ── NAVBAR ── */
.lp-navbar { position: sticky; top: 0; z-index: 20; flex-shrink: 0; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--gray-200); transition: box-shadow .2s; }
.lp-navbar.lp-navbar-scrolled { box-shadow: 0 6px 20px -10px rgba(15,23,42,.15); }
.lp-navbar-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.lp-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; letter-spacing: -.2px; color: var(--gray-900); }
.lp-brand img { width: 32px; height: 32px; object-fit: contain; border-radius: 8px; }
.lp-nav-links { display: flex; gap: 32px; font-size: 13.5px; font-weight: 700; color: var(--gray-700); margin-left: auto; margin-right: 32px; }
.lp-nav-links a { color: inherit; text-decoration: none; padding: 4px 0; transition: color .15s; }
.lp-nav-links a:hover { color: var(--primary); }
.lp-nav-actions { display: flex; gap: 10px; }

.lp-hamburger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; background: var(--gray-100); border: none; border-radius: 9px; cursor: pointer; color: var(--gray-700); flex-shrink: 0; }
.lp-hamburger:hover { background: var(--gray-200); }
.lp-mobile-menu { display: none; flex-direction: column; padding: 6px 20px 18px; border-top: 1px solid var(--gray-200); }
.lp-mobile-menu a { text-decoration: none; color: var(--gray-700); font-weight: 700; font-size: 14.5px; padding: 12px 0; border-bottom: 1px solid var(--gray-100); text-align: right; }
.lp-mobile-menu-actions { display: flex; flex-direction: row; gap: 10px; margin-top: 14px; }
.lp-mobile-menu-actions .lp-btn { flex: 1; justify-content: center; }
.lp-mobile-menu.open { display: flex; }

.lp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 10px; font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; border: 1.5px solid transparent; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s, color .15s; }
.lp-btn:active { transform: translateY(1px); }
.lp-btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 16px -6px rgba(37,99,235,.5); }
.lp-btn-primary:hover { background: var(--primary-dark); }
.lp-btn-ghost { background: transparent; color: var(--gray-700); border-color: var(--gray-300); }
.lp-btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.lp-btn-accent { background: var(--accent-deep); color: #fff; box-shadow: 0 6px 16px -6px rgba(217,119,6,.5); }
.lp-btn-accent:hover { background: #b45f04; }
.lp-btn-sm { padding: 9px 14px; font-size: 13px; }

/* ── HERO ──
   Dasar putih polos (persis warna landing page OMI Kemenag), efek warna
   didapat dari 2 "blob" radial-gradient transparan yang di-blur — bukan
   dari background gradient solid seperti sebelumnya. */
.lp-hero { position: relative; overflow: hidden; flex-shrink: 0; background: #fff; }
.lp-hero::before, .lp-hero::after { content: ''; position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
.lp-hero::before { width: 620px; height: 620px; top: -260px; right: -200px; background: radial-gradient(circle, rgba(37,99,235,.16) 0%, rgba(37,99,235,0) 72%); }
.lp-hero::after { width: 520px; height: 520px; bottom: -240px; left: -160px; background: radial-gradient(circle, rgba(245,158,11,.13) 0%, rgba(245,158,11,0) 72%); }
.lp-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding: 68px 32px; }
.lp-hero-art { padding-top: 6px; max-width: 400px; margin-left: auto; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-light); color: var(--accent-deep); font-size: 12.5px; font-weight: 700; padding: 7px 14px 7px 10px; border-radius: 999px; margin-bottom: 20px; }
.lp-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-deep); }
.lp-hero-copy { padding-top: 14px; }
.lp-hero-copy h1 { font-size: 40px; line-height: 1.18; font-weight: 900; letter-spacing: -1px; margin: 0 0 16px; color: var(--gray-900); }
.lp-hero-copy h1 span { color: var(--primary); }
.lp-lead { font-size: 15.5px; line-height: 1.7; color: var(--gray-500); max-width: 460px; margin: 0 0 28px; }
.lp-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.lp-hero-note { font-size: 12.5px; color: var(--gray-500); display: flex; align-items: center; gap: 8px; }
.lp-hero-note svg { flex-shrink: 0; color: var(--primary); }
.lp-hero-art svg { width: 100%; height: auto; display: block; }
.lp-hero-art-img { width: 100%; height: auto; display: block; }

/* ── STATS STRIP ── */
.lp-stats { flex-shrink: 0; background: var(--accent-deep); }
.lp-stats-inner { display: grid; grid-template-columns: repeat(4,1fr); padding: 40px 32px; }
.lp-stat { text-align: left; padding: 0 24px; position: relative; display: flex; flex-direction: column; gap: 0; }
.lp-stat:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 8px; bottom: 8px; width: 1px; background: rgba(255,255,255,.2); }
.lp-stat-top { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.lp-stat-icon { width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lp-stat-icon svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-stat b { display: block; font-size: 30px; font-weight: 900; color: #fff; letter-spacing: -1px; line-height: 1; }
.lp-stat-label { display: block; font-size: 14px; color: rgba(255,255,255,.95); font-weight: 700; margin-bottom: 4px; }
.lp-stat-desc { display: block; font-size: 12px; color: rgba(255,255,255,.65); font-weight: 500; line-height: 1.45; }

/* ── SECTIONS (alur & modul) ── */
.lp-section { padding: 76px 32px; }
.lp-section-head { max-width: 560px; margin: 0 auto 50px; text-align: center; }
.lp-section-head h2 { font-size: 27px; font-weight: 900; letter-spacing: -.5px; margin: 0 0 12px; color: var(--gray-900); }
.lp-section-head p { font-size: 14.5px; color: var(--gray-500); line-height: 1.6; margin: 0; }

.lp-alur { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; align-items: center; }

.lp-alur-art { position: relative; display: flex; align-items: center; justify-content: center; }
.lp-alur-art-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(37,99,235,.07) 0%, transparent 70%); border-radius: 24px; pointer-events: none; }
.lp-alur-art img { width: 100%; max-width: 420px; height: auto; display: block; position: relative; z-index: 1; filter: drop-shadow(0 24px 48px rgba(15,23,42,.10)); }

.lp-alur-steps { display: flex; flex-direction: column; gap: 0; }

.lp-alur-step { display: grid; grid-template-columns: 48px 1fr; gap: 0 20px; position: relative; padding-bottom: 36px; }
.lp-alur-step:not(:last-child)::after { content: ''; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--gray-200) 0%, transparent 100%); }

.lp-alur-num { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; padding-top: 2px; }
.lp-alur-num-circle { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 900; color: #fff; flex-shrink: 0; position: relative; z-index: 1; transition: transform .2s; }
.lp-alur-step:hover .lp-alur-num-circle { transform: scale(1.08); }
.lp-alur-step:nth-child(1) .lp-alur-num-circle { background: var(--primary); box-shadow: 0 6px 18px -6px rgba(37,99,235,.45); }
.lp-alur-step:nth-child(2) .lp-alur-num-circle { background: var(--accent-deep); box-shadow: 0 6px 18px -6px rgba(217,119,6,.4); }
.lp-alur-step:nth-child(3) .lp-alur-num-circle { background: var(--primary); box-shadow: 0 6px 18px -6px rgba(37,99,235,.45); }
.lp-alur-step:nth-child(4) .lp-alur-num-circle { background: var(--accent-deep); box-shadow: 0 6px 18px -6px rgba(217,119,6,.4); }

.lp-alur-content { padding-top: 10px; }
.lp-alur-step h3 { font-size: 16px; font-weight: 800; margin: 0 0 6px; color: var(--gray-900); line-height: 1.3; }
.lp-alur-step p { font-size: 13.5px; color: var(--gray-500); line-height: 1.65; margin: 0 0 10px; }
.lp-alur-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; border-radius: 8px; padding: 4px 11px; }
.lp-alur-step:nth-child(odd) .lp-alur-tag { color: var(--primary); background: #EFF6FF; }
.lp-alur-step:nth-child(even) .lp-alur-tag { color: var(--accent-deep); background: #FFFBEB; }

.lp-modules { background: var(--gray-50); }
.lp-mod-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.lp-mod-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 16px; padding: 22px; }
.lp-mod-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.lp-mod-card:nth-child(even) .lp-mod-icon { background: var(--accent-deep); }
.lp-mod-card h4 { font-size: 14.5px; font-weight: 800; margin: 0 0 8px; color: var(--gray-900); }
.lp-mod-card p { font-size: 12.5px; color: var(--gray-500); line-height: 1.6; margin: 0; }

/* ── FOOTER ── */
.lp-footer { flex-shrink: 0; background: #0b1220; color: #94a3b8; padding: 52px 32px 0; }
.lp-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.lp-footer-logos img { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; background: #fff; padding: 3px; }
.lp-footer-brand-title { font-size: 13px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #e2e8f0; margin: 0 0 16px; }
.lp-footer-desc { font-size: 13px; line-height: 1.7; color: #94a3b8; max-width: 260px; margin-top: 14px; }
.lp-footer h5 { font-size: 13px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #e2e8f0; margin: 0 0 16px; }
.lp-footer-addr { font-size: 13.5px; line-height: 1.85; color: #94a3b8; margin: 0 0 6px; }
.lp-footer-addr a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.lp-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-footer-links a { font-size: 13.5px; color: #dbeafe; display: flex; align-items: center; gap: 8px; transition: color .15s; }
.lp-footer-links a:hover { color: #e2e8f0; }

.lp-footer-kontak { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lp-footer-kontak li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.6; color: #94a3b8; }
.lp-footer-kontak li svg { flex-shrink: 0; margin-top: 1px; color: #cbd5e1; }

.lp-footer-sosmed-desc { font-size: 13.5px; color: #94a3b8; margin: 0 0 16px; }
.lp-footer-sosmed { display: flex; gap: 10px; }
.lp-footer-sosmed a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; color: #dbeafe; transition: background .15s, color .15s; }
.lp-footer-sosmed a:hover { background: rgba(255,255,255,.14); color: #fff; }
.lp-footer-copy { border-top: 1px solid rgba(255,255,255,.08); padding: 18px 32px; text-align: left; font-size: 12.5px; color: #64748b; position: relative; display: flex; align-items: center; justify-content: flex-start; padding-right: 80px; }
.lp-back-to-top { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); color: #cbd5e1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; text-decoration: none; }
.lp-back-to-top:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); transform: translateY(-50%) translateY(-2px); }
@media (max-width: 640px) {
  .lp-back-to-top { right: 20px; }
}

/* ── MODAL LOGIN ── */
.lp-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.lp-modal-overlay.open { display: flex; }
.lp-modal-overlay .login-card { position: relative; width: 100%; max-width: 380px; max-height: 90vh; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.lp-modal-overlay .login-card::-webkit-scrollbar { display: none; }
.lp-modal-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 8px; border: none; background: var(--gray-100); color: var(--gray-500); cursor: pointer; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.lp-modal-close:hover { background: var(--gray-200); }

@media (max-width: 880px) {
  .lp-nav-links { display: none; }
  .lp-nav-actions { display: none; }
  .lp-hamburger { display: flex; }
  .lp-hero-inner { grid-template-columns: 1fr; padding: 40px 24px; }
  .lp-hero-art { order: -1; max-width: 280px; margin: 0 auto; }
  .lp-hero-copy h1 { font-size: 30px; }
  .lp-stats-inner { grid-template-columns: repeat(2,1fr); gap: 28px 0; padding: 28px 20px; }
  .lp-stat:nth-child(2)::after { display: none; }
  .lp-stat:nth-child(3)::after { display: none; }
  .lp-stat { padding: 0 16px; }
  .lp-section { padding: 56px 20px; }
  .lp-alur { grid-template-columns: 1fr; gap: 40px 0; }
  .lp-alur-art { max-width: 300px; margin: 0 auto; }
  .lp-alur-art img { max-width: 100%; }
  .lp-mod-grid { grid-template-columns: 1fr; }
  .lp-footer { padding: 40px 20px 0; }
  .lp-footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .lp-footer-copy { padding: 18px 20px; }
}