/* Alexa Ru Leather Workshop: zajednički stilovi za sve stranice */

:root {
  --zlatna: #F7AB00;
  --zlatna-tamna: #C98A00;
  --crna: #000000;
  --koza: #16110C;      /* tamna podloga sa primesom koze, za slojeve iznad crne */
  --bela: #FFFFFF;
  --siva: rgba(255,255,255,.72);
  --linija: rgba(247,171,0,.22);
  --serif: 'Libre Baskerville', Georgia, serif;
  --sans: 'Noto Sans', system-ui, sans-serif;
  --sirina: 1320px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--crna); color: var(--bela); font-family: var(--serif); font-size: 16px; line-height: 1.7; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--zlatna); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.omot { max-width: var(--sirina); margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px)  { .omot { padding: 0 24px; } }
@media (min-width: 1280px) { .omot { padding: 0 48px; } }

/* ════ HEADER ════ */
.zaglavlje { position: sticky; top: 0; z-index: 50; background: var(--crna); border-bottom: 1px solid var(--linija); }
.zaglavlje > .omot { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 84px; }

.logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; flex-shrink: 0; }
.logo-ime { font-family: var(--serif); font-weight: 700; font-size: 27px; letter-spacing: .06em; color: var(--zlatna); }
.logo-pod { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--serif); font-size: 9.5px; letter-spacing: .24em; color: var(--bela); }
.logo-pod::before, .logo-pod::after { content: ''; width: 14px; height: 1px; background: var(--zlatna); }

.meni { display: none; align-self: stretch; }
.meni > ul { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; align-items: stretch; gap: 2px; }
.meni > ul > li { display: flex; align-items: center; }
/* Tri grupe: početna | asortiman | informacije */
.meni > ul > li.nova-grupa { position: relative; margin-left: 29px; }
.meni > ul > li.nova-grupa::before { content: ''; position: absolute; left: -16px; top: 50%; width: 1px; height: 18px; transform: translateY(-50%); background: rgba(255,255,255,.18); }
.nav-link { position: relative; display: block; padding: 10px 12px; font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--siva); white-space: nowrap; transition: color .2s ease; }
.nav-link:hover, .nav-link.active { color: var(--bela); }
.nav-link::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 0; height: 2px; background: var(--zlatna); border-radius: 2px; transition: width .25s ease, left .25s ease; }
.nav-link.active::after { width: calc(100% - 24px); left: 12px; }

/* Padajući meni sa podkategorijama */
.ima-pod { position: relative; }
.ima-pod > .nav-link { display: flex; align-items: center; gap: 5px; }
.strelica-dole { width: 12px; height: 12px; opacity: .6; transition: transform .2s ease, opacity .2s ease; }
.ima-pod:hover .strelica-dole, .ima-pod:has(:focus-visible) .strelica-dole { transform: rotate(180deg); opacity: 1; }
.ima-pod:hover > .nav-link, .ima-pod:has(:focus-visible) > .nav-link { color: var(--bela); }
/* Meni visi tacno sa donje ivice headera (li je visok koliko i header), a tekst stavki je poravnat sa tekstom linka */
.padajuci { position: absolute; top: calc(100% + 1px); left: -8px; min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease, visibility 0s .18s; z-index: 60; }
.ima-pod:hover .padajuci, .ima-pod:has(:focus-visible) .padajuci { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .18s ease, transform .18s ease; }
.padajuci ul { list-style: none; margin: 0; padding: 0; background: var(--koza); border: 1px solid var(--linija); border-top: 0; border-radius: 0 0 4px 4px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.55); }
.padajuci a { display: block; padding: 12px 20px; font-family: var(--sans); font-size: 14px; color: var(--siva); white-space: nowrap; transition: color .15s ease, background-color .15s ease; }
.padajuci a:hover, .padajuci a:focus-visible { color: var(--bela); background: rgba(247,171,0,.07); outline: none; }
.padajuci .pod-grupa { padding: 12px 20px 2px; border-top: 1px solid rgba(255,255,255,.08); font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--zlatna); }

.desno { display: flex; align-items: center; gap: 6px; }
.ikonica { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: transparent; border: 1px solid transparent; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.ikonica:hover { border-color: var(--linija); color: var(--zlatna); }
.ikonica svg { width: 22px; height: 22px; }
.broj { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--zlatna); color: var(--crna); font-family: var(--sans); font-weight: 800; font-size: 10.5px; line-height: 18px; text-align: center; }
.hamburger { display: inline-flex; }
.ikonica.mreza svg { width: 20px; height: 20px; }
.mreza, .desno-crta { display: none; }
.desno-crta { width: 1px; height: 18px; margin: 0 6px; background: rgba(255,255,255,.18); }
@media (min-width: 640px) { .mreza { display: inline-flex; } .desno-crta { display: block; } }

@media (min-width: 1180px) {
  .meni { display: block; }
  .hamburger { display: none; }
}
/* 1180–1279px: meni je pun, pa su razmaci između linkova malo zbijeniji da sve stane u jedan red */
@media (min-width: 1180px) and (max-width: 1279px) {
  .nav-link { padding-left: 9px; padding-right: 9px; }
  .nav-link.active::after { width: calc(100% - 18px); left: 9px; }
  .padajuci { left: -11px; }
  .meni > ul > li.nova-grupa { margin-left: 21px; }
  .meni > ul > li.nova-grupa::before { left: -12px; }
  .desno { gap: 0; }
}

/* Mobilni meni */
.mob-meni { display: none; border-top: 1px solid var(--linija); background: var(--crna); }
.mob-meni.otvoren { display: block; }
.mob-meni ul { list-style: none; margin: 0; padding-top: 8px; padding-bottom: 16px; }
.mob-meni a { display: block; padding: 13px 0; font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--siva); border-bottom: 1px solid rgba(255,255,255,.06); }
.mob-meni a.active { color: var(--zlatna); }
.mob-red { display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.06); }
.mob-red a { flex: 1; border-bottom: 0; }
.mob-otvori { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--siva); cursor: pointer; }
.mob-otvori svg { width: 16px; height: 16px; transition: transform .2s ease; }
.mob-otvori[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--zlatna); }
.mob-meni ul.mob-pod { padding: 4px 0 10px 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
.mob-pod a { padding: 9px 0; font-weight: 400; font-size: 15px; border-bottom: 0; }
.mob-pod .pod-grupa { padding: 10px 0 2px; font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--zlatna); }
.mob-meni .mob-mreze { display: flex; gap: 24px; padding-top: 14px; }
.mob-meni .mob-mreze a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; border: 0; font-weight: 400; font-size: 14px; }
.mob-mreze svg { width: 18px; height: 18px; color: var(--zlatna); }
@media (min-width: 1180px) { .mob-meni { display: none !important; } }

