/* =====================================================================
   FONDACIJA MIHAJLOVIĆ – FENIKS
   Vesti, blog i stranice — dopuna stila naslovne

   Ovaj fajl NE ponavlja ono što već postoji u css/style.css.
   Zaglavlje, meni, podnožje, kartice vesti i tipografija dolaze odande;
   ovde je samo ono čega na naslovnoj nema: telo članka, potpisi,
   rubrike, straničenje i veze ka drugim portalima.

   Koriste se iste promenljive:
     --boja-povrsina  --boja-identitet  --boja-pozadina
     --boja-tekst     --boja-siva       --boja-linija
     --font-tekst     --font-naslov     --sirina-max  --header-visina
   ===================================================================== */


/* =====================================================================
   Stranice bez hero slike

   Na naslovnoj je zaglavlje providno preko hero slike i boji se tek pri
   pomeranju. Ovde hero slike nema, pa mora biti puno od početka —
   inače bi beli logotip stajao na beloj pozadini.
   ===================================================================== */

.strana-unutra .site-header { background: var(--boja-povrsina); }

/* Na naslovnoj je logotip nevidljiv dok je traka providna, pa se
   pojavljuje tek sa bojom. Ovde je traka obojena od početka, pa nema
   šta da se čeka. */
@media (min-width: 900px) {
    .strana-unutra .logo {
        opacity: 1;
        visibility: visible;
    }
}

/* Zaglavlje je izdvojeno iz toka, pa mu se pravi mesto. */
.unutrasnja { padding-top: var(--header-visina); }


/* =====================================================================
   Članak
   ===================================================================== */

.clanak {
    max-width: 760px;
    margin: 0 auto;
    padding: 72px 24px 0;
}

.clanak__vrh { margin-bottom: 40px; }

.clanak__rubrika {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--boja-identitet);
    margin-bottom: 16px;
}

.clanak__naslov {
    font-family: var(--font-naslov);
    font-weight: 400;
    font-size: clamp(32px, 4.6vw, 54px);
    line-height: 1.12;
    letter-spacing: -.015em;
    color: var(--boja-povrsina);
    margin: 0;
}

.clanak__podnaslov {
    font-family: var(--font-naslov);
    font-size: clamp(19px, 2.2vw, 24px);
    line-height: 1.4;
    color: var(--boja-siva);
    margin: 16px 0 0;
}

.clanak__podaci {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 26px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--boja-siva);
}

.clanak__autor { color: var(--boja-identitet); }

/* Naslovna slika izlazi izvan širine teksta — daje vazduh i naglašava
   vrh, kao hero na naslovnoj. */
.clanak__slika {
    width: min(100vw - 48px, 1040px);
    margin: 0 0 44px 50%;
    transform: translateX(-50%);
}

.clanak__slika img {
    display: block;
    margin: 0 auto;

    /* Uspravna slika inače preraste ekran, pa se vidi samo njen deo i
       tekst počinje tek negde daleko ispod. Visina se ograničava na
       ono što je vidljivo ispod trake, uz nešto vazduha. */
    max-width: 100%;
    max-height: calc(100vh - var(--header-visina) - 96px);
    width: auto;
    height: auto;

    border: 1px solid var(--boja-linija);
}

.clanak__slika figcaption {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--boja-siva);
    text-align: center;
}

.clanak__uvod {
    font-size: 19px;
    line-height: 1.65;
    color: #3b3530;
    margin: 0 0 36px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--boja-linija);
}

/* Uvod se unosi uređivačem, pa može imati više pasusa i poravnanje. */
.clanak__uvod > *:first-child { margin-top: 0; }
.clanak__uvod > *:last-child  { margin-bottom: 0; }

.clanak__uvod p,
.clanak__uvod section,
.clanak__uvod div { margin: 0 0 18px; }

.clanak__uvod .poravnaj-centar    { text-align: center; }
.clanak__uvod .poravnaj-desno     { text-align: right; }
.clanak__uvod .poravnaj-obostrano { text-align: justify; }

