/* ADILABA — halaman beranda publik (tenants:beranda), gaya diambil dari
   referensi misc/example-landingpage (navbar sticky, hero dua kolom,
   pembatas gelombang SVG antar-section, kartu fitur, pita CTA warna
   penuh, footer) — TAPI warna/token tetap 100% dari adilaba-theme.css
   (--brand-gradient, --bulma-primary-*, --color-*), tidak ada warna baru
   di file ini. adilaba-theme.css dimuat sebelum file ini (lihat
   base_marketing.html) jadi semua custom property di bawah sudah
   tersedia. */

html {
  scroll-behavior: smooth;
}

.landing-body {
  background: var(--color-page-bg);
}

/* ---------------------------------------------------------------------
   Navbar — SELALU position:fixed (bukan absolute<->fixed lagi) supaya
   satu-satunya yang berubah antara dua keadaan (diatur lewat class
   `.is-scrolled`, toggle oleh static/js/landing.js berdasarkan
   window.scrollY) murni properti yang bisa dianimasikan CSS
   (background/box-shadow/min-height) — `position` sendiri TIDAK bisa
   dianimasikan/di-transition (cuma lompat langsung), jadi kalau masih
   gonta-ganti absolute<->fixed transisinya selalu terasa "nyentak" di
   ujungnya walau warnanya sudah pelan-pelan.
   1) Belum discroll: transparan, DITIMPA di atas .landing-hero (fixed
      di posisi scroll 0 = sama persis dengan absolute di posisi itu,
      jadi tetap terlihat "menimpa" hero tanpa bedanya).
   2) Sudah discroll: `.is-scrolled` menyalakan latar
      var(--brand-gradient) solid + lebih tebal (min-height lebih
      besar) — supaya tetap kelihatan jelas begitu halaman sudah lewat
      dari hero ke section putih di bawahnya.
   Teks/ikon selalu putih di kedua keadaan (sama seperti isi hero) —
   .landing-hero padding-top sudah ditambah secukupnya supaya judul hero
   tidak ketutupan navbar yang menimpanya. */
.landing-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: transparent;
  box-shadow: none;
  min-height: 3.25rem;
  transition: background var(--transition), box-shadow var(--transition),
    min-height var(--transition);
}

.landing-navbar.is-scrolled {
  background: var(--brand-gradient);
  box-shadow: var(--shadow-card);
  /* Navbar lebih "tebal" begitu discroll — meniru bobot visual
     navbar-expand-lg di referensi. min-height di sini adalah CSS
     standar (bukan variabel custom Bulma seperti versi sebelumnya) —
     supaya benar-benar bisa dianimasikan lewat `transition` di atas;
     .navbar-brand/.navbar-item tetap menyesuaikan otomatis lewat flex
     align-items:center bawaan Bulma. */
  min-height: 4.75rem;
}

.landing-navbar .navbar-brand-image {
  height: 34px;
  width: auto;
}

.landing-navbar .navbar-burger {
  color: #fff;
}

/* HP: panel menu yang terbuka harus ikut gradasi brand. Bulma memberi
   .navbar-menu latar putih di layar kecil, dan tanpa ini link putih serta
   tombol Login jadi tidak terlihat di atasnya. */
@media (max-width: 1023px) {
  .landing-navbar .navbar-menu {
    background: var(--brand-gradient);
    box-shadow: var(--shadow-card);
  }

  .landing-navbar .navbar-burger span {
    background-color: #fff;
  }
}

.landing-navbar .navbar-item,
.landing-navbar .navbar-link {
  font-weight: 600;
  color: #fff;
}

/* Hover terlihat "aktif" (warna sama persis dengan .is-active di bawah)
   — .is-active sendiri ditoggle oleh static/js/landing.js (scrollspy,
   IntersectionObserver) mengikuti section mana yang lagi kelihatan di
   layar, bukan cuma section yang terakhir diklik. */
