/* Okvir web demoa: monitor sa Atos kasom i termalni štampač sa strane.
   Namjerno tamna „studio" pozadina — svijetli POS ekran tako izgleda kao uređaj
   na pultu, a ne kao još jedna sekcija sajta. */

:root {
  /* ══ TEMA SAJTA ═══════════════════════════════════════════════════════════
     Ovo je tamna tema rubik.me, prepisana iz `css/global.css` na sajtu
     (`[data-theme="dark"]`). Demo je ranije imao svoju tamnu — bliska, ali ne
     ista: pozadina za nijansu svjetlija i akcenat plav (#4f9cf9) umjesto
     cijan. Razlika je bila dovoljna da stranica djeluje kao tuđa.

     Ako se boje sajta ikad promijene, ovih devet se prepiše odatle i to je sve.
     Sve ostalo ispod pripada uređajima (plastika, papir, lampice) i ne zavisi
     od sajta — štampač izgleda isto koje god boje stranica bila.

     Sajt ima i svijetlu temu; demo je ne prati (svjesna odluka — v. README).
     Ako se tome ikad vrati: natpisi NA uređajima (`.citac-natpis`,
     `.stampac-natpis`) koriste --tekst-prigusen, pa u svijetloj temi postanu
     tamni na tamnoj plastici i nestanu. Njima treba svoja promjenljiva koja
     ostaje svijetla bez obzira na temu. */
  --pozadina: #0f1219;
  --pozadina-2: #161b26;          /* gornji ton radijalne pozadine */
  --tekst: #f0f2f5;
  --tekst-prigusen: #8b95a5;
  --akcenat: #00bfff;             /* CTA, aktivni koraci, isticanja */
  --akcenat-2: #94C94A;           /* drugi kraj gradijenta na dugmadima sajta */
  --akcenat-blago: rgba(0, 191, 255, .14);    /* podloge izvedene iz akcenta */
  --akcenat-obrub: rgba(0, 191, 255, .35);
  --akcenat-tekst: #9adcff;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ── Uređaji: kućišta ─────────────────────────────────────────────────── */
  --plastika: #2a2e38;
  --plastika-svijetla: #3a3f4c;
  --plastika-tamna: #23262e;
  --plastika-rub: #1e2128;
  --plastika-noga: #15171c;
  --prorez: #0b0d11;              /* usta štampača, usjek telefona */
  /* Taster Enter na tastaturi kase — prepisan iz login ekrana. Ne mijenjati sa
     temom sajta: poenta je da posjetilac prepozna baš to dugme na ekranu. */
  --tipka-enter: #e8920c;
  --metal: #6b7280;               /* nazubljena ivica za kidanje */

  /* ── Uređaji: lampice ─────────────────────────────────────────────────── */
  --led-mirno: #3d8b4a;
  --led-radi: #f0a020;
  --led-ok: #4ade80;
  --led-greska: #f87171;
  --led-ugasen: #4b5160;

  /* ── Kartica konobara ─────────────────────────────────────────────────── */
  --kartica-1: #2f6fd0;
  --kartica-2: #1b3f7d;
  --kartica-tekst: #eef2fb;

  /* ── Papir (termalna traka) ───────────────────────────────────────────── */
  --papir: #fbfaf6;
  --papir-tekst: #22242a;
  --papir-linija: #b9b5aa;        /* isprekidane crte */
  --papir-prigusen: #8a8d96;      /* sitni tekst, oznaka demoa */
  --papir-napomena: #6b6e78;
  --papir-okvir: #e2ded2;         /* tanak okvir oko QR-a */

  /* ── Mjere ────────────────────────────────────────────────────────────── */
  --sirina-trake: 300px;
  --sirina-citaca: 240px;
  --visina-stampaca: 650px;       /* stalna — v. komentar uz .stampac-zona */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--pozadina);
  color: var(--tekst);
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 40px;
  gap: 22px;
}

