
.arg-rv{--b:#b27e5d;--b2:#d09b75;--ink:#382f2a;--s:79px;position:relative;background:#eeeff3;padding:74px 0 68px;font-family:'Montserrat',sans-serif;overflow:hidden;isolation:isolate}
.arg-rv:before,.arg-rv:after{content:'';position:absolute;border-radius:50%;z-index:-1;pointer-events:none}
.arg-rv:before{width:650px;height:650px;left:-340px;top:-390px;background:radial-gradient(circle,#fff,rgba(255,255,255,.25) 48%,transparent 70%)}
.arg-rv:after{width:520px;height:520px;right:-280px;bottom:-350px;background:radial-gradient(circle,rgba(208,155,117,.17),transparent 68%)}


.arg-rv-head{max-width:1180px;margin:0 auto 38px;padding:0 24px;text-align:center}
.arg-rv-kicker{font-size:13px;letter-spacing:3px;font-weight:800;color:var(--b);text-transform:uppercase;margin-bottom:12px}
.arg-rv-title{margin:0;color:var(--ink);font-size:30px;line-height:1.2;font-weight:900;letter-spacing:-.7px;text-transform:uppercase}
.arg-rv-title span{color:var(--b);background:linear-gradient(100deg,#b27e5d 0%,#9a5d3c 25%,#b27e5d 40%,#f3cfae 50%,#b27e5d 60%,#9a5d3c 75%,#b27e5d 100%);background-size:200% 100%;background-repeat:repeat-x;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:argTitleShine 5.5s linear infinite}
@keyframes argTitleShine{from{background-position:0 0}to{background-position:200% 0}}
.arg-rv-rule{display:flex;align-items:center;justify-content:center;gap:10px;margin:17px auto 34px}
.arg-rv-rule:before,.arg-rv-rule:after{content:'';width:65px;height:1px;background:linear-gradient(90deg,transparent,var(--b))}
.arg-rv-rule:after{transform:scaleX(-1)}
.arg-rv-dia{width:7px;height:7px;border:1px solid var(--b);transform:rotate(45deg);background:#fff}


.arg-rv-ratings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;width:min(calc(100% - 36px),780px);margin:0 auto}
.arg-rv-rate{position:relative;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:246px;padding:22px 18px 18px;border-radius:28px;border:1px solid rgba(178,126,93,.45);background:linear-gradient(145deg,#fffdfb,#fff8f2 56%,#fff);box-shadow:0 22px 48px rgba(91,58,40,.14),inset 0 1px 0 #fff;overflow:hidden}
.arg-rv-rate:before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent 0%,#d09b75 25%,#fff0df 50%,#b27e5d 75%,transparent 100%);background-size:200% 100%;animation:argBar 4.5s linear infinite}
@keyframes argBar{from{background-position:200% 0}to{background-position:-200% 0}}
.arg-rv-rate:after{content:'';position:absolute;left:34px;right:34px;bottom:12px;height:1px;background:linear-gradient(90deg,transparent,rgba(178,126,93,.35),transparent)}

.arg-rv-label{font-size:10.5px;font-weight:900;letter-spacing:2.3px;text-transform:uppercase;color:#9a5d3c;line-height:1}

.arg-rv-main{display:flex;align-items:center;justify-content:center;gap:16px;margin:6px 0}


.arg-rv-bi{position:relative;left:-4px;flex:0 0 auto;width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 38% 30%,#fff 0%,#fffaf6 60%,#f6e4d6 100%);border:1px solid rgba(178,126,93,.4);box-shadow:0 12px 26px rgba(102,64,42,.14),inset 0 0 0 6px rgba(255,255,255,.8)}
.arg-rv-bi svg{width:100%;height:100%;display:block}
.arg-rv-bi:after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(208,155,117,.55);animation:argRing 3.4s ease-out infinite;pointer-events:none}
@keyframes argRing{0%{transform:scale(.96);opacity:.8}100%{transform:scale(1.32);opacity:0}}


.arg-score{position:relative;left:4px;flex:0 0 auto;height:var(--s);width:calc(var(--s)*1.36);font-family:'Montserrat',sans-serif;font-weight:900}
.arg-score:before{content:'';position:absolute;inset:-22% -14%;border-radius:50%;background:radial-gradient(closest-side,rgba(245,192,148,.55),rgba(245,192,148,0) 100%);animation:argHalo 3.2s ease-in-out infinite;pointer-events:none}
@keyframes argHalo{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
.arg-score svg{position:relative;z-index:1;display:block;width:100%;height:100%;overflow:visible;animation:argBurst 6s ease-in-out infinite}
@keyframes argBurst{
  0%,68%,100%{filter:drop-shadow(0 0 0 rgba(255,214,170,0)) drop-shadow(0 4px 4px rgba(105,60,35,.22)) brightness(1)}
  80%{filter:drop-shadow(0 0 11px rgba(255,214,170,.95)) drop-shadow(0 4px 4px rgba(105,60,35,.22)) brightness(1.14)}
}
/* bež/bronza baza cifara (kontura debelom linijom) */
.arg-gl{fill:none;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
/* LED svjetlo — dva bijela traga kruže po konturi svake cifre, cifre kasne jedna za drugom */
.arg-led{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12 38;animation:argLed 3.4s linear infinite;animation-delay:calc(var(--i)*-.6s);filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #f0b98c)}
@keyframes argLed{to{stroke-dashoffset:-50}}
/* iskrice */
.arg-sp{position:absolute;z-index:2;width:12px;height:12px;background:linear-gradient(135deg,#f9dcc0,#c98a60);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;animation:argTwinkle 3s ease-in-out infinite;pointer-events:none}
.arg-sp:nth-of-type(1){top:-2%;right:-8%;animation-delay:0s}
.arg-sp:nth-of-type(2){bottom:8%;left:-9%;width:9px;height:9px;animation-delay:.9s}
.arg-sp:nth-of-type(3){top:14%;left:42%;width:7px;height:7px;animation-delay:1.7s}
.arg-sp:nth-of-type(4){bottom:-2%;right:-4%;width:10px;height:10px;animation-delay:2.3s}
@keyframes argTwinkle{0%,100%{opacity:0;transform:scale(0) rotate(0)}45%{opacity:1;transform:scale(1) rotate(45deg)}70%{opacity:0;transform:scale(.4) rotate(90deg)}}

/* ───────── Zvjezdice (pulsiraju jedna za drugom) ───────── */
.arg-rv-starsrow{display:flex;justify-content:center;gap:5px}
.arg-rv-starsrow svg{width:24px;height:24px;display:block;transform-origin:center;animation:argStar 1.9s ease-in-out infinite;animation-delay:calc(var(--i)*.16s)}
@keyframes argStar{0%,60%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(246,184,0,0))}30%{transform:scale(1.22);filter:drop-shadow(0 0 7px rgba(246,184,0,.75))}}
.arg-rv-cap{display:block;margin-top:9px;text-align:center;font-style:normal;font-size:9.5px;line-height:1.3;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:#765445}
.arg-rv-low{display:flex;flex-direction:column;align-items:center}

/* ───────── Scroll recenzija ───────── */
.arg-rv-stage{position:relative}
.arg-rv-window{width:100%;overflow:hidden;padding:16px 0 22px;cursor:url('/slike/cursor-ruka.png') 10 2, pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.arg-rv-window.is-drag{cursor:url('/slike/cursor-ruka.png') 10 2, pointer}
.arg-rv-track{display:flex;width:max-content;will-change:transform}
.arg-rv-set{display:flex;flex-shrink:0}
.arg-rv-card{position:relative;width:390px;height:330px;flex:0 0 390px;margin:0 10px;padding:26px 27px 20px;box-sizing:border-box;background:linear-gradient(145deg,#fff,rgba(255,255,255,.92));border:1px solid rgba(178,126,93,.17);border-radius:22px;box-shadow:0 16px 38px rgba(53,39,32,.08),inset 0 1px #fff;overflow:hidden;display:flex;flex-direction:column;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.arg-rv-card:before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent 4%,var(--b2) 35%,var(--b) 65%,transparent 96%)}
.arg-rv-card:after{content:'\201C';position:absolute;right:20px;top:4px;font-family:Georgia,serif;font-size:76px;line-height:1;color:rgba(178,126,93,.075);font-weight:700}
.arg-rv-card:hover{transform:translateY(-6px);border-color:rgba(178,126,93,.4);box-shadow:0 23px 52px rgba(67,45,34,.14)}
.arg-rv-meta{display:flex;align-items:center;gap:13px;position:relative;z-index:2}
.arg-rv-avatar{position:relative;width:50px;height:50px;flex:0 0 50px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#d4a17e,#a96f4e);color:#fff;font-size:14px;font-weight:900;letter-spacing:.5px;box-shadow:0 9px 18px rgba(178,126,93,.22)}
.arg-rv-avatar:after{content:'';position:absolute;inset:3px;border:1px solid rgba(255,255,255,.35);border-radius:13px}
.arg-rv-person{min-width:0}
.arg-rv-name{margin:0 0 5px;font-size:14px;line-height:1.2;font-weight:800;color:#443832;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:225px}
.arg-rv-cstars{color:#f6b800;font-size:12px;letter-spacing:1.2px}
/* Google plava "verificirana" značka */
.arg-rv-check{margin-left:auto;width:25px;height:25px;flex:0 0 25px;filter:drop-shadow(0 3px 5px rgba(66,133,244,.35))}
.arg-rv-text{position:relative;z-index:2;flex:1;min-height:0;margin:18px 0 14px;padding-right:7px;color:#5e514b;font-size:13.2px;line-height:1.7;font-weight:500;display:block;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b27e5d transparent}.arg-rv-text::-webkit-scrollbar{width:5px}.arg-rv-text::-webkit-scrollbar-track{background:transparent}.arg-rv-text::-webkit-scrollbar-thumb{background:#b27e5d;border-radius:8px}.arg-rv-text::-webkit-scrollbar-thumb:hover{background:#8f5636}
.arg-rv-foot{position:relative;z-index:2;margin-top:auto;padding-top:13px;border-top:1px solid rgba(178,126,93,.12);display:flex;align-items:center;justify-content:space-between;gap:10px}
.arg-rv-source{display:flex;align-items:center;gap:7px;color:#887870;font-size:9px;font-weight:800;letter-spacing:.7px;text-transform:uppercase}
.arg-rv-source svg{width:15px;height:15px}
.arg-rv-date{font-size:9px;color:#a0928b;font-weight:700;white-space:nowrap}

/* strelice (samo desktop sa mišem) */
.arg-rv-nav{position:absolute;top:50%;margin-top:-23px;width:46px;height:46px;padding:0;border-radius:50%;border:1px solid rgba(178,126,93,.4);background:#fff;color:var(--b);display:none;place-items:center;cursor:pointer;box-shadow:0 10px 24px rgba(91,58,40,.16);z-index:5;transition:opacity .25s,transform .25s}
.arg-rv-nav svg{width:20px;height:20px}
.arg-rv-nav:hover{transform:scale(1.08)}
.arg-rv-nav.prev{left:20px}.arg-rv-nav.next{right:20px}
@media(hover:hover) and (min-width:769px){.arg-rv-nav{display:grid;opacity:0}.arg-rv-stage:hover .arg-rv-nav{opacity:1}}

.arg-rv-actions{display:flex;justify-content:center;margin-top:24px}
.arg-rv-btn{display:flex;align-items:center;gap:9px;padding:14px 24px;background:#fff;color:var(--b);text-decoration:none;border:1px solid rgba(178,126,93,.35);border-radius:12px;box-shadow:0 9px 25px rgba(178,126,93,.11);font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase;transition:.3s ease}
.arg-rv-btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(178,126,93,.2);background:linear-gradient(135deg,#fff,#fff9f5)}
.arg-rv-btn svg{width:17px;height:17px}
.arg-rv-note{font-size:12px;line-height:1.6;text-align:center;color:inherit;opacity:.75;margin:18px 16px 0}
.arg-rv-empty{text-align:center;color:#75665f}

/* ───────── Tablet ───────── */
@media(max-width:900px){
  .arg-rv{--s:67px}
  .arg-rv-ratings{gap:14px;width:min(calc(100% - 32px),600px)}
  .arg-rv-rate{min-height:222px;padding:20px 12px 16px}
  .arg-rv-main{gap:12px}
  .arg-rv-label{font-size:9.5px;letter-spacing:1.8px}
  .arg-rv-cap{font-size:8.5px;letter-spacing:.9px}
  .arg-rv-starsrow svg{width:21px;height:21px}
}

/* ───────── Mobilni ───────── */
@media(max-width:768px){
  .arg-rv{--s:55px;padding:56px 0 52px}
  .arg-rv-head{padding:0 15px;margin-bottom:27px}
  .arg-rv-kicker{font-size:9px;letter-spacing:2px}
  .arg-rv-title{font-size:22px;line-height:1.25}
  .arg-rv-rule{margin:14px auto 22px}
  .arg-rv-ratings{width:calc(100% - 24px);gap:9px}
  .arg-rv-rate{min-height:196px;padding:18px 6px 14px;border-radius:21px}
  .arg-rv-main{gap:8px}
  .arg-rv-label{font-size:8px;letter-spacing:1.2px}
  .arg-rv-bi:after{inset:-4px}
  .arg-rv-starsrow{gap:2px}
  .arg-rv-starsrow svg{width:16px;height:16px}
  .arg-rv-cap{font-size:7.2px;letter-spacing:.4px;margin-top:7px;padding:0 4px}
  .arg-rv-window{padding:11px 0 17px;mask-image:none;-webkit-mask-image:none}
  .arg-rv-card{width:calc(100vw - 42px);flex-basis:calc(100vw - 42px);height:268px;margin:0 7px;padding:22px 20px 18px;border-radius:19px}
  .arg-rv-name{max-width:170px}
  .arg-rv-text{font-size:12.7px}
  .arg-rv-actions{margin-top:17px;padding:0 16px}
  .arg-rv-btn{padding:13px 18px;font-size:8.8px;text-align:center}
}
@media(max-width:380px){.arg-rv{--s:49px}}