/* =====================================================================================================
   šasija.rs · knjiga dizajna · sasija.css
   Jedini izvor izgleda. Na stranama nema golih hex boja ni proizvoljnih px vrednosti: samo ovi tokeni i klase.
   Mere: docs/apple-mere.md (Apple HIG, iOS „Large“; 1 pt = 1 CSS px). Mašinski spisak: dizajn/mere.json.

   KONTRAST (WCAG 2.x, izračunato skriptom alat/kontrast.mjs iz ovog fajla; providne boje složene
   preko podloge; „najgore“ = staklo preko crnog i preko belog sadržaja). Prag: tekst 4,5 · ne-tekst 3,0.
   @kontrast-pocetak
   par                                            svetla    tamna   prag
   tekst / pozadina                                16.92    21.00   4.5
   tekst / povrsina                                18.88    17.01   4.5
   tekst-2 / pozadina                               5.37     9.50   4.5
   tekst-2 / povrsina                               5.99     7.69   4.5
   tekst-2 / ispuna na pozadini                     4.69     6.84   4.5
   tekst-2 / ispuna na povrsini                     5.19     5.21   4.5
   tekst / ispuna na pozadini                      14.79    15.13   4.5
   tekst / ispuna na povrsini                      16.37    11.52   4.5
   tekst / ispuna-jaka na povrsini                 14.82    10.31   4.5
   tekst-2 / ispuna-jaka na povrsini                4.70     4.66   4.5
   tekst / klizac (pilule)                         18.88     4.93   4.5
   na-zutoj / zuta (glavno dugme, bedz)            12.49    13.37   4.5
   plava / pozadina (link u tekstu)                 5.03     6.49   4.5
   plava / povrsina                                 5.62     5.26   4.5
   plava naspram tekst (link bez podvlacenja)       3.36     3.23   3.0
   zelena-znak / povrsina                           5.48     8.42   4.5
   zelena-znak / pozadina                           4.91    10.39   4.5
   zelena-znak / zelena-ispuna na povrsini          4.89     6.21   4.5
   crvena-znak / povrsina                           6.46     6.75   4.5
   crvena-znak / pozadina                           5.79     8.33   4.5
   crvena-znak / crvena-ispuna na povrsini          5.65     5.65   4.5
   poruka-tekst / poruka-pozadina                  18.88    11.35   4.5
   tekst / staklo preko belog sadrzaja             18.88     6.72   4.5
   tekst / staklo preko crnog sadrzaja              9.48    18.38   4.5
   tekst / aktivno u traci (najgore)                8.19     5.47   4.5
   tekst / list preko zastora (najgore)             9.48    13.04   4.5
   tekst / staklo-puno (bez zamucenja)             17.96    17.01   4.5
   tekst-2 / grupa u listu                          5.99     7.69   4.5
   ivica-polja / pozadina (ne-tekst)                3.73     5.05   3.0
   ivica-polja / povrsina (ne-tekst)                4.16     4.09   3.0
   fokus (tekst) / pozadina (ne-tekst)             16.92    21.00   3.0
   tekst-2 / ispuna (ugaseno dugme) na pozadini     4.69     6.84   4.5
   tekst / ispuna-jaka na pozadini                 13.46    13.29   4.5
   povrsina / tekst (broj na ikonici)              18.88    17.01   4.5
   tekst / poruka (pun tekst na poruci)            18.88    11.35   4.5
   ivica-polja / povrsina (iskljucen prekidac)      4.16     4.09   3.0
   info: kvacica logoa / pozadina (izuzet)          1.35    14.87   —
   info: zuta ispuna / pozadina (slova #111)        1.35    14.87   —
   info: zelena (prekidac ukljucen) / povrsina      2.22     8.42   —
   info: klizac / staza (+ deblja slova)            1.28     3.07   —
   info: aktivno u traci / staklo preko crnog       1.16     1.93   —
   info: poruka / pozadina                         16.92     1.85   —
   @kontrast-kraj
   Tabelu prepisuje skripta (--upisi) posle svake izmene boja; ručno se ne menja.

   Pravila koja ovaj fajl sprovodi sam (da greška iz pocetna-v1 ne može da se ponovi):
   - <mark> i markeri ispod teksta su ugašeni svuda; žuta nikad nije boja teksta; na žutoj je uvek #111.
   - .heroj prikazuje samo H1 + jednu rečenicu + polje za šasiju + jedno .dugme.glavno + jedno .dugme.tiho; sve ostalo
     je skriveno, a alat/proveri.mjs javlja šta je sakriveno (upozorenje „Sakriveno u uvodu“).
   - Kvačica znači samo „odgovara“ i uvek je ista: žut krug, kvačica #111 (.kvacica-odgovara, .bedz.zuta, ponuda).
   - Razmak slova se ne zadaje (sistem ga podešava sam); tanke linije su 1 piksel ekrana (--linija), ne border .5px.
   - Drugo .dugme.glavno odmah do prvog postaje sporedno. Na staklu (traka, list) sivi tekst postaje pun tekst.
   - Zaglavlje na telefonu nosi samo logo (garaža i korpa su u traci dole); od 960 px traka nestaje.

   ODELJCI: 1–2 tokeni (svetla, tamna) · 3 osnova · 4 slova · 5 raspored · 6 ikonice · 7 dugmad · 8 staklo · 9 polja
   · 10 pilule · 11 grupa, red, prekidač · 12 zaglavlje · 13 traka dole · 14 futer · 15 heroj · 16 kartice · 17 broj šasije
   · 18 tok · 19 ponuda i izbor jednog od više · 20 list sa dna · 21 kratka poruka · 22 prazno stanje, čeka podatak, oznake
   · 23 prodavnica · 24 zajedničko za više oblasti · 25–40 delovi strana po oblastima (predmetak klase = oblast; spisak je
   na početku odeljka 24) · 41 smanji pokret. Dodaci iz dizajn/dodaci/ su spojeni ovde 19. 10. 2026, dva puta (popodne i
   uveče; stari fajlovi: nacrti/dodaci-spojeni/ i nacrti/dodaci-spojeni/drugo-spajanje/).
   ===================================================================================================== */

/* ---------- 1. Tokeni: svetla tema ----------
   Boje su u svom bloku: isti blok važi i za .tema-svetla (deo strane uvek u svetloj temi, npr. uzorak u knjizi). */
:root, .tema-svetla{
  color-scheme: light;
  /* boje (Apple HIG Color, iOS 26; neutralne iOS 13–18) */
  --pozadina: #F2F2F7;                    /* systemGroupedBackground */
  --povrsina: #FFFFFF;                    /* secondarySystemGroupedBackground: grupe, kartice, polja */
  --tekst: #111111;                       /* brend crna (label) */
  --siva-tekst: #636366;                  /* drugi tekst; Apple 60 % je tamnjen da prođe 4,5 i na ispuni */
  --odvajac: rgba(60, 60, 67, .29);       /* separator */
  --ivica-polja: #7C7C80;                 /* ivica polja ≥ 3:1 na pozadini i površini */
  --ispuna: rgba(118, 118, 128, .12);     /* tertiarySystemFill: pretraga, sporedno dugme, staza pilula */
  --ispuna-jaka: rgba(118, 118, 128, .2); /* systemFill: ugašen prekidač, pritisak */
  --zuta: #FFCC00;                        /* SAMO ispuna: glavno dugme, kvačica, male oznake */
  --na-zutoj: #111111;                    /* jedina boja teksta na žutoj */
  --zelena: #34C759;                      /* ispuna: uključen prekidač */
  --zelena-znak: #007A33;                 /* zelen tekst i znak na svetlom (Apple #008932 je za 4,5 na #F2F2F7 malo svetao) */
  --zelena-ispuna: rgba(52, 199, 89, .14);
  --crvena: #FF383C;                      /* ispuna */
  --crvena-znak: #C00013;                 /* crven tekst i znak (tamnije od Apple #E9152D: bar 5,5 na crvenoj podlozi oznake) */
  --crvena-ispuna: rgba(255, 56, 60, .1);
  --plava: #0060DF;                       /* SAMO link u tekućem tekstu (Apple #0088FF je 3,5:1 na beloj) */
  --kvacica: #FFCC00;                     /* kvačica u logou (logo-inline.svg) */
  --klizac: #FFFFFF;                      /* klizač pilula (u svetloj ima i tanku ivicu, vidi --senka-klizac) */
  --prekidac-dugme: #FFFFFF;
  --rucica: rgba(60, 60, 67, .3);         /* ručica lista, ne-tekst */
  --zastor: rgba(0, 0, 0, .35);           /* iza lista sa dna */
  --poruka-pozadina: #111111;
  --poruka-tekst: #FFFFFF;
  --traka-aktivno: rgba(118, 118, 128, .2);
  /* staklo: samo traka dole, okrugla dugmad gore i list sa dna */
  --staklo: rgba(255, 255, 255, .72);
  --staklo-puno: #F9F9FB;                 /* neprozirna zamena */
  --staklo-ivica: rgba(0, 0, 0, .06);     /* u svetloj namerno tamna: bela ivica se na svetloj podlozi ne vidi */
  --staklo-senka: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 32px rgba(0, 0, 0, .2);   /* odsjaj gore + meka senka */
  --staklo-senka-mala: 0 2px 8px rgba(0, 0, 0, .08);
  --senka-klizac: 0 0 0 .5px #7C7C80, 0 3px 8px rgba(0, 0, 0, .12);   /* beo klizač na svetloj stazi: ivica ≥ 3:1 */
  --tekst-2: var(--siva-tekst);           /* ponovo ovde: var() se računa na elementu, pa .tema-tamna mora da ga ima */
}
:root{
  /* slova: sistemska (SF na Apple uređajima; SF se ne ugrađuje) */
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* razmaci: samo ovi */
  --razmak-4: 4px; --razmak-8: 8px; --razmak-12: 12px; --razmak-16: 16px;
  --razmak-20: 20px; --razmak-24: 24px; --razmak-32: 32px;
  --ivica-l: calc(16px + env(safe-area-inset-left, 0px));  /* ivica ekrana: 16 dodato na bezbednu zonu (Apple: margina ide unutar bezbedne zone) */
  --ivica-d: calc(16px + env(safe-area-inset-right, 0px));
  --linija: 1px;                                           /* tanka linija: 1 piksel ekrana (vidi @media resolution ispod) */
  --prst: 44px;                                            /* najmanja površina za dodir 44 × 44 */

  /* radijusi: kapsula = pola visine (zadato uz svaku komponentu); koncentrično 26 − 16 = 10 */
  --radijus-grupa: 26px;
  --radijus-unutra: 10px;

  /* visine komponenti */
  --visina-dugme: 50px; --visina-malo: 44px; --visina-polje: 50px; --visina-pretraga: 44px;
  --visina-pilule: 36px; --visina-klizac: 32px; --visina-red: 52px; --visina-traka: 62px;
  --visina-zaglavlje: 60px; --logo-visina: 32px;
  --traka-uvlaka: 21px;                                                   /* levo, desno, dole */
  --traka-dole: max(21px, calc(env(safe-area-inset-bottom, 0px) - 13px)); /* 21 od ivice ekrana, uključujući bezbednu zonu (34 − 13) */
  --sirina-sadrzaja: 1120px;
  --sirina-mala: 420px;                                                   /* glavno dugme na velikom ekranu, pilule, poruka */
  --sirina-srednja: 560px;                                                /* traka dole, list sa dna, uzak obrazac */
  --sirina-kolona: 640px;                                                 /* heroj, uvod strane, uska kolona za čitanje */
  --znak: 64px;                                                           /* krug sa ikonicom: prazno stanje, ishod, potvrda */

  /* pokret: SwiftUI spring(duration: 0.5) uzorkovan 0–0,6 s (99,5 % puta), zato CSS traje 0,6 s */
  --trajanje: .6s;                               /* list sa dna, poruka, uklapanje znakova */
  --trajanje-kratko: .35s;                       /* klizač pilula i prekidač: prate prst */
  --trajanje-pritisak: .15s;                     /* utiskivanje pri dodiru; vraćanje ide na --trajanje */
  --brzo: .2s;                                   /* samo boja i providnost */
  --glatko: cubic-bezier(.22, .9, .3, 1);        /* zamena: smooth, bez odskoka */
  --hitro: cubic-bezier(.3, 1.1, .45, 1);        /* zamena: snappy, blagi odskok */
}
@media (min-resolution: 2dppx){ :root{ --linija: .5px; } }
@media (min-resolution: 3dppx){ :root{ --linija: .3334px; } }
@supports (transition-timing-function: linear(0, 1)){
  :root{
    /* smooth: duration 0.5, bounce 0 */
    --glatko: linear(0 0%, 0.027 3.3%, 0.091 6.7%, 0.175 10%, 0.266 13.3%, 0.358 16.7%, 0.445 20%, 0.525 23.3%, 0.597 26.7%, 0.66 30%, 0.715 33.3%, 0.763 36.7%, 0.803 40%, 0.837 43.3%, 0.866 46.7%, 0.89 50%, 0.91 53.3%, 0.926 56.7%, 0.94 60%, 0.951 63.3%, 0.96 66.7%, 0.968 70%, 0.974 73.3%, 0.979 76.7%, 0.983 80%, 0.986 83.3%, 0.989 86.7%, 0.991 90%, 0.993 93.3%, 0.994 96.7%, 1 100%);
    /* snappy: duration 0.5, bounce 0.15 */
    --hitro: linear(0 0%, 0.027 3.3%, 0.095 6.7%, 0.185 10%, 0.286 13.3%, 0.388 16.7%, 0.486 20%, 0.576 23.3%, 0.657 26.7%, 0.727 30%, 0.786 33.3%, 0.836 36.7%, 0.877 40%, 0.91 43.3%, 0.936 46.7%, 0.956 50%, 0.972 53.3%, 0.983 56.7%, 0.992 60%, 0.998 63.3%, 1.002 66.7%, 1.004 70%, 1.006 73.3%, 1.006 76.7%, 1.006 80%, 1.006 83.3%, 1.006 86.7%, 1.005 90%, 1.004 93.3%, 1.004 96.7%, 1 100%);
  }
}

/* ---------- 2. Tokeni: tamna tema (sistemska, osim kad je izabrana svetla) + ručno izabrana tamna ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="svetla"]){
    color-scheme: dark;
    --pozadina: #000000;
    --povrsina: #1C1C1E;
    --tekst: #FFFFFF;
    --siva-tekst: #AEAEB2;
    --odvajac: rgba(84, 84, 88, .6);
    --ivica-polja: #7C7C80;
    --ispuna: rgba(118, 118, 128, .32);
    --ispuna-jaka: rgba(118, 118, 128, .4);
    --zuta: #FFD600;
    --na-zutoj: #111111;
    --zelena: #30D158;
    --zelena-znak: #30D158;
    --zelena-ispuna: rgba(48, 209, 88, .16);
    --crvena: #FF4245;
    --crvena-znak: #FF7A7D;
    --crvena-ispuna: rgba(255, 66, 69, .16);
    --plava: #0091FF;
    --kvacica: #FFD600;
    --klizac: #707074;
    --prekidac-dugme: #FFFFFF;
    --rucica: rgba(235, 235, 245, .3);
    --zastor: rgba(0, 0, 0, .6);
    --poruka-pozadina: #3A3A3C;
    --poruka-tekst: #FFFFFF;
    --traka-aktivno: rgba(118, 118, 128, .5);
    --staklo: rgba(28, 28, 30, .72);
    --staklo-puno: #1C1C1E;
    --staklo-ivica: rgba(255, 255, 255, .12);
    --staklo-senka: inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 32px rgba(0, 0, 0, .35);
    --staklo-senka-mala: 0 2px 8px rgba(0, 0, 0, .4);
    --senka-klizac: 0 3px 8px rgba(0, 0, 0, .3);
    --tekst-2: var(--siva-tekst);
  }
}
:root[data-tema="tamna"], .tema-tamna{
  color-scheme: dark;
  --pozadina: #000000;
  --povrsina: #1C1C1E;
  --tekst: #FFFFFF;
  --siva-tekst: #AEAEB2;
  --odvajac: rgba(84, 84, 88, .6);
  --ivica-polja: #7C7C80;
  --ispuna: rgba(118, 118, 128, .32);
  --ispuna-jaka: rgba(118, 118, 128, .4);
  --zuta: #FFD600;
  --na-zutoj: #111111;
  --zelena: #30D158;
  --zelena-znak: #30D158;
  --zelena-ispuna: rgba(48, 209, 88, .16);
  --crvena: #FF4245;
  --crvena-znak: #FF7A7D;
  --crvena-ispuna: rgba(255, 66, 69, .16);
  --plava: #0091FF;
  --kvacica: #FFD600;
  --klizac: #707074;
  --prekidac-dugme: #FFFFFF;
  --rucica: rgba(235, 235, 245, .3);
  --zastor: rgba(0, 0, 0, .6);
  --poruka-pozadina: #3A3A3C;
  --poruka-tekst: #FFFFFF;
  --traka-aktivno: rgba(118, 118, 128, .5);
  --staklo: rgba(28, 28, 30, .72);
  --staklo-puno: #1C1C1E;
  --staklo-ivica: rgba(255, 255, 255, .12);
  --staklo-senka: inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 32px rgba(0, 0, 0, .35);
  --staklo-senka-mala: 0 2px 8px rgba(0, 0, 0, .4);
  --senka-klizac: 0 3px 8px rgba(0, 0, 0, .3);
  --tekst-2: var(--siva-tekst);
}
@media (min-width: 960px){
  :root{ --ivica-l: calc(32px + env(safe-area-inset-left, 0px)); --ivica-d: calc(32px + env(safe-area-inset-right, 0px)); }
}
/* deo strane u drugoj temi dobija i svoju podlogu i boju slova */
.tema-svetla, .tema-tamna{ background-color: var(--pozadina); color: var(--tekst); }

/* ---------- 3. Osnova ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--pozadina); }
body{
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--pozadina); color: var(--tekst);
  font: 400 17px/22px var(--font);         /* razmak slova ostaje „normal“: sistem ga podešava sam (SF ima svoju tablicu, Roboto i Segoe UI svoju) */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote{ margin: 0; }
h1, h2, h3{ text-wrap: balance; }
h1{ font: 700 34px/41px var(--font); }      /* Large Title */
h2{ font: 700 22px/28px var(--font); }    /* Title 2 */
h3{ font: 600 17px/22px var(--font); }    /* Headline */
h4{ font: 600 15px/20px var(--font); }    /* Subhead, naglašeno */
img, svg, video{ display: block; max-width: 100%; }
img{ height: auto; }
a{ color: inherit; text-decoration: none; }
button, input, select, textarea{ font: inherit; letter-spacing: inherit; color: inherit; }
button{ cursor: pointer; }
[hidden]{ display: none !important; }
mark{ background: none; color: inherit; font-weight: inherit; }   /* bez markera ispod teksta, nikad */
b, strong{ font-weight: 600; }
/* link u tekućem tekstu: plav, bez podvlačenja (3:1 naspram teksta), podvučen tek na prelaz/fokus */
:where(p, .tekst li, dd) a:not([class]){ color: var(--plava); }
:where(p, .tekst li, dd) a:not([class]):hover{ text-decoration: underline; text-underline-offset: 3px; }

/* fokus sa tastature: boja teksta, bez plavog sjaja */
:focus-visible{ outline: 2px solid var(--tekst); outline-offset: 2px; }
/* u kutiji koja seče sadržaj (red u grupi, vrpca) okvir ide unutra, da se vidi ceo */
.grupa :is(a, button, label).red:focus-visible, .vrpca:focus-visible, .vrpca > :focus-visible{ outline-offset: -2px; }
:focus:not(:focus-visible){ outline: none; }

/* sadržaj strane */
#sadrzaj{
  display: block; width: 100%; max-width: var(--sirina-sadrzaja); margin-inline: auto;
  padding-inline: var(--ivica-l) var(--ivica-d); padding-bottom: var(--razmak-32);
}
#sadrzaj:focus{ outline: none; }
.skoci{
  position: absolute; z-index: 100; left: var(--ivica-l); top: -100px;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px;
  background: var(--povrsina); color: var(--tekst); font: 600 15px/20px var(--font);
}
.skoci:focus{ top: calc(env(safe-area-inset-top, 0px) + 8px); }
.skriveno-oku{
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 959.98px){ .samo-racunar{ display: none !important; } }
@media (min-width: 960px){ .samo-telefon{ display: none !important; } }

/* ---------- 4. Slova: Apple stilovi (veličina/prored · težina) — ispod 11 nikad; razmak slova se ne zadaje ---------- */
.t-naslov-veliki{ font: 700 34px/41px var(--font); }   /* Large Title */
.t-naslov-1{ font: 700 28px/34px var(--font); }       /* Title 1 */
.t-naslov-2{ font: 700 22px/28px var(--font); }      /* Title 2 */
.t-naslov-3{ font: 600 20px/25px var(--font); }      /* Title 3 (cena) */
.t-istaknuto{ font: 600 17px/22px var(--font); }     /* Headline */
.t-telo{ font: 400 17px/22px var(--font); }          /* Body */
.t-uvod{ font: 400 16px/21px var(--font); }          /* Callout */
.t-podnaslov{ font: 400 15px/20px var(--font); }     /* Subhead */
.t-sitno{ font: 400 13px/18px var(--font); }         /* Footnote */
.t-oznaka{ font: 400 12px/16px var(--font); }             /* Caption 1 */
.t-oznaka-2{ font: 400 11px/13px var(--font); }       /* Caption 2 = najmanje */
.t-jace{ font-weight: 600; }
.t-sivo{ color: var(--tekst-2); }
.t-brojevi{ font-variant-numeric: tabular-nums; }

