/* ═══════════════════════════════════════════════════════════════════════════
   TITANS GYM — DURRËS · Faqja publike
   ───────────────────────────────────────────────────────────────────────────
   Paleta "Energji sportive", e njëjtë me atë të aplikacionit
   (src/AlbaBizPalestra.Nderfaqja/wwwroot/stilet-titans.css).

   Ndërtimi është mobile-first: rregullat bazë vlejnë për celularin, pastaj
   mbishkruhen në 640px (tabletë e vogël), 900px (tabletë / laptop) dhe
   1200px (ekran i gjerë). Çdo komponent i mban vetë pikat e tij të thyerjes,
   që rregullat e lidhura të qëndrojnë bashkë.

   Struktura:
     1.  Variablat e brand-it
     2.  Rivendosja dhe baza
     3.  Ndihmësa (ena, fokusi, teksti vetëm për lexues)
     4.  Butonat
     5.  Kreu i navigimit
     6.  Heroi
     7.  Seksionet dhe kokat e tyre
     8.  Shërbimet
     9.  Pse Titans (shifrat + slot fotoje)
     10. Çmimet
     11. Orari i klasave
     12. Kontakti dhe harta
     13. Fundfaqja
     14. Lëvizja e reduktuar
     15. SLOT-et e fotove reale
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ 1. VARIABLAT E BRAND-IT ══════════════════════════════════════════════ */

:root {
    /* Ngjyrat kryesore */
    --portokalli: #F97316;
    --portokalli-i-zbutur: #FB923C;          /* varianti për sfond të errët */
    --portokalli-tekst: #C2410C;             /* varianti i lexueshëm mbi sfond të çelët */
    --lima: #A3E635;
    --lima-e-ndritshme: #BEF264;
    --lima-tekst: #3F6212;                   /* varianti i lexueshëm mbi sfond të çelët */
    --nate: #0F172A;
    --nate-e-thelle: #0B1220;
    --siperfaqja-erret: #1E293B;
    --sfondi-celet: #FAFAF9;
    --siperfaqja-celet: #FFFFFF;

    /* Ngjyrat semantike */
    --sukses: #22C55E;
    --paralajmerim: #FACC15;
    --rrezik: #EF4444;
    --info: #38BDF8;

    /* Teksti */
    --teksti-kryesor: #0F172A;
    --teksti-dytesor: #475569;
    --teksti-i-celet: #E2E8F0;
    --teksti-i-zbehte: #94A3B8;

    /* Kufijtë */
    --kufiri-celet: rgba(15, 23, 42, .10);
    --kufiri-erret: rgba(148, 163, 184, .18);

    /* Gradientet — identike me ato të aplikacionit */
    --titans-zjarr: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
    --titans-energji: linear-gradient(135deg, #A3E635 0%, #65A30D 100%);
    --titans-nate: linear-gradient(135deg, #0F172A 0%, #1E293B 60%, #24344d 100%);
    --titans-theks: linear-gradient(120deg, #FB923C 0%, #A3E635 100%);

    /* Fontet */
    --fonti-tekstit: "Barlow", "Segoe UI", "Roboto", system-ui, sans-serif;
    --fonti-titujve: "Barlow Condensed", "Barlow", "Segoe UI", "Roboto", sans-serif;

    /* Rrezet e qosheve */
    --rrezja-vogel: 8px;
    --rrezja-mesme: 14px;
    --rrezja-madhe: 18px;

    /* Kohëzgjatjet e animacioneve */
    --shpejt: .15s;
    --normal: .25s;
    --ngadale: .4s;
    --lehtesim: cubic-bezier(.4, 0, .2, 1);

    /* Lartësia e kreut — përdoret nga heroi dhe nga scroll-margin i seksioneve */
    --lartesia-kreut: 64px;

    /* Unaza e fokusit: e errët mbi sfond të çelët, lime mbi sfond të errët */
    --unaza-fokusi: #0F172A;
    --unaza-fokusi-erret: #BEF264;
}


/* ═══ 2. RIVENDOSJA DHE BAZA ═══════════════════════════════════════════════ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Ndalimi i rreshqitjes anesore ne celular.
 *
 * Duhet edhe te `html`, jo vetem te `body`: kur vendoset vetem te njeri prej
 * tyre, browser-at celulare e propagojne prapeseprape scroll-in te viewport-i
 * dhe faqja rreshqet anash — pikerisht simptoma "duhet ta rreshqasesh nga e
 * djathta ne te majte qe te duket butoni i menuse".
 *
 * `clip` dhe jo `hidden`: `hidden` e kthen elementin ne kontejner scroll-i,
 * gje qe prish çdo `position: sticky` brenda faqes dhe krijon nje zone ku
 * mund te rreshqitesh pa pare asgje. `clip` thjesht pret, pa efekte anesore.
 * Rreshti i pare mbetet si rezerve per browser-at pa mbeshtetje per `clip`. */
html,
body {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--fonti-tekstit);
    font-size: 16px;
    line-height: 1.6;
    color: var(--teksti-kryesor);
    background-color: var(--sfondi-celet);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* Sferat e blurta të heroit dalin pak jashtë kornizës; kjo pengon
       shiritin horizontal të lëvizjes në celular. */
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

svg {
    display: block;
}


/* ═══ 3. NDIHMËSA ══════════════════════════════════════════════════════════ */

/* Enë me gjerësi të kufizuar dhe hapësirë anësore që rritet me ekranin. */
.ena {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

/* Tekst i destinuar vetëm për lexuesit e ekranit.

   KUJDES: është `position: absolute`, prandaj vendoset ndaj prindit të parë
   TË POZICIONUAR. Nëse asnjë prind nuk është i pozicionuar, ai prind bëhet
   rrënja e faqes — dhe elementi i shpëton çdo `overflow` në mes. Kjo e zgjeron
   faqen në celular pa u parë asgjë. Prandaj çdo enë që mban tekst të tillë
   brenda një zone të gjerë (tabela e orarit, çelësi i menusë) është shënuar
   `position: relative` më poshtë. */
.vetem-per-lexues {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Lidhja e kapërcimit shfaqet vetëm kur merr fokusin nga tastiera. */
.kalo-tek-permbajtja {
    position: fixed;
    top: -5rem;
    left: 1rem;
    z-index: 200;
    padding: .8rem 1.25rem;
    border-radius: 0 0 var(--rrezja-vogel) var(--rrezja-vogel);
    background: var(--titans-zjarr);
    color: var(--nate);
    font-weight: 700;
    text-decoration: none;
    transition: top var(--shpejt) var(--lehtesim);
}

.kalo-tek-permbajtja:focus {
    top: 0;
}

/* Fokus i dukshëm kudo. Mbi sfond të çelët përdoret blu-nata (kontrast i lartë
   me të bardhën), mbi sfond të errët lima e ndritshme. */
:focus-visible {
    outline: 3px solid var(--unaza-fokusi);
    outline-offset: 3px;
}

.kreu-navigim :focus-visible,
.hero :focus-visible,
.seksioni--erret :focus-visible,
.fundfaqja :focus-visible {
    outline-color: var(--unaza-fokusi-erret);
}


/* ═══ 4. BUTONAT ═══════════════════════════════════════════════════════════ */

.buton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.65rem;
    border: 2px solid transparent;
    border-radius: var(--rrezja-vogel);
    font-family: var(--fonti-titujve);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--shpejt) var(--lehtesim),
                box-shadow var(--shpejt) var(--lehtesim),
                background-color var(--shpejt) var(--lehtesim),
                border-color var(--shpejt) var(--lehtesim),
                color var(--shpejt) var(--lehtesim),
                filter var(--shpejt) var(--lehtesim);
}

/* Teksti mbi portokalli është blu-natë, jo i bardhë: e bardha mbi #F97316
   nuk e arrin raportin 4.5:1 të kërkuar nga WCAG. */
.buton--primar {
    background: var(--titans-zjarr);
    color: var(--nate);
    box-shadow: 0 6px 18px rgba(249, 115, 22, .32);
}

.buton--primar:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 12px 26px rgba(249, 115, 22, .42);
}

.buton--primar:active {
    transform: translateY(0);
}

.buton--sekondar {
    background: rgba(163, 230, 53, .08);
    border-color: rgba(163, 230, 53, .5);
    color: var(--lima);
}

.buton--sekondar:hover {
    background: rgba(163, 230, 53, .16);
    border-color: var(--lima);
    transform: translateY(-2px);
}

.buton--vije {
    background: transparent;
    border-color: rgba(15, 23, 42, .2);
    color: var(--nate);
}

.buton--vije:hover {
    background: rgba(249, 115, 22, .07);
    border-color: var(--portokalli);
    color: var(--portokalli-tekst);
    transform: translateY(-2px);
}

.buton--vogel {
    padding: .6rem 1.1rem;
    font-size: .92rem;
}


/* ═══ 5. KREU I NAVIGIMIT ══════════════════════════════════════════════════ */

/* `fixed`, jo `sticky`, që heroi të shtrihet plotësisht poshtë tij dhe kreu
   të mbetet i tejdukshëm derisa faqja të lëvizë. */
.kreu-navigim {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 100;
    transition: background-color var(--normal) var(--lehtesim),
                box-shadow var(--normal) var(--lehtesim);
}

.kreu--sfond {
    background-color: rgba(11, 18, 32, .93);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    box-shadow: 0 1px 0 rgba(249, 115, 22, .3),
                0 10px 30px rgba(2, 6, 23, .38);
}

/* Kur menuja e celularit është e hapur, kreu merr sfond edhe në krye të faqes. */
.kreu--i-hapur {
    background-color: rgba(11, 18, 32, .96);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
}

.kreu-brendesia {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--lartesia-kreut);
}

/* ── Identiteti ───────────────────────────────────────────────────────────── */

.kreu-brendi {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: #F8FAFC;
    text-decoration: none;
}

.kreu-shenja {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--titans-zjarr);
    color: var(--nate);
    box-shadow: 0 6px 16px rgba(249, 115, 22, .4);
}

