/* MONOPLAST komponente izgleda, verzija 1 (dokument 14, verzija 2). Prenos iz 08-style/direction/assets/css/look.css (nacrt 0.1) posle odluke da se kreće sa izradom.
   Zavisi od colors.css, fonts.css, tokens.css i layout.css. Klase komponenti počinju sa .lk-. Nijedna vrednost se ne piše kao broj ako postoji token. */

/* ---- osnova izgleda */
body { font-weight: var(--mp-fw-regular); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 0; }
h1, h2, h3 { font-weight: var(--mp-fw-medium); letter-spacing: var(--mp-ls-head); }
h1 { letter-spacing: var(--mp-ls-display); font-size: clamp(2.4rem, 6.4vw, 4.75rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.06; }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.2; letter-spacing: var(--mp-ls-small); }
p { color: var(--mp-grey-700); }
.lk-lead { font-size: var(--mp-fs-body-l); color: var(--mp-grey-700); max-width: 80ch; }
.lk-center { text-align: center; justify-items: center; margin-inline: auto; }
.lk-center p { margin-inline: auto; }
.lk-num { font-variant-numeric: tabular-nums; }

/* ---- dugmad, jedan sistem. Ponašanje kao na https://packhelp.com/ (izmereno 2026-11-03): 15 px, težina 400, razmak slova -2 posto, visina 48 px,
   prelaz 250 ms ease-in-out. Glavno dugme na prelasku mišem, pritisku i fokusu postaje tamnije plavo, dugme sa obrisom dobija jedva vidljivu podlogu,
   belo dugme menja boju teksta u plavu, onemogućeno je sivo. */
