/* R7: pretraga sajta = R13 sloj DOSLOVNO iz produkcijskog site.css (R01B). Panel zadržava produkcijske boje;
   dugme u svetloj 2027 traci dobija svetle vrednosti. Ne menjati ovde: izvor je produkcija. */
.bs-wrap{--ink:#f4f0e6;--line:rgba(244, 240, 230, 0.09);--line-strong:rgba(244, 240, 230, 0.16);--dim:#8b877b;--muted:#b7b2a6;--panel:#101011;--live:#9ecf8e;--font-d:'Archivo', 'Segoe UI', sans-serif;--font-m:'IBM Plex Mono', 'Consolas', monospace;--t-flash:180ms;}
.nav-search{--line-strong:rgba(20,19,16,.18);--dim:#5c574c;--font-d:'Archivo','Segoe UI',sans-serif;--font-m:'IBM Plex Mono','Consolas',monospace;--t-flash:180ms;--ink:#141310}
.nav-right .nav-search{margin-right:2px}
@media (max-width:1100px){.nav-right .nav-search .nst,.nav-right .nav-search .nsk{display:none}.nav-right .nav-search{width:40px;height:40px;padding:0;justify-content:center}}
/* R13:CSS:START */
/* ============================================================
   PRETRAGA — R404_SMART_SEARCH_UX_R02
   Zamenjuje R12 sloj u celini.

   Zašto ponovo: R12 dizajn nije bio loš, ali ga posetilac nikad nije
   video — produkcija je servirala stari `site.css` iz zatrovanog edge
   keša, pa je pretraga radila BEZ ijednog pravila (vidi 02_ROOTCAUSE).
   Vlasnik je odbio ono što je video. R02 gradi UI iznova po merilima
   koja su iz toga izvučena:

     · zatvoreno stanje mora da bude TIŠE od CTA dugmeta,
     · nijedan element ne sme da radi bez svog pravila (nema golog SVG-a
       koji bez CSS-a naraste na 300×150),
     · rezultat je CELA vrsta, ne dve linije teksta — meta za prst ≥44 px,
     · mobilni je list preko celog ekrana sa svojim zaglavljem, ne
       smanjen desktop.

   Boje su isključivo postojeći SIGNAL tokeni. Nema nove palete, nema
   sjaja, nema „AI" vizuala. Pretraga je alat.
   ============================================================ */

/* ============================================================
   1 · OKIDAČ U TRACI
   Prvo pravilo je odbrana: znak DOBIJA dimenziju ovde, ali i u samom
   HTML-u (`width`/`height` atributi). Da je to bilo tako u R12, pad
   CSS-a bi dao sitan znak umesto sivog kvadrata od 300×150 px.
   ============================================================ */
.nav-search {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 11px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: none; color: var(--dim);
  font: 500 12.5px/1 var(--font-d); letter-spacing: -.005em;
  cursor: pointer;
  transition: color var(--t-flash) var(--ease-out), border-color var(--t-flash) var(--ease-out);
}
.nav-search:hover, .nav-search:focus-visible { color: var(--ink); border-color: var(--gold-deep); }
.nav-search:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nav-search .nsi { width: 14px; height: 14px; flex: none; }
.nav-search .nsk {
  padding: 2px 5px; border-radius: 4px; border: 1px solid var(--line-strong);
  color: var(--dim); font: 500 9.5px/1 var(--font-m);
}
/* Ispod 1240 px traka nema mesta za reč — ostaje krug od 36 px sa
   znakom. Meta je i dalje veća od same ikonice. */
@media (max-width: 1240px) {
  .nav-search { width: 36px; padding: 0; justify-content: center; }
  .nav-search .nst, .nav-search .nsk { display: none; }
}
/* Mobilna fioka: pretraga je prvi red, puna širina, 52 px visine. */
.menu-search {
  display: flex; align-items: center; gap: 11px; width: 100%;
  margin: 0 0 16px; padding: 0 16px; height: 52px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: rgba(244, 240, 230, .03);
  color: var(--muted); font: 500 15px/1 var(--font-d); text-align: left; cursor: pointer;
}
.menu-search .nsi { width: 17px; height: 17px; flex: none; }

/* ============================================================
   2 · LJUSKA DIJALOGA
   `hidden` je jedini prekidač. Kad stoji, ništa od pretrage ne postoji
   ni u toku dokumenta ni u redosledu tabulatora (`inert` u JS-u).
   ============================================================ */
.bs-wrap { position: fixed; inset: 0; z-index: 90; }
.bs-wrap[hidden] { display: none !important; }
html.bs-locked { overflow: hidden; }

.bs-scrim {
  position: absolute; inset: 0;
  /* Dovoljno tamno da panel bude jedina stvar koja se čita, ne toliko da
     strana nestane — mereno na naslovnoj, čiji hero je najsvetliji kadar
     na sajtu. */
  background: rgba(2, 2, 2, .86);
  animation: bs-fade 150ms var(--ease-out) both;
}
@keyframes bs-fade { from { opacity: 0 } to { opacity: 1 } }

.bs-panel {
  position: absolute; left: 50%; top: 8vh; transform: translateX(-50%);
  width: min(680px, calc(100vw - 48px));
  max-height: min(70vh, 620px);
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .7);
  overflow: hidden;
  animation: bs-in 180ms var(--ease-out) both;
}
@keyframes bs-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px) }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) }
}

