/* =========================================================
   RANDOM TATTOO STUDIO — styles.css  (v2 — Taylor Tharp inspired)
   Cinematic dark + centered kompozicija, ali SHARP uglovi + EMBER akcent (naš brend).
   Fontovi: Inter (display 900 + body) — pun srpski set. Space Mono samo za sat/ASCII labele.
   ========================================================= */

/* ---------- RESET ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: clip; }
body { min-height: 100vh; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
:where(p, li) { overflow-wrap: break-word; }

/* ---------- TOKENI --------------------------------------- */
:root {
  /* PALETA (5 boja): CRNA #000000 · SIVA #595859 · CRVENA #ED1C1D · TIRKIZ #58C5BE · BELA #DCDCDD
     Sve ostalo su te iste boje sa alfom ili blago podignuta crna za povrsine. */
  --soot:  #000000;          /* CRNA — pozadina strane */
  --soot-2: #0B0B0B;         /* sekundarna pozadina (crna, jedva podignuta) */
  --bone:  #DCDCDD;          /* BELA — naslovi i primarni tekst */
  --ash:   rgba(220,220,221,0.58);  /* sekundarni tekst = bela pritmuljena (siva #595859 pada na 3.4:1, necitljivo) */
  --ember: #ED1C1D;          /* CRVENA — CTA, stanja, akcenti */
  --teal:  #58C5BE;          /* TIRKIZ — mono labele i meta tekst */
  --clay:  #101010;          /* tamna povrsina (kartice, razdelnici) */
  --ember-hover: #FF3E3F;    /* hover: svetlija crvena za feedback */
  --ember-cta: #C8201F;      /* primarno dugme u mirovanju — ista crvena, spustena svetlina (klijent: #ED1C1D previse jarka) */
  --ember-text: #ED1C1D;     /* akcent tekst/brojevi na crnoj — puna crvena je citljiva (5.1:1) */
  --clay-border: #595859;    /* SIVA — ivice i razdelnici */
  --surface: #0E0E0E;        /* kartice */
  --hair: rgba(89,88,89,0.55); /* tanke linije (siva) */
  --live: #43D17A;           /* ZELENA — samo status tackica "Primamo nove klijente" */

  --font-display: 'Inter', sans-serif;   /* weight 900 */
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  --fs-display: clamp(52px, 11vw, 150px);
  --fs-h1: clamp(44px, 7vw, 104px);
  --fs-h2: clamp(34px, 5.5vw, 76px);
  --fs-h3: 22px;
  --fs-lead: 19px;
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-label: 12px;

  --margin: 20px;
  --section-gap: clamp(96px, 13vh, 180px);

  --sp-1: 8px;   --sp-2: 16px;  --sp-3: 24px;
  --sp-4: 32px;  --sp-5: 48px;  --sp-6: 64px;
  --sp-7: 96px;  --sp-8: 120px; --sp-9: 160px;

  --radius: 4px;             /* SHARP brend — 4px samo na dugmadima/inputima */

  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 600ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --z-nav: 100;
  --z-overlay: 200;
  --z-lightbox: 300;
}

/* ---------- BASE ----------------------------------------- */
body {
  background: var(--soot);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
}

/* Diskretan film-grain preko crne (kinematičan Taylor Tharp osećaj) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#glavni, .nav, .footer, .nav-overlay, .lightbox { position: relative; z-index: 2; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.display  { font-size: var(--fs-display); line-height: 0.95; letter-spacing: -0.035em; }
h1        { font-size: var(--fs-h1); }
h2        { font-size: var(--fs-h2); }
h3        { font-size: var(--fs-h3); letter-spacing: -0.01em; }

p { max-width: 62ch; }
strong { font-weight: 700; }
::selection { background: var(--ember); color: var(--bone); }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  z-index: calc(var(--z-lightbox) + 1);
  background: var(--bone); color: var(--soot);
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); font-weight: 500;
}
.skip-link:focus { left: var(--sp-2); top: var(--sp-2); }

/* ---------- LAYOUT --------------------------------------- */
.wrap {
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: var(--margin);
}
.wrap-wide { max-width: 1600px; }

.section { margin-top: var(--section-gap); }
.section:first-of-type { margin-top: 0; }

/* Podstranice bez heroja: prva sekcija mora da prodje ispod fiksnog nava (88px) */
.page-top { padding-top: calc(88px + var(--sp-7)); }

/* Centrirani section head (Taylor Tharp) */
.section-head { max-width: 760px; margin-inline: auto; text-align: center; }
.section-head h1, .section-head h2 { margin-top: 0; }

/* Sekcijski podnaslovi kao pill kartica (kao hero status pill) */
.label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border: 1px solid var(--clay-border);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(220,220,221,0.05), rgba(14,14,14,0.55));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(220,220,221,0.06), 0 6px 20px rgba(0,0,0,0.3);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--teal);
  margin-bottom: var(--sp-4);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ash);
  max-width: 62ch;
  margin-top: var(--sp-3);
}
.section-head .lead { margin-inline: auto; }

/* ---------- STATUS PILL ---------------------------------- */
.status {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 15px;
  border: 1px solid var(--clay-border);
  border-radius: 999px;               /* pill — jedini zaobljeni element (status), po TT */
  background: linear-gradient(180deg, rgba(220,220,221,0.05), rgba(14,14,14,0.55));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(220,220,221,0.06), 0 8px 30px rgba(0,0,0,0.35);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bone);
}
/* Tanka svetlucava gornja ivica (staklasti sjaj) */
.status::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(220,220,221,0.28), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.status__dot {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 8px 1px rgba(67,209,122,0.7);
  flex: none;
}
/* Pulsirajući prsten koji se širi iz tačke */
.status__dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--live);
  animation: dotRing 2.4s var(--ease) infinite;
}
@keyframes dotRing {
  0%   { transform: scale(1);   opacity: 0.9; }
  70%  { transform: scale(2.8); opacity: 0; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* ---------- DUGMAD (frame + sharp) ---------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  font-size: var(--fs-small); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 15px var(--sp-4);
  border-radius: 0;                    /* oštro, bez radiusa */
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn { --ink: var(--bone); }
.btn:hover,
.cta-pair:hover > .btn { --ink: var(--soot); }
.btn-primary { background: var(--ember-cta); color: var(--bone); }
.btn-primary:hover,
.cta-pair:hover > .btn-primary { background: var(--ember); }
.btn-light { background: var(--bone); color: var(--soot); --ink: var(--soot); }
.btn-light:hover { background: #fff; }
/* Sekundarno: providno + blur → TIRKIZ na hover.
   Crvena je rezervisana za primarnu akciju; da i sekundarno ide u crveno, oba
   dugmeta bi na hover izgledala identicno i hijerarhija bi se izgubila.
   Tekst/strelica/coskovi vec idu u soot (crno) na hover — crno na tirkizu je 9.6:1. */
/* Staklo kao kod hype "Book a consultation": blur 10px + jedva vidljiv
   dijagonalni gradijent, ivica skoro neprimetna jer je nose L-zagrade. */
.btn-secondary {
  background: linear-gradient(169.7deg, rgba(220, 220, 221, 0.055) -17.85%, rgba(220, 220, 221, 0) 117.02%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--teal);
  --ink: var(--teal);
  border-color: rgba(88, 197, 190, 0.22);
}
/* Zagrade takodje tirkizne. Specificnost 0,2,0 je NIZA od `.btn:hover .btn__corner`
   (0,3,0), pa hover pravilo (crno) pobedjuje samo od sebe. */
.btn-secondary .btn__corner { color: var(--teal); }

/* Kockica sa strelicom (hype `.join-link-arrow`): tirkizni kvadrat visine dugmeta,
   odvojen sitnim procepom, crna strelica koja se na hover okrene za 405deg
   (pun krug + 45, pa iz dijagonale sleti u vodoravnu). Ide samo na sekundarna
   dugmad koja stoje SAMA — kad je pored primarno, para bi imala dva tezista. */
.cta-pair { display: inline-flex; align-items: stretch; gap: 4px; vertical-align: top; }
/* Sirinu (= visina dugmeta) postavlja JS preko --sq. Cist CSS ovde ne prolazi:
   aspect-ratio ne preuzima visinu koju flex item dobije kroz align-self: stretch,
   pa kutija ispadne tanka. */
.cta-arrow {
  flex: 0 0 auto; align-self: stretch; width: var(--sq, 3.4em);
  display: grid; place-items: center; cursor: pointer;
  background: var(--teal); color: var(--soot);
  transition: background var(--dur-base) var(--ease);
}
/* Ikonica u em, ne u %: procenat bi zavisio od sirine kutije koju aspect-ratio
   tek treba da izracuna iz visine — kruzna zavisnost, kutija ispadne tanka. */
.cta-arrow svg { width: 1.15em; height: 1.15em; display: block; transition: transform 0.5s var(--ease); }
.cta-pair:hover .cta-arrow svg { transform: rotate(405deg); }
.cta-arrow:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* Kontekstualni razmaci: posle omotaca flex/margin pravila ciljaju .cta-pair,
   ne vise samo dugme. */
.consult .cta-pair { align-self: flex-start; margin-top: var(--sp-3); }
.consult .cta-pair > .consult__cta { margin-top: 0; }   /* razmak nosi par, ne dugme */
.gallery-hero__inner .cta-pair { margin-top: var(--sp-4); }
.gallery-hero__inner .cta-pair > .gallery-hero__cta { margin-top: 0; }
.btn-secondary:hover,
.cta-pair:hover > .btn-secondary { background: var(--teal); border-color: var(--teal); color: var(--soot); }
.btn--lg { padding: clamp(18px, 2vw, 26px) clamp(30px, 3.6vw, 52px); font-size: clamp(14px, 1.05vw, 16px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.btn-row.center { justify-content: center; }

/* Frame ugaoni markeri — šire se na hover */
.btn__label { display: inline-block; }
/* L-zagrade u uglovima: kvadrat sa samo dve ivice, kao kod hype-a (nije SVG).
   Sede na -1px da poklope 1px border dugmeta, a na hover se uvuku za pola svoje
   velicine ka centru. */
.btn__corner {
  position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor;
  color: rgba(220, 220, 221, 0.85);
  pointer-events: none;
  transition: transform 0.5s var(--ease), color var(--dur-fast) var(--ease);
}
.btn__corner--tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.btn__corner--tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.btn__corner--br { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.btn__corner--bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.btn:hover .btn__corner,
.cta-pair:hover > .btn .btn__corner { color: var(--soot); }

/* Na hover coškovi ulaze UNUTAR dugmeta — 50% svoje veličine, kao kod hype-a */
.btn:hover .btn__corner--tl,
.cta-pair:hover > .btn .btn__corner--tl { transform: translate(50%, 50%); }
.btn:hover .btn__corner--tr,
.cta-pair:hover > .btn .btn__corner--tr { transform: translate(-50%, 50%); }
.btn:hover .btn__corner--br,
.cta-pair:hover > .btn .btn__corner--br { transform: translate(-50%, -50%); }
.btn:hover .btn__corner--bl,
.cta-pair:hover > .btn .btn__corner--bl { transform: translate(50%, -50%); }
/* Tekst i strelica menjaju boju na hover (tamno mastilo na Ember pozadini) */
.btn:hover .btn__label,
.cta-pair:hover > .btn .btn__label { color: var(--soot); }
/* GLYPH DUGME (metod sa hype-tattoo.com "Book a consultation")
   Svako slovo je span sa data-char; vidljivo slovo crta ::after, dok pravi
   karakter ostaje u toku providan i drzi sirinu — zato se na hover nista ne
   pomera. Na hover svaki ::after prodje kroz "_" pa tri nasumicna glifa i vrati
   se na svoje slovo; kasnjenje po slovu (--index) pravi talas s leva na desno.
   steps(1, end) daje tvrdo preskakanje umesto mekog prelaza. */
.btn--glyph .glyph-word { display: inline-block; white-space: nowrap; }
.btn--glyph .glyph-char { position: relative; display: inline-block; color: transparent; }
/* Kad tekst dugmeta predje u dva reda (usko dugme na telefonu) */
.btn__label { text-align: center; }
.btn--glyph .glyph-char::after {
  content: attr(data-char);
  position: absolute; inset: 0;
  display: inline-block;
  /* Ne moze currentColor: roditeljski span je transparent, pa bi se i ::after
     ugasio. Boja se zato navodi eksplicitno, kao i kod hype-a. */
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}
.btn--glyph:hover .glyph-char::after,
.cta-pair:hover > .btn--glyph .glyph-char::after {
  animation: glyphFlash var(--glyph-speed, 0.24s) calc(var(--index, 0) * 0.045s) steps(1, end);
}
@keyframes glyphFlash {
  0%, 20% { content: "_"; }
  40%     { content: var(--char-1); }
  60%     { content: var(--char-2); }
  80%     { content: var(--char-3); }
}
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}
@media (prefers-reduced-motion: reduce) {
  .btn--glyph:hover .glyph-char::after { animation: none; }
}

/* ---------- NAV ------------------------------------------ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  background: transparent; border-bottom: 1px solid transparent;
  transition: background var(--dur-base) ease-out, border-color var(--dur-base) ease-out;
}
.nav.scrolled { background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); }
/* Galerija: nav nije sticky — stoji na vrhu heroja i sklizne sa skrolom */
.nav.nav--static { position: absolute; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: 88px; }
.nav__brand { display: flex; align-items: center; gap: var(--sp-3); }
.nav__logo { display: flex; align-items: center; gap: var(--sp-2); }
.nav__logo img { height: 48px; width: auto; }
.nav__logo span { font-family: var(--font-display); font-weight: 900; font-size: 24px; text-transform: uppercase; letter-spacing: -0.01em; }
.nav__links { display: none; }
.nav__link { font-size: var(--fs-small); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bone); transition: color var(--dur-fast) var(--ease); }
.nav__link:hover { color: var(--ash); }
.nav__cta { display: none; white-space: nowrap; }
/* Uske širine (tablet): zbijeniji nav da duži CTA ne lomi red */
@media (min-width: 712px) and (max-width: 1040px) {
  .nav__inner { gap: var(--sp-2); }
  .nav__links { gap: var(--sp-3) !important; }
  .nav__link { font-size: 12px; }
  .nav__cta { padding: 12px var(--sp-3); font-size: 12px; letter-spacing: 0.04em; }
  .nav__logo img { height: 36px; }
  .nav__logo span { font-size: 18px; }
}

.nav__toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; }
.nav__toggle span { display: block; height: 2px; width: 100%; background: var(--bone); transition: transform var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease); }

/* Hamburger → X kad je meni otvoren */
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- DVOJEZIČNI SADRŽAJ (blog članci) ------------ */
/* Dugački tekstovi stoje u oba jezika u HTML-u; prikazuje se samo aktivni. */
html[data-lang="sr"] .post-body[lang="en"],
html[data-lang="en"] .post-body[lang="sr"] { display: none; }

/* ---------- PREKIDAČ JEZIKA (SR / EN) ------------------- */
.lang { position: relative; display: inline-block; flex-shrink: 0; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 12px; border: 1px solid var(--clay-border); border-radius: 0;
  background: rgba(220,220,221,0.04); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--bone); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lang__btn:hover { border-color: var(--ember); color: var(--ember); }
.lang__chev { width: 12px; height: 12px; display: block; transition: transform var(--dur-fast) var(--ease); }
.lang__btn[aria-expanded="true"] .lang__chev { transform: rotate(180deg); }
.lang__menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: calc(var(--z-nav) + 5);
  min-width: 168px; margin: 0; padding: 0; list-style: none;
  background: rgba(0,0,0,0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--clay-border);
}
.lang__menu[hidden] { display: none; }
.lang__opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 13px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--bone);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lang__opt:hover { background: rgba(220,220,221,0.06); }
.lang__opt + .lang__opt { border-top: 1px solid var(--hair); }
.lang__opt .lang__code { font-weight: 700; letter-spacing: 0.1em; color: var(--ash); min-width: 22px; }
.lang__opt .lang__name { flex: 1; }
.lang__check { width: 14px; height: 14px; display: block; opacity: 0; color: var(--ember-text); flex-shrink: 0; }
.lang__opt.is-active { color: var(--ember-text); }
.lang__opt.is-active .lang__code { color: var(--ember-text); }
.lang__opt.is-active .lang__check { opacity: 1; }
/* Telefon: prekidač ide u staggered meni, ispod linkova */
.sm-lang { padding-top: var(--sp-4); }
.sm-lang .lang__menu { right: auto; left: 0; }