.lk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--mp-btn-h); padding: 0 var(--mp-btn-pad); border-radius: var(--mp-r-pill);
  font: inherit; font-weight: var(--mp-fw-regular); font-size: var(--mp-btn-fs); letter-spacing: var(--mp-ls-small); line-height: 1;
  text-decoration: none; cursor: pointer; border: var(--mp-line) solid transparent; white-space: nowrap;
  transition: background-color var(--mp-dur-ui) var(--mp-ease-ui), color var(--mp-dur-ui) var(--mp-ease-ui), border-color var(--mp-dur-ui) var(--mp-ease-ui);
}
.lk-btn--primary { background: var(--mp-blue-500); color: var(--mp-white); }
.lk-btn--primary:hover, .lk-btn--primary:active, .lk-btn--primary:focus-visible { background: var(--mp-btn-hover-bg); color: var(--mp-white); }
.lk-btn--outline { background: transparent; color: var(--mp-ink-900); border-color: var(--mp-line-ink); }
.lk-btn--outline:hover, .lk-btn--outline:active, .lk-btn--outline:focus-visible { background: var(--mp-tint-ink); color: var(--mp-ink-900); }
.lk-btn--light { background: var(--mp-white); color: var(--mp-ink-900); }
.lk-btn--light:hover, .lk-btn--light:active, .lk-btn--light:focus-visible { background: var(--mp-white); color: var(--mp-blue-500); }
.lk-btn--outline-light { background: transparent; color: var(--mp-white); border-color: var(--mp-line-white); }
.lk-btn--outline-light:hover, .lk-btn--outline-light:active, .lk-btn--outline-light:focus-visible { background: var(--mp-tint-white); color: var(--mp-white); }
.lk-btn--accent { background: var(--mp-orange-500); color: var(--mp-ink-900); }   /* tamni tekst na narandžastoj, dokument 11 */
.lk-btn--accent:hover, .lk-btn--accent:active, .lk-btn--accent:focus-visible { background: var(--mp-orange-700); color: var(--mp-ink-900); }
.lk-btn[disabled], .lk-btn[aria-disabled="true"] { background: var(--mp-grey-200); color: var(--mp-grey-400); border-color: transparent; pointer-events: none; user-select: none; }
.lk-btn__arrow { display: flex; flex: 0 0 auto; width: 0; margin-left: 0; overflow: hidden; opacity: 0; transition: width var(--mp-dur-arrow), margin-left var(--mp-dur-arrow), opacity var(--mp-dur-arrow); }
/* ---- ikonice, jedan stil: mreža 24, linija 2, zaobljeni krajevi, bez ispune */
.lk-icon { flex: none; fill: none; stroke: currentcolor; stroke-width: var(--mp-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.lk-icon--s { width: var(--mp-icon-s); height: var(--mp-icon-s); }
.lk-icon--m { width: var(--mp-icon-m); height: var(--mp-icon-m); }
.lk-icon--l { width: var(--mp-icon-l); height: var(--mp-icon-l); }
.lk-btn:hover .lk-btn__arrow, .lk-btn:focus-visible .lk-btn__arrow { width: var(--mp-arrow-size); margin-left: var(--mp-arrow-gap); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lk-btn__arrow { transition: none; } }
.lk-btn--sm { min-height: 40px; --mp-btn-pad: 18px; font-size: 0.875rem; }

/* ---- veze: bez podvlačenja, na prelasku mišem pilula kao u zaglavlju (odluka klijenta, drugi krug). Isto za zaglavlje, telo i podnožje */
a { transition: color var(--mp-dur-ui) var(--mp-ease-ui); }
.lk-link, .lk-footer__cols a:not(.lk-logo), .lk-footer__legal a, .lk-dd__panel--wide a { padding: var(--mp-link-pad-y) var(--mp-link-pad-x); margin-inline: calc(-1 * var(--mp-link-pad-x)); border-radius: var(--mp-r-pill); text-decoration: none; transition: background-color var(--mp-dur-nav), color var(--mp-dur-ui) var(--mp-ease-ui); }
.lk-link, .lk-footer__cols a:not(.lk-logo), .lk-footer__legal a, .lk-dd__panel--wide a { color: var(--mp-ink-900); font-weight: var(--mp-fw-regular); letter-spacing: var(--mp-ls-small); }
.lk-link:hover, .lk-footer__cols a:not(.lk-logo):hover, .lk-footer__legal a:hover, .lk-dd__panel--wide a:hover { background: var(--mp-link-hover-bg); }
.lk-actions { display: flex; flex-wrap: wrap; gap: var(--mp-flow-btn); align-items: center; }
.lk-center .lk-actions { justify-content: center; }

/* ---- oznaka iznad naslova (pilula), kao na Packhelp sajtu: siva podloga, mali siv tekst */
.lk-pill { display: inline-block; justify-self: start; width: fit-content; padding: var(--mp-pill-pad-y) var(--mp-pill-pad-x); border-radius: var(--mp-r-pill); background: var(--mp-pill-bg); color: var(--mp-pill-fg); font-size: var(--mp-pill-fs); font-weight: var(--mp-fw-regular); line-height: 1.32; letter-spacing: normal; }
.lk-pill--dark { background: var(--mp-tint-white-strong); color: var(--mp-pill-fg-dark); }

/* ---- zaglavlje */
.lk-header { position: sticky; top: 0; z-index: var(--mp-z-sticky); background: var(--mp-white); border-bottom: var(--mp-line) solid var(--mp-grey-100); }
.lk-header__bar { display: flex; align-items: center; gap: var(--mp-space-5); min-height: 72px; }
.lk-logo img { height: var(--mp-logo-h); width: auto; }
.lk-nav { display: none; margin-left: auto; gap: var(--mp-space-1); align-items: center; }
.lk-nav > a, .lk-dd__trigger { display: inline-flex; align-items: center; gap: var(--mp-space-1); color: var(--mp-ink-900); text-decoration: none; font: inherit; font-size: var(--mp-btn-fs); font-weight: var(--mp-fw-regular); letter-spacing: var(--mp-ls-small); line-height: 1.32; padding: var(--mp-space-2) var(--mp-space-3); border: 0; background: transparent; cursor: pointer; border-radius: var(--mp-r-pill); transition: background-color var(--mp-dur-nav); }
.lk-nav > a:hover, .lk-nav > a[aria-current], .lk-dd:hover > .lk-dd__trigger, .lk-dd[data-open] > .lk-dd__trigger, .lk-dd:has(:focus-visible) > .lk-dd__trigger { background: var(--mp-grey-100); }
.lk-header__tools { margin-left: auto; display: flex; align-items: center; gap: var(--mp-space-3); }
@media (min-width: 1200px) { .lk-nav + .lk-header__tools { margin-left: var(--mp-space-4); } }

/* ---- padajući meni. Stavka sa menijem otvara bela ploča ispod zaglavlja preko cele širine (proizvodi), izbor jezika otvara malu ploču ispod sebe.
   Otvara se na prelasku mišem, fokusu tastature i dodiru, zatvara tasterom Esc. Veza u ploči je ink, na prelasku mišem plava 700 (Packhelp). */
.lk-dd { position: relative; display: none; }
.lk-dd--wide { position: relative; }
.lk-dd__chevron { transition: transform var(--mp-dur-nav); }
.lk-dd:hover .lk-dd__chevron, .lk-dd[data-open] .lk-dd__chevron { transform: rotate(180deg); }
.lk-dd__panel { position: absolute; top: 100%; z-index: var(--mp-z-dropdown); background: var(--mp-white); opacity: 0; visibility: hidden; transition: opacity var(--mp-dur-nav), visibility var(--mp-dur-nav); }
.lk-dd__panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--mp-space-3); }
.lk-dd:hover > .lk-dd__panel, .lk-dd[data-open] > .lk-dd__panel, .lk-dd:has(:focus-visible) > .lk-dd__panel { opacity: 1; visibility: visible; }
.lk-dd__panel a { color: var(--mp-ink-900); text-decoration: none; font-size: var(--mp-btn-fs); letter-spacing: var(--mp-ls-small); line-height: 1.32; transition: color var(--mp-dur-ui) var(--mp-ease-ui); }
.lk-dd__panel h3 { font-size: var(--mp-fs-h4); font-weight: var(--mp-fw-regular); letter-spacing: var(--mp-ls-head); margin-bottom: var(--mp-space-3); }
.lk-dd__panel--wide ul, .lk-dd__panel--lang ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mp-space-2); }
.lk-dd__panel--lang a[aria-current] { font-weight: var(--mp-fw-medium); }
.lk-menu-btn { width: var(--mp-tap); height: var(--mp-tap); display: inline-grid; place-items: center; border: 0; background: transparent; cursor: pointer; border-radius: var(--mp-r-pill); margin-right: calc(-1 * var(--mp-menu-bleed)); }
.lk-drawer { display: none; position: fixed; left: 0; right: 0; top: var(--lk-drawer-top, var(--mp-menu-bar)); bottom: 0; z-index: var(--mp-z-sticky); background: var(--mp-white); padding-inline: var(--mp-page-margin); border-top: var(--mp-line) solid var(--mp-grey-100); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: var(--mp-space-5); }
.lk-drawer[data-open] { display: block; }
.lk-drawer__list { list-style: none; margin: 0; padding: 0; }
.lk-drawer__list > li + li { border-top: var(--mp-line) solid var(--mp-grey-100); }
.lk-drawer__list > li > a, .lk-drawer__group summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--mp-drawer-row); color: var(--mp-ink-900); text-decoration: none; font-size: var(--mp-drawer-fs); font-weight: var(--mp-fw-regular); letter-spacing: var(--mp-ls-head); cursor: pointer; list-style: none; }
.lk-drawer__group summary::-webkit-details-marker { display: none; }
.lk-drawer__group summary .lk-icon { width: var(--mp-icon-m); height: var(--mp-icon-m); color: var(--mp-grey-500); }
.lk-drawer__group .lk-dd__chevron { transition: transform var(--mp-dur-nav); }
.lk-drawer__group[open] .lk-dd__chevron { transform: rotate(180deg); }
.lk-drawer__sub { display: grid; gap: var(--mp-space-4); padding-bottom: var(--mp-space-4); }
.lk-drawer__sub h3 { margin: 0 0 var(--mp-space-2); font-size: var(--mp-fs-caption); font-weight: var(--mp-fw-regular); color: var(--mp-grey-500); }
.lk-drawer__sub ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mp-space-1); }
.lk-drawer__sub a { display: flex; align-items: center; min-height: var(--mp-tap); color: var(--mp-ink-900); text-decoration: none; font-size: var(--mp-btn-fs); letter-spacing: var(--mp-ls-small); }
.lk-drawer__foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mp-space-3); padding-top: var(--mp-space-4); border-top: var(--mp-line) solid var(--mp-grey-100); }
.lk-drawer__foot .lk-btn { width: 100%; }
.lk-menu-btn path { transition: transform var(--mp-dur-nav), opacity var(--mp-dur-nav); transform-box: fill-box; transform-origin: center; }
.lk-menu-btn[aria-expanded="true"] path:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.lk-menu-btn[aria-expanded="true"] path:nth-child(2) { opacity: 0; }
.lk-menu-btn[aria-expanded="true"] path:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
html.lk-menu-open { overflow: hidden; }
@media (min-width: 1200px) { .lk-nav { display: flex; } .lk-dd { display: block; } .lk-menu-btn, .lk-drawer { display: none !important; } }

/* ---- hero, tipografija i slike */
.lk-hero { padding-block: clamp(48px, 8vw, 112px) clamp(32px, 5vw, 64px); }
.lk-hero h1 { margin-inline: auto; }
.lk-cycle { position: relative; z-index: 0; display: inline-block; width: var(--mp-cycle-size); height: var(--mp-cycle-size); overflow: hidden; border-radius: var(--mp-cycle-r); background: var(--mp-grey-100); transform: rotate(var(--mp-cycle-rot)); transition: transform var(--mp-dur-ui); vertical-align: middle; margin-inline: var(--mp-cycle-gap-before) var(--mp-cycle-gap-after); }
.lk-cycle__frame { position: absolute; inset: 0; display: block; opacity: 0; animation: lk-cycle-4 calc(4 * var(--mp-cycle-step)) steps(1) infinite; animation-delay: calc(var(--i) * var(--mp-cycle-step)); }
.lk-cycle__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes lk-cycle-4 { 0%, 24.99% { opacity: 1; } 25%, 100% { opacity: 0; } }
@media (hover: hover) { .lk-cycle:hover { z-index: 2; transform: rotate(0deg) scale(var(--mp-cycle-zoom)); } }
@media (prefers-reduced-motion: reduce) { .lk-cycle { transition: none; } .lk-cycle__frame { animation: none; } .lk-cycle__frame:first-child { opacity: 1; } }

