/* Povod — izgled.

   PALETA JE NAXIJEVA (odluka vlasnika 06.08). Njegovim recima: "to je vec
   isproban recept jako dugo i na tome smo radili godinama".

   Prvi pokusaj je promasio: prebrojane su pojedinacne heks vrednosti u
   njihovom homepage.css i izvucena je tamna #20273C. Vlasnik je odmah
   rekao da to nije ta plava — "Naxi koristi mnogo lepsu plavu pastelniju".
   Bio je u pravu: njihova prava plava ne stoji kao pojedinacna boja nego u
   GRADIJENTU, koji je i njihov potpis:

       linear-gradient(90deg, #076E9D 0%, #4EA8D3 60%, #FFDD00 100%)

   Plava koja prelazi u zutu. Otuda porodica koja se ovde koristi:
       #FFDD00  zuta
       #4EA8D3  pastelna plava
       #076E9D  srednja plava
       #002D52  duboka plava
   Crvena, narandzasta i zelena koje se tamo nalaze idu po kanalima radija
   i nisu deo osnovnog izgleda — ne uzimaju se.

   Zuta se koristi STEDLJIVO — datumi, trake, dugmad. Cim je bude svuda,
   prestane da vodi oko. Na svetloj podlozi zuta NE MOZE biti tekst (ne
   cita se), pa je tamo nosi puna traka ili crta uz datum, gde uvek ima
   tamno ispod sebe.

   Naslovi serifni, tekst sistemski. */

/* Dva Naxijeva prelaza. Glavni sajt nosi plavo->zuto; svaki KANAL ima svoj
   u istom obliku. Vlasnik je poslao pozadinu za Naxi Chill i rekao da mu se
   dopada bas ta kombinacija — izmerena je iz same datoteke, piksel po piksel:
       #26A5F2  nebo-plava   ->  #4FC0A8  tirkiz  ->  #ADEF2B  limun-zelena
   Tri teme se razlikuju SAMO po tome koji prelaz nose i na cemu stoje. */

:root, :root[data-tema="a"] {
  /* A — CRNA, prelaz plavo->zuto (Naxi glavni). */
  --tlo:        #000000;
  --povrsina:   #121317;
  --mastilo:    #F0F1F3;
  --meko:       #A2A6AE;
  --bledo:      #71757E;
  --linija:     #262930;
  --linija-tanka:#1B1D22;
  --naglasak:   #FFDD00;
  --na-naglasku:#000000;
  --naglasak-meki:#1E2026;
  --drugi:      #4EA8D3;
  --greska:     #FF9A9A;
  --greska-meka:#2E1A20;
  --senka:      rgba(0,0,0,.6);
  --prelaz: linear-gradient(90deg, #076E9D 0%, #4EA8D3 60%, #FFDD00 100%);
}

:root[data-tema="b"] {
  /* B — CRNA, prelaz plavo->zeleno (Naxi Chill). Limun-zelena na crnom
     svetli jace nego zuta, a tirkiz u sredini je ono sto tu kombinaciju
     cini toplom umesto ostrom. */
  --tlo:        #000000;
  --povrsina:   #111417;
  --mastilo:    #F0F2F1;
  --meko:       #A0A8A6;
  --bledo:      #6F7876;
  --linija:     #23292B;
  --linija-tanka:#181D1F;
  --naglasak:   #ADEF2B;
  --na-naglasku:#0A1200;
  --naglasak-meki:#1A2118;
  --drugi:      #26A5F2;
  --greska:     #FF9A9A;
  --greska-meka:#2E1A20;
  --senka:      rgba(0,0,0,.6);
  --prelaz: linear-gradient(90deg, #26A5F2 0%, #4FC0A8 45%, #ADEF2B 100%);
}

:root[data-tema="c"] {
  /* C — KOLORIT SLIKE. Vlasnik: "poslao sam ti primer fotografije na kojoj
     su lepo uklopljene boje, kao predlog da probamo da iskoristimo taj
     kolorit za nas sajt." Kvantizacija cele slike (ne samo jastucica) daje
     tri porodice:
        topli pesak i belo   #ECE6D9 #D0C6AC #F4F2ED   26% slike
        maslinasto zelenilo  #91873C #747543 #9EB48D   36%
        nebo-plava           #3575BF #5C849F           24%
     Odatle podloga od peska, mastilo boje dubokog mora, plava za dugmad
     i veze, maslinasta kao druga boja. Jastucic i dalje nosi Chill prelaz. */
  --tlo:        #F1EEE6;
  --povrsina:   #FBFAF6;
  --mastilo:    #223642;
  --meko:       #5C6E76;
  /* Spusteno sa #8E9A9E: na peskovitoj podlozi je davalo kontrast 2.5:1,
     a trazi se 4.5. Tom bojom su ispisani dani u nedelji i sve sitne
     napomene — bas ono sto covek preko pedeset ne bi procitao. */
  --bledo:      #616D71;
  --linija:     #DED8CA;
  --linija-tanka:#EAE5DA;
  --naglasak:   #1F6AA3;
  --na-naglasku:#FFFFFF;
  --naglasak-meki:#E4EDF3;
  --drugi:      #7E9027;
  --greska:     #A3342B;
  --greska-meka:#FBEAE8;
  --senka:      rgba(34,54,66,.08);
  --prelaz: linear-gradient(90deg, #26A5F2 0%, #4FC0A8 45%, #ADEF2B 100%);
}

:root {
  /* Prelaz se koristi samo tamo gde nesto ZNACI: koliko je profila
     popunjeno, dokle si stigao u upisu, i jastucic nad programom.
     Kao ukras nigde. Sama vrednost stoji uz svaku temu gore. */

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--mastilo);
  font-family: var(--sans);
  /* Krupnije i prozracnije nego sto bi bilo na beloj podlozi — svetla slova
     na tamnom deluju tanja nego sto jesu. */
  font-size: 17.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

/* Okvir je citaonicka kolona — 30rem drzi red teksta na ~65 znakova.
   Strana koja prikazuje mrezu modula trazi siri okvir klasom "sirok";
   tekst unutar njega ostaje uzak preko .kolona, da se ne razvuce. */
.okvir {
  --sirina: 30rem;
  max-width: var(--sirina);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}
.okvir.sirok { --sirina: 58rem; }
.kolona { max-width: 34rem; }

/* --- zaglavlje --- */
.zaglavlje {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0 1.35rem;
  /* Crta ispod zaglavlja nosi prelaz — jedina stalna tacka na svakoj strani. */
  background: var(--prelaz) bottom left / 100% 2px no-repeat;
  margin-bottom: 2rem;
}
.znak {
  font-family: var(--serif);
  font-size: 1.7rem;
  letter-spacing: -0.03em;
  color: var(--mastilo);
  text-decoration: none;
}
.znak span { color: var(--drugi, var(--naglasak)); }
.zaglavlje nav { display: flex; gap: 1rem; font-size: 0.88rem; }
.zaglavlje nav a { color: var(--meko); text-decoration: none; }
.zaglavlje nav a:hover { color: var(--naglasak); }

/* --- naslovi i tekst --- */
h1 {
  font-family: var(--serif);
  font-size: 1.9rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 0.6rem;
  text-wrap: balance;
}
h2 {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--naglasak);
  margin: 2rem 0 0.8rem;
}
p { margin: 0 0 1rem; max-width: 34rem; }
.uvod { color: var(--meko); margin-bottom: 2rem; }
.sitno { font-size: 0.85rem; color: var(--bledo); }
a { color: var(--naglasak); }

/* --- obrasci --- */
form { display: flex; flex-direction: column; gap: 1.25rem; }
.polje { display: flex; flex-direction: column; gap: 0.4rem; }
label { font-size: 0.9rem; font-weight: 600; }
.pomoc { font-size: 0.82rem; color: var(--bledo); font-weight: 400; }

input[type=text], input[type=tel], input[type=email], input[type=number],
select, textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font: inherit;
  color: var(--mastilo);
  background: var(--povrsina);
  border: 1px solid var(--linija);
  border-radius: 3px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--naglasak);
  outline-offset: 2px;
}

