/* =====================================================================
   tema-b.css — svetao sadržaj, tamna traka iznad
   18.10.2026.
   =====================================================================
   UČITAVA SE POSLE style.css, u header_inc.php:

       <link rel="stylesheet" href="<?= asset_css('/assets/css/style.css') ?>">
       <link rel="stylesheet" href="<?= asset_css('/assets/css/tema-b.css') ?>">

   Zašto zaseban fajl a ne prepravka postojećeg: u style.css je 48 mesta
   sa providnom belom i 6 sa `var(--black)` kao pozadinom, raspoređenih
   kroz 1943 linije, od kojih se dobar deo odnosi na strane koje nisam
   video. Prepravka naslepo bi popravila kategoriju i pokvarila tri
   druge strane. Ovako se tema gasi brisanjem jednog reda.

   `!important` stoji samo tamo gde ga style.css već koristi (navbar,
   footer, nav-link). Inače ne bi imao šta da nadjača.

   STO OVAJ FAJL NE MOŽE: inline stilovi u `kategorija.php`
   (`style="background: var(--black)"`) jaci su od svakog stylesheeta.
   Zato uz ovaj fajl ide i prepravljen `kategorija.php`.
   ===================================================================== */

:root {
    /* Imena po ULOZI, ne po boji. `--black` je prestalo da bude istina
       u trenutku kad je zatrebala svetla tema; `--podloga` ostaje tačno
       ma koje boje bila. */
    --podloga:        #f5f6f8;
    --povrsina:       #ffffff;
    --ivica:          #e4e7ec;
    --ivica-jaca:     #d6dae2;

    --mastilo:        #14161a;   /* 17.8:1 na beloj */
    --mastilo-2:      #4b5260;   /*  8.0:1 */
    --prigusen:       #6b7280;   /*  4.8:1 — donja granica */

    /* Tamna traka */
    --traka:          #0f1b2d;   /* mekše od #000, ali i dalje tamno */
    --na-traci:       #ffffff;
    --na-traci-2:     #a8b4c6;   /*  8.2:1 na traci */
    --na-traci-3:     #c3cdda;   /* 10.8:1 */
    --crvena-traka:   #e8392a;   /* na tamnom; #fa1c0b pada na 4.31:1 */

    --plava-tamna:    #1a3a5c;   /* 11.6:1 na beloj */
    --crvena-tekst:   #c81607;   /*  5.9:1 na beloj */
    --crvena-bleda:   #fdeceb;
    --plava-bleda:    #eef1f6;

    /* Popravka: koristi se na dva mesta u style.css, nigde definisana */
    --blog-border:    #e4e7ec;
}

/* ---------------------------------------------------------------------
   OSNOVA
   --------------------------------------------------------------------- */
body {
    font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--podloga);
    color: var(--mastilo);
}

main { background: var(--podloga); }

/* ---------------------------------------------------------------------
   TAMNA TRAKA: navigacija
   --------------------------------------------------------------------- */
.navbar {
    background: var(--traka) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    box-shadow: none;
}

.navbar .nav-link { color: var(--na-traci-3) !important; }
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--na-traci) !important;
    background: rgba(255, 255, 255, .07);
}