.landing-navbar .navbar-item.is-active,
.landing-navbar .navbar-item:hover,
.landing-navbar .navbar-link.is-active,
.landing-navbar .navbar-link:hover {
  color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l));
  background: transparent;
}

/* ---------------------------------------------------------------------
   Tombol pil — meniru border-radius:100px referensi, dipakai di
   beberapa section (hero, CTA band) di atas .button Bulma yang sudah ada.
------------------------------------------------------------------------ */
.button.is-pill {
  border-radius: 999px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ---------------------------------------------------------------------
   Hero — dua kolom, latar gradien teal->biru brand (sama seperti
   .auth-card-panel.is-intro/.sidebar), pembatas gelombang di bawah.
------------------------------------------------------------------------ */
.landing-hero {
  position: relative;
  background: var(--brand-gradient);
  /* padding-top lebih besar dari sebelumnya (4.5rem) — memberi ruang
     supaya .landing-navbar yang menimpa (position: absolute) di atasnya
     tidak menutupi eyebrow/judul hero. */
  padding: 8.5rem 1.5rem 7rem;
  overflow: hidden;
}

.landing-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.landing-hero-copy {
  flex: 1 1 380px;
  color: #fff;
}

.landing-hero-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1rem;
}

.landing-hero-copy h1 {
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1rem;
}

/* Kata yang berganti-ganti ("Warung / Laundry / Produksi / Langganan")
   — animasi CSS murni (opacity crossfade), tanpa JS/library tambahan
   (beda dari referensi yang pakai animated-headline.js + jQuery). Setiap
   <span> muncul bergiliran lewat delay animasi yang berbeda. */
.landing-hero-rotator {
  position: relative;
  display: inline-block;
  min-width: 9ch;
  height: 1.2em;
  vertical-align: bottom;
  text-align: left;
}

.landing-hero-rotator span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l));
  animation: landing-rotate 14s infinite;
}

/* 7 kata, masing-masing tampil 2 detik secara bergiliran (siklus 14 detik). */
.landing-hero-rotator span:nth-child(1) {
  animation-delay: 0s;
}
.landing-hero-rotator span:nth-child(2) {
  animation-delay: 2s;
}
.landing-hero-rotator span:nth-child(3) {
  animation-delay: 4s;
}
.landing-hero-rotator span:nth-child(4) {
  animation-delay: 6s;
}
.landing-hero-rotator span:nth-child(5) {
  animation-delay: 8s;
}
.landing-hero-rotator span:nth-child(6) {
  animation-delay: 10s;
}
.landing-hero-rotator span:nth-child(7) {
  animation-delay: 12s;
}

/* Kata tampil penuh sampai ~11% siklus (1,6 detik), lalu memudar sampai
   ~14% (2 detik) — sama seperti sebelumnya, dihitung ulang untuk siklus 14s. */
@keyframes landing-rotate {
  0%, 11% {
    opacity: 1;
  }
  14%, 100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero-rotator span {
    animation: none;
    opacity: 0;
  }
  .landing-hero-rotator span:nth-child(1) {
    opacity: 1;
  }
}

.landing-hero-copy p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  max-width: 32rem;
  margin-bottom: 1.75rem;
}

.landing-hero-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.landing-hero-actions .button.is-white {
  color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
  font-weight: 700;
}

.landing-hero-actions .link-cta {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.landing-hero-actions .link-cta:hover {
  color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l));
}

/* Kartu mockup dashboard di sisi kanan hero — pengganti video di
   referensi, dibuat dari elemen ADILABA sendiri (bukan gambar), supaya
   tidak butuh aset baru dan tetap konsisten dengan token warna dashboard
   sungguhan. */
.landing-hero-visual {
  flex: 1 1 320px;
  display: flex;
  justify-content: center;
}

.landing-mock-card {
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px rgba(15, 30, 40, 0.28);
  padding: 1.5rem;
  width: 100%;
  max-width: 360px;
}

