/* ==========================================================================
   Learning With Badri — Hero beranda (gaya Lithos)
   Hero layar penuh, gelap, dengan spotlight yang mengikuti kursor dan
   membuka gambar kedua. Nilai mengikuti spesifikasi Tailwind aslinya;
   breakpoint: sm 640px, md 768px.
   ========================================================================== */

.lx-font-playfair { font-family: 'Playfair Display', serif; }
.lx-root { letter-spacing: -0.02em; }
.lx-nav, .lx-nav *, .lx-hero, .lx-hero * { font-family: 'Inter', sans-serif; }
.lx-root .lx-font-playfair { font-family: 'Playfair Display', serif; }

/* --- Animasi masuk --- */
@keyframes heroReveal { 0%{opacity:0;transform:translateY(28px);filter:blur(12px)} 100%{opacity:1;transform:translateY(0);filter:blur(0)} }
@keyframes heroFadeUp { 0%{opacity:0;transform:translateY(20px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes heroZoom { 0%{transform:scale(1.12)} 100%{transform:scale(1)} }
.hero-anim { opacity:0; animation-fill-mode:forwards; animation-timing-function:cubic-bezier(0.16,1,0.3,1); }
.hero-reveal { animation-name:heroReveal; animation-duration:1.1s; }
.hero-fade { animation-name:heroFadeUp; animation-duration:1s; }
.hero-zoom { animation:heroZoom 1.8s cubic-bezier(0.16,1,0.3,1) forwards; }
@media (prefers-reduced-motion: reduce){ .hero-anim,.hero-zoom{ animation:none; opacity:1; } }

/* --- Navigasi --- */
.lx-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px;
  transition: background-color 300ms ease, backdrop-filter 300ms ease;
}
/* Setelah melewati hero, beri latar supaya teks putih tetap terbaca */
.lx-nav.is-scrolled { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.lx-brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.lx-wordmark { color: #fff; font-size: 24px; line-height: 32px; font-style: italic; }

.lx-pill {
  display: none;
  position: absolute; left: 50%; transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px; padding: 8px;
  align-items: center; gap: 4px;
}
.lx-pill a {
  padding: 6px 16px; border-radius: 9999px;
  font-size: 14px; line-height: 20px; font-weight: 500;
  color: rgba(255, 255, 255, 0.8); text-decoration: none; white-space: nowrap;
  transition: color 150ms cubic-bezier(0.4,0,0.2,1), background-color 150ms cubic-bezier(0.4,0,0.2,1);
}
.lx-pill a:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.lx-pill a[aria-current="page"] { color: #fff; }
.lx-pill a[aria-current="page"]:hover { background: transparent; }

.lx-signup {
  display: none;
  background: #fff; color: #111827;
  font-size: 14px; line-height: 20px; font-weight: 600;
  padding: 10px 24px; border-radius: 9999px; text-decoration: none; white-space: nowrap;
}
.lx-signup:hover { background: #f3f4f6; }

.lx-burger {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; padding: 8px; border-radius: 9999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.lx-burger svg { width: 20px; height: 20px; }
.lx-menu {
  position: absolute; top: 100%; left: 16px; right: 16px; margin-top: 4px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px; padding: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.lx-menu[hidden] { display: none; }
.lx-menu a {
  padding: 12px 16px; border-radius: 16px; font-size: 14px; font-weight: 500;
  color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: background-color 150ms ease;
}
.lx-menu a:hover { background: rgba(255, 255, 255, 0.15); }
.lx-menu a[aria-current="page"] { color: #fff; }
.lx-menu .lx-menu-cta {
  margin-top: 8px; background: #fff; color: #111827; text-align: center;
  font-weight: 600; padding: 12px 24px; border-radius: 9999px;
}
.lx-menu .lx-menu-cta:hover { background: #f3f4f6; }

@media (min-width: 640px) { .lx-nav { padding: 20px; } }
@media (min-width: 1100px) {   /* menu tengah butuh ruang; di bawah ini pakai hamburger */
  .lx-pill { display: flex; }
  .lx-signup { display: block; }
  .lx-burger, .lx-menu { display: none !important; }
}

/* --- Hero --- */
.lx-hero { position: relative; width: 100%; overflow: hidden; height: 100vh; height: 100dvh; background: #000; }
.lx-layer { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; }
.lx-base { z-index: 10; }
.lx-reveal { z-index: 30; pointer-events: none; }
.lx-canvas { position: absolute; inset: 0; pointer-events: none; display: none; }

.lx-heading {
  position: absolute; top: 14%; left: 0; right: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-inline: 20px; pointer-events: none;
}
.lx-heading h1 { margin: 0; color: #fff; line-height: 0.95; font-weight: 400; }
.lx-line { display: block; font-weight: 400; font-size: 48px; line-height: 1; }
.lx-line-1 { font-style: italic; letter-spacing: -0.05em; }
.lx-line-2 { margin-top: -4px; letter-spacing: -0.08em; }

.lx-left {
  display: none; position: absolute; z-index: 50;
  bottom: 56px; left: 40px; max-width: 260px;
}
.lx-left p { margin: 0; font-size: 14px; line-height: 1.625; color: rgba(255, 255, 255, 0.8); }

.lx-right {
  position: absolute; z-index: 50;
  bottom: 40px; left: 20px; right: 20px; max-width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.lx-right p { margin: 0; font-size: 12px; line-height: 1.625; color: rgba(255, 255, 255, 0.8); }

.lx-cta {
  display: inline-block;
  background: #e8702a; color: #fff;
  font-size: 14px; line-height: 20px; font-weight: 500;
  padding: 12px 28px; border-radius: 9999px; text-decoration: none; cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lx-cta:hover {
  background: #d2611f; transform: scale(1.03);
  box-shadow: 0 10px 15px -3px rgba(232, 112, 42, 0.3), 0 4px 6px -4px rgba(232, 112, 42, 0.3);
}
.lx-cta:active { transform: scale(0.95); }

@media (min-width: 640px) {
  .lx-line { font-size: 72px; }
  .lx-left { display: block; }
  .lx-right { bottom: 96px; left: auto; right: 40px; max-width: 260px; gap: 20px; }
  .lx-right p { font-size: 14px; line-height: 1.625; }
}
@media (min-width: 768px) {
  .lx-line { font-size: 96px; }
  .lx-left { left: 56px; }
  .lx-right { right: 56px; }
}

/* Grup kanan: tombol mode + Masuk / menu */
.lx-actions { display: flex; align-items: center; gap: 10px; }
.lx-nav .theme-toggle {
  width: 38px; height: 38px; color: #fff;
  background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.lx-nav .theme-toggle:hover { background: #fff; color: #111827; }