/* ═══════════════════════════════════════════════════════════════
   Logiscale — Brand CSS v2.0
   Digital Growth Ecosystem · Connect. Digitalize. Scale.
   Navy #0D1F3D (primary) + Orange #FF7A00 (accent)

   ATURAN KONTRAS — jangan dilanggar:
   · --ls-accent (#FF7A00) TIDAK lolos WCAG AA sebagai teks di atas putih (2.61:1).
     Untuk teks oranye di latar terang pakai --ls-accent-text (#BD5A00, 4.54:1).
   · Teks di atas bidang oranye HARUS --ls-primary (6.28:1), bukan putih (2.61:1).
   · Di atas latar navy, oranye aman: #FF7A00 6.28:1 · #FF9838 7.65:1 (AAA).

   Satu file ini dipakai seluruh halaman. Ganti warna → cukup edit di sini.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── Palet mentah ─────────────────────────── */
  --ls-navy-950:#050D1A; --ls-navy-900:#0D1F3D; --ls-navy-800:#16305C;
  --ls-navy-700:#1F447D; --ls-navy-600:#2C5C9E; --ls-navy-400:#6D93C4;
  --ls-navy-300:#9FBBDC; --ls-navy-100:#DCE6F2; --ls-navy-50:#F2F6FB;

  --ls-orange-800:#A34A00; --ls-orange-700:#BD5A00; --ls-orange-600:#E66E00;
  --ls-orange-500:#FF7A00; --ls-orange-400:#FF9838; --ls-orange-300:#FFB877;
  --ls-orange-100:#FFE7D1; --ls-orange-50:#FFF5EC;

  --ls-charcoal:#333333; --ls-gray:#666666; --ls-gray-light:#9AA3AF;
  --ls-line:#E3E7EE; --ls-surface:#F2F4F7; --ls-white:#FFFFFF;

  /* ── Token semantik — pakai ini di kode ───── */
  --ls-primary:#0D1F3D;
  --ls-primary-deep:#050D1A;
  --ls-primary-hover:#16305C;
  --ls-primary-soft:#DCE6F2;
  --ls-primary-tint:#F2F6FB;
  --ls-accent:#FF7A00;
  --ls-accent-hover:#E66E00;
  --ls-accent-text:#BD5A00;
  --ls-accent-on-dark:#FF9838;
  --ls-accent-soft:#FFE7D1;
  --ls-accent-tint:#FFF5EC;
  --ls-text:#333333;
  --ls-text-strong:#0D1F3D;
  --ls-text-muted:#666666;
  --ls-border:#E3E7EE;
  --ls-bg-soft:#F2F4F7;
  --ls-bg:#FFFFFF;

  /* ── Gradient ─────────────────────────────── */
  --ls-gradient-brand:linear-gradient(90deg,#0D1F3D 0%,#FF7A00 100%);
  --ls-gradient-diag:linear-gradient(135deg,#0D1F3D 0%,#1F447D 45%,#FF7A00 100%);
  --ls-gradient-depth:linear-gradient(180deg,#0D1F3D 0%,#050D1A 100%);

  /* ── Tipografi ────────────────────────────── */
  --ls-font-display:'Poppins', system-ui, -apple-system, sans-serif;
  --ls-font-body:'Inter', system-ui, -apple-system, sans-serif;
  --ls-text-display:clamp(38px,4.8vw,58px);
  --ls-text-h1:clamp(32px,4vw,48px);
  --ls-text-h2:clamp(26px,2.8vw,34px);
  --ls-text-h3:21px;
  --ls-lh-tight:1.10; --ls-lh-heading:1.25; --ls-lh-body:1.6;
  --ls-track-display:-0.03em; --ls-track-heading:-0.02em; --ls-track-caps:0.08em;

  /* ── Spasi · radius · shadow ──────────────── */
  --ls-space-1:4px;  --ls-space-2:8px;  --ls-space-3:12px; --ls-space-4:16px;
  --ls-space-5:24px; --ls-space-6:32px; --ls-space-7:48px; --ls-space-8:64px;
  --ls-space-9:96px; --ls-space-10:128px;
  --ls-radius-sm:8px; --ls-radius-md:12px; --ls-radius-lg:20px;
  --ls-radius-xl:28px; --ls-radius-pill:999px;
  --ls-shadow-sm:0 1px 2px rgba(13,31,61,.08);
  --ls-shadow-md:0 8px 24px rgba(13,31,61,.10);
  --ls-shadow-lg:0 20px 56px rgba(13,31,61,.16);
  --ls-shadow-accent:0 8px 24px rgba(255,122,0,.28);

  --ls-maxw:1180px;
}

/* ═══ BASE ═══════════════════════════════════════════════════ */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ls-bg); color:var(--ls-text);
  font-family:var(--ls-font-body); line-height:var(--ls-lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{
  font-family:var(--ls-font-display); color:var(--ls-text-strong);
  line-height:var(--ls-lh-heading); letter-spacing:var(--ls-track-heading);
}
h1{font-size:var(--ls-text-display); line-height:var(--ls-lh-tight); letter-spacing:var(--ls-track-display); font-weight:700;}
h2{font-size:var(--ls-text-h2); font-weight:700;}
h3{font-size:var(--ls-text-h3); font-weight:600;}
img,svg{max-width:100%;}
.wrap{max-width:var(--ls-maxw); margin:0 auto; padding:0 32px;}

/* ═══ NAV ════════════════════════════════════════════════════ */
nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 32px; max-width:var(--ls-maxw); margin:0 auto;
}
.logo{display:inline-flex; align-items:center; text-decoration:none; flex-shrink:0;}
.logo img{height:34px; width:auto; display:block;}
.nav-links{display:flex; gap:32px; list-style:none;}
.nav-links a{
  color:var(--ls-text-muted); text-decoration:none;
  font-size:14.5px; font-weight:500; transition:color .18s;
}
.nav-links a:hover{color:var(--ls-primary);}
.nav-links a.current{color:var(--ls-primary); font-weight:600;}
.nav-right{display:flex; align-items:center; gap:10px;}
.nav-cta{
  background:var(--ls-primary); color:var(--ls-white);
  padding:11px 22px; border-radius:var(--ls-radius-pill);
  text-decoration:none; font-family:var(--ls-font-display);
  font-size:14px; font-weight:600; transition:background .18s;
}
.nav-cta:hover{background:var(--ls-primary-hover);}
.nav-secret{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--ls-gray-light); border:1px solid var(--ls-border);
  text-decoration:none; flex-shrink:0;
  transition:color .2s, border-color .2s, background .2s;
}
.nav-secret:hover{color:var(--ls-accent-text); border-color:var(--ls-accent); background:var(--ls-accent-tint);}
.hamburger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px;}
.hamburger span{width:22px; height:2px; background:var(--ls-primary); border-radius:2px; transition:.2s;}