/* ---- red fotografija, zaobljene, različite visine */
.lk-rail { display: grid; gap: var(--mp-gap-x); grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
.lk-rail figure { margin: 0; overflow: hidden; border-radius: var(--mp-r-3); background: var(--mp-surface); }
.lk-rail img, .lk-tile img, .lk-photo img { width: 100%; height: 100%; object-fit: cover; }
.lk-rail .a { grid-column: span 3; aspect-ratio: 3 / 4; }
.lk-rail .b { grid-column: span 6; aspect-ratio: 16 / 11; }
.lk-rail .c { grid-column: span 3; aspect-ratio: 3 / 4; }
.lk-photo { margin: 0; overflow: hidden; border-radius: var(--mp-r-3); background: var(--mp-surface); }

/* ---- pločice proizvoda */
.lk-tiles { display: grid; gap: var(--mp-gap-block) var(--mp-gap-x); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lk-tile { text-decoration: none; color: inherit; display: block; }
.lk-tile figure { margin: 0; aspect-ratio: var(--mp-ar-tile); border-radius: var(--mp-r-2); background: var(--mp-surface); overflow: hidden; }
.lk-tile img { transition: transform var(--mp-dur-zoom); }
@media (hover: hover) { .lk-tile:hover img { transform: scale(var(--mp-zoom-tile)); } }
.lk-tile h3 { display: block; width: fit-content; margin-top: var(--mp-flow-cap); font-size: 1.0625rem; font-weight: var(--mp-fw-medium); }
.lk-tile p { font-size: var(--mp-fs-small); color: var(--mp-grey-500); margin-top: var(--mp-space-1); }
@media (min-width: 768px) { .lk-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- paneli */
.lk-inset { margin-inline: var(--mp-inset); }
.lk-panel { border-radius: var(--mp-r-4); padding: clamp(24px, 5vw, 72px); }
.lk-panel--dark { background: var(--mp-panel-dark); color: var(--mp-white); }
.lk-panel--dark p { color: rgba(255, 255, 255, .75); }
.lk-panel--dark h2, .lk-panel--dark h3 { color: var(--mp-white); }

/* ---- izračun cene */
.lk-calc { display: grid; gap: var(--mp-gap-block); }
@media (min-width: 900px) { .lk-calc { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.lk-calc__form { display: grid; gap: var(--mp-space-4); grid-template-columns: 1fr 1fr; align-content: start; }
.lk-calc__form .mp-field:first-child, .lk-calc__form .wide { grid-column: 1 / -1; }
.lk-calc .mp-field label { font-size: var(--mp-fs-small); color: var(--mp-grey-700); }
.lk-calc .mp-field input, .lk-calc .mp-field select { border-radius: var(--mp-r-1); border-width: var(--mp-line); border-color: transparent; background: var(--mp-white); font-weight: var(--mp-fw-medium); }
.lk-calc .mp-field input:focus, .lk-calc .mp-field select:focus { border-color: var(--mp-blue-500); outline: var(--mp-line-strong) solid var(--mp-blue-500); outline-offset: 2px; }
.lk-result { background: var(--mp-white); border-radius: var(--mp-r-3); padding: clamp(20px, 3vw, 36px); display: grid; gap: var(--mp-space-4); align-content: space-between; }
.lk-result dl { margin: 0; display: grid; gap: var(--mp-space-3); }
.lk-result dl div { display: flex; justify-content: space-between; gap: var(--mp-space-4); border-bottom: var(--mp-line) solid var(--mp-grey-100); padding-bottom: var(--mp-space-3); }
.lk-result dt { color: var(--mp-grey-700); } .lk-result dd { margin: 0; font-weight: var(--mp-fw-medium); font-variant-numeric: tabular-nums; }
.lk-result .total { font-size: clamp(1.75rem, 3.4vw, 2.5rem); letter-spacing: var(--mp-ls-head); font-weight: var(--mp-fw-medium); font-variant-numeric: tabular-nums; }
.lk-note { font-size: var(--mp-fs-caption); color: var(--mp-grey-500); }

/* ---- koraci, lista sa linijama */
.lk-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; border-top: var(--mp-line) solid var(--mp-grey-300); }
.lk-steps li { counter-increment: s; display: grid; grid-template-columns: 3rem 1fr; gap: var(--mp-space-3) var(--mp-space-4); padding: var(--mp-space-5) 0; border-bottom: var(--mp-line) solid var(--mp-grey-300); }
.lk-steps li::before { content: counter(s, decimal-leading-zero); color: var(--mp-grey-500); font-variant-numeric: tabular-nums; padding-top: 0.2em; }
.lk-steps h3 { font-size: 1.25rem; grid-column: 2; } .lk-steps p { grid-column: 2; margin-top: var(--mp-space-1); font-size: var(--mp-fs-small); max-width: 52ch; }
@media (min-width: 900px) { .lk-steps li { grid-template-columns: 4rem 22rem 1fr; align-items: baseline; } .lk-steps h3 { grid-column: 2; } .lk-steps p { grid-column: 3; margin-top: 0; } }

/* ---- kartice na tamnoj ploči */
.lk-cards { display: grid; gap: var(--mp-gap-x); }
@media (min-width: 900px) { .lk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lk-card { background: rgba(255, 255, 255, .08); border-radius: var(--mp-r-3); padding: var(--mp-space-6); display: grid; gap: var(--mp-space-3); align-content: start; }
.lk-card b { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: var(--mp-fw-medium); letter-spacing: var(--mp-ls-head); line-height: 1.05; }
.lk-card p { font-size: var(--mp-fs-small); }
.lk-plant { display: grid; gap: var(--mp-gap-block); }
@media (min-width: 900px) { .lk-plant { grid-template-columns: 1fr 1fr; align-items: center; } }


/* ---- kontakt, podnožje */
.lk-contact { display: grid; gap: var(--mp-gap-block); }
@media (min-width: 900px) { .lk-contact { grid-template-columns: 1fr 1fr; align-items: center; } }
.lk-footer { padding-block: var(--mp-footer-pad-top) var(--mp-footer-pad-bottom); }
.lk-footer__cols h4 { font-size: var(--mp-fs-small); font-weight: var(--mp-fw-medium); color: var(--mp-grey-500); margin-bottom: var(--mp-space-3); }
.lk-footer__cols a:not(.lk-logo) { font-size: var(--mp-btn-fs); letter-spacing: var(--mp-ls-small); display: block; width: fit-content; color: var(--mp-ink-900); text-decoration: none; }
.lk-footer__cols p { font-size: var(--mp-fs-small); }



/* ---- sekcije ritam */
.lk-section { padding-block: clamp(56px, 7vw, 104px); }
.lk-section--tight { padding-block: clamp(32px, 5vw, 72px); }
.lk-head { margin-bottom: var(--mp-head-mb); }

.lk-head--row { display: grid; gap: var(--mp-flow-action); }
@media (min-width: 900px) { .lk-head--row { grid-template-columns: 1fr auto; align-items: end; } }

/* ---- telefon */
@media (max-width: 767px) {
  .lk-rail .a { grid-column: span 6; } .lk-rail .b { grid-column: span 12; order: -1; } .lk-rail .c { grid-column: span 6; }
  .lk-calc__form { grid-template-columns: 1fr; }
  .lk-hero .lk-actions .lk-btn { flex: 1 1 100%; }
  .lk-hero .lk-link { width: 100%; text-align: center; }
  .lk-tiles.scroll { --fade-l: 0px; --fade-r: 0px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--mp-gap-x); margin-inline: calc(-1 * var(--mp-page-margin)); padding-inline: var(--mp-page-margin); scroll-padding-inline: var(--mp-page-margin); scrollbar-width: none; overflow-y: hidden; overscroll-behavior-x: contain; }
  .lk-tiles.scroll .lk-tile { flex: 0 0 62vw; scroll-snap-align: start; }
  .lk-panel { border-radius: var(--mp-r-3); }
}
@media (prefers-reduced-motion: reduce) { .lk-btn, .lk-tile img { transition: none; } .lk-tile:hover img { transform: none; } }

/* ---- ritam bloka teksta, isti u zaglavlju sekcije, herou, izračunu, pogonu i kontaktu (dokument 14, poglavlje 10).
   Oznaka 16, naslov i paragraf 24, paragraf i dugme 32, dugme i dugme 12. Slika i natpis 12, slika i slika razmak kolona. */
.lk-flow, .lk-head { display: block; }
.lk-flow > * + *, .lk-head > * + * { margin-top: var(--mp-flow-title); }
.lk-flow > .lk-pill, .lk-head > .lk-pill { display: block; }
.lk-flow > .lk-pill + *, .lk-head > .lk-pill + * { margin-top: var(--mp-flow-label); }
.lk-flow > :is(.lk-actions, form, .lk-contact__rows), .lk-head > .lk-actions { margin-top: var(--mp-flow-action); }
.lk-center .lk-pill { margin-inline: auto; }
.lk-head--flush { margin-bottom: 0; }

/* ---- Apple kontinuirani ugao (squircle) na svim zaobljenim površinama osim pilula */
.lk-skip, .lk-rail figure, .lk-photo, .lk-tile figure, .lk-panel, .lk-result, .lk-card, .lk-mosaic figure, .lk-cycle, .lk-faq__item { corner-shape: var(--mp-corner); }

/* ---- zrno na fotografijama, filmsko i jedva primetno: sloj šuma preko slike, meko mešanje, ne hvata dodir. Klasu .lk-grain dobija roditelj svake fotografije automatski (build-prototype.py, ensure_grain), pa zrno ostaje i kad se slika zameni ili doda nova */
.lk-grain { position: relative; isolation: isolate; }
.lk-cycle__frame.lk-grain { position: absolute; }
.lk-grain::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: var(--mp-grain); background-size: var(--mp-grain-size); mix-blend-mode: soft-light; opacity: var(--mp-grain-opacity);
}

/* ---- padajuće ploče, meni proizvoda i izbor jezika su ista komponenta: zaobljena ploča ispod stavke, tanka linija, meka senka, veze kao pilule */
.lk-dd__panel { margin-top: var(--mp-dd-gap); border: var(--mp-line) solid var(--mp-grey-300); border-radius: var(--mp-dd-r); padding: var(--mp-space-3); corner-shape: var(--mp-corner); }
.lk-dd__panel--wide { left: 0; padding: var(--mp-space-5); display: grid; grid-template-columns: repeat(3, max-content); gap: var(--mp-space-6); }
.lk-dd__panel--lang { right: 0; width: var(--mp-dd-lang-w); }
.lk-dd__panel a { display: flex; align-items: center; justify-content: space-between; width: fit-content; min-width: 100%; padding: var(--mp-space-2) var(--mp-space-3); margin-inline: 0; border-radius: var(--mp-r-pill); }
.lk-dd__panel--wide a { min-width: 0; margin-inline: calc(-1 * var(--mp-space-3)); }
.lk-dd__panel a:hover { background: var(--mp-link-hover-bg); }
.lk-dd__panel--wide h3 { margin-bottom: var(--mp-space-4); }
.lk-dd__panel--wide ul, .lk-dd__panel--lang ul { gap: var(--mp-space-1); }

/* ---- polja obrasca kao kapsule, kao dugme. Veće polje poruke je zaobljena ploča (squircle). Strelica izbora ima svoje mesto, ne lepi se uz ivicu */
.lk-calc .mp-field input, .lk-calc .mp-field select, .lk-contact .mp-field input, .lk-contact .mp-field select { border-radius: var(--mp-r-pill); padding-inline: var(--mp-field-pad-x); corner-shape: round; }
.lk-contact .mp-field textarea { border-radius: var(--mp-field-r-area); padding: var(--mp-space-4) var(--mp-field-pad-x); corner-shape: var(--mp-corner); }
.mp-field select, .lk-calc .mp-field select, .lk-contact .mp-field select { -webkit-appearance: none; appearance: none; padding-right: var(--mp-select-pad-r); background-image: var(--mp-select-chevron); background-repeat: no-repeat; background-position: right var(--mp-select-chevron-x) center; background-size: var(--mp-icon-m); cursor: pointer; }

/* ---- prelom: dva ravnomerna reda na širem ekranu, na telefonu običan uravnotežen prelom */
.lk-br { display: none; }
@media (min-width: 768px) { .lk-br { display: inline; } }
.lk-lead, .lk-head p, .lk-card p, .lk-steps p, .lk-note, .lk-tile p { text-wrap: balance; }
.lk-head h2, .lk-head p, .lk-lead { max-width: none; }
.lk-hero h1 br { display: inline; }
.lk-calc .lk-lead, .lk-plant .lk-lead, .lk-contact .lk-lead { font-size: var(--mp-fs-body); }
.lk-head.lk-head--row { display: grid; }

/* ---- dva dugmeta u herou iste širine (širina većeg) */
.lk-hero .lk-actions { display: grid; width: fit-content; margin-inline: auto; grid-auto-flow: column; grid-auto-columns: 1fr; }
@media (max-width: 767px) { .lk-hero .lk-actions { width: auto; grid-auto-flow: row; } }
/* slika posle koje odmah ide zarez, bez razmaka */
.lk-cycle--tight { margin-right: 0; }


/* ---- traka sa kontaktom iznad zaglavlja: adresa levo, telefoni i adresa e-pošte desno, veze kao pilule na prelasku mišem. Ispod 900 px samo prvi telefon i e-pošta, ispod 640 px samo prvi telefon */
.lk-topbar { background: var(--mp-topbar-bg); color: var(--mp-topbar-fg); font-size: var(--mp-topbar-fs); letter-spacing: var(--mp-ls-small); }
.lk-topbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--mp-space-5); min-height: var(--mp-topbar-h); }
.lk-topbar a { display: inline-flex; align-items: center; gap: var(--mp-space-2); line-height: 1.32; }
.lk-topbar__addr { display: none !important; margin-left: calc(-1 * var(--mp-link-pad-x)); }
.lk-topbar__links { display: flex; align-items: center; gap: var(--mp-space-1); margin-left: auto; margin-right: calc(-1 * var(--mp-link-pad-x)); }
.lk-topbar a { color: var(--mp-topbar-fg); text-decoration: none; padding: var(--mp-link-pad-y) var(--mp-link-pad-x); border-radius: var(--mp-r-pill); transition: background-color var(--mp-dur-nav); }
.lk-topbar a:hover, .lk-topbar a:focus-visible { background: var(--mp-tint-white-strong); }
.lk-topbar a:focus-visible { outline-color: var(--mp-topbar-fg); }
.lk-topbar__more, .lk-topbar__mail { display: none !important; }
@media (max-width: 639px) { .lk-topbar__in { justify-content: center; } .lk-topbar__links { margin-left: 0; } }
@media (min-width: 640px) { .lk-topbar__links { margin-left: 0; } .lk-topbar__in { justify-content: flex-end; } .lk-topbar__mail { display: inline-flex !important; } }
@media (min-width: 900px) { .lk-topbar__addr { display: inline-flex !important; } .lk-topbar__in { justify-content: space-between; } .lk-topbar__more { display: inline-flex !important; } }

/* zaglavlje preko trake sa zaobljenim gornjim uglovima (squircle), kao na Packhelp sajtu. Traka ima dno ispod zaglavlja, uglovi otkrivaju plavu. Kad se strana pomeri i zaglavlje se zalepi, uglovi nestaju */
.lk-topbar { padding-bottom: var(--mp-header-r); }
.lk-header { margin-top: calc(-1 * var(--mp-header-r)); border-radius: var(--mp-header-r) var(--mp-header-r) 0 0; corner-shape: var(--mp-corner); transition: border-radius var(--mp-dur-ui) var(--mp-ease-ui); }
.is-scrolled .lk-header { border-radius: 0; }
@media (prefers-reduced-motion: reduce) { .lk-header { transition: none; } }

/* ---- mreža u pozadini hero sekcije: linije sa tačkom na svakom preseku, vidi se na nekoliko mekih mesta, iza svih elemenata. Samo hero (odluka klijenta, četvrti krug) */
.lk-hero, .lk-panel--grey, .lk-panel--blue { position: relative; isolation: isolate; }
.lk-panel--grey, .lk-panel--blue { overflow: hidden; }
.lk-hero::before, .lk-panel--grey::before, .lk-panel--blue::before { border-radius: inherit; content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, var(--mp-pattern-color) var(--mp-pattern-dot), transparent calc(var(--mp-pattern-dot) + .5px)), linear-gradient(90deg, var(--mp-pattern-color) var(--mp-line-strong), transparent var(--mp-line-strong)), linear-gradient(180deg, var(--mp-pattern-color) var(--mp-line-strong), transparent var(--mp-line-strong));
  background-size: var(--mp-pattern-size) var(--mp-pattern-size);
  background-position: calc(var(--mp-pattern-size) / 2 + var(--mp-line-strong) / 2) calc(var(--mp-pattern-size) / 2 + var(--mp-line-strong) / 2), 0 0, 0 0;   /* tačke su na presecima linija */
  -webkit-mask-image: var(--mp-pattern-patches); mask-image: var(--mp-pattern-patches); }

