/**
 * ============================================================
 * POT: GLOBALNO/vmesnik/css/osnova.css
 * 📅 VERZIJA: v001 (09.07.2026)
 * ============================================================
 *
 * 🏛️ NIVO: GLOBALNO (frontend)
 *
 * 📰 NAMEN:
 *     Reset, tipografija, globalni elementi.
 *     Odvisno: spremenljivke.css
 *
 * 📌 STATUS: Novo – v001
 * 👤 AVTOR: Mavis (MiniMax Agent Team)
 * 🌐 JEZIK: sl
 * ============================================================
 */

/* --------------------------------------------------------
 * RESET
 * -------------------------------------------------------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--pisava-osnovna);
    font-size: var(--velikost-m);
    color: var(--besedilo);
    background: var(--ozadje);
    line-height: var(--vrsticna);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------
 * TIPOGRAFIJA
 * -------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--pisava-naslov);
    color: var(--besedilo-s);
    line-height: var(--vrsticna-tesna);
    font-weight: var(--teza-krepka);
}

h1 { font-size: var(--velikost-3xl); }
h2 { font-size: var(--velikost-2xl); }
h3 { font-size: var(--velikost-xl); }
h4 { font-size: var(--velikost-l); }
h5 { font-size: var(--velikost-m); }
h6 { font-size: var(--velikost-s); }

p {
    margin-bottom: var(--razmik-m);
    color: var(--besedilo);
}

p:empty {
    display: none;
}

a {
    color: var(--zlata);
    text-decoration: none;
    transition: color var(--prehod);
}

a:hover {
    color: var(--zlata-svetla);
}

strong {
    color: var(--besedilo-s);
    font-weight: var(--teza-krepka);
}

em {
    font-style: italic;
}

small {
    font-size: var(--velikost-xs);
    color: var(--besedilo-d);
}

code, pre {
    font-family: var(--pisava-mono);
    font-size: var(--velikost-s);
}

code {
    background: var(--kartica);
    border: 1px solid var(--rob);
    border-radius: var(--rob-s);
    padding: 0.15em 0.4em;
    color: var(--zlata);
}

pre {
    background: var(--kartica);
    border: 1px solid var(--rob);
    border-radius: var(--rob-m);
    padding: var(--razmik-m);
    overflow-x: auto;
    color: var(--besedilo);
}

hr {
    border: none;
    border-top: 1px solid var(--rob);
    margin: var(--razmik-l) 0;
}

ul, ol {
    padding-left: var(--razmik-l);
    margin-bottom: var(--razmik-m);
}

li {
    margin-bottom: var(--razmik-xs);
}

img, svg {
    display: block;
    max-width: 100%;
}

button {
    font-family: var(--pisava-osnovna);
    cursor: pointer;
}

input, select, textarea {
    font-family: var(--pisava-osnovna);
    font-size: var(--velikost-m);
}

/* --------------------------------------------------------
 * OZADJE – ZVEZDNO POLJE
 * -------------------------------------------------------- */
.zvezde-ozadje {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(92, 155, 224, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(156, 111, 228, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 90%, rgba(232, 200, 74, 0.03) 0%, transparent 50%);
}

/* --------------------------------------------------------
 * POMOŽNI RAZREDI
 * -------------------------------------------------------- */
.besedilo-zlato { color: var(--zlata); }
.besedilo-prigl { color: var(--besedilo-d); }
.besedilo-desno { text-align: right; }
.besedilo-sredina { text-align: center; }

.razmik-spodaj-m { margin-bottom: var(--razmik-m); }
.razmik-spodaj-l { margin-bottom: var(--razmik-l); }
.razmik-spodaj-xl { margin-bottom: var(--razmik-xl); }

.razmik-zgoraj-m { margin-top: var(--razmik-m); }
.razmik-zgoraj-l { margin-top: var(--razmik-l); }

.flex { display: flex; }
.flex-sredina { display: flex; align-items: center; }
.flex-med { display: flex; align-items: center; justify-content: space-between; }
.flex-konec { display: flex; align-items: center; justify-content: flex-end; }
.flex-presledek { gap: var(--razmik-m); }
.flex-ovij { flex-wrap: wrap; }
.flex-navpi { flex-direction: column; }

.mreza-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--razmik-m); }
.mreza-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--razmik-m); }
.mreza-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--razmik-m); }

.skrj { display: none !important; }
.vidno { display: block !important; }
.vidno-flex { display: flex !important; }

.veliko { font-size: var(--velikost-xl); }
.majhno { font-size: var(--velikost-xs); }

/* --------------------------------------------------------
 * ANIMACIJE
 * -------------------------------------------------------- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInZgoraj {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInSpodaj {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes pulziraj {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animacija-fadeIn {
    animation: fadeIn var(--prehod-pocasen) ease forwards;
}

.animacija-slideIn {
    animation: slideInZgoraj var(--prehod-pocasen) ease forwards;
}

/* --------------------------------------------------------
 * RESPONSIVNOST
 * -------------------------------------------------------- */
@media (max-width: 1024px) {
    :root {
        --nav-sirina: 220px;
    }
}

@media (max-width: 900px) {
    .mreza-3, .mreza-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    :root {
        --nav-sirina: 180px;
    }
}

@media (max-width: 600px) {
    .mreza-2, .mreza-3, .mreza-4 {
        grid-template-columns: 1fr;
    }

    :root {
        --nav-sirina: 0px;
    }

    h1 { font-size: var(--velikost-2xl); }
    h2 { font-size: var(--velikost-xl); }
    h3 { font-size: var(--velikost-l); }
}