/*
Theme Name: Bronzi
Theme URI: https://teretanabronzi.ba
Author: CNT Digital
Description: Custom tema za Teretanu Bronzi — moderna fitnes prezentacija.
Version: 1.0
Text Domain: bronzi
*/

:root{
  --bg:#0c0d10;
  --bg2:#121419;
  --card:#171a21;
  --line:#242a33;
  --tx:#eef1f5;
  --mut:#9aa3af;
  --ac:#f5c518;        /* žuta */
  --ac2:#e0a93b;       /* zlatna */
  --red:#e23b3b;
  --rad:16px;
  --max:1200px;
  --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16z' fill='none' stroke='%23f5c518' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);color:var(--tx);line-height:1.6;overflow-x:hidden;
}
h1,h2,h3,.dn{font-family:'Montserrat',sans-serif;font-weight:800;line-height:1.1;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.ac{color:var(--ac)}
section{position:relative}
section[id]{scroll-margin-top:84px}

/* ===== NAV ===== */
header.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:.3s;padding:16px 0}
header.nav.scr{background:rgba(12,13,16,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:10px 0}
.nav .wrap{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-family:'Montserrat';font-weight:900;font-size:24px;letter-spacing:.04em}
.logo .mark{width:38px;height:42px;background:var(--ac);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;color:#1a1206;font-weight:900;font-size:20px}
.logo b{color:var(--ac)}
.logo img{height:48px;width:auto;display:block}
header.nav.scr .logo img{height:40px;transition:.3s}
footer .logo img{height:62px;margin-bottom:6px}
.menu{display:flex;gap:28px;align-items:center}
.menu a{color:var(--mut);font-size:14px;font-weight:500;transition:.2s}
.menu a:hover{color:var(--tx)}
.btn{display:inline-block;background:var(--ac);color:#1a1206;padding:12px 24px;border-radius:40px;font-weight:700;font-size:14px;transition:.2s;border:0;cursor:pointer}
.btn:hover{background:#fff;transform:translateY(-2px)}
.btn.out{background:transparent;color:var(--tx);border:1px solid var(--line)}
.btn.out:hover{border-color:var(--ac);color:var(--ac);background:transparent;transform:translateY(-2px)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:26px;height:2px;background:var(--tx);transition:.3s}

/* ===== HERO ===== */
.hero{height:100vh;min-height:640px;display:flex;align-items:center;overflow:hidden}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero:after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,13,16,.7) 0%,rgba(12,13,16,.55) 40%,rgba(12,13,16,.92) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero .tag{display:inline-flex;align-items:center;gap:8px;background:rgba(245,197,24,.12);border:1px solid rgba(245,197,24,.35);color:var(--ac);padding:7px 16px;border-radius:40px;font-size:13px;font-weight:600;margin-bottom:22px}
.hero h1{font-size:clamp(38px,7vw,82px);text-transform:uppercase;max-width:14ch}
.hero h1 em{color:var(--ac);font-style:normal}
.hero p{color:#d7dce2;font-size:clamp(16px,2vw,20px);max-width:52ch;margin:22px 0 32px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.scroll-ind{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:var(--mut);font-size:12px;letter-spacing:.2em;text-transform:uppercase;animation:bob 2s infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ===== SECTION SHELL ===== */
.sec{padding:100px 0;background-image:var(--hex);background-size:56px 100px}
.sec.alt{background-color:var(--bg2)}
.kicker{color:var(--ac);font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.kicker:before{content:"";width:28px;height:2px;background:var(--ac)}
.sec h2{font-size:clamp(30px,5vw,52px);text-transform:uppercase;margin-bottom:18px}
.lead{color:var(--mut);font-size:17px;max-width:62ch}

/* ===== O NAMA ===== */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.about p{color:var(--mut);margin-bottom:16px}
.about .imgwrap{position:relative}
.about .imgwrap img{border-radius:var(--rad);width:100%;height:520px;object-fit:cover}
.about .badge{position:absolute;bottom:-22px;left:-22px;background:var(--ac);color:#1a1206;padding:22px 26px;border-radius:var(--rad);text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.about .badge b{font-family:'Montserrat';font-size:40px;display:block;line-height:1}
.about .badge span{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}

/* ===== FEATURES ===== */
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:32px 26px;transition:.25s}
.feat:hover{border-color:var(--ac);transform:translateY(-6px)}
.feat .ico{width:54px;height:60px;background:rgba(245,197,24,.1);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;font-size:26px;margin-bottom:20px}
.feat h3{font-size:19px;margin-bottom:10px}
.feat p{color:var(--mut);font-size:14.5px}

/* ===== CJENOVNIK ===== */
.price{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:38px 30px;display:flex;flex-direction:column;position:relative;transition:.25s}
.plan:hover{transform:translateY(-6px)}
.plan.pop{border-color:var(--ac);background:linear-gradient(180deg,rgba(245,197,24,.06),var(--card))}
.plan .pill{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--ac);color:#1a1206;font-size:11px;font-weight:800;padding:6px 16px;border-radius:40px;text-transform:uppercase;letter-spacing:.05em}
.plan h3{font-size:20px;text-transform:uppercase}
.plan .amt{font-family:'Montserrat';font-weight:900;font-size:46px;margin:16px 0 4px}
.plan .amt small{font-size:16px;color:var(--mut);font-weight:600}
.plan ul{list-style:none;margin:22px 0 28px;flex:1}
.plan li{padding:9px 0;border-bottom:1px solid var(--line);color:var(--mut);font-size:14.5px;display:flex;gap:10px}
.plan li:before{content:"✓";color:var(--ac);font-weight:800}
.plan .psub{color:var(--mut);font-size:13.5px;display:block;margin-top:4px}
.plist{list-style:none;margin:20px 0 18px;flex:1}
.plist li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--mut)}
.plist li:before{content:none}
.plist li b{font-family:'Montserrat';font-weight:800;color:var(--tx);white-space:nowrap;font-size:16px}
.plist li.hl{margin:0 -14px;padding:12px 14px;background:rgba(245,197,24,.1);border-radius:10px;border-bottom:1px solid transparent;color:var(--tx)}
.plist li.hl b{color:var(--ac)}
.plan .who{font-size:13.5px;color:var(--mut);padding:12px 0;border-top:1px solid var(--line)}
.plan .who b{color:var(--tx)}
.plan .note{font-size:12.5px;color:var(--mut);line-height:1.55;margin-bottom:18px}

/* ===== GRUPNI ZA ŽENE ===== */
.zlayout{display:grid;grid-template-columns:1fr 1.25fr;gap:22px;align-items:stretch;margin-bottom:24px}
.zsched-card{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:34px 30px;display:flex;flex-direction:column}
.zsched-card h3{font-size:20px;text-transform:uppercase;margin-bottom:20px}
.zdays{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.zdays span{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:11px 16px;font-size:15px;font-weight:600;color:var(--tx)}
.ztime{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(245,197,24,.1);border:1px solid rgba(245,197,24,.3);border-radius:10px;padding:14px 18px;margin-bottom:16px}
.ztime .zt-lbl{color:var(--mut);font-size:14px;font-weight:600}
.ztime b{font-family:'Montserrat';font-size:20px;color:var(--ac)}
.zloc{color:var(--mut);font-size:14.5px;line-height:1.55;margin-top:auto}
.zloc b{color:var(--tx)}
.zprice{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;align-items:stretch}
.zbenefits{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:30px 26px;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.zbenefits .zb{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;color:var(--mut);font-size:14px;line-height:1.4}
.zbenefits .zb i{width:50px;height:56px;flex:none;background:rgba(245,197,24,.1);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;font-size:22px;font-style:normal}
.zcta{text-align:center;margin-top:34px}
.btn-lg{font-size:17px;padding:18px 50px;border-radius:50px;box-shadow:0 14px 36px rgba(245,197,24,.22)}
@media(max-width:880px){.zlayout{grid-template-columns:1fr}.zbenefits{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.zprice{grid-template-columns:1fr}.zbenefits{grid-template-columns:1fr}}

/* ===== RASPORED ===== */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--rad)}
table.sched{width:100%;border-collapse:collapse;min-width:680px}
.sched th,.sched td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px}
.sched th{background:var(--bg2);color:var(--ac);text-transform:uppercase;font-size:12px;letter-spacing:.05em}
.sched td:first-child{font-weight:700;color:var(--tx)}
.sched tr:last-child td{border-bottom:0}
.sched .free{color:var(--mut)}

/* ===== PARTNERI ===== */
.partbar{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
.part{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:28px 20px;text-align:center;transition:.25s}
.part:hover{border-color:var(--ac)}
.part b{font-family:'Montserrat';font-size:18px;display:block}
.part span{color:var(--mut);font-size:13px}
.discount{margin-top:30px;background:linear-gradient(100deg,rgba(245,197,24,.12),rgba(226,59,59,.08));border:1px solid rgba(245,197,24,.3);border-radius:var(--rad);padding:26px 30px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.discount .big{font-family:'Montserrat';font-weight:900;font-size:44px;color:var(--ac);line-height:1}

/* ===== GALERIJA ===== */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px}
.gal a,.gal .v{border-radius:14px;overflow:hidden;position:relative;background:#000}
.gal img,.gal video{width:100%;height:100%;object-fit:cover;transition:.4s}
.gal a:hover img{transform:scale(1.08)}
.gal .tall{grid-row:span 2}
.gal .wide{grid-column:span 2}
.gal .v:after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;font-size:34px;color:rgba(255,255,255,.85);pointer-events:none}

/* ===== KONTAKT ===== */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.cinfo .row{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.cinfo .row .ico{width:46px;height:50px;flex:none;background:rgba(245,197,24,.1);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;font-size:20px}
.cinfo .row b{display:block;font-size:15px}
.cinfo .row span{color:var(--mut);font-size:14px}
.socials{display:flex;gap:12px;margin-top:26px}
.socials a{width:46px;height:46px;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center;transition:.2s;font-size:18px}
.socials a:hover{background:var(--ac);color:#1a1206;border-color:var(--ac)}
.mapwrap{border-radius:var(--rad);overflow:hidden;border:1px solid var(--line);min-height:420px;background:var(--card)}
.mapwrap iframe{width:100%;height:100%;min-height:420px;border:0;filter:grayscale(.3) invert(.92) hue-rotate(180deg)}

/* ===== CTA BANNER ===== */
.cta-band{padding:80px 0;text-align:center;background:linear-gradient(rgba(12,13,16,.86),rgba(12,13,16,.92)),var(--poster) center/cover}
.cta-band h2{font-size:clamp(28px,5vw,50px);text-transform:uppercase;margin-bottom:16px}
.cta-band p{color:var(--mut);max-width:50ch;margin:0 auto 28px}

/* ===== FOOTER ===== */
footer{background:#08090b;border-top:1px solid var(--line);padding:54px 0 28px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:36px}
footer p{color:var(--mut);font-size:14px;margin-top:14px;max-width:36ch}
footer h4{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--tx);margin-bottom:16px}
footer ul{list-style:none}
footer ul li{margin-bottom:9px}
footer ul a{color:var(--mut);font-size:14px}
footer ul a:hover{color:var(--ac)}
.copy{border-top:1px solid var(--line);padding-top:22px;text-align:center;color:var(--mut);font-size:13px}
.copy a{color:var(--ac)}

/* reveal */
.rv{opacity:0;transform:translateY(30px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.lb.on{display:flex}
.lb img,.lb video{max-width:92vw;max-height:88vh;border-radius:10px}
.lb .x{position:absolute;top:22px;right:28px;font-size:34px;color:#fff;cursor:pointer;background:none;border:0}

/* ===== CHAT WIDGET (pitanje -> WhatsApp/poziv) ===== */
.chatw{position:fixed;right:22px;bottom:22px;z-index:140;display:flex;flex-direction:column;align-items:flex-end;gap:14px;pointer-events:none}
.qbtn{display:flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;padding:0;pointer-events:auto}
.qhex{width:64px;height:70px;flex:none;background:var(--ac);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;color:#1a1206;font-family:'Montserrat',sans-serif;font-weight:900;font-size:34px;line-height:1;box-shadow:0 12px 30px rgba(245,197,24,.4);transition:.25s;animation:qpulse 2.4s infinite}
.qbtn:hover .qhex{transform:scale(1.08) rotate(-5deg);background:#fff}
.qhex .q-close{display:none}
.chatw.open .qhex{animation:none}
.chatw.open .q-open{display:none}
.chatw.open .q-close{display:block;font-size:40px}
.qlabel{background:#fff;color:#1a1206;font-weight:700;font-size:14px;padding:10px 16px;border-radius:40px;white-space:nowrap;box-shadow:0 8px 22px rgba(0,0,0,.35);opacity:0;transform:translateX(12px);pointer-events:none;transition:.25s}
.qbtn:hover .qlabel{opacity:1;transform:none}
.chatw.open .qlabel{display:none}
@keyframes qpulse{0%,100%{box-shadow:0 12px 30px rgba(245,197,24,.35)}50%{box-shadow:0 12px 42px rgba(245,197,24,.75)}}

.chat-panel{width:330px;max-width:calc(100vw - 32px);background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55);transform:translateY(16px) scale(.96);transform-origin:bottom right;opacity:0;pointer-events:none;transition:.22s cubic-bezier(.2,.7,.2,1)}
.chatw.open .chat-panel{opacity:1;transform:none;pointer-events:auto}
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#1a1206;position:relative}
.chat-ava{width:42px;height:46px;flex:none;background:#1a1206;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;padding:8px}
.chat-ava img{width:100%;height:auto}
.chat-h-txt b{display:block;font-family:'Montserrat',sans-serif;font-size:16px;line-height:1.2}
.chat-h-txt span{font-size:12px;display:flex;align-items:center;gap:6px;opacity:.85}
.chat-dot{width:8px;height:8px;border-radius:50%;background:#1a8a3a;display:inline-block;box-shadow:0 0 0 0 rgba(26,138,58,.6);animation:cdot 1.8s infinite}
@keyframes cdot{0%{box-shadow:0 0 0 0 rgba(26,138,58,.6)}70%{box-shadow:0 0 0 7px rgba(26,138,58,0)}100%{box-shadow:0 0 0 0 rgba(26,138,58,0)}}
.chat-x{position:absolute;top:10px;right:12px;background:none;border:0;color:#1a1206;font-size:24px;line-height:1;cursor:pointer;opacity:.7}
.chat-x:hover{opacity:1}
.chat-body{padding:18px;display:flex;flex-direction:column;gap:10px;background:var(--bg2)}
.chat-msg{background:var(--card);border:1px solid var(--line);border-radius:14px;border-bottom-left-radius:4px;padding:12px 14px;font-size:14px;color:var(--tx);line-height:1.55;max-width:92%;animation:cmsg .4s both}
.chat-msg:nth-child(2){animation-delay:.08s}
.chat-msg:nth-child(3){animation-delay:.16s}
.chat-msg b{color:var(--ac)}
@keyframes cmsg{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chat-actions{display:flex;flex-direction:column;gap:10px;padding:0 18px 18px;background:var(--bg2)}
.chat-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:12px;font-weight:700;font-size:14.5px;transition:.2s}
.chat-btn.wa{background:#25d366;color:#04331a}
.chat-btn.wa:hover{background:#1ebe5a;transform:translateY(-2px)}
.chat-btn.call{background:var(--ac);color:#1a1206}
.chat-btn.call:hover{background:#fff;transform:translateY(-2px)}
@media(max-width:720px){
  .chatw{right:16px;bottom:16px}
  .qhex{width:56px;height:62px;font-size:30px}
  .qlabel{display:none}
}

/* ===== RESPONSIVE ===== */
@media(max-width:980px){
  .about{grid-template-columns:1fr;gap:40px}
  .about .imgwrap img{height:380px}
  .g3,.g4,.price,.partbar{grid-template-columns:repeat(2,1fr)}
  .contact,.fgrid{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .menu{position:fixed;inset:0 0 0 auto;width:78%;max-width:320px;background:var(--bg2);flex-direction:column;justify-content:center;align-items:flex-start;padding:40px;gap:22px;transform:translateX(100%);transition:.3s;border-left:1px solid var(--line)}
  .menu.open{transform:none}
  .menu a{font-size:18px}
  .burger{display:flex;z-index:101}
  .sec{padding:70px 0}
  .g3,.g4,.price,.partbar,.gal{grid-template-columns:1fr}
  .discount{flex-direction:column;text-align:center}
}