/* ---------- Faqet e informacionit / artikujt (stili i njejte me faqen 3D) ---------- */
:root {
  --studio: #d3cbca; --ink: #000; --muted: rgba(0, 0, 0, 0.6); --line: rgba(0, 0, 0, 0.12);
  --light-blue: #56a6e6; --blue: #2b45c9; --red: #e5452f;
  --display: 'Barlow Condensed', Impact, sans-serif; --futura: 'Jost', Futura, sans-serif;
  --body: 'Inter Tight', 'Inter', system-ui, sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--studio); -webkit-text-size-adjust: 100%; }
body { background: var(--studio); color: var(--ink); font-family: var(--body); font-weight: 450; -webkit-font-smoothing: antialiased; }
a { color: inherit; }

/* header (si shiriti i faqes 3D) */
.p-head { position: sticky; top: 0; z-index: 50; padding: 14px 16px 0; }
.p-bar {
  max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 8px 8px 8px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.p-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.p-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.p-brand .sm-stripes i { height: 20px; }
.p-brand b { font: italic 800 19px/1 var(--display); letter-spacing: 0.02em; }
.p-brand small { display: block; font: 500 10px/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.p-cta {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px;
  background: #000; color: #fff; text-decoration: none; font: 600 14px/1 var(--body); white-space: nowrap;
}
.p-cta:hover { background: #1c1c1c; }
.p-search { margin-left: auto; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #000; background: rgba(255, 255, 255, 0.85); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); transition: background 0.2s; }
.p-search:hover { background: #fff; }
.p-bar .p-search ~ .m5a-widget { margin-left: 0; }
.p-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* hero i artikullit */
.p-hero { max-width: 860px; margin: 0 auto; padding: 72px 24px 34px; }
.p-kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.p-kicker .sm-stripes i { height: 12px; width: 4px; }
.p-hero h1 { font: 800 clamp(44px, 7vw, 86px)/0.9 var(--display); text-transform: uppercase; letter-spacing: -0.005em; margin-top: 18px; }
.p-sub { margin-top: 18px; font-size: 18px; line-height: 1.5; color: var(--muted); max-width: 640px; }
.p-meta { margin-top: 20px; font: 500 13px/1 var(--body); color: var(--muted); display: flex; gap: 16px; flex-wrap: wrap; }

/* trupi i artikullit */
.p-body { max-width: 860px; margin: 0 auto; padding: 0 24px 40px; }
.p-card { background: rgba(255, 255, 255, 0.5); border-radius: 28px; padding: clamp(24px, 5vw, 56px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.p-card > * + * { margin-top: 16px; }
.p-card h2 { font: 800 30px/1 var(--display); text-transform: uppercase; margin-top: 38px; letter-spacing: 0.005em; }
.p-card h2:first-child { margin-top: 0; }
.p-card p, .p-card li { font-size: 17px; line-height: 1.7; }
.p-card .lead { font-size: 20px; line-height: 1.55; font-weight: 500; }
.p-card ul { padding-left: 22px; }
.p-card li + li { margin-top: 6px; }
.p-card a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.p-card img { display: block; max-width: 100%; height: auto; border-radius: 18px; }
.p-card h3 { font: 800 22px/1.05 var(--display); text-transform: uppercase; margin-top: 26px; }
.p-card code { font: 500 0.92em ui-monospace, Menlo, monospace; background: rgba(0, 0, 0, 0.06); padding: 1px 6px; border-radius: 6px; }
.p-card .note { font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 30px; }
.p-card table { width: 100%; border-collapse: collapse; font-size: 16px; }
.p-card th, .p-card td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.p-card th { width: 38%; font-weight: 600; color: var(--muted); padding-right: 16px; }

/* donacionet */
.donate-amounts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.donate-amounts span { padding: 10px 16px; border-radius: 999px; background: rgba(0, 0, 0, 0.06); font: 700 15px/1 var(--body); }
.donate-methods { display: grid; gap: 12px; margin-top: 22px; }
.p-card a.donate-btn {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; border-radius: 20px; text-decoration: none; color: #000;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.p-card a.donate-btn span { font: 800 26px/1 var(--display); text-transform: uppercase; }
.p-card a.donate-btn small { font: 500 13px/1.2 var(--body); color: var(--muted); }
.p-card a.donate-btn:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 12px 30px rgba(0, 0, 0, 0.1); }
.p-card a.donate-btn.primary { background: #000; color: #fff; position: relative; overflow: hidden; }
.p-card a.donate-btn.primary small { color: rgba(255, 255, 255, 0.65); }
.p-card a.donate-btn.primary::after {
  content: ''; position: absolute; right: -10px; top: 0; bottom: 0; width: 70px; transform: skewX(-20deg);
  background: linear-gradient(90deg, var(--light-blue) 0 33%, var(--blue) 33% 66%, var(--red) 66%);
}
.donate-bank { padding: 20px 24px; border-radius: 20px; background: rgba(255, 255, 255, 0.6); }
.donate-bank h3 { font: 800 22px/1 var(--display); text-transform: uppercase; margin-bottom: 8px; }
.donate-bank code { font: 600 15px/1.4 ui-monospace, Menlo, monospace; word-break: break-all; }

/* liste artikujsh */
.p-grid { max-width: 1180px; margin: 0 auto; padding: 0 24px 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.p-tile {
  display: flex; flex-direction: column; gap: 12px; min-height: 230px; padding: 26px; border-radius: 26px; text-decoration: none;
  background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  transition: transform 0.4s var(--ease), background 0.3s;
}
.p-tile:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.75); }
.p-tile .p-kicker { font-size: 11px; }
.p-tile h3 { font: 800 30px/0.95 var(--display); text-transform: uppercase; }
.p-tile p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.p-tile span.more { margin-top: auto; font: 600 14px/1 var(--body); }
.p-section-title { max-width: 1180px; margin: 10px auto 18px; padding: 0 24px; font: 800 34px/1 var(--display); text-transform: uppercase; }

/* footer */
.p-foot { background: #000; color: #fff; margin-top: 40px; padding: 56px 24px 34px; }
.p-foot-in { max-width: 1180px; margin: 0 auto; }
.p-foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
.p-foot h5 { font: 600 11px/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin-bottom: 14px; }
.p-foot ul { list-style: none; display: grid; gap: 9px; }
.p-foot a { text-decoration: none; color: #fff; font-size: 14px; }
.p-foot a:hover { color: #9cc8ff; }
.p-foot .p-name { font: italic 800 34px/1 var(--display); }
.p-foot .p-name + p { margin-top: 12px; color: rgba(255, 255, 255, 0.55); font-size: 14px; line-height: 1.6; max-width: 320px; }
.p-legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.45); font-size: 12px; line-height: 1.6; }
.p-stripe { height: 6px; display: flex; margin-top: 0; }
.p-stripe i { flex: 1; }
.p-stripe i:nth-child(1) { background: var(--light-blue); }
.p-stripe i:nth-child(2) { background: var(--blue); }
.p-stripe i:nth-child(3) { background: var(--red); }

@media (max-width: 760px) {
  .p-search { display: none; }
}
@media (max-width: 760px) {
  .p-head { padding: 10px 10px 0; }
  .p-brand small, .p-cta .t-long { display: none; }
  .p-bar { gap: 8px; }
  .p-hero { padding: 44px 18px 24px; }
  .p-body, .p-grid { padding-left: 12px; padding-right: 12px; }
  .p-card p, .p-card li { font-size: 16px; }
  .p-card .lead { font-size: 18px; }
  .p-foot-top { grid-template-columns: 1fr 1fr; }
  .p-foot-top > :first-child { grid-column: 1 / -1; }
}

/* ---------- navigimi kryesor ---------- */
.p-nav { display: none; }
@media (min-width: 1100px) {
  .p-nav { display: flex; gap: 2px; margin: 0 auto; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
  .p-nav a { display: inline-flex; align-items: center; height: 34px; padding: 0 15px; border-radius: 999px; color: #3d3d3d; text-decoration: none; font: 600 14px/1 var(--body); transition: background 0.2s, color 0.2s; }
  .p-nav a:hover { background: rgba(255, 255, 255, 0.9); color: #000; }
  .p-nav a.on { background: #000; color: #fff; }
  .p-bar .p-search { margin-left: 0; }
}
/* telefon: shirit navigimi poshte, si aplikacion */
.p-tabbar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .p-tabbar {
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60;
    display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 2px; padding: 6px; border-radius: 24px;
    background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s;
  }
  .p-tabbar a { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 52px; padding: 6px 2px; border-radius: 18px; color: #5c5c5c; text-decoration: none; font: 600 10.5px/1 var(--body); letter-spacing: 0.01em; -webkit-tap-highlight-color: transparent; transition: background 0.2s, color 0.2s; }
  .p-tabbar svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .p-tabbar a:active { background: rgba(0, 0, 0, 0.06); }
  .p-tabbar a.on { color: #000; background: rgba(0, 0, 0, 0.07); }
  .p-tabbar a.on svg { stroke-width: 2.2; }
  /* kur shkruan (tastiera hapur) shiriti largohet qe te mos mbuloje fushen */
  body.typing .p-tabbar { transform: translateY(140%); opacity: 0; pointer-events: none; }
  /* njoftimet e vogla dalin mbi shiritin */
  .b-toast, .m5a-toast { bottom: calc(100px + env(safe-area-inset-bottom)) !important; }
}

/* ===================== footer: marka + 4 kolona + shiriti i fundit ===================== */
.ft { padding: 0; margin-top: 48px; }
.p-stripe + .ft { margin-top: 0; }
.ft-in { display: grid; grid-template-columns: minmax(260px, 1.2fr) 3fr; gap: 48px; padding: 56px 24px 40px; }
.ft-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.ft-logo .sm-stripes { margin: 0; }
.ft-logo b { font: italic 800 34px/1 var(--display); }
.ft-logo small { font: 600 11px/1 var(--body); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-top: 6px; }
.ft-brand p { margin-top: 14px; max-width: 340px; color: rgba(255, 255, 255, 0.62); font-size: 14px; line-height: 1.6; }
.ft-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.p-foot .ft-btn { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #fff; font: 700 13.5px/1 var(--body); text-decoration: none; transition: background 0.2s, color 0.2s; }
.p-foot .ft-btn:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.p-foot .ft-btn.primary { background: #fff; color: #000; }
.p-foot .ft-btn.primary:hover { background: #e9e9e9; color: #000; }
.ft-social { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.p-foot .ft-social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); color: #fff; }
.p-foot .ft-social a:hover { background: #fff; color: #000; }
.ft-social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ft-social span { margin-left: 4px; font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.ft-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.ft-col h5 { margin: 0 0 16px; font: 700 11px/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.p-foot .ft-col a { color: rgba(255, 255, 255, 0.88); font-size: 14px; line-height: 1.3; }
.p-foot .ft-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ft-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.ft-bottom-in { max-width: 1180px; margin: 0 auto; padding: 18px 24px 22px; display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.45); }
body:has(.fh) .ft-bottom-in { max-width: 1520px; padding-left: clamp(24px, 3vw, 56px); padding-right: clamp(24px, 3vw, 56px); }
@media (max-width: 1000px) {
  .ft-in { grid-template-columns: 1fr; gap: 36px; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
}
@media (max-width: 760px) {
  .ft { margin-top: 32px; }
  .ft-in { padding: 36px 18px 28px; gap: 30px; }
  .ft-cta .ft-btn { flex: 1; justify-content: center; }
  .ft-cols { gap: 26px 16px; }
  .ft-col ul { gap: 10px; }
  .p-foot .ft-col a { font-size: 14.5px; }
  .ft-bottom-in { padding: 16px 18px 20px; flex-direction: column; }
}

/* ===================== faqet statike ne pamjen e blogut ===================== */
.sp .sp-card { background: #fff; border-radius: 20px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); padding: clamp(22px, 3vw, 40px); }
.sp .sp-card > *:first-child { margin-top: 0; }
.sp .fh-main { gap: 16px; }
.sp-related h2 { margin: 6px 4px 12px; font: 800 26px/1 var(--display); text-transform: uppercase; }
.sp .sp-grid { max-width: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sp .sp-grid .p-tile { background: #fff; }
.sp-num { font: 800 16px/1 var(--display) !important; color: #000; }
.sp-3d { display: grid; gap: 6px; color: #fff !important; text-decoration: none; background: #0b0b0d !important; }
.sp-3d b { font: 800 22px/1.05 var(--display); text-transform: uppercase; }
.sp-3d span { font-size: 13.5px; color: rgba(255, 255, 255, 0.7); }
.sp-3d:hover span { color: #fff; }
.sp .fp-meta a { color: inherit; font-weight: 700; }
.sp-order { margin-top: 16px; }
.sp-order > section:first-child { margin-top: 0; }
@media (max-width: 760px) {
  .sp .sp-card { margin: 0 -14px; border-radius: 0; padding: 22px 16px; }
  .sp .sp-grid { grid-template-columns: 1fr; }
}
.sp .fs-frow.on .sp-num { color: #fff; }
.sp .fp-head.sp-crumbs-only { padding-top: 14px; padding-bottom: 14px; }
.sp .fp-head.sp-crumbs-only .fp-crumbs { margin: 0; }

/* ===== tema e erret per faqet statike (njesoj si faqet e blogut) ===== */
html[data-theme='dark'] body:has(.sp) { background: var(--d-bg, #131417); color: var(--d-text, #dcdfe4); }
html[data-theme='dark'] .sp :is(.sp-card, .sp-grid .p-tile) { background: var(--d-card); box-shadow: 0 0 0 1px var(--d-line); color: var(--d-text); }
html[data-theme='dark'] .sp .sp-grid .p-tile:hover { background: var(--d-card-h); }
html[data-theme='dark'] .sp :is(.p-card, .p-tile, .sp-related, .o-page) :is(h1, h2, h3, h4, b, strong, th) { color: var(--d-text); }
html[data-theme='dark'] .sp :is(.p-card, .p-tile) :is(p, li, td) { color: var(--d-body); }
html[data-theme='dark'] .sp .p-card a:not(.donate-btn) { color: var(--d-link); }
html[data-theme='dark'] .sp .p-card :is(th, td, .note) { border-color: var(--d-line); }
html[data-theme='dark'] .sp .p-card th, html[data-theme='dark'] .sp .p-card .note, html[data-theme='dark'] .sp .p-tile p { color: var(--d-muted); }
html[data-theme='dark'] .sp .p-card code { background: var(--d-card2); color: var(--d-text); }
html[data-theme='dark'] .sp .p-card a.donate-btn:not(.primary) { background: var(--d-card2); color: var(--d-text); box-shadow: inset 0 0 0 1px var(--d-line); }
html[data-theme='dark'] .sp .p-tile span.more { color: var(--d-text); }
html[data-theme='dark'] .sp .sp-num { color: var(--d-text); }
html[data-theme='dark'] .sp .fs-frow.on .sp-num { color: #0b0b0d; }
/* faqja "Get a 3D website" */
html[data-theme='dark'] .sp :is(.o-sub, .o-trust, .o-head > p:last-child:not(.p-kicker), .o-feat p, .o-steps p, .o-aside > p:not(.p-kicker):not(.o-mail), .o-next span, .o-mail, .o-done p, .o-faq details p, .o-consent, .o-fine) { color: var(--d-body); }
html[data-theme='dark'] .sp :is(.o-feat, .o-pack:not(.best), .o-steps li, .o-faq details) { background: var(--d-card); box-shadow: 0 0 0 1px var(--d-line); color: var(--d-text); }
html[data-theme='dark'] .sp .o-steps li { border-top-color: var(--d-text); }
html[data-theme='dark'] .sp .o-steps b { color: var(--d-faint); }
html[data-theme='dark'] .sp .o-pack.best { background: #0b0b0d; box-shadow: 0 0 0 1px var(--d-line2); }
html[data-theme='dark'] .sp .o-order { background: var(--d-card); box-shadow: 0 0 0 1px var(--d-line); }
html[data-theme='dark'] .sp :is(.o-form, .o-done) { background: var(--d-card2); box-shadow: 0 0 0 1px var(--d-line); }
html[data-theme='dark'] .sp :is(.o-next b, .o-mail a, .o-consent a) { color: var(--d-text); }
html[data-theme='dark'] .sp .o-next i, html[data-theme='dark'] .sp .o-feat svg { background: var(--d-text); color: #0b0b0d; }
html[data-theme='dark'] .sp :is(.o-field input, .o-field textarea, .o-chip span, .o-consent, .o-step legend i) { background: var(--d-card); color: var(--d-text); }
html[data-theme='dark'] .sp :is(.o-field input, .o-field textarea):focus { background: var(--d-card); border-color: var(--d-link); }
html[data-theme='dark'] .sp .o-chip input:checked + span { background: var(--d-text); color: #0b0b0d; }
html[data-theme='dark'] .sp :is(.o-field small, .o-count) { color: var(--d-muted); }
html[data-theme='dark'] .sp .o-step + .o-step { border-top-color: var(--d-line); }
html[data-theme='dark'] .sp .o-btn.dark { background: var(--d-text); color: #0b0b0d; }
html[data-theme='dark'] .sp .o-btn.ghost { background: var(--d-card2); color: var(--d-text); box-shadow: inset 0 0 0 1px var(--d-line); }
html[data-theme='dark'] .sp .o-hero-visual { background: radial-gradient(110% 90% at 50% 20%, #2a2c33, #15161a); box-shadow: 0 0 0 1px var(--d-line); }
html[data-theme='dark'] .sp .o-live { background: rgba(26, 27, 31, 0.9); color: var(--d-text); }
html[data-theme='dark'] .sp :is(.p-kicker, .o-head .p-kicker) { color: var(--d-muted); }
/* telefon: hapesira per shiritin poshte eshte brenda footer-it (footer-i i zi arrin deri ne fund te ekranit) */
@media (max-width: 760px) {
  body:has(> footer.ft) { padding-bottom: 0; }
  body:has(> footer.ft) .ft-bottom-in { padding-bottom: calc(20px + 86px + env(safe-area-inset-bottom)); }
}

/* header klasik (kur faqja punon pa backend): i thjeshte, ne nje rresht, pa u thyer emri */
.p-brand b { white-space: nowrap; }
.p-left { flex: 1 1 auto; }
.p-bar > .m5a-widget { flex: none; display: flex; align-items: center; gap: 6px; }
@media (max-width: 760px) {
  .p-head { padding: 8px 10px 0; }
  .p-bar { gap: 6px; padding: 6px; }
  .p-left { gap: 10px; }
  .p-brand { gap: 8px; }
  .p-brand b { font-size: 18px; }
  .p-cta { height: 38px; padding: 0 14px; font-size: 13.5px; }
}
@media (max-width: 360px) {
  .p-brand .sm-stripes { display: none; }
}

/* ---------- telefon: shiriti poshte si te faqja 3D — kapsule e zeze, faqja aktive e bardhe me emer ---------- */
@media (max-width: 760px) {
  .p-tabbar {
    left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 20px);
    display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px;
    background: #0b0b0d; backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.45), 0 16px 36px rgba(0, 0, 0, 0.28);
  }
  .p-tabbar a {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 0; height: 44px; min-width: 48px;
    padding: 0 14px; border-radius: 999px; color: rgba(255, 255, 255, 0.72);
    transition: background 0.25s, color 0.25s;
  }
  .p-tabbar a span { display: none; font: 600 14px/1 var(--body, 'Inter Tight', sans-serif); letter-spacing: 0.005em; white-space: nowrap; }
  .p-tabbar svg { width: 21px; height: 21px; stroke-width: 1.9; }
  .p-tabbar a:active { background: rgba(255, 255, 255, 0.12); }
  /* faqja ku je: pilule e bardhe me emrin (si "Configure") */
  .p-tabbar a.on { background: #fff; color: #000; padding: 0 18px 0 15px; }
  .p-tabbar a.on span { display: inline; }
  .p-tabbar a.on svg { stroke-width: 2.1; }
  body.typing .p-tabbar { transform: translate(-50%, 140%); }
}

/* shiriti poshte fshihet gjate scroll-it poshte (del perseri kur kthehesh lart) */
.p-tabbar { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s; }
@media (max-width: 760px) {
  body.nav-hidden .p-tabbar { transform: translate(-50%, 160%); }
}

/* navigimi: shirit i holle ngarkimi lart sapo klikohet nje lidhje (faqja tjeter po vjen) */
body.nav-going::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #56a6e6 0 33%, #2b45c9 33% 66%, #e5452f 66%);
  transform-origin: 0 50%;
  animation: nav-going 1.6s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;
  pointer-events: none;
}
@keyframes nav-going {
  from { transform: scaleX(0.05); }
  to { transform: scaleX(0.9); }
}

/* ===================== Butoni i temes (hene / diell) ne header ===================== */
.p-theme { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #000; background: rgba(255, 255, 255, 0.85); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); transition: background 0.2s; }
.p-theme:hover { background: #fff; }
.p-theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-theme .ic-sun, html[data-theme='dark'] .p-theme .ic-moon { display: none; }
html[data-theme='dark'] .p-theme .ic-sun { display: block; }
.p-bar .p-search + .p-theme { margin-left: -6px; }
html.theme-anim, html.theme-anim body, html.theme-anim main * { transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important; }

/* ===================== DARK MODE per faqet statike (jo faqja 3D) ===================== */
html[data-theme='dark'] {
  color-scheme: dark;
  --studio: #131417; --ink: #dcdfe4; --muted: #8d929b; --line: rgba(255, 255, 255, 0.09);
}
html[data-theme='dark'] .p-bar { background: rgba(23, 24, 28, 0.78); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
html[data-theme='dark'] :is(.p-search, .p-theme) { background: #222328; color: #eceef2; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
html[data-theme='dark'] :is(.p-search, .p-theme):hover { background: #2f3138; }
html[data-theme='dark'] .p-cta { background: #d5d9df; color: #0b0b0d; }
html[data-theme='dark'] .p-cta:hover { background: #fff; }
html[data-theme='dark'] .menu-btn { background: #d5d9df; color: #0b0b0d; }
html[data-theme='dark'] :is(.p-card, .p-tile, .donate-bank) { background: #1a1b1f; box-shadow: 0 0 0 1px #2a2b31; }
html[data-theme='dark'] .p-tile:hover { background: #1f2025; }
html[data-theme='dark'] .p-card a { color: #8ab4f8; }
html[data-theme='dark'] .p-card code { background: rgba(255, 255, 255, 0.08); }
html[data-theme='dark'] .p-card a.donate-btn { background: #222328; color: #dcdfe4; box-shadow: inset 0 0 0 1px #2f3138; }
html[data-theme='dark'] .p-card a.donate-btn.primary { background: #d5d9df; color: #0b0b0d; }
html[data-theme='dark'] .p-card a.donate-btn.primary small { color: rgba(0, 0, 0, 0.6); }
html[data-theme='dark'] .donate-amounts span { background: rgba(255, 255, 255, 0.08); }
html[data-theme='dark'] .p-foot { background: #000; box-shadow: 0 -1px 0 #1f2025; }
@media (min-width: 761px) {
  html[data-theme='dark'] .p-nav { background: rgba(255, 255, 255, 0.06); box-shadow: none; }
  html[data-theme='dark'] .p-nav a { color: #c9ccd2; }
  html[data-theme='dark'] .p-nav a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
  html[data-theme='dark'] .p-nav a.on { background: #eceef2; color: #0b0b0d; }
}

/* lexim i rehatshem ne te errët: tekst i zbehur, jo i trashe, rreshta te hapur */
html[data-theme='dark'] .p-card :is(p, li, td) { color: #c2c6cd; font-weight: 400; line-height: 1.78; }
html[data-theme='dark'] .p-card :is(b, strong, h2, h3, th) { color: #dcdfe4; }
html[data-theme='dark'] .p-card .lead { color: #d0d3d9; }
html[data-theme='dark'] :is(.p-sub, .p-meta, .p-kicker) { color: #8d929b; }
html[data-theme='dark'] .p-hero h1 { color: #e2e5e9; }

/* shiriti poshte ne ekrane te ngushta: pilula aktive nuk shtypet kurre (teksti mbetet brenda) */
@media (max-width: 760px) {
  .p-tabbar a { flex: 0 1 auto; min-width: 40px; }
  .p-tabbar a.on { flex: none; }
}
@media (max-width: 360px) {
  .p-tabbar { gap: 2px; padding: 4px; }
  .p-tabbar a { height: 42px; padding: 0 10px; min-width: 38px; }
  .p-tabbar a.on { padding: 0 13px 0 11px; gap: 6px; }
  .p-tabbar a span { font-size: 13px; }
  .p-tabbar svg { width: 19px; height: 19px; }
}
@media (max-width: 300px) {
  .p-tabbar a.on span { display: none; }
  .p-tabbar a.on { padding: 0 12px; }
}
html[data-theme='dark'] .p-tabbar { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 36px rgba(0, 0, 0, 0.55); background: #0b0c0e; }
html[data-theme='dark'] .p-tabbar a.on { background: #e4e6ea; color: #111216; }

/* prekja: pa ngjyren blu te shfletuesit, reagim i menjehershem (si ne aplikacion) */
html { -webkit-tap-highlight-color: transparent; }
a, button, summary, label, [role='button'] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus:not(:focus-visible) { outline: none; }
.p-tabbar a, .p-cta, .p-search, .p-theme, .menu-btn, .p-tile, a.donate-btn { -webkit-user-select: none; user-select: none; }
.p-tabbar a:active { transform: scale(0.94); }
:is(.p-cta, .p-search, .p-theme, .p-tile, a.donate-btn):active { transform: scale(0.97); }

/* shiriti poshte si XHAM: sfond i errët 50% + turbullim 16px (njesoj si shiriti lart i blogut) */
@media (max-width: 760px) {
  .p-tabbar, html[data-theme='dark'] .p-tabbar {
    background: rgba(11, 11, 13, 0.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 16px 36px rgba(0, 0, 0, 0.3);
  }
  html[data-theme='dark'] .p-tabbar { background: rgba(10, 11, 13, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 36px rgba(0, 0, 0, 0.55); }
  /* ikonat jo-aktive pak me te ndritshme qe te lexohen edhe mbi permbajtje te çelet */
  .p-tabbar a { color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
  .p-tabbar a svg { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35)); }
  .p-tabbar a.on { text-shadow: none; }
  .p-tabbar a.on svg { filter: none; }
}
/* modaliteti i çelet: shiriti poshte i zi si me pare, me pak xham (dark mode mbetet xham 55%) */
@media (max-width: 760px) {
  html:not([data-theme='dark']) .p-tabbar { background: rgba(11, 11, 13, 0.84); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 36px rgba(0, 0, 0, 0.28); }
  html:not([data-theme='dark']) .p-tabbar a { text-shadow: none; }
  html:not([data-theme='dark']) .p-tabbar a svg { filter: none; }
}

/* shiriti poshte: xham i erret me turbullim te plote (jo transparent). Turbullimi eshte ne nje shtrese (::before)
   te prere ne formen e kapsules: ne iPhone/Safari qoshet nuk dalin me katrore gjate ngarkimit ose animacionit. */
@media (max-width: 760px) {
  .p-tabbar, html[data-theme='dark'] .p-tabbar, html:not([data-theme='dark']) .p-tabbar {
    background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; isolation: isolate;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.18);
  }
  .p-tabbar::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: rgba(14, 15, 18, 0.88);
    -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    clip-path: inset(0 round 999px); -webkit-clip-path: inset(0 round 999px);
  }
  html[data-theme='dark'] .p-tabbar::before { background: rgba(22, 23, 27, 0.82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
  /* pa backdrop-filter (shfletues te vjeter): sfond plotesisht i erret */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .p-tabbar::before { background: #111215; } }
  .p-tabbar a, .p-tabbar a svg { text-shadow: none; filter: none; }

/* ---------- shiriti poshte: i qendrueshem (pa levizje kur nderron faqe) ---------- */
@media (max-width: 760px) {
  /* gjeresi e njejte ne cdo faqe: ikonat e tjera kane madhesi fikse, vetem pilula aktive merr pjesen tjeter */
  .p-tabbar { width: min(370px, calc(100% - 20px)); max-width: none; }
  .p-tabbar a { flex: 0 0 48px; min-width: 0; padding: 0; transition: none; }
  .p-tabbar a.on { flex: 1 1 auto; min-width: 0; padding: 0 14px 0 12px; overflow: hidden; }
  .p-tabbar a.on span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* prekja: pa zvogelim te pilules (nuk "kercen"); vetem nje hije e lehte */
  .p-tabbar a:active { transform: none; background: rgba(255, 255, 255, 0.12); }
  .p-tabbar a.on:active { background: #fff; }
  html[data-theme='dark'] .p-tabbar a.on:active { background: #e4e6ea; }
}
@media (max-width: 360px) {
  .p-tabbar a { flex-basis: 42px; }
}
}

/* shiriti poshte: xham i erret — turbullim i forte, permbajtja poshte nuk lexohet (pak transparence vetem si ngjyre) */
@media (max-width: 760px) {
  .p-tabbar::before { background: rgba(14, 15, 18, 0.9); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
  html[data-theme='dark'] .p-tabbar::before { background: rgba(24, 25, 30, 0.88); }
  /* faqet pa seksion aktiv (guidat, About, Cookie policy...): ikonat ndahen njesoj ne te gjithe gjeresine */
  .p-tabbar:not(:has(a.on)) a { flex: 1 1 0; }
}

/* shiriti poshte: sfond i plote (permbajtja nuk duket pas tij) dhe pilula aktive sa teksti + ikona;
   ikonat e tjera ndajne hapesiren qe mbetet */
@media (max-width: 760px) {
  .p-tabbar::before, html[data-theme='dark'] .p-tabbar::before, html:not([data-theme='dark']) .p-tabbar::before { background: #111215; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-theme='dark'] .p-tabbar::before { background: #1b1c21; }
  .p-tabbar a, .p-tabbar:not(:has(a.on)) a { flex: 1 1 0; }
  .p-tabbar a.on { flex: 0 0 auto; max-width: 52%; padding: 0 16px 0 13px; gap: 7px; }
}
@media (max-width: 360px) {
  .p-tabbar a.on { padding: 0 13px 0 11px; gap: 6px; }
}

/* dritarja e ngarkimit kur klikohet navigimi: karte e vogel, e plote (jo transparente), me tre vijat e BMW M */
#m5-go { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; background: rgba(10, 11, 13, 0.28); animation: m5-go-in 0.18s ease both; }
#m5-go .m5-go-card {
  display: grid; justify-items: center; gap: 14px; min-width: 220px; max-width: calc(100% - 48px); padding: 24px 28px 20px; border-radius: 20px;
  background: #fff; color: #111216; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12);
  animation: m5-go-pop 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#m5-go .m5-go-mark { display: flex; gap: 5px; transform: skewX(-18deg); }
#m5-go .m5-go-mark i { display: block; width: 11px; height: 32px; border-radius: 2px; animation: m5-go-bar 1s ease-in-out infinite; }
#m5-go .m5-go-mark i:nth-child(1) { background: #56a6e6; }
#m5-go .m5-go-mark i:nth-child(2) { background: #2b45c9; animation-delay: 0.12s; }
#m5-go .m5-go-mark i:nth-child(3) { background: #e5452f; animation-delay: 0.24s; }
#m5-go b { font: 600 14px/1.2 var(--body, 'Inter Tight', system-ui, sans-serif); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#m5-go .m5-go-line { display: block; width: 140px; height: 3px; border-radius: 3px; background: #ececef; overflow: hidden; }
#m5-go .m5-go-line i { display: block; width: 40%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #56a6e6, #2b45c9 50%, #e5452f); animation: m5-go-run 1.1s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
html[data-theme='dark'] #m5-go { background: rgba(0, 0, 0, 0.4); }
html[data-theme='dark'] #m5-go .m5-go-card { background: #1a1b1f; color: #e4e6ea; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
html[data-theme='dark'] #m5-go .m5-go-line { background: #2a2b31; }
@keyframes m5-go-in { from { opacity: 0; } }
@keyframes m5-go-pop { from { opacity: 0; transform: translateY(6px) scale(0.96); } }
@keyframes m5-go-bar { 50% { transform: scaleY(0.55); } }
@keyframes m5-go-run { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { #m5-go, #m5-go .m5-go-card { animation: none; } #m5-go .m5-go-mark i, #m5-go .m5-go-line i { animation-duration: 2.4s; } }

/* ngarkimi mes faqeve: perdoret karta e vogel me xham (.m5-nav ne <head>); kjo karte e dyte fshihet qe te mos dalin dy */
#m5-go { display: none !important; }

/* pa zmadhim te faqes: pinch dhe double-tap; fushat 16px qe iPhone te mos zmadhoje kur shkruan */
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 760px) { input, select, textarea { font-size: max(16px, 1em); } }

/* shiriti poshte: skeda e zgjedhur = metal (krom i lemuar + vija te imta + shkelqim) me gjurme reale gome (drift): kokrriza e gomes, blloqet e rrotes,
   dy harqe qe zbehen ne skaje; nen tekst me te lehta + shkelqim i bardhe, qe teksti te lexohet perfekt */
@media (max-width: 760px) {
  .p-tabbar a.on, .p-tabbar a.on:active, html[data-theme='dark'] .p-tabbar a.on, html[data-theme='dark'] .p-tabbar a.on:active {
    color: #0d0e11;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 48' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='r' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1 .9' numOctaves='2' seed='7' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.6 1.25' result='a'/%3E%3CfeComposite in='SourceGraphic' in2='a' operator='in' result='g'/%3E%3CfeGaussianBlur in='g' stdDeviation='.45'/%3E%3C/filter%3E%3ClinearGradient id='f' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.14' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='.4' stop-color='%23fff' stop-opacity='.62'/%3E%3Cstop offset='.78' stop-color='%23fff' stop-opacity='.62'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='240' height='48' fill='url(%23f)'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)' filter='url(%23r)' fill='none' stroke='%2316171b' stroke-linecap='butt'%3E%3Cg stroke-opacity='.34'%3E%3Cpath d='M-10 50C50 22 130 8 250 14' stroke-width='11' stroke-dasharray='2.2 1.3'/%3E%3Cpath d='M-10 50C50 22 130 8 250 14' stroke-width='13' stroke-opacity='.35'/%3E%3C/g%3E%3Cg stroke-opacity='.28'%3E%3Cpath d='M-10 66C54 38 134 24 250 30' stroke-width='11' stroke-dasharray='2.2 1.3'/%3E%3Cpath d='M-10 66C54 38 134 24 250 30' stroke-width='13' stroke-opacity='.35'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat,
      radial-gradient(60% 90% at 22% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 1px, rgba(0, 0, 0, 0.035) 1px 2px, rgba(255, 255, 255, 0) 2px 3px),
      linear-gradient(180deg, #ffffff 0%, #eceef1 40%, #cfd3d9 52%, #e4e7ea 70%, #f4f5f7 100%);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.25), 0 3px 10px rgba(0, 0, 0, 0.35);
    text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 9px rgba(255, 255, 255, 0.85);
  }
  .p-tabbar a.on span { font-weight: 700; letter-spacing: 0.005em; }
  .p-tabbar a.on svg { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #fff); }
}