/* ════ HERO SLIDER ════ (mehanika preuzeta 1:1 sa sajta za rasvetu) */
.hero { position: relative; background: var(--crna); }
/* Ispod 1024px slika je gore a tekst ispod nje na crnom (slike su preše šarene za tekst preko njih);
   od 1024px tekst stoji preko slike, a visina blago raste sa širinom da kadar ostane isti */
.hero-okvir { position: relative; overflow: hidden; }
@media (min-width: 1024px) { .hero-okvir { height: clamp(580px, 36vw, 700px); } }

#htrack { display: flex; height: 100%; touch-action: pan-y; will-change: transform; cursor: grab; }
#htrack:active { cursor: grabbing; }
.hslide { position: relative; flex: 0 0 100%; width: 100%; background: var(--crna); }
.hslide img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 70% center; -webkit-user-drag: none; user-select: none; }
.hsadrzaj { position: relative; padding-top: 28px; padding-bottom: 72px; }
@media (min-width: 640px) { .hslide img { aspect-ratio: 2 / 1; } .hsadrzaj { padding-top: 36px; } }
@media (min-width: 1024px) {
  .hslide { height: 100%; }
  .hslide img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 78% center; }
  .hsadrzaj { height: 100%; display: flex; align-items: center; padding-top: 0; padding-bottom: 40px; }
  /* Bez tamnog sloja preko slike: meka senka samo ispod slova */
  .hgrupa, .hnaslov, .hopis { text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 2px 18px rgba(0,0,0,.75), 0 0 42px rgba(0,0,0,.55); }
  .hdugmad .dugme-obrub, .hdugmad .dugme-zlatni-okvir { background: rgba(0,0,0,.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .hdugmad .dugme-zlatni-okvir:hover { background: var(--zlatna); }
}
.htekst { max-width: 560px; }
.hgrupa { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; font-family: var(--sans); font-weight: 600; font-size: 13.5px; letter-spacing: .04em; color: var(--zlatna); }
.hgrupa::before { content: ''; width: 28px; height: 1px; background: var(--zlatna); }
/* 600 umesto 800: na ovoj veličini 800 je delovao grubo, 600 ostaje čvrst a mirniji je */
.hnaslov { margin: 0; font-family: var(--sans); font-weight: 600; font-size: 32px; line-height: 1.1; letter-spacing: -.012em; }
@media (min-width: 640px)  { .hnaslov { font-size: 44px; } }
@media (min-width: 1024px) { .hnaslov { font-size: 56px; } }
.hopis { margin: 18px 0 0; max-width: 460px; font-size: 15.5px; line-height: 1.8; color: rgba(255,255,255,.82); }
@media (max-width: 639px) { .hopis { font-size: 14.5px; } }
.hdugmad { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.dugme { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 26px; border-radius: 4px; font-family: var(--sans); font-weight: 800; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.dugme svg { width: 16px; height: 16px; }
.dugme-zlatno { background: var(--zlatna); color: var(--crna); }
.dugme-zlatno:hover { background: #FFBE2E; }
.dugme-obrub { border: 1.5px solid rgba(255,255,255,.35); color: var(--bela); font-weight: 600; }
.dugme-obrub:hover { border-color: var(--zlatna); color: var(--zlatna); }
/* Zlatni okvir koji se na hover ispuni: glavno dugme na slajderu */
.dugme-zlatni-okvir { border: 1.5px solid var(--zlatna); background: transparent; color: var(--zlatna); }
.dugme-zlatni-okvir:hover { background: var(--zlatna); color: var(--crna); }

/* Strelice */
/* Strelice stoje dole, levo i desno od tačaka, da nikad ne preklope tekst slajda */
.hstrelica { position: absolute; bottom: 12px; z-index: 20; width: 40px; height: 40px; display: none; align-items: center; justify-content: center; border-radius: 999px; background: rgba(0,0,0,.35); color: var(--bela); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.hstrelica:hover { background: var(--zlatna); border-color: var(--zlatna); color: var(--crna); }
.hstrelica svg { width: 18px; height: 18px; }
#hp { left: calc(50% - 44px - 14px - 40px); } #hn { left: calc(50% + 44px + 14px); }
@media (min-width: 1024px) { .hstrelica { display: flex; } }

/* Tačke — dugme je 24x24px (WCAG touch target), vizuelna tačka je manji ::after unutra */
#hdots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 8px; }
.dot { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: transparent; padding: 0; cursor: pointer; border: none; }
.dot::after { content: ''; width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.4); transition: all .3s ease; }
.dot.on::after { background: var(--zlatna); width: 22px; }

/* ════ BOČNA KORPA ════ izleti sa desne strane preko strane (kao na hirurskicelik) */
.korpa-zastor { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .32s ease; }
.korpa-zastor.otvoren { opacity: 1; }
body.korpa-otvorena { overflow: hidden; }

.korpa-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: min(430px, 100%); display: flex; flex-direction: column; background: var(--koza); border-left: 1px solid var(--linija); box-shadow: -24px 0 60px rgba(0,0,0,.5); transform: translateX(100%); transition: transform .34s cubic-bezier(.22,.61,.36,1); overscroll-behavior: contain; visibility: hidden; }
.korpa-panel.otvoren { transform: translateX(0); visibility: visible; }
.korpa-panel:not(.otvoren) { transition: transform .34s cubic-bezier(.22,.61,.36,1), visibility 0s .34s; }

.panel-vrh { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--linija); }
.panel-vrh h3 { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--bela); }
.panel-zatvori { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.15); border-radius: 4px; background: transparent; color: var(--siva); font-size: 22px; line-height: 1; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.panel-zatvori:hover { border-color: var(--zlatna); color: var(--zlatna); }

.panel-prazna { padding: 40px 24px; text-align: center; color: var(--siva); }
.panel-prazna .dugme { margin-top: 16px; cursor: pointer; background: transparent; }

.panel-stavke { flex: 1; overflow-y: auto; padding: 8px 24px; }
.panel-red { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: start; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.panel-slika img { width: 64px; height: 80px; object-fit: cover; border-radius: 3px; background: #2a2119; }
.panel-naziv { display: block; font-family: var(--serif); font-size: 15.5px; line-height: 1.35; color: var(--bela); }
.panel-naziv:hover { color: var(--zlatna); }
.panel-cena { margin-top: 4px; font-family: var(--sans); font-size: 13px; color: rgba(255,255,255,.55); }
.panel-zbir { font-family: var(--sans); font-weight: 600; font-size: 14px; white-space: nowrap; }
.panel-radnje { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.panel-kolicina { display: flex; align-items: center; }
.panel-kolicina button { width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: var(--bela); font-size: 15px; line-height: 1; cursor: pointer; }
.panel-kolicina button:hover:not(:disabled) { border-color: var(--zlatna); color: var(--zlatna); }
.panel-kolicina button:disabled { opacity: .35; cursor: default; }
.panel-kolicina span { min-width: 36px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); font-family: var(--sans); font-size: 14px; }
.panel-izbaci { border: 0; padding: 0; background: transparent; font-family: var(--sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); cursor: pointer; }
.panel-izbaci:hover { color: var(--zlatna); }

.panel-dno { padding: 22px 24px; border-top: 1px solid var(--linija); background: var(--crna); font-family: var(--sans); }
.panel-dno .red { display: flex; justify-content: space-between; margin-bottom: 9px; font-size: 14px; color: var(--siva); }
.panel-dno .red.ukupno { margin: 14px 0 18px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.12); font-family: var(--serif); font-weight: 700; font-size: 19px; color: var(--bela); }
.panel-dno .red.ukupno span:last-child { color: var(--zlatna); }
.panel-dno .dugme { width: 100%; justify-content: center; }
.panel-veza { display: block; margin-top: 14px; text-align: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.panel-veza:hover { color: var(--zlatna); }
.panel-dno .nacin { margin: 14px 0 0; text-align: center; font-size: 12px; color: rgba(255,255,255,.45); }

@media (prefers-reduced-motion: reduce) {
  .nav-link::after, .dot::after, .dugme, .padajuci, .strelica-dole, .hstrelica, .korpa-panel, .korpa-zastor { transition: none; }
}

/* ════════════════════════════════════════════════════════════
   FUTER
   ════════════════════════════════════════════════════════════ */
.futer { border-top: 1px solid var(--linija); background: var(--crna); padding: 64px 0 28px; font-family: var(--sans); }
.futer-mreza { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .futer-mreza { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .futer-mreza { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; } }
.futer .logo { align-items: flex-start; }
.futer-o { margin: 18px 0 0; max-width: 34ch; font-family: var(--serif); font-size: 14.5px; line-height: 1.8; color: rgba(255,255,255,.62); }
.futer-mreze { display: flex; gap: 8px; margin-top: 20px; }
.futer-mreze .ikonica { border-color: rgba(255,255,255,.14); }
.futer-mreze .ikonica svg { width: 19px; height: 19px; }
.futer h2 { margin: 0 0 16px; font-size: 14px; font-weight: 600; color: var(--bela); }
.futer ul { list-style: none; margin: 0; padding: 0; }
.futer li + li { margin-top: 10px; }
.futer ul a { font-size: 14px; color: rgba(255,255,255,.62); transition: color .15s ease; }
.futer ul a:hover { color: var(--bela); }
.futer-kontakt li { font-size: 14px; color: rgba(255,255,255,.62); line-height: 1.6; }
.futer-kontakt span { display: block; font-size: 12.5px; color: rgba(255,255,255,.4); }
.futer-dno { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: rgba(255,255,255,.4); }
.futer-dno a:hover { color: var(--bela); }

/* ════════════════════════════════════════════════════════════
   UNUTRAŠNJE STRANICE: zajednički delovi
   ════════════════════════════════════════════════════════════ */
.strana-uvod { padding: 56px 0 48px; border-bottom: 1px solid rgba(255,255,255,.08); }
@media (min-width: 1024px) { .strana-uvod { padding: 80px 0 64px; } }
/* Naslov pa tekst ispod njega, u jednoj koloni poravnatoj levo */
.strana-uvod .omot > * { max-width: 720px; }
.strana-uvod .strana-naslov { margin-bottom: 20px; }
.strana-naslov { margin: 0; font-family: var(--sans); font-weight: 600; font-size: 34px; line-height: 1.12; letter-spacing: -.015em; }
@media (min-width: 1024px) { .strana-naslov { font-size: 44px; } }
.strana-lid { margin: 0; max-width: 62ch; font-size: 16.5px; line-height: 1.85; color: rgba(255,255,255,.8); }
@media (min-width: 1024px) { .strana-lid { font-size: 17.5px; } }
.strana-lid + .strana-lid { margin-top: 16px; }

.sekcija { padding: 64px 0; }
@media (min-width: 1024px) { .sekcija { padding: 88px 0; } }
.sekcija + .sekcija { padding-top: 0; }
.h2 { margin: 0 0 18px; font-family: var(--sans); font-weight: 600; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; }
@media (min-width: 1024px) { .h2 { font-size: 32px; } }
.tekst p { margin: 0; max-width: 62ch; font-size: 16.5px; line-height: 1.85; color: rgba(255,255,255,.78); }
.tekst p + p { margin-top: 18px; }
.veza-zlatna { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-family: var(--sans); font-weight: 600; font-size: 14.5px; color: var(--zlatna); border-bottom: 1px solid rgba(247,171,0,.35); padding-bottom: 3px; transition: border-color .2s ease; }
.veza-zlatna:hover { border-color: var(--zlatna); }
.veza-zlatna svg { width: 18px; height: 18px; }
.dugme-malo { height: 42px; padding: 0 20px; font-size: 12.5px; }
.dugmad { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.dugme svg { width: 18px; height: 18px; }

/* ════ O NAMA ════ */
.slika-siroka { margin: 0; }
.slika-siroka img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
@media (min-width: 1024px) { .slika-siroka img { aspect-ratio: 21 / 9; } }

.dve-kolone { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .dve-kolone { grid-template-columns: 7fr 5fr; gap: 80px; } .dve-kolone.obrnuto { grid-template-columns: 5fr 7fr; } }

.reel { position: relative; width: min(320px, 100%); margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: var(--koza); box-shadow: 0 30px 70px rgba(0,0,0,.6); }
.reel img { width: 100%; height: 100%; object-fit: cover; }
.reel-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 999px; border: 0; background: var(--zlatna); color: var(--crna); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: transform .2s ease; }
.reel-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.reel-play svg { width: 26px; height: 26px; margin-left: 4px; }
.reel-trajanje { position: absolute; left: 14px; bottom: 14px; padding: 4px 9px; border-radius: 4px; background: rgba(0,0,0,.65); font-family: var(--sans); font-weight: 600; font-size: 12px; }


.slika-uspravna img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.osobine { margin: 32px 0 0; padding: 0; }
.osobine div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.1); }
.osobine div:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
.osobine dt { font-family: var(--sans); font-weight: 600; font-size: 14.5px; color: var(--zlatna); }
.osobine dd { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.75); }
@media (max-width: 479px) { .osobine div { grid-template-columns: 1fr; gap: 4px; } }

.kategorije { display: grid; gap: 24px; margin-top: 40px; }
@media (min-width: 640px)  { .kategorije { grid-template-columns: repeat(3, 1fr); } }
.kategorija { display: flex; flex-direction: column; }
.kategorija-slika { overflow: hidden; border-radius: 4px; }
.kategorija-slika img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.kategorija:hover .kategorija-slika img { transform: scale(1.04); }
.kategorija h3 { margin: 22px 0 8px; font-family: var(--sans); font-weight: 600; font-size: 22px; }
.kategorija p { margin: 0 0 20px; font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.7); }
.kategorija .dugme { margin-top: auto; align-self: flex-start; }