/* ---------- 5. Raspored (pomoćne klase) ---------- */
.odeljak{ display: grid; gap: var(--razmak-12); margin-top: var(--razmak-32); min-width: 0; }
.odeljak-zaglavlje{ display: flex; align-items: center; justify-content: space-between; gap: var(--razmak-12); min-height: 44px; }
.stog{ display: grid; gap: var(--razmak-12); min-width: 0; }
.tekst{ max-width: 65ch; }
.tekst > * + *{ margin-top: var(--razmak-12); }
.tekst > h2{ margin-top: var(--razmak-24); }
.tekst :is(ul, ol){ padding-left: var(--razmak-24); }
.tekst li + li{ margin-top: var(--razmak-4); }
.mreza-plocica{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--razmak-8); }
@media (min-width: 600px){ .mreza-plocica{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 960px){ .mreza-plocica{ grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--razmak-12); } }
/* vrpca: vodoravni niz kartica do ivice ekrana na telefonu (bez bežanja strane u stranu); na računaru mreža */
.vrpca{
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 280px); gap: var(--razmak-12);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(-1 * var(--ivica-l)) calc(-1 * var(--ivica-d));
  padding-inline: var(--ivica-l) var(--ivica-d); scroll-padding-inline: var(--ivica-l) var(--ivica-d);
}
.vrpca::-webkit-scrollbar{ display: none; }
.vrpca > *{ scroll-snap-align: start; }
@media (min-width: 960px){
  .vrpca{ grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
}

/* ---------- 6. Ikonice: crtane, mreža 24, linija 1,75, boja = boja teksta ---------- */
.ik{
  width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.ik.ik-20{ width: 20px; height: 20px; }
.ik.ik-28{ width: 28px; height: 28px; }
/* okvir za ikonicu u kartici/vozilu: 44 × 44, radijus 10 (koncentrično u grupi sa razmakom 16) */
.ik-okvir{
  width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center;
  border-radius: var(--radijus-unutra); background: var(--ispuna); color: var(--tekst);
}

/* ---------- 7. Dugmad ---------- */
/* .dugme: kapsula 50 (radijus 25), Headline 17/22. Pritisak: utisne se na 97 % za 0,15 s, vraća se hitro (0,6 s). */
.dugme{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--razmak-8);
  height: var(--visina-dugme); padding: 0 var(--razmak-24); border: 0; border-radius: 25px;
  font: 600 17px/22px var(--font); white-space: nowrap; text-decoration: none;
  background: var(--ispuna); color: var(--tekst); cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform var(--trajanje) var(--hitro), background-color var(--brzo) ease, opacity var(--brzo) ease;
}
.dugme:active{ transform: scale(.97); transition-duration: var(--trajanje-pritisak); }
/* .dugme.glavno: žuta ispuna, #111 slova. NAJVIŠE JEDNO PO EKRANU. */
.dugme.glavno{ background: var(--zuta); color: var(--na-zutoj); }
/* drugo glavno odmah do prvog (greška iz pocetna-v1) postaje sporedno */
.dugme.glavno ~ .dugme.glavno{ background: var(--ispuna); color: var(--tekst); }
/* .dugme.sporedno: 50, siva ispuna */
.dugme.sporedno{ background: var(--ispuna); color: var(--tekst); }
/* .dugme.tiho: tekst-dugme, bez ispune, površina za dodir 44 */
.dugme.tiho{ height: auto; min-height: var(--prst); padding: 0 var(--razmak-8); border-radius: 22px; background: transparent; color: var(--tekst); }
/* .dugme.malo: 44 (radijus 22), Subhead 15/20 naglašeno — za redove i zaglavlje na računaru */
.dugme.malo{ height: var(--visina-malo); min-height: 0; padding: 0 var(--razmak-16); border-radius: 22px; font: 600 15px/20px var(--font); }
.dugme.tiho.malo{ padding: 0 var(--razmak-8); }
.dugme.siroko{ width: 100%; }
/* ugašeno: sivo i čitljivo (drugi tekst na ispuni ≥ 4,5), ne providno; važi i za glavno */
.dugme:disabled, .dugme[aria-disabled="true"], .dugme.glavno:disabled, .dugme.glavno[aria-disabled="true"]{ background: var(--ispuna); color: var(--tekst-2); cursor: default; pointer-events: none; }
.dugme.tiho:disabled, .dugme.tiho[aria-disabled="true"]{ background: transparent; }
/* .dugme-okruglo: krug 44, staklo — nazad, pomoć, zatvori */
.dugme-okruglo{
  width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center; padding: 0;
  border-radius: 50%; color: var(--tekst); cursor: pointer; text-decoration: none;
  box-shadow: var(--staklo-senka-mala);
  transition: transform var(--trajanje) var(--hitro);
}
.dugme-okruglo:active{ transform: scale(.92); transition-duration: var(--trajanje-pritisak); }

/* ---------- 8. Staklo (samo traka dole, okrugla dugmad gore i list sa dna) ---------- */
.traka-dole, .dugme-okruglo, .sheet{
  background: var(--staklo);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--staklo-ivica);
}
/* na staklu nema sivog teksta: pozadina iza je nepoznata */
.traka-dole, .sheet{ --tekst-2: var(--tekst); }
.sheet .grupa{ --tekst-2: var(--siva-tekst); }
/* bez stakla na staklu */
.sheet .dugme-okruglo{ background: var(--ispuna-jaka); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; box-shadow: none; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .traka-dole, .dugme-okruglo{ background: var(--staklo-puno); }
  .sheet{ background: var(--povrsina); }
}
@media (prefers-reduced-transparency: reduce){
  .traka-dole, .dugme-okruglo{ background: var(--staklo-puno); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sheet{ background: var(--povrsina); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more){
  .traka-dole, .dugme-okruglo, .sheet{ background: var(--povrsina); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--tekst); }
}

/* ---------- 9. Polja ---------- */
/* .polje: naziv (Subhead 15/20 naglašeno) + unos 50 (radijus 10, ivica ≥ 3:1) + najviše jedna .lampica */
.polje{ display: grid; gap: var(--razmak-8); min-width: 0; }
.polje > label, .polje-naziv{ font: 600 15px/20px var(--font); color: var(--tekst); }
.polje :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea), .unos{
  display: block; width: 100%; min-width: 0; height: var(--visina-polje); margin: 0;
  padding: 0 var(--razmak-16); border: 1px solid var(--ivica-polja); border-radius: var(--radijus-unutra);
  background-color: var(--povrsina); color: var(--tekst);
  font: 400 17px/22px var(--font);
  -webkit-appearance: none; appearance: none;
}
.polje textarea, textarea.unos{ height: auto; min-height: 100px; padding: var(--razmak-12) var(--razmak-16); resize: vertical; }
.polje select, select.unos{
  padding-right: var(--razmak-32);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.polje ::placeholder, .unos::placeholder{ color: var(--tekst-2); opacity: 1; }
/* fokus u polju za kucanje: ivica postaje puna linija boje teksta (2 px), bez prstena spolja */
.polje :is(input, select, textarea):focus-visible, .unos:focus-visible{ border-color: var(--tekst); outline: 2px solid var(--tekst); outline-offset: -1px; }
/* 💡 jedina dozvoljena pomoć: jedan kratak red ispod polja (Footnote 13/18) */
.lampica{ font: 400 13px/18px var(--font); color: var(--tekst-2); }
.lampica::before{ content: "💡"; margin-right: var(--razmak-4); }
.polje .lampica ~ .lampica{ display: none; }
.polje-greska{ font: 400 13px/18px var(--font); color: var(--crvena-znak); }
.polje.greska :is(input, select, textarea){ border-color: var(--crvena-znak); }
.polje.greska .lampica{ display: none; }

/* .pretraga: kapsula 44 (radijus 22), siva ispuna, ikonica 20, Body 17/22 */
.pretraga{
  display: flex; align-items: center; gap: var(--razmak-8); height: var(--visina-pretraga); min-width: 0;
  padding: 0 var(--razmak-16); border-radius: 22px; background: var(--ispuna); color: var(--tekst-2);
}
.pretraga input{
  flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: none; background: transparent;
  color: var(--tekst); font: 400 17px/22px var(--font); -webkit-appearance: none; appearance: none;
}
.pretraga input::placeholder{ color: var(--tekst-2); opacity: 1; }
.pretraga input::-webkit-search-decoration{ -webkit-appearance: none; }
.pretraga:has(input:focus-visible){ outline: 2px solid var(--tekst); outline-offset: -2px; }

/* ---------- 10. Pilule (segmenti): staza 36 (radijus 18), klizač 32 (radijus 16), najviše 5; izabrano = klizač + deblja slova ---------- */
/* Prirodni radio-dugmići: strelice, Tab i čitač ekrana rade sami; sasija.js samo pomera klizač. */
.pilule{
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  height: var(--visina-pilule); padding: 2px; border: 0; margin: 0; min-width: 0;
  border-radius: 18px; background: var(--ispuna);
}
.pilule > label{
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: var(--razmak-4);
  min-width: 0; padding: 0 var(--razmak-8); border-radius: 16px; cursor: pointer;
  font: 400 15px/20px var(--font); color: var(--tekst); white-space: nowrap;
}
.pilule > label:has(input:checked){ font-weight: 600; }   /* izabrano se vidi i bez boje: deblja slova */
.pilule > label::before{ content: ""; position: absolute; inset: -6px 0; }   /* dodir 44 (klizač 32 + 2 × 6) */
.pilule > label > span{ overflow: hidden; text-overflow: ellipsis; }
.pilule input{ position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pilule > label:has(input:checked){ background: var(--klizac); box-shadow: var(--senka-klizac); }          /* bez JS-a */
.pilule > label:has(input:focus-visible){ outline: 2px solid var(--tekst); outline-offset: 0; }
/* ugašena pilula (input disabled, npr. „Niža cena“ dok nema cena): siva slova, ne reaguje */
.pilule > label:has(input:disabled){ color: var(--tekst-2); cursor: default; }
.pilule.ziv > label:has(input:checked){ background: transparent; box-shadow: none; }
.pilule-klizac{
  position: absolute; z-index: 0; top: 2px; left: 0; height: var(--visina-klizac); width: 0;
  border-radius: 16px; background: var(--klizac); box-shadow: var(--senka-klizac); pointer-events: none;
  transition: transform var(--trajanje-kratko) var(--hitro), width var(--trajanje-kratko) var(--hitro);
}
.pilule-klizac.bez-prelaza{ transition: none; }
/* dok ništa nije izabrano (npr. motor na vozila/vw-golf-7), klizač se ne crta: širine 0 ostavljao bi senku kao tanku liniju */
.pilule:not(:has(input:checked)) > .pilule-klizac{ visibility: hidden; }

/* ---------- 11. Grupa, red, prekidač ---------- */
/* .grupa: površina radijusa 26 na pozadini; sa razmakom 16 unutra je radijus 10 */
.grupa{ background: var(--povrsina); border-radius: var(--radijus-grupa); overflow: hidden; min-width: 0; }
.grupa.sa-razmakom{ padding: var(--razmak-16); display: grid; gap: var(--razmak-12); }
/* .red: najmanje 52, razmak 16 sa strane, odvajač (1 piksel ekrana) od 16; strelica se crta sama na redu-linku */
.red{
  position: relative; display: flex; align-items: center; gap: var(--razmak-12);
  min-height: var(--visina-red); padding: var(--razmak-8) var(--razmak-16); color: var(--tekst); text-decoration: none;
}
.red + .red::before{ content: ""; position: absolute; top: 0; left: var(--razmak-16); right: 0; height: var(--linija); background: var(--odvajac); }
.red + .red:has(> .ik:first-child)::before{ left: 52px; }   /* sa ikonicom: linija počinje gde i tekst (16 + 24 + 12) */
:is(a, button, label).red{ cursor: pointer; transition: background-color var(--brzo) ease; }
:is(a, button).red{ width: 100%; border: 0; background: none; text-align: left; font: inherit; }
:is(a, button, label).red:active{ background: var(--ispuna); }
.red > .ik{ color: var(--tekst); }
.red-tekst{ flex: 1; min-width: 0; display: grid; gap: 2px; }
.red-naslov{ font: 400 17px/22px var(--font); }
.red-opis{ font: 400 15px/20px var(--font); color: var(--tekst-2); }
.red-vrednost{ flex: none; max-width: 50%; font: 400 17px/22px var(--font); color: var(--tekst-2); text-align: right; }
a.red::after, .red.strelica::after{
  content: ""; flex: none; width: 8px; height: 8px; margin: 0 var(--razmak-4) 0 0;
  border-top: 2px solid var(--tekst-2); border-right: 2px solid var(--tekst-2); transform: rotate(45deg);
}
/* .prekidac: <input type="checkbox" role="switch" class="prekidac">, 64 × 28 (radijus 14), dugme 38 × 24, zeleno kad je uključen */
.prekidac{
  position: relative; flex: none; width: 64px; height: 28px; margin: 0; border: 0; border-radius: 14px;
  background: var(--ispuna-jaka); cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background-color var(--brzo) ease, box-shadow var(--brzo) ease;
}
.prekidac:not(:checked){ box-shadow: inset 0 0 0 1px var(--ivica-polja); }   /* isključen se vidi i na beloj (ivica ≥ 3:1) */
.prekidac::before{ content: ""; position: absolute; inset: -8px 0; }   /* dodir 44 */
.prekidac::after{
  content: ""; position: absolute; top: 2px; left: 2px; width: 38px; height: 24px; border-radius: 12px;
  background: var(--prekidac-dugme); box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  transition: transform var(--trajanje-kratko) var(--hitro);
}
.prekidac:checked{ background: var(--zelena); }
.prekidac:checked::after{ transform: translateX(22px); }
.prekidac:disabled{ opacity: .4; cursor: default; }

/* ---------- 12. Zaglavlje ---------- */
/* Telefon: visina 60 (dugme 44 + 8 + 8). „glavno“ = samo logo. „nazad“ = okruglo dugme 44 + kratak naslov (pojavi se kad
   h1 ode ispod trake), lepi se uz vrh. */
.zaglavlje{ position: relative; z-index: 30; padding-top: env(safe-area-inset-top, 0px); background: var(--pozadina); }
.zaglavlje-red{
  display: flex; align-items: center; gap: var(--razmak-12); height: var(--visina-zaglavlje);
  width: 100%; max-width: var(--sirina-sadrzaja); margin-inline: auto; padding-inline: var(--ivica-l) var(--ivica-d);
}
.zaglavlje-nazad{ position: sticky; top: 0; }
.logo{ display: inline-flex; align-items: center; flex: none; min-height: var(--prst); color: var(--tekst); }
.logo svg{ height: var(--logo-visina); width: auto; }
.zaglavlje-naslov{ flex: 1; min-width: 0; font: 600 17px/22px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* „nazad“ na telefonu, kao iOS: kratak naslov se pojavi tek kad veliki naslov (h1) ode ispod trake, da se ne čita dvaput.
   sasija.js dodaje .ziv i .naslov-vidljiv; bez JS-a naslov se vidi stalno. */
.zaglavlje-nazad.ziv .zaglavlje-naslov{ opacity: 0; }
.zaglavlje-nazad.ziv.naslov-vidljiv .zaglavlje-naslov{ opacity: 1; transition: opacity var(--brzo) ease; }   /* pretopi se kad dolazi, nestane odmah */
.zaglavlje-meni{ display: flex; align-items: center; gap: var(--razmak-8); }
.zaglavlje-meni a{ display: inline-flex; align-items: center; min-height: var(--prst); padding: 0 var(--razmak-8); font: 600 15px/20px var(--font); color: var(--tekst); }
.zaglavlje-meni a:hover{ text-decoration: underline; text-underline-offset: 4px; }
.zaglavlje .pretraga{ flex: 1; max-width: var(--sirina-srednja); margin-left: auto; }
.zaglavlje-akcije{ display: flex; align-items: center; gap: var(--razmak-8); flex: none; }   /* vidljivo 8 + 8 + 8 = 24 između natpisa */
@media (min-width: 960px){
  .zaglavlje{ position: sticky; top: 0; box-shadow: 0 var(--linija) 0 var(--odvajac); }   /* linija ispod, a visina ostaje 60 */
  .zaglavlje-red{ gap: var(--razmak-16); }
}

/* ---------- 13. Traka dole: plutajuća staklena kapsula 62 (radijus 31), uvlaka 21, 5 mesta ---------- */
.traka-dole{
  position: fixed; z-index: 40;
  left: max(var(--traka-uvlaka), env(safe-area-inset-left, 0px)); right: max(var(--traka-uvlaka), env(safe-area-inset-right, 0px));
  bottom: var(--traka-dole); max-width: var(--sirina-srednja); margin-inline: auto;
  height: var(--visina-traka); padding: var(--razmak-4); border-radius: 31px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  box-shadow: var(--staklo-senka);
  transition: background-color var(--brzo) ease;
}
/* iznad žutog dugmeta staklo bi postalo prljavo maslinasto: tada puna podloga (sasija.js dodaje .nad-zutim) */
.traka-dole.nad-zutim{ background: var(--staklo-puno); }
.traka-dole a{
  display: grid; justify-items: center; align-content: center; gap: var(--razmak-4); min-width: 0;
  border-radius: 26px;                             /* koncentrično: 31 − 1 (ivica) − 4 (razmak) */
  color: var(--tekst); text-decoration: none;
  font: 500 11px/13px var(--font);   /* Caption 2, najmanje dozvoljeno */
  transition: background-color var(--brzo) ease;
}
.traka-dole a > span:not(.ik-mesto){ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.traka-dole a[aria-current="page"]{ background: var(--traka-aktivno); font-weight: 700; }
.traka-dole a:active{ background: var(--ispuna); }
/* broj na ikonici (npr. stavke u korpi): crna ili bela tačka, nikad žuta; 18 visoko, kapsula, Caption 2 naglašeno */
.ik-mesto{ position: relative; display: inline-grid; place-items: center; }
.dugme .ik-mesto:has(> .broj:not([hidden])){ margin-right: var(--razmak-8); }   /* u dugmetu sa natpisom broj ne dodiruje reč */
.broj{
  position: absolute; top: -4px; right: -8px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 var(--razmak-4);
  border-radius: 9px; background: var(--tekst); color: var(--povrsina); font: 600 11px/13px var(--font); font-variant-numeric: tabular-nums;
}
@media (max-width: 959.98px){
  body:has(> .traka-dole){ padding-bottom: calc(var(--visina-traka) + var(--traka-dole) + var(--razmak-16)); }
}
@media (min-width: 960px){ .traka-dole{ display: none; } }

/* ---------- 14. Futer ---------- */
.futer{ margin-top: var(--razmak-32); box-shadow: inset 0 var(--linija) 0 var(--odvajac); color: var(--tekst-2); }
.futer-unutra{ width: 100%; max-width: var(--sirina-sadrzaja); margin-inline: auto; padding: var(--razmak-24) var(--ivica-d) var(--razmak-32) var(--ivica-l); }
.futer-linkovi{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--razmak-16); }
.futer-linkovi a{ display: flex; align-items: center; min-height: var(--prst); font: 400 15px/20px var(--font); color: var(--tekst); }
.futer-linkovi a:hover{ text-decoration: underline; text-underline-offset: 3px; }
/* obaveštenje o vansudskom rešavanju sporova (ZZP čl. 173 st. 3): vidi se na svakoj strani, veza je u spisku iznad.
   Načini plaćanja: „čeka podatak“ dok ugovori sa bankom i kurirom nisu potpisani (posle: jednobojni znaci iste visine). */
.futer-sporovi{ margin-top: var(--razmak-24); font: 400 13px/18px var(--font); color: var(--tekst-2); }
.futer-placanje{ display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--razmak-4); margin-top: var(--razmak-12); font: 400 13px/18px var(--font); color: var(--tekst-2); }
.futer-potpis{ margin-top: var(--razmak-16); font: 400 13px/18px var(--font); color: var(--tekst-2); }
@media (min-width: 960px){ .futer-linkovi{ grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- 15. Heroj: JEDINI dozvoljeni uvod ---------- */
/* H1 (Large Title 34/41) + jedna rečenica + polje za broj šasije (ako ga ima) + jedno .dugme.glavno + jedan tihi link
   (levo, sa ikonicom). Bez nadnaslova, markera i drugog velikog dugmeta: sve ostalo se sakrije, a proveri.mjs to javi.
   Najšire 640 (i na računaru): polje sa 17 kućica je glavni znak strane. */
.heroj{ display: grid; justify-items: start; padding-block: var(--razmak-24) var(--razmak-8); max-width: var(--sirina-kolona); }
.heroj > h1{ font: 700 34px/41px var(--font); }
.heroj > h1 + p{ margin-top: var(--razmak-8); max-width: 44ch; color: var(--tekst-2); font: 400 17px/22px var(--font); }
.heroj > .sasija-polje{ margin-top: var(--razmak-24); justify-self: stretch; }
.heroj > .dugme.glavno{ margin-top: var(--razmak-24); width: 100%; max-width: var(--sirina-mala); }
.heroj > .sasija-polje + .dugme.glavno{ margin-top: var(--razmak-16); }
.heroj > .dugme.tiho{ margin: var(--razmak-12) 0 0 calc(-1 * var(--razmak-8)); font-weight: 500; }   /* levo, u liniji sa naslovom */
.heroj > :not(h1, p, .sasija-polje, .dugme.glavno, .dugme.tiho),
.heroj > p:not(h1 + p),
.heroj > .sasija-polje ~ .sasija-polje,
.heroj > .dugme.glavno ~ .dugme.glavno,
.heroj > .dugme.tiho ~ .dugme.tiho{ display: none; }
.heroj > :is(h1, p) :is(mark, span, em, strong, b){ background: none; color: inherit; font: inherit; }
@media (min-width: 600px){
  .heroj{ grid-template-columns: auto 1fr; column-gap: var(--razmak-16); }
  .heroj > h1, .heroj > h1 + p, .heroj > .sasija-polje{ grid-column: 1 / -1; }
  .heroj > .dugme.glavno{ width: auto; }
  .heroj > .dugme.tiho{ margin: var(--razmak-24) 0 0; justify-self: start; align-self: center; }
  .heroj > .sasija-polje + .dugme.glavno + .dugme.tiho{ margin-top: var(--razmak-16); }
}

/* ---------- 16. Kartica kompleta, pločica, vozilo ---------- */
/* .kartica-kompleta: grupa radijusa 26, razmak 16; okvir ikonice 44 (r 10), naslov Headline, opis Subhead, cena Title 3 */
.kartica-kompleta{
  display: grid; align-content: start; gap: var(--razmak-8); min-width: 0; padding: var(--razmak-16);
  border-radius: var(--radijus-grupa); background: var(--povrsina); color: var(--tekst); text-decoration: none;
  transition: transform var(--trajanje) var(--hitro);
}
.kartica-kompleta > .ik-okvir{ margin-bottom: var(--razmak-4); }
.kartica-naslov{ font: 600 17px/22px var(--font); }
.kartica-opis{ font: 400 15px/20px var(--font); color: var(--tekst-2); }
.kartica-cena, .cena{ font: 600 20px/25px var(--font); font-variant-numeric: tabular-nums; }
.kartica-cena{ margin-top: var(--razmak-4); }
a.kartica-kompleta:active, a.plocica:active, a.vozilo:active{ transform: scale(.98); transition-duration: var(--trajanje-pritisak); }
/* .plocica: kategorija, radijus 26, ikonica 28, naziv Subhead 15/20 */
.plocica{
  display: grid; justify-items: center; align-content: center; gap: var(--razmak-8); min-width: 0; min-height: 96px;
  padding: var(--razmak-16) var(--razmak-8); border-radius: var(--radijus-grupa); background: var(--povrsina);
  color: var(--tekst); text-align: center; text-decoration: none; font: 500 15px/20px var(--font);
  transition: transform var(--trajanje) var(--hitro);
}
.plocica > span{ max-width: 100%; overflow-wrap: anywhere; }
/* .vozilo: sačuvano vozilo — okvir ikonice 44, naziv Headline, detalj Subhead, oznaka „Izabrano“ (siva .bedz, ne žuta) */
.vozilo{
  display: flex; align-items: center; gap: var(--razmak-12); min-width: 0; min-height: 76px; padding: var(--razmak-16);
  border-radius: var(--radijus-grupa); background: var(--povrsina); color: var(--tekst); text-decoration: none;
  transition: transform var(--trajanje) var(--hitro);
}
.vozilo-tekst{ flex: 1; min-width: 0; display: grid; gap: 2px; }
.vozilo-naziv{ font: 600 17px/22px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vozilo-detalj{ font: 400 15px/20px var(--font); color: var(--tekst-2); }

/* ---------- 17. Polje za broj šasije: 17 kućica u tri bloka (3 · 6 · 8 = WMI · VDS · VIS), visina 50 ---------- */
/* Bez JS-a je obično polje. sasija.js dodaje .ziv: pravi unos postaje providan, a znakovi „legnu“ u kućice. */
.sasija-polje{ position: relative; display: grid; gap: var(--razmak-8); min-width: 0; }
.sasija-polje input{ text-transform: uppercase; font-variant-numeric: tabular-nums; }
.sasija-kucice{ display: none; }
.sasija-polje.ziv .sasija-okvir{ position: relative; }
.sasija-polje.ziv .sasija-kucice{
  display: grid; grid-template-columns: 3fr 6fr 8fr; gap: var(--razmak-8); height: var(--visina-polje); pointer-events: none;
}
.sasija-blok{
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  border: 1px solid var(--ivica-polja); border-radius: var(--radijus-unutra); background: var(--povrsina); overflow: hidden;
}
.sasija-kucica{
  position: relative; display: grid; place-items: center; min-width: 0;
  font: 600 15px/20px var(--font); font-variant-numeric: tabular-nums; color: var(--tekst);
  transition: background-color var(--brzo) ease;
}
.sasija-kucica + .sasija-kucica{ box-shadow: inset var(--linija) 0 0 var(--odvajac); }
@media (max-width: 359.98px){   /* uzan telefon (320): kućica ~16 px, slova 13/18 i razmak blokova 4 */
  .sasija-polje.ziv .sasija-kucice{ gap: var(--razmak-4); }
  .sasija-kucica{ font: 600 13px/18px var(--font); }
}
.sasija-kucica.sledeca{ background: var(--ispuna-jaka); }
.sasija-kucica.legne > span{ animation: sasija-legne var(--trajanje) var(--hitro) both; }
@keyframes sasija-legne{ from{ transform: translateY(-10px) scale(.85); opacity: 0; } 40%{ opacity: 1; } to{ transform: none; opacity: 1; } }
.sasija-polje.ziv input{
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0;
  background: transparent; color: transparent; caret-color: transparent; -webkit-text-fill-color: transparent;
  font-size: 17px;                                   /* ≥ 16, da iPhone ne uveličava */
  opacity: 0.01;
}
.sasija-polje.ziv:has(input:focus) .sasija-blok{ border-color: var(--tekst); box-shadow: inset 0 0 0 1px var(--tekst); }
.sasija-polje.ziv input:focus-visible{ outline: none; }
/* greška: crvene kućice kao obično polje (.polje.greska); lampica se tada skriva, ostaje .polje-greska */
.sasija-polje.greska .sasija-blok, .sasija-polje.greska input.unos{ border-color: var(--crvena-znak); }
.sasija-polje.greska .lampica{ display: none; }
/* kad je upisano svih 17: okviri ostaju u boji teksta, a ispod iskoči žuta kvačica „odgovara“ (ista kao u logou i ponudi) */
.sasija-potvrda{ display: none; align-items: center; gap: var(--razmak-8); font: 400 15px/20px var(--font); color: var(--tekst); }
.sasija-polje.gotovo .sasija-potvrda{ display: flex; }
/* potvrda „Upisano svih 17 znakova.“ i lampica („… Ima 17 znakova.“) bi rekle isto: potvrda tada stoji umesto lampice.
   Upozorenje („Slova I, O i Q nema…“) se ipak vidi dok traje (.javlja, sasija.js). */
.sasija-polje.gotovo:not(.javlja) > .lampica{ display: none; }
/* .kvacica-odgovara: <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="12"/><path d="M7 12.5l3.25 3.25L17 9"/></svg> — jedini znak „odgovara“ */
.kvacica-odgovara{ width: 24px; height: 24px; flex: none; }
.kvacica-odgovara circle{ fill: var(--zuta); }
.kvacica-odgovara path{ fill: none; stroke: var(--na-zutoj); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 15; stroke-dashoffset: 0; }
.kvacica-odgovara.crtaj circle, .sasija-polje.gotovo .kvacica-odgovara circle{ transform-box: fill-box; transform-origin: center; animation: sasija-iskoci var(--trajanje) var(--hitro) both; }
.kvacica-odgovara.crtaj path, .sasija-polje.gotovo .kvacica-odgovara path{ animation: sasija-crtaj var(--trajanje) var(--glatko) both; }
@keyframes sasija-iskoci{ from{ transform: scale(.6); opacity: 0; } to{ transform: none; opacity: 1; } }
@keyframes sasija-crtaj{ from{ stroke-dashoffset: 15; } 30%{ stroke-dashoffset: 15; } to{ stroke-dashoffset: 0; } }

/* ---------- 18. Tok (status porudžbine) ---------- */
/* Krug 20: gotovo = pun, sada = prsten sa tačkom i deblji naslov, posle = prazan prsten (≥ 3:1); linija 2, razmak 16 do teksta.
   Bez žute i bez kvačice: kvačica na šasija.rs znači samo „odgovara“. */
.tok{ list-style: none; margin: 0; padding: 0; display: grid; }
.tok > li{
  position: relative; display: grid; gap: 2px; padding: 0 0 var(--razmak-20) calc(20px + var(--razmak-16));   /* krug 20 + razmak 16 */
  background: linear-gradient(var(--odvajac), var(--odvajac)) no-repeat 9px 25px / 2px calc(100% - 26px);
}
.tok > li:last-child{ padding-bottom: 0; background: none; }
.tok > li::before{
  content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--ivica-polja); background: transparent;
}
.tok-naslov{ font: 400 17px/22px var(--font); color: var(--tekst-2); }
.tok-opis{ font: 400 13px/18px var(--font); color: var(--tekst-2); }
.tok > li.gotovo{ background-image: linear-gradient(var(--tekst), var(--tekst)); }   /* pređen deo puta: puna linija */
.tok > li.gotovo:last-child{ background-image: none; }   /* i poslednji korak gotov („Porudžbina je stigla“): ispod nema linije */
.tok > li.gotovo .tok-naslov{ color: var(--tekst); }
.tok > li.gotovo::before{ border-color: var(--tekst); background: var(--tekst); }
.tok > li.sada .tok-naslov{ color: var(--tekst); font-weight: 600; }
.tok > li.sada::before{ border-color: var(--tekst); }
.tok > li.sada::after{ content: ""; position: absolute; left: 6px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--tekst); }

/* ---------- 19. Ponuda: tri izbora u grupi; izabrano = žuta kvačica „odgovara“. Isti red bez žute: .kp-izbor (dostava, plaćanje) ---------- */
.ponuda{ border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--razmak-8); }
.ponuda > legend{ padding: 0; margin-bottom: var(--razmak-8); font: 700 22px/28px var(--font); }
.ponuda-opcije, .kp-izbori{ background: var(--povrsina); border-radius: var(--radijus-grupa); overflow: hidden; }
.ponuda-opcija, .kp-izbor{
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--razmak-12);
  min-height: 72px; padding: var(--razmak-12) var(--razmak-16); cursor: pointer; transition: background-color var(--brzo) ease;
}
.ponuda-opcija + .ponuda-opcija::before, .kp-izbor + .kp-izbor::before{ content: ""; position: absolute; top: 0; left: 52px; right: 0; height: var(--linija); background: var(--odvajac); }
.ponuda-opcija:active, .kp-izbor:active{ background: var(--ispuna); }
.ponuda-opcija input{
  position: relative; width: 24px; height: 24px; margin: 0; border: 2px solid var(--ivica-polja); border-radius: 50%;
  background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background-color var(--brzo) ease, border-color var(--brzo) ease;
}
.ponuda-opcija input:checked{ border-color: var(--zuta); background: var(--zuta); }
.ponuda-opcija input:checked::after{
  content: ""; position: absolute; left: 6px; top: 5px; width: 9px; height: 5px;
  border-left: 2px solid var(--na-zutoj); border-bottom: 2px solid var(--na-zutoj); transform: rotate(-45deg);
}
.ponuda-tekst, .kp-izbor-tekst{ display: grid; gap: 2px; min-width: 0; }
.ponuda-naziv, .kp-izbor-naziv{ font: 600 17px/22px var(--font); }
.ponuda-opis, .kp-izbor-opis{ font: 400 15px/20px var(--font); color: var(--tekst-2); }
.ponuda-cena{ justify-self: end; text-align: right; font: 600 20px/25px var(--font); font-variant-numeric: tabular-nums; }
/* izbor jednog od više bez žute (kupovina: dostava, plaćanje): izabrano = pun krug boje teksta, bez kvačice; ikonica desno */
.kp-izbor-grupa{ border: 0; margin: 0; padding: 0; min-width: 0; }
.kp-izbor-grupa > legend{ padding: 0; margin-bottom: var(--razmak-12); font: 600 20px/25px var(--font); }
.kp-izbor{ grid-template-columns: 24px minmax(0, 1fr) 24px; }
.kp-izbor > input{
  position: relative; width: 24px; height: 24px; margin: 0; border: 2px solid var(--ivica-polja); border-radius: 50%;
  background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; transition: border-color var(--brzo) ease;
}
.kp-izbor > input:checked{ border-color: var(--tekst); }
.kp-izbor > input:checked::after{ content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--tekst); }
.kp-izbor-tekst > .ceka{ justify-self: start; margin-top: var(--razmak-4); }
.kp-izbor > .ik{ color: var(--tekst); }

