/* ==========================================================================
   izinindo — stylesheet utama
   Palet: navy korporat + emas aksen, tipografi Plus Jakarta Sans
   ========================================================================== */

:root{
  --navy-950:#050b1a;
  --navy-900:#0a1128;
  --navy-800:#0d1b3d;
  --navy-700:#0f2557;
  --navy-600:#123170;
  --navy-500:#173f8f;
  --blue-400:#2f6fed;
  --blue-300:#5b8dff;
  --gold-500:#c9a24b;
  --gold-400:#e0bd6c;
  --gold-300:#f2d795;
  --ink-900:#0b1120;
  --ink-700:#3a4358;
  --ink-500:#6b7488;
  --ink-300:#a7afc0;
  --paper-0:#ffffff;
  --paper-50:#f7f9fc;
  --paper-100:#eef2f9;
  --paper-200:#e3e9f4;
  --success:#1a9c62;
  --danger:#d64545;
  --warning:#c9862f;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:26px;
  --radius-pill:999px;
  --shadow-sm: 0 2px 10px rgba(10,17,40,.06);
  --shadow-md: 0 12px 32px rgba(10,17,40,.10);
  --shadow-lg: 0 24px 60px rgba(10,17,40,.16);
  --shadow-gold: 0 10px 30px rgba(201,162,75,.35);
  --ease: cubic-bezier(.22,1,.36,1);
  --container: 1200px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  color:var(--ink-900);
  background:var(--paper-0);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-weight:800;
  line-height:1.22;
  margin:0 0 .6em;
  color:var(--navy-900);
  letter-spacing:-.01em;
}
p{ line-height:1.85; color:var(--ink-700); margin:0 0 1.1em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--gold-300); color:var(--navy-900); }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.container-narrow{ max-width:840px; margin:0 auto; padding:0 24px; }

section{ position:relative; }
.section-pad{ padding:96px 0; }
.section-pad-sm{ padding:64px 0; }

@media (max-width:768px){
  .section-pad{ padding:64px 0; }
  .section-pad-sm{ padding:44px 0; }
}

/* ---------- Kop bagian (eyebrow + judul) --------------------------------- */
.kop-bagian{ text-align:center; max-width:720px; margin:0 auto 56px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-500);
  background:rgba(201,162,75,.10);
  border:1px solid rgba(201,162,75,.30);
  padding:7px 16px; border-radius:var(--radius-pill);
  margin-bottom:18px;
}
.eyebrow i{ font-size:11px; }
.kop-bagian h2{ font-size:clamp(26px,3.6vw,40px); }
.kop-bagian p{ font-size:16.5px; }

