/* srdjan 2026-10-19 - Instagram priče: krugovi s IG obrubom (pogledane sive), preglednik 9:16 preko cijelog ekrana kao na Instagramu */
.ig{max-width:var(--tz-sirina,1320px);margin:0 auto}
.ig-krugovi{list-style:none;margin:0;padding:8px 2px 14px;display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;justify-content:safe center}
.ig-krugovi::-webkit-scrollbar{display:none}
.ig-krugovi li{flex:none;scroll-snap-align:start}
.ig-krug{display:flex;flex-direction:column;align-items:center;gap:10px;border:0;background:none;padding:0;cursor:pointer;width:clamp(96px,11vw,150px);font:inherit}
.ig-prsten{position:relative;display:block;width:100%;height:0;padding-bottom:100%;border-radius:50%;background:conic-gradient(from 200deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75);transition:transform .2s}
/* fotografija apsolutno u prstenu — krug ostaje krug i kod uspravnih fotografija */
.ig-prsten img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:cover;border-radius:50%;border:4px solid #fff;display:block;background:#eee;box-sizing:border-box}
.ig-krug:hover .ig-prsten{transform:scale(1.04)}
.ig-krug.pogledano .ig-prsten{background:#d4d4d8}
.ig-ime{font:500 14px/1.25 var(--tz-font,system-ui);color:#1d1d1f;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* preglednik */
.ig-pregled{position:fixed;inset:0;z-index:200;background:rgba(18,18,18,.96);display:flex;align-items:center;justify-content:center}
.ig-pregled[hidden]{display:none}
.ig-okvir{position:relative;height:min(92vh,880px);aspect-ratio:9/16;max-width:100vw;border-radius:14px;overflow:hidden;background:#000;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.ig-slika{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ig-okvir::before,.ig-okvir::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.ig-okvir::before{top:0;height:120px;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.ig-okvir::after{bottom:0;height:230px;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.ig-trake{position:absolute;z-index:3;top:10px;left:10px;right:10px;display:flex;gap:4px}
.ig-trake span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.ig-trake span i{display:block;height:100%;width:0;background:#fff}
.ig-glava{position:absolute;z-index:3;top:22px;left:12px;right:8px;display:flex;align-items:center;gap:10px;color:#fff}
.ig-avatar{width:34px;height:34px;border-radius:50%;background:#fff;object-fit:contain;padding:3px}
.ig-racun{font:600 14px/1 var(--tz-font,system-ui);color:#fff;text-decoration:none}
.ig-hash{font:400 13px/1 var(--tz-font,system-ui);color:rgba(255,255,255,.8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-pauza,.ig-zatvori{margin-left:auto;width:36px;height:36px;border:0;background:none;color:#fff;font-size:30px;line-height:1;cursor:pointer}
.ig-pauza{margin-left:auto;font-size:0;position:relative}
.ig-pauza::before{content:"";position:absolute;left:12px;top:10px;width:4px;height:16px;background:#fff;box-shadow:8px 0 0 #fff}
.ig-pregled.pauza .ig-pauza::before{width:0;height:0;background:none;box-shadow:none;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.ig-zatvori{margin-left:0}
.ig-lijevo,.ig-desno{position:absolute;z-index:2;top:80px;bottom:170px;width:40%;border:0;background:none;cursor:pointer}
.ig-lijevo{left:0}.ig-desno{right:0;width:60%}
.ig-dno{position:absolute;z-index:3;left:16px;right:16px;bottom:18px;color:#fff}
.ig-naslov{display:block;font:700 24px/1.2 'Roboto',system-ui,sans-serif;margin:0 0 6px}
.ig-tekst{margin:0 0 14px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.92)}
.ig-tekst:empty{display:none}
.ig-gumbi{display:flex;gap:8px;flex-wrap:wrap}
.ig-gumb{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--tz-font,system-ui);color:#1d1d1f;background:#fff;border-radius:999px;padding:11px 16px;text-decoration:none}
.ig-gumb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.ig-gumb.ig-vise{background:rgba(255,255,255,.18);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ig-gumb[hidden]{display:none}
.ig-str{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#111;font-size:26px;cursor:pointer}
@media (max-width:600px){
  .ig-krugovi{justify-content:flex-start;gap:14px;margin-inline:-15px;padding-inline:15px}
  .ig-krug{width:86px}.ig-ime{font-size:12.5px}
  .ig-pregled{background:#000}
  .ig-okvir{height:100%;width:100%;aspect-ratio:auto;border-radius:0}
}
/* srdjan 2026-10-19 - korisnik: „napravi da popune viewport” — krugovi dijele cijelu širinu (jednaki stupci); na mobitelu ~3,5 u ekranu, lista se prstom */
.ig-krugovi{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(14px,2.2vw,32px);justify-content:stretch}
.ig-krug{width:100%}
.ig-ime{font-size:clamp(13px,1.2vw,16px)}
@media (max-width:600px){.ig-krugovi{grid-auto-columns:27vw;gap:12px;justify-content:start}.ig-krug{width:100%}}
/* srdjan 2026-10-19 - korisnik: „i hashtagove i animiraj”: hashtag na krugu (kao na liveu), obrub koji se vrti, krugovi se redom pojave, podizanje na prelazak */
.ig-prsten{background:none!important;isolation:isolate}
.ig-prsten::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;background:conic-gradient(from 0deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75);animation:ig-vrti 6s linear infinite}
/* srdjan 2026-10-19 - korisnik: „izgubile su se animacije na krugovima” — pogledana priča više ne gasi obrub (bio sivi i stao); obrub se uvijek vrti */
@keyframes ig-vrti{to{transform:rotate(1turn)}}
.ig-oznaka{position:absolute;z-index:2;left:50%;bottom:14%;transform:translateX(-50%);max-width:88%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 clamp(10.5px,.95vw,13px)/1 var(--tz-font,system-ui);color:#fff;background:rgba(0,0,0,.55);padding:6px 10px;border-radius:999px;transition:transform .3s,background .3s}
.ig-krug:hover .ig-oznaka{background:rgba(214,41,118,.9);transform:translateX(-50%) translateY(-4px)}
.ig-krug .ig-prsten{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.ig-krug:hover .ig-prsten{transform:translateY(-6px) scale(1.03);box-shadow:0 18px 36px rgba(214,41,118,.25)}
.ig-krugovi li{opacity:0;transform:translateY(24px) scale(.92)}
.ig.vidljivo .ig-krugovi li{animation:ig-ulaz .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes ig-ulaz{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ig-prsten::before{animation:none}.ig-krugovi li{opacity:1;transform:none}.ig.vidljivo .ig-krugovi li{animation:none}}
@media (max-width:600px){.ig-krugovi{scroll-padding-inline:15px}.ig-oznaka{font-size:9.5px;padding:4px 7px;bottom:10%}}
@media (max-width:600px){.ig-krugovi{padding-inline:30px;scroll-padding-inline:30px}}   /* prvi krug poravnat s naslovom (15 px), lista do ruba */
/* srdjan 2026-10-19 - korisnik: „ispadaju hashtagovi iz kruga” — oznaka više (gdje je krug širi: tetiva na 20 % visine = 80 % promjera) i najviše 70 % širine, dugi hashtag se skrati s … */
.ig-oznaka{bottom:20%;max-width:70%;box-sizing:border-box}
@media (max-width:600px){.ig-oznaka{bottom:20%;max-width:70%;font-size:9px;padding:4px 6px}}
/* mali krugovi (tablet, mobitel): hashtag ispod naziva, ne u krugu */
.ig-oznaka-dolje{display:none;font:600 12px/1.2 var(--tz-font,system-ui);color:#d62976;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:-4px}
@media (max-width:1100px){.ig-oznaka{display:none}.ig-oznaka-dolje{display:block}}
@media (max-width:600px){.ig-oznaka-dolje{font-size:11px}}