/* ---------- STAGGERED MOBILNI MENI ---------------------- */
.sm { position: fixed; inset: 0; z-index: 95; pointer-events: none; visibility: hidden; }
.sm.open { visibility: visible; pointer-events: auto; }
.sm-prelayers { position: absolute; inset: 0; pointer-events: none; }
.sm-prelayer { position: absolute; inset: 0; will-change: transform; }
.sm-panel {
  position: absolute; inset: 0; background: var(--soot);
  display: flex; flex-direction: column;
  padding: 104px var(--margin) 40px; overflow-y: auto; will-change: transform;
}
.sm-list { list-style: none; margin: auto 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sm-itemWrap { position: relative; overflow: hidden; line-height: 1; }
.sm-item {
  position: relative; display: inline-block; text-decoration: none;
  color: var(--bone); font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; font-size: clamp(26px, 7.6vw, 38px); line-height: 1.08;   /* nav link, ne naslov */
  letter-spacing: -0.03em; padding-right: 1.5em; transition: color var(--dur-fast) var(--ease);
}
.sm-item:hover, .sm-item:active { color: var(--ember); }
.sm-label { display: inline-block; will-change: transform; transform-origin: 50% 100%; }
.sm-list[data-numbering] { counter-reset: smItem; }
.sm-list[data-numbering] .sm-item::after {
  counter-increment: smItem; content: counter(smItem, decimal-leading-zero);
  position: absolute; top: 0.25em; right: 0.2em;
  font-family: var(--font-mono); font-size: 14px; font-weight: 400;
  color: var(--ember-text); opacity: var(--sm-num-opacity, 0);
}
.sm-cta { align-self: flex-start; margin-top: var(--sp-4); }
.sm-socials { padding-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.sm-socials-title { margin: 0; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.16em; color: var(--teal); }
.sm-socials-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.sm-socials-link { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--bone); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.sm-socials-link:hover { color: var(--ember); }

/* ---------- SCROLL REVEAL -------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- HERO (centered, cinematic) ------------------- */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  position: relative; overflow: hidden; isolation: isolate;
  padding: 120px 0 64px;
  background: var(--soot);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.44) 9%, rgba(0,0,0,0.24) 20%, rgba(0,0,0,0.24) 60%, rgba(0,0,0,0.55) 86%, var(--soot) 100%),
    url('assets/hero-collage.jpg');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  background-attachment: fixed, fixed;
}
/* Invert efekat na naslov — bela slova invertuju pozadinsku sliku (kao galerija/Hype) */
.hero__title { mix-blend-mode: exclusion; color: #DCDCDD; }
/* Prva sekcija posle heroja klizi PREKO fiksirane slike i prekriva je.
   margin -> padding: inace u margin procepu nema pozadine pa se vidi film-grain
   (body::before) i ispadne svetlija siva traka izmedju heroja i galerije. */
.hero + .section { position: relative; z-index: 1; background: var(--soot); margin-top: 0; padding-top: var(--section-gap); }
.hero__inner { width: 100%; display: flex; flex-direction: column; align-items: center; }
/* Rotirajući kružni tekst — RANDOM * TATTOO * STUDIO */
.hero__badge { position: absolute; bottom: 44px; right: var(--margin); width: 152px; height: 152px; display: none; place-items: center; z-index: 3; }
.hero__badge-mark { position: absolute; width: 56px; height: 56px; opacity: 0.95; }
.circular-text { position: absolute; inset: 0; border-radius: 50%; color: var(--bone); text-align: center; cursor: pointer; transform-origin: 50% 50%; will-change: transform; }
.circular-text span { position: absolute; inset: 0; display: inline-block; font-family: var(--font-mono); font-weight: 700; font-size: 13px; text-transform: uppercase; }
@media (min-width: 768px) { .hero__badge { display: grid; } }

.hero__status { margin-bottom: var(--sp-5); }
.hero__title { margin-bottom: var(--sp-4); perspective: 1000px; text-shadow: 0 2px 40px rgba(0,0,0,0.55); }
.hero__title > span { display: block; }
.hero__lead { margin: 0 auto var(--sp-6); color: var(--bone); text-shadow: 0 1px 20px rgba(0,0,0,0.6); perspective: 1000px; }

/* ---------- BLUR APPEAR (hero reči izranjaju) ---------- */
.blur-word { display: inline-block; opacity: 0; filter: blur(var(--bw, 12px)) brightness(0.6); transform: translateY(20px) scale(var(--sc, 0.94)) rotateX(-15deg); transform-style: preserve-3d; backface-visibility: hidden; transition: opacity var(--bd, 2.2s) cubic-bezier(0.25,0.46,0.45,0.94), filter var(--bd, 2.2s) cubic-bezier(0.25,0.46,0.45,0.94), transform var(--bd, 2.2s) cubic-bezier(0.25,0.46,0.45,0.94); transition-delay: var(--dl, 0s); }
.blur-word.in { opacity: 1; filter: blur(0px) brightness(1); transform: translateY(0) scale(1) rotateX(0deg); }

/* ---------- STATEMENT PARAGRAFI + SCROLL REVEAL -------- */
/* Veći + font naslova SAMO za „O studiju" (po zahtevu) */
.about__body p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--bone);
}
/* Scroll-reveal (rotacija) — svi ciljani tekstovi zadržavaju svoj font */
.about__body p,
.artist-row__desc,
.step__desc,
.step__list li,
.section-head .lead,
.reviews__intro .lead { transform-origin: 0% 50%; will-change: transform; }
.reveal-word { display: inline-block; will-change: opacity, filter; }

