/* Reset stilova */

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }

body { background-color: #0f0f12; color: #ffffff; padding-bottom: 110px; }



/* Gornja traka */

.glavni-header { background-color: #16161a; display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; border-bottom: 1px solid #232329; }

.header-levo { display: flex; align-items: center; gap: 20px; }

.logo-sajta { font-weight: bold; font-size: 22px; letter-spacing: 1px; }

.logo-sajta span { color: #00e676; }

.sat { background: #232329; padding: 5px 12px; border-radius: 6px; font-family: monospace; color: #00e676; }



/* Meni desno */

.meni-link { color: #a0a0ab; text-decoration: none; margin-left: 15px; font-weight: 600; font-size: 14px; transition: 0.2s; }

.meni-link:hover { color: white; }



/* Pretraga */

.pretraga-kutija input { background-color: #232329; border: 1px solid #2d2d35; padding: 10px 20px; color: white; border-radius: 30px; width: 300px; outline: none; transition: 0.3s; }

.pretraga-kutija input:focus { border-color: #00e676; width: 350px; }



/* Meni drzava */

.drzave-meni { background-color: #16161a; display: flex; justify-content: center; gap: 10px; padding: 12px; border-bottom: 1px solid #232329; }

.drzava-link { background: none; border: none; color: #a0a0ab; padding: 8px 16px; font-weight: bold; cursor: pointer; border-radius: 6px; }

.drzava-link:hover, .drzava-link.aktivno { color: #ffffff; background-color: #232329; border-bottom: 2px solid #00e676; }



/* Grid i kartice */

.glavni-kontejner { padding: 30px; max-width: 1200px; margin: 0 auto; }

.sekcija-naslov { margin-bottom: 20px; font-size: 20px; color: #a0a0ab; }

.radio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; }

.radio-kartica { background-color: #16161a; border: 1px solid #232329; border-radius: 12px; padding: 15px; text-align: center; cursor: pointer; transition: 0.3s; }

.radio-kartica:hover { transform: translateY(-5px); border-color: #00e676; box-shadow: 0 10px 20px rgba(0, 230, 118, 0.15); }

.logo-okvir { position: relative; width: 100%; border-radius: 8px; overflow: hidden; margin-bottom: 12px; }

.logo-okvir img { width: 100%; height: 120px; object-fit: contain; background: #232329; display: block; padding: 5px; }

.play-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; font-size: 24px; color: #00e676; opacity: 0; transition: 0.3s; }

.radio-kartica:hover .play-overlay { opacity: 1; }

.radio-kartica h3 { font-size: 15px; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tag-drzava { font-size: 11px; color: #8a8a93; background: #232329; padding: 2px 8px; border-radius: 10px; }



/* Plejer na dnu */

.fiksni-plejer { position: fixed; bottom: 0; left: 0; width: 100%; background: #16161a; border-top: 1px solid #232329; display: flex; justify-content: space-between; align-items: center; padding: 15px 40px; z-index: 1000; }

.plejer-info { display: flex; align-items: center; gap: 15px; width: 30%; }

.plejer-info img { border-radius: 6px; width: 50px; height: 50px; object-fit: cover; }

.plejer-info h4 { font-size: 15px; }

.plejer-info p { font-size: 12px; color: #8a8a93; }

.plejer-kontrole { width: 40%; display: flex; justify-content: center; }

.kontrolno-dugme { background: #00e676; border: none; width: 45px; height: 45px; border-radius: 50%; font-size: 20px; color: #000; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }

.kontrolno-dugme:hover { transform: scale(1.1); background: #00b359; }

.plejer-zvuk { width: 30%; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }

#volume-slider { accent-color: #00e676; cursor: pointer; }



/* Forme za kontakt i dodavanje */

.forma-okvir { background-color: #16161a; border: 1px solid #232329; border-radius: 12px; padding: 30px; max-width: 500px; margin: 40px auto; }

.forma-grupa { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; text-align: left; }

.forma-grupa label { color: #a0a0ab; font-size: 14px; font-weight: 600; }

.forma-grupa input, .forma-grupa select, .forma-grupa textarea { background-color: #232329; border: 1px solid #2d2d35; padding: 12px; color: white; border-radius: 8px; outline: none; font-size: 14px; }

.forma-grupa input:focus, .forma-grupa select:focus, .forma-grupa textarea:focus { border-color: #00e676; }

.forma-dugme { background-color: #00e676; color: #000000; border: none; padding: 14px; width: 100%; border-radius: 8px; font-weight: bold; font-size: 16px; cursor: pointer; transition: 0.2s; }

.forma-dugme:hover { background-color: #00b359; }



/* Mobilni telefoni */

@media (max-width: 768px) {

    .glavni-header { flex-direction: column; gap: 15px; padding: 15px; text-align: center; }

    .pretraga-kutija input { width: 100%; }

    .drzaves-meni { overflow-x: auto; white-space: nowrap; justify-content: flex-start; }

    .fiksni-plejer { padding: 15px; }

    .plejer-info { width: 70%; }

    .plejer-kontrole { width: 30%; }

    .plejer-zvuk { display: none; }

}

/* Stilovi za moderne društvene mreže */

.header-desno {

    display: flex;

    align-items: center;

    gap: 25px; /* Razmak između menija i društvenih mreža */

}



.stranice-meni {

    display: flex;

    align-items: center;

}



.drustvene-mreze {

    display: flex;

    align-items: center;

    gap: 12px; /* Razmak između samih ikonica */

}



.sm-link {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    background-color: #232329; /* Tamna diskretna pozadina za krug */

    color: #a0a0ab;

    border-radius: 50%;

    font-size: 16px;

    text-decoration: none;

    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s, background-color 0.3s, box-shadow 0.3s;

}



/* Efekat blagog skakanja i menjanja boje pri prelazu mišem */

.sm-link:hover {

    transform: translateY(-4px) scale(1.1); /* Ikonica skoci na gore i blago se poveća */

    color: #ffffff;

}



/* Pojedinačne prepoznatljive neonske boje za svaku mrežu na hover */

.sm-link.facebook:hover {

    background-color: #1877f2;

    box-shadow: 0 0 15px rgba(24, 119, 242, 0.6);

}



.sm-link.instagram:hover {

    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);

    box-shadow: 0 0 15px rgba(220, 39, 67, 0.6);

}



.sm-link.tiktok:hover {

    background-color: #010101;

    color: #00f2fe; /* Karakteristična plava za TikTok */

    border: 1px solid #fe2c55; /* Crveni detalj */

    box-shadow: 0 0 15px rgba(0, 242, 254, 0.6);

}



.sm-link.youtube:hover {

    background-color: #ff0000;

    box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);

}



/* Prilagođavanje za ekrane mobilnih telefona */

@media (max-width: 768px) {

    .header-desno {

        flex-direction: column;

        gap: 15px;

        margin-top: 5px;

    }

    .drustvene-mreze {

        justify-content: center;

    }

}

/* ==========================================================================

   NOVI MODERNI STILOVI ZA O-NAMA I KONTAKT STRANICE

   ========================================================================== */



/* Stilovi za O NAMA modernu stranicu */

.onama-moderni-okvir {

    background-color: #16161a;

    border: 1px solid #232329;

    border-radius: 16px;

    padding: 40px;

    max-width: 800px;

    margin: 30px auto;

    box-shadow: 0 15px 35px rgba(0,0,0,0.6);

}

.onama-zaglavlje {

    text-align: center;

    margin-bottom: 30px;

}

.ikonica-velika {

    font-size: 50px;

    color: #00e676;

    margin-bottom: 15px;

}

.linija-ukras {

    width: 60px;

    height: 4px;

    background-color: #00e676;

    margin: 15px auto 0 auto;

    border-radius: 2px;

}

.onama-tekst p {

    color: #ceced8;

    line-height: 1.8;

    margin-bottom: 20px;

    font-size: 16px;

    text-align: justify;

}



/* Kartice sa brojevima unutar O nama */

.onama-statistika {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin-top: 40px;

    border-top: 1px solid #232329;

    padding-top: 30px;

}

.stat-kartica {

    background-color: #232329;

    border-radius: 12px;

    padding: 20px;

    text-align: center;

    border: 1px solid transparent;

    transition: 0.3s;

}

.stat-kartica:hover {

    border-color: #00e676;

    transform: translateY(-5px);

}

.stat-kartica i {

    font-size: 24px;

    color: #00e676;

    margin-bottom: 10px;

}

.stat-kartica h3 {

    font-size: 26px;

    font-weight: bold;

    color: white;

    margin-bottom: 5px;

}

.stat-kartica p {

    color: #8a8a93;

    font-size: 13px;

}



/* Stilovi za moderni KONTAKT (Dve kolone) */

.kontakt-split-kontejner {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    background-color: #16161a;

    border: 1px solid #232329;

    border-radius: 16px;

    padding: 40px;

    margin-top: 20px;

    box-shadow: 0 15px 35px rgba(0,0,0,0.6);

}

.kontakt-info-strana h2 {

    font-size: 28px;

    color: white;

    margin-bottom: 15px;

}

.kontakt-info-strana .podnaslov {

    color: #a0a0ab;

    line-height: 1.6;

    margin-bottom: 30px;

}

.info-kartice-lista {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.info-detalj-kartica {

    display: flex;

    align-items: center;

    gap: 20px;

    background-color: #232329;

    padding: 20px;

    border-radius: 12px;

    border-left: 4px solid #00e676;

}

.info-detalj-kartica i {

    font-size: 24px;

    color: #00e676;

}

.info-detalj-kartica h4 {

    color: white;

    font-size: 15px;

    margin-bottom: 4px;

}

.info-detalj-kartica p {

    color: #ceced8;

    font-size: 14px;

}

.kontakt-forma-strana {

    background-color: #1e1e24;

    padding: 30px;

    border-radius: 12px;

    border: 1px solid #2d2d35;

}

.kontakt-forma-strana .forma-grupa label i {

    color: #00e676;

    margin-right: 5px;

}



/* Mobilna prilagodljivost za split ekran i statistiku */

@media (max-width: 768px) {

    .kontakt-split-kontejner {

        grid-template-columns: 1fr;

        gap: 30px;

        padding: 20px;

    }

    .onama-statistika {

        grid-template-columns: 1fr;

        gap: 15px;

    }

    .onama-moderni-okvir {

        padding: 20px;

    }

}

/* ==========================================================================

   DODATNI LUKSUZNI STILOVI ZA O-NAMA I FOOTER (ZAVRŠETAK STRANICE)

   ========================================================================== */



/* Hero sekcija na vrhu */

.onama-hero-sekcija {

    text-align: center;

    padding: 40px 20px;

    margin-bottom: 20px;

}

.onama-hero-sekcija h2 {

    font-size: 32px;

    margin-top: 15px;

    letter-spacing: 1px;

}

.onama-hero-sekcija p {

    color: #8a8a93;

    font-size: 16px;

    margin-top: 8px;

}



/* Animacija pulsiranja za ikonicu tornja */

.ikonica-puls {

    font-size: 55px;

    color: #00e676;

    animation: pulsiranje 2s infinite ease-in-out;

}

@keyframes pulsiranje {

    0% { transform: scale(1); opacity: 0.8; }

    50% { transform: scale(1.1); opacity: 1; text-shadow: 0 0 15px rgba(0, 230, 118, 0.6); }

    100% { transform: scale(1); opacity: 0.8; }

}



/* Kartice sa vrednostima (Misija, Vizija...) */

.onama-vrednosti-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 25px;

    max-width: 1000px;

    margin: 20px auto 40px auto;

}

.vrednost-kartica {

    background-color: #16161a;

    border: 1px solid #232329;

    border-radius: 14px;

    padding: 25px;

    text-align: center;

    transition: 0.3s;

}

.vrednost-kartica:hover {

    border-color: #00e676;

    transform: translateY(-5px);

}

.krug-ikonica {

    width: 50px;

    height: 50px;

    background-color: #232329;

    border: 1px solid #2d2d35;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 15px auto;

    color: #00e676;

    font-size: 18px;

}

.vrednost-kartica h4 {

    font-size: 18px;

    margin-bottom: 10px;

    color: white;

}

.vrednost-kartica p {

    color: #ceced8;

    font-size: 14px;

    line-height: 1.6;

}



/* Detaljan tekst boks */

.onama-detaljan-okvir {

    background-color: #16161a;

    border: 1px solid #232329;

    border-radius: 14px;

    padding: 35px;

    max-width: 900px;

    margin: 0 auto;

}

.onama-detaljan-okvir h3 {

    color: #00e676;

    font-size: 22px;

    margin-bottom: 15px;

}

.onama-detaljan-okvir p {

    color: #ceced8;

    line-height: 1.8;

    font-size: 15px;

    margin-bottom: 15px;

    text-align: justify;

}



/* MODERAN FOOTER (ZAVRŠETAK STRANICE) */

.glavni-footer {

    background-color: #0b0b0d;

    border-top: 1px solid #16161a;

    padding: 50px 30px 20px 30px;

    margin-top: 60px;

}

.footer-sadrzaj {

    display: grid;

    grid-template-columns: 1.5fr 1fr 1.5fr;

    gap: 40px;

    max-width: 1200px;

    margin: 0 auto;

    padding-bottom: 30px;

    border-bottom: 1px solid #16161a;

}

.footer-sekcija-levo p {

    color: #8a8a93;

    font-size: 14px;

    margin-top: 12px;

    line-height: 1.6;

}

.footer-sekcija-sredina h4, .footer-sekcija-desno h4 {

    color: white;

    font-size: 16px;

    margin-bottom: 15px;

    font-weight: 600;

}

.footer-sekcija-sredina ul {

    list-style: none;

}

.footer-sekcija-sredina ul li {

    margin-bottom: 10px;

}

.footer-sekcija-sredina ul li a {

    color: #8a8a93;

    text-decoration: none;

    font-size: 14px;

    transition: 0.2s;

}

.footer-sekcija-sredina ul li a:hover {

    color: #00e676;

    padding-left: 5px;

}

.footer-sekcija-desno p {

    color: #8a8a93;

    font-size: 13px;

    line-height: 1.7;

}



/* Dno footera sa autorskim pravima */

.footer-dno {

    text-align: center;

    padding-top: 20px;

    color: #61616a;

    font-size: 13px;

}



/* Mobilna optimizacija za završetak stranice */

@media (max-width: 768px) {

    .footer-sadrzaj {

        grid-template-columns: 1fr;

        gap: 30px;

        text-align: center;

    }

    .footer-sekcija-sredina ul li a:hover {

        padding-left: 0;

    }

}

body { 

    background-color: #0f0f12; 

    color: #ffffff; 

    padding-bottom: 180px; /* Povećano sa 110px na 180px da bi se lepo video završetak sajta iznad plejera */

}

/* POPRAVKA ZA IKONICE DRUŠTVENIH MREŽA U HEADERU */

.header-desno {

    display: flex !important;

    align-items: center !important;

    gap: 20px !important;

}



.stranice-meni {

    display: flex !important;

    gap: 15px !important;

}



.drustvene-mreze {

    display: flex !important;

    gap: 10px !important;

}



.sm-link i {

    font-family: "Font Awesome 6 Brands" !important;

    font-weight: 400 !important;

    font-style: normal !important;

    display: inline-block !important;

}

/* POTPUNO UKLANJANJE PRAZNIH KRUGOVA IZ ZAGLAVLJA */

.drustvene-mreze, .sm-link, [class*="facebook"], [class*="instagram"] {

    display: none !important;

}



/* Savršeno ravnanje tekstualnog menija na desnoj strani */

.header-desno {

    display: flex !important;

    justify-content: flex-end !important;

    align-items: center !important;

    width: auto !important;

}



.stranice-meni {

    display: flex !important;

    gap: 20px !important; /* Lep razmak između reči */

}

/* ==========================================================================

   STILOVI ZA STRANICE NAJSLUŠANIJE I PREPORUČUJEMO
   ========================================================================== */



/* Top lista za Najslušanije */

.top-lista-kontejner {

    display: flex;

    flex-direction: column;

    gap: 15px;

    max-width: 850px;

    margin: 30px auto;

}

.top-stavka {

    background-color: #16161a;

    border: 1px solid #232329;

    border-radius: 12px;

    padding: 15px 25px;

    display: flex;

    align-items: center;

    gap: 20px;

    transition: 0.3s;

}

.top-stavka:hover {

    transform: translateX(5px);

    border-color: #00e676;

}

.top-broj {

    font-size: 24px;

    font-weight: bold;

    width: 40px;

    height: 40px;

    background-color: #232329;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #a0a0ab;

}

/* Boje za prva tri mesta */

.zlato .top-broj { background-color: #ffd700; color: #000; box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); }

.srebro .top-broj { background-color: #c0c0c0; color: #000; }

.bronza .top-broj { background-color: #cd7f32; color: #000; }



.top-stavka img {

    width: 50px;

    height: 50px;

    object-fit: contain;

    background-color: #232329;

    border-radius: 8px;

    padding: 3px;

}

.top-info { flex-grow: 1; }

.top-info h4 { font-size: 16px; color: white; margin-bottom: 3px; }

.top-info p { color: #8a8a93; font-size: 13px; }

.top-slusaoci {

    font-size: 14px;

    color: #00e676;

    background-color: rgba(0, 230, 118, 0.1);

    padding: 6px 15px;

    border-radius: 20px;

    font-weight: 600;

}



/* Horizontalne kartice za Preporučujemo */

.preporuka-lista {

    display: flex;

    flex-direction: column;

    gap: 30px;

    max-width: 900px;

    margin: 30px auto;

}

.premium-kartica {

    background-color: #16161a;

    border: 1px solid #232329;

    border-radius: 16px;

    padding: 30px;

    display: flex;

    align-items: center;

    gap: 30px;

    position: relative;

    overflow: hidden;

}

.premium-kartica:hover {

    border-color: #00e676;

    box-shadow: 0 10px 30px rgba(0, 230, 118, 0.1);

}

.premium-znacka {

    position: absolute;

    top: 15px;

    right: 20px;

    background-color: #00e676;

    color: #000;

    font-size: 11px;

    font-weight: bold;

    padding: 4px 12px;

    border-radius: 30px;

    letter-spacing: 0.5px;

}

.premium-kartica img {

    width: 110px;

    height: 110px;

    object-fit: contain;

    background-color: #232329;

    border-radius: 12px;

    padding: 10px;

    flex-shrink: 0;

}

.premium-detalji h3 { font-size: 20px; color: white; margin-bottom: 8px; }

.premium-detalji p { color: #ceced8; font-size: 14px; line-height: 1.6; margin-bottom: 12px; text-align: justify; }



/* Mobilna optimizacija za nove strane */

@media (max-width: 768px) {

    .top-stavka { flex-direction: column; text-align: center; padding: 20px; }

    .top-info { margin: 5px 0; }

    .premium-kartica { flex-direction: column; text-align: center; padding-top: 50px; }

    .premium-znacka { right: 50%; transform: translateX(50%); top: 15px; }

}
/* STIL ZA PREGLEDNU PAGINACIJU */
.paginacija-kontejner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;         /* Pravi razmak između brojeva 1 i 2 */
    margin: 40px 0;    /* Odvaja brojeve od stanica gore i footera dole */
}

.paginacija-dugme {
    background-color: #1e1e24; /* Tamno siva pozadina kockice */
    color: #ffffff;            /* Bela boja broja */
    border: 1px solid #3a3a44; /* Blaga ivica oko kockice */
    padding: 10px 16px;        /* Širi dugme da bude veće i uočljivije */
    font-size: 16px;           /* Krupniji tekst */
    font-weight: bold;
    border-radius: 6px;        /* Blago zaobljene ivice kockice */
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Kada se mišem pređe preko dugmeta */
.paginacija-dugme:hover {
    background-color: #3a3a44;
    border-color: #00e676;     /* Zelena ivica na hover */
    color: #00e676;            /* Zeleni broj na hover */
}

/* Stil za stranicu na kojoj se trenutno nalazite */
.paginacija-dugme.aktivna-strana {
    background-color: #00e676; /* Jaka zelena pozadina za aktivnu stranu */
    color: #000000;            /* Crn broj unutar zelene kockice */
    border-color: #00e676;
}