/* Skupni slog za domov.html in podstrani storitev (spletne-strani, aplikacije, programi).
   Smer: delavniško, stvarno. Bel papir, črno črnilo, en poudarek = rumena kot tračni meter.
   Ena pisava (Schibsted Grotesk), ročna pisava samo za podpis. Brez animacij ob drsenju. */
:root{
  --papir:#FAFAF8; --bela:#FFFFFF; --crnilo:#121417; --siva:#5C6168; --crta:#DEDFDB; --crta2:#ECEDEA;
  --rumena:#FFD400; --rumena-t:#1A1600; --ok:#15803D; --napaka:#B91C1C;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papir);color:var(--crnilo);font:400 18px/1.6 "Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.08}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.ovoj{max-width:1180px;margin:0 auto;padding:0 28px}

/* glava */
.glava{border-bottom:1px solid var(--crta);background:var(--papir)}
.glava .ovoj{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:20px}
.ime{font-weight:800;font-size:20px;text-decoration:none;letter-spacing:-.02em;white-space:nowrap}
.ime span{color:var(--siva);font-weight:700}
.meni{display:flex;gap:26px;font-size:16px}
.meni a{text-decoration:none;color:var(--siva);white-space:nowrap}
.meni a:hover,.meni a[aria-current]{color:var(--crnilo);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:var(--rumena)}

/* gumbi */
.gumb{display:inline-block;text-decoration:none;font-family:inherit;font-weight:700;font-size:17px;line-height:1.2;padding:16px 24px;border-radius:8px;border:2px solid var(--crnilo);cursor:pointer;background:var(--crnilo);color:#fff}
.gumb:hover{background:#2A2E35;border-color:#2A2E35}
.gumb.rumen{background:var(--rumena);border-color:var(--rumena);color:var(--rumena-t)}
.gumb.rumen:hover{background:#F2C900;border-color:#F2C900}
.gumb.prazen{background:transparent;color:var(--crnilo)}
.gumb.prazen:hover{background:var(--crnilo);color:#fff}
.gumbi{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
[hidden]{display:none!important}

.cena-vrst{display:inline-block;font-weight:700;font-size:16px;background:var(--rumena);color:var(--rumena-t);padding:3px 10px;border-radius:4px}
.cena-vrst.siva{background:var(--crta2);color:var(--crnilo)}

/* okvirja za posnetke */
.telefon{background:var(--crnilo);border-radius:36px;padding:9px;box-shadow:0 30px 60px -30px rgba(18,20,23,.45)}
.telefon img{border-radius:28px;aspect-ratio:720/1440;object-fit:cover;object-position:top;width:100%}
.okno{background:var(--bela);border:1px solid var(--crta);border-radius:10px;overflow:hidden;box-shadow:0 24px 48px -28px rgba(18,20,23,.35)}
.okno .vrh{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--crta);background:#F3F3F1}
.okno .vrh i{width:9px;height:9px;border-radius:50%;background:#CFCFCB}
.okno .vrh span{margin-left:10px;font-size:12.5px;color:var(--siva)}
figure{margin:0}
figcaption{font-size:15px;color:var(--siva);margin-top:12px;line-height:1.5}

/* ===== domov ===== */
.uvod{padding:64px 0 72px}
.uvod .ovoj{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.uvod h1{font-size:clamp(40px,5.4vw,70px);max-width:12ch}
.uvod .vodilo{font-size:clamp(19px,1.8vw,22px);color:#2B2F35;max-width:24em;margin-top:24px}

/* v uvodu: spletna stran v oknu + aplikacija na telefonu, kar oboje delam */
.kompozicija{position:relative;padding:0 54px 44px 0}
.kompozicija .telefon{position:absolute;right:0;bottom:0;width:31%;max-width:180px;border-radius:26px;padding:7px}
.kompozicija .telefon img{border-radius:20px}

.povezava{display:inline-block;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--rumena)}
.povezava:hover{text-decoration-color:var(--crnilo)}

/* vrsta storitve na prvi strani: kratko besedilo + velik primer */
.vrsta{padding:72px 0;border-top:1px solid var(--crta)}
.vrsta .glavna{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 40px;flex-wrap:wrap;margin-bottom:32px}
.vrsta h2{font-size:clamp(32px,4vw,48px)}
.vrsta .glavna p{color:#2B2F35;margin-top:10px;max-width:30em}
.vrsta .desno{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.dela{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px}
.dela figure:first-child{grid-row:span 2}
.dela figcaption{margin-top:8px;font-size:14.5px}

/* menjava slik v uvodu: okno in telefon se zamenjata skupaj (slike.js) */
.menjava{position:relative;overflow:hidden;aspect-ratio:1400/875}
.telefon .menjava{aspect-ratio:720/1440;border-radius:20px}
.menjava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:scale(1.035);transition:opacity .9s ease,transform 4.5s cubic-bezier(.2,.7,.2,1)}
.telefon .menjava img{aspect-ratio:auto;border-radius:0}
.menjava img.vid{opacity:1;transform:none}

/* primeri strani: ob miški (na telefonu, ko je na zaslonu) se slika pomakne čez celo stran */
.zaslon{position:relative;overflow:hidden;aspect-ratio:1400/875}
.zaslon img{position:absolute;top:0;left:0;width:100%;transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.drsi{outline:none;cursor:pointer}
.drsi .okno{transition:transform .3s ease,box-shadow .3s ease}
.drsi:hover .okno,.drsi:focus-visible .okno{transform:translateY(-3px);box-shadow:0 30px 60px -26px rgba(18,20,23,.5)}
.drsi:focus-visible .okno{outline:3px solid var(--rumena);outline-offset:3px}
.drsi:hover .zaslon img,.drsi:focus-visible .zaslon img,.drsi.tece .zaslon img{transform:translateY(calc(var(--pot,0px) * -1));transition:transform var(--cas,6s) cubic-bezier(.45,.05,.55,.95)}
.dela figure:first-child{display:flex;flex-direction:column}
.dela figure:first-child .okno{flex:1;display:flex;flex-direction:column}
.dela figure:first-child .zaslon{flex:1;aspect-ratio:auto;min-height:260px}
.namig{display:none}
@media (hover:hover){.namig{display:inline}}
@media (prefers-reduced-motion:reduce){.menjava img,.zaslon img,.drsi .okno{transition:none!important}}
.opomba{font-size:14.5px;color:var(--siva);margin-top:16px}
.vrsta .tri-tel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:780px;align-items:start}
.vrsta .tri-tel figure:nth-child(2){margin-top:48px}
.vrsta .tri-tel figcaption{font-size:14.5px}
.koraki-prog{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:2px solid var(--rumena-t)}
.koraki-prog li{padding:16px 16px 0 0;font-weight:700;font-size:17px;line-height:1.35}
.koraki-prog li span{display:block;font-weight:800;font-size:14px;margin-bottom:6px;opacity:.6}
.koraki-prog li:last-child{background:rgba(255,255,255,.45);padding-left:14px;border-radius:0 0 6px 6px;padding-bottom:14px}

.kontakt{padding:80px 0 88px;background:var(--crnilo);color:#fff}
.kontakt .ovoj{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}
.kontakt h2{font-size:clamp(32px,4vw,48px)}
.kontakt .ovoj > div > p{color:#C9CDD3;margin-top:14px}
.kontakt .podpis{font-family:Caveat,cursive;font-size:44px;line-height:1;margin-top:28px;color:var(--rumena)}
.obr{display:grid;gap:16px;background:var(--bela);border-radius:10px;padding:28px;color:var(--crnilo)}
.obr label{display:grid;gap:6px;font-size:15.5px;font-weight:700}
.obr .neobv{font-weight:400;color:var(--siva)}
.obr input,.obr textarea{font-family:inherit;font-weight:400;font-size:17px;line-height:1.45;padding:13px 14px;border:1.5px solid #CFD1CC;border-radius:8px;background:#fff;color:var(--crnilo);width:100%}
.obr textarea{min-height:110px;resize:vertical}
.obr input:focus,.obr textarea:focus{outline:none;border-color:var(--crnilo);box-shadow:0 0 0 3px var(--rumena)}
.obr .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.obr .gumb{width:100%;text-align:center}
.obr-st{font-size:16px}
.obr-st:empty{display:none}
.obr-st.ok{color:var(--ok);font-weight:700}
.obr-st.napaka{color:var(--napaka)}
.obr .zasebnost{font-size:14px;color:var(--siva)}

/* ===== podstrani ===== */
.vrh-strani{padding:64px 0 56px}
.vrh-strani .ovoj{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.vrh-strani h1{font-size:clamp(40px,5.4vw,68px)}
.vrh-strani .vodilo{font-size:clamp(19px,1.8vw,21px);color:#2B2F35;margin-top:20px;max-width:24em}
.vrh-strani .cena-vrst{margin-top:20px}
.vrh-strani .gumbi{margin-top:28px}
.vrh-strani .tri-tel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.vrh-strani .tri-tel figure:nth-child(2){margin-top:40px}
.vrh-strani .tri-tel .telefon{border-radius:28px;padding:7px}
.vrh-strani .tri-tel .telefon img{border-radius:22px}
.vrh-strani .tri-tel figcaption{font-size:14px}

.blok{padding:64px 0;border-top:1px solid var(--crta)}
.blok .ovoj{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}
.blok h2{font-size:clamp(26px,3vw,36px)}
.tocke{list-style:none;margin:0;padding:0}
.tocke li{padding:16px 0;border-bottom:1px solid var(--crta)}
.tocke li:first-child{border-top:2px solid var(--crnilo)}
.tocke b{display:block}
.tocke span{color:var(--siva)}
.zgodba{background:var(--bela);border:1px solid var(--crta);border-left:4px solid var(--rumena);border-radius:6px;padding:22px 24px;font-size:19px;color:#2B2F35}
.oznake{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.oznake span{border:1.5px solid var(--crnilo);border-radius:6px;padding:6px 12px;font-weight:500;font-size:16px}

.postopek{list-style:none;margin:0;padding:0;background:var(--bela);border:1px solid var(--crta);border-radius:10px}
.postopek li{display:grid;grid-template-columns:40px 1fr;gap:6px;padding:16px 22px;border-top:1px solid var(--crta2)}
.postopek li:first-child{border-top:0}
.postopek .st{font-weight:800;color:var(--siva)}
.postopek .jaz{background:#FFFBE0}

table{width:100%;border-collapse:collapse;font-size:18px}
td{padding:14px 0;border-bottom:1px solid var(--crta);vertical-align:top}
td:last-child{text-align:right;font-weight:700;padding-left:20px;white-space:nowrap}
tr:first-child td{border-top:2px solid var(--crnilo)}

details{border-bottom:1px solid var(--crta)}
details:first-child{border-top:2px solid var(--crnilo)}
summary{cursor:pointer;font-weight:700;padding:16px 36px 16px 0;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:4px;top:12px;font-size:24px;font-weight:500;color:var(--siva)}
details[open] summary:after{content:"\2212"}
details p{padding:0 0 18px;color:#2B2F35}

.poziv{padding:64px 0;background:var(--rumena);color:var(--rumena-t)}
.poziv .ovoj{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.poziv h2{font-size:clamp(28px,3.4vw,40px)}
.poziv p{margin-top:8px;color:#3D3500}

/* poskusno okno urejevalnika (spletne-strani): naslov se da pisati, barva in slika se zamenjata */
.ziv{--tema:#FFD400}
.ziv .tel{display:grid;grid-template-columns:88px 1fr;min-height:280px}
.ziv .lev{background:#1B1F27;padding:14px 10px;display:grid;gap:8px;align-content:start}
.ziv .lev b{display:block;height:9px;border-radius:5px;background:#3A4252}
.ziv .lev b.z{background:var(--tema);width:70%;transition:background .3s}
.ziv .des{padding:20px}
.ziv .mslika{width:100%;height:120px;object-fit:cover;border-radius:6px;margin-bottom:14px;transition:opacity .25s}
.ziv .n{font-weight:800;font-size:22px;line-height:1.2;display:inline-block;min-width:40px;cursor:text;outline:2px dashed var(--tema);outline-offset:6px;transition:outline-color .3s}
.ziv .l{height:8px;border-radius:4px;background:var(--crta2);margin:10px 0}
.ziv .l.k{width:64%}
.ziv .g{display:inline-block;margin-top:10px;background:var(--tema);color:var(--crnilo);font-size:13px;font-weight:700;padding:8px 14px;border-radius:6px;transition:background .3s}
.ziv .orodja{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--crta);background:#F7F7F5}
.ziv .ol{font-size:13px;font-weight:700;color:var(--siva)}
.ziv .sw{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--crta);cursor:pointer;padding:0}
.ziv .sw.on{box-shadow:0 0 0 2px var(--crnilo)}
.ziv .zam{margin-left:auto;font-family:inherit;font-weight:700;font-size:14px;line-height:1;border:1.5px solid var(--crnilo);background:#fff;color:var(--crnilo);border-radius:6px;padding:8px 12px;cursor:pointer}
.ziv .zam:hover{background:var(--crnilo);color:#fff}
.drobno{font-size:15px;color:var(--siva);margin-top:14px}
.geslo{font-weight:800;font-size:clamp(20px,2vw,24px);letter-spacing:-.01em;margin-top:6px}

/* plavajoči gumb: po prvem zaslonu, skrije se ob obrazcu (skupno.js) */
.plav{position:fixed;right:20px;bottom:20px;z-index:40;background:var(--rumena);color:var(--rumena-t);font-weight:700;font-size:16px;text-decoration:none;padding:14px 22px;border-radius:8px;box-shadow:0 10px 30px rgba(18,20,23,.3);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .3s}
.plav.vid{opacity:1;transform:none;pointer-events:auto}

footer{padding:28px 0;font-size:15px;color:var(--siva);background:var(--papir);border-top:1px solid var(--crta)}
footer .ovoj{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}
footer a{color:var(--siva)}

@media (max-width:900px){
  .ovoj{padding:0 16px}
  .glava .ovoj{flex-wrap:wrap;gap:4px 16px;padding-top:12px;padding-bottom:10px}
  .meni{gap:16px;font-size:15.5px;width:100%;overflow-x:auto}
  .uvod{padding:40px 0 48px}
  .uvod .ovoj,.kontakt .ovoj,.vrh-strani .ovoj,.blok .ovoj{grid-template-columns:1fr;gap:32px}
  .kompozicija{padding:0 34px 30px 0}
  .vrsta{padding:52px 0}
  .vrsta .glavna{margin-bottom:24px}
  .dela{grid-template-columns:1fr 1fr;gap:12px}
  .dela figure:first-child{grid-row:auto;grid-column:1/-1}
  .dela figure:first-child .zaslon{flex:none;aspect-ratio:1400/875;min-height:0}
  .vrsta .tri-tel{gap:10px}
  .vrsta .tri-tel figure:nth-child(2){margin-top:28px}
  .vrsta .tri-tel figcaption{font-size:13px}
  .koraki-prog{grid-template-columns:1fr}
  .koraki-prog li{padding:12px 0;border-bottom:1px solid rgba(26,22,0,.2);display:flex;gap:12px;align-items:baseline}
  .koraki-prog li span{margin:0}
  .koraki-prog li:last-child{padding-left:12px;border-radius:6px}
  .kontakt{padding:56px 0 64px}
  .obr{padding:22px 18px}
  .vrh-strani{padding:40px 0 44px}
  .vrh-strani .tri-tel{gap:10px}
  .vrh-strani .tri-tel figure:nth-child(2){margin-top:24px}
  .vrh-strani .tri-tel figcaption{font-size:13px}
  .blok{padding:48px 0}
  .poziv{padding:48px 0}
  .gumbi .gumb{width:100%;text-align:center}
  .plav{left:16px;right:16px;bottom:14px;text-align:center}
  .ziv .tel{grid-template-columns:56px 1fr}
}