/* ---------- INK / GOO KURSOR (desktop) ----------------- */
.ink-cursor { pointer-events: none; position: fixed; top: 0; left: 0; z-index: 1000; filter: url(#goo); mix-blend-mode: difference; display: none; }
.ink-cursor span { position: absolute; top: 0; left: 0; width: 26px; height: 26px; border-radius: 50%; background: #fff; }
.goo-defs { position: absolute; width: 0; height: 0; }
@media (min-width: 1024px) and (pointer: fine) {
  .ink-cursor { display: block; }
  html { cursor: none; }
  a, button, .btn, [role="button"], select, label, summary { cursor: none; }
  input, textarea { cursor: text; }
}
.hero__scroll { position: absolute; bottom: var(--sp-4); left: 50%; transform: translateX(-50%); width: 1px; height: 46px; background: var(--clay-border); overflow: hidden; }
.hero__scroll::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 40%; background: var(--ash); animation: scrollLine 2s var(--ease) infinite; }
@keyframes scrollLine { 0% { transform: translateY(-100%); } 100% { transform: translateY(320%); } }

/* ---------- MOSAIC GALLERY (edge-to-edge, sharp) --------- */
.mosaic-wrap { margin-top: var(--sp-2); }

/* ---------- IMGSTACK (telefon: radovi kao naslagane karte) ----
   Radovi na pocetnoj vise nisu mozaik od 12 slika — sada je to spil od pet
   karata. Namerno zauzimaju manje prostora i manje vuku paznju, da bi dugme
   "Cela galerija" bilo ono sto se vidi. Prevlacenje salje gornju kartu nazad.
   Sve je vanilla: transformi su inline stilovi koje racuna JS, bez biblioteke. */
.imgstack {
  position: relative;
  display: grid; place-items: center;
  width: 100%;
  height: calc(min(58vw, 240px) * 7 / 5 + 40px);
  margin-top: var(--sp-4);
  touch-action: pan-y;          /* vertikalni skrol strane ostaje moguc */
  user-select: none; -webkit-user-select: none;
}
.imgstack__card {
  position: absolute;
  width: min(58vw, 240px); aspect-ratio: 5 / 7;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(220, 220, 221, 0.14);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  transform-origin: bottom center;
  transition: transform 450ms var(--ease), opacity 300ms linear;
  will-change: transform, opacity;
}
.imgstack__card.is-dragging { transition: none; cursor: grabbing; }
.imgstack__card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .imgstack__card { transition: none; }
}
.masonry { column-count: 2; column-gap: 10px; transition: opacity var(--dur-fast) var(--ease); }
.masonry.fading { opacity: 0; }
.work { break-inside: avoid; margin-bottom: 10px; overflow: hidden; background: var(--clay); cursor: pointer; }
.work img { width: 100%; height: auto; filter: grayscale(1) brightness(0.92); transition: filter var(--dur-base) var(--ease), transform var(--dur-slow) var(--ease); }
.work:hover img { filter: grayscale(0) brightness(1); transform: scale(1.03); }
.gallery-empty { text-align: center; color: var(--ash); padding: var(--sp-8) 0; }
.gallery-cta { margin-top: var(--sp-6); text-align: center; }

/* Filteri (galerija stranica) */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); margin: var(--sp-5) 0 var(--sp-6); }
.filter { font-family: var(--font-mono); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ash); padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.filter:hover { color: var(--bone); }
.filter.active { color: var(--ember-text); border-bottom-color: var(--ember-text); }

/* ---------- GALERIJA HERO (Hype stil) ------------------- */
/* Scroll-cover: pozadinska slika je fiksirana za viewport (background-attachment: fixed) —
   ne pomera se, a sekcija sa radovima se skroluje preko nje i prekriva je odozdo (kao Hype). */
.gallery-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(88px + var(--sp-6)) 0 var(--sp-6);
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.40) 40%, rgba(0,0,0,0.66) 82%, var(--soot) 100%),
    url('assets/hero-galerija.jpg');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  background-attachment: fixed, fixed;
}
/* Invert efekat na naslov — bela slova invertuju pozadinu iza sebe (kao Hype "masterpiece gallery") */
.gallery-hero__title { mix-blend-mode: exclusion; color: #fff; }

/* ---------- HERO APPEAR (dugmad, labele) ---------------------
   Naslovi i podnaslovi koriste per-reč blur reveal (data-blur / initBlurReveal) —
   ta animacija deli reči u spanove UNUTAR naslova, pa h1 nema transform i
   mix-blend-mode (invert) ostaje. Ovde ostaju samo labela, dugmad i donja traka. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes heroRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

  .hero__status,
  .gallery-hero__inner > .label,
  .artist-hero > .label { animation: heroRise 0.5s var(--ease) both; animation-delay: 0.04s; }

  /* Staklena dugmad ulaze SAMO kroz opacity. heroRise animira transform, a predak
     sa transformom pravi Backdrop Root — backdrop-filter tada nema sta da uzorkuje
     i blur na dugmetu se uopste ne vidi. */
  @keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }

  /* Animira se SAMO dugme, nikad njegov roditelj: predak sa opacity < 1 (a
     `both` drzi animaciju u efektu i posle kraja) pravi Backdrop Root, pa
     backdrop-filter na dugmetu nema sta da uzorkuje. Zato je blur radio na
     galeriji (animacija je na samom dugmetu) a na pocetnoj nije (bila je na
     .btn-row). */
  .hero .btn-row > .btn,
  .hero .btn-row > .cta-pair,
  .gallery-hero__cta,
  .artist-hero__actions > .btn,
  .artist-hero__actions > .cta-pair { animation: heroFade 0.6s var(--ease) both; animation-delay: 0.5s; }

  .gallery-hero__bottom { animation: heroRise 0.6s var(--ease) both; animation-delay: 0.6s; }
}
/* Blog hero — ista sekcija, druga pozadinska slika */
.gallery-hero--blog {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.40) 40%, rgba(0,0,0,0.66) 82%, var(--soot) 100%),
    url('assets/blog-hero.jpg?v=20260828');
}
/* Blog sekcija: PROVIDNA. Most (blog-back) je jedan FIKSIRAN kompozitni sloj (.blog-bg)
   iza cele strane — umesto background-attachment: fixed, koji je treperio/bagovao pri
   skrolu (i na kompu i na telefonu). Composited fixed sloj je gladak na oba, a pošto je
   jedan sloj iza svega, most se neprekidno vidi i kroz sekciju i kroz footer (bez šava).
   Specifičnost 0,2,0 nadjačava .portfolio-section {background: soot}. */
.portfolio-section.blog-list-section {
  position: relative;
  padding-top: 0; padding-bottom: var(--sp-6);
  background: transparent;
}
/* Fiksiran most iza cele blog strane — hero (svoja slika) ga prekriva gore, a sekcija i
   footer su providni pa se vidi kroz njih. Jedan composited sloj = bez janka. */
.blog-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(0,0,0,0.80), rgba(0,0,0,0.80)),
    url('assets/blog-back.jpg') center / cover no-repeat;
}
/* gornji razmak na .wrap (naslov) */
.blog-list-section > .wrap { padding-top: var(--section-gap); position: relative; z-index: 1; }
.blog-list-section > .wheel { position: relative; z-index: 1; }
.blog-list-section .section-head h2 { color: var(--bone); }
/* Blog footer: providan da se most vidi neprekidno kroz njega (bez šava, bez margin-gepa) */
.blog-page .footer { background: transparent; margin-top: 0; }
.blog-page .blog-list-section { padding-bottom: var(--sp-8); }
@media (max-width: 711px) {
  /* Telefon: bez fiksnog mosta (fiksne velike slike secka pri skrolu na telefonu) — cist soot */
  .blog-bg { display: none; }
  .portfolio-section.blog-list-section { background: var(--soot); }
  .blog-page .footer { background: var(--soot); }
  .blog-list-section > .wrap { padding-top: var(--sp-7); }
}
/* Kontakt hero — ista sekcija, Anja.jpg pozadina */
.gallery-hero--kontakt {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.40) 40%, rgba(0,0,0,0.66) 82%, var(--soot) 100%),
    url('assets/kontakt-hero.jpg?v=20260829');
}
/* Kontakt sekcija prekriva fiksiranu hero sliku na skrol.
   Sekcija je .wrap (centrirana kolona), pa crnu pozadinu razvlačimo full-width
   preko ::before — inače bi fiksirana siva hero slika probijala pored kolone. */
.kontakt-cover { position: relative; z-index: 1; margin-top: 0; background: var(--soot); }
/* DarkVeil host (kontakt sekcija na kontakt i pocetnoj strani).
   padding-block ovde (a ne na sekciji) — veil ispuni ceo box, pa sadrzaj mora
   da ima razmak iznutra da ne dodiruje ivice. Vazi i za pocetnu i za kontakt stranu.
   Slojevi: soot baza (::before, full-bleed) → DarkVeil canvas → dim vignette (::after) → sadrzaj */
.darkveil-host { position: relative; isolation: isolate; padding-block: var(--sp-6); }
.darkveil-host::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; z-index: 0; background: var(--soot); pointer-events: none; }
.darkveil { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; z-index: 1; display: block; opacity: 1; pointer-events: none; }
.darkveil-host::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 86%, rgba(0,0,0,0.45) 100%); }
.darkveil-host > .section-head,
.darkveil-host > .btn-row,
.darkveil-host > .contact__grid,
.darkveil-host > .gallery-contact { position: relative; z-index: 3; }

/* ---------- BLOG KARTICE (bcard) ------------------------ */
.bcard { position: relative; display: block; overflow: hidden; background: var(--clay); border: 1px solid var(--hair); }
.bcard__media { position: absolute; inset: 0; }
.bcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.bcard:hover .bcard__media img { transform: scale(1.05); }
.bcard__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.94) 100%); }
.bcard__cat { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--teal); }
.bcard__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(15px, 1.05vw, 18px); line-height: 1.12; letter-spacing: -0.01em; color: var(--bone); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bcard__more { margin-top: var(--sp-1); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--bone); opacity: 0; transform: translateY(6px); transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), color var(--dur-fast) var(--ease); }
.bcard:hover .bcard__more { opacity: 1; transform: translateY(0); color: var(--ember-text); }

/* --- Telefon/tablet: običan grid (bez luka) --- */
.wheel { margin-top: var(--sp-6); }
.wheel__hint { display: none; }
.wheel__hub { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 560px) { .wheel__hub { grid-template-columns: repeat(2, 1fr); } }
.wheel__item .bcard { aspect-ratio: 3 / 3.4; }

/* --- Desktop (≥1024px): rotirajući TOČAK kartica (beskonačna petlja, vuci da zavrtiš)
   Velike kartice — samo srednja je puna u vrhu, susedne proviruju sa strane,
   ostale su van ekrana; vučenjem se točak vrti u krug (nema kraja). --- */
@media (min-width: 1024px) {
  .wheel { position: relative; height: min(92vh, 880px); overflow: hidden; margin-top: var(--sp-5); touch-action: none; }
  .wheel__hint { display: block; position: absolute; left: 50%; bottom: var(--sp-3); transform: translateX(-50%); z-index: 5; font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); pointer-events: none; }
  /* Radius 1300px + ugao 15° → blag nagib, tri kartice u kadru, mali razmak */
  /* skriven dok JS ne rasporedi kartice u luk (inace bljesnu naslagane u centru na load) */
  .wheel__hub { position: absolute; left: 50%; top: 45%; width: 0; height: 0; display: block; grid-template-columns: none; gap: 0; transform-origin: 50% 1300px; cursor: grab; will-change: transform; opacity: 0; transition: opacity 0.35s var(--ease); }
  .wheel__hub.is-ready { opacity: 1; }
  .wheel__hub:active { cursor: grabbing; }
  .wheel__item { position: absolute; left: 0; top: 0; transform-origin: 50% 1300px; }
  .wheel__item .bcard { position: absolute; left: 0; top: 0; width: clamp(260px, 25vw, 360px); aspect-ratio: 3 / 4.25; transform: translate(-50%, -50%); }
}

