:root {


--zelena: #235347;
--zelena-hover: #2FA98C;
--tamno: #0b0b0f;
--tamno-2: #101114;
--tekst: #c3e8cf;
--glass: rgba(255,255,255,0.07);
--glass-border: rgba(35,83,71,0.45);


}

* {
  box-sizing: border-box;
  }

html,
body {


width: 100%;
height: 100%;

margin: 0;
padding: 0;

font-family: 'Montserrat', sans-serif;

background: var(--tamno);
color: var(--tekst);


}

body {
overflow: hidden;
}

.encyclopedia-page {


width: 100%;
height: 100vh;

display: flex;
flex-direction: column;

background: var(--tamno);


}

/* =========================================================
HEADER — сад у subHeaderStyle.css (дели се са 360.php)
========================================================= */

/* =========================================================
MAIN
========================================================= */

.encyclopedia-main {


flex: 1;

min-height: 0;

display: grid;

grid-template-columns:

    300px

    280px

    minmax(0, 1fr)

    300px;

gap: 0;


}

/* =========================================================
PANELS
========================================================= */

.encyclopedia-panel {


min-width: 0;

min-height: 0;

background:

    linear-gradient(

        180deg,

        rgba(255,255,255,0.025),

        rgba(255,255,255,0.01)

    );

position: relative;


}

/*
 * ЛЕВИ ПАНЕЛИ (категорије и појмови) —
 * зелени shadow на ДЕСНОЈ ивици.
 * Користимо предефинисану --zelena боју.
 */

.encyclopedia-panel-categories,
.encyclopedia-panel-items {


border-right:

    1px solid color-mix(

        in srgb,

        var(--zelena) 55%,

        transparent

    );

box-shadow:

    inset -1px 0 0 color-mix(

        in srgb,

        var(--zelena) 45%,

        transparent

    ),

    8px 0 24px color-mix(

        in srgb,

        var(--zelena) 16%,

        transparent

    );


}

/*
 * ДЕСНИ ПАНЕЛ (инфо) —
 * зелени shadow на ЛЕВОЈ ивици.
 */

.encyclopedia-panel-info {


border-left:

    1px solid color-mix(

        in srgb,

        var(--zelena) 55%,

        transparent

    );

box-shadow:

    inset 1px 0 0 color-mix(

        in srgb,

        var(--zelena) 45%,

        transparent

    ),

    -8px 0 24px color-mix(

        in srgb,

        var(--zelena) 16%,

        transparent

    );


}

.encyclopedia-panel-content {


width: 100%;

height: 100%;

overflow-y: auto;

padding: 18px;


}

.encyclopedia-panel-content::-webkit-scrollbar,
.encyclopedia-list-scroll::-webkit-scrollbar {


width: 5px;


}

.encyclopedia-panel-content::-webkit-scrollbar-track,
.encyclopedia-list-scroll::-webkit-scrollbar-track {


background: transparent;


}

.encyclopedia-panel-content::-webkit-scrollbar-thumb,
.encyclopedia-list-scroll::-webkit-scrollbar-thumb {


background: rgba(255,255,255,0.12);

border-radius: 10px;


}

/* =========================================================
ПАНЕЛ 1 — ДВЕ ЛИСТЕ НА ПО ПОЛА ВИСИНЕ
========================================================= */

.encyclopedia-panel-content-split {


display: flex;

flex-direction: column;

overflow: hidden;

gap: 10px;


}

/* =========================================================
TAB ДУГМАД (Регистар / Листе)
========================================================= */

.encyclopedia-panel-tabs {


flex-shrink: 0;

display: flex;

gap: 6px;

padding: 2px;

border-radius: 10px;

background: rgba(255,255,255,0.03);

border: 1px solid rgba(255,255,255,0.06);


}

.encyclopedia-panel-tab {


flex: 1;

padding: 8px 10px;

border: none;

border-radius: 8px;

background: transparent;

color: var(--tekst);

font-family: 'Montserrat', sans-serif;

font-size: 12px;

font-weight: 600;

opacity: 0.6;

cursor: pointer;

transition:

    background 0.2s ease,

    opacity 0.2s ease;


}

.encyclopedia-panel-tab:hover {


opacity: 0.85;


}

.encyclopedia-panel-tab.active {


background:

    color-mix(

        in srgb,

        var(--zelena) 55%,

        transparent

    );

opacity: 1;


}

/* =========================================================
TAB САДРЖАЈ
========================================================= */

.encyclopedia-panel-tab-content {


display: none;

flex-direction: column;

flex: 1;

min-height: 0;

gap: 10px;


}

.encyclopedia-panel-tab-content.active {


display: flex;


}

