/* ============================================================
   Uslužionica, deljeni sloj (tokeni, tipografija, nav, podnožje)

   Fontovi se hostuju LOKALNO, ne sa Google CDN-a. Na sajtu koji
   objašnjava zaštitu podataka bilo bi neumesno slati IP adresu
   posetioca trećoj strani samo da bi se preuzeo font. Ista odluka
   je doneta i u staroj verziji pravnih stranica; ovde se nastavlja,
   i zahvaljujući njoj CSP može da ostane `default-src 'self'`.

   Dizajn funnela koristi imena tokena `--p-*`. Ona su ovde svedena
   na aliase nad `--us-*`, koji su izvor istine i dele se sa mobilnom
   aplikacijom. Tako se markup iz dizajna prenosi bez prepisivanja
   svakog inline stila, a boja i dalje postoji samo na jednom mestu.
   ============================================================ */

@font-face { font-family: "Outfit"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Outfit-Regular.woff2")  format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Outfit-Medium.woff2")   format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Outfit-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Outfit-Bold.woff2")     format("woff2"); }

/* ── Tokeni, tamna tema je podrazumevana ─────────────────────
   Brend definiše tamnu temu kao primarni estetski identitet, a
   funnel dizajn je crtan na njoj. Svetla tema je ravnopravna, ali
   dolazi kroz [data-theme="light"].
   ───────────────────────────────────────────────────────────── */

:root {
    color-scheme: dark;

    /* Brend paleta, Brand Book v1.0 */
    --us-color-deep-navy:    #0B1220;
    --us-color-slate-blue:   #162238;
    --us-color-primary-blue: #2F6BFF;
    --us-color-soft-blue:    #69A8FF;
    --us-color-off-white:    #F7FAFC;

    --us-bg:          #0B1220;
    --us-bg2:         #0E1728;
    --us-surface:     #162238;
    --us-surface2:    #1B2A47;
    --us-fg:          #F8FAFC;
    --us-fg-muted:    #A9B6CA;
    --us-fg-subtle:   #8A98B0;   /* #7C8AA3 je na --us-surface2 padao na 4,1:1 */
    --us-border:      #22304E;
    --us-border-soft: #182238;
    --us-accent:      #69A8FF;   /* na tamnoj podlozi #2F6BFF NE prolazi AA */
    /* Beo tekst na #2F6BFF daje kontrast 4,499, a AA trazi 4,5: pada za
       desetinku, na svakom glavnom dugmetu. Zelena spustena sa 107 na 104
       daje 4,62. Razlika se okom ne vidi, a dugmad prolaze.
       Brend paleta (--us-color-primary-blue) ostaje netaknuta; menja se
       samo token za pune povrsine sa belim tekstom, kome je kontrast posao. */
    --us-accent-cta:  #2F68FF;
    --us-tint:        rgba(47, 107, 255, 0.14);
    --us-mark1:       #2F6BFF;
    --us-mark2:       #69A8FF;

    /* Orhideja, akcenat poslova (design-system/poslovi). Posao nije oglas,
       pa ne sme da nosi istu plavu; ovo ih razdvaja na prvi pogled. */
    --us-posao:      #E879F9;   /* tekst i ivice na tamnoj podlozi */
    --us-posao-jak:  #C026D3;   /* pune površine, beo tekst preko */
    --us-posao-tint: rgba(192, 38, 211, 0.16);

    --us-success: #22C55E;
    --us-warning: #F59E0B;
    --us-error:   #F87171;

    --us-warn-bg:     #2A2416;
    --us-warn-border: #6B5A2A;

    --us-radius-sm: 12px;
    --us-radius-md: 16px;
    --us-radius-lg: 18px;
    --us-radius-xl: 24px;

    --us-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
    --us-shadow-md: 0 18px 48px rgba(0, 0, 0, 0.45);

    --us-font: "Outfit", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --us-tracking-tight:  -0.03em;
    --us-tracking-normal: -0.005em;
    --us-tracking-wide:    0.04em;

    --us-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Skala pokreta. Jedno mesto za sva trajanja, da se ne razilaze po
       fajlovima. Obrazloženje svake stepenice stoji u site-design/05-pokret.md.
       Zatvaranje je kraće od otvaranja i ima svoj ease, jer stvar koja odlazi
       treba da ubrza, ne da uspori. */
    --us-t-mikro:   160ms;   /* hover, active, fokus */
    --us-t-stanje:  240ms;   /* čip, prekidač, akordeon */
    --us-t-ulaz:    360ms;   /* kartica, stavka menija */
    --us-t-sekcija: 520ms;   /* data-reveal */
    --us-t-izlaz:   180ms;   /* zatvaranje */
    --us-ease-izlaz: cubic-bezier(0.4, 0, 1, 1);

    /* Visina gornje trake. Lepljive trake na stranicama racunaju svoj
       `top` odavde, da se ne preklope sa njom. */
    --us-topbar-h: 63px;

    --us-zatamnjenje: rgba(7, 11, 20, 0.62);
    --us-senka-podignuta: 0 22px 48px rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] {
    color-scheme: light;

    --us-bg:          #F7FAFC;
    --us-bg2:         #FFFFFF;
    --us-surface:     #FFFFFF;
    --us-surface2:    #F1F5F9;
    --us-fg:          #0F172A;
    --us-fg-muted:    #475569;
    --us-fg-subtle:   #64748B;
    --us-border:      #E2E8F0;
    --us-border-soft: #F1F5F9;
    --us-accent:      #2456CC;   /* tamnija plava, AA na beloj podlozi */
    --us-accent-cta:  #2F68FF;
    --us-tint:        #E9F2FF;
    --us-mark1:       #0E2F8C;
    --us-mark2:       #2463D8;

    --us-error:   #DC2626;

    --us-posao:      #A21CAF;   /* na beloj podlozi tamnija, zbog kontrasta */
    --us-posao-jak:  #C026D3;
    --us-posao-tint: #FAE8FF;

    --us-warn-bg:     #FFFBEB;
    --us-warn-border: #F59E0B;

    --us-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --us-shadow-md: 0 16px 40px rgba(15, 23, 42, 0.10);

    /* Na svetloj temi zatamnjenje je hladno sivo, ne crno: crno iza providne
       ploče izgleda kao greška u iscrtavanju, a ne kao namera. */
    --us-zatamnjenje: rgba(15, 23, 42, 0.28);
    --us-senka-podignuta: 0 18px 40px rgba(15, 23, 42, 0.14);
}

