/* ───────────────────────────────────────────────────────────────
   nekretninar.ba — zajednički stil

   Tailwind preko CDN-a pokriva raspored; ovde su boje, tipografija i
   komponente koje se ponavljaju. Deljeni fajl umesto <style> bloka u svakoj
   stranici — sedam stranica, jedan izvor istine.
   ─────────────────────────────────────────────────────────────── */

:root {
    /* Paleta: duboka jelova zelena + topli pesak. Namerno drugačije od
       konkurencije — plavo-narandžasto je zauzeto na svakom oglasniku. */
    --boja-osnovna:      #152a45;
    --boja-osnovna-tamna:#0d1c2e;
    --boja-osnovna-svetla:#22456e;
    --boja-akcenat:      #d9a441;
    --boja-akcenat-svetla:#e6b354;
    /* Zlatna za naslovni blok preko fotografije — svjetlija od akcenta, jer
       mora da drži kontrast na tamnoj slici. */
    --boja-zlatna:       #d9a441;

    --tekst:             #1a1f1d;
    --tekst-slabiji:     #5a635f;
    --tekst-najslabiji:  #8b938f;

    --pozadina:          #f7f6f3;
    --povrsina:          #ffffff;
    --ivica:             #e3e1db;

    --uspeh:             #1c7a55;
    --greska:            #a32c22;
    --upozorenje:        #9a6a10;

    --senka-1: 0 1px 2px rgba(20, 31, 29, .06), 0 1px 3px rgba(20, 31, 29, .08);
    --senka-2: 0 4px 12px rgba(20, 31, 29, .08);
    --senka-3: 0 12px 32px rgba(20, 31, 29, .12);

    --radijus:    10px;
    --radijus-lg: 16px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--tekst);
    background: var(--pozadina);
    -webkit-font-smoothing: antialiased;

    /* Podnožje na dno ekrana i kad je stranica kraća od prozora. Bez ovoga
       podnožje visi na pola ekrana na praznim stranicama (404, prijava). */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/*
   OBAVEZNO uz flex `body`: bez ovoga se svaki direktan potomak sa
   `margin: 0 auto` (a to je `.okvir`) SKUPI na širinu sadržaja, jer auto
   margine u poprečnoj osi upijaju slobodan prostor i gase `stretch`.
   Posljedica je bila mreža od jedne kolone na `admin.html`.
*/
body > * { width: 100%; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
a { color: inherit; text-decoration: none; }

/* ─── Traka na vrhu ─────────────────────────────────────────── */

.traka {
    position: sticky; top: 0; z-index: 50;
    background: var(--povrsina);
    border-bottom: 1px solid var(--ivica);
}
.traka-sadrzaj {
    max-width: 1240px; margin: 0 auto; padding: 0 20px;
    height: 66px; display: flex; align-items: center; gap: 28px;
}
.logo { display: flex; align-items: baseline; gap: 2px; font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.logo-prvi  { color: var(--boja-osnovna); }
.logo-drugi { color: var(--boja-akcenat); }
.logo-domen { font-size: 13px; font-weight: 600; color: var(--tekst-najslabiji); }

.meni { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.meni a { font-size: 14.5px; font-weight: 600; color: var(--tekst-slabiji); transition: color .15s; }
.meni a:hover, .meni a.aktivno { color: var(--boja-osnovna); }

/* ─── Dugmad ────────────────────────────────────────────────── */

.dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px; border: 1px solid transparent; border-radius: var(--radijus);
    font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
    white-space: nowrap;
}
.dugme:active:not(:disabled) { transform: translateY(1px); }
.dugme:disabled { opacity: .55; cursor: not-allowed; }

.dugme-glavno    { background: var(--boja-osnovna); color: #fff; }
.dugme-glavno:hover:not(:disabled) { background: var(--boja-osnovna-tamna); }
.dugme-akcenat   { background: var(--boja-akcenat); color: #fff; }
.dugme-akcenat:hover:not(:disabled) { background: #b1782a; }
.dugme-obris     { background: transparent; color: var(--boja-osnovna); border-color: var(--ivica); }
.dugme-obris:hover:not(:disabled) { border-color: var(--boja-osnovna); background: rgba(21,42,69,.04); }
.dugme-tiho      { background: transparent; color: var(--tekst-slabiji); }
.dugme-tiho:hover:not(:disabled) { background: rgba(20,31,29,.05); }
.dugme-opasno    { background: transparent; color: var(--greska); border-color: rgba(163,44,34,.3); }
.dugme-opasno:hover:not(:disabled) { background: rgba(163,44,34,.06); }
.dugme-malo      { padding: 7px 13px; font-size: 13px; }

/* ─── Polja forme ───────────────────────────────────────────── */

.polje { display: block; margin-bottom: 16px; }
.polje-oznaka {
    display: block; margin-bottom: 6px;
    font-size: 13px; font-weight: 600; color: var(--tekst-slabiji);
}
.polje-obavezno::after { content: ' *'; color: var(--greska); }

.unos, .izbor, .oblast {
    width: 100%; padding: 11px 13px;
    border: 1px solid var(--ivica); border-radius: var(--radijus);
    background: var(--povrsina); color: var(--tekst);
    font-family: inherit; font-size: 15px;
    transition: border-color .15s, box-shadow .15s;
}
.unos:focus, .izbor:focus, .oblast:focus {
    outline: none; border-color: var(--boja-osnovna);
    box-shadow: 0 0 0 3px rgba(21,42,69,.12);
}
.oblast { min-height: 130px; resize: vertical; line-height: 1.6; }
.polje-pomoc { margin: 5px 0 0; font-size: 12.5px; color: var(--tekst-najslabiji); }
.polje-greska { margin: 5px 0 0; font-size: 12.5px; color: var(--greska); font-weight: 600; }

.mreza-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.mreza-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
@media (max-width: 640px) { .mreza-2, .mreza-3 { grid-template-columns: 1fr; } }

/* ─── Kartica oglasa ────────────────────────────────────────── */

.kartice {
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.kartica {
    background: var(--povrsina); border: 1px solid var(--ivica);
    border-radius: var(--radijus-lg); overflow: hidden;
    display: flex; flex-direction: column;
    transition: box-shadow .18s, transform .18s, border-color .18s;
}
.kartica:hover { box-shadow: var(--senka-3); transform: translateY(-3px); border-color: #d4d1c8; }

.kartica-slika {
    position: relative; aspect-ratio: 4 / 3; background: #e8e6e0;
    display: flex; align-items: center; justify-content: center;
    color: var(--tekst-najslabiji); font-size: 30px;
}
.kartica-slika img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Zamjena za oglas bez fotografije. Podloga je u boji tipa nekretnine, pa
   kartica izgleda namjerno, a ne kao slika koja se nije učitala. */
.zamjena-slike {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background:
        linear-gradient(150deg,
            color-mix(in srgb, var(--zamjena-boja) 22%, #fff) 0%,
            color-mix(in srgb, var(--zamjena-boja) 38%, #fff) 100%);
    color: color-mix(in srgb, var(--zamjena-boja) 78%, #000);
}
.zamjena-slike i { font-size: 34px; opacity: .85; }
.zamjena-slike span {
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    opacity: .75;
}
/* Rezerva za pregledače bez color-mix: puna boja tipa, bijela ikona. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .zamjena-slike { background: var(--zamjena-boja); color: #fff; }
}

.kartica-znak {
    position: absolute; top: 11px; left: 11px;
    padding: 5px 11px; border-radius: 6px;
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #fff; backdrop-filter: blur(2px);
}
.znak-prodaja     { background: rgba(21,42,69,.92); }
/* Izdavanje mora ostati jasno različito od prodaje. Otkad je osnovna boja
   tamnoplava, stara plava oznaka se stapala s njom — pomjerena je u tirkiz. */
.znak-izdavanje   { background: rgba(23,122,133,.92); }
.znak-novogradnja { background: rgba(217,164,65,.94); }

.kartica-promo {
    position: absolute; top: 11px; right: 11px;
    padding: 5px 9px; border-radius: 6px; background: rgba(26,31,29,.82);
    color: #f5d68a; font-size: 11px; font-weight: 700;
}

.kartica-srce {
    position: absolute; bottom: 11px; right: 11px;
    width: 36px; height: 36px; border: none; border-radius: 50%;
    background: rgba(255,255,255,.94); color: var(--tekst-slabiji);
    cursor: pointer; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    transition: color .15s, transform .15s;
}
.kartica-srce:hover { transform: scale(1.1); }
.kartica-srce.aktivno { color: var(--greska); }

.kartica-telo { padding: 15px 16px 17px; display: flex; flex-direction: column; flex: 1; gap: 9px; }
.kartica-cena { font-size: 20px; font-weight: 800; color: var(--boja-osnovna); letter-spacing: -.02em; }
.kartica-cena-druga { font-size: 12.5px; font-weight: 600; color: var(--tekst-najslabiji); margin-left: 6px; }
.kartica-naslov {
    font-size: 15px; font-weight: 700; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kartica-lokacija { font-size: 13px; color: var(--tekst-slabiji); display: flex; align-items: center; gap: 6px; }
.kartica-podaci {
    display: flex; gap: 14px; margin-top: auto; padding-top: 11px;
    border-top: 1px solid var(--ivica);
    font-size: 12.5px; color: var(--tekst-slabiji); font-weight: 600;
}
.kartica-podaci span { display: flex; align-items: center; gap: 5px; }

/* ─── Odeljci i okviri ──────────────────────────────────────── */

.okvir { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.okvir-uzak { max-width: 760px; margin: 0 auto; padding: 0 20px; }

.panel {
    background: var(--povrsina); border: 1px solid var(--ivica);
    border-radius: var(--radijus-lg); padding: 22px;
}
.panel-naslov {
    font-size: 16px; font-weight: 700; margin-bottom: 16px;
    padding-bottom: 12px; border-bottom: 1px solid var(--ivica);
}

.oznaka {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 20px;
    background: rgba(21,42,69,.07); color: var(--boja-osnovna);
    font-size: 12.5px; font-weight: 600;
}

.prazno {
    padding: 56px 20px; text-align: center; color: var(--tekst-slabiji);
}
.prazno-ikona { font-size: 40px; color: var(--tekst-najslabiji); margin-bottom: 14px; }

/* ─── Obaveštenja ───────────────────────────────────────────── */

#obavestenja {
    position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
    z-index: 200; display: flex; flex-direction: column; gap: 10px;
    width: min(440px, calc(100vw - 32px));
}
.obavestenje {
    padding: 13px 17px; border-radius: var(--radijus);
    background: var(--tekst); color: #fff;
    font-size: 14px; font-weight: 600; box-shadow: var(--senka-3);
    animation: uleti .22s ease-out;
}
.obavestenje-uspeh  { background: var(--uspeh); }
.obavestenje-greska { background: var(--greska); }
@keyframes uleti { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ─── Autocomplete lokacije ─────────────────────────────────── */

.lokacija-omot { position: relative; }
.lokacija-lista {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
    background: var(--povrsina); border: 1px solid var(--ivica);
    border-radius: var(--radijus); box-shadow: var(--senka-3);
    max-height: 300px; overflow-y: auto;
}
.lokacija-lista:empty { display: none; }
.lokacija-red {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 13px; cursor: pointer; font-size: 14.5px;
    border-bottom: 1px solid var(--pozadina);
}
.lokacija-red:last-child { border-bottom: none; }
.lokacija-red:hover, .lokacija-red.istaknut { background: rgba(21,42,69,.06); }
.lokacija-red small { color: var(--tekst-najslabiji); font-weight: 600; }

/* ─── Reklamni baneri ───────────────────────────────────────────
   Oznaka „Reklama" je OBAVEZNA i ne smije se sakriti: bez nje posjetilac
   ne razlikuje plaćeni prostor od sadržaja portala. Zato je oznaka dio ove
   komponente, a ne nešto što se dodaje po stranici. */

.baner-traka { padding: 26px 0 0; }

/* ─── Podnožje ──────────────────────────────────────────────── */

/* `margin-top: auto` gura podnožje na dno u flex koloni. Odvajanje od sadržaja
   je zato unutrašnje (veći padding), a ne vanjska margina — margina i `auto`
   ne mogu istovremeno. */
.podnozje {
    margin-top: auto; padding: 56px 0 30px;
    background: var(--boja-osnovna-tamna); color: rgba(255,255,255,.75);
    font-size: 14px;
}
.podnozje a { color: rgba(255,255,255,.75); }
.podnozje a:hover { color: #fff; }
.podnozje-mreza { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 780px) { .podnozje-mreza { grid-template-columns: 1fr 1fr; } }
.podnozje h4 { color: #fff; font-size: 14px; margin-bottom: 12px; }
.podnozje ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.podnozje-dno {
    margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14);
    font-size: 13px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}

/* ─── Pomoćne ───────────────────────────────────────────────── */

.sakriveno { display: none !important; }
.centrirano { text-align: center; }
.ucitavanje { display: flex; justify-content: center; padding: 48px; color: var(--tekst-najslabiji); }
.samo-citac {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}