/* ch01 · Slika 1.1 "Gdje je Privlaka" (maps team) */
#pogl-01 #where-map{padding:0;position:relative;background:var(--white)}
#pogl-01 #where-map .w-pin{position:sticky;top:12px;overflow:hidden;background:#0f2f52}
#pogl-01 #where-map.w-static .w-pin{position:relative;top:0}
#pogl-01 .w-stage{position:absolute;inset:0}
/* engine (assets/maps/satmap.js) */
#pogl-01 .sm-stage{overflow:hidden;background:#0f2f52;contain:strict}
#pogl-01 .sm-layers,#pogl-01 .sm-labels{position:absolute;inset:0;pointer-events:none}
#pogl-01 .sm-img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;will-change:transform,opacity;user-select:none}
#pogl-01 .sm-svg{position:absolute;inset:0;pointer-events:none;overflow:visible}
#pogl-01 .sm-lb{position:absolute;left:0;top:0;will-change:transform,opacity;white-space:nowrap}
#pogl-01 .sm-lb > span{position:absolute;left:0;top:0;display:block;font:600 14px/1.15 var(--sans);color:#fff;letter-spacing:.01em;
  text-shadow:0 0 3px rgba(10,20,30,.95),0 0 1px rgba(10,20,30,1),0 1px 5px rgba(10,20,30,.6);transform:translate(10px,-50%)}
