/* ============================================================
   DESIGN TOKENS & RESET
   ============================================================ */
:root {
  --c-black:   #0C0E12;
  --c-dark:    #141720;
  --c-dark2:   #1A1E28;
  --c-dark3:   #222736;
  --c-steel:   #2C3244;
  --c-copper:  #C8883A;
  --c-copper2: #DFA054;
  --c-copperd: #9B671F;
  --c-coppert: rgba(200,136,58,0.12);
  --c-white:   #F5F0E8;
  --c-white2:  #C2BDB4;
  --c-white3:  #857F78;
  --c-white4:  #4A4640;
  --nav-h: 76px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: 'Jost', sans-serif;
  background: var(--c-white);
  color: var(--c-black);
  overflow-x: hidden;
  cursor: none;
}
body.dark-page { background: var(--c-black); color: var(--c-white); }
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
button { font-family: inherit; cursor:none; border:none; background:none; }
input, textarea, select { font-family: inherit; }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background: var(--c-dark); }
::-webkit-scrollbar-thumb { background: var(--c-copper); }
 
/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
#cur-d, #cur-r {
  position: fixed; top:0; left:0; z-index:10000;
  pointer-events:none; border-radius:50%;
  transform: translate(-50%,-50%);
}
#cur-d { width:7px; height:7px; background: var(--c-copper); transition: transform .1s; }
#cur-r { width:32px; height:32px; border:1.5px solid var(--c-copper); opacity:.7; transition: width .4s var(--ease), height .4s var(--ease), opacity .4s; }
body.ch #cur-r { width:54px; height:54px; opacity:.4; }
 
/* ============================================================
   NAVBAR
   ============================================================ */
nav {
  position: fixed; top:0; left:0; right:0; z-index:999;
  height: var(--nav-h);
  display: flex; align-items:center;
  padding: 0 5%;
  transition: background .5s, border-bottom .5s;
}
nav.ns {
  background: rgba(12,14,18,.93);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(200,136,58,.15);
}
.nl { display:flex; align-items:center; gap:14px; }
.nl-hex {
  width:40px; height:40px;
  background: var(--c-copper);
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.nl-hex span { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:13px; color:var(--c-black); letter-spacing:1px; }
.nl-text strong { display:block; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:16px; letter-spacing:2.5px; color:var(--c-white); line-height:1; }
.nl-text small { font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--c-copper); }
.nm { display:flex; gap:2px; margin:0 auto; }
.nm a {
  font-size:11px; font-weight:500; letter-spacing:2.5px; text-transform:uppercase;
  color: var(--c-white2); padding:10px 14px;
  position:relative; transition: color .2s;
}
.nm a::after {
  content:''; position:absolute; bottom:6px; left:14px; right:14px; height:1px;
  background:var(--c-copper); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nm a:hover, .nm a.active { color:var(--c-white); }
.nm a:hover::after, .nm a.active::after { transform:scaleX(1); }
.nc {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--c-copper); color:var(--c-black);
  font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  padding:12px 22px;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  transition:background .2s, transform .2s;
}
.nc:hover { background:var(--c-copper2); transform:translateY(-1px); }

/* ============================================================
   MOBILE NAV ICON (HAMBURGER)
   ============================================================ */
.n-mob { 
  display:none; 
  flex-direction:column; 
  gap:5px; 
  padding:6px; 
  position: relative; 
  z-index: 1000; /* Pastikan dia berada di atas .mob-nav (998) */
}

.n-mob span { 
  display:block; 
  width:22px; 
  height:1.5px; 
  background:var(--c-white); 
  transition: all 0.3s ease-in-out; /* Animasi halus */
}

/* Animasi Perubahan Garis 3 Menjadi X */
.n-mob.active span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.n-mob.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0); /* Menghilangkan garis tengah */
}
.n-mob.active span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}
 
/* Mobile Nav Overlay */
.mob-nav {
  display:none; position:fixed; inset:0; z-index:998;
  background:var(--c-black); flex-direction:column;
  align-items:center; justify-content:center; gap:28px;
}
.mob-nav.on { display:flex; }
.mob-nav a { font-family:'Barlow Condensed',sans-serif; font-size:42px; font-weight:700; letter-spacing:3px; color:var(--c-white); text-transform:uppercase; transition:color .2s; }
.mob-nav a:hover { color:var(--c-copper); }
.mob-close { position:absolute; top:24px; right:5%; font-size:28px; color:var(--c-white2); }
 
