Click = seek only (no auto-play); Enter = play/pause from position

User feedback: 'naj ne začne takoj predvajati. naj začne ko pritisnem
Enter, in pozicija naj ostane črta ker bomo tja dali tracker'

Changes:
- Click on waveform: just seek + render playhead (was: seek + auto-play)
- Click on segment row: just seek + render playhead (was: seek + auto-play)
- Playhead: brighter, with triangle marker on top (tracker placeholder)
- Enter key: play/pause toggle from current position
- Space key: also play/pause (back-compat)
- Hint texts updated to reflect new workflow

Workflow now:
1. Click on waveform/segment → playhead jumps there (no sound)
2. Read transcript, look at waveform around the position
3. Press Enter → plays from there
4. Press Enter again → pauses
5. Click somewhere else → playhead moves there (paused)
6. Press Enter → plays from new position

Allows precise positioning before commit to playback.

templates/index.html

@@ -1062,7 +1062,7 @@
               <button class="small ghost zoom-btn" data-zoom="5" style="padding:3px 10px;">5x</button>
               <button class="small ghost zoom-btn" data-zoom="10" style="padding:3px 10px;">10x</button>
               <button class="small ghost zoom-btn" data-zoom="20" style="padding:3px 10px;">20x</button>
-              <span style="margin-left:14px; font-size:11px; color:var(--muted);">Klik na valove = skoči + predvaja · Space = play/pause</span>
+              <span style="margin-left:14px; font-size:11px; color:var(--muted);">Klik = skoči (bel črtnik) · Enter = play/pause od pozicije</span>
             </div>
             
             <!-- Scrollable wrapper -->
@@ -1085,8 +1085,11 @@
                   <div style="width:4px; height:32px; background:#fff; border-radius:2px;"></div>
                 </div>
                 
-                <!-- Playhead -->
-                <div id="trim-playhead" style="position:absolute; top:-4px; bottom:-4px; left:0%; width:3px; background:#fff; z-index:2; pointer-events:none; opacity:0.9; box-shadow:0 0 6px #fff;"></div>
+                <!-- Playhead (bel črtnik — "tracker") -->
+                <div id="trim-playhead" style="position:absolute; top:-6px; bottom:-6px; left:0%; width:2px; background:#fff; z-index:2; pointer-events:none; opacity:1; box-shadow:0 0 8px rgba(255,255,255,0.8);">
+                  <!-- Trikotnik na vrhu -->
+                  <div style="position:absolute; top:-2px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid #fff;"></div>
+                </div>
                 
                 <!-- Time labels -->
                 <div style="position:absolute; bottom:4px; left:8px; font-size:11px; color:#fff; pointer-events:none; z-index:4; text-shadow:0 0 4px #000;">0:00</div>
@@ -1096,7 +1099,7 @@
             
             <!-- Hint -->
             <div style="font-size:11px; color:var(--muted); margin-top:6px; text-align:center;">
-              ← Povleci levi/desni rdeč ročaj · Klik na valove ali napise = skoči video
+              ← Povleci rdeče ročaje · Klik na valove = skoči (bel črtnik) · Enter = play/pause od pozicije
             </div>
           </div>
           
@@ -1226,13 +1229,16 @@
       document.addEventListener("mouseup", onPointerUp);
       document.addEventListener("touchend", onPointerUp);
       
-      // Click anywhere on trim bar = seek + predvajaj OD TJE (ne od trim start)
+      // Click anywhere on trim bar = SAMO seek (NE predvajaj)
+      // Playhead skoči tja, počaka na Enter za predvajanje
       trimBar.addEventListener("click", (e) => {
         if (e.target === handleL || e.target === handleR || handleL.contains(e.target) || handleR.contains(e.target)) return;
         const t = timeFromPx(e.clientX);
         if (video) {
+          // Ustavi predvajanje če teče (da ne moti)
+          if (!video.paused) video.pause();
           video.currentTime = t;
-          video.play().catch(() => {});
+          renderPlayhead();  // takoj posodobi vizualno pozicijo
         }
       });
       
@@ -1272,23 +1278,26 @@
         });
       });
       
-      // Space tipka = play/pause od trenutne pozicije (brez resetiranja na trim start)
-      const spaceHandler = (e) => {
-        if (e.code === "Space" && e.target.tagName !== "INPUT" && e.target.tagName !== "TEXTAREA") {
-          e.preventDefault();
-          if (video) {
-            if (video.paused) {
-              video.play().catch(() => {});
-            } else {
-              video.pause();
-            }
+      // ENTER tipka = play/pause od trenutne pozicije (kjer je playhead)
+      // Space tudi (back-compat)
+      const playPauseHandler = (e) => {
+        const isPlayKey = e.code === "Enter" || e.code === "Space";
+        if (!isPlayKey) return;
+        // Ne moti če uporabnik tipka v inputu/textarea
+        if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA") return;
+        e.preventDefault();
+        if (video) {
+          if (video.paused) {
+            video.play().catch(() => {});
+          } else {
+            video.pause();
           }
         }
       };
-      document.addEventListener("keydown", spaceHandler);
+      document.addEventListener("keydown", playPauseHandler);
       // Cleanup ob zaprtju modala
       overlay._cleanup = () => {
-        document.removeEventListener("keydown", spaceHandler);
+        document.removeEventListener("keydown", playPauseHandler);
       };
       
       // Update playhead during playback + re-render če videoDuration manjkalo
@@ -1320,8 +1329,10 @@
       // Klik na napis → skoči video na tisti timestamp
       window.seekToSegment = function(t) {
         if (!video) return;
+        // Pause če teče, samo skoči (Enter za play)
+        if (!video.paused) video.pause();
         video.currentTime = t;
-        video.play().catch(() => {});
+        renderPlayhead();
       };
       
       // Live highlight aktivnega segmenta med predvajanjem