:root {
  --crvena: #D9000D;
  --crvena-tamna: #B0000B;  /* za tekst: --crvena je ispod 4.5:1 na podlozi */
  --crvena-svetla: #FBE9E9;
  --grafit: #17191C;
  --grafit-2: #3A3F45;
  --siva: #5E646B;
  --linija: #E6E2DC;
  --linija-2: #DAD5CE;
  --pesak: #EFEAE3;
  --podloga: #F7F5F2;
  --bela: #FFFFFF;
  --viber: #6650D8;
  --whatsapp: #0E7A3E;
  --zelena: #1F7A4D;
  --font-tekst: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-naslov: Sora, Figtree, system-ui, sans-serif;
  --senka: 0 18px 40px -26px rgba(23, 25, 28, .45);
  /* promenljive koje koristi osobine.css */
  --moDet-line: var(--linija);
  --moDet-soft: var(--podloga);
  --moDet-ink: var(--grafit);
  --moDet-muted: var(--siva);
  --moDet-accent: var(--crvena-tamna);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-tekst); font-size: 16px; line-height: 1.5; color: var(--grafit); background: var(--podloga); }
body.bez-skrola { overflow: hidden; }
/* podnožje na dnu ekrana i kad je sadržaj kratak */
body { min-height: 100vh; display: flex; flex-direction: column; }
#sadrzaj { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--crvena-tamna); text-decoration: none; }
a:hover { color: #7E0008; }
h1, h2, h3 { font-family: var(--font-naslov); letter-spacing: -0.4px; line-height: 1.2; margin: 0; }
p { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid #1A73E8; outline-offset: 2px; }
[hidden] { display: none !important; }
.okvir { max-width: 1240px; margin: 0 auto; padding-inline: 24px; }
.vidljivo-samo-citacu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.preskoci { position: absolute; left: -9999px; top: 8px; background: var(--bela); padding: 8px 12px; z-index: 100; }
.preskoci:focus { left: 8px; }
.sivo { color: var(--siva); }
.sivo-svetlo { color: #C9C5BF; }
.mala { font-size: 13px; }
.zamka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* zaglavlje */
.traka-vrh { background: var(--grafit); color: #D9D6D1; font-size: 13px; }
.traka-vrh a { color: var(--bela); }
.traka-vrh-red { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; padding-block: 8px; }
.traka-vrh-desno { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; margin-left: auto; }
.traka-korisnik { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.traka-korisnik strong { color: var(--bela); font-weight: 600; }
.traka-korisnik form { margin: 0; }
.traka-korisnik button { font: inherit; color: var(--bela); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.traka-korisnik a { text-decoration: underline; text-underline-offset: 3px; }
.zaglavlje { background: var(--bela); border-bottom: 1px solid var(--linija); }
.zaglavlje-red { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; padding-block: 12px; }
.zaglavlje-logo { line-height: 0; }
.glavni-meni { display: flex; flex-wrap: wrap; gap: 4px 26px; font-weight: 600; font-size: 15px; }
.glavni-meni a { color: var(--grafit); padding: 8px 0; border-bottom: 2px solid transparent; }
.glavni-meni a[aria-current="page"] { color: var(--crvena-tamna); border-bottom-color: var(--crvena); }
.zaglavlje-desno { display: flex; gap: 10px; align-items: center; }
.zaglavlje-sacuvano { display: inline-flex; gap: 8px; align-items: center; color: var(--grafit); font-weight: 600; font-size: 15px; padding: 10px 12px; border-radius: 10px; min-height: 44px; }
.broj-sacuvanih { background: var(--grafit); color: var(--bela); border-radius: 999px; font-size: 12px; padding: 1px 8px; }

/* dugmad i oznake */
.dugme { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 0; font-weight: 700; font-size: 15px; cursor: pointer; text-align: center; }
.dugme-glavno { background: var(--crvena); color: var(--bela); }
.dugme-glavno:hover { background: var(--crvena-tamna); color: var(--bela); }
.dugme-tamno { background: var(--grafit); color: var(--bela); }
.dugme-tamno:hover { background: #000; color: var(--bela); }
.dugme-obrub { background: var(--bela); color: var(--crvena-tamna); border: 1.5px solid var(--crvena); }
.dugme-obrub-sivo { display: inline-flex; gap: 7px; align-items: center; justify-content: center; min-height: 44px; padding: 9px 13px; border-radius: 10px; background: var(--bela); color: var(--grafit); border: 1px solid var(--linija-2); font-weight: 600; font-size: 14px; cursor: pointer; }
.dugme-obrub-sivo.sacuvan, .sacuvaj.sacuvan { color: var(--crvena); }
.dugme-obrub-sivo.sacuvan svg, .sacuvaj.sacuvan svg { fill: currentColor; }
.dugme-viber { background: var(--viber); color: var(--bela); }
.dugme-whatsapp { background: var(--whatsapp); color: var(--bela); }
.dugme-viber:hover, .dugme-whatsapp:hover { color: var(--bela); filter: brightness(.92); }
.oznaka { display: inline-block; background: var(--bela); color: var(--grafit); border-radius: 8px; padding: 4px 9px; font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.oznaka-crvena { background: var(--crvena); color: var(--bela); }
.oznaka-tamna { background: var(--grafit); color: var(--bela); }
.oznaka-obrub { border: 1px solid var(--linija); color: var(--grafit-2); }
.cip { display: inline-flex; gap: 6px; align-items: center; background: var(--podloga); border: 1px solid var(--linija); border-radius: 999px; padding: 6px 12px; color: var(--grafit); font-size: 14px; min-height: 36px; }
.cip:hover { border-color: var(--grafit); color: var(--grafit); }
.cipovi { display: flex; flex-wrap: wrap; gap: 8px; }

/* naslovna */
.hero { padding-block: 48px 36px; display: flex; flex-wrap: wrap; gap: 44px; align-items: center; }
.hero-tekst { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.nadnaslov { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 14px; color: var(--crvena-tamna); letter-spacing: .4px; }
.nadnaslov span { width: 28px; height: 3px; background: var(--crvena); border-radius: 2px; }
.hero h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 700; letter-spacing: -1px; line-height: 1.08; }
.hero-uvod { font-size: 18px; line-height: 1.55; color: #4A5057; max-width: 520px; }
.hero-slike { flex: 1 1 420px; min-width: 0; position: relative; height: 500px; }
.hero-slika-1 { position: absolute; right: 0; top: 0; width: 78%; height: 430px; object-fit: cover; border-radius: 22px; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%, 0 22%); }
.hero-slika-2 { position: absolute; left: 0; bottom: 0; width: 46%; height: 220px; object-fit: cover; border-radius: 18px; border: 6px solid var(--podloga); }
.hero-broj { position: absolute; right: 22px; bottom: 34px; background: var(--bela); border-radius: 14px; padding: 12px 16px; display: flex; gap: 12px; align-items: center; box-shadow: 0 12px 30px -16px rgba(23,25,28,.45); font-size: 14px; line-height: 1.35; }
.hero-broj strong { font-family: var(--font-naslov); font-size: 18px; }
.tacka { width: 10px; height: 10px; border-radius: 999px; background: var(--zelena); flex: none; }

.pretraga-kartica { background: var(--bela); border: 1px solid var(--linija); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--senka); }
.prekidac { display: inline-flex; gap: 4px; background: #F1EDE7; border-radius: 12px; padding: 4px; align-self: flex-start; }
.prekidac input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.prekidac label { border-radius: 9px; padding: 9px 18px; font-weight: 600; font-size: 15px; cursor: pointer; color: var(--grafit-2); }
.prekidac input:checked + label { background: var(--grafit); color: var(--bela); }
.prekidac input:focus-visible + label { outline: 3px solid #1A73E8; outline-offset: 2px; }
.prekidac-mali { background: var(--bela); border: 1px solid var(--linija-2); padding: 3px; }
.prekidac-mali label { padding: 7px 13px; font-size: 14px; }
.pretraga-polja { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.polje-okvir { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--siva); border: 1px solid var(--linija); border-radius: 12px; padding: 8px 12px; }
.polje-okvir:focus-within { border-color: var(--grafit); }
.polje-okvir select, .polje-okvir input { border: 0; font: inherit; font-size: 16px; font-weight: 500; color: var(--grafit); background-color: transparent; padding: 2px 0; min-width: 0; outline: none; }
.dugme-pretraga { min-height: 56px; font-size: 16px; }
.brzo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.brzo .cip { border-radius: 8px; padding: 7px 14px; }

.kategorije { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding-bottom: 48px; }
.kategorija { background: var(--bela); border: 1px solid var(--linija); border-radius: 16px; padding: 18px 20px; display: flex; gap: 16px; align-items: center; color: var(--grafit); }
.kategorija:hover { border-color: var(--grafit); color: var(--grafit); }
.kategorija > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.kategorija strong { font-size: 17px; }
.kategorija .sivo { font-size: 14px; }
.kategorija-ikona { width: 48px; height: 48px; border-radius: 12px; background: var(--crvena-svetla); color: var(--crvena-tamna); display: flex; align-items: center; justify-content: center; flex: none; }

.pojas-beli { background: var(--bela); border-block: 1px solid var(--linija); }
.sekcija { padding-block: 52px; display: flex; flex-direction: column; gap: 22px; }
.sekcija-mala { padding-block: 0 48px; }
.sekcija-zaglavlje { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-end; }
.sekcija-zaglavlje h1, .sekcija-zaglavlje h2 { font-size: 30px; letter-spacing: -0.5px; }
.sekcija-zaglavlje > a:not(.dugme) { font-weight: 600; }
.naslov-mali { font-size: 20px; }

.izdvojen { display: flex; flex-wrap: wrap; background: var(--grafit); color: var(--bela); border-radius: 22px; overflow: hidden; }
.izdvojen:hover { color: var(--bela); }
.izdvojen img { flex: 1 1 520px; min-width: 0; height: 400px; object-fit: cover; }
.izdvojen-telo { flex: 1 1 360px; min-width: 0; padding: 36px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.izdvojen-telo .oznaka { align-self: flex-start; }
.izdvojen-naslov { font-family: var(--font-naslov); font-size: 28px; font-weight: 600; line-height: 1.2; }
.izdvojen-cinjenice { display: flex; flex-wrap: wrap; gap: 8px 20px; color: #E8E5E0; }
.izdvojen-cena { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.izdvojen-cena strong { font-family: var(--font-naslov); font-size: 34px; }

/* kartice */
.mreza-kartica { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.lista-kartica { display: flex; flex-direction: column; gap: 16px; }
.kartica { position: relative; background: var(--bela); border: 1px solid var(--linija); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.kartica:hover { border-color: #C9C3BA; box-shadow: var(--senka); }
.kartica-slika { display: block; aspect-ratio: 4 / 3; background: var(--pesak); overflow: hidden; }
.kartica-slika img { width: 100%; height: 100%; object-fit: cover; }
.kartica-bez-slike { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--siva); }
.kartica-oznake { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; }
.sacuvaj { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border-radius: 999px; border: 0; background: rgba(255,255,255,.94); color: var(--grafit); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.kartica-slika { position: relative; }
.kartica-broj-slika { position: absolute; right: 12px; bottom: 10px; background: rgba(23,25,28,.72); color: var(--bela); border-radius: 8px; padding: 3px 8px; font-size: 12px; font-weight: 600; }
.kartica-telo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.kartica-cena { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.kartica-cena strong { font-family: var(--font-naslov); font-size: 22px; }
.kartica-cena span { color: var(--siva); font-size: 14px; }
.kartica-naslov { font-family: var(--font-tekst); font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.kartica-naslov a { color: var(--grafit); }
.kartica-naslov a::after { content: ""; position: absolute; inset: 0; }
.kartica .sacuvaj { z-index: 2; }
.kartica-mesto { display: flex; gap: 6px; align-items: center; color: var(--siva); font-size: 14px; }
.kartica-opis { color: #4A5057; font-size: 14px; line-height: 1.5; }
.kartica-cinjenice { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px solid #EFEBE5; margin-top: auto; }
.kartica-cinjenice span { background: var(--podloga); border-radius: 8px; padding: 5px 9px; font-size: 13px; font-weight: 600; color: var(--grafit-2); }
.kartica-zavrsen .kartica-slika img { filter: grayscale(.6); opacity: .8; }
.kartica-lista { flex-direction: row; flex-wrap: wrap; }
.kartica-lista .kartica-slika { flex: 1 1 280px; aspect-ratio: auto; min-height: 220px; }
.kartica-lista .kartica-telo { flex: 2 1 320px; }

/* pretraga */
.traka-filtera { background: var(--pesak); border-bottom: 1px solid #E0D8CD; position: sticky; top: 0; z-index: 30; }
.traka-filtera-red { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-block: 12px; }
.traka-filtera-naslov { font-family: var(--font-naslov); font-weight: 700; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.izbor-cip, .sortiranje select { font: inherit; font-size: 14px; font-weight: 600; background-color: var(--bela); color: var(--grafit); border: 1px solid var(--linija-2); border-radius: 999px; padding: 9px 14px; min-height: 40px; }
.cip-aktivan { background: var(--crvena-svetla); color: #8E0009; border-color: #F1C4C4; font-weight: 600; }
.cip-aktivan:hover { color: #8E0009; border-color: #8E0009; }
.dugme-filteri { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 700; background: var(--grafit); color: var(--bela); border: 1px solid var(--grafit); border-radius: 999px; padding: 9px 14px; min-height: 40px; cursor: pointer; }
.sortiranje { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--siva); }
.svi-filteri { flex-basis: 100%; background: var(--bela); border: 1px solid #E0D8CD; border-radius: 16px; padding: 18px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; box-shadow: var(--senka); }
.traka-filtera.otvoreni-filteri { position: static; }
.svi-filteri fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.svi-filteri legend { font-weight: 700; font-size: 14px; padding: 0 0 8px; }
.svi-filteri select, .od-do input { font: inherit; border: 1px solid var(--linija-2); border-radius: 10px; padding: 9px 11px; width: 100%; min-width: 0; }
.od-do { display: flex; gap: 8px; }
.svi-filteri { align-items: start; }
/* bez ovoga se redovi čipova rastežu na visinu najvišeg filtera u istom redu mreže */
.filter-cipovi { flex-direction: row !important; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; }
.filter-cipovi legend { width: 100%; }
.filter-cipovi input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.filter-cipovi label { font-size: 13px; font-weight: 600; border: 1px solid var(--linija-2); border-radius: 999px; padding: 6px 11px; cursor: pointer; }
.filter-cipovi input:checked + label { background: var(--grafit); border-color: var(--grafit); color: var(--bela); }
.filter-cipovi input:focus-visible + label { outline: 3px solid #1A73E8; outline-offset: 2px; }
.potvrda { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.potvrda input { width: 18px; height: 18px; accent-color: var(--crvena); }
.svi-filteri-dno { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; align-items: center; border-top: 1px solid #EFEBE5; padding-top: 14px; }
.svi-filteri-dno a { font-weight: 600; color: var(--grafit-2); padding: 10px 6px; }
.pretraga-raspored { padding-block: 22px 40px; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.pretraga-rezultati { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.rezultati-zaglavlje { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: baseline; }
.rezultati-zaglavlje h1 { font-size: 26px; }
.pretraga-karta { flex: 1 1 400px; min-width: 0; position: sticky; top: 84px; display: flex; flex-direction: column; gap: 6px; }
.karta { height: 640px; border-radius: 18px; border: 1px solid var(--linija); z-index: 0; background: #ECE8E1; }
.pretraga-mapa { flex-direction: column-reverse; }
.pretraga-mapa .pretraga-karta, .pretraga-mapa .pretraga-rezultati { position: static; flex: none; width: 100%; }
.pretraga-mapa .karta { height: 560px; }
.pretraga-mapa .lista-kartica { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.pretraga-mapa .kartica-lista { flex-direction: column; }
.pretraga-mapa .kartica-lista .kartica-slika { flex: none; height: 220px; }
.pretraga-mapa .kartica-lista .kartica-telo { flex: 1 1 auto; }
.pretraga-mapa .kartica-opis { display: none; }
.pin-cena { background: transparent; border: 0; }
.pin-cena span { display: inline-block; white-space: nowrap; background: var(--grafit); color: var(--bela); border-radius: 999px; padding: 5px 10px; font-weight: 700; font-size: 12px; box-shadow: 0 6px 16px -6px rgba(0,0,0,.5); transform: translate(-50%, -50%); }
.pin-grupa { background: transparent; border: 0; }
.pin-grupa span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--crvena); color: var(--bela); font-weight: 800; font-size: 14px; border: 3px solid var(--bela); box-shadow: 0 6px 16px -6px rgba(0,0,0,.5); transform: translate(-50%, -50%); }
.pin-popup { display: flex; gap: 10px; align-items: center; color: var(--grafit); min-width: 220px; }
.pin-popup img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; }
.pin-popup span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.pin-popup strong { font-family: var(--font-naslov); font-size: 15px; }
.stranice { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding-top: 8px; }
.stranice a { min-width: 44px; height: 44px; border-radius: 10px; background: var(--bela); border: 1px solid var(--linija); color: var(--grafit); display: flex; align-items: center; justify-content: center; font-weight: 600; }
.stranice a[aria-current="page"] { background: var(--grafit); color: var(--bela); border-color: var(--grafit); }
.prazno { background: var(--bela); border: 1px solid var(--linija); border-radius: 18px; padding: 40px 24px; text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }

/* oglas */
.traka-pregled { background: #FFF4CC; border-bottom: 1px solid #F0DE9A; font-size: 14px; padding-block: 8px; }
.oglas-vrh { padding-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.putanja { font-size: 14px; color: var(--siva); display: flex; flex-wrap: wrap; gap: 6px; }
.putanja a { color: var(--siva); }
.galerija { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 230px 230px; gap: 8px; border-radius: 20px; overflow: hidden; position: relative; }
.galerija-slika { padding: 0; border: 0; cursor: zoom-in; background: var(--pesak); overflow: hidden; }
.galerija-slika img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.galerija-slika:hover img { transform: scale(1.03); }
.galerija-slika:first-child { grid-column: span 2; grid-row: span 2; }
.galerija.broj-1 .galerija-slika:first-child { grid-column: 1 / -1; }
.galerija.broj-2 .galerija-slika:nth-child(2), .galerija.broj-3 .galerija-slika:nth-child(n+2) { grid-row: span 2; }
.galerija.broj-3 .galerija-slika:nth-child(n+2) { grid-row: span 1; grid-column: span 2; }
.galerija.broj-2 .galerija-slika:nth-child(2) { grid-column: span 2; }
.galerija.broj-4 .galerija-slika:nth-child(4) { grid-column: span 2; }
.galerija-sve { position: absolute; right: 16px; bottom: 16px; font-weight: 700; font-size: 14px; background: var(--bela); color: var(--grafit); border: 0; border-radius: 10px; padding: 11px 14px; cursor: pointer; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); min-height: 44px; }
.galerija-status { position: absolute; left: 16px; top: 16px; background: var(--grafit); color: var(--bela); border-radius: 10px; padding: 8px 14px; font-weight: 800; letter-spacing: 1px; }
.oglas-raspored { padding-block: 28px 48px; display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.oglas-glavno { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.oglas-zaglavlje { display: flex; flex-direction: column; gap: 12px; }
.oznake-red { display: flex; flex-wrap: wrap; gap: 8px; }
.oglas-zaglavlje h1 { font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -0.6px; }
.oglas-mesto { display: flex; gap: 6px; align-items: center; color: #4A5057; font-size: 16px; }
.oglas-cena { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline; padding-block: 16px; border-block: 1px solid var(--linija); }
.oglas-cena strong { font-family: var(--font-naslov); font-size: 36px; }
.oglas-radnje { margin-left: auto; display: flex; gap: 8px; }
.oglas-sekcija { display: flex; flex-direction: column; gap: 12px; }
.oglas-sekcija h2 { font-size: 22px; }
.oglas-opis { display: flex; flex-direction: column; gap: 14px; font-size: 17px; line-height: 1.65; color: #2E3237; }
.karta-oglas { height: 320px; }
.oglas-bocno { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.kartica-agent, .kartica-upit { background: var(--bela); border: 1px solid var(--linija); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.kartica-agent { box-shadow: var(--senka); }
.agent-red { display: flex; gap: 14px; align-items: center; }
.agent-red div { display: flex; flex-direction: column; gap: 2px; }
.agent-red strong { font-size: 18px; }
.agent-red .sivo { font-size: 14px; }
.agent-foto { border-radius: 999px; object-fit: cover; flex: none; width: 72px; height: 72px; }
.agent-dugmad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.agent-dugmad .dugme-tamno { grid-column: 1 / -1; min-height: 52px; font-size: 16px; }
.pdf-dugmad { border-top: 1px solid #EFEBE5; padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.pdf-dugmad > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mali-naslov { font-weight: 700; font-size: 15px; }
.kartica-upit h2 { font-family: var(--font-tekst); font-size: 17px; letter-spacing: 0; }
.kartica-upit label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 600; }
.kartica-upit input, .kartica-upit textarea { font: inherit; font-weight: 400; border: 1px solid var(--linija-2); border-radius: 10px; padding: 11px 12px; min-height: 44px; }
.kartica-upit textarea { resize: vertical; }
.kartica-upit .dugme { min-height: 50px; font-size: 16px; }
.poruka-uspeh { background: #E6F4EC; color: #145A36; border-radius: 10px; padding: 12px 14px; font-weight: 600; }
.poruka-greska { background: var(--crvena-svetla); color: #8E0009; border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.traka-agent { display: none; }

/* osobine iz engine-a (pločice i karakteristike) u izgledu sajta */
.moDet-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.moDet-tile { background: var(--bela); border: 1px solid var(--linija); border-radius: 14px; padding: 14px 16px; }
.moDet-tileV { font-family: var(--font-naslov); font-size: 20px; font-weight: 600; }
.moDet-tileL { color: var(--siva); font-size: 13px; font-weight: 600; }
.karakteristike { margin: 0; }
.karakteristike .moDet-card { border-radius: 16px; }

/* svetlo (galerija preko celog ekrana) */
.svetlo { position: fixed; inset: 0; z-index: 1000; background: rgba(12,13,15,.94); display: flex; align-items: center; justify-content: center; }
.svetlo figure { margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.svetlo img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 6px; }
.svetlo figcaption { color: #D9D6D1; font-size: 14px; }
.svetlo button { position: absolute; background: rgba(255,255,255,.12); color: var(--bela); border: 0; border-radius: 999px; width: 52px; height: 52px; font-size: 30px; line-height: 1; cursor: pointer; }
.svetlo button:hover { background: rgba(255,255,255,.24); }
.svetlo-zatvori { top: 16px; right: 16px; }
.svetlo-nazad { left: 16px; top: 50%; transform: translateY(-50%); }
.svetlo-napred { right: 16px; top: 50%; transform: translateY(-50%); }
.obavestenje { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--grafit); color: var(--bela); padding: 12px 18px; border-radius: 12px; z-index: 1001; font-weight: 600; box-shadow: var(--senka); }

/* agent na naslovnoj */
.sekcija-agent { padding-bottom: 52px; }
.agent-pojas { background: var(--pesak); border-radius: 24px; padding: 32px; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.agent-foto-velika { width: 132px; height: 132px; border: 4px solid var(--bela); }
.agent-pojas-tekst { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 8px; color: #4A5057; }
.nadnaslov-mali { font-size: 14px; font-weight: 600; color: var(--crvena-tamna); }
.agent-ime-veliko { font-family: var(--font-naslov); font-size: 28px; color: var(--grafit); }
.agent-pojas .agent-dugmad { display: flex; flex-wrap: wrap; }
.agent-pojas .agent-broj { display: none; }

/* instagram */
.instagram { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.instagram-objava { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; color: var(--bela); }
.instagram-objava img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.instagram-objava:hover img { transform: scale(1.04); }
.instagram-objava svg { position: absolute; right: 8px; top: 8px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }

/* stranice, kontakt, poređenje */
.stranica { padding-block: 48px; max-width: 820px; display: flex; flex-direction: column; gap: 20px; }
.stranica h1 { font-size: 38px; }
.stranica-tekst { font-size: 17px; line-height: 1.7; color: #2E3237; display: flex; flex-direction: column; gap: 14px; }
.stranica-tekst h2 { font-size: 22px; margin-top: 10px; }
.kontakt { padding-block: 48px; display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.kontakt-tekst { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.kontakt-tekst h1 { font-size: 38px; }
.kontakt .kartica-upit { flex: 1 1 360px; }
.kontakt .agent-dugmad { max-width: 460px; }
.kontakt-podaci { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 0; font-size: 16px; }
.kontakt-podaci dt { color: var(--siva); }
.kontakt-podaci dd { margin: 0; font-weight: 600; }
.tabela-okvir { overflow-x: auto; background: var(--bela); border: 1px solid var(--linija); border-radius: 18px; }
.poredjenje { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 15px; }
.poredjenje th, .poredjenje td { padding: 12px 14px; border-bottom: 1px solid #EFEBE5; text-align: left; vertical-align: top; }
.poredjenje thead th { vertical-align: bottom; }
.poredjenje thead a { display: flex; flex-direction: column; gap: 8px; color: var(--grafit); font-weight: 600; }
.poredjenje thead img { width: 100%; max-width: 220px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.poredjenje tbody th { color: var(--siva); font-weight: 600; white-space: nowrap; }

/* podnožje */
.podnozje { background: var(--grafit); color: #C9C5BF; }
.podnozje a { color: #C9C5BF; }
.podnozje a:hover { color: var(--bela); }
.podnozje strong { color: var(--bela); }
.podnozje-kolone { display: flex; flex-wrap: wrap; gap: 32px 64px; padding-block: 48px 32px; }
.podnozje-kolone > * { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.podnozje-agencija { flex: 1 1 260px; }
.podnozje-agencija p { font-size: 14px; line-height: 1.6; }
.podnozje-dno { border-top: 1px solid #33363B; padding-block: 18px 24px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

.u-izradi { padding-block: 72px; display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.u-izradi h1 { font-size: 40px; }
.u-izradi p { font-size: 18px; color: var(--grafit-2); }

@media (max-width: 900px) {
  .galerija { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 260px 130px; }
  .galerija-slika:nth-child(n+4) { display: none; }
  .galerija .galerija-slika:first-child { grid-column: 1 / -1; grid-row: auto; }
  .galerija .galerija-slika:nth-child(2), .galerija .galerija-slika:nth-child(3) { grid-column: auto; grid-row: auto; }
  .oglas-bocno, .pretraga-karta { position: static; }
  .karta { height: 380px; }
  .hero-slike { height: 340px; }
  .hero-slika-1 { height: 300px; }
  .hero-slika-2 { height: 150px; }
  .sortiranje { margin-left: 0; }
}

/* logo i desni deo u prvom redu, meni ispod; inače desni deo sam prelazi u novi red */
@media (max-width: 1080px) {
  .glavni-meni { order: 3; width: 100%; gap: 4px 22px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .glavni-meni a { white-space: nowrap; }
}

@media (max-width: 640px) {
  .okvir { padding-inline: 16px; }
  .traka-vrh-red > span:first-child { display: none; }
  .zaglavlje-logo .logo { width: 150px; height: auto; }
  .traka-vrh:not(:has(.traka-vrh-desno a, .traka-korisnik)) { display: none; }
  .traka-vrh-desno { margin-left: 0; }
  .glavni-meni { gap: 4px 18px; }
  .zaglavlje-desno .dugme-glavno { display: none; }
  /* tekst ostaje čitaču ekrana, vidi se samo srce */
  .zaglavlje-sacuvano span:not(.broj-sacuvanih) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .izdvojen img { height: 240px; }
  .izdvojen-telo { padding: 22px; }
  .oglas-cena strong { font-size: 30px; }
  .oglas-radnje { margin-left: 0; }
  body.ima-traku { padding-bottom: 88px; }
  .traka-agent { display: flex; gap: 10px; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--bela); border-top: 1px solid var(--linija); padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 24px -18px rgba(0,0,0,.4); }
  .traka-agent .agent-foto { width: 44px; height: 44px; }
  .agent-dugmad-traka { display: flex; flex: 1 1 auto; gap: 8px; }
  .agent-dugmad-traka .dugme { padding: 10px; }
  .agent-dugmad-traka .dugme-tamno { flex: 1 1 auto; min-height: 48px; }
  .agent-dugmad-traka .dugme-viber span, .agent-dugmad-traka .dugme-whatsapp span, .agent-dugmad-traka .agent-broj { display: none; }
  .agent-dugmad-traka .dugme-viber, .agent-dugmad-traka .dugme-whatsapp { width: 48px; min-height: 48px; flex: none; }
  .svetlo-nazad, .svetlo-napred { display: none; }
}

/* padajući meniji: sopstvena strelica umesto sistemske, malo odmaknuta od ivice */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2317191C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}
.izbor-cip, .sortiranje select { padding: 9px 36px 9px 16px; width: auto; max-width: 100%; }
.svi-filteri select { padding-right: 36px; background-color: var(--bela); }
.polje-okvir select { padding-right: 22px; background-position: right 2px center; }
select::-ms-expand { display: none; }

/* poređenje sačuvanih oglasa */
.uporedi-uputstvo { margin: 4px 0 18px; padding: 12px 16px; border-radius: 12px; background: var(--pesak, #EDE7DE); font-weight: 500; }
.uporedi-izbor { position: relative; z-index: 2; background: var(--bela); display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px; border: 1px solid var(--linija-2); border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; align-self: flex-start; min-height: 40px; }
.uporedi-izbor input { width: 18px; height: 18px; accent-color: var(--crvena); margin: 0; }
.uporedi-izbor:has(input:checked) { border-color: var(--grafit); }
.uporedi-izbor:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.uporedi-traka { position: sticky; bottom: 16px; z-index: 5; margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; background: var(--bela); border: 1px solid var(--linija); border-radius: 16px; padding: 12px 12px 12px 20px; box-shadow: var(--senka); font-weight: 600; }
.dugme.onemoguceno { opacity: .5; }
.obavestenje { display: flex; gap: 14px; align-items: center; max-width: calc(100vw - 32px); }
.obavestenje button { font: inherit; background: none; border: 0; padding: 4px 2px; cursor: pointer; }
.obavestenje a, .obavestenje button { color: var(--bela); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 640px) {
  .pretraga-polja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .polje-okvir { min-width: 0; }
  .polje-okvir select { width: 100%; text-overflow: ellipsis; }
  .pretraga-polja > :nth-child(n+3) { grid-column: 1 / -1; }
}

/* Najnovije na naslovnoj: uvek puni redovi (8 kartica u 4 ili 2 kolone, 6 u 3 kolone i na telefonu) */
.mreza-najnovije { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .mreza-najnovije { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mreza-najnovije > :nth-child(n+7) { display: none; }
}
@media (max-width: 860px) {
  .mreza-najnovije { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mreza-najnovije > :nth-child(n+7) { display: flex; }
}
@media (max-width: 560px) {
  .mreza-najnovije { grid-template-columns: minmax(0, 1fr); }
  .mreza-najnovije > :nth-child(n+7) { display: none; }
}

/* Slične ponude: do 4 kartice u jednom redu; pri 3 kolone i na telefonu četvrta se ne prikazuje */
.mreza-slicni { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .mreza-slicni { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mreza-slicni > :nth-child(n+4) { display: none; }
}
@media (max-width: 860px) {
  .mreza-slicni { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mreza-slicni > :nth-child(n+4) { display: flex; }
}
@media (max-width: 560px) {
  .mreza-slicni { grid-template-columns: minmax(0, 1fr); }
  .mreza-slicni > :nth-child(n+4) { display: none; }
}