{"id":441,"date":"2026-05-15T13:36:06","date_gmt":"2026-05-15T06:36:06","guid":{"rendered":"https:\/\/porte.id\/go\/?page_id=441"},"modified":"2026-05-15T14:12:42","modified_gmt":"2026-05-15T07:12:42","slug":"kalkulator-kitchen-set","status":"publish","type":"page","link":"https:\/\/porte.id\/go\/kalkulator-kitchen-set\/","title":{"rendered":"Kalkulator Estimasi Harga Kitchen Set"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<!-- PORTE Kitchen Set Calculator \u2014 WordPress Embed Version -->\n<!-- Paste this entire block into a Custom HTML block on a full-width page template -->\n<!-- Before publishing: replace WA_NUMBER value on the last line of the <script> block -->\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap');\n\n#porte-calc {\n  --pc-ink: #1A1A18;\n  --pc-paper: #F5F2EC;\n  --pc-cream: #EDE9DF;\n  --pc-accent: #C4873A;\n  --pc-accent-light: #F0DFC0;\n  --pc-muted: #8A8678;\n  --pc-border: #D8D3C8;\n  --pc-white: #FDFCF9;\n  --pc-radius: 2px;\n  background: var(--pc-paper);\n  color: var(--pc-ink);\n  font-family: 'DM Sans', sans-serif;\n  font-weight: 300;\n  line-height: 1.6;\n  box-sizing: border-box;\n}\n#porte-calc *, #porte-calc *::before, #porte-calc *::after {\n  box-sizing: border-box;\n}\n#porte-calc .pc-wrap {\n  max-width: 820px;\n  margin: 0 auto;\n  padding: 48px 24px 80px;\n}\n\n\/* Header *\/\n#porte-calc .pc-header {\n  border-bottom: 1px solid var(--pc-border);\n  padding-bottom: 32px;\n  margin-bottom: 48px;\n  background-color: transparent;\n}\n#porte-calc .pc-brand {\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 0.2em;\n  text-transform: uppercase;\n  color: var(--pc-accent);\n  margin-bottom: 12px;\n}\n#porte-calc .pc-header h2 {\n  font-family: 'DM Serif Display', serif;\n  font-size: clamp(28px, 5vw, 42px);\n  font-weight: 400;\n  line-height: 1.1;\n  color: var(--pc-ink);\n  margin: 0 0 12px;\n  padding: 0;\n  border: none;\n}\n#porte-calc .pc-header p {\n  font-size: 14px;\n  color: var(--pc-muted);\n  max-width: 480px;\n  margin: 0;\n}\n\n\/* Section *\/\n#porte-calc .pc-section { margin-bottom: 40px; }\n#porte-calc .pc-section-label {\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 0.18em;\n  text-transform: uppercase;\n  color: var(--pc-muted);\n  margin-bottom: 16px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--pc-border);\n}\n\n\/* Fields *\/\n#porte-calc .pc-fg { display: grid; gap: 16px; }\n#porte-calc .pc-fg.c2 { grid-template-columns: 1fr 1fr; }\n#porte-calc .pc-field { display: flex; flex-direction: column; gap: 6px; }\n#porte-calc .pc-field label {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--pc-ink);\n  letter-spacing: 0.02em;\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n#porte-calc .pc-sub {\n  font-size: 11px;\n  color: var(--pc-muted);\n  font-weight: 300;\n  margin-top: 2px;\n  display: block;\n}\n#porte-calc input[type=\"number\"],\n#porte-calc select {\n  width: 100%;\n  padding: 10px 12px;\n  background: var(--pc-white);\n  border: 1px solid var(--pc-border);\n  border-radius: var(--pc-radius);\n  font-family: 'DM Sans', sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--pc-ink);\n  outline: none;\n  transition: border-color 0.15s;\n  -webkit-appearance: none;\n  appearance: none;\n  box-shadow: none;\n  margin: 0;\n}\n#porte-calc input[type=\"number\"]:focus,\n#porte-calc select:focus {\n  border-color: var(--pc-accent);\n  box-shadow: none;\n  outline: none;\n}\n#porte-calc select {\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8678' stroke-width='1.5' fill='none'\/%3E%3C\/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 12px center;\n  padding-right: 32px;\n  cursor: pointer;\n}\n\n\/* Toggle *\/\n#porte-calc .pc-toggle {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 14px;\n  background: var(--pc-white);\n  border: 1px solid var(--pc-border);\n  border-radius: var(--pc-radius);\n  cursor: pointer;\n  transition: border-color 0.15s;\n  user-select: none;\n}\n#porte-calc .pc-toggle:hover { border-color: var(--pc-accent); }\n#porte-calc .pc-toggle.on { border-color: var(--pc-accent); background: var(--pc-accent-light); }\n#porte-calc .pc-sw {\n  width: 32px; height: 18px;\n  background: var(--pc-border);\n  border-radius: 9px;\n  position: relative;\n  transition: background 0.15s;\n  flex-shrink: 0;\n}\n#porte-calc .pc-sw::after {\n  content: '';\n  width: 12px; height: 12px;\n  background: white;\n  border-radius: 50%;\n  position: absolute;\n  top: 3px; left: 3px;\n  transition: transform 0.15s;\n}\n#porte-calc .pc-toggle.on .pc-sw { background: var(--pc-accent); }\n#porte-calc .pc-toggle.on .pc-sw::after { transform: translateX(14px); }\n#porte-calc .pc-tlabel { font-size: 13px; font-weight: 400; flex: 1; }\n#porte-calc .pc-tlabel small { display: block; font-size: 11px; color: var(--pc-muted); }\n#porte-calc .pc-sub-fields {\n  margin-top: 12px;\n  padding: 16px;\n  background: var(--pc-cream);\n  border-radius: var(--pc-radius);\n  display: none;\n}\n#porte-calc .pc-sub-fields.on { display: block; }\n\n\/* Accessories grid *\/\n#porte-calc .pc-acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n\n\/* M&E checkboxes *\/\n#porte-calc .pc-me-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  background: var(--pc-white);\n  border: 1px solid var(--pc-border);\n  border-radius: var(--pc-radius);\n  cursor: pointer;\n  transition: border-color 0.15s, background 0.15s;\n  user-select: none;\n}\n#porte-calc .pc-me-item:hover { border-color: var(--pc-accent); }\n#porte-calc .pc-me-item.on { border-color: var(--pc-accent); background: var(--pc-accent-light); }\n#porte-calc .pc-mck {\n  width: 16px; height: 16px;\n  border: 1.5px solid var(--pc-border);\n  border-radius: 2px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.12s;\n}\n#porte-calc .pc-me-item.on .pc-mck { background: var(--pc-accent); border-color: var(--pc-accent); }\n#porte-calc .pc-me-item.on .pc-mck::after {\n  content: '';\n  width: 8px; height: 5px;\n  border-left: 1.5px solid white;\n  border-bottom: 1.5px solid white;\n  transform: rotate(-45deg) translateY(-1px);\n  display: block;\n}\n#porte-calc .pc-mname { font-size: 12px; font-weight: 400; flex: 1; }\n#porte-calc .pc-mright { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }\n#porte-calc .pc-mqty {\n  width: 48px;\n  padding: 4px 6px;\n  font-size: 12px;\n  display: none;\n  border: 1px solid var(--pc-border);\n  border-radius: var(--pc-radius);\n  background: var(--pc-white);\n  text-align: center;\n}\n#porte-calc .pc-me-item.on .pc-mqty { display: block; }\n#porte-calc .pc-mprice { font-size: 11px; color: var(--pc-muted); }\n\n\/* Button *\/\n#porte-calc .pc-btn {\n  width: 100%;\n  padding: 16px;\n  background: var(--pc-ink);\n  color: var(--pc-paper);\n  border: none;\n  border-radius: var(--pc-radius);\n  font-family: 'DM Sans', sans-serif;\n  font-size: 13px;\n  font-weight: 500;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  cursor: pointer;\n  transition: background 0.15s, transform 0.1s;\n  margin-top: 8px;\n  display: block;\n}\n#porte-calc .pc-btn:hover { background: #2C2C28; }\n#porte-calc .pc-btn:active { transform: scale(0.99); }\n\n\/* Result *\/\n#porte-calc .pc-result {\n  display: none;\n  margin-top: 32px;\n  padding: 32px;\n  background: var(--pc-ink);\n  border-radius: var(--pc-radius);\n  color: var(--pc-paper);\n}\n#porte-calc .pc-result.on { display: block; }\n#porte-calc .pc-rlabel {\n  font-size: 10px;\n  letter-spacing: 0.18em;\n  text-transform: uppercase;\n  color: var(--pc-muted);\n  margin-bottom: 8px;\n}\n#porte-calc .pc-rrange {\n  font-family: 'DM Serif Display', serif;\n  font-size: clamp(22px, 4vw, 34px);\n  line-height: 1.1;\n  margin-bottom: 4px;\n}\n#porte-calc .pc-rrange .pc-sep {\n  color: var(--pc-accent);\n  margin: 0 10px;\n  font-family: 'DM Sans', sans-serif;\n  font-weight: 300;\n  font-size: 0.8em;\n}\n#porte-calc .pc-rnote {\n  font-size: 12px;\n  color: var(--pc-muted);\n  margin-top: 16px;\n  padding-top: 16px;\n  border-top: 1px solid #333330;\n  line-height: 1.6;\n}\n#porte-calc .pc-breakdown {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid #333330;\n}\n#porte-calc .pc-bdtitle {\n  font-size: 10px;\n  letter-spacing: 0.15em;\n  text-transform: uppercase;\n  color: var(--pc-muted);\n  margin-bottom: 12px;\n}\n#porte-calc .pc-bdrow {\n  display: flex;\n  justify-content: space-between;\n  font-size: 12px;\n  padding: 5px 0;\n  border-bottom: 1px solid #2A2A28;\n  color: #C8C4BA;\n  gap: 12px;\n}\n#porte-calc .pc-bdrow .pc-amt { color: var(--pc-paper); font-weight: 400; white-space: nowrap; }\n#porte-calc .pc-bdtotal {\n  display: flex;\n  justify-content: space-between;\n  font-size: 13px;\n  padding: 10px 0 0;\n  margin-top: 4px;\n  border-top: 1px solid #3A3A38;\n}\n#porte-calc .pc-bdtotal .pc-amt { color: var(--pc-accent); font-weight: 500; }\n#porte-calc .pc-cta-row {\n  display: flex;\n  gap: 12px;\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid #333330;\n}\n#porte-calc .pc-cta {\n  flex: 1;\n  padding: 12px 16px;\n  border-radius: var(--pc-radius);\n  font-family: 'DM Sans', sans-serif;\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  text-decoration: none;\n  text-align: center;\n  cursor: pointer;\n  transition: opacity 0.15s;\n  display: block;\n}\n#porte-calc .pc-cta:hover { opacity: 0.85; }\n#porte-calc .pc-cta-wa { background: var(--pc-accent); color: white; border: none; }\n#porte-calc .pc-cta-reset { background: transparent; color: var(--pc-muted); border: 1px solid #444440; }\n\n#porte-calc .pc-err {\n  display: none;\n  color: #C0392B;\n  font-size: 12px;\n  margin-top: 6px;\n}\n#porte-calc .pc-err.on { display: block; }\n#porte-calc .pc-note-accent {\n  font-size: 11px;\n  color: var(--pc-accent);\n  margin-top: 2px;\n  display: block;\n}\n#porte-calc .pc-disclaimer {\n  margin-top: 48px;\n  padding-top: 24px;\n  border-top: 1px solid var(--pc-border);\n  font-size: 11px;\n  color: var(--pc-muted);\n  line-height: 1.7;\n}\n\n@media (max-width: 600px) {\n  #porte-calc .pc-fg.c2 { grid-template-columns: 1fr; }\n  #porte-calc .pc-acc-grid { grid-template-columns: 1fr; }\n  #porte-calc .pc-cta-row { flex-direction: column; }\n}\n<\/style>\n\n<div id=\"porte-calc\">\n  <div class=\"pc-wrap\">\n\n    <header class=\"pc-header\">\n      <div class=\"pc-brand\">Porte Indonesia<\/div>\n      <h2>Estimasi Harga <br>Kitchen Set<\/h2>\n      <p>Masukkan dimensi dan spesifikasi untuk mendapatkan estimasi awal harga kitchen set Anda.<\/p>\n    <\/header>\n\n    <div id=\"pc-form\">\n\n      <!-- DIMENSI -->\n      <div class=\"pc-section\">\n        <div class=\"pc-section-label\">Dimensi Kabinet<\/div>\n        <div class=\"pc-fg c2\">\n          <div class=\"pc-field\">\n            <label for=\"pc-bawah\">Kabinet Bawah<\/label>\n            <span class=\"pc-sub\">Panjang total (meter lari)<\/span>\n            <input type=\"number\" id=\"pc-bawah\" min=\"1\" max=\"20\" step=\"1\" placeholder=\"mis. 3\">\n            <span class=\"pc-err\" id=\"pc-err-bawah\">Masukkan panjang minimal 1 m<\/span>\n          <\/div>\n          <div class=\"pc-field\">\n            <label for=\"pc-atas\">Kabinet Atas<\/label>\n            <span class=\"pc-sub\">Panjang total (meter lari)<\/span>\n            <input type=\"number\" id=\"pc-atas\" min=\"0\" max=\"20\" step=\"1\" placeholder=\"mis. 3\">\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- KABINET TAMBAHAN -->\n      <div class=\"pc-section\">\n        <div class=\"pc-section-label\">Kabinet Tambahan<\/div>\n        <div class=\"pc-fg\" style=\"gap:10px;\">\n\n          <div class=\"pc-toggle\" id=\"pc-tgl-tinggi\" onclick=\"pcToggle('tinggi')\">\n            <div class=\"pc-sw\"><\/div>\n            <div class=\"pc-tlabel\">Kabinet Tinggi \/ Corner<small>Kulkas, dispenser, rice cooker<\/small><\/div>\n          <\/div>\n          <div class=\"pc-sub-fields\" id=\"pc-sub-tinggi\">\n            <div class=\"pc-fg c2\">\n              <div class=\"pc-field\">\n                <label for=\"pc-tinggi-area\">Luas Kabinet Tinggi (m\u00b2)<\/label>\n                <input type=\"number\" id=\"pc-tinggi-area\" min=\"0.5\" step=\"0.5\" placeholder=\"mis. 4.0\">\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"pc-toggle\" id=\"pc-tgl-island\" onclick=\"pcToggle('island')\">\n            <div class=\"pc-sw\"><\/div>\n            <div class=\"pc-tlabel\">Kabinet Island<small>Kitchen island \/ meja tengah<\/small><\/div>\n          <\/div>\n          <div class=\"pc-sub-fields\" id=\"pc-sub-island\">\n            <div class=\"pc-fg c2\">\n              <div class=\"pc-field\">\n                <label for=\"pc-island\">Panjang Island (m&#8217;)<\/label>\n                <input type=\"number\" id=\"pc-island\" min=\"1\" max=\"20\" step=\"1\" placeholder=\"mis. 2\">\n              <\/div>\n            <\/div>\n          <\/div>\n\n        <\/div>\n      <\/div>\n\n      <!-- MATERIAL -->\n      <div class=\"pc-section\">\n        <div class=\"pc-section-label\">Material &#038; Finishing<\/div>\n        <div class=\"pc-fg c2\">\n          <div class=\"pc-field\">\n            <label for=\"pc-material\">Material Kabinet<\/label>\n            <select id=\"pc-material\">\n              <option value=\"plywood\">Plywood Fin. HPL<\/option>\n              <option value=\"pvc\">PVC Board Fin. HPL (premium)<\/option>\n            <\/select>\n          <\/div>\n          <div class=\"pc-field\">\n            <label for=\"pc-toptable\">Top Table<\/label>\n            <select id=\"pc-toptable\">\n              <option value=\"none\">Tidak Termasuk<\/option>\n              <option value=\"granit_up\">Granit Ujung Pandang \u2014 Rp 1.250.000\/m&#8217;<\/option>\n              <option value=\"granit_sw\">Granit Star White \u2014 Rp 1.450.000\/m&#8217;<\/option>\n              <option value=\"granit_bn\">Granit Black Nero \u2014 Rp 1.550.000\/m&#8217;<\/option>\n              <option value=\"ss\">Solid Surface \u2014 Rp 1.750.000\/m&#8217;<\/option>\n              <option value=\"marmer\">Marmer White Carrara \u2014 Rp 2.500.000\/m&#8217;<\/option>\n            <\/select>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- BACKSPLASH -->\n      <div class=\"pc-section\">\n        <div class=\"pc-section-label\">Backsplash<\/div>\n        <div class=\"pc-toggle\" id=\"pc-tgl-bs\" onclick=\"pcToggle('bs')\">\n          <div class=\"pc-sw\"><\/div>\n          <div class=\"pc-tlabel\">Tambahkan Backsplash<small>Panjang mengikuti kabinet bawah<\/small><\/div>\n        <\/div>\n        <div class=\"pc-sub-fields\" id=\"pc-sub-bs\">\n          <div class=\"pc-fg c2\">\n            <div class=\"pc-field\">\n              <label for=\"pc-bs-type\">Material Backsplash<\/label>\n              <select id=\"pc-bs-type\">\n                <option value=\"subway\">Subway Tile \u2014 Rp 350.000\/m&#8217;<\/option>\n                <option value=\"keramik\">Keramik Precut \u2014 Rp 550.000\u2013650.000\/m&#8217;<\/option>\n              <\/select>\n            <\/div>\n            <div class=\"pc-field\">\n              <label for=\"pc-bs-tinggi\">Tinggi Backsplash<\/label>\n              <select id=\"pc-bs-tinggi\">\n                <option value=\"0.6\">60 cm<\/option>\n                <option value=\"0.8\">80 cm<\/option>\n                <option value=\"1.0\">100 cm<\/option>\n              <\/select>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- AKSESORIS -->\n      <div class=\"pc-section\">\n        <div class=\"pc-section-label\">Aksesoris (Opsional)<\/div>\n        <div id=\"pc-acc\"><\/div>\n      <\/div>\n\n      <!-- M&E -->\n      <div class=\"pc-section\">\n        <div class=\"pc-section-label\">Mekanikal &#038; Elektrikal (Opsional)<\/div>\n        <div id=\"pc-me\"><\/div>\n      <\/div>\n\n      <button type=\"button\" class=\"pc-btn\" onclick=\"pcCalc()\">Hitung Estimasi Harga<\/button>\n\n      <!-- RESULT -->\n      <div class=\"pc-result\" id=\"pc-result\">\n        <div class=\"pc-rlabel\">Estimasi Harga<\/div>\n        <div class=\"pc-rrange\" id=\"pc-rrange\"><\/div>\n        <div class=\"pc-breakdown\" id=\"pc-breakdown\"><\/div>\n        <div class=\"pc-rnote\">\n          Estimasi ini bersifat indikatif dan belum termasuk pekerjaan bongkar pasang, instalasi plumbing, serta biaya persiapan lapangan. Harga final ditentukan setelah survei.\n        <\/div>\n        <div class=\"pc-cta-row\">\n          <a href=\"#\" class=\"pc-cta pc-cta-wa\" id=\"pc-wa\">Konsultasi via WhatsApp<\/a>\n          <button type=\"button\" class=\"pc-cta pc-cta-reset\" onclick=\"pcReset()\">Hitung Ulang<\/button>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n    <div class=\"pc-disclaimer\">\n      <strong>Catatan:<\/strong> Estimasi menggunakan harga satuan per meter lari berdasarkan referensi proyek Porte 2025\u20132026. Semua harga adalah harga jual kepada klien, belum termasuk pajak. Pemilihan cooker hood otomatis menambahkan 1 unit stop kontak single ke total. Harga final ditentukan setelah survei lapangan.\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n(function() {\n  \/\/ \u2500\u2500\u2500 DATA \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  var RATES = {\n    plywood: {\n      bawah:  { floor: 2650000, ceil: 2750000 },\n      atas:   { floor: 2550000, ceil: 2650000 },\n      tinggi: { floor: 2550000, ceil: 2650000 },\n      island: { floor: 3500000, ceil: 3500000 }\n    },\n    pvc: {\n      bawah:  { floor: 4150000, ceil: 4250000 },\n      atas:   { floor: 4050000, ceil: 4150000 },\n      tinggi: { floor: 4000000, ceil: 4000000 },\n      island: { floor: 4150000, ceil: 4250000 }\n    }\n  };\n  var TOPTABLE = {\n    none:      { floor: 0,       ceil: 0,       label: '' },\n    granit_up: { floor: 1250000, ceil: 1250000, label: 'Granit Ujung Pandang' },\n    granit_sw: { floor: 1450000, ceil: 1450000, label: 'Granit Star White' },\n    granit_bn: { floor: 1550000, ceil: 1550000, label: 'Granit Black Nero' },\n    ss:        { floor: 1750000, ceil: 1750000, label: 'Solid Surface' },\n    marmer:    { floor: 2500000, ceil: 2500000, label: 'Marmer White Carrara' }\n  };\n  var BACKSPLASH = {\n    subway:  { floor: 350000, ceil: 350000,  label: 'Subway Tile' },\n    keramik: { floor: 550000, ceil: 650000,  label: 'Keramik Precut' }\n  };\n  var ACC_GROUPS = [\n    { title: 'Sink', id: 'sink', options: [\n      { value: '', label: '\u2014 Pilih \u2014', price: 0 },\n      { value: 'single', label: 'Sink Single \u2014 Rp 1.250.000', price: 1250000 },\n      { value: 'double', label: 'Sink Double \u2014 Rp 1.750.000', price: 1750000 }\n    ]},\n    { title: 'Kran', id: 'kran', options: [\n      { value: '', label: '\u2014 Pilih \u2014', price: 0 },\n      { value: 'tm', label: 'Kran Table Mount \u2014 Rp 750.000', price: 750000 },\n      { value: 'wm', label: 'Kran Wall Mount \u2014 Rp 750.000',  price: 750000 }\n    ]},\n    { title: 'Kompor Tanam + Instalasi', id: 'kompor', options: [\n      { value: '', label: '\u2014 Pilih \u2014', price: 0 },\n      { value: '30', label: 'Kompor Tanam 30cm \u2014 Rp 1.750.000', price: 1750000 },\n      { value: '70', label: 'Kompor Tanam 70cm \u2014 Rp 2.750.000', price: 2750000 },\n      { value: '90', label: 'Kompor Tanam 90cm \u2014 Rp 3.750.000', price: 3750000 }\n    ]},\n    { title: 'Cooker Hood + Instalasi', id: 'hood', note: 'Otomatis termasuk 1 stop kontak single (Rp 275.000)', options: [\n      { value: '', label: '\u2014 Pilih \u2014', price: 0 },\n      { value: '60', label: 'Cooker Hood 60cm \u2014 Rp 1.500.000', price: 1500000 },\n      { value: '70', label: 'Cooker Hood 70cm \u2014 Rp 1.750.000', price: 1750000 },\n      { value: '90', label: 'Cooker Hood 90cm \u2014 Rp 2.250.000', price: 2250000 }\n    ]},\n    { title: 'Rak Piring', id: 'rakpiring', options: [\n      { value: '', label: '\u2014 Pilih \u2014', price: 0 },\n      { value: '60', label: 'Rak Piring 60cm \u2014 Rp 350.000', price: 350000 },\n      { value: '70', label: 'Rak Piring 70cm \u2014 Rp 450.000', price: 450000 },\n      { value: '90', label: 'Rak Piring 90cm \u2014 Rp 550.000', price: 550000 }\n    ]},\n    { title: 'Rak Sendok', id: 'raksendok', options: [\n      { value: '', label: '\u2014 Pilih \u2014', price: 0 },\n      { value: '40', label: 'Rak Sendok 40cm \u2014 Rp 150.000', price: 150000 },\n      { value: '60', label: 'Rak Sendok 60cm \u2014 Rp 250.000', price: 250000 }\n    ]},\n    { title: 'Rak Bumbu', id: 'rakbumbu', options: [\n      { value: '', label: '\u2014 Pilih \u2014', price: 0 },\n      { value: 'custom',    label: 'Rak Bumbu Custom \u2014 Rp 500.000',    price: 500000 },\n      { value: 'stainless', label: 'Rak Bumbu Stainless \u2014 Rp 1.250.000', price: 1250000 }\n    ]}\n  ];\n  var ME_ITEMS = [\n    { id: 'saklar_s',  name: 'Saklar Single',           price: 265000 },\n    { id: 'saklar_d',  name: 'Saklar Double',            price: 285000 },\n    { id: 'sk_single', name: 'Stop Kontak Single',       price: 275000 },\n    { id: 'sk_double', name: 'Stop Kontak Double',       price: 295000 },\n    { id: 'led',       name: 'LED Strip (per roll 5m)',  price: 500000 }\n  ];\n\n  \/\/ \u2500\u2500 UPDATE THIS BEFORE GOING LIVE \u2500\u2500\n  var WA_NUMBER = '6285183134576';\n\n  \/\/ \u2500\u2500\u2500 TOGGLE STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  var tgl = { tinggi: false, island: false, bs: false };\n\n  window.pcToggle = function(key) {\n    tgl[key] = !tgl[key];\n    document.getElementById('pc-tgl-' + key).classList.toggle('on', tgl[key]);\n    document.getElementById('pc-sub-' + key).classList.toggle('on', tgl[key]);\n  };\n\n  \/\/ \u2500\u2500\u2500 RENDER ACCESSORIES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  var accCont = document.getElementById('pc-acc');\n  var accGrid = document.createElement('div');\n  accGrid.className = 'pc-acc-grid';\n  ACC_GROUPS.forEach(function(g) {\n    var wrap = document.createElement('div');\n    wrap.className = 'pc-field';\n    var lbl = document.createElement('label');\n    lbl.textContent = g.title;\n    lbl.setAttribute('for', 'pc-acc-' + g.id);\n    wrap.appendChild(lbl);\n    if (g.note) {\n      var note = document.createElement('span');\n      note.className = 'pc-note-accent';\n      note.textContent = g.note;\n      wrap.appendChild(note);\n    }\n    var sel = document.createElement('select');\n    sel.id = 'pc-acc-' + g.id;\n    g.options.forEach(function(opt) {\n      var o = document.createElement('option');\n      o.value = opt.value;\n      o.textContent = opt.label;\n      o.dataset.price = opt.price;\n      sel.appendChild(o);\n    });\n    wrap.appendChild(sel);\n    accGrid.appendChild(wrap);\n  });\n  accCont.appendChild(accGrid);\n\n  \/\/ \u2500\u2500\u2500 RENDER M&E \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  var meCont = document.getElementById('pc-me');\n  var meGrid = document.createElement('div');\n  meGrid.className = 'pc-acc-grid';\n  ME_ITEMS.forEach(function(item) {\n    var el = document.createElement('div');\n    el.className = 'pc-me-item';\n    el.id = 'pc-me-' + item.id;\n    el.innerHTML =\n      '<div class=\"pc-mck\"><\/div>' +\n      '<span class=\"pc-mname\">' + item.name + '<\/span>' +\n      '<div class=\"pc-mright\">' +\n        '<input type=\"number\" class=\"pc-mqty\" id=\"pc-qty-' + item.id + '\" min=\"1\" max=\"20\" step=\"1\" value=\"1\">' +\n        '<span class=\"pc-mprice\">' + fmt(item.price) + '<\/span>' +\n      '<\/div>';\n    el.addEventListener('click', function(e) {\n      if (e.target.tagName === 'INPUT') return;\n      el.classList.toggle('on');\n    });\n    meGrid.appendChild(el);\n  });\n  meCont.appendChild(meGrid);\n\n  \/\/ \u2500\u2500\u2500 FORMAT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  function fmt(n) { return 'Rp ' + Math.round(n).toLocaleString('id-ID'); }\n  function fmtShort(n) {\n    if (n >= 1000000000) return 'Rp ' + (n\/1000000000).toFixed(1).replace('.',',') + ' M';\n    if (n >= 1000000)    return 'Rp ' + (n\/1000000).toFixed(0) + ' jt';\n    return fmt(n);\n  }\n\n  \/\/ \u2500\u2500\u2500 CALCULATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  window.pcCalc = function() {\n    var bawah = parseInt(document.getElementById('pc-bawah').value) || 0;\n    var errEl = document.getElementById('pc-err-bawah');\n    if (bawah < 1) { errEl.classList.add('on'); document.getElementById('pc-bawah').focus(); return; }\n    errEl.classList.remove('on');\n\n    var atas  = parseInt(document.getElementById('pc-atas').value) || 0;\n    var mat   = document.getElementById('pc-material').value;\n    var ttKey = document.getElementById('pc-toptable').value;\n    var rate  = RATES[mat];\n    var rows  = [];\n    var floor = 0, ceil = 0;\n\n    function add(label, f, c) { floor += f; ceil += c; rows.push({ label: label, f: f, c: c }); }\n\n    add('Kabinet bawah (' + bawah + ' m\\')', bawah*rate.bawah.floor, bawah*rate.bawah.ceil);\n    if (atas > 0) add('Kabinet atas (' + atas + ' m\\')', atas*rate.atas.floor, atas*rate.atas.ceil);\n    if (ttKey !== 'none') {\n      var tt = TOPTABLE[ttKey];\n      add('Top table ' + tt.label + ' (' + bawah + ' m\\')', bawah*tt.floor, bawah*tt.ceil);\n    }\n    if (tgl.tinggi) {\n      var area = parseFloat(document.getElementById('pc-tinggi-area').value) || 0;\n      if (area > 0) add('Kabinet tinggi\/corner (' + area + ' m\u00b2)', area*rate.tinggi.floor, area*rate.tinggi.ceil);\n    }\n    if (tgl.island) {\n      var isl = parseInt(document.getElementById('pc-island').value) || 0;\n      if (isl > 0) add('Kabinet island (' + isl + ' m\\') *', isl*rate.island.floor, isl*rate.island.ceil);\n    }\n    if (tgl.bs) {\n      var bsType = document.getElementById('pc-bs-type').value;\n      var bsH    = parseFloat(document.getElementById('pc-bs-tinggi').value);\n      var hf     = bsH \/ 0.6;\n      var bs     = BACKSPLASH[bsType];\n      add('Backsplash ' + bs.label + ' (' + bawah + ' m\\' \\xd7 ' + Math.round(bsH*100) + 'cm)', bawah*bs.floor*hf, bawah*bs.ceil*hf);\n    }\n\n    var hoodSelected = false;\n    ACC_GROUPS.forEach(function(g) {\n      var sel = document.getElementById('pc-acc-' + g.id);\n      var opt = sel.options[sel.selectedIndex];\n      var price = parseInt(opt.dataset.price) || 0;\n      if (price > 0) {\n        add(opt.textContent.split(' \\u2014 ')[0], price, price);\n        if (g.id === 'hood') hoodSelected = true;\n      }\n    });\n    if (hoodSelected) add('Stop Kontak Single (cooker hood, otomatis)', 275000, 275000);\n\n    ME_ITEMS.forEach(function(item) {\n      var el = document.getElementById('pc-me-' + item.id);\n      if (el && el.classList.contains('on')) {\n        var qty = parseInt(document.getElementById('pc-qty-' + item.id).value) || 1;\n        add(item.name + (qty > 1 ? ' \\xd7' + qty : ''), item.price*qty, item.price*qty);\n      }\n    });\n\n    \/\/ Render range\n    document.getElementById('pc-rrange').innerHTML =\n      '<span>' + fmtShort(floor) + '<\/span><span class=\"pc-sep\">\\u2014<\/span><span>' + fmtShort(ceil) + '<\/span>';\n\n    \/\/ Render breakdown\n    var bdHTML = '<div class=\"pc-bdtitle\">Rincian Estimasi<\/div>' +\n      rows.map(function(r) {\n        return '<div class=\"pc-bdrow\"><span>' + r.label + '<\/span><span class=\"pc-amt\">' +\n          (r.f === r.c ? fmt(r.f) : fmt(r.f) + ' \\u2013 ' + fmt(r.c)) + '<\/span><\/div>';\n      }).join('') +\n      '<div class=\"pc-bdtotal\"><span style=\"font-weight:500;color:#F5F2EC\">Total<\/span>' +\n      '<span class=\"pc-amt\">' + fmt(floor) + ' \\u2013 ' + fmt(ceil) + '<\/span><\/div>';\n    document.getElementById('pc-breakdown').innerHTML = bdHTML;\n\n    \/\/ WA link\n    var matLabel = mat === 'plywood' ? 'Plywood HPL' : 'PVC Board HPL';\n    var msg = encodeURIComponent(\n      'Halo Porte, saya ingin konsultasi kitchen set.\\n\\nEstimasi dari kalkulator:\\n- Kabinet bawah: ' + bawah + ' m\\'\\n- Material: ' + matLabel + '\\n- Estimasi harga: ' + fmt(floor) + ' \\u2013 ' + fmt(ceil) + '\\n\\nMohon info lebih lanjut.'\n    );\n    document.getElementById('pc-wa').href = 'https:\/\/wa.me\/' + WA_NUMBER + '?text=' + msg;\n\n    var panel = document.getElementById('pc-result');\n    panel.classList.add('on');\n    setTimeout(function() { panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }, 100);\n  };\n\n  window.pcReset = function() {\n    ['pc-bawah','pc-atas','pc-tinggi-area','pc-island','pc-material','pc-toptable','pc-bs-type','pc-bs-tinggi'].forEach(function(id) {\n      var el = document.getElementById(id);\n      if (el) el.value = el.tagName === 'SELECT' ? el.options[0].value : '';\n    });\n    ACC_GROUPS.forEach(function(g) {\n      var sel = document.getElementById('pc-acc-' + g.id);\n      if (sel) sel.selectedIndex = 0;\n    });\n    document.getElementById('pc-result').classList.remove('on');\n    document.getElementById('pc-err-bawah').classList.remove('on');\n    Object.keys(tgl).forEach(function(k) { if (tgl[k]) pcToggle(k); });\n    document.querySelectorAll('.pc-me-item').forEach(function(el) { el.classList.remove('on'); });\n    document.querySelectorAll('[id^=\"pc-qty-\"]').forEach(function(el) { el.value = 1; });\n    window.scrollTo({ top: 0, behavior: 'smooth' });\n  };\n\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":448,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-441","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/porte.id\/go\/wp-json\/wp\/v2\/pages\/441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/porte.id\/go\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/porte.id\/go\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/porte.id\/go\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/porte.id\/go\/wp-json\/wp\/v2\/comments?post=441"}],"version-history":[{"count":8,"href":"https:\/\/porte.id\/go\/wp-json\/wp\/v2\/pages\/441\/revisions"}],"predecessor-version":[{"id":450,"href":"https:\/\/porte.id\/go\/wp-json\/wp\/v2\/pages\/441\/revisions\/450"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/porte.id\/go\/wp-json\/wp\/v2\/media\/448"}],"wp:attachment":[{"href":"https:\/\/porte.id\/go\/wp-json\/wp\/v2\/media?parent=441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}