.clanak__uvod a {
    color: var(--boja-identitet);
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* --- Telo teksta ------------------------------------------------------ */

.clanak__telo { font-size: 17.5px; line-height: 1.75; }

.clanak__telo > *:first-child { margin-top: 0; }

.clanak__telo p,
.clanak__telo section,
.clanak__telo div { margin: 0 0 26px; }

.clanak__telo h2,
.clanak__telo h3 {
    font-family: var(--font-naslov);
    font-weight: 500;
    color: var(--boja-povrsina);
    line-height: 1.25;
    margin: 48px 0 16px;
}

.clanak__telo h2 { font-size: 30px; }
.clanak__telo h3 { font-size: 23px; }

.clanak__telo ul,
.clanak__telo ol { margin: 0 0 26px; padding-left: 24px; }

.clanak__telo li { margin-bottom: 8px; }

.clanak__telo blockquote {
    margin: 36px 0;
    padding: 4px 0 4px 26px;
    border-left: 2px solid var(--boja-identitet);
    font-family: var(--font-naslov);
    font-style: italic;
    font-size: 22px;
    line-height: 1.55;
    color: #3c3448;
}

.clanak__telo a {
    color: var(--boja-identitet);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.clanak__telo a:hover { color: var(--boja-identitet-hover); }

/* Poravnanje zadato u uređivaču */
.clanak__telo .poravnaj-centar    { text-align: center; }
.clanak__telo .poravnaj-desno     { text-align: right; }
.clanak__telo .poravnaj-obostrano { text-align: justify; }

/* Slika ubačena u tekst oznakom [slika:123] */
.slika-u-tekstu { margin: 40px 0; }

.slika-u-tekstu img {
    display: block;
    margin: 0 auto;

    max-width: 100%;
    max-height: calc(100vh - var(--header-visina) - 96px);
    width: auto;
    height: auto;

    border: 1px solid var(--boja-linija);
}

.slika-u-tekstu figcaption {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--boja-siva);
}

/* Galerija ubačena u tekst izlazi izvan širine teksta. */
.clanak__telo .galerija,
.clanak__telo .klizac {
    width: min(100vw - 48px, 1100px);
    margin-left: 50%;
    transform: translateX(-50%);
}


/* =====================================================================
   Objave na drugim portalima
   ===================================================================== */

.prenosi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 14px 0 0;
}

.prenosi__naziv {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--boja-siva);
    margin-right: 4px;
}

.prenosi__veza {
    display: inline-block;
    padding: 4px 11px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--boja-identitet);
    background: var(--boja-identitet-blaga);
    border: 1px solid var(--boja-linija);
    transition: background-color var(--prelaz), color var(--prelaz),
                border-color var(--prelaz);
}

.prenosi__veza:hover {
    background: var(--boja-identitet);
    border-color: var(--boja-identitet);
    color: #fff;
}

.clanak__prenosi {
    margin-top: 56px;
    padding-top: 30px;
    border-top: 1px solid var(--boja-linija);
}

.clanak__prenosi-naslov {
    font-family: var(--font-tekst);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--boja-siva);
    margin: 0;
}

.prenosi--velike { gap: 8px; margin-top: 16px; }
.prenosi--velike .prenosi__veza { font-size: 14px; padding: 6px 14px; }


/* =====================================================================
   Spisak: rubrike, podnaslov kartice, straničenje
   ===================================================================== */

.rubrike {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: -20px 0 44px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--boja-linija);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.rubrike a { color: var(--boja-siva); padding-bottom: 4px; }
.rubrike a:hover { color: var(--boja-identitet); }

.rubrike .izabrano {
    color: var(--boja-identitet);
    border-bottom: 2px solid var(--boja-identitet);
}

.vest-podnaslov {
    font-family: var(--font-naslov);
    font-style: italic;
    font-size: 16px;
    line-height: 1.45;
    color: var(--boja-siva);
    margin-bottom: 10px;
}

.vest .prenosi { margin-top: 12px; }

.strane-sajt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 64px;
    padding-top: 26px;
    border-top: 1px solid var(--boja-linija);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--boja-siva);
}

.strane-sajt a { color: var(--boja-identitet); }
.strane-sajt__broj { color: var(--boja-siva); }

/* Razmak do podnožja: isti kao između sekcija na naslovnoj. */
.clanak:last-child { padding-bottom: 88px; }

