/* „Našli su kupca“ (includes/bento_nasli.php): špil rezervisanih nekretnina u izgledu „Bento 2“. Pokret samo transform/opacity,
   mirna verzija bez njega; bez JS-a karte su red koji se lista prstom. */
.nasli { padding: 96px 16px 0; }
.nasli .sek-glava { padding: 0 calc(var(--g) - 16px); }
.nk-mreza { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 12px; }
.nk-ploca { grid-column: span 7; grid-row: span 2; padding: 48px 56px 22px; display: flex; flex-direction: column; min-height: 660px; }
.nk-spil { position: relative; flex: 1; min-height: 0; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.nk-karta { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; background: #2A2A28; color: #fff; transform-origin: 50% 0; transition: transform .5s var(--ease), opacity .3s; cursor: grab; }
.nk-karta[data-p="0"] { z-index: 3; }
.nk-karta[data-p="1"] { z-index: 2; transform: translateY(-18px) scale(.955) rotate(2.2deg); }
.nk-karta[data-p="2"] { z-index: 1; transform: translateY(-32px) scale(.91) rotate(-2.6deg); }
.nk-karta:not([data-p="0"]) { pointer-events: none; }
.nk-karta.vuce { transition: none; cursor: grabbing; }
.nk-karta.bez { transition: none; }
.nk-karta.ode { z-index: 4; opacity: 0; pointer-events: none; }
.nk-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(1.2); transform-origin: 50% 0; pointer-events: none; }   /* odsiječe donji pojas s natpisom i vodenim žigom na našim fotografijama */
.nk-siva { filter: grayscale(1); transition: opacity .9s .12s; }
.nk-karta.ziv .nk-siva { opacity: 0; }
.nk-karta:not(.nk-zadnja)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08) 40%, rgba(0,0,0,.8)); pointer-events: none; }
.nk-zig { position: absolute; z-index: 2; right: 18px; top: 18px; width: clamp(122px, 13vw, 178px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: conic-gradient(from 210deg, #F8E8BF, #C9A266, #8A6A34, #D8BE8F, #FBF0D2, #B8955A, #7E5E2C, #E6CF9F, #F8E8BF); box-shadow: 0 14px 34px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,246,222,.65), inset 0 -3px 8px rgba(72,50,16,.35); color: #1F1707; transform: rotate(-11deg) scale(1.6); opacity: 0; transition: transform .38s cubic-bezier(.3,1.35,.5,1), opacity .16s; pointer-events: none; }
.nk-zig::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.8) 50%, rgba(255,255,255,0) 62%); transform: translateX(-120%); }
.nk-karta.ziv .nk-zig { transform: rotate(-11deg); opacity: 1; }
.nk-karta.ziv .nk-zig::after { transform: translateX(120%); transition: transform 1s .3s var(--ease); }
.nk-zig svg { display: block; width: 100%; height: 100%; }
.nk-z-tacke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 6.25; opacity: .55; }
.nk-z-krug, .nk-z-crta { fill: none; stroke: currentColor; stroke-width: 1; opacity: .7; }
.nk-z-rub { fill: currentColor; font: 700 11.5px var(--sans); letter-spacing: .08em; }
.nk-z-zvijezda { fill: currentColor; font: 400 15px var(--sans); }
.nk-z-rijec { fill: currentColor; stroke: currentColor; stroke-width: .35; font: italic 500 26px var(--serif); }
.nk-dno { position: absolute; z-index: 3; left: 26px; right: 26px; bottom: 24px; display: grid; justify-items: start; gap: 4px; }
.nk-dno small { color: rgba(255,255,255,.82); }
.nk-dno h3 { font: 700 clamp(32px, 3.4vw, 48px)/1.02 var(--sans); letter-spacing: -.04em; }
.nk-dno > span { font-size: 15px; color: rgba(255,255,255,.82); }
.nk-oglas { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 14px/1 var(--sans); }
.nk-zadnja { padding: 40px; display: flex; flex-direction: column; background: var(--dark2); border: 1px solid var(--dark-line); }
.nk-zadnja small { color: var(--dark-muted); }
.nk-zadnja h3 { font: 750 clamp(40px, 4.4vw, 64px)/1 var(--sans); letter-spacing: -.045em; margin-top: auto; }
.nk-zadnja h3 em { display: block; font: italic 500 1.04em/1.05 var(--serif); letter-spacing: -.01em; color: var(--gold-l); }
.nk-zadnja p { color: var(--dark-muted); margin: 16px 0 24px; max-width: 420px; }
.nk-zadnja .dg { align-self: flex-start; }
.nk-komande { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--on-dark); }
.nk-brojac { font: 500 14px/1 var(--sans); color: var(--dark-muted); font-variant-numeric: tabular-nums; }
.nk-brojac b { color: var(--on-dark); font-weight: 700; }
.nk-hint { margin-left: auto; font-size: 13px; color: var(--dark-muted); }
.nk-hint + .nk-str { margin-left: 8px; }
.nk-str { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--dark-line); transition: background .2s, color .2s; }
.nk-str:hover { background: var(--on-dark); color: var(--ink); }
.nk-tile { grid-column: span 5; padding: 34px; display: flex; flex-direction: column; align-items: flex-start; min-height: 0; }
.nk-tile h3 { font: 700 clamp(28px, 2.6vw, 38px)/1.05 var(--sans); letter-spacing: -.035em; margin-top: 12px; }
.nk-tile p { color: var(--muted); margin: 12px 0 22px; max-width: 460px; }
.nk-tile .dg { margin-top: auto; }
.nk-vlasnik { background: #F3EEE4; }
@media (hover: hover) and (pointer: fine) { .nk-hint { display: none; } .nk-str:first-of-type { margin-left: auto; } }
html:not(.js) .nk-spil { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; touch-action: auto; min-height: 480px; }
html:not(.js) .nk-karta { position: relative; inset: auto; flex: 0 0 88%; scroll-snap-align: start; cursor: auto; }
html:not(.js) .nk-siva { display: none; }
html:not(.js) .nk-zig { transform: rotate(-11deg); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nk-siva { display: none; }
  .nk-zig { transform: rotate(-11deg); opacity: 1; }
  .nk-zig::after { display: none; }
}
@media (max-width: 1100px) {
  .nk-mreza { grid-auto-rows: auto; }
  .nk-ploca, .nk-tile { grid-column: 1 / -1; grid-row: auto; }
  .nk-ploca { padding: 44px 40px 20px; min-height: 620px; }
}
@media (max-width: 760px) {
  .nasli { padding: 56px 10px 0; }
  .nasli .sek-glava { padding: 0 8px; }
  .nk-mreza { gap: 8px; }
  .nk-ploca { padding: 34px 14px 12px; min-height: 0; }
  .nk-spil { flex: none; height: min(116vw, 500px); }
  .nk-karta { border-radius: 18px; }
  .nk-karta[data-p="1"] { transform: translateY(-12px) scale(.955) rotate(1.8deg); }
  .nk-karta[data-p="2"] { transform: translateY(-22px) scale(.91) rotate(-2.2deg); }
  .nk-dno { left: 20px; right: 20px; bottom: 14px; }
  .nk-zig { right: 12px; top: 12px; }
  .nk-zadnja { padding: 26px 22px; }
  .nk-komande { padding: 0 4px; margin-top: 12px; }
  .nk-tile { padding: 24px 22px; }
  .nk-tile .dg { width: 100%; }
  .nk-tile p { margin-bottom: 18px; }
  html:not(.js) .nk-spil { height: auto; min-height: 460px; }
}