/* ============================================================
   RIDŽAL — ridzal.rs
   Paleta: "noć" (svetleća reklama) / "papir" (radionica)
   Akcenti: ćilibar (svetlo reklame) + crvena (pečat)
   ============================================================ */

:root{
  --noc:#14181D;
  --noc-2:#1B222B;
  --papir:#FAF7F2;
  --papir-2:#F1EBE0;
  --grafit:#23282E;
  --siva:#5D6673;
  --siva-noc:#9AA3AF;
  --linija:#E3DCCC;
  --linija-noc:#2A323D;
  --amber:#B96F15;
  --amber-jak:#F2B44D;
  --pecat:#A63A2E;
  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;
  --sirina:1120px;
  --radius:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--grafit);
  background:var(--papir);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--amber);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--pecat)}
:focus-visible{outline:2px solid var(--amber-jak);outline-offset:3px;border-radius:2px}

h1,h2,h3{font-family:var(--font-display);line-height:1.08;margin:0 0 .5em;letter-spacing:.005em}
h1{font-weight:900}
h2{font-weight:800;font-size:clamp(1.7rem,3.6vw,2.5rem);text-transform:uppercase;letter-spacing:.02em}
h3{font-weight:700;font-size:1.22rem}
p{margin:0 0 1em}
.uvod{font-size:clamp(1.1rem,2vw,1.25rem);color:var(--siva);max-width:46em}

.okvir{max-width:var(--sirina);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}
.sekcija{padding:clamp(3.2rem,7vw,5.5rem) 0}
.sekcija-alt{background:var(--papir-2)}
.centar{text-align:center}

/* ---------- pečat (potpisni element) ---------- */
.zig{
  display:inline-block;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pecat);
  border:1.5px solid currentColor;
  border-radius:3px;
  padding:.32em .8em .28em;
  transform:rotate(-1.6deg);
  background:
    radial-gradient(circle at 18% 30%, rgba(250,247,242,.55) 0 1.5px, transparent 2px),
    radial-gradient(circle at 72% 68%, rgba(250,247,242,.5) 0 1px, transparent 1.6px);
}
.zig-noc{color:var(--amber-jak)}
.sekcija .zig{margin-bottom:1rem}

.dijamant{color:var(--amber);font-size:.8em}

/* ---------- zaglavlje ---------- */
.vrh{
  position:sticky;top:0;z-index:50;
  background:rgba(20,24,29,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linija-noc);
}
.vrh-red{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:66px}
.brend{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.brend img{height:44px;width:auto;filter:drop-shadow(0 0 6px rgba(242,180,77,.35))}
.brend-ime{font-family:var(--font-display);font-weight:900;font-size:1.25rem;letter-spacing:.06em;color:var(--papir);text-transform:uppercase}
.brend-pod{display:block;font-family:var(--font-mono);font-weight:500;font-size:.6rem;letter-spacing:.22em;color:var(--siva-noc);text-transform:uppercase}

.meni{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,1.8rem);list-style:none;margin:0;padding:0}
.meni a{color:var(--papir);text-decoration:none;font-weight:500;font-size:.98rem}
.meni a:hover{color:var(--amber-jak)}
.meni a[aria-current="page"]{color:var(--amber-jak);border-bottom:2px solid var(--amber-jak);padding-bottom:2px}
.meni-poziv{background:var(--amber-jak);color:var(--noc) !important;font-weight:700;padding:.5em 1em;border-radius:var(--radius);white-space:nowrap}
.meni-poziv:hover{background:#fff}

.meni-dugme{display:none;background:none;border:1px solid var(--linija-noc);border-radius:var(--radius);padding:.45rem .6rem;cursor:pointer}
.meni-dugme span{display:block;width:22px;height:2px;background:var(--papir);margin:5px 0;transition:transform .2s,opacity .2s}
.meni-dugme[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.meni-dugme[aria-expanded="true"] span:nth-child(2){opacity:0}
.meni-dugme[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:820px){
  .meni-dugme{display:block}
  .meni{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--noc);border-bottom:1px solid var(--linija-noc);
    display:none;padding:.5rem 0 1rem;
  }
  .meni.otvoren{display:flex}
  .meni li{padding:.55rem clamp(1.1rem,4vw,2rem)}
  .meni-poziv{text-align:center}
}

/* ---------- hero (noć / svetleća reklama) ---------- */
.hero{
  background:
    radial-gradient(60% 55% at 50% 8%, rgba(242,180,77,.14) 0%, transparent 70%),
    var(--noc);
  color:var(--papir);
  padding:clamp(4rem,9vw,7rem) 0 0;
  text-align:center;
  overflow:hidden;
}
.hero-nad{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--siva-noc);margin-bottom:1.4rem}
.hero-vrsta{font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,2.6vw,1.6rem);letter-spacing:.34em;text-transform:uppercase;color:var(--amber-jak);margin:0}
.hero h1{
  font-size:clamp(3.4rem,13vw,8.5rem);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:.05em 0 .35em;
  color:var(--papir);
  text-shadow:0 0 18px rgba(242,180,77,.55),0 0 70px rgba(242,180,77,.28);
  animation:paljenje 1.6s ease-out both;
}
@keyframes paljenje{
  0%{opacity:0;text-shadow:none}
  38%{opacity:.9;text-shadow:0 0 10px rgba(242,180,77,.3)}
  47%{opacity:.25;text-shadow:none}
  58%{opacity:1;text-shadow:0 0 16px rgba(242,180,77,.5)}
  66%{opacity:.55}
  100%{opacity:1;text-shadow:0 0 18px rgba(242,180,77,.55),0 0 70px rgba(242,180,77,.28)}
}
.hero-opis{max-width:38em;margin:0 auto 2rem;color:var(--siva-noc);font-size:clamp(1.02rem,2vw,1.2rem)}
.hero-akcije{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.2rem}
.hero-zig{margin:1.6rem 0 3rem}