/* ═══ EYEBROW ════════════════════════════════════════════════ */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ls-font-display);
  font-size:12px; font-weight:600; letter-spacing:var(--ls-track-caps);
  text-transform:uppercase; color:var(--ls-primary);
  background:var(--ls-primary-soft); padding:7px 15px;
  border-radius:var(--ls-radius-pill); margin-bottom:20px;
}
.eyebrow.accent{color:var(--ls-accent-text); background:var(--ls-accent-soft);}
.eyebrow.on-dark{color:var(--ls-accent-on-dark); background:rgba(255,152,56,.14);}

/* ═══ TOMBOL ═════════════════════════════════════════════════ */
.btn-primary,.btn-accent,.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ls-font-display); font-weight:600; font-size:15px;
  padding:14px 28px; border-radius:var(--ls-radius-pill);
  text-decoration:none; border:0; cursor:pointer; transition:background .18s, color .18s;
}
.btn-primary{background:var(--ls-primary); color:var(--ls-white);}
.btn-primary:hover{background:var(--ls-primary-hover); color:var(--ls-white);}
/* teks navy di atas oranye = 6.28:1 — jangan diganti putih */
.btn-accent{background:var(--ls-accent); color:var(--ls-primary);}
.btn-accent:hover{background:var(--ls-accent-hover); color:var(--ls-white);}
.btn-ghost{background:transparent; color:var(--ls-primary); box-shadow:inset 0 0 0 1.5px var(--ls-border);}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ls-primary);}
.btn-text{
  color:var(--ls-primary); text-decoration:none;
  font-family:var(--ls-font-display); font-weight:600; font-size:15px;
  display:inline-flex; align-items:center; gap:6px;
}
.btn-text:hover{color:var(--ls-accent-text);}
.on-dark .btn-primary{background:var(--ls-accent); color:var(--ls-primary);}
.on-dark .btn-primary:hover{background:var(--ls-accent-hover); color:var(--ls-white);}