.kreu-shenja svg {
    width: 22px;
    height: 22px;
}

/* `min-width: 0` lejon që emri të shkurtohet në vend që ta shtyjë butonin
   e menusë jashtë ekranit në telefonat e ngushtë. */
.kreu-emri-grup {
    min-width: 0;
}

.kreu-emri {
    display: block;
    font-family: var(--fonti-titujve);
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.kreu-nenemri {
    display: none;                    /* fshihet në celular për të kursyer gjerësi */
    margin-top: .24rem;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--portokalli-i-zbutur);
}

/* ── Çelësi i menusë (vetëm celular) ──────────────────────────────────────── */

.kreu-celes {
    /* `position: relative` e mban etiketën `.vetem-per-lexues` brenda butonit.
       Pa të, ajo pozicionohet ndaj kreut `fixed` dhe rri jashtë kontrollit. */
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, .45);
    border-radius: 10px;
    background: rgba(15, 23, 42, .55);
    color: #F8FAFC;
    cursor: pointer;

    /* Safari në iOS i jep `<button>`-it pamje vendase (gradient i çelët dhe
       qoshe të vetat) që i mbulon tri vijat; `appearance: none` e heq atë.
       `touch-action: manipulation` heq vonesën e dopio-prekjes, që menuja të
       hapet me prekjen e parë. */
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Tri vijat: rreshta 2px me hapësirë 5px mes tyre → kutia del 16px e lartë
   dhe qendra e saj bie mbi qendrën e butonit. */
