/* OKTA payment — Landing v2 (layout baru). Dimuat setelah landing.css */
.lp { background: var(--c-bg); color: var(--c-text); }
.lp .pg-btn { padding: .8rem 1.35rem; display: inline-flex; align-items: center; }

/* Nav: pill melayang */
.lp-nav { position: sticky; top: 12px; z-index: 50; max-width: 1120px; margin: 12px auto 0; padding: 8px 10px 8px 18px;
  display: flex; align-items: center; gap: 24px; border-radius: 999px;
  background: rgba(var(--rgb-card), .82); backdrop-filter: blur(14px); border: 1px solid rgba(var(--rgb-fg), .09); box-shadow: var(--shadow); }
.lp-brand { display: flex; align-items: center; gap: 10px; font: 800 1.05rem var(--font-heading); color: var(--c-strong); }
.lp-brand .pg-logo img { height: 28px; width: auto; }
.lp-links { display: flex; gap: 6px; margin-left: 12px; }
.lp-links a { padding: .5rem .9rem; border-radius: 999px; color: var(--c-text-2); font-weight: 600; font-size: .92rem; }
.lp-links a:hover { background: rgba(var(--rgb-fg), .06); color: var(--c-strong); }
.lp-nav-cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lp-link-quiet { padding: .5rem .9rem; font-weight: 600; color: var(--c-text-2); }

/* Hero: teks kiri, kartu checkout kanan */
.lp-hero { max-width: 1120px; margin: 0 auto; padding: 72px 20px 88px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.lp-hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.3rem); line-height: 1.02; color: var(--c-strong); margin: 0 0 20px; text-align: left; }
.lp-hero-text > p { font-size: 1.1rem; line-height: 1.65; color: var(--c-text-2); max-width: 34rem; margin: 0 0 30px; text-align: left; }
.lp-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lp-facts { display: flex; margin: 44px 0 0; padding-top: 22px; border-top: 1px solid rgba(var(--rgb-fg), .1); gap: 0; }
.lp-facts > div { padding: 0 28px; border-left: 1px solid rgba(var(--rgb-fg), .1); }
.lp-facts > div:first-child { padding-left: 0; border-left: 0; }
.lp-facts dt { font-size: .8rem; color: var(--c-muted); margin-bottom: 2px; }
.lp-facts dd { margin: 0; font: 700 1.05rem var(--font-heading); color: var(--c-strong); }

