/* SVIJETLO (2026-11-07, Goran: "napravi da vise preovladava bijela boja, nego one crne nijanse, ne svidja mi se vise to, slobodno uradi i prepravi").
   Isti sadrzaj, isti redoslijed i isto ponasanje kao KRATKO: dizajn() u jezgro.php za 'svijetlo' vraca 'kratko', a <body> dobije i klasu "svijetlo".
   Ovdje su SAMO boje: crna bina, crne trake, crni blokovi i kartice postaju bijeli ili papir (#f3f2ee), slova tamna (#0d0d0d),
   jedan naglasak (#c73f26; #a8321c je njegova tamnija nijansa za sitna slova na papiru), Inter Tight / Inter, nikad kurziv.
   Plejeri, snimci i slicice ostaju kakvi jesu (crni okvir i dugmad preko snimka su dio plejera).
   Ucitava se POSLIJE kratko.css (i na ostalim javnim stranicama, zbog zaglavlja i podnozja). Povratak: dizajn.txt = kratko.
   Kontrast (tekst najmanje 4,5:1, krupni naslovi 3:1) provjeren skriptom svijetlo\kontrast_sv.py, i za otvorene redove, prozore, chat i hover. */

body.svijetlo { --ak2: var(--accent); }

/* ----------------------------------------------------------------------------------------------- zaglavlje -- */
body.svijetlo .top { background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--ink); color: var(--ink); }
body.svijetlo .brand { color: var(--ink); }
body.svijetlo .brand span { color: var(--accent); }
body.svijetlo .kurs-sw { border-color: var(--ink); }
body.svijetlo .kurs-sw a { color: var(--ink); }
body.svijetlo .kurs-sw a.da { background: var(--ink); color: #fff; }
body.svijetlo .kurs-sw a:not(.da):hover { background: var(--soft); color: var(--ink); }
body.svijetlo .top nav a { color: var(--ink); }
body.svijetlo .top nav a:hover { background: var(--ink); color: #fff; }
body.svijetlo .top nav a.korpa-znak:hover { background: var(--accent-d); }
body.svijetlo .top-dr { border-color: var(--ink); }
body.svijetlo .top-dr a { color: var(--ink); }
body.svijetlo .top-dr a:hover { background: var(--ink); color: #fff; }
body.svijetlo .top-tel { border-bottom-color: var(--line); background: #fff; }
body.svijetlo .top-tel a { color: var(--ink); }
body.svijetlo .top-tel a + a { border-left-color: var(--line); }

/* ---------------------------------------------------------------- prva lekcija na vrhu: papir, crni okvir snimka -- */
body.svijetlo .bina .k-sc { background: var(--soft); color: var(--ink); border-bottom: 1px solid var(--line); }
body.svijetlo .k-sc-str2 .k-sc-sad { color: var(--ink); }
body.svijetlo .k-sc-str2 .k-sc-sad small { color: var(--accent-d); }
body.svijetlo .k-sc-str2 .k-lek-uv { color: var(--muted); }
body.svijetlo .k-sc-str2 .k-sc-cta { background: var(--accent); color: #fff; box-shadow: 0 14px 30px -18px rgba(199, 63, 38, .9); }
body.svijetlo .k-sc-str2 .k-sc-cta:hover, body.svijetlo .k-sc-str2 .k-sc-cta:focus-visible { background: var(--accent-d); color: #fff; }

/* ------------------------------------------------------------------ "Put do zarade": bijelo, kadar kao blijeda slika -- */
body.svijetlo .bina .st.b0 { --ak2: var(--accent); background: #fff; color: var(--ink); border-top: 0; }
body.svijetlo .bina .st.b0 > video { opacity: 1; filter: grayscale(1) contrast(.9); }
/* bijeli veo preko kadra: tekst stoji na skoro bijeloj podlozi i kad je kadar najtamniji (najgore: crni piksel ispod vela) */
body.svijetlo .bina .st.b0::after { background: rgba(255, 255, 255, .94); }
@media (max-width: 760px) { body.svijetlo .bina .st.b0::after { background: rgba(255, 255, 255, .95); } }
body.svijetlo .bina .b0 .eye { color: var(--ink); }
body.svijetlo .bina .b0 h1, body.svijetlo .bina .b0 .h-a, body.svijetlo .bina .b0 .h-b { color: var(--ink); }
body.svijetlo .bina .st.b0 p.l { color: #3d3d3d; }
body.svijetlo .bina .b0 .brojac { color: var(--ink); }
body.svijetlo .bina .b0 .brojac b { color: var(--accent); }
body.svijetlo .bina .b0 .upiti-h { color: var(--muted); }
body.svijetlo .bina .b0 .up { border-top-color: var(--ink); color: var(--ink); }
body.svijetlo .bina .b0 #upKontakt { border-bottom-color: var(--ink); }
body.svijetlo .bina .b0 .up::after { color: var(--ink); }
body.svijetlo .bina .b0 .up:hover, body.svijetlo .bina .b0 .up:focus-visible { background: var(--soft); }
body.svijetlo .bina .b0 .up:hover::after { color: var(--accent); }
body.svijetlo .bina .b0 .up-t small { color: var(--muted); }
body.svijetlo .bina .b0 .up-sl { box-shadow: 0 0 0 1px var(--line); }
body.svijetlo .bina .b0 .btn-kursevi:hover { background: var(--accent-d); color: #fff; }
body.svijetlo .bina .u-lica-sl a { box-shadow: 0 0 0 3px #fff; }
body.svijetlo .bina .u-lica-t { color: var(--muted); }
body.svijetlo .bina .u-lica-t b { color: var(--ink); }
body.svijetlo .bina .p-cta-dug:hover, body.svijetlo .bina .p-cta-dug:focus-visible { background: var(--accent-d); color: #fff; }
body.svijetlo .bina .p-cta-t { color: var(--muted); }
body.svijetlo .bina .p-bespl-link { color: var(--ink); text-decoration-color: var(--accent); }
body.svijetlo .bina .p-bespl-link span { color: var(--accent-d); }
body.svijetlo .bina .p-bespl-link:hover { color: var(--accent-d); }

/* --------------------------------------------------------------------------------- traka povjerenja: papir -- */
body.svijetlo .bina .p-povj { background: var(--soft); color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.svijetlo .bina .p-povj-l li { border-top-color: var(--line); }
body.svijetlo .bina .p-povj-l svg { stroke: var(--accent); }
body.svijetlo .bina .p-povj-l span { color: var(--muted); }
body.svijetlo .bina .p-povj-l b { color: var(--ink); }
body.svijetlo .bina .p-oglasi-dug { background: var(--accent); }
body.svijetlo .bina .p-oglasi-dug:hover { background: var(--accent-d); }

/* -------------------------------------------------------------- "Provjeri da li je urađen ..." (pretraga pjesama) -- */
body.svijetlo .bina .u-pjesma { background: var(--soft); color: var(--ink); border-top: 1px solid var(--line); }
body.svijetlo .bina .u-oko { color: var(--accent-d); }
body.svijetlo .bina .u-pjesma h2, body.svijetlo .bina .u-pjesma h2 .u-pj-r1 { color: var(--ink); }
body.svijetlo .bina .u-pjesma h2 .u-pj-r2, body.svijetlo .bina .u-pjesma h2 span { color: var(--accent); }
body.svijetlo .bina .u-pj-q { background: #fff; color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink), 0 22px 46px -30px rgba(0, 0, 0, .35); }
body.svijetlo .bina .u-pj-q::placeholder { color: #6b6b6b; }
body.svijetlo .bina .u-pj-q:focus { box-shadow: 0 0 0 3px var(--accent), 0 22px 46px -30px rgba(0, 0, 0, .35); }
body.svijetlo .bina .u-pj-ima { color: var(--ink); }
body.svijetlo .bina .u-pj-r { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
body.svijetlo .bina .u-pj-n small { color: var(--muted); }
body.svijetlo .bina .u-pj-dug { background: var(--accent); color: #fff; }
body.svijetlo .bina .u-pj-dug:hover, body.svijetlo .bina .u-pj-dug:focus-visible { background: var(--accent-d); color: #fff; }
body.svijetlo .bina .u-pj-nema { background: #fff; color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
body.svijetlo .bina .u-pj-nema p { color: var(--muted); }
body.svijetlo .bina .u-pj-nema b { color: var(--ink); }
body.svijetlo .bina .u-pj-pitaj { background: var(--accent); color: #fff; }
body.svijetlo .bina .u-pj-pitaj:hover { background: var(--accent-d); color: #fff; box-shadow: none; }
body.svijetlo .bina .u-pj-cj { color: var(--ink); }
body.svijetlo .bina .u-pj-cj b { color: var(--ink); }
body.svijetlo .bina .u-pj-sve { color: var(--ink); }
body.svijetlo .bina .u-pj-sve:hover { color: var(--accent-d); }
body.svijetlo .bina .u-pj-lista { background: var(--accent); color: #fff; box-shadow: 0 16px 34px -20px rgba(199, 63, 38, .9); }
body.svijetlo .bina .u-pj-lista:hover, body.svijetlo .bina .u-pj-lista:focus-visible { background: var(--accent-d); color: #fff; }
body.svijetlo .u-pjesma .cij-ok { background: var(--accent); box-shadow: 0 0 0 6px rgba(199, 63, 38, .14), 0 14px 28px -14px rgba(199, 63, 38, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
body.svijetlo .u-pjesma .cij-po { color: var(--ink); }
body.svijetlo .u-pjesma .cij-st { color: var(--muted); }
body.svijetlo .u-pjesma .cij-st svg { stroke: var(--accent); }
/* traka s nazivima pjesama: bijela, tanke crne linije */
body.svijetlo .bina .u-traka { background: #fff; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
body.svijetlo .bina .u-traka span { color: var(--ink); }

/* ----------------------------------------------------------------- "Ovako izgledaju lekcije": bijelo, isti plejer -- */
body.svijetlo .bina .k-prave { background: #fff; color: var(--ink); }
body.svijetlo .bina .k-prave h2 { color: var(--ink); }
body.svijetlo .bina .k-prave .eye { color: var(--ink); }
body.svijetlo .k-prave .k-prave-pod { color: var(--muted); }
body.svijetlo .k-pl-l li { border-bottom-color: var(--line); }
body.svijetlo .k-pl-l button { color: var(--ink); }
body.svijetlo .k-pl-l small { color: var(--muted); }
body.svijetlo .k-pl-l button.da b, body.svijetlo .k-pl-l button:hover b { color: var(--accent); }

/* besplatne lekcije: tanka linija iznad (bijelo ide na bijelo) */
body.svijetlo .bina .p-bespl { border-top: 1px solid var(--ink); }

/* "Poslušajte · 14 s" preko snimka: trajanje punom bojom (s prozirnoscu .85 bijelo na crvenom bilo je 4,1:1) */
body.svijetlo .an-dug small { opacity: 1; }

/* igrica "dur ili mol?" (klavir.js nosi svoju tamnu karticu): papir, tamna slova; dirke ostaju dirke */
body.svijetlo .k-igra .gk-card { background: var(--soft); color: var(--ink); border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--ink); font-family: var(--body); }
body.svijetlo .k-igra .gk-eye { color: var(--accent-d); }
body.svijetlo .k-igra :is(.gk-h, .gk-big) { color: var(--ink); font-family: var(--head); }
body.svijetlo .k-igra .gk-big.zad { color: #6b6b6b; }
body.svijetlo .k-igra :is(.gk-t, .gk-small, .gk-fb, .gk-tempo, .gk-leg, .gk-lbl) { color: var(--muted); }
body.svijetlo .k-igra :is(.gk-t b, .gk-fb b, .gk-tempo output) { color: var(--ink); }
body.svijetlo .k-igra .gk-btn { border-color: var(--ink); color: var(--ink); font-family: var(--head); }
body.svijetlo .k-igra .gk-btn:hover { background: var(--ink); color: #fff; }
body.svijetlo .k-igra .gk-btn.gk-main { background: var(--accent); border-color: var(--accent); color: #fff; }
body.svijetlo .k-igra .gk-btn.gk-main:hover { background: var(--accent-d); border-color: var(--accent-d); }
body.svijetlo .k-igra .gk-btn:disabled:not(.ok):not(.ne) { opacity: .62; background: transparent; color: var(--ink); }
body.svijetlo .k-igra .gk-chip { border-color: #cfcdc7; color: var(--muted); }
body.svijetlo .k-igra .gk-chip:hover { border-color: var(--ink); color: var(--ink); }
body.svijetlo .k-igra .gk-chip[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
body.svijetlo .k-igra .gk-tacke i:not(.ok):not(.ne) { background: #cfcdc7; }

/* "Besplatno · bez obaveze" u otvorenom obrascu za snimak (snimak.js): tamnija zelena, 5,6:1 */
body.svijetlo .sn-free { background: var(--green); }

/* hover na redovima: svjetlija podloga od papira, da crvena slova u redu ostanu iznad 4,5:1 (na #f3f2ee su 4,49) */
body.svijetlo #lekcije .lk-r > summary:hover, body.svijetlo .bina .p-bespl-r:hover, body.svijetlo .bina .p-bespl-r:focus-visible,
body.svijetlo .tr-r:hover, body.svijetlo .tr-r:focus-visible { background: #f8f7f4; }
body.svijetlo .bina .b0 .up:hover::after { color: var(--accent-d); }

/* chat (chat.js nosi svoj stil): samo boje sitnih slova koje su bile ispod 4,5:1 */
body.svijetlo #gcRoot :is(input, textarea)::placeholder { color: #6e6658; }
body.svijetlo #gcRoot :is(.gc-tm-pad.prazno span, .gc-vr, .gc-m.gc-obr) { color: #6e6658; }
body.svijetlo #gcRoot :is(.gc-zak-chip small, .gc-tm-sat.on small) { color: #fff; }
body.svijetlo #gcRoot .gc-tm-dan:not(.on) small, body.svijetlo #gcRoot .gc-tm-telok { color: #17773a; }
body.svijetlo #gcRoot .gc-tm-telok span { color: #8a5a00; }
body.svijetlo #gcRoot .gc-tm-app .wa:not(.on) { color: #17773a; }
body.svijetlo #gcRoot .gc-tm-app .vb:not(.on) { color: #5b45d6; }

/* ---------------------------------------------------------- crni blok cjenovnika (stariji izgledi; u KRATKO ga nema) -- */
body.svijetlo .cj-traka:not(.cj-traka-ok) { background: var(--soft); color: var(--ink); border: 1.5px solid var(--ink); }
body.svijetlo .cj-traka:not(.cj-traka-ok) p { color: var(--muted); }
body.svijetlo .cj-traka:not(.cj-traka-ok) > p:first-child b { color: var(--ink); }
body.svijetlo .u-cj-l li { color: var(--ink); }
body.svijetlo .cj-traka:not(.cj-traka-ok) .cj-traka-dug:hover { background: var(--accent-d); color: #fff; }
body.svijetlo .cj-traka:not(.cj-traka-ok) .cj-ili { color: var(--muted); }
body.svijetlo .cj-traka:not(.cj-traka-ok) .cj-ili b { color: var(--ink); }

/* ---------------------------------------------------------------- "Pošaljite mi snimak": bijela kartica na papiru -- */
body.svijetlo details.k-sn > summary { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
body.svijetlo details.k-sn > summary:hover { background: #fbfaf7; }
body.svijetlo .k-sn-t small { color: var(--accent); }
body.svijetlo .k-sn-t b { color: var(--ink); }
body.svijetlo .k-sn-t > span { color: var(--muted); }
body.svijetlo details.k-sn > .sn-grid { border-color: var(--ink); border-width: 1.5px; }

/* -------------------------------------------------------------------------- ljepljiva traka dolje: bijela -- */
body.svijetlo .ljep { background: rgba(255, 255, 255, .97); color: var(--ink); border-top: 1px solid var(--ink); box-shadow: 0 -14px 34px -22px rgba(0, 0, 0, .4); }
body.svijetlo .ljep-t b { color: var(--ink); }
body.svijetlo .ljep-t .cj { color: var(--green); }
body.svijetlo .ljep-t .cj small, body.svijetlo .ljep-t .cj-umjesto, body.svijetlo .ljep-t .ljep-zak, body.svijetlo .ljep-t small { color: var(--muted); }
body.svijetlo .ljep .btn { background: var(--accent); color: #fff; }
body.svijetlo .ljep .btn:hover { background: var(--accent-d); color: #fff; }

/* ---------------------------------------------------------------------------------------------- podnozje -- */
/* tipke klavira ostaju gornji rub; ispod papir, potpis tamnim slovima */
body.svijetlo .dno { background: var(--soft) var(--tipke) repeat-x 0 0 / 140px 34px; color: var(--muted); border-top: 0; }
body.svijetlo .dno .w::before { color: var(--ink); }
body.svijetlo .dno a, body.svijetlo .dno-l a { color: var(--ink); }
body.svijetlo .dno a:hover, body.svijetlo .dno-l a:hover { color: var(--accent-d); }
body.svijetlo .dno-cl b, body.svijetlo .dno b { color: var(--ink); }