.encyclopedia-list-section {


flex: 1;

min-height: 0;

display: flex;

flex-direction: column;


}

.encyclopedia-list-section-full {


flex: 1;


}

.encyclopedia-list-scroll-wrapper {


position: relative;

flex: 1;

min-height: 0;

overflow: hidden;


}

.encyclopedia-list-scroll {


width: 100%;

height: 100%;

overflow-y: auto;


}

/*
 * GLOW/FADE ефекат горе и доле —
 * листа "нестаје" у зеленом сјају при скролу.
 */

.encyclopedia-list-fade {


position: absolute;

left: 0;

right: 0;

height: 28px;

pointer-events: none;

z-index: 4;


}

.encyclopedia-list-fade-top {


top: 0;

background:

    linear-gradient(

        to bottom,

        color-mix(in srgb, var(--zelena) 60%, var(--tamno)),

        transparent

    );


}

.encyclopedia-list-fade-bottom {


bottom: 0;

background:

    linear-gradient(

        to top,

        color-mix(in srgb, var(--zelena) 60%, var(--tamno)),

        transparent

    );


}

/* =========================================================
CARD CONTAINER
========================================================= */

.encyclopedia-card-container {


display: flex;

flex-direction: column;

gap: 0;


}

/* =========================================================
PANEL DIVIDER (наслови листи у панелу 1)
========================================================= */

.encyclopedia-panel-divider {


font-size: 11px;

font-weight: 600;

letter-spacing: 1px;

text-transform: uppercase;

opacity: 0.5;

padding: 2px 10px 6px;


}

.encyclopedia-panel-divider-mesta {


border-top: 1px solid rgba(255,255,255,0.06);

padding-top: 8px;


}

.encyclopedia-places-placeholder {


font-size: 12px;

opacity: 0.4;

padding: 8px 10px;


}

/* =========================================================
РЕД КАТЕГОРИЈЕ (дугме + checkbox)
========================================================= */

.encyclopedia-category-row {


display: flex;

align-items: center;

gap: 8px;


}

.encyclopedia-category-row .encyclopedia-card-button {


flex: 1;

min-width: 0;


}

.encyclopedia-category-checkbox {


appearance: none;

-webkit-appearance: none;

flex-shrink: 0;

width: 18px;

height: 18px;

margin: 0;

position: relative;

border-radius: 5px;

border:

    1.5px solid color-mix(

        in srgb,

        var(--zelena-hover) 55%,

        transparent

    );

background: rgba(255,255,255,0.03);

cursor: pointer;

transition:

    background 0.2s ease,

    border-color 0.2s ease;


}

.encyclopedia-category-checkbox:hover {


border-color: var(--zelena-hover);


}

.encyclopedia-category-checkbox:checked {


background: var(--zelena-hover);

border-color: var(--zelena-hover);


}

.encyclopedia-category-checkbox:checked::after {


content: "";

position: absolute;

left: 5px;

top: 1px;

width: 5px;

height: 9px;

border: solid var(--tamno);

border-width: 0 2px 2px 0;

transform: rotate(45deg);


}

/* =========================================================
CARDS — ИЗГЛЕД ЛИСТЕ
========================================================= */

.encyclopedia-card {


width: 100%;


}

.encyclopedia-card-button {


width: 100%;

min-height: 44px;

padding: 12px 10px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 8px;

border: none;

border-bottom: 1px solid rgba(255,255,255,0.06);

border-left: 3px solid transparent;

border-radius: 0;

background: transparent;

color: var(--tekst);

font-family: 'Montserrat', sans-serif;

font-size: 13px;

font-weight: 500;

text-align: left;

cursor: pointer;

transition:

    background 0.2s ease,

    border-color 0.2s ease,

    padding-left 0.2s ease;


}

.encyclopedia-category-name {


min-width: 0;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;


}

.encyclopedia-category-count {


flex-shrink: 0;

min-width: 20px;

padding: 1px 7px;

border-radius: 999px;

background: rgba(255,255,255,0.06);

color: var(--tekst);

font-size: 10px;

font-weight: 600;

text-align: center;

opacity: 0.75;


}

.encyclopedia-card-button:hover {


background: rgba(255,255,255,0.05);

border-left-color: var(--card-accent);

padding-left: 14px;


}

.encyclopedia-card-button.active {


background:

    color-mix(

        in srgb,

        var(--card-accent) 16%,

        transparent

    );

border-left-color: var(--card-accent);

padding-left: 14px;


}

/* =========================================================
CENTER
========================================================= */

.encyclopedia-center {


min-width: 0;

min-height: 0;

display: grid;

grid-template-rows: 1fr 4fr;

background: var(--tamno-2);


}

/* =========================================================
HERO
========================================================= */

