/* ============================================================================
   RADDAR - tab "Zrak"

   PAZI NA ULOGE BOJA U styles.css (ista zamka kao u klima.css):
       --ink   = POZADINA stranice   (tamna u tamnoj temi, svijetla u svijetloj)
       --paper = TEKST               (obrnuto)
   Imena zvuce obrnuto nego sto jesu. Za tekst --paper, za pozadinu --ink.

   ------------------------------------------------------------------------
   ZASTO LJESTVICA NIJE U BOJAMA OSTATKA STRANICE
   ------------------------------------------------------------------------
   Ostatak Raddara ima prigusenu paletu (--signal, --amber, --mint...) i tab za
   zrak bi joj se rado priklonio. Ne priklanja se, namjerno.

   Europski indeks kakvoce zraka ima PROPISANE boje (EEA): cijan -> zelena ->
   zuta -> crvena -> tamnocrvena -> ljubicasta. Te se boje vide na svakoj
   europskoj stranici o zraku i ljudi ih citaju bez legende. Prebojati ih u
   kucnu paletu znacilo bi da isti indeks na dvije stranice izgleda razlicito -
   sto je gore od male nedosljednosti u dizajnu.

   Kompromis: zadrzan je REDOSLIJED I TON sluzbene ljestvice, ali zasicenost je
   spustena da se uklopi u prigusenu podlogu. Svijetla tema ima svoje vrijednosti
   jer bi ciste EEA boje na bijelom bile neprozirno svijetle (cijan na bijelom
   se ne vidi).

   e0 je "nema podatka" i NIJE dio ljestvice - siva je da se ne moze zamijeniti
   s "dobro". Rupa u podacima koja izgleda zeleno je laz koja se ne primijeti.
   ========================================================================= */

.zrak-wrap {
    --e0: #4A5464;
    --e1: #3FA9B4;   /* dobar               (EEA cijan, prigušen) */
    --e2: #4FB088;   /* zadovoljavajuć      (EEA zelena) */
    --e3: #D6BE4A;   /* osrednji            (EEA žuta) */
    --e4: #DD6B5A;   /* loš                 (EEA crvena) */
    --e5: #A33A52;   /* vrlo loš            (EEA tamnocrvena) */
    --e6: #7B4A8C;   /* izuzetno loš        (EEA ljubičasta) */

    /* Sekvencijalna ljestvica ruže: JEDNA nijansa. U tamnoj temi raste prema
       SVJETLIJEM (više = svjetlije na tamnoj podlozi), u svijetloj obrnuto.
       Svjetlina je monotona u oba smjera - to je jedini uvjet koji sekvencijalna
       ljestvica mora zadovoljiti, i razlog zašto ovdje nema duge. */
    --ruza-od: #21363C;
    --ruza-do: #7FE0EE;

    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--paper);
}

html[data-theme="light"] .zrak-wrap {
    --e0: #94A3B8;
    --e1: #2B8F9B;
    --e2: #3D8F6E;
    --e3: #A88C1E;
    --e4: #C4523F;
    --e5: #8C2A40;
    --e6: #6B3A7A;

    --ruza-od: #E4F0F2;
    --ruza-do: #14555E;
}

/* --- zaglavlje --- */
.zrak-lokacija {
    margin: 0;
    font-size: 14px;
    color: var(--paper);
}
.zrak-lokacija-hint { color: var(--fog-dim); font-size: 12.5px; }

/* --- prebacivanje načina --- */
.zrak-nacini { display: flex; flex-wrap: wrap; gap: 6px; }

.zrak-nacin {
    border: 1px solid var(--line-soft);
    background: transparent;
    color: var(--fog);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.zrak-nacin:hover { color: var(--paper); border-color: var(--fog); }
.zrak-nacin.aktivan { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.zrak-sadrzaj { display: flex; flex-direction: column; gap: 16px; }

/* --- kartice --- */
.zrak-kartica {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
}
.zrak-kartica h3 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--paper);
}
.zrak-kartica h4 {
    margin: 12px 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--paper);
}
.zrak-kartica h4:first-child { margin-top: 0; }

/* --- veliki indeks --- */
.zrak-glavna {
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 12px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    background: var(--panel);
    border-left: 6px solid var(--e0);
}
.zrak-glavna.e1 { border-left-color: var(--e1); }
.zrak-glavna.e2 { border-left-color: var(--e2); }
.zrak-glavna.e3 { border-left-color: var(--e3); }
.zrak-glavna.e4 { border-left-color: var(--e4); }
.zrak-glavna.e5 { border-left-color: var(--e5); }
.zrak-glavna.e6 { border-left-color: var(--e6); }

.zrak-glavna-broj { font-size: 40px; font-weight: 300; line-height: 1; color: var(--paper); }
.zrak-glavna-ime { font-size: 17px; font-weight: 600; color: var(--paper); }
.zrak-glavna-kad { font-size: 12.5px; color: var(--fog-dim); margin-top: 2px; }

/* --- mreža vrijednosti --- */
.zrak-mreza {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px;
}
.zrak-celija {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 11px;
    border-radius: 9px;
    background: var(--panel-raised);
    border: 1px solid var(--line-soft);
}
.zrak-celija-ime { font-size: 11.5px; color: var(--fog); letter-spacing: .03em; }
.zrak-celija-broj { font-size: 20px; font-weight: 500; color: var(--paper); line-height: 1.15; }
.zrak-celija-jed { font-size: 11px; color: var(--fog-dim); }
.zrak-celija-usp { font-size: 11px; color: var(--fog-dim); margin-top: 3px; }
.zrak-celija-usp.preko { color: var(--e4); font-weight: 600; }