/* ════ BLOG ════ */
.filteri { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.filter { height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: transparent; font-family: var(--sans); font-weight: 600; font-size: 14px; color: rgba(255,255,255,.75); cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.filter:hover { border-color: var(--zlatna); color: var(--bela); }
.filter[aria-pressed="true"] { background: rgba(247,171,0,.08); border-color: rgba(247,171,0,.55); color: var(--zlatna); }

.kartice { display: grid; gap: 48px 32px; }
@media (min-width: 640px)  { .kartice { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kartice { grid-template-columns: repeat(3, 1fr); } }
.kartica { display: flex; flex-direction: column; }
.kartica[hidden] { display: none; }
.kartica-slika { display: block; overflow: hidden; border-radius: 4px; }
.kartica-slika img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.kartica:hover .kartica-slika img { transform: scale(1.04); }
.meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; font-family: var(--sans); font-size: 13px; color: rgba(255,255,255,.5); }
.meta .kat { font-weight: 600; color: var(--zlatna); }
.kartica h3 { margin: 10px 0 10px; font-family: var(--sans); font-weight: 600; font-size: 20px; line-height: 1.35; }
.kartica h3 a:hover { color: var(--zlatna); }
.kartica p { margin: 0 0 22px; font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.7); }
.kartica .dugme { margin-top: auto; align-self: flex-start; }

/* ════ BLOG TEKST ════ */
.clanak-vrh { padding: 64px 0 40px; }
@media (min-width: 1024px) { .clanak-vrh { padding: 96px 0 56px; } }
.uzano { max-width: 720px; margin: 0 auto; }
.nazad { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-weight: 600; font-size: 14px; color: rgba(255,255,255,.6); }
.nazad:hover { color: var(--bela); }
.nazad svg { width: 16px; height: 16px; }
.clanak-vrh .meta { margin-top: 28px; }
.clanak-naslov { margin: 14px 0 20px; font-family: var(--sans); font-weight: 600; font-size: 34px; line-height: 1.1; letter-spacing: -.015em; }
@media (min-width: 1024px) { .clanak-naslov { font-size: 40px; } }
.clanak-lid { margin: 0; font-size: 19px; line-height: 1.75; color: rgba(255,255,255,.8); }
.clanak-telo { padding: 56px 0 24px; }
.clanak-telo h2 { margin: 48px 0 16px; font-family: var(--sans); font-weight: 600; font-size: 26px; line-height: 1.2; }
.clanak-telo p { margin: 0 0 20px; font-size: 17px; line-height: 1.9; color: rgba(255,255,255,.82); }
.clanak-telo ul { margin: 0 0 24px; padding-left: 20px; color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.9; }
.clanak-telo li::marker { color: var(--zlatna); }
.clanak-telo blockquote { margin: 36px 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--zlatna); font-size: 22px; line-height: 1.6; color: var(--bela); }
.clanak-telo figure { margin: 36px 0; }
.clanak-telo figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
.clanak-telo figcaption { margin-top: 10px; font-family: var(--sans); font-size: 13px; color: rgba(255,255,255,.5); }