.nazad {
    max-width: 760px;
    margin: 56px auto 88px;
    padding: 26px 24px 0;
    border-top: 1px solid var(--boja-linija);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.nazad a { color: var(--boja-identitet); }


/* =====================================================================
   Prazno, greška, nacrt
   ===================================================================== */

.prazno-sajt,
.greska-sajt {
    text-align: center;
    padding: 80px 24px;
    color: var(--boja-siva);
}

.greska-sajt h1 {
    font-family: var(--font-naslov);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 42px);
    color: var(--boja-povrsina);
    margin-bottom: 12px;
}

.greska-sajt a { color: var(--boja-identitet); }

.traka-nacrta {
    max-width: 760px;
    margin: 24px auto 0;
    padding: 14px 20px;
    background: #FFF6DC;
    border: 1px solid #ECD9A0;
    color: #6B5410;
    font-size: 14px;
    text-align: center;
}


/* =====================================================================
   Telefon
   ===================================================================== */

@media (max-width: 760px) {
    .clanak { padding: 44px 20px 0; }

    /* Na telefonu je slika ionako uska, a ekran nizak: ograničenje
       visine bi je nepotrebno smanjilo. */
    .clanak__slika img,
    .slika-u-tekstu img { max-height: none; }

    .clanak__slika,
    .clanak__telo .galerija,
    .clanak__telo .klizac {
        width: calc(100% + 40px);
        margin-left: -20px;
        transform: none;
    }

    .clanak__telo { font-size: 16.5px; }

    .nazad { padding-left: 20px; padding-right: 20px; margin-bottom: 56px; }

    .clanak:last-child { padding-bottom: 56px; }

    .strane-sajt { font-size: 12px; gap: 12px; }
}


/* =====================================================================
   Naslovna strana — dopune

   Osnovni izgled dolazi iz css/style.css; ovde je samo ono što u njemu
   ne postoji, jer ranije nije ni bilo moguće.
   ===================================================================== */

/* Broj kolona u mreži vesti sada zadaje administracija. */
.vesti-mreza {
    grid-template-columns: repeat(var(--po-redu, 3), minmax(0, 1fr));
}


/* --- Klizač u odeljku vesti ------------------------------------------ */

.vesti-klizac {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.vesti-klizac::-webkit-scrollbar { display: none; }

.vesti-klizac .vest {
    flex: 0 0 calc((100% - (var(--po-redu, 4) - 1) * 24px) / var(--po-redu, 4));
    scroll-snap-align: start;
}

.klizac-dugmad {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.klizac-dugmad .klizac__dugme {
    position: static;
    transform: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--boja-povrsina);
    background: transparent;
    border: 1px solid var(--boja-linija);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: none;
}

.klizac-dugmad .klizac__dugme:hover {
    background: var(--boja-identitet);
    border-color: var(--boja-identitet);
    color: #fff;
}

.klizac-dugmad .klizac__dugme[hidden] { display: none; }


/* --- Meni: podgrupa i oznaka „novo“ ---------------------------------- */

.menu-podgrupa {
    margin: 18px 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .55;
}

.menu-novo {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--boja-identitet);
    border-radius: 999px;
    vertical-align: 2px;
}


/* --- Program: opis termina ------------------------------------------- */

.agenda-opis {
    margin-top: 6px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--boja-siva);
}


@media (max-width: 900px) {
    .vesti-mreza { grid-template-columns: repeat(min(var(--po-redu, 3), 2), minmax(0, 1fr)); }
    .vesti-klizac .vest { flex-basis: calc((100% - 24px) / 2); }
}

@media (max-width: 620px) {
    .vesti-mreza { grid-template-columns: 1fr; }
    .vesti-klizac .vest { flex-basis: 82%; }
}


/* Sa jednim slajdom strelice i tačkice nemaju svrhu. Atribut hidden
   sam po sebi ne bi bio dovoljan, jer im style.css zadaje prikaz. */
.hero-strelica[hidden],
.hero-tacke[hidden] { display: none !important; }


/* =====================================================================
   Kontrole hera: prigušene dok se ne priđe

   Strelice i tačkice su tu kad zatrebaju, ali ne otimaju pažnju od
   slike. Čim miš pređe preko hera, vraćaju se u punu vidljivost.

   Pravilo važi samo tamo gde miš postoji. Na dodirnim ekranima nema
   prelaza mišem, pa bi kontrole ostale zauvek prigušene — a tamo su
   strelice ionako skrivene i menja se prevlačenjem.
   ===================================================================== */