.landing-mock-card .landing-mock-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-section-label);
  margin-bottom: 1rem;
}

.landing-mock-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.landing-mock-stat {
  background: var(--color-page-bg);
  border-radius: var(--radius-md);
  padding: 0.85rem;
}

.landing-mock-stat .label {
  display: block;
  font-size: 0.72rem;
  color: var(--color-section-label);
  margin-bottom: 0.25rem;
}

.landing-mock-stat .value {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-heading);
}

.landing-mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-top: 1px solid var(--color-card-border);
  font-size: 0.85rem;
  color: var(--color-heading);
}

.landing-mock-row .tag {
  border-radius: 999px;
}

/* Gelombang pemisah antar-section — satu SVG dipakai berulang lewat
   `currentColor`, warnanya disetel lewat `color` di parent tiap
   pemanggilan supaya transisinya pas ke background section berikutnya. */
/* Warna gelombang harus sama dengan section di bawah hero (#tentang, yang
   memakai .landing-section-bg = --color-card-bg), bukan --color-page-bg. */
.landing-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  line-height: 0;
  color: var(--color-card-bg);
}

.landing-wave svg {
  display: block;
  width: 100%;
  height: 60px;
}

/* ---------------------------------------------------------------------
   Section umum
------------------------------------------------------------------------ */
.landing-section {
  padding: 5rem 1.5rem;
}

.landing-section-bg {
  background: var(--color-card-bg);
}

.landing-section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.landing-section-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3rem;
}

.landing-section-heading .landing-hero-eyebrow {
  color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
  background: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 94%);
}

.landing-section-heading h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--color-heading);
  margin-bottom: 0.75rem;
}

.landing-section-heading p {
  color: var(--color-section-label);
  font-size: 1rem;
}

/* ---------------------------------------------------------------------
   Kartu fitur ("Kenapa ADILABA")
------------------------------------------------------------------------ */
.feature-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.75rem;
  height: 100%;
  transition: transform var(--transition), box-shadow var(--transition);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.feature-card .feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  background: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 94%);
  color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
}

.feature-card .feature-icon svg {
  width: 24px;
  height: 24px;
}

.feature-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}

.feature-card p {
  font-size: 0.9rem;
  color: var(--color-section-label);
  margin: 0;
}

/* ---------------------------------------------------------------------
   Pola usaha — kartu mirip tenants:onboarding_pola tapi statis
   (informasi, bukan pilihan radio).
------------------------------------------------------------------------ */
.pattern-info-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  height: 100%;
}

.pattern-info-card .pattern-info-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--bulma-link-h), var(--bulma-link-s), 94%);
  color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l));
}

.pattern-info-card .pattern-info-icon svg {
  width: 22px;
  height: 22px;
}

.pattern-info-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 0.3rem;
}

.pattern-info-card p {
  font-size: 0.85rem;
  color: var(--color-section-label);
  margin: 0;
}

/* ---------------------------------------------------------------------
   Harga / paket — 3 kartu (DASAR, USAHA, LENGKAP). Saat disorot kursor,
   kartu perlahan membesar dan gradasi brand memudar masuk (dibuat pelan
   supaya terasa tenang, bukan tiba-tiba).
------------------------------------------------------------------------ */
.pricing-card {
  position: relative;
  isolation: isolate;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 2rem 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition:
    transform 1s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 1s ease,
    border-color 1s ease;
}

/* Lapisan gradasi brand, dipisah dari background supaya bisa memudar
   (background gradasi tidak bisa di-transisi langsung). */
.pricing-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--brand-gradient);
  opacity: 0;
  transition: opacity 1s ease;
  z-index: -1;
}

.pricing-card:hover {
  transform: scale(1.02);
  border-color: transparent;
  box-shadow: 0 20px 40px rgba(15, 30, 40, 0.22);
}