.btn-register-nav {
    background: var(--crvena-traka) !important;
    border-radius: 9px;
    min-height: 44px;              /* prst, ne mis */
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.btn-register-nav:hover {
    background: #d12e20 !important;
    transform: none;
    box-shadow: none;
}

/* ---------------------------------------------------------------------
   TAMNA TRAKA: zaglavlje kategorije
   --------------------------------------------------------------------- */
.category-hero,
.categories-hero {
    background: var(--traka) !important;
    padding: 26px 0 32px;
}

/* Ogromno „FS" u pozadini — na mekšoj traci se vidi kao mrlja. */
.category-hero::before,
.categories-hero::before { display: none; }

.hero-title    { color: var(--na-traci); font-size: 2.1rem; line-height: 1.15; }
.hero-subtitle { color: var(--na-traci-2); font-size: 1rem; }

.hero-stats {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: none;
}
.hero-stats .stat-number  { color: var(--na-traci); }
.hero-stats .stat-label   { color: var(--na-traci-2); }   /* bilo 0.4 = 3.4:1 */
.hero-stats .stat-divider { background: rgba(255, 255, 255, .12); }

.breadcrumb .breadcrumb-item a       { color: var(--na-traci-3); }
.breadcrumb .breadcrumb-item a:hover { color: var(--na-traci); }
.breadcrumb .breadcrumb-item.active  { color: var(--na-traci); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: #6b7a90; }

/* ---------------------------------------------------------------------
   SVETAO SADRŽAJ
   --------------------------------------------------------------------- */
.subcategories-section,
.firms-in-category,
.categories-grid-section,
.cta-luxury-section {
    background: var(--podloga) !important;
    border-color: var(--ivica) !important;
}

.subcategories-section h5,
.firms-in-category h2,
.firms-in-category .text-light {
    color: var(--mastilo) !important;
}

/* ---------------------------------------------------------------------
   PODKATEGORIJE — MREŽA, NE SLOBODAN PRELOM
   ---------------------------------------------------------------------
   Prva verzija je koristila `flex-wrap`. Sa četiri stavke to izgleda
   uredno; sa 51 (koliko ih ima „Automobili") svaki red se završava na
   drugom mestu i nema nijedne zajedničke linije za oko.

   `repeat(auto-fill, minmax(190px, 1fr))` daje JEDNAKE kolone koliko
   ih stane: leva i desna ivica se poklapaju u svakom redu, a broj
   kolona se sam prilagodi širini ekrana. Dugo ime se skraćuje sa tri
   tačke umesto da razvuče svoju kolonu. */
.kf-potkategorije {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
}

.subcategory-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: var(--povrsina) !important;
    border: 1px solid var(--ivica) !important;
    border-radius: 10px;
    min-height: 44px;
    text-decoration: none;
    overflow: hidden;
}

/* Ime zauzima sve što pretekne i skraćuje se, pa značka uvek stoji
   desno — u svakoj ćeliji na istom mestu. */
.subcategory-link > span:first-of-type {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13.5px;
}

.subcategory-link .badge { flex: 0 0 auto; }
.subcategory-link span { color: var(--mastilo) !important; }
.subcategory-link:hover {
    background: #eef0f4 !important;
    border-color: var(--ivica-jaca) !important;
}
.subcategory-link .badge {
    background: var(--plava-bleda) !important;
    color: var(--plava-tamna) !important;
}

/* Kartica kategorije (strana „sve kategorije") */
.category-card {
    background: var(--povrsina);
    border: 1px solid var(--ivica);
    box-shadow: none;
}
.category-card::before,
.category-card::after { display: none; }
.category-card:hover {
    transform: translateY(-3px);
    border-color: var(--ivica-jaca);
    box-shadow: 0 8px 24px rgba(20, 22, 26, .08);
}
.category-card .category-name   { color: var(--mastilo); }
.category-card:hover .category-name { color: var(--crvena-tekst); }
.category-card .category-stats  { color: var(--prigusen); }
.category-card .firm-count      { color: var(--prigusen); }
.category-card .premium-count   { color: var(--crvena-tekst); opacity: 1; }
.category-icon-wrapper          { background: var(--plava-bleda); }
.category-icon-wrapper i        { color: var(--plava-tamna); }
.category-card:hover .category-icon-wrapper   { background: var(--crvena-bleda); }
.category-card:hover .category-icon-wrapper i { color: var(--crvena-tekst); }

/* CTA */
.cta-luxury-card {
    background: var(--povrsina);
    border: 1px solid var(--ivica);
    backdrop-filter: none;
}
.cta-luxury-card::before { display: none; }
.cta-title { color: var(--mastilo); }
.cta-text  { color: var(--mastilo-2); }      /* bilo 0.4 = 3.4:1 */
.cta-small { color: var(--prigusen); }        /* bilo 0.2 = 1.8:1 */

/* ---------------------------------------------------------------------
   STARA KARTICA FIRME — gasi se
   ---------------------------------------------------------------------
   `.firm-card` je crtana za crnu pozadinu: providne bele gradijente i
   beo tekst. Na svetlom bi bila nevidljiva. Zamenjuje je `.kf-kartica`
   iz `includes/kartica_firme.php`.

   Pravila ispod stoje da stranica ne pukne ako negde zaostane stari
   ispis. Kad potvrdiš da je svuda zamenjeno, i ona i `.firm-*` iz
   style.css mogu da nestanu. */
.firm-card {
    background: var(--povrsina) !important;
    border: 1px solid var(--ivica) !important;
    box-shadow: none !important;
}
.firm-card::before,
.firm-card::after { display: none !important; }
.firm-card-title, .firm-card-title a { color: var(--plava-tamna) !important; }
.firm-meta       { color: var(--mastilo-2) !important; }
.firm-details    {
    background: transparent !important;
    border: 1px solid var(--ivica-jaca) !important;
    color: var(--mastilo) !important;
    border-radius: 9px !important;
    min-height: 44px;
}
.firm-promo {
    background: var(--crvena-bleda) !important;
    border-color: transparent !important;
    color: var(--crvena-tekst) !important;
}

/* ---------------------------------------------------------------------
   PODNOŽJE — ostaje tamno, ali čitljivo
   --------------------------------------------------------------------- */
footer {
    background: var(--traka) !important;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
footer a,
footer ul li a,
.footer-link       { color: var(--na-traci-2) !important; }   /* bilo 0.5–0.6 */
footer a:hover,
footer ul li a:hover,
.footer-link:hover { color: var(--na-traci) !important; }
.social-link       { color: var(--na-traci-2) !important; background: rgba(255,255,255,.1); }

/* ---------------------------------------------------------------------
   DROPDOWN KATEGORIJA
   ---------------------------------------------------------------------
   Definisan dvaput u style.css (linije 159 i 1636); ovo je jedno
   mesto koje važi. */
.dropdown-menu-categories {
    background: var(--povrsina);
    border: 1px solid var(--ivica);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(20, 22, 26, .12);
}
.dropdown-item-category .category-count {
    background: var(--plava-bleda) !important;
    color: var(--plava-tamna) !important;
}

/* ---------------------------------------------------------------------
   MREŽA KARTICA
   --------------------------------------------------------------------- */
.kf-mreza {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
@media (max-width: 991.98px) { .kf-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .kf-mreza { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   PRAZNA KATEGORIJA I POZIV NA UPIS
   --------------------------------------------------------------------- */
.kf-prazno {
    background: var(--povrsina);
    border: 1px dashed var(--ivica-jaca);
    border-radius: 14px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--mastilo-2);
}

.kf-kartica--poziv {
    border-style: dashed;
    border-color: var(--ivica-jaca);
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
}
.kf-kartica--poziv h3 {
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--mastilo);
}
.kf-kartica--poziv p {
    margin: 0;
    color: var(--mastilo-2);
    font-size: 14px;
    line-height: 1.5;
}

/* Dugme „Upiši firmu" — style.css ga pravi crvenim i zaobljenim;
   ovde samo visina za prst i mirniji oblik. */
.btn-register {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--crvena-tekst);
    border-radius: 9px;
    padding: 10px 18px;
    font-size: 14px;
    min-height: 44px;
    box-sizing: border-box;
}
.btn-register:hover { background: #a81105; transform: none; box-shadow: none; }


/* =====================================================================
   KARTICA FIRME
   =====================================================================
   Spojeno ovde 18.10.2026. Ranije zaseban `kartica_firme.css`, uz
   uputstvo „dodaj na kraj ovog fajla ili zaseban". Uputstvo sa izborom
   u sebi je uputstvo koje se uradi napola — i jeste: kartica je bila
   bez stila, a ikone su se rasirile preko pola ekrana.

   Jedan fajl, jedan <link>, nema sta da se zaboravi.
   ===================================================================== */
/* =====================================================================
   Kartica firme — dodaje se na kraj /assets/css/style.css
   18.10.2026.  Varijanta B: svetao sadržaj, tamna traka iznad.
   =====================================================================
   Sve klase nose prefiks `kf-` da se ne sudare sa postojećim
   `firm-card`, `firm-meta`, `firm-details`. Kad potvrdiš da nova
   kartica radi, stare klase se brišu — dotle neka stoje jedna pored
   druge bez posledica.

   Boje stoje kao promenljive da bi se tema menjala na jednom mestu.
   NISU nazvane po boji (`--black` je lagao čim si poželeo svetlo) nego
   po ULOZI: podloga, kartica, ivica, mastilo.
   ===================================================================== */



.kf-kartica {
    background: var(--povrsina);
    border: 1px solid var(--ivica);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    box-sizing: border-box;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.kf-kartica:hover {
    border-color: #c9ced8;
    box-shadow: 0 6px 20px rgba(20, 22, 26, .08);
}

.kf-vrh { display: flex; align-items: flex-start; gap: 14px; }

.kf-logo {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 11px;
    object-fit: contain;
    background: var(--plava-bleda);
    padding: 4px;
    box-sizing: border-box;
}
.kf-logo--slovo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--plava-tamna);
    font-weight: 800;
    font-size: 19px;
    padding: 0;
}

.kf-naslovi { min-width: 0; flex: 1 1 auto; }

.kf-naziv {
    margin: 0 0 5px;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.2px;
}
.kf-naziv a { color: var(--plava-tamna); text-decoration: none; }
.kf-naziv a:hover { color: var(--crvena-tekst); text-decoration: underline; }

.kf-promo {
    display: inline-block;
    background: var(--crvena-bleda);
    color: var(--crvena-tekst);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    border-radius: 20px;
    padding: 3px 9px;
}

.kf-podaci { margin: 0; display: flex; flex-direction: column; gap: 7px; font-size: 14px; }
.kf-red    { display: flex; align-items: center; gap: 9px; }
.kf-red span { color: var(--mastilo-2); }

.kf-ikona { width: 15px; height: 15px; flex: 0 0 auto; color: var(--prigusen); }

.kf-tel { color: var(--plava-tamna); font-weight: 600; text-decoration: none; }
.kf-tel:hover { text-decoration: underline; }

/* `.kf-skriveno` je obrisana. Naziv polja sada stoji u <title> unutar
   SVG-a: čitač ekrana ga pročita, oko ga ne vidi, i ništa od toga ne
   zavisi od toga da li je ovaj fajl stigao do pretraživača. */

.kf-detalji {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--ivica-jaca);
    border-radius: 9px;
    padding: 10px 14px;
    color: var(--mastilo);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    min-height: 44px;          /* prst, ne mis */
    box-sizing: border-box;
}
.kf-detalji:hover {
    background: var(--podloga);
    border-color: #c9ced8;
    color: var(--mastilo);
    text-decoration: none;
}
.kf-strelica { width: 14px; height: 14px; }


/* =====================================================================
   NASLOVNA STRANA
   =====================================================================
   Dodato 19.10.2026. posle merenja na telefonu.

   `tema-b.css` je bio ucitan i na naslovnoj (header_inc.php, linija 34),
   ali je naslovnu promasio: `.hero-section` ovde nije bio pomenut, pa je
   ostao sa prelivom `#1a1a1a → #2d2d2d → var(--blue-dark)` iz style.css.
   Svetla tema je stigla do kategorija i stala.

   Izmereno sa snimka ekrana:

     natpis u zaglavlju / traka        1,06 : 1   (minimum 3:1)
     dugme menija / traka              1,12 : 1   (minimum 3:1)
     vodeni zig „FS" / podloga         1,10 : 1   (nevidljiv, a smeta)

   Natpis je SLIKA (`/slike/firme-iz-srbije.png`), ne tekst. Nijedno
   pravilo u CSS-u ne menja piksele u PNG-u — zato ispod stoji bela
   podloga ispod loga, kao zavoj dok ne stigne verzija sa belim slovima.
   Jedan red, brise se kad logo bude beo.
   ===================================================================== */

/* ---------------------------------------------------------------------
   ZAGLAVLJE: logo i dugme menija
   --------------------------------------------------------------------- */

/* ZAVOJ — brisi kad stigne logo sa belim slovima. */
.navbar-brand img {
    background: #ffffff;
    border-radius: 10px;
    padding: 4px 9px;
    box-sizing: border-box;
}

/* Bootstrap crta tri crte tamnom bojom; na tamnoj traci ih nema. */
.navbar-toggler {
    border: 1px solid rgba(255, 255, 255, .38);
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .18);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------------------------------------------------------------------
   STARI HERO — gasi se
   ---------------------------------------------------------------------
   `.hero-section` vise ne postoji u `index.php`. Pravila ispod stoje za
   slucaj da je klasa zaostala negde gde je nisam video: da strana ne
   padne u crno i da ogromno „FS" ne izbije iza teksta. */
.hero-section {
    background: var(--povrsina) !important;
    min-height: 0;
}
.hero-section::before { display: none !important; }
.hero-section .display-4,
.hero-section .lead { color: var(--mastilo) !important; }

/* ---------------------------------------------------------------------
   NOVI HERO: alat, ne slika
   ---------------------------------------------------------------------
   Jedna sirina za sve: polje, dugme, obe precice. Na snimku su bile
   1099 px, 1099 px, 802 px i opet 1099 px — jedno uze dugme nasred.
   Uzrok nije bio nemar nego jedno pravilo koje nije uhvatilo sve:
   `@media (max-width: 768px) .hero-section .btn { width: 100% }`, a
   „Dodaj firmu besplatno" je imao klasu `btn-red` BEZ `btn`.

   Zato ovde nema `width: 100%` ni na cemu. Sve je u istom `flex`
   kontejneru, a `flex: 1 1 0` deli prostor na jednake delove. Nije
   pravilo koje svako dete mora da ispuni — nego oblik u kom se
   nejednakost ne moze desiti. */
.fis-hero {
    background: var(--povrsina);
    padding: 24px 0 26px;
    border-bottom: 1px solid var(--ivica);
}
.fis-hero > .container { max-width: 720px; }

.fis-hero-naslov {
    margin: 0 0 8px;
    font-size: 1.7rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.5px;
    color: var(--mastilo);
}
.fis-hero-uvod {
    margin: 0 0 20px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--mastilo-2);
}

