/* Svemir — shared theme and chrome.

   Svemir znači svemir, pa je i sajt noćni: duboko plava pozadina, sitne
   zvezde, hrom u znaku. Nije crna — plava je, i to se vidi.
   Paleta je izvučena iz logotipa koji je klijent poslao. */

/* Pismo znaka stoji lokalno, ne sa Google-a: logotip ne sme da zavisi od tuđe
   mreže, a fajl je 6.5 KB. font-display:block jer je ovo znak — bolje da se ne
   vidi 100 ms nego da bljesne u pogrešnom pismu. */
@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("/fonts/orbitron-700.woff2") format("woff2");
}

@property --sc-p { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --sc-canvas:     #0B1020;   /* duboko plava, ne crna */
  --sc-surface:    #151C33;   /* izdignute ploče */
  --sc-ink:        #EAF0FA;   /* 16.5:1 */
  --sc-ink-soft:   #9DAAC6;   /* 8.1:1, tonirano ka mastilu */
  --sc-accent:     #FF7A45;   /* 7.3:1 na pozadini — na tamnom sme i u sitnom tekstu */
  --sc-accent-ink: #180C05;   /* na narandžastoj */
  --sc-accent-dp:  #FF7A45;   /* na tamnom nije potreban drugi stepen */

  --sc-hairline:        color-mix(in oklab, var(--sc-ink) 14%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 26%, transparent);

  --sc-font-display: "Outfit", system-ui, sans-serif;
  --sc-font-text:    "Nunito Sans", system-ui, sans-serif;
  --sc-font-mono:    "Nunito Sans", system-ui, sans-serif;
  --sc-font-mark:    "Orbitron", "Eurostile", "Bank Gothic", system-ui, sans-serif;

  --sc-r-sm: 8px; --sc-r-md: 14px; --sc-r-lg: 22px; --sc-r-pill: 999px;

  /* na tamnoj podlozi senke su opet stvarne senke, a ivica hvata svetlo */
  --sc-shadow-color: 225 60% 2%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.5);
  --sc-e2: 0 2px 6px hsl(var(--sc-shadow-color) / 0.45), 0 1px 2px hsl(var(--sc-shadow-color) / 0.4);
  --sc-e3: 0 14px 40px hsl(var(--sc-shadow-color) / 0.55), 0 3px 8px hsl(var(--sc-shadow-color) / 0.4);
  --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 14%, transparent);

  /* uzeto sa rendera, da se hrom i cevi slažu sa slikama */
  --il-pipe:   #2A6B72;
  --il-pipe-3: #6BA9B3;
  --il-water:  #7ECBDD;
  --il-star:   #DCE8FF;
}

/* zrno je pravljeno za tamnu sobu — ovde konačno radi ono za šta je pravljeno */
.sc-grain { opacity: 0.035; }