/* ============================================================
   3 · POLJE
   ============================================================ */
.bs-bar {
  display: flex; align-items: center; gap: 11px;
  padding: 0 12px 0 16px; border-bottom: 1px solid var(--line);
  flex: none;
}
.bs-bar .bs-ico { width: 17px; height: 17px; flex: none; color: var(--dim); }
.bs-input {
  flex: 1; min-width: 0; height: 56px; border: 0; background: none; outline: none;
  color: var(--ink); font: 400 17px/1.2 var(--font-d); letter-spacing: -.01em;
}
.bs-input::placeholder { color: var(--dim); }
.bs-input::-webkit-search-cancel-button { display: none; }

/* Na desktopu je izlaz oznaka tastera, ne dugme: `Esc` uči prečicu i ne
   pravi drugu metu pored polja (isto rade Vercel i DocSearch). */
.bs-esc {
  flex: none; padding: 4px 7px; border: 1px solid var(--line-strong); border-radius: 5px;
  background: none; color: var(--dim); font: 500 10px/1 var(--font-m); cursor: pointer;
}
.bs-esc:hover { color: var(--ink); border-color: var(--gold-deep); }
/* Brisanje upita — pojavljuje se tek kad ima šta da se briše. */
.bs-clear {
  flex: none; width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: none; color: var(--dim); cursor: pointer; position: relative;
}
.bs-clear[hidden] { display: none; }
.bs-clear::before, .bs-clear::after {
  content: ''; position: absolute; left: 9px; top: 14px; width: 12px; height: 1.5px;
  background: currentColor;
}
.bs-clear::before { transform: rotate(45deg) } .bs-clear::after { transform: rotate(-45deg) }
.bs-clear:hover { color: var(--ink); }

/* Zaglavlje lista — samo na telefonu. */
.bs-head { display: none; }

/* ============================================================
   4 · REZULTATI
   ============================================================ */
.bs-out { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0 10px; }
.bs-block { padding: 10px 14px 2px; }
.bs-h {
  display: block; margin-bottom: 8px;
  font: 600 10px/1 var(--font-m); letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim);
}
.bs-hits { display: flex; flex-direction: column; gap: 4px; }

/* CELA vrsta je meta. 44 px je donja granica koju su merili svi — ovde
   je najmanja moguća vrsta 56 px, jer nosi dva reda teksta. */
.bs-hit {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(244, 240, 230, .02);
  text-decoration: none; color: inherit;
  transition: border-color var(--t-flash) var(--ease-out), background var(--t-flash) var(--ease-out);
}
.bs-hit:hover { border-color: var(--line-strong); background: rgba(244, 240, 230, .045); }
.bs-hit.is-on { border-color: var(--gold-deep); background: rgba(233, 184, 80, .06); }
.bs-hit:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bs-hit-m { flex: 1; min-width: 0; }

.bs-ty {
  display: inline-block; margin-bottom: 4px; padding: 2px 6px;
  border: 1px solid var(--line-strong); border-radius: 3px;
  font: 600 8.5px/1.4 var(--font-m); letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim);
}
/* Ton, ne eksplozija boja: samo tri stvari koje posetilac stvarno
   razdvaja dobijaju akcenat. */
.bs-ty--cena, .bs-ty--kontakt { color: var(--gold); border-color: var(--gold-deep); }
.bs-ty--aplikacija, .bs-ty--demo { color: var(--live); border-color: rgba(158, 207, 142, .35); }

.bs-hit-t { display: block; font: 600 14.5px/1.3 var(--font-d); color: var(--ink); }
.bs-hit-d {
  margin-top: 2px; font: 400 12.5px/1.45 var(--font-d); color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bs-hit mark { background: rgba(233, 184, 80, .2); color: var(--gold-hi); border-radius: 2px; padding: 0 1px; }

/* Strelica umesto reči „Otvorite" na svakoj vrsti: isti signal, nula
   ponovljenog teksta koji čitač ekrana mora da čita petnaest puta. */
.bs-arr {
  flex: none; width: 7px; height: 7px; margin-right: 3px;
  border-top: 1.5px solid var(--dim); border-right: 1.5px solid var(--dim);
  transform: rotate(45deg);
  transition: border-color var(--t-flash) var(--ease-out);
}
.bs-hit:hover .bs-arr, .bs-hit.is-on .bs-arr { border-color: var(--gold); }

/* ============================================================
   5 · DIREKTAN ODGOVOR
   Kartica sme da bude prva, ali ne sme da bude veća od liste ispod —
   odgovor je jedna rečenica i jedan put dalje.
   ============================================================ */
.bs-answer {
  margin: 10px 14px 2px; padding: 13px 15px;
  border: 1px solid var(--gold-deep); border-radius: 10px;
  background: rgba(233, 184, 80, .05);
}
.bs-answer .bs-h { color: var(--gold); margin-bottom: 6px; }
.bs-answer p { margin: 0; font: 400 14px/1.5 var(--font-d); color: var(--ink); }
.bs-answer-go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  color: var(--gold); text-decoration: none; font: 600 12.5px/1 var(--font-d);
}
.bs-answer-go .bs-arr { border-color: currentColor; margin: 0; }
.bs-answer-go:hover { color: var(--gold-hi); }

