/* ACC restrained industrial visual system */
:root{--accent:#b1d78d;--body-bg:#f7f8f6;--font:Arial,Helvetica,sans-serif}
body{color:#22312d;background:#fff;font-family:Arial,Helvetica,sans-serif}
.container{width:min(1160px,calc(100% - 80px))}
.site-header{height:94px;padding:0 max(40px,calc((100% - 1160px)/2));background:#102921;position:relative;gap:18px;border:0}
.brand-logo{width:46px;height:46px}.brand-name-long{font-size:13px;max-width:240px;letter-spacing:.25px;font-weight:700;text-transform:none;line-height:1.25}
.brand-name-long small{letter-spacing:1.2px;font-size:9px;margin-top:5px}
.desktop-nav{gap:26px}.desktop-nav a{font-size:13px;color:#f0f5f1}
.header-cta{font-size:12px;background:#c0daaf;padding:14px 20px;border-radius:3px}
.hero{min-height:unset;background:#f5f7f3;color:#172a25;overflow:visible}
.hero-content{padding-top:68px;padding-bottom:76px;min-height:unset;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:70px;align-items:center}
.hero-copy{padding-top:0}.hero .eyebrow{font-size:11px;color:#476251;letter-spacing:2px;font-weight:700}
.hero h1{font-size:clamp(40px,4.4vw,62px);line-height:1.12;letter-spacing:-1.9px;max-width:680px;margin:27px 0 25px;color:#153027}
.hero-sub{color:#52685e;font-size:16px;line-height:1.8;max-width:580px}
.hero-buttons{gap:11px;margin-top:34px;flex-wrap:wrap}.btn{border-radius:3px;font-size:12px;padding:16px 20px;gap:16px;font-weight:700}
.btn-primary{background:#173c2f;color:#fff}.btn-outline,.btn-instagram{background:#fff;color:#16372b;border:1px solid #b9ccc0}
.hero-information{display:block;background:#fff;border:1px solid #dce4da;color:#19342b;text-decoration:none;box-shadow:0 13px 35px #203b2d14;align-self:stretch;min-height:415px}
.hero-photo{height:290px;background:linear-gradient(#0a231e38,#0a231e38),url('/assets/industrial-process.svg') center/cover no-repeat}
.hero-information-inner{padding:24px 30px}.hero-panel-label{display:block;color:#678174;font-size:10px;font-weight:700;letter-spacing:1.5px;margin-bottom:9px}.hero-information-inner strong{font-size:18px}.hero-information-inner p{font-size:12px;color:#527564;margin:11px 0 0}
.hero-information:hover .hero-information-inner p{text-decoration:underline}
.section{padding-top:88px;padding-bottom:88px}.section-kicker{font-size:11px;letter-spacing:1.3px;color:#3d7054;margin-bottom:19px}
.section h2,.comparison-intro h2,.location-heading h2{letter-spacing:-1.4px;font-size:clamp(32px,3.6vw,46px)}
.section h2 span,.comparison-intro h2 span,.location-heading h2 span{color:#4b7057}
.about-layout{gap:80px}.large-body{font-size:18px}.muted-body{font-size:14px}
.daur.ulang-section{background:#f4f6f2}.material-grid{gap:20px}.material-card{border:1px solid #dce4dd;border-radius:3px;box-shadow:none}.material-card:hover{transform:none;box-shadow:0 6px 18px #1a3f2a12}
.material-art{height:210px}.material-info{padding:25px}.material-info h3{font-size:20px}.material-info p{font-size:13px}
.comparison-section{background:#fff;padding:85px 0}.comparison-scroll{border-radius:3px;box-shadow:none}.comparison-table thead th{background:#193b30;border-radius:0!important}.comparison-table tbody tr:hover{background:#e9f0e9}
.advantage-layout{gap:75px}.advantage-item{padding:23px 0}
.quality-section{background:#eaf0e9;color:#1b352a;padding:85px 0}.quality-content{text-align:left}.quality-eyebrow{color:#4c775a;font-size:11px;letter-spacing:1.4px}.quality-section h2{font-size:clamp(31px,3.5vw,46px);max-width:770px;margin:0 0 37px;letter-spacing:-1.4px}
.quality-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.quality-card{text-align:left;border-top:2px solid #6d9970;padding-top:22px}.quality-card h3{font-size:16px;letter-spacing:0;margin:0 0 12px;color:#203e30}.quality-card p{max-width:none;color:#587262;font-size:13px;line-height:1.7;margin:0}
.location-section{background:#f8faf7}.location-map{box-shadow:none;border-radius:3px}
.contact-section{background:#12352b;padding:90px 0}.contact-layout{gap:80px}.inquiry-form{background:#1c4437;border-color:#3e6554;border-radius:4px}
.footer{background:#0e2820}
@media(max-width:1000px){.hero-content{gap:30px}.site-header{padding:0 25px}.container{width:calc(100% - 50px)}.desktop-nav{gap:13px}.brand-name-long{max-width:170px;font-size:11px}}
@media(max-width:800px){.site-header{height:75px}.desktop-nav{top:75px;z-index:50}.hero-content{grid-template-columns:1fr;padding:48px 0 60px;gap:35px}.hero-information{min-height:0}.hero-photo{height:230px}.hero h1{font-size:clamp(36px,7vw,50px)}.quality-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-section{padding:70px 0}.section{padding:70px 0}}
@media(max-width:540px){.container{width:calc(100% - 36px)}.site-header{padding:0 18px}.hero h1{font-size:37px}.hero-buttons{display:grid;grid-template-columns:1fr 1fr}.hero-buttons .btn{padding:13px;justify-content:center;gap:10px}.hero-buttons .btn-instagram{grid-column:1/-1}.hero-information-inner{padding:20px}.hero-photo{height:190px}.section h2,.comparison-intro h2,.location-heading h2{font-size:33px}.quality-grid{gap:25px 15px}.quality-card h3{font-size:14px}.quality-card p{font-size:12px}.quality-section{padding:70px 0}.material-grid{grid-template-columns:1fr}.contact-section h2{font-size:43px}}

/* Practical, responsive B2B sections */
.operations-section{background:#eff4ef}.operations-section h2,.faq-section h2{font-size:clamp(32px,4vw,52px);letter-spacing:-2px}.operations-section h2 span,.faq-section h2 span{color:#789483}.operations-section>.container>p{max-width:770px;line-height:1.9;color:#4d6258}.operations-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:35px 0}.operations-steps article{background:#fff;border:1px solid #dbe5dc;border-radius:7px;padding:25px}.operations-steps b{color:#3f7859}.operations-steps h3{margin:14px 0 8px;font-size:17px}.operations-steps p{font-size:13px;line-height:1.8;color:#64786e;margin:0}.faq-section{background:#fff}.faq-list{max-width:900px}.faq-list details{border-bottom:1px solid #d5e1d7;padding:19px 0}.faq-list summary{cursor:pointer;font-weight:700;line-height:1.6}.faq-list p{color:#62796d;font-size:13px;line-height:1.9;margin:12px 0 4px}.product-detail-link{display:inline-block;margin-top:13px;font-size:12px;font-weight:750;color:#286748;text-decoration:underline;text-underline-offset:4px}@media(max-width:720px){.operations-steps{grid-template-columns:1fr}.operations-section h2,.faq-section h2{font-size:34px}}


/* Produk Kami: center every catalog image without cropping, on desktop and mobile. */
#produk .material-art{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:3 / 2;
  height:auto;
  overflow:hidden;
  background:#e9efea;
}
#produk .material-art > img{
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  object-fit:contain;
  object-position:50% 50%;
  margin:0 auto;
  flex:none;
}

/* Option 3: industrial catalog image presentation */
#produk .material-art {background:#eef0ed;aspect-ratio:3/2;border-bottom:1px solid #d8e0d9;}
#produk .material-art > img {object-fit:contain;object-position:center;width:100%;height:100%;}
#produk .material-card {background:#fff;border-color:#d6ded8;}
#produk .material-info {padding-top:22px;}

/* Compact product preview with an accessible expand / collapse action. */
#produk .material-grid .material-card.catalog-excess{display:none!important;}
#produk .products-show-all{display:flex;justify-content:center;margin-top:34px;}
#produk .products-show-all[hidden]{display:none;}
#produk .products-toggle{cursor:pointer;min-width:210px;justify-content:center;gap:16px;}
#produk .products-toggle span{display:inline-block;transition:transform .2s ease;}
#produk .products-toggle[aria-expanded="true"] span{transform:rotate(180deg);}

/* Quotation product checklist */
.material-multiselect{position:relative;display:grid;gap:6px}
.material-multiselect #contact-material[hidden],.material-options[hidden]{display:none!important}
.inquiry-form .material-select-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;gap:12px;background:#0e2421;color:white;border:1px solid #37564c;border-radius:5px;padding:12px 13px;font-size:12px;min-height:44px;cursor:pointer}
.material-select-trigger:focus-visible{outline:2px solid #b7f763;outline-offset:2px}
.material-options{background:#102b27;border:1px solid #37564c;border-radius:6px;max-height:260px;overflow-y:auto;padding:6px;display:grid;gap:1px}
.inquiry-form .material-option{display:flex;align-items:center;gap:10px;padding:9px;border-radius:4px;color:#deede8;font-size:12px;cursor:pointer}
.material-option:hover{background:#24463b}
.inquiry-form .material-option input{width:16px;height:16px;min-width:16px;margin:0;accent-color:#b7f763}

/* Quotation selector is outside form labels so the button receives clicks reliably. */
.inquiry-form .material-field{display:grid;gap:8px}
.inquiry-form .material-field>label{display:block;color:#b3c9bf;font-size:11px;font-weight:700}
.inquiry-form .material-select-trigger{position:relative;z-index:1;touch-action:manipulation}
.inquiry-form .material-option{display:flex;grid-template-columns:none}

/* Product picker: show the full list instead of a short scrolling box */
.material-options{max-height:none;overflow:visible;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 6px}
.inquiry-form .material-option{align-items:flex-start;line-height:1.35}
.inquiry-form .material-option input{min-height:0;margin-top:1px}
@media(max-width:540px){.material-options{grid-template-columns:1fr;max-height:65vh;overflow-y:auto}}

/* Admin badges: always remain readable above product artwork. */
#produk .material-art > .product-badge{position:absolute;top:12px;left:12px;z-index:5;display:inline-flex;align-items:center;width:max-content;max-width:calc(100% - 24px);height:auto;padding:5px 9px;flex:none;white-space:normal;line-height:1.3;background:#d86d1f;color:#fff;font-size:9px;font-weight:800;border-radius:3px;box-shadow:0 5px 12px #0002;}

/* Product catalog category filters */
.catalog-filters{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 8px}
.catalog-filter{appearance:none;border:1px solid #b8c9bd;border-radius:99px;background:transparent;color:#224a38;padding:10px 17px;font:600 13px/1.25 inherit;font-family:inherit;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.catalog-filter:hover,.catalog-filter:focus-visible{border-color:#24704b;background:#eaf3ec}
.catalog-filter.is-active{background:#174b34;color:white;border-color:#174b34}
.catalog-filter.is-active:hover{background:#245b42}
.catalog-count{font-size:13px;color:#667b6d;margin:0 0 20px}
#product-catalog .material-card[hidden]{display:none!important}
@media(max-width:600px){.catalog-filters{gap:7px}.catalog-filter{font-size:12px;padding:9px 12px}}