html { background: var(--sc-canvas); }
body {
  color: var(--sc-ink);
  /* dve vrlo blage maglina-mrlje, tek toliko da pozadina ne bude ravna ploča */
  background:
    radial-gradient(58vw 42vw at 12% 8%,  color-mix(in oklab, #3D2A52 34%, transparent), transparent 70%),
    radial-gradient(52vw 40vw at 88% 62%, color-mix(in oklab, #16345F 34%, transparent), transparent 70%),
    var(--sc-canvas);
  background-attachment: fixed;
}

/* zvezde: fiksno platno iza svega, crta ga skripta u index.html */
#stars {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; display: block;
}
main, .doc-head, .site-foot, .vert, .vert__ticks, .gauge, .boot { position: relative; z-index: 1; }
.doc-head { z-index: var(--sc-z-chrome); }

/* --------------------------------------------------------------- znak ---- */
/* Logotip koji je klijent poslao: široko, uglasto pismo. Original je Eurostile
   Extended Bold; Orbitron 700 je najbliže besplatno pismo po debljini i širini,
   pa mu razvučen razmak vraća proporciju originala.
   Bela, ne hrom: na tamnoj podlozi prelaz je gubio kontrast u srednjim tonovima. */
.mark-word {
  font-family: var(--sc-font-mark);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #FFFFFF;          /* 18.4:1 na pozadini */
}

/* --------------------------------------------------------------- chrome --- */
.doc-head {
  position: fixed; inset: 0 0 auto; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; gap: var(--sc-5);
  padding: var(--sc-3) var(--sc-gutter);
  font-family: var(--sc-font-text); font-size: var(--sc-t-sm);
  background: color-mix(in oklab, var(--sc-canvas) 80%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 8%, transparent);
}
.doc-head__mark {
  display: inline-flex; align-items: center;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  text-decoration: none;
}
.doc-head__meta { color: var(--sc-ink-soft); display: none; }
.doc-head__nav { margin-left: auto; display: flex; gap: var(--sc-5); align-items: center; }
.doc-head a { color: var(--sc-ink-soft); text-decoration: none; }
.doc-head a:hover { color: var(--sc-ink); }
.doc-head a[aria-current="page"] { color: var(--sc-ink); font-weight: 600; }
.doc-head__tel {
  color: var(--sc-accent-ink) !important; background: var(--sc-accent);
  padding: var(--sc-2) var(--sc-4); border-radius: var(--sc-r-pill); font-weight: 700;
  transition: transform 140ms var(--sc-ease-out), filter 140ms var(--sc-ease-out);
}
.doc-head__tel:hover { filter: brightness(1.08); }
.doc-head__tel:active { transform: translateY(1px); }
@media (min-width: 860px) { .doc-head__meta { display: block; } }
@media (max-width: 540px) {
  /* U zaglavlju ostaje samo znak i broj; ostalo preuzima dugme za meni. */
  .doc-head__nav a:not(.doc-head__tel) { display: none; }
  .doc-head { position: fixed; }
}

/* ------------------------------------------------------------ meni ------- */
/* Dugme postoji u kodu, ali se vidi tek kad ga nav.js otkrije — da bez
   JavaScript-a ne stoji mrtvo dugme. Bez JS-a veze ostaju u podnožju. */
.nav-toggle { display: none; }
.js-nav .nav-toggle {
  display: none;
  width: 44px; height: 44px; flex: none;   /* 44px je najmanja pristojna meta za prst */
  align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0; margin-left: var(--sc-3);
  cursor: pointer; color: var(--sc-ink);
  border-radius: var(--sc-r-md);
}
@media (max-width: 540px) { .js-nav .nav-toggle { display: inline-flex; } }

.nav-toggle__bars { display: block; width: 22px; height: 14px; position: relative; }
.nav-toggle__bars i {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform 220ms var(--sc-ease-out), opacity 140ms linear;
}
.nav-toggle__bars i:nth-child(1) { top: 0; }
.nav-toggle__bars i:nth-child(2) { top: 6px; }
.nav-toggle__bars i:nth-child(3) { top: 12px; }
/* otvoreno: gornja i donja se ukrste, srednja nestane */
[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-panel {
  position: absolute; top: 100%; left: 0; right: 0;
  /* neprozirno: kroz providan panel se čitao tekst stranice ispod njega */
  background: var(--sc-canvas);
  border-bottom: 1px solid var(--sc-hairline);
  box-shadow: var(--sc-e3);
  padding: var(--sc-4) var(--sc-gutter) var(--sc-6);
  display: grid; gap: var(--sc-2);
}
.nav-panel[hidden] { display: none; }
.nav-panel nav { display: grid; }
.nav-panel nav a {
  display: flex; align-items: center; min-height: 52px;
  font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 700;
  letter-spacing: -0.02em; color: var(--sc-ink); text-decoration: none;
  border-bottom: 1px solid var(--sc-hairline);
}
.nav-panel nav a:last-child { border-bottom: 0; }
.nav-panel nav a[aria-current="page"] { color: var(--sc-accent); }
.nav-panel .cta {
  justify-content: center; margin-top: var(--sc-4);
  /* Panel je unutar .doc-head, pa `.doc-head a` (0,1,1) nadjačava `.cta` (0,1,0)
     i tekst dugmeta ispadne svetloplav na narandžastom. Zato se boja ovde vraća
     selektorom veće težine. */
  color: var(--sc-accent-ink);
}
.nav-panel__mail {
  color: var(--sc-ink-soft); font-size: var(--sc-t-sm);
  text-decoration: none; margin-top: var(--sc-2);
  /* meta za prst mora da bude bar 44px visoka; sam tekst je bio 23px */
  display: flex; align-items: center; justify-content: center; min-height: 44px;
}
.nav-panel .nav-panel__mail:hover { color: var(--sc-ink); }

/* Zatamnjenje ostatka ekrana: bez njega meni lebdi nad stranicom koja i dalje
   izgleda aktivno. Ispod zaglavlja (60) a iznad sadržaja. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: color-mix(in oklab, #04070F 62%, transparent);
  opacity: 0; pointer-events: none;
  transition: opacity 220ms var(--sc-ease-out);
}
.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

/* dok je meni otvoren, pozadina ne sme da se pomera pod prstom */
.nav-open, .nav-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .nav-scrim { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle__bars i { transition: none; }
}

/* ----------------------------------------------------------- components --- */
.cta {
  display: inline-flex; align-items: center; gap: var(--sc-3);
  font-family: var(--sc-font-display); font-size: var(--sc-t-base); font-weight: 700;
  text-decoration: none; color: var(--sc-accent-ink); background: var(--sc-accent);
  padding: var(--sc-3) var(--sc-6); border-radius: var(--sc-r-pill);
  box-shadow: var(--sc-e2);
  transition: transform 140ms var(--sc-ease-out), filter 140ms var(--sc-ease-out);
}
.cta:hover { filter: brightness(1.08); }
.cta:active { transform: translateY(1px); }
.cta--ghost {
  background: transparent; color: var(--sc-ink); box-shadow: none;
  border: 2px solid color-mix(in oklab, var(--sc-ink) 24%, transparent);
}
.cta--ghost:hover { border-color: var(--sc-ink); filter: none; }

.label {
  font-family: var(--sc-font-display); font-size: var(--sc-t-sm); font-weight: 700;
  color: var(--sc-accent); letter-spacing: 0.02em;
}

.site-foot {
  background: color-mix(in oklab, var(--sc-surface) 70%, transparent);
  border-top: 1px solid var(--sc-hairline);
  padding: var(--sc-7) var(--sc-gutter);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
  display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6); align-items: center;
}
.site-foot a { color: var(--sc-ink-soft); }
.site-foot a:hover { color: var(--sc-ink); }
.site-foot__tel { color: var(--sc-accent); font-weight: 700; margin-left: auto; }

.page { padding-top: calc(var(--sc-9) + var(--sc-4)); }

:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in oklab, var(--sc-accent) 45%, transparent); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--sc-canvas); }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--sc-ink) 18%, transparent);
  border-radius: 999px; border: 3px solid var(--sc-canvas);
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--sc-ink) 30%, transparent); }

