Update texts and add clickable enlarged image lightbox

static/css/style.css

@@ -180,6 +180,42 @@ a:hover { text-decoration: underline; }
   transition: opacity 0.7s ease;
 }
 .slides img.active { opacity: 1; }
+.slides img.clickable { cursor: zoom-in; }
+
+/* ---------------- Lightbox ---------------- */
+.lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.25s ease, visibility 0.25s ease;
+}
+.lightbox.open { opacity: 1; visibility: visible; }
+.lightbox img {
+  max-width: 92vw;
+  max-height: 88vh;
+  border-radius: 10px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
+}
+.lightbox-close {
+  position: absolute;
+  top: 18px;
+  right: 24px;
+  background: none;
+  border: none;
+  color: #fff;
+  font-size: 2.2rem;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.85;
+}
+.lightbox-close:hover { opacity: 1; }
 
 .slider-btn {
   position: absolute;

static/js/app.js

@@ -80,10 +80,44 @@
     });
     slider.addEventListener("mouseleave", restart);
 
+    images.forEach(function (img) {
+      img.classList.add("clickable");
+      img.addEventListener("click", function (ev) {
+        ev.stopPropagation();
+        openLightbox(img.src);
+      });
+    });
+
     show();
     restart();
   });
 
+  // ---- Lightbox ----
+  var lightbox = document.getElementById("lightbox");
+  var lightboxImg = lightbox ? lightbox.querySelector("img") : null;
+  var lightboxClose = lightbox ? lightbox.querySelector(".lightbox-close") : null;
+
+  function openLightbox(src) {
+    if (!lightbox || !lightboxImg) return;
+    lightboxImg.src = src;
+    lightbox.classList.add("open");
+    lightbox.setAttribute("aria-hidden", "false");
+  }
+  function closeLightbox() {
+    if (!lightbox) return;
+    lightbox.classList.remove("open");
+    lightbox.setAttribute("aria-hidden", "true");
+    lightboxImg.src = "";
+  }
+  if (lightbox) {
+    lightbox.addEventListener("click", function (ev) {
+      if (ev.target === lightbox || ev.target === lightboxClose) closeLightbox();
+    });
+    document.addEventListener("keydown", function (ev) {
+      if (ev.key === "Escape") closeLightbox();
+    });
+  }
+
   // ---- Flash mesajları ----
   setTimeout(function () {
     document.querySelectorAll(".flash").forEach(function (el) {

templates/base.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="robots" content="noindex">
-  <title>{% block title %}Key Ajansı Portfolyosu{% endblock %}</title>
+  <title>{% block title %}Key Ajansı{% endblock %}</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
@@ -55,9 +55,14 @@
 </main>
 
 <footer class="footer">
-  <p>Key Ajansı Portfolyosu — an unofficial agency</p>
+  <p>Key Ajansı — an unofficial agency</p>
 </footer>
 
+<div class="lightbox" id="lightbox" aria-hidden="true">
+  <button class="lightbox-close" type="button" aria-label="Kapat">×</button>
+  <img src="" alt="">
+</div>
+
 <script src="{{ url_for('static', filename='js/app.js') }}"></script>
 {% block scripts %}{% endblock %}
 </body>

templates/index.html

@@ -2,7 +2,7 @@
 {% block content %}
 
 <section class="hero">
-  <h1 class="hero-title">Key Ajansı Portfolyosu</h1>
+  <h1 class="hero-title">Key Ajansı</h1>
   <p class="hero-sub">an unofficial agency</p>
 </section>
 
@@ -35,7 +35,7 @@
 </section>
 
 <section class="section">
-  <h2 class="section-title">Ajansdaki Çalışanlarımız:</h2>
+  <h2 class="section-title">Örnek İşlerimizin Birkaçı:</h2>
   <div class="emp-grid">
 
     <div class="emp-col">