/* nekretnine/assets/nk4.css - violet redizajn liste oglasa (Claude Design v4 violet, 02.09.2026.)
   Vrijedi SAMO za index (lista); oglas/predaja/karta i dalje koriste nk.css. */

.nk4-wrap { max-width: 1400px; margin: 0 auto; padding: 18px clamp(14px, 3vw, 32px) 96px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: #1A1533; }
.nk4-wrap a { text-decoration: none; }

/* --- svijetlo zaglavlje (Petra 02.09.: bez ljubicastog heroja, filtri u prvom planu) --- */
.nk4-zaglavlje { display: flex; flex-direction: column; gap: 16px; padding: 22px 0 24px; }
.nk4-zag-red { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; }
.nk4-zaglavlje h1 { margin: 0 0 6px; font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.04em; color: #1A1533; }
.nk4-zag-uvod { margin: 0; font-size: 15px; color: #6B6280; max-width: 640px; line-height: 1.55; }
.nk4-zag-uvod .nk4-k { width: 18px; height: 18px; font-size: 11px; border-radius: 5px; vertical-align: -3px; }
.nk4-zag-stat { margin: 0; font-size: 13.5px; color: #6B6280; white-space: nowrap; }
.nk4-zag-stat b { color: #1A1533; }
.nk4-select { border: 1px solid #E9E5F5; border-radius: 11px; padding: 11px; font-size: 14px; outline: none;
  background: #FBF9FF; color: #1A1533; cursor: pointer; font-family: inherit; width: 100%; }

/* pravo K iz logotipa (Petra 02.09.: ne bijelo slovo u kvadratu) */
.nk4-k-img { display: inline-block; width: 18px; height: auto; vertical-align: -3px; }
.nk4-zn-prov .nk4-k-img { width: 16px; vertical-align: middle; }
.nk4-promo-k { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 9px; background: #fff; align-self: flex-start; }

/* mobilni toggle filtera */
.nk4-filtri-toggle { display: none; width: 100%; padding: 13px 16px; border: 1px solid #E9E5F5;
  border-radius: 14px; background: #fff; font-size: 15px; font-weight: 700; color: #1A1533;
  cursor: pointer; font-family: inherit; text-align: left; }
.nk4-filtri-toggle i { float: right; font-style: normal; font-size: 13px; font-weight: 500; color: #2E3190; }
@media (max-width: 979px) {
  .nk4-filtri-toggle { display: block; }
  .nk4-bok .nk4-filtri { display: none; }
  .nk4-bok.otvoreno .nk4-filtri { display: flex; }
  /* MINI trazilica u JEDNOM redu (Petra 02.09.): lupa + polje + Pretrazi; vrsta seli u filtere.
     .nk4-wrap prefiks NUZAN - osnovna pravila su NIZE u datoteci pa bi inace pobijedila. */
  .nk4-wrap .nk4-trazi { padding: 6px; border-radius: 999px; flex-wrap: nowrap; }
  .nk4-wrap .nk4-trazi-polje { flex: 1 1 auto; min-width: 0; padding-left: 12px;
    border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
  .nk4-wrap .nk4-trazi-polje input { font-size: 14px; padding: 8px 0; }
  .nk4-wrap .nk4-trazi select { display: none; }
  .nk4-wrap .nk4-trazi button { padding: 9px 18px; font-size: 14px; flex: 0 0 auto; white-space: nowrap; }
  /* GENERALNO STISNUTO: bez naslova/uvoda, manji razmaci */
  .nk4-wrap .nk4-zaglavlje { gap: 10px; padding: 8px 0 10px; }
  .nk4-wrap .nk4-zag-red { display: none; }
  .nk4-wrap .nk4-mreza { gap: 10px; }
  .nk4-wrap .nk4-glavno { gap: 10px; }
  .nk4-wrap .nk4-bok { gap: 10px; }
  /* stari toggle zamijenjen mobilnim redom Filtriraj + Sortiraj */
  .nk4-wrap .nk4-filtri-toggle { display: none; }
  .nk4-wrap .nk4-mob-red { display: flex; gap: 8px; }
  .nk4-wrap .nk4-rezultati { gap: 6px 12px; }
  .nk4-wrap .nk4-rezultati > span { font-size: 12.5px; color: #9E9AB4; }
  .nk4-wrap .nk4-rezultati select { display: none; }
  /* Booking-stil alatni red (Petra 05.09.2026.): tri ravna alata, bez pill gumba */
  .nk4-wrap .nk4-mob-red { display: flex; gap: 0; align-items: stretch; border-top: 1px solid #E9E5F5; border-bottom: 1px solid #E9E5F5; }
  .nk4-wrap .nk4-mob-alat { flex: 1 1 0; min-width: 0; position: relative; display: inline-flex; align-items: center; justify-content: center;
    gap: 7px; padding: 12px 4px; margin: 0; background: none; border: 0; border-radius: 0; font: inherit; font-size: 15px; font-weight: 700;
    color: #1A1533; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .nk4-wrap .nk4-mob-alat + .nk4-mob-alat { border-left: 1px solid #E9E5F5; }
  .nk4-wrap .nk4-mob-ik { position: relative; display: inline-flex; color: #2E3190; }
  .nk4-wrap .nk4-mob-ik svg { width: 20px; height: 20px; }
  .nk4-wrap .nk4-mob-tocka { position: absolute; top: -2px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: #E0245E; border: 1.5px solid #fff; }
  .nk4-wrap .nk4-mob-sort-w .nk4-mob-sort { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; }
  .nk4-wrap .nk4-karta-l { display: none; }
  .nk4-wrap .nk4-rezultati { justify-content: space-between; align-items: center; }
  .nk4-wrap .nk4-mob-predaj-l { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px;
    background: #2E3190; color: #fff; font-size: 13px; font-weight: 700; }
  /* filteri PREKO CIJELOG EKRANA */
  .nk4-wrap .nk4-bok.otvoreno { display: block; position: fixed; inset: 0; z-index: 100000;
    background: #F7F5FB; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 14px 16px 28px; margin: 0; max-width: none; }
  .nk4-wrap .nk4-bok.otvoreno .nk4-filtri { display: flex; box-shadow: none; border: 1px solid #E9E5F5; }
  .nk4-wrap .nk4-bok.otvoreno .nk4-promo { display: none; }
  .nk4-bok.otvoreno .nk4-overlay-zatvori { display: inline-flex; }
  .nk4-zag-stat { white-space: normal; }
  /* gradski cipovi ne trebaju na mobitelu (pojacana specificnost - osnovno pravilo je NIZE u datoteci) */
  .nk4-wrap .nk4-gradovi { display: none; }
  /* karta gumb pune sirine */
  .nk4-karta-l { flex: 1 1 100%; justify-content: center; padding: 12px 16px; font-weight: 700;
    color: #2E3190; border-color: #C9CBEC; }
}

/* --- hero: puna sirina ekrana (vise se ne koristi na listi, ostavljeno za druge stranice) --- */
.nk4-hero { position: relative; overflow: hidden; background: #6E56F8; border-radius: 0;
  margin: 0 calc(50% - 50vw) 26px; padding: clamp(34px, 4.5vw, 60px) clamp(16px, 3vw, 32px) clamp(38px, 5vw, 64px); }
.nk4-hero-nutra { max-width: 1400px; margin: 0 auto; }
.nk4-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 90% at 84% 2%, rgba(255,255,255,.20), transparent 60%); }
.nk4-hero-nutra { position: relative; display: flex; flex-direction: column; gap: 24px; }
.nk4-wrap { padding-top: 0; }
.nk4-hero-red { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px 40px; }
.nk4-hero-lijevo { min-width: 0; flex: 1 1 440px; }
.nk4-pill { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 6px;
  border-radius: 999px; background: #fff; border: 1px solid rgba(34,36,110,.16); margin-bottom: 16px;
  box-shadow: 0 8px 20px -14px rgba(26,21,51,.5); }
.nk4-k { width: 24px; height: 24px; border-radius: 7px; background: #2E3190; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex: none; }
.nk4-pill span { font-size: 13.5px; color: #22246E; font-weight: 600; }
.nk4-hero h1 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -.045em;
  margin: 0 0 12px; color: #fff; font-weight: 800; }
.nk4-hero-uvod { margin: 0; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: #E4DEFF; max-width: 540px; }
.nk4-hero-uvod strong { color: #fff; font-weight: 700; }
.nk4-statovi { display: flex; gap: 12px; flex: none; flex-wrap: wrap; }
.nk4-stat { padding: 14px 18px; border-radius: 16px; min-width: 104px; }
.nk4-stat b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.035em; }
.nk4-stat span { display: block; font-size: 12.5px; margin-top: 2px; }
.nk4-stat-plavi { background: #2E3190; box-shadow: 0 10px 26px -18px rgba(46,49,144,.9); }
.nk4-stat-plavi b { color: #fff; } .nk4-stat-plavi span { color: #C3C6EE; }
.nk4-stat-zeleni { background: #0E9F6E; box-shadow: 0 10px 26px -18px rgba(14,159,110,.9); }
.nk4-stat-zeleni b { color: #fff; } .nk4-stat-zeleni span { color: #D6F5E6; }
.nk4-stat-bijeli { background: #fff; box-shadow: 0 10px 26px -18px rgba(26,21,51,.6); }
.nk4-stat-bijeli b { color: #1A1533; } .nk4-stat-bijeli span { color: #6B6280; }

/* traka pretrage */
.nk4-trazi { display: flex; flex-wrap: wrap; gap: 8px; background: #fff; border-radius: 999px; padding: 8px;
  border: 1px solid #E9E5F5; box-shadow: 0 14px 34px -26px rgba(26,21,51,.5); position: relative; }
.nk4-trazi-polje { display: flex; align-items: center; gap: 11px; flex: 1 1 300px; min-width: 0; padding-left: 16px; }
.nk4-trazi-polje svg { flex: none; }
.nk4-trazi-polje input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; font-size: 16px;
  padding: 13px 0; color: #1A1533; background: transparent; font-family: inherit; }
.nk4-trazi select { flex: 0 1 180px; border: 1px solid #E9E5F5; border-radius: 999px; padding: 13px 16px;
  font-size: 15px; color: #1A1533; background: #FBF9FF; outline: none; cursor: pointer; font-family: inherit; }
.nk4-trazi button { flex: 0 0 auto; padding: 14px 32px; border: 0; border-radius: 999px; background: #2E3190;
  color: #fff; font-weight: 700; font-size: 15.5px; cursor: pointer; font-family: inherit; }
.nk4-trazi button:hover { background: #22246E; }
@media (max-width: 720px) { .nk4-trazi { border-radius: 22px; } }

/* gradski cipovi */
.nk4-gradovi { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.nk4-gradovi::-webkit-scrollbar { display: none; }
.nk4-gradovi a { flex: none; padding: 9px 16px; border-radius: 999px; border: 1px solid #E9E5F5;
  background: #fff; color: #403A57; font-size: 14px; font-weight: 500; white-space: nowrap; position: relative; }
.nk4-gradovi a small { color: #9E9AB4; font-size: 12px; }
.nk4-gradovi a.aktivan, .nk4-gradovi a:hover { background: #2E3190; color: #fff; border-color: #2E3190; }
.nk4-gradovi a.aktivan small, .nk4-gradovi a:hover small { color: #C3C6EE; }

/* --- raspored: filteri + lista --- */
.nk4-mreza { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; }
.nk4-bok { flex: 1 1 260px; min-width: 0; max-width: 320px; display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 84px; }
@media (max-width: 979px) { .nk4-bok { position: static; max-width: none; } }
.nk4-glavno { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.nk4-filtri { background: #fff; border-radius: 20px; padding: 20px;
  box-shadow: 0 1px 2px rgba(26,21,51,.04), 0 18px 40px -30px rgba(26,21,51,.5);
  display: flex; flex-direction: column; gap: 20px; }
.nk4-filtri-vrh { display: flex; align-items: center; justify-content: space-between; }
.nk4-filtri-vrh-desno { display: inline-flex; align-items: center; gap: 12px; }
/* mobilni alatni red - desktop ga ne vidi; Predaj pill uz broj oglasa isto */
.nk4-mob-red { display: none; }
.nk4-mob-predaj-l { display: none; }
.nk4-mob-gumb { flex: 1 1 0; min-width: 0; padding: 11px 12px; border: 1px solid #E9E5F5;
  border-radius: 999px; background: #fff; color: #1A1533; font-size: 14.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; text-align: center; appearance: none; -webkit-appearance: none; }
.nk4-mob-sort { text-align: center; text-align-last: center; }
/* X za zatvaranje fullscreen filtera - vidljiv samo kad je overlay otvoren */
.nk4-overlay-zatvori { display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 0; border-radius: 999px; background: #ECEDF9;
  color: #2E3190; cursor: pointer; }
html.nk4-bez-skrola { overflow: hidden; }
.nk4-filtri-vrh b { font-weight: 700; font-size: 16.5px; letter-spacing: -.02em; }
.nk4-filtri-vrh a { font-size: 13.5px; color: #2E3190; }
.nk4-oznk { font-size: 13px; font-weight: 600; color: #6B6280; }
.nk4-grupa { display: flex; flex-direction: column; gap: 10px; }

.nk4-provjereno { display: flex; align-items: flex-start; gap: 11px; padding: 13px; border-radius: 14px;
  background: #E4F8EF; cursor: pointer; }
.nk4-provjereno input { margin: 2px 0 0; width: 16px; height: 16px; flex: none; accent-color: #0E9F6E; }
.nk4-provjereno em { font-style: normal; font-size: 14px; line-height: 1.45; color: #0C3A26; }
.nk4-provjereno em b { font-weight: 600; display: block; }
.nk4-provjereno em span { color: #2C6A4C; font-size: 12.5px; }

.nk4-segment { display: flex; gap: 5px; background: #F3F0FA; padding: 4px; border-radius: 12px; }
.nk4-segment label { flex: 1 1 0; }
.nk4-segment input { position: absolute; opacity: 0; pointer-events: none; }
.nk4-segment span { display: block; text-align: center; padding: 9px 4px; border-radius: 9px; font-size: 14px;
  cursor: pointer; color: #6B6280; font-weight: 500; }
.nk4-segment input:checked + span { background: #2E3190; color: #fff; }

.nk4-vrste label { display: flex; align-items: center; gap: 10px; font-size: 14.5px; cursor: pointer; padding: 3px 0; }
.nk4-vrste input { width: 16px; height: 16px; flex: none; accent-color: #2E3190; }
.nk4-vrste i { font-style: normal; flex: 1 1 auto; }
.nk4-vrste small { font-size: 12.5px; color: #9E9AB4; }

.nk4-par { display: flex; gap: 8px; }
.nk4-par input, .nk4-grupa > input[type=text] { flex: 1 1 0; min-width: 0; border: 1px solid #E9E5F5;
  border-radius: 11px; padding: 11px; font-size: 14px; outline: none; background: #FBF9FF; font-family: inherit; }

.nk4-sobe { display: flex; gap: 5px; }
.nk4-sobe label { flex: 1 1 0; }
.nk4-sobe input { position: absolute; opacity: 0; pointer-events: none; }
.nk4-sobe span { display: block; text-align: center; padding: 9px 0; border: 1px solid #E9E5F5; border-radius: 10px;
  font-size: 14px; cursor: pointer; background: #fff; color: #403A57; }
.nk4-sobe input:checked + span { background: #2E3190; border-color: #2E3190; color: #fff; }

.nk4-primijeni { padding: 13px 16px; border: 0; border-radius: 999px; background: #2E3190; color: #fff;
  font-weight: 700; font-size: 15px; cursor: pointer; font-family: inherit; }
.nk4-primijeni:hover { background: #22246E; }

/* PC promo */
.nk4-promo { background: #2E3190; border-radius: 20px; padding: 20px; color: #DEDFF2; display: flex;
  flex-direction: column; gap: 11px; position: relative; overflow: hidden; }
.nk4-promo::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 80% 0%, rgba(110,86,248,.45), transparent 62%); }
.nk4-promo > * { position: relative; }
.nk4-promo .nk4-k { width: 32px; height: 32px; border-radius: 9px; font-size: 18px; background: #fff; color: #2E3190; }
.nk4-promo b { font-size: 17.5px; font-weight: 700; line-height: 1.28; color: #fff; letter-spacing: -.025em; }
.nk4-promo span { font-size: 13.5px; line-height: 1.55; color: #A7ABD0; }
.nk4-promo a { margin-top: 4px; padding: 12px 18px; border-radius: 999px; background: #fff; color: #2E3190;
  font-weight: 700; font-size: 14.5px; text-align: center; }
.nk4-promo a:hover { background: #ECEDF9; }
/* promo unutar liste - prikazuje se SAMO na mobitelu, iza prva 4 oglasa */
.nk4-promo-ulisti { display: none; list-style: none; }
@media (max-width: 979px) {
  .nk4-bok .nk4-promo { display: none; }
  .nk4-promo-ulisti { display: flex; }
}

/* --- rezultati --- */
.nk4-rezultati { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.nk4-rezultati > span { font-size: 15.5px; color: #6B6280; flex: 1 1 auto; min-width: 0; }
.nk4-rezultati b { color: #1A1533; font-weight: 700; }
.nk4-rezultati select { border: 1px solid #E9E5F5; border-radius: 12px; padding: 10px 12px; font-size: 14.5px;
  background: #fff; color: #1A1533; outline: none; cursor: pointer; font-family: inherit; }
.nk4-karta-l { display: flex; align-items: center; gap: 8px; font-size: 14.5px; padding: 10px 16px;
  border-radius: 12px; background: #fff; border: 1px solid #E9E5F5; color: #1A1533; white-space: nowrap; }

.nk4-cipovi { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.nk4-cipovi a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
  background: #ECEDF9; color: #22246E; font-size: 13px; font-weight: 600; }

/* vodoravni redovi oglasa (Njuskalo-stil, 02.09.) */
.nk4-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.nk4-red { background: #fff; border: 1px solid #E9E5F5; border-radius: 14px; overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease; }
.nk4-red:hover { border-color: #2E3190; box-shadow: 0 10px 28px -20px rgba(26,21,51,.45); }
.nk4-red > a { display: flex; align-items: stretch; color: inherit; }
.nk4-red-foto { position: relative; flex: 0 0 300px; min-height: 210px; background: #EFEBF8; }
.nk4-red-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nk4-red-foto .nkl-bez-slike { position: absolute; inset: 0; margin: auto; width: 64px; height: 48px; color: #C4BCE0; }
.nk4-red-tijelo { flex: 1 1 auto; min-width: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 7px; }
.nk4-red-tijelo .nk4-naslov { font-size: 17px; margin: 0; }
.nk4-red:hover .nk4-naslov { color: #2E3190; }
.nk4-red-dno { margin-top: auto; padding-top: 8px; font-size: 12.5px; color: #9E9AB4; }
.nk4-red-cijena { flex: 0 0 auto; padding: 16px 18px; border-left: 1px solid #F3F0FA; display: flex;
  flex-direction: column; align-items: flex-end; gap: 4px; min-width: 150px; justify-content: flex-start; }
.nk4-red-cijena .nk4-cijena { font-size: 23px; }
.nk4-red-cijena .nk4-privatno { margin-top: auto; font-size: 11.5px; font-weight: 600; padding: 3px 8px;
  border-radius: 7px; background: #ECEDF9; color: #22246E; }
@media (max-width: 720px) {
  .nk4-red > a { flex-direction: column; }
  .nk4-red-foto { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
  .nk4-red-cijena { border-left: 0; border-top: 1px solid #F3F0FA; flex-direction: row; align-items: baseline;
    gap: 10px; min-width: 0; }
  .nk4-red-cijena .nk4-privatno { margin-top: 0; margin-left: auto; }
}
.nk4-kartica { background: #fff; border-radius: 20px; overflow: hidden; position: relative;
  box-shadow: 0 1px 2px rgba(26,21,51,.04), 0 18px 40px -32px rgba(26,21,51,.55);
  transition: transform .2s ease, box-shadow .2s ease; }
.nk4-kartica:hover { transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(26,21,51,.05), 0 30px 60px -30px rgba(26,21,51,.45); }
.nk4-kartica > a { display: flex; flex-direction: column; color: inherit; height: 100%; }
.nk4-foto { position: relative; aspect-ratio: 16 / 10; background: #EFEBF8; }
.nk4-foto-datum { position: absolute; bottom: 12px; left: 12px; font-size: 11.5px; padding: 4px 9px;
  border-radius: 8px; background: rgba(26,21,51,.6); color: #E4E5F4; backdrop-filter: blur(6px); }
.nk4-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nk4-foto .nkl-bez-slike { position: absolute; inset: 0; margin: auto; width: 64px; height: 48px; color: #C4BCE0; }
.nk4-znacke { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 6px; pointer-events: none; }
.nk4-zn-prov { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px;
  border-radius: 999px; background: #fff; box-shadow: 0 6px 18px -8px rgba(26,21,51,.5); }
.nk4-zn-prov .nk4-k { width: 18px; height: 18px; border-radius: 5px; font-size: 11px; }
.nk4-zn-prov b { font-size: 12px; font-weight: 600; color: #1A1533; letter-spacing: -.01em; }
.nk4-zn-novo { display: inline-block; padding: 5px 11px; border-radius: 999px; background: #0E9F6E;
  color: #fff; font-size: 12px; font-weight: 600; }
.nk4-foto-broj { position: absolute; bottom: 12px; right: 12px; font-size: 11.5px; padding: 4px 9px;
  border-radius: 8px; background: rgba(26,21,51,.6); color: #E4E5F4; backdrop-filter: blur(6px); }
.nk4-tijelo { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
.nk4-cijena-red { display: flex; align-items: flex-start; gap: 10px; }
.nk4-cijena { font-size: 27px; font-weight: 800; letter-spacing: -.05em; color: #1A1533;
  line-height: 1.05; white-space: nowrap; }
.nk4-po-m2 { margin-left: auto; font-size: 12.5px; color: #6B6280; white-space: nowrap; padding-top: 3px; }
.nk4-specs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: #403A57; font-weight: 500; }
.nk4-specs span { white-space: nowrap; }
.nk4-naslov { margin: 2px 0 0; font-size: 15.5px; font-weight: 600; line-height: 1.35;
  letter-spacing: -.02em; color: #2A2350; }
.nk4-lok { font-size: 13.5px; color: #6B6280; }
.nk4-atributi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.nk4-atributi span { padding: 6px 10px; border-radius: 9px; background: #ECEDF9; font-size: 12.5px;
  color: #22246E; font-weight: 600; white-space: nowrap; }
.nk4-atributi .nk4-delta-plus { background: #FDECEF; color: #B4232E; }
.nk4-atributi .nk4-delta-minus { background: #E4F8EF; color: #1F6B3A; }
.nk4-podnozje { margin-top: auto; padding-top: 13px; border-top: 1px solid #F3F0FA; display: flex;
  align-items: center; gap: 9px; font-size: 12.5px; color: #6B6280; }
.nk4-podnozje .nk4-privatno { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 7px;
  background: #ECEDF9; color: #22246E; white-space: nowrap; margin-left: auto; }

/* ponude / bundle */
.nk4-ponude { background: #fff; border-radius: 22px; padding: clamp(18px, 2.4vw, 28px);
  box-shadow: 0 1px 2px rgba(26,21,51,.04), 0 20px 46px -34px rgba(26,21,51,.55);
  display: flex; flex-direction: column; gap: 18px; }
.nk4-ponude h2 { margin: 0; font-size: clamp(19px, 2vw, 24px); font-weight: 700; letter-spacing: -.035em; }
.nk4-ponude-red { display: flex; flex-wrap: wrap; gap: 12px; }
.nk4-ponuda { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 16px;
  border: 1px solid #E9E5F5; border-radius: 16px; background: #FCFAFF; color: inherit; }
.nk4-ponuda:hover { border-color: #2E3190; }
.nk4-ponuda small { font-size: 11.5px; font-weight: 600; color: #2E3190; }
.nk4-ponuda b { font-size: 15.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.025em; }
.nk4-ponuda span { font-size: 12.5px; color: #6B6280; line-height: 1.5; }
.nk4-ponuda em { font-style: normal; font-size: 19px; font-weight: 800; letter-spacing: -.035em; margin-top: 2px; }
.nk4-ponuda-tamna { background: #2E3190; border-color: #2E3190; position: relative; overflow: hidden; }
.nk4-ponuda-tamna::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 85% 5%, rgba(110,86,248,.45), transparent 62%); }
.nk4-ponuda-tamna > * { position: relative; }
.nk4-ponuda-tamna small { color: #9AA1E0; }
.nk4-ponuda-tamna b { color: #fff; }
.nk4-ponuda-tamna span { color: #A7ABD0; }
.nk4-ponuda-tamna em { color: #fff; font-size: 26px; }

/* prazno stanje */
.nk4-prazno { background: #fff; border-radius: 20px; padding: 48px 24px; text-align: center;
  box-shadow: 0 1px 2px rgba(26,21,51,.04), 0 18px 40px -32px rgba(26,21,51,.5);
  display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nk4-prazno h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.nk4-prazno p { margin: 0; font-size: 14.5px; color: #6B6280; max-width: 430px; line-height: 1.6; }
.nk4-prazno .nkl-nedavne { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column;
  gap: 6px; font-size: 13.5px; color: #403A57; }
.nk4-prazno .nkl-kad { color: #9E9AB4; margin-left: 8px; }
.nk4-prazno-gumb { margin-top: 8px; padding: 12px 24px; border-radius: 999px; background: #2E3190;
  color: #fff !important; font-weight: 700; font-size: 15px; display: inline-block; }

/* --- stranica oglasa u nk4 jeziku (Petra 02.09.: "90s + paddinzi") --- */
.nk4-oglas { padding-top: 18px; }
.nk4-oglas, .nk4-oglas * { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }

/* glavni stupac: dosljedan okomiti ritam - i banner vise nije prikeljen na tekst */
.nk4-oglas .nko-glavno { display: flex; flex-direction: column; gap: 20px; }
.nk4-oglas .nk4-banner { margin-top: 4px; }

/* CTA red u vrhu: dva JEDNAKA gumba, isti box, jasan razmak (Petra 02.09.) */
.nk4-oglas .nko-cta-red { display: flex; gap: 12px; margin: 18px 0 4px; flex-wrap: wrap; }
.nk4-oglas .nko-cta-red .nkl-gumb {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin: 0; padding: 0 24px; height: 48px; box-sizing: border-box;
  border-radius: 999px; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer;
  background: #2E3190; color: #fff; border: 2px solid #2E3190; text-decoration: none; }
.nk4-oglas .nko-cta-red .nkl-gumb:hover { background: #22246E; border-color: #22246E; color: #fff; }
.nk4-oglas .nko-cta-red .nko-gumb-drugi { background: #fff; color: #2E3190; }
.nk4-oglas .nko-cta-red .nko-gumb-drugi:hover { background: #ECEDF9; color: #22246E; }
@media (max-width: 520px) {
  /* Petra 02.09.: dva gumba u JEDAN red i na mobitelu */
  .nk4-oglas .nko-cta-red { flex-wrap: nowrap; }
  .nk4-oglas .nko-cta-red .nkl-gumb { flex: 1 1 0; min-width: 0; padding: 0 10px; font-size: 14px; }
}

.nko-prod-ime { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: #1A1533 !important; }
.nko-prod-ime:hover { color: #2E3190 !important; }
.nko-prod-link { font-size: 13.5px; color: #2E3190; font-weight: 600; margin-top: 6px; }
/* breadcrumbs: cijeli lanac, na mobitelu vodoravno pomican (Njuskalo stil) */
.nk4-oglas .nko-put { display: flex; align-items: center; gap: 7px; overflow-x: auto;
  white-space: nowrap; scrollbar-width: none; font-size: 13px; padding-bottom: 4px; }
.nk4-oglas .nko-put::-webkit-scrollbar { display: none; }
.nk4-oglas .nko-put a { color: #2E3190; flex: none; }
.nk4-oglas .nko-put a:hover { text-decoration: underline; }
.nk4-oglas .nko-put span { color: #9E9AB4; flex: none; }
.nk4-oglas .nko-vrh { margin-bottom: 24px; }
.nk4-oglas .nko-vrh-red { margin-bottom: 12px; }
/* znacke: prozirna nutrina + sareni gradient obrub (Petra 02.09.); kao link vode na cesticu.
   Desktop: znacka stoji ODMAH uz oznaku vrste, ne gura se u desni rub. */
.nk4-oglas .nko-vrh-red { display: flex; justify-content: flex-start; align-items: center; gap: 14px; }
.nk4-oglas .nko-znacka { padding: 4px 11px; font-size: 11.5px; font-weight: 700;
  color: #2E3190; border: 2px solid transparent; gap: 8px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(90deg, #6E56F8, #0FB56A, #F59E0B) border-box; }
a.nko-znacka:hover { background: linear-gradient(#ECEDF9, #ECEDF9) padding-box,
              linear-gradient(90deg, #6E56F8, #0FB56A, #F59E0B) border-box; }
.nk4-oglas .nko-znacka-kp { background: transparent; color: #0E9F6E; border-color: #0E9F6E; }
a.nko-znacka-kp:hover { background: #E4F8EF; }
.nk4-oglas h1 { font-weight: 800; letter-spacing: -.035em; color: #1A1533; }
.nk4-oglas .nko-velika { border: 1px solid #E9E5F5; border-radius: 16px; }
.nk4-oglas .nko-slicica { border-radius: 10px; }
.nk4-oglas .nko-podaci, .nk4-oglas .nko-opis, .nk4-oglas .nko-karta-kartica,
.nk4-oglas .nko-cijena-kutija, .nk4-oglas .nko-kontakt, .nk4-oglas .nko-provjera,
.nk4-oglas .nko-prodavatelj, .nk4-oglas .nko-adresa-skrivena, .nk4-oglas .nko-ostali {
  border: 1px solid #E9E5F5; border-radius: 16px; background: #fff; padding: 20px 22px; }
.nk4-oglas .nko-opis h2, .nk4-oglas .nko-kontakt h2, .nk4-oglas .nko-ostali h2 {
  margin: 0 0 12px; font-size: 18px; font-weight: 700; letter-spacing: -.025em; }
.nk4-oglas .nko-cijena { font-weight: 800; letter-spacing: -.04em; color: #1A1533; }

/* osnovni podaci: SaaS plocice umjesto tablice (Petra 02.09.) */
.nk4-oglas .nko-tablica { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin: 0; }
.nk4-oglas .nko-tablica > div { display: flex; flex-direction: column; gap: 4px; padding: 13px 15px;
  background: #FBF9FF; border: 1px solid #E9E5F5; border-radius: 13px; margin: 0; min-width: 0; }
.nk4-oglas .nko-tablica dt { font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: #9E9AB4; margin: 0; }
.nk4-oglas .nko-tablica dd { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em;
  color: #1A1533; margin: 0; overflow-wrap: anywhere; }
@media (min-width: 721px) {
  /* SAMO desktop: lokacija siroka 2 kocke; na mobilnom bi span 2 razbio 1-stupcani popis */
  .nk4-oglas .nko-tablica > div:last-child { grid-column: span 2; }
}
/* ugradjena karta na oglasu (ispod opisa) */
.nk4-oglas .nko-karta-mapa { border: 1px solid #E9E5F5; border-radius: 16px; background: #fff;
  padding: 20px 22px; scroll-margin-top: 90px; }
.nk4-oglas .nko-karta-mapa h2 { margin: 0 0 12px; font-size: 18px; font-weight: 700; letter-spacing: -.025em; }
#nko-mini-karta { height: 320px; border-radius: 12px; overflow: hidden; }
@media (max-width: 720px) { #nko-mini-karta { height: auto; aspect-ratio: 4 / 5; } } /* mob 4:5 (Petra 04.09.) */
.nko-karta-nap { margin: 10px 0 0; font-size: 12.5px; color: #6B6280; }
.nko-karta-nap a { color: #2E3190; font-weight: 600; }
/* lokacija vodi na kartu fokusiranu na oglas */
.nk4-oglas .nko-lok-link { color: #2E3190; text-decoration: underline; text-underline-offset: 3px; }
.nk4-oglas .nko-lok-link:hover { color: #22246E; }
.nk4-oglas .nko-lokacija .nko-lok-link { color: #6B6280; }
.nk4-oglas .nko-lokacija .nko-lok-link:hover { color: #2E3190; }
/* lokacija i gumb Karta u ISTOM redu - tekst lijevo, pill desno; manji font da sve stane (Petra 02.09.) */
.nk4-oglas .nko-lokacija { display: flex; align-items: center; justify-content: space-between;
  gap: 8px 12px; flex-wrap: wrap; font-size: 13.5px; }
.nk4-oglas .nko-lok-tekst { font-size: 13.5px; min-width: 0; }
.nk4-oglas .nko-lok-tekst .nko-lok-link { font-size: 13.5px; }
.nk4-oglas .nko-tablica dd .nko-lok-tekst, .nk4-oglas .nko-tablica dd .nko-lok-link { font-size: 13px; font-weight: 600; }
.nk4-oglas .nko-lokacija .nko-karta-ikona { margin-left: 0; }
/* ikona karte uz lokaciju - fokus ovog oglasa na karti */
.nk4-oglas .nko-karta-ikona { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px;
  padding: 4px 12px; border: 1.5px solid #C9CBEC; border-radius: 999px; color: #2E3190;
  font-size: 12.5px; font-weight: 700; text-decoration: none; vertical-align: middle; white-space: nowrap; }
.nk4-oglas .nko-karta-ikona:hover { background: #ECEDF9; border-color: #2E3190; }
.nk4-oglas .nkl-gumb { border-radius: 999px; font-weight: 700; background: #2E3190; }
.nk4-oglas .nkl-gumb:hover { background: #22246E; }

/* provjera nekretnine: ugnijezdeni box dobiva zrak, CTA-ovi se ne lijepe */
.nk4-oglas .nko-provjera { background: #fff; }
.nk4-oglas .nko-provjera .nko-adresa-skrivena { margin: 14px 0 0; padding: 16px 18px;
  border: 1px solid #E9E5F5; border-radius: 14px; background: #FBF9FF; }
.nk4-oglas .nko-provjera .nkl-gumb { display: flex; width: 100%; box-sizing: border-box;
  align-items: center; justify-content: center; height: 48px; padding: 0 20px; font-size: 14.5px; }
.nk4-oglas .nko-provjera .nko-adresa-skrivena .nkl-gumb { margin-top: 4px;
  background: #fff; color: #2E3190; border: 2px solid #2E3190; }
.nk4-oglas .nko-provjera .nko-adresa-skrivena .nkl-gumb:hover { background: #ECEDF9; }
.nk4-oglas .nko-provjera > .nkl-gumb { margin-top: 16px; }
/* kontakt kartica: uredniji telefon + gumb pune sirine */
.nk4-oglas .nko-kontakt h2 { margin: 0 0 10px; }
.nk4-oglas .nko-tel { margin: 0 0 14px; }
.nk4-oglas .nko-tel a { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: #1A1533; }
.nk4-oglas .nko-tel a:hover { color: #2E3190; }
.nk4-oglas .nko-kontakt .nkl-gumb { display: flex; width: 100%; box-sizing: border-box;
  align-items: center; justify-content: center; height: 48px; padding: 0 20px; font-size: 15px; }
.nk4-oglas .nko-kontakt .nko-napomena { margin-top: 12px; }

/* "Obavijesti me" = obican podcrtani link, ne CTA (Petra 02.09.) */
.nk4-oglas .nko-link-gumb { display: inline-block; margin-top: 14px; padding: 0; border: 0;
  background: none; color: #2E3190; font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }
.nk4-oglas .nko-link-gumb:hover { color: #22246E; }
.nk4-oglas .nko-provjera .nko-napomena { margin-top: 12px; }
.nk4-oglas .nko-provjera .nko-upsell { margin-top: 14px; padding-top: 14px; border-top: 1px solid #F3F0FA; }
@media (max-width: 720px) {
  /* Petra 02.09.: znacka u ISTI red s oznakom vrste, ne iznad */
  .nk4-oglas .nko-vrh-red { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
  .nk4-oglas .nko-znacka { font-size: 11px; padding: 3px 10px; }
  .nk4-oglas .nko-znacka .nk4-k-img { width: 13px; height: 13px; }
  /* osnovni podaci: uski kompaktni popis bez kartica (Petra 02.09.) */
  .nk4-oglas .nko-tablica { grid-template-columns: 1fr; gap: 0; }
  .nk4-oglas .nko-tablica > div { flex-direction: row; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 9px 2px; background: none; border: 0; border-bottom: 1px solid #F3F0FA; border-radius: 0; }
  .nk4-oglas .nko-tablica > div:last-child { border-bottom: 0; }
  .nk4-oglas .nko-tablica dt { font-size: 11px; letter-spacing: .05em; }
  .nk4-oglas .nko-tablica dd { font-size: 14px; text-align: right; }
  /* lokacija: label lijevo + vrijednost desno, Karta pill u novom redu uz SKROZ LIJEVI rub */
  .nk4-oglas .nko-tablica .nko-red-lok { flex-direction: row; flex-wrap: wrap; align-items: baseline;
    row-gap: 10px; }
  .nk4-oglas .nko-tablica .nko-red-lok .nko-lok-tekst { text-align: right; }
  .nk4-oglas .nko-tablica .nko-karta-dd { flex-basis: 100%; display: flex; }
  .nk4-oglas .nko-tablica .nko-karta-dd .nko-karta-ikona { margin-left: 0; }
}
/* SVG pin na mini karti - bez kvadratne pozadine divIcona */
.nko-pin { background: none; border: 0; }
.nko-pin svg { filter: drop-shadow(0 6px 10px rgba(26,21,51,.35)); }

.nko-prodavatelj { display: flex; flex-direction: column; gap: 5px; }
/* avatar oglasivaca: inicijali (kasnije slika/logo agencije u isti krug) */
.nko-prod-red { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.nko-avatar { flex: none; width: 46px; height: 46px; border-radius: 999px; background: #ECEDF9;
  color: #2E3190; display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; letter-spacing: .02em; overflow: hidden; }
.nko-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nko-prod-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* mala share ikona ispod galerije, desno */
.nko-galerija-alati { display: flex; justify-content: flex-end; margin-top: 10px; }
.nko-share-mali { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px;
  border: 1.5px solid #C9CBEC; border-radius: 999px; background: #fff; color: #2E3190;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.nko-share-mali:hover { background: #ECEDF9; border-color: #2E3190; }
.nko-prodavatelj b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: #1A1533; }
.nko-prod-tip { font-size: 12.5px; color: #6B6280; }
.nko-prodavatelj a { font-size: 13.5px; color: #2E3190; font-weight: 600; margin-top: 4px; }
.nko-ugovori-uvod { margin: 2px 0 4px; font-size: 13.5px; line-height: 1.5; color: #403A57; }
.nko-ugovori a { margin-top: 0; padding: 9px 0; border-bottom: 1px solid #F3F0FA;
  display: flex; align-items: center; gap: 10px; }
.nko-ugovori a svg { flex: none; color: #6E56F8; }
.nko-ugovori a:last-child { border-bottom: 0; padding-bottom: 2px; }

.nko-ostali-red { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.nko-mini { display: flex; flex-direction: column; gap: 5px; color: inherit; }
.nko-mini-foto { display: block; aspect-ratio: 4 / 3; border-radius: 10px; background: #EFEBF8; overflow: hidden; }
.nko-mini-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nko-mini b { font-size: 13px; font-weight: 600; line-height: 1.35; color: #2A2350;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nko-mini-meta { font-size: 12px; color: #6B6280; }
.nko-mini em { font-style: normal; font-size: 14.5px; font-weight: 800; letter-spacing: -.03em; color: #1A1533; }
.nko-mini:hover b { color: #2E3190; }

.nk4-banner { min-height: 110px; border: 1px dashed #D8DAE9; border-radius: 14px; display: flex;
  align-items: center; justify-content: center; background: #FCFAFF; }
.nk4-banner > span { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #B9B3CC; }

/* pretraga na karti (karta.php) - filtri u jednoj kartici, nk4 jezik */
.nkk-uvod { font-size: 13.5px; color: #6B6280; margin-bottom: 14px; }
.nkk-panel { background: #fff; border: 1px solid #E9E5F5; border-radius: 16px; padding: 14px 16px;
  margin: 0 0 12px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  box-shadow: 0 1px 2px rgba(26,21,51,.04), 0 14px 34px -28px rgba(26,21,51,.5); }
.nkk-panel-vrh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.nkk-panel-vrh .nkl-ocisti { font-size: 13.5px; color: #2E3190; }
.nkk-panel .nkk-broj { margin: 0; font-size: 13px; color: #6B6280; }
.nkk-panel .nkk-filtri { display: flex; gap: 5px; background: #F3F0FA; padding: 4px; border-radius: 999px;
  flex: 0 0 auto; }
.nkk-panel .nkk-cip { border: 0; background: none; padding: 8px 16px; border-radius: 999px; font-size: 13.5px;
  font-weight: 600; color: #6B6280; cursor: pointer; font-family: inherit; }
.nkk-panel .nkk-cip.aktivan { background: #2E3190; color: #fff; }
.nkk-panel .nk4-select { padding: 9px 11px; font-size: 13.5px; border-radius: 999px; }
.nkk-pretraga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.nkk-blizina { display: block; margin: 0 0 12px; padding: 10px 18px; border: 1.5px solid #2E3190;
  border-radius: 999px; background: #fff; color: #2E3190; font-size: 13.5px; font-weight: 700;
  cursor: pointer; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.nkk-blizina:hover { background: #ECEDF9; }
/* karta.php: toggle filtera vidljiv i na desktopu, panel iznad karte; kompaktna traka */
.nk4-karta-str .nk4-filtri-toggle { display: block; margin: 12px 0 0; }
.nk4-karta-str .nkk-filtri-panel { margin: 12px 0 0; }
.nk4-karta-str .nkk-blizina { margin: 12px 0 0; }
.nk4-karta-str #nkk-karta { margin-top: 14px; }
.nk4-karta-str .nk4-trazi { margin-top: 4px; }
@media (max-width: 720px) {
  .nk4-karta-str .nk4-trazi select { flex: 1 1 40%; }
  .nk4-karta-str .nk4-trazi button { flex: 1 1 auto; }
}
.nkk-pretraga .nk4-select { width: auto; flex: 0 1 170px; min-width: 0; }
.nkk-pretraga .nkk-q { flex: 1 1 220px; }
.nkk-pretraga .nkk-broj-polje { flex: 0 1 130px; }
.nkk-prov { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: #403A57;
  cursor: pointer; white-space: nowrap; }
.nkk-prov input { width: 16px; height: 16px; accent-color: #0E9F6E; }
.nkk-pretraga .nkl-gumb { border-radius: 999px; background: #2E3190; font-weight: 700; }
.nkk-pretraga .nkl-gumb:hover { background: #22246E; }
@media (max-width: 720px) {
  .nkk-pretraga .nk4-select, .nkk-pretraga .nkk-broj-polje { flex: 1 1 42%; }
  .nkk-pretraga .nkk-q { flex: 1 1 100%; }
  .nkk-panel .nkk-filtri { width: 100%; }
  .nkk-panel .nkk-cip { flex: 1 1 0; text-align: center; }
  .nkk-pretraga .nkl-gumb { flex: 1 1 auto; }
  /* manji popup oglasa na karti - da se karta uopce vidi (Petra 02.09.) */
  .nkk-popup { max-width: 185px; font-size: 12px; }
  .nkk-popup img { width: 100%; height: 72px; object-fit: cover; border-radius: 8px; }
  .nkk-popup strong { font-size: 12.5px; line-height: 1.3; }
  .leaflet-popup-content { margin: 9px 11px; }
  #nkk-karta { height: 62vh; }
}

/* stranicenje */
.nk4-stranice { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.nk4-stranice a, .nk4-stranice span { min-width: 40px; text-align: center; padding: 10px 6px;
  border-radius: 11px; font-size: 14.5px; color: #403A57; background: #fff; border: 1px solid #E9E5F5; }
.nk4-stranice .aktivna { background: #2E3190; border-color: #2E3190; color: #fff; font-weight: 700; }
.nk4-stranice .nkl-str-praznina { border: 0; background: none; }

/* FAZA2 agent-b - cipovi znacajki (novogradnja/parking/garaza/ostava/ER) na karticama liste i profila oglasivaca */
.nk4-znacajke { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.nk4-znacajke span { padding: 5px 9px; border-radius: 8px; background: #F1F0FB; font-size: 12px;
  color: #4A4568; font-weight: 600; white-space: nowrap; }
@media (max-width: 720px) {
  .nk4-wrap .nk4-znacajke span:nth-child(n+4) { display: none; }
}

/* FEED agent - oglas uvezen iz sustava agencije (03.09.2026.) */
.nko-prod-feed { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: #6B6785; }
.nko-prod-feed a { color: #4A4568; text-decoration: underline; }

/* 03.09.2026. Petra: slike se NE rezu - cijela fotografija vidljiva, bijela pozadina (lista, profil, minijature, popup) */
.nk4-red-foto, .nk4-foto, .nko-mini-foto { background: #fff; }
.nk4-red-foto img, .nk4-foto img, .nko-mini-foto img { object-fit: contain; }
.nkk-popup img { object-fit: contain; background: #fff; }

/* 03.09.2026. Petra: "Katastor provjereno" u kartici = ista znacka kao na oglasu (sareni gradient obrub, pill) */
.nk4-zn-prov { padding: 4px 11px 4px 6px; border: 2px solid transparent; border-radius: 999px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #6E56F8, #0FB56A, #F59E0B) border-box;
  box-shadow: none; }
.nk4-zn-prov b { color: #2E3190; font-weight: 700; font-size: 11.5px; }

/* 03.09.2026. Petra: sekcija "Za sljedeci korak" na dnu oglasa (proizvodi) */
.nk4-oglas .nko-korak { margin-top: 36px; border: 1px solid #E9E5F5; border-radius: 20px; background: #fff; padding: 26px 24px; }
.nk4-oglas .nko-korak h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
.nk4-oglas .nko-korak-uvod { margin: 0 0 18px; color: #6B6280; font-size: 14px; }
.nk4-oglas .nko-korak-red { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.nk4-oglas .nko-korak-k { display: grid; gap: 8px; align-content: start; padding: 18px; border: 1px solid #E9E5F5; border-radius: 16px; background: #FAF9FE; color: #1A1533; text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.nk4-oglas .nko-korak-k:hover { transform: translateY(-2px); border-color: #6E56F8; box-shadow: 0 10px 28px -14px rgba(26,21,51,.45); }
.nk4-oglas .nko-korak-ico { width: 40px; height: 40px; border-radius: 12px; background: #ECE8FF; color: #6E56F8; display: grid; place-items: center; }
.nk4-oglas .nko-korak-k b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.nk4-oglas .nko-korak-k > span:not(.nko-korak-ico) { font-size: 13px; color: #6B6280; line-height: 1.5; }
.nk4-oglas .nko-korak-k em { font-style: normal; font-size: 12.5px; font-weight: 700; color: #0E9F6E; }
@media (max-width: 720px) { .nk4-oglas .nko-korak { padding: 20px 16px; } }

/* 03.09.2026. Petra: logo + opis agencije (profil oglasivaca i bocna kartica oglasa) */
.nk4-ogl-glava { display: flex; gap: 18px; align-items: center; }
.nk4-ogl-logo { flex: none; width: 72px; height: 72px; border-radius: 16px; border: 1px solid #E9E5F5; background: #fff; object-fit: contain; }
.nk4-ogl-opis { margin: 10px 0 0; font-size: 14px; color: #4A4460; line-height: 1.55; max-width: 640px; }
.nk4-oglas .nko-prod-opis { margin: 6px 0 2px; font-size: 12.5px; color: #6B6280; line-height: 1.5; }

/* 04.09.2026. Petra: CTA "Predaj nekretninu" u zaglavlju liste + znacka u uvodu kao pravi pill (ne golo K) */
.nk4-zag-desno { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.nk4-zag-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px;
  background: #2E3190; color: #fff; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 10px 24px -12px rgba(46,49,144,.7); transition: background .15s ease, transform .15s ease; }
.nk4-zag-cta:hover { background: #6E56F8; transform: translateY(-1px); color: #fff; }
.nk4-zag-cta svg { flex: none; }
.nk4-zag-uvod .nk4-zn-uvod { vertical-align: middle; margin: 0 2px; padding: 3px 9px 3px 5px; gap: 5px; }
.nk4-zag-uvod .nk4-zn-uvod .nk4-k-img { width: 15px; }
.nk4-zag-uvod .nk4-zn-uvod b { font-size: 12px; }
.nk4-mob-predaj { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: #2E3190;
  color: #fff; border-color: #2E3190; font-weight: 700; text-decoration: none; }
.nk4-mob-predaj svg { flex: none; }

/* 04.09.2026. Javne drazbe (FINA ocevidnik): znacka, placeholder, detalji na oglasu */
.nk4-zn-drazba { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; border-radius: 999px;
  background: #1A1533; color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: -.01em; }
.nk4-zn-drazba svg { flex: none; }
.nkl-drazba-ikona { color: #6E56F8; }
.nk4-drazbe-f { margin-top: 8px; }
.nk4-oglas .nko-znacka-drazba { background: #1A1533; color: #fff; border-color: #1A1533; display: inline-flex; align-items: center; gap: 6px; }
.nko-cijena-lbl { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6B6280; margin-bottom: 2px; }
.nko-vrh-cijena .nko-cijena-lbl { display: inline; margin-right: 6px; font-size: 12px; }
.nko-drazba-dl { display: grid; gap: 8px; margin: 4px 0 14px; }
.nko-drazba-dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 8px; font-size: 13.5px; line-height: 1.45; }
.nko-drazba-dl dt { color: #6B6280; font-weight: 500; }
.nko-drazba-dl dd { margin: 0; color: #1A1533; font-weight: 600; }
.nko-izvor { font-size: 12px; color: #9E9AB4; }
.nk4-oglas .nko-velika-drazba { min-height: 220px; }
.nk4-oglas .nko-velika-drazba .nko-bez-slike-tekst { max-width: 420px; text-align: center; line-height: 1.5; }
/* satelitska slicica cestice (drazbe): raster + SVG obris u postocima, isti okvir */
.nk4-sat { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: #1A1533; }
.nk4-sat img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nk4-sat svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nk4-sat polygon { fill: rgba(198,245,111,.18); stroke: #C6F56F; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.nk4-oglas .nko-velika-sat { padding: 0; aspect-ratio: 16 / 9; min-height: 0; }
.nk4-oglas .nko-velika-sat .nk4-sat { border-radius: 16px; }
.nk4-oglas .nko-sat-nap { position: absolute; left: 12px; right: 12px; bottom: 10px; margin: 0; padding: 8px 12px; border-radius: 10px;
  background: rgba(26,21,51,.72); color: #fff; font-size: 12.5px; line-height: 1.4; }
.nk4-oglas .nko-velika-sat { position: relative; }
/* ostali + slicni oglasi na dnu stranice oglasa (puna sirina) */
.nk4-oglas .nko-dno-oglasi { margin-top: 28px; display: grid; gap: 22px; }
.nk4-oglas .nko-dno-oglasi .nko-ostali-red { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.nk4-oglas .nko-glavno .nko-drazba { margin: 0; }
.nk4-oglas .nko-provjera-drazba p { color: #6B6280; font-size: 14px; margin: 0 0 14px; }
.nk4-oglas .nko-vrh-cijena span, .nk4-oglas .nko-cijena-m2 { white-space: nowrap; }
/* "Prije jamcevine" istaknuto (Petra 04.09.) */
.nk4-oglas .nko-provjera-drazba { border: 2px solid transparent; border-radius: 20px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #6E56F8, #0FB56A, #F59E0B) border-box; }
.nk4-oglas .nko-provjera-drazba h2 { color: #2E3190; }
/* razgledavanje: naslov pa tekst u dva reda, ne u dva stupca (Petra 04.09.) */
.nko-drazba-dl > div.nko-dl-puno { grid-template-columns: 1fr; gap: 3px; }
.nko-drazba-dl > div.nko-dl-puno dd { font-weight: 500; }
.nko-gmap { height: 320px; border-radius: 12px; overflow: hidden; background: #E9E5F5; }
@media (max-width: 720px) { .nko-gmap { height: auto; aspect-ratio: 4 / 5; } }
/* profil oglasivaca: avatar (logo / K / inicijali), clan od, opis (04.09.) */
.nk4-ogl-glava { display: flex; gap: 18px; align-items: flex-start; }
.nk4-ogl-logo { flex: none; width: 72px; height: 72px; border-radius: 18px; object-fit: contain; background: #fff; border: 1px solid #E9E5F5; }
.nk4-ogl-logo-k, .nk4-ogl-logo-ini { display: inline-flex; align-items: center; justify-content: center; }
.nk4-ogl-logo-ini { background: #1A1533; color: #fff; font-weight: 800; font-size: 24px; letter-spacing: -.02em; }
.nk4-ogl-clan { display: inline-block; margin-left: 10px; font-size: 13px; color: #9E9AB4; }
.nk4-ogl-opis { margin: 8px 0 0; max-width: 640px; font-size: 14.5px; line-height: 1.55; color: #1A1533; }
/* profil oglasivaca: zaglavlje se NE skriva na mobitelu (lista ga skriva) */
@media (max-width: 979px) {
  .nk4-wrap.nk4-profil .nk4-zag-red { display: flex; flex-direction: column; gap: 10px; }
  .nk4-wrap.nk4-profil .nk4-zaglavlje { padding: 14px 0 10px; }
  .nk4-profil .nk4-ogl-logo { width: 56px; height: 56px; border-radius: 14px; }
  .nk4-profil .nk4-ogl-glava h1 { font-size: 24px; }
}
.nk4-profil .nk4-zag-red .nk4-ogl-opis { flex-basis: 100%; max-width: 760px; margin: 0; }