.kreu-celes-vijat {
    display: grid;
    grid-auto-rows: 2px;
    gap: 5px;
    width: 22px;
}

/* `display: block` dhe `width: 100%` shprehen HAPTAZI. Më parë vijat nuk kishin
   gjerësi fare dhe mbështeteshin vetëm te shtrirja automatike e rrjetës —
   mjaftonte një rivendosje CSS e jashtme (p.sh. ajo e MudBlazor-it, që
   ngarkohet në çdo faqe të site-it) për t'i lënë 0px të gjera, pra të
   padukshme. Tani ato dalin 22px pavarësisht nga rrethi. */
.kreu-celes-vijat span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--normal) var(--lehtesim),
                opacity var(--shpejt) var(--lehtesim);
}

/* Zhvendosja 7px = (2px lartësi + 5px hapësirë): kështu vija e parë dhe e
   tretë bien saktësisht mbi vijën e mesit dhe X-i del i drejtë, jo i shtrembër.
   Nëse ndryshon `gap` ose lartësia e vijës, ndrysho edhe këtë numër. */
.kreu--i-hapur .kreu-celes-vijat span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kreu--i-hapur .kreu-celes-vijat span:nth-child(2) { opacity: 0; }
.kreu--i-hapur .kreu-celes-vijat span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Paneli i lidhjeve ────────────────────────────────────────────────────── */

.kreu-menuja {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1rem clamp(1.15rem, 4vw, 2.5rem) 1.5rem;
    background-color: rgba(11, 18, 32, .97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(249, 115, 22, .3);
    box-shadow: 0 22px 44px rgba(2, 6, 23, .45);

    /* Në telefonat e shkurtër dhe në peizazh lista e lidhjeve del nën skajin e
       ekranit dhe nuk arrihet dot. Këtu ajo rrëshqet brenda vetes, dhe
       `overscroll-behavior` pengon që lëvizja të kalojë te faqja poshtë. */
    max-height: calc(100svh - var(--lartesia-kreut));
    overflow-y: auto;
    overscroll-behavior: contain;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--normal) var(--lehtesim),
                transform var(--normal) var(--lehtesim),
                visibility var(--normal) var(--lehtesim);
}

.kreu--i-hapur .kreu-menuja {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kreu-lidhjet {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kreu-lidhje {
    position: relative;
    display: block;
    padding: .7rem .65rem;
    border-radius: var(--rrezja-vogel);
    color: #CBD5E1;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--shpejt) var(--lehtesim),
                background-color var(--shpejt) var(--lehtesim);
}

.kreu-lidhje:hover,
.kreu-lidhje.eshte-aktive {
    color: var(--portokalli-i-zbutur);
    background-color: rgba(249, 115, 22, .1);
}

.kreu-veprim {
    align-self: flex-start;
}

@media (min-width: 900px) {
    :root {
        --lartesia-kreut: 76px;
    }

    .kreu-nenemri { display: block; }
    .kreu-celes { display: none; }

    /* Paneli kthehet në rresht horizontal — pa sfond, pa hije, gjithmonë i dukshëm. */
    .kreu-menuja {
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
        padding: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 0;
        box-shadow: none;

        /* Kufizimet e celularit hiqen, që rreshti horizontal të mos marrë
           kurrë shirit lëvizjeje. */
        max-height: none;
        overflow-y: visible;
        overscroll-behavior: auto;

        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .kreu-lidhjet {
        flex-direction: row;
        gap: .2rem;
    }

    .kreu-lidhje {
        padding: .5rem .8rem;
        font-size: .93rem;
    }

    .kreu-lidhje:hover,
    .kreu-lidhje.eshte-aktive {
        background-color: transparent;
    }

    .kreu-veprim {
        align-self: auto;
    }

    /* Vijë zjarri që rritet nga e majta — i njëjti detaj si te navigimi i aplikacionit. */
    .kreu-lidhje::after {
        content: "";
        position: absolute;
        left: .8rem;
        right: .8rem;
        bottom: .25rem;
        height: 2px;
        border-radius: 2px;
        background: var(--titans-zjarr);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--normal) var(--lehtesim);
    }

    .kreu-lidhje:hover::after,
    .kreu-lidhje.eshte-aktive::after {
        transform: scaleX(1);
    }
}


/* ═══ 6. HEROI ═════════════════════════════════════════════════════════════ */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--lartesia-kreut) + 2.5rem);
    padding-bottom: 6rem;
    background: linear-gradient(135deg, #0B1220 0%, #0F172A 45%, #1E293B 100%);
    color: #F1F5F9;
}

/* Shtresa e sfondit. Aty ku pronari fut foton reale, mbivendosja e errët
   e mban tekstin të lexueshëm pa e ndryshuar asnjë rregull tjetër. */
.hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--nate-e-thelle);
    background-image:
        radial-gradient(120% 80% at 78% 12%, rgba(249, 115, 22, .20), transparent 62%),
        radial-gradient(90% 70% at 8% 92%, rgba(163, 230, 53, .13), transparent 60%),
        repeating-linear-gradient(115deg, rgba(148, 163, 184, .055) 0 2px, transparent 2px 12px);
    background-size: cover;
    background-position: center;
}

.hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 18, 32, .35) 0%, rgba(11, 18, 32, .74) 100%);
}

/* Dy sfera drite blur — të njëjtat si te ekrani i hyrjes në aplikacion.
   Blur-i zvogëlohet në ekrane të vogla, ku është më i shtrenjtë për t'u vizatuar. */
.hero-sfera {
    position: absolute;
    z-index: -1;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(clamp(48px, 12vw, 92px));
    pointer-events: none;
}

.hero-sfera--zjarr {
    width: min(72vw, 520px);
    top: -16%;
    right: -14%;
    background: rgba(249, 115, 22, .34);
}

