/* Univerzalno prilagođavanje za SVE YouTube video snimke na sajtu (i stare i nove) */
iframe[src*="youtube.com"], 
iframe[src*="youtu.be"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
}

/* Gornji deo (Header) - Crna pozadina */
.header {
    background-color: #000000 !important;
    background-image: none !important; /* Uklanja fabrički ljubičasti preliv */
}

/* Donji deo (Footer) - Crna pozadina */
.footer {
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
}

/* Boja linkova u gornjem meniju i footer-u da budu beli */
.header .navbar-nav .nav-link,
.footer a {
    color: #ffffff !important;
}

/* Boja kada se mišem pređe preko linka (Hover) - svetlo siva */
.header .navbar-nav .nav-link:hover,
.footer a:hover {
    color: #cccccc !important;
}

/* --- USKLAĐIVANJE DUGMADI SA CRNOM I CRVENOM LINIJOM --- */

/* Glavna dugmad (Pretraga, Logovanje, Tagovi) - Tamno siva sa tankom crvenom ivicom */
.btn-primary, 
.badge.bg-primary {
    background-color: #1a1a1a !important; /* Skoro crna pozadina dugmeta */
    border: 1px solid #ff0000 !important; /* Tanka crvena linija oko dugmeta */
    color: #ffffff !important;
}

/* Efekat kada se mišem pređe preko dugmeta (Hover) - Dugme zasvetli crveno */
.btn-primary:hover, 
.btn-primary:focus,
.badge.bg-primary:hover {
    background-color: #ff0000 !important; /* Pozadina postaje crvena */
    border-color: #ff3333 !important;
    color: #ffffff !important;
    transition: background-color 0.3s ease; /* Glatka animacija prelaza */
}

/* Polja za unos teksta (Pretraga, Korisničko ime, Lozinka) kada se klikne na njih */
.form-control:focus {
    border-color: #ff0000 !important; /* Crvena ivica oko polja za kucanje */
    box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25) !important; /* Blagi crveni sjaj oko polja */
}

/* --- SREĐIVANJE TAGOVA UNUTAR SAMOG POSTA (ČLANKA) --- */

/* Izgled tagova unutar teksta - Crna pozadina sa crvenom linijom */
.tags .label,
.tags a,
.content-tags .badge,
.content-tags a {
    background-color: #1a1a1a !important;
    border: 1px solid #ff0000 !important;
    color: #ffffff !important;
    text-decoration: none !important; /* Uklanja podvlačenje teksta ako je link */
    padding: 5px 10px !important; /* Daje im lepši oblik kapsule */
    display: inline-block !important;
    margin-bottom: 5px !important;
}

/* Efekat kada se mišem pređe preko taga unutar posta */
.tags .label:hover,
.tags a:hover,
.content-tags .badge:hover,
.content-tags a:hover {
    background-color: #ff0000 !important;
    border-color: #ff3333 !important;
    color: #ffffff !important;
    transition: background-color 0.3s ease;
}

/* ==========================================================================
   KONAČNO REŠENJE: TOTALNO ZBIJANJE MENIJA I UKLANJANJE BELE POZADINE
   ========================================================================== */

/* 1. Skupljanje glavnog menija - uklanjamo razmak od 10mm (gap i margine) */
.container-header .navbar-nav,
.container-header ul.menu,
.container-header .metismenu,
.container-header .mod-menu {
    gap: 2px !important;               /* Smanjuje automatski razmak na minimum */
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
}

/* Ciljamo same elemente liste (li) koji drže dugmiće i pravili su razmak */
.container-header .navbar-nav li,
.container-header ul.menu li,
.container-header .metismenu li,
.container-header .mod-menu li {
    margin: 0 1px 0 1px !important;    /* Razmak između stavki smanjen na 1-2 piksela */
    padding: 0 !important;
}

/* 2. Izgled samih dugmića u glavnom meniju */
.container-header .navbar-nav .nav-link,
.container-header ul.menu li a,
.container-header .metismenu li a,
.container-header .mod-menu a {
    background-color: #1a1a1a !important; 
    border: 1px solid #ff0000 !important; 
    border-radius: 4px !important;        
    color: #ffffff !important;            
    padding: 4px 10px !important;         /* Tanka i elegantna dugmad */
    font-size: 0.9rem !important;         
    display: inline-block !important;
}