/* ── Šank iza scene ───────────────────────────────────────────────────────
   Slika je izabrana zato što joj linija pulta pada tačno na visinu na kojoj
   uređaji stoje — monitor i čitač time STOJE na šanku umjesto da lebde ispred
   fotografije. Zbog toga se `background-position` po vertikali (38%) ne dira
   napamet: pomjeri li se, uređaji se odlijepe od pulta i cijeli utisak pada.

   Dva sloja, ne jedan: ::before nosi sliku, ::after zatamnjenje. Da je
   zatamnjenje u istom `background`-u, `filter: blur()` bi mutio i njega.

   Sirova slika je presvijetla — donji dio (drvo šanka) proguta tekst podnožja.
   Zato gradijent drži jako gore i dole a popušta na 26–46%, tamo gdje su
   uređaji i gdje slika treba da se vidi. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url('sank.webp') center 38% / cover no-repeat;
  /* Zamućenje gura sliku u drugi plan i usput sakriva to što je izvorna
     široka 1672px, pa se na monitoru od 2560px razvlači oko 1,5×.
     scale(1.02) jede rub koji blur razmaže do prozirnog. */
  filter: blur(2px) saturate(.85);
  transform: scale(1.02);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgba(15, 18, 25, .88) 0%,
    rgba(15, 18, 25, .52) 26%,
    rgba(15, 18, 25, .55) 46%,
    rgba(15, 18, 25, .93) 68%,
    rgba(15, 18, 25, .98) 100%);
}

/* ── Režim ugradnje (?ugradnja=1) ────────────────────────────────────────── */
/* Kad demo stoji u <iframe>-u unutar stranice na sajtu, stranica već ima svoj
   naslov i svoje CTA dugme — pa bi naši bili duplikat. Ovim se sklanjaju, a
   scena i vodič ostaju. Bez parametra demo je samostalna stranica. */
/* Zaglavlje cijelo, ne samo tekst: dugme „Počni ispočetka" se odselilo iznad
   kase, pa u zaglavlju nije ostalo ništa osim naslova. Dugme time ostaje
   vidljivo i ovdje — bez njega posjetilac nema kako da vrati demo. */
body.ugradnja .zaglavlje,
body.ugradnja .podnozje { display: none; }
/* Izlaz „Nazad na rubik.me" otpada kad demo stoji U stranici sajta: posjetilac
   je već tu, a link bi ga samo vratio na naslovnu. „Počni ispočetka" ostaje. */
body.ugradnja .dugme-nazad { display: none; }
body.ugradnja { padding-top: 18px; }

/* Na širokom ekranu poruke za telefon nema — v. @media na dnu fajla. */
.uski-ekran { display: none; }

/* ── Zaglavlje ───────────────────────────────────────────────────────────── */
/* ── Zaglavlje: u DOM-u, van ekrana ───────────────────────────────────────
   Otkad iza scene stoji šank, naslov i opis su samo gurali opremu naniže —
   slika je preuzela posao naslova. Ali se ne BRIŠU: <h1> je jedini naslov
   stranice, treba i čitaču ekrana i pretraživaču, a stranica bez h1 je gola.
   Zato standardno sakrivanje (1px + clip-path), ne `display: none` — ono bi
   ga izbacilo i iz čitača ekrana.

   Poruka koja je stajala u opisu („ništa se ne instalira i ništa se ne pamti")
   nije izgubljena — ponavlja je vodič u prvom koraku, ispod kase.

   Ako se naslov ikad vraća na ekran: obrisati ovaj blok i vratiti flex koji je
   bio ovdje (naslov lijevo, prostor desno) — dugme „Počni ispočetka" NIJE u
   zaglavlju, ono odavno stoji iznad kase, pa mu vraćanje ne smeta. */