.encyclopedia-hero {


position: relative;

min-height: 0;

overflow: hidden;


}

.encyclopedia-hero-image {


width: 100%;

height: 100%;

object-fit: cover;

display: block;


}

.encyclopedia-hero::after {


content: "";

position: absolute;

inset: 0;

background:

    linear-gradient(

        to bottom,

        rgba(0,0,0,0.02),

        rgba(0,0,0,0.45)

    );

pointer-events: none;


}

.encyclopedia-hero-text {


position: absolute;

left: 0;

right: 0;

bottom: 0;

padding: 20px 28px;

z-index: 2;


}

.encyclopedia-object-title {


font-size: clamp(22px, 2.2vw, 38px);

font-weight: 600;

letter-spacing: 0.5px;

text-shadow:

    0 2px 12px rgba(0,0,0,0.8);


}

/* =========================================================
DONJA SLIKA
========================================================= */

.encyclopedia-image-section {


position: relative;

min-height: 0;

overflow: hidden;


}

.encyclopedia-section-image {


width: 100%;

height: 100%;

object-fit: cover;

display: block;


}

.encyclopedia-image-section::after {


content: "";

position: absolute;

inset: 0;

background:

    linear-gradient(

        180deg,

        rgba(0,0,0,0.08),

        rgba(0,0,0,0.35)

    );

pointer-events: none;


}

/* =========================================================
ЗЕЛЕНИ GLASS DIV — смањен height
========================================================= */

.encyclopedia-green-box {


position: absolute;

top: 0;

left: 0;

right: 0;

width: 100%;

height: 60px;

background: color-mix(in srgb, var(--zelena) 55%, transparent);

border:
    1px solid color-mix(in srgb, var(--zelena) 55%, transparent);

border-top: none;

border-left: none;

border-right: none;

border-radius: 0;

backdrop-filter: blur(12px);

-webkit-backdrop-filter: blur(12px);

z-index: 2;


}

/* =========================================================
GLASS SADRŽAJ — одвојен од зеленог дива
========================================================= */

.encyclopedia-image-content {


position: absolute;

top: 76px;

left: 10%;

right: 10%;

bottom: 18px;

padding: 22px;

overflow-y: auto;

background:

    rgba(255,255,255,0.08);

border:

    1px solid rgba(255,255,255,0.12);

border-radius: 12px;

backdrop-filter: blur(14px);

-webkit-backdrop-filter: blur(14px);

color: var(--tekst);

font-size: 14px;

line-height: 1.75;

white-space: pre-line;

z-index: 3;


}

.encyclopedia-image-content::-webkit-scrollbar {


width: 5px;


}

.encyclopedia-image-content::-webkit-scrollbar-thumb {


background: rgba(255,255,255,0.14);

border-radius: 10px;


}

/* =========================================================
INFO PANEL
========================================================= */

.encyclopedia-info {


width: 100%;

height: 100%;

min-height: 100%;

display: flex;

flex-direction: column;

gap: 14px;


}

.encyclopedia-info-image {


width: 100%;

aspect-ratio: 16 / 10;

object-fit: cover;

display: block;

border-radius: 10px;


}


.encyclopedia-info-image-nedostupna {

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--glass);

    border: 1px solid var(--glass-border);

    color: var(--tekst);

    opacity: .55;

    font-size: .85rem;

    font-weight: 500;

    text-align: center;

}

.encyclopedia-info-basic {


padding: 0;

background: transparent;

border: none;

display: flex;

flex-direction: column;

gap: 8px;


}

.encyclopedia-info-row {


display: flex;

flex-direction: column;

gap: 3px;


}

.encyclopedia-info-label {


font-size: 10px;

font-weight: 600;

letter-spacing: 1px;

text-transform: uppercase;

opacity: 0.45;


}

.encyclopedia-info-value {


font-size: 12px;

font-weight: 500;

line-height: 1.5;


}

/* =========================================================
INFO PLACEHOLDER
========================================================= */

.encyclopedia-info-placeholder {


width: 100%;

height: 100%;

min-height: 100%;

display: flex;

align-items: center;

justify-content: center;

text-align: center;


}

.encyclopedia-info-placeholder-title {


font-size: 16px;

font-weight: 500;

opacity: 0.55;


}

/* =========================================================
DUGMAD
========================================================= */

.encyclopedia-info-buttons {


margin-top: auto;

display: grid;

grid-template-columns:

    repeat(2, minmax(0, 1fr));

gap: 8px;


}

