/* ==================================================================
   AURA Landing  |  Stylesheet
   Warna diturunkan dari berkas logo AURA. Ubah blok :root untuk
   menyelaraskan dengan identitas merek lain.
   ================================================================== */

:root{
  --brand:        #0287C6;
  --brand-light:  #01A1E6;
  --brand-dark:   #2C3339;
  --brand-alt:    #34B6F0;

  --acc-red:      #EC3B43;
  --acc-purple:   #7C369E;
  --acc-yellow:   #FAB325;
  --acc-green:    #5BAA36;

  --grad:      linear-gradient(135deg, #01A1E6 0%, #0270B6 100%);
  --grad-dark: linear-gradient(135deg, #2C3339 0%, #0D5B8B 100%);

  --ink:    #353D43;
  --ink-2:  #4B545C;
  --muted:  #78838D;
  --line:   #E1E6EA;
  --line-2: #EEF1F4;
  --bg:     #F4F7F9;

  --ok:     #4B8F2C;
  --ok-bg:  #EEF6E8;
  --bad:    #D93740;
  --bad-bg: #FDECED;
  --info-bg:#E5F5FD;

  --r: 10px; --r-lg: 16px; --r-xl: 22px;
  --sh-1: 0 1px 3px rgba(44,51,57,.07);
  --sh-2: 0 4px 14px rgba(44,51,57,.09);
  --sh-3: 0 14px 36px rgba(44,51,57,.14);
  --font: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:80px }
body{
  margin:0; font-family:var(--font); color:var(--ink);
  font-size:14.5px; line-height:1.7; background:#fff;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100% }
a{ color:var(--brand); text-decoration:none }
h1,h2,h3,h4{ margin:0; line-height:1.22; color:var(--ink); font-weight:bold }
p{ margin:0 0 12px }
.container{ max-width:1160px; margin:0 auto; padding:0 24px }
.grid{ display:grid; gap:20px }
.g2{ grid-template-columns:repeat(2,1fr) }
.g3{ grid-template-columns:repeat(3,1fr) }
.flex{ display:flex; align-items:center }
.gap8{ gap:8px } .gap12{ gap:12px } .gap16{ gap:16px }
.wrap{ flex-wrap:wrap }
.between{ justify-content:space-between }
.tc{ text-align:center }
.muted{ color:var(--muted) }
.small{ font-size:12.5px }
.mt8{ margin-top:8px } .mt16{ margin-top:16px } .mt24{ margin-top:24px } .mt32{ margin-top:32px }
.mb8{ margin-bottom:8px } .mb16{ margin-bottom:16px } .mb24{ margin-bottom:24px }
.hide{ display:none !important }

/* ------------------------------ TOMBOL --------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-size:14px; font-weight:bold; line-height:1;
  padding:13px 24px; border-radius:var(--r); border:1px solid transparent;
  cursor:pointer; transition:.16s; white-space:nowrap;
}
.btn:active{ transform:translateY(1px) }
.btn-grad{ background:var(--grad); color:#fff; box-shadow:var(--sh-2) }
.btn-grad:hover{ filter:brightness(1.08); box-shadow:var(--sh-3) }
.btn-primary{ background:var(--brand); color:#fff }
.btn-primary:hover{ background:#0170A4 }
.btn-ghost{ background:#fff; color:var(--ink-2); border-color:var(--line) }
.btn-ghost:hover{ border-color:#C4CFD8; background:#FAFCFD }
.btn-onDark{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.3) }
.btn-onDark:hover{ background:rgba(255,255,255,.18) }
.btn-sm{ padding:9px 16px; font-size:13px }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.6; cursor:not-allowed }

/* ------------------------------ NAVIGASI ------------------------- */
.nav{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.nav .in{ max-width:1160px; margin:0 auto; padding:0 24px; height:68px; display:flex; align-items:center; gap:28px }
.brand{ display:flex; align-items:center; gap:11px }
.brand img{ height:26px; width:auto; display:block }
.brand .div{ color:var(--line); font-weight:normal }
.brand .sub{ font-size:12.5px; color:var(--muted) }
.nav .links{ display:flex; gap:22px; margin-left:auto }
.nav .links a{ font-size:13.5px; color:var(--ink-2); font-weight:bold }
.nav .links a:hover{ color:var(--brand) }
.navend{ display:flex; align-items:center; gap:10px; margin-left:14px }
.langsw{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:34px; padding:0 10px; border:1px solid var(--line);
  border-radius:8px; font-size:12px; font-weight:bold; color:var(--ink-2);
  letter-spacing:.5px; transition:.16s; background:#fff;
}
.langsw:hover{ border-color:var(--brand); color:var(--brand); background:var(--info-bg) }
.tinypill{ font-size:9.5px; padding:2px 8px; border-radius:20px; font-weight:bold; display:inline-block }
.tinypill.ok{ background:var(--ok-bg); color:var(--ok) }
.navtoggle{ display:none; background:none; border:1px solid var(--line); border-radius:8px; padding:8px 10px; cursor:pointer; font-size:16px }

/* ------------------------------ HERO ----------------------------- */
.hero{ background:var(--grad-dark); color:#fff; padding:76px 0 92px; position:relative; overflow:hidden }
.hero::after{ content:""; position:absolute; right:-170px; top:-160px; width:540px; height:540px; border-radius:50%;
  background:radial-gradient(circle, rgba(1,161,230,.34), transparent 66%) }
.hero::before{ content:""; position:absolute; left:-140px; bottom:-220px; width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle, rgba(52,182,240,.22), transparent 66%) }
.hero .in{ position:relative; z-index:2; max-width:1160px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22); padding:7px 15px; border-radius:20px;
  font-size:11.5px; font-weight:bold; letter-spacing:.4px; margin-bottom:22px;
}
.hero h1{ font-size:42px; color:#fff; margin-bottom:18px; letter-spacing:-.6px }
.hero h1 em{ font-style:normal; color:#6FD0F7 }
.hero .lead{ font-size:15.5px; color:#C6DAEA; line-height:1.8; margin-bottom:28px; max-width:530px }
.facts{ display:flex; gap:26px; margin-top:36px; flex-wrap:wrap }
.facts > div{ flex:1 1 150px; min-width:150px }
.facts b{ display:block; font-size:15.5px; color:#fff; margin-bottom:3px }
.facts span{ font-size:11.5px; color:#9FBCD3; line-height:1.5; display:block }

/* jendela peraga */
.mockwin{ background:#fff; border-radius:16px; box-shadow:0 30px 74px rgba(0,0,0,.36); overflow:hidden }
.mockbar{ background:#EDF1F4; padding:9px 12px; display:flex; gap:6px; align-items:center }
.mockbar i{ width:9px; height:9px; border-radius:50%; display:block }
.mockurl{ flex:1; background:#fff; border-radius:5px; font-size:9.5px; color:#8A959D; padding:4px 9px; margin-left:8px }
.mockbody{ padding:16px; background:#F7F9FB }
.mockrow{ height:9px; background:#E6EBEF; border-radius:5px; margin-bottom:8px }
.mockchat{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; margin-top:12px; box-shadow:var(--sh-2) }
.mb-u{ background:var(--brand); color:#fff; font-size:10.5px; padding:7px 11px; border-radius:11px 11px 3px 11px; margin-left:auto; max-width:78% }
.mb-a{ background:#F4F7F9; border:1px solid var(--line); font-size:10.5px; padding:8px 11px; border-radius:11px 11px 11px 3px; max-width:88%; color:var(--ink-2); margin-top:7px }

/* ------------------------------ BAGIAN --------------------------- */
.sec{ padding:78px 0 }
.sec.alt{ background:#F7FAFC }
.sec-h{ text-align:center; max-width:680px; margin:0 auto 46px }
.sec-h .k{ font-size:11.5px; font-weight:bold; letter-spacing:1.3px; text-transform:uppercase; color:var(--brand); margin-bottom:11px }
.sec-h h2{ font-size:30px; margin-bottom:13px; letter-spacing:-.4px }
.sec-h p{ font-size:14.5px; color:var(--muted) }

.feat{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px; transition:.22s; height:100% }
.feat:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); border-color:#CDDCE6 }
.feat .ic{ width:44px; height:44px; border-radius:12px; background:var(--info-bg); color:var(--brand);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:16px; font-weight:bold }
.feat h3{ font-size:15.5px; margin-bottom:9px }
.feat p{ font-size:13px; color:var(--muted); margin:0 }

.vs{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff }
.vs > div{ padding:26px 28px }
.vs .l{ background:#FAFBFC; border-right:1px solid var(--line) }
.vs h4{ font-size:12.5px; text-transform:uppercase; letter-spacing:.7px; margin-bottom:16px }
.vs .l h4{ color:var(--muted) } .vs .r h4{ color:var(--brand) }
.vs ul{ list-style:none; padding:0; margin:0 }
.vs li{ font-size:13px; margin-bottom:11px; padding-left:25px; position:relative }
.vs .l li::before{ content:"\00d7"; position:absolute; left:0; top:-2px; color:#BFCAD3; font-size:17px; font-weight:bold }
.vs .r li::before{ content:"\2713"; position:absolute; left:0; color:var(--ok); font-weight:bold }

.arch{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px }
.layer{ border-radius:var(--r); padding:14px 18px; margin-bottom:9px; text-align:center; font-size:13px; font-weight:bold }
.arrw{ text-align:center; color:#B4C1C9; font-size:15px; line-height:1; margin:2px 0 3px }
.sub-l{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px }
.sub-l div{ background:#fff; border:1px solid #CDDCE6; border-radius:8px; padding:9px 6px; text-align:center; font-size:11px; font-weight:bold; color:var(--brand-dark) }

.price{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 26px; position:relative }
.price.hi{ border:2px solid var(--brand); box-shadow:var(--sh-3) }
.price .tag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--brand); color:#fff;
  font-size:10.5px; font-weight:bold; padding:4px 14px; border-radius:20px; letter-spacing:.4px }
.price h3{ font-size:13.5px; letter-spacing:1px; text-transform:uppercase; color:var(--muted) }
.price .amt{ font-size:30px; font-weight:bold; margin:12px 0 3px; letter-spacing:-.6px }
.price ul{ list-style:none; padding:0; margin:20px 0 24px }
.price li{ font-size:12.8px; padding:7px 0 7px 24px; position:relative; color:var(--ink-2); border-bottom:1px solid var(--line-2) }
.price li::before{ content:"\2713"; position:absolute; left:0; color:var(--brand); font-weight:bold }

/* ------------------------------ FORMULIR ------------------------- */
.formwrap{ background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-2); overflow:hidden }
.formwrap .side{ background:var(--grad-dark); color:#fff; padding:34px 32px }
.formwrap .side h3{ color:#fff; font-size:20px; margin-bottom:12px }
.formwrap .side p{ color:#B9D0E2; font-size:13.5px }
.formwrap .side li{ font-size:13px; color:#CBDDEB; margin-bottom:10px; padding-left:24px; position:relative; list-style:none }
.formwrap .side li::before{ content:"\2713"; position:absolute; left:0; color:#6FD0F7; font-weight:bold }
.formwrap .body{ padding:32px }
.field{ margin-bottom:16px }
label.lb{ display:block; font-size:12.5px; font-weight:bold; color:var(--ink-2); margin-bottom:6px }
label.lb .req{ color:var(--bad) }
.inp{
  width:100%; font-family:var(--font); font-size:14px; color:var(--ink);
  padding:11px 13px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; outline:none; transition:.15s;
}
.inp:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(1,161,230,.16) }
.inp.err{ border-color:var(--bad); background:#FFFCFC }
textarea.inp{ resize:vertical; min-height:96px; line-height:1.7 }
.err-msg{ font-size:11.5px; color:var(--bad); margin-top:5px; display:none }
.err-msg.on{ display:block }
.checkrow{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--ink-2); line-height:1.65 }
.checkrow input{ margin-top:3px; flex:none; width:15px; height:15px; accent-color:var(--brand) }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0 }
.formnote{ font-size:11.5px; color:var(--muted); margin-top:14px; text-align:center }
.alert{ border-radius:var(--r); padding:14px 18px; font-size:13.5px; margin-bottom:18px; display:none }
.alert.on{ display:block }
.alert-ok{ background:var(--ok-bg); border:1px solid #CBE4BC; color:#33691E }
.alert-bad{ background:var(--bad-bg); border:1px solid #F4C7C9; color:#B3272F }
.spin{ width:15px; height:15px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite; display:inline-block }
@keyframes sp{ to{ transform:rotate(360deg) } }

/* ------------------------------ CTA & FOOTER --------------------- */
.cta{ background:var(--grad-dark); color:#fff; border-radius:var(--r-xl); padding:52px 46px; text-align:center; position:relative; overflow:hidden }
.cta::after{ content:""; position:absolute; right:-90px; bottom:-150px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(1,161,230,.32), transparent 66%) }
.cta h2{ color:#fff; font-size:28px; margin-bottom:13px; position:relative; z-index:2 }
.cta p{ color:#BFD6E7; max-width:560px; margin:0 auto 26px; position:relative; z-index:2 }
footer{ background:var(--brand-dark); color:#8D99A2; padding:46px 0 30px; font-size:12.5px }
footer a{ color:#B4C3CC } footer a:hover{ color:#fff }
footer .fbrand img{ height:30px }
footer .fbrand img.endorse,
.endorse{ height:15px; width:auto; opacity:.92; vertical-align:middle }

/* ------------------------------ RESPONSIF ------------------------ */
@media (max-width:920px){
  .hero .in{ grid-template-columns:1fr; gap:36px }
  .hero h1{ font-size:31px }
  .nav .links{ display:none }
  .navend{ margin-left:auto; order:2 }
  .navtoggle{ margin-left:0; order:3 }
  .nav .links.open{ display:flex; position:absolute; top:68px; left:0; right:0; background:#fff;
    flex-direction:column; gap:0; padding:8px 24px 18px; border-bottom:1px solid var(--line); box-shadow:var(--sh-2) }
  .nav .links.open a{ padding:11px 0; border-bottom:1px solid var(--line-2) }
  .navtoggle{ display:block }
  .g2,.g3{ grid-template-columns:1fr }
  .vs{ grid-template-columns:1fr } .vs .l{ border-right:none; border-bottom:1px solid var(--line) }
  .sub-l{ grid-template-columns:repeat(2,1fr) }
  .sec{ padding:56px 0 }
  .cta{ padding:38px 24px }
  .formwrap .body,.formwrap .side{ padding:26px 22px }
}