.zaglavlje {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Dugmad iznad kase ───────────────────────────────────────────────────── */
/* Dva dugmeta u redu, u istom odnosu kao na sajtu: puno obojeno za radnju,
   obris za sporednu. `flex-wrap` jer se na užem rasporedu kolona kase steže,
   a dva natpisa sa `nowrap` inače izađu iz nje. */
.dugmad-kase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Gradijent i tamno slovo su prepisani sa sajta (`.hero-button` u
   pocetna.css) — to je isto dugme kojim je posjetilac i došao ovdje
   („Probajte online demo"), pa mu je i izlaz iz demoa poznat na oko.
   Hover obrće gradijent, kao i tamo. */
.dugme-reset {
  background: linear-gradient(90deg, var(--akcenat), var(--akcenat-2));
  border: 1px solid transparent;
  color: #111;
  font-weight: 650;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  white-space: nowrap;
}
.dugme-reset:hover {
  background: linear-gradient(90deg, var(--akcenat-2), var(--akcenat));
  box-shadow: 0 6px 18px -6px rgba(0, 191, 255, .5);
}

/* Izlaz nazad na sajt. Namjerno u obrisu — vodi VAN demoa, pa ne smije da se
   takmiči sa dugmetom koje demo vraća na početak. Ovo je stari izgled
   `.dugme-reset`, prije nego je obojeno. */
.dugme-nazad {
  background: transparent;
  border: 1px solid var(--plastika-svijetla);
  color: var(--tekst-prigusen);
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
}
.dugme-nazad:hover { border-color: var(--akcenat); color: var(--tekst); }

/* ── Bočna kolona: čitač prije prijave, telefon poslije ──────────────────── */
/* Bočna kolona se spušta na istu liniju pulta kao kasa i štampač (v. `.kasa`) —
   inače lebdi 140px iznad njih i scena izgleda kao tri odvojena crteža.
   Poravnava se DNO kolone, dakle zadnja kartica odnosno tekst ispod telefona;
   sam čitač ostaje iznad, jer kartice stoje ispod njega i ne mogu oboje na
   liniju. Tako je i odlučeno.

   Ovdje `min-height`, a ne `height` kao kod kase: kolona nosi tekst koji može
   da se prelomi u još jedan red (čitač 510px, telefon 625px — blizu granice od
   650px). Sa zadatom visinom bi višak izašao NAVIŠE, preko naslova stranice;
   ovako kolona naraste nadolje i poravnanje se samo malo razmakne. Kasa nema
   teksta pa joj je visina deterministična. */
.pomocna-kolona {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--visina-stampaca);
  min-width: 0;
}

/* ── Telefon ─────────────────────────────────────────────────────────────── */
.telefon-naslov {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--tekst);
  text-align: center;
}
.telefon {
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 390 / 844;
  background: linear-gradient(165deg, var(--plastika-svijetla), var(--plastika-rub));
  border-radius: 38px;
  padding: 11px;
  box-shadow: 0 34px 60px -22px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .07) inset;
}
.telefon-usjek {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 92px; height: 20px;
  background: var(--prorez);
  border-radius: 0 0 12px 12px;
  z-index: 2;
}
.telefon-ekran {
  position: relative;
  width: 100%; height: 100%;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
}
/* Puna rezolucija telefona pa skaliranje — isto kao kod monitora. */
#appMobile {
  position: absolute;
  top: 0; left: 0;
  width: 390px;
  height: 844px;
  border: 0;
  transform-origin: top left;
}

.telefon-opis {
  margin: 16px 0 0;
  max-width: 300px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--tekst-prigusen);
  text-align: center;
}

/* ── Smjena u bočnoj koloni ──────────────────────────────────────────────── */
/* Čitač je posao prije prijave; kad je konobar unutra, njegovo mjesto uzima
   telefon. Ne stoje nikad zajedno — kolona je jedna i priča jednu stvar. */
.telefon-zona { display: none; }
body.prijavljen .citac-zona { display: none; }
body.prijavljen .telefon-zona { display: flex; flex-direction: column; align-items: center; }

/* ── Scena: kasa + štampač ───────────────────────────────────────────────── */
/* Čitač lijevo, kasa u sredini, štampač desno — kao pult. */
.scena {
  width: 100%;
  max-width: 1500px;
  display: grid;
  grid-template-columns: var(--sirina-citaca) minmax(0, 1fr) var(--sirina-trake);
  gap: 30px;
  align-items: start;
}

/* ── Čitač kartica ───────────────────────────────────────────────────────── */
.citac-zona { display: flex; flex-direction: column; align-items: center; }

.citac {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.15;
  background: linear-gradient(160deg, var(--plastika-svijetla), var(--plastika-tamna));
  border-radius: 16px;
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .05) inset;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
}
/* Blago udubljenje — mjesto gdje se kartica prislanja */
.citac::before {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .05), transparent 62%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5) inset;
}

/* Tri luka — RFID talas */
.citac-talas {
  position: relative;
  width: 54px; height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.citac-talas span {
  position: absolute;
  border: 2.5px solid var(--tekst-prigusen);
  border-color: transparent var(--tekst-prigusen) transparent transparent;
  border-radius: 50%;
  opacity: .45;
  transition: border-color .2s, opacity .2s;
}
.citac-talas span:nth-child(1) { width: 14px; height: 14px; }
.citac-talas span:nth-child(2) { width: 26px; height: 26px; }
.citac-talas span:nth-child(3) { width: 38px; height: 38px; }

.citac.cita .citac-talas span {
  border-right-color: var(--led-ok);
  animation: talas 1s ease-out infinite;
}
.citac.cita .citac-talas span:nth-child(2) { animation-delay: .12s; }
.citac.cita .citac-talas span:nth-child(3) { animation-delay: .24s; }
@keyframes talas {
  0%   { opacity: .25; }
  40%  { opacity: 1; }
  100% { opacity: .25; }
}

.citac-lampica {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--led-ugasen);
  transition: background .2s, box-shadow .2s;
}
.citac.cita .citac-lampica { background: var(--led-ok); box-shadow: 0 0 10px var(--led-ok); }
.citac.greska .citac-lampica { background: var(--led-greska); box-shadow: 0 0 10px var(--led-greska); }

