/* ============================================
   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; overflow-x: clip; } /* clip ne pravi scroll kontejner, pa position: sticky radi */
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: 1279px) { .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-linkovi a.aktivan { color: var(--primarna); background: #eef2ff; }
/* Laptop 13–15" (i uvećan prikaz 125%): uži razmaci da meni ne bude pretrpan */
@media (max-width: 1279px) {
    .site-header .container { gap: 8px; }
    .nav-linkovi { gap: 0; }
    .nav a, .nav > button, .nav form.nav-forma button { padding: 8px 11px; font-size: .9rem; }
    .nav-akcije { gap: 6px; }
}
.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 i tabletu se umesto .nav koristi drawer (.mob-meni, vidi niže) */
@media (max-width: 960px) {
    .nav-toggle { display: flex; }
    .nav { display: none; }
}

/* --- Mobilni meni (drawer sa desne strane) --- */
.mob-meni, .mob-meni-pozadina { display: none; }
@media (max-width: 960px) {
    .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.webp') 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.webp');
        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; }
}

/* --- Pravne stranice --- */
.pravno-strana { max-width: 820px; padding-top: 32px; padding-bottom: 56px; line-height: 1.7; color: var(--tekst-telo); }
.pravno-strana h1 { color: var(--tekst); margin-bottom: 4px; }
.pravno-strana h2 { color: var(--tekst); font-size: 1.2rem; margin: 30px 0 10px; }
.pravno-strana ul, .pravno-strana ol { margin: 8px 0 12px 22px; }
.pravno-strana li { margin-bottom: 6px; }
.pravno-sazetak { margin: 18px 0 8px; padding: 14px 18px; border-radius: 12px; background: #eef2ff; color: var(--primarna-tamna); }
.pravno-tabela { overflow-x: auto; }
.pravno-tabela td { vertical-align: top; font-size: .9rem; }

/* --- Stranica greške --- */
.gr-strana { padding: 56px 20px 72px; }
.gr-kartica { max-width: 640px; margin: 0 auto; text-align: center; }
.gr-ikona { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 22px; background: #eef2ff; color: var(--primarna); display: flex; align-items: center; justify-content: center; }
.gr-ikona svg { width: 38px; height: 38px; }
.gr-kod { margin: 0 0 6px; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-slabiji); }
.gr-kartica h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em; margin-bottom: 10px; }
.gr-poruka { color: var(--tekst-telo); max-width: 520px; margin: 0 auto 22px; line-height: 1.6; }
.gr-linkovi-glavni, .gr-akcije { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 18px; }
.gr-pretraga { margin-bottom: 18px; text-align: left; }
.gr-brzi { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding-top: 18px; border-top: 1px solid var(--okvir); font-size: .9rem; font-weight: 600; }
.gr-ref { margin-top: 18px; font-size: .82rem; color: var(--tekst-slabiji); }

/* --- Nova početna: jedna pretraga + tri ulaza --- */
.hero-nova .hero-podtekst { max-width: 560px; }
.hn-pretraga {
    position: relative; display: flex; align-items: center; gap: 6px; width: 100%; max-width: 640px; margin: 0 auto 22px;
    background: #fff; border: 1.5px solid var(--tekst); border-radius: 999px; padding: 6px 6px 6px 18px; box-shadow: 0 6px 24px rgba(15,23,42,.08);
}
.hn-pretraga-ikona { width: 20px; height: 20px; color: var(--tekst-slabiji); flex-shrink: 0; }
.hn-pretraga input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1.05rem; padding: 12px 6px; color: var(--tekst); }
.hn-pretraga button { border-radius: 999px; padding: 12px 24px; white-space: nowrap; }
.hn-pretraga .pretraga-predlozi { left: 0; right: 0; top: calc(100% + 6px); margin-top: 0; max-height: 380px; text-align: left; }
.pretraga-grupa { padding: 8px 14px 4px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-slabiji); }
.hn-ulazi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 820px; margin: 0 auto 18px; text-align: left; }
.hn-ulazi-dva { max-width: 560px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hn-ulaz { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(255,255,255,.94); border: 1px solid var(--okvir); border-radius: 16px; color: var(--tekst); box-shadow: var(--senka); transition: box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out), border-color 200ms; }
.hn-ulaz:hover { text-decoration: none; border-color: var(--primarna); box-shadow: var(--senka-hover); transform: translateY(-2px); }
.hn-ulaz-ikona { width: 42px; height: 42px; border-radius: 12px; background: #eef2ff; color: var(--primarna); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hn-ulaz-ikona svg { width: 22px; height: 22px; }
.hn-ulaz strong { display: block; font-size: .98rem; }
.hn-ulaz small { display: block; font-size: .8rem; color: var(--tekst-slabiji); line-height: 1.35; }
.hn-recenzija { display: inline-block; }
.hn-recenzija-cta {
    display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
    max-width: 760px; margin: 22px auto 0; padding: 16px 22px; border-radius: 16px;
    background: linear-gradient(135deg, var(--primarna) 0%, var(--primarna-tamna) 100%); color: #fff;
    box-shadow: 0 10px 28px rgba(30,58,138,.28); text-align: left; transition: transform .15s ease, box-shadow .15s ease;
}
.hn-recenzija-cta:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 32px rgba(30,58,138,.34); }
.hn-recenzija-tekst { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; }
.hn-recenzija-tekst strong { font-size: 1.05rem; }
.hn-recenzija-tekst small { font-size: .85rem; color: rgba(255,255,255,.82); }
.hn-recenzija-dugme { background: #fff; color: var(--primarna-tamna); font-weight: 800; font-size: .92rem; padding: 10px 18px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 640px) {
    .hn-recenzija-cta { flex-direction: column; text-align: center; gap: 8px; padding: 16px; }
    .hn-recenzija-tekst { flex: none; align-items: center; }
    .hn-recenzija-dugme { width: 100%; text-align: center; padding: 12px 18px; }
}
@media (max-width: 760px) {
    .hn-ulazi { grid-template-columns: 1fr; }
    .hn-pretraga { border-radius: 16px; flex-wrap: wrap; padding: 8px; }
    .hn-pretraga-ikona { display: none; }
    .hn-pretraga button { width: 100%; }
}