/* --------------------------------------------------------- pravne strane --- */
/* Uslovi korišćenja i Politika privatnosti. Običan dokument: jedna kolona,
   mera reda kao u knjizi, bez ijedne dekoracije — ovo se čita, ne gleda. */
.pravna { max-width: 44rem; }
.pravna h1 {
  margin: var(--sc-3) 0 0; font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.06;
}
.pravna__datum { margin: var(--sc-4) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.pravna__uvod { margin: var(--sc-6) 0 0; font-size: var(--sc-t-lg); color: var(--sc-ink); }
.pravna section { margin-top: var(--sc-8); }
.pravna h2 {
  font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 var(--sc-4);
  padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline);
}
.pravna p { margin: 0 0 var(--sc-4); color: var(--sc-ink-soft); }
.pravna p:last-child { margin-bottom: 0; }
.pravna strong { color: var(--sc-ink); font-weight: 700; }
.pravna a { color: var(--sc-ink); }
.pravna a:hover { color: var(--sc-accent-dp); }
.pravna ul { margin: 0 0 var(--sc-4); padding: 0; list-style: none; display: grid; gap: var(--sc-3); }
/* Tačka NIJE flex stavka. U flex kontejneru svaki <strong> postaje zasebna
   stavka, pa se „Google Fonts" lomilo u svoj stubac odvojeno od rečenice koja
   za njim ide. Ovako tekst teče normalno, a tačka stoji po strani. */
