/* ═══════════════════════════════════════════════════════════════
   Biroplast Solutions — V2 SERVIS ELEKTRONSKIH NAPRAV (10. 9. 2026,
   samostojna stran, brez odvisnosti od drugih page-CSS datotek).
   Predpona razredov "sen-".

   Vsebinski vir: stara uradna stran https://biroplast.si/servis/ +
   obstoječa V2 stran servis.html (ista dejstva, NE prepisano
   besedilo — glej dnevnik). Nova stran ima svojo identiteto:
   TECHNICAL / DIAGNOSTIC / RELIABLE / PRECISE / PREMIUM, po istem
   "hero-light" receptu kot servis.html/spletne-strani.html, a z
   drugačno kompozicijo (diagnostic ticket mockup namesto abstraktne
   spletne strani, alternating layout namesto ravnih seznamov). ═══ */

/* ── HERO — svetel "diagnostic technology" recept (glej depth-system.css
   razdelek 10). Manj "software dashboard" kot aplikacije.html, bolj
   "engineering/signal" kot brief zahteva (razdelek 19) — en večji lok +
   ena kotna pot z vozlišči, brez pikčastega app-UI jezika. ── */
.sen-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg, var(--ice), #fff 48%, var(--ice-deep));
  color:var(--ink); padding:calc(var(--sp-7) + 26px) 0 var(--sp-7);
}
.sen-hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.04fr .96fr; gap:var(--sp-6); align-items:center;
}
.sen-hero h1{ font-size:clamp(34px,4.4vw,54px); margin:2px 0 var(--sp-3); max-width:620px; color:var(--navy-deep); }
.sen-hero .lead{ max-width:520px; margin-bottom:var(--sp-3); }
.sen-hero-cta{ display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; }
.sen-hero-mail{
  display:inline-flex; align-items:center; gap:6px; margin-top:var(--sp-2);
  font-family:var(--fb); font-size:14px; color:var(--muted);
}
.sen-hero-mail a{ font-weight:600; color:var(--blue); }
.sen-hero-mail a:hover{ color:var(--cyan); }

@media (prefers-reduced-motion: no-preference){
  .sen-hero-vizual{ animation:senFloat 9s ease-in-out infinite; }
}
@keyframes senFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* diagnostic ticket-style mockup — ponovno uporabljen obstoječi
   ".app-showcase/.app-frame" jezik (components.css, prej samo za
   TAStudio/Booking), zapolnjen s servisno vsebino namesto app UI-ja.
   Namerno GENERIČEN prikaz (brez resničnih imen strank/naprav, brez
   trditev o SLA/rokih) — samo ponazoritev "servisni pregled" koncepta. */