/* Posetilac bez JavaScript-a ne dobija `data-theme` pečat iz skripte
   u <head>-u, pa se tada poštuje sistemsko podešavanje. Kad skripta
   radi, ona uvek upiše atribut i ovo pravilo se ne primenjuje. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;
        --us-bg: #F7FAFC; --us-bg2: #FFFFFF; --us-surface: #FFFFFF; --us-surface2: #F1F5F9;
        --us-fg: #0F172A; --us-fg-muted: #475569; --us-fg-subtle: #64748B;
        --us-border: #E2E8F0; --us-border-soft: #F1F5F9;
        --us-accent: #2456CC; --us-tint: #E9F2FF;
        --us-mark1: #0E2F8C; --us-mark2: #2463D8;
        --us-posao: #A21CAF; --us-posao-tint: #FAE8FF;
        --us-error: #DC2626;
        --us-warn-bg: #FFFBEB; --us-warn-border: #F59E0B;
        --us-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
        --us-shadow-md: 0 16px 40px rgba(15, 23, 42, 0.10);
        --us-zatamnjenje: rgba(15, 23, 42, 0.28);
        --us-senka-podignuta: 0 18px 40px rgba(15, 23, 42, 0.14);
    }
}

/* ── Aliasi za markup prenet iz funnel dizajna ────────────────── */