/* ---------- 20. List sa dna (sheet): <dialog class="sheet">, ručica 36 × 5 ---------- */
/* iOS 26: list lebdi kao traka dole (21 od ivica i od dna, isto mesto kao traka), svi uglovi 31; razmak unutra 16. */
.sheet{
  position: fixed; z-index: 50;
  inset: auto max(var(--traka-uvlaka), env(safe-area-inset-right, 0px)) var(--traka-dole) max(var(--traka-uvlaka), env(safe-area-inset-left, 0px));
  width: auto; max-width: var(--sirina-srednja); max-height: calc(100dvh - 48px - var(--traka-dole));
  margin: 0 auto; padding: var(--razmak-8) var(--razmak-16) var(--razmak-16);
  border-radius: 31px;
  color: var(--tekst); box-shadow: var(--staklo-senka); overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(calc(100% + var(--razmak-32))); opacity: 0;
  transition: transform var(--trajanje) var(--glatko), opacity var(--brzo) ease;
}
.sheet:not([open]){ display: none; }
.sheet.otvoren{ transform: none; opacity: 1; }
.sheet::backdrop{ background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity var(--brzo) ease; }
.sheet.otvoren::backdrop{ opacity: 1; }
@media (prefers-color-scheme: dark){ :root:not([data-tema="svetla"]) .sheet::backdrop{ background: rgba(0, 0, 0, .6); } }
:root[data-tema="tamna"] .sheet::backdrop{ background: rgba(0, 0, 0, .6); }
.sheet-rucica{ display: block; width: 36px; height: 5px; margin: 0 auto var(--razmak-8); border-radius: 2.5px; background: var(--rucica); }
.sheet-zaglavlje{ display: flex; align-items: center; gap: var(--razmak-12); min-height: var(--prst); margin-bottom: var(--razmak-12); }
.sheet-zaglavlje > :is(h2, h3, p){ flex: 1; min-width: 0; font: 600 17px/22px var(--font); }
.sheet-telo{ display: grid; gap: var(--razmak-16); }
.zatvori-znak{ position: relative; width: 14px; height: 14px; }
.zatvori-znak::before, .zatvori-znak::after{ content: ""; position: absolute; left: 6px; top: -1px; width: 2px; height: 16px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.zatvori-znak::after{ transform: rotate(-45deg); }
html.sheet-otvoren{ overflow: hidden; }

/* ---------- 21. Kratka poruka (toast): kapsula min 44 (radijus 22), iznad trake ---------- */
.poruka-kratka{
  position: fixed; z-index: 60; left: 50%; bottom: calc(var(--razmak-24) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: var(--razmak-8); width: max-content; max-width: min(calc(100% - 32px), var(--sirina-mala));
  min-height: var(--prst); padding: var(--razmak-12) var(--razmak-16); border-radius: 22px;   /* 12 + 20 + 12 = 44, kapsula */
  background: var(--poruka-pozadina); color: var(--poruka-tekst);
  font: 600 15px/20px var(--font); box-shadow: inset 0 0 0 var(--linija) var(--staklo-ivica), var(--staklo-senka-mala);   /* ivica bez uticaja na visinu */
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  transition: transform var(--trajanje) var(--glatko), opacity var(--brzo) ease;
}
.poruka-kratka.vidljiva{ transform: translate(-50%, 0); opacity: 1; }
@media (max-width: 959.98px){
  body:has(> .traka-dole) .poruka-kratka{ bottom: calc(var(--visina-traka) + var(--traka-dole) + var(--razmak-12)); }
}

/* ---------- 22. Prazno stanje, čeka podatak, oznaka ---------- */
/* .np-gotovo (posle brisanja ili slanja) je isto prazno stanje */
.prazno, .np-gotovo{ display: grid; justify-items: center; gap: var(--razmak-8); padding: var(--razmak-32) var(--razmak-16); text-align: center; }
/* znak u krugu 64 iznad naslova: prazno stanje, potvrda porudžbine, kod iz mejla, greška, zaključano */
.prazno > .ik-okvir, .np-gotovo > .ik-okvir, .kp-primljeno > .ik-okvir, .pr-uvod > .ik-okvir, .gr-stanje > .ik-okvir, .ap-stanje > .ik-okvir{
  width: var(--znak); height: var(--znak); border-radius: 50%; margin-bottom: var(--razmak-8);
}
.ap-stanje > .ik-okvir{ position: relative; }
.prazno > :is(h2, h3){ font: 600 20px/25px var(--font); }
.prazno > p{ max-width: 32ch; color: var(--tekst-2); }
.prazno > .dugme, .np-gotovo > .dugme{ margin-top: var(--razmak-16); }
/* .ceka: podatak koji fali (nikad izmišljen) — isprekidan obrub, čitljivo u obe teme, Footnote 13/18, visina 24 */
.ceka{
  display: inline-flex; align-items: center; min-height: 24px; max-width: 100%; padding: 2px var(--razmak-8);
  border: 1px dashed var(--tekst-2); border-radius: 12px; background: transparent; color: var(--tekst-2);
  font: 400 13px/18px var(--font); font-variant-numeric: normal; vertical-align: middle;
}
/* .bedz: mala oznaka, visina 24 (radijus 12), Caption 1 naglašeno */
.bedz{
  display: inline-flex; align-items: center; gap: var(--razmak-4); height: 24px; padding: 0 var(--razmak-8);
  border-radius: 12px; background: var(--ispuna); color: var(--tekst); white-space: nowrap; flex: none;
  font: 600 12px/16px var(--font);
}
/* .bedz.zuta: SAMO „Odgovara tvom vozilu“ — žuta sa kvačicom, kao u logou. „Izabrano“ i ostalo su obična siva .bedz. */
.bedz.zuta{ background: var(--zuta); color: var(--na-zutoj); }
.bedz.zuta::before{ content: ""; flex: none; width: 8px; height: 4px; margin: -2px 2px 0 0; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
/* uspeh i greška: providna ispuna se slaže preko površine, ne preko onoga što je ispod — inače na pozadini
   (#F2F2F7) zeleno pada na 4,4 a crveno na 4,0. Ovako je svuda kao „na površini“ iz tabele gore. Isto važi za stanje
   u radnom stolu (.stanje.gotovo, .problem) i za znak ishoda plaćanja (.ishod-znak.uspeh, .greska); stanje plaćanja
   („Odobreno“, „Odbijeno“) ide kroz .stanje.gotovo/.problem, ne kroz .bedz (rečnik §4).
   Oznaka primera je obična siva .bedz („primer“); kad je cela strana primer: .primer-traka (odeljak 32, rečnik §5). */
.bedz.uspeh, .stanje.gotovo, .ishod-znak.uspeh{ background: linear-gradient(var(--zelena-ispuna), var(--zelena-ispuna)), var(--povrsina); color: var(--zelena-znak); }
.bedz.greska, .stanje.problem, .ishod-znak.greska{ background: linear-gradient(var(--crvena-ispuna), var(--crvena-ispuna)), var(--povrsina); color: var(--crvena-znak); }

/* ---------- 23. Prodavnica: artikal, cena, količina, zbir, kostur ---------- */
/* .artikal: red u .grupa — okvir ikonice ili slika 44, a u tekstu jedno ispod drugog: naziv (Body), proizvođač i broj
   dela (Subhead, sivo), oznaka „Odgovara tvom vozilu“ (.bedz.zuta) ili „Ne odgovara“ (.bedz.greska) i .artikal-cena:
   cena sa PDV-om (Title 3) i pored nje precrtana prethodna cena kad je popust
   („prethodna cena“ = najniža u poslednjih 30 dana, docs/strane.json). Cena je ispod naziva, da naziv ima celu širinu. */
.artikal{ align-items: flex-start; padding-block: var(--razmak-12); }
.artikal > .ik-okvir, .artikal > img{ width: 44px; height: 44px; flex: none; border-radius: var(--radijus-unutra); object-fit: cover; }
a.artikal::after{ align-self: center; }
.artikal .red-tekst{ gap: var(--razmak-4); }
.artikal .bedz{ justify-self: start; }
.red + .artikal::before, .red + .red:has(> :is(.ik-okvir, .kostur-kvadrat):first-child)::before{ left: 72px; }   /* linija počinje gde i tekst (16 + 44 + 12) */
.artikal-cena{ display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--razmak-4) var(--razmak-8); margin-top: var(--razmak-4); }
.cena-pre{ font: 400 13px/18px var(--font); color: var(--tekst-2); text-decoration: line-through; font-variant-numeric: tabular-nums; }
/* .kolicina: − broj +, kapsula 44, svako dugme 44 × 44 */
.kolicina{ display: inline-flex; align-items: center; height: var(--visina-malo); border-radius: 22px; background: var(--ispuna); color: var(--tekst); }
.kolicina > button{ display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; transition: background-color var(--brzo) ease; }
.kolicina > button:active{ background: var(--ispuna-jaka); }
.kolicina > button:disabled{ color: var(--tekst-2); cursor: default; }
.kolicina > output{ min-width: 32px; text-align: center; font: 600 17px/22px var(--font); font-variant-numeric: tabular-nums; }
/* .zbir: <dl> sa redovima vrednosti i poslednjim .zbir-ukupno (Title 3) */
.zbir{ display: grid; gap: var(--razmak-8); margin: 0; }
.zbir > div{ display: flex; align-items: center; justify-content: space-between; gap: var(--razmak-12); min-height: var(--razmak-24); }
.zbir dt{ color: var(--tekst-2); }
.zbir dd{ margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.zbir > .zbir-ukupno{ padding-top: var(--razmak-12); box-shadow: inset 0 var(--linija) 0 var(--odvajac); }
.zbir > .zbir-ukupno dt{ color: var(--tekst); font-weight: 600; }
.zbir > .zbir-ukupno dd{ font: 600 20px/25px var(--font); }
/* .kostur: siva mesta dok se podaci učitavaju; roditelj nosi aria-busy="true" */
.kostur{ display: block; background: var(--ispuna-jaka); animation: sasija-disanje 1.6s ease-in-out infinite; }
.kostur-kvadrat{ width: 44px; height: 44px; flex: none; border-radius: var(--radijus-unutra); }
.kostur-crta{ height: 12px; border-radius: 6px; }
.kostur-crta + .kostur-crta{ margin-top: var(--razmak-8); width: 60%; }
@keyframes sasija-disanje{ 50%{ opacity: .5; } }

/* =====================================================================================================
   DELOVI STRANA (odeljci 24–40). Spojeno 19. 10. 2026 iz dizajn/dodaci/*.css, popodne (stari fajlovi:
   nacrti/dodaci-spojeni/) i uveče posle recenzija tura (nacrti/dodaci-spojeni/drugo-spajanje/).
   Odeljak 24 drži ono što koristi više oblasti, jednom, sa svim klasama koje ga koriste. Odeljci 25–40 su po oblastima,
   a klase nose predmetak oblasti, da se strane ne sudaraju:
     25 rs- rsa- rsb- rsc- radni sto · 26 izbor vozila · 27 upit- upit · 28 kp- korpa i kupovina · 29 pt- pretraga i kategorije
     30 placanje- ishod- ips- plaćanje · 31 por- porudžbine · 32 ga- dv- sb- vz- garaža · 33 pa- sc- pd- početna
     34 ar- ko- artikal i kompleti · 35 pr- prijava · 36 na- np- nalog · 37 ap- uv- sk- aplikacija · 38 pom- gr- pomoć i greške
     39 zk- zak- pc- pravne strane · 40 sd- sadržaj
   Nova komponenta: prvo pogledaj osnovu (1–23) i odeljak 24. Ako je nema, ide u dizajn/dodaci/NN-ime.css (docs/ALATI.md §4),
   a pri sledećem spajanju ovde.
   ===================================================================================================== */

/* ---------- 24. Zajedničko za više oblasti ---------- */

/* 24.1 Uvod strane bez heroja: H1 + jedna siva rečenica (+ oznaka „primer“) — upit, korpa, IPS, porudžbine, sadržaj, pomoć, kompleti */
.upit-uvod, .kp-uvod, .ips-uvod, .por-uvod, .sd-uvod, .pom-uvod, .ko-uvod{ display: grid; gap: var(--razmak-8); max-width: var(--sirina-kolona); }
.upit-uvod, .kp-uvod, .ips-uvod, .por-uvod, .sd-uvod, .pom-uvod{ padding-block: var(--razmak-16) var(--razmak-24); }
.por-uvod, .sd-uvod, .pom-uvod{ justify-items: start; }
.ko-uvod{ padding-block: var(--razmak-16) var(--razmak-8); }
.upit-uvod > p, .kp-uvod > p, .ips-uvod > p, .por-uvod > p, .sd-uvod > p, .pom-uvod > p, .ko-uvod > p{ color: var(--tekst-2); }
.upit-uvod .bedz, .kp-uvod .bedz, .por-uvod .bedz{ vertical-align: middle; }

/* 24.2 Vrh strane bez zaglavlja: samo logo, 60 visoko, ispod bezbedne zone (plaćanje, ekrani aplikacije) */
.placanje-vrh, .ap-vrh{ display: flex; align-items: center; height: var(--visina-zaglavlje); margin-top: env(safe-area-inset-top, 0px); }
.ap-vrh{ flex: none; }
/* ekran preko celog prozora (telo-klasa ap-cela, gr-cela): sadržaj je stub visok koliko ekran */
body.ap-cela #sadrzaj, body.gr-cela #sadrzaj{ display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

/* 24.3 Raspored glavno + strana: telefon jedna kolona; od 960 glavno levo (5/8), strana desno (3/8) */
.upit-raspored, .por-raspored, .rsa-ponuda, .kp-raspored, .placanje, .ips-raspored{ display: grid; gap: var(--razmak-24); align-items: start; min-width: 0; }
.kp-raspored, .placanje{ gap: var(--razmak-32); }
@media (min-width: 960px){
  .upit-raspored, .por-raspored, .rsa-ponuda, .kp-raspored, .placanje, .ips-raspored{ grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
  .upit-raspored, .por-raspored, .rsa-ponuda{ gap: var(--razmak-32); }
}
/* dve jednake kolone od 960 (Pravila cena, nalog, kontakt i o nama, Danas) */
.rsa-mreza, .rsb-mreza, .na-kolone, .pom-dve{ display: grid; gap: var(--razmak-24); align-items: start; min-width: 0; }
@media (min-width: 960px){
  .rsa-mreza, .rsb-mreza, .na-kolone, .pom-dve{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rsb-mreza, .na-kolone, .pom-dve{ gap: var(--razmak-32); }
}
/* stub: blokovi jedan ispod drugog (razmak 24 ili 32) */
.upit-kolona, .por-kolona, .rsa-kolona, .rsa-strana, .rsb-kolona, .na-kolona, .dv-levo, .vz-levo, .vz-desno, .zak-kolona{ display: grid; gap: var(--razmak-24); align-content: start; min-width: 0; }
.kp-kolona, .kp-strana, .placanje-kolona, .rsc-kolona, .ar-kolona, .sd-kolona{ display: grid; gap: var(--razmak-32); align-content: start; min-width: 0; }
/* blok: naslov (Title 3) pa grupa, razmak 12 */
.kp-blok, .placanje-blok, .ko-strana > section, .dv-desno{ display: grid; gap: var(--razmak-12); align-content: start; min-width: 0; }
.kp-blok > h2, .kp-blok-glava > h2, .placanje-blok > h2, .sk-panel > h2{ font: 600 20px/25px var(--font); }
/* lepi se ispod zaglavlja dok se lista (od 960) */
@media (min-width: 960px){
  .upit-strana, .kp-strana.lepi, .zk-radnja, .zak-sadrzaj, .pc-povezano{ position: sticky; top: calc(var(--visina-zaglavlje) + var(--razmak-24)); }
}

/* 24.4 Naslov levo, jedna radnja desno (garaža, nalog, naziv polja sa tihim dugmetom) */
.ga-glava, .na-glava, .pr-naziv-red, .na-naziv-red{ display: flex; align-items: center; justify-content: space-between; gap: var(--razmak-12); min-width: 0; }
/* tiho dugme uz natpis: dodir 44, a red ostaje visok kao natpis („Zaboravio si lozinku?“, „Ne sećaš se?“) */
.pr-naziv-red > .dugme.tiho, .na-naziv-red > .dugme.tiho{ margin-block: calc(-1 * var(--razmak-12)); margin-right: calc(-1 * var(--razmak-8)); font-weight: 400; color: var(--tekst-2); }
/* red sa nazivom levo i kontrolom desno (količina, prekidač); ceo red sa prekidačem je meta za prst */
.upit-red, .polje > .rsa-prekidac, .kp-prekidac-red, .na-prekidac{ display: flex; align-items: center; justify-content: space-between; gap: var(--razmak-12); min-height: var(--prst); }
.polje > .rsa-prekidac, .kp-prekidac-red, .na-prekidac{ cursor: pointer; }
.kp-prekidac-red > span, .na-prekidac > span{ font: 600 15px/20px var(--font); }

/* 24.5 Tihi tekst: napomena ispod grupe poravnata sa tekstom u redovima (uvučena 16) */
.upit-napomena, .por-napomena, .placanje-napomena, .sd-napomena, .por-skup > :is(.lampica, .polje-greska),
.np-odeljak > :is(.na-napomena, .lampica), .zak-blok > :is(.zak-stanje, .zak-napomena){ padding-inline: var(--razmak-16); }
.upit-napomena, .por-napomena{ margin-top: calc(-1 * var(--razmak-12)); }   /* bliže grupi iznad (12 umesto 24) */
/* sitan sivi red (Footnote 13/18) */
.kp-napomena, .ga-napomena, .na-napomena, .placanje-napomena, .pr-sitno, .pom-sitno, .sd-napomena{ font: 400 13px/18px var(--font); color: var(--tekst-2); }

/* 24.6 Pilule za izbor dela strane nisu šire od 420 */
.izbor-vozila > .pilule, .rsa-pilule, .rsb-pilule, .rsc-pilule, .np-pilule, .dv-nacin, .dv-vrsta{ max-width: var(--sirina-mala); }   /* .pt-pilule: 29 (posle .pt-vrh > *) */

/* 24.7 Tiho dugme ispod bloka: levo, tekst u liniji sa naslovom (dodir ostaje 44) */
.rsa-strana .grupa > .dugme.tiho, .rsa-uredi > .rsa-nazad, .dv-vin > .dugme.tiho, .dv-vise, .vz-ukloni, .ko-forma .dugme.tiho,
.por-tiho, .sd-odeljak > .dugme.tiho, .sd-radnje > .dugme.tiho{ justify-self: start; margin-left: calc(-1 * var(--razmak-8)); }
.por-tiho, .sd-odeljak > .dugme.tiho, .sd-radnje > .dugme.tiho{ font-weight: 500; }

/* 24.8 Spisak bez tačaka i uvlake (redovi su u .grupa) */
.kp-lista, .ar-lista, .np-lista, .pd-tri, .zak-lista, .pc-povezano ul.grupa{ list-style: none; margin: 0; padding: 0; }
/* odvajač kad redovi nisu braća (red u <li>, <details>, <dl>): 1 piksel ekrana, od 16 kao u grupi */
.ar-lista > li + li > .red::before, .ar-vise::before, .ar-vise > summary + .ar-lista > li:first-child > .red::before,
.zak-lista > li > .red::before, .pom-pitanje:not([hidden]) ~ .pom-pitanje::before, .sd-podatak + .sd-podatak::before{
  content: ""; position: absolute; top: 0; left: var(--razmak-16); right: 0; height: var(--linija); background: var(--odvajac);
}

/* 24.9 Fokus sa tastature na skrivenoj ili maloj kontroli (izbor fajla, krug, kockica, čip): okvir boje teksta oko nje */
label.dugme:has(input:focus-visible), label.por-dodaj-sliku:has(input:focus-visible), label.dodaj-sliku:has(input:focus-visible), .dv-fajl:focus-visible + .dugme, .rsb-otpremi:has(input:focus-visible),
.rs-cip:has(> input:focus-visible), .kp-izbor > input:focus-visible, .por-izbor > input:focus-visible, .ga-krug:focus-visible,
.kp-saglasnost > input:focus-visible, .pr-saglasnost > input:focus-visible{ outline: 2px solid var(--tekst); outline-offset: 2px; }

/* 24.10 Izbor „jedan od“: krug 24 sa ivicom ≥ 3:1; izabrano = pun krug boje teksta sa tačkom (bez žute i bez kvačice) */
.por-izbor > input, .ga-krug{
  flex: none; width: 24px; height: 24px; margin: 0; border: 2px solid var(--ivica-polja);
  background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.por-izbor > input{ position: relative; border-radius: 50%; transition: background-color var(--brzo) ease, border-color var(--brzo) ease, box-shadow var(--brzo) ease; }
.ga-krug{ border-radius: 12px; transition: background-color var(--brzo) ease, border-color var(--brzo) ease; }
.por-izbor > input:checked, .ga-krug:checked{ border-color: var(--tekst); background: var(--tekst); box-shadow: inset 0 0 0 4px var(--povrsina); }

/* 24.11 Saglasnost (korpa, registracija): kockica 24 (radijus 6) u boji teksta, cela oznaka je meta za prst. Nije žuta. */
.kp-saglasnost, .pr-saglasnost{ display: flex; align-items: flex-start; gap: var(--razmak-12); min-height: var(--prst); padding-block: var(--razmak-8); cursor: pointer; font: 400 15px/20px var(--font); }
.kp-saglasnost > input, .pr-saglasnost > input{
  position: relative; flex: none; width: 24px; height: 24px; margin: 0; border: 2px solid var(--ivica-polja); border-radius: 6px;
  background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background-color var(--brzo) ease, border-color var(--brzo) ease;
}
.kp-saglasnost > input:checked, .pr-saglasnost > input:checked{ border-color: var(--tekst); background: var(--tekst); }
.kp-saglasnost > input:checked::after, .pr-saglasnost > input:checked::after{
  content: ""; position: absolute; left: 5px; top: 5px; width: 9px; height: 5px;
  border-left: 2px solid var(--povrsina); border-bottom: 2px solid var(--povrsina); transform: rotate(-45deg);
}
.kp-saglasnost a, .pr-saglasnost a{ color: var(--plava); }
.kp-saglasnost a:hover, .pr-saglasnost a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.kp-saglasnost.greska > input, .pr-saglasnost.greska > input{ border-color: var(--crvena-znak); }

/* 24.12 Lozinka (prijava, nalog): izgleda kao .polje unos (50, radijus 10, ivica ≥ 3:1), desno „Prikaži“ (prst 44) */
.pr-lozinka, .na-lozinka{
  display: flex; align-items: center; min-width: 0; height: var(--visina-polje);
  border: 1px solid var(--ivica-polja); border-radius: var(--radijus-unutra); background: var(--povrsina); color: var(--tekst);
}
.polje .pr-lozinka > input, .polje .na-lozinka > input{ flex: 1; height: 100%; min-width: 0; border: 0; border-radius: var(--radijus-unutra); background: transparent; }
.polje .pr-lozinka > input:focus-visible, .polje .na-lozinka > input:focus-visible{ outline: none; }
.pr-lozinka:has(input:focus-visible), .na-lozinka:has(input:focus-visible){ border-color: var(--tekst); outline: 2px solid var(--tekst); outline-offset: -1px; }
.polje.greska .pr-lozinka, .polje.greska .na-lozinka{ border-color: var(--crvena-znak); }
.pr-prikazi, .na-prikazi{
  flex: none; height: 100%; min-width: var(--prst); padding: 0 var(--razmak-16); border: 0; border-radius: var(--radijus-unutra);
  background: transparent; color: var(--tekst); font: 600 15px/20px var(--font); cursor: pointer;
}
.pr-prikazi:focus-visible, .na-prikazi:focus-visible{ outline: 2px solid var(--tekst); outline-offset: -4px; }
/* lozinka sa greškom u fokusu ostaje crvena: 24.19 */

/* 24.13 Slika uz obrazac (upit, reklamacija): dugme je oznaka oko skrivenog izbora fajla; posle izbora sličica 44 + ime.
   Zajedničko ime za novo dugme: .dodaj-sliku (isto kao .upit-dodaj-sliku i .por-dodaj-sliku) */
.dodaj-sliku, .upit-dodaj-sliku, .por-dodaj-sliku{ justify-self: start; }
.upit-slika, .por-slika{ display: flex; align-items: center; gap: var(--razmak-12); min-width: 0; }
.upit-slika > img, .por-slika > img{ width: 44px; height: 44px; flex: none; border-radius: var(--radijus-unutra); object-fit: cover; background: var(--ispuna); }
.upit-slika-ime, .por-slika-ime{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 15px/20px var(--font); }

/* 24.14 Meni sa kapsulama (radni sto, nalog): stavka 44, ikonica 24, izabrano = jača ispuna i deblja slova */
.rs-meni-lista a, .na-meni-lista a{
  display: flex; align-items: center; gap: var(--razmak-12); min-height: var(--prst); padding: 0 var(--razmak-16) 0 var(--razmak-12);
  border-radius: 22px; color: var(--tekst); font: 400 17px/22px var(--font); white-space: nowrap; text-decoration: none;
  transition: background-color var(--brzo) ease;
}
.rs-meni-lista a[aria-current="page"], .na-meni-lista a[aria-current="page"]{ background: var(--ispuna-jaka); font-weight: 600; }
.rs-meni-lista a:active, .na-meni-lista a:active{ background: var(--ispuna-jaka); }
@media (hover: hover){ .rs-meni-lista a:not([aria-current]):hover, .na-meni-lista a:not([aria-current]):hover, .na-meni-naslov:hover{ background: var(--ispuna); } }
.rs-meni-lista > .rs-meni-odvoji, .na-meni-lista > .na-meni-odvoji{ margin-top: var(--razmak-8); padding-top: var(--razmak-8); box-shadow: inset 0 var(--linija) 0 var(--odvajac); }

/* 24.15 Ishod (potvrda porudžbine, plaćanje): broj porudžbine pun i deblji; dugmad ispod (telefon: cela širina; od 600: u redu, levo) */
.ishod .t-brojevi, .kp-primljeno .t-brojevi{ color: var(--tekst); font-weight: 600; }
.ishod-dugmad, .kp-dugmad{ display: grid; gap: var(--razmak-8); justify-self: stretch; margin-top: var(--razmak-16); }
.ishod-dugmad > .dugme.tiho, .kp-dugmad > .dugme.tiho{ justify-self: center; }
@media (min-width: 600px){
  .ishod-dugmad, .kp-dugmad{ display: flex; flex-wrap: wrap; align-items: center; justify-self: start; gap: var(--razmak-16); }
}

/* 24.16 Stanje na sredini (greške, zaključano, ažuriraj): rečenica, jedno glavno dugme do 420, tiho ispod */
.gr-stanje > p, .ap-stanje > p{ max-width: 44ch; color: var(--tekst-2); }
.gr-stanje > .dugme.glavno, .ap-stanje > .dugme.glavno{ width: 100%; max-width: var(--sirina-mala); margin-top: var(--razmak-24); }
.gr-stanje > .dugme.tiho, .ap-stanje > .dugme.tiho{ margin-top: var(--razmak-4); }

/* 24.17 Prsten koji se vrti (čeka se odgovor: banka, telefon, čitač slike). Uz „smanji pokret“ se samo pretopi. */
@keyframes sasija-vrti{ to{ transform: rotate(360deg); } }
/* mali, uz tekst: <span class="vrti" aria-hidden="true"></span> Čitam polja… */
.vrti, .sk-poruka::before{
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--ispuna-jaka); border-top-color: var(--tekst); animation: sasija-vrti 1s linear infinite;
}
.vrti{ display: inline-block; vertical-align: middle; }
/* veliki, oko znaka 64 (.ishod-znak.proverava, .ap-stanje > .ik-okvir.radi) */
.ishod-znak.proverava::before, .ap-stanje > .ik-okvir.radi::before{
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--ispuna-jaka); border-top-color: var(--tekst);
  animation: sasija-vrti 1s linear infinite;
}

/* 24.18 Opasna radnja (brisanje, uklanjanje): crvena slova na sivoj ispuni ili bez ispune, nikad žuto.
   „Obriši nalog“ je crven i u meniju naloga (računar), kao isti red na nalog/index. */
.red.na-opasno, .red.na-opasno > .ik, .dugme.na-ukloni, .dugme.np-opasno, .vz-opasno, .dugme.vz-opasno,
.na-meni-lista a.na-opasno{ color: var(--crvena-znak); }
/* „nije obavezno“ uz naziv polja: <span class="polje-opciono">nije obavezno</span> posle imena, ne u lampici (rečnik §5) */
.polje-opciono, .dv-opciono, .na-opciono{ margin-left: var(--razmak-8); font-weight: 400; color: var(--tekst-2); }

/* 24.19 Polje sa greškom ostaje crveno i u fokusu (fokus iz osnove bi prekrio crvenu ivicu): kupovina, prijava, garaža.
   Posle „Dalje“ ili „Sačuvaj“ kursor stoji u prvom polju sa greškom. Broj šasije: kućice (sa JS-om) ili obično polje. */
:is(.kp-raspored, .pr-obrazac, .pr-list, .dv, .vz-list) .polje.greska :is(input, select, textarea):focus-visible,
:is(.pr-obrazac, .pr-list) .polje.greska .pr-lozinka:has(input:focus-visible),
:is(.dv, .vz-list) .sasija-polje.greska input.unos:focus-visible{ border-color: var(--crvena-znak); outline-color: var(--crvena-znak); }
:is(.kp-raspored, .dv, .vz-list) .sasija-polje.greska:has(input:focus) .sasija-blok{ border-color: var(--crvena-znak); box-shadow: inset 0 0 0 1px var(--crvena-znak); }

/* 24.20 List sa dna sa poljima (skener: „Proveri podatke“; vozilo: izmena podataka, servis): puna površina, ne staklo.
   Ispod su kamera, žuto dugme ili zeleni prekidač, a kroz zamućenje bi se videli kao mrlja. Bez stakla siva slova smeju
   ponovo da budu siva. */
.sheet:is(.sk-list, .vz-list){ --tekst-2: var(--siva-tekst); background: var(--povrsina); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* 24.21 Usred kupovine i plaćanja (telo-klasa kp-kupovina, placanje-strana): zaglavlje nosi samo nazad i logo, bez
   pretrage, Garaže, Korpe i Naloga (manje sporednih izlaza) */
:is(.kp-kupovina, .placanje-strana) .zaglavlje :is(.pretraga, .zaglavlje-akcije){ display: none; }

/* ---------- 25. Radni sto (pozadina za prodavca): rs- okvir i tabela · rsa- Danas, upiti, ponuda, porudžbine, artikli ·
   rsb- cene, kupci, reklamacije, dostava i uplate · rsc- računi, izveštaji, sadržaj, privatnost, podešavanja ----------
   Strana radnog stola (meni: src/delovi/radni-sto-meni.html, {{deo:radni-sto-meni}}):
     {{deo:radni-sto-meni}}
     <div class="rs-sadrzaj">
       <div class="rs-naslov"><h1>Upiti</h1><a class="dugme glavno malo" href="…">Nova ponuda</a></div>
       <form class="rs-filteri">…</form>
       <div class="rs-tabela-okvir"><table class="rs-tabela">…</table></div>
     </div> */

/* 25.1 Okvir: telefon = traka gore + meni koji se otvara; od 960 = meni levo, sadržaj desno */
#sadrzaj:has(> .rs-meni){ max-width: none; padding-inline: 0; }
.rs-sadrzaj{ display: grid; gap: var(--razmak-16); align-content: start; min-width: 0; padding-inline: var(--ivica-l) var(--ivica-d); }

/* traka gore (telefon): jedno dugme preko cele širine, „Radni sto“ + gde si, strelica otvara meni */
.rs-meni{ position: sticky; top: 0; z-index: 30; padding-top: env(safe-area-inset-top, 0px); background: var(--pozadina); box-shadow: 0 var(--linija) 0 var(--odvajac); }
.rs-meni-dugme{
  display: flex; align-items: center; gap: var(--razmak-12); width: 100%; min-height: var(--visina-zaglavlje);
  margin: 0; padding: 0 var(--ivica-d) 0 var(--ivica-l); border: 0; background: transparent; color: var(--tekst);
  text-align: left; font: inherit; cursor: pointer;
}
.rs-meni-dugme:focus-visible{ outline-offset: -2px; }
.rs-meni-tekst{ flex: 1; min-width: 0; display: grid; }
.rs-meni-ime{ font: 400 13px/18px var(--font); color: var(--tekst-2); }
.rs-meni-ovde{ font: 600 17px/22px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-meni-ovde > span:not([aria-current]){ display: none; }
.rs-meni-ovde:not(:has(> [aria-current]))::before{ content: "Meni"; }
.rs-meni-strelica{ flex: none; display: grid; place-items: center; width: var(--prst); height: var(--prst); border-radius: 50%; background: var(--ispuna); }
.rs-meni-strelica > .ik{ transition: transform var(--trajanje) var(--glatko); }
.rs-meni:has(.rs-meni-lista:popover-open) .rs-meni-strelica > .ik{ transform: rotate(180deg); }

/* stavke menija: 24.14; ovde samo lista i fokus */
.rs-meni-lista{ list-style: none; }
.rs-meni-lista a:focus-visible{ outline-offset: -2px; }

/* telefon: meni je popover ispod trake (zatvara se dodirom van njega ili tipkom Esc, bez JS-a) */
@media (max-width: 959.98px){
  .rs-meni-lista:popover-open{
    position: fixed; inset: calc(env(safe-area-inset-top, 0px) + var(--visina-zaglavlje) + var(--razmak-8)) var(--ivica-d) auto var(--ivica-l);
    width: auto; height: auto; max-width: var(--sirina-srednja); margin: 0 auto;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--visina-zaglavlje) - var(--razmak-24));
    display: grid; gap: var(--razmak-4); padding: var(--razmak-8); border: 0; overflow-y: auto; overscroll-behavior: contain;
    border-radius: var(--radijus-grupa); background: var(--povrsina); color: var(--tekst);
    box-shadow: 0 0 0 1px var(--staklo-ivica), var(--staklo-senka);   /* ivica: u tamnoj se meni odvaja od kartica iza */
    transition: opacity var(--brzo) ease, transform var(--trajanje) var(--glatko);
  }
  @starting-style{ .rs-meni-lista:popover-open{ opacity: 0; transform: translateY(calc(-1 * var(--razmak-8))); } }
}

/* računar: meni je stub levo, širok koliko najduži naziv, lepi se uz vrh */
@media (min-width: 960px){
  #sadrzaj:has(> .rs-meni){ display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: start; padding-bottom: 0; }
  .rs-meni{
    display: flex; flex-direction: column; gap: var(--razmak-16); height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(env(safe-area-inset-top, 0px) + var(--razmak-16)) var(--razmak-16) var(--razmak-24) var(--ivica-l);
    box-shadow: inset calc(-1 * var(--linija)) 0 0 var(--odvajac);
  }
  .rs-meni-glava{ display: flex; align-items: center; gap: var(--razmak-12); padding-inline: var(--razmak-12); }
  .rs-meni-glava > .rs-meni-ime{ font: 600 15px/20px var(--font); color: var(--tekst-2); }
  .rs-meni-lista{
    display: grid; gap: var(--razmak-4); position: static; inset: auto; width: auto; height: auto; margin: 0; padding: 0;
    border: 0; overflow: visible; background: transparent; color: inherit;
  }
  .rs-sadrzaj{ padding: 0 var(--ivica-d) var(--razmak-32) var(--razmak-32); }
}

/* 25.2 Naslov strane: H1 levo, najviše jedno dugme desno */
.rs-naslov{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--razmak-12); padding-top: var(--razmak-24); }
.rs-naslov > :first-child{ min-width: 0; display: grid; gap: var(--razmak-4); }
.rs-naslov p{ color: var(--tekst-2); }
@media (min-width: 960px){ .rs-naslov{ padding-top: var(--razmak-32); } }

/* 25.3 Filteri: pretraga, pa red čipova i „Poništi“ */
.rs-filteri{ display: grid; gap: var(--razmak-12); min-width: 0; margin: 0; }
.rs-filteri > .pretraga{ max-width: var(--sirina-srednja); }
.rs-filteri-red{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--razmak-8); min-width: 0; margin: 0; padding: 0; border: 0; }
/* čip: 36 (radijus 18), dodir 44; uključen = boja teksta kao podloga (bez žute) */
.rs-cip{
  position: relative; display: inline-flex; align-items: center; height: var(--visina-pilule); padding: 0 var(--razmak-12);
  border-radius: 18px; background: var(--ispuna); color: var(--tekst); font: 400 15px/20px var(--font); white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-user-select: none; transition: background-color var(--brzo) ease, color var(--brzo) ease;
}
.rs-cip::before{ content: ""; position: absolute; inset: -4px 0; }   /* dodir 44 (36 + 2 × 4) */
.rs-cip > input{ position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.rs-cip:has(> input:checked){ background: var(--tekst); color: var(--povrsina); font-weight: 600; }
/* „Poništi“ se vidi tek kad je neki čip uključen ili pretraga popunjena (Računi, Zahtevi) */
.rs-filteri:not(:has(input:checked)):not(:has(input[type="search"])) .rsc-ponisti,
.rs-filteri:not(:has(input:checked)):has(input[type="search"]:placeholder-shown) .rsc-ponisti{ display: none; }

/* 25.4 Tabela: računar = tabela u grupi; telefon = svaki red je kartica, ćelija = naziv iznad vrednosti.
   <th scope="row"> (prva ćelija) je naslov reda; svaka druga ćelija nosi data-naziv="…" (to je natpis na telefonu).
   Ćelija bez data-naziv (npr. radnje) na telefonu ide preko cele širine. Brojevi: class="rs-desno". */
.rs-tabela-okvir{ min-width: 0; }
.rs-tabela{ width: 100%; border-collapse: collapse; border-spacing: 0; font: 400 15px/20px var(--font); }
.rs-tabela :is(th, td){ padding: 0; text-align: left; vertical-align: middle; font-weight: 400; }
.rs-tabela tbody > tr > :first-child{ font-weight: 600; }
.rs-tabela :is(th, td) > a:not([class]){ display: inline-flex; align-items: center; min-height: var(--prst); color: var(--tekst); }
.rs-tabela .rs-desno{ font-variant-numeric: tabular-nums; }
@media (hover: hover){ .rs-tabela :is(th, td) > a:not([class]):hover{ text-decoration: underline; text-underline-offset: 3px; } }

@media (max-width: 959.98px){
  .rs-tabela, .rs-tabela tbody{ display: block; }
  .rs-tabela thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rs-tabela tbody{ display: grid; gap: var(--razmak-8); }
  .rs-tabela tr{
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--razmak-16);
    padding: var(--razmak-4) var(--razmak-16) var(--razmak-8); border-radius: var(--radijus-grupa); background: var(--povrsina);
  }
  .rs-tabela :is(th, td){ display: block; min-width: 0; padding-block: var(--razmak-8); overflow-wrap: anywhere; }
  .rs-tabela tr > :first-child{ grid-column: 1 / -1; font: 600 17px/22px var(--font); box-shadow: inset 0 calc(-1 * var(--linija)) 0 var(--odvajac); }
  .rs-tabela tr > :not(:first-child):not([data-naziv]){ grid-column: 1 / -1; }
  .rs-tabela :is(th, td)[data-naziv]:not(:first-child)::before{ content: attr(data-naziv); display: block; margin-bottom: 2px; font: 400 13px/18px var(--font); color: var(--tekst-2); }
}
@media (min-width: 960px){
  .rs-tabela-okvir{ overflow-x: auto; border-radius: var(--radijus-grupa); background: var(--povrsina); }
  .rs-tabela thead th{ height: var(--prst); padding: 0 var(--razmak-16); font: 600 13px/18px var(--font); color: var(--tekst-2); white-space: nowrap; box-shadow: inset 0 calc(-1 * var(--linija)) 0 var(--odvajac); }
  .rs-tabela tbody :is(th, td){ height: var(--visina-red); padding: var(--razmak-4) var(--razmak-16); }
  .rs-tabela tbody tr + tr > *{ box-shadow: inset 0 var(--linija) 0 var(--odvajac); }
  .rs-tabela .rs-desno{ text-align: right; }
  .rs-tabela :is(.ceka, .stanje){ white-space: nowrap; max-width: none; }
}
@media (min-width: 960px) and (hover: hover){ .rs-tabela tbody tr:hover{ background: var(--ispuna); } }

/* 25.5 Stanje (oznaka u tabeli i na detalju): visina 24, kapsula, tačka + reč; boja nikad sama ne nosi značenje.
   .stanje = novo/nacrt · .radi = u radu · .gotovo = završeno/plaćeno/poslato · .problem = odbijeno/otkazano · .hitno = čeka tebe.
   Koriste ga i kupčeve strane; ista reč = ista boja; .hitno = čeka onoga ko gleda (rečnik §4).
   Žuta se ovde ne koristi (žuta je samo glavno dugme i „odgovara“). .gotovo i .problem: podloga kao .bedz.uspeh i .bedz.greska (22). */
.stanje{
  display: inline-flex; align-items: center; gap: var(--razmak-4); height: 24px; padding: 0 var(--razmak-8); border-radius: 12px;
  background: var(--ispuna); color: var(--tekst); font: 600 12px/16px var(--font); white-space: nowrap; vertical-align: middle;
}
.stanje::before{ content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stanje.radi{ background: transparent; box-shadow: inset 0 0 0 1px var(--ivica-polja); }
.stanje.hitno{ background: var(--tekst); color: var(--povrsina); }

/* 25.6 Ćelija tabele: drugi red sitno i sivo; oznake ispod opisa; telefon: dugačak podatak preko cele kartice; računar: datum u jednom redu */
.rsa-pod, .rsb-pod, .rsc-pod{ display: block; font: 400 13px/18px var(--font); color: var(--tekst-2); }
.rsa-pod > .bedz, .rsb-pod > :is(.bedz, .stanje), .rsc-pod > .bedz{ margin-left: var(--razmak-4); }
.rsb-pod > .stanje:first-child{ margin-left: 0; margin-top: var(--razmak-4); }
.rsa-oznake, .rsb-oznake{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--razmak-8); margin-top: var(--razmak-4); }   /* stanje + „primer“ ispod opisa: ne guraju strelicu */
.rsb-napomena, .rsc-napomena{ font: 400 13px/18px var(--font); color: var(--tekst-2); }
.rsc-napomena a:not([class]){ color: var(--plava); }
@media (max-width: 959.98px){
  .rs-tabela .rsb-tel-cela, .rs-tabela .rsc-tel-cela{ grid-column: 1 / -1; }
  /* stanje desno u visini naslova kartice (Zahtevi o privatnosti: naslov je kratak, vrsta zahteva), pa kartica nema
     prazan treći red; kolone ostaju iste u svim karticama */
  .rs-tabela tr:has(> .rsc-tel-vrh) > :first-child{ grid-row: 1; }
  .rs-tabela tr > td.rsc-tel-vrh{
    grid-column: 2; grid-row: 1; justify-self: end; align-self: start;
    display: grid; grid-template-rows: var(--prst); align-items: center; padding-bottom: 0;
  }
  .rs-tabela tr > td.rsc-tel-vrh[data-naziv]::before{ display: none; }
}
@media (min-width: 960px){ .rs-tabela .rsa-bez-preloma, .rs-tabela .rsb-bez-preloma, .rs-tabela .rsc-bez-preloma{ white-space: nowrap; } }
/* red u grupi koji je samo poruka (filter nije ostavio nijedan red) */
.rsb-prazno .red-tekst, .rsc-prazan-red .red-tekst{ text-align: left; }
/* dugme koje otvara detalj (list) izgleda kao naslov reda; dodir 44; ceo red otvara isti list */
.rsb-otvori, .rs-tabela .rsc-otvori{
  display: inline-flex; align-items: center; min-height: var(--prst); margin: 0; padding: 0; border: 0;
  background: none; color: var(--tekst); font: inherit; text-align: left; cursor: pointer;
}
.rsb-otvori:focus-visible, .rs-tabela .rsc-otvori:focus-visible{ outline-offset: 2px; }
@media (hover: hover){ .rsb-otvori:hover{ text-decoration: underline; text-underline-offset: 3px; } }
.rs-tabela tr:has(:is(.rsb-otvori, .rsc-otvori)){ cursor: pointer; }   /* strelica na telefonu (Reklamacije): 25.8 */
/* oznaka „primer“ odmah iza naslova reda (dugme ili link), u istom redu; uz vrednost u listu */
.rs-tabela th > :is(.rsb-otvori, a) + .bedz{ margin-left: var(--razmak-8); vertical-align: middle; }
.rsc-bedz-uz{ margin-left: var(--razmak-8); }
/* veza ka drugom zapisu u običnoj ćeliji („Reklamacija br. 1“): plava kao veza u tekstu, dodir 44 */
.rs-tabela td > .rsb-veza{ display: inline-flex; align-items: center; min-height: var(--prst); color: var(--plava); }
@media (hover: hover){ .rs-tabela td > .rsb-veza:hover{ text-decoration: underline; text-underline-offset: 3px; } }
/* ćelija radnji bez dugmeta („Čeka uplatu“): na telefonu ne pravi prazan red; dve radnje u istom redu */
@media (max-width: 959.98px){ .rs-tabela td[data-radnja]:empty{ display: none; } }
.rs-tabela td[data-radnja] > .dugme + .dugme{ margin-left: var(--razmak-8); }
/* dugmad u redu */
.rsa-dugmad, .rsb-dugmad{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--razmak-8); }
.rsb-dugmad > .dugme.tiho{ margin-left: calc(-1 * var(--razmak-8)); }
/* „Kupac plaća“ ispod probe cene; rok koji se računa sam: istaknut red sa linijom iznad */
.rsa-cena-red, .rsb-cena-red, .rsc-rok{
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--razmak-4) var(--razmak-12);
  padding-top: var(--razmak-12); box-shadow: inset 0 var(--linija) 0 var(--odvajac);
}
.rsa-cena-red > span, .rsb-cena-red > span, .rsc-rok > span:first-child{ color: var(--tekst-2); }
.rsc-rok > strong{ font-variant-numeric: tabular-nums; }