.poziv { margin-top: 48px; padding: 32px; border: 1px solid var(--linija); border-radius: 6px; background: var(--koza); }
.poziv h2 { margin: 0 0 8px; font-family: var(--sans); font-weight: 600; font-size: 22px; }
.poziv p { margin: 0; font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,.75); }
.poziv .dugmad { margin-top: 20px; }

.srodni { border-top: 1px solid rgba(255,255,255,.08); }

/* ════ KONTAKT ════ */
.uvod-mreze { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.faq-raspored { display: grid; gap: 40px; }
@media (min-width: 1024px) { .faq-raspored { grid-template-columns: 4fr 8fr; gap: 80px; } }
.faq-raspored .tekst p { font-size: 15.5px; }
.faq { border-top: 1px solid rgba(255,255,255,.1); }
.faq details { border-bottom: 1px solid rgba(255,255,255,.1); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; list-style: none; cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--zlatna); }
.faq summary svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--zlatna); transition: transform .2s ease; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq-odgovor { padding: 0 0 24px; max-width: 64ch; }
.faq-odgovor p { margin: 0; font-size: 15.5px; line-height: 1.85; color: rgba(255,255,255,.75); }
.faq-odgovor a { color: var(--zlatna); border-bottom: 1px solid rgba(247,171,0,.35); }
.faq-odgovor a:hover { border-color: var(--zlatna); }

.kontakt-raspored { display: grid; gap: 40px; }
@media (min-width: 1024px) { .kontakt-raspored { grid-template-columns: 5fr 7fr; gap: 64px; } }
.podaci { list-style: none; margin: 8px 0 0; padding: 0; }
.podaci li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.1); }
.podaci li:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
.podaci .ik { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--linija); color: var(--zlatna); }
.podaci .ik svg { width: 20px; height: 20px; }
.podaci b { display: block; font-family: var(--sans); font-weight: 600; font-size: 13px; color: rgba(255,255,255,.5); }
.podaci span, .podaci a { font-size: 16px; color: var(--bela); }
.podaci a:hover { color: var(--zlatna); }

.mapa { position: relative; min-height: 360px; height: 100%; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background-color: #120e0a; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 48px 48px; }
.mapa::before, .mapa::after { content: ''; position: absolute; background: rgba(247,171,0,.12); }
.mapa::before { left: -10%; right: -10%; top: 58%; height: 10px; transform: rotate(-8deg); }
.mapa::after { top: -10%; bottom: -10%; left: 38%; width: 8px; transform: rotate(12deg); }
.mapa-pin { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -100%); color: var(--zlatna); filter: drop-shadow(0 6px 12px rgba(0,0,0,.6)); }
.mapa-pin svg { width: 44px; height: 44px; }
.mapa .dugme { position: absolute; left: 20px; bottom: 20px; z-index: 1; }