/* Razmak 1px, ne 3px kao dok je pisalo „RFID": natpis je sad dvije riječi i sa
   širokim razmakom bi se raširio preko kućišta. Isto je bilo i sa štampačem. */
.citac-natpis {
  position: relative;
  font-size: 10px; letter-spacing: 1px;
  color: var(--tekst-prigusen); font-weight: 600;
  white-space: nowrap;
}

/* Kratak trzaj kućišta kad kartica „padne" na čitač */
.citac.cita { animation: citac-trzaj .3s ease-out; }
@keyframes citac-trzaj {
  50% { transform: translateY(2px) scale(.985); }
}

.citac-uputa {
  margin: 14px 0 10px;
  font-size: 12.5px;
  color: var(--tekst-prigusen);
  text-align: center;
  line-height: 1.5;
}

/* ── Kartice ─────────────────────────────────────────────────────────────── */
.kartice { width: 100%; display: flex; flex-direction: column; gap: 10px; }

.kartica {
  position: relative;
  width: 100%;
  aspect-ratio: 1.586 / 1;          /* ID-1, kao prava kartica */
  border: 0;
  border-radius: 9px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  color: var(--kartica-tekst);
  font-family: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(160deg, var(--kartica-1), var(--kartica-2));
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08) inset;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .16s, box-shadow .16s;
}
.kartica:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -10px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .14) inset;
}
.kartica:active { transform: translateY(-1px); }

/* Rubik logo umjesto čipa — kartica je naš proizvod, pa nosi naš znak.
   Zlatni čip je izgledao kao SIM, a i nije tačan: RFID kartica nema kontakte. */
.kartica-logo {
  position: absolute;
  top: 11px; left: 12px;
  width: 62px;
  height: auto;
  opacity: .92;
  pointer-events: none;
}
.kartica-ime { font-size: 14px; font-weight: 650; letter-spacing: .2px; }
.kartica-rola { font-size: 10.5px; opacity: .72; letter-spacing: .4px; }

/* Kartica u letu ka čitaču — klon originala, pa original ostaje na mjestu */
.kartica-let {
  position: fixed;
  z-index: 60;
  margin: 0;
  pointer-events: none;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .5s ease-in;
}

/* ── Kasa: AIO 15.6" ─────────────────────────────────────────────────────── */
/* Nije monitor sa postoljem nego AIO — računar je u istom kućištu kao ekran.
   Uzor je MSI PRO 16T, mašina na kojoj Atos stvarno stoji kod klijenata, pa
   posjetilac vidi uređaj kakav bi i kupio, a ne kancelarijski monitor.

   Tri stvari nose taj utisak, i sve tri su ovdje:
   ekran 16:9 (15.6" panel nema 16:10), jednako debeo okvir sa svih strana
   (AIO nosi elektroniku iza panela, pa nema tanke ivice kao monitor), i
   postolje bez vrata — samo zglob i plitka ploča na pultu. */
/* Kasa i štampač stoje na ISTOM pultu, pa im donje ivice moraju biti u ravni —
   ploča postolja sa nožicama štampača. Obje kolone kreću od vrha reda
   (`align-items: start` na `.scena`), pa je dovoljno da kasa dobije istu visinu
   kao kolona štampača i gurne uređaj na dno.
   Uređaj je niži od te visine (na najširem rasporedu ~600px prema 650px), pa
   višak ostaje prazan IZNAD kase. Da je `flex-start`, praznina bi pala ispod i
   kasa bi izgledala kao da lebdi iznad pulta. */
/* `min-height`, a ne zadata visina: otkad je dugme „Počni ispočetka" u ovoj
   koloni, sadržaj više nije čisto grafički — dugme nosi tekst i naraste sa
   krupnijim fontom u browseru. Sa zadatom visinom bi višak izašao naviše, preko
   naslova stranice; ovako kolona naraste nadolje i linija pulta se tek malo
   razmakne. Isti razlog kao kod `.pomocna-kolona`. */
.kasa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--visina-stampaca);
}
/* Razmak do kućišta; praznina iznad dugmadi je ono što pretekne od kolone.
   Razmak nosi RED, ne dugme: kad se dugmad prelome u dva reda, margina na
   svakom bi se udvostručila. */