/* 25.7 Danas (rsa-mreza: 24.3; od 960 razmak 32 × 24) */
@media (min-width: 960px){ .rsa-mreza{ gap: var(--razmak-32) var(--razmak-24); } }

/* 25.8 Ceo red je dodir (Upiti, Porudžbine: skripta strane otvara naslovni link; Reklamacije: red otvara detalj, 25.6).
   Tabela kao kratki redovi (.rsa-kartice): na telefonu kao red na Danas. */
.rsa-kartice tbody tr{ position: relative; cursor: pointer; }
/* list porudžbine: fokus ide na naslov (i kad se otvori preko adrese ?br=…), bez prstena; Tab ide dalje kroz list */
.rsa-list-naslov:focus{ outline: none; }
@media (max-width: 959.98px){
  /* jedan stub: naslov, pa sitni redovi; strelica desno; natpisi kolona se ne ponavljaju */
  .rs-tabela.rsa-kartice tr{
    grid-template-columns: minmax(0, 1fr); row-gap: var(--razmak-4);
    padding: var(--razmak-12) calc(var(--razmak-16) + var(--razmak-24)) var(--razmak-12) var(--razmak-16);
  }
  /* strelica desno, isti crtež kao a.red::after (11), da se vidi da se kartica otvara; na Reklamacijama u naslovu kartice */
  .rs-tabela.rsa-kartice tr::after, .rs-tabela tr:has(.rsb-otvori) > th::after{
    content: ""; position: absolute; top: 50%; right: var(--razmak-20); width: 8px; height: 8px;
    border-top: 2px solid var(--tekst-2); border-right: 2px solid var(--tekst-2); transform: translateY(-50%) rotate(45deg);
  }
  .rs-tabela tr:has(.rsb-otvori) > th{ position: relative; padding-right: var(--razmak-32); }
  .rs-tabela tr:has(.rsb-otvori) > th::after{ right: var(--razmak-4); }
  .rs-tabela.rsa-kartice :is(th, td){ padding-block: 0; }
  .rs-tabela.rsa-kartice tr > :first-child{ box-shadow: none; }
  .rs-tabela.rsa-kartice th > a:not([class]){ margin-block: calc(-1 * var(--razmak-8)); }   /* dodir 44, a red ostaje nizak */
  .rs-tabela.rsa-kartice td{ font: 400 15px/20px var(--font); color: var(--tekst-2); }
  .rs-tabela.rsa-kartice td[data-naziv]:not(:first-child)::before{ display: none; }
  /* kratak natpis ispred vrednosti, u istom redu („Stigao 19. 10.“, „Iznos …“) */
  .rs-tabela.rsa-kartice td.rsa-natpis[data-naziv]:not(:first-child)::before{ display: inline; content: attr(data-naziv) " "; margin: 0; font: inherit; color: inherit; }
  .rs-tabela.rsa-kartice td > .stanje{ margin-block: var(--razmak-4); }
  /* stanje i sledeći korak u jednom redu (Porudžbine): „Plaćena · Naruči kod dobavljača“ */
  .rs-tabela.rsa-kartice tr:has(> .rsa-tel-levo){ grid-template-columns: auto minmax(0, 1fr); column-gap: var(--razmak-8); }
  .rs-tabela.rsa-kartice tr:has(> .rsa-tel-levo) > *{ grid-column: 1 / -1; }
  .rs-tabela.rsa-kartice tr > .rsa-tel-levo{ grid-column: 1; }
  .rs-tabela.rsa-kartice tr > .rsa-tel-desno{ grid-column: 2; align-self: center; }
}
/* računar: broj i datum ispod naslova ostaju u jednom redu sa oznakom „primer“ */
@media (min-width: 960px){ .rsa-kartice th > .rsa-pod{ white-space: nowrap; } }

/* 25.9 Izrada ponude (rsa-ponuda: 24.3): obrazac levo, slanje desno i lepi se uz vrh */
.rsa-ponuda{ margin: 0; }
@media (min-width: 960px){ .rsa-strana{ position: sticky; top: var(--razmak-24); } }
/* polja dva po redu; .rsa-cela preko cele širine, .rsa-cela-tel samo na telefonu */
.rsa-polja{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--razmak-16); align-items: start; min-width: 0; }
@media (max-width: 599.98px){ .rsa-polja > .rsa-cela-tel{ grid-column: 1 / -1; } }
.rsa-polja > .rsa-cela{ grid-column: 1 / -1; }
/* jedan izbor (Original, Kvalitetna zamena, Povoljno): red koji se otvara (prvi je otvoren), pa polja i „Kupac plaća“ */
.rsa-izbor > summary{ list-style: none; cursor: pointer; transition: background-color var(--brzo) ease; }
.rsa-izbor > summary::-webkit-details-marker{ display: none; }
.rsa-izbor > summary:active{ background: var(--ispuna); }
.rsa-izbor > summary:focus-visible{ outline-offset: -2px; }
.rsa-izbor > summary > .red-vrednost{ color: var(--tekst); font-weight: 600; }
.rsa-izbor > summary > .ik{ color: var(--tekst-2); transition: transform var(--trajanje) var(--glatko); }
.rsa-izbor[open] > summary > .ik{ transform: rotate(180deg); }
.rsa-izbor-telo{ display: grid; gap: var(--razmak-16); padding: var(--razmak-8) var(--razmak-16) var(--razmak-16); }
.rsa-strana .zbir dd{ font-weight: 600; }
/* kako je broj pročitan („= 12.500,00 RSD“), ispod nabavne i dostave; prazno se ne vidi */
.rsa-procitano:empty{ display: none; }

/* 25.10 Artikli i kompleti: spisak levo (2/5), izabrano desno (3/5) od 960; telefon: spisak ILI obrazac */
.rsa-md{ display: grid; gap: var(--razmak-24); align-items: start; min-width: 0; }
@media (min-width: 960px){
  .rsa-md{ grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--razmak-32); }
  .rsa-md > .rsa-spisak{ position: sticky; top: var(--razmak-24); }
}
@media (max-width: 959.98px){
  [data-ak-prikaz="lista"] .rsa-uredi,
  [data-ak-prikaz="uredi"] .rsa-spisak,
  [data-ak-prikaz="uredi"] .rsa-pilule,
  [data-ak-prikaz="uredi"] .rsa-ak-novi{ display: none; }
  /* izmena artikla ili kompleta: veliki naslov „Artikli i kompleti“ se ne ponavlja ispod trake menija, ostaje samo za
     čitač ekrana (kao .skriveno-oku); na ekranu su „Svi artikli“ i ime artikla */
  .rs-sadrzaj[data-ak-prikaz="uredi"]{ padding-top: var(--razmak-16); }
  .rs-sadrzaj[data-ak-prikaz="uredi"] > .rs-naslov{
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
/* izabran red u spisku: jača ispuna (kao izabrano u meniju); samo na računaru, gde se vidi i obrazac pored */
@media (min-width: 960px){ .rsa-lista .red[aria-current]{ background: var(--ispuna); } }
/* dugme „Ukloni“ u redu (vozilo, deo kompleta): samo ikonica, dodir 44 × 44 */
.rsa-ukloni{ min-width: var(--prst); justify-content: center; color: var(--tekst-2); }
/* polje za dug tekst raste sa sadržajem (gde pregledač to ume; inače važi rows) */
.rsa-raste{ field-sizing: content; }

/* 25.11 Pravila cena, Kupci i vozila (rsb-mreza: 24.3): Kupci = spisak levo (2/5, lepi se uz vrh), izabrani kupac desno (3/5) */
.rsb-md{ display: grid; gap: var(--razmak-32); align-items: start; min-width: 0; }
@media (min-width: 960px){
  .rsb-md{ grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .rsb-md > .rsb-kolona:first-child{ position: sticky; top: var(--razmak-24); }
}
/* glavno dugme obrasca (Pravila cena): na telefonu preko cele širine, pod palcem */
@media (max-width: 599.98px){ .rsb-sacuvaj{ width: 100%; } }
/* spisak kupaca: izabran red = jača ispuna; karton kupca otvoren preko adrese (#kupac-k2) ne sme da ostane ispod
   lepljive trake „Radni sto“, a okvir fokusa se ne crta oko celog kartona (fokus je tu da čitač ekrana krene od imena) */
.rsb-lista .red[aria-current="true"]{ background: var(--ispuna); }
[data-kupac-panel]{ scroll-margin-top: calc(var(--visina-zaglavlje) + env(safe-area-inset-top, 0px) + var(--razmak-16)); }
@media (min-width: 960px){ [data-kupac-panel]{ scroll-margin-top: var(--razmak-24); } }
[data-kupac-panel]:focus{ outline: none; }
.rsb-glava{ gap: var(--razmak-4); }
.red-vrednost > .stanje{ vertical-align: middle; }

/* 25.12 Zakonski rokovi (Reklamacije): tri pločice, broj dana je glavni znak */
.rsb-rokovi{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--razmak-8); min-width: 0; }
.rsb-rok{
  display: grid; align-content: start; gap: var(--razmak-4); min-width: 0;
  padding: var(--razmak-12) var(--razmak-16) var(--razmak-16); border-radius: var(--radijus-grupa); background: var(--povrsina);
}
.rsb-rok-broj{ font: 700 28px/34px var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rsb-rok-broj > span{ font: 600 15px/20px var(--font); color: var(--tekst-2); }
.rsb-rok-naziv{ font: 400 13px/18px var(--font); color: var(--tekst-2); }
@media (min-width: 600px){
  .rsb-rok{ grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--razmak-16); padding: var(--razmak-16) var(--razmak-20); }
  .rsb-rok-naziv{ font: 400 15px/20px var(--font); }
}
@media (min-width: 960px){ .rsb-rokovi{ gap: var(--razmak-12); } }

/* 25.13 Podaci jednog zapisa (detalj reklamacije): natpis iznad vrednosti, dva stuba; dugačko preko oba; naslov manjeg bloka u listu */
.rsb-podaci{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--razmak-16); margin: 0; min-width: 0; }
.rsb-podaci > div{ display: grid; align-content: start; gap: var(--razmak-4); min-width: 0; }
.rsb-podaci > .rsb-siroko{ grid-column: 1 / -1; }
.rsb-podaci dt{ font: 400 13px/18px var(--font); color: var(--tekst-2); }
.rsb-podaci dd{ margin: 0; font: 400 17px/22px var(--font); overflow-wrap: anywhere; }
.rsb-podnaslov{ font: 600 17px/22px var(--font); }

/* 25.14 Obrasci: polja dva po redu od 600 (list sa dna, Pravila cena); prekidač u redu; polje sa jedinicom desno (%, RSD) */
.rsb-polja{ display: grid; gap: var(--razmak-16); align-items: start; min-width: 0; }
@media (min-width: 600px){
  .rsb-polja{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rsb-polja > .rsb-siroko{ grid-column: 1 / -1; }
}
.rsb-prekidac-red{ padding-inline: 0; }
.rsb-jedinica{ position: relative; }
.rsb-jedinica > input{ padding-right: var(--razmak-32); }
.rsb-jedinica > span{ position: absolute; right: var(--razmak-16); top: 50%; transform: translateY(-50%); color: var(--tekst-2); pointer-events: none; }

/* 25.15 Dostava i uplate: status poslednjeg izvoda banke ispod naslova; kurirska služba + lampica */
.rsb-status{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--razmak-8); }
.rsb-status-blok{ gap: var(--razmak-4); }

/* 25.16 Računi, Zahtevi o privatnosti, Podešavanja: jedna kolona do 1200; od 1200 glavno levo (5/8), strana desno (3/8)
   i lepi se uz vrh. Ispod 1200 tabele imaju celu širinu. */
.rsc-raspored{ display: grid; gap: var(--razmak-32); align-items: start; min-width: 0; }
@media (min-width: 1200px){
  .rsc-raspored{ grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
  .rsc-strana{ position: sticky; top: var(--razmak-24); }
  /* tri odeljka bez stubova (Podešavanja): na telefonu redom 1-2-3; na računaru 1 i 3 levo, 2 desno uz 1 */
  .rsc-raspored.rsc-tri > :nth-child(1){ grid-column: 1; grid-row: 1; }
  .rsc-raspored.rsc-tri > :nth-child(2){ grid-column: 2; grid-row: 1 / span 2; }
  .rsc-raspored.rsc-tri > :nth-child(3){ grid-column: 1; grid-row: 2; }
}
/* pilule kao izbor dela strane (Sadržaj); spisak u grupi ne širi od 640 */
.rsc-uska{ max-width: var(--sirina-kolona); }
/* uloga u redu: naziv + oznaka „samo čitanje“ u istom redu (Podešavanja) */
.rsc-naslov-oznaka{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--razmak-4) var(--razmak-8); }
/* tiho dugme ispod grupe (Sadržaj, „Spisak vodiča na sajtu“): levo */
.rsc-levo{ justify-self: start; }
/* pretraga široka kao tabela ispod nje (Računi) */
.rsc-kolona .rs-filteri > .pretraga{ max-width: none; }
/* Evidencija obrade: na telefonu jedan red koji se otvara, na računaru tabela (skripta strane drži <details> otvoren) */
.rsc-sklop > summary{ display: block; list-style: none; cursor: pointer; }
.rsc-sklop > summary::-webkit-details-marker{ display: none; }
.rsc-sklop > summary:active .red{ background: var(--ispuna); }
.rsc-sklop[open] > summary{ margin-bottom: var(--razmak-12); }
.rsc-sklop[open] > summary .red.strelica::after{ transform: rotate(135deg); }
@media (min-width: 960px){
  .rsc-sklop > summary{ display: none; }
  /* ćelije sa više redova teksta dobijaju vazduh i počinju odozgo; dug podatak koji čeka sme u dva reda, da ne širi tabelu */
  .rs-tabela.rsc-evidencija tbody :is(th, td){ padding-block: var(--razmak-12); vertical-align: top; }
  .rs-tabela.rsc-evidencija .ceka{ white-space: normal; }
}
/* povreda u evidenciji: „Označi kao poslato“ ispod opisa, levo */
.rsc-povreda .red-tekst > .dugme{ justify-self: start; margin-top: var(--razmak-8); }

/* 25.17 Izveštaji: brojke u karticama, dve u redu — naziv sa ikonicom 20, vrednost (dok nema porudžbina: .ceka) i
   kratak opis. Kartica kao pločica rokova (25.12), bez strelice: ne vodi nigde. */
.rsc-brojke{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--razmak-12); margin: 0; padding: 0; list-style: none; min-width: 0; }
.rsc-brojka{
  display: grid; gap: var(--razmak-8); align-content: start; min-width: 0;
  padding: var(--razmak-16); border-radius: var(--radijus-grupa); background: var(--povrsina);
}
.rsc-brojka-naziv{ display: flex; align-items: center; gap: var(--razmak-8); font: 600 15px/20px var(--font); }
.rsc-brojka > .ceka{ justify-self: start; }
.rsc-brojka-opis{ font: 400 13px/18px var(--font); color: var(--tekst-2); }

/* ---------- 26. Izbor vozila ({{deo:izbor-vozila}}): pilule Auto · Motor · Kvad, pa marka, model i motor (od 600 u jednom
   redu); „Iz garaže“ otvara list sa dna ---------- */
.izbor-vozila{ display: grid; gap: var(--razmak-16); min-width: 0; }
.izbor-vozila-polja{ display: grid; gap: var(--razmak-16); min-width: 0; }
@media (min-width: 600px){ .izbor-vozila-polja{ grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }

/* ---------- 27. Upit (upit/novi, status, ponuda): uvod 24.1, raspored 24.3, slika 24.13 ---------- */
.upit-uski{ display: grid; gap: var(--razmak-16); max-width: var(--sirina-kolona); min-width: 0; }   /* „Pronađi upit“ */
.upit-uski > .dugme.tiho{ justify-self: start; }
/* „Odgovara“ iznad ponude: žuta kvačica + jedan red teksta */
.upit-odgovara{ display: flex; align-items: center; gap: var(--razmak-12); font: 400 15px/20px var(--font); color: var(--tekst); }
.upit-odgovara > .ik{ flex: none; color: var(--tekst-2); }
.upit-zbir{ display: grid; gap: var(--razmak-16); }   /* zbir i dugme u strani ponude */
/* ponuda: na telefonu zbir i dugme odmah ispod izbora, uslovi ispod njih; od 960 izbor i uslovi levo, zbir desno */
.upit-ponuda{ grid-template-areas: "odgovara" "izbor" "zbir" "uslovi"; }
.upit-ponuda > .upit-odgovara{ grid-area: odgovara; }
.upit-ponuda > .ponuda{ grid-area: izbor; }
.upit-ponuda > .upit-strana{ grid-area: zbir; }
.upit-ponuda > .upit-ponuda-uslovi{ grid-area: uslovi; }
.upit-ponuda .ponuda > legend{ font: 600 17px/22px var(--font); }   /* iste veličine kao „Za izabrani deo“ */
.upit-ponuda .ponuda > p{ padding-inline: var(--razmak-16); }
@media (min-width: 960px){
  .upit-ponuda{ grid-template-areas: "odgovara zbir" "izbor zbir" "uslovi zbir"; grid-template-rows: auto auto 1fr; }
}
/* kad slanje ne prođe, kursor ide na prvo polje sa greškom (skripta strane: scrollIntoView); polje sa nazivom staje
   ispod zalepljenog zaglavlja, ne iza njega */
.upit-raspored [data-polje], .upit-uski [data-polje]{
  scroll-margin-top: calc(var(--visina-zaglavlje) + env(safe-area-inset-top, 0px) + var(--razmak-16));
}

/* ---------- 28. Korpa i kupovina (korpa, kupovina/index, kupovina/potvrda): uvod 24.1, raspored 24.3, saglasnost 24.11.
   Izbor dostave i plaćanja (.kp-izbor) je u 19, uz ponudu. Izbor i saglasnost NISU žuti: žuta kvačica znači samo „odgovara“. ---------- */
.kp-blok-glava{ display: flex; align-items: center; justify-content: space-between; gap: var(--razmak-12); }
/* „Izmeni“ u naslovu „Pregleda“: malo tiho dugme, tekst poravnat sa desnom ivicom grupe, red ostaje visok kao naslov */
.kp-blok-glava > .dugme.tiho{ margin: calc(-1 * var(--razmak-8)) calc(-1 * var(--razmak-8)) calc(-1 * var(--razmak-8)) 0; }
/* stavka u korpi: .red.artikal + red sa količinom i „Ukloni“; od 600 cena gore desno, količina i „Ukloni“ dole desno */
.kp-stavka-dole{ display: flex; align-items: center; justify-content: space-between; gap: var(--razmak-12); margin-top: var(--razmak-8); }
.kp-stavka-dole > .dugme.tiho{ margin-right: calc(-1 * var(--razmak-8)); color: var(--tekst-2); font-weight: 400; }
.kp-stavka .red-naslov{ font-weight: 600; }
@media (min-width: 600px){
  .kp-stavka .red-tekst{ grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--razmak-16); }
  .kp-stavka .red-tekst > *{ grid-column: 1; }
  .kp-stavka .red-tekst > .artikal-cena{ grid-column: 2; grid-row: 1; justify-self: end; margin-top: 0; }
  .kp-stavka .red-tekst > .kp-stavka-dole{ grid-column: 2; grid-row: 2 / span 2; align-self: end; margin-top: 0; }
}
/* zbir i glavno dugme u strani */
.kp-zbir{ display: grid; gap: var(--razmak-16); }
/* traka sa zbirom (korpa, telefon i tablet do 960, gde postoji traka dole): „Ukupno sa PDV-om“ i „Završi kupovinu“ lepe se
   iznad trake dole, da glavno dugme ne ode pod traku ili ispod ivice ekrana (Safari). Na kraju liste traka stoji na svom
   mestu ispod zbira, a u zbiru se tada ne ponavljaju ukupno i dugme. Od 960 trake nema: zbir desno (lepi se uz vrh) nosi
   oba. Oblik kao traka dole bez stakla (13): kapsula 31, tanka ivica, meka senka. */