@media (hover: hover) and (pointer: fine) {

    .hero-strelica,
    .hero-tacke {
        opacity: .35;
        transition: opacity .3s ease, background-color var(--prelaz);
    }

    .hero:hover .hero-strelica,
    .hero:hover .hero-tacke {
        opacity: 1;
    }

    /* Kad se dođe tastaturom, kontrole moraju biti vidljive iako miš
       nije nad herom. */
    .hero:focus-within .hero-strelica,
    .hero:focus-within .hero-tacke,
    .hero-strelica:focus-visible {
        opacity: 1;
    }
}


/* =====================================================================
   Prečice u vrhu naslovne

   Poluprozirne, sa belim obrisom: na herou se vide kao staklo, a kad
   se traka pri pomeranju oboji, ostaju čitljive bez izmene. Puna boja
   bi na svetlim slikama bila mrlja, a potpuno prozirne bi se izgubile.
   ===================================================================== */

.precice {
    display: flex;
    align-items: center;
    gap: 10px;

    /* Kad se prođe hero, prečice se povuku naviše i nestanu — ispod
       njih počinje tekst, a tamo bi samo smetale. */
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
}

.precice--sakrivene {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
}

/* Dok je meni otvoren, prečice se sklanjaju. One stoje u traci, a
   traka ostaje iznad menija — pa bi inače stajale preko njega. */
body.menu-otvoren .precice {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.precica {
    display: inline-block;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;

    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    backdrop-filter: blur(4px);

    transition: background-color .25s ease, border-color .25s ease,
                color .25s ease;

    /* Tri otkucaja pri učitavanju, pa mir. Dovoljno da se primeti,
       prekratko da smeta. Svaka sledeća kreće malo kasnije, pa deluje
       kao talas umesto kao treptaj table. */
    animation: precica-otkucaj 1.1s ease-in-out var(--kasnjenje, 0ms) 3;
}

.precica:hover,
.precica:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--boja-povrsina);
    animation: none;   /* dodir prekida pozivanje na pažnju */
}

@keyframes precica-otkucaj {
    0%, 100% {
        background: rgba(255, 255, 255, .12);
        border-color: rgba(255, 255, 255, .55);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
    50% {
        background: rgba(255, 255, 255, .3);
        border-color: #fff;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, .12);
    }
}

/* Ko je u podešavanjima tražio manje kretanja, ne dobija otkucaje. */
@media (prefers-reduced-motion: reduce) {
    .precica { animation: none; }
}


/* --- Desktop ---------------------------------------------------------
   Dok traka nije obojena, logotip je nevidljiv ali i dalje zauzima
   mesto — pa bi prečice iza njega završile na sredini. Zato se tada
   postavljaju uz samu levu ivicu, tačno tamo gde logotip inače stoji.

   Čim se traka oboji i logotip pojavi, prečice se vraćaju u red iza
   njega, da mu ne stoje preko.
   --------------------------------------------------------------------- */

@media (min-width: 900px) {

    .site-header .precice {
        margin-left: 28px;
        margin-right: auto;
        transition: left .3s ease, margin-left .3s ease;
    }

    .site-header:not(.skrolovan) .precice {
        position: absolute;
        left: max(24px, calc((100% - var(--sirina-max)) / 2 + 24px));
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
    }

    /* Ovde je transform već upotrebljen za centriranje, pa se
       sakrivanje ne sme osloniti na njega. */
    .site-header:not(.skrolovan) .precice--sakrivene {
        transform: translateY(-50%);
    }
}


/* --- Telefon ---------------------------------------------------------
   Prečice izlaze ispod trake umesto da stoje u njoj. Da su unutra,
   traka bi morala da poraste i priljubila bi se uz dugmad; ovako
   traka ostaje iste visine, a dugmad dobijaju vazduh oko sebe.
   --------------------------------------------------------------------- */

@media (max-width: 899px) {

    .site-header .precice {
        position: absolute;
        top: calc(var(--header-visina) + 14px);
        left: 20px;
        right: 20px;
        margin: 0;
        flex-wrap: wrap;
        gap: 8px;
    }

    .precica {
        padding: 6px 13px;
        font-size: 12px;
    }
}


/* --- Krupnije prečice -------------------------------------------------
   Prekidač u administraciji. Slovo je uvećano manje nego okvir: da je
   i ono dvostruko, bilo bi krupnije od naslova u herou i otimalo bi mu
   pažnju umesto da je usmerava.
   --------------------------------------------------------------------- */

.precice--krupne { gap: 14px; }

.precice--krupne .precica {
    padding: 14px 32px;
    font-size: 16px;
    letter-spacing: .07em;
    border-width: 1.5px;
}

@media (max-width: 899px) {
    .precice--krupne { gap: 10px; }

    .precice--krupne .precica {
        padding: 12px 26px;
        font-size: 14px;
    }
}


/* =====================================================================
   Prevod

   Googleov prevodilac dodaje na stranu svoj izbornik, traku na vrhu i
   oblačić nad prevedenim tekstom. Ništa od toga nam ne treba — jezik
   se bira vezama u meniju.

   Izbornik se ne sme ukloniti nego samo skloniti sa vidika: bez njega
   prevod nema šta da pokrene.
   ===================================================================== */

#prevodilac {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Traka koju Google ubacuje iznad strane i pomera sadržaj naniže. */
.skiptranslate iframe,
.goog-te-banner-frame { display: none !important; }

body { top: 0 !important; }

/* Oblačić koji iskače nad prevedenim tekstom. */
.goog-tooltip,
.goog-tooltip:hover { display: none !important; }

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}


