/* ═══════════════════════════════════════════════════════════════
   Biroplast Solutions — V2 komponente
   Gumbi, kartice, ikone, glava, noga, grafični jezik (circuit/BP),
   statistike, cenik, aplikacijski placeholderji.
   ═══════════════════════════════════════════════════════════════ */

/* ── gumbi (en sistem povsod) ─────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--fh); font-weight:700; font-size:15px;
  padding:14px 26px; border-radius:var(--r-sm);
  border:1.5px solid transparent; cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-premium),
             box-shadow var(--dur-fast) var(--ease-premium),
             background var(--dur-fast) var(--ease-premium),
             border-color var(--dur-fast) var(--ease-premium);
  white-space:nowrap;
}
.btn-primary{ background:var(--grad-green); color:#0d2015; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn-secondary{ background:transparent; border-color:var(--line-on-navy); color:#fff; }
.on-surface .btn-secondary,
.btn-secondary.on-light{ border-color:var(--line); color:var(--navy); }
.btn-secondary:hover{ background:rgba(255,255,255,.08); }
.on-surface .btn-secondary:hover,
.btn-secondary.on-light:hover{ background:var(--surface-alt); }
.btn-text{
  background:none; border:0; padding:6px 0; color:var(--blue);
  font-weight:700; gap:6px;
}
.btn-text svg{ width:16px; height:16px; transition:transform var(--dur-fast) var(--ease-premium); }
.btn-text:hover svg{ transform:translateX(3px); }
.btn-full{ width:100%; }

/* ── ikone (en jezik povsod) ───────────────────────────────── */
.icon-box{
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-alt); color:var(--green); flex-shrink:0;
}
.icon-box svg{ width:22px; height:22px; stroke-width:1.75; }
.icon-box.blue{ color:var(--blue); }
.icon-box.on-navy{ background:rgba(255,255,255,.08); color:var(--lime); }

/* ── kartice (mirne, brez barvnega traku povsod) ──────────── */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-3);
  transition:transform var(--dur-med) var(--ease-premium),
             box-shadow var(--dur-med) var(--ease-premium);
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); }
.card h3{ margin:var(--sp-2) 0 6px; }
.card p{ color:var(--muted); font-size:15px; }
.card-link{ display:block; color:inherit; }

