/* Deljene komponente v3: koristi ih i pocetna (preko svog stila) i sve podstranice.
   Tokeni su procitani sa v2.0: pozadina #04060a, tekst #e9ecf1, kartice #0b0e14,
   ivice #1d2330, radius 16px, zlato #e8b34b. */
:root { --acc:#e8b34b; --bg:#04060a; --tekst:#e9ecf1; --siv:#9aa2ad; --tamnosiv:#5b6472;
  --karta:#0b0e14; --ivica:#1d2330; --r:16px; }

/* ── meni u dve grupe oko sredine: na pocetnoj sredinom pada snop lampe, pa tu nema teksta.
   Ista podela je i na podstranicama, da meni ne skace pri prelasku sa strane na stranu. ── */
:root { --procep:clamp(56px,7vw,150px); }
@media (min-width:1001px) {
  nav .navLevo, nav .navDesno { position:absolute; top:50%; transform:translateY(-50%); margin:0; gap:clamp(22px,2.4vw,36px); }
  nav .navLevo { right:calc(50% + var(--procep)); }
  nav .navDesno { left:calc(50% + var(--procep)); }
  nav .navCta { margin-left:auto; }
}

/* ── meni: Services ima podmeni, otvara se na hover, fokus i klik ── */
.navL .imaPod { position:relative; }
.navL .imaPod > a::after { content:""; display:inline-block; width:0; height:0; margin-left:8px; vertical-align:2px;
  border-left:3.5px solid transparent; border-right:3.5px solid transparent; border-top:4px solid currentColor; opacity:.7; }
.podmeni { position:absolute; top:calc(100% + 14px); left:-18px; min-width:250px; padding:8px;
  background:rgba(10,13,19,.97); border:1px solid rgba(232,179,75,.16); border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.6); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .18s ease, transform .18s ease, visibility 0s .18s; }
.podmeni::before { content:""; position:absolute; left:0; right:0; top:-16px; height:16px; }
.imaPod:hover .podmeni, .imaPod:focus-within .podmeni, .imaPod.otvoren .podmeni {
  opacity:1; visibility:visible; transform:none; transition:opacity .18s ease, transform .18s ease; }