/* ---- znakovi firmi u herou: siva traka koja se polako i bez prekida kreće, ivice se utapaju (maska), bez veza i bez okvira, svi znakovi iste optičke veličine (polje 200 x 72, pravi ih tools/brand/build_client_logos.py) */
.lk-clients { width: 100%; min-width: 0; margin-top: var(--mp-facts-gap); color: var(--mp-client-fg); }
.lk-clients__label { display: flex; align-items: center; gap: var(--mp-space-4); justify-content: center; font-size: var(--mp-client-label-fs); letter-spacing: var(--mp-ls-small); color: var(--mp-client-fg); }
.lk-clients__label::before, .lk-clients__label::after { content: ""; flex: 0 1 var(--mp-client-rule-w); height: var(--mp-line); background: var(--mp-grey-300); }
.lk-clients__window { margin-top: var(--mp-space-6); overflow: hidden; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--mp-client-fade), #000 calc(100% - var(--mp-client-fade)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--mp-client-fade), #000 calc(100% - var(--mp-client-fade)), transparent); }
.lk-clients__track { display: flex; width: max-content; animation: lk-clients var(--mp-client-dur) linear infinite; }
.lk-clients__list { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; }
.lk-clients__list li { flex: none; padding-inline: calc(var(--mp-client-gap) / 2); }
.lk-clients__logo { display: block; width: var(--mp-client-w); height: auto; aspect-ratio: 200 / 72; }
@keyframes lk-clients { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lk-clients__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; } .lk-clients__list[aria-hidden] { display: none; } .lk-clients__list { flex-wrap: wrap; justify-content: center; } .lk-clients__window { -webkit-mask-image: none; mask-image: none; } }
.lk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- paneli sa mrežom: svetli panel (izračun cene) dobija mrežu boje pilule, plavi panel (pogon) belu. Plavi panel je jaka plava iz logotipa */
.lk-panel--grey { --mp-pattern-color: var(--mp-pattern-color-grey-panel); background: var(--mp-panel-grey); color: var(--mp-ink-900); }
.lk-panel--blue { --mp-pattern-color: var(--mp-pattern-color-white); background: var(--mp-blue-500); color: var(--mp-white); }
#cenovnik .lk-panel::before { -webkit-mask-image: var(--mp-pattern-patches-b); mask-image: var(--mp-pattern-patches-b); }
.lk-panel--blue p { color: rgba(255, 255, 255, .88); }
.lk-panel--blue h2, .lk-panel--blue h3 { color: var(--mp-white); }
.lk-panel--blue .lk-card { background: var(--mp-tint-white-strong); }
.lk-panel--blue .lk-card b { color: var(--mp-white); }

