/* ══════════════════════════════════════════ RESET & VARIJABLE ══════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --navy:#0D2B5E; --navy2:#1A3A7A; --sky:#1E7FD4; --sky2:#3A9FE8; --sky-pale:#E8F4FD; --mint:#10B892; --mint-pale:#E6F8F4; --red:#922a26; --white:#fff; --off:#F5F8FC; --text:#0D2B5E; --muted:#5A6A85; --border:rgba(13,43,94,.1); --gold:#C9A84C; } html{scroll-behavior:smooth} body{font-family:'Outfit',sans-serif;color:var(--text);background:var(--white);overflow-x:hidden;width:100%} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} .container{max-width:1160px;margin:0 auto;padding:0 24px} section{padding:80px 0} .sec-lbl{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--sky);margin-bottom:.6rem} .sec-lbl::before{content:'';display:block;width:22px;height:2px;background:var(--sky);border-radius:2px} .sec-lbl-w{color:rgba(255,255,255,.7)}.sec-lbl-w::before{background:rgba(255,255,255,.5)} .sec-title{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,2.8vw,2.6rem);font-weight:700;line-height:1.18;color:var(--navy)} .sec-title em{font-style:italic;color:var(--sky)} .sec-title-w{color:#fff}.sec-title-w em{color:var(--sky2)} .sec-sub{font-size:.95rem;color:var(--muted);line-height:1.8;max-width:500px;margin-top:.7rem;font-weight:300} .sec-sub-w{color:rgba(255,255,255,.55)} .btn{display:inline-block;padding:.75rem 1.9rem;border-radius:50px;font-size:.88rem;font-weight:600;transition:all .2s;cursor:pointer;border:none;font-family:inherit} .btn-sky{background:var(--sky);color:#fff}.btn-sky:hover{background:var(--navy);transform:translateY(-2px)} .btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:var(--sky);transform:translateY(-2px)} .btn-out{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}.btn-out:hover{background:var(--navy);color:#fff} .btn-outw{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}.btn-outw:hover{background:rgba(255,255,255,.1)} /* Sadržaj je UVIJEK vidljiv po defaultu. Animacija se uključuje samo ako JS uspješno startuje (doda .js-anim na ). */ .reveal{opacity:1;transform:none;transition:opacity .55s,transform .55s} .js-anim .reveal{opacity:0;transform:translateY(20px)} .js-anim .reveal.visible{opacity:1;transform:none} /* ══════════════════════════════════════════ TOPBAR ══════════════════════════════════════════ */ #topbar{background:var(--navy);padding:9px 0} .tb-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem} .tb-contacts{display:flex;align-items:center;gap:1.8rem;flex-wrap:wrap} .tb-item{display:flex;align-items:center;gap:7px;font-size:.8rem;color:rgba(255,255,255,.7)} .tb-item svg{width:14px;height:14px;flex-shrink:0;fill:rgba(255,255,255,.5)} .tb-item a{color:rgba(255,255,255,.85);transition:color .2s}.tb-item a:hover{color:#fff} .tb-right{display:flex;align-items:center;gap:1rem} .tb-social{display:flex;gap:.4rem} .tb-social a{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.1);transition:background .2s} .tb-social a:hover{background:var(--sky)} .tb-social svg{width:13px;height:13px;fill:rgba(255,255,255,.75)} .tb-appt{background:var(--sky);color:#fff;font-size:.78rem;font-weight:600;padding:.35rem 1rem;border-radius:50px;white-space:nowrap;transition:background .2s} .tb-appt:hover{background:var(--mint)} /* ══════════════════════════════════════════ NAV ══════════════════════════════════════════ */ nav{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:999;transition:box-shadow .3s} nav.scrolled{box-shadow:0 4px 20px rgba(13,43,94,.08)} .nav-in{display:flex;align-items:center;justify-content:space-between;padding:0 24px;max-width:1160px;margin:0 auto;gap:1rem} .logo{display:flex;align-items:center;padding:10px 0} .logo svg{height:48px;width:auto;display:block} .nav-menu{display:flex;align-items:center;list-style:none;gap:.1rem} .nav-menu>li{position:relative} .nav-menu>li>a{display:flex;align-items:center;gap:4px;padding:.9rem 1rem;font-size:.87rem;font-weight:500;color:var(--muted);transition:color .2s;white-space:nowrap} .nav-menu>li>a:hover,.nav-menu>li.active>a{color:var(--sky)} .nav-menu>li>a svg{width:11px;height:11px;fill:currentColor;transition:transform .2s} .nav-menu>li:hover>a svg{transform:rotate(180deg)} .dropdown{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--border);border-radius:10px;min-width:210px;padding:.4rem 0;box-shadow:0 8px 32px rgba(13,43,94,.1);z-index:100} .nav-menu>li:hover .dropdown{display:block} .dropdown a{display:block;padding:.55rem 1.2rem;font-size:.84rem;color:var(--muted);transition:color .2s,background .2s} .dropdown a:hover{color:var(--sky);background:var(--sky-pale)} .nav-cta{background:var(--sky);color:#fff;padding:.55rem 1.4rem;border-radius:50px;font-size:.85rem;font-weight:600;white-space:nowrap;transition:all .2s} .nav-cta:hover{background:var(--navy);transform:translateY(-1px)} .burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px} .burger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:.3s} /* ══════════════════════════════════════════ HERO ══════════════════════════════════════════ */ #hero{ min-height:auto; display:grid; grid-template-columns:1.15fr .85fr; background:linear-gradient(110deg,#0D2B5E 0%,#1A3A7A 50%,#163870 100%); overflow:hidden; width:100%; } .hero-left{ display:flex;flex-direction:column;justify-content:center; padding:62px 2.5% 58px 7%; position:relative;min-width:0; } .hero-left::after{ content:'';position:absolute;right:0;top:15%;bottom:15%; width:1px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.12),transparent); } .hero-badge{ display:inline-flex;align-items:center;gap:7px; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18); border-radius:50px;padding:.35rem .9rem; font-size:.8rem;font-weight:500;color:rgba(255,255,255,.88); margin-bottom:1.1rem;width:fit-content; } .hero-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--sky2);flex-shrink:0} .hero-h1{ font-family:'Playfair Display',serif; font-size:clamp(1.85rem,2.9vw,3.1rem); font-weight:700;line-height:1.12;color:#fff;margin-bottom:.95rem; } .hero-h1 em{font-style:italic;color:var(--sky2)} .hero-p{font-size:1rem;color:rgba(255,255,255,.7);max-width:470px;line-height:1.78;margin-bottom:1.7rem;font-weight:300} .hero-btns{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.6rem} .hero-stats{display:flex;gap:2.4rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.14);flex-wrap:wrap} .hs-num{font-family:'Playfair Display',serif;font-size:clamp(1.9rem,2.6vw,2.7rem);font-weight:700;color:#fff;line-height:1;letter-spacing:-.01em} .hs-lbl{font-size:.72rem;color:rgba(255,255,255,.55);margin-top:6px;text-transform:uppercase;letter-spacing:.08em;font-weight:500} /* Desna kolona – animacija */ .hero-right{ display:flex;align-items:center;justify-content:center; padding:48px 6% 48px 1.5%; overflow:hidden;min-width:0; } .hero-anim-wrap{ display:flex;flex-direction:column;align-items:center; gap:clamp(8px,1.5vh,18px); width:100%;max-width:min(300px,36vw); } .ha-svg{ display:block;width:min(130px,20vw);height:auto; overflow:visible;flex-shrink:0; animation:haPulse 4s ease-in-out 3s infinite; } .ha-circle{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.15);stroke-width:3;opacity:0;transform-origin:205px 220px;animation:haCircle 1s ease .1s forwards} .ha-fill{fill:#fff;fill-rule:evenodd;clip-path:inset(0 100% 0 0);animation:haReveal 2.2s cubic-bezier(.77,0,.18,1) .35s forwards} .ha-trace{fill:none;stroke:rgba(255,255,255,.8);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;opacity:0;stroke-dasharray:1800;stroke-dashoffset:1800;animation:haTrace 2.25s ease .25s forwards} .ha-text{width:100%;text-align:center;overflow:hidden} .ha-title-wrap{display:flex;flex-direction:column;align-items:center;line-height:.9;margin-bottom:clamp(5px,1vh,10px)} .ha-t1,.ha-t2{ display:block; font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif; font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:#fff; font-size:clamp(11px,1.75vw,32px); opacity:0;white-space:nowrap;overflow:hidden;text-overflow:clip; max-width:100%; } .ha-t1{transform:translateX(40px);animation:haFromRight .9s ease 1.2s forwards} .ha-t2{transform:translateX(-40px);animation:haFromLeft .9s ease 1.45s forwards} .ha-doctor-row{ display:flex;align-items:center;justify-content:center; gap:clamp(5px,.8vw,12px);margin-bottom:clamp(5px,1vh,10px); overflow:hidden;width:100%; } .ha-line{flex:1;max-width:50px;height:2px;background:rgba(255,255,255,.45);transform:scaleX(0)} .ha-line:first-child{transform-origin:right;animation:haLineGrow .8s ease 1.9s forwards} .ha-line:last-child{transform-origin:left;animation:haLineGrow .8s ease 2.1s forwards} .ha-doctor{ font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif; font-size:clamp(10px,1.5vw,25px); font-weight:800;color:#fff; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; opacity:0;transform:translateY(16px); animation:haFromBot .85s ease 1.7s forwards; flex-shrink:1;min-width:0; } .ha-slogan{ display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px; font-family:Arial,sans-serif;font-size:clamp(6px,.85vw,10px); font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.5);opacity:0;animation:haFromBot .8s ease 2.5s forwards; } .ha-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.35)} @keyframes haCircle {from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}} @keyframes haReveal {from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes haTrace {0%{opacity:0;stroke-dashoffset:1800}12%{opacity:.8}85%{opacity:.35}100%{opacity:0;stroke-dashoffset:0}} @keyframes haPulse {0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 6px 18px rgba(255,255,255,.1))}} @keyframes haFromRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}} @keyframes haFromLeft {from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}} @keyframes haFromBot {from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes haLineGrow {from{transform:scaleX(0)}to{transform:scaleX(1)}} /* ══════════════════════════════════════════ STRIP – brzi kontakt ══════════════════════════════════════════ */ #strip{background:var(--sky);padding:24px 0} .strip-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.2rem} .strip-text h2{font-family:'Playfair Display',serif;font-size:1.35rem;color:#fff;font-weight:600} .strip-text p{font-size:.8rem;color:rgba(255,255,255,.75);margin-top:2px} .strip-cx{display:flex;gap:1.8rem;flex-wrap:wrap} .scx{display:flex;align-items:center;gap:9px} .scx-ic{width:34px;height:34px;background:rgba(255,255,255,.15);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .scx-ic svg{width:15px;height:15px;fill:#fff} .scx-l{font-size:.68rem;color:rgba(255,255,255,.62);text-transform:uppercase;letter-spacing:.08em} .scx-v{font-size:.9rem;font-weight:600;color:#fff} .btn-white{background:#fff;color:var(--sky);padding:.62rem 1.5rem;border-radius:50px;font-size:.85rem;font-weight:700;display:inline-block;transition:all .2s;white-space:nowrap} .btn-white:hover{background:var(--navy);color:#fff} /* ══════════════════════════════════════════ O NAMA ══════════════════════════════════════════ */ #about{background:var(--off)} .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .about-img-area{position:relative} .about-img-box{border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:linear-gradient(135deg,var(--sky-pale) 0%,#C5E2F8 100%);display:flex;align-items:center;justify-content:center} .about-img-box img{width:100%;height:100%;object-fit:cover} .about-img-ph{width:80px;height:80px;fill:var(--sky);opacity:.2} .about-badge{position:absolute;bottom:1.5rem;right:-1.5rem;background:var(--navy);color:#fff;padding:1.1rem 1.4rem;border-radius:12px;box-shadow:0 8px 28px rgba(13,43,94,.28);text-align:center} .about-badge .abn{font-family:'Playfair Display',serif;font-size:2.2rem;font-weight:700;line-height:1} .about-badge .abl{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;opacity:.6;margin-top:3px} .about-content{display:flex;flex-direction:column;gap:1rem} .check-list{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin:.2rem 0} .check-list li{display:flex;align-items:flex-start;gap:10px;font-size:.91rem;color:var(--muted);line-height:1.6} .chk{width:20px;height:20px;background:var(--sky-pale);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px} .chk svg{width:10px;height:8px;stroke:var(--sky);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* ══════════════════════════════════════════ USLUGE ══════════════════════════════════════════ */ #services{background:#fff} .svc-hdr{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2.5rem;flex-wrap:wrap;gap:1.5rem} .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem} .svc-card{background:var(--off);border-radius:14px;padding:1.8rem;border:1px solid var(--border);transition:box-shadow .25s,transform .25s,border-color .25s;display:flex;flex-direction:column} .svc-card:hover{box-shadow:0 10px 32px rgba(13,43,94,.1);transform:translateY(-3px);border-color:var(--sky)} .svc-ic{width:46px;height:46px;background:var(--sky-pale);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;flex-shrink:0} .svc-ic svg{width:22px;height:22px;color:var(--sky)} .svc-t{font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:.4rem} .svc-d{font-size:.84rem;color:var(--muted);line-height:1.7;flex:1} .svc-a{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:600;color:var(--sky);margin-top:.8rem;transition:gap .2s} .svc-a:hover{gap:9px} /* ══════════════════════════════════════════ PREDNOSTI ══════════════════════════════════════════ */ #adv{background:var(--navy)} .adv-hdr{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;margin-bottom:2.5rem} .adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06)} .adv-card{background:var(--navy);padding:1.8rem;transition:background .2s} .adv-card:hover{background:var(--navy2)} .adv-ic{width:42px;height:42px;background:rgba(30,127,212,.2);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem} .adv-ic svg{width:20px;height:20px;fill:none;stroke:var(--sky2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .adv-t{font-size:.93rem;font-weight:600;color:#fff;margin-bottom:.35rem} .adv-d{font-size:.82rem;color:rgba(255,255,255,.42);line-height:1.7} /* ══════════════════════════════════════════ RECENZIJE ══════════════════════════════════════════ */ #testi{background:var(--off)} .testi-hdr{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2.5rem;flex-wrap:wrap;gap:1.5rem} .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem} .testi-card{background:#fff;border-radius:14px;padding:1.8rem;border:1px solid var(--border)} .t-stars{display:flex;gap:3px;margin-bottom:.8rem} .t-stars span{color:var(--gold);font-size:13px} .t-text{font-size:.88rem;color:var(--muted);line-height:1.8;font-style:italic;margin-bottom:1.2rem} .t-auth{display:flex;align-items:center;gap:10px} .t-av{width:38px;height:38px;border-radius:50%;background:var(--sky-pale);display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:700;color:var(--sky);flex-shrink:0} .t-name{font-size:.86rem;font-weight:700;color:var(--navy)} .t-role{font-size:.72rem;color:var(--muted);margin-top:1px} /* ══════════════════════════════════════════ STATISTIKE ══════════════════════════════════════════ */ #stats{background:var(--navy2);padding:70px 0} .stats-in{display:grid;grid-template-columns:1fr 2fr;gap:5rem;align-items:center} .stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5px;background:rgba(255,255,255,.08)} .stat-box{background:var(--navy2);padding:1.8rem} .stat-n{font-family:'Playfair Display',serif;font-size:2.6rem;font-weight:700;color:var(--sky2);line-height:1} .stat-l{font-size:.73rem;color:rgba(255,255,255,.45);margin-top:5px;text-transform:uppercase;letter-spacing:.06em} .stat-d{font-size:.78rem;color:rgba(255,255,255,.25);margin-top:3px} /* ══════════════════════════════════════════ BLOG ══════════════════════════════════════════ */ #blog{background:#fff} .blog-hdr{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2.5rem;flex-wrap:wrap;gap:1.5rem} .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem} .blog-card{border-radius:14px;overflow:hidden;border:1px solid var(--border);transition:box-shadow .25s} .blog-card:hover{box-shadow:0 8px 28px rgba(13,43,94,.08)} .blog-img{background:var(--sky-pale);height:190px;display:flex;align-items:center;justify-content:center;overflow:hidden} .blog-img img{width:100%;height:100%;object-fit:cover} .blog-img svg{width:42px;height:42px;fill:var(--sky);opacity:.2} .blog-body{padding:1.3rem} .blog-meta{font-size:.71rem;color:var(--sky);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem} .blog-t{font-size:.96rem;font-weight:700;color:var(--navy);line-height:1.4;margin-bottom:.55rem} .blog-ex{font-size:.82rem;color:var(--muted);line-height:1.7} .blog-a{display:inline-flex;align-items:center;gap:5px;font-size:.79rem;font-weight:600;color:var(--sky);margin-top:.7rem} /* ══════════════════════════════════════════ KONTAKT ══════════════════════════════════════════ */ #contact{background:var(--off)} .ct-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:4rem;align-items:start} .ct-items{display:flex;flex-direction:column;gap:.9rem;margin-top:1.5rem} .ci{display:flex;align-items:flex-start;gap:14px} .ci-ic{width:42px;height:42px;border-radius:50%;background:var(--sky-pale);display:flex;align-items:center;justify-content:center;flex-shrink:0} .ci-ic svg{width:18px;height:18px;fill:none;stroke:var(--sky);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ci-lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:2px} .ci-val{font-size:.92rem;color:var(--navy);font-weight:500} .hrs-grid{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin-top:.3rem} .hrs-d{font-size:.8rem;color:var(--muted)} .hrs-t{font-size:.8rem;color:var(--navy);font-weight:500} .map-box{border-radius:12px;overflow:hidden;border:1px solid var(--border);height:220px;margin-top:1rem} .map-box iframe{display:block;width:100%;height:100%;border:0} /* Fluent Forms */ .ct-form-wrap{background:#fff;border-radius:16px;padding:2.2rem;border:1px solid var(--border);box-shadow:0 4px 24px rgba(13,43,94,.06)} .cf-title{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:700;color:var(--navy);margin-bottom:.3rem} .cf-sub{font-size:.82rem;color:var(--muted);margin-bottom:1.4rem} .ct-form-wrap .ff-el-group{margin-bottom:1rem} .ct-form-wrap .ff-el-input--label label,.ct-form-wrap label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.3rem;display:block} .ct-form-wrap input[type=text], .ct-form-wrap input[type=email], .ct-form-wrap input[type=tel], .ct-form-wrap input[type=date], .ct-form-wrap select, .ct-form-wrap textarea{width:100%;background:var(--off);border:1px solid var(--border);border-radius:8px;padding:.76rem 1rem;font-family:'Outfit',sans-serif;font-size:.91rem;color:var(--navy);outline:none;transition:border-color .2s;resize:vertical} .ct-form-wrap input:focus,.ct-form-wrap select:focus,.ct-form-wrap textarea:focus{border-color:var(--sky)} .ct-form-wrap .ff-btn-submit,.ct-form-wrap .submit-btn{width:100%;padding:.88rem;background:var(--sky);color:#fff;border:none;border-radius:8px;font-size:.93rem;font-weight:600;font-family:'Outfit',sans-serif;cursor:pointer;transition:background .2s;margin-top:.4rem} .ct-form-wrap .ff-btn-submit:hover,.ct-form-wrap .submit-btn:hover{background:var(--navy)} /* ══════════════════════════════════════════ PARTNERI ══════════════════════════════════════════ */ #partners{background:var(--navy);padding:44px 0} .p-in{text-align:center} .p-lbl{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:1.6rem} .p-logos{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;align-items:center} .p-logo{background:rgba(255,255,255,.07);border-radius:8px;padding:.65rem 1.3rem;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.38);letter-spacing:.05em} /* ══════════════════════════════════════════ FOOTER ══════════════════════════════════════════ */ footer{background:var(--navy);padding:55px 0 26px;border-top:1px solid rgba(255,255,255,.07)} .ft-main{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem} .ft-brand-d{font-size:.82rem;color:rgba(255,255,255,.4);line-height:1.8;margin-top:.7rem;max-width:230px} .ft-social{display:flex;gap:.5rem;margin-top:1rem} .ft-social a{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background .2s} .ft-social a:hover{background:var(--sky)} .ft-social svg{width:13px;height:13px;fill:rgba(255,255,255,.6)} .ft-col-t{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.5);margin-bottom:.85rem} .ft-col ul{list-style:none;display:flex;flex-direction:column;gap:.42rem} .ft-col ul li a{font-size:.82rem;color:rgba(255,255,255,.36);transition:color .2s} .ft-col ul li a:hover{color:var(--sky2)} .ft-bot{border-top:1px solid rgba(255,255,255,.08);padding-top:1.4rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem} .ft-copy{font-size:.76rem;color:rgba(255,255,255,.28)} .ft-leg{display:flex;gap:1.4rem} .ft-leg a{font-size:.76rem;color:rgba(255,255,255,.28)} .ft-leg a:hover{color:var(--sky2)} /* ══════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════ */ @media(max-width:1024px){ .adv-grid{grid-template-columns:1fr 1fr} .ft-main{grid-template-columns:1fr 1fr} .stats-in{grid-template-columns:1fr;gap:2.5rem} } @media(max-width:900px){ #hero{grid-template-columns:1fr;min-height:auto} .hero-left{padding:55px 6% 25px;min-height:auto} .hero-left::after{display:none} .hero-right{padding:20px 6% 50px;overflow:hidden} .hero-anim-wrap{max-width:min(300px,36vw);gap:2.5rem} .about-badge{right:0} .adv-hdr{grid-template-columns:1fr} .svc-grid,.testi-grid,.blog-grid{grid-template-columns:1fr 1fr} .team-grid{grid-template-columns:1fr 1fr} .stats-grid{grid-template-columns:1fr 1fr} .strip-in{flex-direction:column;align-items:flex-start} } @media(max-width:1200px) and (min-width:901px){ .ha-svg{max-width:min(130px,20vw);flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;padding:1rem 24px;border-bottom:1px solid var(--border);gap:.3rem} .nav-menu.open{display:flex} .burger{display:flex} .nav-cta{display:none} section{padding:56px 0} .svc-grid,.testi-grid,.blog-grid,.adv-grid{grid-template-columns:1fr} .team-grid{grid-template-columns:1fr} .ft-main{grid-template-columns:1fr;gap:1.5rem} .ft-bot{flex-direction:column;align-items:flex-start} .strip-cx{flex-direction:column;gap:.8rem} .hero-stats{flex-wrap:wrap;gap:1.2rem} .ha-svg{max-width:min(130px,20vw);text-align:center} #topbar{display:none} } @media(prefers-reduced-motion:reduce){ .ha-circle,.ha-t1,.ha-t2,.ha-doctor,.ha-slogan{opacity:1!important;transform:none!important} .ha-fill{clip-path:inset(0)!important} .ha-line{transform:scaleX(1)!important} .ha-trace{display:none} } /* ══════════════════════════════════════════ NAŠ TIM ══════════════════════════════════════════ */ #tim{background:#fff} .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem} .team-card{border-radius:14px;overflow:hidden;border:1px solid var(--border);transition:box-shadow .25s,transform .25s} .team-card:hover{box-shadow:0 10px 30px rgba(13,43,94,.1);transform:translateY(-3px)} .team-photo{background:var(--sky-pale);aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden} .team-photo img{width:100%;height:100%;object-fit:cover;object-position:top center} .team-avatar{width:70px;height:70px;border-radius:50%;background:var(--sky);color:#fff;font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:700;display:flex;align-items:center;justify-content:center} .team-info{padding:1.2rem 1.3rem} .team-name{font-size:.97rem;font-weight:700;color:var(--navy)} .team-role{font-size:.8rem;color:var(--sky);margin-top:3px;font-weight:500} /* Google recenzije CTA dugme */ .google-review-btn{ display:inline-flex;align-items:center; background:#fff; border:1.5px solid var(--border); border-radius:50px; padding:.75rem 1.8rem; font-family:'Outfit',sans-serif; font-size:.9rem;font-weight:600; color:var(--navy); text-decoration:none; box-shadow:0 4px 16px rgba(13,43,94,.08); transition:all .2s; } .google-review-btn:hover{ box-shadow:0 6px 24px rgba(13,43,94,.14); transform:translateY(-2px); border-color:var(--sky); } /* ══════════════════════════════════════════ ZAŠTITA ŠIRINE – poništava ograničenja iz starih tema / keš plugina ══════════════════════════════════════════ */ html,body{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;float:none!important} #topbar,#nav,nav,#hero,#strip,#partners,footer, section,#about,#services,#adv,#testi,#tim,#stats,#blog,#contact{ width:100%!important;max-width:100%!important;float:none!important; } #page,#content,#primary,#main,.site,.site-content,.site-main, .wrapper,.inner-wrapper,.container-fluid,.entry-content,.content-area{ width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;float:none!important; } .nav-in{max-width:1160px!important;margin:0 auto!important;width:100%!important} #hero{display:grid!important;grid-template-columns:1fr 1fr!important} @media(max-width:900px){#hero{grid-template-columns:1fr!important}} /* Krajnja zaštita – nijedna sekcija ne smije ostati nevidljiva */ #hero,#strip,#about,#services,#adv,#testi,#tim,#stats,#blog,#contact,#partners,footer{ opacity:1!important;visibility:visible!important;display:block; } #hero{display:grid!important} #strip,#partners{display:block!important} /* ══════════════════════════════════════════ KONTAKT SEKCIJA (ct-) ══════════════════════════════════════════ */ .ct-sec{position:relative;overflow:hidden;isolation:isolate; background:radial-gradient(circle at 5% 12%,rgba(30,127,212,.09),transparent 26%), radial-gradient(circle at 94% 86%,rgba(16,184,146,.07),transparent 28%), linear-gradient(135deg,#fff 0%,#f8fbfe 48%,#eef4fa 100%)} .ct-deco{position:absolute;z-index:-1;border-radius:50%;pointer-events:none} .ct-deco-1{top:-180px;left:-130px;width:430px;height:430px;border:75px solid rgba(30,127,212,.05);animation:ctFloat 10s ease-in-out infinite} .ct-deco-2{right:-120px;bottom:-170px;width:390px;height:390px;background:rgba(30,127,212,.04);animation:ctFloat 12s ease-in-out infinite reverse} .ct-head{max-width:760px;margin:0 auto 3rem;text-align:center} .ct-eyebrow{display:inline-flex;align-items:center;gap:11px;margin-bottom:.8rem;color:var(--sky); font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase} .ct-eyebrow::before,.ct-eyebrow::after{content:"";width:32px;height:1px;background:var(--sky)} .ct-eyebrow-sm::before,.ct-eyebrow-sm::after{display:none} .ct-head h2{font-family:'Playfair Display',serif;font-size:clamp(1.9rem,3.4vw,3rem);font-weight:700; line-height:1.1;color:var(--navy);margin:0} .ct-head h2 em{font-style:italic;color:var(--sky)} .ct-head p{max-width:620px;margin:1rem auto 0;color:var(--muted);font-size:.95rem;line-height:1.8;font-weight:300} .ct-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2rem;align-items:start} .ct-left,.ct-right{display:flex;flex-direction:column;gap:1rem;min-width:0} /* Animirani logo */ .ct-logo-box{position:relative;display:flex;align-items:center;gap:1.3rem;padding:1.5rem;overflow:hidden; border:1px solid var(--border);border-radius:22px; background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(240,247,253,.97)); box-shadow:0 18px 45px rgba(13,43,94,.07)} .ct-logo-box::after{content:"";position:absolute;right:-45px;bottom:-60px;width:165px;height:165px; border-radius:50%;background:rgba(30,127,212,.05)} .ct-logo-svg{position:relative;z-index:2;flex:0 0 110px;width:110px;height:auto;overflow:visible} .ct-logo-circle{fill:var(--sky-pale);opacity:0;transform-origin:205px 220px;animation:ctCircle .8s ease .3s forwards} .ct-logo-fill{fill:var(--navy);fill-rule:evenodd;clip-path:inset(0 100% 0 0); animation:ctReveal 2s cubic-bezier(.77,0,.18,1) .5s forwards} .ct-logo-trace{fill:none;stroke:var(--sky);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round; opacity:0;stroke-dasharray:1800;stroke-dashoffset:1800;animation:ctTrace 2.1s ease .4s forwards} .ct-logo-text{position:relative;z-index:2;min-width:0} .ct-logo-text strong{display:block;margin-bottom:.3rem;color:var(--navy); font-family:'Playfair Display',serif;font-size:clamp(1.2rem,2.2vw,1.7rem);line-height:1.1} .ct-logo-text span{display:block;max-width:210px;color:var(--muted);font-size:.85rem;line-height:1.5} /* Kartice */ .ct-cards{display:grid;gap:.75rem} .ct-card{position:relative;display:grid;grid-template-columns:50px minmax(0,1fr) auto;align-items:center; gap:.9rem;padding:.95rem 1.1rem;overflow:hidden;border:1px solid var(--border);border-radius:15px; background:rgba(255,255,255,.94);box-shadow:0 8px 26px rgba(13,43,94,.05);color:inherit; transition:transform .3s,border-color .3s,box-shadow .3s} .ct-card::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;transform:scaleY(0); transform-origin:bottom;background:var(--sky);transition:transform .35s} a.ct-card:hover{transform:translateY(-4px);border-color:var(--sky);box-shadow:0 14px 32px rgba(13,43,94,.1)} a.ct-card:hover::before{transform:scaleY(1)} .ct-ic{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:14px; background:var(--sky-pale);transition:background .3s,transform .3s} .ct-ic svg{width:23px;height:23px;fill:var(--sky);transition:fill .3s} a.ct-card:hover .ct-ic{transform:rotate(-5deg) scale(1.06);background:var(--sky)} a.ct-card:hover .ct-ic svg{fill:#fff} .ct-body{min-width:0} .ct-lbl{display:block;margin-bottom:.2rem;color:var(--sky);font-size:.66rem;font-weight:700; letter-spacing:.1em;text-transform:uppercase} .ct-card strong{display:block;overflow-wrap:anywhere;color:var(--navy);font-size:.94rem;line-height:1.3;font-weight:600} .ct-card small{display:block;margin-top:.2rem;color:var(--muted);font-size:.75rem} .ct-arrow{color:var(--sky);font-size:1.2rem;transition:transform .3s} a.ct-card:hover .ct-arrow{transform:translateX(5px)} .ct-hours{display:grid;grid-template-columns:auto 1fr;gap:.15rem .8rem;margin-top:.1rem} .ct-hours span{color:var(--muted);font-size:.78rem} .ct-hours b{color:var(--navy);font-size:.78rem;font-weight:600;text-align:right} /* Napomena */ .ct-notice{display:flex;align-items:flex-start;gap:.75rem;padding:.9rem 1rem; border:1px dashed rgba(30,127,212,.3);border-radius:13px;background:rgba(30,127,212,.05)} .ct-notice p{color:var(--muted);font-size:.82rem;line-height:1.6} .ct-pulse{position:relative;flex:0 0 10px;width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--sky)} .ct-pulse::after{content:"";position:absolute;inset:-5px;border:1px solid var(--sky);border-radius:50%; animation:ctPulse 1.8s ease-out infinite} /* Mapa */ .ct-map{height:230px;border-radius:16px;overflow:hidden;border:1px solid var(--border); box-shadow:0 8px 26px rgba(13,43,94,.06)} .ct-map iframe{display:block;width:100%;height:100%;border:0} /* Forma */ .ct-form-card{position:relative;width:100%;padding:clamp(1.5rem,3vw,2.5rem);overflow:hidden; border:1px solid var(--border);border-radius:24px;background:rgba(255,255,255,.97); box-shadow:0 26px 60px rgba(13,43,94,.1),0 8px 20px rgba(13,43,94,.04)} .ct-form-card::before{content:"";position:absolute;top:-90px;right:-90px;width:210px;height:210px; border:40px solid rgba(30,127,212,.05);border-radius:50%} .ct-form-top{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem} .ct-form-top h3{font-family:'Playfair Display',serif;font-size:clamp(1.4rem,2.6vw,2rem); font-weight:700;color:var(--navy);line-height:1.15;margin:0} .ct-form-top p{max-width:460px;margin-top:.6rem;color:var(--muted);font-size:.86rem;line-height:1.65} .ct-cal-ic{display:flex;flex:0 0 56px;align-items:center;justify-content:center;width:56px;height:56px; border-radius:17px;background:var(--sky);box-shadow:0 12px 24px rgba(30,127,212,.28); animation:ctCalFloat 3.5s ease-in-out infinite} .ct-cal-ic svg{width:26px;height:26px;fill:#fff} .ct-divider{position:relative;height:1px;margin:1.5rem 0 1.7rem;overflow:hidden;background:var(--border)} .ct-divider span{position:absolute;top:0;left:0;width:95px;height:1px;background:var(--sky); animation:ctDividerMove 4s ease-in-out infinite alternate} .ct-form-wrap{position:relative;z-index:3} .ct-secure{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:.5rem; margin-top:1.1rem;color:var(--muted);font-size:.72rem;line-height:1.45;text-align:center} .ct-secure svg{flex:0 0 15px;width:15px;height:15px;fill:var(--sky)} /* Fluent Forms */ .ct-sec .fluentform .ff-el-group{margin-bottom:1rem!important} .ct-sec .fluentform .ff-el-input--label label{margin-bottom:.35rem!important;color:var(--muted)!important; font-family:'Outfit',sans-serif!important;font-size:.72rem!important;font-weight:600!important; letter-spacing:.06em!important;text-transform:uppercase!important} .ct-sec .fluentform input[type=text],.ct-sec .fluentform input[type=email], .ct-sec .fluentform input[type=tel],.ct-sec .fluentform input[type=number], .ct-sec .fluentform input[type=date],.ct-sec .fluentform input[type=url], .ct-sec .fluentform select,.ct-sec .fluentform textarea{ width:100%!important;min-height:50px!important;padding:.8rem 1rem!important; border:1px solid var(--border)!important;border-radius:11px!important;outline:none!important; color:var(--navy)!important;font-family:'Outfit',sans-serif!important;font-size:.9rem!important; background:var(--off)!important;box-shadow:none!important; transition:border-color .25s,background .25s,box-shadow .25s!important} .ct-sec .fluentform textarea{min-height:130px!important;resize:vertical} .ct-sec .fluentform input:focus,.ct-sec .fluentform select:focus,.ct-sec .fluentform textarea:focus{ border-color:var(--sky)!important;background:#fff!important;box-shadow:0 0 0 4px rgba(30,127,212,.1)!important} .ct-sec .fluentform input::placeholder,.ct-sec .fluentform textarea::placeholder{color:#9aa8bd!important;opacity:1} .ct-sec .fluentform input[type=checkbox]{accent-color:var(--sky)} .ct-sec .fluentform .ff-btn-submit,.ct-sec .fluentform button[type=submit]{ width:100%!important;min-height:52px!important;padding:.85rem 1.5rem!important;border:none!important; border-radius:12px!important;color:#fff!important;font-family:'Outfit',sans-serif!important; font-size:.95rem!important;font-weight:600!important;cursor:pointer!important; background:linear-gradient(135deg,var(--sky),var(--navy))!important; box-shadow:0 12px 24px rgba(30,127,212,.25)!important; transition:transform .3s,box-shadow .3s,filter .3s!important} .ct-sec .fluentform .ff-btn-submit:hover,.ct-sec .fluentform button[type=submit]:hover{ transform:translateY(-3px)!important;filter:brightness(1.06); box-shadow:0 18px 30px rgba(30,127,212,.32)!important} .ct-sec .fluentform .error{color:#c0392b!important;font-size:.75rem!important} .ct-sec .fluentform .ff-message-success{padding:1rem!important;border:1px solid rgba(16,184,146,.3)!important; border-radius:12px!important;color:#0b7a61!important;background:rgba(16,184,146,.08)!important} /* Animacije */ @keyframes ctCircle{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}} @keyframes ctReveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes ctTrace{0%{opacity:0;stroke-dashoffset:1800}12%{opacity:.85}85%{opacity:.4}100%{opacity:0;stroke-dashoffset:0}} @keyframes ctPulse{from{opacity:.7;transform:scale(.5)}to{opacity:0;transform:scale(1.7)}} @keyframes ctCalFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(2deg)}} @keyframes ctDividerMove{from{width:55px}to{width:155px}} @keyframes ctFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(20px,22px,0)}} /* Responsive */ @media(max-width:980px){ .ct-grid{grid-template-columns:1fr;gap:1.5rem} } @media(max-width:680px){ .ct-logo-box{flex-direction:column;text-align:center;padding:1.4rem 1.1rem} .ct-logo-svg{flex-basis:auto;width:100px} .ct-logo-text span{max-width:260px;margin:0 auto} .ct-card{grid-template-columns:44px minmax(0,1fr) auto;gap:.7rem;padding:.85rem} .ct-ic{width:44px;height:44px;border-radius:12px} .ct-ic svg{width:20px;height:20px} .ct-form-top{display:block} .ct-cal-ic{display:none} .ct-map{height:190px} } @media(max-width:400px){ .ct-card{grid-template-columns:42px minmax(0,1fr)} .ct-arrow{display:none} } @media(prefers-reduced-motion:reduce){ .ct-logo-circle{opacity:1} .ct-logo-fill{clip-path:inset(0)!important} .ct-logo-trace{display:none} } /* ══════════════════════════════════════════ WP NAVIGACIJSKI MENI (Izgled → Meniji) ══════════════════════════════════════════ */ .nav-menu .sub-menu{display:none;position:absolute;top:100%;left:0;background:#fff; border:1px solid var(--border);border-radius:10px;min-width:210px;padding:.4rem 0; box-shadow:0 8px 32px rgba(13,43,94,.1);z-index:100;list-style:none;margin:0} .nav-menu>li:hover>.sub-menu{display:block} .nav-menu .sub-menu li a{display:block;padding:.55rem 1.2rem;font-size:.84rem;color:var(--muted); transition:color .2s,background .2s} .nav-menu .sub-menu li a:hover{color:var(--sky);background:var(--sky-pale)} .nav-menu .current-menu-item>a,.nav-menu .current_page_item>a{color:var(--sky)!important} .nav-menu .menu-item-has-children>a::after{content:"";display:inline-block;width:6px;height:6px; margin-left:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-2px);transition:transform .2s} .nav-menu .menu-item-has-children:hover>a::after{transform:rotate(-135deg) translateY(0)} /* ══════════════════════════════════════════ UNUTRAŠNJE STRANICE (page.php) ══════════════════════════════════════════ */ .pg-hero{background:linear-gradient(110deg,#0D2B5E 0%,#1A3A7A 55%,#163870 100%); padding:70px 0 60px;position:relative;overflow:hidden} .pg-hero::after{content:'';position:absolute;right:-90px;bottom:-120px;width:320px;height:320px; border-radius:50%;background:rgba(255,255,255,.03);pointer-events:none} .pg-hero h1{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,3vw,2.8rem); font-weight:700;color:#fff;line-height:1.15;margin:0;position:relative;z-index:2} .pg-crumbs{position:relative;z-index:2;margin-top:.7rem;font-size:.8rem;color:rgba(255,255,255,.5)} .pg-crumbs a{color:rgba(255,255,255,.75)} .pg-crumbs a:hover{color:#fff} .pg-body{padding:60px 0 70px} .pg-content{max-width:820px;margin:0 auto;font-size:.98rem;line-height:1.85;color:var(--muted)} .pg-content h2{font-family:'Playfair Display',serif;font-size:1.6rem;color:var(--navy); margin:2rem 0 .8rem;line-height:1.25} .pg-content h3{font-size:1.2rem;color:var(--navy);margin:1.6rem 0 .6rem;font-weight:600} .pg-content p{margin-bottom:1.1rem} .pg-content ul,.pg-content ol{margin:0 0 1.1rem 1.3rem} .pg-content li{margin-bottom:.4rem} .pg-content a{color:var(--sky);text-decoration:underline} .pg-content img{border-radius:14px;margin:1.2rem 0} .pg-content blockquote{border-left:3px solid var(--sky);padding:.4rem 0 .4rem 1.2rem; margin:1.4rem 0;color:var(--navy);font-style:italic} .pg-content table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.9rem} .pg-content th,.pg-content td{border:1px solid var(--border);padding:.6rem .8rem;text-align:left} .pg-content th{background:var(--off);color:var(--navy);font-weight:600} @media(max-width:680px){.pg-hero{padding:50px 0 42px}.pg-body{padding:40px 0 50px}} /* Sekcije prikazane na unutrašnjim stranicama */ .page .ct-sec,.page #about,.page #services,.page #tim,.page #testi{padding-top:56px} .page #strip{margin-top:0} /* ══════════════════════════════════════════ CJENOVNIK (pr-) ══════════════════════════════════════════ */ #pricing{background:var(--off)} .pr-head{max-width:720px;margin:0 auto 2.5rem;text-align:center} .pr-head h2{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,3vw,2.6rem); font-weight:700;color:var(--navy);line-height:1.15;margin:0} .pr-head h2 em{font-style:italic;color:var(--sky)} .pr-head p{max-width:600px;margin:.9rem auto 0;color:var(--muted);font-size:.93rem;line-height:1.75;font-weight:300} .pr-groups{display:flex;flex-direction:column;gap:.9rem;max-width:900px;margin:0 auto} .pr-group{border:1px solid var(--border);border-radius:16px;background:#fff;overflow:hidden; box-shadow:0 6px 22px rgba(13,43,94,.05);transition:box-shadow .25s,border-color .25s} .pr-group[open]{border-color:rgba(30,127,212,.35);box-shadow:0 12px 34px rgba(13,43,94,.09)} .pr-summary{display:grid;grid-template-columns:46px 1fr auto auto;align-items:center;gap:1rem; padding:1.1rem 1.3rem;cursor:pointer;list-style:none;user-select:none;transition:background .2s} .pr-summary::-webkit-details-marker{display:none} .pr-summary:hover{background:var(--sky-pale)} .pr-sum-ic{display:flex;align-items:center;justify-content:center;width:46px;height:46px; border-radius:13px;background:var(--sky-pale);color:var(--sky);transition:background .25s,color .25s} .pr-sum-ic svg{width:22px;height:22px} .pr-group[open] .pr-sum-ic{background:var(--sky);color:#fff} .pr-sum-txt{min-width:0} .pr-sum-txt strong{display:block;color:var(--navy);font-size:1rem;font-weight:700;line-height:1.3} .pr-sum-txt small{display:block;margin-top:.15rem;color:var(--muted);font-size:.8rem;line-height:1.4} .pr-sum-count{padding:.2rem .6rem;border-radius:50px;background:var(--sky-pale);color:var(--sky); font-size:.72rem;font-weight:700} .pr-chevron{width:9px;height:9px;border-right:2px solid var(--sky);border-bottom:2px solid var(--sky); transform:rotate(45deg) translateY(-2px);transition:transform .28s} .pr-group[open] .pr-chevron{transform:rotate(-135deg) translateY(0)} .pr-list{list-style:none;margin:0;padding:0 1.3rem 1.1rem;border-top:1px solid var(--border)} .pr-item{display:grid;grid-template-columns:auto 1fr auto auto;align-items:baseline;gap:.55rem; padding:.62rem 0;border-bottom:1px dashed rgba(13,43,94,.08)} .pr-item:last-child{border-bottom:none} .pr-num{min-width:1.6rem;color:var(--sky);font-size:.74rem;font-weight:700;font-variant-numeric:tabular-nums} .pr-name{color:var(--navy);font-size:.9rem;line-height:1.45} .pr-dots{height:1px;border-bottom:1px dotted rgba(13,43,94,.25);transform:translateY(-3px)} .pr-price{color:var(--navy);font-size:.88rem;font-weight:700;white-space:nowrap} .pr-price-ask{color:var(--muted);font-weight:500;font-size:.8rem;font-style:italic} .pr-note{display:flex;align-items:flex-start;gap:.75rem;max-width:900px;margin:1.6rem auto 0; padding:.95rem 1.1rem;border:1px dashed rgba(30,127,212,.3);border-radius:13px;background:rgba(30,127,212,.05)} .pr-note p{color:var(--muted);font-size:.83rem;line-height:1.65} .pr-note a{color:var(--sky);font-weight:700} @media(max-width:680px){ .pr-summary{grid-template-columns:40px 1fr auto;gap:.7rem;padding:.9rem 1rem} .pr-sum-ic{width:40px;height:40px;border-radius:11px} .pr-sum-ic svg{width:19px;height:19px} .pr-sum-count{display:none} .pr-list{padding:0 1rem 1rem} .pr-item{grid-template-columns:auto 1fr auto;gap:.45rem} .pr-dots{display:none} .pr-name{font-size:.85rem} } /* ══════════════════════════════════════════ STATUS RADNOG VREMENA (oh-) ══════════════════════════════════════════ */ .oh-badge{display:inline-flex;align-items:center;gap:.55rem;padding:.34rem .85rem; border-radius:50px;border:1px solid transparent;line-height:1.2;white-space:nowrap} .oh-dot{position:relative;flex:0 0 9px;width:9px;height:9px;border-radius:50%} .oh-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid currentColor} .oh-txt{display:flex;flex-direction:column;min-width:0} .oh-txt b{font-size:.76rem;font-weight:700;letter-spacing:.01em} .oh-txt i{font-size:.68rem;font-style:normal;opacity:.75} .oh-open{background:rgba(16,184,146,.12);border-color:rgba(16,184,146,.35);color:#0b7a61} .oh-open .oh-dot{background:#10B892;color:#10B892} .oh-open .oh-dot::after{animation:ohPulse 1.9s ease-out infinite} .oh-closed{background:rgba(190,60,55,.1);border-color:rgba(190,60,55,.28);color:#9b3430} .oh-closed .oh-dot{background:#c0453f;color:#c0453f} .oh-arrange{background:rgba(201,168,76,.14);border-color:rgba(201,168,76,.4);color:#8a6f22} .oh-arrange .oh-dot{background:var(--gold);color:var(--gold)} .oh-arrange .oh-dot::after{animation:ohPulse 2.4s ease-out infinite} @keyframes ohPulse{0%{opacity:.75;transform:scale(.6)}100%{opacity:0;transform:scale(2)}} /* Varijanta na tamnoj pozadini (topbar) */ .oh-on-dark{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)} .oh-on-dark.oh-open{color:#7ef0d0} .oh-on-dark.oh-open .oh-dot{background:#4ee6bd;color:#4ee6bd} .oh-on-dark.oh-closed{color:#ffb3ae} .oh-on-dark.oh-closed .oh-dot{background:#ff8b84;color:#ff8b84} .oh-on-dark.oh-arrange{color:#f3d68a} .oh-on-dark.oh-arrange .oh-dot{background:#efc85f;color:#efc85f} /* U kartici kontakta */ .ct-card .oh-badge{margin-top:.45rem} @media(max-width:820px){#topbar .oh-badge{display:none}} @media(prefers-reduced-motion:reduce){.oh-dot::after{animation:none!important}} /* ── Pretraga cjenovnika ── */ .pr-search{position:relative;display:flex;align-items:center;max-width:640px;margin:0 auto 1rem} .pr-search-ic{position:absolute;left:1.05rem;display:flex;color:var(--sky);pointer-events:none} .pr-search-ic svg{width:19px;height:19px} .pr-search-input{width:100%;padding:.95rem 6.5rem .95rem 3rem;border:1px solid var(--border); border-radius:50px;background:#fff;font-family:'Outfit',sans-serif;font-size:.93rem;color:var(--navy); outline:none;box-shadow:0 6px 22px rgba(13,43,94,.06);transition:border-color .25s,box-shadow .25s} .pr-search-input:focus{border-color:var(--sky);box-shadow:0 0 0 4px rgba(30,127,212,.12)} .pr-search-input::placeholder{color:#9aa8bd} .pr-search-input::-webkit-search-cancel-button{display:none} .pr-search-clear{position:absolute;right:5.3rem;width:24px;height:24px;border:none;border-radius:50%; background:var(--sky-pale);color:var(--sky);font-size:1.1rem;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:background .2s} .pr-search-clear:hover{background:var(--sky);color:#fff} .pr-search-count{position:absolute;right:1.1rem;color:var(--muted);font-size:.76rem;font-weight:600;white-space:nowrap} .pr-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:900px;margin:0 auto 1.6rem} .pr-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem 1rem;border-radius:50px; border:1px solid var(--border);background:#fff;color:var(--muted);font-family:'Outfit',sans-serif; font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s} .pr-chip b{padding:.05rem .4rem;border-radius:50px;background:var(--off);color:var(--muted); font-size:.68rem;font-weight:700;transition:all .2s} .pr-chip:hover{border-color:var(--sky);color:var(--sky)} .pr-chip.is-active{background:var(--sky);border-color:var(--sky);color:#fff} .pr-chip.is-active b{background:rgba(255,255,255,.22);color:#fff} .pr-empty{max-width:900px;margin:1.5rem auto 0;padding:1.6rem;text-align:center; border:1px dashed var(--border);border-radius:14px;color:var(--muted);font-size:.9rem} .pr-group[hidden]{display:none} .pr-item[hidden]{display:none} @media(max-width:680px){ .pr-search-input{padding:.85rem 3rem .85rem 2.7rem;font-size:.88rem} .pr-search-clear{right:1rem} .pr-search-count{display:none} .pr-chips{gap:.35rem} .pr-chip{font-size:.74rem;padding:.35rem .8rem} } /* Partneri – podrška za logotipe i linkove */ a.p-logo{transition:background .2s,color .2s} a.p-logo:hover{background:rgba(255,255,255,.14);color:rgba(255,255,255,.7)} .p-logo img{max-height:34px;width:auto;filter:brightness(0) invert(1);opacity:.55;transition:opacity .2s} a.p-logo:hover img{opacity:.9} /* ══════════════════════════════════════════════════════════ MOBILNA VERZIJA – v1.2.0 Konsolidirani breakpointi (nadjačavaju ranija pravila) ══════════════════════════════════════════════════════════ */ /* Osnove za dodir */ html{-webkit-text-size-adjust:100%} img,svg,iframe{max-width:100%} a,button,summary,input,select,textarea{-webkit-tap-highlight-color:rgba(30,127,212,.15)} /* Novi članovi tima – ljepši raspored po broju */ .team-bio{margin-top:.5rem;color:var(--muted);font-size:.82rem;line-height:1.6} .team-count-1 .team-card,.team-count-2 .team-card{max-width:340px} .team-count-1,.team-count-2{justify-content:center} .team-count-2{grid-template-columns:repeat(2,minmax(0,340px))} .team-count-1{grid-template-columns:minmax(0,340px)} .t-star-off{color:#d5dce6} /* ─────────── ≤1100px : tablet landscape ─────────── */ @media(max-width:1100px){ .container{padding:0 20px} section{padding:64px 0} .svc-grid{grid-template-columns:repeat(2,1fr)} .adv-grid{grid-template-columns:repeat(2,1fr)} .testi-grid{grid-template-columns:repeat(2,1fr)} .team-grid{grid-template-columns:repeat(3,1fr)} .blog-grid{grid-template-columns:repeat(2,1fr)} } /* ─────────── ≤1024px : hamburger meni ─────────── */ @media(max-width:1024px){ .burger{display:flex;order:3} .nav-cta{display:none} .nav-in{padding:0 20px} /* Meni kao panel koji klizi odozgo */ .nav-menu{ display:flex!important;flex-direction:column;align-items:stretch;gap:0; position:fixed;top:0;left:0;right:0;bottom:0;z-index:1200; padding:86px 24px 32px;margin:0; background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch; transform:translateY(-100%);opacity:0;visibility:hidden; transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .25s,visibility .32s; } .nav-menu.open{transform:translateY(0);opacity:1;visibility:visible} .nav-menu>li{width:100%;border-bottom:1px solid var(--border)} .nav-menu>li>a{padding:1rem .2rem;font-size:1.02rem;font-weight:500;color:var(--navy)} .nav-menu>li>a:hover,.nav-menu .current-menu-item>a{color:var(--sky)} .nav-menu .sub-menu,.nav-menu .dropdown{ display:block;position:static;border:none;box-shadow:none;border-radius:0; min-width:0;padding:0 0 .6rem .9rem;background:transparent; } .nav-menu .sub-menu li a,.nav-menu .dropdown a{padding:.5rem .2rem;font-size:.9rem} .nav-menu .menu-item-has-children>a::after{display:none} /* Burger postaje X */ .burger{position:relative;z-index:1300;width:34px;height:34px;justify-content:center; align-items:center;gap:0;border-radius:9px} .burger span{position:absolute;width:22px;transition:transform .3s,opacity .2s,top .3s} .burger span:nth-child(1){top:11px} .burger span:nth-child(2){top:16px} .burger span:nth-child(3){top:21px} .burger.is-open span:nth-child(1){top:16px;transform:rotate(45deg)} .burger.is-open span:nth-child(2){opacity:0} .burger.is-open span:nth-child(3){top:16px;transform:rotate(-45deg)} body.nav-lock{overflow:hidden} } /* ─────────── ≤900px : jedna kolona ─────────── */ @media(max-width:900px){ section{padding:56px 0} #hero{grid-template-columns:1fr!important} .hero-left{padding:48px 6% 22px;text-align:left} .hero-left::after{display:none} .hero-right{padding:6px 6% 44px} .hero-anim-wrap{max-width:330px} .ha-svg{width:135px} .ha-t1,.ha-t2{font-size:clamp(20px,6vw,34px)} .ha-doctor{font-size:clamp(13px,4vw,22px)} .ha-slogan{font-size:9.5px;letter-spacing:.08em} .hero-h1{font-size:clamp(1.75rem,6.8vw,2.5rem)} .hero-p{max-width:100%;font-size:.96rem} .hero-stats{gap:1.8rem} .hs-num{font-size:1.75rem} .about-grid,.ct-grid,.stats-in,.adv-hdr{grid-template-columns:1fr!important;gap:2rem} .about-badge{position:static;display:inline-flex;gap:.7rem;align-items:baseline; margin-top:1rem;box-shadow:none} .about-badge .abn{font-size:1.7rem} .svc-hdr,.testi-hdr,.blog-hdr{flex-direction:column;align-items:flex-start;gap:.9rem} .sec-sub{max-width:100%} .stats-grid{grid-template-columns:repeat(2,1fr)} .team-grid{grid-template-columns:repeat(2,1fr)} .team-count-2{grid-template-columns:repeat(2,1fr)} .ft-main{grid-template-columns:repeat(2,1fr);gap:2rem} } /* ─────────── ≤700px : mobitel ─────────── */ @media(max-width:700px){ .container{padding:0 18px} section{padding:46px 0} .sec-title{font-size:clamp(1.5rem,6.6vw,2rem)} #topbar{padding:8px 0} .tb-inner{flex-direction:column;align-items:flex-start;gap:.5rem} .tb-contacts{gap:.35rem;flex-direction:column;align-items:flex-start;width:100%} .tb-item{font-size:.78rem} .tb-right{width:100%;justify-content:space-between} #topbar .oh-badge{display:inline-flex} .logo svg{height:38px} .nav-in{padding:0 18px} .strip-in{flex-direction:column;align-items:stretch;gap:1rem} .strip-cx{flex-direction:column;gap:.75rem} .btn-white{text-align:center} .svc-grid,.adv-grid,.testi-grid,.blog-grid,.team-grid, .team-count-1,.team-count-2{grid-template-columns:1fr!important} .team-count-1 .team-card,.team-count-2 .team-card{max-width:none} .team-photo{aspect-ratio:4/3} .stats-grid{grid-template-columns:1fr} .stat-box{padding:1.3rem} .stat-n{font-size:2.1rem} .ct-head h2,.pr-head h2{font-size:clamp(1.5rem,6.6vw,2rem)} .ct-form-card{padding:1.3rem;border-radius:18px} .ct-logo-box{flex-direction:column;text-align:center} .ct-map{height:200px} .pr-summary{grid-template-columns:38px 1fr auto;gap:.65rem;padding:.85rem .9rem} .pr-sum-txt strong{font-size:.92rem} .pr-sum-txt small{display:none} .pr-item{grid-template-columns:1fr auto;gap:.3rem .6rem;padding:.7rem 0} .pr-num{display:none} .pr-dots{display:none} .pr-name{font-size:.87rem} .pr-price{font-size:.85rem} .ft-main{grid-template-columns:1fr;gap:1.6rem} .ft-bot{flex-direction:column;align-items:flex-start;gap:.7rem} .p-logos{gap:.6rem} .p-logo{font-size:.76rem;padding:.5rem 1rem} .btn{padding:.72rem 1.5rem;font-size:.86rem} .hero-btns .btn{flex:1 1 100%;text-align:center} } /* ─────────── ≤420px : mali ekrani ─────────── */ @media(max-width:420px){ .container{padding:0 15px} .hero-left{padding:40px 5% 18px} .hero-right{padding:4px 5% 36px} .ha-svg{width:112px} .hero-stats{gap:1.3rem} .hs-num{font-size:1.55rem} .hs-lbl{font-size:.65rem} .hero-badge{font-size:.7rem;padding:.3rem .75rem} .logo svg{height:34px} .svc-card,.testi-card{padding:1.3rem} .ct-card{grid-template-columns:40px 1fr;padding:.8rem} .ct-arrow{display:none} .pr-chips{gap:.3rem} .pr-chip{font-size:.72rem;padding:.32rem .7rem} .pr-chip b{display:none} } /* Sve ostaje vidljivo bez obzira na širinu */ @media(max-width:1024px){ #hero,#strip,#about,#services,#pricing,#adv,#testi,#tim,#stats,#blog,#contact,#partners,footer{ opacity:1!important;visibility:visible!important; } } /* ── O nama: uvodna traka o iskustvu ── */ .about-lead{display:flex;align-items:flex-start;gap:.85rem;margin:.2rem 0 1.1rem;padding:.95rem 1.1rem; border:1px solid rgba(30,127,212,.22);border-left:3px solid var(--sky);border-radius:12px; background:linear-gradient(120deg,rgba(30,127,212,.07),rgba(16,184,146,.05))} .about-lead-ic{display:flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:34px; border-radius:10px;background:#fff;color:var(--sky);box-shadow:0 3px 10px rgba(13,43,94,.08)} .about-lead-ic svg{width:18px;height:18px} .about-lead-txt{color:var(--muted);font-size:.88rem;line-height:1.65} .about-lead-txt strong{display:block;color:var(--navy);font-size:.95rem;font-weight:700;margin-bottom:.15rem} @media(max-width:700px){ .about-lead{padding:.85rem .9rem;gap:.7rem} .about-lead-ic{flex:0 0 30px;width:30px;height:30px} .about-lead-txt{font-size:.83rem} } /* ══════════════════════════════════════════ PROMO BLOK (pm-) ══════════════════════════════════════════ */ .pm-sec{position:relative;overflow:hidden;isolation:isolate} .pm-deco{position:absolute;z-index:-1;border-radius:50%;pointer-events:none} .pm-deco-1{top:-140px;right:-100px;width:340px;height:340px;border:60px solid rgba(255,255,255,.05)} .pm-deco-2{bottom:-160px;left:-90px;width:300px;height:300px;background:rgba(255,255,255,.04)} .pm-card{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center; padding:clamp(1.6rem,4vw,3rem);border-radius:24px;position:relative;overflow:hidden} .pm-card.pm-has-img{grid-template-columns:1.15fr .85fr} .pm-body{min-width:0} .pm-badge{display:inline-flex;align-items:center;gap:7px;padding:.34rem .9rem;margin-bottom:1rem; border-radius:50px;font-size:.74rem;font-weight:600;letter-spacing:.02em} .pm-badge-dot{width:7px;height:7px;border-radius:50%;animation:ohPulse 2s ease-out infinite} .pm-title{font-family:'Playfair Display',serif;font-size:clamp(1.6rem,3.2vw,2.6rem); font-weight:700;line-height:1.15;margin:0} .pm-title em{font-style:italic} .pm-text{margin-top:.9rem;font-size:.95rem;line-height:1.8;font-weight:300;max-width:620px} .pm-btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem} .pm-note{margin-top:1rem;font-size:.78rem;opacity:.7} .pm-img{border-radius:18px;overflow:hidden;aspect-ratio:4/3} .pm-img img{width:100%;height:100%;object-fit:cover;display:block} /* Stil: navy (tamni) */ .pm-navy{background:var(--off)} .pm-navy .pm-card{background:linear-gradient(115deg,#0D2B5E 0%,#1A3A7A 55%,#163870 100%); box-shadow:0 26px 60px rgba(13,43,94,.22)} .pm-navy .pm-title{color:#fff} .pm-navy .pm-title em{color:var(--sky2)} .pm-navy .pm-text{color:rgba(255,255,255,.72)} .pm-navy .pm-note{color:rgba(255,255,255,.55)} .pm-navy .pm-badge{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff} .pm-navy .pm-badge-dot{background:var(--sky2);color:var(--sky2)} .pm-navy .pm-btn-1{background:#fff;color:var(--navy)} .pm-navy .pm-btn-1:hover{background:var(--sky2);color:#fff;transform:translateY(-2px)} .pm-navy .pm-btn-2{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)} .pm-navy .pm-btn-2:hover{background:rgba(255,255,255,.12)} /* Stil: sky (plavi) */ .pm-sky{background:#fff} .pm-sky .pm-card{background:linear-gradient(115deg,var(--sky) 0%,#1668b0 100%); box-shadow:0 26px 60px rgba(30,127,212,.25)} .pm-sky .pm-title,.pm-sky .pm-title em{color:#fff} .pm-sky .pm-text{color:rgba(255,255,255,.85)} .pm-sky .pm-note{color:rgba(255,255,255,.65)} .pm-sky .pm-badge{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);color:#fff} .pm-sky .pm-badge-dot{background:#fff;color:#fff} .pm-sky .pm-btn-1{background:#fff;color:var(--sky)} .pm-sky .pm-btn-1:hover{background:var(--navy);color:#fff;transform:translateY(-2px)} .pm-sky .pm-btn-2{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)} .pm-sky .pm-btn-2:hover{background:rgba(255,255,255,.15)} /* Stil: light (svijetli) */ .pm-light{background:var(--off)} .pm-light .pm-card{background:#fff;border:1px solid var(--border); box-shadow:0 18px 46px rgba(13,43,94,.08)} .pm-light .pm-title{color:var(--navy)} .pm-light .pm-title em{color:var(--sky)} .pm-light .pm-text{color:var(--muted)} .pm-light .pm-note{color:var(--muted)} .pm-light .pm-badge{background:var(--sky-pale);border:1px solid rgba(30,127,212,.22);color:var(--sky)} .pm-light .pm-badge-dot{background:var(--sky);color:var(--sky)} .pm-light .pm-btn-1{background:var(--sky);color:#fff} .pm-light .pm-btn-1:hover{background:var(--navy);transform:translateY(-2px)} .pm-light .pm-btn-2{background:transparent;color:var(--navy);border:1.5px solid var(--navy)} .pm-light .pm-btn-2:hover{background:var(--navy);color:#fff} @media(max-width:820px){ .pm-card,.pm-card.pm-has-img{grid-template-columns:1fr;gap:1.5rem} .pm-img{order:-1;aspect-ratio:16/9} } @media(max-width:700px){ .pm-card{padding:1.4rem;border-radius:18px} .pm-btns .btn{flex:1 1 100%;text-align:center} } /* ── Blog stranica ── */ .blog-img{display:flex;align-items:center;justify-content:center;overflow:hidden} .blog-img img{width:100%;height:190px;object-fit:cover;display:block;transition:transform .4s} .blog-card:hover .blog-img img{transform:scale(1.04)} .blog-t a{color:inherit} .blog-t a:hover{color:var(--sky)} .blog-nav{margin-top:2.5rem;text-align:center} .blog-nav .nav-links{display:inline-flex;flex-wrap:wrap;gap:.4rem;align-items:center} .blog-nav .page-numbers{display:inline-flex;align-items:center;justify-content:center; min-width:38px;height:38px;padding:0 .7rem;border:1px solid var(--border);border-radius:10px; background:#fff;color:var(--muted);font-size:.86rem;font-weight:600;transition:all .2s} .blog-nav .page-numbers:hover{border-color:var(--sky);color:var(--sky)} .blog-nav .page-numbers.current{background:var(--sky);border-color:var(--sky);color:#fff} .blog-nav .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} @media(max-width:700px){.blog-nav .page-numbers{min-width:34px;height:34px;font-size:.8rem}} /* ══════════════════════════════════════════ NAŠI RADOVI – prije / poslije (wk-) ══════════════════════════════════════════ */ #works{background:var(--off)} .wk-head{max-width:720px;margin:0 auto 2.5rem;text-align:center} .wk-head h2{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,3vw,2.6rem); font-weight:700;color:var(--navy);line-height:1.15;margin:0} .wk-head h2 em{font-style:italic;color:var(--sky)} .wk-head p{max-width:620px;margin:.9rem auto 0;color:var(--muted);font-size:.93rem;line-height:1.75;font-weight:300} .wk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.6rem} .wk-card{background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden; box-shadow:0 8px 26px rgba(13,43,94,.06);transition:box-shadow .3s,transform .3s} .wk-card:hover{box-shadow:0 18px 44px rgba(13,43,94,.11);transform:translateY(-3px)} /* Poređenje */ .wk-compare{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0D2B5E; cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none; --wk-pos:50%} .wk-compare:focus-visible{outline:3px solid var(--sky);outline-offset:-3px} /* Obje slike zauzimaju cijeli okvir i kadriraju se jednako */ .wk-img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:50% 50%;display:block;pointer-events:none} /* Slika „prije" se samo odsijeca, bez skaliranja */ .wk-img-before{clip-path:inset(0 calc(100% - var(--wk-pos)) 0 0);will-change:clip-path} /* Oznake */ .wk-tag{position:absolute;top:.8rem;z-index:3;padding:.28rem .8rem;border-radius:50px; font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; backdrop-filter:blur(6px);pointer-events:none;transition:opacity .2s} .wk-tag-before{left:.8rem;background:rgba(13,43,94,.78);color:#fff} .wk-tag-after{right:.8rem;background:rgba(16,184,146,.85);color:#fff} /* Ručica */ .wk-handle{position:absolute;top:0;bottom:0;left:var(--wk-pos);z-index:4;width:0; transform:translateX(-50%);pointer-events:none} .wk-handle-line{position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%); background:#fff;box-shadow:0 0 12px rgba(0,0,0,.35)} .wk-handle-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%; background:#fff;color:var(--sky);box-shadow:0 4px 18px rgba(0,0,0,.28);transition:transform .2s} .wk-handle-knob svg{width:20px;height:20px} .wk-compare:hover .wk-handle-knob{transform:translate(-50%,-50%) scale(1.08)} /* Klizač preko cijele slike (dostupnost + dodir) */ .wk-range{position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0; opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent} .wk-range::-webkit-slider-thumb{-webkit-appearance:none;width:48px;height:100%;cursor:ew-resize} .wk-range::-moz-range-thumb{width:48px;height:100%;border:0;background:transparent;cursor:ew-resize} /* Tekst kartice */ .wk-body{padding:1.3rem} .wk-type{display:inline-block;margin-bottom:.5rem;padding:.22rem .7rem;border-radius:50px; background:var(--sky-pale);color:var(--sky);font-size:.7rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase} .wk-title{font-size:1.02rem;font-weight:700;color:var(--navy);line-height:1.35;margin:0} .wk-desc{margin-top:.5rem;color:var(--muted);font-size:.86rem;line-height:1.7} .wk-time{display:inline-flex;align-items:center;gap:6px;margin-top:.8rem; color:var(--muted);font-size:.78rem;font-weight:500} .wk-time svg{width:14px;height:14px;color:var(--sky)} .wk-note{display:flex;align-items:flex-start;gap:.75rem;max-width:900px;margin:1.8rem auto 0; padding:.95rem 1.1rem;border:1px dashed rgba(30,127,212,.3);border-radius:13px;background:rgba(30,127,212,.05)} .wk-note p{color:var(--muted);font-size:.83rem;line-height:1.65} @media(max-width:700px){ .wk-grid{grid-template-columns:1fr;gap:1.2rem} .wk-handle-knob{width:38px;height:38px} .wk-handle-knob svg{width:17px;height:17px} .wk-tag{font-size:.64rem;padding:.24rem .65rem;top:.6rem} .wk-tag-before{left:.6rem}.wk-tag-after{right:.6rem} .wk-body{padding:1.1rem} } @media(prefers-reduced-motion:reduce){ .wk-card:hover{transform:none} .wk-compare:hover .wk-handle-knob{transform:translate(-50%,-50%)} }