.forma-raspored { display: grid; gap: 40px; }
@media (min-width: 1024px) { .forma-raspored { grid-template-columns: 4fr 8fr; gap: 80px; } }
.forma { display: grid; gap: 20px; }
@media (min-width: 640px) { .forma { grid-template-columns: 1fr 1fr; } .forma .puno { grid-column: 1 / -1; } }
.polje label { display: block; margin-bottom: 8px; font-family: var(--sans); font-weight: 600; font-size: 13.5px; color: rgba(255,255,255,.8); }
.polje label span { font-weight: 400; color: rgba(255,255,255,.45); }
.polje input, .polje textarea { width: 100%; padding: 14px 16px; border-radius: 4px; border: 1px solid rgba(255,255,255,.16); background: var(--koza); color: var(--bela); font-family: var(--sans); font-size: 15px; transition: border-color .15s ease; }
.polje textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.polje input::placeholder, .polje textarea::placeholder { color: rgba(255,255,255,.35); }
.polje input:focus, .polje textarea:focus { outline: none; border-color: var(--zlatna); }
.zamka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.forma-dno { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.forma-dno p { margin: 0; font-family: var(--sans); font-size: 13px; color: rgba(255,255,255,.5); }
.forma .dugme { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .kategorija-slika img, .kartica-slika img, .reel-play, .faq summary svg { transition: none; }
}

/* ════ O NAMA (preuređeno) ════ */

.onama-uvod { padding: 56px 0 72px; }
@media (min-width: 1024px) { .onama-uvod { padding: 80px 0 96px; } }
.onama-uvod .omot { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .onama-uvod .omot { grid-template-columns: 1fr 1fr; gap: 72px; } }
.onama-uvod .strana-naslov { margin-bottom: 24px; }
.onama-uvod .strana-lid + .strana-lid { margin-top: 16px; }
.onama-slika { margin: 0; }
.onama-slika img { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 560px; object-fit: cover; border-radius: 4px; }

/* Traka na tamnoj kožnoj podlozi razbija ritam crnih sekcija */
.traka { padding: 72px 0; background: var(--koza); border-top: 1px solid var(--linija); border-bottom: 1px solid var(--linija); }
@media (min-width: 1024px) { .traka { padding: 88px 0; } }

.par { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .par { grid-template-columns: 1fr 1fr; gap: 72px; } }
.par .reel { width: min(280px, 100%); margin: 0; }
.par .tekst { max-width: 520px; }


.onama .slika-uspravna img { max-height: 560px; }

.onama .kategorije { margin-top: 32px; }
.onama .kategorija-slika img { aspect-ratio: 4 / 3; }
.onama .kategorija h3 { margin-top: 18px; font-size: 20px; }
.sekcija-uvod { max-width: 560px; }
.sekcija-uvod p { margin: 0; font-size: 16px; line-height: 1.8; color: rgba(255,255,255,.72); }

/* ════ Zajednički ritam unutrašnjih stranica ════
   Svaka sekcija: naslov gore levo (.sekcija-uvod), sadržaj ispod.
   Sekcije su odvojene tankom linijom, pa se jasno vidi gde šta počinje. */
.razdvoj { border-top: 1px solid rgba(255,255,255,.08); }
.sekcija-uvod { margin-bottom: 36px; }
.sadrzaj-uzi { max-width: 820px; }

.kontakt-par { display: grid; gap: 32px; }
@media (min-width: 900px) { .kontakt-par { grid-template-columns: 1fr 1fr; gap: 72px; align-items: stretch; } }
.kontakt-par .podaci { margin-top: 0; }
.kontakt-par .mapa { min-height: 320px; }
.sekcija.razdvoj { padding-top: 64px; }
@media (min-width: 1024px) { .sekcija.razdvoj { padding-top: 88px; } }

/* Članak: jedna kolona uz levu ivicu, kao i ostale stranice; naslovna slika iste širine kao tekst */
.clanak-vrh .uzano, .clanak-telo.uzano, .clanak-slika { max-width: 760px; margin-left: 0; margin-right: 0; }
.clanak-vrh { padding-bottom: 32px; }
.clanak-slika img { aspect-ratio: 3 / 2 !important; }
.clanak-telo { padding-top: 40px; }
/* Prva sekcija odmah posle uvoda stranice: manji razmak, da uvod i sadržaj ne deluju odvojeno */
.strana-uvod + .sekcija { padding-top: 48px; }
@media (min-width: 1024px) { .strana-uvod + .sekcija { padding-top: 56px; } }

/* O nama, misija: jedna izjava uz levu ivicu, sa zlatnom linijom kao citat u blog tekstu */
.sekcija-misija { padding: 64px 0; }
@media (min-width: 1024px) { .sekcija-misija { padding: 88px 0; } }
.misija { max-width: 820px; margin: 0; padding: 4px 0 4px 32px; border-left: 2px solid var(--zlatna); text-align: left; }
.misija-natpis { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-family: var(--sans); font-weight: 600; font-size: 13.5px; letter-spacing: .04em; color: var(--zlatna); }
.misija .misija-glavno { margin: 0; max-width: none; font-size: 26px; line-height: 1.35; color: var(--bela); }
@media (min-width: 1024px) { .misija .misija-glavno { font-size: 34px; } }
.misija .misija-dalje { margin: 14px 0 0; max-width: 52ch; font-size: 17px; line-height: 1.75; color: rgba(255,255,255,.7); }
@media (min-width: 1024px) { .misija .misija-dalje { font-size: 18px; } }
@media (max-width: 639px) { .misija { padding-left: 20px; } }

/* ════ PAGINACIJA (blog) ════ isti jezik kao filteri: tanak okvir, izabrana strana prigušeno zlatna */
.paginacija { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08); font-family: var(--sans); }
.paginacija ol { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pag-broj { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); font-weight: 600; font-size: 14px; color: rgba(255,255,255,.75); transition: border-color .15s ease, color .15s ease; }
.pag-broj:hover { border-color: var(--zlatna); color: var(--bela); }
.pag-broj[aria-current="page"] { background: rgba(247,171,0,.08); border-color: rgba(247,171,0,.55); color: var(--zlatna); }
.pag-strelica { display: inline-flex; align-items: center; gap: 8px; height: 40px; font-weight: 600; font-size: 14px; color: rgba(255,255,255,.75); transition: color .15s ease; }
.pag-strelica svg { width: 18px; height: 18px; }
a.pag-strelica:hover { color: var(--zlatna); }
.pag-strelica[aria-disabled="true"] { color: rgba(255,255,255,.25); }
@media (max-width: 479px) { .pag-tekst { display: none; } .pag-strelica { width: 40px; justify-content: center; } }

/* ════ Tihi link ispod kartica ════
   Umesto uokvirenog dugmeta: normalna slova i kratka zlatna crtica ispod,
   koja se na hover (i kad je miš bilo gde na kartici) izduži celom dužinom teksta. */
.veza-kartica { display: inline-block; align-self: flex-start; margin-top: auto; padding-bottom: 7px; font-family: var(--sans); font-weight: 600; font-size: 14.5px; letter-spacing: .01em; color: var(--bela); background: linear-gradient(var(--zlatna), var(--zlatna)) left bottom / 24px 1.5px no-repeat; transition: background-size .35s cubic-bezier(.2,.7,.2,1), color .2s ease; }
.veza-kartica:hover, .kartica:hover .veza-kartica, .kategorija:hover .veza-kartica { background-size: 100% 1.5px; color: var(--zlatna); }
@media (prefers-reduced-motion: reduce) { .veza-kartica { transition: none; } }