/* --- 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…) */
/* Moji stanovi (profil kupca) */
.kupac-stanovi { display: grid; gap: 12px; }
.rec-nacrt-traka, .rec-kupovina-traka { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; padding: 10px 14px; border-radius: 12px; font-size: .9rem; }
.rec-nacrt-traka { background: #eef2ff; color: var(--primarna-tamna); }
.rec-nacrt-traka[hidden] { display: none; }
.rec-kupovina-traka { background: var(--uspesno-bg); color: #047857; }
.grad-trazi { margin: 8px 0 16px; padding: 14px; border: 1px solid var(--okvir); border-radius: 10px; background: var(--pozadina); }
.grad-trazi[hidden], #grad-trazi-filter-omot[hidden] { display: none; }
.grad-trazi select, .grad-trazi input[type=text] { width: 100%; margin-top: 6px; }
#grad-trazi-filter-omot { margin-top: 8px; }
.grad-trazi-lista { margin-top: 10px; max-height: 280px; overflow-y: auto; background: #fff; border-radius: 8px; }
.grad-trazi-lista:empty { display: none; }
.grad-trazi-stavka { display: block; width: 100%; text-align: left; padding: 12px 14px; font: inherit; font-size: .92rem; background: none; border: 0; border-bottom: 1px solid var(--pozadina); cursor: pointer; }
.grad-trazi-stavka:hover, .grad-trazi-stavka:focus-visible { background: var(--sekundarna-bg); outline: none; }
.link-dugme { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--primarna); cursor: pointer; text-decoration: underline; }
.kupac-stan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.kupac-stan h3 { font-size: 1.05rem; }
.kupac-poziv { max-width: 560px; margin: 40px auto; }
.ms-glava { margin: 28px 0 18px; }
.ms-glava h1 { font-size: 1.5rem; margin: 4px 0; }
.ms-mreza { display: grid; gap: 18px; grid-template-columns: 1fr; margin-bottom: 32px; }
@media (min-width: 960px) { .ms-mreza { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.ms-grupa + .ms-grupa { margin-top: 18px; }
.ms-grupa h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tekst-slabiji); margin-bottom: 8px; }
.ms-dok { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--okvir); border-radius: 12px; background: #fff; }
.ms-dok + .ms-dok { margin-top: 8px; }
.ms-dok-info { min-width: 0; }
.ms-dok-info strong { display: block; overflow-wrap: anywhere; }
.ms-dok-info span { font-size: .82rem; color: var(--tekst-slabiji); }
.ms-rek { border: 1px solid var(--okvir); border-radius: 12px; padding: 14px 16px; background: #fff; scroll-margin-top: 90px; }
.ms-rek + .ms-rek { margin-top: 10px; }
.ms-rek-glava { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ms-rek-glava strong { font-size: 1rem; }
.ms-rek-opis { margin: 8px 0 0; white-space: pre-line; overflow-wrap: anywhere; color: var(--tekst-telo); }
.ms-poruke { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ms-poruka { padding: 10px 12px; border-radius: 10px; font-size: .92rem; white-space: pre-line; overflow-wrap: anywhere; }
.ms-poruka-investitor { background: #f5f7ff; border-left: 3px solid var(--primarna); }
.ms-poruka-kupac { background: var(--kartica-tiha); border-left: 3px solid var(--okvir); }
.ms-poruka small { display: block; color: var(--tekst-slabiji); font-size: .76rem; margin-bottom: 2px; }
.ms-forma { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ms-forma label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .9rem; }
.ms-forma label[hidden] { display: none; }
.ms-nova-rek > summary { list-style: none; display: inline-block; cursor: pointer; }
.ms-nova-rek > summary::-webkit-details-marker { display: none; }
.ms-nova-rek[open] > summary { opacity: .7; }
.ms-forma textarea, .ms-forma select, .ms-forma input[type=text] { width: 100%; }
.ms-format { display: inline-block; min-width: 38px; padding: 3px 6px; border-radius: 6px; background: #eef2ff; color: var(--primarna); font-size: .7rem; font-weight: 800; text-align: center; flex-shrink: 0; }
.kupac-poziv-stan { margin: 14px 0; padding: 14px 16px; border-radius: 12px; background: #f5f7ff; border: 1px solid var(--okvir); }
.kupac-poziv-stan strong { display: block; font-size: 1.1rem; }

/* Javni odgovor investitora ispod recenzije */
.odgovor-inv { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--primarna); border-radius: 0 10px 10px 0; background: #f5f7ff; }
.odgovor-inv-glava { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .85rem; }
.odgovor-inv-glava svg { width: 16px; height: 16px; color: var(--primarna); flex-shrink: 0; }
.odgovor-inv-glava strong { color: var(--primarna-tamna); }
.odgovor-inv-glava span { color: var(--tekst-slabiji); }
.odgovor-inv p { margin: 6px 0 0; font-size: .92rem; line-height: 1.65; color: var(--tekst-telo); white-space: pre-line; overflow-wrap: anywhere; }
.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; }

/* Obavezno polje koje nije popunjeno (wizard forma recenzije) */
.polje-greska > label:first-child { color: var(--greska); }
.polje-greska input[type=text], .polje-greska input[type=number], .polje-greska select, .polje-greska textarea {
    border-color: var(--greska); background: var(--greska-bg);
}
.polje-greska .radio-kartica:not(.izabrana) { border-color: var(--greska); background: var(--greska-bg); }
.polje-greska .ocena-input { outline: 2px solid var(--greska); outline-offset: 4px; border-radius: 8px; }
.polje-greska-tekst { margin-top: 6px; font-size: .86rem; font-weight: 700; color: var(--greska); }
.polje-greska-tekst::before { content: "! "; font-weight: 900; }
.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) --- */
/* Traka se lepi zajedno sa gornjim delom kartice (izlazi do ivica .forma), a ne od samih krugova. */
.wizard-progres {
    margin: -26px -26px 24px; padding: 22px 26px 14px;
    position: sticky; top: 64px; z-index: 30; background: #fff;
    border-bottom: 1px solid var(--okvir); border-radius: var(--radius) var(--radius) 0 0;
}
.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_ceka { background: #e0e7ff; color: #3730a3; }
.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: kartica dole levo; na telefonu preko cele širine, krupniji i uočljiviji --- */
.kolacici-baner {
    position: fixed; left: 16px; bottom: 16px; z-index: 100; width: 340px; max-width: calc(100vw - 32px);
    background: #0f1729; color: #e2e8f0; padding: 14px 16px; border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.28); font-size: .8rem;
}
.kolacici-baner-sadrzaj { display: flex; flex-direction: column; gap: 10px; }
.kolacici-baner-sadrzaj p { margin: 0; font-size: .82rem; line-height: 1.45; }
.kolacici-baner-sadrzaj a { color: #c3cdf0; text-decoration: underline; }
.kolacici-baner-sadrzaj .btn { width: 100%; white-space: nowrap; }
.kolacici-panel { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.06); }
.kolacici-panel[hidden] { display: none; }
.kolacici-izbor { display: flex; align-items: center; gap: 8px; font-size: .84rem; cursor: pointer; }
.kolacici-izbor small { color: #94a3b8; font-size: .74rem; }
.kolacici-izbor input { accent-color: #6d8bff; margin: 0; width: 18px; height: 18px; }
.kolacici-dugmad { display: flex; flex-direction: column; gap: 8px; }
.kolacici-baner .btn-outline { color: #e2e8f0; border-color: #64748b; background: transparent; }
@media (max-width: 640px) {
    .kolacici-baner {
        left: 0; right: 0; bottom: 0; width: auto; max-width: none; border-radius: 18px 18px 0 0;
        padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); font-size: .95rem;
        border-top: 3px solid #6d8bff; box-shadow: 0 -10px 40px rgba(0,0,0,.45);
    }
    .kolacici-baner-sadrzaj p { font-size: .95rem; line-height: 1.5; }
    .kolacici-baner-sadrzaj .btn { min-height: 48px; font-size: 1rem; }
    .kolacici-izbor { font-size: .95rem; }
}

/* --- 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-sadrzaj-centrirano h1 { 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-znacka-zelena { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.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; }
.hn-pretraga input:focus, .hn-pretraga input:focus-visible { outline: none; box-shadow: none; border: 0; }
.hn-pretraga:focus-within { border-color: var(--primarna); box-shadow: 0 0 0 4px rgba(30,58,138,.14), 0 6px 24px rgba(15,23,42,.08); }
.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; }
}

/* ===== Stranica grada + modal recenzije ===== */
.grad-zaglavlje { padding: 36px 0 8px; }
.grad-nazad { display: inline-block; margin-bottom: 14px; font-size: .85rem; font-weight: 600; color: var(--tekst-slabiji); text-decoration: none; }
.grad-nazad:hover { color: var(--primarna); }
.grad-zaglavlje h1 { margin: 6px 0 18px; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.grad-statistika { display: flex; flex-wrap: wrap; gap: 12px; }
.grad-statistika > div { display: flex; flex-direction: column; padding: 10px 18px; background: #fff; border: 1px solid var(--okvir); border-radius: 10px; box-shadow: var(--senka); }
.grad-statistika strong { font-size: 1.15rem; font-weight: 800; color: var(--tekst); }
.grad-statistika span { font-size: .72rem; color: var(--tekst-slabiji); }
.kartica-klik { cursor: pointer; }
.kartica-klik:focus-visible { outline: 2px solid var(--primarna); outline-offset: 2px; }

body.modal-otvoren { overflow: hidden; }
.rec-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rec-modal[hidden] { display: none; }
.rec-modal-pozadina { position: absolute; inset: 0; background: rgba(15,23,42,.55); }
.rec-modal-prozor { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 720px; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.35); outline: none; }
.rec-modal-glava { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; background: #fff; border-bottom: 1px solid var(--okvir); }
.rec-modal-glava h2 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.rec-modal-x { flex-shrink: 0; width: 34px; height: 34px; border: 0; border-radius: 8px; background: var(--sekundarna-bg); color: var(--tekst-slabiji); font-size: 1rem; cursor: pointer; }
.rec-modal-x:hover { background: #e2e8f0; color: var(--tekst); }
.rec-modal-telo { padding: 20px 24px; }
.rec-modal-telo .recenzija-kartica { border: 0; box-shadow: none; padding: 0; margin: 0; background: transparent; }
.rec-modal-dno { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px; background: #fff; border-top: 1px solid var(--okvir); }
@media (max-width: 600px) {
    .rec-modal { padding: 0; align-items: flex-end; }
    .rec-modal-prozor { max-height: 92vh; border-radius: 16px 16px 0 0; }
    .rec-modal-dno { flex-direction: column-reverse; }
    .rec-modal-dno .btn { width: 100%; text-align: center; }
    .grad-zaglavlje h1 { font-size: 1.6rem; }
}
/* ============================================================
   VESTI (blog) — javni prikaz: lista, tema, članak
   ============================================================ */
.vs-ik { width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; }
.vs-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vs-strana { background: #F8FAFC; }
main:has(.vs-strana), main:has(.vs-clanak) { padding-bottom: 0; }

/* Mrvice */
.vs-mrvice { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: .78rem; color: var(--tekst-slabiji); }
.vs-mrvice a { color: var(--tekst-slabiji); }
.vs-mrvice a:hover { color: var(--primarna); }
.vs-mrvice .vs-ik { width: 13px; height: 13px; color: var(--tekst-svetliji); }
.vs-mrvice [aria-current] { color: var(--tekst); font-weight: 600; max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-mrvice-traka { background: #f2f3ff; padding: 12px 0; }

/* Bedževi tema */
.vs-tema { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; font-size: .72rem; font-weight: 700; letter-spacing: .01em; line-height: 1.4; background: #EFF6FF; color: #1D4ED8; text-decoration: none; position: relative; z-index: 2; white-space: nowrap; }
.vs-tema:hover { text-decoration: none; filter: brightness(.97); }
.vs-tema-plava { background: #EFF6FF; color: #1D4ED8; }
.vs-tema-zelena { background: #ECFDF5; color: #047857; }
.vs-tema-indigo { background: #eaedff; color: #00236f; }
.vs-tema-narandzasta { background: #FFF7ED; color: #C2410C; }
.vs-tema-tirkizna { background: #F0FDFA; color: #0F766E; }
.vs-tema-crvena { background: #FEF2F2; color: #B91C1C; }

/* Zaglavlje liste */
.vs-zaglavlje { padding: 28px 0 8px; }
.vs-zaglavlje-red { display: flex; flex-direction: column; gap: 20px; margin-top: 18px; }
.vs-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 99px; background: #eaedff; color: #00236f; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.vs-eyebrow-tacka { width: 7px; height: 7px; border-radius: 50%; background: #316bf3; }
.vs-zaglavlje h1 { margin: 12px 0 8px; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.35rem); line-height: 1.18; letter-spacing: -.025em; color: var(--tekst); max-width: 22ch; }
.vs-h1-strana { color: var(--tekst-slabiji); font-weight: 700; font-size: .6em; white-space: nowrap; }
.vs-lead { max-width: 62ch; font-size: 1.02rem; line-height: 1.6; color: var(--tekst-slabiji); }
.vs-pretraga { position: relative; display: flex; align-items: center; width: 100%; }
.vs-pretraga .vs-ik { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--tekst-slabiji); pointer-events: none; }
.vs-pretraga input { width: 100%; padding: 13px 16px 13px 42px; border: 1px solid var(--okvir); border-radius: 12px; background: #fff; font: inherit; font-size: .92rem; color: var(--tekst); box-shadow: var(--senka); }
.vs-pretraga input:focus { outline: none; border-color: #316bf3; box-shadow: 0 0 0 3px rgba(49,107,243,.15); }
@media (min-width: 1024px) {
    .vs-zaglavlje-red { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
    .vs-pretraga { width: 380px; flex-shrink: 0; }
}

/* Pilule tema (mobilni / tablet) */
.vs-pilule { display: flex; gap: 8px; margin: 20px -20px 0; padding: 2px 20px 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.vs-pilule::-webkit-scrollbar { display: none; }
.vs-pilula { flex-shrink: 0; padding: 7px 15px; border-radius: 99px; background: #fff; color: var(--tekst-telo); font-size: .84rem; font-weight: 600; box-shadow: var(--senka); scroll-snap-align: start; white-space: nowrap; transition: background 150ms var(--ease-out), color 150ms var(--ease-out); }
.vs-pilula:hover { text-decoration: none; color: var(--primarna); }
.vs-pilula.aktivna { background: #00236f; color: #fff; }
@media (min-width: 1024px) { .vs-pilule { display: none; } }

/* Mozaik izdvojenih */
.vs-mozaik { padding: 20px 0 8px; }
.vs-mozaik-mreza { display: grid; gap: 16px; }
.vs-mozaik-strana { display: grid; gap: 12px; }
.vs-hero, .vs-sporedna { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--senka); transition: box-shadow 200ms var(--ease-out); }
.vs-hero:hover, .vs-sporedna:hover, .vs-kartica:hover { box-shadow: var(--senka-hover); }
.vs-hero-slika { position: relative; display: block; aspect-ratio: 16 / 10; background: #eaedff; overflow: hidden; }
.vs-hero-slika img, .vs-sporedna-slika img, .vs-kartica-slika img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms var(--ease-out); }
.vs-hero:hover img, .vs-sporedna:hover img, .vs-kartica:hover img { transform: scale(1.03); }
.vs-hero-senka { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,35,111,.55), rgba(0,35,111,0) 55%); }
.vs-tema-na-slici { position: absolute; top: 12px; left: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.vs-hero-telo { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.vs-hero-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #316bf3; }
.vs-hero-naslov { font-size: 1.3rem; line-height: 1.3; letter-spacing: -.015em; }
.vs-hero-naslov a, .vs-sporedna-naslov a, .vs-kartica-naslov a { color: var(--tekst); }
.vs-hero-naslov a::after, .vs-sporedna-naslov a::after, .vs-kartica-naslov a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vs-hero-naslov a:hover, .vs-sporedna-naslov a:hover, .vs-kartica-naslov a:hover { text-decoration: none; color: var(--primarna); }
.vs-izvod { color: var(--tekst-slabiji); font-size: .9rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vs-hero-dno { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 6px; }
.vs-autor-mali { display: flex; align-items: center; gap: 10px; }
.vs-autor-mali strong { display: block; font-size: .85rem; color: var(--tekst); }
.vs-autor-mali small { display: block; font-size: .75rem; color: var(--tekst-slabiji); }
.vs-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: #eaedff; color: #00236f; font-size: .78rem; font-weight: 800; }
.vs-citaj { display: inline-flex; align-items: center; gap: 4px; color: #00236f; font-size: .84rem; font-weight: 700; white-space: nowrap; }
.vs-citaj .vs-ik { width: 15px; height: 15px; transition: transform 200ms var(--ease-out); }
.vs-hero:hover .vs-citaj .vs-ik, .vs-sporedna:hover .vs-citaj .vs-ik, .vs-kartica:hover .vs-citaj .vs-ik { transform: translateX(3px); }

/* Sporedne izdvojene — na telefonu horizontalne */
.vs-sporedna { flex-direction: row; align-items: stretch; }
.vs-sporedna-slika { position: relative; display: block; width: 104px; flex-shrink: 0; background: #eaedff; overflow: hidden; }
.vs-sporedna .vs-tema-na-slici { display: none; }
.vs-sporedna-telo { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; min-width: 0; }
.vs-sporedna-naslov { font-size: .95rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vs-sporedna .vs-izvod { display: none; }
.vs-sporedna-dno { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; font-size: .75rem; color: var(--tekst-slabiji); }

@media (min-width: 1024px) {
    .vs-mozaik { padding-top: 28px; }
    .vs-mozaik-mreza { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; }
    .vs-mozaik-sam { grid-template-columns: 1fr; }
    .vs-mozaik-strana { gap: 24px; }
    .vs-hero-slika { aspect-ratio: auto; height: 380px; }
    .vs-hero-telo { padding: 22px 24px; flex: 1; justify-content: space-between; }
    .vs-hero-naslov { font-size: 1.55rem; }
    .vs-sporedna { flex-direction: column; flex: 1; }
    .vs-sporedna-slika { width: 100%; height: 168px; }
    .vs-sporedna .vs-tema-na-slici { display: inline-flex; }
    .vs-sporedna .vs-izvod { display: -webkit-box; -webkit-line-clamp: 2; font-size: .84rem; }
    .vs-sporedna-telo { padding: 16px 18px; gap: 6px; flex: 1; }
    .vs-sporedna-naslov { font-size: 1.02rem; -webkit-line-clamp: 2; }
}

/* CTA "ostavite recenziju" (koristi postojeću .inv-cta komponentu) */
.vs-cta-sekcija { padding: 32px 0 8px; }
.vs-cta .inv-cta { position: relative; overflow: hidden; background: linear-gradient(135deg, #00236f 0%, #1e3a8a 60%, #264191 100%); }
.vs-cta .inv-cta::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.14); pointer-events: none; }
.vs-cta .inv-cta > * { position: relative; z-index: 1; }
.inv-cta p.vs-cta-naslov { margin: 0 0 10px; max-width: 30ch; font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem); line-height: 1.25; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.vs-cta-akcija { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex-shrink: 0; }
.vs-cta-napomena { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.85); }
.vs-cta-napomena .vs-ik { width: 14px; height: 14px; color: #89f5e7; }
@media (min-width: 768px) { .vs-cta-traka .vs-cta-akcija { align-items: center; } }
.vs-cta-lista { margin: 4px 0; }
.vs-cta-lista .inv-cta, .vs-cta-clanak .inv-cta { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 24px; }
@media (max-width: 767px) { .vs-cta-akcija, .vs-cta-akcija .inv-cta-dugme { width: 100%; } .vs-cta-akcija .inv-cta-dugme { justify-content: center; } }
.vs-cta-clanak { margin: 36px 0 !important; }
@media (min-width: 640px) { .vs-cta-clanak .inv-cta, .vs-cta-lista .inv-cta { padding: 34px 32px; } }

/* Glavni deo: lista + bočna kolona */
.vs-glavno { padding: 36px 0 64px; }
.vs-glavno-mreza { display: grid; gap: 32px; }
@media (min-width: 1024px) { .vs-glavno-mreza { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; } }
.vs-sekcija-glava { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.vs-sekcija-glava h2 { font-size: 1.35rem; letter-spacing: -.015em; }
.vs-sekcija-glava span { font-size: .78rem; color: var(--tekst-slabiji); }
.vs-lista { display: flex; flex-direction: column; gap: 14px; }

/* Kartica u listi */
.vs-kartica { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "slika glava" "izvod izvod" "dno dno"; column-gap: 14px; padding: 14px; background: #fff; border-radius: 14px; box-shadow: var(--senka); transition: box-shadow 200ms var(--ease-out); }
.vs-kartica-slika { grid-area: slika; display: block; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: #eaedff; }
.vs-kartica-telo { display: contents; }
.vs-kartica-telo > .vs-meta, .vs-kartica-telo > .vs-kartica-naslov { grid-area: glava; }
.vs-kartica-telo > .vs-meta { align-self: start; }
.vs-kartica-naslov { align-self: end; margin-top: 26px; font-size: .98rem; line-height: 1.35; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vs-kartica .vs-izvod { grid-area: izvod; margin-top: 10px; font-size: .86rem; -webkit-line-clamp: 2; }
.vs-kartica-dno { grid-area: dno; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: .75rem; color: var(--tekst-slabiji); }
.vs-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: .75rem; color: var(--tekst-slabiji); }
@media (min-width: 640px) {
    .vs-kartica { grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: none; column-gap: 20px; padding: 16px; }
    .vs-kartica-slika { grid-area: auto; width: 220px; height: 100%; min-height: 150px; }
    .vs-kartica-telo { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 2px 0; }
    .vs-kartica-telo > .vs-meta, .vs-kartica-telo > .vs-kartica-naslov { grid-area: auto; }
    .vs-kartica-naslov { margin-top: 2px; font-size: 1.1rem; -webkit-line-clamp: 2; }
    .vs-kartica .vs-izvod { margin-top: 0; }
    .vs-kartica-dno { margin-top: auto; padding-top: 6px; }
}

/* Paginacija / učitaj još */
.vs-paginacija { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.vs-ucitaj-vise, .vs-dugme-sporedno { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 12px; background: #fff; color: #00236f; font-size: .88rem; font-weight: 700; box-shadow: var(--senka); transition: background 150ms var(--ease-out); }
.vs-ucitaj-vise:hover, .vs-dugme-sporedno:hover { background: #f2f3ff; text-decoration: none; }
.vs-ucitaj-vise .vs-ik { transition: transform 400ms var(--ease-out); }
.vs-ucitaj-vise:hover .vs-ik { transform: rotate(180deg); }
.vs-ucitaj-vise.ucitava .vs-ik { animation: vs-okret 800ms linear infinite; }
@keyframes vs-okret { to { transform: rotate(360deg); } }
@media (max-width: 639px) { .vs-ucitaj-vise { width: 100%; } }

.vs-prazno { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; text-align: center; background: #fff; border-radius: 14px; box-shadow: var(--senka); color: var(--tekst-slabiji); }
.vs-prazno strong { color: var(--tekst); font-size: 1.05rem; }
.vs-prazno .btn { margin-top: 8px; }
.vs-prazno-ik { width: 40px; height: 40px; color: #b6c4ff; }

/* Bočna kolona */
.vs-bocna { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.vs-panel { padding: 22px; background: #fff; border-radius: 14px; box-shadow: var(--senka); }
.vs-panel-glava { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.vs-panel-glava .vs-panel-naslov { margin: 0; }
.vs-panel-naslov { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 1.02rem; letter-spacing: -.01em; }
.vs-panel-naslov .vs-ik { color: #316bf3; width: 18px; height: 18px; }
.vs-panel-link { display: inline-flex; align-items: center; gap: 2px; font-size: .8rem; font-weight: 700; color: #316bf3; white-space: nowrap; }
.vs-panel-link .vs-ik { width: 14px; height: 14px; }
.vs-teme-lista { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.vs-teme-lista a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--tekst-telo); font-size: .88rem; font-weight: 600; transition: background 150ms var(--ease-out); }
.vs-teme-lista a:hover { background: #f2f3ff; color: #00236f; text-decoration: none; }
.vs-teme-lista a.aktivna { background: #eaedff; color: #00236f; }
.vs-broj { min-width: 26px; padding: 1px 8px; border-radius: 99px; background: #f1f5f9; color: var(--tekst-slabiji); font-size: .72rem; font-weight: 700; text-align: center; }
.vs-teme-lista a.aktivna .vs-broj { background: rgba(0,35,111,.1); color: #00236f; }
.vs-panel-provera { background: linear-gradient(160deg, #e2e7ff 0%, #fff 55%); }
.vs-panel-provera p { font-size: .86rem; color: var(--tekst-slabiji); margin: -6px 0 14px; }
.vs-panel-ikona { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 12px; border-radius: 12px; background: #00236f; color: #fff; }
.vs-panel-ikona .vs-ik { width: 20px; height: 20px; }
.vs-panel-forma { display: flex; flex-direction: column; gap: 8px; }
.vs-panel-forma input { width: 100%; padding: 10px 12px; border: 1px solid var(--okvir); border-radius: 10px; font: inherit; font-size: .88rem; background: #fff; }
.vs-panel-forma input:focus { outline: none; border-color: #316bf3; box-shadow: 0 0 0 3px rgba(49,107,243,.15); }
.vs-panel-forma .btn { width: 100%; text-align: center; }

/* ---------------- Članak ---------------- */
.vs-napredak { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 3px; pointer-events: none; }
.vs-napredak span { display: block; height: 100%; background: linear-gradient(90deg, #316bf3, #00236f); transform: scaleX(0); transform-origin: 0 50%; }
.vs-urednicka-traka { background: #eaedff; color: #00236f; font-size: .82rem; font-weight: 600; }
.vs-urednicka-traka-nacrt { background: #fef3c7; color: #92400e; }
.vs-urednicka-traka .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
.vs-urednicka-traka span { display: inline-flex; align-items: center; gap: 6px; }
.vs-urednicka-traka a { color: inherit; text-decoration: underline; white-space: nowrap; }

.vs-clanak-mreza { display: grid; gap: 40px; padding-top: 24px; padding-bottom: 64px; }
@media (min-width: 1024px) { .vs-clanak-mreza { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; padding-top: 36px; } }
.vs-clanak { min-width: 0; max-width: 780px; }
.vs-nazad { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: .84rem; font-weight: 700; color: #316bf3; }
@media (min-width: 1024px) { .vs-nazad { display: none; } }
.vs-meta-red { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; font-size: .8rem; color: var(--tekst-slabiji); }
.vs-meta-stavka { display: inline-flex; align-items: center; gap: 5px; }
.vs-meta-stavka .vs-ik { width: 14px; height: 14px; }
.vs-meta-azurirano { color: #047857; font-weight: 600; }
.vs-clanak-glava h1 { font-size: clamp(1.65rem, 1.15rem + 2.2vw, 2.4rem); line-height: 1.18; letter-spacing: -.025em; color: var(--tekst); }
.vs-autor-traka { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding: 12px 14px; background: #fff; border-radius: 14px; box-shadow: var(--senka); }
.vs-autor { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vs-autor .vs-avatar { width: 40px; height: 40px; background: #1e3a8a; color: #fff; }
.vs-autor-ime { font-weight: 700; font-size: .92rem; color: var(--tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-uvod { margin-top: 22px; font-size: 1.12rem; line-height: 1.7; color: #444651; }

.vs-naslovna { margin: 26px 0 0; border-radius: 16px; overflow: hidden; background: #eaedff; box-shadow: var(--senka); }
.vs-naslovna img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: cover; }
.vs-naslovna figcaption, .vs-slika figcaption { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 10px 14px; background: #fff; font-size: .78rem; line-height: 1.5; color: var(--tekst-slabiji); }
.vs-izvor { color: var(--tekst-svetliji); }

/* Sadržaj (TOC) */
.vs-sadrzaj { margin-top: 28px; padding: 6px 18px; background: #eaedff; border-radius: 14px; }
.vs-sadrzaj summary { display: flex; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; list-style: none; font-weight: 800; font-size: 1rem; color: #1e3a8a; }
.vs-sadrzaj summary::-webkit-details-marker { display: none; }
.vs-sadrzaj summary .vs-ik { width: 20px; height: 20px; }
.vs-sadrzaj-strelica { margin-left: auto; transition: transform 250ms var(--ease-out); }
.vs-sadrzaj[open] .vs-sadrzaj-strelica { transform: rotate(180deg); }
.vs-sadrzaj-lista { list-style: none; display: grid; gap: 6px; padding: 2px 0 16px; }
.vs-sadrzaj-lista a, .vs-sadrzaj-stavka { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #fff; color: var(--tekst); font-size: .88rem; line-height: 1.4; transition: color 150ms var(--ease-out), background 150ms var(--ease-out); }
.vs-sadrzaj-lista a:hover { color: #00236f; background: #faf8ff; text-decoration: none; }
.vs-sadrzaj-br { flex-shrink: 0; font-weight: 800; font-size: .8rem; color: #316bf3; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .vs-sadrzaj-lista { grid-template-columns: 1fr 1fr; } .vs-sadrzaj { padding: 8px 22px; } }

/* Telo članka */
.vs-telo { margin-top: 12px; font-size: 1.04rem; line-height: 1.8; color: #1e293b; }
.vs-telo > * { margin-top: 20px; }
.vs-tekst > * + * { margin-top: 16px; }
.vs-tekst p, .vs-tekst li { overflow-wrap: anywhere; }
.vs-tekst ul, .vs-tekst ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; color: #334155; }
.vs-tekst h3 { margin-top: 28px; font-size: 1.15rem; line-height: 1.35; letter-spacing: -.01em; color: var(--tekst); }
.vs-telo a:not([class]) { color: #0051d5; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.vs-telo a:not([class]):hover { color: #00236f; }
.vs-telo strong { color: var(--tekst); font-weight: 700; }
.vs-h2 { display: flex; align-items: center; gap: 12px; margin-top: 40px !important; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.45rem); line-height: 1.3; letter-spacing: -.015em; color: #00236f; scroll-margin-top: 84px; }
.vs-korak-broj { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: #1e3a8a; color: #fff; font-size: .9rem; font-weight: 800; }
.vs-telo .vs-h2 + * { margin-top: 12px; }

.vs-slika { margin-left: 0; margin-right: 0; border-radius: 14px; overflow: hidden; background: #eaedff; box-shadow: var(--senka); }
.vs-slika img { display: block; width: 100%; height: auto; }

.vs-metrike { display: grid; gap: 12px; }
@media (min-width: 640px) {
    .vs-metrike-2, .vs-metrike-4 { grid-template-columns: repeat(2, 1fr); }
    .vs-metrike-3 { grid-template-columns: repeat(3, 1fr); }
}
.vs-metrika { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: #fff; border-radius: 14px; box-shadow: var(--senka); line-height: 1.4; }
.vs-metrika-oznaka { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-slabiji); }
.vs-metrika-vrednost { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: #1e3a8a; }
.vs-metrika-zelena .vs-metrika-vrednost { color: #047857; }
.vs-metrika-svetla .vs-metrika-vrednost { color: #0051d5; }
.vs-metrika-crvena .vs-metrika-vrednost { color: #b91c1c; }
.vs-metrika-opis { font-size: .86rem; color: var(--tekst-slabiji); }

.vs-istaknuto { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border-radius: 14px; background: #e2e7ff; line-height: 1.6; }
.vs-istaknuto-ikona { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: #1e3a8a; color: #fff; }
.vs-istaknuto-ikona .vs-ik { width: 20px; height: 20px; }
.vs-istaknuto-naslov { margin-bottom: 4px; font-size: .86rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #1e3a8a; }
.vs-istaknuto-tekst { font-size: .95rem; color: #1e293b; }
.vs-istaknuto-tekst > * + * { margin-top: 8px; }
.vs-istaknuto-tekst ul, .vs-istaknuto-tekst ol { padding-left: 1.2em; }
.vs-istaknuto-upozorenje { background: #FEF2F2; }
.vs-istaknuto-upozorenje .vs-istaknuto-ikona { background: #ba1a1a; }
.vs-istaknuto-upozorenje .vs-istaknuto-naslov { color: #93000a; }
.vs-istaknuto-savet { background: #ECFDF5; }
.vs-istaknuto-savet .vs-istaknuto-ikona { background: #047857; }
.vs-istaknuto-savet .vs-istaknuto-naslov, .vs-istaknuto-savet .vs-istaknuto-tekst { color: #065f46; }
.vs-istaknuto-info { background: #FFFBEB; }
.vs-istaknuto-info .vs-istaknuto-ikona { background: #d97706; }
.vs-istaknuto-info .vs-istaknuto-naslov { color: #92400e; }
@media (max-width: 480px) { .vs-istaknuto { flex-direction: column; gap: 10px; padding: 18px; } .vs-istaknuto-ikona { width: 34px; height: 34px; } }

.vs-citat { margin-left: 0; margin-right: 0; padding: 6px 0 6px 22px; border-left: 4px solid #316bf3; }
.vs-citat blockquote { font-size: 1.14rem; line-height: 1.6; font-weight: 600; font-style: italic; color: var(--tekst); }
.vs-citat blockquote > * + * { margin-top: 10px; }
.vs-citat figcaption { margin-top: 8px; font-size: .86rem; color: var(--tekst-slabiji); }

.vs-lista-blok { padding: 20px 22px; background: #fff; border-radius: 14px; box-shadow: var(--senka); }
.vs-lista-naslov { margin-bottom: 10px; font-weight: 800; color: var(--tekst); }
.vs-lista-blok .vs-lista { flex-direction: column; gap: 10px; padding: 0; list-style: none; }
.vs-lista-blok li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.55; font-size: .98rem; }
.vs-lista-kvacica li .vs-lista-kvacica { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: #ECFDF5; color: #047857; }
.vs-lista-kvacica .vs-ik { width: 13px; height: 13px; stroke-width: 3; }
.vs-lista-blok ol.vs-lista { counter-reset: vs-br; }
.vs-lista-blok ol.vs-lista li { counter-increment: vs-br; }
.vs-lista-blok ol.vs-lista li::before { content: counter(vs-br); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: #eaedff; color: #00236f; font-size: .78rem; font-weight: 800; }
.vs-lista-tacke li::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; margin-top: 10px; border-radius: 50%; background: #316bf3; }

.vs-tabela-omot { overflow-x: auto; border-radius: 14px; box-shadow: var(--senka); background: #fff; }
.vs-tabela-omot:focus-visible { outline: 2px solid #316bf3; outline-offset: 2px; }
.vs-tabela { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.5; }
.vs-tabela caption { padding: 14px 16px 4px; text-align: left; font-weight: 800; color: var(--tekst); }
.vs-tabela th { padding: 12px 16px; background: #f2f3ff; color: #00236f; font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; text-align: left; white-space: nowrap; }
.vs-tabela td { padding: 12px 16px; border-top: 1px solid #f1f5f9; color: #334155; }
.vs-tabela tbody tr:nth-child(even) td { background: #fafbff; }

.vs-faq { margin-top: 40px !important; }
.vs-faq .vs-h2 { margin-top: 0 !important; margin-bottom: 14px; }
.vs-faq-stavka { margin-top: 8px; background: #fff; border-radius: 12px; box-shadow: var(--senka); }
.vs-faq-stavka summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; cursor: pointer; list-style: none; font-weight: 700; font-size: .98rem; line-height: 1.45; color: var(--tekst); }
.vs-faq-stavka summary::-webkit-details-marker { display: none; }
.vs-faq-ik { color: #316bf3; transition: transform 250ms var(--ease-out); }
.vs-faq-stavka[open] .vs-faq-ik { transform: rotate(180deg); }
.vs-faq-odgovor { padding: 0 18px 16px; font-size: .96rem; line-height: 1.7; color: #334155; }
.vs-faq-odgovor > * + * { margin-top: 10px; }

.vs-cta-blok { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 14px; background: #1e3a8a; color: #fff; }
.vs-cta-blok p { font-size: .94rem; line-height: 1.6; color: rgba(255,255,255,.85); }
.vs-cta-blok .vs-cta-blok-naslov { margin-bottom: 6px; font-size: 1.15rem; font-weight: 800; color: #fff; }
.vs-cta-blok-dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-start; padding: 11px 20px; border-radius: 10px; background: #fff; color: #00236f; font-size: .88rem; font-weight: 700; white-space: nowrap; }
.vs-cta-blok-dugme:hover { background: #f2f3ff; text-decoration: none; }
.vs-cta-blok-svetlo { background: #eaedff; color: var(--tekst); }
.vs-cta-blok-svetlo p { color: #444651; }
.vs-cta-blok-svetlo .vs-cta-blok-naslov { color: #00236f; }
.vs-cta-blok-svetlo .vs-cta-blok-dugme { background: #00236f; color: #fff; }
.vs-cta-blok-svetlo .vs-cta-blok-dugme:hover { background: #1e3a8a; }
@media (min-width: 640px) { .vs-cta-blok { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; } .vs-cta-blok-dugme { align-self: center; } }

/* Dno članka: teme + deljenje */
.vs-clanak-dno { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--okvir); display: flex; flex-direction: column; gap: 18px; }
.vs-oznake { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.vs-oznake-naslov { font-size: .8rem; color: var(--tekst-slabiji); }
.vs-oznake a { padding: 5px 11px; border-radius: 8px; background: #eaedff; color: #00236f; font-size: .8rem; font-weight: 600; }
.vs-oznake a:hover { background: #dae2fd; text-decoration: none; }
.vs-napomena { font-size: .78rem; color: var(--tekst-svetliji); }

/* Dugmad za deljenje */
.vs-deli { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.vs-deli-oznaka { font-size: .86rem; font-weight: 700; color: var(--tekst); }
.vs-deli-dugmad { display: flex; flex-wrap: wrap; gap: 6px; }
.vs-deli-dugme { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; height: 36px; padding: 0 9px; border: 0; border-radius: 10px; background: #f2f3ff; color: #1e3a8a; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; transition: background 150ms var(--ease-out), color 150ms var(--ease-out), transform 120ms var(--ease-out); }
.vs-deli-dugme:hover { text-decoration: none; background: #e2e7ff; }
.vs-deli-dugme:active { transform: scale(.95); }
.vs-deli-dugme .vs-ik { width: 17px; height: 17px; }
.vs-deli-facebook:hover { background: #1877F2; color: #fff; }
.vs-deli-x:hover { background: #0f1419; color: #fff; }
.vs-deli-linkedin:hover { background: #0A66C2; color: #fff; }
.vs-deli-whatsapp:hover { background: #25D366; color: #fff; }
.vs-deli-viber:hover { background: #7360F2; color: #fff; }
.vs-deli-kopiraj.kopirano { background: #ECFDF5; color: #047857; }
.vs-deli-pun .vs-deli-dugme { padding: 0 12px; }
.vs-deli-nativno { background: #00236f; color: #fff; }
.vs-deli-nativno:hover { background: #1e3a8a; }
.vs-deli-nativno[hidden] { display: none; }
@media (max-width: 639px) {
    .vs-deli-kompakt .vs-deli-facebook, .vs-deli-kompakt .vs-deli-x, .vs-deli-kompakt .vs-deli-linkedin, .vs-deli-kompakt .vs-deli-mejl { display: none; }
    .vs-deli-pun .vs-deli-dugme span { display: none; }
    .vs-deli-pun .vs-deli-nativno span { display: inline; }
}

/* Bočna kolona članka */
.vs-bocna-lepljiva { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 1024px) { .vs-bocna-lepljiva { position: sticky; top: 88px; } }
.vs-povezani { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.vs-povezani a { display: flex; gap: 12px; align-items: flex-start; color: inherit; }
.vs-povezani a:hover { text-decoration: none; }
.vs-povezani a:hover .vs-povezani-naslov { color: #00236f; }
.vs-povezani-slika { flex-shrink: 0; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: #eaedff; }
.vs-povezani-slika img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-povezani-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vs-povezani-tema { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #316bf3; }
.vs-povezani-naslov { font-size: .88rem; font-weight: 700; line-height: 1.35; color: var(--tekst); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color 150ms var(--ease-out); }
.vs-povezani-meta { font-size: .72rem; color: var(--tekst-slabiji); }
@media (max-width: 1023px) { .vs-bocna-clanak { max-width: 780px; } }

@media (prefers-reduced-motion: reduce) {
    .vs-hero img, .vs-sporedna img, .vs-kartica img, .vs-citaj .vs-ik, .vs-ucitaj-vise .vs-ik { transition: none !important; transform: none !important; }
    .vs-ucitaj-vise.ucitava .vs-ik { animation: none; }
}

/* ============================================================
   VESTI — urednički panel (lista + editor)
   ============================================================ */
.ved-tabovi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.ved-tab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 8px; background: #f8fafc; border: 1px solid #E2E8F0; color: #334155; font-size: .78rem; font-weight: 600; }
.ved-tab span { padding: 0 7px; border-radius: 99px; background: #e2e8f0; font-size: .7rem; }
.ved-tab.aktivan { background: #00236f; border-color: #00236f; color: #fff; }
.ved-tab.aktivan span { background: rgba(255,255,255,.2); }
.ved-tab:hover { text-decoration: none; }
.ved-red-clanak { display: flex; align-items: center; gap: 12px; min-width: 260px; }
.ved-sl { flex-shrink: 0; width: 56px; height: 40px; border-radius: 6px; overflow: hidden; background: #eaedff; }
.ved-sl img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ved-slug { display: block; margin-top: 2px; color: #94a3b8; font-size: .72rem; }
.ved-oznaka-ist { color: #b45309; font-size: .7rem; font-weight: 700; white-space: nowrap; }

/* --- Editor članka: panel + platno (po uzoru na Elementor) --- */
.ure { gap: 16px; padding-top: 20px; max-width: 1320px; }
.ved-greske { margin-bottom: 20px; padding: 14px 18px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: .86rem; }
.ved-greske ul { margin: 6px 0 0 18px; }

/* Gornja traka */
.adm-podheader.adm-podheader-staticki { position: static; }
.ure-traka { margin-bottom: 20px; position: sticky; top: var(--ure-vrh, 64px); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 2px 8px rgba(15,23,42,.06); }
.ure-traka-levo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ure-traka-levo > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .9rem; }
.ure-nazad { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: #f1f5f9; color: #334155; font-size: 1.05rem; font-weight: 700; }
.ure-nazad:hover { background: #e2e8f0; text-decoration: none; }
.ure-pregled { font-size: .8rem; font-weight: 600; }
.ure-traka-desno { display: flex; align-items: center; gap: 8px; }
.ure-objavi { background: #047857; border-color: #047857; color: #fff; }
.ure-objavi:hover { background: #065f46; border-color: #065f46; }
.ure-spremnost { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 1px solid #fde68a; border-radius: 99px; background: #fffbeb; color: #92400e; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.ure-spremnost-krug { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 99px; background: #fde68a; font-size: .72rem; }
.ure-spremnost.spremno { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.ure-spremnost.spremno .ure-spremnost-krug { background: #047857; color: #fff; }
@media (max-width: 720px) {
    .ure-traka { position: static; }
    .ure-traka-desno { width: 100%; }
    .ure-traka-desno .adm-dugme { flex: 1; padding: 10px; }
    .ure-spremnost { order: 3; }
}

/* Radni prostor */
.ure-radni { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1100px) { .ure-radni { grid-template-columns: 340px minmax(0, 1fr); } }

/* Panel */
.ure-panel { display: flex; flex-direction: column; background: #f8fafc; border: 1px solid #E2E8F0; border-radius: 12px; overflow: auto; }
@media (min-width: 1100px) { .ure-panel { position: sticky; top: var(--ure-panel-vrh, 150px); max-height: calc(100vh - var(--ure-panel-vrh, 150px) - 16px); } }
.ure-tabovi { position: sticky; top: 0; z-index: 2; display: flex; background: #eef1f6; border-bottom: 1px solid #E2E8F0; }
.ure-tabovi button { flex: 1; padding: 12px 6px; border: 0; border-bottom: 2px solid transparent; background: transparent; font: inherit; font-size: .78rem; font-weight: 700; color: #64748b; cursor: pointer; }
.ure-tabovi button:hover { color: #0f172a; }
.ure-tabovi button.aktivan { background: #f8fafc; color: #00236f; border-bottom-color: #316bf3; }
.ure-tabovi .ure-panel-zatvori { flex: 0 0 44px; font-size: 1.3rem; display: none; }
.ure-tab { padding: 16px; }
.ure-tab[hidden] { display: none; }
.ure-uputstvo { margin-bottom: 4px; font-size: .78rem; color: #64748b; }
.ure-umetanje { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; padding: 9px 12px; border-radius: 8px; background: #eaedff; color: #00236f; font-size: .76rem; font-weight: 600; }
.ure-umetanje[hidden] { display: none; }
.ure-umetanje button { flex-shrink: 0; padding: 3px 9px; border: 1px solid #b6c4ff; border-radius: 6px; background: #fff; font: inherit; font-size: .72rem; color: #00236f; cursor: pointer; }
.ure-grupa-naslov { margin: 16px 0 8px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
.ure-plocice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ure-plocica { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px; border: 1px solid #E2E8F0; border-radius: 10px; background: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color 150ms, box-shadow 150ms, transform 150ms; }
.ure-plocica:hover { border-color: #93a8ff; box-shadow: 0 4px 12px rgba(0,35,111,.08); transform: translateY(-1px); }
.ure-plocica:active { cursor: grabbing; transform: scale(.98); }
.ure-plocica strong { font-size: .8rem; color: #0f172a; line-height: 1.3; }
.ure-plocica small { font-size: .68rem; line-height: 1.35; color: #64748b; }
.ure-plocica-ik { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; margin-bottom: 4px; border-radius: 8px; background: #eaedff; color: #00236f; }
.ure-plocica-ik .vs-ik { width: 17px; height: 17px; }
.ure-sabloni-dugme { width: 100%; margin-top: 16px; padding: 10px; border: 1px dashed #b6c4ff; border-radius: 10px; background: #fff; font: inherit; font-size: .8rem; font-weight: 700; color: #00236f; cursor: pointer; }
.ure-sabloni-dugme:hover { background: #f2f3ff; }

/* Uredi */
.ure-uredi-glava { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px solid #E2E8F0; }
.ure-uredi-glava .ure-plocica-ik { margin: 0; }
.ure-uredi-glava strong { display: block; font-size: .92rem; color: #0f172a; }
.ure-uredi-glava small { display: block; font-size: .72rem; color: #64748b; }
.ure-uredi-akcije { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid #E2E8F0; }
.ure-prazno-uredi { padding: 28px 8px; text-align: center; font-size: .82rem; color: #64748b; }
.ure-prazno-uredi p + p { margin-top: 8px; }
.ure-prazno-uredi strong { color: #0f172a; }
.ure-veliki-ik { display: block; margin-bottom: 8px; font-size: 1.8rem; line-height: 1; }
.ure-savet { padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid #E2E8F0; font-size: .8rem; line-height: 1.55; color: #334155; }
.ure-savet ul { margin: 8px 0 0 18px; }
.ure-savet p + p { margin-top: 8px; }
.ure-stavka-kartica { margin-top: 12px; padding: 10px 12px 12px; border: 1px solid #E2E8F0; border-radius: 10px; background: #fff; }
.ure-stavka-glava { display: flex; align-items: center; justify-content: space-between; font-size: .76rem; color: #334155; }
.ure-stavka-kartica .ved-polje:first-of-type label { margin-top: 4px; }
.ure-stavka-red { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.ure-dodaj-stavku { margin-top: 10px; width: 100%; }
.ure-zameni { position: relative; cursor: pointer; margin-bottom: 4px; }

/* Polja u panelu */
.ure-panel input[type=text], .ure-panel input[type=number], .ure-panel input[type=datetime-local], .ure-panel textarea, .ure-panel select {
    width: 100%; padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff;
    font: inherit; font-size: .85rem; color: #0f172a; line-height: 1.5;
}
.ure-panel textarea { resize: vertical; min-height: 60px; }
.ure-panel input:focus, .ure-panel textarea:focus, .ure-panel select:focus { outline: none; border-color: #00236f; box-shadow: 0 0 0 3px rgba(0,35,111,.12); }
.ved-oznaka, .ved-polje label { display: block; margin: 12px 0 5px; font-size: .74rem; font-weight: 700; color: #334155; }
.ved-pomoc { margin-top: 5px; font-size: .72rem; line-height: 1.5; color: #64748b; }
.ved-brojac.preko { color: #b45309; font-weight: 700; }
.ved-cek { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: .8rem; color: #334155; cursor: pointer; }
.ved-cek input { margin-top: 3px; }
.ved-x { flex-shrink: 0; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: #94a3b8; font-size: 1.05rem; cursor: pointer; }
.ved-x:hover { background: #fef2f2; color: #b91c1c; }
.ved-sakriven { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ved-radio-red { display: flex; flex-direction: column; gap: 8px; font-size: .8rem; }
.ved-radio-red label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ved-toc-rucno { margin-top: 10px; }
.ved-toc-rucno[hidden] { display: none; }
.ure-toc-red { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 8px; }
.ure-toc-polja { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ved-slug-red { display: flex; align-items: stretch; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; background: #fff; }
.ved-slug-prefiks { display: flex; align-items: center; padding: 0 8px; background: #f1f5f9; color: #64748b; font-size: .78rem; }
.ure-panel .ved-slug-red input { border: 0; border-radius: 0; box-shadow: none; }
.ved-citanje-red { display: flex; align-items: center; gap: 8px; }
.ure-panel .ved-citanje-red input { width: 80px; }
.ved-citanje-red span { font-size: .8rem; color: #475569; }
.ure-alati { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ure-alati button { padding: 4px 9px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; font: inherit; font-size: .74rem; font-weight: 600; color: #334155; cursor: pointer; }
.ure-alati button:hover { background: #eaedff; border-color: #b6c4ff; color: #00236f; }

/* Grupe podešavanja */
.ure-grupa { margin-bottom: 10px; padding: 0 14px; border: 1px solid #E2E8F0; border-radius: 10px; background: #fff; }
.ure-grupa > summary { padding: 12px 0; cursor: pointer; font-size: .84rem; font-weight: 700; color: #0f172a; list-style: none; }
.ure-grupa > summary::-webkit-details-marker { display: none; }
.ure-grupa > summary::after { content: "▾"; float: right; color: #94a3b8; transition: transform 200ms; }
.ure-grupa[open] > summary::after { transform: rotate(180deg); }
.ure-grupa[open] { padding-bottom: 14px; }
.ure-provera { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ure-provera button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: #fffbeb; font: inherit; font-size: .8rem; color: #92400e; text-align: left; cursor: pointer; }
.ure-provera button:hover { background: #fef3c7; }
.ure-provera li.ok button { background: transparent; color: #64748b; }
.ure-provera-ik { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #f59e0b; font-size: .7rem; font-weight: 800; }
.ure-provera li.ok .ure-provera-ik { border-color: #047857; background: #047857; color: #fff; }

/* Teme (čipovi) */
.ved-cipovi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; cursor: text; }
.ved-cipovi:focus-within { border-color: #00236f; box-shadow: 0 0 0 3px rgba(0,35,111,.12); }
.ure-panel .ved-cipovi input[type=text] { flex: 1; width: auto; min-width: 100px; border: 0; box-shadow: none; padding: 4px 6px; }
.ved-cip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 99px; background: #eaedff; color: #00236f; font-size: .76rem; font-weight: 700; }
.ved-cip:first-child { background: #00236f; color: #fff; }
.ved-cip button { width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: .9rem; line-height: 1; cursor: pointer; opacity: .7; }
.ved-cip button:hover { opacity: 1; background: rgba(0,0,0,.1); }
.ved-predlozi { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.ved-predlozi button { padding: 4px 10px; border: 1px solid #cbd5e1; border-radius: 99px; background: #fff; font: inherit; font-size: .72rem; color: #334155; cursor: pointer; }
.ved-predlozi button:hover { border-color: #316bf3; color: #00236f; background: #f2f3ff; }
.ved-predlozi button[hidden] { display: none; }

/* Google pregled */
.ved-serp { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid #E2E8F0; border-radius: 10px; background: #fff; font-family: Arial, sans-serif; }
.ved-serp-url { font-size: .72rem; color: #202124; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ved-serp-naslov { font-size: 1rem; line-height: 1.3; color: #1a0dab; }
.ved-serp-opis { font-size: .78rem; line-height: 1.45; color: #4d5156; }

/* Upload */
.ved-upload { position: relative; border: 2px dashed #b6c4ff; border-radius: 12px; background: #faf8ff; overflow: hidden; transition: border-color 150ms, background 150ms; }
.ved-upload:hover, .ved-upload.preko { border-color: #316bf3; background: #eaedff; }
.ved-upload input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.ved-upload-prazno { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 32px 16px; text-align: center; }
.ved-upload-prazno[hidden], .ved-upload-pregled[hidden], .ure-promeni[hidden] { display: none; }
.ved-upload-prazno strong { font-size: .95rem; color: #00236f; }
.ved-upload-prazno span { font-size: .74rem; color: #64748b; }
.ved-upload-pregled { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.ved-upload-status { display: block; font-size: .76rem; color: #b45309; font-weight: 600; }
.ved-upload-status:not(:empty) { margin-top: 6px; }

/* Platno */
.ure-platno { min-width: 0; }
.ure-list { max-width: 820px; margin: 0 auto; padding: 32px 40px 40px; background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
@media (max-width: 720px) { .ure-list { padding: 20px 16px 28px; border-radius: 12px; } }
.ure-meta { margin-bottom: 10px; }
.ure-ph { color: #94a3b8; font-style: italic; font-weight: 500; }
.ure-h1, .ure-uvod, .ure-tekst, .ure-h2-unos { display: block; width: 100%; padding: 2px 0; border: 0; border-radius: 4px; background: transparent; resize: none; overflow: hidden; font: inherit; color: inherit; }
.ure-h1:focus, .ure-uvod:focus, .ure-tekst:focus, .ure-h2-unos:focus { outline: none; }
.ure-h1::placeholder, .ure-uvod::placeholder, .ure-tekst::placeholder, .ure-h2-unos::placeholder { color: #a8b3c4; }
.ure-h1 { font-size: clamp(1.6rem, 1.15rem + 2vw, 2.3rem); font-weight: 800; line-height: 1.2; letter-spacing: -.025em; color: var(--tekst); }
.ure-uvod { margin-top: 14px; font-size: 1.1rem; line-height: 1.7; color: #444651; }
.ure-h1:hover, .ure-uvod:hover { background: #fafbff; }
.ure-h1:focus, .ure-uvod:focus { background: #f5f7ff; box-shadow: 0 0 0 6px #f5f7ff; }

.ure-naslovna { margin: 24px 0 0; }
.ure-naslovna-zona { border-radius: 16px; }
.ure-promeni { position: absolute; right: 12px; bottom: 12px; z-index: 1; padding: 6px 12px; border-radius: 8px; background: rgba(15,23,42,.75); color: #fff; font-size: .76rem; font-weight: 700; }
.ure-slika-polja { display: grid; gap: 6px; margin-top: 8px; }
@media (min-width: 720px) { .ure-slika-polja { grid-template-columns: 1.4fr 1fr 1fr; } }
.ure-slika-polja input { width: 100%; padding: 8px 10px; border: 1px solid #E2E8F0; border-radius: 8px; background: #f8fafc; font: inherit; font-size: .8rem; color: #334155; }
.ure-slika-polja input:focus { outline: none; border-color: #316bf3; background: #fff; }

.ure-toc { margin-top: 24px; padding-bottom: 12px; }
.ure-toc-glava { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0 8px; font-weight: 800; color: #1e3a8a; }
.ure-toc-glava > span { display: inline-flex; align-items: center; gap: 8px; }
.ure-toc-podesi { padding: 4px 10px; border: 1px solid #b6c4ff; border-radius: 6px; background: #fff; font: inherit; font-size: .72rem; font-weight: 700; color: #00236f; cursor: pointer; }

/* Šabloni */
.ure-sabloni { margin-top: 24px; padding: 20px; border: 2px dashed #b6c4ff; border-radius: 14px; background: #faf8ff; }
.ure-sabloni[hidden] { display: none; }
.ure-sabloni-naslov { margin-bottom: 12px; font-weight: 800; font-size: 1rem; color: #0f172a; }
.ure-sabloni-mreza { display: grid; gap: 10px; }
@media (min-width: 640px) { .ure-sabloni-mreza { grid-template-columns: 1fr 1fr; } }
.ure-sablon { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color 150ms, box-shadow 150ms, transform 150ms; }
.ure-sablon:hover, .ure-sablon:focus-visible { border-color: #316bf3; box-shadow: 0 6px 16px rgba(0,35,111,.1); transform: translateY(-2px); outline: none; }
.ure-sablon strong { font-size: .92rem; color: #0f172a; }
.ure-sablon > span:not(.ure-sablon-ik) { font-size: .76rem; line-height: 1.5; color: #64748b; }
.ure-sablon-ik { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 10px; background: #eaedff; color: #00236f; font-size: .85rem; font-weight: 800; }
.ure-sablon-broj { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .76rem; font-weight: 600; color: #334155; }
.ure-sablon-broj input { width: 58px; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; }

/* Blokovi na platnu */
.ure-blokovi { margin-top: 8px; }
.ure-blokovi > * { margin-top: 0; }
.ure-blok { position: relative; padding: 6px 10px; margin: 0 -10px; border-radius: 10px; outline: 1.5px dashed transparent; outline-offset: 0; transition: outline-color 120ms, background 120ms; cursor: pointer; }
.ure-blok:hover { outline-color: #b6c4ff; }
.ure-blok.izabran { outline: 2px solid #316bf3; background: #fbfcff; cursor: default; }
.ure-blok.vuce { opacity: .4; }
.ure-blok-oznaka { position: absolute; top: -11px; left: 12px; z-index: 3; display: none; padding: 2px 9px; border-radius: 6px; background: #316bf3; color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .02em; cursor: grab; user-select: none; }
.ure-blok-alati { position: absolute; top: -15px; right: 10px; z-index: 3; display: none; gap: 2px; padding: 2px; border-radius: 8px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 2px 8px rgba(15,23,42,.1); }
.ure-blok-alati button { width: 28px; height: 26px; border: 0; border-radius: 6px; background: transparent; font-size: .82rem; color: #334155; cursor: pointer; }
.ure-blok-alati button:hover:not([disabled]) { background: #eaedff; }
.ure-blok-alati button[disabled] { opacity: .3; cursor: default; }
.ure-blok-alati .ure-obrisi:hover { background: #fef2f2 !important; }
.ure-blok:hover .ure-blok-oznaka, .ure-blok.izabran .ure-blok-oznaka, .ure-blok:hover .ure-blok-alati, .ure-blok.izabran .ure-blok-alati { display: flex; }
.ure-blok .ure-alati { display: none; padding-top: 10px; }
.ure-blok.izabran .ure-alati { display: flex; }
.ure-blokovi .vs-h2 { margin-top: 12px !important; }
.ure-h2 .ure-h2-unos { flex: 1; min-width: 0; font-size: inherit; font-weight: 800; line-height: 1.3; color: inherit; letter-spacing: inherit; }
.ure-pregled { pointer-events: none; }
.ure-pregled .ved-upload, .ure-pregled .ved-upload input { pointer-events: auto; }
.ure-pregled figure { position: relative; }
.ure-upozorenje { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 6px; background: #b91c1c; color: #fff; font-size: .72rem; font-weight: 700; }
.ure-faq .ure-faq-p { padding: 14px 18px 6px; font-weight: 700; color: var(--tekst); }
.ure-prazan-el { display: flex; align-items: center; gap: 8px; padding: 20px; border: 2px dashed #cbd5e1; border-radius: 12px; color: #94a3b8; font-size: .9rem; }
.ure-cta-pregled { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; border-radius: 12px; background: linear-gradient(135deg, #00236f, #1e3a8a); color: #fff; }
.ure-cta-pregled strong { font-size: 1.1rem; line-height: 1.35; }
.ure-cta-pregled > span:not([class]) { font-size: .86rem; color: rgba(255,255,255,.85); }
.ure-cta-pregled-napomena { font-size: .76rem; font-weight: 600; color: #89f5e7; }
.ure-cta-pregled-dugme { padding: 9px 16px; border-radius: 8px; background: #fff; color: #00236f; font-size: .82rem; font-weight: 700; }

/* Razmaci između elemenata: vazduh između sekcija + "Dodaj element ovde" na hover */
.ure-razmak { position: relative; height: 40px; display: flex; align-items: center; justify-content: center; }
.ure-razmak::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #316bf3; border-radius: 2px; opacity: 0; transition: opacity 120ms; }
.ure-razmak-dugme { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 4px; border: 0; border-radius: 99px; background: #316bf3; color: #fff; font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; opacity: 0; transform: scale(.85); transition: opacity 120ms, transform 120ms; box-shadow: 0 2px 8px rgba(49,107,243,.4); }
.ure-razmak-plus { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.2); font-size: .95rem; line-height: 1; }
.ure-razmak:hover::before { opacity: .3; }
.ure-razmak:hover .ure-razmak-dugme, .ure-razmak-dugme:focus-visible { opacity: 1; transform: scale(1); }
body.ure-vuce .ure-razmak { height: 48px; }
body.ure-vuce .ure-razmak::before { opacity: .25; height: 4px; }
.ure-razmak.preko::before { opacity: 1 !important; height: 6px !important; }
@media (hover: none) { .ure-razmak-dugme { opacity: .8; transform: scale(.9); } }

/* Popup "Dodaj element" */
.ure-birac { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ure-birac[hidden] { display: none; }
.ure-birac-pozadina { position: absolute; inset: 0; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); }
.ure-birac-prozor { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: 86vh; background: #f8fafc; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.35); overflow: hidden; animation: ure-iskoci 180ms var(--ease-out); }
@keyframes ure-iskoci { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.ure-birac-glava { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; background: #fff; border-bottom: 1px solid #E2E8F0; }
.ure-birac-glava strong { display: block; font-size: 1.05rem; color: #0f172a; }
.ure-birac-glava small { display: block; font-size: .76rem; color: #64748b; }
.ure-birac-x { flex-shrink: 0; width: 34px; height: 34px; border: 0; border-radius: 8px; background: #f1f5f9; color: #475569; font-size: 1.2rem; cursor: pointer; }
.ure-birac-x:hover { background: #e2e8f0; }
.ure-birac-telo { padding: 4px 20px 20px; overflow-y: auto; }
.ure-birac-telo .ure-plocice { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .ure-birac { padding: 0; align-items: flex-end; } .ure-birac-prozor { max-height: 88vh; border-radius: 16px 16px 0 0; } .ure-birac-telo .ure-plocice { grid-template-columns: 1fr 1fr; } }
body.ure-birac-otvoren { overflow: hidden; }

.ure-cta-duh { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 2px dashed #b6c4ff; border-radius: 12px; background: #f5f7ff; color: #475569; font-size: .8rem; }
.ure-cta-duh > span { display: inline-flex; align-items: center; gap: 8px; }
.ure-cta-duh .vs-ik { color: #f59e0b; }
.ure-cta-duh button { padding: 4px 10px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; font: inherit; font-size: .72rem; color: #64748b; cursor: pointer; }
.ure-dodaj-kraj { display: block; width: 100%; margin-top: 12px; padding: 16px; border: 2px dashed #b6c4ff; border-radius: 12px; background: #faf8ff; font: inherit; font-size: .92rem; font-weight: 700; color: #00236f; cursor: pointer; transition: background 150ms, border-color 150ms; }
.ure-dodaj-kraj:hover { background: #eaedff; border-color: #316bf3; }

/* Mobilni / tablet: panel kao donja fioka */
.ure-panel-dugme { display: none; }
@media (max-width: 1099px) {
    .ure-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; max-height: 78vh; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 40px rgba(15,23,42,.25); transform: translateY(105%); transition: transform 300ms var(--ease-out); }
    .ure-panel.otvoren { transform: translateY(0); }
    .ure-tabovi .ure-panel-zatvori { display: block; }
    .ure-panel-dugme { position: fixed; right: 16px; bottom: 16px; z-index: 110; display: inline-flex; align-items: center; gap: 6px; padding: 13px 18px; border: 0; border-radius: 99px; background: #00236f; color: #fff; font: inherit; font-size: .86rem; font-weight: 700; box-shadow: 0 8px 24px rgba(0,35,111,.35); cursor: pointer; }
    body.ure-panel-otvoren .ure-panel-dugme { display: none; }
}

/* Teme — admin */
.ved-teme { display: flex; flex-direction: column; gap: 10px; }
.ved-tema-red { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; padding: 14px; border: 1px solid #E2E8F0; border-radius: 10px; }
.ved-tema-polja { flex: 1; min-width: 260px; display: grid; gap: 8px; }
@media (min-width: 900px) { .ved-tema-polja { grid-template-columns: 240px 1fr; } }
.ved-tema-polja label { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; font-weight: 600; color: #475569; }
.ved-tema-polja textarea { resize: vertical; }
.ved-tema-akcije { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Element "Analitika tržišta" (živi podaci) */
.vs-analitika { margin-left: 0; margin-right: 0; padding: 20px 22px; background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; box-shadow: var(--senka); }
.vs-analitika-glava { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.vs-analitika-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #047857; }
.vs-analitika-eyebrow .vs-ik { width: 14px; height: 14px; }
.vs-analitika-glava strong { font-size: 1.1rem; line-height: 1.35; color: var(--tekst); }
.vs-analitika .vs-metrika { box-shadow: none; background: #f8fafc; }
.vs-analitika .vs-metrika-opis .zvezdice { font-size: .95rem; }
.vs-analitika-grafikon { padding: 4px 0; }
.vs-analitika-lista { list-style: none; display: flex; flex-direction: column; gap: 2px; margin-top: 10px; font-size: .9rem; line-height: 1.5; }
.vs-analitika-lista li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; }
.vs-analitika-lista li:nth-child(odd) { background: #f8fafc; }
.vs-analitika-rang li { justify-content: flex-start; }
.vs-analitika-rang a { flex: 1; min-width: 0; font-weight: 700; color: var(--tekst); }
.vs-analitika-br { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: #eaedff; color: #00236f; font-size: .76rem; font-weight: 800; }
.vs-analitika-ocena { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; }
.vs-analitika-ocena small { color: var(--tekst-slabiji); }
.vs-analitika-izvor { margin-top: 14px; font-size: .74rem; line-height: 1.5; color: var(--tekst-slabiji); }
.vs-analitika-prazno { padding: 14px; border-radius: 10px; background: #fffbeb; color: #92400e; font-size: .86rem; line-height: 1.5; }
.ure-analitika-pregled .vs-analitika a { pointer-events: none; }

/* Analitika: horizontalne trake (čitljive i na telefonu) */
.vs-analitika-trake { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.vs-analitika-trake li { display: grid; grid-template-columns: minmax(110px, 34%) 1fr auto; align-items: center; gap: 12px; font-size: .9rem; }
.vs-traka-naziv { color: var(--tekst-telo); font-weight: 600; line-height: 1.3; }
.vs-traka-staza { height: 10px; border-radius: 99px; background: #eef1f6; overflow: hidden; }
.vs-traka-staza > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #316bf3, #1e3a8a); }
.vs-traka-vrednost { min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; color: var(--tekst); }
@media (max-width: 520px) {
    .vs-analitika-trake li { grid-template-columns: 1fr auto; row-gap: 4px; }
    .vs-traka-staza { grid-column: 1 / -1; grid-row: 2; }
}
.vs-analitika .vs-metrike + .vs-analitika-trake { margin-top: 16px; }

/* ============================================================
   Kalkulatori: prelaz (cena kvadrata / stambeni kredit) + kalkulator kredita
   ============================================================ */
.kalk-tabovi { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px; background: var(--kartica-tiha); border: 1px solid var(--okvir); border-radius: 999px; max-width: 100%; overflow-x: auto; }
.kalk-tabovi a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; font-size: .88rem; font-weight: 700; color: var(--tekst-slabiji); white-space: nowrap; text-decoration: none; }
.kalk-tabovi a svg { width: 16px; height: 16px; }
.kalk-tabovi a:hover { color: var(--primarna); }
.kalk-tabovi a.aktivan { background: #fff; color: var(--primarna); box-shadow: var(--senka); }

.kredit-dva { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .kredit-dva { grid-template-columns: 1fr; } }
.kredit-po-m2 { margin-top: -8px; font-weight: 600; }
.kredit-prekidac { display: inline-flex; gap: 4px; padding: 4px; background: var(--kartica-tiha); border: 1px solid var(--okvir); border-radius: var(--radius-mali); }
.kredit-prekidac label { margin: 0; cursor: pointer; }
.kredit-prekidac input { position: absolute; opacity: 0; pointer-events: none; }
.kredit-prekidac span { display: block; padding: 8px 16px; border-radius: 6px; font-size: .88rem; font-weight: 700; color: var(--tekst-slabiji); }
.kredit-prekidac input:checked + span { background: #fff; color: var(--primarna); box-shadow: var(--senka); }
.kredit-prekidac input:focus-visible + span { outline: 2px solid var(--primarna); outline-offset: 1px; }
.kredit-prekidac-mali span { padding: 6px 12px; font-size: .82rem; }

.kredit-troskovi { border: 1px solid var(--okvir); border-radius: var(--radius-mali); background: var(--kartica-tiha); }
.kredit-troskovi summary { cursor: pointer; padding: 12px 14px; font-weight: 700; font-size: .9rem; color: var(--tekst); }
.kredit-troskovi summary span { display: block; font-size: .76rem; font-weight: 500; color: var(--tekst-slabiji); margin-top: 2px; }
.kredit-troskovi-telo { padding: 4px 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.kredit-troskovi-telo input[type=number] { background: #fff; }
.kredit-grupa { margin: 6px 0 0; font-size: .74rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--tekst-slabiji); }

.kredit-rezultat { display: flex; flex-direction: column; gap: 18px; }
.kredit-rata { padding: 18px 20px; border-radius: var(--radius-mali); background: var(--primarna); color: #fff; }
.kredit-rata span { display: block; font-size: .82rem; font-weight: 700; opacity: .85; }
.kredit-rata strong { display: block; font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.kredit-rata small { display: block; font-size: .8rem; opacity: .85; min-height: 1em; }
.kredit-mreza { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.kredit-mreza div { padding: 12px 14px; border: 1px solid var(--okvir); border-radius: var(--radius-mali); }
.kredit-mreza dt { font-size: .76rem; font-weight: 600; color: var(--tekst-slabiji); }
.kredit-mreza dd { margin: 2px 0 0; font-size: 1.05rem; font-weight: 800; color: var(--tekst); }
.kredit-odmah { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--radius-mali); background: var(--sekundarna-bg); }
.kredit-odmah span { display: block; font-weight: 800; color: var(--tekst); }
.kredit-odmah small { display: block; font-size: .76rem; color: var(--tekst-slabiji); }
.kredit-odmah strong { font-size: 1.2rem; font-weight: 800; color: var(--primarna); white-space: nowrap; }
.kredit-porezi { display: flex; flex-direction: column; gap: 12px; }
.kredit-porezi h2 { font-size: 1.05rem; margin: 0; }
.kredit-lista { margin: 0; display: flex; flex-direction: column; }
.kredit-lista div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--okvir); }
.kredit-lista dt { font-size: .88rem; color: var(--tekst-telo); }
.kredit-lista dd { margin: 0; font-weight: 800; white-space: nowrap; }

.kredit-plan { padding: 26px 28px; }
.kredit-plan-vrh { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.kredit-plan-vrh h2 { margin-bottom: 4px; }
.kredit-plan-vrh .podnaslov { margin: 0; }
.kredit-tabela-omot { max-height: 460px; overflow: auto; border: 1px solid var(--okvir); border-radius: var(--radius-mali); }
.kredit-tabela { width: 100%; border-collapse: collapse; font-size: .86rem; font-variant-numeric: tabular-nums; }
.kredit-tabela th { position: sticky; top: 0; background: var(--kartica-tiha); text-align: right; padding: 10px 12px; font-size: .76rem; font-weight: 800; color: var(--tekst-slabiji); border-bottom: 1px solid var(--okvir); }
.kredit-tabela td { text-align: right; padding: 8px 12px; border-bottom: 1px solid var(--okvir); white-space: nowrap; }
.kredit-tabela th:first-child, .kredit-tabela td:first-child { text-align: left; }
.kredit-tabela tbody tr:nth-child(12n) td { border-bottom-color: #cbd5e1; }
.kredit-pdf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.kredit-pdf .btn { display: inline-flex; align-items: center; gap: 8px; }
.kredit-pdf .btn svg { width: 16px; height: 16px; }
.kredit-pdf .btn:disabled { opacity: .6; cursor: default; }
.kredit-pdf .kalkulator-pomoc { flex: 1 1 260px; }
@media (max-width: 600px) { .kredit-plan { padding: 20px; } .kredit-mreza { grid-template-columns: 1fr; } }

/* Link sa oglasa ka detaljnom obračunu kredita */
.og-kalk-link { display: inline-block; margin-top: 8px; font-size: .86rem; font-weight: 700; color: var(--primarna); }
.cta-analiticka-link { display: inline-block; margin-left: 14px; font-size: .9rem; font-weight: 700; color: #fff; opacity: .9; text-decoration: underline; text-underline-offset: 3px; }
.cta-analiticka-link:hover { opacity: 1; color: #fff; }
@media (max-width: 600px) { .cta-analiticka-link { display: block; margin: 12px 0 0; } }

/* ============================================================
   Prijava i registracija — kartica sa formom + bočni panel, vidljivo bez skrolovanja
   ============================================================ */
.auth-strana { min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); display: flex; align-items: center; justify-content: center; padding: 24px 16px 32px; }
.auth-kartica { width: 100%; max-width: 980px; display: grid; grid-template-columns: 340px minmax(0, 1fr); background: #fff; border: 1px solid var(--okvir); border-radius: var(--radius-veliki, 16px); box-shadow: 0 18px 50px rgba(15, 23, 42, .08); overflow: hidden; }
.auth-forma-strana { padding: 36px 48px; display: flex; flex-direction: column; justify-content: center; }
.auth-forma-strana > * { width: 100%; max-width: 500px; margin-left: auto; margin-right: auto; }

.auth-tabovi { display: flex; gap: 4px; padding: 4px; margin-bottom: 22px; background: var(--kartica-tiha); border: 1px solid var(--okvir); border-radius: 12px; }
.auth-tabovi a { flex: 1; text-align: center; padding: 9px 12px; border-radius: 9px; font-size: .9rem; font-weight: 700; color: var(--tekst-slabiji); text-decoration: none; }
.auth-tabovi a:hover { color: var(--primarna); }
.auth-tabovi a.aktivan { background: #fff; color: var(--primarna); box-shadow: 0 1px 3px rgba(15, 23, 42, .1); }

.auth-google { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 16px; border: 1px solid var(--okvir); border-radius: 10px; background: #fff; font-weight: 700; font-size: .92rem; color: var(--tekst); text-decoration: none; }
.auth-google:hover { background: var(--kartica-tiha); }
.auth-google svg { width: 18px; height: 18px; }
.auth-razdvajac { display: flex; align-items: center; gap: 12px; margin: 16px auto; font-size: .8rem; color: var(--tekst-slabiji); }
.auth-razdvajac::before, .auth-razdvajac::after { content: ""; flex: 1; height: 1px; background: var(--okvir); }

.auth-naslov { font-size: clamp(1.5rem, 2.2vw, 1.85rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 0 auto 6px; color: var(--tekst); }
.auth-podnaslov { color: var(--tekst-slabiji); font-size: .94rem; line-height: 1.55; margin: 0 auto 20px; }
.auth-forma { display: flex; flex-direction: column; gap: 14px; }
.auth-polje { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.auth-polje label { font-size: .86rem; font-weight: 700; color: var(--tekst); }
.auth-polje label span { font-weight: 500; color: var(--tekst-slabiji); margin-left: 4px; }
.auth-label-red { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.auth-label-red a { font-size: .8rem; font-weight: 600; }
.auth-polje input { width: 100%; padding: 11px 14px; border: 1px solid var(--okvir); border-radius: 10px; background: var(--kartica-tiha); font: inherit; font-size: 1rem; color: var(--tekst); transition: border-color .15s, box-shadow .15s, background .15s; }
.auth-polje input:focus { outline: none; background: #fff; border-color: var(--primarna); box-shadow: 0 0 0 3px rgba(30, 58, 138, .14); }
.auth-lozinka { position: relative; }
.auth-lozinka input { padding-right: 44px; }
.auth-oko { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 0; background: none; border-radius: 8px; color: var(--tekst-slabiji); cursor: pointer; }
.auth-oko:hover { color: var(--tekst); background: rgba(15, 23, 42, .05); }
.auth-oko svg { width: 18px; height: 18px; }
.auth-dva { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.auth-jacina { display: flex; align-items: center; gap: 10px; margin-top: -4px; font-size: .78rem; color: var(--tekst-slabiji); }
.auth-jacina-traka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 120px; flex-shrink: 0; }
.auth-jacina-traka i { height: 5px; border-radius: 99px; background: var(--okvir); transition: background .2s; }
.auth-jacina[data-nivo="1"] i:nth-child(-n+1) { background: var(--greska); }
.auth-jacina[data-nivo="2"] i:nth-child(-n+2) { background: #f59e0b; }
.auth-jacina[data-nivo="3"] i:nth-child(-n+3) { background: var(--primarna); }
.auth-jacina[data-nivo="4"] i { background: var(--uspesno); }

.auth-cek { display: flex; align-items: flex-start; gap: 10px; font-size: .86rem; color: var(--tekst-telo); line-height: 1.5; cursor: pointer; }
.auth-cek input { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; accent-color: var(--primarna); }
.auth-dugme { width: 100%; padding: 13px 18px; font-size: .98rem; border-radius: 10px; margin-top: 2px; }
.auth-napomena { margin: -4px 0 0; font-size: .8rem; color: var(--tekst-slabiji); text-align: center; }
.auth-prelaz { margin: 18px auto 0; text-align: center; font-size: .9rem; color: var(--tekst-slabiji); }
.auth-prelaz a { font-weight: 700; }

.auth-bocna { order: -1; position: relative; overflow: hidden; padding: 32px 26px; background: var(--primarna); color: #fff; display: flex; flex-direction: column; gap: 14px; }
.auth-bocna::before { content: ""; position: absolute; right: -90px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .07); pointer-events: none; }
.auth-bocna > * { position: relative; }
.auth-bocna-brend { align-self: flex-start; font-weight: 800; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: #fff; opacity: .8; text-decoration: none; padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 99px; }
.auth-bocna h2 { font-size: 1.2rem; line-height: 1.25; margin: 6px 0 0; color: #fff; }
.auth-bocna-uvod { margin: 0; font-size: .9rem; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.auth-bocna-lista { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.auth-bocna-lista li { display: flex; gap: 12px; align-items: flex-start; }
.auth-bocna-lista li > span { width: 34px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.auth-bocna-lista svg { width: 17px; height: 17px; }
.auth-bocna-lista strong { display: block; font-size: .9rem; color: #fff; }
.auth-bocna-lista p { margin: 2px 0 0; font-size: .82rem; line-height: 1.45; color: rgba(255, 255, 255, .75); }
.auth-bocna-dno { margin: auto 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .15); display: flex; align-items: center; gap: 8px; font-size: .8rem; color: rgba(255, 255, 255, .75); }
.auth-bocna-dno svg { width: 15px; height: 15px; flex-shrink: 0; }

@media (max-width: 860px) {
    .auth-strana { min-height: 0; align-items: flex-start; padding: 16px 12px 28px; }
    .auth-kartica { grid-template-columns: 1fr; }
    .auth-forma-strana { padding: 24px 20px; }
    .auth-bocna { order: 0; padding: 24px 20px; }
    .auth-bocna-uvod, .auth-bocna-lista p { display: none; }
}
@media (max-width: 480px) { .auth-dva { grid-template-columns: 1fr; } }

/* Prelaz prijava/registracija bez osvežavanja */
.auth-forma-strana { transition: opacity .15s ease; }
.auth-forma-strana.auth-ucitava { opacity: .45; pointer-events: none; }
@media (min-width: 861px) and (max-width: 1100px) { .auth-kartica { grid-template-columns: 290px minmax(0, 1fr); } .auth-forma-strana { padding: 32px 36px; } }

/* --- Vodič: dokumentacija kupca stana (kontrolna lista) --- */
.vk-strana { max-width: 860px; padding-top: 28px; padding-bottom: 56px; }
.vk-mrvice { font-size: .85rem; color: var(--tekst-slabiji); margin-bottom: 14px; }
.vk-zaglavlje h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 6px; }
.vk-podnaslov { color: var(--tekst-slabiji); margin: 0 0 12px; }
.vk-uvod { color: var(--tekst-telo); line-height: 1.6; margin: 0 0 16px; }
.vk-akcije { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.vk-napredak { font-weight: 700; font-size: .9rem; color: var(--primarna); }
.vk-sitno { font-size: .8rem; color: var(--tekst-slabiji); margin: 10px 0 0; }
.vk-faza { margin-top: 28px; }
.vk-faza h2 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin: 0 0 8px; }
.vk-faza h2 span { width: 28px; height: 28px; border-radius: 50%; background: var(--sekundarna-bg); color: var(--primarna); display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }
.vk-faza ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--okvir); border-radius: var(--radius); background: #fff; }
.vk-faza li { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--okvir); }
.vk-faza li:last-child { border-bottom: 0; }
.vk-faza input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; accent-color: var(--primarna); cursor: pointer; }
.vk-faza label { cursor: pointer; line-height: 1.45; }
.vk-faza label strong { color: var(--tekst); }
.vk-faza label em { font-style: normal; font-size: .75rem; color: var(--tekst-slabiji); margin-left: 6px; }
.vk-faza input:checked + label strong { text-decoration: line-through; color: var(--tekst-slabiji); }
.vk-zasto { display: block; font-size: .9rem; color: var(--tekst-telo); }
.vk-od { display: block; font-size: .8rem; color: var(--tekst-slabiji); margin-top: 2px; }
.vk-napomena { margin: 8px 0 0; padding: 10px 14px; border-radius: var(--radius-mali); background: var(--kartica-tiha); font-size: .88rem; color: var(--tekst-telo); }
.vk-odricanje { margin-top: 28px; font-size: .82rem; color: var(--tekst-slabiji); }
.vk-kraj { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* --- Admin analitika: levak, udeli (rizik × ishod), rang, napomene --- */
.an-period { margin: 0 0 -8px; }
.an-paznja { border-color: #fcd34d; background: #fffbeb; }
.an-paznja h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1rem; }
.an-paznja ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.an-paznja a { color: #0f172a; }
.an-napomena h3 { margin: 0 0 8px; font-size: .95rem; }
.an-napomena ul, .an-napomena p { margin: 0; font-size: .86rem; color: #475569; line-height: 1.55; }
.an-napomena ul { padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.an-kartica-link { display: block; color: inherit; text-decoration: none; }
.an-kartica-link:hover .adm-metrika { border-color: #94a3b8; }
.an-desno { text-align: right; }
.an-levak { display: flex; flex-direction: column; gap: 10px; }
.an-levak-red { display: grid; grid-template-columns: minmax(140px, 1.3fr) 3fr 110px 130px; align-items: center; gap: 14px; }
.an-levak-naziv { font-size: .88rem; font-weight: 600; color: #0f172a; }
.an-levak-traka { height: 14px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
.an-levak-traka > div { height: 100%; background: #2a78d6; border-radius: 4px; }
.an-levak-broj { font-size: .88rem; text-align: right; }
.an-levak-broj span { color: #64748b; margin-left: 4px; }
.an-levak-pad { font-size: .8rem; color: #64748b; }
.an-legenda { display: flex; gap: 16px; font-size: .8rem; color: #475569; margin-bottom: 10px; }
.an-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.an-udeli { display: flex; flex-direction: column; gap: 10px; }
.an-udeo-red { display: grid; grid-template-columns: 150px 1fr 150px; align-items: center; gap: 14px; }
.an-udeo-naziv { font-size: .88rem; font-weight: 600; }
.an-udeo-naziv span, .an-udeo-broj span { display: block; font-size: .76rem; font-weight: 400; color: #64748b; }
.an-udeo-traka { display: flex; gap: 2px; height: 18px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
.an-udeo-broj { font-size: .86rem; text-align: right; }
.an-b-odobrena { background: #0ca30c; }
.an-b-odbijena { background: #d03b3b; }
.an-b-cekanje { background: #fab219; }
.an-rang { display: flex; flex-direction: column; gap: 8px; }
.an-rang-red { display: grid; grid-template-columns: minmax(150px, 1.2fr) 2fr 40px; align-items: center; gap: 12px; font-size: .86rem; }
.an-rang-red strong { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
    .an-levak-red { grid-template-columns: 1fr auto; }
    .an-levak-traka { grid-column: 1 / -1; order: 3; }
    .an-levak-pad { grid-column: 1 / -1; order: 4; }
    .an-udeo-red { grid-template-columns: 1fr auto; }
    .an-udeo-traka { grid-column: 1 / -1; order: 3; }
}

/* ============================================================
   Loader stranice — Temelj logo koji se puni odozdo nagore (SVG animacija, samo transform/opacity).
   Vidi se tek posle 300 ms, pa ga brze stranice ne prikažu.
   ============================================================ */
.tl-loader {
    position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
    background: #fff; color: #1e3a8a;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s;
}
html.tl-ucitava .tl-loader, html.tl-navigacija .tl-loader {
    visibility: visible; pointer-events: auto; transition: opacity .22s ease .3s, visibility 0s linear .3s; opacity: 1;
}
.tl-logo { width: min(56vw, 300px); height: auto; overflow: visible; display: block; }
.tl-duh { fill: none; stroke: #1e3a8a; stroke-opacity: .22; stroke-width: 1.6; stroke-linejoin: round; }
.tl-uspon, .tl-tacka, .tl-prsten, .tl-baza { animation: 2.1s infinite paused; }
html.tl-ucitava .tl-uspon, html.tl-navigacija .tl-uspon,
html.tl-ucitava .tl-tacka, html.tl-navigacija .tl-tacka,
html.tl-ucitava .tl-prsten, html.tl-navigacija .tl-prsten,
html.tl-ucitava .tl-baza, html.tl-navigacija .tl-baza { animation-play-state: running; }
.tl-uspon { animation-name: tl-uspon; }
.tl-tacka { fill: #1e3a8a; transform-box: fill-box; transform-origin: center; animation-name: tl-tacka; }
.tl-prsten { fill: none; stroke: #6f8fe0; stroke-width: 3; transform-box: fill-box; transform-origin: center; opacity: 0; animation-name: tl-prsten; }
.tl-prsten-b { animation-delay: .32s; }
.tl-baza { stroke: #1e3a8a; stroke-opacity: .28; stroke-width: 1.5; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation-name: tl-baza; }
@keyframes tl-uspon { 0% { transform: translateY(262px); animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
    48% { transform: translateY(0); animation-timing-function: linear; } 60% { transform: translateY(0); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    100% { transform: translateY(-262px); } }
@keyframes tl-tacka { 0%, 40% { transform: scale(1); } 48% { transform: scale(1.55); } 60% { transform: scale(.92); } 72%, 100% { transform: scale(1); } }
@keyframes tl-prsten { 0%, 44% { opacity: 0; transform: scale(1); } 48% { opacity: .8; } 100% { opacity: 0; transform: scale(14); } }
@keyframes tl-baza { 0% { stroke-dashoffset: 1200; } 45%, 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1200; } }

/* Slike dok se učitavaju: svetlo mesto koje blago pulsira, pa se slika pojavi */
img.tl-slika { background: #E8EDF5; color: transparent; animation: tl-puls 1.2s ease-in-out infinite; }
img { transition: opacity .25s ease; }
@keyframes tl-puls { 0%, 100% { background-color: #E8EDF5; } 50% { background-color: #F3F6FA; } }

@media (prefers-reduced-motion: reduce) {
    .tl-uspon, .tl-prsten, .tl-baza { animation: none !important; }
    .tl-uspon { transform: translateY(0); opacity: .25; }
    img.tl-slika { animation: none; }
}

/* Prosečna ocena: broj ocena i stanje „premalo ocena“ */
.inv-pouzdanost-broj { display: block; font-size: .7rem; color: var(--tekst-slabiji); }
.inv-pouzdanost strong.inv-premalo, .inv-ocena-kutija strong.inv-premalo { font-size: .95rem; font-weight: 700; color: var(--tekst-slabiji); }
.ocena-premalo { font-weight: 600; color: var(--tekst-slabiji); }
.ocena-nema, .ocena-broj-ocena { color: var(--tekst-slabiji); font-size: .85em; }
.footer-napomena { margin-top: 10px; font-size: .75rem; opacity: .7; line-height: 1.4; }
.rec-napomena { font-size: .72rem; color: var(--tekst-slabiji); margin: 8px 0 0; }

/* Logo (SVG): zaglavlje bez slogana, podnožje sa sloganom */
.logo-slika { display: block; height: 25px; width: auto; }
.logo-slika-footer { height: 52px; }
@media (max-width: 640px) { .logo-slika { height: 22px; } }

/* ==========================================================================
   Kako funkcioniše — tri koraka sa kratkom animacijom (public/assets/js/kako-funkcionise.js)
   Bez JS-a (ili uz prefers-reduced-motion) odmah se vidi završno stanje; početna
   stanja važe samo kad JS doda .kf-spremno. Animiraju se samo transform i opacity
   (osim boje broja u krugu).
   ========================================================================== */
.koraci { list-style: none; margin: 0; padding: 0; --kf-ease: cubic-bezier(0.22, 1, 0.36, 1); }
.korak-kartica:focus { outline: none; }
.korak-kartica:focus-visible { outline: 2px solid var(--primarna); outline-offset: 6px; border-radius: var(--radius); }
.kf-tekst h3 { font-size: 1.05rem; margin-bottom: 6px; }
.kf-tekst p { color: var(--tekst-slabiji); font-size: .92rem; max-width: 280px; margin: 0 auto; }

/* Mini-prikaz: unapred rezervisana visina (CLS = 0) */
.kf-scena {
    position: relative; height: 188px; margin: 18px auto 0; max-width: 300px; overflow: hidden; text-align: left;
    background: var(--kartica); border: 1px solid var(--okvir); border-radius: var(--radius); box-shadow: var(--senka-kartica);
    padding: 26px 12px 12px; font-size: .78rem; color: var(--tekst-telo); line-height: 1.35;
}
.kf-primer {
    position: absolute; top: 7px; left: 12px; font-size: .62rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--tekst-svetliji);
}
.kf-polje {
    display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--tekst); border-radius: 999px;
    padding: 8px 12px; font-size: .85rem; color: var(--tekst); white-space: nowrap; overflow: hidden;
}
.kf-polje svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--tekst-slabiji); }
.kf-caret { display: none; width: 1.5px; height: 1em; background: var(--tekst); margin-left: -6px; }
.kf-tipka .kf-caret { display: inline-block; }
.kf-rez, .kf-rec, .kf-forma { margin-top: 10px; }
.kf-rez, .kf-rec { background: var(--kartica-tiha); border: 1px solid var(--okvir); border-radius: var(--radius-mali); padding: 10px 12px; }
.kf-rez-vrh, .kf-rec-vrh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.kf-rez-vrh strong, .kf-rec-vrh strong { font-size: .82rem; color: var(--tekst); }
.kf-ocena { white-space: nowrap; font-weight: 800; color: var(--tekst); font-size: .8rem; }
.kf-ocena small { font-weight: 500; color: var(--tekst-slabiji); }
.kf-ocena .zvezdice { font-size: .8rem; letter-spacing: 1px; margin-right: 3px; }
.kf-cipovi { display: flex; flex-wrap: wrap; gap: 5px; }
.kf-chip { background: #f2f3ff; color: var(--primarna); border-radius: 999px; padding: 3px 9px; font-size: .7rem; font-weight: 700; }

.kf-zvezde { display: inline-flex; gap: 1px; font-size: .95rem; line-height: 1; }
.kf-zv { position: relative; color: #d8dee8; }
.kf-zv::after { content: "\2605"; position: absolute; left: 0; top: 0; color: var(--akcenat); opacity: 0; }
.kf-pun::after { opacity: 1; }
.kf-rec-tekst { margin: 0 0 9px; color: var(--tekst-telo); font-size: .76rem; }
.kf-pecat {
    display: inline-flex; align-items: center; gap: 5px; background: var(--uspesno-bg); color: #047857;
    border-radius: 999px; padding: 3px 10px 3px 7px; font-size: .7rem; font-weight: 800; transform-origin: left center;
}
.kf-pecat svg, .kf-dugme-b svg { width: 12px; height: 12px; flex-shrink: 0; }

.kf-forma { display: grid; gap: 8px; }
.kf-red { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--kartica-tiha); border: 1px solid var(--okvir); border-radius: var(--radius-mali); padding: 8px 10px; }
.kf-etiketa { font-size: .68rem; font-weight: 700; color: var(--tekst-slabiji); text-transform: uppercase; letter-spacing: .04em; }
.kf-unos { font-weight: 700; color: var(--tekst); font-size: .8rem; }
.kf-dugme { position: relative; border-radius: 999px; background: var(--primarna); color: #fff; font-weight: 800; font-size: .8rem; height: 34px; overflow: hidden; }
.kf-dugme-a, .kf-dugme-b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.kf-dugme-b { background: var(--info-bg); color: var(--primarna-tamna); }
.kf-dugme-a { opacity: 0; }

/* --- Početna stanja (samo kad je JS spreman) --- */
.kf-spremno .korak-broj { position: relative; z-index: 0; background: #fff; color: var(--tekst-slabiji); box-shadow: 0 0 0 1.5px var(--okvir), 0 0 0 6px var(--sekundarna-bg); transition: transform var(--kf-krug, 450ms) var(--kf-ease), color var(--kf-krug, 450ms) var(--kf-ease); }
.kf-spremno .korak-broj::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--primarna); opacity: 0; transition: opacity var(--kf-krug, 450ms) var(--kf-ease); z-index: -1; }
.kf-spremno .kf-aktivan .korak-broj { color: #fff; transform: scale(1.08); box-shadow: 0 0 0 6px var(--sekundarna-bg), 0 4px 14px rgba(30,58,138,.32); }
.kf-spremno .kf-aktivan .korak-broj::before { opacity: 1; }
.kf-spremno .kf-aktivan.kf-mirno .korak-broj { transform: scale(1); }
.kf-spremno .kf-scena:not(.kf-igra), .kf-spremno .kf-scena:not(.kf-igra) .kf-el { opacity: 0; }
.kf-spremno .kf-scena:not(.kf-igra) .kf-zv.kf-pun::after { opacity: 0; }
.kf-spremno .kf-scena:not(.kf-igra) .kf-dugme-a { opacity: 1; }
.kf-spremno .kf-scena:not(.kf-igra) .kf-dugme-b { opacity: 0; }

/* --- Scene: ulazi i kašnjenja (vrednosti dolaze iz JS konstanti kao --kf-* u ms) --- */
@keyframes kf-ulaz { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes kf-pecat { from { opacity: 0; transform: scale(1.45); } to { opacity: 1; transform: scale(1); } }
@keyframes kf-zvezda { from { opacity: 0; } to { opacity: 1; } }
@keyframes kf-klik { 0% { transform: scale(1); } 45% { transform: scale(.97); } 100% { transform: scale(1); } }
@keyframes kf-zameni-a { from { opacity: 1; } to { opacity: 0; } }
@keyframes kf-zameni-b { from { opacity: 0; } to { opacity: 1; } }

.kf-igra { animation: kf-ulaz var(--kf-ulaz, 500ms) var(--kf-ease) both; }
.kf-igra .kf-el { animation: kf-ulaz var(--kf-ulaz, 500ms) var(--kf-ease) both; }
.kf-scena-1.kf-igra .kf-polje { animation-delay: calc(var(--kf-s1-polje, 100) * 1ms); }
.kf-scena-1.kf-igra .kf-rez { animation-delay: calc(var(--kf-s1-rez, 1100) * 1ms); }
.kf-scena-1.kf-igra .kf-chip:nth-child(1) { animation-delay: calc(var(--kf-s1-chip, 1350) * 1ms); }
.kf-scena-1.kf-igra .kf-chip:nth-child(2) { animation-delay: calc((var(--kf-s1-chip, 1350) + var(--kf-chip-korak, 150)) * 1ms); }
.kf-scena-1.kf-igra .kf-chip:nth-child(3) { animation-delay: calc((var(--kf-s1-chip, 1350) + 2 * var(--kf-chip-korak, 150)) * 1ms); }
.kf-scena-2.kf-igra .kf-rec-1 { animation-delay: calc(var(--kf-s2-kartica, 0) * 1ms); }
.kf-scena-2.kf-igra .kf-zv.kf-pun::after { animation: kf-zvezda 260ms var(--kf-ease) both; animation-delay: calc((var(--kf-s2-zvezde, 350) + var(--i) * var(--kf-zvezda-korak, 130)) * 1ms); }
.kf-scena-2.kf-igra .kf-rec-2 { animation-delay: calc(var(--kf-s2-tekst, 800) * 1ms); }
.kf-scena-2.kf-igra .kf-rec-3 { animation: kf-pecat var(--kf-pecat, 380ms) var(--kf-ease) both; animation-delay: calc(var(--kf-s2-pecat, 1250) * 1ms); }
.kf-scena-3.kf-igra .kf-red:nth-child(1) { animation-delay: calc(var(--kf-s3-zvezde-ulaz, 80) * 1ms); }
.kf-scena-3.kf-igra .kf-zv.kf-pun::after { animation: kf-zvezda 260ms var(--kf-ease) both; animation-delay: calc((var(--kf-s3-zvezde, 300) + var(--i) * var(--kf-zvezda-korak, 130)) * 1ms); }
.kf-scena-3.kf-igra .kf-f-ps { animation-delay: calc(var(--kf-s3-pseudonim, 950) * 1ms); }
.kf-scena-3.kf-igra .kf-f-dugme {
    animation-name: kf-ulaz, kf-klik; animation-duration: var(--kf-ulaz, 500ms), 240ms;
    animation-timing-function: var(--kf-ease), var(--kf-ease); animation-fill-mode: both, none;
    animation-delay: calc(var(--kf-s3-dugme, 1150) * 1ms), calc(var(--kf-s3-klik, 1500) * 1ms);
}
.kf-scena-3.kf-igra .kf-dugme-a { opacity: 1; animation: kf-zameni-a 260ms var(--kf-ease) both; animation-delay: calc((var(--kf-s3-klik, 1500) + 120) * 1ms); }
.kf-scena-3.kf-igra .kf-dugme-b { animation: kf-zameni-b 320ms var(--kf-ease) both; animation-delay: calc((var(--kf-s3-klik, 1500) + 120) * 1ms); }

/* --- Linija između krugova: crta se sleva nadesno (desktop) --- */
@media (min-width: 760px) {
    .kf-spremno .koraci::before { transform-origin: left center; transform: scaleX(var(--kf-linija, 0)); transition: transform var(--kf-linija-ms, 700ms) var(--kf-ease); }
}

/* --- Mobilni: koraci jedan ispod drugog, vertikalna linija levo --- */
@media (max-width: 759px) {
    .koraci { gap: 36px; }
    .korak-kartica { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; text-align: left; align-items: start; }
    .korak-kartica .korak-broj { margin: 0; grid-row: 1 / span 2; }
    .kf-tekst p { max-width: none; margin: 0; }
    .kf-scena { grid-column: 2; margin: 14px 0 0; max-width: none; }
    .korak-kartica:not(:last-child)::after {
        content: ""; position: absolute; left: 23px; top: 54px; bottom: -30px; width: 2px;
        background: repeating-linear-gradient(180deg, var(--okvir) 0, var(--okvir) 8px, transparent 8px, transparent 16px); z-index: -1;
        transform-origin: top center;
    }
    .kf-spremno .korak-kartica:not(:last-child)::after { transform: scaleY(0); transition: transform var(--kf-linija-ms, 700ms) var(--kf-ease); }
    .kf-spremno .korak-kartica.kf-linija:not(:last-child)::after { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .kf-igra, .kf-igra *, .kf-spremno .korak-broj, .kf-spremno .korak-broj::before, .koraci::before, .koraci li::after { animation: none !important; transition: none !important; }
}

/* Desktop: mini-prikazi u istoj ravni (kartice iste visine, tekst zauzima preostalo, scena na dnu) */
@media (min-width: 760px) {
    .koraci { align-items: stretch; }
    .korak-kartica { display: flex; flex-direction: column; }
    .korak-kartica .kf-tekst { flex: 1 1 auto; }
    .korak-kartica .kf-scena { width: 100%; margin-top: 18px; flex: 0 0 auto; }
}

/* ==========================================================================
   Česta pitanja: uputstva u pokretu (public/assets/js/uputstva.js).
   Jedan kadar („svet“ 560×380) i kamera koja zumira; markup je u završnom stanju,
   a početna stanja važe samo dok traje animacija (.up-anim). Animiraju se transform i opacity.
   ========================================================================== */
.up-pitanje { margin-bottom: 8px; }
.up-uputstvo { margin: 14px 0 6px; max-width: 520px; }
.up-stage {
    --osnova: .93; position: relative; aspect-ratio: 560 / 380; overflow: hidden;
    border: 1px solid var(--okvir); border-radius: var(--radius); background: #e8edf5; box-shadow: var(--senka-kartica);
}
@media (max-width: 640px) { .up-stage { --osnova: .62; } }
.up-primer {
    position: absolute; top: 8px; left: 12px; z-index: 30; font-size: .62rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--tekst-slabiji); background: rgba(255,255,255,.85); border-radius: 999px; padding: 2px 8px;
}
.up-svet {
    position: absolute; left: 0; top: 0; width: 560px; height: 380px; transform-origin: 0 0; transform: scale(var(--osnova));
    transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); font-size: 13px; line-height: 1.35; color: var(--tekst-telo);
}
.up-karta {
    position: absolute; left: 20px; top: 16px; width: 520px; display: flex; flex-direction: column; gap: 8px;
    background: #fff; border: 1px solid var(--okvir); border-radius: 14px; padding: 16px 18px; box-shadow: 0 8px 24px rgba(15,23,42,.08);
}
.up-h { font-weight: 800; color: var(--tekst); font-size: 15px; }
.up-etiketa { font-size: 11px; font-weight: 700; color: var(--tekst-slabiji); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.up-red .up-etiketa { margin: 0; }
.up-pol {
    position: relative; border: 1.5px solid var(--okvir); border-radius: 10px; padding: 7px 12px; min-height: 34px; background: #fff; color: var(--tekst);
    transition: border-color 200ms, box-shadow 200ms;
}
.up-pol.is { border-color: var(--primarna); box-shadow: 0 0 0 3px rgba(30,58,138,.22); }
.up-drop {
    position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 5; padding: 4px; background: #fff;
    border: 1px solid var(--okvir); border-radius: 10px; box-shadow: var(--senka-hover);
    opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 250ms, transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
.up-drop.is { opacity: 1; transform: none; }
.up-stavka { padding: 6px 9px; border-radius: 7px; font-weight: 600; color: var(--tekst); }
.up-stavka.is { background: #f2f3ff; }
.up-ocene { display: grid; gap: 6px; }
.up-red { display: flex; align-items: center; justify-content: space-between; padding: 4px 12px; background: var(--kartica-tiha); border: 1px solid var(--okvir); border-radius: 10px; }
.up-red .kf-zvezde, .up-rec .kf-zvezde, .up-prosek .kf-zvezde { font-size: 19px; gap: 3px; }
.up-svet .kf-zv::after { transition: opacity 200ms; }
.up-svet .kf-zv.is::after { opacity: 1; }
.up-tekst-polje { display: grid; gap: 5px; padding: 8px 12px; border: 1.5px solid var(--okvir); border-radius: 10px; }
.up-fill, .up-linije i { display: block; height: 8px; border-radius: 4px; background: #cfd7e6; width: 100%; transform-origin: left center; transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1); }
.up-linije { display: grid; gap: 6px; }
.up-anim .up-fill:not(.is) { transform: scaleX(0); }
.up-svet .kf-dugme { height: 40px; font-size: 14px; }
.up-svet .kf-dugme-a { opacity: 1; transition: opacity 260ms; }
.up-svet .kf-dugme-b { opacity: 0; transition: opacity 320ms; }
.up-svet .kf-dugme.is .kf-dugme-a { opacity: 0; }
.up-svet .kf-dugme.is .kf-dugme-b { opacity: 1; }
.up-svet .kf-dugme-b svg { width: 14px; height: 14px; }

/* Kursor i talas pri kliku */
.up-kursor { position: absolute; left: 0; top: 0; z-index: 40; width: 22px; height: 22px; opacity: 0; pointer-events: none; transform: translate(520px, 20px); transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 250ms; }
.up-kursor.is { opacity: 1; }
.up-kursor::after { content: ""; position: absolute; left: -9px; top: -9px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--primarna); opacity: 0; }
.up-kursor.klik::after { animation: up-klik 420ms ease-out; }
@keyframes up-klik { from { opacity: .75; transform: scale(.4); } to { opacity: 0; transform: scale(1.9); } }

/* Prijava sadržaja */
.up-karta-rec { gap: 10px; }
.up-rec-vrh { display: flex; align-items: center; justify-content: space-between; color: var(--tekst); }
.up-rec-vrh .kf-zvezde { font-size: 19px; gap: 3px; }
.up-link { font-size: 13px; font-weight: 700; color: var(--primarna); text-decoration: underline; text-underline-offset: 2px; }
.up-modal {
    position: absolute; left: 90px; top: 22px; width: 380px; z-index: 10; display: flex; flex-direction: column; gap: 8px; padding: 16px;
    background: #fff; border: 1px solid var(--okvir); border-radius: 14px; box-shadow: 0 24px 48px rgba(15,23,42,.28);
    opacity: 0; transform: translateY(10px) scale(.98); pointer-events: none; transition: opacity 350ms, transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.up-modal.is { opacity: 1; transform: none; }
.up-toast {
    position: absolute; left: 80px; right: 80px; bottom: 24px; z-index: 12; display: flex; align-items: center; gap: 8px; padding: 12px 14px;
    background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; border-radius: 12px; font-weight: 700;
    opacity: 0; transform: translateY(8px); transition: opacity 350ms, transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.up-toast.is { opacity: 1; transform: none; }
.up-toast svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Premalo ocena */
.up-karta-inv { gap: 10px; }
.up-inv-vrh { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--tekst); font-size: 15px; }
.up-ocbox { position: relative; display: inline-block; min-width: 190px; text-align: right; font-weight: 700; }
.up-nema { color: var(--tekst-slabiji); transition: opacity 300ms; }
.up-prosek { position: absolute; right: 0; top: 50%; margin-top: -12px; white-space: nowrap; opacity: 0; transition: opacity 300ms; display: inline-flex; align-items: center; gap: 4px; }
.up-prosek small { font-weight: 500; color: var(--tekst-slabiji); }
.up-ocbox.is .up-nema { opacity: 0; }
.up-ocbox.is .up-prosek { opacity: 1; }
.up-rec { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--kartica-tiha); border: 1px solid var(--okvir); border-radius: 10px; color: var(--tekst); opacity: 0; transform: translateY(8px); transition: opacity 400ms, transform 400ms cubic-bezier(0.22, 1, 0.36, 1); }
.up-rec.is { opacity: 1; transform: none; }
.up-rec strong { min-width: 110px; }
.up-linije-red { flex: 1; }

.up-kontrole { display: flex; justify-content: flex-end; min-height: 34px; margin-top: 6px; }
.up-ponovo { background: none; border: 1px solid var(--okvir); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .85rem; font-weight: 600; color: var(--primarna); cursor: pointer; }
.up-ponovo:hover { border-color: var(--primarna); }
.up-ponovo:focus-visible { outline: 2px solid var(--primarna); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .up-svet, .up-svet * { transition: none !important; animation: none !important; } }

/* --- Kratko pitanje gostu ("Šta vas dovodi?") — lagana kartica dole desno, ne blokira stranicu --- */
.pitanje-posetioca {
    position: fixed; right: 16px; bottom: 16px; z-index: 90; width: 320px; max-width: calc(100vw - 32px);
    background: var(--kartica); color: var(--tekst); border: 1px solid var(--okvir); border-radius: var(--radius);
    box-shadow: 0 10px 32px rgba(15,23,42,.18); padding: 16px; display: flex; flex-direction: column; gap: 8px;
}
.pitanje-posetioca[hidden] { display: none; }
/* Ulaz: blago klizanje i pojavljivanje; izlaz: brže i tiše */
.pitanje-posetioca {
    opacity: 0; transform: translateY(14px) scale(.98); transform-origin: bottom right; pointer-events: none;
    transition: opacity .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.pitanje-posetioca.prikazana {
    opacity: 1; transform: none; pointer-events: auto;
    transition: opacity .6s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}
.pitanje-posetioca > * { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.pitanje-posetioca.prikazana > * { opacity: 1; transform: none; }
.pitanje-posetioca.prikazana > :nth-child(2) { transition-delay: .12s; }
.pitanje-posetioca.prikazana > :nth-child(3) { transition-delay: .18s; }
.pitanje-posetioca.prikazana > :nth-child(4) { transition-delay: .24s; }
.pitanje-posetioca.prikazana > :nth-child(5) { transition-delay: .30s; }
.pitanje-opcija { transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.pitanje-opcija:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) {
    .pitanje-posetioca, .pitanje-posetioca > * { transition: opacity .2s ease !important; transform: none !important; transition-delay: 0s !important; }
}
.pitanje-naslov { font-size: .98rem; padding-right: 28px; }
.pitanje-zatvori { position: absolute; top: 8px; right: 10px; background: none; border: 0; font-size: 1.4rem; line-height: 1; color: var(--tekst-slabiji); cursor: pointer; padding: 4px 8px; }
.pitanje-opcija {
    display: flex; flex-direction: column; gap: 2px; text-align: left; text-decoration: none; cursor: pointer;
    border: 1px solid var(--okvir); border-radius: var(--radius-mali); background: var(--kartica-tiha); color: var(--tekst);
    padding: 10px 12px; font: inherit; font-weight: 600; font-size: .9rem;
}
.pitanje-opcija small { font-weight: 400; color: var(--tekst-slabiji); font-size: .78rem; }
.pitanje-opcija:hover { border-color: var(--primarna); }
.pitanje-opcija-glavna { background: var(--primarna); border-color: var(--primarna); color: #fff; }
.pitanje-opcija-glavna small { color: rgba(255,255,255,.8); }
.pitanje-opcija-glavna:hover { background: var(--primarna-tamna); }
@media (max-width: 640px) { .pitanje-posetioca { left: 16px; right: 16px; width: auto; } }

/* --- Deljenje posle slanja recenzije --- */
.deli-kartica { margin-top: 24px; padding: 18px; border: 1px solid var(--okvir); border-radius: var(--radius); background: var(--kartica-tiha); text-align: left; }
.deli-kartica h2 { font-size: 1.05rem; margin: 0 0 6px; }
.deli-kartica p { margin: 0 0 12px; color: var(--tekst-telo); font-size: .92rem; }
.deli-dugmad { display: flex; flex-wrap: wrap; gap: 8px; }
.deli-dugmad .btn { flex: 1 1 130px; text-align: center; justify-content: center; }
.deli-status { margin: 8px 0 0; font-size: .85rem; color: var(--uspesno); min-height: 1.2em; }