/* Potražnja „Bento 2“ (potraznja-test.php): samo ono čega nema na naslovnoj. Tokeni, pločice, dugmad, polje kao poruka, obrazac
   potražnje, agent i kraj su iz bento.css (učitava se prije ovoga). Pokret samo transform/opacity; mirnu verziju daje bento.css. */

/* prvi ekran: lijevo polje „Opišite svoju nekretninu“, desno ploča s kupcima; redovi rastu ako tekst traži više mjesta */
.pz-mreza { grid-auto-rows: minmax(132px, auto); }
/* tekst je viši nego na naslovnoj, pa fotografija tamni ranije; tanki kurziv dobije blagu sjenku preko svijetlih krovova */
.pz-glavna::before { background: linear-gradient(90deg, rgba(10,10,10,.42), rgba(10,10,10,.12) 55%, rgba(10,10,10,0) 80%),
  linear-gradient(180deg, rgba(10,10,10,.12), rgba(10,10,10,.28) 30%, rgba(10,10,10,.86)); }   /* lijevo tamnije: tekst je lijevo, a Stari Grad je pun krovova */
/* kadrovi grada se smjenjuju (potraznja.js): pretapanje 1,1 s, blago približavanje dok je kadar na ekranu; odlazeći kadar zadrži svoje
   približavanje dok nestaje (ista animacija u .ode), da ne skoči */