.kp-kraj{
  position: sticky; z-index: 30; bottom: calc(var(--visina-traka) + var(--traka-dole) + var(--razmak-8));
  display: flex; align-items: center; justify-content: space-between; gap: var(--razmak-12);
  width: 100%; max-width: var(--sirina-srednja); justify-self: center;
  padding: var(--razmak-8) var(--razmak-8) var(--razmak-8) var(--razmak-16);
  border: 1px solid var(--staklo-ivica); border-radius: 31px;
  background: var(--povrsina); box-shadow: var(--staklo-senka);
}
.kp-kraj-zbir{ display: grid; gap: 2px; min-width: 0; font: 400 13px/18px var(--font); color: var(--tekst-2); }
.kp-kraj-zbir > .ceka{ justify-self: start; }
.kp-kraj > .dugme.glavno{ flex: none; }
@media (max-width: 959.98px){
  .kp-zbir-korpa > .dugme.glavno, .kp-zbir-korpa .zbir > .zbir-ukupno{ display: none; }   /* samo korpa (kupovina ima svoj .kp-zbir) */
}
@media (min-width: 960px){ .kp-kraj{ display: none; } }
/* načini plaćanja od početka (korpa): ikonica 20 + reč, sitno i sivo, u jednom redu */
.kp-nacini{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--razmak-4) var(--razmak-16); margin: 0; padding: 0; list-style: none; font: 400 13px/18px var(--font); color: var(--tekst-2); }
.kp-nacini > li{ display: inline-flex; align-items: center; gap: var(--razmak-4); }
/* ispod izbora plaćanja: logoi kartica (čekaju OTP) i link „Plaćanje karticom“, sitno; panel ispod izbora (adresa, preuzimanje) */
.kp-kartice{ margin-top: var(--razmak-12); font: 400 15px/20px var(--font); color: var(--tekst-2); }
.kp-kartice > .ceka{ margin-right: var(--razmak-8); }
.kp-panel{ margin-top: var(--razmak-12); }
/* polja u dve kolone (mesto + poštanski broj); podaci firme */
.kp-dva{ display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--razmak-12); }
.kp-firma{ display: grid; gap: var(--razmak-12); }
/* broj šasije sa greškom u kupovini: i u fokusu crven (24.19) */
/* kupovina/index, telefon: naslov u traci se vidi tek kad veliki naslov ode sa ekrana (kao iOS) — sada za sve strane sa
   trakom „nazad“, odeljak 12 (sasija.js). Zaglavlje bez sporednih izlaza: 24.21. */
/* potvrda: spisak naručenih delova u redu „Delovi“ (naziv · kom.) */
.kp-spisak{ display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.kp-spisak .bedz{ vertical-align: middle; }
/* potvrda: logo gore (strana je bez zaglavlja), znak 64 (22), dugmad (24.15) */
.kp-logo{ display: flex; align-items: center; height: var(--visina-zaglavlje); }
.kp-primljeno{ display: grid; justify-items: start; gap: var(--razmak-8); padding-top: var(--razmak-16); }
.kp-primljeno > p{ color: var(--tekst-2); }

/* ---------- 29. Pretraga i kategorije (pretraga, pretraga-nema, kategorije/index, kategorije/kocnice, vozila/vw-golf-7) ---------- */
/* vrh strane bez heroja: naslov (sa oznakom „primer“ kad treba), jedna siva rečenica, pa polje pretrage ili jedno dugme */
.pt-vrh{ display: grid; justify-items: start; gap: var(--razmak-12); min-width: 0; padding-top: var(--razmak-8); }
.pt-vrh > *{ max-width: 100%; }
.pt-vrh > p{ max-width: 44ch; color: var(--tekst-2); }
.pt-vrh > .pretraga{ justify-self: stretch; margin-top: var(--razmak-4); }
.pt-vrh > .dugme.glavno{ justify-self: stretch; margin-top: var(--razmak-12); }
.pt-vrh > .pilule{ justify-self: stretch; margin-top: var(--razmak-4); }
/* naslov sa oznakom „primer“ (pretraga, kategorije, vozila): oznaka ide na kraj poslednjeg reda naslova, na liniju slova,
   i ne pada sama u novi red kad se naslov na telefonu prelomi */
.pt-naslov{ display: block; min-width: 0; text-wrap: balance; }
.pt-naslov > :is(h1, h2, .polje-naziv){ display: inline; }
.pt-naslov > .bedz{ margin-left: var(--razmak-8); }
@media (min-width: 600px){ .pt-vrh > .dugme.glavno{ justify-self: start; } }
@media (min-width: 960px){ .pt-vrh{ padding-top: var(--razmak-32); } }
/* pretraga: telefon jedna kolona; od 960 levo vozilo i upit, desno rezultati */
.pt-raspored{ display: grid; gap: var(--razmak-24); min-width: 0; }
.pt-raspored > *{ min-width: 0; }
@media (min-width: 960px){
  .pt-raspored{
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr;
    grid-template-areas: "levo desno" "dole desno"; column-gap: var(--razmak-32); align-items: start;
  }
  .pt-levo{ grid-area: levo; }
  .pt-desno{ grid-area: desno; padding-top: var(--razmak-32); }
  .pt-dole{ grid-area: dole; }
}
/* zaglavlje rezultata: naslov + „primer“ levo, „Filteri“ desno; oznake u redu artikla jedna do druge; vozilo: „Promeni“ desno */
.pt-rezultati-vrh{ align-items: center; }
.pt-rezultati-vrh > .pt-naslov{ flex: 1; }
.pt-oznake{ display: flex; flex-wrap: wrap; gap: var(--razmak-4); min-width: 0; }
.pt-promeni{ flex: none; font: 400 15px/20px var(--font); color: var(--tekst-2); }
.pt-vozilo-detalj{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--razmak-4) var(--razmak-8); }
.pt-napomena, .pt-opis{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--razmak-4) var(--razmak-8); min-width: 0; }   /* drugi red artikla: proizvođač i broj dela */
.pt-napomena{ margin: 0; }   /* jedna napomena iznad rezultata („Odgovara tvom vozilu“ ili „Izaberi motor …“) */
/* napomena je zaglavlje spiska: bliže spisku (8, kao zaglavlje grupe) nego naslovu iznad (12 iz .stog) */
.pt-napomena:not([hidden]) + .pt-lista{ margin-top: calc(var(--razmak-8) - var(--razmak-12)); }
/* uzana kolona na računaru (pretraga-nema, kategorije, vozila) */
.pt-uzano{ width: 100%; max-width: var(--sirina-kolona); min-width: 0; }
.pt-sredina{ margin-inline: auto; padding-top: var(--razmak-8); }
.pt-sredina > .prazno{ padding-bottom: var(--razmak-24); }
.pt-sredina > .prazno > .dugme.glavno + .dugme.tiho{ margin-top: var(--razmak-4); }   /* tihi link odmah ispod glavnog */
/* niz kapsula (proizvođači) */
.pt-niz{ display: flex; flex-wrap: wrap; gap: var(--razmak-8); margin: 0; padding: 0; list-style: none; min-width: 0; }
.pt-pilule{ max-width: var(--sirina-mala); }   /* pilule za vrstu vozila (kategorije): posle .pt-vrh > *, da ga ne pregazi */
/* pilule bez izbora (motor na vozila/vw-golf-7) i ugašene pilule (ređanje po ceni u listu „Filteri“): odeljak 10 */
/* kompleti na vozila/vw-golf-7 (.pt-kompleti): cena ili „Pošalji upit“ na dnu kartice, kao na kompleti/index (34) */
/* izbor vozila preko cele širine, pa dve kolone na računaru (kategorije/kocnice) */
@media (min-width: 600px){ .pt-obrazac > .dugme.glavno{ justify-self: start; } }
.pt-dve{ display: grid; min-width: 0; }
.pt-dve > *{ min-width: 0; }
@media (min-width: 960px){ .pt-dve{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--razmak-32); align-items: start; } }
/* spisak sa skrivenim redovima: `.red + .red::before` broji i skrivene redove, pa linija ide samo između vidljivih */
.pt-lista > .red::before{ content: none; }
.pt-lista > .red:not([hidden]) ~ .red::before{ content: ""; }
.pt-motor{ margin-bottom: var(--razmak-8); }   /* izbor motora iznad pločica (vozila) */

/* ---------- 30. Plaćanje (kupovina/kartica-*, kupovina/ips, app/povratak-iz-banke): vrh 24.2, raspored 24.3, dugmad 24.15.
   Ishod: znak u krugu 64, naslov, jedna rečenica, jedno dugme. QR za IPS na beloj podlozi i u tamnoj temi. ---------- */
.ishod{ display: grid; justify-items: start; gap: var(--razmak-8); min-width: 0; }
.ishod > p{ max-width: 44ch; color: var(--tekst-2); }
.ishod-znak{
  position: relative; display: grid; place-items: center; width: var(--znak); height: var(--znak); margin-bottom: var(--razmak-8);
  border-radius: 50%; background: var(--ispuna); color: var(--tekst);
}
/* .ishod-znak.uspeh i .greska: podloga kao .bedz.uspeh i .greska (22); .proverava: prsten 24.17 */
.ishod > .lampica{ margin-top: var(--razmak-4); }
.ishod > h1:focus{ outline: none; }   /* ishod koji stigne posle provere dobija fokus na naslovu (čitač ekrana ga pročita) */
.placanje{ padding-top: var(--razmak-16); }
@media (min-width: 960px){ .placanje{ padding-top: var(--razmak-24); } }
/* IPS: telefon = iznos, „Otvori aplikaciju banke“, manji kod, posle uplate, pomoć; od 960 kod levo (5/8), ostalo desno */
.ips-karta{ justify-items: center; }
.ips-karta-naslov{ justify-self: start; font: 600 15px/20px var(--font); }
@media (min-width: 960px){
  .ips-raspored{ grid-template-rows: auto auto 1fr; grid-template-areas: "karta iznos" "karta posle" "karta pomoc"; column-gap: var(--razmak-32); }
  .ips-karta{ grid-area: karta; }
  .ips-iznos{ grid-area: iznos; }
  .ips-posle{ grid-area: posle; }
  .ips-pomoc{ grid-area: pomoc; }
}
/* kod je uvek na beloj (.tema-svetla na podlozi daje svetle tokene i u tamnoj temi): banka čita tamno na svetlom.
   Mirna zona od 4 modula je u samom SVG-u (viewBox -4 -4 33 33); oznaka „primer“ je ispod, van bele. */
.ips-kod{ display: grid; justify-items: center; gap: var(--razmak-8); width: 100%; max-width: var(--sirina-mala); margin: 0; }
.ips-kod-podloga{ width: 100%; border-radius: var(--radijus-unutra); background: var(--povrsina); box-shadow: inset 0 0 0 var(--linija) var(--odvajac); }
@media (max-width: 959.98px){ .ips-kod{ width: 80%; } }
.ips-kod-podloga > svg{ display: block; width: 100%; height: auto; aspect-ratio: 1; fill: var(--tekst); shape-rendering: crispEdges; }
.ips-kod > figcaption{ display: flex; }
/* usred plaćanja (telo-klasa placanje-strana): zaglavlje „nazad“ bez pretrage i bez Garaža · Korpa · Nalog (24.21) */

/* ---------- 31. Porudžbine (porudzbine/index, porudzbina, pronadji, odustanak, reklamacija): uvod 24.1, raspored 24.3,
   izbor „jedan od“ 24.10, slika 24.13 ---------- */
/* uzak obrazac (pronadji): telefon cela širina; na računaru 560 na sredini */
.por-uski{ display: grid; gap: var(--razmak-16); max-width: var(--sirina-srednja); min-width: 0; }
@media (min-width: 960px){ .por-uski{ margin-inline: auto; padding-top: var(--razmak-32); } }
/* red porudžbine: naziv, broj i datum, pa oznaka stanja ispod (ne gura strelicu) */
.por-red .stanje{ justify-self: start; margin-top: var(--razmak-4); }
.por-red .red-tekst{ gap: 2px; }
/* skup izbora (fieldset bez okvira); naslov skupa sa podatkom desno („Šta vraćaš?“ · „Br. … primer“) */
.por-skup{ border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--razmak-8); }
.por-skup > legend{ padding: 0; margin-bottom: var(--razmak-12); }
.por-skup > legend.por-legenda{ display: flex; align-items: center; justify-content: space-between; gap: var(--razmak-12); width: 100%; min-height: var(--prst); margin-bottom: var(--razmak-4); }
.por-legenda > span{ display: inline-flex; align-items: center; gap: var(--razmak-8); }
.por-izbor{ cursor: pointer; }
.por-izbor:has(> input:checked) .red-naslov{ font-weight: 600; }
.red.por-izbor + .red.por-izbor::before{ left: 52px; }   /* linija počinje gde i tekst (16 + 24 + 12) */
.por-prekidac .prekidac{ margin-left: var(--razmak-8); }   /* red sa prekidačem („vraćam ovaj deo“) */
/* potvrda prijema (odustanak, reklamacija): naslov, jedna rečenica, podaci u .zbir */
.por-potvrda{ display: grid; gap: var(--razmak-16); scroll-margin-top: calc(var(--visina-zaglavlje) + var(--razmak-16)); }
.por-potvrda > h2{ font: 600 20px/25px var(--font); scroll-margin-top: calc(var(--visina-zaglavlje) + var(--razmak-32)); }
.por-potvrda > h2:focus{ outline: none; }
.por-potvrda > p{ color: var(--tekst-2); }
.por-potvrda .zbir dt{ flex: none; }
.por-potvrda .zbir dd{ min-width: 0; }
/* broj komada ispod dela sa više komada (− broj +): tekst i linija počinju gde i naziv dela (16 + 44 + 12) */
.red.por-komada{ padding-left: 72px; }
.red + .red.por-komada::before{ left: 72px; }
/* mejl koji već znamo (odustanak, reklamacija): red „Potvrda ide na …“ sa malim „Promeni“ desno; dug mejl se lomi
   (ne gura stranu u stranu), a dugme se ne skuplja */
.por-mejl .red-opis{ overflow-wrap: anywhere; }
.por-mejl .red > .dugme{ flex: none; }

