{"id":3160,"date":"2026-10-15T15:29:24","date_gmt":"2026-10-15T07:29:24","guid":{"rendered":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/?page_id=3160"},"modified":"2026-10-16T10:58:45","modified_gmt":"2026-10-16T02:58:45","slug":"kejuruteraan","status":"publish","type":"page","link":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/kejuruteraan\/","title":{"rendered":"KEJURUTERAAN"},"content":{"rendered":"\n<style>\n\/* =========================================================\n   HOSPITAL SIBU \u2014 UNIT KEJURUTERAAN\n   MODERN MEDICAL PORTAL\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    --cyan:#55AAB0;\n    --cyan-soft:#78C3C8;\n    --navy:#082F49;\n    --dark:#0F172A;\n    --muted:#64748B;\n    --white:#FFF;\n\n    --font-main:'Plus Jakarta Sans',sans-serif;\n    --font-tech:'Space Grotesk',sans-serif;\n\n    --shadow:\n        0 20px 45px rgba(23,78,86,.12),\n        0 8px 18px 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\n   ========================================================= *\/\n\n.unit-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\n   ========================================================= *\/\n\n.unit-hero{\n    position:relative;\n    height:185px;\n    padding:28px 30px;\n    border-radius:30px;\n    overflow:hidden;\n\n    display:flex;\n    align-items:center;\n    justify-content:center;\n\n    text-align:center;\n    color:#fff;\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            var(--primary-dark),\n            var(--primary) 45%,\n            var(--primary-light)\n        );\n\n    box-shadow:\n        0 25px 60px rgba(23,78,86,.25);\n\n    box-sizing:border-box;\n    isolation:isolate;\n}\n\n.unit-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    mask-image:linear-gradient(\n        to right,\n        transparent,\n        black 25%,\n        black 75%,\n        transparent\n    );\n\n    pointer-events:none;\n}\n\n.unit-hero::after{\n    content:\"+\";\n    position:absolute;\n    right:95px;\n    top:25px;\n\n    font-size:145px;\n    line-height:1;\n    font-weight:800;\n\n    color:rgba(255,255,255,.055);\n\n    animation:medicalFloat 7s ease-in-out infinite;\n    pointer-events:none;\n}\n\n\n\/* =========================================================\n   HERO CONTENT\n   ========================================================= *\/\n\n.unit-hero-content{\n    position:relative;\n    z-index:20;\n\n    width:100%;\n\n    display:flex;\n    align-items:center;\n    justify-content:center;\n}\n\n.unit-hero h1{\n    margin:0;\n\n    font-size:clamp(34px,5vw,56px);\n    line-height:1;\n    font-weight:800;\n\n    letter-spacing:-1.5px;\n    color:#fff;\n}\n\n\n\/* =========================================================\n   TYPING EFFECT\n   ========================================================= *\/\n\n.unit-typing{\n    display:inline-block;\n\n    max-width:90vw;\n    overflow:hidden;\n    white-space:nowrap;\n\n    border-right:3px solid rgba(255,255,255,.95);\n\n    width:0;\n\n    animation:\n        unitTyping 3.2s steps(14,end) infinite,\n        unitTypingCursor .75s step-end infinite;\n}\n\n@keyframes unitTyping{\n    0%{width:0}\n    35%,65%{width:100%}\n    100%{width:0}\n}\n\n@keyframes unitTypingCursor{\n    0%,100%{border-color:rgba(255,255,255,.95)}\n    50%{border-color:transparent}\n}\n\n\n\/* =========================================================\n   MEDICAL ICONS\n   ========================================================= *\/\n\n.unit-medical-icons{\n    position:absolute;\n    inset:0;\n    z-index:6;\n    pointer-events:none;\n}\n\n.unit-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    opacity:.75;\n\n    filter:\n        drop-shadow(0 8px 8px rgba(0,0,0,.12));\n\n    text-shadow:\n        0 2px 0 rgba(255,255,255,.25),\n        0 7px 15px rgba(0,0,0,.18);\n\n    pointer-events:none;\n}\n\n.unit-icon-hospital{\n    left:7%;\n    top:28%;\n    font-size:38px;\n    animation:medicalIconFloat 6s ease-in-out infinite;\n}\n\n.unit-icon-stetho{\n    left:17%;\n    bottom:18%;\n    font-size:31px;\n    animation:medicalIconFloat 7s ease-in-out infinite reverse;\n}\n\n.unit-icon-pill{\n    right:19%;\n    bottom:17%;\n    font-size:28px;\n    animation:medicalIconFloat 6.5s ease-in-out infinite;\n}\n\n.unit-icon-medical{\n    right:8%;\n    top:25%;\n    font-size:35px;\n    animation:medicalIconFloat 7.5s ease-in-out infinite reverse;\n}\n\n.unit-icon-heart{\n    left:28%;\n    top:16%;\n    font-size:23px;\n    opacity:.55;\n    animation:medicalHeart 3.5s ease-in-out infinite;\n}\n\n.unit-icon-plus-1{\n    left:10%;\n    bottom:18%;\n    font-size:27px;\n    color:rgba(255,255,255,.55);\n    animation:smallPlusFloat 5s ease-in-out infinite;\n}\n\n.unit-icon-plus-2{\n    right:29%;\n    top:17%;\n    font-size:21px;\n    font-weight:800;\n    color:rgba(255,255,255,.48);\n    animation:smallPlusFloat 6s ease-in-out infinite reverse;\n}\n\n\n\/* =========================================================\n   FLOATING ELEMENTS\n   ========================================================= *\/\n\n.unit-floating-dot{\n    position:absolute;\n    width:7px;\n    height:7px;\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    z-index:5;\n\n    animation:dotFloat 4s ease-in-out infinite;\n}\n\n.unit-dot-1{\n    left:24%;\n    top:68%;\n}\n\n.unit-dot-2{\n    right:24%;\n    top:72%;\n    animation-delay:1.5s;\n}\n\n.unit-dot-3{\n    right:38%;\n    bottom:15%;\n    width:5px;\n    height:5px;\n    animation-delay:.8s;\n}\n\n\n\/* =========================================================\n   ORBS\n   ========================================================= *\/\n\n.unit-orb{\n    position:absolute;\n    border-radius:50%;\n    pointer-events:none;\n    z-index:4;\n}\n\n.unit-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: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:orbFloat 7s ease-in-out infinite;\n}\n\n.unit-orb-2{\n    width:65px;\n    height:65px;\n\n    right:260px;\n    top:35px;\n\n    background:rgba(255,255,255,.08);\n    border:1px solid rgba(255,255,255,.25);\n\n    backdrop-filter:blur(5px);\n\n    animation:orbFloat 5s ease-in-out infinite reverse;\n}\n\n.unit-orb-3{\n    width:20px;\n    height:20px;\n\n    right:340px;\n    bottom:45px;\n\n    background:var(--cyan-soft);\n\n    box-shadow:\n        0 0 25px rgba(120,195,200,.7);\n\n    animation:pulseOrb 2.5s infinite;\n}\n\n\n\/* =========================================================\n   CONTENT SHELL\n   ========================================================= *\/\n\n.unit-content-shell{\n    position:relative;\n\n    margin-top:25px;\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: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    isolation:isolate;\n}\n\n.unit-content-shell::before{\n    content:\"\";\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    pointer-events:none;\n    z-index:0;\n}\n\n.unit-content-shell::after{\n    content:\"\";\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    pointer-events:none;\n    z-index:0;\n}\n\n\n\/* =========================================================\n   MAIN LAYOUT\n   ========================================================= *\/\n\n.unit-tab-layout{\n    display:grid;\n\n    grid-template-columns:270px minmax(0,1fr);\n\n    gap:25px;\n\n    position:relative;\n    z-index:2;\n}\n\n\n\/* =========================================================\n   SIDEBAR\n   ========================================================= *\/\n\n.unit-sidebar{\n    display:flex;\n    flex-direction:column;\n    gap:8px;\n\n    position:sticky;\n    top:25px;\n\n    height:fit-content;\n\n    padding:15px;\n\n    border-radius:26px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255,255,255,.9),\n            rgba(240,250,255,.75)\n        );\n\n    border:1px solid rgba(255,255,255,.9);\n\n    backdrop-filter:blur(20px);\n    -webkit-backdrop-filter:blur(20px);\n\n    box-shadow:var(--shadow-3d);\n}\n\n\n\/* =========================================================\n   TAB BUTTON\n   ========================================================= *\/\n\n.unit-tab-btn{\n    appearance:none;\n    border:1px solid transparent;\n    background:transparent;\n\n    color:#64748B;\n\n    padding:14px 16px;\n    border-radius:16px;\n\n    font-family:var(--font-main);\n    font-size:14px;\n    font-weight:700;\n\n    text-align:left;\n\n    cursor:pointer;\n\n    display:flex;\n    align-items:center;\n\n    position:relative;\n    overflow:hidden;\n\n    transition:\n        .3s ease;\n}\n\n.unit-tab-btn:hover{\n    color:var(--primary);\n    background:rgba(40,108,115,.07);\n    border-color:rgba(40,108,115,.10);\n    transform:translateX(4px);\n}\n\n.unit-tab-btn.active{\n    color:#fff;\n\n    background:\n        linear-gradient(\n            135deg,\n            #1A5A62,\n            var(--primary),\n            var(--primary-light)\n        );\n\n    box-shadow:\n        0 12px 25px rgba(40,108,115,.25),\n        inset 0 1px 0 rgba(255,255,255,.25);\n\n    transform:translateX(5px);\n}\n\n.unit-tab-btn.active::before{\n    content:\"\";\n\n    position:absolute;\n    left:0;\n    top:20%;\n\n    width:4px;\n    height:60%;\n\n    border-radius:0 5px 5px 0;\n\n    background:var(--cyan);\n\n    box-shadow:\n        0 0 14px var(--cyan);\n}\n\n\n\/* =========================================================\n   CONTENT AREA\n   ========================================================= *\/\n\n.unit-content-area{\n    position:relative;\n    overflow:hidden;\n\n    padding:38px;\n\n    border-radius:28px;\n\n    background:\n        linear-gradient(\n            145deg,\n            rgba(255,255,255,.96),\n            rgba(249,253,255,.92)\n        );\n\n    border:1px solid rgba(255,255,255,.95);\n\n    box-shadow:\n        0 28px 60px rgba(15,23,42,.08),\n        inset 0 1px 0 white;\n\n    box-sizing:border-box;\n}\n\n.unit-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: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\/* =========================================================\n   TAB CONTENT\n   ========================================================= *\/\n\n.unit-tab-content{\n    display:none;\n\n    width:100%;\n\n    animation:\n        contentIn .45s\n        cubic-bezier(.22,1,.36,1);\n}\n\n.unit-tab-content.active{\n    display:block;\n}\n\n@keyframes contentIn{\n    from{\n        opacity:0;\n        transform:translateY(15px);\n    }\n\n    to{\n        opacity:1;\n        transform:translateY(0);\n    }\n}\n\n\n\/* =========================================================\n   TITLE\n   ========================================================= *\/\n\n.tab-title{\n    position:relative;\n    z-index:2;\n\n    display:flex;\n    align-items:center;\n    gap:12px;\n\n    margin:0 0 25px;\n\n    font-family:var(--font-tech);\n    font-size:2rem;\n    font-weight:600;\n\n    color:var(--navy);\n    letter-spacing:-.6px;\n}\n\n.tab-title::before{\n    content:\"\";\n\n    width:6px;\n    height:38px;\n\n    flex-shrink:0;\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 rgba(85,170,176,.35);\n}\n\n.tab-title::after{\n    content:\"\";\n\n    height:1px;\n    flex:1;\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    padding:28px 30px;\n\n    border-radius:24px;\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: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.intro-hero p{\n    position:relative;\n    z-index:2;\n\n    margin:0;\n\n    color:#475569;\n\n    font-size:15px;\n    line-height:1.9;\n}\n\n\n\/* =========================================================\n   OBJECTIVE\n   ========================================================= *\/\n\n.objective-full-card{\n    position:relative;\n    overflow:hidden;\n\n    padding:28px 30px;\n    margin-top:5px;\n\n    border-radius:26px;\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            #fff,\n            #F1F8F8\n        );\n\n    border:1px solid rgba(40,108,115,.12);\n\n    box-shadow:\n        0 22px 45px rgba(15,23,42,.07),\n        inset 0 1px 0 white;\n\n    transition:.35s ease;\n}\n\n.objective-full-card:hover{\n    transform:translateY(-4px);\n\n    box-shadow:\n        0 30px 55px rgba(23,78,86,.11);\n}\n\n.objective-full-header{\n    position:relative;\n    z-index:2;\n\n    margin-bottom:15px;\n}\n\n.objective-full-header h3{\n    margin:0;\n\n    font-family:var(--font-tech);\n    font-size:1.35rem;\n    font-weight:700;\n\n    color:var(--navy);\n}\n\n.objective-single{\n    position:relative;\n    z-index:2;\n\n    padding-top:16px;\n\n    border-top:1px solid rgba(40,108,115,.10);\n}\n\n.objective-single p{\n    margin:0;\n\n    color:#475569;\n\n    font-size:14px;\n    line-height:1.9;\n}\n\n\n\/* =========================================================\n   SERVICES \u2014 SIMPLE\n   ========================================================= *\/\n\n.services-intro{\n    margin:-5px 0 20px;\n\n    color:var(--muted);\n\n    font-size:14px;\n    line-height:1.7;\n}\n\n\n\/* SERVICE LIST *\/\n\n.service-timeline{\n    position:relative;\n\n    display:flex;\n    flex-direction:column;\n\n    gap:10px;\n\n    padding:0;\n}\n\n\n\/* Vertical line *\/\n\n.service-timeline::before{\n    content:\"\";\n\n    position:absolute;\n\n    left:18px;\n    top:18px;\n    bottom:18px;\n\n    width:2px;\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\n\n\/* SERVICE ITEM *\/\n\n.service-item{\n    position:relative;\n\n    display:flex;\n    align-items:center;\n\n    min-height:56px;\n\n    padding-left:50px;\n}\n\n\n\/* NUMBER *\/\n\n.service-node{\n    position:absolute;\n\n    left:0;\n    top:50%;\n\n    transform:translateY(-50%);\n\n    width:38px;\n    height:38px;\n\n    display:flex;\n    align-items:center;\n    justify-content:center;\n\n    border-radius:12px;\n\n    color:#fff;\n\n    font-family:var(--font-tech);\n    font-size:11px;\n    font-weight:700;\n\n    background:\n        linear-gradient(\n            145deg,\n            var(--primary-dark),\n            var(--primary-light)\n        );\n\n    border:3px solid #E9FAFF;\n\n    box-shadow:\n        0 6px 15px rgba(23,78,86,.20);\n\n    z-index:2;\n}\n\n\n\/* CONNECTOR *\/\n\n.service-item::before{\n    content:\"\";\n\n    position:absolute;\n\n    left:35px;\n    top:50%;\n\n    width:16px;\n    height:1px;\n\n    background:\n        var(--cyan);\n}\n\n\n\/* SERVICE CONTENT *\/\n\n.service-card{\n    width:100%;\n\n    display:flex;\n    align-items:center;\n\n    padding:14px 17px;\n\n    border-radius:14px;\n\n    background:#F8FBFB;\n\n    border:1px solid #DCEBEC;\n\n    box-shadow:\n        0 5px 14px rgba(15,23,42,.04);\n\n    transition:.3s ease;\n\n    box-sizing:border-box;\n}\n\n.service-info{\n    flex:1;\n    min-width:0;\n}\n\n.service-name{\n    display:block;\n\n    color:var(--navy);\n\n    font-size:13.5px;\n    font-weight:600;\n\n    line-height:1.65;\n}\n\n\n\/* HOVER *\/\n\n.service-item:hover .service-card{\n    transform:translateX(5px);\n\n    background:#fff;\n\n    border-color:\n        rgba(85,170,176,.40);\n\n    box-shadow:\n        0 10px 22px rgba(23,78,86,.09);\n}\n\n.service-item:hover .service-node{\n    transform:\n        translateY(-50%)\n        scale(1.06);\n\n    box-shadow:\n        0 8px 18px rgba(40,108,115,.25);\n}\n\n\n\/* =========================================================\n   BOTTOM\n   ========================================================= *\/\n\n.unit-bottom-decoration{\n    display:flex;\n    align-items:center;\n    justify-content:center;\n\n    gap:8px;\n\n    margin-top:20px;\n\n    color:#94A3B8;\n\n    font-size:10px;\n    letter-spacing:1.5px;\n\n    text-transform:uppercase;\n}\n\n.unit-bottom-decoration::before,\n.unit-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.unit-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    0%,100%{\n        transform:translateY(0) rotate(0);\n    }\n\n    50%{\n        transform:translateY(-12px) rotate(3deg);\n    }\n}\n\n@keyframes orbFloat{\n    0%,100%{\n        transform:translate(0,0);\n    }\n\n    50%{\n        transform:translate(8px,-18px);\n    }\n}\n\n@keyframes pulseOrb{\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@keyframes medicalIconFloat{\n    0%,100%{\n        transform:translate3d(0,0,0) rotate(0);\n    }\n\n    50%{\n        transform:translate3d(8px,-12px,15px) rotate(4deg);\n    }\n}\n\n@keyframes medicalHeart{\n    0%,100%{\n        transform:translateY(0) scale(1);\n    }\n\n    50%{\n        transform:translateY(-8px) scale(1.12);\n    }\n}\n\n@keyframes smallPlusFloat{\n    0%,100%{\n        transform:translateY(0) rotate(0);\n    }\n\n    50%{\n        transform:translateY(-10px) rotate(8deg);\n    }\n}\n\n@keyframes dotFloat{\n    0%,100%{\n        transform:translateY(0) scale(1);\n    }\n\n    50%{\n        transform:translateY(-12px) scale(1.35);\n    }\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media(max-width:992px){\n\n    .unit-smart-wrapper{\n        padding:0 10px;\n    }\n\n    .unit-content-shell{\n        padding:18px;\n    }\n\n    .unit-tab-layout{\n        grid-template-columns:1fr;\n        gap:18px;\n    }\n\n    .unit-sidebar{\n        position:static;\n\n        flex-direction:row;\n\n        overflow-x:auto;\n\n        padding:10px;\n\n        gap:7px;\n\n        scrollbar-width:none;\n    }\n\n    .unit-sidebar::-webkit-scrollbar{\n        display:none;\n    }\n\n    .unit-tab-btn{\n        flex:0 0 auto;\n\n        padding:10px 14px;\n\n        font-size:13px;\n    }\n\n    .unit-tab-btn:hover,\n    .unit-tab-btn.active{\n        transform:translateY(-2px);\n    }\n\n    .unit-content-area{\n        padding:28px 22px;\n    }\n\n    .service-timeline::before{\n        left:18px;\n    }\n\n    .service-item{\n        padding-left:50px;\n    }\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media(max-width:600px){\n\n    .unit-smart-wrapper{\n        margin:15px auto;\n        padding:0 8px;\n    }\n\n    .unit-hero{\n        height:155px;\n        padding:25px 20px;\n        border-radius:23px;\n    }\n\n    .unit-hero h1{\n        font-size:34px;\n    }\n\n    .unit-hero::after{\n        right:-15px;\n        top:60px;\n        font-size:120px;\n    }\n\n    .unit-icon-hospital{\n        left:6%;\n        top:22%;\n        font-size:28px;\n    }\n\n    .unit-icon-stetho{\n        left:9%;\n        bottom:15%;\n        font-size:23px;\n    }\n\n    .unit-icon-medical{\n        right:5%;\n        top:20%;\n        font-size:27px;\n    }\n\n    .unit-icon-pill{\n        right:11%;\n        bottom:15%;\n        font-size:22px;\n    }\n\n    .unit-icon-heart{\n        left:20%;\n        top:12%;\n        font-size:18px;\n    }\n\n    .unit-icon-plus-1{\n        left:17%;\n        bottom:17%;\n        font-size:20px;\n    }\n\n    .unit-icon-plus-2{\n        right:29%;\n        top:12%;\n        font-size:17px;\n    }\n\n    .unit-floating-dot{\n        width:5px;\n        height:5px;\n    }\n\n    .unit-orb-1{\n        right:-30px;\n        bottom:-40px;\n    }\n\n    .unit-orb-2{\n        right:100px;\n        top:20px;\n    }\n\n    .unit-content-shell{\n        margin-top:15px;\n        padding:10px;\n        border-radius:22px;\n    }\n\n    .unit-content-area{\n        padding:22px 17px;\n        border-radius:20px;\n    }\n\n    .tab-title{\n        font-size:1.45rem;\n        margin-bottom:20px;\n    }\n\n    .tab-title::after{\n        display:none;\n    }\n\n    .intro-hero{\n        padding:22px 20px;\n        border-radius:20px;\n    }\n\n    .intro-hero p{\n        font-size:14px;\n        line-height:1.8;\n    }\n\n    .objective-full-card{\n        padding:22px 20px;\n        border-radius:22px;\n    }\n\n    .objective-full-header h3{\n        font-size:1.15rem;\n    }\n\n    .objective-single{\n        padding-top:15px;\n    }\n\n    .objective-single p{\n        font-size:13px;\n        line-height:1.8;\n    }\n\n    .service-timeline{\n        gap:8px;\n    }\n\n    .service-timeline::before{\n        left:15px;\n    }\n\n    .service-item{\n        min-height:50px;\n        padding-left:42px;\n    }\n\n    .service-node{\n        width:32px;\n        height:32px;\n\n        border-width:2px;\n        border-radius:10px;\n\n        font-size:9px;\n    }\n\n    .service-item::before{\n        left:30px;\n        width:12px;\n    }\n\n    .service-card{\n        padding:12px 13px;\n        border-radius:13px;\n    }\n\n    .service-name{\n        font-size:12.5px;\n        line-height:1.6;\n    }\n\n    .unit-bottom-decoration{\n        font-size:9px;\n    }\n}\n\n\n\/* =========================================================\n   VERY SMALL PHONE\n   ========================================================= *\/\n\n@media(max-width:430px){\n\n    .unit-hero{\n        height:135px;\n        padding:22px 15px;\n    }\n\n    .unit-hero h1{\n        font-size:29px;\n    }\n\n    .unit-hero::after{\n        right:-20px;\n        top:48px;\n        font-size:105px;\n    }\n\n    .unit-icon-hospital{\n        font-size:23px;\n        left:5%;\n    }\n\n    .unit-icon-stetho{\n        font-size:20px;\n        left:8%;\n    }\n\n    .unit-icon-medical{\n        font-size:22px;\n        right:4%;\n    }\n\n    .unit-icon-pill{\n        font-size:19px;\n        right:9%;\n    }\n\n    .unit-icon-heart{\n        font-size:15px;\n    }\n\n    .unit-icon-plus-1{\n        font-size:17px;\n    }\n\n    .unit-icon-plus-2{\n        font-size:15px;\n    }\n\n    .unit-content-area{\n        padding:18px 14px;\n    }\n\n    .unit-tab-btn{\n        padding:9px 12px;\n        font-size:11px;\n    }\n\n    .intro-hero{\n        padding:20px 17px;\n    }\n\n    .intro-hero p{\n        font-size:13px;\n        line-height:1.8;\n    }\n\n    .objective-full-card{\n        padding:20px 16px;\n    }\n\n    .objective-single p{\n        font-size:12.5px;\n        line-height:1.75;\n    }\n\n    .service-timeline::before{\n        left:14px;\n    }\n\n    .service-item{\n        padding-left:40px;\n    }\n\n    .service-node{\n        width:30px;\n        height:30px;\n    }\n\n    .service-item::before{\n        left:28px;\n        width:12px;\n    }\n\n    .service-card{\n        padding:11px 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        animation-iteration-count:1 !important;\n        transition-duration:.01ms !important;\n    }\n\n    .unit-typing{\n        width:auto !important;\n        animation:none !important;\n        border-right:0 !important;\n    }\n}\n<\/style>\n\n\n<!-- =========================================================\n     MAIN WRAPPER\n     ========================================================= -->\n\n<div class=\"unit-smart-wrapper\">\n\n\n    <!-- =====================================================\n         HERO\n         ===================================================== -->\n\n    <section class=\"unit-hero\" aria-label=\"Unit Kejuruteraan\">\n\n\n        <!-- MEDICAL ICONS -->\n\n        <div class=\"unit-medical-icons\" aria-hidden=\"true\">\n\n            <span class=\"unit-medical-icon unit-icon-hospital\">\ud83c\udfe5<\/span>\n\n            <span class=\"unit-medical-icon unit-icon-stetho\">\u2695\ufe0f<\/span>\n\n            <span class=\"unit-medical-icon unit-icon-pill\">\u26a0\ufe0f<\/span>\n\n            <span class=\"unit-medical-icon unit-icon-medical\">\u2699\ufe0f<\/span>\n\n            <span class=\"unit-medical-icon unit-icon-heart\">\u2665<\/span>\n\n            <span class=\"unit-medical-icon unit-icon-plus-1\">\ud83d\udc77\ud83c\udffb\u200d\u2642\ufe0f<\/span>\n\n            <span class=\"unit-medical-icon unit-icon-plus-2\">+<\/span>\n\n        <\/div>\n\n\n        <!-- FLOATING DOTS -->\n\n        <span class=\"unit-floating-dot unit-dot-1\"><\/span>\n        <span class=\"unit-floating-dot unit-dot-2\"><\/span>\n        <span class=\"unit-floating-dot unit-dot-3\"><\/span>\n\n\n        <!-- TITLE -->\n\n        <div class=\"unit-hero-content\">\n\n            <h1>\n\n                <span class=\"unit-typing\">\n                    KEJURUTERAAN\n                <\/span>\n\n            <\/h1>\n\n        <\/div>\n\n\n        <!-- ORBS -->\n\n        <div class=\"unit-orb unit-orb-1\"><\/div>\n        <div class=\"unit-orb unit-orb-2\"><\/div>\n        <div class=\"unit-orb unit-orb-3\"><\/div>\n\n\n    <\/section>\n\n\n    <!-- =====================================================\n         CONTENT\n         ===================================================== -->\n\n    <section class=\"unit-content-shell\">\n\n        <div class=\"unit-tab-layout\">\n\n\n            <!-- =================================================\n                 TAB MENU\n                 ================================================= -->\n\n            <aside class=\"unit-sidebar\">\n\n                <button\n                    type=\"button\"\n                    class=\"unit-tab-btn active\"\n                    data-unit-tab=\"tab-pengenalan\"\n                    aria-selected=\"true\">\n\n                    Pengenalan\n\n                <\/button>\n\n\n                <button\n                    type=\"button\"\n                    class=\"unit-tab-btn\"\n                    data-unit-tab=\"tab-strategik\"\n                    aria-selected=\"false\">\n\n                    Objektif\n\n                <\/button>\n\n\n                <button\n                    type=\"button\"\n                    class=\"unit-tab-btn\"\n                    data-unit-tab=\"tab-perkhidmatan\"\n                    aria-selected=\"false\">\n\n                    Perkhidmatan\n\n                <\/button>\n\n            <\/aside>\n\n\n            <!-- =================================================\n                 CONTENT AREA\n                 ================================================= -->\n\n            <main class=\"unit-content-area\">\n\n\n                <!-- =================================================\n                     PENGENALAN\n                     ================================================= -->\n\n                <div\n                    id=\"tab-pengenalan\"\n                    class=\"unit-tab-content active\"\n                    aria-hidden=\"false\">\n\n                    <h2 class=\"tab-title\">\n                        Pengenalan Unit\n                    <\/h2>\n\n\n                    <div class=\"intro-hero\">\n\n                        <p>\n                            Bertanggungjawab mengawal selia dan memantau\n                            perkhidmatan sokongan hospital (PSH) yang\n                            disediakan oleh syarikat konsesi di Hospital Sibu.\n                        <\/p>\n\n                    <\/div>\n\n                <\/div>\n\n\n                <!-- =================================================\n                     OBJEKTIF\n                     ================================================= -->\n\n                <div\n                    id=\"tab-strategik\"\n                    class=\"unit-tab-content\"\n                    aria-hidden=\"true\">\n\n                    <h2 class=\"tab-title\">\n                        Objektif\n                    <\/h2>\n\n\n                    <div class=\"objective-full-card\">\n\n                        <div class=\"objective-full-header\">\n\n                            <h3>\n                                Objektif Unit Kejuruteraan\n                            <\/h3>\n\n                        <\/div>\n\n\n                        <div class=\"objective-single\">\n\n                            <p>\n                                Memastikan semua fasiliti, peralatan dan\n                                sistem kejuruteraan di Hospital Sibu berfungsi\n                                dengan selamat, cekap dan berkesan bagi\n                                menyokong penyampaian perkhidmatan kesihatan\n                                yang berkualiti.\n                            <\/p>\n\n                        <\/div>\n\n                    <\/div>\n\n                <\/div>\n\n\n                <!-- =================================================\n                     PERKHIDMATAN\n                     ================================================= -->\n\n                <div\n                    id=\"tab-perkhidmatan\"\n                    class=\"unit-tab-content\"\n                    aria-hidden=\"true\">\n\n                    <h2 class=\"tab-title\">\n                        Perkhidmatan\n                    <\/h2>\n\n\n                    <div class=\"service-timeline\">\n\n\n                        <!-- 01 -->\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                                        Fasiliti Hospital Sibu sentiasa\n                                        berada dalam keadaan baik dan selamat.\n                                    <\/span>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <!-- 02 -->\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                                        Peralatan biomedikal berfungsi\n                                        dengan baik dan selamat digunakan.\n                                    <\/span>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <!-- 03 -->\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                                        Sistem Kejuruteraan Hospital\n                                        beroperasi secara cekap dan berterusan\n                                        mengikut keperluan.\n                                    <\/span>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <!-- 04 -->\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                                        Aspek keselamatan dan kecekapan\n                                        operasi sentiasa dipantau.\n                                    <\/span>\n\n                                <\/div>\n\n                            <\/div>\n\n                        <\/div>\n\n\n                        <!-- 05 -->\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                                        Syarikat konsesi melaksanakan\n                                        perkhidmatan mengikut perjanjian\n                                        dan piawaian KKM.\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         FOOTER\n         ===================================================== -->\n\n    <div class=\"unit-bottom-decoration\">\n\n        Hospital Sibu \u00b7 Unit Kejuruteraan\n\n    <\/div>\n\n\n<\/div>\n\n\n<script>\n\n\/* =========================================================\n   HOSPITAL SIBU \u2014 UNIT TAB SYSTEM\n   ========================================================= *\/\n\n(function(){\n\n    function initUnitTabs(){\n\n        var wrappers =\n            document.querySelectorAll(\n                '.unit-smart-wrapper'\n            );\n\n        wrappers.forEach(function(wrapper){\n\n            var buttons =\n                wrapper.querySelectorAll(\n                    '.unit-tab-btn[data-unit-tab]'\n                );\n\n            var contents =\n                wrapper.querySelectorAll(\n                    '.unit-tab-content'\n                );\n\n\n            if(!buttons.length || !contents.length){\n                return;\n            }\n\n\n            function activateTab(tabId, button){\n\n                contents.forEach(function(content){\n\n                    var active =\n                        content.id === tabId;\n\n                    content.classList.toggle(\n                        'active',\n                        active\n                    );\n\n                    content.setAttribute(\n                        'aria-hidden',\n                        active ? 'false' : 'true'\n                    );\n\n                });\n\n\n                buttons.forEach(function(btn){\n\n                    var active =\n                        btn === button;\n\n                    btn.classList.toggle(\n                        'active',\n                        active\n                    );\n\n                    btn.setAttribute(\n                        'aria-selected',\n                        active ? 'true' : 'false'\n                    );\n\n                });\n\n            }\n\n\n            buttons.forEach(function(button){\n\n                button.addEventListener(\n                    'click',\n                    function(event){\n\n                        event.preventDefault();\n\n                        var tabId =\n                            this.getAttribute(\n                                'data-unit-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                    '.unit-tab-btn.active'\n                );\n\n\n            activateTab(\n                activeButton\n                    ? activeButton.getAttribute(\n                        'data-unit-tab'\n                    )\n                    : buttons[0].getAttribute(\n                        'data-unit-tab'\n                    ),\n                activeButton || buttons[0]\n            );\n\n        });\n\n    }\n\n\n    if(document.readyState === 'loading'){\n\n        document.addEventListener(\n            'DOMContentLoaded',\n            initUnitTabs\n        );\n\n    }else{\n\n        initUnitTabs();\n\n    }\n\n})();\n\n<\/script>\n ","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfe5 \u2695\ufe0f \u26a0\ufe0f \u2699\ufe0f \u2665 \ud83d\udc77\ud83c\udffb\u200d\u2642\ufe0f + KEJURUTERAAN Pengenalan Objektif Perkhidmatan Pengenalan Unit Bertanggungjawab mengawal selia dan memantau perkhidmatan sokongan hospital (PSH) yang disediakan oleh syarikat konsesi di Hospital Sibu. Objektif Objektif Unit Kejuruteraan Memastikan semua fasiliti, peralatan dan sistem kejuruteraan di Hospital Sibu berfungsi dengan selamat, cekap dan berkesan bagi menyokong penyampaian perkhidmatan kesihatan&#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-3160","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/wp-json\/wp\/v2\/pages\/3160","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=3160"}],"version-history":[{"count":2,"href":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/wp-json\/wp\/v2\/pages\/3160\/revisions"}],"predecessor-version":[{"id":3163,"href":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/wp-json\/wp\/v2\/pages\/3160\/revisions\/3163"}],"wp:attachment":[{"href":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/wp-json\/wp\/v2\/media?parent=3160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}