/* ---------- BLOG ČLANAK (post stranica) ----------------- */
.post-hero { padding-top: calc(88px + var(--sp-7)); max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); }
.post-back { align-self: center; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ash); transition: color var(--dur-fast) var(--ease); }
.post-back:hover { color: var(--bone); }
.post-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 4.4vw, 60px); line-height: 1.03; letter-spacing: -0.02em; color: var(--bone); }
.post-meta { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ash); }
.post-cover { max-width: 940px; margin: var(--sp-6) auto 0; }
.post-cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.post-body { max-width: 720px; margin: var(--sp-6) auto 0; }
.post-body p { margin-bottom: var(--sp-4); font-size: var(--fs-lead); line-height: 1.85; color: var(--bone); }
.post-body p:first-child { font-size: 21px; }
.post-nav { max-width: 940px; margin: var(--sp-6) auto 0; display: flex; justify-content: space-between; gap: var(--sp-4); border-top: 1px solid var(--hair); padding-top: var(--sp-5); }
.post-nav__link { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ash); max-width: 46%; transition: color var(--dur-fast) var(--ease); }
.post-nav__link:hover { color: var(--ember); }
.post-nav__link--next { text-align: right; margin-left: auto; }
.gallery-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); }
.gallery-hero__title { display: flex; flex-direction: column; align-items: center; line-height: 0.9; }
.gallery-hero__title span { display: block; white-space: nowrap; }
.gallery-hero__lead { max-width: 46ch; margin-inline: auto; }
/* Hero dugme: blurovano staklo pocetno -> Ember na hover (kao Hype .app), meksi 0.7s */
.gallery-hero__cta { margin-top: var(--sp-4); padding: clamp(18px, 2vw, 26px) clamp(34px, 4.2vw, 60px); font-size: clamp(14px, 1.15vw, 17px); letter-spacing: 0.1em; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 0.7s var(--ease), border-color 0.7s var(--ease), color 0.7s var(--ease); }
.gallery-hero__cta .btn__label, .gallery-hero__cta .btn__arrow { transition: color 0.7s var(--ease); }
/* dva stakovana hero dugmeta iste velicine (Zakazi konsultaciju iznad Kontaktiraj nas) */
.gallery-hero__ctas { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.gallery-hero__ctas .gallery-hero__cta { margin-top: 0; width: min(360px, 84vw); }
/* Komp: dva hero dugmeta jedan pored drugog (iste velicine) */
@media (min-width: 712px) {
  .gallery-hero__ctas { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .gallery-hero__ctas .gallery-hero__cta { width: auto; min-width: 250px; }
}
.gallery-hero__bottom { position: absolute; left: 0; right: 0; bottom: var(--sp-4); display: flex; justify-content: space-between; padding: 0 var(--margin); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ash); }
.gallery-hero__down { color: var(--ash); transition: color var(--dur-fast) var(--ease); }
.gallery-hero__down:hover { color: var(--bone); }

/* ---------- GALERIJA GRID (edge-to-edge, Hype stil) ----- */
/* z-index + neprozirna pozadina: radovi klize PREKO fiksirane hero slike i prekrivaju je */
.portfolio-section { position: relative; z-index: 1; background: var(--soot); padding-bottom: var(--sp-8); }
.gallery-list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.tile { position: relative; flex: 0 0 33.3333%; max-width: 33.3333%; aspect-ratio: 1 / 1.2; overflow: hidden; background: var(--clay); cursor: pointer; }
.tile img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transform-origin: center; transition: transform 0.5s ease-out, opacity var(--dur-slow) var(--ease); }
/* reveal na skrol: startuje nevidljivo, .visible je pali */
.tile img.img_view_animation { opacity: 0; }
.tile img.visible { opacity: 1; }
/* donji gradijent na hover */
.tile::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 30%; z-index: 2; opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease); background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.82) 100%); }
.tile:hover::before { opacity: 1; }
/* ime umetnika izranja odozdo */
.master-name-overlay { position: absolute; left: 0; bottom: 8px; width: 100%; z-index: 3; text-align: center; pointer-events: none; color: var(--bone); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0; transition: opacity var(--dur-base) var(--ease), bottom var(--dur-base) var(--ease); }
.tile:hover .master-name-overlay { opacity: 1; bottom: 18px; }
/* Kontakt na galeriji: forma levo, konsultacije desno */
.gallery-contact { margin-top: var(--sp-7); display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: stretch; text-align: left; }
.consult { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); padding: clamp(28px, 3vw, 48px); background: var(--clay); border: 1px solid var(--hair); }
/* Fotografija bocice mastila umesto žuto-crnog shadera; veo drži tekst čitljivim */
.consult {
  background-color: #0E0E0E;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.74) 52%, rgba(0,0,0,0.52) 100%),
    url('assets/consult-bg.jpg?v=20260828');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
}
.consult__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.consult__canvas { display: block; width: 100%; height: 100%; opacity: 0.8;
  -webkit-mask-image: radial-gradient(108% 76% at 50% 45%, #000 0%, rgba(0,0,0,0.6) 62%, transparent 100%);
  mask-image: radial-gradient(108% 76% at 50% 45%, #000 0%, rgba(0,0,0,0.6) 62%, transparent 100%); }
.consult > *:not(.consult__bg) { position: relative; z-index: 1; }
/* Manji pill */
.consult__label { align-self: flex-start; padding: 4px 11px; font-size: 10px; letter-spacing: 0.14em; }
.consult__title { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.05; }
.consult__text { color: var(--ash); max-width: 46ch; }
.consult__list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-1); }
.consult__list li { position: relative; padding-left: 22px; color: var(--bone); }
.consult__list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; background: var(--teal); }
.consult__cta { align-self: flex-start; margin-top: var(--sp-3); padding: clamp(16px, 1.6vw, 22px) clamp(28px, 3vw, 44px); }
@media (min-width: 900px) { .gallery-contact { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-7); } }

.gallery-more-wrap { text-align: center; margin-top: var(--sp-6); padding: 0 var(--margin); }
/* Veliko dugme preko cele sekcije: providno bez blura → belo sa crnim tekstom + scramble na hover */
.gallery-more { width: 100%; padding: clamp(24px, 3vw, 44px); font-size: clamp(14px, 1.3vw, 18px); letter-spacing: 0.14em; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--bone); border-color: rgba(220, 220, 221, 0.38); }
.gallery-more:hover { background: var(--bone); color: var(--soot); border-color: var(--bone); }
/* Mekši prelaz boja (0.7s) — bez naglog glitcha */
.gallery-more { transition: background 0.7s var(--ease), border-color 0.7s var(--ease), color 0.7s var(--ease); }
.gallery-more .btn__label { transition: color 0.7s var(--ease); }
/* Veliki L-borderi u uglovima: duga horizontalna ruka (srazmerna dugmetu), deblji */
.gallery-more .btn__corner { width: clamp(21px, 2vw, 30px); height: clamp(21px, 2vw, 30px); border: 0 solid currentColor; transition: transform var(--dur-base) var(--ease), color 0.7s var(--ease), border-color 0.7s var(--ease); }
.gallery-more .btn__corner svg { display: none; }
.gallery-more .btn__corner--tl { border-top-width: 2px; border-left-width: 2px; }
.gallery-more .btn__corner--tr { border-top-width: 2px; border-right-width: 2px; }
.gallery-more .btn__corner--br { border-bottom-width: 2px; border-right-width: 2px; }
.gallery-more .btn__corner--bl { border-bottom-width: 2px; border-left-width: 2px; }

/* Pocetna hero dugmad: veca + meksi prelaz boja (ease 0.7s) */
.hero .btn { padding: clamp(18px, 1.9vw, 26px) clamp(30px, 3.4vw, 52px); font-size: clamp(14px, 1.05vw, 17px); letter-spacing: 0.1em; transition: background 0.7s var(--ease), border-color 0.7s var(--ease), color 0.7s var(--ease); }
.hero .btn__label, .hero .btn__arrow { transition: color 0.7s var(--ease); }
.hero .btn__corner { transition: transform var(--dur-base) var(--ease), color 0.7s var(--ease); }