/* Pelud: stupanj boji rub, ne cijelu ćeliju - inače bi šest ćelija u boji
   nadglasalo sve ostalo na stranici, a pelud je jedan od činitelja, ne glavni. */
.zrak-pelud { border-left: 3px solid var(--e0); }
.zrak-pelud.s0 { border-left-color: var(--e1); }
.zrak-pelud.s1 { border-left-color: var(--e3); }
.zrak-pelud.s2 { border-left-color: var(--e4); }
.zrak-pelud.s3 { border-left-color: var(--e5); }

/* --- znakovi i redovi --- */
.zrak-red { font-size: 14px; color: var(--paper); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zrak-znak {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    background: var(--e0);
}
.zrak-znak.e1 { background: var(--e1); }
.zrak-znak.e2 { background: var(--e2); }
.zrak-znak.e3 { background: var(--e3); }
.zrak-znak.e4 { background: var(--e4); color: #fff; }
.zrak-znak.e5 { background: var(--e5); color: #fff; }
.zrak-znak.e6 { background: var(--e6); color: #fff; }

/* --- potpis izvora --- */
.zrak-potpis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.zrak-potpis li {
    padding: 9px 12px;
    border-radius: 9px;
    background: var(--panel-raised);
    border-left: 3px solid var(--e3);
}
.zrak-potpis li.snaga2 { border-left-color: var(--e4); }
.zrak-potpis li strong { display: block; font-size: 13.5px; color: var(--paper); margin-bottom: 3px; }
.zrak-razlog { font-size: 12.5px; color: var(--fog); line-height: 1.5; }

/* --- traka sat po sat --- */
.zrak-dan-ime {
    font-size: 12px;
    color: var(--fog-dim);
    margin: 12px 0 4px;
    text-transform: capitalize;
}
.zrak-dan-ime:first-child { margin-top: 0; }

/* 24 stupca, jedan po satu. Nepotpun prvi dan se ne razvlači nego počinje u
   svojem stupcu (gridColumnStart iz JS-a), pa su isti sati u svim danima jedan
   ispod drugoga i dnevni se hod vidi okomito. S flexom je nepotpun dan razvlačio
   svojih 11 sati preko cijele širine i ništa se nije poklapalo. */
.zrak-traka {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 2px;
}
.zrak-sat {
    height: 34px;
    min-width: 0;
    border-radius: 4px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--e0);
    cursor: default;
}
.zrak-sat.e1 { background: var(--e1); }
.zrak-sat.e2 { background: var(--e2); }
.zrak-sat.e3 { background: var(--e3); }
.zrak-sat.e4 { background: var(--e4); }
.zrak-sat.e5 { background: var(--e5); }
.zrak-sat.e6 { background: var(--e6); }
.zrak-sat-h {
    font-size: 9.5px;
    color: rgba(0, 0, 0, .6);
    padding-bottom: 2px;
    font-variant-numeric: tabular-nums;
}
.zrak-sat.e5 .zrak-sat-h, .zrak-sat.e6 .zrak-sat-h, .zrak-sat.e0 .zrak-sat-h { color: rgba(255, 255, 255, .75); }

/* --- prozori --- */
.zrak-prozor-blok + .zrak-prozor-blok { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.zrak-prozori { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.zrak-prozori li {
    font-size: 12.5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--panel-raised);
    border: 1px solid var(--line-soft);
    color: var(--paper);
    font-variant-numeric: tabular-nums;
}

/* --- putanja --- */
.zrak-postavke { display: flex; flex-wrap: wrap; gap: 18px; }
.zrak-grupa { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zrak-grupa label { font-size: 12px; color: var(--fog-dim); margin: 0; }

.zrak-izbor {
    border: 1px solid var(--line-soft);
    background: transparent;
    color: var(--fog);
    border-radius: 7px;
    padding: 4px 10px;
    font-size: 12.5px;
    cursor: pointer;
}
.zrak-izbor:hover { color: var(--paper); border-color: var(--fog); }
.zrak-izbor.aktivan { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.zrak-glavni-gumb {
    margin-top: 12px;
    border: 1px solid var(--signal);
    background: var(--signal-dim);
    color: var(--paper);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13.5px;
    cursor: pointer;
}
.zrak-glavni-gumb:hover { background: var(--signal); color: var(--ink); }

/* Visina je fiksna jer se karta crta u tabu koji je do maloprije bio skriven -
   element bez visine daje Leafletu spremnik 0 px i karta ostane siva.
   invalidateSize u JS-u je drugi branik za isti slučaj. */
.zrak-karta {
    height: 340px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
}

.zrak-podrucja { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.zrak-podrucja li { font-size: 13px; color: var(--paper); }
.zrak-podrucja li strong { color: var(--paper); }

.zrak-sahara {
    padding: 11px 13px;
    border-radius: 9px;
    background: var(--panel-raised);
    border-left: 3px solid var(--e1);
    font-size: 13.5px;
    color: var(--paper);
    line-height: 1.5;
}
.zrak-sahara.s1 { border-left-color: var(--e3); }
.zrak-sahara.s2 { border-left-color: var(--e4); }
.zrak-sahara.s3 { border-left-color: var(--e5); }

/* --- tablica --- */
.zrak-tablica { width: 100%; border-collapse: collapse; font-size: 13px; }
.zrak-tablica th {
    text-align: left;
    font-weight: 600;
    font-size: 11.5px;
    color: var(--fog);
    padding: 5px 8px;
    border-bottom: 1px solid var(--line);
    letter-spacing: .03em;
}
.zrak-tablica td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--paper);
    font-variant-numeric: tabular-nums;
}
.zrak-tablica tr:last-child td { border-bottom: none; }


/* --- grafovi ---
   Paneli su u mreži koja se na širokom zaslonu lomi u dva stupca. Visina je
   fiksirana preko min-height u JS-u prije crtanja: ApexCharts računa širinu iz
   spremnika u trenutku render(), a spremnik nulte visine u tabu koji je do
   maloprije bio skriven daje graf od 0 px koji se poslije ne popravi sam. */
.zrak-graf {
    width: 100%;
    margin-top: 4px;
}

.zrak-paneli {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}
@media (min-width: 900px) {
    .zrak-paneli { grid-template-columns: 1fr 1fr; gap: 4px 18px; }
}

/* ApexCharts crta svoj tekst u SVG-u i ne nasljeđuje boju od roditelja svugdje
   (naslovi i oznake osi imaju vlastite stilove iz JS-a). Ovo pokriva ostatak,
   da se ništa ne izgubi u svijetloj temi. */
.zrak-graf .apexcharts-title-text { fill: var(--paper); }
.zrak-graf .apexcharts-tooltip { font-size: 11.5px; }


/* Legenda EAQI ljestvice. Vodoravna, lomi se na uskom zaslonu. */
.zrak-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 8px;
}
.zrak-legenda-stavka {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--fog);
    font-style: normal;
}
.zrak-legenda-boja {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    background: var(--e0);
    flex: 0 0 auto;
}
.zrak-legenda-boja.e1 { background: var(--e1); }
.zrak-legenda-boja.e2 { background: var(--e2); }
.zrak-legenda-boja.e3 { background: var(--e3); }
.zrak-legenda-boja.e4 { background: var(--e4); }
.zrak-legenda-boja.e5 { background: var(--e5); }
.zrak-legenda-boja.e6 { background: var(--e6); }

.zrak-vodeci {
    margin: 0 0 10px;
    font-size: 13.5px;
    color: var(--paper);
    line-height: 1.5;
}
.zrak-vodeci strong { color: var(--paper); }


/* --- vrpca "tko drži indeks" ---
   Identitet nosi TEKST, ne boja: pet boja koje bi daltonist razlikovao u ovoj
   paleti ne postoji (provjereno validatorom). Susjedni odsječci se razdvajaju
   naizmjeničnom nijansom podloge, ne različitim bojama. */
.zrak-vrpca-naslov {
    font-size: 11.5px;
    color: var(--fog-dim);
    margin: 14px 0 4px;
    letter-spacing: .03em;
}
.zrak-vrpca {
    display: flex;
    width: 100%;
    height: 22px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--line-soft);
}
.zrak-vrpca-dio {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--paper);
    background: var(--panel-raised);
    overflow: hidden;
    white-space: nowrap;
    cursor: default;
}
.zrak-vrpca-dio.par { background: var(--line-soft); }
.zrak-vrpca-dio.prazno { background: transparent; color: var(--fog-dim); }


/* --- koncentracijska ruža --- */
.zrak-ruza-omot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.zrak-ruza {
    width: 100%;
    max-width: 420px;
    height: auto;
}
.zrak-ruza path, .zrak-ruza circle { cursor: default; }

.zrak-ruza-legenda {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--fog);
}
.zrak-ruza-traka {
    display: flex;
    width: 160px;
    height: 10px;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--line-soft);
}
.zrak-ruza-traka i { flex: 1 1 0; }
.zrak-ruza-srafira { display: inline-flex; align-items: center; gap: 5px; }
.zrak-ruza-srafira i {
    width: 12px; height: 12px; border-radius: 3px;
    border: 1px solid var(--line-soft);
    background: repeating-linear-gradient(45deg,
        transparent, transparent 2px, var(--fog-dim) 2px, var(--fog-dim) 3.5px);
}