.encyclopedia-info-button {


width: 100%;

min-width: 0;

min-height: 52px;

padding: 10px 8px;

display: flex;

align-items: center;

justify-content: center;

text-align: center;

line-height: 1.25;

border:

    1px solid rgba(35,83,71,0.55);

border-radius: 9px;

background:

    rgba(35,83,71,0.18);

color: var(--tekst);

font-family: 'Montserrat', sans-serif;

font-size: 11px;

font-weight: 600;

cursor: pointer;

transition: 0.2s ease;


}

.encyclopedia-info-button:hover {


background:

    rgba(35,83,71,0.35);

border-color:

    var(--zelena-hover);


}

/* =========================================================
ГАЛЕРИЈА — POPUP/LIGHTBOX
========================================================= */

.encyclopedia-gallery-overlay {


display: none;

position: fixed;

inset: 0;

background: rgba(0,0,0,0.75);

backdrop-filter: blur(4px);

-webkit-backdrop-filter: blur(4px);

z-index: 100;

align-items: center;

justify-content: center;

padding: 24px;


}

.encyclopedia-gallery-overlay.active {


display: flex;


}

.encyclopedia-gallery-modal {


width: min(1100px, 95vw);

height: min(680px, 100%);

display: flex;

flex-direction: column;

background: var(--glass);

backdrop-filter: blur(18px);

-webkit-backdrop-filter: blur(18px);

border:

    1px solid color-mix(

        in srgb,

        var(--zelena) 55%,

        transparent

    );

border-radius: 14px;

box-shadow:

    0 0 40px color-mix(

        in srgb,

        var(--zelena) 25%,

        transparent

    );

overflow: hidden;


}

.encyclopedia-gallery-header {


flex-shrink: 0;

display: flex;

align-items: center;

justify-content: space-between;

padding: 16px 20px;

border-bottom:

    1px solid color-mix(

        in srgb,

        var(--zelena) 45%,

        transparent

    );


}

.encyclopedia-gallery-title {


font-size: 15px;

font-weight: 600;


}

.encyclopedia-gallery-close {


width: 32px;

height: 32px;

display: flex;

align-items: center;

justify-content: center;

border: none;

border-radius: 8px;

background: transparent;

color: var(--tekst);

font-size: 16px;

cursor: pointer;

transition: background 0.2s ease, color 0.2s ease;


}

.encyclopedia-gallery-close:hover {


background: var(--glass);

color: var(--zelena-hover);


}

/* =========================================================
FILTER ДУГМАД
========================================================= */

.encyclopedia-gallery-filters {


flex-shrink: 0;

display: flex;

gap: 8px;

padding: 12px 20px;

border-bottom:

    1px solid rgba(255,255,255,0.06);


}

.encyclopedia-gallery-filter {


padding: 6px 14px;

border-radius: 999px;

border:

    1px solid color-mix(

        in srgb,

        var(--zelena-hover) 45%,

        transparent

    );

background: transparent;

color: var(--tekst);

font-family: 'Montserrat', sans-serif;

font-size: 12px;

font-weight: 500;

cursor: pointer;

transition:

    background 0.2s ease,

    border-color 0.2s ease,

    color 0.2s ease;


}

.encyclopedia-gallery-filter:hover {


border-color: var(--zelena-hover);


}

.encyclopedia-gallery-filter.active {


background: var(--zelena-hover);

border-color: var(--zelena-hover);

color: var(--tamno);


}

/* =========================================================
BODY / GRID
========================================================= */

.encyclopedia-gallery-body {


flex: 1;

min-height: 0;

overflow-y: auto;

padding: 20px;


}

.encyclopedia-gallery-body::-webkit-scrollbar {


width: 5px;


}

.encyclopedia-gallery-body::-webkit-scrollbar-thumb {


background: rgba(255,255,255,0.14);

border-radius: 10px;


}

.encyclopedia-gallery-grid {


display: grid;

grid-template-columns:

    repeat(3, 1fr);

gap: 14px;


}

/* =========================================================
GALLERY ITEM
========================================================= */

.encyclopedia-gallery-item {


display: block;

text-decoration: none;


}

.encyclopedia-gallery-item.encyclopedia-gallery-hidden {


display: none;


}

.encyclopedia-gallery-item-inner {


position: relative;

width: 100%;

aspect-ratio: 3 / 2;

overflow: hidden;

border-radius: 10px;

border:

    1px solid rgba(255,255,255,0.08);

background: rgba(255,255,255,0.03);

cursor: pointer;


}

.encyclopedia-gallery-item-inner img,
.encyclopedia-gallery-item-inner video {


width: 100%;

height: 100%;

object-fit: cover;

display: block;

transition: transform 0.3s ease;


}

.encyclopedia-gallery-item-inner:hover img,
.encyclopedia-gallery-item-inner:hover video {


transform: scale(1.06);


}

