/* =====================================================================
   Gesit - landing page. Satu berkas gaya, tanpa JavaScript. Tanpa teks di sini (teks = lang/*.lang).
   Palet & font = aplikasi Gesit (config/theme.css proyek web). Ubah token di :root.
   ===================================================================== */
:root{
  --blue-900:#0A3A63; --blue-700:#0F4C81; --blue-200:#CBDEEE; --blue-100:#E6EEF6;
  --green-500:#1A9E73; --green-100:#E4F4EE; --amber-500:#D98A0B; --red-500:#CE4A36;
  --slate-950:#10212E; --slate-900:#17242E; --slate-800:#1F3A4C; --slate-500:#64788C;
  --slate-250:#C6D4E0; --slate-150:#DCE4EC; --slate-80:#F2F5F8; --slate-50:#F7FAFC; --white:#FFFFFF;
  --wa-700:#0B6E63; --wa-900:#075E54;
  --brand-rgb:15,76,129; --shadow-rgb:16,33,46;

  --c-brand:var(--blue-700); --c-brand-strong:var(--blue-900); --c-brand-soft:var(--blue-100);
  --c-ok:var(--green-500); --c-warn:var(--amber-500); --c-bad:var(--red-500);
  --c-bg:var(--white); --c-bg-alt:var(--slate-80); --c-surface:var(--white);
  --c-text:var(--slate-900); --c-muted:var(--slate-500); --c-line:var(--slate-150);
  --c-dark:var(--slate-950); --c-dark-text:var(--slate-250); --c-dark-line:var(--slate-800);

  --font:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --wrap:1120px; --gutter:clamp(16px,4vw,32px);
  --sec-y:clamp(56px,8vw,96px);
  --radius:14px; --radius-sm:8px; --radius-pill:999px;
  --shadow:0 1px 2px rgba(var(--shadow-rgb),.04),0 12px 32px rgba(var(--shadow-rgb),.08);
  --shadow-lg:0 24px 60px rgba(var(--shadow-rgb),.18);
  --h-top:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--h-top) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.6;color:var(--c-text);background:var(--c-bg)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{line-height:1.2;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:var(--c-brand)}
:focus-visible{outline:2px solid var(--c-brand);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--c-brand);color:var(--white);padding:8px 14px;border-radius:var(--radius-sm);z-index:20}
.skip:focus{left:8px}

/* ---------- tombol ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-text);font-weight:600;font-size:15px;
  text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,transform .15s}
.btn:hover{border-color:var(--c-brand);transform:translateY(-1px)}
.btn.primary{background:var(--c-brand);border-color:var(--c-brand);color:var(--white)}
.btn.primary:hover{background:var(--c-brand-strong)}
.btn.ghost{background:transparent}
/* WhatsApp: hijau gelap agar teks putih tetap kontras (hijau terang WA terlalu pucat untuk teks putih) */
.btn.wa{background:var(--wa-700);border-color:var(--wa-700);color:var(--white)}
.btn.wa:hover{background:var(--wa-900);border-color:var(--wa-900)}
.btn.lg{padding:12px 22px;font-size:16px}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--c-line)}
.top-in{display:flex;align-items:center;gap:24px;min-height:var(--h-top)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:20px;color:var(--c-brand-strong);text-decoration:none;letter-spacing:-.02em}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:8px 12px;border-radius:var(--radius-sm);color:var(--c-muted);text-decoration:none;font-weight:500;font-size:15px}
.nav a:hover{color:var(--c-text);background:var(--c-bg-alt)}
.top-acts{display:flex;align-items:center;gap:10px}
.lang{display:inline-grid;place-items:center;min-width:40px;height:36px;padding:0 10px;border:1px solid var(--c-line);
  border-radius:var(--radius-sm);color:var(--c-muted);font-weight:600;font-size:13px;letter-spacing:.04em;text-decoration:none}
.lang:hover{color:var(--c-brand);border-color:var(--c-brand)}

