/* ============================================================
   BERANDA TAMU — "Horizon" (landing publik, sebelum login)
   ------------------------------------------------------------
   Dipakai HANYA untuk pengunjung yang belum login (lihat cabang
   di index.php: guest -> pages/beranda-guest.php). Yang sudah
   login tetap memakai beranda React lama (assets/css/beranda.css).

   Konsep: hero SINEMATIK yang "pinned" (position:sticky) — foto
   brand diam full-layar sementara teks parallax naik & overlay
   makin gelap saat discroll, lalu "lepas" ke kanvas modul gelap.
   Smooth scroll: Lenis (assets/js/vendor/lenis.min.js) + parallax
   digerakkan scroll (transform/opacity saja) di beranda-guest.js.

   Prefix .hzn- supaya TIDAK bentrok dengan style global app
   (.card/.btn/.wrap dsb sudah dipakai di tempat lain).

   Tema: ikut konvensi app (html[data-theme="dark"]), BUKAN
   prefers-color-scheme — token default = terang, di-override saat
   data-theme="dark". Poppins sudah dimuat global di index.php.

   PENTING: .hzn pakai overflow-x:CLIP (bukan hidden). `hidden`
   memaksa overflow-y jadi auto -> jadi scroll-container -> mematikan
   position:sticky hero-nya. `clip` membatasi geser horizontal tanpa
   membuat scroll-container, jadi sticky tetap hidup.

   Full-bleed: .hzn margin:-30px membatalkan padding .main (30/20px).
============================================================ */

.hzn{
  /* ── token TERANG (default) ── */
  --bg:#EEF3FB;
  --bg-2:#E4ECF8;
  --surface:#FFFFFF;
  --surface-2:#F3F7FD;
  --ink:#0B1A38;
  --ink-soft:#3E4E6B;
  --ink-mute:#697998;
  --line:rgba(11,26,56,.10);
  --line-2:rgba(11,26,56,.06);
  --accent:#2563EB;
  --accent-bright:#3B82F6;
  --accent-soft:rgba(37,99,235,.12);
  --shadow:0 1px 2px rgba(11,26,56,.05),0 18px 40px -24px rgba(11,26,56,.28);
  --shadow-lg:0 30px 70px -40px rgba(8,16,38,.55);
  --band:#0B1A38;
  --c-blue:#2563EB; --c-green:#16A34A; --c-purple:#7C3AED;
  --c-orange:#EA580C; --c-red:#DC2626; --c-teal:#0D9488;

  margin:-30px;               /* full-bleed: batalkan padding .main */
  font-family:'Poppins',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;            /* JANGAN hidden (mematikan sticky) */
}
.hzn *,.hzn *::before,.hzn *::after{box-sizing:border-box}
.hzn img{max-width:100%;display:block}
.hzn a{color:inherit;text-decoration:none}
.hzn h1,.hzn h2,.hzn h3,.hzn p,.hzn ul{margin:0}
.hzn ul{list-style:none;padding:0}
.hzn svg{display:block}
.hzn a:focus-visible,.hzn button:focus-visible{
  outline:2.5px solid var(--accent-bright);
  outline-offset:3px;border-radius:6px;
}

/* ── token GELAP ── */
html[data-theme="dark"] .hzn{
  --bg:#081026;
  --bg-2:#0A1430;
  --surface:#0F1D3B;
  --surface-2:#132447;
  --ink:#E9EFFB;
  --ink-soft:#A9BADB;
  --ink-mute:#7488AE;
  --line:rgba(147,197,253,.14);
  --line-2:rgba(147,197,253,.08);
  --accent:#3B82F6;
  --accent-bright:#60A5FA;
  --accent-soft:rgba(96,165,250,.16);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 24px 50px -30px rgba(0,0,0,.7);
  --shadow-lg:0 40px 90px -50px rgba(0,0,0,.85);
  --band:#060D20;
  --c-blue:#3B82F6; --c-green:#22C55E; --c-purple:#9061F9;
  --c-orange:#F97316; --c-red:#EF4444; --c-teal:#14B8A6;
}

