:root{
    --biru: #1d4ed8;
    --biru-terang: #3b82f6;
    --biru-pucat: #eaf1ff;
    --biru-sangat-pucat: #f5f8ff;
    --tinta: #0a1230;
    --abu: #51607f;
    --garis: #d6e2fb;
    --putih: #ffffff;
    --hijau-bg: #dcf7e6;
    --hijau: #146c3a;
    --radius: 16px;
    --lebar: 1120px;
    --ease: cubic-bezier(.2,.8,.2,1);
  }
  *{ box-sizing: border-box; margin: 0; padding: 0; }
  html{ scroll-behavior: smooth; scroll-padding-top: 76px; }
  body{
    font-family: "Public Sans", system-ui, sans-serif;
    color: var(--tinta);
    background: var(--putih);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  h1,h2,h3{ font-family: "Sora", sans-serif; line-height: 1.15; letter-spacing: -0.02em; }
  a{ color: inherit; }
  .wrap{ max-width: var(--lebar); margin: 0 auto; padding: 0 20px; }
  :focus-visible{ outline: 3px solid var(--biru-terang); outline-offset: 3px; border-radius: 8px; }

  /* ---------- Header ---------- */
  header.top{
    position: sticky; top: 0; z-index: 10;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--garis);
    transition: box-shadow .3s;
  }
  header.top.melayang{ box-shadow: 0 12px 26px -20px rgba(10,18,48,.35); }
  .progres{
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 20;
    background: linear-gradient(90deg, var(--biru), var(--biru-terang));
    transform: scaleX(0); transform-origin: left; pointer-events: none;
  }
  .top .wrap{ display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
  .brand{ display: block; text-decoration: none; }
  .logo{ display: block; height: 40px; width: auto; transition: transform .3s var(--ease); }
  .brand:hover .logo{ transform: scale(1.03); }
  nav.menu{ display: flex; gap: 26px; font-size: .92rem; font-weight: 500; color: var(--abu); }
  nav.menu a{ text-decoration: none; padding: 6px 0; transition: color .2s; }
  nav.menu a::after{
    content: ""; display: block; height: 2px; margin-top: 2px; border-radius: 2px;
    background: var(--biru); transform: scaleX(0); transform-origin: left;
    transition: transform .28s var(--ease);
  }
  nav.menu a:hover, nav.menu a.aktif{ color: var(--biru); }
  nav.menu a:hover::after, nav.menu a.aktif::after{ transform: scaleX(1); }

  /* ---------- Tombol ---------- */
  .btn{
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px; border-radius: 999px;
    font: 600 .92rem "Public Sans", sans-serif;
    text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
    transition: background .15s, border-color .15s, color .15s, transform .18s var(--ease), box-shadow .25s;
  }
  .btn svg{ width: 18px; height: 18px; flex: none; }
  .btn:hover{ transform: translateY(-1px); }
  .btn:active{ transform: scale(.97); }
  .btn-utama{ background: var(--biru); color: #fff; }
  .btn-utama:hover{ background: #1a43b8; box-shadow: 0 12px 22px -12px rgba(29,78,216,.75); }
  .btn-garis{ background: #fff; color: var(--biru); border-color: var(--garis); }
  .btn-garis:hover{ border-color: var(--biru-terang); background: var(--biru-sangat-pucat); }
  .btn[aria-disabled="true"]{ background: var(--biru-pucat); color: var(--abu); cursor: default; pointer-events: none; }
  .btn-kecil{ padding: 9px 16px; font-size: .86rem; }

  /* ---------- Hero ---------- */
  .hero{
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, var(--biru-sangat-pucat), #fff 85%);
    /* Bagian pembuka memenuhi satu layar dan isinya diratakan di tengah */
    min-height: calc(100vh - 69px); min-height: calc(100dvh - 69px);
    display: flex; align-items: center;
    padding: clamp(28px, 6vh, 72px) 0;
  }
  .hero .wrap{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
  .hero .wrap > *{ min-width: 0; }
  .hero h1{ font-size: clamp(2rem, min(3.7vw, 6.4vh), 3.2rem); font-weight: 800; }
  .hero h1 .mask{ display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
  .hero h1 .mask.biru{ color: var(--biru); }
  .hero h1 .in{ display: block; text-wrap: balance; }
  .hero .garis-biru{ width: 64px; height: 4px; background: var(--biru); border-radius: 4px; margin: clamp(14px, 2.6vh, 22px) 0; transform-origin: left; }
  .hero p.sub{ font-size: 1.1rem; color: var(--abu); max-width: 31em; }
  .hero .aksi{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 3.4vh, 30px); }
  .lencana{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(16px, 3vh, 30px); }
  .lencana div{
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--garis); border-radius: 12px;
    padding: 8px 14px; font-size: .84rem; font-weight: 500;
  }
  .lencana svg{ width: 18px; height: 18px; color: var(--biru); flex: none; }

  /* Mockup dashboard di hero */
  .mock{ position: relative; padding: 0 0 36px 28px; }
  .jendela{
    background: #fff; border: 1px solid var(--garis); border-radius: 18px;
    box-shadow: 0 30px 60px -28px rgba(29,78,216,.35);
    overflow: hidden;
  }
  .jendela .bar{ display: flex; gap: 6px; padding: 12px 16px; background: var(--biru); }
  .jendela .bar i{ width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.55); }
  .jendela .isi{ display: grid; grid-template-columns: 54px 1fr; }
  .jendela aside{ background: var(--biru-pucat); padding: 14px 0; display: grid; gap: 10px; justify-items: center; align-content: start; }
  .jendela aside i{ width: 22px; height: 22px; border-radius: 7px; background: #fff; border: 1px solid var(--garis); }
  .jendela aside i:first-child{ background: var(--biru); border-color: var(--biru); }
  .jendela .konten{ padding: 18px; display: grid; gap: 14px; }
  .stat{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
  .stat div{ border: 1px solid var(--garis); border-radius: 12px; padding: 10px 12px; min-width: 0; }
  .stat small{ display: block; color: var(--abu); font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stat strong{ font-family: "Sora", sans-serif; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
  .grafik{ border: 1px solid var(--garis); border-radius: 12px; padding: 12px; }
  .grafik svg{ width: 100%; height: 96px; display: block; }
  .garis-grafik{ stroke-dasharray: 1; }
  .tiket{
    position: absolute; left: 0; bottom: 0;
    background: var(--biru); color: #fff;
    border-radius: 16px; padding: 14px 20px;
    box-shadow: 0 22px 40px -18px rgba(29,78,216,.7);
  }
  .tiket small{ display: block; font-size: .72rem; opacity: .8; }
  .tiket strong{ display: block; overflow: hidden; font-family: "Sora", sans-serif; font-size: 1.9rem; letter-spacing: 0; line-height: 1.15; }
  .tiket .no{ display: inline-block; }
  .qr-mini{
    position: absolute; right: -6px; bottom: 6px;
    width: 84px; height: 84px; border-radius: 16px; background: #fff;
    border: 1px solid var(--garis); padding: 12px; overflow: hidden;
    box-shadow: 0 18px 36px -18px rgba(10,18,48,.4);
  }
  .qr-mini svg{ width: 100%; height: 100%; display: block; }
  .qr-mini .scan{
    position: absolute; left: 8px; right: 8px; top: 10px; height: 2px; border-radius: 2px;
    background: var(--biru-terang); box-shadow: 0 0 10px 2px rgba(59,130,246,.55);
  }

  /* ---------- Seksi ---------- */
  section.blok{ padding: 76px 0 8px; }
  .kepala{ max-width: 38em; margin-bottom: 30px; }
  .kepala h2{ font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 700; text-wrap: balance; }
  .kepala p{ margin-top: 10px; color: var(--abu); }

  .badge{
    display: inline-block; padding: 3px 11px; border-radius: 999px;
    font-size: .76rem; font-weight: 600;
    background: var(--biru-pucat); color: var(--biru);
  }

  .ikon{
    width: 50px; height: 50px; border-radius: 14px; flex: none;
    display: grid; place-items: center;
    background: var(--biru-pucat); color: var(--biru);
    transition: background .25s, color .25s, transform .35s var(--ease);
  }
  .ikon svg{ width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  .slot{ display: flex; }
  .slot > *{ flex: 1; }

  /* Alat gratis: panel lebar berwarna biru */
  .gratis-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .alat{
    display: flex; gap: 20px; align-items: flex-start;
    background: var(--biru); color: #fff;
    border-radius: 22px; padding: 28px;
    transition: transform .3s var(--ease), box-shadow .3s;
  }
  .alat:hover{ transform: translateY(-4px); box-shadow: 0 26px 40px -26px rgba(29,78,216,.85); }
  .alat .ikon{ background: rgba(255,255,255,.16); color: #fff; width: 58px; height: 58px; border-radius: 16px; }
  .alat:hover .ikon{ background: rgba(255,255,255,.28); transform: rotate(-6deg) scale(1.07); }
  .alat .ikon svg{ width: 30px; height: 30px; }
  .alat h3{ font-size: 1.35rem; margin: 10px 0 6px; }
  .alat p{ color: rgba(255,255,255,.88); font-size: .96rem; margin-bottom: 20px; }
  .alat .badge{ background: #fff; color: var(--hijau); }
  .alat .btn-utama{ background: #fff; color: var(--biru); }
  .alat .btn-utama:hover{ background: var(--biru-pucat); box-shadow: 0 12px 22px -12px rgba(0,0,0,.45); }
  .alat .btn[aria-disabled="true"]{ background: rgba(255,255,255,.18); color: #fff; }

  /* Kartu aplikasi dan jasa */
  .kartu-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
  .kartu-grid.dua{ grid-template-columns: repeat(2, 1fr); }
  .kartu{
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--garis); border-radius: var(--radius);
    padding: 24px;
    transition: border-color .2s, transform .3s var(--ease), box-shadow .3s;
  }
  .kartu:hover{
    transform: translateY(-4px); border-color: var(--biru-terang);
    box-shadow: 0 24px 36px -28px rgba(29,78,216,.6);
  }
  .kartu:hover .ikon{ background: var(--biru); color: #fff; transform: rotate(-6deg) scale(1.07); }
  .kartu .baris-atas{ display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
  .kartu h3{ font-size: 1.12rem; margin-bottom: 8px; text-wrap: balance; }
  .kartu p{ color: var(--abu); font-size: .93rem; }
  .tag{ display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 22px; }
  .tag span{
    background: var(--biru-sangat-pucat); border: 1px solid var(--garis);
    color: var(--biru); font-size: .76rem; font-weight: 500;
    padding: 3px 10px; border-radius: 999px;
  }
  .kartu .kaki{ margin-top: auto; border-top: 1px solid var(--garis); padding-top: 16px; }
  .harga{ display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
  .harga small{ color: var(--abu); font-size: .8rem; }
  .harga strong{ font-family: "Sora", sans-serif; font-size: 1rem; }
  .tombol{ display: flex; gap: 8px; flex-wrap: wrap; }

  /* ---------- Ajakan ---------- */
  .ajakan{ padding: 84px 0; }
  .ajakan .kotak{
    background: var(--biru-pucat); border-radius: 26px;
    padding: 44px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  }
  .ajakan h2{ font-size: clamp(1.5rem, 3vw, 2rem); max-width: 18em; }
  .ajakan p{ color: var(--abu); margin-top: 8px; max-width: 31em; }

  /* ---------- Footer ---------- */
  footer{ border-top: 1px solid var(--garis); padding: 34px 0 40px; font-size: .9rem; color: var(--abu); }
  footer .wrap{ display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
  footer .logo{ height: 36px; margin-bottom: 10px; }
  footer strong{ color: var(--tinta); font-family: "Sora", sans-serif; }
  footer .tautan{ display: flex; gap: 20px; flex-wrap: wrap; }
  footer a{ text-decoration: none; color: var(--biru); font-weight: 500; }
  footer a:hover{ text-decoration: underline; }

  /* ---------- Responsif ---------- */
  @media (max-width: 980px){
    .hero .wrap{ grid-template-columns: 1fr; gap: 36px; }
    .mock{ max-width: 520px; }
  }
  /* Layar laptop yang pendek: sembunyikan lencana kecil supaya tombol tetap terlihat */
  @media (min-width: 981px) and (max-height: 720px){
    .lencana{ display: none; }
    .hero p.sub{ font-size: 1rem; }
  }
  @media (max-width: 720px){
    nav.menu{ display: none; }
    .hero{ padding: 48px 0 60px; }
    .gratis-grid, .kartu-grid.dua{ grid-template-columns: 1fr; }
    .alat{ padding: 22px; }
    .ajakan .kotak{ padding: 30px 24px; }
    .logo{ height: 34px; }
    .jendela .isi{ grid-template-columns: 38px 1fr; }
    .jendela .konten{ padding: 12px; gap: 10px; }
    .stat{ gap: 6px; }
    .stat div{ padding: 8px; }
    .stat small{ font-size: .6rem; }
    .stat strong{ font-size: .98rem; }
  }

  /* ---------- Animasi (hanya jika pengguna tidak membatasi gerakan) ---------- */
  @keyframes naik{ from{ transform: translateY(105%); } }
  @keyframes muncul{ from{ opacity: 0; transform: translateY(12px); } }
  @keyframes pudar{ from{ opacity: 0; } }
  @keyframes lebar{ from{ transform: scaleX(0); } }
  @keyframes masuk{ from{ opacity: 0; transform: translateY(26px) scale(.98); } }
  @keyframes pop{ from{ opacity: 0; transform: translateY(14px) scale(.88); } }
  @keyframes gambar{ from{ stroke-dashoffset: 1; opacity: 0; } 4%{ opacity: 1; } to{ stroke-dashoffset: 0; } }
  @keyframes sapu{ 0%{ transform: translateY(0); opacity: 0; } 15%{ opacity: 1; } 85%{ opacity: 1; } 100%{ transform: translateY(56px); opacity: 0; } }
  @keyframes gulung{ from{ opacity: 0; transform: translateY(-65%); } }
  @keyframes goyang{ 0%{ transform: rotate(0); } 30%{ transform: rotate(-14deg); } 60%{ transform: rotate(10deg); } 100%{ transform: rotate(0); } }

  @media (prefers-reduced-motion: no-preference){
    .hero h1 .mask .in{ animation: naik .85s var(--ease) both; }
    .hero h1 .mask:nth-child(1) .in{ animation-delay: .05s; }
    .hero h1 .mask:nth-child(2) .in{ animation-delay: .17s; }
    .hero h1 .mask:nth-child(3) .in{ animation-delay: .29s; }
    .hero .garis-biru{ animation: lebar .6s .5s var(--ease) both; }
    .hero p.sub{ animation: muncul .7s .55s var(--ease) both; }
    .hero .aksi{ animation: muncul .7s .67s var(--ease) both; }
    .hero .lencana{ animation: muncul .7s .79s var(--ease) both; }

    .jendela{ animation: masuk .95s .2s var(--ease) both; }
    .stat div{ animation: muncul .6s var(--ease) both; }
    .stat div:nth-child(1){ animation-delay: .6s; }
    .stat div:nth-child(2){ animation-delay: .7s; }
    .stat div:nth-child(3){ animation-delay: .8s; }
    .garis-grafik{ animation: gambar 1.5s .95s ease-out both; }
    .area-grafik{ animation: pudar .9s 1.7s both; }
    .tiket{ animation: pop .65s 1.05s cubic-bezier(.3,1.4,.5,1) both; }
    .qr-mini{ animation: pop .65s 1.25s cubic-bezier(.3,1.4,.5,1) both; }
    .qr-mini .scan{ animation: sapu 2.8s 2s ease-in-out infinite; }
    .tiket .no.gulung{ animation: gulung .5s var(--ease); }

    .btn:hover svg{ animation: goyang .5s; }

    .js .reveal{ opacity: 0; transform: translateY(16px); }
    .js .reveal.tampil{
      opacity: 1; transform: none;
      transition: opacity .6s var(--ease), transform .6s var(--ease);
      transition-delay: calc(var(--i, 0) * 80ms);
    }
  }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *, *::before, *::after{ animation: none !important; transition: none !important; }
    .kartu:hover, .alat:hover{ transform: none; }
  }