/* =====================================================================
   LSS LOGISTICS — stylesheet utama
   Token warna & font mengikuti template asli.
   ===================================================================== */

/* ============ TOKENS ============ */
:root{
  --ink:#0A1733; --ink-70:#3A4763; --ink-45:#6B7690; --ink-25:#A7AFC2;
  --blue:#1E5EFF; --blue-d:#1747CC; --blue-l:#EAF0FF; --blue-xl:#F5F8FF;
  --mint:#00C2A8; --mint-l:#E4FAF6;
  --amber:#FF9F1C; --rose:#FF4D6D;
  --white:#fff; --cloud:#F2F5FA; --line:#E4E9F2; --line-s:#EEF2F8;
  --r-s:10px; --r:14px; --r-l:20px; --r-xl:28px;
  --sh-1:0 1px 2px rgba(10,23,51,.06), 0 2px 8px rgba(10,23,51,.04);
  --sh-2:0 2px 4px rgba(10,23,51,.04), 0 12px 28px -8px rgba(10,23,51,.12);
  --sh-3:0 4px 8px rgba(10,23,51,.04), 0 24px 60px -16px rgba(10,23,51,.22);
  --sh-blue:0 10px 30px -8px rgba(30,94,255,.45);
  --ease:cubic-bezier(.22,1,.36,1);
  --nav-h:74px;
  --max:1200px;
}
*,*::before,*::after{box-sizing:border-box}
/* scroll-padding menjaga anchor (#layanan, #faq) tidak tertutup navbar fixed */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 14px)}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
  /* ruang untuk navbar yang fixed di atas layar */
  padding-top:var(--nav-h);
  /* clip, bukan hidden: hidden membuat body jadi wadah gulir sendiri
     dan bisa merusak elemen yang menempel di layar */
  overflow-x:clip;
}
@supports not (overflow-x:clip){ body{overflow-x:hidden} }
h1,h2,h3,h4,h5,.dsp{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--ink); margin:0; line-height:1.15; letter-spacing:-.022em; font-weight:800}
p{margin:0}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
button,input,select,textarea{font:inherit; color:inherit}
::selection{background:var(--blue); color:#fff}
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ TYPE SCALE ============ */
.h-xl{font-size:clamp(2.1rem,6.2vw,3.9rem); line-height:1.06; letter-spacing:-.035em}
.h-l{font-size:clamp(1.65rem,4.1vw,2.7rem); letter-spacing:-.03em; line-height:1.12}
.h-m{font-size:clamp(1.2rem,2.3vw,1.5rem); letter-spacing:-.02em}
.h-s{font-size:1.03rem; font-weight:700; letter-spacing:-.012em}
.lead{font-size:clamp(1rem,1.5vw,1.115rem); color:var(--ink-70); line-height:1.7}
.muted{color:var(--ink-45)}
.tiny{font-size:.79rem; letter-spacing:.01em}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue);
}
.eyebrow::before{content:''; width:22px; height:2px; background:currentColor; border-radius:2px; opacity:.55}

/* ============ BUTTONS ============ */
.btn{
  --bg:var(--blue); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 24px; border-radius:999px; border:1px solid transparent;
  background:var(--bg); color:var(--fg); cursor:pointer; white-space:nowrap;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.945rem; letter-spacing:-.01em;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), background .2s ease, border-color .2s;
  will-change:transform; overflow:hidden; isolation:isolate;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.btn::after{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.28) 45%,transparent 70%);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
.btn:hover::after{transform:translateX(120%)}
.btn-primary{box-shadow:var(--sh-blue)}
.btn-primary:hover{background:var(--blue-d); transform:translateY(-2px)}
.btn-ghost{--bg:transparent; --fg:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-25); background:var(--cloud); transform:translateY(-2px)}
/* Lapisan putih tipis MENERANGKAN latar sehingga tulisan putih di atasnya
   tinggal 3,47:1. Lapisan gelap membuat tombolnya justru lebih kontras. */
