:root{
  --blue-deep:#1d3d87;
  --blue:#2456b3;
  --blue-bright:#3f7fd6;
  --sky:#dcebfb;
  --sky-soft:#eef5fd;
  --paper:#ffffff;
  --ink:#152744;
  --mute:#5f7290;
  --line:#dbe6f4;
  --radius:4px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Work Sans',sans-serif;color:var(--ink);background:var(--paper);overflow-x:hidden;-webkit-font-smoothing:antialiased;}
h1,h2,h3,.eyebrow,.km-tag{font-family:'Oswald',sans-serif;letter-spacing:.02em;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
section{position:relative;}

.logo-lockup{display:flex;align-items:center;gap:11px;}
.logo-icon{width:40px;height:40px;flex-shrink:0;}
.logo-word{font-family:'Oswald',sans-serif;font-weight:700;line-height:.92;letter-spacing:.01em;transform:skewX(-7deg);color:var(--blue-deep);}
.logo-word .l1,.logo-word .l2{display:block;font-size:1.02rem;}
.logo-lockup.big .logo-icon{width:74px;height:74px;}
.logo-lockup.big .logo-word .l1,.logo-lockup.big .logo-word .l2{font-size:2rem;}
.on-blue .logo-word{color:#fff;}

.km-tag{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;letter-spacing:.18em;color:var(--blue);text-transform:uppercase;margin-bottom:14px;font-weight:600;}
.km-tag::before{content:'';width:26px;height:1px;background:var(--blue);}
.section-dark .km-tag{color:var(--sky);}
.section-dark .km-tag::before{background:var(--sky);}

header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.nav-inner{max-width:1180px;margin:0 auto;padding:13px 28px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
nav ul{display:none;list-style:none;gap:28px;}
@media(min-width:820px){nav ul{display:flex;}}
nav a{color:var(--ink);font-size:.85rem;letter-spacing:.03em;opacity:.78;transition:opacity .2s,color .2s;}
nav a:hover{opacity:1;color:var(--blue);}
.nav-cta{background:var(--blue);color:#fff;padding:9px 18px;font-size:.8rem;font-weight:600;letter-spacing:.03em;border-radius:var(--radius);display:none;transition:background .2s;}
.nav-cta:hover{background:var(--blue-deep);}
@media(min-width:820px){.nav-cta{display:inline-block;}}
.nav-right{display:flex;align-items:center;gap:12px;}

/* Hamburger menu — navigasi untuk layar di bawah 820px (mobile & tablet portrait),
   yang sebelumnya tidak punya cara apapun mengakses menu Tentang/Layanan/dst
   selain men-scroll manual. */
.nav-toggle{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:8px;border:1px solid var(--line);
  background:#fff;cursor:pointer;flex-shrink:0;padding:0;
  transition:background .2s, border-color .2s;
}
.nav-toggle:hover{background:var(--sky-soft);border-color:var(--blue);}
.nav-toggle svg{width:18px;height:18px;color:var(--blue-deep);}
@media(min-width:820px){.nav-toggle{display:none;}}

.mobile-nav{
  position:fixed;top:0;right:0;bottom:0;width:min(78vw,320px);z-index:60;
  background:#fff;box-shadow:-12px 0 40px rgba(20,40,90,.18);
  display:flex;flex-direction:column;padding:24px 22px;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;}
.mobile-nav-close{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--sky-soft);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--blue-deep);padding:0;
}
.mobile-nav-close svg{width:16px;height:16px;}
.mobile-nav ul{list-style:none;display:flex;flex-direction:column;gap:4px;}
.mobile-nav a{display:block;padding:13px 4px;font-size:1rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);}
.mobile-nav .nav-cta{display:block;text-align:center;margin-top:20px;}
.nav-overlay{
  position:fixed;inset:0;z-index:59;background:rgba(15,28,60,.45);
  opacity:0;visibility:hidden;transition:opacity .3s ease, visibility .3s ease;
}
.nav-overlay.open{opacity:1;visibility:visible;}
@media(min-width:820px){.mobile-nav,.nav-overlay{display:none;}}

.hero{background:linear-gradient(170deg,#ffffff 0%, var(--sky-soft) 60%, var(--sky) 100%);color:var(--ink);padding:140px 0 80px;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(90deg, transparent 0 78px, rgba(29,61,135,.04) 78px 79px),repeating-linear-gradient(0deg, transparent 0 78px, rgba(29,61,135,.04) 78px 79px);pointer-events:none;}
.hero-grid{position:relative;z-index:2;display:grid;gap:34px;}
.hero .eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:10px;}
.hero .eyebrow::before{content:'';width:30px;height:2px;background:var(--blue);}
.hero h1{font-size:clamp(2.3rem,6.4vw,4.1rem);line-height:1.04;font-weight:700;max-width:800px;color:var(--blue-deep);}
.hero h1 span{color:var(--blue-bright);}
.hero p.lead{margin-top:22px;font-size:clamp(1rem,2vw,1.18rem);line-height:1.65;color:#3a4f6e;max-width:580px;}
.hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;}
.btn{padding:14px 26px;font-size:.88rem;font-weight:600;letter-spacing:.02em;border-radius:var(--radius);cursor:pointer;border:none;display:inline-flex;align-items:center;gap:8px;transition:transform .2s, box-shadow .2s, background .2s;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{box-shadow:0 10px 24px rgba(36,86,179,.32);background:var(--blue-deep);}
.btn-ghost{background:transparent;color:var(--blue-deep);border:1.5px solid var(--blue);}
.btn-ghost:hover{background:var(--blue);color:#fff;}

.stat-strip{position:relative;z-index:2;margin-top:50px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
@media(min-width:780px){.stat-strip{grid-template-columns:repeat(4,1fr);}}
.stat{border-top:2px solid var(--blue);padding-top:14px;}
.stat .num{font-family:'JetBrains Mono',monospace;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;color:var(--blue-deep);}
.stat .label{font-size:.78rem;color:var(--mute);margin-top:4px;letter-spacing:.02em;}

.section{padding:96px 0;}
.section-light{background:var(--paper);}
.section-soft{background:var(--sky-soft);}
.section-dark{background:var(--blue-deep);color:#fff;}
h2.headline{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:700;line-height:1.15;max-width:700px;margin-bottom:18px;color:var(--blue-deep);}
.section-dark h2.headline{color:#fff;}
.lede{font-size:1.02rem;color:var(--mute);max-width:620px;line-height:1.7;}
.section-dark .lede{color:#c5d8f2;}

.about-grid{display:grid;gap:44px;margin-top:46px;}
@media(min-width:880px){.about-grid{grid-template-columns:1.1fr .9fr;align-items:start;}}
.about-text p{margin-bottom:16px;color:#3a4f6e;line-height:1.75;font-size:.98rem;}
.about-text strong{color:var(--blue-deep);}
.about-panel{background:var(--blue-deep);color:#fff;padding:32px;border-radius:var(--radius);border-left:4px solid var(--blue-bright);box-shadow:0 14px 40px rgba(29,61,135,.18);}
.about-panel h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:18px;}
.about-panel ul{list-style:none;}
.about-panel li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:.92rem;}
.about-panel li:last-child{border-bottom:none;}
.about-panel li span:first-child{color:#c5d8f2;}
.about-panel li span:last-child{font-family:'JetBrains Mono',monospace;color:#fff;font-weight:600;text-align:right;}

.svc-grid{display:grid;gap:22px;margin-top:48px;grid-template-columns:1fr;}
@media(min-width:680px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1020px){.svc-grid{grid-template-columns:repeat(3,1fr);}}
.svc-card{background:#fff;border:1px solid var(--line);padding:28px 24px;border-radius:var(--radius);transition:border-color .25s, transform .25s, box-shadow .25s;}
.svc-card:hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:0 12px 30px rgba(36,86,179,.12);}
.svc-icon{width:42px;height:42px;margin-bottom:18px;color:var(--blue);}
.svc-card h3{font-size:1.05rem;font-weight:600;margin-bottom:10px;letter-spacing:.01em;color:var(--blue-deep);}
.svc-card p{font-size:.88rem;color:var(--mute);line-height:1.6;}

.fleet-grid{display:grid;gap:20px;margin-top:48px;grid-template-columns:1fr;}
@media(min-width:680px){.fleet-grid{grid-template-columns:repeat(2,1fr);}}
.fleet-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:26px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;}
.fleet-card .ficon{width:74px;height:74px;flex-shrink:0;}
.fleet-card h3{font-size:1.1rem;font-weight:600;color:#fff;margin-bottom:6px;}
.fleet-card p{font-size:.85rem;color:#c5d8f2;line-height:1.55;}
.fleet-card .tag{display:inline-block;margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:.72rem;color:#fff;border:1px solid var(--blue-bright);background:rgba(63,127,214,.25);padding:3px 9px;border-radius:20px;}
.fleet-total{margin-top:34px;text-align:center;font-family:'JetBrains Mono',monospace;color:#c5d8f2;font-size:.85rem;}
.fleet-total b{color:#fff;font-size:1.3rem;}

.flow{margin-top:54px;position:relative;}
.flow-line{position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:repeating-linear-gradient(to bottom, var(--blue) 0 10px, transparent 10px 20px);}
@media(min-width:780px){.flow-line{display:none;}}
.flow-steps{display:grid;gap:0;grid-template-columns:1fr;}
@media(min-width:780px){.flow-steps{grid-template-columns:repeat(4,1fr);gap:18px;}}
.flow-step{position:relative;padding:0 0 38px 52px;}
@media(min-width:780px){.flow-step{padding:38px 0 0 0;border-top:2px dashed var(--line);}}
.flow-step .km{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;border:2px solid var(--blue);}
@media(min-width:780px){.flow-step .km{position:static;width:40px;height:40px;margin-bottom:16px;}}
.flow-step h3{font-size:1rem;font-weight:600;margin-bottom:8px;color:var(--blue-deep);}
.flow-step p{font-size:.86rem;color:var(--mute);line-height:1.6;}

.cov-wrap{display:grid;gap:40px;margin-top:48px;}
@media(min-width:880px){.cov-wrap{grid-template-columns:1fr 1fr;align-items:center;}}
.cov-list{display:grid;gap:14px;}
.cov-item{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);padding:18px 20px;border-radius:var(--radius);}
.cov-item .pin{width:36px;height:36px;flex-shrink:0;color:var(--sky);}
.cov-item h4{font-size:1rem;font-weight:600;color:#fff;}
.cov-item span{font-size:.8rem;color:#c5d8f2;}
.cov-map{display:flex;justify-content:center;}
.java-map{position:relative;width:100%;max-width:560px;}
.java-map>img{width:100%;display:block;height:auto;filter:drop-shadow(0 8px 22px rgba(0,0,0,.25));}
.mp{position:absolute;transform:translate(-50%,-100%);width:20px;height:20px;pointer-events:none;}
.mp .pin-ic{width:20px;height:20px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));}
.mp .lbl{position:absolute;left:50%;transform:translateX(-50%);bottom:100%;margin-bottom:3px;font-family:'Oswald',sans-serif;font-weight:700;font-size:.62rem;letter-spacing:.04em;color:#fff;background:rgba(29,61,135,.92);padding:2px 7px;border-radius:20px;white-space:nowrap;border:1px solid rgba(255,255,255,.25);}
.mp.below .lbl{bottom:auto;top:100%;margin-bottom:0;margin-top:3px;}
@media(max-width:520px){.mp .lbl{font-size:.52rem;padding:1px 5px;}.mp .pin-ic{width:16px;height:16px;}}

.client-strip{margin-top:48px;}
.client-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);}
@media(min-width:680px){.client-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:980px){.client-grid{grid-template-columns:repeat(4,1fr);}}
.client-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:108px;transition:border-color .2s, transform .2s, box-shadow .2s;}
.client-card:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 10px 24px rgba(36,86,179,.12);}
.client-card .ci{width:30px;height:30px;color:var(--blue);margin-bottom:10px;}
.client-card span{font-size:.78rem;font-weight:600;line-height:1.35;color:var(--ink);}

.contact-wrap{display:grid;gap:40px;margin-top:48px;}
@media(min-width:880px){.contact-wrap{grid-template-columns:1fr 1fr;}}
.contact-info{display:grid;gap:18px;align-content:start;}
.contact-item{display:flex;gap:16px;align-items:flex-start;}
.contact-item .ic{width:22px;height:22px;color:var(--sky);flex-shrink:0;margin-top:2px;}
.contact-item h4{font-size:.92rem;font-weight:600;color:#fff;margin-bottom:3px;}
.contact-item p{font-size:.86rem;color:#c5d8f2;line-height:1.5;}
.contact-form{background:#fff;border:1px solid var(--line);padding:28px;border-radius:var(--radius);box-shadow:0 18px 50px rgba(0,0,0,.14);}
.contact-form .frow{margin-bottom:16px;}
.contact-form label{display:block;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:7px;}
.contact-form input, .contact-form select, .contact-form textarea{width:100%;background:var(--sky-soft);border:1px solid var(--line);color:var(--ink);padding:11px 13px;border-radius:var(--radius);font-family:'Work Sans',sans-serif;font-size:16px;}
.contact-form textarea{resize:vertical;min-height:90px;}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:1.5px solid var(--blue);background:#fff;}

footer{background:var(--blue-deep);border-top:4px solid var(--blue-bright);padding:36px 0;color:#c5d8f2;}
.foot-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:.8rem;align-items:center;}
.foot-admin-link{color:#8aa6d9;font-size:.72rem;opacity:.7;transition:opacity .2s;}
.foot-admin-link:hover{opacity:1;color:#fff;}

.skeleton{opacity:.4;}

::selection{background:var(--blue);color:#fff;}

/* ============================================================
   BOOT LOADER — layar pembuka singkat saat website pertama dibuka.
   Satu momen yang diorkestrasi (logo muncul, garis progres mengisi,
   lalu fade-out halus) alih-alih sekadar bar tipis di pojok atas.
   ============================================================ */
.boot-loader{
  position:fixed;inset:0;z-index:9999;
  background:linear-gradient(170deg,#0d1b3d 0%, var(--blue-deep) 55%, var(--blue) 100%);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .55s ease, visibility .55s ease;
}
.boot-loader.boot-hide{opacity:0;visibility:hidden;pointer-events:none;}
.boot-loader-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px;}
.boot-logo{
  width:56px;height:56px;
  opacity:0;transform:scale(.7);
  animation:bootLogoIn .6s cubic-bezier(.2,.8,.2,1) .1s forwards;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.35));
}
@keyframes bootLogoIn{to{opacity:1;transform:scale(1);}}
.boot-word{
  font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.14em;
  font-size:.92rem;color:#fff;text-transform:uppercase;
  opacity:0;transform:translateY(6px);
  animation:bootWordIn .5s ease .35s forwards;
}
.boot-word span{display:block;color:#9cc2f5;font-size:.68rem;letter-spacing:.22em;margin-top:3px;}
@keyframes bootWordIn{to{opacity:1;transform:translateY(0);}}
.boot-track{width:160px;height:3px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden;opacity:0;animation:bootWordIn .5s ease .5s forwards;}
.boot-fill{width:0%;height:100%;background:linear-gradient(90deg,#3f7fd6,#9cc2f5);border-radius:3px;transition:width .25s ease;}
/* Grid halus bergerak pelan di latar — kesan "futuristik" tanpa ramai */
.boot-grid{
  position:absolute;inset:-10% -10%;z-index:1;opacity:.35;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 64px);
  animation:bootGridDrift 14s linear infinite;
}
@keyframes bootGridDrift{from{transform:translate(0,0);}to{transform:translate(64px,64px);}}

@media(prefers-reduced-motion:reduce){
  .boot-logo,.boot-word,.boot-track{animation:none !important;opacity:1 !important;transform:none !important;}
  .boot-grid{animation:none !important;}
}

/* ============================================================
   TRANSISI MASUK KONTEN — setelah boot loader hilang, konten utama
   fade+rise masuk dengan halus alih-alih muncul mendadak.
   ============================================================ */
header, main, footer{opacity:0;transform:translateY(10px);}
body.page-ready header,
body.page-ready main,
body.page-ready footer{
  opacity:1;transform:translateY(0);
  transition:opacity .6s ease, transform .6s ease;
}
body.page-ready main{transition-delay:.05s;}
body.page-ready footer{transition-delay:.1s;}

/* ============================================================
   SCROLL REVEAL — setiap section masuk dengan fade+rise halus saat
   pertama kali terlihat ketika di-scroll, dipicu via IntersectionObserver
   di app.js (kelas .in-view ditambahkan sekali, tidak berulang).
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in-view{opacity:1;transform:translateY(0);}
/* Anak-anak kartu/grid item diberi jeda kecil antar elemen agar terasa "mengalir" */
.reveal .svc-card, .reveal .fleet-card, .reveal .flow-step, .reveal .client-card, .reveal .cov-item, .reveal .contact-item, .reveal .stat{
  opacity:0;transform:translateY(16px);
  transition:opacity .55s ease, transform .55s ease;
}
.reveal.in-view .svc-card, .reveal.in-view .fleet-card, .reveal.in-view .flow-step,
.reveal.in-view .client-card, .reveal.in-view .cov-item, .reveal.in-view .contact-item, .reveal.in-view .stat{
  opacity:1;transform:translateY(0);
}
.reveal.in-view .svc-card:nth-child(1),.reveal.in-view .fleet-card:nth-child(1),.reveal.in-view .flow-step:nth-child(1),.reveal.in-view .client-card:nth-child(1),.reveal.in-view .stat:nth-child(1){transition-delay:.03s;}
.reveal.in-view .svc-card:nth-child(2),.reveal.in-view .fleet-card:nth-child(2),.reveal.in-view .flow-step:nth-child(2),.reveal.in-view .client-card:nth-child(2),.reveal.in-view .stat:nth-child(2){transition-delay:.09s;}
.reveal.in-view .svc-card:nth-child(3),.reveal.in-view .fleet-card:nth-child(3),.reveal.in-view .flow-step:nth-child(3),.reveal.in-view .client-card:nth-child(3),.reveal.in-view .stat:nth-child(3){transition-delay:.15s;}
.reveal.in-view .svc-card:nth-child(4),.reveal.in-view .fleet-card:nth-child(4),.reveal.in-view .flow-step:nth-child(4),.reveal.in-view .client-card:nth-child(4),.reveal.in-view .stat:nth-child(4){transition-delay:.21s;}
.reveal.in-view .svc-card:nth-child(5),.reveal.in-view .client-card:nth-child(5){transition-delay:.27s;}
.reveal.in-view .svc-card:nth-child(6),.reveal.in-view .client-card:nth-child(6){transition-delay:.33s;}
.reveal.in-view .client-card:nth-child(7){transition-delay:.39s;}

@media(prefers-reduced-motion:reduce){
  header,main,footer{opacity:1 !important;transform:none !important;}
  .reveal,.reveal *{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* ============================================================
   MICRO-INTERACTIONS — transisi halus untuk elemen interaktif yang
   sebelumnya berubah "kasar" tanpa transisi sama sekali.
   ============================================================ */
nav a{position:relative;}
nav a::after{
  content:'';position:absolute;left:0;bottom:-6px;width:100%;height:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
nav a:hover::after{transform:scaleX(1);}
.svc-card,.fleet-card,.client-card,.menu-card{transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;}
.btn{transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;}
header{transition:background .3s ease, box-shadow .3s ease, transform .6s ease;}
header.scrolled{box-shadow:0 6px 24px rgba(20,40,90,.1);}
img{transition:opacity .3s ease;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}