/* UDAR (2026-11-03, Goran: "drasticne izmjene na sajtu, abnormalno da privuce paznju ljudi posjetioca i da konvertuje u prodaje").
   Ide PREKO partitura.css (body.partitura.udar): sve ostalo ostaje svijetlo i provjereno, a mijenja se ono sto prodaje:
   1. vrh naslovne je crna bina: kadar iz lekcije preko cijele sirine, ogroman bijeli naslov, lica ucenika odmah;
   2. "Imam li Vašu pjesmu?": crvena traka s pretragom 668 pjesama (svako trazi svoju), pa traka s nazivima pjesama;
   3. cjenovnik: crni blok "Sve cijene na jednom mjestu" sa spiskom sta se otkljucava;
   4. crno zaglavlje i crvena dugmad. Bez popusta, bez rokova, bez izmisljenih brojeva (Goranova pravila). Povratak: dizajn.txt = partitura. */

body.udar { --ak2: #ff6a4d; --noc: #0b0b0b; }

/* ----------------------------------------------------------------------------------------------- zaglavlje -- */
body.udar .top { background: rgba(11, 11, 11, .94); border-bottom: 1px solid #262626; color: #fff; }
body.udar .brand { color: #fff; }
body.udar .kurs-sw { border-color: rgba(255, 255, 255, .85); }
body.udar .kurs-sw a { color: #fff; }
body.udar .kurs-sw a.da { background: #fff; color: #0b0b0b; }
body.udar .kurs-sw a:not(.da):hover { background: #262626; color: #fff; }
body.udar .top nav a { color: #fff; }
body.udar .top nav a:hover { background: var(--accent); color: #fff; }

/* ------------------------------------------------------------------ vrh: crna bina, kadar preko cijele sirine -- */
body.udar .bina .st.b0 { --ak2: #ff6a4d; position: relative; isolation: isolate; overflow: hidden; background: #0b0b0b; color: #fff; }
body.udar .bina .st.b0 > video { position: absolute; inset: 0; z-index: -2; grid-area: auto; width: 100%; height: 100%; margin: 0; aspect-ratio: auto;
  object-fit: cover; object-position: 50% 62%; border: 0; opacity: .78; filter: contrast(1.08) saturate(.95); }
body.udar .bina .st.b0::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(11, 11, 11, .95) 0%, rgba(11, 11, 11, .8) 40%, rgba(11, 11, 11, .3) 100%), linear-gradient(0deg, rgba(11, 11, 11, .8), rgba(11, 11, 11, 0) 34%); }
@media (max-width: 760px) { body.udar .bina .st.b0::after { background: linear-gradient(180deg, rgba(11, 11, 11, .55) 0%, rgba(11, 11, 11, .86) 34%, rgba(11, 11, 11, .94) 100%); } }
body.udar .bina .b0 .eye { color: #fff; }
body.udar .bina .b0 h1, body.udar .bina .b0 .h-a, body.udar .bina .b0 .h-b { color: #fff; }
body.udar .bina .st.b0 p.l { color: #d9d9d9; }
body.udar .bina .b0 .brojac { color: #fff; }
body.udar .bina .b0 .brojac b { color: var(--ak2); }
body.udar .bina .b0 .upiti-h { color: #a3a3a3; }
body.udar .bina .b0 .up { border-top-color: rgba(255, 255, 255, .22); color: #fff; }
body.udar .bina .b0 #upKontakt { border-bottom-color: rgba(255, 255, 255, .22); }
body.udar .bina .b0 .up::after { color: #fff; }
body.udar .bina .b0 .up:hover, body.udar .bina .b0 .up:focus-visible { background: rgba(255, 255, 255, .07); }
body.udar .bina .b0 .up-ik { background: var(--accent); color: #fff; }
body.udar .bina .b0 .up:hover .up-ik { background: var(--accent-d); }
body.udar .bina .b0 .up-t small { color: #b3b3b3; }
body.udar .bina .b0 .up-sl { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
body.udar .bina .b0 .btn-kursevi:hover { background: #fff; color: #0b0b0b; }
/* lica ucenika (YouTube Shorts; klik ih otvori u prozoru na sajtu, naslovna.js a.short) */
body.udar .bina .u-lica { display: flex; align-items: center; gap: 16px; }
body.udar .bina .u-lica-sl { display: flex; flex: none; padding-left: 12px; }
body.udar .bina .u-lica-sl a { position: relative; display: block; width: 54px; height: 54px; margin-left: -12px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #0b0b0b; transition: transform .2s; }
body.udar .bina .u-lica-sl a:hover, body.udar .bina .u-lica-sl a:focus-visible { z-index: 1; transform: translateY(-4px); }
body.udar .bina .u-lica-sl img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.udar .bina .u-lica-t { min-width: 0; font-size: 14.5px; line-height: 1.35; color: #bdbdbd; }
body.udar .bina .u-lica-t b { display: block; font: 750 17px/1.25 var(--head); color: #fff; }
@media (min-width: 761px) {
  body.udar .bina .st.b0 { padding-top: clamp(48px, 8vh, 96px); padding-bottom: clamp(64px, 10vh, 110px); }
  body.udar .bina .st.b0 p.l { grid-column: 2; grid-row: 3; margin-top: 4px; font-size: clamp(19px, 1.55vw, 24px); line-height: 1.5; }
  body.udar .bina .st.b0 .brojac { grid-column: 2; grid-row: 4; margin-top: 30px; }
  body.udar .bina .st.b0 .u-lica { grid-column: 2; grid-row: 5; align-self: start; margin-top: 36px; }
}
@media (max-width: 760px) {
  body.udar .bina .st.b0 { padding-top: 30px; padding-bottom: 46px; }
  body.udar .bina .st.b0 > video { order: 0; margin: 0; }
  body.udar .bina .st.b0 p.l { display: block; order: 3; margin-top: 16px; font-size: 17px; line-height: 1.5; }
  body.udar .bina .st.b0 .brojac { display: block; order: 4; margin-top: 18px; font-size: clamp(17px, 5.4vw, 24px); }
  body.udar .bina .st.b0 .u-lica { order: 5; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
  body.udar .bina .st.b0 .u-lica-t { flex: 1 1 100%; }
  body.udar .bina .u-lica-sl a { width: 50px; height: 50px; }
  body.udar .bina .st.b0 .upiti { order: 6; margin-top: 30px; }
}

/* ------------------------------------------------------------- "Imam li Vašu pjesmu?" (crvena traka s pretragom) -- */
body.udar .bina .u-pjesma { position: relative; background: var(--accent); color: #fff; }
body.udar .bina .u-pj-in { max-width: calc(940px + 2 * var(--g)); margin: 0 auto; padding: clamp(64px, 11vh, 124px) var(--g) clamp(44px, 7vh, 76px); text-align: center; }
body.udar .bina .u-oko { font: 700 13px/1.3 var(--body); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
body.udar .bina .u-pjesma h2 { margin-top: 16px; font: 900 clamp(46px, 6.4vw, 92px)/.92 var(--head); letter-spacing: -.05em; color: #fff; }
body.udar .bina .u-pjesma h2 span { display: block; margin-top: .06em; color: #0b0b0b; }
body.udar .bina .u-pj-q, body.udar .bina .u-pj-rez, body.udar .bina .u-pj-cj { max-width: 760px; margin-left: auto; margin-right: auto; }
body.udar .bina .u-pj-q { display: block; width: 100%; height: 74px; margin-top: 38px; padding: 0 24px; border: 0; border-radius: 2px; background: #fff; color: #0b0b0b;
  font: 600 clamp(18px, 2.2vw, 22px)/1 var(--body); box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .55); outline: none; -webkit-appearance: none; appearance: none; }
body.udar .bina .u-pj-q::placeholder { color: #8a8a8a; opacity: 1; }
body.udar .bina .u-pj-q:focus { box-shadow: 0 0 0 4px #0b0b0b, 0 26px 60px -26px rgba(0, 0, 0, .55); }
body.udar .bina .u-pj-rez { text-align: left; }
body.udar .bina .u-pj-ima { margin-top: 20px; font: 800 19px/1.2 var(--head); color: #fff; }
body.udar .bina .u-pj-r { display: grid; gap: 12px; margin-top: 10px; padding: 16px 18px; border-radius: 2px; background: #fff; color: #0b0b0b; }
body.udar .bina .u-pj-n b { display: block; font: 800 20px/1.2 var(--head); letter-spacing: -.02em; }
body.udar .bina .u-pj-n small { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.4; color: #5b5b5b; }
body.udar .bina .u-pj-dug { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 18px; border: 0; border-radius: 2px; background: #0b0b0b; color: #fff;
  font: 700 16.5px/1.2 var(--head); text-decoration: none; cursor: pointer; transition: background .15s; }
body.udar .bina .u-pj-dug:hover, body.udar .bina .u-pj-dug:focus-visible { background: var(--accent); }
body.udar .bina .u-pj-nema { margin-top: 18px; padding: 18px; border-radius: 2px; background: #0b0b0b; color: #fff; }
body.udar .bina .u-pj-nema p { font-size: 16px; line-height: 1.5; color: #d9d9d9; }
body.udar .bina .u-pj-nema b { color: #fff; }
body.udar .bina .u-pj-pitaj { width: 100%; min-height: 50px; margin-top: 12px; border: 0; border-radius: 2px; background: #fff; color: #0b0b0b; font: 700 16.5px/1.2 var(--head); cursor: pointer; }
body.udar .bina .u-pj-pitaj:hover { background: var(--accent); color: #fff; box-shadow: inset 0 0 0 2px #fff; }
body.udar .bina .u-pj-cj { margin-top: 26px; font-size: 16.5px; line-height: 1.5; color: rgba(255, 255, 255, .94); }
body.udar .bina .u-pj-cj b { font: 800 1.15em/1 var(--head); color: #fff; }
body.udar .bina .u-pj-sve, body.udar .bina .u-pj-lista { display: inline-block; margin-top: 18px; font: 700 16px/1.3 var(--head); color: #fff; text-decoration: underline; text-underline-offset: 4px; }
body.udar .bina .u-pj-sve:hover, body.udar .bina .u-pj-lista:hover { color: #0b0b0b; }
/* traka s nazivima pjesama: tece sama, crni pojas */
body.udar .bina .u-traka { overflow: hidden; padding: 18px 0; background: #0b0b0b; }
body.udar .bina .u-traka-in { display: flex; width: max-content; animation: uTraka 110s linear infinite; }
body.udar .bina .u-traka span { white-space: nowrap; padding-right: 30px; font: 700 clamp(16px, 1.6vw, 21px)/1 var(--head); letter-spacing: -.01em; color: #fff; }
body.udar .bina .u-traka span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 30px; vertical-align: .18em; background: var(--accent); }
@keyframes uTraka { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { body.udar .bina .u-traka-in { animation: none; } }

/* ---------------------------------------------------------------- cjenovnik: crni blok "Sve cijene na jednom mjestu" -- */
body.udar .cj-traka:not(.cj-traka-ok) { gap: 16px; margin-top: 30px; padding: clamp(26px, 5vw, 52px); border: 0; background: #0b0b0b; color: #fff; }
body.udar .cj-traka:not(.cj-traka-ok) p { font-size: 17px; color: #cfcfcf; }
body.udar .cj-traka:not(.cj-traka-ok) > p:first-child b { display: block; margin-bottom: 10px; font: 900 clamp(32px, 4.6vw, 56px)/.98 var(--head); letter-spacing: -.045em; color: #fff; }
body.udar .u-cj-l { display: grid; gap: 12px; margin: 4px 0 8px; list-style: none; }
body.udar .u-cj-l li { position: relative; padding-left: 34px; font: 600 17px/1.4 var(--body); color: #fff; }
body.udar .u-cj-l li::before { content: ""; position: absolute; left: 0; top: .12em; width: 22px; height: 22px; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
body.udar .cj-traka:not(.cj-traka-ok) .cj-traka-dug { width: 100%; max-width: 560px; min-height: 70px; font-size: 19px; }
body.udar .cj-traka:not(.cj-traka-ok) .cj-traka-dug:hover { background: #fff; color: #0b0b0b; }
body.udar .cj-traka:not(.cj-traka-ok) .cj-ili { color: #bdbdbd; }
body.udar .cj-traka:not(.cj-traka-ok) .cj-ili b { color: #fff; }

/* ljepljiva traka dolje: crvena kao glavno dugme */
body.udar .ljep .btn { background: var(--accent); }
body.udar .ljep .btn:hover { background: #fff; color: #0b0b0b; }