/* =====================================================================
   Primatech.CompanySite - glavni CSS (po mockupu v3, Mockups/PrimatechSajt/izvor/sajt-v3-plava.html)
   PRAVILO: svaka boja ide preko varijable iz :root; teme (tema-<ime>.css) nadjačavaju samo varijable.
   Breakpointi: max 767 (telefon), 768-991 (tablet), min 992 (desktop), min 1200 (širok).
   ===================================================================== */

/* Font Inter Tight sa sopstvenog servera (OFL), varijabilni 100-900 */
@font-face{font-family:"Inter Tight";src:url(../fonts/inter-tight-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+20A0-20C0}
@font-face{font-family:"Inter Tight";src:url(../fonts/inter-tight-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Rezerva dok se font ne učita - Arial podešen na mjere Inter Tight (približno), da tekst ne skače (CLS) */
@font-face{font-family:"Inter Tight Fallback";src:local("Arial");size-adjust:100%;ascent-override:96.9%;descent-override:24.2%;line-gap-override:0%}

/* ---- Dizajn tokeni (zadano = tema primatech, v3) ---- */
:root{
 --pozadina:#fff;
 --tekst:#141414;          /* glavni tekst, naslovi */
 --tekst-2:#2b2b2b;        /* uvodni tekst */
 --tekst-3:#333;
 --siva:#6b6b6b;           /* sporedni tekst (mockup #727272, potamnjeno zbog kontrasta 4,5:1 na sivim karticama) */
 --svijetla:#f5f5f5;       /* sive kartice, kvadratna dugmad */
 --svijetla-h:#ebebeb;
 --linija:#ebebeb;
 --plava:#009FE3;          /* Primatech plava (logo, ikone) */
 --duboka:#173F66;         /* tamnoplava (tamna sekcija, brojke) */
 --svpl:#E6F1FA;           /* svijetloplava podloga */
 --akcija:#0090CE;         /* dugmad (v3) - bijeli podebljan tekst 19 px */
 --akcija-h:#0082BA;
 --akcija-tekst:#fff;
 --akcija-linija:rgba(255,255,255,.35);
 --naglasak:var(--akcija); /* "Mi brinemo" u naslovu (plava #009FE3 ima kontrast 2,97 - ispod 3:1) */
 --dug-sv-poz:#fff;
 --dug-sv-tekst:var(--akcija);
 --dug-sv-linija:rgba(0,144,206,.35);
 --bk-poz:var(--svpl);     /* pločice sa godinama */
 --bk-broj:var(--duboka);
 --tam-poz:var(--duboka);  /* tamna sekcija "Izaberite kako radite" */
 --tam-tacke:rgba(255,255,255,.05);
 --tam-tekst:#fff;
 --tam-tekst-2:#e6e6e6;
 --tab-obrub:rgba(255,255,255,.25);
 --tab-tekst:#d7e6f3;
 --tab-iz-poz:#fff;
 --tab-iz-tekst:var(--tekst);
 --ik-poz:var(--plava);    /* ikone u kvadratu */
 --ik-tekst:#fff;
 --kon-poz:#007DB5;        /* blok kontakta (plava, malo dublja zbog kontrasta bijelog teksta) */
 --kon-tekst:#fff;
 --kon-tekst-2:rgba(255,255,255,.92);
 --kon-dug-poz:#fff;
 --kon-dug-tekst:#007DB5;
 --sjenka:rgba(0,0,0,.18);
 --slika-poz:#dde3e8;
 --fokus-prsten:#2AACE2;
 --polje-fokus-poz:#F0F8FD;
 --r:24px;
 --vis-zag:72px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--vis-zag) + 12px)}
body{font-family:"Inter Tight","Inter Tight Fallback",Arial,sans-serif;color:var(--tekst);background:var(--pozadina);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
/* PRAVILO korisnika: linkovi se ne podvlače ni na hover / fokus / klik */
a:hover,a:focus,a:focus-visible,a:active{text-decoration:none !important}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--fokus-prsten);outline-offset:2px}
.w{max-width:1280px;margin:0 auto;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Preskoči na sadržaj (tastatura) */
.preskoci{position:absolute;left:16px;top:-60px;z-index:50;background:var(--akcija);color:var(--akcija-tekst);padding:10px 16px;border-radius:10px;font-weight:600}
.preskoci:focus{top:12px}

/* ---- Zaglavlje ---- */
.zag{position:sticky;top:0;background:var(--pozadina);z-index:20;border-bottom:1px solid var(--linija)}
.hd{display:flex;align-items:center;gap:12px;height:var(--vis-zag)}
.kv{width:40px;height:40px;border-radius:10px;background:var(--svijetla);display:flex;align-items:center;justify-content:center;flex:none;transition:background-color .15s}
.kv:hover{background:var(--svijetla-h)}
.kv svg{width:20px;height:20px;stroke:var(--tekst);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.meni-dugme .iz-zatvori{display:none}
.meni-dugme[aria-expanded="true"] .iz-meni{display:none}
.meni-dugme[aria-expanded="true"] .iz-zatvori{display:block}
.logo{display:flex;align-items:center;flex:none}
.logo img{display:block;width:126px;height:26px}
.nav{display:none;gap:28px;font-size:16px;margin-left:28px}
.nav a{padding:6px 0;transition:color .15s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--akcija)}
.sp{flex:1}

/* ---- Dugme sa strelicom u posebnom polju (v3) ---- */
.dug{display:inline-flex;align-items:stretch;height:46px;border-radius:10px;background:var(--akcija);color:var(--akcija-tekst);font-size:19px;font-weight:600;overflow:hidden;white-space:nowrap;transition:background-color .15s}
.dug:hover{background:var(--akcija-h)}
.dug span{display:flex;align-items:center;padding:0 18px}
.dug b{display:flex;align-items:center;justify-content:center;width:46px;border-left:1px solid var(--akcija-linija);font-weight:400}
.dug.vel{height:56px}.dug.vel b{width:56px}
.dug.sv{background:var(--dug-sv-poz);color:var(--dug-sv-tekst);box-shadow:inset 0 0 0 1.5px var(--dug-sv-tekst)}
.dug.sv b{border-left-color:var(--dug-sv-linija)}
.dug.sv:hover{background:var(--svpl)}
.dug.puna{display:flex;width:100%}.dug.puna span{flex:1;justify-content:center}
.mt{display:flex}.dt{display:none !important}

/* ---- Hero ---- */
.hero{padding:40px 0 28px}
.pov{display:flex;align-items:center;gap:12px;font-size:16px;line-height:1.35;margin-bottom:22px;color:var(--tekst-3)}
.pov .br{font-weight:700;font-size:26px;letter-spacing:-1px;color:var(--tekst);flex:none}
h1{font-size:44px;line-height:.98;letter-spacing:-1.5px;font-weight:600}
h1 em{font-style:normal;color:var(--naglasak)}
.lead{font-size:20px;line-height:1.3;margin:20px 0 26px;color:var(--tekst-2);max-width:640px}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.slika{margin-top:32px;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3.4;background:var(--slika-poz)}
.slika img{width:100%;height:100%;object-fit:cover;object-position:center 6%}

/* ---- Brojke / godine ---- */
.brojke{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:28px 0 8px}
.bk{background:var(--bk-poz);border-radius:20px;padding:18px 18px 16px}
.bk b{display:block;font-size:34px;letter-spacing:-1.2px;font-weight:600;line-height:1;color:var(--bk-broj)}
.bk span{font-size:14px;color:var(--siva);margin-top:6px;display:block}

/* ---- Sekcije i kartice "sitno gore, krupno dolje" ---- */
section{padding:36px 0}
h2{font-size:38px;line-height:1;letter-spacing:-1.3px;font-weight:600;margin-bottom:20px}
.kart{display:grid;gap:12px}
.kt{background:var(--svijetla);border-radius:var(--r);padding:24px 24px 26px;display:flex;flex-direction:column;justify-content:space-between}
.kt p{font-size:17px;line-height:1.4;color:var(--siva);margin-bottom:34px}
.kt h3{font-size:28px;line-height:1.04;letter-spacing:-.8px;font-weight:600}

/* ---- Tamna sekcija (softver sa tabovima, cijene) ---- */
.tam{background-color:var(--tam-poz);background-image:radial-gradient(var(--tam-tacke) 1px,transparent 1px);background-size:4px 4px;color:var(--tam-tekst);border-radius:28px 28px 0 0;padding:44px 0 40px}
.tam.cijela{border-radius:28px;margin:16px 0 8px}
.tam h2{font-size:40px;color:var(--tam-tekst)}
.tam .lead{color:var(--tam-tekst-2);margin-top:0}
.tabs{display:flex;gap:8px;overflow-x:auto;margin:6px -16px 16px;padding:0 16px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--tab-obrub);display:flex;align-items:center;font-size:15px;color:var(--tab-tekst);transition:background-color .15s,color .15s}
.tabs button[aria-selected="true"]{background:var(--tab-iz-poz);color:var(--tab-iz-tekst);border-color:var(--tab-iz-poz);font-weight:500}
.pk{background:var(--svijetla);color:var(--tekst);border-radius:var(--r);padding:26px 24px}
.pk .naz{font-size:28px;letter-spacing:-.8px;font-weight:600;line-height:1.04}
.pk .cij{font-size:48px;letter-spacing:-2px;font-weight:600;margin:16px 0 0;line-height:1}
.pk .cij small{font-size:17px;letter-spacing:0;font-weight:400;color:var(--siva);margin-left:6px}
.pk .op{font-size:16px;line-height:1.45;margin:14px 0 20px;color:var(--tekst-3)}
.pk ul,.lista{list-style:none;display:grid;gap:12px;margin-bottom:24px}
.pk li,.lista li{display:flex;gap:12px;font-size:19px;line-height:1.2}
.pk li:before,.lista li:before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--ik-poz) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;margin-top:1px}
.pk[hidden]{display:none}
.cjenovnik{display:grid;gap:12px}

