:root{--ink:#172021;--muted:#667274;--line:#dfe7e5;--paper:#f7f9f6;--white:#fff;--green:#0d6255;--green-dark:#07483f;--lime:#d9f06b;--orange:#f18f4d;--shadow:0 18px 45px rgba(14,52,46,.11)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:'DM Sans',sans-serif;font-size:15px}.wrap{width:min(1180px,calc(100% - 48px));margin:0 auto}.topline{background:var(--green-dark);color:#d8eee7;text-align:center;padding:9px 16px;font-size:12px;letter-spacing:.04em}.site-header{background:rgba(247,249,246,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}.header-main{height:82px;display:flex;align-items:center;gap:32px}.brand{color:var(--green-dark);display:flex;align-items:center;gap:10px;text-decoration:none;line-height:1}.brand>b,.brand b{font-family:'Space Grotesk';font-size:19px;letter-spacing:.12em;display:block}.brand em{display:block;font-style:normal;color:var(--orange);font-weight:700;letter-spacing:.16em;font-size:8px;margin-top:6px}.brand-mark{width:34px;height:34px;display:flex;gap:3px;align-items:flex-end;transform:skew(-12deg)}.brand-mark span{width:8px;border-radius:3px;background:var(--green);display:block}.brand-mark span:nth-child(1){height:18px}.brand-mark span:nth-child(2){height:28px;background:var(--orange)}.brand-mark span:nth-child(3){height:23px;background:var(--lime)}.search-box{display:flex;flex:1;max-width:520px;background:#fff;border:1px solid var(--line);border-radius:7px;height:42px}.search-box input{border:0;outline:0;flex:1;padding:0 14px;background:transparent;font:inherit}.search-box button{width:50px;border:0;background:var(--green);color:#fff;border-radius:0 6px 6px 0;font-size:24px}.header-actions{margin-left:auto;display:flex;gap:20px;align-items:center}.support{font-size:11px;color:var(--muted);text-decoration:none}.support strong{display:block;color:var(--ink);font-size:13px;margin-top:3px}.cart-btn{border:1px solid var(--green);background:transparent;color:var(--green-dark);padding:10px 13px;border-radius:5px;font:600 12px inherit;cursor:pointer}.cart-btn span{background:var(--orange);color:#fff;border-radius:10px;padding:2px 6px;margin-left:4px}.nav{height:48px;display:flex;align-items:center;gap:22px}.category-toggle{border:0;background:none;font:700 13px inherit;color:var(--green-dark);padding:0;cursor:pointer}.nav-links{display:flex;gap:24px;align-items:center}.nav a{font-size:13px;text-decoration:none;color:var(--muted)}.nav a:hover,.nav-links a:first-child{color:var(--green-dark)}.quote-link{margin-left:auto;font-weight:700;color:var(--orange)!important}.hero{min-height:470px;display:grid;grid-template-columns:1fr .9fr;align-items:center;gap:40px;padding:65px 0 50px}.eyebrow{color:var(--orange);font-size:11px;font-weight:700;letter-spacing:.18em;margin:0 0 14px}.hero h1{font:700 clamp(42px,5vw,70px)/.99 'Space Grotesk';letter-spacing:-.055em;margin:0 0 24px}.hero h1 span{color:var(--green)}.hero-text{color:var(--muted);font-size:16px;line-height:1.7;max-width:520px}.hero-actions{display:flex;gap:12px;margin:28px 0}.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:5px;padding:13px 18px;font-weight:700;font-size:13px}.btn-primary{background:var(--green);color:#fff}.btn-primary:hover{background:var(--green-dark)}.btn-ghost{color:var(--green-dark);border:1px solid var(--line);background:#fff}.btn-ghost span{font-size:17px;margin-left:8px}.hero-notes{display:flex;gap:20px;color:var(--muted);font-size:11px}.hero-art{height:370px;position:relative;overflow:hidden;background:#e8f0df;border-radius:22px}.sun{position:absolute;width:300px;height:300px;border-radius:50%;background:#e2ef9c;right:-30px;top:-55px}.art-card{position:absolute;width:180px;height:245px;border-radius:12px;transform:rotate(13deg);box-shadow:var(--shadow)}.card-back{background:#b9d1c6;right:130px;top:76px;transform:rotate(-19deg)}.card-mid{background:#f49a59;right:66px;top:57px;transform:rotate(7deg)}.card-front{background:var(--green);right:75px;top:70px;transform:rotate(-8deg);padding:28px;color:#fff}.tool-shape{height:165px;border:1px solid rgba(255,255,255,.45);border-radius:50%;display:flex;align-items:center;justify-content:center;gap:10px}.tool-shape i{display:block;width:13px;height:74px;border-radius:7px;background:var(--lime);transform:rotate(32deg)}.tool-shape i:nth-child(2){height:105px;background:#fff}.tool-shape i:nth-child(3){background:var(--orange)}.card-label{font:700 14px 'Space Grotesk';letter-spacing:.2em;margin-top:18px}.card-label small{font-size:8px;letter-spacing:.3em;color:var(--lime)}.floating-tag{position:absolute;left:38px;bottom:32px;background:#fff;border-radius:10px;padding:14px 17px;box-shadow:var(--shadow);display:flex;gap:10px;align-items:center}.floating-tag b{font:700 32px 'Space Grotesk';color:var(--green)}.floating-tag span{font-size:11px;line-height:1.3;color:var(--muted)}.benefits{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;margin-bottom:70px}.benefits>div{display:flex;gap:12px;padding:5px 22px;border-right:1px solid var(--line)}.benefits>div:first-child{padding-left:0}.benefits>div:last-child{border:0}.benefit-icon{color:var(--orange);font-size:24px}.benefits p{margin:0}.benefits b,.benefits small{display:block}.benefits b{font-size:13px}.benefits small{font-size:11px;color:var(--muted);margin-top:5px}.section{margin-bottom:90px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:24px}.section-head h2,.services h2,.about h2,.contact h2{font:700 34px/1.1 'Space Grotesk';letter-spacing:-.04em;margin:0}.section-head>a,.text-link{color:var(--green);font-weight:700;font-size:13px;text-decoration:none}.category-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));border:1px solid #d9e1eb;background:#fff;overflow:hidden}.category-card{position:relative;border:0;border-right:1px solid #d9e1eb;border-bottom:1px solid #d9e1eb;background:#fff;padding:12px 10px 15px;text-align:center;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease;min-height:184px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;isolation:isolate;animation:categoryReveal .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--category-index, 0) * 35ms)}.category-card:nth-child(8n){border-right:0}.category-card:nth-last-child(-n+8){border-bottom:0}.category-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(12,91,181,.09),transparent 55%);opacity:0;transition:opacity .25s ease;z-index:-1}.category-card::after{content:"";position:absolute;left:12%;right:12%;bottom:9px;height:3px;border-radius:999px;background:var(--blue);transform:scaleX(0);transform-origin:center;transition:transform .25s ease}.category-card:hover,.category-card:focus-visible{transform:translateY(-5px);box-shadow:0 14px 26px rgba(8,54,111,.16);z-index:2;outline:0}.category-card:hover::before,.category-card:focus-visible::before,.category-card.active::before{opacity:1}.category-card:hover::after,.category-card:focus-visible::after,.category-card.active::after{transform:scaleX(1)}.category-card:active{transform:translateY(-1px) scale(.97)}.category-card.is-pressed{animation:categoryTap .46s cubic-bezier(.2,.8,.2,1)}.category-card b{display:block;font-size:12px;line-height:1.3;margin-top:12px;color:#132b45}.category-card small{display:block;font-size:10px;color:var(--muted);line-height:1.4;margin-top:5px}.category-visual{width:100%;height:112px;border-radius:0;display:flex;align-items:center;justify-content:center;font-size:48px;font-family:'Space Grotesk';transition:transform .3s cubic-bezier(.2,.8,.2,1),filter .3s ease}.category-card:hover .category-visual,.category-card:focus-visible .category-visual{transform:translateY(-5px) scale(1.06) rotate(-2deg);filter:saturate(1.15)}.visual-all{background:#e1f2ad;color:var(--green)}.visual-tools,.visual-grinder,.visual-fastener{background:#f7ddbc;color:#bd6b31}.visual-electrical,.visual-ac{background:#cbe5ec;color:#257a91}.visual-safety,.visual-k3{background:#e6d3e7;color:#8c568e}.visual-measuring,.visual-lab{background:#d4e0ca;color:#3f7c54}.visual-maintenance,.visual-chemical,.visual-automotive{background:#f1d4c9;color:#b85e47}.visual-logistics,.visual-office{background:#f9e3bd;color:#b46b22}.visual-cleaning,.visual-building{background:#d8e7d0;color:#4f7957}.visual-mechanical{background:#d7e2ee;color:#3f6386}.visual-kitchen{background:#efd8e4;color:#925c80}@keyframes categoryReveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes categoryTap{0%{transform:scale(1)}35%{transform:scale(.94) rotate(-1deg)}70%{transform:scale(1.03)}100%{transform:scale(1)}}.products-section{background:#eef3ef;padding:70px 0}.product-tools{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted)}.product-tools select{border:1px solid var(--line);padding:9px 10px;border-radius:5px;background:#fff;color:var(--ink)}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.product-card{background:#fff;border-radius:7px;overflow:hidden;border:1px solid #e3e9e5;position:relative}.product-card:hover{box-shadow:var(--shadow)}.product-img{height:180px;display:flex;align-items:center;justify-content:center;position:relative}.product-img span{font:700 40px 'Space Grotesk';color:rgba(23,32,33,.3)}.product-img.tools{background:#f6dfc0}.product-img.electrical{background:#cde7ed}.product-img.safety{background:#e7d5e9}.product-img.measuring{background:#d9e7cf}.product-img.maintenance{background:#f0d8c9}.product-info{padding:16px}.product-info small{color:var(--orange);font-weight:700;font-size:10px}.product-info h3{font-size:14px;line-height:1.35;margin:8px 0}.product-info p{font-size:11px;color:var(--muted);margin:0 0 13px}.product-bottom{display:flex;justify-content:space-between;align-items:center}.price{font-weight:700;color:var(--green-dark)}.add-btn{border:1px solid var(--green);background:#fff;color:var(--green);border-radius:4px;padding:7px 10px;font-weight:700;cursor:pointer}.add-btn:hover{background:var(--green);color:#fff}.services{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;padding:20px 0 80px}.service-intro p:not(.eyebrow){color:var(--muted);line-height:1.7;max-width:380px}.service-intro .text-link{display:inline-block;margin-top:14px}.service-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.service-list article{border-top:2px solid var(--green);padding-top:17px}.service-list article span{font:700 12px 'Space Grotesk';color:var(--orange)}.service-list h3{font-size:16px;margin:24px 0 9px}.service-list p{color:var(--muted);font-size:12px;line-height:1.6;margin:0}.about{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:80px 0;border-top:1px solid var(--line)}.about-image{height:330px;background:var(--green);border-radius:14px;position:relative;overflow:hidden}.about-image:before,.about-image:after{content:"";position:absolute;border:1px solid rgba(217,240,107,.42);border-radius:50%;width:340px;height:340px;left:-80px;top:-10px}.about-image:after{width:220px;height:220px;left:120px;top:110px}.about-lines{position:absolute;inset:0;background:linear-gradient(120deg,transparent 45%,rgba(255,255,255,.08) 45%,rgba(255,255,255,.08) 46%,transparent 46%),linear-gradient(30deg,transparent 55%,rgba(255,255,255,.08) 55%,rgba(255,255,255,.08) 56%,transparent 56%)}.about-stamp{position:absolute;right:28px;bottom:24px;color:var(--lime);font:700 33px 'Space Grotesk';text-align:right;letter-spacing:.08em}.about-stamp small{font-size:9px;color:#fff;letter-spacing:.2em}.about-copy>p:not(.eyebrow){color:var(--muted);line-height:1.8}.contact{background:var(--lime);border-radius:15px;padding:42px 50px;margin-bottom:80px;display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center}.contact h2{color:var(--green-dark)}.contact p:not(.eyebrow){color:#47615c;line-height:1.6}.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.contact-cards a{background:#fff;border-radius:8px;padding:18px 16px;color:var(--ink);text-decoration:none}.contact-cards small{font-size:9px;color:var(--orange);letter-spacing:.12em;font-weight:700}.contact-cards b{display:block;font:600 21px 'Space Grotesk';margin:10px 0 5px}.contact-cards span{font-size:11px;color:var(--green)}.footer{background:var(--green-dark);color:#d1e4dd;padding:55px 0 20px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.3fr 1.5fr;gap:35px}.footer .brand{color:#fff}.footer-brand p{font-size:12px;color:#a7c8bc;max-width:230px;line-height:1.6;margin-top:20px}.footer h4{color:var(--lime);font-size:12px;letter-spacing:.1em;margin:0 0 16px;text-transform:uppercase}.footer a,.footer span{display:block;color:#d1e4dd;text-decoration:none;font-size:12px;margin-bottom:10px;line-height:1.6}.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:45px;padding-top:18px;display:flex;justify-content:space-between;color:#84aea0;font-size:10px}.footer-bottom span{font-size:10px}.cart-panel{position:fixed;z-index:30;top:0;right:-430px;width:min(420px,100%);height:100vh;background:#fff;box-shadow:-20px 0 50px rgba(0,0,0,.15);transition:.3s;display:flex;flex-direction:column}.cart-panel.open{right:0}.cart-head{display:flex;justify-content:space-between;padding:22px;border-bottom:1px solid var(--line)}.cart-head h3{margin:0;font:700 21px 'Space Grotesk'}.cart-head button{border:0;background:none;font-size:27px;cursor:pointer}.cart-items{padding:22px;flex:1;overflow:auto}.empty-cart{text-align:center;color:var(--muted);font-size:13px;margin-top:80px}.cart-row{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:12px}.cart-row b{display:block}.cart-row small{color:var(--muted)}.cart-foot{padding:22px;border-top:1px solid var(--line)}.cart-foot>div{display:flex;justify-content:space-between;margin-bottom:16px}.cart-foot span{color:var(--muted);font-size:12px}.cart-foot b{font-size:18px;color:var(--green-dark)}.cart-foot .btn{width:100%}.overlay{position:fixed;inset:0;background:rgba(4,35,29,.4);z-index:20;opacity:0;pointer-events:none;transition:.3s}.overlay.show{opacity:1;pointer-events:auto}@media(max-width:900px){.header-main{gap:15px}.support,.nav-links{display:none}.hero{grid-template-columns:1fr}.hero-art{max-width:600px;width:100%}.category-grid{grid-template-columns:repeat(3,1fr)}.product-grid{grid-template-columns:repeat(2,1fr)}.services,.about,.contact{grid-template-columns:1fr;gap:30px}.footer-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.wrap{width:min(100% - 30px,1180px)}.header-main{height:70px}.brand em{font-size:7px}.search-box{order:3;position:absolute;top:76px;left:15px;right:15px;max-width:none}.site-header{padding-bottom:52px}.hero{padding-top:38px}.hero h1{font-size:45px}.hero-notes{display:block}.hero-notes span{display:block;margin-bottom:7px}.hero-art{height:315px}.benefits{grid-template-columns:repeat(2,1fr);gap:15px;margin-bottom:50px}.benefits>div{border:0;padding:0!important}.section-head{display:block}.section-head>a{display:inline-block;margin-top:15px}.product-tools{margin-top:14px;justify-content:space-between}.category-grid{grid-template-columns:repeat(2,1fr)}.product-grid{gap:10px}.product-img{height:130px}.product-info{padding:12px}.product-info h3{font-size:12px}.price{font-size:12px}.add-btn{padding:6px 7px;font-size:10px}.service-list{grid-template-columns:1fr}.contact{padding:30px 22px}.contact-cards{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:25px}.footer-brand{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{margin-bottom:6px}}
.brand-logo{width:48px;height:40px;object-fit:contain;object-position:center}
:root{--blue:#0c5bb5;--blue-dark:#08366f;--lime:#d6f36b;--orange:#ff8a3d}.topline{background:var(--blue-dark)}.site-header{background:rgba(244,248,253,.97);border-bottom-color:#c9d9eb}.brand-logo{width:48px;height:40px}.search-box button{background:var(--blue)}.nav{border-top:1px solid #dfe8f2}.nav a:hover,.nav-links a:first-child,.category-toggle{color:var(--blue-dark)}.quote-link{color:var(--blue)!important}.hero h1 span{color:var(--blue)}.btn-primary{background:var(--blue)}.btn-primary:hover{background:var(--blue-dark)}.benefit-icon{color:var(--blue)}.category-card:hover,.category-card.active{border-color:var(--blue)}.service-list article{border-top-color:var(--blue)}.contact{background:#dff0ff}.footer{background:var(--blue-dark)}.footer h4{color:#8ed5ff}
.category-menu{display:none;position:absolute;z-index:25;top:130px;left:max(20px,calc((100% - 1180px)/2));width:min(465px,calc(100% - 40px));background:#fff;border:1px solid #d8e0e8;box-shadow:0 14px 30px rgba(8,54,111,.16)}
.category-menu.open{display:block}
.category-menu-inner{padding:8px 0}
.category-menu button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:#fff;color:#19334f;text-align:left;padding:8px 14px;font:500 14px/1.25 'DM Sans',sans-serif;cursor:pointer}
.category-menu button:hover{background:#eef5ff;color:#0c5bb5}
.category-menu button span{width:24px;text-align:center;color:#596979;font-size:21px;line-height:1}
.category-menu button:hover span{color:#0c5bb5}
@media(max-width:900px){.category-menu{top:118px;left:15px;width:min(465px,calc(100% - 30px))}}
@media(max-width:560px){.category-menu{top:122px;max-height:calc(100vh - 140px);overflow:auto}.category-menu button{font-size:13px;padding:9px 12px}}
.product-highlight{display:grid;grid-template-columns:305px 1fr;gap:20px;margin-top:18px;margin-bottom:28px;padding:16px;background:#f2f3f5;border-top:2px solid #e30613;position:relative}.promo-card{min-height:215px;border-radius:0 18px 18px 0;padding:26px 20px;background:linear-gradient(135deg,#f7fafc,#fff 52%,#ffd11a);position:relative;overflow:hidden;color:#102238}.promo-card:after{content:'⌁  ◉  ⌖';position:absolute;right:12px;bottom:22px;font-size:45px;letter-spacing:8px;color:#16365e;opacity:.82;transform:rotate(-12deg)}.promo-kicker{font-size:12px;font-weight:700}.promo-card strong{display:block;font-size:24px;line-height:1.05;margin:4px 0;color:#111}.promo-card>b{display:block;font-size:22px;color:#d60000}.promo-card>b em{font-style:normal;font-size:34px}.promo-card small{display:block;margin:10px 0;font-weight:700}.promo-card mark{padding:4px 8px;background:#fff;border:1px solid #e30613}.promo-card a{display:inline-block;background:#e30613;color:#fff;padding:9px 14px;border-radius:4px;text-decoration:none;text-transform:uppercase;font-size:11px;font-weight:700;position:relative;z-index:1}.promo-dots{position:absolute;bottom:9px;left:20px;display:flex;gap:8px}.promo-dots i{width:9px;height:9px;border-radius:50%;background:#777}.promo-dots i.active{background:#111}.highlight-main{min-width:0}.highlight-head{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 10px}.highlight-head h2{font:700 20px 'Space Grotesk';margin:0;color:#152238}.highlight-head button{border:0;background:#fff;color:#16365e;border-radius:4px;font-size:25px;width:32px;height:32px;margin-left:6px;cursor:pointer}.highlight-head button:hover{background:#dcecff}.highlight-track{display:grid;grid-template-columns:repeat(5,minmax(125px,1fr));gap:12px;overflow:hidden}.highlight-track article{min-width:0;display:grid;grid-template-columns:65px 1fr;column-gap:8px;align-content:start}.highlight-art{grid-row:span 4;height:72px;display:flex;align-items:center;justify-content:center;font-size:34px;border-radius:3px;color:#fff}.art-black{background:#222}.art-red{background:#e31d16}.art-blue{background:#1973bb}.art-yellow{background:#dfca34;color:#806b00}.art-navy{background:#143b89}.highlight-track p{font-size:12px;line-height:1.22;margin:0;color:#182433}.highlight-track b{font-size:14px;color:#e30613;margin-top:5px}.highlight-track small{font-size:10px;color:#657080}.highlight-track em{grid-column:2;justify-self:start;background:#07952d;color:#fff;font-style:normal;font-size:10px;padding:4px 6px;border-radius:3px;margin-top:4px}.service-benefits{grid-column:1/-1;display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.service-benefits>div{background:#dcecff;border-radius:12px;min-height:110px;text-align:center;padding:15px 8px 10px;color:#11233a}.service-benefits span{display:block;color:#f0ae00;font-weight:700;font-size:27px;line-height:1;margin-bottom:9px}.service-benefits b,.service-benefits small{display:block}.service-benefits b{font-size:11px}.service-benefits small{font-size:10px;line-height:1.2;margin-top:3px}@media(max-width:1000px){.product-highlight{grid-template-columns:240px 1fr}.highlight-track{grid-template-columns:repeat(3,minmax(150px,1fr))}.highlight-track article:nth-child(n+4){display:none}.service-benefits{grid-template-columns:repeat(4,1fr)}}@media(max-width:650px){.product-highlight{display:block;padding:10px;margin-top:12px}.promo-card{margin-bottom:14px;min-height:185px}.highlight-track{grid-template-columns:repeat(2,minmax(145px,1fr))}.highlight-track article:nth-child(n+3){display:none}.service-benefits{grid-template-columns:repeat(2,1fr);margin-top:16px}.service-benefits>div{min-height:100px}}

.promo-card{padding:0!important;display:flex;align-items:center;justify-content:center;background:#f2f3f5!important}.promo-card .promo-image{display:block;width:100%;height:100%;min-height:215px;object-fit:contain;object-position:center}.promo-empty{font-size:14px;color:#657080;text-align:center;padding:20px}@media(max-width:650px){.promo-card .promo-image{min-height:185px}}


.promo-card:after{content:none!important}


/* Ukuran slide mengikuti area promosi dan gambar diregangkan memenuhi kotak */
.product-highlight{grid-template-columns:280px 1fr}
.promo-card{height:305px;min-height:305px!important;border-radius:0 18px 18px 0}
.promo-card .promo-image{width:100%;height:100%;min-height:0;object-fit:fill;object-position:center}
@media(max-width:1000px){.product-highlight{grid-template-columns:280px 1fr}}
@media(max-width:650px){.product-highlight{display:block}.promo-card{height:280px;min-height:280px!important}.promo-card .promo-image{height:100%;min-height:0}}


/* Header atas tetap menempel saat halaman digulir */
.topline{position:sticky;top:0;z-index:20}
.site-header{top:34px;z-index:19}
@media(max-width:560px){.site-header{top:32px}}


/* Kartu layanan interaktif dengan ikon SVG penuh warna */
.service-benefits>a{--icon:#0c5bb5;--glow:#b9d9ff;background:linear-gradient(145deg,#e8f3ff,#cfe5ff);border:1px solid transparent;border-radius:14px;min-height:110px;text-align:center;padding:14px 8px 11px;color:#11233a;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease}
.service-benefits>a:nth-child(2){--icon:#08a66c;--glow:#b7f0d9;background:linear-gradient(145deg,#e9fff7,#c9f3e3)}
.service-benefits>a:nth-child(3){--icon:#f08a00;--glow:#ffe0a3;background:linear-gradient(145deg,#fff8e5,#ffe9b7)}
.service-benefits>a:nth-child(4){--icon:#7c55d9;--glow:#d8c8ff;background:linear-gradient(145deg,#f4efff,#ddd2ff)}
.service-benefits>a:nth-child(5){--icon:#e84e3b;--glow:#ffc7bf;background:linear-gradient(145deg,#fff0ed,#ffd8d2)}
.service-benefits>a:nth-child(6){--icon:#1689a7;--glow:#b5eaf5;background:linear-gradient(145deg,#e8fbff,#c8eff7)}
.service-benefits>a:nth-child(7){--icon:#e03d83;--glow:#ffc3dd;background:linear-gradient(145deg,#fff0f6,#ffd2e5)}
.service-benefits>a:before{content:'';position:absolute;width:90px;height:90px;border-radius:50%;background:var(--glow);right:-40px;top:-48px;transition:transform .35s ease}
.service-benefits>a:hover,.service-benefits>a:focus-visible{transform:translateY(-7px) scale(1.02);border-color:var(--icon);box-shadow:0 14px 28px color-mix(in srgb,var(--icon) 24%,transparent);outline:none}
.service-benefits>a:hover:before,.service-benefits>a:focus-visible:before{transform:scale(1.8)}
.service-benefits>a span{width:38px;height:38px;border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--icon);margin-bottom:8px;box-shadow:0 7px 15px color-mix(in srgb,var(--icon) 20%,transparent);transition:transform .3s ease,background .3s ease,color .3s ease}
.service-benefits>a svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.service-benefits>a:hover span,.service-benefits>a:focus-visible span{transform:rotate(-7deg) scale(1.14);background:var(--icon);color:#fff}
.service-benefits>a b,.service-benefits>a small{display:block;position:relative}.service-benefits>a b{font-size:11px}.service-benefits>a small{font-size:10px;line-height:1.2;margin-top:3px}

/* Banner identitas perusahaan pada header */
.brand-banner{display:block;width:214px;height:64px;object-fit:contain;object-position:center}
@media(max-width:900px){.brand-banner{width:190px;height:58px}}
@media(max-width:560px){.brand-banner{width:150px;height:48px}}


/* Kartu marketing dengan foto transparan dan efek bintang saat hover */
.contact-cards{gap:12px}
.marketing-card{min-height:174px!important;position:relative;overflow:hidden;border:1px solid rgba(12,91,181,.12);background:linear-gradient(145deg,#fff,#edf6ff)!important;padding:18px 16px!important;isolation:isolate;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease}
.marketing-card:after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.75) 48%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease;z-index:-1}
.marketing-card img{position:absolute;right:-2px;top:-6px;width:112px;height:132px;object-fit:contain;object-position:center top;opacity:.27;filter:saturate(.75) grayscale(.15);transition:opacity .35s ease,transform .35s ease,filter .35s ease;z-index:-1}
.marketing-card small,.marketing-card b,.marketing-card span{position:relative;z-index:2;display:block;max-width:62%}
.marketing-card small{color:#e45c1a!important;letter-spacing:.16em;font-weight:800;font-size:9px!important}
.marketing-card b{font-size:24px!important;margin:12px 0 8px!important;font-family:'Space Grotesk'!important}
.marketing-card span{font-size:11px!important;color:var(--blue-dark)!important}
.marketing-card:hover,.marketing-card:focus-visible{transform:translateY(-8px) scale(1.025);border-color:var(--blue);box-shadow:0 18px 34px rgba(12,91,181,.22);background:linear-gradient(145deg,#fff,#d7ecff)!important;outline:none}
.marketing-card:hover:after,.marketing-card:focus-visible:after{transform:translateX(120%)}
.marketing-card:hover img,.marketing-card:focus-visible img{opacity:1;filter:saturate(1.15) grayscale(0);transform:scale(1.08) rotate(2deg)}
.sparkles{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;background-image:radial-gradient(circle,#fff 0 2px,transparent 3px),radial-gradient(circle,#ffd34e 0 1.5px,transparent 2.5px),radial-gradient(circle,#5db7ff 0 1.5px,transparent 2.5px);background-size:37px 41px,53px 47px,61px 59px;background-position:15px 8px,28px 19px,4px 31px;transition:opacity .2s ease}
.marketing-card:hover .sparkles,.marketing-card:focus-visible .sparkles{opacity:.85;animation:sparkle-drift 1.4s linear infinite}
@keyframes sparkle-drift{from{background-position:15px 8px,28px 19px,4px 31px}to{background-position:25px -8px,16px 34px,18px 12px}}
@media(max-width:650px){.marketing-card img{width:100px;height:120px}.marketing-card small,.marketing-card b,.marketing-card span{max-width:65%}}

/* Pindahkan kartu layanan ke ruang kosong di bawah Product Highlight */
.product-highlight{grid-template-rows:305px;align-items:stretch}
.highlight-main{grid-column:2;grid-row:1;align-self:start}
.service-benefits{grid-column:2;grid-row:1;align-self:end;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin:0}
.service-benefits>a{min-height:108px;padding:10px 5px 8px;border-radius:11px}
.service-benefits>a span{width:34px;height:34px;border-radius:10px;margin-bottom:6px}
.service-benefits>a svg{width:20px;height:20px}
.service-benefits>a b{font-size:10px;line-height:1.15}
.service-benefits>a small{font-size:9px;line-height:1.15}
@media(max-width:1000px){.product-highlight{grid-template-rows:auto}.service-benefits{grid-column:1/-1;grid-row:auto;grid-template-columns:repeat(4,1fr);margin-top:14px}.service-benefits>a{min-height:100px}}
@media(max-width:650px){.highlight-main{grid-column:auto;grid-row:auto}.service-benefits{grid-column:auto;grid-template-columns:repeat(2,1fr)}}

@media(max-width:900px){.category-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.category-card:nth-child(8n){border-right:1px solid #d9e1eb}.category-card:nth-child(4n){border-right:0}.category-card:nth-last-child(-n+8){border-bottom:1px solid #d9e1eb}.category-card:nth-last-child(-n+4){border-bottom:0}}
@media(max-width:560px){.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.category-card:nth-child(4n){border-right:1px solid #d9e1eb}.category-card:nth-child(2n){border-right:0}.category-card:nth-last-child(-n+4){border-bottom:1px solid #d9e1eb}.category-card:nth-last-child(-n+2){border-bottom:0}.category-card{min-height:165px;padding:10px 8px 13px}.category-visual{height:90px;font-size:38px}.category-card b{font-size:11px}}
@media(prefers-reduced-motion:reduce){.category-card,.category-visual{animation:none!important;transition:none!important}.category-card:hover,.category-card:focus-visible,.category-card:active{transform:none}.category-card::after{transition:none}}

/* Use the supplied company services artwork in the hero panel. */
.hero-services-art{background:#eef6ff;border-radius:22px;overflow:hidden;display:flex;align-items:stretch;justify-content:center}
.hero-services-art img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center}
@media(max-width:900px){.hero-services-art{max-width:600px;width:100%;height:auto;aspect-ratio:1/1}}