.sen-hero-panel{ padding:22px; }
.sen-panel-glava{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.1);
}
.sen-panel-naslov{ font-family:var(--fh); font-weight:700; font-size:13px; letter-spacing:.04em; color:#fff; }
.sen-panel-pika{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted-on-navy); }
.sen-panel-pika::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px rgba(171,208,57,.18); }
.sen-vrstica{
  display:flex; align-items:center; gap:12px;
  padding:12px 10px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08);
}
.sen-vrstica + .sen-vrstica{ margin-top:10px; }
.sen-vrstica-ikona{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(23,185,236,.14); color:var(--cyan);
}
.sen-vrstica-ikona svg{ width:18px; height:18px; }
.sen-vrstica-besedilo{ flex:1; min-width:0; }
.sen-vrstica-besedilo b{ display:block; font-family:var(--fb); font-weight:600; font-size:13.5px; color:#fff; }
.sen-vrstica-besedilo small{ display:block; font-size:11.5px; color:var(--muted-on-navy); margin-top:1px; }
.sen-znacka{
  flex-shrink:0; font-family:var(--fh); font-weight:700; font-size:10.5px;
  letter-spacing:.04em; padding:5px 10px; border-radius:999px; white-space:nowrap;
}
.sen-znacka--cyan{ background:rgba(23,185,236,.16); color:#8fe0f7; }
.sen-znacka--modra{ background:rgba(4,123,193,.2); color:#8fc4ee; }
.sen-znacka--zelena{ background:rgba(24,165,75,.2); color:#8fe0ad; }

@media (max-width:960px){
  .sen-hero-grid{ grid-template-columns:1fr; gap:var(--sp-5); text-align:center; }
  .sen-hero-grid > div{ margin:0 auto; }
  .sen-hero h1{ max-width:none; }
  .sen-hero .lead{ max-width:none; margin-left:auto; margin-right:auto; }
  .sen-hero-cta{ justify-content:center; }
  .sen-hero-mail{ justify-content:center; }
  .sen-hero-vizual-wrap{ max-width:420px; margin:0 auto; }
}
@media (max-width:600px){ .sen-hero{ padding:calc(var(--sp-6) + 18px) 0 var(--sp-6); } }
@media (prefers-reduced-motion:reduce){ .sen-hero-vizual{ animation:none; } }

/* ── SERVISNE KATEGORIJE — 5 kartic, ikona + naslov + opis ─────────── */
.sen-kategorije{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-3); }
.sen-kategorija{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-3);
}
.sen-kategorija h3{ font-size:16.5px; margin:var(--sp-2) 0 6px; }
.sen-kategorija p{ color:var(--muted); font-size:13.5px; line-height:1.55; }
@media (max-width:1100px){ .sen-kategorije{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .sen-kategorije{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .sen-kategorije{ grid-template-columns:1fr; } }

/* ── IZMENIČNA VRSTICA (besedilo/vizual) — isti vzorec kot
   ".apl-vrsta-*" (aplikacije.css), samostojna kopija za neodvisnost
   strani (glej dnevnik "namerna podvojitev"). ── */
.sen-vrsta-drza{
  display:grid; grid-template-columns:1.02fr .98fr; gap:var(--sp-6); align-items:center;
}
.sen-vrsta-drza--obrni{ grid-template-columns:.98fr 1.02fr; }
.sen-vrsta-drza--obrni .sen-vrsta-media{ order:2; }
.sen-vrsta-drza--obrni .sen-vrsta-vsebina{ order:1; }
.sen-vrsta-vsebina h2{ font-size:clamp(26px,2.8vw,36px); margin:10px 0 10px; }
.sen-vrsta-vsebina .lead{ margin-bottom:var(--sp-3); }
.sen-vrsta-vsebina .kljuke{ list-style:none; margin:0 0 var(--sp-3); padding:0; display:flex; flex-direction:column; gap:10px; }
.sen-vrsta-vsebina .kljuke li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--ink); }
.sen-vrsta-vsebina .kljuke svg{ width:16px; height:16px; color:var(--green); flex-shrink:0; margin-top:3px; }
.sen-vrsta-poudarki{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-3); }
.sen-vrsta-poudarek{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--fh); font-weight:700; font-size:12.5px; color:var(--navy);
  padding:8px 13px; border-radius:999px; background:var(--surface-alt);
}
.sen-vrsta-poudarek svg{ width:14px; height:14px; color:var(--blue); }

.sen-vrsta-media{ position:relative; }
.sen-vrsta-media::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  width:56%; height:56%; top:-10%; right:-8%; border-radius:50%; filter:blur(54px);
  background:radial-gradient(circle, rgba(23,185,236,.16), transparent 72%);
}
.sen-vrsta-drza--obrni .sen-vrsta-media::before{
  right:auto; left:-8%; background:radial-gradient(circle, rgba(24,165,75,.14), transparent 72%);
}
.sen-vrsta-panel{
  position:relative; z-index:1; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(160deg, var(--navy-mid), var(--navy) 60%, var(--navy-deep));
  box-shadow:var(--sh-lg); aspect-ratio:4/3; padding:var(--sp-4);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px;
}
.sen-vrsta-panel-ikona{
  width:64px; height:64px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.09); color:var(--cyan);
}
.sen-vrsta-panel-ikona svg{ width:32px; height:32px; stroke-width:1.5; }
.sen-vrsta-panel p{ color:var(--muted-on-navy); font-size:13.5px; max-width:240px; line-height:1.5; }
.sen-vrsta-panel-crte{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; }

@media (max-width:900px){
  .sen-vrsta-drza, .sen-vrsta-drza--obrni{ grid-template-columns:1fr; gap:var(--sp-4); text-align:center; }
  .sen-vrsta-drza--obrni .sen-vrsta-media, .sen-vrsta-drza--obrni .sen-vrsta-vsebina{ order:initial; }
  .sen-vrsta-media{ order:-1; max-width:420px; margin:0 auto; }
  .sen-vrsta-vsebina .kljuke{ text-align:left; }
  .sen-vrsta-poudarki{ justify-content:center; }
}

