/* ============================================
   Temelj — glavni stil (mobile-first)
   ============================================ */
:root {
    --primarna: #1E3A8A;
    --primarna-tamna: #16296b;
    --primarna-tamnija: #0F172A;
    --akcenat: #F59E0B;
    --sekundarna: #64748B;
    --sekundarna-tamna: #475569;
    --sekundarna-bg: #F1F5F9;
    --pozadina: #FAFAFB;
    --kartica: #FFFFFF;
    --kartica-tiha: #F8FAFC;
    --tekst: #0F172A;
    --tekst-telo: #334155;
    --tekst-slabiji: #64748B;
    --tekst-svetliji: #94A3B8;
    --okvir: #E2E8F0;
    --uspesno: #10B981;
    --uspesno-bg: #ECFDF5;
    --greska: #EF4444;
    --greska-bg: #FEF2F2;
    --info: #3B82F6;
    --info-bg: #EFF6FF;
    --upozorenje-bg: #fef3c7;
    --radius: 16px;
    --radius-veliki: 24px;
    --radius-mali: 10px;
    --senka: 0 1px 3px 0 rgba(0,0,0,.04), 0 1px 2px -1px rgba(0,0,0,.04);
    --senka-hover: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04);
    --senka-kartica: 0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -2px rgba(0,0,0,.05);
    /* Jače ease krivulje od podrazumevanih CSS ease-ova — daju "punch" koji
       standardni ease/ease-out nemaju (izvor: emil-design-eng smernice). */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--pozadina);
    color: var(--tekst);
    line-height: 1.65;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body.meni-otvoren { overflow: hidden; }