/* ---------- Tombol -------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:var(--radius-pill);
  font-weight:700; font-size:15px; border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap; position:relative; overflow:hidden;
}
.btn-emas{
  background:linear-gradient(135deg,var(--gold-400),var(--gold-500));
  color:var(--navy-950); box-shadow:var(--shadow-gold);
}
.btn-emas:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(201,162,75,.45); }
.btn-navy{ background:var(--navy-900); color:#fff; }
.btn-navy:hover{ transform:translateY(-3px); background:var(--navy-800); box-shadow:var(--shadow-lg); }
.btn-outline{ background:transparent; color:var(--navy-900); border-color:var(--paper-200); }
.btn-outline:hover{ border-color:var(--navy-900); transform:translateY(-3px); }
.btn-outline-light{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.35); backdrop-filter:blur(6px); }
.btn-outline-light:hover{ background:rgba(255,255,255,.14); transform:translateY(-3px); }
.btn-whatsapp{ background:#1fb35a; color:#fff; }
.btn-whatsapp:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(31,179,90,.4); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 20px; font-size:13.5px; }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-ghost{ background:var(--paper-100); color:var(--navy-900); }
.btn-ghost:hover{ background:var(--paper-200); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* ---------- Header / Navigasi --------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:18px 0;
  transition:all .4s var(--ease);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-header.scrolled{
  padding:10px 0; background:rgba(10,17,40,.86); backdrop-filter:blur(16px);
  box-shadow:0 8px 30px rgba(0,0,0,.18);
}
.brand{ display:flex; align-items:center; gap:12px; font-weight:800; font-size:22px; color:#fff; }
.brand img{ height:40px; width:40px; border-radius:10px; }
.brand small{ display:block; font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-300); }

.nav-utama{ display:flex; align-items:center; gap:6px; }
.nav-utama a{
  color:rgba(255,255,255,.86); font-weight:600; font-size:14.5px; padding:10px 16px; border-radius:var(--radius-pill);
  transition:all .3s var(--ease); position:relative;
}
.nav-utama a:hover, .nav-utama a.aktif{ color:#fff; background:rgba(255,255,255,.10); }
.header-aksi{ display:flex; align-items:center; gap:12px; }
.header-aksi .btn{ padding:11px 22px; font-size:13.5px; }
.nav-toggle{
  display:none; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff;
  width:44px; height:44px; border-radius:12px; align-items:center; justify-content:center; font-size:18px;
}

@media (max-width:991px){
  .nav-utama{ display:none; }
  .header-aksi .btn-outline-light{ display:none; }
  .nav-toggle{ display:flex; }
}

.mobile-menu{
  position:fixed; inset:0; z-index:1200; background:var(--navy-950);
  display:flex; flex-direction:column; padding:26px 24px; transform:translateX(100%);
  transition:transform .45s var(--ease);
}
.mobile-menu.terbuka{ transform:translateX(0); }
.mobile-menu .tutup{ align-self:flex-end; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff; width:42px;height:42px;border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.mobile-menu nav{ margin-top:40px; display:flex; flex-direction:column; gap:6px; }
.mobile-menu nav a{ color:#fff; font-size:20px; font-weight:700; padding:14px 6px; border-bottom:1px solid rgba(255,255,255,.08); }
.mobile-menu .mm-cta{ margin-top:30px; display:flex; flex-direction:column; gap:12px; }

/* ---------- Hero ------------------------------------------------------------ */
.hero{
  position:relative; padding:180px 0 120px; overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(47,111,237,.35), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(201,162,75,.25), transparent 40%),
    linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-800) 100%);
  color:#fff;
}
.hero::before{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:26px 26px; mask-image:linear-gradient(180deg, black, transparent 80%);
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; position:relative; z-index:2; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px; padding:8px 18px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); font-size:13px; font-weight:700;
  letter-spacing:.06em; margin-bottom:26px; backdrop-filter:blur(6px);
}
.hero-eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:#33d17a; box-shadow:0 0 0 4px rgba(51,209,122,.25); animation:denyut 1.8s infinite; }
@keyframes denyut{ 0%,100%{ box-shadow:0 0 0 4px rgba(51,209,122,.25);} 50%{ box-shadow:0 0 0 8px rgba(51,209,122,.08);} }
.hero h1{ color:#fff; font-size:clamp(34px,4.6vw,58px); letter-spacing:-.02em; margin-bottom:22px; }
.hero h1 span{ background:linear-gradient(120deg,var(--gold-300),var(--gold-500)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead{ color:rgba(255,255,255,.78); font-size:18px; max-width:560px; margin-bottom:34px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:46px; }
.hero-stat{ display:flex; gap:36px; flex-wrap:wrap; }
.hero-stat .angka{ font-size:30px; font-weight:800; color:#fff; }
.hero-stat .angka .plus{ color:var(--gold-400); }
.hero-stat .label{ font-size:12.5px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.08em; }

.hero-panel{
  position:relative; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg); padding:30px; backdrop-filter:blur(18px);
  box-shadow:var(--shadow-lg); animation:mengambang 6s ease-in-out infinite;
}
@keyframes mengambang{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }
.hero-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.hero-panel-head h4{ color:#fff; font-size:15px; margin:0; }
.badge-live{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.06em; color:#33d17a; background:rgba(51,209,122,.12); padding:5px 12px; border-radius:var(--radius-pill); }
.mini-track{ display:flex; flex-direction:column; gap:0; }
.mini-track .item{ display:flex; gap:14px; padding:12px 0; position:relative; }
.mini-track .item:not(:last-child)::after{ content:''; position:absolute; left:17px; top:38px; bottom:-6px; width:2px; background:rgba(255,255,255,.14); }
.mini-track .bulat{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.5); }
.mini-track .item.selesai .bulat{ background:linear-gradient(135deg,var(--gold-400),var(--gold-500)); color:var(--navy-950); border-color:transparent; }
.mini-track .item.aktif .bulat{ background:#2f6fed; color:#fff; border-color:transparent; box-shadow:0 0 0 6px rgba(47,111,237,.2); }
.mini-track .teks strong{ display:block; color:#fff; font-size:14px; }
.mini-track .teks span{ color:rgba(255,255,255,.5); font-size:12px; }
.hero-panel-foot{ margin-top:20px; padding-top:20px; border-top:1px dashed rgba(255,255,255,.15); display:flex; align-items:center; justify-content:space-between; }
.hero-panel-foot a{ color:var(--gold-300); font-weight:700; font-size:13.5px; }

@media(max-width:991px){
  .hero{ padding:150px 0 80px; }
  .hero-grid{ grid-template-columns:1fr; gap:50px; }
}

/* ---------- Marquee klien / kepercayaan ------------------------------------ */
.strip-percaya{ background:var(--paper-50); padding:26px 0; border-bottom:1px solid var(--paper-200); }
.strip-percaya .container{ display:flex; align-items:center; gap:40px; flex-wrap:wrap; justify-content:center; }
.strip-percaya span{ font-size:13px; color:var(--ink-500); font-weight:700; display:flex; align-items:center; gap:8px; }
.strip-percaya span i{ color:var(--gold-500); }

/* ---------- Keunggulan (fokus real time tracking) -------------------------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
@media(max-width:991px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr);} .grid-2{grid-template-columns:1fr;} }
@media(max-width:640px){ .grid-3,.grid-4{ grid-template-columns:1fr;} }

.kartu-unggul{
  background:#fff; border:1px solid var(--paper-200); border-radius:var(--radius-md); padding:32px 28px;
  transition:all .4s var(--ease); position:relative; overflow:hidden;
}
.kartu-unggul::before{ content:''; position:absolute; inset:0; background:linear-gradient(135deg,var(--navy-900),var(--navy-700)); opacity:0; transition:opacity .4s; z-index:0; }
.kartu-unggul:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; }
.kartu-unggul:hover::before{ opacity:1; }
.kartu-unggul > *{ position:relative; z-index:1; }
.kartu-unggul .ikon{ width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:rgba(47,111,237,.10); color:var(--blue-400); font-size:22px; margin-bottom:20px; transition:all .4s; }
.kartu-unggul:hover .ikon{ background:rgba(201,162,75,.18); color:var(--gold-300); }
.kartu-unggul h3{ font-size:19px; transition:color .4s; }
.kartu-unggul:hover h3{ color:#fff; }
.kartu-unggul p{ transition:color .4s; font-size:14.8px; margin-bottom:0; }
.kartu-unggul:hover p{ color:rgba(255,255,255,.78); }
.kartu-unggul.sorot{ background:linear-gradient(150deg,var(--navy-900),var(--navy-700)); color:#fff; }
.kartu-unggul.sorot::before{ opacity:0; }
.kartu-unggul.sorot h3, .kartu-unggul.sorot p{ color:#fff; }
.kartu-unggul.sorot p{ color:rgba(255,255,255,.75); }
.kartu-unggul.sorot .ikon{ background:rgba(201,162,75,.2); color:var(--gold-300); }
.kartu-unggul.sorot .chip-emas{ display:inline-block; margin-top:16px; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--navy-950); background:linear-gradient(135deg,var(--gold-400),var(--gold-500)); padding:6px 14px; border-radius:var(--radius-pill); }

/* ---------- Proses / pipeline preview -------------------------------------- */
.pipeline-preview{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; counter-reset:tahap; }
@media(max-width:991px){ .pipeline-preview{ grid-template-columns:repeat(3,1fr);} }
@media(max-width:560px){ .pipeline-preview{ grid-template-columns:1fr;} }
.tahap-kartu{ background:#fff; border:1px solid var(--paper-200); border-radius:var(--radius-md); padding:22px 18px; text-align:center; transition:all .35s var(--ease); }
.tahap-kartu:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--gold-400); }
.tahap-kartu .no{ counter-increment:tahap; width:38px; height:38px; border-radius:50%; background:var(--navy-900); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; margin:0 auto 14px; font-size:14px; }
.tahap-kartu .no::before{ content: counter(tahap); }
.tahap-kartu i{ display:block; font-size:20px; color:var(--gold-500); margin-bottom:10px; }
.tahap-kartu h4{ font-size:13.5px; margin:0; }

/* ---------- Layanan ---------------------------------------------------------*/
.kartu-layanan{ background:#fff; border:1px solid var(--paper-200); border-radius:var(--radius-md); padding:30px 26px; height:100%; display:flex; flex-direction:column; transition:all .4s var(--ease); }
.kartu-layanan:hover{ box-shadow:var(--shadow-lg); transform:translateY(-6px); border-color:var(--paper-0); }
.kartu-layanan .ikon-layanan{ width:58px; height:58px; border-radius:16px; background:var(--navy-900); color:var(--gold-300); display:flex; align-items:center; justify-content:center; font-size:23px; margin-bottom:20px; }
.kartu-layanan h3{ font-size:19.5px; margin-bottom:10px; }
.kartu-layanan p{ font-size:14.6px; flex-grow:1; }
.kartu-layanan .harga{ font-weight:800; color:var(--navy-900); font-size:14px; margin:10px 0 16px; }
.kartu-layanan .harga small{ font-weight:600; color:var(--ink-500); text-transform:none; }
.kartu-layanan .lihat{ font-weight:700; font-size:13.6px; color:var(--blue-400); display:inline-flex; align-items:center; gap:8px; }
.kartu-layanan .lihat i{ transition:transform .3s; }
.kartu-layanan:hover .lihat i{ transform:translateX(5px); }

/* ---------- Artikel ---------------------------------------------------------*/
.kartu-artikel{ background:#fff; border:1px solid var(--paper-200); border-radius:var(--radius-md); overflow:hidden; transition:all .4s var(--ease); display:flex; flex-direction:column; height:100%; }
.kartu-artikel:hover{ box-shadow:var(--shadow-lg); transform:translateY(-6px); }
.kartu-artikel .thumb{ height:180px; background:linear-gradient(150deg,var(--navy-900),var(--navy-600)); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.kartu-artikel .thumb i{ font-size:48px; color:rgba(255,255,255,.9); }
.kartu-artikel .thumb::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 80% 20%, rgba(201,162,75,.35), transparent 55%); }
.kartu-artikel .isi{ padding:24px 22px; display:flex; flex-direction:column; flex-grow:1; }
.kartu-artikel .kategori{ font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--gold-500); margin-bottom:10px; }
.kartu-artikel h3{ font-size:17.5px; margin-bottom:10px; }
.kartu-artikel h3 a{ transition:color .3s; }
.kartu-artikel:hover h3 a{ color:var(--blue-400); }
.kartu-artikel p{ font-size:14.2px; flex-grow:1; }
.kartu-artikel .meta{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-500); margin-top:14px; padding-top:14px; border-top:1px solid var(--paper-100); }

/* ---------- Testimoni -------------------------------------------------------*/
.kartu-testi{ background:#fff; border:1px solid var(--paper-200); border-radius:var(--radius-md); padding:28px; height:100%; }
.kartu-testi .bintang{ color:var(--gold-500); font-size:13px; margin-bottom:14px; letter-spacing:2px; }
.kartu-testi p{ font-size:14.6px; font-style:italic; color:var(--ink-700); }
.kartu-testi .penulis{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.kartu-testi .avatar{ width:44px; height:44px; border-radius:50%; background:var(--navy-900); color:var(--gold-300); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; }
.kartu-testi .penulis strong{ display:block; font-size:14px; color:var(--navy-900); }
.kartu-testi .penulis span{ font-size:12.5px; color:var(--ink-500); }

/* ---------- CTA band ---------------------------------------------------------*/
.cta-band{
  border-radius:var(--radius-lg); padding:60px 50px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--navy-950),var(--navy-700));
  color:#fff; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.cta-band::before{ content:''; position:absolute; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(201,162,75,.35),transparent 70%); top:-120px; right:-80px; }
.cta-band h2{ color:#fff; margin-bottom:10px; font-size:clamp(22px,3vw,32px); }
.cta-band p{ color:rgba(255,255,255,.72); margin:0; max-width:480px; }
.cta-band .aksi{ display:flex; gap:14px; flex-wrap:wrap; position:relative; z-index:1; }

/* ---------- Form umum ---------------------------------------------------------*/
.form-grup{ margin-bottom:20px; }
.form-grup label{ display:block; font-weight:700; font-size:13.5px; margin-bottom:8px; color:var(--navy-900); }
.form-kontrol{
  width:100%; padding:14px 16px; border-radius:12px; border:1.5px solid var(--paper-200); background:var(--paper-50);
  font-family:inherit; font-size:14.5px; color:var(--ink-900); transition:all .3s;
}
.form-kontrol:focus{ outline:none; border-color:var(--blue-400); background:#fff; box-shadow:0 0 0 4px rgba(47,111,237,.12); }
textarea.form-kontrol{ resize:vertical; min-height:130px; }
select.form-kontrol{ appearance:none; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7488' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:42px; }
.form-baris{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:640px){ .form-baris{ grid-template-columns:1fr; } }
.form-hint{ font-size:12px; color:var(--ink-500); margin-top:6px; }
.form-error{ font-size:12.5px; color:var(--danger); margin-top:6px; font-weight:600; }

/* ---------- Alert / notifikasi -------------------------------------------- */
.notif{ padding:16px 20px; border-radius:14px; font-size:14px; font-weight:600; margin-bottom:22px; display:flex; align-items:flex-start; gap:12px; }
.notif i{ margin-top:2px; }
.notif-sukses{ background:rgba(26,156,98,.1); color:var(--success); border:1px solid rgba(26,156,98,.25); }
.notif-gagal{ background:rgba(214,69,69,.1); color:var(--danger); border:1px solid rgba(214,69,69,.25); }
.notif-info{ background:rgba(47,111,237,.08); color:var(--blue-400); border:1px solid rgba(47,111,237,.2); }

/* ---------- Lacak progres (tracker publik) --------------------------------- */
.panel-lacak{ background:#fff; border:1px solid var(--paper-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:40px; }
.tracker-head{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:20px; margin-bottom:30px; padding-bottom:26px; border-bottom:1px solid var(--paper-100); }
.tracker-head h3{ margin-bottom:4px; }
.tracker-head .kode{ font-family:monospace; background:var(--paper-100); padding:4px 12px; border-radius:8px; font-weight:700; color:var(--navy-900); }
.status-pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:var(--radius-pill); font-weight:800; font-size:13px; background:rgba(47,111,237,.1); color:var(--blue-400); }
.status-pill.selesai{ background:rgba(26,156,98,.12); color:var(--success); }

.stepper{ display:flex; flex-direction:column; }
.stepper .langkah{ display:flex; gap:20px; position:relative; padding-bottom:34px; }
.stepper .langkah:last-child{ padding-bottom:0; }
.stepper .garis{ position:absolute; left:23px; top:48px; bottom:0; width:3px; background:var(--paper-200); border-radius:3px; }
.stepper .langkah.selesai .garis{ background:linear-gradient(var(--gold-500),var(--gold-500)); }
.stepper .bulat{ width:48px; height:48px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; background:var(--paper-100); color:var(--ink-500); border:2px solid var(--paper-200); z-index:1; transition:all .4s; }
.stepper .langkah.selesai .bulat{ background:var(--gold-500); color:#fff; border-color:var(--gold-500); }
.stepper .langkah.aktif .bulat{ background:var(--navy-900); color:#fff; border-color:var(--navy-900); box-shadow:0 0 0 8px rgba(15,37,87,.12); animation:nadi 2s infinite; }
@keyframes nadi{ 0%,100%{ box-shadow:0 0 0 8px rgba(15,37,87,.12);} 50%{ box-shadow:0 0 0 3px rgba(15,37,87,.12);} }
.stepper .isi-langkah h4{ font-size:16px; margin-bottom:4px; }
.stepper .isi-langkah p{ font-size:13.8px; margin-bottom:6px; }
.stepper .isi-langkah .waktu{ font-size:12px; color:var(--ink-500); font-weight:700; }
.stepper .langkah.tunggu .isi-langkah h4{ color:var(--ink-500); }

/* ---------- Tools ------------------------------------------------------------*/
.tool-card{ background:#fff; border:1px solid var(--paper-200); border-radius:var(--radius-lg); padding:34px; box-shadow:var(--shadow-sm); }
.tool-card h3{ display:flex; align-items:center; gap:12px; }
.tool-card h3 i{ color:var(--gold-500); }
.hasil-kalkulator{ margin-top:24px; padding:22px; border-radius:14px; background:var(--paper-50); border:1px dashed var(--paper-200); }
.hasil-kalkulator .total{ font-size:26px; font-weight:800; color:var(--navy-900); }
.checklist-item{ display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--paper-100); }
.checklist-item input{ margin-top:4px; width:18px; height:18px; accent-color:var(--gold-500); }
.checklist-item.tercentang label{ text-decoration:line-through; color:var(--ink-500); }

/* ---------- Tabel umum -------------------------------------------------------*/
.tabel-wrap{ overflow-x:auto; border-radius:14px; border:1px solid var(--paper-200); }
table.tabel{ width:100%; border-collapse:collapse; font-size:14px; min-width:640px; }
table.tabel th{ background:var(--paper-50); text-align:left; padding:14px 16px; font-weight:800; color:var(--navy-900); border-bottom:1px solid var(--paper-200); white-space:nowrap; }
table.tabel td{ padding:14px 16px; border-bottom:1px solid var(--paper-100); color:var(--ink-700); vertical-align:middle; }
table.tabel tr:last-child td{ border-bottom:none; }
table.tabel tr:hover td{ background:var(--paper-50); }

.chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 13px; border-radius:var(--radius-pill); font-size:12px; font-weight:800; }
.chip-biru{ background:rgba(47,111,237,.1); color:var(--blue-400); }
.chip-hijau{ background:rgba(26,156,98,.12); color:var(--success); }
.chip-emas2{ background:rgba(201,162,75,.15); color:#8a6a20; }
.chip-abu{ background:var(--paper-100); color:var(--ink-500); }
.chip-merah{ background:rgba(214,69,69,.1); color:var(--danger); }

/* ---------- Footer -------------------------------------------------------- */
.site-footer{ background:var(--navy-950); color:rgba(255,255,255,.7); padding:80px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.08); }
@media(max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer .brand{ margin-bottom:16px; }
.site-footer p{ color:rgba(255,255,255,.55); font-size:14px; }
.site-footer h5{ color:#fff; font-size:14.5px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:20px; }
.site-footer ul li{ margin-bottom:12px; }
.site-footer ul li a{ color:rgba(255,255,255,.6); font-size:14.2px; transition:color .3s, padding-left .3s; }
.site-footer ul li a:hover{ color:var(--gold-300); padding-left:4px; }
.footer-kontak li{ display:flex; gap:10px; align-items:flex-start; color:rgba(255,255,255,.6); font-size:14px; }
.footer-kontak li i{ color:var(--gold-400); margin-top:3px; }
.footer-sosial{ display:flex; gap:10px; margin-top:20px; }
.footer-sosial a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition:all .3s; }
.footer-sosial a:hover{ background:var(--gold-500); color:var(--navy-950); transform:translateY(-3px); }
.footer-bawah{ padding:26px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:rgba(255,255,255,.45); }
.footer-bawah a{ color:rgba(255,255,255,.45); }
.footer-bawah a:hover{ color:var(--gold-300); }

/* ---------- WhatsApp mengambang -------------------------------------------- */
.wa-mengambang{
  position:fixed; bottom:26px; right:26px; z-index:900; width:60px; height:60px; border-radius:50%;
  background:#1fb35a; color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px;
  box-shadow:0 12px 30px rgba(31,179,90,.45); animation:ambangnaik 3s ease-in-out infinite;
}
@keyframes ambangnaik{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }

/* ---------- Scroll reveal (fallback tanpa AOS) ------------------------------ */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].tampil{ opacity:1; transform:translateY(0); }
[data-reveal="fade"]{ transform:none; }
[data-reveal="scale"]{ transform:scale(.92); }
[data-reveal="scale"].tampil{ transform:scale(1); }

/* ---------- Progress bar loading halaman ------------------------------------*/
#bar-muat{ position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg,var(--gold-400),var(--blue-400)); z-index:2000; width:0; transition:width .4s var(--ease), opacity .4s; }

/* ---------- Halaman internal (page header) ---------------------------------- */
.header-halaman{
  padding:170px 0 70px; color:#fff; text-align:center;
  background:linear-gradient(160deg, var(--navy-950), var(--navy-800));
  position:relative; overflow:hidden;
}
.header-halaman::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 80% 0%, rgba(201,162,75,.25), transparent 50%); }
.header-halaman .container{ position:relative; z-index:1; }
.header-halaman h1{ color:#fff; font-size:clamp(28px,4vw,44px); margin-bottom:14px; }
.breadcrumb{ display:flex; justify-content:center; gap:8px; font-size:13.5px; color:rgba(255,255,255,.6); }
.breadcrumb a{ color:rgba(255,255,255,.75); }
.breadcrumb a:hover{ color:var(--gold-300); }

/* ---------- Artikel detail --------------------------------------------------*/
.artikel-isi{ font-size:16.5px; }
.artikel-isi p{ margin-bottom:1.4em; }
.kotak-artikel{ background:#fff; border:1px solid var(--paper-200); border-radius:var(--radius-lg); padding:44px; box-shadow:var(--shadow-sm); }
@media(max-width:640px){ .kotak-artikel{ padding:26px; } }
.tag-kategori{ display:inline-block; background:rgba(201,162,75,.14); color:#8a6a20; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.05em; padding:6px 14px; border-radius:var(--radius-pill); margin-bottom:16px; }
.artikel-meta-atas{ display:flex; gap:22px; flex-wrap:wrap; color:var(--ink-500); font-size:13.5px; margin-bottom:26px; padding-bottom:26px; border-bottom:1px solid var(--paper-100); }
.artikel-meta-atas span{ display:flex; align-items:center; gap:7px; }

/* ---------- Layanan detail -----------------------------------------------*/
.side-sticky{ position:sticky; top:110px; }
.kotak-cta-samping{ background:linear-gradient(150deg,var(--navy-950),var(--navy-700)); border-radius:var(--radius-lg); padding:32px; color:#fff; }
.kotak-cta-samping h4{ color:#fff; }
.kotak-cta-samping p{ color:rgba(255,255,255,.72); font-size:14px; }
.list-output li{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; font-size:14.4px; color:var(--ink-700); }
.list-output li i{ color:var(--success); margin-top:3px; }

/* ---------- Invoice / penawaran (tampilan cetak) ---------------------------- */
.invoice-wrap{ max-width:860px; margin:40px auto; background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:50px; border:1px solid var(--paper-200); }
.invoice-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-bottom:26px; border-bottom:3px solid var(--navy-900); margin-bottom:26px; flex-wrap:wrap; }
.invoice-brand{ display:flex; gap:14px; align-items:center; }
.invoice-brand img{ height:52px; }
.invoice-brand strong{ font-size:20px; color:var(--navy-900); display:block; }
.invoice-brand span{ font-size:12.5px; color:var(--ink-500); }
.invoice-judul{ text-align:right; }
.invoice-judul h2{ margin:0; font-size:26px; letter-spacing:.04em; }
.invoice-judul .nomor{ font-family:monospace; font-weight:700; color:var(--ink-500); }
.invoice-status{ margin-top:8px; }
.invoice-grid-info{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:30px; }
.invoice-grid-info h5{ font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-500); margin-bottom:8px; }
.invoice-grid-info p{ margin:0; font-size:14.5px; color:var(--navy-900); font-weight:600; line-height:1.6; }
table.tabel-invoice{ width:100%; border-collapse:collapse; margin-bottom:20px; }
table.tabel-invoice th{ background:var(--navy-900); color:#fff; text-align:left; padding:12px 14px; font-size:13px; }
table.tabel-invoice td{ padding:12px 14px; border-bottom:1px solid var(--paper-100); font-size:14px; }
table.tabel-invoice td.num, table.tabel-invoice th.num{ text-align:right; }
.invoice-total{ display:flex; justify-content:flex-end; }
.invoice-total table{ width:320px; }
.invoice-total td{ padding:8px 4px; font-size:14.5px; }
.invoice-total tr.grand td{ font-size:19px; font-weight:800; color:var(--navy-900); border-top:2px solid var(--navy-900); padding-top:14px; }
.invoice-bawah{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:40px; gap:20px; flex-wrap:wrap; }
.qr-box{ text-align:center; }
.qr-box img{ width:120px; height:120px; border:1px solid var(--paper-200); border-radius:12px; padding:8px; }
.qr-box p{ font-size:11px; color:var(--ink-500); margin-top:8px; max-width:140px; }
.ttd-box{ text-align:center; }
.ttd-box .garis-ttd{ margin-top:60px; border-top:1.5px solid var(--ink-900); width:200px; padding-top:8px; font-weight:700; font-size:13.5px; }
.invoice-aksi{ display:flex; gap:14px; justify-content:center; margin:30px auto; max-width:860px; padding:0 20px; }
.invoice-catatan{ margin-top:24px; padding:16px 20px; background:var(--paper-50); border-radius:12px; font-size:13px; color:var(--ink-700); }

@media print{
  .site-header,.site-footer,.wa-mengambang,.invoice-aksi,#bar-muat{ display:none !important; }
  body{ background:#fff; }
  .invoice-wrap{ box-shadow:none; margin:0; border:none; padding:0; max-width:100%; }
}

/* ---------- Loader halaman awal ---------------------------------------------*/
.preloader{ position:fixed; inset:0; background:var(--navy-950); z-index:5000; display:flex; align-items:center; justify-content:center; transition:opacity .6s, visibility .6s; }
.preloader.hilang{ opacity:0; visibility:hidden; }
.preloader .cincin{ width:56px; height:56px; border-radius:50%; border:3px solid rgba(255,255,255,.15); border-top-color:var(--gold-500); animation:putar 1s linear infinite; }
@keyframes putar{ to{ transform:rotate(360deg); } }

/* ---------- Responsif tambahan ---------------------------------------------*/
@media(max-width:768px){
  .invoice-wrap{ padding:26px; margin:20px; }
  .invoice-top{ flex-direction:column; }
  .invoice-judul{ text-align:left; }
  .invoice-grid-info{ grid-template-columns:1fr; }
  .cta-band{ padding:40px 26px; flex-direction:column; align-items:flex-start; }
}