/* tanda centang digambar CSS (bukan karakter, agar tidak tampil sebagai emoji di HP) */
.ticks li::before,.checks li::before{content:"";flex:none;display:inline-block;width:6px;height:11px;
  border:solid var(--c-ok);border-width:0 2px 2px 0;transform:rotate(45deg);margin:0 12px 0 2px;position:relative;top:-2px}

/* ---------- hero ---------- */
.hero{background:radial-gradient(90% 70% at 100% 0%,rgba(var(--brand-rgb),.10),transparent 60%),
  radial-gradient(60% 60% at 0% 100%,rgba(26,158,115,.08),transparent 60%);padding:clamp(40px,7vw,88px) 0 clamp(48px,7vw,96px)}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
.eyebrow{color:var(--c-brand);font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
.hero h1{font-size:clamp(32px,5vw,52px);font-weight:700;color:var(--c-brand-strong)}
.lead{font-size:clamp(17px,1.6vw,19px);color:var(--c-muted);margin-top:18px;max-width:58ch}
.lead strong{color:var(--c-text);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ticks{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--c-muted);font-size:15px}
.ticks li{display:flex;align-items:center}

/* ilustrasi layar */
.mock{margin:0;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}
.mock-cap{padding:0 16px 14px;color:var(--c-muted);font-size:12px;text-align:right}
.mock-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--c-dark);color:var(--c-dark-text);font-size:13px;font-weight:500}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:var(--c-dark-line)}
.mock-bar span{margin-left:8px}
.mock-body{padding:16px;display:grid;gap:14px}
.mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mock-stats div{border:1px solid var(--c-line);border-radius:var(--radius-sm);padding:10px 12px}
.mock-stats b{display:block;font-size:20px;color:var(--c-brand-strong)}
.mock-stats small{font-size:13px;color:var(--c-muted);font-weight:500}
.mock-stats span{font-size:12px;color:var(--c-muted)}
.mock-map{position:relative;height:150px;border-radius:var(--radius-sm);border:1px solid var(--c-line);
  background:linear-gradient(var(--slate-150) 1px,transparent 1px) 0 0/28px 28px,
  linear-gradient(90deg,var(--slate-150) 1px,transparent 1px) 0 0/28px 28px,var(--slate-50)}
.pin{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid var(--white);box-shadow:0 1px 4px rgba(var(--shadow-rgb),.3);transform:translate(-50%,-50%)}
.pin.ok{background:var(--c-ok)} .pin.now{background:var(--c-brand)} .pin.wait{background:var(--slate-250)} .pin.miss{background:var(--c-bad)}
.ring{position:absolute;width:64px;height:64px;border-radius:50%;border:2px dashed rgba(var(--brand-rgb),.45);background:rgba(var(--brand-rgb),.06);transform:translate(-50%,-50%)}
.p1{left:18%;top:30%} .p2{left:34%;top:62%} .p3{left:55%;top:42%} .p4{left:74%;top:24%} .p5{left:82%;top:70%} .p6{left:28%;top:84%}
.mock-rows{display:grid;gap:6px;font-size:13px}
.mock-rows div{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--slate-50)}
.mock-rows em{margin-left:auto;font-style:normal;color:var(--c-muted);font-size:12px}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot.ok{background:var(--c-ok)} .dot.now{background:var(--c-brand)} .dot.wait{background:var(--slate-250)}

/* ---------- strip keunggulan ---------- */
.strip{border-block:1px solid var(--c-line);background:var(--c-surface)}
.strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.strip-in div{padding:24px 20px;border-left:1px solid var(--c-line)}
.strip-in div:first-child{border-left:0;padding-left:0}
.strip b{display:block;color:var(--c-brand-strong);font-size:17px}
.strip span{display:block;color:var(--c-muted);font-size:14px;margin-top:4px}