/* ---------- 32. Garaža: ga- Moja garaža · dv- Dodaj vozilo · sb- crtež zadnje strane saobraćajne · vz- Vozilo ---------- */
/* Moja garaža (glava 24.4, krug 24.10) */
.ga{ display: grid; gap: var(--razmak-16); padding-top: var(--razmak-8); min-width: 0; }
.ga-glava > h1{ min-width: 0; }
.ga-uvod{ color: var(--tekst-2); }
.ga-lista{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--razmak-12); min-width: 0; }
.ga-lista > li{ display: grid; min-width: 0; }
@media (min-width: 600px){ .ga-lista{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px){ .ga-lista{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ga .prazno{ padding-top: var(--razmak-32); }
/* kartica vozila: dodir na karticu bira vozilo (krug levo), strelica desno (44 × 44) otvara stranu vozila */
.ga-lista > .ga-vozilo{ display: flex; padding: 0; gap: 0; }
.ga-vozilo:has(.ga-izbor:active){ transform: scale(.98); transition-duration: var(--trajanje-pritisak); }
.ga-izbor{ flex: 1; display: flex; align-items: center; gap: var(--razmak-12); min-width: 0; align-self: stretch; padding: var(--razmak-16) 0 var(--razmak-16) var(--razmak-16); cursor: pointer; }
.ga-vozilo .vozilo-naziv{ white-space: normal; overflow-wrap: anywhere; }   /* dug naziv ide u dva reda, ne seče se */
.ga-detalji{
  flex: none; display: grid; place-items: center; width: var(--prst); height: var(--prst); margin: 0 var(--razmak-8) 0 var(--razmak-4);
  border-radius: 22px; color: var(--tekst-2);
}
.ga-detalji:active{ background: var(--ispuna); }

/* Dodaj vozilo: telefon jedna kolona; računar levo način i polja, desno crtež zadnje strane saobraćajne */
.dv{ display: grid; gap: var(--razmak-32); padding-top: var(--razmak-8); min-width: 0; }
.dv-slika{ display: grid; gap: var(--razmak-16); min-width: 0; }
.dv-slika-pre{ display: grid; gap: var(--razmak-8); min-width: 0; }
.dv-slika-pre > .saobracajna{ margin-bottom: var(--razmak-16); }
.dv-slika-pre > .dugme{ width: 100%; }
/* posle slikanja: sličica, „Slika je tu“ + poruka čitača, „Ponovo“ */
.dv-slika-posle{
  display: flex; align-items: center; gap: var(--razmak-12); min-width: 0;
  padding: var(--razmak-12); border-radius: var(--radijus-grupa); background: var(--povrsina);
}
/* poruka čitača ispod „Slika je tu“: dok čita, levo se vrti prsten (.vrti, 24.17), pa napredak („Čitam polja…“) */
.dv-poruka{ display: flex; align-items: center; gap: var(--razmak-8); }
.dv-slicica{
  position: relative; flex: none; display: grid; place-items: center; width: 96px; height: 60px; padding: 0; border: 0;
  border-radius: 14px; background: var(--ispuna); color: var(--tekst); overflow: hidden; cursor: pointer;
}
.dv-slicica > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dv-pregled-slika{ width: 100%; border-radius: var(--radijus-unutra); }
/* polja o vozilu */
.dv-podaci{ display: grid; gap: var(--razmak-24); min-width: 0; }
.dv-vin{ display: grid; gap: var(--razmak-4); min-width: 0; }
.dv-vin + .dv-vise{ margin-top: calc(-1 * var(--razmak-20)); }   /* po šasiji: dva tiha linka jedan ispod drugog */
.dv-opis{ display: grid; gap: var(--razmak-16); min-width: 0; margin: 0; padding: 0; border: 0; }
.dv-opis > legend{ padding: 0; margin-bottom: var(--razmak-8); }
.dv-polja{ display: grid; gap: var(--razmak-16); min-width: 0; }
@media (min-width: 600px){ .dv-polja{ grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.dv-sacuvaj{ width: 100%; }
/* oznaka polja sa saobraćajne (D.1, D.3, P.1, E) samo kad se prepisuje sa slike; „nije obavezno“ (24.18) samo kod ručnog */
.dv-kod{ height: 20px; margin-left: var(--razmak-8); vertical-align: top; }   /* ne podiže red naziva: polja ostaju u liniji */
.dv:not([data-nacin="slika"]) .dv-kod{ display: none; }
.dv:not([data-nacin="rucno"]) .dv-opciono{ display: none; }
.dv:not([data-nacin="slika"]) .dv-samo-slika{ display: none; }   /* lampica „Dovoljno je marka i model ili broj šasije.“ */
/* čuvamo samo podatke o vozilu */
.dv-cuvamo{ display: flex; align-items: flex-start; gap: var(--razmak-8); font: 400 13px/18px var(--font); color: var(--tekst-2); }
.dv-cuvamo > .ik{ color: var(--tekst-2); }
.dv-desno > p{ font: 400 13px/18px var(--font); color: var(--tekst-2); }
.dv-desno-slika{ width: 100%; max-height: 560px; object-fit: contain; border-radius: 16px; background: var(--povrsina); }
@media (min-width: 960px){
  .dv{ grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .dv-desno{ padding-top: var(--razmak-8); }
  .dv-slika-pre{ justify-items: start; }
  .dv-slika-pre > .dugme, .dv-sacuvaj{ width: auto; justify-self: start; }
}

/* Crtež zadnje strane saobraćajne u okviru kamere (dodaj vozilo, skener): samo polja o vozilu (D.1, D.3, E, P.1) */
.saobracajna{
  display: grid; min-width: 0; padding: var(--razmak-16);
  background:
    linear-gradient(var(--tekst), var(--tekst)) left top / 24px 2px,
    linear-gradient(var(--tekst), var(--tekst)) left top / 2px 24px,
    linear-gradient(var(--tekst), var(--tekst)) right top / 24px 2px,
    linear-gradient(var(--tekst), var(--tekst)) right top / 2px 24px,
    linear-gradient(var(--tekst), var(--tekst)) left bottom / 24px 2px,
    linear-gradient(var(--tekst), var(--tekst)) left bottom / 2px 24px,
    linear-gradient(var(--tekst), var(--tekst)) right bottom / 24px 2px,
    linear-gradient(var(--tekst), var(--tekst)) right bottom / 2px 24px;
  background-repeat: no-repeat;
  transition: transform var(--trajanje) var(--hitro);
}
.dv:not([data-nacin="slika"]) .saobracajna{ background: none; }   /* uglovi kamere samo kad se slika */
.dv[data-nacin="slika"] [data-otvori-sliku]{ cursor: pointer; }
.dv[data-nacin="slika"] [data-otvori-sliku]:active{ transform: scale(.98); transition-duration: var(--trajanje-pritisak); }
.sb-karta{
  aspect-ratio: 1.586; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-content: center;
  column-gap: var(--razmak-12); row-gap: var(--razmak-12); min-width: 0;
  padding: var(--razmak-16) var(--razmak-20); border-radius: 16px;
  background: var(--povrsina); box-shadow: inset 0 0 0 1px var(--odvajac), var(--staklo-senka-mala);
}
.sb-naslov{ grid-column: 1 / -1; font: 600 13px/18px var(--font); color: var(--tekst-2); }
.sb-red{ display: contents; }
.sb-kod{ font: 600 13px/18px var(--font); color: var(--tekst); font-variant-numeric: tabular-nums; }
.sb-ime{ font: 400 13px/18px var(--font); color: var(--tekst-2); }
.sb-crta{ align-self: center; width: 70%; height: 8px; border-radius: 4px; background: var(--ispuna-jaka); }
.sb-crta.kratka{ width: 45%; }
.sb-kucice{ align-self: center; display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); gap: 2px; height: 20px; min-width: 0; }
.sb-kucice > span{ border: 1px solid var(--ivica-polja); border-radius: 2px; }
/* na računaru crtež pokazuje gde piše ono što se upisuje: šasija (E) ili marka, model i motor (D.1, D.3, P.1) */
.dv[data-nacin="sasija"] .sb-red[data-sb="e"] > :is(.sb-kod, .sb-ime),
.dv[data-nacin="rucno"] .sb-red[data-sb="d"] > :is(.sb-kod, .sb-ime){ color: var(--tekst); font-weight: 600; }
.dv[data-nacin="sasija"] .sb-red[data-sb="e"] .sb-kucice > span{ border-color: var(--tekst); background: var(--ispuna); }
.dv[data-nacin="rucno"] .sb-red[data-sb="d"] > .sb-crta{ background: var(--tekst-2); }
@media (min-width: 960px){
  .sb-karta{ row-gap: var(--razmak-20); padding: var(--razmak-24) var(--razmak-32); }
  .sb-naslov, .sb-kod, .sb-ime{ font-size: 15px; line-height: 20px; }
  .sb-kucice{ height: 24px; }
}

/* Vozilo (garaza/vozilo.html): stubovi 24.3; listovi sa poljima (.vz-list) su puna površina (24.20), a polje sa greškom
   ostaje crveno i u fokusu (24.19, isto na Dodaj vozilo) */
.vz{ display: grid; gap: var(--razmak-32); padding-top: var(--razmak-8); min-width: 0; }
.vz-levo > .odeljak, .vz-desno > .odeljak{ margin-top: 0; }
.vz-glava{ display: flex; align-items: center; gap: var(--razmak-16); min-width: 0; }
.vz-glava > .ik-okvir{ width: var(--znak); height: var(--znak); border-radius: 16px; }
.vz-ime{ display: grid; gap: var(--razmak-4); min-width: 0; }
.vz-ime > h1{ overflow-wrap: anywhere; }
.vz-detalj{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--razmak-4) var(--razmak-8); color: var(--tekst-2); }
.vz-upit{ width: 100%; }
.vz-podaci{ margin: 0; }
.vz-dugo{ flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.vz-dugo > .red-vrednost{ max-width: none; text-align: left; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.vz-red-dugme{ flex: none; }
/* posle liste podataka (dl) dolaze redovi „Dodaj marku i model“ / „Dodaj broj šasije“: ista linija kao između redova */
.vz-podaci + .red::before{ content: ""; position: absolute; top: 0; left: calc(var(--razmak-16) + var(--razmak-24) + var(--razmak-12)); right: 0; height: var(--linija); background: var(--odvajac); }
/* .primer-traka: cela strana je primer (vozilo, ponuda, tok upita) — bedz „primer“, jedna rečenica, jedna veza; rečnik §5.
   .vz-primer je ista traka (garaža, vozilo). */
.vz-primer, .primer-traka{
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--razmak-4) var(--razmak-8);
  padding: var(--razmak-12) var(--razmak-16); border-radius: var(--radijus-grupa); background: var(--povrsina);
  font: 400 15px/20px var(--font); color: var(--tekst-2);
}
.vz-primer > a, .primer-traka > a{ display: inline-flex; align-items: center; min-height: var(--prst); margin-block: calc(-1 * var(--razmak-12)); margin-left: auto; font-weight: 600; color: var(--tekst); }
/* podsetnik: dva polja u redu (km · meseci) */
.vz-razmak{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--razmak-12); align-items: start; }
.vz-napomena{ font: 400 13px/18px var(--font); color: var(--siva-tekst); }
@media (min-width: 960px){
  .vz{ grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .vz-upit{ width: auto; justify-self: start; }
}
/* na računaru zaglavlje ima liniju ispod: sadržaj počinje 32 niže */
@media (min-width: 960px){ .ga, .dv, .vz{ padding-top: var(--razmak-32); } }

/* ---------- 33. Početna: pa- početna (src/strane/index.html) · sc- crtež saobraćajne (i u varijanti) · pd- druga mogućnost
   (src/strane/varijante/pocetna-druga.html). Telefon: samo .heroj, pa tri tiha odeljka. Računar: uvod levo, crtež desno. ---------- */
.pa-uvod{ padding-top: var(--razmak-8); }
.pa-uvod .heroj > p, .pd-vrh .heroj > p{ text-wrap: pretty; }   /* bez jedne reči sama u redu */
/* tihi link sa strelicom posle reči: strelica bliže reči, siva; „Sve“ do desne ivice sadržaja, dodir ostaje 44 */
.pa-uvod .dugme.tiho, .pa-sve, .pd-vrh .heroj > .dugme.tiho, .pd-svi, .pd-garancija > .dugme.tiho{ gap: var(--razmak-4); }
.pa-uvod .dugme.tiho > .ik, .pa-sve > .ik, .pd-vrh .heroj > .dugme.tiho > .ik, .pd-svi > .ik, .pd-garancija > .dugme.tiho > .ik{ color: var(--tekst-2); }
.pa-sve, .pd-svi{ margin-right: calc(-1 * var(--razmak-8)); }
@media (min-width: 960px){
  /* uvod levo, crtež desno (najviše 420), na sredini po visini; malo vazduha ispod zaglavlja */
  .pa-uvod{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: var(--razmak-32); align-items: center; padding-block: var(--razmak-32) 0; }
}
/* odeljci: tihi, samo prostor iznad (telefon 32 + 8, računar 32 + 32) */
.pa-odeljak{ display: grid; gap: var(--razmak-16); min-width: 0; margin-top: var(--razmak-32); padding-top: var(--razmak-8); }
.pa-uvod + .pa-odeljak{ padding-top: 0; }   /* ispod tihog linka (dodir 44) već ima vazduha */
@media (min-width: 960px){ .pa-odeljak, .pa-uvod + .pa-odeljak{ padding-top: var(--razmak-32); } }
/* kako radi: tri koraka, siva ikonica u okviru 44 levo, naslov i jedna siva rečenica desno; na računaru tri kolone */
.pa-koraci{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--razmak-16); }
.pa-koraci > li{ display: grid; grid-template-columns: var(--prst) minmax(0, 1fr); column-gap: var(--razmak-12); align-items: start; }
.pa-korak{ display: grid; gap: 2px; min-width: 0; }
.pa-korak > span{ text-wrap: pretty; }
@media (min-width: 960px){ .pa-koraci{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--razmak-32); } }
/* kategorije: šest pločica — na tabletu tri u redu (dva puna reda), a ne četiri pa dve */
@media (min-width: 600px) and (max-width: 959.98px){ .pa-plocice, .pd-plocice{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* kupuješ bez brige: obećanje „odgovara“ kao zasebna kartica (žuta kvačica 28, deblji naslov), ispod činjenice */
.pa-bez-brige{ display: grid; gap: var(--razmak-12); min-width: 0; }
.pa-garancija > .kvacica-odgovara, .pd-garancija > .kvacica-odgovara, .sc-e > .kvacica-odgovara{ width: 28px; height: 28px; }
.pa-garancija .red-naslov{ font-weight: 600; }
/* na računaru tri činjenice jedna pored druge (uspravna linija između: kod pd-tri ispod) */
@media (min-width: 960px){ .pa-cinjenice{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* crtež zadnje strane saobraćajne (.sc, samo na računaru): oznake polja i tanke linije; polje E sa 17 kućica (3 · 6 · 8),
   uglovi kamere i žuta kvačica „odgovara“. Bez izmišljenih podataka. */
.sc{ width: 100%; max-width: var(--sirina-mala); justify-self: end; }
.sc-karta{
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center;
  column-gap: var(--razmak-12); row-gap: var(--razmak-20); padding: var(--razmak-24);
  border-radius: var(--radijus-grupa); background: var(--povrsina); box-shadow: inset 0 0 0 1px var(--odvajac);
}
.sc-naslov{ grid-column: 1 / -1; font: 600 13px/18px var(--font); color: var(--tekst-2); }
.sc-kod{ font: 600 15px/20px var(--font); color: var(--tekst); font-variant-numeric: tabular-nums; }
.sc-ime{ font: 400 15px/20px var(--font); color: var(--tekst-2); }
.sc-crta{ grid-column: 3 / -1; align-self: end; width: 100%; height: 1px; margin-bottom: var(--razmak-4); background: var(--ivica-polja); }
.sc-crta.kratka{ width: 60%; }
/* polje E: blaga ispuna preko cele širine, isti stubovi kao ostali redovi (subgrid) */
.sc-e{
  position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center;
  margin-inline: calc(-1 * var(--razmak-12)); padding: var(--razmak-12); border-radius: var(--radijus-unutra); background: var(--ispuna);
}
.sc-e > .sc-kod, .sc-e > .sc-ime{ color: var(--tekst); font-weight: 600; }
.sc-kucice{ display: grid; grid-template-columns: 3fr 6fr 8fr; gap: var(--razmak-4); min-width: 0; height: 28px; }
.sc-blok{
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-width: 0;
  border: 1px solid var(--ivica-polja); border-radius: 6px; background: var(--povrsina); overflow: hidden;
}
.sc-blok > i{ position: relative; display: block; min-width: 0; }
.sc-blok > i + i{ box-shadow: inset var(--linija) 0 0 var(--odvajac); }
/* crtica u svakoj kućici: mesto za jedan znak (siva, ne bela tačka) */
.sc-blok > i::after{ content: ""; position: absolute; left: 25%; right: 25%; bottom: var(--razmak-8); height: 2px; border-radius: 1px; background: var(--tekst-2); }
.sc-e > .kvacica-odgovara{ overflow: visible; }
/* uglovi kamere oko polja E (boja teksta, 2 px) */
.sc-ugao{ position: absolute; width: 16px; height: 16px; border: 0 solid var(--tekst); pointer-events: none; }
.sc-ugao:nth-child(1){ top: calc(-1 * var(--razmak-4)); left: calc(-1 * var(--razmak-4)); border-width: 2px 0 0 2px; border-top-left-radius: var(--radijus-unutra); }
.sc-ugao:nth-child(2){ top: calc(-1 * var(--razmak-4)); right: calc(-1 * var(--razmak-4)); border-width: 2px 2px 0 0; border-top-right-radius: var(--radijus-unutra); }
.sc-ugao:nth-child(3){ bottom: calc(-1 * var(--razmak-4)); right: calc(-1 * var(--razmak-4)); border-width: 0 2px 2px 0; border-bottom-right-radius: var(--radijus-unutra); }
.sc-ugao:nth-child(4){ bottom: calc(-1 * var(--razmak-4)); left: calc(-1 * var(--razmak-4)); border-width: 0 0 2px 2px; border-bottom-left-radius: var(--radijus-unutra); }
/* pokret „uklapanje“ (samo kad JS radi i dok se crtež vidi): uglovi legnu na polje E, 17 crtica padne u kućice,
   pa iskoči žuta kvačica i nacrta se. Pre igre se to ne vidi; posle ostaje gotovo. Smanji pokret: 41. */
.sc-spremno .sc-ugao, .sc-spremno .sc-blok > i::after, .sc-spremno .kvacica-odgovara circle{ opacity: 0; }
.sc-spremno .kvacica-odgovara path{ stroke-dashoffset: 15; }
.sc-igra .sc-ugao{ animation: sc-legne var(--trajanje) var(--hitro) both; }
@keyframes sc-legne{ from{ transform: scale(1.3); opacity: 0; } 40%{ opacity: 1; } to{ transform: none; opacity: 1; } }
.sc-igra .sc-blok > i::after{ animation: sasija-legne var(--trajanje) var(--hitro) both; animation-delay: .3s; }
.sc-igra .sc-blok:nth-child(2) > i::after{ animation-delay: .45s; }
.sc-igra .sc-blok:nth-child(3) > i::after{ animation-delay: .6s; }
.sc-igra .kvacica-odgovara circle{ transform-box: fill-box; transform-origin: center; animation: sasija-iskoci var(--trajanje) var(--hitro) both; animation-delay: 1s; }
.sc-igra .kvacica-odgovara path{ animation: sasija-crtaj var(--trajanje) var(--glatko) both; animation-delay: 1s; }

/* druga mogućnost početne (pd-): kompleti za servis, „Tvoje vozilo“ kad je garaža puna, kako radi u grupi, garancija kao kartica */
.pd-vrh{ display: grid; min-width: 0; }
.pd-desno{ display: grid; min-width: 0; }
.pd-vozilo{ margin-top: var(--razmak-24); }
@media (min-width: 960px){
  .pd-vrh{ grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: var(--razmak-32); align-items: center; padding-top: var(--razmak-32); }
  .pd-vozilo{ margin-top: 0; }
  .pd-odeljak{ padding-top: var(--razmak-16); }   /* odeljci: malo više vazduha (32 + 16) */
}
/* kako radi: tri reda u grupi (okvir ikonice 44); na računaru tri kolone sa uspravnom linijom */
.pd-tri > .red{ align-items: center; }
.pd-tri .red-opis, .pd-garancija > p{ text-wrap: pretty; }
.grupa.pd-tri > .red + .red::before{ left: 72px; }   /* linija počinje gde i tekst (16 + 44 + 12) */
@media (min-width: 960px){
  .pd-tri{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-tri > .red{ padding-block: var(--razmak-16); }
  /* tri činjenice (početna) i tri koraka (varijanta): uspravna linija između */
  .grupa.pa-cinjenice > .red + .red:has(> :first-child)::before,
  .grupa.pd-tri > .red + .red::before{ top: var(--razmak-16); bottom: var(--razmak-16); left: 0; right: auto; width: var(--linija); height: auto; }
}
/* kompleti: dve kolone na telefonu (bez vrpce koja seče reči na ivici), četiri na računaru */
.pd-kompleti{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--razmak-8); min-width: 0; }
@media (min-width: 600px){ .pd-kompleti{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--razmak-12); } }
/* kupuješ bez brige: kartica obećanja (nije link; tihi link u njoj) + grupa redova; na računaru jedno do drugog */
.pd-kupovina{ display: grid; gap: var(--razmak-12); min-width: 0; }
@media (min-width: 960px){ .pd-kupovina{ grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.pd-garancija{ grid-template-columns: auto minmax(0, 1fr); column-gap: var(--razmak-12); row-gap: var(--razmak-4); align-items: center; }
.pd-garancija > p{ grid-column: 1 / -1; color: var(--tekst-2); max-width: 44ch; }
.pd-garancija > .dugme.tiho{ grid-column: 1 / -1; justify-self: start; margin: 0 0 calc(-1 * var(--razmak-8)) calc(-1 * var(--razmak-8)); }

/* ---------- 34. Artikal i kompleti: ar- artikal.html · ko- kompleti/index.html i kompleti/mali-servis.html ---------- */
/* glava (slike + kupovina); od 960 dve kolone */
.ar-glava{ display: grid; gap: var(--razmak-20); padding-top: 0; min-width: 0; }
.ar-info{ display: grid; gap: var(--razmak-16); align-content: start; min-width: 0; }
@media (min-width: 960px){
  .ar-glava{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--razmak-32); padding-top: var(--razmak-24); }
}
/* slike dela: fotografija je na beloj podlozi u obe teme (uz .tema-svetla je --povrsina bela).
   Telefon: vuče se prstom, sledeća slika viri; od 600 dve u redu; od 960 jedna ispod druge, sve velike (mala sličica
   ispod velike slike izgledala je kao dugme koje ništa ne radi). */
.ar-slike{
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: var(--razmak-8);
  margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(-1 * var(--ivica-l)) calc(-1 * var(--ivica-d));
  padding-inline: var(--ivica-l) var(--ivica-d); scroll-padding-inline: var(--ivica-l) var(--ivica-d);
}
.ar-slike::-webkit-scrollbar{ display: none; }
.ar-slike:focus-visible{ outline-offset: -2px; }
.ar-slika{
  display: grid; place-items: center; aspect-ratio: 4 / 3; min-width: 0; margin: 0; padding: var(--razmak-16);
  border-radius: var(--radijus-grupa); background: var(--povrsina); overflow: hidden; scroll-snap-align: start;
}
.ar-slika img{ width: 100%; height: 100%; object-fit: contain; }
/* tamna tema: podloga slike je Apple siva umesto čiste bele, a bela pozadina fotografije se stapa s njom (manje bleska) */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="svetla"]) .ar-slika{ background: var(--pozadina); }
  :root:not([data-tema="svetla"]) .ar-slika img{ mix-blend-mode: multiply; }
}
:root[data-tema="tamna"] .ar-slika{ background: var(--pozadina); }
:root[data-tema="tamna"] .ar-slika img{ mix-blend-mode: multiply; }
@media (min-width: 600px){ .ar-slike{ grid-auto-columns: calc(50% - var(--razmak-4)); } }
@media (min-width: 960px){
  .ar-slike{
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); gap: var(--razmak-12);
    align-content: start; overflow: visible; margin-inline: 0; padding-inline: 0;
  }
}
/* ime dela: proizvođač (sivo, sa oznakom „primer“) pa naslov; desno tiho dugme sa srcem (lista želja, dodir 44) */
.ar-ime{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--razmak-8); min-width: 0; }
.ar-ime-tekst{ display: grid; gap: var(--razmak-4); min-width: 0; }
.ar-ime-tekst > .bedz{ justify-self: start; }   /* „Odgovara tvom vozilu“ ili „Ne odgovara“: široka koliko tekst, ne cela kolona */
.ar-srce{ width: var(--prst); padding: 0; margin-right: calc(-1 * var(--razmak-8)); }
.ar-srce[aria-pressed="true"]{ background: var(--ispuna); }
.ar-ime-gore{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--razmak-8); }
/* cena u grupi: natpis, cena, pa red sa stanjem popusta; natpisi u zbiru iste veličine kao natpis cene (15/20) */
.ar-cena{ display: grid; gap: var(--razmak-4); }
.ar-cena .artikal-cena{ margin-top: 0; }
.ar-zbir > div:not(.zbir-ukupno){ font: 400 15px/20px var(--font); }
/* podaci ispod (vozila, brojevi, tehnički podaci, deklaracija, zamene); od 960 dve kolone */
.ar-detalji{ display: grid; gap: var(--razmak-32); margin-top: var(--razmak-32); min-width: 0; }
@media (min-width: 960px){ .ar-detalji{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
/* red sa nazivom levo i vrednošću desno (.ar-podatak); dugačka vrednost (spisak) ide ispod naziva (.ar-par) */
.ar-podatak .red-vrednost{ max-width: 60%; }
.ar-podatak .red-vrednost a{ display: inline-flex; align-items: center; min-height: var(--prst); }   /* link u vrednosti: dodir 44 */
.red.ar-par{ flex-direction: column; align-items: stretch; justify-content: center; gap: 2px; }
.ar-ceo{ white-space: nowrap; }   /* broj ili model koji se ne prelama (T-Roc, 04E 115 561 D) */
.ar-napomena{ font: 400 15px/20px var(--font); color: var(--tekst-2); }
/* „Prikaži sve“: <details> u grupi, natpis je .red (odvajač 24.8); strelica dole, otvoreno = strelica gore */
.ar-vise{ position: relative; }
.ar-vise > summary{ list-style: none; cursor: pointer; font-weight: 600; }
.ar-vise > summary::-webkit-details-marker{ display: none; }
.ar-vise > summary::after{
  content: ""; flex: none; width: 8px; height: 8px; margin: -4px var(--razmak-4) 0 auto;
  border-right: 2px solid var(--tekst-2); border-bottom: 2px solid var(--tekst-2); transform: rotate(45deg);
  transition: transform var(--brzo) ease;
}
.ar-vise[open] > summary::after{ margin-top: 4px; transform: rotate(-135deg); }
.ar-vise:not([open]) .ar-vise-otvoreno, .ar-vise[open] .ar-vise-zatvoreno{ display: none; }
.ar-vise > summary:active{ background: var(--ispuna); }
.ar-vise > summary:focus-visible{ outline-offset: -2px; }

/* kompleti (uvod 24.1): mreža — telefon dve kolone (mali servis preko cele širine), od 960 četiri */
.ko-mreza{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--razmak-12); margin-top: var(--razmak-24); }
/* cena ili „Pošalji upit“ uvek na dnu kartice, pa su u istom redu poravnati (i kompleti na vozila/vw-golf-7, .pt-kompleti) */
:is(.ko-mreza, .pt-kompleti) .kartica-kompleta{ grid-template-rows: auto auto auto minmax(0, 1fr); }
:is(.ko-mreza, .pt-kompleti) :is(.kartica-cena, .ko-upit){ align-self: end; }
/* kartica koja vodi na upit (nema svoju stranu): jasno piše šta sledi; na sporednim karticama tiho (.tiho), naglašena je
   samo radnja glavne kartice */
.ko-upit{ display: inline-flex; align-items: center; gap: var(--razmak-8); margin-top: var(--razmak-4); font: 600 15px/20px var(--font); color: var(--tekst); }
.ko-upit.tiho{ font-weight: 400; color: var(--tekst-2); }
.ko-mreza .ko-glavni{ grid-column: 1 / -1; grid-template-rows: auto auto auto auto minmax(0, 1fr); }
.ko-glavni .kartica-naslov{ font: 700 22px/28px var(--font); }
/* šta je u kompletu: male sive oznake (.bedz) u kartici malog servisa */
.ko-sadrzi{ display: flex; flex-wrap: wrap; gap: var(--razmak-8); margin-top: var(--razmak-4); }
@media (min-width: 960px){
  .ko-mreza{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* mali servis preko cele širine: ikonica levo, tekst, oznake i cena desno od nje (bez praznog polja u kartici) */
  .ko-mreza .ko-glavni{ grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; column-gap: var(--razmak-20); padding: var(--razmak-24); }
  .ko-glavni > .ik-okvir{ grid-row: 1 / span 4; width: var(--znak); height: var(--znak); margin-bottom: 0; }
  .ko-glavni > :not(.ik-okvir){ grid-column: 2; }
  .ko-glavni .kartica-naslov{ font: 700 28px/34px var(--font); }
  .ko-mreza .ko-glavni .kartica-cena{ align-self: start; margin-top: var(--razmak-8); }
}
/* strana kompleta: šta ulazi, izbor vozila, pa uslovi i nagrada; od 960 levo šta ulazi i uslovi, desno izbor vozila */
.ko-strana{ display: grid; gap: var(--razmak-32); margin-top: var(--razmak-24); min-width: 0; }
@media (min-width: 960px){
  .ko-strana{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "ulazi vozilo" "uslovi vozilo"; }
  .ko-ulazi{ grid-area: ulazi; }
  .ko-vozilo{ grid-area: vozilo; }
  .ko-uslovi{ grid-area: uslovi; }
  /* u polovini ekrana tri polja su preuska: marka i model u redu, motor ispod preko cele širine */
  .ko-forma .izbor-vozila-polja{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ko-forma .izbor-vozila-polja > .polje:last-child{ grid-column: 1 / -1; }
}
/* dno strane kompleta: nagrada, upit, dostava — svaka u svojoj grupi; od 960 jedna pored druge, iste visine */
.ko-dno{ display: grid; gap: var(--razmak-12); margin-top: var(--razmak-32); min-width: 0; }
.ko-dno > .grupa{ display: grid; }
@media (min-width: 960px){ .ko-dno{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 35. Prijava (nalog/prijava, registracija, potvrda-mejla): lozinka 24.12, saglasnost 24.11.
   greske/istekla-prijava koristi gr-cela / gr-logo / gr-stanje (38). ---------- */
/* raspored: telefon jedna kolona; tablet kolona u sredini; od 960 (.dve) uvod levo, obrazac desno */
.pr-raspored{ display: grid; gap: var(--razmak-24); align-items: start; min-width: 0; width: 100%; max-width: var(--sirina-srednja); margin-inline: auto; }
.pr-uvod{ display: grid; gap: var(--razmak-8); align-content: start; min-width: 0; padding-top: var(--razmak-16); }
.pr-uvod > p{ max-width: 44ch; color: var(--tekst-2); }
.pr-uvod > p b{ color: var(--tekst); overflow-wrap: anywhere; }
.pr-kartica{ display: grid; gap: var(--razmak-16); align-content: start; min-width: 0; }
@media (min-width: 960px){
  .pr-raspored{ padding-top: var(--razmak-32); }
  .pr-raspored.dve{ max-width: none; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: var(--razmak-32); }
  .pr-raspored.dve > .pr-uvod{ padding-top: var(--razmak-32); }
  .pr-uvod{ padding-top: 0; }
  .pr-kartica{ padding: var(--razmak-32); border-radius: var(--radijus-grupa); background: var(--povrsina); }
}
/* zašto nalog (samo računar, levo ispod naslova): okvir ikonice 44 + naslov i jedan sivi red */
.pr-zasto{ list-style: none; margin: var(--razmak-24) 0 0; padding: 0; display: grid; gap: var(--razmak-16); }
.pr-zasto > li{ display: flex; align-items: center; gap: var(--razmak-12); min-width: 0; }
.pr-zasto .ik-okvir{ background: var(--povrsina); }
.pr-zasto-tekst{ display: grid; gap: 2px; min-width: 0; }
.pr-zasto-naslov{ font: 600 17px/22px var(--font); }
.pr-zasto-opis{ font: 400 15px/20px var(--font); color: var(--tekst-2); }
/* obrazac: polja jedno ispod drugog; glavno dugme preko cele širine; „Pošalji mi kod umesto lozinke“ odmah ispod, u sredini */
.pr-obrazac{ display: grid; gap: var(--razmak-16); min-width: 0; }
.pr-obrazac > .dugme.glavno{ margin-top: var(--razmak-8); }
.pr-obrazac > .pr-kod-dugme{ justify-self: center; margin-top: calc(-1 * var(--razmak-8)); }
/* polje za kod iz mejla: krupnije cifre (Title 2), brojevi iste širine */
.polje .pr-kod{ font: 600 22px/28px var(--font); font-variant-numeric: tabular-nums; }
/* opšta greška obrasca (pogrešna lozinka, otkazano, nema mreže): ikonica crvena, tekst pun */
.pr-uzbuna{
  display: flex; align-items: flex-start; gap: var(--razmak-12); padding: var(--razmak-12) var(--razmak-16);
  border-radius: var(--radijus-unutra); background: linear-gradient(var(--crvena-ispuna), var(--crvena-ispuna)), var(--povrsina);
  color: var(--tekst); font: 400 15px/20px var(--font); text-wrap: pretty;
}
.pr-uzbuna > .ik{ color: var(--crvena-znak); }
/* veza u uzbuni (npr. „Prijavi se“ na registracija.html?greska=postoji): kao veza u tekstu, plava i bez podvlake, podvuče se
   tek pod mišem (brend: bez podvlačenja) */
.pr-uzbuna a{ color: var(--plava); font-weight: 400; text-decoration: none; text-underline-offset: 3px; }
@media (hover: hover){ .pr-uzbuna a:hover{ text-decoration: underline; } }
/* crta „ili“ između mejla i Apple / Google prijave */
.pr-ili{ display: flex; align-items: center; gap: var(--razmak-12); margin-block: var(--razmak-8); font: 400 13px/18px var(--font); color: var(--tekst-2); }
.pr-ili::before, .pr-ili::after{ content: ""; flex: 1; height: var(--linija); background: var(--odvajac); }
.pr-drugo{ display: grid; gap: var(--razmak-12); min-width: 0; }
.pr-drugo > :is(.pr-sitno, .lampica){ text-align: center; text-wrap: balance; }
.pr-drugo > .pr-sitno + .lampica{ margin-top: calc(-1 * var(--razmak-8)); }   /* dva sitna reda ispod dugmadi su jedna grupa */
/* saglasnosti (registracija): skup kockica (24.11) sa opisom ispod naziva */
.pr-saglasnosti{ border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--razmak-4); }
.pr-saglasnost-tekst{ display: grid; gap: 2px; min-width: 0; padding-top: 2px; }
.pr-saglasnost-opis{ font: 400 13px/18px var(--font); color: var(--tekst-2); }
.pr-saglasnosti > .polje-greska{ margin-top: calc(-1 * var(--razmak-8)); padding-left: calc(24px + var(--razmak-12)); }
.pr-saglasnost.greska > input:focus-visible{ outline-color: var(--crvena-znak); }
/* sitno ispod (privatnost, „Nemaš nalog?“, „Nije stigao?“); „Pošalji ponovo“ i „Promeni mejl“ u jednom redu */
.pr-dno{ display: grid; justify-items: center; gap: var(--razmak-4); padding-top: var(--razmak-8); text-align: center; font: 400 15px/20px var(--font); color: var(--tekst-2); }
.pr-dno > .dugme.tiho{ font-weight: 600; }
.pr-dno-red{ display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--razmak-16); }
/* „Nemaš nalog?“ / „Već imaš nalog?“: sivo pitanje + tiho dugme u istom redu (ne plavi link: dno je iznad trake) */
.pr-pitanje{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--razmak-4); }

/* ---------- 36. Nalog: na- nalog/index i podstrane (profil, adrese, uređaji, lozinka, firma) · np- podešavanja, privatnost,
   brisanje, obaveštenja, želje, app/podesavanja. Meni levo (samo računar): src/delovi/nalog-meni.html ({{deo:nalog-meni}}).
     <div class="na-okvir">
       {{deo:nalog-meni}}
       <div class="na-sadrzaj">
         <div class="na-glava"><h1>Profil</h1>…</div>
         <form class="grupa sa-razmakom na-obrazac">…<button class="dugme glavno siroko">Sačuvaj</button></form>
       </div>
     </div> ---------- */
/* nalog/index: naslov, kartica profila, grupe redova; od 960 dve kolone (na-kolone, na-kolona: 24.3) */
.na-pocetna{ display: grid; gap: var(--razmak-24); padding-top: var(--razmak-8); min-width: 0; }
@media (min-width: 960px){ .na-pocetna{ padding-top: var(--razmak-24); } }
/* kartica profila: krug 64 sa ikonicom, ime (Title 3), mejl (sivo), oznaka, strelica — vodi na profil */
.na-profil{ min-height: 96px; padding-block: var(--razmak-16); gap: var(--razmak-16); }
.na-profil > .ik-okvir{ width: var(--znak); height: var(--znak); border-radius: 50%; }
.na-profil .red-naslov{ font: 600 20px/25px var(--font); overflow-wrap: anywhere; }
.na-profil .red-opis{ overflow-wrap: anywhere; }
/* red koji je radnja (odjava): bez strelice; brisanje naloga: crveno (24.18), sa strelicom (vodi na stranu) */
a.red.na-radnja::after{ display: none; }
/* podstrana: telefon jedna kolona; od 960 meni levo (lepi se uz vrh), sadržaj desno najšire 640 */
.na-okvir{ display: grid; gap: var(--razmak-32); min-width: 0; }
.na-sadrzaj{ display: grid; gap: var(--razmak-16); align-content: start; min-width: 0; width: 100%; max-width: var(--sirina-kolona); padding-top: var(--razmak-8); }
@media (min-width: 960px){
  .na-okvir{ grid-template-columns: max-content minmax(0, 1fr); align-items: start; padding-top: var(--razmak-24); }
  .na-sadrzaj{ padding-top: 0; }
}
/* meni naloga (samo računar): kapsule 44 kao meni radnog stola (24.14); „Obriši nalog“ je crven (24.18) */
.na-meni{ position: sticky; top: calc(var(--visina-zaglavlje) + var(--razmak-24)); display: grid; gap: var(--razmak-4); min-width: 0; }
/* stub je širok koliko najduži naziv (max-content), a izabrani red je podebljan, pa se stub širio i sadržaj pomerao
   levo-desno od strane do strane. Najmanja širina (pola --sirina-mala + 8) je veća od najdužeg podebljanog naziva. */
@media (min-width: 960px){ .na-meni{ min-width: calc(var(--sirina-mala) / 2 + var(--razmak-8)); } }
.na-meni-naslov{
  display: flex; align-items: center; min-height: var(--prst); padding: 0 var(--razmak-12);
  border-radius: 22px; font: 600 15px/20px var(--font); color: var(--tekst-2); text-decoration: none;
  transition: background-color var(--brzo) ease;
}
.na-meni-lista{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--razmak-4); }
/* naslov podstrane: H1 levo, oznaka ili jedno malo dugme desno (24.4); uvod i sitna napomena */
.na-glava > h1{ min-width: 0; overflow-wrap: anywhere; }
.na-glava:has(> .bedz:last-child){ justify-content: flex-start; }   /* oznaka („primer“) stoji uz naslov, ne na drugom kraju */
.na-uvod{ max-width: 52ch; color: var(--tekst-2); }
/* obrazac: polja jedno ispod drugog; glavno dugme preko cele širine (na računaru po sadržaju) */
.na-obrazac{ gap: var(--razmak-16); }
.na-obrazac > .dugme.glavno{ margin-top: var(--razmak-8); }
.na-dva{ display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--razmak-12); align-items: start; }
.na-dva.jednako{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dugme.na-ukloni{ justify-self: center; }   /* uklanjanje: crveno (24.18), kao „Obriši“ na iPhone-u */
@media (min-width: 960px){
  .na-obrazac > .dugme.glavno{ width: auto; justify-self: start; padding-inline: var(--razmak-32); }
}
/* liste (adrese, uređaji): oznake desno ne guraju tekst; dugme u redu ne raste */
.na-lista .red-opis{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--razmak-4) var(--razmak-8); }
.na-lista .red > .bedz, .na-lista .red > .dugme{ flex: none; }
.na-lista .prazno, .np-panel .prazno{ padding-block: var(--razmak-24); }
.na-sadrzaj > .prazno{ padding-top: var(--razmak-32); }
.na-sadrzaj > .dugme.sporedno{ justify-self: start; }
/* lampica ispod spiska (adrese, uređaji): uvučena 16 kao tekst redova, bliže spisku (8 umesto 16) */
.na-sadrzaj > .na-lampica{ padding-inline: var(--razmak-16); margin-top: calc(-1 * var(--razmak-8)); }
@media (max-width: 599.98px){ .na-sadrzaj > .dugme.sporedno{ justify-self: stretch; } }
/* list sa dna za adresu: polja u grupi (na staklu sivi tekst bi se gubio) */
.na-list-obrazac{ display: grid; gap: var(--razmak-16); }
.na-list-obrazac > .dugme{ width: 100%; }

/* podešavanja naloga (np-): odeljak sa naslovom, naslov i napomena uvučeni 16, u liniji sa tekstom redova */
.np-stog{ display: grid; gap: var(--razmak-16); align-content: start; min-width: 0; }   /* stanje strane koje se menja (pre i posle brisanja) */
.np-odeljak{ display: grid; gap: var(--razmak-8); min-width: 0; }
:is(.na-sadrzaj, .np-stog) > :is(.np-odeljak, .na-uvod) + .np-odeljak{ margin-top: var(--razmak-8); }
.np-odeljak > h2{ padding-inline: var(--razmak-16); font: 600 17px/22px var(--font); }
/* red sa vrednošću koju ne menjaš („Uvek“): vrednost sivo desno, bez strelice */
.np-uvek .red-vrednost{ font: 400 15px/20px var(--font); }
/* brisanje naloga: crveno dugme (24.18; siva ispuna, crvena slova; nije žuto — žuto je samo „dalje“) */
.dugme.np-opasno:disabled{ color: var(--tekst-2); }
.np-stog > .dugme{ margin-top: var(--razmak-8); }
@media (min-width: 960px){ .np-stog > .dugme{ width: auto; justify-self: start; padding-inline: var(--razmak-32); } }
/* list sa dna za potvrdu: rečenica, pa dugme preko cele širine */
.np-list-tekst{ color: var(--tekst); }
.np-list-telo > .dugme{ width: 100%; }
/* posle brisanja / slanja: kao prazno stanje (22), sa malo dužom rečenicom */
.np-gotovo > p{ max-width: 36ch; color: var(--tekst-2); }
.np-gotovo > :is(h1, h2):focus{ outline: none; }
/* obaveštenja: nepročitano = deblji naslov + tačka u boji teksta na uglu ikonice (bez plave i žute) */
.np-novo .ik-okvir{ position: relative; }
.np-novo .ik-okvir::after{
  content: ""; position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--tekst); box-shadow: 0 0 0 2px var(--povrsina);
}
.np-novo .red-naslov{ font-weight: 600; }
.np-panel{ display: grid; gap: var(--razmak-16); min-width: 0; }
/* lista želja: slika dela u istoj pločici 44 kao ikonica (bela podloga fotografije se stapa s njom), naziv (link),
   „Odgovara tvom vozilu“ + ime vozila u jednom redu, pa dugmad */
.np-slika{ overflow: hidden; background: var(--pozadina); }
.np-slika > img{ width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.np-odgovara{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--razmak-4) var(--razmak-8); min-width: 0; }
.np-veza{ display: grid; gap: 2px; align-content: center; min-height: var(--prst); min-width: 0; color: var(--tekst); text-decoration: none; }
.np-veza .red-naslov{ overflow-wrap: anywhere; }
@media (hover: hover){ .np-veza:hover .red-naslov{ text-decoration: underline; text-underline-offset: 3px; } }
.np-radnje{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--razmak-8); margin-top: var(--razmak-4); }
.np-radnje > .dugme.tiho{ color: var(--tekst-2); }
/* podešavanja aplikacije: verzija na dnu, sitno i sivo, na sredini */
.np-verzija{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--razmak-8); padding-block: var(--razmak-8); font: 400 13px/18px var(--font); color: var(--tekst-2); text-align: center; }

/* ---------- 37. Ekrani aplikacije: ap- zaključano i ažuriraj · uv- uvod (app/uvod) · sk- skener (app/skener).
   Bez zaglavlja i trake: jedna stvar na sredini, jedno žuto dugme. Skener je uvek taman (.tema-tamna na njemu), kao kamera.
   Crtež saobraćajne na skeneru je isti kao na garaza/dodaj.html (.sb-karta, 32). ---------- */
/* ekran preko celog prozora (telo-klasa ap-cela; stub 24.2): logo gore levo (24.2, nije link) */
body.ap-cela #sadrzaj{ padding-bottom: calc(var(--razmak-16) + env(safe-area-inset-bottom, 0px)); }
/* stanje na sredini (zakljucano, azuriraj): kao prazno stanje i „Nema interneta“ — krug 64, H1, rečenica, dugme (24.16) */
.ap-stanje{
  display: grid; justify-items: center; gap: var(--razmak-8); width: 100%; max-width: var(--sirina-srednja);
  margin: auto; padding-bottom: var(--visina-zaglavlje); text-align: center;
}
.ap-stanje > p{ text-wrap: balance; }
.ap-stanje > .ap-sitno{ margin-top: var(--razmak-16); }
.ap-stanje > p.ap-greska{ color: var(--crvena-znak); }
.ap-sitno{ font: 400 15px/20px var(--font); color: var(--tekst-2); }