.hero-sfera--energji {
    width: min(62vw, 420px);
    bottom: -18%;
    left: -14%;
    background: rgba(163, 230, 53, .18);
}

/* Përmbajtja rri mbi shtresën e sfondit dhe mbi sferat e dritës. */
.hero-permbajtja {
    position: relative;
    z-index: 1;
}

.hero-shenje {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    align-self: flex-start;
    margin: 0 0 1.4rem;
    padding: .45rem .95rem;
    border: 1px solid rgba(163, 230, 53, .32);
    border-radius: 999px;
    background: rgba(163, 230, 53, .1);
    color: var(--lima-e-ndritshme);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.hero-pika {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lima);
    box-shadow: 0 0 0 4px rgba(163, 230, 53, .18);
    animation: titans-puls 2.4s var(--lehtesim) infinite;
}

@keyframes titans-puls {
    0%, 100% { box-shadow: 0 0 0 4px rgba(163, 230, 53, .18); }
    50%      { box-shadow: 0 0 0 8px rgba(163, 230, 53, .05); }
}

.hero-titull {
    max-width: 15ch;
    margin: 0 0 1.15rem;
    font-family: var(--fonti-titujve);
    font-size: clamp(2.6rem, 11vw, 6rem);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.025em;
    text-transform: uppercase;
}

.hero-titull em {
    display: block;
    font-style: normal;
    background: var(--titans-theks);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-nentitull {
    max-width: 52ch;
    margin: 0 0 2.2rem;
    font-size: clamp(1rem, 2.6vw, 1.16rem);
    line-height: 1.65;
    color: var(--teksti-i-zbehte);
}

.hero-butonat {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
}

.hero-fakte {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.7rem;
    margin: 2.6rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .86rem;
    color: #CBD5E1;
}

.hero-fakte li {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.hero-fakte li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--titans-zjarr);
}

.hero-shigjeta {
    position: absolute;
    left: 50%;
    bottom: 1.6rem;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 50%;
    background: rgba(15, 23, 42, .45);
    color: #CBD5E1;
    text-decoration: none;
    transform: translateX(-50%);
    animation: titans-zbrit 2.6s var(--lehtesim) infinite;
}

.hero-shigjeta svg {
    width: 20px;
    height: 20px;
}

@keyframes titans-zbrit {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 6px); }
}

@media (min-width: 900px) {
    .hero-titull { max-width: 14ch; }
    .hero-fakte { gap: .6rem 2.4rem; font-size: .92rem; }
}


/* ═══ 7. SEKSIONET DHE KOKAT E TYRE ════════════════════════════════════════ */

.seksioni {
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
    scroll-margin-top: var(--lartesia-kreut);
    background-color: var(--sfondi-celet);
    color: var(--teksti-kryesor);
}

.seksioni--erret {
    background: var(--titans-nate);
    color: var(--teksti-i-celet);
}

.seksioni-koka {
    max-width: 62ch;
    margin: 0 auto clamp(2.2rem, 5vw, 3.4rem);
    text-align: center;
}

.seksioni-koka--majtas {
    margin-inline: 0;
    text-align: left;
}

.seksioni-mbititull {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .7rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--portokalli-tekst);
}

.seksioni-mbititull::before {
    content: "";
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--titans-zjarr);
}

.seksioni--erret .seksioni-mbititull {
    color: var(--portokalli-i-zbutur);
}

.seksioni-titull {
    margin: 0 0 .9rem;
    font-family: var(--fonti-titujve);
    font-size: clamp(1.95rem, 5.4vw, 3rem);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.seksioni-pershkrimi {
    margin: 0;
    font-size: clamp(.98rem, 2.3vw, 1.06rem);
    line-height: 1.7;
    color: var(--teksti-dytesor);
}

.seksioni--erret .seksioni-pershkrimi {
    color: var(--teksti-i-zbehte);
}


/* ═══ 8. SHËRBIMET ═════════════════════════════════════════════════════════ */

.rrjeta-sherbimeve {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
}

.kartela-sherbimi {
    position: relative;
    overflow: hidden;
    padding: 2rem 1.6rem 1.9rem;
    border: 1px solid var(--kufiri-celet);
    border-radius: var(--rrezja-madhe);
    background: var(--siperfaqja-celet);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: transform var(--normal) var(--lehtesim),
                box-shadow var(--normal) var(--lehtesim),
                border-color var(--normal) var(--lehtesim);
}

/* Brezi i zjarrit sipër — shenja e brand-it në çdo kartelë. */
.kartela-sherbimi::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 4px;
    background: var(--titans-zjarr);
    opacity: .85;
    transition: opacity var(--normal) var(--lehtesim);
}

.kartela-sherbimi:hover {
    transform: translateY(-6px);
    border-color: rgba(249, 115, 22, .35);
    box-shadow: 0 18px 40px rgba(249, 115, 22, .14),
                0 6px 14px rgba(15, 23, 42, .07);
}

.kartela-sherbimi:hover::before {
    opacity: 1;
}

.kartela-ikona {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1.15rem;
    border-radius: var(--rrezja-mesme);
    background: rgba(249, 115, 22, .1);
    color: var(--portokalli-tekst);
    transition: background-color var(--normal) var(--lehtesim),
                color var(--normal) var(--lehtesim),
                transform var(--normal) var(--lehtesim);
}

.kartela-ikona svg {
    width: 28px;
    height: 28px;
}

.kartela-sherbimi:hover .kartela-ikona {
    background: var(--titans-zjarr);
    color: var(--nate);
    transform: rotate(-4deg) scale(1.05);
}

.kartela-titull {
    margin: 0 0 .55rem;
    font-family: var(--fonti-titujve);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.kartela-teksti {
    margin: 0;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--teksti-dytesor);
}

