/* Naslovna v7 (29.10.). Okvir, header, futer, kartica singla i panel su u alati-v2.css. */
body.ziher-home-v2 #masthead,
body.ziher-home-v2 #colophon,
body.ziher-home-v2 .entry-header,
body.ziher-home-v2 #ziher-brko-fab{display:none!important}
body.ziher-home-v2,
body.ziher-home-v2 #page,
body.ziher-home-v2 .site-content,
body.ziher-home-v2 .ast-container,
body.ziher-home-v2 #primary,
body.ziher-home-v2 #main{margin:0!important;padding:0!important;max-width:none!important;width:100%!important;background:#060a15!important}
body.g-lock{overflow:hidden}

#app .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#app .card{border-radius:var(--r);border:1px solid var(--line2);background:var(--card);padding:18px}
#app .eyebrow.g{color:var(--green)}
#app .eyebrow.g i{background:var(--green);box-shadow:0 0 0 4px var(--gsoft)}
#app[data-tk="on"] .tk-off,#app[data-tk="off"] .tk-on{display:none}
#app .opt b{font-size:18px;font-weight:800}

#app .hero{display:grid;gap:22px;align-items:center;min-height:0}
#app .hero-t{display:grid;gap:14px}
#app .hero h1{font-size:clamp(32px,6cqi,56px);font-weight:800;letter-spacing:-.025em;line-height:1.05}
#app .hero-t>p{margin:0;color:#c3cce0;max-width:52ch;font-size:16px}
#app .facts{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#app .facts li{display:grid;gap:2px;padding:12px;border-radius:14px;background:rgba(6,10,21,.55);border:1px solid var(--line2);backdrop-filter:blur(8px)}
#app .facts b{font-size:22px;font-weight:800;color:var(--green);line-height:1.1}
#app .facts span{font-size:12px;color:var(--mut);line-height:1.3}
#app .hero-c{min-width:0}
#app .hero-c .free{box-shadow:0 30px 70px rgba(0,0,0,.45)}
@container app (min-width:900px){
#app .hero{grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:48px;padding-block:28px 10px}
}

#app .brko-say{display:flex;align-items:flex-end;gap:12px;margin:0 0 -14px 6px;position:relative;z-index:2}
#app .brko-say .bub{position:relative;flex:1;min-width:0;padding:12px 14px;border-radius:18px 18px 18px 6px;background:rgba(16,26,51,.92);border:1px solid var(--line2);font-size:14px;line-height:1.4;color:#d5dcec;backdrop-filter:blur(8px);margin-bottom:22px}
#app .brko-say .bub b{display:block;color:var(--fg);font-size:13px;margin-bottom:2px}
#app .brko-say .bub b small{color:var(--green);font-weight:700;font-size:11px;margin-left:6px;letter-spacing:.04em;text-transform:uppercase}
#app .brko-say .bub::before{content:"";position:absolute;left:-7px;bottom:10px;width:12px;height:12px;background:inherit;border-left:1px solid var(--line2);border-bottom:1px solid var(--line2);transform:rotate(45deg)}

#app .card.empty{display:grid;gap:12px;border-color:rgba(34,192,138,.35);background:linear-gradient(180deg,rgba(34,192,138,.10),var(--card) 60%)}
#app .empty h2{font-size:22px;font-weight:800}
#app .empty p{margin:0;color:var(--mut);font-size:14px}
#app .act{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#app .act .btn{flex:1 1 170px}
#app .free .ai{padding:0 16px 14px}

#app .join{display:grid;gap:18px;border-radius:var(--r);padding:20px;border:1px solid rgba(34,192,138,.35);background:radial-gradient(120% 140% at 0 0,rgba(34,192,138,.14),transparent 55%),var(--card)}
#app .join h2{font-size:22px;font-weight:800}
#app .join-t{display:grid;gap:12px}
#app .perks.g svg{color:var(--green)}
#app .join-a{display:grid;gap:8px;align-content:center}
#app .join-a small{color:var(--mut);font-size:12px;text-align:center}
@container app (min-width:900px){
#app .join{grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);padding:26px;align-items:center}
}