/* ============================================================
   PAGE SYSTEM
   ============================================================ */
.page { display:none; min-height:100vh; }
.page.active { display:block; }
 
/* ============================================================
   PAGE TRANSITION OVERLAY
   ============================================================ */
#overlay {
  position:fixed; inset:0; z-index:9990;
  background:var(--c-copper);
  clip-path:inset(0 100% 0 0);
  transition:clip-path .55s var(--ease);
  pointer-events:none;
}
#overlay.in { clip-path:inset(0 0% 0 0); }
#overlay.out { clip-path:inset(0 0 0 100%); }
 
/* ============================================================
   GLOBAL COMPONENTS
   ============================================================ */
.tag {
  display:inline-flex; align-items:center; gap:10px;
  font-size:10px; font-weight:600; letter-spacing:4px; text-transform:uppercase;
  color:var(--c-copper); margin-bottom:14px;
}
.tag::before { content:''; width:24px; height:1.5px; background:var(--c-copper); }
.h1d { font-family:'Barlow Condensed',sans-serif; font-weight:900; line-height:.93; letter-spacing:1px; text-transform:uppercase; }
.h2d { font-family:'Barlow Condensed',sans-serif; font-weight:800; line-height:.95; letter-spacing:1px; text-transform:uppercase; }
.h3d { font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.cu { color:var(--c-copper); }
.cw { color:var(--c-white); }
.cb { color:var(--c-black); }
.body-text { font-size:15px; font-weight:300; line-height:1.85; color:var(--c-white2); }
.body-text-dark { font-size:15px; font-weight:300; line-height:1.85; color:var(--c-white4); }
.divider { width:36px; height:2px; background:var(--c-copper); margin:18px 0; }
 
/* BUTTONS */
.btn-gold {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--c-copper); color:var(--c-black);
  font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  padding:16px 30px;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  transition:background .2s, transform .2s;
  cursor:none;
}
.btn-gold:hover { background:var(--c-copper2); transform:translateY(-2px); }
.btn-ghost {
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(200,136,58,.5); color:var(--c-white);
  font-size:11px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase;
  padding:15px 28px;
  transition:border-color .2s, background .2s, transform .2s;
  cursor:none;
}
.btn-ghost:hover { border-color:var(--c-copper); background:var(--c-coppert); transform:translateY(-2px); }
.btn-ghost-dark {
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(12,14,18,.25); color:var(--c-black);
  font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  padding:15px 28px;
  transition:border-color .2s, background .2s, transform .2s;
  cursor:none;
}
.btn-ghost-dark:hover { border-color:var(--c-copper); color:var(--c-copper); background:rgba(200,136,58,.06); transform:translateY(-2px); }
 
/* REVEAL */
.rv { opacity:0; transform:translateY(24px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.rv.vis { opacity:1; transform:none; }
.rv.d1 { transition-delay:.08s; }
.rv.d2 { transition-delay:.16s; }
.rv.d3 { transition-delay:.24s; }
.rv.d4 { transition-delay:.32s; }
 
/* SECTION */
.sec { padding:100px 5%; position:relative; }
.sec-sm { padding:60px 5%; }
.sec-hdr { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:56px; }
 
/* ============================================================
   INDUSTRIAL TEXTURE PATTERN
   ============================================================ */
.tex-bg::after {
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(200,136,58,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,136,58,.03) 1px, transparent 1px);
  background-size:60px 60px;
}
.tex-bg-light::after {
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(12,14,18,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,14,18,.04) 1px, transparent 1px);
  background-size:60px 60px;
}
 
/* ============================================================
   PAGE 1 — HOME (BERANDA)
   ============================================================ */
 