/* Hover i aktivno stanje za glavna dugmad */
.container-header .navbar-nav .nav-link:hover,
.container-header ul.menu li a:hover,
.container-header .metismenu li a:hover,
.container-header .navbar-nav .active > .nav-link,
.container-header .navbar-nav .nav-link.active {
    background-color: #ff0000 !important; 
    border-color: #ff3333 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   3. UNIŠTAVANJE BELE POZADINE OKO DUGMIĆA U PADAJUĆEM MENIJU
   ========================================================================== */

/* Ciljamo spoljnu belu školjku dropdown-a kroz sve moguće sistemske klase */
.container-header .dropdown-menu,
.container-header ul.menu li ul,
.container-header .metismenu .mm-collapse,
.container-header .navbar-nav .dropdown-menu,
ul[class*="dropdown-menu"] {
    background-color: #1a1a1a !important;   /* Prefarbava pozadinu u tamno sivu/crnu */
    background: #1a1a1a !important;          
    border: 1px solid #ff0000 !important;    /* Tanka crvena ivica oko celog prozora */
    padding: 4px !important;
    margin-top: 2px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

/* 4. Pojedinačne stavke (linkovi) UNUTAR padajućeg prozora */
.container-header .dropdown-menu .dropdown-item,
.container-header .dropdown-menu a,
.container-header ul.menu li ul li a,
.dropdown-item {
    background-color: transparent !important; /* Brisanje preostale bele boje oko teksta */
    background: transparent !important;
    border: none !important;                  
    color: #ffffff !important;                /* Bela slova */
    padding: 6px 12px !important;
    margin: 0 !important;                     /* Idu gusto jedna ispod druge */
    display: block !important;
    width: 100% !important;
    font-size: 0.85rem !important;
    text-align: left !important;
}

/* Kada se mišem pređe preko stavke unutar padajućeg menija */
.container-header .dropdown-menu .dropdown-item:hover,
.container-header .dropdown-menu a:hover,
.dropdown-item:hover {
    background-color: #ff0000 !important;     /* Pozadina pocrveni */
    color: #ffffff !important;
    border-radius: 3px !important;
}

/* ==========================================================================
   4. KONAČNA POPRAVKA ZA SLIKE - BEZ RUŽNOG OMOTAVANJA TEKSTA OKO NJIH
   ========================================================================== */

/* Pravilo za sve slike u postovima na celom sajtu */
.com-content-category-blog img,
.com-content-article img,
.item-image img,
.article-intro-image img,
.article-list img,
article img,
.blog-item img,
.blog-items img {
    width: 100% !important;           /* Tera sliku da se prilagodi okviru */
    max-width: 600px !important;       /* Na računaru slika ne ide preko 600px */
    height: auto !important;          /* Čuva originalne proporcije slike */
    display: block !important;        /* Ključno: Slika dobija svoj ceo zaseban red */
    float: none !important;           /* UKLANJA levo guranje i sprečava tekst da ide desno */
    margin-left: 0 !important;        /* Drži sliku poravnatu strogo uz levu ivicu */
    margin-right: 0 !important;
    margin-bottom: 20px !important;   /* Pravi lep prazan prostor između slike i teksta ispod */
}

/* Prilagođavanje za mobilne telefone (Ekrani manji od 768px) */
@media (max-width: 767px) {
    .com-content-category-blog img,
    .com-content-article img,
    .item-image img,
    .article-intro-image img,
    article img {
        max-width: 100% !important;    /* Na telefonu slika zauzima punu širinu ekrana */
    }

    /* Isključujemo Bootstrap kolone na početnoj strani za uvodne postove na mobilnom */
    .blog-items, .row, .com-content-category-blog__items {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ==========================================================================
   5. POPRAVKA ZA BANER: SMANJIVANJE VISINE I POVRATAK SLIKE
   ========================================================================== */

/* Smanjujemo fabričku visinu kompletnog baner prozora sa 50vh na fiksnu meru */
.container-banner .banner-overlay {
    height: 180px !important;         /* Ovo drastično skraćuje visinu prozora na tanku traku */
    min-height: 180px !important;
    background-color: #000000 !important; /* Pozadina je crna */
}

/* Vraćamo sliku u život i naređujemo joj da se prilagodi novoj visini od 180px */
.container-banner .mod-custom,
.container-banner [class*="mod-"],
.banner-overlay {
    background-size: cover !important;     /* Slika puni prostor i ne ostavlja praznine */
    background-position: center !important; /* Centriranje najvažnijeg dela slike */
    background-repeat: no-repeat !important;
    height: 100% !important;               /* Slika uzima tačnu visinu od 180px */
}

/* Sređujemo unutrašnje tekstove i dugme unutar banera da budu u centru i kompaktni */
.container-banner .banner-overlay {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;    /* Centrira tekst dobrodošlice po visini */
    align-items: center !important;        /* Centrira tekst i dugme po širini */
    padding: 10px !important;
}

/* Smanjujemo razmake oko naslova dobrodošlice da ne šire baner veštački */
.container-banner h1, 
.container-banner h2, 
.container-banner p {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    text-align: center !important;
}

/* --- STILIZOVANJE BLOKOVA ZA KOD (CODE SAMPLE) --- */

/* Za VELIKE blokove koda (ceo isečak zaokružen crvenom linijom) */
pre {
    background-color: #f5f5f5 !important; /* Svetlosiva pozadina */
    border: 1px solid #ff0000 !important; /* Tanka crvena linija oko celog koda */
    border-radius: 4px !important;       
    color: #990000 !important;            /* Tamnocrvena boja za tekst koda */
    padding: 15px !important;             
    font-family: monospace !important;    
    overflow-x: auto !important;          /* Klizač za mobilne telefone */
    margin-bottom: 20px !important;
}

/* Obezbeđujemo da i unutrašnji tekst prati tamnocrvenu boju */
pre code {
    background-color: transparent !important; /* Uklanja pozadinu unutar bloka */
    border: none !important;                  /* Uklanja okvir unutar bloka */
    color: #990000 !important;                /* Tamnocrvena slova */
    padding: 0 !important;
}

/* Za KRATKE reči koda unutar same rečenice (samo tamnocrvena slova bez okvira) */
p code, li code {
    background-color: transparent !important; /* Bez sive pozadine */
    border: none !important;                  /* BEZ crvenog okvira */
    color: #990000 !important;                /* Tamnocrvena boja slova */
    font-family: monospace !important;
    padding: 0 !important;
}

/* ==========================================================================
   7. TOTALNO SMANJIVANJE I PORAVNANJE PAMETNE PRETRAGE SA MENIJEM
   ========================================================================== */

/* Smanjujemo unutrašnji prostor cele grupe pretrage */
.container-header .search,
.container-header .mod-finder__search,
.container-header .input-group {
    max-height: 32px !important;    /* Zaključavamo maksimalnu visinu na nivo menija */
    display: inline-flex !important;
    align-items: center !important;
}

/* Smanjujemo polje za kucanje teksta */
.container-header input[type="search"],
.container-header .form-control,
.container-header .js-finder-search-query {
    padding: 3px 10px !important;    /* Veoma nizak padding da se stisne polje */
    font-size: 0.9rem !important;    /* Veličina slova kao u meniju */
    height: 32px !important;         /* Fiksiramo visinu polja u milimetar sa menijem */
    line-height: 1 !important;
    min-height: 0 !important;
}

/* Smanjujemo dugme za potvrdu pretrage (Lupa) */
.container-header .mod-finder__search .btn,
.container-header .input-group .btn,
.container-header .search .btn {
    padding: 3px 12px !important;    /* Usko dugme */
    font-size: 0.9rem !important;    
    height: 32px !important;         /* Fiksiramo visinu dugmeta */
    line-height: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;  /* Centrira ikonicu lupe unutar smanjenog dugmeta */
}

/* Isključujemo skrivene Bootstrap prostore oko cele pretrage */
.container-header .search-container,
.container-header .awesomplete {
    vertical-align: middle !important;
    margin: 0 !important;
}