/*
 * Polo Laguna — halaman hadapan awam (index.php sebelum log masuk).
 * Warna datang daripada token tema (--sb-from/--sb-to, --accent, --c-*), jadi ia mengikut tema global.
 */

.lp-hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(60rem 28rem at 85% -10%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 60%),
    radial-gradient(40rem 24rem at 0% 110%, color-mix(in srgb, rgb(var(--c-blue-500)) 45%, transparent), transparent 60%),
    linear-gradient(160deg, var(--sb-from), var(--sb-to));
}
html[data-theme-mode="light"] .lp-hero { color: #fff; }
.lp-hero .lp-art { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 9rem; color: #fff; z-index: -1; }
.lp-hero h1 { font-family: var(--font-head); letter-spacing: -.025em; text-wrap: balance; }
.lp-hero p.lp-tag { text-wrap: balance; color: rgba(255,255,255,.88); }

.lp-orb { position: absolute; border-radius: 9999px; filter: blur(48px); opacity: .35; z-index: -1; pointer-events: none; }
.lp-orb-a { width: 18rem; height: 18rem; right: 8%; top: 10%; background: var(--accent); animation: lp-float 14s ease-in-out infinite; }
.lp-orb-b { width: 14rem; height: 14rem; left: 4%; bottom: 20%; background: rgb(var(--c-blue-400)); animation: lp-float 18s ease-in-out infinite reverse; }
@keyframes lp-float { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-18px,0); } }

.lp-badge {
  display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .875rem; border-radius: 9999px;
  font-size: .8125rem; font-weight: 600; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff;
}
.lp-badge i { width: .5rem; height: .5rem; border-radius: 9999px; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }

.lp-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.5rem;
  border-radius: 1rem; font-weight: 700; background: #fff; color: rgb(var(--c-blue-900)); transition: transform .15s, box-shadow .15s;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.lp-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.28); }
.lp-cta-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.5rem;
  border-radius: 1rem; font-weight: 600; color: #fff; border: 1px solid rgba(255,255,255,.4); transition: background .15s;
}
.lp-cta-ghost:hover { background: rgba(255,255,255,.1); }

.lp-card { transition: transform .18s ease, box-shadow .18s ease; }
@media (hover: hover) { .lp-card:hover { transform: translateY(-2px); } }

.lp-rise { animation: lp-rise .6s cubic-bezier(.2,.7,.2,1) both; }
.lp-rise-2 { animation-delay: .08s; }
.lp-rise-3 { animation-delay: .16s; }
@keyframes lp-rise { from { opacity: 0; transform: translate3d(0,14px,0); } to { opacity: 1; transform: none; } }

.lp-preview-bar { position: sticky; top: 0; z-index: 50; background: #fde68a; color: #78350f; font-size: .8125rem; font-weight: 600; text-align: center; padding: .5rem 1rem; }

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary svg { transform: rotate(90deg); }
details > summary svg { transition: transform .15s; }

@media (prefers-reduced-motion: reduce) {
  .lp-orb, .lp-rise { animation: none !important; }
  .lp-card, .lp-cta { transition: none !important; }
}
html, body { overflow-x: clip; }