.encyclopedia-gallery-overlay-icon {


position: absolute;

inset: 0;

display: flex;

align-items: center;

justify-content: center;

background: rgba(0,0,0,0.35);

opacity: 0;

transition: opacity 0.2s ease;

pointer-events: none;


}

.encyclopedia-gallery-item-inner:hover .encyclopedia-gallery-overlay-icon {


opacity: 1;


}

.encyclopedia-gallery-overlay-icon span {


font-size: 26px;

font-weight: 600;

color: #fff;

text-shadow: 0 2px 8px rgba(0,0,0,0.6);


}

.encyclopedia-gallery-video-badge {


position: absolute;

top: 8px;

right: 8px;

padding: 2px 7px;

border-radius: 5px;

background: rgba(0,0,0,0.6);

color: #fff;

font-size: 10px;

line-height: 1.6;

pointer-events: none;


}

/* =========================================================
LOADING / EMPTY / NO RESULTS
========================================================= */

.encyclopedia-gallery-loading,
.encyclopedia-gallery-empty {


text-align: center;

opacity: 0.5;

font-size: 13px;

padding: 40px 0;


}

.encyclopedia-gallery-no-results {


display: none;

text-align: center;

opacity: 0.5;

font-size: 13px;

padding: 40px 0;


}

.encyclopedia-gallery-no-results.visible {


display: block;


}

/* =========================================================
360° ПРИКАЗ — POPUP СА THUMBNAIL-ОВИМА

(наслеђује .encyclopedia-gallery-overlay/-modal
изглед, само мења класу оверлеја)
========================================================= */

.encyclopedia-360-overlay {


display: none;

position: fixed;

inset: 0;

background: rgba(0,0,0,0.75);

backdrop-filter: blur(4px);

-webkit-backdrop-filter: blur(4px);

z-index: 100;

align-items: center;

justify-content: center;

padding: 24px;


}

.encyclopedia-360-overlay.active {


display: flex;


}

.encyclopedia-360-thumb {


display: flex;

flex-direction: column;

gap: 8px;

border: none;

background: transparent;

padding: 0;

cursor: pointer;

font-family: 'Montserrat', sans-serif;

color: var(--tekst);

text-align: left;


}

.encyclopedia-360-thumb .encyclopedia-gallery-item-inner {


aspect-ratio: 3 / 2;


}

.encyclopedia-360-thumb-naziv {


font-size: 12px;

font-weight: 500;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

padding: 0 2px;


}

/* =========================================================
360° ПРИКАЗ — ВЕЛИКИ POPUP (PANNELLUM)
========================================================= */

.encyclopedia-360-viewer-overlay {


display: none;

position: fixed;

inset: 0;

background: rgba(0,0,0,0.88);

z-index: 110;

align-items: center;

justify-content: center;

padding: 24px;


}

.encyclopedia-360-viewer-overlay.active {


display: flex;


}

.encyclopedia-360-viewer-modal {


width: min(1300px, 96vw);

height: min(820px, 92vh);

display: flex;

flex-direction: column;

background: var(--tamno-2);

border:

    1px solid color-mix(

        in srgb,

        var(--zelena) 55%,

        transparent

    );

border-radius: 14px;

box-shadow:

    0 0 50px color-mix(

        in srgb,

        var(--zelena) 25%,

        transparent

    );

overflow: hidden;


}

.encyclopedia-360-viewer-header {


flex-shrink: 0;

display: flex;

align-items: center;

gap: 12px;

padding: 14px 20px;

border-bottom:

    1px solid color-mix(

        in srgb,

        var(--zelena) 45%,

        transparent

    );


}

.encyclopedia-360-viewer-back {


width: 32px;

height: 32px;

flex-shrink: 0;

display: flex;

align-items: center;

justify-content: center;

border: none;

border-radius: 8px;

background: transparent;

color: var(--tekst);

font-size: 20px;

cursor: pointer;

transition: background 0.2s ease, color 0.2s ease;


}

.encyclopedia-360-viewer-back:hover {


background: var(--glass);

color: var(--zelena-hover);


}

.encyclopedia-360-viewer-title-group {


flex: 1;

min-width: 0;

display: flex;

align-items: center;

justify-content: center;

gap: 12px;


}

.encyclopedia-360-viewer-title {


min-width: 0;

max-width: 60%;

font-size: 15px;

font-weight: 600;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

text-align: center;


}

.encyclopedia-360-viewer-stage {


position: relative;

flex: 1;

min-height: 0;

background: #000;


}

.encyclopedia-360-panorama {


width: 100%;

height: 100%;


}

.encyclopedia-360-nav {


flex-shrink: 0;

width: 32px;

height: 32px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

border: 1px solid rgba(47,169,140,0.4);

background: rgba(255,255,255,0.03);

color: var(--tekst);

font-size: 19px;

cursor: pointer;

transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;


}