/* HERO */
.hero {
  min-height:100vh;
  background:var(--c-black);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--nav-h) 5% 80px;
  position:relative; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 80% at 75% 50%, rgba(26,30,40,.9) 0%, var(--c-black) 70%),
    var(--c-black);
}
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(200,136,58,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,136,58,.05) 1px, transparent 1px);
  background-size:80px 80px;
  background-position:-1px -1px;
}
.hero-diag {
  position:absolute; right:0; top:0; bottom:0; width:52%;
  background:linear-gradient(165deg,rgba(32,40,58,.6) 0%,transparent 60%);
  clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);
}
.hero-accent {
  position:absolute; left:5%; top:0;
  width:1px; height:100%;
  background:linear-gradient(to bottom, transparent, rgba(200,136,58,.35) 40%, rgba(200,136,58,.35) 60%, transparent);
}
.hero-num {
  position:absolute; right:5%; bottom:80px;
  font-family:'Barlow Condensed',sans-serif; font-size:180px; font-weight:900;
  color:rgba(200,136,58,.04); line-height:1; letter-spacing:-4px;
  user-select:none;
}
.hero-live {
  position:absolute; top:calc(var(--nav-h) + 28px); right:5%;
  display:flex; align-items:center; gap:8px;
  font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--c-white3);
  animation:fadein .8s .8s ease both;
}
.hero-live::before { content:''; width:7px; height:7px; border-radius:50%; background:#22C55E; animation:blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.35} }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(200,136,58,.35);
  padding:6px 16px; margin-bottom:20px;
  font-size:9px; letter-spacing:3.5px; text-transform:uppercase; color:var(--c-copper);
  position:relative; z-index:1;
  animation:fadein .8s .2s ease both;
  width:fit-content;
}
.hero-h1 {
  font-size:clamp(56px,10.5vw,140px);
  position:relative; z-index:1;
  animation:slidein .9s .1s var(--ease) both;
}
.hero-h1 .line { overflow:hidden; display:block; }
.hero-h1 .inner { display:inline-block; }
@keyframes slidein { from{transform:translateY(100%)} to{transform:translateY(0)} }
.hero-body {
  max-width:480px; margin-top:22px;
  position:relative; z-index:1;
  animation:fadein .8s .4s ease both;
}
.hero-ctas { display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; position:relative; z-index:1; animation:fadein .8s .5s ease both; }
.hero-scroll {
  position:absolute; right:5%; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; z-index:1;
}
.hero-scroll-bar { width:1px; height:80px; background:linear-gradient(var(--c-copper), transparent); animation:scrollbar 2.2s ease infinite; }
@keyframes scrollbar { 0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom} }
.hero-scroll span { font-size:8px; letter-spacing:3px; text-transform:uppercase; color:var(--c-white3); writing-mode:vertical-rl; }
@keyframes fadein { from{opacity:0} to{opacity:1} }
 
/* STATS TICKER */
.stats-bar {
  background:var(--c-copper);
  display:grid; grid-template-columns:repeat(4,1fr);
  position:relative; z-index:2;
}
.stat { padding:22px 16px; text-align:center; border-right:1px solid rgba(12,14,18,.15); }
.stat:last-child { border-right:none; }
.stat-n { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:clamp(32px,4vw,50px); color:var(--c-black); line-height:1; }
.stat-l { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:rgba(12,14,18,.55); margin-top:3px; }
 
/* HOME — ABOUT STRIP */
.about-strip {
  background:var(--c-dark);
  display:grid; grid-template-columns:1fr 1fr;
  overflow:hidden;
}
.as-visual {
  background:var(--c-white);
  position:relative; min-height:500px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.as-visual::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(200,136,58,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(200,136,58,.06) 1px,transparent 1px);
  background-size:50px 50px;
}
.as-badge {
  position:absolute; bottom:24px; left:24px;
  background:var(--c-copper); color:var(--c-black);
  padding:14px 20px;
}
/* .as-badge .n { font-family:'Barlow Condensed',sans-serif; font-size:44px; font-weight:900; line-height:1; }
.as-badge .l { font-size:9px; letter-spacing:2px; text-transform:uppercase; margin-top:2px; } */
.as-content { padding:60px 5% 60px 60px; display:flex; flex-direction:column; justify-content:center; }
.legalitas-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.legalitas-row .leg-badge {
  color: var(--c-white);
}
 