.kod-polje {
  font-family: var(--serif);
  font-size: 2rem;
  letter-spacing: 0.5em;
  text-align: center;
  padding: 0.8rem;
}

button, .dugme {
  display: inline-block;
  padding: 0.75rem 1.4rem;
  font: inherit;
  font-weight: 600;
  color: var(--na-naglasku);
  background: var(--naglasak);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
button:hover, .dugme:hover { filter: brightness(1.1); }
button.tiho, .dugme.tiho {
  background: transparent;
  color: var(--meko);
  border: 1px solid var(--linija);
  font-weight: 500;
}
/* --- izbori --- */
.izbor { display: flex; flex-direction: column; gap: 0.1rem; }
.izbor label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.75rem 0.2rem;
  border-bottom: 1px solid var(--linija-tanka);
  font-weight: 400;
  cursor: pointer;
}
.izbor input { margin-top: 0.28rem; accent-color: var(--naglasak); }
.izbor-red { display: flex; gap: 0.6rem; }
.izbor-red label {
  flex: 1;
  justify-content: center;
  border: 1px solid var(--linija);
  border-radius: 3px;
  padding: 0.7rem 0.5rem;
}
.izbor-red input { margin: 0; }

/* --- poruke --- */
.poruka {
  padding: 0.8rem 1rem;
  border-radius: 3px;
  margin-bottom: 1rem;
  font-size: 0.92rem;
  border-left: 3px solid;
}
.poruka.greska { background: var(--greska-meka); border-color: var(--greska); }
.poruka.ok { background: var(--naglasak-meki); border-color: var(--naglasak); }

/* --- traka popunjenosti --- */
/* Prelaz stoji na CELOJ traci, a "i" pokriva ono sto jos nije popunjeno.
   Zato boja na 40% zaista jeste plava, a zuta se stigne tek pred kraj —
   da je prelaz bio na samoj popuni, svaka traka bi zavrsavala zuto i
   ne bi znacila nista. */
.traka {
  position: relative;
  height: 8px;
  background: var(--prelaz);
  border-radius: 4px;
  overflow: hidden;
  margin: 0.5rem 0 0.3rem;
}
.traka > i {
  position: absolute; right: 0; top: 0; bottom: 0;
  display: block;
  background: var(--linija-tanka);
}
.spisak-stavki { list-style: none; padding: 0; margin: 0.8rem 0 0; }
.spisak-stavki li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--linija-tanka);
  font-size: 0.92rem;
}
.spisak-stavki .ima { color: var(--naglasak); }
.spisak-stavki .nema { color: var(--bledo); }

.kartica {
  background: var(--povrsina);
  border: 1px solid var(--linija);
  border-radius: 3px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
}

/* Isti obrazac: prelaz je na celom redu, a nezavrseni koraci ga pokrivaju.
   Tako poslednji korak zaista dolazi do zute. */
.koraci {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
  background: var(--prelaz);
  border-radius: 2px;
}
.koraci i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
}
.koraci i:not(.gotov) { background: var(--linija); }