#app .me{display:grid;grid-template-columns:1fr;gap:4px;padding:10px;border-radius:var(--r);border:1px solid var(--line2);background:rgba(12,19,39,.8);backdrop-filter:blur(10px)}
#app .me-i{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;text-decoration:none;min-width:0;position:relative}
#app .me-i:hover{background:rgba(255,255,255,.04)}
#app .me-i>span:not(.brko-ring):not(.ic){display:grid;min-width:0}
#app .me-i small{font-size:12px;color:var(--mut)}
#app .me-i b{font-size:15px;font-weight:700}
#app .me-i:first-child{grid-column:1/-1}
#app .me-i .ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--card2);color:var(--green);flex:none}
#app .me-go{grid-column:1/-1;margin-top:4px}
@container app (min-width:900px){
#app .me{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)) auto;align-items:center}
#app .me-i:first-child,#app .me-go{grid-column:auto}
}

#app .today-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#app .today .fine{font-size:12px;color:var(--mut2)}
#app .today .act .link{flex:0 1 auto}
@container app (min-width:900px){
#app .today .act .btn{flex:0 1 340px}
}
/* .today.prem nosi i klasu .prem (traka kalkulatora). Ova pravila moraju pobijediti tu traku. */
#app .today.prem{display:grid;gap:16px;align-items:stretch;padding:20px;border-radius:var(--r);border:1px solid rgba(34,192,138,.35);background:radial-gradient(120% 140% at 100% 0,rgba(34,192,138,.12),transparent 55%),var(--card);font-size:inherit;color:inherit}
#app .today.prem a.btn.o{color:#1b1102;font-weight:800;white-space:nowrap}
#app .today.prem a.link{color:var(--green);font-weight:600;white-space:normal}
#app .today.prem svg{color:currentColor;flex:none}
#app .sum.free{background:linear-gradient(180deg,rgba(34,192,138,.10),transparent),var(--card2);border-color:rgba(34,192,138,.25)}

#app .grid3{display:grid;gap:14px}
@container app (min-width:900px){
#app .grid3{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
}
#app .tile{display:grid;gap:12px;align-content:start}
#app .tile .link{align-self:end;margin-top:auto}
#app .tile-h{display:flex;gap:12px;align-items:center}
#app .tile h3{font-size:18px;font-weight:800}
#app .tile-h small{color:var(--mut);font-size:13px}
#app .tile p{margin:0;color:var(--mut);font-size:14px}
#app .tile .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;flex:none}
#app .ic.g{background:var(--gsoft);color:var(--green)}
#app .ic.b{background:var(--bsoft);color:var(--blue)}
#app .chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
#app .chips li{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.03)}
#app .news{list-style:none;margin:0;padding:0;display:grid;gap:4px}
#app .news a{display:flex;gap:12px;padding:8px 6px;border-radius:12px;text-decoration:none;font-size:14px;line-height:1.35}
#app .news a:hover{background:rgba(255,255,255,.04)}
#app .news .nt{color:var(--mut);font-size:12px;min-width:38px;padding-top:2px}
#app .news small{display:block;color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
#app .news .prazno{padding:8px 6px;color:var(--mut);font-size:14px}