.kasa .dugmad-kase { margin-bottom: 14px; }

.monitor {
  width: 100%;
  background: linear-gradient(180deg, var(--plastika-svijetla), var(--plastika));
  border-radius: 14px;
  padding: 18px 18px 0;
  /* Druga sjenka je donja ivica kućišta — AIO je debeo slab, pa mu se dno
     vidi kao traka, dok monitor ima tanku ploču koju ova linija ne bi imala. */
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8),
              0 0 0 1px rgba(255, 255, 255, .05) inset,
              0 -14px 20px -18px rgba(0, 0, 0, .9) inset;
}

.ekran {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 3px;
  overflow: hidden;
}

/* iframe drži punu rezoluciju panela pa se skalira — POS je pravljen za kasu,
   a ne za širinu sekcije na sajtu. Faktor računa frame.js pri svakoj promjeni.
   1366×768 je panel 15.6" AIO-a; ako se ovo mijenja, mijenja se i djelilac u
   frame.js, inače se slika ne poklopi sa okvirom. */
#app {
  position: absolute;
  top: 0; left: 0;
  width: 1366px;
  height: 768px;
  border: 0;
  transform-origin: top left;
}

/* Brada je kod AIO-a viša nego kod monitora — iza nje su ploča i ventilacija. */
.monitor-brada {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.monitor-led {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--akcenat);
  box-shadow: 0 0 8px var(--akcenat);
}

/* Zglob: kratak i širok, odmah ispod kućišta. AIO se na njega naslanja —
   nema vrata na koji bi se dizao, jer nema šta da se digne. */
.postolje-zglob {
  width: 150px; height: 18px;
  background: linear-gradient(180deg, var(--plastika-tamna), var(--plastika-rub));
  border-radius: 0 0 7px 7px;
}
/* Ploča: plitka, tek nešto šira od zgloba. Široka noga monitora bi vratila
   utisak koji upravo izbjegavamo. */
.postolje-ploca {
  width: 260px; height: 11px;
  background: linear-gradient(180deg, var(--plastika-svijetla), var(--plastika-rub));
  border-radius: 3px 3px 9px 9px;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .9);
}

/* ── Štampač ─────────────────────────────────────────────────────────────── */
/* Uređaj stoji na DNU kolone, traka se penje iz njega — kao na pultu. Zato je
   prorez na VRHU kućišta, a tok papira iznad njega. */
/* Visina je STALNA, ne raste sa brojem traka — zato štampač stoji mirno.
   Sa `min-height` je kolona rasla sa sadržajem pa je štampač „bježao" niže;
   sa rastezanjem na visinu kase bilo je još gore, jer je onda papir vukao i
   kasu za sobom (izmjereno: 2057px). Papir dobija ono što ostane i skroluje. */
.stampac-zona {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* štampač na dno kolone */
  align-items: center;
  height: var(--visina-stampaca);
}

.stampac {
  width: 100%;
  position: relative;
  z-index: 3;
  /* Papir mora dodirivati prorez — inače traka "lebdi" iznad štampača. */
  margin-top: -2px;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .8));
}

/* Prorez iz kojeg izlazi papir — na vrhu, sa nazubljenom ivicom za kidanje */
.stampac-usta {
  position: relative;
  height: 14px;
  margin: 0 6px;
  background: linear-gradient(180deg, var(--prorez), var(--plastika-rub));
  border-radius: 4px 4px 0 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .7) inset;
}
.stampac-zub {
  position: absolute;
  left: 8px; right: 8px; top: 3px;
  height: 4px;
  background: repeating-linear-gradient(90deg,
    var(--metal) 0 3px, transparent 3px 7px);
  opacity: .55;
}

.stampac-tijelo {
  background: linear-gradient(180deg, var(--plastika-svijetla) 0%, var(--plastika) 42%, var(--plastika-tamna) 100%);
  border-radius: 6px 6px 12px 12px;
  padding: 12px 14px 14px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset;
}

/* Poklopac rolne — blaga izbočina preko cijele širine */
.stampac-rolna {
  height: 26px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .18));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset;
  margin-bottom: 11px;
}

.stampac-red {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.stampac-lampica {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--led-mirno);
  box-shadow: 0 0 8px var(--led-mirno);
  transition: background .2s, box-shadow .2s;
}
.stampac-lampica.radi {
  background: var(--led-radi);
  box-shadow: 0 0 12px var(--led-radi);
  animation: trepni .35s linear infinite;
}
@keyframes trepni { 50% { opacity: .35; } }