/* HOME — SERVICES PREVIEW */
.srv-preview { background:var(--c-black); position:relative; overflow:hidden; }
.srv-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(200,136,58,.08); margin-top:0; }
.sc {
  background:var(--c-dark); padding:44px 36px;
  position:relative; overflow:hidden;
  transition:background .35s;
  cursor:none;
}
.sc::before {
  content:''; position:absolute; left:0; bottom:0; top:0; width:3px;
  background:var(--c-copper); transform:scaleY(0); transform-origin:bottom;
  transition:transform .4s var(--ease);
}
.sc:hover { background:var(--c-dark2); }
.sc:hover::before { transform:scaleY(1); }
.sc-ico {
  width:52px; height:52px; border:1px solid rgba(200,136,58,.3);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:24px; transition:background .3s;
}
.sc:hover .sc-ico { background:var(--c-copper); }
.sc:hover .sc-ico svg path, .sc:hover .sc-ico svg rect, .sc:hover .sc-ico svg circle,
.sc:hover .sc-ico svg line, .sc:hover .sc-ico svg polyline, .sc:hover .sc-ico svg polygon { stroke:var(--c-black); }
.sc-ico svg { width:22px; height:22px; stroke:var(--c-copper); stroke-width:1.5; fill:none; }
.sc h3 { font-size:24px; margin-bottom:10px; }
.sc p { font-size:13.5px; color:var(--c-white2); line-height:1.75; }
.sc-arrow {
  display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--c-copper);
  transition:gap .2s;
}
.sc:hover .sc-arrow { gap:14px; }
.sc-big { font-family:'Barlow Condensed',sans-serif; font-size:72px; font-weight:900; color:rgba(200,136,58,.05); position:absolute; top:16px; right:24px; line-height:1; }
 
/* HOME — WHY US */
.why { background:var(--c-white); position:relative; overflow:hidden; }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.wc {
  border:1px solid rgba(12,14,18,.08);
  padding:36px 28px;
  position:relative; transition:border-color .3s, transform .3s;
}
.wc:hover { border-color:rgba(200,136,58,.35); transform:translateY(-4px); }
.wc::after { content:attr(data-n); font-family:'Barlow Condensed',sans-serif; font-size:80px; font-weight:900; color:rgba(200,136,58,.06); position:absolute; top:12px; right:20px; line-height:1; }
.wc-ico { width:46px; height:46px; background:rgba(200,136,58,.1); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.wc-ico svg { width:20px; height:20px; stroke:var(--c-copper); stroke-width:1.5; fill:none; }
.wc h3 { font-size:20px; margin-bottom:10px; color:var(--c-black); }
.wc p { font-size:13px; color:var(--c-white4); line-height:1.75; }
.wc-tag { margin-top:14px; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--c-copper); }
 
/* HOME — TESTI */
.testi-sec { background:var(--c-dark); position:relative; overflow:hidden; }
.tg { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(200,136,58,.08); }
.tc {
  background:var(--c-dark2); padding:36px 30px;
  border-bottom:3px solid transparent;
  transition:border-color .3s, background .3s;
}
.tc:hover { border-color:var(--c-copper); background:var(--c-dark3); }
.tc-q { font-family:'Barlow Condensed',sans-serif; font-size:72px; color:rgba(200,136,58,.25); line-height:1; margin-bottom:8px; }
.tc-t { font-size:14px; color:var(--c-white2); line-height:1.8; font-style:italic; }
.tc-stars { display:flex; gap:2px; margin-top:16px; }
.tc-stars span { color:var(--c-copper); font-size:12px; }
.tc-a { margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.06); }
.tc-n { font-weight:600; font-size:14px; color:var(--c-white); }
.tc-p { font-size:12px; color:var(--c-white3); margin-top:2px; }
 
/* HOME — PARTNERS */
.partners { background:var(--c-white); padding:48px 5%; border-top:1px solid rgba(12,14,18,.06); }
.partners-l { text-align:center; font-size:9px; letter-spacing:4px; text-transform:uppercase; color:var(--c-white3); margin-bottom:28px; }
.partners-row { display:flex; justify-content:center; align-items:center; gap:32px; flex-wrap:wrap; }
.pl {
  display:flex; align-items:center; justify-content:center;
  height:40px; padding:0 20px;
  border:1px solid rgba(12,14,18,.08);
  font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700; letter-spacing:2px;
  color:var(--c-white3); transition:.3s; white-space:nowrap;
}
.pl:hover { border-color:rgba(200,136,58,.3); color:var(--c-copper); }
 
/* HOME — CTA BANNER */
.cta-banner {
  background:var(--c-copper);
  padding:80px 5%;
  display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:40px;
  position:relative; overflow:hidden;
}
.cta-banner::before {
  content:'KCS'; font-family:'Barlow Condensed',sans-serif; font-size:320px; font-weight:900;
  color:rgba(0,0,0,.06); position:absolute; right:-30px; top:50%; transform:translateY(-50%); line-height:1;
  pointer-events:none;
}
.cta-banner-h { font-size:clamp(32px,4vw,60px); color:var(--c-black); }
.cta-banner-p { font-size:16px; color:rgba(12,14,18,.55); margin-top:8px; }
.cta-banner-btns { display:flex; flex-direction:column; gap:10px; position:relative; }
 