.zrak-granice-opis { margin-top: 6px; }
.zrak-granica-red {
    margin: 0 0 4px;
    font-size: 11.5px;
    color: var(--fog-dim);
    line-height: 1.5;
}
.zrak-granica-red strong { color: var(--fog); }

/* Odsječak vrpce koji odgovara odabranom pod-indeksu - da se izbor gore i
   vrpca dolje vežu bez dodatne boje. */
.zrak-vrpca-dio.istaknut {
    background: var(--signal-dim);
    color: var(--paper);
    font-weight: 600;
}

/* --- napomene i stanja --- */
.zrak-napomena {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--fog-dim);
    line-height: 1.55;
}
.zrak-napomena i { margin-right: 5px; opacity: .8; }
.zrak-napomena strong { color: var(--fog); }

.zrak-izvor {
    margin: 0;
    font-size: 11.5px;
    color: var(--fog-dim);
    line-height: 1.5;
    padding-top: 4px;
}

.zrak-objasnjenje { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.zrak-objasnjenje li { font-size: 12.5px; color: var(--fog); line-height: 1.5; }
.zrak-objasnjenje li strong { color: var(--paper); }
.zrak-objasnjenje-mali { margin: 0; font-size: 12px; color: var(--fog-dim); line-height: 1.5; }

.zrak-sitno { margin: 8px 0 0; font-size: 12px; color: var(--fog-dim); }
.zrak-prazno { margin: 0; font-size: 13px; color: var(--fog-dim); font-style: italic; }
.zrak-cekaj { font-size: 13px; color: var(--fog); }

.zrak-poruka { font-size: 13.5px; color: var(--fog); white-space: pre-line; }
.zrak-poruka.greska, .zrak-greska {
    color: var(--coral);
    white-space: pre-line;
    font-size: 13.5px;
}

@media (max-width: 640px) {
    .zrak-glavna-broj { font-size: 32px; }
    .zrak-karta { height: 260px; }
    .zrak-sat { height: 28px; }
    .zrak-sat-h { font-size: 8.5px; }
}

/* ============================================================================
   REDIZAJN (rujan 2026.) - isti jezik kao solarni i agro tab.

   Pravila iznad ostaju (sluzbena EEA ljestvica, jedna os po panelu...); ovdje
   se mijenja samo KAKO stranica stoji: nema kartica s okvirom i pozadinom,
   odjeljke dijeli tanka crta; na vrhu je mjerac i odgovori; objasnjenja su
   sklopljena u "Kako se cita" na dnu svakog odjeljka. Stoji na KRAJU datoteke
   da nadjaca starija pravila istog imena bez da ih se brise.
   ========================================================================= */

.zrak-wrap { gap: 22px; padding-block: 6px 36px; }
.zrak-sadrzaj { gap: 0; }

.zrak-lokacija { font-size: 13px; color: var(--fog); }
.zrak-lokacija i { color: var(--fog-dim); margin-right: 3px; }

/* nacini: segmentirani prekidac */
.zrak-nacini {
    display: inline-flex;
    align-self: flex-start;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper) 5%, transparent);
}
.zrak-nacin { border: 0; padding: 7px 16px; font: 500 13px var(--font); color: var(--fog); }
.zrak-nacin i { font-size: 12px; margin-right: 4px; opacity: .75; }
.zrak-nacin:hover { color: var(--paper); border: 0; }
.zrak-nacin.aktivan { background: var(--panel-raised); color: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }

