/* build: v13-cache-bust */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{--navy:#0F172A;--navy-light:#1E293B;--amber:#F59E0B;--amber-dark:#D97706;--amber-bg:#FFFBEB;--gray-50:#F8FAFC;--gray-100:#F1F5F9;--gray-200:#E2E8F0;--gray-400:#94A3B8;--gray-500:#64748B;--gray-600:#475569;--white:#FFFFFF;--green-wa:#22C55E;--red:#EF4444;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--shadow-md:0 4px 16px rgba(0,0,0,0.08);--shadow-lg:0 10px 40px rgba(0,0,0,0.12);--urgency-h:0px;--navbar-h:64px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:auto!important}
body{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#fff;color:var(--navy);line-height:1.6;overflow-x:hidden;width:100%;max-width:100vw;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}a{text-decoration:none;color:inherit}ul{list-style:none}button{font-family:inherit;cursor:pointer;border:none;background:none}input,textarea,select{font-family:inherit}

/* URGENCY BAR */
#urgencyBar{position:fixed;top:0;left:0;right:0;z-index:1200;background:linear-gradient(135deg,#1a1a2e 0%,#D97706 100%);padding:10px 52px 10px 16px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;min-height:40px;box-shadow:0 2px 12px rgba(0,0,0,0.25)}
#urgencyBar .ub-text{font-size:12px;font-weight:700;color:#fff;text-align:center;line-height:1.4}
#urgencyBar .ub-cta{background:#fff;color:#D97706;font-size:11px;font-weight:800;padding:5px 14px;border-radius:50px;text-decoration:none;white-space:nowrap;flex-shrink:0;transition:background .2s,color .2s}
#urgencyBar .ub-cta:hover{background:var(--amber);color:var(--navy)}
#urgencyBar .ub-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.15);border:none;cursor:pointer;color:#fff;font-size:18px;line-height:1;padding:4px 7px;border-radius:50%;font-family:inherit;transition:background .2s}
#urgencyBar .ub-close:hover{background:rgba(255,255,255,0.3)}

/* NAVBAR */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--navy);height:var(--navbar-h);display:flex;align-items:center;justify-content:space-between;padding:0 40px;box-shadow:0 2px 20px rgba(0,0,0,0.3);transition:top .25s ease}
.nav-logo{display:flex;align-items:center}
.nav-logo img{height:38px;width:auto;display:block}
.nav-right{display:flex;align-items:center;gap:12px}

/* DESKTOP NAV LINKS */
.nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav-links a{color:#CBD5E1;font-size:14px;font-weight:500;padding:8px 14px;border-radius:6px;transition:color .2s,background .2s;white-space:nowrap}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,0.07)}
.nav-links a.active{color:var(--amber);font-weight:700}

/* KONSULTASI BUTTON */
.btn-konsultasi{display:inline-flex;align-items:center;gap:8px;background:var(--amber);color:var(--navy);font-weight:700;font-size:14px;padding:10px 20px;border-radius:50px;white-space:nowrap;transition:background .2s,transform .2s}
.btn-konsultasi:hover{background:var(--amber-dark);transform:translateY(-1px)}
.btn-konsultasi svg{width:16px;height:16px;flex-shrink:0}

/* HAMBURGER */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none}
.hamburger span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transition:transform .3s ease,opacity .3s ease;will-change:transform}

/* MOBILE NAV */
.mobile-nav{display:none;position:fixed;left:0;right:0;background:var(--navy-light);z-index:999;padding:16px 20px 20px;box-shadow:0 8px 24px rgba(0,0,0,0.3);transition:opacity .25s ease,transform .25s ease;opacity:0;transform:translateY(-8px);pointer-events:none}
.mobile-nav.open{display:block;opacity:1;transform:translateY(0);pointer-events:auto}
.mobile-nav a{display:block;color:#CBD5E1;font-size:15px;font-weight:500;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.07)}
.mobile-nav a:last-child{border:none}
.mobile-nav a:hover{color:var(--amber)}
.mobile-nav .nav-wa-mobile{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--amber);color:var(--navy);font-weight:700;font-size:14px;padding:12px 20px;border-radius:10px;margin-top:14px}

/* WA FLOAT — z-index 9999, always visible */

.wa-float svg{width:22px;height:22px;flex-shrink:0}



50%{box-shadow:0 4px 32px rgba(34,197,94,0.85),0 0 0 8px rgba(34,197,94,0.18)}}