/* ============================================================
   PAGE 2 — LAYANAN (SERVICES)
   ============================================================ */
.srv-page { background:var(--c-white); }
.srv-hero {
  background:var(--c-black); height:52vh; min-height:380px;
  display:flex; align-items:flex-end;
  padding:0 5% 64px; position:relative; overflow:hidden;
}
.srv-hero::before {
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(200,136,58,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(200,136,58,.05) 1px,transparent 1px);
  background-size:70px 70px;
}
.srv-hero-num { position:absolute;right:5%;bottom:56px;font-family:'Barlow Condensed',sans-serif;font-size:160px;font-weight:900;color:rgba(200,136,58,.04);line-height:1; }
.srv-cards-section { padding:80px 5%; background:var(--c-white); position:relative; overflow:hidden; }
.srv-full-grid { display:grid; grid-template-columns:1fr; gap:2px; }
.sfc {
  display:grid; grid-template-columns:350px 1fr;
  background:var(--c-dark); overflow:hidden;
  position:relative; transition:opacity .3s;
}
.sfc.light { background:var(--c-white); border:1px solid rgba(12,14,18,.08); }
.sfc-vis {
  background:var(--c-dark2); position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:320px; overflow:hidden;
}
.sfc.light .sfc-vis { background:#F0EBE2; }
.sfc-vis::before {
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(200,136,58,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(200,136,58,.07) 1px,transparent 1px);
  background-size:40px 40px;
}
.sfc-n { position:absolute;top:16px;left:16px;font-family:'Barlow Condensed',sans-serif;font-size:52px;font-weight:900;color:rgba(200,136,58,.15);line-height:1; }
.sfc-body { padding:48px 44px; display:flex; flex-direction:column; justify-content:center; }
.sfc.light .sfc-body .h3d { color:var(--c-black); }
.sfc.light .sfc-body .body-text { color:var(--c-white4); }
.sfc-specs { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
.spec-item { border:1px solid rgba(200,136,58,.2); padding:12px 14px; }
.spec-item .sl { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--c-copper); margin-bottom:3px; }
.spec-item .sv { font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:700; color:var(--c-white); }
.sfc.light .spec-item { border-color:rgba(12,14,18,.1); }
.sfc.light .spec-item .sv { color:var(--c-black); }
.sfc-actions { display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; }
.pricing-note { margin-top:12px; font-size:12px; color:var(--c-white3); }
.sfc.light .pricing-note { color:var(--c-white3); }
 
/* SERVICE PROCESS */
.process-sec { background:var(--c-black); padding:80px 5%; position:relative; overflow:hidden; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(200,136,58,.08); margin-top:56px; }
.proc {
  background:var(--c-dark); padding:36px 28px;
  position:relative;
}
.proc-n { font-family:'Barlow Condensed',sans-serif; font-size:56px; font-weight:900; color:rgba(200,136,58,.12); line-height:1; margin-bottom:12px; }
.proc h4 { font-size:18px; color:var(--c-white); margin-bottom:8px; }
.proc p { font-size:13px; color:var(--c-white2); line-height:1.7; }
.proc::after { content:'→'; position:absolute; top:50%; right:-12px; font-size:18px; color:var(--c-copper); transform:translateY(-50%); z-index:1; }
.proc:last-child::after { display:none; }
 
/* ============================================================
   PAGE 3 — ARMADA (FLEET)
   ============================================================ */
.fleet-page { background:var(--c-black); }
.fleet-hero {
  background:var(--c-black); height:52vh; min-height:380px;
  display:flex; align-items:flex-end;
  padding:0 5% 64px; position:relative; overflow:hidden;
}
.fleet-hero::before {
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(200,136,58,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(200,136,58,.05) 1px,transparent 1px);
  background-size:70px 70px;
}
.fleet-filter { background:var(--c-dark); padding:24px 5%; display:flex; gap:2px; overflow-x:auto; border-bottom:1px solid rgba(200,136,58,.1); }
.ff {
  font-size:10px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase;
  padding:10px 20px; color:var(--c-white2);
  border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s; white-space:nowrap;
}
.ff.on { color:var(--c-copper); border-color:var(--c-copper); }
.ff:hover { color:var(--c-white); }
.fleet-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(200,136,58,.06); }
.fu {
  background:var(--c-dark2); position:relative; overflow:hidden;
  cursor:none; transition:background .3s;
}
.fu:hover { background:var(--c-dark3); }
.fu-vis {
  aspect-ratio:4/3; background:var(--c-dark3);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.fu-vis::before {
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(200,136,58,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(200,136,58,.05) 1px,transparent 1px);
  background-size:32px 32px;
}
/* Bentuk Dasar Label */
.fu-avail { 
  position: absolute;
  top: 12px;
  right: 12px; 
  padding: 6px 12px; /* Padding diperbesar sedikit agar tidak terlalu mepet */
  font-size: 10px;   /* Ukuran font dinaikkan sedikit */
  font-weight: 700;  /* Ditebalkan */
  letter-spacing: 1.5px; 
  text-transform: uppercase; 
  border-radius: 4px; /* Opsional: memberikan sudut tumpul yang elegan */
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5); /* Memberikan bayangan agar memisah dari foto */
}