:root {
    --p-bg: var(--us-bg);
    --p-bg2: var(--us-bg2);
    --p-surface: var(--us-surface);
    --p-surface2: var(--us-surface2);
    --p-fg: var(--us-fg);
    --p-muted: var(--us-fg-muted);
    --p-subtle: var(--us-fg-subtle);
    --p-border: var(--us-border);
    --p-accent: var(--us-accent-cta);
    --p-accent2: var(--us-accent);
    --p-tint: var(--us-tint);
    --p-shadow: var(--us-shadow-md);
    --p-mark1: var(--us-mark1);
    --p-mark2: var(--us-mark2);
    --p-posao: var(--us-posao);
    --p-posao-jak: var(--us-posao-jak);
    --p-posao-tint: var(--us-posao-tint);
}

/* ── Osnova ───────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--us-bg);
    color: var(--us-fg);
    font-family: var(--us-font);
    font-size: 15px;
    line-height: 1.65;
    letter-spacing: var(--us-tracking-normal);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--us-accent); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }

strong { font-weight: 600; }

input, button, select, textarea { font-family: inherit; }

:focus-visible {
    outline: 2px solid var(--us-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

.us-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--us-accent-cta);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
}
.us-skip:focus { left: 12px; top: 12px; text-decoration: none; }

.us-mark { display: block; flex-shrink: 0; }
.us-mark .us-mark-a { stroke: var(--us-mark1); }
.us-mark .us-mark-b { stroke: var(--us-mark2); }

/* ── Zaglavlje ────────────────────────────────────────────────── */

.us-topbar {
    background: var(--us-bg2);
    border-bottom: 1px solid var(--us-border-soft);
    position: sticky;
    top: 0;
    z-index: 100;
}

.us-topbar-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.us-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--us-fg);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: var(--us-tracking-tight);
    margin-right: auto;
}
.us-brand:hover { text-decoration: none; }
.us-brand svg { width: 28px; height: 28px; }

.us-nav { display: flex; gap: 18px; align-items: center; font-size: 14px; font-weight: 500; }
.us-nav a { color: var(--us-fg-muted); font-weight: 500; transition: color 120ms var(--us-ease); }
.us-nav a:hover { color: var(--us-accent); text-decoration: none; }
.us-nav a[aria-current="page"] { color: var(--us-accent); font-weight: 600; }

.us-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--us-border);
    border-radius: 10px;
    background: transparent;
    color: var(--us-fg-muted);
    cursor: pointer;
    transition: border-color 120ms var(--us-ease), color 120ms var(--us-ease);
}
.us-theme-toggle:hover { border-color: var(--us-accent); color: var(--us-accent); }
.us-theme-toggle .us-icon-dark { display: none; }
:root[data-theme="light"] .us-theme-toggle .us-icon-dark { display: block; }
:root[data-theme="light"] .us-theme-toggle .us-icon-light { display: none; }

/* ── Podnožje ─────────────────────────────────────────────────── */

.us-footer {
    border-top: 1px solid var(--us-border-soft);
    background: var(--us-bg2);
    padding: 40px 22px 44px;
    margin-top: auto;
}

.us-footer-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px 40px;
    font-size: 13.5px;
    color: var(--us-fg-subtle);
}

.us-footer-brand { display: flex; flex-direction: column; gap: 6px; margin-right: auto; }
.us-footer-brand .us-brand { margin-right: 0; }
.us-footer-slogan { color: var(--us-fg-subtle); font-size: 13px; }

.us-footer-col { display: flex; flex-direction: column; gap: 8px; }
.us-footer-col h2 {
    margin: 0 0 2px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--us-tracking-wide);
    color: var(--us-fg-subtle);
}
.us-footer-col a { color: var(--us-fg-muted); font-weight: 500; }

.us-footer-bottom {
    max-width: 1120px;
    margin: 28px auto 0;
    padding-top: 18px;
    border-top: 1px solid var(--us-border-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    font-size: 13px;
    color: var(--us-fg-subtle);
}

/* Oznake prodavnica, namerno NISU zvanični Apple/Google badge-ovi.
   Obe kompanije zabranjuju izmenu svojih oznaka, a nama treba
   dopisano „uskoro". Zato sopstvena, u stilu brenda. */
.us-stores { display: flex; flex-wrap: wrap; gap: 10px; }
.us-store {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius-sm);
    background: var(--us-surface);
    color: var(--us-fg-muted);
    font-size: 12.5px;
    font-weight: 500;
}
.us-store span { color: var(--us-fg-subtle); font-size: 10.5px; font-weight: 600; letter-spacing: var(--us-tracking-wide); }