/* ---------- CIRCULAR 3D GALERIJA (desktop, pin-scroll) -- */
.circular-stage { display: none; }
.circular-sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; perspective: 2200px; }
.circular-ring { position: relative; width: 320px; height: 440px; transform-style: preserve-3d; will-change: transform; }
.circular-item { position: absolute; left: 50%; top: 50%; width: 320px; height: 440px; margin-left: -160px; margin-top: -220px; overflow: hidden; background: var(--clay); cursor: pointer; will-change: transform, opacity; }
.circular-item img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.7); }
.circular-hint { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); }
.circular-progress { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); width: 220px; height: 2px; background: var(--clay-border); }
.circular-progress > span { display: block; height: 100%; width: 0; background: var(--ember); }
/* Premešten na <body> (JS) — fiksiran iznad donjeg blura */
.circular-progress--fixed { position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 95; opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease); }
.circular-progress--fixed.show { opacity: 1; }
.circular-cta { position: absolute; bottom: 36px; right: var(--margin); }
/* Kad je dugme u paru sa kockicom, pozicioniranje preuzima par. */
.cta-pair > .circular-cta { position: static; bottom: auto; right: auto; }
/* Kad je premešten na <body> (JS) — fiksiran iznad donjeg blura */
.circular-cta--fixed { position: fixed; bottom: 36px; right: var(--margin); z-index: 95; opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease); }
.circular-cta--fixed.show { opacity: 1; pointer-events: auto; }
@media (min-width: 1200px) {
  .circular-stage { display: block; height: 340vh; }   /* pin dužina — skrol rotira kroz sve */
  .mosaic-fallback { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .circular-stage { display: none !important; }
  .mosaic-fallback { display: block !important; }
}

/* ---------- SCROLL-ASSEMBLE STATEMENT ------------------- */
.assemble-stage { margin-top: var(--section-gap); padding-block: clamp(24px, 4vh, 64px); overflow: clip; }
.assemble-sticky { display: grid; place-items: center; padding-inline: var(--margin); }
.assemble-text { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; text-align: center; color: var(--bone); font-size: clamp(40px, 9vw, 132px); }
.assemble-text span { display: inline-block; }
.assemble-text .sp { width: 0.28em; }
/* Assemble na naslovu (o studiju) — dva reda, isti appear efekat */
.assemble-head { font-size: clamp(20px, 6.4vw, 58px); }   /* jedan red — string je ~13em širok, mora da stane (nowrap) */
.assemble-line { display: block; white-space: nowrap; }   /* svaki red ostaje ceo (bez preloma između slova) */
[data-assemble-text] span { display: inline-block; }
/* Slova se samo upale, bez ijednog pomeranja — delay po slovu postavlja JS. */
[data-assemble].is-armed [data-assemble-text] span { opacity: 0; will-change: opacity; }
[data-assemble].is-armed.is-on [data-assemble-text] span {
  opacity: 1;
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-assemble-text] .sp { width: 0.28em; }

/* ---------- PROGRESSIVE BOTTOM BLUR (kao Taylor) -------- */
/* Svaki sloj se fejduje odozgo i OSTAJE do dna → blur raste kumulativno, bez linije/šava. */
.bottom-blur { position: fixed; left: 0; right: 0; bottom: 0; height: 180px; z-index: 90; pointer-events: none; opacity: 0; transition: opacity var(--dur-base) var(--ease); }
.bottom-blur.show { opacity: 1; }
.bottom-blur > div { position: absolute; inset: 0; }
.bottom-blur > div:nth-child(1) { backdrop-filter: blur(1px);  -webkit-backdrop-filter: blur(1px);  -webkit-mask-image: linear-gradient(to bottom, transparent 0%,  #000 22%); mask-image: linear-gradient(to bottom, transparent 0%,  #000 22%); }
.bottom-blur > div:nth-child(2) { backdrop-filter: blur(2px);  -webkit-backdrop-filter: blur(2px);  -webkit-mask-image: linear-gradient(to bottom, transparent 16%, #000 38%); mask-image: linear-gradient(to bottom, transparent 16%, #000 38%); }
.bottom-blur > div:nth-child(3) { backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px);  -webkit-mask-image: linear-gradient(to bottom, transparent 32%, #000 54%); mask-image: linear-gradient(to bottom, transparent 32%, #000 54%); }
.bottom-blur > div:nth-child(4) { backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px);  -webkit-mask-image: linear-gradient(to bottom, transparent 48%, #000 70%); mask-image: linear-gradient(to bottom, transparent 48%, #000 70%); }
.bottom-blur > div:nth-child(5) { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(to bottom, transparent 64%, #000 86%); mask-image: linear-gradient(to bottom, transparent 64%, #000 86%); }
.bottom-blur > div:nth-child(6) { backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); -webkit-mask-image: linear-gradient(to bottom, transparent 80%, #000 100%); mask-image: linear-gradient(to bottom, transparent 80%, #000 100%); }

/* ---------- ARTISTI (MEET stil — naizmenični redovi) ----- */
/* Suptilna animirana smoke pozadina (Ember dim), pinovana i diskretna */
#artisti { position: relative; isolation: isolate; }
.artisti-bgwrap { position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; pointer-events: none; }
.artisti-bg { position: sticky; top: 0; display: block; width: 100%; height: 100vh; opacity: 0.42;
  -webkit-mask-image: radial-gradient(92% 62% at 50% 50%, #000 0%, rgba(0,0,0,0.45) 55%, transparent 86%);
  mask-image: radial-gradient(92% 62% at 50% 50%, #000 0%, rgba(0,0,0,0.45) 55%, transparent 86%); }
.artist-rows { display: flex; flex-direction: column; gap: var(--section-gap); margin-top: var(--sp-8); }
.artist-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: center; }
.artist-row__media { overflow: hidden; background: var(--clay); height: clamp(400px, 56vh, 660px); }
.artist-row__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.9); transition: filter var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.artist-row:hover .artist-row__media img { filter: grayscale(0) brightness(1); transform: scale(1.03); }
.artist-row__body { text-align: left; padding-inline: var(--margin); }
.artist-row__label { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ash); display: block; margin-bottom: var(--sp-3); }
.artist-row__name { margin: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 5.2vw, 92px); line-height: 0.95; letter-spacing: -0.03em; }
.artist-row__style { display: block; margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--teal); }
.artist-row__desc { margin-top: var(--sp-4); color: var(--ash); max-width: 56ch; font-size: var(--fs-lead); line-height: 1.65; }
.artist-row__rule { height: 1px; background: rgba(220, 220, 221, 0.18); margin: var(--sp-5) 0; }
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--bone); background: var(--surface); border: 1px solid var(--clay-border); border-radius: 999px; padding: 9px 16px; }  /* lepše zaobljene pilule, kao Taylor */
.artist-row__link { position: relative; display: inline-flex; align-items: center; gap: 0.7em; margin-top: var(--sp-4); padding: 4px 0 10px; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--bone); transition: color var(--dur-base) var(--ease); }
.artist-row__link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(to right, var(--ember) 50%, rgba(220, 220, 221, 0.22) 50%); background-size: 200% 100%; background-position: 100% 0; transition: background-position var(--dur-base) var(--ease); }
.artist-row__link .artist-row__arrow { width: 1.15em; height: 1.15em; flex: 0 0 auto; transition: transform var(--dur-base) var(--ease); }
.artist-row__link:hover { color: var(--ember); }
.artist-row__link:hover::after { background-position: 0 0; }
.artist-row__link:hover .artist-row__arrow { transform: translateX(5px); }
.artist-row__link:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }

/* ---------- SCROLLER (skorašnji radovi) ------------------ */
.scroller { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2); margin-top: var(--sp-6); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.scroller__item { flex: 0 0 auto; width: 260px; aspect-ratio: 3/4; overflow: hidden; background: var(--clay); scroll-snap-align: start; cursor: pointer; }
.scroller__item img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.9); transition: filter var(--dur-base) var(--ease), transform var(--dur-slow) var(--ease); }
.scroller__item:hover img { filter: grayscale(0) brightness(1); transform: scale(1.04); }

/* ---------- MARQUEE (Ticker auto-scroll) ----------------- */
/* Fade na levoj i desnoj ivici — slike/recenzije klize glatko, ne „iskaču" */
.marquee { overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); }
.marquee .m-track { display: flex; gap: 12px; width: max-content; animation: marquee var(--marquee-dur, 45s) linear infinite; }
.marquee:hover .m-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- LENIS smooth scroll -------------------------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- PROCES (sticky slika + koraci, Taylor stil) --- */
/* Crna full-bleed pozadina — cela sekcija se izdvaja na crnom */
#proces { position: relative; isolation: isolate; padding-block: clamp(64px, 9vh, 120px); }
#proces::before { content: ""; position: absolute; z-index: -2; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; background: #000; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
/* Suptilna animirana shader pozadina (near-black, toplo siva — bez ljubičaste) */
/* Full-bleed omotač na visinu sekcije; canvas se u njemu pinuje (sticky) kao slika */
.proces-bgwrap { position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; pointer-events: none; }
.proces-bg { position: sticky; top: 0; display: block; width: 100%; height: 100vh; opacity: 0.22;
  -webkit-mask-image: radial-gradient(72% 42% at 50% 50%, #000 0%, rgba(0,0,0,0.55) 45%, transparent 78%);
  mask-image: radial-gradient(72% 42% at 50% 50%, #000 0%, rgba(0,0,0,0.55) 45%, transparent 78%); }
.process__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); margin-top: var(--sp-7); align-items: start; }
.process__media { overflow: hidden; background: var(--clay); aspect-ratio: 1/1; }
.process__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.9); transition: filter var(--dur-base) var(--ease), transform var(--dur-slow) var(--ease); }
.process__media:hover img { filter: grayscale(0) brightness(1); transform: scale(1.05); }
.steps { display: flex; flex-direction: column; gap: 0; }
.step { border-top: 1px solid var(--hair); padding: var(--sp-6) 0; }
.step:first-child { border-top: none; padding-top: 0; }
.step__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.step__num { font-family: var(--font-display); font-weight: 900; font-size: clamp(46px, 6vw, 78px); line-height: 0.9; letter-spacing: -0.03em; color: var(--ember-text); }
.step__icon { width: 38px; height: 38px; color: var(--bone); flex: none; }
.step__icon svg { width: 100%; height: 100%; display: block; }
.step__title { margin-top: var(--sp-5); font-size: clamp(28px, 4vw, 60px); line-height: 1; white-space: nowrap; }
.step__desc { margin-top: var(--sp-3); color: var(--ash); max-width: 56ch; }
.step__list { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.step__list li { position: relative; padding-left: var(--sp-3); color: var(--bone); max-width: 56ch; }
.step__list li::before { content: "—"; position: absolute; left: 0; color: var(--teal); }

/* ---------- O STUDIJU ------------------------------------ */
/* Isti razmak gore (do „/ O studiju" pill-a) i dole (od kraja teksta do sledeće sekcije) */
#o-studiju { margin-top: clamp(56px, 8vh, 104px); }
.about__body { margin: var(--sp-6) auto 0; max-width: 68ch; display: flex; flex-direction: column; gap: var(--sp-4); text-align: center; }
.about__body p { color: var(--ash); margin-inline: auto; }

/* ---------- ETHEREAL ZONA (Ovo ostaje zauvek + Recenzije + brojke) --------- */
/* Ethereal shadow pozadina — meki blob (Ember) uvijan SVG displacement filterom */
/* Cela zona je iscepana clip-path-om (kao 20/44 .torn-top): nazubljeni Ember rub
   seče DIREKTNO u susedne (soot) sekcije — nema zasebnog benda, nema crnog jaza. */
.ethereal-zone {
  position: relative; isolation: isolate;
  margin-top: clamp(56px, 8vh, 104px);
  padding-block: clamp(70px, 10vh, 120px);
  clip-path: polygon(0% 39.7px, 2.27% 34.4px, 4.55% 22.2px, 6.82% 23px, 9.09% 24.4px, 11.36% 27.9px, 13.64% 22.6px, 15.91% 11.5px, 18.18% 10.4px, 20.45% 27.7px, 22.73% 20.1px, 25% 40.9px, 27.27% 23.1px, 29.55% 26.1px, 31.82% 21.6px, 34.09% 43.1px, 36.36% 24.1px, 38.64% 28.5px, 40.91% 35.3px, 43.18% 28.8px, 45.45% 58.8px, 47.73% 28.6px, 50% 33.7px, 52.27% 20.9px, 54.55% 6.7px, 56.82% 13.3px, 59.09% 29.4px, 61.36% 26.9px, 63.64% 28.5px, 65.91% 7px, 68.18% 29.3px, 70.45% 55.5px, 72.73% 26.1px, 75% 39.7px, 77.27% 7.2px, 79.55% 35.7px, 81.82% 12.3px, 84.09% 36.9px, 86.36% 41.6px, 88.64% 43.1px, 90.91% 33.4px, 93.18% 56.7px, 95.45% 28.5px, 97.73% 12.6px, 100% 9.5px, 100% calc(100% - 9.5px), 97.73% calc(100% - 12.6px), 95.45% calc(100% - 28.5px), 93.18% calc(100% - 56.7px), 90.91% calc(100% - 33.4px), 88.64% calc(100% - 43.1px), 86.36% calc(100% - 41.6px), 84.09% calc(100% - 36.9px), 81.82% calc(100% - 12.3px), 79.55% calc(100% - 35.7px), 77.27% calc(100% - 7.2px), 75% calc(100% - 39.7px), 72.73% calc(100% - 26.1px), 70.45% calc(100% - 55.5px), 68.18% calc(100% - 29.3px), 65.91% calc(100% - 7px), 63.64% calc(100% - 28.5px), 61.36% calc(100% - 26.9px), 59.09% calc(100% - 29.4px), 56.82% calc(100% - 13.3px), 54.55% calc(100% - 6.7px), 52.27% calc(100% - 20.9px), 50% calc(100% - 33.7px), 47.73% calc(100% - 28.6px), 45.45% calc(100% - 58.8px), 43.18% calc(100% - 28.8px), 40.91% calc(100% - 35.3px), 38.64% calc(100% - 28.5px), 36.36% calc(100% - 24.1px), 34.09% calc(100% - 43.1px), 31.82% calc(100% - 21.6px), 29.55% calc(100% - 26.1px), 27.27% calc(100% - 23.1px), 25% calc(100% - 40.9px), 22.73% calc(100% - 20.1px), 20.45% calc(100% - 27.7px), 18.18% calc(100% - 10.4px), 15.91% calc(100% - 11.5px), 13.64% calc(100% - 22.6px), 11.36% calc(100% - 27.9px), 9.09% calc(100% - 24.4px), 6.82% calc(100% - 23px), 4.55% calc(100% - 22.2px), 2.27% calc(100% - 34.4px), 0% calc(100% - 39.7px));
}
.ethereal-zone > .assemble-stage { margin-top: 0; }   /* zona vodi razmak na vrhu */
.ethereal-zone > .section:last-child { margin-bottom: 0; }
.ethereal-zone + .section { margin-top: clamp(28px, 4vh, 60px); }   /* mali razmak do FAQ (bez velikog crnog jaza) */
.reviews-bg { position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; overflow: hidden; pointer-events: none; opacity: 0.85; }
/* Jaka Ember baza preko cele zone + puno crveno uz same ivice — torn uvek seče u svetlo
   crveno (nema tamne trake / crnog jaza između torn-a i oblaka), bez obzira na hue oblaka */
.reviews-bg::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0;
  background:
    linear-gradient(to bottom, rgba(237,28,29,0.92) 0, rgba(237,28,29,0.5) 140px, rgba(237,28,29,0.22) 340px),
    linear-gradient(to top, rgba(237,28,29,0.92) 0, rgba(237,28,29,0.5) 140px, rgba(237,28,29,0.22) 340px);
}
.reviews-bg__svg { position: absolute; width: 0; height: 0; }
/* Original: puna boja maskirana „oblak" maskom + displacement undulacija */
.reviews-bg__inner { position: absolute; inset: -90px; filter: url(#ethereal-shadow) blur(4px); }
.reviews-bg__shape {
  width: 100%; height: 100%;
  background-color: var(--ember);
  -webkit-mask: url('assets/ethereal-mask.png') center / cover no-repeat;
  mask: url('assets/ethereal-mask.png') center / cover no-repeat;
}
.reviews-bg__noise {
  position: absolute; inset: 0;
  background-image: url('assets/ethereal-noise.png');
  background-size: 220px; background-repeat: repeat;
  opacity: 0.16;
}
@media (prefers-reduced-motion: reduce) { .reviews-bg__inner { filter: blur(8px); } }
/* TABLET (iPad): WebKit veliku filtrovanu povrsinu secka na plocice, pa se
   displacement ne poklapa preko sava — pozadina ispadne podeljena na kvadrante
   sa crnim mrljama. Telefon taj filter vec preskace (perf), pa isto radimo i
   ovde: svaki touch uredjaj iznad telefona dobija cist blur, bez displacementa.
   Komp (pointer: fine) ostaje netaknut. */
@media (pointer: coarse) and (min-width: 712px) {
  .reviews-bg__inner { filter: blur(10px) !important; }
  .auth-card__ether-shape { filter: blur(8px) !important; }
}
.reviews__top { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); margin-top: var(--sp-6); align-items: center; position: relative; }
.reviews__media { overflow: hidden; background: var(--clay); aspect-ratio: 16/10; }
.reviews__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.85); transition: filter var(--dur-base) var(--ease), transform var(--dur-slow) var(--ease); }
.reviews__media:hover img { filter: grayscale(0) brightness(1); transform: scale(1.05); }
.reviews__intro { text-align: left; }
.reviews__intro h2 { margin: 0 0 var(--sp-3); }
.review-row { display: flex; gap: 12px; overflow-x: auto; margin-top: var(--sp-6); padding-bottom: var(--sp-2); scrollbar-width: none; }
.review-row::-webkit-scrollbar { display: none; }
.review { flex: 0 0 auto; width: 340px; background: var(--surface); border: 1px solid var(--hair); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.review__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.review__who { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-small); }
.review__stars { color: var(--teal); letter-spacing: 2px; font-size: var(--fs-small); margin-top: 2px; }
.review__g { width: 22px; height: 22px; flex: none; border: 1px solid var(--clay-border); border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--ash); }
.review__text { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; color: var(--bone); }

