\u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u0625\u062f\u0627\u0631\u064a | \u0627\u0644\u0645\u0639\u0647\u062f \u0627\u0644\u062a\u0642\u0646\u064a \u0627\u0644\u0633\u0645\u0627\u0648\u0629 – \u062c\u0627\u0645\u0639\u0629 \u0627\u0644\u0641\u0631\u0627\u062a \u0627\u0644\u0623\u0648\u0633\u0637 \u0627\u0644\u062a\u0642\u0646\u064a\u0629<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@300;400;500;600;700&family=Cairo:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n<style>\n:root {\n --bg: #f0f4fa;\n --surface: rgba(255,255,255,0.97);\n --border: rgba(30,80,140,0.10);\n --accent: #1A4D8C;\n --accent2: #2e7fc0;\n --text: #1a2c3e;\n --muted: #6b8aab;\n --pill-bg: rgba(230,243,255,0.85);\n --pill-bdr: #bcd5ee;\n --radius: 1.6rem;\n --orange: #ffb347;\n}\n*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }\nhtml { scroll-behavior: smooth; }\nbody {\n background: var(--bg);\n font-family: 'Sora', 'Cairo', system-ui, sans-serif;\n color: var(--text);\n min-height: 100vh;\n overflow-x: hidden;\n line-height: 1.6;\n}\n\/* \u2500\u2500 BACKGROUND ANIMATIONS (preserved) \u2500\u2500 *\/\n.bg-scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }\n.bg-grid {\n position: absolute; inset: 0;\n background-image: linear-gradient(rgba(26,77,140,.05) 1px, transparent 1px),\n linear-gradient(90deg, rgba(26,77,140,.05) 1px, transparent 1px);\n background-size: 56px 56px;\n animation: gridScroll 22s linear infinite;\n}\n@keyframes gridScroll { from { transform: perspective(700px) rotateX(28deg) translateY(0); } to { transform: perspective(700px) rotateX(28deg) translateY(56px); } }\n.bg-orb { position: absolute; border-radius: 50%; filter: blur(90px); animation: orbFloat 9s ease-in-out infinite alternate; }\n.orb1 { width:520px;height:520px;background:rgba(180,200,230,.38);top:-170px;right:-130px; }\n.orb2 { width:360px;height:360px;background:rgba(155,185,220,.28);bottom:8%;left:3%;animation-delay:-4s; }\n.orb3 { width:260px;height:260px;background:rgba(255,179,71,.15);top:40%;right:20%;animation-delay:-7s; }\n@keyframes orbFloat { from { transform: translate(0,0) scale(1); } to { transform: translate(28px,28px) scale(1.09); } }\n\/* \u2500\u2500 3D LOGO WATERMARKS \u2500\u2500 *\/\n.logo-watermark { position: absolute; pointer-events: none; z-index: 0; }\n.logo-center { top:50%; left:50%; transform:translate(-50%,-50%); }\n.logo-top-left { top:4%; left:2%; }\n.logo-bottom-right { bottom:4%; right:2%; }\n.logo-3d-wrapper { width:360px; height:360px; animation: spin3D 25s linear infinite; transform-style: preserve-3d; perspective: 800px; }\n.logo-3d-wrapper.logo-small { width:130px; height:130px; }\n.logo-3d-wrapper.logo-slow { animation-duration:35s; animation-direction:reverse; }\n@keyframes spin3D { 0% { transform: rotateY(0deg) rotateX(8deg); } 25% { transform: rotateY(90deg) rotateX(14deg) rotateZ(3deg); } 50% { transform: rotateY(180deg) rotateX(8deg); } 75% { transform: rotateY(270deg) rotateX(14deg) rotateZ(-3deg); } 100% { transform: rotateY(360deg) rotateX(8deg); } }\n.logo-3d-img { width:100%; height:100%; object-fit:contain; opacity:.06; mix-blend-mode:screen; filter: saturate(.8) brightness(.85); border-radius: 50%; animation: logoPulse 4.5s ease-in-out infinite alternate; }\n@keyframes logoPulse { from{opacity:.04} to{opacity:.12} }\n\/* particles *\/\n.particle { position: fixed; border-radius:50%; pointer-events:none; z-index:0; animation: floatP linear infinite; opacity:0; }\n@keyframes floatP { 0% { transform:translateY(100vh) rotate(0deg); opacity:0; } 10% { opacity:.55; } 90% { opacity:.55; } 100% { transform:translateY(-120px) rotate(360deg); opacity:0; } }\n\/* page layout *\/\n.page-wrap { position: relative; z-index:2; padding: 2.5rem 1.5rem 4rem; max-width: 1350px; margin: 0 auto; }\n\/* control bar *\/\n.control-bar {\n display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;\n gap: 1rem; background: var(--surface); border: 1px solid var(--border);\n border-radius: var(--radius); padding: 1.2rem 1.5rem; margin-bottom: 2rem;\n box-shadow: 0 4px 24px rgba(0,0,0,.08); backdrop-filter: blur(8px);\n}\n.bar-left { display: flex; align-items: center; gap: 1rem; }\n.bar-icon { width: 50px; height: 50px; background: linear-gradient(135deg, #1A4D8C, #2e7fc0); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; box-shadow: 0 4px 12px rgba(26,77,140,.3); flex-shrink: 0; }\n.bar-title { font-size: 1.2rem; font-weight: 800; color: var(--accent); line-height: 1.2; }\n.bar-subtitle { font-size: 0.85rem; color: var(--muted); font-weight: 600; margin-top: 4px; }\n.bar-right { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }\n.badge-count { background: var(--pill-bg); border: 1px solid var(--pill-bdr); padding: 0.4rem 1.2rem; border-radius: 60px; font-size: 0.85rem; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 6px; }\n.badge-orange { background: rgba(255, 179, 71, 0.15); border-color: rgba(255, 179, 71, 0.4); color: #b45f06; }\n.section-title {\n font-size: 1.6rem; font-weight: 800; color: #0a2b44;\n margin: 2rem 0 1.2rem; position: relative; display: inline-block; padding-right: 15px;\n}\n.section-title:after { content: \"\"; position: absolute; right: 0; bottom: -8px; width: 60px; height: 4px; background: var(--orange); border-radius: 4px; }\n\/* search & filter bar *\/\n.search-bar {\n background: var(--surface); border-radius: 60px; padding: 0.5rem 1rem;\n display: flex; align-items: center; gap: 12px; margin-bottom: 2rem;\n border: 1px solid var(--border); box-shadow: 0 4px 14px rgba(0,0,0,0.03);\n backdrop-filter: blur(4px);\n}\n.search-bar i { font-size: 1.3rem; color: var(--accent2); }\n.search-bar input {\n flex: 1; background: transparent; border: none; font-family: 'Cairo', sans-serif;\n font-size: 1rem; padding: 0.7rem 0; color: var(--text); outline: none;\n}\n.search-bar input::placeholder { color: var(--muted); font-weight: 500; }\n.filter-badge {\n background: var(--pill-bg); border-radius: 40px; padding: 0.3rem 1rem;\n font-size: 0.85rem; font-weight: 700; color: var(--accent);\n white-space: nowrap;\n}\n\/* staff grid *\/\n.staff-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.4rem;\n margin: 1.8rem 0 2rem;\n}\n.staff-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 1.2rem;\n padding: 1rem 1.2rem;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 1rem;\n cursor: default;\n position: relative;\n backdrop-filter: blur(2px);\n box-shadow: 0 6px 14px rgba(0,0,0,0.03);\n}\n.staff-card:hover {\n border-color: rgba(255,179,71,0.5);\n box-shadow: 0 12px 28px -8px rgba(26,77,140,0.2);\n}\n.staff-number {\n width: 42px;\n height: 42px;\n background: linear-gradient(145deg, #eef3fc, #e2ebf5);\n border-radius: 60%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 800;\n font-size: 1.2rem;\n color: var(--accent);\n border: 1px solid rgba(26,77,140,0.15);\n flex-shrink: 0;\n}\n.staff-info {\n flex: 1;\n}\n.staff-name {\n font-weight: 700;\n font-size: 1rem;\n color: #0f2c44;\n line-height: 1.4;\n word-break: break-word;\n font-family: 'Cairo', 'Sora', sans-serif;\n}\n.staff-role {\n font-size: 0.7rem;\n color: var(--muted);\n margin-top: 4px;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.staff-role i { font-size: 0.65rem; color: var(--orange); }\n.staff-card.hidden-card { display: none; }\n\/* empty state *\/\n.empty-state {\n text-align: center;\n padding: 3rem;\n background: var(--surface);\n border-radius: var(--radius);\n color: var(--muted);\n font-weight: 600;\n}\n\/* footer *\/\n.footer-note {\n margin-top: 3rem; text-align: center; background: var(--surface);\n border: 1px solid var(--border); border-radius: 60px; padding: 1rem 2rem;\n width: fit-content; margin-left: auto; margin-right: auto;\n font-size: 0.9rem; font-weight: 600; color: var(--muted);\n box-shadow: 0 4px 16px rgba(0,0,0,.05);\n}\n.footer-note i { color: var(--accent2); margin-left: 6px; }\n@media (max-width: 680px) {\n .page-wrap { padding: 1.2rem; }\n .control-bar { flex-direction: column; align-items: flex-start; }\n .bar-right { width: 100%; justify-content: start; }\n .staff-grid { grid-template-columns: 1fr; }\n .section-title { font-size: 1.35rem; }\n}\n<\/style>\n<\/head>\n<body>\n<div class=\"bg-scene\">\n <div class=\"bg-grid\"><\/div>\n <div class=\"bg-orb orb1\"><\/div>\n <div class=\"bg-orb orb2\"><\/div>\n <div class=\"bg-orb orb3\"><\/div>\n <div class=\"logo-watermark logo-center\">\n <div class=\"logo-3d-wrapper\"><img decoding=\"async\" src=\"https:\/\/isa.atu.edu.iq\/wp-content\/uploads\/2026\/04\/wwwwwwwwwww.png\" onerror=\"this.style.display='none'\" class=\"logo-3d-img\" alt=\"\"><\/div>\n <\/div>\n <div class=\"logo-watermark logo-top-left\">\n <div class=\"logo-3d-wrapper logo-small\"><img decoding=\"async\" src=\"https:\/\/isa.atu.edu.iq\/wp-content\/uploads\/2026\/04\/wwwwwwwwwww.png\" onerror=\"this.style.display='none'\" class=\"logo-3d-img\" alt=\"\"><\/div>\n <\/div>\n <div class=\"logo-watermark logo-bottom-right\">\n <div class=\"logo-3d-wrapper logo-small logo-slow\"><img decoding=\"async\" src=\"https:\/\/isa.atu.edu.iq\/wp-content\/uploads\/2026\/04\/wwwwwwwwwww.png\" onerror=\"this.style.display='none'\" class=\"logo-3d-img\" alt=\"\"><\/div>\n <\/div>\n<\/div>\n\n<div class=\"page-wrap\">\n \n <div class=\"control-bar\">\n <div class=\"bar-left\">\n <div class=\"bar-icon\"><i class=\"fas fa-user-tie\"><\/i><\/div>\n <div>\n <div class=\"bar-title\">\u0627\u0644\u0645\u0639\u0647\u062f \u0627\u0644\u062a\u0642\u0646\u064a \/ \u0627\u0644\u0633\u0645\u0627\u0648\u0629<\/div>\n <div class=\"bar-subtitle\"><i class=\"fas fa-map-marker-alt\" style=\"color:var(--orange);\"><\/i> \u0634\u0645\u0627\u0644 \u0645\u062f\u064a\u0646\u0629 \u0627\u0644\u0633\u0645\u0627\u0648\u0629 \u2013 \u0645\u062d\u0627\u0641\u0638\u0629 \u0627\u0644\u0645\u062b\u0646\u0649 | \u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u0625\u062f\u0627\u0631\u064a<\/div>\n <\/div>\n <\/div>\n <div class=\"bar-right\">\n <div class=\"badge-count\"><i class=\"fas fa-users\"><\/i> \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u064a\u0646 49<\/div>\n <div class=\"badge-count badge-orange\"><i class=\"fas fa-calendar-alt\"><\/i> \u062a\u0623\u0633\u0633 1989<\/div>\n <div class=\"badge-count\"><i class=\"fas fa-building\"><\/i> \u062c\u0627\u0645\u0639\u0629 \u0627\u0644\u0641\u0631\u0627\u062a \u0627\u0644\u0623\u0648\u0633\u0637<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"section-title\"><i class=\"fas fa-id-card\" style=\"color:var(--orange); margin-left:8px;\"><\/i> \u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u0625\u062f\u0627\u0631\u064a \u0644\u0644\u0645\u0639\u0647\u062f \u0627\u0644\u062a\u0642\u0646\u064a \u0628\u0627\u0644\u0633\u0645\u0627\u0648\u0629<\/div>\n \n <div class=\"search-bar\">\n <i class=\"fas fa-search\"><\/i>\n <input type=\"text\" id=\"staffSearchInput\" placeholder=\"\u0627\u0628\u062d\u062b \u0639\u0646 \u0645\u0648\u0638\u0641 \u0628\u0627\u0644\u0627\u0633\u0645 \u0623\u0648 \u0627\u0644\u0631\u0642\u0645 ...\" autocomplete=\"off\">\n <div class=\"filter-badge\" id=\"staffCounter\"><i class=\"fas fa-user-check\"><\/i> <span id=\"visibleCount\">49<\/span> \/ 49<\/div>\n <\/div>\n\n \n <div id=\"staffGridContainer\" class=\"staff-grid\"><\/div>\n\n \n <div class=\"mission-vision\" style=\"background: linear-gradient(110deg, rgba(255,255,255,0.94), rgba(248,250,252,0.96)); border-radius: var(--radius); padding: 1.5rem; border-right: 6px solid var(--orange); margin-top: 1.2rem;\">\n <div style=\"display: flex; align-items: center; gap: 12px; flex-wrap: wrap;\">\n <i class=\"fas fa-chalkboard-user\" style=\"font-size: 1.8rem; color: var(--accent2);\"><\/i>\n <span style=\"font-weight: 700;\">\u062f\u0648\u0631 \u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u0625\u062f\u0627\u0631\u064a:<\/span>\n <span style=\"color: var(--text);\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0634\u0624\u0648\u0646 \u0627\u0644\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0648\u0627\u0644\u0645\u0627\u0644\u064a\u0629\u060c \u0645\u062a\u0627\u0628\u0639\u0629 \u0633\u064a\u0631 \u0627\u0644\u0639\u0645\u0644\u064a\u0629 \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629\u060c \u062f\u0639\u0645 \u0627\u0644\u0623\u0642\u0633\u0627\u0645 \u0627\u0644\u0639\u0644\u0645\u064a\u0629\u060c \u0648\u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0644\u0644\u0637\u0644\u0628\u0629 \u0648\u0627\u0644\u0645\u0644\u0627\u0643\u0627\u062a \u0627\u0644\u062a\u062f\u0631\u064a\u0633\u064a\u0629 \u0636\u0645\u0646 \u0631\u0624\u064a\u0629 \u0627\u0644\u0645\u0639\u0647\u062f.<\/span>\n <\/div>\n <\/div>\n\n <div class=\"footer-note\">\n <i class=\"fas fa-university\"><\/i> \u00a9 2026 \u062c\u0627\u0645\u0639\u0629 \u0627\u0644\u0641\u0631\u0627\u062a \u0627\u0644\u0623\u0648\u0633\u0637 \u0627\u0644\u062a\u0642\u0646\u064a\u0629 \u2013 \u0627\u0644\u0645\u0639\u0647\u062f \u0627\u0644\u062a\u0642\u0646\u064a \u0627\u0644\u0633\u0645\u0627\u0648\u0629 | \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u064a\u0646 \u0627\u0644\u0631\u0633\u0645\u064a\u0629\n <\/div>\n<\/div>\n\n<script>\n\/\/ --------------------------------------------------------------\n\/\/ STAFF DATA (based on provided list, numbers 1 to 49)\n\/\/ --------------------------------------------------------------\nconst staffData = [\n { id: 1, name: \"\u0631\u062d\u064a\u0645 \u063a\u0635\u0627\u0628 \u062c\u062f\u0631\u0627\u0646 \u062a\u0648\u064a\u0633 \u0627\u0644\u0634\u0646\u0627\u0628\u0631\u0629\" },\n { id: 2, name: \"\u0648\u062d\u064a\u062f\u0629 \u0639\u062c\u0629 \u0639\u0628\u062f \u0627\u0644\u062d\u0633\u064a\u0646 \u0641\u0647\u062f \u0627\u0644 \u0641\u0647\u062f\" },\n { id: 3, name: \"\u062e\u062f\u064a\u062c\u0629 \u0639\u0645\u0631\u0627\u0646 \u0645\u0648\u0633\u0649 \u0627\u0639\u0628\u064a\u062f \u0627\u0644\u062d\u062c\u0627\u0645\" },\n { id: 4, name: \"\u0634\u0646\u062f\u0644 \u0645\u062f\u0644\u0648\u0644 \u062c\u0627\u0628\u0631 \u0627\u0644\u0639\u0648\u064a\u0644\u064a\" },\n { id: 5, name: \"\u0633\u0644\u064a\u0645\u0629 \u063a\u0627\u0641\u0644 \u0627\u0628\u0631\u0627\u0647\u064a\u0645 \u0627\u0644 \u0645\u0627\u0647\u064a\" },\n { id: 6, name: \"\u0628\u0634\u0631\u0649 \u062d\u0631\u0632 \u062d\u0633\u0648\u0646 \u0643\u0627\u0641\u064a\" },\n { id: 7, name: \"\u0647\u0646\u0627\u062f\u064a \u0637\u0627\u0631\u0642 \u0646\u0627\u064a\u0641 \u0627\u0644\u0634\u0645\u0631\u064a\" },\n { id: 8, name: \"\u0632\u0647\u064a\u0631 \u062c\u0627\u0633\u0645 \u0645\u062d\u0645\u062f \u0639\u0628\u0648\u062f\" },\n { id: 9, name: \"\u064a\u0633\u0631\u0649 \u0639\u0628\u062f \u0627\u0644\u062d\u0633\u064a\u0646 \u0645\u062d\u0645\u062f \u0627\u0644\u062e\u0641\u0627\u062c\u064a\" },\n { id: 10, name: \"\u064a\u0633\u0631\u0649 \u0639\u0628\u0627\u0633 \u0645\u062d\u0645\u0648\u062f \u0627\u0644\u0645\u0639\u0645\u0648\u0631\u064a\" },\n { id: 11, name: \"\u0643\u0627\u0638\u0645 \u062d\u0646\u0648\u0646 \u0637\u0627\u0647\u0631 \u0639\u0644\u064a\" },\n { id: 12, name: \"\u0631\u062d\u064a\u0645 \u0633\u0639\u0631\u0627\u0646 \u062a\u0648\u064a\u0633 \u0627\u0644\u0634\u0646\u0627\u0628\u0631\u0629\" },\n { id: 13, name: \"\u0645\u0648\u0634\u0629 \u0645\u062d\u0645\u062f \u063a\u0636\u0648\u0628 \u0627\u0644 \u0628\u0648\u062d\u0633\u064a\u0646\" },\n { id: 14, name: \"\u0639\u0628\u0627\u0633 \u0643\u0627\u0638\u0645 \u062d\u0648\u0627\u0644\u0629 \u0627\u0644\u0632\u0631\u064a\u062c\u0627\u0648\u064a\" },\n { id: 15, name: \"\u0639\u0644\u064a \u062d\u064a\u062f\u0631 \u0641\u0627\u0636\u0644 \u0627\u0644\u0632\u0631\u064a\u062c\u0627\u0648\u064a\" },\n { id: 16, name: \"\u0639\u0644\u064a \u062d\u0633\u064a\u0646 \u0645\u0627\u0646\u0639 \u0627\u0644 \u0643\u0645\u0627\u0634\" },\n { id: 17, name: \"\u0645\u062d\u0645\u062f \u0639\u0644\u064a \u062d\u0633\u064a\u0646 \u0627\u0644\u0639\u0644\u064a \u0627\u0644\u0633\u0645\u0627\u0648\u064a\" },\n { id: 18, name: \"\u063a\u0627\u0632\u064a \u0645\u0646\u0643\u0627\u0634 \u062d\u0645\u064a\u062f\u064a \u0627\u0644 \u0628\u0648 \u062d\u062c\u0631\" },\n { id: 19, name: \"\u062d\u0633\u0646 \u0645\u062d\u064a\u0628\u0633 \u0633\u0639\u0648\u062f \u0627\u0644 \u0632\u0648\u064a\u062f\" },\n { id: 20, name: \"\u062a\u0648\u0632\u064a\u0639 \u0646\u0639\u064a\u0645 \u062f\u0644\u064a\u0628\u0633 \u0627\u0644\u0634\u0646\u0627\u0628\u0631\u0629\" },\n { id: 21, name: \"\u0627\u0645\u064a\u0631\u0629 \u0639\u0644\u0648\u0627\u0646 \u0639\u0637\u0628\u0627\u0646 \u0627\u0644 \u0628\u0648 \u062d\u0645\u062f\" },\n { id: 22, name: \"\u0646\u0627\u062f\u064a\u0629 \u062b\u0627\u0645\u0631 \u0635\u0628\u0627\u062d \u0627\u0644\u0634\u0646\u0627\u0628\u0631\u0629\" },\n { id: 23, name: \"\u063a\u064a\u062f\u0627\u0621 \u062d\u0633\u0648\u0646 \u0639\u0628\u0648\u062f\u064a \u0633\u0639\u0648\u062f\u064a \u0627\u0644 \u0633\u0639\u0648\u062f\u064a\" },\n { id: 24, name: \"\u0639\u0627\u062f\u0644 \u0645\u062c\u064a\u062f \u062d\u0645\u0632\u0629 \u0627\u0644\u062f\u0641\u0627\u0639\u064a\" },\n { id: 25, name: \"\u0627\u0632\u0647\u0627\u0631 \u0641\u0627\u0644\u062d \u0643\u0627\u0637\u0639 \u0634\u0646\u0627\u0648\u0647 \u0627\u0644\u062d\u0635\u0645\u0648\u062f\" },\n { id: 26, name: \"\u0627\u0641\u0631\u0627\u062d \u062c\u0628\u0627\u0631 \u062c\u0648\u0639\u0627\u0646 \u0628\u062c\u0627\u064a \u0627\u0644\u0628\u062c\u0627\u064a\" },\n { id: 27, name: \"\u0628\u0634\u0627\u0626\u0631 \u0646\u0639\u064a\u0645 \u0645\u0634\u0639\u0644 \u0639\u0643\u0631\u0648\u062f \u0627\u0644\u0632\u064a\u0627\u062f\u064a\" },\n { id: 28, name: \"\u0631\u0633\u0644 \u062a\u0631\u0643\u064a \u062c\u0644\u0627\u0628 \u062c\u0628\u064a\u0631 \u0627\u0644\u0639\u0628\u0648\u062f\u064a\" },\n { id: 29, name: \"\u0631\u0633\u0644 \u0643\u0631\u064a\u0645 \u0639\u0628\u064a\u062f \u062d\u0633\u064a\u0646 \u0627\u0644\u0627\u0639\u0627\u062c\u064a\u0628\u064a\" },\n { id: 30, name: \"\u062f\u0644\u0627\u0644 \u0645\u0647\u062f\u064a \u0639\u0648\u0627\u062f \u062d\u0631\u062c\u0627\u0646 \u0627\u0644\u0632\u0631\u064a\u062c\u0627\u0648\u064a\" },\n { id: 31, name: \"\u0631\u0641\u0644 \u0633\u0627\u0645\u064a \u0645\u0643\u0637\u0648\u0641 \u0646\u0627\u0647\u064a \u0627\u0644\u063a\u0632\u064a\" },\n { id: 32, name: \"\u0631\u0648\u0627\u0621 \u0639\u0628\u062f\u0627\u0644\u0631\u0636\u0627 \u062e\u0644\u064a\u0648\u064a \u0639\u0644\u064a \u0627\u0644\u0628\u0631\u0643\u0627\u062a\" },\n { id: 33, name: \"\u0632\u0645\u0646 \u0639\u0628\u0627\u0633 \u0641\u0631\u062c \u0639\u0637\u064a\u0647 \u0627\u0644\u0638\u0648\u0627\u0644\u0645\" },\n { id: 34, name: \"\u0632\u0647\u0631\u0627\u0621 \u062d\u064a\u062f\u0631 \u0639\u0628\u062f\u0627\u0644\u0633\u062c\u0627\u062f \u0643\u0635\u0627\u062f \u0627\u0644\u0632\u0631\u064a\u062c\u0627\u0648\u064a\" },\n { id: 35, name: \"\u0632\u064a\u0646\u0628 \u0643\u0631\u064a\u0645 \u0639\u0648\u0627\u062f \u0645\u062d\u0645\u062f \u062d\u0633\u0646 \u062c\u0628\u0627\u0631 \u0627\u0644\u062c\u0628\u0627\u0631\" },\n { id: 36, name: \"\u0633\u062c\u0649 \u0639\u0628\u062f\u0627\u0644\u0643\u0631\u064a\u0645 \u062c\u0628\u0627\u0631 \u0632\u0627\u062c\u064a \u0627\u0644\u0646\u0627\u0635\u0631\u064a\" },\n { id: 37, name: \"\u0634\u0627\u0646\u0627\u0633 \u0635\u0628\u062d\u064a \u0643\u0627\u0638\u0645 \u0639\u0648\u0627\u062f \u0627\u0644\u062d\u062f\u0627\u062f\" },\n { id: 38, name: \"\u0635\u0627\u062f\u0642 \u0645\u062f\u0644\u0648\u0644 \u062f\u0648\u0647\u0627\u0646 \u0647\u0648\u064a\u062f\u064a \u0627\u0644 \u062d\u0648\u064a\u0634\" },\n { id: 39, name: \"\u0639\u0644\u0627\u0621 \u062e\u064a\u0631\u064a \u0639\u0628\u062f \u0634\u0645\u062e\u064a \u0627\u0644\u0639\u0633\u0643\u0631\u064a\" },\n { id: 40, name: \"\u0643\u0631\u0627\u0631 \u0644\u064a\u062b \u062d\u0645\u0648\u062f\u064a \u062c\u0627\u0633\u0645 \u0627\u0644\u062d\u0644\u0627\u0648\u064a\" },\n { id: 41, name: \"\u0645\u062d\u0645\u062f \u062c\u0627\u0628\u0631 \u0639\u0627\u062c\u0644 \u0631\u0648\u064a\u0639\u064a \u062c\u062a\u0627\u0646 \u0627\u0644\u0628\u0631\u0643\u064a\" },\n { id: 42, name: \"\u0645\u0633\u0644\u0645 \u0645\u062d\u0645\u062f \u062d\u0633\u064a\u0646 \u0645\u062d\u0645\u062f \u0627\u0644 \u0633\u0645\u0627\u0648\u064a\" },\n { id: 43, name: \"\u0645\u0635\u0637\u0641\u0649 \u0641\u0644\u064a\u062d \u0631\u062d\u064a\u0645 \u0644\u0627\u0647\u064a \u0627\u0644 \u0631\u0633\u0646\" },\n { id: 44, name: \"\u062f\u0639\u0627\u0621 \u0643\u0627\u0645\u0644 \u0639\u0628\u062f \u0627\u0644\u0646\u0627\u0635\u0631\u0639\u0628\u0627\u062f\u064a \u0627\u0644\u062c\u064a\u0627\u0634\u064a\" },\n { id: 45, name: \"\u0647\u064a\u0641\u0627\u0621 \u062d\u0627\u0643\u0645 \u0647\u0627\u062f\u064a \u0639\u0644\u064a \u0627\u0644\u062f\u0641\u0627\u0639\u064a\" },\n { id: 46, name: \"\u0628\u062a\u0648\u0644 \u0631\u062d\u064a\u0645 \u0635\u0639\u0635\u0639 \u0646\u0627\u0637\u0648\u0631 \u0627\u0644\u0645\u0637\u0648\u0643\u064a\" },\n { id: 47, name: \"\u0632\u0647\u0631\u0627\u0621 \u0639\u0628\u062f\u0627\u0644\u0631\u0636\u0627 \u0627\u0633\u0645\u0627\u0639\u064a\u0644 \u0633\u0639\u064a\u062f\" },\n { id: 48, name: \"\u0632\u064a\u0646\u0628 \u0639\u0644\u064a \u0631\u0627\u0636\u064a \u0639\u0628\u062f\u0627\u0644\u062d\u0633\u064a\u0646\" },\n { id: 49, name: \"\u062d\u0645\u0632\u0647 \u0639\u0628\u0648\u062f \u0639\u0628\u062f\u0627\u0644\u062d\u0633\u064a\u0646 \u0639\u0648\u062f\u0647 \u0627\u0644\u0631\u0643\u0627\u0628\u064a\" }\n];\n\n\/\/ helper: attach 3d tilt effect to any .staff-card (and also any future elements)\nfunction applyTiltToCards() {\n const cards = document.querySelectorAll('.staff-card');\n cards.forEach(card => {\n \/\/ remove any existing listener to avoid duplication but we can just set new.\n \/\/ but we'll use a fresh approach by replacing with new listeners? \n \/\/ We'll simply re-attach after cleaning old listeners by cloning? not needed, the event listeners can be added multiple times but we skip by checking a data attribute.\n if (card.hasAttribute('data-tilt-initialized')) return;\n card.setAttribute('data-tilt-initialized', 'true');\n \n const handleMouseMove = (e) => {\n const rect = card.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n const cx = rect.width \/ 2;\n const cy = rect.height \/ 2;\n const rX = ((y - cy) \/ cy) * 3;\n const rY = ((x - cx) \/ cx) * -3;\n card.style.transition = 'transform 0.08s ease, box-shadow 0.1s ease';\n card.style.transform = `perspective(800px) rotateX(${rX}deg) rotateY(${rY}deg) scale(1.01) translateY(-2px)`;\n card.style.boxShadow = '0 18px 30px -12px rgba(26,77,140,0.25)';\n card.style.borderColor = 'rgba(255,179,71,0.5)';\n };\n const handleMouseLeave = () => {\n card.style.transition = 'transform 0.3s cubic-bezier(0.2,0.9,0.4,1), box-shadow 0.3s ease';\n card.style.transform = '';\n card.style.boxShadow = '';\n card.style.borderColor = '';\n };\n card.addEventListener('mousemove', handleMouseMove);\n card.addEventListener('mouseleave', handleMouseLeave);\n });\n}\n\n\/\/ render staff grid\nfunction renderStaffCards(filterText = '') {\n const container = document.getElementById('staffGridContainer');\n if (!container) return;\n const lowerFilter = filterText.trim().toLowerCase();\n let visibleCount = 0;\n \n \/\/ build html\n let html = '';\n for (let staff of staffData) {\n const nameMatch = staff.name.toLowerCase().includes(lowerFilter);\n const idMatch = staff.id.toString().includes(lowerFilter);\n const isVisible = (lowerFilter === '' || nameMatch || idMatch);\n if (isVisible) visibleCount++;\n const hiddenClass = isVisible ? '' : 'hidden-card';\n \n html += `\n <div class=\"staff-card ${hiddenClass}\" data-staff-id=\"${staff.id}\" data-staff-name=\"${staff.name.replace(\/\"\/g, '"')}\">\n <div class=\"staff-number\">${staff.id}<\/div>\n <div class=\"staff-info\">\n <div class=\"staff-name\">${escapeHtml(staff.name)}<\/div>\n <div class=\"staff-role\"><i class=\"fas fa-id-badge\"><\/i> \u0645\u0648\u0638\u0641 \u0625\u062f\u0627\u0631\u064a<\/div>\n <\/div>\n <\/div>\n `;\n }\n container.innerHTML = html;\n \/\/ update visible counter\n const visibleSpan = document.getElementById('visibleCount');\n if (visibleSpan) visibleSpan.innerText = visibleCount;\n \/\/ re-apply tilt for newly generated cards\n applyTiltToCards();\n \n \/\/ if no visible and filter not empty show empty message?\n if (visibleCount === 0 && filterText !== '') {\n const emptyMsg = document.createElement('div');\n emptyMsg.className = 'empty-state';\n emptyMsg.innerHTML = '<i class=\"fas fa-user-slash\" style=\"font-size: 2rem; opacity:0.6;\"><\/i><p style=\"margin-top:10px;\">\u0644\u0627 \u064a\u0648\u062c\u062f \u0645\u0648\u0638\u0641\u0648\u0646 \u064a\u062a\u0637\u0627\u0628\u0642\u0648\u0646 \u0645\u0639 \u0627\u0644\u0628\u062d\u062b<\/p>';\n \/\/ but we dont want to duplicate; if container children includes empty we handle\n if (!container.querySelector('.empty-state')) {\n const existMsg = container.querySelector('.empty-state');\n if (existMsg) existMsg.remove();\n container.appendChild(emptyMsg);\n } else {\n const oldEmpty = container.querySelector('.empty-state');\n if (oldEmpty && visibleCount === 0) {\n \/\/ keep it\n } else if(oldEmpty) oldEmpty.remove();\n }\n } else {\n const oldEmpty = container.querySelector('.empty-state');\n if (oldEmpty) oldEmpty.remove();\n }\n}\n\n\/\/ simple escape for safety\nfunction escapeHtml(str) {\n return str.replace(\/[&<>]\/g, function(m) {\n if (m === '&') return '&';\n if (m === '<') return '<';\n if (m === '>') return '>';\n return m;\n }).replace(\/[\\uD800-\\uDBFF][\\uDC00-\\uDFFF]\/g, function(c) {\n return c;\n });\n}\n\n\/\/ live search handler\nfunction initSearch() {\n const searchInput = document.getElementById('staffSearchInput');\n if (searchInput) {\n searchInput.addEventListener('input', (e) => {\n renderStaffCards(e.target.value);\n });\n }\n}\n\n\/\/ floating particles (template preserved) \u2728\n(function() {\n const colors = ['#8faac8','#a2b9d6','#bfcfdf'];\n for(let i = 0; i < 22; i++){\n const el = document.createElement('div');\n el.className = 'particle';\n const s = Math.random() * 4 + 2;\n el.style.cssText = `width:${s}px;height:${s}px;background:${colors[i%3]};left:${Math.random()*100}vw;animation-duration:${Math.random()*12+8}s;animation-delay:${Math.random()*10}s;`;\n document.body.appendChild(el);\n }\n})();\n\n\/\/ Also preserve tilt for any static .data-card? none but keep generic\ndocument.addEventListener('DOMContentLoaded', () => {\n renderStaffCards('');\n initSearch();\n \/\/ If there are any extra tilt elements (not needed but for consistency)\n applyTiltToCards();\n});\n\/\/ additionally if any .mission-vision needs subtle hover effect? optional\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u0625\u062f\u0627\u0631\u064a | \u0627\u0644\u0645\u0639\u0647\u062f \u0627\u0644\u062a\u0642\u0646\u064a \u0627\u0644\u0633\u0645\u0627\u0648\u0629 – \u062c\u0627\u0645\u0639\u0629 \u0627\u0644\u0641\u0631\u0627\u062a \u0627\u0644\u0623\u0648\u0633\u0637 \u0627\u0644\u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u0645\u0639\u0647\u062f \u0627\u0644\u062a\u0642\u0646\u064a \/ \u0627\u0644\u0633\u0645\u0627\u0648\u0629 \u0634\u0645\u0627\u0644 \u0645\u062f\u064a\u0646\u0629 \u0627\u0644\u0633\u0645\u0627\u0648\u0629 \u2013 \u0645\u062d\u0627\u0641\u0638\u0629 \u0627\u0644\u0645\u062b\u0646\u0649 | \u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u0625\u062f\u0627\u0631\u064a \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u064a\u0646 49 \u062a\u0623\u0633\u0633 1989 \u062c\u0627\u0645\u0639\u0629 \u0627\u0644\u0641\u0631\u0627\u062a \u0627\u0644\u0623\u0648\u0633\u0637 \u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u0625\u062f\u0627\u0631\u064a \u0644\u0644\u0645\u0639\u0647\u062f \u0627\u0644\u062a\u0642\u0646\u064a \u0628\u0627\u0644\u0633\u0645\u0627\u0648\u0629 49 \/ 49 \u062f\u0648\u0631 \u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u0625\u062f\u0627\u0631\u064a: \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0634\u0624\u0648\u0646 \u0627\u0644\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0648\u0627\u0644\u0645\u0627\u0644\u064a\u0629\u060c \u0645\u062a\u0627\u0628\u0639\u0629 \u0633\u064a\u0631 \u0627\u0644\u0639\u0645\u0644\u064a\u0629 \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629\u060c \u062f\u0639\u0645 \u0627\u0644\u0623\u0642\u0633\u0627\u0645 \u0627\u0644\u0639\u0644\u0645\u064a\u0629\u060c \u0648\u062a\u0642\u062f\u064a\u0645 … <a href=\"https:\/\/isa.atu.edu.iq\/?page_id=22405\">Continued<\/a><\/p>\n","protected":false},"author":99900,"featured_media":21637,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-22405","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/pages\/22405","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/users\/99900"}],"replies":[{"embeddable":true,"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=22405"}],"version-history":[{"count":1,"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/pages\/22405\/revisions"}],"predecessor-version":[{"id":22406,"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/pages\/22405\/revisions\/22406"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/media\/21637"}],"wp:attachment":[{"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":22405,"date":"2026-04-28T08:41:36","date_gmt":"2026-04-28T05:41:36","guid":{"rendered":"https:\/\/isa.atu.edu.iq\/?page_id=22405"},"modified":"2026-04-28T09:49:10","modified_gmt":"2026-04-28T06:49:10","slug":"%d8%a7%d9%84%d8%a7%d8%af%d8%a7%d8%b1%d9%8a%d9%8a%d9%86-2","status":"publish","type":"page","link":"https:\/\/isa.atu.edu.iq\/?page_id=22405","title":{"rendered":"\u0627\u0644\u0627\u062f\u0627\u0631\u064a\u064a\u0646"},"content":{"rendered":"\n\n\n\n\n\n\u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u0625\u062f\u0627\u0631\u064a | \u0627\u0644\u0645\u0639\u0647\u062f \u0627\u0644\u062a\u0642\u0646\u064a \u0627\u0644\u0633\u0645\u0627\u0648\u0629 – \u062c\u0627\u0645\u0639\u0629 \u0627\u0644\u0641\u0631\u0627\u062a \u0627\u0644\u0623\u0648\u0633\u0637 \u0627\u0644\u062a\u0642\u0646\u064a\u0629<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@300;400;500;600;700&family=Cairo:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n<style>\n:root {\n --bg: #f0f4fa;\n --surface: rgba(255,255,255,0.97);\n --border: rgba(30,80,140,0.10);\n --accent: #1A4D8C;\n --accent2: #2e7fc0;\n --text: #1a2c3e;\n --muted: #6b8aab;\n --pill-bg: rgba(230,243,255,0.85);\n --pill-bdr: #bcd5ee;\n --radius: 1.6rem;\n --orange: #ffb347;\n}\n*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }\nhtml { scroll-behavior: smooth; }\nbody {\n background: var(--bg);\n font-family: 'Sora', 'Cairo', system-ui, sans-serif;\n color: var(--text);\n min-height: 100vh;\n overflow-x: hidden;\n line-height: 1.6;\n}\n\/* \u2500\u2500 BACKGROUND ANIMATIONS (preserved) \u2500\u2500 *\/\n.bg-scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }\n.bg-grid {\n position: absolute; inset: 0;\n background-image: linear-gradient(rgba(26,77,140,.05) 1px, transparent 1px),\n linear-gradient(90deg, rgba(26,77,140,.05) 1px, transparent 1px);\n background-size: 56px 56px;\n animation: gridScroll 22s linear infinite;\n}\n@keyframes gridScroll { from { transform: perspective(700px) rotateX(28deg) translateY(0); } to { transform: perspective(700px) rotateX(28deg) translateY(56px); } }\n.bg-orb { position: absolute; border-radius: 50%; filter: blur(90px); animation: orbFloat 9s ease-in-out infinite alternate; }\n.orb1 { width:520px;height:520px;background:rgba(180,200,230,.38);top:-170px;right:-130px; }\n.orb2 { width:360px;height:360px;background:rgba(155,185,220,.28);bottom:8%;left:3%;animation-delay:-4s; }\n.orb3 { width:260px;height:260px;background:rgba(255,179,71,.15);top:40%;right:20%;animation-delay:-7s; }\n@keyframes orbFloat { from { transform: translate(0,0) scale(1); } to { transform: translate(28px,28px) scale(1.09); } }\n\/* \u2500\u2500 3D LOGO WATERMARKS \u2500\u2500 *\/\n.logo-watermark { position: absolute; pointer-events: none; z-index: 0; }\n.logo-center { top:50%; left:50%; transform:translate(-50%,-50%); }\n.logo-top-left { top:4%; left:2%; }\n.logo-bottom-right { bottom:4%; right:2%; }\n.logo-3d-wrapper { width:360px; height:360px; animation: spin3D 25s linear infinite; transform-style: preserve-3d; perspective: 800px; }\n.logo-3d-wrapper.logo-small { width:130px; height:130px; }\n.logo-3d-wrapper.logo-slow { animation-duration:35s; animation-direction:reverse; }\n@keyframes spin3D { 0% { transform: rotateY(0deg) rotateX(8deg); } 25% { transform: rotateY(90deg) rotateX(14deg) rotateZ(3deg); } 50% { transform: rotateY(180deg) rotateX(8deg); } 75% { transform: rotateY(270deg) rotateX(14deg) rotateZ(-3deg); } 100% { transform: rotateY(360deg) rotateX(8deg); } }\n.logo-3d-img { width:100%; height:100%; object-fit:contain; opacity:.06; mix-blend-mode:screen; filter: saturate(.8) brightness(.85); border-radius: 50%; animation: logoPulse 4.5s ease-in-out infinite alternate; }\n@keyframes logoPulse { from{opacity:.04} to{opacity:.12} }\n\/* particles *\/\n.particle { position: fixed; border-radius:50%; pointer-events:none; z-index:0; animation: floatP linear infinite; opacity:0; }\n@keyframes floatP { 0% { transform:translateY(100vh) rotate(0deg); opacity:0; } 10% { opacity:.55; } 90% { opacity:.55; } 100% { transform:translateY(-120px) rotate(360deg); opacity:0; } }\n\/* page layout *\/\n.page-wrap { position: relative; z-index:2; padding: 2.5rem 1.5rem 4rem; max-width: 1350px; margin: 0 auto; }\n\/* control bar *\/\n.control-bar {\n display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;\n gap: 1rem; background: var(--surface); border: 1px solid var(--border);\n border-radius: var(--radius); padding: 1.2rem 1.5rem; margin-bottom: 2rem;\n box-shadow: 0 4px 24px rgba(0,0,0,.08); backdrop-filter: blur(8px);\n}\n.bar-left { display: flex; align-items: center; gap: 1rem; }\n.bar-icon { width: 50px; height: 50px; background: linear-gradient(135deg, #1A4D8C, #2e7fc0); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; box-shadow: 0 4px 12px rgba(26,77,140,.3); flex-shrink: 0; }\n.bar-title { font-size: 1.2rem; font-weight: 800; color: var(--accent); line-height: 1.2; }\n.bar-subtitle { font-size: 0.85rem; color: var(--muted); font-weight: 600; margin-top: 4px; }\n.bar-right { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }\n.badge-count { background: var(--pill-bg); border: 1px solid var(--pill-bdr); padding: 0.4rem 1.2rem; border-radius: 60px; font-size: 0.85rem; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 6px; }\n.badge-orange { background: rgba(255, 179, 71, 0.15); border-color: rgba(255, 179, 71, 0.4); color: #b45f06; }\n.section-title {\n font-size: 1.6rem; font-weight: 800; color: #0a2b44;\n margin: 2rem 0 1.2rem; position: relative; display: inline-block; padding-right: 15px;\n}\n.section-title:after { content: \"\"; position: absolute; right: 0; bottom: -8px; width: 60px; height: 4px; background: var(--orange); border-radius: 4px; }\n\/* search & filter bar *\/\n.search-bar {\n background: var(--surface); border-radius: 60px; padding: 0.5rem 1rem;\n display: flex; align-items: center; gap: 12px; margin-bottom: 2rem;\n border: 1px solid var(--border); box-shadow: 0 4px 14px rgba(0,0,0,0.03);\n backdrop-filter: blur(4px);\n}\n.search-bar i { font-size: 1.3rem; color: var(--accent2); }\n.search-bar input {\n flex: 1; background: transparent; border: none; font-family: 'Cairo', sans-serif;\n font-size: 1rem; padding: 0.7rem 0; color: var(--text); outline: none;\n}\n.search-bar input::placeholder { color: var(--muted); font-weight: 500; }\n.filter-badge {\n background: var(--pill-bg); border-radius: 40px; padding: 0.3rem 1rem;\n font-size: 0.85rem; font-weight: 700; color: var(--accent);\n white-space: nowrap;\n}\n\/* staff grid *\/\n.staff-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.4rem;\n margin: 1.8rem 0 2rem;\n}\n.staff-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 1.2rem;\n padding: 1rem 1.2rem;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 1rem;\n cursor: default;\n position: relative;\n backdrop-filter: blur(2px);\n box-shadow: 0 6px 14px rgba(0,0,0,0.03);\n}\n.staff-card:hover {\n border-color: rgba(255,179,71,0.5);\n box-shadow: 0 12px 28px -8px rgba(26,77,140,0.2);\n}\n.staff-number {\n width: 42px;\n height: 42px;\n background: linear-gradient(145deg, #eef3fc, #e2ebf5);\n border-radius: 60%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 800;\n font-size: 1.2rem;\n color: var(--accent);\n border: 1px solid rgba(26,77,140,0.15);\n flex-shrink: 0;\n}\n.staff-info {\n flex: 1;\n}\n.staff-name {\n font-weight: 700;\n font-size: 1rem;\n color: #0f2c44;\n line-height: 1.4;\n word-break: break-word;\n font-family: 'Cairo', 'Sora', sans-serif;\n}\n.staff-role {\n font-size: 0.7rem;\n color: var(--muted);\n margin-top: 4px;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.staff-role i { font-size: 0.65rem; color: var(--orange); }\n.staff-card.hidden-card { display: none; }\n\/* empty state *\/\n.empty-state {\n text-align: center;\n padding: 3rem;\n background: var(--surface);\n border-radius: var(--radius);\n color: var(--muted);\n font-weight: 600;\n}\n\/* footer *\/\n.footer-note {\n margin-top: 3rem; text-align: center; background: var(--surface);\n border: 1px solid var(--border); border-radius: 60px; padding: 1rem 2rem;\n width: fit-content; margin-left: auto; margin-right: auto;\n font-size: 0.9rem; font-weight: 600; color: var(--muted);\n box-shadow: 0 4px 16px rgba(0,0,0,.05);\n}\n.footer-note i { color: var(--accent2); margin-left: 6px; }\n@media (max-width: 680px) {\n .page-wrap { padding: 1.2rem; }\n .control-bar { flex-direction: column; align-items: flex-start; }\n .bar-right { width: 100%; justify-content: start; }\n .staff-grid { grid-template-columns: 1fr; }\n .section-title { font-size: 1.35rem; }\n}\n<\/style>\n<\/head>\n<body>\n<div class=\"bg-scene\">\n <div class=\"bg-grid\"><\/div>\n <div class=\"bg-orb orb1\"><\/div>\n <div class=\"bg-orb orb2\"><\/div>\n <div class=\"bg-orb orb3\"><\/div>\n <div class=\"logo-watermark logo-center\">\n <div class=\"logo-3d-wrapper\"><img decoding=\"async\" src=\"https:\/\/isa.atu.edu.iq\/wp-content\/uploads\/2026\/04\/wwwwwwwwwww.png\" onerror=\"this.style.display='none'\" class=\"logo-3d-img\" alt=\"\"><\/div>\n <\/div>\n <div class=\"logo-watermark logo-top-left\">\n <div class=\"logo-3d-wrapper logo-small\"><img decoding=\"async\" src=\"https:\/\/isa.atu.edu.iq\/wp-content\/uploads\/2026\/04\/wwwwwwwwwww.png\" onerror=\"this.style.display='none'\" class=\"logo-3d-img\" alt=\"\"><\/div>\n <\/div>\n <div class=\"logo-watermark logo-bottom-right\">\n <div class=\"logo-3d-wrapper logo-small logo-slow\"><img decoding=\"async\" src=\"https:\/\/isa.atu.edu.iq\/wp-content\/uploads\/2026\/04\/wwwwwwwwwww.png\" onerror=\"this.style.display='none'\" class=\"logo-3d-img\" alt=\"\"><\/div>\n <\/div>\n<\/div>\n\n<div class=\"page-wrap\">\n \n <div class=\"control-bar\">\n <div class=\"bar-left\">\n <div class=\"bar-icon\"><i class=\"fas fa-user-tie\"><\/i><\/div>\n <div>\n <div class=\"bar-title\">\u0627\u0644\u0645\u0639\u0647\u062f \u0627\u0644\u062a\u0642\u0646\u064a \/ \u0627\u0644\u0633\u0645\u0627\u0648\u0629<\/div>\n <div class=\"bar-subtitle\"><i class=\"fas fa-map-marker-alt\" style=\"color:var(--orange);\"><\/i> \u0634\u0645\u0627\u0644 \u0645\u062f\u064a\u0646\u0629 \u0627\u0644\u0633\u0645\u0627\u0648\u0629 \u2013 \u0645\u062d\u0627\u0641\u0638\u0629 \u0627\u0644\u0645\u062b\u0646\u0649 | \u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u0625\u062f\u0627\u0631\u064a<\/div>\n <\/div>\n <\/div>\n <div class=\"bar-right\">\n <div class=\"badge-count\"><i class=\"fas fa-users\"><\/i> \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u064a\u0646 49<\/div>\n <div class=\"badge-count badge-orange\"><i class=\"fas fa-calendar-alt\"><\/i> \u062a\u0623\u0633\u0633 1989<\/div>\n <div class=\"badge-count\"><i class=\"fas fa-building\"><\/i> \u062c\u0627\u0645\u0639\u0629 \u0627\u0644\u0641\u0631\u0627\u062a \u0627\u0644\u0623\u0648\u0633\u0637<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"section-title\"><i class=\"fas fa-id-card\" style=\"color:var(--orange); margin-left:8px;\"><\/i> \u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u0625\u062f\u0627\u0631\u064a \u0644\u0644\u0645\u0639\u0647\u062f \u0627\u0644\u062a\u0642\u0646\u064a \u0628\u0627\u0644\u0633\u0645\u0627\u0648\u0629<\/div>\n \n <div class=\"search-bar\">\n <i class=\"fas fa-search\"><\/i>\n <input type=\"text\" id=\"staffSearchInput\" placeholder=\"\u0627\u0628\u062d\u062b \u0639\u0646 \u0645\u0648\u0638\u0641 \u0628\u0627\u0644\u0627\u0633\u0645 \u0623\u0648 \u0627\u0644\u0631\u0642\u0645 ...\" autocomplete=\"off\">\n <div class=\"filter-badge\" id=\"staffCounter\"><i class=\"fas fa-user-check\"><\/i> <span id=\"visibleCount\">49<\/span> \/ 49<\/div>\n <\/div>\n\n \n <div id=\"staffGridContainer\" class=\"staff-grid\"><\/div>\n\n \n <div class=\"mission-vision\" style=\"background: linear-gradient(110deg, rgba(255,255,255,0.94), rgba(248,250,252,0.96)); border-radius: var(--radius); padding: 1.5rem; border-right: 6px solid var(--orange); margin-top: 1.2rem;\">\n <div style=\"display: flex; align-items: center; gap: 12px; flex-wrap: wrap;\">\n <i class=\"fas fa-chalkboard-user\" style=\"font-size: 1.8rem; color: var(--accent2);\"><\/i>\n <span style=\"font-weight: 700;\">\u062f\u0648\u0631 \u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u0625\u062f\u0627\u0631\u064a:<\/span>\n <span style=\"color: var(--text);\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0634\u0624\u0648\u0646 \u0627\u0644\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0648\u0627\u0644\u0645\u0627\u0644\u064a\u0629\u060c \u0645\u062a\u0627\u0628\u0639\u0629 \u0633\u064a\u0631 \u0627\u0644\u0639\u0645\u0644\u064a\u0629 \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629\u060c \u062f\u0639\u0645 \u0627\u0644\u0623\u0642\u0633\u0627\u0645 \u0627\u0644\u0639\u0644\u0645\u064a\u0629\u060c \u0648\u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0644\u0644\u0637\u0644\u0628\u0629 \u0648\u0627\u0644\u0645\u0644\u0627\u0643\u0627\u062a \u0627\u0644\u062a\u062f\u0631\u064a\u0633\u064a\u0629 \u0636\u0645\u0646 \u0631\u0624\u064a\u0629 \u0627\u0644\u0645\u0639\u0647\u062f.<\/span>\n <\/div>\n <\/div>\n\n <div class=\"footer-note\">\n <i class=\"fas fa-university\"><\/i> \u00a9 2026 \u062c\u0627\u0645\u0639\u0629 \u0627\u0644\u0641\u0631\u0627\u062a \u0627\u0644\u0623\u0648\u0633\u0637 \u0627\u0644\u062a\u0642\u0646\u064a\u0629 \u2013 \u0627\u0644\u0645\u0639\u0647\u062f \u0627\u0644\u062a\u0642\u0646\u064a \u0627\u0644\u0633\u0645\u0627\u0648\u0629 | \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u064a\u0646 \u0627\u0644\u0631\u0633\u0645\u064a\u0629\n <\/div>\n<\/div>\n\n<script>\n\/\/ --------------------------------------------------------------\n\/\/ STAFF DATA (based on provided list, numbers 1 to 49)\n\/\/ --------------------------------------------------------------\nconst staffData = [\n { id: 1, name: \"\u0631\u062d\u064a\u0645 \u063a\u0635\u0627\u0628 \u062c\u062f\u0631\u0627\u0646 \u062a\u0648\u064a\u0633 \u0627\u0644\u0634\u0646\u0627\u0628\u0631\u0629\" },\n { id: 2, name: \"\u0648\u062d\u064a\u062f\u0629 \u0639\u062c\u0629 \u0639\u0628\u062f \u0627\u0644\u062d\u0633\u064a\u0646 \u0641\u0647\u062f \u0627\u0644 \u0641\u0647\u062f\" },\n { id: 3, name: \"\u062e\u062f\u064a\u062c\u0629 \u0639\u0645\u0631\u0627\u0646 \u0645\u0648\u0633\u0649 \u0627\u0639\u0628\u064a\u062f \u0627\u0644\u062d\u062c\u0627\u0645\" },\n { id: 4, name: \"\u0634\u0646\u062f\u0644 \u0645\u062f\u0644\u0648\u0644 \u062c\u0627\u0628\u0631 \u0627\u0644\u0639\u0648\u064a\u0644\u064a\" },\n { id: 5, name: \"\u0633\u0644\u064a\u0645\u0629 \u063a\u0627\u0641\u0644 \u0627\u0628\u0631\u0627\u0647\u064a\u0645 \u0627\u0644 \u0645\u0627\u0647\u064a\" },\n { id: 6, name: \"\u0628\u0634\u0631\u0649 \u062d\u0631\u0632 \u062d\u0633\u0648\u0646 \u0643\u0627\u0641\u064a\" },\n { id: 7, name: \"\u0647\u0646\u0627\u062f\u064a \u0637\u0627\u0631\u0642 \u0646\u0627\u064a\u0641 \u0627\u0644\u0634\u0645\u0631\u064a\" },\n { id: 8, name: \"\u0632\u0647\u064a\u0631 \u062c\u0627\u0633\u0645 \u0645\u062d\u0645\u062f \u0639\u0628\u0648\u062f\" },\n { id: 9, name: \"\u064a\u0633\u0631\u0649 \u0639\u0628\u062f \u0627\u0644\u062d\u0633\u064a\u0646 \u0645\u062d\u0645\u062f \u0627\u0644\u062e\u0641\u0627\u062c\u064a\" },\n { id: 10, name: \"\u064a\u0633\u0631\u0649 \u0639\u0628\u0627\u0633 \u0645\u062d\u0645\u0648\u062f \u0627\u0644\u0645\u0639\u0645\u0648\u0631\u064a\" },\n { id: 11, name: \"\u0643\u0627\u0638\u0645 \u062d\u0646\u0648\u0646 \u0637\u0627\u0647\u0631 \u0639\u0644\u064a\" },\n { id: 12, name: \"\u0631\u062d\u064a\u0645 \u0633\u0639\u0631\u0627\u0646 \u062a\u0648\u064a\u0633 \u0627\u0644\u0634\u0646\u0627\u0628\u0631\u0629\" },\n { id: 13, name: \"\u0645\u0648\u0634\u0629 \u0645\u062d\u0645\u062f \u063a\u0636\u0648\u0628 \u0627\u0644 \u0628\u0648\u062d\u0633\u064a\u0646\" },\n { id: 14, name: \"\u0639\u0628\u0627\u0633 \u0643\u0627\u0638\u0645 \u062d\u0648\u0627\u0644\u0629 \u0627\u0644\u0632\u0631\u064a\u062c\u0627\u0648\u064a\" },\n { id: 15, name: \"\u0639\u0644\u064a \u062d\u064a\u062f\u0631 \u0641\u0627\u0636\u0644 \u0627\u0644\u0632\u0631\u064a\u062c\u0627\u0648\u064a\" },\n { id: 16, name: \"\u0639\u0644\u064a \u062d\u0633\u064a\u0646 \u0645\u0627\u0646\u0639 \u0627\u0644 \u0643\u0645\u0627\u0634\" },\n { id: 17, name: \"\u0645\u062d\u0645\u062f \u0639\u0644\u064a \u062d\u0633\u064a\u0646 \u0627\u0644\u0639\u0644\u064a \u0627\u0644\u0633\u0645\u0627\u0648\u064a\" },\n { id: 18, name: \"\u063a\u0627\u0632\u064a \u0645\u0646\u0643\u0627\u0634 \u062d\u0645\u064a\u062f\u064a \u0627\u0644 \u0628\u0648 \u062d\u062c\u0631\" },\n { id: 19, name: \"\u062d\u0633\u0646 \u0645\u062d\u064a\u0628\u0633 \u0633\u0639\u0648\u062f \u0627\u0644 \u0632\u0648\u064a\u062f\" },\n { id: 20, name: \"\u062a\u0648\u0632\u064a\u0639 \u0646\u0639\u064a\u0645 \u062f\u0644\u064a\u0628\u0633 \u0627\u0644\u0634\u0646\u0627\u0628\u0631\u0629\" },\n { id: 21, name: \"\u0627\u0645\u064a\u0631\u0629 \u0639\u0644\u0648\u0627\u0646 \u0639\u0637\u0628\u0627\u0646 \u0627\u0644 \u0628\u0648 \u062d\u0645\u062f\" },\n { id: 22, name: \"\u0646\u0627\u062f\u064a\u0629 \u062b\u0627\u0645\u0631 \u0635\u0628\u0627\u062d \u0627\u0644\u0634\u0646\u0627\u0628\u0631\u0629\" },\n { id: 23, name: \"\u063a\u064a\u062f\u0627\u0621 \u062d\u0633\u0648\u0646 \u0639\u0628\u0648\u062f\u064a \u0633\u0639\u0648\u062f\u064a \u0627\u0644 \u0633\u0639\u0648\u062f\u064a\" },\n { id: 24, name: \"\u0639\u0627\u062f\u0644 \u0645\u062c\u064a\u062f \u062d\u0645\u0632\u0629 \u0627\u0644\u062f\u0641\u0627\u0639\u064a\" },\n { id: 25, name: \"\u0627\u0632\u0647\u0627\u0631 \u0641\u0627\u0644\u062d \u0643\u0627\u0637\u0639 \u0634\u0646\u0627\u0648\u0647 \u0627\u0644\u062d\u0635\u0645\u0648\u062f\" },\n { id: 26, name: \"\u0627\u0641\u0631\u0627\u062d \u062c\u0628\u0627\u0631 \u062c\u0648\u0639\u0627\u0646 \u0628\u062c\u0627\u064a \u0627\u0644\u0628\u062c\u0627\u064a\" },\n { id: 27, name: \"\u0628\u0634\u0627\u0626\u0631 \u0646\u0639\u064a\u0645 \u0645\u0634\u0639\u0644 \u0639\u0643\u0631\u0648\u062f \u0627\u0644\u0632\u064a\u0627\u062f\u064a\" },\n { id: 28, name: \"\u0631\u0633\u0644 \u062a\u0631\u0643\u064a \u062c\u0644\u0627\u0628 \u062c\u0628\u064a\u0631 \u0627\u0644\u0639\u0628\u0648\u062f\u064a\" },\n { id: 29, name: \"\u0631\u0633\u0644 \u0643\u0631\u064a\u0645 \u0639\u0628\u064a\u062f \u062d\u0633\u064a\u0646 \u0627\u0644\u0627\u0639\u0627\u062c\u064a\u0628\u064a\" },\n { id: 30, name: \"\u062f\u0644\u0627\u0644 \u0645\u0647\u062f\u064a \u0639\u0648\u0627\u062f \u062d\u0631\u062c\u0627\u0646 \u0627\u0644\u0632\u0631\u064a\u062c\u0627\u0648\u064a\" },\n { id: 31, name: \"\u0631\u0641\u0644 \u0633\u0627\u0645\u064a \u0645\u0643\u0637\u0648\u0641 \u0646\u0627\u0647\u064a \u0627\u0644\u063a\u0632\u064a\" },\n { id: 32, name: \"\u0631\u0648\u0627\u0621 \u0639\u0628\u062f\u0627\u0644\u0631\u0636\u0627 \u062e\u0644\u064a\u0648\u064a \u0639\u0644\u064a \u0627\u0644\u0628\u0631\u0643\u0627\u062a\" },\n { id: 33, name: \"\u0632\u0645\u0646 \u0639\u0628\u0627\u0633 \u0641\u0631\u062c \u0639\u0637\u064a\u0647 \u0627\u0644\u0638\u0648\u0627\u0644\u0645\" },\n { id: 34, name: \"\u0632\u0647\u0631\u0627\u0621 \u062d\u064a\u062f\u0631 \u0639\u0628\u062f\u0627\u0644\u0633\u062c\u0627\u062f \u0643\u0635\u0627\u062f \u0627\u0644\u0632\u0631\u064a\u062c\u0627\u0648\u064a\" },\n { id: 35, name: \"\u0632\u064a\u0646\u0628 \u0643\u0631\u064a\u0645 \u0639\u0648\u0627\u062f \u0645\u062d\u0645\u062f \u062d\u0633\u0646 \u062c\u0628\u0627\u0631 \u0627\u0644\u062c\u0628\u0627\u0631\" },\n { id: 36, name: \"\u0633\u062c\u0649 \u0639\u0628\u062f\u0627\u0644\u0643\u0631\u064a\u0645 \u062c\u0628\u0627\u0631 \u0632\u0627\u062c\u064a \u0627\u0644\u0646\u0627\u0635\u0631\u064a\" },\n { id: 37, name: \"\u0634\u0627\u0646\u0627\u0633 \u0635\u0628\u062d\u064a \u0643\u0627\u0638\u0645 \u0639\u0648\u0627\u062f \u0627\u0644\u062d\u062f\u0627\u062f\" },\n { id: 38, name: \"\u0635\u0627\u062f\u0642 \u0645\u062f\u0644\u0648\u0644 \u062f\u0648\u0647\u0627\u0646 \u0647\u0648\u064a\u062f\u064a \u0627\u0644 \u062d\u0648\u064a\u0634\" },\n { id: 39, name: \"\u0639\u0644\u0627\u0621 \u062e\u064a\u0631\u064a \u0639\u0628\u062f \u0634\u0645\u062e\u064a \u0627\u0644\u0639\u0633\u0643\u0631\u064a\" },\n { id: 40, name: \"\u0643\u0631\u0627\u0631 \u0644\u064a\u062b \u062d\u0645\u0648\u062f\u064a \u062c\u0627\u0633\u0645 \u0627\u0644\u062d\u0644\u0627\u0648\u064a\" },\n { id: 41, name: \"\u0645\u062d\u0645\u062f \u062c\u0627\u0628\u0631 \u0639\u0627\u062c\u0644 \u0631\u0648\u064a\u0639\u064a \u062c\u062a\u0627\u0646 \u0627\u0644\u0628\u0631\u0643\u064a\" },\n { id: 42, name: \"\u0645\u0633\u0644\u0645 \u0645\u062d\u0645\u062f \u062d\u0633\u064a\u0646 \u0645\u062d\u0645\u062f \u0627\u0644 \u0633\u0645\u0627\u0648\u064a\" },\n { id: 43, name: \"\u0645\u0635\u0637\u0641\u0649 \u0641\u0644\u064a\u062d \u0631\u062d\u064a\u0645 \u0644\u0627\u0647\u064a \u0627\u0644 \u0631\u0633\u0646\" },\n { id: 44, name: \"\u062f\u0639\u0627\u0621 \u0643\u0627\u0645\u0644 \u0639\u0628\u062f \u0627\u0644\u0646\u0627\u0635\u0631\u0639\u0628\u0627\u062f\u064a \u0627\u0644\u062c\u064a\u0627\u0634\u064a\" },\n { id: 45, name: \"\u0647\u064a\u0641\u0627\u0621 \u062d\u0627\u0643\u0645 \u0647\u0627\u062f\u064a \u0639\u0644\u064a \u0627\u0644\u062f\u0641\u0627\u0639\u064a\" },\n { id: 46, name: \"\u0628\u062a\u0648\u0644 \u0631\u062d\u064a\u0645 \u0635\u0639\u0635\u0639 \u0646\u0627\u0637\u0648\u0631 \u0627\u0644\u0645\u0637\u0648\u0643\u064a\" },\n { id: 47, name: \"\u0632\u0647\u0631\u0627\u0621 \u0639\u0628\u062f\u0627\u0644\u0631\u0636\u0627 \u0627\u0633\u0645\u0627\u0639\u064a\u0644 \u0633\u0639\u064a\u062f\" },\n { id: 48, name: \"\u0632\u064a\u0646\u0628 \u0639\u0644\u064a \u0631\u0627\u0636\u064a \u0639\u0628\u062f\u0627\u0644\u062d\u0633\u064a\u0646\" },\n { id: 49, name: \"\u062d\u0645\u0632\u0647 \u0639\u0628\u0648\u062f \u0639\u0628\u062f\u0627\u0644\u062d\u0633\u064a\u0646 \u0639\u0648\u062f\u0647 \u0627\u0644\u0631\u0643\u0627\u0628\u064a\" }\n];\n\n\/\/ helper: attach 3d tilt effect to any .staff-card (and also any future elements)\nfunction applyTiltToCards() {\n const cards = document.querySelectorAll('.staff-card');\n cards.forEach(card => {\n \/\/ remove any existing listener to avoid duplication but we can just set new.\n \/\/ but we'll use a fresh approach by replacing with new listeners? \n \/\/ We'll simply re-attach after cleaning old listeners by cloning? not needed, the event listeners can be added multiple times but we skip by checking a data attribute.\n if (card.hasAttribute('data-tilt-initialized')) return;\n card.setAttribute('data-tilt-initialized', 'true');\n \n const handleMouseMove = (e) => {\n const rect = card.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n const cx = rect.width \/ 2;\n const cy = rect.height \/ 2;\n const rX = ((y - cy) \/ cy) * 3;\n const rY = ((x - cx) \/ cx) * -3;\n card.style.transition = 'transform 0.08s ease, box-shadow 0.1s ease';\n card.style.transform = `perspective(800px) rotateX(${rX}deg) rotateY(${rY}deg) scale(1.01) translateY(-2px)`;\n card.style.boxShadow = '0 18px 30px -12px rgba(26,77,140,0.25)';\n card.style.borderColor = 'rgba(255,179,71,0.5)';\n };\n const handleMouseLeave = () => {\n card.style.transition = 'transform 0.3s cubic-bezier(0.2,0.9,0.4,1), box-shadow 0.3s ease';\n card.style.transform = '';\n card.style.boxShadow = '';\n card.style.borderColor = '';\n };\n card.addEventListener('mousemove', handleMouseMove);\n card.addEventListener('mouseleave', handleMouseLeave);\n });\n}\n\n\/\/ render staff grid\nfunction renderStaffCards(filterText = '') {\n const container = document.getElementById('staffGridContainer');\n if (!container) return;\n const lowerFilter = filterText.trim().toLowerCase();\n let visibleCount = 0;\n \n \/\/ build html\n let html = '';\n for (let staff of staffData) {\n const nameMatch = staff.name.toLowerCase().includes(lowerFilter);\n const idMatch = staff.id.toString().includes(lowerFilter);\n const isVisible = (lowerFilter === '' || nameMatch || idMatch);\n if (isVisible) visibleCount++;\n const hiddenClass = isVisible ? '' : 'hidden-card';\n \n html += `\n <div class=\"staff-card ${hiddenClass}\" data-staff-id=\"${staff.id}\" data-staff-name=\"${staff.name.replace(\/\"\/g, '"')}\">\n <div class=\"staff-number\">${staff.id}<\/div>\n <div class=\"staff-info\">\n <div class=\"staff-name\">${escapeHtml(staff.name)}<\/div>\n <div class=\"staff-role\"><i class=\"fas fa-id-badge\"><\/i> \u0645\u0648\u0638\u0641 \u0625\u062f\u0627\u0631\u064a<\/div>\n <\/div>\n <\/div>\n `;\n }\n container.innerHTML = html;\n \/\/ update visible counter\n const visibleSpan = document.getElementById('visibleCount');\n if (visibleSpan) visibleSpan.innerText = visibleCount;\n \/\/ re-apply tilt for newly generated cards\n applyTiltToCards();\n \n \/\/ if no visible and filter not empty show empty message?\n if (visibleCount === 0 && filterText !== '') {\n const emptyMsg = document.createElement('div');\n emptyMsg.className = 'empty-state';\n emptyMsg.innerHTML = '<i class=\"fas fa-user-slash\" style=\"font-size: 2rem; opacity:0.6;\"><\/i><p style=\"margin-top:10px;\">\u0644\u0627 \u064a\u0648\u062c\u062f \u0645\u0648\u0638\u0641\u0648\u0646 \u064a\u062a\u0637\u0627\u0628\u0642\u0648\u0646 \u0645\u0639 \u0627\u0644\u0628\u062d\u062b<\/p>';\n \/\/ but we dont want to duplicate; if container children includes empty we handle\n if (!container.querySelector('.empty-state')) {\n const existMsg = container.querySelector('.empty-state');\n if (existMsg) existMsg.remove();\n container.appendChild(emptyMsg);\n } else {\n const oldEmpty = container.querySelector('.empty-state');\n if (oldEmpty && visibleCount === 0) {\n \/\/ keep it\n } else if(oldEmpty) oldEmpty.remove();\n }\n } else {\n const oldEmpty = container.querySelector('.empty-state');\n if (oldEmpty) oldEmpty.remove();\n }\n}\n\n\/\/ simple escape for safety\nfunction escapeHtml(str) {\n return str.replace(\/[&<>]\/g, function(m) {\n if (m === '&') return '&';\n if (m === '<') return '<';\n if (m === '>') return '>';\n return m;\n }).replace(\/[\\uD800-\\uDBFF][\\uDC00-\\uDFFF]\/g, function(c) {\n return c;\n });\n}\n\n\/\/ live search handler\nfunction initSearch() {\n const searchInput = document.getElementById('staffSearchInput');\n if (searchInput) {\n searchInput.addEventListener('input', (e) => {\n renderStaffCards(e.target.value);\n });\n }\n}\n\n\/\/ floating particles (template preserved) \u2728\n(function() {\n const colors = ['#8faac8','#a2b9d6','#bfcfdf'];\n for(let i = 0; i < 22; i++){\n const el = document.createElement('div');\n el.className = 'particle';\n const s = Math.random() * 4 + 2;\n el.style.cssText = `width:${s}px;height:${s}px;background:${colors[i%3]};left:${Math.random()*100}vw;animation-duration:${Math.random()*12+8}s;animation-delay:${Math.random()*10}s;`;\n document.body.appendChild(el);\n }\n})();\n\n\/\/ Also preserve tilt for any static .data-card? none but keep generic\ndocument.addEventListener('DOMContentLoaded', () => {\n renderStaffCards('');\n initSearch();\n \/\/ If there are any extra tilt elements (not needed but for consistency)\n applyTiltToCards();\n});\n\/\/ additionally if any .mission-vision needs subtle hover effect? optional\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u0625\u062f\u0627\u0631\u064a | \u0627\u0644\u0645\u0639\u0647\u062f \u0627\u0644\u062a\u0642\u0646\u064a \u0627\u0644\u0633\u0645\u0627\u0648\u0629 – \u062c\u0627\u0645\u0639\u0629 \u0627\u0644\u0641\u0631\u0627\u062a \u0627\u0644\u0623\u0648\u0633\u0637 \u0627\u0644\u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u0645\u0639\u0647\u062f \u0627\u0644\u062a\u0642\u0646\u064a \/ \u0627\u0644\u0633\u0645\u0627\u0648\u0629 \u0634\u0645\u0627\u0644 \u0645\u062f\u064a\u0646\u0629 \u0627\u0644\u0633\u0645\u0627\u0648\u0629 \u2013 \u0645\u062d\u0627\u0641\u0638\u0629 \u0627\u0644\u0645\u062b\u0646\u0649 | \u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u0625\u062f\u0627\u0631\u064a \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u064a\u0646 49 \u062a\u0623\u0633\u0633 1989 \u062c\u0627\u0645\u0639\u0629 \u0627\u0644\u0641\u0631\u0627\u062a \u0627\u0644\u0623\u0648\u0633\u0637 \u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u0625\u062f\u0627\u0631\u064a \u0644\u0644\u0645\u0639\u0647\u062f \u0627\u0644\u062a\u0642\u0646\u064a \u0628\u0627\u0644\u0633\u0645\u0627\u0648\u0629 49 \/ 49 \u062f\u0648\u0631 \u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u0625\u062f\u0627\u0631\u064a: \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0634\u0624\u0648\u0646 \u0627\u0644\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0648\u0627\u0644\u0645\u0627\u0644\u064a\u0629\u060c \u0645\u062a\u0627\u0628\u0639\u0629 \u0633\u064a\u0631 \u0627\u0644\u0639\u0645\u0644\u064a\u0629 \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629\u060c \u062f\u0639\u0645 \u0627\u0644\u0623\u0642\u0633\u0627\u0645 \u0627\u0644\u0639\u0644\u0645\u064a\u0629\u060c \u0648\u062a\u0642\u062f\u064a\u0645 … <a href=\"https:\/\/isa.atu.edu.iq\/?page_id=22405\">Continued<\/a><\/p>\n","protected":false},"author":99900,"featured_media":21637,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-22405","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/pages\/22405","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/users\/99900"}],"replies":[{"embeddable":true,"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=22405"}],"version-history":[{"count":1,"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/pages\/22405\/revisions"}],"predecessor-version":[{"id":22406,"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/pages\/22405\/revisions\/22406"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/media\/21637"}],"wp:attachment":[{"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}