.dugme{
  display:inline-block;
  font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:.03em;
  padding:.85em 1.7em;border-radius:var(--radius);
  text-decoration:none;border:1.5px solid transparent;
}
.dugme-puno{background:var(--amber-jak);color:var(--noc)}
.dugme-puno:hover{background:#fff;color:var(--noc)}
.dugme-linija{border-color:var(--siva-noc);color:var(--papir)}
.dugme-linija:hover{border-color:var(--amber-jak);color:var(--amber-jak)}
.dugme-tamno{background:var(--noc);color:var(--papir)}
.dugme-tamno:hover{background:var(--amber);color:#fff}

/* traka koja klizi */
.traka{border-top:1px solid var(--linija-noc);background:var(--noc-2);overflow:hidden;white-space:nowrap;padding:.7rem 0}
.traka-unutra{display:inline-block;animation:klizanje 36s linear infinite;font-family:var(--font-mono);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--siva-noc)}
.traka-unutra .dijamant{color:var(--amber-jak);margin:0 1.1rem}
@keyframes klizanje{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- usluge ---------- */
.mreza-usluge{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.1rem;margin-top:2rem}
.karta{
  background:#fff;border:1px solid var(--linija);border-radius:var(--radius);
  padding:1.6rem 1.5rem 1.4rem;display:flex;flex-direction:column;gap:.55rem;
  text-decoration:none;color:var(--grafit);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.karta:hover{transform:translateY(-3px);border-color:var(--amber);box-shadow:0 10px 24px rgba(35,40,46,.07);color:var(--grafit)}
.karta-ikona{color:var(--amber);margin-bottom:.3rem}
.karta h3{margin:0;text-transform:uppercase;letter-spacing:.03em;font-size:1.08rem}
.karta p{margin:0;color:var(--siva);font-size:.97rem}
.karta-vise{margin-top:auto;padding-top:.8rem;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.karta:hover .karta-vise{color:var(--pecat)}

/* čipovi — mali print servis */
.cipovi{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;max-width:56em;margin:1.6rem auto 0}
.cip{
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.06em;
  border:1px solid var(--linija);border-radius:3px;background:#fff;
  padding:.35em .75em;color:var(--siva)
}

/* ---------- o nama / brojke ---------- */
.dvokolona{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:820px){.dvokolona{grid-template-columns:1fr}}
.brojke{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.2rem}
.brojka{border-top:2px solid var(--amber);padding-top:.7rem}
.brojka b{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(1.7rem,4vw,2.4rem);color:var(--grafit)}
.brojka span{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--siva)}

/* ---------- galerija ---------- */
.mreza-galerija{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-top:2rem}
.gal-plocica{
  position:relative;border:1px solid var(--linija);border-radius:var(--radius);
  background:#fff;padding:1.4rem 1.3rem;min-height:150px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.2rem;
  text-decoration:none;color:var(--grafit);
  transition:transform .18s ease,border-color .18s ease;
}
.gal-plocica:hover{transform:translateY(-3px);border-color:var(--amber);color:var(--grafit)}
.gal-plocica h3{margin:0;font-size:1.02rem;text-transform:uppercase;letter-spacing:.03em}
.gal-plocica span{font-family:var(--font-mono);font-size:.76rem;color:var(--siva);letter-spacing:.08em}
.gal-broj{position:absolute;top:1rem;right:1.1rem;font-family:var(--font-mono);font-size:.76rem;color:var(--amber);border:1px solid var(--linija);border-radius:3px;padding:.15em .5em}

.foto-mreza{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.7rem;margin-top:1.4rem}
.foto-mreza a{display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--linija)}
.foto-mreza img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .25s ease}
.foto-mreza a:hover img{transform:scale(1.04)}
.uskoro{
  border:1.5px dashed var(--linija);border-radius:var(--radius);
  padding:2.2rem 1.5rem;text-align:center;color:var(--siva);
  font-family:var(--font-mono);font-size:.85rem;letter-spacing:.08em;
  background:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(35,40,46,.02) 14px 28px)
}