#app .tile,#app .today{position:relative;isolation:isolate;overflow:hidden;background:var(--card)}
#app .tile::before,#app .today::before{content:"";position:absolute;inset:0;z-index:-2;background-size:cover;background-repeat:no-repeat;filter:brightness(1.35) saturate(1.15)}
#app .tile::after,#app .today::after{content:"";position:absolute;inset:0;z-index:-1}
#app .tile.t-alati::before{background-image:var(--zn-alati);background-position:12% 78%}
#app .tile.t-alati::after{background:linear-gradient(180deg,rgba(12,19,39,.12),rgba(12,19,39,.55) 45%,rgba(12,19,39,.9) 85%),radial-gradient(120% 80% at 0 0,rgba(34,192,138,.22),transparent 60%)}
#app .tile.t-vijesti::before{background-image:var(--zn-vijesti);background-position:8% 70%}
#app .tile.t-vijesti::after{background:linear-gradient(180deg,rgba(12,19,39,.12),rgba(12,19,39,.55) 45%,rgba(12,19,39,.9) 85%),radial-gradient(120% 80% at 0 0,rgba(91,151,255,.24),transparent 60%)}
#app .tile.perf-t::before{background-image:var(--zn-ucinak);background-position:72% 85%}
#app .tile.perf-t::after{background:linear-gradient(180deg,rgba(12,19,39,.12),rgba(12,19,39,.55) 45%,rgba(12,19,39,.9) 85%),radial-gradient(120% 80% at 100% 0,rgba(34,192,138,.22),transparent 60%)}
#app .tile.perf-t p{color:#c3cce0}
#app .today::before{background-image:var(--zn-prem);background-position:88% 55%}
#app .today::after{background:linear-gradient(90deg,rgba(12,19,39,.9) 25%,rgba(12,19,39,.3)),radial-gradient(120% 140% at 100% 0,rgba(245,163,10,.2),transparent 55%)}
#app .today.prem::after{background:linear-gradient(90deg,rgba(12,19,39,.9) 25%,rgba(12,19,39,.3)),radial-gradient(120% 140% at 100% 0,rgba(34,192,138,.18),transparent 55%)}
@container app (max-width:760px){
#app .today::after,#app .today.prem::after{background:linear-gradient(180deg,rgba(12,19,39,.2),rgba(12,19,39,.88) 55%)}
}
#app .tile .chips li{background:rgba(6,10,21,.55);backdrop-filter:blur(6px)}

#app .gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(4,7,15,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#app .gate[hidden]{display:none}
#app .g-box{width:min(440px,100%);display:grid;justify-items:center;gap:14px;text-align:center;padding:28px 22px 22px;border-radius:28px;border:1px solid rgba(34,192,138,.35);background:radial-gradient(120% 90% at 50% 0,rgba(34,192,138,.16),transparent 60%),var(--card);box-shadow:0 40px 90px rgba(0,0,0,.6)}
#app .g-ava{position:relative;width:136px;height:136px;border-radius:50%;margin:4px 0 10px;background:radial-gradient(circle at 50% 34%,#6fe6b8 0,#22c08a 48%,#117a56 100%);box-shadow:0 0 0 4px var(--card),0 0 0 7px rgba(34,192,138,.45),0 18px 44px rgba(34,192,138,.35)}
#app .g-ava img{position:absolute;left:50%;top:49%;width:97%;max-width:none;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
#app .g-box [hidden]{display:none!important}
#app .g-ask,#app .g-ok,#app .g-no{display:grid;gap:12px;justify-items:center}
#app .g-box h2{font-size:clamp(24px,6cqi,30px);font-weight:800;letter-spacing:-.01em}
#app .g-box p{margin:0;color:#c3cce0;font-size:15px}
#app .g-box .fine{font-size:13px;color:var(--mut)}
#app .g-box small{font-size:12px;color:var(--mut2);line-height:1.45}
#app .g-act{display:grid;gap:8px;width:100%}
#app .g-act .btn{min-height:52px;font-size:16px}
#app .g-ok h2{color:var(--green)}

@container app (max-width:760px){
#app .site-f .f-cols{display:grid;gap:0;grid-template-columns:1fr!important}
#app .site-f .f-cols>div{border-top:1px solid var(--line)}
#app .site-f .f-cols h3{display:flex;justify-content:space-between;align-items:center;min-height:48px;margin:0;cursor:pointer}
#app .site-f .f-cols h3::after{content:"";width:8px;height:8px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);transition:transform .2s;margin-right:4px}
#app .site-f .f-cols>div.open h3::after{transform:rotate(-135deg)}
#app .site-f .f-cols>div:not(.open) a{display:none}
#app .site-f .f-cols>div.open{padding-bottom:10px}
}