prosberry/code_export.txt

"./GEMINI.md" : 
"""
# prosberry_produkcija Development Guidelines

Auto-generated from all feature plans. Last updated: 2025-11-17

## Active Technologies

- Bash/Shell (for `posodobi_blog.sh`), HTML, CSS, JavaScript (for existing `main.js`). + `jq` (for `posodobi_blog.sh`). (001-add-blog)

## Project Structure

```text
src/
tests/
```

## Commands

npm test && npm run lint

## Code Style

Bash/Shell (for `posodobi_blog.sh`), HTML, CSS, JavaScript (for existing `main.js`).: Follow standard conventions

## Recent Changes

- 001-add-blog: Added Bash/Shell (for `posodobi_blog.sh`), HTML, CSS, JavaScript (for existing `main.js`). + `jq` (for `posodobi_blog.sh`).

<!-- MANUAL ADDITIONS START -->
<!-- MANUAL ADDITIONS END -->
"""


"./README.md" : 
"""
## 1. Opis Projekta

**Prosberry.si** je profesionalna spletna stran za podjetje **PROSBERRY, Amra Kurešepi Zulji s.p.** Stran služi kot digitalna vizitka in informacijska točka za storitve, ki jih podjetje ponuja. Glavni cilj projekta je predstaviti strokovnost in osebni pristop Amre Kurešepi Zulji na področju jezikovnega izobraževanja in medkulturnega posredovanja.

Spletna stran je zasnovana kot statična stran (HTML, CSS, JavaScript), kar zagotavlja hitro nalaganje in enostavno vzdrževanje. Za funkcionalnost kontaktnega obrazca se uporablja PHP. Projekt vključuje tudi nabor skript za avtomatizacijo (Python in Shell), ki poenostavljajo procese, kot so optimizacija slik in posodabljanje ponavljajočih se elementov (glava, noga).

### Glavne funkcionalnosti in vsebine:
- **Predstavitev storitev:** Podroben opis jezikovnih tečajev (angleščina, albanščina, slovenščina), medkulturnega posredovanja in specializiranih delavnic.
- **Osebna predstavitev:** Stran "Kdo sem" z osebno zgodbo in kvalifikacijami izvajalke.
- **Cenik in reference:** Pregled cen storitev in mnenja zadovoljnih strank.
- **Kontaktni obrazec:** Enostaven način za pošiljanje povpraševanj.
- **Pogosta vprašanja (FAQ):** Odgovori na najpogostejša vprašanja za lažje informiranje obiskovalcev.
- **Odziven dizajn:** Stran je prilagojena za optimalen prikaz na različnih napravah (mobilni telefoni, tablice, namizni računalniki).

## 2. Struktura Projekta (Zemljevid)

```
.
├── assets
│   ├── favicon
│   │   └── site.webmanifest
│   ├── images/
│   └── pdf/
├── cene-in-reference
│   └── index.html
├── cene-in-sodelovanja
│   └── index.html
├── css
│   ├── animations.css
│   └── style.css
├── delavnice
│   └── index.html
├── js
│   └── main.js
├── kdo-sem
│   └── index.html
├── kontakt
│   ├── index.html
│   └── process_form.php
│── politika-zasebnosti
│   └── index.html
├── pogosta-vprasanja
│   └── index.html
├── ponudba
│   └── index.html
├── skupaj-za-vkljucevanje
│   ├── delavnica-od-tujca-do-sosolca
│   │   └── index.html
│   ├── delavnica-sola-in-starsi
│   │   └── index.html
│   ├── delavnica-vrtec-novi-zacetki
│   │   └── index.html
│   ├── delavnica-zakaj-znati-slovensko
│   │   └── index.html
│   └── medkulturno-posredovanje
│       └── index.html
├── error_log
├── footer-template.html
├── header-template.html
├── generate_responsive_images.py
├── index.html
├── minify_js.py
├── optimize_images.py
├── robots.txt
├── sitemap.xml
├── update-footer.sh
└── update-menus.sh
```

## 3. Opis Datotek in Map

### 📁 Korenske datoteke in mape

- **`index.html`**: Glavna vstopna stran (domača stran), ki pozdravi obiskovalca in na kratko predstavi ključne storitve ter ga usmeri na podstrani.
- **`kdo-sem/index.html`**: Stran "Kdo sem", ki vsebuje podrobnejšo osebno predstavitev Amre Kurešepi Zulji, njeno zgodbo in strokovno ozadje.
- **`ponudba/index.html`**: Stran, ki podrobno predstavlja ponudbo jezikovnih tečajev in medkulturnega posredovanja.
- **`cene-in-reference/index.html`**: Stran s cenikom za posamezne storitve in referencami (mnenji) strank.
- **`cene-in-sodelovanja/index.html`**: Alternativna ali starejša stran za cene, ki uporabnika preusmeri na kontaktno stran za več informacij.
- **`kontakt/index.html`**: Stran s kontaktnimi podatki in obrazcem za pošiljanje sporočil.
- **`pogosta-vprasanja/index.html`**: Stran z zbranimi pogostimi vprašanji in odgovori (FAQ).
- **`politika-zasebnosti/index.html`**: Pravna stran, ki opisuje politiko varovanja osebnih podatkov v skladu z GDPR.
- **`delavnice/index.html`**: Pregledna stran, ki deluje kot kazalo za vse razpoložljive delavnice in vodi do njihovih podstrani.
- **`skupaj-za-vkljucevanje/`**: Mapa, ki združuje vsebine, povezane s programom "Skupaj za vključevanje". Vsebuje podstrani za medkulturno posredovanje in posamezne delavnice.

### 📁 `assets/`
Mapa za vse statične vire, kot so slike, ikone in dokumenti.
- **`favicon/site.webmanifest`**: Manifest datoteka, ki brskalnikom omogoča, da spletno stran prikažejo z lastnostmi spletne aplikacije (npr. ikona na domačem zaslonu).
- **`images/`**: Mapa, kjer so shranjene vse slike, uporabljene na spletni strani.
- **`pdf/`**: Mapa za PDF dokumente, ki ponujajo podrobnejše opise delavnic.

### 📁 `css/`
Mapa za stilsko oblikovanje spletne strani.
- **`style.css`**: Glavna in obsežna CSS datoteka, ki vsebuje vse stile za celotno spletno stran, vključno z odzivnostjo in oblikovanjem posameznih sekcij.
- **`animations.css`**: Ločena CSS datoteka, namenjena izključno animacijam.

### 📁 `js/`
Mapa za JavaScript kodo, ki skrbi za interaktivnost.
- **`main.js`**: Osrednja JavaScript datoteka, ki upravlja:
  - Delovanje navigacije (mobilni meni, večnivojski dropdown meniji).
  - Interaktivne elemente, kot so "harmonika" (accordion) na straneh s pogostimi vprašanji.
  - Inicializacijo knjižnice AOS (Animate On Scroll) za animacije ob drsenju.
  - Logiko za pošiljanje podatkov iz kontaktnega obrazca.

### ⚙️ Backend in konfiguracija
- **`kontakt/process_form.php`**: PHP skripta, ki na strežniški strani obdela podatke, poslane preko kontaktnega obrazca, in jih pošlje na e-poštni naslov.
- **`robots.txt`**: Datoteka, ki spletnim iskalnikom (npr. Google) daje navodila, katere dele spletne strani naj indeksirajo in katerih ne.
- **`sitemap.xml`**: Zemljevid spletnega mesta v XML formatu, ki iskalnikom pomaga pri lažjem in učinkovitejšem odkrivanju vseh podstrani.
- **`error_log`**: Samodejno generirana datoteka s strani strežnika, ki beleži morebitne PHP napake.

### 🛠️ Orodja za avtomatizacijo in vzdrževanje
- **`header-template.html`** in **`footer-template.html`**: Predlogi za glavo in nogo spletne strani. Uporabljata se za centralno upravljanje teh elementov, da jih ni treba ročno urejati na vsaki strani posebej.
- **`update-menus.sh`** in **`update-footer.sh`**: Shell skripti, ki avtomatizirata posodabljanje glave in noge. Skripta prebere vsebino iz predloge in jo vstavi v vse `.html` datoteke v projektu.
- **`optimize_images.py`**: Python skripta za optimizacijo slik. Slike pretvori v sodoben in učinkovit `.webp` format, jih po potrebi pomanjša in originale shrani v varnostno kopijo.
- **`generate_responsive_images.py`**: Python skripta, ki iz originalnih slik ustvari več manjših različic za odziven prikaz na različnih velikostih zaslonov.
- **`minify_js.py`**: Preprosta Python skripta, ki iz datoteke `main.js` odstrani komentarje in odvečne presledke ter tako zmanjša njeno velikost za hitrejše nalaganje."""


"./assets/favicon/site.webmanifest" : 
"""
{
  "name": "MyWebSite",
  "short_name": "MySite",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}"""


"./blog/article-template.html" : 
"""
<!DOCTYPE html>
<html lang="sl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>__ARTICLE_TITLE__ - Prosberry</title>
    <meta name="description" content="__ARTICLE_SUMMARY__">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="/css/style.css?v=1763500835">
    <link rel="stylesheet" href="/css/animations.css">
    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>

<body>
    __HEADER_CONTENT__
    <main>
        <section class="article-hero">
            <div class="article-hero-text">
                <p class="article-date">__ARTICLE_DATE__</p>
                <h1>__ARTICLE_TITLE__</h1>
                <p class="article-summary">__ARTICLE_SUMMARY__</p>
            </div>
            <div class="article-hero-image" style="background-image: url('__ARTICLE_IMAGE__');"></div>
        </section>
        <section class="article-content-section">
            <div class="article-grid" data-aos="fade-up">
                <article class="article-card">
                    <div class="article-card-body">
                        __ARTICLE_CONTENT__
                    </div>
                </article>
                <aside class="article-sidebar">
                    <div class="sidebar-card">
                        <h3>Povezave</h3>
                        <a href="/blog/">Vsi članki</a>
                        <a href="/skupaj-za-vkljucevanje/">Skupaj za vključevanje</a>
                        <a href="/kontakt/">Kontakt</a>
                    </div>
                    <div class="sidebar-card">
                        <h3>Podpora</h3>
                        <p>Potrebujete pomoč pri razumevanju kulturne dinamike v razredu?</p>
                        <a class="cta-button" href="/kontakt/">Pišite nam</a>
                    </div>
                </aside>
            </div>
        </section>
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
            <div class="final-cta-content" data-aos="fade-up">
                <h2>Imaš vprašanje? Pokliči ali piši!</h2>
                <div class="final-cta-buttons">
                    <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                    <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
                </div>
                <p>Skupaj ustvarimo prostor za učenje, razumevanje in povezovanje.</p>
            </div>
        </section>
    </main>
    __FOOTER_CONTENT__
    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
</body>

</html>
"""


"./blog/clanki-source/2025-11-17-medkulturnost-prostor-za-rast.html" : 
"""
<!-- {
  "title": "Medkulturnost: prostor za rast v razredih in skupinah vrtca",
  "date": "2025-11-17",
  "image": "/assets/images/blog/2025-11-17-medkulturnost-prostor-za-rast/1.png",
  "summary": "Kako ustvariti varen prostor za učno povezovanje v razredih in skupinah vrtca, kjer so otroci iz različnih kulturnih okolij."
} -->
<!DOCTYPE html>
<html lang="sl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Medkulturnost: prostor za rast v razredih in skupinah vrtca | Prosberry</title>
    <meta name="description"
        content="Kako ustvariti varen prostor za učno povezovanje v razredih in skupinah vrtca, kjer so otroci iz različnih kulturnih okolij.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/animations.css">
    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>

<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" >Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" >Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" class="active">Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>
    <main>
        <section class="contact-hero blog-hero">
            <div class="contact-hero-content" data-aos="fade-up">
                <span class="contact-hero-kicker">17. november 2025</span>
                <h1>Medkulturnost: prostor za rast v razredih in skupinah vrtca</h1>

            </div>
            <div class="contact-hero-shape shape-a"></div>
            <div class="contact-hero-shape shape-b"></div>
            <div class="contact-hero-shape shape-c"></div>
            <div class="contact-hero-shape shape-d"></div>
        </section>

        <section class="blog-content">
            <div class="blog-layout-wrapper">
                <div class="blog-main-column">
                    <article class="blog-article-content" data-aos="fade-up">


                        <div class="article-body-text">
                            <div class="article-inline-image float-left">
                                <img src="/assets/images/blog/2025-11-17-medkulturnost-prostor-za-rast/1.png"
                                    alt="Medkulturnost prostor za rast" loading="lazy">
                            </div>

                            <p>V mnogih slovenskih šolah in vrtcih so danes v razredih in
                                skupinah tudi otroci iz različnih kulturnih okolij. Takšna raznolikost prinaša svoje
                                izzive, a hkrati ogromno priložnosti za rast, empatijo in nove poglede. Ta stik med
                                različnimi kulturami – to, čemur pravimo medkulturnost – pomeni, da se učimo razumeti,
                                spoštovati in ceniti različne običaje, jezike in načine izražanja, hkrati pa ohranjamo
                                svojo identiteto. V praksi to pomeni ustvariti prijazno in spodbudno vzdušje, kjer se
                                vsak otrok počuti varno in vključeno.</p>

                            <h2>Kaj pomenijo medkulturne razlike v razredu in vrtcu?</h2>

                            <div class="article-inline-image float-right">
                                <img src="/assets/images/blog/2025-11-17-medkulturnost-prostor-za-rast/2.png"
                                    alt="Medkulturne razlike" loading="lazy">
                            </div>

                            <p>Medkulturne razlike se ne kažejo le v jeziku, praznovanjih ali videzu otrok, temveč
                                predvsem v načinu razmišljanja, izražanja in vedenja – v stvareh, ki so pogosto
                                nevidne,
                                dokler nanje ne opozorimo. Vsak otrok prihaja iz okolja, kjer so bile določene
                                vrednote
                                in navade učene, cenjene in razumljene nekoliko drugače. To vpliva na to, kako se
                                vključuje v razred ali skupino, sodeluje in doživlja šolo ali vrtec kot varen
                                prostor za
                                napredovanje in razvoj.</p>
                            <p><strong>Pomembno:</strong> To niso pravila, temveč opazovanja. Otroci iz iste države
                                se
                                lahko med seboj zelo razlikujejo – vsak prinese svojo zgodbo, družinske vrednote in
                                izkušnje. Te razlike so priložnost za razumevanje in odprtost, ne razlog za sodbo
                                ali
                                primerjavo.</p>

                            <h2>Kako se otroci izražajo: besede, tišina in pogledi</h2>

                            <div class="article-inline-image float-left">
                                <img src="/assets/images/blog/2025-11-17-medkulturnost-prostor-za-rast/3.png"
                                    alt="Kako se otroci izražajo" loading="lazy">
                            </div>

                            <p>V razredu ali skupini se otroci ne izražajo samo z besedami – govorica telesa, očesni
                                stik in tišina prav tako povedo veliko o tem, kako se počutijo, razumejo učne vsebine in
                                sodelujejo z drugimi. Razumevanje teh razlik je ključ do uspešne medkulturne
                                komunikacije, saj različni načini izražanja pogosto izhajajo iz kulturnega ozadja otrok.
                            </p>

                            <ul>
                                <li><strong>Komunikacija in odnos do avtoritete:</strong> Nekateri otroci so
                                    neposredni
                                    in povedo stvari naravnost, drugi pa uporabljajo bolj taktičen ali previden
                                    način
                                    izražanja, da ohranijo harmonijo. Enako velja za odnos do učiteljev – v
                                    nekaterih
                                    kulturah je avtoriteta formalna in nedotakljiva, drugje pa bolj partnerska in
                                    pogajalska. Če tega ne prepoznamo, lahko napačno razumemo otrokove motive ali
                                    namene.</li>
                                <li><strong>Tišina in aktivno sodelovanje:</strong> Nekateri otroci bodo takoj
                                    delili
                                    svoje mnenje, drugi pa raje poslušajo in premislijo, preden spregovorijo. Ti
                                    trenutki tišine niso znak nezainteresiranosti, temveč drugačen način učenja in
                                    participacije, ki ga je pomembno razumeti v kontekstu njihove kulturne izkušnje.
                                </li>
                                <li><strong>Očesni stik in neverbalna komunikacija:</strong> Neposreden očesni stik
                                    je v
                                    nekaterih kulturah znak pozornosti in iskrenosti, v drugih pa lahko pomeni
                                    predrznost ali nespoštovanje. Geste, mimika in fizična bližina se prav tako
                                    razlikujejo – nasmeh je lahko znak prijaznosti ali način, kako otrok skrije
                                    neprijetna čustva. Če ne poznamo kulturnega ozadja, lahko napačno
                                    interpretiramo,
                                    zakaj se otrok vede na določen način.</li>
                            </ul>
                            <div class="article-inline-image float-right">
                                <img src="/assets/images/blog/2025-11-17-medkulturnost-prostor-za-rast/4.png"
                                    alt="Nasvet" loading="lazy">
                            </div>
                            <p>➡️ <strong>Nasvet:</strong> Ne sklepajte avtomatično, da otrok ne želi sodelovati ali
                                ni
                                pozoren. Opazujte, poslušajte in prilagajajte interpretacijo kulturnemu kontekstu.
                                Uporabite igre, delo v parih ali manjše skupine, da omogočite postopno vključevanje
                                in
                                udobno interakcijo.</p>

                            <h2>Primeri iz prakse</h2>
                            <ol>
                                <li><strong>Učenka iz Ukrajine ne sodeluje pri ustnih odgovorih</strong> Učitelj
                                    lahko
                                    pomisli, da se noče vključiti, a v resnici še ni samozavestna v slovenščini ali
                                    se
                                    boji neposrednega nastopa v tujem jeziku.</li>
                                <p>➡️ <strong>Nasvet:</strong> Ponudite možnost pisnega odgovarjanja ali dela v
                                    paru.
                                    Spodbujajte postopno vključevanje brez pritiska.</p>
                                <li><strong>Starši otrok iz Albanije se ne udeležijo roditeljskega sestanka</strong>
                                    Ni
                                    nujno, da jih ne zanima – morda se zaradi omejenega znanja jezika počutijo
                                    nelagodno
                                    pri javnem izražanju svojih mnenj.</li>
                                <p>➡️ <strong>Nasvet:</strong> Povabilo pošljite v preprostem jeziku in ponudite
                                    možnost
                                    prvega individualnega srečanja, da zgradite zaupanje.</p>
                                <li><strong>Otrok iz Sirije se izogiba očesnemu stiku</strong> V nekaterih kulturah
                                    je
                                    neposreden očesni stik lahko razumljen kot predrznost ali nespoštovanje, zato se
                                    ga
                                    otrok izogiba.</li>
                                <p>➡️ <strong>Nasvet:</strong> Pristopite z razumevanjem in uporabite igre ali
                                    naloge,
                                    ki omogočajo sodelovanje brez pritiska na neposreden očesni stik.</p>
                            </ol>

                            <h2>5 praktičnih nasvetov</h2>

                            <div class="article-inline-image float-right">
                                <img src="/assets/images/blog/2025-11-17-medkulturnost-prostor-za-rast/5.png"
                                    alt="Praktični nasveti" loading="lazy">
                            </div>

                            <ol>
                                <li><strong>Vprašajte, ne predvidevajte.</strong> Vsaka družina ima svojo zgodbo –
                                    pristopite z radovednostjo, ne s sodbo.</li>
                                <li><strong>Učite o raznolikosti.</strong> Pogovorite se o različnih jezikih,
                                    praznikih
                                    in običajih – otroci bodo to doživeli kot bogastvo, ne kot razliko.</li>
                                <li><strong>Ustvarite varno okolje.</strong> Naj učenci vedo, da je v redu, če
                                    delajo
                                    napake v jeziku. Vzdušje sprejemanja spodbuja učenje.</li>
                                <li><strong>Sodelujte s starši.</strong> Tudi kratka sporočila o napredku otroka
                                    gradijo
                                    zaupanje.</li>
                                <li><strong>Povežite se s strokovnjaki.</strong> Delavnice medkulturnega
                                    posredovanja
                                    ali svetovanja lahko učiteljem in staršem pomagajo bolje razumeti kulturne
                                    razlike v
                                    praksi.</li>
                            </ol>

                            <h2>Zaključek</h2>
                            <div class="article-inline-image float-left">
                                <img src="/assets/images/blog/2025-11-17-medkulturnost-prostor-za-rast/6.png"
                                    alt="Zaključek" loading="lazy">
                            </div>
                            <p>Medkulturnost v razredu ni ovira, ampak priložnost, da skupaj ustvarimo okolje, kjer
                                se
                                vsak otrok počuti slišan, spoštovan in sprejet. Z nekaj razumevanja, potrpežljivosti
                                in
                                medsebojnega sodelovanja lahko razred postane resnično bogata skupnost. Delite svoje
                                izkušnje in vprašanja v kontaktnem obrazcu – skupaj lahko gradimo močnejše in bolj
                                vključujoče šolske in vrtčevske skupnosti.</p>
                        </div>
                    </article>
                </div>

                <aside class="blog-sidebar">
                    <div class="sidebar-card">
                        <h3>Povezane teme</h3>
                        <div class="sidebar-links">
                            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/">Medkulturno posredovanje</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Delavnica: Šola in starši
                                priseljenci</a>
                            <a href="/blog/">Vsi članki</a>
                        </div>
                    </div>
                    <div class="sidebar-card">
                        <h3>Potrebujete pomoč?</h3>
                        <p class="sidebar-card-text">Stopite v stik za podporo pri medkulturnem razumevanju</p>
                        <a class="cta-button" href="/kontakt/">Kontaktirajte nas</a>
                    </div>
                </aside>
            </div>
        </section>
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
            <div class="final-cta-content" data-aos="fade-up">
                <h2>Imaš vprašanje? Pokliči ali piši!</h2>
                <div class="final-cta-buttons">
                    <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                    <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
                </div>
                <p>Skupaj ustvarimo prostor za učenje in povezovanje.</p>
            </div>
        </section>
    </main>
    <footer>
        <div class="footer-content">
            <div class="footer-logo">
                <h3>PROSBERRY</h3>
            </div>
            <div class="footer-links">
                <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
            </div>
            <div class="footer-contact">
                <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
                <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
            </div>
        </div>
    </footer>
    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
</body>

</html>
"""


"./blog/clanki-source/2025-11-17-sample-article.html" : 
"""
<!-- {
  "title": "Sample Article Title",
  "date": "2025-11-17",
  "image": "/assets/images/blog/sample-image.webp",
  "summary": "This is a sample summary for the article. It should be one or two sentences long."
} -->
<!DOCTYPE html>
<html lang="sl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Article Title - Prosberry</title>
    <meta name="description"
        content="This is a sample summary for the article. It should be one or two sentences long.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="/css/style.css?v=1763500835">
    <link rel="stylesheet" href="/css/animations.css">
    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>

<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" >Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" >Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" class="active">Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>
    <main>
        <section class="article-hero">
            <div class="article-hero-text">
                <p class="article-date">17. november 2025</p>
                <h1>Sample Article Title</h1>
                <p class="article-summary">This is a sample summary for the article. It should be one or two sentences
                    long.</p>
            </div>
            <div class="article-hero-image" style="background-image: url('/assets/images/blog/sample-image.webp');">
            </div>
        </section>
        <section class="article-content-section">
            <div class="article-grid" data-aos="fade-up">
                <article class="article-card">
                    <div class="article-card-body">

                    </div>
                </article>
                <aside class="article-sidebar">
                    <div class="sidebar-card">
                        <h3>Povezave</h3>
                        <a href="/blog/">Vsi članki</a>
                        <a href="/skupaj-za-vkljucevanje/">Skupaj za vključevanje</a>
                        <a href="/kontakt/">Kontakt</a>
                    </div>
                    <div class="sidebar-card">
                        <h3>Podpora</h3>
                        <p>Potrebujete pomoč pri razumevanju kulturne dinamike v razredu?</p>
                        <a class="cta-button" href="/kontakt/">Pišite nam</a>
                    </div>
                </aside>
            </div>
        </section>
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
            <div class="final-cta-content" data-aos="fade-up">
                <h2>Imaš vprašanje? Pokliči ali piši!</h2>
                <div class="final-cta-buttons">
                    <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                    <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
                </div>
                <p>Skupaj ustvarimo prostor za učenje, razumevanje in povezovanje.</p>
            </div>
        </section>
    </main>
    <footer>
        <div class="footer-content">
            <div class="footer-logo">
                <h3>PROSBERRY</h3>
            </div>
            <div class="footer-links">
                <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
            </div>
            <div class="footer-contact">
                <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
                <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
            </div>
        </div>
    </footer>
    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
</body>

</html>
"""


"./blog/clanki-source/2025-11-18-dojemanje-casa-tocnosti-discipline.html" : 
"""
<!-- {
  "title": "Dojemanje časa, točnosti in discipline – od juga proti severu Evrope",
  "date": "2025-11-18",
  "image": "/assets/images/blog/time-discipline.webp",
  "summary": "Medkulturne razlike v dojemanju časa segajo od sproščenih odnosov na jugu do natančne discipline na severu Evrope, zato je pomembno razumeti, kaj posamezne skupine resnično sporočajo z zamudo ali redom."
} -->
<!DOCTYPE html>
<html lang="sl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dojemanje časa, točnosti in discipline – od juga proti severu Evrope - Prosberry</title>
    <meta name="description"
        content="Medkulturne razlike v dojemanju časa segajo od sproščenih odnosov na jugu do natančne discipline na severu Evrope, zato je pomembno razumeti, kaj posamezne skupine resnično sporočajo z zamudo ali redom.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="/css/style.css?v=1763500835">
    <link rel="stylesheet" href="/css/animations.css">
    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>

<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" >Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" >Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" class="active">Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>
    <main>
        <section class="article-hero">
            <div class="article-hero-text">
                <p class="article-date">18. november 2025</p>
                <h1>Dojemanje časa, točnosti in discipline – od juga proti severu Evrope</h1>
                <p class="article-summary">Medkulturne razlike v dojemanju časa segajo od sproščenih odnosov na jugu do
                    natančne discipline na severu Evrope, zato je pomembno razumeti, kaj posamezne skupine resnično
                    sporočajo z zamudo ali redom.</p>
            </div>
            <div class="article-hero-image" style="background-image: url('/assets/images/blog/time-discipline.webp');">
            </div>
        </section>
        <section class="article-content-section">
            <div class="article-grid" data-aos="fade-up">
                <article class="article-card">
                    <div class="article-card-body">

                    </div>
                </article>
                <aside class="article-sidebar">
                    <div class="sidebar-card">
                        <h3>Povezave</h3>
                        <a href="/blog/">Vsi članki</a>
                        <a href="/skupaj-za-vkljucevanje/">Skupaj za vključevanje</a>
                        <a href="/kontakt/">Kontakt</a>
                    </div>
                    <div class="sidebar-card">
                        <h3>Podpora</h3>
                        <p>Potrebujete pomoč pri razumevanju kulturne dinamike v razredu?</p>
                        <a class="cta-button" href="/kontakt/">Pišite nam</a>
                    </div>
                </aside>
            </div>
        </section>
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
            <div class="final-cta-content" data-aos="fade-up">
                <h2>Imaš vprašanje? Pokliči ali piši!</h2>
                <div class="final-cta-buttons">
                    <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                    <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
                </div>
                <p>Skupaj ustvarimo prostor za učenje, razumevanje in povezovanje.</p>
            </div>
        </section>
    </main>
    <footer>
        <div class="footer-content">
            <div class="footer-logo">
                <h3>PROSBERRY</h3>
            </div>
            <div class="footer-links">
                <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
            </div>
            <div class="footer-contact">
                <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
                <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
            </div>
        </div>
    </footer>
    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
</body>

</html>
"""


"./blog/clanki/2025-11-15-prihaja-kmalu.html" : 
"""
<!-- {
  "title": "Prihaja kmalu",
  "date": "2025-11-15",
  "image": "/assets/images/blog/2025-11-15-prihaja-kmalu/header.png",
  "summary": "Prihajajo novi članki o medkulturnih temah; vmes si lahko preberete že objavljeno vsebino."
} -->
<!DOCTYPE html>
<html lang="sl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prihaja kmalu | Prosberry</title>
    <meta name="description"
        content="Prihajajo novi članki o medkulturnih izzivih in praksah. Medtem si lahko preberete obstoječe prispevke in se povežete z nami.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/animations.css">
    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>

<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" >Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" >Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" class="active">Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>
    <main>
        <section class="contact-hero blog-hero">
            <div class="contact-hero-content" data-aos="fade-up">
                <span class="contact-hero-kicker">16. november 2025</span>
                <h1>Prihaja kmalu</h1>
            </div>
            <div class="contact-hero-shape shape-a"></div>
            <div class="contact-hero-shape shape-b"></div>
            <div class="contact-hero-shape shape-c"></div>
            <div class="contact-hero-shape shape-d"></div>
        </section>

        <section class="blog-content">
            <div class="blog-layout-wrapper">
                <div class="blog-main-column">
                    <article class="blog-article-content" data-aos="fade-up">
                        <div class="article-intro-two-column"
                            style="display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-bottom:2.5rem;">
                            <p style="flex:1 1 360px; margin:0; line-height:1.7; font-size:1.1rem; text-align:justify;">
                                Prihajajo novi članki o medkulturnih temah, na katerih delamo v ozadju. Medtem ko dokončujemo
                                vsebine, si lahko preberete že objavljene prispevke in najdete navdih ali praktične ideje za delo
                                s skupinami. Novi naslovi bodo kmalu razkriti – spremljajte nas na tej strani ali preko kontaktnega
                                obrazca.
                            </p>
                            <div style="flex:1 1 280px; text-align:right;">
                                <img src="/assets/images/blog/2025-11-18-dojemanje-casa-tocnosti-discipline/1.png"
                                    alt="Prihaja kmalu" loading="lazy"
                                    style="max-width:130%; height:auto; display:inline-block;">
                            </div>
                        </div>

                        <div class="article-body-text">
                            <h2>Ostanite na tekočem</h2>
                            <p>Ko bomo pripravljeni, boste tu našli nove prispevke o dojemanju časa, raznolikosti v učnih skupinah
                                ali vpeljevanju strukturiranih praks v multikulturnih okoljih. Zdaj pa vas vabimo, da preberete
                                prej objavljene članke:</p>
                            <ul>
                                <li><a href="/blog/clanki/2025-11-17-medkulturnost-prostor-za-rast.html">Medkulturnost: prostor za rast v razredih in skupinah vrtca</a></li>
                                <li><a href="/blog/clanki/2025-11-18-dojemanje-casa-tocnosti-discipline.html">Dojemanje časa, točnosti in discipline – od juga proti severu Evrope</a></li>
                            </ul>
                            <p>Če si želite svežega vpogleda, izberite enega od zgornjih člankov ali pokličite, da skupaj najdemo podporne poti.</p>
                        </div>
                    </article>
                </div>

                <aside class="blog-sidebar" data-aos="fade-up" data-aos-delay="150">
                    <div class="sidebar-card">
                        <h3>Povezane teme</h3>
                        <div class="sidebar-links">
                            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/">Medkulturno posredovanje</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Delavnica: Šola in starši
                                priseljenci</a>
                            <a href="/blog/">Vsi članki</a>
                        </div>
                    </div>
                    <div class="sidebar-card">
                        <h3>Potrebujete pomoč?</h3>
                        <p class="sidebar-card-text">Stopite v stik za podporo pri medkulturnem razumevanju</p>
                        <a class="cta-button" href="/kontakt/">Kontaktirajte nas</a>
                    </div>
                </aside>
            </div>
        </section>
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
            <div class="final-cta-content" data-aos="fade-up">
                <h2>Imaš vprašanje? Pokliči ali piši!</h2>
                <div class="final-cta-buttons">
                    <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                    <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
                </div>
                <p>Skupaj ustvarimo prostor za učenje in povezovanje.</p>
            </div>
        </section>
    </main>
    <footer>
        <div class="footer-content">
            <div class="footer-logo">
                <h3>PROSBERRY</h3>
            </div>
            <div class="footer-links">
                <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
            </div>
            <div class="footer-contact">
                <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
                <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
            </div>
        </div>
    </footer>
    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
</body>

</html>
"""


"./blog/clanki/2025-11-16-prihaja-kmalu.html" : 
"""
<!-- {
  "title": "Prihaja kmalu",
  "date": "2025-11-16",
  "image": "/assets/images/blog/2025-11-16-prihaja-kmalu/header.png",
  "summary": "Prihajali bodo novi članki o medkulturnih temah; vmes si lahko preberete že objavljeno vsebino."
} -->
<!DOCTYPE html>
<html lang="sl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prihaja kmalu | Prosberry</title>
    <meta name="description"
        content="Prihajajo novi članki o medkulturnih izzivih in praksah. Medtem si lahko preberete obstoječe prispevke in se povežete z nami.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/animations.css">
    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>

<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" >Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" >Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" class="active">Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>
    <main>
        <section class="contact-hero blog-hero">
            <div class="contact-hero-content" data-aos="fade-up">
                <span class="contact-hero-kicker">16. november 2025</span>
                <h1>Prihaja kmalu</h1>
            </div>
            <div class="contact-hero-shape shape-a"></div>
            <div class="contact-hero-shape shape-b"></div>
            <div class="contact-hero-shape shape-c"></div>
            <div class="contact-hero-shape shape-d"></div>
        </section>

        <section class="blog-content">
            <div class="blog-layout-wrapper">
                <div class="blog-main-column">
                    <article class="blog-article-content" data-aos="fade-up">
                        <div class="article-intro-two-column"
                            style="display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-bottom:2.5rem;">
                            <p style="flex:1 1 360px; margin:0; line-height:1.7; font-size:1.1rem; text-align:justify;">
                                Prihajajo novi članki o medkulturnih temah, na katerih delamo v ozadju. Medtem ko dokončujemo
                                vsebine, si lahko preberete že objavljene prispevke in najdete navdih ali praktične ideje za delo
                                s skupinami. Novi naslovi bodo kmalu razkriti – spremljajte nas na tej strani ali preko kontaktnega
                                obrazca.
                            </p>
                            <div style="flex:1 1 280px; text-align:right;">
                                <img src="/assets/images/blog/2025-11-18-dojemanje-casa-tocnosti-discipline/1.png"
                                    alt="Prihaja kmalu" loading="lazy"
                                    style="max-width:130%; height:auto; display:inline-block;">
                            </div>
                        </div>

                        <div class="article-body-text">
                            <h2>Ostanite na tekočem</h2>
                            <p>Ko bomo pripravljeni, boste tu našli nove prispevke o dojemanju časa, raznolikosti v učnih skupinah
                                ali vpeljevanju strukturiranih praks v multikulturnih okoljih. Zdaj pa vas vabimo, da preberete
                                prej objavljene članke:</p>
                            <ul>
                                <li><a href="/blog/clanki/2025-11-17-medkulturnost-prostor-za-rast.html">Medkulturnost: prostor za rast v razredih in skupinah vrtca</a></li>
                                <li><a href="/blog/clanki/2025-11-18-dojemanje-casa-tocnosti-discipline.html">Dojemanje časa, točnosti in discipline – od juga proti severu Evrope</a></li>
                            </ul>
                            <p>Če si želite svežega vpogleda, izberite enega od zgornjih člankov ali pokličite, da skupaj najdemo podporne poti.</p>
                        </div>
                    </article>
                </div>

                <aside class="blog-sidebar" data-aos="fade-up" data-aos-delay="150">
                    <div class="sidebar-card">
                        <h3>Povezane teme</h3>
                        <div class="sidebar-links">
                            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/">Medkulturno posredovanje</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Delavnica: Šola in starši
                                priseljenci</a>
                            <a href="/blog/">Vsi članki</a>
                        </div>
                    </div>
                    <div class="sidebar-card">
                        <h3>Potrebujete pomoč?</h3>
                        <p class="sidebar-card-text">Stopite v stik za podporo pri medkulturnem razumevanju</p>
                        <a class="cta-button" href="/kontakt/">Kontaktirajte nas</a>
                    </div>
                </aside>
            </div>
        </section>
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
            <div class="final-cta-content" data-aos="fade-up">
                <h2>Imaš vprašanje? Pokliči ali piši!</h2>
                <div class="final-cta-buttons">
                    <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                    <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
                </div>
                <p>Skupaj ustvarimo prostor za učenje in povezovanje.</p>
            </div>
        </section>
    </main>
    <footer>
        <div class="footer-content">
            <div class="footer-logo">
                <h3>PROSBERRY</h3>
            </div>
            <div class="footer-links">
                <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
            </div>
            <div class="footer-contact">
                <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
                <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
            </div>
        </div>
    </footer>
    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
</body>

</html>
"""


"./blog/clanki/2025-11-17-medkulturnost-prostor-za-rast.html" : 
"""
<!-- {
  "title": "Medkulturnost: prostor za rast v razredih in skupinah vrtca",
  "date": "2025-11-17",
  "image": "/assets/images/blog/2025-11-17-medkulturnost-prostor-za-rast/header.png",
  "summary": "V razredih in skupinah vrtca si ustvarimo varen prostor, kjer se otroci iz različnih kultur počutijo vključene."
} -->
<!DOCTYPE html>
<html lang="sl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Medkulturnost: prostor za rast v razredih in skupinah vrtca | Prosberry</title>
    <meta name="description"
        content="Kako ustvariti varen prostor za učno povezovanje v razredih in skupinah vrtca, kjer so otroci iz različnih kulturnih okolij.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/animations.css">
    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>

<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" >Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" >Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" class="active">Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>
    <main>
        <section class="contact-hero blog-hero">
            <div class="contact-hero-content" data-aos="fade-up">
                <span class="contact-hero-kicker">17. november 2025</span>
                <h1>Medkulturnost: prostor za rast v razredih in skupinah vrtca</h1>

            </div>
            <div class="contact-hero-shape shape-a"></div>
            <div class="contact-hero-shape shape-b"></div>
            <div class="contact-hero-shape shape-c"></div>
            <div class="contact-hero-shape shape-d"></div>
        </section>

        <section class="blog-content">
            <div class="blog-layout-wrapper">
                <div class="blog-main-column">
                    <article class="blog-article-content" data-aos="fade-up">


                        <div class="article-body-text">
                            <div class="article-inline-image float-left">
                                <img src="/assets/images/blog/2025-11-17-medkulturnost-prostor-za-rast/1.png"
                                    alt="Medkulturnost prostor za rast" loading="lazy">
                            </div>

                            <p>V mnogih slovenskih šolah in vrtcih so danes v razredih in skupinah tudi otroci iz
                                različnih kulturnih okolij. Takšna raznolikost prinaša svoje izzive, a hkrati ogromno
                                priložnosti za rast, empatijo in nove poglede. Ta stik med različnimi kulturami – to,
                                čemur pravimo medkulturnost – pomeni, da se učimo razumeti, spoštovati in ceniti različne
                                običaje, jezike in načine izražanja, hkrati pa ohranjamo svojo identiteto. V praksi to
                                pomeni ustvariti prijazno in spodbudno vzdušje, kjer se vsak otrok počuti varno in
                                vključeno. Kako lahko v razredih in skupinah vrtca zagotovimo, da se vsak otrok počuti
                                udobno?</p>

                            <h2>Kaj pomenijo medkulturne razlike v razredu in vrtcu?</h2>

                            <div class="article-inline-image float-right article-image-wide">
                                <img src="/assets/images/blog/2025-11-17-medkulturnost-prostor-za-rast/2.png"
                                    alt="Medkulturne razlike" loading="lazy" style="width:100%; height:auto;">
                            </div>

                            <p>Medkulturne razlike se ne kažejo le v jeziku, praznovanjih ali videzu otrok, temveč
                                predvsem v načinu razmišljanja, izražanja in vedenja – v stvareh, ki so pogosto
                                nevidne,
                                dokler nanje ne opozorimo.</p>
                            <p>Vsak otrok prihaja iz okolja, kjer so bile določene vrednote in navade učene, cenjene in
                                razumljene nekoliko drugače. To vpliva na to, kako se vključuje v razred ali skupino,
                                sodeluje in doživlja šolo ali vrtec kot varen prostor za napredovanje in razvoj.</p>
                            <p><strong>Pomembno:</strong> To niso pravila, temveč opazovanja. Otroci iz iste države se
                                lahko med seboj zelo razlikujejo – vsak prinese svojo zgodbo, družinske vrednote in
                                izkušnje. Te razlike so priložnost za razumevanje in odprtost, ne razlog za sodbo ali
                                primerjavo.</p>

                            <h2>Kako se otroci izražajo: besede, tišina in pogledi</h2>

                            <div class="article-inline-image float-left article-image-wide">
                                <img src="/assets/images/blog/2025-11-17-medkulturnost-prostor-za-rast/3.png"
                                    alt="Kako se otroci izražajo" loading="lazy" style="width:100%; height:auto;">
                            </div>

                            <p>V razredu ali skupini se otroci ne izražajo samo z besedami – govorica telesa, očesni
                                stik in tišina prav tako povedo veliko o tem, kako se počutijo, razumejo učne vsebine in
                                sodelujejo z drugimi. Razumevanje teh razlik je ključ do uspešne medkulturne
                                komunikacije, saj različni načini izražanja pogosto izhajajo iz kulturnega ozadja otrok.
                            </p>

                            <ul>
                                <li><strong>Komunikacija in odnos do avtoritete:</strong> Nekateri otroci so neposredni in
                                    povedo stvari naravnost, drugi pa uporabljajo bolj taktičen ali previden način
                                    izražanja, da ohranijo harmonijo. Enako velja za odnos do učiteljev – v nekaterih
                                    kulturah je avtoriteta formalna in nedotakljiva, drugje pa bolj partnerska in
                                    pogajalska. Če tega ne prepoznamo, lahko napačno razumemo otrokove motive ali namene.</li>
                                <li><strong>Tišina in aktivno sodelovanje:</strong> Nekateri otroci bodo takoj delili svoje
                                    mnenje, drugi pa raje poslušajo in premislijo, preden spregovorijo. Ti trenutki tišine
                                    niso znak nezainteresiranosti, temveč drugačen način učenja in participacije, ki ga je
                                    pomembno razumeti v kontekstu njihove kulturne izkušnje.</li>
                                <li><strong>Očesni stik in neverbalna komunikacija:</strong> Neposreden očesni stik je v
                                    nekaterih kulturah znak pozornosti in iskrenosti, v drugih pa lahko pomeni predrznost
                                    ali nespoštovanje. Geste, mimika in fizična bližina se prav tako razlikujejo – nasmeh je
                                    lahko znak prijaznosti ali način, kako otrok skrije neprijetna čustva. Če ne poznamo
                                    kulturnega ozadja, lahko napačno interpretiramo, zakaj se otrok vede na določen način.</li>
                            </ul>
                            <div class="article-inline-image float-right article-image-wide">
                                <img src="/assets/images/blog/2025-11-17-medkulturnost-prostor-za-rast/4.png"
                                    alt="Nasvet" loading="lazy" style="width:100%; height:auto;">
                            </div>
                            <p>➡️<strong class="tip-label">Nasvet:</strong> Ne sklepajte avtomatično, da otrok ne želi sodelovati ali ni
                                pozoren. Opazujte, poslušajte in prilagajajte interpretacijo kulturnemu kontekstu. Uporabite
                                igre, delo v parih ali manjše skupine, da omogočite postopno vključevanje in udobno
                                interakcijo.</p>

                            <h2>Primeri iz prakse</h2>
                            <ol>
                                <li><strong>Učenka iz Ukrajine ne sodeluje pri ustnih odgovorih.</strong> Učitelj lahko
                                    pomisli, da se noče vključiti, a v resnici še ni samozavestna v slovenščini ali se boji
                                    neposrednega nastopa v tujem jeziku.
                                    <p>➡️<strong class="tip-label">Nasvet:</strong> Ponudite možnost pisnega odgovarjanja ali dela v paru.
                                        Spodbujajte postopno vključevanje brez pritiska.</p>
                                </li>
                                <li><strong>Starši otrok iz Albanije se ne udeležijo roditeljskega sestanka.</strong> Ni
                                    nujno, da jih ne zanima – morda se zaradi omejenega znanja jezika počutijo nelagodno pri
                                    javnem izražanju svojih mnenj.
                                    <p>➡️<strong class="tip-label">Nasvet:</strong> Povabilo pošljite v preprostem jeziku in ponudite možnost
                                        prvega individualnega srečanja, da zgradite zaupanje.</p>
                                </li>
                                <li><strong>Otrok iz Sirije se izogiba očesnemu stiku.</strong> V nekaterih kulturah je
                                    neposreden očesni stik lahko razumljen kot predrznost ali nespoštovanje, zato se ga
                                    otrok izogiba.
                                    <p>➡️<strong class="tip-label">Nasvet:</strong> Pristopite z razumevanjem in uporabite igre ali naloge, ki
                                        omogočajo sodelovanje brez pritiska na neposreden očesni stik.</p>
                                </li>
                            </ol>

                            <h2>5 praktičnih nasvetov</h2>

                            <div class="article-inline-image float-right">
                                <img src="/assets/images/blog/2025-11-17-medkulturnost-prostor-za-rast/5.png"
                                    alt="Praktični nasveti" loading="lazy">
                            </div>

                            <ol>
                                <li><strong>Vprašajte, ne predvidevajte.</strong> Vsaka družina ima svojo zgodbo –
                                    pristopite z radovednostjo, ne s sodbo.</li>
                                <li><strong>Učite o raznolikosti.</strong> Pogovorite se o različnih jezikih, praznikih in
                                    običajih – otroci bodo to doživeli kot bogastvo, ne kot razliko.</li>
                                <li><strong>Ustvarite varno okolje.</strong> Naj učenci vedo, da je v redu, če delajo napake
                                    v jeziku. Vzdušje sprejemanja spodbuja učenje.</li>
                                <li><strong>Sodelujte s starši.</strong> Tudi kratka sporočila o napredku otroka gradijo
                                    zaupanje.</li>
                                <li><strong>Povežite se s strokovnjaki.</strong> Delavnice medkulturnega posredovanja ali
                                    svetovanja lahko učiteljem in staršem pomagajo bolje razumeti kulturne razlike v
                                    praksi.</li>
                            </ol>

                            <h2>Zaključek</h2>
                            <div class="article-conclusion-block">
                                <div class="article-inline-image article-image-wide conclusion-image">
                                    <img src="/assets/images/blog/2025-11-17-medkulturnost-prostor-za-rast/6.png"
                                        alt="Zaključek" loading="lazy" style="width:100%; height:auto;">
                                </div>
                                <div class="article-conclusion-text">
                                    <p>Medkulturnost v razredu ni ovira, ampak priložnost, da skupaj ustvarimo okolje,
                                        kjer se vsak otrok počuti slišan, spoštovan in sprejet. Z nekaj razumevanja,
                                        potrpežljivosti in medsebojnega sodelovanja lahko razred postane resnično bogata
                                        skupnost. Delite svoje izkušnje in vprašanja v kontaktnem obrazcu – skupaj lahko
                                        gradimo močnejše in bolj vključujoče šolske in vrtčevske skupnosti.</p>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>

                <aside class="blog-sidebar">
                    <div class="sidebar-card">
                        <h3>Povezane teme</h3>
                        <div class="sidebar-links">
                            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/">Medkulturno posredovanje</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Delavnica: Šola in starši
                                priseljenci</a>
                            <a href="/blog/">Vsi članki</a>
                        </div>
                    </div>
                    <div class="sidebar-card">
                        <h3>Potrebujete pomoč?</h3>
                        <p class="sidebar-card-text">Stopite v stik za podporo pri medkulturnem razumevanju</p>
                        <a class="cta-button" href="/kontakt/">Kontaktirajte nas</a>
                    </div>
                </aside>
            </div>
        </section>

        <section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
            <div class="final-cta-content" data-aos="fade-up">
                <h2>Imaš vprašanje? Pokliči ali piši!</h2>
                <div class="final-cta-buttons">
                    <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                    <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
                </div>
                <p>Skupaj ustvarimo prostor za učenje in povezovanje.</p>
            </div>
        </section>
    </main>
    <footer>
        <div class="footer-content">
            <div class="footer-logo">
                <h3>PROSBERRY</h3>
            </div>
            <div class="footer-links">
                <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
            </div>
            <div class="footer-contact">
                <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
                <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
            </div>
        </div>
    </footer>
    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
</body>

</html>
"""


"./blog/clanki/2025-11-18-dojemanje-casa-tocnosti-discipline.html" : 
"""
<!-- {
  "title": "Dojemanje časa, točnosti in discipline – od juga proti severu Evrope",
  "date": "2025-11-18",
  "image": "/assets/images/blog/2025-11-18-dojemanje-casa-tocnosti-discipline/header.png",
  "summary": "Razumevanje kulturnih razlik v dojemanju časa in discipline zmanjšuje nesporazume."
} -->
<!DOCTYPE html>
<html lang="sl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dojemanje časa, točnosti in discipline – od juga proti severu Evrope | Prosberry</title>
    <meta name="description"
        content="Medkulturne razlike v dojemanju časa segajo od sproščenih odnosov na jugu do natančne discipline na severu Evrope, zato je pomembno razumeti, kaj posamezne skupine resnično sporočajo z zamudo ali redom.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/animations.css">
    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>

<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" >Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" >Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" class="active">Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>
    <main>
        <section class="contact-hero blog-hero">
            <div class="contact-hero-content" data-aos="fade-up">
                <span class="contact-hero-kicker">18. november 2025</span>
                <h1>Dojemanje časa, točnosti in discipline – od juga proti severu Evrope</h1>
            </div>
            <div class="contact-hero-shape shape-a"></div>
            <div class="contact-hero-shape shape-b"></div>
            <div class="contact-hero-shape shape-c"></div>
            <div class="contact-hero-shape shape-d"></div>
        </section>

        <section class="blog-content">
            <div class="blog-layout-wrapper">
                <div class="blog-main-column">
                    <article class="blog-article-content" data-aos="fade-up">
                        <div class="article-intro-two-column"
                            style="display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-bottom:2.5rem;">
                            <p style="flex:2 1 360px; margin:0; line-height:1.7; font-size:1.1rem; text-align:justify;">
                                Razumevanje časa, točnosti in discipline se med kulturami močno razlikuje. Čeprav so te
                                vrednote prisotne povsod, jih ljudje doživljamo na različne načine – od bolj sproščenega
                                odnosa na jugu do izrazito strukturiranega pristopa na severu. Te razlike ne pomenijo, da
                                je nekdo »nereden«, »neodgovoren« ali »rigiden«; gre za kulturne orientacije, ki vplivajo
                                na to, kako družine in otroci razumejo urnike, roke in pravila.
                            </p>
                            <div style="flex:1 1 260px; text-align:right;">
                                <img src="/assets/images/blog/2025-11-18-dojemanje-casa-tocnosti-discipline/1.png"
                                    alt="Dojemanje časa, točnosti in discipline" loading="lazy"
                                    style="max-width:135%; height:auto; display:inline-block;">
                            </div>
                        </div>

                        <div class="article-body-text">

                            <h2>Južni Balkan – fleksibilen čas in poudarek na odnosih</h2>

                            <p>Na južnem Balkanu je odnos do časa pogosto sproščen in prilagodljiv. Pomembnejši od ure ali
                                natančnega načrta je odnos med ljudmi — če se pogovor zavleče, je to lahko znak, da si
                                vzel čas za drugega, ne pa neodgovornost. Zamuda nekaj minut (včasih tudi več) je
                                razumljena kot nekaj običajnega. »Pridem čez pet minut« lahko pomeni karkoli med pet in
                                petnajstimi minutami. :)</p>
                            <p>Da je južnjaška časovna logika res posebna, dokazujejo številni vsakdanji primeri:</p>
                            <ul>
                                <li><strong>»Pridi na kavo«:</strong> Fraza lahko pomeni 10 minut ali tri ure. Kava je
                                    srečanje, pogovor, terapija in sprostitev v enem.</li>
                                <li><strong>Razlaga zamud:</strong> Zamuda ni le razlog — zamuda je zgodba. »Zakaj zamuda?«: »Bom povedal, sedi.« In zgodba šteje.</li>
                                <li><strong>Družinsko kosilo:</strong> Kosilo ob 13.00 se lahko začne ob 13.30 ali 14.15 —
                                    če je babica po poti srečala sosedo in je bilo treba »malo poklepetati«.</li>
                                <li><strong>Srečanja, »ki nikoli ne končajo, ko naj bi«:</strong> Če se dogovor konča ob
                                    18.00, je povsem normalno, da ob 18.20 šele prehajate iz glavne teme na nepričakovano
                                    sladico, ker je nekdo ravno nekaj prinesel iz kuhinje.</li>
                            </ul>

                            <div class="article-inline-image"
                                style="max-width:none; width:100%; display:flex; flex-wrap:wrap; gap:1.5rem; align-items:flex-start; margin:0 0 1.5rem;">
                                <div style="flex:1 1 320px; max-width:480px;">
                                    <img src="/assets/images/blog/2025-11-18-dojemanje-casa-tocnosti-discipline/2.png"
                                        alt="Druženje ob kavi" loading="lazy" style="width: 100%; height: auto;">
                                </div>
                                <p style="flex:1 1 320px; margin:0;">Pri disciplini starši in učitelji običajno kombinirajo
                                    avtoriteto in osebni odnos. Pravila so pomembna, a izjeme so sprejemljive, če za njimi
                                    stoji človeški razlog. Prav te razlike pogosto povzročijo nesporazume, ko se družine iz
                                    juga preselijo v bolj strukturirana okolja na severu.</p>
                            </div>
                            <p>➡️ V praksi v razredu to pomeni:</p>
                            <ul>
                                <li>zamuda na Balkanu se ne dojema kot nespoštovanje,</li>
                                <li>pri delu je več spontanosti, manj minute-natančne točnosti,</li>
                                <li>disciplina temelji na odnosu, ne na pravilih samih.</li>
                            </ul>

                            <h2>Slovenija – med sproščenostjo in strukturiranostjo</h2>

                            <p>Slovenija stoji na prehodu med balkansko fleksibilnostjo in srednjeevropskim redom. Čas in
                                točnost se cenita kot znak odgovornosti, vendar ostaja prostor za človeški faktor.</p>
                            <p>Zamuda je pogosto razumljena kot neprofesionalna, a ob razlagi sprejemljiva. Disciplino
                                oblikuje kombinacija formalnih pravil in osebnega odnosa — pravila veljajo, a s pogovorom
                                se vedno najde rešitev.</p>

                            <div class="article-inline-image float-left">
                                <img src="/assets/images/blog/2025-11-18-dojemanje-casa-tocnosti-discipline/3.png"
                                    alt="Pogovor in sodelovanje" loading="lazy">
                            </div>

                            <p>➡️ V praksi:</p>
                            <ul>
                                <li>učitelji in starši se trudijo biti točni,</li>
                                <li>razumejo pa, da življenje ni vedno predvidljivo,</li>
                                <li>disciplina temelji na sodelovanju in spoštovanju.</li>
                            </ul>

                            <h2>Srednja Evropa – čas kot obljuba in zanesljivost</h2>

                            <p>V srednji in severni Evropi je čas razumljen linearno in natančno, pogosto pravijo: »čas je
                                denar«. Če je srečanje ob 8.00, to pomeni ob 8.00. Točnost je izraz spoštovanja,
                                zanesljivosti in profesionalnosti. Zamuda, tudi majhna, se lahko razume kot motnja
                                sistema. Pravila in roki se dosledno spoštujejo, saj zagotavljajo pravičnost in
                                predvidljivost. Disciplina je visoka, otroci pa se zgodaj učijo samostojnosti in
                                načrtovanja.</p>

                            <div class="article-inline-image float-right">
                                <img src="/assets/images/blog/2025-11-18-dojemanje-casa-tocnosti-discipline/4.png"
                                    alt="Čas in natančnost" loading="lazy">
                            </div>

                            <p>➡️ V praksi:</p>
                            <ul>
                                <li>dejavnosti se začnejo točno ob uri,</li>
                                <li>roki so obvezujoči,</li>
                                <li>red in struktura sta osnovni vrednoti.</li>
                            </ul>

                            <h2>Zaključek</h2>

                            <div class="article-inline-image float-left">
                                <img src="/assets/images/blog/2025-11-18-dojemanje-casa-tocnosti-discipline/5.png"
                                    alt="Sodelovanje in razumevanje" loading="lazy">
                            </div>

                            <p>Če pogledamo »zemljevid časa« od juga proti severu, vidimo prehod od prilagodljivosti do
                                poudarjene načrtnosti. Razumevanje teh razlik pomaga učiteljem, staršem in učencem
                                zmanjšati nesporazume:</p>
                            <ul>
                                <li>zamuda ni vedno znak nespoštovanja,</li>
                                <li>stroga disciplina ni nujno hladna,</li>
                                <li>toplina juga in zanesljivost severa lahko odlično sobivata v istem razredu.</li>
                            </ul>
                            <p>Pomembno je dodati, da so opisane značilnosti splošna opažanja iz prakse in številnih
                                pogovorov z ljudmi različnih okolij. Ne veljajo za vse in niso pravilo — vsaka družina,
                                posameznik in razred svojo zgodbo piše po svoje.</p>
                            <p>Če se pri svojem delu srečujete z bolj zapletenimi medkulturnimi izzivi ali situacijami, ste
                                vabljeni, da nam pišete preko kontaktnega obrazca. Z veseljem bomo skupaj pogledali vaš
                                primer in poiskali primerne poti ali rešitve.</p>
                        </div>
                    </article>
                </div>

                <aside class="blog-sidebar" data-aos="fade-up" data-aos-delay="150">
                    <div class="sidebar-card">
                        <h3>Povezane teme</h3>
                        <div class="sidebar-links">
                            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/">Medkulturno posredovanje</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Delavnica: Šola in starši
                                priseljenci</a>
                            <a href="/blog/">Vsi članki</a>
                        </div>
                    </div>
                    <div class="sidebar-card">
                        <h3>Potrebujete pomoč?</h3>
                        <p class="sidebar-card-text">Stopite v stik za podporo pri medkulturnem razumevanju</p>
                        <a class="cta-button" href="/kontakt/">Kontaktirajte nas</a>
                    </div>
                </aside>
            </div>
        </section>
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
            <div class="final-cta-content" data-aos="fade-up">
                <h2>Imaš vprašanje? Pokliči ali piši!</h2>
                <div class="final-cta-buttons">
                    <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                    <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
                </div>
                <p>Skupaj ustvarimo prostor za učenje in povezovanje.</p>
            </div>
        </section>
    </main>
    <footer>
        <div class="footer-content">
            <div class="footer-logo">
                <h3>PROSBERRY</h3>
            </div>
            <div class="footer-links">
                <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
            </div>
            <div class="footer-contact">
                <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
                <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
            </div>
        </div>
    </footer>
    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
</body>

</html>
"""


"./blog/clanki/2025-12-21-od-ucilnice-do-skupnosti.html" : 
"""
<!-- {
  "title": "Od učilnice do skupnosti: skrivnost uspešnega vključevanja",
  "date": "2025-12-21",
  "image": "/assets/images/blog/2025-12-21-od-ucilnice-do-skupnosti/header.png",
  "summary": "Vse več slovenskih šol se sooča z realnostjo, da slovenščina za številne učence ni materni jezik. To prinaša izzive, pa tudi priložnosti – za učenje, razumevanje in gradnjo vključujoče skupnosti."
} -->
<!DOCTYPE html>
<html lang="sl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Od učilnice do skupnosti: skrivnost uspešnega vključevanja | Prosberry</title>
    <meta name="description"
        content="Vse več slovenskih šol se sooča z realnostjo, da slovenščina za številne učence ni materni jezik. Spoznajte izzive in rešitve pri vključevanju priseljencev.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/animations.css">
    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>

<body>
    <!-- Header bo vstavljen avtomatsko preko posodobi_blog.sh -->
    <main>
        <section class="contact-hero blog-hero">
            <div class="contact-hero-content" data-aos="fade-up">
                <span class="contact-hero-kicker">21. december 2025</span>
                <h1>Od učilnice do skupnosti: skrivnost uspešnega vključevanja</h1>
            </div>
            <div class="contact-hero-shape shape-a"></div>
            <div class="contact-hero-shape shape-b"></div>
            <div class="contact-hero-shape shape-c"></div>
            <div class="contact-hero-shape shape-d"></div>
        </section>

        <section class="blog-content">
            <div class="blog-layout-wrapper">
                <div class="blog-main-column">
                    <article class="blog-article-content" data-aos="fade-up">
                        <div class="article-body-text">
                            
                            <div class="article-inline-image float-right">
                                <img src="/assets/images/blog/2025-12-21-od-ucilnice-do-skupnosti/1.png"
                                    alt="Otroci v šoli" loading="lazy">
                            </div>

                            <p>Vse več slovenskih šol se sooča z realnostjo, da slovenščina za številne učence ni materni jezik. To prinaša izzive, pa tudi priložnosti – za učenje, razumevanje in gradnjo vključujoče skupnosti.</p>
                            
                            <p>To tematiko je nedavno osvetlil tudi prispevek portala 24ur, posnet na Osnovni šoli Livada v Ljubljani, kjer velik delež učencev prihaja iz jezikovno in kulturno različnih okolij. V prispevku z video posnetkom o izzivih in rešitvah spregovorijo ravnatelj, učiteljica slovenščine in tudi jaz, ki poleg poučevanja angleščine pomagam z medkulturnim posredovanjem med šolo in starši.</p>

                            <h2>Od besed do zaupanja</h2>

                            <div class="article-inline-image float-right">
                                <img src="/assets/images/blog/2025-12-21-od-ucilnice-do-skupnosti/2.png"
                                    alt="Namen je spodbuda otroka" loading="lazy">
                            </div>

                            <p>V večjezičnem šolskem okolju je poučevanje jezika veliko več kot učenje slovnice in besedišča. Gre za:</p>
                            <ul>
                                <li>razumevanje šolskega sistema,</li>
                                <li>vzpostavljanje zaupanja s starši, ki so ob prihodu v neznano okolje pogosto zadržani in polni skrbi,</li>
                                <li>prepoznavanje kulturnih razlik v komunikaciji,</li>
                                <li>ustvarjanje prostora, kjer se otrok lahko počuti varno in sprejeto.</li>
                            </ul>

                            <p>Pri povezovanju šole in družin učencev gre za razumevanje ne le besed, ampak tudi pričakovanj, navad in načinov sodelovanja. Namen je, da s skupnimi močmi in razumevanjem spodbudimo otroka k napredku ter ga podpremo pri uresničevanju svojega polnega potenciala.</p>

                            <h2>Medkulturno posredovanje kot strokovna praksa</h2>

                            <div class="article-inline-image float-right">
                                <img src="/assets/images/blog/2025-12-21-od-ucilnice-do-skupnosti/3.png"
                                    alt="Rezultati pri otroku" loading="lazy">
                            </div>

                            <p>Izkušnje iz šolskega prostora so neposredno povezane z mojim delom pri PROSBERRY, samostojni dejavnosti, v okviru katere ponujam:</p>
                            <ul>
                                <li>medkulturno posredovanje,</li>
                                <li>delavnice za vključevanje otrok in družin iz različnih kulturnih okolij,</li>
                                <li>podporo vzgojno-izobraževalnim ustanovam in organizacijam, ki se srečujejo z večjezičnostjo in raznolikostjo.</li>
                            </ul>
                            
                            <p>Kar se dogaja v razredu, se namreč ne konča pri šolskih vratih. Vključevanje je proces, ki zadeva celotno skupnost. Največji rezultat se pokaže, ko opazimo spremembo pri otroku: napredek, večjo neodvisnost in suverenost v izražanju – v igri, na treningu, v trgovini ali na avtobusu.</p>

                            <h2>Glavni izzivi v šolah in vrtcih</h2>

                            <div class="article-inline-image float-right">
                                <img src="/assets/images/blog/2025-12-21-od-ucilnice-do-skupnosti/4.png"
                                    alt="Pomanjkljiva angažiranost" loading="lazy">
                            </div>

                            <p>Na podlagi kratke raziskave o izzivih pri vključevanju priseljencev v slovenski izobraževalni sistem, ki sem jo nedavno izvedla med šolami in vrtci po Sloveniji, so se kot glavni izzivi pokazali naslednji:</p>
                            <ul>
                                <li>Slaba motivacija za učenje jezika ovira napredek in vključevanje učencev.</li>
                                <li>Pomanjkljiva angažiranost učencev priseljencev za šolsko delo vpliva na njihov napredek, otežuje doseganje učnih in vzgojnih standardov ter lahko znižuje povprečje v razredu. To predstavlja izziv za kakovost izobraževanja.</li>
                                <li>Pomankanje ustrezne psihosocialne podpore v učnem in vzgojnem okolju otežuje ustvarjanje bolj vključujočega občutka in povezovanje znotraj skupine.</li>
                                <li>Nezadostno vključevanje staršev v proces učenja ter pomanjkljiva odzivnost na obvestila in govorilne ure otežujeta sodelovanje s šolo.</li>
                                <li>Težave vzgojiteljev in učiteljev pri komunikaciji s starši se pogosto pojavljajo zaradi kulturnih razlik ali nerazumevanja. Pomanjkanje medkulturnega posredovanja dodatno otežuje sodelovanje in vzajemno razumevanje.</li>
                            </ul>

                            <p>Če se tudi vi srečujete z zgoraj omenjenimi izzivi, vas vabimo, da stopite v stik z nami in skupaj poiščemo ustrezne rešitve ali si ogledate naše podporne storitve:</p>
                            <ul>
                                <li><a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/">Medkulturno posredovanje – Prosberry</a></li>
                                <li><a href="/delavnice/">Delavnice – Prosberry</a></li>
                            </ul>

                            <h2>Zakaj je pomembno govoriti o tem</h2>

                            <div class="article-inline-image" style="max-width: 100%; margin: 2rem 0; text-align: center; float: none;">
                                <img src="/assets/images/blog/2025-12-21-od-ucilnice-do-skupnosti/5.png"
                                    alt="Soočanje z izzivi" loading="lazy" style="display: inline-block; width: 100%; max-width: 600px;">
                            </div>

                            <p>Prispevki, kot je ta, odpirajo prostor za razmislek o tem, kako kot družba odgovarjamo na raznolikost. Medkulturno posredovanje ni dodatek, temveč nujna kompetenca sodobnega izobraževanja in dela z ljudmi. Če se z vključevanjem soočamo odgovorno in pravočasno, preprečimo izzive, ki kasneje lahko izbruhnejo zaradi nevključenosti.</p>
                            
                            <p>📺 Prispevek portala 24ur z video posnetkom si lahko ogledate tukaj:<br>
                                👉 <a href="https://www.24ur.com/novice/slovenija/ko-slovenscina-ni-materni-jezik-izzivi-in-resitve-na-os-livada.html" target="_blank" rel="noopener">OŠ Livada – Ko slovenščina ni materni jezik</a></p>

                            <p>Če vas zanima, kako te izzive lahko obravnavamo neposredno z otroki in starši v razredu ali skupini vrtca, si oglejte prispevek: <a href="/blog/clanki/2025-11-17-medkulturnost-prostor-za-rast.html">Medkulturnost: prostor za rast v razredih in skupinah vrtca | Prosberry</a> – praktični nasveti za učitelje in vzgojitelje.</p>
                        </div>
                    </article>
                </div>

                <aside class="blog-sidebar">
                    <div class="sidebar-card">
                        <h3>Povezane teme</h3>
                        <div class="sidebar-links">
                            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/">Medkulturno posredovanje</a>
                            <a href="/delavnice/">Pregled delavnic</a>
                            <a href="/blog/">Vsi članki</a>
                        </div>
                    </div>
                    <div class="sidebar-card">
                        <h3>Potrebujete pomoč?</h3>
                        <p class="sidebar-card-text">Stopite v stik za podporo pri medkulturnem razumevanju v vaši ustanovi.</p>
                        <a class="cta-button" href="/kontakt/">Kontaktirajte nas</a>
                    </div>
                </aside>
            </div>
        </section>

        <!-- Sekcija z referencami -->
        <section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>

        <section class="final-cta">
            <div class="final-cta-content" data-aos="fade-up">
                <h2>Imaš vprašanje? Pokliči ali piši!</h2>
                <div class="final-cta-buttons">
                    <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                    <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
                </div>
                <p>Skupaj ustvarimo prostor za učenje in povezovanje.</p>
            </div>
        </section>
    </main>

    <!-- Footer bo vstavljen avtomatsko preko posodobi_blog.sh -->
    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
</body>

</html>"""


"./blog/index.html" : 
"""
<!DOCTYPE html>
<html lang="sl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Medkulturni kotiček - Prosberry</title>
    <meta name="description"
        content="Novice, razmisleki in napovedi iz sveta medkulturnega povezovanja in poučevanja angleščine, ki jih z vami deli Prosberry.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="/css/style.css?v=1763500835">
    <link rel="stylesheet" href="/css/animations.css">
    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>

<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" >Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" >Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" class="active">Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>

    <main>
        <section class="contact-hero blog-hero">
            <div class="contact-hero-content" data-aos="fade-up">
                <span class="contact-hero-kicker">Zamisli, razumi, poveži</span>
                <h1>Medkulturni kotiček</h1>
                <p class="contact-hero-lead">Tu zbiramo izkušnje, nasvete in dobre prakse z jezikovnega in medkulturnega področja. Namen je ustvariti prostor srečanja, učenja in navdiha.</p>
            </div>
            <div class="contact-hero-shape shape-a"></div>
            <div class="contact-hero-shape shape-b"></div>
            <div class="contact-hero-shape shape-c"></div>
            <div class="contact-hero-shape shape-d"></div>
        </section>
        <section class="blog-content">
            <div class="blog-layout-wrapper">
                <div class="blog-main-column">
                    <article class="featured-article" data-aos="fade-up">
    <a href="/blog/clanki/2025-12-21-od-ucilnice-do-skupnosti.html">
        <img src="/assets/images/blog/2025-12-21-od-ucilnice-do-skupnosti/header.png" alt="Od učilnice do skupnosti: skrivnost uspešnega vključevanja">
        <div class="featured-article-content">
            <p class="article-date">21. december 2025</p>
            <h2>Od učilnice do skupnosti: skrivnost uspešnega vključevanja</h2>
            <p>Vključevanje je proces, ki zadeva celotno skupnost.</p>
        </div>
    </a>
</article>
                    <div class="recent-articles-grid" data-aos="fade-up" data-aos-delay="100">
                        
<article class="recent-card">
    <a href="/blog/clanki/2025-11-18-dojemanje-casa-tocnosti-discipline.html">
        <img src="/assets/images/blog/2025-11-18-dojemanje-casa-tocnosti-discipline/header.png" alt="Dojemanje časa, točnosti in discipline – od juga proti severu Evrope">
        <h3>Dojemanje časa, točnosti in discipline – od juga proti severu Evrope</h3>
        <p class="article-date">18.11.2025</p>
        <p>Razumevanje kulturnih razlik v dojemanju časa in discipline zmanjšuje nesporazume.</p>
    </a>
</article>
<article class="recent-card">
    <a href="/blog/clanki/2025-11-17-medkulturnost-prostor-za-rast.html">
        <img src="/assets/images/blog/2025-11-17-medkulturnost-prostor-za-rast/header.png" alt="Medkulturnost: prostor za rast v razredih in skupinah vrtca">
        <h3>Medkulturnost: prostor za rast v razredih in skupinah vrtca</h3>
        <p class="article-date">17.11.2025</p>
        <p>V razredih in skupinah vrtca si ustvarimo varen prostor, kjer se otroci iz različnih kultur počutijo vključene.</p>
    </a>
</article>
<article class="recent-card">
    <div class="placeholder-card-content">
        <img src="/assets/images/blog/2025-11-16-prihaja-kmalu/header.png" alt="ANGLEŠČINA, jezik, ki odpira vrata na poti do sebe in sveta">
        <h3>ANGLEŠČINA, jezik, ki odpira vrata na poti do sebe in sveta</h3>
        <p>Prihaja kmalu.</p>
    </div>
</article>
                    </div>
                </div>
                <aside class="blog-sidebar" data-aos="fade-up" data-aos-delay="150">
                    <div class="sidebar-card">
                        <h3>Seznam vsebin</h3>
                        <ul class="older-articles-list">
                            
<li><a href="/blog/clanki/2025-12-21-od-ucilnice-do-skupnosti.html">Od učilnice do skupnosti: skrivnost uspešnega vključevanja</a> - 21.12.2025</li>
<li><a href="/blog/clanki/2025-11-18-dojemanje-casa-tocnosti-discipline.html">Dojemanje časa, točnosti in discipline – od juga proti severu Evrope</a> - 18.11.2025</li>
<li><a href="/blog/clanki/2025-11-17-medkulturnost-prostor-za-rast.html">Medkulturnost: prostor za rast v razredih in skupinah vrtca</a> - 17.11.2025</li>
<li><span>ANGLEŠČINA, jezik, ki odpira vrata na poti do sebe in sveta</span> – Prihaja kmalu.</li>
<li><span>Zakaj nekateri starši delujejo »neodzivno« in kako graditi medkulturno zaupanje?</span> – Prihaja kmalu.</li>
                        </ul>
                    </div>
                    <div class="sidebar-card">
                        <h3>Arhiv</h3>
                        <ul class="archive-list">
                            <!-- Additional archive items if needed -->
                        </ul>
                    </div>
                </aside>
            </div>
        </section>
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
            <div class="final-cta-content" data-aos="fade-up">
                <h2>Imaš vprašanje? Pokliči ali piši!</h2>
                <div class="final-cta-buttons">
                    <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                    <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
                </div>
                <p>Skupaj ustvarimo prostor za učenje in povezovanje.</p>
            </div>
        </section>
    </main>
    <footer>
    <div class="footer-content">
        <div class="footer-logo">
            <h3>PROSBERRY</h3>
        </div>
        <div class="footer-links">
            <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
        </div>
        <div class="footer-contact">
            <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
            <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
        </div>
    </div>
</footer>
    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
</body>

</html>
"""


"./blog/template.html" : 
"""
<!DOCTYPE html>
<html lang="sl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Medkulturni kotiček - Prosberry</title>
    <meta name="description"
        content="Novice, razmisleki in napovedi iz sveta medkulturnega povezovanja in poučevanja angleščine, ki jih z vami deli Prosberry.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="/css/style.css?v=1763500835">
    <link rel="stylesheet" href="/css/animations.css">
    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>

<body>
    __HEADER_CONTENT__
    <main>
        <section class="contact-hero blog-hero">
            <div class="contact-hero-content" data-aos="fade-up">
                <span class="contact-hero-kicker">Zamisli, razumi, poveži</span>
                <h1>Medkulturni kotiček</h1>
                <p class="contact-hero-lead">__BLOG_LEAD__</p>
            </div>
            <div class="contact-hero-shape shape-a"></div>
            <div class="contact-hero-shape shape-b"></div>
            <div class="contact-hero-shape shape-c"></div>
            <div class="contact-hero-shape shape-d"></div>
        </section>
        <section class="blog-content">
            <div class="blog-layout-wrapper">
                <div class="blog-main-column">
                    __NAJNOVEJSI_CLANEK__
                    <div class="recent-articles-grid" data-aos="fade-up" data-aos-delay="100">
                        __CAKAJOCI_CLANKI__
                    </div>
                </div>
                <aside class="blog-sidebar" data-aos="fade-up" data-aos-delay="150">
                    <div class="sidebar-card">
                        <h3>__ARCHIVE_HEADING__</h3>
                        <ul class="older-articles-list">
                            __ARHIV_SEZNAM__
                        </ul>
                    </div>
                    <div class="sidebar-card">
                        <h3>Arhiv</h3>
                        <ul class="archive-list">
                            <!-- Additional archive items if needed -->
                        </ul>
                    </div>
                </aside>
            </div>
        </section>
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
            <div class="final-cta-content" data-aos="fade-up">
                <h2>Imaš vprašanje? Pokliči ali piši!</h2>
                <div class="final-cta-buttons">
                    <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                    <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
                </div>
                <p>Skupaj ustvarimo prostor za učenje in povezovanje.</p>
            </div>
        </section>
    </main>
    __FOOTER_CONTENT__
    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
</body>

</html>
"""


"./cene-in-reference/index.html" : 
"""
<!DOCTYPE html>
<html lang="sl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cene in reference - Prosberry</title>
    <meta name="description"
        content="Pregled cen storitev Prosberry za tečaje angleščine, albanščine in slovenščine ter medkulturno posredovanje. Preberite reference zadovoljnih strank in spoznajte strokovnost Amre Kurešepi Zulji.">
    <meta name="keywords"
        content="cene, cenik, reference, mnenja strank, tečaji angleščine, medkulturno posredovanje, Prosberry, Amra Kurešepi Zulji">
    <meta name="author" content="Amra Kurešepi Zulji">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://unpkg.com">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link rel="dns-prefetch" href="https://unpkg.com">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/animations.css">

    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>

<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" >Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" class="active">Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" >Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>

    <main>
        <section class="rates-hero">
            <div class="rates-hero-container">
                <div class="rates-hero-text" data-aos="fade-up">
                    <span class="rates-hero-kicker">Cene in reference</span>
                    <h1>C E N I K</h1>
                    <p class="rates-hero-lead">Cene za učno uro tečaja ali inštrukcij</p>
                </div>
                <div class="rates-hero-card" data-aos="fade-left" data-aos-delay="120">
                    <h3>Cene za medkulturno posredovanje</h3>
                    <ul class="rates-hero-list">
                        <li>
                            <strong>30 €</strong>
                            <span class="rates-hero-separator">&ndash;</span>
                            <span>30 min</span>
                        </li>
                        <li>
                            <strong>50 €</strong>
                            <span class="rates-hero-separator">&ndash;</span>
                            <span>60 min</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="rates-hero-shape shape-a"></div>
            <div class="rates-hero-shape shape-b"></div>
            <div class="rates-hero-shape shape-c"></div>
        </section>

        <section class="rates-pricing">
            <div class="rates-pricing-container">
                <div class="rates-section" data-theme="teaching">
                    <div class="rates-section-header" data-aos="fade-up">
                        <h2>Cene za učno uro tečaja ali inštrukcij</h2>
                    </div>
                    <div class="rates-card-grid">
                        <article class="rates-card" data-aos="fade-up" data-aos-delay="80">
                            <div class="rates-card-value">8 - 10 €</div>
                            <h3>v skupini</h3>
                            <ul>
                                <li>4 - 6 udeležencev - 10 €</li>
                                <li>7 - 15 udeležencev - 8 €</li>
                            </ul>
                        </article>
                        <article class="rates-card" data-aos="fade-up" data-aos-delay="140">
                            <div class="rates-card-value">15 - 20 €</div>
                            <h3>v paru</h3>
                            <ul>
                                <li>učenci in dijaki - 15 €</li>
                                <li>odrasli - 20 €</li>
                            </ul>
                        </article>
                        <article class="rates-card" data-aos="fade-up" data-aos-delay="200">
                            <div class="rates-card-value">25 - 30 €</div>
                            <h3>individualno</h3>
                            <ul>
                                <li>učenci in dijaki - 25 €</li>
                                <li>odrasli - 30 €</li>
                            </ul>
                        </article>
                    </div>
                    <div class="rates-section-shape shape-d"></div>
                </div>
            </div>
        </section>

        <section class="rates-testimonials">
            <div class="rates-testimonials-container">
                <div class="rates-testimonials-header" data-aos="fade-up">
                    <h2>R E F E R E N C E</h2>
                    <h3>Kaj pravijo meni/o meni...</h3>
                </div>
                <div class="rates-testimonial-grid">
                    <article id="reference-janez" class="rates-testimonial-card" data-accent="sunrise" data-aos="fade-up"
                        data-aos-delay="120">
                        <div class="rates-testimonial-text">
                            <div class="rates-testimonial-full">
                                <p>V veliko veselje mi je nekaj malega napisati o Amri Kurešepi Zulji za njeno spletno stran v
                                    okencu 'kaj pravijo o meni'.</p>
                                <p>Amra je prišla v Ljubljano iz Prištine in tu nadaljevala študij angleščine na
                                    bolonjski magistrski stopnji. Poleg predanega magistrskega študija se je ves čas
                                    tudi zelo intenzivno učila slovenščine. Ves čas študija je kazala iskren interes in
                                    zavzetost za poučevanje, hkrati pa tudi zadostno mero kritičnosti do sebe in drugih.
                                    Amra je sprva morda delovala plaho (verjetno zaradi velikih življenjskih sprememb),
                                    vendar se je hitro sprostila in lepo vključila v razred. K dobremu delu skupine je
                                    prispevala s tem, da je bila pripravljena prevzeti pobudo; natančnost, vztrajnost in
                                    zdrava samozavest pa so ji zagotavljaje uspeh v razredu.</p>
                                <p>Pod mojim mentorstvom je uspešno opravila pedagoško prakso na OŠ Hinka Smrekarja, v
                                    času študija smo skupaj opravili veliko hospitacij po različnih srednjih in osnovnih
                                    šolah v Ljubljani, svoj izpitni nastop pa je opravljala na Gimnaziji Bežigrad.
                                    Oktobra 2019 je pod mojim mentorstvom študij zaključila z magistrskim delom z
                                    naslovom "Factors that Influence the Process of Learning Foreign Languages and Some
                                    Potential Effects of Multilingualism" (Dejavniki, ki vplivajo na proces učenja tujih
                                    jezikov in nekaj morebitnih učinkov večjezičnosti).</p>
                                <p>V luči mojega osebnega poznavanja kolegice Amre Kurešepi Zulji sem prepričan, da lastnosti,
                                    ki jih je izkazovala že med študijem, tj. zavzetost, resnost, odgovornost,
                                    samostojnost in ustvarjalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                            </div>
                        </div>
                        <div class="rates-testimonial-author">
                            <p>red. prof. dr. Janez Skela</p>
                            <p>Vodja Katedre za didaktiko angleščine, Oddelek za anglistiko in amerikanistiko FF UL</p>
                        </div>
                    </article>

                    <article id="reference-mojca" class="rates-testimonial-card" data-accent="dawn" data-aos="fade-up" data-aos-delay="200">
                        <div class="rates-testimonial-text">
                            <p>Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleščine. Res
                                čutim, da sem na pravi poti in želim od tega tečaja odnesit max. Me je pa treba
                                priganjati in ti počneš to zelo prijazno in profesionalno, za kar sem ti neskočno
                                hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.
                            </p>
                        </div>
                        <div class="rates-testimonial-author">
                            <p>Mojca Triller</p>
                            <p>Predstavnik klicnega centra</p>
                        </div>
                    </article>

                    <article id="reference-barbara" class="rates-testimonial-card" data-accent="sunrise" data-aos="fade-up"
                        data-aos-delay="280">
                        <div class="rates-testimonial-text">
                            <div class="rates-testimonial-full">
                                <p>Na osnovni šoli, kjer sem zaposlena kot svetovalna delavka imamo tudi kar nekaj otrok
                                    iz Kosova. Sodelovanje s temi družinami je poseben izziv, zaradi jezikovnih in tudi
                                    medkulturnih razlik. Večina staršev naših albanskih otrok ne govori slovensko, niti
                                    angleško, tako da je bila Amra Kurešepi Zulji izjemno v pomoč pri prevajanju na sestankih
                                    s temi družinami.</p>
                                <p>Z današnjo tehnologijo si s prevajalnikom sicer lahko prevedemo osnovne informacije,
                                    za bolj kočljive teme pa je pogovor v živo neprecenljiv. Kadar gre za teme, ki so za
                                    starše bolj čustvene (kot so otrokove težave s sošolci ali učne težave, medvrstniško
                                    izključevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je
                                    sporočilo pravilno posredovano in informacije niso izgubljene s prevodom.</p>
                                <p>Amra se je izkazala kot odlična prevajalka prav v teh situacijah, saj je sama tudi
                                    učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter
                                    tekoče govori oba jezika. Poleg tega Amra je po mojem mnenju po naravi mirna in
                                    spoštljiva, ter se trudi razumeti in objektivno predati sliko obeh strank v
                                    pogovoru. Vsekakor priporočam njeno pomoč.</p>
                            </div>
                        </div>
                        <div class="rates-testimonial-author">
                            <p>Barbara Vodopivec, univ. dipl. socialna pedagoginja in sistemska psihoterapevtka</p>
                            <p>Svetovalna delavka v OŠ Livada, Ljubljana</p>
                        </div>
                    </article>
                </div>
                <div class="rates-testimonials-shape shape-e"></div>
            </div>
        </section>
        <section class="final-cta">
            <div class="final-cta-content" data-aos="fade-up">
                <h2>Imaš vprašanje? Pokliči ali piši!</h2>
                <div class="final-cta-buttons">
                    <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                    <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
                </div>
                <p>Skupaj ustvariva prostor za učenje in povezovanje.</p>
            </div>
        </section>

    </main>

    <footer>
        <div class="footer-content">
            <div class="footer-logo">
                <h3>PROSBERRY</h3>
            </div>
            <div class="footer-links">
                <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
            </div>
            <div class="footer-contact">
                <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
                <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
            </div>
        </div>
    </footer>

    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
    <script>
        (function () {
            function scrollToHash(hash) {
                if (!hash) return;
                var target = document.querySelector(hash);
                if (!target) return;
                var offset = 100;
                var top = target.getBoundingClientRect().top + window.scrollY - offset;
                window.scrollTo({ top: top, behavior: 'smooth' });
            }

            window.addEventListener('load', function () {
                if (window.location.hash) {
                    setTimeout(function () { scrollToHash(window.location.hash); }, 200);
                }
            });
        })();
    </script>
</body>

</html>
"""


"./cene-in-sodelovanja/index.html" : 
"""
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cene in sodelovanja - Prosberry</title>
    <meta name="description" content="Za informacije o cenah storitev Prosberry in možnostih sodelovanja nas kontaktirajte. Nudimo tečaje angleščine, medkulturno posredovanje in delavnice.">
    <meta name="keywords" content="cene, sodelovanje, Prosberry, tečaji angleščine, medkulturno posredovanje, delavnice, cenik">
    <meta name="author" content="Amra Kurešepi Zulji">
    <link rel="canonical" href="https://www.prosberry.si/cene-in-sodelovanja/">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://unpkg.com">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link rel="dns-prefetch" href="https://unpkg.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/animations.css">

    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>
<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" >Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" class="active">Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" >Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>



    <main>
        <section class="pricing-hero">
            <div class="pricing-content">
                <h1 data-aos="fade-up">Cene in sodelovanja</h1>
                <p class="pricing-intro" data-aos="fade-up" data-aos-delay="100">Za informacije o cenah nas kontaktirajte.</p>
                <a href="/kontakt" class="cta-button" data-aos="fade-up" data-aos-delay="200">Stopite v stik</a>
            </div>
        </section>
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
        <div class="final-cta-content" data-aos="fade-up">
            <h2>Imaš vprašanje? Pokliči ali piši!</h2>
            <div class="final-cta-buttons">
                <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
            </div>
            <p>Skupaj ustvariva prostor za učenje in povezovanje.</p>
        </div>
    </section>

</main>

<footer>
    <div class="footer-content">
        <div class="footer-logo">
            <h3>PROSBERRY</h3>
        </div>
        <div class="footer-links">
            <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
        </div>
        <div class="footer-contact">
            <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
            <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
        </div>
    </div>
</footer>

    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
</body>
</html> 
"""


"./clarification_questions.md" : 
"""
I am waiting for your answers to the following clarification questions regarding the blog feature specification:

## Question 1: `jq` Dependency Handling

**Context**:
```markdown
- What happens when `jq` is not installed on the system where `posodobi_blog.sh` is run? The script should ideally check for `jq` and provide a user-friendly error message if it's missing. [NEEDS CLARIFICATION: Should the script check for `jq` and exit with an error if not found, or assume `jq` is always available?]
```
**What we need to know**: Should the `posodobi_blog.sh` script explicitly check for the presence of `jq` and handle its absence?

**Suggested Answers**:

| Option | Answer | Implications |
|--------|--------|--------------|
| A      | **Check for `jq` and exit with an error if not found.** | The script will be more robust and provide clear feedback to the user if `jq` is missing. This adds a small amount of complexity to the script. |
| B      | **Assume `jq` is always available.** | The script will be simpler, but might fail with cryptic errors if `jq` is not installed, requiring manual debugging. |

**Your choice**: _[Please respond with A or B]_

## Question 2: Malformed JSON Metadata Handling

**Context**:
```markdown
- How does the system handle malformed JSON metadata in an article file? The script should ideally skip the problematic article and log an error, rather than failing entirely. [NEEDS CLARIFICATION: Should malformed JSON cause the script to fail or skip the article with a warning?]
```
**What we need to know**: How should the `posodobi_blog.sh` script behave if it encounters malformed JSON metadata in an article file?

**Suggested Answers**:

| Option | Answer | Implications |
|--------|--------|--------------|
| A      | **Skip the problematic article and log a warning.** | The script will continue processing other articles, ensuring the blog is mostly updated. The user will be informed about the issue with the specific article. |
| B      | **Fail the script entirely.** | The script will stop execution, forcing the user to fix the malformed JSON before any blog updates can proceed. This ensures data integrity but might be less user-friendly. |

**Your choice**: _[Please respond with A or B]_

## Question 3: Invalid Article Filename Convention

**Context**:
```markdown
- What happens if an article file does not follow the `YYYY-MM-DD-` naming convention? The script should ideally ignore such files or log a warning.
```
**What we need to know**: How should the `posodobi_blog.sh` script handle article files that do not adhere to the `YYYY-MM-DD-` naming convention?

**Suggested Answers**:

| Option | Answer | Implications |
|--------|--------|--------------|
| A      | **Ignore such files and log a warning.** | The script will only process correctly named article files, and the user will be informed about any files that were skipped. This allows for flexibility but might hide issues if the user expects all files to be processed. |
| B      | **Fail the script entirely.** | The script will stop execution, forcing the user to rename incorrectly named files. This ensures strict adherence to the naming convention but might be less user-friendly. |

**Your choice**: _[Please respond with A or B]_
"""


"./css/style.css" : 
"""
:root {
  --primary-color: #fb6339;
  --text-color: #000000;
  --bg-color: #ffffff;
  --light-bg: #f9f9f9;
  --transition: all 0.3s ease
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html {
  height: auto !important;
  min-height: 100vh;
}

body {
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background: var(--bg-color);
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100vh;
}

body.no-scroll {
  overflow: hidden
}

.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 94px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center
}

.nav-container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center
}

.logo {
  display: flex;
  align-items: center
}

.logo a {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  text-decoration: none;
  letter-spacing: 1px
}

.logo img {
  height: calc(50px + 2rem - 10px);
  width: auto;
  margin: 0;
  display: block
}

.nav-links {
  display: flex;
  align-items: center;
  /* Naj zasede ves preostali prostor v vrstici */
  flex: 1;
  /* Enakomerno porazdeli prostor med elementi in okoli njih */
  justify-content: space-evenly;
  /* Fiksni odmik med Logotipom in "Naslovnico" */
  margin-left: 3rem;
  gap: 1rem
}

.nav-links a {
  color: var(--text-color);
  text-decoration: none;
  margin-left: 0;
  font-weight: 500;
  transition: var(--transition);
  padding: 0.5rem 0;
  /* Prepreči lomljenje besedila v novo vrstico */
  white-space: nowrap
}

.nav-links a:hover,
.nav-links a.active,
.dropbtn.active {
  color: var(--primary-color)
}

.nav-links>a:first-of-type,
.nav-links>.dropdown:first-of-type {
  margin-left: 0 !important
}

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer
}

.mobile-menu-btn span {
  width: 30px;
  height: 2px;
  background: var(--text-color);
  transition: var(--transition)
}

.hero {
  padding: 120px 2rem 60px;
  background: linear-gradient(135deg, rgba(251, 99, 57, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  min-height: 100vh;
  display: flex;
  align-items: center
}

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center
}

.hero-text {
  max-width: 600px
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 2rem;
  color: var(--text-color)
}

.hero h2 {
  color: var(--primary-color);
  margin-bottom: 1rem
}

.hero-image {
  display: flex;
  justify-content: center;
  align-items: center
}

.hero-image img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
  transition: var(--transition)
}

.hero-image img:hover {
  transform: translateY(-10px);
  filter: drop-shadow(0 20px 30px rgba(251, 99, 57, 0.2))
}

.pros-berry-explanation {
  margin: 2rem 0;
  padding: 2rem;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1)
}

.cta-button {
  display: inline-block;
  padding: 1rem 2rem;
  background: var(--primary-color);
  color: white;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 500;
  transition: var(--transition);
  margin-top: 2rem
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(251, 99, 57, 0.4)
}

.services {
  padding: 80px 2rem;
  background: white
}

.services h2 {
  text-align: center;
  margin-bottom: 3rem;
  color: var(--text-color)
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto
}

.service-card {
  padding: 2rem;
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: var(--transition);
  text-align: center
}

.service-card:hover {
  transform: translateY(-5px)
}

.service-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(251, 99, 57, 0.1);
  border-radius: 50%;
  transition: var(--transition)
}

.service-icon .emoji {
  font-size: 3.5rem;
  transition: var(--transition)
}

.service-card:hover .service-icon {
  background-color: var(--primary-color)
}

.service-card:hover .service-icon .emoji {
  color: white;
  transform: scale(1.1)
}

.service-card h3 {
  color: var(--primary-color);
  margin-bottom: 1rem
}

.contact-info {
  padding: 60px 2rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(251, 99, 57, 0.1) 0%, rgba(255, 255, 255, 0) 100%)
}

.contact-info a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition)
}

.contact-info a:hover {
  text-decoration: underline
}

footer {
  background: var(--text-color);
  color: var(--bg-color);
  padding: 3rem 2rem
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.footer-logo h3 {
  color: var(--primary-color)
}

.footer-contact a,
.footer-links a {
  color: var(--bg-color);
  text-decoration: none;
  transition: var(--transition)
}

.footer-contact a:hover,
.footer-links a:hover {
  color: var(--primary-color)
}

@media (max-width:992px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem
  }

  .hero-text {
    max-width: 100%;
    text-align: center
  }

  .hero-image {
    order: -1
  }

  .hero-image img {
    max-width: 80%
  }
}

@media (max-width:768px) {
  .logo {
    flex: 1;
    margin-right: auto
  }

  .mobile-menu-btn {
    margin-left: auto
  }

  .nav-container {
    padding: 0 1.25rem
  }

  .nav-links .dropdown {
    width: 100%;
    margin-left: 0
  }

  .nav-links a,
  .nav-links .dropdown .dropbtn {
    margin: 0;
    padding: 0.9rem 1.1rem;
    text-align: left;
    border-radius: 12px;
    font-size: 1rem;
    display: block;
    width: 100%
  }

  .nav-links .dropdown .dropbtn {
    background: rgba(251, 99, 57, 0.08);
    border: none
  }

  .nav-links .dropdown:hover .dropbtn,
  .nav-links .dropdown .dropbtn.active,
  .nav-links a:hover,
  .nav-links a.active {
    background: rgba(251, 99, 57, 0.16)
  }

  .nav-links {
    display: none;
    position: fixed;
    top: 94px;
    left: 0;
    width: 100%;
    height: calc(100vh - 94px);
    background: rgba(255, 255, 255, 0.98);
    padding: 1.5rem 1.25rem 2.2rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(12px);
    overflow-y: auto;
    z-index: 999;
    /* Resetiramo odmik, ki smo ga dodali za desktop */
    margin-left: 0;
    /* Resetiramo poravnavo, ker je tu stolpec */
    justify-content: flex-start
  }

  .nav-links.active {
    display: flex
  }

  .mobile-menu-btn {
    display: flex;
    z-index: 1000
  }

  .mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px)
  }

  .mobile-menu-btn.active span:nth-child(2) {
    opacity: 0
  }

  .mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px)
  }

  .dropdown-content,
  .dropdown-submenu-content {
    position: static;
    display: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    min-width: 100%;
    padding: 0;
    margin: 0.35rem 0 0
  }

  .dropdown-content a {
    padding: 0.8rem 1.1rem;
    border-radius: 10px
  }

  .dropdown-submenu-content {
    margin-left: 0;
    padding: 0.2rem 0 0.8rem;
    border-left: 2px solid rgba(251, 99, 57, 0.2)
  }

  .dropdown-submenu-content a {
    padding-left: 1.6rem
  }

  .hero {
    padding: 100px 1.5rem 40px;
    min-height: auto
  }

  .hero h1 {
    font-size: 2rem;
    margin-bottom: 1.5rem
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem
  }

  .hero-image {
    order: -1
  }

  .hero-image img {
    max-width: 80%
  }

  .services {
    padding: 60px 1.5rem
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem
  }

  .service-card {
    padding: 1.5rem
  }

  section {
    padding: 60px 1.5rem
  }

  h1 {
    font-size: 2rem
  }

  h2 {
    font-size: 1.75rem
  }

  h3 {
    font-size: 1.25rem
  }

  p {
    font-size: 1rem
  }

  .cta-button {
    width: 100%;
    text-align: center;
    padding: 1rem
  }

  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: 2rem
  }

  .logo img {
    height: calc(50px + 2rem - 10px);
    width: auto;
    margin: 0 10px 0 0;
    display: block
  }

  .service-icon {
    width: 120px;
    height: 120px
  }

  .service-icon .emoji {
    font-size: 4rem
  }
}

@media (max-width:480px) {
  .hero h1 {
    font-size: 1.75rem
  }

  .hero-image img {
    max-width: 100%
  }

  .service-card {
    padding: 1.25rem
  }

  .footer-content {
    padding: 2rem 1.5rem
  }

  .service-icon {
    width: 110px;
    height: 110px
  }

  .service-icon .emoji {
    font-size: 3.8rem
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.fade-in {
  animation: fadeIn 0.6s ease forwards
}

.about-hero {
  position: relative;
  padding: 160px 2rem 150px;
  background: #fdfcfa;
  overflow: hidden
}

.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 12% 18%, rgba(251, 99, 57, 0.18) 0%, rgba(251, 99, 57, 0) 55%), radial-gradient(circle at 78% 14%, rgba(255, 210, 190, 0.32) 0%, rgba(255, 210, 190, 0) 60%), radial-gradient(circle at 68% 80%, rgba(200, 230, 255, 0.25) 0%, rgba(200, 230, 255, 0) 60%);
  z-index: 0
}

.about-hero-container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 3rem;
  align-items: center
}

.about-hero-text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}

.about-hero-kicker {
  display: inline-block;
  align-self: flex-start;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(251, 99, 57, 0.14);
  color: var(--primary-color)
}

.about-hero h1 {
  font-size: 3rem;
  line-height: 1.25;
  color: #1f2530;
  margin: 0
}

.about-hero-text p {
  font-size: 1.12rem;
  line-height: 1.9;
  color: #454b57;
  max-width: 65ch;
  text-align: justify
}

.about-hero-image {
  display: flex;
  justify-content: center;
  align-items: flex-end
}

.about-hero-image .image-frame {
  position: relative;
  padding: 0;
  border-radius: 36px;
  background: transparent;
  box-shadow: 0 25px 55px rgba(15, 25, 40, 0.12);
  overflow: hidden
}

.about-hero-image picture,
.about-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px
}

.about-hero-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.55;
  z-index: 1
}

.about-hero .shape-a {
  width: 260px;
  height: 260px;
  background: rgba(251, 99, 57, 0.16);
  top: 18%;
  left: 4%
}

.about-hero .shape-b {
  width: 120px;
  height: 120px;
  border: 2px dotted rgba(251, 99, 57, 0.45);
  top: 24%;
  right: 16%
}

.about-hero .shape-c {
  width: 320px;
  height: 320px;
  background: rgba(254, 219, 204, 0.28);
  bottom: -120px;
  left: 22%
}

.about-hero .shape-d {
  width: 90px;
  height: 90px;
  border: 2px solid rgba(200, 230, 255, 0.45);
  bottom: 12%;
  right: 8%
}

.about-accordion-section {
  background: #ffffff;
  padding: 0 2rem 140px
}

.about-accordion-container {
  max-width: 960px;
  margin: -90px auto 0;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 35px 80px rgba(15, 25, 40, 0.08);
  padding: 3.25rem 3rem;
  position: relative;
  overflow: hidden
}

.about-accordion-container::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(251, 99, 57, 0.16) 0%, rgba(251, 99, 57, 0) 70%);
  top: -120px;
  right: -80px;
  z-index: 0
}

.about-accordion-container>* {
  position: relative;
  z-index: 1
}

.about-accordion-intro {
  text-align: center;
  margin-bottom: 2.5rem
}

.about-accordion-intro p {
  font-size: 1rem;
  color: #5a5f69
}

.about-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem
}

.about-accordion-item {
  border-radius: 18px;
  background: rgba(253, 252, 250, 0.85);
  border: 1px solid rgba(31, 37, 48, 0.06);
  box-shadow: 0 18px 35px rgba(15, 25, 40, 0.07);
  overflow: hidden
}

.about-accordion-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.8rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2530;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.25s ease, color 0.25s ease
}

.about-accordion-toggle span:first-child {
  flex: 1
}

.about-accordion-toggle:focus-visible {
  outline: 2px solid rgba(251, 99, 57, 0.4);
  outline-offset: 4px
}

.about-accordion-toggle[aria-expanded="true"] {
  background: rgba(251, 99, 57, 0.08);
  color: var(--primary-color)
}

.accordion-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(251, 99, 57, 0.45);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  color: var(--primary-color);
  transition: transform 0.25s ease, background 0.25s ease
}

.accordion-icon::after {
  content: "+";
  font-weight: 600
}

.about-accordion-toggle[aria-expanded="true"] .accordion-icon::after {
  content: "–"
}

.about-accordion-toggle[aria-expanded="true"] .accordion-icon {
  background: rgba(251, 99, 57, 0.14)
}

.about-accordion-content p {
  text-align: justify
}

.about-accordion-content {
  padding: 0 1.8rem 1.8rem;
  font-size: 1rem;
  line-height: 1.85;
  color: #4f5562
}

.about-accordion-content p+p {
  margin-top: 1.1rem
}

@media (max-width:992px) {
  .about-hero {
    padding: 130px 1.5rem 130px
  }

  .about-hero-container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center
  }

  .about-hero-text {
    text-align: center;
    align-items: center
  }

  .about-hero-kicker {
    align-self: center
  }

  .about-hero-text p {
    max-width: 48ch
  }

  .about-hero-image .image-frame {
    max-width: min(90%, 420px);
    margin: 0 auto
  }

  .about-accordion-container {
    margin: -60px auto 0;
    padding: 2.8rem 2.4rem
  }
}

@media (max-width:768px) {
  .about-hero {
    padding: 120px 1.25rem 110px
  }

  .about-hero h1 {
    font-size: 2.4rem
  }

  .about-hero-text p {
    font-size: 1.05rem
  }

  .about-hero .shape-a {
    width: 220px;
    height: 220px
  }

  .about-hero .shape-b,
  .about-hero .shape-d {
    display: none
  }

  .about-hero .shape-c {
    width: 260px;
    height: 260px;
    left: 18%
  }

  .about-accordion-container {
    padding: 2.4rem 1.9rem;
    margin: -40px auto 0;
    border-radius: 22px;
    box-shadow: 0 25px 60px rgba(15, 25, 40, 0.08)
  }

  .about-accordion-toggle {
    padding: 1.2rem 1.4rem;
    font-size: 1rem
  }

  .about-accordion-content {
    padding: 0 1.4rem 1.4rem
  }

  .accordion-icon {
    width: 30px;
    height: 30px;
    font-size: 1rem
  }
}

@media (max-width:520px) {
  .about-hero {
    padding: 110px 1rem 100px
  }

  .about-hero h1 {
    font-size: 2.1rem
  }

  .about-hero-text p {
    font-size: 1rem;
    max-width: 100%
  }

  .about-hero-image .image-frame {
    padding: 1rem;
    max-width: 320px
  }

  .about-accordion-container {
    padding: 2.1rem 1.3rem;
    margin: -20px auto 0;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(15, 25, 40, 0.08)
  }

  .about-accordion-toggle {
    padding: 1rem 1.1rem
  }

  .about-hero .shape-a,
  .about-hero .shape-c {
    display: none
  }

  .about-accordion-item {
    border-radius: 14px
  }

  .about-accordion-content {
    font-size: 0.98rem
  }
}

.offer-hero {
  position: relative;
  padding: 160px 2rem 140px;
  background: #fdfcfa;
  overflow: hidden
}

.offer-hero-container {
  position: relative;
  z-index: 2;
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 3.2rem;
  align-items: center
}

.offer-hero-text {
  display: flex;
  flex-direction: column;
  gap: 1.4rem
}

.offer-hero-kicker {
  display: inline-block;
  align-self: flex-start;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(251, 99, 57, 0.14);
  color: var(--primary-color)
}

.offer-hero h1 {
  font-size: 3rem;
  line-height: 1.24;
  color: #1f2530;
  margin: 0
}

.offer-hero-lead {
  font-size: 1.15rem;
  line-height: 1.85;
  color: #454b57;
  max-width: 60ch;
  text-align: justify
}

.offer-hero-chip-group {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap
}

.offer-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.25rem;
  border-radius: 999px;
  background: rgba(255, 210, 190, 0.4);
  color: #1f2530;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(15, 25, 40, 0.12)
}

.offer-chip:nth-child(2) {
  background: rgba(200, 230, 255, 0.45)
}

.offer-hero-card {
  position: relative;
  z-index: 2;
  padding: 2.2rem 2.4rem;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 26px;
  box-shadow: 0 28px 70px rgba(15, 25, 40, 0.12);
  border-left: 5px solid var(--primary-color)
}

.offer-hero-card h3 {
  font-size: 1.2rem;
  margin-bottom: 1.2rem;
  color: var(--primary-color)
}

.offer-hero-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.85rem
}

.offer-hero-card li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  line-height: 1.6;
  color: #3f4551
}

.offer-hero-card li::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary-color);
  margin-top: 0.35rem
}

.offer-hero-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6
}

.offer-hero .shape-a {
  width: 320px;
  height: 320px;
  background: rgba(251, 99, 57, 0.18);
  top: 12%;
  left: -8%
}

.offer-hero .shape-b {
  width: 200px;
  height: 200px;
  background: rgba(255, 210, 190, 0.32);
  bottom: 18%;
  right: 12%
}

.offer-hero .shape-c {
  width: 440px;
  height: 440px;
  background: rgba(200, 230, 255, 0.28);
  bottom: -160px;
  left: 22%
}

.offer-services {
  background: #ffffff;
  padding: 0 2rem 150px
}

.offer-services-container {
  position: relative;
  max-width: 1120px;
  margin: -110px auto 0;
  background: #ffffff;
  border-radius: 34px;
  box-shadow: 0 45px 90px rgba(15, 25, 40, 0.1);
  padding: 3.6rem 3.2rem;
  display: flex;
  flex-direction: column;
  gap: 3.6rem;
  overflow: hidden
}

.offer-section {
  position: relative;
  padding: 2.9rem 2.4rem;
  border-radius: 30px;
  background: rgba(253, 252, 250, 0.86);
  box-shadow: 0 20px 55px rgba(15, 25, 40, 0.08)
}

.offer-section[data-theme="teaching"] {
  background: linear-gradient(135deg, rgba(251, 99, 57, 0.12), rgba(255, 210, 190, 0.26))
}

.offer-section[data-theme="mediation"] {
  background: linear-gradient(135deg, rgba(200, 230, 255, 0.18), rgba(251, 99, 57, 0.12))
}

.offer-section-header h2 {
  font-size: 2.2rem;
  margin: 0 0 2rem;
  color: #1f2530
}

.offer-languages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.8rem;
  position: relative;
  z-index: 2
}

.offer-language-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  padding: 1.8rem 1.6rem;
  box-shadow: 0 25px 55px rgba(15, 25, 40, 0.08);
  border: 1px solid rgba(31, 37, 48, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.offer-language-header h3 {
  margin: 0;
  font-size: 1.3rem;
  color: var(--primary-color)
}

.offer-language-card p,
.offer-language-card ul {
  margin: 0
}

.offer-language-card p {
  color: #4f5562;
  line-height: 1.65;
  text-align: justify
}

.offer-language-card ul {
  padding-left: 1.2rem;
  display: grid;
  gap: 0.55rem;
  color: #3f4551;
  line-height: 1.6
}

.offer-section-shape {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  filter: blur(0);
  z-index: 1
}

.offer-section[data-theme="teaching"] .shape-d {
  top: -110px;
  right: -80px;
  background: rgba(251, 99, 57, 0.22)
}

.offer-section[data-theme="mediation"] .shape-e {
  bottom: -130px;
  left: -90px;
  background: rgba(200, 230, 255, 0.26)
}

.offer-mediation {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 2.4rem
}

.offer-mediation-text p {
  color: #454b57;
  line-height: 1.8;
  text-align: justify
}

.offer-mediation-text p+p {
  margin-top: 1rem
}

.offer-mediation-list {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 20px;
  padding: 1.8rem;
  box-shadow: 0 20px 45px rgba(15, 25, 40, 0.08);
  border: 1px solid rgba(31, 37, 48, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1.2rem
}

.offer-mediation-list h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--primary-color)
}

.offer-mediation-list ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.7rem;
  color: #3f4551;
  line-height: 1.7
}

@media (max-width:992px) {
  .offer-hero {
    padding: 140px 1.6rem 120px
  }

  .offer-hero-container {
    grid-template-columns: 1fr;
    gap: 2.6rem;
    text-align: center
  }

  .offer-hero-text {
    align-items: center
  }

  .offer-hero-kicker {
    align-self: center
  }

  .offer-hero-lead {
    max-width: 48ch
  }

  .offer-hero-card {
    margin: 0 auto;
    max-width: min(90%, 440px);
    text-align: left
  }

  .offer-hero .shape-a {
    left: -18%
  }

  .offer-hero .shape-c {
    left: 10%
  }

  .offer-services-container {
    margin: -80px auto 0;
    padding: 3rem 2.4rem;
    border-radius: 30px
  }

  .offer-section {
    padding: 2.4rem 2.1rem
  }

  .offer-mediation {
    grid-template-columns: 1fr;
    gap: 2rem
  }
}

@media (max-width:768px) {
  .offer-hero {
    padding: 120px 1.3rem 110px
  }

  .offer-hero h1 {
    font-size: 2.5rem
  }

  .offer-hero-lead {
    font-size: 1.05rem
  }

  .offer-hero .shape-b {
    display: none
  }

  .offer-hero .shape-c {
    width: 320px;
    height: 320px;
    bottom: -140px;
    left: 12%
  }

  .offer-services-container {
    padding: 2.6rem 1.9rem
  }

  .offer-section {
    padding: 2.1rem 1.7rem;
    border-radius: 24px
  }

  .offer-languages-grid {
    grid-template-columns: 1fr
  }

  .offer-hero-lead,
  .offer-language-card p,
  .offer-mediation-text p {
    text-align: left;
    -webkit-hyphens: auto;
    hyphens: auto
  }

  .offer-hero-card li {
    -webkit-hyphens: auto;
    hyphens: auto
  }
}

@media (max-width:520px) {
  .offer-hero {
    padding: 110px 1rem 95px
  }

  .offer-hero h1 {
    font-size: 2.2rem
  }

  .offer-hero-chip-group {
    justify-content: center
  }

  .offer-hero .shape-a,
  .offer-hero .shape-c {
    display: none
  }

  .offer-hero-card {
    padding: 1.8rem 1.6rem
  }

  .offer-services-container {
    padding: 2.4rem 1.4rem;
    border-radius: 22px
  }

  .offer-section {
    padding: 1.8rem 1.4rem
  }

  .offer-mediation-list {
    padding: 1.5rem
  }
}

.rates-hero {
  position: relative;
  padding: 160px 2rem 140px;
  background: #fdfcfa;
  overflow: hidden
}

.rates-hero-container {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3rem;
  align-items: center
}

.rates-hero-text {
  display: flex;
  flex-direction: column;
  gap: 1.4rem
}

.rates-hero-kicker {
  display: inline-block;
  align-self: flex-start;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(251, 99, 57, 0.14);
  color: var(--primary-color)
}

.rates-hero h1 {
  font-size: 3.1rem;
  line-height: 1.22;
  color: #1f2530;
  margin: 0
}

.rates-hero-lead {
  font-size: 1.15rem;
  line-height: 1.85;
  color: #454b57;
  max-width: 52ch;
  text-align: justify
}

.rates-hero-card {
  position: relative;
  z-index: 2;
  padding: 2.3rem 2.4rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  box-shadow: 0 30px 75px rgba(15, 25, 40, 0.12);
  border-left: 5px solid var(--primary-color);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-top: 2.4rem;
  text-align: center
}

.rates-hero-card h3 {
  font-size: 1.25rem;
  margin: 0;
  color: var(--primary-color)
}

.rates-hero-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem
}

.rates-hero-list li {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.85rem;
  font-size: 1.05rem;
  color: #3f4551;
  text-align: center
}

.rates-hero-list strong {
  font-size: 1.5rem;
  color: var(--primary-color)
}

.rates-hero-list .rates-hero-separator {
  font-size: 1.2rem;
  color: #3f4551;
  line-height: 1
}

.rates-hero-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55
}

.rates-hero .shape-a {
  width: 300px;
  height: 300px;
  background: rgba(251, 99, 57, 0.18);
  top: 12%;
  left: -6%
}

.rates-hero .shape-b {
  width: 200px;
  height: 200px;
  background: rgba(255, 210, 190, 0.32);
  bottom: 16%;
  right: 10%
}

.rates-hero .shape-c {
  width: 420px;
  height: 420px;
  background: rgba(200, 230, 255, 0.28);
  bottom: -150px;
  left: 20%
}

.rates-pricing {
  background: #ffffff;
  padding: 0 2rem 150px
}

.rates-pricing-container {
  position: relative;
  max-width: 1080px;
  margin: -95px auto 0;
  background: #ffffff;
  border-radius: 34px;
  box-shadow: 0 35px 75px rgba(15, 25, 40, 0.09);
  padding: 3rem 2.6rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  overflow: hidden
}

.rates-section {
  position: relative;
  padding: 2.4rem 2rem;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(251, 99, 57, 0.12), rgba(255, 210, 190, 0.26));
  box-shadow: 0 22px 58px rgba(15, 25, 40, 0.07);
  overflow: hidden
}

.rates-section-header h2 {
  font-size: 2.2rem;
  margin: 0 0 2.2rem;
  color: var(--primary-color)
}

.rates-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.8rem;
  position: relative;
  z-index: 2
}

.rates-card {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 24px;
  padding: 2rem 1.8rem;
  box-shadow: 0 25px 55px rgba(15, 25, 40, 0.08);
  border: 1px solid rgba(31, 37, 48, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1.1rem
}

.rates-card-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-color)
}

.rates-card h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #1f2530;
  text-transform: uppercase;
  letter-spacing: 0.08em
}

.rates-card ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.6rem;
  color: #3f4551;
  line-height: 1.65
}

.rates-section-shape {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(251, 99, 57, 0.22);
  z-index: 1;
  top: -110px;
  right: -90px
}

.rates-testimonials {
  position: relative;
  background: #fdfcfa;
  padding: 70px 2rem 120px;
  overflow: hidden
}

.rates-testimonials-container {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem
}

.rates-testimonials-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.rates-testimonials-header h2 {
  font-size: 2.4rem;
  letter-spacing: 0.2em;
  color: var(--primary-color);
  margin: 0
}

.rates-testimonials-header h3 {
  font-size: 1.4rem;
  color: #1f2530;
  margin: 0
}

.rates-testimonial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.4rem;
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
  width: 100%
}

.rates-testimonial-card {
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 28px;
  padding: 2.8rem 2.6rem;
  box-shadow: 0 32px 72px rgba(15, 25, 40, 0.12);
  border: 1px solid rgba(31, 37, 48, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  overflow: hidden;
  --card-gradient: linear-gradient(135deg, rgba(251, 99, 57, 0.16), rgba(255, 210, 190, 0.22));
  --author-accent: rgba(251, 99, 57, 0.38);
  transition: transform 0.35s ease, box-shadow 0.35s ease
}

.rates-testimonial-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card-gradient);
  opacity: 0.65;
  z-index: 0
}

.rates-testimonial-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  top: -80px;
  right: -60px;
  z-index: 0
}

.rates-testimonial-card>* {
  position: relative;
  z-index: 1
}

.rates-testimonial-card[data-accent="sunrise"] {
  --card-gradient: linear-gradient(135deg, rgba(251, 99, 57, 0.18), rgba(255, 210, 190, 0.34));
  --author-accent: rgba(251, 99, 57, 0.45)
}

.rates-testimonial-card[data-accent="dawn"] {
  --card-gradient: linear-gradient(135deg, rgba(200, 230, 255, 0.2), rgba(251, 99, 57, 0.24));
  --author-accent: rgba(200, 230, 255, 0.5)
}

.rates-testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 42px 90px rgba(15, 25, 40, 0.16)
}

.rates-testimonial-text {
  display: grid;
  gap: 1rem;
  color: #343a45;
  line-height: 1.82
}

.rates-testimonial-text p {
  margin: 0;
  text-align: justify
}

.rates-testimonial-full {
  display: grid;
  gap: 1rem
}

.rates-testimonial-author {
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--author-accent);
  display: grid;
  gap: 0.35rem;
  color: #1f2530;
  font-weight: 600
}

.rates-testimonial-author p:last-child {
  font-weight: 400;
  color: #4f5562
}

.rates-testimonials-shape {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(200, 230, 255, 0.28);
  z-index: 1;
  bottom: -160px;
  right: 12%
}

@media (max-width:992px) {
  .rates-hero {
    padding: 140px 1.6rem 120px
  }

  .rates-hero-container {
    grid-template-columns: 1fr;
    gap: 2.6rem;
    text-align: center
  }

  .rates-hero-text {
    align-items: center
  }

  .rates-hero-kicker {
    align-self: center
  }

  .rates-hero-lead {
    max-width: 48ch
  }

  .rates-hero-card {
    margin: 0 auto;
    max-width: min(90%, 420px)
  }

  .rates-hero .shape-a {
    left: -20%
  }

  .rates-hero .shape-c {
    left: 12%
  }

  .rates-pricing-container {
    margin: -80px auto 0;
    padding: 3rem 2.4rem;
    border-radius: 30px
  }

  .rates-section {
    padding: 2rem 1.8rem
  }

  .rates-testimonials {
    padding: 80px 1.6rem 100px
  }

  .rates-testimonials-header h2 {
    font-size: 2rem;
    letter-spacing: 0.16em
  }

  .mediation-hero {
    padding: 140px 1.6rem 120px
  }

  .mediation-hero-container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center
  }

  .mediation-hero-text {
    align-items: center
  }

  .mediation-hero-kicker {
    align-self: center
  }

  .mediation-hero-card {
    margin: 0 auto;
    max-width: min(90%, 420px)
  }

  .mediation-hero .shape-a {
    left: -20%
  }

  .mediation-hero .shape-c {
    left: 16%
  }

  .mediation-detail {
    padding: 90px 1.6rem
  }

  .mediation-detail-container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center
  }

  .mediation-detail-image {
    order: -1
  }

  .mediation-detail-text {
    align-items: center
  }

  .mediation-detail-text p {
    max-width: 60ch
  }

  .mediation-process {
    padding: 90px 1.6rem
  }

  .mediation-process-container {
    padding: 2.6rem;
    text-align: center
  }

  .mediation-accordion {
    padding: 100px 1.6rem 120px
  }

  .mediation-accordion-header {
    text-align: center
  }

  .mediation-accordion-header p {
    margin: 0 auto
  }

  .faq-hero {
    padding: 140px 1.6rem 120px
  }

  .faq-hero-container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center
  }

  .faq-hero-text {
    align-items: center
  }

  .faq-hero-kicker {
    align-self: center
  }

  .faq-hero-lead {
    max-width: 54ch
  }

  .faq-hero-card {
    margin: 0 auto;
    max-width: min(90%, 420px)
  }

  .faq-hero .shape-a {
    left: -18%
  }

  .faq-hero .shape-c {
    right: 16%
  }

  .faq-accordion {
    padding: 100px 1.6rem 120px
  }

  .faq-accordion-header {
    text-align: center
  }

  .faq-accordion-header p {
    margin: 0.6rem auto 0;
    max-width: 54ch
  }
}

@media (max-width:768px) {
  .rates-hero {
    padding: 110px 1.3rem 95px
  }

  .rates-hero h1 {
    font-size: 2.6rem
  }

  .rates-hero-lead {
    font-size: 1.05rem;
    text-align: left;
    -webkit-hyphens: auto;
    hyphens: auto
  }

  .rates-hero .shape-b {
    display: none
  }

  .rates-hero .shape-c {
    width: 320px;
    height: 320px;
    bottom: -140px;
    left: 14%
  }

  .rates-pricing {
    padding: 0 1.5rem 50px
  }

  .rates-pricing-container {
    margin: -60px auto 0;
    padding: 1.9rem 1.45rem;
    gap: 1.6rem
  }

  .rates-section {
    padding: 1.5rem 1.25rem;
    border-radius: 22px
  }

  .rates-section-header h2 {
    font-size: 1.9rem;
    margin-bottom: 1.4rem
  }

  .rates-card-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem
  }

  .rates-card {
    padding: 1.5rem 1.3rem;
    gap: 0.8rem
  }

  .rates-card ul {
    gap: 0.5rem;
    text-align: left;
    -webkit-hyphens: auto;
    hyphens: auto
  }

  .rates-testimonials {
    padding: 50px 1.3rem 65px
  }

  .rates-testimonials-container {
    gap: 2.2rem
  }

  .rates-testimonials-header h2 {
    letter-spacing: 0.14em
  }

  .rates-testimonial-card {
    padding: 2.2rem 1.8rem;
    gap: 1.1rem
  }

  .rates-testimonial-text p {
    text-align: left;
    -webkit-hyphens: auto;
    hyphens: auto
  }

  .mediation-hero {
    padding: 110px 1.3rem 95px
  }

  .mediation-hero h1 {
    font-size: 2.6rem
  }

  .mediation-hero-lead {
    font-size: 1.05rem
  }

  .mediation-hero .shape-b {
    display: none
  }

  .mediation-hero .shape-c {
    width: 320px;
    height: 320px;
    bottom: -140px;
    left: 18%
  }

  .mediation-detail {
    padding: 80px 1.3rem
  }

  .mediation-detail-text h2 {
    font-size: 1.9rem
  }

  .mediation-detail-image {
    min-height: 260px
  }

  .mediation-detail-image picture,
  .mediation-detail-image img {
    border-radius: 24px
  }

  .mediation-process {
    padding: 80px 1.3rem
  }

  .mediation-process-container {
    padding: 2.2rem
  }

  .mediation-accordion {
    padding: 90px 1.3rem 110px
  }

  .mediation-accordion-grid {
    grid-template-columns: 1fr
  }

  .faq-hero {
    padding: 110px 1.3rem 95px
  }

  .faq-hero h1 {
    font-size: 2.6rem
  }

  .faq-hero-lead {
    font-size: 1.05rem
  }

  .faq-hero .shape-b {
    display: none
  }

  .faq-hero .shape-c {
    display: none
  }

  .faq-hero-card {
    padding: 2rem 1.9rem
  }

  .faq-accordion {
    padding: 90px 1.3rem 110px
  }

  .faq-question {
    font-size: 1.05rem
  }

  .faq-item {
    padding: 1.5rem 1.6rem
  }
}

@media (max-width:520px) {
  .rates-hero {
    padding: 100px 1rem 75px
  }

  .rates-hero h1 {
    font-size: 2.2rem
  }

  .rates-hero .shape-a,
  .rates-hero .shape-c {
    display: none
  }

  .rates-hero-card {
    padding: 1.8rem 1.4rem
  }

  .rates-pricing {
    padding: 0 1.1rem 45px
  }

  .rates-pricing-container {
    margin: -40px auto 0;
    padding: 1.6rem 1.15rem;
    border-radius: 22px;
    gap: 1.3rem
  }

  .rates-section {
    padding: 1.3rem 1rem
  }

  .rates-section-header h2 {
    font-size: 1.7rem;
    margin-bottom: 1.1rem
  }

  .rates-card {
    padding: 1.3rem 1.15rem;
    gap: 0.75rem
  }

  .rates-testimonials {
    padding: 40px 1rem 55px
  }

  .rates-testimonials-header h2 {
    letter-spacing: 0.12em
  }

  .rates-testimonial-card {
    padding: 1.8rem 1.4rem;
    gap: 1rem
  }

  .rates-testimonials-shape {
    display: none
  }

  .mediation-hero {
    padding: 100px 1rem 70px
  }

  .mediation-hero h1 {
    font-size: 2rem;
    line-height: 1.2
  }

  .mediation-hero-container {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    align-items: stretch;
    text-align: left
  }

  .mediation-hero-text {
    align-items: flex-start;
    text-align: left;
    gap: 1rem
  }

  .mediation-hero-lead {
    font-size: 0.98rem;
    -webkit-hyphens: auto;
    hyphens: auto
  }

  .mediation-hero-kicker {
    align-self: flex-start
  }

  .mediation-hero .shape-a,
  .mediation-hero .shape-c {
    display: none
  }

  .mediation-hero-card {
    padding: 1.6rem 1.4rem;
    margin: 0;
    margin-top: 0.5rem;
    max-width: none;
    width: 100%;
    gap: 1.1rem;
    border-left-width: 4px;
    box-shadow: 0 18px 40px rgba(15, 25, 40, 0.12)
  }

  .mediation-hero-card ul {
    gap: 0.6rem
  }

  .mediation-hero-card li a {
    font-size: 0.95rem
  }

  .mediation-hero-card li a::before {
    font-size: 0.85rem
  }

  .mediation-detail {
    padding: 70px 1rem
  }

  .mediation-detail-text {
    align-items: flex-start;
    text-align: left;
    gap: 1rem
  }

  .mediation-detail-text h2 {
    font-size: 1.6rem
  }

  .mediation-detail-text p {
    max-width: none;
    font-size: 0.96rem;
    line-height: 1.75
  }

  .mediation-detail-container {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 1.8rem
  }

  .mediation-detail-image {
    order: -1;
    min-height: 220px;
    max-width: 320px;
    width: 100%;
    margin: 0 auto
  }

  .mediation-process {
    padding: 70px 1rem
  }

  .mediation-process-container {
    padding: 1.8rem 1.5rem
  }

  .mediation-accordion {
    padding: 80px 1rem 95px
  }

  .mediation-accordion-item {
    padding: 1.8rem 1.5rem
  }

  .accordion-toggle {
    width: 100%;
    justify-content: center
  }

  .faq-hero {
    padding: 95px 1rem 70px
  }

  .faq-hero h1 {
    font-size: 2.2rem
  }

  .faq-hero-card {
    padding: 1.7rem 1.4rem;
    text-align: left
  }

  .faq-accordion {
    padding: 80px 1rem 95px
  }

  .faq-item {
    padding: 1.4rem 1.3rem
  }

  .faq-question {
    font-size: 1rem
  }

  .faq-question::after {
    font-size: 1.1rem;
    margin-left: 0.8rem
  }
}

.policy-hero {
  position: relative;
  padding: 160px 2rem 140px;
  background: #fdfcfa;
  overflow: hidden
}

.policy-hero-container {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 3.2rem;
  align-items: center
}

.policy-hero-text {
  display: flex;
  flex-direction: column;
  gap: 1.4rem
}

.policy-hero-kicker {
  display: inline-block;
  align-self: flex-start;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(251, 99, 57, 0.14);
  color: var(--primary-color)
}

.policy-hero h1 {
  font-size: 3.1rem;
  line-height: 1.22;
  color: #1f2530;
  margin: 0
}

.policy-hero-lead {
  font-size: 1.15rem;
  line-height: 1.9;
  color: #454b57;
  max-width: 60ch;
  text-align: justify
}

.policy-hero-card {
  position: relative;
  z-index: 2;
  padding: 2.4rem 2.3rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  box-shadow: 0 30px 70px rgba(15, 25, 40, 0.12);
  border-left: 5px solid var(--primary-color);
  display: flex;
  flex-direction: column;
  gap: 1.3rem
}

.policy-hero-card h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--primary-color)
}

.policy-hero-card ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.6rem;
  color: #3f4551;
  line-height: 1.65
}

.policy-hero-card a {
  color: inherit;
  text-decoration: none
}

.policy-hero-card a:hover,
.policy-hero-card a:focus-visible {
  text-decoration: underline
}

.policy-hero-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.55;
  z-index: 1
}

.policy-hero .shape-a {
  width: 320px;
  height: 320px;
  background: rgba(251, 99, 57, 0.18);
  top: 12%;
  left: -6%
}

.policy-hero .shape-b {
  width: 200px;
  height: 200px;
  background: rgba(255, 210, 190, 0.32);
  bottom: 18%;
  right: 8%
}

.policy-hero .shape-c {
  width: 420px;
  height: 420px;
  background: rgba(200, 230, 255, 0.28);
  bottom: -150px;
  left: 22%
}

.policy-content {
  background: #ffffff;
  padding: 0 2rem 140px
}

.policy-content-container {
  position: relative;
  max-width: 1080px;
  margin: -90px auto 0;
  background: #ffffff;
  border-radius: 34px;
  box-shadow: 0 45px 90px rgba(15, 25, 40, 0.1);
  padding: 3.6rem 3.2rem;
  display: grid;
  gap: 2.4rem;
  overflow: hidden
}

.policy-card {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 26px;
  padding: 2.4rem 2.2rem;
  box-shadow: 0 25px 65px rgba(15, 25, 40, 0.08);
  border: 1px solid rgba(31, 37, 48, 0.06);
  display: grid;
  gap: 1.2rem
}

.policy-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(251, 99, 57, 0.11), rgba(255, 210, 190, 0.18));
  opacity: 0.6;
  z-index: 0
}

.policy-card:nth-of-type(even)::before {
  background: linear-gradient(135deg, rgba(200, 230, 255, 0.18), rgba(251, 99, 57, 0.12))
}

.policy-card>* {
  position: relative;
  z-index: 1
}

.policy-card h2 {
  margin: 0;
  font-size: 1.6rem;
  color: #1f2530
}

.policy-card p {
  margin: 0;
  color: #3f4551;
  line-height: 1.8;
  text-align: justify
}

.policy-card ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.55rem;
  color: #3f4551;
  line-height: 1.65
}

@media (max-width:992px) {
  .policy-hero {
    padding: 140px 1.6rem 120px
  }

  .policy-hero-container {
    grid-template-columns: 1fr;
    gap: 2.6rem;
    text-align: center
  }

  .policy-hero-text {
    align-items: center
  }

  .policy-hero-kicker {
    align-self: center
  }

  .policy-hero-lead {
    max-width: 50ch
  }

  .policy-hero-card {
    margin: 0 auto;
    max-width: min(90%, 460px)
  }

  .policy-hero .shape-a {
    left: -18%
  }

  .policy-hero .shape-c {
    left: 10%
  }

  .policy-content-container {
    margin: -70px auto 0;
    padding: 3rem 2.4rem;
    border-radius: 30px
  }
}

@media (max-width:768px) {
  .policy-hero {
    padding: 120px 1.3rem 110px
  }

  .policy-hero h1 {
    font-size: 2.6rem
  }

  .policy-hero-lead {
    font-size: 1.05rem
  }

  .policy-hero .shape-b {
    display: none
  }

  .policy-hero .shape-c {
    width: 320px;
    height: 320px;
    bottom: -140px;
    left: 12%
  }

  .policy-content-container {
    padding: 2.6rem 1.9rem;
    gap: 2rem
  }

  .policy-card {
    padding: 2.1rem 1.7rem;
    border-radius: 24px
  }
}

@media (max-width:640px) {
  .policy-hero-container {
    gap: 2.2rem;
    text-align: left
  }

  .policy-hero-text {
    align-items: flex-start;
    gap: 1.2rem
  }

  .policy-hero-kicker {
    align-self: flex-start
  }

  .policy-hero-lead {
    max-width: none;
    text-align: left;
    line-height: 1.75
  }

  .policy-hero-card {
    width: 100%;
    max-width: none;
    padding: 2.1rem 1.8rem
  }

  .policy-hero-card ul {
    padding-left: 0.9rem;
    font-size: 1rem
  }

  .policy-content {
    padding: 0 1.5rem 115px
  }

  .policy-content-container {
    margin: -60px auto 0;
    padding: 2.4rem 1.8rem;
    gap: 1.9rem
  }

  .policy-card {
    gap: 1rem
  }

  .policy-card h2 {
    font-size: 1.5rem
  }

  .policy-card p,
  .policy-card ul {
    font-size: 1rem;
    line-height: 1.75;
    text-align: left
  }
}

@media (max-width:520px) {
  .policy-hero {
    padding: 106px 1rem 88px
  }

  .policy-hero h1 {
    font-size: 2.3rem
  }

  .policy-hero .shape-a,
  .policy-hero .shape-c {
    display: none
  }

  .policy-hero-card {
    padding: 1.9rem 1.6rem
  }

  .policy-content {
    padding: 0 1.2rem 95px
  }

  .policy-content-container {
    margin: -48px auto 0;
    padding: 2.2rem 1.4rem;
    border-radius: 20px;
    gap: 1.6rem
  }

  .policy-card {
    padding: 1.6rem 1.35rem;
    border-radius: 20px
  }

  .policy-card h2 {
    font-size: 1.35rem
  }

  .policy-card p,
  .policy-card ul {
    font-size: 0.97rem;
    line-height: 1.7
  }

  .policy-card ul {
    padding-left: 0.9rem
  }
}

@media (max-width:420px) {
  .policy-hero {
    padding: 96px 0.9rem 76px
  }

  .policy-hero h1 {
    font-size: 2.1rem
  }

  .policy-hero-lead {
    font-size: 1rem
  }

  .policy-hero-card {
    padding: 1.7rem 1.3rem;
    border-radius: 20px
  }

  .policy-content {
    padding: 0 0.95rem 82px
  }

  .policy-content-container {
    margin: -40px auto 0;
    padding: 2rem 1.15rem;
    gap: 1.4rem;
    border-radius: 18px
  }

  .policy-card {
    padding: 1.45rem 1.2rem;
    border-radius: 18px;
    gap: 0.9rem
  }

  .policy-card h2 {
    font-size: 1.25rem
  }

  .policy-card p,
  .policy-card ul {
    font-size: 0.95rem
  }

  .policy-card ul {
    padding-left: 0;
    list-style-position: inside
  }
}

.workshop-directory-hero {
  position: relative;
  padding: 160px 2rem 140px;
  background: #fdfcfa;
  overflow: hidden
}

.workshop-directory-hero-content {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  z-index: 2
}

.workshop-directory-kicker {
  display: inline-block;
  align-self: center;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(251, 99, 57, 0.14);
  color: var(--primary-color)
}

.workshop-directory-hero h1 {
  font-size: 3rem;
  line-height: 1.2;
  color: #1f2530;
  margin: 0
}

.workshop-directory-hero p {
  max-width: 60ch;
  margin: 0 auto;
  font-size: 1.15rem;
  line-height: 1.85;
  color: #454b57
}

.workshop-directory-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.55;
  z-index: 1
}

.workshop-directory-hero .shape-a {
  width: 260px;
  height: 260px;
  background: rgba(251, 99, 57, 0.16);
  top: 18%;
  left: 6%
}

.workshop-directory-hero .shape-b {
  width: 340px;
  height: 340px;
  background: rgba(254, 219, 204, 0.28);
  bottom: -120px;
  right: 14%
}

.workshop-directory-hero .shape-c {
  width: 110px;
  height: 110px;
  border: 2px dotted rgba(251, 99, 57, 0.45);
  top: 22%;
  right: 24%
}

.workshop-directory-section {
  background: #ffffff;
  padding: 0 2rem 120px
}

.workshop-directory-section:first-of-type {
  padding-top: 0
}

.workshop-directory-container {
  max-width: 1100px;
  margin: -100px auto 0;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 35px 80px rgba(15, 25, 40, 0.08);
  padding: 3.2rem 3rem;
  position: relative
}

.workshop-directory-section+.workshop-directory-section .workshop-directory-container {
  margin-top: 0
}

.workshop-directory-heading h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #1f2530
}

.workshop-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.8rem
}

.workshop-card-grid--single {
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto
}

.workshop-card-grid--single .workshop-card {
  width: 100%
}

.workshop-card {
  display: flex;
  flex-direction: column;
  background: rgba(253, 252, 250, 0.92);
  border: 1px solid rgba(31, 37, 48, 0.06);
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 22px 45px rgba(15, 25, 40, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden
}

.workshop-card:hover,
.workshop-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(15, 25, 40, 0.12)
}

.workshop-card:focus-visible {
  outline: 3px solid rgba(251, 99, 57, 0.4);
  outline-offset: 4px
}

.workshop-card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #f5f7fb
}

.workshop-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.workshop-card-title {
  padding: 1.4rem 1.6rem 1.6rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2530;
  line-height: 1.4
}

@media (max-width:992px) {
  .workshop-directory-hero {
    padding: 130px 1.5rem 120px
  }

  .workshop-directory-container {
    margin: -80px auto 0;
    padding: 2.8rem 2.2rem;
    border-radius: 24px
  }
}

@media (max-width:768px) {
  .workshop-directory-hero {
    padding: 120px 1.2rem 110px
  }

  .workshop-directory-hero h1 {
    font-size: 2.5rem
  }

  .workshop-directory-hero p {
    font-size: 1.05rem
  }

  .workshop-directory-hero .shape-a,
  .workshop-directory-hero .shape-b {
    width: 220px;
    height: 220px
  }

  .workshop-directory-container {
    padding: 2.4rem 1.8rem
  }

  .workshop-card-grid {
    gap: 1.4rem
  }
}

@media (max-width:520px) {
  .workshop-directory-hero {
    padding: 110px 1rem 100px
  }

  .workshop-directory-hero h1 {
    font-size: 2.1rem
  }

  .workshop-directory-hero .shape-a,
  .workshop-directory-hero .shape-b,
  .workshop-directory-hero .shape-c {
    display: none
  }

  .workshop-directory-container {
    margin: -40px auto 0;
    padding: 2rem 1.4rem
  }

  .workshop-card {
    border-radius: 16px
  }

  .workshop-card-title {
    font-size: 1.05rem
  }
}

.contact-hero {
  position: relative;
  padding: 160px 2rem 140px;
  background: #fdfcfa;
  color: #1f2530;
  overflow: hidden
}

.contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 20%, rgba(251, 99, 57, 0.18) 0%, rgba(251, 99, 57, 0) 55%), radial-gradient(circle at 82% 18%, rgba(255, 210, 190, 0.35) 0%, rgba(255, 210, 190, 0) 60%), radial-gradient(circle at 70% 75%, rgba(200, 230, 255, 0.28) 0%, rgba(200, 230, 255, 0) 65%);
  z-index: 0
}

.contact-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}

.contact-hero-kicker {
  display: inline-block;
  padding: 0.32rem 0.9rem;
  border-radius: 999px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(251, 99, 57, 0.14);
  color: var(--primary-color);
  margin-bottom: 1.5rem;
  align-self: flex-start
}

.contact-hero h1 {
  font-size: 3rem;
  margin-bottom: 0.75rem;
  color: #1f2530
}

.contact-hero-lead {
  font-size: 1.2rem;
  max-width: 640px;
  line-height: 1.8;
  color: #4a4f5a
}

.contact-hero-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.55;
  z-index: 1
}

.contact-hero .shape-a {
  width: 220px;
  height: 220px;
  background: rgba(251, 99, 57, 0.16);
  top: 14%;
  left: 6%
}

.contact-hero .shape-b {
  width: 140px;
  height: 140px;
  border: 2px solid rgba(251, 99, 57, 0.32);
  bottom: 10%;
  right: 8%
}

.contact-hero .shape-c {
  width: 280px;
  height: 280px;
  background: rgba(254, 219, 204, 0.28);
  bottom: -90px;
  left: 28%
}

.contact-hero .shape-d {
  width: 90px;
  height: 90px;
  border: 2px dotted rgba(251, 99, 57, 0.5);
  top: 18%;
  right: 28%
}

.contact-main {
  background: #fdfcfa;
  padding: 0 2rem 120px
}

.contact-main-container {
  max-width: 1200px;
  margin: -100px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem
}

.contact-info-panel,
.contact-form-card {
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 30px 60px rgba(15, 25, 40, 0.08);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  height: 100%
}

.contact-info-panel::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(251, 99, 57, 0.22) 0%, rgba(251, 99, 57, 0) 70%);
  top: -140px;
  right: -80px;
  z-index: 0
}

.contact-info-panel>*,
.contact-form-card>* {
  position: relative;
  z-index: 1
}

.contact-info-panel h2 {
  font-size: 2.2rem;
  margin-bottom: 1rem
}

.contact-info-lead {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #444444
}

.contact-services {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.1rem
}

.contact-services li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  color: #444444;
  line-height: 1.7
}

.contact-services li::before {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: rgba(251, 99, 57, 0.38);
  box-shadow: 0 0 0 6px rgba(251, 99, 57, 0.16)
}

.contact-details {
  display: grid;
  gap: 1.3rem;
  margin-top: 2.5rem
}

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 0.5rem
}

.detail-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0.4rem 1.2rem;
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--primary-color);
  background: rgba(251, 99, 57, 0.12)
}

.contact-detail a {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.2s ease
}

.contact-detail a:hover {
  color: var(--primary-color)
}

.contact-note {
  margin-top: 1.5rem;
  background: rgba(251, 99, 57, 0.08);
  border-radius: 20px;
  padding: 1.5rem;
  line-height: 1.7;
  color: #444444
}

.contact-form-card::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(251, 99, 57, 0.16) 0%, rgba(251, 99, 57, 0) 75%);
  bottom: -160px;
  right: -120px;
  z-index: 0
}

.contact-form-card h3 {
  font-size: 2rem;
  margin-bottom: 0.75rem
}

.contact-form-lead {
  color: #555555;
  line-height: 1.7;
  max-width: 32ch
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2.5rem
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem
}

.form-group label {
  font-weight: 600;
  color: #333333
}

.form-group input,
.form-group textarea {
  width: 100%;
  border: 1.5px solid rgba(20, 20, 20, 0.08);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  font-family: inherit;
  font-size: 1rem;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(15, 15, 15, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease
}

.form-group textarea {
  min-height: 160px;
  resize: vertical
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: rgba(251, 99, 57, 0.65);
  box-shadow: 0 0 0 4px rgba(251, 99, 57, 0.18)
}

.submit-btn {
  background: var(--primary-color);
  color: #ffffff;
  border: none;
  padding: 0.95rem 2.4rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: auto;
  align-self: flex-start
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 35px rgba(251, 99, 57, 0.25)
}

.form-message {
  border-radius: 16px;
  padding: 1rem 1.2rem;
  font-size: 0.95rem;
  line-height: 1.6
}

.contact-form-card .form-message.success-message {
  background: rgba(76, 175, 80, 0.12);
  color: #2f7d32;
  border: 1px solid rgba(46, 125, 50, 0.2)
}

.contact-form-card .form-message.error-message {
  background: rgba(244, 67, 54, 0.12);
  color: #b71c1c;
  border: 1px solid rgba(183, 28, 28, 0.2)
}

.contact-faq-section {
  background: #ffffff;
  padding: 110px 2rem 140px
}

.contact-faq-container {
  max-width: 960px;
  margin: 0 auto
}

.faq-header {
  text-align: center;
  margin-bottom: 3rem
}

.faq-header h2 {
  font-size: 2.4rem;
  margin-bottom: 1rem
}

.faq-intro {
  max-width: 700px;
  margin: 0 auto;
  color: #555555;
  font-size: 1.05rem;
  line-height: 1.8
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem
}

.faq-item {
  background: #fdf7f4;
  border-radius: 20px;
  padding: 1.6rem 2rem;
  box-shadow: 0 14px 38px rgba(20, 20, 20, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease
}

.faq-item.active {
  transform: translateY(-2px);
  box-shadow: 0 20px 45px rgba(20, 20, 20, 0.08)
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-color);
  cursor: pointer
}

.faq-question::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--primary-color);
  transition: color 0.3s ease
}

.faq-item.active .faq-question::after {
  content: "–"
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding-top 0.3s ease;
  padding-top: 0;
  padding-bottom: 0
}

.faq-item.active .faq-answer {
  padding-top: 1rem;
  padding-bottom: 1rem
}

.faq-answer p {
  color: #000000;
  line-height: 1.7;
  margin-bottom: 1rem
}

.faq-answer p:last-child {
  margin-bottom: 0
}

@media (max-width:1200px) {
  .contact-main-container {
    gap: 2rem
  }
}

@media (max-width:992px) {
  .contact-hero {
    padding: 140px 1.5rem 120px
  }

  .contact-main {
    padding: 0 1.5rem 100px
  }

  .contact-main-container {
    grid-template-columns: 1fr;
    margin-top: -80px
  }

  .contact-info-panel,
  .contact-form-card {
    padding: 2.5rem
  }
}

@media (max-width:768px) {
  .contact-hero h1 {
    font-size: 2.5rem
  }

  .contact-hero-lead {
    font-size: 1.05rem
  }

  .contact-main-container {
    margin-top: -60px
  }

  .contact-info-panel,
  .contact-form-card {
    padding: 2rem
  }

  .contact-detail a {
    font-size: 1.05rem
  }
}

@media (max-width:640px) {
  .contact-hero {
    padding: 120px 1.25rem 100px
  }

  .contact-main {
    padding: 0 1.25rem 80px
  }

  .contact-info-panel,
  .contact-form-card {
    border-radius: 22px
  }

  .submit-btn {
    width: 100%;
    text-align: center
  }

  .faq-item {
    padding: 1.4rem 1.5rem
  }
}

.experience-cards {
  max-width: 1200px;
  margin: 4rem auto;
  padding: 0 2rem
}

.experience-cards h2 {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 2.5rem;
  color: var(--text-color)
}

.experience-card {
  position: relative;
  background: white;
  border-radius: 15px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 2rem
}

.experience-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15)
}

.icon-wrapper {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: rgba(251, 99, 57, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  transition: var(--transition)
}

.icon-wrapper .emoji {
  font-size: 24px
}

.experience-card:hover .icon-wrapper {
  background: var(--primary-color);
  transform: scale(1.1)
}

.experience-card p {
  margin: 0;
  line-height: 1.8;
  color: #666;
  flex-grow: 1
}

@media (max-width:768px) {
  .experience-cards {
    margin: 2rem auto;
    padding: 0 1rem
  }

  .experience-cards h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem
  }

  .experience-card {
    padding: 2rem 1.5rem;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-direction: column;
    text-align: center
  }

  .icon-wrapper {
    margin: 0 auto 1.5rem auto;
    width: 80px;
    height: 80px;
    background-color: rgba(251, 99, 57, 0.1)
  }

  .icon-wrapper .emoji {
    font-size: 35px
  }

  .experience-card p {
    font-size: 0.95rem;
    line-height: 1.6
  }
}

@media (max-width:480px) {
  .experience-cards {
    margin: 1.5rem auto;
    padding: 0 0.8rem
  }

  .experience-cards h2 {
    font-size: 1.6rem;
    margin-bottom: 1.2rem
  }

  .experience-card {
    padding: 1.8rem 1.2rem;
    margin-bottom: 1rem
  }

  .icon-wrapper {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.2rem auto
  }

  .icon-wrapper .emoji {
    font-size: 32px
  }

  .experience-card p {
    font-size: 0.9rem;
    line-height: 1.5
  }
}

.form-message {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  text-align: center;
  font-weight: 500
}

.success-message {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb
}

.error-message {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb
}

.form-message.success-message,
.form-message.error-message {
  animation: fadeIn 0.3s ease-in-out
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@media (max-width:768px) {
  .references {
    padding: 40px 20px
  }

  .references-content {
    max-width: 100%
  }

  .references h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    text-align: center
  }

  .references h3 {
    font-size: 1.5rem;
    margin-bottom: 2rem
  }

  .reference-card {
    padding: 25px;
    margin-bottom: 40px
  }

  .reference-text p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem
  }

  .reference-author {
    margin-top: 1.5rem
  }

  .reference-author p {
    font-size: 0.9rem
  }

  .reference-author p:last-child {
    font-size: 0.85rem
  }
}

@media (max-width:480px) {
  .references {
    padding: 30px 15px
  }

  .references-content {
    max-width: 100%
  }

  .references h2 {
    font-size: 1.8rem;
    margin-bottom: 1.2rem
  }

  .references h3 {
    font-size: 1.3rem;
    margin-bottom: 1.8rem
  }

  .reference-card {
    padding: 20px;
    margin-bottom: 50px
  }

  .reference-text p {
    font-size: 0.9rem;
    line-height: 1.5
  }

  .reference-author {
    margin-top: 1.2rem
  }

  .reference-author p {
    font-size: 0.85rem
  }

  .reference-author p:last-child {
    font-size: 0.8rem
  }
}

.nav-links .dropdown {
  position: relative;
  display: inline-block;
  margin-left: 0
}

.nav-links .dropdown .dropbtn {
  font-weight: 500;
  color: var(--text-color);
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  padding: 0.5rem 0
}

.nav-links .dropdown:hover .dropbtn,
.nav-links .dropdown .dropbtn.active {
  color: var(--primary-color)
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 240px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
  z-index: 1;
  border-radius: 8px;
  margin-top: 0;
  padding: 8px 0;
  list-style: none
}

.dropdown-content a {
  color: var(--text-color);
  padding: 10px 20px;
  text-decoration: none;
  display: block;
  text-align: left;
  margin-left: 0;
  font-size: 0.95rem;
  clear: both;
  white-space: nowrap
}

.dropdown-content a:hover {
  background-color: rgba(251, 99, 57, 0.1);
  color: var(--primary-color)
}

.dropdown-submenu-content {
  display: none;
  position: static;
  box-shadow: none;
  background-color: #fdfdfd;
  border-radius: 0;
  padding-left: 1rem
}

.dropdown-submenu>a:after {
  content: '▾';
  float: right;
  font-size: 0.8em;
  margin-left: 10px
}

.page-hero {
  padding: 120px 2rem 60px;
  background: linear-gradient(135deg, rgba(251, 99, 57, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  text-align: center
}

.page-hero h1 {
  font-size: 2.8rem;
  color: var(--text-color)
}

.content-section {
  padding: 60px 2rem
}

.container {
  max-width: 900px;
  margin: 0 auto
}

.mediation-hero {
  position: relative;
  padding: 130px 2rem 110px;
  background: #fdfcfa;
  overflow: hidden
}

.mediation-hero-container {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 3rem;
  align-items: center
}

.mediation-hero-text {
  display: flex;
  flex-direction: column;
  gap: 1.15rem
}

.mediation-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  background: rgba(251, 99, 57, 0.14);
  color: var(--primary-color);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600
}

.mediation-hero h1 {
  font-size: 3rem;
  line-height: 1.24;
  color: #1f2530;
  margin: 0
}

.mediation-hero-lead {
  font-size: 1.15rem;
  line-height: 1.9;
  color: #454b57;
  max-width: 52ch
}

.mediation-hero-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  padding: 2.3rem 2.4rem;
  box-shadow: 0 30px 75px rgba(15, 25, 40, 0.12);
  border-left: 5px solid var(--primary-color);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-top: 2.2rem
}

.mediation-hero-card h3 {
  margin: 0;
  font-size: 1.25rem;
  color: #1f2530
}

.mediation-hero-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.9rem
}

.mediation-hero-card li a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: #3f4551;
  font-weight: 600;
  transition: color 0.2s ease
}

.mediation-hero-card li a::before {
  content: '→';
  font-size: 1rem;
  color: var(--primary-color);
  transition: transform 0.2s ease
}

.mediation-hero-card li a:hover {
  color: var(--primary-color)
}

.mediation-hero-card li a:hover::before {
  transform: translateX(4px)
}

.mediation-hero-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.55;
  z-index: 1
}

.mediation-hero .shape-a {
  width: 320px;
  height: 320px;
  background: rgba(251, 99, 57, 0.18);
  top: 14%;
  left: -8%
}

.mediation-hero .shape-b {
  width: 220px;
  height: 220px;
  background: rgba(255, 210, 190, 0.28);
  bottom: 10%;
  right: 12%
}

.mediation-hero .shape-c {
  width: 440px;
  height: 440px;
  background: rgba(200, 230, 255, 0.26);
  bottom: -160px;
  left: 22%
}

.mediation-detail {
  padding: 70px 2rem 80px;
  background: #ffffff
}

.mediation-detail#individualno,
#individualno.mediation-detail {
  padding: 45px 2rem 70px
}

.mediation-detail+.mediation-detail {
  padding-top: 60px
}

.mediation-detail:nth-of-type(even) {
  background: #fdfcfa
}

.mediation-detail-container {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3rem;
  align-items: center
}

.mediation-detail--reverse .mediation-detail-container {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr)
}

.mediation-detail-text {
  display: flex;
  flex-direction: column;
  gap: 0.95rem
}

.mediation-detail-text h2 {
  margin: 0;
  font-size: 2.1rem;
  color: #1f2530
}

.mediation-detail-text p {
  color: #464d5b;
  line-height: 1.85
}

.mediation-detail-image {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  min-height: 320px
}

.mediation-detail-image picture,
.mediation-detail-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 28px 60px rgba(15, 25, 40, 0.14)
}

.mediation-process {
  padding: 90px 2rem;
  background: linear-gradient(135deg, rgba(251, 99, 57, 0.08), rgba(255, 210, 190, 0.12))
}

.mediation-process-container {
  max-width: 900px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 28px;
  padding: 3rem;
  box-shadow: 0 24px 55px rgba(15, 25, 40, 0.1);
  display: flex;
  flex-direction: column;
  gap: 1.2rem
}

.mediation-process-container h2 {
  margin: 0;
  font-size: 2.1rem;
  color: #1f2530
}

.mediation-process-content p {
  color: #3f4551;
  line-height: 1.78
}

.mediation-accordion {
  padding: 100px 2rem 130px;
  background: #ffffff
}

.mediation-accordion-container {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem
}

.mediation-accordion-header {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: center;
  text-align: center;
  margin: 0 auto
}

.mediation-accordion-header h2 {
  margin: 0;
  font-size: 2.2rem;
  color: #1f2530;
  letter-spacing: 0.12em
}

.mediation-accordion-header p {
  max-width: 60ch;
  color: #464d5b;
  line-height: 1.8;
  text-align: center;
  margin: 0 auto
}

.mediation-accordion-grid {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  counter-reset: mediation-step;
  max-width: 760px;
  margin: 0 auto
}

.mediation-accordion-item {
  position: relative;
  counter-increment: mediation-step;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 22px;
  padding: 2.1rem 2.2rem 2rem 4.5rem;
  border: 1px solid rgba(31, 37, 48, 0.08);
  box-shadow: 0 14px 38px rgba(15, 25, 40, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease
}

.mediation-accordion-item::before {
  content: counter(mediation-step);
  position: absolute;
  top: 1.9rem;
  left: 1.4rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--primary-color);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  box-shadow: 0 10px 22px rgba(251, 99, 57, 0.25);
  font-size: 1rem
}

.mediation-accordion-item:hover {
  transform: translateY(-4px);
  border-color: rgba(251, 99, 57, 0.25);
  box-shadow: 0 18px 45px rgba(15, 25, 40, 0.12)
}

.mediation-accordion-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem
}

.mediation-accordion-title h3 {
  margin: 0;
  font-size: 1.25rem;
  color: #1f2530;
  font-weight: 600
}

.mediation-accordion-title button {
  flex-shrink: 0
}

.accordion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid rgba(251, 99, 57, 0.35);
  color: var(--primary-color);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.92rem;
  padding: 0.52rem 1.2rem;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease
}

.accordion-toggle::after {
  content: '+';
  font-weight: 700
}

.accordion-toggle.active::after {
  content: '−'
}

.accordion-toggle:hover {
  background: rgba(251, 99, 57, 0.12);
  border-color: rgba(251, 99, 57, 0.55);
  transform: translateY(-1px)
}

.accordion-toggle.active,
.accordion-toggle:hover.active {
  background: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color)
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  display: grid;
  gap: 0.9rem;
  color: #434955;
  line-height: 1.75
}

.accordion-content ul {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.45rem
}

.accordion-content li {
  list-style: disc
}

.accordion-toggle+.accordion-content {
  padding-top: 0
}

.faq-hero {
  position: relative;
  padding: 180px 2rem 80px;
  background: #fdfcfa;
  overflow: hidden
}

.faq-hero-container {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3rem;
  align-items: center
}

.faq-hero-text {
  display: flex;
  flex-direction: column;
  gap: 1.4rem
}

.faq-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  background: rgba(251, 99, 57, 0.16);
  color: var(--primary-color);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600
}

.faq-hero h1 {
  margin: 0;
  font-size: 3rem;
  line-height: 1.22;
  color: #1f2530
}

.faq-hero-lead {
  font-size: 1.18rem;
  line-height: 1.95;
  color: #3f4551;
  max-width: 60ch
}

.faq-hero-card {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 28px;
  padding: 2.4rem 2.3rem;
  box-shadow: 0 28px 65px rgba(15, 25, 40, 0.12);
  border-left: 5px solid var(--primary-color);
  display: flex;
  flex-direction: column;
  gap: 1.4rem
}

.faq-hero-card h3 {
  margin: 0;
  font-size: 1.35rem;
  color: #1f2530
}

.faq-hero-card p {
  margin: 0;
  color: #464d5b;
  line-height: 1.8
}

.faq-hero-contact {
  display: grid;
  gap: 0.7rem
}

.faq-hero-contact a {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none
}

.faq-hero-contact a:hover {
  text-decoration: underline
}

.faq-hero-shape {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.55;
  z-index: 1
}

.faq-hero .shape-a {
  width: 280px;
  height: 280px;
  background: rgba(255, 210, 190, 0.35);
  top: 14%;
  left: -10%
}

.faq-hero .shape-b {
  width: 340px;
  height: 340px;
  background: rgba(200, 230, 255, 0.26);
  bottom: -160px;
  left: 24%
}

.faq-hero .shape-c {
  width: 200px;
  height: 200px;
  background: rgba(251, 99, 57, 0.18);
  bottom: 12%;
  right: 8%
}

.faq-accordion {
  padding: 80px 2rem 120px;
  background: #ffffff
}

.faq-accordion-container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.6rem
}

.faq-accordion-header h2 {
  margin: 0;
  font-size: 2.3rem;
  color: #1f2530;
  letter-spacing: 0.08em
}

.faq-accordion-header p {
  margin: 0.8rem 0 0;
  color: #434955;
  line-height: 1.85
}

.faq-accordion-list {
  display: grid;
  gap: 1.2rem
}

.faq-item {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 24px;
  padding: 1.6rem 1.8rem;
  box-shadow: 0 20px 50px rgba(15, 25, 40, 0.08);
  border: 1px solid rgba(31, 37, 48, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease
}

.faq-item.active {
  box-shadow: 0 28px 64px rgba(15, 25, 40, 0.12);
  transform: translateY(-2px)
}

.faq-question {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2530;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  cursor: pointer
}

.faq-question span {
  flex: 1
}

.faq-question::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--primary-color);
  margin-left: 1rem;
  transition: color 0.2s ease
}

.faq-item.active .faq-question::after {
  content: '–'
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  display: grid;
  gap: 1rem;
  margin-top: 0
}

.faq-item.active .faq-answer {
  margin-top: 1.1rem
}

.faq-answer p {
  margin: 0;
  color: #000000;
  line-height: 1.85
}

.faq-answer ul {
  margin: 0;
  padding-left: 0;
  display: grid;
  gap: 0.5rem;
  color: #000000;
  line-height: 1.75;
  list-style: none
}

.faq-answer li {
  list-style: none
}

@media (min-width:1024px) {

  .mediation-hero-lead,
  .mediation-detail-text p,
  .mediation-process-content p,
  .accordion-content p {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto
  }
}

@media (max-width:992px) {
  .faq-hero {
    padding: 150px 1.6rem 70px
  }

  .faq-hero-container {
    grid-template-columns: 1fr;
    gap: 2.6rem;
    justify-items: stretch
  }

  .faq-hero-text,
  .faq-hero-card {
    width: 100%;
    max-width: 560px;
    margin: 0 auto
  }

  .faq-hero-text {
    align-items: flex-start;
    text-align: left;
    gap: 1.2rem
  }

  .faq-hero-kicker {
    align-self: flex-start
  }

  .faq-hero-card {
    align-items: flex-start;
    text-align: left
  }

  .faq-accordion {
    padding: 50px 1.6rem 110px
  }
}

@media (max-width:768px) {
  .faq-hero {
    padding: 130px 1.3rem 50px
  }

  .faq-hero h1 {
    font-size: 2.4rem
  }

  .faq-hero-lead {
    font-size: 1.05rem;
    line-height: 1.8
  }

  .faq-hero .shape-b,
  .faq-hero .shape-c {
    display: none
  }

  .faq-hero-card {
    padding: 2rem 1.8rem;
    border-left-width: 4px;
    gap: 1.2rem
  }

  .faq-accordion {
    padding: 55px 1.3rem 100px
  }

  .faq-item {
    padding: 1.5rem 1.6rem
  }

  .faq-question {
    font-size: 1.05rem
  }
}

@media (max-width:520px) {
  .faq-hero {
    padding: 110px 1.1rem 45px
  }

  .faq-hero-text {
    gap: 1rem
  }

  .faq-hero h1 {
    font-size: 2rem
  }

  .faq-hero-lead {
    font-size: 1rem;
    line-height: 1.75
  }

  .faq-hero-card {
    padding: 1.7rem 1.4rem;
    gap: 1rem
  }

  .faq-accordion {
    padding: 40px 1.1rem 85px
  }

  .faq-item {
    padding: 1.3rem 1.2rem
  }

  .faq-question {
    font-size: 1rem;
    align-items: flex-start
  }

  .faq-question::after {
    margin-left: 0.6rem;
    font-size: 1.1rem
  }

  .faq-answer {
    gap: 0.75rem
  }

  .faq-answer p,
  .faq-answer li {
    font-size: 0.97rem;
    line-height: 1.7
  }

  .faq-answer ul {
    gap: 0.4rem
  }
}

@media (max-width:1060px) {
  .mediation-hero {
    padding: 125px 1.5rem 95px
  }

  .mediation-hero-container {
    grid-template-columns: 1fr;
    max-width: 760px;
    gap: 2.5rem
  }

  .mediation-hero-card {
    max-width: 480px;
    margin: 0 auto;
    margin-top: 0.8rem
  }

  .mediation-hero .shape-a {
    top: 4%;
    left: -28%
  }

  .mediation-hero .shape-b {
    right: -12%;
    bottom: 4%
  }

  .mediation-hero .shape-c {
    left: -10%;
    bottom: -180px
  }

  .mediation-detail {
    padding: 60px 1.5rem 70px
  }

  .mediation-detail+.mediation-detail {
    padding-top: 50px
  }

  #individualno.mediation-detail,
  .mediation-detail#individualno {
    padding: 45px 1.5rem 60px
  }

  .mediation-process {
    padding: 65px 1.5rem
  }

  .mediation-accordion {
    padding: 80px 1.5rem 110px
  }

  .mediation-detail-container,
  .mediation-detail--reverse .mediation-detail-container {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .mediation-detail-image {
    min-height: 260px
  }

  .mediation-process-container {
    padding: 2.4rem;
    margin: 0
  }
}

@media (max-width:720px) {
  .mediation-hero {
    padding: 130px 1.25rem 90px
  }

  .mediation-hero-text {
    gap: 1.1rem
  }

  .mediation-hero h1 {
    font-size: 2.35rem
  }

  .mediation-hero-lead {
    font-size: 1.02rem;
    line-height: 1.75
  }

  .mediation-hero-card {
    width: 100%;
    padding: 2rem 2.1rem;
    border-radius: 22px;
    margin-top: 0.8rem
  }

  .mediation-detail {
    padding: 55px 1.25rem 65px
  }

  .mediation-detail+.mediation-detail {
    padding-top: 45px
  }

  #individualno.mediation-detail,
  .mediation-detail#individualno {
    padding: 38px 1.25rem 55px
  }

  .mediation-detail-image picture,
  .mediation-detail-image img {
    border-radius: 22px
  }

  .mediation-detail-text h2 {
    font-size: 1.85rem
  }

  .mediation-detail-text p {
    line-height: 1.7
  }

  .mediation-process {
    padding: 55px 1.25rem
  }

  .mediation-process-container {
    padding: 1.8rem 1.6rem;
    border-radius: 22px;
    margin: 0;
    width: 100%;
    text-align: left;
    align-items: stretch
  }

  .mediation-accordion {
    padding: 70px 1.25rem 90px
  }

  .mediation-accordion-item {
    padding: 1.6rem 1.35rem 1.55rem 3.2rem;
    border-radius: 18px;
    border-width: 1px;
    box-shadow: 0 10px 30px rgba(15, 25, 40, 0.12);
    gap: 0.9rem
  }

  .mediation-accordion-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem
  }

  .mediation-accordion-title h3 {
    text-align: left;
    font-size: 1.05rem
  }

  .accordion-toggle {
    align-self: flex-start;
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem
  }

  [data-aos="fade-left"],
  [data-aos="fade-right"] {
    transform: none !important
  }

  .mediation-accordion-grid {
    max-width: 100%;
    gap: 1.1rem
  }

  .mediation-accordion-item::before {
    width: 1.9rem;
    height: 1.9rem;
    top: 1.4rem;
    left: 1.2rem;
    font-size: 0.85rem;
    box-shadow: 0 8px 18px rgba(251, 99, 57, 0.25)
  }

  .accordion-content {
    gap: 0.7rem
  }
}

@media (max-width:520px) {
  .mediation-hero {
    padding: 120px 1rem 80px
  }

  .mediation-hero h1 {
    font-size: 2.05rem
  }

  .mediation-hero-lead {
    font-size: 0.98rem
  }

  .mediation-hero-card {
    padding: 1.6rem 1.7rem;
    gap: 1rem
  }

  .mediation-hero-card h3 {
    font-size: 1.15rem
  }

  .mediation-hero-card li a {
    font-size: 0.95rem
  }

  .mediation-detail,
  .mediation-process,
  .mediation-accordion {
    padding: 60px 1rem
  }

  #individualno.mediation-detail,
  .mediation-detail#individualno {
    padding: 32px 1rem 45px
  }

  .mediation-detail-container {
    gap: 2rem
  }

  .mediation-detail-image {
    min-height: 220px
  }

  .mediation-process-container h2,
  .mediation-accordion-header h2 {
    font-size: 1.85rem
  }

  .mediation-accordion-item {
    padding: 1.4rem 1.2rem 1.4rem 2.9rem;
    gap: 0.75rem;
    border-radius: 16px
  }

  .accordion-toggle {
    width: 100%;
    align-self: flex-start;
    justify-content: center;
    text-align: center;
    padding: 0.45rem 0.9rem;
    font-size: 0.83rem
  }

  .mediation-accordion-item::before {
    width: 1.6rem;
    height: 1.6rem;
    top: 1.2rem;
    left: 1.05rem;
    font-size: 0.75rem
  }

  .mediation-accordion-title h3 {
    font-size: 1rem
  }

  .accordion-content {
    font-size: 0.94rem;
    gap: 0.6rem
  }
}

.workshop-container {
  max-width: 1100px
}

.workshop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 4rem;
  align-items: start
}

.workshop-text {
  display: flex;
  flex-direction: column;
  gap: 2rem
}

.workshop-image {
  position: sticky;
  top: calc(72px + 24px);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}

.workshop-image img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1)
}

.workshop-text h2 {
  color: var(--primary-color);
  margin-bottom: 0.75rem
}

.workshop-text p {
  margin-bottom: 1rem
}

.workshop-lead {
  font-size: 1.1rem;
  line-height: 1.9;
  color: #3c3c3c;
  margin-bottom: 0
}

.workshop-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem
}

.workshop-section h4 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--primary-color)
}

.workshop-section ul {
  padding-left: 1.2rem;
  line-height: 1.8
}

.workshop-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem
}

.meta-card {
  background: rgba(251, 99, 57, 0.08);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 10px 25px rgba(251, 99, 57, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.35rem
}

.meta-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-color)
}

.meta-value {
  font-weight: 600;
  color: #1d1d1d
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem
}

.price-card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 1.2rem 1.4rem;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(31, 31, 31, 0.05)
}

.price-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #808080
}

.price-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary-color);
  display: block;
  margin: 0.4rem 0 0.2rem
}

.price-card p {
  margin: 0;
  font-size: 0.9rem;
  color: #4d4d4d
}

.workshop-image-frame {
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto
}

.workshop-image-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px
}

.workshop-benefits {
  background: #fff;
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 18px 40px rgba(31, 31, 31, 0.08);
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgba(0, 0, 0, 0.05)
}

.workshop-benefits h5 {
  margin: 1rem 0 0.75rem;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary-color)
}

.workshop-benefits ul {
  padding-left: 1.2rem;
  margin: 0;
  line-height: 1.7
}

.workshop-benefits li {
  margin-bottom: 0.4rem
}

.pdf-button {
  display: inline-block;
  padding: 0.8rem 1.8rem;
  background: var(--primary-color);
  color: white;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 500;
  transition: var(--transition);
  margin-top: 1.5rem;
  border: 2px solid transparent
}

.pdf-button:hover {
  background: white;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(251, 99, 57, 0.2)
}

@media (max-width:992px) {
  .dropdown-submenu-content {
    left: 0;
    margin-left: 0;
    right: auto
  }

  .dropdown-submenu-content .dropdown-submenu-content {
    left: 0;
    right: auto
  }

  .workshop-container {
    max-width: 100%
  }

  .workshop-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem
  }

  .workshop-image {
    position: static
  }

  .workshop-image-frame {
    position: static;
    max-width: 480px;
    margin: 0 auto
  }

  .workshop-meta,
  .price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (max-width:768px) {

  .workshop-meta,
  .price-grid {
    grid-template-columns: 1fr
  }

  .meta-card,
  .price-card {
    padding: 1rem 1.1rem
  }

  .workshop-lead {
    font-size: 1rem
  }

  .workshop-image-frame {
    margin-top: 1.5rem
  }

  .workshop-grid {
    grid-template-columns: 1fr
  }

  .workshop-image {
    order: -1;
    margin-bottom: 2rem;
    position: static
  }
}

.read-more-btn {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.8rem 1.8rem;
  background: var(--primary-color);
  color: white;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 500;
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}

.read-more-btn:hover {
  background: white;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(251, 99, 57, 0.2)
}

.more-story-content {
  height: 0;
  overflow: hidden;
  transition: height 0.45s ease, margin-top 0.45s ease, padding 0.45s ease, box-shadow 0.45s ease, background 0.45s ease, border-color 0.45s ease;
  line-height: 1.8;
  color: #444;
  margin-top: 0;
  padding: 0;
  border-radius: 24px;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
  will-change: height
}

.more-story-content p {
  margin: 0
}

.more-story-content p+p {
  margin-top: 1.3rem
}

.more-story-content.visible {
  margin-top: 2.5rem;
  padding: 2.2rem 2.5rem 2.5rem;
  background: #fff;
  box-shadow: 0 22px 48px rgba(20, 20, 20, 0.08);
  border-color: rgba(251, 99, 57, 0.12)
}

@media (max-width:600px) {
  .more-story-content.visible {
    padding: 1.8rem 1.5rem 2rem
  }
}

.hero-new {
  padding: 72px 2rem 0;
  background: #fdfcfa;
  min-height: auto;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  position: relative
}

.hero-new-content {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: flex-start;
  min-height: auto;
  z-index: 2
}

.hero-new-text {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: auto;
  padding-top: 48px;
  padding-bottom: 48px
}

.hero-new-text h1 {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0
}

.hero-new-subtitle {
  font-size: 1.2rem;
  color: #555
}

.hero-info-box {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: #ffffff;
  border-left: 4px solid var(--primary-color);
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  max-width: 460px;
  text-align: left
}

.hero-info-box h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem
}

.hero-info-box p+p {
  margin-top: 0.75rem
}

.hero-info-box p {
  text-align: justify
}

.hero-info-box strong {
  color: var(--primary-color)
}

.hero-new-image {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  align-self: stretch
}

.hero-new-image img {
  max-width: 100%;
  width: auto;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: bottom
}

.features-section {
  padding: 80px 2rem;
  text-align: center
}

.features-container {
  max-width: 1200px;
  margin: 0 auto
}

.features-intro h2 {
  max-width: 800px;
  margin: 0 auto 3rem auto;
  font-size: 1.8rem
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem
}

.feature-card {
  background: #fff;
  padding: 2.5rem 2rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  height: 100%
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1)
}

.feature-card h3 {
  color: var(--primary-color);
  margin-bottom: 1rem
}

.feature-card .cta-button {
  margin-top: auto;
  align-self: center
}

.about-amra-intro {
  padding: 60px 2rem;
  background: var(--light-bg)
}

.about-amra-wrapper {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr 280px;
  gap: 2rem;
  align-items: center
}

.about-amra-image {
  display: flex;
  justify-content: center
}

.about-amra-image img {
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12)
}

.about-amra-content {
  font-size: 1.1rem;
  line-height: 1.8
}

.about-amra-content p+p {
  margin-top: 1rem
}

.about-amra-content p {
  text-align: justify
}

.cta-button-alt {
  display: inline-block;
  padding: 1rem 2rem;
  background: transparent;
  color: var(--primary-color);
  text-decoration: none;
  border-radius: 30px;
  font-weight: 500;
  transition: var(--transition);
  margin-top: 2rem;
  border: 2px solid var(--primary-color)
}

.cta-button-alt:hover {
  background: var(--primary-color);
  color: white
}

.final-cta {
  padding: 80px 2rem;
  text-align: center
}

.final-cta-content h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem
}

.final-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap
}

.final-cta-content p {
  color: #666
}

.bg-shape {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  opacity: 0.5
}

.shape-1 {
  width: 150px;
  height: 150px;
  background: rgba(251, 99, 57, 0.1);
  top: 22%;
  left: 5%
}

.shape-2 {
  width: 80px;
  height: 80px;
  background: rgba(251, 99, 57, 0.08);
  bottom: 12%;
  right: 45%
}

.shape-3 {
  width: 50px;
  height: 50px;
  border: 2px dotted var(--primary-color);
  top: 32%;
  right: 10%
}

.shape-4 {
  width: 120px;
  height: 120px;
  border: 2px solid rgba(251, 99, 57, 0.2);
  bottom: 9%;
  left: 40%
}

@media (max-width:992px) {
  .hero-new-content {
    grid-template-columns: 1fr;
    text-align: center;
    min-height: auto;
    align-items: center;
    padding-top: 0
  }

  .hero-new-text {
    display: block;
    height: auto;
    align-self: center;
    padding-top: 0;
    padding-bottom: 0
  }

  .hero-info-box {
    margin: 1.5rem auto 0;
    text-align: left
  }

  .hero-new-image {
    order: -1;
    margin-bottom: 2rem;
    align-self: center;
    align-items: center
  }

  .hero-new-image img {
    max-height: 400px;
    height: auto;
    width: 100%
  }

  .about-amra-wrapper {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem
  }

  .about-amra-content {
    text-align: center
  }
}

@media (max-width:768px) {
  .hero-new-text h1 {
    font-size: 2.2rem
  }

  .features-intro h2 {
    font-size: 1.5rem
  }

  .final-cta-buttons .cta-button {
    width: 100%
  }
}

/* ---------- Blog styles ---------- */
/* Two-column layout: left (featured + 3 cards), right (article list + archive) */

.blog-hero {
  position: relative;
  padding: 180px 2rem 80px;
  background: #fdfcfa;
  color: #1f2530;
  overflow: hidden
}

.blog-hero .contact-hero-kicker {
  margin-bottom: 1rem
}

.blog-hero h1 {
  font-size: 2.6rem;
  margin-bottom: 0.5rem
}

.blog-content {
  background: transparent;
  padding: 0 2rem 100px;
  margin-top: 94px
}

.blog-layout-wrapper {
  max-width: 1200px;
  margin: -80px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2.5rem;
  align-items: start;
  min-height: 100vh
}

/* Left column - main content */
.blog-main-column {
  display: flex;
  flex-direction: column;
  gap: 2rem
}

/* Featured article (large card) */
.featured-article {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(15, 25, 40, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease
}

.featured-article:hover {
  transform: translateY(-4px);
  box-shadow: 0 35px 70px rgba(15, 25, 40, 0.12)
}

.featured-article a {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none
}

.featured-article img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block
}

.featured-article-content {
  padding: 2rem 2.2rem
}

.featured-article .article-date {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em
}

.featured-article h2 {
  font-size: 1.8rem;
  color: #1f2530;
  margin-bottom: 1rem;
  line-height: 1.3
}

.featured-article p {
  color: #4a4f5a;
  line-height: 1.75;
  font-size: 1.05rem
}

/* 3 recent cards at bottom of left column */
.recent-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

.recent-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 18px;
  box-shadow: 0 20px 45px rgba(15, 25, 40, 0.07);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease
}

.recent-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 55px rgba(15, 25, 40, 0.11)
}

.recent-card a {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  height: 100%
}

.recent-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block
}

.recent-card h3 {
  font-size: 1.1rem;
  margin: 0;
  color: #1f2530;
  padding: 1.2rem 1.2rem 0.5rem;
  line-height: 1.3
}

.recent-card .article-date {
  font-size: 0.85rem;
  color: var(--primary-color);
  font-weight: 600;
  padding: 0 1.2rem;
  margin-bottom: 0.5rem
}

.recent-card p {
  font-size: 0.95rem;
  color: #4a4f5a;
  padding: 0 1.2rem 1.2rem;
  line-height: 1.6;
  margin: 0
}

.recent-card.placeholder-card {
  opacity: 0.85
}

/* Right sidebar - sticky positioning */
.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  /* KLJUČNA SPREMEMBA: Uporabimo sticky namesto fixed */
  position: -webkit-sticky;
  /* Podpora za Safari */
  position: sticky;
  top: 120px;
  /* Razdalja od vrha (višina menija + odmik), kjer se element ustavi */

  height: fit-content;
  /* Pomembno: zagotovi, da se sidebar ne raztegne po višini, sicer sticky ne deluje */
  z-index: 10
}

.sidebar-card {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 20px;
  box-shadow: 0 20px 48px rgba(15, 25, 40, 0.07);
  padding: 1.8rem
}

.sidebar-card h3 {
  font-size: 1.2rem;
  color: #1f2530;
  margin: 0 0 1rem;
  font-weight: 600
}

.sidebar-subtitle {
  font-size: 0.88rem;
  color: #6b6f77;
  margin: -0.5rem 0 1rem;
  font-style: italic
}

/* Older articles list (compact - titles and dates only) */
.older-articles-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem
}

.older-articles-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(31, 37, 48, 0.06)
}

.older-articles-list li:last-child {
  border-bottom: none
}

.older-articles-list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  color: #1f2530;
  text-decoration: none;
  transition: color 0.2s ease
}

.older-articles-list a:hover {
  color: var(--primary-color)
}

.older-articles-list .article-title {
  font-weight: 500;
  font-size: 0.95rem;
  flex: 1
}

.older-articles-list .article-date {
  font-size: 0.82rem;
  color: #75787d;
  white-space: nowrap;
  font-weight: 500
}

/* Archive list */
.archive-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem
}

.archive-list li {
  padding: 0.5rem 0;
  border-bottom: 1px dashed rgba(31, 37, 48, 0.04)
}

.archive-list li:last-child {
  border-bottom: none
}

.archive-list a {
  color: #1f2530;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.2s ease
}

.archive-list a:hover {
  color: var(--primary-color)
}

/* Sidebar links */
.sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem
}

.sidebar-links a {
  color: #1f2530;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.2s ease, padding-left 0.2s ease;
  padding: 0.4rem 0;
  display: block
}

.sidebar-links a:hover {
  color: var(--primary-color);
  padding-left: 0.5rem
}

/* Blog article content styles */
.blog-article-content {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(15, 25, 40, 0.08);
  padding: 2.5rem;
}

.article-featured-image {
  margin: -2.5rem -2.5rem 2rem;
  border-radius: 24px 24px 0 0;
  overflow: hidden
}

.article-featured-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover
}

.article-body-text {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #333;
  max-width: 100%
}

.article-body-text h2 {
  font-size: 1.6rem;
  color: #1f2530;
  margin: 2.5rem 0 1.2rem;
  font-weight: 600;
  clear: both
}

.article-body-text h2:first-child {
  margin-top: 0
}

.article-body-text p {
  margin: 1.2rem 0;
  text-align: left;
  hyphens: auto
}

.article-body-text ul {
  margin: 1.2rem 0;
  padding-left: 1.5rem
}

.article-body-text li {
  margin: 0.6rem 0
}

/* Inline images - specific float classes for precise control */
.article-inline-image {
  max-width: 380px;
  margin: 0.5rem
}

.article-inline-image.float-left {
  float: left;
  margin: 1.2rem 2rem 1rem 0
}

.article-inline-image.float-right {
  float: right;
  margin: 1.2rem 0 1rem 2rem
}

.article-inline-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1)
}

.article-inline-image.article-image-wide {
  max-width: 450px
}

.article-body-text strong.tip-label {
  margin-left: 0.25rem
}

.article-conclusion-block {
  display: flex;
  gap: 2rem;
  align-items: center;
  margin: 1rem 0 0;
  flex-wrap: wrap
}

.article-conclusion-text p {
  margin-bottom: 0
}

.article-conclusion-block .article-inline-image {
  margin: 0
}

.article-conclusion-text {
  flex: 1 1 280px
}

.references-section {
  padding: 80px 2rem;
  background: #fdf7f4
}

.references-container {
  max-width: 1100px;
  margin: 0 auto
}

.references-kicker {
  font-size: 2rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 2rem;
  margin-top: 0
}


.references-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 1.3fr);
  gap: 1.5rem;
  align-items: end
}

.reference-card {
  background: #fff;
  border-radius: 18px;
  padding: 1.8rem;
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  border: 1px solid rgba(0, 0, 0, 0.05)
}

.reference-card p {
  text-align: justify;
  text-align-last: left;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
  word-wrap: break-word
}

.reference-author {
  font-weight: 600
}

.reference-highlight {
  color: var(--primary-color)
}

.reference-cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  margin-top: auto
}

.reference-arrow {
  font-weight: 600;
  color: var(--primary-color)
}

.reference-button {
  border: 1px solid #1d1d1d;
  border-radius: 999px;
  padding: 0.25rem 1.2rem;
  font-weight: 600;
  background: transparent;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  color: #1d1d1d;
  display: inline-block
}

.reference-button:hover {
  background: #1d1d1d;
  color: #fff
}

.split-ref-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: flex-end
}

.ref-left-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%
}

.ref-left-spacer {
  flex: 1
}

.references-kicker-custom {
  font-family: 'Poppins', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: #fb6339;
  line-height: 1.1;
  margin: 0;
  padding-top: 0.5rem
}

.ref-group-left {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch
}

.ref-group-left .reference-card {
  height: 100%;
  margin-bottom: 0
}

/* Responsive adjustments */
@media (max-width:992px) {
  .blog-layout-wrapper {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: -60px auto 0;
    min-height: auto
  }

  .blog-sidebar {
    /* Resetiramo sticky na mobilnih napravah */
    position: static;
    width: 100%;
    max-width: 100%;
    margin-top: 2rem;
    order: 2
  }

  .references-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .split-ref-layout {
    grid-template-columns: 1fr
  }

  .references-kicker-custom {
    font-size: 2.4rem;
    text-align: center;
    padding-top: 0
  }

  .ref-left-wrapper {
    height: auto
  }

  .ref-left-spacer {
    display: none
  }

  .recent-articles-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .featured-article img {
    height: 300px
  }

  .blog-article-content {
    padding: 2rem
  }

  .article-featured-image {
    margin: -2rem -2rem 1.5rem
  }

  .blog-hero {
    padding: 140px 1.5rem 60px
  }

  .blog-hero h1 {
    font-size: 2rem
  }

  .article-body-text {
    font-size: 1rem
  }

  .article-body-text h2 {
    font-size: 1.4rem;
    margin: 2rem 0 1rem
  }
}

@media (max-width:640px) {

  .article-inline-image,
  .article-inline-image.float-left,
  .article-inline-image.float-right {
    float: none;
    max-width: 100%;
    margin: 1.5rem auto;
    clear: both
  }

  .blog-article-content {
    padding: 1.5rem;
    border-radius: 16px
  }

  .article-featured-image {
    margin: -1.5rem -1.5rem 1.5rem;
    border-radius: 16px 16px 0 0
  }

  .recent-articles-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem
  }

  .featured-article img {
    height: 240px
  }

  .references-grid {
    grid-template-columns: 1fr
  }

  .ref-group-left {
    grid-template-columns: 1fr
  }

  .references-kicker-custom {
    margin-bottom: 1.25rem
  }

  .featured-article-content {
    padding: 1.5rem
  }

  .featured-article h2 {
    font-size: 1.4rem
  }

  .sidebar-card {
    padding: 1.4rem
  }

  .recent-card h3 {
    font-size: 1.05rem
  }

  .blog-hero {
    padding: 120px 1rem 50px
  }

  .blog-hero h1 {
    font-size: 1.75rem;
    line-height: 1.2
  }

  .contact-hero-lead {
    font-size: 0.95rem
  }

  .article-body-text {
    font-size: 0.95rem;
    line-height: 1.7
  }

  .article-body-text h2 {
    font-size: 1.3rem;
    margin: 1.5rem 0 0.8rem
  }

  .article-body-text p {
    margin: 1rem 0
  }

  .article-body-text ul {
    margin: 1rem 0;
    padding-left: 1.2rem
  }

  .article-inline-image.article-image-wide {
    max-width: 100% !important;
    width: 100%;
    margin: 1.5rem 0
  }

  .article-inline-image {
    max-width: 100%;
    width: 100%
  }

  .reference-card p {
    text-align: left !important
  }

  /* Touch-friendly links */
  .sidebar-links a,
  .older-articles-list a {
    padding: 0.6rem 0;
    font-size: 0.9rem
  }

  /* Better spacing for content */
  .blog-content {
    padding: 0 1rem 80px
  }

  .blog-layout-wrapper {
    margin: -40px auto 0
  }
}

/* End blog styles */

/* --- Recommendation Box (Kdo sem) --- */
.recommendation-box {
    background-color: #fffbf8; /* Zelo nežna topla barva */
    border: 1px solid rgba(251, 99, 57, 0.15); /* Nežen oranžen rob */
    border-radius: 24px; /* Zaobljeni robovi */
    padding: 2rem;
    width: 100%;
    max-width: 420px; /* Enako kot slika */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.04);
}

.recommendation-box h3 {
    text-align: center;
    font-size: 1.2rem;
    color: #1f2530;
    margin-bottom: 1.5rem;
    border-bottom: 2px dotted rgba(251, 99, 57, 0.3);
    padding-bottom: 0.5rem;
    display: inline-block;
    width: 100%;
}

.rec-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rec-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: #3f4551;
    font-weight: 600;
    font-size: 0.95rem;
    background: #ffffff;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.rec-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(251, 99, 57, 0.1);
    color: #fb6339;
}

.rec-icon {
    font-size: 1.4rem;
    background: rgba(251, 99, 57, 0.1);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* --- Workshops Sidebar Inline (Aktualne delavnice - del sekcije) --- */
.workshops-sidebar-inline {
    background: #ffffff;
    border: 2px solid #3b5998;
    border-radius: 18px;
    padding: 1rem;
    width: 100%;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    align-self: start;
    margin-top: 60px;
}

.workshops-sidebar-inline h3 {
    text-align: center;
    font-size: 1rem;
    color: #1f2530;
    margin-bottom: 0.8rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid #3b5998;
}

.workshops-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.workshop-sidebar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #1f2530;
    background: #fdfcfa;
    border-radius: 10px;
    padding: 0.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(59, 89, 152, 0.1);
}

.workshop-sidebar-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(59, 89, 152, 0.15);
}

.workshop-sidebar-item img {
    width: 100%;
    height: 95px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 0.4rem;
}

.workshop-sidebar-item span {
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

/* Responsive: prikaži pod vsebino na manjših zaslonih */
@media (max-width: 1200px) {
    .workshops-sidebar-inline {
        display: none;
    }
}

/* --- Recommendation Box Home (Naslovnica - sekcija z Amro) --- */
.recommendation-box-home {
    background-color: #fffbf8;
    border: 1px solid rgba(251, 99, 57, 0.15);
    border-radius: 20px;
    padding: 1.5rem;
    width: 280px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

.recommendation-box-home h3 {
    text-align: center;
    font-size: 1rem;
    color: #1f2530;
    margin-bottom: 1rem;
    border-bottom: 2px dotted rgba(251, 99, 57, 0.3);
    padding-bottom: 0.5rem;
}

.recommendation-box-home .rec-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.recommendation-box-home .rec-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-decoration: none;
    color: #3f4551;
    font-weight: 600;
    font-size: 0.8rem;
    background: #ffffff;
    padding: 0.5rem;
    border-radius: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 3px 8px rgba(0,0,0,0.03);
}

.recommendation-box-home .rec-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(251, 99, 57, 0.1);
    color: #fb6339;
}

.recommendation-box-home .rec-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .recommendation-box-home {
        display: none;
    }
}
"""


"./delavnice/index.html" : 
"""
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Delavnice - Prosberry</title>
    <meta name="description" content="Pregled vseh delavnic Prosberry za šole, vrtce in zaposlene. Izboljšajte vključevanje priseljencev, sodelovanje s starši in strokovni razvoj ekipe z našimi strokovno pripravljenimi vsebinami.">
    <meta name="keywords" content="delavnice, šole, vrtci, zaposleni, vključevanje priseljencev, sodelovanje s starši, strokovni razvoj, Prosberry, Amra Kurešepi Zulji">
    <meta name="author" content="Amra Kurešepi Zulji">
    <link rel="canonical" href="https://www.prosberry.si/delavnice/">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://unpkg.com">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link rel="dns-prefetch" href="https://unpkg.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/animations.css">

    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>
<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" class="active">Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" >Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" >Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>

    <main>
        <section class="workshop-directory-hero">
            <div class="workshop-directory-hero-content" data-aos="fade-up">
                <span class="workshop-directory-kicker">Pregled delavnic</span>
                <h1>Skupaj gradimo podporno okolje</h1>
                <p>Izberite delavnico, ki najbolje ustreza vaši šoli ali vrtcu, in odkrijte, kako lahko z našo strokovno pripravljeno vsebino izboljšate vključevanje priseljencev, sodelovanje s starši ter strokovni razvoj ekipe.</p>
            </div>
            <div class="workshop-directory-shape shape-a"></div>
            <div class="workshop-directory-shape shape-b"></div>
            <div class="workshop-directory-shape shape-c"></div>
        </section>

        <section class="workshop-directory-section">
            <div class="workshop-directory-container">
                <div class="workshop-directory-heading" data-aos="fade-up">
                    <h2>Za šole</h2>
                </div>
                <div class="workshop-card-grid">
                    <a class="workshop-card" href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/" data-aos="fade-up">
                        <div class="workshop-card-image">
                            <img src="/assets/images/vkljucevanje/delavnica-ucenci.webp" alt="Delavnica Zakaj se splača znati slovensko?" loading="lazy" decoding="async" width="1536" height="1024">
                        </div>
                        <div class="workshop-card-title">
                            Zakaj se splača znati slovensko?
                        </div>
                    </a>
                    <a class="workshop-card" href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/" data-aos="fade-up" data-aos-delay="100">
                        <div class="workshop-card-image">
                            <img src="/assets/images/vkljucevanje/delavnica-starsi-sola.webp" alt="Delavnica Šola in starši priseljenci" loading="lazy" decoding="async" width="1536" height="1024">
                        </div>
                        <div class="workshop-card-title">
                            Šola in starši priseljenci
                        </div>
                    </a>
                </div>
            </div>
        </section>

        <section class="workshop-directory-section">
            <div class="workshop-directory-container">
                <div class="workshop-directory-heading" data-aos="fade-up">
                    <h2>Za vrtce</h2>
                </div>
                <div class="workshop-card-grid workshop-card-grid--single">
                    <a class="workshop-card" href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/" data-aos="fade-up">
                        <div class="workshop-card-image">
                            <img src="/assets/images/vkljucevanje/delavnica-starsi-vrtec.webp" alt="Delavnica Skupaj gradimo nove začetke" loading="lazy" decoding="async" width="1536" height="1024">
                        </div>
                        <div class="workshop-card-title">
                            Skupaj gradimo nove začetke
                        </div>
                    </a>
                </div>
            </div>
        </section>

        <section class="workshop-directory-section">
            <div class="workshop-directory-container">
                <div class="workshop-directory-heading" data-aos="fade-up">
                    <h2>Za zaposlene</h2>
                </div>
                <div class="workshop-card-grid workshop-card-grid--single">
                    <a class="workshop-card" href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/" data-aos="fade-up">
                        <div class="workshop-card-image">
                            <img src="/assets/images/vkljucevanje/delavnica-ucitelji.webp" alt="Delavnica Od tujca do sošolca" loading="lazy" decoding="async" width="1536" height="1024">
                        </div>
                        <div class="workshop-card-title">
                            Od tujca do sošolca
                        </div>
                    </a>
                </div>
            </div>
        </section>
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
        <div class="final-cta-content" data-aos="fade-up">
            <h2>Imaš vprašanje? Pokliči ali piši!</h2>
            <div class="final-cta-buttons">
                <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
            </div>
            <p>Skupaj ustvariva prostor za učenje in povezovanje.</p>
        </div>
    </section>

</main>

<footer>
    <div class="footer-content">
        <div class="footer-logo">
            <h3>PROSBERRY</h3>
        </div>
        <div class="footer-links">
            <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
        </div>
        <div class="footer-contact">
            <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
            <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
        </div>
    </div>
</footer>

    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
</body>
</html>
"""


"./error_log" : 
"""
[03-Mar-2025 04:27:40 Europe/Ljubljana] PHP Deprecated:  Directive 'allow_url_include' is deprecated in Unknown on line 0
[05-Mar-2025 04:58:49 Europe/Ljubljana] PHP Deprecated:  Directive 'allow_url_include' is deprecated in Unknown on line 0
[06-Mar-2025 04:16:29 Europe/Ljubljana] PHP Deprecated:  Directive 'allow_url_include' is deprecated in Unknown on line 0
[07-Mar-2025 04:47:02 Europe/Ljubljana] PHP Deprecated:  Directive 'allow_url_include' is deprecated in Unknown on line 0
[08-Mar-2025 06:15:10 Europe/Ljubljana] PHP Deprecated:  Directive 'allow_url_include' is deprecated in Unknown on line 0
[09-Mar-2025 05:57:05 Europe/Ljubljana] PHP Deprecated:  Directive 'allow_url_include' is deprecated in Unknown on line 0
[10-Mar-2025 04:22:33 Europe/Ljubljana] PHP Deprecated:  Directive 'allow_url_include' is deprecated in Unknown on line 0
[11-Mar-2025 04:18:52 Europe/Ljubljana] PHP Deprecated:  Directive 'allow_url_include' is deprecated in Unknown on line 0
[12-Mar-2025 04:49:32 Europe/Ljubljana] PHP Deprecated:  Directive 'allow_url_include' is deprecated in Unknown on line 0
"""


"./footer-template.html" : 
"""
<footer>
    <div class="footer-content">
        <div class="footer-logo">
            <h3>PROSBERRY</h3>
        </div>
        <div class="footer-links">
            <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
        </div>
        <div class="footer-contact">
            <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
            <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
        </div>
    </div>
</footer>"""


"./format-css.sh" : 
"""
#!/bin/bash
set -euo pipefail

css_file="css/style.css"

if [[ ! -f "$css_file" ]]; then
    echo "error: $css_file not found" >&2
    exit 1
fi

python3 - <<'PY'
from pathlib import Path

css_path = Path("css/style.css")
text = css_path.read_text()

output = []
token = []
indent = 0
idx = 0
length = len(text)

def flush_token():
    if token:
        joined = " ".join("".join(token).split())
        token.clear()
        return joined
    return ""

while idx < length:
    if text.startswith("/*", idx):
        comment_end = text.find("*/", idx + 2)
        if comment_end == -1:
            comment_end = length - 2
        comment = text[idx : comment_end + 2]
        output.append(" " * (indent * 4) + comment.strip() + "\n")
        idx = comment_end + 2
        continue

    c = text[idx]

    if c.isspace():
        idx += 1
        continue

    if c == "{":
        selector = flush_token()
        output.append(selector + " {\n")
        indent += 1
        idx += 1
        continue

    if c == "}":
        pending = flush_token()
        if pending:
            output.append(" " * (indent * 4) + pending + "\n")
        indent = max(0, indent - 1)
        output.append(" " * (indent * 4) + "}\n\n")
        idx += 1
        continue

    if c == ";":
        property_block = flush_token()
        if property_block:
            output.append(" " * (indent * 4) + property_block + ";\n")
        idx += 1
        continue

    token.append(c)
    idx += 1

result = "".join(output).rstrip() + "\n"
css_path.write_text(result)
PY

echo "Formatted $css_file"
"""


"./generate_responsive_images.py" : 
"""
import os
from PIL import Image

# Project root directory (where this script is located)
PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
IMAGES_DIR = os.path.join(PROJECT_ROOT, 'assets', 'images')

# Define images and their desired responsive widths
# Each tuple: (original_filename, [list_of_widths_to_generate])
RESPONSIVE_IMAGES_CONFIG = [
    ('amra.webp', [320, 480, 767, 960]), # Added 320w
    ('logo.webp', [100, 200, 400])      # Added 100w
]

def generate_responsive_image(image_path, output_width, output_dir, quality=85):
    """
    Generates a responsive version of an image with a specified width.
    Maintains aspect ratio.
    """
    try:
        with Image.open(image_path) as img:
            # Calculate new height to maintain aspect ratio
            original_width, original_height = img.size
            if original_width <= output_width:
                # If original is smaller or equal, no need to resize down
                # We still save it with the new naming convention if it's part of srcset
                new_width = original_width
                new_height = original_height
            else:
                new_width = output_width
                new_height = int((original_height * new_width) / original_width)

            # Resize only if dimensions change
            if new_width != original_width or new_height != original_height:
                img = img.resize((new_width, new_height), Image.Resampling.LANCZOS)

            # Construct new filename (e.g., amra-480w.webp)
            base_name, ext = os.path.splitext(os.path.basename(image_path))
            # Ensure we only take the base name before any existing -<width>w
            base_name_clean = base_name.split('-')[0]
            new_filename = f"{base_name_clean}-{output_width}w{ext}"
            output_path = os.path.join(output_dir, new_filename)

            img.save(output_path, format=img.format, quality=quality)
            print(f"Generated: {output_path} ({new_width}x{new_height})")
            return True
    except FileNotFoundError:
        print(f"Error: Source image not found at {image_path}")
        return False
    except Exception as e:
        print(f"Error processing {image_path} for width {output_width}: {e}")
        return False

def main():
    print("Starting responsive image generation...")

    if not os.path.exists(IMAGES_DIR):
        print(f"Error: Image directory not found at {IMAGES_DIR}")
        return

    for original_filename, widths in RESPONSIVE_IMAGES_CONFIG:
        original_image_path = os.path.join(IMAGES_DIR, original_filename)

        if not os.path.exists(original_image_path):
            print(f"Warning: Original image {original_filename} not found. Skipping.")
            continue

        for width in widths:
            generate_responsive_image(original_image_path, width, IMAGES_DIR)
    
    print("Responsive image generation complete.")

if __name__ == "__main__":
    main()"""


"./header-template.html" : 
"""
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" {{ACTIVE_NASLOVNICA}}>Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" {{ACTIVE_PONUDBA}}>Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" {{ACTIVE_VKLJUCEVANJE}}>Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" {{ACTIVE_DELAVNICE}}>Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" {{ACTIVE_KDO_SEM}}>Kdo sem</a>
            <a href="/cene-in-reference/" {{ACTIVE_CENE}}>Cene in reference</a>
            <a href="/pogosta-vprasanja/" {{ACTIVE_FAQ}}>Pogosta vprašanja</a>
            <a href="/blog/" {{ACTIVE_BLOG}}>Blog</a>
            <a href="/kontakt/" {{ACTIVE_KONTAKT}}>Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>
"""


"./index.html" : 
"""
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prosberry - Medkulturno izobraževanje in podpora</title>
    <meta name="description" content="Prosberry je vaš medkulturni kotiček za učenje angleščine, razumevanje medkulturnih odnosov in osebno rast. Nudimo delavnice, medkulturno posredovanje in individualno podporo.">
    <meta name="keywords" content="učenje angleščine, medkulturno posredovanje, delavnice za otroke, delavnice za starše, delavnice za šole, Amra Kurešepi Zulji, Prosberry">
    <meta name="author" content="Amra Kurešepi Zulji">
    <link rel="canonical" href="https://www.prosberry.si/">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://unpkg.com">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link rel="dns-prefetch" href="https://unpkg.com">
    <link rel="preload" as="image" href="/assets/images/amra-767w.webp" imagesrcset="/assets/images/amra-320w.webp 320w, /assets/images/amra-480w.webp 480w, /assets/images/amra-767w.webp 767w, /assets/images/amra-960w.webp 960w, /assets/images/amra.webp 1544w" imagesizes="(max-width: 767px) 100vw, (max-width: 992px) 50vw, 480px">
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"></noscript>
    <link rel="preload" href="https://unpkg.com/aos@next/dist/aos.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css"></noscript>
    <link rel="stylesheet" href="/css/style.css">

    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>
<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" class="active">Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" >Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" >Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" >Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>

<main>
    <!-- ===== ZAČETEK NOVE VSEBINE ===== -->

    <!-- 1. Sekcija: Glavni pozdrav (Hero) -->
    <section class="hero-new" style="max-height: 800px; overflow: visible;">
        <div class="hero-new-content" style="grid-template-columns: 1fr 0.7fr 280px; gap: 1rem; max-width: 1400px;">
            <div class="hero-new-text" data-aos="fade-up">
                <h1>Dobrodošli v našem medkulturnem kotičku…</h1>
                <p class="hero-new-subtitle">Uči se angleščine, razvozlaj medkulturne vozle in uživaj v vsakem koraku!</p>
                <div class="hero-info-box">
                    <h2>Zakaj PROSBERRY?</h2>
                    <p><strong>PROS</strong> simbolizira znanje, izkušnje in strokovnost, ki podpirajo rast in razvoj.</p>
                    <p><strong>BERRY</strong> predstavlja raznolikost in živost, ki bogati učenje, povezovanje in medkulturne izkušnje.</p>
                    <p>Tudi v jeziku in med ljudmi rastemo vsak po svoje – z različnimi potrebami, ozadji in cilji.</p>
                    <p>Moj cilj je ustvariti prostor, kjer se lahko učimo, povezujemo in sodelujemo naravno, enostavno in z veseljem.</p>
                </div>
            </div>
            <div class="hero-new-image" data-aos="fade-left" style="margin-left: -160px; margin-right: 50px;">
                <img src="assets/images/amra.webp" alt="Amra Kurešepi Zulji" width="1544" height="1920" fetchpriority="high" srcset="/assets/images/amra-320w.webp 320w, /assets/images/amra-480w.webp 480w, /assets/images/amra-767w.webp 767w, /assets/images/amra-960w.webp 960w, /assets/images/amra.webp 1544w">
            </div>
            
            <!-- Panel: Aktualne delavnice (tretji stolpec) -->
            <div class="workshops-sidebar-inline" data-aos="fade-left" data-aos-delay="200">
                <h3>Aktualne delavnice</h3>
                <div class="workshops-sidebar-list">
                    <a class="workshop-sidebar-item" href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">
                        <img src="/assets/images/vkljucevanje/delavnica-ucenci.webp" alt="Zakaj se splača znati slovensko?" loading="lazy">
                        <span>Zakaj se splača znati slovensko?</span>
                    </a>
                    <a class="workshop-sidebar-item" href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">
                        <img src="/assets/images/vkljucevanje/delavnica-starsi-sola.webp" alt="Šola in starši priseljenci" loading="lazy">
                        <span>Šola in starši priseljenci</span>
                    </a>
                    <a class="workshop-sidebar-item" href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">
                        <img src="/assets/images/vkljucevanje/delavnica-starsi-vrtec.webp" alt="Skupaj gradimo nove začetke" loading="lazy">
                        <span>Skupaj gradimo nove začetke</span>
                    </a>
                    <a class="workshop-sidebar-item" href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">
                        <img src="/assets/images/vkljucevanje/delavnica-ucitelji.webp" alt="Od tujca do sošolca" loading="lazy">
                        <span>Od tujca do sošolca</span>
                    </a>
                </div>
            </div>
        </div>
        <!-- Dekorativni elementi v ozadju -->
        <div class="bg-shape shape-1"></div>
        <div class="bg-shape shape-2"></div>
        <div class="bg-shape shape-3"></div>
        <div class="bg-shape shape-4"></div>
    </section>

    <!-- 2. Sekcija: Ključne ponudbe -->
    <section class="features-section">
        <div class="features-container">
            <div class="features-intro" data-aos="fade-up">
                <h2>PROSBERRY – mesto, kjer učenje, povezovanje in podpora postanejo enostavni!</h2>
            </div>
            <div class="features-grid">
                <div class="feature-card" data-aos="fade-up" data-aos-delay="100">
                    <h3>Uči se po svojem tempu</h3>
                    <p>Z izurjeno profesorico, ki se je tudi sama kdaj lovila pri učenju in uporabi tujih jezikov, odkrij načine, kako se jezika naučiti prilagojeno svojim potrebam in ritmu.</p>
                    <a href="/ponudba/" class="cta-button">PONUDBE</a>
                </div>
                <div class="feature-card" data-aos="fade-up" data-aos-delay="200">
                    <h3>Razišči delavnice</h3>
                    <p>Za priseljene otroke in starše, ki krepijo vezi s šolo ali vrtcem, ter za zaposlene v vrtcih in šolah, ki krepijo vezi z otroki in starši.</p>
                    <a href="/delavnice/" class="cta-button">DELAVNICE</a>
                </div>
                <div class="feature-card" data-aos="fade-up" data-aos-delay="300">
                    <h3>Prejmi podporo, ko jo najbolj potrebuješ</h3>
                    <p>Medkulturno posredovanje, ki vsakodnevne izzive naredi lažje za vse — v slovenščini, albanščini, srbščini in angleščini.</p>
                    <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" class="cta-button">MK POSREDOVANJE</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 3. Sekcija: Osebna predstavitev -->
    <section class="about-amra-intro">
        <div class="about-amra-wrapper" data-aos="fade-up">
            <div class="about-amra-image">
                <img src="assets/images/amra2.webp" alt="Amra Kurešepi Zulji" loading="lazy" decoding="async" width="480" height="503">
            </div>
            <div class="about-amra-content">
                <p>Sem Amra – mama, žena, raziskovalka jezikov in kultur ter vaša zvesta sopotnica na zanimivi poti učenja in odkrivanja novih svetov.</p>
                <p>Kot profesorica angleščine in medkulturna posrednica vam pomagam usvajati angleščino (in druge jezike), odpirati vrata razumevanju ter ustvarjati priložnosti, da se v vsakem okolju počutite domače in samozavestno. Skupaj bomo rasli, se smejali in sijali v svetu novih možnosti!</p>
                <a href="/kdo-sem/" class="cta-button-alt">MOJA ZGODBA</a>
            </div>
            
            <!-- Okvirček: Priporočamo branje -->
            <div class="recommendation-box-home">
                <h3>Priporočamo branje</h3>
                <div class="rec-list">
                    <a href="/blog/clanki/2025-11-17-medkulturnost-prostor-za-rast.html" class="rec-item">
                        <img src="/assets/images/blog/2025-11-17-medkulturnost-prostor-za-rast/header.png" alt="Medkulturnost" class="rec-thumb">
                        <span>MEDKULTURNOST</span>
                    </a>
                    <a href="/blog/clanki/2025-11-18-dojemanje-casa-tocnosti-discipline.html" class="rec-item">
                        <img src="/assets/images/blog/2025-11-18-dojemanje-casa-tocnosti-discipline/header.png" alt="Čas, točnost in disciplina" class="rec-thumb">
                        <span>ČAS, TOČNOST IN DISCIPLINA</span>
                    </a>
                    <a href="/blog/clanki/2025-12-21-od-ucilnice-do-skupnosti.html" class="rec-item">
                        <img src="/assets/images/blog/2025-12-21-od-ucilnice-do-skupnosti/header.png" alt="Od učilnice do skupnosti" class="rec-thumb">
                        <span>OD UČILNICE DO SKUPNOSTI</span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 4. Sekcija: Poziv k akciji (CTA) -->
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
    <section class="final-cta">
        <div class="final-cta-content" data-aos="fade-up">
            <h2>Imaš vprašanje? Pokliči ali piši!</h2>
            <div class="final-cta-buttons">
                <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
            </div>
            <p>Skupaj ustvariva prostor za učenje in povezovanje.</p>
        </div>
    </section>

    <!-- ===== KONEC NOVE VSEBINE ===== -->
</main>

<footer>
    <div class="footer-content">
        <div class="footer-logo">
            <h3>PROSBERRY</h3>
        </div>
        <div class="footer-links">
            <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
        </div>
        <div class="footer-contact">
            <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
            <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
        </div>
    </div>
</footer>

<script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
<script src="js/main.js" defer></script>
</body>
</html>
"""


"./insert-references.sh" : 
"""
#!/bin/bash

# Konfiguracija
SNIPPET_FILE="references-snippet.html"
# Marker, pred katerega vstavimo vsebino (mora biti unique v HTML)
TARGET_MARKER='<section class="final-cta">'
# Marker, s katerim preverimo, ali je vsebina že vstavljena (da ne podvajamo)
CHECK_MARKER='class="references-section"'

# Preveri, če snippet obstaja
if [ ! -f "$SNIPPET_FILE" ]; then
    echo "NAPAKA: Datoteka $SNIPPET_FILE ne obstaja!"
    exit 1
fi

# Poišči vse HTML datoteke, razen v mapi cene-in-reference in templates
# Prav tako izključimo reference-snippet.html samega sebe
FILES=$(find . -type f -name "*.html" \
    ! -path "./cene-in-reference/*" \
    ! -path "./$SNIPPET_FILE" \
    ! -path "./header-template.html" \
    ! -path "./footer-template.html" \
    ! -path "./assets/*")

echo "Začenjam vstavljanje referenc..."

for file in $FILES; do
    # 1. Preveri, če datoteka sploh ima ciljni marker (final-cta)
    if ! grep -Fq "$TARGET_MARKER" "$file"; then
        echo "PRESKOČENO (ni final-cta): $file"
        continue
    fi

    # 2. Preveri, če datoteka že vsebuje reference (da ne podvojimo)
    if grep -Fq "$CHECK_MARKER" "$file"; then
        echo "PRESKOČENO (že vsebuje reference): $file"
        continue
    fi

    # 3. Izvedi vstavljanje z AWK
    # Logika: Ko najde TARGET_MARKER, najprej izpiše vsebino snippeta, nato marker
    awk -v snippet_file="$SNIPPET_FILE" -v target="$TARGET_MARKER" '
    $0 ~ target {
        while ((getline line < snippet_file) > 0) {
            print line
        }
        close(snippet_file)
    }
    { print }
    ' "$file" > "$file.tmp" && mv "$file.tmp" "$file"

    echo "POSODOBLJENO: $file"
done

echo "Končano!""""


"./js/main.js" : 
"""
document.addEventListener('DOMContentLoaded', function () { const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); const navLinks = document.querySelector('.nav-links'); let closeMobileMenu = () => { }; let resetMobileSubmenus = () => { }; const normalizePath = (value) => { if (!value) { return '/'; } let clean = value.split('?')[0].split('#')[0]; clean = clean.replace(/index\.html$/i, ''); clean = clean.replace(/\/+$/, ''); if (clean === '') { clean = '/'; } return clean; }; const applyActiveNavState = () => { const navRoot = document.querySelector('.nav-links'); if (!navRoot) { return; } navRoot.querySelectorAll('a.active, .dropbtn.active').forEach(el => { el.classList.remove('active'); }); const currentPath = normalizePath(window.location.pathname); const navAnchors = navRoot.querySelectorAll('a[href]'); let matchedLink = null; navAnchors.forEach(anchor => { const href = anchor.getAttribute('href'); if (!href || href.startsWith('http') || href.startsWith('mailto:') || href.startsWith('tel:') || href.startsWith('#')) { return; } const linkPath = normalizePath(href); if (linkPath === currentPath) { matchedLink = anchor; } }); if (!matchedLink) { return; } matchedLink.classList.add('active'); const highlightDropdownParents = (element) => { let parentContent = element.closest('.dropdown-submenu-content, .dropdown-content'); while (parentContent) { const trigger = parentContent.previousElementSibling; if (trigger && (trigger.tagName === 'A' || trigger.classList.contains('dropbtn'))) { trigger.classList.add('active'); } parentContent = parentContent.parentElement ? parentContent.parentElement.closest('.dropdown-submenu-content, .dropdown-content') : null; } }; highlightDropdownParents(matchedLink); const topLevelDropdown = matchedLink.closest('.dropdown'); if (topLevelDropdown) { const trigger = topLevelDropdown.querySelector('.dropbtn'); if (trigger) { trigger.classList.add('active'); } } }; if (mobileMenuBtn && navLinks) { resetMobileSubmenus = () => { navLinks.querySelectorAll('.dropdown-content, .dropdown-submenu-content').forEach(submenu => { submenu.style.display = 'none'; }); navLinks.querySelectorAll('.dropbtn, .dropdown-submenu > a').forEach(link => { link.classList.remove('active'); }); applyActiveNavState(); }; closeMobileMenu = () => { mobileMenuBtn.classList.remove('active'); navLinks.classList.remove('active'); document.body.classList.remove('no-scroll'); resetMobileSubmenus(); }; mobileMenuBtn.addEventListener('click', (event) => { event.stopPropagation(); const willOpen = !navLinks.classList.contains('active'); if (willOpen) { mobileMenuBtn.classList.add('active'); navLinks.classList.add('active'); document.body.classList.add('no-scroll'); resetMobileSubmenus(); } else { closeMobileMenu(); } }); } applyActiveNavState(); const dropdowns = document.querySelectorAll('.nav-links .dropdown-submenu > a, .nav-links .dropdown > .dropbtn'); dropdowns.forEach(item => { item.addEventListener('click', function (event) { if (window.innerWidth <= 768) { if (item.tagName === 'A') { event.preventDefault(); } event.stopPropagation(); const submenu = item.nextElementSibling; if (!submenu) { return; } const isTopLevelTrigger = item.classList.contains('dropbtn'); if (isTopLevelTrigger) { navLinks.querySelectorAll('.dropdown-content').forEach(panel => { if (panel !== submenu) { panel.style.display = 'none'; const trigger = panel.parentElement.querySelector('.dropbtn'); if (trigger) { trigger.classList.remove('active'); } panel.querySelectorAll('.dropdown-submenu-content').forEach(child => { child.style.display = 'none'; const childTrigger = child.parentElement.querySelector(':scope > a'); if (childTrigger) { childTrigger.classList.remove('active'); } }); } }); } else { const siblingsWrapper = item.parentElement && item.parentElement.parentElement; if (siblingsWrapper) { siblingsWrapper.querySelectorAll(':scope > .dropdown-submenu > .dropdown-submenu-content').forEach(panel => { if (panel !== submenu) { panel.style.display = 'none'; const trigger = panel.parentElement.querySelector(':scope > a'); if (trigger) { trigger.classList.remove('active'); } panel.querySelectorAll('.dropdown-submenu-content').forEach(child => { child.style.display = 'none'; const childTrigger = child.parentElement.querySelector(':scope > a'); if (childTrigger) { childTrigger.classList.remove('active'); } }); } }); } } const shouldOpen = submenu.style.display !== 'block'; if (shouldOpen) { submenu.style.display = 'block'; item.classList.add('active'); submenu.querySelectorAll('.dropdown-submenu-content').forEach(child => { child.style.display = 'none'; const childTrigger = child.parentElement.querySelector(':scope > a'); if (childTrigger) { childTrigger.classList.remove('active'); } }); } else { submenu.style.display = 'none'; item.classList.remove('active'); submenu.querySelectorAll('.dropdown-submenu-content').forEach(child => { child.style.display = 'none'; const childTrigger = child.parentElement.querySelector(':scope > a'); if (childTrigger) { childTrigger.classList.remove('active'); } }); } } }); }); document.addEventListener('click', function (event) { if (window.innerWidth <= 768 && navLinks && navLinks.classList.contains('active')) { const isClickInsideNav = navLinks.contains(event.target); const isClickOnBtn = mobileMenuBtn && mobileMenuBtn.contains(event.target); if (!isClickInsideNav && !isClickOnBtn) { closeMobileMenu(); } } }); const navLinkItems = document.querySelectorAll('.nav-links a'); navLinkItems.forEach(link => { link.addEventListener('click', (event) => { const hasSubmenu = link.parentElement.classList.contains('dropdown-submenu') || link.classList.contains('dropbtn'); if (window.innerWidth <= 768) { if (hasSubmenu) { return; } closeMobileMenu(); } }); }); const accordions = document.querySelectorAll('.accordion-toggle'); accordions.forEach(accordion => { accordion.addEventListener('click', function () { const accordionItem = this.closest('.mediation-accordion-item'); const content = accordionItem ? accordionItem.querySelector('.accordion-content') : null; if (!content) { return; } this.classList.toggle('active'); const isOpen = this.classList.contains('active'); this.setAttribute('aria-expanded', String(isOpen)); content.setAttribute('aria-hidden', String(!isOpen)); if (isOpen) { content.style.maxHeight = content.scrollHeight + "px"; this.textContent = 'Manj'; } else { content.style.maxHeight = null; this.textContent = 'Več'; } }); accordion.textContent = 'Več'; accordion.setAttribute('aria-expanded', 'false'); const initialContent = accordion.closest('.mediation-accordion-item')?.querySelector('.accordion-content'); if (initialContent) { initialContent.setAttribute('aria-hidden', 'true'); } }); const header = document.querySelector('.main-header'); if (header) { let lastScroll = 0; window.addEventListener('scroll', () => { const currentScroll = window.pageYOffset; if (currentScroll <= 0) { header.classList.remove('scroll-up'); return; } if (currentScroll > lastScroll && !header.classList.contains('scroll-down')) { header.classList.remove('scroll-up'); header.classList.add('scroll-down'); } else if (currentScroll < lastScroll && header.classList.contains('scroll-down')) { header.classList.remove('scroll-down'); header.classList.add('scroll-up'); } lastScroll = currentScroll; }); } const mediationSections = document.querySelectorAll('.mediation-section'); if (mediationSections.length) { const mediationTitles = document.querySelectorAll('.mediation-section h2'); const closeAllSections = () => { mediationSections.forEach(section => { section.classList.remove('active'); }); }; mediationTitles.forEach(title => { title.addEventListener('click', () => { const parentSection = title.parentElement; const isAlreadyActive = parentSection.classList.contains('active'); closeAllSections(); if (!isAlreadyActive) { parentSection.classList.add('active'); } }); }); const openSectionFromHash = () => { const hash = window.location.hash; if (hash) { const targetSection = document.querySelector(hash); if (targetSection && targetSection.classList.contains('mediation-section')) { closeAllSections(); targetSection.classList.add('active'); } } }; window.addEventListener('hashchange', openSectionFromHash); openSectionFromHash(); if (!document.querySelector('.mediation-section.active') && mediationSections[0]) { mediationSections[0].classList.add('active'); } } const dropdownContainers = document.querySelectorAll('.nav-links .dropdown'); if (dropdownContainers.length) { const closeAllDropdowns = () => { dropdownContainers.forEach(container => { const dropdownContent = container.querySelector('.dropdown-content'); if (!dropdownContent) { return; } container.classList.remove('is-open'); dropdownContent.style.display = 'none'; dropdownContent.querySelectorAll('.dropdown-submenu-content').forEach(submenu => { submenu.style.display = 'none'; }); }); }; dropdownContainers.forEach(container => { const dropBtn = container.querySelector('.dropbtn'); const dropdownContent = container.querySelector('.dropdown-content'); if (!dropBtn || !dropdownContent) { return; } const closeDropdown = () => { container.classList.remove('is-open'); dropdownContent.style.display = 'none'; dropdownContent.querySelectorAll('.dropdown-submenu-content').forEach(submenu => { submenu.style.display = 'none'; }); }; const openDropdown = () => { container.classList.add('is-open'); dropdownContent.style.display = 'block'; }; dropBtn.addEventListener('click', (event) => { if (window.innerWidth <= 768) { return; } const href = dropBtn.getAttribute('href'); if (href && href !== '#' && href.trim() !== '') { return; } event.preventDefault(); const isOpen = container.classList.contains('is-open'); closeAllDropdowns(); if (!isOpen) { openDropdown(); } }); const submenuLinks = container.querySelectorAll('.dropdown-submenu > a'); submenuLinks.forEach(link => { const submenu = link.nextElementSibling; if (!submenu) { return; } link.addEventListener('click', (event) => { if (window.innerWidth <= 768) { return; } const parentList = link.parentElement.parentElement; parentList.querySelectorAll(':scope > .dropdown-submenu > .dropdown-submenu-content').forEach(sm => { if (sm !== submenu) { sm.style.display = 'none'; } }); const isOpen = submenu.style.display === 'block'; const href = link.getAttribute('href') || ''; if (href === '#' || href.trim() === '') { event.preventDefault(); submenu.style.display = isOpen ? 'none' : 'block'; return; } if (!isOpen) { event.preventDefault(); submenu.style.display = 'block'; } else { closeDropdown(); } }); }); container.querySelectorAll('.dropdown-submenu-content a').forEach(link => { if (link.nextElementSibling) { return; } link.addEventListener('click', () => { if (window.innerWidth <= 768) { return; } closeAllDropdowns(); closeMobileMenu(); }); }); }); document.addEventListener('click', (event) => { if (window.innerWidth <= 768) { return; } const clickedInside = Array.from(dropdownContainers).some(container => container.contains(event.target)); if (!clickedInside) { closeAllDropdowns(); } }); window.addEventListener('resize', () => { if (window.innerWidth <= 768) { closeAllDropdowns(); closeMobileMenu(); } }); } window.addEventListener('resize', () => { if (window.innerWidth > 768) { closeMobileMenu(); } }); if (typeof AOS !== 'undefined') { AOS.init({ duration: 600, easing: 'ease-out', once: true, offset: 50, delay: 100, disable: 'mobile' }); } const readMoreBtn = document.querySelector('.read-more-btn'); const moreStoryContent = document.querySelector('.more-story-content'); if (readMoreBtn && moreStoryContent) { if (moreStoryContent.id) { readMoreBtn.setAttribute('aria-controls', moreStoryContent.id); } const applyStoryState = (isVisible) => { readMoreBtn.textContent = isVisible ? 'Skrij zgodbo' : 'Moja zgodba'; readMoreBtn.setAttribute('aria-expanded', isVisible ? 'true' : 'false'); moreStoryContent.setAttribute('aria-hidden', isVisible ? 'false' : 'true'); }; let isExpanded = moreStoryContent.classList.contains('visible'); applyStoryState(isExpanded); moreStoryContent.style.height = isExpanded ? 'auto' : '0px'; const openStory = () => { moreStoryContent.classList.add('visible'); const targetHeight = moreStoryContent.scrollHeight; moreStoryContent.classList.add('is-animating'); moreStoryContent.style.height = '0px'; requestAnimationFrame(() => { moreStoryContent.style.height = `${targetHeight}px`; }); }; const closeStory = () => { const currentHeight = moreStoryContent.scrollHeight; moreStoryContent.style.height = `${currentHeight}px`; moreStoryContent.classList.add('is-animating'); requestAnimationFrame(() => { moreStoryContent.style.height = '0px'; }); }; moreStoryContent.addEventListener('transitionend', (event) => { if (event.propertyName !== 'height') { return; } moreStoryContent.classList.remove('is-animating'); if (isExpanded) { moreStoryContent.style.height = 'auto'; } else { moreStoryContent.classList.remove('visible'); moreStoryContent.style.height = ''; } }); readMoreBtn.addEventListener('click', () => { if (moreStoryContent.classList.contains('is-animating')) { return; } isExpanded = !isExpanded; applyStoryState(isExpanded); if (isExpanded) { openStory(); } else { closeStory(); } }); } }); function showError(input, message) { const formControl = input.parentElement; const errorDiv = formControl.querySelector('.error-message') || document.createElement('div'); errorDiv.className = 'error-message'; errorDiv.textContent = message; if (!formControl.querySelector('.error-message')) { formControl.appendChild(errorDiv); } formControl.classList.add('error'); } function removeError(input) { const formControl = input.parentElement; const errorDiv = formControl.querySelector('.error-message'); if (errorDiv) { formControl.removeChild(errorDiv); } formControl.classList.remove('error'); } function isValidEmail(email) { const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(String(email).toLowerCase()); }"""


"./kdo-sem/index.html" : 
"""
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kdo sem - Prosberry</title>
    <meta name="description" content="Spoznajte Amro Kurešepi Zulji, ustanoviteljico Prosberry. Odkrijte njeno osebno zgodbo, izkušnje z večjezičnostjo in strast do podpore posameznikom pri učenju jezikov in medkulturnem razumevanju.">
    <meta name="keywords" content="Amra Kurešepi Zulji, Prosberry, o meni, medkulturna mediatorka, profesorica angleščine, osebna rast, zgodba o uspehu">
    <meta name="author" content="Amra Kurešepi Zulji">
    <link rel="canonical" href="https://www.prosberry.si/kdo-sem/">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://unpkg.com">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link rel="dns-prefetch" href="https://unpkg.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/animations.css">

    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>
<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" >Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" class="active">Kdo sem</a>
            <a href="/cene-in-reference/" >Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" >Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>



    <main>
        <section class="about-hero">
            <div class="about-hero-container">
                <div class="about-hero-text" data-aos="fade-up">
                    <span class="about-hero-kicker">O meni</span>
                    <h1>Povezanost z jeziki, ljudmi in zgodbami</h1>
                    <p>Od nekdaj sem imela rada jezike, ljudi in zgodbe. Življenje v večjezičnem okolju me je naučilo naravno prehajati med jeziki in kulturami. Svojo poklicno pot sem začela z osnovnim študijem angleškega jezika in književnosti na Univerzi v Prištini. Nadaljevala sem na Filozofski fakulteti v Ljubljani, kjer sem opravila magistrski študij angleščine. Že med študijem sem začela poučevati – najprej prostovoljno, pozneje tudi poklicno. Poučevala sem otroke, mladostnike in odrasle, tako v skupinah kot individualno, kar mi je dalo prilagodljivost, potrpežljivost in občutek za različne potrebe učencev. Takrat sem začela zares verjeti, da lahko s tem delom pomagam ljudem in obenem rastem tudi sama. Kasneje sem se izobraževala za medkulturno mediatorko, da bi še bolje podpirala ljudi pri vključevanju v novo okolje.</p>
                </div>
                <div class="about-hero-image" data-aos="fade-left" data-aos-delay="150" style="flex-direction: column; align-items: center; gap: 3rem;">
                    <div class="image-frame">
                        <picture>
                            <source srcset="../assets/images/kdo-sem-fotografija.webp" type="image/webp">
                            <img src="../assets/images/kdo-sem-fotografija.jpg" alt="Amra Kurešepi Zulji" loading="lazy" decoding="async" width="1600" height="900">
                        </picture>
                    </div>

                    <!-- ZAČETEK NOVEGA OKVIRČKA -->
                    <div class="recommendation-box">
                        <h3>Priporočamo branje</h3>
                        <div class="rec-list">
                            <a href="/blog/clanki/2025-11-17-medkulturnost-prostor-za-rast.html" class="rec-item">
                                <div class="rec-icon">🌍</div>
                                <span>MEDKULTURNOST</span>
                            </a>
                            <a href="/blog/clanki/2025-11-18-dojemanje-casa-tocnosti-discipline.html" class="rec-item">
                                <div class="rec-icon">⏱️</div>
                                <span>ČAS, TOČNOST IN DISCIPLINA</span>
                            </a>
                            <a href="/blog/clanki/2025-12-21-od-ucilnice-do-skupnosti.html" class="rec-item">
                                <div class="rec-icon">🏫</div>
                                <span>OD UČILNICE DO SKUPNOSTI</span>
                            </a>
                        </div>
                    </div>
                    <!-- KONEC NOVEGA OKVIRČKA -->
                </div>
            </div>
            <div class="about-hero-shape shape-a"></div>
            <div class="about-hero-shape shape-b"></div>
            <div class="about-hero-shape shape-c"></div>
            <div class="about-hero-shape shape-d"></div>
        </section>

        <section class="about-accordion-section">
            <div class="about-accordion-container">
                <div class="about-accordion-list">
                    <div class="about-accordion-item" data-aos="fade-up" data-aos-delay="50">
                        <button class="about-accordion-toggle" type="button" aria-expanded="true">
                            <span>Osebna izkušnja in razumevanje</span>
                            <span class="accordion-icon" aria-hidden="true"></span>
                        </button>
                        <div class="about-accordion-content">
                            <p>Sama sem doživela selitev v drugo državo, zato dobro vem, kako pomembno je, da te nekdo razume, prisluhne in ti pomaga poiskati pravo pot. Posebno blizu so mi posamezniki in družine, ki se znajdejo v novem okolju – tujci v Sloveniji, priseljenci, otroci iz večjezičnih družin in tisti, ki doma govorijo drug jezik. Za mnoge je jezik povezan z občutki negotovosti, sramežljivosti ali izključenosti. Prav zato si prizadevam ustvariti varen in spodbuden prostor, kjer govor odpira vrata do osebne in družbene rasti. Z leti sem začela vse bolj prepoznavati pomen medkulturnega razumevanja in razvijala občutek za to, kaj posameznik v resnici potrebuje.</p>
                        </div>
                    </div>
                    <div class="about-accordion-item" data-aos="fade-up" data-aos-delay="100">
                        <button class="about-accordion-toggle" type="button" aria-expanded="false">
                            <span>Podpora in pristop, ki temelji na spoštovanju</span>
                            <span class="accordion-icon" aria-hidden="true"></span>
                        </button>
                        <div class="about-accordion-content" hidden>
                            <p>Skozi leta sem sodelovala z ljudmi z zelo različnimi izkušnjami – od začetnikov do tistih, ki so želeli znanje nadgraditi zaradi študija ali poklica. Poleg poučevanja sem pogosto pomagala pri prevodih, sporazumevanju z uradi, izpolnjevanju obrazcev in razumevanju kulturnih razlik. Zaradi teh izkušenj svoje delo vidim kot več kot le poučevanje; zame je to odnos, podpora, varnost in skupna rast. Kot mama zelo dobro razumem, kaj pomeni usklajevati različne vloge. Vem, kako pomembno je, da ti nekdo prisluhne in da te vodi na način, ki ti ustreza. Moj pristop temelji na poslušanju, spoštovanju in prilagajanju vsakemu posamezniku – ne glede na to, ali gre za učenje jezika, pripravo na izpit, prevod dokumenta ali preprosto podporo.</p>
                        </div>
                    </div>
                    <div class="about-accordion-item" data-aos="fade-up" data-aos-delay="150">
                        <button class="about-accordion-toggle" type="button" aria-expanded="false">
                            <span>PROSBERRY – osebna in profesionalna rast</span>
                            <span class="accordion-icon" aria-hidden="true"></span>
                        </button>
                        <div class="about-accordion-content" hidden>
                            <p>Od leta 2023 delujem samostojno pod imenom PROSBERRY. Ime združuje simboliko rasti in dozorevanja z zavestnim, profesionalnim pristopom. Svojim strankam želim biti zanesljiva spremljevalka na poti do večje jezikovne samozavesti in lažjega vključevanja v novo okolje – s toplino, jasno komunikacijo in globokim razumevanjem človeka.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
        <div class="final-cta-content" data-aos="fade-up">
            <h2>Imaš vprašanje? Pokliči ali piši!</h2>
            <div class="final-cta-buttons">
                <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
            </div>
            <p>Skupaj ustvariva prostor za učenje in povezovanje.</p>
        </div>
    </section>

</main>

<footer>
    <div class="footer-content">
        <div class="footer-logo">
            <h3>PROSBERRY</h3>
        </div>
        <div class="footer-links">
            <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
        </div>
        <div class="footer-contact">
            <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
            <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
        </div>
    </div>
</footer>

    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="../js/main.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const toggles = document.querySelectorAll('.about-accordion-toggle');
            toggles.forEach(toggle => {
                const content = toggle.nextElementSibling;
                const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
                if (content) {
                    content.hidden = !isExpanded;
                }
                toggle.addEventListener('click', () => {
                    const currentlyExpanded = toggle.getAttribute('aria-expanded') === 'true';
                    toggle.setAttribute('aria-expanded', String(!currentlyExpanded));
                    if (content) {
                        content.hidden = currentlyExpanded;
                    }
                });
            });
        });
    </script>
</body>
</html>
"""


"./kontakt/index.html" : 
"""
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kontakt - Prosberry</title>
    <meta name="description" content="Stopite v stik z Prosberry za tečaje angleščine, medkulturno posredovanje ali delavnice. Izpolnite kontaktni obrazec ali nas pokličite in z veseljem vam bomo pomagali.">
    <meta name="keywords" content="kontakt, Prosberry, Amra Kurešepi Zulji, tečaji angleščine, medkulturno posredovanje, delavnice, povpraševanje">
    <meta name="author" content="Amra Kurešepi Zulji">
    <link rel="canonical" href="https://www.prosberry.si/kontakt/">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://unpkg.com">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link rel="dns-prefetch" href="https://unpkg.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/animations.css">

    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>
<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" >Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" >Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" >Blog</a>
            <a href="/kontakt/" class="active">Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>
    <main>
        <section class="contact-hero">
            <div class="contact-hero-content" data-aos="fade-up">
                <span class="contact-hero-kicker">Povežimo se</span>
                <h1>Kontakt</h1>
                <p class="contact-hero-lead">Veselim se sodelovanja pri vašem naslednjem tečaju, delavnici ali medkulturnem posredovanju.</p>
            </div>
            <div class="contact-hero-shape shape-a"></div>
            <div class="contact-hero-shape shape-b"></div>
            <div class="contact-hero-shape shape-c"></div>
            <div class="contact-hero-shape shape-d"></div>
        </section>
        <section class="contact-main">
            <div class="contact-main-container">
                <div class="contact-info-panel" data-aos="fade-up">
                    <h2>Stopimo v stik</h2>
                    <p class="contact-info-lead">Če želite izvedeti več o naših tečajih, delavnicah ali medkulturnem posredovanju, sem tukaj – lahko mi pišete ali me kontaktirate!</p>
                    <ul class="contact-services">
                        <li>Tečaji angleščine vseh nivojev</li>
                        <li>Medkulturno posredovanje za šole, vrtce, zdravstvene ustanove in druge organizacije</li>
                        <li>Delavnice za učence, starše in strokovne time</li>
                        <li>Podpora pri učenju jezikov in vključevanju novih družin</li>
                    </ul>
                    <div class="contact-details">
                        <div class="contact-detail">
                            <span class="detail-label">Email</span>
                            <a href="mailto:info@prosberry.si">info@prosberry.si</a>
                        </div>
                        <div class="contact-detail">
                            <span class="detail-label">Telefon</span>
                            <a href="tel:+38630312855">030 312 855</a>
                        </div>
                    </div>
                    <div class="contact-note">
                        <p>Dogovorimo se za kratek posvet, da skupaj bolje razumemo možnosti sodelovanja in poiščemo prave korake naprej.</p>
                    </div>
                </div>
                <div class="contact-form-panel" data-aos="fade-up" data-aos-delay="100">
                    <div class="contact-form-card">
                        <h3>Za več informacij</h3>
                        <p class="contact-form-lead">Izpolnite obrazec in sporočite, kako vam lahko pomagamo. Odgovor boste prejeli v najkrajšem možnem času.</p>
                        <form class="contact-form" id="contactForm">
                            <div class="form-group">
                                <label for="name">Ime in priimek</label>
                                <input type="text" id="name" name="name" required>
                            </div>
                            <div class="form-group">
                                <label for="email">Email naslov</label>
                                <input type="email" id="email" name="email" required>
                            </div>
                            <div class="form-group">
                                <label for="message">Sporočilo</label>
                                <textarea id="message" name="message" rows="6" required></textarea>
                            </div>
                            <div id="formMessage" class="form-message" style="display: none;"></div>
                            <button type="submit" class="submit-btn">Pošljite sporočilo</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
        <div class="final-cta-content" data-aos="fade-up">
            <h2>Imaš vprašanje? Pokliči ali piši!</h2>
            <div class="final-cta-buttons">
                <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
            </div>
            <p>Skupaj ustvariva prostor za učenje in povezovanje.</p>
        </div>
    </section>

</main>
<footer>
    <div class="footer-content">
        <div class="footer-logo">
            <h3>PROSBERRY</h3>
        </div>
        <div class="footer-links">
            <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
        </div>
        <div class="footer-contact">
            <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
            <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
        </div>
    </div>
</footer>
    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // --- Form Submission Logic ---
            const contactForm = document.getElementById('contactForm');
            if (contactForm) {
                contactForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    const formData = new FormData(this);
                    const messageDiv = document.getElementById('formMessage');
                    const submitButton = this.querySelector('button[type="submit"]');
                    
                    submitButton.disabled = true;
                    submitButton.textContent = 'Pošiljam...';

                    fetch('../../../../kontakt/process_form.php', {
                            method: 'POST',
                            body: formData
                        })
                        .then(response => response.text())
                        .then(data => {
                            messageDiv.style.display = 'block';
                            if (data.includes('Hvala')) {
                                messageDiv.className = 'form-message success-message';
                                this.reset();
                            } else {
                                messageDiv.className = 'form-message error-message';
                            }
                            messageDiv.textContent = data;
                        })
                        .catch(error => {
                            messageDiv.style.display = 'block';
                            messageDiv.className = 'form-message error-message';
                            messageDiv.textContent = 'Prišlo je do napake. Prosimo poskusite ponovno.';
                            console.error('Error:', error);
                        })
                        .finally(() => {
                            submitButton.disabled = false;
                            submitButton.textContent = 'Pošlji sporočilo';
                        });
                });
            }

        });
    </script>
</body>
</html>
"""


"./kontakt/process_form.php" : 
"""
<?php
// Preveri če je zahteva POST
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Pridobi podatke iz obrazca
    $name = isset($_POST['name']) ? strip_tags(trim($_POST['name'])) : '';
    $email = isset($_POST['email']) ? filter_var(trim($_POST['email']), FILTER_SANITIZE_EMAIL) : '';
    $message = isset($_POST['message']) ? strip_tags(trim($_POST['message'])) : '';

    // Preveri če so vsa polja izpolnjena
    if (empty($name) || empty($message) || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
        http_response_code(400);
        echo "Prosimo izpolnite vsa polja pravilno.";
        exit;
    }

    // Nastavi prejemnika in zadevo
    $recipient = "info@prosberry.si";
    $subject = "Novo sporočilo iz kontaktnega obrazca - $name";

    // Pripravi vsebino emaila
    $email_content = "Ime: $name\n";
    $email_content .= "Email: $email\n\n";
    $email_content .= "Sporočilo:\n$message\n";

    // Nastavi email headers
    $email_headers = "From: $name <$email>\r\n";
    $email_headers .= "Reply-To: $email\r\n";
    $email_headers .= "X-Mailer: PHP/" . phpversion();

    // Pošlji email
    if (mail($recipient, $subject, $email_content, $email_headers)) {
        http_response_code(200);
        echo "Hvala! Vaše sporočilo je bilo uspešno poslano.";
    } else {
        http_response_code(500);
        echo "Oprostite! Prišlo je do napake pri pošiljanju sporočila.";
    }
} else {
    http_response_code(403);
    echo "Prišlo je do napake pri obdelavi zahteve.";
}
?> """


"./minify_js.py" : 
"""

import re

with open("/home/mark/prosberry/js/main.js", "r") as f:
    js_content = f.read()

# Remove single-line comments
js_content = re.sub(r"//.*", "", js_content)
# Remove multi-line comments
js_content = re.sub(r"/\*.*?\*/", "", js_content, flags=re.DOTALL)
# Remove newlines and extra whitespace
js_content = re.sub(r"\s+", " ", js_content)
js_content = js_content.strip()

with open("/home/mark/prosberry/js/main.js", "w") as f:
    f.write(js_content)
"""


"./optimize_images.py" : 
"""
import os
import argparse
import shutil
from PIL import Image

# --- Konfiguracija skripte za projekt "Hermina" ---

# Predpostavka: ta skripta se nahaja v korenski mapi projekta.
PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))

# Pot do mape, kjer se nahajajo slike, ki jih želimo optimizirati.
IMAGES_DIR_PATH = os.path.join("assets", "images")

# Ime podmape znotraj IMAGES_DIR_PATH, kamor se bodo shranile originalne slike.
ORIGINAL_IMAGES_SUBDIR_NAME = "original"

# Mape, ki jih želimo PREGLEDATI za posodobitev referenc na slike.
# '.' pomeni, da začnemo v korenski mapi in pregledamo vse podmape.
DIRECTORIES_TO_SCAN = ['.']

# Mape, ki jih želimo IZKLJUČITI iz pregledovanja (za hitrejše delovanje in varnost).
# Skripta ne bo iskala referenc v teh mapah.
DIRECTORIES_TO_EXCLUDE_FROM_SCAN = ['.git', '.gitea', '.vscode', '__pycache__']

# Končnice datotek, v katerih iščemo in posodabljamo reference na slike.
FILE_EXTENSIONS_TO_UPDATE = ['.html', '.css', '.js']

# Nastavitve optimizacije
WEBP_QUALITY = 85  # Kakovost kompresije za WebP (0-100). Višje = boljša kvaliteta, večja datoteka.
MAX_IMAGE_DIMENSION = 1920  # Slike, večje od te dimenzije (širina ali višina), bodo pomanjšane. 0 za izklop.

# Končnice slik, ki jih želimo optimizirati.
IMAGE_EXTENSIONS_TO_OPTIMIZE = ['.jpg', '.jpeg', '.png']

# Imena datotek, ki jih želimo preskočiti pri optimizaciji (npr. logotipi, ikone).
EXCLUDE_FILES_FROM_OPTIMIZATION = [
    'favicon.ico'
    # Dodajte imena drugih datotek po potrebi, npr. 'logo.png'
]


# --- Pomožne funkcije (večinoma nespremenjene) ---

def optimize_image(image_path, output_path, quality, max_dim, dry_run=False):
    """
    Naloži sliko, jo po potrebi pomanjša, optimizira in pretvori v WebP format.
    """
    try:
        with Image.open(image_path) as img:
            # Pretvorba slik s paleto (kot so nekatere PNG) v RGBA za ohranitev prosojnosti.
            if img.mode in ('P', 'LA'):
                img = img.convert("RGBA")

            if max_dim > 0 and (img.width > max_dim or img.height > max_dim):
                print(f"  Pomanjšujem sliko {os.path.basename(image_path)} iz {img.width}x{img.height} ...", end="")
                img.thumbnail((max_dim, max_dim), Image.Resampling.LANCZOS)
                print(f" na {img.width}x{img.height}")
            else:
                print(f"  Obdelujem sliko {os.path.basename(image_path)} ({img.width}x{img.height})...", end="")

            if not dry_run:
                img.save(output_path, "webp", quality=quality, method=6)
                print(f" Shrani v {os.path.basename(output_path)} (kvaliteta: {quality}).")
            else:
                print(f" DRY RUN: Shranil bi v {os.path.basename(output_path)} (kvaliteta: {quality}).")

            return True
    except FileNotFoundError:
        print(f"  Napaka: Izvorna slika '{image_path}' ni najdena.")
        return False
    except Exception as e:
        print(f"  Napaka pri optimizaciji slike '{image_path}': {e}")
        return False

def update_file_references(file_path, old_filename, new_filename, dry_run=False):
    """
    V dani datoteki zamenja vse pojavitve starega imena slike z novim.
    """
    try:
        with open(file_path, 'r', encoding='utf-8') as f:
            content = f.read()
    except Exception:
        # Ignoriramo binarne ali neberljive datoteke
        return False

    if old_filename in content:
        updated_content = content.replace(old_filename, new_filename)
        if not dry_run:
            try:
                with open(file_path, 'w', encoding='utf-8') as f:
                    f.write(updated_content)
                print(f"  Posodobljene reference v: '{os.path.relpath(file_path, PROJECT_ROOT)}'")
                return True
            except Exception as e:
                print(f"  Napaka pri zapisovanju v '{file_path}': {e}")
                return False
        else:
            print(f"  DRY RUN: Posodobil bi reference v: '{os.path.relpath(file_path, PROJECT_ROOT)}'")
            return True
    return False

def find_files_to_update(scan_dirs, exclude_dirs):
    """
    Rekurzivno poišče vse datoteke z ustreznimi končnicami, pri tem pa ignorira izključene mape.
    """
    found_files = []
    for directory in scan_dirs:
        scan_path = os.path.join(PROJECT_ROOT, directory)
        for dirpath, dirnames, filenames in os.walk(scan_path):
            # Učinkovit način za izključitev map: odstranimo jih iz seznama za nadaljnje pregledovanje
            dirnames[:] = [d for d in dirnames if d not in exclude_dirs]
            
            for filename in filenames:
                if any(filename.endswith(ext) for ext in FILE_EXTENSIONS_TO_UPDATE):
                    found_files.append(os.path.join(dirpath, filename))
    return sorted(list(set(found_files)))


# --- Glavna funkcija ---

def main():
    parser = argparse.ArgumentParser(description="Optimizira slike v WebP in posodobi reference v projektu.")
    parser.add_argument("--dry-run", action="store_true", help="Prikaže, katere spremembe bi se zgodile, a jih ne izvede.")
    args = parser.parse_args()

    images_full_path = os.path.join(PROJECT_ROOT, IMAGES_DIR_PATH)
    original_images_full_path = os.path.join(images_full_path, ORIGINAL_IMAGES_SUBDIR_NAME)
    
    # Dodamo mapo z originali v seznam za izključitev, da ne skeniramo še tam.
    DIRECTORIES_TO_EXCLUDE_FROM_SCAN.append(ORIGINAL_IMAGES_SUBDIR_NAME)

    if not os.path.isdir(images_full_path):
        print(f"Napaka: Mapa s slikami '{images_full_path}' ne obstaja. Preverite pot v konfiguraciji.")
        return

    if not args.dry_run:
        os.makedirs(original_images_full_path, exist_ok=True)
        print(f"Mapa za originale: '{original_images_full_path}'")
    else:
        print(f"DRY RUN: Mapa za originale bi bila '{original_images_full_path}'.")

    optimized_images_map = []
    
    print("\n--- FAZA 1: OPTIMIZACIJA SLIK ---")
    for dirpath, dirnames, filenames in os.walk(images_full_path):
        # preskoči mapo z originali, če že obstaja
        dirnames[:] = [
            d for d in dirnames
            if os.path.relpath(os.path.join(dirpath, d), images_full_path) != ORIGINAL_IMAGES_SUBDIR_NAME
        ]

        for filename in filenames:
            file_path = os.path.join(dirpath, filename)

            if not os.path.isfile(file_path):
                continue

            name, ext = os.path.splitext(filename)
            ext = ext.lower()

            if filename in EXCLUDE_FILES_FROM_OPTIMIZATION:
                print(f"- Preskakujem izključeno datoteko: '{filename}'")
                continue

            if ext in IMAGE_EXTENSIONS_TO_OPTIMIZE:
                new_filename = f"{name}.webp"
                new_file_path = os.path.join(dirpath, new_filename)

                rel_dir = os.path.relpath(dirpath, images_full_path)
                rel_dir = "" if rel_dir == "." else rel_dir
                old_rel_path = os.path.join(rel_dir, filename) if rel_dir else filename
                new_rel_path = os.path.join(rel_dir, new_filename) if rel_dir else new_filename
                old_rel_path = old_rel_path.replace(os.sep, "/")
                new_rel_path = new_rel_path.replace(os.sep, "/")

                # Preveri, če WebP verzija že obstaja in je novejša
                if os.path.exists(new_file_path) and os.path.getmtime(new_file_path) > os.path.getmtime(file_path):
                    print(f"- WebP '{new_rel_path}' že obstaja in je posodobljen. Preskakujem optimizacijo.")
                    optimized_images_map.append({'old': filename, 'new': new_filename, 'old_path': old_rel_path, 'new_path': new_rel_path})
                    continue

                if optimize_image(file_path, new_file_path, WEBP_QUALITY, MAX_IMAGE_DIMENSION, args.dry_run):
                    optimized_images_map.append({'old': filename, 'new': new_filename, 'old_path': old_rel_path, 'new_path': new_rel_path})
                    if not args.dry_run:
                        try:
                            destination_dir = os.path.join(original_images_full_path, rel_dir) if rel_dir else original_images_full_path
                            os.makedirs(destination_dir, exist_ok=True)
                            shutil.move(file_path, os.path.join(destination_dir, filename))
                            print(f"  Original '{old_rel_path}' premaknjen v '{ORIGINAL_IMAGES_SUBDIR_NAME}/'.")
                        except Exception as e:
                            print(f"  NAPAKA pri premikanju '{old_rel_path}': {e}")
                    else:
                        print(f"  DRY RUN: Original '{old_rel_path}' bi bil premaknjen v '{ORIGINAL_IMAGES_SUBDIR_NAME}/'.")

    if not optimized_images_map:
        print("\nNi bilo najdenih novih slik za optimizacijo.")
    
    print("\n--- FAZA 2: POSODABLJANJE REFERENC V PROJEKTU ---")
    
    files_to_scan = find_files_to_update(DIRECTORIES_TO_SCAN, DIRECTORIES_TO_EXCLUDE_FROM_SCAN)
    
    if not files_to_scan:
        print("Ni najdenih .html, .css ali .js datotek za pregled.")
    else:
        print(f"Najdenih {len(files_to_scan)} datotek za pregled...")

    updated_files_count = 0
    for file_path in files_to_scan:
        file_was_updated = False
        for img_info in optimized_images_map:
            replaced = False
            if update_file_references(file_path, img_info['old_path'], img_info['new_path'], args.dry_run):
                replaced = True
            # za nazaj združljivost: če je v datoteki samo ime brez poti
            if update_file_references(file_path, img_info['old'], img_info['new'], args.dry_run):
                replaced = True

            if replaced:
                file_was_updated = True
        
        if file_was_updated:
            updated_files_count += 1
            
    print(f"\nPregledanih je bilo {len(files_to_scan)} datotek.")
    print(f"Posodobljenih je bilo {updated_files_count} datotek.")
    print("\n--- SKRIPTA JE ZAKLJUČILA Z DELOM ---")

if __name__ == "__main__":
    main()
"""


"./pogosta-vprasanja/index.html" : 
"""
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pogosta vprašanja - Prosberry</title>
    <meta name="description" content="Poiščite odgovore na pogosta vprašanja o medkulturnem posredovanju, delavnicah in sodelovanju z Prosberry. Izvedite več o naših storitvah in kako vam lahko pomagamo.">
    <meta name="keywords" content="pogosta vprašanja, FAQ, medkulturno posredovanje, delavnice, Prosberry, Amra Kurešepi Zulji, vprašanja in odgovori">
    <meta name="author" content="Amra Kurešepi Zulji">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://unpkg.com">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link rel="dns-prefetch" href="https://unpkg.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/animations.css">

    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>
<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" >Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" >Cene in reference</a>
            <a href="/pogosta-vprasanja/" class="active">Pogosta vprašanja</a>
            <a href="/blog/" >Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>
    <main>
        <section class="faq-hero">
            <div class="faq-hero-container">
                <div class="faq-hero-text" data-aos="fade-up">
                    <span class="faq-hero-kicker">Vprašanja in odgovori</span>
                    <h1>Pogosta vprašanja</h1>
                    <p class="faq-hero-lead">Vas zanima, kako potekajo naši postopki in storitve? Spodaj smo zbrali odgovore na vprašanja, ki jih največkrat prejmemo.</p>
                </div>
            </div>
            <div class="faq-hero-shape shape-a"></div>
            <div class="faq-hero-shape shape-b"></div>
            <div class="faq-hero-shape shape-c"></div>
        </section>

        <section class="faq-accordion" id="vprasanja">
            <div class="faq-accordion-container">
                <div class="faq-accordion-list" data-aos="fade-up" data-aos-delay="100">
                    <article class="faq-item">
                        <button class="faq-question" type="button" aria-expanded="false">
                            <span>1. V katerih situacijah je medkulturno posredovanje v pomoč?</span>
                        </button>
                        <div class="faq-answer">
                            <ul>
                                <li>– Pri razumevanju šolskih obvestil, navodil in uradnih postopkov</li>
                                <li>– Pri vključevanju otroka v učni proces</li>
                                <li>– Ob pojavu nesporazumov zaradi jezikovnih ali kulturnih razlik</li>
                                <li>– Pri prehodu iz vrtca v šolo ali med različnimi šolskimi programi</li>
                                <li>– Pri reševanju konfliktov med učenci ali starši, ki izhajajo iz kulturnih razlik</li>
                                <li>– Pri vključevanju staršev v šolske ali lokalne aktivnosti</li>
                                <li>– Pri razumevanju posebnih potreb ali individualnih načrtov v šoli in vrtcu</li>
                                <li>– Pri usklajevanju pričakovanj med šolo in družino (npr. domače naloge, pravila, roki)</li>
                            </ul>
                        </div>
                    </article>

                    <article class="faq-item">
                        <button class="faq-question" type="button" aria-expanded="false">
                            <span>2. Kdaj izbrati medkulturno posredovanje ali delavnico?</span>
                        </button>
                        <div class="faq-answer">
                            <p>Medkulturno posredovanje je primerno, kadar je potreben dinamičen pogovor med ljudmi v različnih institucijah – šolah, vrtcih, zdravstvenih ustanovah in drugih organizacijah. Posredovalec ves čas prevaja, razlaga in svetuje, kadar zazna, da katera stran ne razume, ter pomaga razjasniti mnenja, pričakovanja, pobude in omejitve. Gre za aktivno podporo, prilagojeno situaciji in potrebam udeležencev.</p>
                            <p>Delavnice so strukturirane, ciljane seje, ki sledijo vnaprej določenim ciljem in vsebini, kot je opisano za posamezno delavnico. Posredovalec vodi delavnico po pripravljeni strukturi ter zagotavlja informacije, praktične nasvete in izobraževalne aktivnosti za konkretno ciljno skupino – učence, starše, starše otrok v vrtcu ali zaposlene.</p>
                            <p>Vse naše dejavnosti prispevajo k boljšemu vključevanju priseljencev in razumevanju medkulturnih razlik – izberite tisto, kar najbolje ustreza vašim potrebam.</p>
                        </div>
                    </article>

                    <article class="faq-item">
                        <button class="faq-question" type="button" aria-expanded="false">
                            <span>3. Kdaj izbrati individualno in kdaj skupinsko medkulturno posredovanje?</span>
                        </button>
                        <div class="faq-answer">
                            <p>Individualno medkulturno posredovanje je primerno, kadar strokovni kader v instituciji (npr. razrednik ali svetovalni delavec) vodi sestanek s posameznimi starši ali z družino. Posredovalec prevaja, razlaga in svetuje neposredno med udeleženci, kar omogoča poglobljeno razumevanje, reševanje specifičnih vprašanj ter prilagojeno podporo posameznim potrebam.</p>
                            <p>Skupinsko medkulturno posredovanje je primerno za večje skupine udeležencev, npr. na roditeljskih sestankih ali srečanjih več staršev priseljencev, kadar udeleženci ne razumejo jezika ali delovanja institucije. Posredovalec zagotavlja prevod in pojasnila za vse prisotne, da se lahko vsi aktivno vključijo, razumejo informacije in sodelujejo v pogovoru.</p>
                        </div>
                    </article>

                    <article class="faq-item">
                        <button class="faq-question" type="button" aria-expanded="false">
                            <span>4. Ali delavnice potekajo tudi v jezikih, ki jih ne obvladate sami?</span>
                        </button>
                        <div class="faq-answer">
                            <p>Da, delavnice lahko potekajo tudi v drugih jezikih, npr. ruščini, francoščini ali drugih jezikih. Če zahtevanega jezika osebno ne obvladam, delavnica poteka z dodatno pomočjo prevajalca, ki zagotovi, da so vse informacije razumljive udeležencem.</p>
                            <p>Zaradi stroškov prevajalca je v tem primeru doplačilo 50 €, kar pokriva njegovo delo.</p>
                        </div>
                    </article>

                    <article class="faq-item">
                        <button class="faq-question" type="button" aria-expanded="false">
                            <span>5. Ali delujete le v vzgojno-izobraževalnih ustanovah ali tudi drugje?</span>
                        </button>
                        <div class="faq-answer">
                            <p>Primarno delujem v vzgojno-izobraževalnih ustanovah, saj sem po poklicu profesorica in so mi te institucije najbolj domače, kjer lahko ponudim največjo strokovno podporo.</p>
                            <p>V drugih institucijah lahko delujem kot prevajalka ali medkulturna posrednica, le v primeru, da si lahko sama zagotovim razlago ozadja (npr. iz dostopnih virov). Če to ni mogoče, mora institucija posredovati potrebne informacije, da lahko delo poteka kakovostno in pravilno.</p>
                        </div>
                    </article>

                    <article class="faq-item">
                        <button class="faq-question" type="button" aria-expanded="false">
                            <span>6. Kdaj izbrati 30-minutno in kdaj 60-minutno medkulturno posredovanje?</span>
                        </button>
                        <div class="faq-answer">
                            <p>Medkulturno posredovanje, ki traja 30 minut, je primerno za krajše pogovore, hitre pojasnitve ali podporo pri posameznih vprašanjih, kjer ni predvideno poglobljeno razpravljanje.</p>
                            <p>Medkulturno posredovanje, ki traja 60 minut, je priporočljivo za daljše ali bolj kompleksne pogovore, obravnavo več tem, razjasnjevanje nesporazumov ali občutljive vsebine. Daljša seja omogoča dovolj časa, da vsi udeleženci razumejo informacije, izrazijo svoje mnenje in dosežejo skupno razumevanje.</p>
                        </div>
                    </article>

                    <article class="faq-item">
                        <button class="faq-question" type="button" aria-expanded="false">
                            <span>7. Kaj šole in vrtci pridobijo z medkulturnim posredovanjem in/ali delavnicami?</span>
                        </button>
                        <div class="faq-answer">
                            <ul>
                                <li>– Olajšano komunikacijo s starši in učenci</li>
                                <li>– Večje zaupanje med družinami in šolskim osebjem</li>
                                <li>– Boljše razumevanje kulturnega in jezikovnega ozadja otrok</li>
                                <li>– Preprečevanje nesporazumov in konfliktov v razredu</li>
                                <li>– Večjo podporo učiteljem pri razumevanju kulturnih razlik</li>
                                <li>– Lažje vključevanje novih otrok in družin v učni proces</li>
                                <li>– Večjo vključenost staršev v šolske dejavnosti</li>
                                <li>– Spodbujanje medkulturnega razumevanja med učenci</li>
                            </ul>
                        </div>
                    </article>

                    <article class="faq-item">
                        <button class="faq-question" type="button" aria-expanded="false">
                            <span>8. Kako poteka sodelovanje?</span>
                        </button>
                        <div class="faq-answer">
                            <ul>
                                <li>– V pogovoru po telefonu ali po e-pošti se skupaj dogovorimo za vrsto sodelovanja in ustrezen termin.</li>
                                <li>– Stranka naroči storitev; če gre za ustanovo, lahko pošlje tudi naročilnico.</li>
                                <li>– Izdam račun, ki ga stranka poravna v dogovorjenem roku.</li>
                                <li>– Sodelovanje poteka z zaupanjem in podporo, da izboljšamo komunikacijo ter razumevanje.</li>
                           </ul>
                        </div>
                    </article>
                </div>
            </div>
        </section>
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
        <div class="final-cta-content" data-aos="fade-up">
            <h2>Imaš vprašanje? Pokliči ali piši!</h2>
            <div class="final-cta-buttons">
                <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
            </div>
            <p>Skupaj ustvariva prostor za učenje in povezovanje.</p>
        </div>
    </section>

</main>
<footer>
    <div class="footer-content">
        <div class="footer-logo">
            <h3>PROSBERRY</h3>
        </div>
        <div class="footer-links">
            <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
        </div>
        <div class="footer-contact">
            <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
            <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
        </div>
    </div>
</footer>
    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const faqItems = document.querySelectorAll('.faq-item');

            faqItems.forEach(item => {
                const button = item.querySelector('.faq-question');
                const answer = item.querySelector('.faq-answer');

                if (!button || !answer) {
                    return;
                }

                button.setAttribute('aria-expanded', 'false');
                answer.style.maxHeight = null;

                button.addEventListener('click', () => {
                    const isActive = item.classList.contains('active');

                    faqItems.forEach(otherItem => {
                        if (otherItem === item) {
                            return;
                        }
                        otherItem.classList.remove('active');
                        const otherButton = otherItem.querySelector('.faq-question');
                        const otherAnswer = otherItem.querySelector('.faq-answer');
                        if (otherButton) {
                            otherButton.setAttribute('aria-expanded', 'false');
                        }
                        if (otherAnswer) {
                            otherAnswer.style.maxHeight = null;
                        }
                    });

                    if (isActive) {
                        item.classList.remove('active');
                        button.setAttribute('aria-expanded', 'false');
                        answer.style.maxHeight = null;
                        return;
                    }

                    item.classList.add('active');
                    button.setAttribute('aria-expanded', 'true');
                    requestAnimationFrame(() => {
                        answer.style.maxHeight = answer.scrollHeight + 'px';
                    });
                });
            });
        });
    </script>
</body>
</html>
"""


"./politika-zasebnosti/index.html" : 
"""
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Politika zasebnosti - Prosberry</title>
    <meta name="description" content="Preberite politiko zasebnosti podjetja PROSBERRY, Amra Kurešepi Zulji s.p. Izvedite več o varovanju vaših osebnih podatkov, uporabi kontaktnega obrazca, pogodbeni obdelavi in hrambi podatkov.">
    <meta name="keywords" content="politika zasebnosti, varovanje podatkov, GDPR, Prosberry, Amra Kurešepi Zulji, osebni podatki, piškotki">
    <meta name="author" content="Amra Kurešepi Zulji">
    <link rel="canonical" href="https://www.prosberry.si/politika-zasebnosti/">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://unpkg.com">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link rel="dns-prefetch" href="https://unpkg.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/animations.css">

    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>
<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" >Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" >Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" >Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>
    <main>
        <section class="policy-hero">
            <div class="policy-hero-container">
                <div class="policy-hero-text" data-aos="fade-up">
                    <span class="policy-hero-kicker">Varstvo podatkov</span>
                    <h1>Politika zasebnosti</h1>
                    <p class="policy-hero-lead">Podjetje PROSBERRY, Amra Kurešepi Zulji s.p. je lastnik in upravljalec spletne strani https://prosberry.si. Zavezani smo k zakoniti obdelavi osebnih podatkov, ki nam jih zaupate.</p>
                </div>
                <div class="policy-hero-card" data-aos="fade-left" data-aos-delay="120">
                    <h3>Osnovni podatki podjetja</h3>
                    <ul>
                        <li>Naziv podjetja: PROSBERRY, Amra Kurešepi Zulji s.p.</li>
                        <li>Naslov: Celovška cesta 172, 1000 Ljubljana, Slovenija</li>
                        <li>Uradna spletna stran: https://prosberry.si/</li>
                        <li>Elektronska pošta: <a href="mailto:info@prosberry.si">info@prosberry.si</a></li>
                        <li>Kontaktna številka: <a href="tel:+38669913506">+386 30 312 855</a></li>
                    </ul>
                </div>
            </div>
            <div class="policy-hero-shape shape-a"></div>
            <div class="policy-hero-shape shape-b"></div>
            <div class="policy-hero-shape shape-c"></div>
        </section>

        <section class="policy-content">
            <div class="policy-content-container">
                <article class="policy-card" data-aos="fade-up">
                    <h2>Standardi varstva osebnih podatkov</h2>
                    <p>Z osebnimi podatki ravnamo v skladu z zakonom o varstvu osebnih podatkov ZVOP-1, Ur. l. RS št. 94/07 in Splošna uredba EU o varstvu osebnih podatkov – GDPR.</p>
                    <p>Lastnik in upravljalec spletnega mesta ne obdeluje osebnih podatkov na način, ki zahteva imenovano pooblaščeno osebo za varstvo podatkov.</p>
                    <p>PROSBERRY, Amra Kurešepi Zulji s.p. vaše osebne podatke preko spletne strani shranjuje in obdeluje samo v določenih, spodaj navedenih primerih.</p>
                </article>

                <article class="policy-card" data-aos="fade-up" data-aos-delay="60">
                    <h2>Uporaba kontaktnega obrazca</h2>
                    <p>Osebni podatki, ki jih pridobimo na naši spletni strani preko kontaktnega obrazca se zbirajo izključno z namenom vzpostavitve komunikacije z vami.</p>
                    <p>Enako velja za podatke, ki niso posredovani preko kontaktnega obrazca. Prostovoljni vnos podatkov nam omogoča, da stopimo v stik z vami in se odzovemo na vaše sporočilo.</p>
                    <p>Sporočilo se pošlje kot e-poštno sporočilo na elektronski naslov podjetja Prosberry. Pravni temelj za obdelavo osebnih podatkov je osebna privolitev, ki se pridobi z vnosom podatkov v kontaktni obrazec in se lahko kadarkoli prekliče s pisno zahtevo na elektronski naslov info@prosberry.si.</p>
                    <p>PROSBERRY, Amra Kurešepi Zulji s.p. za namen komunikacije z obiskovalci vodi naslednje kategorije osebnih podatkov:</p>
                    <ul>
                        <li>ime in priimek,</li>
                        <li>elektronski naslov,</li>
                        <li>telefonsko številko,</li>
                        <li>sporočilo in ostali podatki, ki jih uporabnik vpiše v kontaktni obrazec.</li>
                    </ul>
                    <p>Pravice posameznikov zajemajo preklic privolitve, popravek, izbris, ali omejitev obdelave. Pravice je mogoče uveljavljati s pisno vlogo, poslano po elektronski pošti. Za pomoč pri uveljavljanju svojih pravic se lahko obrnete na info@prosberry.si.</p>
                </article>

                <article class="policy-card" data-aos="fade-up" data-aos-delay="120">
                    <h2>Pogodbena obdelava osebnih podatkov</h2>
                    <p>Po potrebi bomo za izvajanje določenih del, ki prispevajo k našim storitvam, pooblastili druga podjetja in posameznike. Osebne podatke lahko na primer posredujemo izvajalcem za gostitev naše podatkovne baze in aplikacij, za storitve obdelave podatkov ali za pošiljanje informacij, ki ste jih zahtevali, za zagotavljanje podpornih storitev ipd.</p>
                    <p>Zunanjim ponudnikom storitev bomo tovrstne podatke posredovali oziroma naredili dostopne samo v obsegu, ki ga zahteva določen namen. Teh podatkov ne bodo smeli uporabljati v nobene druge namene. Zunanji ponudniki storitev so pogodbeno zavezani k spoštovanju zaupnosti vaših osebnih podatkov.</p>
                    <p>Pogodbeni obdelovalci smejo osebne podatke obdelovati zgolj v okviru upravljavčevih navodil in osebnih podatkov ne smejo uporabiti za zasledovanje kakršnihkoli lastnih interesov.</p>
                </article>

                <article class="policy-card" data-aos="fade-up" data-aos-delay="180">
                    <h2>Hramba podatkov</h2>
                    <p>Podatke v zvezi z opravljenimi storitvami hranimo še eno leto po zaključku storitve. Po tem času jih izbrišemo, če zakon ne določa drugače. Na podlagi določb davčnih predpisov je npr. zavezan hraniti račune, na katerih so osebni podatki naročnika storitev še 10 let po opravljeni storitvi.</p>
                    <p>Prav tako tudi ne bo izbrisal tistih podatkov, ki jih potrebuje, da si zagotovi dokaz, da je podatke o osebi izbrisal (t.i. revizijska sled), in da hrani zapise o osebah, ki ne želijo, da jih v prihodnje kontaktira. Ti podatki so email naslov, telefonska številka ter ime in priimek.</p>
                </article>

                <article class="policy-card" data-aos="fade-up" data-aos-delay="240">
                    <h2>Piškotki</h2>
                    <p>Na spletnem mestu uporabljamo “piškotke”. Z nastavitvami v vašem brskalniku se lahko odločite ali boste “piškotke” sprejeli ali zavrnili. Piškotke hranimo kot je navedeno v dokumentu piškotki.</p>
                </article>

                <article class="policy-card" data-aos="fade-up" data-aos-delay="300">
                    <h2>Pravica do pritožbe</h2>
                    <p>Za morebitno uveljavljanje svojih pravic, vas prosimo, da nam svojo zahtevo posredujete pisno, preko elektronske pošte na naslov info@prosberry.si.</p>
                    <p>Pravico imate, da v primeru kršitve varstva osebnih podatkov zoper upravljavca vložite pritožbo pri pristojnem nadzornem organu na naslov: Informacijski pooblaščenec, Zaloška 59, 1000 Ljubljana ali na: gp.ip@ip-rs.si.</p>
                </article>
            </div>
        </section>
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
        <div class="final-cta-content" data-aos="fade-up">
            <h2>Imaš vprašanje? Pokliči ali piši!</h2>
            <div class="final-cta-buttons">
                <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
            </div>
            <p>Skupaj ustvariva prostor za učenje in povezovanje.</p>
        </div>
    </section>

</main>
<footer>
    <div class="footer-content">
        <div class="footer-logo">
            <h3>PROSBERRY</h3>
        </div>
        <div class="footer-links">
            <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
        </div>
        <div class="footer-contact">
            <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
            <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
        </div>
    </div>
</footer>
    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
</body>
</html>
"""


"./ponudba/index.html" : 
"""
<!DOCTYPE html>
<html lang="sl">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Ponudba - Prosberry</title>
  <meta name="description"
    content="Odkrijte celotno ponudbo Prosberry: tečaji angleščine, albanščine in slovenščine za vse nivoje ter medkulturno posredovanje za institucije, šole in priseljence. Učenje in podpora prilagojena vašim potrebam.">
  <meta name="keywords"
    content="ponudba, tečaji angleščine, učenje albanščine, tečaji slovenščine, medkulturno posredovanje, inštrukcije, Prosberry, Amra Kurešepi Zulji">
  <meta name="author" content="Amra Kurešepi Zulji">
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link rel="preconnect" href="https://unpkg.com" />
  <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
  <link rel="dns-prefetch" href="https://fonts.gstatic.com" />
  <link rel="dns-prefetch" href="https://unpkg.com" />
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" />
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  <link rel="stylesheet" href="/css/style.css" />
  <link rel="stylesheet" href="/css/animations.css" />

  <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
  <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
  <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
  <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
  <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>

<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" class="active">Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" >Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" >Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" >Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>

  <main>
    <section class="offer-hero">
      <div class="offer-hero-container">
        <div class="offer-hero-text" data-aos="fade-up">
          <h1>Poučevanje jezikov</h1>
          <p class="offer-hero-lead">
            Želite trenirati možgane in izboljšati komunikacijo v tujih jezikih? Potrebujete prilagojene tečaje za šolo, delo ali osebni razvoj? Odkrijte našo ponudbo poučevanja in začnite svojo pot do novih znanj in veščin, ki vas peljejo naprej.
          </p>
        </div>
        <div class="offer-hero-card" data-aos="fade-left" data-aos-delay="140">
          <h3>Način poučevanja</h3>
          <ul>
            <li>Preko spleta ali v živo</li>
            <li>Individualno, v parih ali v manjših skupinah</li>
            <li>
              Vse starostne skupine: učence, dijake, študente in odrasle
            </li>
          </ul>
        </div>
      </div>
      <div class="offer-hero-shape shape-a"></div>
      <div class="offer-hero-shape shape-b"></div>
      <div class="offer-hero-shape shape-c"></div>
    </section>

    <section class="offer-services">
      <div class="offer-services-container">
        <div class="offer-section" data-theme="teaching">
          <div class="offer-section-header" data-aos="fade-up">
            <h2>Poučujem</h2>
          </div>
          <div class="offer-languages-grid">
            <article class="offer-language-card" data-aos="fade-up" data-aos-delay="80">
              <div class="offer-language-header">
                <h3>Angleščino</h3>
              </div>
              <ul>
                <li>Tečaji vseh nivojev</li>
                <li>Tečaji poslovne angleščine</li>
                <li>
                  Inštrukcije prilagojene vašim učnim ciljem, potrebam in
                  željam
                </li>
                <li>
                  Vodene priprave na maturo in priprave na šolska ocenjevanja
                  prilagojene vašim ciljem za doseganje rezultatov
                </li>
              </ul>
            </article>

            <article class="offer-language-card" data-aos="fade-up" data-aos-delay="140">
              <div class="offer-language-header">
                <h3>Albanščino</h3>
              </div>
              <p>Poučevanje jezika usvojenega v naravno govorečem okolju:</p>
              <ul>
                <li>Inštruiranje osnov albanščine</li>
                <li>Tečaji komunikacije</li>
              </ul>
            </article>

            <article class="offer-language-card" data-aos="fade-up" data-aos-delay="200">
              <div class="offer-language-header">
                <h3>Slovenščino</h3>
              </div>
              <ul>
                <li>Inštrukcije za začetni nivo slovenščine</li>
                <li>Tečaji osnov slovenščine za priseljence</li>
              </ul>
            </article>
          </div>
          <div class="offer-section-shape shape-d"></div>
        </div>


      </div>
    </section>
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
    <section class="final-cta">
      <div class="final-cta-content" data-aos="fade-up">
        <h2>Imaš vprašanje? Pokliči ali piši!</h2>
        <div class="final-cta-buttons">
          <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
          <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
        </div>
        <p>Skupaj ustvariva prostor za učenje in povezovanje.</p>
      </div>
    </section>

  </main>

  <footer>
    <div class="footer-content">
      <div class="footer-logo">
        <h3>PROSBERRY</h3>
      </div>
      <div class="footer-links">
        <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
      </div>
      <div class="footer-contact">
        <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
        <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
      </div>
    </div>
  </footer>

  <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
  <script src="/js/main.js" defer></script>
</body>

</html>
"""


"./posodobi_blog.sh" : 
"""
#!/bin/bash
set -euo pipefail

# --- Configuration ---
ARTICLES_DIR="blog/clanki"
BLOG_TEMPLATE="blog/template.html"
BLOG_INDEX="blog/index.html"
ARTICLE_TEMPLATE="blog/article-template.html"
HEADER_TEMPLATE_FILE="header-template.html"
FOOTER_TEMPLATE_FILE="footer-template.html"
BLOG_LEAD_TEXT="Tu zbiramo izkušnje, nasvete in dobre prakse z jezikovnega in medkulturnega področja. Namen je ustvariti prostor srečanja, učenja in navdiha."
ARCHIVE_HEADING_TEXT="Seznam vsebin"

PLACEHOLDER_TITLES=(
    "Pripravljamo nove vsebine"
    "Kratek vodič po delavnicah"
    "Naslednji koraki"
)
PLACEHOLDER_DATES=(
    "pomlad 2026"
    "pomlad 2026"
    "poletje 2026"
)
PLACEHOLDER_SUMMARIES=(
    "Razmišljanja o tem, kako navdušiti učence za medkulturne pogovore in skupinske projekte."
    "Kako strukturirati delavnico, ki vključuje starše, učitelje in otroke v enakopravnem dialogu."
    "Sledi blogu za nove prispevke in praktične nasvete."
)

PLACEHOLDER_IMAGE="/assets/images/blog/placeholder.webp"

check_jq_dependency() {
    if ! command -v jq &> /dev/null; then
        echo "Error: 'jq' is not installed. Please install it to run this script." >&2
        exit 1
    fi
}

find_article_files() {
    find "$ARTICLES_DIR" -maxdepth 1 -type f -name "*.html" | sort -r
}

extract_metadata() {
    local file="$1"
    local metadata_json
    metadata_json=$(perl -ne 'BEGIN{undef $/;} if (/<!--\s*(\{.*?})\s*-->/s) { print $1; exit }' "$file")

    if [ -z "${metadata_json:-}" ]; then
        echo ""
        return
    fi

    if ! echo "$metadata_json" | jq -e . &> /dev/null; then
        echo "Warning: Malformed JSON metadata in $file. Skipping article." >&2
        echo ""
        return
    fi

    echo "$metadata_json"
}

format_short_date() {
    local iso_date="$1"
    if [[ "$iso_date" =~ ^([0-9]{4})-([0-9]{2})-([0-9]{2})$ ]]; then
        printf "%s.%s.%s" "${BASH_REMATCH[3]}" "${BASH_REMATCH[2]}" "${BASH_REMATCH[1]}"
    else
        echo "$iso_date"
    fi
}

format_long_date() {
    local iso_date="$1"
    if [[ "$iso_date" =~ ^([0-9]{4})-([0-9]{2})-([0-9]{2})$ ]]; then
        local year="${BASH_REMATCH[1]}"
        local month="${BASH_REMATCH[2]}"
        local day="${BASH_REMATCH[3]}"
        local month_name
        case "$month" in
            01) month_name="januar" ;;
            02) month_name="februar" ;;
            03) month_name="marec" ;;
            04) month_name="april" ;;
            05) month_name="maj" ;;
            06) month_name="junij" ;;
            07) month_name="julij" ;;
            08) month_name="avgust" ;;
            09) month_name="september" ;;
            10) month_name="oktober" ;;
            11) month_name="november" ;;
            12) month_name="december" ;;
            *) month_name="$month" ;;
        esac
        printf "%s. %s %s" "$day" "$month_name" "$year"
    else
        echo "$iso_date"
    fi
}

get_article_image() {
    local file="$1"
    local filename=$(basename "$file" .html)
    echo "/assets/images/blog/${filename}/header.png"
}

generate_featured_article_html() {
    local file="$1"
    local metadata_json="$2"
    local title date image summary article_path long_date

    title=$(echo "$metadata_json" | jq -r '.title')
    date=$(echo "$metadata_json" | jq -r '.date')
    image=$(get_article_image "$file")
    summary=$(echo "$metadata_json" | jq -r '.summary // ""')
    article_path=$(basename "$file")
    long_date=$(format_long_date "$date")

    cat <<EOF
<article class="featured-article" data-aos="fade-up">
    <a href="/blog/clanki/${article_path}">
        <img src="${image}" alt="${title}">
        <div class="featured-article-content">
            <p class="article-date">${long_date}</p>
            <h2>${title}</h2>
            <p>${summary}</p>
        </div>
    </a>
</article>
EOF
}

generate_recent_article_card_html() {
    local file="$1"
    local metadata_json="$2"
    local title date image summary short_date article_path

    title=$(echo "$metadata_json" | jq -r '.title')
    date=$(echo "$metadata_json" | jq -r '.date')
    image=$(get_article_image "$file")
    summary=$(echo "$metadata_json" | jq -r '.summary // ""')
    article_path=$(basename "$file")
    short_date=$(format_short_date "$date")

    cat <<EOF
<article class="recent-card">
    <a href="/blog/clanki/${article_path}">
        <img src="${image}" alt="${title}">
        <h3>${title}</h3>
        <p class="article-date">${short_date}</p>
        <p>${summary}</p>
    </a>
</article>
EOF
}

generate_archive_list_item_html() {
    local file="$1"
    local metadata_json="$2"
    local title date short_date article_path

    title=$(echo "$metadata_json" | jq -r '.title')
    date=$(echo "$metadata_json" | jq -r '.date')
    article_path=$(basename "$file")
    short_date=$(format_short_date "$date")

    cat <<EOF
<li><a href="/blog/clanki/${article_path}">${title}</a> - ${short_date}</li>
EOF
}

generate_placeholder_card_html() {
    local index="$1"
    local slot=$((index % ${#PLACEHOLDER_TITLES[@]}))
    local title="${PLACEHOLDER_TITLES[$slot]}"
    local date="${PLACEHOLDER_DATES[$slot]}"
    local summary="${PLACEHOLDER_SUMMARIES[$slot]}"

    cat <<EOF
<article class="recent-card placeholder-card">
    <a href="#">
        <img src="${PLACEHOLDER_IMAGE}" alt="${title}">
        <h3>${title}</h3>
        <p class="article-date">${date}</p>
        <p>${summary}</p>
    </a>
</article>
EOF
}

check_template_file() {
    local file="$1"
    if [ ! -f "$file" ]; then
        echo "Error: Template file '$file' does not exist." >&2
        exit 1
    fi
}

check_template_file "$BLOG_TEMPLATE"
check_template_file "$ARTICLE_TEMPLATE"
check_template_file "$HEADER_TEMPLATE_FILE"
check_template_file "$FOOTER_TEMPLATE_FILE"

check_jq_dependency

ALL_ARTICLE_FILES=$(find_article_files)
VALID_ARTICLE_ENTRIES=()

for file in $ALL_ARTICLE_FILES; do
    filename=$(basename "$file")
    if [[ "$filename" =~ ^[0-9]{4}-[0-9]{2}-[0-9]{2}-.*\.html$ ]]; then
        metadata=$(extract_metadata "$file")
        if [ -z "${metadata:-}" ]; then
            continue
        fi
        article_date=$(echo "$metadata" | jq -r '.date // empty')
        if [ -z "$article_date" ]; then
            echo "Warning: Missing date in $file. Skipping article." >&2
            continue
        fi
        VALID_ARTICLE_ENTRIES+=("${article_date}|${file}")
    else
        echo "Warning: Invalid filename format for $file. Expected YYYY-MM-DD-*.html. Skipping article." >&2
    fi
done

if [ "${#VALID_ARTICLE_ENTRIES[@]}" -eq 0 ]; then
    echo "No valid article files found in $ARTICLES_DIR."
    exit 0
fi

SORTED_ENTRIES=$(printf "%s\n" "${VALID_ARTICLE_ENTRIES[@]}" | LC_ALL=C sort -t'|' -k1,1r -k2,2)

FEATURED_ARTICLE_HTML=""
RECENT_ARTICLES_HTML=""
ARCHIVE_HTML=""

ARTICLE_COUNT=0
RECENT_COUNT=0
PLACEHOLDER_INDEX=0

while IFS='|' read -r _ file; do
    metadata=$(extract_metadata "$file")
    if [ -z "${metadata:-}" ]; then
        continue
    fi

    if [ "$ARTICLE_COUNT" -eq 0 ]; then
        FEATURED_ARTICLE_HTML=$(generate_featured_article_html "$file" "$metadata")
    elif [ "$ARTICLE_COUNT" -le 3 ]; then
        RECENT_ARTICLES_HTML+=$'\n'"$(generate_recent_article_card_html "$file" "$metadata")"
        RECENT_COUNT=$((RECENT_COUNT + 1))
    fi
    
    # Add ALL articles to archive list
    ARCHIVE_HTML+=$'\n'"$(generate_archive_list_item_html "$file" "$metadata")"

    ARTICLE_COUNT=$((ARTICLE_COUNT + 1))
done <<< "$SORTED_ENTRIES"

if [ "$RECENT_COUNT" -lt 3 ]; then
    for ((i=RECENT_COUNT; i<3; i++)); do
        RECENT_ARTICLES_HTML+=$'\n'"$(generate_placeholder_card_html "$PLACEHOLDER_INDEX")"
        PLACEHOLDER_INDEX=$((PLACEHOLDER_INDEX + 1))
    done
fi

if [ -z "${FEATURED_ARTICLE_HTML:-}" ]; then
    echo "Warning: No featured article generated." >&2
fi

export FEATURED_ARTICLE_HTML
export RECENT_ARTICLES_HTML
export ARCHIVE_HTML
export BLOG_TEMPLATE
export BLOG_INDEX
export ARTICLE_TEMPLATE
export HEADER_TEMPLATE_FILE
export FOOTER_TEMPLATE_FILE
export BLOG_LEAD_TEXT
export ARCHIVE_HEADING_TEXT

python3 <<'PY'
import os
from pathlib import Path

template = Path(os.environ["BLOG_TEMPLATE"]).read_text()
template = template.replace("__HEADER_CONTENT__", Path(os.environ["HEADER_TEMPLATE_FILE"]).read_text())
template = template.replace("__NAJNOVEJSI_CLANEK__", os.environ.get("FEATURED_ARTICLE_HTML", ""))
template = template.replace("__CAKAJOCI_CLANKI__", os.environ.get("RECENT_ARTICLES_HTML", ""))
template = template.replace("__ARHIV_SEZNAM__", os.environ.get("ARCHIVE_HTML", ""))
template = template.replace("__BLOG_LEAD__", os.environ.get("BLOG_LEAD_TEXT", ""))
template = template.replace("__ARCHIVE_HEADING__", os.environ.get("ARCHIVE_HEADING_TEXT", ""))
template = template.replace("__FOOTER_CONTENT__", Path(os.environ["FOOTER_TEMPLATE_FILE"]).read_text())
Path(os.environ["BLOG_INDEX"]).write_text(template)
PY

echo "Blog page generated successfully at $BLOG_INDEX"
"""


"./references-snippet.html" : 
"""
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>"""


"./robots.txt" : 
"""
User-agent: *
Allow: /
Disallow: /kontakt/process_form.php

Sitemap: https://www.prosberry.si/sitemap.xml"""


"./sitemap.xml" : 
"""
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.prosberry.si/kdo-sem/</loc>
    <lastmod>2025-11-04</lastmod>
  </url>
  <url>
    <loc>https://www.prosberry.si/politika-zasebnosti/</loc>
    <lastmod>2025-11-04</lastmod>
  </url>
  <url>
    <loc>https://www.prosberry.si/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/</loc>
    <lastmod>2025-11-04</lastmod>
  </url>
  <url>
    <loc>https://www.prosberry.si/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/</loc>
    <lastmod>2025-11-04</lastmod>
  </url>
  <url>
    <loc>https://www.prosberry.si/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/</loc>
    <lastmod>2025-11-04</lastmod>
  </url>
  <url>
    <loc>https://www.prosberry.si/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/</loc>
    <lastmod>2025-11-04</lastmod>
  </url>
  <url>
    <loc>https://www.prosberry.si/skupaj-za-vkljucevanje/medkulturno-posredovanje/</loc>
    <lastmod>2025-11-04</lastmod>
  </url>
  <url>
    <loc>https://www.prosberry.si/kontakt/</loc>
    <lastmod>2025-11-04</lastmod>
  </url>
  <url>
    <loc>https://www.prosberry.si/delavnice/</loc>
    <lastmod>2025-11-04</lastmod>
  </url>
  <url>
    <loc>https://www.prosberry.si/cene-in-sodelovanja/</loc>
    <lastmod>2025-11-04</lastmod>
  </url>
  <url>
    <loc>https://www.prosberry.si/pogosta-vprasanja/</loc>
    <lastmod>2025-11-04</lastmod>
  </url>
  <url>
    <loc>https://www.prosberry.si/ponudba/</loc>
    <lastmod>2025-11-04</lastmod>
  </url>
  <url>
    <loc>https://www.prosberry.si/</loc>
    <lastmod>2025-11-04</lastmod>
  </url>
  <url>
    <loc>https://www.prosberry.si/cene-in-reference/</loc>
    <lastmod>2025-11-04</lastmod>
  </url>
</urlset>"""


"./skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/index.html" : 
"""
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Delavnica: Od tujca do sošolca - Prosberry</title>
    <meta name="description" content="Delavnica 'Od tujca do sošolca' ponuja učiteljem učinkovite strategije za motivacijo in vključevanje učencev priseljencev. Spoznajte, kako krepiti kulturno občutljivost in premagovati jezikovne ovire v razredu.">
    <meta name="keywords" content="delavnica za učitelje, učenci priseljenci, motivacija učencev, kulturna občutljivost, jezikovne ovire, Prosberry, Amra Kurešepi Zulji">
    <meta name="author" content="Amra Kurešepi Zulji">
    <link rel="canonical" href="https://www.prosberry.si/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://unpkg.com">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link rel="dns-prefetch" href="https://unpkg.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/animations.css">

    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>
<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" class="active">Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" >Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" >Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>


    <main>
        <section class="page-hero">
            <h1 data-aos="fade-up">Delavnica za učitelje in zaposlene</h1>
            <p class="page-hero-subtitle" data-aos="fade-up" data-aos-delay="100">
                Podprite svoje učitelje in zaposlene pri vključevanju in motivaciji učencev z različnimi kulturnimi in jezikovnimi ozadji.
            </p>
        </section>

        <section class="content-section">
            <div class="container workshop-container">
                <div class="workshop-grid">
                    <div class="workshop-text" data-aos="fade-right">
                        <h2>Od tujca do sošolca: Učinkovite strategije za motivacijo učencev z različnimi ozadji</h2>
                        
                        <div class="workshop-section">
                            <h4>Komu je delavnica namenjena?</h4>
                            <p>Delavnica je namenjena učiteljem, svetovalnim delavcem, psihologom in drugim zaposlenim, ki delajo z učenci priseljenci, ter želijo te učence učinkovito vključevati kljub jezikovnim in kulturnim razlikam. Ponuja konkretne strategije, orodja in primere dobrih praks za motivacijo učencev, krepitev občutka pripadnosti in uspešno vključevanje v razred.</p>
                        </div>

                        <div class="workshop-section">
                            <h4>Prednosti delavnice</h4>
                            <ul>
                                <li>Učitelji spoznajo, kako pomembno je, da učenec ne ostane »tujec«, temveč se počuti kot del razredne skupnosti.</li>
                                <li>Pridobijo teoretično znanje o kulturni inteligenci, notranji motivaciji učencev in uporabi jezika kot orodju.</li>
                                <li>Seznanijo se z dobrimi praksami iz šolskih okolij in konkretnih primerov.</li>
                                <li>Aktivno sodelujejo v skupinskih vajah in diskusijah, kjer analizirajo primere učencev z drugačnim jezikovnim in kulturnim ozadjem.</li>
                                <li>Dobijo praktične predloge in orodja za takojšnjo uporabo v šoli.</li>
                            </ul>
                        </div>

                        <div class="workshop-section">
                            <h4>Trajanje in organizacija</h4>
                            <div class="workshop-meta">
                                <div class="meta-card">
                                    <span class="meta-label">Trajanje</span>
                                    <span class="meta-value">90 minut</span>
                                </div>
                                <div class="meta-card">
                                    <span class="meta-label">Lokacija</span>
                                    <span class="meta-value">V prostorih šole</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="workshop-section">
                            <h4>Cena</h4>
                            <div class="price-grid">
                                <div class="price-card">
                                    <span class="price-label">Ena delavnica</span>
                                    <span class="price-value">90 €</span>
                                    <p>+ potni stroški za lokacije izven Ljubljane</p>
                                </div>
                            </div>
                        </div>

                        <a href="/assets/pdf/delavnica-od-tujca-do-sosolca.pdf" target="_blank" class="pdf-button">Podrobno o delavnici</a>
                    </div>
                    <div class="workshop-image" data-aos="fade-left">
                        <div class="workshop-image-frame">
                            <img src="/assets/images/vkljucevanje/delavnica-ucitelji.webp" alt="Ilustracija učiteljice, ki pomaga učencem različnih kultur" loading="lazy" decoding="async" width="1536" height="1024">
                        </div>
                        <p class="workshop-image-note" data-aos="fade-left" data-aos-delay="100" style="font-style: italic; text-align: center; margin-top: 1rem;">
                            Z izvedbo delavnice kolektiv pridobi jasen okvir za vključevanje učencev priseljencev, strategije za učinkovito motivacijo ter orodja za gradnjo zaupanja in pripadnosti.
                        </p>
                        <div class="workshop-benefits" data-aos="fade-left" data-aos-delay="150">
                            <h5>Rezultati delavnice</h5>
                            <ul>
                                <li>učitelji bolje razumejo, kako vključevati učence z različnimi kulturnimi in jezikovnimi ozadji,</li>
                                <li>krepi se zaupanje učiteljev v lastno sposobnost motiviranja in podpore,</li>
                                <li>izboljša se sposobnost kolektivnega reševanja izzivov in podpore »novim« učencem,</li>
                                <li>učitelji prejmejo konkretna orodja in strategije za takojšnjo uporabo,</li>
                                <li>poveča se sposobnost ustvarjanja vključujočega in spodbudnega učnega okolja.</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
        <div class="final-cta-content" data-aos="fade-up">
            <h2>Imaš vprašanje? Pokliči ali piši!</h2>
            <div class="final-cta-buttons">
                <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
            </div>
            <p>Skupaj ustvariva prostor za učenje in povezovanje.</p>
        </div>
    </section>

</main>

<footer>
    <div class="footer-content">
        <div class="footer-logo">
            <h3>PROSBERRY</h3>
        </div>
        <div class="footer-links">
            <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
        </div>
        <div class="footer-contact">
            <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
            <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
        </div>
    </div>
</footer>

    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
</body>
</html>
"""


"./skupaj-za-vkljucevanje/delavnica-sola-in-starsi/index.html" : 
"""
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Delavnica: Šola in starši priseljenci - Prosberry</title>
    <meta name="description" content="Delavnica 'Šola in starši priseljenci' pomaga staršem razumeti slovenski šolski sistem, njihove pravice in odgovornosti ter učinkovito sodelovati s šolo za podporo otrok. Spoznajte cilje, trajanje in ceno delavnice.">
    <meta name="keywords" content="delavnica šola, starši priseljenci, sodelovanje s šolo, slovenski šolski sistem, podpora otrokom, Prosberry, Amra Kurešepi Zulji">
    <meta name="author" content="Amra Kurešepi Zulji">
    <link rel="canonical" href="https://www.prosberry.si/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://unpkg.com">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link rel="dns-prefetch" href="https://unpkg.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/animations.css">

    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>
<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" class="active">Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" >Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" >Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>



    <main>
        <section class="page-hero">
            <h1 data-aos="fade-up">Delavnica za starše učencev priseljencev</h1>
            <p class="page-hero-subtitle" data-aos="fade-up" data-aos-delay="100">
                Vzpodbudite starše učencev priseljencev k aktivnemu sodelovanju, da bodo lahko uspešno pomagali otrokom pri vključevanju v šolo.
            </p>
        </section>

        <section class="content-section">
            <div class="container workshop-container">
                <div class="workshop-grid">
                    <div class="workshop-text" data-aos="fade-right">
                        <h2>Šola in starši priseljenci: Kako sodelovati?</h2>
                        <p class="workshop-lead">
                            Delavnica pomaga staršem učencev priseljencev razumeti pričakovanja šole, vlogo staršev pri uspehu otrok in načine, kako lahko skupaj z učitelji ustvarijo spodbudno učno okolje.
                        </p>

                        <div class="workshop-section">
                            <h4>Namen delavnice</h4>
                            <p>Staršem približati sistem slovenskega šolstva, njihove pravice in odgovornosti ter predstaviti, kako lahko učinkovito sodelujejo s šolo, da otrok dobi podporo, ki jo potrebuje.</p>
                            <p>Osnovni jezik delavnice je slovenščina, vendar se lahko delavnica izvede tudi v maternem jeziku staršev ali v kombinaciji s slovenščino, kar zagotavlja boljšo razumljivost, odprt pogovor in varno okolje za izmenjavo izkušenj.</p>
                        </div>

                        <div class="workshop-section">
                            <h4>Prednosti delavnice</h4>
                            <ul>
                                <li>Starši spoznajo, kaj šola pričakuje od njih in kako lahko odgovorno sodelujejo pri šolskem življenju svojih otrok.</li>
                                <li>Spodbujamo aktivno vključevanje staršev v šolske dejavnosti, kar krepi podporo otrokom.</li>
                                <li>Starši prejmejo konkretne nasvete, kako pomagati otrokom pri učenju in prilagajanju.</li>
                                <li>Okrepi se komunikacija in zaupanje med starši in šolskim osebjem.</li>
                                <li>Starši se naučijo prepoznavati morebitne izzive in jih učinkovito reševati.</li>
                            </ul>
                        </div>

                        <div class="workshop-section">
                            <h4>Trajanje in organizacija</h4>
                            <div class="workshop-meta">
                                <div class="meta-card">
                                    <span class="meta-label">Trajanje</span>
                                    <span class="meta-value">90 minut</span>
                                </div>
                                <div class="meta-card">
                                    <span class="meta-label">Lokacija</span>
                                    <span class="meta-value">V prostorih šole</span>
                                </div>
                                <div class="meta-card">
                                    <span class="meta-label">Jeziki</span>
                                    <span class="meta-value">Slovenščina + materinščina staršev po potrebi</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="workshop-section">
                            <h4>Cena</h4>
                            <div class="price-grid">
                                <div class="price-card">
                                    <span class="price-label">En termin</span>
                                    <span class="price-value">90 €</span>
                                    <p>+ potni stroški za lokacije izven Ljubljane</p>
                                </div>
                                <div class="price-card">
                                    <span class="price-label">Dva termina v dnevu</span>
                                    <span class="price-value">170 €</span>
                                    <p>+ potni stroški za lokacije izven Ljubljane</p>
                                </div>
                            </div>
                        </div>

                        <a href="/assets/pdf/delavnica-sola-in-starsi-priseljenci.pdf" target="_blank" class="pdf-button">Podrobno o delavnici</a>
                    </div>
                    <div class="workshop-image" data-aos="fade-left">
                        <div class="workshop-image-frame">
                            <img src="/assets/images/vkljucevanje/delavnica-starsi-sola.webp" alt="Ilustracija sestanka staršev in učiteljev" loading="lazy" decoding="async" width="1536" height="1024">
                        </div>
                        <div class="workshop-benefits" data-aos="fade-left" data-aos-delay="100">
                            <p>Delavnica za starše krepi sodelovanje s šolo, spodbuja uspeh otrok in ustvarja pozitivno vzdušje v razredu.</p>
                            <h5>Rezultati</h5>
                            <ul>
                                <li>boljša vključenost staršev v šolsko življenje,</li>
                                <li>manj nesporazumov in konfliktnih situacij,</li>
                                <li>izboljšani odnosi med šolo in družinami priseljencev,</li>
                                <li>otroci prejmejo več podpore doma, kar vpliva na uspeh v šoli,</li>
                                <li>večje zaupanje in boljša povezanost šole in družine.</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
        <div class="final-cta-content" data-aos="fade-up">
            <h2>Imaš vprašanje? Pokliči ali piši!</h2>
            <div class="final-cta-buttons">
                <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
            </div>
            <p>Skupaj ustvariva prostor za učenje in povezovanje.</p>
        </div>
    </section>

</main>

<footer>
    <div class="footer-content">
        <div class="footer-logo">
            <h3>PROSBERRY</h3>
        </div>
        <div class="footer-links">
            <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
        </div>
        <div class="footer-contact">
            <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
            <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
        </div>
    </div>
</footer>

    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
</body>
</html>
"""


"./skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/index.html" : 
"""
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Delavnica: Skupaj gradimo nove začetke - Prosberry</title>
    <meta name="description" content="Delavnica 'Skupaj gradimo nove začetke' pomaga vrtcem in staršem priseljencem vzpostaviti zaupanje, razumeti delovanje vrtca ter olajšati vključevanje otrok v novo okolje. Spoznajte cilje, trajanje in ceno delavnice.">
    <meta name="keywords" content="delavnica vrtec, starši priseljenci, vključevanje otrok, novi začetki, medkulturno razumevanje, Prosberry, Amra Kurešepi Zulji">
    <meta name="author" content="Amra Kurešepi Zulji">
    <link rel="canonical" href="https://www.prosberry.si/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://unpkg.com">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link rel="dns-prefetch" href="https://unpkg.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/animations.css">

    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>
<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" class="active">Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" >Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" >Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>



    <main>
        <section class="page-hero">
            <h1 data-aos="fade-up">Delavnica za starše otrok priseljencev v vrtcu</h1>
            <p class="page-hero-subtitle" data-aos="fade-up" data-aos-delay="100">
                Opolnomočite starše priseljence pri vključevanju v vrtec, saj to otrokom olajša prve korake v novem okolju, hkrati pa vam zagotavlja lažje in bolj tekoče delo.
            </p>
        </section>

        <section class="content-section">
            <div class="container workshop-container">
                <div class="workshop-grid">
                    <div class="workshop-text" data-aos="fade-right">
                        <h2>Skupaj gradimo nove začetke</h2>
                        <p class="workshop-lead">
                            Delavnica pomaga vrtcem ustvariti varno okolje, kjer starši priseljenci spoznajo delovanje vrtca, vzpostavijo zaupanje z vzgojiteljicami ter bolje razumejo pričakovanja in rutine, ki čakajo njihove otroke. Osnovni jezik delavnice je slovenščina, vendar se lahko delavnica izvede tudi v maternem jeziku staršev ali v kombinaciji s slovenščino, kar zagotavlja boljšo razumljivost, odprt pogovor in varno okolje za izmenjavo izkušenj.
                        </p>

                        <div class="workshop-section">
                            <h4>Komu je delavnica namenjena?</h4>
                            <p>Delavnica je namenjena vrtcem, ki želijo staršem otrok priseljencev približati svoje delovanje, zlasti tistim, katerih otroci se prvič vključujejo v slovenski vrtec. Osrednji poudarek je na vzpostavljanju razumevanja in sodelovanja med vrtcem ter družinami.</p>
                        </div>

                        <div class="workshop-section">
                            <h4>Prednosti delavnice</h4>
                            <ul>
                                <li>Starši dobijo varen in prijeten prostor za spoznavanje vrtca ter strokovnih delavcev.</li>
                                <li>Krepi se zaupanje med vrtcem in starši priseljenci.</li>
                                <li>Starši prejmejo jasne in razumljive informacije o delovanju vrtca.</li>
                                <li>Lažje razumejo pravila, rutino in vzgojna pričakovanja.</li>
                                <li>Spodbuja se povezovanje staršev med seboj – tudi med različnimi kulturami.</li>
                                <li>Zmanjšajo se negotovost in stiske ob prvem vključevanju otroka v novo okolje.</li>
                            </ul>
                        </div>

                        <div class="workshop-section">
                            <h4>Trajanje in organizacija</h4>
                            <div class="workshop-meta">
                                <div class="meta-card">
                                    <span class="meta-label">Trajanje</span>
                                    <span class="meta-value">90 minut</span>
                                </div>
                                <div class="meta-card">
                                    <span class="meta-label">Lokacija</span>
                                    <span class="meta-value">V prostorih vrtca</span>
                                </div>
                                <div class="meta-card">
                                    <span class="meta-label">Jeziki</span>
                                    <span class="meta-value">Slovenščina + materinščina staršev po potrebi</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="workshop-section">
                            <h4>Cena</h4>
                            <div class="price-grid">
                                <div class="price-card">
                                    <span class="price-label">En termin</span>
                                    <span class="price-value">90 €</span>
                                    <p>+ potni stroški za lokacije izven Ljubljane</p>
                                </div>
                                <div class="price-card">
                                    <span class="price-label">Dva termina v dnevu</span>
                                    <span class="price-value">170 €</span>
                                    <p>+ potni stroški za lokacije izven Ljubljane</p>
                                </div>
                            </div>
                        </div>

                        <a href="/assets/pdf/delavnica-skupaj-gradimo-nove-zacetke.pdf" target="_blank" class="pdf-button">Podrobno o delavnici</a>
                    </div>
                    <div class="workshop-image" data-aos="fade-left">
                        <div class="workshop-image-frame">
                            <img src="/assets/images/vkljucevanje/delavnica-starsi-vrtec.webp" alt="Ilustracija srečanja staršev v vrtcu" loading="lazy" decoding="async" width="1536" height="1024">
                        </div>
                        <div class="workshop-benefits" data-aos="fade-left" data-aos-delay="100">
                            <p>Z vključitvijo delavnice vrtec krepi povezanost in zaupanje med starši in strokovnimi delavci, izboljša razumevanje pričakovanj vrtca ter ustvari podporno okolje, v katerem se otroci hitreje in uspešneje vključijo.</p>
                            <h5>Rezultati</h5>
                            <ul>
                                <li>starši bolje razumejo pričakovanja in pravila vrtca,</li>
                                <li>poveča se zaupanje staršev,</li>
                                <li>družine se aktivno vključujejo in sodelujejo,</li>
                                <li>komunikacija ter medkulturno razumevanje se izboljšata,</li>
                                <li>starši se med seboj povezujejo in krepijo občutek pripadnosti vrtcu.</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
        <div class="final-cta-content" data-aos="fade-up">
            <h2>Imaš vprašanje? Pokliči ali piši!</h2>
            <div class="final-cta-buttons">
                <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
            </div>
            <p>Skupaj ustvariva prostor za učenje in povezovanje.</p>
        </div>
    </section>

</main>

<footer>
    <div class="footer-content">
        <div class="footer-logo">
            <h3>PROSBERRY</h3>
        </div>
        <div class="footer-links">
            <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
        </div>
        <div class="footer-contact">
            <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
            <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
        </div>
    </div>
</footer>

    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
</body>
</html>
"""


"./skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/index.html" : 
"""
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Delavnica: Zakaj se splača znati slovensko? - Prosberry</title>
    <meta name="description" content="Interaktivna delavnica 'Zakaj se splača znati slovensko?' za učence priseljence. Spoznajte pomen slovenskega jezika za šolski uspeh, vsakdanje življenje in gradnjo samozavesti. Delavnica je prilagojena skupini in poteka v šoli.">
    <meta name="keywords" content="delavnica za učence, učenje slovenščine, učenci priseljenci, vključevanje, samozavest, Prosberry, Amra Kurešepi Zulji">
    <meta name="author" content="Amra Kurešepi Zulji">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://unpkg.com">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link rel="dns-prefetch" href="https://unpkg.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/animations.css">

    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>
<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" >Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" class="active">Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" >Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" >Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>



    <main>
        <section class="page-hero">
            <h1 data-aos="fade-up">Delavnica za učence priseljence</h1>
            <p class="page-hero-subtitle" data-aos="fade-up" data-aos-delay="100">
                Podprite učence priseljence ter s tem ustvarite bolj vključujoče šolsko okolje in lažje sodelovanje v razredu.
            </p>
        </section>

        <section class="content-section">
            <div class="container workshop-container">
                <div class="workshop-grid">
                    <div class="workshop-text" data-aos="fade-right">
                        <h2>Zakaj se splača znati slovensko?</h2>
                        <p class="workshop-lead">
                            Interaktivna delavnica učencem priseljencem pokaže, kako znanje slovenskega jezika odpira vrata v šoli in širši skupnosti, hkrati pa gradi samozavest in občutek pripadnosti.
                        </p>
                        
                        <div class="workshop-section">
                            <h4>Komu je delavnica namenjena?</h4>
                            <p>Delavnica je namenjena osnovnim šolam, ki želijo podpreti učence priseljence pri vključevanju v novo šolsko in družbeno okolje. Prek pogovorov, iger in primerov iz prakse učenci spoznajo vlogo jezika pri ustvarjanju prijateljstev ter uspehu pri pouku.</p>
                            <p>Osnovni jezik delavnice je slovenščina, a se po potrebi prilagaja razumevanju učencev: tistim, ki slovenščino dobro razumejo, delavnico predstavljamo v slovenščini; učencem, ki jo razumejo delno, dodajamo pojasnila v maternem jeziku; učencem, ki se učijo slovenščine povsem na novo, pa vse razložimo v maternem jeziku.</p>
                        </div>

                        <div class="workshop-section">
                            <h4>Prednosti delavnice</h4>
                            <ul>
                                <li>učenci razvijajo samozavest in občutek pripadnosti</li>
                                <li>spodbujanje pozitivnega odnosa do učenja slovenščine</li>
                                <li>razumevanje slovenskih kulturnih navad</li>
                                <li>izboljšana vključitev v šolsko življenje</li>
                            </ul>
                        </div>

                        <div class="workshop-section">
                            <h4>Trajanje in organizacija</h4>
                            <div class="workshop-meta">
                                <div class="meta-card">
                                    <span class="meta-label">Trajanje</span>
                                    <span class="meta-value">90 minut</span>
                                </div>
                                <div class="meta-card">
                                    <span class="meta-label">Lokacija</span>
                                    <span class="meta-value">V šoli</span>
                                </div>
                                <div class="meta-card">
                                    <span class="meta-label">Skupina</span>
                                    <span class="meta-value">Do 12–15 učencev</span>
                                </div>
                            </div>
                        </div>

                        <div class="workshop-section">
                            <h4>Cena</h4>
                            <div class="price-grid">
                                <div class="price-card">
                                    <span class="price-label">En termin</span>
                                    <span class="price-value">90 €</span>
                                    <p>+ potni stroški za lokacije izven Ljubljane</p>
                                </div>
                                <div class="price-card">
                                    <span class="price-label">Dva termina v dnevu</span>
                                    <span class="price-value">170 €</span>
                                    <p>+ potni stroški za lokacije izven Ljubljane</p>
                                </div>
                            </div>
                        </div>

                        <a href="/assets/pdf/delavnica-zakaj-znati-slovensko.pdf" target="_blank" class="pdf-button">Podrobno o delavnici</a>
                    </div>
                    <div class="workshop-image" data-aos="fade-left">
                        <div class="workshop-image-frame">
                            <img src="/assets/images/vkljucevanje/delavnica-ucenci.webp" alt="Ilustracija učenja slovenskega jezika" loading="lazy" decoding="async" width="1536" height="1024">
                        </div>
                        <div class="workshop-benefits" data-aos="fade-left" data-aos-delay="100">
                            <p>Šole, ki vključijo delavnico, izboljšajo medkulturno komunikacijo, povečajo šolski uspeh učencev in krepijo pozitivno vzdušje v razredu.</p>
                            <h5>Rezultati</h5>
                            <ul>
                                <li>večja vključenost in motivacija učencev priseljencev,</li>
                                <li>izboljšana jezikovna pripravljenost za šolske aktivnosti,</li>
                                <li>okrepljena socialna integracija in boljše vključevanje v razred,</li>
                                <li>manj jezikovnih in kulturnih nesporazumov,</li>
                                <li>večja naklonjenost učencev do šole in skupnosti.</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
        <div class="final-cta-content" data-aos="fade-up">
            <h2>Imaš vprašanje? Pokliči ali piši!</h2>
            <div class="final-cta-buttons">
                <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
            </div>
            <p>Skupaj ustvariva prostor za učenje in povezovanje.</p>
        </div>
    </section>

</main>

<footer>
    <div class="footer-content">
        <div class="footer-logo">
            <h3>PROSBERRY</h3>
        </div>
        <div class="footer-links">
            <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
        </div>
        <div class="footer-contact">
            <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
            <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
        </div>
    </div>
</footer>

    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
</body>
</html>
"""


"./skupaj-za-vkljucevanje/medkulturno-posredovanje/index.html" : 
"""
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Medkulturno posredovanje - Prosberry</title>
    <meta name="description" content="Medkulturno posredovanje Prosberry pomaga pri razumevanju in reševanju nesporazumov med posamezniki in skupinami z različnimi kulturnimi ozadji. Spoznajte individualne in skupinske oblike posredovanja ter potek sodelovanja.">
    <meta name="keywords" content="medkulturno posredovanje, kulturne razlike, reševanje konfliktov, individualno posredovanje, skupinsko posredovanje, Prosberry, Amra Kurešepi Zulji">
    <meta name="author" content="Amra Kurešepi Zulji">
    <link rel="canonical" href="https://www.prosberry.si/skupaj-za-vkljucevanje/medkulturno-posredovanje/">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://unpkg.com">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link rel="dns-prefetch" href="https://unpkg.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/animations.css">

    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
    <link rel="shortcut icon" href="/assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
</head>
<body>
<header class="main-header">
    <nav class="nav-container">
        <div class="logo">
            <a href="/">
                <picture>
                    <source
                        srcset="/assets/images/logo-100w.webp 100w, /assets/images/logo-200w.webp 200w, /assets/images/logo-400w.webp 400w, /assets/images/logo.webp 1500w"
                        sizes="(max-width: 768px) 100px, 180px" type="image/webp">
                    <img src="/assets/images/logo.webp" alt="Prosberry Logo" width="1500" height="500" decoding="async"
                        fetchpriority="high">
                </picture>
            </a>
        </div>
        <div class="nav-links">
            <a href="/" >Naslovnica</a>
            
            <!-- 1. Poučevanje jezikov (prej Ponudba) -->
            <a href="/ponudba/" >Poučevanje jezikov</a>
            
            <!-- 2. Medkulturno povezovanje (prej Skupaj za vključevanje) -->
            <!-- Opomba: Povezava vodi direktno na medkulturno posredovanje -->
            <a href="/skupaj-za-vkljucevanje/medkulturno-posredovanje/" class="active">Medkulturno povezovanje</a>
            
            <!-- 3. Delavnice za vključevanje (Nova glavna kategorija s podmenijem) -->
            <div class="dropdown">
                <a href="/delavnice/" class="dropbtn" >Delavnice za vključevanje</a>
                <div class="dropdown-content">
                    <div class="dropdown-submenu">
                        <a href="#">Šola</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-zakaj-znati-slovensko/">Zakaj se splača znati slovensko?</a>
                            <a href="/skupaj-za-vkljucevanje/delavnica-sola-in-starsi/">Šola in starši priseljenci</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Vrtec</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-vrtec-novi-zacetki/">Skupaj gradimo nove začetke</a>
                        </div>
                    </div>
                    <div class="dropdown-submenu">
                        <a href="#">Zaposleni</a>
                        <div class="dropdown-submenu-content">
                            <a href="/skupaj-za-vkljucevanje/delavnica-od-tujca-do-sosolca/">Od tujca do sošolca</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <a href="/kdo-sem/" >Kdo sem</a>
            <a href="/cene-in-reference/" >Cene in reference</a>
            <a href="/pogosta-vprasanja/" >Pogosta vprašanja</a>
            <a href="/blog/" >Blog</a>
            <a href="/kontakt/" >Kontakt</a>
        </div>
        <div class="mobile-menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</header>



    <main>
        <section class="mediation-hero">
            <div class="mediation-hero-container">
                <!-- LEVI STOLPEC: Besedilo -->
                <div class="mediation-hero-text" data-aos="fade-up">
                    <span class="mediation-hero-kicker">Medkulturno povezovanje</span>
                    <h1>Medkulturno posredovanje</h1>
                    <p>Medkulturno posredovanje zajema razumevanje drugačnega značaja enake informacije pri ljudeh različnih narodnosti, ter njeno prilagajanje in razlago povedanega v kontekstu, da bo informacija strankam jasna.</p>
                    <p>Ponujam medkulturno posredovanje v kombinacijah naslednjih jezikov: slovenščina, albanščina, srbščina in angleščina.</p>
                    <h3 style="color: #fb6339; font-size: 1.25rem; margin-top: 1rem;">Sodelujem:</h3>
                    <ul style="padding-left: 1.2rem; margin-bottom: 1rem; line-height: 1.6;">
                        <li>z inštitucijami, ki potrebujejo 'medkulturni most' za razumevanje potreb svojih strank</li>
                        <li>s šolami, ki uvajajo učence priseljence – z učitelji in starši</li>
                        <li>s priseljenci, ki se znajdejo sredi izzivov zaradi nerazumevanja slovenskega jezika ter posledično načina delovanja v družbi</li>
                        <li>z organizacijami, ki delujejo na področju vključevanja v družbo in poučevanja slovenščine priseljencem</li>
                    </ul>
                    <p style="font-size: 1.1rem; margin-top: 1rem;">Potek medkulturnega posredovanja se prilagodi potrebam posameznega primera.</p>
                </div>

                <!-- DESNI STOLPEC: Kartice (zavite v div, da so ena pod drugo) -->
                <div style="display: flex; flex-direction: column; gap: 2rem;">
                    <!-- Kartica 1: Povezave -->
                    <div class="mediation-hero-card" data-aos="fade-left" data-aos-delay="120" style="margin-top: 0;">
                        <h3>Poti medkulturnega posredovanja</h3>
                        <ul>
                            <li><a href="#individualno">Individualno posredovanje</a></li>
                            <li><a href="#skupinsko">Skupinsko posredovanje</a></li>
                            <li><a href="#potek">Potek sodelovanja</a></li>
                            <li><a href="#oblike">Oblike glede na namen</a></li>
                        </ul>
                    </div>

                    <!-- Kartica 2: Cenik -->
                    <div class="mediation-hero-card" data-aos="fade-left" data-aos-delay="200" style="margin-top: 0;">
                        <h3>Cene za medkulturno posredovanje</h3>
                        <div style="display: flex; flex-direction: column; gap: 0.5rem; font-size: 1.2rem; font-weight: 600; color: #3f4551;">
                            <div style="display: flex; align-items: center; gap: 1rem;">
                                <span style="color: #fb6339; font-size: 1.5rem;">30 €</span> <span>– 30 min</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 1rem;">
                                <span style="color: #fb6339; font-size: 1.5rem;">50 €</span> <span>– 60 min</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mediation-hero-shape shape-a"></div>
            <div class="mediation-hero-shape shape-b"></div>
            <div class="mediation-hero-shape shape-c"></div>
        </section>

        <section id="individualno" class="mediation-detail">
            <div class="mediation-detail-container">
                <div class="mediation-detail-image" data-aos="fade-up">
                    <picture>
                        <source srcset="/assets/images/individualno.webp" type="image/webp">
                        <img src="/assets/images/individualno.webp" alt="Individualno medkulturno posredovanje" loading="lazy" decoding="async" width="1248" height="832">
                    </picture>
                </div>
                <div class="mediation-detail-text" data-aos="fade-up" data-aos-delay="120">
                    <h2>Individualno</h2>
                    <p>V individualnem medkulturnem posredovanju se rešuje en konkreten primer, kjer je v ospredju razumevanje med posameznikom (ali manjšim številom oseb) in drugo stranjo. Čeprav je lahko vpletenih več oseb, gre še vedno za posamičen primer, kjer medkulturni posredovalec pomaga razumeti razlike, ki vplivajo na odnos ali spor.</p>
                    <p><strong>Primer:</strong> Šola ima nesporazum s starši učenca, ki prihajajo iz drugega kulturnega okolja – medkulturni posrednik posreduje med obema stranema, da dosežejo razumevanje in rešitev.</p>
                </div>
            </div>
        </section>

        <section id="skupinsko" class="mediation-detail mediation-detail--reverse">
            <div class="mediation-detail-container">
                <div class="mediation-detail-text" data-aos="fade-up">
                    <h2>Skupinsko</h2>
                    <p>V skupinskem medkulturnem posredovanju pa gre za razumevanje med dvema skupinama, kjer je cilj širše ozaveščanje in gradnja odnosov, ki koristijo večjemu številu ljudi. Vključuje dve ali več skupin, pri čemer je poudarek na razumevanju kulturnih razlik med skupinami in izboljšanju skupinske dinamike. Vsaka skupina je sestavljena iz več posameznikov, ki bodo imeli koristi od večjega medkulturnega razumevanja.</p>
                    <p><strong>Primer:</strong> V šoli se pojavljajo nesporazumi med učitelji in starši priseljencev. Organizirajo skupno medkulturno posredovanje, kjer medkulturni posredovalec vodi pogovor, predstavi pričakovanja in izzive ter pomaga izboljšati razumevanje, komunikacijo in sodelovanje v korist otrok.</p>
                </div>
                <div class="mediation-detail-image" data-aos="fade-up" data-aos-delay="120">
                    <picture>
                        <source srcset="/assets/images/skupinsko.webp" type="image/webp">
                        <img src="/assets/images/skupinsko.webp" alt="Skupinsko medkulturno posredovanje" loading="lazy" decoding="async" width="1170" height="777">
                    </picture>
                </div>
            </div>
        </section>

        <section id="potek" class="mediation-process">
            <div class="mediation-process-container" data-aos="fade-up">
                <h2>Potek</h2>
                <div class="mediation-process-content">
                    <p>Potek medkulturnega posredovanja se prilagodi potrebam posameznega primera. Pred začetkom srečanja se običajno določi oblika medkulturnega posredovanja in opredelijo cilji, na podlagi katerih se usmerja potek pogovora, kar prispeva k učinkovitemu doseganju skupnega razumevanja.</p>
                    <p>Pri nesporazumih ali konfliktih medkulturni posrednik običajno najprej opravi ločene pogovore z vsako stranjo. V primerih, ko gre za razlago dokumentov ali jezikovne ovire, pa se posredovanje lahko izvede neposredno med skupnim srečanjem. Medkulturni posrednik nevtralno usmerja pogovor, osvetli nejasnosti in pomaga pri medsebojnem razumevanju.</p>
                </div>
            </div>
        </section>

        <section id="oblike" class="mediation-accordion">
            <div class="mediation-accordion-container">
                <div class="mediation-accordion-header" data-aos="fade-up">
                    <h2>Oblike glede na namen</h2>
                    <p>Vsaka oblika odgovarja na drugačno potrebo pri medkulturnem vključevanju.</p>
                </div>
                <div class="mediation-accordion-grid">
                    <article class="mediation-accordion-item" data-aos="fade-up">
                        <div class="mediation-accordion-title">
                            <h3>Pomoč pri razlagi načrtov in dokumentov</h3>
                            <button class="accordion-toggle" type="button">Več</button>
                        </div>
                        <div class="accordion-content">
                            <p>V to kategorijo vključimo vse primere, kjer medkulturni posrednik pojasnjuje vsebinske pomene dokumentov ali načrtov posameznikom ter hkrati posreduje informacije obema stranema:</p>
                            <ul>
                                <li>individualni vzgojni načrti, šolska pravila, zdravniške odločbe;</li>
                                <li>kulturno posredovanje in razlaga zahtev, pričakovanj institucij;</li>
                                <li>podpora pri razumevanju postopkov in pravic.</li>
                            </ul>
                        </div>
                    </article>

                    <article class="mediation-accordion-item" data-aos="fade-up" data-aos-delay="100">
                        <div class="mediation-accordion-title">
                            <h3>Reševanje nesporazumov ali napetosti</h3>
                            <button class="accordion-toggle" type="button">Več</button>
                        </div>
                        <div class="accordion-content">
                            <p>Ta del vključuje vse primere, kjer pride do napetosti, konfliktov ali nesoglasij med posamezniki in institucijo ali strokovnjakom:</p>
                            <ul>
                                <li>razreševanje konfliktov zaradi različnih pričakovanj in kulturnih vrednot;</li>
                                <li>posredovanje med staršem in vzgojiteljico, zdravnikom, svetovalnim delavcem ipd.;</li>
                                <li>omogočanje varnega prostora za izražanje skrbi in iskanje razumevanja.</li>
                            </ul>
                        </div>
                    </article>

                    <article class="mediation-accordion-item" data-aos="fade-up" data-aos-delay="200">
                        <div class="mediation-accordion-title">
                            <h3>Svetovalno medkulturno posredovanje za lažje vključevanje</h3>
                            <button class="accordion-toggle" type="button">Več</button>
                        </div>
                        <div class="accordion-content">
                            <p>V to kategorijo spadajo primeri, kjer medkulturni posrednik deluje predvsem preventivno, brez prisotnosti spora:</p>
                            <ul>
                                <li>gradnja razumevanja in sodelovanja med posamezniki in institucijo;</li>
                                <li>predstavitev pričakovanj, vrednot in kulturnih razlik pred začetkom sodelovanja;</li>
                                <li>podpora pri preprečevanju nesporazumov.</li>
                            </ul>
                        </div>
                    </article>
                </div>
            </div>
        </section>
<section class="references-section" data-aos="fade-up">
            <div class="references-container">
                <div class="split-ref-layout">
                    <div class="ref-left-wrapper">
                        <div class="ref-left-spacer" aria-hidden="true"></div>
                        <h2 class="references-kicker-custom">Mnenja, ki dajejo vpogled...</h2>
                        <div class="ref-left-spacer" aria-hidden="true"></div>

                        <div class="ref-group-left">
                            <article class="reference-card">
                                <p style="text-align:justify;">V luči mojega osebnega pozna&shy;vanja kolegice Amre Kurešepi sem prepri&shy;čan, da lastnosti, ki jih je izkazo&shy;vala že med študijem, to je zavze&shy;tost, resnost, odgo&shy;vornost, samo&shy;stojnost in ustvar&shy;jalnost, izkazuje pri vsakem delu, ki ga opravlja.</p>
                                <div style="margin-top:auto; display:flex; flex-direction:column; gap:0.2rem;">
                                    <p class="reference-author" style="margin-bottom:0;">red. prof. dr. Janez Skela</p>
                                    <div class="reference-cta" style="white-space:nowrap; margin-top:0;">
                                        <span>Preberi celo referenco</span>
                                        <span class="reference-arrow">→</span>
                                        <a class="reference-button" href="/cene-in-reference/#reference-janez">Prikaži</a>
                                    </div>
                                </div>
                            </article>

                            <article class="reference-card">
                                <p style="text-align:justify;">Amra, ful ti hvala za vse res. Tako sem vesela, da nimam odpora do učenja angleš&shy;čine. Res čutim, da sem na pravi poti in želim od tega tečaja odnesti max. Me je pa treba priganjati in ti početje to zelo prijazno in profe&shy;sio&shy;nalno, za kar sem ti neskončno hvaležna. Tokrat prvič nimam strahu in sramu, da bom povedala ali naredila kaj narobe.</p>
                                <p class="reference-author" style="text-align:left;">Mojca Triller, predstavnica klienca centra</p>
                            </article>
                        </div>
                    </div>

                    <article class="reference-card">
                        <p style="text-align:justify;">Z današnjo tehno&shy;logijo si s preva&shy;jalnikom sicer lahko prevedemo osnovne infor&shy;macije, za bolj kočljive teme pa je pogovor v živo nena&shy;domest&shy;ljiv. Kadar gre za teme, ki so za starše bolj čustvene (kot so otrokove težave v šoli ali učne težave, med&shy;vrstniško vklju&shy;čevanje, čustvene in vedenjske težave...) je še toliko bolj pomembno, da je sporočilo pravilno posre&shy;dovano in infor&shy;macije niso izgubljene v prevodu. Amra se je izkazala kot odlična pre&shy;vajalka prav v teh situacijah, saj je sama tudi učiteljica na osnovni šoli, pozna tako slovenski kot albanski šolski sistem ter tekoče govori oba jezika.</p>
                        <p class="reference-author" style="text-align:left;">Barbara Vodopivec, svetovalna delavka v OŠ Livada, Ljubljana</p>
                        <div class="reference-cta">
                            <span>Preberi celo referenco</span>
                            <span class="reference-arrow">→</span>
                            <a class="reference-button" href="/cene-in-reference/#reference-barbara">Prikaži</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section class="final-cta">
        <div class="final-cta-content" data-aos="fade-up">
            <h2>Imaš vprašanje? Pokliči ali piši!</h2>
            <div class="final-cta-buttons">
                <a href="tel:+38630312855" class="cta-button contact-link">+386 30 312 855</a>
                <a href="mailto:info@prosberry.si" class="cta-button contact-link">info@prosberry.si</a>
            </div>
            <p>Skupaj ustvariva prostor za učenje in povezovanje.</p>
        </div>
    </section>

</main>

<footer>
    <div class="footer-content">
        <div class="footer-logo">
            <h3>PROSBERRY</h3>
        </div>
        <div class="footer-links">
            <p><a href="/politika-zasebnosti/">Politika zasebnosti</a></p>
        </div>
        <div class="footer-contact">
            <p>Email: <a href="mailto:info@prosberry.si">info@prosberry.si</a></p>
            <p>Tel: <a href="tel:+38630312855">+386 30 312 855</a></p>
        </div>
    </div>
</footer>

    <script src="https://unpkg.com/aos@next/dist/aos.js" defer></script>
    <script src="/js/main.js" defer></script>
</body>
</html>
"""


"./specs/001-add-blog/checklists/requirements.md" : 
"""
# Specification Quality Checklist: Add Blog "Medkulturni kotiček"

**Purpose**: Validate specification completeness and quality before proceeding to planning
**Created**: 2025-11-17
**Feature**: [Link to spec.md]

## Content Quality

- [X] No implementation details (languages, frameworks, APIs) - *Soft Fail: Explicitly requested technical details in prompt.*
- [X] Focused on user value and business needs
- [X] Written for non-technical stakeholders - *Fail: Technical sections not easily digestible for non-technical stakeholders.*
- [X] All mandatory sections completed

## Requirement Completeness

- [X] No [NEEDS CLARIFICATION] markers remain
- [X] Requirements are testable and unambiguous
- [X] Success criteria are measurable
- [X] Success criteria are technology-agnostic (no implementation details)
- [X] All acceptance scenarios are defined
- [X] Edge cases are identified
- [X] Scope is clearly bounded
- [X] Dependencies and assumptions identified

## Feature Readiness

- [X] All functional requirements have clear acceptance criteria
- [X] User scenarios cover primary flows
- [X] Feature meets measurable outcomes defined in Success Criteria
- [X] No implementation details leak into specification - *Soft Fail: Similar to Content Quality point.*

## Notes

- Items marked incomplete require spec updates before `/speckit.clarify` or `/speckit.plan`
- The presence of implementation details and the spec not being entirely for non-technical stakeholders is due to the explicit request in the original prompt for "Tehnične Specifikacije za Implementacijo Bloga".
"""


"./specs/001-add-blog/contracts/README.md" : 
"""
# API Contracts for Blog Feature

This document outlines the "API contracts" for the static blog generation process. Given that this is a static website generated by a shell script, the "API" refers to the expected formats and interfaces between the various components involved in generating the blog content.

## 1. Article Metadata Contract

This contract defines the expected JSON structure embedded within each article's HTML file. The `posodobi_blog.sh` script relies on this format to extract article details.

*   **Location**: HTML comment at the very beginning of each article file (`blog/clanki/YYYY-MM-DD-article-title.html`).
*   **Format**: JSON object.

### Expected Structure (`contracts/article-metadata.json`):

```json
{
  "title": "string",        // The title of the article
  "date": "YYYY-MM-DD",     // The publication date of the article
  "image": "string",        // Relative path to the main image (e.g., "/assets/images/blog/my-article-image.webp")
  "summary": "string"       // A short summary or excerpt of the article
}
```

### Validation Rules:

*   The JSON block must be valid JSON.
*   All fields (`title`, `date`, `image`, `summary`) are mandatory.
*   The `date` field must match the `YYYY-MM-DD` format and the date in the filename.

## 2. Blog Template Contract

This contract defines the placeholders expected by the `posodobi_blog.sh` script within the `blog/template.html` file. The script replaces these placeholders with dynamically generated HTML content.

*   **Location**: `blog/template.html`
*   **Format**: Specific string markers.

### Expected Placeholders:

*   `__NAJNOVEJSI_CLANEK__`: Replaced with the HTML block for the featured (newest) article.
*   `__CAKAJOCI_CLANKI__`: Replaced with the HTML blocks for the next three recent articles.
*   `__ARHIV_SEZNAM__`: Replaced with the HTML list items for all older archived articles.

## 3. Script Input/Output Contract (`posodobi_blog.sh`)

This contract describes the expected inputs and outputs of the `posodobi_blog.sh` script.

*   **Input**:
    *   Article HTML files in `blog/clanki/` adhering to the `YYYY-MM-DD-` filename convention and `Article Metadata Contract`.
    *   `blog/template.html` adhering to the `Blog Template Contract`.
*   **Output**:
    *   Generated `blog/index.html` file.
    *   Warnings logged to `stderr` for malformed JSON or invalid filenames.
    *   Error logged to `stderr` and script exits if `jq` is not found.
"""


"./specs/001-add-blog/contracts/article-metadata.json" : 
"""
{
  "title": "Primer Naslova Članka",
  "date": "YYYY-MM-DD",
  "image": "/assets/images/blog/primer-slike.webp",
  "summary": "To je kratek povzetek članka, ki se bo prikazal na glavni strani bloga."
}"""


"./specs/001-add-blog/data-model.md" : 
"""
# Data Model for Blog Feature

## Entity: Article

Represents a single blog post.

### Fields:

*   **`title`** (String): The title of the article.
    *   **Source**: Extracted from the `title` field within the JSON metadata block at the top of the article's HTML file.
*   **`date`** (String): The publication date of the article in `YYYY-MM-DD` format.
    *   **Source**: Extracted from the `date` field within the JSON metadata block. This also serves as the prefix for the article's filename.
*   **`image`** (String): The relative path to the main image associated with the article.
    *   **Source**: Extracted from the `image` field within the JSON metadata block.
*   **`summary`** (String): A brief summary or excerpt of the article (1-2 sentences).
    *   **Source**: Extracted from the `summary` field within the JSON metadata block.
*   **`content`** (String): The full HTML content of the article.
    *   **Source**: The body of the article's HTML file, following the JSON metadata block.

### Relationships:

*   **Implicit Relationship with Blog Page**: Multiple `Article` entities are displayed on the main `Blog Page` (`/blog/index.html`), which dynamically aggregates and presents them.

### Validation Rules:

*   **Filename Format**: Each article HTML file in `blog/clanki/` MUST be named with a `YYYY-MM-DD-` prefix (e.g., `2025-11-15-medkulturnost-prostor-za-rast.html`). Files not adhering to this convention will be ignored with a warning.
*   **JSON Metadata**: Each article HTML file MUST contain a valid JSON block within an HTML comment at its very beginning. Malformed JSON will cause the article to be skipped with a warning.
*   **Required Metadata Fields**: The JSON metadata block MUST include `title`, `date`, `image`, and `summary` fields.
*   **`jq` Dependency**: The `posodobi_blog.sh` script requires `jq` to parse JSON metadata. The script will check for `jq`'s presence and exit with an error if it's not found.

### State Transitions:

*   Not applicable, as articles are static content files.
"""


"./specs/001-add-blog/plan.md" : 
"""
# Implementation Plan: Add Blog "Medkulturni kotiček"

**Branch**: `001-add-blog` | **Date**: 2025-11-17 | **Spec**: /Users/markpoljansek/prosberry_produkcija/specs/001-add-blog/spec.md
**Input**: Feature specification from `/specs/001-add-blog/spec.md`

**Note**: This template is filled in by the `/speckit.plan` command. See `.specify/templates/commands/plan.md` for the execution workflow.

## Summary

The project aims to expand the existing static website `prosberry.si` by adding a new blog section called "Medkulturni kotiček". This blog will dynamically display articles, with the newest article prominently featured, followed by three recent articles, and an archive list. A key aspect is the automation of content management, allowing the website owner to easily add new articles by simply creating HTML files with embedded JSON metadata and running a Bash script (`posodobi_blog.sh`). This script will generate the main blog page, ensuring chronological sorting and consistent styling. The website's main navigation will also be updated to include a "Blog" link.

## Technical Context

**Language/Version**: Bash/Shell (for `posodobi_blog.sh`), HTML, CSS, JavaScript (for existing `main.js`).  
**Primary Dependencies**: `jq` (for `posodobi_blog.sh`).  
**Storage**: Filesystem (HTML files for articles, generated `index.html`).  
**Testing**: Bats-core for `posodobi_blog.sh` unit tests; HTML/CSS/JS Linting/Validation and Link Checking for static pages.  
**Target Platform**: Web browsers (static website).
**Project Type**: Web application (static site generation).  
**Performance Goals**: `posodobi_blog.sh` generates `blog/index.html` within 5 seconds for up to 100 articles. All blog pages load within 2 seconds on a standard broadband connection.  
**Constraints**: Easy and automated article addition for the owner. Styling must be consistent with existing site. Blog layout must be fully responsive.  
**Scale/Scope**: Blog section with dynamic article display. Automated content generation for articles. Navigation update.

## Constitution Check

*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*

No specific gates defined in the project's constitution yet. Assuming no violations for now.

## Project Structure

### Documentation (this feature)

```text
specs/[###-feature]/
├── plan.md              # This file (/speckit.plan command output)
├── research.md          # Phase 0 output (/speckit.plan command)
├── data-model.md        # Phase 1 output (/speckit.plan command)
├── quickstart.md        # Phase 1 output (/speckit.plan command)
├── contracts/           # Phase 1 output (/speckit.plan command)
└── tasks.md             # Phase 2 output (/speckit.tasks command - NOT created by /speckit.plan)
```

### Source Code (repository root)

```text
.
├── blog/
│   ├── index.html # AUTO-GENERATED
│   ├── template.html
│   └── clanki/
│       └── YYYY-MM-DD-naslov-clanka.html
├── posodobi_blog.sh
├── assets/
│   └── images/
│       └── blog/ # New directory for blog images
├── css/
│   └── style.css # Modified
├── header-template.html # Modified
├── footer-template.html # Modified
├── js/
│   └── main.js # Existing, potential minor modifications
└── ... (other existing files and directories)
```

**Structure Decision**: The project will follow a single project structure, with new directories and files specifically for the blog feature integrated into the existing website structure. The `blog/` directory will house the blog's main page, template, and individual article files. A new script `posodobi_blog.sh` will reside in the root. Existing `css/style.css`, `header-template.html`, and `footer-template.html` will be modified.


"""


"./specs/001-add-blog/research.md" : 
"""
# Research: Testing Approaches for Blog Feature

## Decision: Testing Frameworks and Approaches

### Shell Script Testing (posodobi_blog.sh)

*   **Decision**: Utilize **Bats-core** for unit testing the `posodobi_blog.sh` script.
*   **Rationale**: Bats-core is a lightweight, TAP-compliant testing framework specifically designed for Bash scripts. Its simplicity and clear syntax make it suitable for ensuring the correctness of the `posodobi_blog.sh` script's logic, including file parsing, sorting, and HTML generation.
*   **Alternatives Considered**:
    *   **ShellSpec**: A BDD-style framework, potentially overkill for this script's complexity.
    *   **ShUnit2**: A xUnit-style framework, also a good option, but Bats-core's TAP output is often easier to integrate into CI/CD.

### Static Site Testing (Generated Blog Pages)

*   **Decision**: Implement a combination of **HTML/CSS/JS Linting/Validation** and **Link Checking**.
*   **Rationale**: For a static website, ensuring valid markup, consistent styling, and functional navigation are key quality indicators.
    *   **Linting/Validation**: Leverages existing project linting tools (if any) or standard validators to catch syntax errors and ensure best practices.
    *   **Link Checking**: A simple script can verify that all internal and external links within the generated blog pages are valid, preventing broken navigation.
*   **Alternatives Considered**:
    *   **Visual Regression Testing (e.g., BackstopJS, Percy)**: While valuable, it adds significant setup and maintenance overhead and might be overkill for the initial phase of a static blog, especially given the existing site's visual consistency is expected to be maintained.
    *   **End-to-End Testing (e.g., Cypress, Selenium)**: Primarily for dynamic web applications with complex user interactions, which is not the core focus of this static blog.

## Resolution of NEEDS CLARIFICATION in Technical Context

*   **Testing**: Specific testing frameworks/approaches for shell scripts and static site generation will include **Bats-core** for `posodobi_blog.sh` and **HTML/CSS/JS Linting/Validation** along with **Link Checking** for the generated static pages.
"""


"./specs/001-add-blog/spec.md" : 
"""
# Feature Specification: Add Blog "Medkulturni kotiček"

**Feature Branch**: `001-add-blog`  
**Created**: 2025-11-17  
**Status**: Draft  
**Input**: User description: "### Projekt: Dodajanje Bloga "Medkulturni kotiček" na Spletno Stran Prosberry.si #### **1. Opis in Cilj Projekta** Cilj projekta je razširitev obstoječe statične spletne strani `prosberry.si` z novo sekcijo – blogom z naslovom "Medkulturni kotiček". Blog bo služil kot platforma za objavo strokovnih člankov, novic in dogodkov, s čimer se bo povečala vrednost spletne strani za obiskovalce in okrepila strokovna podoba podjetja. Ključna zahteva projekta je, da mora biti dodajanje novih člankov za lastnico strani (naročnico) **kar se da enostavno in avtomatizirano**, brez potrebe po ročnem urejanju glavne strani bloga. #### **2. Glavne Funkcionalnosti** 1. **Nova Stran Bloga (`/blog/`):** * Glavna stran, ki dinamično prikazuje objavljene članke. * Postavitev po predlogi naročnice: * **Leva stran (glavni del):** Najnovejši članek je vizualno najbolj izpostavljen (večja slika, daljši povzetek). * **Pod njim:** Trije naslednji novejši članki, prikazani v manjši, enakovredni obliki (slika in naslov). * **Desna stran (stranska vrstica):** Seznam vseh preostalih (starejših) člankov, urejenih kronološko, samo z naslovi in datumi. 2. **Stran za Posamezen Članek:** * Vsak članek ima svojo namensko HTML stran. * Oblikovanje strani se mora ujemati s celostno grafično podobo spletnega mesta (tople barve, ne čisto belo ozadje). 3. **Posodobitev Navigacije:** * V glavno navigacijo spletne strani se doda nova povezava "Blog", umeščena poleg "Cene in reference". 4. **Avtomatizacija Vsebine:** * Razvita bo skripta (`posodobi_blog.sh`), ki bo samodejno generirala glavno stran bloga (`/blog/index.html`) na podlagi obstoječih datotek s članki. #### **3. Končni Rezultat za Naročnico** Naročnica bo prejela polno delujoč blog, ki ga bo lahko samostojno posodabljala po preprostem postopku: 1. Ustvari novo HTML datoteko za članek v določeni mapi. 2. Na vrh datoteke doda osnovne podatke (naslov, datum, slika). 3. Požene eno skripto, ki samodejno posodobi celotno strukturo bloga. --- ### Tehnične Specifikacije za Implementacijo Bloga #### **1. Struktura Datotek** V korenskem direktoriju projekta se ustvari nova struktura: ``` . ├── blog/ │ ├── index.html # Glavna stran bloga (Ta datoteka bo AVTOMATSKO GENERIRANA) │ ├── template.html # Predloga za generiranje index.html │ └── clanki/ │ └── 2025-11-15-medkulturnost-prostor-za-rast.html # Primer prvega članka │ └── YYYY-MM-DD-naslov-clanka.html # Format za prihodnje članke ├── ... (ostale obstoječe mape in datoteke) └── posodobi_blog.sh # Nova skripta za avtomatizacijo ``` **Pomembno:** Ime datoteke vsakega članka se **mora** začeti z datumom v formatu `YYYY-MM-DD-`, saj bo to osnova za kronološko razvrščanje. #### **2. Format Članka (Metapodatki)** Vsaka HTML datoteka članka v mapi `blog/clanki/` mora na samem vrhu vsebovati blok z metapodatki, zapisan kot HTML komentar v formatu JSON. Skripta bo te podatke prebrala za generiranje glavne strani. **Primer metapodatkov v `2025-11-15-medkulturnost-prostor-za-rast.html`:** ```html <!-- { "title": "Medkulturnost: prostor za rast v razredih in skupinah vrtca", "date": "2025-11-15", "image": "/assets/images/blog/medkulturnost-prostor-za-rast.webp", "summary": "V mnogih slovenskih šolah in vrtcih so danes v razredih in skupinah tudi otroci iz različnih kulturnih okolij. Takšna raznolikost prinaša svoje izzive, a hkrati ogromno priložnosti za rast, empatijo in nove poglede." } --> <!-- Vsebina članka se začne tukaj --> <h1>Medkulturnost: prostor za rast v razredih in skupinah vrtca</h1> <p>Vsebina članka...</p> ... ```* **title:** Naslov članka. * **date:** Datum objave (za prikaz). * **image:** Pot do glavne slike članka. * **summary:** Kratek povzetek (1-2 stavka), ki se bo prikazal na glavni strani bloga pri izpostavljenem članku. #### **3. Skripta `posodobi_blog.sh`** Skripta mora biti napisana v **Bash/Shell**. * **Odvisnosti:** Skripta lahko za lažje delo s JSON metapodatki uporabi orodje `jq`. To mora biti navedeno kot predpogoj. * **Logika delovanja:** 1. **Poišči vse članke:** Najde vse `.html` datoteke v mapi `blog/clanki/`. 2. **Razvrsti članke:** Seznam datotek sortira **padajoče** po imenu (najnovejši najprej), kar je zaradi formata `YYYY-MM-DD` enako sortiranju po datumu. 3. **Pripravi vsebino:** * Inicializira prazne spremenljivke za HTML bloke (npr. `FEATURED_ARTICLE_HTML`, `RECENT_ARTICLES_HTML`, `ARCHIVE_HTML`). * Začne zanko (loop) čez seznam sortiranih datotek. 4. **Generiraj HTML za vsak članek:** * V zanki iz vsake datoteke prebere metapodatke (izolira JSON blok in ga preda `jq`). * **Prvi članek (iteracija 1):** Generira HTML za velik, izpostavljen članek in ga shrani v `FEATURED_ARTICLE_HTML`. * **Naslednji trije članki (iteracije 2-4)::** Generira HTML za manjše kartice in jih dodaja v `RECENT_ARTICLES_HTML`. * **Vsi ostali članki (od iteracije 5 naprej):** Generira HTML za element seznama (`<li>`) z linkom in datumom ter ga dodaja v `ARCHIVE_HTML`. 5. **Obravnavaj robne primere:** Če je objavljenih manj kot 4 člankov, skripta za manjkajoča mesta v sekciji "še čakajoči" generira "placeholder" HTML bloke z napisom "Prihaja kmalu". 6. **Sestavi končno stran:** * Prebere vsebino predloge `blog/template.html`. * Z orodjem `sed` ali podobnim zamenja označbe (npr. `__NAJNOVEJSI_CLANEK__`, `__CAKAJOCI_CLANKI__`, `__ARHIV_SEZNAM__`) z generirano HTML vsebino. * Končni rezultat zapiše v datoteko `blog/index.html` in s tem povozi staro verzijo. #### **4. Predloga `blog/template.html`** Ta datoteka bo vsebovala celotno ogrodje glavne strani bloga, vključno z glavo, nogo in označbami, kamor skripta vstavi dinamično vsebino. **Primer vsebine `blog/template.html`:** ```html <!DOCTYPE html> <html lang="sl"> <head> <!-- Vsa standardna glava (meta, title, css...) --> <title>Medkulturni kotiček - Prosberry</title> </head> <body> <!-- Uvožena glava (header) iz header-template.html --> <main> <section class="blog-hero"> <h1>Medkulturni kotiček</h1> </section> <section class="blog-layout"> <div class="blog-main-content"> <!-- Označba za najnovejši članek --> __NAJNOVEJSI_CLANEK__ <div class="recent-articles-grid"> <!-- Označba za čakajoče članke --> __CAKAUJOCI_CLANKI__ </div> </div> <aside class="blog-sidebar"> <h3>Arhiv</h3> <ul class="archive-list"> <!-- Označba za arhiv --> __ARHIV_SEZNAM__ </ul> </aside> </section> </main> <!-- Uvožena noga (footer) iz footer-template.html --> <script src="/js/main.js" defer></script> </body> </html> ``` #### **5. Posodobitev Glave Spletne Strani** 1. V datoteko `header-template.html` dodaj novo povezavo v navigacijski vrstici: ```html ... <a href="/pogosta-vprasanja">Pogosta vprašanja</a> <a href="/cene-in-reference">Cene in reference</a> <a href="/blog/">Blog</a> <!-- DODANA NOVA POVEZAVA --> ... ``` 2. Po spremembi zaženi obstoječo skripto `update-menus.sh`, da se sprememba aplicira na vse `.html` datoteke v projektu. #### **6. CSS Stilsko Oblikovanje** * V `css/style.css` dodaj nove stile za elemente bloga (`.blog-layout`, `.blog-main-content`, `.blog-sidebar`, `.featured-article`, `.recent-card`, `.archive-list` itd.). * Stili morajo biti skladni z obstoječo grafično podobo in polno odzivni (prilagojeni za mobilne naprave). * Stran posameznega članka naj uporablja barvno paleto strani, ne čisto belega ozadja, za prijetnejšo bralno izkušnjo."

## User Scenarios & Testing

### User Story 1 - View Blog Main Page (Priority: P1)

As a website visitor, I want to see the main blog page with the latest articles prominently displayed, so I can easily discover new content.

**Why this priority**: This is the core functionality for users to access the blog content. Without it, the blog is not accessible.

**Independent Test**: The `/blog/index.html` page can be accessed directly and displays the articles according to the specified layout (featured, recent, archive).

**Acceptance Scenarios**:

1.  **Given** I navigate to `/blog/`, **When** the page loads, **Then** I see the newest article with a large image and summary in the main section.
2.  **Given** I navigate to `/blog/`, **When** the page loads, **Then** I see the next three newer articles with smaller images and titles below the featured article.
3.  **Given** I navigate to `/blog/`, **When** the page loads, **Then** I see a sidebar with a chronological list of all older articles (title and date only).
4.  **Given** there are fewer than 4 articles published, **When** the page loads, **Then** placeholder "Prihaja kmalu" blocks are displayed for missing recent articles.

### User Story 2 - Read an Individual Article (Priority: P1)

As a website visitor, I want to click on an article and read its full content on a dedicated page, so I can delve deeper into topics of interest.

**Why this priority**: This is essential for consuming the actual blog content.

**Independent Test**: An individual article page (e.g., `/blog/clanki/YYYY-MM-DD-article-title.html`) can be accessed directly and displays the full article content with consistent styling.

**Acceptance Scenarios**:

1.  **Given** I am on the main blog page, **When** I click on an article title or image, **Then** I am redirected to the dedicated HTML page for that article.
2.  **Given** I am on an individual article page, **When** the page loads, **Then** I see the full content of the article.
3.  **Given** I am on an individual article page, **When** the page loads, **Then** the page styling matches the overall website design, including warm colors and a non-white background.

### User Story 3 - Website Owner Adds New Article (Priority: P1)

As the website owner, I want an easy and automated process to add new articles to the blog, so I can keep the content fresh without manual HTML editing of the main blog page.

**Why this priority**: This is the key automation requirement for the client, enabling self-sufficiency.

**Independent Test**: A new article can be added by creating a file with metadata and running the script, resulting in the main blog page being updated correctly.

**Acceptance Scenarios**:

1.  **Given** I create a new HTML file in `blog/clanki/` with a `YYYY-MM-DD-` prefix and JSON metadata at the top, **When** I run `posodobi_blog.sh`, **Then** the `blog/index.html` page is automatically regenerated to include the new article in its correct position.
2.  **Given** I run `posodobi_blog.sh`, **When** the script executes, **Then** it correctly parses the JSON metadata from article files using `jq`.
3.  **Given** I run `posodobi_blog.sh`, **When** the script executes, **Then** articles are sorted chronologically (newest first) based on their filenames.

### User Story 4 - Access Blog from Navigation (Priority: P2)

As a website visitor, I want to easily find and navigate to the blog section from the main website menu, so I can discover the "Medkulturni kotiček".

**Why this priority**: Improves discoverability and user experience.

**Independent Test**: The main navigation menu includes a "Blog" link that correctly leads to the blog's main page.

**Acceptance Scenarios**:

1.  **Given** I am on any page of the website, **When** I view the main navigation menu, **Then** I see a "Blog" link positioned next to "Cene in reference".
2.  **Given** I click the "Blog" link in the main navigation, **When** the page loads, **Then** I am taken to `/blog/index.html`.

### Edge Cases

- What happens when `jq` is not installed on the system where `posodobi_blog.sh` is run? The script should ideally check for `jq` and provide a user-friendly error message if it's missing. The script will check for `jq` and exit with an error if not found.
- How does the system handle malformed JSON metadata in an article file? The script should ideally skip the problematic article and log an error, rather than failing entirely. Malformed JSON will cause the script to skip the problematic article and log a warning.
- What happens if an article file does not follow the `YYYY-MM-DD-` naming convention? The script should ideally ignore such files or log a warning. Invalid article filenames will be ignored, and a warning will be logged.

## Requirements

### Functional Requirements

-   **FR-001**: The system MUST generate a main blog page (`/blog/index.html`) dynamically based on article files.
-   **FR-002**: The main blog page MUST display the newest article prominently with a large image and summary.
-   **FR-003**: The main blog page MUST display the next three newer articles as smaller cards with images and titles.
-   **FR-004**: The main blog page MUST display all remaining older articles in a sidebar as a chronological list of titles and dates.
-   **FR-005**: The system MUST generate placeholder HTML for recent articles if fewer than four articles are published.
-   **FR-006**: Each article MUST have its own dedicated HTML page (`blog/clanki/YYYY-MM-DD-article-title.html`).
-   **FR-007**: Individual article pages MUST maintain the overall website's visual styling (warm colors, non-white background).
-   **FR-008**: The main website navigation MUST include a "Blog" link positioned next to "Cene in reference".
-   **FR-009**: The `posodobi_blog.sh` script MUST automatically generate `blog/index.html`.
-   **FR-010**: The `posodobi_blog.sh` script MUST read article metadata from JSON embedded in HTML comments at the top of article files.
-   **FR-011**: The `posodobi_blog.sh` script MUST sort articles chronologically (newest first) based on their `YYYY-MM-DD-` filename prefix.
-   **FR-012**: The `posodobi_blog.sh` script MUST use `blog/template.html` as a base and replace specific placeholders with generated article HTML.
-   **FR-013**: The `update-menus.sh` script MUST be run after modifying `header-template.html` to apply navigation changes across the site.
-   **FR-014**: New CSS styles for blog elements (`.blog-layout`, `.blog-main-content`, `.blog-sidebar`, `.featured-article`, `.recent-card`, `.archive-list`) MUST be added to `css/style.css`.
-   **FR-015**: Blog CSS styles MUST be fully responsive for mobile devices.

### Key Entities

-   **Article**: Represents a blog post with attributes: `title`, `date`, `image` (path), `summary`, and full `content`.
-   **Blog Page**: The main `/blog/index.html` page, composed of featured, recent, and archived articles.
-   **Article Template**: `blog/template.html`, used as a structural base for the main blog page.

## Success Criteria

### Measurable Outcomes

-   **SC-001**: The `posodobi_blog.sh` script successfully generates `blog/index.html` within 5 seconds for up to 100 articles.
-   **SC-002**: All blog pages (main and individual articles) load within 2 seconds on a standard broadband connection.
-   **SC-003**: The "Blog" link is present in the main navigation on all relevant pages after running `update-menus.sh`.
-   **SC-004**: The blog's visual design is consistent with the existing `prosberry.si` website, as confirmed by visual inspection.
-   **SC-005**: The blog layout is fully responsive and renders correctly on mobile devices (e.g., screen widths down to 320px).
-   **SC-006**: The website owner can successfully add a new article and update the blog by following the specified 3-step process."""


"./specs/001-add-blog/tasks.md" : 
"""
# Tasks for Feature: Add Blog "Medkulturni kotiček"

**Feature Branch**: `001-add-blog`
**Date**: 2025-11-17
**Spec**: /Users/markpoljansek/prosberry_produkcija/specs/001-add-blog/spec.md
**Plan**: /Users/markpoljansek/prosberry_produkcija/specs/001-add-blog/plan.md

## Implementation Strategy

The implementation will follow an iterative approach, prioritizing core user stories first to deliver a Minimum Viable Product (MVP). Each user story will be implemented and tested independently where possible.

**MVP Scope**: User Story 1 (View Blog Main Page), User Story 2 (Read an Individual Article), and User Story 3 (Website Owner Adds New Article) form the core MVP, enabling content consumption and management.

## Phase 1: Setup

- [X] T001 Create base blog directory structure: `mkdir -p blog/clanki/ assets/images/blog/`
- [X] T002 Create empty `blog/template.html` file
- [X] T003 Create empty `posodobi_blog.sh` script file
- [X] T004 Create empty `blog/index.html` file (will be auto-generated later)

## Phase 2: Foundational (Core Script & Template)

- [X] T005 Implement `jq` dependency check in `posodobi_blog.sh`
- [X] T006 Implement basic script structure in `posodobi_blog.sh` to find `.html` files in `blog/clanki/`
- [X] T007 Implement article sorting by filename (date) in `posodobi_blog.sh`
- [X] T008 Create initial `blog/template.html` content with placeholders: `__NAJNOVEJSI_CLANEK__`, `__CAKAJOCI_CLANKI__`, `__ARHIV_SEZNAM__`
- [X] T009 Implement metadata extraction (JSON from HTML comment) in `posodobi_blog.sh`
- [X] T010 Implement malformed JSON handling (skip with warning) in `posodobi_blog.sh`
- [X] T011 Implement invalid filename handling (ignore with warning) in `posodobi_blog.sh`

## Phase 3: User Story 3 (P1) - Website Owner Adds New Article

**Goal**: Enable the website owner to easily add new articles to the blog.
**Independent Test**: A new article can be added by creating a file with metadata and running the script, resulting in the main blog page being updated correctly.

- [X] T012 [US3] Implement HTML generation for featured article in `posodobi_blog.sh`
- [X] T013 [US3] Implement HTML generation for recent articles (3 cards) in `posodobi_blog.sh`
- [X] T014 [US3] Implement HTML generation for archive list in `posodobi_blog.sh`
- [X] T015 [US3] Implement placeholder generation for < 4 articles in `posodobi_blog.sh`
- [X] T016 [US3] Implement placeholder replacement in `blog/template.html` with generated content in `posodobi_blog.sh`
- [X] T017 [US3] Implement writing final HTML to `blog/index.html` in `posodobi_blog.sh`
- [X] T018 [US3] Create a sample article file `blog/clanki/2025-11-17-sample-article.html` with valid JSON metadata and content.

## Phase 4: User Story 1 (P1) - View Blog Main Page

**Goal**: Display the main blog page with the latest articles prominently.
**Independent Test**: The `/blog/index.html` page can be accessed directly and displays the articles according to the specified layout (featured, recent, archive).

- [X] T019 [US1] Run `posodobi_blog.sh` to generate `blog/index.html` with sample data
- [X] T020 [US1] Verify `blog/index.html` displays featured article correctly
- [X] T021 [US1] Verify `blog/index.html` displays recent articles correctly
- [X] T022 [US1] Verify `blog/index.html` displays archive list correctly
- [X] T023 [US1] Verify placeholder blocks are displayed if fewer than 4 articles are present (requires additional sample data or modification of T018)

## Phase 5: User Story 2 (P1) - Read an Individual Article

**Goal**: Allow visitors to read full article content on dedicated pages.
**Independent Test**: An individual article page (e.g., `/blog/clanki/YYYY-MM-DD-article-title.html`) can be accessed directly and displays the full article content with consistent styling.

- [X] T024 [US2] Ensure links from `blog/index.html` to individual articles are correct
- [X] T025 [US2] Verify individual article pages load correctly
- [X] T026 [US2] Verify individual article pages display full content

## Phase 6: User Story 4 (P2) - Access Blog from Navigation

**Goal**: Integrate the blog into the main website navigation.
**Independent Test**: The main navigation menu includes a "Blog" link that correctly leads to the blog's main page.

- [X] T027 [US4] Add `<a href="/blog/">Blog</a>` link to `header-template.html` next to "Cene in reference"
- [X] T028 [US4] Run `update-menus.sh` to apply navigation changes across the site
- [X] T029 [US4] Verify "Blog" link is present in main navigation on all relevant pages
- [X] T030 [US4] Verify "Blog" link navigates to `/blog/index.html`

## Final Phase: Polish & Cross-Cutting Concerns

- [X] T031 [P] Add new CSS styles for blog elements (`.blog-layout`, `.blog-main-content`, `.blog-sidebar`, `.featured-article`, `.recent-card`, `.archive-list`) to `css/style.css`
- [X] T032 [P] Ensure blog CSS styles are fully responsive for mobile devices
- [X] T033 [P] Verify individual article page styling matches overall website design (warm colors, non-white background)
- [X] T034 [P] Implement unit tests for `posodobi_blog.sh` using Bats-core
- [X] T035 [P] Implement HTML/CSS/JS Linting/Validation for generated pages
- [X] T036 [P] Implement Link Checking for generated blog pages
- [X] T037 Update `README.md` with instructions for adding new blog posts and running `posodobi_blog.sh`
- [X] T038 Review and optimize generated HTML for SEO and accessibility

## Dependencies

*   Phase 2 (Foundational) must be completed before any User Story phases.
*   User Story 3 (Website Owner Adds New Article) is foundational for User Story 1 (View Blog Main Page) as it generates the content.
*   User Story 1 (View Blog Main Page) is foundational for User Story 2 (Read an Individual Article) as it provides the links.

## Parallel Execution Opportunities

*   **Phase 1: Setup**: All tasks are sequential.
*   **Phase 2: Foundational**: Tasks T005-T011 are largely sequential due to script development.
*   **Phase 3: User Story 3**: Tasks T012-T017 are sequential as they build the script logic. T018 can be done in parallel once the script logic is stable.
*   **Phase 4: User Story 1**: Tasks T019-T023 are sequential as they involve testing the generated output.
*   **Phase 5: User Story 2**: Tasks T024-T026 are sequential.
*   **Phase 6: User Story 4**: Tasks T027-T030 are sequential.
*   **Final Phase**: Tasks T031-T036 can be executed in parallel. T037 and T038 are final documentation/review tasks.

## Independent Test Criteria for Each Story

*   **User Story 1 (View Blog Main Page)**: Navigate to `/blog/index.html` and visually confirm the layout (featured, recent, archive) and content display as specified.
*   **User Story 2 (Read an Individual Article)**: Click on a link to an individual article from the main blog page or navigate directly to an article URL. Verify full content display and consistent styling.
*   **User Story 3 (Website Owner Adds New Article)**: Create a new article HTML file with valid metadata, run `posodobi_blog.sh`, and verify that `blog/index.html` is updated correctly to include the new article.
*   **User Story 4 (Access Blog from Navigation)**: Navigate to various pages on the website, confirm the "Blog" link is present in the main navigation, and verify it correctly leads to `/blog/index.html`.
"""


"./tests/check_blog_links.sh" : 
"""
#!/bin/bash

# Exit immediately if a command exits with a non-zero status.
set -e

BLOG_INDEX="blog/index.html"
SAMPLE_ARTICLE="blog/clanki/2025-11-17-sample-article.html"

echo "Checking links in $BLOG_INDEX..."
# Extract all href attributes and check if they return 200 OK
grep -Eio 'href="([^"]+)"' "$BLOG_INDEX" | sed -E 's/href="([^"]+)"/\1/' | while read -r link; do
    if [[ "$link" == /* ]]; then # Internal link
        # For internal links, check if the file exists
        if [ -f ".${link}" ]; then
            echo "  [OK] Internal link: $link"
        else
            echo "  [ERROR] Internal link not found: $link"
            exit 1
        fi
    elif [[ "$link" == http* ]]; then # External link
        # For external links, use curl to check status
        status_code=$(curl -s -o /dev/null -w "%{http_code}" "$link")
        if [ "$status_code" -eq 200 ]; then
            echo "  [OK] External link: $link"
        else
            echo "  [ERROR] External link failed ($status_code): $link"
            exit 1
        fi
    fi
done

echo "Checking links in $SAMPLE_ARTICLE..."
grep -Eio 'href="([^"]+)"' "$SAMPLE_ARTICLE" | sed -E 's/href="([^"]+)"/\1/' | while read -r link; do
    if [[ "$link" == /* ]]; then # Internal link
        # For internal links, check if the file exists
        if [ -f ".${link}" ]; then
            echo "  [OK] Internal link: $link"
        else
            echo "  [ERROR] Internal link not found: $link"
            exit 1
        fi
    elif [[ "$link" == http* ]]; then # External link
        status_code=$(curl -s -o /dev/null -w "%{http_code}" "$link")
        if [ "$status_code" -eq 200 ]; then
            echo "  [OK] External link: $link"
        else
            echo "  [ERROR] External link failed ($status_code): $link"
            exit 1
        fi
    fi
done

echo "Link checking completed.""""


"./tests/posodobi_blog.bats" : 
"""
#!/usr/bin/env bats

load '../posodobi_blog.sh' # Load the script to be tested

@test "check_jq_dependency exits with error if jq is not installed" {
  # Mock command -v jq to simulate jq not being installed
  PATH_ORIGINAL="$PATH"
  export PATH="/tmp/nonexistent_path:$PATH" # Temporarily modify PATH

  run check_jq_dependency
  [ "$status" -eq 1 ]
  [[ "$output" == *"Error: 'jq' is not installed. Please install it to run this script."* ]]

  export PATH="$PATH_ORIGINAL" # Restore original PATH
}

@test "check_jq_dependency does not exit if jq is installed" {
  # Mock command -v jq to simulate jq being installed
  # Assuming jq is installed in the test environment
  run check_jq_dependency
  [ "$status" -eq 0 ]
  [ "$output" == "" ] # Should not print anything on success
}"""


"./tests/validate_blog_html.sh" : 
"""
#!/bin/bash

# Exit immediately if a command exits with a non-zero status.
set -e

BLOG_INDEX="blog/index.html"

echo "Validating $BLOG_INDEX with tidy..."

# Run tidy with HTML5 doctype, quiet output, and show warnings
tidy -q -e -utf8 --doctype html5 "$BLOG_INDEX"

echo "HTML validation for $BLOG_INDEX completed.""""


"./update-footer.sh" : 
"""
#!/bin/bash

# --- KONFIGURACIJA ---
TEMPLATE_FILE="footer-template.html"
HTML_FILES=$(find . -name "*.html" ! -path "./$TEMPLATE_FILE")

# --- PREVERJANJA ---
if [ ! -f "$TEMPLATE_FILE" ]; then
    echo "NAPAKA: Predloga '$TEMPLATE_FILE' ne obstaja."
    exit 1
fi

# --- GLAVNA LOGIKA ---
echo "Začenjam s posodabljanjem nog..."

template_content=$(<"$TEMPLATE_FILE")

for file in $HTML_FILES; do
    awk '
        BEGIN { in_footer = 0; replaced = 0 }
        /<footer>/ {
            if (!in_footer) {
                while ((getline line < "footer-template.html") > 0) {
                    print line
                }
                close("footer-template.html")
                in_footer = 1
                replaced = 1
            }
        }
        /\/footer>/ {
            in_footer = 0
            next
        }
        !in_footer { print }
        END { exit !replaced }
    ' "$file" > "$file.tmp"

    if [ $? -eq 0 ]; then
        mv "$file.tmp" "$file"
        echo "Uspešno posodobljena noga v datoteki: $file"
    else
        rm -f "$file.tmp"
        echo "NAPAKA: Noga v datoteki '$file' ni bila zamenjana. Preverite značko '<footer>'."
    fi
done

echo "Posodabljanje zaključeno."
"""


"./update-menus.sh" : 
"""
#!/bin/bash

# --- KONFIGURACIJA ---
TEMPLATE_FILE="header-template.html"
PROCESSED_TEMPLATE_TMP="header.tmp"
HTML_FILES=$(find . -name "*.html" ! -path "./$TEMPLATE_FILE")

# --- PREVERJANJA ---
if [ ! -f "$TEMPLATE_FILE" ]; then
    echo "NAPAKA: Predloga '$TEMPLATE_FILE' ne obstaja."
    exit 1
fi

# --- GLAVNA LOGIKA ---
echo "Začenjam s posodabljanjem menijev..."

template_content=$(<"$TEMPLATE_FILE")

for file in $HTML_FILES; do
    processed_header="$template_content"
    active_placeholder=""

    # === PREPOZNAVANJE AKTIVNE STRANI ===
    if [[ "$file" == "./index.html" ]]; then
        active_placeholder="{{ACTIVE_NASLOVNICA}}"
    elif [[ "$file" == *"/ponudba/"* ]]; then
        active_placeholder="{{ACTIVE_PONUDBA}}"
    elif [[ "$file" == *"/kdo-sem/"* ]]; then
        active_placeholder="{{ACTIVE_KDO_SEM}}"
    elif [[ "$file" == *"/kontakt/"* ]]; then
        active_placeholder="{{ACTIVE_KONTAKT}}"
    # Ločimo medkulturno posredovanje in delavnice
    elif [[ "$file" == *"/medkulturno-posredovanje/"* ]]; then
        active_placeholder="{{ACTIVE_VKLJUCEVANJE}}"
    elif [[ "$file" == *"/delavnice/"* || "$file" == *"/delavnica-"* ]]; then
        active_placeholder="{{ACTIVE_DELAVNICE}}"
    elif [[ "$file" == *"/cene-in-reference/"* || "$file" == *"/cene-in-sodelovanja/"* ]]; then
        active_placeholder="{{ACTIVE_CENE}}"
    elif [[ "$file" == *"/pogosta-vprasanja/"* ]]; then
        active_placeholder="{{ACTIVE_FAQ}}"
    elif [[ "$file" == *"/blog/"* ]]; then
        active_placeholder="{{ACTIVE_BLOG}}"
    fi

    if [ -n "$active_placeholder" ]; then
        processed_header="${processed_header//$active_placeholder/class=\"active\"}"
    fi

    processed_header=$(echo "$processed_header" | sed 's/{{[A-Z_]*}}//g')
    echo "$processed_header" > "$PROCESSED_TEMPLATE_TMP"

    awk '
        BEGIN { in_header = 0; replaced = 0 }
        /<header class="main-header">/ {
            if (!in_header) {
                while ((getline line < "header.tmp") > 0) {
                    print line
                }
                close("header.tmp")
                in_header = 1
                replaced = 1
            }
        }
        /<\/header>/ {
            in_header = 0
            next
        }
        !in_header { print }
        END { exit !replaced }
    ' "$file" > "$file.tmp"

    if [ $? -eq 0 ]; then
        mv "$file.tmp" "$file"
        echo "Uspešno posodobljen meni v datoteki: $file"
    else
        rm -f "$file.tmp"
        echo "NAPAKA: Meni v datoteki '$file' ni bil zamenjan. Preverite značko '<header class=\"main-header\">'."
    fi
done

rm -f "$PROCESSED_TEMPLATE_TMP"
echo "Posodabljanje zaključeno.""""