/* Pro-Data — faqja publike. Një skedar, pa framework. Ngjyrat nga logoja. */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --gj: #447b6d;          /* gjelbra e logos */
  --gj-err: #2c5a4f;
  --gj-zi: #10261f;
  --gj-zbehte: #e8f1ee;
  --po: #f6a729;          /* portokallia e logos */
  --po-err: #c97f0b;
  --bg: #ffffff;
  --bg-2: #f4f7f5;
  --tx: #15201c;
  --tx-2: #4b5a54;
  --tx-3: #6f7e78;
  --vija: #e1e8e5;
  --hije: 0 1px 2px rgb(16 38 31 / .06), 0 8px 24px rgb(16 38 31 / .06);
  --r: 14px;
  --gjeresia: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tx);
  background: var(--bg);
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gj-err); text-underline-offset: 3px; }
a:hover { color: var(--gj); }
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 750; }
h3 { font-size: 1.15rem; font-weight: 650; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--po); outline-offset: 2px; border-radius: 4px; }

.kont { width: 100%; max-width: var(--gjeresia); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .kont { padding: 0 28px; } }

.kalo { position: absolute; left: -9999px; top: 8px; background: var(--po); color: #000; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.kalo:focus { left: 8px; }

/* ---------- butonat ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 46px; padding: 0 22px; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: .97rem; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn-po { background: var(--po); color: #1b1203; }
.btn-po:hover { background: #ffb53c; color: #1b1203; }
.btn-gj { background: var(--gj); color: #fff; }
.btn-gj:hover { background: var(--gj-err); color: #fff; }
.btn-vija { border-color: currentColor; color: var(--gj-err); background: transparent; }
.btn-vija:hover { background: var(--gj-zbehte); color: var(--gj-err); }
.btn-bardhe { border-color: rgb(255 255 255 / .45); color: #fff; background: transparent; }
.btn-bardhe:hover { background: rgb(255 255 255 / .1); color: #fff; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- koka ---------- */
.koka {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--vija);
}
/* Mjegulla rri te ::before: backdrop-filter mbi vetë kokën do ta bënte atë bazë
   për `position: fixed` dhe menyja e celularit do të prehej brenda 60 px. */
.koka::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(255 255 255 / .92);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
}
.koka .kont { display: flex; align-items: center; gap: 20px; height: 68px; }
.logoja img { height: 40px; width: auto; }
.nav { margin-left: auto; }
.nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.nav a, .nav .nen-titull {
  display: block; padding: 8px 12px; border-radius: 8px;
  color: var(--tx); text-decoration: none; font-weight: 550; font-size: .95rem;
}
.nav a:hover { background: var(--bg-2); color: var(--tx); }
.nav a[aria-current="page"] { color: var(--gj-err); background: var(--gj-zbehte); }
.nav .me-nen { position: relative; }
.nav .nen {
  position: absolute; top: calc(100% + 6px); left: -12px;
  min-width: 520px; padding: 10px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  list-style: none; margin: 0;
  background: #fff; border: 1px solid var(--vija); border-radius: var(--r); box-shadow: var(--hije);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s;
}
.nav .me-nen:hover .nen, .nav .me-nen:focus-within .nen { opacity: 1; visibility: visible; transform: none; }
.nav .nen a { padding: 9px 12px; }
.nav .nen small { display: block; color: var(--tx-3); font-weight: 450; font-size: .8rem; line-height: 1.35; }
.koka .btn { min-height: 40px; padding: 0 18px; }
.menu-btn { display: none; }

@media (max-width: 1199px) {
  .koka .kont { height: 60px; }
  .logoja img { height: 34px; }
  .menu-btn {
    display: inline-flex; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center;
    border: 1px solid var(--vija); border-radius: 10px; background: #fff; color: var(--tx); cursor: pointer;
  }
  .menu-btn svg { width: 22px; height: 22px; }
  .koka .btn-koka { display: none; }
  .nav {
    position: fixed; inset: 60px 0 0 0; margin: 0; padding: 12px 16px 32px;
    background: #fff; overflow-y: auto; display: none;
  }
  .nav.hapur { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li { border-bottom: 1px solid var(--vija); }
  .nav a, .nav .nen-titull { padding: 14px 6px; font-size: 1.05rem; }
  .nav .nen { position: static; min-width: 0; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 10px 10px; grid-template-columns: 1fr; }
  .nav .nen a { padding: 9px 6px; font-size: .97rem; }
  .nav .nen small { display: none; }
  .nav .nav-cta { border: 0; padding-top: 18px; }
  .nav .nav-cta a { display: flex; color: #1b1203; padding: 0 22px; }
  body.menu-hapur { overflow: hidden; }
}
@media (min-width: 1200px) { .nav .nav-cta { display: none; } }

/* ---------- seksionet ---------- */
.seks { padding: 72px 0; }
.seks-bg { background: var(--bg-2); }
@media (max-width: 719px) { .seks { padding: 52px 0; } }
.etiketa {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gj);
}
.etiketa::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--po); }
.koka-seks { max-width: 720px; margin-bottom: 36px; }
.koka-seks p { color: var(--tx-2); font-size: 1.07rem; }
.koka-seks.qender { margin-left: auto; margin-right: auto; text-align: center; }
.koka-seks.qender .etiketa { justify-content: center; }

/* ---------- heroi ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 500px at 85% -10%, rgb(246 167 41 / .22), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgb(68 123 109 / .55), transparent 60%),
    var(--gj-zi);
}
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image: linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
.hero .kont { position: relative; display: grid; gap: 40px; padding-top: 72px; padding-bottom: 72px; align-items: center; }
@media (min-width: 960px) { .hero .kont { grid-template-columns: 1.1fr .9fr; padding-top: 96px; padding-bottom: 96px; } }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--po); }
.hero .lead { font-size: 1.15rem; color: rgb(255 255 255 / .82); max-width: 560px; }
.hero .veprimet { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.shifrat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 44px; background: rgb(255 255 255 / .12); border-radius: var(--r); overflow: hidden; max-width: 560px; }
@media (min-width: 560px) { .shifrat { grid-template-columns: repeat(4, 1fr); } }
.shifrat div { background: rgb(16 38 31 / .7); padding: 14px 16px; }
.shifrat b { display: block; font-size: 1.45rem; font-weight: 750; color: #fff; letter-spacing: -.02em; }
.shifrat span { font-size: .8rem; color: rgb(255 255 255 / .7); line-height: 1.3; display: block; }
.shifrat em { font-style: normal; font-variant-numeric: tabular-nums; }

/* ---------- skena e heroit: bërthama e ERP-së, modulet kryesore dhe shtesat ----------
   8 module × 1.5 s = cikël 12 s; secili modul, vija, mesazhi dhe shtesat e tij ndizen me vonesën --i × 1.5 s.
   Paketa e rrjedhës bën xhiron e moduleve në të njëjtat 12 s, që të jetë gjithmonë te moduli i ndezur. */