/* odjeljci umjesto kartica */
.zrak-kartica {
    background: none;
    border: 0;
    border-top: 1px solid var(--line-soft);
    border-radius: 0;
    padding: 22px 0 24px;
}
.zrak-kartica h3 {
    margin: 0 0 16px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--fog-dim);
}
.zrak-kartica h4 { font-size: 14px; font-weight: 600; }

/* napomene */
.zrak-zasto { margin-top: 14px; }
.zrak-zasto summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--fog-dim);
}
.zrak-zasto summary::-webkit-details-marker { display: none; }
.zrak-zasto summary::before {
    content: '+';
    display: grid; place-items: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 1px solid var(--line);
    font-size: 11px;
    transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.zrak-zasto[open] summary::before { transform: rotate(45deg); }
.zrak-zasto summary:hover { color: var(--paper); }
.zrak-zasto p { max-width: 82ch; margin: 8px 0 0 24px; font-size: 12.5px; line-height: 1.65; color: var(--fog); }
.zrak-zasto strong { color: var(--paper); font-weight: 600; }

.zrak-vazno { margin: 10px 0 0; max-width: 90ch; font-size: 13px; line-height: 1.55; color: var(--fog); }
.zrak-vazno strong { color: var(--paper); font-weight: 600; }
.zrak-prazno { font-style: normal; }
.zrak-izvor { margin-top: 18px; font-size: 11.5px; color: var(--fog-dim); }

/* --------------------------------------------------------------------------
   HERO: mjerac + odgovori
   -------------------------------------------------------------------------- */

.zrak-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 40px;
    align-items: center;
    padding: 10px 0 26px;
}
.zrak-hero-mjerac { position: relative; display: flex; justify-content: center; max-width: 380px; width: 100%; }
.zrak-mjerac { width: 100%; height: auto; overflow: visible; }
.zrak-mjerac-pojas { fill: none; stroke-width: 12; stroke-linecap: butt; opacity: .85; }
.zrak-mjerac-tocka { fill: var(--paper); stroke: var(--ink); stroke-width: 3.5; }
.zrak-hero-broj {
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-align: center;
}
.zrak-hero-v { font-size: clamp(54px, 7vw, 72px); font-weight: 600; letter-spacing: -.04em; line-height: .95; color: var(--paper); }
.zrak-hero-ime { font-size: 16px; font-weight: 600; color: var(--paper); }
.zrak-hero-ime::before {
    content: '';
    display: inline-block;
    width: 9px; height: 9px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--e0);
    transform: translateY(-1px);
}
.zrak-hero-ime.e1::before { background: var(--e1); }
.zrak-hero-ime.e2::before { background: var(--e2); }
.zrak-hero-ime.e3::before { background: var(--e3); }
.zrak-hero-ime.e4::before { background: var(--e4); }
.zrak-hero-ime.e5::before { background: var(--e5); }
.zrak-hero-ime.e6::before { background: var(--e6); }
.zrak-hero-kad { font-size: 12px; color: var(--fog-dim); }
.zrak-hero-mjerac { padding-bottom: 64px; }