/* ════ KONTAKT (preuređeno po uzoru na O nama) ════ */
.slika-niza img { aspect-ratio: 5 / 4; max-height: 480px; }
.par-vrh { align-items: start; }
.par-rastegni { align-items: stretch; }
@media (min-width: 900px) { .lepljivo { position: sticky; top: 124px; } }
.kontakt .faq { border-top: 1px solid rgba(255,255,255,.12); }
.kontakt .traka .podaci { margin-top: 8px; }
.kontakt .traka .podaci li { border-color: rgba(255,255,255,.1); }
.kontakt .mapa { min-height: 340px; background-color: #0c0906; }
.kontakt .forma { max-width: none; }

/* ════════════════════════════════════════════════════════════
   POČETNA: sekcije ispod slajdera
   ════════════════════════════════════════════════════════════ */
.sekcija-naslov { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: 36px; }
.sekcija-naslov .h2 { margin: 0; }
.sekcija-naslov p { margin: 10px 0 0; max-width: 56ch; font-size: 16px; line-height: 1.8; color: rgba(255,255,255,.72); }

/* Najava kategorije: slika i tekst naizmenično levo/desno */
.najava { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .najava { grid-template-columns: 1fr 1fr; gap: 72px; } .najava.obrni > .najava-slika { order: 2; } }
.najava + .najava { margin-top: 72px; }
@media (min-width: 900px) { .najava + .najava { margin-top: 96px; } }
.najava-slika { display: block; overflow: hidden; border-radius: 4px; }
.najava-slika img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.najava:hover .najava-slika img { transform: scale(1.03); }
.oznake { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.oznake a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); font-family: var(--sans); font-size: 13.5px; color: rgba(255,255,255,.75); transition: border-color .15s ease, color .15s ease; }
.oznake a:hover { border-color: var(--zlatna); color: var(--bela); }

/* ════ POPUP ZA AKCIJE ════ */
.akcija { width: min(760px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 1px solid var(--linija); border-radius: 6px; background: var(--koza); color: var(--bela); box-shadow: 0 40px 100px rgba(0,0,0,.7); overflow: auto; }
.akcija::backdrop { background: rgba(0,0,0,.7); }
.akcija[open] { animation: akcija-ulaz .35s cubic-bezier(.2,.7,.2,1); }
@keyframes akcija-ulaz { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.akcija-unutra { display: grid; }
@media (min-width: 640px) { .akcija-unutra { grid-template-columns: 5fr 6fr; } }
.akcija-slika img { width: 100%; height: 100%; min-height: 220px; max-height: 280px; object-fit: cover; }
@media (min-width: 640px) { .akcija-slika img { max-height: none; } }
.akcija-tekst { position: relative; padding: 32px 28px 28px; }
@media (min-width: 640px) { .akcija-tekst { padding: 44px 40px 36px; } }
.akcija-natpis { margin: 0 0 12px; font-family: var(--sans); font-weight: 600; font-size: 13.5px; letter-spacing: .04em; color: var(--zlatna); }
.akcija h2 { margin: 0 0 12px; font-family: var(--sans); font-weight: 600; font-size: 26px; line-height: 1.2; }
.akcija p { margin: 0; font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,.75); }
.akcija .dugmad { margin-top: 24px; }
.akcija-rok { margin-top: 16px !important; font-family: var(--sans); font-size: 12.5px !important; color: rgba(255,255,255,.45) !important; }
.akcija-zatvori { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(255,255,255,.15); background: transparent; color: var(--siva); font-size: 20px; line-height: 1; cursor: pointer; }
.akcija-zatvori:hover { border-color: var(--zlatna); color: var(--zlatna); }
@media (prefers-reduced-motion: reduce) { .akcija[open] { animation: none; } }

/* ════════════════════════════════════════════════════════════
   KATEGORIJA I PODKATEGORIJA
   ════════════════════════════════════════════════════════════ */
.putanja { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; font-family: var(--sans); font-size: 13.5px; color: rgba(255,255,255,.5); }
.putanja li + li::before { content: '/'; margin-right: 8px; color: rgba(255,255,255,.25); }
.putanja a:hover { color: var(--bela); }

/* Brza navigacija po grupama: ostaje ispod headera dok se skroluje */
.brza-nav { position: sticky; top: 84px; z-index: 40; background: rgba(0,0,0,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.08); }
.brza-nav ul { display: flex; gap: 8px; margin: 0; padding: 12px 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.brza-nav ul::-webkit-scrollbar { display: none; }
.brza-nav a { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); font-family: var(--sans); font-weight: 600; font-size: 13.5px; white-space: nowrap; color: rgba(255,255,255,.75); transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.brza-nav a:hover { border-color: var(--zlatna); color: var(--bela); }
.brza-nav a[aria-current="true"] { background: rgba(247,171,0,.08); border-color: rgba(247,171,0,.55); color: var(--zlatna); }

.grupa { scroll-margin-top: 150px; }
.grupa + .grupa { border-top: 1px solid rgba(255,255,255,.08); }
.grupa-vrh { display: grid; gap: 20px 72px; align-items: end; margin-bottom: 32px; }
@media (min-width: 900px) { .grupa-vrh { grid-template-columns: 1fr 1fr; } }
.grupa-vrh .h2 { margin-bottom: 12px; }
.grupa-vrh p { margin: 0; max-width: 56ch; font-size: 16px; line-height: 1.8; color: rgba(255,255,255,.72); }
.grupa-radnje { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
@media (min-width: 900px) { .grupa-radnje { justify-content: flex-end; } }
.grupa-radnje .veza-kartica { margin-top: 0; }

/* Galerija modela: klik otvara uvećanje (lightbox) */
.galerija { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .galerija { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.galerija button { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; border-radius: 4px; }
.galerija img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.galerija button:hover img { transform: scale(1.04); }

/* Modeli u podkategoriji: slika, naziv, dugme Poruči */
.modeli { display: grid; gap: 40px 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .modeli { grid-template-columns: repeat(4, 1fr); gap: 48px 24px; } }
.model { display: flex; flex-direction: column; }
.model .galerija-dugme { display: block; overflow: hidden; border-radius: 4px; }
.model img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.model:hover .galerija-dugme img { transform: scale(1.04); }
.model h3 { margin: 16px 0 4px; font-family: var(--sans); font-weight: 600; font-size: 16px; }
.model p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.62); }
.model .dugme { margin-top: auto; align-self: flex-start; }

/* Poklon pasus na dnu kategorije */
.poklon { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .poklon { grid-template-columns: auto 1fr auto; gap: 40px; } }
.poklon-ikona { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--linija); color: var(--zlatna); }
.poklon-ikona svg { width: 28px; height: 28px; }
.poklon h2 { margin: 0 0 8px; font-family: var(--sans); font-weight: 600; font-size: 24px; }
.poklon p { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.8; color: rgba(255,255,255,.75); }

/* ════ LIGHTBOX ════ */
.lightbox { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0,0,0,.94); color: var(--bela); }
.lightbox::backdrop { background: rgba(0,0,0,.94); }
.lightbox-okvir { position: absolute; inset: 64px 16px 72px; display: flex; align-items: center; justify-content: center; }
.lightbox-okvir img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.lightbox-dugme { position: absolute; z-index: 2; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.4); color: var(--bela); cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.lightbox-dugme:hover { border-color: var(--zlatna); color: var(--zlatna); }
.lightbox-dugme svg { width: 20px; height: 20px; }
.lightbox-zatvori { top: 12px; right: 12px; font-size: 22px; }
.lightbox-pre { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-posle { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 639px) { .lightbox-pre, .lightbox-posle { top: auto; bottom: 16px; transform: none; } }
.lightbox-opis { position: absolute; left: 0; right: 0; bottom: 24px; text-align: center; font-family: var(--sans); font-size: 14px; color: rgba(255,255,255,.7); }
@media (max-width: 639px) { .lightbox-opis { bottom: 30px; padding: 0 72px; } }

/* ════════════════════════════════════════════════════════════
   PROIZVOD
   ════════════════════════════════════════════════════════════ */
.proizvod { padding: 40px 0 72px; }
@media (min-width: 1024px) { .proizvod { padding: 56px 0 96px; } }
.proizvod .omot { display: grid; gap: 40px; }
@media (min-width: 900px) { .proizvod .omot { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } }

.pr-galerija { display: grid; gap: 12px; }
@media (min-width: 900px) { .pr-galerija { position: sticky; top: 108px; } }
.pr-glavna { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 4px; overflow: hidden; }
.pr-glavna img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.pr-sicice { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pr-sicice button { padding: 0; border: 1px solid transparent; border-radius: 4px; background: none; cursor: pointer; overflow: hidden; opacity: .6; transition: opacity .15s ease, border-color .15s ease; }
.pr-sicice button:hover { opacity: 1; }
.pr-sicice button[aria-pressed="true"] { opacity: 1; border-color: var(--zlatna); }
.pr-sicice img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

.pr-info .putanja { margin-bottom: 16px; }
.pr-naziv { margin: 0 0 10px; font-family: var(--sans); font-weight: 600; font-size: 30px; line-height: 1.15; letter-spacing: -.012em; }
@media (min-width: 1024px) { .pr-naziv { font-size: 36px; } }
.pr-cena { margin: 0 0 20px; font-family: var(--sans); font-weight: 600; font-size: 20px; color: var(--zlatna); }
.pr-opis { margin: 0; max-width: 56ch; font-size: 16.5px; line-height: 1.85; color: rgba(255,255,255,.78); }


.pr-radnje { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.pr-radnje .dugme { flex: 1 1 200px; justify-content: center; }
.pr-napomena { margin: 14px 0 0; font-family: var(--sans); font-size: 13px; color: rgba(255,255,255,.5); }

.pr-prednosti { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.1); }
.pr-prednosti li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.78); }
.pr-prednosti svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: var(--zlatna); }

