/* MONOPLAST tokeni za razmake, tipografiju, linije, slojeve, raspored i izgled. Boje su u 05-brand/colors/colors.css, pismo u 05-brand/typography/fonts.css.
   Verzija 2 (dokument 14): osnova iz stadijuma 06 i tokeni izgleda iz stadijuma 08 (zaobljenje, dugme, paneli, kretanje, razmak slova). */

:root {
  /* Razmaci, osnova 4 px, većina umnošci broja 8 */
  --mp-space-0: 0;
  --mp-space-1: 4px;
  --mp-space-2: 8px;
  --mp-space-3: 12px;
  --mp-space-4: 16px;
  --mp-space-5: 24px;
  --mp-space-6: 32px;
  --mp-space-7: 48px;
  --mp-space-8: 64px;
  --mp-space-9: 96px;
  --mp-space-10: 128px;

  /* Raspored sekcija, isti na svakoj strani */
  --mp-sec: clamp(64px, 9vw, 128px);              /* vertikalni prostor sekcije */
  --mp-head-gap: 16px;                            /* naslov i uvod */
  --mp-head-mb: clamp(32px, 4.5vw, 64px);         /* zaglavlje sekcije i sadržaj */
  --mp-gap-x: clamp(16px, 2vw, 32px);             /* razmak kolona u mrežama */
  --mp-gap-y: clamp(32px, 4vw, 56px);             /* razmak redova u mrežama */
  --mp-gutter: var(--mp-gap-x);

  /* Ritam unutar bloka teksta, isti svuda (dokument 14, poglavlje 10): oznaka, naslov, paragraf, dugmad */
  --mp-flow-label: var(--mp-space-4);             /* oznaka i naslov */
  --mp-flow-title: var(--mp-space-5);             /* naslov i paragraf, paragraf i paragraf */
  --mp-flow-action: var(--mp-space-6);            /* paragraf i dugme, paragraf i obrazac */
  --mp-flow-btn: var(--mp-space-3);               /* dugme i dugme */
  --mp-flow-cap: var(--mp-space-3);               /* slika i natpis ispod nje */
  --mp-gap-block: var(--mp-gap-y);                /* razmak velikih blokova i slika u istoj sekciji */
  --mp-page-margin: clamp(16px, 4vw, 48px);
  --mp-container: 1280px;
  --mp-measure: 66ch;

  /* Linije, samo dve debljine, fokus je zasebno */
  --mp-line: 1px;
  --mp-line-strong: 2px;
  --mp-focus-w: 3px;

  /* Elementi koji se dodiruju */
  --mp-drawer-fs: 1.5rem;                          /* stavke menija na telefonu */
  --mp-drawer-row: 60px;
  --mp-menu-bar: 72px;
  --mp-menu-bleed: 14px;                           /* koliko dugme menija izlazi iz margine da crte ikonice leže na margini */
  --mp-tap: 44px;                                  /* najmanja površina dodira */
  --mp-field-h: 48px;                              /* polje obrasca i dugme */

  /* Tipografija. Pismo Switzer (dokument 16, poglavlje 7), sopstveni hosting u 05-brand/typography */
  --mp-font-sans: "Switzer", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mp-fw-regular: 400;
  --mp-fw-medium: 500;
  --mp-fw-bold: 700;
  --mp-fs-caption: 0.8125rem;                      /* 13 px */
  --mp-fs-small: 0.875rem;                         /* 14 px, tabele */
  --mp-fs-body: 1rem;                              /* 16 px */
  --mp-fs-body-l: clamp(1.0625rem, 1.2vw, 1.25rem);
  --mp-fs-h4: 1.125rem;
  --mp-fs-h3: clamp(1.25rem, 1.8vw, 1.625rem);
  --mp-fs-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  --mp-fs-h1: clamp(2rem, 5vw, 3.75rem);
  --mp-lh-tight: 1.1;
  --mp-lh-head: 1.2;
  --mp-lh-body: 1.55;

  /* Slojevi */
  --mp-z-base: 0;
  --mp-z-sticky: 100;
  --mp-z-dropdown: 200;
  --mp-z-overlay: 300;
  --mp-z-modal: 400;
  --mp-z-toast: 500;
}

