{"id":21,"date":"2026-01-26T15:20:39","date_gmt":"2026-01-26T15:20:39","guid":{"rendered":"https:\/\/madaratheme.com\/id\/?page_id=21"},"modified":"2026-01-26T15:20:40","modified_gmt":"2026-01-26T15:20:40","slug":"hubungi","status":"publish","type":"page","link":"https:\/\/madaratheme.com\/id\/hubungi\/","title":{"rendered":"Hubungi"},"content":{"rendered":"\n<p><strong><a href=\"https:\/\/madaratheme.com\/id\/\">MadaraTheme.com<\/a><\/strong> menyambut hangat seluruh pengguna smartphone Xiaomi. Kami ingin menyampaikan rasa terima kasih yang tulus kepada semua pengunjung yang menyukai <strong>Madara Theme MIUI<\/strong> yang indah ini.<\/p>\n\n\n\n<p>MadaraTheme.com adalah blog mikro yang berbagi detail dan tutorial lengkap agar Anda dapat memasang tema ini dengan cara terbaik dan optimal. Jika ada pertanyaan atau hal lain mengenai tema ini, jangan ragu untuk menghubungi kami.<\/p>\n\n\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n\n<div style=\"position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; background-color: #f2f2f7; background-image: radial-gradient(at 0% 0%, rgba(255,255,255,0.8) 0, transparent 50%), radial-gradient(at 50% 100%, rgba(200,200,255,0.2) 0, transparent 50%); background-size: cover;\"><\/div>\n\n<style>\n    \/* --- RESET --- *\/\n    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }\n    \n    .contact-wrapper {\n        font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        min-height: 100vh;\n        \/* Desktop: Breathing room *\/\n        padding: 60px 20px;\n    }\n\n    \/* --- PURE WHITE GLASS CARD --- *\/\n    .glass-card {\n        width: 100%;\n        max-width: 800px;\n        position: relative;\n        \n        \/* White Liquid Glass *\/\n        background: rgba(255, 255, 255, 0.75);\n        backdrop-filter: blur(25px);\n        -webkit-backdrop-filter: blur(25px);\n        border: 1px solid rgba(255, 255, 255, 0.8);\n        \n        border-radius: 24px;\n        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);\n        \n        \/* Performance *\/\n        transform: translateZ(0);\n    }\n\n    \/* --- FORM HEADER --- *\/\n    .form-header {\n        text-align: center;\n        padding: 40px 40px 20px;\n    }\n    .form-header h2 {\n        font-size: 30px; font-weight: 700; color: #000; margin: 0 0 8px;\n    }\n    .form-header p {\n        color: #666; font-size: 16px; margin: 0; font-weight: 500;\n    }\n\n    \/* --- INPUT AREA --- *\/\n    .form-body { padding: 0 40px 40px; }\n\n    .form-grid {\n        display: grid; grid-template-columns: 1fr 1fr; gap: 20px;\n    }\n    .full-col { grid-column: span 2; }\n    \n    .input-group { display: flex; flex-direction: column; }\n    \n    .label-text {\n        font-size: 12px; font-weight: 600; color: #444; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;\n    }\n\n    .glass-input {\n        width: 100%; padding: 16px;\n        \/* Very light glass for inputs *\/\n        background: rgba(255, 255, 255, 0.5);\n        border: 1px solid rgba(0, 0, 0, 0.1);\n        border-radius: 12px;\n        font-size: 16px; color: #000; font-family: 'Outfit', sans-serif;\n        transition: 0.2s;\n    }\n    .glass-input:focus {\n        background: #fff; border-color: #000; outline: none; box-shadow: 0 0 0 4px rgba(0,0,0,0.05);\n    }\n\n    \/* --- BUTTON (Clean Dark Style - No Red) --- *\/\n    .send-btn {\n        width: 100%; padding: 18px; margin-top: 25px;\n        background: #1c1c1e; \/* Apple Dark *\/\n        color: white; font-size: 16px; font-weight: 600;\n        border: none; border-radius: 12px; cursor: pointer;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n        transition: transform 0.2s, opacity 0.2s;\n    }\n    .send-btn:hover { transform: scale(1.01); opacity: 0.9; }\n\n    \/* --- INFO FOOTER --- *\/\n    .glass-footer {\n        background: rgba(255, 255, 255, 0.4);\n        border-top: 1px solid rgba(0, 0, 0, 0.05);\n        padding: 30px;\n        display: flex; justify-content: center; flex-wrap: wrap; gap: 40px;\n    }\n    .info-item { display: flex; flex-direction: column; align-items: center; text-align: center; }\n    .info-item svg { width: 22px; height: 22px; fill: #333; margin-bottom: 8px; }\n    .info-item h4 { font-size: 14px; margin: 5px 0; color: #000; font-weight: 700; }\n    .info-item p { font-size: 14px; margin: 0; color: #666; }\n\n    \/* --- ZERO TOLERANCE MOBILE APP VIEW --- *\/\n    @media (max-width: 768px) {\n        .contact-wrapper {\n            padding: 0 !important; \/* Zero spacing outside *\/\n            display: block;\n        }\n        \n        .glass-card {\n            border-radius: 0 !important; \/* Flat edges *\/\n            box-shadow: none !important;\n            border: none;\n            \/* High performance mobile glass *\/\n            background: rgba(255, 255, 255, 0.92);\n            backdrop-filter: blur(10px); \/* Lower blur for speed *\/\n            -webkit-backdrop-filter: blur(10px);\n            min-height: 100vh;\n        }\n\n        .form-header { padding: 50px 20px 20px; }\n        .form-body { padding: 0 20px 40px; }\n        .form-grid { grid-template-columns: 1fr; gap: 15px; }\n        .full-col { grid-column: span 1; }\n        .glass-input { background: rgba(240, 240, 245, 0.8); } \/* Slightly grey input for contrast *\/\n\n        \/* Footer Stack *\/\n        .glass-footer {\n            flex-direction: column; align-items: flex-start; gap: 15px; padding: 20px;\n            background: rgba(245, 245, 250, 0.5);\n        }\n        .info-item {\n            flex-direction: row; gap: 15px; width: 100%;\n            background: #fff; padding: 15px; border-radius: 12px;\n            border: 1px solid rgba(0,0,0,0.05);\n            box-shadow: 0 2px 5px rgba(0,0,0,0.02);\n        }\n        .info-item svg { margin-bottom: 0; }\n        .info-item div { text-align: left; }\n    }\n<\/style>\n\n<div class=\"contact-wrapper\">\n    <div class=\"glass-card\">\n        \n        <div class=\"form-header\">\n            <h2>Hubungi Kami<\/h2>\n            <p>Kami ingin mendengar dari Anda.<\/p>\n        <\/div>\n\n        <div class=\"form-body\">\n            <form action=\"https:\/\/formsubmit.co\/classytechstudio@gmail.com\" method=\"POST\">\n                <input type=\"hidden\" name=\"_subject\" value=\"New Contact Form Submission\">\n                <input type=\"hidden\" name=\"_captcha\" value=\"false\">\n                <input type=\"hidden\" name=\"_template\" value=\"table\">\n                \n                <div class=\"form-grid\">\n                    <div class=\"input-group\">\n                        <label class=\"label-text\">Your Name<\/label>\n                        <input type=\"text\" name=\"name\" class=\"glass-input\" placeholder=\"Full Name\" required>\n                    <\/div>\n\n                    <div class=\"input-group\">\n                        <label class=\"label-text\">Mobile Number<\/label>\n                        <input type=\"tel\" name=\"mobile\" class=\"glass-input\" placeholder=\"+977...\" required>\n                    <\/div>\n\n                    <div class=\"input-group full-col\">\n                        <label class=\"label-text\">Email Address<\/label>\n                        <input type=\"email\" name=\"email\" class=\"glass-input\" placeholder=\"name@example.com\" required>\n                    <\/div>\n\n                    <div class=\"input-group full-col\">\n                        <label class=\"label-text\">Your Message<\/label>\n                        <textarea name=\"message\" class=\"glass-input\" rows=\"5\" placeholder=\"Write your message here...\" required><\/textarea>\n                    <\/div>\n                <\/div>\n\n                <button type=\"submit\" class=\"send-btn\">Send Message<\/button>\n            <\/form>\n        <\/div>\n\n        <div class=\"glass-footer\">\n            <div class=\"info-item\">\n                <svg viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"\/><\/svg>\n                <div>\n                    <h4>Email<\/h4>\n                    <p>classytechstudio@gmail.com<\/p>\n                <\/div>\n            <\/div>\n            \n            <div class=\"info-item\">\n                <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"\/><\/svg>\n                <div>\n                    <h4>Location<\/h4>\n                    <p>Koshi, Nepal<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>MadaraTheme.com menyambut hangat seluruh pengguna smartphone Xiaomi. Kami ingin menyampaikan rasa terima kasih yang tulus kepada semua pengunjung yang menyukai Madara Theme MIUI yang indah ini. MadaraTheme.com adalah blog mikro yang berbagi detail dan tutorial lengkap agar Anda dapat memasang tema ini dengan cara terbaik dan optimal. Jika ada pertanyaan atau hal lain mengenai tema [&hellip;]<\/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-21","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/madaratheme.com\/id\/wp-json\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madaratheme.com\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/madaratheme.com\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/madaratheme.com\/id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/madaratheme.com\/id\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":1,"href":"https:\/\/madaratheme.com\/id\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":22,"href":"https:\/\/madaratheme.com\/id\/wp-json\/wp\/v2\/pages\/21\/revisions\/22"}],"wp:attachment":[{"href":"https:\/\/madaratheme.com\/id\/wp-json\/wp\/v2\/media?parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}