/* poslovnitok.rs — strana „Kontakt“ (kontakt.html). Oslanja se na css/site.css. */

.contact{ padding-block:clamp(2.5rem,7vh,5rem) clamp(4rem,10vh,7rem); }
.contact .headline{ font-size:clamp(2.6rem,5.4vw,5.2rem); }
/* krajevi koral podvlake doterani za reč „se“ */
.contact .headline .coral{ --ul-l:.024em; --ul-r:0em; }
.contact .lead{ max-width:58ch; }
.contact .email{ color:var(--ink); font-weight:600; }

.contact-grid{
  display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:clamp(2.5rem,5vw,5rem); align-items:start; margin-top:clamp(2.5rem,6vh,4rem);
}

/* ---------- Forma ---------- */
.contact-form{ display:grid; gap:1.35rem; max-width:44rem; }
.field{ display:grid; gap:.5rem; min-width:0; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:1.35rem; }
.field label, .consents legend{
  font-family:var(--mono); font-variant-ligatures:none; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
}
.req{ color:var(--coral); }

.field input, .field textarea, .field select{
  width:100%; font:inherit; font-size:1rem; color:var(--ink);
  background:rgba(255,255,255,.6); border:1px solid var(--line); border-radius:12px;
  padding:.8rem .95rem; min-height:48px; line-height:1.45;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; min-height:8.5rem; }
.field input:hover, .field textarea:hover, .field select:hover{ border-color:rgba(11,11,15,.22); }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:2px solid var(--coral); outline-offset:2px; border-color:var(--coral);
}
.select{ position:relative; }
.select::after{
  content:""; position:absolute; right:1rem; top:50%; width:.5rem; height:.5rem; margin-top:-.35rem;
  border-right:1.5px solid var(--ink-soft); border-bottom:1.5px solid var(--ink-soft); transform:rotate(45deg);
  pointer-events:none;
}
.select select{ padding-right:2.5rem; cursor:pointer; }
.help{ margin:0; font-size:.88rem; color:var(--ink-soft); line-height:1.45; }

/* Pristanci */
.consents{ border:0; margin:.4rem 0 0; padding:0; display:grid; gap:.85rem; min-width:0; }
.consents legend{ padding:0; margin-bottom:.9rem; }
.check{ display:grid; grid-template-columns:1.35rem minmax(0,1fr); gap:.75rem; align-items:start; }
.check input{
  -webkit-appearance:none; appearance:none; margin:.12rem 0 0; width:1.35rem; height:1.35rem;
  border:1px solid rgba(11,11,15,.28); border-radius:6px; background:rgba(255,255,255,.6);
  display:grid; place-content:center; cursor:pointer;
  transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
.check input::after{
  content:""; width:.38rem; height:.68rem; margin-top:-.12rem;
  border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg) scale(0);
  transition:transform .2s var(--ease);
}
.check input:checked{ background:var(--coral); border-color:var(--coral); }
.check input:checked::after{ transform:rotate(45deg) scale(1); }
.check input:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; }
.check label{ font-size:1rem; line-height:1.5; cursor:pointer; -webkit-user-select:none; user-select:none; }
.consent-note{ margin:.3rem 0 0; font-size:.88rem; color:var(--ink-soft); line-height:1.5; }
.consent-note a{ color:var(--ink); }
.consent-note a:hover{ color:var(--coral); }
.consent-note a:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; }
.contact-form .btn{ justify-self:start; margin-top:.4rem; padding-inline:2rem; }

/* ---------- Desna kolona ---------- */
.after{ padding-top:.2rem; }
.after-title{ font-size:clamp(1.2rem,1.7vw,1.45rem); font-weight:700; letter-spacing:-.01em; margin:0 0 1.5rem; }
.after-steps{ list-style:none; margin:0; padding:0; display:grid; gap:1.15rem; }
.after-steps li{ display:grid; grid-template-columns:2.2rem minmax(0,1fr); align-items:baseline; }
.after-steps .n{ font-family:var(--mono); font-variant-ligatures:none; color:var(--coral); font-size:.95rem; letter-spacing:.06em; }
.after-steps .t{ font-size:clamp(1.05rem,1.4vw,1.2rem); font-weight:600; line-height:1.45; }

.pilot-box{
  position:relative; margin-top:2.6rem; padding:1.5rem 1.4rem 1.35rem;
  background:var(--paper-2); border:1px solid var(--line); border-radius:16px;
}
.pilot-box::before{
  content:"Pilot"; position:absolute; top:-.62rem; left:1.3rem; background:var(--paper); padding:0 .55rem;
  font-family:var(--mono); font-variant-ligatures:none; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft); line-height:1.2rem;
}
.pilot-box p{ margin:0; line-height:1.55; }

@media (max-width:900px){
  .contact-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:600px){
  .row2{ grid-template-columns:minmax(0,1fr); }
  .contact-form .btn{ justify-self:stretch; }
}
@media (prefers-reduced-motion:reduce){
  .field input, .field textarea, .field select, .check input, .check input::after{ transition:none; }
}