/* --- oznake (interesovanja) --- */
.oznake { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.oznaka {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--linija);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 400;
  cursor: pointer;
  background: var(--povrsina);
}
.oznaka input { display: none; }
.oznaka:has(input:checked) {
  background: var(--naglasak-meki);
  border-color: var(--naglasak);
  color: var(--naglasak);
  font-weight: 600;
}
.oznaka:has(input:focus-visible) { outline: 2px solid var(--naglasak); outline-offset: 2px; }
.oznaka.staticna { cursor: default; }

/* --- slike --- */
.slike-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.7rem;
}
.slika-kutija { position: relative; }
.slika-kutija img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  background: var(--linija-tanka);
}
.oznaka-stanja {
  position: absolute;
  top: 0.4rem; left: 0.4rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  background: rgba(0,0,0,.72);
  color: #fff;
}
.oznaka-stanja.glavna { background: var(--naglasak); left: auto; right: 0.4rem; }
.slika-radnje { display: flex; gap: 0.35rem; margin-top: 0.35rem; }
.slika-radnje form { flex: 1; }
.sitno-dugme { width: 100%; padding: 0.35rem 0.4rem; font-size: 0.76rem; }

textarea { resize: vertical; min-height: 5rem; }
input[type=file] { font-size: 0.9rem; }

/* --- filteri --- */
.filteri { gap: 0.6rem; margin-bottom: 1.75rem; }
.filter-red { display: flex; gap: 0.6rem; }
.filter-red > * { flex: 1; min-width: 0; }

/* --- mreza ljudi --- */
.ljudi-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 1rem 0.7rem;
}
.covek {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
  color: var(--mastilo);
}
.covek img, .covek .bez-slike {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  background: var(--linija-tanka);
}
.covek .bez-slike {
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 2.2rem;
  color: var(--bledo);
}
.covek strong { font-size: 0.95rem; font-weight: 600; }
.covek:hover strong { color: var(--naglasak); }
.stranice { display: flex; gap: 0.6rem; margin-top: 2rem; }

/* --- pozdravi --- */
.pozdrav-covek {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; color: var(--mastilo); margin-bottom: 0.7rem;
}
.pozdrav-covek img, .bez-slike.malo {
  width: 3rem; height: 3rem; border-radius: 50%;
  object-fit: cover; flex: none; background: var(--linija-tanka);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.2rem; color: var(--bledo);
}
.pozdrav-tekst {
  border-left: 3px solid var(--naglasak);
  padding: 0.2rem 0 0.2rem 0.8rem;
  margin: 0 0 0.9rem;
  font-family: var(--serif); font-size: 1.02rem; line-height: 1.5;
}

/* --- spisak razgovora --- */
.razgovori { list-style: none; padding: 0; margin: 0; }
.razgovori li { border-bottom: 1px solid var(--linija-tanka); }
.razgovori a {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.8rem 0; text-decoration: none; color: var(--mastilo);
}
.razgovori img, .razgovori .bez-slike.malo { width: 2.8rem; height: 2.8rem; }
.razgovor-tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.razgovor-tekst .sitno { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.broj {
  display: inline-block; min-width: 1.3rem; padding: 0 0.35rem;
  background: var(--naglasak); color: var(--na-naglasku); border-radius: 999px;
  font-size: 0.72rem; text-align: center; margin-left: 0.4rem;
}

/* --- prepiska --- */
.razgovor-vrh { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.poruke { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.poruka-mehur {
  max-width: 80%; padding: 0.6rem 0.85rem; border-radius: 12px;
  font-size: 0.97rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
}
.poruka-mehur.moja { align-self: flex-end; background: var(--naglasak-meki); border-bottom-right-radius: 3px; }
.poruka-mehur.njegova { align-self: flex-start; background: var(--povrsina); border: 1px solid var(--linija); border-bottom-left-radius: 3px; }
.poruka-mehur .vreme { display: block; font-size: 0.7rem; color: var(--bledo); margin-top: 0.25rem; }
/* Stoji uz poslednju procitanu moju poruku — tiho, da ne pravi pritisak. */
.videno { align-self: flex-end; font-size: 0.7rem; color: var(--bledo); margin-top: -0.15rem; }
.pisanje { position: sticky; bottom: 0; background: var(--tlo); padding-top: 0.5rem; gap: 0.6rem; }

.kao-link {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--naglasak); cursor: pointer; text-decoration: underline;
}

/* --- izlasci --- */
.izlazak-kartica {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 1rem 1.15rem; margin-bottom: 0.8rem;
  background: var(--povrsina); border: 1px solid var(--linija);
  border-radius: 3px; text-decoration: none; color: var(--mastilo);
}
.izlazak-kartica:hover { border-color: var(--naglasak); }
.izlazak-kartica .kada {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--naglasak); font-weight: 600;
}
.izlazak-kartica strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; }
.znak-prijave {
  align-self: flex-start; margin-top: 0.3rem;
  padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.72rem;
  background: var(--naglasak-meki); color: var(--naglasak);
}

/* dugme koje izgleda kao oznaka — povodi za razgovor */
button.oznaka { font: inherit; font-size: 0.88rem; color: var(--mastilo); }
button.oznaka:hover { border-color: var(--naglasak); color: var(--naglasak); filter: none; }

.podnozje {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem;
  margin-top: 4rem; padding-top: 1.2rem;
  border-top: 1px solid var(--linija-tanka);
  font-size: 0.82rem;
}
.podnozje a { color: var(--bledo); text-decoration: none; }
.podnozje a:hover { color: var(--naglasak); }

