/* Seksionet e faqes kryesore: hero "Aplikacioni në dorë", "Të preferuarat", "Funksionet e Kartës", "Bashkëpunime", "Për Bizneset", "Për çfarë të përdorni kartën", "Procesi i aplikimit", "FAQ" dhe "Çfarë Po Ndodh". Ngarkohet vetëm në kreu (functions.php). */

@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

/* Ngjyrat dhe hapësirat e përbashkëta të seksioneve të kreut. */
.kh, .kp, .kf, .kpa, .kb, .ku, .kpr, .kfq, .kn {
  --kh-red: var(--kess-red, #e1282f);
  --kh-red-d: #c61f26;
  --kh-blue: var(--kess-blue, #0c3f75);
  --kh-navy: #07103b;      /* navy i kartës fizike */
  --kh-blue-c: #204299;    /* bluja e kartës fizike */
  --kh-bg: #f5f9fa;
  --kh-ink: #1c1c1c;
  --kh-muted: #5a6272;
  --kh-line: #e3e8ef;
  --kh-tint: #eef2f9;
  --kh-gut: var(--kess-gut, clamp(18px, 3vw, 48px)); /* i njëjtë me .kess-home: përmbajtja brenda --kess-max (style.css) */
  --kh-ease: cubic-bezier(.2, .7, .2, 1);
}
.kh {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(560px, calc(100svh - 77px), 860px); /* 77 = lartësia e header-it */
  margin-inline: calc(var(--kh-gut) * -1);
  overflow: hidden;
  background: var(--kh-bg);
  color: var(--kh-ink);
}
.kh + .kess-home-section { border-top: 0; }
/* Hero-ja mbaron me një vijë të drejtë te navy-ja e "Të preferuarave" (pa valë, me kërkesë të pronarit). */
.kh + .kp::before { content: none; }
.kess-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.kh-i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kh a { text-decoration: none; }
.kh-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Aplikacioni në dorë: teksti majtas, telefoni me aplikacionin djathtas ---------- */
.kh-grid { position: relative; z-index: 2; flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 96px); align-items: center; padding: clamp(24px, 3vw, 40px) var(--kh-gut) clamp(40px, 5vw, 72px); }
.kh-left { display: grid; justify-items: start; align-content: center; min-width: 0; }
.kh-head { display: grid; gap: 16px; justify-items: start; }
.kh-eyebrow { margin: 0; color: var(--kh-muted); font-size: 13px; font-weight: 500; line-height: 1.4; }
.kh h1 { max-width: 14ch; margin: 0; color: var(--kh-blue); font-size: clamp(34px, 4.3vw, 62px); font-weight: 600; letter-spacing: -.025em; line-height: 1.06; text-wrap: balance; }
.kh h1 span { display: block; color: var(--kh-red); }
.kh-lead { max-width: 44ch; margin: 18px 0 0; color: var(--kh-muted); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; }

/* ---------- Butoni dhe fusha e emrit ---------- */
.kh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 24px; border: 1.5px solid transparent; border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; transition: transform .2s var(--kh-ease), background .2s, border-color .2s; }
.kh-btn .kh-i { font-size: 18px; }
.kh-btn--red { background: var(--kh-red); color: #fff; box-shadow: 0 12px 26px -14px rgba(225, 40, 47, .9); }
.kh-btn--red:hover { background: var(--kh-red-d); color: #fff; transform: translateY(-1px); }
.kh-btn--red:active { transform: scale(.98); }
.kh-btn--red .kh-arr { transition: transform .2s var(--kh-ease); }
.kh-btn--red:hover .kh-arr { transform: translateX(3px); }
.kh-try { display: grid; width: 100%; max-width: 520px; margin-top: 32px; }
.kh-try-row { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 7px 0 18px; border: 1.5px solid var(--kh-line); border-radius: 999px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.kh-try-row:focus-within { border-color: var(--kh-navy); box-shadow: 0 0 0 4px rgba(7, 16, 59, .07); }
.kh-try-in { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; height: 100%; color: var(--kh-muted); font-size: 20px; }
.kh-try-in input { flex: 1; width: 0; min-width: 9ch; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--kh-ink); font: 500 16px/1 "Poppins", "Segoe UI", system-ui, sans-serif; }
.kh-try-in input::placeholder { color: var(--kh-muted); font-weight: 400; }
.kh-try-row .kh-btn { height: 46px; }
.kh-try-row .kh-cta-l { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Veprimi dytësor: lidhje e vogël, jo buton. */
.kh-dl { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; color: var(--kh-blue); font-size: 14.5px; font-weight: 500; text-underline-offset: 4px; }
.kh-dl:hover { color: var(--kh-blue); text-decoration: underline; }
.kh-dl .kh-i { font-size: 17px; }

/* ---------- Skena: karta pas, telefoni përpara (në telefon vetëm telefoni). Përmasat bazë --kh-sw × 600 px; --ps i zvogëlon (home.js). ---------- */
.kh-stage { --ps: 1; --kh-sw: 450; position: relative; display: grid; place-items: center; min-width: 0; isolation: isolate; }
/* Dritë e butë e kuqe dhe blu pas telefonit: ngjyrë pa lëvizje. */
.kh-stage::before { content: ""; position: absolute; inset: -6% -10%; z-index: -1; background: radial-gradient(38% 34% at 66% 36%, rgba(225, 40, 47, .14), rgba(225, 40, 47, 0) 70%), radial-gradient(44% 38% at 34% 66%, rgba(32, 66, 153, .18), rgba(32, 66, 153, 0) 72%); pointer-events: none; }
.kh-persp { position: relative; width: calc(var(--kh-sw) * var(--ps) * 1px); height: calc(600px * var(--ps)); perspective: 1600px; animation: kh-in .8s var(--kh-ease) both; }
@keyframes kh-in { from { opacity: 0; transform: translateY(18px); } }
.kh-tilt { position: absolute; top: 50%; left: 50%; width: calc(var(--kh-sw) * 1px); height: 600px; margin: -300px 0 0 calc(var(--kh-sw) * -.5px); transform: scale(var(--ps)) rotateX(var(--kh-rx, 0deg)) rotateY(var(--kh-ry, 0deg)); }
/* Pa "preserve-3d": me të, Chrome i jep klikimin ofertës poshtë butonit QR. Karta dhe telefoni anojnë si një plan. */

/* Karta fizike: del nga pas telefonit, me emrin që shkruan vizitori. */
.kh-card { position: absolute; top: 236px; left: 0; width: 290px; aspect-ratio: 85.6 / 54; overflow: hidden; container-type: inline-size; border-radius: 13px; box-shadow: 0 30px 40px -20px rgba(7, 16, 59, .45), 0 0 0 1px rgba(7, 16, 59, .06); transform: rotate(-9deg); animation: kh-card-in .9s .2s var(--kh-ease) both; }
@keyframes kh-card-in { from { opacity: 0; transform: translateX(90px) rotate(-2deg); } }
.kh-card > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; pointer-events: none; user-select: none; -webkit-user-drag: none; }
/* Pozicionet sipas shabllonit të printimit (templates/print-template.php, 85,6 × 54 mm). */
.kh-name { position: absolute; top: 52%; left: 7%; color: #fff; font: 5.4cqw/1 "Bebas Neue", sans-serif; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; transform: translateY(-46%); }
.kh-name.is-new { animation: kh-name .45s var(--kh-ease); }
@keyframes kh-name { from { opacity: .2; transform: translate(-6px, -46%); } to { opacity: 1; transform: translateY(-46%); } }
.kh-nim, .kh-val { position: absolute; color: var(--kh-navy); font: 3.9cqw/1 "Bebas Neue", sans-serif; letter-spacing: .03em; transform: translateY(-46%); }
.kh-nim { top: 65.2%; left: 31.4%; }
.kh-val { top: 72.6%; left: 23.4%; }
.kh-nr { position: absolute; top: 86.8%; left: 19.8%; color: #fff; font: 5.4cqw/1 "Bebas Neue", sans-serif; letter-spacing: .02em; white-space: nowrap; transform: translate(-50%, -46%); }
.kh-photo { position: absolute; top: 61.1%; left: 74.96%; display: grid; place-items: center; width: 37.9%; aspect-ratio: 1; overflow: hidden; border: .95cqw solid var(--kh-blue-c); border-radius: 50%; background: var(--kh-tint); color: #9aa8c7; transform: translate(-50%, -50%); }
.kh-photo .kh-i { width: 52%; height: 52%; stroke-width: 1.4; }
/* Inicialet: në kartë, në avatarin e aplikacionit dhe te kodi QR. */
.kh-ini { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.85); transition: opacity .3s, transform .4s var(--kh-ease); }
.has-name > .kh-ini { opacity: 1; transform: none; }
.kh-photo .kh-ini { background: var(--kh-tint); color: var(--kh-navy); font: 600 11cqw/1 "Poppins", sans-serif; letter-spacing: -.03em; }

/* Telefoni: pamja e Kreut të aplikacionit (ngjyrat nga Theme.ts i aplikacionit). */
.kh-phone { position: absolute; top: 16px; right: 0; width: 262px; height: 548px; padding: 9px; border-radius: 44px; background: #0e0f14; box-shadow: 0 50px 80px -34px rgba(7, 16, 59, .55), 0 18px 30px -18px rgba(7, 16, 59, .35), inset 0 0 0 1.5px #2a2c35; }
.kh-phone::before { content: ""; position: absolute; top: 17px; left: 50%; z-index: 9; width: 80px; height: 22px; border-radius: 20px; background: #0e0f14; transform: translateX(-50%); }
.kh-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 35px; background: #f7f9fc; color: #1e293b; font-family: "Poppins", "Segoe UI", system-ui, sans-serif; line-height: 1.3; }
.kh-sbar { position: absolute; top: 0; right: 0; left: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 22px; font-size: 11px; font-weight: 600; }
.kh-sbar-i { display: flex; align-items: flex-end; gap: 2px; }
.kh-sbar-i i { display: block; width: 3px; border-radius: 1px; background: currentColor; }
.kh-sbar-i i:nth-child(1) { height: 4px; }
.kh-sbar-i i:nth-child(2) { height: 6px; }
.kh-sbar-i i:nth-child(3) { height: 8px; }
.kh-sbar-i b { display: block; width: 20px; height: 10px; margin-left: 5px; border: 1.5px solid currentColor; border-radius: 3px; box-shadow: inset 12px 0 0 -1px currentColor; }
.kh-screen:has(.kh-sheet.is-open) .kh-sbar { color: #fff; }
.kh-app { position: absolute; inset: 40px 0 0; display: flex; flex-direction: column; gap: 12px; padding: 6px 12px 0; }

.kh-app-top { display: flex; align-items: center; gap: 8px; }
.kh-av { position: relative; display: grid; flex: none; place-items: center; width: 34px; height: 34px; overflow: hidden; border: 1.5px solid #e2e8f0; border-radius: 50%; background: #fff; color: #94a3b8; font-size: 16px; }
.kh-av .kh-ini { background: var(--kh-blue); color: #fff; font-size: 12px; font-weight: 600; }
.kh-hello { display: grid; flex: 1; min-width: 0; }
.kh-greet { color: #64748b; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.kh-app-name { overflow: hidden; color: #1e293b; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.kh-app-name.is-new { animation: kh-pop .4s var(--kh-ease); }
@keyframes kh-pop { from { opacity: .3; transform: translateY(3px); } }
.kh-app-name.is-empty { color: #a7b1c2; font-weight: 600; }
.kh-round { position: relative; display: grid; flex: none; place-items: center; width: 30px; height: 30px; border: 1px solid #e2e8f0; border-radius: 50%; background: #fff; color: #1e293b; font-size: 13px; }
.kh-round--dot::after { content: ""; position: absolute; top: 6px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: #ef4444; }

.kh-coins { display: flex; gap: 10px; padding: 12px; border: 1px solid #d9f99d; border-radius: 18px; background: #e4f5d4; }
.kh-coins-l { display: grid; flex: 1; justify-items: start; gap: 4px; min-width: 0; }
.kh-coins-lab { padding: 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, .65); color: #3f6212; font-size: 7px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.kh-coins-n { display: flex; align-items: center; gap: 6px; color: #3f6212; font-size: 24px; font-weight: 800; line-height: 1.1; }
.kh-coin { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fde68a, #f59e0b 72%); box-shadow: inset 0 -2px 0 rgba(180, 83, 9, .35); }
.kh-coins-l small { color: #4d7c0f; font-size: 9px; font-weight: 600; }
.kh-coins-btn { display: inline-flex; align-items: center; gap: 4px; height: 22px; margin-top: 2px; padding: 0 9px; border-radius: 999px; background: #fff; color: #3f6212; font-size: 8px; font-weight: 700; }
.kh-coins-btn .kh-i { font-size: 9px; stroke-width: 3; }
.kh-loyal { display: grid; flex: none; align-content: center; justify-items: center; gap: 3px; width: 64px; padding: 8px 4px; border: 1px solid #ecfccb; border-radius: 14px; background: rgba(255, 255, 255, .55); text-align: center; }
.kh-loyal i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(#facc15, #f59e0b); }
.kh-loyal .kh-i { font-size: 14px; fill: #fff; stroke: none; }
.kh-loyal b { color: #1e293b; font-size: 12px; font-weight: 700; line-height: 1; }
.kh-loyal small { color: #3f6212; font-size: 6.5px; font-weight: 700; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; }

.kh-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.kh-cats li { display: grid; justify-items: center; gap: 5px; color: #1e293b; font-size: 8.5px; font-weight: 600; }
.kh-cats span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-size: 19px; }

.kh-sec { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.kh-sec b { color: #1e293b; font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.kh-sec span { padding: 4px 9px; border-radius: 999px; background: #f0f9ff; color: #0284c7; font-size: 8px; font-weight: 700; }
/* Ofertat reale: rrëshqiten anash si në aplikacion; secila hap faqen e biznesit. */
.kh-offers { display: flex; gap: 10px; margin: -6px -12px 0; padding: 6px 12px 80px; overflow-x: auto; overscroll-behavior-x: contain; list-style: none; scroll-padding-inline: 12px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.kh-offers::-webkit-scrollbar { display: none; }
.kh-offers li { flex: none; width: 150px; scroll-snap-align: start; }
.kh-offer { display: grid; gap: 4px; padding-bottom: 9px; overflow: hidden; border-radius: 16px; background: #fff; color: #1e293b; box-shadow: 0 8px 18px -10px rgba(15, 23, 42, .28), 0 0 0 1px #eef2f7; -webkit-user-drag: none; }
.kh-offer:hover { color: #1e293b; }
.kh-offer:focus-visible { outline: 2px solid var(--kh-red); outline-offset: 2px; }
.kh-offer-m { position: relative; display: block; aspect-ratio: 16 / 10; margin-bottom: 4px; background: #0f172a; }
.kh-offer-img, .kh-offer-no { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.kh-offer-no { display: grid; place-items: center; background: var(--kh-blue-c); color: #fff; font-size: 28px; }
.kh-offer-b { position: absolute; top: 7px; left: 7px; padding: 3px 7px; border-radius: 999px; background: #2563eb; color: #fff; font-size: 7.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.kh-offer-t { overflow: hidden; padding: 0 9px; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.kh-offer-c { justify-self: start; max-width: calc(100% - 18px); margin: 0 9px; padding: 2px 6px; overflow: hidden; border-radius: 6px; background: #ecfccb; color: #4d7c0f; font-size: 6.5px; font-weight: 700; letter-spacing: .05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.kh-offer-v { display: flex; align-items: center; justify-content: center; gap: 4px; height: 22px; margin: 3px 9px 0; border-radius: 8px; background: #f0f9ff; color: #0369a1; font-size: 8px; font-weight: 700; }
.kh-offer-v .kh-i { font-size: 9px; }

.kh-tabs { position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; height: 62px; padding: 0 6px 12px; border-top: 1px solid #eef2f7; background: rgba(255, 255, 255, .97); }
.kh-tab { display: grid; justify-items: center; gap: 3px; color: #94a3b8; font-size: 7.5px; font-weight: 600; }
.kh-tab .kh-i { font-size: 16px; }
.kh-tab.is-on { color: #1e293b; font-weight: 700; }
/* Butoni QR: i vetmi kontroll i telefonit. Një unazë e butë dy herë pas hyrjes, pastaj qetë. */
.kh-fab { position: relative; justify-self: center; display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 2px; padding: 0; border: 4px solid #fff; border-radius: 50%; background: linear-gradient(135deg, #a3e635, #65a30d); color: #1a2e05; font-size: 22px; cursor: pointer; box-shadow: 0 10px 20px -8px rgba(101, 163, 13, .7); transform: translateY(-14px); transition: transform .2s var(--kh-ease); }
.kh-fab:hover { transform: translateY(-16px) scale(1.04); }
.kh-fab:focus-visible { outline: 3px solid var(--kh-red); outline-offset: 2px; }
.kh-fab::after { content: ""; position: absolute; inset: -4px; border: 2px solid #a3e635; border-radius: 50%; opacity: 0; pointer-events: none; animation: kh-ring 1.6s 1.6s 2 var(--kh-ease); }
@keyframes kh-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.55); } }

/* Ekrani i kodit QR, si te aplikacioni (DigitalCardModal). */
.kh-sheet { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; padding: 48px 16px 0; background: rgba(11, 15, 25, .9); color: #fff; text-align: center; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; will-change: opacity; }
.kh-sheet.is-open { opacity: 1; visibility: visible; transition: opacity .3s; }
.kh-sheet-x { position: absolute; top: 44px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 15px; cursor: pointer; }
.kh-sheet-x:focus-visible { outline: 2px solid #a3e635; outline-offset: 2px; }
.kh-qcard { display: grid; justify-items: center; gap: 12px; width: 100%; margin-top: 30px; padding: 16px 14px 14px; border-radius: 24px; background: linear-gradient(160deg, #1e293b, #0f172a); box-shadow: 0 0 0 5px rgba(32, 66, 153, .5), 0 24px 40px -16px rgba(0, 0, 0, .8); transform: translateY(26px) scale(.96); transition: transform .45s var(--kh-ease); }
.kh-sheet.is-open .kh-qcard { transform: none; }
.kh-qcard-t { display: inline-flex; align-items: center; gap: 6px; font-size: 8px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.kh-qcard-t::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #a3e635; }
.kh-qcode { position: relative; display: block; width: 140px; aspect-ratio: 1; padding: 10px; overflow: hidden; border-radius: 14px; background: #fff; }
.kh-qcode svg { display: block; width: 100%; height: 100%; }
/* Vija e skanimit lëviz me transform në shtresën e vet: "top" e rivizatonte gjithë telefonin në çdo kuadër dhe dridhej. */
.kh-scan { position: absolute; top: 11px; right: 6px; left: 6px; height: 2px; border-radius: 2px; background: #a3e635; box-shadow: 0 0 10px 2px rgba(163, 230, 53, .6); will-change: transform; }
.kh-sheet.is-open .kh-scan { animation: kh-scan 2.2s linear infinite; }
@keyframes kh-scan { from { transform: translateY(0); } to { transform: translateY(115px); } }
.kh-qwho { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: rgba(255, 255, 255, .05); text-align: left; }
.kh-qav { position: relative; display: grid; flex: none; place-items: center; width: 34px; height: 34px; overflow: hidden; border: 2px solid #a3e635; border-radius: 10px; }
.kh-qav .kh-ini { color: #fff; font-size: 11px; font-weight: 700; }
.kh-qtx { display: grid; min-width: 0; line-height: 1.35; }
.kh-qtx b { overflow: hidden; color: #fff; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.kh-qtx b.is-empty { color: rgba(255, 255, 255, .55); }
.kh-qtx small { color: #94a3b8; font-size: 7.5px; }
.kh-qtx em { color: #a3e635; font-size: 8px; font-style: normal; font-weight: 700; }
.kh-sheet-h { margin-top: 18px; font-size: 13px; font-weight: 700; }
.kh-sheet-p { margin: 4px 0 0; color: #94a3b8; font-size: 9px; line-height: 1.5; }
.kh-sheet-n { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #cbd5e1; font-size: 8.5px; }
.kh-sheet-n b { color: #fff; font-variant-numeric: tabular-nums; }

/* ---------- Vala kuq-blu e kartës: përdoret nga "Të preferuarat" ---------- */
.kw { display: block; width: 100%; }
.kw-red { fill: #e1282f; }
.kw-blue { fill: #204299; }
.kw-fill { fill: #07103b; }

/* =========================================================
   Telefon: shumica e vizitorëve. Butoni "Apliko online" del pa rrëshqitur faqen; telefoni vjen poshtë tij.
   ========================================================= */
@media (max-width: 900px) {
  .kh { min-height: 0; }
  .kh-grid { grid-template-columns: minmax(0, 1fr); padding: 20px var(--kh-gut) 32px; }
  .kh-left { display: contents; }
  .kh-head { order: 1; gap: 8px; }
  .kh h1 { max-width: none; font-size: clamp(28px, 8.4vw, 36px); line-height: 1.1; }
  /* Teksti hyrës: i shkurtër nën titull, i gjatë poshtë butonit, që të mos e shtyjë "Apliko" poshtë. Telefoni vjen i fundit. */
  .kh-lead { order: 5; max-width: none; margin: 14px 0 0; font-size: 15px; }
  .kh--short .kh-lead { order: 2; margin-top: 12px; }
  .kh-try { order: 3; max-width: none; margin-top: 18px; }
  .kh-try-row { flex-direction: column; align-items: stretch; gap: 10px; height: auto; padding: 0; border: 0; border-radius: 0; background: none; }
  .kh-try-row:focus-within { box-shadow: none; }
  .kh-try-in { flex: none; height: 56px; padding: 0 16px; border: 1.5px solid var(--kh-line); border-radius: 16px; background: #fff; transition: border-color .2s, box-shadow .2s; }
  .kh-try-in:focus-within { border-color: var(--kh-navy); box-shadow: 0 0 0 4px rgba(7, 16, 59, .07); }
  .kh-try-row .kh-btn { width: 100%; height: 54px; border-radius: 16px; font-size: 16px; }
  .kh-try-row .kh-cta-l { max-width: none; }
  .kh-dl { order: 4; justify-self: center; margin-top: 4px; }
  /* Në telefon vetëm aplikacioni, në qendër: karta e vogël pas tij nuk dukej mirë. Pa anim 3D, vetëm zmadhim. */
  /* --ps 1.1: vlera që fit() llogarit në shumicën e telefonave (350 px e lart), që faqja të mos rillogaritet pas ngarkimit. */
  .kh-stage { --ps: 1.1; --kh-sw: 300; order: 6; margin-top: 18px; }
  .kh-card { display: none; }
  .kh-phone { right: 19px; }
  .kh-tilt { transform: scale(var(--ps)); }
  .kh-stage::before { inset: 0 -20%; }
}
@media (max-width: 380px) {
  .kh-grid { padding-top: 14px; }
  .kh-lead { font-size: 14.5px; line-height: 1.5; }
  .kh-try { margin-top: 12px; }
  .kh-try-in, .kh-try-row .kh-btn { height: 52px; }
}
/* Tablet në këmbë: fusha dhe butoni jo më të gjerë se në desktop. */
@media (min-width: 600px) and (max-width: 900px) {
  .kh-try { max-width: 560px; }
  .kh-dl { justify-self: start; }
}
/* Telefon horizontal (p.sh. 812×375): teksti dhe butoni majtas, telefoni djathtas. */
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 520px) {
  .kh { min-height: 0; }
  .kh-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); column-gap: 24px; padding: 12px var(--kh-gut) 24px; }
  .kh-left { display: grid; align-content: center; }
  .kh-eyebrow, .kh-lead { display: none; }
  .kh h1 { font-size: clamp(26px, 3.6vw, 30px); } /* 26 px në 667×375: butoni mbetet mbi njoftimin e privatësisë */
  /* Fusha dhe butoni në një rresht, si në desktop: lartësia e ekranit nuk mjafton për dy. */
  .kh-try { margin-top: 12px; }
  .kh-try-row { flex-direction: row; align-items: center; gap: 8px; height: 56px; padding: 0 5px 0 16px; border: 1.5px solid var(--kh-line); border-radius: 999px; background: #fff; }
  .kh-try-row:focus-within { border-color: var(--kh-navy); box-shadow: 0 0 0 4px rgba(7, 16, 59, .07); }
  .kh-try-in { flex: 1; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; }
  .kh-try-in:focus-within { box-shadow: none; }
  .kh-try-row .kh-btn { width: auto; height: 46px; border-radius: 999px; font-size: 15px; }
  .kh-try-row .kh-cta-l { max-width: 16ch; }
  .kh-dl { justify-self: start; }
  .kh-stage { grid-row: 1; grid-column: 2; margin-top: 0; }
}
/* Telefonat e ulët në këmbë (320×640, 360×740, 390×664, 414×736 …): butoni mbi njoftimin e privatësisë. */
@media (max-width: 599px) and (max-height: 780px) {
  .kh-eyebrow { display: none; }
  .kh--short .kh-lead { order: 5; margin-top: 14px; }
  .kh-try-in, .kh-try-row .kh-btn { height: 50px; }
}

/* =========================================================
   Të preferuarat: 3 përfitimet më të votuara (ideja B)
   ========================================================= */
.kp { position: relative; margin-inline: calc(var(--kh-gut) * -1); overflow-x: clip; background: var(--kh-navy); color: #fff; }
.kp::before { content: ""; position: absolute; top: 0; right: var(--kh-gut); left: var(--kh-gut); height: 1px; background: rgba(255, 255, 255, .12); }
.kp + .kess-home-section { border-top: 0; }
.kp a { text-decoration: none; }
.kp-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 88px); align-items: center; padding: clamp(48px, 6vw, 88px) var(--kh-gut) clamp(8px, 2vw, 24px); }
.kp-copy { display: grid; gap: 20px; justify-items: start; min-width: 0; }
.kp-eyebrow { margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--kh-red); color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
.kp h2 { max-width: 16ch; margin: 0; color: #fff; font-size: clamp(28px, 3.4vw, 50px); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; }
.kp-lead { max-width: 46ch; margin: 0; color: rgba(255, 255, 255, .76); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7; }
.kp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: clamp(24px, 4vw, 56px); width: 100%; margin: 6px 0 4px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); }
.kp-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; }
.kp-stats dd { margin: 0; font-size: clamp(38px, 4vw, 58px); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; }
.kp-stats dt { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .72); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.kp-stats dt .kh-i { font-size: 15px; }
.kp-btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 999px; background: #fff; color: var(--kh-navy); font-size: 15px; font-weight: 600; transition: background .2s, color .2s, transform .2s var(--kh-ease); }
.kp-btn .kh-i { font-size: 18px; transition: transform .2s var(--kh-ease); }
.kp-btn:hover { background: var(--kh-red); color: #fff; transform: translateY(-1px); }
.kp-btn:hover .kh-i { transform: translateX(3px); }

/* Tufa e kartave: #1 përpara, të tjerat anash si në dorë. */
.kp-deckwrap { display: grid; gap: 22px; justify-items: center; min-width: 0; }
.kp-deck { position: relative; width: 100%; height: 480px; touch-action: pan-y pinch-zoom; }
.kp-card { --x: 0%; --y: 0px; --r: 0deg; --s: 1; position: absolute; top: 0; left: 50%; z-index: 1; width: min(360px, 60%); height: 450px; transform: translateX(calc(-50% + var(--x))) translateY(var(--y)) rotate(var(--r)) scale(var(--s)); transition: transform .6s var(--kh-ease), opacity .4s, visibility .4s; }
.kp-card[data-pos="0"] { z-index: 3; }
.kp-card[data-pos="1"] { --x: 48%; --y: 28px; --r: 6deg; --s: .86; z-index: 2; }
.kp-card[data-pos="2"] { --x: -48%; --y: 28px; --r: -6deg; --s: .86; }
/* Kartat pas të tretës nuk duken; "visibility" i heq edhe nga Tab-i i tastierës. */
.kp-card:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]) { --s: .8; visibility: hidden; opacity: 0; pointer-events: none; }
.kp-card.is-dragging { transition: none; }
.kp-link { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 22px; background: #fff; color: var(--kh-ink); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .65); -webkit-user-drag: none; user-select: none; }
.kp-link::after { content: ""; position: absolute; inset: 0; background: var(--kh-navy); opacity: 0; transition: opacity .4s; pointer-events: none; }
.kp-card:not([data-pos="0"]) .kp-link::after { opacity: .28; }
.kp-card:not([data-pos="0"]) .kp-link:hover::after { opacity: .12; }
.kp-link:hover { color: var(--kh-ink); }
.kp-media { position: relative; display: block; flex: none; aspect-ratio: 16 / 9; background: var(--kh-tint); }
/* Foto absolute: aspect-ratio i kutisë mbetet 16:9, çfarëdo përmasash të ketë fotoja. */
.kp-img, .kp-noimg { position: absolute; inset: 0; }
.kp-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.kp-noimg { display: grid; place-items: center; width: 100%; height: 100%; background: var(--kh-blue-c); color: #fff; font-size: 56px; }
.kp-rank { position: absolute; top: 12px; left: 12px; display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 999px; background: var(--kh-navy); color: #fff; font-size: 17px; font-weight: 600; }
.kp-card:first-child .kp-rank { background: var(--kh-red); }
.kp-badge { position: absolute; top: 12px; right: 12px; padding: 8px 12px; border-radius: 999px; background: var(--kh-red); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.2; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); }
.kp-logo { position: absolute; bottom: -24px; left: 18px; width: 52px; height: 52px; border: 2px solid #fff; border-radius: 14px; background: #fff; object-fit: contain; box-shadow: 0 8px 20px -10px rgba(7, 16, 59, .5); }
.kp-body { display: flex; flex: 1; flex-direction: column; gap: 6px; min-height: 0; padding: 32px 20px 18px; }
.kp-cat, .kp-name, .kp-text { flex: none; }
.kp-cat { display: inline-flex; align-items: center; gap: 6px; color: var(--kh-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.kp-cat .kh-i { color: var(--kh-blue); font-size: 14px; }
.kp-name { color: var(--kh-navy); font-size: 21px; font-weight: 600; line-height: 1.25; }
.kp-text { display: -webkit-box; overflow: hidden; color: var(--kh-muted); font-size: 14px; line-height: 1.55; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kp-votes { display: grid; gap: 7px; margin-top: auto; padding-top: 10px; }
.kp-votes-n { display: inline-flex; align-items: center; gap: 6px; color: var(--kh-muted); font-size: 13px; }
.kp-votes-n b { color: var(--kh-ink); font-size: 16px; font-weight: 600; }
.kp-votes-n .kh-i { color: var(--kh-red); font-size: 16px; }
.kp-bar { display: block; height: 3px; overflow: hidden; border-radius: 3px; background: var(--kh-line); }
.kp-bar i { display: block; height: 100%; border-radius: 3px; background: var(--kh-red); }
.kp-more { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--kh-line); color: var(--kh-navy); font-size: 14px; font-weight: 600; }
.kp-more .kh-i { transition: transform .2s var(--kh-ease); }
.kp-card[data-pos="0"] .kp-link:hover .kp-more { color: var(--kh-red); }
.kp-card[data-pos="0"] .kp-link:hover .kp-more .kh-i { transform: translateX(3px); }
.kp-link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.kp-ctrl { display: flex; align-items: center; gap: 14px; width: min(360px, 100%); }
.kp-nav { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid rgba(255, 255, 255, .3); border-radius: 50%; background: none; color: #fff; font-size: 18px; cursor: pointer; }
.kp-nav:hover { border-color: #fff; }
.kp-prog { flex: 1; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.kp-prog i { display: block; height: 100%; background: var(--kh-red); transform: scaleX(0); transform-origin: left; }
.kp-count { min-width: 44px; color: rgba(255, 255, 255, .72); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.kp-count b { color: #fff; font-weight: 600; }
/* Vala zbret 2px poshtë seksionit: skaji i saj bie mbi të bardhën, pa vijë navy në kufi. */
.kp-wave { height: 200px; transform: translateY(2px); }
.kp .kw-fill { fill: #fff; }

@media (max-width: 900px) {
  .kp-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 44px var(--kh-gut) 0; }
  .kp-copy { display: contents; }
  .kp-eyebrow { order: 1; justify-self: start; }
  .kp h2 { order: 2; max-width: none; margin-top: 14px; }
  .kp-lead { order: 3; margin-top: 12px; }
  .kp-deckwrap { order: 4; margin-top: 26px; }
  .kp-stats { order: 5; margin-top: 30px; }
  .kp-btn { order: 6; justify-content: center; width: 100%; height: 54px; margin-top: 22px; border-radius: 16px; font-size: 16px; }
  .kp-deck { height: 440px; }
  .kp-card { width: min(330px, 84%); height: 420px; }
  .kp-card[data-pos="1"] { --x: 22%; --y: 18px; --r: 4deg; --s: .9; }
  .kp-card[data-pos="2"] { --x: -22%; --y: 18px; --r: -4deg; --s: .9; }
  .kp-name { font-size: 19px; }
  .kp-wave { height: 110px; margin-top: 8px; }
}

/* =========================================================
   Funksionet e Kartës: 3 funksionet si 3 kuti me të dhëna reale (pa telefon: ai është te hero-ja)
   ========================================================= */
.kf { padding: clamp(56px, 6vw, 96px) 0 clamp(48px, 5vw, 88px); }
.kf a { text-decoration: none; }
/* Koka e seksionit (etiketa, titulli, teksti hyrës); e përdorin edhe "Për çfarë të përdorni kartën", "Procesi i aplikimit" dhe "Çfarë Po Ndodh". */
.kf-head, .ku-head, .kpr-head, .kn-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(28px, 5vw, 88px); align-items: end; }
.kf-head-t, .ku-head-t, .kpr-head-t, .kn-head-t { display: grid; gap: 16px; justify-items: start; }
.kf-eyebrow, .ku-eyebrow, .kpr-eyebrow, .kn-eyebrow { margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--kh-red); color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
.kf h2, .ku h2, .kpr h2, .kn h2 { margin: 0; color: var(--kh-blue); font-size: clamp(28px, 3.4vw, 50px); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; }
.kf-lead, .ku-lead, .kn-lead { max-width: 56ch; margin: 0; color: var(--kh-muted); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7; }

.kf-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(28px, 3.5vw, 48px); }
.kf-tile { display: flex; flex-direction: column; gap: 24px; min-width: 0; padding: clamp(22px, 2.2vw, 32px); border: 1px solid var(--kh-line); border-radius: 28px; background: var(--kh-bg); }
.kf-tile-tx { display: grid; gap: 8px; justify-items: start; }
.kf-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 14px; background: #fff; color: var(--kh-red); font-size: 20px; box-shadow: 0 8px 18px -12px rgba(7, 16, 59, .35); }
.kf-tile h3 { margin: 0; color: var(--kh-navy); font-size: clamp(19px, 1.5vw, 22px); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.kf-tile p { margin: 0; color: var(--kh-muted); font-size: 15px; line-height: 1.6; }

/* 1 · Kategoritë dhe bizneset partnere. */
.kf-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kf-cats li { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border: 1px solid var(--kh-line); border-radius: 999px; background: #fff; color: var(--kh-ink); font-size: 13px; font-weight: 500; white-space: nowrap; }
.kf-cats .kh-i { color: var(--kh-blue); font-size: 15px; }
.kf-cats .kf-cats-more { border-style: dashed; background: none; color: var(--kh-muted); }
.kf-partners { display: flex; align-items: center; gap: 14px; margin-top: auto; padding: 12px 16px 12px 12px; border: 1px solid var(--kh-line); border-radius: 18px; background: #fff; color: var(--kh-navy); transition: border-color .2s, box-shadow .2s; }
.kf-partners:hover { border-color: var(--kh-navy); box-shadow: 0 14px 28px -20px rgba(7, 16, 59, .45); color: var(--kh-navy); }
.kf-logos { display: flex; flex: none; }
.kf-logos img { width: 36px; height: 36px; border: 2px solid #fff; border-radius: 50%; background: #fff; object-fit: cover; box-shadow: 0 4px 10px -6px rgba(7, 16, 59, .45); }
.kf-logos img + img { margin-left: -10px; }
.kf-partners-t { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.kf-partners-t b { font-size: 14.5px; font-weight: 600; }
.kf-partners-t small { color: var(--kh-muted); font-size: 12.5px; }
.kf-arr { flex: none; font-size: 18px; transition: transform .2s var(--kh-ease); }
.kf-partners:hover .kf-arr { transform: translateX(3px); }

/* 2 · Karta: kutia navy, karta kthehet me butonat "Karta / Kodi QR". */
.kf-tile--card { border-color: transparent; background: var(--kh-navy); color: #fff; }
.kf-tile--card .kf-ic { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none; }
.kf-tile--card h3 { color: #fff; }
.kf-tile--card p { color: rgba(255, 255, 255, .72); }
.kf-flip { width: min(100%, 340px); margin: auto auto 0; container-type: inline-size; perspective: 1400px; }
.kf-card { position: relative; aspect-ratio: 85.6 / 54; transform-style: preserve-3d; transition: transform .8s var(--kh-ease); }
.kf-card.is-back { transform: rotateY(180deg); }
/* Hija është te faqet: një "filter" mbi .kf-card do ta rrafshonte kthimin 3D. */
.kf-face { position: absolute; inset: 0; overflow: hidden; border-radius: 4.6cqw; background: #fff; box-shadow: 0 26px 40px -18px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kf-face > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.kf-back { transform: rotateY(180deg); }
.kf-qr { position: absolute; top: 35.4%; left: 81.8%; width: 22.4%; aspect-ratio: 1; background: #fff; transform: translate(-50%, -50%); }
.kf-qr svg { display: block; width: 100%; height: 100%; }
.kf-seg { display: inline-flex; align-self: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.kf-seg-b { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, .78); font: 600 13.5px/1 "Poppins", "Segoe UI", system-ui, sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.kf-seg-b .kh-i { font-size: 15px; }
.kf-seg-b:hover { color: #fff; }
.kf-seg-b[aria-pressed="true"] { background: #fff; color: var(--kh-navy); }
.kf-seg-b:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* 3 · Mundësia më e fundit. */
.kf-job { display: grid; gap: 9px; margin-top: auto; padding: 18px; border: 1px solid var(--kh-line); border-radius: 20px; background: #fff; color: var(--kh-ink); box-shadow: 0 18px 34px -26px rgba(7, 16, 59, .4); transition: border-color .2s, box-shadow .2s; }
a.kf-job:hover { border-color: var(--kh-navy); color: var(--kh-ink); box-shadow: 0 20px 36px -22px rgba(7, 16, 59, .45); }
.kf-job-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kf-job-type { padding: 4px 10px; border-radius: 999px; background: #fdecec; color: var(--kh-red-d); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.kf-job-new { display: inline-flex; align-items: center; gap: 5px; color: var(--kh-muted); font-size: 12px; }
.kf-job-new .kh-i { font-size: 14px; }
.kf-job-t { margin-top: 2px; color: var(--kh-navy); font-size: 19px; font-weight: 600; line-height: 1.3; }
.kf-job-m { display: flex; align-items: center; gap: 8px; color: var(--kh-muted); font-size: 13.5px; }
.kf-job-m .kh-i { color: var(--kh-blue); font-size: 15px; }
.kf-job-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; margin-top: 6px; border-radius: 999px; background: var(--kh-red); color: #fff; font-size: 14px; font-weight: 600; }
.kf-job-btn .kh-i { font-size: 16px; transition: transform .2s var(--kh-ease); }
a.kf-job:hover .kf-job-btn .kh-i { transform: translateX(3px); }

.kf-btn { display: flex; align-items: center; gap: 10px; width: fit-content; height: 50px; margin: clamp(24px, 3vw, 40px) auto 0; padding: 0 24px; border-radius: 999px; background: var(--kh-navy); color: #fff; font-size: 15px; font-weight: 600; transition: background .2s, transform .2s var(--kh-ease); }
.kf-btn .kh-i { font-size: 18px; transition: transform .2s var(--kh-ease); }
.kf-btn:hover { background: var(--kh-red); color: #fff; transform: translateY(-1px); }
.kf-btn:hover .kh-i { transform: translateX(3px); }

@media (max-width: 1100px) {
  .kf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kf-tile--perks { grid-column: 1 / -1; }
}
/* Tablet: kutia e përfitimeve zë gjithë rreshtin, ndaj teksti majtas dhe kategoritë djathtas. */
@media (min-width: 681px) and (max-width: 1100px) {
  .kf-tile--perks { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 20px 32px; align-items: start; }
  .kf-tile--perks .kf-tile-tx { grid-row: span 2; }
  .kf-tile--perks .kf-partners { margin-top: 0; }
}
@media (max-width: 900px) {
  .kf-head, .ku-head, .kpr-head, .kn-head { grid-template-columns: minmax(0, 1fr); }
  .kf-head-t, .ku-head-t, .kpr-head-t, .kn-head-t { gap: 14px; }
}
@media (max-width: 680px) {
  .kf-tiles { grid-template-columns: minmax(0, 1fr); }
  .kf-tile { border-radius: 24px; }
  .kf-cats li { height: 32px; padding: 0 11px; font-size: 12.5px; }
  .kf-logos img:nth-child(n + 4) { display: none; }
  .kf-btn { justify-content: center; width: 100%; height: 54px; border-radius: 16px; font-size: 16px; }
}

/* =========================================================
   Bashkëpunime: logot e partnerëve si kuti, me zbritjen dhe kategorinë reale nga katalogu
   ========================================================= */
.kpa { margin-inline: calc(var(--kh-gut) * -1); padding: clamp(52px, 6vw, 88px) var(--kh-gut); background: var(--kh-bg); }
.kpa + .kess-home-section { border-top: 0; }
.kpa a { text-decoration: none; }
.kpa-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.kpa-head-t { display: grid; gap: 16px; justify-items: start; }
.kpa-eyebrow { margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--kh-red); color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
.kpa h2 { max-width: 22ch; margin: 0; color: var(--kh-blue); font-size: clamp(28px, 3.4vw, 50px); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
.kpa-all { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border: 1.5px solid var(--kh-navy); border-radius: 999px; color: var(--kh-navy); font-size: 14.5px; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s; }
.kpa-all:hover { background: var(--kh-navy); color: #fff; }
.kpa-all .kh-i { font-size: 17px; transition: transform .2s var(--kh-ease); }
.kpa-all:hover .kh-i { transform: translateX(3px); }
.kpa-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin: clamp(28px, 3.5vw, 44px) 0 0; padding: 0; list-style: none; }
.kpa-grid li { min-width: 0; }
.kpa-tile { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--kh-line); border-radius: 20px; background: #fff; color: var(--kh-ink); transition: border-color .2s, box-shadow .2s, transform .2s var(--kh-ease); }
a.kpa-tile:hover { border-color: var(--kh-navy); color: var(--kh-ink); box-shadow: 0 18px 34px -24px rgba(7, 16, 59, .5); transform: translateY(-2px); }
a.kpa-tile:focus-visible { outline: 3px solid var(--kh-red); outline-offset: 3px; }
.kpa-logo { display: grid; place-items: center; height: clamp(96px, 8vw, 116px); padding: 16px 18px; }
.kpa-logo img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.kpa-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 10px 14px; border-top: 1px solid var(--kh-line); }
.kpa-cat { min-width: 0; color: var(--kh-muted); font-size: 12px; font-weight: 500; line-height: 1.3; }
.kpa-badge { flex: none; padding: 4px 9px; border-radius: 999px; background: var(--kh-red); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.2; }

@media (max-width: 1100px) {
  .kpa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Telefon: 2 kolona; lidhja "Të gjitha" del poshtë logove, në gjithë gjerësinë. */
@media (max-width: 600px) {
  .kpa { display: flex; flex-direction: column; }
  .kpa-head { display: contents; }
  .kpa-head-t { order: 1; gap: 14px; }
  .kpa-grid { order: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpa-all { order: 3; width: 100%; height: 54px; margin-top: 18px; border-radius: 16px; font-size: 16px; }
  .kpa-logo { height: 84px; padding: 12px; }
  .kpa-meta { padding: 8px 10px; }
  .kpa-cat { font-size: 11px; }
}

/* =========================================================
   Për Bizneset: ftesë për institucionet dhe bizneset, në një panel navy me dy shifra reale
   ========================================================= */
.kb { padding: clamp(56px, 6vw, 96px) 0 clamp(24px, 3vw, 48px); }
.kb + .kess-home-section { border-top: 0; }
.kb a { text-decoration: none; }
.kb-panel { position: relative; display: grid; grid-template-areas: "copy types" "actions types"; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 28px clamp(32px, 5vw, 80px); align-items: start; overflow: hidden; padding: clamp(32px, 4.5vw, 64px); border-radius: 32px; background: var(--kh-navy); color: #fff; isolation: isolate; }
/* Dritë e butë e kuqe në cep: ngjyrë pa lëvizje. */
.kb-panel::before { content: ""; position: absolute; right: -12%; bottom: -45%; z-index: -1; width: 60%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(225, 40, 47, .3), rgba(225, 40, 47, 0)); pointer-events: none; }
.kb-copy { grid-area: copy; display: grid; gap: 16px; justify-items: start; min-width: 0; }
.kb-eyebrow { margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--kh-red); color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
.kb h2 { margin: 0; color: #fff; font-size: clamp(28px, 3.4vw, 50px); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; }
.kb-question { margin: 4px 0 0; color: #fff; font-size: clamp(17px, 1.3vw, 20px); font-weight: 600; line-height: 1.4; }
.kb-text { max-width: 48ch; margin: 0; color: rgba(255, 255, 255, .74); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7; }
.kb-stats { display: flex; flex-wrap: wrap; gap: 16px clamp(28px, 4vw, 56px); width: 100%; margin: 12px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); }
/* column-reverse: "flex-end" i mban shifrat lart, në të njëjtën vijë edhe kur një etiketë thyhet në dy rreshta. */
.kb-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; }
.kb-stats dd { margin: 0; font-size: clamp(34px, 3.4vw, 50px); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; }
.kb-stats dt { color: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.kb-types { grid-area: types; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.kb-types li { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 22px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; background: rgba(255, 255, 255, .05); }
.kb-ic { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 6px; border-radius: 13px; background: #fff; color: var(--kh-red); font-size: 19px; }
.kb-types h3 { margin: 0; color: #fff; font-size: 17px; font-weight: 600; line-height: 1.3; }
.kb-types p { margin: 0; color: rgba(255, 255, 255, .7); font-size: 14px; line-height: 1.6; }

.kb-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-self: end; gap: 12px; }
.kb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 24px; border: 1.5px solid transparent; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, transform .2s var(--kh-ease); }
.kb-btn .kh-i { font-size: 18px; transition: transform .2s var(--kh-ease); }
.kb-btn--red { background: var(--kh-red); color: #fff; box-shadow: 0 14px 28px -14px rgba(225, 40, 47, .9); }
.kb-btn--red:hover { background: var(--kh-red-d); color: #fff; transform: translateY(-1px); }
.kb-btn--red:hover .kh-i { transform: translateX(3px); }
.kb-btn--ghost { border-color: rgba(255, 255, 255, .35); color: #fff; }
.kb-btn--ghost:hover { border-color: #fff; color: #fff; }
.kb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 900px) {
  .kb-panel { grid-template-areas: "copy" "types" "actions"; grid-template-columns: minmax(0, 1fr); }
}
/* Telefon: llojet njëri pas tjetrit (ikona majtas), butonat në gjithë gjerësinë. */
@media (max-width: 600px) {
  .kb-panel { padding: 28px 20px; border-radius: 24px; }
  /* Dy shifrat krah për krah; etiketa thyhet në dy rreshta. */
  .kb-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .kb-stats dt { font-size: 11px; line-height: 1.35; }
  .kb-types { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .kb-types li { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; padding: 16px; }
  .kb-types p { font-size: 13.5px; }
  .kb-ic { grid-row: span 2; margin: 0; }
  .kb-actions { flex-direction: column; }
  .kb-btn { width: 100%; height: 54px; border-radius: 16px; font-size: 16px; }
}

/* =========================================================
   Për çfarë të përdorni kartën: 4 përdorimet si karta, me ngjyrat e shkurtoreve të aplikacionit
   ========================================================= */
.ku { padding: clamp(56px, 6vw, 96px) 0 clamp(48px, 5vw, 80px); }
.ku + .kess-home-section { border-top: 0; }
.ku a { text-decoration: none; }
.ku-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: clamp(28px, 3.5vw, 48px) 0 0; padding: 0; list-style: none; }
.ku-grid li { min-width: 0; }
/* Ngjyra e lehtë për ikonën, e errëta për tekstin (lexohet mirë mbi të bardhë). */
.ku-blue { --ku: #3b82f6; --ku-bg: #eff6ff; --ku-ink: #1d4ed8; }
.ku-purple { --ku: #a855f7; --ku-bg: #faf5ff; --ku-ink: #7e22ce; }
.ku-green { --ku: #10b981; --ku-bg: #ecfdf5; --ku-ink: #047857; }
.ku-orange { --ku: #f97316; --ku-bg: #fff7ed; --ku-ink: #c2410c; }
.ku-card { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; overflow: hidden; padding: clamp(22px, 2vw, 28px); border: 1px solid var(--kh-line); border-radius: 24px; background: #fff; color: var(--kh-ink); isolation: isolate; transition: border-color .2s, box-shadow .2s, transform .2s var(--kh-ease); }
a.ku-card:hover { border-color: var(--ku); color: var(--kh-ink); box-shadow: 0 20px 36px -26px rgba(7, 16, 59, .45); transform: translateY(-2px); }
a.ku-card:focus-visible { outline: 3px solid var(--kh-red); outline-offset: 3px; }
.ku-ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 16px; background: var(--ku-bg); color: var(--ku); font-size: 24px; }
.ku-card h3 { margin: 0; color: var(--kh-navy); font-size: clamp(22px, 1.8vw, 26px); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.ku-card p { margin: 0; color: var(--kh-muted); font-size: 15px; line-height: 1.6; }
.ku-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; color: var(--ku-ink); font-size: 14px; font-weight: 600; }
.ku-go .kh-i { font-size: 16px; transition: transform .2s var(--kh-ease); }
a.ku-card:hover .ku-go .kh-i { transform: translateX(3px); }
/* Ikona e madhe e zbehtë në cep: ngjyrë pa lëvizje. */
.ku-mark { position: absolute; right: -30px; bottom: -34px; z-index: -1; width: 120px; height: 120px; color: var(--ku); opacity: .08; stroke-width: 1.5; transition: opacity .2s; }
a.ku-card:hover .ku-mark { opacity: .14; }

@media (max-width: 1100px) {
  .ku-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Telefon: kartat njëra pas tjetrës, ikona majtas. */
@media (max-width: 600px) {
  .ku-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ku-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 4px 16px; padding: 18px; border-radius: 20px; }
  .ku-ic { grid-row: span 3; width: 46px; height: 46px; margin: 0; border-radius: 14px; font-size: 21px; }
  .ku-card h3 { font-size: 20px; }
  .ku-card p { font-size: 14px; }
  .ku-go { padding-top: 6px; font-size: 13.5px; }
  .ku-mark { width: 90px; height: 90px; }
}

/* =========================================================
   Procesi i aplikimit: hapat si vijë kohore, që mbaron te karta në përdorim, me butonin e aplikimit pas saj
   ========================================================= */
.kpr { margin-inline: calc(var(--kh-gut) * -1); padding: clamp(56px, 6vw, 96px) var(--kh-gut); background: var(--kh-bg); }
.kpr + .kess-home-section { border-top: 0; }
.kpr a { text-decoration: none; }
.kpr-intro { display: grid; gap: 6px; }
.kpr-question { margin: 0; color: var(--kh-navy); font-size: clamp(17px, 1.3vw, 20px); font-weight: 600; line-height: 1.4; }
.kpr-text { margin: 0; color: var(--kh-muted); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7; }

/* Rrathët lidhen me një vijë; hapi i fundit (karta në përdorim) është i kuq. */
.kpr-steps { --dot: 56px; --gap: clamp(16px, 2vw, 28px); display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--gap); margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
.kpr-steps li { position: relative; display: grid; align-content: start; gap: 10px; min-width: 0; }
.kpr-steps li:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--dot) / 2 - 1px); right: calc(var(--gap) * -1 + 10px); left: calc(var(--dot) + 10px); height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, #c9d3e0 0 8px, transparent 8px 14px); }
.kpr-dot { display: grid; place-items: center; width: var(--dot); height: var(--dot); margin-bottom: 8px; border: 2px solid var(--kh-navy); border-radius: 50%; background: #fff; color: var(--kh-navy); font-size: 22px; }
.kpr-steps .is-goal .kpr-dot { border-color: var(--kh-red); background: var(--kh-red); color: #fff; box-shadow: 0 14px 28px -14px rgba(225, 40, 47, .9); }
.kpr-n { color: var(--kh-red-d); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.kpr-steps p { max-width: 30ch; margin: 0; color: var(--kh-ink); font-size: 16px; line-height: 1.6; }

.kpr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(36px, 4vw, 56px); }
.kpr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border: 1.5px solid transparent; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, transform .2s var(--kh-ease); }
.kpr-btn .kh-i { font-size: 18px; transition: transform .2s var(--kh-ease); }
.kpr-btn--red { background: var(--kh-red); color: #fff; box-shadow: 0 14px 28px -14px rgba(225, 40, 47, .9); }
.kpr-btn--red:hover { background: var(--kh-red-d); color: #fff; transform: translateY(-1px); }
.kpr-btn--red:hover .kh-i { transform: translateX(3px); }
.kpr-btn--ghost { border-color: var(--kh-line); background: #fff; color: var(--kh-navy); }
.kpr-btn--ghost:hover { border-color: var(--kh-navy); color: var(--kh-navy); }

@media (max-width: 900px) {
  /* Vija kohore bëhet vertikale: rrethi majtas, teksti djathtas. */
  .kpr-steps { --dot: 48px; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kpr-steps li { grid-template-columns: var(--dot) minmax(0, 1fr); column-gap: 16px; row-gap: 2px; padding-bottom: 26px; }
  .kpr-steps li:last-child { padding-bottom: 0; }
  .kpr-steps li:not(:last-child)::after { top: calc(var(--dot) + 6px); right: auto; bottom: 6px; left: calc(var(--dot) / 2 - 1px); width: 2px; height: auto; background: repeating-linear-gradient(180deg, #c9d3e0 0 8px, transparent 8px 14px); }
  .kpr-dot { grid-row: span 2; margin: 0; font-size: 20px; }
  .kpr-n { padding-top: 4px; }
  .kpr-steps p { max-width: none; font-size: 15px; }
}
@media (max-width: 600px) {
  .kpr-actions { flex-direction: column; }
  .kpr-btn { width: 100%; height: 54px; border-radius: 16px; font-size: 16px; }
}

/* =========================================================
   FAQ: pyetjet si fizarmonikë (hapet një në një herë, pa JavaScript), kontakti anash
   ========================================================= */
.kfq { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px clamp(32px, 5vw, 88px); align-items: start; padding: clamp(56px, 6vw, 96px) 0 clamp(48px, 5vw, 80px); }
.kfq + .kess-home-section { border-top: 0; }
.kfq a { text-decoration: none; }
.kfq-side { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.kfq-eyebrow { margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--kh-red); color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
.kfq h2 { margin: 0; color: var(--kh-blue); font-size: clamp(28px, 3vw, 44px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.kfq-contact { display: grid; gap: 6px; justify-items: start; width: 100%; margin-top: 12px; padding: 24px; border-radius: 24px; background: var(--kh-navy); color: #fff; }
.kfq-ic { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 8px; border-radius: 13px; background: rgba(255, 255, 255, .1); font-size: 19px; }
.kfq-contact b { font-size: 17px; font-weight: 600; }
.kfq-contact p { margin: 0; color: rgba(255, 255, 255, .74); font-size: 14.5px; line-height: 1.6; }
.kfq-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; margin-top: 12px; padding: 0 20px; border-radius: 999px; background: var(--kh-red); color: #fff; font-size: 14.5px; font-weight: 600; transition: background .2s, transform .2s var(--kh-ease); }
.kfq-btn:hover { background: var(--kh-red-d); color: #fff; transform: translateY(-1px); }
.kfq-btn .kh-i { font-size: 17px; transition: transform .2s var(--kh-ease); }
.kfq-btn:hover .kh-i { transform: translateX(3px); }
.kfq-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.kfq-list { display: grid; gap: 10px; min-width: 0; }
/* ".kfq .kfq-item" mbi ".kess-home details" të style.css. */
.kfq .kfq-item { max-width: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--kh-line); border-radius: 18px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.kfq .kfq-item[open] { border-color: var(--kh-navy); background: #fff; box-shadow: 0 16px 30px -24px rgba(7, 16, 59, .45); }
.kfq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 18px 22px; color: var(--kh-navy); font-size: 16.5px; font-weight: 600; line-height: 1.4; list-style: none; cursor: pointer; }
.kfq summary::-webkit-details-marker { display: none; }
.kfq summary:hover { color: var(--kh-red); }
.kfq summary:focus-visible { outline: 3px solid var(--kh-red); outline-offset: -3px; border-radius: 18px; }
/* Plus që bëhet minus kur pyetja hapet. */
.kfq-pm { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--kh-tint); transition: background .2s; }
.kfq-pm::before, .kfq-pm::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--kh-navy); transform: translate(-50%, -50%); transition: transform .25s var(--kh-ease), background .2s; }
.kfq-pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.kfq-item[open] .kfq-pm { background: var(--kh-red); }
.kfq-item[open] .kfq-pm::before, .kfq-item[open] .kfq-pm::after { background: #fff; }
.kfq-item[open] .kfq-pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.kfq .kfq-item p { max-width: 62ch; margin: -4px 0 0; padding: 0 22px 20px; color: var(--kh-muted); font-size: 15px; line-height: 1.7; }

@media (max-width: 900px) {
  .kfq { grid-template-columns: minmax(0, 1fr); }
  .kfq-side { display: contents; }
  .kfq-eyebrow { order: 1; justify-self: start; }
  .kfq h2 { order: 2; }
  .kfq-list { order: 3; }
  .kfq-contact { order: 4; margin-top: 8px; }
}
@media (max-width: 600px) {
  .kfq summary { padding: 16px 14px 16px 18px; font-size: 15.5px; }
  .kfq .kfq-item p { padding: 0 18px 18px; font-size: 14.5px; }
  .kfq-btn { justify-content: center; width: 100%; height: 52px; border-radius: 16px; font-size: 16px; }
}

/* =========================================================
   Çfarë Po Ndodh: lajmet më të reja, të lexuara drejt nga WordPress
   ========================================================= */
.kn { margin-inline: calc(var(--kh-gut) * -1); padding: clamp(56px, 6vw, 96px) var(--kh-gut); background: var(--kh-bg); }
/* Seksioni i fundit shkon deri te footer-i, pa hapësirë të bardhë mes tyre. */
.kess-home:has(> .kn:last-child) { padding-bottom: 0; }
.kn a { text-decoration: none; }
.kn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(28px, 3.5vw, 48px); }
.kn-item { min-width: 0; }
.kn-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--kh-line); border-radius: 24px; background: #fff; color: var(--kh-ink); transition: border-color .2s, box-shadow .2s, transform .2s var(--kh-ease); }
.kn-card:hover { border-color: var(--kh-navy); color: var(--kh-ink); box-shadow: 0 22px 40px -28px rgba(7, 16, 59, .5); transform: translateY(-2px); }
.kn-card:focus-visible { outline: 3px solid var(--kh-red); outline-offset: 3px; }
.kn-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--kh-tint); }
.kn-img, .kn-noimg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .5s var(--kh-ease); }
.kn-noimg { display: grid; place-items: center; color: var(--kh-blue); font-size: 40px; }
.kn-card:hover .kn-img { transform: scale(1.03); }
.kn-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: clamp(20px, 2vw, 26px); }
.kn-date { display: inline-flex; align-items: center; gap: 7px; color: var(--kh-muted); font-size: 13px; font-weight: 500; }
.kn-date .kh-i { font-size: 15px; }
.kn-card h3 { margin: 0; color: var(--kh-navy); font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.kn-excerpt { display: -webkit-box; margin: 0; overflow: hidden; color: var(--kh-muted); font-size: 15px; line-height: 1.6; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.kn-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; color: var(--kh-red); font-size: 14px; font-weight: 600; }
.kn-more .kh-i { font-size: 16px; transition: transform .2s var(--kh-ease); }
.kn-card:hover .kn-more .kh-i { transform: translateX(3px); }
/* Vetëm një lajm: fotoja majtas, teksti djathtas, që kutia të mos dalë e gjerë dhe bosh. */
.kn-item:only-child .kn-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.kn-item:only-child .kn-media { aspect-ratio: auto; min-height: 280px; }

@media (max-width: 680px) {
  .kn-item:only-child .kn-card { display: flex; }
  .kn-item:only-child .kn-media { aspect-ratio: 16 / 9; min-height: 0; }
  .kn-card { border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .kh *, .kh *::before, .kh *::after, .kp *, .kp *::before, .kp *::after, .kf *, .kf *::before, .kf *::after, .kpa *, .kpa *::before, .kpa *::after, .kb *, .kb *::before, .kb *::after, .ku *, .ku *::before, .ku *::after, .kpr *, .kpr *::before, .kpr *::after, .kfq *, .kfq *::before, .kfq *::after, .kn *, .kn *::before, .kn *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }
  /* Nuk ka kalim automatik, ndaj as butoni për ta ndalur. */
  .kp-play { display: none; }
}