/* ── Dugmad ───────────────────────────────────────────────────── */

.us-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--us-accent-cta);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: var(--us-tracking-normal);
    cursor: pointer;
    text-decoration: none;
    transition: background 140ms var(--us-ease), transform 140ms var(--us-ease);
}
.us-btn:hover { background: #2458DB; color: #fff; text-decoration: none; }
.us-btn:active { transform: scale(0.98); }

.us-btn-ghost {
    background: transparent;
    border-color: var(--us-border);
    color: var(--us-fg-muted);
}
.us-btn-ghost:hover { background: var(--us-tint); border-color: var(--us-accent); color: var(--us-fg); }

/* ── Smanjeno kretanje ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.12s !important;
    }
}

/* ── Uski ekrani ──────────────────────────────────────────────── */

@media (max-width: 560px) {
    :root { --us-topbar-h: 59px; }
    .us-topbar-inner { padding: 12px 18px; gap: 14px; }
    .us-nav { gap: 14px; font-size: 13px; }
    .us-footer { padding: 32px 18px 36px; }
}

/* ── Sendvič meni i prečica do pretrage ────────────────────────
   Deli ga funnel navigacija (Nav.razor) i traka ostalih stranica
   (MarketingLayout.razor), kroz komponentu NavMeni.razor. Razlika je
   samo u veličini dugmadi: funnel ima 38px, ostale 34px, pa se tamo
   dodaje klasa `us-meni--mali`.

   Radi BEZ skripte: skriveni checkbox plus label otvara ploču.
   navigacija.js posle dodaje Esc, klik izvan, zaključavanje skrola i
   zarobljavanje fokusa. Zato je checkbox prvi u redu braće, da
   `:checked ~` može da dohvati i dugme i pozadinu i ploču.
   ───────────────────────────────────────────────────────────── */

.us-meni { position: relative; display: flex; align-items: center; gap: 10px; }

.us-sendvic,
.us-trazi-ikona {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--us-border);
    background: transparent;
    color: var(--us-fg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

/* Dodirna površina 44 × 44 bez promene izgleda. */
.us-sendvic::after,
.us-trazi-ikona::after { content: ""; position: absolute; inset: -4px; }

.us-meni--mali .us-sendvic,
.us-meni--mali .us-trazi-ikona { width: 34px; height: 34px; border-radius: 10px; }
.us-meni--mali .us-sendvic::after,
.us-meni--mali .us-trazi-ikona::after { inset: -5px; }

.us-sendvic-linija {
    position: absolute;
    left: 50%; top: 50%;
    width: 16px; height: 1.6px;
    margin-left: -8px; margin-top: -0.8px;
    border-radius: 2px;
    background: currentColor;
    transform-origin: 50% 50%;
}
.us-sendvic-linija:nth-child(1) { transform: translateY(-5px); }
.us-sendvic-linija:nth-child(3) { transform: translateY(5px); }

/* <details> je blok element. U flex redu navigacije to ga je spustalo iz
   ravni sa prekidacem teme i pretragom, jer se <summary> tada postavlja u
   gornji levi ugao svoje kutije umesto da bude sam sebi kutija. */
.us-meni-om { position: static; display: inline-flex; align-items: center; }

/* Marker na <summary> se gasi na sva tri nacina. Pravila se razlikuju po
   pregledacima, a bar jedno od njih je crtalo visak znaka u sendvicu. */
summary { list-style: none; }
summary::marker { content: ""; }
summary::-webkit-details-marker { display: none; }
.us-sendvic { list-style: none; }
.us-sendvic::-webkit-details-marker { display: none; }

.us-trazi-pilula {
    display: none;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px 0 12px;
    border-radius: 12px;
    background: var(--us-tint);
    color: var(--us-fg);
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    border: 1px solid transparent;
}
.us-trazi-pilula:hover { text-decoration: none; }
.us-trazi-pilula svg { color: var(--us-accent); }
.us-trazi-ikona { color: var(--us-fg); }
.us-meni--mali .us-trazi-pilula { height: 34px; font-size: 14px; }

@media (min-width: 900px) {
    .us-trazi-pilula { display: inline-flex; }
    .us-trazi-ikona { display: none; }
}

.us-meni-pozadina {
    position: fixed;
    inset: 0;
    z-index: 140;
    background: var(--us-zatamnjenje);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
}

.us-meni-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 150;
    width: 340px;
    max-height: calc(100svh - 96px);
    overflow: auto;
    overscroll-behavior: contain;
    /* Ploča se i dalje lista točkićem i prstom, samo bez vidljive trake:
       traka sa strelicama je u uskoj ploči izgledala kao greška. */
    scrollbar-width: none;
    padding: 10px;
    border-radius: var(--us-radius-xl);
    background: var(--us-surface);
    border: 1px solid var(--us-border);
    box-shadow: var(--us-shadow-md);
    transform-origin: top right;
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
    visibility: hidden;
}

/* Na telefonu ploča uzima celu širinu ispod trake, ali i dalje raste iz
   dugmeta, pa se vidi odakle je došla. */
@media (max-width: 559px) {
    .us-meni-panel { position: fixed; top: 64px; left: 10px; right: 10px; width: auto; }
}

.us-meni-naslov {
    margin: 14px 10px 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: var(--us-tracking-wide);
    text-transform: uppercase;
    color: var(--us-fg-subtle);
}
.us-meni-naslov:first-child { margin-top: 6px; }

.us-meni-stavka {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 12px;
    color: var(--us-fg);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}
.us-meni-stavka:hover { text-decoration: none; }
.us-meni-glavna { padding: 12px; border: 1px solid var(--us-border); margin-bottom: 6px; }
.us-meni-glavna b { display: block; font-weight: 600; font-size: 16px; }
.us-meni-glavna small { display: block; font-size: 13px; color: var(--us-fg-muted); }
.us-meni-tacka { width: 10px; height: 10px; border-radius: 4px; background: var(--us-accent-cta); flex: none; }
.us-meni-posao .us-meni-tacka { background: var(--us-posao-jak); }

.us-meni-app { flex-wrap: wrap; gap: 8px; }
.us-meni-uskoro {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--us-fg-muted);
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px dashed var(--us-border);
}