#pogl-01 .sm-lb small{display:block;font:500 11.5px/1.2 var(--sans);opacity:.92;margin-top:2px}
#pogl-01 .sm-lb.dot:before,#pogl-01 .sm-lb.zone:before{content:"";position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px var(--ink),0 1px 4px rgba(0,0,0,.5)}
#pogl-01 .sm-lb.y:before{background:var(--yellow);width:14px;height:14px;left:-7px;top:-7px}
#pogl-01 .sm-lb.y > span{font-size:16px;color:var(--yellow);transform:translate(12px,-50%)}
#pogl-01 .sm-lb.g:before{background:var(--g5)}
#pogl-01 .sm-lb.g > span{color:#eceae2;font-weight:500}
#pogl-01 .sm-lb.big > span{font:600 clamp(18px,1.9vw,26px)/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;transform:translate(-50%,-50%)}
#pogl-01 .sm-lb.ctx > span{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82);transform:translate(-50%,-50%)}
#pogl-01 .sm-lb.sea > span{font:italic 400 16px/1.1 var(--serif);color:#cfe3f2;transform:translate(-50%,-50%);text-shadow:0 0 4px rgba(5,20,40,.9)}
#pogl-01 .sm-lb.isl > span{font:italic 500 14px/1 var(--serif);transform:translate(-50%,-50%)}
#pogl-01 .sm-lb.tiny > span{font:500 12.5px/1.2 var(--sans);transform:translate(-50%,-50%)}
#pogl-01 .sm-lb.tiny.l > span{transform:translate(-50%,40%)}
#pogl-01 .sm-lb.sea2 > span{font:600 12.5px/1.2 var(--sans);transform:translate(-50%,-140%)}
#pogl-01 .sm-lb.opc > span{font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);transform:translate(-50%,-50%)}
#pogl-01 .sm-lb.road > span{font:600 12.5px/1 var(--sans);transform:translate(-50%,-50%) rotate(46deg) translateY(-12px)}
#pogl-01 .sm-lb.yc > span{color:var(--ink);text-shadow:none;background:var(--yellow);border-radius:7px;padding:7px 10px 6px;font:600 13px/1.15 var(--sans);letter-spacing:.04em;text-transform:uppercase;transform:translate(-50%,-50%);box-shadow:0 0 0 1px var(--ink),0 2px 8px rgba(0,0,0,.35)}
#pogl-01 .sm-lb.yc.parc > span{text-transform:none;letter-spacing:.02em}
#pogl-01 .sm-lb.yc small{text-transform:none;letter-spacing:0;font-weight:500;font-size:12.5px}
#pogl-01 .sm-lb.yc.l > span{transform:translate(calc(-100% - 14px),-50%);text-align:right}
#pogl-01 .sm-lb.zone:before{background:var(--yellow);border-radius:2px}
#pogl-01 .sm-lb.zone > span{font-size:12.5px;color:var(--yellow)}
/* lines */
#pogl-01 .w-bd{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1;stroke-dasharray:5 4}
#pogl-01 .w-bd.hr{stroke:rgba(255,255,255,.9);stroke-width:1.4}
#pogl-01 .w-county{fill:rgba(229,242,58,.12);stroke:var(--yellow);stroke-width:2.2;stroke-linejoin:round}
#pogl-01 .w-opc{fill:rgba(229,242,58,.06);stroke:var(--yellow);stroke-width:2;stroke-dasharray:7 4;stroke-linejoin:round}
#pogl-01 .w-parcel{fill:rgba(229,242,58,.38);stroke:var(--yellow);stroke-width:2.6;stroke-linejoin:round}
#pogl-01 .w-sea{fill:none;stroke:#fff;stroke-width:1.6;stroke-dasharray:2 5;stroke-linecap:round}
/* step pills, caption, skip */
#pogl-01 .w-steps{position:absolute;left:16px;top:16px;right:16px;display:flex;flex-wrap:wrap;gap:6px;z-index:3;pointer-events:none}
#pogl-01 .w-steps button{pointer-events:auto;display:flex;align-items:center;gap:7px;font:500 13px/1 var(--sans);color:var(--ink);background:rgba(246,246,242,.9);border:1px solid var(--line);border-radius:9px;padding:7px 11px 7px 7px;cursor:pointer;transition:background .25s}
#pogl-01 .w-steps button i{font-style:normal;font:600 11px/1 var(--sans);width:19px;height:19px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line)}
#pogl-01 .w-steps button:hover{background:var(--white)}
#pogl-01 .w-steps button.on{background:var(--yellow)}
#pogl-01 .w-steps button.on i{background:var(--ink);color:var(--yellow);border-color:var(--ink)}
#pogl-01 .w-cap{position:absolute;left:16px;bottom:16px;z-index:3;max-width:420px;background:var(--paper);border:1px solid var(--line);padding:11px 15px 12px;font:400 15px/1.45 var(--sans);color:var(--ink)}
#pogl-01 .w-cap b{display:block;font:600 11.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
#pogl-01 .w-skip{position:absolute;right:16px;bottom:16px;z-index:3;font:500 12.5px/1 var(--sans);letter-spacing:.04em;color:var(--ink);background:rgba(246,246,242,.9);border:1px solid var(--line);border-radius:9px;padding:9px 12px;text-decoration:none}
#pogl-01 #where-map.w-static .w-skip{display:none}
#pogl-01 .sm-fail:after{content:"Satelitska snimka se nije učitala.";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:500 13px var(--sans);color:#fff}
@media (max-width:820px){
  #pogl-01 #where-map .w-pin{top:8px}
  #pogl-01 .w-steps{left:10px;top:10px;right:10px;gap:5px}
  #pogl-01 .w-steps button{padding:5px}
  #pogl-01 .w-steps button span{display:none}
  #pogl-01 .w-steps button.on span{display:none}
  #pogl-01 .w-cap{left:10px;right:10px;bottom:10px;max-width:none;font-size:14px;padding:9px 12px 10px}
  #pogl-01 .w-skip{top:10px;bottom:auto;right:10px;padding:7px 9px;font-size:12px}
  #pogl-01 .sm-lb > span{font-size:13px}
  #pogl-01 .sm-lb.sea > span{font-size:14px}
}
#pogl-01 .sm-lb.zt > span{font:600 13px/1 var(--sans);color:var(--yellow);transform:translate(8px,-50%)}
#pogl-01 #where-src a{color:inherit}
#pogl-01 .sm-lb.lt > span{transform:translate(calc(-100% - 10px),-50%);text-align:right}
#pogl-01 .sm-lb.yc.r > span{transform:translate(0,-50%)}
#pogl-01 .sm-lb.y.ul > span{transform:translate(calc(-100% - 9px),calc(-100% - 3px));text-align:right}
#pogl-01 .sm-lb.y small{font-weight:600}
#pogl-01 .sm-img.w-feather{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect}
@media (max-width:820px){
  #pogl-01 .sm-lb.g.lt > span{transform:translate(calc(-100% + 4px),11px)}
  #pogl-01 .sm-lb.y.ul > span{transform:translate(-26px,13px);text-align:left}
  #pogl-01 .sm-lb.bih{display:none}
}