/* PAGE WRAP */
.page-wrap{padding-top:var(--navbar-h)}
.container{max-width:1180px;margin:0 auto;padding:0 40px}

/* TYPOGRAPHY */
.section-label{display:block;font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--amber);margin-bottom:10px}
.section-title{font-size:clamp(26px,4vw,42px);font-weight:800;line-height:1.2;color:var(--navy)}
.section-title .accent{color:var(--amber)}
.section-subtitle{font-size:15px;color:var(--gray-500);margin-top:12px;line-height:1.7;max-width:600px}
.text-center{text-align:center}.text-white{color:var(--white)}.text-amber{color:var(--amber)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;padding:13px 26px;border-radius:8px;transition:all .2s ease;cursor:pointer;border:none}
.btn-primary{background:var(--amber);color:var(--navy)}
.btn-primary:hover{background:var(--amber-dark);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(245,158,11,0.35)}
.btn-wa{background:var(--green-wa);color:#fff}
.btn-wa:hover{background:#16a34a;transform:translateY(-2px)}
.btn-outline-white{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.35)}
.btn-outline-white:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.7)}
.btn-full{width:100%;justify-content:center}
.btn-lg{padding:15px 32px;font-size:15px}
.btn-xl{padding:17px 38px;font-size:16px;border-radius:10px}