.btn-light{--bg:rgba(8,20,46,.34); --fg:#fff; border-color:rgba(255,255,255,.52); backdrop-filter:blur(8px)}
.btn-light:hover{--bg:rgba(8,20,46,.52); border-color:#fff; transform:translateY(-2px)}
.btn-dark{--bg:var(--ink); --fg:#fff}
.btn-dark:hover{transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(10,23,51,.5)}
.btn-wa{--bg:#25D366; --fg:#053}
.btn-wa:hover{--bg:#1EBE5A; transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(37,211,102,.6)}
.btn-sm{padding:10px 18px; font-size:.87rem}
.btn-lg{padding:17px 32px; font-size:1.01rem}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible,textarea:focus-visible{outline:2px solid var(--blue); outline-offset:3px}

/* ============ TOP TICKER ============ */
.ticker{background:var(--ink); color:#D9E1F2; font-size:.79rem; overflow:hidden; position:relative; z-index:60}
.ticker-track{display:flex; gap:0; width:max-content; animation:slide 42s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-group{display:flex; align-items:center; gap:34px; padding:9px 17px; white-space:nowrap}
.ticker-group span{display:inline-flex; align-items:center; gap:8px}
.dot-live{width:6px;height:6px;border-radius:50%;background:var(--mint); box-shadow:0 0 0 0 rgba(0,194,168,.7); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,194,168,.6)}70%{box-shadow:0 0 0 7px rgba(0,194,168,0)}100%{box-shadow:0 0 0 0 rgba(0,194,168,0)}}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============ HEADER ============ */
.hdr{position:fixed; top:0; left:0; right:0; z-index:200; background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s, background .3s}
.hdr.stuck{border-bottom-color:var(--line-s); box-shadow:0 6px 24px -14px rgba(10,23,51,.28)}
.hdr-in{height:var(--nav-h); display:flex; align-items:center; gap:26px}
/* Boleh menyusut: nama merek & tagline diisi dari admin, panjangnya bebas.
   Tanpa min-width:0 teks panjang akan melebarkan header keluar layar. */
.brand{display:flex; align-items:center; gap:11px; margin-right:auto; min-width:0}
.mark{width:40px; height:40px; border-radius:11px; background:linear-gradient(145deg,var(--blue),#0E3FD1); display:grid; place-items:center; box-shadow:0 6px 16px -6px rgba(30,94,255,.7); position:relative; overflow:hidden; flex-shrink:0}
.mark::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 55%)}
.brand-tx{min-width:0}
.brand-tx b{display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.06rem; letter-spacing:-.03em; line-height:1.1}
.brand-tx small{display:block; font-size:.615rem; letter-spacing:.19em; text-transform:uppercase; color:var(--ink-45); font-weight:600; margin-top:1px}
/* Di header & menu mobile teksnya dipotong dengan titik-titik bila kepanjangan,
   supaya tidak pernah mendorong halaman jadi lebih lebar dari layar. */
.hdr .brand-tx b,.hdr .brand-tx small,
.msheet-hd .brand-tx b,.msheet-hd .brand-tx small{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav{display:flex; align-items:center; gap:2px; flex-shrink:0}
.nav a{position:relative; padding:9px 14px; border-radius:9px; font-size:.9rem; font-weight:500; color:var(--ink-70); transition:color .2s; white-space:nowrap}
.nav a::after{content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2px; border-radius:2px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:var(--ink); font-weight:600}
.hdr-cta{display:flex; align-items:center; gap:12px; flex-shrink:0}
.prog{position:absolute; left:0; bottom:-1px; height:2px; background:linear-gradient(90deg,var(--blue),var(--mint)); width:0; z-index:2}
.burger{display:none}

/* ============ SLIDER ============ */
.slider{position:relative; overflow:hidden; background:var(--ink)}
/* tinggi menyisakan ruang bawah untuk kartu Cek Resi/Tarif yang menumpang naik */
.slides{position:relative; height:clamp(620px,76vh,720px)}
.slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .9s var(--ease), visibility .9s}
.slide.on{opacity:1; visibility:visible}
.slide-bg{position:absolute; inset:0; background-size:cover; background-position:center}
.slide-bg::after{content:''; position:absolute; inset:0}
.slide[data-tema="blue"] .slide-bg{background-image:linear-gradient(125deg,#0A1733 0%,#123AA8 52%,#1E5EFF 100%)}
.slide[data-tema="navy"] .slide-bg{background-image:linear-gradient(125deg,#050D20 0%,#0A1733 48%,#12244A 100%)}
.slide[data-tema="mint"] .slide-bg{background-image:linear-gradient(125deg,#0A1733 0%,#0A5F63 55%,#00C2A8 125%)}
.slide-bg.has-img::after{background:linear-gradient(100deg,rgba(10,23,51,.92) 0%,rgba(10,23,51,.72) 46%,rgba(10,23,51,.35) 100%)}
/* gambar HP hanya dipakai di layar kecil, gambar desktop di layar lebar */
.slide-bg-hp{display:none}
@media (max-width:900px){
  .slide-bg-dt{display:none}
  .slide-bg-hp{display:block}
}
.slide-dots{position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.14) 1px,transparent 0); background-size:24px 24px; opacity:.6}
.slide-wave{position:absolute; left:0; bottom:-2px; width:200%; height:110px; opacity:.16; animation:wave 22s linear infinite}
.slide-in{position:relative; z-index:3; height:100%; display:flex; align-items:center}
.slide-copy{max-width:640px; color:#fff; padding:32px 0 152px}
.slide-copy .eyebrow{color:#7FA9FF}
.slide[data-tema="mint"] .slide-copy .eyebrow{color:#6FE9D6}
.slide-copy h1,.slide-copy h2{color:#fff; font-size:clamp(1.9rem,5vw,3.35rem); line-height:1.07; letter-spacing:-.034em; margin:16px 0 0}
.slide-copy p{color:rgba(255,255,255,.84); margin-top:18px; font-size:clamp(.96rem,1.5vw,1.09rem); line-height:1.7; max-width:530px}
.slide-acts{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.slide.on .slide-copy > *{animation:slideUp .8s var(--ease) both}
.slide.on .slide-copy > *:nth-child(1){animation-delay:.1s}
.slide.on .slide-copy > *:nth-child(2){animation-delay:.2s}
.slide.on .slide-copy > *:nth-child(3){animation-delay:.3s}
.slide.on .slide-copy > *:nth-child(4){animation-delay:.4s}
@keyframes slideUp{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:none}}
.sl-nav{position:absolute; z-index:5; bottom:80px; left:50%; transform:translateX(-50%); width:100%; max-width:var(--max); padding:0 22px; display:flex; align-items:center; gap:14px}
.sl-dots{display:flex; gap:8px; margin-right:auto}
.sl-dot{width:30px; height:4px; border-radius:999px; border:0; padding:0; background:rgba(255,255,255,.3); cursor:pointer; overflow:hidden; position:relative; transition:background .3s}
.sl-dot.on{background:rgba(255,255,255,.32); width:56px}
.sl-dot i{position:absolute; inset:0; background:#fff; transform:scaleX(0); transform-origin:left; display:block}
.sl-dot.on i{animation:dotFill linear forwards}
@keyframes dotFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sl-arrow{width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); backdrop-filter:blur(8px); display:grid; place-items:center; cursor:pointer; transition:.3s var(--ease)}
.sl-arrow:hover{background:rgba(255,255,255,.24); transform:scale(1.07)}
@keyframes wave{to{transform:translateX(-50%)}}

/* ============ TOOL BAR (cek resi + cek tarif) ============ */
.toolbar{position:relative; z-index:20; margin-top:-58px; margin-bottom:8px}
.tool{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-3); overflow:hidden}
.tool-tabs{display:flex; padding:7px; gap:5px; background:var(--cloud); border-bottom:1px solid var(--line-s); position:relative}
.tool-tab{flex:1; position:relative; z-index:2; padding:13px 8px; border:0; background:transparent; border-radius:999px; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.9rem; color:var(--ink-45); display:flex; align-items:center; justify-content:center; gap:8px; transition:color .3s var(--ease)}
.tool-tab.on{color:var(--blue-d)}
.tab-ind{position:absolute; top:7px; height:calc(100% - 14px); background:#fff; border-radius:999px; box-shadow:var(--sh-1); transition:transform .48s var(--ease), width .48s var(--ease); z-index:1}
.tool-body{padding:24px}
.tool-grid{display:grid; grid-template-columns:repeat(4,1fr) auto; gap:12px; align-items:end}
.tool-grid.g3{grid-template-columns:repeat(3,1fr) auto}
.tool-grid.g2{grid-template-columns:2fr auto}
.fld{margin-bottom:0}
.fld label{display:block; font-size:.775rem; font-weight:600; color:var(--ink-70); margin-bottom:7px}
/* warna teks dikunci: tanpa ini input di dalam blok gelap seperti .cta ikut
   mewarisi color:#fff sehingga tulisannya putih di atas kotak putih */
.inp,.sel{width:100%; padding:14px 15px; border:1.5px solid var(--line); border-radius:var(--r); background:#fff; color:var(--ink); font-size:.94rem; transition:border-color .2s, box-shadow .2s}
.inp::placeholder,.ta::placeholder{color:var(--ink-25); opacity:1}
.inp:focus,.sel:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(30,94,255,.11)}
.inp-ico{position:relative}
.inp-ico .inp{padding-left:44px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; letter-spacing:.03em; text-transform:uppercase}
.inp-ico > svg{position:absolute; left:15px; top:50%; transform:translateY(-50%); pointer-events:none}
.sel{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B7690' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; padding-right:38px; cursor:pointer}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px}
.chip{padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:.775rem; cursor:pointer; color:var(--ink-70); transition:.2s var(--ease); font-weight:500}
.chip:hover{border-color:var(--blue); color:var(--blue-d); transform:translateY(-1px)}
.chip.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.tool-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 24px; background:var(--blue-xl); border-top:1px solid var(--line-s); font-size:.79rem; color:var(--ink-45); flex-wrap:wrap}
.tool-foot a{color:var(--blue-d); font-weight:600}

/* ---- RESULT PANELS ---- */
.res{margin-top:18px; border-top:1px dashed var(--line); padding-top:18px; display:none}
.res.show{display:block; animation:fadeUp .5s var(--ease) both}
@keyframes fadeUp{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.res-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.badge{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:.735rem; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif}
.badge-mint{background:var(--mint-l); color:#046B5C}
.badge-blue{background:var(--blue-l); color:var(--blue-d)}
.badge-amber{background:#FFF4E3; color:#A05A00}
.badge-rose{background:#FFE9ED; color:#B01634}
.price{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; letter-spacing:-.035em; font-size:2.15rem; line-height:1; color:var(--ink)}
.brk{margin-top:15px; border:1px solid var(--line-s); border-radius:var(--r); overflow:hidden}
.brk-r{display:flex; justify-content:space-between; gap:12px; padding:10px 14px; font-size:.845rem; border-bottom:1px solid var(--line-s)}
.brk-r:last-child{border-bottom:0}
.brk-r span{color:var(--ink-70)}
.brk-r b{font-family:'Plus Jakarta Sans',sans-serif; font-weight:700}
.brk-r.tot{background:var(--blue-xl)}
.brk-r.tot b{color:var(--blue-d)}
.note{display:flex; gap:9px; margin-top:13px; padding:11px 13px; background:#FFFBF2; border:1px solid #FFE9C7; border-radius:var(--r-s); font-size:.79rem; color:#7A5215; line-height:1.55}
.note svg{flex-shrink:0; margin-top:2px}

/* ---- TRACK TIMELINE ---- */
.tl{position:relative; margin-top:6px; padding-left:26px}
.tl::before{content:''; position:absolute; left:6px; top:8px; bottom:10px; width:2px; background:var(--line); border-radius:2px}
.tl-fill{position:absolute; left:6px; top:8px; width:2px; background:linear-gradient(180deg,var(--mint),var(--blue)); border-radius:2px; height:0; transition:height 1.15s var(--ease) .15s}
.tl-i{position:relative; padding-bottom:19px; opacity:0; transform:translateX(-8px); animation:tlin .45s var(--ease) forwards}
.tl-i:last-child{padding-bottom:2px}
@keyframes tlin{to{opacity:1; transform:none}}
.tl-i::before{content:''; position:absolute; left:-26px; top:5px; width:14px; height:14px; border-radius:50%; background:#fff; border:2.5px solid var(--line); z-index:2}
.tl-i.done::before{border-color:var(--mint); background:var(--mint); box-shadow:0 0 0 4px var(--mint-l)}
.tl-i.now::before{border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px var(--blue-l); animation:pulse2 2.2s infinite}
@keyframes pulse2{0%,100%{box-shadow:0 0 0 4px var(--blue-l)}50%{box-shadow:0 0 0 8px rgba(30,94,255,.09)}}
.tl-i b{display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:.895rem; letter-spacing:-.01em}
.tl-i span{display:block; font-size:.79rem; color:var(--ink-45); margin-top:1px}
.tl-i em{font-style:normal; font-size:.735rem; color:var(--ink-25); letter-spacing:.02em}
.meta-g{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-s); border:1px solid var(--line-s); border-radius:var(--r); overflow:hidden; margin:14px 0}
.meta-g div{background:#fff; padding:10px 13px}
.meta-g small{display:block; font-size:.7rem; color:var(--ink-45); text-transform:uppercase; letter-spacing:.07em; margin-bottom:2px}
.meta-g b{font-size:.87rem; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700}

/* ============ SECTIONS ============ */
section{position:relative}
.sec{padding:84px 0}
.sec-sm{padding:56px 0}
.sec-tint{background:var(--cloud)}
.sec-dark{background:var(--ink); color:#C9D4E8}
.sec-dark h2,.sec-dark h3,.sec-dark h4{color:#fff}
.sec-hd{max-width:660px; margin-bottom:44px}
.sec-hd.ctr{margin-left:auto; margin-right:auto; text-align:center}
.sec-hd h2{margin:14px 0 14px}
.split{display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:42px}
.split .sec-hd{margin-bottom:0}

/* page hero (halaman selain home) */
.phero{position:relative; overflow:hidden; background:linear-gradient(125deg,#0A1733 0%,#123AA8 100%); color:#fff; padding:54px 0 58px}
.phero::before{content:''; position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.14) 1px,transparent 0); background-size:24px 24px; opacity:.55}
.phero::after{content:''; position:absolute; right:-110px; top:-110px; width:360px; height:360px; border-radius:50%; border:64px solid rgba(255,255,255,.06)}
.phero-in{position:relative; z-index:2; max-width:720px}
.phero h1{color:#fff; margin:14px 0 14px}
.phero p{color:rgba(255,255,255,.82); font-size:1.03rem; line-height:1.7}
.phero .eyebrow{color:#8FB4FF}
.crumb{display:flex; align-items:center; gap:8px; font-size:.79rem; color:rgba(255,255,255,.6)}
.crumb a:hover{color:#fff}

/* logos strip */
.strip{border-top:1px solid var(--line-s); border-bottom:1px solid var(--line-s); padding:22px 0; overflow:hidden; background:#fff}
.strip-in{display:flex; align-items:center; gap:14px; width:max-content; animation:slide 36s linear infinite}
.strip-l{display:flex; align-items:center; gap:52px; padding-right:52px}
.strip-l b{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.02rem; color:var(--ink-25); letter-spacing:-.02em; white-space:nowrap; transition:color .3s}
.strip-in:hover b{color:var(--ink-45)}

/* stats — panel bergradasi, bukan tabel kotak */
.stats{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  padding:34px 30px; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(135deg,#0A1733 0%,#12244A 46%,#173166 100%);
  box-shadow:0 24px 60px -24px rgba(10,23,51,.55);
}
.stats-pola{position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.13) 1px,transparent 0); background-size:22px 22px; opacity:.7; pointer-events:none}
.stats-glow{position:absolute; right:-140px; top:-160px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(30,94,255,.45),transparent 68%); pointer-events:none}
.stat{position:relative; z-index:2; padding:14px 18px; border-radius:var(--r-l); transition:background .35s var(--ease), transform .35s var(--ease)}
.stat + .stat::before{content:''; position:absolute; left:-4px; top:22%; bottom:22%; width:1px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.16),transparent)}
.stat:hover{background:rgba(255,255,255,.06); transform:translateY(-3px)}
.stat:hover::before,.stat:hover + .stat::before{opacity:0}
.stat-ic{width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.12); display:grid; place-items:center; margin-bottom:15px; transition:.4s var(--ease)}
.stat-ic svg [stroke]{stroke:#7FA9FF}
.stat-ic svg [fill]:not([fill="none"]){fill:#7FA9FF}
.stat:hover .stat-ic{background:var(--blue); border-color:transparent; transform:rotate(-6deg) scale(1.06)}
.stat:hover .stat-ic svg [stroke]{stroke:#fff}
.stat b{display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:clamp(1.8rem,3.4vw,2.45rem); letter-spacing:-.042em; line-height:1; color:#fff}
/* warna dasar dulu, gradasi hanya bila browser mendukung — supaya angka
   tidak pernah jadi tak terlihat di browser lama */
.stat b i{font-style:normal; color:#7FA9FF}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .stat b i{background:linear-gradient(120deg,#7FA9FF,#00C2A8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
}
.stat-tx{display:block; font-size:.845rem; color:#9DAECB; margin-top:9px; line-height:1.5}

/* service cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.cards.c5{grid-template-columns:repeat(5,1fr)}
.card{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:26px 22px 24px; overflow:hidden; transition:transform .42s var(--ease), box-shadow .42s var(--ease), border-color .3s; display:flex; flex-direction:column}
.card::before{content:''; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--blue),var(--mint)); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease)}
.card:hover{transform:translateY(-6px); box-shadow:var(--sh-2); border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.ico{width:46px; height:46px; border-radius:13px; background:var(--blue-l); display:grid; place-items:center; margin-bottom:16px; transition:transform .45s var(--ease), background .3s; flex-shrink:0}
.card:hover .ico{transform:rotate(-7deg) scale(1.08); background:var(--blue)}
.card:hover .ico svg [stroke]{stroke:#fff}
.card:hover .ico svg [fill]:not([fill="none"]){fill:#fff}
/* var(--mint) hanya 2,26:1 di atas putih; versi gelap ini 6,4:1 */
.card .tag{font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#046B5C; font-family:'Plus Jakarta Sans',sans-serif; margin-bottom:6px}
.card h3{font-size:1.06rem; margin-bottom:8px}
.card p{font-size:.875rem; color:var(--ink-45); line-height:1.62}
.card ul{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:6px}
.card li{font-size:.815rem; color:var(--ink-70); display:flex; gap:7px; align-items:flex-start}
.card li::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--mint); margin-top:8px; flex-shrink:0}
.card .card-cta{margin-top:16px; padding-top:14px; border-top:1px solid var(--line-s); font-size:.82rem; font-weight:700; color:var(--blue-d); font-family:'Plus Jakarta Sans',sans-serif; display:flex; align-items:center; gap:6px}
.card:hover .card-cta svg{transform:translateX(3px)}
.card .card-cta svg{transition:transform .3s var(--ease)}

/* routes table */
.rt-wrap{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh-1)}
.rt-tools{display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line-s); background:#fff}
.rt-scroll{overflow-x:auto}
table.rt{width:100%; border-collapse:collapse; min-width:680px}
.rt th{text-align:left; font-family:'Plus Jakarta Sans',sans-serif; font-size:.715rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45); font-weight:700; padding:12px 18px; background:var(--cloud); border-bottom:1px solid var(--line)}
.rt td{padding:15px 18px; border-bottom:1px solid var(--line-s); font-size:.885rem; vertical-align:middle}
.rt tr:last-child td{border-bottom:0}
.rt tbody tr{transition:background .22s}
.rt tbody tr:hover{background:var(--blue-xl)}
.rt-lane{display:flex; align-items:center; gap:10px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; letter-spacing:-.012em; white-space:nowrap}
.rt-lane i{font-style:normal; color:var(--ink-25)}
.rt td b{font-family:'Plus Jakarta Sans',sans-serif}
.rt .num{font-variant-numeric:tabular-nums; white-space:nowrap}
.rt .off{color:var(--ink-25)}

/* tarif service switcher */
.svc-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px}
.svc-tab{display:flex; align-items:center; gap:9px; padding:12px 18px; border-radius:var(--r); border:1.5px solid var(--line); background:#fff; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.88rem; color:var(--ink-70); transition:.3s var(--ease)}
.svc-tab:hover{border-color:var(--blue); color:var(--blue-d); transform:translateY(-2px)}
.svc-tab.on{background:var(--ink); border-color:var(--ink); color:#fff}
.svc-tab.on svg [stroke]{stroke:#fff}

/* steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative}
.steps::before{content:''; position:absolute; left:8%; right:8%; top:27px; height:2px; background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px)}
.step{position:relative; text-align:left}
.step-n{width:54px; height:54px; border-radius:16px; background:#fff; border:1.5px solid var(--line); display:grid; place-items:center; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.1rem; color:var(--blue); margin-bottom:16px; position:relative; z-index:2; transition:.45s var(--ease)}
.step:hover .step-n{background:var(--blue); color:#fff; border-color:var(--blue); transform:translateY(-4px) rotate(-5deg); box-shadow:var(--sh-blue)}
.step h3{font-size:1rem; margin-bottom:7px}
.step p{font-size:.855rem; color:var(--ink-45); line-height:1.6}

/* why / feature list */
.why{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.feat{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.09)}
.feat:last-child{border-bottom:0}
.feat-ic{width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.07); display:grid; place-items:center; flex-shrink:0; transition:.4s var(--ease)}
.feat:hover .feat-ic{background:var(--blue); transform:scale(1.07)}
.feat h3{font-size:1rem; margin-bottom:5px}
.feat p{font-size:.865rem; color:#8B9BB8; line-height:1.6}
.frame{position:relative; border-radius:var(--r-xl); overflow:hidden; background:linear-gradient(160deg,#12244A,#0A1733); border:1px solid rgba(255,255,255,.09); padding:26px; box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.frame-hd{display:flex; align-items:center; gap:8px; margin-bottom:20px}
.frame-hd i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.frame-hd span{margin-left:auto; font-size:.7rem; color:#6B7C9B; letter-spacing:.06em}
.mini-map{position:relative; height:230px; border-radius:var(--r); background:radial-gradient(600px 300px at 30% 40%,rgba(30,94,255,.16),transparent 70%),#0D1B38; overflow:hidden}
.port{position:absolute; width:9px; height:9px; border-radius:50%; background:var(--mint)}
.port::after{content:attr(data-n); position:absolute; left:14px; top:-5px; font-size:.66rem; color:#9FB0CC; white-space:nowrap; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600}
.port.a{animation:pulse 2.6s infinite}
.lane-svg path{stroke:rgba(30,94,255,.85); stroke-width:1.6; fill:none; stroke-dasharray:5 5; animation:dash 2.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-20}}

/* armada */
.arm{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.arm-c{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:20px 22px; transition:.4s var(--ease); display:flex; gap:16px; align-items:flex-start}
.arm-c:hover{transform:translateY(-4px); box-shadow:var(--sh-2)}
.arm-ic{width:44px; height:44px; border-radius:12px; background:var(--blue-l); display:grid; place-items:center; flex-shrink:0}
.arm-c h3{font-size:.98rem; margin-bottom:3px}
.arm-c .cap{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; color:var(--blue); font-size:.9rem}
.arm-c small{display:block; color:var(--ink-45); font-size:.78rem; margin-top:4px; line-height:1.5}

/* ============ BLOK LANDING PAGE ============ */
/* Jarak antar blok lebih rapat daripada section beranda, karena satu halaman
   bisa berisi sepuluh blok berturut-turut. */
.sec-lp{position:relative; padding:46px 0}
.sec-lp + .sec-lp{padding-top:0}
.sec-lp.sec-tint{padding:46px 0}
.lp-teks{max-width:none}
.lp-teks p{font-size:1.02rem; line-height:1.78; color:var(--ink-70); margin-bottom:16px}
.lp-teks p:last-of-type{margin-bottom:0}
.lp-butir{margin:20px 0 0; padding:0; list-style:none; display:grid; gap:11px}
.lp-butir li{display:flex; gap:11px; align-items:flex-start; font-size:.97rem; color:var(--ink-70); line-height:1.65}
.lp-butir li svg{flex-shrink:0; margin-top:3px}

/* ============ ARTIKEL ============ */
.arts{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.art{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; transition:transform .42s var(--ease), box-shadow .42s var(--ease), border-color .3s}
.art:hover{transform:translateY(-6px); box-shadow:var(--sh-2); border-color:transparent}

/* sampul: pakai foto bila ada, kalau tidak latar bertema.
   .art-media dipakai kartu (.art-cover) maupun halaman baca (.art-hero) */
.art-media{position:relative; display:block; overflow:hidden; background:var(--cloud); flex-shrink:0}
.art-media.has-img{background-size:cover; background-position:center}
.art-cover{aspect-ratio:16/9; transition:transform .6s var(--ease)}
.art:hover .art-cover.has-img{transform:scale(1.05)}
.art-media[data-tema="blue"]{background-image:linear-gradient(135deg,#123AA8,#1E5EFF)}
.art-media[data-tema="navy"]{background-image:linear-gradient(135deg,#0A1733,#12244A)}
.art-media[data-tema="mint"]{background-image:linear-gradient(135deg,#0A5F63,#00C2A8)}
.art-media[data-tema="amber"]{background-image:linear-gradient(135deg,#B36400,#FF9F1C)}
.art-pola{position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.18) 1px,transparent 0); background-size:18px 18px}
.art-ikon{position:absolute; right:18px; bottom:14px; line-height:0; transition:transform .5s var(--ease)}
.art:hover .art-ikon{transform:rotate(-6deg) scale(1.08)}
.art-bd{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1}
.art-meta{display:flex; align-items:center; gap:9px; font-size:.75rem; color:var(--ink-45); margin-bottom:9px}
.art-meta i{width:3px; height:3px; border-radius:50%; background:var(--ink-25); flex-shrink:0}
.art h3{font-size:1.02rem; line-height:1.34; letter-spacing:-.018em; margin-bottom:9px}
.art:hover h3{color:var(--blue-d)}
.art p{font-size:.87rem; color:var(--ink-45); line-height:1.62; flex:1}
.art .card-cta{margin-top:16px; padding-top:14px; border-top:1px solid var(--line-s); font-size:.82rem; font-weight:700; color:var(--blue-d); font-family:'Plus Jakarta Sans',sans-serif; display:flex; align-items:center; gap:6px}
.art:hover .card-cta svg{transform:translateX(3px)}
.art .card-cta svg{transition:transform .3s var(--ease)}

/* halaman detail artikel */
.art-hero{aspect-ratio:21/9; border-radius:var(--r-xl); margin-bottom:34px}
.art-hero .art-ikon{right:30px; bottom:24px}
.art-isi{max-width:720px; margin:0 auto}
.art-isi p{font-size:1.03rem; line-height:1.78; color:var(--ink-70); margin-bottom:18px}
.art-isi h2{font-size:1.28rem; margin:34px 0 14px; letter-spacing:-.024em}
.art-isi ul{margin:0 0 20px; padding:0; list-style:none; display:grid; gap:9px}
.art-isi li{display:flex; gap:11px; align-items:flex-start; font-size:.97rem; color:var(--ink-70); line-height:1.65}
.art-isi li::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--mint); margin-top:9px; flex-shrink:0}
.art-nav{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; max-width:720px; margin:38px auto 0; padding-top:24px; border-top:1px solid var(--line)}

/* testi */
.testi{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.tcard{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:26px 24px; display:flex; flex-direction:column; gap:15px; transition:.4s var(--ease)}
.tcard:hover{transform:translateY(-5px); box-shadow:var(--sh-2)}
.stars{display:flex; gap:2px}
.tcard p{font-size:.925rem; color:var(--ink-70); line-height:1.68; flex:1}
.tperson{display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line-s)}
.tav{width:40px; height:40px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.85rem; flex-shrink:0}
.tperson b{display:block; font-size:.885rem; font-family:'Plus Jakarta Sans',sans-serif}
.tperson small{color:var(--ink-45); font-size:.78rem}

/* sales team */
.sales{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.scard{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:26px 24px; text-align:center; transition:.4s var(--ease)}
.scard:hover{transform:translateY(-5px); box-shadow:var(--sh-2); border-color:transparent}
.sav{width:64px; height:64px; border-radius:50%; margin:0 auto 14px; background:linear-gradient(145deg,var(--blue),#0E3FD1); color:#fff; display:grid; place-items:center; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.1rem; box-shadow:0 8px 20px -8px rgba(30,94,255,.7)}
.scard h3{font-size:1rem}
.scard small{display:block; color:var(--ink-45); font-size:.81rem; margin:3px 0 16px}

/* faq */
.faq{max-width:800px; margin:0 auto}
.q{border-bottom:1px solid var(--line)}
.q button{width:100%; display:flex; align-items:center; gap:16px; padding:21px 4px; background:none; border:0; cursor:pointer; text-align:left; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:1.005rem; letter-spacing:-.015em; color:var(--ink); transition:color .2s}
.q button:hover{color:var(--blue)}
.q .pm{margin-left:auto; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; flex-shrink:0; transition:.4s var(--ease)}
.q.open .pm{background:var(--blue); border-color:var(--blue); transform:rotate(135deg)}
.q.open .pm svg [stroke]{stroke:#fff}
.q .a{overflow:hidden; height:0; transition:height .42s var(--ease)}
.q .a p{padding:0 44px 22px 4px; font-size:.925rem; color:var(--ink-70); line-height:1.72}

/* CTA */
.cta{position:relative; overflow:hidden; border-radius:var(--r-xl); background:linear-gradient(140deg,#123AA8 0%,#1E5EFF 46%,#00C2A8 145%); color:#fff; padding:52px 48px}
.cta::before{content:''; position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.16) 1px,transparent 0); background-size:22px 22px; opacity:.5}
.cta::after{content:''; position:absolute; right:-90px; top:-90px; width:340px; height:340px; border-radius:50%; border:60px solid rgba(255,255,255,.07)}
.cta-in{position:relative; display:grid; grid-template-columns:1fr 400px; gap:44px; align-items:center}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.86); margin-top:14px}
.wa-box{background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.22); border-radius:var(--r-l); padding:20px; backdrop-filter:blur(10px)}
.wa-box .fld{margin-bottom:12px}
/* background-color, bukan background ringkas: yang ringkas ikut menghapus
   background-image sehingga panah dropdown .sel hilang dan select tampak
   seperti kolom teks biasa */
.wa-box .inp,.wa-box .sel{background-color:#fff; border-color:transparent}
.wa-box label{color:#fff}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:11px}

/* footer */
.ftr{background:var(--ink); color:#8FA0BE; padding:64px 0 0; font-size:.885rem}
.ftr a{color:#8FA0BE; transition:color .2s}
.ftr a:hover{color:#fff}
.ftr-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px}
.ftr-grid > div{min-width:0}
.ftr .ftr-h{color:#fff; font-size:.775rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:16px; font-weight:700}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.ftr-bot{border-top:1px solid rgba(255,255,255,.09); padding:20px 0 24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.8rem}
.soc{display:flex; gap:9px; margin-top:18px}
.soc a{width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.07); display:grid; place-items:center; transition:.3s var(--ease)}
.soc a:hover{background:var(--blue); transform:translateY(-3px)}

/* ============ FLOATING WA ============ */
.fabwrap{position:fixed; right:22px; bottom:22px; z-index:180; display:flex; flex-direction:column; align-items:flex-end; gap:10px}
.fabmenu{width:340px; max-width:calc(100vw - 44px); background:#fff; border:1px solid var(--line); border-radius:var(--r-l); box-shadow:0 24px 60px -14px rgba(10,23,51,.35); overflow:hidden; transform-origin:bottom right; animation:fabin .28s var(--ease)}
@keyframes fabin{from{opacity:0; transform:translateY(10px) scale(.96)}to{opacity:1; transform:none}}
.fabmenu-hd{padding:16px 20px 13px; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-45); font-family:'Plus Jakarta Sans',sans-serif; border-bottom:1px solid var(--line-s)}
.fabmenu-i{display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--line-s); transition:background .2s}
.fabmenu-i:last-child{border-bottom:0}
.fabmenu-i:hover{background:var(--blue-xl)}
.fabmenu-av{flex-shrink:0; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(145deg,var(--blue),#0E3FD1); color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1rem; letter-spacing:.02em}
.fabmenu-tx{flex:1; min-width:0}
.fabmenu-tx b{display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:1.05rem; letter-spacing:-.01em}
.fabmenu-tx small{display:block; margin-top:2px; font-size:.86rem; color:var(--ink-45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Selalu tampil di desktop sejak halaman dibuka — tidak lagi menunggu digulir */
.fab{position:relative; display:flex; align-items:center; gap:11px; padding:12px 20px 12px 13px; border-radius:999px; background:#25D366; color:#04361C; box-shadow:0 14px 34px -10px rgba(37,211,102,.65); font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.9rem; transition:box-shadow .3s, transform .3s var(--ease)}
.fab:hover{box-shadow:0 18px 44px -10px rgba(37,211,102,.8)}
.fab i{position:relative; display:grid; place-items:center; width:26px; height:26px; font-style:normal}
.fab i::before{content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(4,54,28,.35); animation:ring 2.4s var(--ease) infinite}
@keyframes ring{0%{transform:scale(.7); opacity:.9}100%{transform:scale(1.5); opacity:0}}

/* ============ MOBILE DOCK ============
   Selalu tampil di layar, tidak bergantung JavaScript, dan tetap di tempat
   saat halaman digulir karena posisinya fixed. */
.dock{
  position:fixed; left:50%; bottom:calc(10px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:190; width:min(430px,calc(100vw - 20px)); display:none;
  background:rgba(255,255,255,.93); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(10,23,51,.09); border-radius:22px; padding:6px;
  box-shadow:0 2px 6px rgba(10,23,51,.06), 0 16px 38px -12px rgba(10,23,51,.34);
}
.dock-in{display:grid; grid-template-columns:repeat(5,1fr); align-items:center}
.dk{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 2px 7px; border-radius:15px; background:none; border:0; cursor:pointer;
  color:var(--ink-45); font-family:'Plus Jakarta Sans',sans-serif; font-size:.625rem; font-weight:700;
  transition:color .25s var(--ease), background .25s var(--ease); text-align:center;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.dk svg{transition:transform .35s var(--ease)}
.dk.on{color:var(--blue-d); background:var(--blue-l)}
.dk.on svg{transform:translateY(-1px) scale(1.08)}
.dk:active{background:var(--cloud)}
.dk:active svg{transform:scale(.88)}

/* tombol WhatsApp di tengah — sengaja dibuat menonjol keluar dari dock */
.dk.mid{color:#fff; background:none}
.dk.mid:active{background:none}
.dk.mid .mid-b{
  width:60px; height:52px; margin-top:-26px; border-radius:19px;
  background:linear-gradient(150deg,#25D366,#12A854);
  display:grid; place-items:center; border:3px solid #fff;
  box-shadow:0 10px 22px -6px rgba(18,168,84,.75);
  transition:transform .35s var(--ease);
}
.dk.mid:active .mid-b{transform:scale(.92)}
.dk.mid span{color:#0E8B47; font-size:.66rem; margin-top:1px}

/* fullscreen mobile menu
   Animasi memakai opacity + geser, bukan clip-path lingkaran: jauh lebih
   ringan di HP sehingga menu terasa langsung terbuka saat disentuh. */
.msheet{position:fixed; inset:0; z-index:300; background:#fff; display:none; flex-direction:column}
.msheet.open{display:flex; animation:sheetIn .24s var(--ease)}
@keyframes sheetIn{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}
.msheet-hd{display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--line-s)}
.msheet-body{flex:1; overflow-y:auto; padding:26px 22px 40px; -webkit-overflow-scrolling:touch}
.mnav{list-style:none; margin:0 0 26px; padding:0}
.mnav li{border-bottom:1px solid var(--line-s); opacity:0; transform:translateY(18px)}
.msheet.open .mnav li{animation:mi .55s var(--ease) forwards; animation-delay:calc(var(--i)*62ms + .16s)}
@keyframes mi{to{opacity:1; transform:none}}
.mnav a{display:flex; align-items:center; gap:14px; padding:17px 2px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:1.32rem; letter-spacing:-.028em}
.mnav a small{margin-left:auto; font-size:.72rem; font-weight:600; color:var(--ink-25)}
.mnav a i{font-style:normal; width:34px; height:34px; border-radius:10px; background:var(--blue-l); display:grid; place-items:center; flex-shrink:0}
.mcta{display:grid; gap:10px; opacity:0; transform:translateY(18px)}
.msheet.open .mcta{animation:mi .55s var(--ease) .58s forwards}
.mcontact{margin-top:26px; padding-top:22px; border-top:1px solid var(--line-s); font-size:.85rem; color:var(--ink-45); opacity:0}
.msheet.open .mcontact{animation:mi .55s var(--ease) .68s forwards}
.xbtn{width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:#fff; display:grid; place-items:center; cursor:pointer; transition:.3s var(--ease); touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.xbtn:hover{background:var(--cloud); transform:rotate(90deg)}
.burger{width:46px; height:46px; border-radius:13px; border:1px solid var(--line); background:#fff; cursor:pointer; place-items:center; padding:0; flex-shrink:0; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:background .2s, border-color .2s}
.burger:active{background:var(--cloud); border-color:var(--ink-25)}
.burger span{display:block; width:17px; height:2px; background:var(--ink); border-radius:2px; margin:3.4px auto; transition:.4s var(--ease)}
.burger span:nth-child(2){width:12px; margin-left:auto; margin-right:13.5px}

/* ============ REVEAL ============
   Disembunyikan hanya bila JavaScript aktif (.js dipasang di <head>).
   Tanpa JS, atau bila pengamat gulir tidak berjalan, isi tetap terlihat. */
.js .rv{opacity:0; transform:translateY(26px); transition:opacity .82s var(--ease), transform .82s var(--ease); transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1; transform:none}
.js .rv-l{opacity:0; transform:translateX(-26px); transition:opacity .82s var(--ease), transform .82s var(--ease); transition-delay:var(--d,0ms)}
.js .rv-l.in{opacity:1; transform:none}
.js .rv-s{opacity:0; transform:scale(.955); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0ms)}
.js .rv-s.in{opacity:1; transform:none}
html.tanpa-animasi .rv,html.tanpa-animasi .rv-l,html.tanpa-animasi .rv-s{opacity:1 !important; transform:none !important; transition:none !important}
html.tanpa-animasi .mnav li,html.tanpa-animasi .mcta,html.tanpa-animasi .mcontact,
html.tanpa-animasi .msheet.open{opacity:1 !important; transform:none !important; animation:none !important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .js .rv,.js .rv-l,.js .rv-s{opacity:1; transform:none}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards.c4{grid-template-columns:repeat(2,1fr)}
  .cards.c5{grid-template-columns:repeat(3,1fr)}
  .arm{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr; gap:34px}
  .cta-in{grid-template-columns:1fr; gap:28px}
  .ftr-grid{grid-template-columns:1fr 1fr; gap:32px}
  .tool-grid{grid-template-columns:1fr 1fr; }
  .tool-grid.g3{grid-template-columns:1fr 1fr}
  .tool-grid .btn{grid-column:1/-1; width:100%}
  .toolbar{margin-top:-40px}
}
/* Menu atas beralih ke tombol burger lebih awal supaya tidak berdesakan */
@media (max-width:1024px){
  .nav,.hdr-cta .btn{display:none}
  .burger{display:grid}
  .fab{display:none}
  .dock{display:block}
  body{padding-bottom:84px}
}
@media (max-width:900px){
  .steps{grid-template-columns:1fr 1fr}
  .steps::before{display:none}
  .testi,.sales{grid-template-columns:1fr}
  .arts{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr; padding:24px 20px}
  .meta-g{grid-template-columns:1fr 1fr}
  .slides{height:auto; min-height:0}
  .slide{position:relative; display:none}
  .slide.on{display:block}
  .slide-copy{padding:36px 0 118px}
  .sl-nav{bottom:60px}
}
@media (max-width:620px){
  .wrap{padding:0 17px}
  .sec{padding:60px 0}
  .cards,.cards.c4,.cards.c5,.arts{grid-template-columns:1fr}
  .art-hero{aspect-ratio:16/10; border-radius:var(--r-l)}
  .arm{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr; gap:14px}
  .step{display:grid; grid-template-columns:54px 1fr; gap:14px; align-items:start}
  .step-n{margin-bottom:0; width:46px; height:46px; font-size:.98rem}
  .cta{padding:34px 22px; border-radius:var(--r-l)}
  .ftr-grid{grid-template-columns:1fr; gap:26px}
  .meta-g{grid-template-columns:1fr}
  .tool-grid,.tool-grid.g3,.tool-grid.g2{grid-template-columns:1fr}
  .tool-body{padding:20px 18px}
  .tool-foot{padding:12px 18px; font-size:.74rem}
  .stats{border-radius:var(--r-l); padding:18px 14px; gap:4px}
  .stat{padding:12px 12px}
  .stat-ic{width:34px; height:34px; border-radius:10px; margin-bottom:11px}
  .stat + .stat::before{display:none}
  .row2{grid-template-columns:1fr}
  .slide-copy{padding:30px 0 26px}
  .slides{min-height:0}
  .toolbar{margin-top:22px}
  .sl-nav{position:static; transform:none; padding:0 17px 20px; margin-top:-4px}
}
/* tetap dua kolom di layar kecil; panel jadi terlalu jangkung bila satu kolom */
@media (max-width:330px){ .stats{grid-template-columns:1fr} }

/* ---- logo unggahan pengguna ---- */
.mark-polos{background:none; box-shadow:none; border-radius:0; width:auto; min-width:40px; overflow:visible}
.mark-polos::after{display:none}
.mark-img{display:block; height:40px; width:auto; max-width:190px; object-fit:contain}
@media (max-width:600px){ .mark-img{max-width:132px} }

/* ---- kartu alamat & jam di halaman kontak ---- */
.kontak-duo{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-s)}
.kontak-sel{background:#fff; padding:26px 24px; display:flex; gap:15px}
/* di layar sempit dua kolom membuat teks alamat pecah satu kata per baris */
@media (max-width:760px){ .kontak-duo{grid-template-columns:1fr} }

/* ---- angka ringkasan di papan Control Tower ---- */
.tw-stats{display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:16px}
.tw-stat{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px}
.tw-stat small{display:block; font-size:.68rem; color:#6B7C9B; letter-spacing:.08em; text-transform:uppercase}
.tw-stat b{font-family:'Plus Jakarta Sans',sans-serif; color:#fff; font-size:1.35rem}
.tw-stat b.mint{color:#00C2A8}

/* ---- blok ajakan dengan gambar latar ---- */
.cta-gbr{background-size:cover; background-position:center}
/* lapisan gelap supaya tulisan putih tetap terbaca di atas foto apa pun */
.cta-gbr::before{content:''; position:absolute; inset:0; background:linear-gradient(125deg,rgba(10,23,51,.93) 0%,rgba(18,58,168,.86) 52%,rgba(0,194,168,.62) 130%)}
.cta-gbr .cta-in{position:relative; z-index:2}

/* ---- foto sales ---- */
.sav-foto{object-fit:cover; display:block}
.fabmenu-foto{object-fit:cover; border-radius:50%; background:var(--cloud)}

/* ============ PENGAMAN LEBAR GRID ============
   Jalur "1fr" pada CSS Grid punya batas bawah otomatis sebesar min-content
   isinya. Bila salah satu anak memuat tabel atau teks panjang, jalurnya
   melebar melewati wadahnya dan halaman meluber ke kanan — di 320px halaman
   Layanan tadinya 332px sehingga kolom harga terpotong oleh overflow-x:clip.
   minmax(0,1fr) menghapus batas bawah itu; min-width:0 melakukan hal yang sama
   untuk anak grid dan flex. */
.why,.cards,.arm,.cta-in,.ftr-grid,.sales,.arts,.stats,.kontak-duo,.tw-stats,.rt-tools{
  grid-auto-columns:minmax(0,auto);
}
.why > *,.cards > *,.arm > *,.cta-in > *,.ftr-grid > *,.sales > *,.arts > *,
.stats > *,.kontak-duo > *,.tw-stats > *,.why .rt-wrap,.cta-in .wa-box{
  min-width:0;
}
@media (max-width:1080px){ .why{grid-template-columns:minmax(0,1fr)} }
@media (min-width:1081px){ .why{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }

/* Label pelabuhan di sisi kanan peta ditulis ke kiri titiknya supaya tidak
   terpotong tepi peta pada layar sempit. */
@media (max-width:560px){
  .port-kiri::after{left:auto; right:14px}
}

/* ============ FOTO MENGGANTIKAN IKON ============
   Selama kolom fotonya kosong, ikon lama tetap dipakai supaya tidak ada lubang
   di tata letak. Begitu foto diunggah lewat admin, kartunya berubah bentuk. */

/* kartu layanan & kartu rute */
.card-foto{padding:0}
.card-gbr{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; background:var(--cloud)}
.card-foto .tag,.card-foto h3,.card-foto p,.card-foto ul,.card-foto .card-cta{margin-left:22px; margin-right:22px}
/* Jarak diberikan ke elemen apa pun yang berada tepat di bawah gambar.
   Kartu layanan punya label kecil di situ, kartu rute langsung judul —
   memakai .tag saja membuat judul kartu rute menempel ke gambar. */
.card-gbr + *,.card-gambar + *{margin-top:18px}
.card-foto .card-cta{margin-bottom:22px}
.card-foto:hover .card-gbr{transform:none}

/* nomor urut kartu rute, dipakai selama fotonya belum ada — enam ikon panah
   yang sama persis membuat keenam kartu tak bisa dibedakan */
.ico-rute b{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.05rem; color:var(--blue); letter-spacing:-.02em}

/* kartu armada */
.arm-foto{display:block; padding:0; overflow:hidden}
.arm-gbr{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; background:var(--cloud)}
.arm-foto > div{padding:18px 22px 20px}

/* Gambar utama halaman dalam. Lapisan gelap dipasang di atas foto supaya judul
   dan teks putih tetap terbaca berapa pun terangnya foto yang diunggah. */
.phero-gbr{background-size:cover; background-position:center}
.phero-gbr::before{content:''; position:absolute; inset:0; background:linear-gradient(115deg,rgba(10,23,51,.94) 0%,rgba(18,58,168,.82) 62%,rgba(10,23,51,.68) 100%)}
.phero-gbr .phero-in,.phero-gbr > .wrap{position:relative; z-index:2}

/* Sampul besar artikel tanpa foto: tinggal latar warna bermotif, tanpa ikon
   dokumen raksasa yang membuat halaman terlihat rusak. */
.art-polos{aspect-ratio:21/9}

/* ---- satu baris saluran kontak, menggantikan tiga kartu ikon ---- */
.saluran{display:flex; flex-wrap:wrap; gap:12px}
.sal{display:flex; align-items:center; gap:12px; flex:1 1 260px; min-width:0; padding:15px 18px; background:#fff; border:1px solid var(--line); border-radius:var(--r); transition:.3s var(--ease)}
.sal:hover{border-color:var(--blue); box-shadow:var(--sh-1); transform:translateY(-2px)}
.sal svg{flex-shrink:0}
.sal span{min-width:0}
.sal b{display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:.92rem; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sal small{display:block; font-size:.76rem; color:var(--ink-45); margin-top:1px}
.sal-wa{background:#25D366; border-color:#25D366; color:#04361C}
.sal-wa:hover{background:#1FBE5B; border-color:#1FBE5B}
.sal-wa small{color:rgba(4,54,28,.78)}

/* ---- grafis yang digambar dari data ---- */
.card-gambar,.arm-gambar{display:block; width:100%; line-height:0}
.card-gambar svg,.arm-gambar svg{display:block; width:100%; height:auto}
.card-lukis{padding:0}
.card-lukis .tag,.card-lukis h3,.card-lukis p,.card-lukis ul,.card-lukis .card-cta{margin-left:22px; margin-right:22px}
.card-lukis .card-cta{margin-bottom:22px}
.arm-lukis{display:block; padding:0; overflow:hidden}
.arm-lukis > div{padding:16px 20px 18px}

/* ---- latar foto untuk seksi gelap ---- */
.stats-gbr{background-size:cover; background-position:center}
.stats-gbr::after{content:''; position:absolute; inset:0; background:linear-gradient(120deg,rgba(10,23,51,.94),rgba(18,36,74,.88)); z-index:0}
.stats-gbr > *{position:relative; z-index:1}
.sec-gbr{background-size:cover; background-position:center; position:relative}
.sec-gbr::before{content:''; position:absolute; inset:0; background:linear-gradient(115deg,rgba(10,23,51,.95) 0%,rgba(10,23,51,.86) 55%,rgba(18,58,168,.72) 100%)}
.sec-gbr > .wrap{position:relative; z-index:2}
.kenapa-gbr{display:block; width:100%; height:auto; border-radius:var(--r-xl); box-shadow:0 30px 70px -22px rgba(0,0,0,.6)}

/* ---- tombol WA melayang: ringkas saat menutupi tombol lain ----
   Tombol selalu tampil di desktop. Di laptop 1280–1440 px posisinya jatuh
   tepat di atas tab "Cek Tarif" dan tombol "Lacak" pada layar pertama, jadi
   selama bertabrakan (dideteksi app.js) ia diringkas jadi lingkaran ikon WA
   yang sedikit lebih ke tepi. Label kembali begitu tabrakan hilang. */
.fab .fab-label{display:inline-block; max-width:130px; overflow:hidden; white-space:nowrap; transition:max-width .35s var(--ease), opacity .25s var(--ease)}
.fabwrap{transition:right .35s var(--ease), bottom .35s var(--ease)}
.fab{transition:box-shadow .3s, transform .3s var(--ease), padding .35s var(--ease), gap .35s var(--ease)}
.fabwrap.ringkas{right:10px; bottom:16px}
.fab.ringkas{padding:11px; gap:0}
.fab.ringkas .fab-label{max-width:0; opacity:0}
/* Di jendela desktop yang sempit (±1025–1330px) panah slider dan tautan terakhir
   footer menempel di tepi kanan, tepat di bawah tombol WA yang sudah ringkas.
   Beri ruang secukupnya supaya lingkaran WA tidak menutupi keduanya. */
@media (min-width:1025px){
  .sl-nav{padding-right:max(22px, calc(86px - (100vw - var(--max)) / 2))}
  .ftr-bot{padding-bottom:80px}
}
/* HP & tablet: tombol melayang disembunyikan, daftar sales dibuka dari tombol
   "Sales" di dock. Wadahnya dipindah ke tengah, selebar dock, tepat di atas
   tombol WA dock yang menonjol (dock ±66px + tonjolan 26px + jarak). Saat
   tertutup tingginya nol, jadi tidak menghalangi sentuhan ke isi halaman. */
@media (max-width:1024px){
  .fabwrap,.fabwrap.ringkas{left:50%; right:auto; bottom:calc(108px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(430px,calc(100vw - 20px)); align-items:stretch; z-index:195}
  .fabwrap .fabmenu{width:100%; max-width:none; transform-origin:bottom center}
}

/* Daftar halaman rute di beranda (seksi "Halaman Rute Lengkap") */
.lp-daftar{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px}
.lp-item{display:flex; align-items:center; gap:13px; padding:15px 18px; background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  transition:border-color .25s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease)}
.lp-item:hover{border-color:var(--blue); box-shadow:var(--sh-2); transform:translateY(-2px)}
.lp-item-ic{flex-shrink:0; width:38px; height:38px; border-radius:11px; background:var(--blue-xl); display:grid; place-items:center}
.lp-item-tx{flex:1; min-width:0}
.lp-item-tx b{display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:.95rem; color:var(--ink); letter-spacing:-.01em}
.lp-item-tx small{display:block; margin-top:2px; font-size:.8rem; color:var(--ink-45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lp-item svg:last-child{flex-shrink:0; transition:transform .3s var(--ease)}
.lp-item:hover svg:last-child{transform:translateX(3px)}

/* Foto slider sebagai <img>: memenuhi kotak .slide-bg, lapisan gelap ::after tetap di atasnya */
.slide-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block}

/* Kredit foto pihak ketiga, menempel di pojok foto kartu rute */
.kredit-gbr{position:absolute; top:10px; right:10px; z-index:2; max-width:calc(100% - 20px); padding:3px 9px; border-radius:999px;
  background:rgba(10,23,51,.58); color:rgba(255,255,255,.9); font-size:.62rem; font-weight:500; line-height:1.45; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none}

/* Blok landing page "Kode HTML": tabel & dropdown yang ditulis tim konten
   langsung tampil rapi tanpa perlu menulis CSS sendiri. */
.lp-kode{font-size:1.02rem; line-height:1.75; color:var(--ink-70)}
.lp-kode > *:first-child{margin-top:0}
.lp-kode h2,.lp-kode h3,.lp-kode h4{color:var(--ink); font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-.01em; margin:26px 0 10px}
.lp-kode h3{font-size:1.2rem}
.lp-kode p{margin:0 0 14px}
.lp-kode ul,.lp-kode ol{margin:0 0 16px; padding-left:22px}
.lp-kode li{margin-bottom:6px}
.lp-kode a{color:var(--blue-d); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.lp-kode img,.lp-kode iframe,.lp-kode video{max-width:100%; height:auto; border-radius:14px}
.lp-kode .lp-tabel{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:6px 0 20px; background:#fff; border:1px solid var(--line); border-radius:12px}
.lp-kode table{width:100%; border-collapse:collapse; font-size:.93rem; background:#fff}
.lp-kode th,.lp-kode td{padding:11px 14px; border-bottom:1px solid var(--line-s); text-align:left; vertical-align:top}
.lp-kode th{background:var(--cloud); color:var(--ink); font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.82rem}
.lp-kode tr:last-child td{border-bottom:0}
.lp-kode details{border:1px solid var(--line); border-radius:12px; background:#fff; margin:0 0 10px; padding:0 18px}
.lp-kode summary{cursor:pointer; padding:15px 28px 15px 0; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; color:var(--ink); list-style:none; position:relative}
.lp-kode summary::-webkit-details-marker{display:none}
.lp-kode summary::after{content:'+'; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:1.3rem; font-weight:500; color:var(--blue-d)}
.lp-kode details[open] summary::after{content:'\2212'}
.lp-kode details[open] summary{border-bottom:1px solid var(--line-s); margin-bottom:12px}
.lp-kode details > *:last-child{margin-bottom:16px}
@media (max-width:640px){
  .lp-kode th,.lp-kode td{padding:10px 12px}
  /* blok "Tarif tujuan lain" di HP: kolom Layanan disembunyikan supaya
     rute dan tarif mulai langsung terlihat tanpa menggeser tabel */
  .rt-tujuan th:nth-child(2),.rt-tujuan td:nth-child(2){display:none}
}