/* uvod (app/uvod): tri koraka; telefon: sadržaj na sredini, dugme dole; od 960: sve zajedno na sredini */
.uv{ display: flex; flex-direction: column; flex: 1; width: 100%; max-width: var(--sirina-mala); margin-inline: auto; }
.uv-korak{ display: flex; flex-direction: column; flex: 1; min-width: 0; }
.uv-sredina{
  display: grid; justify-items: center; align-content: center; gap: var(--razmak-8); flex: 1;
  padding-block: var(--razmak-32) var(--razmak-24); text-align: center;
}
.uv-sredina > p{ max-width: 34ch; color: var(--tekst-2); }
.uv-sredina > h1:focus{ outline: none; }   /* fokus ide na naslov novog koraka, da ga čitač ekrana pročita */
/* znak koraka: .ik-okvir kao krug 96 sa ikonicom 44 (ista crtana ikonica, samo uvećana) */
.uv-znak{ width: 96px; height: 96px; margin-bottom: var(--razmak-16); border-radius: 50%; }
.uv-znak > .ik{ width: 44px; height: 44px; stroke-width: 1.5; }
/* prvi korak: ikonica aplikacije 96 (radijus kao na telefonu), tanka ivica da se tamna ikonica vidi na crnoj podlozi */
.uv-ikonica{
  width: 96px; height: 96px; margin-bottom: var(--razmak-16); border-radius: 22px;
  box-shadow: 0 0 0 var(--linija) var(--odvajac), var(--staklo-senka-mala);
}
/* „može i bez toga“ (Apple: aplikacija radi i bez dozvole): jedna 💡 lampica ispod rečenice */
.uv-sredina > p.lampica{ max-width: 100%; margin-top: var(--razmak-8); text-wrap: balance; }
.uv-dno{ display: grid; gap: var(--razmak-20); flex: none; }
.uv-dno > .dugme.glavno{ width: 100%; }
/* tačke koraka: 8 × 8, trenutni korak kapsula 24 × 8 (≥ 3:1 naspram podloge) */
.uv-tacke{ display: flex; justify-content: center; gap: var(--razmak-8); }
.uv-tacke > span{ width: 8px; height: 8px; border-radius: 4px; background: var(--ivica-polja); transition: width var(--trajanje-kratko) var(--hitro); }
.uv-tacke > span.sada{ width: 24px; background: var(--tekst); }
/* novi korak ulazi mekano (uz „smanji pokret“ samo pretapanje) */
.uv-korak.ulazi .uv-sredina{ animation: uv-ulazi var(--trajanje) var(--glatko) both; }
@keyframes uv-ulazi{ from{ opacity: 0; transform: translateX(var(--razmak-24)); } to{ opacity: 1; transform: none; } }
@media (min-width: 960px){   /* bez kartice, kao zaključano i ažuriraj: sadržaj, tačke i dugme zajedno na sredini */
  .uv{ flex: none; margin-block: auto; }
  .uv-korak{ flex: none; }
  .uv-sredina{ padding-block: var(--razmak-16) var(--razmak-32); }
}

/* skener: kamera preko celog ekrana, uvek tamno */
body.sk-telo{ overflow: hidden; }
.sk{
  position: fixed; inset: 0; z-index: 10; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: env(safe-area-inset-top, 0px) var(--ivica-d) env(safe-area-inset-bottom, 0px) var(--ivica-l);
}
/* slika kamere leži iza svega, preko celog ekrana; posle okidanja (ili slike iz galerije) snimak stoji u okviru */
.sk-video{
  position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; object-fit: cover;
  opacity: 0; transition: opacity var(--brzo) ease;
}
.sk.ima-video .sk-video{ opacity: 1; }
.sk-snimak{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radijus-unutra); }
.sk > :not(video){ position: relative; z-index: 1; }
.sk > .sk-vrh{ z-index: 2; }   /* zatamnjenje oko okvira (senka) ne sme da pređe preko dugmeta „Zatvori“ */
/* vrh: zatvori levo, naslov u sredini, isto toliko praznog mesta desno */
.sk-vrh{ display: grid; grid-template-columns: var(--prst) minmax(0, 1fr) var(--prst); align-items: center; gap: var(--razmak-12); height: var(--visina-zaglavlje); }
.sk-vrh > h1{ font: 600 17px/22px var(--font); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* sredina: okvir u odnosu kartice saobraćajne (85,6 × 54 mm), oko njega zatamnjeno */
.sk-sredina{ display: grid; align-content: center; justify-items: center; gap: var(--razmak-8); min-height: 0; padding-block: var(--razmak-16); text-align: center; }
.sk-okvir{
  position: relative; width: 100%; max-width: var(--sirina-srednja); aspect-ratio: 856 / 540; margin-bottom: var(--razmak-16);
  border-radius: var(--radijus-unutra); box-shadow: 0 0 0 100vmax var(--zastor);
}
.sk:not(.ima-video):not(.ima-snimak) .sk-okvir{ box-shadow: none; }   /* bez kamere: samo crtež kartice */
.sk-ugao{ position: absolute; width: 32px; height: 32px; border: 4px solid var(--tekst); }
.sk-ugao.gl{ top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 16px; }
.sk-ugao.gd{ top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 16px; }
.sk-ugao.dl{ bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 16px; }
.sk-ugao.dd{ bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 16px; }
/* crtež zadnje strane dok kamera ne radi (.sb-karta, 32), preko celog okvira */
.sk-okvir > .sb-karta{ position: absolute; inset: 0; }
.sk.ima-video .sk-okvir > .sb-karta, .sk.ima-snimak .sk-okvir > .sb-karta{ display: none; }
.sk-uputstvo{ max-width: 32ch; font: 600 17px/22px var(--font); }
.sk-uputstvo-2{ max-width: 36ch; font: 400 15px/20px var(--font); color: var(--tekst-2); }
/* poruka čitača (data-citac-poruka): kapsula ispod uputstva, sa prstenom (24.17), samo dok čita */
.sk-poruka{
  display: none; align-items: center; gap: var(--razmak-8); min-height: var(--prst); margin-top: var(--razmak-8);
  padding: var(--razmak-12) var(--razmak-16); border-radius: 22px; background: var(--povrsina);
  font: 600 15px/20px var(--font);
}
.sk[data-stanje="izabrana"] .sk-poruka, .sk[data-stanje="cita"] .sk-poruka{ display: inline-flex; }
.sk-poruka::before{ content: ""; }
.sk[data-stanje="izabrana"] .sk-uputstvo-2, .sk[data-stanje="cita"] .sk-uputstvo-2{ display: none; }
/* donji deo: panel (kad kamera ne radi) ili dugmad galerija · okidač · ručno (okidač 72: beli prsten i beli krug) */
.sk-donji{ display: grid; min-width: 0; }
.sk-dno{
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--razmak-16);
  width: 100%; max-width: var(--sirina-srednja); justify-self: center; padding-block: var(--razmak-16) var(--razmak-24);
}
.sk-alat{
  display: grid; justify-items: center; gap: var(--razmak-4); min-width: var(--prst); justify-self: center;
  color: var(--tekst); font: 400 13px/18px var(--font); text-decoration: none; cursor: pointer;
}
.sk-alat > .sk-krug{
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--staklo); border: 1px solid var(--staklo-ivica);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  transition: transform var(--trajanje) var(--hitro);
}
.sk-alat:active > .sk-krug{ transform: scale(.92); transition-duration: var(--trajanje-pritisak); }
button.sk-alat{ padding: 0; border: 0; background: none; }
.sk-okidac{
  position: relative; width: 72px; height: 72px; padding: 0; border: 4px solid var(--tekst); border-radius: 50%;
  background: transparent; cursor: pointer;
}
.sk-okidac::after{
  content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--tekst);
  transition: transform var(--trajanje) var(--hitro);
}
.sk-okidac:active::after{ transform: scale(.9); transition-duration: var(--trajanje-pritisak); }
.sk-okidac:focus-visible{ outline-offset: 4px; }
.sk-okidac:disabled{ cursor: default; border-color: var(--ivica-polja); }
.sk-okidac:disabled::after{ background: var(--ivica-polja); }
/* panel umesto dugmadi dole: objašnjenje pre sistemskog pitanja, kamera isključena, nema kamere, nije pročitano */
.sk-panel{
  display: grid; gap: var(--razmak-8); width: 100%; max-width: var(--sirina-srednja); justify-self: center;
  margin-bottom: var(--razmak-16); padding: var(--razmak-24); border-radius: var(--radijus-grupa); background: var(--povrsina);
}
.sk-panel > p{ color: var(--tekst-2); }
.sk-panel > .dugme.glavno{ width: 100%; margin-top: var(--razmak-16); }
.sk-panel > .dugme.tiho{ justify-self: center; }
.sk-tiho-red{ display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--razmak-8); }
/* koje se vidi: svako stanje kamere ima svoj panel; dugmad dole samo dok kamera radi ili se pali */
.sk-panel{ display: none; }
.sk[data-kamera="pitaj"] .sk-panel[data-za="pitaj"],
.sk[data-kamera="odbijeno"] .sk-panel[data-za="odbijeno"],
.sk[data-kamera="nema"] .sk-panel[data-za="nema"]{ display: grid; }
.sk[data-stanje="greska"] .sk-panel{ display: none; }
.sk[data-stanje="greska"] .sk-panel[data-za="greska"]{ display: grid; }
.sk:not([data-kamera="radi"]):not([data-kamera="ukljucuje"]) .sk-dno,
.sk[data-stanje="greska"] .sk-dno{ display: none; }
.sk:not([data-kamera="radi"]):not([data-kamera="ukljucuje"]) :is(.sk-uputstvo, .sk-uputstvo-2){ display: none; }
.sk[data-stanje="greska"] :is(.sk-uputstvo, .sk-uputstvo-2){ display: none; }
.sk[data-kamera="pitaj"] .sk-okvir, .sk[data-kamera="odbijeno"] .sk-okvir, .sk[data-kamera="nema"] .sk-okvir{ margin-bottom: 0; }
/* list „Proveri podatke“ (posle slikanja): sličica + poruka, polja, sačuvaj. List nije staklo nego puna površina (24.20):
   ispod je kamera (beli okidač bi se kroz zamućenje video kao mrlja). */
/* slika je izvor za prepisivanje i poređenje: preko cele širine lista, cela (contain), u odnosu kartice */
.sk-slika-red{ display: grid; gap: var(--razmak-12); min-width: 0; }
.sk-slika-red > img{ width: 100%; height: auto; aspect-ratio: 856 / 540; border-radius: var(--radijus-unutra); object-fit: contain; background: var(--ispuna); }
.sk-slika-red > p{ font: 400 15px/20px var(--font); }
.sk-kod-oznaka{ margin-left: var(--razmak-8); vertical-align: middle; }
.sk-forma .lampica{ text-wrap: pretty; }   /* bez jedne reči u poslednjem redu */
.sk-forma > .dugme.tiho{ justify-self: center; }
/* „Sačuvaj vozilo“ je zakačeno na dnu lista (na telefonu 375 × 667 bilo je ispod ivice lista). Traka ima podlogu lista,
   preko cele širine (16 levo i desno, preko unutrašnjeg razmaka lista). bottom: 0 je ivica sadržaja lista, pa ispod
   dugmeta ostaje 16; taj pojas pokriva senka bez zamućenja iste boje, spuštena 16, da ispod dugmeta ne promiču polja.
   Kad je list skrolovan do kraja, traka stoji na svom mestu u obrascu. */
.sk-sacuvaj{
  position: sticky; bottom: 0; z-index: 1; display: grid;
  margin-inline: calc(-1 * var(--razmak-16)); padding: var(--razmak-8) var(--razmak-16) 0;
  background: var(--povrsina); box-shadow: 0 var(--razmak-16) 0 var(--povrsina);
}
/* kad je upisano svih 17 znakova, lampica se skriva i na listu skenera (mesto za dugme): sada za ceo sajt, odeljak 17 */
/* list je 2 × 21 + 2 × 16 uži od ekrana: ispod 402 kućica šasije je uska kao na telefonu od 320, pa slova 13/18
   i razmak blokova 4 (isto pravilo kao u 17 za ekran ispod 360), da W ne dodiruje crte */
@media (max-width: 401.98px){
  .sk-list .sasija-polje.ziv .sasija-kucice{ gap: var(--razmak-4); }
  .sk-list .sasija-kucica{ font: 600 13px/18px var(--font); }
}
@media (min-width: 600px){ .sk-polja{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--razmak-12); } }
@media (max-width: 599.98px){ .sk-polja{ display: grid; gap: var(--razmak-16); } }

/* ---------- 38. Pomoć (pom-: pomoc/index, kontakt, o-nama) i greške (gr-: 404, 500, bez-mreze, odrzavanje, istekla-prijava) ---------- */
.pom-uvod{ min-width: 0; }
.pom-uvod > p{ max-width: 44ch; }
@media (min-width: 960px){ .pom-uvod{ padding-block: var(--razmak-32); } }
/* raspored pomoći: telefon pretraga, pitanja, pa „Treba ti još pomoći?“; od 960 levo teme (lepe se ispod zaglavlja),
   desno pretraga, pitanja pa „Treba ti još pomoći?“ — isti red kao na telefonu */
.pom-raspored{ display: grid; gap: var(--razmak-32); align-items: start; min-width: 0; }
.pom-pitanja{ display: grid; gap: var(--razmak-32); align-content: start; min-width: 0; }
.pom-pitanja > .pretraga{ margin-bottom: calc(-1 * var(--razmak-8)); }   /* do prve teme 24, ne 32 */
/* tema sakrivena pretragom sakriva i svoj red u spisku tema; linija ide samo između vidljivih redova */
.pom-teme .red + .red::before{ display: none; }
.pom-teme .red:not([hidden]) ~ .red::before{ display: block; }
.pom-tema{ display: grid; gap: var(--razmak-12); min-width: 0; scroll-margin-top: var(--razmak-16); }
@media (min-width: 960px){
  .pom-raspored{ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--razmak-32); }
  .pom-teme{ grid-column: 1; grid-row: 1 / span 2; position: sticky; top: calc(var(--visina-zaglavlje) + var(--razmak-24)); }
  .pom-pitanja{ grid-column: 2; grid-row: 1; }
  .pom-kraj{ grid-column: 2; grid-row: 2; }
  .pom-tema{ scroll-margin-top: calc(var(--visina-zaglavlje) + var(--razmak-16)); }   /* zaglavlje se lepi uz vrh */
}
/* pitanje koje se otvara: <details class="pom-pitanje"> u .grupa — zatvoreno izgleda kao .red (52, razmak 16), strelica dole;
   otvoreno: deblje pitanje, strelica gore, odgovor (Body, sivo) i najviše jedno malo sporedno dugme. Odvajač: 24.8 */
.pom-pitanje{ position: relative; }
.pom-pitanje > summary{
  display: flex; align-items: center; gap: var(--razmak-12); min-height: var(--visina-red);
  padding: var(--razmak-12) var(--razmak-16); list-style: none; cursor: pointer;
  font: 400 17px/22px var(--font); color: var(--tekst);
  transition: background-color var(--brzo) ease;
}
.pom-pitanje > summary::-webkit-details-marker{ display: none; }
.pom-pitanje > summary::after{
  content: ""; flex: none; width: 8px; height: 8px; margin: calc(-1 * var(--razmak-4)) var(--razmak-4) 0 auto;
  border-right: 2px solid var(--tekst-2); border-bottom: 2px solid var(--tekst-2); transform: rotate(45deg);
  transition: transform var(--trajanje-kratko) var(--hitro);
}
.pom-pitanje > summary:active{ background: var(--ispuna); }
.pom-pitanje > summary:focus-visible{ outline-offset: -2px; }
.pom-pitanje[open] > summary{ font-weight: 600; }
.pom-pitanje[open] > summary::after{ margin-top: var(--razmak-4); transform: rotate(-135deg); }
.pom-odgovor{ display: grid; justify-items: start; gap: var(--razmak-12); padding: 0 var(--razmak-16) var(--razmak-16); color: var(--tekst-2); }
.pom-odgovor > p{ max-width: 60ch; }
.pom-odgovor .bedz{ vertical-align: middle; }
/* „Treba ti još pomoći?“ (pomoć) i „Za servise i firme“ (o nama): grupa sa razmakom, levo poravnato */
.pom-kartica{ justify-items: start; }
.pom-kartica > p{ max-width: 44ch; color: var(--tekst-2); }
.pom-kartica > .ik-okvir{ margin-bottom: var(--razmak-4); }
.pom-kartica > .dugme.glavno{ margin-top: var(--razmak-8); }
.pom-kartica > .dugme.tiho{ margin-left: calc(-1 * var(--razmak-8)); font-weight: 500; }
@media (min-width: 960px){ .pom-kartica > .dugme.siroko{ width: auto; } }   /* na računaru dugme ne ide preko cele kartice */
/* dve kolone (kontakt, o nama: pom-dve 24.3); stub sa razmakom 16 */
.pom-kolona{ display: grid; gap: var(--razmak-16); align-content: start; min-width: 0; }
.pom-kolona > h2{ margin-top: var(--razmak-8); }
/* „Kako radimo“ (o nama): red sa okvirom ikonice 44, naslov Headline, jedan sivi red ispod; malo više vazduha */
.pom-koraci > .red{ padding-block: var(--razmak-12); }
.pom-koraci .red-naslov{ font-weight: 600; }
.pom-podatak .red-naslov{ overflow-wrap: anywhere; }   /* red sa podatkom (kontakt): dugačka adresa se lomi */
/* obrazac poruke (kontakt): polja jedno ispod drugog, glavno dugme preko cele širine, sitan red o podacima */
.grupa.pom-obrazac{ gap: var(--razmak-16); }
.pom-obrazac > .dugme.glavno{ margin-top: var(--razmak-8); }
.pom-poslato > .ik-okvir{ background: var(--ispuna); }

/* stanje greške: krug 64 sa ikonicom (22), H1, jedna rečenica, (pretraga), jedno glavno dugme, tiho ispod (24.16) */
.gr-stanje{
  display: grid; justify-items: center; gap: var(--razmak-8); width: 100%; max-width: var(--sirina-srednja); margin-inline: auto;
  padding-block: var(--razmak-32); text-align: center;
}
.gr-stanje > .pretraga{ justify-self: stretch; margin-top: var(--razmak-16); text-align: left; }
.gr-stanje > .pretraga + .dugme.glavno{ margin-top: var(--razmak-16); }
.gr-stanje > .gr-sitno{ margin-top: var(--razmak-16); font: 400 15px/20px var(--font); }
/* 404 i 500 (sa zaglavljem i futerom, telo-klasa gr-sredina): stanje u sredini, futer na dnu */
body.gr-sredina{ display: flex; flex-direction: column; }
body.gr-sredina > #sadrzaj{ flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 960px){ body.gr-sredina .gr-stanje{ padding-block: calc(2 * var(--razmak-32)); } }
/* bez mreže i održavanje (bez zaglavlja, telo-klasa gr-cela; stub 24.2): logo gore levo, stanje u sredini ekrana */
.gr-logo{ display: flex; align-items: center; height: calc(var(--visina-zaglavlje) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
body.gr-cela .gr-stanje{ margin-block: auto; padding-bottom: var(--visina-zaglavlje); }

/* ---------- 39. Pravne strane: zk- odustanak, obrazac, reklamacije, garancija, povraćaj · zak- prodavac, uslovi, privatnost,
   kolačići · pc- isporuka, plaćanje karticom, sporovi, ocene i akcije. Sve tri ture izgledaju isto:
   napomena za pravnika + H1 + jedna siva rečenica, „Ukratko“ redovi, tekst levo (najviše 65 znakova u redu), bok desno.
     <div class="zk-strana"> <p class="ceka zk-nacrt">…</p> <div class="zk-glava">…</div>
       <div class="zk-raspored"> <section class="zk-prvo">…</section> <aside class="zk-radnja">…</aside> <div class="zk-ostalo">…</div> </div>
     </div>
     <div class="zak-strana"> <div class="zak-glava">…</div> <aside class="zak-bok">…</aside> <div class="zak-tekst">…</div> </div>
     <div class="pc-strana"> <div class="pc-glava">…</div> <section class="pc-ukratko">…</section> <nav class="pc-povezano">…</nav> <div class="pc-tekst">…</div> </div>
   ---------- */
/* zajedničko za sve tri ture */
.zak-glava, .pc-glava{ display: grid; gap: var(--razmak-8); justify-items: start; min-width: 0; grid-area: glava; }
.zak-glava > .ceka, .pc-glava > .ceka{ margin-bottom: var(--razmak-8); }
.zak-glava > p:not(.ceka), .pc-uvod{ max-width: 60ch; color: var(--tekst-2); }
/* mali sivi naslov iznad grupe („Ukratko“, „Povezano“, „Na ovoj strani“): Subhead 15/20, uvučen 16 kao tekst u redu */
.zk-bok-naslov, .zak-bok-naslov, .pc-bok-naslov{ margin: 0 0 var(--razmak-8); padding-inline: var(--razmak-16); font: 600 15px/20px var(--font); color: var(--tekst-2); }
.zak-tekst, .pc-tekst{ grid-area: tekst; display: grid; gap: var(--razmak-32); align-content: start; min-width: 0; max-width: 65ch; }
.pc-tekst{ padding-top: var(--razmak-8); }
/* odeljak teksta: h2 (Title 3), kratki pasusi i spiskovi; osnov (zakon i član) sitno i sivo */
/* sidro (npr. „Kako ređamo rezultate“ iz pretrage na ocene-i-akcije.html#redosled): naslov odeljka staje ispod
   zalepljenog zaglavlja „nazad“ — na telefonu uz rub ekrana (zaglavlje + bezbedna zona + 16), od 960 zaglavlje + 24 */
.zak-odeljak, .pc-odeljak{
  display: grid; gap: var(--razmak-12); min-width: 0;
  scroll-margin-top: calc(var(--visina-zaglavlje) + env(safe-area-inset-top, 0px) + var(--razmak-16));
}
@media (min-width: 960px){ .zak-odeljak, .pc-odeljak{ scroll-margin-top: calc(var(--visina-zaglavlje) + var(--razmak-24)); } }
.zk-odeljak > h2, .zak-odeljak > h2, .pc-odeljak > h2, .zk-obecanje h2, .zk-obrazac-naslov > h2{ font: 600 20px/25px var(--font); }
.zak-odeljak > :is(ul, ol), .pc-odeljak > :is(ul, ol):not([class]){ margin: 0; padding-left: var(--razmak-24); }
.zak-odeljak > :is(ul, ol) > li + li, .pc-odeljak > :is(ul, ol):not([class]) > li + li{ margin-top: var(--razmak-8); }
/* veze u tekstu: plave, podvučene tek na prelaz */
.zak-odeljak li a:not([class]), .pc-odeljak :is(p, li) a:not([class]), .pc-korak-opis a:not([class]){ color: var(--plava); }
.zak-odeljak li a:not([class]):hover, .pc-odeljak :is(p, li) a:not([class]):hover, .pc-korak-opis a:not([class]):hover{ text-decoration: underline; text-underline-offset: 4px; }
.zk-osnov, .zak-izvor, .pc-osnov, .zak-stanje, .zak-napomena{ font: 400 13px/18px var(--font); color: var(--tekst-2); }

/* zk-: okvir, napomena za pravnika i naslov */
.zk-strana{ display: grid; gap: var(--razmak-16); min-width: 0; padding-top: var(--razmak-16); }
.zk-strana > .zk-nacrt{ justify-self: start; }
.zk-glava{ display: grid; justify-items: start; gap: var(--razmak-8); max-width: var(--sirina-kolona); padding-bottom: var(--razmak-8); }
.zk-glava > h1{ overflow-wrap: anywhere; }
.zk-glava > p{ color: var(--tekst-2); }
@media (min-width: 960px){ .zk-strana{ padding-top: var(--razmak-24); } }
/* raspored: telefon jedna kolona (ukratko → radnja → tekst); od 960 tekst levo (5/8), radnja desno (3/8, lepi se: 24.3) */
.zk-raspored{
  display: grid; gap: var(--razmak-24); align-items: start; min-width: 0;
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "prvo" "radnja" "ostalo";
}
.zk-prvo{ grid-area: prvo; min-width: 0; }
.zk-radnja{ grid-area: radnja; display: grid; gap: var(--razmak-16); align-content: start; min-width: 0; }
.zk-ostalo{ grid-area: ostalo; display: grid; gap: var(--razmak-32); align-content: start; min-width: 0; }
@media (min-width: 960px){
  .zk-raspored{
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); grid-template-rows: auto 1fr; column-gap: var(--razmak-32);
    grid-template-areas: "prvo radnja" "ostalo radnja";
  }
  .zk-ostalo{ padding-top: var(--razmak-8); }
}
.zk-odeljak{ min-width: 0; }
.zk-odeljak > h2:first-child{ margin-top: 0; }
.zk-odeljak > .grupa{ max-width: 100%; }
.zk-clan{ color: var(--tekst-2); white-space: nowrap; }   /* „(čl. 35)“ iza rečenice: tiho, da tekst ostane čitljiv */
.zk-osnov{ max-width: 65ch; }
/* koraci: red u grupi sa brojem u okviru 44 (umesto ikonice) */
.zk-odeljak .zk-koraci{ list-style: none; margin: var(--razmak-12) 0 0; padding: 0; }   /* jače od .tekst ol (uvlaka 24) */
.zk-odeljak .zk-koraci > li + li{ margin-top: 0; }
.zk-broj{ font: 600 17px/22px var(--font); font-variant-numeric: tabular-nums; }
.zk-koraci .red, .zk-slucajevi .red{ align-items: flex-start; padding-block: var(--razmak-12); }
.zk-koraci .red > .ik-okvir, .zk-slucajevi .red > .ik-okvir{ margin-top: 2px; }
.zk-slucajevi a.red::after{ align-self: center; }
/* red sa žutom kvačicom „odgovara“ umesto ikonice (povracaj): linija iznad počinje gde i tekst (16 + 24 + 12) */
.zk-strana .red + .red:has(> .kvacica-odgovara:first-child)::before{ left: calc(var(--razmak-16) + 24px + var(--razmak-12)); }
.zk-koraci .red-opis .ceka, .zk-slucajevi .red-opis .ceka{ display: flex; width: fit-content; margin-top: var(--razmak-4); }   /* podatak koji fali: svoj red */
/* radnja (desno na računaru): jedno glavno dugme, sitna veza ispod, pa grupa veza */
.zk-radnja-dugme{ display: grid; gap: var(--razmak-12); }
.zk-radnja-dugme > .t-sitno{ padding-inline: var(--razmak-8); }
.zk-povezano{ min-width: 0; }
/* obećanje „Odgovara ili vraćamo novac“ (garancija): žuta kvačica „odgovara“ levo od teksta */
.grupa.zk-obecanje{ display: flex; align-items: flex-start; gap: var(--razmak-12); }
.zk-obecanje > .kvacica-odgovara{ margin-top: 2px; }
.zk-obecanje > div{ display: grid; gap: var(--razmak-8); min-width: 0; }
/* obrazac za odustanak: dokument u grupi, za ekran i za papir */
.zk-obrazac{ gap: var(--razmak-20); }
.zk-obrazac-naslov{ display: grid; gap: var(--razmak-4); }
.zk-deo{ display: grid; gap: var(--razmak-16); min-width: 0; }
.zk-deo-naslov{ font: 600 13px/18px var(--font); color: var(--tekst-2); }
.zk-deo + .zk-deo{ padding-top: var(--razmak-20); box-shadow: inset 0 var(--linija) 0 var(--odvajac); }
.zk-dva{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--razmak-16); }
@media (min-width: 600px){ .zk-dva{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zk-opciono{ margin-left: var(--razmak-4); font-weight: 400; color: var(--tekst-2); }
/* potpis: na ekranu samo linija (potpisuje se olovkom na papiru); okvir kao polje tek na papiru */
.zk-potpis{ height: var(--visina-polje); border-bottom: 1px solid var(--ivica-polja); }
/* podaci trgovca: natpis (sitno, sivo) iznad vrednosti, kao na papirnom obrascu; dug naziv firme se lomi. Natpis i
   vrednost stoje na vrhu polja: kad se adresa prelomi u dva reda, susedni „Telefon“ ne pada niže. */
.zk-trgovac{ display: grid; gap: var(--razmak-12); margin: 0; }
.zk-trgovac > div{ display: grid; gap: 2px; align-content: start; min-width: 0; }
.zk-trgovac dt{ font: 400 13px/18px var(--font); color: var(--tekst-2); }
.zk-trgovac dd{ margin: 0; overflow-wrap: anywhere; }
.zk-trgovac dd > .ceka{ justify-self: start; }
@media (min-width: 600px){
  .zk-trgovac{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--razmak-16); }
  .zk-trgovac > div:first-child{ grid-column: 1 / -1; }
}
/* štampa obrasca: samo dokument, svetla tema (JS pre štampe stavlja data-tema="svetla" na <html>) */
@media print{
  .zk-stampa .zaglavlje, .zk-stampa .futer, .zk-stampa .traka-dole, .zk-stampa .skoci,
  .zk-stampa .zk-nacrt, .zk-stampa .zk-glava, .zk-stampa .zk-radnja, .zk-stampa .zk-ostalo, .zk-stampa .lampica{ display: none !important; }
  .zk-stampa, .zk-stampa #sadrzaj{ background: var(--povrsina); padding: 0; }
  .zk-stampa .zk-strana{ padding-top: 0; }
  .zk-stampa .zk-obrazac{ padding: 0; border-radius: 0; }
  .zk-stampa .polje textarea{ resize: none; }
  .zk-stampa .zk-potpis{ border: 1px solid var(--ivica-polja); border-radius: var(--radijus-unutra); }
  /* jedan list papira (dugme „Štampaj“ i alat/obrazac-pdf.mjs): visina koliko sadržaj (ne bar koliko ekran) i bez praznih
     redova skrivenih delova rasporeda, inače ostaje prazna druga strana; podloga bela; linija između dva dela obrasca je
     obična ivica (unutrašnja senka u PDF-u ostavlja tanke bočne crte) */
  html:has(> body.zk-stampa){ background: var(--povrsina); }
  body.zk-stampa{ min-height: 0; }
  .zk-stampa .zk-raspored{ gap: 0; }
  .zk-stampa .zk-deo + .zk-deo{ box-shadow: none; border-top: 1px solid var(--odvajac); }
  /* datum: na papiru bez ikonice kalendara; prazan datum (data-prazno) je prazno polje za ručni upis, ne „dd. mm. yyyy.“ */
  .zk-stampa input[type="date"]::-webkit-calendar-picker-indicator{ display: none; }
  .zk-stampa input[type="date"][data-prazno]::-webkit-datetime-edit{ color: transparent; }
  .zk-stampa input[type="date"][data-prazno]{ color: transparent; }
}

/* zak-: telefon nacrt, naslov, ukratko, sadržaj (jedan sklopljen red), tekst. Od 960: tekst levo (2/3), bok desno (1/3);
   „ukratko“ odlazi sa skrolom, a sadržaj strane se lepi uz vrh dok čitaš (24.3). Prodavac i kolačići: .zak-pola, dve kolone. */
.zak-strana{
  display: grid; gap: var(--razmak-32); min-width: 0; padding-top: var(--razmak-8);
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "glava" "bok" "tekst";
}
.zak-glava > h1{ overflow-wrap: anywhere; }
.zak-bok{ grid-area: bok; display: grid; gap: var(--razmak-16); align-content: start; min-width: 0; }
@media (min-width: 960px){
  .zak-strana{
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "glava glava" "tekst bok";
    column-gap: var(--razmak-32); row-gap: var(--razmak-24); padding-top: var(--razmak-24); align-items: start;
  }
  .zak-bok{ align-self: stretch; gap: var(--razmak-24); }   /* kolona visoka koliko tekst, da sadržaj strane može da se lepi */
}
.zak-ukratko{ min-width: 0; }
/* sadržaj strane (uslovi, privatnost): telefon jedan red „Na ovoj strani“ sa strelicom dole, otvara spisak;
   od 960 stalno otvoren (skripta strane), naslov kao „Ukratko“, spisak u grupi, lepi se uz vrh */
.zak-sadrzaj{ min-width: 0; }
.zak-sadrzaj > details{ background: var(--povrsina); border-radius: var(--radijus-grupa); overflow: hidden; }
.zak-sadrzaj summary{
  list-style: none; display: flex; align-items: center; gap: var(--razmak-12); min-height: var(--visina-red);
  padding: var(--razmak-8) var(--razmak-16); cursor: pointer; font: 600 17px/22px var(--font);
  transition: background-color var(--brzo) ease;
}
.zak-sadrzaj summary::-webkit-details-marker{ display: none; }
.zak-sadrzaj summary > span{ flex: 1; min-width: 0; }
.zak-sadrzaj summary > .ik{ color: var(--tekst-2); transition: transform var(--brzo) ease; }
.zak-sadrzaj details[open] > summary > .ik{ transform: rotate(180deg); }
.zak-sadrzaj summary:active{ background: var(--ispuna); }
.zak-sadrzaj summary:focus-visible{ outline-offset: -2px; }
.zak-lista > li{ margin: 0; }
.zak-lista .red{ justify-content: space-between; min-height: var(--prst); font: 400 15px/20px var(--font); }   /* tekst levo, strelica desno */
.zak-lista .red[aria-current]{ font-weight: 600; }   /* odeljak koji čitaš (skripta strane) */
@media (min-width: 960px){
  .zak-sadrzaj > details{
    background: none; border-radius: 0; overflow: visible;
    max-height: calc(100vh - var(--visina-zaglavlje) - var(--razmak-24) - var(--razmak-24)); overflow-y: auto;
  }
  .zak-sadrzaj summary{
    min-height: 0; margin-bottom: var(--razmak-8); padding: 0 var(--razmak-16);
    pointer-events: none; cursor: default; font: 600 15px/20px var(--font); color: var(--tekst-2);
  }
  .zak-sadrzaj summary > .ik{ display: none; }
  .zak-lista{ background: var(--povrsina); border-radius: var(--radijus-grupa); overflow: hidden; }
  .zak-lista > li:first-child > .red::before{ display: none; }
}
.zak-odeljak > h2:focus{ outline: none; }
/* kartice „šta, zašto, koliko dugo“ (privatnost): grupa sa razmakom, h3 + <dl> */
.zak-kartice{ display: grid; gap: var(--razmak-12); min-width: 0; }
.zak-kartica{ scroll-margin-top: calc(var(--visina-zaglavlje) + var(--razmak-16)); }
.zak-kartica > h3{ font: 600 17px/22px var(--font); }
.zak-dl{ display: grid; gap: var(--razmak-8); margin: 0; }
.zak-dl > div{ display: grid; min-width: 0; }   /* natpis i vrednost: razmak daje visina reda (18 + 20) */
.zak-dl dt{ font: 400 13px/18px var(--font); color: var(--tekst-2); }
.zak-dl dd{ margin: 0; font: 400 15px/20px var(--font); overflow-wrap: anywhere; }
@media (min-width: 600px){
  .zak-dl > div{ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--razmak-12); align-items: baseline; }
}
/* prodavac i kolačići: dve kolone od 960 (zak-kolona: 24.3), blok = naslov (Headline) + grupa */
.zak-strana.zak-pola{ grid-template-areas: none; }
.zak-strana.zak-pola > .zak-glava{ grid-area: auto; }
@media (min-width: 960px){
  .zak-strana.zak-pola{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zak-strana.zak-pola > .zak-glava{ grid-column: 1 / -1; }
}
.zak-blok{ display: grid; gap: var(--razmak-8); align-content: start; min-width: 0; }
.zak-blok > h2{ font: 600 17px/22px var(--font); }
.zak-stanje:empty{ display: none; }
.zak-blok > .zak-napomena .ceka{ margin-top: var(--razmak-4); }
/* podatak firme: natpis iznad vrednosti, duga vrednost (naziv firme) se lomi, ne beži u stranu; ključ kolačića isto */
.zak-podatak .red-naslov, .zak-kljuc{ overflow-wrap: anywhere; }
.zak-podatak .red-opis{ font: 400 13px/18px var(--font); }

/* pc-: telefon nacrt i naslov, ukratko, povezano, odeljci. Od 960: levo (5/8) ukratko pa odeljci, desno (3/8) povezano (lepi se: 24.3) */
.pc-strana{
  display: grid; gap: var(--razmak-24); min-width: 0; padding-top: var(--razmak-16);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "glava" "ukratko" "povezano" "tekst";
}
.pc-glava > .pc-znaci{ margin-top: var(--razmak-8); }   /* placanje-karticom: znaci kartica ispod uvoda */
.pc-ukratko{ grid-area: ukratko; min-width: 0; }
.pc-povezano{ grid-area: povezano; min-width: 0; }
/* red-link u <li>: odvajač kao .red + .red u grupi (redovi nisu braća), počinje gde i tekst (16 + 24 + 12) */
.pc-povezano ul.grupa > li{ position: relative; }
.pc-povezano ul.grupa > li + li::before{ content: ""; position: absolute; z-index: 1; top: 0; left: 52px; right: 0; height: var(--linija); background: var(--odvajac); }
.pc-ukratko .red-opis .ceka{ margin-top: var(--razmak-4); }
@media (min-width: 960px){
  .pc-strana{
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); grid-template-rows: auto auto 1fr;
    grid-template-areas: "glava glava" "ukratko povezano" "tekst povezano";
    column-gap: var(--razmak-32); padding-top: var(--razmak-24); align-items: start;
  }
}
.pc-odeljak > .dugme{ justify-self: start; }
/* obaveštenje koje zakon traži da bude „lako uočljivo“ (sporovi): grupa sa ikonicom i jednom rečenicom */
.pc-obavestenje{ display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--razmak-12); }
.pc-obavestenje > p{ font: 600 17px/22px var(--font); }
/* znaci kartica (placanje-karticom): tekst u kapsulama dok banka ne da zvanične znake */
.pc-znaci{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--razmak-8); }
/* koraci: brojevi u krugu 24, tekst 12 desno od kruga (kako ide plaćanje, kako do rešenja spora) */
.pc-koraci{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--razmak-16); counter-reset: pc-korak; }
.pc-koraci > li{ position: relative; display: grid; gap: var(--razmak-4); min-width: 0; padding-left: calc(24px + var(--razmak-12)); counter-increment: pc-korak; }
.pc-koraci > li::before{
  content: counter(pc-korak); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ispuna-jaka); color: var(--tekst);
  font: 600 13px/18px var(--font); font-variant-numeric: tabular-nums;
}
.pc-koraci + p{ margin-top: var(--razmak-4); }   /* rečenica posle koraka: isti razmak kao između koraka (12 + 4) */
.pc-korak-naslov{ font: 600 17px/22px var(--font); }
.pc-korak-opis{ font: 400 15px/20px var(--font); color: var(--tekst-2); }
/* ista komponenta u odeljku sa običnim spiskovima (uslovi: .zak-odeljak; odustanak i reklamacije: .zk-odeljak.tekst):
   bez uvlake i razmaka spiska (.zak-odeljak > ol, .tekst ol); razmak između koraka daje mreža (16). U .zk-odeljak od
   naslova 12 i do rečenice ispod 16, kao u .pc-odeljak; podatak koji fali (.ceka) se ne razvlači. */