/* Gaya Unit Tersedia (Hijau Solid) */
.fu-avail.on { 
  background-color: #22C55E; /* Hijau solid, tidak lagi transparan */
  color: #0C0E12;            /* Teks warna hitam pekat agar kontras dengan hijau */
}

/* Gaya Unit Sedang Disewa (Merah Solid) */
.fu-avail.busy { 
  background-color: #EF4444; /* Merah solid */
  color: #FFFFFF;            /* Teks warna putih */
}
.fu-info { padding:20px 22px 24px; }
.fu-cap { font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--c-copper); margin-bottom:4px; }
.fu-name { font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:700; color:var(--c-white); }
.fu-specs { display:flex; gap:16px; margin-top:10px; }
.fu-spec { font-size:11px; color:var(--c-white3); }
.fu-spec strong { color:var(--c-white2); display:block; font-size:13px; font-weight:500; }
.fu-order {
  display:flex; align-items:center; gap:6px; margin-top:14px;
  font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--c-copper);
  text-decoration:none;
}
.fu-order:hover { color:var(--c-copper2); }
.fleet-sec { padding:80px 5%; background:var(--c-black); }

/* Opsional: Memberikan efek transisi halus pada gambar */
.fu-vis img {
  transition: filter 0.3s ease, opacity 0.3s ease;
}

/* OTOMATISASI: Jika tag img bersebelahan dengan class 'busy', ubah gayanya */
.fu-avail.busy ~ img {
  filter: grayscale(100%); /* Membuatnya full abu-abu */
  opacity: 0.6;            /* Membuatnya sedikit transparan */
}
 
/* ============================================================
   PAGE 4 — PROFIL (ABOUT)
   ============================================================ */
.about-page { background:var(--c-white); }
.about-hero {
  background:var(--c-black); height:52vh; min-height:380px;
  display:flex; align-items:flex-end;
  padding:0 5% 64px; position:relative; overflow:hidden;
}
.about-hero::before {
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(200,136,58,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(200,136,58,.05) 1px,transparent 1px);
  background-size:70px 70px;
}
.about-story { padding:80px 5%; background:var(--c-white); position:relative; overflow:hidden; }
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.timeline { position:relative; padding-left:28px; }
.timeline::before { content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:rgba(200,136,58,.25); }
.tl-item { position:relative; padding-bottom:40px; }
.tl-item::before { content:''; position:absolute; left:-32px; top:6px; width:8px; height:8px; background:var(--c-copper); transform:rotate(45deg); }
.tl-year { font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:700; color:var(--c-copper); }
.tl-title { font-size:16px; font-weight:600; color:var(--c-black); margin:2px 0; }
.tl-text { font-size:13px; color:var(--c-white4); line-height:1.7; }
.values-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:40px; }
.vc { background:var(--c-black); padding:28px 24px; position:relative; overflow:hidden; }
.vc::after { content:attr(data-i); font-family:'Barlow Condensed',sans-serif; font-size:64px; font-weight:900; color:rgba(200,136,58,.08); position:absolute; top:8px; right:16px; line-height:1; }
.vc h4 { font-size:18px; color:var(--c-white); margin-bottom:8px; }
.vc p { font-size:12.5px; color:var(--c-white2); line-height:1.7; }
 