.navL .podmeni a { display:block; padding:11px 12px; border-radius:9px; letter-spacing:.02em; text-transform:none;
  font-size:14px; color:#e6e9ee; }
.navL .podmeni a::after { display:none; }
.navL .podmeni a:hover, .navL .podmeni a:focus-visible { background:rgba(232,179,75,.1); color:#fff; }
.navL a[aria-current="page"] { color:#fff; }
#mobMeni a.podstavka { padding-left:18px; font-size:13px; letter-spacing:.12em; color:#aab1bc; }

/* ── dugmad: pritisak se oseti odmah, na pointer-down, ne na pustanje ── */
.dugmad { display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.dugme { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:13px 26px;
  border-radius:12px; text-decoration:none; font-weight:700; font-size:15px; font-family:inherit; cursor:pointer;
  border:1px solid transparent; transition:transform .1s ease-out, background .2s, border-color .2s, color .2s; }
.dugme:active { transform:scale(.97); }
.dugme.puno { background:var(--acc); color:#141821; }
.dugme.puno:hover { background:#f0c36a; }
.dugme.prazno { border-color:rgba(232,179,75,.5); color:var(--acc); background:transparent; }
.dugme.prazno:hover { border-color:var(--acc); background:rgba(232,179,75,.06); }
.tekstVeza { display:inline-flex; align-items:center; gap:8px; margin-top:22px; color:var(--acc); text-decoration:none;
  font-weight:600; font-size:15px; min-height:44px; }
.tekstVeza::after { content:"\2192"; transition:transform .2s ease; }
.tekstVeza:hover::after { transform:translateX(4px); }

/* ── kartice i mreze ── */
.mreza { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:36px; }
.mreza.dve { grid-template-columns:repeat(2,1fr); }
/* sest usluga: 3x2 na sirokom, 2x3 na srednjem, jedna kolona na telefonu */
.mreza.tri { grid-template-columns:repeat(3,1fr); }
@media (max-width:900px) { .mreza.tri { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .mreza.tri { grid-template-columns:1fr; } }
@media (max-width:760px) { .mreza.dve { grid-template-columns:1fr; } }
.kartica { position:relative; background:var(--karta); border:1px solid var(--ivica); border-radius:var(--r); padding:26px;
  color:var(--tekst); text-decoration:none; display:flex; flex-direction:column; transition:border-color .25s, transform .25s; }
a.kartica:hover { border-color:rgba(232,179,75,.45); transform:translateY(-3px); }
a.kartica:active { transform:scale(.985); }
.kartica b, .kartica h3.mali { display:block; font-size:18px; font-weight:700; margin-bottom:10px; letter-spacing:-.01em; }
.kartica p { color:var(--siv); font-size:15px; line-height:1.6; }
.kartica .vise { margin-top:auto; padding-top:18px; color:var(--acc); font-weight:600; font-size:14px; }
.kartica .broj { font-size:12px; letter-spacing:.18em; color:var(--acc); margin-bottom:14px; font-weight:500; }

/* ── cene ── */
.planovi { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px; align-items:stretch; }
@media (max-width:980px) { .planovi { grid-template-columns:1fr; max-width:560px; } }
.plan { background:var(--karta); border:1px solid var(--ivica); border-radius:var(--r); padding:30px 28px;
  display:flex; flex-direction:column; text-align:left; scroll-margin-top:100px; }
.plan:target { border-color:rgba(232,179,75,.6); }
.plan .ime { font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--acc); font-weight:600; }
.plan .cena { margin:16px 0 4px; font-size:clamp(34px,3.6vw,46px); font-weight:700; letter-spacing:-.03em; color:#fff;
  font-variant-numeric:tabular-nums; }
.plan .cena small { font-size:15px; font-weight:500; color:var(--siv); letter-spacing:0; }
.plan .kapacitet { color:#d5d9e0; font-size:15.5px; line-height:1.55; margin:14px 0 18px; }
.plan ul { list-style:none; margin:0 0 26px; padding:18px 0 0; border-top:1px solid var(--ivica); }
.plan li { position:relative; padding-left:22px; color:var(--siv); font-size:14.5px; line-height:1.55; margin:8px 0; }
.plan li::before { content:""; position:absolute; left:2px; top:.62em; width:8px; height:8px; border-radius:2px;
  border:1px solid var(--acc); transform:rotate(45deg); }
.plan .dugme { margin-top:auto; }
.ispodPlanova { margin-top:22px; padding:22px 26px; border:1px dashed #2a3140; border-radius:var(--r); color:var(--siv);
  display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; justify-content:space-between; text-align:left; }
.ispodPlanova b { color:var(--tekst); }
.ispodPlanova .tekstVeza { margin-top:0; }

/* poredjenje: na uskom ekranu tabela skroluje unutar svog okvira, nikad stranica */
.poredjenje { margin-top:36px; overflow-x:auto; border:1px solid var(--ivica); border-radius:var(--r); }
.poredjenje table { width:100%; min-width:640px; border-collapse:collapse; font-size:14.5px; }
.poredjenje th, .poredjenje td { padding:16px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--ivica); }
.poredjenje thead th { color:var(--acc); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; background:#080a0f; }
.poredjenje tbody th { color:var(--tekst); font-weight:600; width:24%; }
.poredjenje td { color:var(--siv); }
.poredjenje tr:last-child th, .poredjenje tr:last-child td { border-bottom:none; }

/* ── FAQ: details/summary, radi tastaturom i bez JS-a ── */
.faq { margin-top:36px; border-top:1px solid var(--ivica); max-width:860px; }
.faq details { border-bottom:1px solid var(--ivica); }
.faq summary { list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative; font-size:17px; font-weight:600;
  color:var(--tekst); min-height:44px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:22px;
  font-weight:400; color:var(--acc); transition:transform .2s ease; }
.faq details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.faq details p { color:var(--siv); font-size:15.5px; line-height:1.65; padding:0 44px 24px 0; max-width:72ch; }

/* ── forma ── */
.forma { text-align:left; }
.forma .red2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px) { .forma .red2 { grid-template-columns:1fr; } }
.forma .polje { display:flex; flex-direction:column; gap:7px; margin-top:14px; }
.forma .red2 .polje { margin-top:14px; }
.forma label { font-size:13px; color:#c7ccd4; font-weight:500; letter-spacing:.01em; }
.forma label .opc { color:var(--tamnosiv); font-weight:400; }
.forma input, .forma textarea, .forma select { width:100%; background:rgba(40,44,53,.4); border:1px solid #2a3140; border-radius:12px;
  color:var(--tekst); font-family:inherit; font-size:16px; padding:15px 17px; outline:none; transition:border-color .2s, background .2s; }
.forma select { appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:42px;
  background-image:linear-gradient(45deg,transparent 50%,#9aa2ad 50%),linear-gradient(135deg,#9aa2ad 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%, calc(100% - 17px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
.forma select option { background:#0b0e14; color:var(--tekst); }
.forma textarea { min-height:140px; line-height:1.55; resize:vertical; }
.forma input:focus, .forma textarea:focus, .forma select:focus { border-color:rgba(232,179,75,.6); background:rgba(40,44,53,.55); }
.forma [aria-invalid="true"] { border-color:#d9705f; }
.forma .greska { font-size:13px; color:#f09484; min-height:0; }
.forma .greska:empty { display:none; }
.forma .zamka { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.forma .posalji { width:100%; margin-top:20px; font-size:16px; padding:17px; }
.forma .posalji[disabled] { opacity:.65; cursor:progress; }
.forma .status { margin-top:14px; font-size:14.5px; line-height:1.55; color:var(--siv); }
.forma .status:empty { display:none; }
.forma .status.uspeh { color:#e9edf3; background:rgba(232,179,75,.10); border:1px solid rgba(232,179,75,.45); border-radius:10px; padding:13px 15px; }
.forma .status.uspeh::before { content:"\2713  "; color:var(--acc); font-weight:700; }
.forma .status.neuspeh { color:#f4c0b6; background:rgba(217,112,95,.08); border:1px solid rgba(217,112,95,.4); border-radius:10px; padding:13px 15px; }
.forma .status a { color:var(--acc); }
.forma .napomena { margin-top:14px; font-size:13px; color:var(--tamnosiv); line-height:1.55; }
.forma .napomena a { color:#aab1bc; }
.alt { margin-top:16px; font-size:14.5px; color:var(--siv); }
.alt a { color:var(--acc); font-weight:600; }

/* ── bogat footer ── */
.futer { position:relative; z-index:6; background:var(--bg); border-top:1px solid #12161f; padding:72px 6vw 34px; color:var(--siv);
  font-size:14px; text-align:left; }
.futerVrh { display:grid; grid-template-columns:minmax(240px,1.15fr) 3fr; gap:56px; max-width:1320px; margin:0 auto; }
.futerBrend .logo { display:inline-flex; margin-bottom:18px; }
.futerBrend p { color:var(--siv); line-height:1.6; max-width:34ch; font-size:14.5px; }
.futerBrend .dugme { margin-top:22px; padding:12px 20px; font-size:14px; min-height:44px; }
.futerKolone { display:grid; grid-template-columns:repeat(3,1fr); gap:34px 28px; }
.futerKolone h2 { font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--acc); font-weight:600; margin-bottom:12px; }
.futerKolone ul { list-style:none; margin:0; padding:0; }
.futerKolone a { display:inline-block; padding:7px 0; color:#aab1bc; text-decoration:none; transition:color .2s; }
.futerKolone a:hover { color:#fff; }
.futerDno { max-width:1320px; margin:56px auto 0; padding-top:22px; border-top:1px solid #12161f; display:flex; flex-wrap:wrap;
  gap:10px 22px; justify-content:space-between; color:var(--tamnosiv); font-size:13px; }
.futerDno a { color:var(--tamnosiv); text-decoration:none; }
.futerDno a:hover { color:#aab1bc; }
@media (max-width:980px) { .futerVrh { grid-template-columns:1fr; gap:40px; } }
@media (max-width:640px) {
  .futer { padding:56px 6vw 28px; }
  .futerKolone { grid-template-columns:1fr 1fr; gap:28px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .dugme, .kartica, .tekstVeza::after, .podmeni, .faq summary::after { transition:none; }
  .dugme:active, a.kartica:active { transform:none; }
}

/* logo: visina iz CSS-a, sirina sledi proporciju (width atribut je tu samo protiv skakanja rasporeda) */
.logo img { width:auto; }

/* dodirne mete: logo i linkovi u recenici dobijaju visinu bez pomeranja rasporeda */
.logo { min-height:44px; }
.alt a, .forma .napomena a, .pravno a { padding:12px 0; margin:-12px 0; }
@media (max-width:480px) { .cDug { display:none; } .navCta { font-size:12px !important; letter-spacing:.06em !important; padding:11px 16px !important; } }