{"id":20643,"date":"2026-09-01T10:29:00","date_gmt":"2026-09-01T03:29:00","guid":{"rendered":"https:\/\/lindungihutan.com\/blog\/?page_id=20643"},"modified":"2026-10-07T12:47:18","modified_gmt":"2026-10-07T05:47:18","slug":"campaigner-registration-form-lindungihutan","status":"publish","type":"page","link":"https:\/\/lindungihutan.com\/blog\/campaigner-registration-form-lindungihutan\/","title":{"rendered":"Campaigner Registration Form"},"content":{"rendered":"\n<style>\n#lhCampaigner{\n    \/* Main colors \u2014 LindungiHutan brand guideline: Castleton Green, White, Black *\/\n    --forest-deep:#00382E;\n    --forest:#005E4E;\n    --forest-tint:#2D7D6E;\n    --paper:#FFFFFF;\n    --cream:#F5F6F5;\n    --ink:#000000;\n    --ink-soft:#54605A;\n    --line:#DFE3E1;\n    \/* Secondary colors \u2014 used sparingly (~30%), never for body text *\/\n    --accent:#F06019;   \/* Persimmon orange \u2014 progress, highlights *\/\n    --danger:#F53855;   \/* Folly red \u2014 errors only *\/\n    --info:#2980C3;     \/* Steel blue \u2014 links *\/\n    --radius:16px;\n  }\n  #lhCampaigner, #lhCampaigner *{box-sizing:border-box;}\n  #lhCampaigner{\n    margin:0;\n    background:transparent;\n    font-family:inherit;\n    color:var(--ink);\n    padding:0;\n  }\n  #lhCampaigner .lh-wrap{\n    max-width:620px;\n    margin:0 auto;\n    background:var(--paper);\n    border-radius:var(--radius);\n    overflow:hidden;\n    box-shadow:0 1px 3px rgba(23,58,43,0.08), 0 12px 32px rgba(23,58,43,0.10);\n    border:1px solid var(--line);\n  }\n\n  \/* ---- Header ---- *\/\n  #lhCampaigner .lh-header{\n    position:relative;\n    background:\n      radial-gradient(120% 140% at 100% 0%, var(--forest-tint) 0%, var(--forest) 55%, var(--forest-deep) 100%);\n    color:#FFFFFF;\n    padding:28px 28px 26px;\n    overflow:hidden;\n  }\n  #lhCampaigner .lh-header::before{\n    content:\"\";\n    position:absolute;\n    inset:0;\n    background-image:\n      radial-gradient(circle at 18% 120%, rgba(255,255,255,0.10), transparent 55%),\n      radial-gradient(circle at 100% -10%, rgba(255,255,255,0.10), transparent 45%);\n    pointer-events:none;\n  }\n  #lhCampaigner .lh-header-deco{\n    position:absolute;\n    top:-20px;\n    right:-30px;\n    width:220px;\n    height:220px;\n    pointer-events:none;\n  }\n  #lhCampaigner .lh-brandrow{\n    display:flex;\n    align-items:center;\n    justify-content:space-between;\n    gap:16px;\n    position:relative;\n    z-index:1;\n  }\n  #lhCampaigner .lh-mark{\n    display:flex;\n    align-items:center;\n    gap:8px;\n  }\n  #lhCampaigner .lh-logo-chip{\n    display:inline-flex;\n    align-items:center;\n    background:#FFFFFF;\n    border-radius:10px;\n    padding:7px 12px;\n    box-shadow:0 2px 8px rgba(0,0,0,0.12);\n  }\n  #lhCampaigner .lh-logo-chip img{height:20px;width:auto;display:block;}\n  #lhCampaigner .lh-eyebrow{\n    position:relative;\n    z-index:1;\n    display:inline-block;\n    font-family:Arial,Helvetica,sans-serif;\n    font-weight:600;\n    font-size:11.5px;\n    letter-spacing:0.08em;\n    text-transform:uppercase;\n    color:#FFFFFF;\n    background:rgba(255,255,255,0.16);\n    border:1px solid rgba(255,255,255,0.28);\n    border-radius:999px;\n    padding:5px 12px;\n    margin-top:18px;\n  }\n\n  #lhCampaigner .lh-progress{\n    position:relative;\n    width:46px;\n    height:46px;\n    flex-shrink:0;\n  }\n  #lhCampaigner .lh-progress svg{width:46px;height:46px;transform:rotate(-90deg);}\n  #lhCampaigner .lh-progress circle{fill:none;stroke-width:4;}\n  #lhCampaigner .lh-progress .track{stroke:rgba(255,255,255,0.18);}\n  #lhCampaigner .lh-progress .fill{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset 0.35s ease;}\n  #lhCampaigner .lh-progress-label{\n    position:absolute;inset:0;\n    display:flex;align-items:center;justify-content:center;\n    font-size:11px;font-weight:700;color:#F4F8F4;\n  }\n\n  #lhCampaigner .lh-header h1{\n    font-family:Arial,Helvetica,sans-serif;\n    font-weight:700;\n    font-size:25px;\n    line-height:1.3;\n    margin:10px 0 8px;\n    position:relative;\n    z-index:1;\n    max-width:30ch;\n  }\n  #lhCampaigner .lh-header p{\n    margin:0 0 16px;\n    font-size:14.5px;\n    line-height:1.6;\n    color:rgba(255,255,255,0.88);\n    max-width:44ch;\n    position:relative;\n    z-index:1;\n  }\n  #lhCampaigner .lh-benefits{\n    display:flex;\n    flex-wrap:wrap;\n    gap:8px;\n    position:relative;\n    z-index:1;\n  }\n  #lhCampaigner .lh-benefit{\n    font-size:12px;\n    font-weight:600;\n    color:#FFFFFF;\n    background:rgba(255,255,255,0.12);\n    border:1px solid rgba(255,255,255,0.20);\n    border-radius:999px;\n    padding:6px 12px;\n    white-space:nowrap;\n  }\n\n  \/* ---- Form body ---- *\/\n  #lhCampaigner form{padding:26px 28px 30px;}\n  #lhCampaigner .lh-field{margin-bottom:20px;}\n  #lhCampaigner .lh-field label{\n    display:block;\n    font-family:Arial,Helvetica,sans-serif;\n    font-size:13.5px;\n    font-weight:600;\n    color:var(--ink);\n    margin-bottom:7px;\n  }\n  #lhCampaigner .lh-field .lh-hint{\n    display:block;\n    font-weight:500;\n    color:var(--ink-soft);\n    font-size:12.5px;\n    margin-top:5px;\n  }\n  #lhCampaigner .lh-required{color:var(--accent);}\n\n  #lhCampaigner input[type=\"text\"],\n#lhCampaigner input[type=\"email\"],\n#lhCampaigner input[type=\"tel\"],\n#lhCampaigner input[type=\"date\"],\n#lhCampaigner input[type=\"number\"]{\n    width:100%;\n    padding:12px 14px;\n    font-size:14.5px;\n    font-family:inherit;\n    color:var(--ink);\n    border:1.5px solid var(--line);\n    border-radius:10px;\n    background:var(--cream);\n    outline:none;\n    transition:border-color .15s ease, background .15s ease;\n  }\n  #lhCampaigner input::placeholder{color:#9AA39F;}\n  #lhCampaigner input:focus{\n    border-color:var(--forest);\n    background:var(--paper);\n    box-shadow:0 0 0 3px rgba(0,94,78,0.14);\n  }\n  #lhCampaigner input:invalid.lh-touched{border-color:var(--danger);}\n\n  \/* Campaign type selector *\/\n  #lhCampaigner .lh-choice-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}\n  #lhCampaigner .lh-choice{\n    position:relative;\n    border:1.5px solid var(--line);\n    border-radius:12px;\n    padding:14px 12px;\n    background:var(--cream);\n    cursor:pointer;\n    transition:border-color .15s ease, background .15s ease;\n    display:flex;\n    flex-direction:column;\n    gap:6px;\n  }\n  #lhCampaigner .lh-choice input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0;}\n  #lhCampaigner .lh-choice svg{width:20px;height:20px;color:var(--forest);}\n  #lhCampaigner .lh-choice span{font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:600;color:var(--ink);}\n  #lhCampaigner .lh-choice small{font-size:12px;color:var(--ink-soft);font-weight:500;}\n  #lhCampaigner .lh-choice.is-active{\n    border-color:var(--forest);\n    background:#E7F0EE;\n    box-shadow:0 0 0 3px rgba(0,94,78,0.12);\n  }\n\n  \/* Location pills *\/\n  #lhCampaigner .lh-pillgrid{display:flex;flex-wrap:wrap;gap:8px;}\n  #lhCampaigner .lh-pill{\n    position:relative;\n    border:1.5px solid var(--line);\n    border-radius:999px;\n    padding:8px 15px;\n    font-size:13.5px;\n    font-weight:600;\n    color:var(--ink);\n    background:var(--cream);\n    cursor:pointer;\n    transition:border-color .15s ease, background .15s ease, color .15s ease;\n  }\n  #lhCampaigner .lh-pill input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0;}\n  #lhCampaigner .lh-pill.is-active{\n    border-color:var(--forest);\n    background:var(--forest);\n    color:#FFFFFF;\n  }\n\n  #lhCampaigner .lh-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}\n  #lhCampaigner .lh-row2.lh-row2-single{grid-template-columns:1fr;}\n  #lhCampaigner .lh-slide2-actions{display:flex;gap:10px;align-items:stretch;}\n  #lhCampaigner .lh-slide2-actions .lh-submit{flex:1;}\n  #lhCampaigner .lh-back{\n    flex-shrink:0;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    gap:6px;\n    padding:15px 18px;\n    border:1.5px solid var(--line);\n    border-radius:12px;\n    background:var(--paper);\n    color:var(--ink);\n    font-family:Arial,Helvetica,sans-serif;\n    font-size:14.5px;\n    font-weight:600;\n    cursor:pointer;\n  }\n  #lhCampaigner .lh-back svg{width:16px;height:16px;}\n  #lhCampaigner .lh-back:hover{background:var(--cream);}\n  @media (max-width:480px){\n    #lhCampaigner .lh-row2{grid-template-columns:1fr;}\n    #lhCampaigner .lh-choice-row{grid-template-columns:1fr;}\n    #lhCampaigner .lh-header{padding:24px 20px 22px;}\n    #lhCampaigner .lh-header-deco{width:150px;height:150px;top:-30px;right:-40px;}\n    #lhCampaigner form{padding:22px 20px 26px;}\n  }\n\n  #lhCampaigner .lh-submit{\n    width:100%;\n    border:none;\n    border-radius:12px;\n    padding:15px 20px;\n    background:linear-gradient(135deg, var(--forest-tint), var(--forest));\n    color:#fff;\n    font-family:Arial,Helvetica,sans-serif;\n    font-size:15.5px;\n    font-weight:600;\n    letter-spacing:0.01em;\n    cursor:pointer;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    gap:8px;\n    transition:transform .12s ease, box-shadow .12s ease;\n    box-shadow:0 8px 20px rgba(0,94,78,0.24);\n  }\n  #lhCampaigner .lh-submit:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,94,78,0.30);}\n  #lhCampaigner .lh-submit:active{transform:translateY(0);}\n  #lhCampaigner .lh-submit svg{width:17px;height:17px;}\n  #lhCampaigner .lh-submit:disabled{opacity:0.6;cursor:not-allowed;transform:none;}\n\n  #lhCampaigner .lh-error{\n    display:none;\n    font-size:12px;\n    color:var(--danger);\n    font-weight:600;\n    margin-top:6px;\n  }\n  #lhCampaigner .lh-field.has-error .lh-error{display:block;}\n  #lhCampaigner .lh-field.has-error input,\n#lhCampaigner .lh-field.has-error .lh-choice-row .lh-choice,\n#lhCampaigner .lh-field.has-error .lh-pillgrid .lh-pill{border-color:var(--danger);}\n\n  \/* Thank-you page *\/\n  #lhCampaigner .lh-success{display:none;}\n  #lhCampaigner .lh-success.is-visible{display:block;}\n  #lhCampaigner .lh-success-check{\n    width:56px;height:56px;\n    margin:0 auto 16px;\n    border-radius:50%;\n    background:#E7F0EE;\n    border:1px solid var(--line);\n    display:flex;align-items:center;justify-content:center;\n  }\n  #lhCampaigner .lh-success-check svg{width:28px;height:28px;color:var(--forest);}\n  #lhCampaigner .lh-success-body{padding:34px 28px 30px;text-align:center;}\n  #lhCampaigner .lh-success-body h2{\n    font-family:Arial,Helvetica,sans-serif;\n    font-weight:700;\n    font-size:22px;\n    color:var(--ink);\n    margin:0 0 8px;\n  }\n  #lhCampaigner .lh-success-lead{\n    font-size:14px;\n    line-height:1.6;\n    color:var(--ink-soft);\n    max-width:38ch;\n    margin:0 auto 22px;\n  }\n  #lhCampaigner .lh-success-steps{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:12px;text-align:left;}\n  #lhCampaigner .lh-success-steps li{\n    display:flex;\n    align-items:flex-start;\n    gap:10px;\n    font-size:13.5px;\n    color:var(--ink-soft);\n    line-height:1.5;\n  }\n  #lhCampaigner .lh-success-steps li .lh-step-num{\n    flex-shrink:0;\n    width:22px;height:22px;\n    border-radius:50%;\n    background:var(--forest);\n    color:#fff;\n    font-family:Arial,Helvetica,sans-serif;\n    font-size:11px;\n    font-weight:700;\n    display:flex;align-items:center;justify-content:center;\n  }\n  #lhCampaigner .lh-success-actions{display:flex;flex-direction:column;gap:10px;}\n  #lhCampaigner .lh-success-actions a{\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    gap:6px;\n    padding:13px 20px;\n    text-decoration:none;\n    border-radius:10px;\n    font-family:Arial,Helvetica,sans-serif;\n    font-weight:600;\n    font-size:14px;\n  }\n  #lhCampaigner .lh-success-primary{\n    background:linear-gradient(135deg, var(--forest-tint), var(--forest));\n    color:#fff;\n    box-shadow:0 8px 20px rgba(0,94,78,0.24);\n  }\n  #lhCampaigner .lh-success-secondary{\n    background:var(--cream);\n    color:var(--ink);\n    border:1.5px solid var(--line);\n  }\n  #lhCampaigner #lhFormBody.is-hidden{display:none;}\n\n\n\/* WordPress 6.9.7 isolation \/ theme override protection *\/\n#lhCampaigner{\n  box-sizing:border-box;\n  width:100%;\n  margin:0;\n  padding:0;\n  background:transparent;\n  font-family:inherit;\n  color:var(--ink);\n  line-height:1.5;\n}\n#lhCampaigner *,\n#lhCampaigner *::before,\n#lhCampaigner *::after{box-sizing:border-box;}\n#lhCampaigner .lh-wrap{font-family:Arial,Helvetica,sans-serif;}\n\n\/* White page\/body area directly below the green header. *\/\n#lhCampaigner,\n#lhCampaigner .lh-wrap,\n#lhCampaigner #lhFormBody,\n#lhCampaigner form,\n#lhCampaigner .lh-success{\n  background:#FFFFFF !important;\n}\n\n\/* Prevent the WordPress\/theme container from visually tinting the form body. *\/\n#lhCampaigner .lh-wrap{\n  border-color:#FFFFFF;\n}\n#lhCampaigner .lh-header h1,\n#lhCampaigner .lh-header h1 *,\n#lhCampaigner h1.lh-campaigner-title{\n  color:#FFFFFF !important;\n  -webkit-text-fill-color:#FFFFFF !important;\n  text-shadow:none !important;\n  font-family:inherit !important;\n}\n#lhCampaigner button,\n#lhCampaigner input,\n#lhCampaigner select,\n#lhCampaigner textarea{font-family:Arial,Helvetica,sans-serif;}\n#lhCampaigner button{line-height:1.2;}\n#lhCampaigner a{text-decoration:none;box-shadow:none;}\n\n\/* Follow the active WordPress theme typography for the intro copy. *\/\n#lhCampaigner .lh-header p{\n  font-family:inherit !important;\n  color:rgba(255,255,255,0.88) !important;\n}\n@media (max-width:480px){\n  #lhCampaigner{padding:0;}\n}\n<\/style>\n<div class=\"lh-campaigner\" id=\"lhCampaigner\"><div class=\"lh-wrap\">\n  <div class=\"lh-header\">\n    <div class=\"lh-header-deco\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 220 220\" fill=\"none\">\n        <circle cx=\"150\" cy=\"40\" r=\"46\" fill=\"white\" opacity=\"0.06\"\/>\n        <circle cx=\"190\" cy=\"90\" r=\"34\" fill=\"white\" opacity=\"0.06\"\/>\n        <circle cx=\"120\" cy=\"95\" r=\"26\" fill=\"white\" opacity=\"0.06\"\/>\n        <circle cx=\"60\" cy=\"150\" r=\"60\" fill=\"white\" opacity=\"0.05\"\/>\n      <\/svg>\n    <\/div>\n    <div class=\"lh-brandrow\">\n      <div class=\"lh-mark\">\n        <span class=\"lh-logo-chip\">\n          <img decoding=\"async\" src=\"https:\/\/lindungihutan.com\/public\/img-redesign\/logo_lindungihutan.png\" alt=\"LindungiHutan\" title=\"\">\n        <\/span>\n      <\/div>\n      <div class=\"lh-progress\">\n        <svg viewBox=\"0 0 46 46\">\n          <circle class=\"track\" cx=\"23\" cy=\"23\" r=\"19\"><\/circle>\n          <circle class=\"fill\" id=\"lhProgressCircle\" cx=\"23\" cy=\"23\" r=\"19\" stroke-dasharray=\"119.4\" stroke-dashoffset=\"119.4\"><\/circle>\n        <\/svg>\n        <div class=\"lh-progress-label\" id=\"lhProgressLabel\">0%<\/div>\n      <\/div>\n    <\/div>\n    <span class=\"lh-eyebrow\">Campaigner Registration Form<\/span>\n    <h1 class=\"lh-campaigner-title\">Dari personal campaign sampai gerakan komunitas, semua bisa jadi Campaigner.<\/h1>\n    <p>Lewat program Campaigner LindungiHutan, kamu bisa menggalang dukungan untuk penanaman pohon, baik sendiri maupun bersama anggota komunitasmu. Isi form berikut dan ceritakan rencana campaign-mu!<\/p>\n    <div class=\"lh-benefits\">\n      <span class=\"lh-benefit\">\ud83c\udf31 Sertifikat kontribusi<\/span>\n      <span class=\"lh-benefit\">\ud83d\udcca Laporan dampak berkala<\/span>\n      <span class=\"lh-benefit\">\ud83d\udce3 Publikasi di kanal kami<\/span>\n    <\/div>\n  <\/div>\n\n  <div id=\"lhFormBody\">\n    <form id=\"lhForm\" novalidate>\n\n      <!-- Slide 1 -->\n      <div class=\"lh-slide\" id=\"lhSlide1\">\n        <div class=\"lh-field\">\n          <label for=\"lhNama\">Nama <span class=\"lh-required\">*<\/span><\/label>\n          <input type=\"text\" id=\"lhNama\" name=\"nama\" placeholder=\"Masukkan nama lengkapmu\" required>\n          <div class=\"lh-error\">Nama lengkap wajib diisi.<\/div>\n        <\/div>\n\n        <div class=\"lh-row2\">\n          <div class=\"lh-field\">\n            <label for=\"lhEmail\">Email <span class=\"lh-required\">*<\/span><\/label>\n            <input type=\"email\" id=\"lhEmail\" name=\"email\" placeholder=\"Masukkan email Anda\" required>\n            <div class=\"lh-error\">Masukkan alamat email yang valid.<\/div>\n          <\/div>\n          <div class=\"lh-field\">\n            <label for=\"lhTelp\">Nomor Telepon <span class=\"lh-required\">*<\/span><\/label>\n            <input type=\"tel\" id=\"lhTelp\" name=\"telepon\" placeholder=\"Masukkan nomor telepon Anda\" required>\n            <div class=\"lh-error\">Nomor telepon wajib diisi.<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"lh-field\">\n          <label>Kamu ingin membuat campaign apa? <span class=\"lh-required\">*<\/span><\/label>\n          <div class=\"lh-choice-row\">\n            <label class=\"lh-choice\" data-choice>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M3 21V7l9-4 9 4v14\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linejoin=\"round\"\/><path d=\"M9 21v-6h6v6\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><\/svg>\n              <span>Campaign Organisasi<\/span>\n              <small>Sekolah, kampus &#038; lembaga<\/small>\n              <input type=\"radio\" name=\"jenis_campaign\" value=\"Organisasi\" required>\n            <\/label>\n            <label class=\"lh-choice\" data-choice>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"9\" cy=\"8\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><circle cx=\"17\" cy=\"9\" r=\"2.4\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><path d=\"M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><path d=\"M15.5 14.3c2.3.3 4.5 2.3 4.5 5.7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><\/svg>\n              <span>Campaign Komunitas<\/span>\n              <small>Fans idol, grup hobi<\/small>\n              <input type=\"radio\" name=\"jenis_campaign\" value=\"Komunitas\" required>\n            <\/label>\n            <label class=\"lh-choice\" data-choice>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 8v13M12 8c-1.5-1.5-4-1.5-5 0s0 3.5 1.5 3.5H12M12 8c1.5-1.5 4-1.5 5 0s0 3.5-1.5 3.5H12\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><path d=\"M5 21h14M6 21v-6.5h12V21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n              <span>Campaign Momentum<\/span>\n              <small>Perayaan individu<\/small>\n              <input type=\"radio\" name=\"jenis_campaign\" value=\"Momentum Perayaan Individu\" required>\n            <\/label>\n          <\/div>\n          <div class=\"lh-error\">Pilih salah satu jenis campaign.<\/div>\n        <\/div>\n\n        <button type=\"button\" class=\"lh-submit\" id=\"lhNextBtn\">\n          Lanjutkan\n          <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12h14\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\"\/><path d=\"M13 5l7 7-7 7\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n        <\/button>\n      <\/div>\n\n      <!-- Slide 2 -->\n      <div class=\"lh-slide\" id=\"lhSlide2\" style=\"display:none;\">\n        <div class=\"lh-row2\" id=\"lhOrgRow\">\n          <div class=\"lh-field\" id=\"lhNamaOrgField\">\n            <label for=\"lhNamaOrg\">Nama Organisasi \/ Komunitas <span class=\"lh-required\">*<\/span><\/label>\n            <input type=\"text\" id=\"lhNamaOrg\" name=\"nama_organisasi\" placeholder=\"Contoh: EXO-L Indonesia\" required>\n            <div class=\"lh-error\">Nama organisasi\/komunitas wajib diisi.<\/div>\n          <\/div>\n          <div class=\"lh-field\">\n            <label for=\"lhIg\">Akun Instagram <span class=\"lh-required\">*<\/span><\/label>\n            <input type=\"text\" id=\"lhIg\" name=\"ig_organisasi\" placeholder=\"@namaakun\" required>\n            <div class=\"lh-error\">Akun Instagram wajib diisi.<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"lh-field\">\n          <label>Lokasi mana yang ingin kamu support? <span class=\"lh-required\">*<\/span><\/label>\n          <div class=\"lh-pillgrid\" id=\"lhLokasiGrid\">\n            <!-- pills injected by JS -->\n          <\/div>\n          <input type=\"text\" id=\"lhLokasiLainnya\" name=\"lokasi_lainnya\" placeholder=\"Lokasi lainnya (tulis di sini jika tidak ada di atas)\" style=\"margin-top:10px;display:none;\">\n          <div class=\"lh-error\">Pilih satu lokasi, atau isi lokasi lainnya.<\/div>\n        <\/div>\n\n        <div class=\"lh-row2\">\n          <div class=\"lh-field\">\n            <label for=\"lhTanggal\">Tanggal mulai campaign <span class=\"lh-required\">*<\/span><\/label>\n            <input type=\"date\" id=\"lhTanggal\" name=\"tanggal_mulai\" required>\n            <div class=\"lh-error\">Pilih tanggal hari ini atau setelahnya.<\/div>\n          <\/div>\n          <div class=\"lh-field\">\n            <label for=\"lhTarget\">Target pohon <span class=\"lh-required\">*<\/span><\/label>\n            <input type=\"number\" id=\"lhTarget\" name=\"target_pohon\" placeholder=\"Contoh: 100\" min=\"6\" step=\"1\" required>\n            <div class=\"lh-error\">Target pohon minimal 6.<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"lh-field\">\n          <label>Berapa lama kamu ingin menggalang dana untuk kampanye ini? <span class=\"lh-required\">*<\/span><\/label>\n          <div class=\"lh-pillgrid\" id=\"lhDurasiGrid\">\n            <!-- pills injected by JS -->\n          <\/div>\n          <div class=\"lh-error\">Pilih durasi penggalangan dana.<\/div>\n        <\/div>\n\n        <!-- Ad\/campaign attribution \u2014 auto-filled, not shown to user -->\n        <input type=\"hidden\" name=\"utm_source\" id=\"lhUtmSource\">\n        <input type=\"hidden\" name=\"utm_medium\" id=\"lhUtmMedium\">\n        <input type=\"hidden\" name=\"utm_campaign\" id=\"lhUtmCampaign\">\n        <input type=\"hidden\" name=\"page_url\" id=\"lhPageUrl\">\n\n        <div class=\"lh-slide2-actions\">\n          <button type=\"button\" class=\"lh-back\" id=\"lhBackBtn\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M19 12H5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\"\/><path d=\"M11 5l-7 7 7 7\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            Kembali\n          <\/button>\n          <button type=\"submit\" class=\"lh-submit\" id=\"lhSubmitBtn\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 19V5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\"\/><path d=\"M5 12l7-7 7 7\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            Kirim Rencana Campaign-ku\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/form>\n  <\/div>\n\n  <div class=\"lh-success\" id=\"lhSuccess\">\n    <div class=\"lh-success-body\">\n      <div class=\"lh-success-check\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 13l4 4L19 7\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n      <\/div>\n      <p class=\"lh-success-lead\">Terima kasih sudah mau bikin dampak nyata untuk bumi bersama komunitasmu.<\/p>\n      <ul class=\"lh-success-steps\">\n        <li><span class=\"lh-step-num\">1<\/span> Tim LindungiHutan akan meninjau rencana campaign yang kamu kirim.<\/li>\n        <li><span class=\"lh-step-num\">2<\/span> Kami akan menghubungimu lewat email atau WhatsApp yang kamu daftarkan untuk membahas detail kerja sama.<\/li>\n        <li><span class=\"lh-step-num\">3<\/span> Setelah disepakati, campaign-mu akan tayang dan siap digalang bersama komunitas.<\/li>\n      <\/ul>\n      <div class=\"lh-success-actions\">\n        <a class=\"lh-success-primary\" href=\"https:\/\/lindungihutan.com\/kampanyealam\" target=\"_blank\" rel=\"noopener\">Lihat Kampanye Alam Lain<\/a>\n        <a class=\"lh-success-secondary\" href=\"https:\/\/www.instagram.com\/lindungihutan\/\" target=\"_blank\" rel=\"noopener\">Follow @lindungihutan<\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<\/div>\n<script>\n(function(){\n  function initCampaignerForm(){\n    var root = document.getElementById('lhCampaigner');\n    if(!root || root.getAttribute('data-lh-initialized') === '1') return;\n    root.setAttribute('data-lh-initialized','1');\n  \/\/ scrollIntoView isn't implemented\/allowed in every browser or embed context\n  \/\/ (some sandboxed blog iframes block it) \u2014 never let it halt the script.\n  function safeScrollIntoView(el, opts){\n    if(!el || typeof el.scrollIntoView !== 'function') return;\n    try{ el.scrollIntoView(opts); }catch(err){ \/* ignore *\/ }\n  }\n\n  \/\/ ---- Config: point this to your lead endpoint (Google Apps Script \/ CRM webhook \/ Zapier) ----\n  var SUBMIT_ENDPOINT = \"https:\/\/script.google.com\/macros\/s\/AKfycbwN8uDDoJiItGWn8FtmsurybVZqCYiIQjRpJdMZ2AiGHa0RNIiprYVUthbtUDiwUWA4\/exec\";\n\n  var locations = [\"Jakarta\",\"Jateng\",\"Jogja\",\"Bali\",\"Way Kambas\",\"Jatim\",\"NTT\",\"Jabar\",\"Kalteng\",\"Kalbar\",\"Sulsel\",\"Bangka Belitung\",\"Riau\"];\n  var grid = root.querySelector('#lhLokasiGrid');\n  locations.forEach(function(loc, i){\n    var label = document.createElement('label');\n    label.className = 'lh-pill';\n    label.innerHTML = '<input type=\"radio\" name=\"lokasi\" value=\"'+loc+'\" '+(i===0?'':'')+'>' + loc;\n    grid.appendChild(label);\n  });\n  var lainnyaLabel = document.createElement('label');\n  lainnyaLabel.className = 'lh-pill';\n  lainnyaLabel.innerHTML = '<input type=\"radio\" name=\"lokasi\" value=\"Lainnya\">Lokasi lainnya';\n  grid.appendChild(lainnyaLabel);\n\n  var lokasiLainnyaInput = root.querySelector('#lhLokasiLainnya');\n  grid.querySelectorAll('input[name=\"lokasi\"]').forEach(function(input){\n    input.addEventListener('change', function(){\n      if(input.value === 'Lainnya'){\n        lokasiLainnyaInput.style.display = 'block';\n        lokasiLainnyaInput.focus();\n      } else {\n        lokasiLainnyaInput.style.display = 'none';\n        lokasiLainnyaInput.value = '';\n      }\n    });\n  });\n\n  var durations = [\"1 Bulan\",\"2 Bulan\",\"3 Bulan\",\"Lebih dari 3 Bulan\"];\n  var durasiGrid = root.querySelector('#lhDurasiGrid');\n  durations.forEach(function(d){\n    var label = document.createElement('label');\n    label.className = 'lh-pill';\n    label.innerHTML = '<input type=\"radio\" name=\"durasi_penggalangan\" value=\"'+d+'\">' + d;\n    durasiGrid.appendChild(label);\n  });\n\n  \/\/ Sync visual state for choice cards and pills\n  function bindToggleGroup(selector){\n    root.querySelectorAll(selector).forEach(function(wrap){\n      var input = wrap.querySelector('input');\n      input.addEventListener('change', function(){\n        wrap.parentElement.querySelectorAll(selector).forEach(function(w){ w.classList.remove('is-active'); });\n        wrap.classList.add('is-active');\n        updateProgress();\n      });\n    });\n  }\n  bindToggleGroup('.lh-choice');\n  bindToggleGroup('.lh-pill');\n\n  \/\/ UTM capture for ad attribution\n  var params = new URLSearchParams(window.location.search);\n  root.querySelector('#lhUtmSource').value = params.get('utm_source') || '';\n  root.querySelector('#lhUtmMedium').value = params.get('utm_medium') || '';\n  root.querySelector('#lhUtmCampaign').value = params.get('utm_campaign') || '';\n  root.querySelector('#lhPageUrl').value = window.location.href;\n\n  \/\/ Prevent selecting a past start date \u2014 min is always \"today\" on load\n  (function(){\n    var today = new Date();\n    var yyyy = today.getFullYear();\n    var mm = String(today.getMonth() + 1).padStart(2, '0');\n    var dd = String(today.getDate()).padStart(2, '0');\n    root.querySelector('#lhTanggal').setAttribute('min', yyyy + '-' + mm + '-' + dd);\n  })();\n\n  \/\/ Progress ring\n  var form = root.querySelector('#lhForm');\n  var circle = root.querySelector('#lhProgressCircle');\n  var label = root.querySelector('#lhProgressLabel');\n  var circumference = 2 * Math.PI * 19;\n\n  \/\/ \"nama_organisasi\" drops out of the required set entirely for Campaign Momentum,\n  \/\/ since that field is hidden on slide 2 for that campaign type.\n  function getRequiredFields(){\n    var base = ['nama','email','telepon','jenis_campaign','nama_organisasi','ig_organisasi','lokasi','tanggal_mulai','durasi_penggalangan','target_pohon'];\n    var jenisChecked = form.querySelector('[name=\"jenis_campaign\"]:checked');\n    if(jenisChecked && jenisChecked.value === 'Momentum Perayaan Individu'){\n      base = base.filter(function(f){ return f !== 'nama_organisasi'; });\n    }\n    return base;\n  }\n\n  function updateProgress(){\n    var filled = 0;\n    var requiredFields = getRequiredFields();\n    requiredFields.forEach(function(name){\n      var els = form.querySelectorAll('[name=\"'+name+'\"]');\n      if(els.length && els[0].type === 'radio'){\n        if(Array.from(els).some(function(e){ return e.checked; })) filled++;\n      } else if(els.length && els[0].value.trim() !== ''){\n        filled++;\n      }\n    });\n    var pct = filled \/ requiredFields.length;\n    circle.style.strokeDashoffset = circumference * (1 - pct);\n    label.textContent = Math.round(pct * 100) + '%';\n  }\n  form.addEventListener('input', updateProgress);\n  form.addEventListener('change', updateProgress);\n  circle.setAttribute('stroke-dasharray', circumference);\n  updateProgress();\n\n  \/\/ Show\/hide \"Nama Organisasi\/Komunitas\" depending on jenis_campaign \u2014\n  \/\/ Campaign Momentum (individual celebration) doesn't need an org\/community name.\n  var namaOrgField = root.querySelector('#lhNamaOrgField');\n  var namaOrgInput = root.querySelector('#lhNamaOrg');\n  var orgRow = root.querySelector('#lhOrgRow');\n  function updateMomentumUI(){\n    var jenisChecked = form.querySelector('[name=\"jenis_campaign\"]:checked');\n    var isMomentum = jenisChecked && jenisChecked.value === 'Momentum Perayaan Individu';\n    if(isMomentum){\n      namaOrgField.style.display = 'none';\n      namaOrgInput.required = false;\n      orgRow.classList.add('lh-row2-single');\n    } else {\n      namaOrgField.style.display = '';\n      namaOrgInput.required = true;\n      orgRow.classList.remove('lh-row2-single');\n    }\n  }\n  form.querySelectorAll('[name=\"jenis_campaign\"]').forEach(function(input){\n    input.addEventListener('change', updateMomentumUI);\n  });\n\n  \/\/ Slide navigation\n  var slide1 = root.querySelector('#lhSlide1');\n  var slide2 = root.querySelector('#lhSlide2');\n  root.querySelector('#lhNextBtn').addEventListener('click', function(){\n    var ok = true;\n    ['nama','email','telepon'].forEach(function(name){\n      var input = form.querySelector('[name=\"'+name+'\"]');\n      var fieldOk = input.checkValidity();\n      input.closest('.lh-field').classList.toggle('has-error', !fieldOk);\n      if(!fieldOk) ok = false;\n    });\n    var jenisChecked = form.querySelector('[name=\"jenis_campaign\"]:checked');\n    var jenisField = form.querySelector('[name=\"jenis_campaign\"]').closest('.lh-field');\n    jenisField.classList.toggle('has-error', !jenisChecked);\n    if(!jenisChecked) ok = false;\n\n    if(!ok){\n      var firstError = slide1.querySelector('.has-error');\n      safeScrollIntoView(firstError, {behavior:'smooth', block:'center'});\n      return;\n    }\n    updateMomentumUI();\n    slide1.style.display = 'none';\n    slide2.style.display = '';\n    window.scrollTo({top:0, behavior:'smooth'});\n  });\n  root.querySelector('#lhBackBtn').addEventListener('click', function(){\n    slide2.style.display = 'none';\n    slide1.style.display = '';\n    window.scrollTo({top:0, behavior:'smooth'});\n  });\n\n  \/\/ Validation + submit\n  form.addEventListener('submit', function(e){\n    e.preventDefault();\n    var valid = true;\n    var data = {};\n\n    function markField(fieldEl, ok){\n      fieldEl.classList.toggle('has-error', !ok);\n      if(!ok) valid = false;\n    }\n\n    var slide2RequiredFields = ['nama','email','telepon','ig_organisasi','tanggal_mulai','target_pohon'];\n    if(namaOrgInput.required){ slide2RequiredFields.push('nama_organisasi'); }\n    slide2RequiredFields.forEach(function(name){\n      var input = form.querySelector('[name=\"'+name+'\"]');\n      var fieldEl = input.closest('.lh-field');\n      var ok = input.checkValidity();\n      markField(fieldEl, ok);\n      data[name] = input.value;\n    });\n    if(!namaOrgInput.required){ data.nama_organisasi = ''; }\n\n    var jenisChecked = form.querySelector('[name=\"jenis_campaign\"]:checked');\n    markField(form.querySelector('[name=\"jenis_campaign\"]').closest('.lh-field'), !!jenisChecked);\n    data.jenis_campaign = jenisChecked ? jenisChecked.value : '';\n\n    var lokasiChecked = form.querySelector('[name=\"lokasi\"]:checked');\n    var lokasiValid = !!lokasiChecked;\n    if(lokasiChecked && lokasiChecked.value === 'Lainnya'){\n      lokasiValid = root.querySelector('#lhLokasiLainnya').value.trim() !== '';\n    }\n    markField(form.querySelector('#lhLokasiGrid').closest('.lh-field'), lokasiValid);\n    if(lokasiChecked && lokasiChecked.value === 'Lainnya'){\n      data.lokasi = root.querySelector('#lhLokasiLainnya').value.trim();\n    } else {\n      data.lokasi = lokasiChecked ? lokasiChecked.value : '';\n    }\n\n    var durasiChecked = form.querySelector('[name=\"durasi_penggalangan\"]:checked');\n    markField(form.querySelector('#lhDurasiGrid').closest('.lh-field'), !!durasiChecked);\n    data.durasi_penggalangan = durasiChecked ? durasiChecked.value : '';\n\n    data.utm_source = root.querySelector('#lhUtmSource').value;\n    data.utm_medium = root.querySelector('#lhUtmMedium').value;\n    data.utm_campaign = root.querySelector('#lhUtmCampaign').value;\n    data.page_url = root.querySelector('#lhPageUrl').value;\n\n    if(!valid){\n      var firstError = form.querySelector('.has-error');\n      safeScrollIntoView(firstError, {behavior:'smooth', block:'center'});\n      return;\n    }\n\n    var btn = root.querySelector('#lhSubmitBtn');\n    btn.disabled = true;\n    btn.textContent = 'Mengirim...';\n\n    function showSuccess(){\n      root.querySelector('#lhFormBody').classList.add('is-hidden');\n      root.querySelector('#lhSuccess').classList.add('is-visible');\n      safeScrollIntoView(root.querySelector('.lh-wrap'), {behavior:'smooth', block:'start'});\n\n      \/\/ GTM\/GA4 tracking \u2014 fires only on a genuinely successful, validated submission\n      \/\/ (not on every button click). Set up a \"Custom Event\" trigger in GTM with\n      \/\/ Event name: campaigner_form_submit\n      window.dataLayer = window.dataLayer || [];\n      window.dataLayer.push({\n        'event': 'campaigner_form_submit',\n        'form_name': 'campaigner_registration',\n        'jenis_campaign': data.jenis_campaign,\n        'lokasi': data.lokasi,\n        'utm_source': data.utm_source,\n        'utm_medium': data.utm_medium,\n        'utm_campaign': data.utm_campaign\n      });\n    }\n\n    if(SUBMIT_ENDPOINT){\n      \/\/ Content-Type is text\/plain on purpose: Google Apps Script Web Apps don't return\n      \/\/ proper CORS headers for a JSON preflight (OPTIONS) request, which makes the browser\n      \/\/ block the call. text\/plain skips the preflight \u2014 Apps Script still reads the JSON\n      \/\/ fine via e.postData.contents on the server side.\n      fetch(SUBMIT_ENDPOINT, {\n        method: 'POST',\n        mode: 'no-cors',\n        headers: {'Content-Type':'text\/plain;charset=utf-8'},\n        body: JSON.stringify(data)\n      }).then(function(){ showSuccess(); })\n        .catch(function(){\n          btn.disabled = false;\n          btn.textContent = 'Kirim Rencana Campaign-ku';\n          alert('Gagal mengirim, silakan coba lagi.');\n        });\n    } else {\n      \/\/ No backend configured \u2014 show the thank-you page anyway so submission\n      \/\/ never appears to silently fail. Set SUBMIT_ENDPOINT to stop landing here.\n      showSuccess();\n    }\n  });\n\n  }\n\n  if(document.readyState === 'loading'){\n    document.addEventListener('DOMContentLoaded', initCampaignerForm);\n  } else {\n    initCampaignerForm();\n  }\n})();\n<\/script>\n\n\n\n<style>\n\/* Artikel terkait kategori \"Penggalang\" \u2014 meniru blok \"You May Like\" tema Zox News *\/\n#lhRelated{\n  --lhr-ink:#222222;\n  --lhr-line:#555555;\n  --lhr-skel:#ECEEED;\n  clear:both;\n  width:100%;\n  margin:40px 0 10px;\n  padding:0;\n  font-family:'Roboto',sans-serif;\n}\n#lhRelated, #lhRelated *, #lhRelated *::before, #lhRelated *::after{box-sizing:border-box;}\n\n\/* Judul: garis horizontal + label merah miring (pakai class tema span.mvp-widget-home-title) *\/\n#lhRelated .lhr-head{\n  position:relative;\n  text-align:center;\n  margin:0 0 24px;\n  line-height:1;\n}\n#lhRelated .lhr-head::before{\n  content:\"\";\n  position:absolute;\n  left:0; right:0; top:50%;\n  height:1px;\n  background:var(--lhr-line);\n}\n#lhRelated .lhr-head span.mvp-widget-home-title{\n  position:relative;\n  z-index:1;\n  margin:0;\n}\n\n\/* Grid 3 kolom *\/\n#lhRelated .lhr-grid{\n  display:grid;\n  grid-template-columns:repeat(3, minmax(0,1fr));\n  gap:24px 18px;\n}\n#lhRelated a.lhr-card{\n  display:block;\n  color:var(--lhr-ink) !important;\n  text-decoration:none !important;\n  box-shadow:none !important;\n  background:none !important;\n}\n#lhRelated .lhr-img{\n  position:relative;\n  width:100%;\n  aspect-ratio:5 \/ 3;\n  background:var(--lhr-skel);\n  overflow:hidden;\n  margin:0 0 10px;\n  line-height:0;\n}\n#lhRelated .lhr-img img{\n  position:absolute;\n  inset:0;\n  width:100%;\n  height:100%;\n  max-width:none;\n  object-fit:cover;\n  margin:0;\n  transition:opacity .15s ease;\n}\n#lhRelated .lhr-title{\n  display:block;\n  margin:0;\n  padding:0;\n  font-family:'Roboto',sans-serif;\n  font-size:1rem;\n  font-weight:700;\n  line-height:1.2;\n  letter-spacing:-.02em;\n  color:var(--lhr-ink);\n  transition:opacity .15s ease;\n}\n#lhRelated a.lhr-card:hover .lhr-img img{opacity:.8;}\n#lhRelated a.lhr-card:hover .lhr-title{opacity:.6;}\n\n\/* Skeleton saat loading *\/\n#lhRelated .lhr-skel-line{\n  display:block;\n  height:14px;\n  margin:6px 0;\n  background:var(--lhr-skel);\n  border-radius:3px;\n}\n#lhRelated .lhr-skel-line.short{width:60%;}\n\n\/* Tablet: 2 kolom *\/\n@media (max-width:767px){\n  #lhRelated .lhr-grid{grid-template-columns:repeat(2, minmax(0,1fr));}\n}\n\/* HP: list dengan thumbnail kecil, sama seperti tema di mobile *\/\n@media (max-width:479px){\n  #lhRelated{margin-top:30px;}\n  #lhRelated .lhr-head{margin-bottom:15px;}\n  #lhRelated .lhr-grid{grid-template-columns:1fr;gap:15px;}\n  #lhRelated a.lhr-card{display:flex;align-items:flex-start;gap:14px;}\n  #lhRelated .lhr-img{flex:0 0 120px;width:120px;margin:0;aspect-ratio:5 \/ 3;}\n  #lhRelated .lhr-title,\n  #lhRelated .lhr-skel-wrap{flex:1;}\n}\n<\/style>\n\n<div id=\"lhRelated\" data-category-slug=\"penggalang\" data-count=\"6\" aria-labelledby=\"lhRelatedTitle\">\n  <div class=\"lhr-head\">\n    <span class=\"mvp-widget-home-title\" id=\"lhRelatedTitle\">Kisah Campaigner<\/span>\n  <\/div>\n  <div class=\"lhr-grid\" id=\"lhRelatedGrid\"><\/div>\n<\/div>\n\n<script>\n(function(){\n  function initRelated(){\n    var root = document.getElementById('lhRelated');\n    if(!root || root.getAttribute('data-lhr-initialized') === '1') return;\n    root.setAttribute('data-lhr-initialized','1');\n\n    var grid = root.querySelector('#lhRelatedGrid');\n    var COUNT = parseInt(root.getAttribute('data-count'), 10) || 6;\n    var CATEGORY_ID = 20; \/\/ ID kategori \"Penggalang\"\n\n    \/\/ PENTING: jangan pakai karakter ampersand di script ini \u2014 WordPress mengubahnya\n    \/\/ jadi \"#038;\" dan script jadi error. Karena itu kondisi ditulis dengan if bersarang\n    \/\/ dan query string dibuat dengan URLSearchParams.\n\n    \/\/ Blog diakses lewat reverse proxy (lindungihutan.com\/blog), sedangkan preview\n    \/\/ di wp-admin berjalan langsung di subdomain blog-backup \u2014 pakai REST API dari\n    \/\/ origin yang sama supaya tidak kena CORS di kedua tempat.\n    var API_BASE = (location.hostname.indexOf('blog-backup') === 0)\n      ? '\/wp-json\/wp\/v2\/'\n      : '\/blog\/wp-json\/wp\/v2\/';\n\n    \/\/ Jangan tampilkan halaman ini sendiri kalau suatu saat ikut masuk kategori.\n    var currentPath = location.pathname.replace(\/\\\/+$\/, '');\n\n    \/\/ Skeleton\n    var skel = '';\n    for(var i = 0; i < COUNT; i++){\n      skel += '<div class=\"lhr-card\" aria-hidden=\"true\"><div class=\"lhr-img\"><\/div>' +\n              '<div class=\"lhr-skel-wrap\"><span class=\"lhr-skel-line\"><\/span><span class=\"lhr-skel-line short\"><\/span><\/div><\/div>';\n    }\n    grid.innerHTML = skel;\n\n    function decodeHtml(str){\n      var t = document.createElement('textarea');\n      t.innerHTML = str;\n      return t.value;\n    }\n\n    function pickImage(post){\n      var list = (post._embedded || {})['wp:featuredmedia'];\n      var media = list ? list[0] : null;\n      if(!media || !media.source_url) return null;\n      var sizes = (media.media_details || {}).sizes || {};\n      var pref = ['mvp-mid-thumb','medium_large','mvp-port-thumb','medium','large'];\n      var src = media.source_url;\n      for(var j = 0; j < pref.length; j++){\n        var size = sizes[pref[j]];\n        if(size ? size.source_url : false){ src = size.source_url; break; }\n      }\n      return { src: src, alt: media.alt_text || '' };\n    }\n\n    function render(posts){\n      grid.innerHTML = '';\n      posts.forEach(function(post){\n        var a = document.createElement('a');\n        a.className = 'lhr-card';\n        a.href = post.link;\n        a.rel = 'bookmark';\n\n        var title = decodeHtml(post.title ? (post.title.rendered || '') : '');\n\n        var imgWrap = document.createElement('div');\n        imgWrap.className = 'lhr-img';\n        var img = pickImage(post);\n        if(img){\n          var el = document.createElement('img');\n          el.src = img.src;\n          el.alt = img.alt || title;\n          el.loading = 'lazy';\n          el.decoding = 'async';\n          imgWrap.appendChild(el);\n        }\n\n        var t = document.createElement('span');\n        t.className = 'lhr-title';\n        t.textContent = title;\n\n        a.appendChild(imgWrap);\n        a.appendChild(t);\n        grid.appendChild(a);\n      });\n    }\n\n    var query = new URLSearchParams({\n      categories: CATEGORY_ID,\n      per_page: COUNT + 1,\n      orderby: 'date',\n      order: 'desc',\n      _fields: 'id,link,title,_links.wp:featuredmedia,_embedded',\n      _embed: 'wp:featuredmedia'\n    });\n    var url = API_BASE + 'posts?' + query.toString();\n\n    fetch(url, { credentials: 'omit' })\n      .then(function(res){\n        if(!res.ok) throw new Error('HTTP ' + res.status);\n        return res.json();\n      })\n      .then(function(posts){\n        posts = (posts || []).filter(function(p){\n          try{ return new URL(p.link).pathname.replace(\/\\\/+$\/, '') !== currentPath; }\n          catch(e){ return true; }\n        }).slice(0, COUNT);\n        if(!posts.length){ root.style.display = 'none'; return; }\n        render(posts);\n      })\n      .catch(function(){\n        \/\/ Kalau API gagal, sembunyikan blok saja \u2014 jangan ganggu form di atasnya.\n        root.style.display = 'none';\n      });\n  }\n\n  if(document.readyState === 'loading'){\n    document.addEventListener('DOMContentLoaded', initRelated);\n  } else {\n    initRelated();\n  }\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>0% Campaigner Registration Form Dari personal campaign sampai gerakan komunitas, semua bisa jadi Campaigner. Lewat program Campaigner LindungiHutan, kamu bisa menggalang dukungan untuk penanaman pohon, baik sendiri maupun bersama anggota komunitasmu. Isi form berikut dan ceritakan rencana campaign-mu! \ud83c\udf31 Sertifikat kontribusi \ud83d\udcca Laporan dampak berkala \ud83d\udce3 Publikasi di kanal kami Nama * Nama lengkap wajib [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-fullwidth.php","meta":{"footnotes":""},"class_list":["post-20643","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lindungihutan.com\/blog\/wp-json\/wp\/v2\/pages\/20643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lindungihutan.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lindungihutan.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lindungihutan.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/lindungihutan.com\/blog\/wp-json\/wp\/v2\/comments?post=20643"}],"version-history":[{"count":13,"href":"https:\/\/lindungihutan.com\/blog\/wp-json\/wp\/v2\/pages\/20643\/revisions"}],"predecessor-version":[{"id":21183,"href":"https:\/\/lindungihutan.com\/blog\/wp-json\/wp\/v2\/pages\/20643\/revisions\/21183"}],"wp:attachment":[{"href":"https:\/\/lindungihutan.com\/blog\/wp-json\/wp\/v2\/media?parent=20643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}