.hzn-wrap{width:min(1180px,100% - 2.4rem);margin-inline:auto}

/* shared bits */
.hzn-eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase}
.hzn-label{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
}
.hzn-label::before{content:"";width:26px;height:1.5px;background:var(--accent);display:inline-block;border-radius:2px}

/* ============================================================
   HERO — pinned sinematik
============================================================ */
.hzn-hero{position:relative;height:220vh}
.hzn-pin{
  position:sticky;top:0;
  height:100vh;height:100svh;
  overflow:hidden;                 /* aman: clip di elemen sticky itu sendiri */
  display:flex;align-items:center;
}
.hzn-photo{
  position:absolute;inset:-6% -2% -6% -2%;
  background-size:cover;background-position:center 42%;
  transform:scale(1.04);
  will-change:transform;
  background-color:#0B1A38;        /* fallback sebelum foto termuat */
}
.hzn-overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(59,130,246,.30), transparent 55%),
    linear-gradient(180deg, rgba(6,13,32,.32) 0%, rgba(6,13,32,.55) 46%, rgba(6,13,32,.92) 100%),
    linear-gradient(90deg, rgba(6,13,32,.72) 0%, rgba(6,13,32,.20) 60%, transparent 100%);
  will-change:opacity;
}
.hzn-glow{
  position:absolute;top:-14%;right:-8%;
  width:46vw;height:46vw;max-width:640px;max-height:640px;
  background:radial-gradient(circle, rgba(96,165,250,.42), transparent 66%);
  filter:blur(50px);pointer-events:none;
}
.hzn-hero-content{
  position:relative;z-index:3;
  width:min(1180px,100% - 2.4rem);margin-inline:auto;
  color:#F4F8FF;will-change:transform,opacity;
}
.hzn-hero-inner{max-width:760px}
.hzn-hero .hzn-eyebrow{
  color:#BFD6FF;margin-bottom:clamp(1.4rem,2.6vw,2.1rem);display:inline-flex;align-items:center;gap:.6rem;
}
.hzn-hero .hzn-eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;background:#60A5FA;box-shadow:0 0 0 4px rgba(96,165,250,.25);
}
.hzn-hero-inner .hzn-title{
  font-weight:800;line-height:1.15;letter-spacing:-.02em;
  font-size:clamp(2.5rem,7.2vw,5rem);
  text-shadow:0 8px 40px rgba(0,0,0,.45);margin-bottom:clamp(1rem,2vw,1.6rem);text-wrap:balance;
}
.hzn-hero-inner .hzn-sub{
  font-size:clamp(1rem,1.5vw,1.22rem);line-height:1.8;color:#D5E2F6;max-width:46ch;font-weight:300;margin-bottom:clamp(1.2rem,2.2vw,1.8rem);
}
.hzn-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.hzn-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.4rem;border-radius:999px;font-weight:600;font-size:.95rem;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.hzn-btn svg{width:18px;height:18px}
.hzn-btn-primary{
  background:linear-gradient(135deg,#3B82F6,#2563EB);color:#fff;
  box-shadow:0 14px 34px -14px rgba(59,130,246,.9);
}
.hzn-btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 44px -16px rgba(59,130,246,1)}
.hzn-btn-ghost{
  background:rgba(255,255,255,.08);color:#EAF1FF;border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.hzn-btn-ghost:hover{transform:translateY(-3px);background:rgba(255,255,255,.16)}
.hzn-hero-inner .hzn-stats{
  display:flex;flex-wrap:wrap;gap:clamp(2.2rem,4.5vw,3.6rem);
  padding-top:clamp(1.2rem,2vw,1.6rem);border-top:1px solid rgba(255,255,255,.16);max-width:640px;
}
.hzn-stats .num{
  font-size:clamp(2rem,3.6vw,2.7rem);font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;color:#fff;letter-spacing:-.02em;
}
.hzn-stats .lbl{display:block;margin-top:.55rem;font-size:.8rem;color:#B7CAE8;letter-spacing:.03em}
.hzn-progress{position:absolute;left:0;bottom:0;z-index:4;width:100%;height:3px;background:rgba(255,255,255,.12)}
.hzn-progress span{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,#60A5FA,#3B82F6);will-change:transform;
}
.hzn-hint{
  position:absolute;left:50%;bottom:1.4rem;z-index:4;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  color:#BFD6FF;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;will-change:opacity;
}
.hzn-hint svg{width:20px;height:20px;animation:hzn-bob 1.8s ease-in-out infinite}
@keyframes hzn-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* hero entrance (sekali saat load) */
.hzn-lyr{opacity:0;transform:translateY(26px)}
.hzn-hero.is-ready .hzn-lyr{opacity:1;transform:translateY(0);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.hzn-hero.is-ready .hzn-l1{transition-delay:.15s}
.hzn-hero.is-ready .hzn-l2{transition-delay:.30s}
.hzn-hero.is-ready .hzn-l3{transition-delay:.48s}
.hzn-hero.is-ready .hzn-l4{transition-delay:.62s}
.hzn-hero.is-ready .hzn-l5{transition-delay:.76s}

/* ============================================================
   MODUL — kanvas gelap
============================================================ */
.hzn-modul{
  position:relative;
  background:radial-gradient(120% 60% at 50% -10%, rgba(59,130,246,.10), transparent 60%), var(--band);
  color:#E9EFFB;padding:clamp(4rem,9vw,7rem) 0 clamp(4rem,8vw,6.5rem);
}
.hzn-modul .hzn-label{color:#7FB0FF}
.hzn-modul .hzn-label::before{background:#7FB0FF}
.hzn-sec-head{max-width:640px;margin-bottom:2.8rem}
.hzn-sec-head h2{font-weight:800;letter-spacing:-.02em;line-height:1.05;font-size:clamp(1.9rem,4.4vw,3rem);margin:.7rem 0 .6rem;color:#F4F8FF;text-wrap:balance}
.hzn-sec-head p{color:#A9BADB;font-size:1.02rem;font-weight:300;max-width:52ch}

/* featured lead panel */
.hzn-featured{
  position:relative;overflow:hidden;border-radius:24px;
  background:linear-gradient(135deg, rgba(37,99,235,.22), rgba(15,29,59,.6));
  border:1px solid rgba(96,165,250,.28);box-shadow:var(--shadow-lg);
  display:grid;grid-template-columns:1.15fr .85fr;margin-bottom:2.4rem;
}
.hzn-featured-body{padding:clamp(1.6rem,3vw,2.6rem);position:relative;z-index:2}
.hzn-featured-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg,#3B82F6,#2563EB);padding:.34rem .7rem;border-radius:999px;margin-bottom:1.1rem;
}
.hzn-featured-badge svg{width:13px;height:13px}
.hzn-featured h3{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:-.02em;color:#F4F8FF;margin-bottom:.7rem}
.hzn-featured p{color:#C7D6EF;max-width:42ch;font-weight:300;margin-bottom:1.5rem}
.hzn-ic-badge{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:1.2rem;
  background:rgba(96,165,250,.16);border:1px solid rgba(96,165,250,.4);color:#8FBBFF;
}
.hzn-ic-badge svg{width:26px;height:26px}
.hzn-featured-chart{position:relative;min-height:200px;display:flex;align-items:flex-end;border-left:1px solid rgba(96,165,250,.2)}
.hzn-featured-chart svg{width:100%;height:100%;display:block}
.hzn-featured .hzn-btn-primary{margin-top:.4rem}

/* module grid */
.hzn-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(3,1fr)}
.hzn-card{
  --dot:var(--accent);position:relative;overflow:hidden;
  background:rgba(255,255,255,.03);border:1px solid rgba(147,197,253,.12);border-radius:18px;
  padding:1.5rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:.7rem;
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .35s ease,background .35s ease;
}
.hzn-card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--dot);opacity:.85;
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.hzn-card:hover{
  transform:translateY(-6px);background:rgba(255,255,255,.055);
  border-color:color-mix(in srgb,var(--dot) 55%,transparent);box-shadow:0 26px 50px -30px var(--dot);
}
.hzn-card:hover::after{transform:scaleX(1)}
.hzn-card-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.hzn-card-ic{
  width:42px;height:42px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;color:var(--dot);
  background:color-mix(in srgb,var(--dot) 16%,transparent);border:1px solid color-mix(in srgb,var(--dot) 32%,transparent);
}
.hzn-card-ic svg{width:22px;height:22px}
.hzn-card-tag{
  font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dot);
  border:1px solid color-mix(in srgb,var(--dot) 40%,transparent);padding:.2rem .5rem;border-radius:999px;
}
.hzn-card h4{display:flex;align-items:center;gap:.5rem;font-size:1.06rem;font-weight:600;color:#F1F6FF}
.hzn-card .hzn-dot{width:8px;height:8px;border-radius:50%;background:var(--dot);flex:0 0 auto}
.hzn-card p{font-size:.88rem;color:#9FB2D4;font-weight:300;line-height:1.5}
.hzn-card-go{
  margin-top:auto;padding-top:.6rem;display:inline-flex;align-items:center;gap:.35rem;
  font-size:.78rem;font-weight:600;color:var(--dot);opacity:0;transform:translateX(-6px);
  transition:opacity .3s ease,transform .3s ease;
}
.hzn-card:hover .hzn-card-go{opacity:1;transform:translateX(0)}
.hzn-card-go svg{width:15px;height:15px}

.hzn-blue{--dot:var(--c-blue)} .hzn-green{--dot:var(--c-green)}
.hzn-purple{--dot:var(--c-purple)} .hzn-orange{--dot:var(--c-orange)}
.hzn-red{--dot:var(--c-red)} .hzn-teal{--dot:var(--c-teal)}

/* ============================================================
   TENTANG — band terang mengikuti tema
============================================================ */
.hzn-tentang{background:var(--bg);padding:clamp(4rem,9vw,7rem) 0}
.hzn-tentang .hzn-sec-head h2{color:var(--ink)}
.hzn-tentang .hzn-sec-head p{color:var(--ink-soft)}
.hzn-values{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.hzn-val{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.7rem 1.5rem;
  box-shadow:var(--shadow);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;
}
.hzn-val:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.hzn-val-ic{
  width:46px;height:46px;border-radius:13px;margin-bottom:1.1rem;display:grid;place-items:center;color:var(--accent);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
}
.hzn-val-ic svg{width:24px;height:24px}
.hzn-val h3{font-size:1.08rem;font-weight:600;color:var(--ink);margin-bottom:.45rem}
.hzn-val p{font-size:.9rem;color:var(--ink-soft);font-weight:300}

/* ============================================================
   CTA BAND — funnel Masuk / Daftar
============================================================ */
.hzn-cta-band{position:relative;overflow:hidden;background:linear-gradient(130deg,#1D4ED8,#2563EB 55%,#3B82F6);color:#fff}
html[data-theme="dark"] .hzn-cta-band{background:linear-gradient(130deg,#12275C,#1D4ED8 60%,#2563EB)}
.hzn-cta-band::before{
  content:"";position:absolute;top:-40%;right:-6%;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 66%);pointer-events:none;
}
.hzn-cta-inner{
  position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.6rem;padding:clamp(2.4rem,5vw,3.6rem) 0;
}
.hzn-cta-copy{max-width:34ch}
.hzn-cta-copy h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
.hzn-cta-copy p{margin-top:.6rem;color:rgba(255,255,255,.82);font-weight:300;font-size:1rem}
.hzn-cta-actions{display:flex;flex-wrap:wrap;gap:.85rem}
.hzn-cta-actions .hzn-btn-primary{background:#fff;color:#12275C;box-shadow:0 16px 34px -16px rgba(0,0,0,.5)}
.hzn-cta-actions .hzn-btn-primary:hover{box-shadow:0 22px 44px -16px rgba(0,0,0,.6)}
.hzn-cta-actions .hzn-btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}

/* ============================================================
   FOOTER
============================================================ */
.hzn-foot{background:var(--band);color:#A9BADB;padding:2.4rem 0;border-top:1px solid rgba(147,197,253,.12)}
.hzn-foot-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.hzn-foot-brand{display:flex;align-items:center;gap:.7rem;color:#EAF1FF;font-weight:600}
.hzn-foot-logo{height:38px;width:auto;display:block;flex:none}
.hzn-foot-brand small{display:block;font-size:.66rem;font-weight:400;color:#7488AE;letter-spacing:.08em}
.hzn-foot p{font-size:.82rem;color:#7488AE}
.hzn-foot-top{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:600;color:#BFD6FF;
  padding:.55rem 1rem;border-radius:999px;border:1px solid rgba(147,197,253,.24);
  transition:background .25s ease,transform .25s ease;
}
.hzn-foot-top:hover{background:rgba(96,165,250,.12);transform:translateY(-2px)}
.hzn-foot-top svg{width:16px;height:16px}

/* reveal-on-scroll */
.hzn-rv{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 55ms)}
.hzn-rv.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:900px){
  .hzn-featured{grid-template-columns:1fr}
  .hzn-featured-chart{border-left:none;border-top:1px solid rgba(96,165,250,.2);min-height:160px}
  .hzn-grid{grid-template-columns:repeat(2,1fr)}
  .hzn-values{grid-template-columns:1fr}
}
@media (max-width:768px){
  .hzn{margin:-20px}          /* padding .main jadi 20px di layar kecil */
}
@media (max-width:560px){
  .hzn-grid{grid-template-columns:1fr}
  .hzn-stats{gap:1.5rem}
  .hzn-cta .hzn-btn{flex:1 1 auto;justify-content:center}
  .hzn-cta-inner{flex-direction:column;align-items:flex-start}
}

/* Jendela browser PENDEK (window tidak maximize / laptop layar rendah):
   .hzn-pin tinggi 100vh & overflow:hidden dengan konten center — kalau
   jarak-jarak di atas (untuk layar lebar) dibiarkan penuh, baris statistik
   di bagian paling bawah bisa terpotong tak terlihat. Kompakkan proporsional
   di sini supaya SELALU muat, sambil tetap lebih lega dari versi awal. */
@media (max-height:820px){
  .hzn-hero-inner .hzn-title{font-size:clamp(2.1rem,5.6vw,3.4rem);margin-bottom:clamp(.7rem,1.3vw,1rem)}
  .hzn-hero .hzn-eyebrow{margin-bottom:clamp(.9rem,1.6vw,1.3rem)}
  .hzn-hero-inner .hzn-sub{margin-bottom:clamp(.9rem,1.5vw,1.3rem)}
  .hzn-cta{margin-bottom:clamp(.9rem,1.8vw,1.3rem)}
  .hzn-hero-inner .hzn-stats{gap:clamp(1.6rem,3vw,2.4rem);padding-top:clamp(1rem,1.6vw,1.3rem)}
}
@media (max-height:680px){
  .hzn-hero-inner .hzn-title{font-size:clamp(1.8rem,5vw,2.6rem);margin-bottom:.6rem}
  .hzn-hero-inner .hzn-sub{margin-bottom:.8rem}
  .hzn-cta{margin-bottom:.7rem}
  .hzn-hero-inner .hzn-stats{gap:1.4rem;padding-top:.9rem}
}

@media (prefers-reduced-motion:reduce){
  .hzn *{animation:none !important}
  .hzn-rv,.hzn-lyr,.hzn-card-go{opacity:1 !important;transform:none !important;transition:none !important}
  .hzn-hint svg{animation:none}
  .hzn-card:hover,.hzn-val:hover,.hzn-btn:hover{transform:none}
}