.pr-detalji { margin-top: 32px; }
.pr-detalji details { border-bottom: 1px solid rgba(255,255,255,.1); }
.pr-detalji summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; list-style: none; cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: 15.5px; }
.pr-detalji summary::-webkit-details-marker { display: none; }
.pr-detalji summary svg { width: 18px; height: 18px; color: var(--zlatna); transition: transform .2s ease; }
.pr-detalji details[open] summary svg { transform: rotate(45deg); }
.pr-detalji dl { margin: 0 0 20px; display: grid; grid-template-columns: 120px 1fr; gap: 10px 16px; font-size: 15px; }
.pr-detalji dt { font-family: var(--sans); font-size: 13.5px; color: rgba(255,255,255,.5); }
.pr-detalji dd { margin: 0; color: rgba(255,255,255,.82); }
.pr-detalji p { margin: 0 0 20px; font-size: 15px; line-height: 1.8; color: rgba(255,255,255,.75); }
.model h3 a:hover { color: var(--zlatna); }
.model-cena { display: inline-block; margin-top: 4px; font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--zlatna); }
.veza-u-tekstu { color: var(--zlatna); border-bottom: 1px solid rgba(247,171,0,.35); }
.veza-u-tekstu:hover { border-color: var(--zlatna); }
.sekcija-naslov .veza-kartica { margin-top: 0; }

/* ════ Cik-cak pozadine ════
   Na unutrašnjim stranicama prva sekcija (naslov) ima kožnu podlogu,
   a dalje se sekcije smenjuju: crno, koža, crno... Linije između sekcija
   više ne trebaju, promena pozadine sama pokazuje gde počinje novi deo. */
main.naizmenicno > section { background: var(--crna); border-top: 0; border-bottom: 0; }
main.naizmenicno > section:nth-of-type(odd) { background: var(--koza); }
main.naizmenicno > section + section { border-top: 1px solid rgba(247,171,0,.12); }
main.naizmenicno > .sekcija,
main.naizmenicno > .traka { padding: 64px 0; }
@media (min-width: 1024px) { main.naizmenicno > .sekcija, main.naizmenicno > .traka { padding: 88px 0; } }
main.naizmenicno > .strana-uvod { border-bottom: 0; }
main.naizmenicno > .brza-nav + section { border-top: 0; }
main.naizmenicno .poklon-ikona { background: var(--crna); }

/* Početna: sekcije se smenjuju kao na unutrašnjim stranicama (posle slajdera crno, pa koža...) */
main.pocetna > .sekcija { padding: 64px 0; }
@media (min-width: 1024px) { main.pocetna > .sekcija { padding: 96px 0; } }
main.pocetna > .sekcija-tamna { background: var(--koza); border-top: 1px solid rgba(247,171,0,.12); border-bottom: 1px solid rgba(247,171,0,.12); }
.pocetna .najava .tekst p { font-size: 16.5px; }
.pocetna .podaci { margin-top: 8px; }
.pocetna .mapa { min-height: 340px; }
.akcija:focus, .lightbox:focus { outline: none; }
.lightbox-broj { margin-left: 16px; color: rgba(255,255,255,.45); }

/* Početna: pločice kategorija kao "Šta sve pravimo" na O nama */
.pocetna .kategorije { margin-top: 0; }
.pocetna .kategorija-slika img { aspect-ratio: 4 / 3; }
.pocetna .kategorija h3 { margin-top: 18px; font-size: 20px; }
.pocetna .sekcija-uvod { max-width: 620px; }

