{"id":6178,"date":"2018-04-18T07:00:04","date_gmt":"2018-04-18T07:00:04","guid":{"rendered":"http:\/\/web.smkn6smg.sch.id\/?page_id=6178"},"modified":"2026-04-20T13:39:59","modified_gmt":"2026-04-20T06:39:59","slug":"staf-pengajar","status":"publish","type":"page","link":"https:\/\/smkn6smg.sch.id\/?page_id=6178","title":{"rendered":"Tenaga Pendidik"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6178\" class=\"elementor elementor-6178\" data-elementor-post-type=\"page\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-d2fbbeb e-flex e-con-boxed e-con e-parent\" data-id=\"d2fbbeb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-da1536b .smkn6-portal-scope elementor-widget elementor-widget-html\" data-id=\"da1536b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@700;800&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n  \r\n\r\n    <style>\r\n        .smkn6-pendidik-scope {\r\n            --navy-deep: #001A33;\r\n            --navy-royal: #003366;\r\n            --blue-accent: #3B82F6;\r\n            --blue-soft: #F0F9FF;\r\n            --text-main: #1E293B;\r\n            --text-muted: #64748B;\r\n            --white: #FFFFFF;\r\n            \r\n            font-family: 'Inter', sans-serif;\r\n            color: var(--text-main);\r\n            background-color: transparent;\r\n            line-height: 1.6;\r\n            width: 100%;\r\n        }\r\n\r\n        .smkn6-pendidik-scope .font-heading { font-family: 'Montserrat', sans-serif; }\r\n\r\n        .smkn6-pendidik-scope .main-container {\r\n            max-width: 1280px;\r\n            margin: 0 auto;\r\n            padding: 40px 15px;\r\n        }\r\n\r\n        .smkn6-pendidik-scope .header-section { text-align: center; margin-bottom: 50px; }\r\n\r\n        .smkn6-pendidik-scope .badge-top {\r\n            display: inline-block;\r\n            padding: 6px 18px;\r\n            background: var(--blue-soft);\r\n            color: var(--navy-royal);\r\n            border-radius: 50px;\r\n            font-size: 11px;\r\n            font-weight: 800;\r\n            text-transform: uppercase;\r\n            letter-spacing: 2px;\r\n            margin-bottom: 20px;\r\n            border: 1px solid rgba(59, 130, 246, 0.2);\r\n        }\r\n\r\n        .smkn6-pendidik-scope .header-section h2 {\r\n            font-size: clamp(28px, 5vw, 48px);\r\n            font-weight: 800;\r\n            color: var(--navy-royal);\r\n            margin-bottom: 15px;\r\n            letter-spacing: -1px;\r\n            line-height: 1.1;\r\n        }\r\n\r\n        .smkn6-pendidik-scope .header-divider {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 15px;\r\n            margin: 20px 0;\r\n        }\r\n\r\n        .smkn6-pendidik-scope .line-accent { width: 50px; height: 2px; background: var(--blue-accent); }\r\n        .smkn6-pendidik-scope .diamond-accent { color: var(--blue-accent); font-size: 14px; }\r\n\r\n        \/* Dashboard & Stats Styling *\/\r\n        .smkn6-pendidik-scope .dashboard-grid {\r\n            display: grid;\r\n            grid-template-columns: 1fr;\r\n            gap: 30px;\r\n            margin-bottom: 60px;\r\n        }\r\n\r\n        @media (min-width: 1024px) {\r\n            .smkn6-pendidik-scope .dashboard-grid { grid-template-columns: 5fr 7fr; align-items: center; }\r\n        }\r\n\r\n        .smkn6-pendidik-scope .stats-card {\r\n            background: var(--white);\r\n            padding: 35px;\r\n            border-radius: 35px;\r\n            border: 1px solid #E2E8F0;\r\n            box-shadow: 0 10px 30px rgba(0, 51, 102, 0.05);\r\n        }\r\n\r\n        .smkn6-pendidik-scope .chart-container {\r\n            position: relative;\r\n            width: 100%;\r\n            height: 300px;\r\n            max-height: 350px;\r\n        }\r\n\r\n        \/* Search Area *\/\r\n        .smkn6-pendidik-scope .search-container {\r\n            max-width: 650px;\r\n            margin: 0 auto 60px;\r\n            position: relative;\r\n        }\r\n\r\n        .smkn6-pendidik-scope .search-box {\r\n            width: 100%;\r\n            padding: 18px 25px 18px 55px;\r\n            border-radius: 100px;\r\n            border: 1px solid #E2E8F0;\r\n            font-family: 'Inter', sans-serif;\r\n            font-size: 16px;\r\n            transition: all 0.3s ease;\r\n            box-shadow: 0 10px 25px rgba(0, 51, 102, 0.03);\r\n            outline: none;\r\n        }\r\n\r\n        .smkn6-pendidik-scope .search-box:focus {\r\n            border-color: var(--blue-accent);\r\n            box-shadow: 0 15px 30px rgba(59, 130, 246, 0.1);\r\n        }\r\n\r\n        .smkn6-pendidik-scope .search-icon {\r\n            position: absolute;\r\n            left: 22px;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            color: var(--navy-royal);\r\n            font-size: 20px;\r\n            opacity: 0.5;\r\n        }\r\n\r\n        \/* Executive Grid *\/\r\n        .smkn6-pendidik-scope .teacher-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(1, 1fr);\r\n            gap: 25px;\r\n        }\r\n\r\n        @media (min-width: 640px) { .smkn6-pendidik-scope .teacher-grid { grid-template-columns: repeat(2, 1fr); } }\r\n        @media (min-width: 1024px) { .smkn6-pendidik-scope .teacher-grid { grid-template-columns: repeat(4, 1fr); gap: 35px; } }\r\n\r\n        \/* Executive Card Styling *\/\r\n        .smkn6-pendidik-scope .teacher-card {\r\n            background: var(--white);\r\n            border-radius: 35px;\r\n            padding: 40px 25px;\r\n            text-align: center;\r\n            border: 1px solid #E2E8F0;\r\n            transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            position: relative;\r\n            overflow: hidden;\r\n            box-shadow: 0 10px 30px rgba(0, 51, 102, 0.05);\r\n        }\r\n\r\n        .smkn6-pendidik-scope .teacher-card:hover {\r\n            transform: translateY(-12px);\r\n            box-shadow: 0 40px 80px -12px rgba(0, 31, 63, 0.15);\r\n            border-color: var(--blue-accent);\r\n        }\r\n\r\n        .smkn6-pendidik-scope .teacher-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 5px;\r\n            background: linear-gradient(90deg, var(--navy-royal), var(--blue-accent));\r\n            opacity: 0;\r\n            transition: opacity 0.3s ease;\r\n        }\r\n\r\n        .smkn6-pendidik-scope .teacher-card:hover::before { opacity: 1; }\r\n\r\n        .smkn6-pendidik-scope .avatar-frame {\r\n            width: 110px; height: 110px; margin-bottom: 20px; border-radius: 50%;\r\n            padding: 5px; background: linear-gradient(135deg, var(--blue-soft), #fff);\r\n            border: 1px solid #edf2f7; position: relative;\r\n            transition: all 0.5s ease;\r\n            display: flex; align-items: center; justify-content: center;\r\n        }\r\n\r\n        @media (min-width: 1024px) {\r\n            .smkn6-pendidik-scope .avatar-frame { width: 115px; height: 115px; }\r\n        }\r\n\r\n        .smkn6-pendidik-scope .teacher-card:hover .avatar-frame {\r\n            background: linear-gradient(135deg, var(--navy-royal), var(--blue-accent));\r\n            box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);\r\n        }\r\n\r\n        .smkn6-pendidik-scope .avatar-inner {\r\n            width: 100%; height: 100%; background: var(--navy-royal);\r\n            color: white; border-radius: 50%; display: flex; align-items: center;\r\n            justify-content: center; font-family: 'Montserrat', sans-serif;\r\n            font-weight: 800; font-size: 30px; border: 4px solid var(--white);\r\n        }\r\n\r\n        .smkn6-pendidik-scope .teacher-name {\r\n            font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 700;\r\n            color: var(--navy-royal); margin-bottom: 10px; line-height: 1.3;\r\n        }\r\n\r\n        .smkn6-pendidik-scope .teacher-subject {\r\n            font-size: 10px; font-weight: 700; color: var(--blue-accent);\r\n            text-transform: uppercase; letter-spacing: 1.5px; background: var(--blue-soft);\r\n            padding: 5px 14px; border-radius: 50px; display: inline-block;\r\n            border: 1px solid rgba(59, 130, 246, 0.1);\r\n        }\r\n\r\n        .smkn6-pendidik-scope .hidden-card { display: none; opacity: 0; transform: translateY(20px); transition: all 0.4s ease; }\r\n\r\n        \/* Pagination Area *\/\r\n        .smkn6-pendidik-scope .action-area { text-align: center; margin-top: 50px; padding-bottom: 50px; }\r\n\r\n        .smkn6-pendidik-scope .btn-luxury {\r\n            background: var(--navy-royal); color: var(--white); padding: 18px 45px;\r\n            border-radius: 100px; font-family: 'Montserrat', sans-serif;\r\n            font-weight: 700; font-size: 14px; border: none; cursor: pointer;\r\n            box-shadow: 0 15px 30px rgba(0, 51, 102, 0.2);\r\n            display: inline-flex; align-items: center; gap: 12px; transition: all 0.3s ease;\r\n        }\r\n\r\n        .smkn6-pendidik-scope .btn-luxury:hover {\r\n            background: var(--navy-deep); transform: translateY(-3px);\r\n            box-shadow: 0 20px 40px rgba(0, 51, 102, 0.3);\r\n        }\r\n\r\n        .smkn6-pendidik-scope .icon-toggle { font-size: 10px; transition: transform 0.4s ease; }\r\n        .smkn6-pendidik-scope .btn-luxury.is-active .icon-toggle { transform: rotate(180deg); }\r\n\r\n        .smkn6-pendidik-scope .no-data {\r\n            text-align: center; grid-column: 1 \/ -1; padding: 60px;\r\n            color: var(--text-muted); font-style: italic; font-weight: 500;\r\n        }\r\n    <\/style>\r\n\r\n<body>\r\n\r\n    <div class=\"smkn6-pendidik-scope\">\r\n        <div class=\"main-container\">\r\n            \r\n            <!-- HEADER -->\r\n            <div class=\"header-section\">\r\n      \r\n                <h3 class=\"font-heading\">Data Kepala Sekolah dan Tenaga Pendidik<\/h3>\r\n                <div class=\"header-divider\">\r\n                    <span class=\"line-accent\"><\/span>\r\n                    <span class=\"diamond-accent\">&#x25C8;<\/span>\r\n                    <span class=\"line-accent\"><\/span>\r\n                <\/div>\r\n                <p class=\"text-muted\" style=\"max-width: 800px; margin: 20px auto 0;\">\r\n                    Sinergi jajaran pendidik SMK Negeri 6 Semarang yang mendedikasikan keahlian guna mencetak lulusan kompeten, berkarakter, dan berdaya saing global.\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <!-- DASBOR STATISTIK -->\r\n            \r\n                <div class=\"stats-card\">\r\n                    <h5 class=\"font-heading\" style=\"color: var(--navy-royal); margin-bottom: 25px;\">Ringkasan Komposisi<\/h5>\r\n                    <div style=\"display: grid; gap: 15px;\">\r\n                        <div style=\"padding: 15px; background: var(--blue-soft); border-radius: 15px; display: flex; justify-content: space-between; align-items: center;\">\r\n                            <span style=\"font-weight: 600; font-size: 14px; color: var(--text-muted);\">Total Tenaga Pendidik<\/span>\r\n                            <span style=\"font-size: 24px; font-weight: 900; color: var(--navy-royal);\">69<\/span>\r\n                        <\/div>\r\n                        <div style=\"display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center;\">\r\n                            <div style=\"background: var(--navy-deep); color: white; padding: 10px; border-radius: 12px;\">\r\n                                <div style=\"font-weight: 800;\">10<\/div>\r\n                                <div style=\"font-size: 8px; text-transform: uppercase;\">Tata Busana<\/div>\r\n                            <\/div>\r\n                            <div style=\"background: var(--blue-accent); color: white; padding: 10px; border-radius: 12px;\">\r\n                                <div style=\"font-weight: 800;\">8<\/div>\r\n                                <div style=\"font-size: 8px; text-transform: uppercase;\">Kuliner<\/div>\r\n                            <\/div>\r\n                            <div style=\"background: #BAE6FD; color: var(--navy-royal); padding: 10px; border-radius: 12px;\">\r\n                                <div style=\"font-weight: 800;\">7<\/div>\r\n                                <div style=\"font-size: 8px; text-transform: uppercase;\">Perhotelan<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- SEARCH AREA -->\r\n            <div class=\"search-container\">\r\n                <span class=\"search-icon\">&#x1F50D;<\/span>\r\n                <input type=\"text\" id=\"teacher-search-input\" class=\"search-box\" placeholder=\"Cari nama guru atau mata pelajaran...\">\r\n            <\/div>\r\n\r\n            <!-- DIRECTORY GRID -->\r\n            <div id=\"teacher-directory-grid\" class=\"teacher-grid\"><\/div>\r\n\r\n            <!-- SEE MORE BUTTON -->\r\n            <div class=\"action-area\" id=\"see-more-wrapper\">\r\n                <button id=\"toggle-list-btn\" class=\"btn-luxury\">\r\n                    <span id=\"label-text\">Lihat Selengkapnya<\/span>\r\n                    <span class=\"icon-toggle\">&#x25BC;<\/span>\r\n                <\/button>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        (function() {\r\n            \/\/ Data 69 Tenaga Pendidik SMKN 6 Semarang\r\n            const teacherList = [\r\n                { n: \"Berti Sagendra, S.Pd., M.Pd.\", s: \"Kepala Sekolah\", p: \"https:\/\/smkn6smg.sch.id\/wp-content\/uploads\/2026\/04\/berti-close-scaled-e1776667127766.jpg?w=300&h=300&auto=format&fit=crop\" },\r\n                { n: \"Dra. Sri Murnisari\", s: \"Tata Busana\" },\r\n                { n: \"Dra. Kadariah Br Barus\", s: \"Kecantikan & SPA\" },\r\n                { n: \"Sulistiana, S.Pd.\", s: \"Tata Busana\" },\r\n                { n: \"Dra. Siti Isminingsih\", s: \"Tata Busana\" },\r\n                { n: \"Istiawati, S.E.\", s: \"Perhotelan\" },\r\n                { n: \"Asih Budi Lestari, S.Pd.\", s: \"Kecantikan & SPA\" },\r\n                { n: \"Nika Dewi Indriati, S.Pd., M.Pd.\", s: \"Matematika\" },\r\n                { n: \"Akhadun, S.Pd.\", s: \"Bahasa Inggris\" },\r\n                { n: \"Tri Soeparsih, S.E.\", s: \"Kuliner\" },\r\n                { n: \"Noor Aida Rahmiati, S.Pd., M.Pd.\", s: \"Tata Busana\" },\r\n                { n: \"Laswarmy Nusantaraningsih, S.E.\", s: \"Perhotelan\" },\r\n                { n: \"Hesti Hening Nastiti, S.E.\", s: \"Perhotelan\" },\r\n                { n: \"Wihantina Rahayu, S.Pd., M.Pd.\", s: \"Kuliner\" },\r\n                { n: \"Niken Sitoresmi, S.Pd.\", s: \"Bahasa Inggris\" },\r\n                { n: \"Isnaeni Ernawati, S.Pd.\", s: \"Matematika\" },\r\n                { n: \"Emik Widayanti, S.Pd., M.Pd.\", s: \"Bahasa Jawa\" },\r\n                { n: \"Pramono, S.Pd.\", s: \"Matematika\" },\r\n                { n: \"Prihmaningsih, S.Pd.\", s: \"Bahasa Indonesia\" },\r\n                { n: \"Widiyani, S.Pd.\", s: \"Tata Busana\" },\r\n                { n: \"Dewi Zulaekah, S.Pd.\", s: \"Tata Busana\" },\r\n                { n: \"Ardi Febrianto, S.E.\", s: \"Perhotelan\" },\r\n                { n: \"Mustofa Achmad Nur Huda, S.Pd.I.\", s: \"Agama Islam\" },\r\n                { n: \"Amaliah Hengkebohang, S.Pd.I.\", s: \"Agama Islam\" },\r\n                { n: \"Siti Markamah, S.Pd.\", s: \"Bahasa Indonesia\" },\r\n                { n: \"Rofiul Khafidz, S.Ag.\", s: \"Agama Islam\" },\r\n                { n: \"Suci Winarni, S.Kom.\", s: \"TIK\" },\r\n                { n: \"Yati Sukmayati, S.Pd.\", s: \"Kuliner\" },\r\n                { n: \"Syamsu Fidiyana, S.Pd.\", s: \"Tata Busana\" },\r\n                { n: \"Yulia Krantiwati, S.Pd.\", s: \"Kecantikan & SPA\" },\r\n                { n: \"Endah Purwatiningsih, S.Pd.\", s: \"Matematika\" },\r\n                { n: \"Ratna Widyaningrum, S.Pd.\", s: \"Kuliner\" },\r\n                { n: \"Dwi Utami, S.Pd.\", s: \"Bahasa Inggris\" },\r\n                { n: \"Sugiyanto Nurrohman, S.Pd.\", s: \"Sejarah\" },\r\n                { n: \"Adie Setiadhi, S.Pd.\", s: \"Penjasorkes\" },\r\n                { n: \"Anies Erfan Dinarin Budiharso, S.Pd.Gr.\", s: \"TIK\" },\r\n                { n: \"Kurnia Dewi Astriani, S.Pd.\", s: \"Seni Budaya\" },\r\n                { n: \"Maria Susana Widyaningsih, S.Pd.\", s: \"Bahasa Inggris\" },\r\n                { n: \"Dian Yuliyanti Ciptaningrum, S.Pd.\", s: \"Bahasa Jawa\" },\r\n                { n: \"Sinta Santi Salindri, S.Pd.\", s: \"Bahasa Indonesia\" },\r\n                { n: \"Esti Dewi Praptina Putri Endah, S.E.\", s: \"Perhotelan\" },\r\n                { n: \"Nova Prasetyaningrum, S.Pd.\", s: \"Bahasa Inggris\" },\r\n                { n: \"Syafrizal Febriawan, S.Pd.\", s: \"Sejarah\" },\r\n                { n: \"Evi Febriana, S.Pd.\", s: \"Bahasa Inggris\" },\r\n                { n: \"Dewi Ariyaya Safitri, S.Pd.\", s: \"Bahasa Jepang\" },\r\n                { n: \"Donny Dwi Jayanto, S.Pd.Gr.\", s: \"Bimbingan Konseling\" },\r\n                { n: \"Umi Nurul Muthi'ah, S.Pd.\", s: \"Kuliner\" },\r\n                { n: \"Irvan Surya Hardy, S.Pd.\", s: \"Kuliner\" },\r\n                { n: \"Putri Widi Astuti, S.Pd.\", s: \"Kuliner\" },\r\n                { n: \"Cempaka Wuryani Kusuma, S.Pd.\", s: \"Bimbingan Konseling\" },\r\n                { n: \"Novanto Eka Wahyu, S.Pd.\", s: \"IPAS\" },\r\n                { n: \"Shellika Parasdini, S.Pd.\", s: \"PPKN\" },\r\n                { n: \"Fahriza Arifianty Muvida, S.Pd.\", s: \"Kuliner\" },\r\n                { n: \"Yudisti Parliana, S.Pd.\", s: \"Kecantikan & SPA\" },\r\n                { n: \"Ardiana Kurnianingrum, S.Pd.\", s: \"Matematika\" },\r\n                { n: \"Ade Ela Pratiwi, S.Par.\", s: \"Perhotelan\" },\r\n                { n: \"Rina Lestari, S.Pd.\", s: \"PPKN\" },\r\n                { n: \"Eni Susanti, S.Pd.\", s: \"Bahasa Indonesia\" },\r\n                { n: \"Erni Eka Ariyanti, S.Pd.\", s: \"Kecantikan & SPA\" },\r\n                { n: \"Era Pralita, S.Pd.\", s: \"Tata Busana\" },\r\n                { n: \"Khoirul Anna Atmawati, S.Pd.\", s: \"Bahasa Inggris\" },\r\n                { n: \"Mochammad Ridwan, S.Pd.\", s: \"Penjasorkes\" },\r\n                { n: \"Wahyudi, S.Th.\", s: \"Agama Kristen\" },\r\n                { n: \"Rizky Nur Ratri, S.Pd.\", s: \"Tata Busana\" },\r\n                { n: \"Marselino Milianus Jehadut, S.Pd.\", s: \"Agama Katholik\" },\r\n                { n: \"Maula Najikh Wildana, S.Pd.\", s: \"IPAS\" },\r\n                { n: \"Madu Sudomo, S.Pd.\", s: \"Bahasa Jawa\" },\r\n                { n: \"Dianda Nur Istiqomah, S.Pd.\", s: \"Agama Islam\" },\r\n                { n: \"Chofifah Nur Mustaghfiroh, S.Pd.\", s: \"Bimbingan Konseling\" }\r\n            ];\r\n\r\n            const INITIAL_LIMIT = 12; \/\/ 3 baris\r\n            let isExpanded = false;\r\n            let currentSearch = '';\r\n\r\n            function getInitials(name) {\r\n                return name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();\r\n            }\r\n\r\n            \/* Cari bagian fungsi render() di script Anda dan ganti dengan ini *\/\r\n\r\nfunction render() {\r\n    const grid = document.getElementById('teacher-directory-grid');\r\n    const pag = document.getElementById('see-more-wrapper');\r\n    if (!grid) return;\r\n    \r\n    grid.innerHTML = '';\r\n    \r\n    const filtered = teacherList.filter(t => \r\n        t.n.toLowerCase().includes(currentSearch.toLowerCase()) || \r\n        t.s.toLowerCase().includes(currentSearch.toLowerCase())\r\n    );\r\n\r\n    if (filtered.length === 0) {\r\n        grid.innerHTML = `<div class=\"no-data\">Maaf, tenaga pendidik dengan kata kunci \"${currentSearch}\" tidak ditemukan.<\/div>`;\r\n        pag.style.display = 'none';\r\n        return;\r\n    }\r\n\r\n    filtered.forEach((t, i) => {\r\n        const card = document.createElement('div');\r\n        const isHidden = !isExpanded && i >= INITIAL_LIMIT && currentSearch === '';\r\n        card.className = `teacher-card ${isHidden ? 'hidden-card' : ''}`;\r\n        if (!isHidden) card.style.display = 'flex';\r\n        \r\n        \/\/ Logika tampilan Avatar: Foto vs Inisial\r\n        const avatarContent = (t.p && t.p !== \"\") \r\n            ? `<img decoding=\"async\" src=\"${t.p}\" alt=\"${t.n}\" style=\"width:100%; height:100%; object-fit:cover; border-radius:50%; border: 4px solid var(--white);\">`\r\n            : `<div class=\"avatar-inner\">${getInitials(t.n)}<\/div>`;\r\n        \r\n        card.innerHTML = `\r\n            <div class=\"avatar-frame\">\r\n                ${avatarContent}\r\n            <\/div>\r\n            <h4 class=\"teacher-name\">${t.n}<\/h4>\r\n            <span class=\"teacher-subject\">${t.s}<\/span>\r\n        `;\r\n        grid.appendChild(card);\r\n    });\r\n\r\n    \/\/ ... sisa logika pagination (tetap sama)\r\n}\r\n\r\n            function initChart() {\r\n                const canvas = document.getElementById('subjectDoughnut');\r\n                if (!canvas || typeof Chart === 'undefined') return;\r\n                \r\n                const ctx = canvas.getContext('2d');\r\n                new Chart(ctx, {\r\n                    type: 'doughnut',\r\n                    data: {\r\n                        labels: ['Tata Busana', 'Kuliner', 'Perhotelan', 'Bahasa Inggris', 'Matematika', 'Lainnya'],\r\n                        datasets: [{\r\n                            data: [10, 8, 7, 7, 6, 31],\r\n                            backgroundColor: ['#001A33', '#003366', '#3B82F6', '#60A5FA', '#93C5FD', '#E2E8F0'],\r\n                            borderWidth: 6,\r\n                            borderColor: '#ffffff',\r\n                            hoverOffset: 15\r\n                        }]\r\n                    },\r\n                    options: {\r\n                        responsive: true,\r\n                        maintainAspectRatio: false,\r\n                        plugins: {\r\n                            legend: { position: 'bottom', labels: { font: { family: 'Inter', weight: 'bold', size: 10 }, padding: 15, color: '#64748B' } },\r\n                            tooltip: { \r\n                                backgroundColor: '#003366', \r\n                                titleFont: { family: 'Montserrat' }, \r\n                                padding: 12, \r\n                                cornerRadius: 10,\r\n                                callbacks: {\r\n                                    label: function(context) {\r\n                                        return ` ${context.label}: ${context.raw} Guru`;\r\n                                    }\r\n                                }\r\n                            }\r\n                        },\r\n                        cutout: '75%'\r\n                    }\r\n                });\r\n            }\r\n\r\n            function init() {\r\n                const btn = document.getElementById('toggle-list-btn');\r\n                const label = document.getElementById('label-text');\r\n                const searchInput = document.getElementById('teacher-search-input');\r\n\r\n                if (btn) {\r\n                    btn.addEventListener('click', () => {\r\n                        isExpanded = !isExpanded;\r\n                        if (isExpanded) {\r\n                            const hiddens = document.querySelectorAll('.hidden-card');\r\n                            hiddens.forEach((c, idx) => {\r\n                                c.style.display = 'flex';\r\n                                setTimeout(() => {\r\n                                    c.style.opacity = '1';\r\n                                    c.style.transform = 'translateY(0)';\r\n                                }, idx * 30);\r\n                            });\r\n                            label.innerText = 'Sembunyikan';\r\n                            btn.classList.add('is-active');\r\n                        } else {\r\n                            label.innerText = 'Lihat Selengkapnya';\r\n                            btn.classList.remove('is-active');\r\n                            render();\r\n                            document.querySelector('.search-container').scrollIntoView({ behavior: 'smooth' });\r\n                        }\r\n                    });\r\n                }\r\n\r\n                if (searchInput) {\r\n                    searchInput.addEventListener('input', (e) => {\r\n                        currentSearch = e.target.value;\r\n                        render();\r\n                    });\r\n                }\r\n\r\n                render();\r\n                initChart();\r\n            }\r\n\r\n            if (document.readyState === 'loading') {\r\n                document.addEventListener('DOMContentLoaded', init);\r\n            } else {\r\n                init();\r\n            }\r\n        })();\r\n    <\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Data Kepala Sekolah dan Tenaga Pendidik &#x25C8; Sinergi jajaran pendidik SMK Negeri 6 Semarang yang mendedikasikan keahlian guna mencetak lulusan kompeten, berkarakter, dan berdaya saing global. Ringkasan Komposisi Total Tenaga Pendidik 69 10 Tata Busana 8 Kuliner 7 Perhotelan &#x1F50D; Lihat Selengkapnya &#x25BC;<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_gspb_post_css":"","footnotes":""},"class_list":["post-6178","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":8}},"jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":6179,"url":"https:\/\/smkn6smg.sch.id\/?page_id=6179","url_meta":{"origin":6178,"position":0},"title":"Tenaga Kependidikan","author":"Admin","date":"April 18, 2018","format":false,"excerpt":"Data Tenaga Kependidikan \u25c8 Sinergi profesional yang mendedikasikan keahlian administratif guna mendukung keunggulan ekosistem pendidikan di SMK Negeri 6 Semarang. Ringkasan Organisasi Total Personel 17 6 Penata 2 Pengelola 9 Operator Komposisi Peran Staf (Tahun Ajaran 2025\/2026) \ud83d\udd0d Lihat Selengkapnya \u25bc","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5780,"url":"https:\/\/smkn6smg.sch.id\/","url_meta":{"origin":6178,"position":1},"title":"Baru April","author":"Admin","date":"October 7, 2016","format":false,"excerpt":"SMK NEGERI 6 SEMARANGMenjadi bagian dari SMK Negeri 6 Semarang berarti siap melangkah menuju masa depan cerah. Berbagai prestasi dan kegiatan positif menjadi bukti komitmen sekolah dalam membentuk generasi berdaya saing tinggi.Visi & Misi Mewujudkan lulusan SMK Negeri 6 Semarang yang kompeten, berwawasan lingkungan, berdaya saing industri global, kreatif, dan\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/smkn6smg.sch.id\/wp-content\/uploads\/2026\/09\/WhatsApp-Image-2026-09-21-at-10.31.53-e1789978147172.jpeg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/smkn6smg.sch.id\/wp-content\/uploads\/2026\/09\/WhatsApp-Image-2026-09-21-at-10.31.53-e1789978147172.jpeg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/smkn6smg.sch.id\/wp-content\/uploads\/2026\/09\/WhatsApp-Image-2026-09-21-at-10.31.53-e1789978147172.jpeg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/smkn6smg.sch.id\/wp-content\/uploads\/2026\/09\/WhatsApp-Image-2026-09-21-at-10.31.53-e1789978147172.jpeg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":222,"url":"https:\/\/smkn6smg.sch.id\/?page_id=222","url_meta":{"origin":6178,"position":2},"title":"Full-width Page","author":"Admin","date":"September 23, 2016","format":false,"excerpt":"This is some dummy copy. You\u2019re not really supposed to read this dummy copy, it is just a place holder for people who need some type to visualize what the actual copy might look like if it were real content. If you want to read, I might suggest a good\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/smkn6smg.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/6178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smkn6smg.sch.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smkn6smg.sch.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smkn6smg.sch.id\/index.php?rest_route=\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/smkn6smg.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6178"}],"version-history":[{"count":24,"href":"https:\/\/smkn6smg.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/6178\/revisions"}],"predecessor-version":[{"id":11019,"href":"https:\/\/smkn6smg.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/6178\/revisions\/11019"}],"wp:attachment":[{"href":"https:\/\/smkn6smg.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}