/* =====================================================================
   Ostali jezici

   Spisak se otvara na mestu, ispod dugmeta, bez zatvaranja glavnog
   menija. Dugme je pisano istim slogom kao „Srpski“ i „English“, da
   deluje kao treća stavka istog reda, a ne kao nešto dodato.
   ===================================================================== */

.menu-lang__ostali { position: relative; }

.menu-lang__dugme {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--boja-siva);

    padding: 0 0 4px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;

    transition: color var(--prelaz), border-color var(--prelaz);
}

.menu-lang__dugme:hover { color: var(--boja-identitet); }

/* Kad je izabran neki od ostalih jezika, dugme se ponaša kao tekuća
   stavka — isto kao „Srpski“ i „English“ kad su izabrani. */
.menu-lang__dugme--izabran {
    color: var(--boja-tekst);
    border-color: var(--boja-identitet);
}

.menu-lang__strelica {
    width: 12px;
    height: 12px;
    transition: transform var(--prelaz);
}

.menu-lang__dugme[aria-expanded="true"] .menu-lang__strelica {
    transform: rotate(180deg);
}

.menu-lang__spisak {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 20;

    min-width: 170px;
    margin: 0;
    padding: 8px 0;
    list-style: none;

    background: var(--boja-pozadina, #FCFBF8);
    border: 1px solid var(--boja-linija);
    box-shadow: 0 14px 34px rgba(44, 26, 58, .18);
}

.menu-lang__spisak[hidden] { display: none; }

.menu-lang__spisak li { margin: 0; }

.menu-lang__spisak a {
    display: block;
    padding: 8px 18px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--boja-tekst);
    border-bottom: none;
    white-space: nowrap;
}

.menu-lang__spisak a:hover {
    background: var(--boja-identitet-blaga);
    color: var(--boja-identitet);
}

.menu-lang__spisak a[aria-current="true"] {
    color: var(--boja-identitet);
    font-weight: 600;
}

/* Meni je na telefonu poravnat ulevo, pa i spisak ide uz levu ivicu. */
@media (max-width: 899px) {
    .menu-lang__spisak { right: auto; left: 0; }
}


/* =====================================================================
   Pretraga

   Sloj preko strane: sadržaj ispod se vidi, ali zatamnjen, pa se zna
   gde si i kuda se vraćaš.
   ===================================================================== */

.sloj-pretrage[hidden] { display: none; }

.sloj-pretrage {
    position: fixed;
    inset: 0;
    z-index: 300;          /* iznad zaglavlja, ispod menija */

    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 18vh 20px 20px;

    background: rgba(28, 18, 40, .62);
    backdrop-filter: blur(3px);
    animation: pretraga-ulaz .22s ease-out;
}