/* ---------- STATS ---------------------------------------- */
.stats { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); text-align: center; margin-top: var(--sp-2); }
.stat__num { font-family: var(--font-display); font-weight: 900; font-size: clamp(56px, 8vw, 110px); line-height: 1; letter-spacing: -0.03em; }
.stat__label { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ash); }

/* ---------- FAQ ------------------------------------------ */
.faq { margin-top: var(--sp-7); max-width: none; counter-reset: faq; }
.acc { border-top: 1px solid var(--hair); }
.acc:last-child { border-bottom: 1px solid var(--hair); }
.acc__trigger { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: clamp(20px, 3vw, 64px); text-align: left; padding: var(--sp-5) 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.15; font-size: clamp(18px, 2.2vw, 26px); color: var(--bone); }
.acc__trigger::before { counter-increment: faq; content: counter(faq, decimal-leading-zero); font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-small); letter-spacing: 0.1em; color: var(--ember-text); align-self: center; }
.acc__icon { flex-shrink: 0; width: 24px; height: 24px; position: relative; transition: transform var(--dur-base) var(--ease); }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--ash); transform: translate(-50%,-50%); }
.acc__icon::before { width: 16px; height: 2px; }
.acc__icon::after { width: 2px; height: 16px; }
.acc__trigger[aria-expanded="true"] .acc__icon { transform: rotate(45deg); }
.acc__panel { max-height: 0; overflow: hidden; transition: max-height var(--dur-base) var(--ease); }
.acc__panel-inner { padding-bottom: var(--sp-4); }
.acc__panel-inner p { color: var(--ash); }

/* ---------- KONTAKT -------------------------------------- */
.contact__grid { margin-top: var(--sp-7); display: grid; grid-template-columns: 1fr; gap: var(--sp-7); text-align: left; }
.field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.field label { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ash); }
.field input, .field textarea, .field select { background: var(--surface); border: 1px solid var(--clay-border); border-radius: var(--radius); padding: 13px var(--sp-2); color: var(--bone); font-size: var(--fs-body); transition: border-color var(--dur-fast) var(--ease); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ash); }
.field.error input, .field.error textarea, .field.error select { border-color: var(--ember); }
.field__error { font-size: var(--fs-small); color: var(--ember-text); min-height: 0; }
.form__success { font-size: var(--fs-h3); font-weight: 500; color: var(--bone); padding: var(--sp-6) 0; }
.contact__info { display: flex; flex-direction: column; gap: var(--sp-4); }
.contact__info h3 { margin-bottom: var(--sp-1); }
.contact__info a { color: var(--bone); transition: color var(--dur-fast) var(--ease); }
.contact__info a:hover { color: var(--ash); }
/* ---------- LOKACIJA (expand mapa) ---------------------- */
.lmap { position: relative; perspective: 1000px; cursor: pointer; user-select: none; margin-top: var(--sp-5); }
.lmap__card {
  position: relative; overflow: hidden; height: 150px;
  background: var(--surface); border: 1px solid var(--hair);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: height var(--dur-slow) var(--ease), transform var(--dur-base) var(--ease);
}
.lmap.is-open .lmap__card { height: 300px; }
/* mreža (skupljeno) */
.lmap__grid { position: absolute; inset: 0; opacity: 0.05; transition: opacity var(--dur-base) var(--ease);
  background-image: linear-gradient(var(--bone) 1px, transparent 1px), linear-gradient(90deg, var(--bone) 1px, transparent 1px);
  background-size: 20px 20px; }
.lmap.is-open .lmap__grid { opacity: 0; }
/* scena (prošireno) */
.lmap__scene { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: var(--clay); transition: opacity var(--dur-base) var(--ease); }
.lmap.is-open .lmap__scene { opacity: 1; }
.lmap__roads { position: absolute; inset: 0; width: 100%; height: 100%; }
.lmap__roads line { stroke: var(--bone); stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 0.8s var(--ease); }
.lmap.is-open .lmap__roads line { stroke-dashoffset: 0; }
.rd--main { stroke-opacity: 0.25; stroke-width: 4; }
.rd--v { stroke-opacity: 0.2; stroke-width: 3; transition-delay: 0.12s; }
.rd--s { stroke-opacity: 0.1; stroke-width: 1.5; transition-delay: 0.2s; }
/* zgrade */
.lmap__bld { position: absolute; background: rgba(150,135,126,0.28); border: 1px solid rgba(150,135,126,0.18);
  opacity: 0; transform: scale(0.8); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.lmap.is-open .lmap__bld { opacity: 1; transform: scale(1); }
.lmap.is-open .lmap__bld:nth-of-type(2) { transition-delay: 0.08s; }
.lmap.is-open .lmap__bld:nth-of-type(3) { transition-delay: 0.14s; }
.lmap.is-open .lmap__bld:nth-of-type(4) { transition-delay: 0.06s; }
.lmap.is-open .lmap__bld:nth-of-type(5) { transition-delay: 0.12s; }
.lmap.is-open .lmap__bld:nth-of-type(6) { transition-delay: 0.18s; }
/* pin */
.lmap__pin { position: absolute; top: 50%; left: 50%; display: block;
  transform: translate(-50%, -60%) scale(0); filter: drop-shadow(0 0 10px rgba(237,28,29,0.55));
  transition: transform 0.5s var(--ease) 0.22s; }
.lmap.is-open .lmap__pin { transform: translate(-50%, -50%) scale(1); }
.lmap__fade { position: absolute; inset: 0; background: linear-gradient(to top, var(--soot), transparent 60%); opacity: 0.6; }
/* sadržaj */
.lmap__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: var(--sp-3); }
.lmap__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.lmap__icon { width: 18px; height: 18px; color: var(--ember-text); transition: opacity var(--dur-base) var(--ease); }
.lmap.is-open .lmap__icon { opacity: 0; }
.lmap__live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--clay-border); border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ash); }
.lmap__live i { width: 5px; height: 5px; border-radius: 50%; background: var(--ember); }
.lmap__loc { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small);
  text-transform: none; letter-spacing: 0; color: var(--bone); transition: transform var(--dur-base) var(--ease); }
.lmap:hover .lmap__loc { transform: translateX(4px); }
.lmap__coords { margin: 0; font-family: var(--font-mono); font-size: 11px; color: var(--ash);
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), margin var(--dur-base) var(--ease); }
.lmap.is-open .lmap__coords { max-height: 20px; opacity: 1; margin-top: 4px; }
.lmap__rule { height: 1px; margin-top: var(--sp-2); background: linear-gradient(90deg, rgba(237,28,29,0.5), rgba(237,28,29,0.2), transparent);
  transform: scaleX(0.3); transform-origin: 0 50%; transition: transform 0.4s var(--ease); }