/* Sortiranje modela, desno u traci sa grupama */
.brza-nav .omot { display: flex; align-items: center; gap: 16px; }
.brza-nav ul { flex: 1; min-width: 0; }
.sortiranje { flex-shrink: 0; display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 13.5px; color: rgba(255,255,255,.55); }
.sortiranje select { height: 36px; padding: 0 34px 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: var(--crna) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7AB00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 12px; color: var(--bela); font-family: var(--sans); font-weight: 600; font-size: 13.5px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.sortiranje select:hover, .sortiranje select:focus { border-color: var(--zlatna); outline: none; }
.sortiranje select:focus-visible { outline: 2px solid var(--zlatna); outline-offset: 2px; }
.sortiranje option { background: var(--koza); color: var(--bela); }
@media (max-width: 639px) { .sortiranje span { display: none; } .sortiranje select { max-width: 150px; } }

/* Lupa na glavnoj slici proizvoda (kao na rasveti) */
.pr-lupa { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(0,0,0,.6); color: rgba(255,255,255,.8); transition: color .15s ease, background-color .15s ease; }
.pr-lupa svg { width: 18px; height: 18px; }
.pr-glavna:hover .pr-lupa { color: var(--zlatna); background: rgba(0,0,0,.75); }
.pr-glavna:focus-visible { outline: 2px solid var(--zlatna); outline-offset: 3px; }

/* ════ Galerija proizvoda (lightbox) ════ ista mehanika kao na rasveti, tamna tema */
.pdp-lb { position: fixed; inset: 0; z-index: 95; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.92); user-select: none; -webkit-user-select: none; }
.pdp-lb.otvoren { display: flex; }
.pdp-lb-viewport { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.pdp-lb-track { display: flex; width: 100%; height: 100%; will-change: transform; }
.pdp-lb-slide { flex-shrink: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pdp-lb-slide img { max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: 6px; will-change: transform; }
.pdp-lb-dugme { position: absolute; z-index: 10; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--bela); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.pdp-lb-dugme:hover { background: rgba(255,255,255,.2); color: var(--zlatna); }
.pdp-lb-zatvori { top: 16px; right: 16px; width: 44px; height: 44px; }
.pdp-lb-zatvori svg { width: 20px; height: 20px; }
.pdp-lb-strelica { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: none; }
.pdp-lb-strelica svg { width: 24px; height: 24px; }
.pdp-lb-pre { left: 16px; } .pdp-lb-posle { right: 16px; }
@media (min-width: 640px) { .pdp-lb-strelica { display: flex; } }
.pdp-lb-brojac { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 10; font-family: var(--sans); font-size: 14px; color: rgba(255,255,255,.7); }
.model:hover .veza-kartica { background-size: 100% 1.5px; color: var(--zlatna); }
.model-grupa { margin: 16px 0 0 !important; font-family: var(--sans); font-size: 12.5px !important; font-weight: 600; color: var(--zlatna) !important; }
.model-grupa + h3 { margin-top: 4px; }
.futer-dno { justify-content: center; text-align: center; }
/* Popup: tihi link kao na karticama; reaguje samo kad je miš na samom linku */
.akcija-veza { margin-top: 24px; font-size: 15px; }
.akcija .akcija-natpis { margin: 0 0 12px; font-family: var(--sans); font-weight: 600; font-size: 13.5px; letter-spacing: .04em; color: var(--zlatna); }
@media (min-width: 640px) { .akcija-tekst { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } }

/* Red sa nazivom i ikonicom korpe (kao na hirurskicelik); ikonica je samo vizuelna, bez funkcije */
.model-vrh { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 4px; }
.model-vrh h3 { margin: 0; padding-top: 2px; }
.dodaj { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; padding: 0; border: 1px solid var(--zlatna); background: transparent; color: var(--zlatna); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.dodaj svg { width: 17px; height: 17px; }
.dodaj:hover { background: var(--zlatna); border-color: var(--zlatna); color: var(--crna); }
.model-vrh + p { margin: 6px 0 0; }
@media (max-width: 639px) { .dodaj { width: 34px; height: 34px; } }

/* Telefon: umesto trake sa podkategorijama padajući izbor levo, sortiranje desno */
.padajuci-izbor select { height: 36px; padding: 0 34px 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: var(--crna) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7AB00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 12px; color: var(--bela); font-family: var(--sans); font-weight: 600; font-size: 13.5px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.padajuci-izbor select:hover, .padajuci-izbor select:focus { border-color: var(--zlatna); outline: none; }
.padajuci-izbor select:focus-visible { outline: 2px solid var(--zlatna); outline-offset: 2px; }
.padajuci-izbor option { background: var(--koza); color: var(--bela); }
@media (max-width: 639px) {
  .brza-nav ul { display: none; }
  .brza-nav .omot { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  /* pola-pola: dugme za podkategorije levo, sortiranje desno */
  .podkat-dugme, .sortiranje { display: flex; flex: 1 1 0; min-width: 0; }
  .sortiranje select { width: 100%; max-width: none; }
}

/* Dugme "burger" za podkategorije (samo telefon) i panel koji izleti sa leve strane */
.podkat-dugme { display: none; align-items: center; gap: 10px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: var(--crna); color: var(--bela); font-family: var(--sans); font-weight: 600; font-size: 13.5px; cursor: pointer; transition: border-color .15s ease; }
.podkat-dugme:hover { border-color: var(--zlatna); }
.podkat-dugme svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--zlatna); }
.podkat-dugme span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.podkat-zastor { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .32s ease; }
.podkat-zastor.otvoren { opacity: 1; }
.podkat-panel { position: fixed; top: 0; left: 0; bottom: 0; z-index: 95; width: min(340px, 86%); display: flex; flex-direction: column; background: var(--koza); border-right: 1px solid var(--linija); box-shadow: 24px 0 60px rgba(0,0,0,.5); transform: translateX(-100%); visibility: hidden; transition: transform .34s cubic-bezier(.22,.61,.36,1), visibility 0s .34s; }
.podkat-panel.otvoren { transform: translateX(0); visibility: visible; transition: transform .34s cubic-bezier(.22,.61,.36,1); }
.podkat-panel ul { list-style: none; margin: 0; padding: 8px 24px; overflow-y: auto; }
.podkat-panel li a { display: block; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-family: var(--sans); font-weight: 600; font-size: 16px; color: rgba(255,255,255,.8); }
.podkat-panel li a:hover { color: var(--bela); }
.podkat-panel li a[aria-current="page"] { color: var(--zlatna); }
@media (min-width: 640px) { .podkat-panel, .podkat-zastor { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .podkat-panel, .podkat-zastor { transition: none; } }
@media (max-width: 639px) { .podkat-dugme { display: flex; } }
@media (max-width: 639px) {
  /* tačno pola-pola: dve jednake kolone */
  .brza-nav .omot { display: grid; grid-template-columns: 1fr 1fr; }
  .brza-nav .omot > ul { display: none; }
  .podkat-dugme, .sortiranje { width: 100%; }
}
/* Burger ikonica desno, kao strelica na sortiranju */
.podkat-dugme { justify-content: space-between; padding: 0 12px 0 14px; }
.podkat-dugme span { order: 1; flex: 1; min-width: 0; text-align: left; }
.podkat-dugme svg { order: 2; width: 16px; height: 16px; }