/* HERO WA BUTTON — white box, dark text, WA logo green */
.btn-wa-hero{display:inline-flex;align-items:center;gap:10px;background:#FFFFFF!important;color:#1B4332!important;font-weight:700;font-size:15px;padding:14px 28px;border-radius:8px;border:none!important;box-shadow:0 4px 20px rgba(255,255,255,0.3);transition:all .2s ease;white-space:nowrap}
.btn-wa-hero:hover{background:#E8F5E9!important;color:#1B4332!important;transform:translateY(-2px);box-shadow:0 8px 28px rgba(255,255,255,0.4)}
.btn-wa-hero svg{flex-shrink:0}

/* SECTIONS */
.section-xl{padding:88px 0}.section-lg{padding:64px 0}
.bg-gray{background:var(--gray-100)}.bg-navy{background:var(--navy)}.bg-navy-light{background:var(--navy-light)}
.check-item{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,0.75)}
.check-item svg{width:18px;height:18px;color:var(--amber);flex-shrink:0}

/* PAGE HERO */
.page-hero{background:var(--navy);padding:60px 0 48px;text-align:center}
.page-hero .section-title{color:#fff}
.page-hero .section-subtitle{color:var(--gray-400);margin:12px auto 0}
.breadcrumb{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px;font-size:13px;color:var(--gray-500)}
.breadcrumb a{color:var(--amber)}

/* SCROLL ANIMATION */
[data-aos]{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
[data-aos].aos-animate{opacity:1;transform:translateY(0)}
[data-aos][data-delay="100"]{transition-delay:.1s}
[data-aos][data-delay="200"]{transition-delay:.2s}
[data-aos][data-delay="300"]{transition-delay:.3s}

/* FOOTER */
footer{background:var(--navy);border-top:3px solid rgba(245,158,11,0.3);padding:48px 40px 24px;color:var(--gray-400)}
.footer-logo{height:40px;margin-bottom:12px}
.footer-tagline{font-size:14px;color:#94A3B8;margin-bottom:4px}
.footer-sub{font-size:12px;color:var(--gray-500)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:32px;margin:36px 0 32px;text-align:left}
.footer-col-label{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--amber);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,0.08)}
.footer-col p,.footer-col a{font-size:13px;color:#94A3B8;line-height:1.8;text-decoration:none;display:block}
.footer-col a:hover{color:var(--amber)}
.footer-col a.green{color:#4ADE80!important;font-weight:600}
.footer-col ul{padding:0}.footer-col ul li{margin-bottom:6px}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.07);padding-top:20px;text-align:center;font-size:12px;color:var(--gray-500)}

/* TABLET */
@media(max-width:1024px){
  .container{padding:0 24px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
  .nav-links a{padding:8px 10px;font-size:13px}
}

/* URGENCY + NAVBAR POSITIONS */
body.has-urgency{--urgency-h:40px}
body.has-urgency .navbar{top:var(--urgency-h)}
body.has-urgency .mobile-nav{top:calc(var(--urgency-h) + var(--navbar-h))}
body.has-urgency .page-wrap{padding-top:calc(var(--urgency-h) + var(--navbar-h))}

/* MOBILE */
@media(max-width:768px){
  :root{--navbar-h:60px}
  html,body{width:100%;overflow-x:hidden}
  .container{padding:0 16px;width:100%;max-width:100%}
  .navbar{padding:0 16px}
  .nav-links{display:none!important}
  .btn-konsultasi{font-size:12px!important;padding:8px 12px!important;border-radius:50px!important;gap:6px!important;width:auto!important;height:auto!important;justify-content:center;flex-shrink:0}
  .btn-konsultasi span{display:none!important}
  .btn-konsultasi svg{width:16px;height:16px}
  .hamburger{display:flex}
  .section-xl{padding:56px 0}.section-lg{padding:44px 0}
  .hero{padding:80px 16px 48px}
  .hero-ctas{flex-direction:column;align-items:center;gap:12px;width:100%}
  .hero-ctas .btn,.hero-ctas .btn-wa-hero{width:100%;max-width:320px;justify-content:center;font-size:15px;padding:15px 20px}
  .hero-checks{flex-direction:column;align-items:center;gap:8px}
  .prob-grid{grid-template-columns:1fr;gap:12px}
  .sol-grid{grid-template-columns:1fr;gap:10px}
  .offer-grid{grid-template-columns:1fr;gap:12px}
  .testi-grid{grid-template-columns:1fr;gap:14px}
  .why-grid{grid-template-columns:1fr;gap:12px}
  .port-grid{grid-template-columns:1fr 1fr;gap:10px}
  
  
  footer{padding:36px 16px 20px}
  .footer-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:16px!important;margin:24px 0 16px!important}
  .footer-col:first-child{grid-column:1/-1!important;text-align:center!important}
  .footer-mobile-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  body.has-urgency{--urgency-h:44px}
  #urgencyBar{padding:8px 44px 8px 12px!important;min-height:44px}
  #urgencyBar .ub-text{font-size:11px!important}
}
@media(max-width:600px){.footer-mobile-row{grid-template-columns:1fr 1fr;gap:16px}}
@media(max-width:480px){
  .port-grid{grid-template-columns:1fr}
  .hero-ctas .btn,.hero-ctas .btn-wa-hero{max-width:100%}
  body.has-urgency{--urgency-h:54px}
  #urgencyBar{flex-direction:column;padding:10px 44px 10px 12px!important;min-height:54px}
  .footer-mobile-row{grid-template-columns:1fr 1fr}
}
#calcContainer,#kalkulator{overflow-anchor:none}

/* ══ DESKTOP NAV - WAJIB VISIBLE ══ */
@media (min-width: 769px) {
  .nav-links { display: flex !important; align-items: center; gap: 2px; }
  .hamburger { display: none !important; }
  .mobile-nav { display: none !important; }
  .btn-konsultasi {
    font-size: 14px !important;
    padding: 10px 20px !important;
    border-radius: 50px !important;
    width: auto !important;
    height: auto !important;
    gap: 8px !important;
  }
  .btn-konsultasi span { display: inline !important; }
}

/* ══ WA FLOAT ══ */
.wa-float {
  position: fixed !important;
  bottom: 24px !important;
  right: 20px !important;
  z-index: 99999 !important;
  background: #22C55E !important;
  color: #fff !important;
  padding: 13px 20px !important;
  border-radius: 50px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: 0 4px 24px rgba(34,197,94,0.55) !important;
  text-decoration: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateZ(0) !important;
  animation: pulse-wa 2.5s infinite !important;
}
.wa-float svg { flex-shrink: 0; width: 22px; height: 22px; }
.wa-float-text { display: flex; flex-direction: column; line-height: 1.3; }
.wa-float-title { font-size: 13px; font-weight: 800; color: #fff; }
.wa-float-sub { font-size: 11px; color: rgba(255,255,255,0.85); }
@keyframes pulse-wa {
  0%, 100% { box-shadow: 0 4px 24px rgba(34,197,94,.55); }
  50% { box-shadow: 0 4px 32px rgba(34,197,94,.85), 0 0 0 6px rgba(34,197,94,.15); }
}

/* ══ URGENCY BAR ══ */
#urgencyBar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100000 !important;
  background: #D97706;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 48px 10px 16px;
  font-family: inherit;
}
#urgencyBar span { font-size: 12px; font-weight: 700; color: #fff; text-align: center; }
#urgencyBar .urg-cta { background: #fff; color: #D97706; font-size: 11px; font-weight: 800; padding: 3px 12px; border-radius: 50px; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
#urgencyBar .urg-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #fff; font-size: 22px; line-height: 1; padding: 2px 6px; font-family: inherit; }

/* ══ HERO WA BUTTON ══ */
.btn-hero-wa {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #FFFFFF !important;
  color: #1D4ED8 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 14px 28px !important;
  border-radius: 10px !important;
  border: none !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
}
.btn-hero-wa:hover { background: #EFF6FF !important; transform: translateY(-2px) !important; }
.btn-hero-wa svg { flex-shrink: 0; }

/* ══ LOGO FIX ══ */
.nav-logo { flex-shrink: 0 !important; }
.nav-logo img {
  height: 40px !important;
  width: auto !important;
  max-width: 160px !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* ══ PRODUK MOBILE ══ */
@media (max-width: 768px) {
  .page-hero { padding: 44px 0 28px !important; }
  .page-hero .section-title { font-size: 24px !important; }
  .catalog-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .prod-img { height: 120px !important; }
  .prod-body { padding: 12px !important; }
  .prod-body h3 { font-size: 13px !important; }
  .prod-body p { font-size: 11px !important; margin-bottom: 6px !important; }
  .prod-price { font-size: 12px !important; }
  .section-heading { font-size: 16px !important; margin: 36px 0 16px !important; }
  .brosur-box { padding: 20px 16px !important; flex-direction: column !important; }
}


/* ===== FINAL CLEAN OVERRIDES ===== */

:root{--navbar-h:64px;--urgency-h:0px}
.page-wrap{padding-top:calc(var(--navbar-h) + var(--urgency-h))!important}
.navbar{top:var(--urgency-h)!important}
.mobile-nav{top:calc(var(--navbar-h) + var(--urgency-h))!important;background:#081327!important;border-top:1px solid rgba(255,255,255,.08)!important;max-height:calc(100vh - var(--navbar-h) - var(--urgency-h));overflow-y:auto}
.mobile-nav.open{display:block!important;opacity:1!important;transform:translateY(0)!important;pointer-events:auto!important}
.mobile-nav a{color:#E2E8F0!important}
.mobile-nav .nav-wa-mobile{display:flex!important;align-items:center!important;justify-content:center!important;color:#0B1B33!important}
#urgencyBar{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:100001!important}
#urgencyBar .urg-x{z-index:4!important;pointer-events:auto!important}
.btn-hero-wa,.btn-wa-hero{display:inline-flex!important;align-items:center!important;gap:10px!important;background:#fff!important;color:#1D4ED8!important;border-radius:10px!important;box-shadow:0 10px 30px rgba(255,255,255,.18)!important}
.btn-hero-wa:hover,.btn-wa-hero:hover{background:#EFF6FF!important;color:#1D4ED8!important}
.btn-hero-wa svg,.btn-wa-hero svg{color:#22C55E!important}
.footer-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr)!important;max-width:1120px!important;margin:36px auto 28px!important;gap:24px!important;align-items:start!important}
.subpage-footer-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;max-width:980px!important;margin:0 auto 28px!important;text-align:left!important;align-items:start!important}
.subpage-footer-grid > div,.footer-grid > div{min-width:0}
.subpage-footer-grid p,.footer-grid p{line-height:1.75!important}
.wa-float{right:18px!important;bottom:18px!important}
@media (max-width: 768px){
  :root{--navbar-h:60px}
  .navbar{padding:0 14px!important}
  .nav-right{gap:8px!important}
  .btn-konsultasi{font-size:11px!important;padding:8px 12px!important;gap:6px!important;max-width:none!important;white-space:nowrap!important;min-width:auto!important}
  .btn-konsultasi span{display:inline!important;font-size:11px!important;line-height:1.1!important;white-space:nowrap!important}
  .btn-konsultasi svg{width:14px!important;height:14px!important}
  .nav-logo img{height:34px!important;max-width:132px!important}
  .footer-grid{grid-template-columns:1fr!important}
  .subpage-footer-grid{grid-template-columns:1fr 1fr!important;gap:16px!important}
  .wa-float{left:14px!important;right:14px!important;bottom:14px!important;justify-content:center!important;border-radius:16px!important}
  .wa-float-text{display:flex!important}
}
@media (max-width: 520px){
  .subpage-footer-grid{grid-template-columns:1fr!important}
  #urgencyBar{padding:10px 44px 10px 12px!important;justify-content:flex-start!important}
  #urgencyBar span{font-size:11px!important;text-align:left!important}
}