/* ---- asortiman kao na Packhelp sajtu: grupe su kartice u zaobljenoj traci (pilula sa belim izabranim), desno dugme sa obrisom, ispod traka pločica koja se pomera strelicom */
.lk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--mp-space-4); margin-bottom: var(--mp-flow-action); }
.lk-tabs { display: inline-flex; gap: var(--mp-space-1); padding: var(--mp-space-1); background: var(--mp-tab-bg); border-radius: var(--mp-r-pill); max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.lk-tabs::-webkit-scrollbar { display: none; }
.lk-tab { flex: none; min-height: var(--mp-tab-h); padding: 0 var(--mp-tab-pad); border: 0; border-radius: var(--mp-r-pill); background: transparent; color: var(--mp-grey-500); font: inherit; font-size: var(--mp-btn-fs); letter-spacing: var(--mp-ls-small); cursor: pointer; transition: background-color var(--mp-dur-nav), color var(--mp-dur-nav); }
@media (max-width: 767px) { .lk-tab { padding-inline: var(--mp-space-4); } }
.lk-tab:hover { color: var(--mp-ink-900); }
.lk-tab[aria-selected="true"] { background: var(--mp-white); color: var(--mp-ink-900); }
.lk-slider { position: relative; }
.lk-slider[hidden] { display: none; }
.lk-slider.has-prev .lk-slider__track, .lk-tiles.scroll.has-prev { --fade-l: var(--mp-swipe-fade); }
.lk-slider.has-next .lk-slider__track, .lk-tiles.scroll.has-next { --fade-r: var(--mp-swipe-fade); }
.lk-slider__track { --fade-l: 0px; --fade-r: 0px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); display: flex; gap: var(--mp-gap-x); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overflow-y: hidden; overscroll-behavior-x: contain; }
.lk-slider__track::-webkit-scrollbar { display: none; }
.lk-slider__track .lk-tile { flex: 0 0 calc((100% - 3 * var(--mp-gap-x)) / var(--mp-slider-visible)); scroll-snap-align: start; }
.lk-slider__track .lk-tile:last-child { scroll-snap-align: end; }
.lk-slider__btn { position: absolute; top: var(--mp-slider-btn-top); width: var(--mp-slider-btn); height: var(--mp-slider-btn); margin-top: calc(var(--mp-slider-btn) / -2); display: grid; place-items: center; border: var(--mp-line) solid var(--mp-grey-300); border-radius: var(--mp-r-pill); background: var(--mp-white); color: var(--mp-ink-900); cursor: pointer; transition: background-color var(--mp-dur-nav); }
.lk-slider__btn:hover { background: var(--mp-grey-100); }
.lk-slider__btn[hidden] { display: none; }
.lk-slider__btn--next { right: calc(var(--mp-slider-btn) / -2); }
.lk-slider__btn--prev { left: calc(var(--mp-slider-btn) / -2); }
@media (max-width: 767px) { .lk-slider__track { margin-inline: calc(-1 * var(--mp-page-margin)); padding-inline: var(--mp-page-margin); scroll-padding-inline: var(--mp-page-margin); } .lk-slider__track .lk-tile { flex-basis: 62vw; } .lk-slider__btn { display: none !important; } .lk-toolbar { flex-direction: column; align-items: stretch; } .lk-toolbar .lk-btn { align-self: flex-start; } }