.us-meni-pravno {
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--us-border);
    border-radius: 0;
    font-size: 13px;
}
.us-meni-pravno a {
    color: var(--us-fg-subtle);
    text-decoration: none;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}

/* ── Stanja i prelazi ─────────────────────────────────────────── */

.us-sendvic,
.us-trazi-ikona,
.us-trazi-pilula {
    transition: color var(--us-t-mikro) var(--us-ease),
                border-color var(--us-t-mikro) var(--us-ease),
                background-color var(--us-t-mikro) var(--us-ease),
                transform 120ms var(--us-ease);
}
.us-sendvic:hover,
.us-trazi-ikona:hover { color: var(--us-fg); border-color: var(--us-accent); }
.us-sendvic:active,
.us-trazi-ikona:active,
.us-trazi-pilula:active { transform: scale(0.98); }
.us-trazi-pilula:hover { border-color: var(--us-accent); }
.us-trazi-pilula[aria-current="page"] { background: var(--us-accent-cta); color: #fff; }
.us-trazi-pilula[aria-current="page"] svg { color: #fff; }

.us-sendvic:focus-visible,
.us-trazi-ikona:focus-visible,
.us-trazi-pilula:focus-visible,
.us-meni-stavka:focus-visible,
.us-meni-pravno a:focus-visible { outline: 2px solid var(--us-accent); outline-offset: 3px; }

/* X: gornja i donja linija se rotiraju oko svog centra, srednja nestaje. */
.us-sendvic-linija { transition: transform 280ms var(--us-ease), opacity var(--us-t-mikro) var(--us-ease); }
.us-meni-om[open] .us-sendvic .us-sendvic-linija:nth-child(1) { transform: rotate(45deg); }
.us-meni-om[open] .us-sendvic .us-sendvic-linija:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.us-meni-om[open] .us-sendvic .us-sendvic-linija:nth-child(3) { transform: rotate(-45deg); }
.us-meni-om[open] .us-sendvic { color: var(--us-fg); border-color: var(--us-accent); }

/* Zatvaranje: 180 ms, bez stepenovanja. */
.us-meni-pozadina { transition: opacity var(--us-t-izlaz) var(--us-ease-izlaz); }
.us-meni-panel {
    transition: opacity var(--us-t-izlaz) var(--us-ease-izlaz),
                transform var(--us-t-izlaz) var(--us-ease-izlaz),
                visibility 0s linear var(--us-t-izlaz);
}
.us-meni-panel > * {
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 120ms var(--us-ease-izlaz), transform 120ms var(--us-ease-izlaz);
}

/* Otvaranje: ploča 240 ms, stavke po 30 ms razmaka, poslednja završi do 420 ms. */
.us-meni-om[open] .us-meni-pozadina { opacity: 1; pointer-events: auto; transition: opacity 200ms var(--us-ease); }
.us-meni-om[open] .us-meni-panel {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity 200ms var(--us-ease), transform var(--us-t-stanje) var(--us-ease), visibility 0s;
}
.us-meni-om[open] .us-meni-panel > * {
    opacity: 1;
    transform: none;
    transition: opacity 220ms var(--us-ease), transform 220ms var(--us-ease);
}
.us-meni-om[open] .us-meni-panel > :nth-child(1)  { transition-delay: 40ms; }
.us-meni-om[open] .us-meni-panel > :nth-child(2)  { transition-delay: 60ms; }
.us-meni-om[open] .us-meni-panel > :nth-child(3)  { transition-delay: 90ms; }
.us-meni-om[open] .us-meni-panel > :nth-child(4)  { transition-delay: 110ms; }
.us-meni-om[open] .us-meni-panel > :nth-child(5)  { transition-delay: 125ms; }
.us-meni-om[open] .us-meni-panel > :nth-child(6)  { transition-delay: 140ms; }
.us-meni-om[open] .us-meni-panel > :nth-child(7)  { transition-delay: 155ms; }
.us-meni-om[open] .us-meni-panel > :nth-child(8)  { transition-delay: 170ms; }
.us-meni-om[open] .us-meni-panel > :nth-child(9)  { transition-delay: 185ms; }
.us-meni-om[open] .us-meni-panel > :nth-child(10) { transition-delay: 200ms; }
.us-meni-om[open] .us-meni-panel > :nth-child(n+11) { transition-delay: 200ms; }

.us-meni-stavka { transition: background-color var(--us-t-mikro) var(--us-ease), border-color var(--us-t-mikro) var(--us-ease); }
.us-meni-stavka:hover { background: var(--us-tint); }
.us-meni-glavna:hover { border-color: var(--us-accent); }
.us-meni-posao:hover { background: var(--us-posao-tint); border-color: var(--us-posao); }
.us-meni-stavka[aria-current="page"] { background: var(--us-tint); }
.us-meni-posao[aria-current="page"] { background: var(--us-posao-tint); }
.us-meni-pravno a:hover { color: var(--us-fg); }

.us-meni-panel::-webkit-scrollbar { display: none; }

/* Bedževi prodavnica u meniju, u jednom redu. Play PNG ima svoj prazan
   prostor (četvrtina visine), pa se levo vraća u ravan teksta. */
.us-meni-bedzevi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.us-meni-play { margin: -10px 0 -10px -10px; }

/* Zatamnjenje menija je position: fixed unutar zaglavlja. Kad zaglavlje ima
   backdrop-filter (funnel.js ga stavlja posle skrola), fiksni element ostaje
   zarobljen u traci i mutira se samo ona. Dok je meni otvoren, zaglavlje
   ga gubi, pa zatamnjenje pokriva i mutira celu stranu. */
html.us-meni-otvoren [data-us="nav"],
[data-us="nav"]:has(.us-meni-om[open]) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    /* Bez prelaza: dok se blur zaglavlja gasi (260 ms), zatamnjenje je još
       zarobljeno u traci, pa bi se prvo zamutila traka, a strana tek posle. */
    transition: none !important;
}

/* Skripta postavlja ovu klasu dok je meni otvoren, da strana ispod ne skroluje. */
html.us-meni-otvoren,
html.us-meni-otvoren body { overflow: hidden; }

/* ── Prelaz između stranica i prekidač teme ────────────────────
   Svaka navigacija je pun zahtev, jer je sajt static SSR. Pretapanje
   od 160 ms pregledač izvodi nad snimkom stare strane, pa ne odlaže
   prvi prikaz i ne pravi bljesak nestilizovanog sadržaja. Gde API ne
   postoji, ne dešava se ništa, što je ispravno ponašanje.

   Tema se ne menja prelazom na svakom elementu: to animira ceo DOM i
   treperi na sporim telefonima. Umesto toga se pretopi jedan snimak.
   ───────────────────────────────────────────────────────────── */

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 160ms;
    animation-timing-function: var(--us-ease);
}

