/* Varijanta 2: kao stari sajt (crno, roze, Sora i Barlow), moderniji raspored, bez skrol videa. */
:root {
  --dubina: #050406;
  --mastilo: #0b0a0e;
  --povrsina: #121016;
  --tekst: #ffffff;
  --prigusen: #c9c3d1;
  --ljub: #ed9bff;
  --ljub-tamna: #d77df0;
  --linija: rgba(255, 255, 255, .1);
  --m-karta: #0f0d13;
  --font-naslov: Sora, "Segoe UI", Arial, sans-serif;
  --font-tekst: Barlow, "Segoe UI", Arial, sans-serif;
  color-scheme: dark;
}
html { scroll-behavior: auto; }
body { font-weight: 500; }
body::after { display: none; }
h1, h2, h3 { letter-spacing: -0.03em; }
::selection { color: #000; }

.zaglavlje, .ima-js .zaglavlje.zaglavlje--pun { background: rgba(5, 4, 6, .86); border-bottom: 1px solid var(--linija); backdrop-filter: blur(12px); }
.dugme, .navigacija .dugme { color: #000; background: var(--ljub); }
.dugme:hover { background: #f4c2ff; box-shadow: 0 10px 30px rgba(237, 155, 255, .25); }
.dugme--tiv { color: #fff; background: transparent; }
.dugme--tiv:hover { background: rgba(255, 255, 255, .06); }
.vodilica, .napredak { display: none !important; }
.zaglavlje-sekcije::before, .podnozje::before { display: none; }
.kicker, .nadnaslov { color: var(--ljub); }
.mreze-linkovi a { background: var(--m-karta); border-color: rgba(237, 155, 255, .4); }
.mreze-linkovi a:hover { background: var(--ljub); color: #000; }
.podnozje { background: #000; }

.m-oznaka { color: var(--ljub); letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; font-weight: 600; margin-bottom: .8rem; }
.m-odeljak { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.m-odeljak h2, .m-poziv h2 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); max-width: 22ch; line-height: 1.05; }
.m-odeljak--siva { background: var(--povrsina); }
.m-odeljak--tamno { background: #000; }
.m-odeljak p { color: var(--prigusen); }

.m-hero { position: relative; padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); overflow: clip; isolation: isolate; }
.m-hero::before { content: ""; position: absolute; inset: -30% -10% auto; height: 120%; z-index: -1; background: radial-gradient(36rem 26rem at 78% 40%, rgba(237, 155, 255, .18), transparent 70%), radial-gradient(30rem 22rem at 10% 70%, rgba(106, 70, 240, .16), transparent 70%); }
.m-hero__mreza { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.m-hero h1 { font-size: clamp(3rem, 6.4vw, 5.6rem); letter-spacing: -0.045em; line-height: .95; }
.m-hero h1 span { color: var(--ljub); }
.m-hero__pod { margin-top: 1.1rem; font-size: 1.35rem; color: var(--prigusen); }
.m-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, minmax(7.5rem, 1fr)); gap: .75rem; }
.m-bento__polje { position: relative; overflow: hidden; border-radius: 20px; background: var(--m-karta); border: 1px solid var(--linija); text-decoration: none; color: #fff; }
.m-bento__polje img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
a.m-bento__polje:hover img { transform: scale(1.04); }
.m-bento__polje span { position: absolute; left: .9rem; bottom: .8rem; font-family: var(--font-naslov); font-weight: 700; font-size: 1rem; text-shadow: 0 1px 14px rgba(0, 0, 0, .7); }
.m-bento__polje--0 { grid-column: 1 / 3; grid-row: 1 / 3; }
.m-bento__polje--1 { grid-column: 3; grid-row: 1; }
.m-bento__polje--2 { grid-column: 3; grid-row: 2 / 4; }
.m-bento__polje--znak { grid-column: 1; grid-row: 3; background: #000; display: grid; place-items: center; padding: .8rem; }
.m-bento__polje--znak img { object-fit: contain; }
.m-bento__polje--broj { grid-column: 2; grid-row: 3; background: var(--ljub); color: #000; padding: 1rem; display: flex; flex-direction: column; justify-content: flex-end; }
.m-bento__polje--broj strong { font-family: var(--font-naslov); font-size: 2.3rem; line-height: 1; }
.m-bento__polje--broj span { position: static; font-family: var(--font-tekst); font-weight: 500; font-size: .85rem; text-shadow: none; margin-top: .3rem; color: #1a0f20; }

.m-dvoje { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.m-slika { margin: 0; border-radius: 22px; border: 1px solid var(--linija); height: min(640px, 80vh); }
.m-dvoje p + p { margin-top: 1rem; }
.m-dvoje h2 { margin-bottom: 1.2rem; }
.m-veliki { font-size: 1.3rem; color: #fff !important; }
.m-uvod { max-width: 46rem; margin: 1rem 0 2.2rem; font-size: 1.15rem; }
.m-stubovi { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.m-stubovi li { border: 1px solid var(--linija); border-radius: 18px; padding: 1.4rem; background: var(--m-karta); transition: border-color .2s ease; }
.m-stubovi li:hover { border-color: rgba(237, 155, 255, .5); }
.m-stubovi__broj { color: var(--ljub); font-family: var(--font-naslov); font-size: .9rem; }
.m-stubovi h3 { margin: 1.6rem 0 .2rem; font-size: 1.35rem; }
.m-stubovi p { color: var(--ljub) !important; }
.m-sto { margin: 1.6rem 0 0; border-radius: 22px; border: 1px solid var(--linija); overflow: hidden; background: #05030b; }
.m-sto img { display: block; width: 100%; height: auto; }

.m-glava-reda { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 1.8rem; }
.m-savet { color: var(--prigusen); max-width: 22rem; font-size: .95rem; }
.m-traka { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 18.5rem); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; overscroll-behavior-x: contain; scrollbar-color: #3a3346 transparent; }
.m-traka:focus-visible { outline: 2px solid var(--ljub); outline-offset: 4px; }
.m-kreator { scroll-snap-align: start; background: var(--m-karta); border: 1px solid var(--linija); border-radius: 20px; padding: .7rem .7rem 1.2rem; transition: border-color .2s ease; }
.m-kreator:hover { border-color: rgba(237, 155, 255, .45); }
.m-kreator__slika { aspect-ratio: 4 / 4.4; border-radius: 14px; overflow: hidden; background: #000; }
.m-kreator__slika img { width: 100%; height: 100%; object-fit: cover; }
.m-kreator h3 { font-size: 1.25rem; margin: .9rem .3rem .2rem; }
.m-kreator h3 a { text-decoration: none; }
.m-kreator h3 a:hover { color: var(--ljub); }
.m-kreator .mreze, .m-kreator > p, .m-kreator .mreze-linkovi { margin-inline: .3rem; }
.m-kreator > p { color: var(--prigusen); font-size: .92rem; }
.m-kreator--jos a { display: grid; gap: .8rem; text-decoration: none; height: 100%; }
.m-kreator--jos img { aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: 14px; }
.m-kreator--jos span { font-family: var(--font-naslov); font-size: 1.2rem; margin-inline: .3rem; }

.m-razlozi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.m-razlozi li { background: var(--m-karta); border-radius: 20px; padding: 1.6rem; border: 1px solid var(--linija); }
.m-razlozi h3 { font-size: 1.35rem; margin-bottom: .6rem; }

.m-poziv { padding: 4.5rem 0 5.5rem; }
.m-poziv__kutija { display: flex; justify-content: space-between; align-items: center; gap: 2rem; background: var(--ljub); color: #000; border-radius: 28px; padding: 2.8rem 2.6rem; }
.m-poziv__kutija h2 { color: #000; }
.m-poziv__kutija p { margin-top: .6rem; color: #2a1830; }
.m-poziv__kutija a { color: #000; }
.m-poziv .dugme { background: #000; color: #fff; }

@media (max-width: 980px) {
  .m-hero__mreza, .m-dvoje { grid-template-columns: 1fr; }
  .m-stubovi { grid-template-columns: 1fr 1fr; }
  .m-razlozi { grid-template-columns: 1fr; }
  .m-glava-reda, .m-poziv__kutija { flex-direction: column; align-items: flex-start; }
  .m-slika { max-width: 22rem; }
}
@media (max-width: 640px) {
  .m-bento { grid-template-rows: repeat(3, minmax(6rem, 1fr)); gap: .5rem; }
  .m-stubovi { grid-template-columns: 1fr; }
  .m-traka { grid-auto-columns: 82%; }
  .m-poziv__kutija { padding: 2rem 1.4rem; }
}
@media (max-width: 980px) { .m-slika { height: 70vh; max-width: none; } }

/* Prekidač Studios / Creators u zaglavlju, kao prekidač jezika. */
.publika { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--linija); background: rgba(255, 255, 255, .04); margin-right: auto; margin-left: clamp(.5rem, 2vw, 1.6rem); }
.publika a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .3rem .95rem; border-radius: 999px; font-family: var(--font-naslov); font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--prigusen); text-decoration: none; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.publika a span { margin-right: .3em; }
.publika a:hover { color: #fff; }
.publika a[aria-current="true"] { background: var(--ljub); color: #000; }
.publika a:focus-visible { outline: 2px solid var(--ljub); outline-offset: 2px; }

.m-bento--kreatori { grid-template-columns: 1.5fr 1fr; grid-template-rows: repeat(3, auto); }
.m-bento--kreatori .m-bento__polje--grad { background: #1c112f; }
.m-bento--kreatori .m-bento__polje--grad img { aspect-ratio: 550 / 732; object-fit: contain; }
.m-bento--kreatori .m-bento__polje--grad { grid-column: 1; grid-row: 1 / 4; }
.m-bento--kreatori .m-bento__polje--broj { grid-column: 2; grid-row: 1; }
.m-bento--kreatori .m-bento__polje--tamni-broj { grid-column: 2; grid-row: 2; }
.m-bento--kreatori .m-bento__polje--znak { grid-column: 2; grid-row: 3; }
.m-bento__polje--tamni-broj { padding: 1rem; display: flex; flex-direction: column; justify-content: flex-end; }
.m-bento__polje--tamni-broj strong { font-family: var(--font-naslov); font-size: 2.3rem; line-height: 1; color: var(--ljub); }
.m-bento__polje--tamni-broj span { position: static; font-family: var(--font-tekst); font-weight: 500; font-size: .85rem; text-shadow: none; margin-top: .3rem; color: var(--prigusen); }

.m-stubovi--tekst { margin-top: 2.2rem; }
.m-stubovi--tekst h3 { margin-top: 1.2rem; }
.m-stubovi--tekst p { color: var(--prigusen) !important; margin-top: .5rem; font-size: .98rem; }

.m-koraci { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.2rem; counter-reset: none; }
.m-koraci li { position: relative; padding: 1.4rem 1.2rem 1.4rem 0; border-top: 1px solid var(--linija); }
.m-koraci li::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 2px; background: var(--ljub); }
.m-koraci__broj { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(237, 155, 255, .5); color: var(--ljub); font-family: var(--font-naslov); font-weight: 700; font-variant-numeric: tabular-nums; }
.m-koraci h3 { font-size: 1.3rem; margin: 1rem 0 .4rem; }

.m-trazimo { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.m-trazimo h2 { margin-bottom: 1.2rem; }
.m-trazimo p + p { margin-top: 1rem; }
.m-teme { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.m-teme li { padding: .45rem .9rem; border-radius: 999px; border: 1px solid rgba(237, 155, 255, .35); background: rgba(237, 155, 255, .06); font-size: .92rem; color: #fff; }
.m-lica { background: var(--m-karta); border: 1px solid var(--linija); border-radius: 22px; padding: 1.6rem; }
.m-lica__naslov { font-family: var(--font-naslov); font-weight: 700; color: #fff !important; margin-bottom: 1.1rem; }
.m-lica ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-bottom: 1.4rem; }
.m-lica li { display: grid; justify-items: center; gap: .45rem; text-align: center; min-width: 0; }
.m-lica img { width: 100%; max-width: 5.5rem; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 2px solid rgba(237, 155, 255, .45); background: #000; }
.m-lica span { font-size: .82rem; color: var(--prigusen); overflow-wrap: anywhere; }

.m-prijava h2 { margin-bottom: 1.2rem; }
.m-prijava > div p + p { margin-top: 1rem; }
.m-prijava .forma { background: var(--m-karta); border: 1px solid var(--linija); border-radius: 22px; padding: clamp(1.2rem, 3vw, 2rem); }
.forma__par { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.polje select { width: 100%; background: var(--povrsina); color: var(--tekst); border: 1px solid var(--linija); border-radius: 4px; padding: .75rem .8rem; font: inherit; }
.m-prijava .polje textarea { min-height: 5.5rem; }
.polje input::placeholder, .polje textarea::placeholder { color: #7d7688; }
.polje input:focus-visible, .polje textarea:focus-visible, .polje select:focus-visible { outline: 2px solid var(--ljub); outline-offset: 1px; }

.m-pitanja { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.m-pitanje { border-top: 1px solid var(--linija); }
.m-pitanje:last-child { border-bottom: 1px solid var(--linija); }
.m-pitanje summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; font-family: var(--font-naslov); font-weight: 600; font-size: 1.1rem; }
.m-pitanje summary::-webkit-details-marker { display: none; }
.m-pitanje summary::after { content: "+"; color: var(--ljub); font-size: 1.4rem; line-height: 1; transition: transform .2s ease; }
.m-pitanje[open] summary::after { transform: rotate(45deg); }
.m-pitanje summary:focus-visible { outline: 2px solid var(--ljub); outline-offset: 2px; }
.m-pitanje p { padding: 0 0 1.2rem; max-width: 40rem; }

@media (max-width: 980px) {
  .publika { margin-left: auto; margin-right: .6rem; }
  .m-koraci { grid-template-columns: 1fr 1fr; }
  .m-bento--kreatori { max-width: 36rem; }
  .m-trazimo, .m-pitanja { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .publika a { padding: .3rem .7rem; font-size: .78rem; min-height: 2.1rem; }
  .publika a span { display: none; }
  .zaglavlje .znak span { display: none; }
  .m-koraci, .forma__par { grid-template-columns: 1fr; }
  .m-bento--kreatori { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, auto); }
  .m-bento--kreatori .m-bento__polje--grad { grid-row: 1 / 3; }
  .m-bento--kreatori .m-bento__polje--znak { display: none; }
  .m-bento--kreatori .m-bento__polje--broj, .m-bento--kreatori .m-bento__polje--tamni-broj { padding: .75rem; }
  .m-bento--kreatori strong { font-size: 1.7rem; }
  .m-bento--kreatori .m-bento__polje--broj span, .m-bento--kreatori .m-bento__polje--tamni-broj span { font-size: .78rem; }
  .m-lica ul { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .publika a, .m-pitanje summary::after { transition: none; }
}