.zrak-hero-popis { display: flex; flex-direction: column; }
.zrak-hero-red {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 12px;
    padding: 12px 2px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    background: none;
    color: var(--paper);
    font: 400 14.5px var(--font);
    text-align: left;
    cursor: default;
}
.zrak-hero-red:first-child { border-top: 1px solid var(--line-soft); }
.zrak-hero-red:has(.zrak-hero-strelica) { cursor: pointer; }
.zrak-hero-red:has(.zrak-hero-strelica):hover { background: color-mix(in srgb, var(--paper) 3%, transparent); }
.zrak-hero-red-oznaka { font-size: 12.5px; color: var(--fog-dim); }
.zrak-hero-red-tekst strong { font-weight: 600; }
.zrak-hero-red-tekst span { color: var(--fog); font-size: 13px; margin-left: 4px; }
.zrak-hero-strelica { color: var(--fog-dim); }

/* --------------------------------------------------------------------------
   SASTAV i PELUD: redovi s trakom
   -------------------------------------------------------------------------- */

.zrak-tvari { display: flex; flex-direction: column; }
.zrak-tvar {
    display: grid;
    grid-template-columns: 76px 118px minmax(80px, 1fr) 150px;
    align-items: center;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 70%, transparent);
}
.zrak-tvar:last-child { border-bottom: 0; }
.zrak-tvar-ime { font-size: 13.5px; font-weight: 600; color: var(--paper); }
.zrak-tvar-broj { font-size: 18px; font-weight: 600; color: var(--paper); font-variant-numeric: tabular-nums; }
.zrak-tvar-broj small { font-size: 11.5px; font-weight: 400; color: var(--fog-dim); }
.zrak-tvar-traka {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper) 7%, transparent);
}
.zrak-tvar-traka.prazna { background: none; }
.zrak-tvar-pun { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--e1); }
.zrak-tvar-pun.blizu { background: var(--e3); }
.zrak-tvar-pun.preko { background: var(--e4); }
/* crtica na 50 % sirine = 100 % preporuke (traka ide do 2x) */
.zrak-tvar-crta { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--fog); }
.zrak-tvar-usp { font-size: 12.5px; color: var(--fog-dim); text-align: right; white-space: nowrap; }
.zrak-tvar-usp.preko { color: var(--e4); font-weight: 600; }

.zrak-stupnjevi { display: inline-flex; gap: 4px; }
.zrak-stupnjevi i { width: 22px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--paper) 8%, transparent); }
.zrak-pelud.s0 .zrak-stupnjevi i.da { background: var(--e1); }
.zrak-pelud.s1 .zrak-stupnjevi i.da { background: var(--e3); }
.zrak-pelud.s2 .zrak-stupnjevi i.da { background: var(--e4); }
.zrak-pelud.s3 .zrak-stupnjevi i.da { background: var(--e5); }
.zrak-tvar.zrak-pelud { border-left: 0; }