.pravna li { position: relative; padding-left: calc(7px + var(--sc-4)); color: var(--sc-ink-soft); }
.pravna li::before { content: ""; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--sc-accent); }
/* kontakt blok na dnu obe strane */
.pravna__kontakt { margin-top: var(--sc-4); padding: var(--sc-6);
  background: var(--sc-surface); border-radius: var(--sc-r-lg); }
.pravna__kontakt p { color: var(--sc-ink); }

/* ---------------------------------------------------------------- motion --- */
@view-transition { navigation: auto; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
}

a, button { -webkit-tap-highlight-color: transparent; }
.doc-head__mark { transition: opacity 160ms var(--sc-ease-out); }
.doc-head__mark:hover { opacity: 0.78; }

.link-u {
  color: var(--sc-ink); text-decoration: none;
  background-image: linear-gradient(var(--sc-accent), var(--sc-accent));
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 220ms var(--sc-ease-out);
  padding-bottom: 2px;
}
.link-u:hover, .link-u:focus-visible { background-size: 100% 2px; }

/* ------------------------------------------------------------------ boot --- */
/* Pozadina je PROVIDNA namerno. Ispod stoji #stars, koji nije sakriven dok
   traje učitavanje — pa se isto zvezdano polje (i iste planete) vidi već na
   uvodnom ekranu, a prelaz na stranicu nema promenu podloge. Boju drži
   `html { background }`, tako da nema ni bleska bele. */
.boot {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: transparent;
}
.boot__mark { width: clamp(300px, 74vmin, 760px); height: auto; overflow: visible; }
.boot__t {
  font-family: var(--sc-font-mark); font-weight: 700;
  font-size: 62px; letter-spacing: 0.13em;
}
.boot__ghost { fill: color-mix(in oklab, var(--sc-ink) 18%, transparent); }
.boot__solid { fill: #FFFFFF; opacity: clamp(0, calc((var(--fill, 0) - 0.80) / 0.20), 1); }
.boot__wave { fill: var(--il-water); }
.boot__wave--back { opacity: 0.45; }
/* voda se penje kroz slova: prazno na 0, do vrha verzala na 1 */
.boot__rise { transform: translateY(calc(74px - var(--fill, 0) * 70px)); }
.boot__wave--front { animation: bootbob 2.4s linear infinite; }
.boot__wave--back  { animation: bootbob 3.6s linear infinite reverse; }
@keyframes bootbob { to { transform: translateX(150px); } }

.boot__mark { transition: transform 640ms var(--sc-ease-drawer), opacity 220ms linear 420ms; }
.boot { transition: opacity 420ms var(--sc-ease-out) 260ms, visibility 0s linear 700ms; }
.boot.is-done { opacity: 0; visibility: hidden; }
.boot.is-done .boot__mark { opacity: 0; }

.boot-pending main, .boot-pending .doc-head, .boot-pending .vert,
.boot-pending .vert__ticks, .boot-pending .gauge { opacity: 0; }
.boot-ready main, .boot-ready .doc-head, .boot-ready .vert,
.boot-ready .vert__ticks, .boot-ready .gauge {
  opacity: 1; transition: opacity 520ms var(--sc-ease-out);
}
.boot-ready .doc-head { transition-delay: 140ms; }
.boot-ready .vert, .boot-ready .vert__ticks, .boot-ready .gauge { transition-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  .boot__wave--front, .boot__wave--back { animation: none; }
  .boot__mark { transition: opacity 160ms linear; }
  .boot { transition: opacity 200ms linear, visibility 0s linear 200ms; }
  .boot.is-done .boot__mark { transform: none !important; }
}