/* E-SO-TEC — scroll animacija preseka (modul). Sve klase pocinju sa "es-". */
.esotec-scroll { position: relative; background: #0b0a09; }
.es-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #0b0a09; }
.es-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.es-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; pointer-events: none; }
.es-svg { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: visible; }
.es-svg line { stroke: #C9782E; stroke-width: 2; fill: none; }
.es-svg .es-dot { fill: #C9782E; }
.es-svg .es-ring { fill: none; stroke: #C9782E; stroke-width: 1; }
.es-svg .es-pt { transform-box: fill-box; transform-origin: center; }
.es-stop { position: absolute; inset: 0; visibility: hidden; }
.es-stop.on { visibility: visible; }

.es-title { position: absolute; color: #F2F1ED; }
.es-title h3 { text-wrap: balance; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; line-height: 1.02; margin: 0; letter-spacing: 0.005em; color: #F2F1ED; text-transform: none; }
.es-title .es-bar { width: 80px; height: 3px; background: #C9782E; margin-top: 20px; transform-origin: 0 50%; }
.es-title p { font-family: 'Space Mono', monospace; font-size: 20px; line-height: 33px; color: #C7C4BC; margin: 26px 0 0; }
.es-title.centar { text-align: center; }
.es-title.centar .es-bar { margin-left: auto; margin-right: auto; transform-origin: 50% 50%; }
.es-title.centar p { margin-top: 14px; font-size: 18px; line-height: 26px; }

.es-hint { display: flex; align-items: center; gap: 14px; margin-top: 46px; font-family: 'Space Mono', monospace; font-size: 14px; letter-spacing: 0.06em; color: #C7C4BC; }
.es-hint svg { width: 12px; height: 40px; overflow: visible; }
.es-hint svg line { stroke: #C9782E; stroke-width: 2; }
.es-hint svg path { fill: #C9782E; }
@keyframes es-puls { 0%,100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(6px); opacity: 1; } }
.es-hint svg { animation: es-puls 1.8s ease-in-out infinite; }

.es-box { position: absolute; background: rgba(12,10,8,0.58); border-radius: 8px; padding: 12px 14px 8px 12px; white-space: nowrap; box-sizing: border-box; }
.es-box b { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 30px; line-height: 42px; color: #F2F1ED; }
.es-box span { display: block; font-family: 'Space Mono', monospace; font-size: 18px; line-height: 26px; color: #C7C4BC; }
.es-box.right { text-align: right; padding: 12px 12px 8px 14px; }

.es-tabela { position: absolute; background: rgba(12,10,8,0.63); border-radius: 10px; box-sizing: border-box; }
.es-tabela .es-red { position: absolute; left: 16px; right: 16px; height: 40px; border-top: 1px solid #5a5046; }
.es-tabela .es-c { position: absolute; top: 9px; font-family: 'Space Mono', monospace; font-size: 17px; line-height: 22px; color: #F2F1ED; white-space: nowrap; }
.es-tabela .es-c.lab { font-size: 15px; color: #C7C4BC; top: 10px; }
.es-tabela .es-h { position: absolute; top: 10px; }
.es-tabela .es-h b { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 28px; line-height: 34px; color: #F2F1ED; }
.es-tabela .es-h span { display: block; font-family: 'Space Mono', monospace; font-size: 13px; line-height: 18px; color: #C7C4BC; }

.es-kraj { position: absolute; left: 360px; width: 1200px; text-align: center; font-family: 'Space Mono', monospace; white-space: nowrap; }
.es-dugme { position: absolute; display: flex; align-items: center; justify-content: center; border: 2px solid #C9782E; border-radius: 6px; box-sizing: border-box; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 26px; color: #F2F1ED; text-decoration: none; pointer-events: auto; transition: background .25s ease; }
.es-dugme:hover { background: rgba(201,120,46,0.18); }

/* Telefon uspravno: tekst ide ispod slike, kao kartice */
.es-cards { position: absolute; left: 16px; right: 16px; display: none; }
.esotec-scroll.portret .es-cards { display: block; }
.esotec-scroll.portret .es-title, .esotec-scroll.portret .es-box, .esotec-scroll.portret .es-tabela, .esotec-scroll.portret .es-kraj, .esotec-scroll.portret .es-dugme, .esotec-scroll.portret .es-svg line { display: none; }
.es-card-stop { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; }
.es-card-stop.on { visibility: visible; }
.es-card-stop h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 30px; line-height: 1.05; color: #F2F1ED; margin: 0 0 6px; }
.es-card-stop .es-bar { width: 56px; height: 3px; background: #C9782E; margin: 8px 0 10px; }
.es-card-stop p { font-family: 'Space Mono', monospace; font-size: 13px; line-height: 19px; color: #C7C4BC; margin: 0 0 12px; }
.es-card { border-left: 2px solid #C9782E; padding: 4px 0 4px 10px; margin: 0 0 10px; }
.es-card b { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px; line-height: 24px; color: #F2F1ED; }
.es-card span { display: block; font-family: 'Space Mono', monospace; font-size: 12.5px; line-height: 18px; color: #C7C4BC; }
.es-card a { color: #F2F1ED; text-decoration: none; border: 2px solid #C9782E; border-radius: 6px; display: inline-block; padding: 8px 18px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px; pointer-events: auto; }

/* Dok je animacija na ekranu, meni sajta se sklanja nagore, da ne pokriva kadar */
header { transition: transform .35s ease, background .35s ease, box-shadow .35s ease; }
html.es-aktivan header { transform: translateY(-110%); }
.es-card span:empty { display: none; }
html.es-aktivan.es-gore header { transform: none; }   /* meni se vraca kad korisnik skroluje nagore */

/* (prelaz je unutar sekcije, da ne prekriva susedne sekcije sajta) */
/* bez prelaza na ulazu i izlazu (korisnik, 7. 10. 2026): cista ivica sekcije */

/* Kontrole dole levo: pusti/pauza, prethodni, sledeci, preskoci */
.es-ctrl { position: absolute; left: 24px; bottom: 24px; z-index: 5; display: flex; align-items: center; gap: 4px; padding: 5px; background: rgba(12,10,8,0.62); border: 1px solid rgba(201,120,46,0.35); border-radius: 10px; opacity: .62; transition: opacity .25s ease; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.es-ctrl:hover, .es-ctrl:focus-within, .es-ctrl.igra { opacity: 1; }
.es-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 7px; color: #F2F1ED; cursor: pointer; padding: 0; transition: background .2s ease; }
.es-btn svg { width: 22px; height: 22px; display: block; }
.es-btn svg path, .es-btn svg rect { fill: currentColor; }
.es-btn svg .es-i-line { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.es-btn:hover { background: rgba(201,120,46,0.18); }
.es-btn.es-play { background: #C9782E; color: #121416; }
.es-btn.es-play:hover { background: #b8691f; }
.es-ctrl .es-i-pause { display: none; }
.es-ctrl.igra .es-i-pause { display: inline; }
.es-ctrl.igra .es-i-play { display: none; }
.es-skip { height: 44px; padding: 0 14px; margin-left: 4px; background: transparent; border: 0; border-left: 1px solid #3a342d; color: #C7C4BC; font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: .03em; cursor: pointer; white-space: nowrap; }
.es-skip:hover { color: #F2F1ED; }
.es-btn:focus-visible, .es-skip:focus-visible, .es-chap-b:focus-visible, .es-cue:focus-visible { outline: 2px solid #C9782E; outline-offset: 2px; }
.esotec-scroll.portret .es-ctrl { left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }

/* Poglavlja desno: Aluminijum / Celik / Poredjenje */
.es-chap { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; flex-direction: column; gap: 4px; }
.es-chap-b { position: relative; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; padding: 0; border-radius: 50%; }
.es-chap-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #C7C4BC; box-sizing: border-box; transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.es-chap-b:hover .es-chap-dot { border-color: #F2F1ED; }
.es-chap-b.on .es-chap-dot { background: #C9782E; border-color: #C9782E; transform: scale(1.3); }
.es-chap-lab { position: absolute; right: 36px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: 'Space Mono', monospace; font-size: 13px; color: #F2F1ED; background: rgba(12,10,8,0.8); padding: 4px 10px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.es-chap-b:hover .es-chap-lab, .es-chap-b:focus-visible .es-chap-lab { opacity: 1; }
.esotec-scroll.portret .es-chap { display: none; }

/* Dugme u hero baneru */
.es-cue { margin-top: 30px; }
.es-cue svg { width: 12px; height: 16px; }
.es-cue svg path { fill: none; stroke: #C9782E; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Smanjeno kretanje: staticna verzija (kadrovi + kartice) */
.esotec-scroll.es-staticno { padding: 64px 0 48px; }
.es-staticno .es-sticky { display: none; }
.es-st { max-width: 1100px; margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; gap: 56px; }
.es-st-blok img { width: 100%; height: auto; display: block; border-radius: 6px; }
.es-st-blok .es-card-stop { position: static; visibility: visible; margin-top: 18px; }

/* Nazad na vrh (dole desno, ceo sajt) */
.es-top { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; background: #C9782E; color: #121416; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.35); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s ease, transform .3s ease, background .2s ease; }
.es-top.vidljivo { opacity: 1; transform: none; pointer-events: auto; }
.es-top:hover { background: #b8691f; }
.es-top:focus-visible { outline: 2px solid #F2F1ED; outline-offset: 3px; }
.es-top svg { width: 22px; height: 22px; }
.es-top svg path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-aspect-ratio: 9/10) { html.es-aktivan .es-top { opacity: 0; pointer-events: none; } }   /* telefon: u animaciji je dno zauzeto kontrolama */
.es-zavesa { position: fixed; inset: 0; z-index: 70; background: #0b0a09; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.es-zavesa.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .es-top, .es-zavesa { transition: none; } }