/* Strana Kontakt: podaci i forma za zahtev za termin. */
/* Kontakt */
.kontakt{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.kontakt h2{font-size:clamp(2rem,4.4vw,3.4rem);margin-bottom:1.25rem}
.kontakt .uvod{color:var(--tekst-blaga);margin-bottom:2rem;max-width:28em}
.podaci{display:grid;gap:1.25rem;font-style:normal}
.podaci dt{font:700 .75rem var(--f-tekst);letter-spacing:.09em;text-transform:uppercase;color:var(--roza-tamna);margin-bottom:.2rem}
.podaci dd{margin:0}
.podaci a{text-decoration:none;border-bottom:1px solid var(--roza)}
.podaci a:hover{color:var(--bordo)}
.mapa{margin-top:1.75rem;aspect-ratio:16/9;border:1px dashed var(--roza);border-radius:var(--radius);display:grid;place-items:center;color:var(--roza-tamna);font-size:.95rem;text-align:center;padding:1rem;background:var(--podloga-2)}
/* Forma: tamna kartica sa lebdećim oznakama, izborom razloga i naprednom trakom */
.prednosti{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.6rem}
.prednosti li{display:flex;gap:.75rem;align-items:center;color:var(--tekst)}
.prednosti li::before{content:"";flex:none;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--bordo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf9f9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat}
.forma{position:relative;isolation:isolate;overflow:hidden;color:var(--podloga);background:linear-gradient(160deg,#5e1a28 0%,#43111c 60%,#2c0a12 100%);border-radius:20px;padding:clamp(1.75rem,4vw,3rem);box-shadow:0 30px 70px -35px rgba(44,10,18,.75)}
.forma::before{content:"";position:absolute;z-index:-2;width:70%;aspect-ratio:1;right:-25%;top:-30%;border-radius:50%;background:radial-gradient(circle,rgba(192,135,146,.55),transparent 65%);animation:lebdi 14s ease-in-out infinite alternate}
.forma::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.14;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes lebdi{from{transform:translate(0,0) scale(1)}to{transform:translate(-12%,14%) scale(1.15)}}
.forma__napredak{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(251,249,249,.12)}
.forma__napredak span{display:block;height:100%;width:calc(var(--p,0) * 100%);background:linear-gradient(90deg,var(--roza),var(--podloga));transition:width .4s ease}
.forma__telo{display:grid;gap:1.1rem}
.forma__naslov{font:italic 500 1.5rem/1.2 var(--f-naslov);color:var(--podloga-2);margin-bottom:.15rem}
.forma .dva{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.polje{position:relative}
.polje input{width:100%;font:400 1.05rem var(--f-tekst);color:#fff;background:rgba(251,249,249,.07);border:1px solid rgba(251,249,249,.22);border-radius:12px;padding:1.55rem 1rem .6rem;transition:border-color .25s,box-shadow .25s,background .25s}
.polje input:hover{background:rgba(251,249,249,.1)}
.polje input:focus{outline:none;border-color:var(--roza);background:rgba(251,249,249,.12);box-shadow:0 0 0 4px rgba(192,135,146,.28)}
.polje label{position:absolute;left:1rem;top:1.05rem;pointer-events:none;color:#dcc6cb;font:400 1.05rem/1.2 var(--f-tekst);transform-origin:left top;transition:transform .2s ease,color .2s ease}
.polje input:focus+label,.polje input:not(:placeholder-shown)+label{transform:translateY(-.6rem) scale(.74);color:var(--roza);font-weight:700;letter-spacing:.04em}
.polje input[aria-invalid="true"]{border-color:#ffb3bf}
.greska{display:block;margin-top:.4rem;font-size:.9rem;line-height:1.35;color:#ffc7cf}
.mamac{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.cipovi{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.cipovi legend{padding:0;margin-bottom:.6rem;font:700 .75rem var(--f-tekst);letter-spacing:.09em;text-transform:uppercase;color:var(--podloga-2)}
.cip{position:relative}
.cip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.cip span{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.1rem;border-radius:999px;border:1px solid rgba(251,249,249,.3);color:var(--podloga);font-size:.98rem;line-height:1;transition:background .25s,color .25s,border-color .25s,transform .25s}
.cip span::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:rgba(251,249,249,.35);transition:background .25s,transform .25s}
.cip:hover span{border-color:var(--roza)}
.cip input:checked+span{background:var(--podloga);color:var(--bordo);border-color:var(--podloga);transform:translateY(-1px)}
.cip input:checked+span::before{background:var(--bordo);transform:scale(1.3)}
.cip input:focus-visible+span{outline:3px solid var(--roza);outline-offset:3px}
.nap-zdravlje{background:rgba(234,168,180,.12);border:1px solid rgba(234,168,180,.4);color:var(--obav);border-radius:12px;padding:.8rem 1rem;font-size:.95rem;line-height:1.45}
.saglasnost{position:relative;display:flex;gap:.8rem;align-items:flex-start;font-size:.95rem;line-height:1.45;color:var(--podloga-2);cursor:pointer}
.saglasnost input{position:absolute;opacity:0;width:1.4rem;height:1.4rem;margin:0;cursor:pointer}
.kvacica{flex:none;width:1.4rem;height:1.4rem;border-radius:6px;border:1.5px solid rgba(251,249,249,.5);display:grid;place-items:center;transition:background .2s,border-color .2s}
.kvacica::after{content:"";width:.7rem;height:.4rem;border-left:2.5px solid var(--bordo);border-bottom:2.5px solid var(--bordo);transform:rotate(-45deg) scale(0);margin-top:-.15rem;transition:transform .2s ease}
.saglasnost input:checked~.kvacica{background:var(--podloga);border-color:var(--podloga)}
.saglasnost input:checked~.kvacica::after{transform:rotate(-45deg) scale(1)}
.saglasnost input:focus-visible~.kvacica{outline:3px solid var(--roza);outline-offset:3px}
.saglasnost a{color:#fff}
.forma .dugme{justify-self:start;margin-top:.25rem}
.forma .dugme--svetlo{transition:background .2s,transform .2s,box-shadow .2s}
.forma .dugme--svetlo:hover{transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(0,0,0,.6)}
.uspeh{display:grid;justify-items:center;text-align:center;gap:.6rem;padding:2.5rem 0;color:var(--podloga-2)}
.uspeh svg{color:var(--roza)}
.uspeh svg circle{stroke-dasharray:151;stroke-dashoffset:151;animation:crta .8s ease forwards}
.uspeh svg path{stroke-dasharray:40;stroke-dashoffset:40;animation:crta .5s .6s ease forwards}
@keyframes crta{to{stroke-dashoffset:0}}
.uspeh__naslov{font:500 1.9rem/1.15 var(--f-naslov);color:#fff}
/* Postepeno pojavljivanje polja */
.forma.vidi .forma__telo>*{animation:polje-gore .6s ease both}
.forma.vidi .forma__telo>:nth-child(2){animation-delay:.08s}.forma.vidi .forma__telo>:nth-child(3){animation-delay:.16s}.forma.vidi .forma__telo>:nth-child(4){animation-delay:.24s}.forma.vidi .forma__telo>:nth-child(5){animation-delay:.32s}.forma.vidi .forma__telo>:nth-child(n+6){animation-delay:.4s}
@keyframes polje-gore{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:1000px){.kontakt{grid-template-columns:1fr}}
@media (max-width:620px){.forma .dva{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.forma::before,.forma.vidi .forma__telo>*,.uspeh svg *{animation:none!important}.uspeh svg *{stroke-dashoffset:0!important}.forma *{transition:none!important}}
