{"id":22371,"date":"2026-04-27T19:54:30","date_gmt":"2026-04-27T16:54:30","guid":{"rendered":"https:\/\/isa.atu.edu.iq\/?page_id=22371"},"modified":"2026-04-27T19:54:38","modified_gmt":"2026-04-27T16:54:38","slug":"%d9%85%d8%b4%d8%a7%d8%b1%d9%8a%d8%b9-%d8%a7%d9%84%d8%aa%d8%ae%d8%b1%d8%ac-4","status":"publish","type":"page","link":"https:\/\/isa.atu.edu.iq\/?page_id=22371","title":{"rendered":"\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062a\u062e\u0631\u062c"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"ar\" dir=\"rtl\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, viewport-fit=cover\">\n  <title>\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062a\u062e\u0631\u062c | \u0627\u0644\u0645\u0639\u0647\u062f \u0627\u0644\u062a\u0642\u0646\u064a \u0627\u0644\u0633\u0645\u0627\u0648\u0629 &#8211; \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&#038;family=Cairo:wght@400;600;700;800&#038;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    * {\n      margin: 0;\n      padding: 0;\n      box-sizing: border-box;\n    }\n\n    :root {\n      --bg: #eef2f8;\n      --surface: rgba(255, 255, 255, 0.96);\n      --border: rgba(26, 77, 140, 0.12);\n      --accent: #1A4D8C;\n      --accent2: #2e7fc0;\n      --text: #1a2c3e;\n      --muted: #5a789b;\n      --gold: #f5b042;\n      --gold-light: #ffdd99;\n      --radius-card: 1.5rem;\n      --shadow-md: 0 12px 28px -8px rgba(0, 0, 0, 0.08);\n    }\n\n    body {\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.5;\n    }\n\n    \/* === 3D BACKGROUND + DYNAMIC === *\/\n    .bg-scene {\n      position: fixed;\n      inset: 0;\n      z-index: 0;\n      overflow: hidden;\n      pointer-events: none;\n    }\n\n    .bg-grid {\n      position: absolute;\n      inset: 0;\n      background-image: linear-gradient(rgba(26, 77, 140, 0.05) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(26, 77, 140, 0.05) 1px, transparent 1px);\n      background-size: 52px 52px;\n      animation: gridFloat 28s linear infinite;\n    }\n\n    @keyframes gridFloat {\n      0% {\n        transform: perspective(700px) rotateX(26deg) translateY(0px);\n      }\n      100% {\n        transform: perspective(700px) rotateX(26deg) translateY(52px);\n      }\n    }\n\n    .bg-orb {\n      position: absolute;\n      border-radius: 50%;\n      filter: blur(90px);\n      animation: orbMotion 12s ease-in-out infinite alternate;\n    }\n\n    .orb1 {\n      width: 550px;\n      height: 550px;\n      background: rgba(170, 200, 240, 0.35);\n      top: -180px;\n      right: -150px;\n    }\n\n    .orb2 {\n      width: 400px;\n      height: 400px;\n      background: rgba(135, 175, 215, 0.3);\n      bottom: 5%;\n      left: -100px;\n      animation-duration: 14s;\n    }\n\n    .orb3 {\n      width: 300px;\n      height: 300px;\n      background: rgba(245, 176, 66, 0.2);\n      top: 45%;\n      right: 20%;\n      animation-duration: 10s;\n    }\n\n    @keyframes orbMotion {\n      from {\n        transform: translate(0, 0) scale(1);\n      }\n      to {\n        transform: translate(20px, 25px) scale(1.08);\n      }\n    }\n\n    \/* 3D Logo watermarks (rotating) *\/\n    .logo-watermark {\n      position: absolute;\n      pointer-events: none;\n      z-index: 0;\n    }\n\n    .logo-center {\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n\n    .logo-top-left {\n      top: 3%;\n      left: 2%;\n    }\n\n    .logo-bottom-right {\n      bottom: 4%;\n      right: 2%;\n    }\n\n    .logo-3d-wrapper {\n      width: 380px;\n      height: 380px;\n      animation: rotateLogo 28s infinite linear;\n      transform-style: preserve-3d;\n      perspective: 900px;\n    }\n\n    .logo-3d-wrapper.logo-small {\n      width: 140px;\n      height: 140px;\n    }\n\n    .logo-3d-wrapper.logo-slower {\n      animation-duration: 40s;\n      animation-direction: reverse;\n    }\n\n    @keyframes rotateLogo {\n      0% {\n        transform: rotateY(0deg) rotateX(6deg);\n      }\n      25% {\n        transform: rotateY(90deg) rotateX(12deg) rotateZ(2deg);\n      }\n      50% {\n        transform: rotateY(180deg) rotateX(6deg);\n      }\n      75% {\n        transform: rotateY(270deg) rotateX(12deg) rotateZ(-2deg);\n      }\n      100% {\n        transform: rotateY(360deg) rotateX(6deg);\n      }\n    }\n\n    .logo-3d-img {\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n      opacity: 0.045;\n      mix-blend-mode: screen;\n      filter: brightness(0.9) saturate(0.75);\n      border-radius: 50%;\n      animation: pulsate 5s infinite alternate;\n    }\n\n    @keyframes pulsate {\n      0% {\n        opacity: 0.03;\n      }\n      100% {\n        opacity: 0.1;\n      }\n    }\n\n    \/* floating particles *\/\n    .particle {\n      position: fixed;\n      border-radius: 50%;\n      pointer-events: none;\n      z-index: 0;\n      animation: floatUp linear infinite;\n      opacity: 0;\n    }\n\n    @keyframes floatUp {\n      0% {\n        transform: translateY(100vh) rotate(0deg);\n        opacity: 0;\n      }\n      12% {\n        opacity: 0.5;\n      }\n      85% {\n        opacity: 0.5;\n      }\n      100% {\n        transform: translateY(-80px) rotate(360deg);\n        opacity: 0;\n      }\n    }\n\n    \/* main content *\/\n    .page-wrap {\n      position: relative;\n      z-index: 3;\n      max-width: 1350px;\n      margin: 0 auto;\n      padding: 2rem 1.5rem 4rem;\n    }\n\n    \/* control bar (modern header) *\/\n    .gradient-bar {\n      background: var(--surface);\n      backdrop-filter: blur(4px);\n      border: 1px solid var(--border);\n      border-radius: 1.8rem;\n      padding: 1.2rem 1.8rem;\n      margin-bottom: 2.2rem;\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      justify-content: space-between;\n      gap: 1rem;\n      box-shadow: var(--shadow-md);\n    }\n\n    .bar-brand {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n    }\n\n    .icon-badge {\n      width: 52px;\n      height: 52px;\n      background: linear-gradient(145deg, #1A4D8C, #2260a8);\n      border-radius: 1.2rem;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 1.6rem;\n      color: white;\n      box-shadow: 0 8px 14px rgba(26, 77, 140, 0.25);\n    }\n\n    .title-text h2 {\n      font-weight: 800;\n      font-size: 1.3rem;\n      color: var(--accent);\n      line-height: 1.2;\n    }\n\n    .title-text p {\n      font-size: 0.8rem;\n      color: var(--muted);\n      font-weight: 500;\n      margin-top: 4px;\n    }\n\n    .year-badge-group {\n      display: flex;\n      gap: 12px;\n      flex-wrap: wrap;\n    }\n\n    .pill-info {\n      background: rgba(230, 243, 255, 0.9);\n      border: 1px solid #c7ddf5;\n      border-radius: 80px;\n      padding: 0.45rem 1.1rem;\n      font-size: 0.8rem;\n      font-weight: 700;\n      color: var(--accent);\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .pill-accent {\n      background: rgba(245, 176, 66, 0.15);\n      border-color: rgba(245, 176, 66, 0.4);\n      color: #bc6f0c;\n    }\n\n    \/* section styling *\/\n    .section-header {\n      display: flex;\n      align-items: baseline;\n      justify-content: space-between;\n      flex-wrap: wrap;\n      margin: 2.5rem 0 1.5rem;\n    }\n\n    .section-title {\n      font-size: 1.8rem;\n      font-weight: 800;\n      color: #0a2b44;\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .section-title i {\n      color: var(--gold);\n      font-size: 1.8rem;\n    }\n\n    .title-ornament {\n      height: 4px;\n      width: 70px;\n      background: linear-gradient(90deg, var(--gold), #ffcd81);\n      border-radius: 4px;\n      margin-top: 6px;\n    }\n\n    \/* project cards grid *\/\n    .projects-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n      gap: 2rem;\n      margin-top: 1rem;\n    }\n\n    .project-card {\n      background: var(--surface);\n      backdrop-filter: blur(2px);\n      border: 1px solid var(--border);\n      border-radius: 1.8rem;\n      transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1);\n      box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.08);\n      overflow: hidden;\n      position: relative;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .project-card:hover {\n      transform: translateY(-8px) scale(1.01);\n      box-shadow: 0 28px 32px -16px rgba(26, 77, 140, 0.2);\n      border-color: rgba(245, 176, 66, 0.5);\n    }\n\n    .card-accent-bg {\n      background: linear-gradient(135deg, rgba(26, 77, 140, 0.04), rgba(46, 127, 192, 0.02));\n      padding: 1.4rem 1.3rem 1rem 1.3rem;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n    }\n\n    .year-icon {\n      font-size: 2.2rem;\n      background: linear-gradient(145deg, #f8e3c2, #fff2e0);\n      width: 60px;\n      height: 60px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 30px;\n      margin-bottom: 1rem;\n    }\n\n    .year-icon i {\n      font-size: 2rem;\n      color: #e68a2e;\n    }\n\n    .project-year {\n      font-size: 1.55rem;\n      font-weight: 800;\n      color: var(--accent);\n      letter-spacing: -0.5px;\n      margin: 0.5rem 0 0.25rem;\n    }\n\n    .project-semester {\n      font-size: 0.85rem;\n      font-weight: 600;\n      color: var(--gold);\n      background: rgba(245, 176, 66, 0.2);\n      display: inline-block;\n      padding: 0.2rem 0.9rem;\n      border-radius: 50px;\n    }\n\n    .card-body {\n      padding: 1.3rem 1.3rem 1.6rem;\n      flex: 1;\n    }\n\n    .project-desc {\n      color: var(--muted);\n      font-size: 0.95rem;\n      font-weight: 500;\n      margin: 0.5rem 0 1.4rem;\n      line-height: 1.5;\n    }\n\n    .btn-project {\n      display: inline-flex;\n      align-items: center;\n      gap: 10px;\n      background: #eef4fc;\n      border-radius: 50px;\n      padding: 0.6rem 1.3rem;\n      font-weight: 700;\n      font-size: 0.85rem;\n      color: var(--accent);\n      text-decoration: none;\n      transition: all 0.25s;\n      border: 1px solid rgba(46, 127, 192, 0.2);\n    }\n\n    .btn-project i {\n      font-size: 0.9rem;\n      transition: transform 0.2s;\n    }\n\n    .btn-project:hover {\n      background: var(--accent);\n      color: white;\n      border-color: transparent;\n      transform: scale(0.98);\n    }\n\n    .btn-project:hover i {\n      transform: translateX(-4px);\n    }\n\n    \/* info highlight row (extra stats) *\/\n    .info-leader {\n      background: rgba(255, 255, 255, 0.75);\n      backdrop-filter: blur(12px);\n      border-radius: 2rem;\n      margin: 2rem 0 1rem;\n      padding: 1.5rem;\n      border: 1px solid var(--border);\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: space-between;\n      gap: 1.5rem;\n    }\n\n    .stat-highlight {\n      display: flex;\n      gap: 1rem;\n      align-items: center;\n    }\n\n    .stat-highlight i {\n      font-size: 2rem;\n      color: var(--gold);\n    }\n\n    .stat-highlight div strong {\n      font-size: 1.5rem;\n      color: var(--accent);\n    }\n\n    .footer-note {\n      margin-top: 4rem;\n      text-align: center;\n      background: var(--surface);\n      border: 1px solid var(--border);\n      border-radius: 60px;\n      padding: 1rem 2rem;\n      width: fit-content;\n      margin-left: auto;\n      margin-right: auto;\n      font-size: 0.85rem;\n      font-weight: 600;\n      color: var(--muted);\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);\n    }\n\n    @media (max-width: 700px) {\n      .page-wrap {\n        padding: 1rem;\n      }\n      .gradient-bar {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      .section-title {\n        font-size: 1.5rem;\n      }\n      .projects-grid {\n        gap: 1.3rem;\n      }\n    }\n\n    \/* override particle animation *\/\n    .btn-project {\n      cursor: pointer;\n    }\n  <\/style>\n<\/head>\n<body>\n\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\n  <!-- 3D Logos (rotating, interactive & watermarks) -->\n  <div class=\"logo-watermark logo-center\">\n    <div class=\"logo-3d-wrapper\">\n      <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=\"\u0634\u0639\u0627\u0631 \u0627\u0644\u0645\u0639\u0647\u062f\">\n    <\/div>\n  <\/div>\n  <div class=\"logo-watermark logo-top-left\">\n    <div class=\"logo-3d-wrapper logo-small\">\n      <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=\"\">\n    <\/div>\n  <\/div>\n  <div class=\"logo-watermark logo-bottom-right\">\n    <div class=\"logo-3d-wrapper logo-small logo-slower\">\n      <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=\"\">\n    <\/div>\n  <\/div>\n<\/div>\n\n<div class=\"page-wrap\">\n  <!-- top bar with institute info -->\n  <div class=\"gradient-bar\">\n    <div class=\"bar-brand\">\n      <div class=\"icon-badge\"><i class=\"fas fa-graduation-cap\"><\/i><\/div>\n      <div class=\"title-text\">\n        <h2>\u0627\u0644\u0645\u0639\u0647\u062f \u0627\u0644\u062a\u0642\u0646\u064a \/ \u0627\u0644\u0633\u0645\u0627\u0648\u0629<\/h2>\n        <p><i class=\"fas fa-map-pin\" style=\"color: var(--gold);\"><\/i> \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 \u0645\u062d\u0627\u0641\u0638\u0629 \u0627\u0644\u0645\u062b\u0646\u0649 | \u062a\u0623\u0633\u0633 1989<\/p>\n      <\/div>\n    <\/div>\n    <div class=\"year-badge-group\">\n      <div class=\"pill-info\"><i class=\"fas fa-file-alt\"><\/i> 6 \u0645\u0634\u0627\u0631\u064a\u0639 \u062a\u062e\u0631\u062c<\/div>\n      <div class=\"pill-info pill-accent\"><i class=\"fas fa-microscope\"><\/i> \u0623\u0642\u0633\u0627\u0645 \u0639\u0644\u0645\u064a\u0629 25+<\/div>\n      <div class=\"pill-info\"><i class=\"fas fa-chart-line\"><\/i> \u062a\u0645\u064a\u0632 \u062a\u0642\u0646\u064a<\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Main heading: Graduation projects archive -->\n  <div class=\"section-header\">\n    <div class=\"section-title\">\n      <i class=\"fas fa-laptop-code\"><\/i> \n      <span>\u0623\u0631\u0634\u064a\u0641 \u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062a\u062e\u0631\u062c<\/span>\n      <div class=\"title-ornament\"><\/div>\n    <\/div>\n    <div style=\"color: var(--muted); font-weight: 500;\"><i class=\"fas fa-calendar-alt\"><\/i> 2022 \u2013 2026<\/div>\n  <\/div>\n\n  <!-- Cards grid based on given academic years & links -->\n  <div class=\"projects-grid\">\n    <!-- 2021-2022 -->\n    <div class=\"project-card\" data-tilt>\n      <div class=\"card-accent-bg\">\n        <div class=\"year-icon\"><i class=\"fas fa-flask\"><\/i><\/div>\n        <div class=\"project-year\">2022<\/div>\n        <span class=\"project-semester\"><i class=\"far fa-calendar-check\"><\/i> \u0627\u0644\u0639\u0627\u0645 \u0627\u0644\u062f\u0631\u0627\u0633\u064a 2022-2021<\/span>\n      <\/div>\n      <div class=\"card-body\">\n        <div class=\"project-desc\">\n          \u0625\u0646\u062c\u0627\u0632\u0627\u062a \u0637\u0644\u0628\u0629 \u0627\u0644\u0645\u0639\u0647\u062f \u0627\u0644\u062a\u0642\u0646\u064a \/ \u0627\u0644\u0633\u0645\u0627\u0648\u0629 \u2013 \u0645\u0634\u0627\u0631\u064a\u0639 \u062a\u062e\u0631\u062c \u0645\u062a\u0645\u064a\u0632\u0629 \u0641\u064a \u0627\u0644\u062a\u062e\u0635\u0635\u0627\u062a \u0627\u0644\u0637\u0628\u064a\u0629 \u0648\u0627\u0644\u0647\u0646\u062f\u0633\u064a\u0629 \u0648\u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629.\n        <\/div>\n        <a href=\"https:\/\/isa.atu.edu.iq\/?page_id=7357\" class=\"btn-project\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <i class=\"fas fa-external-link-alt\"><\/i> \u0627\u0633\u062a\u0639\u0631\u0636 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- 2022-2023 -->\n    <div class=\"project-card\" data-tilt>\n      <div class=\"card-accent-bg\">\n        <div class=\"year-icon\"><i class=\"fas fa-cogs\"><\/i><\/div>\n        <div class=\"project-year\">2023<\/div>\n        <span class=\"project-semester\"><i class=\"far fa-calendar-check\"><\/i> \u0627\u0644\u0639\u0627\u0645 \u0627\u0644\u062f\u0631\u0627\u0633\u064a 2022-2023<\/span>\n      <\/div>\n      <div class=\"card-body\">\n        <div class=\"project-desc\">\n          \u0645\u0634\u0627\u0631\u064a\u0639 \u0631\u064a\u0627\u062f\u064a\u0629 \u062a\u0634\u0645\u0644 \u0623\u0646\u0638\u0645\u0629 \u0630\u0643\u0627\u0621 \u0627\u0635\u0637\u0646\u0627\u0639\u064a\u060c \u062a\u0637\u0648\u064a\u0631 \u0628\u0646\u0649 \u062a\u062d\u062a\u064a\u0629\u060c \u0648\u0623\u0628\u062d\u0627\u062b \u062a\u0637\u0628\u064a\u0642\u064a\u0629 \u062a\u062e\u062f\u0645 \u0627\u0644\u0645\u062c\u062a\u0645\u0639 \u0627\u0644\u0645\u062d\u0644\u064a.\n        <\/div>\n        <a href=\"https:\/\/isa.atu.edu.iq\/?page_id=10579\" class=\"btn-project\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <i class=\"fas fa-external-link-alt\"><\/i> \u0627\u0633\u062a\u0639\u0631\u0636 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- 2023-2024 -->\n    <div class=\"project-card\" data-tilt>\n      <div class=\"card-accent-bg\">\n        <div class=\"year-icon\"><i class=\"fas fa-microchip\"><\/i><\/div>\n        <div class=\"project-year\">2024<\/div>\n        <span class=\"project-semester\"><i class=\"far fa-calendar-check\"><\/i> \u0627\u0644\u0639\u0627\u0645 \u0627\u0644\u062f\u0631\u0627\u0633\u064a 2023-2024<\/span>\n      <\/div>\n      <div class=\"card-body\">\n        <div class=\"project-desc\">\n          \u0627\u0628\u062a\u0643\u0627\u0631\u0627\u062a \u062a\u0642\u0646\u064a\u0629 \u0645\u062a\u0642\u062f\u0645\u0629\u060c \u0645\u0634\u0627\u0631\u064a\u0639 \u0641\u064a \u0627\u0644\u0623\u0645\u0646 \u0627\u0644\u0633\u064a\u0628\u0631\u0627\u0646\u064a\u060c \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u062a\u062c\u062f\u062f\u0629\u060c \u0648\u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0628\u0631\u0627\u062a \u0627\u0644\u062d\u062f\u064a\u062b\u0629.\n        <\/div>\n        <a href=\"https:\/\/isa.atu.edu.iq\/?page_id=12385\" class=\"btn-project\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <i class=\"fas fa-external-link-alt\"><\/i> \u0627\u0633\u062a\u0639\u0631\u0636 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- 2024-2025 -->\n    <div class=\"project-card\" data-tilt>\n      <div class=\"card-accent-bg\">\n        <div class=\"year-icon\"><i class=\"fas fa-rocket\"><\/i><\/div>\n        <div class=\"project-year\">2025<\/div>\n        <span class=\"project-semester\"><i class=\"far fa-calendar-check\"><\/i> \u0627\u0644\u0639\u0627\u0645 \u0627\u0644\u062f\u0631\u0627\u0633\u064a 2024-2025<\/span>\n      <\/div>\n      <div class=\"card-body\">\n        <div class=\"project-desc\">\n          \u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062a\u062e\u0631\u062c \u0628\u0631\u0624\u064a\u0629 \u0627\u0633\u062a\u0634\u0631\u0627\u0641\u064a\u0629 \u0644\u0633\u0648\u0642 \u0627\u0644\u0639\u0645\u0644\u060c \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0631\u0642\u0645\u064a\u0629\u060c \u0627\u0633\u062a\u0634\u0627\u0631\u0627\u062a \u0647\u0646\u062f\u0633\u064a\u0629 \u0648\u062f\u0639\u0645 \u0644\u0644\u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0646\u0641\u0637\u064a\u0629.\n        <\/div>\n        <a href=\"https:\/\/isa.atu.edu.iq\/?page_id=19992\" class=\"btn-project\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <i class=\"fas fa-external-link-alt\"><\/i> \u0627\u0633\u062a\u0639\u0631\u0636 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- 2025-2026 -->\n    <div class=\"project-card\" data-tilt>\n      <div class=\"card-accent-bg\">\n        <div class=\"year-icon\"><i class=\"fas fa-chart-simple\"><\/i><\/div>\n        <div class=\"project-year\">2026<\/div>\n        <span class=\"project-semester\"><i class=\"far fa-calendar-check\"><\/i> \u0627\u0644\u0639\u0627\u0645 \u0627\u0644\u062f\u0631\u0627\u0633\u064a 2025-2026<\/span>\n      <\/div>\n      <div class=\"card-body\">\n        <div class=\"project-desc\">\n          \u0623\u062d\u062f\u062b \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062a\u0637\u0628\u064a\u0642\u064a\u0629: \u062a\u062d\u0648\u0644 \u0631\u0642\u0645\u064a\u060c \u0623\u062a\u0645\u062a\u0629 \u0627\u0644\u0639\u0645\u0644\u064a\u0627\u062a \u0627\u0644\u0635\u0646\u0627\u0639\u064a\u0629\u060c \u0648\u0643\u0641\u0627\u0621\u0627\u062a \u062a\u0642\u0646\u064a\u0629 \u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u062c\u0648\u062f\u0629.\n        <\/div>\n        <a href=\"https:\/\/isa.atu.edu.iq\/?page_id=21609\" class=\"btn-project\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <i class=\"fas fa-external-link-alt\"><\/i> \u0627\u0633\u062a\u0639\u0631\u0636 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- additional interactive block: combined message about innovation -->\n  <div class=\"info-leader\" data-tilt>\n    <div class=\"stat-highlight\">\n      <i class=\"fas fa-user-graduate\"><\/i>\n      <div><strong>+2500<\/strong><br>\u062e\u0631\u064a\u062c \u0645\u062a\u0645\u064a\u0632<\/div>\n    <\/div>\n    <div class=\"stat-highlight\">\n      <i class=\"fas fa-trophy\"><\/i>\n      <div><strong>\u062c\u0648\u0627\u0626\u0632 \u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631<\/strong><br>\u0645\u0634\u0627\u0631\u064a\u0639 \u062a\u062e\u0631\u062c \u0641\u0627\u0626\u0632\u0629 \u0628\u0627\u0644\u0645\u0631\u0627\u0643\u0632 \u0627\u0644\u0623\u0648\u0644\u0649<\/div>\n    <\/div>\n    <div class=\"stat-highlight\">\n      <i class=\"fas fa-handshake\"><\/i>\n      <div><strong>\u0634\u0631\u0627\u0643\u0627\u062a \u0642\u0637\u0627\u0639\u064a\u0629<\/strong><br>\u062f\u0639\u0645 \u0645\u0628\u0627\u0634\u0631 \u0645\u0646 \u0645\u0624\u0633\u0633\u0627\u062a \u0627\u0644\u0645\u062b\u0646\u0649<\/div>\n    <\/div>\n  <\/div>\n\n  <!-- mission statement integrated (context) -->\n  <div class=\"section-header\" style=\"margin-top: 2rem;\">\n    <div class=\"section-title\">\n      <i class=\"fas fa-bullhorn\"><\/i>\n      <span>\u062f\u0639\u0645 \u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631 \u0648\u0631\u064a\u0627\u062f\u0629 \u0627\u0644\u0623\u0639\u0645\u0627\u0644<\/span>\n    <\/div>\n  <\/div>\n  <div class=\"projects-grid\" style=\"margin-bottom: 1.8rem;\">\n    <div class=\"project-card\" data-tilt style=\"background: var(--surface);\">\n      <div class=\"card-body\" style=\"text-align: center;\">\n        <i class=\"fas fa-lightbulb\" style=\"font-size: 2.4rem; color: var(--gold); margin-bottom: 0.5rem; display: inline-block;\"><\/i>\n        <h3 style=\"color: var(--accent); margin: 0.5rem 0;\">\u0631\u0624\u064a\u0629 \u0627\u0644\u0645\u0639\u0647\u062f \u0644\u062f\u0639\u0645 \u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062a\u062e\u0631\u062c<\/h3>\n        <p style=\"color: var(--muted); font-size: 0.95rem;\">\u0646\u0633\u0639\u0649 \u0644\u0631\u0628\u0637 \u0627\u0644\u0637\u0644\u0628\u0629 \u0628\u0645\u062a\u0637\u0644\u0628\u0627\u062a \u0633\u0648\u0642 \u0627\u0644\u0639\u0645\u0644\u060c \u0648\u062a\u0642\u062f\u064a\u0645 \u0645\u0634\u0627\u0631\u064a\u0639 \u062a\u062e\u0631\u062c \u062a\u062d\u0644 \u0645\u0634\u0643\u0644\u0627\u062a \u062d\u0642\u064a\u0642\u064a\u0629\u060c \u0648\u062a\u0639\u0632\u0632 \u0627\u0644\u062a\u0646\u0645\u064a\u0629 \u0627\u0644\u0645\u0633\u062a\u062f\u0627\u0645\u0629 \u0641\u064a \u0645\u062d\u0627\u0641\u0638\u0629 \u0627\u0644\u0645\u062b\u0646\u0649 \u0648\u0627\u0644\u0639\u0631\u0627\u0642.<\/p>\n      <\/div>\n    <\/div>\n    <div class=\"project-card\" data-tilt style=\"background: var(--surface);\">\n      <div class=\"card-body\" style=\"text-align: center;\">\n        <i class=\"fas fa-chalkboard-user\" style=\"font-size: 2.4rem; color: #e68a2e; margin-bottom: 0.5rem;\"><\/i>\n        <h3 style=\"color: var(--accent); margin: 0.5rem 0;\">\u0625\u0634\u0631\u0627\u0641 \u0623\u0643\u0627\u062f\u064a\u0645\u064a \u0648\u062a\u0642\u0646\u064a \u0645\u062a\u0642\u062f\u0645<\/h3>\n        <p style=\"color: var(--muted); font-size: 0.95rem;\">\u0623\u0643\u062b\u0631 \u0645\u0646 87 \u062a\u062f\u0631\u064a\u0633\u064a\u0627\u064b \u064a\u0634\u0631\u0641\u0648\u0646 \u0639\u0644\u0649 \u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062a\u062e\u0631\u062c \u0641\u064a \u0645\u062c\u0627\u0644\u0627\u062a \u0627\u0644\u0647\u0646\u062f\u0633\u0629\u060c \u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0627 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a\u060c \u0648\u0627\u0644\u0639\u0644\u0648\u0645 \u0627\u0644\u0637\u0628\u064a\u0629 \u0644\u0636\u0645\u0627\u0646 \u0627\u0644\u0631\u064a\u0627\u062f\u0629.<\/p>\n      <\/div>\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 | \u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062a\u062e\u0631\u062c: \u0625\u0628\u062f\u0627\u0639 \u0648\u0645\u0639\u0631\u0641\u0629 \u0648\u062a\u0646\u0645\u064a\u0629 \n  <\/div>\n<\/div>\n\n<script>\n  \/\/ floating particle generator (interactive atmosphere)\n  (function createParticles() {\n    const colorsList = ['#8faac8', '#b7cfef', '#f5b042b3', '#c9dbf2'];\n    for (let i = 0; i < 26; i++) {\n      const particle = document.createElement('div');\n      particle.className = 'particle';\n      const size = Math.random() * 5 + 2.5;\n      particle.style.width = size + 'px';\n      particle.style.height = size + 'px';\n      particle.style.backgroundColor = colorsList[i % colorsList.length];\n      particle.style.left = Math.random() * 100 + 'vw';\n      particle.style.animationDuration = Math.random() * 14 + 9 + 's';\n      particle.style.animationDelay = Math.random() * 12 + 's';\n      document.body.appendChild(particle);\n    }\n  })();\n\n  \/\/ 3D TILT effect interactive for cards (preserve design + smooth transform)\n  const tiltElements = document.querySelectorAll('[data-tilt]');\n  tiltElements.forEach(el => {\n    el.addEventListener('mousemove', (e) => {\n      const rect = el.getBoundingClientRect();\n      const x = e.clientX - rect.left;\n      const y = e.clientY - rect.top;\n      const centerX = rect.width \/ 2;\n      const centerY = rect.height \/ 2;\n      const rotateX = ((y - centerY) \/ centerY) * 3.5;\n      const rotateY = ((x - centerX) \/ centerX) * -3.2;\n      el.style.transition = 'transform 0.08s linear, box-shadow 0.1s ease';\n      el.style.transform = `perspective(1100px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-3px) scale(1.01)`;\n      el.style.boxShadow = `0 20px 28px -12px rgba(26,77,140,0.22)`;\n      el.style.borderColor = 'rgba(245,176,66,0.55)';\n    });\n    el.addEventListener('mouseleave', () => {\n      el.style.transition = 'transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1), box-shadow 0.4s, border-color 0.3s';\n      el.style.transform = '';\n      el.style.boxShadow = '';\n      el.style.borderColor = '';\n    });\n  });\n\n  \/\/ Additional interactive hover effect on project buttons (smooth)\n  const allBtns = document.querySelectorAll('.btn-project');\n  allBtns.forEach(btn => {\n    btn.addEventListener('mouseenter', () => {\n      btn.style.background = '#1A4D8C';\n      btn.style.color = 'white';\n    });\n    btn.addEventListener('mouseleave', () => {\n      btn.style.background = '#eef4fc';\n      btn.style.color = 'var(--accent)';\n    });\n  });\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062a\u062e\u0631\u062c | \u0627\u0644\u0645\u0639\u0647\u062f \u0627\u0644\u062a\u0642\u0646\u064a \u0627\u0644\u0633\u0645\u0627\u0648\u0629 &#8211; \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 \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 \u0645\u062d\u0627\u0641\u0638\u0629 \u0627\u0644\u0645\u062b\u0646\u0649 | \u062a\u0623\u0633\u0633 1989 6 \u0645\u0634\u0627\u0631\u064a\u0639 \u062a\u062e\u0631\u062c \u0623\u0642\u0633\u0627\u0645 \u0639\u0644\u0645\u064a\u0629 25+ \u062a\u0645\u064a\u0632 \u062a\u0642\u0646\u064a \u0623\u0631\u0634\u064a\u0641 \u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062a\u062e\u0631\u062c 2022 \u2013 2026 2022 \u0627\u0644\u0639\u0627\u0645 \u0627\u0644\u062f\u0631\u0627\u0633\u064a 2022-2021 \u0625\u0646\u062c\u0627\u0632\u0627\u062a \u0637\u0644\u0628\u0629 \u0627\u0644\u0645\u0639\u0647\u062f \u0627\u0644\u062a\u0642\u0646\u064a \/ \u0627\u0644\u0633\u0645\u0627\u0648\u0629 \u2013 \u0645\u0634\u0627\u0631\u064a\u0639 \u062a\u062e\u0631\u062c \u0645\u062a\u0645\u064a\u0632\u0629 \u0641\u064a \u0627\u0644\u062a\u062e\u0635\u0635\u0627\u062a &hellip; <a href=\"https:\/\/isa.atu.edu.iq\/?page_id=22371\">Continued<\/a><\/p>\n","protected":false},"author":99900,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-22371","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/pages\/22371","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=22371"}],"version-history":[{"count":1,"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/pages\/22371\/revisions"}],"predecessor-version":[{"id":22372,"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/pages\/22371\/revisions\/22372"}],"wp:attachment":[{"href":"https:\/\/isa.atu.edu.iq\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}