@keyframes pretraga-ulaz {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.sloj-pretrage__okvir { width: min(80%, 860px); }

@media (max-width: 700px) {
    .sloj-pretrage { padding-top: 12vh; }
    .sloj-pretrage__okvir { width: 100%; }
}

.sloj-pretrage__forma {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #fff;
    box-shadow: 0 20px 50px rgba(28, 18, 40, .3);
}

.sloj-pretrage__polje {
    flex: 1;
    min-width: 0;
    padding: 18px 20px;
    font-family: var(--font-tekst);
    font-size: 19px;
    color: var(--boja-tekst);
    background: none;
    border: none;
    outline: none;
}

.sloj-pretrage__polje::placeholder { color: #9a9490; }

/* Browseri sami dodaju svoj iks u polje tipa search — imamo svoj. */
.sloj-pretrage__polje::-webkit-search-cancel-button { display: none; }

.sloj-pretrage__brisi {
    padding: 0 14px;
    font-size: 26px;
    line-height: 1;
    color: #9a9490;
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--prelaz);
}

.sloj-pretrage__brisi:hover { color: var(--boja-povrsina); }
.sloj-pretrage__brisi[hidden] { display: none; }

.sloj-pretrage__trazi {
    padding: 0 30px;
    font-family: var(--font-tekst);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--boja-identitet);
    border: none;
    cursor: pointer;
    transition: background-color var(--prelaz);
}

.sloj-pretrage__trazi:hover { background: var(--boja-povrsina); }

.sloj-pretrage__savet {
    margin-top: 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
    text-align: center;
}


/* --- Predlozi --------------------------------------------------------- */

.sloj-pretrage__predlozi {
    margin-top: 2px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(28, 18, 40, .3);
    max-height: 46vh;
    overflow-y: auto;
}

.sloj-pretrage__predlozi[hidden] { display: none; }

.predlog {
    display: block;
    padding: 13px 20px;
    color: var(--boja-tekst);
    text-decoration: none;
    border-bottom: 1px solid var(--boja-linija);
}

.predlog:last-child { border-bottom: none; }

.predlog:hover { background: var(--boja-identitet-blaga); }

.predlog__oznaka {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--boja-identitet);
    margin-bottom: 3px;
}

.predlog__naslov {
    display: block;
    font-family: var(--font-naslov);
    font-size: 17px;
    line-height: 1.35;
}

.predlog--prazno {
    margin: 0;
    padding: 16px 20px;
    color: var(--boja-siva);
    font-size: 14px;
}

/* Dok je sloj otvoren, strana ispod se ne pomera. */
body.pretraga-otvorena { overflow: hidden; }


/* --- Stranica sa rezultatima ------------------------------------------ */

.pretraga-forma {
    display: flex;
    gap: 0;
    max-width: 620px;
    margin: -14px 0 30px;
    border: 1px solid var(--boja-linija);
}

.pretraga-forma__polje {
    flex: 1;
    min-width: 0;
    padding: 13px 16px;
    font-family: var(--font-tekst);
    font-size: 16px;
    border: none;
    outline: none;
    background: #fff;
}

.pretraga-forma__dugme {
    padding: 0 24px;
    font-family: var(--font-tekst);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--boja-identitet);
    border: none;
    cursor: pointer;
}

.pretraga-broj {
    margin: 0 0 26px;
    font-size: 14px;
    color: var(--boja-siva);
}


/* --- Stranica rezultata: obrazac i broj ------------------------------- */

/* Broj rezultata stoji uz naslov odeljka, kao veza „vidi sve“ kod
   ostalih odeljaka — ali se ne klikće, pa nema ni podvlaku. */
.sekcija-link--tiho {
    color: var(--boja-siva);
    cursor: default;
    border-bottom: none;
}

.sekcija-link--tiho:hover { color: var(--boja-siva); }


/* =====================================================================
   Knjiga — listanje PDF dokumenata
   ===================================================================== */

/* Knjiga je šira od kolone teksta, pa izlazi iz nje. Podrazumevano je
   centrirana; poravnanje zadato u uređivaču je pomera.
   
   Piše se kao `.clanak__telo .knjiga` namerno: pravilo koje pasusima
   daje razmak zahvata i div, pa bi inače poništilo levu marginu i
   knjiga bi ostala pomerena za pola širine ulevo. */
.knjiga,
.clanak__telo .knjiga {
    position: relative;
    width: min(100vw - 48px, 1000px);
    margin: 48px 0 48px 50%;
    transform: translateX(-50%);
}