.encyclopedia-360-nav:hover {


background: rgba(35,83,71,0.75);

border-color: var(--zelena-hover);


}

.encyclopedia-360-nav:disabled {


opacity: 0.25;

cursor: not-allowed;

background: rgba(255,255,255,0.03);

border-color: rgba(47,169,140,0.4);


}

.encyclopedia-360-viewer-description {


flex-shrink: 0;

max-height: 22%;

overflow-y: auto;

padding: 16px 20px;

border-top: 1px solid rgba(255,255,255,0.08);


}

.encyclopedia-360-viewer-description:empty {


display: none;


}

.encyclopedia-360-viewer-description .description-label {


margin-bottom: 8px;

font-size: 10px;

letter-spacing: 2px;

opacity: 0.45;

text-transform: uppercase;


}

.encyclopedia-360-viewer-description .description-text {


font-size: 13px;

line-height: 1.7;

color: rgba(195,232,207,0.8);


}

.encyclopedia-360-viewer-description .location-details {


margin-top: 12px;


}

.encyclopedia-360-viewer-description .location-details summary {


cursor: pointer;

font-size: 12px;

color: var(--zelena-hover);


}

.encyclopedia-360-viewer-description .location-info-text {


margin-top: 8px;

padding: 10px;

border-radius: 7px;

background: rgba(255,255,255,0.035);

font-size: 12px;

line-height: 1.6;


}

/*
 * Pannellum контроле — идентично стилизоване
 * као на постојећој 360° страници (360.css),
 * само скопиране на .encyclopedia-360-panorama
 * да не утичу на остатак сајта.
 */

.encyclopedia-360-panorama .pnlm-container {


background: #000 !important;


}

.encyclopedia-360-panorama .pnlm-controls-container {


position: absolute !important;

left: 15px !important;

right: auto !important;

top: auto !important;

bottom: 15px !important;

width: auto !important;

height: 42px !important;

margin: 0 !important;

padding: 0 !important;

display: flex !important;

flex-direction: row !important;

align-items: center !important;

gap: 6px !important;

z-index: 100 !important;


}

.encyclopedia-360-panorama .pnlm-fullscreen-toggle-button {


order: 1 !important;

position: relative !important;

left: auto !important;

right: auto !important;

top: auto !important;

bottom: auto !important;

width: 42px !important;

height: 42px !important;

min-width: 42px !important;

min-height: 42px !important;

margin: 0 !important;

padding: 0 !important;

flex: 0 0 42px !important;

border: 1px solid rgba(47,169,140,0.38) !important;

border-radius: 10px !important;

background-color: rgba(11,11,15,0.72) !important;

background-image: none !important;

backdrop-filter: blur(12px);

box-shadow:

    0 5px 20px rgba(0,0,0,0.3),

    inset 0 0 15px rgba(35,83,71,0.12) !important;

outline: none !important;

opacity: 1 !important;

cursor: pointer;

z-index: 2 !important;

transition:

    background-color 0.2s ease,

    border-color 0.2s ease,

    transform 0.2s ease;


}

.encyclopedia-360-panorama .pnlm-zoom-controls {


order: 2 !important;

position: relative !important;

left: auto !important;

right: auto !important;

top: auto !important;

bottom: auto !important;

width: 84px !important;

height: 42px !important;

margin: 0 !important;

padding: 0 !important;

display: flex !important;

flex-direction: row !important;

align-items: center !important;

gap: 0 !important;

background: transparent !important;

border: none !important;

box-shadow: none !important;

transition: transform 0.2s ease;


}

.encyclopedia-360-panorama .pnlm-zoom-controls .pnlm-zoom-in,
.encyclopedia-360-panorama .pnlm-zoom-controls .pnlm-zoom-out {


position: relative !important;

left: auto !important;

right: auto !important;

top: auto !important;

bottom: auto !important;

width: 42px !important;

height: 42px !important;

min-width: 42px !important;

min-height: 42px !important;

margin: 0 !important;

padding: 0 !important;

flex: 0 0 42px !important;

border: 1px solid rgba(47,169,140,0.38) !important;

background-color: rgba(11,11,15,0.72) !important;

background-image: none !important;

backdrop-filter: blur(12px);

box-shadow:

    0 5px 20px rgba(0,0,0,0.3),

    inset 0 0 15px rgba(35,83,71,0.12) !important;

outline: none !important;

opacity: 1 !important;

cursor: pointer;

z-index: 2 !important;


}

.encyclopedia-360-panorama .pnlm-zoom-controls .pnlm-zoom-in {


order: 1 !important;

border-radius: 10px 0 0 10px !important;

border-right: none !important;


}