.pricing-card:hover::before {
  opacity: 1;
}

.pricing-card .pricing-level,
.pricing-card .pricing-tagline,
.pricing-card .pricing-price,
.pricing-card ul.pricing-quota-list li,
.pricing-card ul.pricing-quota-list li span:first-child {
  transition: color 1s ease, border-color 1s ease;
}

.pricing-card .pricing-level {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
}

.pricing-card .pricing-tagline {
  font-size: 0.8rem;
  color: var(--color-section-label);
  margin-bottom: 1.25rem;
}

.pricing-card .pricing-price {
  font-size: 1.3rem;
  font-weight: 800;
  color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
  margin-bottom: 1.5rem;
}

.pricing-card ul.pricing-quota-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  text-align: left;
  flex-grow: 1;
}

.pricing-card ul.pricing-quota-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-card-border);
  font-size: 0.85rem;
  color: var(--color-heading);
}

.pricing-card ul.pricing-quota-list li span:first-child {
  color: var(--color-section-label);
}

/* Teks ikut berubah jadi putih saat gradasi aktif. */
.pricing-card:hover .pricing-level,
.pricing-card:hover .pricing-price,
.pricing-card:hover ul.pricing-quota-list li {
  color: #fff;
}

.pricing-card:hover .pricing-tagline,
.pricing-card:hover ul.pricing-quota-list li span:first-child {
  color: rgba(255, 255, 255, 0.85);
}

.pricing-card:hover ul.pricing-quota-list li {
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

/* Pengguna yang mematikan animasi di sistemnya tidak perlu zoom. */
@media (prefers-reduced-motion: reduce) {
  .pricing-card,
  .pricing-card::before {
    transition: none;
  }

  .pricing-card:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------
   Pita CTA — pita warna penuh (referensi: "Get our newsletter").
------------------------------------------------------------------------ */
.landing-cta-band {
  position: relative;
  background: var(--brand-gradient);
  padding: 4rem 1.5rem;
  text-align: center;
  color: #fff;
}

.landing-cta-band h2 {
  color: #fff;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  margin-bottom: 0.75rem;
}

.landing-cta-band p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 34rem;
  margin: 0 auto 1.75rem;
}

/* ---------------------------------------------------------------------
   Footer
------------------------------------------------------------------------ */
.landing-footer {
  /* Navy tetap (bukan var(--color-heading)) dengan sengaja — token itu
     dibalik jadi TERANG di mode gelap (dipakai untuk teks judul di atas
     kartu gelap), jadi kalau dipakai sebagai warna latar di sini,
     footer-nya berubah terang sementara teksnya tetap putih dan hilang
     tak terbaca. Footer ini didesain gelap permanen, sama seperti
     .app-shell/.sidebar yang juga tidak ikut membalik warna. */
  background: #253141;
  color: rgba(255, 255, 255, 0.75);
  padding: 3rem 1.5rem 2rem;
}

.landing-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.landing-footer-brand {
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 0.5rem;
}

.landing-footer-inner p {
  max-width: 22rem;
  font-size: 0.9rem;
}

.landing-footer-links {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}

.landing-footer-links h4 {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.9rem;
}

.landing-footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-footer-links li {
  margin-bottom: 0.6rem;
}

.landing-footer-links a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.88rem;
}

.landing-footer-links a:hover {
  color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l));
}

.landing-footer-copyright {
  max-width: 1100px;
  margin: 1.5rem auto 0;
  font-size: 0.8rem;
  text-align: center;
}

@media (max-width: 768px) {
  .landing-hero {
    padding: 7rem 1.25rem 5.5rem;
    text-align: center;
  }

  .landing-hero-inner {
    flex-direction: column;
  }

  .landing-hero-actions {
    justify-content: center;
  }

  .landing-hero-rotator {
    text-align: left;
  }

  .landing-section {
    padding: 3.5rem 1.25rem;
  }
}