Embed implementacija, animacije, sidebar hover

web/templates/stranice/servis_detalji.html

@@ -4,21 +4,6 @@
 
 {{define "dodatni-css"}}
 <style>
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(10px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
-    @keyframes slideDown {
-        from { opacity: 0; transform: translateY(-10px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
-    .detalji-kartica {
-        animation: fadeInUp 0.3s ease forwards;
-        opacity: 0;
-    }
-
     .detalji-kartica:nth-child(1) { animation-delay: 0.04s; }
     .detalji-kartica:nth-child(2) { animation-delay: 0.12s; }
     .detalji-kartica:nth-child(3) { animation-delay: 0.20s; }
@@ -72,7 +57,7 @@
     </a>
 
     <!-- zaglavlje naloga -->
-    <div class="kartica detalji-kartica">
+    <div class="kartica detalji-kartica animiraj">
         <div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
             <div style="display:flex;flex-direction:column;gap:8px;">
                 <span style="font-size:20px;font-weight:600;color:var(--tekst-glavni);font-family:monospace;">
@@ -107,7 +92,7 @@
     </div>
 
     <!-- podaci o uređaju -->
-    <div class="kartica detalji-kartica">
+    <div class="kartica detalji-kartica animiraj">
         <div style="margin-bottom:16px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
             <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Uređaj</span>
         </div>
@@ -138,7 +123,7 @@
     </div>
 
     <!-- cene -->
-    <div class="kartica detalji-kartica">
+    <div class="kartica detalji-kartica animiraj">
         <div style="margin-bottom:16px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
             <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Cene</span>
         </div>
@@ -171,7 +156,7 @@
     </div>
 
     <!-- placeholder za buduće funkcije -->
-    <div class="kartica detalji-kartica" style="border-style:dashed;">
+    <div class="kartica detalji-kartica animiraj" style="border-style:dashed;">
         <div style="display:flex;align-items:center;gap:10px;color:var(--tekst-sporedni);">
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
             <span style="font-size:13px;">Istorija promena statusa i vezani artikli biće dostupni u narednoj verziji.</span>
@@ -179,7 +164,7 @@
     </div>
 
     <!-- zona za brisanje -->
-    <div class="kartica detalji-kartica" style="border-color:#dc262633;">
+    <div class="kartica detalji-kartica animiraj" style="border-color:#dc262633;">
         <div style="display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;">
             <div style="flex:1;min-width:200px;">
                 <div style="font-size:14px;font-weight:500;color:#dc2626;margin-bottom:4px;">Brisanje naloga</div>