/* ostalo */
.zrak-potpis li { background: none; border-radius: 0; padding: 2px 0 2px 14px; }
.zrak-prozori li { border: 0; background: color-mix(in srgb, var(--paper) 5%, transparent); }
.zrak-prozori li:first-child { background: color-mix(in srgb, var(--e2) 22%, transparent); font-weight: 600; }
.zrak-izbor { border-color: transparent; background: color-mix(in srgb, var(--paper) 5%, transparent); }
.zrak-izbor.aktivan { background: var(--panel-raised); color: var(--paper); border-color: transparent; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.zrak-karta { border-radius: 16px; border: 0; box-shadow: inset 0 0 0 1px var(--line-soft); }
.zrak-vrpca-naslov { color: var(--fog-dim); }
.zrak-vrpca { width: auto; border: 0; border-radius: 4px; }

@media (max-width: 900px) {
    .zrak-hero { grid-template-columns: 1fr; gap: 20px; }
    .zrak-hero-mjerac { margin: 0 auto; }
}
@media (max-width: 600px) {
    .zrak-tvar { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 6px 12px; }
    .zrak-tvar-traka { grid-column: 1 / -1; grid-row: 2; }
    .zrak-hero-red { grid-template-columns: 90px minmax(0, 1fr) auto; }
    .zrak-nacin { padding: 7px 11px; font-size: 12.5px; }
}

/* Sat po sat: dan lijevo, jedno zaglavlje sati, niske celije. */
.zrak-dani { display: flex; flex-direction: column; gap: 3px; overflow-x: auto; }
.zrak-dan-red { display: grid; grid-template-columns: 118px minmax(480px, 1fr); align-items: center; gap: 10px; }
.zrak-dan-red .zrak-dan-ime { margin: 0; font-size: 12.5px; color: var(--fog); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.zrak-dan-red .zrak-traka { gap: 2px; }
.zrak-sat { height: 18px; min-height: 0; border-radius: 3px; padding: 0; }
.zrak-sat-h { display: none; }
.zrak-sat:hover { outline: 2px solid var(--paper); outline-offset: 1px; }
.zrak-sat-oznaka { font-size: 11px; color: var(--fog-dim); }
.zrak-dan-red.zaglavlje { margin-bottom: 2px; }
.zrak-sat { opacity: .8; transition: opacity .15s; }
.zrak-sat:hover { opacity: 1; }
.zrak-glavni-gumb {
    border: 0;
    border-radius: 999px;
    padding: 9px 18px;
    background: color-mix(in srgb, var(--signal) 16%, transparent);
    color: var(--paper);
    font: 500 13.5px var(--font);
}
.zrak-glavni-gumb:hover { background: color-mix(in srgb, var(--signal) 28%, transparent); color: var(--paper); }

/* ==========================================================================
   DORADA (rujan 2026., drugi krug) - popis lijevo, detalj desno

   Prvi redizajn je bio previse "sazet": red, brojka, gotovo. Sada popis
   ostaje kratak, a detalj (graf, sto tvar jest, odakle dolazi, prosjek
   prema smjernici, sezona i krizne reakcije peludi) otvara se KLIKOM.
   Na uskom zaslonu detalj se otvara ispod retka (harmonika) - vidi
   masterDetalj() u zrakTab.js.
   ========================================================================== */

/* ---------- hero, desna strana ---------- */
.zrak-hero { align-items: start; padding-top: 18px; }
.zrak-hero-desno { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.zrak-24-glava { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.zrak-24-naslov { font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--fog-dim); }
.zrak-24-sazetak { font-size: 12.5px; color: var(--fog); }
.zrak-24-sazetak strong { color: var(--paper); font-weight: 600; }
.zrak-24-traka { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; }
.zrak-24-sat { height: 26px; border-radius: 3px; background: var(--e0); opacity: .82; transition: opacity .15s, transform .15s; }
.zrak-24-sat:first-child { opacity: 1; box-shadow: inset 0 0 0 2px var(--paper); }
.zrak-24-sat:hover { opacity: 1; transform: scaleY(1.12); }
.zrak-24-sat.e1 { background: var(--e1); } .zrak-24-sat.e2 { background: var(--e2); }
.zrak-24-sat.e3 { background: var(--e3); } .zrak-24-sat.e4 { background: var(--e4); }
.zrak-24-sat.e5 { background: var(--e5); } .zrak-24-sat.e6 { background: var(--e6); }
.zrak-24-os { position: relative; height: 16px; margin-top: 4px; }
.zrak-24-os span { position: absolute; top: 0; font-size: 11px; color: var(--fog-dim); white-space: nowrap; }

.zrak-hero-red { grid-template-columns: 112px minmax(0, 1fr) auto; }
.zrak-hero-red-tekst { line-height: 1.5; }
.zrak-razmak { display: inline-block; width: 14px; }

.zrak-tockica {
    display: inline-block;
    width: 8px; height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--paper) 18%, transparent);
    transform: translateY(-1px);
}
.zrak-tockica.s0 { background: var(--e1); }
.zrak-tockica.s1 { background: var(--e3); }
.zrak-tockica.s2 { background: var(--e4); }
.zrak-tockica.s3 { background: var(--e5); }

/* ---------- popis lijevo, detalj desno ---------- */
.zrak-md {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px;
    align-items: start;
}
.zrak-md-lista { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zrak-md-desno { min-width: 0; }

.zrak-md-red {
    display: grid;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--paper);
    font: 400 14px var(--font);
    text-align: left;
    cursor: pointer;
    transition: background .15s;
}
.zrak-md-red:hover { background: color-mix(in srgb, var(--paper) 4%, transparent); }
.zrak-md-red.aktivan { background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.zrak-md-red:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.zrak-md-strelica { color: var(--fog-dim); font-size: 18px; line-height: 1; transition: transform .2s, color .2s; }
.zrak-md-red.aktivan .zrak-md-strelica { color: var(--paper); transform: translateX(3px); }

.zrak-md-legenda { margin: 10px 12px 0; font-size: 11.5px; color: var(--fog-dim); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.zrak-md-tvari .zrak-md-legenda i {
    display: inline-block; width: 26px; height: 5px; margin-right: 4px;
    border-radius: 3px; background: color-mix(in srgb, var(--paper) 10%, transparent);
    background-image: linear-gradient(90deg, transparent calc(50% - 1px), var(--fog) calc(50% - 1px), var(--fog) calc(50% + 1px), transparent calc(50% + 1px));
}

/* redovi tvari: ime | brojka | traka | % | › */
.zrak-md-red.zrak-tvar {
    grid-template-columns: 54px 96px minmax(40px, 1fr) 46px 10px;
    border-bottom: 0;
}
.zrak-md-red .zrak-tvar-usp { font-size: 12.5px; }
.zrak-md-red.bez-usporedbe .zrak-tvar-usp { color: var(--fog-dim); }

/* redovi peludi: ime | dani | stanje | › */
.zrak-pelud-zag, .zrak-md-red.zrak-pelud-red {
    grid-template-columns: minmax(0, 1fr) auto 128px 10px;
}
.zrak-pelud-zag { display: grid; gap: 14px; padding: 0 12px 4px; }
.zrak-pelud-ime { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 2px; min-width: 0; }
.zrak-pelud-ime strong { font-weight: 600; font-size: 14.5px; }
.zrak-pelud-ime small { flex-basis: 100%; padding-left: 15px; font-size: 11.5px; color: var(--fog-dim); font-style: italic; }
.zrak-pelud-dani { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 22px; gap: 3px; }
.zrak-pelud-dani i { height: 14px; border-radius: 3px; background: color-mix(in srgb, var(--paper) 7%, transparent); }
.zrak-pelud-dani i.s0 { background: var(--e1); }
.zrak-pelud-dani i.s1 { background: var(--e3); }
.zrak-pelud-dani i.s2 { background: var(--e4); }
.zrak-pelud-dani i.s3 { background: var(--e5); }
.zrak-pelud-zag .zrak-pelud-dani b { font-size: 10.5px; font-weight: 400; color: var(--fog-dim); text-align: center; }
.zrak-pelud-zag .zrak-pelud-dani b.danas { color: var(--paper); font-weight: 600; }
.zrak-pelud-status { font-size: 12.5px; color: var(--fog); text-align: right; }
.zrak-pelud-red.s1 .zrak-pelud-status, .zrak-pelud-red.s2 .zrak-pelud-status,
.zrak-pelud-red.s3 .zrak-pelud-status { color: var(--paper); font-weight: 600; }
.zrak-pelud-red.izvan { opacity: .55; }
.zrak-pelud-red.izvan:hover, .zrak-pelud-red.izvan.aktivan { opacity: 1; }
.zrak-pelud-leg .zrak-tockica { margin-right: 5px; }
.zrak-pelud-leg span { color: var(--fog-dim); }

.zrak-alergeni-uvod { margin: -4px 0 18px; max-width: 90ch; font-size: 14.5px; line-height: 1.6; color: var(--fog); }
.zrak-alergeni-uvod strong { color: var(--paper); font-weight: 600; }

/* ---------- detalj ---------- */
@keyframes zrakDetalj { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.zrak-det {
    padding: 20px 22px 18px;
    border-radius: 16px;
    background: var(--panel);
}
.zrak-det-anim { animation: zrakDetalj .3s cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: reduce) { .zrak-det-anim { animation: none; } }
.zrak-det-glava { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px 28px; margin-bottom: 10px; }
.zrak-det-naslov { display: flex; flex-direction: column; gap: 4px; }
.zrak-det-oko { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fog-dim); }
.zrak-det-broj { font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; color: var(--paper); font-variant-numeric: tabular-nums; }
.zrak-det-broj small { margin-left: 8px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--fog); }
.zrak-det-ime { font-size: 30px; }
.zrak-det-razina { font-size: 13.5px; color: var(--fog); }
.zrak-det-razina.s1, .zrak-det-razina.s2, .zrak-det-razina.s3 { color: var(--paper); font-weight: 500; }
.zrak-det-brojke { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; }
.zrak-det-brojke > div { display: flex; flex-direction: column; gap: 2px; }
.zrak-det-brojke dt { font-size: 11.5px; font-weight: 400; color: var(--fog-dim); }
.zrak-det-brojke dd { margin: 0; font-size: 17px; font-weight: 600; color: var(--paper); font-variant-numeric: tabular-nums; }
.zrak-det-brojke dd small { margin-left: 3px; font-size: 12px; font-weight: 400; color: var(--fog); }
.zrak-det-brojke dd small.preko { color: var(--e4); font-weight: 600; }
.zrak-det .zrak-graf { margin: 6px -6px 0; }
.zrak-det-opis { margin: 12px 0 0; max-width: 72ch; font-size: 13.5px; line-height: 1.65; color: var(--fog); }
.zrak-det-granice { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 12px 0 0; font-size: 12px; color: var(--fog-dim); }
.zrak-det-granice strong { color: var(--paper); font-weight: 600; margin-right: 2px; }
.zrak-det-tiho { margin: 14px 0 4px; font-size: 13px; color: var(--fog); }
.zrak-det-blok { margin-top: 16px; }
.zrak-det-podnaslov { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fog-dim); }
.zrak-det-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.zrak-det-info p { margin: 5px 0 0; font-size: 13px; line-height: 1.55; color: var(--fog); }
.zrak-det .zrak-zasto { margin-top: 14px; }
.zrak-det .zrak-zasto p { margin-left: 24px; }

.zrak-sezona { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin-top: 8px; }
.zrak-sezona-mj i { display: block; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--paper) 7%, transparent); }
.zrak-sezona-mj.z1 i { background: color-mix(in srgb, var(--e3) 45%, transparent); }
.zrak-sezona-mj.z2 i { background: var(--e3); }
.zrak-sezona-mj b { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 400; color: var(--fog-dim); text-align: center; }
.zrak-sezona-mj.sada i { box-shadow: 0 0 0 1.5px var(--paper); }
.zrak-sezona-mj.sada b { color: var(--paper); font-weight: 600; }

