# KAZ Gold - Dev Session Log

**Datum:** 17.05.2026.

## Šta je urađeno u ovoj sesiji:

### 1. Globalna Arhitektura Sekcija
- **Sistem**: Prešli smo sa ručno definisanih kontejnera po sekcijama na globalni sistem. Sve sekcije sada koriste `.kaz-section` (standardizovani padding: 120px/90px) i `.container` (centriranje, max-width 1400px i padding od 15px) radi konzistentnosti i lakšeg održavanja.
- **Dizajn tokeni**: Uvedena je globalna CSS varijabla `--border-radius-lg: 12px` u `:root` kao standard za sve card elemente na sajtu.

### 2. "Procedura Kupovine" Sekcija (Sticky Stacking Cards)
- Izgradili smo sistem "lepljivih" kartica koristeći 50/50 CSS Flexbox layout (`.service-item` i `.service-item__inner`).
- **Rešavanje "Flickering" Buga kod Sticky elemenata**: Da bi se izbegla infinite-feedback petlja u kojoj `getBoundingClientRect()` stalno čita transformisane dimenzije (što izaziva nasumično treperenje interfejsa), odvojena je logika pozicioniranja od vizuelne tranzicije:
  - Spoljni kontejner (`.service-item`) nosi `position: sticky` i služi za JS praćenje (`rect.top`).
  - Unutrašnji kontejner (`.service-item__inner`) nosi sav vizuelni stil (background, senke, border-radius) i prima CSS transformacije.
- **Performanse (Minimalni JS + Native CSS)**: Odbacili smo teške frame-by-frame JS kalkulacije. `scroll.js` preko Lenis-a sada samo osluškuje poziciju: kada donja kartica pokrije gornju za 75% njene visine (`nextRect.top < windowHeight * 0.25`), JS dodaje klasu `.is-covered`. Brauzer tada preuzima posao i glatko renderuje native CSS tranzicije (`scale` i `opacity`).
- **Napomena za strukturu**: Prilikom rada sa `position: sticky`, sekcija ispod uvek mora imati dovoljnu visinu (sadržaj) kako bi roditeljski kontejner imao prostora za skrol nagore. U suprotnom, poslednja kartica deluje trajno zaglavljeno na ivici viewport-a.

### 3. Hero Sekcija - Status Bar
- Odbačen dizajn pune širine. `.kaz-hero__status-bar` je umotan u `.container` (preko novog `.kaz-hero__status-wrapper`).
- Prebačen je na full "Glassmorphism" dizajn (`backdrop-filter: blur(12px)`, rgba beli akcenti) i dodeljena mu je nova globalna `--border-radius-lg` ivica kako bi se 100% stopio sa ostalim `.kaz-hero__glass-card` elementima u hero sekciji.