html.us-tema-prelaz::view-transition-old(root),
html.us-tema-prelaz::view-transition-new(root) { animation-duration: 200ms; }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ── Pokazivač za trake koje se čitaju u stranu ────────────────
   Pravi ga klizaci.js, i samo kad traka stvarno prelazi svoju
   širinu. Do osam stavki su tačkice, preko toga linija napretka.
   ───────────────────────────────────────────────────────────── */

.us-klizac {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 2px 0 18px;
    min-height: 10px;
}

.us-klizac--skriven { display: none; }

.us-klizac-tacka {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--us-border);
    transition: width var(--us-t-stanje) var(--us-ease), background-color var(--us-t-stanje) var(--us-ease);
}

/* Aktivna tačkica se izdužuje umesto da samo promeni boju: dužina se
   vidi i kad je kontrast slab, a boja sama ne bi bila dovoljna. */
.us-klizac-tacka.je-tu {
    width: 18px;
    background: var(--us-accent);
}

.us-klizac--traka {
    display: block;
    height: 3px;
    border-radius: 999px;
    background: var(--us-border-soft);
    overflow: hidden;
    margin-inline: auto;
    max-width: 180px;
}

.us-klizac-palac {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--us-accent);
    transition: transform var(--us-t-mikro) var(--us-ease);
}

