/* JELOVNIK (2026-11-09): novi dizajn cijelog sajta. Naslovna je slideshow (jedan ekran = jedno pitanje ili jedna stvar),
   ostale javne stranice dobiju iste fontove, boje, zaglavlje i podnozje. Ucitava se poslije stil.css (i oglasa), bez starih slojeva.
   Font: Geist, moderan sans za naslove i tekst (Goran 2026-11-09: serif mu je "kao da je 1700-a"). Bez kurziva (Goran 2026-11-03).
   Boje: papir, tinta, tanke linije i JEDNA boja za naglasak (tamnija crvena iz njegovog znaka). */

body.jelovnik {
  --j-pap: #faf8f3; --j-list: #fff; --j-tin: #1c1a17; --j-tin2: #39352e; --j-siv: #6b655b; --j-crt: #e6e0d4; --j-crt2: #cbc3b3; --j-sjena: #f2eee5;
  --j-akc: #a8341f; --j-akc2: #8c2a17; --j-akc-sv: #f5e8e3; --j-ok: #2d7a46;
  --j-ser: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --j-san: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --j-top: 64px; --j-r: 14px;
  /* stari stil.css cita ove varijable: sve ostale stranice odmah dobiju nove boje i fontove */
  --paper: var(--j-pap); --card: #fff; --ink: var(--j-tin); --muted: var(--j-siv); --line: var(--j-crt); --soft: var(--j-sjena);
  --accent: var(--j-akc); --accent-d: var(--j-akc2); --accent-soft: var(--j-akc-sv); --green: var(--j-ok);
  --head: var(--j-ser); --body: var(--j-san); --r: 12px; --night: var(--j-tin);
  background: var(--j-pap); color: var(--j-tin); font: 16px/1.55 var(--j-san); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.jelovnik h1, body.jelovnik h2, body.jelovnik h3 { font-family: var(--j-ser); letter-spacing: -0.028em; font-weight: 650; }
body.jelovnik ::selection { background: var(--j-akc-sv); color: var(--j-tin); }
body.jelovnik :focus-visible { outline: 2px solid var(--j-akc); outline-offset: 2px; border-radius: 6px; }
body.jelovnik em, body.jelovnik i, body.jelovnik cite { font-style: normal; }

/* ---------------------------------------------------------------- zaglavlje (sve stranice) -- */
.jv-preskoci { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--j-tin); color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600; }
.jv-preskoci:focus { top: 10px; }
.jv-pregled { position: fixed; left: 10px; bottom: 10px; z-index: 50; margin: 0; padding: 5px 10px; border: 1px solid var(--j-crt2); border-radius: 999px; background: rgba(255,255,255,.92);
  font: 600 11.5px/1.2 var(--j-san); letter-spacing: .04em; color: var(--j-siv); text-decoration: none; }