/* Razmak je 1px, ne 3px kao dok je pisalo „ATOS": natpis je sad cijelo ime
   uređaja i sa širokim razmakom bi naletio na lampicu u istom redu. */
.stampac-natpis {
  font-size: 11px; letter-spacing: 1px;
  color: var(--tekst-prigusen); font-weight: 600;
  white-space: nowrap;
}

/* Nožice */
.stampac-noge {
  display: flex; justify-content: space-between;
  margin: 0 16px;
}
.stampac-noge span {
  width: 26px; height: 5px;
  background: var(--plastika-noga);
  border-radius: 0 0 3px 3px;
}

/* Kućište se blago trza dok papir izlazi */
.stampac.radi .stampac-tijelo { animation: stampac-trzaj .16s linear infinite; }
@keyframes stampac-trzaj {
  50% { transform: translateY(0.6px); }
}

/* ── Trake ───────────────────────────────────────────────────────────────── */
/* Najnovija je DOLJE, uz štampač; starije je guraju naviše. */
.traka-tok {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-height: 0;               /* bez ovoga flex stavka ne bi mogla da skroluje */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

/* Trake se lijepe za DNO (uz štampač) preko `margin-top: auto` na prvoj, a NE
   preko `justify-content: flex-end`.
   Razlika je suštinska: kod `flex-end` sadržaj koji prekorači gornju ivicu
   postaje nedostižan — browser u tom smjeru ne pravi scroll, pa je poslije
   nekoliko računa `scrollHeight` ostajao jednak visini okvira i starije trake
   se nisu mogle dohvatiti. Sa `margin-top: auto` razmak se pojede čim sadržaj
   naraste, i scroll radi normalno. */
.traka:first-child { margin-top: auto; }
/* Papir izlazi iz proreza: visina raste od nule naviše, a sadržaj je zakačen
   za VRH — pa zaglavlje (prvo odštampano) ide gore, a donji redovi se
   pojavljuju kod proreza. Tačno kao kad traka izlazi iz termalnog štampača. */
.traka {
  width: 100%;
  height: 0;
  overflow: hidden;
  background: var(--papir);
  color: var(--papir-tekst);
  font-family: "Consolas", "DejaVu Sans Mono", monospace;
  font-size: 11.5px;
  line-height: 1.45;
  box-shadow: 0 -6px 18px -8px rgba(0, 0, 0, .6);
  flex: 0 0 auto;
  /* Iskidana ivica GORE — tamo je traka otkinuta */
  clip-path: polygon(0 6px,
    4% 0, 10% 6px, 16% 0, 22% 6px, 28% 0, 34% 6px, 40% 0, 46% 6px,
    52% 0, 58% 6px, 64% 0, 70% 6px, 76% 0, 82% 6px, 88% 0, 94% 6px, 100% 0,
    100% 100%, 0 100%);
}
.traka-sadrzaj { padding: 14px 14px 10px; }

.traka .t-c { text-align: center; }
.traka .t-b { font-weight: 700; }
.traka .t-s { font-size: 10.5px; }
.traka .t-hr { border-top: 1px dashed var(--papir-linija); margin: 7px 0; }
.traka .t-row { display: flex; justify-content: space-between; gap: 8px; }
.traka .t-stavka { margin-bottom: 4px; }
.traka .t-naziv { font-weight: 600; }
.traka .t-nap { color: var(--papir-napomena); font-style: italic; }
.traka .t-total { font-size: 14px; margin-top: 4px; }
/* Naslov NARUDŽBA — traka sa telefona mora se na prvi pogled razlikovati od računa. */
.traka .t-naslov { font-size: 13px; letter-spacing: 2px; margin: 2px 0 6px; }

/* QR na traci. Boje dolaze iz samog SVG-a (bijela podloga, crni moduli) — to je
   tačno ono što treba na papiru, pa se ovdje NE gaze: `fill` bi razbio module,
   koji su crtani kao `stroke`, ne kao ispuna. */
.traka .t-qr {
  margin: 10px 0 4px;
  text-align: center;
}
.traka .t-qr svg {
  width: 96px; height: 96px;
  display: inline-block;
  outline: 1px solid var(--papir-okvir);
  outline-offset: 3px;
}
.traka .t-qr-opis {
  margin-top: 4px;
  font-size: 9px;
  color: var(--papir-prigusen);
  letter-spacing: .3px;
}

.traka .t-demo {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--papir-linija);
  color: var(--papir-prigusen); font-size: 9.5px; letter-spacing: .5px;
}

