Replace thumbnails with overlay arrow nav; click image to pause auto-rotation

static/index.html

@@ -88,17 +88,17 @@
     text-transform: uppercase;
   }
 
-  /* Cift monitor sahnesi — flex, aralarinda rail'lere yetecek bosluk */
+  /* Cift monitor sahnesi — buyuk monitorler, yan yana */
   .stage {
     display: flex;
     justify-content: center;
     align-items: flex-start;
     flex-wrap: wrap;
-    gap: 160px;            /* sag monitorun rail'leri bu bosluga oturur */
+    gap: 40px;
   }
   .monitor {
     width: 100%;
-    max-width: 520px;
+    max-width: 720px;
     position: relative;
   }
 
@@ -155,50 +155,33 @@
     text-align: center;
     padding: 0 24px;
   }
-  /* Thumbnail ray'leri — sag monitorun YANINDA, monitor disinda absolute,
-     monitor genisligi degismez (sol monitorle ayni kalir) */
-  .monitor.with-rails { position: relative; }
-  .thumb-rail {
+  /* Galeri ok butonlari — monitor icinde, sag/sol kenar */
+  .nav-arrow {
     position: absolute;
-    top: 14px;
-    bottom: 14px;
-    width: 64px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background: rgba(0,0,0,0.55);
+    color: #fff;
+    border: none;
+    font-size: 22px;
+    line-height: 1;
     display: flex;
-    flex-direction: column;
-    gap: 8px;
-    pointer-events: auto;
-  }
-  .thumb-rail.left  { right: calc(100% + 10px); }
-  .thumb-rail.right { left: calc(100% + 10px); }
-  .thumb-rail button {
-    all: unset;
-    width: 100%;
-    aspect-ratio: 4 / 3;             /* yatay (landscape) thumbnail */
-    background: #ffffff center / cover no-repeat;
-    border: 2px solid rgba(0,0,0,0.08);
-    border-radius: 6px;
+    align-items: center;
+    justify-content: center;
     cursor: pointer;
+    z-index: 3;
     transition: all 0.15s;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
-  }
-  .thumb-rail button:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.12); }
-  .thumb-rail button.active { border-color: var(--trek-red); box-shadow: 0 0 0 1px var(--trek-red), 0 4px 10px rgba(0,0,0,0.12); }
-  @media (max-width: 1100px) {
-    .thumb-rail { width: 64px; }
-  }
-  @media (max-width: 900px) {
-    /* mobilde rays alt alta giriyor — saga ve sola degil, monitor altina */
-    .monitor.with-rails .thumb-rail {
-      position: static;
-      flex-direction: row;
-      width: auto;
-      height: 56px;
-      margin-top: 10px;
-      gap: 8px;
-      overflow-x: auto;
-    }
-    .monitor.with-rails .thumb-rail button { width: 70px; flex-shrink: 0; }
-  }
+    backdrop-filter: blur(4px);
+    opacity: 0;
+  }
+  .screen.right:hover .nav-arrow { opacity: 1; }
+  .nav-arrow:hover { background: rgba(0,0,0,0.75); transform: translateY(-50%) scale(1.06); }
+  .nav-arrow.prev { left: 14px; }
+  .nav-arrow.next { right: 14px; }
+  .screen.right .screen-inner img { cursor: pointer; }
   .screen.left.active {
     box-shadow:
       0 0 0 2px var(--trek-red),
@@ -363,16 +346,16 @@
       </div>
       <div class="stand"><div class="neck"></div><div class="base"></div></div>
     </div>
-    <div class="monitor with-rails">
-      <div class="thumb-rail left" id="thumbsLeft"></div>
+    <div class="monitor">
       <div class="screen right" id="rightScreen">
         <div class="screen-inner">
           <div class="empty" id="productEmpty">Henüz Ürün Yok</div>
           <img id="productImg" alt="" style="display:none;" />
+          <button class="nav-arrow prev" id="navPrev" aria-label="Önceki resim">‹</button>
+          <button class="nav-arrow next" id="navNext" aria-label="Sonraki resim">›</button>
         </div>
       </div>
       <div class="stand"><div class="neck"></div><div class="base"></div></div>
-      <div class="thumb-rail right" id="thumbsRight"></div>
     </div>
   </div>
 
@@ -525,29 +508,32 @@ async function connect() {
 let _galleryImages = [];
 let _galleryIdx = 0;
 let _galleryTimer = null;
+let _galleryPaused = false;
 
 function setMainImage(idx) {
   if (!_galleryImages.length) return;
   _galleryIdx = (idx + _galleryImages.length) % _galleryImages.length;
-  const img = $('productImg');
-  img.src = _galleryImages[_galleryIdx];
-  // Iki rail'deki thumb active sınıfını güncelle
-  document.querySelectorAll('.thumb-rail button').forEach(b => {
-    b.classList.toggle('active', parseInt(b.dataset.idx) === _galleryIdx);
-  });
+  $('productImg').src = _galleryImages[_galleryIdx];
 }
 
 function startGalleryRotation() {
-  if (_galleryTimer) clearInterval(_galleryTimer);
+  stopGalleryRotation();
   if (_galleryImages.length <= 1) return;
-  _galleryTimer = setInterval(() => setMainImage(_galleryIdx + 1), 4000);
+  _galleryPaused = false;
+  _galleryTimer = setInterval(() => {
+    if (!_galleryPaused) setMainImage(_galleryIdx + 1);
+  }, 4000);
+}
+
+function stopGalleryRotation() {
+  if (_galleryTimer) { clearInterval(_galleryTimer); _galleryTimer = null; }
 }
 
 function showProduct(p) {
   if (!p || !p.image) return;
-  // Galeri: images[] varsa onu kullan, yoksa tek image
   _galleryImages = (Array.isArray(p.images) && p.images.length) ? p.images : [p.image];
   _galleryIdx = 0;
+  _galleryPaused = false;
 
   const img = $('productImg');
   img.onerror = () => { img.style.display = 'none'; $('productEmpty').style.display = 'flex'; };
@@ -555,29 +541,9 @@ function showProduct(p) {
   img.src = _galleryImages[0];
   img.alt = p.name || '';
 
-  // Thumbnail rails — sag ve sol, dengeli dagit (8 → 4+4, 5 → 3+2 vs.)
-  const left = $('thumbsLeft');
-  const right = $('thumbsRight');
-  left.innerHTML = '';
-  right.innerHTML = '';
-  if (_galleryImages.length > 1) {
-    const half = Math.ceil(_galleryImages.length / 2);
-    const leftImgs = _galleryImages.slice(0, half);
-    const rightImgs = _galleryImages.slice(half);
-    const makeBtn = (url, i) =>
-      `<button data-idx="${i}" style="background-image:url('${url}')" aria-label="Resim ${i+1}"></button>`;
-    left.innerHTML = leftImgs.map((u, i) => makeBtn(u, i)).join('');
-    right.innerHTML = rightImgs.map((u, i) => makeBtn(u, i + half)).join('');
-    document.querySelectorAll('.thumb-rail button').forEach(b => {
-      b.onclick = () => { setMainImage(parseInt(b.dataset.idx)); startGalleryRotation(); };
-    });
-    setMainImage(0);
-    startGalleryRotation();
-  } else {
-    if (_galleryTimer) { clearInterval(_galleryTimer); _galleryTimer = null; }
-  }
+  if (_galleryImages.length > 1) startGalleryRotation();
+  else stopGalleryRotation();
 
-  // Alt bant: urun adi + link
   const linkHtml = p.link ? `<a class="plink" href="${p.link}" target="_blank" rel="noopener">Ürünü Gör</a>` : '';
   $('productInfo').innerHTML = `
     <div class="pname">${p.name || ''}</div>
@@ -585,6 +551,12 @@ function showProduct(p) {
   `;
 }
 
+// Ok butonlari — tiklayinca otomatik akis devam etsin
+$('navPrev').onclick = () => { setMainImage(_galleryIdx - 1); startGalleryRotation(); };
+$('navNext').onclick = () => { setMainImage(_galleryIdx + 1); startGalleryRotation(); };
+// Resme tiklayinca duraklat / devam
+$('productImg').onclick = () => { _galleryPaused = !_galleryPaused; };
+
 function handleEvent(evt) {
   switch (evt.type) {
     case 'product.show':