/* ---------- sklopljeni odjeljak ---------- */
.zrak-sklop { border-top: 1px solid var(--line-soft); padding: 18px 0; }
.zrak-sklop > summary {
    list-style: none;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px;
    cursor: pointer;
}
.zrak-sklop > summary::-webkit-details-marker { display: none; }
.zrak-sklop-naslov { font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--fog-dim); }
.zrak-sklop-naslov::before {
    content: '›';
    display: inline-block;
    width: 14px;
    font-size: 15px;
    transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.zrak-sklop[open] .zrak-sklop-naslov::before { transform: rotate(90deg); }
.zrak-sklop > summary:hover .zrak-sklop-naslov { color: var(--paper); }
.zrak-sklop-sazetak { font-size: 13px; color: var(--fog); }
.zrak-sklop-sazetak strong { color: var(--paper); font-weight: 600; }
.zrak-sklop .zrak-kartica { border-top: 0; padding-top: 12px; padding-bottom: 0; }
.zrak-sklop .zrak-kartica > h3 { display: none; }
ul.zrak-sklop-tijelo { margin-top: 12px; }

/* ---------- dva stupca ---------- */
.zrak-dvostupac { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; align-items: start; }
.zrak-dvostupac > .zrak-kartica { min-width: 0; }

@media (max-width: 1100px) {
    .zrak-det-info { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 899.98px) {
    .zrak-md { grid-template-columns: 1fr; gap: 0; }
    .zrak-md-desno { display: none; }
    .zrak-md-lista > .zrak-det { margin: 4px 0 14px; }
    .zrak-dvostupac { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .zrak-md-red { padding: 10px 8px; gap: 10px; }
    .zrak-md-red.zrak-tvar { grid-template-columns: 50px minmax(0, 1fr) 44px 10px; row-gap: 6px; }
    .zrak-md-red.zrak-tvar .zrak-tvar-traka { grid-column: 1 / 4; grid-row: 2; }
    .zrak-pelud-zag, .zrak-md-red.zrak-pelud-red { grid-template-columns: minmax(0, 1fr) auto 10px; }
    .zrak-pelud-zag > span:nth-child(3) { display: none; }
    .zrak-pelud-status { grid-column: 1; grid-row: 2; text-align: left; padding-left: 15px; font-size: 12px; }
    .zrak-pelud-dani { grid-auto-columns: 18px; }
    .zrak-det { padding: 16px 14px 14px; }
    .zrak-det-broj { font-size: 32px; }
    .zrak-det-ime { font-size: 26px; }
    .zrak-24-sat { height: 22px; }
    .zrak-hero-red { grid-template-columns: 92px minmax(0, 1fr) auto; }
}
@media (max-width: 600px) {
    .zrak-pelud-ime small { display: none; }
    .zrak-pelud-dani { grid-auto-columns: 20px; }
    .zrak-pelud-zag .zrak-pelud-dani b { font-size: 9.5px; }
}

/* Siroki zasloni (1900 px+): sadrzaj ne smije se razvuci od ruba do ruba -
   mjerac lijevo i redovi desno s 800 px praznine izmedju izgledali su prazno. */
.zrak-wrap { width: 100%; max-width: 1480px; margin-inline: auto; }

/* ==========================================================================
   VRH (rujan 2026., treci krug): karta | mjerac | iducih 24 sata
   Karta kao u solarnom tabu - klik bira tocku samo za ovaj tab.
   ========================================================================== */

.zrak-vrh {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(240px, 3.2fr) minmax(0, 5.6fr);
    gap: 32px;
    align-items: center;
    padding: 6px 0 28px;
}
.zrak-vrh .zrak-hero-mjerac { margin: 0 auto; max-width: 340px; }
.zrak-vrh .zrak-hero-desno { align-self: center; }

.zrak-mapa-okvir {
    position: relative;
    align-self: stretch;
    min-height: 330px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--line-soft);
    background: var(--panel);
}
.zrak-mapa { position: absolute; inset: 0; }
.zrak-mapa-okvir.bez-karte::after {
    content: 'Karta nije učitana (Leaflet)';
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 12.5px; color: var(--fog-dim);
}
.zrak-mapa-hint {
    position: absolute;
    left: 12px; bottom: 10px;
    z-index: 500;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    color: var(--fog);
    background: color-mix(in srgb, var(--ink) 78%, transparent);
    backdrop-filter: blur(6px);
    pointer-events: none;
}
/* podloga mirnija nego na glavnoj karti - ovdje je samo za snalazenje (kao solar) */
html[data-theme="light"] #tab-zrak .zrak-mapa-okvir .rd-basemap-tiles { filter: saturate(0.18) brightness(1.05) contrast(0.92); }
html[data-theme="dark"] #tab-zrak .zrak-mapa-okvir .rd-basemap-tiles {
    filter: invert(1) hue-rotate(180deg) brightness(0.82) contrast(0.84) saturate(0.15);
}

/* marker u boji EEA razreda za sada */
.zrak-marker span {
    position: relative;
    display: block;
    width: 14px; height: 14px;
    margin: 4px;
    border-radius: 50%;
    background: var(--zm, var(--e0));
    box-shadow: 0 0 0 3px var(--ink);
}
.zrak-marker span::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--zm, var(--e0));
    animation: zrak-val 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.zrak-marker.e1 { --zm: var(--e1); } .zrak-marker.e2 { --zm: var(--e2); } .zrak-marker.e3 { --zm: var(--e3); }