/* ── Vodič ───────────────────────────────────────────────────────────────── */
/* Dva sloja, namjerno razdvojena (v. komentar uz markup u index.html):
   koraci su sitan pokazivač napretka, panel nosi argument. */
.vodic {
  width: 100%; max-width: 1400px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}

/* ── Koraci: sitne pilule ────────────────────────────────────────────────── */
.koraci {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px;
  margin: 0; padding: 0;
}
.koraci li {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 999px;
  padding: 6px 14px 6px 7px;
  font-size: 12.5px;
  color: var(--tekst-prigusen);
  transition: background .25s, border-color .25s, color .25s;
}
/* Broj u krugu — ostaje isti kad korak prođe, samo se oboji. Zamjena broja
   kvačicom je probana i odbačena: pilule tada gube brojeve pa se ne vidi
   redoslijed, a to je jedini posao ove trake. */
.koraci li b {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: var(--tekst);
  font-size: 11.5px; font-weight: 700;
}
.koraci li.sada {
  border-color: var(--akcenat-obrub);
  color: var(--tekst);
}
.koraci li.sada b { background: var(--akcenat); color: var(--pozadina); }
.koraci li.gotovo {
  background: var(--akcenat-blago);
  border-color: var(--akcenat-obrub);
  color: var(--tekst);
}
.koraci li.gotovo b {
  background: var(--akcenat); color: var(--pozadina);
  font-size: 0;                      /* broj se gasi, ostaje kvačica */
}
.koraci li.gotovo b::after { content: "✓"; font-size: 12px; }

/* ── Panel sa objašnjenjem ───────────────────────────────────────────────── */
/* Ispod kase, ne ispod cijele scene: tu je posjetiocu pogled poslije klika.
   Stalna najmanja visina — bez nje stranica poskakuje pri svakoj promjeni
   poruke, jer poruke nisu iste dužine. */
.vodic-panel {
  width: 100%; max-width: 720px;
  min-height: 112px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
  border-left: 3px solid var(--akcenat-obrub);
  border-radius: 10px;
  padding: 14px 18px;
}
.vodic-poruka { display: none; }
.vodic-poruka.vidljiva { display: block; animation: vodic-ulaz .35s ease both; }
@keyframes vodic-ulaz {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.vodic-poruka p {
  margin: 0;
  font-size: 13.5px; line-height: 1.6;
  color: var(--tekst-prigusen);
}
/* Poruka smije imati više pasusa (Kucanje ima kasu pa telefon) — bez razmaka
   bi se slijepili u jedan blok teksta. */
.vodic-poruka p + p { margin-top: 9px; }

/* Poziv na akciju na kraju demoa. Odvojen linijom, da se ne pročita kao još
   jedna rečenica objašnjenja nego kao sljedeći korak. */
.vodic-cta {
  margin-top: 12px !important;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: var(--tekst) !important;
}
.vodic-cta a {
  color: var(--akcenat);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.vodic-cta a:hover { text-decoration: underline; }
.vodic-naslov {
  margin-bottom: 5px !important;
  font-size: 14px; font-weight: 650;
  color: var(--tekst) !important;
}
.vodic-poruka b { color: var(--akcenat-tekst); font-weight: 650; }
.vodic-poruka code {
  background: var(--akcenat-blago);
  color: var(--akcenat-tekst);
  padding: 1px 6px; border-radius: 4px;
}

/* Taster iz programa, umetnut u rečenicu — da se ne opisuje riječima („strelica")
   nego pokaže. Veličina je vezana za tekst, ne ukucana: kad se poruka zumira,
   taster ide s njom. */
.tipka {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7em; height: 1.35em;
  vertical-align: -.3em;
  background: var(--tipka-enter);
  color: #fff;
  border-radius: 5px;
}
.tipka svg { width: 1em; height: 1em; }

/* ── Poruka „u punoj verziji" ────────────────────────────────────────────── */
/* Gore, ne dolje: pri dnu je poruka pokrivala dugmad za naplatu — baš ono
   što posjetilac treba da klikne poslije kucanja. */
.poruka {
  position: fixed;
  left: 50%; top: 18px;
  transform: translate(-50%, -20px);
  background: var(--plastika);
  border: 1px solid var(--plastika-svijetla);
  color: var(--tekst);
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .9);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 50;
  max-width: min(90vw, 460px);
  text-align: center;
}
.poruka.vidi { opacity: 1; transform: translate(-50%, 0); }

/* ── Podnožje ────────────────────────────────────────────────────────────── */
/* Podnožja u markupu VIŠE NEMA (v. komentar u index.html) — stilovi ostaju za
   slučaj da se vrati, i zato što `.cta` ispod koristi i poruka za uski ekran. */
.podnozje {
  width: 100%; max-width: 1400px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding-top: 18px;
}
.podnozje p { margin: 0; color: var(--tekst-prigusen); font-size: 12.5px; max-width: 70ch; line-height: 1.55; }

/* Sitna napomena u vodiču — nosi ono što je ranije stajalo u podnožju. Tiša je
   od same poruke koraka: informacija je, ne argument. */
.vodic-sitno {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--tekst-prigusen);
  opacity: .8;
}
.cta {
  background: var(--akcenat);
  color: var(--pozadina);
  text-decoration: none;
  font-weight: 650;
  padding: 11px 20px;
  border-radius: 999px;
  white-space: nowrap;
  transition: filter .15s;
}
.cta:hover { filter: brightness(1.1); }