.encyclopedia-360-panorama .pnlm-zoom-controls .pnlm-zoom-out {


order: 2 !important;

border-radius: 0 10px 10px 0 !important;


}

.encyclopedia-360-panorama .pnlm-zoom-controls .pnlm-zoom-out::after {


content: "";

position: absolute;

left: 0;

top: 8px;

width: 1px;

height: 24px;

background: rgba(195,232,207,0.18);

pointer-events: none;


}

.encyclopedia-360-panorama .pnlm-fullscreen-toggle-button::before {


content: "⛶" !important;

position: absolute !important;

inset: 0 !important;

display: flex !important;

align-items: center !important;

justify-content: center !important;

font-family: Arial, Helvetica, sans-serif !important;

font-size: 25px !important;

font-weight: 400 !important;

line-height: 1 !important;

color: var(--tekst) !important;

pointer-events: none !important;


}

.encyclopedia-360-panorama .pnlm-zoom-controls .pnlm-zoom-in::before {


content: "+" !important;

position: absolute !important;

inset: 0 !important;

display: flex !important;

align-items: center !important;

justify-content: center !important;

font-family: Arial, Helvetica, sans-serif !important;

font-size: 25px !important;

font-weight: 300 !important;

line-height: 1 !important;

color: var(--tekst) !important;

pointer-events: none !important;


}

.encyclopedia-360-panorama .pnlm-zoom-controls .pnlm-zoom-out::before {


content: "−" !important;

position: absolute !important;

inset: 0 !important;

display: flex !important;

align-items: center !important;

justify-content: center !important;

font-family: Arial, Helvetica, sans-serif !important;

font-size: 27px !important;

font-weight: 300 !important;

line-height: 1 !important;

color: var(--tekst) !important;

pointer-events: none !important;


}

.encyclopedia-360-panorama .pnlm-zoom-controls:has(.pnlm-zoom-in:hover),
.encyclopedia-360-panorama .pnlm-zoom-controls:has(.pnlm-zoom-out:hover) {


transform: translateY(-2px);


}

.encyclopedia-360-panorama .pnlm-zoom-controls .pnlm-zoom-in:hover,
.encyclopedia-360-panorama .pnlm-zoom-controls .pnlm-zoom-out:hover {


background-color: rgba(35,83,71,0.78) !important;

border-color: rgba(47,169,140,0.75) !important;


}

.encyclopedia-360-panorama .pnlm-fullscreen-toggle-button:hover {


background-color: rgba(35,83,71,0.78) !important;

border-color: rgba(47,169,140,0.75) !important;

transform: translateY(-2px);


}

.encyclopedia-360-panorama .pnlm-zoom-controls .pnlm-zoom-in:active,
.encyclopedia-360-panorama .pnlm-zoom-controls .pnlm-zoom-out:active,
.encyclopedia-360-panorama .pnlm-fullscreen-toggle-button:active {


transform: translateY(0);


}

.encyclopedia-360-panorama .pnlm-zoom-controls .pnlm-zoom-in:focus,
.encyclopedia-360-panorama .pnlm-zoom-controls .pnlm-zoom-out:focus,
.encyclopedia-360-panorama .pnlm-fullscreen-toggle-button:focus {


outline: none !important;


}

@media (max-width: 768px) {


.encyclopedia-360-panorama .pnlm-controls-container {

    left: 12px !important;

    right: auto !important;

    top: auto !important;

    bottom: 12px !important;

    height: 38px !important;

    gap: 5px !important;

}

.encyclopedia-360-panorama .pnlm-fullscreen-toggle-button {

    width: 38px !important;

    height: 38px !important;

    min-width: 38px !important;

    min-height: 38px !important;

    flex: 0 0 38px !important;

    border-radius: 9px !important;

}

.encyclopedia-360-panorama .pnlm-zoom-controls {

    width: 76px !important;

    height: 38px !important;

    gap: 0 !important;

}

.encyclopedia-360-panorama .pnlm-zoom-controls .pnlm-zoom-in,
.encyclopedia-360-panorama .pnlm-zoom-controls .pnlm-zoom-out {

    width: 38px !important;

    height: 38px !important;

    min-width: 38px !important;

    min-height: 38px !important;

    flex: 0 0 38px !important;

    border-radius: 0 !important;

}

.encyclopedia-360-panorama .pnlm-zoom-controls .pnlm-zoom-in {

    order: 1 !important;

    border-radius: 9px 0 0 9px !important;

}

.encyclopedia-360-panorama .pnlm-zoom-controls .pnlm-zoom-out {

    order: 2 !important;

    border-radius: 0 9px 9px 0 !important;

}

.encyclopedia-360-panorama .pnlm-zoom-controls .pnlm-zoom-out::after {

    top: 7px;

    height: 22px;

}

.encyclopedia-360-panorama .pnlm-zoom-controls .pnlm-zoom-in::before,
.encyclopedia-360-panorama .pnlm-zoom-controls .pnlm-zoom-out::before,
.encyclopedia-360-panorama .pnlm-fullscreen-toggle-button::before {

    font-size: 22px !important;

}


}