/* ═══ PILAR ══════════════════════════════════════════════════ */
.pillar-tag{
  display:inline-flex; align-self:flex-start; align-items:center; gap:7px;
  font-family:var(--ls-font-display); font-size:11.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ls-accent-text); background:var(--ls-accent-tint);
  padding:5px 12px; border-radius:var(--ls-radius-pill);
}
.pillar-tag img{width:14px; height:14px;}
.pillar-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.pillar-row .dot{width:4px; height:4px; border-radius:50%; background:var(--ls-accent);}
.pillar-row b{font-family:var(--ls-font-display); font-weight:600; font-size:15px; color:var(--ls-primary);}
.on-dark .pillar-row b{color:var(--ls-white);}
.on-dark .pillar-tag{color:var(--ls-accent-on-dark); background:rgba(255,152,56,.14);}

/* ═══ KARTU ══════════════════════════════════════════════════ */
.card{
  padding:32px 28px; border-radius:var(--ls-radius-lg);
  background:var(--ls-bg-soft); border:1px solid var(--ls-border);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--ls-shadow-md); border-color:var(--ls-navy-100);}
.card h3{margin-bottom:10px;}
.card p{font-size:14.5px; color:var(--ls-text-muted);}
.card.is-dark{background:var(--ls-primary); border-color:var(--ls-primary);}
.card.is-dark h3{color:var(--ls-white);}
.card.is-dark p{color:#C9D6E8;}
.card.is-dark a{color:var(--ls-accent-on-dark);}
.card.is-dark .pillar-tag{color:var(--ls-accent-on-dark); background:rgba(255,152,56,.15);}

/* ═══ SECTION GELAP ══════════════════════════════════════════ */
.on-dark{background:var(--ls-primary); color:#C9D6E8; position:relative; overflow:hidden;}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--ls-white);}
.on-dark .accent{color:var(--ls-accent-on-dark);}
.on-dark .bgart{
  position:absolute; inset:0; opacity:.45; pointer-events:none;
  background:url('patterns/pattern-network-dark.svg') right center/cover no-repeat;
  /* pattern memudar di sisi kiri agar tidak pernah berada tepat di belakang teks */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,#000 78%);
  mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,#000 78%);
}

/* ═══ FOOTER ═════════════════════════════════════════════════ */
.site-footer{background:var(--ls-primary-deep); color:#8FA4C0; padding:56px 32px 32px; font-size:13.5px;}
.site-footer .inner{max-width:var(--ls-maxw); margin:0 auto;}
.site-footer .top{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-start;}
.site-footer img.f-logo{height:38px; width:auto;}
.site-footer .cols{display:flex; gap:56px; flex-wrap:wrap;}
.site-footer h4{font-size:12px; letter-spacing:var(--ls-track-caps); text-transform:uppercase; color:var(--ls-accent-on-dark); margin-bottom:12px; font-weight:600;}
.site-footer a{color:#C9D6E8; text-decoration:none; display:block; margin-bottom:8px;}
.site-footer a:hover{color:var(--ls-white);}
.site-footer .bar{
  margin-top:40px; padding-top:20px; border-top:1px solid rgba(255,255,255,.10);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px;
}
.site-footer .bar strong{color:var(--ls-white); font-weight:500;}

/* ═══ AKSESIBILITAS ══════════════════════════════════════════ */
a:focus-visible,button:focus-visible{outline:2px solid var(--ls-accent); outline-offset:2px; border-radius:4px;}
.skip-link{
  position:absolute; left:-9999px; top:8px; background:var(--ls-primary); color:#fff;
  padding:10px 18px; border-radius:var(--ls-radius-pill); z-index:999; font-size:14px;
}
.skip-link:focus{left:16px;}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important;}}

/* ═══ RESPONSIF ══════════════════════════════════════════════ */
@media (max-width:820px){
  nav{position:relative; flex-wrap:nowrap; gap:8px; padding:14px 20px;}
  .logo img{height:28px;}
  .nav-right{order:2; margin-left:auto; gap:8px;}
  .hamburger{order:3;}
  .nav-links{order:4;}
  .nav-cta{padding:10px 15px; font-size:12.5px; white-space:nowrap;}
  .nav-secret{width:32px; height:32px;}
  .nav-links{
    display:none; flex-direction:column; gap:16px;
    position:absolute; top:64px; left:0; right:0; background:var(--ls-bg);
    padding:24px 20px; border-bottom:1px solid var(--ls-border);
    box-shadow:var(--ls-shadow-md); z-index:100;
  }
  .nav-links.open{display:flex;}
  .hamburger{display:flex;}
  .wrap{padding:0 20px;}
  .site-footer .cols{gap:32px;}
}

/* ═══ KOMPONEN HALAMAN (dipakai halaman layanan) ═════════════ */
.section{padding:24px 32px 88px; max-width:var(--ls-maxw); margin:0 auto;}
.section.tight{padding-top:0;}
.section-head{text-align:center; max-width:600px; margin:0 auto 48px;}
.section-head p{color:var(--ls-text-muted); font-size:16px; margin-top:12px;}
.section-head .eyebrow{margin-left:auto; margin-right:auto;}

.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.feature{
  background:var(--ls-bg-soft); border:1px solid var(--ls-border);
  border-radius:var(--ls-radius-lg); padding:32px 26px; transition:transform .2s, box-shadow .2s;
}
.feature:hover{transform:translateY(-3px); box-shadow:var(--ls-shadow-md);}
.feature-icon{
  width:46px; height:46px; border-radius:var(--ls-radius-md);
  background:var(--ls-white); border:1px solid var(--ls-border);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.feature-icon img{width:24px; height:24px;}
.feature h3{font-size:17.5px; margin-bottom:8px;}
.feature p{font-size:14px; color:var(--ls-text-muted);}

.who{max-width:860px; margin:0 auto; padding:72px 32px;}
.who-card{
  border:1px solid var(--ls-navy-100); background:var(--ls-primary-tint);
  border-radius:var(--ls-radius-lg); padding:32px; border-left:4px solid var(--ls-accent);
}
.who-card h3{font-size:19px; margin-bottom:8px;}
.who-card p{font-size:15.5px; color:var(--ls-text);}

.bottom-cta{
  border-radius:var(--ls-radius-xl); padding:56px 48px;
  display:flex; justify-content:space-between; align-items:center; gap:28px;
  max-width:1116px; margin:0 auto 80px;
}
.bottom-cta h3{font-size:26px; font-weight:600; max-width:450px; line-height:1.35; position:relative; z-index:2;}
.bottom-cta .cta-side{position:relative; z-index:2;}

.model{background:var(--ls-bg-soft); padding:80px 32px;}
.model-inner{max-width:800px; margin:0 auto;}
.model-inner p{color:var(--ls-text); font-size:16px; margin-top:16px;}
.model-inner .eyebrow{margin-bottom:16px;}
.note-box{
  margin-top:26px; padding:18px 22px; background:var(--ls-accent-tint);
  border-left:3px solid var(--ls-accent); border-radius:0 var(--ls-radius-md) var(--ls-radius-md) 0;
  font-size:14.5px; color:var(--ls-text);
}
.note-box strong{color:var(--ls-accent-text);}

@media (max-width:820px){
  .section{padding:16px 20px 64px;}
  .feature-grid{grid-template-columns:1fr;}
  .who{padding:56px 20px;}
  .model{padding:64px 20px;}
  .bottom-cta{flex-direction:column; text-align:center; align-items:center; padding:40px 28px;}
}