/* ── Uže: štampač ide ispod kase ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .scena { grid-template-columns: minmax(0, 1fr); }
  /* Jedna kolona — nema šta da rastegne zonu, pa joj se visina zadaje;
     inače bi papir rastao bez granice i štampač opet bježao. */
  .stampac-zona { max-width: 340px; margin: 0 auto; height: 520px; }
  /* Uređaji se ovdje ređaju jedan ispod drugog, nema zajedničke linije pulta —
     zadata visina kase bi bila samo prazan prostor iznad nje. */
  .kasa { min-height: 0; }

  /* Bočna kolona ide ISPRED kase — prvo se prijavljuje, pa se kuca.
     Zajedničke linije pulta ovdje nema (uređaji su jedan ispod drugog), pa
     otpada i zadata visina — ostala bi samo praznina iznad čitača. */
  .pomocna-kolona { order: -1; max-width: 460px; margin: 0 auto; width: 100%; min-height: 0; }
  .citac { aspect-ratio: 3 / 1; flex-direction: row; gap: 20px; }
  .citac-uputa { margin: 12px 0 10px; }
  /* Kartice u red, ne u kolonu */
  .kartice { flex-direction: row; }
  .kartica { flex: 1 1 0; }
  /* Telefon je na uskom ekranu glavni uređaj — ne stiska se na 240px. */
  .telefon { max-width: 300px; }
}

@media (max-width: 640px) {
  body { padding: 20px 14px 30px; }
  .postolje-zglob, .postolje-ploca { display: none; }
}

/* ── Telefon: umjesto slomljene scene, poštena poruka ─────────────────────
   Granica je 800px, ne 640: već oko 780px se pult raspada (štampač na 340px
   uz kasu koja traži svoju širinu), a to je i dalje tablet u uspravnom
   položaju. Ispod te granice scena i vodič se sklanjaju cijeli — ne stiskaju
   se — a poruka preuzima stranicu.

   Sklanja se i podnožje: njegovo CTA dugme bilo bi drugo isto takvo odmah
   ispod ovog, a napomena o izmišljenim artiklima nema smisla kad se demo i
   ne vidi.

   Šank se ovdje NE učitava: scene nema, pa bi 78 KB otišlo na pozadinu iza
   poruke koja kaže „otvorite ovo na računaru". Browser ne skida pozadinu
   sakrivenog elementa, pa je ovo stvarna ušteda, ne samo kozmetika. */
@media (max-width: 800px) {
  .scena, .vodic, .podnozje { display: none; }
  body::before, body::after { display: none; }

  .uski-ekran {
    display: block;
    max-width: 420px;
    margin: 8px auto 0;
    padding: 32px 22px 26px;
    text-align: center;
    background: var(--akcenat-blago);
    border: 1px solid var(--akcenat-obrub);
    border-radius: 14px;
  }
  .uski-ikona { color: var(--akcenat); opacity: .85; }
  .uski-ekran h2 {
    margin: 14px 0 10px;
    font-size: 20px;
    color: var(--tekst);
  }
  .uski-ekran p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--tekst-prigusen);
  }
  .uski-ekran b { color: var(--akcenat-tekst); }
  .uski-sitno { font-size: 13.5px; opacity: .85; }
  /* .cta nosi svoj izgled iz podnožja; ovdje mu treba samo da stane u red. */
  .uski-ekran .cta { display: inline-block; margin-top: 6px; }
}