/* ── PRIMERJAVA (doma / poslovno) ──────────────────────────────────── */
.sen-primerjava{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.sen-primerjava-kartica{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-4);
}
.sen-primerjava-kartica.poudarjeno{ border-color:rgba(4,123,193,.35); }
.sen-primerjava-glava{ display:flex; align-items:center; gap:10px; margin-bottom:var(--sp-2); }
.sen-primerjava-kartica h3{ font-size:17px; }
.sen-primerjava-kartica ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.sen-primerjava-kartica li{ display:flex; gap:9px; align-items:flex-start; font-size:14.5px; color:var(--ink); line-height:1.45; }
.sen-primerjava-kartica li svg{ width:15px; height:15px; color:var(--blue); flex-shrink:0; margin-top:3px; }
@media (max-width:760px){ .sen-primerjava{ grid-template-columns:1fr; } }

/* ── PROGRAMSKA OPREMA — 2-stolpčni seznam + oddaljena pomoč kartica ── */
.sen-seznam{ list-style:none; margin:0 auto; padding:0; max-width:820px; display:grid; grid-template-columns:1fr 1fr; gap:12px var(--sp-5); }
.sen-seznam li{ display:flex; gap:10px; align-items:center; font-size:15.5px; color:var(--ink); }
.sen-seznam svg{ width:17px; height:17px; color:var(--green); flex-shrink:0; }
@media (max-width:600px){ .sen-seznam{ grid-template-columns:1fr; } }

.sen-oddaljena{
  max-width:640px; margin:var(--sp-5) auto 0; text-align:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-4);
}
.sen-oddaljena h3{ font-size:18px; margin-bottom:6px; }
.sen-oddaljena p{ color:var(--muted); font-size:14.5px; margin-bottom:var(--sp-2); }

/* Dve dejanji drug ob drugem; na ozkem zaslonu drug pod drugim, da gumba
   ne postaneta pretesna za prst. */
.sen-oddaljena-gumbi{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.sen-oddaljena-opomba{ display:block; margin-top:10px; font-size:12px; color:var(--muted); }
@media (max-width:520px){
  .sen-oddaljena-gumbi{ flex-direction:column; }
  .sen-oddaljena-gumbi .btn{ width:100%; }
}

/* ── VZDRŽEVANJE OPREME — širok poudarjen panel ────────────────────── */
.sen-vzdrzevanje{
  max-width:960px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--sp-3);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:var(--sp-5);
}
.sen-vzdrzevanje-tocka{ text-align:center; }
.sen-vzdrzevanje-tocka .icon-box{ margin:0 auto 10px; }
.sen-vzdrzevanje-tocka h3{ font-size:15.5px; margin-bottom:4px; }
.sen-vzdrzevanje-tocka p{ color:var(--muted); font-size:13.5px; line-height:1.5; }
@media (max-width:700px){ .sen-vzdrzevanje{ grid-template-columns:1fr; text-align:center; } }

/* ── KAKO POTEKA SERVIS — oštevilčeni koraki (isti recept kot ".ss-korak") ── */
.sen-koraki{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-3); counter-reset:sen-korak; }
.sen-korak{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-3); position:relative; }
.sen-korak::before{
  counter-increment:sen-korak; content:counter(sen-korak);
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; margin-bottom:var(--sp-2);
  background:var(--grad-blue); color:#fff; font-family:var(--fh); font-weight:800; font-size:14px;
}
.sen-korak h3{ font-size:15px; margin-bottom:5px; }
.sen-korak p{ color:var(--muted); font-size:13px; line-height:1.5; }
@media (max-width:1000px){ .sen-koraki{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .sen-koraki{ grid-template-columns:1fr; } }

/* ── SORODNE STRANI (isti recept kot ".sv-sorodne"/".ss-sorodne") ─────── */
.sen-sorodne{ display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; }
.sen-sorodne a{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--fh); font-weight:700; font-size:14px; color:var(--navy);
  padding:10px 18px; border:1px solid var(--line); border-radius:999px;
  transition:border-color var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium);
}
.sen-sorodne a:hover{ border-color:var(--blue); color:var(--blue); }
.sen-sorodne a svg{ width:14px; height:14px; }