/* ---- primeri štampe kao mozaik: fotografije različite veličine u jednoj mreži, natpis je pilula na slici, slika se uvećava na prelasku mišem */
.lk-mosaic { display: grid; gap: var(--mp-gap-x); grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: var(--mp-mosaic-row); }
.lk-mosaic figure { margin: 0; overflow: hidden; border-radius: var(--mp-r-3); background: var(--mp-surface); }
.lk-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--mp-dur-zoom); }
@media (hover: hover) { .lk-mosaic figure:hover img { transform: scale(var(--mp-zoom-tile)); } }
.lk-mosaic figcaption { position: absolute; left: var(--mp-space-4); bottom: var(--mp-space-4); z-index: 2; padding: var(--mp-pill-pad-y) var(--mp-pill-pad-x); border-radius: var(--mp-r-pill); background: var(--mp-white); color: var(--mp-ink-900); font-size: var(--mp-pill-fs); line-height: 1.32; }
.lk-mosaic .a { grid-column: 1 / span 5; grid-row: span 2; }
.lk-mosaic .b { grid-column: 6 / span 4; }
.lk-mosaic .c { grid-column: 10 / span 3; }
.lk-mosaic .d { grid-column: 6 / span 3; }
.lk-mosaic .e { grid-column: 9 / span 4; }
@media (max-width: 767px) {
  .lk-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: var(--mp-mosaic-row-phone); }
  .lk-mosaic .a { grid-column: 1 / -1; grid-row: span 2; }
  .lk-mosaic .b, .lk-mosaic .c, .lk-mosaic .d, .lk-mosaic .e { grid-column: auto; }
  .lk-mosaic figcaption { right: var(--mp-space-4); width: fit-content; max-width: calc(100% - 2 * var(--mp-space-4)); }
}
@media (prefers-reduced-motion: reduce) { .lk-mosaic img, .lk-slider__track { transition: none; scroll-behavior: auto; } }

/* ---- utapanje na krajevima trake asortimana: samo na strani na kojoj ima još sadržaja, nema oštrog preseka */
.lk-slider.has-prev .lk-slider__track { --fade-l: var(--mp-slider-fade); }
.lk-slider.has-next .lk-slider__track { --fade-r: var(--mp-slider-fade); }

/* ---- kontakt: jaka plava ploča sa mrežom, levo podaci sa ikonicama, desno bela kartica sa obrascem */
.lk-contact__rows { display: grid; gap: var(--mp-space-1); }
.lk-contact__row { display: flex; align-items: center; gap: var(--mp-space-4); width: fit-content; max-width: 100%; padding: var(--mp-space-2) var(--mp-space-4) var(--mp-space-2) var(--mp-space-2); margin-left: calc(-1 * var(--mp-space-2)); border-radius: var(--mp-r-pill); color: var(--mp-white); text-decoration: none; transition: background-color var(--mp-dur-nav); }
.lk-contact__row:hover, .lk-contact__row:focus-visible { background: var(--mp-tint-white-strong); }
.lk-contact__row:focus-visible { outline-color: var(--mp-white); }
.lk-contact__chip { flex: none; display: grid; place-items: center; width: var(--mp-contact-chip); height: var(--mp-contact-chip); border-radius: var(--mp-r-pill); background: var(--mp-tint-white-strong); }
.lk-contact__row small { display: block; font-size: var(--mp-fs-caption); color: rgba(255, 255, 255, .78); line-height: 1.3; }
.lk-contact__row b { display: block; font-size: var(--mp-fs-h4); font-weight: var(--mp-fw-medium); letter-spacing: var(--mp-ls-small); line-height: 1.3; overflow-wrap: anywhere; }
.lk-contact__form { display: grid; gap: var(--mp-space-4); padding: clamp(24px, 3vw, 40px); background: var(--mp-white); border-radius: var(--mp-r-3); corner-shape: var(--mp-corner); color: var(--mp-ink-900); }
.lk-contact__pair { display: grid; gap: var(--mp-space-4); }
@media (min-width: 640px) { .lk-contact__pair { grid-template-columns: 1fr 1fr; } }
.lk-contact__form .mp-field label { font-size: var(--mp-fs-small); font-weight: var(--mp-fw-regular); color: var(--mp-grey-700); }
.lk-contact__form .mp-field input, .lk-contact__form .mp-field textarea { background: var(--mp-grey-100); border-color: transparent; color: var(--mp-ink-900); border-radius: var(--mp-r-pill); padding-inline: var(--mp-field-pad-x); }
.lk-contact__form .mp-field textarea { border-radius: var(--mp-field-r-area); padding: var(--mp-space-4) var(--mp-field-pad-x); min-height: calc(var(--mp-field-h) * 3); resize: vertical; }
.lk-contact__form .mp-field input:focus, .lk-contact__form .mp-field textarea:focus { background: var(--mp-white); border-color: var(--mp-blue-500); outline: var(--mp-line-strong) solid var(--mp-blue-500); outline-offset: 2px; }