/* SERTIFIKASI */
.cert-sec { background:var(--c-dark); padding:80px 5%; position:relative; overflow:hidden; }
.cert-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(200,136,58,.08); margin-top:56px; }
.crt {
  background:var(--c-dark2); padding:32px 24px;
  border-bottom:2px solid transparent;
  transition:border-color .3s, background .3s;
}
.crt:hover { border-color:var(--c-copper); background:var(--c-dark3); }
.crt-ico { font-size:28px; margin-bottom:16px; }
.crt h4 { font-size:16px; color:var(--c-white); margin-bottom:6px; }
.crt p { font-size:12px; color:var(--c-white3); line-height:1.65; }
.crt-n { font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--c-copper); margin-top:10px; }
 
/* TEAM */
.team-sec { padding:80px 5%; background:var(--c-white); }
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:56px; }
.tm {
  border:1px solid rgba(12,14,18,.08);
  transition:border-color .3s, transform .3s;
}
.tm:hover { border-color:rgba(200,136,58,.3); transform:translateY(-4px); }
.tm-vis { aspect-ratio:3/4; background:var(--c-dark2); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.tm-vis::before { content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(200,136,58,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(200,136,58,.05) 1px,transparent 1px);background-size:28px 28px; }
.tm-ini { font-family:'Barlow Condensed',sans-serif; font-size:56px; font-weight:900; color:rgba(200,136,58,.3); position:relative; z-index:1; }
.tm-info { padding:18px; }
.tm-name { font-size:16px; font-weight:600; color:var(--c-black); }
.tm-role { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--c-copper); margin-top:2px; }
.tm-cert { font-size:11px; color:var(--c-white4); margin-top:6px; }
 
/* ============================================================
   PAGE 5 — KONTAK (CONTACT)
   ============================================================ */
.contact-page { background:var(--c-black); }
.contact-hero {
  background:var(--c-black); height:52vh; min-height:380px;
  display:flex; align-items:flex-end;
  padding:0 5% 64px; position:relative; overflow:hidden;
}
.contact-hero::before {
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(200,136,58,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(200,136,58,.05) 1px,transparent 1px);
  background-size:70px 70px;
}
.contact-main { padding:0 5% 80px; background:var(--c-black); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(200,136,58,.08); }
.contact-form-wrap { background:var(--c-dark); padding:56px 44px; }
.contact-info-wrap { background:var(--c-dark2); padding:56px 44px; }
.cf-group { margin-bottom:20px; }
.cf-label { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--c-copper); display:block; margin-bottom:8px; }
.cf-input, .cf-select, .cf-textarea {
  width:100%; background:var(--c-steel);
  border:1px solid rgba(200,136,58,.1); color:var(--c-white);
  padding:14px 16px; font-size:14px; font-family:'Jost',sans-serif;
  transition:border-color .2s;
  appearance:none; -webkit-appearance:none;
}
.cf-select { cursor:none; }
.cf-textarea { resize:vertical; min-height:120px; }
.cf-input:focus, .cf-select:focus, .cf-textarea:focus { outline:none; border-color:var(--c-copper); }
.cf-input::placeholder, .cf-textarea::placeholder { color:var(--c-white3); }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ci-item { display:flex; gap:14px; margin-bottom:24px; align-items:flex-start; }
.ci-ico { width:44px; height:44px; background:var(--c-coppert); border:1px solid rgba(200,136,58,.25); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ci-ico svg { width:18px; height:18px; stroke:var(--c-copper); stroke-width:1.5; fill:none; }
.ci-l { font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--c-copper); margin-bottom:3px; }
.ci-v { font-size:14px; color:var(--c-white); font-weight:500; }
.ci-sub { font-size:12px; color:var(--c-white3); margin-top:1px; }
.wilayah-grid2 { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(200,136,58,.08); margin-top:56px; }
.wg2 { background:var(--c-dark); padding:28px 22px; text-decoration:none; transition:background .3s; display:block; }
.wg2:hover { background:var(--c-dark2); }
.wg2-prov { font-size:8px; letter-spacing:3px; text-transform:uppercase; color:var(--c-copper); margin-bottom:4px; }
.wg2-name { font-family:'Barlow Condensed',sans-serif; font-size:24px; font-weight:700; color:var(--c-white); }
.wg2-status { display:inline-block; margin-top:8px; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; padding:2px 8px; }
.wg2-status.on { background:rgba(200,136,58,.12); color:var(--c-copper); }
.wg2-status.hq { background:rgba(34,197,94,.1); color:#22C55E; }
.map-sec { padding:0 5% 80px; background:var(--c-black); }
.map-frame { 
  width: 100%; 
  height: 380px; 
  border: 1px solid rgba(200,136,58,.15); 
} 

/* CONTACT — OFFICE HOURS */
.hours-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(200,136,58,.08); margin-top:40px; }
.hg { background:var(--c-dark); padding:28px 24px; }
.hg-l { font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--c-copper); margin-bottom:6px; }
.hg-v { font-family:'Barlow Condensed',sans-serif; font-size:24px; font-weight:700; color:var(--c-white); }
.hg-sub { font-size:12px; color:var(--c-white3); margin-top:3px; }
 