/* ============ POCETNA STRANA ============
   Prva i jedina strana koju covek vidi pre nego sto odluci da se registruje.
   Zato: krupna tipografija umesto kutija, i pravi termini umesto obecanja. */

.uvodna { padding: 1rem 0 3rem; }
.uvodna .mesto {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--naglasak); margin: 0 0 1.2rem; font-weight: 600;
}
.uvodna h1 {
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin: 0 0 1.4rem;
}
.uvodna h1 em { font-style: italic; color: var(--naglasak); }
.uvodna-tekst {
  color: var(--meko); font-size: 1.02rem; line-height: 1.65;
  max-width: 32rem; margin-bottom: 1.8rem;
}
.uvodna-dugmad { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.8rem; }

/* najavljeni izlasci — dokaz da mesto zivi */
.najava {
  display: grid; grid-template-columns: 3.6rem 1fr; gap: 0 1rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--linija-tanka);
  align-items: baseline;
}
.najava:first-of-type { border-top: 1px solid var(--linija); }
.najava-kada {
  font-family: var(--serif); font-size: 1.05rem; color: var(--naglasak);
  font-variant-numeric: tabular-nums;
}
.najava-sta { display: flex; flex-direction: column; gap: 0.15rem; }
.najava-sta strong { font-weight: 600; }

/* nacela — tekst, ne kutije */
.nacelo { padding: 1.1rem 0; border-top: 1px solid var(--linija-tanka); }
.nacelo:first-of-type { border-top: 1px solid var(--linija); }
.nacelo h3 {
  font-family: var(--serif); font-size: 1.12rem; font-weight: 400;
  letter-spacing: -0.01em; margin: 0 0 0.4rem; color: var(--mastilo);
}
.nacelo p { margin: 0; color: var(--meko); font-size: 0.96rem; }

.nije {
  border-left: 3px solid var(--linija); padding-left: 1rem;
  color: var(--meko); font-size: 0.96rem; line-height: 1.9;
}

.poziv-dole {
  margin-top: 3.5rem; padding-top: 2rem;
  border-top: 1px solid var(--linija);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
}
.poziv-dole p { font-family: var(--serif); font-size: 1.15rem; color: var(--meko); margin: 0; }

/* zaglavlje: kad covek nije prijavljen, znak nosi i slogan */
.zaglavlje .znak-slogan {
  display: block; font-family: var(--sans); font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--bledo);
  margin-top: 0.15rem;
}

/* ============ DONJA TRAKA (telefon) ============
   Gore je red sitnih tekstualnih veza — na telefonu tesan za palac.
   Namerno BEZ crvenih brojaca neprocitanog: brojke prave pritisak, a ceo
   Povod je gradjen tako da pritiska nema. */

.donja-traka { display: none; }

@media (max-width: 40rem) {
  .zaglavlje nav.gornja a:not([href$="odjava"]) { display: none; }
  body { padding-bottom: 4.6rem; }

  .donja-traka {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--povrsina);
    border-top: 1px solid var(--linija);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .donja-traka a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
    padding: 0.55rem 0.2rem 0.5rem;
    text-decoration: none; color: var(--bledo);
    font-size: 0.66rem; letter-spacing: 0.02em;
    min-height: 3.4rem;                 /* dovoljno za palac */
    white-space: nowrap;                /* sest stavki — natpis ne sme da se lomi */
    overflow: hidden;
  }
  .donja-traka svg {
    width: 22px; height: 22px;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .donja-traka a.ovde { color: var(--naglasak); }
  .donja-traka a:active { background: var(--linija-tanka); }
}