/* Poravnanje uz desnu ivicu teksta. */
.clanak__telo .poravnaj-desno .knjiga,
.clanak__telo .poravnaj-desno.knjiga {
    margin-left: 100%;
    transform: translateX(-100%);
}

/* U celom ekranu okvir nije u koloni teksta, pa mu centriranje
   preko margine ne treba. */
.knjiga:fullscreen,
.clanak__telo .knjiga:fullscreen {
    margin: 0;
    transform: none;
}

/* Poravnanje uz levu ivicu.
   Obostrano se namerno ne računa: tekst se tako slaže po celoj širini,
   ali knjiga tada treba da ostane u sredini — a pasusi su najčešće
   baš obostrano poravnati. */
.clanak__telo .poravnaj-levo .knjiga,
.clanak__telo .poravnaj-levo.knjiga {
    margin-left: 0;
    transform: none;
}

.knjiga__platno {
    /* Biblioteka unutra pravi svoj element sa tačno zadatom širinom.
       Kad je knjiga uža od okvira, taj element se lepi uz levu ivicu —
       zato se centrira ovde, a ne samo okvir oko njega. */
    display: flex;
    justify-content: center;

    /* Sadržaj se pojavljuje tek kad biblioteka složi strane; do tada
       stoji mirna površina umesto gomile slika jedne ispod druge. */
    visibility: hidden;
}

/* Element koji biblioteka sama napravi. */
.knjiga__platno > * { margin-left: auto; margin-right: auto; }

.knjiga--spremna .knjiga__platno { visibility: visible; }

.knjiga__list {
    background: #fff;
    box-shadow: 0 1px 3px rgba(44, 26, 58, .18);
}

.knjiga__list img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.knjiga__trake {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 20px;

    /* Biblioteka postavlja stranice apsolutno i one se pri listanju
       šire preko svog okvira. Bez ovoga prekriju traku i progutaju
       klikove, iako se ne vide. */
    position: relative;
    z-index: 5;
}

.knjiga__dugme {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--boja-povrsina);
    background: transparent;
    border: 1px solid var(--boja-linija);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--prelaz), color var(--prelaz),
                border-color var(--prelaz);
}

.knjiga__dugme:hover {
    background: var(--boja-identitet);
    border-color: var(--boja-identitet);
    color: #fff;
}

.knjiga__broj {
    min-width: 88px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--boja-siva);
}

.knjiga__preuzmi {
    margin-left: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--boja-identitet);
}

.knjiga__bez-skripte {
    padding: 24px;
    text-align: center;
    background: var(--boja-identitet-blaga);
}

/* Izlaz iz celog ekrana. Esc radi, ali se toga ne seti svako — bez
   vidljivog izlaza se lako oseti zarobljeno. */
.knjiga__izlaz {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 9px 16px 9px 13px;
    font: inherit;
    font-size: 1.15rem;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background-color var(--prelaz), color var(--prelaz);
}

.knjiga__izlaz span {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.knjiga__izlaz:hover { background: #fff; color: #14101c; }

.knjiga__izlaz[hidden] { display: none; }

.knjiga__dugme[hidden] { display: none; }


/* U celom ekranu knjiga dobija tamnu podlogu, da se strane odvoje od
   pozadine i da svetlo sa strane ne odvlači pogled. */
.knjiga:fullscreen {
    width: 100%;
    height: 100%;
    padding: 20px 24px 16px;
    background: #14101c;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Platno ne sme da preraste svoje mesto i pojede traku ispod. */
.knjiga:fullscreen .knjiga__platno {
    flex: 0 1 auto;
    min-height: 0;
    justify-content: center;
}

.knjiga:fullscreen .knjiga__trake {
    flex: 0 0 auto;
    margin-top: 16px;
}

.knjiga:fullscreen .knjiga__dugme {
    color: #fff;
    border-color: rgba(255, 255, 255, .4);
}

.knjiga:fullscreen .knjiga__broj { color: rgba(255, 255, 255, .75); }


@media (max-width: 760px) {
    .knjiga {
        width: calc(100% + 40px);
        margin-left: -20px;
        transform: none;
    }

    .knjiga__trake { gap: 10px; }
    .knjiga__dugme { width: 38px; height: 38px; }
}