.fis-trazilica {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fis-polje {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 52px;
    background: var(--povrsina);
    border: 1px solid var(--ivica-jaca);
    border-radius: 12px;
    padding: 0 14px;
    box-sizing: border-box;
}
.fis-polje:focus-within {
    border-color: var(--plava-tamna);
    box-shadow: 0 0 0 3px rgba(26, 58, 92, .12);
}
.fis-polje svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    color: var(--prigusen);
}
/* 16px nije estetika: ispod toga iPhone zumira stranu na dodir polja. */
.fis-polje input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    color: var(--mastilo);
}
.fis-polje input::placeholder { color: var(--prigusen); }

.fis-dugme-glavno {
    min-height: 52px;
    border: 0;
    border-radius: 12px;
    background: var(--crvena-tekst);     /* belo na njoj = 5,9:1 */
    color: #ffffff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}
.fis-dugme-glavno:hover { background: #a81105; color: #ffffff; }

.fis-prece {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.fis-prec {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid var(--ivica-jaca);
    border-radius: 12px;
    color: var(--mastilo);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
}
.fis-prec:hover {
    background: var(--podloga);
    border-color: #c9ced8;
    color: var(--mastilo);
}
.fis-prec i { color: var(--prigusen); }

.fis-skriveno {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Na sirem ekranu hero se centrira. Kolona od 720px poravnata levo
   izgleda kao da je neko zaboravio da je razvuce; centrirana izgleda
   kao ono sto jeste — strana cija je jedina svrha jedno polje za unos.
   Ako ti vise leži levo: obrisi `text-align: center` i vrati
   `justify-content: flex-start`. */
@media (min-width: 768px) {
    .fis-hero { padding: 48px 0 50px; text-align: center; }
    .fis-hero-naslov { font-size: 2.3rem; }
    .fis-trazilica { flex-direction: row; }
    .fis-dugme-glavno { flex: 0 0 auto; padding: 0 32px; }
    .fis-prece { justify-content: center; }
    .fis-prec { flex: 0 0 auto; padding: 0 20px; }
}

/* ---------------------------------------------------------------------
   KATEGORIJE NA NASLOVNOJ
   --------------------------------------------------------------------- */
.fis-kategorije { padding: 26px 0 30px; }

.fis-kat-kartica {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    box-sizing: border-box;
    background: var(--povrsina);
    border: 1px solid var(--ivica);
    border-radius: 12px;
    padding: 14px;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.fis-kat-kartica:hover {
    border-color: var(--ivica-jaca);
    box-shadow: 0 6px 20px rgba(20, 22, 26, .08);
}
.fis-kat-ikona {
    font-size: 20px;
    line-height: 1;
    color: var(--plava-tamna);
}
.fis-kat-kartica:hover .fis-kat-ikona { color: var(--crvena-tekst); }
.fis-kat-ime {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mastilo);
}

/* Bez ovoga vezu boji Bootstrap svojim `#0d6efd` — 3,7:1 na nasoj
   podlozi, ispod minimuma 4,5:1 za tekst ove velicine. Nije se videlo
   u kodu; videlo se tek kad je strana nacrtana i pogledana. */
.fis-sve {
    font-size: 14px;
    font-weight: 600;
    color: var(--crvena-tekst);          /* 5,9:1 */
    text-decoration: none;
    white-space: nowrap;
}
.fis-sve:hover { color: #a81105; text-decoration: underline; }

/* ---------------------------------------------------------------------
   OSTALE SEKCIJE NASLOVNE
   ---------------------------------------------------------------------
   `bg-light` iz Bootstrapa je skoro bela; na nasoj podlozi se ne vidi
   da je sekcija druga. Ujednacavamo. */
.promo-section.bg-light,
.popular-section.bg-light { background: var(--povrsina) !important; }

.firms-section,
.why-section,
.promo-section,
.popular-section { background: var(--podloga); }

.firms-section h2,
.why-section h2,
.promo-section h2,
.popular-section h2 { color: var(--mastilo); }