/* Izgled, tokeni iz stadijuma 08 */
:root {
  --mp-ls-display: -0.05em;     /* razmak slova velikog naslova */
  --mp-ls-head: -0.03em;
  --mp-ls-small: -0.02em;       /* dugmad, veze, sitan tekst (Packhelp) */

  /* Zaobljenje, jedna porodica veličina. Veće nego u prvom krugu, kao fotografije u herou na Packhelp sajtu (treći krug) */
  --mp-r-1: 16px;
  --mp-r-2: 28px;
  --mp-r-3: 40px;
  --mp-r-4: 56px;
  --mp-r-pill: 999px;
  /* Apple kontinuirani ugao (squircle): CSS corner-shape sa superelipsom. Eksponent 2.3 odgovara Appleovom uglu (n oko 5), poluprečnik ostaje isti.
     Pilule su prave kapsule i ostaju okrugle. Pregledači bez podrške prikazuju obično zaobljenje. */
  --mp-corner: superellipse(2.3);

  /* Površine */
  --mp-surface: var(--mp-grey-100);       /* pločice proizvoda, kartice */
  --mp-panel-grey: var(--mp-grey-100);    /* siva ploča (pogon), bela mreža */
  --mp-panel-dark: var(--mp-ink-900);     /* tamna sekcija */
  --mp-inset: 16px;                       /* razmak tamne ploče od ivice ekrana */

  /* Dugme */
  --mp-btn-h: 48px;
  --mp-btn-pad: 24px;
  --mp-btn-hover-bg: var(--mp-blue-700);   /* dugme na prelasku mišem, pritisku i fokusu */
  --mp-btn-fs: 0.9375rem;                  /* 15 px */
  --mp-arrow-size: var(--mp-icon-m);                   /* strelica na dugmetu, pojavljuje se na prelasku mišem (Packhelp) */
  --mp-arrow-gap: 6px;
  --mp-dur-arrow: 200ms;

  /* Oznaka iznad naslova (pilula), kao na Packhelp sajtu */
  --mp-pill-bg: var(--mp-grey-100);
  --mp-pill-fg: var(--mp-grey-400);
  --mp-pill-pad-y: 4px;
  --mp-pill-pad-x: 12px;
  --mp-pill-fs: 0.8125rem;                 /* 13 px */
  --mp-pill-fg-dark: rgba(255, 255, 255, .7);   /* oznaka na tamnoj ploči */
  --mp-tint-white-strong: rgba(255, 255, 255, .12);
  --mp-zoom-tile: 1.08;                    /* slika pločice na prelasku mišem, uvećanje kao na Packhelp sajtu (kartica proizvoda 1.08, 0.3 s) */
  --mp-dur-zoom: 300ms;

  /* Veza kao pilula na prelasku mišem, bez podvlačenja (odluka klijenta, drugi krug) */
  --mp-link-pad-y: 4px;
  --mp-link-pad-x: 12px;
  --mp-link-hover-bg: var(--mp-grey-100);
  --mp-link-hover-bg-dark: var(--mp-tint-white-strong);

  /* Ikonice, jedan stil: mreža 24, linija 2, zaobljeni krajevi, bez ispune, boja teksta */
  --mp-icon-stroke: 2;
  --mp-icon-s: 12px;
  --mp-icon-m: 16px;
  --mp-icon-l: 24px;

  /* Zrno na fotografijama, filmsko i jedva primetno */
  --mp-grain-opacity: .18;
  --mp-grain-size: 220px;
  --mp-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  /* Padajuće ploče, ista za meni i jezik: zaobljena, sa tankom linijom */
  --mp-dd-r: var(--mp-r-3);
  --mp-dd-gap: var(--mp-space-2);

  /* Polja obrasca, kapsula kao dugme. Strelica izbora je ista ikonica kao ostale (mreža 24, linija 2), boja grey-700 #2F2F2F zapisana u slici */
  --mp-field-pad-x: 20px;
  --mp-field-r-area: var(--mp-r-3);
  --mp-select-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F2F2F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  --mp-select-pad-r: 52px;                  /* mesto za strelicu */
  --mp-select-chevron-x: 20px;              /* razmak strelice od desne ivice */

  /* Razmak u herou: dugmad i traka znakova firmi (--mp-facts-gap), traka i fotografije ispod (--mp-rail-gap, isti) */
  --mp-facts-gap: clamp(72px, 8vw, 128px);
  --mp-rail-gap: var(--mp-facts-gap);           /* traka i fotografije ispod, isto kao dugmad i traka */

  /* Traka sa kontaktom iznad zaglavlja, plava kao dugme (po uzoru na traku na Packhelp sajtu) */
  --mp-topbar-bg: var(--mp-blue-500);
  --mp-topbar-fg: var(--mp-white);
  --mp-topbar-h: 44px;
  --mp-topbar-fs: 0.875rem;                 /* 14 px */
  --mp-header-r: 48px;             /* gornji uglovi zaglavlja preko trake (Packhelp), squircle */

  /* Mreža linija sa tačkom na svakom preseku, samo u herou i samo na nekoliko mekih mesta (preuzeto iz AKS Fleet sajta). Siva sajta na 6 posto, linija 2 px */
  --mp-pattern-color: color-mix(in srgb, var(--mp-grey-500) 6%, transparent);
  --mp-pattern-size: 64px;                  /* jedna ćelija mreže */
  --mp-pattern-dot: 3px;                    /* poluprečnik tačke na preseku */
  --mp-pattern-patches: radial-gradient(ellipse 34% 20% at 12% 14%, #000 0%, transparent 70%), radial-gradient(ellipse 26% 22% at 90% 38%, #000 0%, transparent 70%), radial-gradient(ellipse 30% 14% at 30% 84%, #000 0%, transparent 70%);   /* gde se mreža vidi, svako mesto se gasi daleko pre ivica sekcije */

  /* Traka znakova firmi u herou: sivi znakovi, polako i bez prekida, ivice se utapaju */
  --mp-client-fg: var(--mp-grey-400);
  --mp-client-w: 168px;                     /* polje jednog znaka, svi iste optičke veličine */
  --mp-client-gap: 32px;
  --mp-swipe-fade: 40px;                    /* utapanje na ivici redova kartica koji se listaju */
  --mp-client-fade: 14%;                    /* širina utapanja sa svake strane */
  --mp-client-dur: 48s;                     /* jedan krug svih znakova */
  --mp-client-label-fs: 0.875rem;
  --mp-client-rule-w: 72px;                 /* linija sa svake strane natpisa */

  /* Mreža na panelima, ista kao u herou: bela na jakoj plavoj ploči, tamnije siva na sivoj */
  --mp-pattern-color-grey-panel: color-mix(in srgb, var(--mp-grey-500) 12%, transparent);   /* tamnija siva mreža na sivoj ploči */
  --mp-pattern-color-white: rgba(255, 255, 255, .14);
  --mp-pattern-patches-b: radial-gradient(ellipse 30% 40% at 90% 18%, #000 0%, transparent 70%), radial-gradient(ellipse 34% 36% at 8% 80%, #000 0%, transparent 70%), radial-gradient(ellipse 26% 30% at 58% 52%, #000 0%, transparent 70%);

  /* Asortiman: kartice grupa, traka pločica sa strelicom (Packhelp) */
  --mp-tab-bg: var(--mp-grey-100);
  --mp-tab-h: 40px;
  --mp-tab-pad: 24px;
  --mp-slider-visible: 3.6;                 /* pločica u vidnom polju, četvrta viri */
  --mp-slider-btn: 48px;
  --mp-slider-fade: 96px;                   /* utapanje trake na kraju na kome ima još sadržaja */
  --mp-slider-btn-top: 38%;                 /* strelica je na sredini slike pločice */

  /* Primeri štampe, mozaik: visina jednog reda */
  --mp-mosaic-row: clamp(180px, 20vw, 290px);
  --mp-mosaic-row-phone: 44vw;

  /* Kontakt, ikonica ispred podatka */
  --mp-contact-chip: 44px;

  /* Česta pitanja (Packhelp): kartica boje papira, zaobljena, pitanje 15 px */
  --mp-faq-bg: var(--mp-paper);
  --mp-faq-pad-y: 20px;
  --mp-faq-pad-x: 24px;

  /* Nagnuta traka sa porukom koja klizi (Packhelp): jaka plava, ugao -2 stepena, ikonica iza svake poruke */
  --mp-ribbon-bg: var(--mp-blue-500);
  --mp-ribbon-fg: var(--mp-white);
  --mp-ribbon-fade: 14%;                    /* utapanje u belo sa svake strane */
  --mp-ribbon-rot: -2deg;
  --mp-ribbon-dur: 48s;                     /* jedan krug */
  --mp-ribbon-gap: 40px;                    /* razmak poruka */
  --mp-ribbon-fs: 0.9375rem;
  --mp-ribbon-pad-y: 12px;
  --mp-ribbon-space: clamp(48px, 6vw, 96px);   /* prostor iznad i ispod, da nagib ima mesta */

  /* Podnožje: prostor iznad i ispod, razmak kolona i donjeg reda */
  --mp-footer-pad-top: clamp(56px, 7vw, 96px);
  --mp-footer-pad-bottom: var(--mp-space-7);
  --mp-footer-tagline-w: 22rem;             /* širina teksta uz logotip, četiri ravnomerna reda */
  --mp-footer-gap-logo: var(--mp-flow-label);   /* logotip i tekst, 18 px od slova do slova kao naslov kolone i prva veza */
  --mp-footer-gap-ids: 9px;                     /* tekst i PIB, 18 px od slova do slova kao naslov kolone i prva veza (izmereno) */
  --mp-footer-gap-ids-block: 1px;               /* PIB i MB jedan ispod drugog, korak kao između veza u koloni (izmereno) */
  --mp-footer-gap-label-value: 18px;            /* oznaka PIB, MB i broj, vodoravno 18 px od slova do slova kao naslov kolone i prva veza */
  --mp-footer-mark-gap: var(--mp-space-8);  /* razmak sivog imena od donjeg reda */
  --mp-footer-mark-fg: var(--mp-grey-300);  /* siva slova */
  --mp-footer-base-gap: var(--mp-space-8);

  /* Obrazac: razmak polja i polje za potvrdu (kvadrat sa zaobljenim uglom, štikla ista kao ikonice, bela) */
  --mp-form-gap: var(--mp-space-4);
  --mp-check-gap: var(--mp-space-2);          /* polje za potvrdu i tekst */
  --mp-check-size: 22px;
  --mp-check-r: 7px;
  --mp-check-mark: 14px;
  --mp-check-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5 10 17.5 19 7'/></svg>");

  /* Povratak na vrh i pomeranje do odeljka (zalepljeno zaglavlje ne prekriva naslov) */
  --mp-totop-size: var(--mp-field-h);
  --mp-totop-nudge: -2px;
  --mp-scroll-offset: 96px;

  /* Logotip u zaglavlju i podnožju, ista visina */
  --mp-logo-h: 44px;

  /* Padajući meni (stavka menija i izbor jezika), kao na Packhelp sajtu */
  --mp-dd-chevron: var(--mp-icon-s);
  --mp-dd-lang-w: 200px;

  /* Slika u naslovu koja se smenjuje, kao na Packhelp sajtu: nagnuta za 8 stepeni, zaobljena 8 px, svaka slika 500 ms, uvećanje na prelasku mišem */
  --mp-cycle-size: clamp(2.75rem, 4.4vw, 4rem);
  --mp-cycle-r: 12px;
  --mp-cycle-rot: -8deg;
  --mp-cycle-step: 500ms;
  --mp-cycle-zoom: 3.125;
  --mp-cycle-gap-before: var(--mp-space-2);
  --mp-cycle-gap-after: var(--mp-space-2);

  /* Kretanje, malo i uklonjivo. Dugme i veza 250 ms ease-in-out, stavka menija 150 ms (Packhelp) */
  --mp-dur-ui: 250ms;
  --mp-ease-ui: ease-in-out;
  --mp-dur-nav: 150ms;
  --mp-dur: 200ms;
  --mp-ease: cubic-bezier(.2, .7, .2, 1);
  --mp-reveal-dur: 600ms;                          /* pojavljivanje pri listanju, tiho i isto svuda */
  --mp-reveal-ease: cubic-bezier(.22, .61, .36, 1);
  --mp-reveal-shift: 8px;                          /* tekst i kartice klize samo toliko, ploče se samo utapaju */
  --mp-reveal-step: 60ms;                          /* razmak između susednih kartica, najviše tri koraka */

  /* Proporcije fotografija */
  --mp-ar-tile: 4 / 3;
  --mp-ar-tall: 3 / 4;
  --mp-ar-wide: 16 / 9;
}

@media (max-width: 767px) { :root { --mp-client-gap: 16px; } }