.grid{ display:grid; gap:var(--sp-3); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-6{ grid-template-columns:repeat(6,1fr); }
@media (max-width:960px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } .grid-6{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .grid-2,.grid-3,.grid-4,.grid-6{ grid-template-columns:1fr; } }

/* ── značke (restrained — samo za pomembne trenutke) ──────── */
.badge{
  display:inline-flex; align-items:center; font-family:var(--fh); font-weight:700;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
}
.badge-cyan{ background:rgba(23,185,236,.14); color:#0a6d8a; }
.badge-cyan.on-navy{ background:rgba(23,185,236,.22); color:#8fe0f7; }
.badge-lime{ background:rgba(171,208,57,.16); color:#4c6614; }

/* ── glava ─────────────────────────────────────────────────────
   Prenovljeno avgust 2026: tipografija glavnega menija je zdaj
   Barlow (--fb, "telo/UI" po CGP), ne več Exo 2 — Exo 2 ostaja
   naslovna/display pisava (h1–h3, gumbi, logotip), medtem ko je
   Barlow že po definiciji v tokens.css namenjena UI besedilu, kamor
   sodi navigacija. Ista logika velja za "avoid overly bold nav
   text": teža 600 → 500.

   POPRAVEK 7. 9. 2026 (MASTER PROMPT — desktop navigacija je
   izginjala v hamburger na VSEH normalnih desktop širinah, kar NI
   bilo želeno): korenski vzrok ni bil "premalo širok zaslon", ampak
   napačna diagnoza v prejšnjih krogih. `.wrap` (skupen vsem sekcijam)
   ima `max-width:var(--container)` = 1280px — nad ~1330px viewporta
   se torej vsebina headerja NIKOLI ne razširi čez ~1232px uporabne
   širine, naj bo zaslon 1440px ali 2560px. Izmerjeno prek Playwrighta
   (scrollWidth vs. dejanska širina `.wrap`): pri polnem seznamu 7
   postavk + Kontakt + CTA je bilo za vodoravni niz potrebnih ~1368px
   — 88px VEČ, kot je sploh kadarkoli na voljo znotraj standardnega
   1280px vsebnika. Noben "breakpoint dvig" (900→1240→1500px) tega ni
   mogel rešiti, ker je šlo za manjko prostora, ne za premalo širok
   zaslon — nad ~1330px viewporta je bilo na voljo dobesedno enako
   malo prostora kot pri 1366px.

   Rešitev je zmanjšanje dejanske širine menija, NE širši vsebnik —
   prvi poskus je dal headru lasten `max-width:1400px` (širši od
   standardnih 1280px), kar je nav sicer spravilo v eno vrstico, a je
   ustvarilo ~60px neporavnavo med levim robom logotipa in levim robom
   vsebine spodaj na zelo širokih zaslonih (1600px+) — v nasprotju z
   brief-ovo zahtevo po "precise/confident" premium občutku, kjer
   robovi po vseh sekcijah sovpadajo. Namesto tega: "O nas" je
   odstranjen iz glavnega seznama (brief eksplicitno dovoljuje to kot
   prvo žrtev prostorske stiske, glej `navigation.js`), razmiki med
   postavkami in CTA gumbi so nekoliko tesnejši, brez spremembe
   velikosti pisave (ostaja 14.5px, čitljivo) — s tem poln niz potrebuje
   samo ~1215px (bilo 1368px), kar se PRAVILNO prilega standardnemu
   1280px vsebniku brez kakršnegakoli posega v `max-width`. Header zdaj
   uporablja IDENTIČEN `.wrap` kot vsaka sekcija na strani — popolna
   poravnava levega/desnega roba z vsebino spodaj na vseh širinah,
   brez izjem. Prelomna točka za hamburger je 1240px (varnostna rezerva
   ~25px nad dejansko potrebnimi ~1215px) — poln vodoravni meni se
   prikaže na VSEH testiranih desktop/laptop širinah (1920/1600/1440/
   1366/1280), hamburger ostane samo za dejansko ozke zaslone (1024px
   in manj — tablet/mobile) — izmerjeno prek Playwrighta (scrollWidth
   vs. clientWidth na več širinah), glej dnevnik. ────────────────── */
/* 10. 9. 2026 — dodatek 7. postavke "Servis elektronskih naprav" (glej
   navigation.js) je spet presegel 1232px proračun (~1397px potrebno).
   `.glava-glavna .wrap` gap 22→16px in `.glavni-meni` gap 19→11px
   (skupaj ~24px prihranka), glavni prihranek pa iz odstranitve
   podvojenega "Kontakt" gumba iz `.glava-akcije` (glej navigation.js
   opombo) — skupaj poln niz spet ustreza 1232px brez zmanjšanja pisave. */
/* 10. 9. 2026 (nadaljevanje) — "POENOSTAVITEV GLAVNE NAVIGACIJE" (1. krog,
   OPUŠČEN naslednjim krogom spodaj): ker je "Servis elektronskih naprav" +
   "Spletne strani" takrat združen v en sam, krajši "Storitve ▼" dropdown,
   je bil prostor vrnjen razmikom (`.glava-glavna .wrap` gap 13→18px,
   `.glavni-meni` gap 7→15px, margin-left 2→4px, `.glava-akcije .btn-
   primary` padding 10px 15px→10px 19px) in sekundarni "Kontakt" gumb v
   `.glava-akcije` je bil znova dodan. Glej naslednji vpis za dokončno
   stanje — ta krog je zgodovinsko ohranjen kot dokumentacija, vrednosti
   spodaj so PRESEŽENE. */
/* 10. 9. 2026 (nadaljevanje 2) — "KONČNA OPTIMIZACIJA GLAVNE NAVIGACIJE":
   uporabnik je želel "Spletne strani" IN "Servis" neposredno vidna v
   glavnem meniju (ne skrita v dropdownu), zato je "Storitve" dropdown
   odstranjen — namesto tega sta zdaj "Programske rešitve" + "Spletne
   aplikacije" (vsebinsko najbližji par, glej navigation.js) združeni pod
   nov dropdown "Programska oprema" (ista `.meni-prozilec`/`.podmeni`
   CSS spodaj, samo druga podatkovna vsebina). Sekundarni "Kontakt" gumb v
   `.glava-akcije` je TOKRAT DOKONČNO odstranjen (uporabnik je eksplicitno
   označil podvajanje z `.glava-util` zgornjo vrstico kot problem, ne kot
   nekaj, kar naj ostane). Skupno 7 glavnih postavk (nespremenjeno), a z
   manj skupnega besedila IN brez podvojenega gumba je na voljo še več
   prostora kot v prejšnjem krogu — namenoma vrnjen razmikom, NE gumbu
   "Pridobite ponudbo" (brief eksplicitno prepoveduje njegovo povečanje
   "samo zato, ker smo odstranili Kontakt" — ostaja pri 10px 19px):
   `.glava-glavna .wrap` gap 18→22px, `.glavni-meni` gap 15→20px. Izmerjeno
   prek Playwrighta: poln niz (7 postavk + logotip + Pridobite ponudbo) s
   temi razmiki ustreza 1232px proračunu udobno na 1366px IN 1280px (glej
   dnevnik za natančne številke), prelomna točka za hamburger ostaja
   1240px. */
.glava{ position:sticky; top:0; z-index:100; background:#fff; }
.glava-util{
  background:var(--navy); color:var(--muted-on-navy); font-size:var(--fs-micro);
  padding:8px 0;
}
.glava-util .wrap{ display:flex; align-items:center; gap:var(--sp-3); }
.glava-util a{ color:#fff; }
.glava-util .prostor{ margin-left:auto; display:flex; gap:var(--sp-3); }
.glava-glavna{
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--dur-fast) var(--ease-premium);
}
.glava.skrceno .glava-glavna{ box-shadow:var(--sh-sm); }
.glava.skrceno .glava-glavna .wrap{ padding-top:11px; padding-bottom:11px; }
.glava-glavna .wrap{
  display:flex; align-items:center; gap:22px;
  padding-top:15px; padding-bottom:15px;
  transition:padding var(--dur-fast) var(--ease-premium);
}
.logo{ display:flex; align-items:center; margin-right:2px; flex-shrink:0; }
.logo img{ height:36px; width:auto; flex-shrink:0; }
.glavni-meni{
  display:flex; align-items:center; gap:20px; list-style:none;
  margin:0 0 0 4px; padding:0;
}
.glavni-meni > li > a,
.meni-prozilec{
  position:relative; display:inline-block;
  font-family:var(--fb); font-weight:500; font-size:14.5px; line-height:1;
  letter-spacing:.01em; color:var(--navy);
  padding:10px 1px; white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-premium);
}
.glavni-meni > li > a::after{
  content:''; position:absolute; left:1px; right:1px; bottom:5px; height:2px;
  background:var(--green); border-radius:1px;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-fast) var(--ease-premium);
}
.glavni-meni > li > a:hover{ color:var(--ink); }
.glavni-meni > li > a:hover::after,
.glavni-meni > li > a[aria-current]::after{ transform:scaleX(1); }
.glavni-meni > li > a[aria-current]{ color:var(--ink); font-weight:600; }
/* DeliMe — subtilna "posebna postavka" pika (september 2026, dodatek).
   NAMENOMA majhna (5px) in tiha: cilj je intuitiven vtis "to je
   poseben izdelek", ne opozarjanje/tekmovanje z glavnim CTA. */
.meni-delime-pika{
  display:inline-block; width:5px; height:5px; border-radius:50%; margin-left:6px;
  background:linear-gradient(90deg, var(--cyan), var(--lime));
  vertical-align:middle; transform:translateY(-1px);
}
.glava-akcije{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.glava-akcije .btn{ font-size:14.5px; padding:10px 17px; }
.glava-akcije .btn-primary{ padding:10px 19px; }
.glava-akcije .btn-primary:hover{ filter:brightness(1.04); }
.meni-mobilni-gumb{ display:none; }

/* ── dropdown v glavnem meniju (trenutno "Programska oprema", prej
   "Storitve" — glej zgornje zgodovinske vpise; razredi spodaj so
   generični in delujejo za kateri koli `podmeni` vnos v navigation.js) ──
   `.meni-prozilec` je gumb (ne povezava) znotraj `.ima-podmeni` <li>; klik
   ali hover (samo naprave s hover, glej navigation.js) preklopi
   `.podmeni-odprt` na <li>. Tukaj samo DESKTOP plavajoča kartica — mobilni
   accordion je v responsive.css, ker mobilni kontekst potrebuje povsem
   drugačno vizualno rešitev (inline razširitev namesto plavajoče kartice
   nad preostalo vsebino strani). Premium/minimalna kartica po brief-u:
   belo ozadje, subtilna obroba, V2-skladen radius, mehka senca, velikodušen
   padding, jasno hover stanje; naslov + kratek opisni podnapis na vsako
   postavko (opis se lahko po potrebi izpusti, če je kartica prevelika —
   glej `o.opis` v navigation.js). Fade + translateY(6px→0), 200ms, brez
   odboja (--ease-premium nima overshoot-a). */
.glavni-meni li.ima-podmeni{ position:relative; }
.meni-prozilec{ display:inline-flex; align-items:center; gap:4px; background:none; border:0; cursor:pointer; }
.meni-prozilec:hover{ color:var(--ink); }
.meni-prozilec.je-aktivna-skupina{ color:var(--ink); font-weight:600; }
.meni-sevron{ width:13px; height:13px; margin-top:1px; transition:transform var(--dur-fast) var(--ease-premium); }
.ima-podmeni.podmeni-odprt .meni-sevron{ transform:rotate(180deg); }

/* `.podmeni` (zunanji, POPRAVEK — glej dnevnik "premikanje miške proti
   dropdownu ga prezgodaj zapre"): sam ni več vizualna kartica, ampak
   nevidna hover-mostna cona, ki se STIKA z gumbom (top:100%, BREZ
   margin-top razmika) — ker je `.podmeni` DOM potomec `<li>`, premikanje
   miške skoznjo NE sproži mouseleave na `<li>` (glej navigation.js JS).
   Prej je bil razmik do kartice narejen z `margin-top:10px` NA SAMEM
   `.podmeni` (torej kartici) — ta razmik je bil vizualno del `<li>`-ja,
   a NI bil pokrit z nobenim elementom, zato je miška med premikom navzdol
   skozenj "zapustila" `<li>` in dropdown se je zaprl, preden je uporabnik
   sploh dosegel postavke. Zdaj isti 10px razmik zagotavlja
   `.podmeni-vsebina` (notranji, dejanska bela kartica) prek
   `margin-top:10px` NA SEBI — ta razmik je še vedno vizualno prazen
   prostor, a je znotraj `.podmeni`-jevega (torej `<li>`-jevega) DOM
   okvirja, zato miška med premikom skoznjo ostane "znotraj" cone. */
.glavni-meni .podmeni{
  position:absolute; top:100%; left:0;
  min-width:266px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-premium), visibility var(--dur-fast);
}
.glavni-meni .ima-podmeni.podmeni-odprt .podmeni{
  opacity:1; visibility:visible; pointer-events:auto;
}
.glavni-meni .podmeni-vsebina{
  margin-top:10px; padding:var(--sp-1);
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-md);
  display:flex; flex-direction:column; gap:2px;
  transform:translateY(6px);
  transition:transform var(--dur-fast) var(--ease-premium);
}
.glavni-meni .ima-podmeni.podmeni-odprt .podmeni-vsebina{ transform:translateY(0); }
.podmeni-postavka{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 12px; border-radius:var(--r-sm);
  color:var(--navy); transition:background var(--dur-fast) var(--ease-premium);
}
.podmeni-postavka:hover,
.podmeni-postavka:focus-visible{ background:var(--surface-alt); }
.podmeni-naziv{ font-family:var(--fh); font-weight:600; font-size:14px; color:var(--ink); }
.podmeni-opis{ font-size:12.5px; color:var(--muted); line-height:1.35; }
.podmeni-postavka[aria-current] .podmeni-naziv{ color:var(--green); }
@media (prefers-reduced-motion:reduce){
  .glavni-meni .podmeni,
  .podmeni-vsebina,
  .meni-sevron{ transition:none; }
}

@media (max-width:1240px){
  .glavni-meni{ display:none; }
  .meni-mobilni-gumb{ display:inline-flex; }
}
@media (max-width:560px){
  /* na ozkih telefonih pustimo samo logotip in gumb za meni — CTA je podvojen v mobilnem meniju */
  .glava-akcije > .btn-primary{ display:none; }
}

/* ── noga — devetnajsti krog (avgust 2026): rahlo bolj prostorna,
   dovršena tipografija (naslovi stolpcev postanejo mala poudarjena
   "eyebrow" tipografija namesto navadne krepke), tanka zgornja CGP
   naglasna črta odzvanja isti naglas kot zaključni CTA panel tik nad
   nogo — vizualna "družinska" povezava med obema temnima ploskvama.
   Vsebina/povezave/pravna vrstica ostajajo popolnoma nespremenjene. */
.noga{ position:relative; background:var(--navy); color:var(--muted-on-navy); padding:var(--sp-7) 0 var(--sp-4); }
.noga::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(23,185,236,.3), rgba(171,208,57,.25), transparent);
}
.noga .grid-4{ gap:var(--sp-5) var(--sp-4); }
.noga h4{
  font-family:var(--fh); color:#fff; font-weight:700; font-size:12px;
  letter-spacing:.07em; text-transform:uppercase; margin-bottom:var(--sp-3);
}
.noga ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.noga a{ font-size:14.5px; line-height:1.3; transition:color var(--dur-fast) var(--ease-premium); }
.noga a:hover{ color:#fff; }
.noga-spodaj{
  border-top:1px solid var(--line-on-navy); margin-top:var(--sp-6); padding-top:var(--sp-3);
  display:flex; justify-content:space-between; gap:var(--sp-2); flex-wrap:wrap; font-size:var(--fs-micro);
}
.noga-spodaj a{ transition:color var(--dur-fast) var(--ease-premium); }
.noga-spodaj a:hover{ color:#fff; }

/* ── grafični jezik: circuit (elektronska mreža) ──────────── */
/* generativno, brez zunanje slike — usklajeno z volilnimi barvami CGP */
.circuit-field{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.circuit-field::before{
  content:''; position:absolute; inset:-10%;
  background-image:
    radial-gradient(circle at 0 0, currentColor 1.4px, transparent 1.6px);
  background-size:46px 46px;
  opacity:var(--cf-dot-op, .14);
}
.circuit-field::after{
  content:''; position:absolute; inset:-10%;
  background-image:
    repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 46px);
  opacity:var(--cf-line-op, .05);
}
.circuit-field.subtle{ --cf-dot-op:.07; --cf-line-op:.025; }
.on-navy .circuit-field{ color:#bcd3e6; }
.on-surface .circuit-field,
.circuit-field.on-light{ color:var(--navy); }
/* nadaljevanje 20 — nov ".on-steel" temno-svetel ton potrebuje isto
   svetlo krogotok-barvo kot ".on-navy" (glej zgoraj), da krogotok na
   njem ostane viden namesto skoraj-nevidnega temnega na temnem. */
.on-steel .circuit-field, .on-steel-deep .circuit-field{ color:#bcd3e6; }

/* nadaljevanje 20 — opacity zdaj teče prek CSS spremenljivk (`--cf-dot-op`/
   `--cf-line-op`), z NEspremenjenimi privzetimi vrednostmi (`.14`/`.05`) in
   NEspremenjenim `.subtle` (`.07`/`.025`) — obstoječa uporaba po strani je
   zato bit-za-bit enaka kot prej. Dodane so 4 nove "tone-*" stopnje (glej
   Alešev brif "krogotok naj pomaga pri kontrastu, opacity glede na moč
   sekcije"), namenoma kot LOČENE razrede (ne sprememba privzetih vrednosti),
   da noben obstoječi klic ".circuit-field"/".subtle" na strani ne spremeni
   videza, dokler nekdo eksplicitno ne doda ".tone-*": */
.circuit-field.tone-light{ --cf-dot-op:.05; --cf-line-op:.02; }
.circuit-field.tone-mid{ --cf-dot-op:.09; --cf-line-op:.035; }
.circuit-field.tone-strong{ --cf-dot-op:.12; --cf-line-op:.045; }
.circuit-field.tone-dark{ --cf-dot-op:.16; --cf-line-op:.06; }

/* ── grafični jezik: BP pikčasti motiv ─────────────────────── */
.motif-bp{
  position:absolute; border-radius:50%; pointer-events:none;
  background-image:radial-gradient(circle, currentColor 2.2px, transparent 2.4px);
  background-size:22px 22px;
  opacity:.10; color:var(--lime);
}

/* ── glow (CGP gradient ozadje — samo na izbranih mestih) ──── */
.glow{
  position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none;
}
.glow-green{ background:radial-gradient(circle, rgba(171,208,57,.55), transparent 70%); }
.glow-blue{ background:radial-gradient(circle, rgba(23,185,236,.45), transparent 70%); }

/* ── statistike ────────────────────────────────────────────── */
.stat-row{ display:flex; gap:var(--sp-5); flex-wrap:wrap; }
.stat-row b{ display:block; font-family:var(--fh); font-size:28px; color:#fff; }
.stat-row small{ display:block; font-size:var(--fs-micro); color:var(--muted-on-navy); margin-top:2px; }

/* ── produktni moment (velik, ne kartica) ─────────────────── */
.product-moment{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(160deg, var(--navy-mid), var(--navy) 60%, var(--navy-deep));
  box-shadow:var(--sh-lg);
}
.product-moment img{ position:relative; z-index:1; }

/* ── aplikacijski placeholder (za TAStudio / Booking / DeliMe) ── */
.app-showcase{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(155deg, var(--navy-mid), var(--navy) 55%, var(--navy-deep));
  box-shadow:var(--sh-lg); aspect-ratio:4/3; padding:22px;
}
.app-frame{
  position:relative; width:100%; height:100%; border-radius:var(--r);
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);
  overflow:hidden; display:flex; flex-direction:column;
}
.app-frame-top{ display:flex; gap:6px; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.09); flex-shrink:0; }
.app-frame-top span{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.2); }
.app-frame-body{ flex:1; padding:20px; display:flex; flex-direction:column; gap:16px; min-height:0; }
.app-row{ display:flex; gap:10px; }
.app-row div{ flex:1; height:32px; border-radius:8px; background:rgba(255,255,255,.08); }
.app-row div:nth-child(1){ background:rgba(171,208,57,.22); }
.app-row div:nth-child(2){ background:rgba(23,185,236,.18); }
.app-row div:nth-child(3){ background:rgba(24,165,75,.2); }
.app-main{ flex:1; min-height:56px; border-radius:10px; background-image:linear-gradient(120deg, rgba(171,208,57,.14), rgba(23,185,236,.14)); }
.app-lines{ display:flex; flex-direction:column; gap:8px; }
.app-lines div{ height:7px; border-radius:4px; background:rgba(255,255,255,.12); }
.app-lines div:nth-child(1){ width:70%; } .app-lines div:nth-child(2){ width:45%; } .app-lines div:nth-child(3){ width:58%; }
.app-showcase.sm{ aspect-ratio:16/10; padding:14px; }
.app-showcase.sm .app-frame-body{ padding:13px; gap:10px; }
.app-showcase.sm .app-row div{ height:22px; }
.app-showcase.sm .app-lines div{ height:6px; }
.app-label{
  position:absolute; bottom:14px; left:14px; z-index:2;
  font-family:var(--fh); font-weight:700; font-size:12px; letter-spacing:.04em;
  color:rgba(255,255,255,.55);
}

/* ── cenik (en sistem: cena → vsebina → komu → CTA) ────────── */
.paket{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2);
}
.paket.priporoceno{ border-color:var(--green); box-shadow:var(--sh-md); }
.paket .znak{
  position:absolute; top:-12px; left:24px;
  background:var(--grad-green); color:#0d2015; font-family:var(--fh); font-weight:700;
  font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:5px 12px; border-radius:999px;
}
.paket .cena{ font-family:var(--fh); font-weight:700; font-size:32px; color:var(--navy); }
.paket .cena small{ font-family:var(--fb); font-weight:500; font-size:14px; color:var(--muted); }
.paket ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:14.5px; color:var(--muted); }
.paket ul li{ display:flex; gap:8px; align-items:flex-start; }
.paket ul li svg{ width:16px; height:16px; color:var(--green); flex-shrink:0; margin-top:3px; }
/* NADALJEVANJE 12 — "GLOBALNA PORAVNAVA SPODNJEGA DELA KARTIC": osnovna
   komponenta (uporabljena na več straneh), zato popravek TUKAJ namesto
   podvajanja na vsaki strani posebej (glej depth-system.css, razdelek
   ".dpt-cta-bottom" za polno razlago recepta). ".paket" je že flex
   column (zgoraj) — ta pravilo poskrbi, da CTA gumb (zadnji navaden
   otrok kartice, TAKOJ za ceno/vsebino/seznamom) ostane sidran na dno
   kartice ne glede na to, koliko vrstic zavzame vsebina nad njim. Ko
   ima konkretna stran DODATEN element med seznamom in gumbom (npr.
   ločilnik + cenovna opomba), naj TA element namesto gumba dobi
   `margin-top:auto` (page-specific override — glej davcne-blagajne.css) */