.pz-kadar { opacity: 0; transition: opacity 1.1s ease; animation: none; }
.pz-kadar.vidi, .pz-kadar.ode { animation: pz-kb 9s linear forwards; }
.pz-kadar.vidi { opacity: 1; }
@keyframes pz-kb { to { transform: scale(1.07); } }
.pz-kadar-trake { top: 18px; left: 24px; right: 24px; }
.pz-kadar-trake i.tece::after { animation-duration: 7s; }
.pz-kadar-ime { position: absolute; z-index: 2; left: 24px; top: 32px; padding: 8px 13px; border-radius: 99px; background: rgba(14,14,14,.32); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px); color: rgba(255,255,255,.92); font: 500 12.5px/1 var(--sans); }
.pz-kadar-ime span { font-weight: 650; color: #fff; }
.pz-h1 { font-size: clamp(50px, 5.4vw, 86px); margin: 16px 0 24px; }
.pz-h1 em { font-size: .6em; line-height: 1.05; margin-top: .14em; text-shadow: 0 2px 22px rgba(0,0,0,.45); }
.pz-glavna.glavna .cipovi i { display: inline-block; }   /* naslovna skriva peti čip; ovdje su sva četiri bitna */
.pz-pr-forma .poruka-dg span { margin-right: -2px; }
.pz-pr-forma .poruka-polje { transition: box-shadow .2s; }
.pz-pr-forma .poruka-polje:focus-within { box-shadow: 0 0 0 2px var(--gold-l), 0 20px 60px -20px rgba(0,0,0,.5); }
.bento .pz-pr-forma input:focus-visible { outline: none; }   /* okvir je na cijelom polju (iznad), ne samo na tekstu */
html:not(.js) .pz-pr-forma { display: none; }   /* bez JS-a polje ne radi ništa: ostaje lista kupaca */
.pz-za-kupce { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font: 500 14px/1.2 var(--sans); color: rgba(255,255,255,.82); }
.pz-za-kupce b { font-weight: 650; color: #fff; border-bottom: 1px solid var(--gold-l); }
.pz-za-kupce:hover b { color: var(--gold-l); }
.pz-poruka { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 0 0 12px; padding: 18px 24px; border-radius: 22px; background: var(--ink); color: #fff; font-size: 15px; }
.pz-poruka b { font-weight: 650; } .pz-poruka span { color: rgba(255,255,255,.75); }
.pz-poruka.greska-poruka { background: #7A1F14; }

/* ploča desno: prije opisa broj kupaca i šta traže (izmjenjuje se), poslije opisa kupci za tu nekretninu, klizač cijene i ponuda */
.pz-rez { grid-column: span 5; grid-row: span 4; padding: 30px 32px 26px; display: flex; flex-direction: column; color: var(--on-dark); }
.pz-rez-prije, .pz-rez-poslije { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.pz-rez small { color: var(--dark-muted); display: flex; align-items: center; gap: 10px; }
.pz-rez-broj { display: flex; align-items: flex-end; gap: 18px; margin-top: auto; }
.pz-rez-broj b { font: 800 150px/.8 var(--sans); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.pz-rez-broj span { font: 600 20px/1.2 var(--sans); letter-spacing: -.02em; padding-bottom: 8px; }
.pz-uzivo { display: grid; gap: 7px; padding: 16px 18px; border-radius: 18px; background: var(--dark2); overflow: hidden; }
.pz-uzivo span { font: 600 10.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-l); }
.pz-uzivo b { font: 600 19px/1.3 var(--sans); letter-spacing: -.02em; transition: transform .32s var(--ease), opacity .32s; }
.pz-uzivo b.ode { transform: translateY(-110%); opacity: 0; } .pz-uzivo b.dolazi { transform: translateY(110%); opacity: 0; transition: none; }
.pz-rez-uputa { font-size: 14px; color: var(--dark-muted); }
.pz-primjer { font: 600 10px/1 var(--sans); font-style: normal; letter-spacing: .12em; padding: 5px 8px; border-radius: 99px; background: rgba(216,190,143,.16); color: var(--gold-l); }
.pz-rez-naslov { font: 750 30px/1.08 var(--sans); letter-spacing: -.035em; }
.pz-rez-naslov b { display: block; font: 800 64px/.9 var(--sans); letter-spacing: -.05em; color: var(--gold-l); font-variant-numeric: tabular-nums; }
.pz-rez-naslov.nema b { font-size: 30px; line-height: 1.08; letter-spacing: -.035em; display: inline; }
.pz-rez-lista { display: grid; gap: 8px; }
.pz-rez-lista a { display: grid; gap: 4px; padding: 13px 16px; border-radius: 16px; background: var(--dark2); border: 1px solid var(--dark-line); animation: pop .3s var(--ease); transition: border-color .2s; }
.pz-rez-lista a:hover { border-color: var(--gold-l); }
.pz-rez-lista b { font: 700 11px/1 var(--sans); letter-spacing: .14em; color: var(--gold-l); }
.pz-rez-lista span { font: 600 15.5px/1.3 var(--sans); letter-spacing: -.01em; }
.pz-rez-lista em { font-style: normal; font-size: 12.5px; color: var(--dark-muted); }
.pz-rez-lista li.jos { font-size: 13px; color: var(--dark-muted); padding-left: 4px; }
.pz-rez-dg { margin-top: auto; }
.pz-rez-nap { font-size: 11.5px; color: var(--dark-muted); margin-top: -4px; }
/* klizač „Vaša cijena“ na tamnoj ploči: zlatne tačke su budžeti kupaca */
.pz-prc { --line-s: rgba(255,255,255,.2); padding: 14px 16px 10px; border-radius: 18px; background: var(--dark2); }
.pz-prc-glava { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pz-prc-glava label { font: 600 10.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--dark-muted); }
.pz-prc-glava output { font: 750 22px/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pz-prc-traka { position: relative; margin-top: 6px; }
.pz-prc-traka input { position: relative; z-index: 2; }
.pz-prc-tacke { position: absolute; left: 13px; right: 13px; top: 9px; height: 10px; }
.pz-prc-tacke i { position: absolute; top: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--dark2); border: 2px solid var(--gold); transition: background .2s, transform .2s var(--ease); }
.pz-prc-tacke i.moze { background: var(--gold); transform: scale(1.3); }
.pz-prc-nap { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dark-muted); }
.pz-prc-nap i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; }

.pz-traka { margin-top: 56px; }
.pz-traka span { color: var(--ink); }

/* 01 kupci: slajder (prst, miš, strelice) */
.pz-kupci { padding-top: 72px; }
.pz-traka + .pz-kupci { padding-top: 64px; }
.pz-kupci-desno { display: grid; gap: 18px; justify-items: end; }
.pz-str { display: flex; gap: 8px; }
.pz-str button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-j); background: var(--paper); display: grid; place-items: center; transition: background .2s, color .2s, opacity .2s; }
.pz-str button:hover:not(:disabled) { background: var(--ink); color: #fff; }
.pz-str button:disabled { opacity: .35; cursor: default; }
.pz-filteri { margin: -12px 0 20px; }
.pz-filteri button i { font-style: normal; opacity: .55; margin-left: 4px; font-variant-numeric: tabular-nums; }
.pz-klizac { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 3); gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding: 6px 4px 20px; margin: -6px -4px 0; outline-offset: 6px; }
.pz-klizac::-webkit-scrollbar { display: none; }
.pz-klizac > * { scroll-snap-align: start; scroll-margin: 4px; }
.pz-klizac.vuce { scroll-snap-type: none; cursor: grabbing; } .pz-klizac.vuce * { user-select: none; -webkit-user-select: none; }
.pz-napredak { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pz-napredak i { display: block; height: 100%; width: var(--w, 30%); border-radius: 3px; background: var(--gold); transform: translateX(var(--x, 0%)); }
.pz-kupac { padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); scroll-margin-top: 24px; transition: box-shadow .25s, opacity .25s; }
.pz-kupac.sakrij { display: none; }
.pz-kupac:target { box-shadow: 0 0 0 2px var(--gold); }
.pz-k-gore { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pz-sifra { font: 700 11.5px/1 var(--sans); letter-spacing: .14em; color: var(--gold-t); flex: none; }
.pz-placanje { font-size: 12.5px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-dijeli { margin-left: auto; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-j); transition: background .2s; }
.pz-dijeli:hover { background: var(--bg2); }
.pl small.pz-vrsta { font: 600 13px/1.35 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.pz-kupac h3 { font: 650 22px/1.2 var(--sans); letter-spacing: -.025em; }
.pz-drugo { font-size: 13px; color: var(--muted); }
.pz-budzet { font: 750 30px/1 var(--sans); letter-spacing: -.04em; margin-top: 10px; font-variant-numeric: tabular-nums; }
.pz-budzet.bez { font: 500 14px/1.3 var(--sans); letter-spacing: 0; color: var(--muted); }
.pz-tagovi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pz-tagovi li { padding: 6px 10px; border-radius: 99px; background: var(--chip); font: 500 12.5px/1.25 var(--sans); }
.pz-tagovi li.jos { background: transparent; border: 1px dashed var(--line-j); color: var(--muted); cursor: help; }
.pz-k-dno { display: flex; gap: 8px; margin-top: auto; padding-top: 18px; }
.pz-k-dno .dg:first-child { flex: 1; min-width: 0; height: 48px; padding: 0 18px; }
.pz-wa { width: 48px; height: 48px; padding: 0; flex: none; }
.pz-prazno { padding: 32px; display: grid; gap: 12px; justify-items: start; }
.pz-prazno h3 { font: 650 24px/1.15 var(--sans); letter-spacing: -.025em; } .pz-prazno p { color: var(--muted); }
/* istaknuti kupac: tamna kartica s tramvajskom linijom */
.pz-istaknuti { border-color: transparent; color: var(--on-dark); }
.pz-istaknuti .pz-sifra { color: var(--gold-l); }
.pz-istaknuti .pz-placanje { color: var(--dark-muted); }
.pz-istaknuti .pz-dijeli { border-color: var(--dark-line); } .pz-istaknuti .pz-dijeli:hover { background: rgba(255,255,255,.08); }
.pz-ist-naslov { font: 750 30px/1.02 var(--sans); letter-spacing: -.04em; margin-bottom: 8px; }
.pz-ist-naslov em { display: block; font: italic 500 1.06em/1.1 var(--serif); letter-spacing: -.01em; color: var(--gold-l); margin-top: 4px; }
.pz-istaknuti .pz-tagovi li { background: rgba(255,255,255,.08); color: var(--on-dark); }
.pz-tramvaj { position: relative; margin-top: 6px; }
.pz-tr-linija { position: absolute; left: 7px; width: 80%; top: 6px; height: 2px; background: var(--dark-line); }
.pz-tr-linija::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold), rgba(184,149,90,.15)); }
.pz-tr-tram { position: absolute; inset: 0; animation: tram 7s cubic-bezier(.45,0,.55,1) infinite alternate; }
.pz-tr-tram b { position: absolute; left: -7px; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold-l); box-shadow: 0 0 0 6px rgba(216,190,143,.18), 0 0 18px rgba(216,190,143,.6); }
@keyframes tram { to { transform: translateX(100%); } }
.pz-tr-stanice { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); font: 500 12px/1.25 var(--sans); }
.pz-tr-stanice li { display: grid; gap: 8px; align-content: start; padding-right: 4px; }
.pz-tr-stanice li i { width: 14px; height: 14px; border-radius: 50%; background: var(--dark); border: 2px solid rgba(242,242,239,.7); }
.pz-tr-stanice li.prvi { color: var(--gold-l); font-weight: 650; } .pz-tr-stanice li.prvi i { background: var(--gold); border-color: var(--gold); }
.pz-tr-stanice small { display: block; font: 600 9.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dark-muted); margin-top: -4px; }
.pz-tr-nap { font-size: 12.5px; color: var(--dark-muted); margin-top: 8px; }
/* kupci prema opisu vlasnika: odgovaraju (zlatni okvir, razlozi, idu naprijed) ili ne (utišani, uz razlog) */
.pz-kupac.ne-odgovara { opacity: .45; }
.pz-kupac.odgovara { box-shadow: 0 0 0 2px var(--gold), 0 22px 40px -30px rgba(132,102,58,.6); }
.pz-istaknuti.odgovara { box-shadow: 0 0 0 2px var(--gold-l), 0 22px 40px -30px rgba(216,190,143,.5); }
.pz-razlozi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 600 12px/1 var(--sans); margin-top: 8px; }
.pz-razlozi b { flex-basis: 100%; font: 700 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-t); margin-bottom: 2px; }
.pz-razlozi i { font-style: normal; padding: 6px 10px; border-radius: 99px; background: rgba(184,149,90,.16); color: var(--gold-t); }
.pz-razlozi i.ne { background: var(--chip); color: var(--muted); }
.pz-istaknuti .pz-razlozi b { color: var(--gold-l); } .pz-istaknuti .pz-razlozi i { background: rgba(216,190,143,.16); color: var(--gold-l); } .pz-istaknuti .pz-razlozi i.ne { background: rgba(255,255,255,.08); color: var(--dark-muted); }