.lp-stage { position: relative; min-height: 520px; display: grid; place-items: center; }
.lp-stage::before { content: ""; position: absolute; inset: 6% 4% 6% 10%; border-radius: 2.5rem; background: hsl(var(--accent) / .9); transform: rotate(4deg); }
.lp-checkout { position: relative; width: min(320px, 82%); padding: 22px; border-radius: 1.75rem; background: var(--c-card); box-shadow: var(--shadow-lg); border: 1px solid rgba(var(--rgb-fg), .08); transform: rotate(-2deg); }
.lp-co-top { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--c-muted); }
.lp-co-store { font-weight: 700; color: var(--c-strong); }
.lp-co-timer { padding: 3px 9px; border-radius: 999px; background: hsl(var(--accent) / .22); color: #7a4b00; font-weight: 600; }
.lp-co-amount { font: 800 2rem var(--font-heading); color: var(--c-strong); margin: 16px 0; letter-spacing: -.03em; }
.lp-qr { display: block; width: 100%; padding: 14px; border-radius: 1rem; background: #fff; fill: #0c1534; }
.lp-qr .lp-qr-gap { fill: #fff; }
.lp-co-methods { display: flex; gap: 6px; margin-top: 16px; }
.lp-co-methods span { flex: 1; text-align: center; padding: 8px 0; border-radius: .6rem; font-size: .8rem; font-weight: 700; background: var(--c-card-2); color: var(--c-muted); }
.lp-co-methods .on { background: hsl(var(--primary)); color: #fff; }
.lp-float { position: absolute; z-index: 2; padding: 12px 16px; border-radius: 1rem; background: var(--c-card); box-shadow: var(--shadow-lg); border: 1px solid rgba(var(--rgb-fg), .08); }
.lp-float-balance { top: 6%; right: -2%; }
.lp-float-balance span { display: block; font-size: .75rem; color: var(--c-muted); }
.lp-float-balance strong { font: 800 1.15rem var(--font-heading); color: var(--c-strong); }
.lp-float-paid { bottom: 7%; left: -2%; display: flex; gap: 10px; align-items: center; }
.lp-float-paid strong { display: block; font-size: .85rem; color: var(--c-strong); }
.lp-float-paid span:not(.lp-tick) { font-size: .75rem; color: var(--c-muted); }
.lp-tick { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: hsl(var(--success)); color: #fff; font-weight: 800; flex: none; }

/* Section */
.lp-section { max-width: 1120px; margin: 0 auto; padding: 56px 20px; }
.lp-h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.1; max-width: 22ch; margin: 0 0 36px; color: var(--c-strong); text-align: left; }

/* Bento fitur */
.lp-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lp-tile { padding: 26px; border-radius: 1.5rem; background: var(--c-card); border: 1px solid rgba(var(--rgb-fg), .08); }
.lp-tile-1, .lp-tile-6 { grid-column: span 2; }
.lp-tile-1 { background: hsl(var(--primary)); color: #fff; }
.lp-tile-1 h3, .lp-tile-1 p { color: #fff; }
.lp-tile-1 .lp-tile-icon { background: rgba(255,255,255,.18); color: #fff; }
.lp-tile-6 { background: var(--c-card-2); }
.lp-tile-icon { width: 46px; height: 46px; border-radius: .9rem; display: grid; place-items: center; margin-bottom: 38px; background: hsl(var(--accent) / .22); color: #7a4b00; }
.lp-tile-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-tile h3 { font-size: 1.2rem; margin: 0 0 8px; color: var(--c-strong); }
.lp-tile p { margin: 0; line-height: 1.6; color: var(--c-text-2); }

/* Langkah */
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: s; border-top: 2px solid var(--c-strong); }
.lp-steps li { padding: 24px 28px 0 0; }
.lp-steps li + li { padding-left: 28px; border-left: 1px solid rgba(var(--rgb-fg), .12); }
.lp-step-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-strong); color: var(--c-bg); font-weight: 800; margin-bottom: 14px; }
.lp-steps h3 { font-size: 1.15rem; margin: 0 0 8px; color: var(--c-strong); }
.lp-steps p { margin: 0; line-height: 1.6; color: var(--c-text-2); }

/* Foto */
.lp-people { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: start; }
.lp-shot { margin: 0; }
.lp-shot img { width: 100%; height: auto; display: block; border-radius: 1.5rem; }
.lp-shot-b { margin-top: 56px; }
.lp-shot figcaption { margin-top: 12px; font-size: .92rem; line-height: 1.5; color: var(--c-text-2); }
.lp-shot figcaption strong { display: block; color: var(--c-strong); }

/* Band CTA */
.lp-band { background: #0c1534; color: #fff; margin-top: 40px; }
.lp-band-inner { max-width: 1120px; margin: 0 auto; padding: 64px 20px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.lp-band h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 0 0 8px; color: #fff; }
.lp-band p { margin: 0; color: #b9c2ea; }
.lp-band-btn { background: hsl(var(--accent)); color: #3a2500 !important; border-radius: 999px; font-weight: 700; }

@media (max-width: 900px) {
  .lp-hero { grid-template-columns: 1fr; padding-top: 40px; gap: 36px; }
  .lp-stage { min-height: 460px; }
  .lp-bento { grid-template-columns: repeat(2, 1fr); }
  .lp-steps { grid-template-columns: 1fr; border-top: 0; }
  .lp-steps li, .lp-steps li + li { padding: 20px 0; border-left: 0; border-top: 2px solid var(--c-strong); }
  .lp-people { grid-template-columns: 1fr; }
  .lp-shot-b { margin-top: 0; }
}
@media (max-width: 640px) {
  .lp-links, .lp-link-quiet { display: none; }
  .lp-nav { margin: 8px 10px 0; }
  .lp-facts > div { padding: 0 14px; }
  .lp-bento { grid-template-columns: 1fr; }
  .lp-tile-1, .lp-tile-6 { grid-column: auto; }
  .lp-float-balance { right: 0; } .lp-float-paid { left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .lp-checkout { animation: lp-in .7s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes lp-in { from { opacity: 0; transform: translateY(24px) rotate(-2deg); } }
}