:root{
  --navy:#0b2d4d;
  --navy-2:#123c63;
  --blue:#2e6e97;
  --red:#e83d55;
  --red-2:#c82f45;
  --ink:#13263b;
  --muted:#617386;
  --line:#dfe7ee;
  --soft:#f5f8fb;
  --soft-2:#eef4f8;
  --white:#ffffff;
  --shadow:0 24px 80px rgba(11,45,77,.13);
  --shadow-sm:0 10px 30px rgba(11,45,77,.09);
  --radius:26px;
  --radius-sm:18px;
  --container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.75;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
::selection{background:rgba(232,61,85,.18)}
.container{width:min(var(--container), calc(100% - 40px));margin-inline:auto}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--red);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  font-size:.78rem;margin-bottom:10px;
}
.eyebrow:before{content:"";width:34px;height:3px;background:var(--red);border-radius:20px}
h1,h2,h3,h4{line-height:1.15;margin:0 0 18px;color:var(--navy);letter-spacing:-.035em}
h1{font-size:clamp(2.45rem, 6vw, 5.2rem);font-weight:900}
h2{font-size:clamp(2rem, 4vw, 3.6rem);font-weight:900}
h3{font-size:clamp(1.25rem, 2vw, 1.65rem);font-weight:850}
p{margin:0 0 18px;color:var(--muted)}
.lead{font-size:clamp(1.04rem, 2vw, 1.28rem);color:#40566c;max-width:850px}
.text-center{text-align:center}.mx-auto{margin-inline:auto}.mb-0{margin-bottom:0}.mt-24{margin-top:24px}.mt-36{margin-top:36px}
.section{padding:92px 0;position:relative}.section.tight{padding:64px 0}.section.soft{background:linear-gradient(180deg,var(--soft),#fff)}
.section.dark{background:linear-gradient(135deg,#071f37,#103e62);color:#fff;overflow:hidden}
.section.dark h2,.section.dark h3{color:#fff}.section.dark p{color:#d7e4ef}
.section-header{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:38px}
.section-header .lead{max-width:660px}
.header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px);border-bottom:1px solid rgba(11,45,77,.08);
  transition:.25s ease;
}
.header.scrolled{box-shadow:0 10px 35px rgba(11,45,77,.08)}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;min-width:235px}.brand img{height:54px;width:auto;display:block;object-fit:contain}
.nav-menu{display:flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.nav-link{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  padding:11px 13px;border-radius:999px;font-weight:750;color:#213c56;font-size:.96rem;
  transition:.2s ease;
}
.nav-link:hover,.nav-link.active{color:var(--red);background:rgba(232,61,85,.08)}
.dropdown{position:relative}.dropdown-menu{
  position:absolute;top:calc(100% + 14px);left:0;min-width:270px;background:#fff;border:1px solid rgba(11,45,77,.09);
  box-shadow:var(--shadow-sm);border-radius:16px;padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:.2s ease;
}
.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu a{display:block;padding:11px 12px;border-radius:12px;color:#263f58;font-weight:700;line-height:1.3}
.dropdown-menu a:hover{background:var(--soft);color:var(--red)}
.nav-actions{display:flex;align-items:center;gap:12px}.menu-toggle{display:none;background:var(--navy);color:#fff;border:0;border-radius:14px;padding:10px 12px;cursor:pointer}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;padding:14px 22px;
  font-weight:850;line-height:1;color:#fff;background:var(--red);box-shadow:0 14px 30px rgba(232,61,85,.25);cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.btn:hover{transform:translateY(-2px);background:var(--red-2);box-shadow:0 20px 40px rgba(232,61,85,.32)}
.btn.secondary{background:var(--navy);box-shadow:0 14px 30px rgba(11,45,77,.2)}
.btn.secondary:hover{background:#06223d}
.btn.ghost{background:#fff;color:var(--navy);box-shadow:none;border:1px solid rgba(11,45,77,.14)}
.btn.ghost:hover{box-shadow:var(--shadow-sm)}
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:110px 0 72px;background:
    radial-gradient(circle at 15% 20%, rgba(46,110,151,.20), transparent 32%),
    radial-gradient(circle at 82% 15%, rgba(232,61,85,.16), transparent 34%),
    linear-gradient(180deg,#ffffff 0%,#f2f7fb 100%);
}
.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(11,45,77,.04) 1px, transparent 1px),linear-gradient(90deg,rgba(11,45,77,.04) 1px, transparent 1px);background-size:44px 44px;mask-image:linear-gradient(180deg,#000,transparent 78%);z-index:-2}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.hero-title span{color:var(--red)}
.hero-copy{max-width:720px;font-size:1.16rem;color:#41596f}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;max-width:760px}.badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(11,45,77,.09);box-shadow:0 10px 30px rgba(11,45,77,.08);padding:10px 15px;border-radius:999px;font-size:.9rem;font-weight:800;color:#123a5a;line-height:1.25;transition:.22s ease}.badge:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(11,45,77,.13);border-color:rgba(226,47,62,.22)}
.hero-visual{position:relative;min-height:530px;display:grid;place-items:center}.orb{position:absolute;border-radius:50%;filter:blur(.2px);opacity:.8}.orb.one{width:150px;height:150px;background:rgba(232,61,85,.18);right:20px;top:15px;animation:float 7s ease-in-out infinite}.orb.two{width:105px;height:105px;background:rgba(46,110,151,.18);left:30px;bottom:55px;animation:float 8s ease-in-out infinite reverse}.dashboard-card{
  width:min(100%,470px);border-radius:34px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 38px 100px rgba(11,45,77,.18);backdrop-filter:blur(18px);padding:22px;position:relative;overflow:hidden;
  animation:float 7s ease-in-out infinite;
}
.dashboard-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(46,110,151,.10),transparent 40%,rgba(232,61,85,.10));pointer-events:none}
.visual-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;position:relative}.status{display:inline-flex;align-items:center;gap:8px;color:#1d5d3f;font-weight:850;font-size:.9rem}.status:before{content:"";width:10px;height:10px;border-radius:50%;background:#22b573;box-shadow:0 0 0 7px rgba(34,181,115,.13)}
.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;position:relative}.mini-tile{background:#fff;border:1px solid rgba(11,45,77,.08);border-radius:20px;padding:18px;box-shadow:0 12px 34px rgba(11,45,77,.08)}
.mini-tile .icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;font-size:1.45rem;margin-bottom:16px}.mini-tile.red .icon{background:linear-gradient(135deg,var(--red),#ff7e72)}
.mini-tile h4{font-size:1rem;margin-bottom:7px}.mini-tile p{font-size:.88rem;margin:0;line-height:1.5}.metric-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px;position:relative}.metric{background:linear-gradient(135deg,#0b2d4d,#17486f);color:#fff;border-radius:18px;padding:17px 12px;text-align:center;min-height:98px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(11,45,77,.18)}.metric strong{display:block;font-size:1.45rem;line-height:1;margin-bottom:8px}.metric span{font-size:.74rem;line-height:1.35;color:#d9e8f5;font-weight:800;letter-spacing:.01em}
.page-hero{padding:82px 0 68px;background:linear-gradient(135deg,#f7fafc,#edf4f9);position:relative;overflow:hidden;border-bottom:1px solid rgba(11,45,77,.07)}
.page-hero:after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(46,110,151,.12);right:-220px;top:-240px}.page-hero .container{position:relative;z-index:1}.breadcrumb{display:flex;gap:8px;flex-wrap:wrap;color:#617386;font-weight:700;margin-bottom:18px}.breadcrumb a{color:var(--red)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:42px}.stat-card{background:#fff;border:1px solid rgba(11,45,77,.08);border-radius:var(--radius-sm);padding:24px;box-shadow:var(--shadow-sm)}.stat-card strong{display:block;color:var(--navy);font-size:2.15rem;line-height:1;font-weight:950}.stat-card span{color:var(--muted);font-weight:700;font-size:.95rem}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.cards-grid.two{grid-template-columns:repeat(2,1fr)}.cards-grid.four{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid rgba(11,45,77,.09);border-radius:var(--radius);padding:28px;box-shadow:0 10px 34px rgba(11,45,77,.06);transition:.24s ease;position:relative;overflow:hidden}.card:before{content:"";position:absolute;left:0;top:0;width:100%;height:5px;background:linear-gradient(90deg,var(--red),var(--blue));transform:scaleX(0);transform-origin:left;transition:.35s ease}.card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}.card:hover:before{transform:scaleX(1)}
.card-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:20px;background:linear-gradient(135deg,#0b2d4d,#2e6e97);color:#fff;font-size:1.65rem;margin-bottom:20px;box-shadow:0 18px 36px rgba(11,45,77,.16)}
.card.red .card-icon{background:linear-gradient(135deg,var(--red),#ff805f)}.card.green .card-icon{background:linear-gradient(135deg,#148c7a,#2db39e)}.card.orange .card-icon{background:linear-gradient(135deg,#f08a40,#ff6b55)}.card p{margin-bottom:20px}.card-link{display:inline-flex;align-items:center;gap:8px;color:var(--red);font-weight:850}.card-link:hover{gap:12px}
.feature-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}.feature-list li{position:relative;padding-left:30px;color:#4b5f73}.feature-list li:before{content:"✓";position:absolute;left:0;top:0;color:var(--red);font-weight:900}.check-list{columns:2;column-gap:42px;margin:24px 0 0;padding:0;list-style:none}.check-list li{break-inside:avoid;position:relative;padding-left:31px;margin-bottom:12px;color:#445b70;font-weight:650}.check-list li:before{content:"";position:absolute;left:0;top:9px;width:14px;height:14px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px rgba(232,61,85,.12)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}.panel{background:#fff;border:1px solid rgba(11,45,77,.08);border-radius:34px;padding:34px;box-shadow:var(--shadow-sm)}.panel.soft-panel{background:linear-gradient(145deg,#f7fafc,#fff)}.image-panel{min-height:460px;border-radius:36px;background:linear-gradient(135deg,#0b2d4d,#2e6e97);box-shadow:var(--shadow);position:relative;overflow:hidden;padding:28px;color:#fff}.image-panel:before{content:"";position:absolute;inset:auto -80px -120px auto;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.13)}.image-panel:after{content:"";position:absolute;inset:40px auto auto -90px;width:240px;height:240px;border-radius:50%;background:rgba(232,61,85,.20)}.image-panel .content{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;min-height:405px}.image-panel h3{color:#fff;font-size:2.05rem;line-height:1.22;margin-bottom:18px}.image-panel p{color:#d7e4ef;font-size:1.02rem;line-height:1.85;margin-bottom:14px}.glass-card{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);border-radius:24px;padding:22px;backdrop-filter:blur(14px);margin-top:20px}.glass-card strong{display:block;font-size:2rem;line-height:1}.glass-card span{color:#dcecf7;font-weight:700}
.timeline{position:relative;display:grid;gap:18px}.timeline:before{content:"";position:absolute;left:21px;top:10px;bottom:10px;width:2px;background:#dce6ee}.timeline-item{display:grid;grid-template-columns:44px 1fr;gap:18px;position:relative}.timeline-no{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:900;box-shadow:0 0 0 8px #fff;z-index:1}.timeline-body{background:#fff;border:1px solid rgba(11,45,77,.08);border-radius:20px;padding:18px 20px;box-shadow:0 8px 24px rgba(11,45,77,.05)}.timeline-body h4{font-size:1.05rem;margin-bottom:6px}.timeline-body p{margin:0;font-size:.96rem}
.service-hero-card{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px}.service-big-card{background:#fff;border:1px solid rgba(11,45,77,.08);border-radius:28px;box-shadow:var(--shadow-sm);padding:28px}.service-big-card h3{display:flex;align-items:center;gap:12px}.service-big-card h3 span{width:46px;height:46px;border-radius:16px;background:var(--red);color:#fff;display:grid;place-items:center}
.portfolio-table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid rgba(11,45,77,.1);border-radius:24px;background:#fff;box-shadow:var(--shadow-sm)}.portfolio-table th{background:var(--navy);color:#fff;text-align:left;padding:18px;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em}.portfolio-table td{padding:18px;border-top:1px solid #e7edf2;color:#40566c;vertical-align:middle}.portfolio-table tr:nth-child(even) td{background:#f8fafc}.portfolio-table strong{color:#223a52}
.logo-cloud{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.client-pill{background:#fff;border:1px solid rgba(11,45,77,.09);border-radius:20px;min-height:96px;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;font-weight:850;color:#243e56;box-shadow:0 8px 24px rgba(11,45,77,.05);transition:.2s ease}.client-pill:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.cta{position:relative;overflow:hidden;background:linear-gradient(135deg,#071f37,#123f64);border-radius:38px;padding:52px;color:#fff;box-shadow:var(--shadow)}.cta:before{content:"";position:absolute;right:-120px;top:-140px;width:360px;height:360px;border-radius:50%;background:rgba(232,61,85,.23)}.cta:after{content:"";position:absolute;left:-130px;bottom:-150px;width:320px;height:320px;border-radius:50%;background:rgba(46,110,151,.32)}.cta-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:28px}.cta h2{color:#fff;margin-bottom:12px}.cta p{color:#dbe8f3;max-width:740px}.cta .btn{flex:0 0 auto;background:#fff;color:var(--navy);box-shadow:none}.cta .btn:hover{background:#f0f5f9}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px}.contact-card{background:#fff;border:1px solid rgba(11,45,77,.08);border-radius:26px;padding:26px;box-shadow:var(--shadow-sm)}.contact-item{display:grid;grid-template-columns:48px 1fr;gap:14px;margin-bottom:18px}.contact-item:last-child{margin-bottom:0}.contact-icon{width:48px;height:48px;border-radius:16px;background:rgba(232,61,85,.1);color:var(--red);display:grid;place-items:center;font-size:1.35rem}.contact-item strong{display:block;color:var(--navy);line-height:1.2}.contact-item span,.contact-item a{color:#52687c}.form{display:grid;gap:14px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:7px}.field label{font-weight:800;color:var(--navy);font-size:.92rem}.field input,.field textarea,.field select{width:100%;border:1px solid #d9e3ea;border-radius:16px;padding:13px 14px;background:#fff;color:var(--ink);outline:none;transition:.18s ease}.field textarea{min-height:140px;resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(46,110,151,.12)}
.map-card{min-height:320px;background:linear-gradient(135deg,#e8eff5,#f8fafc);border:1px solid rgba(11,45,77,.08);border-radius:26px;overflow:hidden;position:relative;display:grid;place-items:center;text-align:center;padding:32px}.map-card:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 25%,rgba(232,61,85,.16),transparent 24%),radial-gradient(circle at 75% 70%,rgba(46,110,151,.18),transparent 28%)}.map-card div{position:relative;z-index:1}.map-card strong{display:block;color:var(--navy);font-size:1.35rem;margin-bottom:6px}
.faq{display:grid;gap:14px}.faq details{background:#fff;border:1px solid rgba(11,45,77,.09);border-radius:18px;padding:18px 20px;box-shadow:0 8px 24px rgba(11,45,77,.04)}.faq summary{cursor:pointer;font-weight:850;color:var(--navy)}.faq p{margin:12px 0 0}.footer{background:#071f37;color:#c9d8e5;padding:70px 0 22px}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr 1fr;gap:30px;margin-bottom:42px}.footer h3,.footer h4{color:#fff}.footer p,.footer a{color:#c9d8e5}.footer a:hover{color:#fff}.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}.footer-logo{height:58px;width:auto;filter:none;margin-bottom:18px;background:#fff;padding:8px 12px;border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.12)}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:.92rem}.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:45;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;font-size:1.75rem;box-shadow:0 16px 38px rgba(37,211,102,.35);transition:.2s ease}.whatsapp-float:hover{transform:translateY(-4px) scale(1.04)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.show{opacity:1;transform:translateY(0)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@media (max-width:1080px){.nav-menu{position:fixed;inset:calc(78px + 36px) 16px auto 16px;background:#fff;border:1px solid rgba(11,45,77,.09);border-radius:24px;box-shadow:var(--shadow);padding:14px;display:none;flex-direction:column;align-items:stretch}.nav-menu.open{display:flex}.dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:var(--soft);margin:5px 0 0}.menu-toggle{display:inline-flex}.nav-actions .btn{display:none}.hero-grid,.split,.contact-grid{grid-template-columns:1fr}.hero{padding-top:72px}.hero-visual{min-height:430px}.cards-grid.four{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.section-header{align-items:start;flex-direction:column}.service-hero-card{grid-template-columns:1fr}}
@media (max-width:760px){.container{width:min(100% - 28px,var(--container))}.nav{height:72px}.brand img{height:48px}.hero{padding:56px 0}.hero-grid{gap:30px}.hero-title{font-size:clamp(2.35rem,11vw,3.55rem)}.hero-visual{display:none}.hero-buttons .btn{width:100%}.stats{grid-template-columns:repeat(2,1fr)}.cards-grid,.cards-grid.two,.cards-grid.four{grid-template-columns:1fr}.check-list{columns:1}.section{padding:68px 0}.cta{padding:34px 24px;border-radius:28px}.cta-content{align-items:flex-start;flex-direction:column}.form-row{grid-template-columns:1fr}.portfolio-table{display:block;overflow-x:auto;border-radius:18px}.portfolio-table th,.portfolio-table td{min-width:170px}.logo-cloud{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr}.whatsapp-float{right:16px;bottom:16px;width:52px;height:52px}.metric-strip{grid-template-columns:1fr}.mini-grid{grid-template-columns:1fr}.page-hero{padding:56px 0}}
@media (max-width:480px){h1{font-size:2.45rem}h2{font-size:2rem}.stats{grid-template-columns:1fr}.logo-cloud{grid-template-columns:1fr}.card,.panel{padding:22px}.contact-item{grid-template-columns:1fr}.contact-icon{margin-bottom:4px}}


/* Final professional revision: remove weak metric feature and strengthen Why KKP copy */
.image-panel .content .glass-card{display:none}
@media (max-width:760px){
  .image-panel{min-height:auto;padding:30px 24px}
  .image-panel .content{min-height:auto}
  .image-panel h3{font-size:1.65rem}
  .image-panel p{font-size:.98rem;line-height:1.75}
}


/* Revisi kerahasiaan portofolio: tabel hanya menampilkan klien dan periode kerja sama */
.portfolio-table th:nth-child(1),
.portfolio-table td:nth-child(1){width:70px;text-align:center}
.portfolio-table th:nth-child(2),
.portfolio-table td:nth-child(2){width:auto}
.portfolio-table th:nth-child(3),
.portfolio-table td:nth-child(3){width:210px;text-align:center;white-space:nowrap}
@media (max-width:760px){
  .portfolio-table th:nth-child(3),
  .portfolio-table td:nth-child(3){width:auto;white-space:normal}
}

/* Mobile portfolio table fix: tampil rapi di Android dan iPhone tanpa horizontal scroll */
@media (max-width: 760px){
  .portfolio-table{
    display:block !important;
    width:100% !important;
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .portfolio-table thead{
    display:none !important;
  }

  .portfolio-table tbody{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    width:100% !important;
  }

  .portfolio-table tr{
    display:block !important;
    width:100% !important;
    background:#fff !important;
    border:1px solid rgba(11,45,77,.10) !important;
    border-radius:18px !important;
    padding:16px 16px 14px !important;
    box-shadow:0 10px 28px rgba(11,45,77,.06) !important;
  }

  .portfolio-table td{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:16px !important;
    width:100% !important;
    min-width:0 !important;
    border:0 !important;
    padding:8px 0 !important;
    text-align:right !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
    font-size:.95rem !important;
    line-height:1.55 !important;
  }

  .portfolio-table td + td{
    border-top:1px solid rgba(11,45,77,.08) !important;
  }

  .portfolio-table td::before{
    content:attr(data-label);
    flex:0 0 42%;
    max-width:42%;
    text-align:left;
    color:#5d7184;
    font-size:.78rem;
    line-height:1.4;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  .portfolio-table td strong{
    display:block;
    color:#0b2d4d;
    font-size:1rem;
    line-height:1.55;
  }

  .portfolio-table td:first-child{
    align-items:center !important;
    padding-bottom:10px !important;
  }

  .portfolio-table td:first-child::after{
    content:"";
    display:block;
    width:34px;
    height:34px;
    border-radius:50%;
    background:#0b2d4d;
    color:#fff;
  }
}

@media (max-width: 420px){
  .portfolio-table tr{
    padding:14px 14px 12px !important;
  }

  .portfolio-table td{
    gap:12px !important;
    font-size:.92rem !important;
  }

  .portfolio-table td::before{
    flex-basis:46%;
    max-width:46%;
    font-size:.72rem;
  }
}


/* Revisi Rekam Jejak: data real dari company profile, bukan counter dummy */
.stats .stat-card{
  min-height:132px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  text-align:left;
  padding:24px 26px;
}

.stats .stat-card strong{
  line-height:1.05;
  letter-spacing:.01em;
  font-size:clamp(1.65rem, 2vw, 2.05rem);
}

.stats .stat-card span{
  max-width:280px;
  line-height:1.55;
  font-weight:850;
  color:#5d7184;
}

@media (max-width:760px){
  .stats .stat-card{
    min-height:auto;
    padding:22px 20px;
  }
  .stats .stat-card span{
    max-width:none;
  }
}

/* Revisi form kontak: tampilan lebih rapi dan pengiriman langsung ke WhatsApp */
:root{
  --whatsapp:#25d366;
  --whatsapp-2:#128c7e;
}
.contact-form-card{
  position:relative;
  overflow:hidden;
  padding:30px;
  border-color:rgba(37,211,102,.18);
  background:linear-gradient(180deg,#ffffff 0%,#f8fcfa 100%);
  box-shadow:0 18px 54px rgba(11,45,77,.10);
}
.contact-form-card:before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-82px;
  top:-88px;
  border-radius:50%;
  background:rgba(37,211,102,.13);
}
.contact-form-card .form-heading,
.contact-form-card .form{
  position:relative;
  z-index:1;
}
.form-heading{
  margin-bottom:20px;
}
.form-heading h3{
  margin-bottom:8px;
}
.form-heading p{
  max-width:640px;
  margin-bottom:0;
  color:#52687c;
  font-size:.98rem;
  line-height:1.65;
}
.form-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  border-radius:999px;
  padding:8px 13px;
  background:rgba(37,211,102,.12);
  color:#0f7a4d;
  font-size:.78rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.form-badge:before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--whatsapp);
  box-shadow:0 0 0 6px rgba(37,211,102,.14);
}
.contact-form-card .form{
  gap:16px;
}
.contact-form-card .field{
  gap:8px;
}
.contact-form-card .field input,
.contact-form-card .field textarea,
.contact-form-card .field select{
  min-height:56px;
  border-radius:18px;
  background:#fbfdff;
  border-color:#d7e4ec;
}
.contact-form-card .field textarea{
  min-height:156px;
}
.contact-form-card .field input:focus,
.contact-form-card .field textarea:focus,
.contact-form-card .field select:focus{
  border-color:var(--whatsapp);
  box-shadow:0 0 0 4px rgba(37,211,102,.14);
}
.whatsapp-submit{
  width:100%;
  min-height:56px;
  margin-top:4px;
  background:linear-gradient(135deg,var(--whatsapp),var(--whatsapp-2));
  box-shadow:0 16px 34px rgba(37,211,102,.28);
}
.whatsapp-submit:hover{
  background:linear-gradient(135deg,#20bd5a,#0e786b);
  box-shadow:0 22px 46px rgba(37,211,102,.34);
}
.form-note{
  margin:0;
  text-align:center;
  color:#5d7184;
  font-size:.88rem;
  line-height:1.5;
}
@media (max-width:760px){
  .contact-form-card{
    padding:24px 20px;
    border-radius:24px;
  }
  .whatsapp-submit{
    min-height:54px;
  }
}

/* Revisi FAQ: lebih lengkap, rapi, dan meyakinkan untuk calon klien serta vendor */
.faq-section{
  background:linear-gradient(180deg,#f6f9fc 0%,#ffffff 100%);
}
.faq-header{
  margin-bottom:26px;
}
.faq-header .lead{
  max-width:900px;
  margin-top:6px;
  margin-bottom:0;
}
.faq-trustbar{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:24px;
}
.faq-trustbar div{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(11,45,77,.09);
  border-radius:22px;
  padding:20px 20px 18px;
  box-shadow:0 12px 32px rgba(11,45,77,.06);
}
.faq-trustbar div:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,var(--red),var(--blue));
}
.faq-trustbar strong{
  display:block;
  color:var(--navy);
  font-size:1.04rem;
  line-height:1.25;
  margin-bottom:8px;
  font-weight:900;
}
.faq-trustbar span{
  display:block;
  color:#52687c;
  font-size:.94rem;
  line-height:1.65;
}
.faq-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.faq-grid details{
  position:relative;
  overflow:hidden;
  padding:0;
  border-radius:22px;
  border:1px solid rgba(11,45,77,.10);
  background:#fff;
  box-shadow:0 12px 34px rgba(11,45,77,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.faq-grid details:hover{
  transform:translateY(-3px);
  border-color:rgba(46,110,151,.22);
  box-shadow:0 18px 42px rgba(11,45,77,.10);
}
.faq-grid details[open]{
  border-color:rgba(232,61,85,.22);
}
.faq-grid summary{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  list-style:none;
  padding:20px 22px;
  cursor:pointer;
  font-weight:900;
  line-height:1.45;
  color:var(--navy);
}
.faq-grid summary::-webkit-details-marker{
  display:none;
}
.faq-grid summary:after{
  content:"+";
  flex:0 0 auto;
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(232,61,85,.10);
  color:var(--red);
  font-size:1.2rem;
  line-height:1;
  font-weight:900;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.faq-grid details[open] summary:after{
  transform:rotate(45deg);
  background:var(--red);
  color:#fff;
}
.faq-grid p{
  margin:0;
  padding:0 22px 22px;
  color:#52687c;
  font-size:.98rem;
  line-height:1.75;
}
@media (max-width:900px){
  .faq-trustbar,
  .faq-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width:760px){
  .faq-trustbar div,
  .faq-grid summary{
    padding:18px;
  }
  .faq-grid p{
    padding:0 18px 18px;
  }
}


/* Revisi brand header: logo + nama PT dengan animasi warna */
.brand{
  position:relative;
  flex:0 1 370px;
  min-width:330px;
  gap:14px;
}
.brand img{
  flex:0 0 auto;
}
.brand-wordmark{
  position:relative;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  font-size:clamp(1.08rem, 1.55vw, 1.58rem);
  line-height:1;
  font-weight:950;
  letter-spacing:-.045em;
  background:linear-gradient(90deg,#0b2d4d 0%,#1262c4 18%,#6b3fd6 34%,#e83d55 50%,#f08a40 64%,#148c7a 82%,#0b2d4d 100%);
  background-size:420% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:brandColorShift 7s linear infinite;
  text-shadow:0 10px 28px rgba(11,45,77,.10);
}
.brand-wordmark:after{
  content:"";
  position:absolute;
  left:2px;
  right:0;
  bottom:-8px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#0b2d4d,#e83d55,#148c7a,#0b2d4d);
  background-size:300% 100%;
  animation:brandColorShift 7s linear infinite reverse;
  opacity:.88;
}
@keyframes brandColorShift{
  0%{background-position:0% 50%}
  100%{background-position:420% 50%}
}
@media (prefers-reduced-motion:reduce){
  .brand-wordmark,
  .brand-wordmark:after{
    animation:none;
  }
}
@media (max-width:1080px){
  .brand{
    flex:1 1 auto;
    min-width:0;
  }
  .brand-wordmark{
    font-size:clamp(1rem, 3vw, 1.35rem);
  }
}
@media (max-width:760px){
  .brand{
    gap:10px;
  }
  .brand img{
    height:46px;
  }
  .brand-wordmark{
    max-width:210px;
    white-space:normal;
    line-height:1.06;
    font-size:1rem;
  }
  .brand-wordmark:after{
    bottom:-6px;
    height:2px;
  }
}
@media (max-width:480px){
  .brand{
    gap:8px;
  }
  .brand img{
    height:42px;
  }
  .brand-wordmark{
    max-width:150px;
    font-size:.88rem;
    letter-spacing:-.035em;
  }
}
@media (max-width:360px){
  .brand-wordmark{
    max-width:126px;
    font-size:.82rem;
  }
}

/* Premium visual upgrade: richer colors, smoother motion, stronger trust appearance */
:root{
  --cyan:#18b7d3;
  --electric:#2878ff;
  --gold:#f6b443;
  --deep:#061a2f;
  --surface:rgba(255,255,255,.82);
  --glass:rgba(255,255,255,.72);
  --shadow-premium:0 30px 90px rgba(6,26,47,.16);
  --shadow-hover:0 34px 90px rgba(6,26,47,.22);
}
html{
  background:#f6f9fc;
}
body{
  position:relative;
  background:
    radial-gradient(circle at 7% 12%,rgba(40,120,255,.11),transparent 30%),
    radial-gradient(circle at 92% 10%,rgba(232,61,85,.12),transparent 28%),
    radial-gradient(circle at 50% 95%,rgba(24,183,211,.12),transparent 34%),
    linear-gradient(180deg,#ffffff 0%,#f7fbff 45%,#ffffff 100%);
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(11,45,77,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,45,77,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 82%);
}
.scroll-progress{
  position:fixed;
  left:0;
  top:0;
  width:0;
  height:4px;
  z-index:100;
  background:linear-gradient(90deg,var(--red),var(--electric),var(--cyan),var(--gold));
  box-shadow:0 0 18px rgba(40,120,255,.34);
  transition:width .1s linear;
}
.cursor-glow{
  position:fixed;
  left:0;
  top:0;
  width:240px;
  height:240px;
  margin:-120px 0 0 -120px;
  border-radius:50%;
  pointer-events:none;
  z-index:2;
  opacity:.18;
  background:radial-gradient(circle,rgba(40,120,255,.58),rgba(232,61,85,.20) 42%,transparent 68%);
  filter:blur(6px);
  transform:translate3d(-999px,-999px,0);
  transition:opacity .2s ease;
  mix-blend-mode:multiply;
}
.header{
  background:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(255,255,255,.62);
  box-shadow:0 12px 40px rgba(11,45,77,.04);
}
.header:before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,var(--red),var(--electric),var(--cyan),var(--red));
  background-size:300% 100%;
  animation:gradientFlow 8s linear infinite;
}
.header.scrolled{
  background:rgba(255,255,255,.88);
  box-shadow:0 18px 48px rgba(6,26,47,.12);
}
.brand img{
  filter:drop-shadow(0 8px 16px rgba(6,26,47,.14));
  transition:transform .3s ease, filter .3s ease;
}
.brand:hover img{
  transform:translateY(-2px) scale(1.03);
  filter:drop-shadow(0 14px 22px rgba(6,26,47,.18));
}
.nav-link{
  overflow:hidden;
}
.nav-link:after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:5px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--red),var(--electric));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}
.nav-link:hover:after,
.nav-link.active:after{
  transform:scaleX(1);
}
.dropdown-menu{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  border-color:rgba(255,255,255,.72);
}
.btn{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,var(--red),#ff6d6d 48%,var(--red-2));
  box-shadow:0 18px 38px rgba(232,61,85,.28);
}
.btn:before{
  content:"";
  position:absolute;
  top:-80%;
  bottom:-80%;
  left:-55%;
  width:46%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(18deg);
  transition:left .6s ease;
}
.btn:hover:before{
  left:112%;
}
.btn.secondary{
  background:linear-gradient(135deg,#061f39,#0f4772 55%,#2878ff);
}
.btn.ghost{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px);
}
.btn-ripple{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  transform:scale(0);
  background:rgba(255,255,255,.55);
  animation:ripple .55s linear;
}
.hero{
  min-height:calc(100vh - 78px);
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 16% 20%,rgba(40,120,255,.18),transparent 28%),
    radial-gradient(circle at 82% 18%,rgba(232,61,85,.18),transparent 34%),
    radial-gradient(circle at 62% 84%,rgba(24,183,211,.14),transparent 32%),
    linear-gradient(135deg,#ffffff 0%,#f3f8fd 48%,#eef6ff 100%);
}
.hero:after{
  content:"";
  position:absolute;
  right:-220px;
  bottom:-260px;
  width:650px;
  height:650px;
  border-radius:50%;
  background:conic-gradient(from 90deg,rgba(232,61,85,.18),rgba(40,120,255,.20),rgba(24,183,211,.18),rgba(232,61,85,.18));
  filter:blur(2px);
  opacity:.7;
  animation:spinSlow 24s linear infinite;
  z-index:-1;
}
.hero-title{
  color:var(--deep);
  text-wrap:balance;
}
.hero-title span{
  color:transparent;
  background:linear-gradient(90deg,var(--red),#ff815f,var(--electric),var(--cyan));
  background-size:280% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:gradientFlow 7s ease infinite;
}
.hero-copy{
  color:#41566b;
}
.hero-badges .badge{
  animation:badgeIn .7s ease both;
}
.hero-badges .badge:nth-child(2){animation-delay:.08s}
.hero-badges .badge:nth-child(3){animation-delay:.16s}
.hero-badges .badge:nth-child(4){animation-delay:.24s}
.badge{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(16px);
  border-color:rgba(255,255,255,.8);
}
.dashboard-card{
  transform-style:preserve-3d;
  border:1px solid rgba(255,255,255,.82);
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(245,250,255,.72));
}
.dashboard-card:after{
  content:"";
  position:absolute;
  inset:auto 22px 22px;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--red),var(--electric),var(--cyan));
  background-size:250% 100%;
  animation:gradientFlow 8s linear infinite;
}
.mini-tile,
.metric,
.card,
.panel,
.service-big-card,
.contact-card,
.stat-card,
.client-pill,
.faq-grid details{
  will-change:transform;
}
.card,
.panel,
.service-big-card,
.contact-card,
.stat-card,
.client-pill{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,252,255,.90));
  border-color:rgba(255,255,255,.78);
  box-shadow:0 16px 46px rgba(6,26,47,.08);
}
.card{
  transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(0);
}
.card:after,
.service-big-card:after,
.panel:after,
.contact-card:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(40,120,255,.18),rgba(232,61,85,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.card:hover,
.panel:hover,
.service-big-card:hover,
.contact-card:hover,
.stat-card:hover,
.client-pill:hover{
  transform:translateY(-10px);
  box-shadow:var(--shadow-hover);
}
.card:hover:after,
.service-big-card:hover:after,
.panel:hover:after,
.contact-card:hover:after{
  opacity:1;
}
.card-icon,
.contact-icon,
.service-big-card h3 span,
.timeline-no{
  position:relative;
  overflow:hidden;
  box-shadow:0 18px 36px rgba(6,26,47,.18), inset 0 1px 0 rgba(255,255,255,.28);
}
.card-icon:after,
.contact-icon:after,
.service-big-card h3 span:after,
.timeline-no:after{
  content:"";
  position:absolute;
  inset:-55% auto -55% -70%;
  width:55%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  transform:rotate(24deg);
  transition:left .6s ease;
}
.card:hover .card-icon:after,
.contact-item:hover .contact-icon:after,
.service-big-card:hover h3 span:after,
.timeline-item:hover .timeline-no:after{
  left:125%;
}
.section.soft{
  background:
    radial-gradient(circle at 5% 20%,rgba(40,120,255,.08),transparent 30%),
    radial-gradient(circle at 95% 50%,rgba(232,61,85,.09),transparent 32%),
    linear-gradient(180deg,#f4f8fc,#ffffff);
}
.page-hero{
  background:
    radial-gradient(circle at 12% 30%,rgba(40,120,255,.16),transparent 30%),
    radial-gradient(circle at 88% 12%,rgba(232,61,85,.16),transparent 34%),
    linear-gradient(135deg,#ffffff 0%,#eef6ff 100%);
}
.page-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(11,45,77,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(11,45,77,.05) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg,#000,transparent 80%);
}
.page-hero h1{
  max-width:980px;
  text-wrap:balance;
}
.breadcrumb{
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.76);
  border-radius:999px;
  width:max-content;
  max-width:100%;
  padding:9px 14px;
  box-shadow:0 12px 30px rgba(6,26,47,.06);
}
.image-panel,
.cta,
.footer{
  background:
    radial-gradient(circle at 12% 22%,rgba(40,120,255,.20),transparent 30%),
    radial-gradient(circle at 90% 22%,rgba(232,61,85,.18),transparent 28%),
    linear-gradient(135deg,#061a2f,#0b2d4d 52%,#123f64);
}
.image-panel{
  border:1px solid rgba(255,255,255,.12);
}
.image-panel:before,
.cta:before{
  animation:float 8s ease-in-out infinite;
}
.image-panel:after,
.cta:after{
  animation:float 9s ease-in-out infinite reverse;
}
.timeline:before{
  background:linear-gradient(180deg,var(--red),var(--electric),var(--cyan));
}
.timeline-no{
  background:linear-gradient(135deg,var(--red),var(--electric));
}
.portfolio-table{
  border-color:rgba(255,255,255,.78);
  box-shadow:var(--shadow-premium);
}
.portfolio-table th{
  background:linear-gradient(135deg,#061a2f,#0f4772);
}
.portfolio-table tbody tr{
  transition:transform .18s ease, box-shadow .18s ease;
}
.portfolio-table tbody tr:hover td{
  background:#f2f8ff;
}
.faq-grid details{
  background:linear-gradient(180deg,#ffffff,#f9fcff);
}
.faq-grid details[open]{
  box-shadow:0 22px 58px rgba(232,61,85,.12);
}
.contact-form-card{
  background:
    radial-gradient(circle at 94% 12%,rgba(37,211,102,.14),transparent 28%),
    linear-gradient(180deg,#ffffff,#f8fffb);
}
.contact-form-card .field input,
.contact-form-card .field textarea,
.contact-form-card .field select{
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.contact-form-card .field input:focus,
.contact-form-card .field textarea:focus,
.contact-form-card .field select:focus{
  transform:translateY(-2px);
  background:#fff;
}
.whatsapp-submit{
  background:linear-gradient(135deg,#25d366,#12b76a,#128c7e);
  background-size:220% 100%;
  animation:gradientFlow 6s ease infinite;
}
.whatsapp-float{
  animation:whatsappPulse 2.4s ease-in-out infinite;
}
.footer{
  position:relative;
  overflow:hidden;
}
.footer:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:54px 54px;
  pointer-events:none;
}
.footer .container{
  position:relative;
  z-index:1;
}
.footer-logo{
  box-shadow:0 16px 34px rgba(0,0,0,.18);
}
.reveal{
  transition:opacity .78s cubic-bezier(.22,1,.36,1),transform .78s cubic-bezier(.22,1,.36,1),filter .78s cubic-bezier(.22,1,.36,1);
  filter:blur(4px);
}
.reveal.show{
  filter:blur(0);
}
.reveal.stagger-1{transition-delay:.08s}
.reveal.stagger-2{transition-delay:.16s}
.reveal.stagger-3{transition-delay:.24s}
.reveal.stagger-4{transition-delay:.32s}
@keyframes gradientFlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes spinSlow{
  to{transform:rotate(360deg)}
}
@keyframes badgeIn{
  from{opacity:0;transform:translateY(12px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes ripple{
  to{transform:scale(4);opacity:0}
}
@keyframes whatsappPulse{
  0%,100%{box-shadow:0 16px 38px rgba(37,211,102,.35),0 0 0 0 rgba(37,211,102,.22)}
  50%{box-shadow:0 18px 44px rgba(37,211,102,.46),0 0 0 14px rgba(37,211,102,0)}
}
@media (max-width:1080px){
  .nav-menu{
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(18px);
    border-color:rgba(255,255,255,.8);
  }
  .hero{
    min-height:auto;
  }
}
@media (max-width:760px){
  .hero-badges{
    display:grid;
  }
  .badge{
    justify-content:flex-start;
  }
  .breadcrumb{
    width:100%;
    border-radius:18px;
  }
  .cursor-glow{
    display:none;
  }
  .card:hover,
  .panel:hover,
  .service-big-card:hover,
  .contact-card:hover,
  .stat-card:hover,
  .client-pill:hover{
    transform:translateY(-4px);
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
  .cursor-glow{
    display:none;
  }
}

/* Small structural polish for premium pseudo layers */
.panel,
.service-big-card,
.contact-card,
.stat-card,
.client-pill{
  position:relative;
  overflow:hidden;
}
.card:hover{
  transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-10px);
}

/* Enhanced process section */
.process-section{
  overflow:hidden;
  background:
    radial-gradient(circle at 9% 12%,rgba(40,120,255,.13),transparent 30%),
    radial-gradient(circle at 92% 18%,rgba(232,61,85,.12),transparent 30%),
    radial-gradient(circle at 48% 96%,rgba(24,183,211,.14),transparent 34%),
    linear-gradient(180deg,#f8fbff 0%,#eef8fb 48%,#ffffff 100%);
}
.process-section:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(11,45,77,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,45,77,.035) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(180deg,#000,transparent 82%);
}
.process-section .container{position:relative;z-index:1}
.process-header{
  align-items:flex-start;
  margin-bottom:34px;
}
.process-header .lead{
  margin-top:4px;
  margin-bottom:0;
  max-width:900px;
}
.process-overview-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:38px;
}
.process-feature{
  position:relative;
  padding:22px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,252,255,.86));
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 18px 48px rgba(6,26,47,.08);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.process-feature:before{
  content:"";
  position:absolute;
  inset:auto -20% -45% auto;
  width:140px;
  height:140px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(40,120,255,.16),transparent 70%);
}
.process-feature:hover{
  transform:translateY(-8px);
  box-shadow:0 28px 70px rgba(6,26,47,.14);
  border-color:rgba(40,120,255,.22);
}
.process-feature-icon{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  margin-bottom:16px;
  background:linear-gradient(135deg,rgba(232,61,85,.14),rgba(40,120,255,.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
  font-size:1.45rem;
}
.process-feature h3{
  margin-bottom:8px;
  font-size:1.12rem;
}
.process-feature p{
  margin:0;
  font-size:.94rem;
}
.process-flow-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:16px;
  min-height:220px;
  padding:42px clamp(28px,4vw,56px);
  margin-bottom:28px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:28px;
  background:
    linear-gradient(135deg,rgba(6,26,47,.96),rgba(11,45,77,.92) 56%,rgba(18,63,100,.90)),
    radial-gradient(circle at 80% 10%,rgba(24,183,211,.28),transparent 32%);
  box-shadow:0 26px 80px rgba(6,26,47,.18);
  overflow:hidden;
  position:relative;
}
.process-flow-head:before{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  right:-100px;
  top:-120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(232,61,85,.22),transparent 68%);
  animation:float 8s ease-in-out infinite;
}
.process-flow-head h3,
.process-flow-head p,
.process-flow-head .mini-label{position:relative;z-index:1}
.process-flow-head .mini-label{
  margin-bottom:0;
}
.process-flow-head h3{
  color:#fff;
  margin:0;
  max-width:880px;
  font-size:clamp(1.8rem,3.5vw,3rem);
  line-height:1.12;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.process-flow-head p{
  color:#dcebf7;
  margin:0;
  max-width:760px;
  font-size:1.02rem;
  line-height:1.65;
}
.mini-label{
  display:inline-flex;
  width:max-content;
  margin-bottom:12px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  font-size:.78rem;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.process-timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.process-timeline:before{
  content:"";
  position:absolute;
  left:50%;
  top:20px;
  bottom:20px;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,var(--red),var(--electric),var(--cyan));
  opacity:.34;
}
.process-step{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:16px;
  position:relative;
}
.process-step:nth-child(even){margin-top:34px}
.process-step-no{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:950;
  background:linear-gradient(135deg,var(--red),var(--electric));
  box-shadow:0 18px 42px rgba(6,26,47,.18), inset 0 1px 0 rgba(255,255,255,.3);
  position:relative;
  overflow:hidden;
}
.process-step-no:after{
  content:"";
  position:absolute;
  inset:-50% auto -50% -80%;
  width:62%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  transform:rotate(24deg);
  transition:left .6s ease;
}
.process-step:hover .process-step-no:after{left:130%}
.process-step-body{
  min-height:100%;
  padding:22px 24px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,252,255,.90));
  border:1px solid rgba(255,255,255,.84);
  box-shadow:0 18px 56px rgba(6,26,47,.08);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.process-step:hover .process-step-body{
  transform:translateY(-6px);
  box-shadow:0 30px 78px rgba(6,26,47,.15);
  border-color:rgba(24,183,211,.28);
}
.process-step-body h4{
  margin-bottom:8px;
  font-size:1.08rem;
}
.process-step-body p{
  margin-bottom:14px;
  font-size:.96rem;
}
.process-checklist{
  list-style:none;
  padding:0;
  margin:0 0 16px;
  display:grid;
  gap:8px;
}
.process-checklist li{
  position:relative;
  padding-left:24px;
  color:#415a72;
  font-size:.92rem;
  line-height:1.45;
}
.process-checklist li:before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  width:17px;
  height:17px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--electric),var(--cyan));
  font-size:.68rem;
  font-weight:900;
}
.process-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.process-tags span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(40,120,255,.08);
  color:#0b3b63;
  font-size:.78rem;
  font-weight:800;
}
.process-tags span:first-child{
  background:rgba(232,61,85,.10);
  color:#b3293c;
}
.process-assurance{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:26px;
  align-items:center;
  margin-top:34px;
  padding:30px;
  border-radius:30px;
  background:
    radial-gradient(circle at 10% 10%,rgba(40,120,255,.14),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,252,255,.90));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 26px 80px rgba(6,26,47,.12);
}
.process-assurance-copy h3{
  margin-bottom:12px;
  font-size:clamp(1.5rem,2.7vw,2.35rem);
}
.process-assurance-copy p{margin:0}
.assurance-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.assurance-list div{
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(11,45,77,.07);
  box-shadow:0 12px 34px rgba(6,26,47,.06);
}
.assurance-list strong{
  display:block;
  color:var(--navy);
  font-weight:900;
  margin-bottom:6px;
}
.assurance-list span{
  display:block;
  color:#5c7186;
  font-size:.93rem;
  line-height:1.55;
}
@media (max-width:980px){
  .process-overview-grid,
  .process-timeline,
  .process-assurance{
    grid-template-columns:1fr;
  }
  .process-timeline:before{left:28px;transform:none}
  .process-step:nth-child(even){margin-top:0}
  .process-flow-head{min-height:auto}
}
@media (max-width:720px){
  .process-header{display:grid;align-items:start}
  .process-overview-grid{gap:14px}
  .process-feature{padding:20px}
  .process-flow-head{padding:28px 22px;border-radius:24px}
  .process-flow-head h3{font-size:clamp(1.55rem,8vw,2.25rem)}
  .process-step{grid-template-columns:48px minmax(0,1fr);gap:12px}
  .process-step-no{width:48px;height:48px;border-radius:16px}
  .process-step-body{padding:20px}
  .process-assurance{padding:22px}
  .assurance-list{grid-template-columns:1fr}
}
@media (max-width:480px){
  .process-step{grid-template-columns:1fr}
  .process-timeline:before{display:none}
  .process-step-no{width:46px;height:46px}
  .process-tags span{font-size:.75rem}
}


/* Mobile menu refinement: clean, compact, and readable layout */
.menu-toggle{
  width:46px;
  height:46px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  padding:0;
  border-radius:16px;
  background:linear-gradient(135deg,#071f37,#0b3c64);
  box-shadow:0 12px 26px rgba(6,26,47,.20);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.menu-toggle span{
  display:block;
  width:19px;
  height:2px;
  border-radius:999px;
  background:#fff;
  transition:transform .2s ease, opacity .2s ease;
}
.menu-toggle.active{
  background:linear-gradient(135deg,var(--red),#ff6d6d);
  box-shadow:0 16px 30px rgba(232,61,85,.26);
}
.menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.menu-open{overflow:hidden}
@media (max-width:1080px){
  body.menu-open::before{
    content:"";
    position:fixed;
    inset:72px 0 0;
    z-index:40;
    background:rgba(6,26,47,.28);
    backdrop-filter:blur(2px);
  }
  .header{z-index:80}
  .nav{height:72px;gap:12px}
  .nav-actions{margin-left:auto}
  .menu-toggle{display:inline-flex !important;flex:0 0 auto}
  .nav-menu{
    position:fixed !important;
    top:84px !important;
    left:16px !important;
    right:16px !important;
    bottom:auto !important;
    width:auto !important;
    max-height:calc(100dvh - 104px);
    display:flex !important;
    flex-direction:column;
    align-items:stretch !important;
    gap:8px;
    margin:0 !important;
    padding:14px !important;
    list-style:none;
    background:rgba(255,255,255,.98) !important;
    border:1px solid rgba(11,45,77,.10) !important;
    border-radius:26px !important;
    box-shadow:0 24px 70px rgba(6,26,47,.22) !important;
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-12px) scale(.98);
    transform-origin:top right;
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index:90;
  }
  .nav-menu.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
  }
  .nav-menu::before{
    content:"Menu Navigasi";
    display:flex;
    align-items:center;
    min-height:38px;
    padding:0 8px 8px;
    color:#6a7d8f;
    font-size:.74rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.12em;
    border-bottom:1px solid rgba(11,45,77,.08);
    margin-bottom:4px;
  }
  .nav-menu li{width:100%}
  .nav-link{
    width:100%;
    min-height:48px;
    justify-content:space-between;
    padding:13px 15px;
    border-radius:16px;
    border:1px solid rgba(11,45,77,.07);
    background:#fff;
    box-shadow:0 8px 22px rgba(11,45,77,.045);
    color:#17344e;
    font-size:.98rem;
    line-height:1.2;
  }
  .nav-link::after{display:none !important}
  .nav-link:hover,
  .nav-link.active{
    color:#fff;
    background:linear-gradient(135deg,var(--red),#ff6d6d);
    border-color:transparent;
    box-shadow:0 12px 28px rgba(232,61,85,.22);
  }
  .dropdown{width:100%}
  .dropdown > .nav-link{margin-bottom:8px}
  .dropdown-menu{
    position:static !important;
    display:grid;
    gap:7px;
    width:100%;
    min-width:0 !important;
    margin:0 !important;
    padding:9px !important;
    border-radius:18px !important;
    border:1px solid rgba(11,45,77,.07) !important;
    background:linear-gradient(180deg,#f7fbff,#eef5fa) !important;
    box-shadow:none !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    backdrop-filter:none !important;
  }
  .dropdown-menu a{
    position:relative;
    display:flex;
    align-items:center;
    min-height:44px;
    padding:11px 12px 11px 34px;
    border-radius:14px;
    background:#fff;
    color:#17344e;
    font-size:.92rem;
    font-weight:800;
    line-height:1.25;
    border:1px solid rgba(11,45,77,.06);
  }
  .dropdown-menu a::before{
    content:"";
    position:absolute;
    left:15px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--red),var(--electric));
  }
  .dropdown-menu a:hover{
    color:var(--red);
    background:#fff8fa;
  }
  .nav-actions .btn{display:none !important}
}
@media (max-width:480px){
  body.menu-open::before{inset:68px 0 0}
  .nav{height:68px}
  .nav-menu{
    top:78px !important;
    left:12px !important;
    right:12px !important;
    max-height:calc(100dvh - 92px);
    padding:12px !important;
    border-radius:24px !important;
  }
  .nav-link{min-height:46px;padding:12px 14px;font-size:.96rem}
  .dropdown-menu{padding:8px !important}
  .dropdown-menu a{min-height:42px;font-size:.88rem}
}


/* Product catalog page */
.product-hero .lead{max-width:920px}
.product-section{background:linear-gradient(180deg,#ffffff 0%,#f5f9fc 100%)}
.product-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(310px,430px);
  gap:28px;
  align-items:end;
  margin-bottom:22px;
}
.product-toolbar h2{font-size:clamp(1.85rem,3vw,2.75rem)}
.product-search{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:62px;
  background:#fff;
  border:1px solid rgba(11,45,77,.12);
  border-radius:22px;
  padding:0 18px;
  box-shadow:0 18px 48px rgba(11,45,77,.08);
}
.product-search span{font-size:1.35rem;color:var(--red);font-weight:900}
.product-search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font-weight:750;
}
.product-search input::placeholder{color:#7b8da0;font-weight:650}
.product-filter-wrap{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 18px}
.product-filter{
  border:1px solid rgba(11,45,77,.12);
  background:#fff;
  color:#1d3b57;
  border-radius:999px;
  padding:10px 14px;
  font-size:.9rem;
  line-height:1;
  font-weight:850;
  cursor:pointer;
  transition:.2s ease;
  box-shadow:0 8px 22px rgba(11,45,77,.045);
}
.product-filter:hover{transform:translateY(-2px);border-color:rgba(232,61,85,.32);color:var(--red)}
.product-filter.active{background:linear-gradient(135deg,var(--red),#ff6d6d);color:#fff;border-color:transparent;box-shadow:0 14px 30px rgba(232,61,85,.22)}
.product-result-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(11,45,77,.08);
  border-radius:20px;
  padding:14px 16px;
  margin-bottom:24px;
  box-shadow:0 10px 30px rgba(11,45,77,.05);
}
.product-result-info strong{color:var(--navy);font-weight:900}
.product-result-info span{color:var(--muted);font-size:.92rem;line-height:1.45}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.product-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:26px;
  border-radius:26px;
  background:#fff;
  border:1px solid rgba(11,45,77,.09);
  box-shadow:0 12px 36px rgba(11,45,77,.07);
  position:relative;
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.product-card:before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--red),var(--blue));transform:scaleX(0);transform-origin:left;transition:.28s ease}
.product-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:rgba(232,61,85,.18)}
.product-card:hover:before{transform:scaleX(1)}
.product-card-top{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.product-logo{
  width:118px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:18px;
  color:#fff;
  font-weight:950;
  letter-spacing:.02em;
  background:#fff;
  border:1px solid rgba(11,45,77,.10);
  box-shadow:0 12px 26px rgba(11,45,77,.08);
  overflow:hidden;
}
.product-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  padding:6px 8px; background:#fff;
}
.product-brand{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 11px;
  border-radius:999px;
  background:rgba(232,61,85,.08);
  color:var(--red);
  font-size:.82rem;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.product-card h3{font-size:1.18rem;margin-bottom:12px;letter-spacing:-.02em}
.product-card p{font-size:.94rem;line-height:1.65;margin-bottom:18px}
.product-tags{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 20px}
.product-tags span{
  display:inline-flex;
  border:1px solid rgba(11,45,77,.10);
  background:#f7fafc;
  color:#38556f;
  border-radius:999px;
  padding:7px 10px;
  font-size:.76rem;
  line-height:1;
  font-weight:850;
}
.product-btn{width:100%;min-height:46px;padding:12px 16px;font-size:.9rem}
.product-empty{
  text-align:center;
  background:#fff;
  border:1px solid rgba(11,45,77,.10);
  border-radius:26px;
  padding:34px 22px;
  margin-top:24px;
  box-shadow:0 12px 36px rgba(11,45,77,.06);
}
.product-empty strong{display:block;color:var(--navy);font-size:1.2rem;margin-bottom:8px}
.product-empty p{margin:0 auto;max-width:620px}
@media (max-width:1080px){
  .product-toolbar{grid-template-columns:1fr;align-items:start}
  .product-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .product-search{min-height:58px;border-radius:18px}
  .product-grid{grid-template-columns:1fr}
  .product-result-info{align-items:flex-start;flex-direction:column}
  .product-filter{width:100%;justify-content:center;min-height:44px}
}


@media (max-width:520px){
  .product-logo{width:106px;height:56px}
  .product-logo img{padding:6px 8px}
}

.product-logo.brand-logo{
  background:linear-gradient(180deg,#ffffff,#fbfdff);
}
.product-logo img{
  image-rendering:auto;
}


/* Product page refinement: active search/filter, clean grid, and brand logo marquee */
[hidden]{display:none!important}
.product-section{background:linear-gradient(180deg,#ffffff 0%,#f5f9fc 100%)}
.product-toolbar{
  align-items:end;
  gap:28px;
  margin-bottom:22px;
}
.product-toolbar h2{
  max-width:700px;
  line-height:1.16;
}
.product-search{
  width:min(430px,100%);
  justify-self:end;
  box-shadow:0 18px 40px rgba(11,45,77,.08);
}
.product-search:focus-within{
  border-color:rgba(232,61,85,.45);
  box-shadow:0 18px 48px rgba(232,61,85,.12);
}
.product-filter-wrap{
  align-items:center;
  gap:10px;
  margin:8px 0 26px;
}
.product-filter{
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.product-filter.active{
  transform:translateY(-1px);
}
.brand-marquee-section{
  margin:24px 0 28px;
  padding:28px;
  border-radius:30px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border:1px solid rgba(11,45,77,.10);
  box-shadow:0 22px 60px rgba(11,45,77,.075);
  overflow:hidden;
}
.brand-marquee-heading{
  max-width:870px;
  margin-bottom:22px;
}
.brand-marquee-heading h2{
  margin:8px 0 8px;
  color:var(--navy);
  font-size:clamp(1.35rem,2.1vw,2.05rem);
  line-height:1.16;
  letter-spacing:-.035em;
}
.brand-marquee-heading p{
  margin:0;
  color:var(--muted);
  line-height:1.68;
  font-size:.98rem;
}
.brand-marquee{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:16px 0;
  background:#fff;
  border:1px solid rgba(11,45,77,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.brand-marquee:before,
.brand-marquee:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:92px;
  z-index:2;
  pointer-events:none;
}
.brand-marquee:before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.brand-marquee:after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.brand-marquee-track{
  display:flex;
  align-items:stretch;
  gap:18px;
  width:max-content;
  padding-left:18px;
  animation:brandLogoScroll 34s linear infinite;
  will-change:transform;
}
.brand-marquee:hover .brand-marquee-track{animation-play-state:paused}
.brand-logo-item{
  flex:0 0 auto;
  width:178px;
  min-height:112px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius:20px;
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  border:1px solid rgba(11,45,77,.09);
  box-shadow:0 10px 28px rgba(11,45,77,.06);
  text-decoration:none;
  color:var(--navy);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.brand-logo-item:hover{
  transform:translateY(-3px);
  border-color:rgba(232,61,85,.26);
  box-shadow:0 18px 38px rgba(11,45,77,.10);
}
.brand-logo-item img{
  width:100%;
  height:54px;
  object-fit:contain;
  display:block;
}
.brand-logo-item span{
  display:block;
  font-size:.78rem;
  line-height:1;
  font-weight:900;
  color:#42556b;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
@keyframes brandLogoScroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 9px))}
}
.product-result-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin:0 0 24px;
  padding:15px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(11,45,77,.09);
  box-shadow:0 10px 28px rgba(11,45,77,.05);
}
.product-result-info strong{color:var(--navy);font-weight:950}
.product-result-info span{color:var(--muted);font-size:.92rem;line-height:1.45}
.product-result-info b{color:var(--red);font-weight:900}
.product-list-title{
  margin:26px 0 18px;
}
.product-list-title h2{
  margin:6px 0 0;
  color:var(--navy);
  font-size:clamp(1.3rem,2vw,1.9rem);
  letter-spacing:-.03em;
}
.product-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
}
.product-card{
  height:100%;
  min-height:0;
}
.product-card.is-filtered-out{display:none!important}
.product-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
  flex-wrap:nowrap;
}
.product-logo{
  width:128px;
  height:62px;
  flex:0 0 128px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(11,45,77,.10);
  box-shadow:0 10px 24px rgba(11,45,77,.07);
  overflow:hidden;
}
.product-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  padding:8px 10px;
  background:#fff;
}
.product-brand{
  flex:0 0 auto;
  white-space:nowrap;
}
.product-empty{
  margin-top:24px;
}
@media (max-width:1080px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-toolbar{grid-template-columns:1fr;align-items:start}
  .product-search{justify-self:start;width:100%}
}
@media (max-width:760px){
  .brand-marquee-section{padding:20px;border-radius:24px}
  .brand-logo-item{width:148px;min-height:96px;padding:10px 12px}
  .brand-logo-item img{height:44px}
  .brand-marquee-track{gap:14px;animation-duration:25s}
  .brand-marquee:before,.brand-marquee:after{width:44px}
  .product-grid{grid-template-columns:1fr}
  .product-card-top{flex-wrap:wrap;justify-content:flex-start}
  .product-logo{width:122px;height:58px;flex-basis:122px}
  .product-filter{width:100%;justify-content:center;min-height:44px}
  .product-result-info{align-items:flex-start;flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .brand-marquee-track{animation:none}
}



/* === Product Page UI Refinement: search, filter, marquee, and card layout === */
.product-section{
  background:
    radial-gradient(circle at 10% 0%, rgba(232,61,85,.055), transparent 28%),
    radial-gradient(circle at 92% 12%, rgba(30,105,150,.075), transparent 30%);
}
.product-section .container{
  max-width:1180px;
}
.product-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,420px);
  align-items:center;
  gap:28px;
  padding:28px;
  margin-bottom:18px;
  border-radius:30px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(11,45,77,.09);
  box-shadow:0 22px 60px rgba(11,45,77,.07);
}
.product-toolbar h2{
  max-width:680px;
  margin-bottom:0;
  line-height:1.12;
}
.product-search{
  min-height:58px;
  border-radius:20px;
  background:#fff;
  box-shadow:0 16px 40px rgba(11,45,77,.075);
}
.product-search input{
  min-width:0;
  font-size:.94rem;
}
.product-filter-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 22px;
  padding:10px;
  border-radius:24px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(11,45,77,.08);
  box-shadow:0 14px 34px rgba(11,45,77,.045);
}
.product-filter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  white-space:nowrap;
  border-radius:999px;
}
.brand-marquee-section{
  position:relative;
  margin:22px 0 34px;
  padding:26px;
  border-radius:30px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border:1px solid rgba(11,45,77,.10);
  box-shadow:0 22px 60px rgba(11,45,77,.07);
  overflow:hidden;
}
.brand-marquee-section::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:160px;
  height:5px;
  background:linear-gradient(90deg,var(--red),var(--blue));
  border-radius:999px;
}
.brand-marquee-heading{
  max-width:860px;
  margin-bottom:20px;
}
.brand-marquee-heading h2{
  margin:8px 0 8px;
  color:var(--navy);
  font-size:clamp(1.25rem,2vw,1.9rem);
  line-height:1.16;
  letter-spacing:-.035em;
}
.brand-marquee-heading p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
  font-size:.95rem;
}
.brand-marquee{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:18px 0;
  background:#fff;
  border:1px solid rgba(11,45,77,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
}
.brand-marquee:before,
.brand-marquee:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:86px;
  z-index:2;
  pointer-events:none;
}
.brand-marquee:before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.brand-marquee:after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.brand-marquee-track{
  display:flex;
  align-items:center;
  gap:18px;
  width:max-content;
  padding-left:18px;
  animation:brandLogoScroll 32s linear infinite;
  will-change:transform;
}
.brand-marquee:hover .brand-marquee-track{animation-play-state:paused}
.brand-logo-item{
  flex:0 0 auto;
  width:176px;
  min-height:106px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:12px 16px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(11,45,77,.09);
  box-shadow:0 10px 28px rgba(11,45,77,.055);
  text-decoration:none;
  color:var(--navy);
  overflow:hidden;
}
.brand-logo-item img{
  width:100%;
  height:54px;
  object-fit:contain;
  display:block;
}
.brand-logo-item span{
  display:block;
  max-width:100%;
  font-size:.76rem;
  line-height:1.2;
  font-weight:900;
  color:#42556b;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  white-space:normal;
}
.brand-logo-item:hover{
  transform:translateY(-3px);
  border-color:rgba(232,61,85,.26);
  box-shadow:0 18px 38px rgba(11,45,77,.10);
}
.product-list-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin:28px 0 14px;
}
.product-list-title h2{
  margin:6px 0 0;
  color:var(--navy);
  font-size:clamp(1.28rem,2vw,1.9rem);
  line-height:1.2;
}
.product-status-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin:0 0 18px;
  padding:13px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(11,45,77,.08);
  box-shadow:0 10px 26px rgba(11,45,77,.045);
}
.product-status-bar strong{
  color:var(--navy);
  font-weight:900;
}
.product-status-bar span{
  color:var(--muted);
  font-size:.92rem;
}
.product-status-bar b{
  color:var(--red);
}
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:24px;
  align-items:stretch;
}
.product-card{
  display:flex;
  flex-direction:column;
  height:auto;
  min-height:430px;
  padding:24px;
  border-radius:28px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.94)),
    radial-gradient(circle at 100% 0%, rgba(232,61,85,.08), transparent 32%);
  border:1px solid rgba(11,45,77,.09);
  box-shadow:0 16px 42px rgba(11,45,77,.075);
  overflow:hidden;
}
.product-card.is-filtered-out,
.product-card[hidden]{
  display:none!important;
}
.product-card-top{
  display:grid;
  grid-template-columns:1fr;
  align-items:start;
  justify-items:start;
  gap:10px;
  margin-bottom:18px;
  min-width:0;
}
.product-logo{
  width:150px;
  max-width:100%;
  height:68px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(11,45,77,.10);
  box-shadow:0 10px 24px rgba(11,45,77,.065);
  overflow:hidden;
}
.product-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  padding:8px 10px;
  background:#fff;
}
.product-brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  min-height:30px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(232,61,85,.09);
  color:var(--red);
  font-size:.78rem;
  line-height:1.2;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:center;
}
.product-card h3{
  margin:0 0 12px;
  color:var(--navy);
  font-size:1.1rem;
  line-height:1.22;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.product-card p{
  margin:0 0 18px;
  color:var(--muted);
  font-size:.93rem;
  line-height:1.72;
}
.product-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:auto 0 20px;
}
.product-tags span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  border:1px solid rgba(11,45,77,.10);
  background:#f7fafc;
  color:#38556f;
  border-radius:999px;
  padding:7px 10px;
  font-size:.74rem;
  line-height:1.1;
  font-weight:850;
  white-space:normal;
}
.product-btn{
  width:100%;
  min-height:46px;
  padding:12px 16px;
  border-radius:999px;
  font-size:.9rem;
}
.product-empty{
  text-align:center;
  background:#fff;
  border:1px solid rgba(11,45,77,.10);
  border-radius:26px;
  padding:34px 22px;
  margin-top:24px;
  box-shadow:0 12px 36px rgba(11,45,77,.06);
}
@keyframes brandLogoScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(calc(-50% - 9px))}
}
@media (min-width:1180px){
  .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1080px){
  .product-toolbar{grid-template-columns:1fr;align-items:start}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .product-toolbar{padding:22px;border-radius:24px}
  .product-filter-wrap{border-radius:22px}
  .product-filter{width:100%;min-height:44px}
  .brand-marquee-section{padding:20px;border-radius:24px}
  .brand-logo-item{width:148px;min-height:94px;padding:10px 12px}
  .brand-logo-item img{height:43px}
  .brand-marquee-track{gap:14px;animation-duration:24s}
  .brand-marquee:before,.brand-marquee:after{width:44px}
  .product-grid{grid-template-columns:1fr}
  .product-card{min-height:0;padding:22px}
  .product-status-bar{align-items:flex-start;flex-direction:column}
}
@media (max-width:420px){
  .product-logo{width:138px;height:62px}
  .product-card h3{font-size:1.04rem}
}
@media (prefers-reduced-motion:reduce){
  .brand-marquee-track{animation:none}
}


/* === Header / Navbar Layout Fix === */
.header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(11,45,77,.08);
  box-shadow:0 10px 34px rgba(11,45,77,.055);
}
.header .nav,
.nav{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:nowrap;
}
.header .container.nav{
  width:min(100% - 48px, 1180px);
  margin-inline:auto;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:0 1 330px;
  text-decoration:none;
  overflow:hidden;
}
.brand img{
  width:74px;
  height:48px;
  max-width:74px;
  object-fit:contain;
  flex:0 0 auto;
}
.brand-wordmark{
  display:block;
  color:var(--navy);
  font-weight:900;
  font-size:1.05rem;
  line-height:1.1;
  letter-spacing:-.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:235px;
}
.nav-menu{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex:1 1 auto;
  min-width:0;
  margin:0;
  padding:0;
  list-style:none;
}
.nav-menu > li{
  position:relative;
  display:flex;
  align-items:center;
  min-width:0;
}
.nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 12px;
  border-radius:999px;
  color:var(--navy);
  font-weight:850;
  font-size:.88rem;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
}
.nav-link:hover{
  background:rgba(232,61,85,.08);
  color:var(--red);
  transform:translateY(-1px);
}
.nav-link.active{
  background:rgba(232,61,85,.10);
  color:var(--red);
  box-shadow:inset 0 -2px 0 rgba(232,61,85,.45);
}
.dropdown > .nav-link{
  gap:4px;
}
.dropdown-menu{
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:246px;
  padding:10px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(11,45,77,.10);
  box-shadow:0 24px 54px rgba(11,45,77,.16);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.2s ease;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.dropdown-menu a{
  display:block;
  padding:11px 13px;
  border-radius:12px;
  color:#24435f;
  font-weight:750;
  font-size:.88rem;
  line-height:1.25;
  text-decoration:none;
}
.dropdown-menu a:hover{
  background:rgba(232,61,85,.08);
  color:var(--red);
}
.nav-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex:0 0 auto;
}
.nav-actions .btn{
  min-height:46px;
  padding:12px 20px;
  border-radius:999px;
  font-size:.9rem;
  line-height:1.1;
  white-space:nowrap;
  box-shadow:0 14px 30px rgba(232,61,85,.18);
}
.menu-toggle{
  display:none;
  width:44px;
  height:44px;
  border:1px solid rgba(11,45,77,.12);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  padding:10px;
}
.menu-toggle span{
  display:block;
  width:100%;
  height:2px;
  margin:5px 0;
  border-radius:999px;
  background:var(--navy);
}

/* Keep desktop header clean on medium screens */
@media (max-width:1120px){
  .header .container.nav{width:min(100% - 32px, 1040px)}
  .brand{flex-basis:250px}
  .brand img{width:64px;height:42px;max-width:64px}
  .brand-wordmark{font-size:.94rem;max-width:172px}
  .nav-link{font-size:.82rem;padding:10px 9px}
  .nav-actions .btn{padding:11px 16px;font-size:.84rem}
}
@media (max-width:980px){
  .header .nav,
  .nav{
    min-height:68px;
  }
  .brand{
    flex:1 1 auto;
  }
  .brand-wordmark{
    max-width:260px;
  }
  .menu-toggle{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .nav-menu{
    position:absolute;
    top:100%;
    left:16px;
    right:16px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:14px;
    border-radius:22px;
    background:#fff;
    border:1px solid rgba(11,45,77,.10);
    box-shadow:0 24px 58px rgba(11,45,77,.16);
  }
  .nav-menu.open,
  .nav-menu.is-open,
  body.nav-open .nav-menu{
    display:flex;
  }
  .nav-menu > li{
    display:block;
    width:100%;
  }
  .nav-link{
    width:100%;
    justify-content:flex-start;
    min-height:44px;
    padding:12px 14px;
    border-radius:14px;
    font-size:.94rem;
  }
  .dropdown-menu{
    position:static;
    transform:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    min-width:0;
    width:100%;
    margin:6px 0 0;
    padding:8px;
    box-shadow:none;
    background:#f7fafc;
    border-radius:14px;
  }
  .dropdown:hover .dropdown-menu,
  .dropdown:focus-within .dropdown-menu{
    transform:none;
  }
  .nav-actions .btn{
    display:none;
  }
}
@media (max-width:520px){
  .header .container.nav{width:min(100% - 24px, 100%)}
  .brand img{width:56px;height:38px;max-width:56px}
  .brand-wordmark{font-size:.88rem;max-width:190px}
}



/* =========================================================
   PATCH PRODUK MOBILE - PT Kharisma Karya Pratama
   Memperbaiki ikon menu tiga garis, dropdown mobile, dan tampilan halaman produk.
   ========================================================= */
.header{
  overflow:visible !important;
}
.header .container.nav,
.header .nav{
  overflow:visible !important;
}
.header .menu-toggle{
  position:relative !important;
  display:none;
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  min-height:46px !important;
  padding:0 !important;
  border:1px solid rgba(11,45,77,.12) !important;
  border-radius:16px !important;
  background:#ffffff !important;
  box-shadow:0 10px 24px rgba(11,45,77,.12) !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:column !important;
  gap:5px !important;
  cursor:pointer !important;
  font-size:0 !important;
  line-height:0 !important;
  z-index:1003 !important;
}
.header .menu-toggle span{
  display:block !important;
  visibility:visible !important;
  width:22px !important;
  height:3px !important;
  min-height:3px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:#0b2d4d !important;
  opacity:1 !important;
  transform:none;
  transform-origin:center;
  transition:transform .22s ease, opacity .18s ease, background-color .18s ease;
}
.header .menu-toggle.active{
  background:linear-gradient(135deg,#e83d55,#ff6767) !important;
  border-color:transparent !important;
  box-shadow:0 14px 30px rgba(232,61,85,.28) !important;
}
.header .menu-toggle.active span{
  background:#ffffff !important;
}
.header .menu-toggle.active span:nth-child(1){
  transform:translateY(8px) rotate(45deg) !important;
}
.header .menu-toggle.active span:nth-child(2){
  opacity:0 !important;
}
.header .menu-toggle.active span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg) !important;
}

@media (max-width:980px){
  .header .menu-toggle{
    display:inline-flex !important;
    flex:0 0 46px !important;
  }
  .header .brand{
    flex:1 1 auto !important;
    max-width:calc(100% - 58px) !important;
  }
  .header .brand img{
    width:58px !important;
    height:40px !important;
    object-fit:contain !important;
  }
  .header .brand-wordmark{
    max-width:220px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .header .nav-menu{
    position:fixed !important;
    top:82px !important;
    left:14px !important;
    right:14px !important;
    bottom:auto !important;
    width:auto !important;
    max-height:calc(100dvh - 98px) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
    margin:0 !important;
    padding:14px !important;
    background:rgba(255,255,255,.98) !important;
    border:1px solid rgba(11,45,77,.10) !important;
    border-radius:24px !important;
    box-shadow:0 24px 70px rgba(6,26,47,.22) !important;
    overflow-y:auto !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(-12px) scale(.98) !important;
    transform-origin:top right !important;
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease !important;
    z-index:1002 !important;
  }
  .header .nav-menu.open,
  .header .nav-menu.is-open,
  body.menu-open .header .nav-menu,
  body.nav-open .header .nav-menu{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) scale(1) !important;
  }
  body.menu-open,
  body.nav-open{
    overflow:hidden !important;
  }
  body.menu-open::before,
  body.nav-open::before{
    content:"";
    position:fixed;
    inset:72px 0 0;
    z-index:1001;
    background:rgba(6,26,47,.28);
    backdrop-filter:blur(2px);
  }
  .header .nav-menu > li{
    width:100% !important;
    display:block !important;
  }
  .header .nav-link{
    width:100% !important;
    min-height:48px !important;
    justify-content:space-between !important;
    padding:13px 15px !important;
    border-radius:16px !important;
    border:1px solid rgba(11,45,77,.07) !important;
    background:#ffffff !important;
    box-shadow:0 8px 22px rgba(11,45,77,.045) !important;
    color:#17344e !important;
    font-size:.98rem !important;
    line-height:1.2 !important;
  }
  .header .nav-link::after{
    display:none !important;
  }
  .header .nav-link:hover,
  .header .nav-link.active{
    color:#ffffff !important;
    background:linear-gradient(135deg,#e83d55,#ff6d6d) !important;
    border-color:transparent !important;
  }
  .header .dropdown-menu{
    position:static !important;
    display:grid !important;
    gap:7px !important;
    width:100% !important;
    min-width:0 !important;
    margin:8px 0 0 !important;
    padding:9px !important;
    border-radius:18px !important;
    border:1px solid rgba(11,45,77,.07) !important;
    background:linear-gradient(180deg,#f7fbff,#eef5fa) !important;
    box-shadow:none !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
  }
  .header .nav-actions .btn{
    display:none !important;
  }
}

@media (max-width:760px){
  .product-hero{
    padding:42px 0 46px !important;
  }
  .product-hero h1{
    font-size:clamp(2rem,9vw,2.75rem) !important;
    line-height:1.08 !important;
  }
  .product-hero .lead{
    font-size:1rem !important;
    line-height:1.75 !important;
  }
  .product-section{
    padding-top:46px !important;
  }
  .product-toolbar{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
    padding:22px !important;
    margin-bottom:18px !important;
    border-radius:28px !important;
    background:rgba(255,255,255,.95) !important;
  }
  .product-toolbar h2{
    font-size:clamp(1.7rem,8vw,2.15rem) !important;
    line-height:1.08 !important;
    margin:8px 0 0 !important;
  }
  .product-search{
    min-height:56px !important;
    padding:0 14px !important;
    border-radius:18px !important;
  }
  .product-search span{
    flex:0 0 auto !important;
  }
  .product-search input{
    width:100% !important;
    min-width:0 !important;
    font-size:.9rem !important;
  }
  .product-filter-wrap{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:12px !important;
    margin:18px 0 24px !important;
    border-radius:24px !important;
    background:rgba(255,255,255,.92) !important;
  }
  .product-filter{
    width:100% !important;
    min-height:46px !important;
    justify-content:center !important;
    padding:11px 14px !important;
    white-space:normal !important;
    line-height:1.2 !important;
    font-weight:900 !important;
    box-shadow:0 8px 20px rgba(11,45,77,.045) !important;
  }
  .product-filter.active{
    background:linear-gradient(135deg,#e83d55,#ff6868) !important;
    color:#ffffff !important;
    border-color:transparent !important;
  }
  .brand-marquee-section{
    margin-top:20px !important;
  }
}

@media (max-width:420px){
  .header .container.nav{
    width:min(100% - 22px,100%) !important;
  }
  .header .brand img{
    width:52px !important;
    height:36px !important;
  }
  .header .brand-wordmark{
    max-width:175px !important;
    font-size:.86rem !important;
  }
  .header .menu-toggle{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
  }
  .header .nav-menu{
    top:76px !important;
    left:12px !important;
    right:12px !important;
  }
}

/* =========================================================
   FINAL MOBILE NAVIGATION FIX
   Tampilan menu mobile dibuat lebih rapi, bersih, dan premium.
   ========================================================= */
@media (max-width:1080px){
  .header{
    z-index:120 !important;
  }

  .header .container.nav{
    width:min(100% - 24px,var(--container)) !important;
  }

  .header .nav{
    height:72px !important;
  }

  .header .brand{
    min-width:0 !important;
    flex:1 1 auto !important;
  }

  .header .brand img{
    width:auto !important;
    height:44px !important;
    object-fit:contain !important;
  }

  .header .brand-wordmark{
    max-width:240px !important;
    color:#0b2d4d !important;
    background:none !important;
    -webkit-background-clip:initial !important;
    background-clip:initial !important;
    animation:none !important;
    text-shadow:none !important;
    font-size:.96rem !important;
    line-height:1.08 !important;
    letter-spacing:-.03em !important;
  }

  .header .brand-wordmark::after{
    display:none !important;
  }

  .header .nav-actions{
    margin-left:auto !important;
    flex:0 0 auto !important;
  }

  .header .menu-toggle{
    position:relative !important;
    z-index:130 !important;
    display:inline-flex !important;
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    border-radius:15px !important;
    border:1px solid rgba(11,45,77,.10) !important;
    background:#ffffff !important;
    box-shadow:0 10px 26px rgba(11,45,77,.14) !important;
  }

  .header .menu-toggle span{
    width:20px !important;
    height:2px !important;
    background:#0b2d4d !important;
  }

  .header .menu-toggle.active{
    border-color:transparent !important;
    background:linear-gradient(135deg,#e83d55,#ff6868) !important;
    box-shadow:0 16px 34px rgba(232,61,85,.30) !important;
  }

  .header .menu-toggle.active span{
    background:#ffffff !important;
  }

  body.menu-open::before{
    content:"" !important;
    position:fixed !important;
    inset:72px 0 0 0 !important;
    z-index:70 !important;
    background:rgba(8,31,52,.38) !important;
    backdrop-filter:blur(7px) !important;
    -webkit-backdrop-filter:blur(7px) !important;
  }

  .header .nav-menu{
    position:fixed !important;
    top:72px !important;
    right:0 !important;
    bottom:0 !important;
    left:auto !important;
    width:min(86vw,370px) !important;
    height:calc(100dvh - 72px) !important;
    max-height:none !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:4px !important;
    margin:0 !important;
    padding:20px 18px 24px !important;
    overflow-y:auto !important;
    list-style:none !important;
    background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%) !important;
    border:0 !important;
    border-left:1px solid rgba(11,45,77,.10) !important;
    border-radius:28px 0 0 0 !important;
    box-shadow:-22px 0 55px rgba(6,26,47,.22) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:none !important;
    transform:translateX(110%) !important;
    transition:transform .26s cubic-bezier(.22,.61,.36,1), box-shadow .26s ease !important;
    z-index:95 !important;
  }

  .header .nav-menu.open,
  .header .nav-menu.is-open{
    pointer-events:auto !important;
    transform:translateX(0) !important;
  }

  .header .nav-menu::before{
    content:"Navigasi" !important;
    display:block !important;
    min-height:auto !important;
    margin:0 0 12px !important;
    padding:0 2px 12px !important;
    border-bottom:1px solid rgba(11,45,77,.10) !important;
    color:#7a8ea2 !important;
    font-size:.72rem !important;
    font-weight:900 !important;
    line-height:1 !important;
    letter-spacing:.16em !important;
    text-transform:uppercase !important;
  }

  .header .nav-menu li{
    width:100% !important;
  }

  .header .nav-link{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-height:48px !important;
    padding:13px 14px !important;
    border:0 !important;
    border-radius:15px !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#0d2f4f !important;
    font-size:.98rem !important;
    font-weight:850 !important;
    line-height:1.2 !important;
    overflow:hidden !important;
  }

  .header .nav-link::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:50% !important;
    width:4px !important;
    height:0 !important;
    border-radius:999px !important;
    background:linear-gradient(180deg,#e83d55,#ff6868) !important;
    transform:translateY(-50%) !important;
    transition:height .2s ease !important;
  }

  .header .nav-link::after{
    display:none !important;
  }

  .header .nav-link:hover,
  .header .nav-link.active{
    color:#0b2d4d !important;
    background:rgba(232,61,85,.09) !important;
    box-shadow:none !important;
  }

  .header .nav-link:hover::before,
  .header .nav-link.active::before{
    height:26px !important;
  }

  .header .dropdown{
    width:100% !important;
  }

  .header .dropdown > .nav-link{
    margin:0 !important;
  }

  .header .dropdown-menu{
    position:static !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:4px !important;
    width:100% !important;
    min-width:0 !important;
    margin:2px 0 8px !important;
    padding:8px 0 8px 12px !important;
    border:0 !important;
    border-left:1px solid rgba(11,45,77,.10) !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    backdrop-filter:none !important;
  }

  .header .dropdown-menu a{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    min-height:38px !important;
    padding:9px 12px !important;
    border:0 !important;
    border-radius:12px !important;
    background:transparent !important;
    color:#52687c !important;
    font-size:.88rem !important;
    font-weight:800 !important;
    line-height:1.25 !important;
  }

  .header .dropdown-menu a::before{
    content:"" !important;
    position:static !important;
    width:6px !important;
    height:6px !important;
    flex:0 0 6px !important;
    margin-right:10px !important;
    border-radius:999px !important;
    background:#e83d55 !important;
  }

  .header .dropdown-menu a:hover{
    color:#e83d55 !important;
    background:rgba(232,61,85,.07) !important;
  }
}

@media (max-width:520px){
  .header .container.nav{
    width:min(100% - 20px,100%) !important;
  }

  .header .nav,
  .header .container.nav{
    height:68px !important;
  }

  .header .brand{
    gap:8px !important;
  }

  .header .brand img{
    height:38px !important;
  }

  .header .brand-wordmark{
    max-width:190px !important;
    font-size:.84rem !important;
    line-height:1.08 !important;
  }

  .header .menu-toggle{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    border-radius:14px !important;
  }

  body.menu-open::before{
    inset:68px 0 0 0 !important;
  }

  .header .nav-menu{
    top:68px !important;
    height:calc(100dvh - 68px) !important;
    width:min(88vw,350px) !important;
    padding:18px 16px 22px !important;
    border-radius:24px 0 0 0 !important;
  }

  .header .nav-link{
    min-height:46px !important;
    padding:12px 13px !important;
    font-size:.95rem !important;
  }

  .header .dropdown-menu a{
    min-height:36px !important;
    font-size:.84rem !important;
  }
}

@media (max-width:380px){
  .header .brand-wordmark{
    max-width:150px !important;
    font-size:.78rem !important;
  }

  .header .brand img{
    height:34px !important;
  }

  .header .nav-menu{
    width:90vw !important;
  }
}

/* =========================================================
   FINAL FIX MOBILE ANDROID/iPHONE - PT Kharisma Karya Pratama
   Fokus: menu mobile full-width, tidak side-by-side, tidak melebar keluar layar,
   dan halaman Produk lebih rapi di layar kecil.
   ========================================================= */
html,
body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}

@media (max-width:980px){
  body.menu-open,
  body.nav-open{
    overflow:hidden !important;
  }

  .header{
    position:sticky !important;
    top:0 !important;
    z-index:1200 !important;
    overflow:visible !important;
    background:rgba(255,255,255,.97) !important;
    border-bottom:1px solid rgba(11,45,77,.08) !important;
    box-shadow:0 8px 26px rgba(11,45,77,.08) !important;
  }

  .header .container.nav,
  .header .nav{
    width:100% !important;
    max-width:100% !important;
    min-height:64px !important;
    height:64px !important;
    padding:0 14px !important;
    margin:0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    overflow:visible !important;
  }

  .header .brand{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:calc(100% - 58px) !important;
    gap:8px !important;
    overflow:hidden !important;
  }

  .header .brand img{
    width:58px !important;
    height:38px !important;
    max-width:58px !important;
    object-fit:contain !important;
    flex:0 0 auto !important;
  }

  .header .brand-wordmark{
    display:block !important;
    max-width:185px !important;
    color:#0b2d4d !important;
    font-size:.84rem !important;
    line-height:1.08 !important;
    font-weight:900 !important;
    letter-spacing:-.03em !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    background:none !important;
    text-shadow:none !important;
    animation:none !important;
  }

  .header .brand-wordmark::before,
  .header .brand-wordmark::after{
    display:none !important;
  }

  .header .nav-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex:0 0 auto !important;
    margin-left:auto !important;
  }

  .header .nav-actions .btn{
    display:none !important;
  }

  .header .menu-toggle{
    position:relative !important;
    z-index:1300 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:5px !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    padding:0 !important;
    border:1px solid rgba(11,45,77,.12) !important;
    border-radius:14px !important;
    background:#ffffff !important;
    box-shadow:0 10px 24px rgba(11,45,77,.14) !important;
    cursor:pointer !important;
  }

  .header .menu-toggle span{
    display:block !important;
    width:20px !important;
    height:2px !important;
    margin:0 !important;
    border-radius:999px !important;
    background:#0b2d4d !important;
    transition:transform .22s ease, opacity .22s ease, background .22s ease !important;
  }

  .header .menu-toggle.active{
    border-color:transparent !important;
    background:linear-gradient(135deg,#e83d55,#ff636b) !important;
    box-shadow:0 14px 30px rgba(232,61,85,.30) !important;
  }

  .header .menu-toggle.active span{
    background:#ffffff !important;
  }

  .header .menu-toggle.active span:nth-child(1){
    transform:translateY(7px) rotate(45deg) !important;
  }

  .header .menu-toggle.active span:nth-child(2){
    opacity:0 !important;
  }

  .header .menu-toggle.active span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg) !important;
  }

  body.menu-open::before,
  body.nav-open::before{
    content:"" !important;
    position:fixed !important;
    top:64px !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    z-index:1000 !important;
    background:rgba(7,31,55,.44) !important;
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
  }

  .header .nav-menu{
    position:fixed !important;
    top:76px !important;
    left:14px !important;
    right:14px !important;
    bottom:auto !important;
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    max-height:calc(100dvh - 92px) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:8px !important;
    margin:0 !important;
    padding:18px 14px 16px !important;
    list-style:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%) !important;
    border:1px solid rgba(11,45,77,.10) !important;
    border-radius:24px !important;
    box-shadow:0 24px 70px rgba(6,26,47,.28) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(-12px) scale(.985) !important;
    transform-origin:top center !important;
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease !important;
    z-index:1250 !important;
  }

  .header .nav-menu.open,
  .header .nav-menu.is-open,
  body.menu-open .header .nav-menu,
  body.nav-open .header .nav-menu{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) scale(1) !important;
  }

  .header .nav-menu::before{
    content:"MENU NAVIGASI" !important;
    display:block !important;
    min-height:auto !important;
    margin:0 0 8px !important;
    padding:0 4px 10px !important;
    border-bottom:1px solid rgba(11,45,77,.09) !important;
    color:#7a8fa5 !important;
    font-size:.72rem !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.16em !important;
    text-transform:uppercase !important;
  }

  .header .nav-menu li{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }

  .header .nav-link{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-height:48px !important;
    padding:13px 15px !important;
    border:1px solid rgba(11,45,77,.075) !important;
    border-radius:16px !important;
    background:#ffffff !important;
    color:#0b2d4d !important;
    box-shadow:0 8px 20px rgba(11,45,77,.045) !important;
    font-size:.96rem !important;
    line-height:1.2 !important;
    font-weight:850 !important;
    text-align:left !important;
    white-space:normal !important;
    transform:none !important;
  }

  .header .nav-link::before,
  .header .nav-link::after{
    display:none !important;
  }

  .header .nav-link:hover,
  .header .nav-link.active{
    color:#ffffff !important;
    background:linear-gradient(135deg,#e83d55,#ff636b) !important;
    border-color:transparent !important;
    box-shadow:0 12px 26px rgba(232,61,85,.22) !important;
  }

  .header .dropdown{
    width:100% !important;
  }

  .header .dropdown > .nav-link{
    margin:0 0 6px !important;
  }

  .header .dropdown-menu{
    position:static !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 0 4px !important;
    padding:10px !important;
    border:1px solid rgba(11,45,77,.08) !important;
    border-radius:18px !important;
    background:#eef5fb !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }

  .header .dropdown:hover .dropdown-menu,
  .header .dropdown:focus-within .dropdown-menu{
    transform:none !important;
  }

  .header .dropdown-menu a{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    min-height:42px !important;
    padding:10px 12px !important;
    border:1px solid rgba(11,45,77,.06) !important;
    border-radius:14px !important;
    background:#ffffff !important;
    color:#24445f !important;
    font-size:.88rem !important;
    line-height:1.25 !important;
    font-weight:800 !important;
  }

  .header .dropdown-menu a::before{
    content:"" !important;
    display:block !important;
    position:static !important;
    width:7px !important;
    height:7px !important;
    flex:0 0 7px !important;
    margin:0 !important;
    border-radius:999px !important;
    background:#e83d55 !important;
  }

  .header .dropdown-menu a:hover{
    color:#e83d55 !important;
    background:#fff7fa !important;
  }
}

@media (max-width:760px){
  .container{
    width:calc(100% - 28px) !important;
    max-width:100% !important;
  }

  .page-hero{
    padding:36px 0 42px !important;
  }

  .page-hero .breadcrumb{
    display:inline-flex !important;
    align-items:center !important;
    max-width:100% !important;
    padding:10px 13px !important;
    margin-bottom:18px !important;
    border:1px solid rgba(11,45,77,.08) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.86) !important;
    box-shadow:0 10px 26px rgba(11,45,77,.06) !important;
    font-size:.84rem !important;
    line-height:1.2 !important;
  }

  .page-hero h1{
    max-width:100% !important;
    margin-bottom:16px !important;
    font-size:clamp(2rem,8.4vw,2.75rem) !important;
    line-height:1.08 !important;
    letter-spacing:-.055em !important;
  }

  .page-hero .lead{
    max-width:100% !important;
    margin-bottom:0 !important;
    color:#51677c !important;
    font-size:.98rem !important;
    line-height:1.72 !important;
  }

  .eyebrow{
    gap:8px !important;
    margin-bottom:12px !important;
    font-size:.72rem !important;
    line-height:1.15 !important;
  }

  .eyebrow::before{
    width:30px !important;
  }

  .section.product-section{
    padding:42px 0 58px !important;
  }

  .product-toolbar{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
    align-items:start !important;
    margin-bottom:18px !important;
    padding:22px !important;
    border-radius:26px !important;
  }

  .product-toolbar h2{
    margin-bottom:0 !important;
    font-size:clamp(1.75rem,7.8vw,2.25rem) !important;
    line-height:1.12 !important;
    letter-spacing:-.055em !important;
  }

  .product-search{
    min-height:54px !important;
    padding:0 14px !important;
    gap:10px !important;
    border-radius:18px !important;
  }

  .product-search input{
    width:100% !important;
    min-width:0 !important;
    font-size:.88rem !important;
  }

  .product-filter-wrap{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-bottom:26px !important;
    padding:10px !important;
    border-radius:24px !important;
  }

  .product-filter{
    width:100% !important;
    min-height:46px !important;
    padding:11px 14px !important;
    border-radius:16px !important;
    font-size:.88rem !important;
    line-height:1.2 !important;
  }

  .brand-marquee-section,
  .product-card,
  .product-empty{
    border-radius:24px !important;
  }

  .brand-marquee-section{
    padding:22px !important;
    margin-top:24px !important;
  }

  .brand-marquee-heading h2,
  .product-list-title h2{
    font-size:clamp(1.45rem,6vw,1.9rem) !important;
    line-height:1.14 !important;
  }

  .product-list-title{
    margin-top:30px !important;
    margin-bottom:18px !important;
  }

  .product-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  .product-card{
    min-height:0 !important;
    padding:22px !important;
  }

  .product-card h3{
    font-size:1.12rem !important;
    line-height:1.22 !important;
  }

  .product-card p{
    font-size:.92rem !important;
    line-height:1.62 !important;
  }

  .product-card-top{
    gap:12px !important;
  }

  .product-logo{
    width:132px !important;
    height:58px !important;
  }

  .product-tags{
    gap:7px !important;
  }

  .product-tags span{
    padding:7px 10px !important;
    font-size:.72rem !important;
  }

  .whatsapp-float{
    right:16px !important;
    bottom:16px !important;
  }
}

@media (max-width:420px){
  .header .container.nav,
  .header .nav{
    height:62px !important;
    min-height:62px !important;
    padding:0 12px !important;
  }

  .header .brand img{
    width:52px !important;
    height:34px !important;
    max-width:52px !important;
  }

  .header .brand-wordmark{
    max-width:160px !important;
    font-size:.78rem !important;
  }

  .header .menu-toggle{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
  }

  body.menu-open::before,
  body.nav-open::before{
    top:62px !important;
  }

  .header .nav-menu{
    top:72px !important;
    left:10px !important;
    right:10px !important;
    max-height:calc(100dvh - 84px) !important;
    padding:16px 12px 14px !important;
    border-radius:22px !important;
  }

  .header .nav-link{
    min-height:46px !important;
    padding:12px 13px !important;
    font-size:.92rem !important;
  }

  .header .dropdown-menu a{
    min-height:40px !important;
    font-size:.82rem !important;
  }

  .container{
    width:calc(100% - 24px) !important;
  }

  .page-hero h1{
    font-size:2rem !important;
  }

  .product-toolbar{
    padding:20px !important;
  }

  .product-toolbar h2{
    font-size:1.68rem !important;
  }
}