a { color: var(--primarna); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.01em; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
main { flex: 1; padding-bottom: 48px; }

/* --- Zaglavlje --- */
.site-header {
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--okvir);
    position: sticky; top: 0; z-index: 50;
}
.site-header .container { display: flex; align-items: center; gap: 12px; height: 64px; position: relative; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo-ikona-kutija {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 9px; background: var(--primarna); color: #fff;
}
.logo-ikona-kutija svg { width: 19px; height: 19px; }
.logo-ikona-kutija-mala { width: 28px; height: 28px; border-radius: 7px; }
.logo-ikona-kutija-mala svg { width: 15px; height: 15px; }
.logo-tekst-kolona { display: flex; flex-direction: column; line-height: 1.15; }
.logo-naziv { font-size: 1.05rem; font-weight: 800; color: var(--tekst); letter-spacing: -.01em; }
.logo-domena { color: var(--tekst-slabiji); font-weight: 700; }
.logo-tagline { font-size: .68rem; font-weight: 500; letter-spacing: .01em; color: var(--tekst-slabiji); }
@media (max-width: 700px) { .logo-tagline { display: none; } }
.logo-footer { margin-bottom: 14px; }

.nav { flex: 1; display: flex; align-items: center; gap: 4px; min-width: 0; }
.nav-linkovi { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.nav-akcije { display: flex; align-items: center; gap: 10px; }
.nav a, .nav > button, .nav form.nav-forma button {
    padding: 9px 14px; border-radius: 999px; color: var(--tekst);
    font-size: .95rem; font-weight: 600; background: none; border: none; cursor: pointer; font-family: inherit;
}
.nav form.nav-forma { display: contents; }
.nav a:hover { background: var(--pozadina); text-decoration: none; }
.nav form.nav-forma button:hover { background: var(--pozadina); }
.nav .btn-primary, .nav .btn-primary:hover { color: #fff; }
.nav .btn-primary { background: var(--primarna); box-shadow: 0 2px 8px rgba(30,58,138,.25); }
.nav .btn-primary:hover { background: var(--primarna-tamna); }

/* --- Hamburger dugme (mobilna navigacija) --- */
.nav-toggle {
    display: none; margin-left: auto; width: 40px; height: 40px;
    border: none; background: none; cursor: pointer; border-radius: 8px;
    flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.nav-toggle:hover { background: var(--pozadina); }
.nav-toggle span { display: block; width: 21px; height: 2px; background: var(--tekst); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle.aktivan span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.aktivan span:nth-child(2) { opacity: 0; }
.nav-toggle.aktivan span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Na mobilnom se umesto .nav koristi drawer (.mob-meni, vidi niže) */
@media (max-width: 780px) {
    .nav-toggle { display: flex; }
    .nav { display: none; }
}

/* --- Mobilni meni (drawer sa desne strane) --- */
.mob-meni, .mob-meni-pozadina { display: none; }
@media (max-width: 780px) {
    .mob-meni-pozadina {
        display: block; position: fixed; inset: 0; z-index: 90; background: rgba(15,23,42,.45);
        opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease-out), visibility 200ms;
    }
    body.meni-otvoren .mob-meni-pozadina { opacity: 1; visibility: visible; }
    .mob-meni {
        display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
        width: min(100vw, 380px); background: #fff; box-shadow: -8px 0 32px rgba(15,23,42,.16);
        transform: translateX(100%); visibility: hidden;
        transition: transform 250ms var(--ease-out), visibility 250ms;
    }
    .mob-meni.otvoren { transform: translateX(0); visibility: visible; }
}
.mob-meni-vrh { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; flex-shrink: 0; }
.mob-meni-logo { display: inline-flex; align-items: center; gap: 6px; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; color: var(--primarna); }
.mob-meni-logo-ikona { width: 17px; height: 17px; color: #2563EB; }
.mob-meni-zatvori {
    display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border: none; background: none; border-radius: 8px; color: var(--tekst); cursor: pointer;
}
.mob-meni-zatvori:hover { background: var(--pozadina); }
.mob-meni-zatvori svg { width: 22px; height: 22px; }
.mob-meni-telo { flex: 1; overflow-y: auto; padding: 0 20px 16px; display: flex; flex-direction: column; gap: 2px; }

.mob-profil {
    display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 14px;
    background: #fff; border: 1px solid var(--okvir); border-radius: 14px; box-shadow: var(--senka);
}
.mob-avatar {
    position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 46px; height: 46px; border-radius: 50%; background: var(--primarna-tamna); color: #fff;
    font-size: .95rem; font-weight: 800; letter-spacing: .02em;
}
.mob-avatar-tacka { position: absolute; right: 0; bottom: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--uspesno); border: 2px solid #fff; }
.mob-profil-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.mob-profil-info strong { font-size: .98rem; font-weight: 800; color: var(--primarna-tamna); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mob-profil-email { display: flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--tekst-slabiji); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mob-profil-email-ikona { width: 12px; height: 12px; flex-shrink: 0; color: #2563EB; }
.mob-profil-podesavanja { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; color: var(--tekst-slabiji); }
.mob-profil-podesavanja:hover { background: var(--pozadina); color: var(--primarna); text-decoration: none; }
.mob-profil-podesavanja svg { width: 18px; height: 18px; }

.mob-sekcija-naslov { padding: 10px 4px 6px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-slabiji); }
.mob-razdvajac { height: 1px; background: var(--okvir); margin: 12px 0 4px; }
.mob-stavka {
    display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 12px;
    color: var(--tekst); font-size: .95rem; font-weight: 500; text-decoration: none;
}
.mob-stavka:hover { background: var(--pozadina); text-decoration: none; }
.mob-stavka.aktivna { background: #eef2ff; color: var(--primarna-tamna); font-weight: 800; }
.mob-ikona { width: 20px; height: 20px; flex-shrink: 0; color: var(--tekst-telo); }
.mob-stavka.aktivna .mob-ikona { color: var(--primarna-tamna); }
.mob-stavka-naslov { flex: 1; min-width: 0; }
.mob-stavka-kraj { width: 16px; height: 16px; flex-shrink: 0; color: var(--tekst-slabiji); }
.mob-stavka.aktivna .mob-stavka-kraj { color: var(--primarna-tamna); }
.mob-bedz { flex-shrink: 0; padding: 2px 10px; border-radius: 99px; font-size: .72rem; font-weight: 700; line-height: 1.5; }
.mob-bedz-zeleni { background: var(--uspesno-bg); color: #047857; }
.mob-bedz-plavi { background: #eef2ff; color: var(--primarna); }
.mob-bedz-zuti { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }

.mob-meni-dno { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px)); flex-shrink: 0; }
.mob-dugme {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 16px;
    border-radius: 12px; border: 1px solid transparent; font-family: inherit; font-size: .95rem; font-weight: 700;
    text-decoration: none; cursor: pointer;
}
.mob-dugme:hover { text-decoration: none; }
.mob-dugme svg { width: 18px; height: 18px; flex-shrink: 0; }
.mob-dugme-primarno { background: var(--primarna-tamna); color: #fff; }
.mob-dugme-primarno:hover { background: var(--primarna-tamnija); }
.mob-dugme-obicno { background: #fff; border-color: var(--okvir); color: var(--primarna); }
.mob-dugme-odjava { background: #fff; border-color: var(--okvir); color: #dc2626; }
.mob-meni-dno form { margin: 0; }

/* --- Profil avatar + dropdown meni (zamenjuje razdvojene "pseudonim"/"Odjava" linkove) --- */
.profil-meni-omotac { position: relative; }
.profil-avatar {
    width: 34px; height: 34px; border-radius: 50%; background: var(--primarna); color: #fff;
    border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem; flex-shrink: 0; transition: box-shadow .15s; font-family: inherit;
}
.profil-avatar:hover { box-shadow: 0 0 0 3px rgba(30,58,138,.18); }
.profil-inicijal { line-height: 1; }

.profil-padajuci {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px;
    background: #fff; border: 1px solid var(--okvir); border-radius: var(--radius); box-shadow: var(--senka-hover);
    padding: 8px; z-index: 60;
    opacity: 0; visibility: hidden; transform: scale(.95) translateY(-4px); transform-origin: top right;
    transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), visibility 150ms;
}
.profil-padajuci.otvoren { opacity: 1; visibility: visible; transform: scale(1) translateY(0); }
.profil-padajuci-ime { padding: 8px 12px; font-weight: 700; font-size: .85rem; border-bottom: 1px solid var(--okvir); margin-bottom: 6px; color: var(--tekst-slabiji); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profil-padajuci a, .profil-padajuci-forma button {
    display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--radius-mali);
    color: var(--tekst); font-size: .92rem; font-weight: 500; background: none; border: none; cursor: pointer; font-family: inherit;
}
.profil-padajuci a:hover, .profil-padajuci-forma button:hover { background: var(--pozadina); text-decoration: none; }
.profil-padajuci-forma { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--okvir); }

/* --- Hero — svetla, minimalistička, editorijalna sekcija (bold tipografija).
   Pozadina: suptilna arhitektonska linijska ilustracija (slika), providna
   preko svetle boje da tekst ostane potpuno čitljiv. Puna visina ekrana. --- */
.hero {
    background: var(--pozadina) url('/assets/img/hero-pozadina.jpg') center right / contain no-repeat;
    color: var(--tekst); border-bottom: 1px solid var(--okvir);
    position: relative; overflow: visible; /* visible da padajući predlozi pretrage ne budu odsečeni */
    min-height: 78vh;
    display: flex; align-items: center; padding: 90px 0 60px;
}
/* Blagi beli veo — samo toliko da tekst ostane citljiv, slika treba jasno da se vidi */
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.85) 32%, rgba(255,255,255,.15) 100%);
}
@media (max-width: 700px) {
    .hero {
        min-height: auto; padding: 76px 0 40px;
        background-image: url('/assets/img/hero-pozadina-mobile.jpg');
        background-position: top center; background-size: cover;
    }
}
.hero-sadrzaj { max-width: 980px; position: relative; z-index: 1; }

.hero-oznaka {
    display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--primarna-tamna); background: var(--sekundarna-bg); border: 1px solid var(--okvir);
    padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.hero h1 {
    font-size: clamp(2.1rem, 2.6vw + 1.3rem, 3.4rem); font-weight: 800; line-height: 1.1;
    letter-spacing: -.02em; margin-bottom: 16px; text-align: left; color: var(--tekst);
}
.hero-podtekst { font-size: 1.05rem; color: var(--tekst-slabiji); max-width: 480px; margin: 0 0 28px; }

/* --- CTA red: pretraga, "ili", i dugme za ostavljanje recenzije — sve
   uvek vidljivo, bez animacija/prekidača (jednostavnije i pouzdanije). --- */
.hero-cta-red { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 30px; }
.hero-cta-red > * { margin-right: 14px; margin-bottom: 10px; }
.hero-cta-ili { font-size: .92rem; color: var(--tekst-slabiji); }

.pretraga-hero {
    display: flex; flex: 1 1 320px; max-width: 420px; background: #fff;
    border: 1.5px solid var(--tekst); border-radius: 999px; padding: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.pretraga-unos-red { display: flex; align-items: center; flex: 1; min-width: 0; }
@media (max-width: 600px) {
    .pretraga-hero { flex-direction: column; flex: none; width: 100%; border-radius: 16px; padding: 10px; gap: 8px; max-width: 100%; }
    .hero-cta-red-centrirano .pretraga-hero { flex: none !important; width: 100%; }
    .pretraga-unos-red { flex: none; }
    .pretraga-hero .pretraga-ikona { margin-left: 4px; }
    .pretraga-hero input { padding: 10px 6px; }
    .pretraga-hero button { width: 100%; text-align: center; }
}
.pretraga-hero input {
    flex: 1; border: none; outline: none; padding: 12px 18px; font-size: 1rem;
    border-radius: 999px; min-width: 0; font-family: inherit; background: transparent; color: var(--tekst);
}
.pretraga-hero button { border-radius: 999px; padding: 12px 22px; white-space: nowrap; }

.hero-mini-statistike { display: flex; }
.hero-mini-statistike > div { margin-right: 30px; }
.hero-mini-statistike > div { display: flex; flex-direction: column; }
.hero-mini-statistike strong { display: block; font-size: 1.4rem; font-weight: 800; line-height: 1.1; color: var(--tekst); }
.hero-mini-statistike span { display: block; font-size: .78rem; color: var(--tekst-slabiji); white-space: nowrap; }
@media (max-width: 700px) {
    .hero-cta-red { flex-direction: column; align-items: stretch; }
    .hero-cta-red > * { margin-right: 0; margin-bottom: 12px; }
    .pretraga-hero { max-width: 100%; }
    .hero-cta-ili { text-align: center; }
    .hero-cta-red > a.btn { text-align: center; }
}

/* --- Sekcije --- */
.sekcija { padding: 64px 0; }
.sekcija-alt { background: var(--kartica-tiha); border-top: 1px solid var(--okvir); border-bottom: 1px solid var(--okvir); }
.sekcija h2 { font-size: 1.5rem; margin-bottom: 4px; }
.sekcija .podnaslov { color: var(--tekst-slabiji); margin-bottom: 22px; }
.sekcija-naslov-red { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }

/* --- Kartice --- */
.mreza { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .mreza { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .mreza { grid-template-columns: repeat(3, 1fr); } }
.kartica {
    background: var(--kartica); border: 1px solid var(--okvir);
    border-radius: var(--radius); padding: 20px; box-shadow: var(--senka);
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
    min-width: 0; overflow-wrap: anywhere; word-break: break-word;
}
.kartica:hover { border-color: var(--okvir); box-shadow: var(--senka-hover); }
@media (hover: hover) and (pointer: fine) {
    .kartica:hover { transform: translateY(-2px); transition: transform 200ms var(--ease-out); }
}
a.kartica { color: inherit; text-decoration: none; display: block; }
a.kartica:hover { text-decoration: none; color: inherit; }
.kartica h3 { font-size: 1.08rem; margin-bottom: 6px; overflow-wrap: anywhere; }
.kartica .meta { color: var(--tekst-slabiji); font-size: .85rem; }
.kartica a.naslov-link { color: var(--tekst); }
.kartica a.naslov-link:hover { color: var(--primarna); }
.kartica p { overflow-wrap: anywhere; word-break: break-word; }

/* Mreža recenzija na početnoj — "bento" stil: rounded-2xl kartice, blagi
   border, hover ka primarnoj boji. 1 kolona na mobilnom, 2 na tabletu,
   3-4 na širim ekranima, sa ograničenim brojem redova teksta (,,vidi više''
   efekat bez potrebe za JS-om). */
.mreza-recenzije { display: grid; gap: 24px; grid-template-columns: 1fr; grid-auto-rows: 1fr; }
.mreza-recenzije .kartica {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    padding: 24px; border-radius: var(--radius); background: #fff;
    border: 1px solid rgba(226,232,240,.8); box-shadow: var(--senka);
}
.mreza-recenzije .kartica:hover { box-shadow: 0 0 0 1px rgba(30,58,138,.2), var(--senka-hover); }
.mreza-recenzije .kartica-vrh-red {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 28px; margin-bottom: 12px;
}
.mreza-recenzije .kartica-naslov-blok { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.mreza-recenzije h3 {
    margin: 0; font-size: 1.125rem; line-height: 1.4; font-weight: 700; letter-spacing: -.01em; color: var(--tekst);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mreza-recenzije .kartica-citat-box {
    margin-top: 14px; padding: 14px 16px; border-radius: 12px;
    background: rgba(242,243,255,.6); border: 1px solid rgba(226,232,240,.6);
}
.mreza-recenzije .kartica-tekst {
    margin: 0; font-size: .9375rem; line-height: 1.45; font-weight: 500; color: var(--tekst);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere; word-break: break-word;
}
/* Kartica bez teksta recenzije — citat se ne prikazuje, a visina kartice ostaje
   ista jer je određuje mreža (grid-auto-rows: 1fr), a footer je prikačen za dno. */
.mreza-recenzije .kartica-citat-box:not(:has(.kartica-tekst:not(:empty))) { display: none; }
.mreza-recenzije .meta { margin-top: auto; padding-top: 16px; }

/* --- Istaknuta (prva) kartica — naslov + lokacija u istom redu, ocena desno,
   citat sa levom linijom umesto boksa, dekorativni ugao gore desno. --- */
.mreza-recenzije .kartica-istaknuta {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto 1fr; column-gap: 16px;
}
.mreza-recenzije .kartica-istaknuta::before {
    content: ""; position: absolute; top: 0; right: 0; width: 96px; height: 96px; z-index: 0; pointer-events: none;
    background: #f2f3ff; opacity: .7; border-top-right-radius: var(--radius); border-bottom-left-radius: 96px;
}
.mreza-recenzije .kartica-istaknuta > *,
.mreza-recenzije .kartica-istaknuta .kartica-znacke-red,
.mreza-recenzije .kartica-istaknuta .ocena-zvezda-broj { position: relative; z-index: 1; }
.mreza-recenzije .kartica-istaknuta .kartica-vrh-red { display: contents; }
.mreza-recenzije .kartica-istaknuta .kartica-znacke-red { grid-column: 1 / -1; grid-row: 1; justify-self: start; margin-bottom: 12px; }
.mreza-recenzije .kartica-istaknuta .ocena-zvezda-broj { grid-column: 2; grid-row: 2; align-self: start; margin-left: 0; }
.mreza-recenzije .kartica-istaknuta .kartica-naslov-blok {
    grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px;
}
.mreza-recenzije .kartica-istaknuta .kartica-citat-box {
    grid-column: 1 / -1; grid-row: 3; position: relative; margin: 20px 0 0; padding: 0 0 0 24px;
    border: 0; border-left: 2px solid rgba(30,58,138,.2); border-radius: 0; background: none;
}
.mreza-recenzije .kartica-istaknuta .kartica-citat-box::before {
    content: '\201C'; position: absolute; left: -10px; top: -14px;
    font: 700 1.9rem/1 Georgia, 'Times New Roman', serif; color: rgba(30,58,138,.3);
}
.mreza-recenzije .kartica-istaknuta .kartica-tekst { font-weight: 400; line-height: 1.6; color: var(--tekst-telo); }
.mreza-recenzije .kartica-istaknuta .meta { grid-column: 1 / -1; grid-row: 4; align-self: end; }

/* MOZAIK — 1 kolona na mobilnom, 2 na tabletu (istaknuta preko celog reda),
   3 na desktopu (istaknuta zauzima 2 kolone, pored nje jedna obična kartica). */
@media (min-width: 720px) {
    .mreza-mozaik { grid-template-columns: repeat(2, 1fr); }
    .mreza-mozaik .kartica-istaknuta { grid-column: span 2; padding: 32px; }
}
@media (min-width: 1080px) {
    .mreza-mozaik { grid-template-columns: repeat(3, 1fr); }
}

.sekcija-recenzije-mozaik { background: var(--kartica-tiha); }

@media (max-width: 480px) {
    .mreza-recenzije { gap: 14px; }
    .mreza-recenzije .kartica { padding: 18px; }
    .mreza-recenzije .kartica-istaknuta { padding: 20px; }
    .mreza-recenzije .kartica-tekst { -webkit-line-clamp: 3; }
}

/* --- Kako funkcioniše (koraci) — horizontalni tok sa spojnom linijom --- */
.sekcija-tok { background: linear-gradient(180deg, var(--sekundarna-bg) 0%, var(--pozadina) 100%); }
.koraci { display: grid; gap: 32px 20px; grid-template-columns: 1fr; counter-reset: korak; position: relative; }
@media (min-width: 760px) {
    .koraci { grid-template-columns: repeat(3, 1fr); align-items: start; }
    .koraci::before {
        content: ""; position: absolute; top: 24px; left: calc(100% / 6); right: calc(100% / 6);
        height: 2px; background: repeating-linear-gradient(90deg, var(--okvir) 0, var(--okvir) 8px, transparent 8px, transparent 16px);
        z-index: 0;
    }
}
.korak-kartica { position: relative; text-align: center; z-index: 1; }
.korak-broj {
    width: 48px; height: 48px; border-radius: 50%; background: var(--primarna); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.15rem;
    margin: 0 auto 16px; box-shadow: 0 0 0 6px var(--pozadina), 0 4px 14px rgba(30,58,138,.32);
}
@media (min-width: 760px) { .korak-broj { box-shadow: 0 0 0 6px var(--sekundarna-bg), 0 4px 14px rgba(30,58,138,.32); } }
.korak-kartica h3 { font-size: 1.05rem; margin-bottom: 6px; }
.korak-kartica p { color: var(--tekst-slabiji); font-size: .92rem; max-width: 280px; margin: 0 auto; }


/* --- Poverenje / trust traka --- */
/* --- Statistička traka (tamna poruka + svetle stavke), po uzoru na "floating
   card" koji se blago preklapa sa hero sekcijom iznad, za premium osećaj. --- */
.statistika-traka {
    display: grid; grid-template-columns: 1fr; border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--senka); border: 1px solid var(--okvir); background: var(--kartica);
}
@media (min-width: 860px) { .statistika-traka { grid-template-columns: 250px 1fr; } }
.statistika-poruka { background: var(--primarna); color: #fff; padding: 26px 28px; display: flex; flex-direction: column; justify-content: center; }
.statistika-poruka p { font-size: 1.1rem; font-weight: 700; line-height: 1.35; margin: 0 0 12px; }
.statistika-linija { width: 34px; height: 3px; background: #fff; opacity: .5; border-radius: 2px; display: block; }
.statistika-stavke { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 12px; padding: 24px 22px; }
@media (min-width: 620px) { .statistika-stavke { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .statistika-stavke { grid-template-columns: repeat(5, 1fr); } }
.statistika-stavka { text-align: center; padding: 0 6px; }
.statistika-stavka svg { width: 24px; height: 24px; color: var(--sekundarna-tamna); margin: 0 auto 8px; display: block; }
.statistika-stavka strong { display: block; font-size: 1.4rem; font-weight: 800; color: var(--tekst); line-height: 1.1; }
.statistika-stavka span { font-size: .74rem; color: var(--tekst-slabiji); }

.poverenje-traka { display: grid; gap: 14px; grid-template-columns: 1fr; text-align: center; }
@media (min-width: 700px) { .poverenje-traka { grid-template-columns: repeat(3, 1fr); } }
.poverenje-stavka { padding: 18px; }
.poverenje-stavka .ikona { font-size: 1.6rem; margin-bottom: 8px; }
.ikona-svg { width: 32px; height: 32px; color: var(--primarna); margin: 0 auto 8px; display: block; flex-shrink: 0; }
.poverenje-stavka h4 { font-size: .98rem; margin-bottom: 4px; }
.poverenje-stavka p { color: var(--tekst-slabiji); font-size: .88rem; }

/* Na mobilnom: ikonica i tekst u redu (ne stacked-centrirano) — kompaktnije i uravnoteženo */
@media (max-width: 699px) {
    .poverenje-stavka { display: flex; align-items: flex-start; gap: 14px; text-align: left; padding: 14px 4px; }
    .ikona-svg { width: 26px; height: 26px; margin: 2px 0 0; }
}

/* --- Ocene --- */
.zvezdice { position: relative; display: inline-block; font-size: 1.05rem; letter-spacing: 2px; line-height: 1; white-space: nowrap; }
.zvezdice-prazne { color: #d8dee8; }
.zvezdice-pune { position: absolute; top: 0; left: 0; overflow: hidden; width: 0; color: var(--akcenat); white-space: nowrap; }
.ocena-broj { font-weight: 700; }
.ocena-velika { font-size: 3rem; font-weight: 800; line-height: 1; }
.ocena-red { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- Raspodela i kriterijumi --- */
.raspodela-red { display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: .88rem; }
.raspodela-bar { flex: 1; height: 8px; background: var(--okvir); border-radius: 99px; overflow: hidden; }
.raspodela-bar > div { height: 100%; background: var(--akcenat); }
.kriterijum { margin-bottom: 14px; }
.kriterijum .label { display: flex; justify-content: space-between; font-size: .92rem; margin-bottom: 4px; }
.kriterijum .bar { height: 10px; background: var(--okvir); border-radius: 99px; overflow: hidden; }
.kriterijum .bar > div { height: 100%; background: var(--primarna); }

/* --- Recenzija kartica --- */
.recenzija-kartica {
    background: #fff; border: 1px solid var(--okvir); border-radius: var(--radius);
    padding: 22px; margin-bottom: 16px; max-width: 760px;
}
.recenzija-kartica .zaglavlje { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 10px; }
.recenzija-kartica .pseudonim { font-weight: 700; }
.recenzija-kartica .meta { color: var(--tekst-slabiji); font-size: .85rem; }
.recenzija-kartica .tekst { margin: 12px 0; white-space: pre-line; max-width: 68ch; overflow-wrap: anywhere; word-break: break-word; }
.recenzija-kartica .ocene-detalj { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: .85rem; color: var(--tekst-slabiji); margin-top: 10px; }
.recenzija-kartica .ocena-stavka { flex: 1 1 220px; min-width: 0; }
.recenzija-kartica .opis-kriterijuma { margin: 4px 0 0; padding: 8px 10px; background: var(--pozadina); border-radius: var(--radius-mali); color: var(--tekst); font-size: .85rem; overflow-wrap: anywhere; }
.oznaka { display: inline-block; padding: 3px 11px; border-radius: 99px; font-size: .75rem; font-weight: 700; background: var(--info-bg); color: var(--primarna-tamna); }
.oznaka.verifikovan { background: var(--uspesno-bg); color: var(--uspesno); }
.oznaka.oznaka-email { background: var(--sekundarna-bg); color: var(--sekundarna-tamna); }

/* Dodatni strukturirani podaci recenzije (status realizacije, rokovi, preporuka…) */
.recenzija-kartica .dodatni-podaci { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.oznaka-info { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: .78rem; background: var(--pozadina); color: var(--tekst-slabiji); border: 1px solid var(--okvir); }
.oznaka-info.oznaka-upozorenje { background: var(--upozorenje-bg); color: #92400e; border-color: transparent; }

/* --- Forme --- */
.forma { background: #fff; border: 1px solid var(--okvir); border-radius: var(--radius); padding: 26px; max-width: 640px; box-shadow: var(--senka); }
.forma .polje { margin-bottom: 16px; }
.forma label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 5px; }
.forma input[type=text], .forma input[type=email], .forma input[type=password],
.forma input[type=number], .forma input[type=date], .forma input[type=month], .forma select, .forma textarea {
    width: 100%; padding: 11px 13px; border: 1px solid var(--okvir); border-radius: var(--radius-mali);
    font-size: 1rem; font-family: inherit; background: #fff; transition: border-color .15s, box-shadow .15s;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(30,58,138,.15); border-color: var(--primarna);
}
.forma textarea { min-height: 140px; resize: vertical; }
.btn:focus-visible, a:focus-visible, button:focus-visible {
    outline: 2px solid var(--primarna); outline-offset: 2px;
}
.forma .pomoc { font-size: .82rem; color: var(--tekst-slabiji); margin-top: 4px; }
.forma .checkbox { display: flex; gap: 10px; align-items: flex-start; }
.forma .checkbox input { margin-top: 5px; }
.korak-naslov { font-size: 1.1rem; font-weight: 700; margin: 26px 0 12px; padding-top: 18px; border-top: 1px solid var(--okvir); }
.korak-naslov:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* Zvezdice za ocenjivanje (interaktivni unos) */
.ocena-input { display: flex; gap: 4px; font-size: 2rem; cursor: pointer; }
.ocena-input button { background: none; border: none; font-size: 2rem; color: var(--okvir); cursor: pointer; padding: 0 2px; line-height: 1; transition: color .12s, transform .12s; }
.ocena-input button.aktivna { color: var(--akcenat); }
@media (hover: hover) and (pointer: fine) {
    .ocena-input button:hover { transform: scale(1.12); }
}

/* Autocomplete pretraga investitora */
.autocomplete-lista {
    position: absolute; top: 100%; left: 0; right: 0; max-height: 280px; overflow-y: auto;
    margin-top: 4px; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--okvir); border-radius: var(--radius-mali);
    background: #fff; box-shadow: var(--senka-hover); z-index: 30;
}
.autocomplete-stavka { padding: 10px 14px; cursor: pointer; font-size: .92rem; border-bottom: 1px solid var(--pozadina); }
.autocomplete-stavka:last-child { border-bottom: none; }
.autocomplete-stavka:hover { background: var(--pozadina); }
.autocomplete-prazno { padding: 12px 14px; color: var(--tekst-slabiji); font-size: .9rem; }

/* Radio-grupe prikazane kao klikabilne kartice (status realizacije, način kupovine, ponovna kupovina) */
.radio-grupa { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-kartica {
    flex: 1 1 170px; display: flex; align-items: center; gap: 9px; padding: 11px 14px;
    border: 1px solid var(--okvir); border-radius: var(--radius-mali); cursor: pointer;
    font-size: .92rem; transition: border-color .15s, background .15s;
}
.radio-kartica:hover { border-color: var(--tekst-svetliji); }
.radio-kartica.izabrana { border-color: var(--primarna); background: var(--sekundarna-bg); }
.radio-kartica input { margin: 0; accent-color: var(--primarna); }
.radio-kartica small { display: block; color: var(--tekst-slabiji); font-size: .78rem; }

/* NPS selektor (0–10) za "da li biste preporučili" */
.nps-input { display: flex; gap: 4px; flex-wrap: wrap; }
.nps-input button {
    width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--okvir);
    background: #fff; font-weight: 700; font-size: .9rem; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.nps-input button:hover { border-color: var(--primarna); }
.nps-input button.aktivna { background: var(--primarna); border-color: var(--primarna); color: #fff; }
.nps-oznake { display: flex; justify-content: space-between; font-size: .78rem; color: var(--tekst-slabiji); margin-top: 4px; max-width: 480px; }

/* Par dropdown-a mesec + godina, koristi se umesto native <input type=month>
   koji izgleda nekonzistentno i nezgrapno na desktopu. */
.mesec-godina { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }

/* --- Wizard (multi-step forma za recenziju) --- */
.wizard-progres {
    margin-bottom: 24px; padding-top: 2px; padding-bottom: 14px;
    position: sticky; top: 64px; z-index: 30; background: #fff;
    border-bottom: 1px solid var(--okvir);
}
.wizard-progres-tekst { font-size: .82rem; font-weight: 700; color: var(--tekst-slabiji); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .03em; }
.wizard-progres-traka { height: 6px; background: var(--pozadina); border-radius: 99px; overflow: hidden; }
.wizard-progres-traka > div { height: 100%; background: var(--primarna); border-radius: 99px; transition: width .3s ease; }

/* --- Stepper: numerisani krugovi + konektori (zamenjuje tanku traku) --- */
/* Animacija prelaza između wizard koraka — klizi i pojavljuje se u smeru kretanja
   (napred = sa desna, nazad = sa leva), čist CSS bez ijedne JS biblioteke. */
@keyframes wizardUdjiDesno { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes wizardUdjiLevo  { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } }
.wizard-korak.anim-desno { animation: wizardUdjiDesno .32s cubic-bezier(.25,.8,.5,1); }
.wizard-korak.anim-levo  { animation: wizardUdjiLevo .32s cubic-bezier(.25,.8,.5,1); }
@media (prefers-reduced-motion: reduce) {
    .wizard-korak.anim-desno, .wizard-korak.anim-levo { animation: none; }
}

.stepper-red { display: flex; align-items: center; }
.stepper-stavka { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.stepper-krug {
    width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 2px solid var(--okvir);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
    color: var(--tekst-slabiji); flex-shrink: 0; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.stepper-kvacica { width: 15px; height: 15px; display: none; }
.stepper-broj { display: block; }
.stepper-naziv { font-size: .68rem; color: var(--tekst-slabiji); margin-top: 6px; text-align: center; max-width: 70px; line-height: 1.25; display: none; }

.stepper-linija {
    flex: 1; height: 2px; margin: 0 4px; align-self: flex-start; margin-top: 16px;
    background-image: repeating-linear-gradient(90deg, var(--okvir) 0 6px, transparent 6px 12px);
}
.stepper-linija.popunjena { background-image: none; background-color: var(--primarna); }

.stepper-stavka.aktivan .stepper-krug { border-color: var(--primarna); background: #fff; color: var(--primarna); box-shadow: 0 0 0 4px rgba(30,58,138,.14); }
.stepper-stavka.zavrsen .stepper-krug { border-color: var(--primarna); background: var(--primarna); color: #fff; }
.stepper-stavka.zavrsen .stepper-broj { display: none; }
.stepper-stavka.zavrsen .stepper-kvacica { display: block; }
.stepper-stavka.aktivan .stepper-naziv { color: var(--primarna); font-weight: 700; }
.stepper-stavka.zavrsen { cursor: pointer; }
.stepper-stavka.zavrsen .stepper-krug:hover { box-shadow: 0 0 0 4px rgba(30,58,138,.14); }

@media (min-width: 600px) {
    .stepper-naziv { display: block; }
}
@media (max-width: 480px) {
    .stepper-krug { width: 28px; height: 28px; font-size: .75rem; }
    .stepper-kvacica { width: 13px; height: 13px; }
    .stepper-linija { margin: 0 2px; margin-top: 13px; }
}
.wizard-podrska { color: var(--primarna-tamna); font-weight: 600; font-size: .95rem; margin-bottom: 4px; }
.wizard-dugmad { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--okvir); }
.wizard-dugmad .btn { flex: 0 0 auto; }
.wizard-dugmad .btn-primary { margin-left: auto; }
.wizard-uvod { color: var(--tekst-slabiji); font-size: .95rem; margin-bottom: 24px; line-height: 1.6; }

/* Collapsible opciona sekcija (npr. "Dodaj projekat", "Dodaj još detalja") */
.wizard-opciono { border: 1px dashed var(--okvir); border-radius: var(--radius-mali); margin-bottom: 16px; }
.wizard-opciono summary {
    cursor: pointer; padding: 12px 14px; font-weight: 700; font-size: .9rem;
    color: var(--primarna); list-style: none; display: flex; align-items: center; gap: 6px;
}
.wizard-opciono summary::-webkit-details-marker { display: none; }
.wizard-opciono summary:hover { color: var(--primarna-tamna); }
.wizard-opciono[open] summary { border-bottom: 1px dashed var(--okvir); }
.wizard-opciono-sadrzaj { padding: 4px 14px 14px; }
.label-opciono { color: var(--tekst-slabiji); font-weight: 600; }

/* Upload zona */
.upload-zona {
    border: 2px dashed var(--okvir); border-radius: var(--radius);
    padding: 30px; text-align: center; color: var(--tekst-slabiji); cursor: pointer;
    transition: border-color .15s, background .15s;
}
.upload-zona:hover, .upload-zona.premusten { border-color: var(--primarna); color: var(--primarna); background: #f5f8ff; }
.upload-zona input { display: none; }

/* --- Dugmad --- */
.btn {
    display: inline-block; padding: 11px 22px; border-radius: 999px; font-size: .95rem;
    font-weight: 700; cursor: pointer; border: 1px solid transparent; text-align: center;
    font-family: inherit; transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out),
        color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), transform 120ms var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: linear-gradient(135deg, var(--primarna-tamna) 0%, var(--primarna) 55%, var(--primarna-tamna) 100%); color: #fff; box-shadow: 0 2px 8px rgba(30,58,138,.25); }
.btn-primary:hover { background: linear-gradient(135deg, #1f2b57 0%, var(--primarna-tamna) 55%, var(--primarna-tamnija) 100%); }
.btn-outline { background: #fff; border-color: var(--okvir); color: var(--tekst); }
.btn-outline:hover { border-color: var(--primarna); color: var(--primarna); }
.btn-danger { background: var(--greska); color: #fff; }
.btn-mali { padding: 7px 15px; font-size: .85rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* --- Flash poruke --- */
.flash { max-width: 1080px; margin: 16px auto 0; padding: 0 20px; }
.flash .poruka { padding: 12px 16px; border-radius: var(--radius-mali); margin-bottom: 8px; font-size: .95rem; }
.flash .uspesno { background: var(--uspesno-bg); color: var(--uspesno); }
.flash .greska { background: var(--greska-bg); color: var(--greska); }
.flash .info { background: var(--info-bg); color: var(--primarna-tamna); }

/* --- Tabele --- */
.tabela-omotac { overflow-x: auto; background: #fff; border: 1px solid var(--okvir); border-radius: var(--radius); }
table.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th, .tabela td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--okvir); white-space: nowrap; }
.tabela th { background: var(--pozadina); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tekst-slabiji); }
.tabela tr:last-child td { border-bottom: none; }
.tabela td.tekst-uvod, .tabela td .tekst-uvod {
    white-space: normal; max-width: 260px; overflow-wrap: anywhere; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Responzivan prikaz tabela na malim ekranima — kartice umesto horizontalnog skrola */
@media (max-width: 760px) {
    .tabela-omotac { overflow-x: visible; border: none; background: none; }
    table.tabela thead { display: none; }
    table.tabela, table.tabela tbody, table.tabela tr, table.tabela td { display: block; width: 100%; }
    table.tabela tr {
        background: #fff; border: 1px solid var(--okvir); border-radius: var(--radius);
        margin-bottom: 12px; padding: 6px 16px; box-shadow: var(--senka);
    }
    table.tabela td {
        display: flex; justify-content: space-between; align-items: center; gap: 14px;
        border-bottom: 1px solid var(--pozadina); padding: 11px 0; white-space: normal; text-align: right;
    }
    table.tabela td:last-child { border-bottom: none; }
    table.tabela td::before {
        content: attr(data-label); font-weight: 700; color: var(--tekst-slabiji); font-size: .78rem;
        text-transform: uppercase; letter-spacing: .03em; text-align: left; flex-shrink: 0;
    }
    table.tabela td[data-label=""]::before { display: none; }
    table.tabela td[data-label=""] { justify-content: flex-end; }
    .tabela td.tekst-uvod, .tabela td .tekst-uvod { max-width: none; }
}

/* --- Statusne oznake --- */
.status { display: inline-block; padding: 3px 11px; border-radius: 99px; font-size: .78rem; font-weight: 700; }
.status.na_cekanju { background: var(--upozorenje-bg); color: #92400e; }
.status.odobrena, .status.odobren, .status.odobreno, .status.resena { background: var(--uspesno-bg); color: var(--uspesno); }
.status.odbijena, .status.odbijen, .status.odbijeno { background: var(--greska-bg); color: var(--greska); }
.status.prijavljena { background: #fce7f3; color: #9d174d; }
.status.uklonjena { background: var(--okvir); color: var(--tekst-slabiji); }
.status.u_izgradnji { background: var(--info-bg); color: var(--primarna-tamna); }
.status.zavrsen { background: var(--uspesno-bg); color: var(--uspesno); }
.status.obustavljen { background: var(--greska-bg); color: var(--greska); }
.status.aktivan { background: var(--uspesno-bg); color: var(--uspesno); }
.status.suspendovan { background: var(--greska-bg); color: var(--greska); }

/* --- Filteri --- */
.filteri { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; background: #fff; border: 1px solid var(--okvir); border-radius: var(--radius); padding: 16px; margin-bottom: 20px; }
.filteri .polje { display: flex; flex-direction: column; gap: 4px; }
.filteri label { font-size: .8rem; font-weight: 700; color: var(--tekst-slabiji); }
.filteri input, .filteri select { padding: 9px 11px; border: 1px solid var(--okvir); border-radius: var(--radius-mali); font-size: .92rem; font-family: inherit; }

/* --- Profil investitora --- */
.profil-zaglavlje { background: #fff; border: 1px solid var(--okvir); border-radius: var(--radius); padding: 26px; margin: 24px 0; box-shadow: var(--senka); }
.profil-zaglavlje h1 { font-size: 1.65rem; margin-bottom: 6px; }
.profil-meta { color: var(--tekst-slabiji); font-size: .9rem; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.profil-mreza { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 24px; }
@media (min-width: 820px) { .profil-mreza { grid-template-columns: 1fr 1fr 1fr; } }

/* --- Footer --- */
.site-footer { background: var(--kartica); color: var(--tekst-slabiji); padding: 48px 0 24px; margin-top: auto; font-size: .9rem; border-top: 1px solid var(--okvir); }
.site-footer a { color: var(--tekst-telo); }
.site-footer a:hover { color: var(--primarna); }
.site-footer p { font-size: .86rem; line-height: 1.6; margin-bottom: 12px; }
.site-footer .kolone { display: grid; gap: 32px; grid-template-columns: 1fr; margin-bottom: 32px; }
@media (min-width: 700px) { .site-footer .kolone.kolone-4 { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }
.site-footer h4 { color: var(--tekst); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 8px; font-size: .88rem; }
.footer-znacka {
    display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600;
    color: var(--uspesno); background: var(--uspesno-bg); padding: 5px 12px; border-radius: 99px;
}
.footer-znacka svg { width: 13px; height: 13px; flex-shrink: 0; }
.footer-status-red { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; font-size: .84rem; color: var(--tekst); font-weight: 600; }
.footer-status-red svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: var(--uspesno); }
.footer-status-red small { display: block; font-weight: 400; color: var(--tekst-slabiji); margin-top: 2px; line-height: 1.4; }
.site-footer .donja-linija {
    border-top: 1px solid var(--okvir); padding-top: 20px; font-size: .8rem;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
.donja-linija-status { display: inline-flex; align-items: center; gap: 6px; }
.tackica-zivo { width: 7px; height: 7px; border-radius: 50%; background: var(--uspesno); display: inline-block; }

/* --- Cookie consent baner --- */
.kolacici-baner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    background: #0f1729; color: #e2e8f0; padding: 16px 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,.15);
}
.kolacici-baner-sadrzaj {
    max-width: 1080px; margin: 0 auto; display: flex; align-items: center;
    justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.kolacici-baner-sadrzaj p { margin: 0; font-size: .88rem; line-height: 1.5; flex: 1 1 420px; }
.kolacici-baner-sadrzaj a { color: #c3cdf0; }
.kolacici-baner-sadrzaj .btn { flex: 0 0 auto; white-space: nowrap; }

/* --- Admin --- */
.admin-nav { background: #0f1729; padding: 10px 0; }
.admin-nav .container { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-nav a { color: #cbd5e1; padding: 7px 12px; border-radius: var(--radius-mali); font-size: .9rem; font-weight: 600; }
.admin-nav a:hover, .admin-nav a.aktivna { background: #1e293b; color: #fff; text-decoration: none; }

/* Alatna traka (filteri + pretraga + brisanje) koja ostaje vidljiva pri skrolovanju
   dugih lista (investitori, recenzije) — lepi se odmah ispod glavnog headera. */
.admin-alatna-traka {
    position: sticky; top: 64px; z-index: 40; background: var(--pozadina);
    padding: 12px 0; margin: 0 0 16px; border-bottom: 1px solid var(--okvir);
}
.stat-mreza { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin: 20px 0; }
@media (min-width: 800px) { .stat-mreza { grid-template-columns: repeat(4, 1fr); } }
.stat-kartica { background: #fff; border: 1px solid var(--okvir); border-radius: var(--radius); padding: 18px; box-shadow: var(--senka); }
.stat-kartica .broj { font-size: 1.9rem; font-weight: 800; }
.stat-kartica .opis { color: var(--tekst-slabiji); font-size: .85rem; }
.detalj-mreza { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .detalj-mreza { grid-template-columns: 2fr 1fr; } }
.upozorenje-duplikat { background: var(--upozorenje-bg); border: 1px solid #fcd34d; border-radius: var(--radius-mali); padding: 10px 14px; margin: 8px 0; font-size: .88rem; }
.privatni-podaci { background: #fff7ed; border: 1px solid #fdba74; border-radius: var(--radius); padding: 16px; }
.privatni-podaci h4 { color: #9a3412; margin-bottom: 8px; }

/* --- Razno --- */
.prazan { text-align: center; padding: 48px 16px; color: var(--tekst-slabiji); }
.dugmad-red { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.mt { margin-top: 20px; } .mb { margin-bottom: 20px; }
.text-center { text-align: center; }
.cta-traka { background: linear-gradient(145deg, #1e3a8a 0%, var(--primarna) 45%, var(--primarna-tamnija) 100%); border-radius: var(--radius); color: #fff; padding: 40px 32px; text-align: center; }
.cta-traka h2 { color: #fff; }
.cta-traka p { opacity: .92; }
.cta-traka .btn { background: #fff; color: var(--primarna); margin-top: 16px; }

/* Blaža, "svetla" varijanta CTA trake — koristi se za sekundarne pozive na akciju
   (npr. kalkulator na sredini stranice), da se izbegne ponavljanje istog punog
   plavog bloka više puta na istoj stranici. */
.cta-traka-soft {
    background: linear-gradient(135deg, var(--sekundarna-bg) 0%, #f7fafc 100%); border: 1px solid var(--okvir);
    border-radius: var(--radius); padding: 28px 32px;
}
.cta-traka-soft h2 { color: var(--tekst); font-size: 1.25rem; }
.cta-traka-soft p { color: var(--tekst-slabiji); opacity: 1; }
.cta-traka .btn:hover { background: #f1f5f9; }
.broj-navodnika { font-size: .85rem; color: var(--tekst-slabiji); }

/* --- Kalkulator cene po m² --- */
.kartica-rezultat { background: #fff; border: 1px solid var(--okvir); border-radius: var(--radius); padding: 26px; box-shadow: var(--senka); border-top: 4px solid var(--okvir); }
.kartica-rezultat.rezultat-iznad { border-top-color: var(--greska); }
.kartica-rezultat.rezultat-ispod { border-top-color: var(--uspesno); }
.kartica-rezultat.rezultat-prosek { border-top-color: var(--akcenat); }
.rezultat-glavni { display: flex; align-items: center; justify-content: center; gap: 20px; text-align: center; flex-wrap: wrap; margin-bottom: 14px; }
.rezultat-strelica { font-size: 1.8rem; font-weight: 800; color: var(--tekst-slabiji); }
.rezultat-iznad .rezultat-strelica { color: var(--greska); }
.rezultat-ispod .rezultat-strelica { color: var(--uspesno); }
.rezultat-poruka { text-align: center; font-size: 1.05rem; margin-bottom: 6px; }

/* Trend grafikon (bez eksternih biblioteka — čist CSS) */
.trend-grafikon {
    display: flex; align-items: flex-end; gap: 10px; height: 180px;
    padding: 10px 4px 0; overflow-x: auto;
}
.trend-stub { flex: 1; min-width: 46px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.trend-vrednost { font-size: .72rem; font-weight: 700; color: var(--tekst-slabiji); margin-bottom: 4px; white-space: nowrap; }
.trend-bar { width: 100%; max-width: 40px; background: linear-gradient(180deg, var(--primarna) 0%, #4f7de0 100%); border-radius: 6px 6px 0 0; min-height: 6px; transition: height .25s ease; }
.trend-godina { font-size: .8rem; color: var(--tekst-slabiji); margin-top: 8px; font-weight: 600; }

/* Top 5 liste (najskuplji / najjeftiniji gradovi) */
.top-liste { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .top-liste { grid-template-columns: 1fr 1fr; } }
.top-red {
    display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px;
    color: var(--tekst); text-decoration: none;
}
.top-red:hover { background: var(--pozadina); text-decoration: none; }
.top-naziv { flex: 0 0 108px; font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-vrednost { flex: 0 0 auto; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.top-bar-skupo > div { background: var(--greska); }
.top-bar-jeftino > div { background: var(--uspesno); }

/* ============================================================
   Admin ANALITIKA — dedicated, GA-nadahnut profesionalni izgled.
   Sve klase su prefiksovane sa "an-" i primenjuju se ISKLJUČIVO na
   /admin/analitika stranicama — ne dotiču izgled ostatka sajta.
   ============================================================ */

/* Tabovi — tanka podvučena linija umesto pill dugmića (GA/Search Console stil) */
.an-tabovi { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--okvir); margin-bottom: 24px; }
.an-tab {
    padding: 11px 4px; margin-right: 20px; font-size: .92rem; font-weight: 600;
    color: var(--tekst-slabiji); border-bottom: 2.5px solid transparent; text-decoration: none;
    transition: color .15s, border-color .15s;
}
.an-tab:hover { color: var(--tekst); text-decoration: none; }
.an-tab.aktivan { color: var(--primarna); border-bottom-color: var(--primarna); }

/* Kartice metrika — čistije, sitna verzalna oznaka iznad velikog broja */
.an-mreza { display: grid; gap: 1px; grid-template-columns: repeat(2, 1fr); background: var(--okvir); border: 1px solid var(--okvir); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; }
@media (min-width: 760px) { .an-mreza { grid-template-columns: repeat(4, 1fr); } }
.an-kartica { background: #fff; padding: 18px 20px; }
.an-oznaka { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tekst-slabiji); margin-bottom: 8px; }
.an-broj { font-size: 1.9rem; font-weight: 800; color: var(--tekst); line-height: 1; }
.an-delta { display: inline-flex; align-items: center; gap: 3px; font-size: .78rem; font-weight: 700; margin-top: 6px; }
.an-delta.pozitivno { color: var(--uspesno); }
.an-delta.negativno { color: var(--greska); }
.an-delta-sub { font-size: .78rem; color: var(--tekst-slabiji); font-weight: 500; margin-left: 4px; }

/* Sekcija sa grafikonom */
.an-panel { background: #fff; border: 1px solid var(--okvir); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; box-shadow: var(--senka); }
.an-panel-naslov { font-size: .95rem; font-weight: 700; color: var(--tekst); margin-bottom: 2px; }
.an-panel-sub { font-size: .8rem; color: var(--tekst-slabiji); margin-bottom: 14px; }
.an-panel-dvokolona { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .an-panel-dvokolona { grid-template-columns: 1fr 1fr; } }

/* SVG grafikoni (linijski i bar) */
.an-grafikon { width: 100%; height: auto; display: block; overflow: visible; }
.an-grid { stroke: #eef1f6; stroke-width: 1; }
.an-osa-tekst { font-size: 10.5px; fill: #94a3b8; font-family: inherit; }

/* Tabela u analitici — kompaktnija, sa hover redom (kao GA tabele) */
.an-tabela-omotac { overflow-x: auto; }
table.an-tabela { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.an-tabela th {
    text-align: left; padding: 9px 12px; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--tekst-slabiji); border-bottom: 1.5px solid var(--okvir); white-space: nowrap;
}
table.an-tabela td { padding: 10px 12px; border-bottom: 1px solid var(--pozadina); white-space: nowrap; }
table.an-tabela tbody tr:hover { background: #fafbfc; }
table.an-tabela tbody tr:last-child td { border-bottom: none; }

/* Benchmark poredjenje (investitor vs trziste) */
.an-benchmark-red { display: grid; grid-template-columns: 130px 1fr 60px; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .88rem; }
.an-benchmark-trake { position: relative; height: 8px; background: var(--pozadina); border-radius: 99px; }
.an-benchmark-trziste { position: absolute; top: -3px; width: 2px; height: 14px; background: #64748b; }
.an-benchmark-investitor { height: 100%; border-radius: 99px; background: var(--primarna); }
.an-benchmark-razlika { font-weight: 700; text-align: right; }
.an-benchmark-razlika.pozitivno { color: var(--uspesno); }
.an-benchmark-razlika.negativno { color: var(--greska); }
.an-benchmark-legenda { display: flex; gap: 18px; font-size: .8rem; color: var(--tekst-slabiji); margin-bottom: 16px; }
.an-benchmark-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.an-legenda-tackica { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ============================================================
   REDIZAJN — "Civil Trust & Architectural Transparency"
   Nova sekcija stilova za redizajniranu početnu stranicu.
   ============================================================ */

/* --- Eyebrow (mikro-oznaka iznad naslova) --- */
.eyebrow { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tekst-slabiji); margin-bottom: 8px; }
.eyebrow-na-tamnom { color: rgba(255,255,255,.75); }
.sekcija-naslov-red-sa-linkom { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.sekcija-naslov-red-sa-linkom h2 { margin-bottom: 4px; }
.link-sa-strelicom { font-size: .88rem; font-weight: 700; color: var(--primarna); white-space: nowrap; }
.tackica-zivo-plava { background: var(--primarna); }

/* --- Hero centriran --- */
.hero-sadrzaj-centrirano { max-width: 720px; margin: 0 auto; text-align: center; }
.hero-oznaka-red { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-oznaka-razdvajac { color: var(--tekst-svetliji); }
.hero-oznaka-tekst { font-size: .82rem; font-weight: 600; color: var(--tekst-slabiji); }
.hero-podtekst-centrirano { max-width: 520px; margin: 0 auto 30px; text-align: center; }
.hero-cta-red-centrirano { justify-content: center; margin-bottom: 22px; }
.hero-cta-red-centrirano .pretraga-hero { flex: 0 1 460px; }
.hero-cta-link { font-size: .92rem; font-weight: 700; color: var(--tekst); white-space: nowrap; }
.hero-cta-link:hover { color: var(--primarna); }
.pretraga-ikona { width: 18px; height: 18px; color: var(--tekst-svetliji); margin-left: 14px; flex-shrink: 0; }
.pretraga-hero input { padding-left: 10px; }
.hero-mini-statistike-centrirano { justify-content: center; text-align: left; }
.hero-mini-statistike-centrirano > div { flex-direction: row; align-items: baseline; gap: 5px; margin-right: 0; }
.hero-mini-statistike-centrirano strong { font-size: 1rem; }
.hero-mini-statistike-centrirano span { font-size: .82rem; }
.hero-stat-tacka { color: var(--tekst-svetliji); margin: 0 14px; }
.hero-stat-zivo { display: flex; align-items: center; gap: 6px; }
.hero-stat-zivo-tekst { font-size: .82rem; color: var(--tekst-slabiji); font-weight: 600; }
@media (max-width: 700px) {
    .hero-mini-statistike-centrirano { flex-direction: column; gap: 8px; }
    .hero-stat-tacka { display: none; }
}

/* --- KPI mreža (5 kartica statistika) --- */
.kpi-mreza { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.kpi-kartica:first-child { grid-column: span 2; }
@media (min-width: 640px) { .kpi-mreza { grid-template-columns: repeat(3, 1fr); } .kpi-kartica:first-child { grid-column: span 1; } }
@media (min-width: 900px) { .kpi-mreza { grid-template-columns: repeat(5, 1fr); } }
.kpi-kartica {
    background: var(--kartica); border: 1px solid var(--okvir); border-radius: var(--radius);
    padding: 20px; box-shadow: var(--senka);
}
.kpi-kartica svg { width: 20px; height: 20px; color: var(--tekst-slabiji); margin-bottom: 14px; }
.kpi-oznaka { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tekst-slabiji); margin-bottom: 6px; }
.kpi-broj { display: block; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; color: var(--tekst); line-height: 1.15; }
.kpi-opis { display: block; font-size: .78rem; color: var(--tekst-slabiji); margin-top: 4px; }
.kpi-kartica-tamna { background: var(--primarna); border-color: var(--primarna); }
.kpi-kartica-tamna svg,
.kpi-kartica-tamna .kpi-oznaka,
.kpi-kartica-tamna .kpi-opis { color: rgba(255,255,255,.72); }
.kpi-kartica-tamna .kpi-broj { color: #fff; }

/* --- Principi (poverenje) — 3 kartice sa numerisanom oznakom --- */
.principi-mreza { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
@media (min-width: 760px) { .principi-mreza { grid-template-columns: repeat(3, 1fr); } }
.princip-kartica { background: var(--kartica); border: 1px solid var(--okvir); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; }
.princip-tekst { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.princip-oznaka { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--primarna); margin-bottom: 16px; }
.princip-ikona {
    width: 40px; height: 40px; border-radius: 10px; background: var(--sekundarna-bg);
    display: flex; align-items: center; justify-content: center; margin-bottom: 16px; flex-shrink: 0;
}
@media (max-width: 759px) {
    .princip-kartica { flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px; }
    .princip-kartica .princip-ikona { margin-bottom: 0; }
    .princip-oznaka { display: none; }
    .princip-link { margin-top: 8px; }
}
.princip-ikona svg { width: 20px; height: 20px; color: var(--primarna); }
.princip-kartica h4 { font-size: 1.05rem; margin-bottom: 8px; }
.princip-kartica p { color: var(--tekst-telo); font-size: .92rem; line-height: 1.6; margin-bottom: 16px; flex: 1; }
.princip-link { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--tekst-slabiji); }
.princip-link svg { width: 14px; height: 14px; flex-shrink: 0; }

/* --- Kartice recenzija — gornji red (znacke preporuke/kašnjenja levo, ocena
   kao pill u uglu desno), tagovi lokacije. Crveni/zeleni akcenat na
   kartici (kartica-ocena-visoka/niska, border-top/left) je jedini deo
   koji nosi status ocene — zadržan iz postojećeg dizajna. --- */
.kartica-recenzija { position: relative; }
.kartica-znacke-red { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kartica-znacka {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    padding: 2px 8px; font-size: .6875rem; line-height: 1.5; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase;
}
.kartica-znacka svg { width: 13px; height: 13px; flex-shrink: 0; }
.kartica-znacka-zelena { background: var(--uspesno-bg); color: #047857; border-radius: 99px; }
.kartica-znacka-crvena { background: #ffdad6; color: #93000a; border-radius: 4px; }

/* Crveni/zeleni akcenat kartice (po oceni) — logika nepromenjena; :hover varijanta
   sprečava da globalni .kartica:hover prebaci boju ivice nazad na sivu. */
.mreza-recenzije .kartica-ocena-visoka,
.mreza-recenzije .kartica-ocena-visoka:hover { border-top: 4px solid var(--uspesno); }
.mreza-recenzije .kartica-ocena-niska,
.mreza-recenzije .kartica-ocena-niska:hover { border-color: rgba(239,68,68,.2); border-left: 6px solid var(--greska); padding-left: 20px; }

/* Ocena — čip gore desno: svetao (podrazumevano), tamnoplav (visoka ocena),
   crvenkast (niska ocena); istaknuta kartica uvek ima svetao čip sa "/ 5". */
.ocena-zvezda-broj {
    display: inline-flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0;
    padding: 4px 10px; border-radius: 8px; border: 1px solid transparent;
    background: #eaedff; color: var(--tekst); font-size: .875rem; line-height: 1.3; font-weight: 700;
}
.ocena-zvezda-broj svg { width: 13px; height: 13px; color: var(--primarna); flex-shrink: 0; }
.ocena-od { display: none; font-size: .75rem; font-weight: 400; color: var(--tekst-slabiji); }
.kartica-recenzija.kartica-ocena-visoka .ocena-zvezda-broj { background: var(--primarna-tamna); border-color: var(--primarna-tamna); color: #fff; }
.kartica-recenzija.kartica-ocena-visoka .ocena-zvezda-broj svg { color: #fff; }
.kartica-recenzija.kartica-istaknuta .ocena-zvezda-broj { background: #f2f3ff; border-color: var(--okvir); color: var(--primarna); padding: 4px 12px; }
.kartica-recenzija.kartica-istaknuta .ocena-zvezda-broj svg { color: var(--primarna); }
.kartica-recenzija.kartica-istaknuta .ocena-od { display: inline; }
.kartica-recenzija.kartica-ocena-niska .ocena-zvezda-broj { background: #ffdad6; border-color: #ffdad6; color: #ba1a1a; }
.kartica-recenzija.kartica-ocena-niska .ocena-zvezda-broj svg { color: #ba1a1a; }

/* Lokacija — pill u prvom redu (obične kartice bez značke) / pored naslova
   (istaknuta) / običan tekst ispod naslova (kartice sa značkom). */
.tag-lokacija {
    display: inline-block; font-size: .72rem; font-weight: 600; color: var(--tekst-slabiji);
    background: var(--sekundarna-bg); padding: 2px 9px; border-radius: 99px;
}
.tag-lokacija-mala { font-size: .68rem; padding: 1px 8px; }
.mreza-recenzije .tag-lokacija {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px;
    background: #eef0ff; color: var(--tekst-slabiji); font-size: .75rem; font-weight: 500; line-height: 1.5; white-space: nowrap;
}
.mreza-recenzije .kartica-istaknuta .tag-lokacija { background: #f2f3ff; color: #444651; }
.kartica-lokacija { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; color: var(--tekst-slabiji); }
.mreza-recenzije .tag-lokacija svg, .kartica-lokacija svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Footer kartice — ikonice verifikacije levo, autor · datum desno, u jednom redu (bez prelamanja) */
.mreza-recenzije .kartica-bedzevi { display: flex; align-items: center; gap: 6px; margin-bottom: 0; flex-shrink: 0; }
.kartica-podaci { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: .75rem; color: var(--tekst-slabiji); }
.kartica-podaci-ikona { display: none; width: 14px; height: 14px; flex-shrink: 0; }
.kartica-istaknuta .kartica-podaci-ikona { display: block; }
.kartica-autor { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.kartica-razdvajac, .kartica-datum { flex-shrink: 0; white-space: nowrap; }
.oznaka svg { width: 11px; height: 11px; vertical-align: -1px; margin-right: 1px; }

/* --- CTA analitička (kalkulator) — dekorativna kruzna grafika --- */
.cta-traka-analiticka { position: relative; overflow: hidden; text-align: left; padding: 44px 40px; }
.cta-analiticka-dekor { position: absolute; top: 50%; right: -30px; transform: translateY(-50%); width: 260px; height: 260px; opacity: .8; pointer-events: none; }
.cta-analiticka-dekor svg { width: 100%; height: 100%; }
.cta-analiticka-sadrzaj { position: relative; z-index: 1; max-width: 480px; }
.cta-traka-analiticka h2 { margin-bottom: 8px; }
.cta-analiticka-napomena { margin: 14px 0 0; font-size: .82rem; color: rgba(255,255,255,.65) !important; opacity: 1 !important; }
.btn-svetli { background: #fff; color: var(--primarna); margin-top: 18px; display: inline-block; }
.btn-svetli:hover { background: #f1f5f9; color: var(--primarna-tamna); }

/* --- Rang lista investitora --- */
.rang-lista { display: flex; flex-direction: column; gap: 2px; background: var(--kartica); border: 1px solid var(--okvir); border-radius: var(--radius); overflow: hidden; }
.rang-red { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-bottom: 1px solid var(--okvir); transition: background 150ms var(--ease-out); }
.rang-red:last-child { border-bottom: none; }
.rang-red:hover { background: var(--kartica-tiha); }
.rang-broj { font-size: 1.1rem; font-weight: 700; color: var(--tekst-svetliji); width: 32px; flex-shrink: 0; }
.rang-info { flex: 1; min-width: 0; }
.rang-naziv-red { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rang-naziv-red .naslov-link { font-weight: 700; font-size: .98rem; }
.tag-upozorenje { font-size: .7rem; font-weight: 700; color: var(--greska); background: var(--greska-bg); padding: 2px 9px; border-radius: 99px; }
.rang-info .meta { color: var(--tekst-slabiji); font-size: .84rem; }
.rang-ocena { display: flex; align-items: center; gap: 5px; font-size: 1.05rem; font-weight: 800; color: var(--tekst); flex-shrink: 0; }
.rang-ocena svg { width: 15px; height: 15px; color: var(--akcenat); }
.rang-ocena-losa { color: var(--greska); }
.rang-ocena-losa svg { color: var(--greska); }
@media (max-width: 640px) {
    .rang-red { flex-wrap: wrap; }
    .rang-red .btn { width: 100%; text-align: center; order: 5; margin-top: 8px; }
}

/* --- CTA završna (podeli iskustvo) --- */
.cta-traka-zavrsna { text-align: center; }
.cta-zavrsna-ikona {
    width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.cta-zavrsna-ikona svg { width: 26px; height: 26px; color: #fff; }
.cta-zavrsna-poverenje { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 20px; font-size: .8rem; color: rgba(255,255,255,.7); }
.cta-zavrsna-poverenje span { display: inline-flex; align-items: center; gap: 6px; }
.cta-zavrsna-poverenje svg { width: 14px; height: 14px; }

/* ============================================================
   Stranica za ocenjivanje — header + dvokolonski layout sa
   sidebar-om (sidebar se NE prikazuje na mobilnom, po zahtevu).
   ============================================================ */
.ocenjivanje-container { padding-top: 32px; padding-bottom: 48px; }
.ocenjivanje-header { max-width: 720px; margin-bottom: 24px; }
.ocenjivanje-header h1 { margin: 14px 0 10px; }
.ocenjivanje-header .wizard-uvod { color: var(--tekst-telo); font-size: 1rem; line-height: 1.6; }
.ocenjivanje-layout { display: block; }
.ocenjivanje-sidebar { display: none; }
@media (min-width: 980px) {
    .ocenjivanje-layout { display: grid; grid-template-columns: minmax(0, 720px) 1fr; align-items: start; gap: 28px; }
    .ocenjivanje-layout .forma { max-width: none !important; }
    .ocenjivanje-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 84px; }
}
.sidebar-kartica { background: var(--kartica); border: 1px solid var(--okvir); border-radius: var(--radius); padding: 24px; box-shadow: var(--senka); }
.sidebar-kartica-ikona {
    width: 38px; height: 38px; border-radius: 10px; background: var(--sekundarna-bg);
    display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.sidebar-kartica-ikona svg { width: 19px; height: 19px; color: var(--primarna); }
.sidebar-kartica h4 { font-size: 1rem; margin-bottom: 8px; }
.sidebar-kartica p { font-size: .88rem; color: var(--tekst-telo); line-height: 1.6; }
.sidebar-lista { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.sidebar-lista li { display: flex; align-items: flex-start; gap: 8px; font-size: .86rem; color: var(--tekst-telo); line-height: 1.5; }
.sidebar-lista svg { width: 15px; height: 15px; color: var(--uspesno); flex-shrink: 0; margin-top: 2px; }
.sidebar-kartica-tamna { background: var(--primarna); border-color: var(--primarna); color: #fff; }
.sidebar-kartica-tamna h4 { color: #fff; }
.sidebar-kartica-tamna p { color: rgba(255,255,255,.82); }
.sidebar-kartica-ikona-svetla { background: rgba(255,255,255,.14); }
.sidebar-kartica-ikona-svetla svg { color: #fff; }
.sidebar-znacka { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: #fff; margin-top: 14px; }
.sidebar-znacka svg { width: 13px; height: 13px; }

/* --- Icon-only bedževi verifikacije (email/dokaz o kupovini) sa tooltip-om
   na hover/fokus — štede prostor u odnosu na pun tekstualni bedž, bitno
   pogotovo na mobilnom gde je svaki piksel širine dragocen. --- */
.kartica-bedzevi { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bedz-ikona { position: relative; display: inline-flex; width: 24px; height: 24px; cursor: default; }
.bedz-ikona svg { width: 100%; height: 100%; }
.bedz-ikona:focus { outline: none; }
.bedz-tooltip {
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px);
    background: var(--tekst); color: #fff; font-size: .72rem; font-weight: 600; line-height: 1.3;
    padding: 5px 9px; border-radius: 6px; white-space: nowrap; z-index: 20;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), visibility 150ms;
}
.bedz-tooltip::after {
    content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--tekst);
}
.bedz-ikona:hover .bedz-tooltip, .bedz-ikona:focus-visible .bedz-tooltip {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.kartica-footer-red {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: nowrap;
    padding-top: 14px; border-top: 1px solid var(--okvir);
    font-size: .75rem; color: var(--tekst-slabiji);
}

/* ============================================================
   Kalkulator cene po m² — redizajn po Stitch referenci. Sve pod
   .kalkulator-stranica da se ne dotaknu deljene klase (.forma, .polje,
   .hero, .mreza, .top-bar-*, .raspodela-bar, .ocena-velika...) koje
   koriste i druge stranice (prijava, registracija, admin analitika,
   investitor profil, itd).
   ============================================================ */
.kalkulator-stranica .sekcija { padding: 40px 0; }
.kalkulator-stranica .sekcija.kalkulator-intro-sekcija { padding-bottom: 0; }

.kalkulator-intro-kartica {
    position: relative; overflow: hidden; padding: 32px; margin-bottom: 28px;
}
.kalkulator-intro-kartica::before {
    content: ""; position: absolute; top: -70px; right: -70px; width: 220px; height: 220px;
    border-radius: 50%; background: var(--sekundarna-bg); opacity: .6; pointer-events: none;
}
.kalkulator-oznaka {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 99px; background: var(--sekundarna-bg); color: var(--primarna);
    font-size: .74rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 16px;
}
.kalkulator-intro-kartica h1 { position: relative; z-index: 1; margin-bottom: 12px; }
.kalkulator-intro-tekst { position: relative; z-index: 1; color: var(--tekst-slabiji); font-size: 1.02rem; line-height: 1.6; max-width: 720px; margin-bottom: 18px; }
.kalkulator-poverenje-red { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.kalkulator-poverenje-stavka {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--radius-mali);
    background: var(--kartica-tiha); color: var(--tekst-telo); font-size: .82rem; font-weight: 600;
}
.kalkulator-poverenje-stavka svg { width: 15px; height: 15px; color: var(--uspesno); flex-shrink: 0; }
.kalkulator-poverenje-stavka:last-child svg { color: var(--primarna); }

/* --- Glavni radni prostor: forma (levo) + rezultati (desno) --- */
.kalkulator-grid { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .kalkulator-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

.kalkulator-forma-kartica, .kalkulator-rezultati-kartica { padding: 26px 28px; }
.kalkulator-forma-kartica { display: flex; flex-direction: column; gap: 20px; }
.kalkulator-kartica-vrh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kalkulator-kartica-naslov { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 800; color: var(--tekst); }
.kalkulator-ikona-badz {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 34px; height: 34px; border-radius: var(--radius-mali); background: var(--sekundarna-bg); color: var(--primarna);
}
.kalkulator-ikona-badz svg { width: 18px; height: 18px; }
.kalkulator-reset-dugme {
    display: inline-flex; align-items: center; gap: 5px; padding: 0; border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: .8rem; font-weight: 600; color: var(--tekst-slabiji); transition: color 150ms var(--ease-out);
}
.kalkulator-reset-dugme:hover { color: var(--primarna); }
.kalkulator-reset-dugme svg { width: 14px; height: 14px; }

.kalkulator-forma { display: flex; flex-direction: column; gap: 18px; }
.kalkulator-polje { display: flex; flex-direction: column; gap: 6px; }
.kalkulator-polje label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: .88rem; font-weight: 700; color: var(--tekst); }
.kalkulator-label-desno { font-size: .74rem; font-weight: 500; color: var(--tekst-slabiji); }
.kalkulator-select-omotac, .kalkulator-unos-omotac { position: relative; display: flex; align-items: center; }
.kalkulator-stranica select,
.kalkulator-stranica input[type=number] {
    width: 100%; appearance: none; background: var(--kartica-tiha); color: var(--tekst);
    border: 1px solid var(--okvir); border-radius: var(--radius-mali); padding: 12px 14px;
    font-size: .95rem; font-family: inherit; box-shadow: var(--senka); transition: border-color .15s, box-shadow .15s;
}
.kalkulator-stranica select { padding-right: 38px; cursor: pointer; }
.kalkulator-stranica input[type=number] { -moz-appearance: textfield; }
.kalkulator-stranica select:focus,
.kalkulator-stranica input[type=number]:focus {
    outline: none; border-color: var(--primarna); box-shadow: 0 0 0 3px rgba(30,58,138,.14);
}
.kalkulator-select-strelica { position: absolute; right: 12px; width: 18px; height: 18px; color: var(--tekst-slabiji); pointer-events: none; }
.kalkulator-unos-prefiks { position: absolute; left: 14px; font-weight: 700; color: var(--tekst-slabiji); }
.kalkulator-unos-omotac:has(.kalkulator-unos-prefiks) input { padding-left: 30px; }
.kalkulator-unos-sufiks { position: absolute; right: 14px; font-size: .78rem; font-weight: 700; color: var(--tekst-slabiji); }
.kalkulator-unos-omotac:has(.kalkulator-unos-sufiks) input { padding-right: 40px; }
.kalkulator-pomoc { display: flex; align-items: flex-start; gap: 6px; font-size: .78rem; color: var(--tekst-slabiji); line-height: 1.5; }
.kalkulator-pomoc svg { width: 14px; height: 14px; margin-top: 2px; color: var(--primarna); flex-shrink: 0; }
.kalkulator-submit-dugme { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; }
.kalkulator-submit-dugme svg { width: 16px; height: 16px; }

.kalkulator-verifikacija-napomena {
    display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: var(--radius-mali); background: var(--kartica-tiha);
}
.kalkulator-verifikacija-napomena svg { width: 18px; height: 18px; color: var(--primarna); flex-shrink: 0; margin-top: 1px; }
.kalkulator-verifikacija-napomena strong { display: block; font-size: .84rem; margin-bottom: 2px; }
.kalkulator-verifikacija-napomena span { display: block; font-size: .78rem; color: var(--tekst-slabiji); line-height: 1.5; }

/* --- Rezultati (desna kolona, AJAX-osvežavana) --- */
.kalkulator-rezultati-kolona { display: flex; flex-direction: column; gap: 20px; transition: opacity 150ms var(--ease-out); }
.kalkulator-rezultati-kartica { display: flex; flex-direction: column; gap: 22px; }
.kalkulator-rezultati-vrh { display: flex; flex-direction: column; gap: 2px; }
.kalkulator-rezultati-oznaka { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-slabiji); }
.kalkulator-rezultati-grad { font-size: 1.4rem; }

.kalkulator-prazno-stanje { align-items: center; text-align: center; padding: 52px 28px; color: var(--tekst-slabiji); gap: 14px; }
.kalkulator-prazno-ikona {
    display: flex; align-items: center; justify-content: center; width: 52px; height: 52px;
    border-radius: 50%; background: var(--sekundarna-bg); color: var(--primarna); margin: 0 auto;
}
.kalkulator-prazno-ikona svg { width: 26px; height: 26px; }
.kalkulator-prazno-stanje p { max-width: 320px; font-size: .95rem; line-height: 1.5; }
.kalkulator-prazno-stanje-manje { text-align: center; padding: 8px 0 4px; }
.kalkulator-prazno-stanje-manje p:first-child { margin-bottom: 6px; }

.kalkulator-metrike-mreza { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.kalkulator-metrika-kartica { display: flex; flex-direction: column; padding: 18px; border-radius: var(--radius-mali); background: var(--kartica-tiha); }
.kalkulator-metrika-oznaka { font-size: .78rem; color: var(--tekst-slabiji); font-weight: 600; }
.kalkulator-metrika-broj-red { display: flex; align-items: baseline; gap: 5px; margin-top: 4px; }
.kalkulator-metrika-broj { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; color: var(--primarna); }
.kalkulator-metrika-jedinica { font-size: .8rem; font-weight: 700; color: var(--tekst-slabiji); }
.kalkulator-metrika-napomena { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: .74rem; color: var(--tekst-slabiji); }
.kalkulator-metrika-napomena svg { width: 12px; height: 12px; flex-shrink: 0; }
.kalkulator-metrika-diff { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: .8rem; font-weight: 700; }
.kalkulator-metrika-diff svg { width: 14px; height: 14px; flex-shrink: 0; }
.kalkulator-metrika-kartica-korisnik.kalkulator-stanje-ispod .kalkulator-metrika-broj,
.kalkulator-metrika-kartica-korisnik.kalkulator-stanje-ispod .kalkulator-metrika-diff { color: var(--uspesno); }
.kalkulator-metrika-kartica-korisnik.kalkulator-stanje-iznad .kalkulator-metrika-broj,
.kalkulator-metrika-kartica-korisnik.kalkulator-stanje-iznad .kalkulator-metrika-diff { color: var(--greska); }
.kalkulator-metrika-kartica-korisnik.kalkulator-stanje-prosek .kalkulator-metrika-broj,
.kalkulator-metrika-kartica-korisnik.kalkulator-stanje-prosek .kalkulator-metrika-diff { color: var(--primarna); }

.kalkulator-poredjenje-blok { display: flex; flex-direction: column; gap: 8px; }
.kalkulator-poredjenje-vrh { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: .8rem; color: var(--tekst-slabiji); }
.kalkulator-poredjenje-status { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.kalkulator-poredjenje-status svg { width: 14px; height: 14px; }
.kalkulator-poredjenje-status.kalkulator-stanje-ispod { color: var(--uspesno); }
.kalkulator-poredjenje-status.kalkulator-stanje-iznad { color: var(--greska); }
.kalkulator-poredjenje-status.kalkulator-stanje-prosek { color: var(--primarna); }
.kalkulator-poredjenje-traka { width: 100%; height: 10px; background: var(--sekundarna-bg); border-radius: 99px; overflow: hidden; }
.kalkulator-poredjenje-traka-ispuna { height: 100%; border-radius: 99px; transition: width .4s var(--ease-out); background: var(--primarna); }
.kalkulator-poredjenje-traka-ispuna.kalkulator-stanje-ispod { background: var(--uspesno); }
.kalkulator-poredjenje-traka-ispuna.kalkulator-stanje-iznad { background: var(--greska); }
.kalkulator-poredjenje-oznake { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .74rem; color: var(--tekst-slabiji); }
.kalkulator-poredjenje-oznaka-prosek { font-weight: 700; color: var(--primarna); }

/* --- Top 5 najskuplji / najpovoljniji: liste u obliku rangiranih redova --- */
.kalkulator-top5-kartica { padding: 24px 26px; }
.kalkulator-top5-vrh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.kalkulator-top5-naslov { display: flex; align-items: center; gap: 10px; font-size: .98rem; font-weight: 800; color: var(--tekst); }
.kalkulator-top5-ikona {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 32px; height: 32px; border-radius: var(--radius-mali);
}
.kalkulator-top5-ikona svg { width: 16px; height: 16px; }
.kalkulator-top5-ikona-skupo { background: var(--sekundarna-bg); color: var(--primarna); }
.kalkulator-top5-ikona-jeftino { background: var(--uspesno-bg); color: var(--uspesno); }
.kalkulator-top5-oznaka { font-size: .74rem; color: var(--tekst-slabiji); white-space: nowrap; }

.kalkulator-top5-kartica .top-red {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 14px; border-radius: var(--radius-mali); background: var(--kartica-tiha);
    text-decoration: none; color: inherit; margin-bottom: 8px; transition: background 150ms var(--ease-out);
}
.kalkulator-top5-kartica .top-red:last-child { margin-bottom: 0; }
.kalkulator-top5-kartica .top-red:hover { background: var(--sekundarna-bg); text-decoration: none; }
.top-red-levo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.top-red-broj {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px;
    border-radius: 50%; background: var(--sekundarna-bg); color: var(--primarna); font-size: .74rem; font-weight: 800;
}
.top-red-jeftino .top-red-broj { background: var(--uspesno-bg); color: var(--uspesno); }
.top-red-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kalkulator-top5-kartica .top-naziv { flex: none; font-size: .92rem; font-weight: 700; color: var(--tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-red-podnaslov { font-size: .74rem; color: var(--tekst-slabiji); }
.top-red-desno { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.kalkulator-top5-kartica .top-vrednost { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: .95rem; font-weight: 800; color: var(--primarna); }
.top-red-jeftino .top-vrednost { color: var(--uspesno); }
.top-vrednost-jedinica { font-size: .68rem; font-weight: 600; color: var(--tekst-slabiji); }
.top-red-strelica { width: 16px; height: 16px; color: var(--tekst-slabiji); flex-shrink: 0; }

/* --- CTA "Kupili ste stan nedavno?" — horizontalni banner, tekst levo / dugme
   desno na širim ekranima, isti tamnoplavi izgled kao .cta-traka na drugim
   stranicama (pocetna), samo drugačiji (horizontalni) raspored. --- */
.kalkulator-cta-traka {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 20px 28px; text-align: left; padding: 34px 36px;
}
.kalkulator-cta-tekst { max-width: 560px; }
.kalkulator-cta-tekst h2 { margin-bottom: 8px; font-size: 1.3rem; }
.kalkulator-cta-dugme { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; margin-top: 0; }
.kalkulator-cta-dugme svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
    .kalkulator-cta-traka { flex-direction: column; align-items: flex-start; padding: 26px; }
    .kalkulator-cta-dugme { width: 100%; justify-content: center; }
}

/* --- Napomena o metodologiji --- */
.kalkulator-napomena-kartica { display: flex; align-items: flex-start; gap: 16px; padding: 26px 28px; }
.kalkulator-napomena-ikona {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 46px; height: 46px;
    border-radius: var(--radius-mali); background: var(--sekundarna-bg); color: var(--primarna);
}
.kalkulator-napomena-ikona svg { width: 22px; height: 22px; }
.kalkulator-napomena-kartica .meta { font-size: .88rem; line-height: 1.6; }

/* --- Responsive: tablet i mobilni --- */
@media (max-width: 640px) {
    .kalkulator-intro-kartica { padding: 22px; }
    .kalkulator-forma-kartica, .kalkulator-rezultati-kartica, .kalkulator-top5-kartica, .kalkulator-napomena-kartica { padding: 20px; }
    .kalkulator-napomena-kartica { flex-direction: column; }
    .kalkulator-metrike-mreza { gap: 8px; }
    .kalkulator-metrika-kartica { padding: 14px; }
    .kalkulator-metrika-broj { font-size: 1.4rem; }
}


/* ============================================================
   Stranica "O nama" — redizajn po referenci (desktop + mobilni).
   Sve pod .onama-stranica. .onama-d = samo desktop (>=768px),
   .onama-m = samo mobilni (<768px).
   ============================================================ */
.onama-stranica {
    --o-primary: #00236f; --o-primary-c: #1e3a8a; --o-secondary: #0051d5;
    --o-text: #131b2e; --o-text-v: #444651; --o-muted: #64748B;
    --o-surface: #faf8ff; --o-low: #f2f3ff; --o-c: #eaedff; --o-high: #e2e7ff; --o-canvas: #F8FAFC;
    --o-err: #ba1a1a; --o-errc: #ffdad6; --o-ok: #047857; --o-okbg: #ECFDF5; --o-mail: #1D4ED8; --o-mailbg: #EFF6FF;
    background: var(--o-surface); color: var(--o-text); overflow-x: hidden;
}
@media (min-width: 768px) { .onama-stranica .onama-m { display: none !important; } }
@media (max-width: 767px) { .onama-stranica .onama-d { display: none !important; } }

.onama-ik { width: 20px; height: 20px; flex-shrink: 0; }
.onama-ik-mala { width: 16px; height: 16px; }
.onama-ik-velika { width: 24px; height: 24px; }
.onama-boja-crvena { color: var(--o-err); }
.onama-boja-zelena { color: var(--o-ok); }
.onama-boja-plava { color: var(--o-secondary); }
.onama-boja-tirkiz { color: #89f5e7; }
.onama-in { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.onama-oznaka { display: block; margin-bottom: 8px; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--o-secondary); }
.onama-h2 { font-size: 2.25rem; line-height: 1.22; font-weight: 800; letter-spacing: -.025em; color: var(--o-text); }
.onama-uvod { max-width: 576px; margin-bottom: 48px; }
.onama-uvod-centar { max-width: 672px; margin-left: auto; margin-right: auto; text-align: center; }
.onama-uvod-p { margin-top: 8px; font-size: .9375rem; line-height: 1.6; color: var(--o-muted); }

/* --- Hero --- */
.onama-hero { position: relative; overflow: hidden; padding: 32px 0 48px; }
.onama-glow {
    position: absolute; top: -160px; left: 50%; transform: translateX(-50%); width: 720px; height: 360px;
    background: rgba(219,225,255,.4); filter: blur(120px); border-radius: 50%; pointer-events: none;
}
.onama-hero-tekst { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 768px; margin: 0 auto 48px; }
.onama-kicker {
    display: inline-flex; align-items: center; gap: 8px; padding: 4px 16px; margin-bottom: 16px; border-radius: 99px;
    background: var(--o-high); color: var(--o-secondary); font-size: .75rem; font-weight: 600; letter-spacing: .02em; box-shadow: var(--senka);
}
.onama-tacka { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #6366F1; animation: onamaPuls 2s ease-in-out infinite; }
@keyframes onamaPuls { 50% { opacity: .4; } }
.onama-hero h1 { margin-bottom: 16px; font-size: 2.25rem; line-height: 1.22; font-weight: 800; letter-spacing: -.025em; color: var(--o-text); }
.onama-plavo { color: var(--o-secondary); }
.onama-lead { font-size: 1.125rem; line-height: 1.55; letter-spacing: -.01em; color: var(--o-muted); }
.onama-jak { font-weight: 600; color: var(--o-text); }
.onama-pilule { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; }
.onama-pilula {
    display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; border-radius: 99px;
    font-size: .75rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; box-shadow: var(--senka);
}
.onama-pilula .onama-ik, .onama-pilula .onama-d, .onama-pilula .onama-m { display: inline-flex; }
.onama-pilula .onama-ik { width: 16px; height: 16px; }
.onama-pilula-1 { background: var(--o-okbg); color: var(--o-ok); }
.onama-pilula-2 { background: var(--o-mailbg); color: var(--o-mail); }
.onama-pilula-3 { background: var(--o-c); color: var(--o-text-v); }

.onama-metrike { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .onama-metrike { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .onama-metrike { grid-template-columns: repeat(4, 1fr); } }
.onama-metrika { display: flex; flex-direction: column; padding: 24px; border-radius: 12px; background: #fff; box-shadow: var(--senka); transition: box-shadow .18s ease; }
.onama-metrika:hover { box-shadow: var(--senka-hover); }
.onama-metrika-vrh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.onama-ikona-kutija { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 8px; background: var(--o-low); color: var(--o-primary); }
.onama-ikona-kutija .onama-ik { width: 24px; height: 24px; }
.onama-ikona-zelena { background: var(--o-okbg); color: var(--o-ok); }
.onama-ikona-plava { background: var(--o-high); color: var(--o-secondary); }
.onama-labela-mala { font-size: .75rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--o-muted); }
.onama-labela-mala.onama-boja-zelena { font-weight: 700; color: var(--o-ok); }
.onama-metrika-broj { font-size: 2rem; line-height: 1.19; font-weight: 800; letter-spacing: -.02em; color: var(--o-primary); }
.onama-metrika-broj.onama-boja-zelena { color: var(--o-ok); }
.onama-metrika-broj.onama-boja-plava { color: var(--o-secondary); }
.onama-metrika h3 { margin: 4px 0 8px; font-size: 1.125rem; line-height: 1.45; font-weight: 700; letter-spacing: -.01em; color: var(--o-text); }
.onama-metrika p { font-size: .875rem; line-height: 1.43; color: var(--o-muted); }

/* --- Četiri stuba (mobilni) --- */
.onama-stubovi { padding: 16px 0; background: #F1F5F9; }
.onama-h2-mali { font-size: 1.125rem; line-height: 1.45; font-weight: 800; letter-spacing: -.01em; margin-bottom: 16px; }
.onama-stubovi-mreza { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.onama-stub { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: var(--senka); }
.onama-stub-zeleni { background: var(--o-okbg); }
.onama-stub-ikona { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: var(--o-low); color: var(--o-primary-c); }
.onama-stub-ikona .onama-ik { width: 24px; height: 24px; }
.onama-stub-zeleni .onama-stub-ikona { background: #fff; color: var(--o-ok); }
.onama-stub-broj { font-size: 1.125rem; line-height: 1.2; font-weight: 800; color: var(--o-text); }
.onama-stub-naslov { font-size: .875rem; line-height: 1.43; font-weight: 700; color: var(--o-text); }
.onama-stub p { margin-top: 4px; font-size: .75rem; line-height: 1.35; color: var(--o-text-v); }
.onama-stub-tag { display: inline-block; margin-bottom: 4px; padding: 2px 6px; border-radius: 4px; background: #fff; color: var(--o-ok); font-size: .75rem; font-weight: 700; }

/* --- Zašto je nastao Temelj --- */
.onama-problem { margin: 24px 0; padding: 72px 0; background: var(--o-low); }
.onama-poredjenje { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .onama-poredjenje { grid-template-columns: repeat(2, 1fr); } }
.onama-uporedna { display: flex; flex-direction: column; justify-content: space-between; padding: 32px; border-radius: 12px; background: #fff; box-shadow: var(--senka); }
.onama-uporedna-vrh { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.onama-krug { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; }
.onama-krug-mali { width: 24px; height: 24px; }
.onama-krug-mali .onama-ik { width: 16px; height: 16px; }
.onama-krug-crveno { background: var(--o-errc); color: var(--o-err); }
.onama-krug-zeleno { background: var(--o-okbg); color: var(--o-ok); }
.onama-krug-bela { background: #fff; color: var(--o-ok); }
.onama-mala-oznaka { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.onama-uporedna h3 { font-size: 1.125rem; line-height: 1.45; font-weight: 700; letter-spacing: -.01em; color: var(--o-text); }
.onama-lista { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.onama-lista li { display: flex; align-items: flex-start; gap: 12px; }
.onama-lista li > .onama-ik { margin-top: 2px; }
.onama-lista strong { display: block; font-size: .875rem; line-height: 1.43; font-weight: 600; color: var(--o-text); }
.onama-lista p { font-size: .875rem; line-height: 1.43; color: var(--o-muted); }
.onama-traka { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding: 12px; border-radius: 8px; font-size: .75rem; }
.onama-traka-crvena { background: #fff; color: var(--o-muted); }
.onama-traka-crvena .onama-boja-crvena { font-weight: 600; }
.onama-traka-zelena { background: rgba(236,253,245,.5); color: var(--o-ok); }
.onama-jako { font-weight: 700; }

.onama-poredjenje-m { display: flex; flex-direction: column; gap: 16px; }
.onama-m-kartica { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; box-shadow: var(--senka); }
.onama-m-kartica-crvena { background: var(--o-low); }
.onama-m-kartica-zelena { background: var(--o-okbg); }
.onama-m-glava { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 700; }
.onama-m-lista { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.onama-m-lista > div { display: flex; align-items: flex-start; gap: 10px; font-size: .875rem; line-height: 1.43; color: var(--o-text); }
.onama-m-lista .onama-ik { width: 18px; height: 18px; margin-top: 2px; }

/* --- Verifikacija u 3 koraka --- */
.onama-verif { padding-top: 48px; padding-bottom: 48px; }
.onama-koraci { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .onama-koraci { grid-template-columns: repeat(3, 1fr); } }
.onama-korak { display: flex; flex-direction: column; padding: 32px; border-radius: 12px; background: #fff; box-shadow: var(--senka); transition: box-shadow .18s ease; }
.onama-korak:hover { box-shadow: var(--senka-hover); }
.onama-korak-vrh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.onama-broj { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--o-primary); color: #fff; font-size: 1.125rem; font-weight: 700; }
.onama-broj-mali { width: 32px; height: 32px; background: var(--o-primary-c); }
.onama-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 99px; font-size: .75rem; font-weight: 600; }
.onama-tag-plavi { background: var(--o-high); color: var(--o-secondary); }
.onama-tag-zeleni { background: var(--o-okbg); color: var(--o-ok); }
.onama-tag-mejl { background: var(--o-mailbg); color: var(--o-mail); }
.onama-tag-ikona { padding: 2px 12px; }
.onama-tag-ikona .onama-ik { width: 14px; height: 14px; }
.onama-korak h3 { margin-bottom: 8px; font-size: 1.125rem; line-height: 1.45; font-weight: 700; letter-spacing: -.01em; color: var(--o-text); }
.onama-korak p { margin-bottom: 16px; font-size: .875rem; line-height: 1.6; color: var(--o-muted); }
.onama-korak-noga { display: flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 12px; font-size: .75rem; font-weight: 500; color: var(--o-muted); }
.onama-korak-noga .onama-ik { width: 16px; height: 16px; }
.onama-pseudonim { padding: 2px 6px; border-radius: 4px; background: var(--o-high); color: var(--o-primary); font: 600 .75rem ui-monospace, "JetBrains Mono", monospace; }
.onama-napomena { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding: 16px; border-radius: 12px; background: rgba(226,231,255,.6); }
.onama-napomena-tekst { display: flex; align-items: center; gap: 12px; }
.onama-napomena-tekst p { font-size: .875rem; line-height: 1.43; color: var(--o-text); }
.onama-link { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap; font-size: .875rem; font-weight: 600; color: var(--o-secondary); text-decoration: none; transition: color .15s; }
.onama-link:hover { color: var(--o-primary); text-decoration: none; }
.onama-koraci-m { display: flex; flex-direction: column; gap: 12px; }
.onama-m-korak { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 12px; background: #fff; box-shadow: var(--senka); }
.onama-m-korak h3 { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 1.125rem; line-height: 1.45; font-weight: 700; color: var(--o-text); }
.onama-m-korak p { font-size: .875rem; line-height: 1.43; color: var(--o-text-v); }
.onama-m-korak strong { font-weight: 700; color: var(--o-text); }
.onama-kapsula { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 12px; border-radius: 8px; background: var(--o-c); color: var(--o-text-v); font-size: .75rem; line-height: 1.35; }

/* --- Etički kodeks --- */
.onama-principi { margin: 24px 0; padding: 72px 0; background: var(--o-canvas); }
.onama-principi-mreza { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .onama-principi-mreza { grid-template-columns: repeat(2, 1fr); } }
.onama-princip { display: flex; flex-direction: column; justify-content: space-between; padding: 32px; border-radius: 12px; background: #fff; box-shadow: var(--senka); }
.onama-princip-glava { display: flex; align-items: flex-start; gap: 16px; }
.onama-princip-ikona, .onama-zk-ikona { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; }
.onama-princip-ikona .onama-ik { width: 26px; height: 26px; }
.onama-pi-crvena { background: var(--o-errc); color: var(--o-err); }
.onama-pi-plava { background: var(--o-high); color: var(--o-primary); }
.onama-pi-zelena { background: var(--o-okbg); color: var(--o-ok); }
.onama-pi-mejl { background: var(--o-mailbg); color: var(--o-mail); }
.onama-pi-siva { background: var(--o-c); color: var(--o-primary); }
.onama-princip h3 { margin-bottom: 4px; font-size: 1.125rem; line-height: 1.45; font-weight: 700; letter-spacing: -.01em; color: var(--o-text); }
.onama-princip p { font-size: .875rem; line-height: 1.6; color: var(--o-muted); }
.onama-princip-noga { display: flex; align-items: center; gap: 8px; margin-top: 24px; padding-top: 12px; font-size: .75rem; font-weight: 500; color: var(--o-muted); }
.onama-tackica { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.onama-tackica-crvena { background: var(--o-err); }
.onama-tackica-plava { background: var(--o-secondary); }
.onama-tackica-zelena { background: var(--o-ok); }
.onama-tackica-mejl { background: var(--o-mail); }
.onama-principi-m { display: flex; flex-direction: column; gap: 12px; }
.onama-m-princip { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 12px; background: #fff; box-shadow: var(--senka); }
.onama-m-princip .onama-princip-ikona { width: 40px; height: 40px; border-radius: 8px; }
.onama-m-princip .onama-princip-ikona .onama-ik { width: 22px; height: 22px; }
.onama-m-princip h3 { margin-bottom: 2px; font-size: .875rem; line-height: 1.43; font-weight: 700; letter-spacing: 0; color: var(--o-text); }
.onama-m-princip p { font-size: .875rem; line-height: 1.43; color: var(--o-text-v); }

/* --- Srce platforme (desktop) --- */
.onama-zajednica-omot { padding-top: 48px; padding-bottom: 48px; }
.onama-zajednica { position: relative; overflow: hidden; padding: 64px; border-radius: 16px; background: var(--o-primary); color: #fff; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.onama-zajednica::before { content: ""; position: absolute; top: -160px; left: 50%; transform: translateX(-50%); width: 720px; height: 360px; background: rgba(219,225,255,.4); filter: blur(120px); border-radius: 50%; pointer-events: none; }
.onama-zajednica > * { position: relative; z-index: 1; }
.onama-zajednica-uvod { max-width: 768px; margin: 0 auto 48px; text-align: center; }
.onama-bedz-taman { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 4px 16px; border-radius: 99px; background: rgba(226,231,255,.6); color: #dbe1ff; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; box-shadow: var(--senka); }
.onama-bedz-tamniji { background: var(--o-primary-c); }
.onama-zajednica h2 { margin-bottom: 16px; font-size: 2.25rem; line-height: 1.22; font-weight: 800; letter-spacing: -.025em; color: #fff; }
.onama-zajednica-uvod p { font-size: 1.125rem; line-height: 1.55; letter-spacing: -.01em; color: #eef0ff; }
.onama-citat-panel { max-width: 896px; margin: 0 auto 48px; padding: 24px; border-radius: 12px; background: rgba(255,255,255,.1); backdrop-filter: blur(4px); text-align: center; color: #dbe1ff; }
.onama-citat-panel .onama-ik { margin: 0 auto 8px; display: block; }
.onama-citat-panel blockquote { font-size: 1.125rem; line-height: 1.6; font-weight: 700; font-style: italic; color: #fff; }
.onama-zajednica-kartice { display: grid; gap: 16px; grid-template-columns: 1fr; max-width: 1024px; margin: 0 auto; }
@media (min-width: 768px) { .onama-zajednica-kartice { grid-template-columns: repeat(3, 1fr); } }
.onama-zk { display: flex; flex-direction: column; justify-content: space-between; padding: 24px; border-radius: 12px; background: #fff; color: var(--o-text); box-shadow: var(--senka); }
.onama-zk-ikona { width: 48px; height: 48px; margin-bottom: 16px; border-radius: 8px; }
.onama-zk-ikona .onama-ik { width: 24px; height: 24px; }
.onama-zk h3 { margin-bottom: 8px; font-size: 1.125rem; line-height: 1.45; font-weight: 700; color: var(--o-text); }
.onama-zk p { font-size: .875rem; line-height: 1.6; color: var(--o-muted); }
.onama-zk .onama-princip-noga { margin-top: 16px; padding-top: 8px; }
.onama-zajednica-pill-red { display: flex; justify-content: center; margin-top: 48px; }
.onama-zajednica-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 24px; border-radius: 99px; background: #fff; color: var(--o-primary); font-size: .75rem; font-weight: 600; letter-spacing: .02em; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); }
.onama-zajednica-pill .onama-ik { width: 18px; height: 18px; }

/* --- Srce platforme (mobilni) --- */
.onama-zajednica-m { padding: 8px 16px; }
.onama-zm { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 16px; background: var(--o-primary-c); color: #fff; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); }
.onama-zm-bedz { display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: 99px; background: var(--o-secondary); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.onama-zm h2 { font-size: 1.5rem; line-height: 1.33; font-weight: 900; letter-spacing: -.02em; color: #fff; }
.onama-zm-citat { padding: 16px; border-radius: 12px; background: rgba(0,35,111,.4); color: #dce1ff; font-size: .9375rem; line-height: 1.4; font-style: italic; }
.onama-zm-kartice { display: flex; flex-direction: column; gap: 10px; }
.onama-zm-kartica { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: #fff; color: var(--o-text); box-shadow: var(--senka); }
.onama-zm-ikona { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; }
.onama-zm-ikona .onama-ik { width: 18px; height: 18px; }
.onama-zm-naslov { font-size: .875rem; line-height: 1.43; font-weight: 700; }
.onama-zm-opis { font-size: .75rem; line-height: 1.35; color: var(--o-text-v); }
.onama-zm-noga { display: flex; align-items: center; gap: 8px; padding-top: 4px; color: #90a8ff; font-size: .75rem; line-height: 1.35; }
.onama-zm-noga .onama-ik { width: 18px; height: 18px; }

/* --- Završni CTA (desktop) --- */
.onama-cta-omot { padding-top: 32px; padding-bottom: 32px; }
.onama-cta { position: relative; overflow: hidden; padding: 64px; border-radius: 16px; background: var(--o-primary); color: #fff; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.onama-cta::before {
    content: ""; position: absolute; inset: 0; opacity: .1; pointer-events: none;
    background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
    background-size: 40px 40px;
}
.onama-cta-sadrzaj { position: relative; z-index: 1; max-width: 768px; }
.onama-cta h2 { margin-bottom: 16px; font-size: 2.25rem; line-height: 1.22; font-weight: 800; letter-spacing: -.025em; color: #fff; }
.onama-cta p { max-width: 672px; margin-bottom: 32px; font-size: 1.125rem; line-height: 1.55; letter-spacing: -.01em; color: #eef0ff; }
.onama-cta-dugmad { display: flex; align-items: center; gap: 16px; }
.onama-dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 32px; border-radius: 8px; font-size: .875rem; font-weight: 600; text-decoration: none; transition: background .15s, box-shadow .15s; }
.onama-dugme:hover { text-decoration: none; }
.onama-dugme-belo { background: #fff; color: var(--o-primary); font-weight: 700; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); }
.onama-dugme-belo:hover { background: var(--o-low); }
.onama-dugme-prozirno { padding: 16px 24px; background: transparent; color: #fff; }
.onama-dugme-prozirno:hover { background: rgba(255,255,255,.1); }

/* --- Završni CTA (mobilni) --- */
.onama-cta-m { padding: 24px 16px; }
.onama-cta-m-kartica { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; border-radius: 16px; background: var(--o-high); text-align: center; box-shadow: var(--senka); }
.onama-cta-m-ikona { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--o-primary); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.onama-cta-m-ikona .onama-ik { width: 28px; height: 28px; }
.onama-cta-m-kartica h2 { margin-bottom: 6px; font-size: 1.125rem; line-height: 1.45; font-weight: 800; color: var(--o-text); }
.onama-cta-m-kartica p { font-size: .875rem; line-height: 1.43; color: var(--o-text-v); }
.onama-cta-m-dugmad { display: flex; flex-direction: column; width: 100%; gap: 10px; padding-top: 8px; }
.onama-dugme-m { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border-radius: 12px; font-size: .875rem; font-weight: 700; text-decoration: none; box-shadow: var(--senka); }
.onama-dugme-m:hover { text-decoration: none; }
.onama-dugme-m-primarno { padding: 14px 16px; background: var(--o-primary); color: #fff; }
.onama-dugme-m-belo { padding: 12px 16px; background: #fff; color: var(--o-text); }

/* --- Mobilni raspored --- */
@media (max-width: 767px) {
    .onama-in { padding: 0 16px; }
    .onama-hero { padding: 16px 0 24px; }
    .onama-hero-tekst { align-items: flex-start; text-align: left; max-width: none; margin-bottom: 0; }
    .onama-kicker { padding: 4px 12px; margin-bottom: 12px; background: var(--o-mailbg); color: var(--o-mail); box-shadow: none; }
    .onama-kicker .onama-tacka { background: var(--o-secondary); animation: none; }
    .onama-hero h1 { margin-bottom: 12px; font-size: 1.75rem; line-height: 1.29; font-weight: 900; letter-spacing: -.02em; }
    .onama-lead { font-size: .9375rem; line-height: 1.6; letter-spacing: 0; color: var(--o-text-v); }
    .onama-jak { font-weight: 400; color: inherit; }
    .onama-pilule { flex-wrap: nowrap; justify-content: flex-start; gap: 8px; margin: 12px -16px 0; padding: 4px 16px; overflow-x: auto; scrollbar-width: none; }
    .onama-pilule::-webkit-scrollbar { display: none; }
    .onama-pilula { flex-shrink: 0; padding: 6px 12px; font-weight: 700; letter-spacing: 0; }
    .onama-pilula-2 { background: var(--o-c); color: var(--o-primary-c); }
    .onama-pilula-3 { background: var(--o-high); color: var(--o-text); }

    .onama-problem { margin: 0; padding: 24px 0; background: var(--o-surface); }
    .onama-uvod { max-width: none; margin-bottom: 16px; }
    .onama-h2 { font-size: 1.5rem; line-height: 1.33; letter-spacing: -.02em; }
    .onama-uvod-p { margin-top: 4px; font-size: .875rem; line-height: 1.43; color: var(--o-text-v); }
    .onama-uvod-centar { text-align: left; margin-left: 0; margin-right: 0; }

    .onama-verif-sekcija { padding: 8px 0; background: #F1F5F9; }
    .onama-verif { padding-top: 16px; padding-bottom: 16px; }
    .onama-principi { margin: 0; padding: 24px 0; background: var(--o-surface); }
}

/* ============================================================
   Admin panel — redizajn (pod-header, navigacija, kartice, tabele).
   Sve pod .adm- prefiksom; stari .an- i .tabela stilovi ostaju za detalj-stranice.
   ============================================================ */
svg.adm-ik { width: 16px; height: 16px; flex-shrink: 0; }
.adm-podheader ~ main { background: #faf8ff; }
.adm-podheader {
    position: sticky; top: 64px; z-index: 40; background: #fff;
    border-bottom: 1px solid #E2E8F0; box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.adm-podheader-in {
    width: 100%; max-width: 1200px; margin: 0 auto; padding: 12px 32px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.adm-podheader-naslov { display: flex; align-items: center; gap: 16px; font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; color: #131b2e; }
.adm-podheader-ikona { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: #00236f; color: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.2); }
.adm-podheader-ikona .adm-ik { width: 22px; height: 22px; max-width: 22px; }
.adm-prekidac { display: flex; align-items: center; padding: 4px; border-radius: 12px; background: #f2f3ff; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.adm-prekidac::-webkit-scrollbar { display: none; }
.adm-prekidac-dugme {
    display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 8px; white-space: nowrap;
    font-size: .875rem; font-weight: 600; color: #444651; text-decoration: none; transition: color .15s, background .15s;
}
.adm-prekidac-dugme:hover { color: #131b2e; text-decoration: none; }
.adm-prekidac-dugme .adm-ik { width: 18px; height: 18px; max-width: 18px; }
.adm-prekidac-dugme.aktivno { background: #fff; color: #00236f; font-weight: 700; box-shadow: 0 1px 2px rgba(15,23,42,.1); }
.adm-brojac { display: flex; align-items: center; justify-content: center; margin-left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #ba1a1a; color: #fff; font-size: .6875rem; font-weight: 700; }
.adm-identitet { display: none; align-items: center; gap: 16px; padding-left: 16px; border-left: 1px solid #E2E8F0; }
@media (min-width: 1280px) { .adm-identitet { display: flex; } }
.adm-identitet-tekst { display: flex; flex-direction: column; text-align: right; }
.adm-identitet-tekst strong { font-size: .75rem; font-weight: 600; color: #131b2e; }
.adm-identitet-tekst span { font-size: .75rem; color: #64748B; }
.adm-identitet-inicijali { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px; background: #eaedff; color: #00236f; font-size: .875rem; font-weight: 700; }

.adm-podnav-omot { width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px 32px 0; }
.adm-podnav { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; padding: 6px; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.adm-podnav-dugme {
    display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 16px; border-radius: 8px;
    font-size: .875rem; font-weight: 600; color: #444651; text-decoration: none; transition: background .15s, color .15s;
}
.adm-podnav-dugme span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-podnav-dugme .adm-ik { width: 16px; height: 16px; max-width: 16px; }
.adm-podnav-dugme:hover { background: #f2f3ff; text-decoration: none; }
.adm-podnav-dugme.aktivno { background: #00236f; color: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.2); }

.adm-portal { width: 100%; max-width: 1200px; margin: 0 auto; padding: 32px 32px 48px; display: flex; flex-direction: column; gap: 32px; }
@media (max-width: 720px) {
    .adm-podheader { position: static; }
    .adm-podheader-in, .adm-podnav-omot, .adm-portal { padding-left: 16px; padding-right: 16px; }
    .adm-portal { gap: 24px; padding-top: 24px; }
}

/* --- Kartice, metrike, trake --- */
.adm-panel { min-width: 0; padding: 24px; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.adm-panel-glava { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid #f1f5f9; }
.adm-panel-glava h3, .adm-naslov { font-size: 1rem; font-weight: 700; letter-spacing: 0; color: #0f172a; }
.adm-sub { margin-top: 2px; font-size: .75rem; color: #64748b; }
.adm-znacka { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 6px; background: #f1f5f9; border: 1px solid #E2E8F0; color: #1e293b; font-size: .75rem; font-weight: 600; }
.adm-znacka-crvena { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.adm-mreza { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .adm-mreza-2, .adm-mreza-3, .adm-mreza-4, .adm-mreza-5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
    .adm-mreza-2 { grid-template-columns: repeat(2, 1fr); }
    .adm-mreza-3 { grid-template-columns: repeat(3, 1fr); }
    .adm-mreza-4 { grid-template-columns: repeat(4, 1fr); }
    .adm-mreza-5 { grid-template-columns: repeat(5, 1fr); }
    .adm-mreza-8-4 { grid-template-columns: 2fr 1fr; }
}
.adm-metrika { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 24px; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.05); transition: border-color .15s; }
.adm-metrika:hover { border-color: #cbd5e1; }
.adm-metrika-vrh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adm-oznaka { font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #64748b; }
.adm-metrika .adm-metrika-ik { width: 20px; height: 20px; max-width: 20px; color: #94a3b8; }
.adm-metrika-vr { display: flex; align-items: baseline; gap: 4px; margin: 16px 0; }
.adm-broj { font-size: 1.875rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: #0f172a; }
.adm-broj-mali { font-size: 1.375rem; }
.adm-jed { font-size: .75rem; font-weight: 500; color: #94a3b8; }
.adm-metrika-noga { display: flex; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid #f1f5f9; font-size: .75rem; color: #64748b; }
.adm-poz { color: #047857; font-weight: 500; }
.adm-neg { color: #ba1a1a; font-weight: 500; }
.adm-mono { font-family: ui-monospace, "JetBrains Mono", monospace; font-weight: 700; color: #0f172a; }
.adm-staza { flex: 1; min-width: 0; height: 10px; background: #f1f5f9; border-radius: 99px; overflow: hidden; }
.adm-staza-tanka { height: 8px; }
.adm-staza > div { height: 100%; border-radius: 99px; background: #1e293b; }
.adm-staza-crvena > div { background: #ba1a1a; }
.adm-staza-zelena > div { background: #047857; }
.adm-red { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: .75rem; }
.adm-red-oznaka { min-width: 110px; font-weight: 600; color: #334155; }
.adm-red-vr { min-width: 64px; text-align: right; font-family: ui-monospace, "JetBrains Mono", monospace; font-weight: 700; color: #0f172a; }
.adm-red-blok { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.adm-red-blok-glava { display: flex; justify-content: space-between; font-size: .75rem; font-weight: 600; color: #334155; }
.adm-redovi { display: flex; flex-direction: column; gap: 10px; }
.adm-stavka { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border-radius: 8px; background: #f8fafc; border: 1px solid #E2E8F0; font-size: .75rem; }
.adm-stavka > span:first-child { font-weight: 500; color: #334155; }
.adm-napomena { margin-top: 24px; padding: 14px; background: #f8fafc; border: 1px solid #E2E8F0; border-radius: 8px; font-size: .75rem; color: #475569; }
.adm-napomena strong { color: #0f172a; }
.adm-praznina { padding: 24px; text-align: center; font-size: .875rem; color: #64748b; }

/* --- Tabele --- */
.adm-tabela-omotac { width: 100%; overflow-x: auto; }
.adm-tabela { width: 100%; border-collapse: collapse; text-align: left; font-size: .8125rem; }
.adm-tabela thead tr { border-bottom: 1px solid #E2E8F0; }
.adm-tabela th { padding: 10px 12px; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #64748b; white-space: nowrap; }
.adm-tabela td { padding: 12px; border-bottom: 1px solid #f1f5f9; color: #334155; vertical-align: middle; }
.adm-tabela tbody tr:hover { background: #f8fafc; }
.adm-tabela td strong { color: #0f172a; }
.adm-tabela .tekst-uvod { max-width: 320px; }
.adm-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin-right: 10px; border-radius: 8px; background: #eaedff; color: #00236f; font-size: .6875rem; font-weight: 700; }
.adm-ime-red { display: flex; align-items: center; font-weight: 600; color: #0f172a; }

/* --- Dugmad i polja --- */
.adm-dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px;
    border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #334155; cursor: pointer;
    font-family: inherit; font-size: .75rem; font-weight: 600; text-decoration: none; transition: background .15s, border-color .15s;
}
.adm-dugme:hover { background: #f8fafc; border-color: #94a3b8; text-decoration: none; }
.adm-dugme-tamno { background: #00236f; border-color: #00236f; color: #fff; }
.adm-dugme-tamno:hover { background: #1e3a8a; border-color: #1e3a8a; }
.adm-dugme-opasno { color: #b91c1c; border-color: #fecaca; }
.adm-dugme-opasno:hover { background: #fef2f2; border-color: #fca5a5; }
.adm-dugme-tamno-opasno { background: #ba1a1a; border-color: #ba1a1a; color: #fff; }
.adm-dugme-tamno-opasno:hover { background: #93000a; border-color: #93000a; }
.adm-dugme[disabled] { opacity: .5; cursor: not-allowed; }
.adm-dugme .adm-ik { width: 14px; height: 14px; }
.adm-dugmad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-dugmad form { margin: 0; }
.adm-filteri { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.adm-filteri .polje { display: flex; flex-direction: column; gap: 4px; }
.adm-filteri label { font-size: .75rem; font-weight: 600; color: #475569; }
.adm-filteri input, .adm-filteri select, .adm-unos {
    padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff;
    font-family: inherit; font-size: .8125rem; color: #0f172a;
}
.adm-filteri input:focus, .adm-filteri select:focus, .adm-unos:focus { outline: none; border-color: #00236f; box-shadow: 0 0 0 3px rgba(0,35,111,.12); }

/* --- Brojači statusa (moderacija) --- */
.adm-brojke { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .adm-brojke { grid-template-columns: repeat(4, 1fr); } }
.adm-brojka {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px;
    background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.05);
    color: inherit; text-decoration: none; transition: border-color .15s;
}
.adm-brojka:hover { border-color: #cbd5e1; text-decoration: none; }
.adm-brojka.aktivna { border-color: #00236f; box-shadow: 0 0 0 1px #00236f; }
.adm-brojka-ik { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: #f1f5f9; color: #475569; }
.adm-brojka-ik .adm-ik { width: 20px; height: 20px; }
.adm-brojka.cekanje .adm-brojka-ik { background: #fef3c7; color: #b45309; }
.adm-brojka.odobrena .adm-brojka-ik { background: #ECFDF5; color: #047857; }
.adm-brojka.odbijena .adm-brojka-ik { background: #fef2f2; color: #b91c1c; }
.adm-brojka .adm-broj { font-size: 1.75rem; }

/* --- Investitori (kartice) --- */
.adm-kartice { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .adm-kartice { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .adm-kartice { grid-template-columns: repeat(3, 1fr); } }
.adm-inv { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px; background: #f8fafc; border: 1px solid #E2E8F0; border-radius: 12px; }
.adm-inv-glava { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.adm-inv-glava h4 { display: flex; align-items: flex-start; gap: 8px; font-size: .9375rem; font-weight: 700; color: #0f172a; }
.adm-inv-meta { font-size: .75rem; color: #64748b; }
.adm-inv-ocena { display: flex; align-items: center; gap: 4px; font-size: .8125rem; color: #475569; }
.adm-inv-ocena .adm-ik { width: 15px; height: 15px; color: #F59E0B; fill: #F59E0B; }
.adm-inv-ocena strong { color: #0f172a; }
.adm-inv-akcije { margin-top: auto; padding-top: 12px; border-top: 1px solid #E2E8F0; }
.adm-duplikat { padding: 8px 10px; border-radius: 8px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: .75rem; }

/* --- Prijave, poruke (redovi u panelu) --- */
.adm-lista { display: flex; flex-direction: column; gap: 12px; }
.adm-lista-red { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px; background: #f8fafc; border: 1px solid #E2E8F0; border-radius: 12px; }
.adm-lista-red.novo { border-left: 4px solid #00236f; }
.adm-lista-red.hitno { border-left: 4px solid #ba1a1a; }
.adm-lista-glava { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.adm-lista-glava strong { font-size: .875rem; color: #0f172a; }
.adm-lista-tekst { font-size: .8125rem; color: #475569; line-height: 1.55; overflow-wrap: anywhere; }
.adm-lista-meta { margin-top: 4px; font-size: .75rem; color: #64748b; }
.adm-lista-akcije { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-shrink: 0; }
.adm-lista-akcije form { margin: 0; }
@media (max-width: 720px) { .adm-lista-red { flex-direction: column; } }

/* --- Funnel --- */
.adm-funnel { display: flex; flex-direction: column; gap: 16px; }
.adm-funnel-red { display: flex; align-items: center; gap: 24px; padding: 18px 20px; background: #f8fafc; border: 1px solid #E2E8F0; border-radius: 12px; }
.adm-funnel-levo { display: flex; align-items: center; gap: 16px; flex: 0 0 30%; min-width: 0; }
.adm-funnel-broj { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #0f172a; color: #fff; font-size: .75rem; font-weight: 700; }
.adm-funnel-levo h4 { font-size: .75rem; font-weight: 600; color: #0f172a; line-height: 1.4; }
.adm-funnel-levo div span { display: block; margin-top: 2px; font-size: .75rem; color: #64748b; }
.adm-funnel-sredina { flex: 1; min-width: 0; }
.adm-funnel-vrh { display: flex; justify-content: space-between; margin-bottom: 6px; font-family: ui-monospace, "JetBrains Mono", monospace; font-size: .6875rem; font-weight: 700; color: #0f172a; }
.adm-funnel-desno { flex: 0 0 190px; text-align: right; font-size: .75rem; color: #64748b; }
.adm-funnel-desno .adm-neg, .adm-funnel-desno .adm-poz { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.adm-funnel-desno .adm-ik { width: 14px; height: 14px; }

/* --- Ikonice-dugmad sa tooltip-om (npr. korisnici) --- */
.adm-ikona-dugme {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; padding: 0; border: 0; background: none; border-radius: 10px; cursor: pointer;
    transition: transform .12s, box-shadow .15s;
}
.adm-ikona-dugme:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(15,23,42,.15); text-decoration: none; }
.adm-ikona-dugme svg { width: 36px; height: 36px; display: block; }
.adm-ikona-dugme::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    padding: 5px 9px; border-radius: 6px; background: #0f172a; color: #fff; white-space: nowrap;
    font-size: .72rem; font-weight: 600; line-height: 1.3; pointer-events: none; z-index: 20;
    opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s;
}
.adm-ikona-dugme:hover::after, .adm-ikona-dugme:focus-visible::after { opacity: 1; visibility: visible; }
@media (max-width: 860px) {
    .adm-funnel-red { flex-direction: column; align-items: stretch; gap: 12px; }
    .adm-funnel-levo { flex: none; }
    .adm-funnel-desno { flex: none; text-align: left; }
}

.adm-nazad { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: #00236f; text-decoration: none; }
.adm-nazad:hover { text-decoration: underline; }

/* ============================================================
   Zaključane recenzije za goste (početna + profil investitora).
   .rec-d = samo desktop (>=768px), .rec-m = samo mobilni.
   ============================================================ */
@media (min-width: 768px) { .rec-m { display: none !important; } }
@media (max-width: 767px) { .rec-d { display: none !important; } }

.rec-pilula {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px;
    background: #eaedff; color: var(--primarna); font-size: .6875rem; font-weight: 700; line-height: 1.5;
    letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}
.rec-pilula svg { width: 13px; height: 13px; flex-shrink: 0; }
.rec-pilula-m { background: #EFF6FF; color: #1D4ED8; text-transform: none; letter-spacing: 0; }
.mreza-recenzije .rec-pilula-red { flex-basis: 100%; }
@media (min-width: 768px) {
    .mreza-recenzije .kartica-istaknuta .kartica-znacke-red:not(:has(.kartica-znacka)) { display: none; }
}

.rec-zakljucano { position: relative; grid-column: 1 / -1; }
.rec-ghost {
    display: grid; gap: 24px; grid-template-columns: 1fr; height: 100%;
    filter: blur(4px); opacity: .45; pointer-events: none; user-select: none;
}
.rec-ghost .kartica:nth-child(3) { display: none; }
@media (min-width: 720px) { .rec-ghost { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .rec-ghost { grid-template-columns: repeat(3, 1fr); } .rec-ghost .kartica:nth-child(3) { display: flex; } }
@media (max-width: 480px) { .rec-ghost { gap: 14px; } }

.rec-zakljucano-omot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }
.rec-zk-panel {
    display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 620px;
    padding: 32px; background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border: 1px solid rgba(0,35,111,.2); border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}
.rec-zk-lokot { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 50%; background: #eaedff; color: var(--primarna); }
.rec-zk-lokot svg { width: 24px; height: 24px; }
.rec-zk-pilula {
    display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px; padding: 2px 12px; border-radius: 99px;
    background: #f2f3ff; color: var(--primarna); font-size: .75rem; font-weight: 600;
}
.rec-zk-pilula svg { width: 14px; height: 14px; }
.rec-zk-panel h3 { margin-bottom: 8px; font-size: 1.5rem; line-height: 1.33; font-weight: 700; letter-spacing: -.02em; color: #131b2e; }
.rec-zk-tekst { font-size: .875rem; line-height: 1.4; color: #64748B; }
.rec-zk-dugmad { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin-top: 16px; }
.rec-zk-primarno {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 32px; border-radius: 8px;
    background: #00236f; color: #fff; font-size: .875rem; font-weight: 600; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.1);
    transition: background .15s;
}
.rec-zk-primarno:hover { background: #1e3a8a; color: #fff; text-decoration: none; }
.rec-zk-primarno svg { width: 18px; height: 18px; flex-shrink: 0; }
.rec-zk-prijava {
    display: inline-flex; align-items: center; gap: 4px; padding: 12px 16px; border-radius: 8px;
    background: #f2f3ff; color: #64748B; font-size: .875rem; text-decoration: none; transition: background .15s;
}
.rec-zk-prijava:hover { background: #eaedff; text-decoration: none; }
.rec-zk-prijava strong { color: var(--primarna); font-weight: 600; }

@media (max-width: 767px) {
    .rec-zakljucano-omot {
        padding: 16px; border-radius: 12px;
        background: linear-gradient(to bottom, rgba(248,250,252,.75) 0%, rgba(248,250,252,.98) 100%);
    }
    .rec-zk-panel { max-width: 320px; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .rec-zk-lokot { margin-bottom: 8px; background: #00236f; color: #fff; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); }
    .rec-zk-panel h3 { margin-bottom: 4px; font-size: 1.125rem; line-height: 1.45; font-weight: 800; letter-spacing: -.01em; color: #00236f; }
    .rec-zk-tekst { margin-bottom: 16px; }
    .rec-zk-dugmad { flex-direction: column; gap: 8px; margin-top: 0; }
    .rec-zk-primarno { width: 100%; height: 44px; padding: 0 16px; background: #0051d5; font-weight: 700; }
    .rec-zk-prijava { padding: 4px 0; background: none; }
    .rec-zk-prijava strong { color: #0051d5; font-weight: 700; }
}

/* Na stranici investitora — zaključan blok umesto liste recenzija (bez zamućenih kartica) */
.rec-zakljucano-samostalno { padding: 8px 0 24px; }
.rec-zakljucano-samostalno .rec-zk-panel {
    max-width: 620px; margin: 0 auto; padding: 28px; background: #fff; border: 1px solid var(--okvir); box-shadow: var(--senka);
}

/* ===== Kontakt stranica (.kt-*) ===== */
.kt-stranica { width: 100%; background: #F8FAFC; color: #131b2e; padding-bottom: 8px; }
.kt-stranica * { box-sizing: border-box; }
.kt-omot { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.kt-ik { width: 20px; height: 20px; flex-shrink: 0; }
.kt-m { display: none; }

.kt-hero { padding: 32px 0 24px; }
.kt-mrvice { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; color: #64748B; margin-bottom: 16px; }
.kt-mrvice a { display: flex; align-items: center; gap: 4px; color: #64748B; text-decoration: none; }
.kt-mrvice a:hover { color: #00236f; }
.kt-mrvice a .kt-ik { width: 16px; height: 16px; }
.kt-mrvice-sep { opacity: .6; }
.kt-mrvice strong { color: #131b2e; font-weight: 600; }
.kt-hero-kartica { max-width: 768px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.kt-znacka { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: #eaedff; color: #00236f; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; }
.kt-znacka i { width: 8px; height: 8px; border-radius: 50%; background: #6366F1; animation: kt-puls 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes kt-puls { 50% { opacity: .5; } }
.kt-hero-kartica h1 { margin: 0; font-size: 36px; line-height: 44px; font-weight: 800; letter-spacing: -.025em; color: #00236f; }
.kt-hero-kartica p { margin: 4px 0 0; font-size: 18px; line-height: 28px; letter-spacing: -.01em; color: #64748B; }

.kt-mreza { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; padding-bottom: 72px; }
.kt-forma-kartica { background: #fff; border-radius: 12px; padding: 32px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.kt-forma-glava { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #E2E8F0; }
.kt-forma-glava h2 { margin: 0; font-size: 18px; line-height: 26px; font-weight: 700; letter-spacing: -.01em; color: #131b2e; }

.kt-grupa { margin-bottom: 24px; }
.kt-tip-glava { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kt-label { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: #131b2e; }
.kt-label b { color: #ba1a1a; font-weight: inherit; }
.kt-label-red { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kt-label-red small { font-size: 12px; line-height: 16px; font-weight: 500; color: #64748B; }
.kt-izabrano { font-size: 12px; line-height: 16px; font-weight: 600; color: #1e3a8a; }

.kt-tipovi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.kt-tip { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px; border-radius: 8px; border: 1px solid #E2E8F0; background: #F8FAFC; color: #444651; font-size: 11px; line-height: 1.2; font-weight: 500; text-align: center; cursor: pointer; transition: all .15s; }
.kt-tip .kt-ik { width: 22px; height: 22px; }
.kt-tip input { position: absolute; opacity: 0; pointer-events: none; }
.kt-tip:hover { border-color: rgba(0,35,111,.5); }
.kt-tip:focus-within { outline: 2px solid rgba(49,107,243,.5); outline-offset: 1px; }
.kt-tip.aktivno { background: #eaedff; border-color: #00236f; color: #00236f; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.05); }

.kt-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px; margin-bottom: 16px; border-radius: 8px; border: 1px solid #E2E8F0; background: #f2f3ff; }
.kt-banner[hidden] { display: none; }
.kt-banner .kt-ik { margin-top: 0; color: #00236f; }
.kt-banner p { margin: 0; font-size: 14px; line-height: 20px; color: #64748B; }

.kt-panel { display: flex; flex-direction: column; gap: 16px; border: 0; padding: 0; margin: 0; min-width: 0; }
.kt-panel[hidden] { display: none; }
.kt-red { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.kt-red-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kt-polje { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kt-stranica .kt-polje input:not([type=file]),
.kt-stranica .kt-polje select,
.kt-stranica .kt-polje textarea { width: 100%; margin: 0; border: 0; border-radius: 8px; background: #F8FAFC; color: #131b2e; font: inherit; font-size: 15px; line-height: 24px; box-shadow: none; outline: none; transition: background .15s, box-shadow .15s; }
.kt-stranica .kt-polje input:not([type=file]),
.kt-stranica .kt-polje select { height: 44px; padding: 0 14px; }
.kt-stranica .kt-polje textarea { padding: 14px; min-height: 104px; resize: vertical; }
.kt-stranica .kt-polje input::placeholder,
.kt-stranica .kt-polje textarea::placeholder { color: rgba(100,116,139,.6); }
.kt-stranica .kt-polje input:not([type=file]):focus,
.kt-stranica .kt-polje select:focus,
.kt-stranica .kt-polje textarea:focus { background: #fff; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 0 0 2px rgba(0,35,111,.15); }
.kt-select { position: relative; }
.kt-select select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.kt-select::after { content: ''; position: absolute; right: 16px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 2px solid #131b2e; border-bottom: 2px solid #131b2e; transform: rotate(45deg); pointer-events: none; }
.kt-napomena { font-size: 12px; line-height: 16px; font-weight: 500; color: #64748B; }

.kt-otpremi { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; border-radius: 8px; background: #F8FAFC; text-align: center; cursor: pointer; transition: background .15s; }
.kt-otpremi:hover { background: #f2f3ff; }
.kt-otpremi-ikona { width: 40px; height: 40px; border-radius: 50%; background: #eaedff; color: #00236f; display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.kt-otpremi:hover .kt-otpremi-ikona { transform: scale(1.05); }
.kt-otpremi-ikona .kt-ik { width: 22px; height: 22px; }
.kt-otpremi-tekst strong { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: #00236f; }
.kt-otpremi-tekst em { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; font-style: normal; font-weight: 500; color: #64748B; }
.kt-otpremi input[type=file] { position: absolute; left: 50%; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kt-fajl-ime { font-size: 12px; line-height: 16px; font-weight: 500; color: #047857; word-break: break-all; }
.kt-fajl-ime[hidden] { display: none; }
.kt-otpremi:focus-within { outline: 2px solid rgba(49,107,243,.5); outline-offset: 1px; }

.kt-saglasnost { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; cursor: pointer; }
.kt-saglasnost input { flex-shrink: 0; width: 16px; height: 16px; margin: 4px 0 0; accent-color: #00236f; cursor: pointer; }
.kt-saglasnost span { font-size: 14px; line-height: 20px; color: #64748B; }
.kt-saglasnost a { color: #00236f; font-weight: 500; text-decoration: underline; }
.kt-saglasnost a:hover { color: #0051d5; }
.kt-posalji { width: 100%; margin-top: 16px; padding: 14px 24px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 8px; background: #1e3a8a; color: #fff; font: inherit; font-size: 14px; line-height: 20px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: background .2s, transform .1s; }
.kt-posalji:hover { background: #00236f; }
.kt-posalji:active { transform: scale(.99); }
.kt-posalji .kt-ik { width: 18px; height: 18px; }

.kt-info { display: flex; flex-direction: column; gap: 16px; }
.kt-info-naslov { display: flex; align-items: center; gap: 8px; padding: 0 4px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; color: #64748B; }
.kt-info-naslov .kt-ik { width: 18px; height: 18px; color: #00236f; }
.kt-info-kartica { display: flex; align-items: flex-start; gap: 14px; padding: 24px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.kt-info-kartica > div { flex: 1; min-width: 0; }
.kt-info-ikona { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #f2f3ff; color: #00236f; }
.kt-info-ikona .kt-ik { width: 22px; height: 22px; }
.kt-info-kartica h3 { margin: 0; font-size: 18px; line-height: 26px; font-weight: 700; letter-spacing: -.01em; color: #131b2e; }
.kt-info-kartica p { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: #64748B; }
.kt-info-red { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kt-vreme { padding: 2px 8px; border-radius: 4px; background: #eaedff; color: #00236f; font-size: 12px; line-height: 16px; font-weight: 600; }
.kt-enkripcija { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 12px; background: #f2f3ff; }
.kt-enkripcija > div { min-width: 0; }
.kt-enkripcija-ikona { width: 32px; height: 32px; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #ECFDF5; color: #047857; }
.kt-enkripcija-ikona .kt-ik { width: 18px; height: 18px; }
.kt-enkripcija strong { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: #131b2e; }
.kt-enkripcija p { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: #64748B; }

@media (max-width: 1023px) {
    .kt-mreza { grid-template-columns: minmax(0, 1fr); }
    .kt-tipovi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kt-tip:last-child { grid-column: span 1; }
}

/* --- Mobilni raspored --- */
@media (max-width: 767px) {
    .kt-d { display: none !important; }
    .kt-poverenje { display: flex; }
    .kt-izabrano { display: inline; }
    .kt-nadzor { display: flex; }

    .kt-stranica { background: #faf8ff; padding-bottom: 24px; }
    .kt-omot { padding: 0 16px; }
    .kt-hero { padding: 16px 0 24px; }
    .kt-hero-kartica { position: relative; overflow: hidden; max-width: none; gap: 12px; padding: 24px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
    .kt-hero-kartica::before { content: ''; position: absolute; right: -24px; bottom: -24px; width: 128px; height: 128px; border-radius: 50%; background: #eaedff; opacity: .6; }
    .kt-hero-kartica::after { content: ''; position: absolute; right: 32px; top: 12px; width: 48px; height: 48px; border-radius: 50%; background: rgba(226,231,255,.4); }
    .kt-hero-kartica > * { position: relative; z-index: 1; }
    .kt-znacka { background: #EFF6FF; color: #1D4ED8; }
    .kt-hero-kartica h1 { font-size: 28px; line-height: 36px; letter-spacing: -.02em; color: #131b2e; }
    .kt-hero-kartica p { margin: 0; font-size: 15px; line-height: 24px; letter-spacing: 0; }
    .kt-poverenje { align-items: center; gap: 8px; padding-top: 8px; margin-top: 4px; font-size: 12px; line-height: 16px; font-weight: 500; color: #64748B; }
    .kt-poverenje .kt-ik { width: 18px; height: 18px; color: #1e3a8a; }

    .kt-mreza { gap: 24px; padding-bottom: 0; }
    .kt-forma-kartica { padding: 24px; }
    .kt-tip-glava { margin-bottom: 8px; }
    .kt-tip-glava .kt-label { font-weight: 700; }
    .kt-tipovi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kt-tip { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 12px; border: 0; background: #eaedff; color: #131b2e; font-size: 12px; font-weight: 600; text-align: left; }
    .kt-tip .kt-ik { width: 18px; height: 18px; }
    .kt-tip:last-child { grid-column: span 2; justify-content: center; }
    .kt-tip:hover { border: 0; }
    .kt-tip.aktivno { background: #1e3a8a; color: #fff; box-shadow: none; font-weight: 600; }

    .kt-red-2 { grid-template-columns: minmax(0, 1fr); }
    .kt-stranica .kt-polje input:not([type=file]),
    .kt-stranica .kt-polje select { height: 48px; padding: 0 16px; background: #f2f3ff; }
    .kt-stranica .kt-polje textarea { background: #f2f3ff; padding: 16px; }
    .kt-stranica .kt-polje input:not([type=file]):focus,
    .kt-stranica .kt-polje select:focus,
    .kt-stranica .kt-polje textarea:focus { background: #fff; box-shadow: 0 0 0 2px #316bf3; }
    .kt-otpremi { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 16px; border: 1px dashed #c5c5d3; background: #eaedff; text-align: left; }
    .kt-otpremi:hover { background: #e2e7ff; }
    .kt-otpremi-ikona { width: 32px; height: 32px; background: transparent; }
    .kt-otpremi-ikona .kt-ik { width: 20px; height: 20px; }
    .kt-saglasnost { margin-top: 16px; }
    .kt-saglasnost input { width: 20px; height: 20px; margin-top: 1px; }
    .kt-saglasnost span { color: #131b2e; line-height: 1.35; }
    .kt-saglasnost a { color: #1e3a8a; font-weight: 600; }
    .kt-posalji { padding: 14px 24px; font-size: 18px; line-height: 26px; font-weight: 700; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); }
    .kt-posalji .kt-ik { width: 20px; height: 20px; }

    .kt-nadzor { flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 170px; padding: 24px; border-radius: 12px; color: #eef0ff; background: linear-gradient(135deg, rgba(137,245,231,.12), rgba(137,245,231,0) 55%), #283044; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
    .kt-nadzor-oznaka { display: flex; align-items: center; gap: 6px; color: #89f5e7; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
    .kt-nadzor h3 { margin: 0; font-size: 18px; line-height: 26px; font-weight: 700; color: #eef0ff; }
    .kt-nadzor p { margin: 0; font-size: 14px; line-height: 20px; color: #dae2fd; }

    .kt-info { gap: 12px; }
    .kt-info-naslov { padding: 0 4px; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; gap: 8px; }
    .kt-info-kartica { gap: 16px; padding: 16px; }
    .kt-info-ikona { background: #eaedff; }
    .kt-info-kartica p { margin-top: 2px; }
    .kt-enkripcija { gap: 16px; padding: 16px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
    .kt-enkripcija-ikona { width: 40px; height: 40px; margin-top: 0; border-radius: 8px; background: #EFF6FF; color: #1D4ED8; }
    .kt-enkripcija-ikona .kt-ik { width: 22px; height: 22px; }
    .kt-enkripcija strong { font-size: 18px; line-height: 26px; font-weight: 700; letter-spacing: -.01em; }
    .kt-enkripcija p { margin-top: 2px; }
}

/* ===== Pretraga sa predlozima (AJAX) ===== */
[data-pretraga-omot] { position: relative; }
.pretraga-predlozi {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60; margin-top: 8px; min-width: 240px;
    max-height: 168px; overflow-y: auto; -webkit-overflow-scrolling: touch; text-align: left;
    background: #fff; border: 1px solid var(--okvir); border-radius: 12px; box-shadow: var(--senka-hover);
}
.pretraga-predlozi[hidden] { display: none; }
.pretraga-predlog { display: flex; flex-direction: column; gap: 1px; height: 56px; justify-content: center; padding: 0 16px; cursor: pointer; border-bottom: 1px solid var(--pozadina); }
.pretraga-predlog:last-child { border-bottom: 0; }
.pretraga-predlog strong { font-size: .92rem; font-weight: 600; color: var(--tekst); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pretraga-predlog span { font-size: .78rem; color: var(--tekst-slabiji); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pretraga-predlog:hover, .pretraga-predlog.aktivno { background: var(--sekundarna-bg); }
.pretraga-prazno { padding: 16px; font-size: .88rem; color: var(--tekst-slabiji); }
/* Bez unutrašnjeg okvira pri fokusu polja u hero pretrazi (okvir je već na omotaču) */
.pretraga-hero input:focus, .pretraga-hero input:focus-visible { outline: none; box-shadow: none; border-color: transparent; }

/* ===== Katalog investitora (.inv-*) ===== */
.inv-stranica { width: 100%; }
.inv-omot { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.inv-ik { width: 14px; height: 14px; flex-shrink: 0; }
.sr-samo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.inv-hero { background: #fff; padding: 36px 0 32px; }
.inv-hero-red { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.inv-hero-tekst { max-width: 680px; }
.inv-hero h1 { margin: 0 0 8px; font-size: 1.75rem; line-height: 1.25; font-weight: 800; letter-spacing: -.02em; color: var(--tekst); }
.inv-hero p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--tekst-slabiji); }
.inv-pouzdanost { display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding: 12px 20px 12px 14px; background: #fff; border: 1px solid var(--okvir); border-radius: 10px; box-shadow: var(--senka); }
.inv-pouzdanost-ikona { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #f2f3ff; color: var(--primarna); }
.inv-pouzdanost-ikona .inv-ik { width: 18px; height: 18px; }
.inv-pouzdanost-label { display: block; font-size: .7rem; color: var(--tekst-slabiji); }
.inv-pouzdanost strong { font-size: 1.35rem; font-weight: 800; color: var(--tekst); }
.inv-zvezde, .inv-zvezda { color: var(--akcenat); font-size: .8rem; }
.inv-zvezda { font-size: 1rem; }

.inv-filteri { background: #fff; border-top: 1px solid var(--okvir); border-bottom: 1px solid var(--okvir); padding: 18px 0 16px; }
.inv-pretraga { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; background: #f2f3ff; border-radius: 10px; }
.inv-pretraga-ikona { width: 18px; height: 18px; flex-shrink: 0; color: var(--tekst-slabiji); }
.inv-pretraga input { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: transparent; font: inherit; font-size: .9rem; color: var(--tekst); }
.inv-pretraga input:focus, .inv-pretraga input:focus-visible { outline: none; box-shadow: none; border: 0; }
.inv-pretraga input::placeholder { color: var(--tekst-slabiji); opacity: .9; }
.inv-pretrazi { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 10px 20px; border: 0; border-radius: 8px; background: var(--primarna); color: #fff; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; transition: background .15s; }
.inv-pretrazi:hover { background: var(--primarna-tamna); }
.inv-pretrazi .inv-ik { width: 15px; height: 15px; }

.inv-filter-red { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.inv-select-grupa { display: flex; gap: 10px; flex-wrap: wrap; }
.inv-select { position: relative; display: inline-block; }
.inv-select select { appearance: none; -webkit-appearance: none; padding: 8px 34px 8px 12px; border: 0; border-radius: 8px; background: #f8fafc; color: var(--tekst); font: inherit; font-size: .85rem; cursor: pointer; }
.inv-select::after { content: ''; position: absolute; right: 13px; top: 50%; width: 5px; height: 5px; margin-top: -4px; border-right: 1.5px solid var(--tekst-slabiji); border-bottom: 1.5px solid var(--tekst-slabiji); transform: rotate(45deg); pointer-events: none; }
.inv-sort { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--tekst-slabiji); }
.inv-aktivni { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; font-size: .75rem; }
.inv-aktivni-label { color: var(--tekst-slabiji); }
.inv-cip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; background: #f2f3ff; color: var(--tekst); text-decoration: none; font-size: .75rem; }
.inv-cip:hover { background: #e2e7ff; }
.inv-cip-x { width: 11px; height: 11px; color: var(--tekst-slabiji); }
.inv-reset { margin-left: auto; color: var(--primarna); font-weight: 600; text-decoration: none; }
.inv-reset:hover { text-decoration: underline; }

.inv-rezultati { background: #f8fafc; padding: 30px 0 44px; }
.inv-brojac { margin: 0 0 16px; font-size: .78rem; color: var(--tekst-slabiji); }
.inv-mreza { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.inv-kartica { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: #fff; border: 1px solid var(--okvir); border-left: 3px solid var(--okvir); border-radius: 10px; box-shadow: var(--senka); }
.inv-visoka { border-left-color: var(--uspesno); }
.inv-srednja { border-left-color: var(--akcenat); }
.inv-niska { border-left-color: var(--greska); }
.inv-kartica-vrh { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.inv-kartica-glava { min-width: 0; }
.inv-kartica h3 { margin: 0; font-size: 1rem; line-height: 1.3; font-weight: 700; }
.inv-kartica h3 a { color: var(--tekst); text-decoration: none; }
.inv-kartica h3 a:hover { color: var(--primarna); }
.inv-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 6px 0 0; font-size: .75rem; color: var(--tekst-slabiji); }
.inv-meta b { font-weight: 600; color: var(--tekst); }
.inv-lokacija { display: inline-flex; align-items: center; gap: 4px; }
.inv-tacka { color: var(--tekst-svetliji); }
.inv-ocena-kutija { display: flex; flex-direction: column; align-items: center; gap: 1px; flex-shrink: 0; padding: 6px 12px; border-radius: 8px; background: #f2f3ff; text-align: center; }
.inv-ocena-kutija strong { font-size: 1.05rem; font-weight: 700; color: var(--tekst); white-space: nowrap; }
.inv-ocena-kutija span { font-size: .68rem; color: var(--tekst-slabiji); white-space: nowrap; }
.inv-ocena-kutija .inv-zvezda { font-size: .95rem; }
.inv-metrike { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; border-radius: 8px; background: #f2f3ff; text-align: center; }
.inv-metrike span { display: block; font-size: .7rem; color: var(--tekst-slabiji); }
.inv-metrike strong { display: block; margin-top: 2px; font-size: .78rem; font-weight: 700; color: var(--tekst); white-space: nowrap; }
.inv-kartica-dno { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: auto; }
.inv-profil-dugme { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 6px; background: var(--primarna); color: #fff; text-decoration: none; font-size: .78rem; font-weight: 700; white-space: nowrap; transition: background .15s; }
.inv-profil-dugme:hover { background: var(--primarna-tamna); color: #fff; }
/* Plaćene opcije (u pripremi) — prikazuju se samo kada profil dobije odgovarajući status */
.inv-verifikovan { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 4px 10px; border-radius: 6px; background: var(--uspesno-bg); color: #047857; font-size: .75rem; font-weight: 600; }
.inv-verifikovan .inv-ik { width: 14px; height: 14px; }
.inv-znacke { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-znacka-garancija { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: #eaedff; color: var(--primarna); font-size: .72rem; font-weight: 600; }
.inv-kljucni { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; margin: 0; font-size: .75rem; color: var(--tekst-slabiji); }
.inv-kljucni b { font-weight: 600; color: var(--tekst); }

.inv-paginacija { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.inv-paginacija p { margin: 0; font-size: .78rem; color: var(--tekst-slabiji); }
.inv-paginacija nav { display: flex; align-items: center; gap: 6px; }
.inv-strana { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 6px; color: var(--tekst); text-decoration: none; font-size: .8rem; }
a.inv-strana:hover { background: #e2e7ff; }
.inv-strana.aktivna { background: var(--primarna); color: #fff; font-weight: 700; }
.inv-strana.onemoguceno { color: var(--tekst-svetliji); }
.inv-strana-razmak { color: var(--tekst-slabiji); padding: 0 2px; }

.inv-cta-sekcija { background: #f8fafc; padding: 0 0 56px; }
.inv-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 40px 36px; border-radius: 12px; background: #1e3a8a; color: #fff; box-shadow: 0 10px 25px -8px rgba(30,58,138,.5); }
.inv-cta h2 { margin: 0 0 12px; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.inv-cta p { margin: 0; max-width: 620px; font-size: .88rem; line-height: 1.6; color: rgba(255,255,255,.85); }
.inv-cta-dugme { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 12px 22px; border-radius: 8px; background: #fff; color: var(--primarna); text-decoration: none; font-size: .85rem; font-weight: 700; }
.inv-cta-dugme:hover { background: #f2f3ff; }
.inv-cta-dugme .inv-ik { width: 16px; height: 16px; }

@media (max-width: 767px) {
    .inv-omot { padding: 0 16px; }
    .inv-hero { padding: 24px 0 22px; }
    .inv-hero-red { flex-direction: column; gap: 18px; }
    .inv-hero h1 { font-size: 1.5rem; }
    .inv-pouzdanost { align-self: stretch; }
    .inv-pretraga { padding-left: 12px; }
    .inv-pretrazi { padding: 10px 14px; }
    .inv-filter-red { align-items: stretch; }
    .inv-select-grupa, .inv-sort { width: 100%; }
    .inv-select-grupa .inv-select { flex: 1; }
    .inv-select select { width: 100%; }
    .inv-sort .inv-select { flex: 1; }
    .inv-reset { margin-left: 0; }
    .inv-mreza { grid-template-columns: minmax(0, 1fr); }
    .inv-kartica { padding: 16px; }
    .inv-paginacija { flex-direction: column; align-items: flex-start; }
    .inv-cta { flex-direction: column; align-items: flex-start; padding: 28px 22px; }
    .inv-cta-dugme { width: 100%; justify-content: center; }
}