.zrak-marker.e4 { --zm: var(--e4); } .zrak-marker.e5 { --zm: var(--e5); } .zrak-marker.e6 { --zm: var(--e6); }
@keyframes zrak-val { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }

.zrak-lok-natrag {
    margin-left: 10px;
    padding: 3px 10px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper) 6%, transparent);
    color: var(--fog);
    font: 500 12px var(--font);
    cursor: pointer;
}
.zrak-lok-natrag:hover { color: var(--paper); background: color-mix(in srgb, var(--paper) 10%, transparent); }

/* cekanje: obris umjesto praznine */
.zrak-vrh-cekaj { grid-column: span 2; display: grid; grid-template-columns: minmax(200px, 3.2fr) minmax(0, 5.6fr); gap: 32px; align-items: center; }
.zrak-vrh-cekaj > div:last-child { display: flex; flex-direction: column; gap: 14px; }
.zrak-skel {
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--paper) 4%, transparent) 25%,
        color-mix(in srgb, var(--paper) 9%, transparent) 50%,
        color-mix(in srgb, var(--paper) 4%, transparent) 75%);
    background-size: 200% 100%;
    animation: zrak-sjena 1.5s linear infinite;
}
.zrak-skel-krug { height: 190px; border-radius: 190px 190px 16px 16px; }
@keyframes zrak-sjena { from { background-position: 200% 0; } to { background-position: 0 0; } }

@media (max-width: 1250px) {
    .zrak-vrh { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 32px; }
    .zrak-vrh > .zrak-mapa-okvir { grid-row: span 2; }
    .zrak-vrh-cekaj { grid-column: auto; grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .zrak-vrh { grid-template-columns: 1fr; }
    .zrak-vrh > .zrak-mapa-okvir { grid-row: auto; min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
    .zrak-marker span::after, .zrak-skel { animation: none; }
}