Konfirmasi Pembayaran \u2013 robimotor<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@300;400;500&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --orange: #E8660A;\n --orange-dark: #C4540A;\n --orange-glow: rgba(232,102,10,0.15);\n --bg: #f2f3f5;\n --white: #ffffff;\n --border: #e8e8e8;\n --text: #1a1a1a;\n --muted: #777;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n font-family: 'Barlow', sans-serif;\n background: var(--bg);\n color: var(--text);\n min-height: 100vh;\n overflow-x: hidden;\n }\n\n \/* HERO *\/\n .hero {\n position: relative;\n background: var(--white);\n padding: 60px 24px 50px;\n text-align: center;\n border-bottom: 1px solid var(--border);\n overflow: hidden;\n }\n .hero::before {\n content: '';\n position: absolute;\n top: -80px; left: 50%;\n transform: translateX(-50%);\n width: 500px; height: 300px;\n background: radial-gradient(ellipse, var(--orange-glow) 0%, transparent 70%);\n pointer-events: none;\n }\n .hero-label {\n display: inline-block;\n font-family: 'Barlow Condensed', sans-serif;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 4px;\n text-transform: uppercase;\n color: var(--orange);\n border: 1px solid rgba(232,102,10,0.3);\n padding: 4px 14px;\n border-radius: 2px;\n margin-bottom: 16px;\n animation: fadeUp 0.6s ease both;\n }\n .hero h1 {\n font-family: 'Barlow Condensed', sans-serif;\n font-size: clamp(38px, 9vw, 68px);\n font-weight: 800;\n line-height: 1;\n letter-spacing: -1px;\n text-transform: uppercase;\n animation: fadeUp 0.7s 0.1s ease both;\n }\n .hero h1 span { color: var(--orange); }\n .hero p {\n margin-top: 12px;\n font-size: 15px;\n color: var(--muted);\n font-weight: 300;\n animation: fadeUp 0.7s 0.2s ease both;\n }\n\n \/* LAYOUT *\/\n .container {\n max-width: 900px;\n margin: 0 auto;\n padding: 48px 20px 80px;\n }\n\n .grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 24px;\n }\n\n \/* CARD *\/\n .card {\n background: var(--white);\n border: 1px solid var(--border);\n border-radius: 6px;\n padding: 32px;\n position: relative;\n overflow: hidden;\n animation: fadeUp 0.7s ease both;\n box-shadow: 0 2px 12px rgba(0,0,0,0.06);\n }\n .card::before {\n content: '';\n position: absolute;\n top: 0; left: 0;\n width: 3px; height: 100%;\n background: var(--orange);\n border-radius: 6px 0 0 6px;\n }\n .card-title {\n font-family: 'Barlow Condensed', sans-serif;\n font-size: 20px;\n font-weight: 700;\n letter-spacing: 1px;\n text-transform: uppercase;\n color: var(--orange);\n margin-bottom: 24px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n \/* REKENING INFO *\/\n .rekening-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 14px;\n margin-bottom: 6px;\n }\n .rek-item {\n background: #f8f8f8;\n border: 1px solid #eeeeee;\n border-left: 3px solid var(--orange);\n border-radius: 4px;\n padding: 14px 16px;\n }\n .rek-item .bank {\n font-family: 'Barlow Condensed', sans-serif;\n font-size: 13px;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--orange);\n margin-bottom: 4px;\n }\n .rek-item .norek {\n font-size: 18px;\n font-weight: 700;\n color: var(--text);\n letter-spacing: 1px;\n margin-bottom: 2px;\n }\n .rek-item .atas-nama {\n font-size: 13px;\n color: var(--muted);\n }\n\n \/* FORM *\/\n .form-group { margin-bottom: 18px; }\n .form-group label {\n display: block;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--muted);\n margin-bottom: 8px;\n }\n .form-group input,\n .form-group select,\n .form-group textarea {\n width: 100%;\n background: #f8f8f8;\n border: 1px solid #ddd;\n border-radius: 4px;\n padding: 12px 16px;\n color: var(--text);\n font-family: 'Barlow', sans-serif;\n font-size: 15px;\n transition: border-color 0.2s, box-shadow 0.2s;\n outline: none;\n -webkit-appearance: none;\n }\n .form-group input:focus,\n .form-group select:focus,\n .form-group textarea:focus {\n border-color: var(--orange);\n box-shadow: 0 0 0 3px var(--orange-glow);\n background: #fff;\n }\n .form-group select option { background: #fff; }\n .form-group textarea { resize: vertical; min-height: 80px; }\n\n \/* Upload area *\/\n .upload-area {\n width: 100%;\n background: #f8f8f8;\n border: 2px dashed #ddd;\n border-radius: 4px;\n padding: 28px 16px;\n text-align: center;\n cursor: pointer;\n transition: border-color 0.2s, background 0.2s;\n position: relative;\n }\n .upload-area:hover {\n border-color: var(--orange);\n background: #fff8f4;\n }\n .upload-area input[type=\"file\"] {\n position: absolute;\n inset: 0;\n opacity: 0;\n cursor: pointer;\n width: 100%;\n height: 100%;\n padding: 0;\n border: none;\n background: none;\n }\n .upload-area input[type=\"file\"]:focus { box-shadow: none; }\n .upload-icon { color: var(--orange); margin-bottom: 8px; }\n .upload-text {\n font-size: 14px;\n color: var(--muted);\n pointer-events: none;\n }\n .upload-text strong { color: var(--orange); }\n .upload-preview {\n display: none;\n margin-top: 12px;\n font-size: 13px;\n color: var(--orange);\n font-weight: 600;\n }\n\n .form-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n }\n @media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }\n\n \/* NOMINAL HELPER *\/\n .nominal-display {\n margin-top: 6px;\n font-size: 13px;\n color: var(--orange);\n font-weight: 600;\n min-height: 20px;\n }\n\n \/* SUBMIT *\/\n .submit-btn {\n width: 100%;\n background: var(--orange);\n color: #fff;\n border: none;\n border-radius: 4px;\n padding: 15px;\n font-family: 'Barlow Condensed', sans-serif;\n font-size: 17px;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n cursor: pointer;\n transition: background 0.2s, transform 0.15s;\n margin-top: 8px;\n }\n .submit-btn:hover { background: var(--orange-dark); transform: translateY(-2px); }\n .submit-btn:active { transform: translateY(0); }\n\n \/* SUCCESS *\/\n .success-msg {\n display: none;\n background: rgba(37,211,102,0.08);\n border: 1px solid rgba(37,211,102,0.3);\n border-radius: 4px;\n padding: 16px 18px;\n color: #1a9e4a;\n font-size: 14px;\n font-weight: 500;\n margin-top: 16px;\n text-align: center;\n line-height: 1.6;\n }\n\n \/* NOTE *\/\n .note {\n background: #fff8f4;\n border: 1px solid rgba(232,102,10,0.2);\n border-radius: 4px;\n padding: 14px 16px;\n font-size: 13px;\n color: #7a4010;\n line-height: 1.6;\n margin-top: 6px;\n }\n .note strong { color: var(--orange); }\n\n \/* ANIMATIONS *\/\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .card:nth-child(1) { animation-delay: 0.1s; }\n .card:nth-child(2) { animation-delay: 0.2s; }\n .card:nth-child(3) { animation-delay: 0.3s; }\n<\/style>\n<\/head>\n<body>\n\n\n<div class=\"hero\">\n <div class=\"hero-label\">Pembayaran<\/div>\n <h1>Konfirmasi <span>robimotor<\/span><\/h1>\n <p>Isi form di bawah setelah melakukan transfer pembayaran<\/p>\n<\/div>\n\n<div class=\"container\">\n <div class=\"grid\">\n\n \n <div class=\"card\">\n <div class=\"card-title\">\n <svg width=\"18\" height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"2\"\/><line x1=\"2\" y1=\"10\" x2=\"22\" y2=\"10\"\/><\/svg>\n Rekening Tujuan Transfer\n <\/div>\n <div class=\"rekening-grid\">\n <div class=\"rek-item\">\n <div class=\"bank\">BCA<\/div>\n <div class=\"norek\">2702080062<\/div>\n <div class=\"atas-nama\">a.n. Robi Alamsyah<\/div>\n <\/div>\n <div class=\"rek-item\">\n <div class=\"bank\">Mandiri<\/div>\n <div class=\"norek\">1180007031957<\/div>\n <div class=\"atas-nama\">a.n. Robi Alamsyah<\/div>\n <\/div>\n <\/div>\n <div class=\"note\" style=\"margin-top:16px\">\n <strong>⚠️ Perhatian:<\/strong> Pastikan jumlah transfer sesuai dengan total tagihan order kamu. Konfirmasi yang tidak sesuai akan memperlambat proses verifikasi.\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"card-title\">\n <svg width=\"18\" height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 11l3 3L22 4\"\/><path d=\"M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11\"\/><\/svg>\n Form Konfirmasi Pembayaran\n <\/div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Nama Lengkap<\/label>\n <input type=\"text\" id=\"nama\" placeholder=\"Nama sesuai pemesan\" \/>\n <\/div>\n <div class=\"form-group\">\n <label>Nomor Order \/ Invoice<\/label>\n <input type=\"text\" id=\"invoice\" placeholder=\"Contoh: RM-20260001\" \/>\n <\/div>\n <\/div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Nama Rekening Pengirim<\/label>\n <input type=\"text\" id=\"namarek\" placeholder=\"Nama pemilik rekening\" \/>\n <\/div>\n <div class=\"form-group\">\n <label>Bank Tujuan Transfer<\/label>\n <select id=\"bank\">\n <option value=\"\">Pilih bank…<\/option>\n <option>BCA<\/option>\n <option>Mandiri<\/option>\n <option>BRI<\/option>\n <option>BNI<\/option>\n <option>BSI<\/option>\n <option>DANA<\/option>\n <option>OVO<\/option>\n <option>GoPay<\/option>\n <option>Lainnya<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Jumlah Transfer (Rp)<\/label>\n <input type=\"text\" id=\"jumlah\" placeholder=\"Contoh: 500000\" oninput=\"formatNominal(this)\" \/>\n <div class=\"nominal-display\" id=\"nominalDisplay\"><\/div>\n <\/div>\n <div class=\"form-group\">\n <label>Tanggal Transfer<\/label>\n <input type=\"date\" id=\"tanggal\" \/>\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label>Bukti Transfer<\/label>\n <div class=\"upload-area\" id=\"uploadArea\">\n <input type=\"file\" id=\"bukti\" accept=\"image\/*,.pdf\" onchange=\"previewFile(this)\" \/>\n <div class=\"upload-icon\">\n <svg width=\"32\" height=\"32\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4\"\/><polyline points=\"17 8 12 3 7 8\"\/><line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"\/><\/svg>\n <\/div>\n <div class=\"upload-text\"><strong>Klik untuk upload<\/strong> atau drag & drop<br>Format: JPG, PNG, PDF (maks. 5MB)<\/div>\n <div class=\"upload-preview\" id=\"uploadPreview\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label>Catatan (opsional)<\/label>\n <textarea id=\"catatan\" placeholder=\"Tambahkan catatan jika diperlukan...\"><\/textarea>\n <\/div>\n\n <button class=\"submit-btn\" onclick=\"kirimKonfirmasi()\">Kirim Konfirmasi \u2192<\/button>\n <div class=\"success-msg\" id=\"successMsg\">\n \u2713 Konfirmasi berhasil dikirim!<br>\n Tim kami akan memverifikasi pembayaran kamu dalam <strong>1\u00d724 jam<\/strong>.<br>\n Terima kasih telah berbelanja di <strong>robimotor<\/strong>.\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"card-title\">\n <svg width=\"18\" height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n Butuh Bantuan?\n <\/div>\n <p style=\"font-size:14px; color:var(--muted); margin-bottom:16px; line-height:1.7\">\n Jika ada kendala dalam konfirmasi pembayaran, hubungi kami langsung melalui WhatsApp atau email di bawah ini.\n <\/p>\n <div style=\"display:grid; grid-template-columns:1fr 1fr; gap:14px;\">\n <div style=\"background:#f8f8f8; border:1px solid #eee; border-radius:4px; padding:14px;\">\n <div style=\"font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:6px;\">WhatsApp<\/div>\n <div style=\"font-size:15px; font-weight:500;\"><a href=\"tel:+6287881861942\" style=\"color:var(--text); text-decoration:none;\">+62 878-8186-1942<\/a><\/div>\n <\/div>\n <div style=\"background:#f8f8f8; border:1px solid #eee; border-radius:4px; padding:14px;\">\n <div style=\"font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:6px;\">Email<\/div>\n <div style=\"font-size:15px; font-weight:500;\"><a href=\"mailto:admin@robimotor.com\" style=\"color:var(--text); text-decoration:none;\">admin@robimotor.com<\/a><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/div>\n\n<script>\n\/\/ Format nominal ke Rupiah\nfunction formatNominal(input) {\n let raw = input.value.replace(\/\\D\/g, '');\n input.value = raw.replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, '.');\n const num = parseInt(raw);\n const display = document.getElementById('nominalDisplay');\n display.textContent = num > 0\n ? 'Rp ' + num.toLocaleString('id-ID')\n : '';\n}\n\n\/\/ Preview nama file\nfunction previewFile(input) {\n const preview = document.getElementById('uploadPreview');\n if (input.files && input.files[0]) {\n preview.style.display = 'block';\n preview.textContent = '\u2713 ' + input.files[0].name;\n }\n}\n\n\/\/ Kirim konfirmasi\nfunction kirimKonfirmasi() {\n const nama = document.getElementById('nama').value.trim();\n const invoice = document.getElementById('invoice').value.trim();\n const namarek = document.getElementById('namarek').value.trim();\n const bank = document.getElementById('bank').value;\n const jumlah = document.getElementById('jumlah').value.trim();\n const tanggal = document.getElementById('tanggal').value;\n const catatan = document.getElementById('catatan').value.trim();\n\n if (!nama || !invoice || !namarek || !bank || !jumlah || !tanggal) {\n alert('Mohon lengkapi semua field yang wajib diisi.');\n return;\n }\n\n \/\/ Format tanggal\n const tgl = new Date(tanggal);\n const tglFormatted = tgl.toLocaleDateString('id-ID', {day:'2-digit', month:'long', year:'numeric'});\n\n \/\/ Kirim via WhatsApp\n const waText = encodeURIComponent(\n `✅ *KONFIRMASI PEMBAYARAN - robimotor*\\n\\n` +\n `👤 *Nama:* ${nama}\\n` +\n `🧾 *No. Order\/Invoice:* ${invoice}\\n` +\n `🏦 *Bank Tujuan:* ${bank}\\n` +\n `👛 *Nama Rekening:* ${namarek}\\n` +\n `💰 *Jumlah Transfer:* Rp ${jumlah}\\n` +\n `📅 *Tanggal Transfer:* ${tglFormatted}\\n` +\n (catatan ? `📝 *Catatan:* ${catatan}\\n` : '') +\n `\\n_Bukti transfer terlampir_`\n );\n window.open(`https:\/\/wa.me\/6287881861942?text=${waText}`, '_blank');\n\n \/\/ Kirim via Email (mailto)\n const emailSubject = encodeURIComponent(`Konfirmasi Pembayaran - ${invoice}`);\n const emailBody = encodeURIComponent(\n `KONFIRMASI PEMBAYARAN - robimotor\\n\\n` +\n `Nama: ${nama}\\n` +\n `No. Order\/Invoice: ${invoice}\\n` +\n `Bank Tujuan: ${bank}\\n` +\n `Nama Rekening: ${namarek}\\n` +\n `Jumlah Transfer: Rp ${jumlah}\\n` +\n `Tanggal Transfer: ${tglFormatted}\\n` +\n (catatan ? `Catatan: ${catatan}\\n` : '') +\n `\\n(Lampirkan bukti transfer pada email ini)`\n );\n setTimeout(() => {\n window.location.href = `mailto:admin@robimotor.com?subject=${emailSubject}&body=${emailBody}`;\n }, 1000);\n\n \/\/ Tampilkan sukses\n document.getElementById('successMsg').style.display = 'block';\n window.scrollTo({ top: document.getElementById('successMsg').offsetTop - 20, behavior: 'smooth' });\n}\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Konfirmasi Pembayaran \u2013 robimotor Pembayaran Konfirmasi robimotor Isi form di bawah setelah melakukan transfer pembayaran Rekening Tujuan Transfer BCA 2702080062<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-427","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/robimotor.com\/index.php?rest_route=\/wp\/v2\/pages\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/robimotor.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/robimotor.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/robimotor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/robimotor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=427"}],"version-history":[{"count":1,"href":"https:\/\/robimotor.com\/index.php?rest_route=\/wp\/v2\/pages\/427\/revisions"}],"predecessor-version":[{"id":428,"href":"https:\/\/robimotor.com\/index.php?rest_route=\/wp\/v2\/pages\/427\/revisions\/428"}],"wp:attachment":[{"href":"https:\/\/robimotor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":427,"date":"2026-05-31T04:06:44","date_gmt":"2026-05-31T04:06:44","guid":{"rendered":"https:\/\/robimotor.com\/?page_id=427"},"modified":"2026-05-31T04:06:45","modified_gmt":"2026-05-31T04:06:45","slug":"konfirmasi-pembayaran-2","status":"publish","type":"page","link":"https:\/\/robimotor.com\/?page_id=427","title":{"rendered":"Konfirmasi Pembayaran"},"content":{"rendered":"\n\n\n\n\n\nKonfirmasi Pembayaran \u2013 robimotor<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@300;400;500&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --orange: #E8660A;\n --orange-dark: #C4540A;\n --orange-glow: rgba(232,102,10,0.15);\n --bg: #f2f3f5;\n --white: #ffffff;\n --border: #e8e8e8;\n --text: #1a1a1a;\n --muted: #777;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n font-family: 'Barlow', sans-serif;\n background: var(--bg);\n color: var(--text);\n min-height: 100vh;\n overflow-x: hidden;\n }\n\n \/* HERO *\/\n .hero {\n position: relative;\n background: var(--white);\n padding: 60px 24px 50px;\n text-align: center;\n border-bottom: 1px solid var(--border);\n overflow: hidden;\n }\n .hero::before {\n content: '';\n position: absolute;\n top: -80px; left: 50%;\n transform: translateX(-50%);\n width: 500px; height: 300px;\n background: radial-gradient(ellipse, var(--orange-glow) 0%, transparent 70%);\n pointer-events: none;\n }\n .hero-label {\n display: inline-block;\n font-family: 'Barlow Condensed', sans-serif;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 4px;\n text-transform: uppercase;\n color: var(--orange);\n border: 1px solid rgba(232,102,10,0.3);\n padding: 4px 14px;\n border-radius: 2px;\n margin-bottom: 16px;\n animation: fadeUp 0.6s ease both;\n }\n .hero h1 {\n font-family: 'Barlow Condensed', sans-serif;\n font-size: clamp(38px, 9vw, 68px);\n font-weight: 800;\n line-height: 1;\n letter-spacing: -1px;\n text-transform: uppercase;\n animation: fadeUp 0.7s 0.1s ease both;\n }\n .hero h1 span { color: var(--orange); }\n .hero p {\n margin-top: 12px;\n font-size: 15px;\n color: var(--muted);\n font-weight: 300;\n animation: fadeUp 0.7s 0.2s ease both;\n }\n\n \/* LAYOUT *\/\n .container {\n max-width: 900px;\n margin: 0 auto;\n padding: 48px 20px 80px;\n }\n\n .grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 24px;\n }\n\n \/* CARD *\/\n .card {\n background: var(--white);\n border: 1px solid var(--border);\n border-radius: 6px;\n padding: 32px;\n position: relative;\n overflow: hidden;\n animation: fadeUp 0.7s ease both;\n box-shadow: 0 2px 12px rgba(0,0,0,0.06);\n }\n .card::before {\n content: '';\n position: absolute;\n top: 0; left: 0;\n width: 3px; height: 100%;\n background: var(--orange);\n border-radius: 6px 0 0 6px;\n }\n .card-title {\n font-family: 'Barlow Condensed', sans-serif;\n font-size: 20px;\n font-weight: 700;\n letter-spacing: 1px;\n text-transform: uppercase;\n color: var(--orange);\n margin-bottom: 24px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n \/* REKENING INFO *\/\n .rekening-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 14px;\n margin-bottom: 6px;\n }\n .rek-item {\n background: #f8f8f8;\n border: 1px solid #eeeeee;\n border-left: 3px solid var(--orange);\n border-radius: 4px;\n padding: 14px 16px;\n }\n .rek-item .bank {\n font-family: 'Barlow Condensed', sans-serif;\n font-size: 13px;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--orange);\n margin-bottom: 4px;\n }\n .rek-item .norek {\n font-size: 18px;\n font-weight: 700;\n color: var(--text);\n letter-spacing: 1px;\n margin-bottom: 2px;\n }\n .rek-item .atas-nama {\n font-size: 13px;\n color: var(--muted);\n }\n\n \/* FORM *\/\n .form-group { margin-bottom: 18px; }\n .form-group label {\n display: block;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--muted);\n margin-bottom: 8px;\n }\n .form-group input,\n .form-group select,\n .form-group textarea {\n width: 100%;\n background: #f8f8f8;\n border: 1px solid #ddd;\n border-radius: 4px;\n padding: 12px 16px;\n color: var(--text);\n font-family: 'Barlow', sans-serif;\n font-size: 15px;\n transition: border-color 0.2s, box-shadow 0.2s;\n outline: none;\n -webkit-appearance: none;\n }\n .form-group input:focus,\n .form-group select:focus,\n .form-group textarea:focus {\n border-color: var(--orange);\n box-shadow: 0 0 0 3px var(--orange-glow);\n background: #fff;\n }\n .form-group select option { background: #fff; }\n .form-group textarea { resize: vertical; min-height: 80px; }\n\n \/* Upload area *\/\n .upload-area {\n width: 100%;\n background: #f8f8f8;\n border: 2px dashed #ddd;\n border-radius: 4px;\n padding: 28px 16px;\n text-align: center;\n cursor: pointer;\n transition: border-color 0.2s, background 0.2s;\n position: relative;\n }\n .upload-area:hover {\n border-color: var(--orange);\n background: #fff8f4;\n }\n .upload-area input[type=\"file\"] {\n position: absolute;\n inset: 0;\n opacity: 0;\n cursor: pointer;\n width: 100%;\n height: 100%;\n padding: 0;\n border: none;\n background: none;\n }\n .upload-area input[type=\"file\"]:focus { box-shadow: none; }\n .upload-icon { color: var(--orange); margin-bottom: 8px; }\n .upload-text {\n font-size: 14px;\n color: var(--muted);\n pointer-events: none;\n }\n .upload-text strong { color: var(--orange); }\n .upload-preview {\n display: none;\n margin-top: 12px;\n font-size: 13px;\n color: var(--orange);\n font-weight: 600;\n }\n\n .form-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n }\n @media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }\n\n \/* NOMINAL HELPER *\/\n .nominal-display {\n margin-top: 6px;\n font-size: 13px;\n color: var(--orange);\n font-weight: 600;\n min-height: 20px;\n }\n\n \/* SUBMIT *\/\n .submit-btn {\n width: 100%;\n background: var(--orange);\n color: #fff;\n border: none;\n border-radius: 4px;\n padding: 15px;\n font-family: 'Barlow Condensed', sans-serif;\n font-size: 17px;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n cursor: pointer;\n transition: background 0.2s, transform 0.15s;\n margin-top: 8px;\n }\n .submit-btn:hover { background: var(--orange-dark); transform: translateY(-2px); }\n .submit-btn:active { transform: translateY(0); }\n\n \/* SUCCESS *\/\n .success-msg {\n display: none;\n background: rgba(37,211,102,0.08);\n border: 1px solid rgba(37,211,102,0.3);\n border-radius: 4px;\n padding: 16px 18px;\n color: #1a9e4a;\n font-size: 14px;\n font-weight: 500;\n margin-top: 16px;\n text-align: center;\n line-height: 1.6;\n }\n\n \/* NOTE *\/\n .note {\n background: #fff8f4;\n border: 1px solid rgba(232,102,10,0.2);\n border-radius: 4px;\n padding: 14px 16px;\n font-size: 13px;\n color: #7a4010;\n line-height: 1.6;\n margin-top: 6px;\n }\n .note strong { color: var(--orange); }\n\n \/* ANIMATIONS *\/\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .card:nth-child(1) { animation-delay: 0.1s; }\n .card:nth-child(2) { animation-delay: 0.2s; }\n .card:nth-child(3) { animation-delay: 0.3s; }\n<\/style>\n<\/head>\n<body>\n\n\n<div class=\"hero\">\n <div class=\"hero-label\">Pembayaran<\/div>\n <h1>Konfirmasi <span>robimotor<\/span><\/h1>\n <p>Isi form di bawah setelah melakukan transfer pembayaran<\/p>\n<\/div>\n\n<div class=\"container\">\n <div class=\"grid\">\n\n \n <div class=\"card\">\n <div class=\"card-title\">\n <svg width=\"18\" height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"2\"\/><line x1=\"2\" y1=\"10\" x2=\"22\" y2=\"10\"\/><\/svg>\n Rekening Tujuan Transfer\n <\/div>\n <div class=\"rekening-grid\">\n <div class=\"rek-item\">\n <div class=\"bank\">BCA<\/div>\n <div class=\"norek\">2702080062<\/div>\n <div class=\"atas-nama\">a.n. Robi Alamsyah<\/div>\n <\/div>\n <div class=\"rek-item\">\n <div class=\"bank\">Mandiri<\/div>\n <div class=\"norek\">1180007031957<\/div>\n <div class=\"atas-nama\">a.n. Robi Alamsyah<\/div>\n <\/div>\n <\/div>\n <div class=\"note\" style=\"margin-top:16px\">\n <strong>⚠️ Perhatian:<\/strong> Pastikan jumlah transfer sesuai dengan total tagihan order kamu. Konfirmasi yang tidak sesuai akan memperlambat proses verifikasi.\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"card-title\">\n <svg width=\"18\" height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 11l3 3L22 4\"\/><path d=\"M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11\"\/><\/svg>\n Form Konfirmasi Pembayaran\n <\/div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Nama Lengkap<\/label>\n <input type=\"text\" id=\"nama\" placeholder=\"Nama sesuai pemesan\" \/>\n <\/div>\n <div class=\"form-group\">\n <label>Nomor Order \/ Invoice<\/label>\n <input type=\"text\" id=\"invoice\" placeholder=\"Contoh: RM-20260001\" \/>\n <\/div>\n <\/div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Nama Rekening Pengirim<\/label>\n <input type=\"text\" id=\"namarek\" placeholder=\"Nama pemilik rekening\" \/>\n <\/div>\n <div class=\"form-group\">\n <label>Bank Tujuan Transfer<\/label>\n <select id=\"bank\">\n <option value=\"\">Pilih bank…<\/option>\n <option>BCA<\/option>\n <option>Mandiri<\/option>\n <option>BRI<\/option>\n <option>BNI<\/option>\n <option>BSI<\/option>\n <option>DANA<\/option>\n <option>OVO<\/option>\n <option>GoPay<\/option>\n <option>Lainnya<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Jumlah Transfer (Rp)<\/label>\n <input type=\"text\" id=\"jumlah\" placeholder=\"Contoh: 500000\" oninput=\"formatNominal(this)\" \/>\n <div class=\"nominal-display\" id=\"nominalDisplay\"><\/div>\n <\/div>\n <div class=\"form-group\">\n <label>Tanggal Transfer<\/label>\n <input type=\"date\" id=\"tanggal\" \/>\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label>Bukti Transfer<\/label>\n <div class=\"upload-area\" id=\"uploadArea\">\n <input type=\"file\" id=\"bukti\" accept=\"image\/*,.pdf\" onchange=\"previewFile(this)\" \/>\n <div class=\"upload-icon\">\n <svg width=\"32\" height=\"32\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4\"\/><polyline points=\"17 8 12 3 7 8\"\/><line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"\/><\/svg>\n <\/div>\n <div class=\"upload-text\"><strong>Klik untuk upload<\/strong> atau drag & drop<br>Format: JPG, PNG, PDF (maks. 5MB)<\/div>\n <div class=\"upload-preview\" id=\"uploadPreview\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label>Catatan (opsional)<\/label>\n <textarea id=\"catatan\" placeholder=\"Tambahkan catatan jika diperlukan...\"><\/textarea>\n <\/div>\n\n <button class=\"submit-btn\" onclick=\"kirimKonfirmasi()\">Kirim Konfirmasi \u2192<\/button>\n <div class=\"success-msg\" id=\"successMsg\">\n \u2713 Konfirmasi berhasil dikirim!<br>\n Tim kami akan memverifikasi pembayaran kamu dalam <strong>1\u00d724 jam<\/strong>.<br>\n Terima kasih telah berbelanja di <strong>robimotor<\/strong>.\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"card-title\">\n <svg width=\"18\" height=\"18\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n Butuh Bantuan?\n <\/div>\n <p style=\"font-size:14px; color:var(--muted); margin-bottom:16px; line-height:1.7\">\n Jika ada kendala dalam konfirmasi pembayaran, hubungi kami langsung melalui WhatsApp atau email di bawah ini.\n <\/p>\n <div style=\"display:grid; grid-template-columns:1fr 1fr; gap:14px;\">\n <div style=\"background:#f8f8f8; border:1px solid #eee; border-radius:4px; padding:14px;\">\n <div style=\"font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:6px;\">WhatsApp<\/div>\n <div style=\"font-size:15px; font-weight:500;\"><a href=\"tel:+6287881861942\" style=\"color:var(--text); text-decoration:none;\">+62 878-8186-1942<\/a><\/div>\n <\/div>\n <div style=\"background:#f8f8f8; border:1px solid #eee; border-radius:4px; padding:14px;\">\n <div style=\"font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:6px;\">Email<\/div>\n <div style=\"font-size:15px; font-weight:500;\"><a href=\"mailto:admin@robimotor.com\" style=\"color:var(--text); text-decoration:none;\">admin@robimotor.com<\/a><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/div>\n\n<script>\n\/\/ Format nominal ke Rupiah\nfunction formatNominal(input) {\n let raw = input.value.replace(\/\\D\/g, '');\n input.value = raw.replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, '.');\n const num = parseInt(raw);\n const display = document.getElementById('nominalDisplay');\n display.textContent = num > 0\n ? 'Rp ' + num.toLocaleString('id-ID')\n : '';\n}\n\n\/\/ Preview nama file\nfunction previewFile(input) {\n const preview = document.getElementById('uploadPreview');\n if (input.files && input.files[0]) {\n preview.style.display = 'block';\n preview.textContent = '\u2713 ' + input.files[0].name;\n }\n}\n\n\/\/ Kirim konfirmasi\nfunction kirimKonfirmasi() {\n const nama = document.getElementById('nama').value.trim();\n const invoice = document.getElementById('invoice').value.trim();\n const namarek = document.getElementById('namarek').value.trim();\n const bank = document.getElementById('bank').value;\n const jumlah = document.getElementById('jumlah').value.trim();\n const tanggal = document.getElementById('tanggal').value;\n const catatan = document.getElementById('catatan').value.trim();\n\n if (!nama || !invoice || !namarek || !bank || !jumlah || !tanggal) {\n alert('Mohon lengkapi semua field yang wajib diisi.');\n return;\n }\n\n \/\/ Format tanggal\n const tgl = new Date(tanggal);\n const tglFormatted = tgl.toLocaleDateString('id-ID', {day:'2-digit', month:'long', year:'numeric'});\n\n \/\/ Kirim via WhatsApp\n const waText = encodeURIComponent(\n `✅ *KONFIRMASI PEMBAYARAN - robimotor*\\n\\n` +\n `👤 *Nama:* ${nama}\\n` +\n `🧾 *No. Order\/Invoice:* ${invoice}\\n` +\n `🏦 *Bank Tujuan:* ${bank}\\n` +\n `👛 *Nama Rekening:* ${namarek}\\n` +\n `💰 *Jumlah Transfer:* Rp ${jumlah}\\n` +\n `📅 *Tanggal Transfer:* ${tglFormatted}\\n` +\n (catatan ? `📝 *Catatan:* ${catatan}\\n` : '') +\n `\\n_Bukti transfer terlampir_`\n );\n window.open(`https:\/\/wa.me\/6287881861942?text=${waText}`, '_blank');\n\n \/\/ Kirim via Email (mailto)\n const emailSubject = encodeURIComponent(`Konfirmasi Pembayaran - ${invoice}`);\n const emailBody = encodeURIComponent(\n `KONFIRMASI PEMBAYARAN - robimotor\\n\\n` +\n `Nama: ${nama}\\n` +\n `No. Order\/Invoice: ${invoice}\\n` +\n `Bank Tujuan: ${bank}\\n` +\n `Nama Rekening: ${namarek}\\n` +\n `Jumlah Transfer: Rp ${jumlah}\\n` +\n `Tanggal Transfer: ${tglFormatted}\\n` +\n (catatan ? `Catatan: ${catatan}\\n` : '') +\n `\\n(Lampirkan bukti transfer pada email ini)`\n );\n setTimeout(() => {\n window.location.href = `mailto:admin@robimotor.com?subject=${emailSubject}&body=${emailBody}`;\n }, 1000);\n\n \/\/ Tampilkan sukses\n document.getElementById('successMsg').style.display = 'block';\n window.scrollTo({ top: document.getElementById('successMsg').offsetTop - 20, behavior: 'smooth' });\n}\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Konfirmasi Pembayaran \u2013 robimotor Pembayaran Konfirmasi robimotor Isi form di bawah setelah melakukan transfer pembayaran Rekening Tujuan Transfer BCA 2702080062<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-427","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/robimotor.com\/index.php?rest_route=\/wp\/v2\/pages\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/robimotor.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/robimotor.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/robimotor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/robimotor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=427"}],"version-history":[{"count":1,"href":"https:\/\/robimotor.com\/index.php?rest_route=\/wp\/v2\/pages\/427\/revisions"}],"predecessor-version":[{"id":428,"href":"https:\/\/robimotor.com\/index.php?rest_route=\/wp\/v2\/pages\/427\/revisions\/428"}],"wp:attachment":[{"href":"https:\/\/robimotor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}