<?php ?><style>.pm-calc-wrapper{width:100%;max-width:480px;margin:0 auto;background:#ffffff!important;background-color:#ffffff!important;border-radius:12px;font-family:var(--font-base,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);box-sizing:border-box;overflow:hidden;position:relative;box-shadow:0 25px 50px -12px rgb(0 0 0 / .5);isolation:isolate;z-index:1}.pm-calc-wrapper *,.pm-calc-wrapper *::before,.pm-calc-wrapper *::after{box-sizing:border-box}.pm-calc-header{position:relative;background:#0f172a!important;background-color:#0f172a!important;padding:24px 20px;text-align:center;border-bottom:4px solid #f60}.pm-calc-close{position:absolute;top:16px;right:16px;width:32px;height:32px;background:transparent!important;border:none!important;color:#94a3b8!important;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;padding:0;margin:0;transition:all 0.2s ease;z-index:10}.pm-calc-close:hover{background:rgb(255 255 255 / .1)!important;color:#ef4444!important}.pm-calc-close svg{width:22px;height:22px;pointer-events:none;background:transparent!important;background-color:transparent!important;box-shadow:none!important}.pm-calc-main-title{margin:0 0 6px 0;font-size:1.4rem;font-weight:800;letter-spacing:-.5px;line-height:1.2;display:flex;justify-content:center;align-items:center;gap:6px}.pm-calc-main-title .t-orange{color:#ff6600!important}.pm-calc-main-title .t-white{color:#ffffff!important}.pm-calc-subtitle{margin:0;font-size:13px;color:#94a3b8!important;font-weight:500;line-height:1.5}.pm-calc-body{padding:24px;background:#ffffff!important;background-color:#ffffff!important;position:relative;z-index:2}.pm-calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.pm-calc-group{display:flex;flex-direction:column;gap:8px;position:relative;min-width:0}.pm-calc-group.full{grid-column:1 / -1}.pm-calc-label{font-size:12px;font-weight:800;color:#1e293b!important;text-transform:uppercase;letter-spacing:.5px;line-height:1.3}.pm-calc-input-wrap{position:relative;display:flex;align-items:center;width:100%}.pm-input-icon{position:absolute;left:14px;color:#94a3b8!important;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}.pm-input-icon svg{display:block;background:transparent!important;background-color:transparent!important;box-shadow:none!important}.pm-calc-input{width:100%;height:50px;padding:0 42px 0 42px;background:#f8fafc!important;background-color:#f8fafc!important;border:1px solid #cbd5e1!important;border-radius:8px;font-family:inherit;font-size:14px;font-weight:600;color:#0f172a!important;transition:border-color 0.3s ease,background-color 0.3s ease,box-shadow 0.3s ease;appearance:none;-webkit-appearance:none;margin:0;outline:none}.pm-calc-input::placeholder{color:#64748b;opacity:1}.pm-calc-input:focus{border-color:#ff6600!important;background:#ffffff!important;background-color:#ffffff!important;outline:none!important;box-shadow:0 0 0 3px rgb(255 102 0 / .15)!important}select.pm-calc-input{padding-right:42px;cursor:pointer}.pm-calc-input.is-error{border-color:#ef4444!important;background:#fef2f2!important;background-color:#fef2f2!important}.pm-error-text{color:#ef4444!important;font-size:11px;font-weight:600;margin-top:4px;display:none;line-height:1.4}.pm-calc-input.is-error~.pm-error-text{display:block}.pm-calc-suffix{position:absolute;right:16px;font-size:13px;font-weight:700;color:#64748b!important;pointer-events:none;z-index:2}.pm-calc-btn-submit{width:100%;height:54px;padding:0 20px;margin:0;background:#ff6600!important;background-color:#ff6600!important;color:#ffffff!important;border:none!important;border-radius:8px;font-family:inherit;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:background-color 0.3s ease,transform 0.3s ease,box-shadow 0.3s ease,opacity 0.3s ease;box-shadow:0 4px 15px rgb(255 102 0 / .3);display:flex;justify-content:center;align-items:center;gap:10px;appearance:none;-webkit-appearance:none}.pm-calc-btn-submit svg{flex-shrink:0;background:transparent!important;background-color:transparent!important;box-shadow:none!important}.pm-calc-btn-submit:hover{background:#e65c00!important;background-color:#e65c00!important;transform:translateY(-2px);box-shadow:0 8px 20px rgb(255 102 0 / .4)}.pm-calc-btn-submit:active{transform:translateY(0)}.pm-calc-btn-submit:disabled{cursor:wait;transform:none}.pm-calc-result{background:#ffffff!important;background-color:#ffffff!important;border-top:2px dashed #cbd5e1;padding:24px;text-align:center;display:none;animation:pmFadeIn 0.5s cubic-bezier(.175,.885,.32,1.275) forwards}.pm-calc-res-title{font-size:12px;font-weight:800;color:#64748b!important;text-transform:uppercase;letter-spacing:1px}.pm-calc-res-price{font-size:clamp(28px, 6vw, 36px);font-weight:800;color:#0f172a!important;margin:8px 0;line-height:1;letter-spacing:-1px}.pm-calc-res-area{font-size:14px;font-weight:600;color:#ff6600!important;margin-bottom:20px;background:rgb(255 102 0 / .1)!important;display:inline-block;padding:6px 16px;border-radius:50px}.pm-calc-btn-wa{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:54px;padding:0 20px;background:#25d366!important;background-color:#25d366!important;color:#ffffff!important;font-size:15px;font-weight:800;text-decoration:none!important;border-radius:8px;transition:background-color 0.3s ease,transform 0.3s ease,box-shadow 0.3s ease;box-shadow:0 4px 15px rgb(37 211 102 / .2)}.pm-calc-btn-wa:hover{background:#20b858!important;background-color:#20b858!important;color:#ffffff!important;transform:translateY(-2px);box-shadow:0 8px 20px rgb(37 211 102 / .3)}.pm-calc-btn-wa svg{flex-shrink:0;background:transparent!important;background-color:transparent!important;box-shadow:none!important}@keyframes pmFadeIn{0%{opacity:0;transform:translateY(15px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}@media (max-width:480px){.pm-calc-wrapper{width:100%;max-width:100%;border-radius:10px}.pm-calc-header{padding:22px 16px 20px}.pm-calc-close{top:12px;right:12px}.pm-calc-main-title{font-size:1.25rem;gap:4px}.pm-calc-body{padding:20px 16px}.pm-calc-grid{grid-template-columns:1fr;gap:16px}.pm-calc-result{padding:20px 16px}}.pm-calc-wrapper svg,.pm-calc-wrapper i{background:transparent!important;background-color:transparent!important;box-shadow:none!important}</style><!--=======================================================KALKULATOR MEMBRANE=======================================================--><div class="pm-calc-wrapper"><!--=================================================HEADER=================================================--><div class="pm-calc-header"><!-- TOMBOL CLOSE BARU --><button type="button" class="pm-calc-close" id="pmCloseCalc" aria-label="Tutup Kalkulator"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button><h3 class="pm-calc-main-title"><span class="t-orange">Kalkulator </span><span class="t-white">Membrane </span></h3><p class="pm-calc-subtitle">Hitung estimasi biaya proyek presisi </p></div><!--=================================================BODY=================================================--><div class="pm-calc-body"><form id="pmFormKalkulator" autocomplete="off" onsubmit="return false;"><div class="pm-calc-grid"><!-- PANJANG --><div class="pm-calc-group"><label class="pm-calc-label" for="pmInpP">Panjang Area </label><div class="pm-calc-input-wrap"><div class="pm-input-icon"><svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v2H6.5a.5.5 0 0 0-.5.5v15zM20 9H8m12 5H8"/></svg></div><input type="number" id="pmInpP" class="pm-calc-input" placeholder="0" min="1" step="0.1"><span class="pm-calc-suffix">Meter </span></div><div class="pm-error-text" id="errP">Wajib isi panjang area </div></div><!-- LEBAR --><div class="pm-calc-group"><label class="pm-calc-label" for="pmInpL">Lebar Area </label><div class="pm-calc-input-wrap"><div class="pm-input-icon"><svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v2H6.5a.5.5 0 0 0-.5.5v15zM20 9H8m12 5H8"/></svg></div><input type="number" id="pmInpL" class="pm-calc-input" placeholder="0" min="1" step="0.1"><span class="pm-calc-suffix">Meter </span></div><div class="pm-error-text" id="errL">Wajib isi lebar area </div></div><!-- MATERIAL --><div class="pm-calc-group full"><label class="pm-calc-label" for="pmInpMat">Material Membrane </label><div class="pm-calc-input-wrap"><div class="pm-input-icon"><svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg></div><select id="pmInpMat" class="pm-calc-input"><option value="" disabled selected>-- Pilih Kualitas Material -- </option><optgroup label="Serge Ferrari (Premium)"><option value="850000">Serge Ferrari 590 GSM </option><option value="1250000">Serge Ferrari 750 GSM </option><option value="1550000">Serge Ferrari 950 GSM </option></optgroup><optgroup label="Heytex (Jerman)"><option value="700000">Heytex 650 GSM </option><option value="850000">Heytex 850 GSM </option><option value="975000">Heytex 950 GSM </option></optgroup><optgroup label="AGTex & Mighty (Lokal Standar)"><option value="750000">AGTex 650 GSM </option><option value="850000">AGTex 750 GSM </option><option value="725000">Mighty 650 GSM </option></optgroup></select><span class="pm-calc-suffix">▼ </span></div><div class="pm-error-text" id="errMat">Silakan pilih material </div></div><!-- RANGKA --><div class="pm-calc-group"><label class="pm-calc-label" for="pmInpRangka">Struktur Rangka </label><div class="pm-calc-input-wrap"><div class="pm-input-icon"><svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18M9 21V9"/></svg></div><select id="pmInpRangka" class="pm-calc-input"><option value="0">Pipa Besi Hitam (Std) </option><option value="150000">Pipa Besi Galvanis </option></select><span class="pm-calc-suffix">▼ </span></div></div><!-- DESAIN --><div class="pm-calc-group"><label class="pm-calc-label" for="pmInpDesain">Tipe Bentuk </label><div class="pm-calc-input-wrap"><div class="pm-input-icon"><svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2l9 20H3L12 2z"/></svg></div><select id="pmInpDesain" class="pm-calc-input"><option value="1.0">Standar / Datar </option><option value="1.2">Tarikan Sedang </option><option value="1.4">Tarikan Ekstrem </option></select><span class="pm-calc-suffix">▼ </span></div></div></div><!--=================================================GENERATE=================================================--><button type="button" id="btnHitungEstimasi" class="pm-calc-btn-submit"><svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12" /></svg>Generate Harga </button></form><!--=================================================HASIL=================================================--><div id="pmBoxHasil" class="pm-calc-result"><div class="pm-calc-res-title">Total Estimasi Proyek </div><div id="pmOutHarga" class="pm-calc-res-price">Rp 0 </div><div class="pm-calc-res-area">Estimasi Kebutuhan Luas:<strong id="pmOutLuas">0 m² </strong></div><a id="pmWaLink" href="#" target="_blank" rel="noopener noreferrer" class="pm-calc-btn-wa"><svg width="22" height="22" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.816 9.816 0 0012.04 2m.01 1.67c2.2 0 4.26.86 5.82 2.42a8.225 8.225 0 012.41 5.83c0 4.54-3.7 8.23-8.24 8.23-1.48 0-2.93-.39-4.19-1.15l-.3-.18-3.12.82.83-3.04-.19-.31a8.19 8.19 0 01-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24M8.53 7.33c-.19-.43-.43-.43-.63-.44-.18 0-.38 0-.58 0-.2 0-.52.08-.79.38-.27.3-.99.97-.99 2.37 0 1.4 1.02 2.76 1.16 2.96.14.2 2.01 3.07 4.87 4.3 2.37 1.02 2.85.82 3.39.77.54-.05 1.73-.71 1.97-1.39.24-.68.24-1.27.17-1.39-.07-.12-.27-.19-.57-.34-.3-.15-1.73-.85-2-.95-.27-.1-.46-.15-.66.15-.2.3-.77.97-.94 1.17-.17.2-.34.22-.64.07-.3-.15-1.29-.48-2.45-1.52-.91-.81-1.53-1.81-1.71-2.12-.18-.3-.02-.46.13-.61.13-.13.3-.34.45-.51.15-.17.2-.29.3-.49.1-.19.05-.36-.02-.51-.08-.15-.66-1.59-.91-2.18z"/></svg>Konsultasi & Nego WA </a></div></div></div><script>(function (){'use strict';function initPrimaCalculator(){const btnHitung=document.getElementById('btnHitungEstimasi');const btnClose=document.getElementById('pmCloseCalc');// Tangkap tombol Close const pEl=document.getElementById('pmInpP');const lEl=document.getElementById('pmInpL');const matEl=document.getElementById('pmInpMat');const frameEl=document.getElementById('pmInpRangka');const shapeEl=document.getElementById('pmInpDesain');const boxHasil=document.getElementById('pmBoxHasil');const txtHarga=document.getElementById('pmOutHarga');const txtLuas=document.getElementById('pmOutLuas');const btnWa=document.getElementById('pmWaLink');if (!btnHitung || btnHitung.dataset.pmInitialized==='true'){return}btnHitung.dataset.pmInitialized='true';if (btnClose){btnClose.addEventListener('click',function(e){e.preventDefault();// Cari overlay modal berdasarkan ID yang ada di catatan CSS Anda const modalOverlay=document.getElementById('modalCalcOverlay');if (modalOverlay){// Sembunyikan modal. Sesuaikan apakah Anda pakai display none atau hapus class active modalOverlay.style.display='none';modalOverlay.classList.remove('active');modalOverlay.classList.remove('show')}})}[pEl,lEl,matEl].forEach(function (input){if (!input) return;input.addEventListener('input',function (){input.classList.remove('is-error')});input.addEventListener('change',function (){input.classList.remove('is-error')})});btnHitung.addEventListener('click',function (){let isValid=true;[pEl,lEl,matEl].forEach(function (el){if (el){el.classList.remove('is-error')}});const p=parseFloat(pEl ? pEl.value :0);const l=parseFloat(lEl ? lEl.value :0);const matPrice=parseInt(matEl ? matEl.value :0,10);if (!p || p <=0){if (pEl){pEl.classList.add('is-error')}isValid=false}if (!l || l <=0){if (lEl){lEl.classList.add('is-error')}isValid=false}if (!matPrice || isNaN(matPrice)){if (matEl){matEl.classList.add('is-error')}isValid=false}if (!isValid){return}const originalBtnText=btnHitung.innerHTML;btnHitung.innerHTML=` <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83"/></svg>MENGHITUNG... `;btnHitung.style.opacity='0.8';btnHitung.disabled=true;setTimeout(function (){const framePrice=parseInt(frameEl ? frameEl.value :0,10) || 0;const shapeFactor=parseFloat(shapeEl ? shapeEl.value :1) || 1;const baseArea=p * l;const finalArea=baseArea * shapeFactor;const finalPrice=finalArea * (matPrice+framePrice);const fmt=new Intl.NumberFormat('id-ID',{style:'currency',currency:'IDR',maximumFractionDigits:0});if (txtLuas){txtLuas.textContent=finalArea.toFixed(1)+' m²'}if (txtHarga){txtHarga.textContent=fmt.format(finalPrice)}const textMat=matEl && matEl.selectedIndex>=0 ? matEl.options[matEl.selectedIndex].text :'';const textFrame=frameEl && frameEl.selectedIndex>=0 ? frameEl.options[frameEl.selectedIndex].text :'';const msg=`Halo Tim Prima Membrane,\n\n`+`Saya sudah menghitung estimasi dari Website,berikut detailnya:\n\n`+`🔹 Lahan:${p}m x ${l}m\n`+`🔹 Kebutuhan Luas (Desain):${finalArea.toFixed(1)}m²\n`+`🔹 Material:${textMat}\n`+`🔹 Tipe Rangka:${textFrame}\n\n`+`🔸 *ESTIMASI BIAYA:${fmt.format(finalPrice)}*\n\n`+`Bisa diinfokan proses survey lokasinya?`;if (btnWa){btnWa.href=`https://wa.me/628558824529?text=${encodeURIComponent(msg)}`}if (boxHasil){boxHasil.style.display='block'}btnHitung.innerHTML=originalBtnText;btnHitung.style.opacity='1';btnHitung.disabled=false;if (boxHasil){setTimeout(function (){boxHasil.scrollIntoView({behavior:'smooth',block:'nearest'})},50)}},400)})}if (document.readyState==='loading'){document.addEventListener('DOMContentLoaded',initPrimaCalculator)}else{initPrimaCalculator()}})();</script>