/* ── PRIJAVA SERVISA — temna premium sekcija z belo obrazčno kartico ── */
.sen-prijava-ovoj{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:linear-gradient(160deg, var(--navy-mid), var(--navy) 62%, var(--navy-deep));
  padding:var(--sp-6) var(--sp-5);
}
.sen-prijava-ovoj::before{
  content:''; position:absolute; top:0; left:8%; right:8%; height:2px;
  background:linear-gradient(90deg, transparent, rgba(23,185,236,.55), rgba(171,208,57,.5), transparent);
}
.sen-prijava-glava{ position:relative; z-index:1; text-align:center; max-width:560px; margin:0 auto var(--sp-5); }
.sen-prijava-glava h2{ color:#fff; margin-bottom:8px; }
.sen-prijava-glava .lead{ color:var(--muted-on-navy); margin:0 auto; }
.sen-prijava-nujno{
  position:relative; z-index:1; text-align:center;
  margin-top:var(--sp-3); font-size:13.5px; color:var(--muted-on-navy);
}
.sen-prijava-nujno a{ color:#fff; font-weight:700; }
.sen-prijava-nujno a:hover{ color:var(--lime); }

.sen-obrazec{
  position:relative; z-index:1; max-width:760px; margin:0 auto;
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  padding:var(--sp-5);
}
.sen-polja{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3) var(--sp-2); }
.sen-polje{ display:flex; flex-direction:column; gap:6px; }
.sen-polje.sirok{ grid-column:1 / -1; }
.sen-polje label{ font-family:var(--fh); font-weight:600; font-size:14px; color:var(--ink); }
.sen-neobvezno{ color:var(--muted); font-weight:500; }
.sen-polje input[type=text], .sen-polje input[type=email], .sen-polje input[type=tel],
.sen-polje select, .sen-polje textarea{
  width:100%; font-family:var(--fb); font-size:15px; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:13px 16px; transition:border-color var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium);
}
.sen-polje select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:40px;
}
.sen-polje textarea{ min-height:104px; resize:vertical; line-height:1.5; }
.sen-polje input::placeholder, .sen-polje textarea::placeholder{ color:#9aa8b5; }
.sen-polje input:focus, .sen-polje select:focus, .sen-polje textarea:focus{
  outline:none; border-color:var(--cyan); box-shadow:0 0 0 4px rgba(23,185,236,.14);
}
.sen-gdpr{
  grid-column:1 / -1; display:flex; gap:10px; align-items:flex-start;
  font-size:13px; color:var(--muted); line-height:1.5; margin-top:2px;
}
.sen-gdpr input{ margin-top:3px; width:16px; height:16px; accent-color:var(--blue); flex-shrink:0; }
.sen-obrazec-opomba{ grid-column:1 / -1; font-size:12.5px; color:var(--muted); margin:0; }
.sen-obrazec button[type=submit]{ grid-column:1 / -1; }
@media (max-width:640px){ .sen-polja{ grid-template-columns:1fr; } .sen-obrazec{ padding:var(--sp-4) var(--sp-3); } }

/* stanje po oddaji (JS preklopi vidnost, glej js/servis-elektronskih-naprav.js) */
.sen-obrazec-uspeh{ display:none; text-align:center; padding:var(--sp-3) 0; }
.sen-obrazec-uspeh svg{ width:40px; height:40px; color:var(--green); margin:0 auto 12px; }
.sen-obrazec-uspeh h3{ font-size:19px; margin-bottom:6px; }
.sen-obrazec-uspeh p{ color:var(--muted); font-size:14.5px; }
.sen-obrazec.oddano form{ display:none; }
.sen-obrazec.oddano .sen-obrazec-uspeh{ display:block; }

/* Neuspelo pošiljanje — isti blok, rdeč namesto zelenega.
   Obrazec ostane viden, da lahko obiskovalec takoj poskusi znova. */
.sen-obrazec-uspeh.napaka{ border-color:rgba(200,60,60,.35); background:rgba(200,60,60,.06); }
.sen-obrazec-uspeh.napaka svg{ color:#c83c3c; }
.sen-obrazec-uspeh.napaka a{ color:inherit; text-decoration:underline; }

@media (prefers-reduced-motion:reduce){
  .sen-vrsta-media, .sen-kategorija, .sen-korak, .sen-primerjava-kartica{ transition:none; }
}

/* povezava v obvestilu o obdelavi pod gumbom (28. 9. 2026) */
.sen-obrazec-opomba a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.sen-obrazec-opomba a:hover{ color:var(--navy); }