/* ---------- section umum ---------- */
.sec{padding:var(--sec-y) 0}
.sec.alt{background:var(--c-bg-alt)}
.sec-head{max-width:680px;margin-bottom:clamp(28px,4vw,44px)}
.sec-head h2{font-size:clamp(26px,3.4vw,38px);color:var(--c-brand-strong)}
.sec-head p:not(.eyebrow){color:var(--c-muted);font-size:17px;margin-top:12px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);padding:22px;transition:border-color .15s,box-shadow .15s,transform .15s}
.card:hover{border-color:var(--blue-200);box-shadow:var(--shadow);transform:translateY(-2px)}
.card::before{content:"";display:block;width:32px;height:4px;border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--c-brand),var(--c-ok));margin-bottom:16px}
.card h3{font-size:18px;color:var(--c-text)}
.card p{color:var(--c-muted);font-size:15px;margin-top:8px}

.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.steps li{position:relative;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);padding:26px 22px 22px;counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--c-brand);color:var(--white);font-weight:700;margin-bottom:14px}
.steps h3{font-size:18px}
.steps p{color:var(--c-muted);font-size:15px;margin-top:8px}

.roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.roles div{border-left:3px solid var(--c-brand);padding:4px 0 4px 16px}
.roles h3{font-size:17px}
.roles p{color:var(--c-muted);font-size:15px;margin-top:6px}

.sec.dark{background:radial-gradient(80% 90% at 0% 100%,rgba(var(--brand-rgb),.55),transparent 60%),var(--c-dark);color:var(--c-dark-text)}
.sec.dark h2{color:var(--white)}
.sec.dark .eyebrow{color:var(--c-ok)}
.sec.dark .sec-head p:not(.eyebrow){color:var(--c-dark-text)}
.sec-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,64px);align-items:start}
.sec-split .sec-head{margin-bottom:0}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.checks li{display:flex;align-items:center;padding:14px 16px;border:1px solid var(--c-dark-line);border-radius:var(--radius-sm);background:rgba(255,255,255,.03)}

.cta{text-align:center}
.cta-in{max-width:720px}
.cta h2{font-size:clamp(26px,3.4vw,38px);color:var(--c-brand-strong)}
.cta p{color:var(--c-muted);font-size:17px;margin-top:12px}
.cta .hero-cta{justify-content:center}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--c-line);padding:28px 0;background:var(--c-bg-alt)}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot p{color:var(--c-muted);font-size:13px;max-width:70ch}

/* ---------- 404 ---------- */
.notfound{min-height:70vh;display:grid;place-items:center;text-align:center;padding:48px var(--gutter)}
.notfound img{margin:0 auto 16px}
.notfound h1{font-size:clamp(28px,4vw,40px);color:var(--c-brand-strong)}
.notfound p{color:var(--c-muted);margin:12px 0 24px}

/* ---------- responsif ---------- */
@media (max-width:960px){
  .hero-in,.sec-split{grid-template-columns:1fr}
  .mock{max-width:560px}
  .strip-in{grid-template-columns:repeat(2,1fr)}
  .strip-in div{border-left:0;padding-left:0;border-top:1px solid var(--c-line)}
  .strip-in div:nth-child(-n+2){border-top:0}
  .steps{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* navigasi jadi baris geser di bawah logo (tanpa JavaScript) */
  .top-in{flex-wrap:wrap;gap:0 12px;padding-top:8px}
  .top-acts{margin-left:auto}
  .nav{order:3;width:calc(100% + 2 * var(--gutter));margin:0 calc(-1 * var(--gutter));padding:4px var(--gutter) 8px;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none;padding:6px 10px;font-size:14px}
  html{scroll-padding-top:120px}
}
@media (max-width:520px){
  .strip-in{grid-template-columns:1fr}
  .strip-in div:nth-child(2){border-top:1px solid var(--c-line)}
  .mock-stats b{font-size:16px}
  .hero-cta .btn{flex:1 1 100%}
  .btn.lg{padding:12px 16px}
}