.lmap:hover .lmap__rule, .lmap.is-open .lmap__rule { transform: scaleX(1); }
.lmap__hint { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; color: var(--ash); opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.lmap:hover .lmap__hint { opacity: 1; }
.lmap.is-open .lmap__hint { opacity: 0; }
.lmap__dir { display: inline-block; margin-top: var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--bone); border-bottom: 1px solid var(--clay-border); padding-bottom: 3px; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.lmap__dir:hover { color: var(--ember); border-color: var(--ember); }

/* ---------- GLASS AUTH KARTICA (kontakt forma) ---------- */
.auth-wrap { perspective: 1500px; }
.auth-card {
  position: relative;
  max-width: 640px;
  width: 100%;
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform var(--dur-base) var(--ease);
  will-change: transform;
}
/* Putujući svetlosni zraci po ivici */
.auth-card__beams { position: absolute; inset: -1px; overflow: hidden; pointer-events: none; z-index: 3; }
.beam { position: absolute; opacity: 0.65; filter: blur(1px); }
.beam--t { top: 0; left: -50%; height: 2px; width: 50%; background: linear-gradient(90deg, transparent, var(--bone), transparent); animation: beamT 3.6s var(--ease) infinite; }
.beam--r { top: -50%; right: 0; width: 2px; height: 50%; background: linear-gradient(180deg, transparent, var(--bone), transparent); animation: beamR 3.6s var(--ease) infinite; animation-delay: 0.9s; }
.beam--b { bottom: 0; right: -50%; height: 2px; width: 50%; background: linear-gradient(90deg, transparent, var(--bone), transparent); animation: beamB 3.6s var(--ease) infinite; animation-delay: 1.8s; }
.beam--l { bottom: -50%; left: 0; width: 2px; height: 50%; background: linear-gradient(180deg, transparent, var(--bone), transparent); animation: beamL 3.6s var(--ease) infinite; animation-delay: 2.7s; }
@keyframes beamT { 0% { left: -50%; } 100% { left: 100%; } }
@keyframes beamR { 0% { top: -50%; } 100% { top: 100%; } }
@keyframes beamB { 0% { right: -50%; } 100% { right: 100%; } }
@keyframes beamL { 0% { bottom: -50%; } 100% { bottom: 100%; } }
.dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--bone); filter: blur(1px); opacity: 0.4; animation: dotPulse 2.3s var(--ease) infinite; }
.dot--tr { background: var(--ember); }
.dot--tl { top: -2px; left: -2px; }
.dot--tr { top: -2px; right: -2px; animation-delay: 0.5s; }
.dot--br { bottom: -2px; right: -2px; animation-delay: 1s; }
.dot--bl { bottom: -2px; left: -2px; animation-delay: 1.5s; }
@keyframes dotPulse { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.5; } }
/* Staklo */
.auth-card__inner {
  position: relative; z-index: 2;
  background: rgba(20, 16, 16, 0.55);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: var(--sp-5);
  overflow: hidden;
}
.auth-card__inner::before {
  content: ""; position: absolute; inset: 0; opacity: 0.04; pointer-events: none;
  background-image: linear-gradient(135deg, var(--bone) 0.5px, transparent 0.5px), linear-gradient(45deg, var(--bone) 0.5px, transparent 0.5px);
  background-size: 30px 30px;
}
/* Ethereal shadow pozadina forme (kao „Ovo ostaje zauvek") — iza sadržaja, iznad staklene osnove */
.auth-card__ether { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; border-radius: var(--radius); }
.auth-card__ether-shape {
  position: absolute; inset: -40px; background-color: var(--ember);
  -webkit-mask: url('assets/ethereal-mask.png') center / cover no-repeat;
  mask: url('assets/ethereal-mask.png') center / cover no-repeat;
  filter: url(#ethereal-shadow) blur(4px); opacity: 0.5;
}
.auth-card__head { text-align: center; margin-bottom: var(--sp-5); position: relative; }
.auth-card__logo { width: 44px; height: 44px; margin: 0 auto var(--sp-3); border: 1px solid var(--hair); display: grid; place-items: center; }
.auth-card__logo img { width: 24px; height: 24px; }
.auth-card__title { margin: 0; font-size: var(--fs-h3); }
.contact__note { margin-top: var(--sp-3); text-align: center; font-size: var(--fs-small); line-height: 1.7; }
.auth-card__sub { margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--ash); max-width: none; }
/* Polja sa ikonicom */
.field--auth { position: relative; display: block; margin-bottom: var(--sp-3); }
.field--auth .field__icon { position: absolute; left: 12px; top: 13px; width: 16px; height: 16px; color: var(--ash); pointer-events: none; transition: color var(--dur-fast) var(--ease); z-index: 1; }
.field--auth:focus-within .field__icon { color: var(--bone); }
.field--auth input, .field--auth textarea, .field--auth select {
  width: 100%;
  background: rgba(220, 220, 221, 0.04);
  border: 1px solid var(--clay-border);
  border-radius: var(--radius);
  color: var(--bone); font-size: var(--fs-body);
  padding: 12px 14px 12px 38px;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.field--auth textarea { min-height: 96px; resize: vertical; padding-top: 12px; }
.field--auth input:focus, .field--auth textarea:focus, .field--auth select:focus { outline: none; border-color: var(--ash); background: rgba(220, 220, 221, 0.07); }
.field--auth.error input, .field--auth.error textarea, .field--auth.error select { border-color: var(--ember); }
.field--auth .field__error { display: block; margin-top: 4px; font-size: var(--fs-small); color: var(--ember-text); }
.auth-row2 { display: grid; grid-template-columns: 1fr; gap: 0 var(--sp-3); }
@media (min-width: 600px) { .auth-row2 { grid-template-columns: 1fr 1fr; } }
.auth-card__submit { width: 100%; margin-top: var(--sp-2); position: relative; overflow: hidden; }
.auth-card__submit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(220,220,221,0.35), transparent); transform: translateX(-100%); }
.auth-card[data-loading="1"] .auth-card__submit::after { animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---------- FOOTER --------------------------------------- */
.footer { margin-top: var(--sp-6); overflow: hidden; padding-top: var(--sp-4); padding-bottom: var(--sp-5); }
.footer__cols { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--hair); }
.footer__col h2 { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 400; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ash); margin-bottom: var(--sp-3); }
.footer__col a, .footer__col p, .footer__col li { color: var(--bone); }
.footer__col a { transition: color var(--dur-fast) var(--ease); }
.footer__col a:hover { color: var(--ash); }
.footer__col li + li { margin-top: var(--sp-1); }
/* Studio Instagram — ikonica */
.footer__socials { display: flex; gap: var(--sp-2); }
.footer__socials li + li { margin-top: 0; }
.social-icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--clay-border); color: var(--bone);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.social-icon:hover { color: var(--ember); border-color: var(--ember); }
.social-icon svg { width: 20px; height: 20px; display: block; }
/* Wordmark blok: ogroman ghost RANDOM iza + manji sa slikom, iste donje ivice */
.footer__wordmark { position: relative; margin-top: var(--sp-7); display: flex; justify-content: center; }
/* Ogroman RANDOM koji se skoro stapa sa pozadinom (iza svega), deli donju ivicu */
.footer__ghost {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  z-index: -1; pointer-events: none;
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(140px, 27vw, 520px); line-height: 0.8; letter-spacing: -0.05em;
  white-space: nowrap; color: #0E0E0E;
}
/* Giant RANDOM: bela slova, a B&W slika samo kao mali prozor u sredini teksta */
.footer__brand {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(64px, 20vw, 300px); line-height: 0.8;
  text-transform: uppercase; letter-spacing: -0.04em;
  white-space: nowrap; text-align: center;
  background-image:
    url('assets/footer-fill4.png'),
    url('assets/footer-fill5.png'),
    url('assets/footer-fill3.png'),
    url('assets/footer-fill2.png'),
    url('assets/footer-fill.png'),
    linear-gradient(var(--bone), var(--bone));
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 103% center, 71% center, 0% center, 29% center, center, center;   /* slika4=M, slika5=O (simetrično A), slika3=R, slika2=A, slika=sredina */
  background-size: auto 100%, auto 100%, auto 100%, auto 100%, auto 100%, 100% 100%;   /* sve pune visine slova + bela ispuna */
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: grayscale(1) contrast(1.03);
}
.br-m { display: none; }   /* prelomi reda samo na telefonu (footer slogan) */
.footer__slogan {
  margin: 0 auto var(--sp-6);
  max-width: none;   /* gazi globalno p { max-width: 62ch } — inace se p skupi na sirinu teksta i centriranje se ne vidi */
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; text-align: center; white-space: nowrap;
  /* Fluidno: mora da stane u jedan red — tekst je ~44em pri ovoj tezini */
  font-size: clamp(14px, 1.9vw, 30px); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--bone);
}
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ash); }
.footer__bottom a { color: var(--ash); }
.footer__bottom a:hover { color: var(--bone); }

/* ---------- LIGHTBOX ------------------------------------- */
.lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); background: rgba(0,0,0,0.97); display: none; align-items: center; justify-content: center; padding: var(--margin); }
.lightbox.open { display: flex; }
.lightbox__img { max-width: 90vw; max-height: 90vh; width: auto; height: auto; }
.lightbox__close { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 48px; height: 48px; font-size: 28px; color: var(--bone); line-height: 1; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 32px; color: var(--bone); display: flex; align-items: center; justify-content: center; }
.lightbox__nav:hover { color: var(--ash); }
.lightbox__prev { left: var(--sp-2); }
.lightbox__next { right: var(--sp-2); }

/* ---------- ARTIST PAGE ---------------------------------- */
.artist-hero { position: relative; isolation: isolate; padding-top: calc(76px + var(--section-gap)); padding-bottom: var(--sp-6); text-align: center; overflow: hidden; }
.artist-hero .aura { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }
.artist-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(0,0,0,0.55) 100%),
              linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 70%, var(--soot) 100%); }
.artist-hero__inner { position: relative; z-index: 2; }
.artist-hero .status { margin-bottom: var(--sp-4); }
.artist-hero__meta { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.16em; color: var(--bone); margin: var(--sp-3) auto 0; text-align: center; }
.artist-hero__lead { margin: var(--sp-4) auto 0; color: var(--ash); }
.artist-hero__desc { margin: var(--sp-2) auto 0; color: var(--ash); max-width: 62ch; }
.artist-hero__actions { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.artist-portrait { margin-top: var(--sp-7); overflow: hidden; background: var(--clay); max-width: 760px; margin-inline: auto; }
.artist-portrait img { width: 100%; height: auto; filter: grayscale(1) brightness(0.9); }
.gallery-full { margin-top: var(--sp-6); }
/* Artist: radovi (slike) dolaze ODMAH posle hero-a — bez naslova, bez razmaka/sive trake */
.artist-hero + #portfolio { margin-top: 0; padding-top: var(--sp-3); padding-bottom: var(--sp-8); background: var(--soot); position: relative; z-index: 1; }

/* ---------- FRAME KORNERI (istaknute slike) ------------- */
/* Suptilan okvir + „+" markeri u uglovima. Bez galerije i carousela. */
.artist-row__media,
.process__media,
.reviews__media,
.artist-portrait { position: relative; border: 1px solid rgba(220, 220, 221, 0.16); }
.artist-row__media::after,
.process__media::after,
.reviews__media::after,
.artist-portrait::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCDCDD' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCDCDD' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCDCDD' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCDCDD' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 8px top 8px, right 8px top 8px, left 8px bottom 8px, right 8px bottom 8px;
  background-size: 14px 14px;
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.55));
  opacity: 0.9;
}

/* ---------- UTILITIES ------------------------------------ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.no-scroll { overflow: hidden; }
.text-ash { color: var(--ash); }
/* SEO: <address> ne sme biti italic (default); footer NAP linija — NOVI elementi, ne diraju postojeci dizajn */
address { font-style: normal; }
.footer__nap { margin-top: var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ash); }
.footer__nap a { color: var(--ash); transition: color var(--dur-fast) var(--ease); }
.footer__nap a:hover { color: var(--bone); }

/* =========================================================
   MEDIA QUERIES
   ========================================================= */
