/* Oglasi za muzicare: isti jezik kao sajt (crno na bijelom, tanke linije, jedan akcenat), sve jedno ispod drugog. */
.og { padding: clamp(18px, 4vh, 40px) 0 clamp(50px, 9vh, 90px); }
.og .w { max-width: calc(860px + 2 * var(--g, 16px)); }
.og h1 { margin: 0; font: 800 clamp(30px, 5.4vw, 52px)/1.04 var(--head); letter-spacing: -.035em; color: var(--ink); overflow-wrap: anywhere; }
.og h2 { margin: 0 0 14px; font: 800 clamp(21px, 3vw, 27px)/1.15 var(--head); letter-spacing: -.02em; color: var(--ink); }
.og h3 { margin: 22px 0 10px; font: 800 18px/1.2 var(--head); color: var(--ink); }
.og p { line-height: 1.55; }
.og a:not(.btn) { color: inherit; }
.og .btn { text-decoration: none; }
.og-link { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.og-link:hover { color: var(--accent); }

/* traka oglasa ispod zaglavlja */
.og-nav { border-bottom: 1px solid var(--line); background: var(--paper); }
.og-nav .w { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; max-width: calc(860px + 2 * var(--g, 16px)); padding-top: 9px; padding-bottom: 9px; }
.og-nav a { padding: 5px 0; color: var(--ink); font: 650 15px/1.2 var(--head); text-decoration: none; }
.og-nav a:hover, .og-nav a.da { color: var(--accent); }
.og-nav .og-nav-nova { margin-left: auto; color: var(--accent); }

/* vrh stranice */
.og-vrh { padding-bottom: 22px; }
.og-vrh > p { margin: 10px 0 0; font-size: 17px; color: var(--muted); }
.og-vrh-m { padding-bottom: 16px; }
.og-put { margin: 0 0 8px !important; font-size: 13.5px !important; color: var(--muted); }
.og-put a { color: var(--muted); }
.og-trazi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 18px; }
.og-trazi input { width: 100%; height: 50px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 2px; background: #fff; color: var(--ink); font-size: 16px; }
.og-trazi .btn { height: 50px; }
.og-cta { display: grid; gap: 10px; margin-top: 14px; }
.og-obj { margin-top: 14px; }

/* izdvojena sekcija "Svirke i bendovi": isti okvir kao kartice kurseva (crna linija, crvena gore) */
.og-izd { margin: 4px 0 0; padding: clamp(16px, 3vw, 26px); border: 2px solid var(--ink); border-top: 8px solid var(--accent); background: #fff; }
.og .og-izd h2 { margin: 0 0 8px; font-size: clamp(25px, 3.8vw, 34px); }
.og-izd > p { margin: 0 0 14px; font-size: 16px; color: var(--muted); }
.og-izd > p.og-put { margin-bottom: 8px !important; }
.og-izd h1 + p { margin-top: 10px; }
.og-izd h3 { margin: 18px 0 8px; }
.og-izd-cta { display: grid; gap: 10px; margin-top: 16px; }
.og-izd-cta .btn, .og-cta .btn { height: auto; min-height: 50px; padding: 10px 14px; white-space: normal; text-align: center; line-height: 1.25; }
.og-vrh.og-izd { padding-bottom: clamp(16px, 3vw, 26px); margin-bottom: 14px; }

/* blokovi */
.og-blok { padding: 26px 0 0; margin-top: 26px; border-top: 1px solid var(--ink); }
.og-prazno { margin: 8px 0 0; padding: 22px 0; color: var(--muted); }
.og-br { margin: 14px 0 6px; }

/* kategorije: redovi */
.og-kat { display: grid; border-top: 1px solid var(--line); }
.og-kat a { position: relative; display: block; padding: 14px 44px 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.og-kat a:hover b { color: var(--accent); }
.og-kat b { display: block; font: 750 17.5px/1.25 var(--head); color: var(--ink); }
.og-kat span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.og-kat i { position: absolute; top: 15px; right: 0; font: 700 15px/1.2 var(--head); font-style: normal; color: var(--muted); }

/* oglasi: redovi (slika lijevo samo ako je ima) */
.og-lista { display: grid; border-top: 1px solid var(--line); }
.og-k { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.og-k-sl { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: start; }
.og-k-sl img { display: block; width: 104px; height: 78px; object-fit: cover; background: var(--soft); }
.og-k-t { display: block; min-width: 0; }
.og-k-sm { display: block; font-size: 12.5px; font-weight: 650; letter-spacing: .02em; color: var(--accent); }
.og-k-n { display: block; margin-top: 2px; font: 750 17px/1.25 var(--head); color: var(--ink); overflow-wrap: anywhere; }
.og-k:hover .og-k-n { color: var(--accent); }
.og-k-m { display: block; margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.og-k-c { display: block; margin-top: 4px; font: 750 15.5px/1.2 var(--head); color: var(--ink); }
.og-strane { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; padding: 16px 0 0; font-size: 14.5px; color: var(--muted); }

/* filteri */
.og-filt { margin-top: 2px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.og-filt > summary { padding: 12px 0; cursor: pointer; font: 700 15.5px/1.2 var(--head); color: var(--ink); }
.og-filt .og-forma { padding-bottom: 16px; }
.og-obav { display: grid; gap: 10px; margin-top: 26px; padding: 16px; background: var(--soft); }
.og-obav p { margin: 0; font-size: 14.5px; }
.og-obav input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid #cfcdc7; background: #fff; font-size: 16px; }
.og-obav .btn { justify-self: start; }

/* forme */
.og-forma { display: block; }
.og-nova { max-width: 620px; }
.og-forma .polje { margin-bottom: 15px; border: 0; padding: 0; }
.og-forma fieldset.polje { margin-left: 0; margin-right: 0; min-width: 0; }
.og-forma .polje label, .og-forma .polje .l { display: block; margin-bottom: 6px; padding: 0; font: 700 15px/1.3 var(--head); color: var(--ink); }
.og-forma .polje small { font-family: var(--body); font-weight: 500; color: var(--muted); }
.og-forma select, .og-forma textarea, .og-forma input[type=text], .og-forma input[type=email], .og-forma input[type=tel], .og-forma input[type=url], .og-forma input[type=date], .og-forma input[type=search] {
  display: block; width: 100%; min-height: 50px; padding: 0 12px; border: 1.5px solid #cfcdc7; border-radius: 2px; background: #fff; color: var(--ink); font: 400 16px/1.3 var(--body); box-sizing: border-box; }
.og-forma textarea { min-height: 120px; padding: 11px 12px; line-height: 1.45; resize: vertical; }
.og-forma select:focus, .og-forma textarea:focus, .og-forma input:focus { border-color: var(--ink); outline: 0; box-shadow: 0 0 0 3px rgba(13, 13, 13, .08); }
.og-iz .og-rad, .og-cek { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 0; border-top: 1px solid var(--line); font: 400 15.5px/1.35 var(--body) !important; color: var(--ink); cursor: pointer; }
.og-iz .og-rad:last-of-type { border-bottom: 1px solid var(--line); }
.og-rad input, .og-cek input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.og-cek { border-top: 0; padding: 4px 0 14px; align-items: flex-start; }
.og-iznos { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; margin-top: 10px; }
.og-iznos[hidden] { display: none; }
.og-pod-n { margin: 26px 0 14px !important; padding-top: 22px; border-top: 1px solid var(--ink); }
.og-dug { height: 58px; margin-top: 6px; font-size: 17px; }
.og-pp { margin: 10px 0 0; }
.og-sl-stare, .og-sl-nove { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 0 0 8px; }
.og-sl-nove:empty { display: none; }
.og-sl-nove { margin-top: 10px; }
.og-sl-stare img, .og-sl-nove img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--soft); }
.og-sl-stare label { font: 400 13px/1.3 var(--body) !important; }
.og-sl-stare span { display: flex; align-items: center; gap: 5px; margin-top: 4px; }

.og-forma input[type=file] { display: block; width: 100%; max-width: 100%; font-size: 14px; box-sizing: border-box; }

/* poruke o stanju */
.og-ok, .og-upoz { margin: 0 0 18px; padding: 12px 14px; font-size: 15px; }
.og-ok { border-left: 4px solid var(--ink); background: var(--soft); }
.og-upoz { border-left: 4px solid var(--accent); background: var(--accent-soft); }

/* oglas i profil */
.og-oglas h1 { margin-top: 4px; font-size: clamp(27px, 4.6vw, 42px); }
.og-oz { margin: 0; font-size: 13.5px; font-weight: 650; letter-spacing: .02em; color: var(--accent); }
.og-cij { margin: 12px 0 0; font: 800 clamp(22px, 3.4vw, 30px)/1.15 var(--head); color: var(--ink); }
.og-gal { display: grid; gap: 8px; margin-top: 18px; }
.og-gal img { display: block; width: 100%; max-height: 620px; object-fit: contain; background: var(--soft); }
.og-pod { margin: 20px 0 0; border-top: 1px solid var(--line); }
.og-pod > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.og-pod dt { color: var(--muted); }
.og-pod dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.og-opis { margin-top: 20px; font-size: 17px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.og-kontakt { display: grid; gap: 10px; margin-top: 24px; padding: 18px; background: var(--soft); }
.og-ko { margin: 0; font: 750 18px/1.25 var(--head); color: var(--ink); overflow-wrap: anywhere; }
.og-tel { height: 54px; font-size: 16.5px; }
.og-tel[hidden] { display: none; }
.og-tel-rez { display: grid; gap: 8px; }
.og-tel-rez[hidden] { display: none; }
.og-tel-rez .og-tel-br { font: 800 22px/1.2 var(--head); color: var(--ink); }
.og-app { margin: 0; }
.og-por { border-top: 1px solid #cfcdc7; }
.og-por > summary { padding: 12px 0; cursor: pointer; font: 700 15.5px/1.2 var(--head); color: var(--ink); }
.og-dijeli { margin: 16px 0 0; }
.og-sigurnost { margin-top: 18px; padding: 12px 14px; border-left: 3px solid var(--ink); font-size: 14px; line-height: 1.5; color: var(--muted); }
.og-sigurnost b { color: var(--ink); }
.og-prijavi { margin-top: 18px; font-size: 14px; }
.og-prijavi > summary { cursor: pointer; color: var(--muted); text-decoration: underline; }
.og-prijavi .og-forma { padding-top: 12px; max-width: 520px; }
.og-vl { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.og-prof-sl { display: block; width: 100%; max-width: 240px; aspect-ratio: 1; margin-top: 16px; object-fit: cover; background: var(--soft); }
.og-linkovi { margin: 16px 0 0; padding: 0; list-style: none; }
.og-linkovi li { padding: 4px 0; }
.og-linkovi a { color: var(--accent); font-weight: 650; }

/* snimak */
.og-video { margin: 18px 0 0; }
.og-video video, .og-sn-red video, .og-up-pr { display: block; width: 100%; height: auto; max-height: 72vh; background: #0b0b0b; }
.og-video figcaption { margin-top: 6px; font-size: 14.5px; color: var(--muted); }
.og-sn-red { padding: 12px 0; border-bottom: 1px solid var(--line); }
.og-sn-red p { margin: 8px 0 4px; }

/* moj nalog */
.og-akc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.og-akc form { margin: 0; }
.og-moj { padding: 14px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.og-moj p { margin: 0 0 4px; overflow-wrap: anywhere; }
.og-upl { margin: 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--muted); }
.og-upl li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.og-odj { margin-top: 30px; }

/* slanje snimka */
.og-up { margin-top: 12px; padding: 16px; background: var(--soft); }
.og-up > p { margin: 0 0 12px; }
.og-up-iz { cursor: pointer; }
.og-up-det { margin-top: 14px; }
.og-up-det[hidden], .og-up-tok[hidden], .og-up-trim[hidden] { display: none; }
.og-up-pr { margin-bottom: 8px; }
.og-up .polje { margin: 12px 0; }
.og-up .polje label { display: block; margin-bottom: 6px; font: 700 15px/1.3 var(--head); color: var(--ink); }
.og-up input[type=text] { width: 100%; min-height: 50px; padding: 0 12px; border: 1.5px solid #cfcdc7; border-radius: 2px; background: #fff; font-size: 16px; box-sizing: border-box; }
.og-up input[type=range] { width: 100%; accent-color: var(--accent); }
.og-up-tok { margin-top: 14px; }
.og-up-tok p { margin: 0 0 8px; }
.og-traka { height: 8px; margin-bottom: 8px; background: #d9d7d1; }
.og-traka i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.og-up .greska { margin: 12px 0 0; }

.og-kako { margin: 0 0 12px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.og-kako li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.og-kako b { color: var(--ink); }
.og-forma input[type=password] { display: block; width: 100%; min-height: 50px; padding: 0 12px; border: 1.5px solid #cfcdc7; background: #fff; font-size: 16px; box-sizing: border-box; }

/* tekst uslova */
.og-tekst { max-width: 680px; }
.og-tekst h2 { margin: 26px 0 8px; font-size: 20px; }
.og-tekst p, .og-tekst li { font-size: 16px; line-height: 1.6; color: var(--ink); }
.og-tekst ul { padding-left: 20px; }
.og-str { padding: 16px 0 30px; max-width: 620px; }
.og-str p { margin-top: 12px; }

@media (min-width: 720px) {
  .og-cta { grid-template-columns: none; max-width: 460px; }
  .og-k-sl { grid-template-columns: 150px minmax(0, 1fr); gap: 18px; }
  .og-k-sl img { width: 150px; height: 112px; }
  .og-gal img { max-height: 560px; }
}
@media (max-width: 420px) {
  .og-pod > div { grid-template-columns: 96px minmax(0, 1fr); }
  .og-kontakt { padding: 14px; margin-left: -4px; margin-right: -4px; }
}