.paket > a.btn{ margin-top:auto; }

/* ── kljuke (feature checklist) ───────────────────────────── */
.kljuke{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.kljuke li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; }
.kljuke li svg{ width:18px; height:18px; color:var(--green); flex-shrink:0; margin-top:2px; }

/* ── placeholder oznaka (rumena — ohranjena iz v1 dogovora) ── */
.ph, .ph-l{
  display:inline-block; background:#fff3c4; color:#6b5200; font-weight:700;
  padding:2px 8px; border-radius:6px; font-size:12.5px; letter-spacing:.02em;
}

/* ── scroll reveal (JS doda .je-vidno) ─────────────────────────
   Pomembno: skrito stanje velja SAMO, če JS teče (glava dobi razred
   .js zgodaj, inline, v <head>). Brez JS ostane vsa vsebina vidna —
   parallax/reveal krepita postavitev, je pa ne ustvarjata. ──────── */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity var(--dur-slow) var(--ease-premium), transform var(--dur-slow) var(--ease-premium); }
.js .reveal.je-vidno{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

/* ── parallax sloji ────────────────────────────────────────── */
[data-parallax]{ will-change:transform; }
@media (max-width:760px), (prefers-reduced-motion:reduce){
  [data-parallax]{ transform:none !important; }
}

/* ── PREMIUM PRODUKTNI SLIKOVNI GIB (avgust 2026) — skupen, generičen
   sistem za produktne podstrani (DeliMe/TAStudio/Booking Studio):
   scroll-razkritje z rahlim povečanjem, hover "camera push-in"
   priličenje slike znotraj fiksnega okvirja, mikro-parallax vsebine
   slike (ponovna uporaba obstoječega splošnega [data-parallax]
   mehanizma iz motion.js — BREZ novega JS zanj). Vse prek opt-in
   razredov (".reveal-slika", ".produkt-vizual", ".produkt-slika-plast"),
   privzeto brez vpliva na katerikoli obstoječi element na strani —
   uporabljeno samo tam, kjer je razred eksplicitno dodan v HTML-ju.

   ".reveal-slika" razširja obstoječi ".reveal" (dodan poleg njega, ne
   namesto) z rahlim scale(.985→1), da slike ob razkritju delujejo
   nekoliko bolj "premium" kot navadno besedilo/naslovi (ki ostanejo
   pri navadnem ".reveal" brez scale — namenoma ločeno, da sprememba
   ne vpliva na noben drug del strani).

   ".produkt-vizual" gre na OVOJNI element okoli ".product-moment"
   (že obstoječ splošen razred za produktne "momente") — ob hoverju
   doda rahel dvig + poglobljeno senco OKVIRJU, ločeno od povečave
   SLIKE SAME (".produkt-slika-plast img"), da se učinka ne izključujeta.

   ".produkt-slika-plast" je nov notranji ovoj okoli <img> znotraj
   ".product-moment" (ki ima overflow:hidden) — namenoma nekoliko večji
   od okvirja (inset:-16px zgoraj/spodaj), da mikro-parallax premik
   slike (prek [data-parallax] na tem ovoju) nikoli ne razkrije praznega
   roba. Ločen element od hover-scale <img>, da JS transform (parallax)
   in CSS transform (hover scale) nikoli ne trčita na istem elementu. ─ */
.js .reveal-slika{
  opacity:0; transform:translateY(20px) scale(.985);
  transition:opacity var(--dur-slow) var(--ease-premium), transform var(--dur-slow) var(--ease-premium);
}
.js .reveal-slika.je-vidno{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .reveal-slika{ opacity:1; transform:none; transition:none; } }

.produkt-vizual .product-moment{
  transition:transform var(--dur-slow) var(--ease-premium), box-shadow var(--dur-slow) var(--ease-premium);
}
.produkt-vizual:hover .product-moment{
  transform:translateY(-2px);
  box-shadow:0 34px 78px rgba(4,10,20,.4);
}
.produkt-slika-plast{ position:absolute; inset:-16px 0; }
.produkt-slika-plast img{
  display:block; width:100%; height:100%;
  transition:transform var(--dur-slow) var(--ease-premium);
}
.produkt-vizual:hover .produkt-slika-plast img{ transform:scale(1.03); }
@media (prefers-reduced-motion:reduce){
  /* zmanjšano gibanje: ugasnemo sam učinek (ne samo animacijo vanj) —
     "onemogoči nebistveno povečavo", vsebina ostane povsem uporabna */
  .produkt-vizual:hover .product-moment{ transform:none; box-shadow:var(--sh-lg); }
  .produkt-vizual:hover .produkt-slika-plast img{ transform:none; }
}

/* ── veliki obrezani BP/pikčasti motivi, ki prečkajo meje sekcij ── */
.motif-cross{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  background-image:radial-gradient(circle, currentColor 2.4px, transparent 2.6px);
  background-size:26px 26px;
}
.section-veza{ position:relative; overflow:visible; }

/* ── uradna CGP grafična sredstva (izvoz iz "Biroplast_CGP" PDF-ja) ──
   cgp-circuit.webp: alfa-maska tehničnega circuit vzorca — obarva se
   z background-color/currentColor prek CSS mask, zato je uporabna v
   poljubni CGP barvi in na poljubni podlagi.
   cgp-bp-mark.webp: velik izrez uradnega "BP" logotipskega znaka (moder→
   zelen gradient, kot v CGP), z alfa robom — uporabljena kot pravi
   dekorativni objekt, ne generirana. ─────────────────────────────── */
.gfx-circuit{
  pointer-events:none;
  -webkit-mask-image:url(../assets/graphics/cgp-circuit.webp);
  mask-image:url(../assets/graphics/cgp-circuit.webp);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:cover; mask-size:cover;
  -webkit-mask-position:center; mask-position:center;
  background:currentColor;
}
.gfx-bp-mark{
  pointer-events:none;
  background-image:url(../assets/graphics/cgp-bp-mark.webp);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}

/* ── vstopna animacija heroja (samo ob nalaganju, kratka in umirjena) ──
   Skrito stanje velja samo z JS (glej .js na <html>) — brez JS je
   besedilo takoj v celoti vidno. JS doda .uvedeno na .hero po nalaganju,
   kar sproži prehod pri vseh .hero-in elementih znotraj. ──────────── */
.js .hero .hero-in{
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease-premium), transform .6s var(--ease-premium);
}
.js .hero.uvedeno .hero-in{ opacity:1; transform:none; }
/* hero-vizual (GreenTill) tudi prejema neprestane scroll-parallax
   transform posodobitve iz motion.js — če bi nanj veljal isti
   "transition:transform", bi vsaka scroll posodobitev sprožila 0.6s
   lajšanje in parallax bi zaostajal za scrollom namesto 1:1 odziva.
   Zato tu prehod omejimo samo na opacity; transform prepustimo JS-ju
   brez CSS animacije. */
.js .hero .hero-in-vizual{
  transition-delay:.16s;
  transition-property:opacity;
  transform:none;
}
.js .hero .hero-in-stat{ transition-delay:.32s; }
.js .hero .hero-in-stat:nth-child(2){ transition-delay:.38s; }
.js .hero .hero-in-stat:nth-child(3){ transition-delay:.44s; }
.js .hero .hero-in-stat:nth-child(4){ transition-delay:.5s; }
@media (prefers-reduced-motion:reduce){
  .js .hero .hero-in{ opacity:1; transform:none; transition:none; }
}

/* ── globinske plasti (data-depth-*, upravlja jih js/motion.js) ────── */
[data-depth-y], [data-depth-x], [data-depth-scale]{ will-change:transform; }
@media (prefers-reduced-motion:reduce){
  [data-depth-y], [data-depth-x], [data-depth-scale]{ transform:none !important; }
}