/* ============================================================
   6 · POČETNO STANJE I PRAZAN REZULTAT
   Nema pilula. Pilule su i bile ono što je bez CSS-a ispalo kao
   „slepljen niz linkova" — a i sa CSS-om su najmanja meta na strani.
   ============================================================ */
.bs-guide {
  display: flex; align-items: center; gap: 11px; margin-top: 8px;
  min-height: 48px; padding: 10px 12px;
  border: 1px dashed var(--line-strong); border-radius: 10px;
  text-decoration: none; background: none;
  transition: border-color var(--t-flash) var(--ease-out);
}
.bs-guide:hover { border-color: var(--gold-deep); }
.bs-guide:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bs-guide-m { flex: 1; min-width: 0; }
.bs-guide-t { display: block; font: 600 13.5px/1.3 var(--font-d); color: var(--ink); }
.bs-guide-d { display: block; margin-top: 1px; font: 400 12px/1.4 var(--font-d); color: var(--dim); }

.bs-zero-t {
  display: block; margin-bottom: 5px;
  font: 600 16px/1.35 var(--font-d); color: var(--ink); letter-spacing: -.01em;
}
.bs-note { margin: 0 0 10px; font: 400 12.5px/1.5 var(--font-d); color: var(--dim); }
.bs-loading { padding: 18px 14px; font: 400 13px/1 var(--font-d); color: var(--dim); }

/* ============================================================
   7 · PODNOŽJE
   ============================================================ */
.bs-foot {
  flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 16px; border-top: 1px solid var(--line);
  font: 400 10.5px/1 var(--font-d); color: var(--dim);
}
.bs-keys { display: flex; align-items: center; gap: 6px; }
.bs-keys kbd {
  padding: 3px 5px; border: 1px solid var(--line-strong); border-radius: 4px;
  font: 500 9.5px/1 var(--font-m); color: var(--dim);
}
.bs-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================
   8 · TELEFON — list preko celog ekrana, ne smanjen desktop

   `100dvh` je ovde ceo posao: `100vh` na Androidu ne zna za tastaturu,
   pa bi podnožje i poslednja vrsta ostali ispod nje. Polje je u
   zaglavlju koje ne skroluje, rezultati skroluju ispod njega — tako
   tastatura sme da pojede pola ekrana a da upit ostane vidljiv.
   ============================================================ */
@media (max-width: 760px) {
  .bs-panel {
    top: 0; left: 0; transform: none;
    width: 100vw; max-width: 100vw;
    height: 100dvh; max-height: 100dvh;
    border: 0; border-radius: 0;
    animation: bs-up 200ms var(--ease-out) both;
  }
  @keyframes bs-up { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: translateY(0) } }
  .bs-scrim { display: none; }

  /* Zaglavlje: nazad + naslov. Bez njega korisnik ne zna gde je i
     čime da izađe — a `Esc` na telefonu ne postoji. */
  .bs-head {
    display: flex; align-items: center; gap: 10px; flex: none;
    height: 52px; padding: 0 6px 0 4px; border-bottom: 1px solid var(--line);
  }
  .bs-back {
    width: 44px; height: 44px; flex: none; border: 0; background: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); cursor: pointer; border-radius: 10px;
  }
  .bs-back:active { background: rgba(244, 240, 230, .06); }
  .bs-back svg { width: 20px; height: 20px; }
  .bs-head-t { font: 600 14.5px/1 var(--font-d); color: var(--ink); }

  .bs-bar { padding: 0 8px 0 16px; }
  .bs-esc { display: none; }
  .bs-clear { width: 44px; height: 44px; }
  .bs-clear::before, .bs-clear::after { left: 16px; top: 21px; }
  /* ≥16 px: iOS ne zumira stranu pri fokusu. */
  .bs-input { height: 54px; font-size: 16.5px; }

  .bs-out { padding-bottom: 20px; }
  .bs-block { padding: 10px 12px 2px; }
  .bs-hit { min-height: 64px; padding: 12px; gap: 10px; }
  .bs-hit-t { font-size: 15px; }
  .bs-answer { margin: 10px 12px 2px; }
  .bs-guide { min-height: 56px; }
  /* Tasterski red na telefonu ne znači ništa. */
  .bs-keys { display: none; }
  .bs-foot { justify-content: center; padding: 11px 14px; }
}

/* ============================================================
   9 · PRISTUPAČNOST
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .bs-scrim, .bs-panel { animation: none; }
  .bs-hit, .bs-guide, .nav-search, .bs-arr { transition: none; }
}
@media (prefers-contrast: more) {
  .bs-hit { border-color: var(--line-strong); }
  .bs-hit-d, .bs-note, .bs-guide-d { color: var(--muted); }
}
/* R13:CSS:END */