.jv-pregled:hover { color: var(--j-tin); border-color: var(--j-tin); }
@media (max-width: 899px) { .jv-pregled { display: none; } }   /* u okvirima (telefon, tablet) se ne vidi */
.jv-top { position: sticky; top: 0; z-index: 40; background: rgba(250, 248, 243, .94); -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--j-crt); }
.jv-top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1240px; height: var(--j-top); margin: 0 auto; padding: 0 24px; }
.jv-brand { display: flex; flex-direction: column; justify-content: center; min-width: 0; color: var(--j-tin); text-decoration: none; line-height: 1.1; }
.jv-brand b { font: 700 19px/1.1 var(--j-ser); letter-spacing: -0.025em; white-space: nowrap; }
.jv-brand span { margin-top: 3px; font: 500 11.5px/1.2 var(--j-san); letter-spacing: .12em; text-transform: uppercase; color: var(--j-siv); white-space: nowrap; }
.jv-nav { display: flex; align-items: center; gap: 6px; }
.jv-nav a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; color: var(--j-tin); text-decoration: none; font: 600 14.5px/1 var(--j-san); white-space: nowrap; transition: background .15s, color .15s; }
.jv-nav a:hover { background: var(--j-sjena); }
.jv-nav .jv-nav-meni { border: 1.5px solid var(--j-tin); padding: 0 16px 0 12px; }
.jv-nav .jv-nav-meni:hover { background: var(--j-tin); color: #fff; }
.jv-nav .jv-nav-meni svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.jv-nav .jv-nav-korpa { background: var(--j-tin); color: #fff; }
.jv-nav .jv-nav-korpa b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #fff; color: var(--j-tin); font-size: 12px; }
.jv-nav [hidden] { display: none !important; }
@media (max-width: 560px) {
  body.jelovnik { --j-top: 58px; }
  .jv-top-in { padding: 0 14px; gap: 10px; }
  .jv-brand b { font-size: 18px; }
  .jv-brand span { font-size: 10.5px; letter-spacing: .1em; }
  .jv-nav a { height: 38px; padding: 0 11px; font-size: 14px; }
  .jv-nav .jv-nav-meni { padding: 0 13px 0 10px; }
}
@media (max-width: 400px) { .jv-brand span { display: none; } .jv-nav .jv-nav-moji { display: none; } }
.jv-nav .jv-nav-std { color: var(--j-siv); font-weight: 500; }
@media (max-width: 899px) { .jv-nav .jv-nav-std { display: none; } }   /* telefon: link je na Meniju, ispod pretrage */

/* ---------------------------------------------------------------- podnozje (sve stranice) -- */
.jv-dno { border-top: 1px solid var(--j-crt); background: var(--j-pap); }
.jv-dno-in { max-width: 1240px; margin: 0 auto; padding: 34px 24px 90px; display: grid; gap: 8px; color: var(--j-siv); font-size: 14px; }
.jv-dno-b { margin: 0; color: var(--j-tin); font: 400 17px/1.3 var(--j-ser); }
.jv-dno-b b { font-weight: 600; }
.jv-dno-k { margin: 0; }
.jv-dno a { color: inherit; text-underline-offset: 3px; }
.jv-dno-l { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
.jv-dno-l a { color: var(--j-siv); }

/* ================================================================ OSTALE STRANICE ==== */
/* lista tutorijala, setovi, besplatne lekcije, kupovina, placanje, cjenovnik, lekcije, uslovi, moji kursevi, oglasi:
   stil.css + clanak.css ostaju (raspored i ponasanje), ovdje samo novi jezik: ravna tinta umjesto crvenog sjaja, okrugla dugmad, serif naslovi */
body.jelovnik { --noc: #1c1a17; --noc2: #2a2723; --noc3: #3a362f; --noct: #f5f1e8; --nocl: rgba(245, 241, 232, .16); --nocm: #b9b1a3; }
body.jelovnik .cl-hero, body.jelovnik .cl-kurs { background: var(--noc) !important; }
body.jelovnik .cl-hero { border-bottom: 0 !important; }
body.jelovnik .btn { border-radius: 999px; font-family: var(--j-san); font-weight: 600; letter-spacing: 0; }
body.jelovnik .btn-g { background: var(--j-tin); color: #fff; box-shadow: none; }
body.jelovnik .btn-g:hover { background: var(--j-akc); }
body.jelovnik :is(.cl-hero, .cl-kurs, .kk-par, .pr, .dv) .btn-g { background: var(--j-pap); color: var(--j-tin); }
body.jelovnik :is(.cl-hero, .cl-kurs, .kk-par, .pr, .dv) .btn-g:hover { background: #fff; }
body.jelovnik .btn-o { border-color: var(--j-tin); }
body.jelovnik main input:not([type=checkbox]):not([type=radio]):not([type=range]), body.jelovnik main select { border-radius: 12px; font-family: var(--j-san); }
body.jelovnik main input:focus, body.jelovnik main select:focus, body.jelovnik main textarea:focus { outline: none; border-color: var(--j-akc) !important; box-shadow: 0 0 0 4px var(--j-akc-sv) !important; }
body.jelovnik .eye { color: var(--j-akc); letter-spacing: .16em; font-family: var(--j-san); font-weight: 600; }
body.jelovnik .cl-hero .eye, body.jelovnik .cl-kurs .eye { color: #f0b7a6; }
body.jelovnik .w { max-width: 1040px; }
body.jelovnik .izb-p, body.jelovnik .izb-dug, body.jelovnik .cj-ne { font-family: var(--j-san); }
body.jelovnik .izb-p { border-radius: 18px; background: var(--j-pap); }
body.jelovnik .izb-h { font-family: var(--j-ser); font-weight: 600; letter-spacing: -.025em; }
body.jelovnik .izb-dug { border-radius: 999px; }
body.jelovnik .izb-dug-kupi { background: var(--j-tin); color: #fff; }
body.jelovnik .izb-dug-kupi:hover { background: var(--j-akc); }
body.jelovnik h1, body.jelovnik h2 { text-wrap: balance; }
@media (min-width: 2200px) and (min-height: 950px) { body.jelovnik:not(.jv-naslovna) main { zoom: 1.2; } }
@media (min-width: 2800px) and (min-height: 1100px) { body.jelovnik:not(.jv-naslovna) main { zoom: 1.32; } }

/* prozorcic za obavjestenja (obav-popup.js, na pravom sajtu): isti jezik kao novi sajt */
html #obavPop { background: rgba(20, 18, 15, .55); }
html #obavPop .op-card { background: #faf8f3; border-radius: 18px; box-shadow: 0 30px 70px -18px rgba(0, 0, 0, .5), 0 0 0 1px #e6e0d4; }
html #obavPop .op-keys { display: none; }
html #obavPop :is(.op-t, .op-mail, .op-ok, .op-btn, .op-note, .op-opt, .op-tag, .op-cij small, .op-min, .op-ne, .op-eye, .op-x, .op-opt i, .op-srv p) { font-family: "Geist", system-ui, sans-serif; }
html #obavPop :is(.op-h, .op-opt b, .op-cij b) { font-family: "Geist", system-ui, sans-serif; color: #1c1a17; font-weight: 600; letter-spacing: -.025em; }
html #obavPop .op-eye { color: #a8341f; letter-spacing: .16em; }
html #obavPop :is(.op-t, .op-ok, .op-srv p, .op-opt span.op-d, .op-ne) { color: #39352e; }
html #obavPop :is(.op-mail, .op-btn, .op-ne, .op-line) { border-radius: 999px; }
html #obavPop .op-mail { border: 1.5px solid #1c1a17; background: #fff; }
html #obavPop .op-btn { background: #1c1a17; border-color: #1c1a17; color: #fff; }
html #obavPop .op-btn:hover { background: #a8341f; border-color: #a8341f; }
html #obavPop .op-line { border-color: #1c1a17; color: #1c1a17; background: transparent; }
html #obavPop .op-line:hover { background: #1c1a17; color: #fff; }
html #obavPop .op-opt { border: 1px solid #e6e0d4; border-radius: 14px; background: #fff; }
html #obavPop .op-opt:hover, html #obavPop .op-opt.op-bira { border-color: #1c1a17; box-shadow: none; }

/* ================================================================ NASLOVNA: slideshow ==== */
body.jv-naslovna { overflow-x: hidden; }
.jv { position: relative; min-height: calc(100svh - var(--j-top)); overflow-x: clip; }   /* klizanje slajda (34 px) ne pravi vodoravnu traku */
.jv-js .jv ~ .jv-dno { display: none; }                         /* na naslovnoj je podnozje u Meniju (sitni linkovi); bez JS-a ostaje */

/* traka napretka odmah ispod zaglavlja: koliko je duboko posjetilac na svom putu */
.jv-traka { position: fixed; top: var(--j-top); left: 0; right: 0; z-index: 35; height: 2px; pointer-events: none; }
.jv-traka i { display: block; height: 100%; width: 0; background: var(--j-akc); transition: width .45s cubic-bezier(.2,.7,.2,1); }

/* trag: Nazad + Meni / Kurs / Kurs v3 */
.jv-tok { display: none; }
.jv-js .jv-tok { display: flex; align-items: center; gap: 14px; max-width: 748px; margin: 0 auto; padding: 16px 24px 0; min-height: 52px; }
.jv-js .jv.jv-siroko .jv-tok, .jv-js .jv.jv-siroko .jv-niz.ima { max-width: 1228px; }
.jv-tok-n { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 14px 0 8px; border: 1px solid var(--j-crt2); border-radius: 999px; background: #fff; color: var(--j-tin);
  font: 600 14px/1 var(--j-san); cursor: pointer; transition: border-color .15s, background .15s; flex: none; }
.jv-tok-n:hover { border-color: var(--j-tin); }
.jv-tok-n svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.jv-tok ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0; padding: 0; list-style: none; min-width: 0; font: 500 13.5px/1.35 var(--j-san); color: var(--j-siv); }
.jv-tok li { display: inline-flex; align-items: center; min-width: 0; }
.jv-tok li + li::before { content: "/"; margin: 0 8px; color: var(--j-crt2); }
.jv-tok li a { color: var(--j-siv); text-decoration: none; white-space: nowrap; }
.jv-tok li a:hover { color: var(--j-tin); text-decoration: underline; text-underline-offset: 3px; }
.jv-tok li:last-child { color: var(--j-tin); font-weight: 600; }
.jv.jv-na-meniju .jv-tok { visibility: hidden; }

/* serija (sekcije, zanrovi, pitanja, primjeri): crtice + "7 / 18" */
.jv-niz { display: none; }
.jv-js .jv-niz.ima { display: flex; align-items: center; justify-content: flex-start; gap: 12px; max-width: 748px; margin: 0 auto; padding: 10px 24px 0; }
.jv-niz-c { display: flex; gap: 4px; flex: 0 1 auto; min-width: 0; }
.jv-niz-c a { display: block; width: 22px; height: 4px; border-radius: 2px; background: var(--j-crt); transition: background .2s; }
.jv-niz-c a:hover { background: var(--j-crt2); }
.jv-niz-c a.da { background: var(--j-akc); }
.jv-niz-b { font: 600 12.5px/1 var(--j-san); color: var(--j-siv); letter-spacing: .04em; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* slajd */
.jv-s { padding: 48px 24px 64px; border-top: 1px solid var(--j-crt); }   /* bez JS-a: slajdovi jedan ispod drugog */
.jv-js .jv-s { display: none; border-top: 0; }
.jv-js .jv-s.jv-akt { display: flex; }
html.jv-js:not(.jv-motor) .jv-s:target { display: flex; }   /* ako se jelovnik.js ne ucita: #adresa ipak pokaze svoj slajd */
html.jv-js:not(.jv-motor) .jv:has(.jv-s:target) .jv-s.jv-akt:not(:target) { display: none; }
.jv-js .jv-s { flex-direction: column; justify-content: center; min-height: calc(100svh - var(--j-top) - 120px); padding: 18px 24px 100px; }   /* dole mjesto za chat dugme */
.jv-s-in { width: 100%; max-width: 700px; margin: 0 auto; }
.jv-sir .jv-s-in { max-width: 1160px; }
.jv-s.jv-ide { will-change: transform, opacity; }

.jv-oko { margin: 0 0 14px; font: 600 12.5px/1.4 var(--j-san); letter-spacing: .16em; text-transform: uppercase; color: var(--j-akc); }
.jv-h { margin: 0 0 16px; font: 650 clamp(32px, 4.3vw, 56px)/1.04 var(--j-ser); letter-spacing: -0.035em; color: var(--j-tin); text-wrap: balance; outline: none; }
body.jelovnik .jv-h:focus, body.jelovnik .jv-h:focus-visible { outline: none; }   /* naslov dobije fokus poslije klika (citac ekrana), bez okvira */
.jv-uv { max-width: 38em; margin: 0 0 26px; font: 400 18.5px/1.55 var(--j-san); color: var(--j-tin2); text-wrap: pretty; }
.jv-uv b { font-weight: 600; color: var(--j-tin); }

/* Meni: klasican jelovnik, naslov u sredini, izbori kao stavke jelovnika */
.jv-meni .jv-s-in { max-width: 760px; }
.jv-meni .jv-oko, .jv-meni .jv-h, .jv-meni .jv-uv { text-align: center; margin-left: auto; margin-right: auto; }
.jv-meni .jv-h { font-size: clamp(40px, 6vw, 80px); line-height: 1.02; margin-bottom: 18px; }
.jv-meni .jv-h span { display: block; font-weight: 350; color: var(--j-tin2); letter-spacing: -0.04em; }
.jv-meni .jv-uv { margin-bottom: 34px; }
.jv-meni .jv-oko::before, .jv-meni .jv-oko::after { content: ""; display: inline-block; width: 34px; height: 1px; margin: 0 12px; vertical-align: middle; background: var(--j-crt2); }

/* izbori (stavke jelovnika) */
.jv-ops { border-top: 1.5px solid var(--j-tin); }
.jv-ops-h { margin: 34px 0 10px; font: 600 12.5px/1.3 var(--j-san); letter-spacing: .14em; text-transform: uppercase; color: var(--j-siv); }
.jv-o { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) 28px; align-items: center; gap: 14px; width: 100%; padding: 18px 8px 18px 6px; border: 0; border-bottom: 1px solid var(--j-crt);
  background: transparent; color: var(--j-tin); text-align: left; text-decoration: none; font: inherit; cursor: pointer; transition: background .18s; -webkit-tap-highlight-color: transparent; }
.jv-o:hover { background: var(--j-sjena); }
.jv-o:active { background: #ebe5d8; }
.jv-o-br { align-self: start; padding-top: 3px; font: 500 17px/1.2 var(--j-ser); color: var(--j-akc); text-align: right; font-variant-numeric: tabular-nums; }
.jv-o-ik { display: flex; justify-content: flex-end; padding-top: 1px; }
.jv-o-ik svg { width: 24px; height: 24px; }
.jv-o-t { display: block; min-width: 0; }
.jv-o-t b { display: block; font: 600 clamp(18px, 1.6vw, 21px)/1.25 var(--j-ser); letter-spacing: -0.018em; color: var(--j-tin); }
.jv-o-t small { display: block; margin-top: 4px; font: 400 15px/1.45 var(--j-san); color: var(--j-siv); }
.jv-o-s { justify-self: end; font: 400 20px/1 var(--j-san); color: var(--j-crt2); transition: transform .2s, color .2s; }
.jv-o:hover .jv-o-s { transform: translateX(4px); color: var(--j-akc); }
.jv-o-van .jv-o-s { font-size: 17px; }
.jv-o:not(:has(.jv-o-br)) { grid-template-columns: minmax(0, 1fr) 28px; padding-left: 8px; }
.jv-ops-g .jv-o { padding-top: 14px; padding-bottom: 14px; }
.jv-ops-g .jv-o-t b { font-size: 19px; }
.jv-ops-faq .jv-o-t b { font-size: 19.5px; }

/* sadrzaj kursa: grupe kao odjeljci jelovnika */
.jv-g { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 30px 0 0; padding-bottom: 8px; font: 600 12.5px/1.3 var(--j-san); letter-spacing: .14em; text-transform: uppercase; color: var(--j-akc); }
.jv-g span { color: var(--j-siv); letter-spacing: .06em; font-weight: 500; text-transform: none; font-size: 13px; }
.jv-sad .jv-g:first-child { margin-top: 6px; }

/* stavke sa tackicama: naziv ........ vrijednost */
.jv-st { margin: 0 0 6px; padding: 0; list-style: none; border-top: 1.5px solid var(--j-tin); }
.jv-st-r { display: flex; align-items: baseline; gap: 10px; padding: 13px 2px; border-bottom: 1px solid var(--j-crt); }
.jv-st-l { flex: 0 1 auto; min-width: 0; font: 400 16.5px/1.4 var(--j-san); color: var(--j-tin2); }
.jv-st-r > i { flex: 1 1 24px; min-width: 18px; border-bottom: 2px dotted var(--j-crt2); transform: translateY(-5px); }
.jv-st-d { flex: 0 1 auto; max-width: 62%; font: 500 17.5px/1.35 var(--j-ser); color: var(--j-tin); text-align: right; }
.jv-st-d b { font-weight: 700; }
.jv-st-cij .jv-st-d b { color: var(--j-akc); }
.jv-tot { display: inline-block; padding: 5px 14px; border-radius: 999px; background: #111; color: #fff !important; font: 700 16px/1.2 var(--j-san) !important; letter-spacing: .01em; }
.jv-st-mali .jv-st-l, .jv-st-mali .jv-st-d { font-size: 15px; }

/* dugmad */
.jv-dug { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 28px; }
.jv-cta, .jv-cta2 { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 28px; border-radius: 999px; border: 1.5px solid var(--j-tin);
  font: 600 16.5px/1.2 var(--j-san); text-decoration: none; cursor: pointer; transition: background .18s, color .18s, border-color .18s, transform .12s; text-align: left; }
.jv-cta { background: var(--j-tin); color: #fff; }
.jv-cta:hover { background: var(--j-akc); border-color: var(--j-akc); }
.jv-cta2 { background: transparent; color: var(--j-tin); }
.jv-cta2:hover { background: var(--j-tin); color: #fff; }
.jv-cta:active, .jv-cta2:active { transform: scale(.985); }
.jv-cta span, .jv-cta2 span { font-weight: 400; font-size: 19px; transition: transform .2s; }
.jv-cta:hover span, .jv-cta2:hover span { transform: translateX(3px); }

.jv-nap { margin: 18px 0 0; font: 400 15px/1.55 var(--j-san); color: var(--j-siv); max-width: 40em; }
.jv-nap b { color: var(--j-tin); font-weight: 600; }
.jv-nap a, .jv-tekst a { color: var(--j-tin); font-weight: 600; text-decoration: underline; text-decoration-color: var(--j-crt2); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.jv-nap a:hover, .jv-tekst a:hover { text-decoration-color: var(--j-akc); }
.jv-nap-c { font-size: 14px; }
.jv-tekst { max-width: 36em; }
.jv-tekst p { margin: 0 0 18px; font: 400 clamp(19px, 1.6vw, 21.5px)/1.6 var(--j-ser); color: var(--j-tin); text-wrap: pretty; }
.jv-p .jv-tekst p { font-size: clamp(20px, 1.8vw, 23px); }

/* "Dalje": na kraju svakog slajda (jelovnik.js ga premjesti u aktivni slajd) */
.jv-dalje { margin-top: 40px; }
.jv-dalje[hidden] { display: none; }
.jv-dalje-d { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 380px; padding: 16px 18px 16px 22px; border: 1.5px solid var(--j-tin); border-radius: 18px; background: #fff;
  color: var(--j-tin); text-align: left; cursor: pointer; transition: background .18s, color .18s; font: inherit; }
.jv-dalje-d:hover { background: var(--j-tin); color: #fff; }
.jv-dalje-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jv-dalje-t small { font: 600 11.5px/1.2 var(--j-san); letter-spacing: .16em; text-transform: uppercase; color: var(--j-akc); }
.jv-dalje-d:hover .jv-dalje-t small { color: #f0c9bd; }
.jv-dalje-t b { font: 500 19px/1.25 var(--j-ser); }
.jv-dalje-d svg { flex: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jv-dalje-k { max-width: 380px; margin: 10px 0 0; font: 400 12.5px/1.4 var(--j-san); color: var(--j-siv); text-align: center; }
.jv-dalje-k kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid var(--j-crt2); border-bottom-width: 2px; border-radius: 5px; background: #fff; font: 600 11.5px/1.5 var(--j-san); color: var(--j-tin2); }
@media (hover: none), (max-width: 900px) { .jv-dalje-k { display: none; } }

/* strelice sa strane (sirok ekran): slideshow */
.jv-str { display: none; }
@media (min-width: 1180px) and (hover: hover) {
  .jv-js .jv-str:not([hidden]) { position: fixed; top: 50%; z-index: 30; display: grid; place-items: center; width: 54px; height: 54px; margin-top: -27px; border: 1px solid var(--j-crt2); border-radius: 50%;
    background: rgba(255, 255, 255, .86); color: var(--j-tin); cursor: pointer; transition: background .18s, color .18s, border-color .18s, transform .18s; }
  .jv-str:hover { background: var(--j-tin); border-color: var(--j-tin); color: #fff; }
  .jv-str-l { left: 28px; } .jv-str-d { right: 28px; }
  .jv-str-l:hover { transform: translateX(-3px); } .jv-str-d:hover { transform: translateX(3px); }
  .jv-str svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}

/* "otvoren jelovnik" na sirokom ekranu: lijeva strana = pitanje (naslov, uvod, stavke), desna strana = izbori. Tanka linija izmedju.
   Lijeva strana stoji dok se desna (duga lista lekcija) skrola. Na telefonu i tabletu: jedno ispod drugog. */
.jv-2-l > :last-child { margin-bottom: 0; }
.jv-2-d > .jv-ops:first-child, .jv-2-d > .jv-st:first-child, .jv-2-d > .jv-lek:first-child { margin-top: 0; }
@media (max-width: 1099px) { .jv-2-d { margin-top: 26px; } .jv-2-l > .jv-klip { margin-top: 4px; } }
@media (min-width: 1100px) {
  .jv-s-in.jv-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; max-width: 1180px; }
  .jv-2-l { position: sticky; top: calc(var(--j-top) + 64px); padding-right: 60px; }
  .jv-2-d { padding-left: 60px; border-left: 1px solid var(--j-crt); min-height: 100%; }
  .jv-2 .jv-uv { font-size: 18px; }
  .jv-2-l .jv-st { margin-top: 6px; }
  .jv-2-d .jv-ops-h:first-child { margin-top: 0; }
  .jv-2-l .jv-klip { margin-top: 8px; }
  .jv-2-l .jv-dug-l { margin-top: 22px; }
  /* Meni kao otvoren jelovnik: lijevo dobrodoslica i pretraga, desno 7 stavki */
  .jv-meni .jv-2-l { top: calc(var(--j-top) + 40px); }
  .jv-meni .jv-oko, .jv-meni .jv-h, .jv-meni .jv-uv { text-align: left; margin-left: 0; }
  .jv-meni .jv-oko::before { display: none; }
  .jv-meni .jv-oko::after { width: 48px; }
  .jv-meni .jv-h { font-size: clamp(44px, 4.5vw, 76px); }
  .jv-meni .jv-trazi-meni label, .jv-meni .jv-meni-dno { text-align: left; justify-content: flex-start; }
  .jv-meni .jv-trazi { margin-top: 34px; }
}
@media (max-width: 1099px) {   /* sekcija na telefonu: naslov, snimak, LEKCIJE, pa cijena, korpa i Dalje */
  .jv-sek .jv-2 { display: flex; flex-direction: column; }
  .jv-sek .jv-2-l, .jv-sek .jv-2-d { display: contents; }
  .jv-sek .jv-2-d > :first-child { margin-top: 26px; }
  .jv-sek .jv-kupi { order: 5; }
  .jv-sek .jv-nap-c { order: 6; }
  .jv-sek .jv-uskoro { order: 5; align-self: flex-start; }
  .jv-sek .jv-dalje { order: 7; }
}
@media (min-width: 1100px) { .jv-sek .jv-2-l .jv-kupi { margin-top: 22px; } .jv-sek .jv-2-l .jv-dalje { margin-top: 26px; } }
@media (max-width: 1099px) {   /* Meni na telefonu: prvo stavke, pa pretraga i sitni linkovi */
  .jv-meni .jv-2 { display: flex; flex-direction: column; }
  .jv-meni .jv-2-l, .jv-meni .jv-2-d { display: contents; }
  .jv-meni .jv-2-d { margin: 0; }
  .jv-meni .jv-ops-meni { order: 2; }
  .jv-meni .jv-trazi-meni { order: 3; margin-top: 30px; }
  .jv-meni .jv-meni-dno { order: 4; }
  .jv-meni .jv-dalje { order: 5; }
}

/* snimci */
.jv-vid, .jv-klip { position: relative; overflow: hidden; border-radius: var(--j-r); background: #0e0e0e; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 40px -24px rgba(28, 26, 23, .45); }
.jv-vid { aspect-ratio: 16 / 9; margin-top: 4px; }
.jv-vid video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0e0e0e; }
.jv-klip { aspect-ratio: 16 / 9; }
.jv-klip picture, .jv-klip img, .jv-klip video { display: block; width: 100%; height: 100%; object-fit: cover; }
.jv-klip-dug { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 8px; border: 0; border-radius: 999px; background: #fff; color: var(--j-tin);
  font: 600 15px/1 var(--j-san); cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .15s; }
.jv-klip-dug:hover { transform: scale(1.03); }
.jv-klip-dug i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--j-akc); }
.jv-klip-dug i::before { content: ""; margin-left: 3px; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.jv-klip-dug small { font-weight: 500; color: var(--j-siv); font-size: 13.5px; }
.jv-klip.svira .jv-klip-dug { display: none; }
@media (max-width: 699px) and (orientation: portrait) { .jv-klip { aspect-ratio: 1 / 1; } }

/* lekcije po nazivu */
.jv-lek { border-top: 1.5px solid var(--j-tin); }
.jv-lek-g { margin: 22px 0 4px; font: 600 12.5px/1.3 var(--j-san); letter-spacing: .14em; text-transform: uppercase; color: var(--j-akc); }
.jv-lek > .jv-lek-g:first-child { margin-top: 14px; }
.jv-lek ol { margin: 0; padding: 0; list-style: none; counter-reset: jvl; }
.jv-lek li { position: relative; padding: 10px 0 10px 40px; border-bottom: 1px solid var(--j-crt); counter-increment: jvl; font: 400 16px/1.45 var(--j-san); color: var(--j-tin); }
.jv-lek li::before { content: counter(jvl); position: absolute; left: 0; top: 10px; width: 28px; text-align: right; font: 500 15px/1.45 var(--j-ser); color: var(--j-siv); font-variant-numeric: tabular-nums; }
.jv-lek li small { display: block; color: var(--j-siv); font-size: 13.5px; }
.jv-lek li.jv-nadjeno { background: var(--j-akc-sv); }
.jv-sir .jv-lek { max-height: none; }

/* korpa pod sekcijom */
.jv-kupi { margin-top: 26px; padding-top: 18px; border-top: 1.5px solid var(--j-tin); display: grid; gap: 14px; justify-items: start; }
.jv-kupi-c { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; width: 100%; margin: 0; }
.jv-kupi-c span { font: 400 16px/1.4 var(--j-san); color: var(--j-tin2); }
.jv-kupi-c b { font: 600 22px/1.2 var(--j-ser); color: var(--j-tin); }
.jv-cj { padding: 0; border: 0; background: none; color: var(--j-akc); font: 600 15.5px/1.3 var(--j-san); text-decoration: underline dotted; text-underline-offset: 4px; cursor: pointer; }
.jv-cj:hover { color: var(--j-akc2); }
.jv-uskoro { display: inline-block; margin-top: 22px; padding: 7px 16px; border: 1px solid var(--j-crt2); border-radius: 999px; font: 600 14px/1 var(--j-san); color: var(--j-siv); }

/* zvuk matrice */
.jv-audio { display: grid; gap: 10px; margin-top: 20px; padding: 18px; border: 1px solid var(--j-crt); border-radius: var(--j-r); background: #fff; }
.jv-audio p { margin: 0; font-size: 15.5px; }
.jv-audio audio { width: 100%; }
.jv-audio a { font-weight: 600; color: var(--j-tin); font-size: 14.5px; text-underline-offset: 3px; }

/* poredjenje kurseva: jedna kartica ispod druge */
.jv-kart { margin: 0 0 16px; padding: 24px 24px 22px; border: 1px solid var(--j-crt); border-radius: 18px; background: #fff; }
.jv-kart-oz { margin: 0 0 6px; font: 600 12.5px/1.3 var(--j-san); letter-spacing: .14em; text-transform: uppercase; color: var(--j-akc); }
.jv-kart-za { margin: 0 0 12px; font: 600 26px/1.15 var(--j-ser); }
.jv-kart ul { margin: 0 0 18px; padding: 0; list-style: none; }
.jv-kart li { position: relative; padding: 6px 0 6px 22px; font-size: 16px; color: var(--j-tin2); }
.jv-kart li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 10px; height: 1.5px; background: var(--j-akc); }

/* pretraga */
.jv-trazi { margin: 26px 0 0; }
.jv-trazi label { display: block; margin: 0 0 10px; font: 600 14px/1.3 var(--j-san); color: var(--j-tin2); }
.jv-trazi-meni label { text-align: center; }
.jv-trazi-p { position: relative; }
.jv-trazi-p svg { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: var(--j-siv); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.jv-trazi input { display: block; width: 100%; height: 58px; padding: 0 22px 0 52px; border: 1.5px solid var(--j-tin); border-radius: 999px; background: #fff; color: var(--j-tin); font: 400 17px/1 var(--j-san); outline: none; -webkit-appearance: none; appearance: none; }
.jv-trazi input::placeholder { color: #8a8478; }
.jv-trazi input:focus { box-shadow: 0 0 0 4px var(--j-akc-sv); border-color: var(--j-akc); }
.jv-trazi input::-webkit-search-cancel-button { cursor: pointer; }
.jv-rez { margin-top: 10px; }
.jv-rez:empty { display: none; }
.jv-rez-h { margin: 14px 0 4px; font: 600 12px/1.3 var(--j-san); letter-spacing: .14em; text-transform: uppercase; color: var(--j-siv); }
.jv-rez .jv-o { padding-top: 12px; padding-bottom: 12px; }
.jv-rez .jv-o-t b { font-size: 18px; }
.jv-rez-pj { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--j-crt); }
.jv-rez-pj b { display: block; font: 500 18px/1.25 var(--j-ser); }
.jv-rez-pj small { display: block; color: var(--j-siv); font-size: 14px; }
.jv-rez-pj a, .jv-rez-pj button { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1.5px solid var(--j-tin); border-radius: 999px; background: #fff; color: var(--j-tin); font: 600 14px/1 var(--j-san); text-decoration: none; cursor: pointer; white-space: nowrap; }
.jv-rez-pj a:hover, .jv-rez-pj button:hover { background: var(--j-tin); color: #fff; }
.jv-rez-pj.ok a { background: var(--j-ok); border-color: var(--j-ok); color: #fff; }
.jv-rez-nema { margin-top: 12px; padding: 18px; border: 1px dashed var(--j-crt2); border-radius: var(--j-r); background: #fff; }
.jv-rez-nema p { margin: 0 0 12px; font-size: 16px; }
.jv-rez-sve { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--j-tin); text-underline-offset: 3px; }

/* pjesme u paketu */
.jv-pj { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--j-crt); }
.jv-pj li { padding: 10px 2px; border-bottom: 1px solid var(--j-crt); }
.jv-pj b { display: block; font: 500 17px/1.3 var(--j-ser); }
.jv-pj small { color: var(--j-siv); font-size: 14px; }

/* koraci (snimak) */
.jv-koraci { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: jvk; border-top: 1.5px solid var(--j-tin); }
.jv-koraci li { position: relative; padding: 16px 0 16px 52px; border-bottom: 1px solid var(--j-crt); counter-increment: jvk; }
.jv-koraci li::before { content: counter(jvk); position: absolute; left: 4px; top: 12px; font: 500 30px/1 var(--j-ser); color: var(--j-akc); }
.jv-koraci b { display: block; font: 500 19px/1.3 var(--j-ser); }
.jv-koraci span { color: var(--j-siv); font-size: 15px; }
.jv-snimak { margin-top: 22px; }

/* ucenici */
.jv-lica { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 6px; }
.jv-lice { position: relative; display: block; overflow: hidden; border-radius: var(--j-r); background: #111; color: #fff; text-decoration: none; aspect-ratio: 4 / 5; }
.jv-lice img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.jv-lice:hover img { transform: scale(1.04); }
.jv-lice span { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 10px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.78)); font-size: 13px; color: #e8e2d6; }
.jv-lice b { display: block; font: 600 17px/1.2 var(--j-ser); color: #fff; }
.jv-lice::after { content: ""; position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.92) no-repeat 55% 50% / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0l10 6-10 6z' fill='%23a8341f'/%3E%3C/svg%3E"); }
.jv-david { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 22px; align-items: center; margin: 26px 0 0; }
.jv-david video { width: 100%; border-radius: var(--j-r); background: #111; aspect-ratio: 9 / 16; object-fit: cover; }
.jv-david figcaption b { display: block; font: 600 24px/1.2 var(--j-ser); margin-bottom: 4px; }
.jv-david figcaption span { color: var(--j-siv); }
@media (max-width: 640px) { .jv-david { grid-template-columns: 1fr; } .jv-david video { max-width: 320px; } }

/* "Dur ili mol?" (klavir.js) */
.jv-igra { margin-top: 4px; }

/* Meni: dno slajda (sitni linkovi) */
.jv-meni-dno { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 30px 0 0; font: 500 14.5px/1.4 var(--j-san); }
.jv-meni-dno a { color: var(--j-tin2); text-decoration: underline; text-decoration-color: var(--j-crt2); text-underline-offset: 4px; }
.jv-meni-dno a:hover { color: var(--j-tin); text-decoration-color: var(--j-akc); }

/* prozor za snimke (recenzije s YouTube-a) */
.jv-mod { position: fixed; inset: 0; z-index: 2147482000; display: grid; place-items: center; padding: 20px; background: rgba(20, 18, 15, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.jv-mod[hidden] { display: none; }
.jv-mod-in { position: relative; width: min(420px, 100%); aspect-ratio: 9 / 16; max-height: calc(100svh - 40px); border-radius: var(--j-r); overflow: hidden; background: #000; }
.jv-mod-in iframe { width: 100%; height: 100%; border: 0; }
.jv-mod-x { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--j-tin); font: 400 26px/1 var(--j-san); cursor: pointer; z-index: 2; }

/* telefon */
@media (max-width: 760px) {
  .jv-js .jv-tok { padding: 34px 16px 0; gap: 10px; min-height: 48px; }   /* 34 px: ispod jezicka "Standardni prikaz" (visi ispod trake, desno) */
  .jv-tok ol { font-size: 13px; }
  .jv-js .jv-niz.ima { padding: 8px 16px 0; }
  .jv-niz-c a { width: 12px; }
  .jv-js .jv-s { justify-content: flex-start; min-height: calc(100svh - var(--j-top) - 60px); padding: 16px 16px 96px; }
  .jv-s { padding: 34px 16px 48px; }
  .jv-js .jv-s.jv-meni { padding-top: 26px; }
  .jv-h { font-size: clamp(30px, 8.4vw, 40px); margin-bottom: 12px; }
  .jv-meni .jv-h { font-size: clamp(38px, 11vw, 52px); }
  .jv-meni .jv-oko::before, .jv-meni .jv-oko::after { width: 18px; margin: 0 8px; }
  .jv-uv { font-size: 17px; margin-bottom: 22px; }
  .jv-o { grid-template-columns: 26px minmax(0, 1fr) 20px; gap: 12px; padding: 16px 4px 16px 2px; }
  .jv-o-br { font-size: 16px; }
  .jv-o-t b { font-size: 19px; }
  .jv-o-t small { font-size: 14.5px; }
  .jv-dalje-d { max-width: none; }
  .jv-cta, .jv-cta2 { width: 100%; justify-content: space-between; min-height: 56px; padding: 0 22px; }
  .jv-dug { align-items: stretch; }
  .jv-dalje { margin-top: 30px; }
  .jv-vid, .jv-klip { border-radius: 10px; margin-left: -4px; margin-right: -4px; }
  .jv-kart { padding: 20px 18px; }
  .jv-kart-za { font-size: 23px; }
  .jv-lica { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .jv-trazi input { height: 56px; font-size: 16.5px; }
  .jv-rez-pj { grid-template-columns: 1fr; }
  .jv-rez-pj a, .jv-rez-pj button { justify-self: start; }
}
@media (max-width: 560px) {   /* telefon: stavka u dva reda (naziv sitno, vrijednost ispod), bez tackica: duge vrijednosti se ne lome cudno */
  .jv-st-r { display: block; padding: 11px 2px; }
  .jv-st-r > i { display: none; }
  .jv-st-l { display: block; font-size: 13.5px; color: var(--j-siv); }
  .jv-st-d { display: block; max-width: none; margin-top: 2px; font-size: 17px; text-align: left; }
  .jv-st-tot .jv-st-d { margin-top: 6px; }
}
@media (max-width: 560px) {   /* telefon: u tragu samo roditelj i trenutni slajd (Nazad je pored) */
  .jv-tok ol li:not(:last-child):not(:nth-last-child(2)) { display: none; }
  .jv-tok ol li:nth-last-child(2):not(:first-child)::before { content: "… /"; margin: 0 8px 0 0; }
}
@media (min-width: 900px) { .jv-pregled { top: 21px; bottom: auto; left: 50%; transform: translateX(-50%); z-index: 45; } }

/* uzak i nizak ekran (laptop 1366x768, telefon polozen): naslov manji, manje praznog prostora */
@media (max-height: 760px) and (min-width: 761px) {
  .jv-js .jv-s { justify-content: flex-start; padding-top: 10px; }
  .jv-h { font-size: clamp(30px, 3.6vw, 46px); }
  .jv-meni .jv-h { font-size: clamp(36px, 4.6vw, 60px); }
  .jv-uv { margin-bottom: 20px; }
  .jv-o { padding-top: 14px; padding-bottom: 14px; }
}

/* vrlo siroki ekrani (Goranov 3440x1215): sve srazmjerno vece, da jelovnik ne bude sitan u sredini praznog ekrana */
@media (min-width: 2200px) and (min-height: 950px) {
  .jv-top, .jv-js .jv-tok, .jv-js .jv-niz.ima, .jv-s, .jv-dno { zoom: 1.2; }
  .jv-js .jv-s { min-height: calc(100svh / 1.2 - var(--j-top) - 120px); }
  .jv-traka { top: calc(var(--j-top) * 1.2); }
}
@media (min-width: 2800px) and (min-height: 1100px) {
  .jv-top, .jv-js .jv-tok, .jv-js .jv-niz.ima, .jv-s, .jv-dno { zoom: 1.32; }
  .jv-js .jv-s { min-height: calc(100svh / 1.32 - var(--j-top) - 120px); }
  .jv-traka { top: calc(var(--j-top) * 1.32); }
  .jv-js .jv-str:not([hidden]) { zoom: 1.3; }
}

/* bez animacija ako ih posjetilac ne zeli */
@media (prefers-reduced-motion: reduce) { .jv-traka i, .jv-o-s, .jv-cta span, .jv-lice img { transition: none !important; } }

/* chat dugme: na vrlo uskom telefonu (320-380 px) samo okrugla slicica, da ne pokriva pola ekrana; ispod slajda ima mjesta (padding-bottom) */
@media (max-width: 380px) {
  html body.jelovnik #gcRoot .gc-dug { gap: 0; padding: 0 6px; }
  html body.jelovnik #gcRoot .gc-dug b, html body.jelovnik #gcRoot .gc-dug small { display: none; }
}