/* Na širokom ekranu trake staju u red i pokazivač nema šta da pokaže;
   skripta ga sakrije sama, ovo je pojas i tregeri za slučaj da ne krene. */
@media (min-width: 760px) {
    .us-koraci + .us-klizac,
    .us-plocice + .us-klizac,
    .us-pravila + .us-klizac { display: none; }
}
@media (min-width: 1100px) {
    .k-cipovi + .us-klizac { display: none; }
}

/* Vidljivo citacu ekrana, nevidljivo oku. Stoji OVDE, u deljenom sloju, a ne
   u katalog.css: tamo je bilo, pa je na pocetnoj (koja katalog.css ne ucitava)
   natpis „Meni" ispadao vidljiv preko sendvic dugmeta. */
.us-skrij {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── App Store bedž (Shared/AppStoreBedz.razor) ───────────────────
   Apple-ova slika, ne menja se. Crni bedž na obe teme, kao Play pored njega. */

.as-bedz { display: inline-block; line-height: 0; border-radius: 9px; transition: transform var(--us-t-mikro) var(--us-ease); }
.as-bedz img { display: block; transition: opacity var(--us-t-mikro) var(--us-ease); }
.as-bedz:hover img { opacity: 0.9; }
.as-bedz:active { transform: scale(0.98); }
.as-bedz:focus-visible { outline: 2px solid var(--us-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .as-bedz, .as-bedz img { transition: none; }
    .as-bedz:active { transform: none; }
}