{"id":4236,"date":"2026-04-30T10:41:58","date_gmt":"2026-04-30T02:41:58","guid":{"rendered":"https:\/\/prisma-kgb.com\/?page_id=4236"},"modified":"2026-04-30T10:51:48","modified_gmt":"2026-04-30T02:51:48","slug":"demo","status":"publish","type":"page","link":"https:\/\/prisma-kgb.com\/ms\/demo\/","title":{"rendered":"Demo"},"content":{"rendered":"<style>.kb-row-layout-wrap.wp-block-kadence-rowlayout.kb-row-layout-id4236_8f058a-7d{margin-top:0px;margin-bottom:0px;}.kb-row-layout-id4236_8f058a-7d > .kt-row-column-wrap{align-content:end;}:where(.kb-row-layout-id4236_8f058a-7d > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:end;}.kb-row-layout-id4236_8f058a-7d > .kt-row-column-wrap{column-gap:var(--global-kb-gap-none, 0rem );row-gap:var(--global-kb-gap-none, 0rem );padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id4236_8f058a-7d{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kb-row-layout-id4236_8f058a-7d > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id4236_8f058a-7d > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id4236_8f058a-7d > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id4236_8f058a-7d alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-bottom\">\n<style>.kadence-column4236_fb9fec-01 > .kt-inside-inner-col{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kadence-column4236_fb9fec-01 > .kt-inside-inner-col,.kadence-column4236_fb9fec-01 > .kt-inside-inner-col:before{border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;}.kadence-column4236_fb9fec-01 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column4236_fb9fec-01 > .kt-inside-inner-col{flex-direction:column;}.kadence-column4236_fb9fec-01 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column4236_fb9fec-01 > .kt-inside-inner-col{background-color:#d8dee3;background-image:url('https:\/\/prisma-kgb.com\/wp-content\/uploads\/2020\/11\/page_bg_03.jpg');background-size:cover;background-position:center center;background-attachment:scroll;background-repeat:no-repeat;}.kadence-column4236_fb9fec-01 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column4236_fb9fec-01{position:relative;}.kadence-column4236_fb9fec-01, .kt-inside-inner-col > .kadence-column4236_fb9fec-01:not(.specificity){margin-top:10px;margin-right:20px;margin-bottom:0px;margin-left:20px;}@media all and (max-width: 1024px){.kadence-column4236_fb9fec-01 > .kt-inside-inner-col{padding-top:0px;padding-right:30px;padding-bottom:30px;padding-left:30px;flex-direction:column;justify-content:center;}}@media all and (max-width: 1024px){.kadence-column4236_fb9fec-01, .kt-inside-inner-col > .kadence-column4236_fb9fec-01:not(.specificity){margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}}@media all and (max-width: 767px){.kadence-column4236_fb9fec-01 > .kt-inside-inner-col{padding-top:0px;padding-right:30px;padding-bottom:0px;padding-left:30px;flex-direction:column;justify-content:center;}.kadence-column4236_fb9fec-01, .kt-inside-inner-col > .kadence-column4236_fb9fec-01:not(.specificity){margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column4236_fb9fec-01 inner-column-1\"><div class=\"kt-inside-inner-col\"><style>.kb-row-layout-wrap.wp-block-kadence-rowlayout.kb-row-layout-id4236_d5ed68-1c{margin-top:150px;margin-bottom:0px;}.kb-row-layout-id4236_d5ed68-1c > .kt-row-column-wrap{align-content:end;}:where(.kb-row-layout-id4236_d5ed68-1c > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:end;}.kb-row-layout-id4236_d5ed68-1c > .kt-row-column-wrap{column-gap:var(--global-kb-gap-none, 0rem );row-gap:var(--global-kb-gap-none, 0rem );max-width:1140px;margin-left:auto;margin-right:auto;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id4236_d5ed68-1c > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id4236_d5ed68-1c > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-wrap.wp-block-kadence-rowlayout.kb-row-layout-id4236_d5ed68-1c{margin-top:0px;margin-bottom:0px;}.kb-row-layout-id4236_d5ed68-1c > .kt-row-column-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id4236_d5ed68-1c alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-bottom\">\n<style>.kadence-column4236_405835-42 > .kt-inside-inner-col{padding-top:0px;padding-right:30px;padding-bottom:60px;padding-left:10px;}.kadence-column4236_405835-42 > .kt-inside-inner-col,.kadence-column4236_405835-42 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column4236_405835-42 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column4236_405835-42 > .kt-inside-inner-col{flex-direction:column;}.kadence-column4236_405835-42 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column4236_405835-42 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column4236_405835-42{position:relative;}.kadence-column4236_405835-42, .kt-inside-inner-col > .kadence-column4236_405835-42:not(.specificity){margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}@media all and (max-width: 1024px){.kadence-column4236_405835-42 > .kt-inside-inner-col{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;flex-direction:column;justify-content:center;}}@media all and (max-width: 1024px){.kadence-column4236_405835-42, .kt-inside-inner-col > .kadence-column4236_405835-42:not(.specificity){margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}}@media all and (max-width: 767px){.kadence-column4236_405835-42 > .kt-inside-inner-col{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;flex-direction:column;justify-content:center;}.kadence-column4236_405835-42, .kt-inside-inner-col > .kadence-column4236_405835-42:not(.specificity){margin-top:120px;margin-right:0px;margin-bottom:0px;margin-left:0px;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column4236_405835-42 inner-column-1\"><div class=\"kt-inside-inner-col\"><style>.wp-block-kadence-advancedheading.kt-adv-heading4236_dbe11a-8a, .wp-block-kadence-advancedheading.kt-adv-heading4236_dbe11a-8a[data-kb-block=\"kb-adv-heading4236_dbe11a-8a\"]{margin-bottom:22.5px;font-size:39px;font-weight:700;font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading4236_dbe11a-8a mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading4236_dbe11a-8a[data-kb-block=\"kb-adv-heading4236_dbe11a-8a\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading4236_dbe11a-8a img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading4236_dbe11a-8a[data-kb-block=\"kb-adv-heading4236_dbe11a-8a\"] img.kb-inline-image{width:150px;vertical-align:baseline;}@media all and (max-width: 1024px){.wp-block-kadence-advancedheading.kt-adv-heading4236_dbe11a-8a, .wp-block-kadence-advancedheading.kt-adv-heading4236_dbe11a-8a[data-kb-block=\"kb-adv-heading4236_dbe11a-8a\"]{font-size:80px;}}@media all and (max-width: 767px){.wp-block-kadence-advancedheading.kt-adv-heading4236_dbe11a-8a, .wp-block-kadence-advancedheading.kt-adv-heading4236_dbe11a-8a[data-kb-block=\"kb-adv-heading4236_dbe11a-8a\"]{font-size:45px;line-height:1em;}}<\/style>\n<h2 class=\"kt-adv-heading4236_dbe11a-8a wp-block-kadence-advancedheading has-theme-palette-3-color has-text-color\" data-kb-block=\"kb-adv-heading4236_dbe11a-8a\">Demo PRisMA<\/h2>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading4236_e2c800-68, .wp-block-kadence-advancedheading.kt-adv-heading4236_e2c800-68[data-kb-block=\"kb-adv-heading4236_e2c800-68\"]{font-style:normal;color:#60656a;}.wp-block-kadence-advancedheading.kt-adv-heading4236_e2c800-68 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading4236_e2c800-68[data-kb-block=\"kb-adv-heading4236_e2c800-68\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading4236_e2c800-68 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading4236_e2c800-68[data-kb-block=\"kb-adv-heading4236_e2c800-68\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading4236_e2c800-68 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading4236_e2c800-68\">Untuk mengakses buku kerja demo interaktif, sila pilih peranan anda dan berikan butiran di bawah untuk tujuan pengesahan.<\/p>\n<\/div><\/div>\n\n\n<style>.kadence-column4236_31df5f-31 > .kt-inside-inner-col{padding-bottom:var(--global-kb-spacing-xs, 1rem);}.kadence-column4236_31df5f-31 > .kt-inside-inner-col,.kadence-column4236_31df5f-31 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column4236_31df5f-31 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column4236_31df5f-31 > .kt-inside-inner-col{flex-direction:column;}.kadence-column4236_31df5f-31 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column4236_31df5f-31 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column4236_31df5f-31{position:relative;}@media all and (max-width: 1024px){.kadence-column4236_31df5f-31 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column4236_31df5f-31 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column4236_31df5f-31\"><div class=\"kt-inside-inner-col\">\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"500\" height=\"290\" src=\"https:\/\/prisma-kgb.com\/wp-content\/uploads\/2026\/04\/demo-1536x890-1-1.jpeg\" alt=\"\" class=\"wp-image-4226\" srcset=\"https:\/\/prisma-kgb.com\/wp-content\/uploads\/2026\/04\/demo-1536x890-1-1.jpeg 500w, https:\/\/prisma-kgb.com\/wp-content\/uploads\/2026\/04\/demo-1536x890-1-1-300x174.jpeg 300w, https:\/\/prisma-kgb.com\/wp-content\/uploads\/2026\/04\/demo-1536x890-1-1-18x10.jpeg 18w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div><\/div>\n\n<\/div><\/div><\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-wrap.wp-block-kadence-rowlayout.kb-row-layout-id4236_8a715d-89{margin-top:20px;margin-bottom:0px;}.kb-row-layout-id4236_8a715d-89 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id4236_8a715d-89 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id4236_8a715d-89 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-none, 0rem );row-gap:var(--global-kb-gap-none, 0rem );max-width:var( --global-content-width, 1170px );padding-left:var(--global-content-edge-padding);padding-right:var(--global-content-edge-padding);padding-right:16px;padding-left:16px;grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id4236_8a715d-89{border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;overflow:clip;isolation:isolate;}.kb-row-layout-id4236_8a715d-89 > .kt-row-layout-overlay{border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;}.kb-row-layout-id4236_8a715d-89 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-wrap.wp-block-kadence-rowlayout.kb-row-layout-id4236_8a715d-89{margin-top:60px;margin-bottom:0px;}}@media all and (max-width: 1024px){.kb-row-layout-id4236_8a715d-89 > .kt-row-column-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id4236_8a715d-89 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id4236_8a715d-89 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top kb-theme-content-width\">\n<style>.kadence-column4236_193740-25 > .kt-inside-inner-col,.kadence-column4236_193740-25 > .kt-inside-inner-col:before{border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;}.kadence-column4236_193740-25 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column4236_193740-25 > .kt-inside-inner-col{flex-direction:column;}.kadence-column4236_193740-25 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column4236_193740-25 > .kt-inside-inner-col{background-image:url('https:\/\/prisma-kgb.com\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-22-233748.png');background-size:cover;background-position:center center;background-attachment:scroll;background-repeat:no-repeat;}.kadence-column4236_193740-25 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column4236_193740-25{position:relative;}@media all and (max-width: 1024px){.kadence-column4236_193740-25 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column4236_193740-25 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column4236_193740-25\"><div class=\"kt-inside-inner-col\">\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\">\n  <title>PRiSMARisk \u00b7 Demo Access Portal<\/title>\n  <!-- Google Fonts for modern typography -->\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&#038;display=swap\" rel=\"stylesheet\">\n  <!-- Font Awesome 6 (free icons) -->\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n  <!-- SweetAlert2 CDN (preserved) -->\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/sweetalert2@11\"><\/script>\n  <style>\n    * {\n      margin: 0;\n      padding: 0;\n      box-sizing: border-box;\n    }\n\n    body {\n      \/*background: linear-gradient(145deg, #0e153a 0%, #131D54 100%);*\/\n      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100vh;\n      padding: 2rem 1.5rem;\n    }\n\n    \/* main container \u2014 polished background, smoother radius, subtle glow *\/\n    .prisma-demo-access {\n      max-width: 1200px;\n      width: 100%;\n      margin: 0 auto;\n      background: rgba(255, 255, 255, 0.02);\n      backdrop-filter: blur(0px);\n      border-radius: 2rem;\n      padding: 1.2rem 1.8rem 2.8rem;\n      transition: all 0.2s ease;\n    }\n\n    \/* header box \u2014 refined spacing, glass-morphism influence *\/\n    .demo-header-box {\n      text-align: center;\n      margin-bottom: 3rem;\n    }\n\n    .demo-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.5rem;\n      background: rgba(255, 247, 237, 0.95);\n      color: #c2410c;\n      border: none;\n      padding: 0.5rem 1.2rem;\n      border-radius: 60px;\n      font-size: 0.8rem;\n      font-weight: 700;\n      letter-spacing: 0.3px;\n      text-transform: uppercase;\n      backdrop-filter: blur(4px);\n      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);\n      margin-bottom: 1.5rem;\n    }\n\n    .demo-badge::before {\n      content: \"\u2728\";\n      font-size: 1rem;\n      font-weight: normal;\n    }\n\n    .demo-header-box h2 {\n      margin: 0 0 0.75rem;\n      font-size: 3rem;\n      font-weight: 800;\n      background: linear-gradient(135deg, #FFFFFF 30%, #E0E7FF 80%);\n      background-clip: text;\n      -webkit-background-clip: text;\n      color: transparent;\n      letter-spacing: -0.02em;\n    }\n\n    .demo-header-box p {\n      margin: 0 auto;\n      max-width: 700px;\n      font-size: 1.05rem;\n      line-height: 1.6;\n      color: rgba(255, 255, 255, 0.8);\n      font-weight: 400;\n    }\n\n    \/* grid: modern card-like panels with depth *\/\n    .demo-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 2rem;\n    }\n\n    \/* cards: elevated, smooth corners, white background, refined border *\/\n    .demo-role-panel,\n    .demo-form-panel {\n      background: #ffffff;\n      border-radius: 1.75rem;\n      padding: 2rem 2rem 2.2rem;\n      box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.02);\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n      border: 1px solid rgba(255, 255, 255, 0.25);\n    }\n\n    .demo-role-panel:hover,\n    .demo-form-panel:hover {\n      transform: translateY(-3px);\n      box-shadow: 0 30px 50px -15px rgba(0, 0, 0, 0.3);\n    }\n\n    \/* headings inside panels *\/\n    .demo-role-panel h3,\n    .demo-form-panel h3 {\n      margin-top: 0;\n      margin-bottom: 0.5rem;\n      font-size: 1.7rem;\n      font-weight: 700;\n      color: #0f172a;\n      letter-spacing: -0.3px;\n      display: flex;\n      align-items: center;\n      gap: 0.6rem;\n    }\n\n    .demo-role-panel h3::before {\n      content: \"\ud83d\udc65\";\n      font-size: 1.6rem;\n      font-weight: 400;\n    }\n\n    .demo-form-panel h3::before {\n      content: \"\ud83d\udd10\";\n      font-size: 1.6rem;\n    }\n\n    .demo-role-panel p {\n      margin-top: 0.25rem;\n      margin-bottom: 1.8rem;\n      color: #475569;\n      font-size: 0.9rem;\n      line-height: 1.5;\n      border-left: 3px solid #f59e0b;\n      padding-left: 0.9rem;\n    }\n\n    \/* role buttons \u2014 modern interactive cards *\/\n    .role-buttons {\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n    }\n\n    .role-btn {\n      width: 100%;\n      text-align: left;\n      padding: 1.1rem 1.3rem;\n      border: 1.5px solid #e2e8f0;\n      background: #ffffff;\n      border-radius: 1.2rem;\n      cursor: pointer;\n      transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);\n      display: flex;\n      flex-direction: column;\n      gap: 0.25rem;\n      box-shadow: 0 1px 2px rgba(0,0,0,0.02);\n    }\n\n    .role-btn:hover {\n      border-color: #f59e0b;\n      background: #fffbeb;\n      transform: scale(0.99);\n      box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.1);\n    }\n\n    .role-btn.active {\n      border-color: #f59e0b;\n      background: #fffbeb;\n      box-shadow: 0 6px 14px -6px rgba(245, 158, 11, 0.2);\n      position: relative;\n    }\n\n    .role-btn.active::after {\n      content: \"\u2713\";\n      position: absolute;\n      right: 1.2rem;\n      top: 50%;\n      transform: translateY(-50%);\n      font-size: 1.3rem;\n      font-weight: 800;\n      color: #f59e0b;\n      background: white;\n      width: 26px;\n      height: 26px;\n      border-radius: 30px;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0 2px 6px rgba(0,0,0,0.05);\n    }\n\n    .role-title {\n      display: block;\n      font-size: 1.1rem;\n      font-weight: 800;\n      color: #0f172a;\n      margin-bottom: 0.2rem;\n      letter-spacing: -0.2px;\n    }\n\n    .role-desc {\n      display: block;\n      font-size: 0.8rem;\n      color: #5b6e8c;\n      line-height: 1.4;\n    }\n\n    \/* form group modern spacing *\/\n    .form-group {\n      margin-bottom: 1.5rem;\n    }\n\n    .form-group label {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      margin-bottom: 0.6rem;\n      font-weight: 600;\n      font-size: 0.9rem;\n      color: #1e293b;\n      letter-spacing: -0.2px;\n    }\n\n    .form-group label i {\n      color: #f59e0b;\n      font-size: 1rem;\n      width: 1.2rem;\n    }\n\n    .form-group input {\n      width: 100%;\n      box-sizing: border-box;\n      padding: 0.9rem 1rem;\n      border: 1.5px solid #e2edf2;\n      border-radius: 1rem;\n      font-size: 0.95rem;\n      font-family: 'Inter', monospace;\n      font-weight: 500;\n      color: #0f172a;\n      background: #fefefe;\n      transition: all 0.2s;\n    }\n\n    .form-group input:focus {\n      outline: none;\n      border-color: #f59e0b;\n      box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);\n      background: #ffffff;\n    }\n\n    .form-group input::placeholder {\n      color: #94a3b8;\n      font-weight: 400;\n      font-size: 0.85rem;\n    }\n\n    \/* login button: gradient + modern look *\/\n    .login-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 0.6rem;\n      width: 100%;\n      padding: 0.9rem 1.2rem;\n      border: none;\n      border-radius: 1.2rem;\n      background: linear-gradient(105deg, #f59e0b 0%, #f97316 100%);\n      color: white;\n      font-size: 1rem;\n      font-weight: 700;\n      cursor: pointer;\n      transition: all 0.25s ease;\n      box-shadow: 0 6px 14px -8px rgba(245, 158, 11, 0.5);\n      letter-spacing: 0.3px;\n    }\n\n    .login-btn i {\n      font-size: 1rem;\n      transition: transform 0.2s;\n    }\n\n    .login-btn:hover {\n      background: linear-gradient(105deg, #ea8c07 0%, #e96510 100%);\n      transform: translateY(-2px);\n      box-shadow: 0 12px 22px -12px rgba(245, 158, 11, 0.6);\n    }\n\n    .login-btn:active {\n      transform: translateY(1px);\n    }\n\n    \/* extra helper for hidden field *\/\n    #ptpGroup {\n      transition: all 0.2s ease;\n    }\n\n    \/* responsive refinements *\/\n    @media (max-width: 800px) {\n      .prisma-demo-access {\n        padding: 1rem 1.2rem 2rem;\n      }\n      .demo-grid {\n        gap: 1.5rem;\n      }\n      .demo-header-box h2 {\n        font-size: 2.2rem;\n      }\n      .demo-role-panel,\n      .demo-form-panel {\n        padding: 1.5rem;\n      }\n    }\n\n    @media (max-width: 700px) {\n      .demo-grid {\n        grid-template-columns: 1fr;\n      }\n      .demo-role-panel h3,\n      .demo-form-panel h3 {\n        font-size: 1.5rem;\n      }\n      .role-btn.active::after {\n        right: 0.9rem;\n      }\n    }\n\n    \/* subtle animated background decor *\/\n    .prisma-demo-access {\n      position: relative;\n      isolation: isolate;\n    }\n\n    \/* maintain all original input types and structure, just visual upgrade *\/\n    .demo-form-panel form {\n      margin-top: 0.2rem;\n    }\n\n    \/* fixing any hidden group style smoothness *\/\n    #ptpGroup {\n      display: none;\n    }\n  <\/style>\n<\/head>\n<body>\n<div class=\"prisma-demo-access\">\n  <div class=\"demo-header-box\">\n    \n    <!--<h2>Demo Access<\/h2>\n    <p>Sila pilih peranan anda dan log masuk untuk mengakses buku kerja penilaian tinjauan yang berkaitan.<\/p> -->\n  <\/div>\n\n  <div class=\"demo-grid\">\n    <div class=\"demo-role-panel\">\n      <h3>Pilih Peranan<\/h3>\n      <p>Sila pilih jenis akses yang sesuai sebelum log masuk.<\/p>\n\n      <div class=\"role-buttons\">\n        <button type=\"button\" class=\"role-btn active\" data-role=\"participant\" id=\"participantBtn\">\n          <span class=\"role-title\">Peserta<\/span>\n          <span class=\"role-desc\">Peserta Umum \/ Akses Lain-lain<\/span>\n        <\/button>\n\n        <button type=\"button\" class=\"role-btn\" data-role=\"trainer\" id=\"trainerBtn\">\n          <span class=\"role-title\">Pengajar \/ PTP<\/span>\n          <span class=\"role-desc\">Penilai Bertauliah \/ Akses PTP DOSH<\/span>\n        <\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"demo-form-panel\">\n      <h3>Log Masuk<\/h3>\n\n      <form method=\"POST\" action=\"\/demo-auth.php\" id=\"demoLoginForm\" novalidate>\n        <div class=\"form-group\">\n          <label for=\"name\"><i class=\"fas fa-user-circle\"><\/i> Nama Penuh<\/label>\n          <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"Sila masukkan nama penuh anda\" required>\n        <\/div>\n\n        <div class=\"form-group\">\n          <label for=\"ic\"><i class=\"fas fa-id-card\"><\/i> No. K\/P \/ ID<\/label>\n          <input type=\"text\" id=\"ic\" name=\"ic\" placeholder=\"Sila masukkan No. K\/P \/ ID anda\" required>\n        <\/div>\n\n        <div class=\"form-group\" id=\"ptpGroup\" style=\"display:none;\">\n          <label for=\"ptp_no\"><i class=\"fas fa-certificate\"><\/i> Nombor Pendaftaran PTP DOSH<\/label>\n          <input type=\"text\" id=\"ptp_no\" name=\"ptp_no\" placeholder=\"Sila masukkan nombor pendaftaran PTP DOSH anda\">\n        <\/div>\n\n        <div class=\"form-group\">\n          <label for=\"code\"><i class=\"fas fa-key\"><\/i> Kod Akses<\/label>\n          <input type=\"password\" id=\"code\" name=\"code\" placeholder=\"Masukkan kod akses\" required>\n        <\/div>\n\n        <input type=\"hidden\" name=\"role\" id=\"role\" value=\"participant\">\n\n        <button type=\"submit\" class=\"login-btn\"><i class=\"fas fa-arrow-right-to-bracket\"><\/i> Log Masuk<\/button>\n      <\/form>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- Keep exact original logic, no functional changes, only UI polish -->\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  const roleInput = document.getElementById(\"role\");\n  const participantBtn = document.getElementById(\"participantBtn\");\n  const trainerBtn = document.getElementById(\"trainerBtn\");\n  const ptpGroup = document.getElementById(\"ptpGroup\");\n  const ptpInput = document.getElementById(\"ptp_no\");\n  const form = document.getElementById(\"demoLoginForm\");\n\n  function setRole(role) {\n    roleInput.value = role;\n\n    if (role === \"participant\") {\n      participantBtn.classList.add(\"active\");\n      trainerBtn.classList.remove(\"active\");\n      ptpGroup.style.display = \"none\";\n      ptpInput.removeAttribute(\"required\");\n      ptpInput.value = \"\";\n    } else if (role === \"trainer\") {\n      trainerBtn.classList.add(\"active\");\n      participantBtn.classList.remove(\"active\");\n      ptpGroup.style.display = \"block\";\n      ptpInput.setAttribute(\"required\", \"required\");\n    }\n  }\n\n  participantBtn.addEventListener(\"click\", function () {\n    setRole(\"participant\");\n  });\n\n  trainerBtn.addEventListener(\"click\", function () {\n    setRole(\"trainer\");\n  });\n\n  const params = new URLSearchParams(window.location.search);\n  const error = params.get(\"error\");\n  const role = params.get(\"role\");\n\n  if (role === \"trainer\") {\n    setRole(\"trainer\");\n  } else {\n    setRole(\"participant\");\n  }\n\n  if (error) {\n    Swal.fire({\n      icon: \"error\",\n      title: \"Login Failed\",\n      text: error,\n      confirmButtonText: \"OK\"\n    });\n\n    const cleanUrl = window.location.origin + window.location.pathname + (role ? \"?role=\" + encodeURIComponent(role) : \"\");\n    window.history.replaceState({}, document.title, cleanUrl);\n  }\n\n  form.addEventListener(\"submit\", function (e) {\n    const currentRole = roleInput.value;\n    const name = document.getElementById(\"name\").value.trim();\n    const ic = document.getElementById(\"ic\").value.trim();\n    const code = document.getElementById(\"code\").value.trim();\n    const ptp = ptpInput.value.trim();\n\n    if (!name) {\n      e.preventDefault();\n      Swal.fire({\n        icon: \"warning\",\n        title: \"Required Field\",\n        text: \"Nama Penuh diperlukan.\"\n      });\n      return;\n    }\n\n    if (!ic) {\n      e.preventDefault();\n      Swal.fire({\n        icon: \"warning\",\n        title: \"Required Field\",\n        text: \"No. KP diperlukan.\"\n      });\n      return;\n    }\n\n    if (currentRole === \"trainer\" && !ptp) {\n      e.preventDefault();\n      Swal.fire({\n        icon: \"warning\",\n        title: \"Required Field\",\n        text: \"Nombor Pendaftaran PTP DOSH diperlukan untuk Jurulatih \/ PTP.\"\n      });\n      return;\n    }\n\n    if (!code) {\n      e.preventDefault();\n      Swal.fire({\n        icon: \"warning\",\n        title: \"Required Field\",\n        text: \"Kod Akses diperlukan.\"\n      });\n      return;\n    }\n\n    Swal.fire({\n      title: \"Pengesahan Identiti...\",\n      text: \"Sila tunggu sebentar sementara kami mengesahkan akses anda.\",\n      allowOutsideClick: false,\n      allowEscapeKey: false,\n      showConfirmButton: false,\n      didOpen: () => {\n        Swal.showLoading();\n      }\n    });\n  });\n});\n<\/script>\n<\/body>\n<\/html>\n<\/div><\/div>\n\n\n<style>.kadence-column4236_3329a1-bd > .kt-inside-inner-col,.kadence-column4236_3329a1-bd > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column4236_3329a1-bd > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column4236_3329a1-bd > .kt-inside-inner-col{flex-direction:column;}.kadence-column4236_3329a1-bd > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column4236_3329a1-bd > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column4236_3329a1-bd{position:relative;}@media all and (max-width: 1024px){.kadence-column4236_3329a1-bd > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column4236_3329a1-bd > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column4236_3329a1-bd\"><div class=\"kt-inside-inner-col\"><\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-wrap.wp-block-kadence-rowlayout.kb-row-layout-id4236_142b1a-bf{margin-top:60px;margin-bottom:0px;}.kb-row-layout-id4236_142b1a-bf > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id4236_142b1a-bf > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id4236_142b1a-bf > .kt-row-column-wrap{column-gap:var(--global-kb-gap-none, 0rem );row-gap:var(--global-kb-gap-none, 0rem );max-width:var( --global-content-width, 1170px );padding-left:var(--global-content-edge-padding);padding-right:var(--global-content-edge-padding);padding-right:20px;padding-left:20px;grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id4236_142b1a-bf{border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;overflow:clip;isolation:isolate;}.kb-row-layout-id4236_142b1a-bf > .kt-row-layout-overlay{border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;}.kb-row-layout-id4236_142b1a-bf > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-wrap.wp-block-kadence-rowlayout.kb-row-layout-id4236_142b1a-bf{margin-top:60px;margin-bottom:0px;}}@media all and (max-width: 1024px){.kb-row-layout-id4236_142b1a-bf > .kt-row-column-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id4236_142b1a-bf > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id4236_142b1a-bf alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top kb-theme-content-width\">\n<style>.kadence-column4236_e744a7-4e > .kt-inside-inner-col,.kadence-column4236_e744a7-4e > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column4236_e744a7-4e > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column4236_e744a7-4e > .kt-inside-inner-col{flex-direction:column;}.kadence-column4236_e744a7-4e > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column4236_e744a7-4e > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column4236_e744a7-4e{position:relative;}@media all and (max-width: 1024px){.kadence-column4236_e744a7-4e > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column4236_e744a7-4e > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column4236_e744a7-4e\"><div class=\"kt-inside-inner-col\"><\/div><\/div>\n\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Demo PRisMA Untuk mengakses buku kerja demo interaktif, sila pilih peranan anda dan berikan butiran di bawah untuk tujuan pengesahan. PRiSMARisk \u00b7 Demo Access Portal Pilih Peranan Sila pilih jenis akses yang sesuai sebelum log masuk. Peserta Peserta Umum \/ Akses Lain-lain Pengajar \/ PTP Penilai Bertauliah \/ Akses PTP DOSH Log Masuk Nama Penuh&#8230;<\/p>","protected":false},"author":3,"featured_media":3079,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":true,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-4236","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/prisma-kgb.com\/ms\/wp-json\/wp\/v2\/pages\/4236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prisma-kgb.com\/ms\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/prisma-kgb.com\/ms\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/prisma-kgb.com\/ms\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/prisma-kgb.com\/ms\/wp-json\/wp\/v2\/comments?post=4236"}],"version-history":[{"count":3,"href":"https:\/\/prisma-kgb.com\/ms\/wp-json\/wp\/v2\/pages\/4236\/revisions"}],"predecessor-version":[{"id":4242,"href":"https:\/\/prisma-kgb.com\/ms\/wp-json\/wp\/v2\/pages\/4236\/revisions\/4242"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/prisma-kgb.com\/ms\/wp-json\/wp\/v2\/media\/3079"}],"wp:attachment":[{"href":"https:\/\/prisma-kgb.com\/ms\/wp-json\/wp\/v2\/media?parent=4236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}