Embed implementacija, animacije, sidebar hover

web/templates/stranice/servis.html

@@ -9,18 +9,8 @@
         to   { opacity: 1; transform: translateY(0); }
     }
 
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(8px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
     .poruka-animacija { animation: slideDown 0.3s ease forwards; }
 
-    .servis-tabela tbody tr {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
-
     .servis-tabela tbody tr:nth-child(1)  { animation-delay: 0.04s; }
     .servis-tabela tbody tr:nth-child(2)  { animation-delay: 0.08s; }
     .servis-tabela tbody tr:nth-child(3)  { animation-delay: 0.12s; }
@@ -38,11 +28,6 @@
         gap: 12px;
     }
 
-    .servis-kartica {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
-
     .servis-kartica:nth-child(1)  { animation-delay: 0.04s; }
     .servis-kartica:nth-child(2)  { animation-delay: 0.10s; }
     .servis-kartica:nth-child(3)  { animation-delay: 0.16s; }
@@ -119,7 +104,7 @@
     </div>
 
     <!-- desktop tabela -->
-    <div class="kartica servis-tabela" style="padding:0;overflow:hidden;">
+    <div class="kartica servis-tabela animiraj" style="padding:0;overflow:hidden;">
         <div style="overflow-x:auto;">
             <table style="width:100%;border-collapse:collapse;">
                 <thead>
@@ -134,7 +119,7 @@
                 </thead>
                 <tbody>
                     {{range .Nalozi}}
-                    <tr style="border-bottom:0.5px solid var(--ivica);transition:background 0.15s;"
+                    <tr class="animiraj" style="border-bottom:0.5px solid var(--ivica);transition:background 0.15s;"
                         onmouseover="this.style.background='var(--pozadina)'"
                         onmouseout="this.style.background=''">
                         <td style="padding:12px 16px;">
@@ -188,7 +173,7 @@
     <!-- mobilne kartice -->
     <div class="servis-kartice">
         {{range .Nalozi}}
-        <div class="kartica servis-kartica">
+        <div class="kartica servis-kartica animiraj">
             <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;">
                 <div>
                     <a href="/servis/{{.ID}}"