/* ---- česta pitanja kao na Packhelp sajtu: levo naslov, desno kartice u boji papira koje se otvaraju, strelica se okreće, otvorena je jedna po jedna */
.lk-faq { display: grid; gap: var(--mp-gap-block); }
@media (min-width: 900px) { .lk-faq { grid-template-columns: 1fr 1fr; align-items: start; } }
.lk-faq__list { display: grid; gap: var(--mp-space-3); }
.lk-faq__item { background: var(--mp-faq-bg); border-radius: var(--mp-r-2); }
.lk-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--mp-space-4); padding: var(--mp-faq-pad-y) var(--mp-faq-pad-x); font-size: var(--mp-btn-fs); font-weight: var(--mp-fw-medium); letter-spacing: var(--mp-ls-small); line-height: 1.32; cursor: pointer; list-style: none; border-radius: var(--mp-r-2); }
.lk-faq__item summary::-webkit-details-marker { display: none; }
.lk-faq__item summary:focus-visible { outline: var(--mp-focus-w) solid var(--mp-blue-500); outline-offset: 2px; }
.lk-faq__item .lk-icon { transition: transform var(--mp-dur-ui) var(--mp-ease-ui); }
.lk-faq__item[open] .lk-icon { transform: rotate(180deg); }
.lk-faq__item p { padding: 0 var(--mp-faq-pad-x) var(--mp-faq-pad-y); font-size: var(--mp-fs-small); color: var(--mp-grey-700); max-width: none; }
@media (prefers-reduced-motion: reduce) { .lk-faq__item .lk-icon { transition: none; } }

/* ---- nagnuta traka sa porukom koja klizi, ukras između odeljaka. Traka je šira od ekrana, omot seče višak, pa nema horizontalnog skrola */
.lk-ribbon__track { display: flex; width: max-content; animation: lk-ribbon var(--mp-ribbon-dur) linear infinite; }
.lk-ribbon__list { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.lk-ribbon__list li { display: inline-flex; align-items: center; gap: var(--mp-space-2); margin-right: var(--mp-ribbon-gap); white-space: nowrap; font-size: var(--mp-ribbon-fs); letter-spacing: var(--mp-ls-small); line-height: 1.32; color: var(--mp-ribbon-fg); }
.lk-ribbon__list b { font-weight: var(--mp-fw-medium); }
@keyframes lk-ribbon { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lk-ribbon__track { animation: none; } }

/* ---- izračun cene na jakoj plavoj ploči (bela mreža), pogon na sivoj ploči sa belom mrežom */
.lk-calc__form .mp-field label { color: var(--mp-white); }
.lk-calc__form .lk-note { color: rgba(255, 255, 255, .85); }
.lk-calc .mp-field input:focus, .lk-calc .mp-field select:focus { border-color: var(--mp-white); outline: var(--mp-line-strong) solid var(--mp-white); outline-offset: 2px; }
.lk-result p { color: var(--mp-grey-700); }
.lk-result .lk-note { color: var(--mp-grey-500); }
.lk-result .total { color: var(--mp-ink-900); }
.lk-panel--grey .lk-card { background: var(--mp-white); }
.lk-panel--grey .lk-card p { color: var(--mp-grey-500); }
.lk-panel--grey .lk-card b { color: var(--mp-ink-900); }
.lk-calc .mp-field input, .lk-calc .mp-field select { color: var(--mp-ink-900); }
.lk-result { color: var(--mp-ink-900); }
.lk-result dd { color: var(--mp-ink-900); }
.lk-panel--grey .lk-pill { background: var(--mp-white); }

/* ---- podnožje: logotip je isto što i u zaglavlju (bez pilule), PIB i matični broj ispod teksta uz logotip, dole autorsko pravo sa godinom osnivanja i tekućom godinom (skripta) i pravne veze kao pilule */
.lk-logo { text-decoration: none; }

/* ---- podnožje, jedan ritam: logotip, tekst i podaci o firmi sa razmakom oznake i naslova (16), kolone sa razmakom kolona, pa linija i donji red sa velikim razmakom. Podaci o firmi su jedan ispod drugog, oznaka je podebljana */
.lk-footer__brand { display: block; }
.lk-footer__tagline { margin-top: var(--mp-footer-gap-logo); font-size: var(--mp-fs-small); color: var(--mp-grey-700); max-width: var(--mp-footer-tagline-w); text-wrap: balance; }
.lk-footer__ids { display: grid; grid-template-columns: max-content auto; justify-content: start; align-items: center; column-gap: var(--mp-footer-gap-label-value); row-gap: var(--mp-footer-gap-ids-block); margin: var(--mp-footer-gap-ids) 0 0; font-size: var(--mp-fs-small); color: var(--mp-grey-500); }
.lk-footer__ids div { display: contents; }
.lk-footer__ids dt { font-weight: var(--mp-fw-medium); color: var(--mp-grey-500); }
.lk-footer__ids dd { margin: 0; }
.lk-copy { display: inline-flex; align-items: center; gap: var(--mp-space-2); padding: var(--mp-link-pad-y) var(--mp-link-pad-x); margin-left: calc(-1 * var(--mp-link-pad-x)); border: 0; border-radius: var(--mp-r-pill); background: transparent; color: var(--mp-ink-900); font: inherit; font-size: var(--mp-fs-small); letter-spacing: var(--mp-ls-small); cursor: pointer; transition: background-color var(--mp-dur-nav); }
.lk-copy:hover, .lk-copy:focus-visible { background: var(--mp-link-hover-bg); }
.lk-copy .lk-icon { color: var(--mp-grey-500); }
.lk-copy__done { display: none; color: var(--mp-blue-500) !important; }
.lk-copy.is-copied .lk-copy__icon { display: none; }
.lk-copy.is-copied .lk-copy__done { display: block; }
.lk-footer__base { margin-top: var(--mp-footer-base-gap); padding-top: var(--mp-space-5); border-top: var(--mp-line) solid var(--mp-grey-300); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mp-space-4) var(--mp-space-6); font-size: var(--mp-fs-small); color: var(--mp-grey-500); }
.lk-footer__years { white-space: nowrap; }
.lk-footer__legal { display: flex; flex-wrap: wrap; gap: var(--mp-space-1); margin-inline: calc(-1 * var(--mp-link-pad-x)); }
.lk-footer__legal a { margin-inline: 0; color: var(--mp-grey-500); font-size: var(--mp-fs-small); letter-spacing: var(--mp-ls-small); }
.lk-footer__legal a:hover { color: var(--mp-ink-900); }