@media (min-width: 640px) {
    .rrjeta-sherbimeve {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

@media (min-width: 1200px) {
    .rrjeta-sherbimeve {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}


/* ═══ 9. PSE TITANS ════════════════════════════════════════════════════════ */

.pse-ne-rrjeta {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}

.pse-ne-teksti {
    min-width: 0;
}

/* Nje kolone si pikenisje, dy vetem kur ka hapesire.
 *
 * Me pare ishte gjithmone `repeat(2, 1fr)`. Problemi: elementet e nje rrjete
 * kane `min-width: auto`, pra kolona NUK ngushtohet dot nen gjeresine e
 * permbajtjes se vet. Ne 360px, dy kolona me padding e gap nuk zinin dot, dhe
 * rrjeta dilte jashte ekranit duke e zgjeruar tere faqen. */
.rrjeta-shifrave {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 2.2rem 0 0;
}

@media (min-width: 420px) {
    .rrjeta-shifrave {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Lejo qe blloku te ngushtohet nen gjeresine e permbajtjes; pa kete,
   `min-width: auto` e mban kolonen te gjere sa fjala me e gjate. */
.rrjeta-shifrave > * {
    min-width: 0;
}

.shifra-blloku {
    display: flex;
    flex-direction: column;
    padding: 1.3rem 1.1rem;
    border: 1px solid var(--kufiri-erret);
    border-radius: var(--rrezja-mesme);
    background: rgba(148, 163, 184, .07);
}

/* `dt` vjen para `dd` në HTML, por shifra duhet të lexohet e para me sy —
   prandaj rendi vizual kthehet me `order`. */
.shifra-vlera {
    order: 1;
    margin: 0;
    font-family: var(--fonti-titujve);
    font-size: clamp(2.2rem, 7vw, 3.1rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    background: var(--titans-theks);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.shifra-vlera span {
    font-size: .6em;
}

.shifra-etiketa {
    order: 2;
    margin: .45rem 0 0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--teksti-i-zbehte);
}

/* Vendi i fotos — kufi me vija të ndërprera që tregon qartë se çfarë mungon. */
.foto-vend {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 2.5rem 1.5rem;
    border: 2px dashed rgba(249, 115, 22, .42);
    border-radius: var(--rrezja-madhe);
    background-color: rgba(15, 23, 42, .35);
    background-image: repeating-linear-gradient(135deg, rgba(148, 163, 184, .05) 0 10px, transparent 10px 20px);
    text-align: center;
}

.foto-vend-ikona {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(249, 115, 22, .14);
    color: var(--portokalli-i-zbutur);
}

.foto-vend-ikona svg {
    width: 26px;
    height: 26px;
}

.foto-vend-titull {
    margin: .4rem 0 0;
    font-family: var(--fonti-titujve);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #CBD5E1;
}

.foto-vend-teksti {
    max-width: 28ch;
    margin: 0;
    font-size: .82rem;
    color: var(--teksti-i-zbehte);
}

.pse-ne-foto {
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
    aspect-ratio: 3 / 4;
}

/* Kur `.foto-vend` zëvendësohet me një `<img class="pse-ne-foto">`. */
img.pse-ne-foto {
    border-radius: var(--rrezja-madhe);
    object-fit: cover;
}

@media (min-width: 900px) {
    .pse-ne-rrjeta {
        grid-template-columns: 1.05fr .95fr;
    }

    .rrjeta-shifrave {
        gap: 1.2rem;
    }
}


/* ═══ 10. ÇMIMET ═══════════════════════════════════════════════════════════ */

.rrjeta-planeve {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;

    /* Etiketa "Më i zgjedhuri" del mbi kornizën e kartelës — kjo hapësirë e mban brenda. */
    padding-top: 1.1rem;
}

.plani {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.6rem;
    border: 1px solid var(--kufiri-celet);
    border-radius: var(--rrezja-madhe);
    background: var(--siperfaqja-celet);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: transform var(--normal) var(--lehtesim),
                box-shadow var(--normal) var(--lehtesim);
}

.plani--i-theksuar {
    border: 2px solid var(--portokalli);
    box-shadow: 0 20px 45px rgba(249, 115, 22, .2);
}

.plani-etiketa {
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0;
    padding: .4rem .95rem;
    border-radius: 999px;
    background: var(--titans-zjarr);
    color: var(--nate);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(249, 115, 22, .35);
    transform: translate(-50%, -50%);
}

.plani-emri {
    margin: .4rem 0 .35rem;
    font-family: var(--fonti-titujve);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.plani-pershkrim {
    margin: 0 0 1.3rem;
    font-size: .9rem;
    color: var(--teksti-dytesor);
}

.plani-cmimi {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0 0 1.4rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.cmimi-shuma {
    font-family: var(--fonti-titujve);
    font-size: 2.9rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--nate);
}

.cmimi-njesi {
    font-size: .85rem;
    font-weight: 600;
    color: var(--teksti-dytesor);
}

.plani-lista {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin: 0 0 1.8rem;
    padding: 0;
    list-style: none;
}

.plani-lista li {
    position: relative;
    padding-left: 1.9rem;
    font-size: .93rem;
    line-height: 1.5;
    color: var(--teksti-dytesor);
}

/* Rrethi i limës + shenja e kontrollit, të vizatuara vetëm me CSS. */
.plani-lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .1rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: rgba(163, 230, 53, .25);
}

.plani-lista li::after {
    content: "";
    position: absolute;
    left: .45rem;
    top: .4rem;
    width: .34rem;
    height: .64rem;
    border: solid var(--lima-tekst);
    border-width: 0 2px 2px 0;
    transform: rotate(42deg);
}

.plani-buton {
    width: 100%;
    margin-top: auto;
}

.cmimet-shenim {
    max-width: 66ch;
    margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
    font-size: .85rem;
    line-height: 1.65;
    text-align: center;
    color: var(--teksti-dytesor);
}

@media (min-width: 900px) {
    .rrjeta-planeve {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        align-items: stretch;
    }

    /* Plani i mesit ngrihet pak mbi të tjerët — theksim pa e rritur tekstin. */
    .plani--i-theksuar {
        transform: translateY(-14px);
    }

    .plani--i-theksuar:hover {
        transform: translateY(-18px);
    }

    .plani:not(.plani--i-theksuar):hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 32px rgba(15, 23, 42, .1);
    }
}


/* ═══ 11. ORARI I KLASAVE ══════════════════════════════════════════════════ */

/* Në celular tabela nuk zvogëlohet — ajo lëviz horizontalisht brenda enës
   së vet. `tabindex` në HTML e bën këtë lëvizje të mundur edhe me tastierë. */
.orari-mbeshtjellesi {
    /* `position: relative` NUK është dekor — pa të faqja del 928px e gjerë në
       një ekran 375px.
       Qelizat e tabelës mbajnë tekst `.vetem-per-lexues` ("Pa klasë",
       "Mbyllur") dhe një `<caption>` të fshehur. Ata janë `position: absolute`
       dhe, pa një prind të pozicionuar, i binden rrënjës së faqes — pra i
       shpëtojnë `overflow-x: auto`-s këtu dhe e zgjerojnë TË GJITHË faqen deri
       te skaji i djathtë i tabelës (~1025px). Në celular kjo e bën faqen të
       lëvizë anash: kreu `fixed` mbetet 375px i gjerë, çelësi i menusë del
       jashtë pamjes dhe të gjitha hapësirat duken të gabuara.
       Me `position: relative` ata pozicionohen ndaj kësaj ene dhe priten
       bashkë me tabelën. */
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--kufiri-celet);
    border-radius: var(--rrezja-madhe);
    background: var(--siperfaqja-celet);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    -webkit-overflow-scrolling: touch;
}

/* `separate` në vend të `collapse`: me `collapse` disa shfletues nuk i
   vizatojnë bordurat e qelizave `sticky` të kolonës së parë. */
.tabela-orarit {
    width: 100%;
    min-width: 54rem;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9rem;
}

.tabela-orarit th,
.tabela-orarit td {
    padding: .85rem 1rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid rgba(15, 23, 42, .07);
}

.tabela-orarit thead th {
    background: #F1F5F9;
    border-bottom: 2px solid rgba(15, 23, 42, .12);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--teksti-dytesor);
}

/* Kolona e orëve mbetet e ngjitur majtas gjatë lëvizjes horizontale. */
.tabela-orarit thead th:first-child,
.tabela-orarit tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
}

.tabela-orarit tbody th {
    background: #FFF7ED;
    font-family: var(--fonti-titujve);
    font-size: 1.02rem;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--nate);
}

.tabela-orarit tbody tr:last-child th,
.tabela-orarit tbody tr:last-child td {
    border-bottom: 0;
}

.tabela-orarit tbody tr:hover td {
    background: rgba(249, 115, 22, .045);
}

.etiketa-klase {
    display: inline-block;
    padding: .35rem .7rem;
    border-radius: var(--rrezja-vogel);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.etiketa-klase--boks     { background: rgba(249, 115, 22, .14); color: #9A3412; }
.etiketa-klase--kickboks { background: rgba(163, 230, 53, .26); color: #3F6212; }
.etiketa-klase--fitnes   { background: rgba(56, 189, 248, .17); color: #075985; }
.etiketa-klase--krosfit  { background: rgba(250, 204, 21, .24); color: #854D0E; }
.etiketa-klase--pt       { background: rgba(34, 197, 94, .16);  color: #166534; }

.qeliza-bosh {
    color: rgba(15, 23, 42, .48);
    font-weight: 600;
}

.orari-legjenda {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.4rem;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .82rem;
    color: var(--teksti-dytesor);
}

.orari-legjenda li {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.legjenda-pika {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.legjenda-pika--boks     { background: var(--portokalli); }
.legjenda-pika--kickboks { background: var(--lima); }
.legjenda-pika--fitnes   { background: var(--info); }
.legjenda-pika--krosfit  { background: var(--paralajmerim); }
.legjenda-pika--pt       { background: var(--sukses); }

.orari-shenim {
    margin: 1rem 0 0;
    font-size: .85rem;
    color: var(--teksti-dytesor);
}

@media (min-width: 900px) {
    .tabela-orarit {
        font-size: .93rem;
    }
}


/* ═══ 12. KONTAKTI DHE HARTA ═══════════════════════════════════════════════ */

.kontakti-rrjeta {
    display: grid;
    gap: clamp(1.8rem, 4vw, 3rem);
}

.kontakti-kolona {
    min-width: 0;
}

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

.kontakti-artikull {
    display: flex;
    gap: .95rem;
    padding: 1.1rem;
    border: 1px solid var(--kufiri-erret);
    border-radius: var(--rrezja-mesme);
    background: rgba(148, 163, 184, .07);
}

.kontakti-ikona {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(249, 115, 22, .14);
    color: var(--portokalli-i-zbutur);
}

.kontakti-ikona svg {
    width: 21px;
    height: 21px;
}

/* Adresat e gjata të emailit nuk duhet ta zgjerojnë kartelën. */
.kontakti-permbajtja {
    min-width: 0;
    overflow-wrap: anywhere;
}

.kontakti-titull {
    margin: 0 0 .3rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--teksti-i-zbehte);
}

.kontakti-vlera {
    margin: 0;
    font-size: .98rem;
    line-height: 1.55;
    color: var(--teksti-i-celet);
}

.kontakti-lidhje {
    color: var(--teksti-i-celet);
    text-decoration: underline;
    text-decoration-color: rgba(251, 146, 60, .55);
    text-underline-offset: 4px;
    transition: color var(--shpejt) var(--lehtesim);
}

.kontakti-lidhje:hover {
    color: var(--portokalli-i-zbutur);
    text-decoration-color: currentColor;
}

.kontakti-shenim {
    margin: .35rem 0 0;
    font-size: .76rem;
    font-style: italic;
    color: var(--teksti-i-zbehte);
}

/* Vlerat që janë ende vend-mbajtëse: nënvizim me vija të ndërprera. */
.vlera-vend {
    text-decoration-style: dashed;
}

.rrjetet-sociale {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.4rem;
}

.rrjeti-lidhje {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem 1rem;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 999px;
    background: rgba(148, 163, 184, .07);
    color: var(--teksti-i-celet);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--shpejt) var(--lehtesim),
                color var(--shpejt) var(--lehtesim),
                border-color var(--shpejt) var(--lehtesim),
                background-color var(--shpejt) var(--lehtesim);
}

.rrjeti-lidhje svg {
    flex: none;
    width: 18px;
    height: 18px;
}

a.rrjeti-lidhje:hover {
    transform: translateY(-2px);
    border-color: var(--portokalli-i-zbutur);
    background: rgba(249, 115, 22, .12);
    color: var(--portokalli-i-zbutur);
}

.rrjeti-lidhje--vend {
    border-style: dashed;
    color: var(--teksti-i-zbehte);
}

/* Vendi i hartës: rrjetë vijash që lexohet menjëherë si hartë e zbrazët. */
.harta-vend {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: clamp(20rem, 38vh, 30rem);
    padding: 2rem 1.5rem;
    border: 2px dashed rgba(249, 115, 22, .4);
    border-radius: var(--rrezja-madhe);
    text-align: center;
    background-color: var(--nate-e-thelle);
    background-image:
        radial-gradient(80% 60% at 50% 40%, rgba(249, 115, 22, .14), transparent 65%),
        repeating-linear-gradient(0deg, rgba(148, 163, 184, .09) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(90deg, rgba(148, 163, 184, .09) 0 1px, transparent 1px 44px);
}

.harta-pin {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--titans-zjarr);
    color: var(--nate);
    box-shadow: 0 10px 26px rgba(249, 115, 22, .45);
}

.harta-pin svg {
    width: 28px;
    height: 28px;
}

.harta-titull {
    margin: .6rem 0 0;
    font-family: var(--fonti-titujve);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #F1F5F9;
}

.harta-teksti {
    margin: 0;
    font-size: .85rem;
    color: var(--teksti-i-zbehte);
}

/* Kur harta zëvendësohet me embed-in real të Google Maps. */
.harta-korniza {
    display: block;
    width: 100%;
    min-height: clamp(20rem, 38vh, 30rem);
    border: 0;
    border-radius: var(--rrezja-madhe);
}

@media (min-width: 640px) {
    .kontakti-lista {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .kontakti-rrjeta {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .kontakti-lista {
        grid-template-columns: 1fr;
    }
}


/* ═══ 13. FUNDFAQJA ════════════════════════════════════════════════════════ */

.fundfaqja {
    padding-top: clamp(2.8rem, 6vw, 4.2rem);
    border-top: 1px solid rgba(249, 115, 22, .25);
    background: var(--nate-e-thelle);
    color: var(--teksti-i-zbehte);
}

.fundfaqja-rrjeta {
    display: grid;
    gap: 2rem;
}

.fundfaqja-kolona {
    min-width: 0;
}

.fundfaqja .kreu-brendi {
    margin-bottom: 1rem;
}

.fundfaqja .kreu-nenemri {
    display: block;
}

.fundfaqja-teksti {
    max-width: 40ch;
    margin: 0;
    font-size: .9rem;
    line-height: 1.7;
}

.fundfaqja-titull {
    margin: 0 0 .9rem;
    font-family: var(--fonti-titujve);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #F1F5F9;
}

.fundfaqja-lista {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .9rem;
}

.fundfaqja-lista a {
    color: var(--teksti-i-zbehte);
    text-decoration: none;
    transition: color var(--shpejt) var(--lehtesim);
}

.fundfaqja-lista a:hover {
    color: var(--portokalli-i-zbutur);
}

.fundfaqja-lista--tekst {
    font-variant-numeric: tabular-nums;
}

.fundfaqja-veprim {
    margin-top: 1.2rem;
}

.fundfaqja-fund {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    margin-top: clamp(2.2rem, 5vw, 3rem);
    padding-block: 1.4rem;
    border-top: 1px solid rgba(148, 163, 184, .16);
    font-size: .8rem;
}

.fundfaqja-fund p {
    margin: 0;
}

.fundfaqja-sistem strong {
    font-weight: 700;
    color: var(--portokalli-i-zbutur);
}

@media (min-width: 640px) {
    .fundfaqja-rrjeta {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Në dy kolona, blloku i identitetit merr rreshtin e vet — teksti i tij
       është më i gjatë se listat dhe do të ngushtohej pa nevojë. */
    .fundfaqja-kolona--brendi {
        grid-column: 1 / -1;
    }
}

@media (min-width: 900px) {
    .fundfaqja-rrjeta {
        grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
        gap: 2.5rem;
    }

    .fundfaqja-kolona--brendi {
        grid-column: auto;
    }
}


/* ═══ 14. LËVIZJA E REDUKTUAR ══════════════════════════════════════════════ */

/* Kush e ka çaktivizuar animacionin në sistem, e merr faqen të qetë:
   pa lëvizje ciklike, pa ngritje kartelash, pa scroll të zbutur. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .hero-pika,
    .hero-shigjeta {
        animation: none;
    }

    .buton:hover,
    .kartela-sherbimi:hover,
    .plani:hover,
    .plani--i-theksuar:hover,
    .plani:not(.plani--i-theksuar):hover,
    a.rrjeti-lidhje:hover {
        transform: none;
    }

    .kartela-sherbimi:hover .kartela-ikona {
        transform: none;
    }

    /* Ngritja e planit të theksuar është informacion, jo dekorim — mbahet. */
    @media (min-width: 900px) {
        .plani--i-theksuar,
        .plani--i-theksuar:hover {
            transform: translateY(-14px);
        }
    }
}


/* ═══ 15. SLOT-ET E FOTOVE REALE ═══════════════════════════════════════════
   Të gjitha pamjet aktuale janë vetëm CSS (gradient + ikona SVG inline) —
   asnjë foto e biznesit nuk është marrë nga Facebook apo Instagram.

   Kur pronari sjell fotot e veta, krijo dosjen `fotot/` pranë kësaj faqeje
   dhe hiq komentet më poshtë.

   ── SLOT #1 — sfondi i heroit (peizazh, min. 1920×1080) ────────────────────

   .hero-media {
       background-image:
           linear-gradient(180deg, rgba(11, 18, 32, .55) 0%, rgba(11, 18, 32, .82) 100%),
           url("fotot/hero-salla.jpg");
       background-size: cover;
       background-position: center;
   }

   ── SLOT #2 — portreti te "Pse Titans" (vertikal 3:4, min. 900×1200) ───────

   Zëvendëso bllokun `<div class="foto-vend pse-ne-foto">…</div>` në HTML me:
   <img class="pse-ne-foto" src="fotot/salla-portret.jpg"
        alt="Trajner duke mbajtur fokusat gjatë një seance boksi në Titans Gym">

   ── SLOT #3 — kartelat e shërbimeve (opsionale, katrore 800×800) ───────────

   .kartela-sherbimi {
       background-size: cover;
       background-position: center;
       color: #F1F5F9;
   }
   .kartela-sherbimi::after {
       content: "";
       position: absolute;
       inset: 0;
       z-index: -1;
       background: linear-gradient(180deg, rgba(11, 18, 32, .68), rgba(11, 18, 32, .92));
   }
   .kartela-sherbimi:nth-child(1) { background-image: url("fotot/boks.jpg"); }
   .kartela-sherbimi:nth-child(2) { background-image: url("fotot/kickboks.jpg"); }
   .kartela-sherbimi:nth-child(3) { background-image: url("fotot/personal-training.jpg"); }
   .kartela-sherbimi:nth-child(4) { background-image: url("fotot/fitness.jpg"); }
   .kartela-sherbimi:nth-child(5) { background-image: url("fotot/crossfit.jpg"); }
   .kartela-sherbimi:nth-child(6) { background-image: url("fotot/kafeteri.jpg"); }

   ── SLOT #4 — harta ───────────────────────────────────────────────────────

   Zëvendëso bllokun `<div class="harta-vend">…</div>` në HTML me një
   `<iframe class="harta-korniza" …>` të Google Maps.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════ NJOFTIMI I PUNIMEVE — START (hiqe bashke me bllokun ne body) ═══════════ */

.njoftim-mbulese {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(11, 18, 32, .82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: njoftim-shfaqu .25s ease-out;
}

/* `hidden` duhet te fitoje ndaj `display:grid`, perndryshe mbulesa mbetet
   e dukshme edhe pasi te jete mbyllur. */
.njoftim-mbulese[hidden] { display: none; }

.njoftim-kuti {
    max-width: 27rem;
    width: 100%;
    padding: 2.25rem 1.75rem 1.75rem;
    text-align: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    border: 1px solid rgba(249, 115, 22, .35);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    color: #F1F5F9;
    animation: njoftim-ngjitu .3s cubic-bezier(.4, 0, .2, 1);
}

.njoftim-shenje { font-size: 2.75rem; line-height: 1; margin-bottom: .85rem; }

.njoftim-kuti h2 {
    font-family: "Barlow Condensed", "Barlow", "Segoe UI", sans-serif;
    font-size: 1.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.01em;
    margin: 0 0 .6rem;
    color: #FB923C;
}

.njoftim-kuti p {
    font-size: .95rem;
    line-height: 1.6;
    color: #CBD5E1;
    margin: 0 0 1.6rem;
}

.njoftim-kuti strong { color: #A3E635; font-weight: 700; }

.njoftim-buton {
    width: 100%;
    padding: .8rem 1.5rem;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
    border: none;
    border-radius: 9px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.njoftim-buton:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 8px 20px rgba(249, 115, 22, .4); }
.njoftim-buton:active { transform: translateY(0); }

/* Unaze fokusi e dukshme: butoni merr fokusin automatikisht dhe duhet te
   duket edhe per ata qe navigojne me tastiere. */
.njoftim-buton:focus-visible { outline: 3px solid #A3E635; outline-offset: 3px; }

@keyframes njoftim-shfaqu { from { opacity: 0; } to { opacity: 1; } }
@keyframes njoftim-ngjitu { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .njoftim-mbulese, .njoftim-kuti { animation: none; }
    .njoftim-buton { transition: none; }
}

/* Kur njoftimi eshte i hapur, faqja poshte tij nuk duhet te rreshqase. */
body.njoftim-hapur { overflow: hidden; }

/* ═══════════ NJOFTIMI I PUNIMEVE — FUND ═══════════ */

/* ═══════════ PLANET BOSH ═══════════
   Kur baza nuk kthen asnje oferte publike, ne vend te kartelave shfaqet nje
   mesazh i vetem. Duhet te zere tere gjeresine e rrjetes, jo vetem nje kolone. */

.planet-bosh {
    grid-column: 1 / -1;
    margin: 0;
    padding: 2.4rem 1.25rem;
    text-align: center;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--teksti-dytesor);
}