/* ---------- strana usluge ---------- */
.staza{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--siva);margin-bottom:1.2rem}
.staza a{color:var(--siva);text-decoration:none}
.staza a:hover{color:var(--amber)}
.glava-strane{background:var(--papir-2);border-bottom:1px solid var(--linija);padding:clamp(2.4rem,5vw,3.6rem) 0}
.glava-strane h1{font-size:clamp(2rem,5vw,3.2rem);text-transform:uppercase;letter-spacing:.02em}
.glava-strane .uvod{margin-bottom:0}

.lista-kuke{list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:.5rem}
.lista-kuke li{padding-left:1.4rem;position:relative}
.lista-kuke li::before{content:"◆";position:absolute;left:0;top:.1em;color:var(--amber);font-size:.7em}

.pitanja{margin-top:1.2rem;display:grid;gap:.6rem}
.pitanja details{border:1px solid var(--linija);border-radius:var(--radius);background:#fff;padding:.9rem 1.1rem}
.pitanja summary{cursor:pointer;font-weight:600;font-family:var(--font-display);letter-spacing:.01em}
.pitanja p{margin:.7rem 0 0;color:var(--siva)}

.povezano{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.povezano a{
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--linija);border-radius:3px;padding:.4em .8em;
  text-decoration:none;color:var(--siva);background:#fff
}
.povezano a:hover{border-color:var(--amber);color:var(--amber)}

/* ---------- kontakt pojas (noć) ---------- */
.pojas-noc{background:var(--noc);color:var(--papir)}
.pojas-noc h2{color:var(--papir)}
.pojas-noc .uvod{color:var(--siva-noc)}
.kontakt-mreza{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,3.5rem);margin-top:2rem}
@media(max-width:820px){.kontakt-mreza{grid-template-columns:1fr}}
.kontakt-stavke{display:grid;gap:1.1rem;align-content:start}
.kontakt-stavka b{display:block;font-family:var(--font-mono);font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--siva-noc);margin-bottom:.2rem}
.kontakt-stavka a{color:var(--papir);text-decoration:none;font-size:1.1rem}
.kontakt-stavka a:hover{color:var(--amber-jak)}
.telefon-veliki{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,4vw,2.1rem) !important;letter-spacing:.02em}
.brzi-kanali{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.4rem}
.kanal{
  display:inline-flex;align-items:center;gap:.45rem;
  border:1.5px solid var(--linija-noc);border-radius:var(--radius);
  padding:.55em 1em;color:var(--papir);text-decoration:none;font-weight:600;font-size:.95rem
}
.kanal:hover{border-color:var(--amber-jak);color:var(--amber-jak)}

/* forma */
.forma{display:grid;gap:.9rem}
.polje label{display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--siva-noc);margin-bottom:.35rem}
.polje input,.polje textarea{
  width:100%;background:var(--noc-2);border:1px solid var(--linija-noc);border-radius:var(--radius);
  color:var(--papir);font:inherit;padding:.75em .9em
}
.polje input:focus,.polje textarea:focus{outline:2px solid var(--amber-jak);outline-offset:1px;border-color:transparent}
.polje textarea{min-height:130px;resize:vertical}
.med{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.forma-nap{font-size:.85rem;color:var(--siva-noc);margin:0}

/* svetle forme (strana kontakt na papiru koristi isti sklop u noćnom pojasu) */

/* ---------- podnožje ---------- */
.dno{background:var(--noc);color:var(--siva-noc);border-top:1px solid var(--linija-noc);padding:2.6rem 0 2rem;font-size:.95rem}
.dno-mreza{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem}
@media(max-width:820px){.dno-mreza{grid-template-columns:1fr}}
.dno h3{color:var(--papir);font-size:.95rem;text-transform:uppercase;letter-spacing:.06em}
.dno ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.dno a{color:var(--siva-noc);text-decoration:none}
.dno a:hover{color:var(--amber-jak)}
.dno-crta{border:none;border-top:1px solid var(--linija-noc);margin:2rem 0 1.2rem}
.dno-red{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero h1{animation:none}
  .traka-unutra{animation:none}
  .karta,.gal-plocica,.foto-mreza img{transition:none}
}

/* sitnice */
.samo-citaci{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
::selection{background:var(--amber-jak);color:var(--noc)}