/* 02 za vlasnike */
.pz-kako { padding-top: 40px; }
.pz-koraci { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pz-koraci > li { padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; min-height: 280px; }
.pz-koraci > li > em { font: 800 64px/.85 var(--sans); letter-spacing: -.06em; color: var(--gold); font-style: normal; }
.pz-koraci h3 { font: 650 22px/1.15 var(--sans); letter-spacing: -.025em; margin-top: auto; }
.pz-koraci p { font-size: 15px; color: var(--muted); }
.pz-kako-cta > small { color: var(--dark-muted); }
.pz-kako-cta h3 { font-size: 28px; } .pz-kako-cta h3 em { font: italic 500 1.08em/1 var(--serif); color: var(--gold-l); }
.pz-kako-cta .dg { align-self: flex-start; margin-top: 6px; }

/* 03 za kupce: strana uz obrazac (kartica se slaže dok kupac piše, bento.js) */
.pz-po-prazno { color: var(--dark-muted); font-size: 15px; padding: 18px 20px; border: 1px dashed var(--dark-line); border-radius: 18px; }
#po-moja:not([hidden]) + .pz-po-prazno { display: none; }
.pz-po-koraci { display: grid; gap: 10px; margin-top: 10px; list-style: none; counter-reset: k; }
.pz-po-koraci li { counter-increment: k; display: flex; gap: 12px; font-size: 14.5px; color: var(--on-dark); }
.pz-po-koraci li::before { content: counter(k, decimal-leading-zero); color: var(--gold-l); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ponuda vlasnika: prozor (na mobitelu odozdo) */
body.pz-otvoren { overflow: hidden; }
.pz-list { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(12,12,12,.55); opacity: 0; transition: opacity .2s; }
.pz-list.on { opacity: 1; }
.pz-list-okvir { position: relative; width: min(100%, 580px); max-height: calc(100vh - 32px); overflow: auto; overscroll-behavior: contain; background: var(--paper); color: var(--ink); border-radius: 28px; padding: 30px 30px 26px; display: grid; gap: 12px; transform: translateY(18px); transition: transform .28s var(--ease); box-shadow: 0 40px 90px -30px rgba(0,0,0,.5); }
.pz-list.on .pz-list-okvir { transform: none; }
.pz-x { position: absolute; right: 16px; top: 16px; width: 40px; height: 40px; border-radius: 50%; background: var(--bg2); font: 300 26px/1 var(--sans); display: grid; place-items: center; }
.pz-list-nad { font: 600 10.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .pz-list-nad b { color: var(--gold-t); }
.pz-list-okvir > h3 { font: 700 28px/1.05 var(--sans); letter-spacing: -.035em; padding-right: 44px; }
.pz-list-okvir > h3 em { font: italic 500 1.04em/1 var(--serif); color: var(--gold-t); }
.pz-list-trazi { font-size: 14px; color: var(--muted); }
.pz-list .pr-forma { padding: 0; margin-top: 4px; }
.bento .pz-forma textarea { width: 100%; border-radius: 12px; border: 1px solid var(--line-j); padding: 12px 14px; background: var(--bg2); font: 500 15px/1.4 var(--sans); outline: none; resize: vertical; color: var(--ink); }
.bento .pz-forma textarea:focus { border-color: var(--gold); background: #fff; }
.bento .pz-forma [aria-invalid="true"] { border-color: #B42318; }
.pz-hvala { display: grid; gap: 12px; } .pz-hvala h3 { font: 700 28px/1 var(--sans); letter-spacing: -.035em; } .pz-hvala p { color: var(--muted); }
/* bez JS-a (?ponudi=ŠIFRA): obrazac je običan dio stranice */
.pz-list[data-bezjs] { position: static; display: block; padding: 16px; background: none; opacity: 1; }
.pz-list[data-bezjs] .pz-list-okvir { transform: none; margin: 0 auto; max-height: none; box-shadow: none; border: 1px solid var(--line); }
.pz-list[data-bezjs] .pz-x { display: none; }
.pz-obavijest { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 95; padding: 13px 20px; border-radius: 99px; background: var(--ink); color: #fff; font: 600 14px/1 var(--sans); white-space: nowrap; box-shadow: 0 16px 40px -12px rgba(0,0,0,.5); }

@media (prefers-reduced-motion: reduce) { .pz-kadar-trake { display: none; } }   /* mirna verzija: jedan kadar, bez traka */
@media (max-width: 1100px) {
  .pz-rez { grid-column: span 6; grid-row: auto; min-height: 420px; }
  .pz-klizac { grid-auto-columns: calc((100% - 12px) / 2); }
  .pz-koraci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pz-glavna { min-height: 580px; }
  .pz-h1 { font-size: 50px; margin: 12px 0 18px; }
  .pz-kadar-trake { top: 14px; left: 16px; right: 16px; } .pz-kadar-ime { left: 16px; top: 26px; font-size: 12px; }
  .pz-glavna .poruka-dg span { display: none; } .pz-glavna .poruka-dg { width: 46px; padding: 0; }   /* samo strelica: više mjesta za tekst */
  .pz-poruka { padding: 16px 18px; font-size: 14px; }
  .pz-rez { order: 1; grid-column: span 2; min-height: 0; padding: 22px 20px 20px; }
  .pz-rez-broj { margin-top: 8px; } .pz-rez-broj b { font-size: 96px; } .pz-rez-broj span { font-size: 17px; }
  .pz-uzivo b { font-size: 17px; }
  .pz-rez-naslov { font-size: 24px; } .pz-rez-naslov b { font-size: 52px; }
  .pz-rez-dg { margin-top: 6px; }
  .pz-traka { margin-top: 36px; }
  .pz-kupci { padding-top: 44px; }
  .pz-kupci-desno { justify-items: start; } .pz-str { display: none; }
  .pz-filteri { margin: 0 0 14px; width: 100%; }
  .pz-klizac { grid-auto-columns: 86%; gap: 10px; }
  .pz-kupac { padding: 20px 18px 18px; }
  .pz-budzet { font-size: 26px; }
  .pz-tr-stanice { font-size: 11px; } .pz-tr-stanice small { font-size: 8.5px; letter-spacing: .06em; }
  .pz-koraci { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pz-koraci > li { min-height: 0; padding: 22px 20px; } .pz-koraci > li > em { font-size: 44px; } .pz-koraci h3 { margin-top: 6px; }
  .pz-list { place-items: end stretch; padding: 0; }
  .pz-list-okvir { width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0; padding: 22px 18px calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); }
  .pz-list-okvir > h3 { font-size: 24px; }
  .pz-list[data-bezjs] { padding: 10px; } .pz-list[data-bezjs] .pz-list-okvir { border-radius: 22px; }
}