/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background:var(--c-dark); border-top:1px solid rgba(200,136,58,.1);
  padding:64px 5% 28px;
}
.ft { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.05); }
.fb-brand p { font-size:13px; color:var(--c-white3); line-height:1.75; margin:14px 0 20px; }
.fb-soc { display:flex; gap:6px; }
.fsoc {
  width:34px; height:34px; border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--c-white3);
  text-decoration:none; transition:.3s;
}
.fsoc:hover { border-color:var(--c-copper); color:var(--c-copper); background:var(--c-coppert); }
.fc h4 { font-family:'Barlow Condensed',sans-serif; font-size:16px; letter-spacing:2px; text-transform:uppercase; color:var(--c-white); margin-bottom:16px; }
.fc ul { list-style:none; display:flex; flex-direction:column; gap:8px; }
.fc ul li a { font-size:13px; color:var(--c-white3); transition:color .2s; }
.fc ul li a:hover { color:var(--c-copper); }
.fc-ci { display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; }
.fc-ci svg { width:13px; height:13px; stroke:var(--c-copper); stroke-width:1.5; fill:none; flex-shrink:0; margin-top:2px; }
.fc-ci span { font-size:13px; color:var(--c-white3); line-height:1.5; }
.fb { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:24px; }
.fb p { font-size:12px; color:var(--c-white3); }
.fb-l { display:flex; gap:20px; }
.fb-l a { font-size:12px; color:var(--c-white3); }
.fb-l a:hover { color:var(--c-copper); }
 
/* FLOATING WA */
.wa-btn {
  position:fixed; bottom:28px; right:28px; z-index:990;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 24px rgba(37,211,102,.35);
  text-decoration:none; transition:transform .3s, box-shadow .3s;
}
.wa-btn:hover { transform:scale(1.1); box-shadow:0 8px 36px rgba(37,211,102,.5); }
.wa-btn svg { width:28px; height:28px; }
.wa-tip {
  position:absolute; right:70px; top:50%; transform:translateY(-50%);
  background:var(--c-dark); color:var(--c-white); font-size:12px; font-weight:500;
  padding:7px 13px; white-space:nowrap; border-radius:3px;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.wa-btn:hover .wa-tip { opacity:1; }
 
/* TOAST */
#toast {
  position:fixed; bottom:100px; right:28px; z-index:9000;
  background:var(--c-copper); color:var(--c-black);
  font-size:13px; font-weight:600; padding:14px 20px;
  transform:translateX(120%); transition:transform .4s var(--ease);
  pointer-events:none;
}
#toast.on { transform:translateX(0); }
 
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px) {
  .ft { grid-template-columns:1fr 1fr; }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .cert-grid { grid-template-columns:repeat(2,1fr); }
  .process-grid { grid-template-columns:repeat(2,1fr); }
  .proc::after { display:none; }
}
@media (max-width:768px) {
  .nm, .nc { display:none; }
  .n-mob { display:flex; margin-left:auto; }
  .hero-scroll { display:none; }
  .srv-grid, .tg, .story-grid { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr; }
  .sfc { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .about-strip { grid-template-columns:1fr; }
  .stats-bar { grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2) { border-right:none; }
  .fleet-grid { grid-template-columns:repeat(2,1fr); }
  .wilayah-grid2 { grid-template-columns:repeat(2,1fr); }
  .cta-banner { grid-template-columns:1fr; }
  .cf-row { grid-template-columns:1fr; }
  .ft { grid-template-columns:1fr; gap:28px; }
  .values-grid { grid-template-columns:1fr; }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .hours-grid { grid-template-columns:1fr; }
  .sec { padding:64px 5%; }
}
@media (max-width:480px) {
  .fleet-grid { grid-template-columns:1fr; }
  .team-grid { grid-template-columns:1fr; }
  .cert-grid { grid-template-columns:1fr; }
}