{"id":3105,"date":"2026-10-13T14:54:48","date_gmt":"2026-10-13T06:54:48","guid":{"rendered":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/?page_id=3105"},"modified":"2026-10-16T10:50:05","modified_gmt":"2026-10-16T02:50:05","slug":"sumber-manusia","status":"publish","type":"page","link":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/sumber-manusia\/","title":{"rendered":"SUMBER MANUSIA"},"content":{"rendered":"\n<style>\n\n\/* =========================================================\n   HOSPITAL SIBU \u2014 SEKSYEN SUMBER MANUSIA\n   MODERN 3D MEDICAL PORTAL\n   HEADER MEDICAL 3D ENHANCED\n   WORDPRESS SAFE\n   ========================================================= *\/\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');\n\n:root {\n    --primary:#174E56;\n    --primary-light:#286C73;\n    --primary-dark:#123E45;\n\n    --cyan:#55AAB0;\n    --cyan-soft:#78C3C8;\n\n    --navy:#082f49;\n    --dark:#0f172a;\n    --muted:#64748b;\n\n    --white:#ffffff;\n\n    --font-main:'Plus Jakarta Sans',sans-serif;\n    --font-tech:'Space Grotesk',sans-serif;\n\n    --shadow:\n        0 25px 55px rgba(23,78,86,.12),\n        0 8px 20px rgba(15,23,42,.06);\n\n    --shadow-3d:\n        0 20px 40px rgba(23,78,86,.14),\n        0 8px 15px rgba(15,23,42,.08),\n        inset 0 1px 0 rgba(255,255,255,.9);\n}\n\n\n\/* =========================================================\n   MAIN WRAPPER\n   ========================================================= *\/\n\n.hr-smart-wrapper {\n    width:100%;\n    max-width:1250px;\n    margin:30px auto;\n    padding:0 15px;\n    box-sizing:border-box;\n    font-family:var(--font-main);\n    color:var(--dark);\n}\n\n\n\/* =========================================================\n   HERO HEADER\n   ========================================================= *\/\n\n.hr-hero {\n    position:relative;\n    overflow:hidden;\n\n    min-height:185px;\n    height:185px;\n\n    border-radius:30px;\n    padding:28px 30px;\n\n    box-sizing:border-box;\n\n    display:flex;\n    align-items:center;\n    justify-content:center;\n\n    text-align:center;\n\n    background:\n        radial-gradient(\n            circle at 85% 35%,\n            rgba(120,195,200,.35),\n            transparent 20%\n        ),\n        radial-gradient(\n            circle at 70% 90%,\n            rgba(70,145,152,.25),\n            transparent 25%\n        ),\n        linear-gradient(\n            135deg,\n            #123E45 0%,\n            #174E56 45%,\n            #286C73 100%\n        );\n\n    box-shadow:\n        0 25px 60px rgba(23,78,86,.25);\n\n    color:white;\n    isolation:isolate;\n}\n\n\n\/* =========================================================\n   HERO GRID\n   ========================================================= *\/\n\n.hr-hero::before {\n    content:\"\";\n    position:absolute;\n    inset:0;\n\n    background-image:\n        linear-gradient(\n            rgba(255,255,255,.06) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255,255,255,.06) 1px,\n            transparent 1px\n        );\n\n    background-size:35px 35px;\n\n    mask-image:\n        linear-gradient(\n            to right,\n            transparent,\n            black 25%,\n            black 75%,\n            transparent\n        );\n\n    pointer-events:none;\n}\n\n\n\/* =========================================================\n   LARGE MEDICAL CROSS\n   HANYA SATU\n   ========================================================= *\/\n\n.hr-hero::after {\n    content:\"+\";\n\n    position:absolute;\n\n    right:95px;\n    top:25px;\n\n    font-size:145px;\n    line-height:1;\n\n    font-weight:800;\n\n    color:rgba(255,255,255,.055);\n\n    animation:\n        medicalFloat 7s ease-in-out infinite;\n\n    pointer-events:none;\n}\n\n\n\/* =========================================================\n   HERO CONTENT\n   ========================================================= *\/\n\n.hr-hero-content {\n    position:relative;\n    z-index:20;\n\n    width:100%;\n    max-width:none;\n\n    display:flex;\n    flex-direction:column;\n\n    align-items:center;\n    justify-content:center;\n\n    text-align:center;\n}\n\n\n.hr-hero h1 {\n    margin:0;\n\n    font-size:clamp(34px,5vw,56px);\n\n    line-height:1;\n    font-weight:800;\n\n    letter-spacing:-1.5px;\n\n    color:#fff;\n    text-align:center;\n}\n\n\n\/* =========================================================\n   TYPING\n   ========================================================= *\/\n\n.hr-typing {\n    display:inline-block;\n\n    max-width:90vw;\n\n    overflow:hidden;\n    white-space:nowrap;\n\n    vertical-align:bottom;\n\n    border-right:3px solid rgba(255,255,255,.95);\n\n    width:0;\n\n    animation:\n        hrTyping 3.2s steps(14,end) infinite,\n        hrTypingCursor .75s step-end infinite;\n}\n\n\n@keyframes hrTyping {\n\n    0% {\n        width:0;\n    }\n\n    35% {\n        width:100%;\n    }\n\n    65% {\n        width:100%;\n    }\n\n    100% {\n        width:0;\n    }\n}\n\n\n@keyframes hrTypingCursor {\n\n    0%,100% {\n        border-color:rgba(255,255,255,.95);\n    }\n\n    50% {\n        border-color:transparent;\n    }\n}\n\n\n\/* =========================================================\n   MEDICAL 3D ICONS\n   IKON BERADA TERUS PADA BACKGROUND\n   BUKAN DALAM BUBBLE\n   ========================================================= *\/\n\n.hr-medical-icons {\n    position:absolute;\n    inset:0;\n\n    z-index:6;\n\n    pointer-events:none;\n}\n\n\n\/* ICON BASE *\/\n\n.hr-medical-icon {\n    position:absolute;\n\n    display:flex;\n    align-items:center;\n    justify-content:center;\n\n    font-family:\n        \"Segoe UI Emoji\",\n        \"Apple Color Emoji\",\n        sans-serif;\n\n    line-height:1;\n\n    opacity:.78;\n\n    filter:\n        drop-shadow(\n            0 8px 8px rgba(0,0,0,.12)\n        );\n\n    text-shadow:\n        0 2px 0 rgba(255,255,255,.25),\n        0 7px 15px rgba(0,0,0,.18);\n\n    transform-style:preserve-3d;\n\n    pointer-events:none;\n}\n\n\n\/* HOSPITAL *\/\n\n.hr-icon-hospital {\n    left:7%;\n    top:28%;\n\n    font-size:38px;\n\n    animation:\n        medicalIconFloat 6s ease-in-out infinite;\n}\n\n\n\/* STETHOSCOPE *\/\n\n.hr-icon-stetho {\n    left:17%;\n    bottom:18%;\n\n    font-size:31px;\n\n    animation:\n        medicalIconFloat 7s ease-in-out infinite reverse;\n}\n\n\n\/* PILL *\/\n\n.hr-icon-pill {\n    right:19%;\n    bottom:17%;\n\n    font-size:28px;\n\n    animation:\n        medicalIconFloat 6.5s ease-in-out infinite;\n}\n\n\n\/* MEDICAL SYMBOL *\/\n\n.hr-icon-medical {\n    right:8%;\n    top:25%;\n\n    font-size:35px;\n\n    animation:\n        medicalIconFloat 7.5s ease-in-out infinite reverse;\n}\n\n\n\/* HEART *\/\n\n.hr-icon-heart {\n    left:28%;\n    top:16%;\n\n    font-size:23px;\n\n    opacity:.55;\n\n    animation:\n        medicalHeart 3.5s ease-in-out infinite;\n}\n\n\n\/* SMALL PLUS 1 *\/\n\n.hr-icon-plus-1 {\n    left:10%;\n    bottom:18%;\n\n    font-size:27px;\n\n    font-weight:800;\n\n    color:\n        rgba(255,255,255,.55);\n\n    animation:\n        smallPlusFloat 5s ease-in-out infinite;\n}\n\n\n\/* SMALL PLUS 2 *\/\n\n.hr-icon-plus-2 {\n    right:29%;\n    top:17%;\n\n    font-size:21px;\n\n    font-weight:800;\n\n    color:\n        rgba(255,255,255,.48);\n\n    animation:\n        smallPlusFloat 6s ease-in-out infinite reverse;\n}\n\n\n\/* =========================================================\n   3D MEDICAL ICON EFFECT\n   ========================================================= *\/\n\n.hr-medical-icon::after {\n    content:\"\";\n\n    position:absolute;\n\n    width:55%;\n    height:25%;\n\n    left:22%;\n    bottom:-8px;\n\n    border-radius:50%;\n\n    background:\n        rgba(0,0,0,.15);\n\n    filter:blur(5px);\n\n    z-index:-1;\n\n    opacity:.35;\n}\n\n\n\/* =========================================================\n   BUBBLE \/ ORBS\n   KEKAL\n   ========================================================= *\/\n\n.hr-orb {\n    position:absolute;\n    border-radius:50%;\n    pointer-events:none;\n\n    z-index:4;\n}\n\n\n.hr-orb-1 {\n    width:150px;\n    height:150px;\n\n    right:70px;\n    bottom:-50px;\n\n    background:\n        radial-gradient(\n            circle at 30% 25%,\n            rgba(255,255,255,.5),\n            rgba(255,255,255,.08) 40%,\n            rgba(255,255,255,.02)\n        );\n\n    border:\n        1px solid rgba(255,255,255,.2);\n\n    box-shadow:\n        inset -20px -20px 40px rgba(0,0,0,.08),\n        0 20px 50px rgba(0,0,0,.10);\n\n    animation:\n        orbFloat 7s ease-in-out infinite;\n}\n\n\n.hr-orb-2 {\n    width:65px;\n    height:65px;\n\n    right:260px;\n    top:35px;\n\n    background:\n        rgba(255,255,255,.08);\n\n    border:\n        1px solid rgba(255,255,255,.25);\n\n    backdrop-filter:blur(5px);\n\n    animation:\n        orbFloat 5s ease-in-out infinite reverse;\n}\n\n\n.hr-orb-3 {\n    width:20px;\n    height:20px;\n\n    right:340px;\n    bottom:45px;\n\n    background:#78C3C8;\n\n    box-shadow:\n        0 0 25px rgba(120,195,200,.7);\n\n    animation:\n        pulseOrb 2.5s infinite;\n}\n\n\n\/* =========================================================\n   SMALL FLOATING DOTS\n   ========================================================= *\/\n\n.hr-floating-dot {\n    position:absolute;\n\n    width:7px;\n    height:7px;\n\n    border-radius:50%;\n\n    background:#A7D8DB;\n\n    box-shadow:\n        0 0 15px rgba(120,195,200,.9);\n\n    opacity:.7;\n\n    z-index:5;\n\n    animation:\n        dotFloat 4s ease-in-out infinite;\n}\n\n\n.hr-dot-1 {\n    left:24%;\n    top:68%;\n}\n\n\n.hr-dot-2 {\n    right:24%;\n    top:72%;\n\n    animation-delay:1.5s;\n}\n\n\n.hr-dot-3 {\n    right:38%;\n    bottom:15%;\n\n    width:5px;\n    height:5px;\n\n    animation-delay:.8s;\n}\n\n\n\/* =========================================================\n   DIGITAL CIRCUIT\n   ========================================================= *\/\n\n.hr-circuit {\n    position:absolute;\n\n    right:35px;\n    bottom:35px;\n\n    width:280px;\n    height:100px;\n\n    opacity:.45;\n\n    z-index:5;\n}\n\n\n.hr-circuit span {\n    position:absolute;\n\n    height:1px;\n\n    background:\n        rgba(255,255,255,.45);\n}\n\n\n.hr-circuit .line1 {\n    width:120px;\n    right:0;\n    top:20px;\n}\n\n\n.hr-circuit .line2 {\n    width:190px;\n    right:0;\n    top:55px;\n}\n\n\n.hr-circuit .line3 {\n    width:90px;\n    right:70px;\n    top:82px;\n}\n\n\n.hr-circuit i {\n    position:absolute;\n\n    width:7px;\n    height:7px;\n\n    border-radius:50%;\n\n    background:#78C3C8;\n\n    box-shadow:\n        0 0 12px #78C3C8;\n}\n\n\n.hr-circuit .dot1 {\n    right:0;\n    top:17px;\n}\n\n\n.hr-circuit .dot2 {\n    right:0;\n    top:52px;\n}\n\n\n.hr-circuit .dot3 {\n    right:65px;\n    top:79px;\n}\n\n\n\/* =========================================================\n   CONTENT OUTER BACKGROUND\n   ========================================================= *\/\n\n.hr-content-shell {\n    position:relative;\n\n    margin-top:25px;\n\n    padding:22px;\n\n    border-radius:32px;\n\n    background:\n        radial-gradient(\n            circle at 85% 5%,\n            rgba(85,170,176,.22),\n            transparent 25%\n        ),\n        radial-gradient(\n            circle at 5% 90%,\n            rgba(40,108,115,.14),\n            transparent 27%\n        ),\n        linear-gradient(\n            135deg,\n            #F7FBFB,\n            #E8F3F4\n        );\n\n    border:\n        1px solid rgba(40,108,115,.10);\n\n    box-shadow:\n        0 30px 70px rgba(8,47,73,.10),\n        inset 0 1px 0 rgba(255,255,255,.9);\n\n    overflow:hidden;\n\n    isolation:isolate;\n}\n\n\n.hr-content-shell::before {\n    content:\"\";\n\n    position:absolute;\n    inset:0;\n\n    background-image:\n        linear-gradient(\n            rgba(40,108,115,.035) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(40,108,115,.035) 1px,\n            transparent 1px\n        );\n\n    background-size:28px 28px;\n\n    pointer-events:none;\n\n    z-index:0;\n}\n\n\n.hr-content-shell::after {\n    content:\"\";\n\n    position:absolute;\n\n    width:300px;\n    height:300px;\n\n    right:-120px;\n    bottom:-130px;\n\n    border-radius:50%;\n\n    background:\n        radial-gradient(\n            circle,\n            rgba(85,170,176,.24),\n            rgba(40,108,115,.07) 38%,\n            transparent 70%\n        );\n\n    filter:blur(3px);\n\n    pointer-events:none;\n\n    z-index:0;\n}\n\n\n\/* =========================================================\n   MAIN LAYOUT\n   ========================================================= *\/\n\n.hr-tab-layout {\n    display:grid;\n\n    grid-template-columns:\n        270px minmax(0,1fr);\n\n    gap:25px;\n\n    position:relative;\n\n    z-index:2;\n\n    align-items:start;\n}\n\n\n\/* =========================================================\n   SIDEBAR\n   ========================================================= *\/\n\n.hr-sidebar {\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255,255,255,.88),\n            rgba(240,250,255,.75)\n        );\n\n    backdrop-filter:blur(20px);\n    -webkit-backdrop-filter:blur(20px);\n\n    border:\n        1px solid rgba(255,255,255,.9);\n\n    border-radius:28px;\n\n    padding:18px;\n\n    box-shadow:var(--shadow-3d);\n\n    display:flex;\n    flex-direction:column;\n\n    gap:10px;\n\n    position:sticky;\n\n    top:25px;\n\n    height:fit-content;\n}\n\n\n.hr-sidebar::before {\n    display:block;\n\n    font-family:var(--font-tech);\n\n    font-size:10px;\n\n    font-weight:700;\n\n    letter-spacing:2px;\n\n    color:var(--primary);\n\n    padding:5px 12px 14px;\n\n    opacity:.75;\n}\n\n\n\/* =========================================================\n   TAB BUTTON\n   ========================================================= *\/\n\n.hr-tab-btn {\n    appearance:none;\n\n    border:1px solid transparent;\n\n    background:transparent;\n\n    color:#64748b;\n\n    padding:15px 17px;\n\n    border-radius:17px;\n\n    font-family:var(--font-main);\n\n    font-size:14px;\n\n    font-weight:700;\n\n    text-align:left;\n\n    cursor:pointer;\n\n    display:flex;\n\n    align-items:center;\n\n    gap:12px;\n\n    position:relative;\n\n    overflow:hidden;\n\n    transition:\n        transform .35s ease,\n        background .35s ease,\n        box-shadow .35s ease,\n        color .35s ease;\n}\n\n\n.hr-tab-btn .icon {\n    width:40px;\n    height:40px;\n\n    min-width:40px;\n\n    border-radius:13px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    background:\n        linear-gradient(\n            145deg,\n            #F2F8F9,\n            #E8F3F4\n        );\n\n    font-size:17px;\n\n    box-shadow:\n        inset 0 1px 2px rgba(255,255,255,.9),\n        0 5px 10px rgba(15,23,42,.05);\n\n    transition:.35s ease;\n}\n\n\n.hr-tab-btn:hover {\n    color:var(--primary);\n\n    background:\n        rgba(40,108,115,.07);\n\n    transform:\n        translateX(5px);\n\n    border-color:\n        rgba(40,108,115,.10);\n}\n\n\n.hr-tab-btn:hover .icon {\n    transform:\n        scale(1.08)\n        rotate(-4deg);\n}\n\n\n.hr-tab-btn.active {\n    color:white;\n\n    background:\n        linear-gradient(\n            135deg,\n            #1A5A62,\n            #174E56,\n            #286C73\n        );\n\n    box-shadow:\n        0 14px 28px rgba(40,108,115,.30),\n        inset 0 1px 0 rgba(255,255,255,.25);\n\n    transform:\n        translateX(7px);\n}\n\n\n.hr-tab-btn.active .icon {\n    background:\n        rgba(255,255,255,.18);\n\n    color:white;\n\n    box-shadow:\n        inset 0 1px 0 rgba(255,255,255,.25),\n        0 5px 12px rgba(0,0,0,.10);\n}\n\n\n.hr-tab-btn.active::before {\n    content:\"\";\n\n    position:absolute;\n\n    left:0;\n    top:18%;\n\n    width:4px;\n    height:64%;\n\n    border-radius:\n        0 5px 5px 0;\n\n    background:\n        var(--cyan);\n\n    box-shadow:\n        0 0 14px var(--cyan);\n}\n\n\n\/* =========================================================\n   CONTENT AREA\n   ========================================================= *\/\n\n.hr-content-area {\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255,255,255,.95),\n            rgba(249,253,255,.91)\n        );\n\n    border:\n        1px solid rgba(255,255,255,.95);\n\n    border-radius:30px;\n\n    padding:42px;\n\n    min-height:0;\n    height:auto;\n\n    box-sizing:border-box;\n\n    box-shadow:\n        0 28px 60px rgba(15,23,42,.08),\n        inset 0 1px 0 white;\n\n    position:relative;\n\n    overflow:hidden;\n}\n\n\n.hr-content-area::before {\n    content:\"\";\n\n    position:absolute;\n\n    right:-50px;\n    top:-50px;\n\n    width:200px;\n    height:200px;\n\n    border-radius:50%;\n\n    border:\n        1px solid rgba(40,108,115,.10);\n\n    box-shadow:\n        0 0 0 25px rgba(40,108,115,.025),\n        0 0 0 50px rgba(40,108,115,.018);\n\n    pointer-events:none;\n}\n\n\n.hr-content-area::after {\n    content:\"\";\n\n    position:absolute;\n\n    right:30px;\n    bottom:30px;\n\n    width:100px;\n    height:100px;\n\n    background:\n        linear-gradient(\n            135deg,\n            transparent 48%,\n            rgba(85,170,176,.08) 49%,\n            transparent 51%\n        );\n\n    pointer-events:none;\n}\n\n\n\/* =========================================================\n   TAB CONTENT\n   ========================================================= *\/\n\n.hr-tab-content {\n    display:none;\n\n    animation:\n        contentIn .55s\n        cubic-bezier(.22,1,.36,1);\n\n    position:relative;\n\n    z-index:2;\n\n    width:100%;\n\n    box-sizing:border-box;\n}\n\n\n.hr-tab-content.active {\n    display:block;\n}\n\n\n@keyframes contentIn {\n\n    from {\n        opacity:0;\n\n        transform:\n            translateY(18px)\n            scale(.985);\n    }\n\n    to {\n        opacity:1;\n\n        transform:\n            translateY(0)\n            scale(1);\n    }\n}\n\n\n\/* =========================================================\n   TITLE\n   ========================================================= *\/\n\n.tab-title {\n    font-family:var(--font-tech);\n\n    font-size:2.15rem;\n\n    font-weight:600;\n\n    color:var(--navy);\n\n    margin:0 0 30px;\n\n    display:flex;\n\n    align-items:center;\n\n    gap:5px;\n\n    letter-spacing:-.7px;\n\n    position:relative;\n\n    z-index:2;\n}\n\n\n.tab-title::before {\n    content:\"\";\n\n    width:7px;\n    height:43px;\n\n    border-radius:8px;\n\n    background:\n        linear-gradient(\n            180deg,\n            var(--primary),\n            var(--cyan)\n        );\n\n    box-shadow:\n        0 0 18px\n        rgba(85,170,176,.35);\n\n    flex-shrink:0;\n}\n\n\n.tab-title::after {\n    content:\"\";\n\n    height:1px;\n\n    flex:1;\n\n    margin-left:12px;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(40,108,115,.25),\n            transparent\n        );\n}\n\n\n\/* =========================================================\n   PENGENALAN\n   ========================================================= *\/\n\n.intro-hero {\n    position:relative;\n\n    height:auto;\n    min-height:0;\n\n    padding:30px 32px;\n\n    border-radius:26px;\n\n    overflow:hidden;\n\n    background:\n        radial-gradient(\n            circle at 90% 10%,\n            rgba(85,170,176,.20),\n            transparent 30%\n        ),\n        linear-gradient(\n            135deg,\n            #F4FAFA,\n            #E8F3F4\n        );\n\n    border:\n        1px solid rgba(40,108,115,.10);\n\n    box-shadow:\n        0 15px 35px rgba(40,108,115,.07),\n        inset 0 1px 0 white;\n\n    box-sizing:border-box;\n}\n\n\n.intro-hero::before {\n    content:\"HR\";\n\n    position:absolute;\n\n    right:20px;\n    bottom:-35px;\n\n    font-family:var(--font-tech);\n\n    font-size:130px;\n\n    font-weight:800;\n\n    color:\n        rgba(40,108,115,.045);\n\n    pointer-events:none;\n}\n\n\n.intro-hero p {\n    position:relative;\n\n    z-index:2;\n\n    margin:0;\n\n    color:#475569;\n\n    font-size:15px;\n\n    line-height:1.9;\n\n    overflow-wrap:anywhere;\n}\n\n\n\/* =========================================================\n   STRATEGY\n   ========================================================= *\/\n\n.strategy-header {\n    margin-bottom:28px;\n\n    position:relative;\n\n    z-index:3;\n}\n\n\n.strategy-top-grid {\n    display:grid;\n\n    grid-template-columns:\n        minmax(0,1fr)\n        minmax(0,1fr);\n\n    gap:22px;\n\n    position:relative;\n\n    z-index:3;\n\n    align-items:stretch;\n}\n\n\n.strategy-card-3d {\n    position:relative;\n\n    min-height:0;\n    height:auto;\n\n    padding:32px;\n\n    border-radius:30px;\n\n    overflow:hidden;\n\n    transform-style:preserve-3d;\n\n    transition:\n        transform .45s\n        cubic-bezier(.22,1,.36,1),\n        box-shadow .45s ease;\n\n    box-sizing:border-box;\n}\n\n\n.strategy-card-3d h3 {\n    margin:0 0 15px;\n\n    font-family:var(--font-tech);\n\n    font-size:1.5rem;\n\n    font-weight:700;\n}\n\n\n.strategy-card-3d p {\n    position:relative;\n\n    z-index:3;\n\n    margin:0;\n\n    font-size:14px;\n\n    line-height:1.9;\n\n    overflow-wrap:anywhere;\n}\n\n\n\/* =========================================================\n   VISI\n   ========================================================= *\/\n\n.vision-card-3d {\n    background:\n        radial-gradient(\n            circle at 85% 15%,\n            rgba(120,195,200,.35),\n            transparent 25%\n        ),\n        radial-gradient(\n            circle at 10% 90%,\n            rgba(255,255,255,.12),\n            transparent 25%\n        ),\n        linear-gradient(\n            145deg,\n            #123E45,\n            #174E56 55%,\n            #286C73\n        );\n\n    color:white;\n\n    border:\n        1px solid rgba(255,255,255,.20);\n\n    box-shadow:\n        0 28px 50px rgba(23,78,86,.28),\n        0 10px 20px rgba(23,78,86,.12),\n        inset 0 1px 0 rgba(255,255,255,.35);\n}\n\n\n.vision-card-3d:hover {\n    transform:\n        translateY(-8px)\n        rotateX(2deg)\n        rotateY(-1deg);\n\n    box-shadow:\n        0 38px 65px rgba(23,78,86,.34),\n        0 15px 25px rgba(23,78,86,.15);\n}\n\n\n.vision-card-3d p {\n    color:\n        rgba(255,255,255,.91);\n}\n\n\n\/* =========================================================\n   MISI\n   ========================================================= *\/\n\n.mission-card-3d {\n    background:\n        radial-gradient(\n            circle at 90% 10%,\n            rgba(85,170,176,.18),\n            transparent 25%\n        ),\n        linear-gradient(\n            145deg,\n            #ffffff,\n            #EFF7F7\n        );\n\n    color:#0f172a;\n\n    border:\n        1px solid rgba(40,108,115,.14);\n\n    box-shadow:\n        0 25px 50px rgba(15,23,42,.08),\n        0 8px 18px rgba(23,78,86,.06),\n        inset 0 1px 0 white;\n}\n\n\n.mission-card-3d:hover {\n    transform:\n        translateY(-8px)\n        rotateX(2deg)\n        rotateY(1deg);\n\n    box-shadow:\n        0 35px 60px rgba(23,78,86,.15);\n}\n\n\n.mission-card-3d p {\n    color:#64748b;\n}\n\n\n\/* =========================================================\n   DECORATIVE CIRCLE\n   ========================================================= *\/\n\n.strategy-card-3d::before {\n    content:\"\";\n\n    position:absolute;\n\n    width:190px;\n    height:190px;\n\n    right:-85px;\n    bottom:-95px;\n\n    border-radius:50%;\n\n    border:\n        1px solid rgba(255,255,255,.18);\n\n    box-shadow:\n        0 0 0 20px rgba(255,255,255,.025),\n        0 0 0 40px rgba(255,255,255,.018);\n\n    pointer-events:none;\n}\n\n\n\/* =========================================================\n   OBJECTIVE\n   ========================================================= *\/\n\n.objective-full-card {\n    margin-top:24px;\n\n    height:auto;\n    min-height:0;\n\n    padding:30px 34px;\n\n    border-radius:30px;\n\n    position:relative;\n\n    overflow:hidden;\n\n    background:\n        radial-gradient(\n            circle at 95% 5%,\n            rgba(85,170,176,.16),\n            transparent 22%\n        ),\n        linear-gradient(\n            145deg,\n            #ffffff,\n            #F1F8F8\n        );\n\n    border:\n        1px solid rgba(40,108,115,.12);\n\n    box-shadow:\n        0 25px 50px rgba(15,23,42,.07),\n        0 8px 20px rgba(23,78,86,.05),\n        inset 0 1px 0 white;\n\n    transition:\n        transform .4s ease,\n        box-shadow .4s ease;\n\n    box-sizing:border-box;\n}\n\n\n.objective-full-card:hover {\n    transform:\n        translateY(-5px);\n\n    box-shadow:\n        0 32px 60px rgba(23,78,86,.12);\n}\n\n\n.objective-full-card::before {\n    content:\"\";\n\n    position:absolute;\n\n    inset:0;\n\n    background-image:\n        linear-gradient(\n            rgba(40,108,115,.025) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(40,108,115,.025) 1px,\n            transparent 1px\n        );\n\n    background-size:24px 24px;\n\n    pointer-events:none;\n}\n\n\n.objective-full-header {\n    display:flex;\n\n    align-items:center;\n\n    justify-content:flex-start;\n\n    gap:20px;\n\n    margin-bottom:18px;\n\n    position:relative;\n\n    z-index:2;\n}\n\n\n.objective-title-wrap {\n    display:flex;\n\n    align-items:center;\n\n    gap:15px;\n}\n\n\n.objective-full-header h3 {\n    margin:0;\n\n    font-family:var(--font-tech);\n\n    color:#082f49;\n\n    font-size:1.35rem;\n\n    font-weight:700;\n}\n\n\n.objective-single {\n    position:relative;\n\n    z-index:2;\n\n    display:flex;\n\n    align-items:flex-start;\n\n    gap:18px;\n\n    padding:18px 5px 4px;\n\n    border-top:\n        1px solid rgba(40,108,115,.10);\n}\n\n\n.objective-single p {\n    margin:0;\n\n    color:#475569;\n\n    font-size:14px;\n\n    line-height:1.9;\n\n    flex:1;\n\n    padding-top:2px;\n\n    overflow-wrap:anywhere;\n}\n\n\n\/* =========================================================\n   FOOTER\n   ========================================================= *\/\n\n.strategy-footer {\n    margin-top:18px;\n\n    padding:14px 18px;\n\n    border-radius:16px;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(40,108,115,.06),\n            rgba(85,170,176,.025)\n        );\n\n    border:\n        1px solid rgba(40,108,115,.08);\n\n    display:flex;\n\n    align-items:center;\n\n    gap:10px;\n\n    color:#64748b;\n\n    font-size:11px;\n}\n\n\n\/* =========================================================\n   SERVICES\n   ========================================================= *\/\n\n.services-intro {\n    margin:\n        -10px 0 30px;\n\n    color:var(--muted);\n\n    font-size:14px;\n\n    line-height:1.7;\n}\n\n\n.service-timeline {\n    position:relative;\n\n    padding:\n        8px 0 10px 78px;\n}\n\n\n.service-timeline::before {\n    content:\"\";\n\n    position:absolute;\n\n    left:29px;\n\n    top:20px;\n    bottom:20px;\n\n    width:3px;\n\n    background:\n        linear-gradient(\n            180deg,\n            var(--primary),\n            var(--cyan),\n            rgba(85,170,176,.15)\n        );\n\n    border-radius:10px;\n\n    box-shadow:\n        0 0 12px rgba(85,170,176,.20);\n}\n\n\n.service-item {\n    position:relative;\n\n    margin-bottom:22px;\n\n    min-height:0;\n}\n\n\n.service-item:last-child {\n    margin-bottom:0;\n}\n\n\n.service-node {\n    position:absolute;\n\n    left:-78px;\n\n    top:50%;\n\n    transform:translateY(-50%);\n\n    width:60px;\n    height:60px;\n\n    border-radius:18px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    font-family:var(--font-tech);\n\n    font-size:15px;\n\n    font-weight:700;\n\n    color:white;\n\n    background:\n        linear-gradient(\n            145deg,\n            var(--primary-dark),\n            var(--primary-light)\n        );\n\n    border:4px solid #e9faff;\n\n    box-shadow:\n        0 8px 18px rgba(23,78,86,.25),\n        0 0 0 1px rgba(85,170,176,.35),\n        inset 0 1px 0 rgba(255,255,255,.35);\n\n    z-index:3;\n\n    transition:.4s ease;\n}\n\n\n.service-node::after {\n    content:\"\";\n\n    position:absolute;\n\n    width:8px;\n    height:8px;\n\n    right:-3px;\n    top:-3px;\n\n    border-radius:50%;\n\n    background:var(--cyan);\n\n    box-shadow:\n        0 0 10px var(--cyan);\n\n    animation:\n        pulseNode 2s infinite;\n}\n\n\n.service-item::before {\n    content:\"\";\n\n    position:absolute;\n\n    left:-48px;\n\n    top:50%;\n\n    width:48px;\n    height:2px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--primary),\n            var(--cyan)\n        );\n}\n\n\n.service-card {\n    min-height:0;\n    height:auto;\n\n    display:flex;\n\n    align-items:center;\n\n    gap:18px;\n\n    padding:18px 22px;\n\n    border-radius:20px;\n\n    background:\n        linear-gradient(\n            145deg,\n            #ffffff,\n            #F3F8F9\n        );\n\n    border:\n        1px solid #D9E9EB;\n\n    box-shadow:\n        0 8px 20px rgba(15,23,42,.055),\n        inset 0 1px 0 white;\n\n    position:relative;\n\n    overflow:hidden;\n\n    transition:.4s ease;\n\n    box-sizing:border-box;\n}\n\n\n.service-info {\n    flex:1;\n    min-width:0;\n}\n\n\n.service-name {\n    display:block;\n\n    font-size:14px;\n\n    font-weight:700;\n\n    color:var(--navy);\n\n    line-height:1.6;\n\n    overflow-wrap:anywhere;\n}\n\n\n.service-code {\n    display:block;\n\n    margin-top:3px;\n\n    font-family:var(--font-tech);\n\n    font-size:10px;\n\n    letter-spacing:1.2px;\n\n    color:#94a3b8;\n}\n\n\n.service-arrow {\n    width:30px;\n    height:30px;\n\n    border-radius:9px;\n\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    color:var(--primary);\n\n    background:#E8F3F4;\n\n    font-size:15px;\n\n    transition:.35s ease;\n\n    flex-shrink:0;\n}\n\n\n.service-item:hover .service-card {\n    transform:\n        translateX(8px)\n        translateY(-3px);\n\n    border-color:\n        rgba(85,170,176,.40);\n\n    box-shadow:\n        0 18px 30px rgba(23,78,86,.13);\n}\n\n\n.service-item:hover .service-node {\n    transform:\n        translateY(-50%)\n        scale(1.10)\n        rotate(-4deg);\n\n    box-shadow:\n        0 12px 25px rgba(40,108,115,.30),\n        0 0 25px rgba(85,170,176,.30);\n}\n\n\n.service-item:hover .service-arrow {\n    transform:\n        translateX(5px);\n\n    background:\n        var(--primary);\n\n    color:white;\n}\n\n\n.service-card::before {\n    content:\"\";\n\n    position:absolute;\n\n    top:0;\n    left:-120%;\n\n    width:80%;\n    height:100%;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            rgba(255,255,255,.7),\n            transparent\n        );\n\n    transform:\n        skewX(-20deg);\n\n    transition:.7s;\n}\n\n\n.service-item:hover\n.service-card::before {\n    left:140%;\n}\n\n\n\/* =========================================================\n   BOTTOM\n   ========================================================= *\/\n\n.hr-bottom-decoration {\n    display:flex;\n\n    align-items:center;\n    justify-content:center;\n\n    gap:8px;\n\n    margin-top:22px;\n\n    color:#94a3b8;\n\n    font-size:10px;\n\n    letter-spacing:1.5px;\n\n    text-transform:uppercase;\n}\n\n\n.hr-bottom-decoration::before,\n.hr-bottom-decoration::after {\n    content:\"\";\n\n    width:45px;\n    height:1px;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            #9FC7CB\n        );\n}\n\n\n.hr-bottom-decoration::after {\n    background:\n        linear-gradient(\n            90deg,\n            #9FC7CB,\n            transparent\n        );\n}\n\n\n\/* =========================================================\n   ANIMATIONS\n   ========================================================= *\/\n\n@keyframes medicalFloat {\n\n    0%,100% {\n        transform:\n            translateY(0)\n            rotate(0deg);\n    }\n\n    50% {\n        transform:\n            translateY(-12px)\n            rotate(3deg);\n    }\n}\n\n\n@keyframes orbFloat {\n\n    0%,100% {\n        transform:\n            translateY(0)\n            translateX(0);\n    }\n\n    50% {\n        transform:\n            translateY(-18px)\n            translateX(8px);\n    }\n}\n\n\n@keyframes pulseOrb {\n\n    0%,100% {\n        transform:scale(1);\n        opacity:.7;\n    }\n\n    50% {\n        transform:scale(1.5);\n        opacity:1;\n    }\n}\n\n\n@keyframes pulseNode {\n\n    0%,100% {\n        transform:scale(1);\n        opacity:.8;\n    }\n\n    50% {\n        transform:scale(1.5);\n        opacity:1;\n    }\n}\n\n\n@keyframes medicalIconFloat {\n\n    0%,100% {\n        transform:\n            translate3d(0,0,0)\n            rotate(0deg);\n    }\n\n    50% {\n        transform:\n            translate3d(8px,-12px,15px)\n            rotate(4deg);\n    }\n}\n\n\n@keyframes medicalHeart {\n\n    0%,100% {\n        transform:\n            translateY(0)\n            scale(1);\n    }\n\n    50% {\n        transform:\n            translateY(-8px)\n            scale(1.12);\n    }\n}\n\n\n@keyframes smallPlusFloat {\n\n    0%,100% {\n        transform:\n            translateY(0)\n            rotate(0deg);\n    }\n\n    50% {\n        transform:\n            translateY(-10px)\n            rotate(8deg);\n    }\n}\n\n\n@keyframes dotFloat {\n\n    0%,100% {\n        transform:\n            translateY(0)\n            scale(1);\n    }\n\n    50% {\n        transform:\n            translateY(-12px)\n            scale(1.35);\n    }\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media(max-width:992px) {\n\n    .hr-smart-wrapper {\n        padding:0 10px;\n    }\n\n    .hr-content-shell {\n        padding:18px;\n    }\n\n    .hr-tab-layout {\n        grid-template-columns:1fr;\n        gap:20px;\n    }\n\n    .hr-sidebar {\n        position:static;\n\n        flex-direction:row;\n\n        overflow-x:auto;\n\n        padding:12px;\n\n        gap:8px;\n\n        scrollbar-width:none;\n    }\n\n    .hr-sidebar::-webkit-scrollbar {\n        display:none;\n    }\n\n    .hr-sidebar::before {\n        display:none;\n    }\n\n    .hr-tab-btn {\n        flex:0 0 auto;\n\n        padding:10px 14px;\n\n        font-size:13px;\n    }\n\n    .hr-tab-btn .icon {\n        width:32px;\n        height:32px;\n\n        min-width:32px;\n\n        font-size:14px;\n    }\n\n    .hr-tab-btn.active {\n        transform:\n            translateY(-2px);\n    }\n\n    .hr-content-area {\n        padding:28px 22px;\n\n        border-radius:24px;\n    }\n\n    .strategy-top-grid {\n        grid-template-columns:1fr;\n    }\n\n    .service-timeline {\n        padding-left:58px;\n    }\n\n    .service-timeline::before {\n        left:20px;\n    }\n\n    .service-node {\n        left:-58px;\n\n        width:44px;\n        height:44px;\n\n        border-radius:14px;\n\n        font-size:12px;\n    }\n\n    .service-item::before {\n        left:-38px;\n\n        width:38px;\n    }\n\n    .service-card {\n        padding:15px;\n\n        gap:12px;\n    }\n\n\n    \/* HEADER TABLET *\/\n\n    .hr-icon-hospital {\n        left:5%;\n        font-size:32px;\n    }\n\n    .hr-icon-stetho {\n        left:12%;\n        font-size:27px;\n    }\n\n    .hr-icon-medical {\n        right:5%;\n        font-size:30px;\n    }\n\n    .hr-icon-pill {\n        right:14%;\n        font-size:25px;\n    }\n\n    .hr-icon-heart {\n        left:23%;\n    }\n\n    .hr-icon-plus-2 {\n        right:25%;\n    }\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media(max-width:600px) {\n\n    .hr-smart-wrapper {\n        margin:15px auto;\n        padding:0 8px;\n    }\n\n    .hr-hero {\n        min-height:155px !important;\n        height:155px !important;\n\n        padding:25px 20px;\n\n        border-radius:23px;\n    }\n\n    .hr-hero h1 {\n        font-size:34px !important;\n    }\n\n\n    \/* MOBILE CROSS *\/\n\n    .hr-hero::after {\n        right:-15px;\n\n        top:60px;\n\n        font-size:120px;\n    }\n\n\n    \/* MOBILE MEDICAL ICONS *\/\n\n    .hr-icon-hospital {\n        left:6%;\n        top:22%;\n\n        font-size:28px;\n    }\n\n    .hr-icon-stetho {\n        left:9%;\n        bottom:15%;\n\n        font-size:23px;\n    }\n\n    .hr-icon-medical {\n        right:5%;\n        top:20%;\n\n        font-size:27px;\n    }\n\n    .hr-icon-pill {\n        right:11%;\n        bottom:15%;\n\n        font-size:22px;\n    }\n\n    .hr-icon-heart {\n        left:20%;\n        top:12%;\n\n        font-size:18px;\n    }\n\n    .hr-icon-plus-1 {\n        left:17%;\n        bottom:17%;\n\n        font-size:20px;\n    }\n\n    .hr-icon-plus-2 {\n        right:29%;\n        top:12%;\n\n        font-size:17px;\n    }\n\n    .hr-floating-dot {\n        width:5px;\n        height:5px;\n    }\n\n\n    .hr-orb-1 {\n        right:-30px;\n        bottom:-40px;\n    }\n\n    .hr-orb-2 {\n        right:100px;\n        top:20px;\n    }\n\n    .hr-circuit {\n        display:none;\n    }\n\n    .hr-content-shell {\n        margin-top:15px;\n\n        padding:10px;\n\n        border-radius:22px;\n    }\n\n    .hr-content-area {\n        padding:22px 17px;\n\n        border-radius:20px;\n\n        min-height:0;\n    }\n\n    .tab-title {\n        font-size:1.45rem;\n\n        margin-bottom:22px;\n    }\n\n    .tab-title::after {\n        display:none;\n    }\n\n    .intro-hero {\n        padding:24px 20px;\n\n        border-radius:22px;\n    }\n\n    .intro-hero p {\n        font-size:14px;\n\n        line-height:1.85;\n    }\n\n    .strategy-card-3d {\n        padding:25px;\n\n        border-radius:24px;\n\n        min-height:0;\n    }\n\n    .strategy-card-3d h3 {\n        font-size:1.4rem;\n    }\n\n    .strategy-card-3d p {\n        font-size:13.5px;\n\n        line-height:1.8;\n    }\n\n    .objective-full-card {\n        padding:22px 20px;\n\n        border-radius:24px;\n    }\n\n    .objective-full-header {\n        margin-bottom:18px;\n\n        align-items:flex-start;\n    }\n\n    .objective-full-header h3 {\n        font-size:1.15rem;\n    }\n\n    .objective-single {\n        gap:13px;\n\n        padding:18px 0 5px;\n    }\n\n    .objective-single p {\n        font-size:13px;\n\n        line-height:1.8;\n    }\n\n    .service-timeline {\n        padding-left:50px;\n    }\n\n    .service-timeline::before {\n        left:16px;\n    }\n\n    .service-node {\n        left:-50px;\n\n        width:38px;\n        height:38px;\n\n        border-width:3px;\n\n        border-radius:12px;\n\n        font-size:10px;\n    }\n\n    .service-item::before {\n        left:-34px;\n\n        width:34px;\n    }\n\n    .service-card {\n        min-height:0;\n\n        padding:13px 14px;\n\n        border-radius:16px;\n    }\n\n    .service-name {\n        font-size:12.5px;\n\n        line-height:1.55;\n    }\n\n    .service-arrow {\n        display:none;\n    }\n}\n\n\n\/* =========================================================\n   VERY SMALL PHONE\n   ========================================================= *\/\n\n@media(max-width:430px) {\n\n    .hr-hero {\n        min-height:135px !important;\n        height:135px !important;\n\n        padding:22px 15px;\n    }\n\n    .hr-hero h1 {\n        font-size:29px !important;\n    }\n\n    .hr-hero::after {\n        right:-20px;\n        top:48px;\n        font-size:105px;\n    }\n\n    .hr-icon-hospital {\n        font-size:23px;\n        left:5%;\n    }\n\n    .hr-icon-stetho {\n        font-size:20px;\n        left:8%;\n    }\n\n    .hr-icon-medical {\n        font-size:22px;\n        right:4%;\n    }\n\n    .hr-icon-pill {\n        font-size:19px;\n        right:9%;\n    }\n\n    .hr-icon-heart {\n        font-size:15px;\n    }\n\n    .hr-icon-plus-1 {\n        font-size:17px;\n    }\n\n    .hr-icon-plus-2 {\n        font-size:15px;\n    }\n\n    .hr-content-area {\n        padding:18px 14px;\n    }\n\n    .hr-tab-btn {\n        padding:9px 11px;\n\n        font-size:11px;\n    }\n\n    .hr-tab-btn .icon {\n        width:28px;\n        height:28px;\n\n        min-width:28px;\n    }\n\n    .intro-hero {\n        padding:20px 17px;\n    }\n\n    .intro-hero p {\n        font-size:13px;\n\n        line-height:1.8;\n    }\n\n    .strategy-card-3d {\n        padding:21px;\n    }\n\n    .strategy-card-3d p {\n        font-size:13px;\n    }\n\n    .objective-full-card {\n        padding:20px 16px;\n    }\n\n    .objective-single {\n        gap:10px;\n    }\n\n    .objective-single p {\n        font-size:12.5px;\n\n        line-height:1.75;\n    }\n\n    .service-timeline {\n        padding-left:46px;\n    }\n\n    .service-timeline::before {\n        left:14px;\n    }\n\n    .service-node {\n        left:-46px;\n\n        width:34px;\n        height:34px;\n\n        border-radius:10px;\n\n        font-size:9px;\n    }\n\n    .service-item::before {\n        left:-32px;\n\n        width:32px;\n    }\n\n    .service-card {\n        padding:12px;\n    }\n\n    .service-name {\n        font-size:12px;\n    }\n}\n\n\n\/* =========================================================\n   REDUCE MOTION\n   ========================================================= *\/\n\n@media(prefers-reduced-motion:reduce) {\n\n    *,\n    *::before,\n    *::after {\n        animation-duration:.01ms !important;\n\n        animation-iteration-count:1 !important;\n\n        transition-duration:.01ms !important;\n    }\n\n    .hr-typing {\n        width:auto !important;\n\n        animation:none !important;\n\n        border-right:0 !important;\n    }\n}\n\n<\/style>\n\n\n<!-- =========================================================\n     MAIN WRAPPER\n     ========================================================= -->\n\n<div class=\"hr-smart-wrapper\">\n\n\n    <!-- =====================================================\n         HEADER\n         ===================================================== -->\n\n    <section class=\"hr-hero\">\n\n\n        <!-- =================================================\n             MEDICAL 3D ICONS\n             IKON TIDAK DALAM BUBBLE\n             ================================================= -->\n\n        <div class=\"hr-medical-icons\" aria-hidden=\"true\">\n\n\n            <!-- Hospital -->\n\n            <span class=\"hr-medical-icon hr-icon-hospital\">\n                \ud83c\udfe5\n            <\/span>\n\n\n            <!-- Stethoscope -->\n\n            <span class=\"hr-medical-icon hr-icon-stetho\">\n                \ud83e\ude7a\n            <\/span>\n\n\n            <!-- Pill -->\n\n            <span class=\"hr-medical-icon hr-icon-pill\">\n                \ud83d\udc8a\n            <\/span>\n\n\n            <!-- Medical -->\n\n            <span class=\"hr-medical-icon hr-icon-medical\">\n                \u2695\n            <\/span>\n\n\n            <!-- Small Heart -->\n\n            <span class=\"hr-medical-icon hr-icon-heart\">\n                \u2665\n            <\/span>\n\n\n            <!-- Small Plus -->\n\n            <span class=\"hr-medical-icon hr-icon-plus-1\">\n                +\n            <\/span>\n\n\n            <!-- Small Plus -->\n\n            <span class=\"hr-medical-icon hr-icon-plus-2\">\n                +\n            <\/span>\n\n\n        <\/div>\n\n\n        <!-- FLOATING DOTS -->\n\n        <span class=\"hr-floating-dot hr-dot-1\"><\/span>\n        <span class=\"hr-floating-dot hr-dot-2\"><\/span>\n        <span class=\"hr-floating-dot hr-dot-3\"><\/span>\n\n\n        <!-- =================================================\n             TITLE\n             ================================================= -->\n\n        <div class=\"hr-hero-content\">\n\n            <h1 aria-label=\"Sumber Manusia\">\n\n                <span class=\"hr-typing\">\n                    Sumber Manusia\n                <\/span>\n\n            <\/h1>\n\n        <\/div>\n\n\n        <!-- =================================================\n             3D BUBBLES\n             KEKAL \u2014 TAPI TIADA ICON DI DALAM\n             ================================================= -->\n\n        <div class=\"hr-orb hr-orb-1\"><\/div>\n\n        <div class=\"hr-orb hr-orb-2\"><\/div>\n\n        <div class=\"hr-orb hr-orb-3\"><\/div>\n\n\n        <!-- =================================================\n             DIGITAL CIRCUIT\n             ================================================= -->\n\n        <div class=\"hr-circuit\">\n\n            <span class=\"line1\"><\/span>\n            <span class=\"line2\"><\/span>\n            <span class=\"line3\"><\/span>\n\n            <i class=\"dot1\"><\/i>\n            <i class=\"dot2\"><\/i>\n            <i class=\"dot3\"><\/i>\n\n        <\/div>\n\n\n    <\/section>\n\n\n    <!-- =====================================================\n         CONTENT SHELL\n         ===================================================== -->\n\n    <section class=\"hr-content-shell\">\n\n\n        <div class=\"hr-tab-layout\">\n\n\n            <!-- =================================================\n                 SIDEBAR\n                 ================================================= -->\n\n            <aside class=\"hr-sidebar\">\n\n\n                <button type=\"button\" class=\"hr-tab-btn active\" data-hr-tab=\"tab-pengenalan\" aria-selected=\"true\">\n\n                  \n\n                    <span>\n                        Pengenalan\n                    <\/span>\n\n                <\/button>\n\n\n                <button type=\"button\" class=\"hr-tab-btn\" data-hr-tab=\"tab-strategik\" aria-selected=\"false\">\n\n\n                    <span>\n                        Visi, Misi, Objektif\n                    <\/span>\n\n                <\/button>\n\n\n                <button type=\"button\" class=\"hr-tab-btn\" data-hr-tab=\"tab-perkhidmatan\" aria-selected=\"false\">\n\n                    \n\n                    <span>\n                        Perkhidmatan\n                    <\/span>\n\n                <\/button>\n\n\n            <\/aside>\n\n\n            <!-- =================================================\n                 CONTENT AREA\n                 ================================================= -->\n\n            <main class=\"hr-content-area\">\n\n\n                <!-- =================================================\n                     PENGENALAN\n                     ================================================= -->\n\n                <div id=\"tab-pengenalan\" class=\"hr-tab-content active\" aria-hidden=\"false\">\n\n\n                    <h2 class=\"tab-title\">\n                        Pengenalan Unit\n                    <\/h2>\n\n\n                    <div class=\"intro-hero\">\n\n                        <p>\n                            Seksyen Sumber Manusia adalah salah satu unit\n                            di bawah Bahagian Perkhidmatan Pengurusan.\n                            Fungsi di Seksyen Sumber Manusia adalah\n                            menguruskan perkara perkhidmatan berkaitan\n                            warga Sibu, perjawatan, mengemaskini buku\n                            perkhidmatan anggota, penyeliaan tatatertib,\n                            profil anggota dan latihan kepada anggota-\n                            anggota hospital secara efektif dan efisien.\n                        <\/p>\n\n                    <\/div>\n\n                <\/div>\n\n\n                <!-- =================================================\n                     HALA TUJU STRATEGIK\n                     ================================================= -->\n\n                <div id=\"tab-strategik\" class=\"hr-tab-content\" aria-hidden=\"true\">\n\n\n                    <h2 class=\"tab-title\">\n                        Hala Tuju Strategik\n                    <\/h2>\n\n\n                    <div class=\"strategy-top-grid\">\n\n\n                        <!-- VISI -->\n\n                        <div class=\"strategy-card-3d vision-card-3d\">\n\n                            <h3>\n                                Visi\n                            <\/h3>\n\n                            <p>\n                                Menuju ke arah pengurusan sumber manusia\n                                yang berkualiti dan produktif.\n                            <\/p>\n\n                        <\/div>\n\n\n                        <!-- MISI -->\n\n                        <div class=\"strategy-card-3d mission-card-3d\">\n\n                            <h3>\n                                Misi\n                            <\/h3>\n\n                            <p>\n                                Menguruskan perkhidmatan anggota Hospital\n                                Sibu dengan efektif dan penggunaan sumber\n                                manusia yang optimum, berintegriti,\n                                berpengetahuan, berkemahiran dan berkualiti.\n                            <\/p>\n\n                        <\/div>\n\n\n                    <\/div>\n\n\n                    <!-- OBJECTIVE -->\n\n                    <div class=\"objective-full-card\">\n\n\n                        <div class=\"objective-full-header\">\n\n                            <div class=\"objective-title-wrap\">\n\n                                <div>\n\n                                    <h3>\n                                        Objektif\n                                    <\/h3>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"objective-single\">\n\n                            <p>\n                                Memastikan Hospital Sibu mempunyai sumber\n                                manusia dan struktur organisasi yang\n                                sempurna dalam menyediakan perkhidmatan\n                                yang berkualiti dan cemerlang kepada semua\n                                anggota dengan cekap dan berkesan.\n                            <\/p>\n\n                        <\/div>\n\n\n                    <\/div>\n\n\n                <\/div>\n\n\n                <!-- =================================================\n                     PERKHIDMATAN\n                     ================================================= -->\n\n                <div id=\"tab-perkhidmatan\" class=\"hr-tab-content\" aria-hidden=\"true\">\n\n\n                    <h2 class=\"tab-title\">\n                        Perkhidmatan\n                    <\/h2>\n\n\n                    <div class=\"service-timeline\">\n\n\n                        <div class=\"service-item\">\n\n                            <div class=\"service-node\">\n                                01\n                            <\/div>\n\n                            <div class=\"service-card\">\n\n                                <div class=\"service-info\">\n\n                                    <span class=\"service-name\">\n                                        Pengesahan Percubaan\n                                    <\/span>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"service-item\">\n\n                            <div class=\"service-node\">\n                                02\n                            <\/div>\n\n                            <div class=\"service-card\">\n\n                                <div class=\"service-info\">\n\n                                    <span class=\"service-name\">\n                                        Pengesahan Pelantikan\n                                    <\/span>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"service-item\">\n\n                            <div class=\"service-node\">\n                                03\n                            <\/div>\n\n                            <div class=\"service-card\">\n\n                                <div class=\"service-info\">\n\n                                    <span class=\"service-name\">\n                                        Perlanjutan Tempoh Percubaan\n                                    <\/span>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"service-item\">\n\n                            <div class=\"service-node\">\n                                04\n                            <\/div>\n\n                            <div class=\"service-card\">\n\n                                <div class=\"service-info\">\n\n                                    <span class=\"service-name\">\n                                        Persaraan dan Pencen\n                                    <\/span>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"service-item\">\n\n                            <div class=\"service-node\">\n                                05\n                            <\/div>\n\n                            <div class=\"service-card\">\n\n                                <div class=\"service-info\">\n\n                                    <span class=\"service-name\">\n                                        Urusan pengagihan \/ penempatan jawatan\n                                    <\/span>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"service-item\">\n\n                            <div class=\"service-node\">\n                                06\n                            <\/div>\n\n                            <div class=\"service-card\">\n\n                                <div class=\"service-info\">\n\n                                    <span class=\"service-name\">\n                                        Permohonan Pewartaan\n                                    <\/span>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"service-item\">\n\n                            <div class=\"service-node\">\n                                07\n                            <\/div>\n\n                            <div class=\"service-card\">\n\n                                <div class=\"service-info\">\n\n                                    <span class=\"service-name\">\n                                        Pembaharuan \/ Penamatan Kontrak\n                                    <\/span>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"service-item\">\n\n                            <div class=\"service-node\">\n                                08\n                            <\/div>\n\n                            <div class=\"service-card\">\n\n                                <div class=\"service-info\">\n\n                                    <span class=\"service-name\">\n                                        Urusan Permohonan ABM\n                                    <\/span>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"service-item\">\n\n                            <div class=\"service-node\">\n                                09\n                            <\/div>\n\n                            <div class=\"service-card\">\n\n                                <div class=\"service-info\">\n\n                                    <span class=\"service-name\">\n                                        Laporan perjawatan dikemukakan ke JKNS \/ KKM\n                                    <\/span>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"service-item\">\n\n                            <div class=\"service-node\">\n                                10\n                            <\/div>\n\n                            <div class=\"service-card\">\n\n                                <div class=\"service-info\">\n\n                                    <span class=\"service-name\">\n                                        Urusan menanggung kerja\n                                    <\/span>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"service-item\">\n\n                            <div class=\"service-node\">\n                                11\n                            <\/div>\n\n                            <div class=\"service-card\">\n\n                                <div class=\"service-info\">\n\n                                    <span class=\"service-name\">\n                                        Pengisytiharan Harta\n                                    <\/span>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"service-item\">\n\n                            <div class=\"service-node\">\n                                12\n                            <\/div>\n\n                            <div class=\"service-card\">\n\n                                <div class=\"service-info\">\n\n                                    <span class=\"service-name\">\n                                        Tindakan Tatatertib &amp; Disiplin Secara Pentadbiran\n                                    <\/span>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"service-item\">\n\n                            <div class=\"service-node\">\n                                13\n                            <\/div>\n\n                            <div class=\"service-card\">\n\n                                <div class=\"service-info\">\n\n                                    <span class=\"service-name\">\n                                        Pelarasan \/ Perubahan \/ Pergerakan Gaji\n                                    <\/span>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <div class=\"service-item\">\n\n                            <div class=\"service-node\">\n                                14\n                            <\/div>\n\n                            <div class=\"service-card\">\n\n                                <div class=\"service-info\">\n\n                                    <span class=\"service-name\">\n                                        Semua Urusan Cuti\n                                    <\/span>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                    <\/div>\n\n                <\/div>\n\n\n            <\/main>\n\n        <\/div>\n\n    <\/section>\n\n\n    <!-- =====================================================\n         BOTTOM\n         ===================================================== -->\n\n    <div class=\"hr-bottom-decoration\">\n\n        Hospital Sibu \u00b7 Perkhidmatan \u00b7 Sumber Manusia\n\n    <\/div>\n\n\n<\/div>\n\n\n<script>\n\n\/* =========================================================\n   HOSPITAL SIBU HR TAB SYSTEM\n   WORDPRESS SAFE\n   ========================================================= *\/\n\n(function () {\n\n    function initHRTabs() {\n\n        var wrappers =\n            document.querySelectorAll(\n                '.hr-smart-wrapper'\n            );\n\n        for (\n            var w = 0;\n            w < wrappers.length;\n            w++\n        ) {\n\n            var wrapper = wrappers[w];\n\n            var buttons =\n                wrapper.querySelectorAll(\n                    '.hr-tab-btn[data-hr-tab]'\n                );\n\n            var contents =\n                wrapper.querySelectorAll(\n                    '.hr-tab-content'\n                );\n\n            if (\n                !buttons.length ||\n                !contents.length\n            ) {\n                continue;\n            }\n\n\n            function activateTab(\n                tabId,\n                clickedButton\n            ) {\n\n                for (\n                    var i = 0;\n                    i < contents.length;\n                    i++\n                ) {\n\n                    contents[i]\n                        .classList\n                        .remove('active');\n\n                    contents[i]\n                        .setAttribute(\n                            'aria-hidden',\n                            'true'\n                        );\n                }\n\n\n                for (\n                    var j = 0;\n                    j < buttons.length;\n                    j++\n                ) {\n\n                    buttons[j]\n                        .classList\n                        .remove('active');\n\n                    buttons[j]\n                        .setAttribute(\n                            'aria-selected',\n                            'false'\n                        );\n                }\n\n\n                var selectedTab =\n                    wrapper.querySelector(\n                        '#' + tabId\n                    );\n\n\n                if (selectedTab) {\n\n                    selectedTab\n                        .classList\n                        .add('active');\n\n                    selectedTab\n                        .setAttribute(\n                            'aria-hidden',\n                            'false'\n                        );\n                }\n\n\n                if (clickedButton) {\n\n                    clickedButton\n                        .classList\n                        .add('active');\n\n                    clickedButton\n                        .setAttribute(\n                            'aria-selected',\n                            'true'\n                        );\n                }\n\n            }\n\n\n            for (\n                var k = 0;\n                k < buttons.length;\n                k++\n            ) {\n\n                buttons[k]\n                    .addEventListener(\n                        'click',\n                        function (event) {\n\n                            event.preventDefault();\n                            event.stopPropagation();\n\n                            var tabId =\n                                this.getAttribute(\n                                    'data-hr-tab'\n                                );\n\n                            if (tabId) {\n\n                                activateTab(\n                                    tabId,\n                                    this\n                                );\n\n                            }\n\n                        }\n                    );\n\n            }\n\n\n            var activeButton =\n                wrapper.querySelector(\n                    '.hr-tab-btn.active[data-hr-tab]'\n                );\n\n\n            var initialTab =\n                activeButton\n                    ? activeButton.getAttribute(\n                        'data-hr-tab'\n                    )\n                    : buttons[0].getAttribute(\n                        'data-hr-tab'\n                    );\n\n\n            activateTab(\n                initialTab,\n                activeButton || buttons[0]\n            );\n\n        }\n\n    }\n\n\n    if (\n        document.readyState === 'loading'\n    ) {\n\n        document.addEventListener(\n            'DOMContentLoaded',\n            initHRTabs\n        );\n\n    } else {\n\n        initHRTabs();\n\n    }\n\n})();\n\n<\/script>\n ","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfe5 \ud83e\ude7a \ud83d\udc8a \u2695 \u2665 + + Sumber Manusia Pengenalan Visi, Misi, Objektif Perkhidmatan Pengenalan Unit Seksyen Sumber Manusia adalah salah satu unit di bawah Bahagian Perkhidmatan Pengurusan. Fungsi di Seksyen Sumber Manusia adalah menguruskan perkara perkhidmatan berkaitan warga Sibu, perjawatan, mengemaskini buku perkhidmatan anggota, penyeliaan tatatertib, profil anggota dan latihan kepada anggota- anggota hospital&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_themeisle_gutenberg_block_has_review":false,"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-3105","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/wp-json\/wp\/v2\/pages\/3105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/wp-json\/wp\/v2\/comments?post=3105"}],"version-history":[{"count":2,"href":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/wp-json\/wp\/v2\/pages\/3105\/revisions"}],"predecessor-version":[{"id":3108,"href":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/wp-json\/wp\/v2\/pages\/3105\/revisions\/3108"}],"wp:attachment":[{"href":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/wp-json\/wp\/v2\/media?parent=3105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}