/* ---- sivo ime na dnu podnožja: samo slova iz logotipa, preko cele širine unutar margina, vidi se tri četvrtine visine, a odozdo ga prekriva beli prelaz koji ide od dna strane do vrha slova */
.lk-footer { padding-bottom: 0; }
.lk-footer__mark { position: relative; margin-top: var(--mp-footer-mark-gap); color: var(--mp-footer-mark-fg); pointer-events: none; user-select: none; }
.lk-footer__mark svg { display: block; width: 100%; height: auto; overflow: hidden; }
.lk-footer__mark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--mp-white), transparent); }

/* ---- kolone podnožja: prva uz levu marginu, poslednja uz desnu, razmak između svih kolona jednak (širina sadržaja, razmak se deli). Ispod 900 px dve kolone */
.lk-footer__cols { display: grid; gap: var(--mp-space-7) var(--mp-gap-x); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lk-footer__brand { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .lk-footer__cols { display: flex; justify-content: space-between; gap: var(--mp-space-7) var(--mp-gap-x); }
  .lk-footer__brand { flex: 0 0 var(--mp-footer-tagline-w); }
}

/* ---- obrazac za upit: polja u parovima, oznaka iznad polja 8 px, redovi 16 px, saglasnost i dugme 24 px. Polje za potvrdu je izrađeno po meri (kvadrat sa zaobljenim uglom, plavo sa štiklom kad je izabrano) i stoji vertikalno na sredini uz tekst sa desne strane */
.lk-contact__form { gap: var(--mp-form-gap); }
.lk-contact__send { margin-top: calc(var(--mp-space-5) - var(--mp-form-gap)); }
.lk-consent { display: flex; align-items: center; gap: var(--mp-check-gap); font-size: var(--mp-fs-small); line-height: 1.4; color: var(--mp-grey-700); cursor: pointer; }
.lk-consent input { -webkit-appearance: none; appearance: none; flex: none; display: grid; place-content: center; width: var(--mp-check-size); height: var(--mp-check-size); margin: 0; border: var(--mp-line) solid var(--mp-grey-300); border-radius: var(--mp-check-r); background: var(--mp-white); cursor: pointer; transition: background-color var(--mp-dur-nav), border-color var(--mp-dur-nav); }
.lk-consent input:hover { border-color: var(--mp-grey-400); }
.lk-consent input:checked { background: var(--mp-blue-500) var(--mp-check-icon) center / var(--mp-check-mark) no-repeat; border-color: var(--mp-blue-500); }
.lk-consent input:focus-visible { outline: var(--mp-focus-w) solid var(--mp-blue-500); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .lk-consent input { transition: none; } }

/* ---- obavezna polja: plava zvezdica iza oznake. Automatsko popunjavanje izgleda kao ručni unos: ista pozadina polja, isti tekst, bez plavog isticanja pregledača */
.lk-req { margin-left: 2px; color: var(--mp-blue-500); }
.lk-calc { --mp-field-fill: var(--mp-white); }
.lk-contact__form { --mp-field-fill: var(--mp-grey-100); }
.mp-field input:-webkit-autofill, .mp-field input:-webkit-autofill:hover, .mp-field input:-webkit-autofill:active, .mp-field textarea:-webkit-autofill, .mp-field select:-webkit-autofill {
  -webkit-text-fill-color: var(--mp-ink-900); caret-color: var(--mp-ink-900); font: inherit; -webkit-box-shadow: 0 0 0 100px var(--mp-field-fill, var(--mp-white)) inset; box-shadow: 0 0 0 100px var(--mp-field-fill, var(--mp-white)) inset; transition: background-color 600000s 0s, color 600000s 0s; }
.mp-field input:-webkit-autofill:focus, .mp-field textarea:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 100px var(--mp-white) inset; box-shadow: 0 0 0 100px var(--mp-white) inset; }
.mp-field input:autofill, .mp-field textarea:autofill { font: inherit; color: var(--mp-ink-900); background-color: var(--mp-field-fill, var(--mp-white)); }

/* ---- traka sa porukom: jaka plava sa belim tekstom i ikonicama, tanka, ivice se utapaju u belo do kraja ekrana, jednak razmak prema odeljku iznad i ispod (odeljak iznad nema donji razmak, odeljak ispod gornji) */
.lk-section--flush-bottom { padding-bottom: 0; }
.lk-ribbon { overflow-x: clip; padding-block: var(--mp-ribbon-space); -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--mp-ribbon-fade), #000 calc(100% - var(--mp-ribbon-fade)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--mp-ribbon-fade), #000 calc(100% - var(--mp-ribbon-fade)), transparent); }
.lk-ribbon__band { width: 110%; margin-left: -5%; transform: rotate(var(--mp-ribbon-rot)); background: var(--mp-ribbon-bg); padding-block: var(--mp-ribbon-pad-y); overflow: hidden; }

/* ---- dugme za povratak na vrh: okruglo, plavo kao dugme, bela strelica iz skupa ikonica, dole desno u marginama strane, pojavljuje se kad se strana pomeri. Bez skripte stalno je vidljivo */
.lk-totop { position: fixed; right: var(--mp-page-margin); bottom: var(--mp-space-5); z-index: var(--mp-z-sticky); display: grid; place-items: center; width: var(--mp-totop-size); height: var(--mp-totop-size); border-radius: var(--mp-r-pill); background: var(--mp-blue-500); color: var(--mp-white); text-decoration: none; transition: background-color var(--mp-dur-ui) var(--mp-ease-ui), opacity var(--mp-dur-ui) var(--mp-ease-ui), visibility var(--mp-dur-ui); }
.lk-totop:hover, .lk-totop:active, .lk-totop:focus-visible { background: var(--mp-btn-hover-bg); color: var(--mp-white); }
.lk-totop .lk-icon { transition: transform var(--mp-dur-arrow); }
.lk-totop:hover .lk-icon, .lk-totop:focus-visible .lk-icon { transform: translateY(var(--mp-totop-nudge)); }
.js .lk-totop { opacity: 0; visibility: hidden; }
.js .lk-totop.is-visible { opacity: 1; visibility: visible; }
html { scroll-padding-top: var(--mp-scroll-offset); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .lk-totop, .lk-totop .lk-icon { transition: none; } }

/* ---- strana 404 */
.lk-notfound { min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: var(--mp-space-8); text-align: center; }
.lk-notfound .lk-flow { justify-items: center; }