/* povod koji je objavio clan — jasno drugaciji od partnerskog izlaska */
.izlazak-kartica.od-clana { border-left: 3px solid var(--brass, #C9A227); }
.izlazak-kartica.od-clana .kada { color: var(--meko); }
.kartica.upozorenje-clan { border-color: var(--linija); background: var(--linija-tanka); }

/* slika mesta na izlasku — pravo mesto, ne stok fotografija ljudi */
.izlazak-slika {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: 3px; display: block; margin-bottom: 0.7rem;
  background: var(--linija-tanka);
}
.izlazak-slika.velika { aspect-ratio: 3/2; margin-bottom: 1.2rem; }
.najava.sa-slikom { grid-template-columns: 5.5rem 3.6rem 1fr; }
.najava-slika {
  width: 5.5rem; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 3px; grid-row: span 1;
}
@media (max-width: 30rem) {
  .najava.sa-slikom { grid-template-columns: 4rem 1fr; }
  .najava.sa-slikom .najava-kada { grid-column: 2; }
}

/* ============ PRETRAGA LJUDI ============
   Ranije: tri reda padajucih menija pa kartice na kojima pise samo nadimak
   i godine — po tome se ne moze odluciti hoces li nekom pisati. */

.vise-filtera { margin-top: 0.4rem; }
.vise-filtera summary {
  cursor: pointer; font-size: 0.85rem; color: var(--meko);
  padding: 0.35rem 0; list-style: none;
}
.vise-filtera summary::-webkit-details-marker { display: none; }
.vise-filtera summary::before { content: "＋ "; color: var(--naglasak); }
.vise-filtera[open] summary::before { content: "－ "; }
.vise-filtera > .filter-red { margin-bottom: 0.6rem; }

.ljudi-mreza { gap: 1.6rem 0.8rem; }
.covek { gap: 0.3rem; }
.covek-ime {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem;
  font-weight: 650; font-size: 0.95rem; margin-top: 0.15rem;
}
.covek-god { font-weight: 400; color: var(--bledo); font-size: 0.85rem; }
.covek-recenica {
  font-family: var(--serif); font-size: 0.86rem; line-height: 1.4;
  color: var(--meko);
}
.covek-oznake { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.1rem; }
.mala-oznaka {
  font-size: 0.68rem; padding: 0.1rem 0.4rem; border-radius: 999px;
  background: var(--linija-tanka); color: var(--meko); white-space: nowrap;
}
.mala-oznaka.deli { background: var(--naglasak-meki); color: var(--naglasak); font-weight: 600; }
.covek-zajedno { font-size: 0.72rem; color: var(--naglasak); }

/* Slika nije obavezna — zato prazna kartica mora da izgleda namerno,
   ne pokvareno. Cetiri prigusena tona iz nase palete, po nalogu. */
.covek .bez-slike.ton0 { background: var(--naglasak-meki); color: var(--naglasak); }
.covek .bez-slike.ton1 { background: #2B3147; color: #A6B0C8; }
.covek .bez-slike.ton2 { background: #23303E; color: #8FB3C6; }
.covek .bez-slike.ton3 { background: #2E2B3E; color: #ABA3C4; }

/* ============ TUDJI PROFIL ============
   Ovde covek odlucuje. Zato: prvo ko je, pa tek onda dugme — ranije je
   obrazac za pozdrav stajao IZNAD teksta o coveku. */

.profil-slike {
  display: flex; gap: 0.5rem; overflow-x: auto;
  margin: 0 -1.25rem 1.2rem; padding: 0 1.25rem;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.profil-slike img {
  width: 78%; max-width: 21rem; flex: none;
  aspect-ratio: 3/4; object-fit: cover; border-radius: 4px;
  scroll-snap-align: center; background: var(--linija-tanka);
}
.profil-slike img:only-child { width: 100%; }
.profil-bez-slike {
  display: grid; place-items: center;
  aspect-ratio: 3/2; border-radius: 4px; margin-bottom: 1.2rem;
  font-family: var(--serif); font-size: 4rem;
}
.profil-bez-slike.ton0 { background: var(--naglasak-meki); color: var(--naglasak); }
.profil-bez-slike.ton1 { background: #2B3147; color: #A6B0C8; }
.profil-bez-slike.ton2 { background: #23303E; color: #8FB3C6; }
.profil-bez-slike.ton3 { background: #2E2B3E; color: #ABA3C4; }

.profil-ime { margin-bottom: 0.3rem; }
.profil-osnovno { margin-bottom: 1.4rem; }
.potvrda { font-size: 0.82rem; color: var(--naglasak); }

/* Ono sto covek pise o sebi je jedino sto ga stvarno pokazuje — zato
   krupnije i serifno, kao citat, a ne kao stavka u formularu. */
.profil-o-sebi {
  font-family: var(--serif); font-size: 1.08rem; line-height: 1.6;
  border-left: 3px solid var(--naglasak-meki);
  padding-left: 1rem; margin-bottom: 1.6rem; white-space: pre-wrap;
}

.oznaka.staticna.deli {
  background: var(--naglasak-meki); border-color: var(--naglasak);
  color: var(--naglasak); font-weight: 600;
}

.profil-radnja { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--linija); }
.povod-za-pisanje {
  background: var(--naglasak-meki); border-radius: 3px;
  padding: 0.7rem 0.9rem; font-size: 0.92rem; color: var(--mastilo);
}
.lajk-red { flex-direction: row; align-items: center; gap: 0.8rem; margin-top: 1.2rem; flex-wrap: wrap; }
.lajk-red .sitno { flex: 1; min-width: 12rem; }
.profil-dole { margin-top: 2.5rem; }

/* sobe za dogovor */
.soba-znak {
  width: 2.8rem; height: 2.8rem; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--naglasak-meki); color: var(--naglasak);
  font-family: var(--serif); font-size: 1.05rem;
}
.ko-pise {
  display: block; font-size: 0.72rem; font-weight: 650;
  color: var(--naglasak); margin-bottom: 0.15rem;
}

/* ohrabrenje u koracima registracije — tu ljudi najvise odustaju */
.ohrabrenje {
  font-family: var(--serif); font-style: italic;
  color: var(--naglasak); font-size: 0.95rem;
  margin: -0.2rem 0 1.2rem;
}
/* podsetnik na bezbednost — samo pri prvoj poruci, posle smeta */
.kartica.podsetnik { border-left: 3px solid var(--naglasak); background: var(--naglasak-meki); }


/* ============================================================
   MODULI
   Gradivni delovi od kojih se slazu strane (vidi templates/moduli.html).

   NACELO: modul se sam prilagodjava sirini koju dobije. Ovde nema nijednog
   pravila oblika "na telefonu ovako, na monitoru onako" — mreza sama racuna
   koliko kolona stane, a kartica se sama preslaze. Zato jedan isti modul
   radi u uskoj koloni razgovora i u sirokom okviru pocetne strane.

   Odluka vlasnika 06.08: izlazak i covek dobijaju ISTU kartu — nista se ne
   povlascuje, pa postoji samo jedan modul "stavka".
   ============================================================ */

/* --- naslov odeljka --- */
.m-traka {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin: 2.6rem 0 0.9rem;
}
.m-traka h2 { margin: 0; }
.m-traka-veza { font-size: 0.85rem; color: var(--meko); white-space: nowrap; }

/* --- mreza: broj kolona racuna sama, bez ijednog @media --- */
.m-mreza {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}
.m-mreza.usko { grid-template-columns: 1fr; }

/* --- STAVKA: jedina kartica na sajtu --- */
.m-stavka {
  container-type: inline-size;          /* da se moze sama meriti */
  display: flex; gap: 0.9rem; align-items: flex-start;
  padding: 0.85rem 0.95rem;
  background: var(--povrsina);
  border: 1px solid var(--linija);
  border-radius: 3px;
  text-decoration: none; color: var(--mastilo);
  transition: border-color 0.15s, transform 0.15s;
}
.m-stavka:hover { border-color: var(--naglasak); }
.m-stavka:focus-visible { outline: 2px solid var(--naglasak); outline-offset: 2px; }

.m-stavka-slika {
  flex: 0 0 auto;
  width: 4.4rem; aspect-ratio: 1; object-fit: cover;
  border-radius: 3px; background: var(--linija-tanka);
  display: block;
}
/* Kartica bez slike ne sme da izgleda kao pokvarena — mesto se prosto
   ne rezervise. Prazan okvir bi kaznjavao onoga ko nije stavio sliku,
   a odlucili smo da slika nije obavezna. */
.m-stavka-slika.prazna { display: none; }

.m-stavka-telo { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; }
.m-stavka-oznaka {
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--naglasak); font-weight: 600;
}
.m-stavka-naslov { font-size: 1.02rem; font-weight: 600; line-height: 1.3; }
.m-stavka-podaci {
  font-size: 0.85rem; color: var(--meko);
  font-variant-numeric: tabular-nums;
}
.m-stavka-tekst {
  font-size: 0.92rem; color: var(--meko); line-height: 1.5; margin-top: 0.15rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.m-stavka-trag { font-size: 0.8rem; color: var(--bledo); margin-top: 0.2rem; }

/* Kad kartica dobije vise mesta, slika se povecava sama.
   Brauzeri bez container upita prosto zadrze manju sliku — nista ne puca. */
@container (min-width: 24rem) {
  .m-stavka { padding: 1rem 1.1rem; }
  .m-stavka-slika { width: 5.6rem; }
  .m-stavka-tekst { -webkit-line-clamp: 3; }
}

/* --- izjava (nacela, "sta nismo") --- */
.m-nacelo { padding: 1.1rem 0; border-top: 1px solid var(--linija-tanka); }
.m-nacelo:first-of-type { border-top: 1px solid var(--linija); }
.m-nacelo h3 {
  font-family: var(--serif); font-size: 1.12rem; font-weight: 400;
  letter-spacing: -0.01em; margin: 0 0 0.4rem;
}
.m-nacelo p { margin: 0; color: var(--meko); font-size: 0.96rem; }

/* --- prazno mesto: nikad "nema rezultata", uvek sledeci korak --- */
.m-prazno {
  padding: 1.6rem 1.2rem; text-align: center;
  border: 1px dashed var(--linija); border-radius: 3px;
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
}
.m-prazno p { margin: 0; color: var(--meko); font-size: 0.95rem; }

/* --- poziv na akciju --- */
.m-poziv {
  margin-top: 3.5rem; padding-top: 2rem;
  border-top: 1px solid var(--linija);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
}
.m-poziv p {
  font-family: var(--serif); font-size: 1.15rem; color: var(--meko); margin: 0;
}

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


/* ============================================================
   SPIL (odluka vlasnika 06.08)
   Karta po karta, levo/desno — kroz izlaske, ljude i slike.
   Karta coveka namerno vodi TEKSTOM, ne slikom: ko nije stavio sliku
   mora i dalje da ima gde da se pojavi.
   ============================================================ */


.spil { position: relative; min-height: 26rem; margin-bottom: 1.2rem; }

.karta {
  background: var(--povrsina);
  border: 1px solid var(--linija);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px var(--senka);
  touch-action: pan-y;          /* vodoravno prevlacenje hvata skripta */
}
/* Sa skriptom karte stoje u spilu jedna preko druge; bez nje su prost
   spisak, pa i tada sve radi. */
.spil.sa-js .karta {
  position: absolute; inset: 0 0 auto 0;
  user-select: none; cursor: grab;
}
.spil.sa-js .karta:active { cursor: grabbing; }
.spil:not(.sa-js) .karta { margin-bottom: 1rem; }

.karta-slika {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block;
  background: var(--linija-tanka);
}
.karta-slika.velika { aspect-ratio: 3/4; }
.karta-telo { padding: 1rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: 0.3rem; }
.karta-oznaka {
  font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--naglasak); font-weight: 600;
}
.karta-naslov {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 400;
  letter-spacing: -0.015em; margin: 0; line-height: 1.25;
}
.karta-podaci { font-size: 0.88rem; color: var(--meko); margin: 0; }
.karta-tekst { font-size: 0.95rem; color: var(--meko); margin: 0.3rem 0 0; }
.karta-tekst.tiho { color: var(--bledo); font-style: italic; }
.karta-trag { font-size: 0.82rem; color: var(--bledo); margin: 0.5rem 0 0; }

/* karta coveka — rec je glavna, lice je sitno */
.karta.recima .karta-telo { padding-top: 1.2rem; }
.karta-covek { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.6rem; }
.karta-lice {
  width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover;
  background: var(--naglasak-meki); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.3rem; color: var(--naglasak);
}
.karta-citat {
  font-family: var(--serif); font-size: 1.08rem; line-height: 1.55;
  color: var(--mastilo); margin: 0.4rem 0 0;
}

.spil-dugmad { display: flex; justify-content: center; gap: 2.5rem; margin: 0.4rem 0 0.6rem; }
.spil-dugme {
  width: 3.6rem; height: 3.6rem; border-radius: 50%; padding: 0;
  font-size: 1.4rem; line-height: 1; border: 1px solid var(--linija);
  background: var(--povrsina); color: var(--meko);
}
.spil-dugme.desno { border-color: var(--naglasak); color: var(--naglasak); }
.spil-dugme:hover { filter: none; background: var(--naglasak-meki); }
.spil-objasnjenje { text-align: center; max-width: 26rem; margin: 0 auto; }
.spil-javka { margin-bottom: 1rem; }

/* obrazac bez skripte */
.karta-obrazac { flex-direction: row; gap: 0.6rem; padding: 0 1.15rem 1.15rem; }
.karta-obrazac button { flex: 1; }
.spil.sa-js .karta-obrazac { display: none; }

@media (prefers-reduced-motion: reduce) {
  .spil.sa-js .karta { transition: none !important; }
}


/* ============================================================
   ZID, ISTICANJE, ANKETE, MISLJENJA (odluka vlasnika 06.08)
   ============================================================ */

/* --- zid utisaka: hvali se ono sto se uradilo --- */
.utisak { display: flex; flex-direction: column; gap: 0.35rem; }
.utisak-slika {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 3px; display: block; background: var(--linija-tanka);
  margin-bottom: 0.4rem;
}
.utisak-gde { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.utisak-gde a { text-decoration: none; }
.utisak-tekst {
  font-family: var(--serif); font-size: 1.05rem; line-height: 1.5;
  margin: 0.2rem 0 0;
}
.utisak .sitno { margin: 0; }

/* --- istaknuti: NASUMICAN red, nikad redosled po zasluzi --- */
.istaknuti {
  display: flex; gap: 0.9rem; overflow-x: auto; padding: 0.2rem 0 0.9rem;
  scrollbar-width: thin;
}
.istaknut {
  flex: 0 0 auto; width: 4.6rem; text-align: center;
  text-decoration: none; color: var(--mastilo);
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
}
.istaknut img, .istaknut-slovo {
  width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover;
  background: var(--naglasak-meki); border: 2px solid var(--naglasak);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.5rem; color: var(--naglasak);
}
.istaknut-ime {
  font-size: 0.76rem; color: var(--meko);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- anketa: misljenje o STVARI, ne o coveku --- */
.anketa-pitanje {
  font-family: var(--serif); font-size: 1.15rem; margin: 0 0 0.9rem;
}
.anketa-red {
  position: relative; display: grid;
  grid-template-columns: 1fr auto; align-items: center;
  gap: 0.5rem; padding: 0.55rem 0.7rem; margin-bottom: 0.4rem;
  border: 1px solid var(--linija); border-radius: 3px; overflow: hidden;
}
.anketa-traka { position: absolute; inset: 0; z-index: 0; }
.anketa-traka > i { display: block; height: 100%; background: var(--naglasak-meki); }
.anketa-tekst, .anketa-odsto { position: relative; z-index: 1; font-size: 0.92rem; }
.anketa-odsto { font-variant-numeric: tabular-nums; color: var(--meko); }
.anketa-red.moj { border-color: var(--naglasak); }
.anketa-red.moj .anketa-tekst { font-weight: 600; }

/* --- misljenje: ne postoji za druge dok ga primalac ne odobri --- */
.misljenje { padding: 0.9rem 0; border-top: 1px solid var(--linija-tanka); }
.misljenje:first-of-type { border-top: none; padding-top: 0; }
.misljenje-tekst {
  font-family: var(--serif); font-size: 1.05rem; line-height: 1.55; margin: 0 0 0.3rem;
}
.misljenje.ceka { border-left: 3px solid var(--naglasak); padding-left: 0.9rem; }
.misljenje .sitno { margin: 0; }
.misljenje-dugmad { flex-direction: row; gap: 0.6rem; margin-top: 0.7rem; }


/* --- danas: pocetna za prijavljene --- */
.ceka-te { border-left: 3px solid var(--naglasak); }
.poziv-spil {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 1.1rem 1.2rem;
  background: var(--naglasak-meki); border: 1px solid var(--naglasak);
  border-radius: 3px; text-decoration: none; color: var(--mastilo);
}
.poziv-spil strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; }
/* Ono na sta se covek vec prijavio ne sme da izgleda kao poziv da se prijavi. */
.m-stavka.idem { border-color: var(--naglasak); background: var(--naglasak-meki); }


/* --- prijava preko Gugla --- */
/* Dugme namerno NIJE u boji naglaska: Gugl trazi da njegovo dugme bude
   prepoznatljivo kao Guglovo, a i coveku je jasnije sta ga ceka. */
.dugme-gugl {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  width: 100%; padding: 0.8rem 1.2rem;
  font-weight: 600; text-decoration: none;
  color: var(--mastilo); background: var(--povrsina);
  border: 1px solid var(--linija); border-radius: 3px;
}
.dugme-gugl:hover { border-color: var(--meko); }
.dugme-gugl svg { flex: 0 0 auto; }

/* vodoravna crta sa recju "ili" u sredini */
.ili {
  display: flex; align-items: center; gap: 0.9rem;
  margin: 0 0 1.6rem; color: var(--bledo); font-size: 0.85rem;
}
.ili::before, .ili::after {
  content: ""; flex: 1; height: 1px; background: var(--linija);
}


/* ============================================================
   PROGRAM NA VRHU NASLOVNE (odluka vlasnika 06.08)
   Prvo sto covek vidi jeste sta se desava, sa datumima. Nista se ne
   obecava — ovo su pravi termini iz baze.
   ============================================================ */

.program-vrh { margin: 0 0 3rem; }
.program-vrh .mesto {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--naglasak); font-weight: 700; margin: 0 0 1.1rem;
}
.program { border-top: 1px solid var(--linija); }
.red {
  display: grid; grid-template-columns: 5rem 1fr; gap: 0 1.1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--linija);
  align-items: baseline; text-decoration: none; color: var(--mastilo);
}
.red:hover .sta strong { color: var(--naglasak); }
.red .kad {
  font-weight: 600; font-size: 1.12rem; line-height: 1.1;
  color: var(--datum, var(--naglasak));
  font-variant-numeric: tabular-nums; letter-spacing: -0.015em;
}
.red .kad small {
  display: block; font-size: 0.66rem; font-weight: 400; line-height: 1.4;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bledo); margin-top: 0.2rem;
}
.red .sta strong {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: 1.12rem; line-height: 1.28; margin-bottom: 0.15rem;
}
.red .sta > span { font-size: 0.85rem; color: var(--meko); }
.program-fus { margin-top: 0.9rem; max-width: 34rem; }

/* U svetlim temama cista zuta na belom se ne cita — datum ide u med. */
/* Svetle teme: zuta ne postoji kao tekst na belom, pa je nosi TRAKA i crta
   uz datum — tamo uvek ima tamno ispod sebe, pa se cita. */
/* Naslov programa kao JASTUCIC sa prelazom — to je njihov obrazac: svaki
   kanal nosi svoj gradijent u istom obliku (Naxi Chill je plavo-zeleni,
   nas je plavo-zuti). Kod njih stoji na fotografiji; kod nas fotografije
   nema, pa stoji na podlozi.
   A nosi punu zutu, B i C prelaz — po tome se tri teme i razlikuju. */
.program-vrh .mesto {
  display: inline-block;
  background: var(--prelaz);
  color: #FFFFFF; text-shadow: 0 1px 2px rgba(0,0,0,.45);
  border-radius: 999px;
  padding: 0.6rem 1.25rem 0.55rem;
  margin: 0 0 1.3rem;
}
/* Na crnom naglasak moze da bude i sam tekst datuma; na svetlom ne moze
   (limun-zelena se na belom ne cita), pa je tamo datum tamna plava a
   naglasak nosi samo crta uz njega. */
:root[data-tema="a"] .red .kad,
:root[data-tema="b"] .red .kad { --datum: var(--naglasak); }
:root[data-tema="c"] .red .kad {
  --datum: var(--mastilo);
  /* Crta uz datum nosi maslinastu iz slike, ne jarku limun-zelenu —
     na peskovitoj podlozi ova druga bode oko. */
  border-left: 3px solid var(--drugi); padding-left: 0.6rem; margin-left: -0.6rem;
}

/* ============================================================
   PREKIDAC TEMA — PRIVREMENO, dok se ne izabere paleta.
   Kad odluka padne: obrisati ovaj blok, .prekidac iz osnova.html,
   i dve od tri palete gore.
   ============================================================ */
.prekidac {
  display: flex; gap: 0.25rem; align-items: center;
  margin-left: auto; padding-left: 0.8rem;
}
.prekidac a {
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; text-decoration: none;
  border: 1px solid var(--linija); color: var(--meko);
}
.prekidac a.ovde {
  background: var(--naglasak); color: var(--na-naglasku);
  border-color: var(--naglasak);
}


/* ============================================================
   JEZICCI — prelazak unutar jednog mesta
   Raspored je 06.08 sveden sa jedanaest stavki u meniju na pet mesta.
   Zid je usao pod Izlaske, Spil pod Ljude, Pozdravi i Sobe pod Poruke.
   ============================================================ */
.jezicci {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
  margin: 0 0 1.5rem;
}
.jezicci a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--linija); border-radius: 999px;
  font-size: 0.88rem; color: var(--meko); text-decoration: none;
  white-space: nowrap;
}
.jezicci a:hover { border-color: var(--meko); }
.jezicci a.ovde {
  background: var(--naglasak); border-color: var(--naglasak);
  color: var(--na-naglasku); font-weight: 600;
}
.jezicak-broj {
  min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem;
  border-radius: 999px; background: var(--naglasak); color: var(--na-naglasku);
  font-size: 0.7rem; font-weight: 700; line-height: 1.15rem; text-align: center;
}
.jezicci a.ovde .jezicak-broj { background: var(--na-naglasku); color: var(--naglasak); }

/* Stari izbor u spilu koristi isti izgled. */
.spil-izbor { display: flex; gap: 0.4rem; margin-bottom: 1.2rem; }

/* ============================================================
   PRICAJ — okruglo dugme koje prati coveka
   Nije mesto nego sagovornik, pa ne ulazi u red od pet mesta.
   ============================================================ */
.pricaj {
  position: fixed; right: 1rem; z-index: 30;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--naglasak); color: var(--na-naglasku);
  box-shadow: 0 3px 12px var(--senka);
  text-decoration: none;
}
.pricaj svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.pricaj.ovde { outline: 3px solid var(--drugi); outline-offset: 2px; }
@media (max-width: 40rem) {
  /* iznad donje trake, da je ne pokriva */
  .pricaj { bottom: calc(5.2rem + env(safe-area-inset-bottom)); }
}


/* Tackica na "Poruke" u donjoj traci kad nesto ceka — bez broja, jer na
   toj velicini broj se ionako ne cita. */
.donja-traka a { position: relative; }
.donja-traka .tacka {
  position: absolute; top: 0.5rem; right: 50%; margin-right: -0.95rem;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--naglasak);
}

/* --- strana "Ja": grupe umesto niza kartica --- */
.moje-radnje { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 1rem; }
.misljenja-crta {
  margin: 1.2rem 0 0.8rem; padding-top: 0.9rem;
  border-top: 1px solid var(--linija);
}
.potvrde { margin-top: 2rem; }