.skena { position: relative; max-width: 540px; width: 100%; justify-self: center; --cikli: 12s; --hapi: 1.5s; }
.harta-erp { position: relative; aspect-ratio: 1; }
.lidhjet { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lidhjet path { fill: none; stroke: rgb(255 255 255 / .16); stroke-width: 1.5; stroke-dasharray: 3 5; }
.lidhjet .v-shtese { stroke: rgb(246 167 41 / .28); stroke-dasharray: 2 6; }
.lidhjet .v-cikli { stroke: rgb(110 231 168 / .45); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 11; animation: rrjedh-cikli 1.4s linear infinite; }
@keyframes rrjedh-cikli { to { stroke-dashoffset: -12; } }
.lidhjet .puls {
  stroke: var(--po); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 14 100; stroke-dashoffset: 14;
  opacity: 0; animation: puls var(--cikli) linear infinite; animation-delay: calc(var(--i) * var(--hapi));
}
.lidhjet .puls-j { stroke-width: 2.2; animation-delay: calc(var(--i) * var(--hapi) + .45s); }
@keyframes puls { 0% { opacity: 1; stroke-dashoffset: 14; } 10% { opacity: 1; stroke-dashoffset: -86; } 12%, 100% { opacity: 0; stroke-dashoffset: -86; } }

.berthama {
  position: absolute; left: 50%; top: 50%; width: 31.5%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff;
  background: radial-gradient(circle at 30% 25%, #5f9e8d, var(--gj) 45%, var(--gj-err));
  box-shadow: 0 0 0 10px rgb(68 123 109 / .2), 0 0 0 22px rgb(68 123 109 / .08), 0 30px 60px rgb(0 0 0 / .4);
}
.berthama::before, .berthama::after {   /* dy unaza që rrotullohen në drejtime të kundërta */
  content: ""; position: absolute; inset: -32px; border-radius: 50%;
  border: 1.5px dashed rgb(246 167 41 / .45); animation: rrotullo 40s linear infinite;
}
.berthama::after { inset: -46px; border: 1px dotted rgb(255 255 255 / .22); animation-duration: 60s; animation-direction: reverse; }
@keyframes rrotullo { to { transform: rotate(1turn); } }
.berthama small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.berthama b { font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.berthama em { font-style: normal; font-size: 10.5px; opacity: .85; margin-top: 3px; }
.mesazhet { position: relative; width: 86%; height: 32px; margin-top: 7px; }
.mesazhet span {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; font-weight: 650; line-height: 1.3; color: #ffe2ad;
  opacity: 0; animation: mesazh var(--cikli) infinite; animation-delay: calc(var(--i) * var(--hapi));
}
@keyframes mesazh { 0% { opacity: 0; transform: translateY(6px); } 2%, 11% { opacity: 1; transform: none; } 13%, 100% { opacity: 0; transform: translateY(-4px); } }

.modul {
  position: absolute; width: 28%; transform: translate(-50%, -50%);
  display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center;
  padding: 9px 10px; border-radius: 14px; color: #fff; line-height: 1.25;
  background: rgb(23 46 39 / .94); border: 1px solid rgb(255 255 255 / .13);
  animation: modul var(--cikli) infinite; animation-delay: calc(var(--i) * var(--hapi));
}
.modul .m-ik {
  grid-row: span 2; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: rgb(255 255 255 / .1); color: #cfe3dc; animation: modul-ik var(--cikli) infinite; animation-delay: calc(var(--i) * var(--hapi));
}
.modul .m-ik svg { width: 18px; height: 18px; }
.modul b { font-size: 13px; font-weight: 700; }
.modul small { font-size: 10.5px; opacity: .7; }
@keyframes modul {
  0%, 14%, 100% { transform: translate(-50%, -50%); background: rgb(23 46 39 / .94); color: #fff; border-color: rgb(255 255 255 / .13); box-shadow: none; }
  2%, 11% { transform: translate(-50%, -50%) scale(1.07); background: #fff; color: var(--tx); border-color: #fff; box-shadow: 0 16px 40px rgb(0 0 0 / .35), 0 0 0 4px rgb(246 167 41 / .4); }
}
@keyframes modul-ik { 0%, 14%, 100% { background: rgb(255 255 255 / .1); color: #cfe3dc; } 2%, 11% { background: var(--po); color: #1b1203; } }

/* shtesat dhe veçoritë: kapsula në skaje, të lidhura me modulin e tyre */
.satelit {
  position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 650; color: #f3e3c3;
  background: rgb(23 46 39 / .94); border: 1px dashed rgb(246 167 41 / .5);
  animation: satelit var(--cikli) infinite; animation-delay: calc(var(--i) * var(--hapi) + .45s);
}
.satelit svg { width: 14px; height: 14px; flex: none; }
@keyframes satelit {
  0%, 13%, 100% { transform: translate(-50%, -50%); background: rgb(23 46 39 / .94); color: #f3e3c3; border-color: rgb(246 167 41 / .5); box-shadow: none; }
  2%, 10% { transform: translate(-50%, -50%) scale(1.08); background: var(--po); color: #1b1203; border-color: var(--po); box-shadow: 0 10px 26px rgb(0 0 0 / .35); }
}

.legjenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 10px; font-size: 11.5px; color: rgb(255 255 255 / .6); }
.legjenda span { display: inline-flex; align-items: center; gap: 7px; }
.legjenda i { width: 14px; height: 10px; border-radius: 4px; }
.legjenda .l-k { background: rgb(23 46 39); border: 1px solid rgb(255 255 255 / .35); }
.legjenda .l-s { border-radius: 99px; border: 1px dashed var(--po); }
.legjenda .l-r { height: 0; border-top: 2px dotted #6ee7a8; border-radius: 0; }

@media (max-width: 959px) { .skena { margin-top: 28px; } }
/* në celular skena vizatohet në 540 px dhe zvogëlohet sa gjerësia e faqes (--shk nga faqja.js) */
@media (max-width: 580px) { .skena { width: 540px; max-width: none; justify-self: start; zoom: var(--shk, .62); } .legjenda { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .modul, .modul .m-ik, .satelit, .berthama::before, .berthama::after, .lidhjet .v-cikli { animation: none; }
  .lidhjet .puls { animation: none; opacity: 0; }
  .mesazhet { display: none; }
}

/* ---------- zgjedhësi «Çfarë biznesi keni?» ---------- */
.zgjedhesi { display: grid; gap: 20px; }
@media (min-width: 900px) { .zgjedhesi { grid-template-columns: 300px 1fr; gap: 28px; align-items: start; } }
.skedat { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.skedat::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .skedat { flex-direction: column; overflow: visible; } }
.skedat button {
  display: flex; align-items: center; gap: 10px; flex: none;
  font: inherit; font-weight: 600; font-size: .95rem; text-align: left; color: var(--tx-2);
  padding: 12px 16px; border-radius: 12px; border: 1.5px solid transparent; background: #fff; cursor: pointer;
  box-shadow: var(--hije); transition: background .15s, color .15s, border-color .15s;
}
.skedat button svg { width: 20px; height: 20px; flex: none; color: var(--gj); }
.skedat button:hover { color: var(--tx); border-color: var(--vija); }
.skedat button[aria-selected="true"] { background: var(--gj); color: #fff; }
.skedat button[aria-selected="true"] svg { color: var(--po); }
.paneli {
  position: relative; overflow: hidden; background: #fff; border-radius: 20px; padding: 32px; box-shadow: var(--hije);
  animation: paneli .35s ease;
}
@keyframes paneli { from { opacity: 0; transform: translateY(8px); } }
.paneli-ikona { position: absolute; right: -24px; top: -24px; width: 170px; height: 170px; color: var(--gj-zbehte); }
.paneli-ikona svg { width: 100%; height: 100%; stroke-width: 1.2; }
.paneli h3 { position: relative; font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); max-width: 30ch; margin-bottom: 18px; }
.paneli .lista-shenje { position: relative; }
.kombinimi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--vija); }
.kombinimi span { font-size: .85rem; color: var(--tx-3); font-weight: 600; margin-right: 4px; }
.kombinimi a { padding: 7px 14px; border-radius: 999px; background: var(--gj-zbehte); color: var(--gj-err); font-weight: 650; font-size: .9rem; text-decoration: none; }
.kombinimi a:hover { background: var(--gj); color: #fff; }
@media (max-width: 559px) { .paneli { padding: 24px 20px; } }
/* paneli: pikat majtas, «Një ditë pune» djathtas; 4 hapa × 1.6 s = cikël 6.4 s */
.paneli-rrjeta { position: relative; display: grid; gap: 24px; }
@media (min-width: 1100px) { .paneli-rrjeta { grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: start; } }
.dita { background: var(--bg-2); border-radius: 16px; padding: 16px 18px 12px; border: 1px solid var(--vija); }
.dita-koka { font-size: .74rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 8px; }
.dita ol { list-style: none; margin: 0; padding: 0; display: grid; position: relative; }
.dita ol::before, .dita ol::after { content: ""; position: absolute; left: 17px; top: 26px; bottom: 26px; width: 2px; border-radius: 2px; background: var(--vija); }
.dita ol::after { background: var(--po); transform-origin: top; animation: dita-mbush 6.4s linear infinite; }
@keyframes dita-mbush { 0% { transform: scaleY(0); } 75%, 96% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.dita li { position: relative; z-index: 1; display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: center; padding: 7px 0; }
.dita .d-ik {
  grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--vija); color: var(--gj);
  animation: dita-hap 6.4s infinite; animation-delay: calc(var(--i) * 1.6s);
}
.dita .d-ik svg { width: 17px; height: 17px; }
.dita li b { font-size: .95rem; line-height: 1.25; }
.dita li small { font-size: .84rem; color: var(--tx-3); line-height: 1.3; }
@keyframes dita-hap {
  0%, 1%, 27%, 100% { background: #fff; border-color: var(--vija); color: var(--gj); transform: none; }
  4%, 24% { background: var(--po); border-color: var(--po); color: #1b1203; transform: scale(1.12); }
}
.modulet-biz { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.modulet-biz .etiketa-e { font-size: .85rem; color: var(--tx-3); font-weight: 600; margin-right: 4px; }
.modulet-biz span:not(.etiketa-e) {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 10px;
  border: 1px solid var(--vija); background: #fff; font-size: .85rem; font-weight: 600; color: var(--tx-2);
}
.modulet-biz svg { width: 15px; height: 15px; color: var(--gj); }
@media (prefers-reduced-motion: reduce) { .dita ol::after { animation: none; transform: none; } .dita .d-ik { animation: none; } }

/* ---------- «Shitja nuk ndalet kur bie interneti» ---------- */
.seks-erret { background: var(--gj-zi); color: #fff; position: relative; overflow: hidden; }
.seks-erret::before { content: ""; position: absolute; left: -200px; bottom: -260px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(closest-side, rgb(68 123 109 / .5), transparent); }
.pa-internet { position: relative; display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .pa-internet { grid-template-columns: 1fr 1fr; } }
.pa-internet h2 { color: #fff; }
.pi-teksti > p { color: rgb(255 255 255 / .78); }
.ndrysho { display: inline-flex; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .12); margin: 8px 0 14px; }
.ndrysho button { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 650; font-size: .92rem; color: rgb(255 255 255 / .7); background: transparent; border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.ndrysho button[aria-pressed="true"] { background: #fff; color: var(--tx); }
.ndrysho .pk { width: 9px; height: 9px; border-radius: 50%; }
.ndrysho .pk.gj { background: #3fbf7f; }
.ndrysho .pk.po { background: var(--po); }
.pi-gjendja { min-height: 3em; color: #fff !important; font-weight: 550; }
.pa-internet[data-gjendja="lidhur"] [data-per="ra"], .pa-internet[data-gjendja="ra"] [data-per="lidhur"] { display: none; }
.pi-shenim { font-size: .85rem; color: rgb(255 255 255 / .5) !important; }

.pi-skema { position: relative; aspect-ratio: 4 / 3; width: 100%; max-width: 520px; justify-self: center; }
.vijat { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vijat path { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; transition: stroke .4s, opacity .4s; }
.v-reja { stroke: #6ee7a8; stroke-dasharray: 6 8; animation: rrjedh 1.2s linear infinite; }
.v-box { stroke: var(--po); stroke-dasharray: 6 8; opacity: 0; animation: rrjedh 1.2s linear infinite; }
.v-sinkron { stroke: rgb(255 255 255 / .25); stroke-dasharray: 2 6; }
@keyframes rrjedh { to { stroke-dashoffset: -28; } }
.pa-internet[data-gjendja="ra"] .v-reja { stroke: rgb(255 255 255 / .12); animation: none; }
.pa-internet[data-gjendja="ra"] .v-box { opacity: 1; }
.nyje {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 12px 14px; min-width: 96px; border-radius: 16px;
  background: #1a3129; border: 1px solid rgb(255 255 255 / .14);
  font-size: .85rem; transition: background .4s, border-color .4s, opacity .4s, box-shadow .4s;
}
.nyje svg { width: 24px; height: 24px; color: #6ee7a8; transition: color .4s; }
.nyje small { color: rgb(255 255 255 / .55); font-size: .72rem; }
.nyje.reja { left: 50%; top: 13.3%; }
.nyje.box { left: 25%; top: 46.7%; }
.nyje.tel { left: 15%; top: 83.3%; }
.nyje.kuz { left: 50%; top: 83.3%; }
.nyje.arka { left: 85%; top: 83.3%; }
.nyje.box svg { color: var(--po); }
.pa-internet[data-gjendja="lidhur"] .nyje.box { opacity: .45; }
.pa-internet[data-gjendja="ra"] .nyje.reja { opacity: .35; }
.pa-internet[data-gjendja="ra"] .nyje.reja svg { color: rgb(255 255 255 / .5); }
.pa-internet[data-gjendja="ra"] .nyje.box { background: #3a3317; border-color: var(--po); box-shadow: 0 0 0 6px rgb(246 167 41 / .12); }
.pa-internet[data-gjendja="ra"] .nyje.tel svg, .pa-internet[data-gjendja="ra"] .nyje.kuz svg { color: var(--po); }
.shenja-arka {
  position: absolute; left: 85%; top: 100%; transform: translate(-50%, 4px);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: .75rem; font-weight: 650; color: #1b1203; background: var(--po); padding: 3px 10px; border-radius: 999px;
}
.shenja-arka svg { width: 14px; height: 14px; }
@media (max-width: 559px) { .nyje { min-width: 0; padding: 9px 8px; font-size: .74rem; } .nyje small { display: none; } .shenja-arka { left: 78%; } }
@media (prefers-reduced-motion: reduce) { .v-reja, .v-box { animation: none; } }

/* ---------- shiriti lëvizës me emrat e klientëve ---------- */
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee { display: grid; gap: 12px; padding: 6px 0; }
.marquee-rruga { display: flex; width: max-content; animation: marquee 120s linear infinite; }
.marquee-rruga.mbrapsht { animation-direction: reverse; animation-duration: 140s; }
.marquee:hover .marquee-rruga { animation-play-state: paused; }
.marquee .grupi { display: flex; gap: 12px; padding: 0 12px 0 0; margin: 0; list-style: none; }
.marquee .grupi li {
  flex: none; white-space: nowrap; padding: 12px 22px; border-radius: 999px;
  background: #fff; border: 1px solid var(--vija); color: var(--gj-zi); font-weight: 650; font-size: 1.02rem;
}
.marquee .grupi li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--po); margin-right: 10px; vertical-align: .15em; }
.marquee-rruga.mbrapsht li::before { background: var(--gj); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 559px) { .marquee .grupi li { padding: 9px 16px; font-size: .92rem; } }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee-rruga { animation: none; }
  .marquee .grupi[aria-hidden] { display: none; }
}

/* ---------- regjistri i klientëve sipas shkronjës ---------- */
.regjistri { columns: 4 220px; column-gap: 28px; }
.regjistri .shkronja { break-inside: avoid; display: grid; grid-template-columns: 40px 1fr; gap: 0 10px; padding: 14px 0 16px; border-top: 1px solid var(--vija); }
.regjistri .shkronja > b { font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: var(--po); }
.regjistri ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.regjistri li { font-weight: 600; color: var(--gj-zi); line-height: 1.35; }
@media (max-width: 559px) { .regjistri { columns: 2 140px; column-gap: 18px; } .regjistri .shkronja { grid-template-columns: 30px 1fr; } .regjistri .shkronja > b { font-size: 1.3rem; } }

/* ---------- shfaqja gjatë rrëshqitjes ---------- */
.shfaq.gati { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--vonesa, 0s); }
.shfaq.gati.duk { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .shfaq.gati { opacity: 1; transform: none; transition: none; } }

/* faqet e brendshme */
.hero-vogel { background: var(--gj-zi); color: #fff; position: relative; overflow: hidden; }
.hero-vogel::after { content: ""; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgb(246 167 41 / .25), transparent); }
.hero-vogel .kont { position: relative; z-index: 1; padding-top: 56px; padding-bottom: 56px; }
.hero-vogel h1 { color: #fff; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
.hero-vogel p { color: rgb(255 255 255 / .8); font-size: 1.1rem; max-width: 680px; margin: 0; }
.shtegu { font-size: .85rem; margin-bottom: 14px; color: rgb(255 255 255 / .6); }
.shtegu a { color: rgb(255 255 255 / .8); text-decoration: none; }
.shtegu a:hover { color: #fff; text-decoration: underline; }

/* ---------- kartat ---------- */
.rrjeta { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rrjeta-3 { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .rrjeta-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rrjeta-3 { grid-template-columns: repeat(3, 1fr); } }
.rrjeta-2 { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 20px; }
@media (min-width: 480px) { .rrjeta-2 { grid-template-columns: 1fr 1fr; } }
.karta {
  background: #fff; border: 1px solid var(--vija); border-radius: var(--r);
  padding: 24px; transition: box-shadow .2s, transform .2s, border-color .2s;
}
.seks-bg .karta { border-color: transparent; box-shadow: var(--hije); }
.karta p { color: var(--tx-2); margin: 0; font-size: .97rem; }
.karta-produkt { padding: 0; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.karta-produkt:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgb(16 38 31 / .12); color: inherit; }
.karta-produkt .trupi { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.karta-produkt h3 { margin-bottom: 6px; }
.karta-produkt .me-shume { margin-top: auto; padding-top: 14px; font-weight: 600; color: var(--gj-err); font-size: .93rem; }
.karta-produkt .me-shume::after { content: " →"; }
@media (max-width: 559px) {
  .rrjeta { gap: 12px; }
  .karta-produkt { flex-direction: row; align-items: stretch; }
  .karta-produkt .kp-vizual { width: 92px; flex: none; aspect-ratio: auto; padding: 0; justify-content: center; align-items: center; }
  .karta-produkt .kp-emri, .karta-produkt .kp-etiketat { display: none; }
  .karta-produkt .trupi { padding: 14px 16px; }
  .karta-produkt h3 { font-size: 1.05rem; margin-bottom: 2px; }
  .karta-produkt p { font-size: .9rem; line-height: 1.45; }
  .karta-produkt .me-shume { padding-top: 8px; font-size: .88rem; }
}
.etiketa-e-re { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--po); color: #1b1203; font-size: .7rem; font-weight: 700; letter-spacing: .04em; vertical-align: middle; }

.ikona {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px;
  background: var(--gj-zbehte); color: var(--gj-err);
}
.ikona svg { width: 24px; height: 24px; }
.ikona.po { background: #fdf0d9; color: var(--po-err); }
.shenjat { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding: 0; list-style: none; }
.shenjat li { font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--bg-2); color: var(--tx-2); }
.seks-bg .shenjat li { background: var(--gj-zbehte); }

/* platformat e reja — shirit i errët */
.platformat { display: grid; gap: 20px; }
@media (min-width: 880px) { .platformat { grid-template-columns: 1fr 1fr; } }
.platforma {
  border-radius: 20px; padding: 32px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--gj-err), var(--gj-zi));
  display: flex; flex-direction: column;
}
.platforma.po { background: linear-gradient(140deg, #3a2a0c, #1d1406); }
.platforma h3 { font-size: 1.5rem; color: #fff; }
.platforma p { color: rgb(255 255 255 / .8); }
.platforma ul { margin: 6px 0 24px; padding: 0; list-style: none; display: grid; gap: 8px; }
.platforma li { display: flex; gap: 10px; color: rgb(255 255 255 / .88); font-size: .96rem; }
.platforma li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--po) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1203' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.platforma .veprimet { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.platforma .mbititull { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--po); margin-bottom: 8px; }

/* cikli */
.cikli { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); counter-reset: c; }
.cikli li { list-style: none; background: #fff; border-radius: 12px; padding: 18px 18px 18px 58px; position: relative; box-shadow: var(--hije); }
.cikli li::before { counter-increment: c; content: counter(c, decimal-leading-zero); position: absolute; left: 18px; top: 18px; font-weight: 800; color: var(--po-err); font-size: .9rem; }
.cikli b { display: block; font-weight: 650; }
.cikli span { color: var(--tx-2); font-size: .92rem; }
.cikli { padding: 0; margin: 0; }

.lista-shenje { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-shenje li { position: relative; padding-left: 30px; }
.lista-shenje li::before { content: ""; position: absolute; left: 0; top: 4px; width: 19px; height: 19px; border-radius: 50%; background: var(--gj-zbehte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c5a4f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.lista-shenje.dy { grid-template-columns: 1fr; }
@media (min-width: 720px) { .lista-shenje.dy { grid-template-columns: 1fr 1fr; column-gap: 28px; } }

/* ndarje me figurë */
.ndarje { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .ndarje { grid-template-columns: 1fr 1fr; gap: 56px; } .ndarje.mbrapsht > :first-child { order: 2; } }
.ndarje img { border-radius: 18px; box-shadow: var(--hije); width: 100%; }

/* produkti */
.produkt-hero .kont { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .produkt-hero .kont { grid-template-columns: 1.15fr .85fr; } }
.produkt-hero .veprimet { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 899px) { .produkt-hero .kp-madh { max-width: 100%; aspect-ratio: auto; justify-self: stretch; } }
.pikat { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pikat .karta h3 { font-size: 1.02rem; margin-bottom: 4px; }
.dedikuar { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.dedikuar li { padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--vija); font-weight: 550; font-size: .93rem; }
.hapat { counter-reset: h; list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
@media (min-width: 800px) { .hapat { grid-template-columns: repeat(3, 1fr); } }
.hapat li { background: #fff; border-radius: var(--r); padding: 22px; box-shadow: var(--hije); }
.hapat li::before { counter-increment: h; content: counter(h); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--po); color: #1b1203; font-weight: 800; margin-bottom: 12px; }
.hapat p { color: var(--tx-2); margin: 0; }

/* thirrja në fund */
.thirrja { background: var(--gj); color: #fff; border-radius: 22px; padding: 40px 28px; display: grid; gap: 20px; align-items: center; position: relative; overflow: hidden; }
.thirrja::after { content: ""; position: absolute; right: -60px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, rgb(246 167 41 / .4), transparent); }
@media (min-width: 860px) { .thirrja { grid-template-columns: 1fr auto; padding: 48px 52px; } }
.thirrja h2 { color: #fff; margin-bottom: 6px; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.thirrja p { color: rgb(255 255 255 / .85); margin: 0; }
.thirrja .veprimet { display: flex; flex-wrap: wrap; gap: 10px; position: relative; z-index: 1; }

/* kontakti */
.kontakti { display: grid; gap: 28px; }
@media (min-width: 960px) { .kontakti { grid-template-columns: .9fr 1.1fr; } }
.info-kontakti { display: grid; gap: 14px; }
.info-rresht { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: var(--r); padding: 18px; box-shadow: var(--hije); }
.info-rresht .ikona { margin: 0; flex: none; }
.info-rresht h3 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 4px; }
.info-rresht p { margin: 0; }
.info-rresht a { font-weight: 600; text-decoration: none; }
.info-rresht a:hover { text-decoration: underline; }
.telefonat { display: grid; gap: 2px; }
.telefonat span { color: var(--tx-3); font-size: .9rem; }
.formulari { background: #fff; border-radius: 18px; padding: 28px; box-shadow: var(--hije); }
.formulari .rresht { display: grid; gap: 16px; }
@media (min-width: 640px) { .formulari .rresht.dy { grid-template-columns: 1fr 1fr; } }
.fusha { display: grid; gap: 6px; margin-bottom: 16px; }
.fusha label { font-weight: 600; font-size: .9rem; }
.fusha label .k { color: #c0392b; }
.fusha input, .fusha textarea, .fusha select {
  font: inherit; font-size: 1rem; padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--vija); background: #fff; color: var(--tx); width: 100%;
}
.fusha textarea { min-height: 130px; resize: vertical; }
.fusha input:focus, .fusha textarea:focus, .fusha select:focus { outline: none; border-color: var(--gj); box-shadow: 0 0 0 4px rgb(68 123 109 / .15); }
.shenim { font-size: .85rem; color: var(--tx-3); margin: 12px 0 0; }

/* faq */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { background: #fff; border: 1px solid var(--vija); border-radius: 12px; padding: 0 20px; }
.faq details[open] { box-shadow: var(--hije); border-color: transparent; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 32px 18px 0; font-weight: 650; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 2px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--gj); border-bottom: 2px solid var(--gj); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { color: var(--tx-2); padding-bottom: 18px; margin: 0; }
.filtrat { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filtrat button { font: inherit; font-size: .9rem; font-weight: 600; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--vija); background: #fff; color: var(--tx-2); cursor: pointer; }
.filtrat button[aria-pressed="true"] { background: var(--gj); border-color: var(--gj); color: #fff; }

/* lajmet */
.lajm { display: grid; gap: 24px; align-items: start; }
@media (min-width: 820px) { .lajm { grid-template-columns: 340px 1fr; } }
.lajm img { border-radius: 14px; box-shadow: var(--hije); }
.lajm time, .data { color: var(--tx-3); font-size: .9rem; font-weight: 600; }
.artikulli { max-width: 760px; font-size: 1.06rem; }
.artikulli img { border-radius: 16px; box-shadow: var(--hije); margin: 0 0 28px; }
.artikulli ul { padding-left: 1.2em; }
.artikulli li { margin-bottom: .5em; }

/* trajnimet */
.plani { position: relative; display: flex; flex-direction: column; }
.plani.rek { border: 2px solid var(--gj); }
.plani .shirit { position: absolute; top: -12px; left: 24px; background: var(--po); color: #1b1203; font-size: .75rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; }
.plani .lista-shenje { margin: 18px 0 24px; }
.plani .btn { margin-top: auto; align-self: flex-start; }

/* vlerat / shifrat */
.statistika { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.statistika div { background: #fff; border-radius: var(--r); padding: 22px; box-shadow: var(--hije); }
.statistika b { display: block; font-size: 2rem; font-weight: 800; color: var(--gj-err); letter-spacing: -.03em; line-height: 1.1; }
.statistika span { color: var(--tx-2); font-size: .92rem; }

/* fundi */
.fundi { background: var(--gj-zi); color: rgb(255 255 255 / .75); padding: 64px 0 28px; font-size: .95rem; }
.fundi a { color: rgb(255 255 255 / .85); text-decoration: none; }
.fundi a:hover { color: #fff; text-decoration: underline; }
.fundi .rrjeta-fundi { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .fundi .rrjeta-fundi { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .fundi .rrjeta-fundi { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.fundi h2 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--po); margin-bottom: 14px; }
.fundi ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.fundi .marka { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: #fff; font-weight: 750; font-size: 1.25rem; letter-spacing: -.01em; }
.fundi .marka img { width: 40px; height: 40px; }
.sociale { display: flex; gap: 10px; margin-top: 18px; }
.sociale a { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgb(255 255 255 / .08); }
.sociale a:hover { background: rgb(255 255 255 / .16); }
.sociale svg { width: 19px; height: 19px; fill: #fff; }
.fundi .poshte { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .1); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .85rem; color: rgb(255 255 255 / .55); }
.fundi .poshte nav { display: flex; flex-wrap: wrap; gap: 16px; }

.qender { text-align: center; }
.mt-l { margin-top: 36px; }
.zbehte { color: var(--tx-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ---------- kreu i produktit: gradient i markës + ikona + emri (në vend të fotove) ---------- */
.kp-vizual {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9; padding: 18px 20px; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  background: radial-gradient(120% 90% at 100% 0%, rgb(246 167 41 / .26), transparent 55%), linear-gradient(150deg, #2f6154, #10261f 72%);
}
.kp-vizual::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size: 22px 22px; -webkit-mask-image: radial-gradient(80% 90% at 85% 15%, #000, transparent 75%); mask-image: radial-gradient(80% 90% at 85% 15%, #000, transparent 75%);
}
.kp-ik { position: relative; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .18); color: #ffd08a; transition: transform .25s; }
.kp-ik svg { width: 23px; height: 23px; }
.kp-sfond { position: absolute; right: -22px; bottom: -30px; width: 140px; height: 140px; color: rgb(255 255 255 / .07); transition: transform .4s; }
.kp-sfond svg { width: 100%; height: 100%; stroke-width: 1.2; }
.kp-emri { position: relative; }
.kp-emri b { display: block; font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.kp-emri em { font-style: normal; color: var(--po); }
.kp-emri small { display: block; margin-top: 4px; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.karta-produkt:hover .kp-ik { transform: rotate(-6deg) scale(1.06); }
.karta-produkt:hover .kp-sfond { transform: rotate(8deg) scale(1.05); }
.kp-etiketat { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kp-etiketat li { font-size: .78rem; padding: 3px 9px; border-radius: 999px; background: var(--gj-zbehte); color: var(--gj-err); font-weight: 600; }

/* versioni i madh, te heroi i faqes së produktit */
.kp-madh { aspect-ratio: 1; width: 100%; max-width: 420px; justify-self: end; border-radius: 18px; padding: 30px; box-shadow: 0 20px 50px rgb(0 0 0 / .35); border: 1px solid rgb(255 255 255 / .1); }
.kp-madh .kp-ik { width: 66px; height: 66px; border-radius: 18px; } .kp-madh .kp-ik svg { width: 32px; height: 32px; }
.kp-madh .kp-sfond { width: 280px; height: 280px; right: -40px; bottom: -50px; }
.kp-madh .kp-emri b { font-size: 2.6rem; }
.kp-pikat { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kp-pikat li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .95rem; color: rgb(255 255 255 / .88); }
.kp-pikat li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--po); box-shadow: 0 0 0 4px rgb(246 167 41 / .18); flex: none; }
@media (max-width: 899px) { .kp-madh { padding: 22px; } .kp-madh .kp-emri b { font-size: 2rem; } }
@media (max-width: 559px) { .kp-madh .kp-pikat { display: none; } }
@media (prefers-reduced-motion: reduce) { .kp-ik, .kp-sfond { transition: none; } }
/* emri duket te kreu; titulli mbetet për lexuesit e ekranit dhe shfaqet vetëm në celular, ku kreu tregon vetëm ikonën */
@media (min-width: 560px) { .karta-produkt .trupi > h3, .karta-produkt .trupi > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* ---------- vizatimet e ndërfaqes te heroi i produktit (skica, jo pamje të vërteta) ---------- */
.kp-madh { justify-content: flex-start; gap: 18px; }
.kp-krye { position: relative; display: flex; align-items: center; gap: 14px; }
.kp-krye .kp-ik { width: 52px; height: 52px; border-radius: 15px; } .kp-krye .kp-ik svg { width: 26px; height: 26px; }
.kp-madh .kp-krye .kp-emri b { font-size: 1.7rem; }
.kp-madh .kp-krye .kp-emri small { margin-top: 2px; }
.ui-mock {
  position: relative; align-self: stretch; background: #fff; color: var(--tx); border-radius: 14px; padding: 12px 13px;
  font-size: 11px; line-height: 1.3; box-shadow: 0 22px 44px rgb(0 0 0 / .38); transform: rotate(-1.5deg);
  animation: ui-hyr .7s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes ui-hyr { from { opacity: 0; transform: translateY(14px) rotate(-1.5deg); } }
.ui-mock .sk { display: block; height: 7px; border-radius: 4px; background: #e3eae7; }
.ui-mock .sk.e-zbehte { background: #eef2f0; height: 6px; margin-top: 4px; }
.ui-koka { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ui-koka b { font-size: 12.5px; font-weight: 750; }
.ui-pill { font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--gj-zbehte); color: var(--gj-err); white-space: nowrap; }
.ui-pill.gj::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; margin-right: 5px; }
.ui-rr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid #eef2f0; }
.ui-rr em { font-style: normal; font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-tot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 8px; border-top: 1px dashed #d5ddd9; margin-top: 2px; }
.ui-tot b { font-size: 15px; font-weight: 800; }
.ui-btn { margin-top: 8px; text-align: center; font-weight: 750; padding: 7px; border-radius: 8px; background: var(--gj); color: #fff; }
.ui-btn.po { background: var(--po); color: #1b1203; animation: ui-shtyp 4s 1.2s infinite; }
@keyframes ui-shtyp { 0%, 88%, 100% { transform: none; } 92% { transform: scale(.94); } }

/* Finance+ */
.ui-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.ui-kpi div { padding: 7px; border-radius: 8px; background: #f4f7f5; display: grid; gap: 5px; }
.ui-kpi b { font-size: 12px; font-variant-numeric: tabular-nums; } .ui-kpi .po b { color: var(--po-err); }
.ui-grafik { display: block; width: 100%; height: 56px; margin-bottom: 4px; }
.ui-grafik .z { fill: rgb(68 123 109 / .14); }
.ui-grafik .v { fill: none; stroke: var(--gj); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 100; animation: ui-vizato 1.6s .4s ease both; }
@keyframes ui-vizato { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* POS+ */
.ui-pos { display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; }
.ui-pllakat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.ui-pllakat span { padding: 8px 6px; border-radius: 7px; border: 1px solid #e3eae7; }
.ui-pllakat span.on { border-color: var(--gj); background: var(--gj-zbehte); }
.ui-shporta { display: flex; flex-direction: column; border: 1px solid #e3eae7; border-radius: 8px; padding: 2px 8px 8px; }
.ui-shporta .ui-rr:first-child { border-top: 0; }

/* Phone+ */
.ui-mock.ui-phone-plus { background: transparent; box-shadow: none; padding: 0; display: grid; place-items: center; }
.ui-tel { width: 190px; padding: 8px; border-radius: 26px; background: #0d1a16; box-shadow: 0 22px 44px rgb(0 0 0 / .45), inset 0 0 0 2px #2c3d37; }
.ui-tel-ek { background: #fff; border-radius: 19px; padding: 14px 11px 11px; }
.ui-klienti { padding: 7px; border-radius: 8px; background: #f4f7f5; margin-bottom: 4px; }

/* Restaurant+ */
.ui-salla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.ui-salla span { display: grid; gap: 5px; justify-items: center; padding: 9px 6px; border-radius: 10px; border: 1.5px solid #e3eae7; }
.ui-salla b { font-size: 11px; }
.ui-salla .zene { background: #fdf0d9; border-color: #f4c77a; } .ui-salla .gati { background: var(--gj-zbehte); border-color: #9cc3b7; }
.ui-salla .on { animation: ui-pulso 2.4s infinite; }
@keyframes ui-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgb(246 167 41 / .45); } 50% { box-shadow: 0 0 0 6px rgb(246 167 41 / 0); } }
.ui-legjenda { display: flex; gap: 12px; margin-top: 10px; font-size: 9.5px; color: var(--tx-3); }
.ui-legjenda span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; border: 1px solid #e3eae7; }
.ui-legjenda .zene::before { background: #fdf0d9; } .ui-legjenda .gati::before { background: var(--gj-zbehte); }

/* Hotel+ */
.ui-kal { display: grid; grid-template-columns: 30px repeat(7, 1fr); grid-auto-rows: 26px; gap: 4px 2px; align-items: center; }
.ui-kal .d { text-align: center; font-size: 9.5px; font-weight: 700; color: var(--tx-3); }
.ui-kal .dh { grid-column: 1; font-weight: 700; font-size: 10px; }
.ui-kal .rez { height: 18px; border-radius: 6px; background: var(--gj); transform-origin: left; animation: ui-shtrihu .8s .3s ease both; }
.ui-kal .rez.po { background: var(--po); } .ui-kal .rez.on { background: #6aa596; animation-delay: .6s; }
@keyframes ui-shtrihu { from { transform: scaleX(0); } }

/* Klinika+ */
.ui-termin { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #eef2f0; }
.ui-termin b { font-variant-numeric: tabular-nums; }
.ui-termin .st { font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #f1f5f3; color: var(--tx-3); }
.ui-termin .st.kryer { background: var(--gj-zbehte); color: var(--gj-err); }
.ui-termin .st.tani { background: #fdf0d9; color: var(--po-err); animation: ui-pulso 2.4s infinite; }

/* WMS+ */
.ui-rafti { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; border-radius: 10px; background: #f4f7f5; border-bottom: 4px solid #c9d5d0; }
.ui-rafti span { height: 30px; border-radius: 5px; border: 1.5px dashed #cfdad5; }
.ui-rafti span.p { border: 0; background: linear-gradient(#d9b98a, #c79e63); }
.ui-rafti span.on { border: 0; background: linear-gradient(var(--po), #f8c16b); animation: ui-pulso 2.4s infinite; }
.ui-skan { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 7px 9px; border-radius: 8px; background: var(--gj-zi); color: #fff; }
.ui-skan span { font-weight: 800; font-family: ui-monospace, Consolas, monospace; } .ui-skan .sk { background: rgb(255 255 255 / .2); }
.ui-skan em { margin-left: auto; font-style: normal; font-weight: 800; color: #6ee7a8; }

/* Shitje për Agjentë */
.ui-harta { display: block; width: 100%; height: 70px; margin-bottom: 6px; background: #f4f7f5; border-radius: 8px; }
.ui-harta .rr { fill: none; stroke: #c9d5d0; stroke-width: 2.5; stroke-dasharray: 4 5; }
.ui-harta .kryer { fill: none; stroke: var(--gj); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; animation: ui-vizato 1.6s .4s ease both; }
.ui-harta circle { fill: var(--gj); } .ui-harta circle.on { fill: var(--po); animation: ui-pulso-r 2.4s infinite; } .ui-harta circle.pas { fill: #c9d5d0; }
@keyframes ui-pulso-r { 50% { r: 8; } }
.ui-ndalesa { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 9px; padding: 6px 0; border-top: 1px solid #eef2f0; }
.ui-ndalesa i { width: 8px; height: 8px; border-radius: 50%; background: #c9d5d0; }
.ui-ndalesa.kryer i { background: var(--gj); } .ui-ndalesa.tani i { background: var(--po); }
.ui-ndalesa em { font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--tx-3); }

/* njoftimi që noton */
.ui-njoftim {
  position: absolute; right: 18px; bottom: 18px; z-index: 2; display: flex; align-items: center; gap: 9px;
  padding: 9px 13px 9px 9px; border-radius: 12px; background: rgb(255 255 255 / .97); color: var(--tx);
  font-size: 12px; font-weight: 700; box-shadow: 0 14px 34px rgb(0 0 0 / .35);
  animation: ui-njoft-hyr .6s .8s both, ui-noto 4.5s 1.4s ease-in-out infinite;
}
.ui-njoftim span { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #fdf0d9; color: var(--po-err); }
.ui-njoftim svg { width: 16px; height: 16px; }
@keyframes ui-njoft-hyr { from { opacity: 0; transform: translateY(10px); } }
@keyframes ui-noto { 50% { transform: translateY(-5px); } }

@media (max-width: 899px) { .kp-madh { padding-bottom: 72px; } }
@media (max-width: 559px) { .kp-madh .ui-mock { font-size: 10.5px; } .ui-njoftim { right: 12px; bottom: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .ui-mock, .ui-mock *, .ui-njoftim { animation: none !important; }
}

/* ERP Cloud: modulet poshtë grafikut të panelit */
.ui-modulet { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ui-modulet span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 7px; background: #f4f7f5; font-weight: 650; font-size: 10px; }
.ui-modulet svg { width: 11px; height: 11px; color: var(--gj); }
.karta-moduli h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.karta-moduli .etiketa-e-re { margin-left: 0; }

/* ---------- ndërruesi i gjuhës (SQ · EN · DE) ---------- */
.nav .gjuhet { display: flex; align-items: center; gap: 2px; margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--vija); }
.nav .gjuhet a { padding: 5px 7px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--tx-3); border-radius: 7px; }
.nav .gjuhet a[aria-current] { color: var(--gj-err); background: var(--gj-zbehte); }
@media (max-width: 1199px) {
  .nav .gjuhet { margin: 0; padding: 12px 0; border-left: 0; gap: 8px; }
  .nav .gjuhet a { padding: 8px 14px; font-size: .95rem; border: 1px solid var(--vija); }
}
/* emrat e menysë dhe butoni i kokës mbeten në një rresht edhe në gjermanisht */
.nav a, .koka .btn-koka { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1319px) { .nav a, .nav .nen-titull { padding-left: 8px; padding-right: 8px; } .nav .gjuhet a { padding: 5px 5px; } }
.koka .logoja { flex: none; }
/* gjermanishtja ka emra më të gjatë: menyja dhe butoni i kokës ngushtohen pak që të zënë vend të gjithë */
@media (min-width: 1200px) {
  html[lang="de"] .nav a, html[lang="de"] .nav .nen-titull { padding-left: 8px; padding-right: 8px; }
  html[lang="de"] .nav > ul { gap: 0; }
  html[lang="de"] .nav .gjuhet { margin-left: 2px; padding-left: 4px; }
  html[lang="de"] .nav .gjuhet a { padding: 5px 5px; }
  html[lang="de"] .koka .btn-koka { padding: 0 14px; font-size: .9rem; }
}
@media (min-width: 1200px) and (max-width: 1399px) { .nav > ul { gap: 0; } }

/* shenjat «E re» / «Shtesë» me shkronja të mëdha në çdo gjuhë (teksti burimor mbetet i përkthyeshëm) */
.etiketa-e-re { text-transform: uppercase; }

/* ---------- formulari i kontaktit: fusha-kurth dhe gjendja e dërgimit ---------- */
.kurthi { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.forma-statusi { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--bg-2); font-weight: 600; font-size: .95rem; }
.forma-statusi.ok { background: var(--gj-zbehte); color: var(--gj-err); }
.forma-statusi.gabim { background: #fdecea; color: #a33a2c; }
.forma-statusi a { color: inherit; text-decoration: underline; }
.formulari button[disabled] { opacity: .6; cursor: progress; }