/* ---- Redovi sa ikonom ("Napravljeno za", meni) ---- */
.za .lead{font-size:17px;color:var(--siva);margin:0 0 18px}
.red{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--linija);align-items:flex-start}
.red:first-child{border-top:0}
a.red:hover b{color:var(--akcija)}
.ik{width:56px;height:56px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--ik-poz)}
.ik svg{width:28px;height:28px;fill:none;stroke:var(--ik-tekst);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.red b{display:block;color:var(--tekst);font-size:20px;font-weight:500;letter-spacing:-.2px;transition:color .15s}
.red .txt{display:block;min-width:0}
.red .op{display:block;font-size:16px;line-height:1.35;color:var(--siva);margin-top:4px}
.red .oznake{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.red .oznake a{font-size:14px;height:30px;padding:0 12px;border-radius:999px;background:var(--svpl);color:var(--duboka);display:inline-flex;align-items:center}
.red .oznake a:hover{color:var(--akcija)}

/* ---- Blok kontakta ---- */
.kon{background:var(--kon-poz);color:var(--kon-tekst);border-radius:var(--r);padding:26px 24px;display:grid;gap:18px}
.kon .t{margin:0;font-size:28px;letter-spacing:-.8px;font-weight:600;line-height:1.04}
.kon .s{font-size:16px;color:var(--kon-tekst-2)}
.kon .tel{display:block;font-size:22px;font-weight:500;letter-spacing:-.3px;line-height:1.35}
.kon .dug{justify-self:start;background:var(--kon-dug-poz);color:var(--kon-dug-tekst)}
.kon .dug b{border-left-color:var(--dug-sv-linija)}

/* ---- Fotografije prostora ---- */
.foto{display:grid;gap:10px}
.foto div{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--slika-poz)}
.foto img{width:100%;height:100%;object-fit:cover}
.mi .lead{margin-top:18px}

/* ---- Unutrašnje strane ---- */
.str-zag{padding:40px 0 8px}
.str-zag .lead{margin-bottom:8px}
.blok{background:var(--svijetla);border-radius:var(--r);padding:26px 24px;display:grid;gap:18px}
.blok + .blok{margin-top:12px}
.blok h2{font-size:32px;margin-bottom:0}
.blok p{font-size:17px;line-height:1.45;color:var(--tekst-3)}
.blok .lista{margin-bottom:0}
.blok .cij{font-size:36px;letter-spacing:-1.2px;font-weight:600;line-height:1}
.blok .cij small{font-size:16px;letter-spacing:0;font-weight:400;color:var(--siva);margin-left:6px}
.podaci{display:grid;gap:12px}
.podatak{background:var(--svijetla);border-radius:20px;padding:22px 22px 20px;display:flex;gap:16px;align-items:flex-start}
.podatak .ik{width:44px;height:44px;border-radius:12px}
.podatak .ik svg{width:22px;height:22px}
.podatak small{display:block;font-size:14px;color:var(--siva);margin-bottom:4px}
.podatak strong,.podatak a.vel{display:block;font-size:20px;font-weight:500;letter-spacing:-.3px;line-height:1.35}
.podatak a.vel:hover{color:var(--akcija)}
.podatak .nap{display:block;font-size:14px;color:var(--siva);margin-top:4px}
/* razmaci gore (umjesto inline stilova) */
.r-s{margin-top:10px}.r-m{margin-top:16px}.r-v{margin-top:24px}
.nema{padding:64px 0 40px;max-width:720px}
.nema .kod{font-size:16px;color:var(--siva);margin-bottom:12px;display:block}

/* ---- Futer ---- */
.futer{padding:28px 0 40px;font-size:14px;color:var(--siva);border-top:1px solid var(--linija);margin-top:24px}
.futer .kol{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.futer .kol > div:first-child,.futer .kol > div:last-child{grid-column:1 / -1}
.futer b{display:block;color:var(--tekst);font-weight:600;margin-bottom:6px}
.futer a{display:block;line-height:1.9}
.futer a:hover{color:var(--akcija)}
.futer .dno{margin-top:22px}
.futer .nap{display:block;font-size:13px}


/* =====================================================================
   Meni na telefonu preko cijelog ekrana (uzor kleos.io)
   - zaglavlje ostaje, ☰ postaje ✕; body bez skrola dok je otvoren
   - pojavljivanje 96% -> 100% + fade 180 ms
   ===================================================================== */
.meni{position:fixed;left:0;right:0;top:var(--vis-zag);bottom:0;z-index:19;background:var(--pozadina);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
 opacity:0;transform:scale(.96);transform-origin:50% 0;transition:opacity .18s ease,transform .18s ease}
.meni.otvoren{opacity:1;transform:none}
.meni[hidden]{display:none}
.meni-u{padding:8px 16px 40px;max-width:640px;margin:0 auto}
html.meni-otvoren,html.meni-otvoren body{overflow:hidden}
.ms{border-bottom:1px solid var(--linija);padding:20px 0}
.ms-zag{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ms-zag h2{font-size:40px;letter-spacing:-1.3px;line-height:1;margin:0}
.ms-zag .kv svg{transition:transform .18s ease}
.ms-zag .kv[aria-expanded="true"] svg{transform:rotate(45deg)}
.ms-tijelo{padding-top:14px;overflow:hidden}
.ms-tijelo[hidden]{display:none}
/* rasklapanje sekcije kao kod uzora: visina 0 -> puna (JS postavlja visinu), stavke ulaze redom odozdo */
.ms-tijelo.anim{transition:height .26s cubic-bezier(.2,.7,.2,1),padding-top .26s}
.ms-tijelo > *{transition:opacity .22s ease,transform .22s ease}
.ms-tijelo.skriva > *{opacity:0;transform:translateY(8px)}
/* pri otvaranju menija sekcije i dugme na dnu ulaze redom (stagger) */
.meni .ms,.meni .meni-dno{opacity:0;transform:translateY(10px);transition:opacity .24s ease,transform .24s ease}
.meni.otvoren .ms,.meni.otvoren .meni-dno{opacity:1;transform:none}
.meni.otvoren .ms:nth-child(2){transition-delay:.04s}.meni.otvoren .ms:nth-child(3){transition-delay:.08s}.meni.otvoren .meni-dno{transition-delay:.12s}
.ms-opis{font-size:17px;line-height:1.4;color:var(--siva);margin-bottom:6px}
.ms .red{padding:16px 0;border-top:1px solid var(--linija)}
.ms .red:first-of-type{border-top:0}
.ms-linkovi a{display:block;font-size:24px;font-weight:500;letter-spacing:-.5px;padding:10px 0}
.ms-linkovi a:hover,.ms-linkovi a[aria-current="page"]{color:var(--akcija)}
.meni-dno{padding-top:24px}
.meni-dno .tels{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:18px;font-weight:500}
.meni-dno .tels a:hover{color:var(--akcija)}
.meni-dno .s{font-size:15px;color:var(--siva);margin-top:10px}

@media (prefers-reduced-motion:reduce){
 .meni,.ms-zag .kv svg,.dug,.ms-tijelo.anim,.ms-tijelo > *,.meni .ms,.meni .meni-dno{transition:none}
}

/* ---- Telefon ---- */
@media (max-width:767px){
 .zag .dug b{display:none}
 .zag .dug span{padding:0 16px}
 .logo img{width:116px;height:24px}
}
@media (max-width:374px){
 .hd{gap:8px}
 .logo img{width:107px;height:22px}
 h1{font-size:38px}
}

/* ---- Tablet ---- */
@media (min-width:768px) and (max-width:991px){
 .w{padding:0 24px}
 .meni-u{padding-left:24px;padding-right:24px}
 h1{font-size:60px}
 .brojke{grid-template-columns:repeat(4,1fr)}
 .kart{grid-template-columns:1fr 1fr}
 .foto{grid-template-columns:1fr 1fr}
 .podaci,.cjenovnik{grid-template-columns:1fr 1fr}
 .futer .kol{grid-template-columns:repeat(3,1fr)}
 .futer .kol > div:last-child{grid-column:auto}
}

/* ---- Desktop ---- */
@media (min-width:992px){
 .w{padding:0 40px}
 .futer{padding:40px 0 48px}
 .nav{display:flex}
 .meni-dugme,.meni{display:none !important}
 .mt{display:none !important}.dt{display:flex !important}
 .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:64px 0 32px}
 .slika{margin-top:0;aspect-ratio:4/4.2}
 h1{font-size:72px;line-height:.98;letter-spacing:-2.4px}
 .str-zag h1{font-size:64px}
 .brojke{grid-template-columns:repeat(4,1fr);margin-top:8px}
 h2{font-size:56px;letter-spacing:-2px}
 .kart{grid-template-columns:repeat(3,1fr)}
 .tam .in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
 .tam h2{font-size:60px}
 .tabs{margin-left:0;margin-right:0;padding:0;flex-wrap:wrap}
 .za .in{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px}
 .kon{grid-template-columns:1.3fr 1fr 1fr;align-items:center}
 .kon .dug{justify-self:end}
 .foto{grid-template-columns:1.6fr 1fr}
 .foto div{aspect-ratio:auto;height:440px}
 .foto.tri{grid-template-columns:repeat(3,1fr)}
 .foto.tri div{height:360px}
 .blok{grid-template-columns:1fr 1fr;gap:40px;padding:36px}
 .blok h2{font-size:40px}
 .podaci{grid-template-columns:repeat(3,1fr)}
 .cjenovnik{grid-template-columns:1fr 1fr}
 .futer .kol{grid-template-columns:2fr 1fr 1fr 1.4fr}
 .futer .kol > div:first-child,.futer .kol > div:last-child{grid-column:auto}
}
@media (min-width:1200px){
 h1{font-size:78px}
 h2{font-size:60px}
 .tam h2{font-size:64px}
 .cjenovnik{grid-template-columns:repeat(4,1fr)}
 .cjenovnik .pk .cij{font-size:40px}
}

/* =====================================================================
   Dopune 12.10.2026: logo u futeru, dva dugmeta u bloku kontakta, kontakt forma, toast,
   lokacija (mapa kao ilustracija + Google mapa tek na klik) i dijalog "Kako do nas".
   ===================================================================== */
.futer-logo{display:inline-block;margin-bottom:10px}
.futer-logo img{display:block;width:107px;height:22px}
.futer .kol > div:first-child > a:not(.futer-logo){display:inline;line-height:1.6}

.kon-dug{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.kon .dug.prozirno{background:transparent;color:var(--kon-tekst);box-shadow:inset 0 0 0 1.5px var(--kon-tekst)}
.kon .dug.prozirno b{border-left-color:var(--kon-tekst-2)}
.kon .dug.prozirno:hover{background:rgba(255,255,255,.12)}

/* ---- Kontakt forma (pravila polja: 44 px, tekst 15 px, labela 14 px iznad, fokus #F0F8FD + #2AACE2) ---- */
:root{--polje-okvir:#C5CCD4;--polje-okvir-h:#8C96A2;--greska:#C62828;--uspjeh:#1E8E3E}
.kontakt-grid{display:grid;gap:24px}
.forma{background:var(--svijetla);border-radius:var(--r);padding:26px 24px;display:grid;gap:16px;align-content:start}
.forma h2{font-size:32px;margin-bottom:4px}
.polje label{display:block;font-size:14px;font-weight:500;margin-bottom:6px;color:var(--tekst)}
.polje label small{font-size:13px;font-weight:400;color:var(--siva);margin-left:6px}
.polje input,.polje select,.polje textarea{display:block;width:100%;height:44px;font:inherit;font-size:15px;color:var(--tekst);background:var(--pozadina);border:1px solid var(--polje-okvir);border-radius:8px;padding:0 12px;transition:border-color .15s,background-color .15s;text-decoration:none}
.polje textarea{height:auto;min-height:140px;padding:10px 12px;line-height:1.45;resize:vertical}
.polje select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
.polje input:hover,.polje select:hover,.polje textarea:hover{border-color:var(--polje-okvir-h)}
.polje input:focus,.polje select:focus,.polje textarea:focus{outline:none;background-color:var(--polje-fokus-poz);border-color:var(--fokus-prsten);box-shadow:none}
.polje.greska input,.polje.greska select,.polje.greska textarea{border-color:var(--greska)}
.polje-greska{font-size:14px;color:var(--greska);margin-top:6px;line-height:1.35}
.polje-greska:empty{display:none}
.forma .dug{justify-self:start;margin-top:4px}
/* Zamka za botove - van ekrana, ne display:none (neki botovi preskaču skrivena polja) */
.zamka{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.podaci.uz-formu{align-content:start}

/* ---- Obavještenje (toast): dolje u sredini, pilula r12, 96% -> 100% ---- */
.toast{position:fixed;left:50%;bottom:24px;z-index:40;transform:translateX(-50%);max-width:560px;width:max-content;max-width:calc(100% - 32px);
 display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;font-size:16px;font-weight:500;color:#fff;
 box-shadow:0 6px 20px rgba(0,0,0,.18);animation:toast-ulaz .18s ease}
.toast.uspjeh{background:var(--uspjeh)}
.toast.greska{background:var(--greska)}
.toast.nestaje{opacity:0;transition:opacity .2s}
.toast-x{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:-8px}
.toast-x svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
.toast-x:hover{background:rgba(255,255,255,.15)}
@keyframes toast-ulaz{from{opacity:0;transform:translateX(-50%) scale(.96)}to{opacity:1;transform:translateX(-50%) scale(1)}}
@media (max-width:767px){.toast{left:16px;right:16px;width:auto;max-width:none;transform:none;animation-name:toast-ulaz-tel}}
@keyframes toast-ulaz-tel{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* ---- Lokacija ---- */
.lokacija h2{margin-bottom:24px}
.lok-grid,.lok-mala{display:grid;gap:20px}
.lok-mala{margin-top:24px}
.lok-info{display:flex;flex-direction:column;gap:18px}
.lok-info small,.blk small{display:block;font-size:14px;color:var(--siva);margin-bottom:4px}
.lok-info > b,.blk b{display:block;font-size:24px;letter-spacing:-.5px;font-weight:600;line-height:1.15}
.lok-info > span,.blk span{display:block;font-size:15px;color:var(--siva);margin-top:4px;line-height:1.4}
.lok-info > b + span{margin-top:-14px}
.blk .tel{display:block;font-size:22px;font-weight:500;letter-spacing:-.3px;line-height:1.35}
.blk .tel:hover{color:var(--akcija)}
.mapa{position:relative;border-radius:var(--r);overflow:hidden;background:#EEF1F4;height:280px}
.mapa img,.mapa iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.mapa-dug{position:absolute;bottom:14px;background:#fff;color:var(--akcija);border-radius:10px;padding:10px 14px;font-size:15px;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.mapa-dug:hover{background:var(--svpl)}
.mapa-otvori{right:14px}
.mapa-prikazi{left:14px;top:14px;bottom:auto}
.mapa.ucitana .mapa-prikazi{display:none}

/* ---- Dijalog "Kako do nas": desktop u sredini, telefon sheet sa dna ---- */
.dlg{border:0;padding:0;margin:auto;width:calc(100% - 32px);max-width:560px;max-height:calc(100% - 48px);border-radius:24px;background:var(--pozadina);color:var(--tekst);box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:auto}
.dlg::backdrop{background:rgba(20,20,20,.45)}
.dlg[open]{animation:dlg-ulaz .18s ease}
@keyframes dlg-ulaz{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.dlg-u{padding:22px 24px 24px}
.drsk{display:none;width:36px;height:4px;border-radius:2px;background:#d0d0d0;margin:0 auto 12px}
.dlg-zag{display:flex;align-items:center;gap:12px}
.dlg-zag h2{flex:1;font-size:30px;letter-spacing:-.8px;margin:0}
.dlg-adr{font-size:15px;color:var(--siva);margin:4px 0 14px}
.ulaz{display:flex;gap:12px;align-items:center;background:var(--svpl);border-radius:16px;padding:10px;margin-bottom:8px}
.ulaz img{width:84px;height:84px;object-fit:cover;object-position:center 8%;border-radius:12px;flex:none}
.ulaz div{font-size:14px;line-height:1.35;color:var(--tekst-3)}
.ulaz div b{display:block;font-size:16px;color:var(--duboka);margin-bottom:2px}
.put{list-style:none}
.put li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--linija)}
.put li:first-child{border-top:0}
.put .br{width:32px;height:32px;border-radius:50%;background:var(--ik-poz);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none}
.put b{display:block;font-size:17px;font-weight:600;letter-spacing:-.2px}
.put li span:not(.br){display:block;font-size:15px;color:var(--tekst-3);line-height:1.35;margin-top:2px}
.dlg-dno{display:flex;gap:8px;margin-top:10px}
.dlg-dno .dug{flex:1;justify-content:space-between}
.dlg-dno .dug b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
html.dlg-otvoren,html.dlg-otvoren body{overflow:hidden}
@media (max-width:767px){
 .dlg{margin:auto 0 0;width:100%;max-width:100%;max-height:92%;border-radius:24px 24px 0 0}
 .dlg[open]{animation:sheet-ulaz .22s cubic-bezier(.2,.7,.2,1)}
 .drsk{display:block}
 .dlg-u{padding:10px 16px 18px}
 .dlg-zag h2{font-size:28px}
}
@keyframes sheet-ulaz{from{opacity:.6;transform:translateY(40px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dlg[open],.toast{animation:none}}
@media (min-width:992px){
 .kon-dug{justify-self:end;align-items:stretch}
 .forma{padding:36px}
 .lok-grid{grid-template-columns:400px 1fr;gap:32px}
 .lok-mala{grid-template-columns:1fr 1.2fr;gap:32px;align-items:center}
 .kontakt-grid{grid-template-columns:1.25fr 1fr;gap:40px}
 .podaci.uz-formu{grid-template-columns:1fr;align-content:start}
 .mapa{height:470px}
 .mapa.mala{height:340px}
}

/* =====================================================================
   ZADANI IZGLED (12.10.2026, korisnik): siva podloga strane #F2F4F7 preko cijele širine;
   većina sekcija stoji direktno na sivoj. Samo 1-2 glavne sekcije po strani imaju klasu .traka-bijela =
   bijela traka od ivice do ivice ekrana (bez zaobljenja, sadržaj u .w) - klasa se lako premješta.
   Pločice/kartice na sivoj su bijele; na bijeloj traci svijetle (#F2F4F7, godine #E6F1FA).
   Tamnoplava sekcija i plava traka kontakta su preko cijele širine. Zaglavlje i meni bijeli.
   Traka preko cijele širine bez izmjene HTML-a: box-shadow 100vmax iste boje + clip-path (samo bočno).
   ===================================================================== */
:root{--podloga-strane:#F2F4F7;--blok-poz:#fff;--kartica-poz:#F2F4F7}
body{background:var(--podloga-strane)}
.zag{background:var(--pozadina)}

/* bijela traka */
main > .w > .traka-bijela{background:var(--blok-poz);box-shadow:0 0 0 100vmax var(--blok-poz);clip-path:inset(0 -100vmax);padding-top:40px;padding-bottom:40px}

/* pločice: na sivoj bijele, na bijeloj traci svijetle */
.kt,.blok,.podatak,.forma,.bk{background:var(--blok-poz)}
.traka-bijela .kt,.traka-bijela .blok,.traka-bijela .podatak,.traka-bijela .forma{background:var(--kartica-poz)}
.traka-bijela .bk{background:var(--bk-poz)}
.pk{background:var(--blok-poz)}
.forma .polje input,.forma .polje select,.forma .polje textarea{background-color:var(--blok-poz)}
.forma .polje input:focus,.forma .polje select:focus,.forma .polje textarea:focus{background-color:var(--polje-fokus-poz)}

/* tamnoplava sekcija i plava traka kontakta - preko cijele širine, bez zaobljenja */
.tam,.tam.cijela{border-radius:0;margin:0}
main > .w > section.bez-bloka{background:var(--kon-poz);box-shadow:0 0 0 100vmax var(--kon-poz);clip-path:inset(0 -100vmax);padding-top:0;padding-bottom:0;margin-top:24px}
.bez-bloka .kon{border-radius:0;padding-left:0;padding-right:0}
.futer{margin-top:0;border-top:0}
@media (min-width:992px){
 main > .w > .traka-bijela{padding-top:56px;padding-bottom:56px}
 .bez-bloka .kon{padding-top:36px;padding-bottom:36px}
}/* "Napravljeno za" na sivoj podlozi (naslovna): redovi kao bijele kartice */
main .za:not(.traka-bijela) .red{background:var(--blok-poz);border-radius:16px;padding:16px;border-top:0;margin-bottom:10px}
main .za:not(.traka-bijela) .red:last-child{margin-bottom:0}/* dvije bijele trake jedna ispod druge - sivi razmak da se ne spoje */
main > .w > .traka-bijela + .traka-bijela{margin-top:14px}

/* ---- Kartica adrese sa dugmetom "Kako do nas" desno (O nama); telefon: dugme ispod, cijelom širinom ---- */
.adresa-kdn{flex-wrap:wrap;align-items:center}
.adresa-kdn .pod-tekst{flex:1;min-width:0}
.adresa-kdn > .dug{width:100%;justify-content:space-between}
@media (min-width:768px){ .adresa-kdn > .dug{width:auto} }
/* Crtež lokacije u dijalogu "Kako do nas"; Google mapa se učita na isto mjesto */
.mapa.u-dlg{height:240px;margin-bottom:12px;border-radius:16px}
.dlg-dno .dug[hidden]{display:none}
/* Godine ispod bijelog hero bloka: isti razmak od bijelog bloka kao ostale sekcije (ranije 8 px - lijepilo se) */
.brojke{margin-top:40px}
@media (min-width:992px){ .brojke{margin-top:56px} }
/* Kontakt: kartica "Želite sastanak sa našim CEO?" - tekst lijevo, dugme desno (telefon: dugme ispod, cijela širina) */
.podatak.ceo{flex-wrap:wrap;align-items:center}
.podatak.ceo .pod-tekst{flex:1;min-width:0}
.podatak.ceo strong{font-size:20px}
.podatak.ceo > .dug{width:100%;justify-content:space-between}
@media (min-width:768px){ .podatak.ceo > .dug{width:auto} }
/* Dijalog CEO: mejl i telefon jedno ispod drugog */
.ceo-podaci{grid-template-columns:1fr !important;margin-bottom:6px}
/* Kartice softvera (Cijene, tamna sekcija naslovne): dugme uvijek na dnu kartice, poravnato u istoj liniji u svim karticama reda */
.pk{display:flex;flex-direction:column}
.pk > .dug{margin-top:auto;align-self:flex-start}
.pk ul{margin-bottom:24px}
/* ---- Cijene: paketi fiskalizacije (Standard / Maxi / Individual) - kartice na bijeloj traci, dugme uvijek na dnu ---- */
.paketi{display:grid;gap:12px}
.paket{position:relative;display:flex;flex-direction:column;background:var(--kartica-poz);border-radius:var(--r);padding:26px 24px;border:2px solid transparent}
.paket.istaknut{border-color:var(--akcija)}
.pak-oznaka{position:absolute;top:-13px;left:24px;background:var(--akcija);color:#fff;font-size:13px;font-weight:600;border-radius:999px;padding:4px 12px}
.paket .naz{font-size:28px;letter-spacing:-.8px;font-weight:600;line-height:1.04}
.paket .cij{font-size:48px;letter-spacing:-2px;font-weight:700;margin-top:16px;line-height:1;color:var(--duboka)}
.paket .mj{font-size:16px;color:var(--siva);margin-top:8px}
.paket .op{font-size:16px;line-height:1.45;margin:16px 0 24px;color:var(--tekst-3)}
.paket > .dug{margin-top:auto;align-self:flex-start}
.pak-pdv{font-size:14px;color:var(--siva);margin-top:14px}
.tam-naslov{margin-bottom:28px}
@media (min-width:768px){ .paketi{grid-template-columns:repeat(3,1fr)} .uz-pakete{grid-template-columns:repeat(3,1fr)} }
/* Cjenovnik: onoliko kolona koliko ima kartica (3 na Cijenama, 4 na naslovnoj) */
@media (min-width:1200px){ .cjenovnik{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)} }
/* PRAVILO (korisnik 12.10.2026): prvi blok gore na svakoj strani je bijel - zaglavlje strane (.str-zag) uvijek ima i .traka-bijela
   (naslovna: .hero). Ako je i sljedeća sekcija bijela, između ostaje sivi razmak 14 px (.traka-bijela + .traka-bijela). */
/* O nama (korisnik 12.10.2026): "Naš prostor" kao zaobljeni bijeli blok na sivoj (ne traka preko cijele širine), slike bez zaobljenja;
   kartica adrese u bloku svijetla da se odvoji od bijelog */
main > .w > section.blok-bijeli{background:var(--blok-poz);border-radius:var(--r);padding:28px 20px;margin:12px 0}
.blok-bijeli .foto div{border-radius:0}
.blok-bijeli .podatak{background:var(--kartica-poz)}
@media (min-width:992px){ main > .w > section.blok-bijeli{padding:48px 44px} }
/* Plava traka kontakta (.bez-bloka) iznad obojenog futera (teme metal / korporativna): na širokom ekranu desno i lijevo od sadržaja
   ostajala je svijetla linija od 1 px (zaokruživanje visine trake) - futer se podvlači 1 px pod traku */
main + .futer,.futer{position:relative}
body.tema-metal .futer,body.tema-korporativna .futer{margin-top:-1px}
/* Plava traka kontakta: pri uvećanju ekrana (125 %, 150 %) granica trake pada na dio piksela, pa je lijevo i desno od sadržaja
   provirivala svijetla linija podloge. Traka se proširuje 3 px gore i dolje (sjenka), a futer (position:relative) je prekriva. */
main > .w > section.bez-bloka{clip-path:inset(-3px -100vmax)}
.paket .cij small{font-size:22px;letter-spacing:0;font-weight:500;color:var(--siva);margin-left:4px}
/* ---- Citati klijenata (naslovna): bijele kartice na sivoj, navodnik krupno plavo, inicijali u krugu; 1 / 2 / 4 kolone ---- */
.citati{display:grid;gap:12px}
.citat{position:relative;margin:0;background:var(--blok-poz);border-radius:var(--r);padding:28px 24px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.citat blockquote{margin:0;font-size:18px;line-height:1.45;color:var(--tekst-2)}
.citat figcaption{display:flex;align-items:center;gap:12px}
.cit-in{width:44px;height:44px;border-radius:50%;background:var(--svpl);color:var(--duboka);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none}
.citat figcaption b{display:block;font-size:16px;font-weight:600}
.citat figcaption span span{display:block;font-size:14px;color:var(--siva)}
.cit-primjer{position:absolute;top:12px;right:12px;font-size:12px;font-weight:600;color:#8A5A00;background:#FFF4D6;border-radius:999px;padding:3px 10px}
@media (min-width:768px){ .citati{grid-template-columns:1fr 1fr} }
@media (min-width:1200px){ .citati{grid-template-columns:repeat(4,1fr)} }
.citat:has(.cit-primjer){padding-top:44px} /* oznaka "Primjer" ne preklapa tekst */
/* ---- Poziv na akciju (12.10.2026) ---- */
/* ispod glavnog dugmeta: uklanja strah od obaveze */
.cta-umirenje{font-size:14px;color:var(--siva);margin-top:12px}
/* ponovljen poziv poslije citata: bijela kartica, tekst lijevo, dugme desno */
.cta-ponovo{display:grid;gap:16px;align-items:center;background:var(--blok-poz);border-radius:var(--r);padding:28px 24px;margin:12px 0 24px}
.cta-ponovo h2{font-size:32px;margin:0 0 6px}
.cta-ponovo p{font-size:15px;color:var(--siva)}
.cta-ponovo .dug{justify-self:start}
@media (min-width:768px){ .cta-ponovo{grid-template-columns:1fr auto;padding:36px 40px} .cta-ponovo .dug{justify-self:end} }
/* brzi upit: forma od 3 polja u dijalogu */
.bu-forma{display:grid;gap:4px;margin-top:6px}
.bu-forma .bu-posalji{width:100%;justify-content:space-between;margin-top:6px}
.bu-paket{display:inline-block;background:var(--svpl);color:var(--duboka);font-weight:600;border-radius:999px;padding:2px 10px;margin-right:8px}
.bu-paket[hidden]{display:none}
/* Paketi na sivoj podlozi (korisnik 12.10.2026) - kartice bijele */
.paket{background:var(--blok-poz)}
/* "Navigacija do nas" i "Kako do nas": jedno ispod drugog, iste širine (širina dužeg dugmeta), strelica desno */
.cta.lok-dug{display:inline-grid;grid-template-columns:minmax(0,max-content);gap:10px;align-self:flex-start;justify-self:start}
.cta.lok-dug .dug{width:100%;justify-content:space-between}
/* Tamna sekcija odmah iznad plave trake kontakta (Cijene): bez sivog razmaka - blokovi spojeni (korisnik 12.10.2026) */
.tam + .w > section.bez-bloka:first-child{margin-top:0}
/* Dvije sekcije na sivoj jedna ispod druge: tanka linija širine sadržaja između njih (korisnik 12.10.2026).
   Ne ide uz bijele trake, bijele blokove, plavu traku ni karticu poziva - oni se već odvajaju sami. */
main > .w > section:not(.traka-bijela):not(.blok-bijeli):not(.bez-bloka):not(.cta-ponovo) + section:not(.traka-bijela):not(.blok-bijeli):not(.bez-bloka):not(.cta-ponovo){border-top:1px solid #DCE3EA}
/* Plava traka kontakta (desktop): naslov, "Prodaja · Podrška" i gornje dugme poravnati po vrhu (korisnik 12.10.2026);
   dva dugmeta iste širine, strelice u istoj liniji */
@media (min-width:992px){
 .kon{align-items:start}
 .kon .t{margin-top:2px}
 .kon-dug{display:inline-grid;grid-template-columns:minmax(0,max-content);gap:10px;justify-self:end}
 .kon-dug .dug{width:100%;justify-content:space-between;justify-self:stretch}
}
/* Uslov uz cijenu paketa ("uz kupovinu EasyFiscal uređaja · 40 % popusta") - zelena pilula, odmah ispod iznosa */
.pak-uslov{display:inline-block;align-self:flex-start;margin-top:10px;background:#E6F4EA;color:#1E7A3A;font-size:13.5px;font-weight:600;border-radius:999px;padding:4px 12px}
/* Naslovna: "Već ste naš klijent? Podrška" - manje dugme ispod glavnih, vodi na podrska.primatech.me (tiketi) */
.podrska-red{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:18px;font-size:15px;color:var(--siva)}
.dug.podrska-dug{height:38px;font-size:15px;background:var(--pozadina);color:var(--duboka);box-shadow:inset 0 0 0 1.5px #C9D3DD}
.dug.podrska-dug span{padding:0 14px}
.dug.podrska-dug b{width:38px;border-left-color:#C9D3DD}
.dug.podrska-dug:hover{color:var(--akcija);box-shadow:inset 0 0 0 1.5px var(--akcija)}
/* ---- Kartice "Zašto firme ostaju kod nas": cijela kartica je dugme, otvara dijalog sa više podataka ---- */
.kt-klik{font:inherit;color:inherit;text-align:left;border:0;cursor:pointer;width:100%;transition:box-shadow .15s,transform .15s}
.kt-klik:hover{box-shadow:0 0 0 1.5px var(--akcija)}
.kt-klik:focus-visible{outline:2px solid var(--akcija);outline-offset:2px}
.kt-klik .kt-vise{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:15px;font-weight:600;color:var(--akcija)}
.kt-klik:hover .kt-vise b{transform:translateX(3px)}
.kt-vise b{transition:transform .15s;font-weight:400}
.dlg-lista{margin:6px 0 8px}
.dlg-lista li{font-size:17px;line-height:1.35}
@media (min-width:768px){ .dlg.dlg-siri{max-width:720px} }

/* ---- Mapa od pločica: fiskalizacija u 10 zemalja (kolona k1-k5, red r1-r4; CSP ne dozvoljava style="") ---- */
.zemlje{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:64px;gap:6px;margin:14px 0 6px}
.zm{background:var(--svpl);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.zm b{font-size:16px;color:var(--duboka);letter-spacing:-.2px}
.zm span{font-size:11.5px;line-height:1.15;color:var(--tekst-3);overflow:hidden;text-overflow:ellipsis}
.zm.dom{background:var(--akcija)}
.zm.dom b,.zm.dom span{color:#fff}
.zm.k1{grid-column:1}.zm.k2{grid-column:2}.zm.k3{grid-column:3}.zm.k4{grid-column:4}.zm.k5{grid-column:5}
.zm.r1{grid-row:1}.zm.r2{grid-row:2}.zm.r3{grid-row:3}.zm.r4{grid-row:4}
.zemlje-nap{font-size:13px;color:var(--siva);margin-bottom:6px}
@media (max-width:480px){ .zemlje{grid-auto-rows:54px;gap:4px} .zm{padding:6px} .zm span{display:none} }

/* ---- "Pridružite se": koraci prelaska (1-4) ---- */
.koraci{list-style:none;display:grid;gap:12px;margin:14px 0 0;padding:0}
.koraci li{display:flex;gap:12px;align-items:flex-start}
.koraci .br{width:30px;height:30px;border-radius:50%;background:var(--svpl);color:var(--duboka);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none}
.koraci b{display:block;font-size:16px;font-weight:600}
.koraci li span:not(.br){display:block;font-size:14.5px;color:var(--siva);margin-top:2px}
@media (min-width:992px){ .koraci{grid-template-columns:repeat(4,1fr);gap:18px} .cta-ponovo{align-items:end} }
/* ---- Uslužni softver: kartice kao "Zašto" (2 kolone), oznaka "Gratis", video 16:9 u dijalogu (tek na klik) ---- */
@media (min-width:768px){ .usl-kart{grid-template-columns:repeat(2,1fr)} }
.kt-klik{position:relative}
.kt-oznaka{position:absolute;top:14px;right:14px;background:#E6F4EA;color:#1E7A3A;font-size:13px;font-weight:700;border-radius:999px;padding:3px 10px}
.video{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,var(--duboka),#0B5C8F);margin:6px 0 12px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-pusti{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:0;background:transparent;color:#fff;font:inherit;font-size:17px;font-weight:600;cursor:pointer}
.vp-krug{width:68px;height:68px;border-radius:50%;background:#fff;color:var(--duboka);display:flex;align-items:center;justify-content:center;font-size:24px;padding-left:4px;transition:transform .15s}
.video-pusti:hover .vp-krug{transform:scale(1.06)}
.video-yt{position:absolute;right:12px;bottom:10px;font-size:13px;color:rgba(255,255,255,.85)}
.video-yt:hover{color:#fff}
.video.ucitan .video-pusti,.video.ucitan .video-yt{display:none}
@media (min-width:1200px){ .usl-kart{grid-template-columns:repeat(3,1fr)} }
/* "Pridružite se": dva dugmeta jedno ispod drugog, iste širine - Počnite (glavno) i Kontaktirajte nas */
.cta-dugmad{display:inline-grid;grid-template-columns:minmax(0,max-content);gap:10px;justify-self:start}
.cta-dugmad .dug{width:100%;justify-content:space-between}
@media (min-width:768px){ .cta-dugmad{justify-self:end} }
/* Video u dijalogu bez zaobljenja (korisnik 12.10.2026) */
.video{border-radius:0}
/* Oznaka "Gratis": dolje desno, u liniji sa "Više i video" (korisnik 12.10.2026) - ne preklapa tekst opisa */
.kt-oznaka{top:auto;bottom:25px;right:24px}
/* ---- Naslovna: ekrani softvera - WebFiscal u okviru pregledača + dva telefona (iOS, Android) ---- */
.ekrani-grid{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.ekrani figure{margin:0}
.ekran-web{grid-column:1 / -1;background:var(--blok-poz);border-radius:var(--r);overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.06)}
.okvir-web{display:flex;gap:6px;padding:10px 14px;background:#E9EDF2}
.okvir-web span{width:10px;height:10px;border-radius:50%;background:#C9D1DA}
.ekran-web img{display:block;width:100%;height:auto}
.ekran-web figcaption{padding:14px 18px;font-size:15px;color:var(--siva)}
.ekrani figcaption b{color:var(--tekst);font-weight:600;margin-right:6px}
.ekran-tel{display:flex;flex-direction:column;align-items:center;gap:12px}
.ekran-tel img{display:block;width:100%;max-width:260px;height:auto;border-radius:28px;border:6px solid #1C1C1E;background:#1C1C1E;box-shadow:0 8px 24px rgba(16,24,40,.12)}
.ekran-tel figcaption{font-size:14px;color:var(--siva);text-align:center}
@media (min-width:992px){
 .ekrani-grid{grid-template-columns:1fr 230px 230px;align-items:end;gap:24px}
 .ekran-web{grid-column:auto}
}
/* Telefoni iste visine (iOS 520x1131 i Android 480x960 imaju različit odnos) - visina zadata, širina prati sliku;
   natpis: naziv u prvom redu, dodatak ispod */
.ekran-tel img{width:auto;max-width:100%;height:360px;object-fit:contain}
.ekran-tel figcaption b{display:block;margin:0}
@media (min-width:992px){
 .ekrani-grid{grid-template-columns:1fr auto auto}
 .ekran-tel img{height:470px}
}
/* natpisi telefona iste visine (Android ima i drugi red) - telefoni poravnati i gore i dolje */
.ekran-tel figcaption{min-height:38px}
/* ---- Strana /metrika: grafikon broja firmi (SVG sa servera) i platforma u brojevima ---- */
.graf{margin:0;background:var(--blok-poz);border-radius:var(--r);padding:20px 16px 18px}
.graf-svg{display:block;width:100%;height:auto;font-family:inherit}
.g-mreza{stroke:#E3E8EE;stroke-width:1}
.g-osnova{stroke:#B8C2CC;stroke-width:1}
.g-osa{font-size:12px;fill:var(--siva)}
.g-traka{fill:var(--akcija);transition:fill .15s}
.g-tekuca .g-traka{fill:#7CC8EE}
.g-meta{fill:transparent}
.g-stub:hover .g-traka{fill:var(--duboka)}
.g-vr{font-size:15px;font-weight:700;fill:var(--tekst)}
.g-god{font-size:14px;font-weight:600;fill:var(--tekst)}
.g-nov{font-size:12.5px;fill:#1E7A3A}
.graf figcaption{font-size:14px;color:var(--siva);margin-top:10px;line-height:1.45}
.graf figcaption span{display:block;font-size:13px}
.graf-tabela{margin-top:12px;font-size:15px}
.graf-tabela summary{cursor:pointer;color:var(--akcija);font-weight:600}
.graf-tabela table{border-collapse:collapse;margin-top:10px;width:100%;max-width:520px}
.graf-tabela th,.graf-tabela td{text-align:right;padding:6px 10px;border-bottom:1px solid var(--linija)}
.graf-tabela th:first-child,.graf-tabela td:first-child{text-align:left}
.metrika-brojke{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.mb{background:var(--blok-poz);border-radius:var(--r);padding:20px 20px 18px}
.mb b{display:block;font-size:28px;letter-spacing:-.6px;color:var(--duboka);line-height:1.1}
.mb span{display:block;font-size:14.5px;color:var(--siva);margin-top:6px;line-height:1.35}
@media (min-width:992px){ .metrika-brojke{grid-template-columns:repeat(3,1fr)} .graf{padding:28px 28px 22px} }
/* 15 godina firme: oznaka popusta na kartici 2011 (naslovna) i u vremenskoj liniji (O nama); nestaje sama poslije 13. 12. 2026. */
.promo15{display:inline-block;margin-top:10px;background:#E6F4EA;color:#1E7A3A;font-size:13px;font-weight:700;border-radius:999px;padding:4px 10px;white-space:nowrap}
.promo15-op{display:block;font-size:13px;line-height:1.35;color:var(--siva);margin-top:6px}
.bk-promo{box-shadow:inset 0 0 0 1.5px #9FD3AE}
.promo15-tl{margin-top:8px !important;font-size:14px !important}
.promo15-tl .promo15{margin:0 6px 4px 0}
.bk .promo15{align-self:flex-start;width:auto}
.promo15-tl .promo15{display:table;margin:0 0 6px}
.bk span.promo15{display:inline-block}
/* Rođendanski paket (15 godina): istaknuti okvir - zlatna ivica i svijetla podloga, oznaka ispred teksta, dugme desno */
.promo15-okvir{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:20px 0 0;padding:18px 20px;border-radius:var(--r);background:linear-gradient(90deg,#FFF8E6,#FFFDF6);box-shadow:inset 0 0 0 2px #F2C14E}
.promo15-oznaka{flex:none;background:#B7791F;color:#fff;font-size:13.5px;font-weight:700;letter-spacing:.2px;border-radius:999px;padding:6px 12px}
.promo15-okvir p{flex:1 1 320px;margin:0;font-size:17px;font-weight:600;line-height:1.35;color:var(--tekst)}
.promo15-okvir .dug{flex:none}
/* ---- Kartice "Zašto": slika gore (~60 %), ispod naslov, tekst i "Više" (korisnik 12.10.2026) ---- */
.kt.kt-sl{padding:0;overflow:hidden;justify-content:flex-start}
.kt-media{display:block;aspect-ratio:8/5;background:#fff;border-bottom:1px solid #EEF1F4;overflow:hidden;position:relative}
.kt-media img{display:block;width:100%;height:100%;object-fit:contain}
.kt-media.pokrij img{object-fit:cover}
.kt-tekst{display:flex;flex-direction:column;padding:18px 22px 20px;flex:1}
.kt-sl h3{font-size:24px;margin:0 0 8px}
.kt-sl p{margin:0 0 4px;font-size:15.5px}
.kt-sl .kt-vise{margin-top:auto;padding-top:12px}
/* mapa zemalja u kartici - manje pločice, bez napomene */
.kt-media .zemlje{position:absolute;inset:14px 18px;margin:0;grid-auto-rows:1fr;gap:4px}
.kt-media .zm{padding:4px 6px;border-radius:8px}
.kt-media .zm b{font-size:13px}
.kt-media .zm span{display:none}
.kt-media .zemlje-nap{display:none}
/* tok knjigovodstva: QR -> API -> proknjiženo */
.tok{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:16px;background:linear-gradient(135deg,#E6F1FA,#F7FBFE)}
.tok-k{display:flex;flex-direction:column;align-items:center;justify-content:center;width:84px;height:84px;border-radius:18px;background:#fff;box-shadow:0 2px 8px rgba(16,24,40,.08)}
.tok-k b{font-size:22px;color:var(--duboka);font-style:normal}
.tok-k i{font-style:normal;font-size:11.5px;color:var(--siva);text-align:center;line-height:1.15;margin-top:2px}
.tok-ok{background:var(--akcija)}
.tok-ok b,.tok-ok i{color:#fff}
.tok-s{font-size:22px;color:var(--akcija)}
.tok-10{flex-basis:100%;text-align:center;font-weight:700;color:var(--duboka);font-size:15px}
/* Rođendanski paket kao dugme (iste dimenzije kao "Najavite dolazak"), zlatno, desno kutija poklona; nije klikabilno */
.dug.promo15-oznaka{background:#B7791F;color:#fff;cursor:default;padding:0;font-size:inherit;border-radius:var(--dug-r,10px);letter-spacing:0}
.dug.promo15-oznaka b{border-left:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center}
.dug.promo15-oznaka:hover{background:#B7791F;color:#fff}
.dug.promo15-oznaka{font-size:19px;font-weight:600}
.dug.promo15-oznaka b svg{width:24px;height:24px}
/* Slike kartica na istoj svijetloplavoj podlozi kao tok automatizacije (umjesto bijele) */
.kt-media{background:linear-gradient(135deg,#E6F1FA,#F7FBFE)}
.kt-media .zm{background:#fff}
.kt-media .zm.dom{background:var(--akcija)}
/* Otvoren dijalog zaključava listanje pozadine; mjesto za traku za listanje ostaje rezervisano, pa strana iza prozora ne "skoči" za širinu trake */
html{scrollbar-gutter:stable}
/* Kartica Kapacitet: tri velike brojke na istoj podlozi kao tok automatizacije (bez grafikona po godinama) */
.kap{flex-direction:column;gap:10px;align-items:stretch;padding:22px 34px}
.kap-b{display:flex;align-items:baseline;justify-content:space-between;gap:12px;background:#fff;border-radius:14px;padding:12px 18px;box-shadow:0 2px 8px rgba(16,24,40,.06)}
.kap-b b{font-size:24px;letter-spacing:-.5px;color:var(--duboka)}
.kap-b i{font-style:normal;font-size:14px;color:var(--siva)}
.kap-ist{background:var(--akcija)}
.kap-ist b,.kap-ist i{color:#fff}
.tok.kap{flex-wrap:nowrap;justify-content:center;padding:18px 30px}
.kap-b{align-items:center}
.kap-b b{white-space:nowrap;font-size:22px}
.kap-b i{text-align:right;line-height:1.2}
/* Kartica Kapacitet: dvije brojke, opisi poravnati po istoj lijevoj vertikali (kolona brojke iste širine) */
.kap-b{display:grid;grid-template-columns:11.5em 1fr;align-items:center;gap:14px}
.kap-b i{text-align:left}
/* Hero: dva dugmeta iste širine - telefon cijelom širinom jedno ispod drugog (palac, lako se pogađa),
   od 768 px jedno pored drugog, oba širine dužeg; strelice u istoj liniji */
.hero .cta{display:grid;grid-template-columns:1fr;gap:10px}
.hero .cta .dug{width:100%;justify-content:space-between}
@media (min-width:768px){ .hero .cta{display:inline-grid;grid-template-columns:1fr 1fr} }
/* ---- Izbor jezika u headeru: zastava + oznaka, lista na klik (details, bez JS); jezici bez prevoda "uskoro" ---- */
.jezik{position:relative;margin-right:8px}
.jezik summary{list-style:none;display:flex;align-items:center;gap:6px;height:40px;padding:0 10px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;color:var(--tekst)}
.jezik summary::-webkit-details-marker{display:none}
.jezik summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:-3px 0 0 2px}
.jezik summary:hover{background:var(--svijetla)}
.jezik img{display:block;width:22px;height:16px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.08);object-fit:cover}
.jezik ul{list-style:none;position:absolute;right:0;top:46px;min-width:200px;margin:0;padding:6px;background:var(--pozadina);border-radius:12px;box-shadow:0 8px 24px rgba(16,24,40,.14),0 0 0 1px rgba(16,24,40,.06);z-index:30}
.jezik li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:15px}
.jezik li span{flex:1}
.jezik li.akt{font-weight:600}
.jezik li.akt b{color:var(--akcija)}
.jezik li.usk{color:var(--siva)}
.jezik li.usk img{opacity:.75}
.jezik li i{font-style:normal;font-size:12px;background:var(--svijetla);border-radius:999px;padding:2px 8px}
body.tema-metal .jezik summary{color:var(--metal-tekst)}
body.tema-metal .jezik summary:hover{background:rgba(255,255,255,.1)}
@media (max-width:480px){ .jezik summary span{display:none} }
/* mapa u kartici: natpis "10 zemalja" dolje lijevo (prazan dio mape) */
.kt-mapa-nap{position:absolute;left:22px;bottom:16px;font-size:17px;font-weight:600;color:var(--duboka);line-height:1}
.kt-mapa-nap b{display:block;font-size:44px;letter-spacing:-1.5px;color:var(--akcija)}
.jezik li a{display:flex;align-items:center;gap:10px;flex:1;color:inherit}
.jezik li:has(a):hover{background:var(--svijetla)}
/* Ponuda jezika po pregledaču: tanka traka ispod headera, zastava + poruka + dugme + zatvori */
.ponuda-jezika{background:var(--svpl);border-bottom:1px solid #D6E6F4}
.ponuda-jezika .w{display:flex;align-items:center;gap:12px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.ponuda-jezika img{width:22px;height:16px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.ponuda-jezika span{flex:1;min-width:180px;font-size:15px;color:var(--tekst)}
.ponuda-jezika .dug{height:38px;font-size:15px}
.ponuda-jezika .dug span{flex:none;min-width:0;color:inherit;padding:0 14px}
.ponuda-jezika .dug b{width:38px}
.ponuda-jezika .kv{background:transparent}
/* Telefon (korisnik 12.10.2026): oba dugmeta heroja u istom redu, pola-pola; kratki tekst ("Od 8,33 €/mj", "Podrška") */
@media (max-width:767px){
 .hero .cta{grid-template-columns:1fr 1fr;gap:8px}
 .hero .cta .dug{font-size:17px;height:50px}
 .hero .cta .dug span{padding:0 12px}
 .hero .cta .dug b{width:40px}
}
/* Telefon: header je bio pretijesan (dugme "Pozovi" odsječeno) - izbor jezika samo zastava, bez strelice i okvira */
@media (max-width:480px){
 .jezik{margin-right:2px}
 .jezik summary{padding:0 6px;gap:0}
 .jezik summary::after{display:none}
 .jezik ul{right:-60px}
}
/* Telefon: dugme "Pozovi" u headeru bez polja sa strelicom, da stane cijelo pored zastave i prijave */
@media (max-width:480px){ .zag .dug b{display:none} .zag .dug span{padding:0 14px} .zag .hd{gap:8px} }
/* Telefon: bez uvodnog teksta u heroju ("Fiskalizacija, kasa...") - više se vidi fotografija (korisnik 12.10.2026) */
@media (max-width:767px){ .hero .lead{display:none} }
/* hero bez reda ispod naslova (korisnik 19.10.2026): razmak naslov - dugmad kao ranije sa redom */
@media (min-width:768px){ .hero h1 + .cta{margin-top:28px} }
@media (max-width:767px){ .hero .cta{margin-top:24px} }
/* Kartice sa slikom: tanka ivica oko cijele kartice - svijetloplava slika se inače stapa sa sivom podlogom, pa se ne vidi gdje blok počinje */
.kt.kt-sl{box-shadow:inset 0 0 0 1px #D6DEE7}
.kt.kt-sl .kt-media{border-bottom:1px solid #D6DEE7}
.kt.kt-sl:hover{box-shadow:inset 0 0 0 1.5px var(--akcija)}
/* Izbor jezika bez strelice (korisnik 12.10.2026) - zastava i oznaka su dovoljne */
.jezik summary::after{display:none}
/* Ivica kartice sa slikom preko cijelog bloka: slika gore je prekrivala unutrašnju sjenku, pa se ivica vidjela samo dolje -
   ivica je sada sloj iznad slike (::after), zaobljen kao kartica, ne smeta kliku */
.kt.kt-sl{box-shadow:none}
.kt.kt-sl::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #D6DEE7;pointer-events:none;z-index:2;transition:box-shadow .15s}
.kt.kt-sl:hover{box-shadow:none}
.kt.kt-sl:hover::after{box-shadow:inset 0 0 0 1.5px var(--akcija)}
/* Izbor jezika u headeru: samo tekst (MNE), bez zastave - i na telefonu (korisnik 12.10.2026); zastave ostaju u listi */
.jezik summary img{display:none}
.jezik summary span{display:inline !important}
.jezik summary{padding:0 8px}
/* Kartice sa slikom: bez linije između slike i teksta (ivica ide samo oko cijelog bloka) */
.kt.kt-sl .kt-media{border-bottom:0}
/* Naš prostor (naslovna): separator linija između teksta i bloka adrese / mape, kao između sekcija */
.lok-mala{border-top:1px solid #DCE3EA;padding-top:28px}
/* Prozor Platforma: spisak podržanih zemalja sa zastavama (ispod mape) */
.zemlje-lista{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:6px 14px;margin:8px 0 6px;padding:0}
.zemlje-lista li{display:flex;align-items:center;gap:8px;font-size:15px}
.zemlje-lista img{width:22px;height:16px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.08);object-fit:cover;flex:none}
.kt-media .zemlje-lista{display:none}
@media (min-width:768px){ .zemlje-lista{grid-template-columns:repeat(3,1fr)} }
/* Strana Automatizacija */
@media (min-width:768px){ .auto-kart{grid-template-columns:repeat(3,1fr)} }
.auto-lista{max-width:760px}
@media (min-width:768px) and (max-width:1199px){ .auto-kart{grid-template-columns:repeat(2,1fr)} }
/* Napomena ispod dugmadi heroja samo na desktopu (korisnik 12.10.2026) */
@media (max-width:767px){ .hero .cta-umirenje{display:none} }
/* Telefon (korisnik 12.10.2026): razmaci u heroju upola manji - od vrha do 4.900+, ispod 4.900+ i od dugmadi do slike */
@media (max-width:767px){
 main > .w > .hero.traka-bijela{padding-top:20px}
 .hero .pov{margin-bottom:11px}
 .hero .slika{margin-top:16px}
}
/* Telefon: od naslova do dugmadi upola manje (24 -> 12 px) */
@media (max-width:767px){ .hero .cta{margin-top:12px} }
/* Telefon (korisnik 12.10.2026): izbor jezika u meniju, ne u headeru; dugme "Pozovite nas" kao na desktopu, sa strelicom */
.ms-jezici{display:none}
@media (max-width:991px){
 .zag .jezik{display:none}
 .ms-jezici{display:block}
 .ms-jezik-lista{list-style:none;margin:0;padding:0 0 8px;display:grid;grid-template-columns:1fr 1fr;gap:4px}
 .ms-jezik-lista li{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:10px;font-size:16px}
 .ms-jezik-lista li a{display:flex;align-items:center;gap:10px;color:inherit;flex:1}
 .ms-jezik-lista li span{flex:1}
 .ms-jezik-lista img{width:22px;height:16px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
 .ms-jezik-lista .akt{font-weight:600;background:var(--svpl)}
 .ms-jezik-lista .akt b{color:var(--akcija)}
 .ms-jezik-lista .usk{color:var(--siva)}
 .ms-jezik-lista .usk img{opacity:.7}
 .ms-jezik-lista i{font-style:normal;font-size:11px;background:var(--svijetla);border-radius:999px;padding:2px 7px}
}
@media (max-width:480px){ .zag .dug b{display:flex} .zag .dug span{padding:0 12px} .zag .dug{font-size:16px;height:42px} .zag .dug b{width:40px} }
/* Meni na telefonu: "Pozovite nas" i telefoni uvijek uz dno ekrana (zalijepljeno), sadržaj menija iznad se lista */
.meni-u{display:flex;flex-direction:column;min-height:100%;padding-bottom:0}
.meni-dno{margin-top:auto;position:sticky;bottom:0;background:var(--pozadina);padding:14px 0 calc(16px + env(safe-area-inset-bottom));box-shadow:0 -1px 0 var(--linija);z-index:2}
/* Meni: dno sa "Pozovite nas" ima isti bočni razmak kao ostatak menija, a pozadina ide do ivica */
.meni-dno{margin:auto -16px 0;padding-left:16px;padding-right:16px}
/* Futer: naslov kolone je dugme (na desktopu izgleda kao običan naslov, bez klika); sadržaj u .fk-t */
.fk-n{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--tekst);margin-bottom:6px;cursor:default;text-align:left}
.fk-n svg{display:none;width:18px;height:18px;transition:transform .18s ease}
.fk-t span{display:block}
@media (max-width:767px){
 .futer .kol{grid-template-columns:1fr;gap:0}
 .futer .kol > div:first-child{margin-bottom:12px}
 .fk{border-top:1px solid var(--linija)}
 .fk:last-child{border-bottom:1px solid var(--linija)}
 .fk-n{cursor:pointer;margin:0;padding:14px 0;font-size:16px}
 .fk-n svg{display:block}
 .fk-n[aria-expanded="true"] svg{transform:rotate(45deg)}
 .fk-t{display:none;padding:0 0 14px}
 .fk.otv .fk-t{display:block}
 body.tema-korporativna .fk,body.tema-metal .fk{border-color:rgba(255,255,255,.15)}
 body.tema-korporativna .fk-n,body.tema-metal .fk-n{color:#fff}
}
/* Dno menija bez dugmeta (Pozovite nas je u headeru) - telefoni i radno vrijeme */
.meni-dno .tels{margin-top:0}
/* Futer: ikona + u naslovu kolone na telefonu */
.fk-n svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex:none}
/* Dno menija poravnato sa sekcijama iznad (isti bočni razmak 16 px kao .ms) */
.meni .meni-dno{margin-left:0 !important;margin-right:0 !important;padding-left:0 !important;padding-right:0 !important}
/* Meni: uz naslov "Jezik" desno trenutni jezik (zastava + naziv), lista se otvara na + */
.ms-jezik-trenutni{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:17px;font-weight:500;color:var(--tekst-3)}
.ms-jezik-trenutni img{width:22px;height:16px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
/* ranije !important za dno menija više ne treba (bio višak </div>) - vraćeno: pozadina do ivica, sadržaj sa razmakom */
.meni .meni-dno{margin-left:-16px !important;margin-right:-16px !important;padding-left:16px !important;padding-right:16px !important}
/* Plava traka kontakta na telefonu: "Pozovite nas" i "Pišite nam" u istom redu, pola-pola, iste veličine */
@media (max-width:767px){
 .kon-dug{display:grid !important;grid-template-columns:1fr 1fr;gap:8px;width:100%}
 .kon-dug .dug{width:100%;justify-content:space-between;font-size:16px;height:48px}
 .kon-dug .dug span{padding:0 12px}
 .kon-dug .dug b{width:38px}
 .kon .t{overflow-wrap:anywhere}
}
/* Meni na telefonu otvoren dok strana nije na vrhu: overflow:hidden na body "lomi" sticky header (nestajao je) -
   dok je meni otvoren header je fiksiran gore, a meni počinje odmah ispod njega */
html.meni-otvoren .zag{position:fixed;top:0;left:0;right:0;z-index:20}
/* Telefon: "Navigacija" i "Kako do nas" u istom redu, pola-pola (kratki tekst prvog dugmeta) */
@media (max-width:767px){
 .cta.lok-dug{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
 .cta.lok-dug .dug{font-size:16px;height:48px}
 .cta.lok-dug .dug span{padding:0 12px}
 .cta.lok-dug .dug b{width:38px}
}
/* Tamni futer (korporativna, metal): naslovi kolona bijeli i na desktopu (naslov je sada dugme .fk-n, ne <b>) */
body.tema-korporativna .fk-n,body.tema-metal .fk-n{color:#fff}
/* Pravi Primatech logo (znak + riječ, PNG 295x50 - odnos 5,9:1): desktop 30 px visine, telefon 22 px (da stane uz Pozovite nas) */
.logo img{width:177px;height:30px}
.futer-logo img{width:142px;height:24px}
@media (max-width:767px){ .logo img{width:130px;height:22px} .zag .hd{gap:8px} }
@media (max-width:374px){ .logo img{width:112px;height:19px} }
/* Ime firme u heroju (iznad broja firmi) i "Primatech" ispred naziva proizvoda - brend se čita, ne samo vidi */
.hero-brend{font-size:15px;color:var(--siva);margin:0 0 10px;letter-spacing:.1px}
.hero-brend b{color:var(--akcija);font-weight:700;font-size:16px}
.brend{color:var(--akcija)}
.tam .brend{color:#5CC3F0}
.ekrani figcaption .brend{color:var(--akcija)}
@media (max-width:767px){ .hero-brend{margin-bottom:6px;font-size:14px} }
/* Telefon: veći logo (26 px visine); dugme u headeru malo kompaktnije da sve stane u red */
@media (max-width:767px){ .logo img{width:153px;height:26px} }
@media (max-width:480px){ .zag .dug{font-size:15px;height:40px} .zag .dug span{padding:0 10px} .zag .dug b{width:36px} .zag .hd{gap:6px} }
@media (max-width:374px){ .logo img{width:124px;height:21px} }
/* Logo veći (korisnik 12.10.2026): desktop 39 px (+30 %), telefon 29 px - koliko staje uz "Pozovite nas" na 390 px */
.logo img{width:230px;height:39px}
@media (max-width:991px){ .logo img{width:195px;height:33px} }
@media (max-width:767px){ .logo img{width:171px;height:29px} }
@media (max-width:480px){ .zag .dug{font-size:14px;height:38px} .zag .dug span{padding:0 8px} .zag .dug b{width:30px} .zag .hd{gap:6px} .meni-dugme{width:38px;height:38px} }
@media (max-width:374px){ .logo img{width:136px;height:23px} }
@media (max-width:480px){ .logo img{width:160px;height:27px} }
@media (max-width:374px){ .logo img{width:130px;height:22px} }
/* Telefon: skraćeni logo (samo riječ primatech, 209x44 = 4,75:1) - veći jer nema kruga */
.logo picture{display:block}
@media (max-width:767px){ .logo img{width:162px;height:34px} }
@media (max-width:480px){ .logo img{width:152px;height:32px} }
@media (max-width:374px){ .logo img{width:124px;height:26px} }
/* Logo samo riječ (bez kruga) svuda: desktop 40 px, tablet 34 px, telefon 32 px; futer 26 px.
   15.10.2026: SVG iz "Logo prima.pdf" (odnos 4,95:1) - širina se računa iz visine */
.logo img{width:auto;height:40px}
.futer-logo img{width:auto;height:26px}
@media (max-width:991px){ .logo img{width:auto;height:34px} }
@media (max-width:480px){ .logo img{width:auto;height:32px} }
@media (max-width:374px){ .logo img{width:auto;height:26px} }
/* Ponuda jezika na telefonu: X gore desno u uglu trake (ne uz dugme) */
@media (max-width:767px){
 .ponuda-jezika .w{position:relative;padding-right:52px}
 .ponuda-jezika .kv{position:absolute;top:6px;right:8px}
}
/* Ponuda jezika: dugme providno (sporedna akcija - ne takmiči se sa "Pozovite nas"); desktop: dugme odmah iza teksta, X na kraju trake */
.ponuda-jezika .dug{background:transparent;color:var(--akcija);box-shadow:inset 0 0 0 1.5px var(--akcija)}
.ponuda-jezika .dug b{border-left-color:var(--akcija)}
.ponuda-jezika .dug:hover{background:var(--akcija);color:#fff}
@media (min-width:768px){
 .ponuda-jezika span{flex:0 1 auto;min-width:0}
 .ponuda-jezika .kv{margin-left:auto}
}
/* Logo u headeru 10 % manji (korisnik 12.10.2026): desktop 36, tablet 31, telefon 29 px */
.logo img{width:171px;height:36px}
@media (max-width:991px){ .logo img{width:147px;height:31px} }
@media (max-width:480px){ .logo img{width:137px;height:29px} }
@media (max-width:374px){ .logo img{width:114px;height:24px} }
/* Plava traka kontakta: radno vrijeme i dva mejla - svako u svom redu */
.kon-red span,.kon-red a{display:block;line-height:1.5}
.kon-red a{color:inherit}
.kon-red a:hover{color:#fff}
/* Futer: "Primatech d.o.o." istim fontom kao naslovi kolona (Softver, Firma...) */
.futer .kol > div:first-child > b{font-size:inherit;font-weight:600;color:var(--tekst);margin-bottom:6px}
body.tema-korporativna .futer .kol > div:first-child > b,body.tema-metal .futer .kol > div:first-child > b{color:#fff}
@media (max-width:767px){ .futer .kol > div:first-child > b{font-size:16px} }
/* Plava traka: brojevi telefona kao pilule (providne, bijeli obrub, ikona telefona) - vidi se da se klikom zove */
.tel-pilule{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.kon .tel.tel-pil{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:600;line-height:1;padding:10px 16px 10px 12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);color:inherit;transition:background-color .15s,color .15s}
.kon .tel.tel-pil svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.kon .tel.tel-pil:hover{background:#fff;color:var(--kon-poz,#007DB5)}
@media (min-width:992px){ .tel-pilule{flex-direction:column;align-items:flex-start} }
/* Mejlovi u plavoj traci takođe kao pilule (manji font nego brojevi) */
.kon-red .tel-pilule{display:flex}
.kon-red .tel.tel-pil{font-size:15px;font-weight:500;padding:9px 14px 9px 11px}
.kon-red .tel-pil span{display:inline}
/* Pilule jedna ispod druge iste širine (širina najduže), sadržaj lijevo - ikone u istoj vertikali */
.kon-red .tel-pilule{display:inline-grid;grid-template-columns:minmax(0,max-content);gap:8px;margin-top:10px}
.kon-red .tel.tel-pil{justify-content:flex-start}
@media (min-width:992px){ .tel-pilule{display:inline-grid;grid-template-columns:minmax(0,max-content)} .kon .tel.tel-pil{justify-content:flex-start} }
/* Pilule telefona istim fontom kao pilule mejlova (prva grupa) */
.kon .tel.tel-pil{font-size:15px;font-weight:500;padding:9px 14px 9px 11px}
/* Plava traka: oba naslova kolona istog stila (Razgovarajmo o vašoj firmi / Prodaja i podrška klijentima); pilule odmah ispod */
.kon .tel-pilule{margin-top:12px}
@media (min-width:992px){ .kon{align-items:start} .kon .t{min-height:0} }
/* "Za koga je?" pilule ispod heroja */
.za-koga-pil{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px}
.zkp-n{font-size:14px;color:var(--siva);margin-right:4px}
.za-koga-pil a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--blok-poz);box-shadow:inset 0 0 0 1px #D6DEE7;color:var(--duboka);font-size:15px;font-weight:600;transition:box-shadow .15s}
.za-koga-pil a:hover{box-shadow:inset 0 0 0 1.5px var(--akcija)}
.za-koga-pil .ik{width:26px;height:26px;border-radius:50%;background:var(--svpl);display:flex;align-items:center;justify-content:center;flex:none}
.za-koga-pil .ik svg{width:15px;height:15px;stroke:var(--akcija);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.za-koga-pil + .brojke{margin-top:20px}
@media (max-width:767px){ .zkp-n{flex-basis:100%} .za-koga-pil{gap:6px;margin-top:14px} .za-koga-pil a{font-size:14px} }
/* Telefoni u dvije grupe: Prodaja (067 508 786) i Podrška klijentima (069 141 402-405) */
.tel-grupa{margin-top:12px;font-size:14px;opacity:.9}
.kon .tel-grupa + .tel-pilule{margin-top:6px}
.podatak small.r-s{margin-top:10px}
.fk-t .fk-pod{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;opacity:.75;margin-top:8px}
.fk-t .fk-pod:first-child{margin-top:0}
/* "Za koga je?" kao posebna sekcija ispod "15 godina sa vama": linija iznad, manji razmaci */
main > .w > section.za-koga-sek{padding:22px 0;border-top:1px solid #DCE3EA}
.za-koga-sek .za-koga-pil{margin-top:0}
.za-koga-sek + section{border-top:1px solid #DCE3EA}
.mi .za-koga-pil{margin-top:16px}

/* Telefon (12.10.2026): red "© godina Primatech" se ne prikazuje - naziv firme je već u prvoj koloni futera */
@media (max-width:767px){.futer .dno{display:none}}

/* Plava traka (12.10.2026): telefoni po grupama u redu - Prodaja jedan red, Podrška drugi (umjesto kolone od 5 pilula) */
.kon .tel-grupa + .tel-pilule{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}

/* Plava traka (12.10.2026): na desktopu telefoni u dvije kolone - Prodaja | Podrška, pilule jedna ispod druge; na telefonu grupe jedna ispod druge, pilule u redu */
@media (min-width:992px){ .tel-kolone{display:grid;grid-template-columns:max-content max-content;gap:0 24px} .kon .tel-kolone .tel-grupa + .tel-pilule{display:inline-grid;grid-template-columns:minmax(0,max-content)} }

/* Softver (12.10.2026): proizvodi kao pločice - 3 u redu na desktopu, 2 na tabletu, jedna ispod druge na telefonu; dugme uvijek na dnu pločice, sva u istoj liniji */
.sw-plocice{display:grid;gap:24px}
.sw-plocice .blok + .blok{margin-top:0}
.sw-plocice .blok{display:flex;flex-direction:column;gap:16px}
.sw-plocice .blok > div:last-child{display:flex;flex-direction:column;flex:1;gap:16px}
.sw-plocice .blok .cta{margin-top:auto}
.sw-plocice .blok .cta .dug{width:100%;justify-content:space-between}
@media (min-width:768px){ .sw-plocice{grid-template-columns:repeat(2,1fr)} }
@media (min-width:992px){ .sw-plocice{grid-template-columns:repeat(3,1fr)} .sw-plocice .blok{padding:28px} .sw-plocice .blok h2{font-size:26px} .sw-plocice .blok .cij{font-size:30px} }

/* Telefoni (12.10.2026): sitna napomena ispod prodaje "403 i 404 primaju i pozive podrške" - svaki broj se prikazuje jednom */
.tel-nap{display:block;font-size:13px;line-height:1.35;opacity:.8;margin-top:6px;font-weight:400}
.kon .tel-nap{margin-top:8px}

/* Plava traka (12.10.2026): napomena ne širi kolonu Prodaja (lomi se u širini pilula), a naslov i brojevi Podrške se nikad ne lome */
.tel-kolone .tel-nap{grid-column:1 / -1}
.tel-kol{flex:none}
.tel-grupa,.kon .tel.tel-pil span{white-space:nowrap}

/* Softver (12.10.2026): 3 + 2 bez praznog mjesta - gore 3 pločice, dolje 2 na pola širine (mreža od 6 kolona); tablet: zadnja preko cijelog reda */
@media (min-width:768px) and (max-width:991px){ .sw-plocice > .blok:last-child:nth-child(odd){grid-column:1 / -1} }
@media (min-width:992px){ .sw-plocice{grid-template-columns:repeat(6,1fr)} .sw-plocice > .blok{grid-column:span 2} .sw-plocice > .blok:nth-child(4),.sw-plocice > .blok:nth-child(5){grid-column:span 3} }
/* široke pločice (drugi red): dugme iste širine kao u gornjem redu, lijevo - ne preko cijele pločice */
@media (min-width:992px){ .sw-plocice > .blok:nth-child(4) .cta .dug,.sw-plocice > .blok:nth-child(5) .cta .dug{width:calc((200% - 80px) / 3)} }

/* Softver pločice (12.10.2026): veći vertikalni razmak - ikona / naslov / tekst / pasusi da dišu */
.sw-plocice .blok .ik + h2{margin-top:22px}
.sw-plocice .blok h2{margin-bottom:14px}
.sw-plocice .blok p{line-height:1.55}
.sw-plocice .blok p + p{margin-top:14px}
.sw-plocice .blok .cij{margin-top:26px}

/* Plava traka (12.10.2026): na desktopu "Prodaja" i "Podrška klijentima" u ravni sa redom "Pitajte nas..." lijevo (bez gornjeg razmaka, ista visina reda) */
@media (min-width:992px){ .kon .tel-kolone .tel-grupa{margin-top:0;line-height:24px} .kon .tel-kolone .tel-grupa + .tel-pilule{margin-top:10px} }

/* Cijene - "Uz pakete" (12.10.2026): dugme ispod naslova kartice (shop, formular za rate) */
.kt .kt-dug{margin-top:18px}
.kt .kt-dug[aria-disabled="true"]{cursor:default}

/* Partneri (12.10.2026): dugme "Kontaktirajte nas" desno, poravnato gore uz naslov "Kako postajete partner" (ne po sredini) */
@media (min-width:768px){ .cta-ponovo.cta-gore{align-items:start} }
/* Partneri: naslov preko obje kolone, pa koraci i dugme u istom redu - dugme u ravni sa vrhom koraka "Javite nam se" */
.cta-ponovo.cta-gore > h2{margin:0}
@media (min-width:768px){ .cta-ponovo.cta-gore{row-gap:12px} .cta-ponovo.cta-gore > h2{grid-column:1 / -1} .cta-ponovo.cta-gore .koraci{margin-top:0} }

/* Telefon (12.10.2026): dva dugmeta u istom redu, pola-pola (Partneri: Kontaktirajte nas + Partnerski portal); strelica se skriva da tekst stane */
@media (max-width:767px){
 .cta.dva-dug{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
 .cta.dva-dug .dug{width:100%;justify-content:center;font-size:15px;height:48px;padding:0}
 .cta.dva-dug .dug span{padding:0 8px;white-space:nowrap}
 .cta.dva-dug .dug b{display:none}
}

/* Header (proba 12.10.2026): "Prijava" kao tekstualni link sa ikonom lijevo od glavnog dugmeta; na telefonu samo dugme (Prijava ide u meni kasnije) */
.prijava-link{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:600;color:var(--tekst);cursor:pointer;margin-right:4px}
.prijava-link svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.prijava-link:hover{color:var(--akcija)}
.zag .dug[aria-disabled="true"]{cursor:pointer}
@media (max-width:991px){ .prijava-link{display:none} }

/* Cijena proizvoda (12.10.2026): godišnji iznos u novom redu ispod "već od X € /mj" */
.cij .cij-nap{display:block;font-size:15px;font-weight:400;letter-spacing:0;line-height:1.4;color:var(--siva);margin-top:8px}
.tam .cij .cij-nap{color:inherit;opacity:.75}

/* Dijalog "Kako do nas" (12.10.2026): viši okvir i kadar niže - da se vide i Primatech i Delta City (crtež je 560x470, u okviru se siječe) */
.mapa.u-dlg{height:320px}
/* crtež je širok (1018x621, sive strane): u okviru se siječu samo sive strane, sadržaj (Sicilija, Voli parking, Delta) se vidi cijeo */
.mapa img{object-position:50% 50%}
/* dijalog: crtež cijeo sa sivim stranama, niži okvir - bez skrolovanja dijaloga */
.mapa.u-dlg{height:250px}
.mapa.u-dlg img{object-fit:contain}
@media (max-width:767px){ .mapa.u-dlg{height:220px} }
@media (max-width:767px){ .mapa.u-dlg{height:260px} }
/* dugme "Prikaži mapu" gore desno - lijevo gore je Voli parking */
.mapa-prikazi{left:auto;right:14px}

/* Mapa (12.10.2026): oba dugmeta lijevo - "Prikaži mapu" gore lijevo, "Otvori u Google mapama" dolje lijevo (desno su Delta i parking);
   crtež poravnat odozdo - u niskim okvirima (naslovna) siječe se gornji red zgrada, a Delta i ulazi se vide */
.mapa-prikazi{left:14px;right:auto}
.mapa-otvori{left:14px;right:auto}
.mapa img{object-position:50% 100%}

/* Cijena proizvoda (12.10.2026): "već od" sitno ispred iznosa, iznos zadržava veliki font (i na telefonu staje u jedan red) */
.cij .cij-od{font-size:17px;font-weight:500;letter-spacing:0;color:var(--siva);margin-right:8px}

/* "Kako do nas" na telefonu (12.10.2026): preko cijelog ekrana - naslov i crtež gore, tekst ispod slike skroluje, dugmad zalijepljena na dno */
@media (max-width:767px){
 #kako-do-nas{height:100%;max-height:100%;border-radius:0;overflow:hidden}
 #kako-do-nas .drsk{display:none}
 #kako-do-nas .dlg-u{display:flex;flex-direction:column;height:100%;padding:calc(14px + env(safe-area-inset-top)) 16px 0}
 #kako-do-nas .dlg-zag,#kako-do-nas .dlg-adr,#kako-do-nas .mapa{flex:none}
 #kako-do-nas .kdn-tekst{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
 #kako-do-nas .dlg-dno{flex:none;margin:0 -16px;padding:12px 16px calc(20px + env(safe-area-inset-bottom));background:var(--pozadina);box-shadow:0 -1px 0 var(--linija)}
}

/* Meni na telefonu (12.10.2026): linkovi krupni (24 px) uz manji razmak, naslovi sekcija 38 px - da sa otvorenom sekcijom Firma stane i Jezik */
.ms-linkovi a{font-size:24px;padding:8px 0}
.ms-zag h2{font-size:38px}
.ms{padding:16px 0}

/* Telefon (12.10.2026): bez dugmadi preko crteža mape ("Prikaži mapu", "Otvori u Google mapama") - pokrivaju crtež;
   iznad mape su "Navigacija" i "Kako do nas" (dugme "Otvori mapu" u dijalogu ostaje - nije unutar .mapa) */
@media (max-width:767px){ .mapa > .mapa-dug{display:none} }

/* Softver pločice (12.10.2026): ikona i naslov u istom redu (ikona lijevo, naslov desno), ostalo ispod preko cijele širine */
.sw-plocice .blok > div:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center}
.sw-plocice .blok > div:first-child > *:not(.ik):not(h2){grid-column:1 / -1}
.sw-plocice .blok .ik + h2{margin:0}
.sw-plocice .blok > div:first-child > h2 + p{margin-top:16px}

/* Telefon (12.10.2026): "Postanite korisnik" u headeru iste visine kao dugmad heroja ("Od 8,33 €/mj", "Podrška") */
@media (max-width:767px){ .zag .dug{height:50px} }

/* Telefon (12.10.2026): svi dijalozi preko cijelog ekrana - naslov sa X zalijepljen gore, sadržaj skroluje, dugmad zalijepljena na dno
   ("Kako do nas" ima svoj raspored iznad - #kako-do-nas) */
@media (max-width:767px){
 .dlg:not(#kako-do-nas){height:100%;max-height:100%;border-radius:0}
 .dlg:not(#kako-do-nas) .drsk{display:none}
 .dlg:not(#kako-do-nas) .dlg-u{min-height:100%;display:flex;flex-direction:column;padding:0 16px}
 .dlg:not(#kako-do-nas) .dlg-zag{position:sticky;top:0;z-index:2;background:var(--pozadina);padding:calc(14px + env(safe-area-inset-top)) 0 10px}
 .dlg:not(#kako-do-nas) .dlg-dno{position:sticky;bottom:0;z-index:2;margin:auto -16px 0;padding:12px 16px calc(20px + env(safe-area-inset-bottom));background:var(--pozadina);box-shadow:0 -1px 0 var(--linija)}
 .dlg:not(#kako-do-nas) .dlg-u > :last-child:not(.dlg-dno){margin-bottom:calc(20px + env(safe-area-inset-bottom))}
}
/* dijalozi na telefonu: sadržaj odmaknut od naslova/podnaslova (ne centrira se vertikalno - različite dužine, sheet počinje odozgo) */
@media (max-width:767px){
 .dlg:not(#kako-do-nas) .dlg-adr{margin:6px 0 24px}
 .dlg:not(#kako-do-nas) .dlg-zag + :not(.dlg-adr){margin-top:16px}
}

/* Pojava dijaloga (12.10.2026), isti jezik kao meni na telefonu (sekcije redom izranjaju):
   telefon - ekran klizne odozdo (iOS kriva), pa sadržaj redom izranja (providnost + 10 px); zatvaranje klizne dolje (klasa .zatvara iz sajt.js);
   desktop - kao do sada (blago uvećanje), zatvaranje blago nestane; pozadina se zatamnjuje postepeno */
@keyframes dlg-tel-ulaz{from{transform:translateY(100%)}to{transform:none}}
@keyframes dlg-tel-izlaz{from{transform:none}to{transform:translateY(100%)}}
@keyframes dlg-izlaz{from{opacity:1;transform:none}to{opacity:0;transform:scale(.97)}}
@keyframes dlg-red{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes dlg-pozadina{from{opacity:0}to{opacity:1}}
.dlg[open]::backdrop{animation:dlg-pozadina .3s ease}
.dlg.zatvara{animation:dlg-izlaz .16s ease forwards}
@media (max-width:767px){
 .dlg[open]{animation:dlg-tel-ulaz .34s cubic-bezier(.32,.72,0,1)}
 .dlg.zatvara{animation:dlg-tel-izlaz .24s cubic-bezier(.4,0,1,1) forwards}
 .dlg[open] .dlg-u > *{animation:dlg-red .32s ease both}
 .dlg[open] .dlg-u > :nth-child(2){animation-delay:.10s}
 .dlg[open] .dlg-u > :nth-child(3){animation-delay:.14s}
 .dlg[open] .dlg-u > :nth-child(4){animation-delay:.18s}
 .dlg[open] .dlg-u > :nth-child(5){animation-delay:.22s}
 .dlg[open] .dlg-u > :nth-child(6){animation-delay:.26s}
 .dlg[open] .dlg-u > :nth-child(n+7){animation-delay:.30s}
 .dlg[open] .dlg-u > ul{animation:none}
 .dlg[open] .dlg-u > ul > li{animation:dlg-red .32s ease both}
 .dlg[open] .dlg-u > ul > li:nth-child(1){animation-delay:.18s}
 .dlg[open] .dlg-u > ul > li:nth-child(2){animation-delay:.22s}
 .dlg[open] .dlg-u > ul > li:nth-child(3){animation-delay:.26s}
 .dlg[open] .dlg-u > ul > li:nth-child(4){animation-delay:.30s}
 .dlg[open] .dlg-u > ul > li:nth-child(5){animation-delay:.34s}
 .dlg[open] .dlg-u > ul > li:nth-child(n+6){animation-delay:.38s}
 .dlg.zatvara .dlg-u > *,.dlg.zatvara .dlg-u > ul > li{animation:none}
}
@media (prefers-reduced-motion:reduce){ .dlg[open],.dlg.zatvara,.dlg[open]::backdrop,.dlg[open] .dlg-u > *,.dlg[open] .dlg-u > ul > li{animation:none} }

/* Proba (13.10.2026): animira se samo ekran dijaloga (klizne odozdo / dolje), sadržaj se ne pojavljuje redom - odmah je tu, kao iOS / Android sheet.
   Vraćanje: obrisati ovaj blok (pravila za redom izranjanje su iznad, .dlg[open] .dlg-u > *). */
@media (max-width:767px){ .dlg[open] .dlg-u > *,.dlg[open] .dlg-u > ul > li{animation:none} }

/* Dijalog "Webshop je u pripremi" (13.10.2026): brojevi prodaje kao krupni redovi sa ikonom telefona */
.wsp-tel{display:grid;gap:4px;margin:4px 0 8px}
.wsp-tel a{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:500;letter-spacing:-.3px;padding:8px 0;color:var(--tekst)}
.wsp-tel a:hover{color:var(--akcija)}
.wsp-tel svg{width:22px;height:22px;fill:none;stroke:var(--akcija);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Predlog firme ispod polja PIB (13.10.2026) - kao stavka liste: naziv podebljano, ispod sitno "PIB · mjesto" */
.pib-predlog{margin-top:6px;border:1px solid var(--linija);border-radius:10px;background:var(--pozadina);box-shadow:0 6px 18px rgba(0,0,0,.08);overflow:hidden}
.pib-stavka{display:block;width:100%;text-align:left;border:0;background:none;font:inherit;color:var(--tekst);padding:10px 14px;cursor:pointer}
.pib-stavka:hover,.pib-stavka:focus-visible{background:var(--svpl);outline:none}
.pib-stavka b{display:block;font-size:16px;font-weight:600}
.pib-stavka span{display:block;font-size:14px;color:var(--siva);margin-top:2px}

/* Softver (13.10.2026): sada 6 pločica (+ Mobilna kasa) - 3 + 3; široke 4. i 5. samo kad je pločica tačno 5 */
@media (min-width:992px){
 .sw-plocice > .blok:nth-child(4),.sw-plocice > .blok:nth-child(5){grid-column:span 2}
 .sw-plocice > .blok:nth-child(4):nth-last-child(2),.sw-plocice > .blok:nth-child(5):last-child{grid-column:span 3}
 .sw-plocice > .blok:nth-child(4) .cta .dug,.sw-plocice > .blok:nth-child(5) .cta .dug{width:100%}
 .sw-plocice > .blok:nth-child(4):nth-last-child(2) .cta .dug,.sw-plocice > .blok:nth-child(5):last-child .cta .dug{width:calc((200% - 80px) / 3)}
}

/* Cijena (13.10.2026): iznos "16,67 €" se ne lomi ("€" ne pada u novi red u uskim karticama) */
.cij .cij-iznos{white-space:nowrap}

/* Cijene - "Ostali softverski proizvodi" (13.10.2026): 5 pločica (4 proizvoda + Certifikat) - 2 + 2 + 1 / 3 + 2;
   dugmad cijelom širinom kartice, tekst i strelica u istom dugmetu, ne izlaze van kartice */
.cjen-cijene .pk > .dug,.cjen-cijene .pk-dug .dug{width:100%;max-width:100%;justify-content:space-between;align-self:stretch}
.cjen-cijene .pk .dug span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cjen-cijene .pk-dug{margin-top:auto;display:grid;gap:8px}
@media (min-width:768px) and (max-width:1199px){ .cjen-cijene > .pk:last-child:nth-child(odd){grid-column:1 / -1} }
/* 13.10.2026: + Prijava gostiju za fizička lica = 6 pločica: 3 + 3 (široko), 2 + 2 + 2 (srednje) */
@media (min-width:1200px){ .cjen-cijene{grid-auto-flow:row;grid-template-columns:repeat(3,1fr)} }
/* Certifikat: cijena sa PDV-om, zelena oznaka (isti stil kao uslov paketa Standard) */
.pk-cert .cij .cij-nap,.pk-fiz .cij .cij-nap{font-size:16px}
.cjen-cijene .pak-uslov{margin-top:14px}
.pk-cert .op{margin-top:14px}
/* Dijalog "Detalji" prijave gostiju: cijena krupno, napomena ispod */
.det-cij{font-size:17px;color:var(--siva);margin:0 0 10px}
.det-cij b{font-size:32px;font-weight:600;letter-spacing:-1px;color:var(--tekst);margin-right:4px}
.det-cij span{display:block;font-size:15px;margin-top:4px}
.det-tekst{font-size:17px;line-height:1.45;color:var(--tekst-3);margin:0 0 14px}
/* Blok o plaćanju na kraju strane (kao kartica adrese) */
.cij-placanje{margin-top:8px}
.cij-placanje strong{font-size:20px}

/* Cijene - "Ostali softver" (13.10.2026): sada 4 kartice (+ Mobilna kasa) - na desktopu 2 x 2 umjesto 4 u redu (bile preuske:
   "već od" se lomio, dugme izlazilo van kartice); "već od" uvijek u jednom redu; dugme ne izlazi van kartice */
/* (2 x 2 uklonjeno - raspored "Ostali softver" na Cijenama vodi .cjen-cijene) */
.cij .cij-od{white-space:nowrap}
.pk > .dug{max-width:100%}

/* Softver - kratke pločice (13.10.2026, stil paketa): naziv, cijena, kratak opis, "Detaljnije" na dnu; detalji u dijalogu */
.sw-kratko .blok > div:first-child > p.r-m{margin-top:14px}
.sw-kratko .blok .cij{margin-top:18px}
.sw-kratko .blok .cta .dug{width:auto !important}
.sw-dlg-cij{font-size:34px;letter-spacing:-1px;font-weight:600;line-height:1;margin:6px 0 14px}
.sw-dlg-cij small{font-size:16px;letter-spacing:0;font-weight:400;color:var(--siva);margin-left:6px}
.sw-dlg-detalj{font-size:16px;line-height:1.5;color:var(--tekst-3);margin:0 0 12px}
.dlg-zag h2 .brend{color:var(--naglasak, #0090CE)}