:is(.zak-odeljak, .zk-odeljak) > .pc-koraci{ padding: 0; }
:is(.zak-odeljak, .zk-odeljak) > .pc-koraci > li + li{ margin-top: 0; }
.zk-odeljak > .pc-koraci{ margin-top: var(--razmak-12); }
.zk-odeljak > .pc-koraci + p{ margin-top: var(--razmak-16); }
.zk-odeljak > .pc-koraci > li > .ceka{ justify-self: start; }

/* ---------- 40. Sadržaj (ocene, nagrade, firme, preuzimanje, vodici/index, vodici/gde-je-sasija): uvod 24.1, stub 24.3 ---------- */
/* raspored: telefon jedna kolona; od 960 glavno levo (7/12), strana desno (5/12) */
.sd-raspored{ display: grid; gap: var(--razmak-32); align-items: start; min-width: 0; }
@media (min-width: 960px){
  .sd-raspored{ grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  /* crtež ili istaknuta kartica ostaje na ekranu dok se čita desna kolona (ispod zaglavlja + 16) */
  .sd-lepi{ position: sticky; top: calc(var(--visina-zaglavlje) + var(--razmak-16)); }
  /* tri dela: na telefonu redom 1-2-3, na računaru 1 i 3 levo, 2 desno uz 1 (preuzimanje; nagrade);
     višak visine desne kolone ide u drugi red, pa deo 3 stoji odmah ispod dela 1 (bez rupe) */
  .sd-raspored.tri-dela{ grid-template-rows: auto 1fr; }
  .sd-raspored.tri-dela > :nth-child(1){ grid-column: 1; grid-row: 1; }
  .sd-raspored.tri-dela > :nth-child(2){ grid-column: 2; grid-row: 1 / span 2; }
  .sd-raspored.tri-dela > :nth-child(3){ grid-column: 1; grid-row: 2; }
}
/* odeljak: tihi naslov (Headline) pa grupa; bez gornje margine, razmak daje kolona; napomena ispod grupe 24.5 */
.sd-odeljak{ display: grid; gap: var(--razmak-12); min-width: 0; }
.sd-odeljak > h2{ font: 600 17px/22px var(--font); }
.sd-odeljak .red-opis .ceka{ margin-top: var(--razmak-4); }   /* red koji nije link: opis sme da nosi .ceka */
.sd-odeljak .red > .bedz{ align-self: center; }   /* tihi natpis „uskoro“ u redu (firme) */
/* radnje strane: jedno glavno + jedan tihi link; telefon puna širina, računar levo */
.sd-radnje{ display: grid; justify-items: stretch; gap: var(--razmak-12); min-width: 0; }
@media (min-width: 600px){
  .sd-radnje{ grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--razmak-16); }
  .sd-radnje > .dugme.tiho{ margin-left: 0; }
}
/* istaknuta kartica (nagrade: mali + veliki servis): jedina glasna stvar na strani */
.sd-istaknuto{
  display: grid; justify-items: start; gap: var(--razmak-12); min-width: 0;
  padding: var(--razmak-24) var(--razmak-20); border-radius: var(--radijus-grupa); background: var(--povrsina);
}
.sd-istaknuto > .ik-okvir{ margin-bottom: var(--razmak-4); }
.sd-istaknuto > h2{ font: 700 22px/28px var(--font); }
.sd-istaknuto > p{ color: var(--tekst-2); }
.sd-istaknuto > .dugme{ justify-self: stretch; margin-top: var(--razmak-8); }
@media (min-width: 600px){ .sd-istaknuto > .dugme{ justify-self: start; } }
/* šta dobijaš: ikonica + tekst, jedno ispod drugog */
.sd-dobijas{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--razmak-12); justify-self: stretch; }
.sd-dobijas > li{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--razmak-8) var(--razmak-12); font: 600 17px/22px var(--font); }
.sd-dobijas > li > .ceka{ font-weight: 400; }
/* podaci u grupi: naziv (sivo, Subhead) iznad vrednosti (Body); odvajač 24.8 */
.sd-podaci{ margin: 0; }
.sd-podatak{ position: relative; display: grid; gap: 2px; padding: var(--razmak-12) var(--razmak-16); }
.sd-podatak > dt{ font: 400 15px/20px var(--font); color: var(--tekst-2); }
.sd-podatak > dd{ margin: 0; font: 400 17px/22px var(--font); }
.sd-podatak > dd > .ceka{ margin-top: 2px; }
/* koraci 1-2-3 (preuzimanje): broj u krugu 28, naslov Headline, opis Subhead */
.sd-koraci{ list-style: none; margin: 0; padding: var(--razmak-16); display: grid; gap: var(--razmak-20); counter-reset: sd-korak; }
.sd-koraci > li{ display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--razmak-12); row-gap: 2px; counter-increment: sd-korak; }
.sd-koraci > li::before{
  content: counter(sd-korak); grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--tekst); color: var(--povrsina); font: 600 15px/20px var(--font); font-variant-numeric: tabular-nums;
}
.sd-korak-naslov{ font: 600 17px/22px var(--font); align-self: center; }
.sd-korak-opis{ grid-column: 2; font: 400 15px/20px var(--font); color: var(--tekst-2); }
/* vodič kao kartica (vodici/index): crtež, naslov, opis, „Pročitaj“ */
.sd-vodic{
  display: grid; gap: var(--razmak-20); min-width: 0; padding: var(--razmak-16);
  border-radius: var(--radijus-grupa); background: var(--povrsina); color: var(--tekst); text-decoration: none;
  transition: transform var(--trajanje) var(--hitro);
}
a.sd-vodic:active{ transform: scale(.98); transition-duration: var(--trajanje-pritisak); }
.sd-vodic-tekst{ display: grid; gap: var(--razmak-4); padding-inline: var(--razmak-4); }
.sd-vodic-tekst > .kartica-naslov{ font: 700 22px/28px var(--font); }
.sd-vodic-dalje{ display: inline-flex; align-items: center; gap: var(--razmak-4); min-height: var(--prst); padding-inline: var(--razmak-4); font: 600 15px/20px var(--font); }
/* crtež u kartici vodiča: koncentričan radijus (grupa 26 − razmak 16 = unutra 10) */
.sd-vodic .sd-karta{ border-radius: var(--radijus-unutra); background: var(--pozadina); box-shadow: inset 0 0 0 1px var(--odvajac); }
/* crtež zadnje strane saobraćajne (gde je broj šasije): samo polja o vozilu (D.1, D.3, E, P.1). Polje E je uokvireno
   bojom teksta; 17 kućica u tri bloka 3 · 6 · 8, kao polje za broj šasije. Bez žute: žuta kvačica znači samo „odgovara“. */
.sd-slika{ display: grid; gap: var(--razmak-12); min-width: 0; }
.sd-slika > figcaption{ font: 400 13px/18px var(--font); color: var(--tekst-2); padding-inline: var(--razmak-4); }
.sd-karta{
  display: grid; align-content: center; gap: var(--razmak-12); min-width: 0;
  padding: var(--razmak-16); border-radius: 16px;   /* isti radijus kao crtež saobraćajne u garaži (.sb-karta) */
  background: var(--povrsina); box-shadow: inset 0 0 0 1px var(--odvajac), var(--staklo-senka-mala);
}
.sd-karta-naslov{ font: 600 13px/18px var(--font); color: var(--tekst-2); }
.sd-polje{ display: flex; align-items: center; gap: var(--razmak-12); min-width: 0; }
.sd-kod{ flex: none; width: 32px; font: 600 13px/18px var(--font); color: var(--tekst); font-variant-numeric: tabular-nums; }
.sd-ime{ flex: none; font: 400 13px/18px var(--font); color: var(--tekst-2); }
.sd-crta{ flex: 0 1 45%; min-width: 0; height: 8px; border-radius: 6px; background: var(--ispuna-jaka); }   /* radijus kostur-crte; na visini 8 daje kapsulu */
.sd-crta.kratka{ flex-basis: 28%; }
/* polje E: okvir boje teksta, natpis pun i deblji, kućice ispod preko cele širine */
.sd-polje-e{ flex-wrap: wrap; row-gap: var(--razmak-8); padding: var(--razmak-12); margin-inline: calc(-1 * var(--razmak-12)); border-radius: var(--radijus-unutra); box-shadow: inset 0 0 0 2px var(--tekst); }
.sd-polje-e > .sd-kod{ font-size: 15px; line-height: 20px; }
.sd-polje-e > .sd-ime{ color: var(--tekst); font: 600 15px/20px var(--font); }
.sd-kucice{ flex: 1 0 100%; display: grid; grid-template-columns: 3fr 6fr 8fr; gap: var(--razmak-4); height: 28px; min-width: 0; }
.sd-blok{ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--tekst); border-radius: 6px; overflow: hidden; background: var(--povrsina); }
.sd-blok > span + span{ box-shadow: inset var(--linija) 0 0 var(--odvajac); }
@media (min-width: 600px){
  .sd-slika > .sd-karta{ aspect-ratio: 1.586; align-content: space-between; padding: var(--razmak-24) var(--razmak-32); gap: var(--razmak-16); }
  .sd-slika .sd-karta-naslov, .sd-slika .sd-kod, .sd-slika .sd-ime{ font-size: 15px; line-height: 20px; }
  .sd-slika .sd-polje-e > .sd-kod, .sd-slika .sd-polje-e > .sd-ime{ font-size: 17px; line-height: 22px; }
  .sd-slika .sd-kucice{ height: 36px; gap: var(--razmak-8); }
}
/* mala kartica u vodiču (vodici/index): bez natpisa P.1, sitnije */
.sd-karta.mala{ gap: var(--razmak-8); padding: var(--razmak-16) var(--razmak-20); }
.sd-karta.mala .sd-polje-e{ padding: var(--razmak-8) var(--razmak-12); }
.sd-karta.mala .sd-polje-e > .sd-kod, .sd-karta.mala .sd-polje-e > .sd-ime{ font-size: 13px; line-height: 18px; }
.sd-karta.mala .sd-kucice{ height: 24px; }

/* ---------- 41. Smanji pokret: samo pretapanje (0,2 s) — važi za ceo fajl, zato je na kraju ---------- */
@keyframes sasija-pretapanje{ from{ opacity: 0; } to{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-property: opacity, color, background-color, border-color, box-shadow !important;
    animation-name: sasija-pretapanje !important; animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* trajanje i kriva moraju da se zadaju posebno: zamena spiska svojstava bi inače pomerila trajanja (opacity bi dobio 0,6 s) */
  .dugme, .dugme-okruglo, .pilule-klizac, .red, .prekidac, .prekidac::after, .traka-dole a, .kartica-kompleta, .plocica, .vozilo,
  .sasija-kucica, .ponuda-opcija, .ponuda-opcija input, .kolicina > button, .sheet, .sheet::backdrop, .poruka-kratka,
  .rs-meni-lista a, .rs-cip, .rs-meni-lista:popover-open, .rs-meni-strelica > .ik, .rsb-otvori,
  .pom-pitanje > summary, .pom-pitanje > summary::after, .sd-vodic{
    transition-duration: var(--brzo) !important; transition-timing-function: ease !important;
  }
  .sasija-kucica.legne > span, .kvacica-odgovara circle, .kvacica-odgovara path, .kostur{ animation-duration: var(--brzo) !important; }
  .dugme:active, .dugme-okruglo:active, a.kartica-kompleta:active, a.plocica:active, a.vozilo:active,
  a.sd-vodic:active, .ga-vozilo:has(.ga-izbor:active){ transform: none; }
  .ga-krug{ transition: none; }
  /* početna, crtež saobraćajne: ništa se ne pomera, sve se samo pretopi, odjednom */
  .sc-spremno .kvacica-odgovara path{ stroke-dashoffset: 0; opacity: 0; }
  .sc-igra .sc-ugao, .sc-igra .sc-blok > i::after, .sc-igra .kvacica-odgovara :is(circle, path){
    animation: sasija-pretapanje var(--brzo) ease both !important;
  }
}

/* ===== dodatak: dizajn/dodaci/90-okvir.css ===== */
/* 90-okvir.css — okvir strane: traka za kolačiće (dizajn/saglasnost.js; blok <!-- saglasnost --> u src/delovi/okvir.html).
   Kartica na dnu ekrana: površina, radijus 26, razmak 16; na telefonu iznad trake dole (21 od ivica, kao traka), na
   računaru na sredini dna, najšire 640. Rečenica Subhead 15/20 sa vezom „Kolačići“ (link u tekstu), ispod dva dugmeta
   iste težine i iste širine (.dugme.sporedno.malo). Bez žute: glavno dugme ima strana. */
.okv-traka{
  position: fixed; z-index: 45;
  left: max(var(--traka-uvlaka), env(safe-area-inset-left, 0px)); right: max(var(--traka-uvlaka), env(safe-area-inset-right, 0px));
  bottom: var(--traka-dole); max-width: var(--sirina-srednja); margin-inline: auto;
  display: grid; gap: var(--razmak-12); padding: var(--razmak-16);
  border-radius: var(--radijus-grupa); background: var(--povrsina); color: var(--tekst);
  box-shadow: inset 0 0 0 var(--linija) var(--staklo-ivica), var(--staklo-senka);
}
.okv-traka > p{ font: 400 15px/20px var(--font); }
.okv-traka-dugmad{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--razmak-8); }
@media (max-width: 959.98px){
  body:has(> .traka-dole) .okv-traka{ bottom: calc(var(--traka-dole) + var(--visina-traka) + var(--razmak-12)); }
}
@media (min-width: 960px){ .okv-traka{ bottom: var(--razmak-24); max-width: var(--sirina-kolona); } }   /* rečenica u jednom redu */
@media print{ .okv-traka{ display: none !important; } }
/* dok je traka otvorena, kraj strane mora da može da se izvuče iznad nje: visinu trake meri saglasnost.js
   (--okv-traka-visina), a telo dobija toliko donjeg razmaka više, plus 16 */
body:has(> .okv-traka:not([hidden])){ padding-bottom: calc(var(--okv-traka-visina, 0px) + var(--traka-dole) + var(--razmak-16)); }
@media (max-width: 959.98px){
  body:has(> .traka-dole):has(> .okv-traka:not([hidden])){ padding-bottom: calc(var(--okv-traka-visina, 0px) + var(--traka-dole) + var(--visina-traka) + var(--razmak-12) + var(--razmak-16)); }
}
@media (min-width: 960px){ body:has(> .okv-traka:not([hidden])){ padding-bottom: calc(var(--okv-traka-visina, 0px) + var(--razmak-24) + var(--razmak-16)); } }

/* ===== dodatak: dizajn/dodaci/92-radni-sto.css ===== */
/* ---------- Radni sto, dodatak 20. 10. 2026 (oblast „radni-sto“, predmetak rsd-): samo tokeni iz sasija.css ---------- */

/* Plan za povredu podataka (Zahtevi o privatnosti): koraci su uputstvo, ne stanje — naslov koraka punom bojom,
   krug ostaje prazan (tok, odeljak 18). */
.tok.rsd-plan > li .tok-naslov{ color: var(--tekst); }

/* Evidencija obrade: redovi koji važe za sve obrade (rukovalac, van Srbije, zaštita) ispod tabele, u istom sklopu */
.rsd-ispod-tabele{ margin-top: var(--razmak-12); }

/* ===== dodatak: dizajn/dodaci/93-nalog.css ===== */
/* =====================================================================================================
   šasija.rs · dodatak 93 · Nalog (20. 10. 2026)
   Strane: nalog/brisanje.html (drugi put bez prijave), ocene.html (tvoja ocena: ostavi i obriši).
   Samo tokeni i mere iz dizajn/sasija.css i dizajn/mere.json. Postojeće komponente (.grupa, .red, .polje, .pilule,
   .dugme, .sheet, .prazno, .bedz) se ne menjaju; ovde je samo raspored oko njih.
   ===================================================================================================== */

/* Obriši nalog, gost: „Ne možeš da se prijaviš?“ odmah ispod žutog dugmeta (telefon: u sredini; računar: levo, kao dugme) */
.np-stog > .nb-bez-prijave{ justify-self: center; margin-top: 0; }
@media (min-width: 960px){ .np-stog > .nb-bez-prijave{ justify-self: start; padding-inline: var(--razmak-8); } }

/* Tvoja ocena (ocene.html#tvoja-ocena, i iz Nalog → Privatnost): naslov odeljka ne ostaje ispod zaglavlja */
.oc-tvoja{ scroll-margin-top: calc(var(--visina-zaglavlje) + env(safe-area-inset-top, 0px) + var(--razmak-16)); }
@media (min-width: 960px){ .oc-tvoja{ scroll-margin-top: calc(var(--visina-zaglavlje) + var(--razmak-24)); } }
/* naslovi koji dobiju fokus posle slanja i brisanja (tabindex="-1"): bez okvira, kao .np-gotovo */
.oc-tvoja > h2:focus, .sd-uvod > h1[tabindex]:focus{ outline: none; }
/* red sa ocenom: dugme „Obriši“ se ne skuplja; komentar čuva redove i lomi dugačke reči */
.oc-lista .red > .dugme{ flex: none; }
.oc-komentar{ white-space: pre-line; overflow-wrap: anywhere; }

/* ===== dodatak: dizajn/dodaci/94-kupovina.css ===== */
/* Kupovina (oblast „kupovina“, 20. 10. 2026): korpa, kupovina/*, porudzbine/*, app/povratak-iz-banke. Samo tokeni.
   Osnova je u sasija.css, odeljci 28, 30 i 31 (kp-, ishod, placanje, por-); ovde je samo ono što je dodato posle revizije. */

/* Plaćanje (kartica-*, povratak iz banke): „Prodavac“ je veza na Podatke o prodavcu (rečnik). Dodir 44, a red u zbiru
   ostaje skoro iste visine (površina za dodir ide u razmak između redova). */
.placanje .zbir dd > a{ display: inline-flex; align-items: center; min-height: var(--prst); margin-block: calc(-1 * var(--razmak-8)); }

/* ===== dodatak: dizajn/dodaci/95-katalog.css ===== */
/* =====================================================================================================
   95-katalog · oblast „katalog“ (početna, kategorije, pretraga, artikal, kompleti, vozila, sadržaj) · 20. 10. 2026
   Samo tokeni iz sasija.css. Pri sledećem spajanju dodataka: početna u odeljak 33, izbor vozila u 29/34, nagrade u 40.
   ===================================================================================================== */

/* početna: kompleti za servis (mali i veliki) — dve kartice u redu i na telefonu i na računaru */
.pa-kompleti{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--razmak-8); min-width: 0; }
@media (min-width: 600px){ .pa-kompleti{ gap: var(--razmak-12); } }
/* tihi link ispod koraka („Izaberi marku i model“): levo, tekst u liniji sa koracima, siva strelica bliže reči */
.pa-rucno{ justify-self: start; gap: var(--razmak-4); margin: calc(-1 * var(--razmak-8)) 0 0 calc(-1 * var(--razmak-8)); font-weight: 500; }
.pa-rucno > .ik{ color: var(--tekst-2); }
/* kupuješ bez brige: četiri činjenice (dostava, preuzimanje, plaćanje, odustanak) jedna pored druge na računaru */
@media (min-width: 960px){ .pa-cinjenice{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* izbor vozila kao jedan red (kategorije/kocnice, kompleti/mali-servis): <details>, u <summary> red vozila (.vozilo,
   „Promeni“); obrazac se otvara na dodir. U obrascu kompleta (u .grupa) red nema svoju podlogu ni unutrašnji razmak. */
.kat-vozilo{ max-width: var(--sirina-kolona); }
.kat-izbor{ min-width: 0; }
.kat-izbor > summary{ list-style: none; cursor: pointer; }
.kat-izbor > summary::-webkit-details-marker{ display: none; }
.kat-izbor > summary:active{ transform: scale(.98); transition-duration: var(--trajanje-pritisak); }
.kat-izbor[open] > summary{ margin-bottom: var(--razmak-12); }
.ko-forma .kat-izbor > summary.vozilo{ min-height: var(--prst); padding: 0; border-radius: 0; }

/* nagrade: veza u vrednosti podatka („Program vodi“ → Podaci o prodavcu) ima dodir 44; tekst stoji kao u ostalim
   redovima (odmah ispod naziva), a površina za dodir ide naniže, u razmak reda (ne preko naziva iznad) */
.sd-podatak > dd > a{ display: inline-flex; align-items: flex-start; min-height: var(--prst); margin-bottom: calc(-1 * var(--razmak-12)); }

/* ===== dodatak: dizajn/dodaci/96-upit-garaza.css ===== */
/* Upit i garaža (upit/novi, upit/status, garaza/*, app/*) — 20. 10. 2026. Samo tokeni iz sasija.css. */

/* Tok upita kao primer (upit/status.html?primer=1): traka „primer“ (.primer-traka, odeljak 32) stoji kao na strani
   vozila: 8 ispod zaglavlja (na računaru 32), a do naslova 32 (16 ovde i 16 uvoda strane). */
.upit-primer{ margin-block: var(--razmak-8) var(--razmak-16); }
@media (min-width: 960px){ .upit-primer{ margin-top: var(--razmak-32); } }

/* Dodaj vozilo: pilula „Broj šasije“ (rečnik) staje i kad je izabrana na telefonu širokom 360 i 375 (izmereno: izabrana
   traži 73,2, a imala je 68 i 73). Sadržaj pilule je u sredini, pa manji razmak sa strane menja nešto tek kad je tesno. */
.dv-nacin > label{ padding-inline: var(--razmak-4); }

/* ===== dodatak: dizajn/dodaci/97-pomoc.css ===== */
/* Pomoć i greške (oblast „pomoc-greske“, 20. 10. 2026): pomoc/index · greske/404 i 500. Samo tokeni.
   Osnova je u sasija.css, odeljak 38 (pom-, gr-); ovde je samo ono što je dodato posle revizije. */

/* Pomoć: „Pitaj pomoćnika“ je glavno dugme strane, u uvodu ispod rečenice. Kao u heroju (odeljak 15):
   na telefonu preko cele širine do 420, od 600 široko koliko natpis. */
.pom-uvod > .dugme.glavno{ margin-top: var(--razmak-16); width: 100%; max-width: var(--sirina-mala); }
@media (min-width: 600px){ .pom-uvod > .dugme.glavno{ width: auto; } }
/* „Treba ti još pomoći?“: Kontakt je sporedno dugme (glavno dugme strane je „Pitaj pomoćnika“), isti razmak kao ranije */
.pom-kartica > .dugme.sporedno{ margin-top: var(--razmak-8); }

/* Greške 404 i 500 (zaglavlje i futer, telo-klasa gr-sredina): stanje stoji u sredini prvog ekrana, isto kao na
   „Održavanje“ i „Prijava je istekla“ (gr-cela), a futer počinje tek ispod prvog ekrana. Donji razmak stanja je visina
   zaglavlja (kao kod gr-cela), pa je sredina stanja tačno na sredini ekrana i na telefonu i na računaru. */
body.gr-sredina > #sadrzaj{
  min-height: calc(100vh - var(--visina-zaglavlje));
  min-height: calc(100dvh - var(--visina-zaglavlje) - env(safe-area-inset-top, 0px));
}
body.gr-sredina .gr-stanje{ padding-block: var(--razmak-32) var(--visina-zaglavlje); }