/* tablet (Taylor breakpoint) */
@media (min-width: 712px) {
  :root { --margin: 32px; }
  .nav__links { display: flex; gap: var(--sp-4); align-items: center; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .reviews__top { grid-template-columns: 1fr 1fr; }
  .footer__cols { grid-template-columns: repeat(3, 1fr); }
  .contact__grid { grid-template-columns: 7fr 5fr; }
  /* MEET redovi: 2 kolone, slika bliže ivici ekrana */
  .artist-row { grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: stretch; }
  .artist-row__body { align-self: center; padding-left: max(var(--margin), calc((100vw - 1480px) / 2)); padding-right: 0; }
  .artist-row__media { margin-right: 24px; }
  .artist-row--reverse .artist-row__media { order: -1; margin-right: 0; margin-left: 24px; }
  .artist-row--reverse .artist-row__body { padding-left: 0; padding-right: max(var(--margin), calc((100vw - 1480px) / 2)); }
  /* Proces: slika levo (sticky) + koraci desno */
  .process__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .process__media { position: sticky; top: 100px; }
}

/* desktop (Taylor breakpoint) */
@media (min-width: 1200px) {
  :root { --margin: 40px; }
  .masonry { column-count: 3; }              /* galerija = 3 kolone, kao Taylor */
}

/* ---------- TELEFON (mobile) ---------------------------- */
@media (max-width: 711px) {
  /* Footer slogan: 4 eksplicitna reda preko .br-m (Studio / Beograd / na kozi / za tebe) */
  .footer__slogan {
    white-space: normal; text-wrap: normal;
    font-size: clamp(18px, 6vw, 26px); line-height: 1.3;
    max-width: none; margin-bottom: var(--sp-5);
  }
  .footer__slogan .br-m { display: inline; }

  /* Hero: svaka fraza u svom redu (Tri umetnika. / Tri stila. / Jedan standard.) */
  .hero__title { font-size: clamp(30px, 9.2vw, 54px); }
  .hero__title > span { white-space: nowrap; }
  /* Telefon: svoja (uspravna) hero fotka + scroll umesto fixed (fixed je nepouzdan na telefonu) */
  .hero::before {
    background-image:
      linear-gradient(to bottom, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.44) 9%, rgba(0,0,0,0.24) 20%, rgba(0,0,0,0.24) 60%, rgba(0,0,0,0.55) 86%, var(--soot) 100%),
      url('assets/hero-collage.jpg');
    background-attachment: scroll, scroll;
  }

  /* Galerija: 2 kolone, ime umetnika uvek vidljivo (nema hover na telefonu) */
  .gallery-hero { min-height: 100svh; background-attachment: scroll, scroll; }  /* fixed nepouzdan na telefonu */
  /* Blog hero na telefonu: uspravna verzija iste fotke (IMG_0575) */
  .gallery-hero--blog {
    background-image:
      linear-gradient(to bottom, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.40) 40%, rgba(0,0,0,0.66) 82%, var(--soot) 100%),
      url('assets/blog-hero-mobile.jpg?v=20260828');
  }
  /* Kontakt hero na telefonu: svoja uspravna fotka (IMG_0595) */
  .gallery-hero--kontakt {
    background-image:
      linear-gradient(to bottom, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.40) 40%, rgba(0,0,0,0.66) 82%, var(--soot) 100%),
      url('assets/kontakt-hero-mobile.jpg?v=20260828');
  }
  .tile { flex: 0 0 50%; max-width: 50%; }
  .tile::before { opacity: 1; height: 34%; }
  .master-name-overlay { opacity: 1; bottom: 12px; }
  .gallery-more { min-width: 100%; }

  /* Telefon: dah ispod svakog CTA dugmeta na dnu sekcije (ne lepi se za sledeću) */
  .gallery-cta { margin-top: var(--sp-5); padding-bottom: var(--sp-4); }
  /* Pocetna Radovi: veci razmak od "Cela galerija" dugmeta do kraja sekcije */
  #galerija .gallery-cta { padding-bottom: var(--sp-7); }

  /* Pocetna hero: dva dugmeta iste velicine (puna sirina, naslagana) */
  .hero .btn-row.center { width: 100%; flex-direction: column; align-items: stretch; }
  .hero .btn-row.center .btn { width: 100%; }

  /* Pocetna Umetnici: manji razmak od lead teksta do prvih (Lemson) slika */
  #artisti .artist-rows { margin-top: var(--sp-5); }

  /* Pocetna "Sta kazu ljudi": dva dugmeta full-bleed, iste velicine */
  #recenzije .reviews__intro > .btn-row { flex-direction: column; align-items: stretch; width: 100%; }
  #recenzije .reviews__intro > .btn-row .btn { width: 100%; }

  /* Artisti: prvo slika, pa ime i tekst */
  .artist-row__media,
  .artist-row--reverse .artist-row__media { order: -1; margin: 0 0 var(--sp-4) 0; height: clamp(360px, 60vh, 560px); }

  /* Proces: bez slike; niti (shader) OSTAJU, vidljivije i veće, pinovano-centrirano */
  .process__media { display: none; }
  .proces-bg { opacity: 0.6;
    -webkit-mask-image: radial-gradient(130% 78% at 50% 50%, #000 0%, rgba(0,0,0,0.6) 55%, transparent 96%);
    mask-image: radial-gradient(130% 78% at 50% 50%, #000 0%, rgba(0,0,0,0.6) 55%, transparent 96%); }

  /* Recenzije redosled: tekst → recenzije → slika → dugmad; pill ne stretch, tešnji razmaci */
  #recenzije { display: flex; flex-direction: column; gap: 0; align-items: flex-start; }
  .reviews__top, .reviews__intro { display: contents; }
  .reviews__intro > .label { order: 1; margin: 0 0 var(--sp-3) 0; }
  .reviews__intro > h2 { order: 1; margin: 0; }
  .reviews__intro > .lead { order: 1; margin: var(--sp-2) 0 0 0; }
  #recenzije .review-row { order: 2; width: 100%; margin-top: var(--sp-5); }
  .reviews__media { order: 3; width: 100%; margin-top: var(--sp-4); }
  .reviews__intro > .btn-row { order: 4; margin: var(--sp-4) 0 0 0 !important; }

  /* Glatka scroll-saturacija (JS postavlja filter) */
  .work img, .artist-row__media img, .reviews__media img, .scroller__item img, .artist-portrait img { transition: filter 0.18s linear; }

  /* ===== PERF: olakšavanje telefona ===== */
  /* Artisti smoke — potpuno isključen */
  .artisti-bgwrap { display: none; }
  /* Reviews + forma ethereal — statična pozadina (bez skupog SVG displacement filtera) */
  .reviews-bg__inner { filter: blur(9px) !important; }
  .auth-card__ether-shape { filter: blur(7px) !important; }
  /* Bez backdrop-filter blura (staklo) — skup na telefonu */
  .nav.scrolled, .btn-secondary, .status, .label, .auth-card__inner, .auth-card__inner .field--auth input,
  .auth-card__inner .field--auth textarea, .auth-card__inner .field--auth select {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  /* Donji progresivni blur (6 backdrop slojeva) → jeftin gradijent */
  .bottom-blur { height: 130px; }
  .bottom-blur > div { display: none !important; }
  .bottom-blur.show { background: linear-gradient(to top, var(--soot) 0%, rgba(0,0,0,0.7) 45%, transparent 100%); }
  /* Footer: 1 slika umesto 5 (lakši paint) */
  .footer__brand {
    background-image: url('assets/footer-fill.png'), linear-gradient(var(--bone), var(--bone));
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: auto 100%, 100% 100%;
  }
}

/* ---------- REDUCED MOTION ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- IZBOR UMETNIKA PRI ZAKAZIVANJU --------------- */
/* display:flex ispod je jace od podrazumevanog pravila za [hidden], pa bi prozor
   ostao na ekranu i hvatao klikove i posle zatvaranja. Ovo pravilo mora da ostane. */
.calpick[hidden] { display: none !important; }
.calpick {
  position: fixed; inset: 0; z-index: var(--z-lightbox);
  /* flex + safe center: kad je kartica visa od ekrana, ne odsece joj se vrh
     (sa grid centriranjem X gore desno zavrsi iznad vidljivog dela i ne moze da se klikne) */
  display: flex; justify-content: center; align-items: center; align-items: safe center;
  overflow-y: auto; overscroll-behavior: contain;
  padding: max(16px, 4vh) var(--margin);
  background: rgba(0,0,0,0.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: calpickIn var(--dur-fast) var(--ease);
}
@keyframes calpickIn { from { opacity: 0; } to { opacity: 1; } }
body.calpick-open { overflow: hidden; }
.calpick__card {
  position: relative;
  flex: 0 0 auto;
  width: min(760px, 100%);
  padding: clamp(28px, 5vw, 56px);
  background: var(--surface);
  border: 1px solid var(--clay-border);
  border-radius: 0;                      /* sharp brend */
}
.calpick__label { margin-bottom: var(--sp-3); }
.calpick__title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(26px, 4vw, 42px); line-height: 1.02; letter-spacing: -0.02em;
  color: var(--bone); margin: 0 0 var(--sp-2);
}
.calpick__lead { color: var(--ash); font-size: var(--fs-small); line-height: 1.7; margin: 0 0 var(--sp-5); max-width: 46ch; }
.calpick__row { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
@media (min-width: 640px) { .calpick__row { grid-template-columns: repeat(3, 1fr); } }
.calpick__artist {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + 2px);
  background: transparent; color: var(--bone);
  border: 1px solid var(--clay-border); border-radius: 0;
  cursor: pointer; text-align: left;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.calpick__artist:hover, .calpick__artist:focus-visible {
  border-color: var(--ember); background: rgba(237,28,29,0.06); transform: translateY(-2px);
}
.calpick__name {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: 20px; letter-spacing: -0.01em;
}
.calpick__style {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--teal);
}
.calpick__close {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: grid; place-items: center;
  width: 48px; height: 48px; line-height: 1;
  font-size: 30px; color: var(--bone);
  background: rgba(220,220,221,0.06);
  border: 1px solid var(--clay-border); border-radius: 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.calpick__close:hover, .calpick__close:focus-visible {
  color: var(--bone); background: var(--ember); border-color: var(--ember);
}
.calpick__cancel {
  display: block; margin: var(--sp-4) auto 0; padding: 10px 18px;
  background: transparent; border: 1px solid var(--clay-border); border-radius: 0;
  font-family: var(--font-mono); font-size: var(--fs-small);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ash);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.calpick__cancel:hover, .calpick__cancel:focus-visible { color: var(--bone); border-color: var(--ash); }
/* Naslov ne sme da zalazi pod dugme za zatvaranje */
.calpick__head { padding-right: 56px; }
@media (prefers-reduced-motion: reduce) {
  .calpick { animation: none; }
  .calpick__artist:hover, .calpick__artist:focus-visible { transform: none; }
}

/* ---------- WIZARD FORMA --------------------------------- */
/* Vizuelno se ne razlikuje od dosadasnje forme: iste povrsine, iste ivice,
   isti radius, isti prelazi. Menja se samo to sto se pitanja smenjuju. */
.wiz { display: block; }
.wiz__progress { display: flex; gap: 6px; margin-bottom: var(--sp-4); }
.wiz__dot {
  flex: 1 1 0; height: 2px; background: var(--clay-border);
  transition: background var(--dur-base) var(--ease);
}
.wiz__dot.is-active { background: var(--ember); }

.wiz__step { display: none; }
.wiz__step.is-active { display: block; animation: wizIn var(--dur-base) var(--ease); }
@keyframes wizIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.wiz__q {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--teal);
}
.wiz__choices { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }

.wiz__choice {
  /* iste vrednosti kao .field--auth input */
  width: 100%; text-align: left;
  background: rgba(220, 220, 221, 0.04);
  border: 1px solid var(--clay-border);
  border-radius: var(--radius);
  color: var(--bone); font-family: var(--font-body); font-size: var(--fs-body);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.wiz__choice:hover, .wiz__choice:focus-visible {
  border-color: var(--ash); background: rgba(220, 220, 221, 0.07); outline: none;
}
/* "ulubljenje" na pritisak */
.wiz__choice:active { transform: scale(0.985); }
.wiz__choice.is-picked { border-color: var(--ember); background: rgba(237, 28, 29, 0.08); }

.wiz__back {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--sp-3); padding: 8px 0;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-small);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ash);
  transition: color var(--dur-fast) var(--ease);
}
.wiz__back:hover { color: var(--bone); }
.wiz__back[hidden] { display: none; }

/* Poruka posle slanja: ista kartica, samo drugi sadrzaj */
.form__success { display: block; }
.form__success .auth-card__submit { margin-top: var(--sp-3); }

@media (prefers-reduced-motion: reduce) {
  .wiz__step.is-active { animation: none; }
  .wiz__choice:active { transform: none; }
}

/* CMS:IMAGES — build ovde upisuje slike iz Sanityja (hero i sl.) */