/* =========================================================
НАВИГАЦИЈА — МАЛИ POPUP
========================================================= */

.encyclopedia-nav-overlay {


display: none;

position: fixed;

inset: 0;

background: rgba(0,0,0,0.75);

backdrop-filter: blur(4px);

-webkit-backdrop-filter: blur(4px);

z-index: 100;

align-items: center;

justify-content: center;

padding: 24px;


}

.encyclopedia-nav-overlay.active {


display: flex;


}

.encyclopedia-nav-modal {


width: min(360px, 100%);

display: flex;

flex-direction: column;

background: var(--glass);

backdrop-filter: blur(18px);

-webkit-backdrop-filter: blur(18px);

border:

    1px solid color-mix(

        in srgb,

        var(--zelena) 55%,

        transparent

    );

border-radius: 14px;

box-shadow:

    0 0 40px color-mix(

        in srgb,

        var(--zelena) 25%,

        transparent

    );

overflow: hidden;


}

.encyclopedia-nav-body {


display: flex;

flex-direction: column;

align-items: center;

gap: 16px;

padding: 24px 20px;


}

.encyclopedia-nav-emoji {


font-size: 42px;

line-height: 1;


}

.encyclopedia-nav-links {


width: 100%;

display: flex;

flex-direction: row;

gap: 10px;


}

.encyclopedia-nav-link {


flex: 1;

min-width: 0;

display: flex;

align-items: center;

justify-content: center;

padding: 13px 10px;

border-radius: 10px;

border:

    1px solid color-mix(

        in srgb,

        var(--zelena-hover) 45%,

        transparent

    );

background: rgba(255,255,255,0.04);

color: var(--tekst);

font-family: 'Montserrat', sans-serif;

font-size: 13px;

font-weight: 600;

text-align: center;

text-decoration: none;

cursor: pointer;

transition:

    background 0.2s ease,

    border-color 0.2s ease,

    transform 0.2s ease;


}

.encyclopedia-nav-link:hover {


background: rgba(35,83,71,0.55);

border-color: var(--zelena-hover);

transform: translateY(-1px);


}

/* =========================================================
GLIGHTBOX ОПИС — форматирање
(усклађено са осталим glass елементима сајта)
========================================================= */

.gdesc-inner {


background: rgba(11,11,15,0.88) !important;

backdrop-filter: blur(12px);

-webkit-backdrop-filter: blur(12px);

padding: 16px 20px !important;

font-family: 'Montserrat', sans-serif !important;


}

.gdesc-inner .gslide-title,
.gdesc-inner .gdesc-title {


color: var(--tekst) !important;

font-family: 'Montserrat', sans-serif !important;

font-size: 14px !important;

font-weight: 600 !important;

margin-bottom: 8px !important;


}

.gdesc-inner .gslide-desc,
.gdesc-inner .gdesc-description {


color: rgba(195,232,207,0.85) !important;

font-family: 'Montserrat', sans-serif !important;

font-size: 13px !important;

font-weight: 400 !important;

line-height: 1.7 !important;

white-space: pre-line !important;


}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 1100px) {


.encyclopedia-main {

    grid-template-columns:

        240px

        230px

        minmax(0, 1fr)

        240px;

}


}

@media (max-width: 850px) {


body {

    overflow: auto;

}

.encyclopedia-page {

    height: auto;

    min-height: 100vh;

}

.encyclopedia-header {

    height: auto;

    min-height: 76px;

}

.encyclopedia-main {

    min-height: calc(100vh - 76px);

    grid-template-columns:

        220px

        220px

        minmax(350px, 1fr);

}

.encyclopedia-panel-info {

    display: none;

}


}

@media (max-width: 650px) {


.encyclopedia-header {

    padding: 0 14px;

}

.encyclopedia-place {

    display: none;

}

.encyclopedia-main {

    grid-template-columns: 1fr;

}

.encyclopedia-panel {

    min-height: 300px;

}

.encyclopedia-center {

    min-height: 700px;

}

.encyclopedia-gallery-grid {

    grid-template-columns:

        repeat(2, 1fr);

}

.encyclopedia-360-nav {

    width: 28px;

    height: 28px;

    font-size: 16px;

}

.encyclopedia-360-viewer-title {

    font-size: 12px;

    max-width: 45%;

}


}